@charset "utf-8";

/* 비쥬얼 */
.visual-main{overflow:hidden;}
.visual-main__list{position:relative;}
.visual-main__list .box{--sizeHig:890rem; display:block; position:relative; width:100%; min-height:var(--sizeHig);}
.visual-main__list .box .img{display:flex; justify-content:center; height:var(--sizeHig);}
.visual-main__list .box .img img{height:100%;}
.visual-main__list .box .mob{display:none; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.visual-main__list .swiper_page{display:flex; align-items:center; gap:10rem; position:absolute; left:50%; bottom:30rem; z-index:50; width:auto; transform:translateX(-50%);}
.visual-main__list .swiper_page .swiper-pagination-bullet{opacity:1; width:8rem; height:8rem; margin:0; border-radius:50em; background-color:rgba(255,255,255,0.3); transition:background 0.5s ease;}
.visual-main__list .swiper_page .swiper-pagination-bullet-active{background-color:#fff;}
.visual-main__list .swiper-control button{display:none; position:absolute;}
	/* 반응형 */
@media screen and (min-width:1921px){
	.visual-main__list .box img{object-fit:cover; width:100%; height:100%;}
}
@media screen and (max-width:1400px){
	.visual-main__list .box img{object-fit:cover; width:100%; height:100%;}
}
@media screen and (max-width:1024px){
	.visual-main__list .box{--sizeHig:73.73vw/* 755rem */;}
	.visual-main__list .box .mob{display:block;}
	.visual-main__list .box img{object-fit:contain;}
}
@media screen and (max-width:480px){
	.visual-main__list .swiper_page{gap:5rem; bottom:20rem;}
}

/* 공통 */
[data-main]{overflow:hidden; position:relative; padding:var(--page-top) 0;}
[data-main] h2{margin-bottom:35rem; font-family:var(--font-eng); font-size:var(--font25); font-weight:600; text-transform:uppercase;}
[data-main] .title{display:flex; justify-content:space-between; align-items:center; margin-bottom:35rem;}
[data-main] .title h2{margin-bottom:0;}
	/* 슬라이드 컨트롤 */
[data-main] .swiper-control .swiper_page{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_prev{left:0;}
[data-main] .swiper-control button.swiper_next{right:0; transform:translateY(-50%) rotate(180deg);}
[data-main] .swiper-control button:hover{opacity:1;}
	/* 더보기 */
.more-view{display:flex; align-items:center; position:absolute; right:var(--page-pad); top:0; padding:3rem 25rem; transition:0.3s ease;}
.more-view span{display:inline-block; position:relative; z-index:2;}
.more-view:after{content:''; display:block; position:absolute; right:0; top:50%; width:16rem; height:16rem; background-color:var(--color-point); border-radius:40rem; transform:translateY(-50%); transition:0.3s ease;}
	/* 공통 - 반응형 */
@media (hover:hover){
	.more-view:hover{color:#fff;}
	.more-view:hover:after{width:100%; height:23rem;}
}
@media screen and (max-width:480px){
	[data-main] h2{margin-bottom:20rem;}
	[data-main] .swiper-control .swiper_page{margin-top:10rem;}
}

/* 제품 */
[data-main="product"] .inr-1200{position:relative;}
[data-main="product"] ~ [data-main="product"]:before{content:''; display:block; position:absolute; top:0; left:50%; width:1200rem; height:2rem; background-color:#d6e2ef; transform:translateX(-50%);}
@media screen and (max-width: 1300px){
	[data-main="product"] [data-shop-list="default"]{grid-template-columns:repeat(4, 1fr);}
}
@media screen and (max-width: 768px){
	[data-main="product"] [data-shop-list="default"]{grid-template-columns:repeat(2, 1fr);}
}

/* best items */
[data-main="best-product"] .inr-1200{position:relative;}
[data-main="best-product"] [data-shop-list="default"] button.interest-btn{display:none;}
[data-main="best-product"] [data-shop-list="default"] a{overflow:hidden;}
[data-main="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;}
[data-main="best-product"] [data-shop-list="default"] komall-discount{display:none;}
[data-main="best-product"] [data-shop-list="default"] strong,
[data-main="best-product"] [data-shop-list="default"] komall-description{text-align:center;}
[data-main="best-product"] [data-shop-list="default"] strong{margin-top:0;}
[data-main="best-product"] [data-shop-list="default"] komall-priceSale{opacity:0.6; font-weight:500;}
[data-main="best-product"] [data-shop-list="default"] [data-shop-icon="icon"]{display:none;}
	/* hover */
[data-main="best-product"] [data-shop-list="default"] a:hover div{opacity:1; transform:translateY(0%);}
	/* best items - slide custom */
[data-main="best-product"] .swiper-control button.swiper_prev{left:-30rem; transform:translateY(calc(-50% + 20rem));}
[data-main="best-product"] .swiper-control button.swiper_next{right:-30rem; transform:translateY(calc(-50% + 20rem)) rotate(180deg);}
	/* best items - 반응형 */
@media screen and (max-width:1300px){
	[data-main="best-product"] .swiper-control button{display:none;}
}
@media screen and (max-width:1024px){
	[data-main="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){
	[data-main="best-product"] [data-shop-list="default"] komall-price, 
	[data-main="best-product"] [data-shop-list="default"] komall-priceSale{flex:inherit;}
	[data-main="best-product"] [data-shop-list="default"] komall-price{margin-top:15rem;}
}

/* new items */
[data-main="new-product"]{max-width:1280rem; margin:50rem auto 0; padding:50rem 0; background-color:var(--color-point); color:#fff;}
[data-main="new-product"] .inr-1200{padding:0 20rem;}
[data-main="new-product"] h2{text-align:center;}
[data-main="new-product"] [data-shop-list="default"] a:hover{color:initial;}
@media screen and (max-width: 1300px){
	[data-main="new-product"] [data-shop-list="default"]{grid-template-columns:repeat(4, 1fr);}
}
@media screen and (max-width: 1024px){
	[data-main="new-product"]{margin-top:0;}
}
@media screen and (max-width: 768px){
	[data-main="new-product"] [data-shop-list="default"]{grid-template-columns:repeat(2, 1fr);}
}

/* 게시판 */
: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);}
}