@charset "utf-8"; /* ========================================================================== JETCO 수상 및 인증 — 파트너 페이지 UI 차용 (2026-07-24) - GNB / 푸터 / 레이아웃 리셋은 main.css 의 body.main-page 규칙 재사용 → - 히어로는 파트너(partner.css)와 동일 톤, 카드는 인증서(세로 이미지+제목+발급기관)용으로 구성 ========================================================================== */ body.jt-cert { background: #FFFFFF !important; color: var(--jt-text-on-light); } /* GNB 현재 메뉴 표시 (회사소개 하위 '수상 및 인증') */ body.jt-cert .jt-gnb > li.is-on > a { color: #F4F9FF; font-weight: 800; border-bottom: 2px solid var(--jt-blue); padding-bottom: 10px; } body.jt-cert .jt-ct-inner { width: 100%; max-width: 1280px; margin: 0 auto; } /* -------------------------------------------------------------------------- 1. 히어로 (다크) — 파트너와 동일 톤 -------------------------------------------------------------------------- */ body.jt-cert .jt-ct-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-cert .jt-ct-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 325px; background: radial-gradient(ellipse 65% 80% at 30% 20%, #000000 0%, rgba(0, 0, 0, 0) 75%); pointer-events: none; } body.jt-cert .jt-ct-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-cert .jt-ct-hero .jt-ct-inner { position: relative; z-index: 1; } body.jt-cert .jt-ct-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: 0.77px; color: #9CC6FF; } body.jt-cert .jt-ct-hero-tit { margin-top: 22px; font-size: 48px; font-weight: 800; line-height: 1.25; color: #F4F9FF; } body.jt-cert .jt-ct-hero-sub { max-width: 680px; margin-top: 18px; font-size: 17px; line-height: 1.75; color: #9CA5B1; } /* -------------------------------------------------------------------------- 2. 본문 (라이트) -------------------------------------------------------------------------- */ body.jt-cert .jt-ct-body { padding: 56px 32px 80px; background: #FFFFFF; } /* 인증서 카드 그리드 */ body.jt-cert .jt-ct-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; } body.jt-cert .jt-ct-card { display: flex; flex-direction: column; box-sizing: border-box; border: 1px solid #D9DEE6; border-radius: 14px; background: #FFFFFF; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } body.jt-cert .jt-ct-card:hover { transform: translateY(-4px); border-color: rgba(7, 107, 227, 0.45); box-shadow: 0 18px 34px -18px rgba(7, 107, 227, 0.4); } /* 인증서 이미지(세로형) 영역 */ body.jt-cert .jt-ct-thumb { position: relative; aspect-ratio: 3 / 4; background: linear-gradient(160deg, #F3F6FB 0%, #E8EEF7 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; } body.jt-cert .jt-ct-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 14px; box-sizing: border-box; } /* 이미지 없을 때 placeholder 라벨 */ body.jt-cert .jt-ct-thumb .jt-ct-noimg { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; color: #8A97A8; } body.jt-cert .jt-ct-thumb .jt-ct-noimg::before { content: ''; width: 46px; height: 46px; border-radius: 50%; background: rgba(7, 107, 227, 0.12); border: 2px solid rgba(7, 107, 227, 0.35); } /* 카드 텍스트 */ body.jt-cert .jt-ct-info { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 22px; border-top: 1px solid #EDF1F6; } body.jt-cert .jt-ct-name { font-size: 15.5px; font-weight: 800; line-height: 1.4; color: #0B1522; word-break: keep-all; } body.jt-cert .jt-ct-org { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; font-size: 12.5px; font-weight: 600; color: #4A5666; word-break: keep-all; } /* 등록된 인증서가 없을 때 */ body.jt-cert .jt-ct-empty { text-align: center; padding: 80px 0; color: #8A97A8; font-size: 15px; } /* -------------------------------------------------------------------------- 3. 반응형 -------------------------------------------------------------------------- */ @media (max-width: 1024px) { body.jt-cert .jt-ct-hero { padding: 123px 24px 60px; } body.jt-cert .jt-ct-hero-tit { font-size: 36px; } body.jt-cert .jt-ct-body { padding: 44px 24px 64px; } body.jt-cert .jt-ct-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } } @media (max-width: 768px) { body.jt-cert .jt-ct-hero { padding: 111px 20px 48px; } body.jt-cert .jt-ct-hero-tit { font-size: 28px; } body.jt-cert .jt-ct-hero-sub { font-size: 15px; } body.jt-cert .jt-ct-body { padding: 36px 20px 52px; } body.jt-cert .jt-ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } body.jt-cert .jt-ct-name { font-size: 14.5px; } } @media (max-width: 480px) { body.jt-cert .jt-ct-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } }