:root {
  --main-color: #e60000;
}
body {min-width: 1200px;}
.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: #fefaf9; padding: 35px 0;}
header a {display: flex; align-items: center; width: 210px; gap: 25px;}
header a img.afg_logo {width: 110px; height: 37px; position: relative; top: 4px;}
header a i {width: 2px; height: 30px; background: #4c5157; display: block; flex-shrink: 0; position: relative; top: 4px;}
.section1 {background: #fefaf9;}
.section1 .inner {padding: 30px 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: -2.5px; line-height: 1.2; margin-bottom: 30px;}
.section1 .title_wrap h1 b {color: var(--main-color); font-weight: 700;}
.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: 30px 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; flex-direction: column; justify-content: center;}
.section1 .form_wrap ul li .privacy_wrap .privacy_box {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: 40px 0 70px; background: #fcfcfc;}
.section2 h2 {font-size: 42px; font-weight: 600; letter-spacing: -2px;}
.section2 .inner {}
.section2 .category_wrap {display: flex; align-items: center; justify-content: space-between;}
.section2 .category_wrap ul {display: flex; align-items: center; justify-content: space-between; gap: 65px;}
.section2 .category_wrap ul li {text-align: center; opacity: 0.5;}
.section2 .category_wrap ul li.on {opacity: 1;}
.section2 .category_wrap ul li a {display: block;}
.section2 .category_wrap ul li .img_wrap {display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; border-radius: 100%; border: 1px solid #ddd; margin-bottom: 20px; background: #fff;}
.section2 .category_wrap ul li.on .img_wrap {border: 2px solid var(--main-color);}
.section2 .category_wrap ul li p {font-size: 25px; font-weight: 600; letter-spacing: -1px; color: #333; position: relative;}
.section2 .category_wrap ul li.on p {color: var(--main-color);}

.section3 {padding: 120px 0;}
.section3 .inner {}
.section3 .inner ul {display: flex; flex-direction: column; gap: 100px;}
.section3 .inner ul li {}
.section3 .inner ul li h3 {color: #e50000; font-weight: 600; font-size: 30px; letter-spacing: -1.7px; margin-bottom: 35px;}
.section3 .inner ul li h2 {font-size: 38px; font-weight: 600; margin-bottom: 32px; line-height: 1.4; letter-spacing: -2px;}
.section3 .inner ul li h2 b {font-weight: 400; letter-spacing: -1px; font-size: 35px;}
.section3 .inner ul li div {margin-left: 18px; margin-bottom: 15px;}
.section3 .inner ul li div p {font-size: 25px; font-weight: 500; line-height: 1.6; position: relative; letter-spacing: -1px;}
.section3 .inner ul li div p b {font-size: 20px; color: #555;}
.section3 .inner ul li p:after {content: "-"; display: block; position: absolute; top: 0; left: -18px;}
.section3 .inner ul li span {font-size: 20px; color: #4f4f4f; font-weight: 500; line-height: 1.3; letter-spacing: -1px;}
.section3 .inner .care_txt {margin-top: 32px; margin-left: 0;}


.section4 {background: #333; padding: 60px 0;}
.section4 h2 {color: #fff; font-size: 28px; font-weight: 600; letter-spacing: -1px; margin-bottom: 30px;}
.section4 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 .privacy2 {font-weight: 600; cursor: pointer; display: inline-block;}

.mob {display: none;}