@charset "UTF-8";
/* ============================================================
   메인(index) 모바일 반응형
   - 기존 common.css / main.css 는 수정하지 않고 이 파일만 뒤에 로드
   - 데스크톱(1025px 이상)은 이 파일이 아무 영향도 주지 않음
   - fullPage 구버전: .section 에 인라인 height:NNNpx 가 박히므로
     모바일에서는 !important 로 풀어 세로 스크롤로 전환
   ============================================================ */

@media all and (max-width:1024px){

    /* ---- 0. 고정폭/높이잠금 해제 ----
       common.css 의 html,body{height:100%} 가 걸려 있으면
       body 가 뷰포트에 갇혀 세로 스크롤이 생기지 않는다. auto 로 해제. */
    html, body{height:auto !important; min-height:100%; overflow-x:hidden;}
    .wrapper{min-width:0 !important; width:100% !important; height:auto !important;}
    #superContainer{min-width:0 !important; width:100% !important; height:auto !important;}

    /* ---- 1. fullPage 스와이프 해제 → 세로 스크롤 ----
       구버전 fullPage 가 각 .section 에 인라인 height(px)를 넣고
       body 를 translate 로 이동시킨다. 아래로 모두 무력화. */
    #superContainer{
        -webkit-transform:none !important;
                transform:none !important;
        transition:none !important;
    }
    /* ---- 1. fullPage 스와이프 해제 → 세로 스크롤 + 섹션 스냅 ----
       구버전 fullPage 가 각 .section 에 인라인 height(px)를 넣고
       body 를 translate 로 이동시킨다. 아래로 모두 무력화. */
    #superContainer{
        -webkit-transform:none !important;
                transform:none !important;
        transition:none !important;
    }
    /* 섹션 단위 스냅: mandatory 로 강하게 붙되, 화면보다 긴(글 많은)
       섹션은 아래 규칙에서 스냅을 해제해 중간을 읽을 수 있게 한다. */
    html{scroll-snap-type:y mandatory; scroll-padding-top:114px;}
    #fullpage{height:auto !important;}
    .section{
        min-height:100vh;                    /* 한 섹션이 화면을 꽉 채움 */
        height:auto !important;              /* 단, 내용이 넘치면 늘어나 잘리지 않음 */
        scroll-snap-align:start;             /* 섹션 상단이 스냅 기준 → 높이 달라도 어긋나지 않음 */
        scroll-snap-stop:always;             /* 한 번에 한 섹션씩 넘어가도록 */
        display:flex; flex-direction:column; justify-content:center;
        padding:128px 20px 70px !important;  /* 상단 고정 nav(약 114px)에 안 가리도록 여유 */
        scroll-margin-top:114px;             /* 앵커 이동 시 nav 높이만큼 보정 */
        box-sizing:border-box;
    }
    /* 구버전이 .table + .tableCell 로 감싸는 경우 대비 */
    .section.table{display:block !important;}
    .section .tableCell{display:block !important; height:auto !important; width:auto !important;}

    /* 배경 이미지가 세로로 긴 화면에서 너무 확대되지 않게 */
    .section{background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important;}
    .section::after{background:linear-gradient(135deg, rgba(0,30,80,.12) 0%, rgba(0,0,0,.2) 100%);}

    /* ---- 2. 섹션 내부 2단 레이아웃 해제(가운데 정렬 → 흐름 배치) ---- */
    .section .section_inner,
    .section .section_main{
        position:static !important;
        -webkit-transform:none !important;
                transform:none !important;
        top:auto !important; left:auto !important;
        width:100% !important;
        padding-left:0 !important;
        text-align:center;
    }
    .section .section_inner > *{float:none !important;}

    /* 좌측 이미지(absolute) → 문서 흐름 상단으로 */
    .section .section_inner .section_img{
        position:static !important;
        -webkit-transform:none !important;
                transform:none !important;
        margin:0 auto 24px;
        text-align:center;
    }
    .section .section_inner .section_img img{max-width:70%; max-height:300px; width:auto; height:auto; object-fit:contain;}

    /* 텍스트 블록 폭 해제 */
    .section .section_inner .section_text{
        width:100% !important;
        margin:0 auto;
    }
    .section .section_inner .section_text p{
        font-size:30px !important;
        padding-bottom:14px !important;
        margin-bottom:16px !important;
        text-align:center;
        text-shadow:0 2px 8px rgba(0,0,0,.85) !important;
    }
    .section .section_inner .section_text .business_cont{padding:0 !important;}
    .section .section_inner .section_text h2{
        font-size:20px !important; line-height:1.4;
        text-shadow:0 2px 8px rgba(0,0,0,.9) !important;
    }
    .section .section_inner .section_text span{
        padding:12px 0 26px !important;
        font-size:15px !important;
        color:#fff !important;
        opacity:1 !important;
        text-shadow:0 1px 6px rgba(0,0,0,.95) !important;
        word-break:keep-all;
    }
    .section .section_inner .section_text .section_btn{
        width:180px !important;
        margin:0 auto;
        line-height:44px !important;
    }

    /* ---- 3. group main(첫 섹션) ---- */
    /* 화면보다 충분히 긴(글 많은) 섹션만 강제 스냅에서 제외 → 중간을 읽을 수 있다.
       이미지 상한 적용 후 실측: #section5(내쇼날엔지니어링, 824px)만 확실히 초과.
       #section8·9 는 100vh 를 20px 안팎만 넘어 스냅 유지가 자연스럽다.
       추후 100vh 를 크게 넘기는 섹션엔 is-tall 클래스를 붙이면 제외된다. */
    #section5, .section.is-tall{scroll-snap-align:none; scroll-snap-stop:normal;}
    .section .section_main{padding:0 6px;}
    .section .section_main .main-logo{height:auto !important;}
    .section .section_main .main-logo img{max-width:200px; height:auto;}
    .section .section_main h2{font-size:20px !important; line-height:1.45; text-shadow:0 2px 8px rgba(0,0,0,.9) !important;}
    .section .section_main h2 br{display:none;}      /* 강제 줄바꿈 해제 → 자연 줄바꿈 */
    .section .section_main span{font-size:14px !important; color:#fff !important; opacity:1 !important; text-shadow:0 1px 6px rgba(0,0,0,.95) !important; word-break:keep-all;}
    .section .section_main span br{display:none;}
    /* 세로 스크롤에서는 '아래로' 화살표가 의미 없음 */
    .section .main_arr{display:none !important;}

    /* ---- 4. #menu(우측 앵커 네비) 숨김 ----
       상단 GNB(COMPANY/BUSINESS…)가 이미 있어 모바일에선 불필요하고
       투명 배경이라 이미지와 겹쳐 보이는 문제의 원인. */
    #menu{display:none !important;}

    /* fullPage 기본 우측 네비 점(navigation:true)도 숨김 */
    #fp-nav,
    .fp-slidesNav{display:none !important;}

    /* ---- 5. 상단 nav(GNB) : 하단고정(bottom:0) → 상단고정으로 ---- */
    .nav{bottom:auto !important; top:0 !important; background:#fff !important; box-shadow:0 2px 6px rgba(0,0,0,.15) !important;}
    .nav .nav-inner{
        width:100% !important;
        padding-left:0 !important;
    }
    .nav .logo{
        top:18px !important;                 /* 세로중앙 대신 상단에 고정 → 위로 올림 */
        left:50% !important;
        transform:translateX(-50%) !important;
        width:150px !important; height:34px !important;
        z-index:2;
    }
    .nav .nav-menu{height:48px !important;}
    .nav .nav-menu .inner,
    .nav .nav-menu .inner2{
        line-height:48px !important;
        font-size:12px !important;
    }
    /* 로고 아래로 메뉴 줄 배치 (로고 top18 + 높이34 + 여유) + 하단 여백 */
    .nav .nav-inner{padding-top:60px !important; padding-bottom:6px !important;}

    /* ---- 6. 고정 요소 정리 ---- */
    .latest_notice{display:none !important;}
    .mainfooter{
        position:static !important;
        text-align:center !important;
        bottom:auto !important; right:auto !important;
        padding:18px 10px !important;
        opacity:.6 !important;
        background:#0a1a3a;
    }
    .dot{display:none !important;}   /* 패턴 오버레이는 모바일에서 생략(가독성) */
}

/* ---- 소형폰(≤480px) 미세 조정 ---- */
@media all and (max-width:480px){
    .section{padding:80px 16px 50px !important;}
    .section .section_inner .section_text p{font-size:26px !important;}
    .section .section_inner .section_text h2{font-size:17px !important;}
    .section .section_main h2{font-size:18px !important;}
    .section .section_inner .section_img img{max-width:78%;}
}

/* ---- 초소형(≤360px) ---- */
@media all and (max-width:360px){
    .section .section_inner .section_text p{font-size:23px !important;}
    .nav .nav-menu .inner,
    .nav .nav-menu .inner2{font-size:11px !important;}
}

/* ============================================================
   모바일 메인: 스크롤 등장 애니메이션 (fade + up)
   - JS(IntersectionObserver)가 섹션이 보이면 .in 클래스를 부여
   - 데스크톱(1025px 이상)에는 적용 안 함 (fullPage가 처리)
   - prefers-reduced-motion(모션 최소화 설정) 사용자에겐 비활성
   ============================================================ */
@media all and (max-width:1024px){
    /* 애니 대상: 이미지 / 텍스트 / 첫 섹션 콘텐츠 */
    .js-anim .section_img,
    .js-anim .section_main .main-logo{
        opacity:0;
        transform:translateY(20px) scale(.96);
        transition:opacity .6s ease, transform .6s ease;
        will-change:opacity, transform;
    }
    .js-anim .section_text{
        opacity:0;
        transform:translateY(28px);
        transition:opacity .7s ease, transform .7s ease;
        transition-delay:.18s;   /* 텍스트는 이미지보다 살짝 늦게 */
        will-change:opacity, transform;
    }

    /* 섹션이 화면에 들어오면 */
    .js-anim .section.in .section_img,
    .js-anim .section.in .section_main .main-logo{
        opacity:1;
        transform:translateY(0) scale(1);
    }
    .js-anim .section.in .section_text{
        opacity:1;
        transform:translateY(0);
    }
}

/* 모션 최소화를 원하는 사용자 존중 */
@media (prefers-reduced-motion: reduce){
    .js-anim .section_img,
    .js-anim .section_text,
    .js-anim .section_main{
        opacity:1 !important; transform:none !important; transition:none !important;
    }
}