.mainPage {margin-top: 1rem;}

.main-title {margin-bottom: 2.4rem;}
.main-title h3 {font-size: 2.4rem; font-weight: 600;}



/*============================================================*/
/* 비주얼 */
/*============================================================*/
.visual-swiper {position: relative;}
.visual-swiper .swiper-slide {height: 46.8rem; background: url("/img/main/visual01.png") center/cover no-repeat;}
.visual-swiper .swiper-slide .txt-wrap {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2.5rem; width: 100%; height: 100%;}
.visual-swiper .swiper-slide .txt-wrap p {width: 100%; margin-top: -6rem; text-align: center; color: #6974AD; font-family: 'GmarketSans'; font-size: 2.6rem; font-weight: 500; user-select: none;}
.visual-swiper .swiper-slide .txt-wrap h2 {position: relative; width: 72.8rem; max-width: 70%; aspect-ratio: 728/90; background: url("/img/main/visual_name.png") center/contain no-repeat;}

.visual-swiper .swiper-next,
.visual-swiper .swiper-prev {position: absolute; top: 50%; transform: translateY(-50%); width: 3.6rem; height: 12rem; background-color: rgba(0,0,0,0.04); background-image: url("/img/icon/slide_angle_gray.svg"); background-position: center; background-size: 13px; background-repeat: no-repeat; border-radius: 0.6rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1; transition: var(--trans-25);}
.visual-swiper .swiper-next {right: 0;}
.visual-swiper .swiper-prev {left: 0; transform: rotate(180deg) translateY(50%);}

.visual-swiper .swiper-next:focus-visible,
.visual-swiper .swiper-prev:focus-visible {background-color: rgba(0,0,0,0.08);}
@media (hover: hover) and (pointer: fine) {
    .visual-swiper .swiper-next:hover,
    .visual-swiper .swiper-prev:hover {background-color: rgba(0,0,0,0.08);}
}

@media (max-width: 768px) {
    .main-visual .swiper-slide {height: 35rem;}
}
@media (max-width: 576px) {
    .visual-swiper .swiper-slide .txt-wrap p {margin-top: -4rem; font-size: 2rem;}
    .visual-swiper .swiper-slide .txt-wrap h2 {max-width: 80%;}

    .visual-swiper .swiper-next,
    .visual-swiper .swiper-prev {display: none;}
}



/*============================================================*/
/* 배너 */
/*============================================================*/
.main-banner {position: relative; background: #F5F5F5; padding: 4.1rem 0;}
.main-banner::after {content: ""; position: absolute; top: 50%; right: 3.7rem; transform: translateY(-50%); height: 11.4rem; max-height: 82%; aspect-ratio: 256/114; background: url("/img/main/delivery.png") center/contain no-repeat;}
.main-banner .txt-wrap {padding: 0 6.2rem;}
.main-banner .txt-wrap p {font-size: 2.4rem; font-weight: 600;}
.main-banner .txt-wrap span {display: block; margin-top: 0.8rem;}

@media (max-width: 768px) {
    .main-banner {padding: 4rem 0 10rem;}
    .main-banner::after {top: auto; bottom: 2rem; transform: none;}
}
@media (max-width: 576px) {
    .main-banner {padding: 4rem 0 16rem;}
    .main-banner .txt-wrap {padding: 0 4rem;}
}



/*============================================================*/
/* 인기 상품 */
/*============================================================*/
.main-popular {position: relative; padding: 5.5rem 5rem 7rem;}
.main-popular .pd-info .price-wrap {grid-template-columns: auto auto;}
.main-popular .pd-info .price-wrap .origin {grid-column: 1/3;}
.main-popular .swiper-next,
.main-popular .swiper-prev {position: absolute; top: 50%; transform: translateY(-50%); width: 3.6rem; height: 12rem; background-image: url("/img/icon/slide_angle_gray.svg"); background-position: center; background-size: 13px; background-repeat: no-repeat; border-radius: 0.6rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1; transition: var(--trans-25);}
.main-popular .swiper-next {right: 0;}
.main-popular .swiper-prev {left: 0; transform: rotate(180deg) translateY(50%);}

.main-popular .swiper-next:focus-visible,
.main-popular .swiper-prev:focus-visible {box-shadow: var(--focus-shadow);}

@media (max-width: 768px) {
    .main-popular {padding: 5.5rem 0;}
    .main-popular .swiper-next,
    .main-popular .swiper-prev {display: none;}
}



/*============================================================*/
/* 추천 상품 */
/*============================================================*/
.main-random {padding: 5.5rem 0;}
.main-random .product-item {width: calc(33.33% - 1.35rem);}
.main-random .pd-info .price-wrap {grid-template-columns: auto auto;}
.main-random .pd-info .price-wrap .origin {grid-column: 1/3;}
.main-random .pd-img {aspect-ratio: 379/269;}
@media (max-width: 576px) {
    .main-random .product-item {width: calc(50% - 1.05rem);}
}