@charset "utf-8"; /* ========================================================================== JETCO 공지사항 (목록 / 상세) — 신규 UI (2026-07-22) - GNB / 푸터 / 레이아웃 리셋은 main.css 의 body.main-page 규칙 재사용 → (목록) → (상세) - ※ 클래스 접두사 주의 : main.css 가 전 페이지에 로드되므로 main.css 에 이미 있는 접두사(jt-tl-, jt-ov-, jt-news- 등)와 겹치지 않게 jt-nt- 사용. ========================================================================== */ body.jt-nt { background: #FFFFFF !important; color: var(--jt-text-on-light); } /* GNB 현재 메뉴 */ body.jt-nt .jt-gnb > li.is-on > a { color: #F4F9FF; font-weight: 800; border-bottom: 2px solid var(--jt-blue); padding-bottom: 10px; } body.jt-nt .jt-nt-inner { width: 100%; max-width: 1080px; margin: 0 auto; } /* -------------------------------------------------------------------------- 1. 히어로 (다크) -------------------------------------------------------------------------- */ body.jt-nt .jt-nt-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-nt .jt-nt-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 320px; background: radial-gradient(ellipse 65% 80% at 30% 20%, #000000 0%, rgba(0, 0, 0, 0) 75%); pointer-events: none; } body.jt-nt .jt-nt-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-nt .jt-nt-hero .jt-nt-inner { position: relative; z-index: 1; max-width: 1280px; } body.jt-nt .jt-nt-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: #9CC6FF; } body.jt-nt .jt-nt-hero-tit { margin-top: 22px; font-size: 48px; font-weight: 800; line-height: 1.25; color: #F4F9FF; } body.jt-nt .jt-nt-hero-sub { max-width: 680px; margin-top: 18px; font-size: 17px; line-height: 1.8; color: #9CA5B1; } /* -------------------------------------------------------------------------- 2. 목록 섹션 -------------------------------------------------------------------------- */ body.jt-nt .jt-nt-sec { padding: 72px 32px 96px; background: #FFFFFF; } /* 상단 : 총 건수 + 검색 */ body.jt-nt .jt-nt-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-bottom: 20px; border-bottom: 2px solid #0B1A31; } body.jt-nt .jt-nt-total { font-size: 15px; color: #3B434D; } body.jt-nt .jt-nt-total b { font-weight: 800; color: var(--jt-blue-link); } body.jt-nt .jt-nt-search { display: flex; gap: 8px; } body.jt-nt .jt-nt-search select, body.jt-nt .jt-nt-search input { height: 42px; box-sizing: border-box; padding: 0 14px; border: 1px solid #D1D8E2; border-radius: 8px; background: #FFFFFF; font-family: var(--jt-font); font-size: 14px; color: #10171F; } body.jt-nt .jt-nt-search input { width: 220px; } body.jt-nt .jt-nt-search input:focus, body.jt-nt .jt-nt-search select:focus { outline: 2px solid rgba(7, 107, 227, 0.35); outline-offset: 1px; } body.jt-nt .jt-nt-search button { height: 42px; padding: 0 22px; border: 0; border-radius: 8px; background: var(--jt-blue); font-family: var(--jt-font); font-size: 14px; font-weight: 700; color: #F4F9FF; cursor: pointer; transition: background .2s ease; } body.jt-nt .jt-nt-search button:hover { background: #0A5BC0; } /* 목록 */ body.jt-nt .jt-nt-list { list-style: none; } body.jt-nt .jt-nt-item { border-bottom: 1px solid #E0E5EB; } body.jt-nt .jt-nt-link { display: flex; align-items: flex-start; gap: 24px; padding: 28px 8px; transition: background .2s ease; } body.jt-nt .jt-nt-link:hover { background: #F1F5FC; } body.jt-nt .jt-nt-num { flex: none; width: 52px; padding-top: 2px; font-size: 15px; font-weight: 700; color: #96A0AD; text-align: center; } /* 상단고정 글 */ body.jt-nt .jt-nt-item.is-top .jt-nt-num { font-size: 12px; font-weight: 800; color: var(--jt-blue); } body.jt-nt .jt-nt-body { flex: 1 1 0; min-width: 0; } body.jt-nt .jt-nt-tit { display: block; font-size: 19px; font-weight: 700; line-height: 1.45; color: #030915; word-break: keep-all; } body.jt-nt .jt-nt-link:hover .jt-nt-tit { color: var(--jt-blue-link); } body.jt-nt .jt-nt-new { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 4px; background: #E8322F; font-size: 10px; font-weight: 800; line-height: 1.6; color: #FFFFFF; vertical-align: 2px; } body.jt-nt .jt-nt-excerpt { display: block; margin-top: 8px; font-size: 15px; line-height: 1.65; color: #5C646F; /* 2줄 말줄임 */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.jt-nt .jt-nt-meta { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 13.5px; color: #8A929E; } body.jt-nt .jt-nt-meta i { font-style: normal; } /* 데이터 없음 */ body.jt-nt .jt-nt-empty { padding: 96px 0; text-align: center; font-size: 17px; color: #78818C; } /* -------------------------------------------------------------------------- 3. 페이징 -------------------------------------------------------------------------- */ body.jt-nt .jt-nt-page { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 48px; } body.jt-nt .jt-nt-page a, body.jt-nt .jt-nt-page strong { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; box-sizing: border-box; border: 1px solid #D1D8E2; border-radius: 8px; background: #FFFFFF; font-size: 14px; font-weight: 600; color: #3B434D; transition: border-color .2s ease, color .2s ease, background .2s ease; } body.jt-nt .jt-nt-page a:hover { border-color: var(--jt-blue); color: var(--jt-blue-link); } body.jt-nt .jt-nt-page strong { border-color: var(--jt-blue); background: var(--jt-blue); color: #F4F9FF; font-weight: 800; } /* -------------------------------------------------------------------------- 4. 상세 (read) -------------------------------------------------------------------------- */ body.jt-nt-view .jt-nt-sec { padding: 72px 32px 96px; } body.jt-nt-view .jt-nt-head { padding-bottom: 26px; border-bottom: 2px solid #0B1A31; } body.jt-nt-view .jt-nt-head-tit { font-size: 30px; font-weight: 800; line-height: 1.4; color: #030915; word-break: keep-all; } body.jt-nt-view .jt-nt-head-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 16px; font-size: 14px; color: #8A929E; } body.jt-nt-view .jt-nt-cont { padding: 40px 4px 56px; font-size: 16px; line-height: 1.85; color: #2C333D; word-break: keep-all; border-bottom: 1px solid #E0E5EB; } body.jt-nt-view .jt-nt-cont img { max-width: 100%; height: auto; } body.jt-nt-view .jt-nt-cont p { margin-bottom: 14px; } body.jt-nt-view .jt-nt-cont a { color: var(--jt-blue-link); text-decoration: underline; } body.jt-nt-view .jt-nt-cont table { max-width: 100%; } /* 첨부파일 */ body.jt-nt-view .jt-nt-files { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; margin-top: 24px; border: 1px solid #D9DEE6; border-radius: 12px; background: #F2F5FB; } body.jt-nt-view .jt-nt-files b { font-size: 13px; font-weight: 800; color: #3B434D; } body.jt-nt-view .jt-nt-files a { font-size: 14.5px; font-weight: 600; color: var(--jt-blue-link); text-decoration: underline; word-break: break-all; } /* 이전 / 다음 */ body.jt-nt-view .jt-nt-nav { margin-top: 40px; border-top: 1px solid #E0E5EB; } body.jt-nt-view .jt-nt-nav a, body.jt-nt-view .jt-nt-nav span { display: flex; align-items: center; gap: 18px; padding: 18px 8px; border-bottom: 1px solid #E0E5EB; font-size: 15px; } body.jt-nt-view .jt-nt-nav b { flex: none; width: 60px; font-weight: 800; color: #3B434D; } body.jt-nt-view .jt-nt-nav em { font-style: normal; color: #2C333D; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.jt-nt-view .jt-nt-nav span em { color: #96A0AD; } body.jt-nt-view .jt-nt-nav a:hover em { color: var(--jt-blue-link); } body.jt-nt-view .jt-nt-btns { display: flex; justify-content: center; margin-top: 44px; } body.jt-nt-view .jt-nt-btn-list { display: inline-flex; align-items: center; padding: 14px 40px; border-radius: 10px; background: #0B1A31; font-size: 15px; font-weight: 700; color: #F4F9FF; transition: background .2s ease; } body.jt-nt-view .jt-nt-btn-list:hover { background: var(--jt-blue); } /* -------------------------------------------------------------------------- 5. 반응형 -------------------------------------------------------------------------- */ @media (max-width: 1024px) { body.jt-nt .jt-nt-hero { padding: 123px 24px 60px; } body.jt-nt .jt-nt-hero-tit { font-size: 36px; } body.jt-nt .jt-nt-sec { padding: 56px 24px 72px; } body.jt-nt-view .jt-nt-head-tit { font-size: 25px; } } @media (max-width: 768px) { body.jt-nt .jt-nt-hero { padding: 111px 20px 48px; } body.jt-nt .jt-nt-hero-tit { font-size: 28px; } body.jt-nt .jt-nt-hero-sub { font-size: 15px; } body.jt-nt .jt-nt-sec { padding: 44px 20px 64px; } body.jt-nt .jt-nt-search { width: 100%; } body.jt-nt .jt-nt-search input { width: 100%; flex: 1 1 0; min-width: 0; } body.jt-nt .jt-nt-link { gap: 0; padding: 20px 4px; flex-direction: column; } body.jt-nt .jt-nt-num { display: none; } body.jt-nt .jt-nt-item.is-top .jt-nt-num { display: block; width: auto; margin-bottom: 8px; text-align: left; } body.jt-nt .jt-nt-tit { font-size: 16.5px; } body.jt-nt .jt-nt-excerpt { font-size: 14px; } body.jt-nt-view .jt-nt-head-tit { font-size: 21px; } body.jt-nt-view .jt-nt-cont { padding: 28px 0 40px; font-size: 15px; } body.jt-nt-view .jt-nt-nav b { width: 48px; font-size: 13.5px; } body.jt-nt-view .jt-nt-nav a, body.jt-nt-view .jt-nt-nav span { gap: 10px; font-size: 14px; } } /* -------------------------------------------------------------------------- 6. 상세 추가 (read.jsp 신규 UI 에서 사용) -------------------------------------------------------------------------- */ /* 카테고리 경로 — useCategory 사용 시 제목 위에 노출 */ body.jt-nt-view .jt-nt-head-cate { margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--jt-blue-link); } /* 목록 대표이미지 / 동영상 — 본문 상단 가운데 정렬 */ body.jt-nt-view .jt-nt-cont-img { margin-bottom: 32px; text-align: center; } body.jt-nt-view .jt-nt-cont-img img { max-width: 100%; height: auto; } body.jt-nt .jt-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } body.jt-nt .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-nt .jt-chip:hover { transform: translateY(-1px); box-shadow: 0 5px 13px rgba(82, 100, 128, 0.1); } body.jt-nt .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); }