@charset "utf-8"; /* ========================================================================== JETCO 회사소개 / 연혁 — Figma 시안 기준 (2026-07-22) - GNB / 푸터 / 레이아웃 리셋은 main.css 의 body.main-page 규칙 재사용 → ========================================================================== */ /* 배경 이미지 (2026-08-02 수정 / 2026-08-03 화질 보정) [2026-08-02] cover → 100% auto (잘림 없이 전체 노출), fixed → scroll (스크롤 고정 해제) [2026-08-03] 이미지에 filter(선명도·채도·밝기) 를 걸기 위해 레이어를 분리한다. body 의 background 로는 filter 를 이미지에만 적용할 수 없어 (body 전체 콘텐츠에 걸림) ::before = 이미지, ::after = 톤다운 순으로 쌓는다. ┌ canvas : background-color #061127 (이미지 로딩 전 fallback) ├ ::before: 배경 이미지 + filter 보정 (z-index:-2) ├ ::after : 가독성용 톤다운 그라데이션 (z-index:-1) └ 콘텐츠 : #wrap 이하 */ body.jt-hist { position: relative; background-color: #061127 !important; background-image: none !important; color: var(--jt-text-on-light); } /* 배경 이미지 레이어 — 화면 크기와 무관하게 문서 전체를 꽉 채운다 (2026-08-03 최종) [크기] cover. 문서가 이미지(1920x2245)보다 세로로 길어서 항상 높이 기준으로 확대되므로, 결과적으로 이미지 세로는 전부 보이고 좌우만 잘린다. 확대율은 대략 1.07~1.34배. [높이] inset:0 으로 문서 높이에 정확히 묶는다. · 비율 고정(aspect-ratio)은 문서보다 길 때 푸터 아래로 꼬리가 삐져나온다. · 100% auto 는 화면이 좁을 때 이미지가 먼저 끝나 가로 경계선이 드러난다. cover + inset:0 이면 두 경우 모두 발생하지 않는다(빈 영역 자체가 없음). */ body.jt-hist::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -2; background: url('/img/jetco_history_img_02.jpg') center top / cover no-repeat; /* 채도 ↑ / 밝기 ↑ / 대비·선명도 ↑ — 과하면 야경 하이라이트가 날아가므로 소폭만 */ filter: saturate(1.3) brightness(1.12) contrast(1.1); pointer-events: none; } /* 톤다운 오버레이 — 이미지 위, 콘텐츠 아래 (밝기 보정에 맞춰 기존보다 옅게) */ body.jt-hist::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: linear-gradient(180deg, rgba(3, 10, 24, 0.78) 0%, rgba(3, 10, 24, 0.42) 30%, rgba(3, 10, 24, 0.5) 100%); pointer-events: none; } /* GNB 현재 메뉴 표시 */ body.jt-hist .jt-gnb > li.is-on > a { color: #F4F9FF; font-weight: 800; border-bottom: 2px solid var(--jt-blue); padding-bottom: 10px; } body.jt-hist .jt-hs-inner { width: 100%; max-width: 1280px; margin: 0 auto; } /* -------------------------------------------------------------------------- 1. 히어로 (다크) -------------------------------------------------------------------------- */ body.jt-hist .jt-hs-hero { position: relative; padding: 147px 32px 76px; /* 고정 헤더 59 + 88 */ background: transparent; overflow: visible; } body.jt-hist .jt-hs-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 316px; background: radial-gradient(ellipse 65% 80% at 30% 20%, #000000 0%, rgba(0, 0, 0, 0) 75%); pointer-events: none; } body.jt-hist .jt-hs-hero .jt-hs-inner { position: relative; z-index: 1; } body.jt-hist .jt-hs-hero-badge { display: inline-flex; align-items: center; padding: 10px 23px; border-radius: 999px; background: linear-gradient(170deg, #0C3164 0%, #001339 100%); border: 1px solid rgba(55, 131, 240, 0.55); font-size: 12.5px; font-weight: 800; letter-spacing: 1px; color: #9CC6FF; } body.jt-hist .jt-hs-hero-tit { margin-top: 22px; font-size: 48px; font-weight: 800; line-height: 1.25; color: #F4F9FF; } body.jt-hist .jt-hs-hero-sub { max-width: 680px; margin-top: 18px; font-size: 17px; line-height: 1.7; color: #9CA5B1; } /* -------------------------------------------------------------------------- 2. 연혁 섹션 (라이트 바탕 + 다크 카드) -------------------------------------------------------------------------- */ body.jt-hist .jt-hs-sec { position: relative; padding: 72px 32px; background: transparent; overflow: visible; } /* 콘텐츠(헤더·타임라인)는 배경 레이어 위로 */ body.jt-hist .jt-hs-sec > * { position: relative; z-index: 1; } body.jt-hist .jt-hs-head { max-width: 920px; margin: 0 auto 44px; text-align: center; } body.jt-hist .jt-hs-badge { display: inline-flex; align-items: center; padding: 10px 23px; border-radius: 999px; background: linear-gradient(173deg, #0C3164 0%, #001339 100%); border: 1px solid rgba(55, 131, 240, 0.55); font-size: 12.5px; font-weight: 800; letter-spacing: 1px; color: #9CC6FF; } body.jt-hist .jt-hs-tit { margin-top: 22px; font-size: 38px; font-weight: 800; line-height: 1.3; color: #F4F9FF; /* 어두운 이미지 배경 위 가독성 */ word-break: keep-all; } /* -------------------------------------------------------------------------- 3. 타임라인 -------------------------------------------------------------------------- */ body.jt-hist .jt-hy { position: relative; max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 4px; } /* 중앙 세로선 */ body.jt-hist .jt-hy::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; border-radius: 999px; background: linear-gradient(180deg, #3D4958 0%, #076BE3 60%, #003AB0 100%); box-shadow: 0 0 18px rgba(7, 107, 227, 0.35); } body.jt-hist .jt-hy-row { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 44px 1fr; gap: 28px; align-items: stretch; } /* 카드 위치 : 홀수 왼쪽 / 짝수 오른쪽 ※ grid-row 를 반드시 1 로 못박는다. is-right 는 카드가 3열에 먼저 놓여 자동배치 커서가 넘어가므로, rail 이 다음 암시적 행으로 밀려나 마디 점이 카드 아래로 내려간다. */ body.jt-hist .jt-hy-card { grid-row: 1; } body.jt-hist .jt-hy-row.is-left .jt-hy-card { grid-column: 1; } body.jt-hist .jt-hy-row.is-right .jt-hy-card { grid-column: 3; } body.jt-hist .jt-hy-rail { grid-row: 1; grid-column: 2; display: flex; align-items: center; justify-content: center; } /* 마디 점 */ body.jt-hist .jt-hy-dot { box-sizing: border-box; width: var(--dot); height: var(--dot); border-radius: 999px; background: var(--a); border: 3px solid #08101A; box-shadow: 0 0 0 1px var(--a); } /* -------------------------------------------------------------------------- 4. 연혁 카드 -------------------------------------------------------------------------- */ body.jt-hist .jt-hy-card { position: relative; box-sizing: border-box; padding: 21px 33px 23px 36px; border-radius: 16px; border: 1px solid var(--bd); border-left-width: 4px; background: linear-gradient(171deg, var(--bg1) 0%, var(--bg2) 100%); overflow: hidden; } /* 좌측 상단 글로우 */ body.jt-hist .jt-hy-card::before { content: ''; position: absolute; width: 130px; height: 130px; left: -26px; top: -29px; border-radius: 999px; background: var(--glow); filter: blur(19px); pointer-events: none; } body.jt-hist .jt-hy-card > * { position: relative; z-index: 1; } body.jt-hist .jt-hy-year { display: inline-flex; align-items: center; padding: 8px 19px; border-radius: 9px; background: linear-gradient(174deg, var(--yb1) 0%, var(--yb2) 100%); border: 1px solid var(--ybd); font-size: 17px; font-weight: 800; color: var(--ytx); } body.jt-hist .jt-hy-tit { display: block; margin-top: 18px; font-size: 20px; font-weight: 800; line-height: 1.35; color: #F4F9FF; word-break: keep-all; } body.jt-hist .jt-hy-list { margin-top: 10px; display: flex; flex-direction: column; gap: 9px; } body.jt-hist .jt-hy-list li { list-style: none; padding-left: 13px; text-indent: -13px; font-size: 15px; font-weight: 400; line-height: 1.75; color: var(--tx); word-break: keep-all; } body.jt-hist .jt-hy-list li::before { content: '\00B7 '; } /* 강조 항목 (예 : 경찰청장 표창) */ body.jt-hist .jt-hy-list li.em { font-weight: 700; color: #6DBDFF; } /* -------------------------------------------------------------------------- 5. 단계별 컬러 (시안의 7단계 그라데이션) -------------------------------------------------------------------------- */ body.jt-hist .s1 { --a: #1D60BC; --dot: 20px; --bd: #1D60BC; --bg1: #18273C; --bg2: #030B1B; --glow: rgba(29, 96, 188, 0.30); --yb1: #0A3F86; --yb2: #001A52; --ybd: rgba(49, 119, 220, 0.70); --ytx: #A7C9FC; --tx: #C9D2DE; } body.jt-hist .s2 { --a: #1C65C8; --dot: 21px; --bd: #1C65C8; --bg1: #17273E; --bg2: #020B1C; --glow: rgba(28, 101, 200, 0.30); --yb1: #09418B; --yb2: #001C57; --ybd: rgba(49, 122, 227, 0.70); --ytx: #A8CDFF; --tx: #C9D2DE; } body.jt-hist .s3 { --a: #1F6DD8; --dot: 22px; --bd: rgba(31, 109, 216, 0.50); --bg1: #16273F; --bg2: #020B1C; --glow: rgba(31, 109, 216, 0.30); --yb1: #084491; --yb2: #001E5C; --ybd: rgba(49, 125, 233, 0.70); --ytx: #A9D0FF; --tx: #D0D8E5; } body.jt-hist .s4 { --a: #1F6DD8; --dot: 23px; --bd: #1F6DD8; --bg1: #16273F; --bg2: #020B1C; --glow: rgba(31, 109, 216, 0.30); --yb1: #084491; --yb2: #001E5C; --ybd: rgba(49, 125, 233, 0.70); --ytx: #A9D0FF; --tx: #D0D8E5; } body.jt-hist .s5 { --a: #3D7EDE; --dot: 24px; --bd: #3D7EDE; --bg1: #172944; --bg2: #020D20; --glow: rgba(61, 126, 222, 0.30); --yb1: #06489C; --yb2: #001F64; --ybd: rgba(71, 141, 245, 0.75); --ytx: #B0D6FF; --tx: #D3DBE8; } body.jt-hist .s6 { --a: #478DF5; --dot: 25px; --bd: #478DF5; --bg1: #172B49; --bg2: #020F25; --glow: rgba(71, 141, 245, 0.30); --yb1: #034DA8; --yb2: #00206B; --ybd: rgba(80, 157, 255, 0.80); --ytx: #B9E0FF; --tx: #D6DFEC; } body.jt-hist .s7 { --a: #076BE3; --dot: 36px; --bd: #076BE3; --bg1: #162E50; --bg2: #01102B; --glow: rgba(7, 107, 227, 0.30); --yb1: #0051B9; --yb2: #002476; --ybd: rgba(85, 172, 255, 0.85); --ytx: #C0E7FF; --tx: #D9E6F9; } /* 마지막 마디는 시안에서 반투명 처리 */ body.jt-hist .s7 .jt-hy-dot { opacity: .45; } /* -------------------------------------------------------------------------- 6. 반응형 — 1024 이하는 좌측 정렬 1단 타임라인 -------------------------------------------------------------------------- */ @media (max-width: 1024px) { body.jt-hist .jt-hs-hero { padding: 123px 24px 60px; } body.jt-hist .jt-hs-hero-tit { font-size: 36px; } body.jt-hist .jt-hs-sec { padding: 56px 24px; } body.jt-hist .jt-hs-tit { font-size: 34px; } body.jt-hist .jt-hy { gap: 16px; } body.jt-hist .jt-hy::before { left: 22px; margin-left: 0; } body.jt-hist .jt-hy-row { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; } body.jt-hist .jt-hy-rail { grid-column: 1; align-items: flex-start; padding-top: 30px; } body.jt-hist .jt-hy-row.is-left .jt-hy-card, body.jt-hist .jt-hy-row.is-right .jt-hy-card { grid-column: 2; } } @media (max-width: 768px) { body.jt-hist .jt-hs-hero { padding: 111px 20px 48px; } body.jt-hist .jt-hs-hero-tit { font-size: 28px; } body.jt-hist .jt-hs-hero-sub { font-size: 15px; } body.jt-hist .jt-hs-sec { padding: 48px 20px; } body.jt-hist .jt-hs-head { margin-bottom: 32px; } body.jt-hist .jt-hs-tit { font-size: 26px; } body.jt-hist .jt-hy-card { padding: 18px 20px 20px 22px; } body.jt-hist .jt-hy-year { font-size: 15px; padding: 7px 15px; } body.jt-hist .jt-hy-tit { font-size: 17px; margin-top: 14px; } body.jt-hist .jt-hy-list li { font-size: 14px; } }