@charset "utf-8";
@import url(base.css);

/* 20200803 수정 - s */
@font-face{
	font-family:"NanumBarunGothic";
	src:url('../fonts/NanumBarunGothic.eot');
	src:url('../fonts/NanumBarunGothic.eot?#iefix') format('embedded-opentype'),
	url('../fonts/NanumBarunGothic.woff') format('woff'),
	url('../fonts/NanumBarunGothic.ttf') format('truetype');
	src:local(※), url('../fonts/NanumBarunGothic.woff') format('woff');
}
/* 20200803 수정 - e */


html {overflow-x:hidden; width:100%; height:100%;}

body {padding:0; margin:0; font-size:15px; line-height:120%; font-family:Apple Gothic, Apple SD Gothic Neo Light,NanumBarunGothic,"나눔바른고딕", "돋움", Dotum, "Lucida Grande",Helvetica,Tahoma, Verdana, sans-serif; letter-spacing:-0.3px; color:#333333; overflow-x:hidden; width:100%; height:100%; }

a { color:#333333; }
input {font-family:Apple Gothic, Apple SD Gothic Neo Light,NanumBarunGothic,"나눔바른고딕", "돋움", Dotum, "Lucida Grande", Helvetica, Tahoma, Verdana, sans-serif;}


/* ============
	기본레이아웃
===============	*/

.wrap {position:relative; width:100%; background:#fff; }

/* header */
#header { position:relative; width:100%; height:45px; background:#fff; border-bottom:1px solid #252525; color:#252525; z-index:100; }
#header h1 { height:45px; text-align:center; font-size:19px; line-height:45px; font-weight:normal; }
	#header h1 img { vertical-align:middle; }
	#header.plus h1 img { height:47%; }
	#header.fz h1 img { height:43%; }
	#header.bh h1 img { height:35%; }
	#header.basso h1 img { height:35%; }
#header .btn_store { position:absolute; top:0; left:10px; font-size:24px; line-height:45px; }
#header .btn_back { position:absolute; top:0; left:5px; font-size:21px; line-height:45px; }
#header .btn_gnb { position:absolute; top:0; right:10px; font-size:24px; line-height:45px; text-align:right; }
	#header i { vertical-align:middle; }

/* footer */
#footer	{ width:100%; background:#ececec; }
#footer	div { text-align:center; height:35px; }
#footer	div a { display:inline-block; font-size:0.9em; color:#7d7d7d; line-height:35px; margin-left:12px; letter-spacing:normal; }
#footer	div a:first-child { margin-left:0px; }
#footer div a i { vertical-align:middle; margin-right:2px; color:#959595; }
#footer p { padding:12px 0; text-align:center; background:#fff; color:#898989; font-size:0.7em; letter-spacing:normal; }
	#footer p.notCallInfo { padding:0 0 12px 0; margin-top:-10px; text-align:center; background:#fff; color:#707070; font-size:0.9em; letter-spacing:normal; }
	#footer p.notCallInfo i { vertical-align:middle; margin-right:4px; font-size:1.1em; }
	#footer p.notCallInfo a { color:#707070; }

/* GNB */
.gnb_deemLayer {position:fixed; _position:absolute; top:0; left:0; z-index:1000; width:100%; height:100%; background:rgba(0,0,0,0.6);}
#gnb { display:none; position:absolute; width:72%; height:100%; top:0; right:-72%; z-index:1001; overflow:auto; }
#gnb .inner { height:auto; min-height:100%; width:100%; background:#1d1e20; }
#gnb .top_ico { width:100%; height:45px; padding:11px 15px; box-sizing:border-box; border-bottom:1px solid #3f4041; }
	#gnb .top_ico:after {content:""; clear:both; display:block;}
	#gnb .top_ico a { display:inline-block; height:100%; }
	#gnb .top_ico a:first-child { float:left; }
	#gnb .top_ico a:first-child img { height:85%; }
	#gnb .top_ico a:last-child { float:right; }
	#gnb .top_ico a:last-child i { color:#a1a1a1; font-size:20px; }
#gnb .gnb_menu { margin:15px 0; }
	#gnb .gnb_menu li, #gnb .gnb_menu li a {  box-sizing:border-box; }
	#gnb .gnb_menu > li > a { display:block; width:100%; padding:13px 15px 13px 15px; color:#fff; font-size:1.0em; letter-spacing:normal; }
	#gnb .gnb_menu > li > a img { margin:0 13px 0 3px; width:17px; vertical-align:middle; }
	#gnb .gnb_menu > li.on > a { font-weight:bold; }
	#gnb .gnb_menu ul { display:none; padding:0 5px 5px 45px; margin-top:-5px; }
	#gnb .gnb_menu ul li a { display:block; width:100%; font-size:16px; padding:3px 0 3px 5px; color:#e1e1e1; font-size:0.9em; letter-spacing:normal; }
	#gnb .gnb_menu ul li a i { vertical-align:text-top }
#gnb .sns { width:100%; background:url(../images/line_type01.gif) 2px 0 repeat-x; background-size:3px; display:table; table-layout:fixed; padding-top:4px; }
	#gnb .sns li { display:table-cell;  border-left:1px solid #4a4b4d; }
	#gnb .sns li:first-child { border-left:none; }
	#gnb .sns li a { display:inline-block; width:100%; height:100%; padding:25px 0; text-align:center; }
	#gnb .sns li img { width:16px; }
#gnb .brand { width:100%; background:url(../images/line_type01.gif) 2px 0 repeat-x; background-size:3px; padding-top:5px;  }
	#gnb .brand li { border-bottom:1px solid #4a4b4d; }
	#gnb .brand li a { display:inline-block; width:100%; height:100%; padding:10px 0 7px 0; text-align:center; }
	#gnb .brand li img { height:16px; }


#container { overflow:hidden; width:100%; padding-bottom:40px; }

.loadingBox {width:100%; height:65px; background:#e3e3e3 url(../img/common/loadingBar01.gif) center center no-repeat; background-size:34px;}



/* ============
	메인 페이지
===============	*/
.mn_visual img { width:100%; }
.mn_con_area h2 { font-weight:normal; font-size:22px; text-align:center; margin:30px 0; }
	.mn_con_area h2 span { font-size:14px; padding:0 10px; }
	.mn_con_area h2 em { display:block; font-weight:normal; font-size:13px; color:#707070; }
	.mn_con_area h2:after { content:""; display:inline-block; height:30px; width:1px; margin-top:15px; border-left:1px solid #000; }

.mn_con_area a { display:inline-block; width:100px; height:30px; line-height:30px; text-align:center; text-transform:uppercase; font-size:14px; border:1px solid #898989; background:rgba(255,255,255,0.5) }
.mn_con_area img { vertical-align:bottom; }

.mn_con_area .mn_con1 { position:relative; height:auto; padding:0 45px; box-sizing:border-box; }
.mn_con_area .mn_con1 img { width:100%; }
.mn_con_area .mn_con1 a { position:absolute; }
	.mn_con_area.plus .mn_con1 a { top:50%; right:50%; margin-top:-15px; }
	.mn_con_area.fz .mn_con1 a { top:50%; right:50%; margin-top:-15px; }
	.mn_con_area.bassoh .mn_con1 a { top:50%; left:50%; margin-top:-15px; }
	.mn_con_area.basso .mn_con1 a { top:50%; right:50%; margin-top:-15px; }
.mn_con_area .mn_con2 { padding:0 45px; box-sizing:border-box; }
.mn_con_area .mn_con2 ul { margin-top:40px; }
	.mn_con_area .mn_con2 ul:after {content:""; clear:both; display:block;}
.mn_con_area .mn_con2 li { float:left; width:50%; box-sizing:border-box;}
	.mn_con_area .mn_con2 li:first-child {padding-right:20px; }
	.mn_con_area .mn_con2 li:last-child {padding-left:20px; }
	.mn_con_area .mn_con2 li img { width:100%; }
	.mn_con_area .mn_con2 li a { display:block; margin:10px auto 0 auto; }



/* ============
	컨텐츠
===============	*/
#container .img_100p img { width:100%; vertical-align:bottom; }

.data_none { text-align:center; padding:70px 0 !important; font-size:1.2em; color:#959595;  }
.data_none i { color:#ccc; margin-right:4px; font-size:1.1em; vertical-align:middle; }

.con_area { font-size:0.85em; line-height:1.6em; }
	.con_area em, .con_area h2 { font-size:16px; letter-spacing:normal; text-transform:uppercase; }
	.con_area p { /* text-align:justify; */ }
.ico_circle { display:block; }
	.ico_circle i { font-size:7px; margin-right:2px; }

/* 컨셉 */
.concept ul { margin-top:30px; width:100%; }
	.concept ul:after {content:""; clear:both; display:block;}
.concept ul li { float:left; box-sizing:border-box; }
	.concept ul li:first-child { width:45%; padding-right:20px; }
	.concept ul li:last-child { width:55%; padding-top:15px; }
	.concept ul li img { width:100%; }
.concept p { margin-top:20px; width:100%; }
	.concept p img { width:100%; }

/* AD */
.ad_movie ul { margin-bottom:10px; }
.ad_movie li { padding:15px 25px; box-sizing:border-box; border-bottom:1px dotted #d7d7d7; }
.ad_movie li iframe { width:100%; height:auto; vertical-align:bottom; }

/* 서비스 가이드 */
.service_guide > * { box-sizing:border-box; }
.service_guide dt { padding:10px 10px 10px 20px; border-top:1px solid #252525; border-bottom:1px dotted #252525; font-weight:bold; font-size:1.05em; }
	.service_guide dt:before { content:""; background:url(../images/ico_guide_tit.png) no-repeat 0 0; display:inline-block; background-size:cover; width:8.5px; height:4px; vertical-align:middle; margin:-1px 3px 0 -10px; }
.service_guide dd { padding:12px 10px; font-size:0.95em; line-height:1.5em; }
	.service_guide dd img { max-width:100%; }
	.service_guide dd ul li { padding-left:15px; }
	.service_guide dd ul li span.num { display:inline-block; margin-left:-15px; width:15px; }

/* 튜토리얼 */
.tutorial > * { box-sizing:border-box; }
.tutorial > p { padding:10px; border-top:1px solid #252525; }
.tutorial dt { padding:10px 10px 10px 20px; border-top:1px solid #252525; border-bottom:1px dotted #252525; font-weight:bold; font-size:1.05em; }
	.tutorial dt:before { content:""; background:url(../images/ico_guide_tit.png) no-repeat 0 0; display:inline-block; background-size:cover; width:8.5px; height:4px; vertical-align:middle; margin:-1px 3px 0 -10px; }
/*	.tutorial dt:before { content:"●●"; font-weight:normal; letter-spacing:1px; font-size:8px; color:#252525; display:inline-block; vertical-align:text-bottom; margin:0 3px 0 -10px; }*/
.tutorial dd { padding:12px 10px; font-size:0.95em; line-height:1.5em; }
	.tutorial dd img { max-width:100%; }
	.tutorial dd ul li { padding-left:15px; }
	.tutorial dd ul li span.num { display:inline-block; margin-left:-15px; width:15px; }

/* 게시판 */
.board_list { padding-bottom:10px; box-sizing:border-box; }
	.board_list li { position:relative; width:100%; border-bottom:1px solid #dddddd; }
	.board_list li a { display:inline-block; width:100%; height:100%; padding:15px 35px 15px 10px; box-sizing:border-box; }
	.board_list li em { display:block; font-size:1.0em; }
	.board_list li span { display:block; padding-top:3px; font-size:0.85em; color:#959595; padding-right:70px; }
	.board_list li span + i { position:absolute; top:15px; right:10px; font-size:17px; color:#707070; }

.board_view { padding-bottom:10px; box-sizing:border-box; }
.board_view dl > * { padding:10px; box-sizing:border-box; }
.board_view dt { font-weight:bold; font-size:1.1em; border-bottom:1px dotted #252525; }
	.board_view dt span { font-weight:normal; font-size:0.8em; color:#959595; display:block; padding-top:3px; }
.board_view dd { font-size:1.0em; padding:20px 10px; word-break:break-all; line-height:1.5em;  }
	.board_view dd img { max-width:100%; }
	.board_view dd ul {  }

/* 매장찾기 */
.store_search { padding:10px 10px 0 10px; box-sizing:border-box; }
.store_search ul { width:100%; }
    .store_search ul:after {content:""; clear:both; display:block;}
    .store_search ul.all li { width:50%; float:left; }
    .store_search ul li { box-sizing:border-box; padding-left:5px; }
    .store_search ul li:first-child { padding-left:0px; }
    .store_search ul li select { width:100%; height:30px; border:1px solid #252525; box-sizing:border-box; font-size:0.9em; }
.store_search p { position:relative; margin-top:4px; }
    .store_search p input { height:30px; width:100%; font-size:0.9em; box-sizing:border-box; border:1px solid #252525; padding:0 35px 0 5px; }
    .store_search p a { width:30px; height:30px; line-height:30px; position:absolute; top:0; right:0; display:inline-block; color:#fff; background:#252525; text-align:center; font-size:18px;  }

.store_list { padding:10px; box-sizing:border-box; }
.store_list li { position:relative; border-bottom:1px solid #cdcdcd; padding:15px 10px; }
	.store_list li > span { position:absolute; bottom:15px; right:10px; }
	.store_list li > span a { font-size:24px; display:inline-block; width:28px; text-align:center;  }
	.store_list li > p { font-size:0.8em; padding-right:70px; line-height:normal; }
	.store_list li > em { font-weight:bold; font-size:0.9em; line-height:1.6em; }
	.store_list li > em span { font-weight:normal; }
	.store_list li > em span:before { content:"["; }
	.store_list li > em span:after { content:"]"; padding-right:5px; }

/* 대리점개설안내 */
.open_guide { padding:20px 15px; }
.open_guide dt { font-weight:bold; font-size:1.2em; }
.open_guide dt:after { content:""; display:block; width:20%; height:2px; background:url(../images/line_type03.gif) 0 0 repeat-x; background-size:2px; margin:20px 0; }
.open_guide dd { font-size:0.95em; line-height:1.4em }
.open_guide dd em { font-size:1.0em; display:block; font-weight:bold; margin:10px 0 5px 0;}
.open_guide dd span:after { content:"/"; padding:0 7px; color:#a1a1a1; }
.open_guide_area { display:none; }
.open_guide_area.on { display:block; }

/* 카다록 외 */
.share_ico { text-align:center; background:#252525; height:30px; line-height:30px; }
.share_ico i { color:#fff; margin:0 2px; font-size:16px; }

.swiper_top { border-bottom:1px dotted #e1e1e1; height:30px; line-height:30px; box-sizing:border-box; padding:0 10px; }
.swiper_top.lookbook { height:40px; line-height:40px; }
.swiper_top.lookbook > * { width:50%; }
.swiper_top.lookbook .selbox { float:left; }
.swiper_top.lookbook .selbox select { border:1px solid #252525; font-size:1.05em; width:100%; height:26px; }
.swiper_top.lookbook .swiper-pagination { float:right; text-align:right; box-sizing:border-box; padding-left:10px; }
.swiper_top.lookbook:after {content:""; clear:both; display:block;}

.swiper-container { position:relative;margin-bottom:7px;overflow:hidden; }

.swiper-wrapper { position: relative; width:100%; height:auto; z-index: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -ms-transition-property: -ms-transform;
  transition-property: transform;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box; }

.swiper-slide {
  -webkit-flex-shrink: 0;
  -ms-flex: 0 0 auto;
  flex-shrink: 0;
  width:100%;
  height:auto;
  text-align:center; }
	.swiper-slide img { max-width:100%; height:auto;}
	.swiper-slide em { display:block; border-top:1px dotted #e1e1e1; width:100%; box-sizing:border-box; padding:10px; text-align:center; font-size:0.7em; }

.swiper-pagination {
  text-align: center;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.swiper-pagination-fraction { color:#a1a1a1; font-size:0.9em; }
.swiper-pagination-current { color:#333; font-weight:bold; }
.swiper-pagination-total { color:#707070; }
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 0; width: 100%; }
/* Bullets */
.swiper-pagination-bullet { width:8px; height:8px; display: inline-block; border-radius: 100%; background: #ffffff; border:1px solid #252525; opacity: 0.8; box-sizing:border-box; }
button.swiper-pagination-bullet { border:none; margin:0; padding:0;
  box-shadow: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet { cursor:pointer; }
.swiper-pagination-white .swiper-pagination-bullet { background:#fff; }
.swiper-pagination-bullet-active { opacity:1; background:#252525; }
.swiper-pagination-white .swiper-pagination-bullet-active { background:#fff; }
.swiper-pagination-black .swiper-pagination-bullet-active { background:#000; }
.swiper-container-vertical > .swiper-pagination-bullets { right:3px; top:50%;
  -webkit-transform: translate3d(0px, -50%, 0);
  -moz-transform: translate3d(0px, -50%, 0);
  -o-transform: translate(0px, -50%);
  -ms-transform: translate3d(0px, -50%, 0);
  transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin:2px 0; display:block; }
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin:0 2px; } /* ////카다록 외 */



/* ============
	공통
===============	*/

/* 텍스트 */
.txt_type01 { padding:0 30px; box-sizing:border-box; }
.txt_type02 { padding:30px; box-sizing:border-box; background:#f2f4f5; }

/* 테이블 */
.table_basic { width:100%; border-top:2px solid #847162; }
.table_basic th { background:#f4f2f1; }
.table_basic td { font-weight:bold; }
.table_basic td, .table_basic th { border-left:1px solid #dcd7d3; border-bottom:1px solid #dcd7d3; text-align:center; padding:6px 0; }
.table_basic th:first-child, .table_basic td:first-child { border-left:none; }

.table_info { width:100%; font-size:1.0em; border-right:1px solid #8d8d8d; border-top:1px solid #8d8d8d;  }
.table_info th { background:#8d8d8d; color:#fff; font-weight:bold; }
.table_info td { color:#363636; }
.table_info td, .table_info th { border-left:1px solid #8d8d8d; border-bottom:1px solid #8d8d8d;  padding:3px 5px;text-align:center; }

/* 페이징 */
.page { text-align:center; }
.page a { display:inline-block; width:30px; height:30px; line-height:30px; background:#d5d5d5; color:#fff; box-sizing:border-box; vertical-align:middle; margin:0 3px; }
.page a.on { background:#252525; }
.page a.page_btn { color:#a1a1a1; background:#fff; border:1px solid #e1e1e1; }

/* 리스트 */
.list_type01 {  }
.list_type01 li { padding:0 0 7px 16px; line-height:1.3em; }
.list_type01 li.list_none { padding:0 0 7px 0; }
.list_type01 li i, .list_type01 li span.bullet { margin-left:-16px; display:inline-block; width:16px; }

/* 탭 */
.tab_ea2 li { width:50%; border-left:none !important; }
.tab_ea2 li a { font-size:1.1em !important; }
.tab_ea3 li { width:33.33333%; }
.tab_ea4 li { width:25%; letter-spacing:-1px; }
.tab_ea5 li { width:20%; letter-spacing:-1px; }

.tab_type01 { width:100%; }
.tab_type01:after {content:""; clear:both; display:block;}
.tab_type01 li { float:left; box-sizing:border-box; border-left:1px solid #d8d8d9; }
.tab_type01 li:first-child  { border-left:none;}
.tab_type01 li a { color:#787882;text-align:center; background:#e3e3e3; font-size:0.95em; display:inline-block; width:100%; height:40px; line-height:40px; }
.tab_type01 li.on, .tab_type01 li.on+li { border-left:none; }
.tab_type01 li.on a { background:#787882; color:#fff; }


/* 라인 */
.line_type01 { height:3px; background:url(../images/line_type01.gif) 2px 0 repeat-x; background-size:3px; }
.line_type02 { height:2px; background:url(../images/line_type02.gif) 0 0 repeat-x; }

/* 버튼 */
.btn_area_c { width:100%; text-align:center;}
.btn_area_l { width:100%; text-align:left;}
.btn_area_r { width:100%; text-align:right;}
.btn_area_c a, .btn_area_l a, .btn_area_r a { margin-left:5px; text-align:center; }
.btn_area_c a:first-child, .btn_area_l a:first-child, .btn_area_r a:first-child { margin-left:0; }
.btn_area_c a i, .btn_area_l a i, .btn_area_r a i { padding-right:5px; vertical-align:middle; }

.btn_s40 {display:inline-block;vertical-align:middle; width:40%;height:45px;line-height:45px; font-size:1.2em; }
.btn_s60px {display:inline-block;vertical-align:middle; width:60px;height:30px;line-height:30px; font-size:1.1em; }
.btn_s70px {display:inline-block;vertical-align:middle; width:70px;height:25px;line-height:25px; font-size:1.0em; }

.btn_type_s {display:inline-block;vertical-align:middle; margin-left:5px; padding:0 5px;height:20px;line-height:20px; font-size:0.8em; font-weight:normal; border-radius:3px; background:#fff; border:1px solid #a1a1a1; color:#333; }


.btn_type01 { font-weight:bold; background:#787882; color:#fff; }
.btn_type02 { font-weight:bold; background:#eeeeee; color:#333333;  }
	.btn_type02 i { color:#666666;  }
.btn_type03 { font-weight:bold; background:#eeeeee; color:#333333; border:1px solid #d7d7d7;  }

.btn_type10 { width:100%; display:inline-block; text-align:center; border:1px solid #bfbfbf; color:#333333; height:50px; line-height:48px; box-sizing:border-box; font-size:1.1em; font-weight:bold; }
.btn_type10 i { padding-right:7px; vertical-align:middle; }

/* 레이어팝업 */
.deemLayer {position:fixed; _position:absolute; top:0; left:0; z-index:10000; width:100%; height:100%; background:rgba(0,0,0,0.6);}
.open_pop .fa-sort-desc { padding-left:5px; color:#333; vertical-align:text-top; }
.layer_popup { display:none; position:absolute; top:50%; left:50%; width:90%; max-width:500px; border-radius:5px; background:#fff; z-index:10001; padding:10px 0; box-sizing:border-box; max-height:75%;overflow:auto; }
.layer_popup h2 { text-align:center; padding:5px 0 15px 0; border-bottom:1px solid #d7d7d7; font-size:1.4em; }
.layer_popup p.basic_txt { text-align:center; padding:10px; font-size:1.1em; line-height:1.3em; box-sizing:border-box; }
.layer_popup .pop_scroller { }
.layer_popup ul.list { }
.layer_popup ul.list li { }
.layer_popup ul.list li a { display:inline-block; width:100%; text-align:center; font-size:1.1em; padding:8px 0; }

.layer_popup_full { display:none; width:100%; height:100%; background:#fff; position:absolute; top:50%; left:50%; z-index:10001; }
.layer_popup_full h2 { font-size:1.45em; width:100%; text-align:center; padding:10px; box-sizing:border-box; line-height:1.3em;  }
.layer_popup_full h2 span{ font-weight:normal; }
.layer_popup_full h2 a.btn_s70px { margin-left:5px; font-size:0.8em; }
.layer_popup_full p.basic_txt { text-align:center; padding:10px; font-size:1.1em; line-height:1.3em; box-sizing:border-box; }
.layer_popup_full p.comment_txt { text-align:center; font-size:0.8em; line-height:1.1em; color:#959595; }
.layer_popup_full .barcode { position:absolute; top:48%; left:0px; width:100%; text-align:center; }
.layer_popup_full .barcode img { margin:5px 0 10px 0; width:80%; }
.layer_popup_full .barcode em { display:block; text-align:center; font-weight:bold; font-size:1.4em; }

.close_pop { position:absolute; top:10px; right:10px; color:#ccc; font-size:28px; }