@charset "utf-8";

/* common */
.inr{ position: relative; margin: 0 auto; max-width: 87.5rem; width: 92%; height: 100%; z-index: 2; }
.inr.wide{ max-width: 106.25rem; }
.wrapper{margin: 0 auto; max-width: 87.5rem; width: 92%; }

/* header */
#header{ box-sizing: border-box; }
#header{ background: #fff; }
#header .inr{ display: flex; justify-content: space-between; height: 100%; }
#header .logo{ }
#header .logo > a{ display:flex; align-items: center; height: 100%; }
#header nav{ position: relative; text-align:center;}
#header .gnb{ display: flex; position: relative; }
#header .gnb > li{display:inline-block; position:relative;}
#header .gnb > li > a{display:inline-block; color:#1a1a1a; font-weight:400;}
#header .gnb > li > a.on{color:#0b327a;}
#header .gnb > li:first-child > a{margin-left:0px;}
#header .gnb .sub_menu{opacity:0; visibility:hidden; position:absolute; top:38px; left:50%; transform: translateX(-46%); z-index:90; width:100%; min-width:151px; box-sizing:border-box; background:#fff; text-align:left; font-size: 14px; font-weight: 500; color: #9e9e9e; transition:0.3s ease;}
#header .gnb > li:hover > ul{opacity:1; visibility:visible;}
#header .gnb .sub_menu > li > a{ display: block; padding: 14px 22px; border: 1px solid #ddd; }
#header .gnb .sub_menu > li + li > a{ border-top: 0; }
@media(min-width:768px){
	#header{ height: 116px; padding-bottom: 14px; }
	#header .inr{ align-items: flex-end; }
	#header nav{ bottom: 15px; }
	#header .gnb{ justify-content: center; left: 1.82291667vw; }
}
@media(min-width:1280px){
	#header .gnb{ gap: 4.0625vw; }
	#header .gnb > li > a{ font-size:17px; }
}
@media(max-width:1279px){
	#header .logo img{ height: 70px; }
	#header .gnb{ gap: 3vw; }
}
@media(max-width:767px){
	#header{ padding-top: 14px; }
	#header .inr{ flex-wrap: wrap; }
	#header .logo img{ height: 60px; }
	#header nav{ overflow: auto hidden; order: 3; width: 100%; padding: 0 7px; }
	#header .gnb{ justify-content: space-between; gap: 13px; }
	#header .gnb > li > a{ font-size:14px; }
	#header .gnb .sub_menu{ display: none; }
}

/* 검색창 */
.header_search{ display: flex; align-items: center; width: 194px; height: 32px; padding-right: 10px; background: #f5f5f5; border-radius: 3em; box-sizing: border-box; font-family: '돋움', 'Dotum', '굴림', 'Gulim', Sans-serif; font-size: 12px; color: #aaa; }
.header_search.on{ visibility: visible; }
.header_search__input{ margin: 0; width: 1px; flex: 1; height: 100%; padding: 0 5px 0 22px; background: 0; border: 0; border-radius: 3em; font-size: inherit; letter-spacing: 0.11666667em; }
.header_search__button{ aspect-ratio: 1; display: flex; justify-content: center; align-items: center; height: 100%; background: 0; }
@media(prefers-reduced-motion:no-preference) and (min-width:768px){
	.header_search{ clip-path: circle(11% at 111% 50%); transition: .6s; }
	.header_search.on{ clip-path: circle(160% at 111% 50%); }
}
@media(min-width:768px){
	.header_search{ width: 204px; visibility: hidden; }
}

/* 유틸 메뉴 */
.area_util{ display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-bottom: 12px; }
.util_menu{ display: flex; gap: 23px; padding-right: 10px; }
.util_menu-btn_search{ position: relative; right: 3px; width: 20px; height: 21px; background: 0; }
.util_menu-a{display:inline-block; position:relative;}
.util_menu-tooltip{opacity:0; position:absolute; bottom:-20px; left:50%; display:inline-block; padding:0 10px; background:#f1f1f1; border-radius:50rem; font-size:12px; color:#444; white-space:nowrap; transform:translateX(-50%) translateY(-20px); transition:0.3s ease; pointer-events: none;}
.area_util [data-util]:before{content:''; display:block; top: 0; width:21px; height:21px; background-repeat:no-repeat; background-position:50% 0;}
.area_util [data-util="login"]:before{ position: relative; right: -3px; background-image:url(../images/common/icon_login.png);}
.area_util [data-util="logout"]:before{background-image:url(../images/common/icon_login.png);}
.area_util [data-util="join"]:before{background-image:url(../images/common/icon_join.png);}
.area_util [data-util="mypage"]:before{background-image:url(../images/common/img_util_mypage.png);}
.area_util [data-util="basket"]:before{background-image:url(../images/common/icon_cart.png);}
.area_util [data-util="basket"] i{ display:inline-flex; justify-content: center; align-items: center; position:absolute; top: -3px; right: -11px; width: 16px; height: 16px; background:var(--primary); border-radius:50%; font-size:11px; color:#fff;}
:is(.util_menu-btn_search, .util_menu-a)::after{ content: ''; position: absolute; inset: -5px; }
:is(.util_menu-btn_search, .util_menu-a):hover .util_menu-tooltip{opacity:1; transform:translateX(-50%) translateY(-40px);}
@media(min-width:768px){
	.area_util{ gap: 20px; }
}
@media(max-width:767px){
	.area_util{ gap: 10px; }
	.util_menu-li:nth-of-type(1){ display: none; }
}

#header .btn_menu{display:none; position:absolute; top:50%; right:0px; z-index:91; width:58px; height:58px; font-size:0px; text-align:center; transform:translateY(-50%); transition:0.5s ease-in-out;}
#header .btn_menu span{overflow:hidden; display:block; position:relative; top:50%; width:19px; height:12px; margin:0 auto; transform:translateY(-50%); -webkit-transform:translateY(calc(-50% + 0.5px));}
#header .btn_menu span i,
#header .btn_menu span:before,
#header .btn_menu span:after{display:block; position:absolute; height:2px; background:#222; transform:translateX(0px);}
#header .btn_menu span:before{content:''; width:19px;}
#header .btn_menu span:after{content:''; width:19px;}
#header .btn_menu span:before{right:0px; top:0px; transition:transform 0.5s ease 1.2s;}
#header .btn_menu span:after{left:0px; bottom:0px; transition:transform 0.5s ease 1s;}
#header .btn_menu span i{opacity:1; left:0px; top:5px; width:19px; transition:opacity 0.3s ease 0s, transform 0.5s ease 1.1s;}
#header .btn_menu em{display:block; overflow:hidden; position:absolute; top:50%; left:50%; width:19px; height:16px; margin:-8px 0 0 -9.5px; transform:translateX(19px); transition:transform 0.5s ease 0.5s;}
#header .btn_menu em i{display:block; position:absolute; width:0px; height:2px; background:#222; transform:rotate(0);}
#header .btn_menu em i:nth-of-type(1){top:1px; left:0px; transition:width 0.5s ease 0.5s, transform 0.5s ease 0s, top 0.5s ease 0s;}
#header .btn_menu em i:nth-of-type(2){bottom:1px; left:0px; transition:width 0.5s ease 0.5s, transform 0.5s ease 0s, bottom 0.5s ease 0s;}
#header .btn_menu:hover span i{opacity:0;}
#header .btn_menu.active span i,
#header .btn_menu.active span:before,
#header .btn_menu.active span:after{transform:translateX(-19px);}
#header .btn_menu.active span:before{transition-property:transform; transition-delay:0s;}
#header .btn_menu.active span i{transition-property:transform; transition-delay:0.1s;}
#header .btn_menu.active span:after{transition-property:transform; transition-delay:0.2s;}
#header .btn_menu.active em{transform:translateX(0); transition-duration:0s; transition-delay:0s;}
#header .btn_menu.active em i:nth-of-type(1){top:6px; width:100%; transform:rotate(45deg) perspective(500px); transition-delay:0.5s, 1s, 1s;}
#header .btn_menu.active em i:nth-of-type(2){bottom:8px; width:100%; transform:rotate(-45deg) perspective(500px); transition-delay:0.5s, 1s, 1s;}

/* shop */
 *[data-shop-list="default"] > li > a .percent{padding:10px 15px !important; margin-top:0px !important;}
 *[data-shop-list="default"] > li > a > em{font-size:18px;}

/* footer */
#footer{ position: relative; padding: 76px 0 125px; background: #2f2f2f; font-size: 14px; color: #fff; }
.footer__inr{ display: grid; }
.footer-h2{ font-size: 15px; font-weight: 500; color: #c3c3c3; }
.footer__customer{ grid-area: customer; }
.footer__customer__ul{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 25px; margin-top: 10px; max-width: 450px; text-transform: uppercase; }
.footer__customer-title{ margin-right: 9px; font-weight: 500; letter-spacing: .04em; color: #c3c3c3; }
.footer__customer-tel{ font-size: 30px; }
.footer__customer-fax{ font-size: 22px; }
.footer__account{ grid-area: account; }
.footer__account-p{ margin-top:2px; }
.footer__account-notice{ margin-top: 4px; opacity: .49; }
.footer__account-strong{display:inline-block; min-width:250px; font-size:26px; letter-spacing: .02rem;}
.footer__info{ grid-area: info; display: flex; justify-content: space-between; gap: 2em 3em; border-top: 1px solid #4d4d4d; }
.footer__link{ display: flex; gap: 5px; }
.footer__link-a{ display: inline-flex; justify-content: center; align-items: center; height: 2.28571429em; padding: 0 16.5px; background: #31302d; border: 1px solid #595959; box-sizing: border-box; letter-spacing: .05em; color: #aeaeae; }
.footer__address{ display: flex; flex-wrap: wrap; position: relative; gap: 5px 31px; max-width: 900px; }
.footer__address-item{ position: relative; color: #aeaeae; }
.footer__address-item b{ margin-right: 5px; color: #fff; }
.footer__copyright{ margin-top: 26px; width: 100%; font-size: 12px; opacity: .2; }
.footer__copyright b{ font-weight: 900; }
.top_btn{ display: inline-flex; justify-content: center; align-items: center; position: absolute; top: 0; right: 2.1875vw; width: 4.1875em; height: 4.1875em; background: #f6b52b; font-size: 1rem; color: #fff; transform: translateY(-50%); }
@media(min-width:768px){
	.footer__account-strong{ margin: 0 21px 0 8px; }
	.footer__address-item + .footer__address-item::before{ content: ''; position: absolute; margin: auto auto auto -17px; inset: 0; height: 14px; border-left: 1px solid #606060; pointer-events: none; }
.footer__address-item:nth-child(5):before{ display: none; }
}
@media(min-width:1280px){
	.footer__inr{ grid-template: 'customer account' 'info info' / 50% 50%; }
	.footer__account{ padding-left: clamp(1em, 4.28571429vw, 60px); border-left: 1px dashed #5f5f5f; }
	.footer__info{ margin-top: 47px; padding-top: 59px; }
	.footer__address{ top: 6px; }
	.footer__info{ flex-direction: row-reverse; }
	.footer__link{ justify-content: flex-end; }
}
@media(max-width:1279px){
	.footer__inr{ grid-template: 'customer' 'account' 'info'; }
	.footer__account{ margin-top: 2em; padding-top: 2em; border-top: 1px dashed #5f5f5f; }
	.footer__info{ flex-direction: column; margin-top: 2em; padding-top: 2em; }
}
@media(max-width:767px){
	.footer__account-strong{ display: block; font-size: 30px; }
	.footer__link-a{ font-size: 12px; }
}

/* lnb */
.lnb{max-width:1200px; margin:0 auto 50px;}
.lnb > ul{text-align:center;}
.lnb > ul > li{display:inline-block; margin:0 5px;}
.lnb > ul > li > a{display:inline-block; display:flex; flex-direction:column; justify-content:center; min-width:140px; height:50px; box-sizing:border-box; border:1px solid #e7e7e7; font-size:14px; text-align:center;}
.lnb > ul > li > a.on{border-color:#222; color:#222;}

@media screen and (max-width:1024px){
	#header .btn_menu{display:block;}
	
	#header .area_menu_all{display:block; opacity:0; visibility:hidden; position:fixed; top:0px; z-index:90; width:100%; height:100%; padding:0px; background:transparent; border-width:0px; transition:0.3s ease 0.7s;}	
	#header .area_menu_all > ul > li:not(.gnb_cate){display:block;}
	#header .area_menu_all .btn_close{display:block; opacity:0; visibility:hidden; position:fixed; top:0px; left:0px; z-index:1; display:block; width:100%; height:100%; background:rgba(0,0,0,0.3); font-size:0px; transition:0.3s ease;}
	#header .area_menu_all .gnb{overflow-y:auto; position:absolute; top:0px; left:-80%; z-index:10; width:80%; height:100%; background:#fff; transition:0.7s ease;}
	#header .area_menu_all > ul li{position:relative;}
	#header .area_menu_all > ul > li{display:block; padding:0px; border-bottom:1px solid #e9e9e9;}
	#header .area_menu_all > ul > li > a{float:none; display:block; width:auto; padding:10px 40px 10px 15px; margin-left:0px; font-size:18px; text-align:left;}
	#header .area_menu_all > ul > li > ul{float:none; opacity:1; visibility:visible; position:static; width:auto; margin:0 15px 15px; padding:0; background:#f5f5f5; border-width:0px; transition:none;}
	#header .area_menu_all > ul > li > ul > li{display:block; margin:0px;}
	#header .area_menu_all > ul > li > ul > li:hover > a,
	#header .area_menu_all > ul > li > ul > li:focus > a{color:#444;}
	#header .area_menu_all > ul > li > ul > li.only{width:100%;}
	#header .area_menu_all > ul > li > ul > li.active > a,
	#header .area_menu_all > ul > li > ul > li.active:hover > a,
	#header .area_menu_all > ul > li > ul > li.active:focus > a{color:#f2483b;}
	#header .area_menu_all > ul > li > ul > li > a{display:block; width:auto; padding:10px 40px 10px 10px; border-bottom:1px solid #d8d8d8;}
	#header .area_menu_all > ul > li > ul > li > *{display:block; vertical-align:middle;}	
	#header .area_menu_all > ul > li > ul > li:last-child > a{border-bottom-width:0px;}
	#header .area_menu_all > ul > li > ul > li:last-child > ul{border-top:1px solid #d8d8d8; border-bottom-width:0px;}
	#header .area_menu_all > ul > li > ul > li > ul{padding:10px 15px; background:#eaeaea; border-bottom:1px solid #d8d8d8;}
	#header .area_menu_all > ul > li > ul > li > ul > li{display:block;}
	#header .area_menu_all > ul > li > ul > li > ul > li > a{padding:2px 0px; color:#333;}
	#header .area_menu_all .open{display:block; position:absolute; right:5px; top:5px; width:35px; height:35px; background:transparent; font-size:0px;}
	#header .area_menu_all .open:before,
	#header .area_menu_all .open:after{content:''; display:block; position:absolute; top:50%; left:50%; width:12px; height:2px; margin-top:-6px; background:#cfcece;}
	#header .area_menu_all .open:before{margin-left:-8px; transform:rotate(45deg); transform-origin:0 0;}
	#header .area_menu_all .open:after{margin-left:-5px;transform:rotate(-45deg); transform-origin:100% 0;}
	#header .area_menu_all .open.active{transform:rotate(180deg);}
	#header .area_menu_all .open:focus{outline:none;}

	#header .area_menu_all.active,
	#header .area_menu_all.active .btn_close{opacity:1; visibility:visible; transition-delay:0s;}
	#header .area_menu_all.active .gnb{left:0px;}
	
	.util_menu-tooltip{display:none;}

	.lnb{margin:0 auto 30px;}
}
@media screen and (max-width:750px){
	*[data-shop-list="default"] > li > a .percent{height:59px !important;}

	.lnb > ul > li > a{min-width:inherit; padding-left:25px; padding-right:25px;}
}
@media screen and (max-width:480px){
	*[data-shop-list="default"] > li > a .percent{height:55px !important; padding:10px 13px !important;}

	.lnb > ul > li{margin:0 3px;}
	.lnb > ul > li > a{height:40px; padding-left:15px; padding-right:15px;}
}
@media screen and (max-width:320px){
	*[data-shop-list="default"] > li > a .percent{height:50px !important; padding:7px 10px !important;}
}
@media screen and (max-width:300px){
	#header .btn_menu{overflow:hidden; width:40px;}
}