@charset "utf-8";

.main .visual{ position: relative; background: var(--black); text-align: center; text-wrap: balance; color: #fff;
    .swiper{ position: absolute; inset: 0; }
    .swiper-slide{ contain: content; position: relative; }
    .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
    .inr{ display: grid; place-items: center; height: 100svh; min-height: 450rem; z-index: 1; }
    .title{ margin-bottom: 0.41666667em; font-size: var(--fs60); }
    .subTitle{ font-size: 20rem; text-shadow: 0 0 30rem rgba(3, 19, 12, 0.3); }
    .btn{ contain: content; position: absolute; top: 50%; translate: 0 -50%; width: 31rem; height: 60rem; }
    .btn::before{ content: ''; position: absolute; top: 50%; translate: -50% -50%; width: 42rem; height: 42rem; border: solid currentColor; border-width: 1px 1px 0 0; opacity: .8; }
    .prev{ left: 0; }
    .next{ right: 0; }
    .prev::before{ left: 100%; rotate: -135deg; }
    .next::before{ left: 0; rotate: 45deg; }
    .control{ position: absolute; left: 0; bottom: min(60rem, 6.18556701%); display: flex; gap: 15rem; }
    .pagination{ all: unset; display: flex; gap: inherit; }
    .swiper-pagination-bullet{ all: unset; position: relative; display: inline-block; width: 10rem; height: 10rem; border: 1px solid currentColor; border-radius: 50%; box-sizing: border-box; cursor: pointer; }
    .swiper-pagination-bullet-active{ background: currentColor; }
    .state{ position: relative; width: 10rem; height: 10rem; }
    .state::after{ content: ''; position: absolute; inset: 0; background: currentColor; }
    .state.isPlay::after{ clip-path: polygon( 1rem 100%, 1rem 0, 3rem 0, 3rem 100%, 7rem 100%, 7rem 0, 9rem 0, 9rem 100%); }
    .state:not(.isPlay)::after{ clip-path: polygon(1rem 100%, 1rem 0, 9rem 50%); }
    :where(.swiper-pagination-bullet, .state)::before{ content: ''; position: absolute; inset: -7rem; border-radius: 50%; }
    @media(prefers-reduced-motion:no-preference){
        .swiper-slide::before{ scale: 1.05; }
        .swiper-slide-active::before{ scale: 1; transition: 1.2s cubic-bezier(0.39, 0.58, 0.57, 1); }
        .title{ animation: slide-up .6s .4s both; opacity: 0; }
        .subTitle{ animation: slide-up .6s .6s both; opacity: 0; }
    }
    @media(min-width:768px){
        .s1::before{ background-image: url('/images/main/visual-1-pc.jpg'); }
        .s2::before{ background-image: url('/images/main/visual-5-pc.jpg'); }
    }
    @media(max-width:767px){
        .s1::before{ background-image: url('/images/main/visual-1-mob.jpg'); }
        .s2::before{ background-image: url('/images/main/visual-5-mob.jpg'); }
        .btn{ display: none; }
    }
}
@keyframes slide-up {
    0%{ translate: 0 40rem; opacity: 0; }
    100%{ translate: 0 0; opacity: 1; }
}

.main .common{
    .lead{ text-transform: uppercase; font: 600 16rem/1.5 var(--font-pop); color: var(--primary); }
    .lead + .heading{ margin-top: 0.42222222em; }
    .heading{ text-transform: uppercase; font: 700 var(--fs45)/1.28888889 var(--font-pop); }
    .heading:has(+.subHeading){ margin-bottom: 0.62222222em; }
    .subHeading{ font: 400 18rem/1.58823529 var(--font-pre); color: var(--gray); }
}

.main .customer{ padding-top: clamp(70rem, calc( 140 / var(--inr) * 100vw ), 140rem);
    .inner{ display: grid; }
    .swiper{ width: 100%; max-height: 630rem; }
    .pic img{ width: 100%; height: 100%; object-fit: cover; }
    .txt{ display: grid; align-content: center; }
    .pagination{ all: unset; translate: -13rem 0; margin-top: 53rem; display: flex; gap: 8rem; }
    .swiper-pagination-bullet{ all: unset; position: relative; display: grid; place-items: center; width: 33rem; height: 33rem; border-radius: 50%; border: 1px solid #0000; box-sizing: border-box; cursor: pointer; color: #ddd; }
    .swiper-pagination-bullet-active{ border-color: currentColor; color: var(--primary); }
    .swiper-pagination-bullet::before{ content: ''; display: inline-block; width: 7rem; height: 7rem; background: currentColor; border-radius: 50%; }
    .list{ margin: 30rem auto 0; max-width: 1860px; display: grid; }
    .list img{ width: 100%; height: auto; }
    @media(min-width:768px){
        .inner{ grid-template-columns: minmax(49.21875%, 945rem) minmax(45.57291667%, 1fr) minmax(4vw, 100rem); }
        .swiper{ grid-column: 1/2; }
        .txt{ padding: 0 0 .5% 12.4%; }
        .list{ grid-template-columns: repeat(3, 1fr); }
    }
    @media(min-width:1280px){
        .list{ grid-template-columns: repeat(6, 1fr); }
    }
    @media(max-width:1279px){
        br{ display: none; }
    }
    @media(max-width:767px){
        .inner{ grid-template-columns: minmax(4vw, auto) 1fr minmax(4vw, auto); }
        .swiper{ grid-column: 1/4; }
        .txt{ grid-column: 2/3; margin-top: 40rem; }
        .list{ grid-template-columns: repeat(2, 1fr); }
    }
}

.main .product{ contain: content; position: relative; margin-top: 30rem; padding: clamp(70rem, calc( 139 / var(--inr) * 100vw ), 139rem) 0 clamp(70rem, calc( 100 / var(--inr) * 100vw ), 100rem); background: var(--dot1-url) no-repeat 100% -0.85% / var(--dot1-size);
    .heading:has(+.subHeading){ margin-bottom: 0.46666667em; }
    .control{ margin-top: 53rem; display: flex; gap: 9rem; }
    .btn{ display: grid; place-items: center; aspect-ratio: 1; width: 55rem; border-radius: 50%; color: #fff; }
    .btn::before{ content: ''; display: inline-block; background: currentColor;}
    .prev{ background: #ddd; }
    .prev:hover {background: var(--primary);}
    .next{ background: var(--primary); }
    .more{ background: #222; }
    .more:hover{ background: #434343; }
    .prev::before{ width: 6rem; height: 10rem; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
    .next::before{ width: 6rem; height: 10rem; clip-path: polygon(0 0, 100% 50%, 0 100%); }
    .more::before{ width: 13rem; height: 13rem; clip-path: polygon(0 7rem, 0 6rem, 6rem 6rem, 6rem 0, 7rem 0, 7rem 6rem, 100% 6rem, 100% 7rem, 7rem 7rem, 7rem 100%, 6rem 100%, 6rem 7rem); }
    .swiper{ overflow: visible; clip-path: inset(-100rem    -100vw 0 0); margin-top: clamp(70rem, calc( 100 / var(--inr) * 100vw ), 100rem); color: #fff; }
    .swiper-slide{ margin-right: 30rem; }
    .img-wrapper{ position: relative; display: block; aspect-ratio: 42/40; background: #f6f6f6 url('/images/common/no-img.png') no-repeat 50% / 40rem; }
    .img-wrapper img{ position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; text-indent: -100vw; object-fit: cover; }
    .swiper figcaption{ padding: 23rem 22rem; }
    .title{ position: relative; display: block; text-transform: uppercase; font: 600 22rem/1.5 var(--font-pop); }
    .title::before{ content: ''; position: absolute; top: 13rem; left: -22rem; width: 4rem; height: 4rem; background: currentColor; }
    .description{ margin-top: 10rem; display: block; font-weight: 300; }
    .scrollbar{ margin-top: 31rem; background: color-mix(in srgb, currentColor 18%, #0000); }
    .swiper-scrollbar-drag{ height: 3rem; background: currentColor; border-radius: 0; }
    &::after{ content: ''; position: absolute; inset: auto 0 0; background: var(--dot2-url) no-repeat 0 100% / var(--dot2-size), var(--dot3,) linear-gradient(#3b3b3b, #1b1b1b); }
    @media(prefers-reduced-motion:no-preference){
        .img-wrapper img, .swiper-slide{ transition: .3s; }
    }
    @media(hover){
        .img-wrapper:hover img{ width: 123.80952381%; height: 125%; }
        .swiper-slide:has(.img-wrapper:hover) ~ .swiper-slide{ translate: 100rem 0; }
    }
    @media(min-width:768px){
        --dot1-url: url('/images/main/product-dot1-pc.png');
        --dot2-url: url('/images/main/product-dot2-pc.png');
        --dot1-size: min(573rem, 29.84375%);
        --dot2-size: min(897rem, 46.71875%);
        --dot3: url('/images/main/product-dot3.png') no-repeat 100% 100% / min(454rem, 23.64583333%),;
        .swiper-slide{ width: 420rem; }
        &::after{ height: 494rem; }
    }
    @media(max-width:767px){
        --dot1-url: url('/images/main/product-dot1-mob.png');
        --dot2-url: url('/images/main/product-dot2-mob.png');
        --dot1-size: 45%;
        --dot2-size: 80%;
        .swiper-slide{ width: 320rem; }
        &::after{ height: 400rem; }
    }
    /* TODO: 호버 시 슬라이드 커지는 거 */
}

.main .case{ padding: clamp(70rem, calc( 128 / var(--inr) * 100vw ), 128rem) 0 clamp(70rem, calc( 133 / var(--inr) * 100vw ), 133rem);
    .heading{ text-align: center; font: 700 var(--fs40)/1.5 var(--font-pop); }
    .list{ margin-top: 37rem; display: grid; gap: 50rem clamp(20rem, calc( 38 / var(--inr) * 100vw ), 38rem); }
    .img-wrapper{ contain: content; position: relative; display: block; aspect-ratio: 475/315; width: 100%; background: #f6f6f6 url('/images/common/no-img.png') no-repeat 50% / 40rem; }
    .overlay{ position: absolute; top: 0; left: 0; padding: 8rem 21rem 6rem 20rem; background: var(--primary); color: #fff; }
    .pic{ display: block; width: 100%; height: 100%; }
    .img{ width: 100%; height: 100%; object-fit: cover; }
    .cap{ margin-top: 25rem; display: grid; grid-template-columns: 1fr auto; gap: 8rem; padding-right: 5rem; }
    .category{grid-column: 1/3; text-transform: uppercase; font: 600 16rem/1.5 var(--font-pop); color: var(--primary); }
    .title{  font: 600 20rem/1.5 var(--font-pre); }
    .arrow{ align-self: center; translate: 0 -1rem; width: 22rem; height: 11rem; background: url('/images/main/case-arrow.png') no-repeat 50% / contain; }
    @media(prefers-reduced-motion:no-preference){
        .img{ transition: .3s; }
    }
    @media(hover){
        a:hover .img{ scale: 1.05; }
    }
    @media(min-width:768px){
        .list{ grid-template-columns: repeat(3, 1fr); }
    }
}

.main .inquiry{ background: #222; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    .inner{ display: grid; }
    .form{ padding: clamp(70rem, calc( 110 / var(--inr) * 100vw ), 110rem) 0 60rem; background: #222; color: #fff; }
    .heading{ margin-bottom: 0.42857143em; font-size: var(--fs35); }
    .subHeading{ font-weight: 400; letter-spacing: -.01em; }
    .list{ margin-top: 25rem; display: grid; gap: 12rem 30rem; }
    .item{ display: grid; grid-template-columns: 23rem 7ch 1fr; align-items: center; gap: 10rem; padding: 19rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 50%, #0000); font-weight: 300; letter-spacing: -.01em; }
    .item::before{ content: ''; display: inline-block; width: 22rem; height: 22rem; background: var(--primary) url('/images/main/inquiry-check.png') no-repeat 50% 55% / 10rem; border-radius: 50%; }
    :where(input, textarea){ width: 100%; height: 22rem; padding: 0; background: 0; border: 0; }
    :where(input, textarea)::placeholder{ letter-spacing: -.01em; color: #888; }
    #online_btn{ margin-top: 40rem; display: inline-flex; align-items: center; gap: 37rem; padding: 20rem 27rem; background: var(--primary); font-size: 15rem; }
    .arrow{ translate: 0 1rem; width: 14rem; height: auto; fill: currentColor; }
    .map{ width: 100%; }
    .map .wrap_map{ height: auto; }
    .map svg{ pointer-events: none; }
    .map_border, .wrap_controllers{ display: none }
    @media(hover){
        #online_btn:not(:hover){ background: #434343; }
    }
    @media(min-width:768px){
        &{ padding-bottom: 60rem; }
        .form{ padding-right: 100rem; }
        .map .wrap_map{ height: 100%; }
    }
    @media(min-width:768px){
        .inner{ grid-template-columns: minmax(4vw, auto) [start] minmax(39.0625%, 750rem) [center] 50% [end]; }
        .form{ grid-column: start/center; }
        .map{ grid-column: center/end; }
    }
    @media(min-width:1280px){
        .list{ grid-template-columns: repeat(2, 1fr); }
        [for="variable_3"], [for="variable_4"]{ grid-column: 1/3; }
    }
    @media(max-width:767px){
        .form{ padding-inline: 4vw; }
        .map{ aspect-ratio: 1/1; }
    }
}