@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');


html {
    word-break: keep-all;
    font-size: 30px;
    user-select: none;
}

body::-webkit-scrollbar {
    display: none;
}

body,
h1,
h2,
h3,
p {
    font-family: "Noto Sans KR", sans-serif;
    margin: 0;
    padding: 0;
}


p {
    line-height: 1.7;
    font-weight: 500;
    font-size: 1rem;
    display: inline;
    letter-spacing: -1px;
}

h1 {
    font-size: 4rem;
    font-weight: 900;
}

h2 {
    font-size: 3rem
}

h3 {
    letter-spacing: -2px;
    line-height: 1.7;
    font-size: 2rem;
    font-weight: 700;
}


img {
    display: block;
}

.wrap {
    position: relative;
    margin: auto;
    width: 1572px;
    height: 100%;
}

.rl {
    writing-mode: vertical-rl;
    /* 꺾이는 세로 글씨 */
}

.rl p {
    letter-spacing: 0.05rem;
}

.num {
    text-orientation: upright;
}

.navbar {
    position: absolute;
    height: 60px;
    color: black;
    width: 100%;


}

.igr,
.fcb,
.twt {
    filter: brightness(0);
}

.navcontents {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 55px;
}

.navcontents h3 {
    padding-top: 15px;
}

.navlist {
    display: flex;
    list-style: none;
    gap: 40px;
}

.navlist img {
    width: 40px;
    height: 40px;
    display: block;
    filter: invert(1);
}


.pt1 {
    background-image: url(img/introbk.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 1000px;
}

.pt2 {
    background-color: #d3d3d3;
    width: 100%;
    height: 1500px;
}

/* 잎들이 등장할 특정 타겟 섹션 */
.leaf-section {
    position: relative;
    /* 중요: absolute인 잎들의 기준점이 됨 */
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: inset(-1000% 0% 0% 0%);
}

/* 🍃 나뭇잎 공통 스타일 */
.leaf {
    position: absolute;
    /* 변경됨: 화면 고정(fixed)에서 섹션 내부 고정(absolute)으로 */
    pointer-events: none;
    z-index: 10;
}


.leaf1 {
    top: 5%;
    left: 5%;
}

.leaf2 {
    top: 35%;
    left: 30%;
}

.leaf3 {
    top: 60%;
    left: 70%;
    z-index: 20;
}

.leaf4 {
    top: 5%;
    left: 30%;
}

.leaf5 {
    top: 5%;
    left: 80%;
}

.shaking-nonstop {
    /* 애니메이션 적용: 이름(extreme-shake) / 지속시간(0.1s) / 반복(infinite) */
    animation: extreme-shake 0.2s infinite linear;
}

@keyframes extreme-shake {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    10% {
        transform: translate(-5px, -2px) rotate(-2deg);
    }

    20% {
        transform: translate(-10px, 0px) rotate(3deg);
    }

    30% {
        transform: translate(5px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(5px, -5px) rotate(2deg);
    }

    50% {
        transform: translate(-5px, 5px) rotate(-3deg);
    }

    60% {
        transform: translate(-10px, 2px) rotate(0deg);
    }

    70% {
        transform: translate(10px, 5px) rotate(-2deg);
    }

    80% {
        transform: translate(-5px, -5px) rotate(3deg);
    }

    90% {
        transform: translate(5px, 2px) rotate(-2deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

.introtext {
    position: absolute;
    top: 15%;
    width: 800px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
}

.introtext h3 {
    margin-bottom: 40px;
    /* h1 아래 여백 */
}

.dot3 {
    position: absolute;
    top: 66%;
    left: 50%;
    transform: translateX(-50%);

}




/* 박스 애니메이션이 일어나는 전체 스크롤 트랙 (5배 높이) */
.scroll-container {
    min-height: 500vh;
    position: relative;
}

/* 화면을 고정시키는 스티키 구역 */
.sticky-section {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 🌟 배경 동영상: 비율 유지하며 꽉 채우고 맨 뒤(z-index: 0)로 고정 */
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}



/* 콘텐츠 정중앙 정렬 가이드 (z-index: 2) */
.center-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* 커지는 흰색 박스 (z-index: 3) */
.expanding-box {
    position: absolute;
    width: 0%;
    height: 100%;
    background-color: #121212;
    z-index: 3;
}

/* 최상단 텍스트 컨테이너 (z-index: 10) */
.text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    z-index: 10;
    pointer-events: none;
    text-align: center;
    transform: translateY(50px);
}

/* 숫자 디자인 */
.number-display {
    color: #F2EE19;
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;


}

/* 설명 텍스트 상자 디자인 */
.desc-box {
    color: white;
    max-width: 550px;
    clip-path: inset(0 50% 0 50%);
}



.desc-box p {
    opacity: 0.7;

}





.pt4 {
    position: relative;
    height: 4000px;
    padding-top: 700px;

}






.pt4textbox1 {
    position: absolute;
    width: 800px;
    padding-left: 750px;
    top: -10px;
}

.pt4textbox2 {
    position: absolute;
    width: 600px;
    right: 0;

    top: 520px;
    text-align: right;
}

.pt4textbox3 {
    position: absolute;
    width: 600px;
    left: 500px;
    top: 1500px;
    text-align: center;
}

.pt4textbox4 {
    position: absolute;
    width: 600px;
    top: 2100px;
}






.pt4textbox5 {
    position: absolute;
    top: 3900px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;

}


.fence1 {
    position: absolute;
    left: -1500px;
    top: 670px;
}

.fence2 {
    position: absolute;
    right: -230px;
    top: 1350px;
}

.fence3 {
    position: absolute;
    left: -300px;
    top: 2150px;
}

.movingtext1 {
    position: absolute;
    top: -700px;
    left: -75px;
}

.movingtext2 {
    position: absolute;
    transform: rotate(90deg);
    transform-origin: right top;
    /* 👈 회전 기준점을 오른쪽으로 변경 */
    right: 0px;
    top: 2970px;
    z-index: 10;

}



.movingtext1 p,
.movingtext2 del {
    color: #F2EE19;
    font-size: 5rem;
    font-weight: 900;
    white-space: nowrap;
    /* 👈 이 코드를 반드시 추가해 주세요! */
    margin: 0;
    /* 👈 [필수] 브라우저 기본 마진을 없애서 불필요한 외곽 여백 제거 */
    line-height: 1;
    /* 👈 [필수] 글자 높이만큼 박스를 딱 맞게 조여서 회전 시 잘림 방지 */
}



.pt4img1 {
    position: absolute;
    top: 3010px;
    right: 0px;
    z-index: 5;


}


.bike2 {
    position: absolute;
    top: 3500px;
    right: -80px;
    z-index: 1;
}

.bike {
    position: absolute;
    bottom: -200px;
    left: -200px;
    z-index: 5;
}

/* 📌 가로 스크롤 관련 CSS */
.scroll-spacer {
    position: relative;
}

.sticky-container {
    position: sticky;
    top: 0;
    width: 6500px;
    height: 100vh;
    overflow: hidden;
}

/* 1. 바깥쪽 트랙은 너비 지정을 지웁니다 (wrap의 크기에 맞춰 늘어나도록) */
.horizontal-track {
    display: flex;
    height: 100vh;
    will-change: transform;
}

/* 2. 📌 핵심: 절대 찌그러지지 않는 튼튼한 박스 */
.scroll-wrap {
    display: flex;
    position: relative;
    /* 내부 요소들을 absolute로 맘대로 배치하기 위한 기준점 */

    /* 창을 줄여도 이 넓이는 절대 변하지 않습니다! */
    width: 5000px;
    height: 100%;
    margin: auto;

    /* 배경 이미지를 넣는다면 트랙이 아니라 이 wrap에 넣어주세요 */
}




/* 3. 내부 요소 자유 배치 */

.scene {
    position: relative;
    flex-shrink: 0;
    top: 0;
    height: 100vh;
    /* 📌 자식 요소들과 상관없이 화면 세로를 꽉 채우도록 강제 설정 */
}

.zone1 {
    position: relative;
    width: 3330px;
    margin-left: 340px;
    /* 예시: 전체 도화지에서 이 파란 방이 시작될 가로 위치 */
    background-color: white;
}

.zone2 {
    position: relative;
    width: 1670px;

}

/* 📌 이제 파란 방 안에서 글자와 이미지들을 absolute로 맘대로 배치합니다 */
.pt5textbox1 {
    position: absolute;
    left: -105px;
    top: 250px;
}

.pt5textbox1 p {
    font-weight: 900;
}

.pt5textbox2 {
    position: absolute;
    left: 1670px;
    top: 361px;
}

.pt5textbox2 p {
    font-weight: 700;
}

.pt5textbox3 {
    position: absolute;
    top: 750px;
    left: 1682px;
}

.pt5textbox3 p {
    font-weight: 450;
}



.pt5textbox4 {
    position: absolute;
    transform: rotate(270deg) scaleX(1.5);
    top: 515px;
    left: 2642px;

}


.pt5textbox4 p {
    font-weight: 450;
}

.pt5textbox5 {
    position: absolute;
    top: 0px;
    left: 2800px;

}

.pt5textbox5 p {
    font-weight: 450;
}




.pt5textbox7 {
    position: absolute;

    top: 85px;
    left: -30px;

}

.pt5textbox7 p {
    font-weight: 450;
}

.pt5textbox8 {
    position: absolute;
    top: 550px;
    left: 745px;

}

.pt5textbox8 p {
    font-weight: 450;
}




.pt5img1 {
    position: absolute;
    left: 1124px;
    top: 400px;
}



.pt5img2 {
    position: absolute;
    top: 0px;
    left: 1770px;

}

.pt5img3 {
    position: absolute;
    top: 80px;
    left: 2800px;
}

.pt5img4 {
    position: absolute;
    top: 0;
    left: 50px;
}




.footstep3 {
    position: absolute;
    top: 175px;
    left: 1600px;
}

.footstep4 {
    position: absolute;
    top: 250px;
    left: 1700px;
}




.footstep9 {
    position: absolute;
    top: 600px;
    left: 4600px;

}

.footstep10 {
    position: absolute;
    top: 700px;
    left: 4770px;
}


.scroll-spacer h3 {
    color: #F2EE19;
}






.pt5-5 {
    position: relative;
    height: 1600px;
    background-color: white;
    padding-top: 500px;

}


.yellowcar {
    position: absolute;
    top: 580px;
    right: 0;
    transform: translateX(100%);
}



.movingtext3 {
    position: absolute;
    top: 1600px;
    right: 0px;
    transform: rotate(90deg);
    transform-origin: right top;
    /* 👈 회전 기준점을 오른쪽으로 변경 */
    z-index: 20;

}

.movingtext3 p {
    font-size: 5rem;
    font-weight: 900;
    white-space: nowrap;
    /* 👈 이 코드를 반드시 추가해 주세요! */
    margin: 0;
    /* 👈 [필수] 브라우저 기본 마진을 없애서 불필요한 외곽 여백 제거 */
    line-height: 1;
    /* 👈 [필수] 글자 높이만큼 박스를 딱 맞게 조여서 회전 시 잘림 방지 */

}



.pt5-6 {
    position: relative;
    height: 2000px;
}

.pt5-6textbox0 {
    position: absolute;
    top: -80px;
    left: 0px;
    z-index: 11;
    color: #F2EE19;
    letter-spacing: -2px;
}

.pt5-6textbox1 {
    position: absolute;
    top: 550px;
    left: 245px;
    z-index: 11;
    color: #F2EE19;
    letter-spacing: -2px;
}

.pt5-6textbox2 {
    position: absolute;
    top: 1800px;
    left: 280px;
    z-index: 11;
}

.yellowbox {
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%)rotate(60deg);
    width: 1400px;
    height: 1200px;
    color: #F2EE19;
    background-color: #F2EE19;
}


.pt5-6img1 {
    position: absolute;
    top: 500px;
    right: 185px;
    z-index: 10;
}

.pt5-6img2 {
    position: absolute;
    top: 500px;
    left: 185px;
    z-index: 10;

}

.pt5-6img {
    position: absolute;
    top: 800px;
    left: 580px;
    transform: rotate(120deg);
    z-index: 5;
}


.pt5-6img3 {
    position: absolute;
    top: 700px;
    left: 800px;
    z-index: 5;
    transform: rotate(65deg);

}

.pt5-6img4 {
    position: absolute;
    top: 700px;
    left: 600px;
    z-index: 6;

}

.pt5-6img5 {
    position: absolute;
    top: 900px;
    left: 800px;
    z-index: 6;

}

.pt5-6img6 {
    position: absolute;
    top: 1300px;
    left: 200px;
    z-index: 6;

}

.pt5-6img7 {
    position: absolute;
    top: 1500px;
    left: 700px;
    z-index: 3;

}


.pt5-6img9 {
    position: absolute;
    top: 600px;
    left: 450px;
    transform: rotate(50deg);
    z-index: 3;
}

.pt5-6img10 {
    position: absolute;
    top: -600px;
    left: 0px;

}

.bike3 {
    position: absolute;
    top: 800px;
    left: 250px;
}



.pt6 {
    position: relative;
    height: 2600px;
    padding-bottom: 200px;

}

.pt6bk {
    position: relative;
    top: 1000px;
    width: 100%;
    height: 850px;
    background-color: #F2EE19;
    text-align: center;
}

.pt6textbox1 {
    position: absolute;
    width: 1200px;
    top: 500px;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 자기 크기의 절반만큼 뒤로 당김 */
    text-align: center;
}

.pt6textbox2 {
    padding-top: 100px;
    width: 600px;

}




.pt6img1 {
    position: relative;
    top: 0px;
    height: 1300px;

}

.pt6img1 img {
    position: absolute;
    width: 300px;
    opacity: 0;
    transition: opacity 0.1s;
}




.trash0 {
    top: -450px;
    right: -150px;
}

.trash1 {
    top: -300px;
    left: 950px;
}

.trash2 {
    top: -250px;
    left: 750px;
}

.trash3 {
    top: -200px;
    left: 550px;
}

.trash4 {
    top: -150px;
    left: 350px;
}

.trash5 {
    top: -100px;
    left: 150px;
}



.trash7 {
    top: -50px;
    left: 0px;
}



.trash8 {
    top: 100px;
    left: -100px;
}

.trash9 {
    top: 300px;
    left: -150px;
}

.trash10 {
    top: 500px;
    left: -150px;
}

.trash11 {
    top: 700px;
    left: 0px;
}





.board1 {
    top: 700px;
    left: -200px;
}

.trash12 {
    top: 800px;
    left: 100px;
}

.board2 {
    top: 800px;
    left: -100px;
}

.trash13 {
    top: 850px;
    left: 200px;
}

.board3 {
    top: 850px;
    left: 0px;
}



.board4 {
    top: 875px;
    left: 200px;
}

.board5 {
    top: 900px;
    left: 400px;
}

.board6 {
    top: 925px;
    left: 600px;
}

.board7 {
    top: 900px;
    left: 800px;
}

.board8 {
    top: 925px;
    left: 1000px;
}

.board9 {
    top: 900px;
    left: 1200px;
}

.board10 {
    top: 925px;
    left: 1400px;
}

.board11 {
    top: 900px;
    left: 1600px;
}

.dot2 {
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;

}

.pt6-5 {

    height: 1800px;
    background: url(img/pole1.png);
    background-size: cover;
    position: relative;
    background-attachment: fixed;
}

.pt6-5textbox1 {
    position: absolute;
    width: 1000px;
    top: 800px;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 3;
}



.pt6-5textbox1 p {
    color: white;
    background-color: #121212;
    font-size: 2rem;
}




.pt6-5img3 {
    position: absolute;
    top: 840px;
    left: 0px;
    z-index: 5;
    opacity: 0;
    /* 👈 평소엔 안 보이게 */
    visibility: hidden;
    /* 👈 마우스 클릭 등 방해 방지 */
    transition: opacity 0.3s;
    /* 👈 부드럽게 나타나는 효과 */
}

.pt6-5textbox1:has(p:hover)~.pt6-5img3 {
    opacity: 1;
    visibility: visible;
}





.pt7 {
    position: relative;
    height: 2000px;
    background-color: #121212;
    overflow: hidden;

}

.pt7 p {
    font-weight: 700;
}


.pt7textbox1 {
    position: absolute;
    left: 50%;
    top: 50%;
    /* 📌 1. 위에서 50%만큼 내려오게 설정 */

    /* 📌 2. translateX 지우고 translate(-50%, -50%)로 수정! */
    /* (가로로 내 몸집의 반인 -50%, 세로로 내 몸집의 반인 -50%를 동시에 이동시키는 치트키입니다) */
    transform: translate(-50%, -50%);

    text-align: center;
    width: 1500px;
    color: #F2EE19;
}

.pt7textbox2 {
    position: absolute;
    top: 352px;
    left: 417px;
    writing-mode: vertical-rl;
    /* 세로쓰기 */
    will-change: transform;
}

.pt7textbox3 {
    position: absolute;
    top: 1030px;
    left: 575px;
    will-change: transform;
}

.pt7textbox4 {
    position: absolute;
    top: 1630px;
    left: 1120px;
    will-change: transform;
}

.pt7textbox2 p {
    letter-spacing: 0.2rem;
}


.rain {
    position: absolute;
    will-change: transform;
}

.rain1 {
    top: 36%;
}

.rain2 {
    top: 12%;
    left: -12%;
}

.rain3 {
    top: 18%;
    left: 9%;
}



.rain5 {
    top: 32%;
    left: 12%;
}

.rain6 {
    top: 6%;
    left: 42%;
}

.rain7 {
    top: 12%;
    left: 54%;
}

.rain8 {
    top: 50%;
    left: 48%;
}

.rain9 {
    top: 60%;
    left: 95%;
}

.rain10 {
    top: -18%;
    left: 66%;
}

.rain11 {
    top: 18%;
    left: 90%;
}

.rain12 {
    top: 9%;
    left: 72%;
}

.rain13 {
    top: -18%;
    left: 84%;
}

.rain14 {
    top: 29%;
    left: 78%;
}

.rain15 {
    top: 47%;
    left: 66%;
}

.rain16 {
    top: 71%;
    left: 75%;
}

.rain17 {
    top: 59%;
    left: 54%;
}

.rain18 {
    top: 82%;
    left: 18%;
}

.rain19 {
    top: 71%;
    left: 3%;
}

.rain20 {
    top: 59%;
    left: -6%;
}

.rain21 {
    top: 65%;
    left: 30%;
}

.rain22 {
    top: 74%;
    left: 24%;
}

.rain23 {
    top: 50%;
    left: 48%;
}

.rain24 {
    top: 0%;
    left: 15%;
}

.rain25 {
    top: 18%;
    left: 36%;
}

.rain26 {
    top: 21%;
    left: 39%;
}

.rain27 {
    top: 59%;
    left: 36%;
}

.pt9 {
    position: relative;
    height: 2000px;
    background-color: #121212;
    color: white;
}


.pt9textbox1 {
    position: absolute;
    top: 40%;
}

.dot {
    position: absolute;
    top: 70%;
    right: 0%;
}

.pt9fs1 {
    position: absolute;
    top: 200px;
    right: 0px;
    transform: rotate(220deg);
}

.pt9fs2 {
    position: absolute;
    top: 500px;
    right: 400px;
    transform: rotate(250deg);
}

.pt9fs3 {
    position: absolute;
    top: 1500px;
    right: 600px;
    transform: rotate(180deg);
}

.footerbar {
    position: relative;
    background: #121212;
    height: 400px;
    display: flex;
    list-style: none;
}

.footercontainer {
    display: flex;
    align-items: baseline
}


.footertittle {
    font-size: 2rem;
    padding-right: 50px;
    line-height: 0.7;

}

.footertext {
    width: 540px;
    font-size: 12px;
    color: #8b8b8b;
}


.footerlink {
    padding-left: 200px;
}


.footerbar a {
    text-decoration-line: none;
    font-size: 20px;
    font-weight: 100;
    color: #8b8b8b;
}

.footerbar p {
    color: white;
}



.footerbar-item {
    cursor: pointer;

}

.footerbar-item a:hover {
    color: #e7e7e0;
}


.Copyright {
    position: absolute;
    padding-top: 200px;
}