@charset "utf-8";

/* common */
html {scroll-behavior: smooth;}
body {font-family:'NotoSansM';word-break: keep-all;}

/* button */
.radio_box input {position:absolute; left:-99999px; width:0; height:0;}
.radio_box label {position:relative; font-family:'NotoSansL'; font-size:12px; padding-left:20px;}
.radio_box label:before {content:'';position:absolute;left:0;top:50%;display:block;width: 10px;height: 10px;border-radius:100%;border:1px solid #acacac;margin-top:-5px;}
.radio_box input:checked + label:before {background:#000}

.check_box input[type="checkbox"]::-ms-check{display:none}
.check_box input {position:absolute; left:-99999px; width:0; height:0;}
.check_box label {position:relative;padding-left:26px;font-family: 'NotoSansL';font-size: 11px;}
.check_box label:before {content:'';position:absolute;left:0;top:50%;display:block;width: 15px;height: 15px;border:1px solid #acacac;margin-top: -7px;}
.check_box input:checked + label:before {background:#e25d5d}

.tab_menu {display:flex; border:1px solid #000}
.tab_menu a {display:block;flex-grow: 1;width:10%;height:43px;font-size:15px;line-height:42px;text-align:center;}
.tab_menu a.on {color:#fff; background:#000}

/* 데이터 없음 */
.list_empty {width:100%;color:#999;font-family: 'NotoSansL';font-size:15px;text-align:center;padding: 110px 0;}


/* layout */
#wrap {overflow:hidden; position:relative; left:0; width:100%; padding-top:60px; transition: left 0.3s ease-out;}
header {z-index: 11;/* overflow:hidden; */position:fixed;left:0;top:0;width:100%;height:60px;border-bottom:1px solid #ccc;background:#fff;transition: all 0.3s ease-out;}
header.hide {top:-60px}
header h1 {text-align:center; padding-top:24px;}
header h1 img {width:96px;}
header .btn_search {position:absolute; left:0; top:0; width:50px; height:60px; padding:22px 0 0 16px;}
header .btn_search img {width:18.5px}

header .btn_location {position:absolute; right:43px; top:0; width:33px; height:60px; text-align:center; padding-top:21px;}
header .btn_location img {width:16px}
header .btn_menu {position:absolute; right:0; top:0; width:43px; height:60px; font-size:0;}
header .btn_menu span {position:absolute; right:16px; width:18px; height:1px; background:#000;}
header .btn_menu span:nth-child(1) {top:24px}
header .btn_menu span:nth-child(2) {top:31px}
header .btn_menu span:nth-child(3) {top:38px}

header .gnb_total {z-index:99; overflow-y:auto; position:fixed; right:-100%; top:0; width:100%; height:100%; background:#fff; transition: right 0.3s ease-out;}
header .gnb_total .lang {height:60px; padding:18px 15px; border-bottom:1px solid #ccc; background:#f0f0f0;}
header .gnb_total .lang a {display:inline-block; width:47px; height:25px; color:#999; font-family: 'NotoSansM'; font-size:12px; line-height:24px; text-align:center; border-radius:15px;}
header .gnb_total .lang a.on {color:#fff; background:#000}

header .gnb_total .btn_close {position:absolute; right:0; top:0; width:48px; height:60px; font-size:0;}
header .gnb_total .btn_close:before,
header .gnb_total .btn_close:after {content:''; display:block; position:absolute; left:50%; top:50%; width:22px; height:2px; margin-left:-11px; background:#000}
header .gnb_total .btn_close:before {transform: rotate(45deg);}
header .gnb_total .btn_close:after {transform: rotate(-45deg);}

header .gnb_total .gnb {border-bottom:1px solid #ccc}
header .gnb_total .gnb > li > a {position:relative; display:block; height:60px; font-family:'NotoSansL'; font-size:18px; padding-top:16px; padding-left:16px; border-top:1px solid #ccc}
header .gnb_total .gnb > li > a:after {content:''; position:absolute; right:17px; top:50%; margin-top:-5.5px; display:block; width:11px; height:11px; border-right:2px solid #000; border-bottom:2px solid #000; transform: rotate(45deg);}
header .gnb_total .gnb > li > a.no_depth2:after {display:none;}
header .gnb_total .gnb > li .sub_menu {display:none;}
header .gnb_total .gnb > li .sub_menu > ul:not(.depth2) > li > a {display:block; height:52px; padding:16px 15px 0 15px;border-bottom:1px solid #ccc; background:#f0f0f0}

header .gnb_total .gnb > li .sub_menu .total {display:block; height:52px; line-height:51px; font-family:'NotoSansR'; font-size:16px; padding:0 15px; background:#e0e0e0}
header .gnb_total .gnb > li .sub_menu .depth2 {background:#f3f3f3}
header .gnb_total .gnb > li .sub_menu .depth2 > li > a {position:relative; display:block; height:47px; line-height:46px; font-family:'NotoSansR'; font-size:16px; margin:0 15px; border-top:1px solid #ccc}
header .gnb_total .gnb > li .sub_menu .depth2 > li > a:before {content:''; position:absolute; right:0; top:50%; display:block; width:14px; height:1px; background:#666}
header .gnb_total .gnb > li .sub_menu .depth2 > li > a:after {content:'';position:absolute;right: 6px;top:50%;display:block;width:1px;height:14px;margin-top:-7px;background:#666;}
header .gnb_total .gnb > li .sub_menu .depth2 > li:first-child > a {border-top:0}

header .gnb_total .gnb > li .sub_menu .depth2 > li > .depth3 {display:none;overflow: hidden;border-top:1px solid #ccc;margin:0 15px; padding-bottom:23px}
header .gnb_total .gnb > li .sub_menu .depth2 > li > .depth3 li {float:left; width:50%;}
header .gnb_total .gnb > li .sub_menu .depth2 > li > .depth3 li a {display:block; font-family:'NotoSansL'; font-size:16px; padding:12px 0}

header .gnb_total .gnb > li.on > a {color:#fff; background:#000}
header .gnb_total .gnb > li.on > a:after {border-color:#fff; transform: rotate(-135deg);}
header .gnb_total .gnb > li.on .sub_menu {display:block;}

header .gnb_total .gnb > li.on .sub_menu .depth2 > li.on > .depth3 {display:block;} 
header .gnb_total .gnb > li.on .sub_menu .depth2 > li.on > a:after {display:none;}

/* header .gnb_total .gnb > li > a {position:relative; display:block; height:60px; font-family:'NotoSansL'; font-size:18px; padding-top:16px; padding-left:16px; border-bottom:1px solid #ccc}
header .gnb_total .gnb > li > a:after {content:''; position:absolute; right:17px; top:50%; margin-top:-5.5px; display:block; width:11px; height:11px; border-right:2px solid #000; border-bottom:2px solid #000; transform: rotate(45deg);}
header .gnb_total .gnb > li > a.no_depth2:after {display:none;}
header .gnb_total .gnb > li .depth2 {display:none; background:#f0f0f0}
header .gnb_total .gnb > li .depth2 li a {display:block; height:52px; padding:16px 15px 0 15px;border-bottom:1px solid #ccc;}

header .gnb_total .gnb > li.on > a {color:#fff; background:#000}
header .gnb_total .gnb > li.on > a:after {border-color:#fff; transform: rotate(-135deg);}
header .gnb_total .gnb > li.on .depth2 {display:block;} */

header .gnb_total .btn_location_link {display:block; width:100%; height:70px; color:#fff; font-family:'NotoSansR'; font-size:19px; line-height:68px; text-align:center; margin-top:45px; background:#000}
header .gnb_total .btn_location_link:after {content:''; display:inline-block; width:56px; height:19px; vertical-align: middle; margin-left:17px; background:url(/static/m/img/common/icon_btn_location_arrow.png) no-repeat; background-size:100% auto}

#wrap.total_open {left:-100%;}
#wrap.total_open header {left:-100%;}
#wrap.total_open header .gnb_total {right:0;}

#container {position:relative;}

footer {padding: 30px 17px 52px;background:#000;position: relative;z-index: 11;}
footer a {color:#fff}
footer .link {font-size:0}
footer .link a {display:inline-block; color:#707070; font-size:11px; margin-right:25px}
footer .link a:first-child {margin-left:0}
footer .family_site {position:relative; width:235px; height:34px; margin-top:25px}
footer .family_site:after {content:''; display:block; position:absolute; right:16px; top:50%; width:14px; height:8px; margin-top:-4px; background:url(/static/m/img/common/arrow_footer.png) no-repeat; background-size:100% auto;}
footer .family_site select {width:100%; height:34px; color:#707070; font-size:11px; border:1px solid #7a7a7a; padding-left:13px;}
footer address {color:#fff; font-family:'NotoSansL'; font-size:10px; line-height:17px; margin-top:20px}
footer address span {font-family:'NotoSansB';}
footer address span.email {positiono:relative; font-family:'NotoSansL';}
footer address span.email:after {content:''; display:inline-block; width:2px; height:9px; margin:0 9px; background:#8f8f8f}
footer .copyright {color:#707070; font-size:9px; margin-top:10px}
footer .sns_box {margin-top:30px}
footer .sns_box a {display:inline-block; vertical-align:middle; padding:0 12px;}
footer .sns_box a:nth-child(1) {padding-left:0}
footer .sns_box a:nth-child(1) img {width:27px;}
footer .sns_box a:nth-child(2) img {width:25px;}
footer .sns_box a:nth-child(3) img {width:12px;}

footer .btn_top {z-index:10;display:none;opacity:0.3;position:fixed;right:16px;bottom: 52px;width:40px;height:40px;font-size:0;border:1px solid #fff;background:#000 url(/static/m/img/common/arrow_footer_top.png) center center no-repeat;background-size:14px auto;}

/* [s] layer_popup */
#dimLayer {z-index:100; position:fixed; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.8);}
.layer_popup {z-index:101;display:none;position:absolute;left:0;top:50%;/* width:100%; */border:1px solid #ddd;background:#fff;}
.layer_popup.on {animation: showPopup 0.3s ease-out;}
@keyframes showPopup{
    0% {transform: scale(1);}
    50% {transform: scale(1.1);}
    100% {transform: scale(1);}
}
.layer_popup .layer_tit {width:100%; font-size:0;}
.layer_popup .layer_cont {/* max-height: 340px; */padding:10px;}
.layer_popup .btn_close {position:absolute; right:0; top:0; display:block; width:50px; height:50px; text-indent:-999px; font-size:0; transition : all 0.3s ease;}
.layer_popup .btn_close:before,
.layer_popup .btn_close:after {content:''; display:block; position:absolute; left:0; top:50%; width:100%; height:2px; background:#333}
.layer_popup .btn_close:before {transform:rotate(45deg);}
.layer_popup .btn_close:after {transform:rotate(-45deg);}
.layer_popup .btn_close:hover {transform:rotate(90deg)}
/* [e] layer_popup */


/* 서브 네비게이션 공통 */
.depth_menu.on {transition:height 0.3s;}
.depth_menu.on .now::before{transform:scaleY(-1);}

.depth_menu {position: relative;font-family: 'RobotoL', 'NotoSansL';letter-spacing:0;width:100%;display:none;top:0;z-index: 9;background: #fff;text-transform: capitalize; border-bottom: 2px solid #000;}
.depth_menu ul {overflow-y:auto;position: absolute; left:0; top:52px; width: 100%;padding:0 16px;display: none;background: #fff;border-bottom: 2px solid #000;}
.depth_menu .now {font-family: 'RobotoR', 'NotoSansR';width:100%;height:52px;text-align:left;padding:16px;text-transform: capitalize;}
.depth_menu .now::before{transition:transform 0.3s; transform-origin:center;content:''; display:block; position:absolute; width:52px; height:52px; right:0; top:0; background-image:url('../img/brand/misshanav_arrow.png');background-size: auto 100%;background-repeat:no-repeat;background-position:right;}
.depth_menu li a {font-size:14px; line-height:32px;}
.depth_menu li.on a {font-family: 'RobotoB', 'NotoSansB';}


/* 검색 */
.search_wrap {display:none;top: 60px;position:absolute;width:100%;height:auto;z-index: 0;top: 60px;background-color:#fafafa;padding: 27px 16px 38px;margin-bottom:32px;/* background: red; */border-bottom: 1px solid #ababab;}
.search_wrap .recent_search, #search_wrap .popular_search {margin-top: 7px;}
.search_wrap form {position:relative;margin-bottom: 14px;border-bottom:2px solid #000;display:flex;}
.search_wrap .input_search {background-color: transparent;width: calc(100% - 30px);height: 36px;font-size: 13px;font-family:'NotoSansL';color: #000;}
.search_wrap .input_search::placeholer {color:#aaa;}
.search_wrap .btn_search {width: 30px;height: 36px;background-image:url('../img/search/btn_search.png');background-repeat:no-repeat;font-size:0;background-size: cover;right: 0;left: auto;}

.search_wrap h2 {font-size:20px;margin-bottom: 21px;}
.search_wrap h3 {font-size: 13px;display:inline-block;margin-top: 0;}
.search_wrap .btn_delete {position: relative;font-size: 10px;color:#555;margin-top: 10px;/* margin-right: 0; */float: right;line-height: 10px;padding-left: 10px;}
.search_wrap .btn_delete::before {content:'';width: 10px;height: 10px;display:inline-block;position: absolute;left: 0;top: 0;/* padding-top: 5px; */background-size: cover;background-image: url('../img/search/btn_del.png');}

.search_wrap .search_list {display:flex;flex-wrap:wrap;font-size: 11px;font-family:'NotoSansL';margin-top: 6px;}
.search_wrap .search_list li {position:relative; margin-right: 6px;margin-bottom: 8px;}
.search_wrap .search_list span {padding: 2px 7px;background-color:#fff;border:1px solid #e4e4e4;border-radius:4px;display: inline-block;cursor:pointer;}
.search_wrap .recent_search .search_list span {padding:2px 20px 2px 7px;}
.search_wrap .search_list span:hover {font-family:'NotoSansM'; background-color:#e9e9e9;}
.search_wrap .search_list li .btn_del {position:absolute; right:6px; top:50%; display:block; width:12px; height:12px; font-size:0; margin-top:-6px; outline:none;}
.search_wrap .search_list li .btn_del::before{content:'';position:absolute;right: 0;top: 50%;width: 11px;height: 1px;background-color: #918a88;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.search_wrap .search_list li .btn_del::after{content:'';position:absolute;right: 0;top: 50%;width: 11px;height: 1px;background-color: #918a88;-webkit-transform: rotate(45deg);transform: rotate(45deg);}

.search_wrap .btn_search_close {display:none;width:64px; height:64px; border-radius:32px; border:1px solid #666; background-image:url('../img/search/btn_close.png'); background-position:center; font-size:0; position:absolute; left:calc(50% - 32px); bottom:-32px;}
.search_wrap.on .btn_search_close {opacity:1;transition: opacity 0.3s 10s;}

.autocomplete {display:none;position:absolute;width:100%;top: 37px;align-items:stretch;background-color: #fafafa;border:1px solid #000;padding: 0 0 40px 0;line-height:40px;z-index: 9;}
.autocomplete.on {display:flex;}
.autocomplete.none{display:none!important;}
.autocomplete ul {width: 100%;font-size: 13px;font-family:'NotoSansL';letter-spacing: -0.035em;padding: 13px 16px;line-height: 25px;}
.autocomplete ul li {width: 100%;white-space: nowrap;text-overflow:ellipsis;overflow: hidden;}
.autocomplete ul span {color:#c52121;}
.autocomplete button {position:absolute;bottom: 10px;right: 15px;/* border-bottom:1px solid #000; */line-height: 19px;font-size: 12px;letter-spacing: -0.07em;}
.autocomplete .right {width:311px; text-align:center; display:flex; flex-direction:column; justify-content:center; align-items:center; background-color:#fff; padding:20px 20px 20px 30px;}
.autocomplete .right figcaption {font-size:15px; line-height:22px; margin-top:22px;font-family:'NotoSansL';}

/**/
#container #dimLayer {z-index:1;}


/* en fix */

html[lang="en"] footer .link a {margin-right: 15px;}
html[lang="en"] footer .link a:last-child {margin-right:0;}