@charset "UTF-8";

/**
 * 디자인별 템플릿 css 분리
 * header - 기본형
 * @date:2021-07-08
 * @name:이상아
 */

/* 기본형. */
#tpl-basic #header {width:100%; border-bottom:1px solid #cccccc; background:#ffffff; position:fixed; top:0; z-index:102; transition:all .3s;}
#tpl-basic .header-inner {height:89px; width:1080px; margin:0 auto; position:relative;}
#tpl-basic .header-inner .logo {display:inline-block; max-width:600px; max-height:40px; position:absolute; top:27px; left:50%; transform:translateX(-50%); z-index:1;}
#tpl-basic .header-inner .logo img {max-height:40px;}
#tpl-basic .header-inner .logo h1 {overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center;}
#tpl-basic .header-inner .hd-menu {height:100%; position:relative;}
#tpl-basic .header-inner .hd-menu .hamburger-menu {display:inline-block; width:32px; height:32px; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_hamburger_menu_000000.png) 0 0 no-repeat; text-indent:-9999px; position:absolute; left:3px; top:30px; z-index:12;}
#tpl-basic .header-inner .hd-menu .hamburger-menu.bg5c5c5c {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_hamburger_menu_5c5c5c.png)}
#tpl-basic .header-inner .hd-menu .hamburger-menu.bg888888 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_hamburger_menu_888888.png)}
#tpl-basic .header-inner .hd-menu .hamburger-menu.bgb4b4b4 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_hamburger_menu_b4b4b4.png)}
#tpl-basic .header-inner .hd-menu .hamburger-menu.bgdddddd {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_hamburger_menu_dddddd.png)}
#tpl-basic .header-inner .hd-menu .hamburger-menu.bgffffff {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_hamburger_menu_ffffff.png)}
#tpl-basic .header-inner .hd-menu .btn-search {display:inline-block; width:32px; height:32px; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_search_000000.png) 0 0 no-repeat; position:absolute; left:0px; top:30px; text-indent:-9999px;}
#tpl-basic .header-inner .hd-menu .btn-search.bg5c5c5c {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_search_5c5c5c.png)}
#tpl-basic .header-inner .hd-menu .btn-search.bg888888 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_search_888888.png)}
#tpl-basic .header-inner .hd-menu .btn-search.bgb4b4b4 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_search_b4b4b4.png)}
#tpl-basic .header-inner .hd-menu .btn-search.bgdddddd {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_search_dddddd.png)}
#tpl-basic .header-inner .hd-menu .btn-search.bgffffff {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_search_ffffff.png)}
#tpl-basic .header-inner .hd-menu .btn-search.left-move {left:62px;}
#tpl-basic .header-inner .hd-menu .btn-basket {display:inline-block; width:32px; height:32px; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_basket_000000.png) 0 0 no-repeat; position:absolute; top:32px; right:58px;}
#tpl-basic .header-inner .hd-menu .btn-basket.bg5c5c5c {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_basket_5c5c5c.png)}
#tpl-basic .header-inner .hd-menu .btn-basket.bg888888 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_basket_888888.png)}
#tpl-basic .header-inner .hd-menu .btn-basket.bgb4b4b4 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_basket_b4b4b4.png)}
#tpl-basic .header-inner .hd-menu .btn-basket.bgdddddd {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_basket_dddddd.png)}
#tpl-basic .header-inner .hd-menu .btn-basket.bgffffff {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_basket_ffffff.png)}
#tpl-basic .header-inner .hd-menu .btn-basket span {position:absolute; font-size:14px; color:#999; left:1px; top:-1px; font-weight:bold; width:32px; text-align:center;}
#tpl-basic .header-inner .hd-menu .btn-logon {display:inline-block; width:32px; height:32px; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_logon_000000.png) 0 0 no-repeat; position:absolute; top:31px; right:3px; text-indent:-9999px;}
#tpl-basic .header-inner .hd-menu .btn-logon.bg5c5c5c {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_logon_5c5c5c.png)}
#tpl-basic .header-inner .hd-menu .btn-logon.bg888888 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_logon_888888.png)}
#tpl-basic .header-inner .hd-menu .btn-logon.bgb4b4b4 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_logon_b4b4b4.png)}
#tpl-basic .header-inner .hd-menu .btn-logon.bgdddddd {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_logon_dddddd.png)}
#tpl-basic .header-inner .hd-menu .btn-logon.bgffffff {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_logon_ffffff.png)}
#tpl-basic .header-inner .hd-menu .btn-logoff {display:inline-block; width:32px; height:32px; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_logoff_000000_new.png) center no-repeat; position:absolute; top:31px; right:3px; text-indent:-9999px;} /* 23.03.08 이현진 background 수정 */
#tpl-basic .header-inner .hd-menu .btn-logoff.bg5c5c5c {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_logoff_5c5c5c_new.png)}
#tpl-basic .header-inner .hd-menu .btn-logoff.bg888888 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_logoff_888888_new.png)}
#tpl-basic .header-inner .hd-menu .btn-logoff.bgb4b4b4 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_logoff_b4b4b4_new.png)}
#tpl-basic .header-inner .hd-menu .btn-logoff.bgdddddd {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_logoff_dddddd_new.png)}
#tpl-basic .header-inner .hd-menu .btn-logoff.bgffffff {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_logoff_ffffff_new.png)}
#tpl-basic .header-inner .hd-menu .btn-odr-inquiry {display:inline-block; width:32px; height:32px; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_inquiry_000000.png) 0 0 no-repeat; position:absolute; top:31px; right:3px; text-indent:-9999px;}
#tpl-basic .header-inner .hd-menu .btn-odr-inquiry.bg5c5c5c {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_inquiry_5c5c5c.png)}
#tpl-basic .header-inner .hd-menu .btn-odr-inquiry.bg888888 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_inquiry_888888.png)}
#tpl-basic .header-inner .hd-menu .btn-odr-inquiry.bgb4b4b4 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_inquiry_b4b4b4.png)}
#tpl-basic .header-inner .hd-menu .btn-odr-inquiry.bgdddddd {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_inquiry_dddddd.png)}
#tpl-basic .header-inner .hd-menu .btn-odr-inquiry.bgffffff {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_basic_inquiry_ffffff.png)}
#tpl-basic #header .category {width:1080px; margin:0 auto; transition:all .3s;}
#tpl-basic #header .category ul {display:inline-block; width:100%;}
#tpl-basic #header .category li {float:left; height:100%; line-height:54px; padding-right:34px;}
#tpl-basic #header .category li.none-category {float:none; text-align:center; padding-right:0px;}
#tpl-basic #header .category li a {font-size:16px; color:#000;}
#tpl-basic #header .category li:after {display:inline-block; content:"|"; clear:both; padding-left:34px; color:#ccc;}
#tpl-basic #header .category li:last-child:after {display:none;}

/* 기본형 햄버거 메뉴 레이어 */
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont {width:390px; height:100%; position:fixed; top:0; left:-412px; z-index:999; background:#fff; transition:all .3s;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .btn-hamburger-menu-layer-close {display:block; position:absolute; top:20px; right:20px; width:18px; height:18px; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/btn/btn_close_h18.png) 0 0 no-repeat; text-indent:-9999px; z-index:1;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner {padding:0 50px 0 30px; height:80%; position:relative; overflow-y:auto; -ms-overflow-style:none;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner::-webkit-scrollbar {display:none;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner ul li {border-top:1px solid #f8f8f8;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner ul li:first-child {border-top:none;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner ul li a {display:block; line-height:69px; font-size:18px; font-weight:bold; color:#000;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner .nomenu {width:100%; display:table; width:100%; height:100%;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner .nomenu p {display:table-cell; width:100%; height:100%; vertical-align:middle; text-align:center;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner .nomenu p span {display:inline-block; margin-top:-120px;}
#tpl-basic .hamburger-menu-layer {width:0%; height:100%; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/black_40.png) 0 0 repeat; position:fixed; top:0; left:0; z-index:9999;}
#tpl-basic .hamburger-menu-layer.open {width:100%;}
#tpl-basic .hamburger-menu-layer.open .hamburger-menu-layer-cont {left:0;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .ham-menu-bot {width:100%; position:absolute; bottom:0; background:#fff;} /* 20.11.16 pub 수정, 22.05.18 이상아 display 추가, 22.05.19 이상아 display 삭제 */
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .ham-menu-bot .bot {margin:0 30px; padding-bottom:30px; border-top:1px solid #e4e4e4;} /* 20.11.16 pub 추가 */
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .info {padding:20px 0 0;} /* 20.11.16 pub 수정 */
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .info p .tel {display:block; font-weight:bold; font-size:14px; color:#000;} /* 22.06.14 수정 */
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .info p .time {display:block; padding-left:0; margin-top:6px; position:relative; font-size:14px; color:#888888; word-break:break-all;} /* 22.06.14 수정 */
/* #tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .info p .time:before {display:block; content:'/'; position:absolute; left:0; font-size:14px; color:#e4e4e4; top:-2px; left:5px;} 22.06.14 삭제 */
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .info a {display:block; font-size:14px; color:#000000; text-decoration:underline; margin-top:5px; word-break:break-all;} /* 22.05.19 이상아 word-break 추가 */

/* 21.03.04 수정 */
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .notice-wrap {overflow:hidden; height:73px; border-top:1px solid #f8f8f8;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .notice-wrap a {display:inline-block; width:49.8%; float:left; text-align:center; border-left:1px solid #f8f8f8;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .notice-wrap a span {display:inline-block; padding-left:25px; line-height:73px;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .notice-wrap a:first-child {border-left:none;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .notice-wrap .btn-notice span {background:url(//image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/side_notice_ico.png) left center no-repeat;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .notice-wrap .btn-qa span {background:url(//image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/side_qa_ico.png) left center no-repeat;}

/* 21.06.02 검색바 재정의 이상아 추가 */
#tpl-basic .header-inner .hd-menu > .hdSchBar {left:7px;}
#tpl-basic .header-inner .hd-menu .hamburger-menu + .hdSchBar {left:53px;}

/* 23.01.02 이현진 추가 */
#tpl-basic #header .category li {position:relative; padding-right:0; margin-right:34px; height:54px;}
#tpl-basic #header .category li:hover > a {font-weight:700; letter-spacing:0;}
#tpl-basic #header .category li:hover .subDepth {display:block;}
#tpl-basic #header .category li .subDepth {position:absolute; top:43px; left:50%; transform:translateX(-63%); background:#fff; border:1px solid #eee; padding:14px 0; width:128px; max-height:200px; overflow-y:auto; z-index:1; display:none;}
#tpl-basic #header .category li .subDepth::-webkit-scrollbar {width:4px;}
#tpl-basic #header .category li .subDepth::-webkit-scrollbar-thumb {border-radius:100px; background-color:#ddd;}
#tpl-basic #header .category li .subDepth a {display:block; font-size:14px; color:#000; line-height:28px; font-weight:300; padding:0 15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#tpl-basic #header .category li .subDepth a:hover {font-weight:400;}
#tpl-basic .noticeWrap {border-bottom:1px solid #ddd; font-size:0; padding:0 20px; height:57px;} /* 23.03.07 이현진 height 추가 */
#tpl-basic .noticeWrap a {position:relative; display:inline-block; font-size:14px; color:#333; line-height:57px; padding-left:20px; margin-right:21px;}
#tpl-basic .noticeWrap a:before {content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); width:16px; height:14px; background:url('/assets/shop/pc/img/common/side_notice_ico.png') left center no-repeat;}
#tpl-basic .noticeWrap a.btnQa:before {width:14px; background:url('/assets/shop/pc/img/common/side_qa_ico.png') left center no-repeat;} 
#tpl-basic .noticeWrap a + a:after {content:''; position:absolute; top:50%; left:-10px; transform:translateY(-50%); width:1px; height:15px; background:#eee;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner {padding:0; height:calc(100% - 203px);}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner ul li {border:none;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner ul li > a {font-size:14px; color:#333; line-height:41px; font-weight:normal; padding:0 40px 0 20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner ul li:hover > a, #tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner ul li.active > a {font-weight:bold; letter-spacing:-0.4px;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner ul li.depth > a {background:url('/assets/shop/pc/img/common/tpl_basic_arr_down.png') right 20px center no-repeat;} 
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner ul li.depth.active > a {background:url('/assets/shop/pc/img/common/tpl_basic_arr_up.png') right 20px center no-repeat;} 
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner ul li.depth .subDepth {background:#f8f8f8; padding:11px 0; max-height:200px; overflow-y:auto; display:none;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner ul li.depth .subDepth::-webkit-scrollbar {width:6px;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner ul li.depth .subDepth::-webkit-scrollbar-thumb {border-radius:100px; background-color:#ddd;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner ul li.depth .subDepth a {display:block; font-size:14px; color:#333; line-height:31px; font-weight:normal; padding:0 30px; 
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner ul li.depth .subDepth a:hover, #tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .inner ul li.depth .subDepth a.on {font-weight:bold;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .hamCsCon {border-top:1px solid #ddd; height:144px; overflow-y:auto;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .hamCsCon::-webkit-scrollbar {width:6px;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .hamCsCon::-webkit-scrollbar-thumb {border-radius:100px; background-color:#ddd;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .hamCsCon p {font-size:13px; color:#333; line-height:1; font-weight:500; padding:20px 20px 0; margin-bottom:5px;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .hamCsCon .csInfo {padding:0 20px 10px;}
#tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .hamCsCon .csInfo li, #tpl-basic .hamburger-menu-layer .hamburger-menu-layer-cont .hamCsCon .csInfo li a {font-size:13px; color:#666; line-height:22px; font-weight:300;}