@charset "utf-8";

.visual-swiper{ contain: content; position: fixed; inset: 0; z-index: -1;
    .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: url('/images/main/visual-shadow.jpg') no-repeat 50% / 100% 100%, #000 var(--url) no-repeat 50% / cover; background-blend-mode: multiply, normal; }
    .s1::before{ --url: url('/images/main/visual-1.jpg'); background-position-x: 15%; }
    .s2::before{ --url: url('/images/main/visual-2.jpg'); }
    .s3::before{ --url: url('/images/main/visual-3.jpg'); }
    .s4::before{ --url: url('/images/main/visual-4.jpg'); }
    .player{ position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 317vmax; height: 100vmax; aspect-ratio: 16/9; object-fit: cover; }
    .swiper-slide:not(.swiper-slide-active) .player{ opacity: 0; }
    @media(prefers-reduced-motion:no-preference){
        .swiper-slide::before{ scale: 1.05; transition: 1s; }
        .swiper-slide-active::before{ scale: 1; }
        .player{ transition: .6s; }
    }
}

.visual{ display: flex; align-items: center; height: 100svh; padding-bottom: 4.5%; color: #fff;
    .lead{ margin-bottom: 5rem; display: block; font: 700 clamp(20rem, calc(26 / var(--inr) * 100vw), 26rem) var(--font-pre); }
    .company{ font: 700 clamp(40rem, calc(69 / var(--inr) * 100vw), 69rem) var(--font-play); letter-spacing: -.025em; }
    .subHead{ margin-top: 1px; font: 700 16rem var(--font-pre); text-wrap: balance; }
    .pagination{ all: unset; position: absolute; top: -19px; right: 11px; display: flex; flex-direction: column; justify-content: space-between; height: 150rem; }
    .pagination::before{ content: ''; position: absolute; inset: 7px 2px 7px auto; width: 1px; background: currentColor; opacity: .24; }
    .bullet{ all: initial; display: inline-flex; align-items: center; justify-items: end; gap: 16px; font: 12px var(--font-play); color: currentColor; }
    .bullet::after{ content: ''; display: block; width: 5px; aspect-ratio: 1; background: currentColor; border-radius: 50%; }
    .bullet:not(.swiper-pagination-bullet-active){
        .number{ visibility: hidden; }
        &::after{ opacity: .6; }
    }
    @media(min-width:1280px){
        &{ min-height: 750px; }
    }
}

@media(min-width:1280px){
    .grid-layout{ margin-top: -191rem; display: grid; grid-template-columns: 66fr 126fr; }
}

.education{ color: #fff;
    .sticky{ display: grid; place-items: center; }
    h2{ font: 700 clamp(24rem, calc(38 / var(--inr) * 100vw), 38rem) var(--font-pre); letter-spacing: -.025em; }
    .en{ font-size: 1.18421053em; font-family: var(--font-play); letter-spacing: -.025em; }
    .description{ margin-top: 8rem; font: 200 16rem/24rem var(--font-pre); }
    .description em{ font-weight: 700; }
    .mail{ margin-top: 96rem; display: inline-block; padding: 22rem 32rem 21rem; border: 1px solid currentColor; font: 13rem var(--font-mon);  }
    @media(min-width:1280px){
        .sticky{ position: sticky; top: 0; height: 100vh; }
    }
    @media(max-width:1279px){
        .sticky{ padding: 70rem 0; }
    }
}

.three-column{ --border: #eceeef; background: linear-gradient(90deg, #fff 33.3333%, var(--border) 33.3333%, var(--border) calc(33.3333% + 1px), #fff calc(33.3333% + 1px), #fff 66.6666%, var(--border) 66.6666%, var(--border) calc(66.6666% + 1px), #fff calc(66.6666% + 1px));
    .common-h2{ font: 700 36rem var(--font-play); letter-spacing: -.025em; text-transform: uppercase; }
    .common-subHead{ font: 500 16rem var(--font-pre); }
    @media(min-width:768px){
        .inr{ width: 88.88888889%; }
    }
}

.quick{ display: grid;
    .more{ display: grid; grid-template-columns: 1fr auto; gap: 24rem; border-bottom: 1px solid var(--border); }
    .title{ font: 700 clamp(16rem, calc(18 / var(--inr) * 100vw), 18rem) var(--font-play); letter-spacing: -.025em; }
    .description{ color: #666; order: 2; }
    .icon{ height: 1.61111111em; }
    @media(min-width:768px){
        &{ grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr; }
        .more{ height: 191rem; padding: 45rem 71rem 20rem; }
        .icon{ translate: 2rem 5rem; }
    }
    @media(max-width:767px){
        &{ grid-template-columns: repeat(3, 1fr); }
        .more{ align-items: center; gap: 10rem; padding: 10rem; }
        .description{ display: none; }
    }
}

.product{ margin-top: 69rem;
    .list{ margin-top: 38rem; display: grid; gap: 50rem 111rem; }
    img{ width: 100%; }
    .en{ margin: 6rem 0 1rem; display: block; font: 700 21rem var(--font-play); letter-spacing: -.025em; }
    .ko{ font: 500 15rem var(--font-pre); color: #444; }
    @media(min-width:768px){
        .list{ grid-template-columns: repeat(3, 1fr); }
        .list > li:nth-child(2){ margin-top: 32.6%; }
        .list > li:nth-child(3){ margin-top: 8.2%; }
    }
}

.dataroom{ margin: 78rem 0 clamp(78rem, calc(120 / var(--inr) * 100vw), 120rem);
    .list{ margin-top: 35rem; background: #fff; border-top: 2px solid #0b272f; }
    .view{ display: grid; grid-template: 'date title arrow' 28fr 'date comment arrow' 24fr / clamp(60rem, calc(137 / var(--inr) * 100vw), 137rem) 1fr clamp(20rem, calc(54 / var(--inr) * 100vw), 54rem); align-items: center; gap: 9rem 19rem; padding: 21rem 0 27rem; border-bottom: 1px solid #dbdbdb; }
    .date{ grid-area: date; display: grid; gap: 2rem; font: 700 14rem/1 var(--font-play); text-align: center; }
    .day{ font-size: 45rem; }
    .title{ grid-area: title; align-self: end; font: 500 18rem var(--font-pre); }
    .comment{ grid-area: comment; color: #666; }
    .arrow{ grid-area: arrow; align-self: center; translate: 0 2rem; display: block; width: 10rem; aspect-ratio: 1; border: solid #666; border-width: 2px 2px 0 0; rotate: 45deg; }
    .more{ margin: 40rem auto 0; display: block; width:fit-content; padding: 21rem 52rem; background: #fff; border: 1px solid currentColor; font: 700 13rem var(--font-play); color: #0b272f; text-transform: uppercase; }
    @media(prefers-reduced-motion:no-preference){
        .date, .arrow{ transition: .3s; }
    }
    @media(any-hover){
        .view:not(:hover) .date{ color: #c5c6c7; }
        .view:not(:hover) .arrow{ opacity: .49; }
    }
}