@charset "utf-8";

:root{
	--monetary_unit: '원';
}

/* visual */
.main_visual{ position: relative; }
.main_visual__link{ display: block; }
.main_visual__picture-img{ max-width: 100%; }
.main_visual__control{ display: flex; justify-content: space-between; align-items: center; position: absolute; margin: 0 auto; inset: 0; max-width: 1760px; width: 92%; pointer-events: none; z-index: 1; }
.main_visual__control-btn{ width: 4.32291667vw; height: 4.32291667vw; background: rgba(255, 255, 255, 0.14) no-repeat 50% / auto clamp(12px, 24%, 20px); border: 2px solid #fff; pointer-events: auto; }
.main_visual__control-prev{ background-image: url(/images/main/icon_visual_prev.png); }
.main_visual__control-next{ background-image: url(/images/main/icon_visual_next.png); }
#wrap .main_visual__pager{ bottom: 8.33333333%; }
.main_visual__pager{ display: flex; justify-content: center; gap: clamp(15px, 1.30208333vw, 25px); position: absolute; z-index: 1; }
#wrap .main_visual__pager .swiper-pagination-bullet{ margin: 0; }
.main_visual__pager .swiper-pagination-bullet{ position: relative; width: clamp(8px, .67708333vw, 13px); height: clamp(8px, .67708333vw, 13px); background: #fff; border-radius: 50%; opacity: .39; }
.main_visual__pager .swiper-pagination-bullet::before{ content: ''; position: absolute; inset: -50%; }
.main_visual__pager .swiper-pagination-bullet-active{ opacity: 1; }
@media(max-width:1279px) and (min-width:768px){
	.main_visual__picture-img{ aspect-ratio: 1020/480; object-fit: cover; }
}

/* common */
.common__title{ text-align: center; }
.common__title-h2{ font-size: var(--font_size40); }
.common__title-p{ margin-top: .3em; font-size: var(--font_size20); letter-spacing: -.055em; color: #8b8b8b; }
.common__wrap_link{ display: flex; justify-content: center; gap: 1em; margin-top: 7.1875em; }
.common__link{ display: inline-flex; justify-content: space-between; align-items: center; max-width: 12.5em; width: 100%; padding: 1.125em .6875em 1.1875em; background: linear-gradient(#1a1a1a, #1a1a1a) no-repeat 50% 100% / 100% 2px; box-sizing: border-box; text-transform: uppercase; font-weight: 700; color: #1a1a1a; }
.common__link::after{ content: ''; display: inline-block; width: .5em; height: .5em; border: solid currentColor; border-width: 1px 1px 0 0; transform: translateX(-.125em) rotate(45deg); }
#container [src='/images/main/icon_no_image.png']{ background: #f7f7f7; object-fit: scale-down; }
@media(prefers-reduced-motion:no-preference){
	.common__link{ transition: .4s; }
}
@media(hover:hover){
	.common__link:hover{ padding: 1.125em 1.9375em 1.1875em; background-size: 100% 100%; color: #fff; }
}
@media(max-width:1279px) and (min-width: 768px){
    #wrap .common_padding_y{ padding: 80px 0; }
}
@media(max-width:767px){
    #wrap .common_padding_y{ padding: 60px 0; }
}

/* product */
.main_product{ padding: 114px 0 64px; background:#fff;}
.main_product__list{ display: grid; gap: clamp(20px, 5.5vw, 77px) clamp(10px, 1.92857143vw, 27px); margin-top: 4.5625em; }
.main_product__list-li{ display: block; }
.main_product__list-a{ display: block; }
.main_product__image{ position: relative; aspect-ratio: 360/360; }
.main_product__image-img{ display: block; width: 100%; height: 100%; background: var(--product_bg_color); object-fit: contain; }
.main_product__image-interest{ position: absolute; right: .625em; width: var(--interest_height); height: var(--interest_height); background: #fff url(/images/main/icon_product_cart.png) no-repeat 50% / clamp( 15px, 37.5%, 21px); border-radius: 50%; font-size: 1rem; }
.main_product__list-title{ margin-top: 0.88888889em; color: #222; }
.main_product__list-comment{ margin-top: 4px; font-size: var(--font_size14); color: #8a8a8a; }
.main_product__price{ display: flex; align-items: baseline; gap: .59375em; margin-top: .625em; }
.main_product__price-prime{ font-weight: 900; color: #222; }
.main_product__price-discounted{ text-decoration: line-through; font-weight: 400; color: #a8a8a8; }
:is(.main_product__price-discounted, .main_product__price-prime)::after{ content: var(--monetary_unit); }
.main_product__price-percent{ font-weight: 600; color: var(--secondary); }
@media(min-width:768px){
	.main_product__list-title{ font-size: var(--font_size18); }
	.main_product__image-interest{ --interest_height: 3.5em; bottom: calc(  var(--interest_height) * -.46428571 ); }
	.main_product__price-discounted,
	.main_product__price-percent{ font-size: var(--font_size14); }
}
@media(min-width:1280px){
	.main_product__list{ grid-template-columns: repeat(4, 1fr); }
}
@media(max-width:1279px) and (min-width: 768px){
	.main_product__list{ grid-template-columns: repeat(3, 1fr); }
}
@media(max-width:767px){
	.main_product__list{ grid-template-columns: repeat(2, 1fr); }
	.main_product__list-title{ font-size: 14px; }
	.main_product__image-interest{ --interest_height: 2.7em; bottom: calc(  var(--interest_height) * -.3 ); }
	.main_product__price-discounted,
	.main_product__price-percent{ font-size: 10px; }
}

/* review */
.main_review{ --review_border_color: #f7f7f7; overflow: hidden; padding: 70px 0 136px; background:#f5f5f5;}
.main_review__swiper{ position: relative; margin-top: 4.5625em; padding-top: 4.375em; min-height: 33.6875em; }
.main_review__swiper::before{ content: ''; position: absolute; inset: 0 -50vw auto; height: 59.4%; background: var(--review_border_color); }
.main_review__swiper .swiper-slide{ padding: 2.125em clamp(1em, 2.42857143vw, 34px); background: #fff; border: 1px solid var(--review_border_color); box-sizing: border-box; }
.main_review__board-wrap_image{ display: block; aspect-ratio: 1; width: 100%; }
.main_review__board-image{ width: 100%; height: 100%; object-fit: contain; }
.main_review__board-title{ margin-top: 1.5em; min-height: 1.5em; padding: 0 .44444444em; font-weight: 500; }
.main_review__board-comment{ margin-top: 11px; height: 60px; padding: 0 7px; font-size: 13px; line-height: 1.53846154; color: #8a8a8a; -webkit-line-clamp: 3; }
.main_review__product{ display: grid; grid-template: 'image rate' 'image title' / auto 1fr; justify-content: start; align-items: center; gap: 0 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--review_border_color); }
.main_review__product_image{ grid-area: image; display: inline-flex; justify-content: center; align-items: center; width: 44px; height: 44px; background: var(--product_bg_color); border-radius: 50%; }
.main_review__product_image-img{ width: 100%; height: 100%; }
.main_review__product_image-img[src='/images/main/icon_no_image.png']{ width: 60%; height: 60%; }
.main_review__product-rate{ grid-area: rate; display: flex; gap: 1.8px; position: relative; top: 4px; }
.main_review__product-star polygon{ fill: var(--secondary); }
.main_review__product-star.on{ opacity: 1; }
.main_review__product-star:not(.on){ opacity: .5; }
.main_review__product-star.off{ opacity: 0; }
.main_review__product-title{ grid-area: title; display: flex; justify-content: space-between; align-items: center; position: relative; top: -1px; font-size: 12px; color: #555; }
.main_review__product-title::after{ content: ''; display: inline-block; width: .5em; height: .5em; border: solid #d8d8d8; border-width: 1px 1px 0 0; transform: translateX(-.125em) rotate(45deg); }
@media(min-width:1280px){
	.main_review__board-title{ font-size: 18px; }
}
@media(max-width:1279px){
	.main_review__board-title{ font-size: 16px; }
}