@charset "utf-8"; /* ========================================================================== JETCO 오시는 길 & 연락처 — Figma 시안 기준 (2026-07-22) - GNB / 푸터 / 레이아웃 리셋은 main.css 의 body.main-page 규칙 재사용 → - ※ 클래스 접두사 주의 : main.css 가 전 페이지에 로드되므로 main.css 에 이미 있는 접두사(jt-tl-, jt-ov- 등)와 겹치지 않게 jt-lc- 사용. ========================================================================== */ body.jt-loc { background: #FFFFFF !important; color: var(--jt-text-on-light); } /* GNB 현재 메뉴 표시 */ body.jt-loc .jt-gnb > li.is-on > a { color: #F4F9FF; font-weight: 800; border-bottom: 2px solid var(--jt-blue); padding-bottom: 10px; } body.jt-loc .jt-lc-inner { width: 100%; max-width: 1280px; margin: 0 auto; } /* -------------------------------------------------------------------------- 1. 히어로 (다크) -------------------------------------------------------------------------- */ body.jt-loc .jt-lc-hero { position: relative; padding: 147px 32px 76px; /* 고정 헤더 59 + 88 */ /* 상단 배너 배경 = 메인 '수상 및 인증' 섹션과 동일 이미지 */ background: linear-gradient(180deg, rgba(0, 3, 16, 0.42) 0%, rgba(0, 2, 8, 0.58) 100%), url('/img/jetco_bg_1.jpg') center bottom / cover no-repeat, linear-gradient(180deg, #010509 0%, #000308 100%); overflow: hidden; } body.jt-loc .jt-lc-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 329px; background: radial-gradient(ellipse 65% 80% at 30% 20%, #000000 0%, rgba(0, 0, 0, 0) 75%); pointer-events: none; } body.jt-loc .jt-lc-hero::after { content: ''; position: absolute; width: 560px; height: 560px; right: -104px; top: -185px; background: rgba(7, 107, 227, 0.28); border-radius: 398px 162px 462px 98px; filter: blur(50px); pointer-events: none; } body.jt-loc .jt-lc-hero .jt-lc-inner { position: relative; z-index: 1; } body.jt-loc .jt-lc-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: 12px; font-weight: 800; letter-spacing: 1px; color: #FFFFFF; } body.jt-loc .jt-lc-hero-tit { margin-top: 22px; font-size: 48px; font-weight: 800; line-height: 1.25; color: #F4F9FF; } body.jt-loc .jt-lc-hero-sub { max-width: 680px; margin-top: 18px; font-size: 17px; line-height: 1.8; color: #9CA5B1; } /* -------------------------------------------------------------------------- 2. 본문 (화이트) -------------------------------------------------------------------------- */ body.jt-loc .jt-lc-sec { padding: 96px 32px 120px; background: #FFFFFF; } body.jt-loc .jt-lc-badge { display: inline-flex; align-items: center; padding: 10px 23px; border-radius: 999px; background: linear-gradient(177deg, #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-loc .jt-lc-tit { margin-top: 22px; font-size: 52px; font-weight: 800; line-height: 1.25; color: #030915; word-break: keep-all; } /* -------------------------------------------------------------------------- 3. 지도 카드 -------------------------------------------------------------------------- */ body.jt-loc .jt-lc-map { margin-top: 35px; border: 1px solid #D9DEE6; border-radius: 20px; box-shadow: 0 20px 50px rgba(36, 47, 61, 0.08); overflow: hidden; } /* 카카오맵 '지도 퍼가기'(roughmap) 가 들어가는 자리. Lander 가 mapWidth/mapHeight 로 인라인 크기를 박아 넣으므로 반응형으로 쓰려면 아래처럼 폭을 100% 로 되돌려야 한다. */ body.jt-loc .jt-lc-map-box { position: relative; background: #F2F4F7; } body.jt-loc .jt-lc-map-box .root_daum_roughmap { width: 100% !important; } body.jt-loc .jt-lc-map-box .root_daum_roughmap .wrap_map { height: 520px !important; } body.jt-loc .jt-lc-map-box .root_daum_roughmap .wrap_controllers { display: none; } /* roughmap 이 지도 아래에 붙이는 주소/전화 블록. 주소는 아래 연락처 영역과 중복이고 전화는 '-' 로 나와서 감춘다. */ body.jt-loc .jt-lc-map-box .root_daum_roughmap .cont { display: none; } body.jt-loc .jt-lc-map-foot { padding: 19px 32px 17px; border-top: 1px solid #D9DEE6; background: #F2F5FB; } body.jt-loc .jt-lc-map-foot a { font-size: 14px; font-weight: 600; color: #59AAF8; text-decoration: underline; } /* -------------------------------------------------------------------------- 4. 연락처 2×2 -------------------------------------------------------------------------- */ body.jt-loc .jt-lc-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; border: 1px solid #D9DEE6; border-left: 4px solid #2E6FD6; /* 좌측 파란 액센트 */ border-radius: 16px; background: #FFFFFF; overflow: hidden; } /* 좌/우 컬럼 */ body.jt-loc .jt-lc-ct-left, body.jt-loc .jt-lc-ct-right { display: flex; flex-direction: column; min-width: 0; } body.jt-loc .jt-lc-ct-right { border-left: 1px solid #E0E5EB; } /* 좌우 구분선 */ /* 행 */ body.jt-loc .jt-lc-ct-row { display: flex; align-items: center; gap: 16px; padding: 25px 30px; min-width: 0; } /* 좌측 두 행을 균등 높이로 → 각 행 안에서 세로 중앙정렬 (우측 높이에 맞춰 늘어나도 이메일이 가운데) */ body.jt-loc .jt-lc-ct-left .jt-lc-ct-row { flex: 1; } /* 행 구분선 : 좌측 두번째 행 / 우측 내선안내 위 */ body.jt-loc .jt-lc-ct-left .jt-lc-ct-row + .jt-lc-ct-row, body.jt-loc .jt-lc-ct-right .jt-lc-ext { border-top: 1px solid #E0E5EB; } @media (min-width: 769px) { body.jt-loc .jt-lc-ct-left, body.jt-loc .jt-lc-ct-right { display: contents; } body.jt-loc .jt-lc-ct-right { border-left: none; } body.jt-loc .jt-lc-ct-left .jt-lc-ct-row + .jt-lc-ct-row, body.jt-loc .jt-lc-ct-right .jt-lc-ext { border-top: none; } body.jt-loc .jt-lc-ct-left > div:nth-child(1) { grid-row: 1; grid-column: 1; border-right: 1px solid #E0E5EB; border-bottom: 1px solid #E0E5EB; } body.jt-loc .jt-lc-ct-left > div:nth-child(2) { grid-row: 2; grid-column: 1; border-right: 1px solid #E0E5EB; } body.jt-loc .jt-lc-ct-right > .jt-lc-ct-tels { grid-row: 1; grid-column: 2; border-bottom: 1px solid #E0E5EB; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } body.jt-loc .jt-lc-ct-right > .jt-lc-ext { grid-row: 2; grid-column: 2; } } body.jt-loc .jt-lc-ct-row svg, body.jt-loc .jt-lc-ct-tel svg { flex: none; } body.jt-loc .jt-lc-ct-tx { font-size: 16px; font-weight: 600; line-height: 1.5; color: #10171F; word-break: keep-all; } body.jt-loc a.jt-lc-ct-tx:hover { color: var(--jt-blue-link); text-decoration: underline; } /* 우측 상단 : 전화 + 팩스 나란히 */ body.jt-loc .jt-lc-ct-tels { gap: 44px; flex-wrap: wrap; } body.jt-loc .jt-lc-ct-tel { display: flex; align-items: center; gap: 14px; min-width: 0; } /* 우측 하단 : 내선 안내 (3열) */ body.jt-loc .jt-lc-ext { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 22px; padding: 24px 30px; } body.jt-loc .jt-lc-ext-item { font-size: 14px; font-weight: 500; color: #4A5361; white-space: nowrap; } body.jt-loc .jt-lc-ext-item b { font-weight: 700; color: #10171F; } /* -------------------------------------------------------------------------- 5. 하단 2단 카드 (사내 시설 / 미국 법인) -------------------------------------------------------------------------- */ body.jt-loc .jt-lc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; align-items: stretch; } body.jt-loc .jt-lc-card { display: flex; flex-direction: column; height: 100%; border: 1px solid #D9DEE6; border-radius: 16px; overflow: hidden; } body.jt-loc .jt-lc-card-hd { padding: 16px 28px; background: #001C61; font-size: 16.5px; font-weight: 800; color: #F4F9FF; } body.jt-loc .jt-lc-card-bd { flex: 1; padding: 26px 28px; } /* 사내 시설 목록 */ body.jt-loc .jt-lc-fac { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; } body.jt-loc .jt-lc-fac li { list-style: none; position: relative; padding-left: 19px; } body.jt-loc .jt-lc-fac li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #005CCC; } body.jt-loc .jt-lc-fac b { display: block; font-size: 15px; font-weight: 700; color: #050E1A; } body.jt-loc .jt-lc-fac span { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 400; color: #5C646F; word-break: keep-all; } /* 미국 법인 */ body.jt-loc .jt-lc-usa-nm { display: block; font-size: 15.5px; font-weight: 700; color: #050E1A; margin-bottom: 16px; } body.jt-loc .jt-lc-usa-loc { display: block; margin-top: 4px; font-size: 14px; color: #5C646F; } body.jt-loc .jt-lc-usa-tel { display: block; margin-top: 16px; font-size: 14.5px; font-weight: 700; color: #050E1A; } body.jt-loc a.jt-lc-usa-tel:hover { color: var(--jt-blue-link); } /* -------------------------------------------------------------------------- 6. 반응형 -------------------------------------------------------------------------- */ @media (max-width: 1024px) { body.jt-loc .jt-lc-hero { padding: 123px 24px 60px; } body.jt-loc .jt-lc-hero-tit { font-size: 36px; } body.jt-loc .jt-lc-sec { padding: 72px 24px 88px; } body.jt-loc .jt-lc-tit { font-size: 38px; } body.jt-loc .jt-lc-map-box .root_daum_roughmap .wrap_map { height: 420px !important; } } @media (max-width: 768px) { body.jt-loc .jt-lc-hero { padding: 111px 20px 48px; } body.jt-loc .jt-lc-hero-tit { font-size: 28px; } body.jt-loc .jt-lc-hero-sub { font-size: 15px; } body.jt-loc .jt-lc-sec { padding: 56px 20px 72px; } body.jt-loc .jt-lc-tit { font-size: 27px; } body.jt-loc .jt-lc-map { margin-top: 26px; } body.jt-loc .jt-lc-map-box .root_daum_roughmap .wrap_map { height: 320px !important; } body.jt-loc .jt-lc-map-foot { padding: 15px 20px; } body.jt-loc .jt-lc-contact { grid-template-columns: minmax(0, 1fr); } body.jt-loc .jt-lc-ct-right { border-left: 0; border-top: 1px solid #E0E5EB; } body.jt-loc .jt-lc-ct-row { padding: 18px 20px; gap: 13px; } body.jt-loc .jt-lc-ct-tx { font-size: 15px; } body.jt-loc .jt-lc-ct-tels { gap: 26px; } body.jt-loc .jt-lc-ext { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 16px; padding: 18px 20px; } body.jt-loc .jt-lc-ext-item { font-size: 13.5px; } body.jt-loc .jt-lc-cols { grid-template-columns: minmax(0, 1fr); } body.jt-loc .jt-lc-fac { grid-template-columns: minmax(0, 1fr); } body.jt-loc .jt-lc-card-hd { padding: 14px 20px; font-size: 15.5px; } body.jt-loc .jt-lc-card-bd { padding: 20px; } }