@charset "utf-8";

:root {
    --history-padding-top: clamp(110px, calc( 389 / var(--inner) * 100vw ), 389px);
    --history-padding-bottom: clamp(210px, calc( 415 / var(--inner) * 100vw ), 415px);

    --year-pt: 3px;
    --year-fs: 3.75rem;
    --year-lh: 0.8;
}
@media (max-width:1024px){
    :root {
        --year-pt: 2px;
    }
}

/* .history-section {width: 100%; height: auto; aspect-ratio: 1920/1024; position: relative; z-index: 1; overflow: hidden; background: var(--gray50);} */
.history-section {width: 100%; padding: var(--history-padding-top) 0 var(--history-padding-bottom); position: relative; z-index: 1; overflow: hidden; background: var(--gray50);}

.img-city {width: clamp(0px, calc( 770 / var(--inner) * 100vw ), 770px); height: auto; aspect-ratio: 770/266; position: absolute; top: calc( var(--history-padding-top) - clamp(0px, calc( 147 / var(--inner) * 100vw ), 147px) ); z-index: -1; opacity: 0.7; pointer-events: none;}
.img-city-left {left: clamp(-62px, calc( 0px - 62 / var(--inner) * 100vw ), 0px);}
.img-city-right {right: clamp(-248px, calc( 0px - 248 / var(--inner) * 100vw ), 0px);}

.img-airplane {width: clamp(0px, calc( 817 / var(--inner) * 100vw ), 817px); height: auto; aspect-ratio: 817/110; position: absolute; top: calc( var(--history-padding-top) - clamp(0px, calc( 75 / var(--inner) * 100vw ), 75px) ); left: clamp(10px, calc( 36 / var(--inner) * 100vw ), 36px); z-index: 1; pointer-events: none;}

.img-bottom {width: 100%; height: auto; min-height: var(--history-padding-bottom); aspect-ratio: 1920/508; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: -1; pointer-events: none; opacity: 0.05;}

/* .history-track {width: 100%; height: auto; aspect-ratio: 1920/220; position: absolute; top: 389px; left: 50%; transform: translateX(-50%); background: url("../img/history/years_bg.jpg") center / cover no-repeat;} */
.history-track {width: 100%; height: auto; min-height: 140px; aspect-ratio: 1920/220; position: relative; background: url("../img/history/years_bg.jpg") right center / cover no-repeat;}
.history-track .bg {width: 100%; height: auto; aspect-ratio: 1920/220; object-position: right center;}

/* .history-track-fill {position: absolute; inset: 0; background: linear-gradient(315deg, rgba(28, 163, 209, 0.88) 37.921%, rgba(50, 175, 143, 0.88) 62.079%);}
.history-track-texture {width: calc(100% + 14px); height: auto; aspect-ratio: 1934/1139; position: absolute; top: -460px; left: 50%; transform: translateX(-50%); background: url("../img/history/yaytg1745415_2.jpg") center / cover no-repeat; mix-blend-mode: multiply; pointer-events: none;} */

.history-list-area {max-width: 100%; padding: var(--inner2-padding); position: absolute; top: calc( 100% - var(--year-fs) * var(--year-lh) * 2 + var(--year-pt) ); left: 50%; transform: translateX(-50%); z-index: 2; /* overflow-x: auto; overflow-y: visible; */}
.history-list {width: fit-content; display: flex; justify-content: start; gap: 32px;}
.history-item {width: fit-content; flex: 1 1 0;}

.year {padding-top: var(--year-pt); color: #fff; font-family: "Bebas Neue", "Pretendard Variable", sans-serif; font-size: var(--year-fs); font-weight: 400; line-height: var(--year-lh); letter-spacing: -0.002em;}

.txt-area {padding: 0 5px;}

.dot-line-area {width: fit-content; padding: 0 5px; margin: clamp(15px, calc( 17 / var(--inner) * 100vw ), 17px) 5px clamp(20px, calc( 25 / var(--inner) * 100vw ), 25px) 5px;}
.dot-line {
    width: 4px; height: 24px;
    background: url("data:image/svg+xml,%3Csvg width='4' height='24' viewBox='0 0 4 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='1.75' fill='%2332AF8F'/%3E%3Ccircle cx='2' cy='12' r='1.75' fill='%2332AF8F'/%3E%3Ccircle cx='2' cy='22' r='1.75' fill='%2332AF8F'/%3E%3C/svg%3E") center / contain no-repeat;
}

.details {
    background: var(--Gradient, linear-gradient(276deg, rgba(28, 163, 209, 0.88) 37.92%, rgba(50, 175, 143, 0.88) 62.08%));
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    white-space: nowrap;
}

.date {color: var(--gray500); font-size: 0.875rem; font-weight: 400; line-height: normal; letter-spacing: -0.002em; margin-top: 10px;}


/* ──────────────────────────────────────────
   Swiper
────────────────────────────────────────── */
.history-swiper-area .bottom-area {width: 100%; padding: var(--inner2-padding); display: flex; justify-content: space-between; align-items: center; gap: 32px; position: absolute; top: 200%; z-index: 10;}

.history-swiper-area .swiper-pagination-progressbar {height: 3px; position: relative; background: var(--gray400); border-radius: 999px; overflow: hidden;}
.history-swiper-area .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: var(--highlight);}

/* .history-swiper-area .btn-area {width: fit-content; padding: var(--inner2-padding); display: flex; justify-content: center; align-items: center; gap: 10px; position: absolute; top: calc(100% + 132px); bottom: calc( 0px + var(--year-fs) * var(--year-lh) * 2 + 10px ); z-index: 10;} */
.history-swiper-area .btn-area {width: fit-content; display: flex; justify-content: center; align-items: center; gap: 10px; margin-left: auto;}

.history-swiper-btn {width: 61px; height: auto; aspect-ratio: 61/24; border-radius: 50%; display: flex; justify-content: center; align-items: center;}
.history-swiper-btn.swiper-button-disabled {opacity: 0.3; pointer-events: none;}
.history-swiper-btn svg {width: 100%; height: auto; aspect-ratio: 61/24;}
.history-swiper-btn svg path {/* stroke: var(--white); */ stroke: var(--highlight);}


/* 영문 */
html:lang(en) .history-swiper-area .bottom-area {top: 230%;}
/* //영문 */





@media (min-width:1701px){
    .history-swiper-area .bottom-area {display: none;}
}
@media (max-width:1700px){
    .history-list:has(.swiper-slide) {gap: 0;}
}
@media (max-width:1200px){
    .history-track {background-position: calc(100% + 40px) center;}
}
@media (max-width:768px){
    /* 영문 */
    html:lang(en) .history-section {padding-bottom: 250px;}
    html:lang(en) .img-bottom {min-height: 260px;}
    /* //영문 */
}