:root {
  --main-color: #0068e5;
}
.inner {width: 1200px; margin: 0 auto;}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 9999s ease-out;
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  -webkit-text-fill-color: #111 !important;
}

header {background: #f3f9ff; padding: 35px 0;}
header a {display: inline-block;}
header a img {width: 162px;}

.section1 {background: #f3f9ff;}
.section1 .inner {padding: 10px 0 60px; background: url("../img/main_img.png") no-repeat 0 100%;}
.section1 .title_wrap {text-align: center; margin-bottom: 50px;}
.section1 .title_wrap h1 {font-size: 60px; font-weight: 600; letter-spacing: -3px; line-height: 1.2; margin-bottom: 30px;}
.section1 .title_wrap h1 b {color: var(--main-color);}
.section1 .title_wrap p {font-size: 21px; letter-spacing: -1px; font-weight: 500; color: #777;}

.section1 .form_wrap ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 0 140px; box-sizing: border-box;}
.section1 .form_wrap ul li {display: flex; align-items: center; height: 50px;}
.section1 .form_wrap ul li .input_wrap {padding: 0 18px; box-sizing: border-box; background: #fff; border: 1px solid #ddd; border-radius: 5px; display: flex; align-items: center; width: 100%; height: 100%;}
.section1 .form_wrap ul li .input_wrap label {min-width: 75px; font-size: 18px; font-weight: 600; letter-spacing: -1px;}
.section1 .form_wrap ul li .input_wrap input {font-size: 18px; outline: none; border: 0; letter-spacing: -1px; font-weight: 500; width: 100%; height: 100%;}
.section1 .form_wrap ul li .input_wrap input::placeholder {color: #aaa;}
.section1 .form_wrap ul li .input_wrap select {font-family: inherit; appearance: none; border: 0; outline: none; font-size: inherit; font-weight: 600; width: 100px; height: 100%; background: #fff url("../img/arrow.png") no-repeat calc(100% - 12px) 50% / 29px; border-radius: 0;}
.section1 .form_wrap ul li .gender_wrap {height: 100%; display: flex; align-items: center; gap: 5px; margin-left: 5px;}
.section1 .form_wrap ul li .gender_wrap label {display: flex; align-items: center; justify-content: center; background: #fff; height: calc(100% - 2px); border: 1px solid #ddd; width: 48px; border-radius: 5px; font-weight: 500; color: #777; cursor: pointer; font-size: 18px;}
.section1 .form_wrap ul li .gender_wrap input[type="radio"]:checked + label {background: var(--main-color); color: #fff;}
.section1 .form_wrap ul li .privacy_wrap {display: flex; align-items: center;}
.section1 .form_wrap ul li .privacy_wrap input[type="checkbox"] {width: 24px; height: 24px; cursor: pointer;}
.section1 .form_wrap ul li .privacy_wrap label {font-size: 18px; font-weight: 600; letter-spacing: -1px; color: #333; margin: 0 12px 0 10px; cursor: pointer;}
.section1 .form_wrap ul li .privacy_wrap button {font-size: 18px; font-weight: 600; letter-spacing: -1px;}
.section1 .form_wrap .btn_submit {display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--main-color); font-size: 24px; font-weight: 500; color: #fff; padding: 18px 100px; margin: 0 auto; border-radius: 5px; margin-top: 45px; letter-spacing: -1px;}

.section2 {padding: 60px 0 140px;}
.section2 .category_wrap {margin-bottom: 85px;}
.section2 .category_wrap ul {display: grid; grid-template-columns: repeat( 6, 1fr); gap: 34px 20px;}
.section2 .category_wrap ul li {text-align: center;}
.section2 .category_wrap ul li a {display: block; display: flex; flex-direction: column; align-items: center;}
.section2 .category_wrap ul li .img_wrap {display: flex; align-items: center; justify-content: center; width: 100%; height: 100px; border: 1px solid #ddd; margin-bottom: 22px; border-radius: 10px; background-color: #f5f9fc;}
.section2 .category_wrap ul li.on .img_wrap {border: 1px solid var(--main-color); background-color: #c7e3ff;}
.section2 .category_wrap ul li p {font-size: 22px; font-weight: 600; letter-spacing: -1px; color: #4f4f4f;}
.section2 .category_wrap ul li.on p {color: var(--main-color);}

.section2 .banner_wrap {background: #f3f9ff url("../img/banner_img.png") no-repeat 100% 100%; padding: 125px 80px; border-radius: 30px; margin-bottom: 110px;}
.section2 .banner_wrap h2 {font-size: 40px; font-weight: 600; letter-spacing: -1px; color: #111; padding-bottom: 40px; position: relative;}
.section2 .banner_wrap h2::after {content: ""; width: 100px; height: 5px; background: var(--main-color); position: absolute; bottom: 0; left: 0;}
.section2 .banner_wrap p {font-size: 22px; font-weight: 500; letter-spacing: -1px; line-height: 1.4; color: #111; padding-top: 30px;}

.section2 .benefit_wrap {text-align: center;}
.section2 .benefit_wrap h2 {text-align: left;}
.section2 .benefit_wrap h2 em { display: block; margin-bottom: 12px; font-size: 20px; color: #0061c1; font-weight: 600;}
.section2 .benefit_wrap h2 span {display: block; margin-bottom: 20px; font-size: 48px; font-weight: 700; letter-spacing: -3px; color: #333;}
.section2 .benefit_wrap h2 p {display: block; font-size: 21px; color: #777; font-weight: 500; line-height: 1.3; letter-spacing: -1px}
.section2 .benefit_wrap ul { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 40px; } 
.section2 .benefit_wrap ul li { display: flex; align-items: center; justify-content: space-between; padding: 50px 100px; } 
.section2 .benefit_wrap ul li:nth-child(2n) { border-left: 1px solid #999; } 
.section2 .benefit_wrap ul li:nth-child(1), 
.section2 .benefit_wrap ul li:nth-child(2) { border-bottom: 1px solid #999; } 
.section2 .benefit_wrap ul li h4 .title { display: block; margin-bottom: 15px; font-size: 28px; font-weight: 600; color: #005fc5; letter-spacing: -1px; } 
.section2 .benefit_wrap ul li h4 .txt { font-size: 21px; font-weight: 500; line-height: 1.3; color: #444; letter-spacing: -1px;}


.section3 {background: #333; padding: 60px 0;}
.section3 h2 {color: #fff; font-size: 28px; font-weight: 600; letter-spacing: -1px; margin-bottom: 30px;}
.section3 ul li {color: #999; font-size: 17px; line-height: 2; letter-spacing: -1px;}

footer {padding: 40px 0;}
footer p {font-size: 14px; letter-spacing: -.5px; line-height: 1.5; color: #111;}
footer p:not(:last-child) {margin-bottom: 10px;}
footer button {font-size: 14px; font-weight: 600; cursor: pointer; display: inline-block;}