:root {
  --main-color: #2563eb;

  /* main-color의 H/S/L 값 -> 아래 색들은 이 값을 기준으로 자동 계산됨 */
  --main-h: 221;
  --main-s: 83%;
  --main-l: 53%;

  /* main-color에서 채도(S)/명도(L)만 조정해 파생 */
  --border-color: hsl(var(--main-h), calc(var(--main-s) - 15%), calc(var(--main-l) + 14%));
  --gray-text:    hsl(var(--main-h), calc(var(--main-s) - 47%), calc(var(--main-l) + 13%));
  --navy:         hsl(var(--main-h), var(--main-s),             calc(var(--main-l) - 38%));
  --navy-line:    hsl(var(--main-h), calc(var(--main-s) - 13%), calc(var(--main-l) - 20%));
  --underline:    hsl(calc(var(--main-h) - 18), calc(var(--main-s) - 16%), calc(var(--main-l) + 21%));
  --bg-answer:    hsl(calc(var(--main-h) + 8), calc(var(--main-s) - 10%), calc(var(--main-l) + 44%));
}

body {min-width: 1320px;}
.inner {width: 1280px; margin: 0 auto; position: relative;}

/* HEADER / SEC1 / FORM / NAV : hero_pc.css */
/* BANNER_WRAP */
.banner_wrap {background: var(--navy); padding: 100px 0; text-align: center; overflow: hidden; position: relative;}
.banner_wrap.thin {height: 170px; padding: 0;}
.banner_wrap h2 {font-family: 'A2z'; font-size: 55px; font-weight: 800; color: #fff; line-height: 80px;}
.banner_wrap h2 b {position: relative; z-index: 1;}
.banner_wrap h2 b::after {content: ""; width: 110%; height: 30px; background: var(--navy-line); position: absolute; bottom: 0; left: -5px; z-index: -1;}
.banner_wrap .inner > p {font-family: 'A2z'; font-size: 25px; line-height: 40px; color: #fff; margin-top: 34px;}
.banner_wrap .text_wrap {position: absolute; left: 50%; top: -35px; transform: translateX(-50%);}
.banner_wrap .text_wrap p {font-family: 'A2z'; font-size: 55px; font-weight: 800; color: transparent; line-height: 80px; white-space: nowrap; -webkit-text-stroke: 1px #ffffff20; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
.banner_wrap .text_wrap p b {color: #fff; -webkit-text-stroke: 0;}

.banner_wrap.thin.banner_compare {height: 96px; display: flex; align-items: center; justify-content: center;}
.banner_wrap.banner_compare .inner {display: flex; align-items: center; justify-content: center; height: 100%;}
.banner_wrap.banner_compare .inner > p {display: flex; align-items: center; justify-content: center; gap: 12px; font-family: 'A2z', 'Pretendard', sans-serif; font-size: 32px; font-weight: 700; line-height: 1.35; color: #fff; letter-spacing: -0.03em; margin: 0; -webkit-text-stroke: 0;}
.banner_compare .spark {width: 18px; height: 18px; color: #8ec4ff; display: flex; flex-shrink: 0;}
.banner_compare .spark svg {width: 100%; height: 100%; display: block;}

/* SECTION 공통 요소 */
section .inner > .title_wrap {text-align: center; margin-bottom: 80px;}
section .inner > .title_wrap h2 {font-family: 'A2z'; font-size: 55px; font-weight: 800; line-height: 80px; margin-bottom: 34px; position: relative;}
section .inner > .title_wrap h2 b {position: relative; z-index: 2;}
section .inner > .title_wrap h2 b::after {content: ""; width: 100%; height: 30px; position: absolute; bottom: 0; left: 0; background: var(--underline); z-index: -1;}
section .inner > .title_wrap p {font-family: 'A2z'; font-size: 25px; line-height: 40px;}
section .more_btn {display: block; width: fit-content; border: 2px solid var(--main-color); color: var(--main-color); font-size: 20px; font-weight: 300; border-radius: 26px; padding: 10px 18px; margin: 70px auto 0;}


/* SECTION 2 */
.sec2 {background: #fff; padding: 0;}
.sec2_head {background: #12305c; padding: 78px 0 86px; text-align: center; position: relative; overflow: hidden;}
.sec2_head .inner {position: relative;}
.sec2_head h2 {font-family: 'A2z', 'Pretendard', sans-serif; font-size: 42px; font-weight: 800; color: #fff; line-height: 1.45; letter-spacing: -0.04em;}
.sec2_head h2 b {color: #4ea8ff; font-weight: 800;}
.sec2_head p {font-family: 'Pretendard', sans-serif; font-size: 20px; color: rgba(255,255,255,0.86); margin-top: 18px; letter-spacing: -0.02em;}
.sec2_head_deco {position: absolute; right: 40px; top: 50%; transform: translateY(-50%); width: 168px; color: rgba(78,168,255,0.22); pointer-events: none;}
.sec2_head_deco svg {width: 100%; height: auto; display: block;}

.sec2_body {background: #fff; padding: 72px 0 90px;}
.sec2_intro {text-align: center; margin-bottom: 40px;}
.sec2_intro h3 {font-family: 'A2z', 'Pretendard', sans-serif; font-size: 34px; font-weight: 800; color: #163a7a; letter-spacing: -0.04em; margin-bottom: 14px;}
.sec2_intro p {font-size: 18px; line-height: 1.7; color: #6b7280; letter-spacing: -0.02em;}

.sec2 .content_wrap {display: flex; align-items: center; justify-content: center; gap: 20px; max-width: 1080px; margin: 0 auto;}
.sec2_steps {display: flex; flex-direction: column; gap: 14px; width: 680px; flex-shrink: 0; list-style: none; margin: 0; padding: 0;}
.sec2_steps li {display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 18px; box-shadow: 0 8px 24px rgba(22, 58, 122, 0.08); padding: 18px 22px; transition: transform .2s ease, box-shadow .2s ease;}
.sec2_steps li:hover {transform: translateY(-2px); box-shadow: 0 12px 28px rgba(22, 58, 122, 0.12);}
.sec2_steps .step_ico {width: 52px; height: 52px; border-radius: 50%; background: #eaf3ff; color: #2f6fed; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.sec2_steps .step_ico svg {width: 26px; height: 26px; display: block;}
.sec2_steps .step_body {display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0;}
.sec2_steps .step_body em {font-family: 'A2z', 'Pretendard', sans-serif; font-style: normal; font-size: 28px; font-weight: 800; color: #3b9bff; line-height: 1.1; flex-shrink: 0; padding-top: 1px;}
.sec2_steps .step_body h4 {font-size: 20px; font-weight: 700; color: #163a7a; letter-spacing: -0.03em; margin-bottom: 6px;}
.sec2_steps .step_body p {font-size: 15px; line-height: 1.55; color: #6b7280; word-break: keep-all;}
.sec2_steps .step_arrow {width: 10px; height: 10px; border-right: 2px solid #3b9bff; border-bottom: 2px solid #3b9bff; transform: rotate(-45deg); flex-shrink: 0; margin-right: 6px;}

.sec2_illust {position: relative; width: 320px; flex: 0 0 320px; display: flex; align-items: center; justify-content: center;}
.sec2_illust .main_img {width: 300px; max-width: 100%; height: auto; display: block;}

/* SECTION 3 */
.sec3 {background: linear-gradient(180deg, #eef4ff 0%, #f7f9fc 42%, #ffffff 100%); padding: 110px 0 130px;}
.sec3 .title_wrap h2 {color: #163a7a;}
.sec3 .title_wrap h2 b {color: #2f6fed;}
.sec3 .title_wrap h2 b::after {display: none;}
.sec3 .title_wrap p {color: #6b7280;}
.sec3 .content_wrap ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;}
.sec3 .content_wrap ul li {width: 100%; height: auto; min-height: 214px; border-radius: 24px; box-shadow: 0 10px 28px rgba(22, 58, 122, 0.08); background: #fff; padding: 32px 30px 30px;}
.sec3 .card_head {display: flex; align-items: center; gap: 14px; margin-bottom: 16px;}
.sec3 .card_ico {width: 52px; height: 52px; border-radius: 50%; background: #e8f1ff; color: #2f6fed; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.sec3 .card_ico svg {width: 26px; height: 26px; display: block;}
.sec3 .content_wrap ul li h3 {font-family: 'A2z', 'Pretendard', sans-serif; font-size: 24px; font-weight: 700; color: var(--main-color); margin-bottom: 0; letter-spacing: -0.03em;}
.sec3 .content_wrap ul li p {font-family: 'Pretendard', sans-serif; font-size: 16px; line-height: 1.7; color: #374151; word-break: keep-all;}
.sec3 .more_btn {border-radius: 999px; padding: 12px 26px; font-weight: 500; display: flex; align-items: center; gap: 8px;}
.sec3 .more_arr {width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); display: inline-block;}

/* SECTION 4 */
.sec4 {background: #fff; padding-bottom: 130px;}
.sec4 .title_wrap h2 {color: #163a7a;}
.sec4 .title_wrap h2 b {color: #2f6fed;}
.sec4 .title_wrap h2 b::after {display: none;}
.sec4 .title_wrap p {color: #6b7280;}
.sec4_cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; margin: 0; padding: 0;}
.sec4_cards li {background: #fff; border-radius: 24px; box-shadow: 0 10px 28px rgba(22, 58, 122, 0.08); text-align: center; padding: 36px 28px 32px; display: flex; flex-direction: column; align-items: center;}
.sec4_ico {width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px;}
.sec4_ico svg {width: 56px; height: 56px; display: block;}
.sec4_cards li h3 {font-family: 'A2z', 'Pretendard', sans-serif; font-size: 22px; font-weight: 700; color: var(--main-color); letter-spacing: -0.03em; margin-bottom: 14px; word-break: keep-all;}
.sec4_cards li p {font-family: 'Pretendard', sans-serif; font-size: 16px; line-height: 1.7; color: #4b5563; word-break: keep-all;}
.sec4 .main_img {width: 100%; max-width: 980px; display: block; margin: 0 auto 40px; height: auto;}
.sec4 .more_btn {border-radius: 999px; padding: 12px 26px; font-weight: 500; display: flex; align-items: center; gap: 8px;}
.sec4 .more_arr {width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); display: inline-block;}

/* SECTION 5 */
.sec5 {background: #fff; padding: 160px 0;}
.sec5 h2 {text-align: center; font-family: 'A2z'; font-size: 55px; font-weight: 800; line-height: 80px; margin-bottom: 80px;}
.sec5 ul {display: flex; flex-direction: column; gap: 30px;}
.sec5 ul li {display: flex; flex-direction: column; gap: 10px;}
.sec5 ul li .q_wrap {padding: 30px 25px; border-radius: 20px; background: var(--main-color); display: flex; align-items: center; gap: 20px; cursor: pointer;}
.sec5 ul li .q_wrap span {font-family: 'A2z'; font-size: 40px; font-weight: 700; color: #fff;}
.sec5 ul li .q_wrap h3 {font-size: 22px; font-weight: 600; color: #fff;}
.sec5 ul li .q_wrap img {width: 40px; margin-left: auto; transition: transform 0.3s ease; transform: rotate(180deg);}
.sec5 ul li .q_wrap.active img {transform: rotate(0deg);}
.sec5 ul li .a_wrap {padding: 30px 25px; background: var(--bg-answer); display: flex; gap: 20px; border-radius: 20px;}
.sec5 ul li .a_wrap span {font-family: 'A2z'; font-size: 40px; font-weight: 700;}
.sec5 ul li .a_wrap p {font-size: 20px; font-weight: 300; line-height: 30px; word-break: keep-all;}
.sec5 ul li .a_wrap img {width: 40px; margin-left: auto;}

.bottom_wrap {width: 100%; padding: 48px 0 42px; background: #3d3d3d;}
.bottom_wrap h2 {display: flex; align-items: center; gap: 12px; font-family: 'Pretendard', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 18px; color: #fff; letter-spacing: -0.02em;}
.bottom_wrap h2::before {content: ""; width: 4px; height: 18px; background: #ffd800; flex-shrink: 0;}
.bottom_wrap ul {padding: 0;}
.bottom_wrap ul li {color: #fff; font-family: 'Pretendard', sans-serif; font-size: 15px; line-height: 1.8; word-break: keep-all;}
footer {width: 100%; position: relative; z-index: 11; background: #282a29; padding: 22px 0; color: #999;}
footer p {font-family: 'Pretendard', sans-serif; font-size: 14px; line-height: 1.6; color: #999;}
footer .footer_privacy {display: inline; padding: 0; border: 0; background: none; color: #999; font-size: inherit; font-family: inherit; cursor: pointer; vertical-align: baseline;}
footer .footer_privacy:hover {color: #fff; text-decoration: underline;}