body {background: #fff;}

/* wrap */
#wrap {max-width: 620px; width: 100%; height: auto; padding-bottom: 184px; margin: 0 auto;}

/* header */
header {position: relative; width: 100%; height: 80px; z-index: 9999; background: var(--wt);}
header .container {display: flex; align-items: center; justify-content: center; height: 100%;}
header .back_btn {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 24px; height: auto;}
header .back_btn img {width: 100%; height: auto;}
header .fade_item {max-width: 409px; width: 100%; height: auto; aspect-ratio: 16 / 2.771;}
header .fade_item ul {position: relative; width: 100%; height: auto;}
header .fade_item ul li {position: absolute; top: 0; left: 0; width: 100%; height: auto; opacity: 0; transition: all .5s;}
header .fade_item ul li.on {opacity: 1; transition: all .5s;}
header .fade_item ul li img {width: 100%; height: auto;}

/* tit-box2 */
.tit-box2 {margin: 80px 0 40px;}
.tit-box2 .sub {margin-bottom: 24px; font-size: 17px; font-weight: bold; line-height: 1; color: var(--pr);}
.tit-box2 .tit {font-size: 48px; font-weight: bold; line-height: 1.2; color: var(--black); word-break: keep-all;}

/* step_arrow */
.step_arrow {width: 100%; height: auto; margin-bottom: 80px;}
.step_arrow ul {display: flex; align-items: center; gap: 48px;}
.step_arrow ul li {}
.step_arrow ul li .child-box {}
.step_arrow ul li .child-box .num {position: relative; font-size: 17px; font-weight: bold; line-height: 1; color: var(--gray_b);}
.step_arrow ul li:first-of-type .child-box .num:before {position: absolute; bottom: 12px; left: 36px; content: ''; display: block; width: 70px; height: auto; border: 2px dashed var(--gray_c2); border-radius: 1px;}
.step_arrow ul li:first-of-type.ok .child-box .num:before {border-color: var(--pr);}
.step_arrow ul li .child-box .num:after {content: ''; display: block; width: 24px; height: auto; aspect-ratio: 5/5; margin-top: 17px; border: 2px solid var(--gray_b); border-radius: 100%; box-sizing: border-box;}
.step_arrow ul li.active .child-box .num:after {border-color: var(--pr);}
.step_arrow ul li.ok .child-box .num:after {background: url(./../img/comple.png)no-repeat 50% 50%; background-size: cover; border: none;}

/* step_form */
.step_form {display: none;}
.step_form.active {display: block;}

/* input-box */
.input-box {display: flex; flex-flow: column; gap: 16px; margin-bottom: 48px;}
.input-box:last-of-type {margin-bottom: 0;}
.input-box .tit {font-size: 19px; font-weight: bold; line-height: 1; color: var(--gray_5);}
.input-box .dst {font-size: 14px; font-weight: 400; line-height: 1; color: var(--gray_72);}
.input-box input:not(input[type="radio"]),
.input-box input:not(input[type="checkbox"]) {width: 100%; height: 56px; border: 1px solid var(--gray_b); border-radius: 64px; padding: 0 23px; box-sizing: border-box; font-size: 17px; font-weight: 600; line-height: 1; color: var(--black); outline-color: var(--pr);}
.input-box input::placeholder {color: var(--gray_b);}

.input-box .ckd_box {display: flex; align-items: center; gap: 48px;}
.input-box .ckd_box input[type="radio"] {display: none;}
.input-box .ckd_box label {display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 500; line-height: 1; color: var(--gray_b);}
.input-box .ckd_box label:before {content: ''; display: block; width: 32px; height: auto; aspect-ratio: 5/5; background: url(./../img/radio_off.png)no-repeat 50% 50%; background-size: cover;}
.input-box .ckd_box input[type="radio"]:checked + label {color: var(--pr); font-weight: bold;}
.input-box .ckd_box input[type="radio"]:checked + label:before {content: ''; display: block; width: 32px; height: auto; aspect-ratio: 5/5; background: url(./../img/radio_on.png)no-repeat 50% 50%; background-size: cover;}

.input-box .ckd_box label.radio_tit {color: var(--gray_5) !important;}

/* submit_btn */
.submit_btn {width: 100%; height: 64px; margin-top: 80px; border-radius: 74px; background: var(--pr); font-size: 22px; font-weight: bold; color: var(--wt); cursor: pointer;}
.submit_btn:disabled {background: var(--gray_b);}
.submit_btn2 {display: none;}
.back_btn2 {display: none;}


.doc {font-size: 18px; font-weight: bold; line-height: 1.28; color: #242a30; text-decoration: underline;}

/* txt_radio */
.txt_radio {display: flex; flex-wrap: wrap; gap: 10px 0; height: auto; margin: 0 -5px;}
.txt_radio input[type="radio"] {display: none;}
.txt_radio .txt_box {width: calc(100% / 2); padding: 0 5px; box-sizing: border-box;}
.txt_radio .txt_box span {display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; border: 1px solid var(--gray_b); border-radius: 10px; font-size: 20px; font-weight: 500; line-height: 1; color: var(--gray_b); box-sizing: border-box;}
.txt_radio input[type="radio"]:checked + .txt_box span {border-color: var(--pr); color: var(--pr); background: #e3fffe;}

@media screen and (max-width: 700px){
  #wrap {padding: 0 20px; box-sizing: border-box;} 
  
}

@media screen and (max-width: 500px) {
  header {height: 60px;}
  header .back_btn {width: 20px;}
  header .fade_item {max-width: 300px;}

  .tit-box2 {margin: 40px 0 20px;}
  .tit-box2 .sub {margin-bottom: 10px;}
  .tit-box2 .tit {font-size: 24px;}

  .step_arrow ul {gap: 24px;}
  .step_arrow ul li .child-box .num {font-size: 15px;}
  .step_arrow ul li .child-box .num:after {width: 15px; margin-top: 5px;}
  .step_arrow ul li:first-of-type .child-box .num:before {bottom: 6px; left: 24px; width: 50px; border-width: 1px;}
  .step_arrow {margin-bottom: 40px;}

  /* .input-box .tit {font-size: 15px;} */
  .input-box {gap: 10px; margin-bottom: 24px;}
  .input-box input:not(input[type="radio"]), .input-box input:not(input[type="checkbox"]) {height: 50px; padding: 0 17px; font-size: 17px;}

  .input-box .ckd_box label {gap: 4px; font-size: 17px;}
  .input-box .ckd_box label.radio_tit .doc {font-size: 16px;}
  .input-box .ckd_box label:before {width: 29px;}
  .input-box .ckd_box input[type="radio"]:checked + label:before {width: 26px;}
  .input-box .ckd_box {gap: 20px;}

  .submit_btn {height: 55px; font-size: 18px; margin-top: 50px;}

  header .back_btn {left: -5px;}
}

@media screen and (max-width: 370px) {
  header .fade_item {max-width: 240px;}
}


/* popup */
.dim {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 10;}
.agreement-popup {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 500px; width: 100%; height: 80vh; padding-bottom: 100px; background: var(--wt); border-radius: 16px; box-sizing: border-box; overflow: hidden; z-index: 11;}
.agreement-popup .popup-hd {position: relative; background: var(--pr); padding: 20px; box-sizing: border-box;}
.agreement-popup .popup-hd .tit {font-size: 18px; font-weight: bold; line-height: 1.3; color: var(--wt); text-align: center;}
.agreement-popup .popup-hd .close-btn {position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 20px; height: auto;}
.agreement-popup .popup-content {width: 100%; height: 100%; overflow: auto; overflow-x: hidden; padding: 20px; box-sizing: border-box; font-size: 15px; font-weight: 400; line-height: 1.3; color: var(--black_1e);}
.agreement-popup .popup-content b {display: block; margin-bottom: 10px; font-size: 16px; font-weight: bold; line-height: 1.2; color: var(--black);}
.agreement-popup .popup-content table {width: 100%; height: auto; margin-bottom: 20px; margin-top: 10px; border: 1px solid var(--gray_72);}
.agreement-popup .popup-content table tr {}
.agreement-popup .popup-content table th {width: 150px; height: 35px; font-size: 16px; font-weight: bold; color: var(--black); vertical-align: middle; border-bottom: 1px solid var(--gray_72); border-right: 1px solid var(--gray_72);}
.agreement-popup .popup-content table td {padding: 10px; font-size: 16px; font-weight: bold; color: var(--black); vertical-align: middle; border-bottom: 1px solid var(--gray_72); line-height: 1.2;}