@charset "UTF-8";
/*****************************************************************************************************************************************
	Noto 폰트 사용법 : font-weight: 400;- 레귤러 / font-weight: 500;- 미디움 / font-weight: 700;- 볼드
     Lato 폰트 사용법(숫자/가격) :  font-weight: 400;- 레귤러 / font-weight: 700;- 볼드
*****************************************************************************************************************************************/
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url(font/NotoSans-Regular.eot);
  src: url(font/NotoSans-Regular.eot?#iefix) format("embedded-opentype"), url(font/NotoSans-Regular.woff2) format("woff2"), url(font/NotoSans-Regular.woff) format("woff"), url(font/NotoSans-Regular.otf) format("truetype");
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  src: url(font/NotoSans-Medium.eot);
  src: url(font/NotoSans-Medium.eot?#iefix) format("embedded-opentype"), url(font/NotoSans-Medium.woff2) format("woff2"), url(font/NotoSans-Medium.woff) format("woff"), url(font/NotoSans-Medium.otf) format("truetype");
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url(font/NotoSans-Bold.eot);
  src: url(font/NotoSans-Bold.eot?#iefix) format("embedded-opentype"), url(font/NotoSans-Bold.woff2) format("woff2"), url(font/NotoSans-Bold.woff) format("woff"), url(font/NotoSans-Bold.otf) format("truetype");
}

@font-face {
  font-family: 'Lato';
  src: url(font/lato-regular.eot);
  src: local("Lato Regular"), local("Lato-Regular"), url(font/lato-regular.eot?#iefix) format("embedded-opentype"), url(font/lato-regular.woff2) format("woff2"), url(font/lato-regular.woff) format("woff"), url(font/lato-regular.ttf) format("truetype"), url(font/lato-regular.svg#lato) format("svg");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url(font/lato-bold.eot);
  src: local("Lato Bold"), local("Lato-Bold"), url(font/lato-bold.eot?#iefix) format("embedded-opentype"), url(font/lato-bold.woff2) format("woff2"), url(font/lato-bold.woff) format("woff"), url(font/lato-bold.ttf) format("truetype"), url(font/lato-bold.svg#lato) format("svg");
  font-weight: 700;
  font-style: normal;
}

/* 나눔고딕 기본값을 초기값으로 지정, 아이폰 폰트 사이즈 변환방지 설정 */
html, body {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #333;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -webkit-overflow-scrolling: touch;
  /*2016.11.07*/
}

/*html.scroll, body.scroll {overflow-y:hidden;}*/
/* 2019-09-03 크롬 포커스 삭제 추가 */
input,
select,
textarea:focus {
  outline: none;
}

/* html5 태그 초기 설정 값 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, select, input, textarea, p, blockquote, th, td, figure, figcaption {
  margin: 0;
  padding: 0;
}

header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  font-size: 18px;
}

img, legend, fieldset, button {
  border: 0 none;
  max-width: 100%;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  *font-weight: inherit;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
}

caption, legend {
  width: 0;
  height: 0;
  line-height: 0;
  visibility: hidden;
  font-size: 0;
}

ul, ol, li {
  list-style-type: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

hr {
  display: none;
}

em {
  font-style: normal;
}

strong, b {
  font-weight: 700;
}

textarea {
  resize: none;
}

a, a:link, a:visited, a:active {
  color: #333;
  text-decoration: none;
}

a:hover {
  color: #333;
}

a[class~="btn"] {
  vertical-align: middle;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  text-decoration: none;
}

img {
  display: block;
}

/* 레이아웃 */
.wrap {
  position: relative;
  height: 100%;
}

.coachmark_wrap {
  position: static;
  height: auto;
}

#container {
  *zoom: 1;
  /*min-height: 100%;*/
}

/*푸터 하단 고정*/
/*#container .container_inner{padding:48px 0 183px;} 푸터 하단 고정*/
/*body header{margin-bottom: -48px;} /*푸터 하단 고정*/
/*body .footer{margin-top: -183px; height:183px;} /*푸터 하단 고정*/
#container:atter {
  display: block;
  clear: both;
  content: '';
}

.sample-code table {
  table-layout: inherit;
}

/* 2019-08-19 추가 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
}

*::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* ir 처리 및 숨김영역 공통 */
.blind {
  font-size: 0;
  height: 1px !important;
  position: absolute !important;
  top: -9999px !important;
  width: 1px !important;
}

/* 한줄 텍스트 줄임표 설정 */
.ellipsis {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  /* 라인수 */
  -webkit-box-orient: vertical;
  padding-right: 1px;
  word-wrap: break-word;
  line-height: 1.6rem;
  white-space: normal;
}

/* 두줄 텍스트 줄임표 설정 */
.ellipsis2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  /* 라인수 */
  -webkit-box-orient: vertical;
  padding-right: 1px;
  word-wrap: break-word;
  line-height: 1.6rem;
  white-space: normal;
}

.price, .number {
  font-family: 'Lato', sans-serif;
}

/* 스킵네비게이션 */
#skipnavi a {
  display: block;
  position: absolute;
  top: -1000px;
  left: 0;
  width: 100%;
  height: 1px;
  color: #222;
  overflow: hidden;
  z-index: 99999999;
}

#skipnavi a:focus, #skipnavi a:hover, #skipnavi a:active {
  top: 0px;
  left: 0;
  background-color: #e9e9e9;
  padding: 7px 0 5px;
  height: auto;
  color: #000;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

/*****************************************************************************************************************************************
	form 요소 절대값 정의
*****************************************************************************************************************************************/
button {
  display: block;
  padding: 0;
  font-family: 'Noto Sans';
  font-weight: 400;
  vertical-align: middle;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  cursor: pointer;
  background-color: transparent;
  color: #333;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

button span {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

label {
  display: inline-block;
  vertical-align: middle;
}

select[disabled='disabled'], input[disabled='disabled'], .disabled {
  background-color: #f0f0f0;
  border: 1px solid #d9d9d9;
  cursor: default;
}

select[readonly='readonly'], input[readonly='readonly'], .readonly {
  /*border: 1px solid #d9d9d9;*/
  color: #333;
  background-color: #f3f3f3;
}

input[type="text"]::-ms-clear {
  display: none;
}

input[type="text"], input[type="password"], input[type="number"], input[type="tel"], textarea {
  -webkit-border-radius: 0;
  -webkit-appearance: none;
}

/* 익스 10, 11에서 입풋창에 생성되는 텍스트 삭제 버튼제어 */
/* placeholder color 적용 */
::-webkit-input-placeholder {
  color: #cfcfcf;
}

/* WebKit, Blink, Edge */
:-moz-placeholder {
  color: #cfcfcf;
}

/* Mozilla Firefox 4 to 18 */
::-moz-placeholder {
  color: #cfcfcf;
}

/* Mozilla Firefox 19+ */
:-ms-input-placeholder {
  color: #cfcfcf;
}

/* Internet Explorer 10-11 */
.inputText, .selectText, .textArea, .inputFile {
  width: 100%;
  font-size: 15px;
  font-family: 'Noto Sans';
  font-weight: 400;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

/* 익스 9부터 적용가능, 아이폰 둥근 모서리 설정빼기 */
/* 정렬 */
.mc {
  margin: 0 auto;
}

.wauto {
  width: auto !important;
}

.w10 {
  width: 10% !important;
}

.w24 {
  width: 24% !important;
}

.w30 {
  width: 30% !important;
}

.w35 {
  width: 35% !important;
}

.w40 {
  width: 40% !important;
}

.w47 {
  width: 47% !important;
}

.w50 {
  width: 50% !important;
}

.w55 {
  width: 55% !important;
}

.w58 {
  width: 58% !important;
}

.w65 {
  width: 65% !important;
}

.w67 {
  width: 67% !important;
}

.w70 {
  width: 70% !important;
}

.w77 {
  width: 77% !important;
}

.w78 {
  width: 78% !important;
}

.w85 {
  width: 85% !important;
}

.w86 {
  width: 86% !important;
}

.w100 {
  width: 100% !important;
}

.mg0 {
  margin: 0 !important;
}

.mgt_5 {
  margin-top: -5px !important;
}

.mgt0 {
  margin-top: 0 !important;
}

.mgt4 {
  margin-top: 4px !important;
}

.mgt5 {
  margin-top: 5px !important;
}

.mgt7 {
  margin-top: 7px !important;
}

.mgt10 {
  margin-top: 10px;
}

.mgt15 {
  margin-top: 15px !important;
}

.mgt16 {
  margin-top: 16px !important;
}

.mgt20 {
  margin-top: 20px !important;
}

.mgt22 {
  margin-top: 22px !important;
}

.mgt30 {
  margin-top: 30px !important;
}

.mgb0 {
  margin-bottom: 0 !important;
}

.mgb6 {
  margin-bottom: 6px !important;
}

.mgb10 {
  margin-bottom: 10px !important;
}

.mgb15 {
  margin-bottom: 15px !important;
}

.mgb20 {
  margin-bottom: 20px !important;
}

.mgb25 {
  margin-bottom: 25px !important;
}

.mgr0 {
  margin-right: 0 !important;
}

.mgr10 {
  margin-right: 10px !important;
}

.pt0 {
  padding-top: 0 !important;
}

.pdt18 {
  padding-top: 18px !important;
}

.pd0 {
  padding: 0 !important;
}

.pd5 {
  padding: 22px 3.74%;
}

.pd4 {
  padding: 4% !important;
}

.pdl0 {
  padding-left: 0 !important;
}

.pdl15 {
  padding-left: 15px !important;
}

.pdl25 {
  padding-left: 25px !important;
}

.pdb0 {
  padding-bottom: 0 !important;
}

.pdb10 {
  padding-bottom: 10px !important;
}

.pdb15 {
  padding-bottom: 15px !important;
}

.pdb30 {
  padding-bottom: 30px !important;
}

.pdb40 {
  padding-bottom: 40px !important;
}

.pdb60 {
  padding-bottom: 60px !important;
}

.pdr25per {
  padding-right: 25%;
}

.innerWrap {
  padding: 22px 3.74%;
}

.innerWrap2 {
  padding: 15px 3.74%;
}

.innerWrap.sliderQr {
  min-height: 170px;
}

.pside {
  padding: 0 3.74%;
}

.mside {
  margin: 0 3.74%;
}

.innerWrap.other {
  padding: 25px 3.5%;
}

.tiNo {
  text-indent: 0 !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.pdlrNo {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.fs16 {
  font-size: 16px !important;
}

.fs18 {
  font-size: 18px;
}

.fs40 {
  font-size: 40px !important;
}

.pw {
  position: relative;
}

.pl {
  position: absolute;
  left: 0;
  top: 0;
}

.pr {
  position: absolute;
  right: 0;
  top: 0;
}

.al {
  text-align: left !important;
}

.ar {
  text-align: right !important;
}

.ac {
  text-align: center !important;
}

.fl {
  float: left !important;
}

.fr {
  float: right !important;
}

.fn {
  float: none !important;
}

.flClear {
  overflow: hidden;
  z-index: 1;
}

.cl {
  clear: both;
}

.clfix:after {
  content: ".";
  display: block;
  height: 0px;
  clear: both;
  visibility: hidden;
}

.clfix {
  display: inline-block;
}

.clfix {
  display: block;
}

* html .clfix {
  height: 1%;
}

/* Hides from IE-mac */
.clfix {
  zoom: 1;
}

/*for IE 5.5-7*/
.vt {
  vertical-align: top !important;
}

.bdn {
  border: 0 !important;
}

hr.division {
  display: block;
  height: 10px;
  margin: 0;
  border-width: 1px 0 0 0;
  border-top: 1px solid #aaa;
  background-color: #ccc;
}

.borderB {
  border-bottom: 1px solid #ccc;
}

.borderT {
  border-top: 1px solid #ccc;
}

.borderR {
  border-left: 1px solid #ccc;
}

.bln {
  border-left: 0 none !important;
}

.imgborder {
  border: 1px solid #eee;
}

.table_pd8 {
  padding: 8px 0 !important;
}

/* 텍스트 */
.inlineblock {
  display: inline-block !important;
}

.indent0 {
  text-indent: 0 !important;
}

.block {
  display: block !important;
  text-indent: 0;
}

.txtBold {
  font-weight: 700;
}

.typeNumber {
  font-family: 'Lato';
}

.underline {
  text-decoration: underline !important;
}

/* 이미지 세로 중앙정렬 */
.imgCenWrap {
  display: table;
  width: 100%;
}

.imgCen {
  display: table-cell;
  vertical-align: middle;
}

/* color */
/*.bgColor{background-color: #ccc;}*/
.bgColor2 {
  background-color: #eee;
}

.bgColor3 {
  background-color: #fff !important;
}

.bgColor.darkGray {
  background-color: #d9d9d9;
}

.txtColorType01 {
  color: #2ea4ff !important;
}

/* blue */
.txtColorType02 {
  color: #f76369 !important;
}

/* pink */
.txtColorType03, table td.txtColorType03 {
  color: #e12f36 !important;
}

/* red */
.txtColorType04 {
  color: #2b72c9 !important;
}

/* purple */
.txtColorType05 {
  color: #505050 !important;
}

/* purple */
.txtColorType06 {
  color: #777 !important;
}

/* gray */
.txtColorType07 {
  color: #2b72c9 !important;
}

/* blue */
.txtColorType08 {
  color: #0b75be !important;
}

.txtColorType09 {
  color: #ef9109 !important;
}

.txtColorType10 {
  color: #007bc7 !important;
}

.txtColorType11 {
  color: #de1827 !important;
}

.txtColorType_sk {
  color: #714fb3 !important;
}

/* 딤처리 */
.dm {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 10;
}