@font-face {
    font-family: 'SlowGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-01@1.0/neurimboGothicRegular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SangSangYoungestDaughter';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202@1.0/SangSangYoungestDaughter.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff2);
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff2);
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff2);
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff2);
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff2);
    font-weight: 900;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 본문 공통 클래스 */
.desc-text {
    font-family: 'NanumSquareNeo', sans-serif;
    font-size: 1.6vw;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.025vw;
    word-break: keep-all;
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    overflow-x: hidden;
}

h1 {display: none;}

h2 {font-family: 'SlowGothic', sans-serif;
    font-size: 5vw;
    font-weight: normal;
    line-height: 0.9;
    word-break: keep-all;
    margin-bottom: 3vw;
}

h3 {font-family: 'SangSangYoungestDaughter', sans-serif;
    font-size: 5vw;
    font-weight: normal;
    margin-bottom: 2vw;
    line-height: 1.3;
    white-space: nowrap;
}

h4 {
    font-size: 2.2vw;
    font-weight: 500;
    margin-bottom: 2vw;
}

.hero {
    width: 100%;
    position: relative;
    aspect-ratio: 1280 / 800;
}

.hero-bg {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.hero-bg.fade-in {
    opacity: 1;
}

.mang-wrapper {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    width: 60%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.mang-wrapper.fade-in {
    opacity: 1;
}

.mang-img {
    width: 100%;
    height: auto;
}

.hero-img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.hero-img.fade-in {
    opacity: 1;
}

.photo-credit {
    margin-top: 8px;
    font-size: clamp(10px, 1.2vw, 14px);
    color: #FFF;
    opacity: 0.5;
    white-space: nowrap;
}

.second {
    width: 100%;
    position: relative;
}

.second-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #7B7B7B 0%, #2A2A2A 70%);
    z-index: 0;
}

.second-map {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: auto;
    z-index: 1;
}

.second-map.rotate {
    animation: mapRotate 20s linear infinite;
}

@keyframes mapRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.sec-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: 2;
}

.second-memo {
    position: absolute;
    left: 50%;
    top: 32%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: auto;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.second-memo.fade-in {
    opacity: 1;
}

.sec-marker {
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    width: 5%;
    height: auto;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.sec-marker.fade-in {
    opacity: 1;
}

.sec-pink {
    position: absolute;
    right: 20%;
    top: 50%;
    transform: translateY(-50%);
    width: 13%;
    height: auto;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.sec-pink.fade-in {
    opacity: 1;
}

.sec-text {
    position: absolute;
    left: 50%;
    top: 75%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.sec-text.fade-in {
    opacity: 1;
    width: 100%;
    text-align: center;
    z-index: 5;
}

.sec-title {
    color: #222;
    margin-bottom: 2.4vw;
    white-space: nowrap;
}

.sec-desc {
    color: #333;
    white-space: nowrap;
}

.third {
    width: 100%;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.thr-bg {
    width: 100%;
    height: auto;
    display: block;
}

.thr-news {
    position: absolute;
    bottom: 10%;
    right: -8%;
    width: 55%;
    height: auto;
    z-index: 1;
    transform: rotate(-15deg);
    transition: transform 0.1s ease-out;
}

.thr-text {
    position: absolute;
    left: 10%;
    top: 15%;
    z-index: 10;
}

.thr-title {
    color: #FFF;
    margin-bottom: 2vw;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.thr-title.fade-in {
    opacity: 1;
}

.thr-subtitle {
    color: #FFF;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.thr-subtitle.fade-in {
    opacity: 1;
}

.thr-desc {
    color: #FFF;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.thr-desc.fade-in {
    opacity: 0.8;
}

.ch-section {
    width: 100%;
    position: relative;
}

.ch-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 0;
}

.ch-scale {
    position: absolute;
    left: 15%;
    top: 10%;
    height: 55%;
    width: auto;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.ch-scale.fade-in {
    opacity: 1;
}

.ch-text {
    position: absolute;
    right: 20%;
    top: 35%;
    transform: translateY(-50%);
    color: #333;
    text-align: left;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.ch-text.fade-in {
    opacity: 1;
}

.s05-section {
    width: 100%;
    position: relative;
    z-index: 11;
}

.s05-bg {
    width: 100%;
    height: auto;
    display: block;
}

.s05-bluestar {
    position: absolute;
    top: 14%;
    left: 65%;
    transform: translateX(-50%);
    width: 13%;
    height: auto;
    z-index: 1;
}

.s05-g1 {
    position: absolute;
    top: 24%;
    left: 3%;
    width: 20%;
    height: auto;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.s05-g1.fade-in {
    opacity: 1;
}

.s05-g2 {
    position: absolute;
    bottom: 18%;
    right: 10%;
    width: 16%;
    height: auto;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.s05-g2.fade-in {
    opacity: 1;
}

.s05-g3 {
    position: absolute;
    top: 29%;
    right: 5%;
    width: 14%;
    height: auto;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.s05-g3.fade-in {
    opacity: 1;
}

.s05-g4 {
    position: absolute;
    bottom: 20%;
    left: 10%;
    width: 15%;
    height: auto;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.s05-g4.fade-in {
    opacity: 1;
}

.s05-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 3;
}

.s05-title {
    color: #FFF;
    margin-bottom: 2vw;
}

.s05-subtitle {
    color: #FFF;
}

.s05-desc {
    color: #FFF;
    opacity: 0.8;
    margin-bottom: 10cap;
}

.s05-arrow1 {
    position: absolute;
    top: 47%;
    left: 12%;
    width: 10%;
    height: auto;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.s05-arrow1.fade-in {
    opacity: 1;
}

.s05-arrow2 {
    position: absolute;
    bottom: 37%;
    right: 12%;
    width: 10%;
    height: auto;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.s05-arrow2.fade-in {
    opacity: 1;
}

.s05-arrow3 {
    position: absolute;
    top: 22%;
    right: 10%;
    width: 10%;
    height: auto;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.s05-arrow3.fade-in {
    opacity: 1;
}

.s05-arrow4 {
    position: absolute;
    bottom: 25%;
    left: 27%;
    width: 10%;
    height: auto;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.s05-arrow4.fade-in {
    opacity: 1;
}

.s06-section {
    width: 100%;
    position: relative;
    z-index: 10;
}

.s06-bg {
    width: 100%;
    height: auto;
    display: block;
}

.s06-text {
    position: absolute;
    top: 34%;
    left: 10%;
    transform: translateY(-50%);
    text-align: left;
    z-index: 1;
}

.s06-title {
    color: #222;
}

.s06-subtitle {
    color: #333;
}

.s06-desc {
    color: #333;
}

.s06-img1 {
    position: absolute;
    left: 0;
    bottom: 12%;
    width: 70%;
    height: auto;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.s06-img1.fade-in {
    opacity: 1;
}

.s06-img2 {
    position: absolute;
    right: -5%;
    bottom: 26%;
    width: 45%;
    height: auto;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.s06-img2.fade-in {
    opacity: 1;
}

.s06-img3 {
    position: absolute;
    right: 20%;
    bottom: 7%;
    width: 24%;
    height: auto;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.s06-img3.fade-in {
    opacity: 1;
}

.s06-img4 {
    position: absolute;
    right: 2%;
    bottom: 10%;
    width: 22%;
    height: auto;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.s06-img4.fade-in {
    opacity: 1;
}

.s07-section {
    width: 100%;
    position: relative;
}

.s07-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 0;
}

.s07-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    z-index: 1;
}

.s07-title {
    color: #222;
    margin-bottom: 3vw;
}

.s07-com {
    width: 72%;
    height: auto;
    margin-bottom: 3vw;
}

.s07-desc {
    color: #333;
}

.s08-section {
    width: 100%;
    position: relative;
    z-index: 11;
}

.s08-bg {
    width: 100%;
    height: auto;
    display: block;
}

.s08-com1 {
    position: absolute;
    right: 38%;
    top: 28%;
    transform: translateY(-50%) scale(0.5);
    height: 40%;
    width: auto;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.s08-com1.fade-in {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.s08-text-left {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 35%;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.s08-text-left.fade-in {
    opacity: 1;
}

/*
.s08-title {
    font-family: 'NanumSquareNeo', sans-serif;
    font-size: 3vw;
    font-weight: 400;
    color: #171717;
    margin-bottom: 1.5vw;
}
*/

.s08-desc {
    color: #333;
}

.s08-text-right {
    position: absolute;
    right: 16%;
    top: 32%;
    transform: translateY(-50%);
    text-align: left;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.s08-text-right.fade-in {
    opacity: 1;
}

.s08-years-old {
    font-family: 'NanumSquareNeo', sans-serif;
    font-size: 3vw;
    font-weight: 400;
    color: #171717;
    opacity: 0.4;
    margin-bottom: 1vw;
    position: relative;
    display: inline-block;
}

.s08-years-old::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 25%;
    width: 100%;
    height: 2px;
    background-color: #171717;
    opacity: 0.7;
}

.s08-years-new {
    font-family: 'NanumSquareNeo', sans-serif;
    font-size: 3vw;
    font-weight: 400;
    color: #171717;
    margin-bottom: 2vw;
}

.s08-years-desc {
    color: #333;
}

.s08-num {
    font-size: 6vw;
}

.s09-section {
    width: 100%;
    position: relative;
    z-index: 10;
}

.s09-bg {
    width: 100%;
    height: auto;
    display: block;
}

.s09-text1 {
    position: absolute;
    top: 14%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1;
}

.s09-subtitle {
    color: #FFF;
}

.s09-desc1 {
    color: #FFF;
    opacity: 0.8;
}

.s09-com3 {
    position: absolute;
    top: 24%;
    left: 50%;
    transform: translateX(-50%);
    width: 6%;
    height: auto;
    z-index: 1;
    transform-origin: center bottom;
}

.s09-com3.shake {
    animation: shake 1s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(-50%) rotate(0deg); }
    20% { transform: translateX(-50%) rotate(-20deg); }
    40% { transform: translateX(-50%) rotate(20deg); }
    60% { transform: translateX(-50%) rotate(-20deg); }
    80% { transform: translateX(-50%) rotate(20deg); }
}

.s09-com4 {
    position: absolute;
    top: 30%;
    left: 9%;
    width: 38%;
    height: auto;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.s09-com4.fade-in {
    opacity: 1;
}

.s09-com5 {
    position: absolute;
    top: 34%;
    right: -10%;
    width: 70%;
    height: auto;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.s09-com5.fade-in {
    opacity: 1;
}

.s09-text2 {
    position: absolute;
    top: 45%;
    left: 10%;
    z-index: 1;
}

.s09-title2 {
    color: #FFF;
}

.s09-desc2 {
    color: #FFF;
    opacity: 0.8;
}

.s09-com7 {
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translateX(-50%) scale(0.5);
    width: 40%;
    height: auto;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.s09-com7.fade-in {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.s09-text3 {
    position: absolute;
    top: 67%;
    left: 10%;
    z-index: 1;
}

.s09-title3 {
    color: #FFF;
}

.s09-desc3 {
    color: #FFF;
    opacity: 0.8;
}

.s09-text4 {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1;
}

.s09-title4 {
    color: #FFF;
    margin-bottom: 2vw;
    white-space: nowrap;
}

.s09-desc4 {
    color: #FFF;
    opacity: 0.8;
    white-space: nowrap;
}

.film-container {
    position: absolute;
    bottom: 10%;
    left: 5%;
    dispvlay: flex;
    align-items: flex-end;
    z-index: 1;
}

.s09-com10-wrapper {
    position: relative;
    z-index: 2;
    width: 10vw;
}

.s09-com10 {
    width: 100%;
    height: auto;
    display: block;
}

.s09-com11-track {
    position: absolute;
    left: 100%;
    bottom: 0;
    overflow: hidden;
    width: 100vw;444
    z-index: 1;
    height: 83%;
}

.s09-com11-wrapper {
    display: flex;
    gap: 0;
}

.s09-com11 {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    display: block;
    height: 100%;
    width: auto;
}

.s10-section {
    width: 100%;
    position: relative;
    z-index: 11;
}

.s10-bg {
    width: 100%;
    height: auto;
    display: block;
}

.s10-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
    width: 100%;
}

.s10-title {
    color: #FFF;
}

.s10-desc {
    color: #FFF;
    opacity: 0.8;
}

.s11-section {
    width: 100%;
    position: relative;
    z-index: 5;
}

.s11-bg {
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}

.s11-com1 {
    position: absolute;
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: 38%;
    height: auto;
    z-index: 1;
}

.s11-text {
    position: absolute;
    left: 52%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.s11-text.fade-in {
    opacity: 1;
}

.s11-title {
    color: #171717;
    margin-bottom: 3vw;
    white-space: nowrap;
}

.s11-desc {
    color: #333;
    white-space: nowrap;
}

.s12-section {
    width: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.s12-bg {
    width: 100%;
    height: auto;
    display: block;
    object-position: top;
}

.s12-cards {
    position: absolute;
    top: 20%;
    right: 10%;
    width: 35%;
    height: auto;
    z-index: 2;
    will-change: transform;
}

.s12-text {
    position: absolute;
    left: 10%;
    top: 46%;
    transform: translateY(-50%);
    z-index: 2;
}

.s12-title {
    color: #FFF;
    margin-bottom: 2vw;
}

.s12-hashtag {
    font-family: 'NanumSquareNeo', sans-serif;
    font-size: 2vw;
    font-weight: 400;
    color: #FFF;
    opacity: 0.8;
}

.s12-footer {
    position: absolute;
    left: 10%;
    bottom: 16%;
    z-index: 2;
}

.s12-footer p{
    font-family: 'NanumSquareNeo', sans-serif;
    font-size: 1.4vw;
    font-weight: 400;
    color: #FFF;
    line-height: 1.5;
    opacity: 0.5;
}

#scroll-spacer {
    height: 0;
}

/* 모든 섹션 공통 설정 */
.hero, .second, .third, .ch-section, .s05-section, .s06-section, .s07-section, .s08-section, .s09-section, .s10-section, .s11-section, .s12-section {
    width: 100%;
    position: relative;
    overflow: hidden; 
    display: block;
    height: auto !important; /* JS가 남긴 height 스타일 무시 */
}

/* [추가] 배경 이미지 꽉 채우기 */
.hero-bg, .second-bg, .thr-bg, .s05-bg, .s06-bg, .s08-bg, .s09-bg, .s10-bg, .s12-bg {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비율 유지하며 꽉 채움 */
    display: block;    /* 이미지 하단 여백 제거 */
}
.hero {aspect-ratio: 1280 / 800;}
.second {aspect-ratio: 1280 / 1300;}
.third {aspect-ratio: 1280 / 1244; margin-top: -10%;}
.ch-section {aspect-ratio: 1280 / 602;}
.s05-section {aspect-ratio: 1280 / 1140; margin-top: -10%;}
.s06-section {aspect-ratio: 1280 / 1633; margin-top: -15%;}
.s07-section {aspect-ratio: 1280 / 846;}
.s08-section {aspect-ratio: 1280 / 881;}
.s09-section {aspect-ratio: 1280 / 4000; margin-top: -40%;}
.s10-section {aspect-ratio: 1280 / 649; margin-top: -15%;}
.s11-section {aspect-ratio: 1280 / 740;}
.s12-section {aspect-ratio: 1280 / 800;}


.s09-com11-wrapper {
    display: flex;          /* 이미지들을 가로로 나란히 배치 */
    width: max-content;     /* 내용물(이미지) 길이만큼 트랙 길이를 확보 */
    /* 30초 동안, 일정한 속도(linear)로, 무한히(infinite) 움직여라 */
    animation: filmScroll 120s linear infinite; 
}

/* 2. 필름 이미지 개별 설정 */
.s09-com11 {
    height: 100%;           /* 부모 높이에 맞춤 */
    width: auto;            /* 비율 유지 */
    margin-right: 10px;     /* 이미지 사이 간격 (필요하면 조절) */
    display: block;
}

/* 3. 움직임 동작 정의 (오른쪽 -> 왼쪽) */
@keyframes filmScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* 전체 길이의 절반만큼 이동하고 다시 처음으로 튕김 */
        /* (이미지가 뚝 끊겨 보이면 -50% 수치를 조절하거나 이미지를 복사해야 함) */
        transform: translateX(-50%); 
    }
}