@charset "utf-8";


.imc {
    background: #242424;
}

.mb-150 {
    margin-bottom: calc(150 * var(--vw));
}

.pt-160 {
    padding-top: calc(160 * var(--vw));
}

.section_video{
    position: relative;
}
.section_video .video_sec{
    width: 100%;
    height: 0;
    padding-bottom: calc(885 * var(--vw));
}
.section_video > video{
    position: absolute;
    top: 0;
    left: 0;
}

/* infiniteRollSwiper :: S */
.imc__roll{  width: calc(1237 * var(--vw));
    position: absolute;
    top: 14%;
    left: 35.5%;}
.imc__roll .swiper-wrapper{align-items: center; transition-timing-function: linear}
.imc__roll .swiper-slide {width:calc(391 * var(--vw)); !important}
/* infiniteRollSwiper :: E */


.img02 {
    width:calc(1263 * var(--vw)) !important;
    margin: 0 auto calc(210 * var(--vw));
}

.SwiperSeciton {
     width: 100%;
     height: calc(1046 * var(--vw));
     overflow: hidden;
     position: relative;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat; /* 반복 방지 추가 */
 }

/* 2. 각 섹션별 배경 이미지만 개별 부여 */
.SwiperSeciton.slide01 {
    background-image: url("https://ndev.image.nbkorea.com/NBRB_PC/event/imc/NKMAIN2010/img_schoolbgv1.png");
    margin-bottom: calc(100 * var(--vw));
}

.SwiperSeciton.slide02 {
    background-image: url("https://ndev.image.nbkorea.com/NBRB_PC/event/imc/NKMAIN2010/img_market.png");
    margin-bottom: calc(100 * var(--vw));

}

.SwiperSeciton.slide03 {
    background-image: url("https://ndev.image.nbkorea.com/NBRB_PC/event/imc/NKMAIN2010/img_friendv1.png");
    margin-bottom: calc(100 * var(--vw));

}

.imc_clock {
    width: calc(116 * var(--vw)) !important;
    position: absolute;
    top:67%;
    left:88%;
    z-index: 10;
}

.img_smile {
    width: calc(116 * var(--vw)) !important;
    position: absolute;
    top: 66%;
    left: 79%;
    z-index: 10;
}

/**
 * 1. 애니메이션 공통 (JS에서 .on 추가 시 작동)
 * 매칭: jsScrollFadeIn으로 시작하는 모든 요소
 */
[class*='jsScrollFadeIn'] {
    transition: 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
}

/* 상단 이동 효과 (Up)
   매칭: .jsScrollFadeInUpImg-1, -2, -3 등 */
[class*='jsScrollFadeInUpImg'] {
    opacity: 0;
    transform: translateY(20px);
}
[class*='jsScrollFadeInUpImg'].on {
    opacity: 1;
    transform: translateY(0);
}

/* 줌 아웃 효과 (Zoom)
   매칭: .jsScrollFadeInZoomImg (section02 이미지) */
.jsScrollFadeInZoomImg {
    transform: scale(1.05);
    transition: 1.2s ease-out;
}
.jsScrollFadeInZoomImg.on {
    transform: scale(1);
}


/**
 * 2. 섹션 01 & 02 레이아웃
 * 매칭: .imc__section--01 클래스를 가진 상단 div들
 */
.imc__section--01 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(75 * var(--vw));
}

/* 섹션01 내부 이미지들 크기 */
.imc__section--01 .text01  { width: calc(567 * var(--vw)) !important; padding-bottom: calc(52 * var(--vw)); !important;}
.section01 .img03 { width: calc(749 * var(--vw)); padding-bottom: calc(55 * var(--vw));  !important;
    margin: auto;}
.imc__section--01 .img04  { width: calc(1170 * var(--vw)); padding-bottom: calc(192 * var(--vw));  !important;}

/**
 * 3. 이미지 줌 컨테이너
 * 매칭: .imgWrap__scale (이미지 줌 효과를 감싸는 부모)
 */

.imgWrap__scale {
    width: calc(1440 * var(--vw));
    overflow: hidden; /* scale 커질 때 밖으로 안 나가게 절단 */
    margin: 181px auto 45px;
}
.section02 .img07 { width: calc(744 * var(--vw)); !important;
    margin: auto;}



/**
 * 4. 섹션 05 슬라이드 (Swiper)
 * 매칭: .section__05 및 하위 Swiper 구성 요소
 */
.slide_wrap {
    display: flex;
    align-items: center;
    gap: calc(160 * var(--vw));
    justify-content: center;
    width: calc(1620 * var(--vw));
    margin: 140px auto;
}

.section__05 img { width: calc(824 * var(--vw)); }

.imc__singleSwiper {
    width: calc(640 * var(--vw));
    margin: 0 auto;
    overflow: hidden; /* 슬라이드 영역 제한 */
}

/* Swiper 페이지네이션(도트) 스타일 */
.jsSingleSwiperPagination01.swiper-pagination-bullets {
    display: flex;
    justify-content: center;
    position: absolute;
    z-index: 1;
    bottom: 7%;
    right: 21.5%;
}

.jsSingleSwiperPagination02.swiper-pagination-bullets {
    display: flex;
    justify-content: center;
    position: absolute;
    z-index: 1;
    bottom: 19%;
    left: 21.5%;
}

.section__05 .img10 {
    width: calc(668 * var(--vw));
    margin: 40px auto ;
}

.swiper-pagination-bullet {
    width: calc(16 * var(--vw));
    height: calc(16 * var(--vw));
    margin: 0 calc(5 * var(--vw));
    border-radius: 50%;
    opacity: 0.3;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #151415 !important;
}

/* 기타 유틸리티 */
.relative { position: relative; }

.detail {
    overflow: hidden;
    width: 100%;
}

.nkpre-outer-container {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 100%; /* 부모 너비에 맞춤 */
    max-width: 1920px; /* 원본 기준점 */
}

/* 2560px 이상 대응을 위해 필요시 max-width 조정 가능 */
@media (min-width: 1921px) {
    .nkpre-outer-container {
        max-width: 2560px;
    }
}

.nkpre-base-image {
    display: block;
    width: 100%;
    height: auto;
}

#nkpre-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10;
    pointer-events: none;
}

.nkpre-line-wrapper {
    position: absolute;
    width: 1px; height: 1px;
    z-index: 20;
}

.nkpre-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 30;
    transform: translate(-50%, -50%) !important; /* 항상 중앙 정렬 */
}

.nkpre-dot::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 16px;
    background-color: inherit;
    opacity: 0.3;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    animation: dotPulse 1s infinite ease-in-out;
}

@keyframes dotPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.1; }
}

.nkpre-path {
    visibility: hidden;
    stroke-dasharray: 1000; /* 임시 큰 값 */
    stroke-dashoffset: 1000;
}

.nkpre-line-svg {
    position: absolute;
    top: 0; left: 0;
    overflow: visible;
    z-index: 25;
}

/* --- 이미지 박스 기본 설정 --- */
.nkpre-reveal-image {
    position: absolute;
    opacity: 0; /* 초기 상태 숨김 */
    visibility: hidden; /* 영역은 차지하되 완전히 숨김 */
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    z-index: 40;
}

/* 감지 시 등장 클래스 (우선순위를 위해 부모와 결합하거나 !important 권장) */
.nkpre-reveal-image.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* --- 개별 요소 크기 및 위치 (요청하신 calc 방식 적용) --- */

/* L1 이미지 */
#nkpre-l1 .nkpre-reveal-image {
    width: calc(572 * var(--vw));
    transform: translate(-30%, -10%);
}

/* L2 이미지 */
#nkpre-l2 .nkpre-reveal-image {
    width: calc(560 * var(--vw));
    transform: translate(-10%, -93%);
}

/* L3 이미지 */
#nkpre-l3 .nkpre-reveal-image {
    width: calc(598 * var(--vw));
    transform: translate(-38%, -16%);
}

/* --- 해상도별 대응 (1920px) --- */
@media screen and (min-width: 1920px) {
    #nkpre-l1 .nkpre-reveal-image {
        transform: translate(-39%, -10%);
    }
    .jsSingleSwiperPagination02.swiper-pagination-bullets {
        bottom: 7%;
    }
}

/* --- 해상도별 대응 (2560px) --- */
@media screen and (min-width: 2560px) {
    #nkpre-l1 .nkpre-reveal-image {
        transform: translate(-39%, -10%); /* 요청하신 대로 2560에서 다시 -30% */
    }
    .jsSingleSwiperPagination02.swiper-pagination-bullets {
        bottom: 7%;
    }
}