@charset "UTF-8";

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

/* 배너강조형 */
#tpl-banner .visualTop img {margin:0 -420px; min-width:1080px;}
#tpl-banner .visualTop .swiper-wrapper img {width:100%;}
#tpl-banner .visualTop .swiper-wrapper .swiper-slide-active img {width:inherit;}
#tpl-banner .visualTop .swiper-pagination {position:relative; height:32px; left:50%; bottom:-15px; transform:translatex(-50%);}
#tpl-banner .visualTop .swiper-pagination-bullet {width:11px; height:11px; background:#999999; margin:0 0 0 10px;}
#tpl-banner .visualTop .swiper-pagination-bullet:first-child {margin-left:0;}
#tpl-banner #header {position:fixed; top:0; z-index:102; width:100%; height:100px; background:rgba( 255, 255, 255, 0 ); transition:all .8s cubic-bezier(.17,.89,.53,1.12);} /* 20.12.29 pub M */
#tpl-banner #header h1 {display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#tpl-banner #header h1 a {display:block; font-weight:bold; font-size:28px; line-height:100px; color:#fff;}
#tpl-banner #header .hd-link {position:absolute; top:0; width:100%;}
#tpl-banner #header .hd-link > * {position:absolute;}
#tpl-banner #header .hd-link .btn-hamburgerMenu-type {display:inline-block; width:32px; height:32px; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_hamburger_menu_000000.png) no-repeat center; text-indent:-99999px; background-size:32px 32px; top:40px; left:50px;}
#tpl-banner #header .hd-link .btn-hamburgerMenu-type.bg5c5c5c {display:inline-block; width:32px; height:32px; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_hamburger_menu_5c5c5c.png) no-repeat center; text-indent:-99999px; background-size:32px 32px; top:40px; left:50px;}
#tpl-banner #header .hd-link .btn-hamburgerMenu-type.bg888888 {display:inline-block; width:32px; height:32px; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_hamburger_menu_888888.png) no-repeat center; text-indent:-99999px; background-size:32px 32px; top:40px; left:50px;}
#tpl-banner #header .hd-link .btn-hamburgerMenu-type.bgb4b4b4 {display:inline-block; width:32px; height:32px; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_hamburger_menu_b4b4b4.png) no-repeat center; text-indent:-99999px; background-size:32px 32px; top:40px; left:50px;}
#tpl-banner #header .hd-link .btn-hamburgerMenu-type.bgdddddd {display:inline-block; width:32px; height:32px; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_hamburger_menu_dddddd.png) no-repeat center; text-indent:-99999px; background-size:32px 32px; top:40px; left:50px;}
#tpl-banner #header .hd-link .btn-hamburgerMenu-type.bgffffff {display:inline-block; width:32px; height:32px; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_hamburger_menu_ffffff.png) no-repeat center; text-indent:-99999px; background-size:32px 32px; top:40px; left:50px;}
#tpl-banner #header .hd-link a.btn-search {width:32px; height:32px; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_search_000000.png) no-repeat; background-size:32px 32px; top:37px; right:160px; text-indent:-9999px;}
#tpl-banner #header .hd-link a.btn-search.bg5c5c5c {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_search_5c5c5c.png);}
#tpl-banner #header .hd-link a.btn-search.bg888888 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_search_888888.png);}
#tpl-banner #header .hd-link a.btn-search.bgb4b4b4 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_search_b4b4b4.png);}
#tpl-banner #header .hd-link a.btn-search.bgdddddd {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_search_dddddd.png);}
#tpl-banner #header .hd-link a.btn-search.bgffffff {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_search_ffffff.png);} 
#tpl-banner #header .hd-link a.btn-odr-inquiry {width:32px; height:32px; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_inquiry_000000.png) no-repeat; background-size:32px 32px; top:37px; right:50px; text-indent:-9999px;}
#tpl-banner #header .hd-link a.btn-odr-inquiry.bg5c5c5c {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_inquiry_5c5c5c.png);}
#tpl-banner #header .hd-link a.btn-odr-inquiry.bg888888 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_inquiry_888888.png);}
#tpl-banner #header .hd-link a.btn-odr-inquiry.bgb4b4b4 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_inquiry_b4b4b4.png);}
#tpl-banner #header .hd-link a.btn-odr-inquiry.bgdddddd {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_inquiry_dddddd.png);}
#tpl-banner #header .hd-link a.btn-odr-inquiry.bgffffff {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_inquiry_ffffff.png);}
#tpl-banner #header .hd-link a.btn-shoppingbasket {width:32px; height:32px; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_basket_000000.png) no-repeat; background-size:32px 32px; top:37px; right:105px;}
#tpl-banner #header .hd-link a.btn-shoppingbasket.bg5c5c5c {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_basket_5c5c5c.png);} 
#tpl-banner #header .hd-link a.btn-shoppingbasket.bg888888 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_basket_888888.png);}
#tpl-banner #header .hd-link a.btn-shoppingbasket.bgb4b4b4 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_basket_b4b4b4.png);}
#tpl-banner #header .hd-link a.btn-shoppingbasket.bgdddddd {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_basket_dddddd.png);}
#tpl-banner #header .hd-link a.btn-shoppingbasket.bgffffff {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_basket_ffffff.png);}
#tpl-banner #header .hd-link a.btn-logon {width:32px; height:32px; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_logon_000000.png) no-repeat; background-size:32px 32px; top:37px; right:50px; text-indent:-9999px;}
#tpl-banner #header .hd-link a.btn-logon.bg5c5c5c {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_logon_5c5c5c.png);}
#tpl-banner #header .hd-link a.btn-logon.bg888888 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_logon_888888.png);}
#tpl-banner #header .hd-link a.btn-logon.bgb4b4b4 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_logon_b4b4b4.png);}
#tpl-banner #header .hd-link a.btn-logon.bgdddddd {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_logon_dddddd.png);}
#tpl-banner #header .hd-link a.btn-logon.bgffffff {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_logon_ffffff.png);}
#tpl-banner #header .hd-link a.btn-logoff {width:32px; height:32px; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_logoff_000000_new.png) center no-repeat; background-size:25px 25px; top:38px; right:50px; text-indent:-99999px;}  /* 23.03.08 이현진 background, background-size, top 수정 */
#tpl-banner #header .hd-link a.btn-logoff.bg5c5c5c {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_logoff_5c5c5c.png);}
#tpl-banner #header .hd-link a.btn-logoff.bg888888 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_logoff_888888.png);}
#tpl-banner #header .hd-link a.btn-logoff.bgb4b4b4 {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_logoff_b4b4b4.png);}
#tpl-banner #header .hd-link a.btn-logoff.bgdddddd {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_logoff_dddddd.png);}
#tpl-banner #header .hd-link a.btn-logoff.bgffffff {background-image:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/tpl_bnr_logoff_ffffff_new.png);}
#tpl-banner #header .hd-link a.btn-shoppingbasket .basket-cnt-zero {position:absolute; top:11px; left:13px; font-weight:400; font-size:12px; color:#fff;}
#tpl-banner #header .hd-link a.btn-shoppingbasket span {position:absolute; top:11px; left:13px; font-weight:400; font-size:12px; color:#fff;}
#tpl-banner #header.scroll {background:rgba( 255, 255, 255, 0.9 );}
#tpl-banner .visualtop {margin:0 auto;}
#tpl-banner .visualTop .swiper-slide {text-align:center;}
#tpl-banner .visualTop .visualSlide {position:relative; width:1903px; margin:0 -411px;}
#tpl-banner .visualTop .swiper-button-prev {display:inline-block; width:50px; height:50px; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/btn/btn_pc_tpl_design_slider_prev.png) 0 0 no-repeat; position:absolute; top:50%; left:50px; transform:translate(0,-50%); z-index:2; margin-top:-50px;}
#tpl-banner .visualTop .swiper-button-next {display:inline-block; width:50px; height:50px; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/btn/btn_pc_tpl_design_slider_next.png) 0 0 no-repeat; position:absolute; top:50%; right:50px; transform:translate(0,-50%); z-index:2; margin-top:-50px;}
#tpl-banner .visualTop .dim {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.2;}
#tpl-banner #header .logo {display:inline-block; max-width:600px; max-height:40px; position:absolute; margin-top:-20px; top:50%; left:50%; transform:translateX(-50%); text-align:center;}
#tpl-banner #header .logo img {max-height:40px;}

/* 배너형 햄버거 메뉴 레이어 */
#tpl-banner .hamburger-menu-layer {width:100%; position:fixed; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/black_70.png) 0 0 repeat; top:-100%; left:0; z-index:999; transition:all .3s;}
#tpl-banner .hamburger-menu-layer .top {height:99px;}
#tpl-banner .hamburger-menu-layer .top .inner {max-width:1232px; min-width:1080px; height:100%; margin:0 auto; position:relative;}
#tpl-banner .hamburger-menu-layer .top .inner .btn-hamburger-menu-layer-close {display:block; width:46px; height:46px; box-sizing:border-box; background:url(https://image.makeshop.co.kr/mysoho/assets/shop/pc/img/btn/btn_close_h22.png) center center no-repeat; position:absolute; top:25px; right:0; border:1px solid #717375; text-indent:-9999px; margin-right:50px;}
#tpl-banner .hamburger-menu-layer .bot .inner {min-width:1080px; height:100%; margin:0 auto; text-align:center;}
#tpl-banner .hamburger-menu-layer .bot .inner .menu ul {display:inline-block; overflow:hidden;}
#tpl-banner .hamburger-menu-layer .bot .inner .menu ul li {float:left;}
#tpl-banner .hamburger-menu-layer .bot .inner .menu ul li a {display:block; padding:0 50px; text-align:center; line-height:120px; font-size:18px; font-weight:bold; color:#fff;}
#tpl-banner .hamburger-menu-layer .bot .inner .nomenu {line-height:120px; font-size:14px; color:#fff;}
#tpl-banner .hamburger-menu-layer.open {top:0;}
#tpl-banner .hamburger-menu-layer .top .inner .btn-notice {display:inline-block; padding-left:25px; background:url(//image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/header_notice_ico.png) left center no-repeat; position:absolute; top:50%; transform:translateY(-50%); left:50px;}
#tpl-banner .hamburger-menu-layer .top .inner .btn-notice span {display:inline-block; font-weight:bold; font-size:14px; color:#ffffff;}
#tpl-banner .hamburger-menu-layer .top .inner .btn-qa {display:inline-block; padding-left:22px; position:absolute; top:50%; transform:translateY(-50%); left:180px; background:url(//image.makeshop.co.kr/mysoho/assets/shop/pc/img/common/header_qa_ico.png) left center no-repeat;}
#tpl-banner .hamburger-menu-layer .top .inner .btn-qa span {font-weight:bold; font-size:14px; color:#fff;}

/* 23.01.02 이현진 추가 */
#tpl-banner .hamburger-menu-layer {cursor:default;}
#tpl-banner .hamburger-menu-layer .bot .inner {max-width:1132px;}
#tpl-banner .hamburger-menu-layer .bot .inner .menu {padding:42px 0 40px;}
#tpl-banner .hamburger-menu-layer .bot .inner .menu > ul {display:block;  text-align:left; font-size:0; max-height:467px; overflow-x:hidden; overflow-y:auto;}
#tpl-banner .hamburger-menu-layer .bot .inner .menu > ul::-webkit-scrollbar {width:5px; background:#666;}
#tpl-banner .hamburger-menu-layer .bot .inner .menu > ul::-webkit-scrollbar-thumb {background-color:#ccc;}
#tpl-banner .hamburger-menu-layer .bot .inner .menu > ul > li {float:none; display:inline-block; width:20%; margin-bottom:40px; vertical-align:top;}
#tpl-banner .hamburger-menu-layer .bot .inner .menu > ul > li a {font-size:16px; color:#fff; line-height:1; font-weight:300; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 11px 0 0; text-align:left;}
#tpl-banner .hamburger-menu-layer .bot .inner .menu > ul > li:hover > a, #tpl-banner .hamburger-menu-layer .bot .inner .menu ul .subDepth li:hover a {font-weight:500; letter-spacing:-0.05px;}
#tpl-banner .hamburger-menu-layer .bot .inner .menu ul .subDepth {display:block; margin-top:19px;}
#tpl-banner .hamburger-menu-layer .bot .inner .menu ul .subDepth li {float:none;}
#tpl-banner .hamburger-menu-layer .bot .inner .menu ul .subDepth li + li {margin-top:16px;}
#tpl-banner .hamburger-menu-layer .bot .inner .menu ul .subDepth li a {font-size:14px; color:#fff;}