@charset "utf-8";

/*CSS Common*/
*{box-sizing: border-box; font-family: 'pretendard'}
body{background-color: var(--color-background-lightest)}
.sec{max-width: 1600px; margin: 0 auto}
h2{font-family: "Playfair Display", serif; font-weight: 400; color: var(--color-text-3); line-height: 100%}
/*CSS Common*/

/*CSS About cont*/
.sec-about-wrap{display: flex; justify-content: center; align-items: center}
.sec-about-wrap .left-img img{width: 100%; display: block; object-fit: cover}
.sec-about-wrap .right-txt{position: relative}
.sec-about-wrap .right-txt p{color: var(--color-text-2); font-weight: 300}
.sec-about-wrap .right-txt p:first-of-type{margin-bottom: 50px; line-height: 170%}
.sec-about-wrap .right-txt span{font-weight: 600}
	
@media screen and (max-width:767px){
	.sec-about-wrap .right-txt h2{font-size: 2.5rem}
}

@media screen and (min-width:768px) and (max-width:1280px){
	.sec-about-wrap .right-txt h2{font-size: 5.13rem}
}

@media screen and (max-width:1280px){
	.sec-about-wrap{flex-direction: column-reverse; padding: 7.13rem 1rem 0}
	.sec-about-wrap .left-img{width: 100%}
	.sec-about-wrap .left-img img{max-height: 240px; object-position: center 70%}
	.sec-about-wrap .right-txt{text-align: center; margin-bottom: 3.75rem}
	.sec-about-wrap .right-txt h2{font-size: 2.5rem; margin-bottom: 2.44rem}
	.sec-about-wrap .right-txt p,
	.sec-about-wrap .right-txt span{font-size: 15px}
}

@media screen and (min-width:1281px){
	.sec-about-wrap .left-img{width: 50%}
	.sec-about-wrap .right-txt{font-size: 1.13rem; padding-right: 10rem; padding-left: 6.25rem; width: 50%}
	.sec-about-wrap .right-txt:after{content:""; width: 12px; height: 12px; background-color: var(--color-primary); position: absolute; top: 63px; right: 10rem; border-radius: 50px}
	.sec-about-wrap .right-txt h2{font-size: 5.13rem; margin-bottom: 7.31rem; text-align: right; padding-right: 23px}
}
/*CSS About cont*/

/* CSS Best Item cont */
.sec-bestItem-wrap{text-align: center; box-sizing: content-box}
.swiper .prd-btns{display: flex; align-items: flex-end; justify-content: space-between}
.prd-swiper-btn{display: flex; gap: 10px; justify-content: center}
.prd-swiper-btn .swiper-btn{cursor: pointer}
.prd-swiper-btn svg{fill: var(--color-primary)}
li.swiper-slide{flex-shrink: 0}
a.box .imgW{position: relative;transition: .3s}
a.box:hover .imgW{box-shadow: 2px 4px 7px rgb(0 1 29 / 15%)}
.img > img{display: block; aspect-ratio: 1 / 1; width: 100%; object-fit: cover}
ul.prd-list li.swiper-slide .Tmask{right:1px; background-color:rgba(0,0,0,.1)}
ul.prd-list li.swiper-slide .Rmask{bottom:1px; background-color:rgba(0,0,0,.1)}
ul.prd-list li.swiper-slide .Bmask{left:1px; background-color:rgba(0,0,0,.1)}
ul.prd-list li.swiper-slide .Lmask{top:1px; background-color:rgba(0,0,0,.1)}

.product-info > h3{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; text-overflow: ellipsis; word-break: keep-all}
.product-info > span{display: inline-block; color: var(--color-text-5); word-break: keep-all}
.product-price{display: flex; align-items: center; justify-content: center}
.product-price .product-sale{background-color: var(--color-primary); padding: 2px 5px; color: var(--color-text-1)}
.product-price .product-priceOrig{color: var(--color-text-4); margin: 0 10px 0 5px; text-decoration: line-through; font-size: 14px}
.product-price .product-priceSale{color: var(--color-text-3)}

@media screen and (max-width:767px){
	.product-info{margin-top: 1.79rem}
	.product-info > h3{font-size: 16px}
}

@media screen and (min-width:768px) and (max-width:1280px){
	.product-info{margin-top: 1.5rem}
	.product-info > h3{font-size: 1.2rem}
}

@media screen and (max-width:1280px){
	.sec-bestItem-wrap{padding: 7.1875rem 1rem 0}
	.sec-bestItem-wrap h2{font-size: 2.5rem}
	.prd-swiper-btn svg{width: 15px; height: 15px}
	.swiper .prd-btns{margin-bottom: 2.5rem}
	.product-info > span{margin: 15px 0; font-size: 1rem} 
	.product-price .product-priceSale{font-size: 1.2rem}
}

@media screen and (min-width:1281px){
	.sec-bestItem-wrap{padding: 12.5rem 1rem 9.6875rem}
	.sec-bestItem-wrap h2{font-size: 5.125rem}
	.prd-swiper-btn svg{width: 25px}
	.swiper .prd-btns{margin-bottom: 7.5rem}
	.product-info{margin-top: 2.5rem}
	.product-info > h3{font-size: 1.13rem}
	.product-info > span{margin: 1.25rem 0 1.25rem; font-size: 1rem} 
	.product-price .product-priceSale{font-size: 1.13rem}
}
/* CSS Best Item cont */

/*CSS MoreInfo cont*/
.sec-more-info-wrap{display: flex}
.more-info-left{flex: 1}
.more-info-left h2{position: relative; line-height: 100%} 
.more-info-left-txt p{font-weight: 600}
.more-info-left-txt span{font-weight: 300}
.more-info-left a{font-family: "Playfair Display", serif; color: var(--color-text-6); border: 1px solid var(--color-border-1); border-radius: 50px; display: flex; justify-content: center; align-items: center; font-weight: 600; transition: 0.3s}
.more-info-left a:hover{background-color: var(--color-background-3); color: var(--color-text-1)}
.more-info-right{flex: 2; position: relative}
.more-info-right .more-info-img1-wrap > img{width: 100%}
.more-info-right .more-info-ima2-wrap{position: absolute; overflow: hidden; border-radius: 200px; box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1)}
.more-info-right .more-info-img1-wrap > img,
.more-info-right .more-info-ima2-wrap > img{object-fit: cover; display: block}
.more-info-ima2-wrap > img {width: 100%; height: 100%}

@media screen and (max-width:428px){
	.more-info-right .more-info-img1-wrap {margin-top: 6rem !important}
	.more-info-left-txt span{word-break: keep-all}
}

@media screen and (max-width:767px){
	.more-info-right .more-info-ima2-wrap{top: 30px; right: 20px}
}

@media screen and (max-width:1024px){
	.more-info-ima2-wrap {width: 40%}
}

@media screen and (min-width:429px) and (max-width:1280px){
	.more-info-left-txt span{white-space: pre-line}
}

@media screen and (min-width:768px) and (max-width:1280px){
	.more-info-right .more-info-ima2-wrap{top: -20px; right: 30px}
}

@media screen and (max-width:1280px){
	.sec-more-info{padding: 7.19rem 1rem 0}
	.sec-more-info-wrap{flex-direction: column}
	.more-info-left h2{font-size: 2.5rem; margin-bottom: 2.31rem}
	.more-info-left-txt{text-align: center; line-height: 2}
	.more-info-left-txt p,
	.more-info-left-txt span{font-size: 15px}
	.more-info-left{display: flex; flex-direction: column; justify-content: center; align-items: center}
	.more-info-left a{font-size: 14px; width: 120px; height: 40px; margin-top: 1.88rem}
	.more-info-right .border{border: none}
	.more-info-right .more-info-img1-wrap{margin-top: 9.06rem}
}

@media screen and (min-width:1281px){
	.sec-more-info{padding: 9.69rem 1rem 0} 
	.more-info-left h2{font-size: 5.13rem; max-width: 360px}
	.more-info-left h2:after{content: ""; width: 12px; height: 12px; border-radius: 50px; background-color: var(--color-primary); position: absolute; bottom: 0px; right: -30px}
	.more-info-left-txt{margin: 7.31rem 0 5.75rem; line-height: 170%}
	.more-info-left-txt p,
	.more-info-left-txt span{font-size: 1.125rem}
	.more-info-left-txt span{white-space: pre-line}
	.more-info-left a{font-size: 18px; width: 190px; height: 60px}
	
	.more-info-right .border{width: 100%; height: 1px; border-top: 1px solid var(--color-background-2); margin: 50px 0 8.56rem}
	.more-info-right .more-info-ima2-wrap{top: -150px; right: 80px}
}
/*CSS MoreInfo cont*/

/* CSS MD'S Pick cont -> css/basic/mainProducts.css */

/*CSS Review cont*/
.sec-review-wrap{background: url('../image/main/main_review.png') no-repeat; background-size : cover; background-position: center; max-height: 1071px}
.sec-review-cont h2{color: var(--color-text-1); letter-spacing: 0.1em; font-weight: 300}
.review-btns{display: flex; align-items: center; justify-content: space-between}
.review-btns .review-swiper-btn{display: flex; gap: 10px}
.review-btns .review-swiper-btn .swiper-btn{cursor: pointer}
.review-btns .review-swiper-btn .swiper-btn > svg{fill: var(--color-background-lightest)}
.review-btns .review-more-btn{border: 1px solid var(--color-button-border1); color: var(--color-text-1); font-family: "Playfair Display", serif; border-radius: 50px; display: flex; justify-content: center; align-items: center; transition: 0.3s}
.review-btns .review-more-btn:hover{background-color: var(--color-background-3); border-color:var(--color-background-3); color: var(--color-text-1);}
.swiper{width: 100%; overflow: hidden}
.swiper-wrapper{display: flex}
.swiper-slide-wrap{border: 1px solid rgba(255, 255, 255, 0.6); padding: 3.13rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 1.25rem; flex-shrink: 0}
.review-rating-writer{display: flex; align-items: center; justify-content: space-between}
.review-rating-writer .review-list-star{display: flex; align-items: center; gap: 2px}
.review-rating-writer .review-list-star .star {width: 21px; height: 20px; background: linear-gradient(to right, #EAB838, #EAB838 50%, #E0E2E7 50%); color: transparent; -webkit-background-clip: text; background-clip: text}
.review-list-writer i{position: relative}
.review-list-writer i > svg{position: absolute; top: -9px; left: -20px}
.review-rating-writer .review-list-writer{display: flex; align-items: center; gap: 7px; color: var(--color-text-1); font-weight: 400; letter-spacing: 3px}
.review-title, .review-cont{line-height: 200%}
.review-title p{color: rgba(255, 255, 255, 0.5); font-weight: 200; letter-spacing: 2px}
.review-cont p{color: var(--color-text-1); font-weight: 200; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: keep-all}

@media screen and (max-width:767px){	
}

@media screen and (min-width:768px) and (max-width:1280px){
}

@media screen and (max-width:1280px){
	.sec-review{padding: 6.25rem 0 0}
	.sec-review-cont{padding: 4.06rem 1rem 3.13rem}
	.sec-review-cont h2{font-size: 2.5rem} 
	.review-btns{flex-direction: row-reverse; margin: 1.88rem 0}
	.review-btns .review-swiper-btn .swiper-btn > svg{width: 15px; height: 15px}
	.review-btns .review-more-btn{width: 120px; height: 40px; font-size: 14px}
	.review-rating-writer .review-list-star{font-size: 16px}
	.review-rating-writer .review-list-writer{font-size: 15px}
	.review-title p{font-size: 15px}
	.review-cont p{font-size: 14px}
}

@media screen and (min-width:1281px){
	.sec-review{padding: 12.5rem 0 0}
	.sec-review-cont{padding: 11rem 1rem 10.81rem}
	.sec-review-cont h2{font-size: 13.94rem} 
	.review-btns{margin: 4.69rem 0 2rem}
	.review-btns .review-swiper-btn .swiper-btn > svg{width: 25px}
	.review-btns .review-more-btn{width: 190px; height: 60px; font-size: 1.13rem}
	.review-rating-writer .review-list-star{font-size: 20px}
	.review-rating-writer .review-list-writer{font-size: 1rem}
	.review-title p{font-size: 1rem}
	.review-cont p{font-size: 1.13rem}
}
/*CSS Review cont*/

/*CSS Instagram cont*/
.sec-instagram-wrap h2{text-align: center}

div#instaFeed {overflow:hidden; padding: 1px 0;}
div#instaFeed ul.swiper-wrapper{position:relative; display:-ms-flexbox; display:-webkit-flex; display:flex; -ms-flex-direction:row; -webkit-flex-direction:row; flex-direction:row; will-change:transform}
div#instaFeed li.swiper-slide{position:relative; z-index: -1; height:100%; -ms-flex:none; -webkit-flex:none; flex:none; background-color:#fff; transition:all .3s}
div#instaFeed img{display: block; width: 100%; aspect-ratio: 1/1.3; object-fit: cover; flex-shrink: 0;height: 100%; position: relative; transition: all .3s}
div#instaFeed a.box{display:block; overflow:hidden; border: 1px solid rgb(0 0 0 / 10%)}
div#instaFeed a.box:hover, div#instaFeed a.box:focus{z-index:1}
div#instaFeed a.box:hover img, div#instaFeed a.box:focus img{transform:scale(1.2)}

@media screen and (max-width:767px){
}

@media screen and (min-width:768px) and (max-width:1280px){
}

@media screen and (max-width:1280px){
	.sec-instagram{padding: 5.63rem 1rem 6.25rem}
	.sec-instagram-wrap h2{font-size: 2.5rem; margin-bottom: 2.5rem}
}

@media screen and (min-width:1281px){
	.sec-instagram{padding: 13.44rem 1rem 12.5rem}
	.sec-instagram-wrap h2{font-size: 5.13rem; margin-bottom: 6.75rem}
}
/*CSS Instagram cont*/