@charset "utf-8";

/* visual */
.main_vis{ background: var(--black); color: #fff; }
.main_vis__img{ width: 100%; }
.main_vis__control{ position: absolute; inset: auto 0 6.4%; display: flex; align-items: center; justify-content: center; gap: 50rem; z-index: 1; }
.main_vis__btn{ position: relative; display: flex; align-items: center; justify-content: center; width: 20rem; height: 20rem; }
.main_vis__btn::before{ content: ''; position: absolute; inset: -10rem; }
.main_vis__btn::after{ content: ''; display: block; width: 8rem; height: 8rem; border: solid currentColor; border-width: 3rem 3rem 0 0; box-sizing: border-box; }
.main_vis__btn.prev::after{ transform: translateX(2rem) rotate(-135deg); }
.main_vis__btn.next::after{ transform: translateX(-2rem) rotate(45deg); }
.main_vis__pager{ display: flex; align-items: center; gap: 10rem; min-width: 48rem; width: auto; font-size: 18rem; font-weight: 600; }
.main_vis__pager .swiper-pagination-current{ color: var(--primary); }
.main_vis__pager .dot{ display: inline-block; width: 4rem; height: 4rem; background: currentColor; border-radius: 50%; }

/* 섹션 여백 90, 타이틀과 컨텐츠 70, 컨텐츠 60 */
/* clamp(90rem, calc( 120 / var(--inner) * 100vw ), 120rem) */

/* common */
.common_more{ display: flex; align-items: center; justify-content: center; min-width: 211rem; height: 64rem; padding: 0 40rem; border: 2px solid #2c2c2c; border-radius: 3em; box-sizing: border-box; font-size: 16rem; font-weight: 600; }

/* product */
.main_prod{ padding-top: 88rem; }
.main_prod__h2{ text-align: center; font-size: var(--fs32); }
.main_prod [data-shop-list]{ margin-top: 44rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(30rem, calc( 38 / var(--inner) * 100vw ), 38rem) clamp(15rem, calc( 30 / var(--inner) * 100vw ), 30rem); }
.main_prod [data-shop-list] .img{ display: block; aspect-ratio: 39/36; width: 100%; padding: 20rem; border: 1px solid #e8e8e8; box-sizing: border-box; }
.main_prod [data-shop-list] .img img{ width: 100%; height: 100%; object-fit: scale-down; }
.main_prod [data-shop-list] .content{ margin: 21rem 0 -1rem; font-size: 15rem; font-weight: 300; color: #777; }
.main_prod [data-shop-list] .title{position: relative; transform: none; text-align: left; left: initial; top: initial; font-size: clamp(18rem, calc( 20 / var(--inner) * 100vw ), 20rem); }
.main_prod__links{ margin-top: 47rem; display: flex; justify-content: center; gap: 20rem; }
@media(min-width:768px){
    .main_prod [data-shop-list]{ grid-template-columns: repeat(3, 1fr); }
}

/* quick */
.main_quick{ padding: 85rem 0 89rem; }
.main_quick .inr{ display: grid; gap: 30rem; }
.main_quick .inr *{ display: block; }
.main_quick__img{ display: block; width: 100%; }
.main_quick__title{ margin-top: 24rem; font-size: 20rem; font-weight: 600; }
.main_quick__title::after{ content: ''; position: relative; top: -1rem; margin-left: 9rem; display: inline-block; width: 11rem; height: 11rem; border: solid #333; border-width: 3rem 3rem 0 0; box-sizing: border-box; transform: rotate(45deg); }
.main_quick__content{ margin-top: 8rem; font-weight: 300; color: #777; }
@media(min-width:768px){
    .main_quick .inr{ grid-template-columns: repeat(2, 1fr); }
}

/* about */
.main_about{ padding: 125rem 0 124rem; background: #333 url('/images/main/about.jpg') no-repeat 50% / cover; color: #fff; }
.main_about .inr{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 47rem; }
.main_about__h2{ font-size: var(--fs33); font-weight: 600; line-height: 1.57575758; }
.main_about .common_more{background:transparent; border: 1px solid #fff;}