@charset "utf-8";

.main{
    section{ scroll-margin-top: var(--header-height); }
    .common-lead{ margin-bottom: calc(var(--fs40) * 0.325); font: 600 18rem var(--font-mon); color: var(--primary); text-transform: uppercase; }
    .common-h2{ margin-top: .65em; font: 700 var(--fs40)/1.38888889 var(--font-pre); letter-spacing: -.015em; }
    .common-description{ margin-top: calc(var(--fs40) * 0.575); font: 300 18rem/27rem var(--font-pre); }
    .common-arrow{ width: clamp(14rem, calc(22 / var(--inr) * 100vw), 22rem); height: auto; fill: currentColor; }
    @media(prefers-reduced-motion:no-preference){
        .common-arrow{ transition: .3s; }
    }
    @media(any-hover){
        a:hover .common-arrow{ rotate: -45deg; }
    }
}

.visual{ position: relative; display: grid; align-items: center; height: max(600rem, 100svh); background: var(--black); padding: var(--header-height) 0 5.1%; color: #fff; isolation: isolate;
    .swiper{ position: absolute; inset: 0; z-index: -1; }
    .swiper-wrapper, .swiper-slide{ height: 100%; }
    .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
    .s1::before{ background-image: url('/images/main/visual-1.jpg'); background-position-x: 70%; }
    .s2::before{ background-image: url('/images/main/visual-2.jpg'); }
    /* .s3::before{ background-image: url('/images/main/visual-3.jpg'); } */
    .s3::before{ background-image: none; }
    .video-container{width: 100%;height: 100%;overflow: hidden;}
    .video-container video {width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;}
    .t-group{ max-width: 1181px; }
    .control{ display: flex; align-items: center; gap: 17rem; }
    .btn{ position: relative; width: 10rem; height: 15rem; }
    .btn::before{ content: ''; position: absolute; inset: -7rem; }
    .arrow{ display: block; width: 100%; height: auto; fill: currentColor; }
    .state{ position: relative; width: 8rem; height: 11rem; }
    .state::before{ content: ''; position: absolute; inset: -7rem; }
    .state::after{ content: ''; position: absolute; inset: 0; background: currentColor; }
    .state:not(.isPlay)::after{ -webkit-clip-path: polygon(0 100%, 0 0, 100% 50%); clip-path: polygon(0 100%, 0 0, 100% 50%); }
    .state.isPlay::after{ -webkit-clip-path: polygon(0 100%, 0 0, 37.5% 0, 37.5% 100%, 62.5% 100%, 62.5% 0, 100% 0, 100% 100%); clip-path: polygon(0 100%, 0 0, 37.5% 0, 37.5% 100%, 62.5% 100%, 62.5% 0, 100% 0, 100% 100%); }
    .pagination{ all: unset; margin-left: 14rem; font: 600 16rem var(--font-mon); letter-spacing: .02em; }
    .slash{ margin: 0 1ch; font-size: 14rem; }
    .en{ margin-top: 51rem; display: block; font: 700 clamp(34rem, calc(64 / var(--inr) * 100vw), 64rem)/1.2 var(--font-mon); letter-spacing: -.015em; text-shadow: 0 0 20rem 8rem rgba(0, 0, 0, 0.05); }
    .ko{ margin-top: 13rem; display: block; font: 18rem/1.2 var(--font-pre); }
    .scroll-down{ --space: clamp(10rem, calc(70 / var(--inr) * 100vw), 70rem); position: absolute; right: var(--space); bottom: var(--space); display: grid; place-items: center; width: clamp(70rem, calc(123 / var(--inr) * 100vw), 123rem); aspect-ratio: 1; }
    .circle-txt{ grid-area: 1/1/2/2; display: block; width: 100%; height: 100%; }
    .down-arrow{ grid-area: 1/1/2/2; width: 13rem; height: auto; fill: currentColor; }
    @media(prefers-reduced-motion:no-preference){
        .swiper-slide::before{ transition: 1.2s; scale: 1.05; }
        .swiper-slide-active::before{ scale: 1; }
        .circle-txt{ -webkit-animation: visual-circle 15s linear infinite; animation: visual-circle 15s linear infinite; }

        :where(.control, .en, .ko){ -webkit-animation: visual-slide-left .6s .2s both; animation: visual-slide-left .6s .2s both; }
        .en{ -webkit-animation-delay: .4s; animation-delay: .4s; }
        .ko{ -webkit-animation-delay: .5s; animation-delay: .5s; }
    }
}
@-webkit-keyframes visual-circle {
    100%{ rotate: -360deg; }
}
@keyframes visual-circle {
    100%{ rotate: -360deg; }
}
@-webkit-keyframes visual-slide-left {
    0%{ translate: 20rem; opacity: 0; }
    100%{ translate: 0; opacity: 1; }
}
@keyframes visual-slide-left {
    0%{ translate: 20rem; opacity: 0; }
    100%{ translate: 0; opacity: 1; }
}

.main-bg{ margin-top: clamp(70rem, calc(110 / var(--inr) * 100vw), 110rem); padding-bottom: clamp(70rem, calc(150 / var(--inr) * 100vw), 150rem); background: url('/images/main/main-bg-1.jpg') no-repeat 100% 0 / auto clamp(250rem, calc(721 / var(--inr) * 100vw), 721rem), url('/images/main/main-bg-2.webp') no-repeat 100% clamp(-700rem, calc(-700 / var(--inr) * 100vw), -243rem) / auto clamp(994rem, calc(2864 / var(--inr) * 100vw), 2864rem), url('/images/main/main-bg-3.jpg') no-repeat 0 100% / auto clamp(950rem, calc(1339 / var(--inr) * 100vw), 1339rem), #000; }

.company{ contain: content;
    hgroup{ margin: 0 auto; max-width: calc(var(--inr) * 1rem); padding: 126rem 0 103rem; color: #fff; }
    .common-h2{ margin: .83333333em 0 1em; font-size: var(--fs36); }
    .description{ font: 17rem/1.58823529 var(--font-pre); }
    .link-group{ position: relative; display: grid; gap: 45rem; max-width: 1580rem; padding: 70rem 70rem 68rem; background: #fff; text-align: center; }
    .link-group::before{ content: ''; position: absolute; inset: -100vh 100% 0 -100vw; background: #fff; }
    .link, .link *{ display: block; }
    .img-group{ contain: content; width: 100%; aspect-ratio: 450/275; background: var(--black); }
    .img{ width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
    .en{ margin-top: clamp(14rem, calc(26 / var(--inr) * 100vw), 26rem); font: 500 15rem var(--font-mon); color: #b5b5b5; }
    .ko{ margin-top: .72727273em; font: 700 var(--fs22) var(--font-pre); }
    @media(prefers-reduced-motion:no-preference){
        .img{ transition: .6s; }
    }
    @media(any-hover){
        .img:hover{ scale: 1.1; }
    }
    @media(min-width:768px){
        .link-group{ grid-template-columns: repeat(3, 1fr); }
    }
}

.business{ margin-top: clamp(70rem, calc(146 / var(--inr) * 100vw), 146rem); color: #fff;
    /* hgroup{ text-align: center; } */
    .link-group{ margin-top: 49rem; display: grid; gap: 20rem; }
    .link{ position: relative; display: flex; flex-direction: column; justify-content: end; gap: 20rem; aspect-ratio: 71/57; padding: 5% 11.1% 12.5%; background: no-repeat 50% / cover; }
    .l1{ background-image: url('/images/main/business-1.jpg'); }
    .l2{ background-image: url('/images/main/business-2.jpg'); }
    .l3{ background-image: url('/images/main/business-3.jpg'); aspect-ratio: 710/474; }
    .l4{ background-image: url('/images/main/business-4.jpg'); aspect-ratio: 710/474; }
    .title{ font: 700 var(--fs25) var(--font-pre); }
    .description{ letter-spacing: -.01em; }
    .arrow-group{ position: absolute; right: 0; bottom: 0; width: 60rem; aspect-ratio: 1; background: var(--primary); }
    .arrow{ position: absolute; inset: 0; margin: auto; width: 16rem; height: auto; fill: currentColor; }
    @media(prefers-reduced-motion:reduce) or (any-hover:none){
        .a2{ display: none; }
    }
    @media(any-hover){
        .link::before{ content: ''; position: absolute; inset: 0; border: 0 solid var(--primary); pointer-events: none; }
        .link:hover::before{ border-width: 6rem; }
        @media(prefers-reduced-motion:no-preference){
            .link::before{ transition: .1s linear; }
            .arrow{ transition: .3s; }
            .a1{ translate: -100%; opacity: 0; }
            .link:hover .a1{ translate: 0; opacity: 1; }
            .link:hover .a2{ translate: 100%; opacity: 0; }
        }
    }
    @media(min-width:768px){
        .link-group{ grid-template-columns: repeat(2, 1fr); }
    }
}

.location{ margin-top: clamp(70rem, calc(147 / var(--inr) * 100vw), 147rem); color: #fff; text-align: center;
    .map-group{ margin-top: 47rem; width: 100%; aspect-ratio: 1; }
    .map-group .wrap_map{ height: 100%; }
    .map-group svg{ pointer-events: none; }
    .map_border, .wrap_controllers, .cont{ display: none }
    @media(min-width:768px){
        .map-group{ aspect-ratio: auto; }
        .map-group .wrap_map{ height: 430rem; }
    }
}