:root {
  /* 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),             max(calc(var(--main-l) - 38%), 18%));
  --navy-line:    hsl(var(--main-h), calc(var(--main-s) - 13%), max(calc(var(--main-l) - 20%), 30%));
  --underline:    hsl(calc(var(--main-h) - 18), calc(var(--main-s) - 16%), calc(var(--main-l) + 21%));
  --bg-answer:    hsl(var(--main-h), calc(var(--main-s) - 11%), max(calc(var(--main-l) + 37%), 95%));
}

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

/* HEADER */
header {background: #fff; padding: 25px 0;}
header .inner {display: flex; align-items: center; justify-content: space-between;}
header .logo_wrap a {display: inline-block;}
header .logo_wrap a h1 {font-family: 'A2z'; font-weight: 700; font-size: 25px; color: var(--main-color);}
header .nav_wrap ul {display: flex; align-items: center; gap: 50px;}
header .nav_wrap ul li a {font-family: 'A2z'; font-size: 18px; position: relative;}
header .nav_wrap ul li.active a {color: var(--main-color); font-weight: 600; font-size: 21px;}
header .nav_wrap ul li.active a::after {content: ""; width: calc(100% + 15px); height: 3px; background: var(--main-color); position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);}

/* SECTION 1 */
.sec1 {background: var(--main-color); padding: 60px 0 130px; position: relative;}
.sec1 .main_img {position: absolute; bottom: -130px; right: 0; height: 815px;}
.sec1 .main_title_wrap {margin-top: 75px; margin-bottom: 60px;}
.sec1 .main_title_wrap h2 {font-family: 'A2z'; font-weight: 800; font-size: 105px; line-height: 140px; color: #fff; margin-bottom: 22px;}
.sec1 .main_title_wrap p {font-family: 'A2z'; font-size: 28px; font-weight: 600; line-height: 40px; color: #fff;}
.sec1 .form_wrap {background: #fff; padding: 30px 60px; border-radius: 20px; position: relative; box-shadow: 0 0 10px 0 #00000010;}
.sec1 .form_wrap form {display: flex; gap: 35px;}
.sec1 .form_wrap ul {display: grid; grid-template-columns: 2fr 1.5fr; gap: 20px 30px;}
.sec1 .form_wrap ul li {display: flex; align-items: center; gap: 10px;}
.sec1 .form_wrap ul li .input_box {height: 50px; display: flex; align-items: center; gap: 30px; border: 1px solid var(--border-color); border-radius: 10px; padding: 0 25px; flex-grow: 1;}
.sec1 .form_wrap ul li .form_title {font-size: 18px; color: var(--gray-text); white-space: nowrap;}
.sec1 .form_wrap ul li .input_box:focus-within .form_title {color: var(--main-color); font-weight: 500;}
.sec1 .form_wrap ul li input[type="text"],
.sec1 .form_wrap ul li input[type="tel"] {width: 100%; font-size: 18px; border: 0; background: none; outline: none;}
.sec1 .form_wrap ul li input[type="text"]::placeholder,
.sec1 .form_wrap ul li input[type="tel"]::placeholder {color: var(--gray-text);}
.sec1 .form_wrap ul li .gender_wrap {display: flex; align-items: center; gap: 5px;}
.sec1 .form_wrap ul li .gender_wrap input[type="radio"] {display: none;}
.sec1 .form_wrap ul li .gender_wrap label {display: flex; align-items: center; justify-content: center; width: 50px; aspect-ratio: 1 / 1; border: 1px solid var(--border-color); border-radius: 10px; font-size: 18px; color: var(--gray-text); cursor: pointer;}
.sec1 .form_wrap ul li .gender_wrap input[type="radio"]:checked + label {background: var(--main-color); border: 1px solid var(--main-color); color: #fff; font-weight: 600;}
.sec1 .form_wrap ul li select {height: 50px; width: 105px; border: 1px solid var(--border-color); border-radius: 10px; appearance: none; padding: 0 25px; font-size: 18px; font-weight: 600; background: #fff url("../images/icon_arrow_tel.png") no-repeat calc(100% - 25px) 50% / 12px; outline: none;}
.sec1 .form_wrap .btn_submit {display: block; width: 180px; background: var(--main-color); border-radius: 10px; color: #fff; font-size: 25px; font-weight: 600; line-height: 35px; flex-shrink: 0;}

/* SECTION_NAV */
.sec_nav {padding: 95px 0;}
.sec_nav ul {display: flex; align-items: flex-start; justify-content: center; gap: 65px;}
.sec_nav ul li a {display: flex; flex-direction: column; align-items: center;}
.sec_nav ul li a .img_wrap {width: 70px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 100%; border: 3px solid var(--main-color);}
.sec_nav ul li a .img_wrap i {display: block; width: 50px; aspect-ratio: 1 / 1; background-color: var(--main-color); -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain;}
.sec_nav ul li a .img_wrap .ico_cancer {--ico: url("../images/nav_icon_cancer.png");}
.sec_nav ul li a .img_wrap .ico_total  {--ico: url("../images/nav_icon_total.png");}
.sec_nav ul li a .img_wrap .ico_silbi  {--ico: url("../images/nav_icon_silbi.png");}
.sec_nav ul li a .img_wrap .ico_driver {--ico: url("../images/nav_icon_driver.png");}
.sec_nav ul li a .img_wrap .ico_dental {--ico: url("../images/nav_icon_dental.png");}
.sec_nav ul li a .img_wrap .ico_care   {--ico: url("../images/nav_icon_care.png");}
.sec_nav ul li a p {font-family: 'A2z'; font-size: 25px; font-weight: 600; color: var(--main-color); margin-top: 16px;}
.sec_nav ul li.active a .img_wrap {background: var(--main-color);}
.sec_nav ul li.active a .img_wrap i {background-color: #fff;}
.sec_nav ul li.active a p {font-size: 33px; font-weight: 700;}

/* 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: 100%; height: 30px; background: var(--navy-line); position: absolute; bottom: 0; left: 0; 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;}

/* 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 4 */
.sec4 {padding: 160px 0; background: #f8fafc;}
.sec4 .list_wrap > ul {display: flex; flex-direction: column; gap: 55px;}
.sec4 .list_wrap > ul > li {width: fit-content; padding: 40px 30px; background: var(--bg-answer); border-radius: 30px; position: relative; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15));}
.sec4 .list_wrap > ul > li::after {content: ""; position: absolute; bottom: -18px; left: 35px; width: 35px; height: 45px; background: var(--bg-answer); border-bottom-left-radius: 100% 80%; clip-path: polygon(0 0, 40% 0, 100% 100%, 0 100%); transform: scaleX(-1);}
.sec4 .list_wrap > ul > li:nth-child(2n) {margin-left: auto;}
.sec4 .list_wrap > ul > li:nth-child(2n)::after {left: unset; right: 35px; transform: scaleX(1);}
.sec4 .list_wrap > ul > li h3 {font-family: 'A2z'; font-size: 35px; font-weight: 700; margin-bottom: 25px;}
.sec4 .list_wrap > ul > li p {font-family: 'A2z'; font-size: 20px; font-weight: 300;}
.sec4 .list_wrap .info_box ul {display: flex; flex-direction: column; gap: 20px;}
.sec4 .list_wrap .info_box ul li {display: flex; align-items: center; gap: 15px;}
.sec4 .list_wrap .info_box ul li span {display: inline-block; background: var(--main-color); font-family: 'A2z'; font-size: 26px; font-weight: 500; color: #fcf8f8; padding: 15px 20px; border-radius: 20px;}


/* SECTION 5 */
.sec5 {background: #f8fafc; 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: 20px 30px; border-radius: 20px; background: var(--main-color); display: flex; align-items: center; gap: 20px; cursor: pointer;}
.sec5 ul li .q_wrap h3 {font-family: 'A2z'; font-size: 35px; font-weight: 700; 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: 20px 30px; background: var(--bg-answer); display: flex; gap: 20px; border-radius: 20px;}
.sec5 ul li .a_wrap p {font-family: 'A2z'; font-size: 20px; font-weight: 300; line-height: 45px; word-break: keep-all;}
.sec5 ul li .a_wrap img {width: 40px; margin-left: auto;}