@charset "utf-8"; /* ========================================================================== JETCO 자료실 / FAQ — Figma 시안 기준 (2026-07-22) - GNB / 푸터 / 레이아웃 리셋은 main.css 의 body.main-page 규칙 재사용 → ========================================================================== */ body.jt-faq { background: #FFFFFF !important; color: var(--jt-text-on-light); } /* GNB 현재 메뉴 표시 */ body.jt-faq .jt-gnb > li.is-on > a { color: #F4F9FF; font-weight: 800; border-bottom: 2px solid var(--jt-blue); padding-bottom: 10px; } body.jt-faq .jt-faq-inner { width: 100%; max-width: 960px; margin: 0 auto; } /* -------------------------------------------------------------------------- 0. 히어로 (다크) -------------------------------------------------------------------------- */ body.jt-faq .jt-faq-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-faq .jt-faq-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 404px; background: radial-gradient(ellipse 70% 90% at 50% 0%, #000000 0%, rgba(0, 0, 0, 0) 80%); pointer-events: none; } body.jt-faq .jt-faq-hero::after { content: ''; position: absolute; width: 560px; height: 560px; right: -120px; top: -190px; background: rgba(7, 107, 227, 0.28); border-radius: 398px 162px 462px 98px; filter: blur(50px); pointer-events: none; } body.jt-faq .jt-faq-hero .jt-faq-inner { position: relative; z-index: 1; max-width: 1280px; } body.jt-faq .jt-faq-hero-badge { display: inline-flex; align-items: center; padding: 10px 23px; border-radius: 999px; background: linear-gradient(175deg, #0C3164 0%, #001339 100%); border: 1px solid rgba(55, 131, 240, 0.55); font-size: 12px; font-weight: 800; letter-spacing: 1px; color: #9CC6FF; } body.jt-faq .jt-faq-hero-tit { margin-top: 22px; font-size: 48px; font-weight: 800; line-height: 1.25; color: #F4F9FF; } body.jt-faq .jt-faq-hero-sub { max-width: 680px; margin-top: 18px; font-size: 17px; line-height: 1.8; color: #9CA5B1; } /* -------------------------------------------------------------------------- 1. 섹션 -------------------------------------------------------------------------- */ body.jt-faq .jt-faq-sec { padding: 40px 32px; background: #FFFFFF; overflow: hidden; } body.jt-faq .jt-faq-hero + .jt-faq-sec { padding-top: 96px; } body.jt-faq .jt-faq-sec:last-of-type { padding-bottom: 96px; } body.jt-faq .jt-faq-tit { font-size: 32px; font-weight: 800; line-height: 1.3; color: #030915; } body.jt-faq .jt-faq-sub { margin-top: 8px; font-size: 16px; color: #3B434D; } /* -------------------------------------------------------------------------- 2. FAQ 아코디언 -------------------------------------------------------------------------- */ body.jt-faq .jt-faq-list { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; } body.jt-faq .jt-qa { border: 1px solid var(--jt-blue); border-left-width: 4px; border-radius: 16px; background: #FFFFFF; box-shadow: 0 4px 14px -8px rgba(55, 72, 99, 0.15); overflow: hidden; transition: box-shadow .3s ease, background .3s ease; } /* 열림 상태 = Pab 이 .pab-btn 에 aria-expanded="true" 설정 */ body.jt-faq .jt-qa:has(.pab-btn[aria-expanded="true"]) { background: linear-gradient(177deg, #FFFFFF 0%, #F0F6FD 100%); box-shadow: 0 20px 44px -18px rgba(7, 107, 227, 0.3); } /* 2번째 섹션은 포인트 컬러가 다르다 */ body.jt-faq .s-second .jt-qa { border-color: #006CBE; } /* 질문 토글 — JS 전에는 .jt-qa-q(div), JS 후에는 그 안의 .pab-btn 이 실제 버튼. 레이아웃 시프트를 막기 위해 두 상태 모두 동일한 룩을 적용한다. */ body.jt-faq .jt-qa-q, body.jt-faq .jt-qa-q .pab-btn { display: flex; align-items: flex-start; gap: 16px; width: 100%; box-sizing: border-box; padding: 24px 26px; margin: 0; border: 0; background: transparent; text-align: left; cursor: pointer; font-family: var(--jt-font); color: inherit; } /* JS 주입 후 wrapper div 의 패딩 제거(내부 .pab-btn 이 대신 소유) */ body.jt-faq .jt-qa.pab_container .jt-qa-q { display: block; padding: 0; } body.jt-faq .jt-qa-q .pab-btn:focus { outline: 0; } /* 클릭 이벤트가 항상 버튼에 잡히도록 자식 span 은 포인터 무시 (Pab 요구사항) */ body.jt-faq .jt-qa-q .pab-btn > span { pointer-events: none; } body.jt-faq .jt-qa-ico { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(7, 107, 227, 0.14); font-size: 14px; font-weight: 800; color: #005CCC; } body.jt-faq .s-second .jt-qa-ico { background: rgba(0, 108, 190, 0.14); color: #004889; } body.jt-faq .jt-qa-row { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; } body.jt-faq .jt-qa-txt { font-size: 19.5px; font-weight: 800; line-height: 1.4; color: #030915; } /* + / − 아이콘 — 가로 막대(::before) + 세로 막대(::after) 로 + 를 그린다 */ body.jt-faq .jt-qa-arw { position: relative; flex: none; width: 20px; height: 20px; color: #005CCC; /* 회전 1.5바퀴 + 끝으로 갈수록 감속(ease-out), 전체적으로 느리게 */ transition: transform 1.5s cubic-bezier(.1, .82, .2, 1); } body.jt-faq .jt-qa-arw::before, body.jt-faq .jt-qa-arw::after { content: ''; position: absolute; top: 50%; left: 50%; background: currentColor; border-radius: 1px; transition: opacity .55s ease; } body.jt-faq .jt-qa-arw::before { /* 가로 막대 */ width: 17px; height: 3px; transform: translate(-50%, -50%); } body.jt-faq .jt-qa-arw::after { /* 세로 막대 */ width: 3px; height: 17px; transform: translate(-50%, -50%); } body.jt-faq .s-second .jt-qa-arw { color: #004889; } /* 펼침 시 : 아이콘이 회전하며 세로 막대가 사라져 + → − */ body.jt-faq .pab-btn[aria-expanded="true"] .jt-qa-arw { transform: rotate(540deg); } body.jt-faq .pab-btn[aria-expanded="true"] .jt-qa-arw::after { opacity: 0; } /* 답변 — Pab max-height 애니메이션 (닫힘: aria-hidden="true"). 좌우 패딩만 여기 두고(높이 접힘에 영향 없음), 상하 여백은 내부 wrapper 로. */ body.jt-faq .jt-qa-a { overflow: hidden; padding: 0 26px 0 76px; opacity: 1; max-height: 50rem; visibility: visible; transition: visibility 0s ease 0s, max-height .5s ease-out 0s, opacity .5s ease-in 0s; } body.jt-faq .jt-qa-q[data-pab] + .jt-qa-a[aria-hidden="true"] { max-height: 0; opacity: 0; visibility: hidden; transition-delay: .51s, 0s, 0s; } /* JS 가 인라인 style 로 계산한 max-height 를 닫힐 때 0 으로 강제 */ body.jt-faq .jt-qa-q[data-pab] + .jt-qa-a[style][aria-hidden="true"] { max-height: 0 !important; } body.jt-faq .jt-qa-a-inner { padding-bottom: 24px; font-size: 16px; line-height: 1.85; color: #2C333D; } /* -------------------------------------------------------------------------- 3. 데이터 복구 vs 디지털 포렌식 비교 -------------------------------------------------------------------------- */ body.jt-faq .jt-vs { margin-top: 64px; padding-top: 57px; border-top: 1px solid #D1D8E2; } body.jt-faq .jt-vs-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; } body.jt-faq .jt-vs-l, body.jt-faq .jt-vs-r { font-size: 28px; font-weight: 800; color: #030915; } body.jt-faq .jt-vs-r { color: #005CCC; } body.jt-faq .jt-vs-badge { padding: 6px 16px; border-radius: 999px; background: linear-gradient(137deg, #062B5F 0%, #000E34 100%); font-size: 14px; font-weight: 800; color: #F4F9FF; } body.jt-faq .jt-vs-box { margin-top: 24px; border: 1px solid #D1D8E2; border-radius: 16px; box-shadow: 0 20px 50px -20px rgba(7, 107, 227, 0.2); overflow: hidden; } body.jt-faq .jt-vs-scroll { overflow-x: auto; } body.jt-faq table.jt-vs-table { width: 100%; min-width: 640px; border-collapse: collapse; } body.jt-faq .jt-vs-table th { padding: 22px 28px; background: linear-gradient(174deg, #0B1A31 0%, #020B1C 100%); font-size: 15px; font-weight: 800; color: #F4F9FF; text-align: left; } body.jt-faq .jt-vs-table td { padding: 22px 28px 23px; border-bottom: 1px solid #DADEE5; background: #FFFFFF; font-size: 16px; line-height: 1.5; color: #3B434D; } body.jt-faq .jt-vs-table tr:nth-child(even) td { background: #F1F5FC; } body.jt-faq .jt-vs-table td.k { font-weight: 800; color: #030915; } body.jt-faq .jt-vs-table td.v { font-weight: 700; color: #005CCC; } body.jt-faq .jt-vs-table tr:last-child td { border-bottom: 0; } /* -------------------------------------------------------------------------- 4. 반응형 -------------------------------------------------------------------------- */ @media (max-width: 1024px) { body.jt-faq .jt-faq-sec { padding: 32px 24px; } body.jt-faq .jt-faq-hero { padding: 123px 24px 60px; } body.jt-faq .jt-faq-hero-tit { font-size: 36px; } body.jt-faq .jt-faq-hero + .jt-faq-sec { padding-top: 72px; } body.jt-faq .jt-faq-sec:last-of-type { padding-bottom: 72px; } body.jt-faq .jt-faq-tit { font-size: 27px; } } @media (max-width: 768px) { body.jt-faq .jt-faq-sec { padding: 24px 20px; } body.jt-faq .jt-faq-hero { padding: 111px 20px 48px; } body.jt-faq .jt-faq-hero-tit { font-size: 28px; } body.jt-faq .jt-faq-hero-sub { font-size: 15px; } body.jt-faq .jt-faq-hero + .jt-faq-sec { padding-top: 56px; } body.jt-faq .jt-faq-sec:last-of-type { padding-bottom: 56px; } body.jt-faq .jt-faq-tit { font-size: 23px; } body.jt-faq .jt-faq-sub { font-size: 15px; } body.jt-faq .jt-qa-q, body.jt-faq .jt-qa-q .pab-btn { padding: 18px 18px; gap: 12px; } body.jt-faq .jt-qa-ico { width: 28px; height: 28px; font-size: 12px; } body.jt-faq .jt-qa-txt { font-size: 16px; } body.jt-faq .jt-qa-a { padding: 0 18px 0 58px; } body.jt-faq .jt-qa-a-inner { padding-bottom: 20px; font-size: 15px; } body.jt-faq .jt-vs { margin-top: 48px; padding-top: 40px; } body.jt-faq .jt-vs-l, body.jt-faq .jt-vs-r { font-size: 21px; } }