@import url("../font/pretendard/pretendard.css");

:root{
  --main-color: #003cdc;
}
.container {width: 1200px; margin: 0 auto; }

header {background: #fff; border-bottom: 1px solid #E8E8E8; height: 90px;}
header .container {display: flex; align-items: center; justify-content: space-between; height: 100%;}
header .container a { width: 108px;}
header .container a img { width: 100%;}

/* section1 */
.section1 {background: #F0F8FF; padding: 90px 0;}

.section1 .content_wrap {display: flex; justify-content: space-between; margin-bottom: 80px; align-items: anchor-center;}
.section1 .left_box { width: calc(100% - 490px);box-sizing: border-box;}
.section1 .left_box .product_name {color: #939393; margin-bottom: 45px; text-align: center; font-size: 26px;}
.section1 .left_box h1 {font-size: 38px; font-weight: 700; line-height: 1.4; margin-bottom: 50px; text-align: center;}
.section1 .left_box h1 b {color: #003CDC;}
.section1 .left_box .img_wrap {text-align: center;}
.section1 .left_box .img_wrap img {width: 325px;}

.section1 .form_wrap {box-sizing: border-box;width: 490px; background: #fff; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; padding: 70px 40px; }
.section1 .form_wrap .top_box ul {display: flex; flex-direction: column; gap: 15px; margin-bottom: 40px;}
.section1 .form_wrap li:nth-child(1) {display: flex; gap: 11px;}
.section1 .form_wrap li > div {display: flex;}
.section1 .form_wrap li .radio_box {display: flex;}

.section1 .form_wrap .sex_cover {display: flex; gap: 11px;}
.section1 .form_wrap .sex_cover input[type="radio"] {display: none;} 
.section1 .form_wrap .sex_cover label {border-radius: 10px; background: #F7F7F7; padding: 22px 25px; font-size: 20px; color: #A8A8A8; display: flex;}
.section1 .form_wrap .sex_cover input:checked + label {background: var(--main-color); color: #fff;}
.section1 .form_wrap .sex_cover label:hover { cursor: pointer;}

.section1 .form_wrap .name_cover { width: 250px;}
.section1 .form_wrap .birth_cover {width: 409px;}
.section1 .form_wrap .tel_cover {width: 409px;}

.section1 .form_wrap input:focus {outline: none;}
.section1 .form_wrap input[type="text"],
.section1 .form_wrap input[type="tel"] {width: 100%; background: #F7F7F7; padding: 22px 27px; font-size: 20px; border: none; border-radius: 10px;}
.section1 .form_wrap input[type="text"]::placeholder,
.section1 .form_wrap input[type="tel"]::placeholder {color:#A8A8A8; font-weight: 400;}

.section1 .form_wrap .bottom_box { display: flex; gap: 20px;}
.section1 .form_wrap .bottom_box button {width: 50%; font-size: 22px; font-weight: 500; text-align: center; color: #fff; padding: 23px 18px; border-radius: 10px;background: #C4C4C4;}
.section1 .form_wrap .bottom_box button.btn_check {background: #C4C4C4;}

.section1 .benefit_wrap { display: flex;}
.section1 .benefit_wrap li { display: flex; gap: 18px; align-items: center; justify-content: center; width: 33.3333%; border-right: 1px solid #DEE2E6;}
.section1 .benefit_wrap li:nth-last-child(1) { border-right: none;}
.section1 .benefit_wrap li img { width: 46px;}
.section1 .benefit_wrap li p {font-size: 22px; font-weight: 500; line-height: 1.3;}
.section1 .benefit_wrap li p b {color: #275BE2;}
.section1 .benefit_wrap li p span { color: #666; font-size: 16px; display: block; margin-top: 8px;}

/* section2 */
.section2 .contents_wrap > div { display: none;}
.section2 .contents_wrap > div.on { display: block;}

.section2 .tab_wrap {display: flex; align-items: center; border-bottom: 1px solid #003CDC;}
.section2 .tab_wrap li {width: 330px; font-size: 26px; padding: 40px 0; text-align: center; position: relative;  color: #ACACAC;}
.section2 .tab_wrap li:hover { cursor: pointer; color: #8ea3d9;}
.section2 .tab_wrap li.on {color: #003CDC; font-weight: 700; cursor:default;}
.section2 .tab_wrap li.on:after {content: ''; width: 100%; height: 3px; background-color: #003CDC; position: absolute; bottom: -2px; left: 0;}

.section2 .tab1_wrap {padding: 50px 0; text-align: center;}
.section2 .tab1_wrap h2 {font-size: 36px; width: 600px; text-align: center; font-weight: 700; line-height: 1.5;}
.section2 .tab1_wrap ul li {padding: 60px 0;}
.section2 .tab1_wrap ul li:nth-child(2) { background: #F0F8FF;}
.section2 .tab1_wrap ul li .box {width: 600px; display: flex; flex-direction: column; align-items: center;}
.section2 .tab1_wrap ul li .box .num { width: 110px;}
.section2 .tab1_wrap ul li .img_wrap {width: 211px; text-align: center; margin: 50px auto;}
.section2 .tab1_wrap ul li .sub_title {font-size: 24px; font-weight: 500; line-height: 1.5; margin-bottom: 25px;}
.section2 .tab1_wrap ul li .sub_title b {font-size: 28px; font-weight: 700; color: #003CDC;}
.section2 .tab1_wrap ul li .sub_title span { color: #888; font-size: 16px; display: block; margin-top: 4px; font-weight: 400;}
.section2 .tab1_wrap ul li .content {font-size: 20px; color: #A2A2A2;}

.section2 .tab2_wrap h2 {color: #003CDC; font-size: 38px; font-weight: 700; margin-top: 90px; margin-bottom: 35px;}
.section2 .tab2_wrap ul li {width: 600px; margin-bottom: 50px; padding: 55px 40px; background: #F7F7F7; border-radius: 10px;}
.section2 .tab2_wrap ul li h3 {font-weight: 600; font-size: 28px;}
.section2 .tab2_wrap ul li .tit {font-size: 24px; font-weight: 500; margin: 35px 0 15px;}
.section2 .tab2_wrap ul li .con {font-size: 20px; color: #ABABAB; line-height: 1.5;}
.section2 .tab2_wrap ul li p:nth-last-child(1) { margin-bottom: 0;}

/* section3 */
.section3 { background: #F9F9F9; padding: 50px 0;}
.section3 .container { display: flex; flex-direction: column; align-items: center;}
.section3 h3{ font-size: 26px; font-weight: 600; cursor: pointer; user-select: none; border: 1px solid #bbb; border-radius: 100px; padding:16px 50px; display: inline; margin: 0 auto; background-color: #fff;}
.section3 .text_box { font-size: 18px; color: #939393; line-height: 1.5; margin-top:36px; display: none;}
.section3 .text_box.open { display: block;}
.section3 .text_box ul { display: flex; flex-direction: column; gap: 20px; }
.section3 .text_box .sim_box { margin-top: 20px;}


footer {background: #C4C4C4; padding: 55px 0;}
footer p {font-size: 18px; color: #757575; line-height: 1.5;}
footer .btn_wrap { display: flex; gap: 15px; margin-top: 30px;}
footer .btn_wrap button {font-size: 18px; color: #757575;}