@charset "utf-8";

.main .visual{ contain: content; position: relative; display: flex; align-items: center; height: calc(100svh - var(--header-height)); min-height: 450rem; padding-bottom: .2%; border-radius: 25rem; color: #fff; text-align: center; text-wrap: balance;
    &::before{ content: ''; position: absolute; inset: 0; z-index: -1; background: var(--black) url('/images/main/visual-bg.jpg') no-repeat 50% / cover; }
    .lead{ font: 500 var(--fs22) var(--font-gmk); }
    .heading{ margin: .74545455em 0 .63636364em; font: 700 var(--fs55) var(--font-gmk); }
    .tel{ display: inline-flex; padding: 1em 2.45833333em 0.79166667em; background: var(--primary); border-radius: 5em; font: 500 var(--fs24) var(--font-gmk); }
    .icon{ margin-right: .95833333em; width: 1.08333333em; aspect-ratio: 1; }
    .tel b{ margin-left: .54166667em; }
    @media(prefers-reduced-motion:no-preference){
        &::before{ animation: visual-bg 1.5s both; scale: 1.1; }
        :where(.lead, .heading, .tel){ animation: visual-slide-up .6s .4s both; opacity: 0; }
        .heading{ animation-delay: .7s; }
        .tel{ animation-delay: 1s; }
    }
    @media(max-width:767px){
        .tel b{ display: none; }
    }
}
@keyframes visual-bg {
    0%{ scale: 1.1; }
    100%{ scale: 1; }
}
@keyframes visual-slide-up {
    0%{ translate: 0 20rem; opacity: 0; }
    100%{ translate: 0; opacity: 1; }
}

.main{ --main-h2: clamp(32rem, calc(42 / var(--inr) * 100vw), 42rem); contain: content;
    .common-h2{ font: 700 var(--main-h2) var(--font-gmk); }
    .common-description{ margin-top: calc(var(--main-h2) * 0.66666667); font: 300 18rem/1.55555556 var(--font-pre); color: #444; text-wrap: balance; }
}

.main .company{ padding: clamp(70rem, calc(129 / var(--inr) * 100vw), 129rem) 0 clamp(70rem, calc(130 / var(--inr) * 100vw), 130rem); text-align: center;
    .list{ margin-top: 43rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14rem 25rem; }
    .list > li{ flex-shrink: 0; min-width: 148rem; padding: 11rem 17rem 10rem; background: #2a3042; border: 1px solid #1f2332; border-radius: 4rem; font-size: 18rem; color: #fff; }
    .img{ contain: content; margin-top: 60rem; height: clamp(140rem, calc(410 / var(--inr) * 100vw), 410rem); background: url('/images/main/company-img.jpg') no-repeat 50% / cover; border-radius: 13em; }
    @media(prefers-reduced-motion:no-preference){
        @supports(animation-timeline: view()){
            .img{ animation: company-img 1s; animation-timeline: view(60% 0); }
        }
    }
    @media(min-width:768px){
        @supports(background-attachment: fixed){
            .img{ background-attachment: fixed; }
        }
    }
    @media(max-width:767px){
        .common-description br{ display: none; }
    }
}
@keyframes company-img {
    0%{ border-radius: 0; }
    100%{ border-radius: 13em; }
}

.main .service{ padding: clamp(70rem, calc(108 / var(--inr) * 100vw), 108rem) 0 clamp(70rem, calc(110 / var(--inr) * 100vw), 110rem); background: #f3f5f9 url('/images/main/service-bg.jpg'); border-radius: 15rem; text-align: center;
    .list{ margin-top: 51rem; display: grid; gap: clamp(10rem, calc(27 / var(--inr) * 100vw), 27rem); }
    .list > li{ padding: 70rem 1ch 64rem; background: #fff; border-radius: 10rem; }
    .list > li{ padding: 18.5% 1ch 16.8%; background: #fff; border-radius: 10rem; }
    .icon{ margin: 0 auto; display: grid; place-items: center; width: 75rem; aspect-ratio: 1; background: #f3f5f9; border: 1px solid #e4e7f2; border-radius: 8rem; }
    .icon-img{ width: 46.66666667%; aspect-ratio: 35/37; object-fit: scale-down; }
    .heading{ margin: 37rem 0 15rem; font: 500 20rem var(--font-gmk); }
    .description{ font: 300 17rem/1.47058824 var(--font-pre); color: #555; }
    @media(min-width:1280px){
        .list{ grid-template-columns: repeat(4, 1fr); }
    }
    @media(max-width:1279px) and (min-width:768px){
        .list{ grid-template-columns: repeat(2, 1fr); }
    }
}

.main .vehicle{ padding: clamp(70rem, calc(129 / var(--inr) * 100vw), 129rem) 0 clamp(70rem, calc(123 / var(--inr) * 100vw), 123rem); text-align: center;
    .list{ margin-top: 46rem; font: 500 var(--fs22) var(--font-gmk); }
    .list{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10rem, calc(40 / var(--inr) * 100vw), 40rem); }
    .img{ margin-bottom: 1.31818182em; display: block; width: 100%; aspect-ratio: 78/45; border-radius: 10rem; }
}

.main .contact{ padding: clamp(70rem, calc(85 / var(--inr) * 100vw), 85rem) 0 clamp(70rem, calc(84 / var(--inr) * 100vw), 84rem); background: #2a3042 url('/images/main/contact-bg.jpg') no-repeat 50% / cover; border-radius: 15rem;
    .inr{ display: grid; gap: 60rem 2ch; }
    .hGroup *{ color: #fff; }
    .lead{ display: inline-block; padding: 8rem 19rem 9rem; background: var(--primary); border-radius: 5em; font: 15rem var(--font-pop); }
    .common-h2{ margin: .92857143em 0 .64285714em; }
    .description{ margin-left: 9rem; font: 300 17rem var(--font-pre); }
    .tel{ margin-top: 52rem; display: inline-block; padding: 20rem 47rem 18rem; background: rgba(255, 255, 255, 0.1); border-radius: 5em; }
    table{ contain: content; position: relative; padding-bottom: 3rem; width: 100%; border-radius: 15rem; text-align: center; table-layout: fixed; }
    table::before{ content: ''; position: absolute; inset: 0; border: 3rem solid #111; border-radius: 15rem; pointer-events: none; }
    thead{ background: #0064df; font-weight: 500; color: #fff; }
    th{ padding: 14rem 1ch 12rem; }
    th:first-child{ border-top-left-radius: 17rem; }
    th:last-child{ border-top-right-radius: 17rem; }
    td{ padding: 13rem 1ch 12rem; background: #fff; border-block: 1px solid #e8e8e8; font-size: 16rem; }
    tr:last-child td:first-child{ border-bottom-left-radius: 17rem; }
    tr:last-child td:last-child{ border-bottom-right-radius: 17rem; }
    th, td{ border-inline: 1px dashed #ddd; }
    :where(th, td):first-child{ border-left: 0; }
    :where(th, td):last-child{ border-right: 0; }
    @media(min-width:1280px){
        .inr{ align-items: center; grid-template-columns: 1fr 61.53846154%; }
    }
}

.main .location{ padding: clamp(70rem, calc(120 / var(--inr) * 100vw), 120rem) 0 clamp(70rem, calc(100 / var(--inr) * 100vw), 100rem);
    .inr{ display: grid; gap: 50rem 2ch; }
    .h2{ font: 600 18rem var(--font-pop); color: var(--primary); }
    .tel{ margin: .73809524em 0 1.30952381em; display: inline-block; font: 700 var(--fs42) var(--font-gmk); }
    .list{ display: grid; gap: 26rem; font: 300 18rem var(--font-pre); color: #555; }
    .list > li{ display: grid; grid-template-columns: auto 1fr; gap: 3.5ch; }
    .list b{ font-weight: 600; color: var(--black); }
    .map{ width: 100%; border: 1px solid #ededed; border-radius: 15rem; }
    .map .wrap_map{ height: 470rem; }
    .map svg{ pointer-events: none; }
    .map_border, .wrap_controllers{ display: none }
    @media(min-width:768px){
        .inr{ grid-template-columns: 1fr 60.625%; align-items: center; }
        .hGroup{ padding-left: 8%; }
    }
    @media(max-width:767px){
        .map{ aspect-ratio: 1/1; }
        .map .wrap_map{ height: 100%; }
    }
}

.quick{ position: sticky; bottom: 0; z-index: 9;
    .quick-wrapper{ --distance: clamp(10rem, calc(57 / var(--inr) * 100vw), 57rem); position: absolute; right: var(--distance); bottom: var(--distance); display: grid; gap: 14rem; }
    .btn{ display: block; width: 54rem; aspect-ratio: 1; background: no-repeat 50% / cover; border-radius: 50%; box-shadow: 0 0 30rem 10rem rgba(0, 0, 0, 0.3); }
    .kakao{ width: 56rem; background-image: url('/images/main/quick-kakao.png'); }
    .tel{ background-image: url('/images/main/quick-tel.png'); }
    .top{ background-image: url('/images/main/quick-top.png'); }
}