@import url("../../css/user/font.css");

/* reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
}
body {
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}
input,
button,
textarea,
select {
    font: inherit;
    border: none;
    outline: none;
}
button {
    cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}
a {
    text-decoration: none;
    color: inherit;
}
ul,
ol {
    list-style: none;
}

/* layout */
html.menu-open,
body.menu-open { 
    overflow: hidden;
    
    overscroll-behavior: none;  /* iOS 튕김 방지 */
    /*touch-action: none;*/            /* 터치 스크롤 차단 */
}

/* 반투명 백드롭(터치/휠 이벤트 흡수용) */
.mobile-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 9998;           /* .mobile-nav(9999) 바로 아래 */
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.mobile-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}
body {
    width: 100%;
    overflow-x: hidden;
    background-color: #101218;
    font-size: 24px;
    font-weight: 300;
    color: #fff;
}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 60px;
    height: 100px;
    z-index: 1000;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-out; /* 등장 애니메이션 */
}
header.visible {
    transform: translateY(0);
    opacity: 1;
}
header.blur {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}
header .lang-select {
    position: relative;
}
header .lang-select .btn-lang-slt {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    border: 1px solid #fff;
    border-radius: 20px;
    width: 78px;
    background-color: transparent;
    font-size: 16px;
    color: #fff;
}
header .lang-select .btn-lang-slt::before {
    content: '';
    margin-right: 5px;
    width: 16px;
    height: 16px;
    background: url('../../images/user/ico_lang.png') no-repeat;
}
header .lang-select .btn-lang-slt::after {
    content: '';
    margin-left: 7px;
    width: 7px;
    height: 5px;
    background: url('../../images/user/ico_more.png') no-repeat;
}
header .lang-select .lang-options {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    margin-top: 4px;
    border: 1px solid #fff;
    border-radius: 20px;
    width: 78px;
    background: #07080c;
}
header .lang-select .lang-options button {
    display: block;
    margin: 0 auto;
    padding: 0 15px;
    background: transparent;
    font-size: 14px;
    color: #fff;
}
header .lang-select .lang-options button:first-child {
    padding-top: 12px;
    padding-bottom: 6px;
}
header .lang-select .lang-options button:last-child {
    padding-top: 6px;
    padding-bottom: 12px;
}

.side-nav {
    position: fixed;
    right: 44px;
    top: 50%;
    transform: translate(100%, -50%);
    border-radius: 5px;
    background-color: transparent;
    z-index: 10000;
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-out;
}
.side-nav.visible {
    transform: translate(0, -50%);
    opacity: 1;
}
.side-nav a {
    display: block;
    position: relative;
    padding: 15px 0;
}
.side-nav a span {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    padding: 8px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    color: #101218;
    background: #fff;
    transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
}
.side-nav a .bullet {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}
.side-nav a .bullet::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    transition: width 0.3s, height 0.3s;
}
.side-nav a.active span, .side-nav a:hover span {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-out, visibility 0s linear 0s;
}
.side-nav a.active::after {
    height: 8px;
    background: #fff;
    border-radius: 100%;
    transform: translateY(-50%);
}
.side-nav a.active .bullet::after {
    width: 18px;
    height: 18px;
}
.side-nav a:hover {
    color: #fff;
}
.side-nav a:hover::before {
    background-color: #fff;
}
.side-nav.scrolling-hide-span a:not(.active) span {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
}
.side-nav.scrolling-hide-span a {
    pointer-events: none; 
}
.side-nav.scrolling-hide-span a.active {
    pointer-events: auto; 
}

/* mobile menu */
.btn-mobile-menu {
    position: fixed;
    display: none;
    /*display: flex;*/
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    width:  22px;
    height: 22px;
    background: transparent;
    z-index: 10003;
}
.btn-mobile-menu span {
    display: block;
    width: 19px;
    height: 2px;
    background-color: #fff;
    transform-origin: center center;
    transition: transform 0.4s ease, opacity 0.4s ease;
}
.btn-mobile-menu.active span:nth-child(1) {
    transform: rotate(45deg);
}
.btn-mobile-menu.active span:nth-child(2) {
    transform: rotate(-45deg);
    margin-top: -9px;

}
/* 모바일 네비게이션 */
.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 560px;
    /*max-width: 300px;*/
    height: 100dvh;
    /* max-height: 100svh; */
    background-color: #101218;
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
    z-index: 10002;
    padding: 58px 30px 60px 30px;
    border-left: 1px solid #cfd0d1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;  /* iOS 부드러운 스크롤 */
    overscroll-behavior: contain;  
    touch-action: pan-y; 
}
@supports (height: 100dvh){
  .mobile-nav{ height: 100dvh; }    /* iOS 주소창 변화에도 안정 */
}
@supports (padding: max(0px)){
    .mobile-nav{
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }
}
.mobile-nav.active {
    transform: translateX(0);
}
.mobile-nav li {
    font-size: 20px;
    font-weight: 400;
}
.mobile-nav li + li {
    margin-top: 40px;
}


section:not(#section1, #section3, #section6, #section7, #section8) {
    position: relative;
    width: 100%;
    height: calc(100vh - 100px);
    min-height: calc(48.24vw - 100px);
    overflow: hidden;
    background: #101218;
}
.section-tit {
    padding-top: 60px;
    font-family: "Urbanist", sans-serif;
    font-size: 32px;
    font-weight: 600;
}

/* section1 */
#section1 {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: #101218;
}
#section1 .main-headline {
    position: absolute;
    left: 60px;
    bottom: 110px;
    transform: translateY(150px);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-out;
    z-index: -1;
}
#section1 .main-headline h1 {
    line-height: 1.1;
    font-family: "Urbanist", sans-serif;
    font-size: 80px;
    font-weight: bold;
}
#section1 .main-headline p {
    margin-top: 45px;
    font-size: 32px;
}
#section1 .main-headline.visible .video-btn-wrapper {
    position: relative;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.9s;
    z-index: 2;
}
#section1 .main-headline h1,
#section1 .main-headline p,
#section1 .main-headline .video-btn-wrapper {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
#section1 .main-headline.visible {
    transform: translateY(0);
    opacity: 1;
    z-index: 1;
}
#section1 .main-headline.visible h1 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}
#section1 .main-headline.visible p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}
#section1 .main-headline .video-btn {
    margin-top: 50px;
    border: 2px solid #fff;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    color: #fff;
    background: url('../../images/user/ico_pause.png') no-repeat center center transparent;
    text-indent: -9999px;
}
#section1 .main-headline .video-btn.play {
    background: url('../../images/user/ico_play.png') no-repeat center center transparent;
}
#section1 .main-headline::after {
    content: '';
    position: absolute;
    top: -115px;
    left: -210px;
    width: 913px;
    height: 898px;
    background: url('../../images/user/bg_bi.png') no-repeat;
}
.main-bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40vw;    
    height: 300px;
    overflow: hidden;
    transition: width 1s ease-out, height 1s ease-out, opacity 0.5s ease-out; /* 확대 모션 시간 및 이징 */
    opacity: 0.8;
    will-change: transform;
}
#section1 .main-bg-video video {
    position: absolute;
    inset: -1px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; 
    will-change: transform;
}

.main-bg-video.animate-expand {
    animation: expandVideo 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 1s;
}

@keyframes expandVideo {
    0% {
        width: 40vw;
        height: 300px;
        opacity: 0.8;
    }
    50% {
        width: 100%;
        height: 50vh;
        opacity: 1;
    }
    100% {
        width: 100%;
        height: 100vh;
        opacity: 1;
    }
}

.video-progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 10;
    transform: translateY(100%);
    opacity: 0;
    transition: transformY 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-out;
}
.video-progress-container.visible {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 1.8s;
}
.video-progress-bar {
    width: 0%;
    height: 100%;
    background-color: #fff;
    transform-origin: left;
}
#section1 .mouse_scroll {
    display: block;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%, 50px);
	margin: 0 auto;
	width: 24px;
    z-index: -1;
    opacity: 0;
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 1s ease-in-out;
}
#section1 .mouse_scroll.visible {
    transform: translate(-50%, 0);
    opacity: 1;
    z-index: 1;
}
#section1 .down-arrow-1, #section1 .down-arrow-2 {
    display: block;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    margin: 0 0 3px 4px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    border-radius: 2px;
    width: 15px;
    height: 15px;
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
    animation: mouse-scroll 1s infinite;
}
#section1 .down-arrow-1 {
    margin-top: 1px;
    -webkit-animation-delay: .1s;
    -moz-animation-delay: .1s;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    animation-delay: alternate;
}
#section1 .down-arrow-2{
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -webkit-animation-direction: alternate;
    animation-delay: .2s;
    animation-direction: alternate;
    margin-top: -6px;
}
#section1 .mouse {
    border: 2px solid white;
    border-radius: 14px;
    transform: none;
    height: 40px;
    width: 24px;
}
#section1 .wheel {
    display: block;
    position: relative;
    margin: 5px auto;
    height: 10px;
    width: 4px;
    border: 2px solid #fff;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background: white;
}
#section1 .wheel {
    -webkit-animation: wheel-up-down 1.2s linear infinite;
    -moz-animation: wheel-up-down 1.2s linear infinite;
    animation: wheel-up-down 1.2s linear infinite;
}

@-webkit-keyframes wheel-up-down {
	0% {
        margin-top: 5px;
        opacity: 0;
	}
	30% {
        opacity: 1;
	}
	100% {
        margin-top: 20px;
        opacity: 0;
	}
}
@-moz-keyframes wheel-up-down {
	0% {
        margin-top: 5px;
        opacity: 0;
	}
	30% {
        opacity: 1;
	}
	100% {
        margin-top: 20px;
        opacity: 0;
    }
}
@keyframes wheel-up-down {
	0% {
        margin-top: 5px;
        opacity: 0;
	}
	30% {
        opacity: 1;
	}
	100% {
        margin-top: 20px;
        opacity: 0;
	}
}

@-webkit-keyframes mouse-scroll {
    0% {
        opacity: 0;
    }
    50% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes mouse-scroll {
    0% { opacity: 0; }
    50% { opacity: .5; }
    100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {
    0% {
        opacity: 0;
    }
    50% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}
@keyframes mouse-scroll {
    0% {
        opacity: 0;
    }
    50% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}

/* section2 */
#section2 .inner {
    display: flex;
    justify-content: space-between;
    height: calc(100vh - 100px);
    min-height: calc(48.24vw - 100px);
}
#section2 .section-header {
    padding: 0;
}
#section2 .section-header .txt-fill-effect {
    text-align: left;
}
#section2 .left-column,
#section2 .right-column {
    flex: 0 0 50%;
    overflow: hidden;
}
#section2 .left-column {
    padding-left: 60px;
    padding-bottom: 60px;
    overflow-y: auto;
}
#section2 .left-column .about-info-list {
    margin-top: 95px;
}
#section2 .left-column .about-info-list dt {
    display: flex;
    align-items: center;
    gap: 12px;
}
#section2 .left-column .about-info-list dd {
    margin-top: 20px;
    font-weight: 200;
    letter-spacing: 0.8px;
}
#section2 .left-column .info-item + .info-item {
    margin-top: 60px;
}
#section2 .left-column .info-item span:not(.badge) {
    font-family: "Urbanist", sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
}
#section2 .left-column .info-item span.badge {
    padding: 5px 10px;
    border: 1px solid #fff;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 200;
}
#section2 .fade-in-item {
    opacity: 0;
    transform: translateY(30px)
}
#section2 .right-column {
    position: relative;
}
#section2 .right-column .right-column-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
}
#section2 .right-column .right-column-bg img {
    max-width: unset;
    width: auto;
    height: 100%;
}
#section2 .right-column .map-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    overflow: hidden; 
    opacity: 0;
    visibility: hidden;
    z-index: 10;
}
#section2 .right-column .map-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#section2 .right-column .right-column-city-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../../images/user/bg_sec02.jpg') no-repeat center center / cover;
    /* z-index: 0; */
}
#section2 .right-column .map-overlay-image-img {
    position: absolute;
    top: 15.2%;
    left: 13.0%;
    display: block;
    width: 77%;
    object-fit: contain;
    object-position: center;
    z-index: 1;
    filter: drop-shadow(0 0 0 rgba(0, 173, 239, 0));
}
#section2 .right-column .map-center-text span {
    display: block;
}
#section2 .right-column .map-marker-text {
    position: absolute;
    color: #c0dcf3;
    font-size: 14px;
    font-weight: 200;
    text-shadow: 
        -2px -2px 0 #101218,
        2px -2px 0 #101218,
        -2px 2px 0 #101218,
        2px 2px 0 #101218;
    white-space: nowrap;
    line-height: 1.4;
    text-align: center;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;

}
#section2 .map-marker-text.marker-txt01 {
    top: 22%;
    left: 10%;
}
#section2 .map-marker-text.marker-txt02 {
    top: 9.7%;
    left: 52.4%;
}
#section2 .map-marker-text.marker-txt03 {
    top: 16.7%;
    left: 66%;
}
#section2 .map-marker-text.marker-txt04 {
    top: 13%;
    left: 80%;
}
#section2 .map-marker-text.marker-txt05 {
    top: 36%;
    left: 84.3%;
}
#section2 .map-marker-text.marker-txt06 {
    top: 64.8%;
    left: 72.5%;
}
#section2 .map-marker-text.marker-txt07 {
    top: 76.7%;
    left: 53.5%;

}
#section2 .map-marker-text.marker-txt08 {
    top: 73%;
    left: 29%;
}
#section2 .map-marker-text.marker-txt09 {
    top: 65%;
    left: 22%;

}
#section2 .map-marker-text.marker-txt10 {
    top: 82%;
    left: 18.8%;
}

/* section3-1 */
.section3-1{
    border-top: 1px solid #a0a5b5;
    min-height: 100vh;
}
.section-header {
    position: relative;
    padding: 0 60px 60px 60px;
}
.txt-fill-effect {
    margin-top: 30px;
    text-align: center;
}
.fill-txt {
    line-height: 1.3;
    font-size: 48px;
    font-weight: 600;
    color: rgb(255, 255, 255, 0.2);
    word-break: keep-all;
    background: linear-gradient(to right, #fff, #fff) no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 0%;
    transition: background-size cubic-bezier(.1, .5, .5, 1) 0.5s;
}
.section3-1 .goal-visuals{
    position: relative; 
    height: 37.34vw;
}
.section3-1 .panel {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section3-1 .panel:not(.first) {
    opacity: 0;
    visibility: hidden;
}
.section3-1 .panel.first{
    background:url('../../images/user/bg_sec03_01_left.jpg') no-repeat center/cover;
}
.section3-1 .panel.last{
    background:url('../../images/user/bg_sec03_01_right.jpg') no-repeat center/cover;
}
.section3-1 .scroll-list{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 1;
    font-size: 30px;
    color: #fff;
}
.section3-1 .scroll-list li{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    transition: opacity 0.4s ease-in-out;
}
.section3-1 .scroll-list li img{
    margin-bottom: 45px;
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.8));
}
.section3-1 .scroll-list li .visual-text {
    text-align: center;
    font-size: 40px;
    font-weight: 200;
    text-shadow: 0px 0px 6px #000
}
.section3-1 .scroll-list li img,
.section3-1 .scroll-list li .visual-text {
    transition: transform 0.5s ease-in-out;
}
.section3-1 .scroll-list li .visual-text strong {
    display: block;
    margin-top: 25px;
    font-size: 64px;
    font-weight: 700;
}
.section3-1 .scroll-list li.on{
    background: url('../../images/user/bg_bi_sm.png') rgba(0, 0, 0, 0.5) center no-repeat;
}
.section3-1 .scroll-list li.on img,
.section3-1 .scroll-list li.on .visual-text {
    transform: translateY(-20px);
    transition: transform 0.5s ease-in-out;
}

/* section3-2 */
.section3-2 {
    position: relative;
    border-top: 1px solid #88898c;
}
.section3-2 .section-tit {
    padding: 55px 0 55px 60px;
}
.section3-2 .strategy-items {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.section3-2 .strategy-items .strategy-item {
    flex-shrink: 0;
}
.section3-2 .strategy-items .strategy-item {
    position: relative;
    display: flex;
    padding: 60px;
    border-top: 1px solid #88898c;
    overflow: hidden;
    background: #101218;
    box-sizing: border-box;
}
.section3-2 .strategy-item:nth-child(1) { z-index: 1; }
.section3-2 .strategy-item:nth-child(2) { z-index: 2; }
.section3-2 .strategy-item:nth-child(3) { z-index: 3; }
.section3-2 .strategy-item:nth-child(4) { z-index: 4; }
.section3-2 .strategy-items .strategy-item .si-section {
    width: 10%;
}
.section3-2 .strategy-items .strategy-item .section-num {
    font-family: "Urbanist", sans-serif;
    font-size: 20px;
    font-weight: 400;
}
.section3-2 .strategy-items .strategy-item .section-num .blue {
    color: #1b79c6;
    font-weight: 700;
}
.section3-2 .strategy-items .strategy-item .section-title {
    margin-top: 10px;
    font-family: "Urbanist", sans-serif;
    font-size: 16px;
    font-weight: 200;
}
.section3-2 .strategy-items .strategy-item .bi-title {
    font-size: 48px;
    font-weight: 100;
}
.section3-2 .strategy-items .strategy-item .bi-title strong {
    display: block;
    margin-top: 20px;
    font-weight: 700;
}
.section3-2 .strategy-items .strategy-item .si-info-section {
    flex: 1 1;
    padding-right: 30px;
}
.section3-2 .strategy-items .strategy-item .bi-desc {
    margin-top: 75px;
    line-height: 1.4;
    font-size: 28px;
    font-weight: 100;
    word-break: keep-all;
}
.section3-2 .strategy-items .strategy-item .bi-desc li {
    position: relative;
    padding-left: 35px;
}
.section3-2 .strategy-items .strategy-item .bi-desc li + li {
    margin-top: 10px;
}
.section3-2 .strategy-items .strategy-item .bi-desc li::before {
    position: absolute;
    left: 0;
    content: '✓';
}
.section3-2 .strategy-items .strategy-item .si-img {
    width: 43.1%;
    height: 100%;
    overflow: hidden;
}
.section3-2 .strategy-items .strategy-item .si-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* section4 */
#section4 {
    border-top: 1px solid #88898c;
}
#section4 .pin-container {
    position: relative;
    /*display: flex;
    justify-content: space-between;*/
    z-index: 0;
}
  #section4,
  #section4 .pin-container { 
    height: calc(100vh - var(--headerH, 100px)); 
    min-height: calc(48.24vw - 100px);
  }
#section4 .pin-container .zone-wrap {
    display: flex;
    justify-content: space-between;
    position: absolute;
    inset: 0;
    opacity: 0;
    /*pointer-events: none;*/ /* 보이지 않는 슬라이드는 클릭 막기 */
    height: 100%;
}
#section4 .pin-container .zone-wrap.is-active{
    opacity: 1;
    /* pointer-events: auto; */
    z-index: 1;
}
@media (min-width: 1024px){
  #section4.is-pin-active{
    overflow: visible !important;   /* ← 핵심 */
    position: relative;
    z-index: 2;                     /* 아래 섹션 위에 오도록 */
  }
   #section4.is-pin-active .pin-container { 
    pointer-events: none !important;     /* 컨테이너는 이벤트를 받지 않음 */
  }
  #section4.is-pin-active .pin-container > * {
    pointer-events: auto !important;     /* 자식들은 정상적으로 이벤트 수신 */
  }
}
#section4 .zone-info {
    flex-basis: 41.67%;
    padding: 60px;
    align-self:stretch;
    overflow-y: auto;
}
#section4 .zone-info .zone-tabs {
    display: flex;
    gap: 5px;
}
#section4 .zone-tabs a {
    display: inline-block;
    padding: 13px 0;
    border-radius: 6px;
    width: 142px;
    text-align: center;
    font-size: 20px;
    color: #a0a5b5;
    background: #2d313c;
    pointer-events: none;
}
#section4 .visual {
    position: relative;
    flex-basis: 58.33%;
}
#section4 #zone-wrap01 .zone-tabs li:first-child a {
    background: #0066ba;
    color: #fff;
}
#section4 #zone-wrap02 .zone-tabs li:nth-child(2) a {
    background: #00bda2;
    color: #fff;
}
#section4 #zone-wrap03 .zone-tabs li:nth-child(3) a {
    background: #8784d6;
    color: #fff;
}
#section4 .zone-content .zone-tit {
    margin-top: 55px;
    font-size: 54px;
    font-weight: 700;
}
#section4 .zone-content .zone-tit p {
    margin-bottom: 25px;
    font-family: "Urbanist", sans-serif;
    font-size: 32px;
    font-weight: bold;
}

#section4 .zone-content .zone-desc {
    margin-top: 45px;
    font-weight: 100;
}
#section4 .zone-content .zone-detail {
    margin-top: 70px;
}
#section4 .zone-content .zone-detail img {
    margin-bottom: 45px;
}
#section4 .zone-content .zone-detail dl {
    display: flex;
    align-items: center;
}
#section4 .zone-content .zone-detail dl + dl {
    margin-top: 15px;
}
#section4 .zone-content .zone-detail dl dt {
    font-family: "Urbanist", sans-serif;
    font-weight: 600;
    width: 160px;
}
#section4 .zone-content .zone-detail dl dd {
    line-height: 1.7;
    font-weight: 100;
}
#section4 .zone-content .zone-detail dl dd .badge {
    display: inline-block;
    margin-right: 8px;
    padding: 3px 0;
    border: 1px solid #fff;
    border-radius: 14px;
    vertical-align: middle;
    line-height: normal;
    width: 75px;
    text-align: center;
    font-size: 16px;
}
#section4 .visual {
    position: relative;
    border-left: 1px solid #a0a5b5;
}
#section4 .visual .minimap {
    position: absolute;
    top: 20px;
    left: 20px;
    border: 1px solid #424755;
    border-radius: 10px;
    width: 280px;
    height: 250px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 2;
}
#section4  {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 5;
}
#section4 .visual .render {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#section4 .visual .render img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#section4 .visual .render > .zone {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
}
#section4 .visual .render > .zone.active {
    opacity: 1;
    pointer-events: auto;
}
#section4 .visual svg{
    padding: 10% 7% 8% 5%;
}
#section4 .visual .st0 {
    isolation: isolate;
}
#section4 .visual .st1{
    fill: none;
}
#section4 .visual .st1 {
    fill-rule: evenodd;
}
#section4 .visual .st0{
    fill: transparent;
    stroke: #fff;
    stroke-width: 3px;
    transition: fill 0.4s ease-in-out;
}
#section4 .visual .zone1 {
    fill: rgba(0,102,186,0.2);
}
#section4 .visual .zone2 {
    fill: rgba(0,189,162,0.2);
}
#section4 .visual .zone3 {
    fill: rgba(135,132,214,0.2);
}
#section4 .visual .zone1.on{
    fill: rgba(0,102,186,0.8);
}
#section4 .visual .zone2.on{
    fill: rgba(0,189,162,0.8);
}
#section4 .visual .zone3.on{
    fill: rgba(135,132,214,0.8);
}
#section4 .visual .etc{
    pointer-events: none;
    cursor: default;
}
#section4 .visual .zone1 {
    fill: rgba(0,102,186,0.2);
}
#section4 .visual .zone2 {
    fill: rgba(0,189,162,0.2);
}
#section4 .visual .zone3 {
    fill: rgba(135,132,214,0.2);
}
#section4 .visual .zone1.on{
    fill: rgba(0,102,186,0.8);
}
#section4 .visual .zone2.on{
    fill: rgba(0,189,162,0.8);
}
#section4 .visual .zone3.on{
    fill: rgba(135,132,214,0.8);
}
#section4 .visual .etc{
    pointer-events: none;
    cursor: default;
}













/* #section4 .zone-container .st0:hover{
    cursor: pointer;
} */









/*#section4 {
    display: flex;
    justify-content: space-between;
    z-index: 5;
    border-top: 1px solid #88898c;
}
#section4 .zone-info {
    flex-basis: 41.67%;
    padding: 60px;
}
#section4 .zone-container {
    position: relative;
    flex-basis: 58.33%;
}
#section4 .tab-list {
    display: flex;
    gap: 5px;
}
#section4 .tab-list button {
    padding: 13px 0;
    border-radius: 6px;
    width: 142px;
    font-size: 20px;
    color: #a0a5b5;
    background: #2d313c;
}
#section4 .tab-list .list01.active button {
    background: #0066ba;
    color: #fff;
}
#section4 .tab-list .list02.active button {
    background: #00bda2;
    color: #fff;
}
#section4 .tab-list .list03.active button {
    background: #8784d6;
    color: #fff;
}
#section4 .tab-content .tab-panel {
    margin-top: 55px;
}
#section4 .tab-content .tab-panel .zone-tit {
    font-size: 54px;
    font-weight: 700;
}
#section4 .tab-content .tab-panel .zone-tit p {
    margin-bottom: 25px;
    font-family: "Urbanist", sans-serif;
    font-size: 32px;
    font-weight: bold;
}
#section4 .tab-content .tab-panel .zone-desc {
    margin-top: 55px;
    font-weight: 100;
}
#section4 .tab-content .tab-panel .zone-detail {
    margin-top: 120px;
}
#section4 .tab-content .tab-panel .zone-detail img {
    margin-bottom: 45px;
}
#section4 .tab-content .tab-panel .zone-detail dl {
    display: flex;
    align-items: center;
}
#section4 .tab-content .tab-panel .zone-detail dl + dl {
    margin-top: 15px;
}
#section4 .tab-content .tab-panel .zone-detail dl dt {
    font-family: "Urbanist", sans-serif;
    font-weight: 600;
    width: 160px;
}
#section4 .tab-content .tab-panel .zone-detail dl dd {
    font-weight: 100;
}
#section4 .zone-container {
    position: relative;
    border-left: 1px solid #a0a5b5;
}
#section4 .zone-container .minimap {
    position: absolute;
    top: 20px;
    left: 20px;
    border: 1px solid #424755;
    border-radius: 10px;
    width: 280px;
    height: 250px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 2;
}
#section4 .zone-container .zone-list {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#section4 .zone-container .zone-list img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#section4 .zone-container .zone-list > .zone {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
}
#section4 .zone-container .zone-list > .zone.active {
    opacity: 1;
    pointer-events: auto;
}
#section4 .zone-container svg{
    padding: 10% 7% 8% 5%;
}
#section4 .zone-container .st0 {
    isolation: isolate;
}
#section4 .zone-container .st1{
    fill: none;
}
#section4 .zone-container .st1 {
    fill-rule: evenodd;
}
#section4 .zone-container .st0{
    fill: transparent;
    stroke: #fff;
    stroke-width: 3px;
    transition: fill 0.4s ease-in-out;
}
#section4 .zone-container .st0:hover{
    cursor: pointer;
}
#section4 .zone-container .zone1 {
    fill: rgba(0,102,186,0.2);
}
#section4 .zone-container .zone2 {
    fill: rgba(0,189,162,0.2);
}
#section4 .zone-container .zone3 {
    fill: rgba(135,132,214,0.2);
}
#section4 .zone-container .zone1.on{
    fill: rgba(0,102,186,0.8);
}
#section4 .zone-container .zone2.on{
    fill: rgba(0,189,162,0.8);
}
#section4 .zone-container .zone3.on{
    fill: rgba(135,132,214,0.8);
}
#section4 .zone-container .etc{
    pointer-events: none;
    cursor: default;
}*/

/* section5 */
#section5 {
    border-top: 1px solid #a0a5b5;
    background: url('../../images/user/bg_sec05_2.png') left center / auto 100% no-repeat !important;
    background-attachment: fixed !important;
}
#section5 .feature-list {
    margin: 0 auto;
    width: 66.6%;
}
#section5 .feature-list li {
    position: relative;
    padding: 25px 0;
    text-align: center;
    cursor: pointer;
}
#section5 .feature-list li p {
    font-weight: 200;
    opacity: 0.5;
    transition: all 0.3s;
}
#section5 .feature-list li.active p{
    font-weight: 500;
    opacity: 1;
}
#section5 .feature-list li + li {
    border-top: 1px solid rgba(255,255,255,0.5);
}
#section5 .feature-list li span {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-family: "Urbanist", sans-serif;
    font-size: 20px;
    font-weight: 600;
}
#section5 .feature-list li img {
    position: absolute;
    opacity: 0;
    transition: all 0.5s;
    z-index: -1;
}
#section5 .feature-list li:first-child img {
    top: -79%;
    right: -9%;
}
#section5 .feature-list li:nth-child(2) img {
    top: -102%;
    right: -8%;
}
#section5 .feature-list li:nth-child(3) img {
    top: -58%;
    right: -9.5%;
}
#section5 .feature-list li:nth-child(4) img {
    top: -136%;
    right: -9%;
}
#section5 .feature-list li:nth-child(5) img {
    top: -178%;
    right: -10%;
}
#section5 .feature-list li.active img {
    opacity: 1;
    transition: all 0.5s;
}

/* section6 */
#section6 {
    position: relative;
}

/* section6-1 */
.section6-1 {
    position: relative;
    min-height: calc(48.24vw - 100px);
}
.section6-1 .bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../../images/user/bg_sec06.jpg') center 100% no-repeat !important;
    background-size:  cover !important;
}
.section6-1 .section-header, .section6-2 .section-header {
    padding-bottom: 0;
}
.section6-1 .txt-fill-effect, .section6-2 .txt-fill-effect {
    text-align: left;
}
.section6-1 .stats-grid-wrapper {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    --gap: 100px;
    gap: var(--gap);
    justify-content: space-between;
    margin-top: 75px;
    padding: 0 60px;
    width: 100%;
}
.section6-1 .stats-grid-wrapper .step {
    flex: 0 1 calc((100% - var(--gap)) / 2);
}
.section6-1 .stats-grid-wrapper .step .source-note {
    margin-top: 20px;
    text-align: right;
    font-size: 14px;
    font-weight: 200;
    color: #878b9d;
}
.section6-1 .stats-grid-wrapper .stats-tit {
    display: flex;
    align-items: center;
    font-size: 30px;
    font-weight: 600;
}
.section6-1 .stats-grid-wrapper .stats-tit span {
    margin-right: 45px;
    padding-bottom: 5px;
    border-bottom: 2px solid #fff;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -1px;
}
.section6-1 .stats-grid-wrapper .stats-grid {
    display: flex;
    flex-wrap: wrap;
    --gap: 10px;
    gap: var(--gap);
    margin-top: 25px;
}
.section6-1 .stats-grid-wrapper .stat-card {
    display: flex;
    flex-direction: column; 
    align-items: flex-start;
    justify-content: space-between; 
    flex: 0 1 calc((100% - var(--gap)) / 2);
    padding: 30px;
    border-radius: 16px;
    height: 185px;
    background: rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
}
.section6-1 .stat-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 200;
}
.section6-1 .stat-card .stat-label::before {
    content: '';
    display: inline-block;
}
.section6-1 .stat-card:first-child .stat-label::before {
    width: 20px;
    height: 22px;
    background: url('../../images/user/ico_sec06_01.png') no-repeat;
}
.section6-1 .stat-card:nth-child(2) .stat-label::before {
    width: 20px;
    height: 22px;
    background: url('../../images/user/ico_sec06_02.png') no-repeat;
}
.section6-1 .stat-card:nth-child(3) .stat-label::before {
    width: 22px;
    height: 22px;
    background: url('../../images/user/ico_sec06_04.png') no-repeat;
}
.section6-1 .stat-card:nth-child(4) .stat-label::before {
    width: 22px;
    height: 22px;
    background: url('../../images/user/ico_sec06_03.png') no-repeat;
}
.section6-1 .stat-card .stat-value {
    margin-left: auto;
    font-family: "Urbanist", sans-serif;
    font-size: 65px;
    font-weight: bold;
}
.section6-1 .stat-card:nth-child(2) .stat-value, .section6-1 .stat-card:nth-child(3) .stat-value {
    background: linear-gradient(90deg, #3aa9ff, #8a5cff);
    -webkit-background-clip: text; 
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.section6-1 .stat-card .stat-value .unit {
    font-family: 'Pretendard';
    font-weight: 700;
    color: #fff;

}
.section6-1 .stat-card .stat-value .sub-unit {
    margin-left: 5px;
    font-family: 'Pretendard';
    font-size: 24px;
    font-weight: 200;
    background: transparent;
    -webkit-background-clip:unset;
    background-clip: unset;
    -webkit-text-fill-color: #fff;
}

/* .section6-1 .stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    grid-template-areas:
        "empty1 empty2 card1 card2 card3"
        "card4 card5 watermark watermark card6";
    gap: 10px; 
    align-items: start; 
    position: relative; 
    margin-top: -120px;
    margin-left: auto;
    margin-right: 60px;
    width: 81.8%;
    z-index: 2;
}
.section6-1 .stat-card {
    display: flex;
    flex-direction: column; 
    align-items: flex-start;
    justify-content: space-between; 
    aspect-ratio: 1 / 1;
    padding: 30px 30px 40px;
    border-radius: 12px; 
    background-color: #1a1c24;
    backdrop-filter: blur(5px); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.section6-1 .grid-watermark {
    grid-area: watermark; 
    background-color: transparent; 
    color: #1a1c24;
    pointer-events: none; 
    white-space: nowrap; 
    z-index: -1; 
    line-height: 1; 
    display: flex;
    justify-content: flex-end;
    align-items: center; 
    text-align: right;
    font-family: "Urbanist", sans-serif;
    font-size: 5.2vw;
    font-weight: 700;
}
.section6-1 .area-card2, .section6-1 .area-card4 {
    background: linear-gradient(rgba(39,43,61, 0.5) , rgba(22,53,79,0.5) 50%);
}
.section6-1 .area-empty1 { grid-area: empty1; }
.section6-1 .area-empty2 { grid-area: empty2; }
.section6-1 .area-card1 { grid-area: card1; }
.section6-1 .area-card2 { grid-area: card2; }
.section6-1 .area-card3 { grid-area: card3; }
.section6-1 .area-card4 { grid-area: card4; }
.section6-1 .area-card5 { grid-area: card5; }
.section6-1 .area-card6 { grid-area: card6; } 
.section6-1 .stat-card .stat-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}
.section6-1 .stat-card .stat-label::before {
    content: '';
    display: inline-block;
}
.section6-1 .area-card1 .stat-label::before {
    width: 20px;
    height: 22px;
    background: url('../../images/user/ico_sec06_01.png') no-repeat;
}
.section6-1 .area-card2 .stat-label::before {
    width: 22px;
    height: 20px;
    background: url('../../images/user/ico_sec06_02.png') no-repeat;
}
.section6-1 .area-card3 .stat-label::before {
    width: 22px;
    height: 22px;
    background: url('../../images/user/ico_sec06_03.png') no-repeat;
}
.section6-1 .area-card4 .stat-label::before {
    width: 22px;
    height: 22px;
    background: url('../../images/user/ico_sec06_04.png') no-repeat;
}
.section6-1 .area-card5 .stat-label::before {
    width: 21px;
    height: 22px;
    background: url('../../images/user/ico_sec06_05.png') no-repeat;
}
.section6-1 .area-card6 .stat-label::before {
    width: 23px;
    height: 23px;
    background: url('../../images/user/ico_sec06_06.png') no-repeat;
}
.section6-1 .stat-card .stat-value {
    display: flex;
    align-items: baseline;
    margin-left: auto;
}
.section6-1 .stat-card .stat-value {
    font-family: "Urbanist", sans-serif;
    font-size: 65px;
    font-weight: bold;
}
.section6-1 .stat-card .stat-value .unit {
    font-family: 'Pretendard';
    font-weight: 700;
}
.section6-1 .stat-card .stat-value .sub-unit {
    margin-left: 5px;
    font-family: 'Pretendard';
    font-size: 24px;
    font-weight: 200;
} */

/* section6-2 */
.section6-2 {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: calc(100vh - 100px);
    min-height: calc(48.24vw - 100px);
    background-color: #101218;
}
.section6-2 .bi {
    position: absolute;
    width: 36.4%;
    top: 10%;
    right: 6%;
}
.section6-2 .bi-rotate-inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rotate360 7s linear infinite;
    transform-origin: center center;
}

@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.section6-2 .timeline-swiper {
    margin-top: 10.5%;
    margin-left: 60px;
}
.section6-2 .timeline-swiper .swiper-btn-wrapper {
    display: flex;
    gap: 20px;
}
.section6-2 .timeline-swiper .swiper-btn-wrapper > div {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid #fff;
    border-radius: 25px;
    width: 100px;
    height: 50px;
}
.section6-2 .timeline-swiper .swiper-button-next:after, .section6-2 .timeline-swiper .swiper-button-prev:after {
    display: none;
}
.section6-2 .timeline-swiper .swiper-btn-wrapper > div button {
    position: static !important;
    margin: 0;
    width: 50%;
    height: 100%;
    background: url(../../images/user/ico_prev.png) center center no-repeat;
}
.section6-2 .timeline-swiper .swiper-button-next {
    border-right: 1px solid #fff;
    transform: rotate(180deg);
}
.section6-2 .timeline-swiper .swiper-autoplay-toggle {
    border: 1px solid #fff;
    border-radius: 100%;
    text-indent: -9999px;
    font-size: 0;
    width: 50px;
    height: 50px;
    background: url(../../images/user/ico_pause.png) center center no-repeat;
    background-color: transparent;
}
#section6-2 .swiper-autoplay-toggle.is-paused{
    background: url(../../images/user/ico_play.png) center center no-repeat;
}
#section6-2 .timeline-swiper .swiper-wrapper {
    position: relative;
    margin-top: 50px;
    width: fit-content;
}
#section6-2 .timeline-swiper .swiper-wrapper::before {
    content: "";
    position: absolute;
    top: 51px;
    right: 0;
    left: 0;
    height: 1px;
    background: #fff;
    pointer-events: none;
    width: 100%;
}
#section6-2 .timeline-swiper .swiper-slide {
    width: 510px;
}
.section6-2 .date-circle {
    position: relative;
    font-family: "Urbanist", sans-serif;
    font-weight: bold;
    color: #1b79c6;
}
.section6-2 .date-circle.pulse::before {
    content: '';
    display: block;
    position: absolute;
    top: 46px;
    left : 7px;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    background: #1b79c6;
    animation: pulse-animation 2s infinite;
}
@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0px rgba(27, 121, 198, 0.7);
    }
    100% {
        box-shadow: 0 0 0 20px rgba(27, 121, 198, 0);
    }
}
.section6-2 .date-circle::after {
    content: '';
    display: block;
    margin-top: 15px;
    border: 2px solid #fff;
    border-radius: 100%;
    width: 26px;
    height: 26px;
    box-sizing: border-box;
}
.section6-2 .content {
    margin-top: 20px;
    width: 100%;
}
.section6-2 .point-text {
    margin-bottom: 15px;
    line-height: 1.3;
    font-weight: 100;
}
.section6-2 .detail-text {
    font-size: 16px;
    font-weight: 100;
    color: #bdc0ce;
}
/* .section6-2 .horizontal-scroll-section {
    overflow: hidden;
    padding: 0;
}

.section6-2 .pin-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.section6-2 .progress-wrapper {
    display: flex;
    margin-top: 15%;
    height: 100%;
    align-items: center;
    position: relative;
}
.section6-2 .section-title-fixed {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    text-align: left;
    width: 300px;
}
.section6-2 .timeline-container {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 60px;
}
.section6-2 .timeline-track {
    display: flex;
    white-space: nowrap;
    position: relative;
    z-index: 5;
}
.section6-2 .timeline-item {
    position: relative;
    width: 510px;
    box-sizing: border-box;
}
.section6-2 .date-circle {
    position: relative;
    font-family: "Urbanist", sans-serif;
    font-weight: bold;
    color: #1b79c6;
}
.section6-2 .date-circle.pulse::before {
    content: '';
    display: block;
    position: absolute;
    top: 46px;
    left : 7px;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    background: #1b79c6;
    animation: pulse-animation 2s infinite;
}
@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0px rgba(27, 121, 198, 0.7);
    }
    100% {
        box-shadow: 0 0 0 20px rgba(27, 121, 198, 0);
    }
}
.section6-2 .date-circle::after {
    content: '';
    display: block;
    margin-top: 15px;
    border: 2px solid #fff;
    border-radius: 100%;
    width: 26px;
    height: 26px;
    box-sizing: border-box;
}
.section6-2 .content {
    margin-top: 20px;
    width: 100%;
}
.section6-2 .point-text {
    margin-bottom: 15px;
    line-height: 1.3;
    font-weight: 100;
}
.section6-2 .detail-text {
    font-size: 16px;
    font-weight: 100;
    color: #bdc0ce;
}
.section6-2 .timeline-line {
    position: absolute;
    top: 51px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
    z-index: 1;
} */

/* section7 */
#section7 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: url('../../images/user/bg_sec07.png') center center no-repeat !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    /* overflow:auto; */
    overflow: hidden;
    height: auto;
}
#section7 .logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
#section7 .logo-container .logo-item {
    position: relative;
    width: 830px;
    height: 310px;
}
#section7 .logo-container .logo-item .inner {
    position: absolute;
    top: 35%;
    left: 135px;
    margin: 0 auto;
    text-align: center;
}
#section7 .logo-container .logo-item.sh .inner {
    left: auto;
    right: 135px;
}
#section7 .logo-container .logo-item img {
    margin: 0 auto;
    width: fit-content;
}
#section7 .logo-container .logo-item {
    border-radius: 155px;
    background: linear-gradient(rgba(0,0,0,0.5) 50%, rgba(0,102,186, 0.5));
    right: -145px;
}
#section7 .logo-container .logo-item.sh {
    background: linear-gradient(rgba(0,0,0,0.5) 50%, rgba(20,109,96, 0.5));
    right: auto;
    left: -145px;
}
#section7 .logo-container .intersect {
    z-index: 2;
}
#section7 .logo-container .logo-item .logo-subtext {
    margin-top: 25px;
    font-size: 20px;
    font-weight: 100;
}
#section7 > .txt-fill-effect {
    margin-top: 85px;
}
#section7 .partner {
    display: flex;
    gap: 140px;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    height: 120px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
}
#section7 .partner ul {
    display: flex;
    gap: 140px;
    align-items: center;
}

#section8 .brand-section {
    display: flex;
    gap: 10px;
    padding: 0 60px;
    font-size: 20px;
}
#section8 .brand-section > div {
    padding: 30px 40px;
    border: 1px solid #a0a5b5;
    border-radius: 12px;
}
#section8 .brand-section .brand-info {
    width: 26%;
}
#section8 .brand-section .brand-element {
    width: 28.4%;
}
#section8 .brand-section .brand-color {
    display: flex;
    /* gap: 55px; */
    justify-content: space-between;
    width: 45.6%;
}
#section8 .brand-section .brand-info img {
    margin-bottom: 35px;
}
#section8 .brand-section .brand-info .label {
    display: block;
    padding: 5px 10px;
    border-radius: 12px;
    width: fit-content;
    font-family: "Urbanist", sans-serif;
    font-size: 12px;
    background: #424755;
}
#section8 .brand-section .brand-info p {
    margin-top: 20px;
    line-height: 1.5;
}
#section8 .brand-section .brand-info p span {
    font-family: "Urbanist", sans-serif;
}
#section8 .brand-section .brand-element .element-item {
    display: flex;
    align-items: center;
}
#section8 .brand-section .brand-element .element-item + .element-item {
    margin-top: 45px;
}
#section8 .brand-section .brand-element .element-item > div {
    width: 47.9%;
}
#section8 .brand-section .brand-color .color-palette {
    display: flex;
    align-items: stretch;
    gap: 30px;
    width: 51.3%;
}
#section8 .brand-section .brand-color .color-swatch-vertical {
    display: flex;
    gap: 2px;
    font-size: 12.2px;
    font-weight: 100;
}
#section8 .brand-section .brand-color .color-swatch-vertical > div {
    display: flex;
    justify-content: center;
    position: relative;
    padding-top: 20px;
    border-radius: 4px;
    width: 42px;
    height: 100%;
}
#section8 .brand-section .brand-color .color-swatch-vertical div:first-child {
    background: #0066ba;
}
#section8 .brand-section .brand-color .color-swatch-vertical div:nth-child(2) {
    background: #00bda2;
}
#section8 .brand-section .brand-color .color-swatch-vertical div:last-child {
    background: #8784d6;
}
#section8 .brand-section .brand-color .color-swatch-vertical > div span {
    writing-mode: vertical-rl;
}
#section8 .brand-section .brand-color .color-swatch-vertical > div span em {
    font-style:normal;
}
#section8 .brand-section .brand-color .color-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 140px;
    font-size: 12px;
}
#section8 .brand-section .brand-color .color-details .color-item {
    line-height:1.5;
    font-weight: 100;
}
#section8 .brand-section .brand-color .color-details .color-item span {
    display: inline-block;
    width: 52%;
}
#section8 .brand-section .brand-color .brand-values {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 48.7%;
}
#section8 .brand-section .brand-color .brand-values .value-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-left: 10px;
    height: 33.3%;
    font-weight: 200;
}
#section8 .brand-section .brand-color .brand-values .value-item:nth-child(2) {
    height: 33.4%;
}
#section8 .brand-section .brand-color .brand-values .value-item + .value-item {
    border-top: 1px solid #a0a5b5;
}
#section8 .brand-section .brand-color .brand-values .value-item .chip {
    border-radius: 5px;
    width: 10px;
    height: 20px;
    background: #0066ba;
}
#section8 .brand-section .brand-color .brand-values .value-item:nth-child(2) .chip {
    background: #00bda2;
}
#section8 .brand-section .brand-color .brand-values .value-item:nth-child(3) .chip {
    background: #8784d6;
}
#section8 .video-section {
    margin: 75px 0 180px;
}
#section8 .video-section .video-player video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;  
    background: #000;
}
#section8 .video-section .video-player {
    position: relative;
    margin: 0 auto;
    border-radius: 12px;
    width: 50.1%;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

#section8 .video-section .video-player .controls {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#section8 .video-section .video-player .vs-video-btn {
    width: 67px;
    height: 67px;
    background: url('../../images/user/btn_video_play.png') no-repeat;
}
#section8 .video-section .video-player .vs-video-btn.pause {
    background: url('../../images/user/btn_video_pause.png') no-repeat;
}

#section9 {
    border-top: 1px solid #a0a5b5;
}
#section9 .inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: calc(48.24vw - 100px);
    background: url('../../images/user/bg_sec09.jpg') no-repeat center center;
    background-size: cover;
}
#section9 .section-header .section-txt {
    margin-top: 110px;
    line-height: 1.5;
    font-size: 32px;
    font-weight: 100;
}
#section9 .section-header .section-txt strong {
    font-weight: 600;
}
#section9 .txt-fill-effect {
    text-align: left;
}
#section9 .district-container {
    position: absolute;
    top: 50%;
    left: 66%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1068px;
}
#section9 .district-container > img { /* 임시 */
    width: 55.62vw;
}
#section9 .wave-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-69%, -39%);
    width: 31.25vw;
    height: 31.25vw;
}
#section9 .wave-wrap .wave {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
}
#section9 .wave-wrap .wave img {
    animation-name: pulse;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    max-width: unset;
}
#section9 .wave-wrap .wave1 img {
    animation-delay: 0s;
}
#section9 .wave-wrap .wave2 img {
    animation-delay: 0.3s;
}
#section9 .wave-wrap .wave3 img {
    animation-delay: 0.6s;
}
#section9 .wave-wrap .map-yongsan {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-41%, -50%);
}
#section9 .wave-wrap .map-yongsan img {
    max-width: unset;
}

#section9-2 {
    border-top: 1px solid #a0a5b5;
    height: auto !important;
}

/* 커졌다가 작아지는 애니메이션 효과 (Keyframes) */
@keyframes pulse {
    from { /* 0%와 동일 */
        transform: scale(1);
        opacity: 1;
    }
    to { /* 100%와 동일 */
        transform: scale(1.2);
        opacity: 0;
    }
}
footer {
    padding: 50px 60px 30px 60px;
    border-top: 1px solid #fff;
}
footer > div {
    display: flex;
    justify-content: space-between;
}
footer .footer-top .footer-main-title {
    font-family: "Urbanist", sans-serif;
    font-size: 100px;
}
footer .footer-top .footer-main-title img {
    display: none;
}
footer .footer-bottom {
    margin-top: 80px;
}
footer .footer-bottom .footer-copyright {
    display: flex;
    gap: 50px;
    font-size: 16px;
    color: #bdc0ce;
}
footer .footer-bottom .footer-copyright p:first-child {
    font-family: "Urbanist", sans-serif;
    font-weight: bold;
}
footer .footer-bottom .footer-copyright p:last-child {
    font-weight: 100;
}
footer .footer-bottom .footer-partners > div {
    display: flex;
    align-items: center;
    gap: 25px;
}
footer .footer-bottom .footer-partners .dot {
    display: inline-block;
    border-radius: 100%;
    width: 3px;
    height: 3px;
    background: #898c98;
}
.brand-info,
.brand-element,
.brand-color,
.video-section {
    opacity: 0;
}

.btn-top {
    display: flex;
    align-items: center;
    position: fixed;
    right: 45px;
    bottom: 60px;
    padding: 12px 10px 12px 5px;
    border-radius: 20px;
    color: #fff;
    background: transparent;
    transform: rotate(90deg);
    font-family: "Urbanist", sans-serif;
    font-size: 16px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.15);
    z-index: 999;
}
.btn-top::before {
    content: '';
    display: inline-block;
    width: 26px;
    height: 16px;
    background: url('../../images/user/ico_top_btn.png') center center no-repeat;
    background-size: contain;
    transform: rotate(-90deg);
}