@charset "utf-8"; /* ========================================================================== JETCO 교육센터 — Figma 시안 기준 (2026-07-22) - GNB / 푸터 / 레이아웃 리셋은 main.css 의 body.main-page 규칙 재사용 → ========================================================================== */ body.jt-edu { background: #FFFFFF !important; color: var(--jt-text-on-light); } /* GNB 현재 메뉴 표시 */ body.jt-edu .jt-gnb > li.is-on > a { color: #F4F9FF; font-weight: 800; border-bottom: 2px solid var(--jt-blue); padding-bottom: 10px; } body.jt-edu .jt-edu-inner { width: 100%; max-width: 1280px; margin: 0 auto; } /* -------------------------------------------------------------------------- 1. 히어로 -------------------------------------------------------------------------- */ body.jt-edu .jt-edu-hero { position: relative; padding: 147px 32px 76px; /* 고정 헤더 59 + 시안 88 */ background: #020713; overflow: hidden; } /* 배경 이미지(오른쪽) — 선명도 상향. 필터가 텍스트에 안 먹도록 이미지를 분리한다. */ body.jt-edu .jt-edu-hero::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: url('/img/jetco_edu_bg_02.jpg') right center / auto 100% no-repeat; filter: contrast(1.12) saturate(1.16) brightness(1.05); pointer-events: none; } /* 왼쪽 검정 + 상단 살짝 어둡게 — 정지점을 촘촘히 두어 이미지와 부드럽게 블렌딩 */ body.jt-edu .jt-edu-hero::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: linear-gradient(90deg, #020713 0%, #020713 36%, rgba(2, 7, 19, 0.85) 50%, rgba(2, 7, 19, 0.55) 64%, rgba(2, 7, 19, 0.28) 78%, rgba(2, 7, 19, 0.08) 91%, rgba(2, 7, 19, 0.00) 100%), linear-gradient(180deg, rgba(2, 7, 19, 0.3) 0%, rgba(2, 7, 19, 0) 44%); pointer-events: none; } body.jt-edu .jt-edu-hero .jt-edu-inner { position: relative; z-index: 1; } body.jt-edu .jt-edu-hero-top { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 10px 18px; } body.jt-edu .jt-edu-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-edu .jt-edu-hero-link { flex: none; white-space: nowrap; font-size: 15px; font-weight: 700; color: var(--jt-sky); transition: opacity .2s ease; } body.jt-edu .jt-edu-hero-link:hover { opacity: .8; } body.jt-edu .jt-edu-hero-tit { margin-top: 22px; font-size: 48px; font-weight: 800; line-height: 1.25; color: #F4F9FF; } body.jt-edu .jt-edu-hero-sub { max-width: 680px; margin-top: 18px; font-size: 17px; line-height: 1.8; color: #9CA5B1; } body.jt-edu .jt-edu-certs { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } body.jt-edu .jt-edu-cert { padding: 13px 23px; border-radius: 10px; font-size: 14.5px; font-weight: 700; } body.jt-edu .jt-edu-cert.c1 { background: rgba(7, 107, 227, 0.14); border: 1px solid rgba(7, 107, 227, 0.45); color: #88BFFF; } body.jt-edu .jt-edu-cert.c2 { background: rgba(0, 124, 206, 0.14); border: 1px solid rgba(0, 124, 206, 0.45); color: #55C4FE; } body.jt-edu .jt-edu-cert.c3 { background: rgba(0, 140, 223, 0.14); border: 1px solid rgba(0, 140, 223, 0.45); color: #55C4FE; } body.jt-edu .jt-edu-cert.c4 { background: rgba(0, 160, 197, 0.14); border: 1px solid rgba(0, 160, 197, 0.45); color: #6CCDEA; } /* -------------------------------------------------------------------------- 2. 공통 섹션 헤더 (밝은 배경) -------------------------------------------------------------------------- */ body.jt-edu .jt-edu-sec-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: 12.5px; font-weight: 800; letter-spacing: 1px; color: #9CC6FF; } body.jt-edu .jt-edu-sec-tit { margin-top: 18px; font-size: 46px; font-weight: 800; line-height: 1.2; color: #030915; } body.jt-edu .jt-edu-sec-desc { max-width: 640px; margin-top: 14px; font-size: 16px; line-height: 1.7; color: #464E58; } /* -------------------------------------------------------------------------- 3. 교육 과정 -------------------------------------------------------------------------- */ body.jt-edu .jt-edu-curri { padding: 89px 32px 120px; background: #FFFFFF; overflow: hidden; } /* 헤더(배지/타이틀/설명) 좌측 + '교육 일정 보기' 링크 우측 (타이틀과 같은 선상) */ body.jt-edu .jt-edu-curri-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 24px; } body.jt-edu .jt-edu-curri-link { flex: none; white-space: nowrap; font-size: 16px; font-weight: 700; color: var(--jt-blue-link); transition: color .2s ease; } body.jt-edu .jt-edu-curri-link:hover { color: var(--jt-blue); } body.jt-edu .jt-course-groups { display: flex; flex-direction: column; gap: 44px; margin-top: 44px; } /* 그룹 박스 — 흰 카드 컨테이너 (2026-07-27 배너형 리디자인) */ body.jt-edu .jt-course-group { position: relative; padding: 0; border-radius: 16px; overflow: hidden; background: #FFFFFF; border: 1px solid #E3E9F2; box-shadow: 0 24px 56px -32px rgba(7, 107, 227, 0.28); } body.jt-edu .jt-course-group.g-magnet { border-color: #E1E7F0; box-shadow: 0 24px 56px -32px rgba(0, 124, 206, 0.28); } /* 상단 풀너비 컬러 배너 — 우측에만 대각선 패널 무늬 */ body.jt-edu .jt-course-label { position: relative; padding: 26px 34px; /* OpenText(하단) — 밝은 블루 */ background: linear-gradient(102deg, #2B62CE 0%, #2E6FDD 55%, #3F7EE8 100%); overflow: hidden; } /* 우측 대각선 패널 — 오른쪽으로 갈수록 단계적으로 밝아지는 사선 면 */ body.jt-edu .jt-course-label::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: linear-gradient( 140deg, rgba(255, 255, 255, 0) 0 60%, rgba(255, 255, 255, 0.04) 60% 64%, rgba(255, 255, 255, 0.07) 64% 68%, rgba(255, 255, 255, 0.10) 68% 72%, rgba(255, 255, 255, 0.13) 72% 76%, rgba(255, 255, 255, 0.16) 76% 80%, rgba(255, 255, 255, 0.19) 80% 84%, rgba(255, 255, 255, 0.22) 84% 88%, rgba(255, 255, 255, 0.26) 88% 92%, rgba(255, 255, 255, 0.29) 92% 96%, rgba(255, 255, 255, 0.33) 96% 100% ); pointer-events: none; } body.jt-edu .jt-course-group.g-magnet .jt-course-label { /* Magnet(상단) — 진한 네이비 (무늬는 OpenText 와 동일하게 기본 ::after 상속) */ background: linear-gradient(102deg, #0A2A5C 0%, #0C2F66 55%, #16418E 100%); } body.jt-edu .jt-course-label b { position: relative; z-index: 1; display: block; font-size: 21px; font-weight: 800; color: #FFFFFF; } body.jt-edu .jt-course-label span { position: relative; z-index: 1; display: block; margin-top: 5px; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; color: rgba(255, 255, 255, 0.82); } /* 과정 카드 영역 — 배너 아래 패딩 */ body.jt-edu .jt-course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 34px 34px 40px; } /* 과정 카드 — 깔끔한 흰 카드 (2026-07-27 시안) */ body.jt-edu .jt-course { display: flex; flex-direction: column; min-height: 288px; box-sizing: border-box; padding: 26px 26px 28px; border-radius: 14px; background: #FFFFFF; border: 1px solid #E5EAF2; box-shadow: 0 6px 18px -8px rgba(20, 50, 90, 0.16); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } body.jt-edu .jt-course:hover { transform: translateY(-4px); border-color: #C4D5F2; box-shadow: 0 14px 30px -10px rgba(7, 107, 227, 0.28); } body.jt-edu .jt-course-top { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; } /* 기간 pill — 연한 블루그레이 */ body.jt-edu .jt-course-when { padding: 4px 11px; border-radius: 999px; background: #EAF1FB; font-size: 12px; font-weight: 700; color: #5A6B87; } /* 레벨 pill — 레벨별 색상 분리 (2026-07-30) ※ 아래 배경색은 임시값. 고객 지정 색상코드 수령 시 각 lv-* 값만 교체하면 된다. */ body.jt-edu .jt-course-lv { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #FFFFFF; background: #2E6FDD; /* 지정 클래스 없을 때 기본 */ } body.jt-edu .jt-course-lv.lv-basic { background: #1E9E5A; } /* 기초 — 그린 */ body.jt-edu .jt-course-lv.lv-mid { background: #E8862E; } /* 중급 — 오렌지 */ body.jt-edu .jt-course-lv.lv-high { background: #D9534F; } /* 고급 — 레드 */ body.jt-edu .jt-course-lv.lv-adv { background: #7A4FD9; } /* 심화 — 퍼플 */ body.jt-edu .jt-course-lv.lv-new { background: #2E6FDD; } /* NEW — 기존 블루 유지 */ /* 코드 — 크고 진하게 (pills 아래) */ body.jt-edu .jt-course-code { margin-top: 17px; font-family: var(--jt-font-en); font-size: 25px; font-weight: 800; line-height: 1.1; color: #0B1526; } /* 과정명 — 파란색 부제 */ body.jt-edu .jt-course-nm { margin-top: 6px; font-size: 15px; font-weight: 700; line-height: 1.4; color: #076BE3; } body.jt-edu .jt-course-txt { margin-top: 13px; font-size: 14.5px; line-height: 1.7; color: #343B45; } /* -------------------------------------------------------------------------- 4. 교육장 시설 -------------------------------------------------------------------------- */ body.jt-edu .jt-edu-facility { padding: 89px 32px 96px; background: #FFFFFF; } body.jt-edu .jt-fac-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 43px; } body.jt-edu .jt-fac-img { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 230px; border-radius: 14px; background: rgba(0, 0, 0, 0.04); /* border: 1px solid rgba(0, 0, 0, 0.25); */ background-size: cover; background-position: center; font-family: var(--jt-font-en); font-size: 13px; font-weight: 500; letter-spacing: 0.13px; color: rgba(0, 0, 0, 0.55); text-align: center; } body.jt-edu .jt-fac-cap { margin-top: 14px; font-size: 15px; font-weight: 800; color: #030915; } /* -------------------------------------------------------------------------- 5. 하단 안내 (다크) -------------------------------------------------------------------------- */ body.jt-edu .jt-edu-info { position: relative; padding: 100px 32px; background: var(--jt-bg-dark); overflow: hidden; } body.jt-edu .jt-edu-info::before { content: ''; position: absolute; width: 864px; height: 386px; left: -149px; top: -4px; background: rgba(7, 107, 227, 0.16); border-radius: 452px 366px 130px 495px; filter: blur(45px); pointer-events: none; } body.jt-edu .jt-edu-info .jt-edu-inner { position: relative; z-index: 1; } body.jt-edu .jt-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } body.jt-edu .jt-info-item { padding-left: 27px; border-left: 3px solid var(--jt-blue); } body.jt-edu .jt-info-item.i2 { border-left-color: #00899D; } body.jt-edu .jt-info-item.i3 { border-left-color: #008CDF; } body.jt-edu .jt-info-item.i4 { border-left-color: #00A0C5; } body.jt-edu .jt-info-tit { font-size: 19px; font-weight: 800; color: #F4F9FF; } body.jt-edu .jt-info-txt { margin-top: 15px; font-size: 14px; line-height: 1.8; color: #B5BFCB; /* 좁은 칸에서 한글이 글자 중간에 끊기지 않도록 어절(띄어쓰기) 단위로 줄바꿈. 이메일 등 긴 토큰은 넘칠 때만 끊는다. */ word-break: keep-all; overflow-wrap: break-word; } body.jt-edu .jt-info-tit { word-break: keep-all; } body.jt-edu .jt-info-txt a { color: inherit; } body.jt-edu .jt-info-txt a:hover { color: var(--jt-sky); } /* -------------------------------------------------------------------------- 6. 반응형 -------------------------------------------------------------------------- */ @media (max-width: 1280px) { body.jt-edu .jt-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 시설 이미지는 3열(3장×2줄) 유지 */ body.jt-edu .jt-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } } @media (max-width: 1024px) { body.jt-edu .jt-edu-hero { padding: 123px 24px 60px; } body.jt-edu .jt-edu-hero-tit { font-size: 36px; } body.jt-edu .jt-edu-sec-tit { font-size: 34px; } body.jt-edu .jt-edu-curri { padding: 72px 24px 96px; } body.jt-edu .jt-edu-facility { padding: 72px 24px 76px; } body.jt-edu .jt-edu-info { padding: 76px 24px; } body.jt-edu .jt-course-label { padding: 22px 24px; } body.jt-edu .jt-course-label b { font-size: 19px; } body.jt-edu .jt-course-grid { padding: 28px 24px 32px; } } @media (max-width: 768px) { body.jt-edu .jt-edu-hero { padding: 111px 20px 48px; } body.jt-edu .jt-edu-hero-tit { font-size: 28px; } body.jt-edu .jt-edu-hero-sub { font-size: 15px; } body.jt-edu .jt-edu-cert { padding: 11px 17px; font-size: 13px; } body.jt-edu .jt-edu-sec-tit { font-size: 27px; } body.jt-edu .jt-edu-sec-desc { font-size: 15px; } body.jt-edu .jt-edu-curri { padding: 56px 20px 72px; } body.jt-edu .jt-course-groups { gap: 40px; margin-top: 40px; } body.jt-edu .jt-course-grid { grid-template-columns: 1fr; padding: 22px 20px 26px; } body.jt-edu .jt-course-label { padding: 20px; } body.jt-edu .jt-course { min-height: 0; padding: 22px 20px; } body.jt-edu .jt-course-nm { font-size: 18px; } body.jt-edu .jt-edu-facility { padding: 56px 20px; } body.jt-edu .jt-fac-grid { grid-template-columns: 1fr; gap: 18px; } body.jt-edu .jt-edu-info { padding: 56px 20px; } body.jt-edu .jt-info-grid { grid-template-columns: 1fr; gap: 26px; } } /* ========================================================================== 교육 일정 (schedule) — Figma 시안 기준 (2026-07-22) ========================================================================== */ /* ---- 히어로 ---- */ body.jt-edu-cal .jt-cal-hero { position: relative; padding: 139px 32px 64px; /* 고정 헤더 59 + 시안 80 */ background: #020713; /* 상단 배너 = 교육센터 페이지 배너와 동일 방식 */ overflow: hidden; } /* 배경 이미지(오른쪽) = 교육센터 배너와 동일. 선명도 상향(텍스트엔 필터 안 먹게 분리) */ body.jt-edu-cal .jt-cal-hero::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: url('/img/jetco_edu_bg_02.jpg') right center / auto 100% no-repeat; filter: contrast(1.12) saturate(1.16) brightness(1.05); pointer-events: none; } /* 왼쪽 검정 + 상단 살짝 어둡게 — 이미지와 부드럽게 블렌딩 */ body.jt-edu-cal .jt-cal-hero::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: linear-gradient(90deg, #020713 0%, #020713 36%, rgba(2, 7, 19, 0.85) 50%, rgba(2, 7, 19, 0.55) 64%, rgba(2, 7, 19, 0.28) 78%, rgba(2, 7, 19, 0.08) 91%, rgba(2, 7, 19, 0.00) 100%), linear-gradient(180deg, rgba(2, 7, 19, 0.3) 0%, rgba(2, 7, 19, 0) 44%); pointer-events: none; } body.jt-edu-cal .jt-cal-inner { position: relative; z-index: 1; width: 100%; max-width: 1440px; margin: 0 auto; } body.jt-edu-cal .jt-cal-tit { margin-top: 22px; font-size: 48px; font-weight: 800; line-height: 1.25; color: #F4F9FF; } body.jt-edu-cal .jt-cal-sub { margin-top: 14px; font-size: 17px; color: #9CA5B1; } body.jt-edu-cal .jt-cal-meta { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 22px; margin-top: 22px; } body.jt-edu-cal .jt-cal-stats { display: flex; flex-wrap: wrap; gap: 16px; } body.jt-edu-cal .jt-cal-stat { padding: 17px 27px; border-radius: 14px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(7, 107, 227, 0.3); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); text-align: center; } body.jt-edu-cal .jt-cal-stat.s2 { border-color: rgba(0, 137, 228, 0.3); } body.jt-edu-cal .jt-cal-stat.s3 { border-color: rgba(0, 140, 223, 0.3); } body.jt-edu-cal .jt-cal-stat b { display: block; font-size: 32px; font-weight: 800; color: #6FAEFF; } body.jt-edu-cal .jt-cal-stat.s2 b { color: #19AFFE; } body.jt-edu-cal .jt-cal-stat.s3 b { color: #2EB1EF; } body.jt-edu-cal .jt-cal-stat span { display: block; margin-top: 4px; font-size: 12.5px; color: #9CA5B1; } body.jt-edu-cal .jt-cal-certs { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 14px; padding-top: 6px; } body.jt-edu-cal .jt-cal-cert { padding: 12px 21px; border-radius: 10px; font-size: 14px; font-weight: 700; background: rgba(7, 107, 227, 0.16); border: 1px solid rgba(7, 107, 227, 0.5); color: #82B9FF; } body.jt-edu-cal .jt-cal-cert.k2 { background: rgba(0, 137, 228, 0.16); border-color: rgba(0, 137, 228, 0.5); color: #3DB9FF; } body.jt-edu-cal .jt-cal-cert.k3 { background: rgba(0, 140, 223, 0.16); border-color: rgba(0, 140, 223, 0.5); color: #4EBDF7; } /* ---- 본문 : 월별 일정 + 신청 폼 ---- */ body.jt-edu-cal .jt-cal-body { padding: 56px 32px 96px; background: #FFFFFF; } body.jt-edu-cal .jt-cal-cols { display: flex; align-items: flex-start; gap: 40px; width: 100%; max-width: 1440px; margin: 0 auto; } /* 시안 : 한 줄에 4개월씩 (좌측) */ body.jt-edu-cal .jt-months { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; } /* 좌측 영역 제목 — 달력 아이콘 + 연도별 교육 일정 */ body.jt-edu-cal .jt-months-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0; padding-bottom: 20px; font-size: 22px; font-weight: 800; color: #0E2149; } body.jt-edu-cal .jt-months-head svg { width: 26px; height: 26px; color: #1E52C8; flex-shrink: 0; } body.jt-edu-cal .jt-month { padding-top: 18px; box-shadow: inset 0 2px 0 #B8BEC8; } body.jt-edu-cal .jt-month-nm { position: relative; display: block; overflow: hidden; /* 세로 크기 축소 (기존 padding 11px -> 7px) */ padding: 7px 12px 7px 11px; /* 왼쪽 각진 바를 위해 좌측 모서리 라운드 제거 */ border-radius: 0 8px 8px 0; /* 왼쪽 흰색 영역 넓게, 오른쪽으로 갈수록 파래짐 */ background: linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 45%, #EAF1FD 70%, #C9D9F7 100%); /* 왼쪽 파란 강조 바 (직선) */ border-left: 5px solid #2E6FDD; font-size: 18px; /* 텍스트 2px 축소 (기존 20px -> 18px) */ font-weight: 800; color: #163B7A; } /* 우측 대각선 밝은 면 */ body.jt-edu-cal .jt-month-nm::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient( 108deg, rgba(255, 255, 255, 0) 0 62%, rgba(255, 255, 255, 0.30) 62% 80%, rgba(255, 255, 255, 0.52) 80% 100% ); pointer-events: none; } /* 일정 리스트 시작점을 월 텍스트(왼쪽 바 5px + padding 20px = 25px)에 맞추고, 우측도 동일 패딩 */ body.jt-edu-cal .jt-month-list { margin-top: 18px; padding-left: 20px; padding-right: 10px; } body.jt-edu-cal .jt-cls { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 0; border: 0; background: transparent; cursor: pointer; font-family: var(--jt-font); } body.jt-edu-cal .jt-cls + .jt-cls { margin-top: 14px; padding-top: 13px; border-top: 1px solid #DBDEE3; } body.jt-edu-cal .jt-cls-code { display: block; font-size: 14.5px; font-weight: 700; color: #10171F; transition: color .2s ease; } body.jt-edu-cal .jt-cls-date { margin-top: 0; font-size: 13px; color: #5C646F; } body.jt-edu-cal .jt-cls:hover .jt-cls-code { color: var(--jt-blue); } body.jt-edu-cal .jt-cls.is-picked .jt-cls-code { color: var(--jt-blue); } body.jt-edu-cal .jt-cls.is-picked .jt-cls-date { color: #2E6FC4; } /* 신청 폼 */ body.jt-edu-cal .jt-apply { width: 400px; flex: none; border-radius: 18px; background: #FFFFFF; border: 1px solid #D1D8E2; box-shadow: 0 20px 44px rgba(34, 71, 125, 0.1); overflow: hidden; } body.jt-edu-cal .jt-apply-head { padding: 22px 26px; background: linear-gradient(162deg, #053069 0%, #00123D 100%); font-size: 19px; font-weight: 800; color: #F4F9FF; } body.jt-edu-cal .jt-apply-body { padding: 26px; } body.jt-edu-cal .jt-field + .jt-field { margin-top: 16px; } body.jt-edu-cal .jt-field label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: #414853; } body.jt-edu-cal .jt-field input[type="text"], body.jt-edu-cal .jt-field input[type="tel"], body.jt-edu-cal .jt-field input[type="email"], body.jt-edu-cal .jt-field select, body.jt-edu-cal .jt-field textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #C6CEDB; border-radius: 9px; background: #F6F9FD; font-family: var(--jt-font); font-size: 14px; color: #272E38; } body.jt-edu-cal .jt-field textarea { height: 74px; resize: vertical; } body.jt-edu-cal .jt-field input::placeholder, body.jt-edu-cal .jt-field textarea::placeholder { color: #78818C; } body.jt-edu-cal .jt-field input:focus, body.jt-edu-cal .jt-field select:focus, body.jt-edu-cal .jt-field textarea:focus { outline: 0; border-color: var(--jt-blue); background: #FFFFFF; } body.jt-edu-cal .jt-apply-btn { display: block; width: 100%; margin-top: 20px; padding: 14px; border: 0; border-radius: 10px; background: var(--jt-blue); font-family: var(--jt-font); font-size: 15px; font-weight: 700; color: #F4F9FF; cursor: pointer; transition: transform .2s ease; } body.jt-edu-cal .jt-apply-btn:hover { transform: translateY(-2px); } body.jt-edu-cal .jt-apply-dl { display: block; margin-top: 16px; padding: 15px; border-radius: 10px; background: rgba(7, 107, 227, 0.08); border: 1px solid rgba(7, 107, 227, 0.3); text-align: center; font-size: 15px; font-weight: 700; color: #004FB1; } body.jt-edu-cal .jt-apply-dl:hover { background: rgba(7, 107, 227, 0.14); } /* ---- 반응형 ---- */ @media (max-width: 1280px) { body.jt-edu-cal .jt-months { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.jt-edu-cal .jt-apply { width: 340px; } } @media (max-width: 1024px) { body.jt-edu-cal .jt-cal-hero { padding: 115px 24px 48px; } body.jt-edu-cal .jt-cal-tit { font-size: 34px; } body.jt-edu-cal .jt-cal-body { padding: 48px 24px 72px; } body.jt-edu-cal .jt-cal-cols { flex-direction: column; } body.jt-edu-cal .jt-months { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.jt-edu-cal .jt-apply { width: 100%; max-width: 560px; } } @media (max-width: 768px) { body.jt-edu-cal .jt-cal-hero { padding: 103px 20px 40px; } body.jt-edu-cal .jt-cal-tit { font-size: 26px; } body.jt-edu-cal .jt-cal-sub { font-size: 15px; } body.jt-edu-cal .jt-cal-stat { padding: 14px 20px; } body.jt-edu-cal .jt-cal-stat b { font-size: 26px; } body.jt-edu-cal .jt-cal-body { padding: 36px 20px 56px; } body.jt-edu-cal .jt-months { grid-template-columns: 1fr; gap: 20px; } body.jt-edu-cal .jt-apply-head { padding: 18px 20px; font-size: 17px; } body.jt-edu-cal .jt-apply-body { padding: 20px; } }