/* 공통 */
/* 전체 인트로 레이어 */
body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "SCDream", 'NanumSquareAc', 'Noto Sans KR', sans-serif;
}

#intro-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: none;
}

#skip-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* 마우스 이벤트를 방해하지 않음 */
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.5s ease;
    backdrop-filter: blur(2px);
}

#skip-cursor span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #000;
}

/* 인트로 종료 시 커서 숨김 */
#intro-layer.finish #skip-cursor {
    opacity: 0 !important;
}

.intro-box {
    position: relative;
    z-index: 10;
    text-align: center;
    color: #fff;
}
.intro-logo {
    max-width: 500px; /* 로고 크기에 맞게 조절하세요 */
    width: 80%;       /* 모바일 고려 */
    height: auto;
    opacity: 0;       /* 스크립트에서 GSAP으로 나타나게 할 예정 */
    transform: translateY(20px); /* 살짝 아래에서 위로 올라오는 효과 */
}

.intro-line {
    width: 0;
    height: 1px;
    background: #fff;
    margin: 0 auto 20px;
}

.intro-text {
    font-size: 14px;
    letter-spacing: 5px;
    opacity: 0;
    font-weight: 200;
}

#intro-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
    /* 배경은 조각들이 담당 */
}

.intro-box {
    position: relative;
    z-index: 10;
    text-align: center;
}

/* 배경 분할 - 흰색 테마 */
.intro-bg-left,
.intro-bg-right {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: #ebebeb;
    z-index: 5;
    /* transition: transform ... 이 부분을 반드시 삭제하거나 아래처럼 none 처리하세요 */
    transition: none !important; 
    will-change: transform;
}

.intro-bg-left {
    left: 0;
}

.intro-bg-right {
    right: 0;
}

/* --- 헤더 레이아웃 --- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

/* [상태 1] 초기 투명 배경 */
.gnb-wrap {
    position: relative;
    height: 100px;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

.header-inner {
    max-width: 1750px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
}

/* 로고 및 메뉴 (초기 흰색) */
.logo {
    width: 271px;
    height: 70px;
    background: url('../img/logo_w.svg') no-repeat center / contain;
    transition: 0.3s;
}

.main-menu { display: flex; gap: 40px; list-style: none; }
.main-link {
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

/* 전화번호 영역 (초기 흰색) */
.top-utils { display: flex; align-items: center; gap: 25px; }
.tel { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 23px; }
.tel_ico_img {
    width: 28px;
    height: 27px;
    background: url('../img/tel_ico_w.png') no-repeat center / contain; /* 기본: 흰색 아이콘 */
    transition: background 0.3s ease;
}
.gnb-wrap.active .tel_ico_img,
.gnb-wrap.on-white .tel_ico_img{
    background: url('../img/tel_ico_c.png') no-repeat center / contain;
}
.header_btn{
    padding: 15px 20px;
    border: 1px solid #fff;
    text-align: center;
    display: inline-block;
    font-size: 14px;
    transition: 0.3s ease-in-out;
    color: #fff;
}

/* ==================================================
   [상태 2] 반전 상태 (.active 마우스오버 / .on-white 스크롤)
   배경이 흰색(#fff)이 되었을 때 요소들의 색상만 반전시킵니다.
================================================== */
.gnb-wrap.active, .gnb-wrap.on-white {
    background: #ffffff;
    height: 90px;
    border-bottom: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.visual_btn {
    padding: 15px 20px;
    border: 1px solid transparent;
    text-align: center;
    display: inline-block;
    font-size: 14px;
    transition: 0.3s ease-in-out;
    color: #fff;
    background: #b70101;
}

.visual_btn span {
    font-weight: 700;
}

.visual_btn:hover {
    background: #fff;
    color: #b70101;
    border: 1px solid #dcdcdc;
}
/* 로고/메뉴 텍스트 반전 */
.gnb-wrap.active .logo, .gnb-wrap.on-white .logo { background: url('../img/logo.svg') no-repeat center / contain; }
.gnb-wrap.active .main-link, .gnb-wrap.on-white .main-link { color: #222; }

/* 전화번호 영역 반전 */
.gnb-wrap.active .tel, .gnb-wrap.on-white .tel { color: #222; }

.gnb-wrap.active .visual_btn .v-arrow,
.gnb-wrap.on-white .visual_btn .v-arrow {
    background: rgba(255, 255, 255, 0.3);
}

#pc{}
#mb{display: none;}
#mb_flex{display: none;}
/* ==================================================
   [모바일/태블릿 반응형 - 1024px 이하]
================================================== */
@media screen and (max-width: 1024px) {
#pc{display: none;}
#mb{display: block;}
#mb_flex{display: flex;}
    /* 헤더 높이 조절 */
    .gnb-wrap {
        height: auto; /* 모바일에서 슬림하게 */
        padding: 25px 15px;
    }
    
    .gnb-wrap.active, .gnb-wrap.on-white {
        height: auto;
    }

    .header-inner {
        padding: 0;
    }

    /* 1. 메뉴 가리기 */
    .menu-area {
        display: none;
    }

    /* 2. 로고 사이즈 조절 */
    .logo {
        width: 37vw; /* 모바일 크기에 맞게 축소 */
        height: 12vw;
    }

    /* 3. 우측 유틸리티 구성 변경 */
    .top-utils {
        gap: 10px;
    }

    /* 전화번호 숫자는 가리고 아이콘만 노출 */
    .tel {
        display: none;
    }

    .tel {
        padding: 10px;
    }

    .tel_ico_img {
        width: 6vw;
        height: 6vw;
    }

    /* 청약안내 버튼 슬림화 */
    .top-utils .visual_btn {
        font-size: 2.5em;
    }
}

/* 기본 섹션 스타일 */
.section-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
    font-size: 40px;
}

/* 섹션 배경 재배치 */
#section1 {
    background: #fff;
}

#section2 {
    background: #008188; /* 기존 section4 배경 */
}

#section3 {
    background: linear-gradient(-45deg, #bca9af 0%, #7d889a 100%);
    position: relative;
}

.samll_bg_box {
    background: linear-gradient(-45deg, #bca9af, #7d889a);
    position: absolute;
    bottom: 0;
    right: 0;
    width: 400px;
    height: 300px;
}

#section4 {
    background: url('../img/main/section4_bg.jpg') no-repeat center 0; /* 기존 section6 배경 */
    background-size: cover;
}

#section5 {
    background: #fff;
}


#section6 { background: #fff; }


#section7 { background: #0d141b; height: auto !important; padding-top: 0 !important;}

/* =======================================
   SECTION 1 : 메인 비주얼
======================================= */
#section1 {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.main-visual {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

/* 배경 데코레이션 절대 배치 */
.deco-img {
    position: absolute;
    z-index: 1;
}
.deco-img.top-left {
    top: 0;
    left: 0;
    width: 35%; 
    max-width: 500px;
}
.deco-img.bottom-right {
    bottom: -25%;
    right: 9%;
    width: 25%;
    max-width: 400px;
}
.deco-img img {
    width: 100%;
    display: block;
}

/* 메인 콘텐츠 이너 레이아웃 (우측으로 밀고 간격 고정) */
.visual-inner {
    width: 100%;
    max-width: 1700px; /* 전체 너비를 살짝 넓혀서 여유 공간 확보 */
    margin: 0 auto;
    display: flex;
    justify-content: flex-end; /* 전체를 우측으로 밀어서 top-left 이미지 피함 */
    align-items: center;
    padding-right: 120px; /* 사이드바(90px) + 여백 확보 */
    gap: 80px; /* 텍스트와 이미지 사이의 간격을 단단히 고정 */
    position: relative;
    z-index: 10;
}

/* 좌측 텍스트 */
.visual-text {
    flex: 0 0 auto;
    text-align: left;
}
.visual-text .main-tit {
    font-size: 75px;
    font-weight: 600;
    color: #2d45ad; 
    line-height: 1.25;
    margin-bottom: 20px;
    letter-spacing: -2px;
}
.visual-text .sub-tit {
    font-size: 32px;
    color: #666666;
    font-weight: 500;
    margin-bottom: 60px;
}
.visual-text .logo-box {
    width: 180px;
}
.visual-text .logo-box img {
    width: 100%;
}

/* 우측 조감도 이미지 */
.visual-image {
    flex: 0 0 auto;
    width: 50%;
    max-width: 800px;
    border-radius: 80px;
    overflow: hidden;
}
.visual-image img {
    width: 100%;
    display: block;
}

/* 우측 끝 고정 사이드바 */
.right-sidebar {
    position: absolute;
    right: 0;
    top: 0;
    width: 90px;
    height: 100%;
    background-color: #415ac4; 
    padding: 60px 0; /* 상하 여백을 주어 글자가 화면 끝에 붙지 않게 함 */
    box-sizing: border-box;
    z-index: 20;
}
.right-sidebar .vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: #ffffff;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 11px;
    opacity: 0.85;
    
    /* 세로 영역에 단어들을 끝까지 분산 정렬 */
    height: 100%;
    text-align: justify;
    text-align-last: justify;
    
    /* 👇 좌우 완벽한 가운데 정렬을 위한 수정 부분 */
    width: auto;      /* 기존 100%에서 auto로 변경하여 부모의 align-items: center 가 정확히 작동하게 함 */
    margin: 0 auto;   /* 블록 자체를 중앙으로 */
    padding-left: 26px;
    line-height: 1;   /* 기본 줄간격 여백을 제거하여 쏠림 현상 방지 */
}

/* 사이드바 아이콘 그룹 (높이 중앙, 좌측으로 반 튀어나오게 배치) */
.right-sidebar .side-icons {
    position: absolute;
    top: 50%;
    left: 0; /* 기준을 사이드바의 왼쪽 끝으로 잡음 */
    transform: translate(-50%, -50%); /* X축 -50% 이동으로 정확히 반만 튀어나오게 처리 */
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.right-sidebar .icon-circle {
    width: 67px;
    height: 67px;
    border-radius: 50%;
    background-color: #ffffff; /* 반쯤 걸칠 때 이질감 없게 배경색 추가 */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* 살짝 그림자를 주어 분리감 형성 */
}
.right-sidebar .icon-circle img {
    
}

/* =======================================
   [강화된 공통 등장 애니메이션 유틸리티]
======================================= */
/* 움직임 폭을 키우고, Apple 스타일의 부드러운 감속(cubic-bezier) 적용 */
.ani-fade-up { opacity: 0; transform: translateY(60px); transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.ani-fade-down { opacity: 0; transform: translateY(-60px); transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.ani-fade-left { opacity: 0; transform: translateX(60px); transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.ani-fade-right { opacity: 0; transform: translateX(-60px); transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.ani-scale-up { opacity: 0; transform: scale(0.85); transition: all 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
.ani-fade { opacity: 0; transition: all 1.2s ease; }

/* 해당 섹션에 도달(active)했을 때 원래 자리로 복귀하며 나타남 */
.section.active .ani-fade-up,
.section.active .ani-fade-down,
.section.active .ani-fade-left,
.section.active .ani-fade-right { opacity: 1; transform: translate(0, 0); }
.section.active .ani-scale-up { opacity: 1; transform: scale(1); }
.section.active .ani-fade { opacity: 1; }

/* 딜레이 세분화 (요소들이 다다닥 순차적으로 나타나게 함) */
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.30s; }
.delay-3 { transition-delay: 0.45s; }
.delay-4 { transition-delay: 0.60s; }
.delay-5 { transition-delay: 0.75s; }
.delay-6 { transition-delay: 0.90s; }

/* --- 애니메이션 (페이드 + 슬라이드업) --- */
.ps-content-box, .ps-bottom-banner {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}
.ps-bottom-banner {
    transition-delay: 0.2s;
}
/* 스와이퍼 전환 시 등장 */
.swiper-slide-active .ps-content-box,
.swiper-slide-active .ps-bottom-banner {
    opacity: 1;
    transform: translateY(0);
}

/* =======================================
   SECTION 1 : 첫 화면(오프닝) 극적 애니메이션
======================================= */
/* 딜레이 유틸리티 추가 (7번 타자용) */
.delay-7 { transition-delay: 1.05s; }

/* 1번 섹션 릴레이 간격 세분화 */
#section1.active .delay-1 { transition-delay: 0.2s; }
#section1.active .delay-2 { transition-delay: 0.4s; }
#section1.active .delay-3 { transition-delay: 0.6s; }
#section1.active .delay-4 { transition-delay: 0.8s; }
#section1.active .delay-5 { transition-delay: 1.1s; } /* 아이콘 1 */
#section1.active .delay-6 { transition-delay: 1.25s; } /* 아이콘 2 */
#section1.active .delay-7 { transition-delay: 1.4s; } /* 아이콘 3 */

/* 메인 조감도: 다른 섹션보다 더 길고 웅장하게(1.8초) 확대 */
#section1 .visual-image.ani-scale-up { transform: scale(0.8); }
#section1.active .visual-image.ani-scale-up { transform: scale(1); transition-duration: 1.8s; }

/* =======================================
   반응형 (1024px 이하 모바일) - SECTION 1
======================================= */
@media (max-width: 1024px) {
    /* 모바일에서는 fullPage 높이 제한을 풀고 컨텐츠 길이에 자연스럽게 맞춤 */
    #section1, .main-visual {
        height: auto !important; 
        min-height: 100vh;
    }

    .visual-inner {
        flex-direction: column;
        padding: 130px 5% 80px; /* 헤더가 덮지 않도록 상단 여백 넉넉히 확보 */
        justify-content: center;
        align-items: center;
        gap: 30px;
    }

    /* 하단에 남아있던 구버전 absolute 찌꺼기 속성을 강제로 무력화시켜 겹침 해결 */
    .visual-text {
        position: relative !important; 
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        text-align: center;
    }
    
    .visual-text .main-tit {
        font-size: 11vw; /* 모바일 폭에 맞춰 글자 크기 유동적 조절 */
        margin-bottom: 2vw;
    }
    
    .visual-text .sub-tit {
        font-size: 5.5vw;
        margin-bottom: 8vw;
    }

    .visual-text .logo-box {
        width: 45vw;
        margin: 0 auto;
    }
    
    .visual-image {
        width: 100%;
        border-radius: 20px; /* 모바일 화면에 맞춰 둥글기 완화 */
        margin-top: 20px;
    }
    
    .right-sidebar {
        display: none; /* 모바일에서는 우측 사이드바 생략 */
    }
    
    .deco-img.top-left {
        width: 50%;
        opacity: 0.15; /* 모바일에서는 텍스트 가독성을 위해 데코를 흐리게 */
        top: -5%;left: -5%;
    }
    
    .deco-img.bottom-right {
        width: 40%;
        bottom: 0;
        right: 0;
        opacity: 0.15;
    }
}

/* =======================================
   SECTION 2 : 사업개요 및 특장점
======================================= */
#section2 {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

/* 좌측 드론/위성 배경 이미지 */
.s2-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 32%; /* 화면 좌측만 덮도록 설정 */
    height: 100%;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    z-index: 1;
}

.s2-inner {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    gap: 60px;
}

/* --- 좌측 지도 이미지 --- */
.s2-left {
    flex: 0 0 40%;
    max-width: 750px;
    border-radius: 100px;
    overflow: hidden;
    box-shadow: -10px 19px 16px 5px rgba(0, 0, 0, 0.48);
}
.s2-left img {
    width: 100%;
    display: block;
}

/* --- 우측 텍스트 영역 --- */
.s2-right {
    flex: 1;
    padding-left: 20px;
    text-align: left;
}

/* 1. 타이틀 영역 */
.s2-title-area {
    margin-bottom: 50px;
}
.s2-title-area h2 {
    font-size: 55px;
    font-weight: 600;
    color: #2d45ad;
    margin-bottom: 15px;
    letter-spacing: -2px;
}
.s2-title-area .sub-txt {
    font-size: 24px;
    font-weight: 600;
    color: #222;
}
.s2-title-area .sub-txt span {
    font-size: 24px;
    font-weight: 400;
    color: #343434;
}

/* 2. 사업개요 리스트 */
.ov-header {
    display: flex;
    align-items: center;
}
.ov-label {
    background: url(../img/label.png) no-repeat center 0;
    background-size: cover;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    padding: 6px 33px 5px 22px;
    position: relative;
    z-index: 2;
}
.ov-line {
    flex: 1;
    height: 1px;
    background: #c3c8df;
    margin-left: -5px;
    margin-top: 27px;
}

.ov-list {
    margin-top: 25px;
}
.ov-item {
    display: flex;
    margin-bottom: 18px;
    font-size: 18px;
    align-items: center;
}
.ov-item dt {
    font-weight: 700;
    color: #2d45ad;
    width: 100px;
    position: relative;
}
/* 항목 사이 수직선(|) */
.ov-item dt::after {
    content: '|';
    position: absolute;
    right: 20px;
    color: #ccc;
    font-weight: 300;
}
.ov-item dd {
    color: #333;
    font-weight: 400;
    margin: 0;
}
.ov-item dd .note {
    font-size: 14px;
    color: #888;
    margin-left: 10px;
}

/* 3. 하단 3개 특징 박스 */
.s2-features {
    display: flex;
    gap: 20px;
    margin-top: 60px;
}
.feat-box {
    flex: 1;
    text-align: center;
}
.feat-icon {
    position: relative;
    z-index: 2;
    margin-bottom: -35px; /* 배경 박스에 반쯤 걸치도록 마진을 위로 당김 */
}
.feat-icon img {
    width: 90px;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1));
}
.feat-tit {
    padding: 50px 10px 25px; /* 아이콘 영역을 피해서 위쪽 여백을 넉넉히 줌 */
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    word-break: keep-all;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.bg-purple { background: #8080ac; }
.bg-light-purple { background: #af9bc9; }
.bg-green { background: #7aaf92; }

.feat-desc {
    margin-top: 8px;
    font-size: 15px;
    color: #343434;
    line-height: 1.6;
    word-break: keep-all;
}

/* =======================================
   반응형 (1024px 이하 모바일)
======================================= */
@media (max-width: 1024px) {
    .s2-bg {
        width: 100%;
        height: 30vh;
        background-position: center;
    }
    
    .s2-inner {
        flex-direction: column;
        padding: 80px 5% 80px;
        height: auto;
        gap: 30px;
    }

    .s2-left {
        width: 100%;
        max-width: 100%;
    }

    .s2-right {
        width: 100%;
        padding-left: 0;
        margin-top: 20px;
    }

    .s2-title-area {
        text-align: center;
        margin-bottom: 40px;
    }
    .s2-title-area h2 {
        font-size: 62px;
    }
    .s2-title-area .sub-txt {
        font-size: 36px;
        word-break: keep-all;
    }
    .ov-label{
        padding: 6px 53px 5px 42px;
        font-size: 42px;
    }
    .ov-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        background: #f8f9fa;
        padding: 15px;
        border-radius: 8px;
        font-size: 34px;
    }
    .ov-item dt {
        width: auto;
    }
    .ov-item dt::after {
        display: none; /* 모바일에서는 수직선 제거 */
    }
    .ov-item dd .note {
        display: block;
        margin-left: 0;
        margin-top: 5px;
        font-size: 18px;
    }

    .s2-features {
        flex-direction: column;
        gap: 40px;
        margin-top: 50px;
    }
    
    .feat-icon img {
        width: 18vw;
    }
    
    .feat-tit {
        font-size: 4em;
        min-height: auto;
        padding: 12vw 3vw 6vw;
    }
    .feat-desc {
        font-size: 3em;
        margin-top: 4vw;
    }
}

/* =======================================
   SECTION 3 : 프리미엄 스와이퍼
======================================= */
#section3 {
    position: relative;
    overflow: hidden;
    background: #000; 
}

/* 통일된 풀스크린 배경 */
.s3-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}
.s3-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4); /* 흰색 텍스트 가독성을 위한 은은한 딤처리 */
}

/* 좌측 고정 타이틀 */
.s3-left-text {
    position: absolute;
    left: 8%; /* 25%에서 8%로 변경하여 왼쪽으로 시원하게 밀착 */
    top: 45%;
    transform: translateY(-50%); /* X축 중앙정렬을 빼서 제자리 고정 */
    font-size: 130px;
    font-family: "Nanum Myeongjo", serif;
    color: rgba(255, 255, 255, 0.8);
    z-index: 2;
    letter-spacing: 5px;
}

.premium-split-wrapper {
    position: relative;
    width: 100%;
    height: 100%; 
    z-index: 10;
}

.premiumSwiper, .premium-slide {
    width: 100%;
    height: 100%;
}

.premium-slide {
    display: flex;
    justify-content: flex-end; /* 우측으로 패널 밀착 */
}

/* --- 우측 콘텐츠 패널 --- */
.ps-right {
    width: 50%;
    max-width: 900px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 상단 흰색 박스 영역 (높이 약 60%) */
.ps-top-white {
    background: #fff;
    flex: 0 0 62%;
    padding: 0 10%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ps-bg-logo {
    position: absolute;
    top: 80px;
    right: 60px;
    width: 165px;
    opacity: 0.9;
}
.ps-category {
    font-size: 16px;
    color: #777;
    letter-spacing: 2px;
    margin-bottom: 25px;
    display: block;
    font-weight: 500;
}
.ps-title {
    font-size: 55px;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 40px;
    letter-spacing: -2px;
    font-family: 'SCdream', sans-serif;
    /* 텍스트 그라데이션 추가 */
    background: linear-gradient(135deg, #415ac4, #03a3a5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.ps-divider {
    width: 40px;
    height: 2px;
    background: #ccc;
    margin-bottom: 40px;
}

.ps-desc-flex {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start; /* 기존 space-between 에서 변경 */
    gap: 30px; /* 원하는 간격만큼 px 조정 가능 */
}

.ps-desc {
    font-size: 20px;
    color: #444;
    line-height: 1.6;
}
.ps-icon img {
    width: 80px;
}

/* 하단 파란색 배너 영역 */
.ps-bottom-banner {
    background: #495bc6; /* 시안의 메인 블루 */
    color: #fff;
    padding: 20px 5%;
    font-size: 30px;
    line-height: 1.45;
    font-weight: 300;
    flex: 0 0 auto;
}
.ps-bottom-banner strong {
    font-weight: 600;
}

/* 최하단 여백 및 그라데이션 박스 */
.ps-bottom-space {
    flex: 1; /* 남은 여백을 차지하여 배경 투과 */
    position: relative;
}
.ps-bottom-deco {
    position: absolute;
    right: 0;
    top: 0;
    width: 250px;
    height: 100%;
    background: linear-gradient(to bottom right, #2d45ad, #03a3a5);
}

/* --- 애니메이션 (페이드 + 슬라이드업 통합) --- */
/* 기존에 박스와 배너가 따로 놀던 애니메이션을 강제로 무력화(초기화) 합니다 */
.ps-content-box, .ps-bottom-banner {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
}

/* 1. 박스 껍데기는 흔들리지 않게 단단히 고정 (잔상/글리치 방지) */
.swiper-slide .ps-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* 2. 섹션 3에 처음 스크롤해 도착했을 때: 우측 패널 전체가 통째로 부드럽게 올라옴 */
.premium-split-wrapper {
    opacity: 0;
    transform: translateY(80px);
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.section.active .premium-split-wrapper {
    opacity: 1;
    transform: translateY(0);
}

/* 3. 좌측 'PREMIUM' 배경 글자: 왼쪽에서 미끄러져 들어옴 */
.s3-left-text {
    opacity: 0;
    /* 중앙 정렬(translateY)은 유지한 채 X축으로만 밀어둠 */
    transform: translateX(-100px) translateY(-50%);
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.section.active .s3-left-text {
    opacity: 1;
    transform: translateX(0) translateY(-50%);
}

/* 4. 슬라이드 내부 요소들: 각각 다른 방향과 타이밍으로 등장 (내부 스태거) */
/* 작은 카테고리 (우측에서 스르륵) */
.swiper-slide .ps-category { 
    opacity: 0; 
    transform: translateX(-20px); 
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); 
}
/* 메인 타이틀 (아래에서 위로) */
.swiper-slide .ps-title { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); 
}
/* 구분선 (길이가 0에서부터 쫙 늘어남) */
.swiper-slide .ps-divider { 
    opacity: 0; 
    width: 0 !important; 
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); 
}
/* 설명 & 아이콘 (아래에서 위로) */
.swiper-slide .ps-desc-flex { 
    opacity: 0; 
    transform: translateY(20px); 
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); 
}
/* 배경 워터마크 로고 (회전하면서 커짐) */
.swiper-slide .ps-bg-logo { 
    opacity: 0; 
    transform: rotate(-20deg) scale(0.8); 
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); 
}

/* 파란색 배너 안의 텍스트 */
/* 박스는 고정해두고 오직 '글자색'만 투명에서 흰색으로 스르륵 나타나게 처리 */
.swiper-slide .ps-bottom-banner {
    color: transparent;
    text-indent: 10px; /* 글자가 아주 살짝 밀려오는 효과 */
    transition: all 0.8s ease;
}

/* ================= Active 상태 (타이밍 세분화) ================= */
/* 슬라이드가 화면에 보일 때 각각 0.1초씩 딜레이를 주어 다다닥! 하고 나타나게 만듭니다 */
.section.active .swiper-slide-active .ps-category { 
    opacity: 1; transform: translateX(0); transition-delay: 0.1s; 
}
.section.active .swiper-slide-active .ps-title { 
    opacity: 1; transform: translateY(0); transition-delay: 0.2s; 
}
.section.active .swiper-slide-active .ps-divider { 
    opacity: 1; width: 40px !important; transition-delay: 0.3s; 
}
.section.active .swiper-slide-active .ps-bg-logo { 
    opacity: 0.9; transform: rotate(0) scale(1); transition-delay: 0.3s; 
}
.section.active .swiper-slide-active .ps-desc-flex { 
    opacity: 1; transform: translateY(0); transition-delay: 0.4s; 
}
.section.active .swiper-slide-active .ps-bottom-banner { 
    color: #ffffff; text-indent: 0; transition-delay: 0.5s; 
}
/* 스와이퍼 전환 시 등장 */
.section.active .swiper-slide-active .ps-right {
    opacity: 1;
    transform: translateY(0);
}

/* --- 좌측 컨트롤 버튼 --- */
.ps-controls {
    position: absolute;
    bottom: 12%;
    left: 15%; /* 좌측 고정 텍스트 쪽에 맞춰 배치 */
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 30px;
}
.ps-pagination {
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}
.ps-progress-bar {
    width: 120px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 15px;
    position: relative;
}
.ps-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #fff;
    transition: width 0.3s linear;
}
.ps-nav-btns {
    display: flex;
    gap: 10px;
}
.ps-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
}
.ps-btn svg { width: 20px; height: 20px; }
.ps-btn:hover {
    background: #fff;
    color: #2d45ad;
}


/* =======================================
   반응형 (1024px 이하 모바일) - SECTION 3 완벽 수정
======================================= */
@media (max-width: 1024px) {
    /* 1. fullPage가 꺼진 모바일에서도 스와이퍼가 제 영역(100vh)을 확보하도록 강제 */
    #section3 {
        height: 100vh !important; 
        min-height: 600px !important;
    }
    
    .premium-split-wrapper {
        height: 100% !important;
    }

    /* 2. 배경에 깔리는 PREMIUM 글자 중앙 배치 및 반투명 처리 */
    .s3-left-text {
        font-size: 14vw !important;
        top: 20% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
        text-align: center !important;
        opacity: 1 !important; 
    }

    /* 3. 하단 찌꺼기 코드 무력화 및 박스를 화면 하단으로 밀어냄 */
    .premium-slide {
        flex-direction: row !important; 
        align-items: flex-end !important; 
        padding-bottom: 25vw !important; /* 하단 컨트롤 버튼이 들어갈 자리 비우기 */
    }

    /* 4. 흰색+파란색 콘텐츠 박스 모바일 카드형 디자인 */
    .ps-right {
        width: 90% !important;
        max-width: 90% !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border-radius: 15px !important; /* 모바일에선 모서리를 둥글게 */
        overflow: hidden !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    }

    .ps-top-white {
        padding: 8vw 6vw !important;
    }
    
    .ps-bg-logo {
        top: -2vw !important;
        right: 2vw !important;
        width: 25vw !important;
        opacity: 0.2 !important;
    }

    /* 텍스트 사이즈 모바일 최적화 (vw 단위 사용) */
    .ps-category { font-size: 3.5vw !important; margin-bottom: 2vw !important; }
    .ps-title { font-size: 7vw !important; margin-bottom: 4vw !important; }
    .ps-divider { margin-bottom: 4vw !important; width: 10vw !important; }
    .ps-desc { font-size: 3.3vw !important; word-break: keep-all !important; }
    .ps-icon img { width: 14vw !important; }

    .ps-bottom-banner {
        padding: 6vw !important;
        font-size: 4vw !important;
        text-align: center !important;
    }

    /* 5. 스와이퍼 컨트롤(페이징/화살표) 위치 중앙 하단으로 재배치 */
    .ps-controls {
        top: auto !important;
        bottom: 8vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90% !important;
        justify-content: space-between !important;
    }
    .ps-progress-bar { width: 40vw !important; }
}

/* =======================================
   SECTION 4 : 토지이용계획도
======================================= */
#section4 {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.s4-inner {
    width: 100%;
    max-width: 1750px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    gap: 30px;
}

.s4-col {
    display: flex;
    flex-direction: column;
}

/* --- 좌측 영역 (타이틀, 작은맵, 범례) --- */
.s4-left {
    flex: 0 0 22%;
    align-items: flex-start;
}

.s4-title-area {
    margin-bottom: 50px;
}
.s4-title-area .eng-tit {
    font-family: "Nanum Myeongjo", serif;
    font-size: 30px;
    color: #dfdfdf;
    letter-spacing: 2px;
    margin-bottom: 5px;
}
.s4-title-area .main-tit {
    font-size: 55px;
    font-weight: 500;
    letter-spacing: -2px;
    margin: 0;
    font-family: 'SCDream',sans-serif;
    /* 섹션 3과 동일한 텍스트 그라데이션 */
    background: linear-gradient(-45deg, #415ac4, #03a3a5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.s4-submap {
    width: 335px;
    margin-bottom: 30px;
}
.s4-submap img { width: 100%; display: block; }

.s4-legend {
    width: 90%; /* 범례 이미지가 너무 크지 않게 조절 */
}
.s4-legend img { width: 100%; display: block; }


/* --- 중앙 영역 (메인 맵) --- */
.s4-center {
    flex: 1;
    padding: 0 20px;
    align-items: center;
}
.s4-center img {
    width: 110%;
    max-width: 1200px; /* 너무 거대해지지 않게 최대치 제한 */
    display: block;
}


/* --- 우측 영역 (우측 표) --- */
.s4-right {
    flex: 0 0 26%;
    align-items: flex-end;
}
.s4-right img {
    width: 75%;
    display: block;
}

/* =======================================
   SECTION 4 : 극적인 등장 애니메이션
======================================= */
/* 스크롤(1000ms)이 완전히 멈출 즈음인 0.8초부터 릴레이 시작 */
#section4.active .delay-1 { transition-delay: 0.8s; }
#section4.active .delay-2 { transition-delay: 1.0s; }
#section4.active .delay-3 { transition-delay: 1.2s; }

/* 메인 도면: 더 작게 시작해서 거대하게 등장하도록 오버라이드 */
#section4 .s4-center.ani-scale-up {
    transform: scale(0.6); 
}
#section4.active .s4-center.ani-scale-up {
    transform: scale(1);
    transition-delay: 1.5s; /* 좌측 요소가 다 깔린 뒤 등장 */
    transition-duration: 2s; /* 2초 동안 스르륵 천천히 웅장하게 완성 */
}

/* 우측 표: 메인 도면이 커지는 도중에 진입 */
#section4.active .delay-5 { transition-delay: 1.8s; }

/* =======================================
   반응형 (1024px 이하 모바일)
======================================= */
@media (max-width: 1024px) {
    .s4-inner {
        flex-direction: column;
        height: auto;
        padding: 100px 5% 50px;
        gap: 50px;
    }

    .s4-left {
        width: 100%;
        align-items: center;
    }
    .s4-title-area {
        text-align: center;
        margin-bottom: 40px;
    }
    .s4-title-area .eng-tit { font-size: 4em; }
    .s4-title-area .main-tit { font-size: 7.5em; }

    .s4-submap, .s4-legend {
        width: 90%;
        max-width: unset;
        margin: 0 auto 30px auto;
    }

    .s4-center {
        width: 100%;
        padding: 0;
    }
    .s4-center img {
        width: 95%;
        margin: 0 auto;
    }

    .s4-right {
        width: 100%;
        align-items: center;
    }
    .s4-right img {
        width: 95%;
        margin: 0 auto;
    }
}

/* =======================================
   SECTION 5 : 공급절차 및 인센티브
======================================= */
#section5 {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.s5-inner {
    width: 100%;
    /*max-width: 1750px;*/
    margin: 0 auto;
    height: 100%; 
    display: flex;
    align-items: center; /* 전체 세로 중앙 정렬 */
    justify-content: space-between;
    padding: 0 40px;
    box-sizing: border-box;
}

.s5-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 90%;
}

/* 좌우 분할 점선 디테일 */
.s5-left {
    border-right: 2px dashed #415ac4;
    padding-right: 60px;
}

.s5-right {
    padding-left: 60px;
}

/* --- 타이틀 공통 --- */
.s5-title {
    display: flex;
    align-items: flex-end;
    margin-bottom: 40px;
    gap: 15px;
}
.s5-title.right-align {
    justify-content: flex-end; /* 우측 컬럼은 우측 정렬 */
}
.s5-title h2 {
    font-size: 55px;
    font-weight: 500;
    margin: 0;
    letter-spacing: -2px;
    line-height: 1;
}
.s5-title .eng-txt {
    font-family: "Nanum Myeongjo", serif;
    font-size: 24px;
    color: #cccccc;
    letter-spacing: 2px;
    margin-bottom: 5px; /* 큰 글씨의 베이스라인에 맞춤 */
}

/* 메인 컬러 포인트 */
.s5-title h2.c-blue { color: #415ac4; }
.s5-title h2.c-teal { color: #03a3a5; }

/* --- 콘텐츠 이미지 박스 --- */
.s5-img-box {
    width: 100%;
    height: 100%;
    text-align: center;
}
.s5-img-box img {
    width: auto;
    height: 100%;
    display: block;
    margin: 0 auto;
}
/* 스크롤이 완전히 멈출 즈음인 0.8초부터 양쪽 타이틀 진입 시작 */
#section5.active .delay-1 { transition-delay: 0.8s; }
#section5.active .delay-2 { transition-delay: 1.0s; }

/* 본문 이미지 박스: 작게(0.7) 시작해서 1.5초 동안 아주 부드럽고 웅장하게 확대됨 */
#section5 .s5-img-box.ani-scale-up {
    transform: scale(0.7); 
}
#section5.active .s5-img-box.ani-scale-up {
    transform: scale(1);
    transition-duration: 1.5s; 
}

/* 타이틀이 자리를 잡은 후 본문 이미지가 양쪽에서 교차하며 커짐 */
#section5.active .delay-3 { transition-delay: 1.3s; }
#section5.active .delay-4 { transition-delay: 1.5s; }
/* =======================================
   반응형 (1024px 이하 모바일)
======================================= */
@media (max-width: 1024px) {
    .s5-inner {
        flex-direction: column;
        height: auto;
        padding: 100px 5% 50px;
        gap: 50px;
    }

    .s5-col {
        width: 100%;
    }

    .s5-left {
        border-right: none; /* 모바일에서는 세로선 제거 */
        border-bottom: 2px dashed #415ac4; /* 가로선으로 변경 */
        padding-right: 0;
        padding-bottom: 50px;
    }

    .s5-right {
        padding-left: 0;
    }

    .s5-title {
        justify-content: center;
        align-items: center;
        flex-direction: column; /* 모바일에서는 위아래로 배치 */
        gap: 10px;
    }
    .s5-title.right-align {
        justify-content: center;
    }
    .s5-title h2 {
        font-size: 7em;
    }
    .s5-title .eng-txt {
        font-size: 3em;
        margin-bottom: 0;
    }
    
    .s5-img-box img {
        width: 100%; /* 모바일에서는 가로 폭 꽉 차게 */
        height: unset;
    }
}
/* =======================================
   SECTION 6 : 관심고객 등록 및 입주제한
======================================= */
#section6 {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.s6-inner {
    width: 100%;
    margin: 0 auto;
    height: calc(var(--vh, 1vh) * 100 - 90px); 
    display: flex;
    box-sizing: border-box;
    align-items: stretch;
}

/* --- 좌측 영역 (텍스트 파트) --- */
.s6-left {
    flex: 0 0 65%;
    display: flex;
    flex-direction: column;
}

/* 좌측 상단 (타이틀/버튼) */
.s6-top {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 140px; /* 우측 이미지와의 간격 확보 */
    padding-right: 40px; /* 우측 이미지와의 간격 확보 */
    position: relative;
}

.s6-deco {
    position: absolute;
    right: 40px;
    top: 40%;
    transform: translateY(-50%);
    width: 40%;
    max-width: 494px;
    z-index: 1;
    opacity: 0.8;
}
.s6-deco img {
    width: 100%;
    display: block;
}

.s6-top-content {
    position: relative;
    z-index: 2;
}

.s6-top-content .main-tit {
    font-size: 60px;
    font-weight: 600;
    color: #2d45ad;
    margin-bottom: 10px;
    letter-spacing: -2px;
}

.s6-top-content .sub-tit {
    font-size: 32px;
    color: #777;
    font-weight: 500;
    margin-bottom: 35px;
}

/* 그라데이션 버튼 */
.s6-btn {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(to right, #415ac4, #3bbca4);
    color: #fff;
    padding: 16px 35px;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(65, 90, 196, 0.2);
    transition: all 0.3s;
    margin-bottom: 50px;
}
.s6-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(65, 90, 196, 0.3);
    color: #fff;
}
.s6-btn .divider {
    font-weight: 300;
    margin: 0 10px;
    opacity: 0.6;
}
.s6-btn .btn-arrow {
    margin-left: 15px;
    font-size: 16px;
}

.s6-logo img {
    width: 180px;
}

/* 좌측 하단 (입주제한 업종) */
.s6-bottom {
    background: #f2f2f2; /* 연한 그레이 배경 */
    padding: 50px 40px; /* 내부 여백 조절 */
    padding-left: 140px;
    flex: 0 0 auto; 
    border-radius: 15px 0 0 0; /* 컨텐츠 박스 안에 들어왔으므로 좌측 상단 모서리를 살짝 둥글게 처리 */
}

.limit-tit {
    font-size: 36px;
    font-weight: 500;
    color: #a41b1b; 
    margin-bottom: 25px;
}

.limit-sub {
    font-size: 20px;
    font-weight: 700;
    color: #444;
    margin-bottom: 20px;
}

.limit-desc {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
}

.limit-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.limit-list li {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 8px;
    font-weight: 500;
}
.limit-list li .c-blue {
    color: #2d45ad; 
}

/* --- 우측 영역 (3분할 이미지) --- */
.s6-right {
    flex: 0 0 35%;
    display: flex;
    flex-direction: column; /* PC에서는 세로 정렬 */
    
    /* 부모(s6-inner)의 높이를 100% 상속받아 페이지 전체 높이에 꽉 차게 됨 */
    height: 100%; 
}
.s6-img {
    flex: 1; /* 부여받은 높이를 정확히 3등분하여 꽉 채움 */
    overflow: hidden;
}
.s6-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    transition: transform 0.5s ease;
}
.s6-img:hover img {
    transform: scale(1.05); 
}

/* 스크롤이 완전히 멈출 즈음인 0.8초부터 데코 이미지를 시작으로 릴레이 진입 */
#section6.active .delay-1 { transition-delay: 0.8s; }
#section6.active .delay-2 { transition-delay: 1.0s; }
#section6.active .delay-3 { transition-delay: 1.2s; }
#section6.active .delay-4 { transition-delay: 1.4s; }
#section6.active .delay-5 { transition-delay: 1.6s; }
#section6.active .delay-6 { transition-delay: 1.8s; }

/* 배경 데코 이미지 스케일 오버라이드 (부드럽게 퍼지듯 등장) */
#section6 .s6-deco.ani-scale-up { transform: scale(0.8) translateY(-50%); }
#section6.active .s6-deco.ani-scale-up { transform: scale(1) translateY(-50%); transition-duration: 1.5s; }

/* =======================================
   반응형 (1024px 이하 모바일)
======================================= */
@media (max-width: 1024px) {
    .s6-inner {
        flex-direction: column;
        height: auto;
        padding: 0; /* 모바일에서는 꽉 차 보이게 여백 제거 */
    }

    .s6-left {
        width: 100%;
    }

    .s6-top {
        padding: 80px 5%;
        justify-content: center;
        text-align: center;
    }
    
    .s6-deco {
        opacity: 0.15; 
        width: 60%;
        top: 10%;
        right: auto;
        left: 70%;
        transform: translate(-50%, -50%);
    }

    .s6-top-content .main-tit { font-size: 8em; word-break: keep-all;}
    .s6-top-content .sub-tit { font-size: 4em; }
    
    .s6-btn {
        font-size: 3em;
        padding: 3vw 6vw;
        border-radius: 5px;
    }
    .s6-btn .btn-arrow { font-size: 0.8em; }
    .s6-logo { margin: 0 auto; width: 30vw; }
    .s6-logo img { width: 100%; }

    .s6-bottom {
        padding: 50px 5%;
        border-radius: 0; /* 모바일은 모서리 직각 유지 */
    }
    .limit-tit { font-size: 6em; }
    .limit-sub { font-size: 3em; word-break: keep-all; }
    .limit-desc { font-size: 2.2em; }
    .limit-list li { font-size: 2.2em; word-break: keep-all; }

    /* 모바일 우측 영역 가로 3분할 */
    .s6-right {
        width: 100%;
        flex-direction: column; 
        height: 25vh; /* 모바일에서 사진 띠 높이 */
    }
    .s6-img {
        flex: 1; 
    }
}

.footer {
    background: #0d141b;
    padding: 60px 0 40px;
    color: #c4c7c9;
    font-family: "Noto Sans KR", sans-serif;
}

.footer-inner {
    width: 100%;
    max-width: 1730px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* LEFT SECTION */
.footer-left {
    width: 70%;
}

.footer-left h3 {
    max-width: 200px;
    margin-bottom: 20px;
}
.footer-left h3 img{
    width: 100%;
}

.info-list {
    margin-bottom: 25px;
}

.info-list li {
    font-size: 15px;
    line-height: 1.8;
}

.notice {
    font-size: 13.5px;
    line-height: 1.8;
    color: #9ea2a4;
    margin-bottom: 25px;
}

.copy {
    font-size: 13px;
    color: #7d8285;
    margin-top: 30px;
}

/* RIGHT SECTION */
.footer-right {
    text-align: right;
    color: #fff;
}

.call-label {
    font-size: 15px;
    margin-bottom: 4px;
    color: #b7bec4;
}

.call-number {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 30px;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
}

.footer-logo img {
    width: 160px;
    margin-right: 12px;
}

.logo-text {
    font-size: 22px;
    color: #c9cdcf;
    letter-spacing: 1px;
    display: none;
}

/* =======================================
   푸터(섹션 7) 진입 시 섹션 6 애니메이션 유지
======================================= */
/* body에 fp-viewing-sec7 클래스가 붙었을 때(= 푸터를 볼 때), 섹션 6 요소들이 사라지지 않게 강제 유지 */
body.fp-viewing-sec7 #section6 .ani-fade-up,
body.fp-viewing-sec7 #section6 .ani-fade-down,
body.fp-viewing-sec7 #section6 .ani-fade-left,
body.fp-viewing-sec7 #section6 .ani-fade-right { 
    opacity: 1; 
    transform: translate(0, 0); 
}

/* 섹션 6의 배경 데코 이미지(S자) 상태 유지 */
body.fp-viewing-sec7 #section6 .s6-deco.ani-scale-up {
    opacity: 1;
    transform: scale(1) translateY(-50%);
}

/* 간단한 페이드-레프트 애니메이션 (fullpage 기본 active용) */
@keyframes fadeLeft {
    0% {
        transform: translateX(-80px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.section.active .ani-01 {
    animation: fadeLeft 0.5s 0.3s both;
}

.section.active .ani-02 {
    animation: fadeLeft 0.5s 0.4s both;
}

.section.active .ani-03 {
    animation: fadeLeft 0.5s 0.5s both;
}


/* 오버레이 배경 */
#info-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    /* 가시성을 위해 조금 더 어둡게 */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 20000;
    backdrop-filter: blur(3px);
}

/* 팝업 전체 컨테이너 (버튼 포함 공간) */
#info-modal-container {
    position: relative;
    width: 600px;
    /* 1920 해상도에서 800px 유지 */
    max-width: 95%;
    /* 모바일 대응 */
    
    display: flex;
    flex-direction: column;
}

/* 팝업 컨텐츠 창 (이미지만 담는 곳) */
#info-modal-content {
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* 패딩 제거 */
}

/* 내부 스크롤 영역 */
.modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    line-height: 0;
    /* 이미지 하단 미세 간격 제거 */
}

.modal-body img {
    width: 100%;
    /* 800px 컨테이너에 꽉 맞춤 */
    height: auto;
    display: block;
}

/* 닫기 버튼 (박스 외부 우측 상단) */
.modal-close {
    position: absolute;
    top: -45px;
    /* 박스 위로 올림 */
    right: -45px;
    /* 박스 오른쪽으로 뺌 */
    width: 40px;
    height: 40px;
    font-size: 35px;
    color: #fff;
    /* 검은 배경에서 잘 보이게 흰색 */
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    transform: rotate(90deg);
}

body.modal-open {
    overflow: hidden !important;
    touch-action: none; /* 모바일 터치 스크롤 방지 */
}


/*============================== 반응형 ===============================*/

@media screen and (max-width: 1024px) {
    #info-modal-container{width: 95%;}
    .fp-section,
    .fp-tableCell {
        height: auto !important;
        /* 고정 높이 해제 */
    }

    .circle-bg {
        overflow: visible;
    }
}

/* =================================================
   1024px 이하 전용 반응형 보강 (AUTO GENERATED)
================================================= */
@media (max-width: 1024px) {
    .intro-gif img{
        width: 100%;
        max-width: 92vw;
    }
    .fp-section,
    .fp-tableCell {
        height: auto !important;
    }

    header {
        position: fixed;
    }

    .visual-text {
        position: absolute;
        left: 50%;
        transform: unset;
        transform: translateX(-50%);
        top: 12%;
        text-align: center;
        width: 92%;
    }

    .bg1,
    .bg2 {
        background-position: bottom right;
    }

    .circle.c1,
    .circle.c2 {
        left: 50%;
        transform: translateX(-50%);
    }

    .circle.c1 { width: 153vw; height: 145vw; }
    .circle.c2 { width: 143vw; height: 145vw; }

    .visual-text .line { margin: 3% auto; width: 2px; }
    .visual-text h2 { font-size: 42px; }
    .visual-text .sub-title { font-size: 4em; }
    .visual-text h2 { font-size: 7em; }
    .visual-text p { font-size: 3em; }
    .visual-text strong { font-size: 3em; }
    .visual_btn { font-size: 3.5em; }

    /* 프리미엄 슬라이더 모바일 */
    .premium-slide { flex-direction: column; }
    .ps-left { width: 100%; height: 50vh; }
    .ps-right { position: relative; width: 100%; height: auto; padding: 7% 0; }
    .ps-title { font-size: 1.8em; }
    .ps-divider{ margin: 20px auto; }
    .ps-desc { font-size: 1em; margin-bottom: 5%; }
    .ps-highlight { font-size: 1.3em; }
    .ps-sub-head { font-size: 3em; }
    .ps-main-head { font-size: 1em; }
    .ps-main-head span { font-size: 1.5em; }
    .ps-pagination { font-size: 1em; font-weight: 400; }
    .ps-progress-bar { width: 15vw; height: 0.5vw; }
    .ps-btn { width: 9vw; height: 9vw; }
    .ps-btn svg { width: 6vw; height: 6vw; }

    /* 새로운 section 2 (앵커테넌트/커뮤니티) 모바일 */
    #section2 .feature-item { padding: 7% 3%; }
    .anchor-tenant .feature-content-wrap { flex-direction: column; }
    .community .feature-content-wrap { flex-direction: column-reverse; }
    .feature-content-wrap { text-align: center; width: 100%; }
    .text-area { width: 100%; }
    #section2 .feature-item.community .text-area { text-align: center; }
    .text-area .top-desc { font-size: 3em; }
    .text-area .main-title { font-size: 6em; letter-spacing: 0.5em; }
    .badge-purple { font-size: 4em; }
    .visual-area { width: 80%; margin-top: 5%; justify-content: space-between; }
    .brand-logo, .preview-box { width: 47%; }
    .brand-logo img, .preview-box img { width: 100%; }
    .thumb-group { justify-content: space-between; gap: unset; width: 100%; }
    .thumb-group .thumb { width: 31%; height: auto; }
    .thumb-group .thumb img { width: 100%; }

    /* 새로운 section 4 (브랜드 상품성 증명) 모바일 */
    #section4 .split-layout-wrapper { flex-direction: column; height: auto; }
    .split-side { padding: 20% 3%; }
    .small-tit { font-size: 4em; }
    .display-tit { font-size: 7em; }
    .glass-badge { font-size: 3.5em; }
    .bar-content { padding: 3% 3%; word-break: keep-all; }
    .bar-top-txt { font-size: 4em; }
    .bar-main-tit { font-size: 5em; }

    /* 새로운 section 5 (안내영역) 모바일 */
    .s7-split-wrap { flex-direction: column; }
    #section5 .s7-left{
        flex-direction: column-reverse;
        background: linear-gradient(180deg, #bca9af, #7d889a);
        width: 100%;
        padding: 0 3%;
        text-align: center;
    }
    #section5 .s7-right { width: 100%; padding: 10% 0; }    
    .s7-content-inner.v1 { padding: 10% 0; }
    .s7-brand-title { font-size: 6.5em; opacity: 1; }
    .s7-sub-text { font-size: 4em; margin-bottom: 5%; }
    .s7-btn-link { width: 100%; font-size: 4em }
    .s7-btn-link .arrow { font-size: 0.8em; }

    /* 모달 클로즈 버튼 모바일 */
    .modal-close {
        right: 0;
        top: -6vw;
        width: 5vw;
        height: 5vw;
        font-size: 5em;
    }

    /* 새로운 section 6 (푸터) 모바일 */
    .footer-left { width: 100%; text-align: center; }
    .footer-inner { width: 100%; flex-direction: column; gap: 40px; padding: 0 20px; text-align: center; align-items: center; }
    .footer-right { text-align: center; display: flex; align-items: center; justify-content: space-between; }
    .call-number { margin-bottom: unset; font-size: 4em; }
    .footer-logo { margin-top: unset; }
    .call-label { margin-bottom: unset; font-size: 3em; }
    .footer-left h3 { font-size: 4em; max-width: 50%;margin: auto;margin-bottom: 5%;}
    .info-list li { font-size: 2.5em; }
    .notice { font-size: 2em; text-align: left; padding: 0 5%; }
    .copy { font-size: 2.5em; }
}

/* 기본적으로 숨김 (PC) */
.m-float-tel { display: none; }

@media screen and (max-width: 1024px) {
    .m-float-tel {
        display: block;
        position: fixed;
        right: 3%;
        bottom: 3%; /* 푸터나 인디케이터 위치에 따라 조정 가능 */
        z-index: 9999;
        transition: transform 0.3s ease;
    }
    .tel-icon-circle {
        width: 16vw;
        height: 16vw;
        background-color: #b70101;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        animation: pulse 2s infinite;
    }
    .tel-icon-circle svg{ width: 10vw; height: 10vw; }
    .m-float-tel:active { transform: scale(0.9); }

    @keyframes pulse {
        0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(150, 119, 102, 0.7); }
        70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(150, 119, 102, 0); }
        100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(150, 119, 102, 0); }
    }
}

/* =======================================
   첫 접속 시 1번 섹션 애니메이션 100% 보장 (강제 대기)
======================================= */
body:not(.is-ready) #section1 .ani-fade-up { opacity: 0 !important; transform: translateY(60px) !important; }
body:not(.is-ready) #section1 .ani-fade-down { opacity: 0 !important; transform: translateY(-60px) !important; }
body:not(.is-ready) #section1 .ani-fade-left { opacity: 0 !important; transform: translateX(60px) !important; }
body:not(.is-ready) #section1 .ani-fade-right { opacity: 0 !important; transform: translateX(-60px) !important; }
body:not(.is-ready) #section1 .ani-scale-up { opacity: 0 !important; transform: scale(0.8) !important; }
body:not(.is-ready) #section1 .ani-fade { opacity: 0 !important; }

/* =======================================
   플로팅 TOP 버튼
======================================= */
.btn-top {
    position: fixed;
    right: 40px;
    bottom: 40px;
    width: 65px;
    height: 65px;
    background: #2b3e8e; /* 메인 네이비 컬러 */
    color: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 9998;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px); /* 아래에서 위로 나타나기 위함 */
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-top svg {
    width: 22px;
    height: 22px;
    margin-bottom: 2px;
}

.btn-top span {
    font-size: 13px;
    font-weight: 700;
    font-family: 'SCDream', sans-serif;
    letter-spacing: 1px;
}

.btn-top:hover {
    background: #03a3a5; /* 마우스 호버 시 청록색 포인트 */
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(3, 163, 165, 0.3);
    color: #fff;
}

/* fullPage.js 연동: 1번 섹션(.fp-viewing-sec1)이 아닐 때만 버튼 등장 */
body:not(.fp-viewing-sec1) .btn-top {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =======================================
   모바일 반응형 (1024px 이하)
======================================= */
@media (max-width: 1024px) {
    .btn-top {
        right: 3%; /* 전화 버튼과 동일한 우측 여백 기준 */
        bottom: calc(3% + 16vw + 20px); /* 전화버튼 여백(3%) + 높이(16vw) + 사이 간격(10px) */
        width: 16vw;  /* 전화 버튼과 완벽하게 동일한 가로 크기 */
        height: 16vw; /* 전화 버튼과 완벽하게 동일한 세로 크기 */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* 전화 버튼과 동일한 그림자 깊이 */
    }
    
    .btn-top svg {
        width: 5vw;
        height: 5vw;
        margin-bottom: 0.5vw;
    }
    
    .btn-top span {
        font-size: 3vw; /* 버튼 크기에 맞춰 폰트도 살짝 키움 */
    }
    
    .btn-top:hover {
        transform: none; /* 모바일에서는 호버 튀어오름 효과 제거 */
    }
}
/* =======================================
   모바일 환경 - 애니메이션 사라짐 완벽 방어 (통합본)
======================================= */
@media (max-width: 1024px) {
    /* 1. 기본 방향 애니메이션 고정 */
    .section.is-played-mobile .ani-fade-up,
    .section.is-played-mobile .ani-fade-down,
    .section.is-played-mobile .ani-fade-left,
    .section.is-played-mobile .ani-fade-right {
        opacity: 1 !important;
        transform: translate(0, 0) !important;
    }
    .section.is-played-mobile .ani-scale-up {
        opacity: 1 !important;
        transform: scale(1) !important;
    }
    .section.is-played-mobile .ani-fade {
        opacity: 1 !important;
    }

    /* 2. 섹션 3 커스텀 특수 요소들 완벽 고정 */
    .section.is-played-mobile .premium-split-wrapper,
    .section.is-played-mobile .swiper-slide .ps-right,
    .section.is-played-mobile .ps-category,
    .section.is-played-mobile .ps-title,
    .section.is-played-mobile .ps-desc-flex {
        opacity: 1 !important;
        transform: translate(0, 0) !important;
    }
    .section.is-played-mobile .ps-divider {
        opacity: 1 !important;
        width: 10vw !important; /* 선 길이 유지 */
    }
    .section.is-played-mobile .ps-bg-logo {
        opacity: 0.2 !important; /* 모바일 투명도 유지 */
        transform: rotate(0) scale(1) !important;
    }
    .section.is-played-mobile .ps-bottom-banner {
        color: #ffffff !important;
        text-indent: 0 !important;
    }
    
    /* 3. 중앙 정렬(translateX -50%) 유지 예외처리 (PREMIUM 텍스트, 컨트롤버튼) */
    #section3 .s3-left-text,
    .section.is-played-mobile .s3-left-text,
    #section3 .ps-controls,
    .section.is-played-mobile .ps-controls {
        opacity: 1 !important;
        transform: translateX(-50%) !important;
    }

    /* 4. 섹션 6 데코 이미지(S자) 위치 및 스케일 예외처리 */
    .section.is-played-mobile .s6-deco.ani-scale-up {
        opacity: 0.15 !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }
}