@charset "utf-8";

/* 공통 */
[data-main]{padding:150rem 0;}
[data-main] h2{margin-bottom:60rem; font-size:35rem; font-weight:700; letter-spacing:3rem; text-align:center;}
	/* 슬라이드 컨트롤 */
[data-main] .swiper-control .swiper-pagination{display:flex; justify-content:center; align-items:center; width:auto; margin-top:35rem;}
[data-main] .swiper-pagination-bullet{opacity:1; width:14rem; height:14rem; box-sizing:border-box; background-color:#b5b5b5; border:1rem solid #b5b5b5; border-radius:100%;}
[data-main] .swiper-pagination-bullet-active{background-color:#fff;}
[data-main] .swiper-control button{opacity:0.3; position:absolute; top:50%; width:20rem; height:35rem; background:url(../images/shop/slide_btn_arrow.svg) no-repeat 50% 50%; background-size:100%; transform:translateY(-50%); transition:opacity 0.3s ease 0s;}
[data-main] .swiper-control button.swiper-nav--prev{left:0;}
[data-main] .swiper-control button.swiper-nav--next{right:0; transform:translateY(-50%) rotate(180deg);}
[data-main] .swiper-control button:hover{opacity:1;}
	/* 공통 - 반응형 */
@media screen and (max-width:480px){
	[data-main]{padding:100rem 0;}
	[data-main] h2{margin-bottom:40rem; font-size:30rem; letter-spacing:2rem;}
	[data-main] .swiper-control .swiper-pagination{margin-top:20rem;}
	[data-main] .swiper-pagination-bullet{width:10rem; height:10rem;}
}

.section-hero {
	.card { display: block; width: 100%; }
	.card-media { display: flex; justify-content: center; }
	.card-image { display: block; width: 100%; height: auto; }
	button { position: absolute; display: none; }
	.swiper-pagination { position: absolute; bottom: 20rem; left: 50%; z-index: 50; display: flex; align-items: center; gap: 10rem; width: auto; transform: translateX(-50%); }
	.swiper-pagination-bullet { width: 50rem; height: 6rem; background-color: #f6f2ef; border-radius: 50rem; opacity: 1; transition: background 0.5s ease; }
	.swiper-pagination-bullet-active { background-color: #c18046; }
	@media screen and (max-width: 480px) {
		.swiper-pagination { gap: 5rem; }
		.swiper-pagination-bullet { width: 35rem; }
	}
}



/* best items */
.best-product .container{position:relative;}
.best-product [data-shop-list="default"] button.interest-btn{display:none;}
.best-product [data-shop-list="default"] a{overflow:hidden;}
.best-product [data-shop-list="default"] div{opacity:0; justify-content:center; position:absolute; bottom:0; left:0; width:100%; box-sizing:border-box; padding:30rem 0; background-color:rgba(0,0,0,0.6); color:#fff; transform:translateY(50%); transition:0.5s ease 0s; transition-property:opacity, transform;}
.best-product [data-shop-list="default"] komall-discount{display:none;}
.best-product [data-shop-list="default"] strong,
.best-product [data-shop-list="default"] komall-description{text-align:center;}
.best-product [data-shop-list="default"] strong{margin-top:0;}
.best-product [data-shop-list="default"] komall-priceSale{opacity:0.6; font-weight:500;}
.best-product [data-shop-list="default"] [data-shop-icon="icon"]{display:none;}
	/* hover */
.best-product [data-shop-list="default"] a:hover div{opacity:1; transform:translateY(0%);}
	/* best items - slide custom */
.best-product .swiper-control button.swiper-nav--prev{left:-30rem; transform:translateY(calc(-50% + 20rem));}
.best-product .swiper-control button.swiper-nav--next{right:-30rem; transform:translateY(calc(-50% + 20rem)) rotate(180deg);}
	/* best items - 반응형 */
@media screen and (max-width:1300px){
	.best-product .swiper-control button{display:none;}
}
@media screen and (max-width:1024px){
	.best-product [data-shop-list="default"] div{all:revert-layer; opacity:1; display:flex; flex-wrap:wrap; justify-content:center; position:static; margin-top:20rem; transform:translateY(0);}
}
@media screen and (max-width:480px){
	.best-product [data-shop-list="default"] komall-price, 
	.best-product [data-shop-list="default"] komall-priceSale{flex:inherit;}
	.best-product [data-shop-list="default"] komall-price{margin-top:15rem;}
}

/* new items */
[data-main="new-product"]{background-color:#f2ebe4;}

/* 게시판 */
:is([data-main="news"], [data-main="gallery"]) [class*="inr_"]{position:relative;}
:is([data-main="news"], [data-main="gallery"]) .more-btn{display:inline-flex; align-items:center; gap:5rem; position:absolute; right:20rem; top:10rem; font-size:14rem; color:#999;}
:is([data-main="news"], [data-main="gallery"]) .more-btn i{font-size:17rem;}
:is([data-main="news"], [data-main="gallery"]) .none_data{padding:40rem 20rem; background-color:#f6f6f6; border-width:0; color:#999;}
[data-main="gallery"]{padding-top:0 !important;}
[data-main="gallery"] .list{display:grid; grid-template-columns:repeat(3, 1fr); gap:30rem;}
[data-main="gallery"] .list a{display:block;}
[data-main="gallery"] .list .image{overflow:hidden;}
[data-main="gallery"] .list .image img{max-width:100%;}
[data-main="gallery"] .list strong{display:block; margin-top:15rem; font-weight:500; font-size:18rem;}
[data-main="gallery"] .list p{margin-top:10rem; display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; color:#666;}
	/* 게시판 - 반응형 */
@media screen and (max-width:768px){
	[data-main="gallery"] .list{grid-template-columns:repeat(2, 1fr);}
}
@media screen and (max-width:480px){
	:is([data-main="news"], [data-main="gallery"]) .more-btn{position:relative; top:auto; left:50%; margin-top:30rem; text-align:center; transform:translateX(-50%);}
	[data-main="gallery"] .list{grid-template-columns:repeat(1, 1fr);}
}