@charset "utf-8";

#header{border-bottom:1px solid #ebebeb;}

/* visual */
.shop_view .sub_visual{ display: none; }
.sub_visual{ position: relative; height: 23em; background: #222 url('/images/content/visual.jpg') no-repeat 50% / cover; font-size: 20px; font-weight: 600; color: #fff; }
.sub_visual::before{ content: ''; position: absolute; inset: 0; margin: auto auto 0; width: 1px; height: 21.73913043%; background: currentColor; }
.sub_visual__inr{ display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.sub_visual__p.p2{ position: relative; top: 2px; font-size: 2em; }
@media(max-width:1025px){
	.sub_visual{ font-size: 17px; }
}
@media(max-width:541px){
	.sub_visual{ font-size: 14px; }
}

#content{padding-bottom:70px;}
#content h2{margin-top: 80px;margin-bottom: 50px;font-size:32px;color:#111;font-weight:400;text-align:center;font-weight: 700;word-break:keep-all;}

/* 상품리스트 */
.product_list {display: flex; flex-wrap: wrap; margin: -35px -10px;}
.product_list .list {width: 20%; margin: 35px 0; padding: 0 10px; box-sizing: border-box;}
.product_list .list .img {aspect-ratio: 3/4; overflow: hidden; isolation: isolate; padding-top: 0;}
.product_list .list .img span {display: block; width: 100%; height:100%; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; transition: .3s;}
.product_list .list.none .img span {background-color: #f0f0f0; background-image: url(/images/common/none_product.jpg);}
.product_list .list:hover .img span {transform: scale(1.05);}
.product_list dl {margin-top: 20px; color: #777;}
.product_list dl > * {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.product_list dl dt { margin-bottom: 5px; font-size: 18px; font-weight: 500; color: #000; }
.product_list .price {text-align: left;}
.product_list .price span {position:relative; padding: 0 2px; margin-left: 10px; font-size: 14px; font-weight: 400; color: #aaa;}
.product_list .price span::after {position:absolute; left:0; top:50%; content:''; width:100%; height:1px; margin-top: -1px;  background:#bbb;}

/* *[data-shop-list="default"] > li > a .price {display: flex; flex-wrap: wrap; align-items: center; margin-top: 15px; font-size: 17px; font-weight: 600; color: #7ba548;}
*[data-shop-list="default"] > li > a .sold {display: block; text-align: left; color: #bdbdbd;}
*[data-shop-list="default"] > li *[data-shop-icon="icon"] {text-align: left; margin-top: 15px;}
*[data-shop-icon="icon"] > i {border-color: var(--primary2); color: var(--primary2);}
*[data-shop-icon="icon"] [data-shop-icon="new"] {background: var(--primary);}
*[data-shop-list="default"] > li *[data-shop-list="util"] {left: 20px; top: 20px; margin-top: 0;} */
[data-shop-list="default"] dl {min-height: 55px;}
dl[data-shop-view="delivery"].period{margin-top:21px;}

[data-shop-list="default"]{gap:0 20px;}
[data-shop-list="default"] > li:not(.list), 
[data-shop-list="default"] .list{padding:0 !important;}


/* 몰 소개 */
.area_about{max-width:1100px; margin:30px auto 0;}
.area_about:after{content:''; display:block; clear:both;}
.area_about .box_img{width:100%; padding-top:332px;}
.area_about .box_img{background:url(../images/content/img_about01.jpg) no-repeat 50% 50%; background-size:cover;}
.area_about .tit{font-size:22px; font-weight:500;}
.box_txt{position:relative; max-width:1100px; margin:0 auto; padding:60px 0;}
.box_txt h3{font-size:28px; font-weight:500; color:#333; word-break:keep-all; line-height:1.5em;}
.box_txt p{padding:15px 0; font-size:16px; font-weight:400; color:#666; letter-spacing:-1px; line-height:1.7em; word-break:keep-all;}
.box_txt p > span.red_bg{background:#e84950; color:#fff;}
.box_txt strong{color:#111; font-weight:500;}
.box_txt b{font-size:17px; font-weight:500; color:#111;}

/* 마이페이지 */
.area_shopMypage .top > div > p {display: flex; display: flex; align-items: center;}
.modify-btn {position: absolute; right: 15px; top: 12px;}
.mypage-member {display: flex; display: flex; align-items: center; margin: 0 12px; font-size: 14px;}
.mypage-member:has([data-member="basic"]) {color: #da8133;}
.mypage-member:has([data-member="silver"]) {color: #888;}
.mypage-member:has([data-member="gold"]) {color: #eaa824;}
.mypage-member:has([data-member="platinum"]) {color: #912eca;}
.mypage-member:has([data-member="vip"]) {color: #3baedc;}
[data-member] {display: block; width: 22px; height: 22px; margin-right: 5px; background-size: cover; background-position: center; background-repeat: no-repeat;}
[data-member="basic"] {background-image: url(/images/common/ic-member-basic.svg);} 
[data-member="silver"] {background-image: url(/images/common/ic-member-silver.svg);} 
[data-member="gold"] {background-image: url(/images/common/ic-member-gold.svg);} 
[data-member="platinum"] {background-image: url(/images/common/ic-member-platinum.svg);} 
[data-member="vip"] {background-image: url(/images/common/ic-member-vip.svg);} 

[data-pop-layer="layer"] .popBox .mypage-popup-conts {max-height: 100%; padding: 40px 40px 50px; text-align: center;}
.mypagePopup .popBox {min-height: 500px; height: auto;}
.mypage-popup__item:not(:first-child) {margin-top: 40px;}
.mypage-popup__item h4 {position: relative; margin-bottom: 15px; font-size: 22px; font-weight: 700; color: #000;}
.mypage-popup__item .close {margin-top: 30px;}
.member-grade {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 0 10px; margin-top: 25px;}
.member-grade [data-member] {width: 40px; height: 40px; margin: 0 auto 12px;}
.member-grade li {min-width: 130px; padding:30px 10px; text-align: center; border-radius: 20px; border: 1px solid #e1e1e1;}
.member-grade li h6 {padding-bottom: 20px; margin-bottom: 20px; font-size: 18px; font-weight: 700; color: #000; border-bottom: 1px dashed #e1e1e1;}
.member-grade li h6 em {display: block; color: #ccc; font-size: 14px; font-weight: 600; line-height: 1; margin-bottom:3px;}
.mypage-popup__notice {padding: 15px; margin-top: 30px; color: #666; font-weight: 300; background: #f7f7f7; text-align: center;}
.dot-list {text-align: left;}
.dot-list li {position: relative; padding-left: 10px; margin: 5px 0;}
.dot-list li::before {position: absolute; left:0; top: 9px; content:''; width: 3px; height: 3px; border-radius: 100%; background: #ccc;}

@media screen and (max-width:1280px){
	/* *[data-shop-list="default"] > li > a .price em {flex-basis: 100%; text-align: left;} */
	.product_list .price span {margin-left: 0;}
}

@media screen and (max-width:1220px){
	/* 장바구니 custom */
	.area_shopCart *[data-cart-table="point"]{width:50%;}
}

@media screen and (max-width:1150px){
	.area_about .box_img{padding-top:28.8695652173913vw;}
	.box_txt{padding:40px 0 0;}
	.box_txt p br{display:none;}
}

@media screen and (max-width:1024px){
	.product_list .list {width: 33.33%; margin: 30px 0;}
	.product_list .price em {flex-basis: 100%; margin-bottom: 3px;}
	.product_list .price span {margin-left: 0;}
	.modify-btn {right: 0; top: 0;}

	[data-pop-layer="layer"] .popBox .mypage-popup-conts {display: flex; align-items: center; justify-content: center; height: 100%; box-sizing: border-box;}
	.mypage-popup__item {width: 100%;}
	.member-grade li {min-width: auto;}
	
	[data-pop-layer="layer"] .popBox .btn_close {width: 100px; height: 100px; background: none; filter: invert(1);}
	[data-pop-layer="layer"] .popBox .btn_close span {width: 25px; height: 25px; background-size: 25px;}
}

@media screen and (max-width:750px){
	.area_shopList > div:not(.best) *[data-shop-list="default"] > li *[data-shop-list="util"] {text-align: left;}
}


@media screen and (max-width:680px){
	#content h2{font-size:30px;}
	.area_about .box_img.right{margin-left:10px;}
    .certification_area ul li{width:49%;}
    .certification_area ul li:nth-child(2){margin-right:0;}
}

@media screen and (max-width:850px){
	.product_list .list {width: 50%;}
	.product_list .price em {flex-basis: auto; margin-right: 10px;}
}

@media screen and (max-width:540px){
	.product_list {margin: -20px -5px;}
	.product_list .list {padding: 0 5px; margin: 20px 0;}
	.product_list dl dt {font-size: 16px; margin-bottom: 3px;}
	.product_list dl dd {font-size: 14px;}
	.product_list .price {margin-top: 12px; font-size: 15px !important;}
	.product_list .price em{ flex-basis: 100%;}
	.product_list .price span {font-size: 13px;}
	[data-shop-list="default"] dl {min-height: 48px;}
	.mypage-member {font-size: 13px;}
	[data-pop-layer="layer"] .popBox .mypage-popup-conts {align-items:flex-start; padding: 50px 20px;}
	.member-grade {grid-template-columns: 1fr; text-align: left;}
	.member-grade [data-member] {margin: 0;}
	.member-grade li {display: flex; align-items: center; justify-content: flex-start; margin: 2px 0; padding:15px 20px; border-radius: 5px;}
	.member-grade li br {display: none;}
	.member-grade li h6 {position: relative; min-width: 70px; margin: 0 20px 0 15px; padding: 0 15px 0 0; font-size: 16px; border-bottom: 0; text-align: left; border-right: 1px dashed #e1e1e1;}
	.member-grade li h6 em {font-size: 13px; margin: 0 0 3px 0;}
	.mypage-popup__notice {margin-top: 20px; padding: 12px 15px; font-size: 14px;}
	.dot-list li {margin: 3px 0;}
	[data-pop-layer="layer"] .popBox .btn_close {width: 60px; height: 60px;}
	[data-pop-layer="layer"] .popBox .btn_close span {width: 20px; height: 20px; background-size: 20px;}

	/* 장바구니 custom */
	.area_shopCart:not(.wish) [data-cart-table="product"]{padding-left:10px !important;}

	[data-shop-list="default"]{gap:0 10px;}
}

@media screen and (max-width:480px){
    .line_list li{width:49%;}
    .line_list li:nth-child(2n){margin-right:0;}
    .line_list li:last-child{margin-right:0 !important;}
    .line_list li:nth-child(3n){margin-right:2%;}
}

@media screen and (max-width:420px){
	#content{padding-bottom:40px;}
	#content h2{margin-top:30px;font-size: 25px;}   
}

@media screen and (max-width:370px){
	.area_about .box_img{float:none; width:100%; padding-top:40.54054054054054vw;}	
	.area_about .box_img{margin-right:0;}

	#content h2{font-size:25px;}
}

/* 품절상품조회 */
.soldOutForm{ --border: #ededed; padding: 59px clamp(10px, calc( 59 / 1600 * 100vw ), 59px) 61px; background: #f5f5f5; font-size: clamp(14px, 1vw, 16px); color: #555; accent-color: var(--primary); }
.soldOutForm *{ font-size: inherit; }
.soldOutForm__ul{ display: grid; gap: 20px 0; }
.soldOutForm__li{ display: flex; align-items: center; }
.soldOutForm__title{ flex-shrink: 0; min-width: 93px; }
.soldOutForm [type="text"]::placeholder{ color: inherit; }
.soldOutForm [type="text"]{ margin: 0; border: 1px solid var(--border); }
.soldOutForm [type="text"],
.soldOutForm__select{ margin: 0; flex: 1; height: 3.46666667em; padding: 1em 21px; border: 1px solid var(--border); font-size: clamp(13px, 0.9375vw, 15px); color: #a4a4a4; }
.soldOutForm__select{ max-width: 186px; padding-right: 40px; background: #fff url('/images/content/soldout_arrow.png') no-repeat calc(100% - 19px); }
.soldOutForm__caution{ margin-left: 24px; font-size: clamp(12px, 0.875vw, 14px); color: #cc2121; }
.soldOutForm__caution::before{ content: ''; margin-right: 6px; display: inline-block; width: 14px; height: 14px; background: url('/images/content/soldout_caution.png') no-repeat 50% / contain; vertical-align: middle; }
.soldOutForm [type="radio"]{ appearance: none; position: relative; margin: 0 10px 0 0; flex-shrink: 0; width: 20px; height: 20px; background: #fff; border: 1px solid var(--border); border-radius: 50%; }
.soldOutForm [type="radio"]:checked{ border-color: var(--primary); }
.soldOutForm [type="radio"]:checked::before{ content: ''; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; background: var(--primary); border-radius: 50%; }
.soldOutForm [type=radio] + label{ margin: 0; color: #a4a4a4; } 
.soldOutForm label + [type=radio]{ margin-left: 42px; }
.soldOutForm__wrapBtn{ margin-top: 40px; display: flex; justify-content: center; gap: 10px; }
.soldOutForm__btn{ display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 240px; width: 100%; height: 60px; padding: 1em .5em; background: #444; box-sizing: border-box; color: #fff; }
a.soldOutForm__btn{ color: #fff; }
.soldOutForm__btn::before{ content: ''; display: inline-block; background: no-repeat 50% / contain; }
.soldOutForm__btn.inquiry::before{ width: 17px; height: 16px; background-image: url('/images/content/soldout_inquiry.png'); }
.soldOutForm__btn.excel::before{ width: 17px; height: 18px; background-image: url('/images/content/soldout_excel.png'); }
.soldOutForm ~ .area_shopList{ margin-top: 80px; }
@media(min-width:1280px){
	.soldOutForm__ul{ grid-template-columns: 1fr 0.822fr; }
	.soldOutForm__li:nth-child(n+3){ grid-column: 1 / span 2; }
}
@media(max-width:767px){
	.soldOutForm__ul{ gap: 30px; }
	.soldOutForm__li{ flex-wrap: wrap; row-gap: 10px; }
	.soldOutForm__title{ flex: 1 100%; }
	.soldOutForm__caution{ margin: 0; width: 100%; }
}

/* 상품목록 - 오늘출발 */
[data-shop-list="default"] .list a{position:relative;}
ko-state{display:flex; flex-direction:column; justify-content:center; align-items:center; position:absolute; right:10px; top:10px; width:65px; height:65px; border-radius:100%; background-color:#111; color:#fff; font-size:12px; font-weight:600;}
ko-state.badge{background-color:var(--green);}
ko-state.badge:before{content:''; display:block; width:36px; height:21px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 20.77'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='2.27 17.49 0 17.49 0 10.86 4.76 4.75 12.54 4.75 12.54 16.73 11.03 16.73 11.03 6.27 5.5 6.27 1.52 11.38 1.52 15.97 2.27 15.97 2.27 17.49'/%3E%3Cpolygon class='cls-1' points='31.08 17.49 27.87 17.49 27.87 15.97 29.56 15.97 29.56 12.57 31.08 12.57 31.08 17.49'/%3E%3Cpolygon class='cls-1' points='23.75 17.49 11.03 17.49 11.03 0 30.22 0 30.22 1.52 12.54 1.52 12.54 15.97 23.75 15.97 23.75 17.49'/%3E%3Cpath class='cls-1' d='M6.54,20.77a3.14,3.14,0,1,1,3.14-3.13A3.13,3.13,0,0,1,6.54,20.77Zm0-4.75a1.62,1.62,0,1,0,1.62,1.62A1.61,1.61,0,0,0,6.54,16Z'/%3E%3Cpath class='cls-1' d='M25.5,20.77a3.14,3.14,0,1,1,3.13-3.13A3.14,3.14,0,0,1,25.5,20.77Zm0-4.75a1.62,1.62,0,1,0,1.61,1.62A1.62,1.62,0,0,0,25.5,16Z'/%3E%3Cpolygon class='cls-1' points='8.21 11.88 4.17 11.88 4.17 10.36 6.68 10.36 6.68 8.05 8.21 8.05 8.21 11.88'/%3E%3Crect class='cls-1' x='27.52' y='4.19' width='8.48' height='1.52'/%3E%3Crect class='cls-1' x='27.63' y='8.29' width='6.13' height='1.52'/%3E%3C/svg%3E");}
@media screen and (max-width:420px){
	ko-state{right:5px; top:5px; width:50px; height:50px; font-size:10px;}
	ko-state.badge:before{width:30px; height:18px;}
}