@charset "utf-8";
/* 서브 페이지 전용 */

/* ============================================================
   서브 히어로 / 현재 위치 / 하위 메뉴(탭)
   ============================================================ */
.sub-hero {position: relative; overflow: hidden; background: linear-gradient(90deg, #e8f4ff 0%, #d0ebff 55%, #c5e8f5 100%);}
.sub-hero::before {content: ''; position: absolute; top: -12rem; left: -10rem; width: 38rem; height: 38rem; border-radius: 50%; background: rgba(255, 255, 255, .5);}
.sub-hero::after {content: ''; position: absolute; right: -14rem; bottom: -18rem; width: 46rem; height: 46rem; border-radius: 50%; background: rgba(25, 178, 138, .1);}
.sub-hero-in {position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 4rem; min-height: 38rem; padding-block: 5rem;}
.sub-hero-tx {flex: 1 1 56rem;}
.sub-tt {margin-top: 1.8rem; font-size: 4.8rem; font-weight: 800; line-height: 1.3; letter-spacing: -.15rem; color: var(--navy);}
.sub-ds {margin-top: 1.8rem; max-width: 56rem; font-size: 1.9rem; line-height: 1.7; color: var(--body);}
.sub-hero-photo {position: relative; flex: 0 0 44rem; height: 30rem; overflow: hidden; border-radius: 3rem; box-shadow: 0 2.4rem 2.5rem rgba(26, 74, 107, .19);}
.sub-hero-photo img {width: 100%; height: 100%; object-fit: cover;}
.sub-hero.is-plain .sub-hero-in {min-height: 26rem;}
.crumb ol {display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; font-size: 1.4rem; color: var(--sub);}
.crumb li + li::before {content: '/'; margin-right: 1.2rem;}
.crumb a {display: inline-flex; align-items: center; min-height: 4.4rem; transition: color .25s;}
.crumb a:hover, .crumb a:focus-visible {color: var(--navy);}
.crumb [aria-current] {font-weight: 700; color: var(--navy);}
.sub-hero .hero-badge {margin-top: 1.6rem;}
.sub-board {padding-block: 6rem 10rem;}

.sub-tabs {position: relative; z-index: 2; background: #fff; border-bottom: 2px solid var(--line);}
.sub-tabs ul {display: flex; gap: .6rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;}
.sub-tabs ul::-webkit-scrollbar {display: none;}
.sub-tabs li {flex: 0 0 auto;}
.sub-tabs a {display: flex; align-items: center; min-height: 6.4rem; padding: 0 2.4rem; border-bottom: .3rem solid transparent; margin-bottom: -2px; font-size: 1.6rem; font-weight: 600; white-space: nowrap; color: var(--sub); transition: color .25s, border-color .25s, background .25s;}
.sub-tabs li:first-child a {padding-left: 0;}
.sub-tabs a:hover, .sub-tabs a:focus-visible {color: var(--navy);}
.sub-tabs a.is-on {font-weight: 700; color: var(--green); border-bottom-color: var(--green);}

/* ============================================================
   서브 본문 블록
   ============================================================ */
.sub-sec {padding-block: 9rem;}
.sub-sec.is-blue {background: var(--bg-blue);}
.sub-sec.is-sky {background: var(--bg-sky);}
.sub-sec.is-white {background: #fff;}
.sec-head {margin-bottom: 4.4rem;}
.sec-head .sub {max-width: 72rem;}
.split {display: grid; grid-template-columns: 1.1fr 1fr; gap: 6rem; align-items: center;}
.split-img {overflow: hidden; border-radius: 2.8rem; box-shadow: 0 2.4rem 2.5rem rgba(26, 74, 107, .15);}
.split-img img {width: 100%; height: 100%; max-height: 46rem; object-fit: cover; transition: transform .8s var(--ease);}
.split-img:hover img {transform: scale(1.04);}
.split-tx .title {margin-top: 1rem;}
.split-tx p.tx {margin-top: 2rem; font-size: 1.8rem; line-height: 1.8; color: var(--body);}
.sign {margin-top: 3rem; font-size: 1.6rem; font-weight: 700; color: var(--navy);}
.flow {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.2rem; counter-reset: step;}
.flow li {padding: 3rem 2.6rem; border: 1px solid var(--line); border-radius: 2.4rem; background: #fff; transition: transform .3s var(--ease), box-shadow .3s;}
.flow li:hover {transform: translateY(-.8rem); box-shadow: 0 1.6rem 2.8rem rgba(26, 74, 107, .13);}
.flow b {display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; font-size: 1.7rem; font-weight: 800; color: #fff; background: var(--green);}
.flow li:nth-child(2) b {background: var(--purple);}
.flow li:nth-child(3) b {background: var(--pink);}
.flow li:nth-child(4) b {background: var(--yellow); color: var(--yellow-ink);}
.flow strong {display: block; margin-top: 1.8rem; font-size: 2rem; color: var(--navy);}
.flow span {display: block; margin-top: .8rem; font-size: 1.5rem; line-height: 1.65; color: var(--sub);}
.flow.flow-3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
.note {margin-top: 2.4rem; font-size: 1.4rem; color: var(--sub);}
.note-box {padding: 2.4rem 3rem; border-radius: 2rem; font-size: 1.6rem; line-height: 1.7; color: var(--body); background: #fff; border: 1px solid var(--line);}
.empty-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem;}
.empty-card {display: grid; place-items: center; min-height: 24rem; padding: 3rem; border: .2rem dashed #d0daea; border-radius: 2.4rem; text-align: center; font-size: 1.7rem; color: var(--sub); background: #fff;}
.empty-card b {display: block; margin-bottom: .6rem; font-size: 2rem; color: var(--navy);}
.tbl-wrap {overflow-x: auto;}
.tbl {width: 100%; min-width: 60rem; border-collapse: collapse; font-size: 1.6rem;}
.tbl caption {padding-bottom: 1.4rem; text-align: left; font-size: 1.4rem; color: var(--sub);}
.tbl th, .tbl td {padding: 1.8rem 2.2rem; border-bottom: 1px solid var(--line); text-align: left;}
.tbl thead th {border-bottom: 1px solid var(--ink); font-size: 1.5rem; color: var(--navy); background: var(--bg-blue);}
.tbl tbody th {width: 20rem; font-weight: 700; color: var(--navy);}
.tbl td {color: var(--body);}
.cta-sub-wrap {margin-top: 0;}
.cta.cta-sub {padding-block: 7rem;}
.cta.cta-sub .hero-btns {justify-content: center;}
.faq-wrap {max-width: 96rem; margin-inline: auto;}
.apply-wrap {max-width: 96rem; margin-inline: auto;}
.form {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 3rem;}
.field {display: flex; flex-direction: column; gap: .8rem;}
.field label {font-size: 1.5rem; font-weight: 700; color: var(--navy);}
.field label em {margin-left: .4rem; font-style: normal; color: var(--pink);}
.field input, .field select, .field textarea {width: 100%; min-height: 5.6rem; padding: 1.2rem 1.6rem; border: 1px solid #d0daea; border-radius: 1.4rem; font: inherit; font-size: 1.6rem; color: var(--ink); background: #fff; transition: border-color .25s, box-shadow .25s;}
.field textarea {min-height: 16rem; resize: vertical;}
.field input:focus, .field select:focus, .field textarea:focus {border-color: var(--green); box-shadow: 0 0 0 .4rem rgba(25, 178, 138, .15); outline: none;}
.field [aria-invalid="true"] {border-color: var(--pink);}
.field .err {min-height: 2rem; font-size: 1.4rem; font-weight: 600; color: #e0475a;}
.field.is-wide {grid-column: 1 / -1;}
.form-foot {grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 2rem 3rem;}
.demo-note {font-size: 1.4rem; color: var(--sub);}
.done {grid-column: 1 / -1; padding: 3rem; border: 1px solid var(--green); border-radius: 2rem; background: var(--green-soft);}
.done h3 {font-size: 2.2rem; color: var(--navy);}
.done p {margin-top: .8rem; color: var(--body);}
.contact-line {display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin-top: 3rem; padding: 2.4rem 3rem; border-radius: 2rem; font-size: 1.6rem; background: var(--bg-blue);}
.contact-line b {color: var(--navy);}
@media (max-width: 63.999em) {
  .sub-hero-tx {flex: none; width: 100%;}
  .sub-hero-in {flex-direction: column; align-items: flex-start; min-height: 0; padding-block: 5rem 4rem;}
  .sub-hero-photo {flex: none; width: 100%; max-width: 48rem; height: 26rem;}
  .split {grid-template-columns: minmax(0, 1fr); gap: 3.6rem;}
  .flow, .flow.flow-3 {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .empty-grid {grid-template-columns: minmax(0, 1fr);}
  .form {grid-template-columns: minmax(0, 1fr);}
}
@media (max-width: 47.999em) {
  .sub-tt {font-size: 3.4rem;}
  .sub-ds {font-size: 1.6rem;}
  .sub-sec {padding-block: 6rem;}
  .sub-tabs a {padding: 0 1.6rem; font-size: 1.5rem;}
  .flow, .flow.flow-3 {grid-template-columns: minmax(0, 1fr);}
  .tbl tbody th {width: 12rem;}
  .cta.cta-sub {padding-block: 5.6rem;}
}