@charset "utf-8";

/*
 * shop.css / custom_shop.css에서 따로 수정한다.
 *
 * 1)상품목록 - 수정 20240208
 *
 */
 
/* 1)상품목록 */
[data-shop-list="default"]{display:grid; gap:60px 20px;}
[data-shop-list="default"].slide{display:flex; gap:inherit;}/* slide사용시 */
[data-shop-list="default"] > li{position:relative;}
[data-shop-list="default"] > li .img{flex:0 1 100%; overflow:hidden; display:block; position:relative; background-color:#fff; border-radius:40px; aspect-ratio:17/23;}
[data-shop-list="default"] > li .img i{display:block; position:absolute; top:0; left:50%; width:100%; height:100%; transform:translateX(-50%);}
[data-shop-list="default"] > li .img img{object-fit:cover; width:100%; height:100%;}
[data-shop-list="default"] > li .img i:nth-of-type(2){display:none;}
[data-shop-list="default"] a{display:flex; flex-direction:column; position:relative;}
[data-shop-list="default"] div{display:flex; flex-wrap:wrap; align-items:baseline;}
[data-shop-list="default"] strong{flex:0 1 100%; margin-top:20px; font-size:18px; font-weight:600;}
[data-shop-list="default"] description{flex:0 1 100%; margin-top:5px; font-size:15px;}
[data-shop-list="default"] price,
[data-shop-list="default"] priceSale{display:flex; align-items:center; margin-top:5px;}
[data-shop-list="default"] price{font-size:25px; font-weight:700;}
[data-shop-list="default"] priceSale{opacity:0.3; position:relative; margin-right:5px; text-decoration:line-through; font-size:20px; font-weight:700;}
[data-shop-list="default"] price:not(.sold):after{content:'원'; font-size:18px;}
[data-shop-list="default"] price.sold{color:#bdbdbd; font-size:16px;}
[data-shop-list="default"] price.sold.tel{color:#222;}
[data-shop-list="default"] discount{display:flex; justify-content:center; align-items:center; position:absolute; top:10px; right:10px; min-width:60px; background-color:var(--color-point); border-radius:100%; font-size:18px; color:var(--color-white); font-weight:700; text-align:center; line-height:1cap; aspect-ratio:1/1;}
[data-shop-list="default"] discount i{font-size:16px; font-weight:500;}
[data-shop-list="default"] button[class*="-btn"]{position:absolute; top:0; right:0; width:40px; height:40px; background-color:transparent; background-repeat:no-repeat; background-position:50% 50%;}
[data-shop-list="default"] button.interest-btn{display:none; background-image:url(../images/shop/icon_interest.svg); background-size:18px;}
[data-shop-list="default"] button.interest-btn.on{background-image:url(../images/shop/icon_interest_on.svg);}
[data-shop-list="default"] [data-shop-icon="icon"]{margin-top:10px;}
	/* 기존 css */
[data-shop-list="default"] > li [data-shop-list="util"]{opacity:0; position:absolute; top:0; left:50px; z-index:5; margin-top:calc(100% - 110px); transition:all 0.3s ease 0s;}
[data-shop-list="default"] > li .img{padding-top:0;}
[data-shop-list="default"] > li [data-shop-list="util"] > a{display:block; position:relative; width:30px; height:30px; margin:2px 0px; border-radius:3px; background:#fff; font-size:0px;}
[data-shop-list="default"] > li [data-shop-list="util"] > a:before{content:''; opacity:0.5; display:block; position:absolute; top:50%; left:50%; width:16px; height:15px; margin:-7px 0 0 -8px; background-image:url(../images/shop/sp_shop.png); background-repeat:no-repeat; transition:all 0.3s ease 0s;}
[data-shop-list="default"] > li [data-shop-list="util"] > a.basket{display:none;}
[data-shop-list="default"] > li [data-shop-list="util"] > a.basket:before{background-position:0 0;}
[data-shop-list="default"] > li [data-shop-list="util"] > a.interest:before{background-position:-16px 0;}
[data-shop-list="default"] > li [data-shop-list="util"] > a.view:before{background-position:-32px 0;}
[data-shop-list="default"] > li [data-shop-list="util"] > a:hover:before{opacity:1;}
[data-shop-list="default"] > li [data-shop-icon="icon"]{text-align:left;}
[data-shop-list="default"] > li.active .percent{opacity:1; visibility:visible;}
[data-shop-list="default"] > li.active [data-shop-list="util"]{opacity:1;}
	/* 언어 - 영어 */
html[lang="en"] [data-shop-list="default"] price:after,
html[lang="en"] [data-shop-list="default"] priceSale:after{display:none;}
html[lang="en"] [data-shop-list="default"] price:before,
html[lang="en"] [data-shop-list="default"] priceSale:before{content:'$';}
		/* 기존 css */
html[lang="en"] [data-shop-list="default"] > li > a .price i:after{display:none;}
html[lang="en"] [data-shop-list="default"] > li > a .price i:before{content:'$'; display:inline-block; margin-right:3px; font-size:14px; font-weight:300;}
	/* 언어 - 태국어 */
html[lang="th"] [data-shop-list="default"] price:after,
html[lang="th"] [data-shop-list="default"] priceSale:after{content:'วอน';}
		/* 기존 css */
html[lang="th"] [data-shop-list="default"] > li > a .price i:after{content:'วอน';}
	/* 1)상품목록 - 반응형 */
@media screen and (min-width:1301px){
	[data-shop-list="default"]{grid-template-columns:repeat(5, 1fr);}
}
@media screen and (max-width:1300px){
	[data-shop-list="default"]{grid-template-columns:repeat(3, 1fr);}
}
@media screen and (max-width:1024px){
	[data-shop-list="default"] > li .img{border-radius:20px;}
	[data-shop-list="default"] strong{font-size:18px;}
	[data-shop-list="default"] price{font-size:20px;}
	[data-shop-list="default"] priceSale{font-size:18px;}
	.area_shopList > div:not(.best) [data-shop-list="default"] > li{width:100% !important;}
}
@media screen and (max-width:768px){
	[data-shop-list="default"]{grid-template-columns:repeat(2, 1fr);}
}
@media screen and (max-width:620px){
	.area_shopList > div:not(.best) [data-shop-list="default"] > li{width:100% !important;}
}
@media screen and (max-width:480px){
	[data-shop-list="default"]{gap:40px 20px;}
	[data-shop-list="default"] strong{font-size:16px;}
	[data-shop-list="default"] description{font-size:14px;}
	[data-shop-list="default"] discount{min-width:50px; font-size:15px;}
	[data-shop-list="default"] discount i{font-size:12px;}
	[data-shop-list="default"] price, 
	[data-shop-list="default"] priceSale{flex:0 1 100%;}
	[data-shop-list="default"] price{margin-top:5px;}
	[data-shop-list="default"] priceSale{font-size:14px;}
	[data-shop-list="default"] price{font-size:16px;}
}


/* 목록 */
[data-shop-list="default"] > li [data-shop-list="util"]{display:none !important;}

/* 게시판 */
ul.bbsList,
.bbsList thead tr:first-child th,
.bbsTitle,
.list_shop_accordion{border-top-color:#222;}

/* 버튼 */
.button.red{background:var(--color-point); border:1px solid var(--color-point);}

/* 아이콘 */
[data-shop-icon="icon"] > i{border-radius:3px;}