@charset "utf-8"; /* ========================================================================== JETCO 고객사 & 파트너 — Figma 시안 기준 (2026-07-22) - GNB / 푸터 / 레이아웃 리셋은 main.css 의 body.main-page 규칙 재사용 → ========================================================================== */ body.jt-partner { background: #FFFFFF !important; color: var(--jt-text-on-light); } /* GNB 현재 메뉴 표시 */ body.jt-partner .jt-gnb > li.is-on > a { color: #F4F9FF; font-weight: 800; border-bottom: 2px solid var(--jt-blue); padding-bottom: 10px; } body.jt-partner .jt-pt-inner { width: 100%; max-width: 1280px; margin: 0 auto; } /* -------------------------------------------------------------------------- 1. 히어로 (다크) -------------------------------------------------------------------------- */ body.jt-partner .jt-pt-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-partner .jt-pt-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-partner .jt-pt-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-partner .jt-pt-hero .jt-pt-inner { position: relative; z-index: 1; } body.jt-partner .jt-pt-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-partner .jt-pt-hero-tit { margin-top: 22px; font-size: 48px; font-weight: 800; line-height: 1.25; color: #F4F9FF; } body.jt-partner .jt-pt-hero-sub { max-width: 680px; margin-top: 18px; font-size: 17px; line-height: 1.75; color: #9CA5B1; } /* -------------------------------------------------------------------------- 2. 본문 (라이트) -------------------------------------------------------------------------- */ body.jt-partner .jt-pt-body { padding: 44px 32px 68px; background: #FFFFFF; } body.jt-partner .jt-pt-body .jt-pt-inner { display: flex; flex-direction: column; gap: 88px; } /* -------------------------------------------------------------------------- 3. 그룹 (파트너 / 공공기관 / 국방 …) -------------------------------------------------------------------------- */ body.jt-partner .jt-pt-badge { display: inline-flex; align-items: center; padding: 7px 17px; border-radius: 999px; background: linear-gradient(177deg, #0C3164 0%, #001339 100%); border: 1px solid rgba(55, 131, 240, 0.55); font-size: 11px; font-weight: 800; letter-spacing: 0.77px; color: #9CC6FF; } body.jt-partner .jt-pt-tit { margin-top: 16px; font-size: 26px; font-weight: 800; line-height: 1.3; color: #030915; } /* 로고 카드 그리드 */ body.jt-partner .jt-pt-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin-top: 28px; } body.jt-partner .jt-pt-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 1 / 1; box-sizing: border-box; padding: 15px; border: 1px solid #D9DEE6; border-radius: 12px; background: #FFFFFF; text-align: center; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } body.jt-partner .jt-pt-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-partner .jt-pt-ico { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 11px; font-size: 15px; font-weight: 800; line-height: 1; color: #FFFFFF; } /* 시안의 6색 순환 팔레트 */ body.jt-partner .jt-pt-ico.c1 { background: #005CCC; } body.jt-partner .jt-pt-ico.c2 { background: #005C62; } body.jt-partner .jt-pt-ico.c3 { background: #3D4958; } body.jt-partner .jt-pt-ico.c4 { background: #007EB7; } body.jt-partner .jt-pt-ico.c5 { background: #4D5081; } body.jt-partner .jt-pt-ico.c6 { background: #565E69; } body.jt-partner .jt-pt-nm { display: block; font-size: 11.5px; font-weight: 700; line-height: 1.3; color: #343B45; word-break: keep-all; } /* -------------------------------------------------------------------------- 4. 반응형 -------------------------------------------------------------------------- */ @media (max-width: 1280px) { body.jt-partner .jt-pt-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 1024px) { body.jt-partner .jt-pt-hero { padding: 123px 24px 60px; } body.jt-partner .jt-pt-hero-tit { font-size: 36px; } body.jt-partner .jt-pt-body { padding: 36px 24px 56px; } body.jt-partner .jt-pt-body .jt-pt-inner { gap: 64px; } body.jt-partner .jt-pt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.jt-partner .jt-pt-tit { font-size: 23px; } } @media (max-width: 768px) { body.jt-partner .jt-pt-hero { padding: 111px 20px 48px; } body.jt-partner .jt-pt-hero-tit { font-size: 28px; } body.jt-partner .jt-pt-hero-sub { font-size: 15px; } body.jt-partner .jt-pt-body { padding: 28px 20px 48px; } body.jt-partner .jt-pt-body .jt-pt-inner { gap: 48px; } body.jt-partner .jt-pt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } body.jt-partner .jt-pt-tit { font-size: 20px; } body.jt-partner .jt-pt-ico { width: 38px; height: 38px; font-size: 13px; } } @media (max-width: 480px) { body.jt-partner .jt-pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- 5. 카테고리 필터 & 페이지네이션 추가 (2026-07-24) -------------------------------------------------------------------------- */ body.jt-partner .jt-pt-body .jt-pt-inner { gap: 28px; } body.jt-partner .jt-chips { display: flex; flex-wrap: wrap; gap: 10px; } body.jt-partner .jt-chip { display: inline-flex; align-items: center; gap: 9px; padding: 10px 19px; border-radius: 999px; background: #F0F4F8; border: 0; box-shadow: 0 1px 3px rgba(82, 100, 128, 0.06); font-size: 14px; font-weight: 700; color: #4A5568; text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; } body.jt-partner .jt-chip:hover { transform: translateY(-1px); box-shadow: 0 5px 13px rgba(82, 100, 128, 0.1); } body.jt-partner .jt-chip.is-on { background: #000000; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15); color: #FFFFFF; font-weight: 800; transform: translateY(-1px); } body.jt-partner .jt-prd-paging { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 60px 0 20px; } body.jt-partner .jt-page-num { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 13px; font-weight: 600; color: #000000; text-decoration: none; transition: background .2s ease, color .2s ease; } body.jt-partner .jt-page-num:hover { background: rgba(0, 0, 0, 0.05); } body.jt-partner .jt-page-num.is-on { background: #000000; color: #FFFFFF; font-weight: 700; } body.jt-partner .jt-page-arw { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: #000000; opacity: 0.9; transition: opacity .2s ease, transform .2s ease; } body.jt-partner .jt-page-arw:hover { opacity: 1; transform: scale(1.1); } body.jt-partner .jt-page-arw svg { display: block; } /* 카드 디자인 개선 */ body.jt-partner .jt-pt-grid { gap: 22px; } body.jt-partner .jt-pt-card { aspect-ratio: 1 / 1; padding: 20px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E5E9F0; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02); } body.jt-partner .jt-pt-card.has-logo { justify-content: center; } body.jt-partner .jt-pt-card.has-logo .jt-pt-nm { display: none; } body.jt-partner .jt-pt-card.has-logo .jt-pt-ico { width: 100%; height: 100%; background: transparent !important; } body.jt-partner .jt-pt-card.has-logo .jt-pt-ico img { max-width: 90%; max-height: 80%; width: auto; height: auto; object-fit: contain; }