@charset "UTF-8";

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

/* 상단 */
.hd-wrap {background:#fff; box-sizing:border-box;}
#header {position:fixed; z-index:10; width:640px; top:0; min-height:55px; border-bottom:1px solid #e6e6e6; overflow:hidden; max-width:640px;} /* 19.07.15 수정 */
#header h1 {padding-top:15px; padding-bottom:15px; font-size:19px; text-align:center; word-break:keep-all; word-wrap:break-word; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; height:26px; line-height:30px;} /* 17.12.05 수정 */
#header h1 a {line-height:26px;  display:inline-block; width:52%; word-break:keep-all; word-wrap:break-word; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;} /* 18.01.11 수정 */
#header h1.w50-ib {width:50%; display:inline-block;} 
#header .btn-right {position:absolute; top:11px; right:12px;}
#header .btn-left {position:absolute; top:50%; left:20px; width:18px; height:18px; margin-top:-8px; background:url('//image.makeshop.co.kr/mysoho/assets/shop/img/btn/h30_arr_left.png') no-repeat; background-size:18px auto; 
text-indent:-9999em;} /* 17.12.05 수정 */
#header .btn-odr-inquiry {display:inline-block; position:absolute; top:50%;margin-top:-10.5px; right:20px; width:27px; height:21px; background:url('//image.makeshop.co.kr/mysoho/assets/shop/img/btn/h35_order_inquiry_black.png') no-repeat; 
background-size:27px auto; text-indent:-9999em;} 
#header.pophd-left {min-height:48px; box-sizing:border-box; border-bottom:1px solid #e4e4e4;}
#header.pophd-left h1 {height:100%; line-height:48px; padding-left:16px; padding-top:0; padding-bottom:0; font-size:15px; text-align:left;}
#header.pophd-left .btn-h30-close {left:auto; right:13px; background:url('//image.makeshop.co.kr/mysoho/assets/shop/img/btn/h22_close_gray.png') no-repeat center / 11px auto;}
#header .ico-search {display:inline-block; width:21px; height:21px; background:url('//image.makeshop.co.kr/mysoho/assets/shop/img/btn/h36_search_black.png') 0 0 no-repeat/21px auto; position:absolute; bottom:21px; left:20px; text-indent:-9999px;}
#header .ico-search.sub {left:55px;}
#header .ico-cart {display:inline-block; width:20px; height:21px; background:url('//image.makeshop.co.kr/mysoho/assets/shop/img/btn/h38_shoppingbasket_black.png') no-repeat center / 20px auto; position:absolute; bottom:21px; right:65px;}
#header .ico-cart span {display:inline-block; width:18px; padding:3px 0; background:#c70000; text-align:center; font-size:10px; color:#ffffff; position:absolute; top:-5px; right:-12px; border-radius:10px; text-indent:0;}
#header .btn-shoppingbasket span {display:inline-block; width:18px; padding:3px 0; background:#c70000; text-align:center; font-size:10px; color:#ffffff; position:absolute; top:-5px; right:-12px; border-radius:10px; text-indent:0;}
#header .btn-shoppingbasket span.basket-cnt-zero {background:none; text-indent:-9999px;}
#header .hd-wrap {position:relative; height:auto !important; overflow:hidden; max-width:640px;} /* 19.07.15 수정 */
#header .hd-wrap .preloader {position:absolute; left:-9999px; top:-9999px;}
#header .hd-wrap .preloader img {display:block;}
#header .btn-sub-serch {position:absolute; top:50% !important; left:50px !important; margin-top:-10px;}
#header .hd-bg {background:#fff; background-position:50% 50%; background-size:cover;}
#header .base {z-index:101; position:fixed; width:100%; min-height:60px; top:0; /*left:0;*/ background-size:100% auto; background-position:center bottom !important; max-width:640px;} /* 19.07.15 max-width 수정 */
#header .base.none-bg {position:relative; background-image:none !important; max-width:640px;} /* 19.07.15 max-width 수정 */ /* background-color important속성 때문에 다른내용 적용안되어 삭제 */
#header .base.none-bg-transparent {background-color:transparent !important;}
#header .base.none-bg-img {background-image:none !important;}
#header .base.box-shadow {box-shadow:0px 2px 7px #333;}
#header .hd-overlay {position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:#000; opacity:.5}
#header .base .hd-overlay {z-index:-1;}
#header .overlay {display:block; width:100%; height:100%; background:#000; opacity:.5;}
#header .profile {padding:20px 0 17px; text-align:center;} /* 17.12.27 */
#header .profile .photo {position:relative; width:80px; height:80px; margin:0 auto 8px; border-radius:30px; overflow:visible; border-radius:40px; -webkit-transition:all 1s; transition:all 1s; z-index:10;}
#header .profile .photo > span {display:inline-block; width:100%; height:100%;}
#header .profile .photo img {width:100%; height:100%; border-radius:40px; -webkit-transition:all 1s; transition:all 1s;}
#header .profile .tit {word-break:keep-all; word-wrap:break-word; overflow:hidden; width:50%; margin:10px auto 0; font-size:23px; color:#fff; -webkit-transition:all .5s; transition:all .5s; word-break:break-all;} /* 17.12.29 수정 */
#header .profile .desc {word-break:keep-all; word-wrap:break-word; overflow:hidden; width:50%; margin:8px auto 0; font-size:15px; color:#fff; -webkit-transition:all .5s; transition:all .5s; word-break:break-all;} /* 17.12.29 수정 */
#header .profile.pdt-100 {padding-top:100px;}
#header .profile.pd-none {padding:0;}
#header .profile .profile-div {position:relative; width:60px; height:60px; margin:0 auto 11px; border-radius:30px; -webkit-transition:all 1s; transition:all 1s;}
#header.scroll .profile .profile-div {width:0; height:0; opacity:0; -webkit-transition:all .2s; transition:all .2s;}
#header .btn-odr-inquiry.white {background:url('//image.makeshop.co.kr/mysoho/assets/shop/img/btn/h35_order_inquiry_white.png') no-repeat; background-size:21px 18px;} 
#header .btn-shoppingbasket {position:absolute; top:20px; right:65px; width:23px; height:20px; margin-top:-10.5px; background:url('//image.makeshop.co.kr/mysoho/assets/shop/img/btn/h38_shoppingbasket_black.png') no-repeat center / 23px 20px; text-indent:-9999em;} 
#header .btn-h36-serch {position:absolute; top:50%;margin-top:-10.5px; left:20px; width:21px; height:21px; background:url('//image.makeshop.co.kr/mysoho/assets/shop/img/btn/h36_search_black.png') no-repeat center / 21px auto; text-indent:-9999em;}
#header .btn-h36-serch.white {background:url('//image.makeshop.co.kr/mysoho/assets/shop/img/btn/h36_search_white.png') no-repeat center / 21px auto;}
#header .btn-shoppingbasket.white {background:url('//image.makeshop.co.kr/mysoho/assets/shop/img/btn/h38_shoppingbasket_white.png') no-repeat center / 23px 20px;}
#header .hd-wrap .tit.st-bf {width:50%; margin:0 auto; font-size:19px; text-align:center;} /* 17.12.27 추가 */
#header.scroll .base {height:60px;}
#header.scroll.after .hd-wrap {position:fixed; z-index:100; width:100%; box-shadow:0px 2px 7px #333;}
#header.scroll .hd-wrap {height:inherit !important;}
#header.scroll .hd-wrap .profile {height:100%; padding:0;}
#header.scroll .hd-wrap .photo {width:0; height:0; opacity:0; -webkit-transition:all .2s; transition:all .2s;}
#header.scroll .hd-wrap .tit {display:inline-block; width:50%; height:26px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0 auto; padding-top:8px; font-size:19px; color:#fff; text-align:center; line-height:30px; -webkit-transition:all .2s; transition:all .2s;} 
#header.scroll .hd-wrap .tit.st-bf-scroll {overflow:hidden;  width:50%; height:26px; line-height:1.25; padding:0; text-overflow:ellipsis; white-space:nowrap; margin:0 auto;} /* 17.12.27 추가 */
#header.scroll .hd-wrap .desc {display:none;  opacity:0; -webkit-transition:all .2s; transition:all .2s;}
#header.scroll .hd-wrap .tit.active {padding-top:16px; margin-bottom:0px;} /* 17.12.15 수정 */
#header.scroll .hd-wrap .desc.active {display:inline-block; opacity:1; width:50%; height:26px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0 auto; padding-top:7px; font-size:19px; color:#fff; text-align:center; line-height:30px; -webkit-transition:all .2s; transition:all .2s;}
#header.scroll .hd-wrap .desc.active2 {display:inline-block; opacity:1; width:50%; height:26px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0 auto; padding-top:18px; font-size:19px; color:#fff; text-align:center; line-height:30px; -webkit-transition:all .2s; transition:all .2s;}
#header .btn-hamburgerMenu {position:absolute; top:50%; left:20px; width:17px; height:14px; margin-top:-7px; background:url('//image.makeshop.co.kr/mysoho/assets/shop/img/btn/h27_hamburger_menu_000000.png') no-repeat center / 17px auto; text-indent:-9999em;}
#header .btn-hamburgerMenu.top-23 {top:23px !important; margin-top:0 !important;}
#header .btn-h36-serch.left-50 {left:50px !important;}
#header .btn-h36-serch.top-23 {top:19px !important; margin-top:0 !important;}
#header .btn-shoppingbasket.top-23 {top:23px !important; margin-top:0 !important;}
#header .btn-odr-inquiry.top-23 {top:23px !important; margin-top:0 !important;}
#header .btn-users-logon.top-23 {top:23px !important; margin-top:0 !important;}
#header .btn-users-logoff.top-23 {top:23px !important; margin-top:0 !important;}
#header .btn-h36-serch .ico-new {position:absolute; top:-5px; left:20px; width:18px; height:18px; background:url('//image.makeshop.co.kr/mysoho/assets/shop/img/common/ico_h30_new.png') no-repeat center / 18px auto;}
#header.fix {position:fixed; top:0; z-index:100; width:100%; background:#fff;}
#header .btn-users-logon {display:inline-block; position:absolute; top:50%; margin-top:-10.5px; right:20px; width:25px; height:21px; background:url('/assets/shop/img/btn/users-logon-icon.png') no-repeat; background-size:cover; text-indent:-9999em;}
#header .btn-users-logoff {display:inline-block; position:absolute; top:50%; margin-top:-10.5px; right:20px; width:25px; height:21px; background:url('/assets/shop/img/btn/users-logoff-icon.png') no-repeat; background-size:cover; text-indent:-9999em;}
#header .btn-back {display:inline-block; width:8px; height:15px; background:url('/assets/shop/img/btn/back_h30_black.png') 0 0 no-repeat; background-size:8px 15px; position:absolute; top:50%; margin-top:-8px; left:20px; text-indent:-9999px;}
#header .btn-close {position:absolute; top:50%; left:15px; width:15px; height:15px; margin-top:-8px; background:url('//image.makeshop.co.kr/mysoho/assets/shop/img/btn/h30_close.png') no-repeat center / 15px auto; text-indent:-9999px;}
#header .hd-wrap.scroll.after {position:fixed; z-index:100; width:100%; box-shadow:0px 2px 7px #333;}
#header .hd-wrap.scroll {overflow:hidden; -webkit-transition:all 1s; transition:all 1s; border-radius:30px;}
#header .hd-wrap.scroll .hd-bg,
#header .hd-wrap.scroll .hd-overlay {height:60px; -webkit-transition:all 1s; transition:all 1s;}
#header .hd-wrap.scroll .profile {padding:0;}
#header .hd-wrap.scroll .photo {width:0; height:0; opacity:0; -webkit-transition:all 1s; transition:all 1s;}
#header .hd-wrap.scroll .tit {display:inline-block; width:50%; height:26px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0 auto; padding-top:7px; font-size:19px; color:#fff; text-align:center; line-height:30px; -webkit-transition:all .5s; transition:all .5s;} /* 17.12.27 수정 */
#header .hd-wrap.scroll .tit.st-bf-scroll {overflow:hidden;  width:50%; height:26px; line-height:1.25; padding:0; text-overflow:ellipsis; white-space:nowrap; margin:0 auto;} /* 17.12.27 추가 */
#header .hd-wrap.scroll .desc {display:none;  opacity:0; -webkit-transition:all .5s; transition:all .5s;}
#header .hd-wrap.scroll .desc.active {display:inline-block; opacity:1; width:50%; height:26px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0 auto; padding-top:7px; font-size:19px; color:#fff; text-align:center; line-height:30px; -webkit-transition:all .5s; transition:all .5s;} /* 17.12.27 수정 */
#header .hd-wrap.scroll .desc.active2 {display:inline-block; opacity:1; width:50%; height:26px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0 auto; padding-top:18px; font-size:19px; color:#fff; text-align:center; line-height:30px; -webkit-transition:all .5s; transition:all .5s;} /* 17.12.27 수정 */
#header .hd-wrap .hd-ver5 .tit { margin-bottom:3px;}
#header .js-in-header-category {z-index:101;}
#header .js-in-header-category.box-shadow {box-shadow:0px 2px 7px #333;}
#header .js-hdBg-category,
#header .js-base-category {position:absolute; bottom:0;}
#header .js-base-category {position:absolute; bottom:0;}
#header .hd-bg-overlay {position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background-color:#000;}
#header .hd-bg-overlay {position:absolute; width:100%; height:100%; background:#000;}
#header .btn-hamburgerMenu-type,
#header .btn-serch-type,
#header .btn-shoppingbasket-type,
#header .btn-ord-inquiry-type,
#header .btn-users-logon-type,
#header .btn-users-logoff-type {cursor:pointer; z-index:9}
#header.subNewHd {position:relative !important; z-index:initial !important;}

@media screen and (min-width:320px) {
	#header {width:100%;}
}