@charset "utf-8";

/* #main {overflow: hidden;} */

/* 메인 커서 */
.main__front-cursor {
    position: fixed;
    pointer-events: none;
    opacity: 0;
    z-index: 100;
    transition: opacity 0.2s ease;
    transform: translate(-50%, -50%);
    width: min(72px, 3.75vw);
    aspect-ratio: 1 / 1;
}

.main__front-cursor.is-visible {
    opacity: 1;
}

/* 메인 슬라이드 기본 레이아웃 */
.main__slide-wrap {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

.main__slide-wrap .main__slide {
    height: 100%;
    width: 100%;
    top: 0;
    position: fixed;
    visibility: hidden;
}

.main__slide-outer,
.main__slide-inner {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
}

.main__slide-view {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    flex-direction: column;
}



/* 메인 슬라이드 정보 영역 */
.main__slide-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--ir-color-white);
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;



    width: 76.25vw;
    /* aspect-ratio: 1464 / 400; */
    overflow: hidden;
}

.main__info-group {
    width: 37.6vw;
    aspect-ratio: auto 722 / 406;
    overflow: hidden;
}

.main__client-text {
    width: 100%;
    word-break: keep-all;
    height: 100%;
}

.main__client-item {
    height: 100%;
    width: 100%;
    position: relative;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* .main__client-item:nth-child(1) {
    background-color: red;
}   

.main__client-item:nth-child(2) {
    background-color: blue;
}

.main__client-item:nth-child(3) {
    background-color: green;
}

.main__client-item:nth-child(4) {
    background-color: yellow;
}

.main__client-item:nth-child(5) {
    background-color: orange;
} */

.main__slide-info .main__client-name {
    text-transform: capitalize;
    font-family: var(--lang-en);
    font-variation-settings: 'wght' var(--weight-500);
    font-size: var(--font-size-24);
    line-height: var(--lh-120);
    margin-bottom: min(2.00rem, 1.04vw);
}

.main__slide-info .main__project-name {
    font-family: var(--lang-ko);
    font-variation-settings: 'wght' var(--weight-600);
    font-size: var(--font-size-100);
    line-height: var(--lh-110);
    word-break: keep-all;
}

.main__slide-info .main__project-en {
    text-transform: uppercase;
}

/* 메인 슬라이드 하단 영역 */
.main__slide-bottom {
    position: absolute;
    bottom: min(9.60rem, 5.00vw);
    width: 100%;
    /* height: min(7.6rem, 3.96vw); */
    padding: 0 4.17vw;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}

/* 어워드 리스트 */
.main__awards-list {
    display: flex;
    gap: 0.63vw;
    cursor: pointer;
    height: 3.6rem;
}

.main__awards-item {
    width: 3.6rem;
}

/* 슬라이드 번호 */
.main__slide-number {
    /* line-height: 3.6rem; */
    display: flex;
    flex-direction: row;
    position: absolute;
    right: min(8.00rem, 4.17vw);
    top: 0;
    font-family: var(--lang-en);
    font-variation-settings: 'wght' var(--weight-500);
    font-size: var(--font-size-20);
    color: var(--ir-color-white);
    line-height: var(--lh-120);
    clip-path: polygon(0 0, 100% 0, 100% 3.6rem, 0 3.6rem);
}

.main__slide-prefix, .name, .years { 
    position: relative; 
    top: 0; 
}

.main__slide-prefix .main__prefix-text {
    height: 3.6rem;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main__postfix-text {
    display: flex;
    flex-direction: row;
    height: 3.6rem;
    align-items: center;
}

.main__postfix-text .main__postfix-dash {
    padding: 0 0.5rem;
}

/* 어워드 영역 */
.main__awards {
    /* clip-path: polygon(0 0, 100% 0, 100% 3.6rem, 0 3.6rem);
    position: absolute;
    left: 4.17vw;
    top: 20%; */
    clip-path: polygon(0 0, 100% 0, 100% 3.6rem, 0 3.6rem);
    position: absolute;
    left: min(8.00rem, 4.17vw);
    top: 0;
}

/* 프로젝트 모션 라인 */
.project-motion-line {
    overflow: hidden;
}

.project-motion-line span {
    display: block;
}

/* 메인 슬라이드 프론트 영역 */
.main__slide-front {
    width: 37.60vw;
    aspect-ratio: 1920 / 1080;
    /* height: 21.15vw; */
    overflow: hidden;
    z-index: 1;
}

.main__slide-front a {
    cursor: none;
}

.main__slide-front .main__type-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

.main__slide-front .main__type-video {
    position: relative;
    overflow: hidden;

    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
}


.main__slide-front .main__type-video video {
    height: inherit;
    object-fit: cover;

}
/* 메인 프론트 컨테이너 */
.main__front-views {
    position: relative;
    top: 0;
    height: 100%;
    width: 100%;
}

.main__front-view {
    display: block;
    width: 100%;
    height: 100%;
}
.main__front-container {
    position: relative;
    /* width: 37.6vw;
    height: 21.15vw; */
    /* width: 100%;
    height: 100%; */
    /* aspect-ratio: 1920 / 1080; */
    overflow: hidden;
}

/* .main__front-view video,
.main__front-view img {
    width: 100%;
    height: 100%;
    object-fit: cover;
} */

/* 메인 어워드 슬라이드 */
.main__slide-award {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    overflow: hidden;
    height: 0;
}

.main__slide-award .main__slide-view {
    background-color: var(--ir-color-white);
    color: #000;
}

.main__award-inner {
    position: relative;
    text-align: center;
    /* opacity: 0; */
}

.main__award-inner > * {
    display: block;
}

.main__slide-award .main__award-title {
    font-family: var(--lang-en);
    font-variation-settings: 'wght' var(--weight-600);
    font-size: var(--font-size-100);
    line-height: var(--lh-120);
    letter-spacing: var(--ls-tight);
}

.main__award-header .red-dot {
    width: var(--en-dot-28);
    margin-left: var(--dot-margin-10);
}

.main__slide-award .main__award-desc {
    padding: min(0.40rem, 0.21vw) 0;
    /* width: 35.78vw;
    max-width: 68.7rem; */
    word-break: keep-all;
    margin: 0 auto;
    font-family: var(--lang-ko);
    font-variation-settings: 'wght' var(--weight-500);
    font-size: var(--font-size-24);
    line-height: var(--lh-140);
    letter-spacing: var(--ls-normal);
}

.main__slide-award .main__award-history {
    padding-bottom: min(3.80rem, 1.98vw);
    color: var(--ir-color-dark-gray);
    font-family: var(--lang-en);
    font-variation-settings: 'wght' var(--weight-500);
    font-size: var(--font-size-14);
    line-height: var(--lh-120);
}

.main__award-more {
    display: inline-flex;
    font-family: var(--lang-en);
    font-variation-settings: 'wght' var(--weight-500);
    font-size: var(--font-size-20);
    line-height: var(--lh-120);
}

/* 어워드 로고 */
.main__award-logo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.main__award-logo .main__logo-item {
    position: absolute;
    opacity: 0; /* 처음엔 숨김 */
    transform: translateY(2rem); /* 약간 아래에서 시작 */
    transition: none;
}

.main__award-logo .main__logo-item.is-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s ease-out, transform .5s ease-out;
}

.main__award-logo .main__logo-item:nth-child(1) {
    width: min(20.72rem, 10.79vw);
    top: -51%;
    left: 50%;
    transform: translateX(-50%);
}

.main__award-logo .main__logo-item:nth-child(2) {
    width: min(22.07rem, 11.49vw);
    top: -24%;
    left: 102%;
}

.main__award-logo .main__logo-item:nth-child(3) {
    width: min(16.09rem, 8.38vw);
    top: 17%;
    left: 133%;
}

.main__award-logo .main__logo-item:nth-child(4) {
    width: min(14.07rem, 7.33vw);
    bottom: 0;
    left: 115%;
}

.main__award-logo .main__logo-item:nth-child(5) {
    width: min(19.56rem, 10.19vw);
    bottom: -60%;
    left: 127%;
}

.main__award-logo .main__logo-item:nth-child(6) {
    width: min(18.12rem, 9.44vw);
    bottom: -70%;
    left: 64%;
}

.main__award-logo .main__logo-item:nth-child(7) {
    width: min(7.61rem, 3.97vw);
    bottom: -78%;
    left: 4%;
}

.main__award-logo .main__logo-item:nth-child(8) {
    width: min(22.74rem, 11.85vw);
    bottom: -46%;
    left: -56%;
}

.main__award-logo .main__logo-item:nth-child(9) {
    width: min(17.15rem, 8.93vw);
    bottom: 8%;
    left: -35%;
}

.main__award-logo .main__logo-item:nth-child(10) {
    width: min(21.20rem, 11.04vw);
    top: 22%;
    left: -56%;
}

.main__award-logo .main__logo-item:nth-child(11) {
    width: min(14.36rem, 7.48vw);
    top: -27%;
    left: -31%;
}

/* .main__award-logo .main__logo-item:nth-child(1) {
    width: min(20.72rem, 10.79vw);
    top: min(-16.60rem, -8.65vw);
    left: 50%;
    transform: translateX(-50%);
}

.main__award-logo .main__logo-item:nth-child(2) {
    width: min(22.07rem, 11.49vw);
    top: min(-8.70rem, -4.53vw);
    right: min(-15.90rem, -8.28vw);
}

.main__award-logo .main__logo-item:nth-child(3) {
    width: min(16.09rem, 8.38vw);
    top: min(4.00rem, 2.08vw);
    right: min(-30.60rem, -15.94vw);
}

.main__award-logo .main__logo-item:nth-child(4) {
    width: min(14.07rem, 7.33vw);
    bottom: min(6.70rem, 3.49vw);
    right: min(-13.40rem, -6.98vw);
}

.main__award-logo .main__logo-item:nth-child(5) {
    width: min(19.56rem, 10.19vw);
    bottom: min(-7.40rem, -3.85vw);
    right: min(-23.40rem, -12.19vw);
}

.main__award-logo .main__logo-item:nth-child(6) {
    width: min(18.12rem, 9.44vw);
    bottom: min(-10.20rem, -5.31vw);
    right: min(8.70rem, 4.53vw);
}

.main__award-logo .main__logo-item:nth-child(7) {
    width: min(7.61rem, 3.97vw);
    bottom: min(-12.10rem, -6.30vw);
    left: min(6.20rem, 3.23vw);
}

.main__award-logo .main__logo-item:nth-child(8) {
    width: min(22.74rem, 11.85vw);
    bottom: min(-4.30rem, -2.24vw);
    left: min(-24.10rem, -12.55vw);
}

.main__award-logo .main__logo-item:nth-child(9) {
    width: min(17.15rem, 8.93vw);
    bottom: min(8.60rem, 4.48vw);
    left: min(-13.50rem, -7.03vw);
}

.main__award-logo .main__logo-item:nth-child(10) {
    width: min(21.20rem, 11.04vw);
    top:min(2.00rem, 1.04vw);
    left: min(-24.20rem, -12.60vw);
}

.main__award-logo .main__logo-item:nth-child(11) {
    width: min(14.36rem, 7.48vw);
    top: min(-9.50rem, -4.95vw);
    left: min(-12.00rem, -6.25vw);
} */

/* 슬라이더 */
.slider {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

.slide {
    position: absolute; 
    bottom: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

#slide-1 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

img {
    width: 100%;
    height: 100%; 
    object-fit: cover;
}

.main__slide {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden; 
    z-index: 10;
}

/* 미디어 쿼리 통합 */
@media all and (max-width: 1000px) {
    /* 메인 커서 & 프론트 */
    .main__front-cursor,
    .main__slide-front {
        display: none;
    }
    
    /* 메인 슬라이드 정보 영역 */
    .main__slide-info {
        transform: unset;
        width: 100%;
        position: unset;
        aspect-ratio: unset;
        padding-left: 6.4vw;
    }
    
    .main__info-group {
        width: 100%;
        aspect-ratio: unset;
        height: 29.33vw;
    }
    
    .main__slide-info .main__client-name {
        font-size: var(--font-size-16-m);
        margin-bottom: 1.33vw;
    }
    
    .main__slide-info .main__project-name {
        font-size: var(--font-size-32-m);
    }
    
    /* 어워드 리스트 */
    .main__awards-list {
        height: 8vw;
    }
    
    .main__awards-list .main__awards-item {
        width: 8vw;
        min-width: unset;
    }
    
    .main__awards-list .main__awards-item + .main__awards-item {
        margin-left: 1.33vw;
    }
    
    /* 메인 슬라이드 하단 영역 */
    .main__slide-bottom {
        height: 8vw;
        position: unset;
        transform: unset;
        display: block;
        width: 100%;
        aspect-ratio: unset;
        padding: 0 0 0 6.4vw;
        margin-top: 9.33vw;
    }
    
    .main__slide-number {
        visibility: hidden;
    }
    
    /* 어워드 영역 */
    .main__awards {
        position: unset;
        transform: unset;
        display: block;
        width: 100%;
        aspect-ratio: unset;
        clip-path: polygon(0 0, 100% 0, 100% 8vw, 0 8vw);
    }
    
    /* 메인 어워드 슬라이드 */
    .main__slide-award .main__award-title {
        font-size: var(--font-size-36-m);
    }

    .main__award-header .red-dot {
        width: var(--en-dot-10-m);
        margin-left: var(--dot-margin-2-m);
    }
    
    .main__slide-award .main__award-desc {
        padding: max(1.00rem, 2.67vw) 0;
        width: 68.7vw;
        font-size: var(--font-size-16-m);
    }
    
    .main__slide-award .main__award-history {
        padding-bottom: max(3.00rem, 8.00vw);
        font-size: var(--font-size-7-m);
    }
    
    .main__award-more {
        font-size: var(--font-size-14-m);
        padding: min(3.2vw, 1.2rem) min(6.4vw, 2.4rem);
    }
    
    /* 어워드 로고 */
    .main__award-logo .main__logo-item:nth-child(1) {
        width: 20vw;
        top: -26vw;
    }
    
    .main__award-logo .main__logo-item:nth-child(2) {
        width: 20vw;
        top: -16vw;
        left: 59vw;
    }
    
    .main__award-logo .main__logo-item:nth-child(3) {
        width: 15vw;
        top: 2vw;
        left: 78vw;
    }
    
    .main__award-logo .main__logo-item:nth-child(4) {
        width: 16vw;
        bottom: -7vw;
        left: 66vw;
    }
    
    .main__award-logo .main__logo-item:nth-child(5) {
        width: 20vw;
        bottom: -30vw;
        left: 63vw;
    }
    
    .main__award-logo .main__logo-item:nth-child(6) {
        width: 18vw;
        bottom: -35vw;
        left: 32vw;
    }
    
    .main__award-logo .main__logo-item:nth-child(7) {
        width: 8vw;
        bottom: -42vw;
        left: 2vw;
    }
    
    .main__award-logo .main__logo-item:nth-child(8) {
        width: 22vw;
        bottom: -23vw;
        left: -28vw;
    }
    
    .main__award-logo .main__logo-item:nth-child(9) {
        width: 17vw;
        bottom: 4vw;
        left: -17vw;
    }
    
    .main__award-logo .main__logo-item:nth-child(10) {
        width: 24vw;
        top: 23vw;
        left: -25vw;
    }
    
    .main__award-logo .main__logo-item:nth-child(11) {
        width: 14vw;
        top: -12vw;
        left: -2vw;
    }
    
    /* 메인 슬라이드 */
    .main__slide {
        visibility: hidden;
        justify-content: flex-end;
        /* padding-bottom: max(6.00rem, 16.00vw); */
        height: auto;
        position: absolute;
        bottom: 0;
        top: unset;
    }
    
    /* 모바일 슬라이드 */
    .slide__mobile-info {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 0 0 max(3.50rem, 9.33vw) max(2.40rem, 6.40vw);
        z-index: 10;
    }
    
    .slide__mobile-text {
        color: var(--ir-color-white);
    }
    
    .slide__mobile-text .slide__mobile-client {
        font-family: var(--lang-en);
        font-variation-settings: 'wght' var(--weight-500);
        font-size: var(--font-size-16-m);
        line-height: var(--lh-120);
        margin-bottom: max(0.50rem, 1.33vw);
    }
    
    .slide__mobile-text .slide__mobile-title {
        font-family: var(--lang-en);
        font-variation-settings: 'wght' var(--weight-600);
        font-size: var(--font-size-36-m);
        line-height: var(--lh-120);
        word-break: break-word;
        text-transform: uppercase;
    }
    
    .slide__mobile-award {
        display: flex;
        flex-direction: row;
        gap: max(0.30rem, 0.80vw);
    }
    
    .slide__mobile-item {
        width: max(3.00rem, 8.00vw);
        aspect-ratio: 1 / 1;
        
        margin-top: max(3.40rem, 9.07vw);
    }
}