@charset "utf-8"; /* ========================================================================== JETCO 문의하기 (consult/newconsult/write) — jt 프론트 퍼블리싱 (2026-07-24) - GNB / 푸터 / 레이아웃 리셋은 main.css 의 body.main-page 규칙 재사용 → - 폼 내부 필드(login_*)는 board.css 가 기본 스타일을 제공한다. 여기서는 jt 히어로/섹션/카드 프레임과 배경 무력화, 버튼 폴리시만 담당한다. - 클래스 접두사 jt-cs- 사용 (기존 jt-lc-, jt-hs- 등과 충돌 회피). ========================================================================== */ body.jt-cs { background: #FFFFFF !important; color: var(--jt-text-on-light); } body.jt-cs .jt-cs-inner { width: 100%; max-width: 1280px; margin: 0 auto; } /* GNB CTA 현재 위치 강조 */ body.jt-cs .jt-header-cta.is-on { background: var(--jt-blue-deep); } /* -------------------------------------------------------------------------- 1. 히어로 (다크) -------------------------------------------------------------------------- */ body.jt-cs .jt-cs-hero { position: relative; padding: 147px 32px 76px; /* 고정 헤더 높이 보정 */ 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-cs .jt-cs-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-cs .jt-cs-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-cs .jt-cs-hero .jt-cs-inner { position: relative; z-index: 1; } body.jt-cs .jt-cs-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-cs .jt-cs-hero-tit { margin-top: 22px; font-size: 48px; font-weight: 800; line-height: 1.25; color: #F4F9FF; } body.jt-cs .jt-cs-hero-sub { max-width: 680px; margin-top: 18px; font-size: 17px; line-height: 1.8; color: #9CA5B1; word-break: keep-all; } /* -------------------------------------------------------------------------- 2. 섹션 (화이트) + 카드 -------------------------------------------------------------------------- */ body.jt-cs .jt-cs-sec { padding: 80px 32px 120px; background: #FFFFFF; } body.jt-cs .jt-cs-sec .jt-cs-inner { max-width: 880px; } body.jt-cs .jt-cs-card { border: 1px solid #E1E8F2; border-radius: 20px; background: #FFFFFF; box-shadow: 0 24px 60px -30px rgba(5, 30, 70, 0.28); padding: 56px 56px 48px; } /* -------------------------------------------------------------------------- 3. 폼 배경 무력화 (board.css 의 회색 여백/폭 제한 제거) -------------------------------------------------------------------------- */ body.jt-cs .jt-cs-card .programCon, body.jt-cs .jt-cs-card .programCon_custom01, body.jt-cs .jt-cs-card .login_bg01 { background: none !important; background-color: transparent !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; max-width: none !important; } body.jt-cs .jt-cs-card .new_login_wrapper, body.jt-cs .jt-cs-card .new_login_wrapper.wide { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } body.jt-cs .jt-cs-card .login_form_wrapper { margin-top: 0 !important; } /* -------------------------------------------------------------------------- 4. 필드 폴리시 (board.css 기본 위에 jt 톤 보강) -------------------------------------------------------------------------- */ body.jt-cs .jt-cs-card .login_form_box01 + .login_form_box01, body.jt-cs .jt-cs-card .writeForm + .login_form_box01 { margin-top: 22px; } body.jt-cs .jt-cs-card .login_label_tit01 { font-size: 15px; font-weight: 700; color: #030915; margin-bottom: 10px; } body.jt-cs .jt-cs-card .login_input_form_box01 { height: 54px; border: 1px solid #DCE3EE; border-radius: 10px; background-color: #F7FAFF; transition: border-color .18s ease, box-shadow .18s ease; } body.jt-cs .jt-cs-card .login_input_form_box01:focus-within { border-color: var(--jt-blue); box-shadow: 0 0 0 3px rgba(7, 107, 227, 0.12); background-color: #FFFFFF; } body.jt-cs .jt-cs-card .login_input_form_box01 input { font-size: 15.5px; color: #050E1A; } /* 진료과목 등 select */ body.jt-cs .jt-cs-card .login_form_flex_box01 select, body.jt-cs .jt-cs-card select.selectNum, body.jt-cs .jt-cs-card select.selecEmail { height: 54px; border: 1px solid #DCE3EE; border-radius: 10px; background-color: #F7FAFF; padding: 0 16px; font-size: 15.5px; color: #050E1A; outline: none; } body.jt-cs .jt-cs-card .login_form_flex_box01 select:focus, body.jt-cs .jt-cs-card select.selectNum:focus, body.jt-cs .jt-cs-card select.selecEmail:focus { border-color: var(--jt-blue); box-shadow: 0 0 0 3px rgba(7, 107, 227, 0.12); } body.jt-cs .jt-cs-card .login_form_flex_box01 { width: 100%; } body.jt-cs .jt-cs-card .login_form_flex_box01 select { width: 100%; } /* 연락처/휴대폰 분할 입력 정렬 (isCellSum=false 대비) */ body.jt-cs .jt-cs-card .login_tel_flex_box01 { display: flex; align-items: center; gap: 8px; } body.jt-cs .jt-cs-card .login_tel_flex_box01 .login_input_form_box01 { flex: 1; } /* 내용 textarea */ body.jt-cs .jt-cs-card .form_textarea01 { width: 100%; min-height: 180px; border: 1px solid #DCE3EE; border-radius: 10px; background-color: #F7FAFF; padding: 16px 18px; font-size: 15.5px; line-height: 1.7; color: #050E1A; resize: vertical; outline: none; box-sizing: border-box; } body.jt-cs .jt-cs-card .form_textarea01:focus { border-color: var(--jt-blue); box-shadow: 0 0 0 3px rgba(7, 107, 227, 0.12); background-color: #FFFFFF; } /* 파일 첨부 라벨 */ body.jt-cs .jt-cs-card .file_label01 { border: 1px solid #DCE3EE; border-radius: 10px; background-color: #F7FAFF; } body.jt-cs .jt-cs-card .add_input_box01 { display: flex; align-items: center; gap: 8px; margin-top: 8px; } body.jt-cs .jt-cs-card .add_input_box01 .file_label01 { flex: 1; } /* 체크박스 / 라디오 행 */ body.jt-cs .jt-cs-card .id_save_box { color: #050E1A; margin-top: 12px; } body.jt-cs .jt-cs-card .radio_type01_wrapper { display: flex; gap: 18px; margin-top: 12px; } /* 개인정보 동의 박스 */ body.jt-cs .jt-cs-card .login_etc_wrapper { margin-top: 26px; padding-top: 26px; border-top: 1px solid #EDF1F7; } body.jt-cs .jt-cs-card .login_etc_box01 { max-height: 180px; overflow-y: auto; border: 1px solid #E1E8F2; border-radius: 10px; background: #FBFCFE; padding: 16px 18px; margin-top: 12px; font-size: 13.5px; line-height: 1.7; color: var(--jt-text-muted); } body.jt-cs .jt-cs-card .jeon_moon_btn { font-size: 14px; font-weight: 700; color: var(--jt-blue-link); } /* -------------------------------------------------------------------------- 5. 제출 / 취소 버튼 -------------------------------------------------------------------------- */ body.jt-cs .jt-cs-card .login_submit_btn_box01 { display: flex; justify-content: center; gap: 12px; margin-top: 36px; } body.jt-cs .jt-cs-card .login_chk_btn01 { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; height: 54px; padding: 0 30px; border-radius: 10px; background: var(--jt-blue); color: #FFFFFF; font-size: 16px; font-weight: 700; border: 1px solid var(--jt-blue); cursor: pointer; transition: background .18s ease, transform .18s ease, box-shadow .18s ease; } body.jt-cs .jt-cs-card .login_submit_btn_box01 .login_chk_btn01:hover { background: #0A5BC0; transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(7, 107, 227, 0.6); } body.jt-cs .jt-cs-card .login_submit_btn_box01 .login_chk_btn01.type02 { background: #FFFFFF; color: var(--jt-text-muted); border-color: #D5DEEA; } body.jt-cs .jt-cs-card .login_submit_btn_box01 .login_chk_btn01.type02:hover { background: #F2F6FC; color: #050E1A; box-shadow: none; } /* -------------------------------------------------------------------------- 6. 반응형 -------------------------------------------------------------------------- */ @media all and (max-width: 768px) { body.jt-cs .jt-cs-hero { padding: 120px 20px 56px; } body.jt-cs .jt-cs-hero-tit { font-size: 34px; } body.jt-cs .jt-cs-hero-sub { font-size: 15px; } body.jt-cs .jt-cs-sec { padding: 48px 16px 80px; } body.jt-cs .jt-cs-card { padding: 28px 20px 32px; border-radius: 16px; } body.jt-cs .jt-cs-card .login_submit_btn_box01 { flex-direction: column-reverse; } body.jt-cs .jt-cs-card .login_chk_btn01 { width: 100%; } body.jt-cs .jt-cs-card .login_tel_flex_box01 { flex-wrap: wrap; } } /* ========================================================================== JETCO 문의하기 리뉴얼 (2026-07-31) — 2단 레이아웃 (좌:문의양식 / 우:안내·동의·제출) - 클래스 접두사 jt-cf- (contact form) - body class="main-page jt-cs jt-cf" ========================================================================== */ body.jt-cf { background: #F4F7FB !important; } body.jt-cf .jt-cf-inner { width: 100%; max-width: 1280px; margin: 0 auto; } /* ---------- 히어로 (다크 배너) ---------- 뉴스룸(/board/notice/index) 의 jt-nt-hero 와 동일한 상단 배너 형식 (2026-07-31) */ body.jt-cf .jt-cf-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-cf .jt-cf-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-cf .jt-cf-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-cf .jt-cf-hero .jt-cf-inner { position: relative; z-index: 1; } /* 배지(CONTACT pill) 미사용 — 타이틀만 노출 (2026-07-31) */ body.jt-cf .jt-cf-tit { font-size: 48px; font-weight: 800; line-height: 1.25; color: #F4F9FF; } body.jt-cf .jt-cf-sub { max-width: 680px; margin-top: 18px; font-size: 17px; line-height: 1.8; color: #9CA5B1; word-break: keep-all; } /* ---------- 섹션 / 그리드 ---------- */ body.jt-cf .jt-cf-sec { padding: 64px 32px 110px; /* 다크 배너와 분리되도록 상단 여백 확보 */ background: #F4F7FB; } body.jt-cf .jt-cf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 26px; align-items: start; } /* ---------- 좌 : 문의 양식 카드 ---------- */ body.jt-cf .jt-cf-card { background: #FFFFFF; border: 1px solid #E3E9F2; border-radius: 4px; overflow: hidden; } body.jt-cf .jt-cf-card-head { height: 62px; display: flex; align-items: center; padding: 0 32px; background: #16305E; color: #FFFFFF; font-size: 17px; font-weight: 700; } body.jt-cf .jt-cf-card-body { padding: 32px 32px 40px; } /* 세로 간격은 카드 본문 직계 항목에만 적용한다. (jt-cf-row 안의 2번째 필드까지 밀려 좌우 라인이 어긋나던 문제 수정 2026-07-31) */ body.jt-cf .jt-cf-card-body > .jt-cf-field + .jt-cf-field, body.jt-cf .jt-cf-card-body > .jt-cf-field + .jt-cf-row, body.jt-cf .jt-cf-card-body > .jt-cf-row + .jt-cf-field, body.jt-cf .jt-cf-card-body > .jt-cf-row + .jt-cf-row { margin-top: 26px; } body.jt-cf .jt-cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } body.jt-cf .jt-cf-row > .jt-cf-field { margin-top: 0; } body.jt-cf .jt-cf-label { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 500; color: #2B3648; } body.jt-cf .jt-cf-req { margin-left: 3px; font-style: normal; color: #2B3648; } /* 입력 */ body.jt-cf .jt-cf-input { width: 100%; height: 48px; padding: 0 16px; border: 1px solid #DCE3EE; border-radius: 4px; background: #F7FAFF; font-size: 15px; color: #101B2E; outline: none; box-sizing: border-box; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } body.jt-cf .jt-cf-input::placeholder { color: #9AA6B8; } body.jt-cf .jt-cf-input:focus { border-color: #16305E; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(22, 48, 94, 0.10); } /* textarea */ body.jt-cf .jt-cf-textarea { width: 100%; min-height: 150px; padding: 14px 16px; border: 1px solid #DCE3EE; border-radius: 4px; background: #F7FAFF; font-size: 15px; line-height: 1.7; color: #101B2E; resize: vertical; outline: none; box-sizing: border-box; font-family: inherit; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } body.jt-cf .jt-cf-textarea::placeholder { color: #9AA6B8; } body.jt-cf .jt-cf-textarea:focus { border-color: #16305E; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(22, 48, 94, 0.10); } /* 라디오 옵션 (박스형) */ body.jt-cf .jt-cf-opts { display: grid; gap: 12px; } /* 옵션 박스는 문의유형/방문경로 모두 같은 폭(3열 기준)으로 맞춘다 */ body.jt-cf .jt-cf-opts-2, body.jt-cf .jt-cf-opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.jt-cf .jt-cf-opt { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px; border: 1px solid #DCE3EE; border-radius: 4px; background: #F7FAFF; font-size: 14.5px; color: #2B3648; cursor: pointer; transition: border-color .18s ease, background .18s ease; } body.jt-cf .jt-cf-opt:hover { border-color: #A9BEDC; } body.jt-cf .jt-cf-opt input[type="radio"] { width: 15px; height: 15px; margin: 0; accent-color: #16305E; cursor: pointer; } body.jt-cf .jt-cf-opt span { line-height: 1; } /* ---------- 우 : 사이드 ---------- */ body.jt-cf .jt-cf-side { display: flex; flex-direction: column; gap: 20px; } body.jt-cf .jt-cf-box { background: #FFFFFF; border: 1px solid #E3E9F2; border-radius: 4px; padding: 22px 24px; } /* 대표 문의처 */ body.jt-cf .jt-cf-contact-tit { font-size: 17px; font-weight: 700; color: #101B2E; line-height: 1.5; } body.jt-cf .jt-cf-contact-item { margin-top: 8px; padding-left: 8px; font-size: 14.5px; color: #2B3648; line-height: 1.6; } /* 개인정보 동의 */ body.jt-cf .jt-cf-agree { padding: 24px 24px 26px; } body.jt-cf .jt-cf-agree-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } body.jt-cf .jt-cf-agree-tit { font-size: 17px; font-weight: 700; color: #101B2E; } body.jt-cf .jt-cf-policy-btn { font-size: 13px; font-weight: 600; color: #3B6FB5; white-space: nowrap; } body.jt-cf .jt-cf-policy-btn:hover { text-decoration: underline; } body.jt-cf .jt-cf-terms { margin-top: 18px; } body.jt-cf .jt-cf-term { padding: 2px 0 2px 14px; border-left: 4px solid #1E4E8C; } body.jt-cf .jt-cf-term + .jt-cf-term { margin-top: 20px; } body.jt-cf .jt-cf-term.is-option { border-left-color: #C8991F; } body.jt-cf .jt-cf-term-tit { display: block; font-size: 14.5px; font-weight: 700; color: #101B2E; } body.jt-cf .jt-cf-term-txt { margin-top: 9px; font-size: 14px; line-height: 1.6; color: #55647B; word-break: keep-all; } /* 동의 체크 */ body.jt-cf .jt-cf-chk { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 13px 14px; border: 1px solid #E3E9F2; border-radius: 4px; background: #FFFFFF; font-size: 13.8px; line-height: 1.5; color: #2B3648; cursor: pointer; } body.jt-cf .jt-cf-chk:first-of-type { margin-top: 24px; } body.jt-cf .jt-cf-chk input[type="checkbox"] { width: 15px; height: 15px; margin: 1px 0 0; accent-color: #16305E; flex: none; cursor: pointer; } /* 제출 버튼 */ body.jt-cf .jt-cf-submit { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 60px; margin-top: 22px; border-radius: 4px; background: #16305E; color: #FFFFFF; font-size: 17px; font-weight: 700; cursor: pointer; transition: background .18s ease, box-shadow .18s ease, transform .18s ease; } body.jt-cf .jt-cf-submit em { font-style: normal; } body.jt-cf .jt-cf-submit:hover { background: #0F2247; color: #FFFFFF; transform: translateY(-1px); box-shadow: 0 14px 26px -14px rgba(22, 48, 94, 0.7); } /* ---------- 반응형 ---------- */ @media all and (max-width: 1180px) { body.jt-cf .jt-cf-grid { grid-template-columns: 1fr; } body.jt-cf .jt-cf-side { max-width: none; } } @media all and (max-width: 1024px) { body.jt-cf .jt-cf-hero { padding: 123px 24px 60px; } body.jt-cf .jt-cf-tit { font-size: 36px; } body.jt-cf .jt-cf-sec { padding: 56px 24px 72px; } } @media all and (max-width: 768px) { body.jt-cf .jt-cf-hero { padding: 111px 20px 48px; } body.jt-cf .jt-cf-tit { font-size: 28px; } body.jt-cf .jt-cf-sub { font-size: 15px; } body.jt-cf .jt-cf-sec { padding: 44px 18px 72px; } body.jt-cf .jt-cf-card-head { height: 54px; padding: 0 20px; font-size: 16px; } body.jt-cf .jt-cf-card-body { padding: 22px 20px 28px; } body.jt-cf .jt-cf-row { grid-template-columns: 1fr; gap: 22px; } body.jt-cf .jt-cf-opts-2, body.jt-cf .jt-cf-opts-3 { grid-template-columns: 1fr; } body.jt-cf .jt-cf-box { padding: 20px 18px; } } /* Summernote 에디터가 적용된 문의 내용 영역 — 카드 톤에 맞춤 (2026-07-31) */ body.jt-cf .jt-cf-card-body .note-editor.note-frame { border: 1px solid #DCE3EE; border-radius: 4px; margin-bottom: 0; background: #FFFFFF; } body.jt-cf .jt-cf-card-body .note-editor .note-toolbar { border-radius: 4px 4px 0 0; background: #F7FAFF; } body.jt-cf .jt-cf-card-body .note-editor .note-editable { min-height: 200px; font-size: 15px; line-height: 1.7; color: #101B2E; } body.jt-cf .jt-cf-card-body .note-editor .note-statusbar { border-radius: 0 0 4px 4px; }