@charset "utf-8";

/* ==========================================================================
   JETCO Main Page CSS — Figma "2026.07.16 메인페이지" 기준 재퍼블리싱
   - 이전 시안(2026-07-01) 백업: /css/main_20260722_bak.css
   - 이 파일은 headHtml.jsp 가 전 페이지에 로드하므로,
     메인 전용 스타일은 반드시 body.main-page 스코프로 작성한다.
     (예외: #footer-redesign 은 전 페이지 공통 푸터라 전역 정의)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 디자인 토큰 (Figma Variables → CSS 변수)
   -------------------------------------------------------------------------- */
:root {
    /* Base */
    --jt-bg-dark:        #08101A;   /* azure-7  : 페이지/푸터 바탕 */
    --jt-bg-deep:        #010309;   /* blue-2   : 히어로 바탕 */
    --jt-bg-light:       #F4F9FF;   /* grey-98  */
    --jt-bg-light-2:     #E3ECF9;   /* grey-93  */
    --jt-bg-light-3:     #D9E6F9;   /* grey-91  */
    --jt-bg-white:       #FAFCFF;   /* grey-99  */

    /* Brand */
    --jt-blue:           #076BE3;   /* azure-46 : 주 액션 */
    --jt-blue-deep:      #003AB0;   /* azure-35 */
    --jt-blue-mid:       #085DC7;   /* azure-41 */
    --jt-blue-soft:      #3D7EDE;   /* azure-55 */
    --jt-blue-link:      #005CCC;   /* azure-40 : 텍스트 링크 */
    --jt-sky:            #59AAF8;   /* azure-66 */
    --jt-sky-2:          #71BCFF;   /* 히어로 강조 */
    --jt-sky-3:          #88BFFF;   /* azure-77 : 카드 태그 */
    --jt-sky-4:          #9CC6FF;   /* azure-81 : 섹션 배지 */
    --jt-sky-5:          #A6D2FF;   /* azure-83 : 히어로 배지 */
    --jt-cyan:           #29C9FA;
    --jt-teal:           #00D2D3;
    --jt-green:          #32C364;

    /* Text */
    --jt-text-on-dark:   #F4F9FF;
    --jt-text-on-dark-2: #F1F6FC;
    --jt-text-on-dark-3: #C5CFDB;
    --jt-text-on-dark-4: #9099A5;
    --jt-text-on-light:  #050E1A;
    --jt-text-on-light-2:#030915;
    --jt-text-muted:     #565E69;
    --jt-text-muted-2:   #78818C;
    --jt-text-muted-3:   #969FAB;

    /* Line */
    --jt-line-dark:      #2E3947;   /* azure-23 */
    --jt-line-footer:    #242F3D;   /* azure-19 */

    /* Layout */
    --jt-container:      1344px;
    --jt-radius-card:    20px;
    --jt-font:           'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Malgun Gothic', sans-serif;
    --jt-font-en:        'Inter', 'Pretendard', -apple-system, sans-serif;
}

/* --------------------------------------------------------------------------
   1. 메인 페이지 레이아웃 리셋 (공통 모듈 골격 무력화)
   -------------------------------------------------------------------------- */
html {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body.main-page {
    height: auto !important;
    overflow: visible !important;         /* 이중 스크롤바 방지 */
    overflow-x: hidden !important;
    background-color: var(--jt-bg-dark) !important;
    font-family: var(--jt-font);
    color: var(--jt-text-on-dark);
    -webkit-font-smoothing: antialiased;
}

/* sticky footer (2026-08-03)
   콘텐츠가 짧은 페이지(게시글 0건인 목록 등)에서 푸터가 화면 중간에 뜨고
   그 아래로 빈 공간이 보이던 문제. #wrap 을 세로 flex + 최소 화면 높이로 두고
   푸터에 margin-top:auto 를 줘서 남는 공간을 흡수시킨다. */
body.main-page #wrap,
body.main-page .wrap {
    display: flex !important;
    flex-direction: column !important;
    margin-left: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;   /* 모바일 주소창 높이 변화 대응 (미지원 시 위 100vh) */
    overflow: visible !important;
    width: 100% !important;
    max-width: none !important;
    background: transparent !important;
}

body.main-page .program_box { display: none !important; }   /* 좌측 사이드 GNB 숨김 */
body.main-page #header      { display: none !important; }   /* 공통 헤더 골격 숨김(모바일 메뉴 스크립트는 유지) */
body.main-page footer,
body.main-page #footer-redesign { display: block !important; }

body.main-page #container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
    flex-shrink: 0;   /* flex 아이템으로서 내용이 눌리지 않도록 */
    background: transparent !important;
}

body.main-page img { max-width: 100%; }
body.main-page a { text-decoration: none; }
body.main-page ul, body.main-page li { list-style: none; margin: 0; padding: 0; }
body.main-page h1, body.main-page h2, body.main-page h3,
body.main-page h4, body.main-page p { margin: 0; }

/* 공통 섹션 컨테이너 */
body.main-page .jt-inner {
    width: 100%;
    max-width: var(--jt-container);
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. 공통 컴포넌트 — 섹션 배지 / 타이틀 / 링크
   -------------------------------------------------------------------------- */
body.main-page .jt-badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 23px;
    border-radius: 999px;
    background: linear-gradient(174deg, #0C3164 0%, #001339 100%);
    border: 1px solid rgba(55, 131, 240, 0.55);
    color: var(--jt-sky-4);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
}

/* ==========================================================================
   타이틀 위 eyebrow pill 뱃지 일괄 숨김 (2026-07-23 요청)
   - 전 페이지의 섹션/히어로 뱃지(REFERENCES · EDUCATION · HISTORY 등) 제거.
   - 예외(유지): 메인 '보안 뉴스 & 소식'(.jt-news) / '수상 및 인증'(.jt-awards) 섹션.
   - 각 페이지 전용 CSS(education/partner/…)의 뱃지 정의를 덮기 위해 !important 사용.
   ========================================================================== */
.jt-badge,
.jt-faq-hero-badge,
.jt-edu-badge,
.jt-edu-sec-badge,
.jt-lc-hero-badge,
.jt-lc-badge,
.jt-hs-hero-badge,
.jt-hs-badge,
.jt-pt-hero-badge,
.jt-pt-badge,
.jt-nt-hero-badge,
.jt-prd-badge,
.jt-vendor-badge,
.jt-lic-badge {
    display: none !important;
}
/* 예외 — 유지할 두 섹션 */
body.main-page .jt-news .jt-badge,
body.main-page .jt-awards .jt-badge {
    display: inline-flex !important;
}

body.main-page .jt-sec-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}

body.main-page .jt-sec-head.is-center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

body.main-page .jt-sec-title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--jt-text-on-light-2);
    margin-top: 18px;
}

body.main-page .jt-sec-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--jt-text-muted);
    margin-top: 14px;
}

body.main-page .jt-sec-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--jt-blue-link);
    white-space: nowrap;
    transition: gap .2s ease, color .2s ease;
}
body.main-page .jt-sec-link:hover { gap: 12px; color: var(--jt-blue); }

/* 다크 섹션용 변형 */
body.main-page .is-dark .jt-sec-title { color: var(--jt-text-on-dark); }
body.main-page .is-dark .jt-sec-desc  { color: #C2CFE2; }
body.main-page .is-dark .jt-sec-link  { color: var(--jt-sky); }

/* --------------------------------------------------------------------------
   3. GNB (메인 전용 헤더)
   -------------------------------------------------------------------------- */
body.main-page .jt-topline {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 2px;
    z-index: 1002;
    background: linear-gradient(90deg, var(--jt-blue) 0%, var(--jt-sky) 50%, var(--jt-blue) 100%);
}

body.main-page .jt-header {
    position: fixed;
    top: 2px; left: 0;
    width: 100%;
    z-index: 1001;
    background: rgba(8, 16, 26, 0.85);
    border-bottom: 1px solid rgba(46, 57, 71, 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background .25s ease, box-shadow .25s ease;
}
body.main-page .jt-header.is-scrolled {
    background: rgba(8, 16, 26, 0.96);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

body.main-page .jt-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
}

body.main-page .jt-logo { display: flex; align-items: center; gap: 6px; }
body.main-page .jt-logo img { display: block; height: 33.12px; width: auto; }

body.main-page .jt-gnb { display: flex; align-items: center; gap: 36px; }
body.main-page .jt-gnb > li > a {
    display: block;
    padding: 12px 2px;
    font-size: 14px;
    font-weight: 600;
    color: #C9CED4;
    transition: color .2s ease;
}
body.main-page .jt-gnb > li > a:hover { color: var(--jt-sky-2); }

body.main-page .jt-header-cta {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--jt-blue);
    color: var(--jt-text-on-dark);
    font-size: 14px;
    font-weight: 700;
    transition: background .2s ease, transform .2s ease;
}
body.main-page .jt-header-cta:hover { background: #0A5BC0; transform: translateY(-1px); }

/* 모바일 토글 + 드로어 */
body.main-page .jt-nav-toggle {
    display: none;
    width: 40px; height: 40px;
    border: 0; background: transparent;
    cursor: pointer;
    padding: 8px;
}
body.main-page .jt-nav-toggle span {
    display: block;
    height: 2px;
    background: #C9CED4;
    margin: 5px 0;
}

body.main-page .jt-mnav {
    display: none;
    border-top: 1px solid rgba(46, 57, 71, 0.5);
    background: rgba(8, 16, 26, 0.98);
}
body.main-page .jt-mnav.is-open { display: block; }
body.main-page .jt-mnav a {
    display: block;
    padding: 15px 24px;
    font-size: 15px;
    font-weight: 600;
    color: #C9CED4;
    border-bottom: 1px solid rgba(46, 57, 71, 0.35);
}
body.main-page .jt-mnav a:last-child { border-bottom: 0; color: var(--jt-sky-2); }

/* --------------------------------------------------------------------------
   4. [01] HERO
   -------------------------------------------------------------------------- */
body.main-page .jt-hero {
    position: relative;
    min-height: 1200px;
    padding: 180px 32px 120px;
    background: var(--jt-bg-deep);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* 배경 레이어 (실사 이미지 교체 지점: .jt-hero-photo 의 background-image) */
body.main-page .jt-hero-photo,
body.main-page .jt-hero-veil,
body.main-page .jt-hero-glow,
body.main-page .jt-hero-vignette {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
}
body.main-page .jt-hero-photo {
    /* 2026-08-03 : 배경을 아래로 120px 밀어냄.
       이미지 하단의 밝은 그리드 웨이브가 CTA 버튼 뒤까지 올라와 버튼이 묻히던 문제.
       (이미지 1920x1166 은 히어로 높이에 cover 로 딱 맞아 background-position 만으로는
        세로 여유가 없어 움직이지 않으므로, 레이어 자체를 아래로 늘린다. 넘친 부분은
        .jt-hero 의 overflow:hidden 으로 잘린다.) */
    bottom: -120px;
    background: url('/img/jetco_bg_hero.jpg') center center / cover no-repeat;
    background-size: cover;
    background-position: center bottom;
    filter: brightness(1.06) contrast(1.1) saturate(0.75);   /* 밝기 +6% (2026-08-03) */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}
body.main-page .jt-hero-veil {
    background: linear-gradient(180deg,
        rgba(1, 3, 9, 0.4) 0%,
        rgba(1, 6, 17, 0.15) 38%,
        rgba(1, 6, 17, 0.18) 70%,
        rgba(1, 3, 9, 0.4) 100%);
}
body.main-page .jt-hero-vignette {
    background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(0,0,0,0) 30%, #000 100%);
    opacity: .6;
}
body.main-page .jt-hero-glow {
    display: none;
}

/* 코너 마크 */
body.main-page .jt-hero-corner {
    position: absolute;
    width: 47px; height: 47px;
    border-color: rgba(83, 163, 242, 0.6);
    border-style: solid;
    border-width: 0;
    pointer-events: none;
}
body.main-page .jt-hero-corner.tl { top: 42px; left: 42px;  border-left-width: 1px; border-top-width: 1px; }
body.main-page .jt-hero-corner.tr { top: 42px; right: 42px; border-right-width: 1px; border-top-width: 1px; }
body.main-page .jt-hero-corner.bl { bottom: 42px; left: 42px;  border-left-width: 1px; border-bottom-width: 1px; }
body.main-page .jt-hero-corner.br { bottom: 42px; right: 42px; border-right-width: 1px; border-bottom-width: 1px; }

/* 좌측 눈금 장식 */
body.main-page .jt-hero-ticks {
    position: absolute;
    left: 56px; top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 9px;
    pointer-events: none;
}
body.main-page .jt-hero-ticks i { display: block; height: 1.5px; background: rgba(83, 163, 242, 0.5); }
body.main-page .jt-hero-ticks i:nth-child(even) { width: 13px; background: rgba(83, 163, 242, 0.35); }
body.main-page .jt-hero-ticks i:nth-child(odd)  { width: 22px; }

/* 좌표 */
body.main-page .jt-hero-coord {
    position: absolute;
    top: 52px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--jt-font-en);
    font-size: 11px;
    letter-spacing: 3.74px;
    color: rgba(144, 188, 233, 0.65);
    white-space: nowrap;
}

/* 히어로 본문 */
body.main-page .jt-hero-body {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 29px;
}

body.main-page .jt-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: var(--jt-font-en);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.08px;
    color: var(--jt-sky-5);
}
/* Blinking green dot removed */

body.main-page .jt-hero-title {
    font-size: 76px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1.2px;
    color: #FAFCFF;
    text-shadow: 0 4px 40px rgba(0, 0, 2, 0.6);
}
body.main-page .jt-hero-title em {
    font-style: normal;
    color: var(--jt-sky-2);
}

body.main-page .jt-hero-desc {
    max-width: 680px;
    font-size: 19px;
    line-height: 1.8;
    color: #D5DFEB;
    text-shadow: 0 2px 16px rgba(0, 0, 2, 0.7);
}

body.main-page .jt-hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 11px;
}

body.main-page .jt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 9px;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
body.main-page .jt-btn-primary {
    padding: 17px 34px;
    background: var(--jt-blue);
    color: #F4F9FF;
    box-shadow: 0 12px 32px rgba(7, 107, 227, 0.5);
}
body.main-page .jt-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(7, 107, 227, 0.6); }
body.main-page .jt-btn-ghost {
    padding: 18px 35px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #F4F9FF;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
body.main-page .jt-btn-ghost:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-2px); }

/* 스크롤 인디케이터 */
body.main-page .jt-hero-scroll {
    position: absolute;
    left: 50%; bottom: 42px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 2;
}
body.main-page .jt-hero-scroll span {
    font-family: var(--jt-font-en);
    font-size: 11px;
    letter-spacing: 2.2px;
    color: rgba(189, 208, 232, 0.8);
}
body.main-page .jt-hero-scroll i {
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: #B1D2F4;
    opacity: .6;
    animation: jtBounce 1.8s ease-in-out infinite;
}
@keyframes jtBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

/* --------------------------------------------------------------------------
   5. [02] 핵심 사업 영역 (OVERVIEW)
   -------------------------------------------------------------------------- */
/* 배경 = mainslide.png 의 흐릿한 블루 그라디언트 */
body.main-page .jt-overview {
    position: relative;
    padding: 100px 0 110px;
    background:
        radial-gradient(ellipse 55% 45% at 18% 12%, rgba(163, 180, 202, 0.95) 0%, rgba(163, 180, 202, 0) 62%),
        radial-gradient(ellipse 65% 55% at 88% 22%, rgba(64, 100, 150, 0.85) 0%, rgba(64, 100, 150, 0) 66%),
        radial-gradient(ellipse 75% 60% at 10% 96%, rgba(198, 210, 226, 0.9) 0%, rgba(198, 210, 226, 0) 62%),
        radial-gradient(ellipse 55% 45% at 92% 92%, rgba(170, 188, 210, 0.85) 0%, rgba(170, 188, 210, 0) 62%),
        linear-gradient(135deg, #6E87A9 0%, #2C4771 46%, #4B6890 100%);
    overflow: hidden;
}

body.main-page .jt-overview .jt-sec-head { position: relative; z-index: 1; }
body.main-page .jt-overview .jt-sec-title { color: #FFFFFF; text-shadow: 0 4px 24px rgba(0, 8, 22, 0.4); }
body.main-page .jt-overview .jt-sec-desc {
    max-width: 700px;
    color: rgba(226, 236, 250, 0.86);
    text-shadow: 0 2px 14px rgba(0, 8, 22, 0.35);
}
body.main-page .jt-overview .jt-badge {
    background: rgba(10, 26, 52, 0.55);
    border-color: rgba(180, 205, 240, 0.55);
    color: #DCE8FA;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* ---- 센터 포커스 캐러셀 (docs/mainslide.png 기준) ---- */
body.main-page .jt-ov-slider {
    position: relative;
    z-index: 1;
    padding-bottom: 104px;   /* 하단 컨트롤 2줄(화살표 + 점/재생) 자리 */
}
body.main-page .jt-ov-viewport {
    overflow: hidden;
    padding: 56px 0 24px;   /* 상단 = 카드 위로 걸친 영문 타이틀 자리 */
}
body.main-page .jt-ov-track {
    display: flex;
    align-items: center;
    will-change: transform;
    transition: transform .65s cubic-bezier(.4, 0, .2, 1);
}
/* 무한 루프 리셋 순간 — 트랙과 카드 내부 요소의 모든 전환을 잠근다
   (안 그러면 제목/본문 등장 애니메이션이 다시 재생돼 글씨가 튀어 올라온다) */
body.main-page .jt-ov-track.is-jumping,
body.main-page .jt-ov-track.is-jumping * {
    transition: none !important;
    animation: none !important;
}

body.main-page .jt-ov-slide {
    position: relative;
    display: block;
    flex: none;
    width: 690px;
    height: 690px;
    /* 중심 간격 550px = 활성 반폭 345 + 비활성 반폭 205 → 카드끼리 겹치지 않고 맞닿음 */
    margin-right: -140px;
    border-radius: var(--jt-radius-card);
    overflow: visible;
    transform: scale(.594);        /* 690 × .594 = 410px — 레퍼런스 비활성 카드 폭 */
    opacity: .62;
    filter: brightness(.85) saturate(.6);
    transition: transform .65s cubic-bezier(.4, 0, .2, 1), opacity .65s ease, filter .65s ease;
}
body.main-page .jt-ov-slide.is-active {
    z-index: 3;
    transform: scale(1);
    opacity: 1;
    filter: none;
}

/* 배경(사진 교체 지점) + 하단 그라디언트 */
body.main-page .jt-ov-card-bg {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: var(--jt-radius-card);
    background: linear-gradient(150deg, #0B2647 0%, #030A18 100%);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
body.main-page .jt-ov-slide.is-hw  .jt-ov-card-bg { background: linear-gradient(150deg, #052C3D 0%, #01080F 100%); }
body.main-page .jt-ov-slide.is-edu .jt-ov-card-bg { background: linear-gradient(150deg, #04322F 0%, #010B0B 100%); }
body.main-page .jt-ov-slide.is-svc .jt-ov-card-bg { background: linear-gradient(150deg, #05294A 0%, #010912 100%); }
body.main-page .jt-ov-card-bg::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(180deg, rgba(4, 21, 49, 0.25) 0%, rgba(0, 3, 16, 0.2) 42%, rgba(0, 1, 8, 0.92) 100%);
}

/* 비활성 카드 안 워터마크 영문 */
body.main-page .jt-ov-watermark {
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    text-align: center;
    font-family: var(--jt-font-en);
    font-size: 46px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(226, 236, 250, 0.42);
    transition: opacity .4s ease;
}
body.main-page .jt-ov-slide.is-active .jt-ov-watermark { opacity: 0; }

/* 활성 카드 상단 경계에 걸치는 큰 영문 타이틀 (레퍼런스와 동일) */
body.main-page .jt-ov-headline {
    position: absolute;
    left: 40px; top: -34px;
    z-index: 4;
    font-size: 64px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
    color: #FFFFFF;
    white-space: nowrap;
    text-shadow: 0 6px 30px rgba(0, 0, 2, 0.55);
    opacity: 0;
    transition: opacity .5s ease .1s;
}
body.main-page .jt-ov-slide.is-active .jt-ov-headline { opacity: 1; }

body.main-page .jt-ov-body {
    position: absolute;
    display: block;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    padding: 40px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s ease .1s, transform .5s ease .1s;
}
body.main-page .jt-ov-slide.is-active .jt-ov-body { opacity: 1; transform: none; }

body.main-page .jt-ov-name {
    display: block;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;
    color: #7DB9FF;
}
body.main-page .jt-ov-slide.is-hw  .jt-ov-name { color: var(--jt-cyan); }
body.main-page .jt-ov-slide.is-edu .jt-ov-name { color: var(--jt-teal); }
body.main-page .jt-ov-slide.is-svc .jt-ov-name { color: #48C5FF; }
body.main-page .jt-ov-label {
    display: block;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.48px;
    color: #7DB9FF;
}
body.main-page .jt-ov-slide.is-hw  .jt-ov-label { color: var(--jt-cyan); }
body.main-page .jt-ov-slide.is-edu .jt-ov-label { color: var(--jt-teal); }
body.main-page .jt-ov-slide.is-svc .jt-ov-label { color: #48C5FF; }

body.main-page .jt-ov-desc {
    display: block;
    max-width: 620px;
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(232, 240, 250, 0.82);
}

/* 좌우 원형 화살표 */
/* 화살표는 하단 컨트롤 바(.jt-ov-controls) 안에 점/재생과 한 줄로 배치된다 */
body.main-page .jt-ov-arrow {
    flex: none;
    width: 42px; height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
body.main-page .jt-ov-arrow:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; }

/* 하단 인디케이터 + 재생/정지 */
body.main-page .jt-ov-controls {
    position: absolute;
    left: 0; right: 0; bottom: 10px;
    z-index: 5;
    display: flex;
    flex-direction: column;      /* 위: 화살표 / 아래: 점+재생 */
    align-items: center;
    gap: 16px;
}
body.main-page .jt-ov-arrows { display: flex; gap: 12px; }   /* 위쪽 줄 */
body.main-page .jt-ov-navrow {                                /* 아래쪽 줄 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}
body.main-page .jt-ov-dots { display: flex; align-items: center; gap: 8px; }
body.main-page .jt-ov-dot {
    width: 22px; height: 2px;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, 0.42);
    cursor: pointer;
    transition: background .3s ease, width .3s ease;
}
body.main-page .jt-ov-dot.is-on { width: 30px; background: #FFFFFF; }
/* 일시정지/재생 아이콘 — 폰트 글리프 대신 CSS 로 그린다(글꼴에 따라 얇은 일자로 보이는 문제 방지) */
body.main-page .jt-ov-play {
    position: relative;
    width: 16px; height: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0;
    cursor: pointer;
    opacity: .8;
    transition: opacity .2s ease;
}
body.main-page .jt-ov-play:hover { opacity: 1; }
body.main-page .jt-ov-play::before,
body.main-page .jt-ov-play::after {
    content: '';
    position: absolute;
    top: 0;
    width: 4px; height: 14px;
    background: #FFFFFF;
}
body.main-page .jt-ov-play::before { left: 2px; }
body.main-page .jt-ov-play::after  { right: 2px; }

/* 정지 상태 → 재생(▶) 아이콘 */
body.main-page .jt-ov-play.is-paused::before {
    left: 3px;
    width: 0; height: 0;
    background: transparent;
    border-left: 12px solid #FFFFFF;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}
body.main-page .jt-ov-play.is-paused::after { display: none; }

/* --------------------------------------------------------------------------
   6. [03] 공식 공급 제품군 (PRODUCTS) — 3열 세로 오토 스크롤
   -------------------------------------------------------------------------- */
body.main-page .jt-products {
    position: relative;
    padding: 96px 0;
    background: url('/img/jetco_bg_1.jpg') center center / cover no-repeat,
                linear-gradient(160deg, #041127 0%, #01060F 100%);
    overflow: hidden;
}
body.main-page .jt-products::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(180deg, rgba(0, 3, 16, 0.62) 0%, rgba(0, 2, 8, 0.72) 100%);
    pointer-events: none;
}

body.main-page .jt-products-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 56px;
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 60px;
    box-sizing: border-box;
}

body.main-page .jt-products-aside { width: 420px; flex: none; }
body.main-page .jt-products-aside .jt-sec-title {
    color: #EDF2F9;
    font-size: 40px;
    margin-top: 14px;
}
body.main-page .jt-products-aside .jt-sec-desc {
    color: var(--jt-text-muted-3);
    font-size: 16px;
    line-height: 1.6;
}
body.main-page .jt-products-aside .jt-sec-link { margin-top: 20px; color: var(--jt-sky); }

/* 세로 무한 스크롤 3열 */
body.main-page .jt-prod-track {
    flex: 1 1 0;
    min-width: 0;
    height: 696px;
    position: relative;
    display: flex;
    gap: 22px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
body.main-page .jt-prod-col {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}
body.main-page .jt-prod-col-inner {
    display: flex;
    flex-direction: column;
    gap: 22px;
    will-change: transform;
    animation: jtScrollUp 34s linear infinite;
}
body.main-page .jt-prod-col:nth-child(2) .jt-prod-col-inner {
  animation: jtScrollDown 44s linear infinite;
}
body.main-page .jt-prod-col:nth-child(3) .jt-prod-col-inner {
  animation-duration: 38s;
}
body.main-page .jt-prod-track:hover .jt-prod-col-inner {
  animation-play-state: paused;
}

@keyframes jtScrollUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(calc(-50% - 11px)); }
}

@keyframes jtScrollDown {
    0% { transform: translateY(calc(-50% - 11px)); }
    100% { transform: translateY(0); }
}

body.main-page .jt-prod-card {
    display: block;
    min-height: 316px;
    box-sizing: border-box;
    padding: 33px 25px 33px 28px;
    border-radius: 16px;
    background: linear-gradient(163deg, #012147 0%, #00081D 100%);
    border: 1px solid var(--jt-line-dark);
    border-left-width: 4px;
    transition: border-color .25s ease, transform .25s ease;
}
body.main-page .jt-prod-card:hover {
    border-color: rgba(7, 107, 227, 0.6);
    transform: translateX(4px);
}
body.main-page .jt-prod-card.is-featured {
    background: linear-gradient(163deg, #053069 0%, #00113E 100%);
    border-color: rgba(7, 107, 227, 0.6);
}

body.main-page .jt-prod-icon {
    width: 50px; height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 800;
    color: var(--jt-sky-3);
}
body.main-page .jt-prod-card.is-featured .jt-prod-icon {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #F4F9FF;
}

body.main-page .jt-prod-tag {
    display: inline-flex;
    margin-top: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--jt-sky-3);
}
body.main-page .jt-prod-card.is-featured .jt-prod-tag {
    background: rgba(255, 255, 255, 0.18);
    color: #F4F9FF;
}

body.main-page .jt-prod-name {
    display: block;
    margin-top: 22px;
    font-size: 20px;
    font-weight: 800;
    color: var(--jt-text-on-dark-2);
}
body.main-page .jt-prod-card.is-featured .jt-prod-name { color: #F4F9FF; }

body.main-page .jt-prod-vendor {
    display: block;
    margin-top: 12px;
    font-size: 13.5px;
    color: var(--jt-text-muted-2);
}
body.main-page .jt-prod-card.is-featured .jt-prod-vendor { color: #BACFEF; }

body.main-page .jt-prod-desc {
    display: block;
    margin-top: 20px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--jt-text-on-dark-4);
}
body.main-page .jt-prod-card.is-featured .jt-prod-desc { color: #DDE5F2; }

/* --------------------------------------------------------------------------
   6-2. [03-2] 기술과 신뢰로 완성한 포렌식 솔루션
   -------------------------------------------------------------------------- */
body.main-page .jt-solution {
    position: relative;
    padding: 130px 0;
    background: #030A16;
    overflow: hidden;
}
/* 배경 우주 이미지 — 천천히 확대·이동하는 켄번즈 모션 (움직이는 느낌) */
body.main-page .jt-solution::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: url('/img/main/solution_bg.jpg') center center / cover no-repeat;
    transform-origin: 60% 40%;
    animation: jtSolutionDrift 36s ease-in-out infinite alternate;
    will-change: transform;
    pointer-events: none;
}
/* 어두운 그라데이션 오버레이 (정적) */
body.main-page .jt-solution::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(180deg, rgba(3, 8, 20, 0.5) 0%, rgba(1, 5, 13, 0.72) 100%);
    pointer-events: none;
    z-index: 1;
}
@keyframes jtSolutionDrift {
    0%   { transform: scale(1.1)  translate3d(-2.6%, 1.6%, 0); }
    100% { transform: scale(1.22) translate3d(2.6%, -1.6%, 0); }
}

/* 별 드리프트 오버레이 — 끊김 없이 흐르는 우주 느낌 (패럴랙스 2겹) */
body.main-page .jt-solution-fx {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}
body.main-page .jt-solution-fx::before,
body.main-page .jt-solution-fx::after {
    content: '';
    position: absolute;
    top: -100%; right: -100%; bottom: -100%; left: -100%;
    background-repeat: repeat;
    will-change: transform;
}
/* 원경 — 작고 촘촘, 느리게 (좌하향) */
body.main-page .jt-solution-fx::before {
    background-image:
        radial-gradient(1.4px 1.4px at 15% 25%, rgba(190, 215, 255, 0.85), transparent 60%),
        radial-gradient(1.2px 1.2px at 65% 55%, rgba(150, 190, 255, 0.75), transparent 60%),
        radial-gradient(1px 1px   at 40% 80%, rgba(255, 255, 255, 0.70), transparent 60%),
        radial-gradient(1.2px 1.2px at 85% 35%, rgba(170, 205, 255, 0.70), transparent 60%),
        radial-gradient(1px 1px   at 55% 12%, rgba(210, 225, 255, 0.70), transparent 60%);
    background-size: 400px 400px;
    animation: jtStarsFar 60s linear infinite;
}
/* 근경 — 조금 크고, 빠르게 (우하향) */
body.main-page .jt-solution-fx::after {
    background-image:
        radial-gradient(2px 2px   at 30% 40%, rgba(200, 225, 255, 0.90), transparent 60%),
        radial-gradient(1.6px 1.6px at 75% 70%, rgba(160, 200, 255, 0.80), transparent 60%),
        radial-gradient(1.6px 1.6px at 50% 18%, rgba(255, 255, 255, 0.75), transparent 60%);
    background-size: 560px 560px;
    animation: jtStarsNear 38s linear infinite;
}
@keyframes jtStarsFar {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-400px, 400px, 0); }
}
@keyframes jtStarsNear {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(560px, 560px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    body.main-page .jt-solution::before { animation: none; transform: scale(1.1); }
    body.main-page .jt-solution-fx { display: none; }
}

body.main-page .jt-solution-inner {
    position: relative;
    z-index: 3;
    text-align: center;
}

body.main-page .jt-solution .jt-sec-title {
    color: #FFFFFF;
    font-size: 40px;
    margin-top: 0;
}
body.main-page .jt-solution-lead {
    margin-top: 26px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
    color: #BBBBBB;
}
body.main-page .jt-solution-lead + .jt-solution-lead { margin-top: 20px; }

body.main-page .jt-solution-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 44px;
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #59AAF8;
    border-bottom: 1px solid rgba(79, 150, 231, 0.85);
    transition: color .2s ease, border-color .2s ease;
}
body.main-page .jt-solution-link:hover {
    color: var(--jt-sky-2);
    border-color: var(--jt-sky-2);
}
body.main-page .jt-solution-link-arrow {
    flex-shrink: 0;
    transition: transform .2s ease;
}
body.main-page .jt-solution-link:hover .jt-solution-link-arrow {
    transform: translateX(4px);
}

/* 라인 아이콘 카드 3종 */
body.main-page .jt-solution-cards {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 110px;
    margin-top: 96px;
    flex-wrap: wrap;
}
body.main-page .jt-solution-card {
    width: 264px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
body.main-page .jt-solution-icon {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .4s cubic-bezier(.2, .7, .3, 1), filter .4s ease;
}
body.main-page .jt-solution-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* 카드 호버 시 아이콘 살짝 떠오르며 확대 + 파란 글로우 */
body.main-page .jt-solution-card { cursor: default; }
body.main-page .jt-solution-card:hover .jt-solution-icon {
    transform: translateY(-8px) scale(1.14);
    filter: drop-shadow(0 10px 22px rgba(89, 170, 248, 0.6));
}
body.main-page .jt-solution-card:hover .jt-solution-card-title { color: var(--jt-sky-2); }
@media (prefers-reduced-motion: reduce) {
    body.main-page .jt-solution-icon { transition: filter .3s ease; }
    body.main-page .jt-solution-card:hover .jt-solution-icon { transform: none; }
}
body.main-page .jt-solution-card-title {
    margin-top: 46px;
    font-size: 22px;
    font-weight: 700;
    color: #FFFFFF;
}
body.main-page .jt-solution-card-desc {
    margin-top: 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
    color: #BBBBBB;
    text-align: center;   /* 2026-08-03 : 카드(아이콘·제목)와 동일하게 가운데 정렬 */
}

/* --------------------------------------------------------------------------
   7. [04] 37년의 신뢰 (TIMELINE)
   -------------------------------------------------------------------------- */
body.main-page .jt-timeline {
    padding: 112px 0;
    background: #ffffff;
}
body.main-page .jt-timeline .jt-inner { max-width: 1460px; }
body.main-page .jt-timeline .jt-sec-title { font-size: 44px; color: var(--jt-text-on-light); }
body.main-page .jt-timeline .jt-sec-desc  { font-size: 17px; color: #4E5661; }

body.main-page .jt-tl-wrap {
    position: relative;
    margin-top: 72px;
}

/* 진행 바 */
body.main-page .jt-tl-rail {
    position: absolute;
    left: 0; right: 0; top: 51px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #BCC5D1 0%, var(--jt-blue) 60%, var(--jt-blue-deep) 100%);
    box-shadow: 0 0 18px rgba(7, 107, 227, 0.4);
    overflow: hidden;
}
body.main-page .jt-tl-rail::after {
    content: '';
    position: absolute;
    top: 0; left: -36px;
    width: 36px; height: 6px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%);
    animation: jtRail 3.5s linear infinite;
}
@keyframes jtRail {
    from { left: -36px; }
    to   { left: 100%; }
}

body.main-page .jt-tl-nodes {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}
body.main-page .jt-tl-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
body.main-page .jt-tl-year {
    font-size: 17px;
    font-weight: 800;
    color: var(--jt-blue-link);
}
body.main-page .jt-tl-dot {
    width: 18px; height: 18px;
    border-radius: 999px;
    background: #CACED4;
    border: 3px solid var(--jt-bg-white);
    box-shadow: 0 0 0 1px #CACED4;
    margin-top: 20px;
    box-sizing: border-box;
}
body.main-page .jt-tl-node:nth-child(2) .jt-tl-dot { background: #667383; box-shadow: 0 0 0 1px #667383; }
body.main-page .jt-tl-node:nth-child(3) .jt-tl-dot { width: 21px; height: 21px; background: var(--jt-blue); box-shadow: 0 0 0 1px var(--jt-blue); margin-top: 19px; }
body.main-page .jt-tl-node:nth-child(4) .jt-tl-dot { width: 20px; height: 20px; background: var(--jt-blue-mid); box-shadow: 0 0 0 1px var(--jt-blue-mid); margin-top: 19px; }
body.main-page .jt-tl-node:nth-child(5) .jt-tl-dot { width: 20px; height: 20px; background: var(--jt-blue-soft); box-shadow: 0 0 0 1px var(--jt-blue-soft); margin-top: 19px; }
body.main-page .jt-tl-node:nth-child(6) .jt-tl-year { color: var(--jt-blue); }
body.main-page .jt-tl-node:nth-child(6) .jt-tl-dot { width: 22px; height: 22px; background: var(--jt-blue-deep); box-shadow: 0 0 0 1px var(--jt-blue-deep); margin-top: 18px; }

body.main-page .jt-tl-cards {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 16px;
}
body.main-page .jt-tl-card {
    position: relative;
    padding: 27px 25px;
    border-radius: 18px;
    background: linear-gradient(170deg, #111B28 0%, #020713 100%);
    border: 1px solid var(--jt-line-dark);
    overflow: hidden;
}
body.main-page .jt-tl-card::before {
    content: '';
    position: absolute;
    width: 120px; height: 120px;
    left: -29px; top: -29px;
    border-radius: 999px;
    background: rgba(151, 159, 171, 0.18);
    filter: blur(18px);
}
body.main-page .jt-tl-card.is-key {
    background: linear-gradient(170deg, #0F1F37 0%, #020919 100%);
    border-color: rgba(7, 107, 227, 0.4);
}
body.main-page .jt-tl-card.is-key::before { background: rgba(7, 107, 227, 0.3); }
body.main-page .jt-tl-card.is-now {
    background: linear-gradient(170deg, #0F1F37 0%, #020919 100%);
    border-color: rgba(0, 58, 176, 0.45);
}
body.main-page .jt-tl-card.is-now::before { background: rgba(0, 58, 176, 0.35); }

body.main-page .jt-tl-chip {
    position: relative;
    display: inline-flex;
    padding: 9px 17px;
    border-radius: 10px;
    background: rgba(7, 107, 227, 0.22);
    border: 1px solid rgba(33, 123, 244, 0.6);
    box-shadow: 0 0 18px rgba(7, 107, 227, 0.45);
    font-size: 17px;
    font-weight: 800;
    color: #CACED4;
}
body.main-page .jt-tl-card.is-key .jt-tl-chip { color: #65BDFF; }
body.main-page .jt-tl-card.is-now .jt-tl-chip { color: #6BAEFF; }

body.main-page .jt-tl-title {
    position: relative;
    margin-top: 18px;
    font-size: 19px;
    font-weight: 800;
    color: var(--jt-text-on-dark-2);
    line-height: 1.35;
}
body.main-page .jt-tl-list {
    position: relative;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
body.main-page .jt-tl-list li {
    font-size: 13.5px;
    line-height: 1.6;
    color: #AFB8C4;
}
body.main-page .jt-tl-card.is-now .jt-tl-list li { color: var(--jt-sky); }

/* --------------------------------------------------------------------------
   8. [05] 공공·수사기관 납품 실적 (REFERENCES)
   -------------------------------------------------------------------------- */
body.main-page .jt-refs {
    position: relative;
    padding: 72px 0;
    background: #000D1D;   /* 폴백 */
    overflow: hidden;
}
/* 배경 이미지 레이어 — 밝기·채도 상향 (필터가 카드/텍스트에 안 먹도록 분리) */
body.main-page .jt-refs::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 0;
    background: url('/img/jetco_bg_4.jpg') center center / cover no-repeat;
    filter: brightness(1.35) saturate(1.5);
    pointer-events: none;
}
/* 좌측을 살짝 어둡게 하는 그라데이션 오버레이 (텍스트 가독성) */
body.main-page .jt-refs::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 0;
    background: linear-gradient(90deg, rgba(4, 17, 39, 0.26) 0%, rgba(0, 6, 15, 0.36) 99%);
    pointer-events: none;
}
/* 콘텐츠는 배경 레이어 위로 */
body.main-page .jt-refs > .jt-inner,
body.main-page .jt-refs > .jt-ticker { position: relative; z-index: 1; }

body.main-page .jt-refs .jt-inner { max-width: 1384px; }
/* 이 섹션은 배경이 짙은 파랑 그라데이션이므로 텍스트는 반드시 밝은 톤.
   (시안값 #08121F / #464E58 / #004CBB 는 배경에 묻혀 판독 불가였음) */
body.main-page .jt-refs .jt-sec-title { font-size: 40px; color: var(--jt-text-on-dark); }
body.main-page .jt-refs .jt-sec-desc  { max-width: 560px; color: var(--jt-text-on-dark-3); }
body.main-page .jt-refs .jt-sec-link  { color: var(--jt-sky-2); margin-top: 22px; }
body.main-page .jt-refs .jt-sec-link:hover { color: #A6D2FF; }

/* 가로 무한 티커 */
body.main-page .jt-ticker {
    position: relative;
    margin-top: 28px;
    padding: 18px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
body.main-page .jt-ticker-track {
    display: flex;
    gap: 16px;
    width: -webkit-max-content;
    width: max-content;
    animation: jtScrollLeft 300s linear infinite;
}
body.main-page .jt-ticker:hover .jt-ticker-track { animation-play-state: paused; }
@keyframes jtScrollLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

body.main-page .jt-ref-card {
    flex: none;
    width: 190px;
    min-height: 190px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    border-radius: 14px;
    /* 파란 배경이 비쳐 카드가 파랗게 보이지 않도록 거의 불투명한 흰색으로 처리.
       (기존 0.52 반투명 → 배경 그라데이션이 투과되어 파란 톤이 돌았음) */
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F7FB 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 1px 0 1px rgba(255, 255, 255, 0.9), 0 6px 18px rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: #0B1A31;
}

body.main-page .jt-refs-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding: 17px 23px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(122, 176, 255, 0.32);
    font-size: 13.5px;
    font-weight: 600;
    color: #D9E4F2;
}
body.main-page .jt-refs-note i { font-style: normal; color: #FFC24D; font-size: 15px; }

/* --------------------------------------------------------------------------
   9. [06] 보안 뉴스 & 소식 (NEWS)
   -------------------------------------------------------------------------- */
body.main-page .jt-news {
    padding: 96px 0;
    background: var(--jt-bg-white);
    overflow: hidden;
}
body.main-page .jt-news-inner {
    display: flex;
    align-items: flex-start;
    gap: 56px;
    width: 100%;
    max-width: 1544px;
    margin: 0 auto;
    padding: 0 60px;
    box-sizing: border-box;
}
body.main-page .jt-news-aside { width: 330px; flex: none; padding-top: 8px; }
body.main-page .jt-news-aside .jt-sec-title { font-size: 34px; line-height: 1.3; color: var(--jt-text-on-light); }
body.main-page .jt-news-aside .jt-sec-desc  { font-size: 15px; line-height: 1.7; }
body.main-page .jt-news-aside .jt-sec-link  { margin-top: 22px; }

/* 뉴스 카드 리스트 + 양옆 화살표 */
body.main-page .jt-news-stage {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}
body.main-page .jt-news-arrow {
    flex: none;
    width: 44px; height: 44px;
    border: 0;
    border-radius: 999px;
    background: #EAEFF5;
    color: var(--jt-blue-link);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(16, 23, 31, 0.12);
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
body.main-page .jt-news-arrow:hover {
    background: var(--jt-blue);
    color: #fff;
    box-shadow: 0 6px 18px rgba(7, 107, 227, 0.35);
}

body.main-page .jt-news-viewport {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    padding: 10px 4px 20px;
}
body.main-page .jt-news-track {
    display: flex;
    gap: 24px;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

body.main-page .jt-news-card {
    flex: none;
    width: 400px;
    display: flex;
    flex-direction: column;
    border-radius: var(--jt-radius-card);
    background: #fff;
    box-shadow: 0 4px 20px rgba(16, 23, 31, 0.08);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}
body.main-page .jt-news-card:hover {
    transform: translateY(-6px);
}

body.main-page .jt-news-thumb {
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(168deg, #0F1F37 0%, #020713 100%);
    font-family: var(--jt-font-en);
    font-size: 11.3px;
    letter-spacing: 0.48px;
    color: var(--jt-blue);
    background-size: cover;
    background-position: center;
}
body.main-page .jt-news-card.tone-cyan   .jt-news-thumb { background: linear-gradient(168deg, #00232F 0%, #000910 100%); color: #0091C7; }
body.main-page .jt-news-card.tone-teal   .jt-news-thumb { background: linear-gradient(168deg, #002B2B 0%, #000D0D 100%); color: #00A3A5; }
body.main-page .jt-news-card.tone-indigo .jt-news-thumb { background: linear-gradient(168deg, #181C47 0%, #05061D 100%); color: #808FEE; }
body.main-page .jt-news-card.tone-green  .jt-news-thumb { background: linear-gradient(168deg, #0E2B10 0%, #010D02 100%); color: #57A45B; }

body.main-page .jt-news-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 24px 24px 26px;
}
body.main-page .jt-news-date {
    align-self: flex-start;
    padding: 7px 17px;
    border-radius: 999px;
    background: linear-gradient(175deg, #0C2C5A 0%, #01102B 100%);
    border: 1px solid rgba(7, 107, 227, 0.6);
    box-shadow: 0 0 16px rgba(7, 107, 227, 0.45);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.48px;
    color: #8EC6FF;
}
body.main-page .jt-news-card.tone-cyan   .jt-news-date { background: linear-gradient(175deg, #00354C 0%, #001522 100%); border-color: rgba(0, 114, 166, 0.6); box-shadow: 0 0 16px rgba(0, 114, 166, 0.4); color: #58CEF8; }
body.main-page .jt-news-card.tone-teal   .jt-news-date { background: linear-gradient(175deg, #003D3E 0%, #001A1B 100%); border-color: rgba(0, 122, 124, 0.6); box-shadow: 0 0 16px rgba(0, 122, 124, 0.4); color: #3BCFCF; }
body.main-page .jt-news-card.tone-indigo .jt-news-date { background: linear-gradient(175deg, #232955 0%, #0B0D2B 100%); border-color: rgba(77, 87, 183, 0.6); box-shadow: 0 0 16px rgba(77, 87, 183, 0.4); color: #A5B6FF; }
body.main-page .jt-news-card.tone-green  .jt-news-date { background: linear-gradient(175deg, #133716 0%, #021704 100%); border-color: rgba(20, 103, 32, 0.6); box-shadow: 0 0 16px rgba(20, 103, 32, 0.4); color: #7BC27E; }

body.main-page .jt-news-title {
    display: block;
    margin-top: 18px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--jt-text-on-light);
}
body.main-page .jt-news-desc {
    display: block;
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--jt-text-muted);
}
body.main-page .jt-news-more {
    display: block;
    margin-top: auto;
    padding-top: 16px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--jt-blue-link);
}
body.main-page .jt-news-card.tone-cyan   .jt-news-more { color: #0072A6; }
body.main-page .jt-news-card.tone-teal   .jt-news-more { color: #007A7C; }
body.main-page .jt-news-card.tone-indigo .jt-news-more { color: #4D57B7; }
body.main-page .jt-news-card.tone-green  .jt-news-more { color: #146720; }

/* --------------------------------------------------------------------------
   10. [07] 수상 및 인증 (AWARDS)
   -------------------------------------------------------------------------- */
body.main-page .jt-awards {
    position: relative;
    padding: 96px 0;
    /* [03] 공식 공급 제품군 섹션과 동일한 배경 이미지 + 어둡게 오버레이 */
    background: linear-gradient(180deg, rgba(0, 3, 16, 0.62) 0%, rgba(0, 2, 8, 0.72) 100%),
                url('/img/jetco_bg_1.jpg') center center / cover no-repeat,
                linear-gradient(180deg, #010509 0%, #000308 100%);
    overflow: hidden;
}
body.main-page .jt-awards::before,
body.main-page .jt-awards::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(45px);
    pointer-events: none;
}
body.main-page .jt-awards::before {
    width: 1152px; height: 840px;
    right: -170px; top: -315px;
    background: rgba(8, 93, 199, 0.2);
}
body.main-page .jt-awards::after {
    width: 768px; height: 756px;
    left: -136px; bottom: -200px;
    background: rgba(26, 131, 219, 0.17);
}
body.main-page .jt-awards .jt-inner { position: relative; z-index: 1; }
body.main-page .jt-awards .jt-sec-title { font-size: 44px; color: #F4F9FF; margin-top: 20px; }
body.main-page .jt-awards .jt-sec-desc  { color: #C2CFE2; }

body.main-page .jt-awards-ticker {
    position: relative;
    z-index: 1;
    margin-top: 52px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
body.main-page .jt-awards-track {
    display: flex;
    gap: 28px;
    width: -webkit-max-content;
    width: max-content;
    padding: 8px 0 16px;
    animation: jtScrollLeft 50s linear infinite;
}
body.main-page .jt-awards-ticker:hover .jt-awards-track { animation-play-state: paused; }

body.main-page .jt-award-card { flex: none; width: 240px; }
body.main-page .jt-award-thumb {
    height: 370px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--jt-font-en);
    font-size: 11px;
    letter-spacing: 1px;
    color: rgba(155, 175, 206, 0.5);
    transition: border-color .25s ease, transform .25s ease;
    box-sizing: border-box;
}
body.main-page .jt-award-card:hover .jt-award-thumb {
    border-color: rgba(7, 107, 227, 0.5);
    transform: translateY(-4px);
}
body.main-page .jt-award-name {
    margin-top: 13px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
    color: #F4F9FF;
}
body.main-page .jt-award-org {
    margin-top: 4px;
    font-size: 12px;
    color: #9BAFCE;
}

/* --------------------------------------------------------------------------
   11. [08] CTA
   -------------------------------------------------------------------------- */
body.main-page .jt-cta {
    padding: 100px 32px;
    /* 배경 이미지 추가 — 기존 오버레이 그라데이션은 그대로 두어 밝기 유지 */
    background: linear-gradient(131deg, rgba(0, 3, 12, 0.2) 0%, rgba(1, 6, 17, 0.14) 45%, rgba(4, 11, 24, 0.1) 100%),
                url('/img/jetco_bg_2.jpg') center center / cover no-repeat,
                linear-gradient(160deg, #041228 0%, #01060F 100%);
    text-align: center;
}
body.main-page .jt-cta-inner {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
body.main-page .jt-cta-title {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.3;
    color: #F4F9FF;
}
body.main-page .jt-cta-desc {
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--jt-text-on-dark-3);
}
body.main-page .jt-cta .jt-btn-primary {
    margin-top: 32px;
    padding: 16px 36px;
    font-size: 16px;
    border-radius: 10px;
}

/* --------------------------------------------------------------------------
   12. FOOTER (전 페이지 공통 — #footer-redesign)
   -------------------------------------------------------------------------- */
/* style.css 의 `footer{position:absolute;height:40px;padding:0!important}` 를 무력화해야 하므로 !important 필요 */
#footer-redesign {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    margin-top: auto;   /* sticky footer — #wrap(flex column) 의 남는 세로 공간 흡수 */
    width: 100% !important;
    height: auto !important;
    background: var(--jt-bg-dark);
    border-top: 1px solid var(--jt-line-footer);
    padding: 57px 32px 32px !important;
    font-family: var(--jt-font);
    text-align: left;   /* admin-common.css 의 footer{text-align:center} 상속 차단 */
}
.footer-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}
.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.footer-logo img { display: block; height: 40.32px; width: auto; }

.footer-intro {
    margin: 0;
    text-align: left;
    padding: 17.9px 0 23.7px;
    font-size: 14px;
    line-height: 1.7;
    color: #dddddd;
}
.footer-divider {
    height: 1px;
    background: var(--jt-line-footer);
}
.footer-address {
    margin: 0;
    text-align: left;
    padding-top: 4px;
    font-size: 13.5px;
    line-height: 1.9;
    color: #dddddd;
}
.footer-address:first-of-type { padding-top: 18px; }
.footer-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 31px;
}
.footer-copyright {
    font-size: 12.5px;
    color: #898989;
}
.footer-legal-links { display: flex; gap: 28px; }
.footer-legal-links a {
    font-size: 13px;
    color: #898989;
    text-decoration: none;
    transition: color .2s ease;
}
.footer-legal-links a:hover { color: var(--jt-sky); }

/* --------------------------------------------------------------------------
   13. 스크롤 등장 애니메이션
   -------------------------------------------------------------------------- */
body.main-page .jt-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}
body.main-page .jt-reveal.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    body.main-page .jt-reveal { opacity: 1; transform: none; transition: none; }
    body.main-page .jt-prod-col-inner,
    body.main-page .jt-ticker-track,
    body.main-page .jt-awards-track,
    body.main-page .jt-tl-rail::after,
    body.main-page .jt-hero-eyebrow::before,
    body.main-page .jt-hero-scroll i { animation: none !important; }
}

/* --------------------------------------------------------------------------
   14. 반응형
   -------------------------------------------------------------------------- */
@media (max-width: 1440px) {
    body.main-page .jt-hero-title { font-size: 64px; }
    body.main-page .jt-products-inner,
    body.main-page .jt-news-inner { padding: 0 40px; gap: 40px; }
    body.main-page .jt-products-aside { width: 360px; }
    body.main-page .jt-timeline { padding: 96px 0; }
}

@media (max-width: 1280px) {
    body.main-page .jt-ov-slide { width: 560px; height: 560px; margin-right: -114px; }
    body.main-page .jt-ov-headline { font-size: 52px; top: -28px; left: 32px; }
    /* 하단 중앙 배치는 폭과 무관 → 별도 오버라이드 불필요 */
    body.main-page .jt-ov-body { padding: 32px; }
    body.main-page .jt-ov-name { font-size: 23px; }
    body.main-page .jt-tl-nodes,
    body.main-page .jt-tl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.main-page .jt-tl-rail { display: none; }
    body.main-page .jt-tl-dot { margin-top: 8px !important; }
    body.main-page .jt-tl-nodes { margin-bottom: 20px; }
    body.main-page .jt-prod-track { height: 600px; }
    body.main-page .jt-news-aside { width: 290px; }
    body.main-page .jt-solution-cards { gap: 64px; }
}

@media (max-width: 1024px) {
    body.main-page .jt-gnb { display: none; }
    body.main-page .jt-nav-toggle { display: block; }
    body.main-page .jt-header-cta { display: none; }

    body.main-page .jt-hero { min-height: 780px; padding: 140px 24px 100px; }
    body.main-page .jt-hero-title { font-size: 48px; }
    body.main-page .jt-hero-desc  { font-size: 17px; }
    body.main-page .jt-hero-ticks,
    body.main-page .jt-hero-corner { display: none; }

    body.main-page .jt-sec-title { font-size: 34px; }
    body.main-page .jt-timeline .jt-sec-title,
    body.main-page .jt-awards .jt-sec-title,
    body.main-page .jt-cta-title { font-size: 34px; }

    body.main-page .jt-products-inner,
    body.main-page .jt-news-inner { flex-direction: column; align-items: stretch; }
    body.main-page .jt-products-aside,
    body.main-page .jt-news-aside { width: auto; }
    body.main-page .jt-prod-track { height: 520px; }
    body.main-page .jt-prod-col:nth-child(3) { display: none; }

    body.main-page .jt-news-card { width: 340px; }
    body.main-page .jt-award-card { width: 200px; }
    body.main-page .jt-award-thumb { height: 300px; }

    body.main-page .jt-solution { padding: 96px 0; }
    body.main-page .jt-solution-cards { gap: 48px 40px; margin-top: 72px; }
}

@media (max-width: 768px) {
    body.main-page .jt-inner { padding: 0 20px; }
    body.main-page .jt-products-inner,
    body.main-page .jt-news-inner { padding: 0 20px; }

    body.main-page .jt-hero { min-height: 640px; padding: 120px 20px 90px; }
    body.main-page .jt-hero-title { font-size: 36px; letter-spacing: -0.5px; }
    body.main-page .jt-hero-desc { font-size: 15px; }
    body.main-page .jt-hero-coord { display: none; }
    body.main-page .jt-hero-actions { width: 100%; }
    body.main-page .jt-btn { width: 100%; }

    body.main-page .jt-overview { padding: 72px 0 80px; }
    body.main-page .jt-ov-slider { margin-top: 36px; padding-bottom: 52px; }
    body.main-page .jt-ov-viewport { padding: 60px 0 16px; }
    body.main-page .jt-ov-slide {
        width: 300px; height: 380px; margin-right: 12px;
        transform: scale(.86); opacity: .55;
    }
    body.main-page .jt-ov-headline { font-size: 30px; top: -18px; left: 16px; }
    body.main-page .jt-ov-watermark { font-size: 26px; }
    body.main-page .jt-ov-body { padding: 20px; }
    body.main-page .jt-ov-name { font-size: 19px; }
    body.main-page .jt-ov-label { font-size: 13px; }
    body.main-page .jt-ov-desc { display: none; }
    body.main-page .jt-ov-arrows { display: none; }

    body.main-page .jt-products { padding: 72px 0; }
    body.main-page .jt-prod-track { height: 460px; }
    body.main-page .jt-prod-col:nth-child(2) { display: none; }

    body.main-page .jt-solution { padding: 72px 0; }
    body.main-page .jt-solution-lead { font-size: 16px; }
    body.main-page .jt-solution-cards { flex-direction: column; align-items: center; gap: 44px; }

    body.main-page .jt-timeline { padding: 72px 0; }
    body.main-page .jt-tl-wrap { margin-top: 48px; }
    body.main-page .jt-tl-nodes { display: none; }
    body.main-page .jt-tl-cards { grid-template-columns: 1fr; }

    body.main-page .jt-refs { padding: 56px 0; }
    body.main-page .jt-ref-card { width: 160px; min-height: 160px; font-size: 14px; }

    body.main-page .jt-news { padding: 72px 0; }
    body.main-page .jt-news-card { width: 290px; }
    body.main-page .jt-news-thumb { height: 180px; }

    body.main-page .jt-awards { padding: 72px 0; }
    body.main-page .jt-award-card { width: 170px; }
    body.main-page .jt-award-thumb { height: 250px; }

    body.main-page .jt-cta { padding: 72px 20px; }
    body.main-page .jt-cta-desc { font-size: 15px; }

    #footer-redesign { padding: 40px 20px 28px; }
    .footer-bottom-row { flex-direction: column; align-items: flex-start; }
    .footer-legal-links { gap: 18px; }
}

@media (max-width: 480px) {
    body.main-page .jt-hero-title { font-size: 30px; }
    body.main-page .jt-sec-title,
    body.main-page .jt-timeline .jt-sec-title,
    body.main-page .jt-awards .jt-sec-title,
    body.main-page .jt-cta-title { font-size: 27px; }
    body.main-page .jt-news-card { width: 260px; }
}

/* --------------------------------------------------------------------------
   GNB 드롭다운 (회사소개 > 연혁 / 오시는 길)
   - GNB 는 전 페이지 공통이라 main.css 에 둔다.
   -------------------------------------------------------------------------- */
body.main-page .jt-gnb > li { position: relative; }
body.main-page .jt-gnb > li.has-sub > a::after {
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    margin-left: 6px;
    vertical-align: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform .2s ease;
}
body.main-page .jt-gnb > li.has-sub:hover > a::after { transform: rotate(-135deg) translateY(-1px); }

body.main-page .jt-sub {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 150px;
    padding: 8px 0;
    border: 1px solid rgba(46, 57, 71, 0.7);
    border-radius: 10px;
    background: rgba(8, 16, 26, 0.97);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 18px 36px -14px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 20;
}
body.main-page .jt-gnb > li.has-sub:hover > .jt-sub,
body.main-page .jt-gnb > li.has-sub:focus-within > .jt-sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
body.main-page .jt-sub > li > a {
    display: block;
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: #C9CED4;
    white-space: nowrap;
    transition: color .2s ease, background .2s ease;
}
body.main-page .jt-sub > li > a:hover {
    color: var(--jt-sky-2);
    background: rgba(7, 107, 227, 0.12);
}

/* 모바일 드로어의 하위 항목 */
body.main-page .jt-mnav a.is-sub {
    padding-left: 42px;
    font-size: 14px;
    font-weight: 500;
    color: #9099A5;
}
body.main-page .jt-mnav a.is-sub::before {
    content: '';
    display: inline-block;
    width: 8px;
    margin-left: -14px;
    margin-right: 6px;
    border-top: 1px solid #565E69;
    vertical-align: 4px;
}
body.main-page .jt-sub > li.is-on > a {
    color: var(--jt-sky-2);
    font-weight: 800;
    background: rgba(7, 107, 227, 0.14);
}
