@charset "utf-8";
.fix_box {display: flex;padding: 3rem;border-radius: 1.5rem;align-items: center;margin-bottom: 2rem;background-color: #F4F7F9;}
.fix_box:first-child {background-color:#fff; border: 1px solid var(--color-main2);}
input, textarea, select, button {
	  border: none;
	  padding: 0;
	  margin: 0;
    background-color: inherit;
	  font-family: inherit;
	  font-size: inherit;
	  line-height: inherit;
	  box-shadow: none;
	  outline: none;
	  padding-block: 0;
	  padding-inline: 0;
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  appearance: none;
    font: inherit;
	height:45px; 
	padding-left:12px
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox  */
input[type='number'] {
  -moz-appearance: textfield;
  text-align: center;
  text-indent: 0;
  height: 45px;
  width: 31%;
}
input[type=text]:focus,input[type=password]:focus, textarea:focus, select:focus
{-webkit-box-shadow:unset; -moz-box-shadow:unset;box-shadow:unset;border:0; opacity: 1;}
.form_fix label {
  box-sizing: border-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  /* position: relative; */
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 10px;
  /* border: 1px solid var(--color-main2); */
  cursor: pointer;
  width: 100%;
  padding: 1rem 3rem;
  background-color: #ffffff;
  /* outline: 1px solid var(--color-main2); */
  /* color: var(--color-main2); */
  transition: all .2s ease-in-out;
  font-weight: 400;
}
.form_fix .payment label {display:flex;flex-direction: row;gap: 10px;}

.form_fix input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: #F4F7F9; */
  /* outline: 1px solid var(--color-main2); */
  border-radius: 10px;
  border: 1px solid #e3e3e3;
  cursor: pointer;
  /* visibility: hidden; */
}


.form_fix label > span svg path {fill:#333}

.form_fix input:checked + label {background-color:var(--color-main2);color:#fff}
.form_fix input:checked + label > span svg path {fill:#fff}
.fix_box ul {display:flex;gap: 1.5rem;}
.fix_box ul li {position:relative;min-width: 100px;/* padding: 1rem 3rem; */} 
.form_tit {width:20%;font-size: 24px;font-weight: 600;font-family: var(--font-point);color: var(--color-main2);} 
.direct {margin-left: 2rem;/* height: 100%; */display: flex;align-items: flex-end;}
.direct input {width: 150px;border-bottom: 1px solid #434343;margin-left: 10px;}
.direct input[type=text]:focus {-webkit-box-shadow:unset; -moz-box-shadow:unset;box-shadow:unset;border:unset; border-bottom: 1px solid #434343; background-color:#fff}
.step_form {display: flex;margin-top: 5rem;}
.step_form .step_box {position:relative;width: 20%;}
.step_form .step_box:before {
  content:"";
  position:absolute;
  background-color:#f5f5f5;
  width: 33rem;
  height: 100%;
  right:0;
  bottom: 0;
  border-radius: 0 2rem 0 0;
  z-index: -1;
}
.step_progress {
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.step_progress li {font-size:24px;color:#AEAEAE;padding: 2rem 0;position: relative;padding-left: 4rem;font-family: var(--font-point);font-weight: 600;}
.step_progress li:before {content:"";position:absolute;width:40px;height:40px;background-color:#ECECEC;border-radius: 50%;left: 0;display: inline-flex;align-items: center;justify-content: center;}
.step_progress li:first-child::before {content:"1"}
.step_progress li:nth-child(2)::before {content:"2"}
.step_progress li:nth-child(3)::before {content:"3"}
.step_progress li:after {content:"";position:absolute;width:1px;height: 70%;background-color: #b3b3b3;left:0;margin-left:20px;z-index:-1;top: 80%;}
.step_progress li:last-child::after {display:none;}
.step_progress li.on {color:var(--color-main)}
.step_progress li.on:before {background-color:var(--color-main); color:#fff}
.step_form .form_list {width:80%;padding: 4rem;}
.form_list dl {display: flex;}
.form_list dl + dl {margin-top: 2rem;}
.form_list dt {width:20%;color:#f62626;padding-top: 5px;}
.form_list dt span {color:#000;font-weight: 400;}
.form_list dd {width:80%;height: 45px;}
.form_list dd i {font-style:normal}
.form_list input[type=text] {width:100%;border: 1px solid #ddd;height: 100%;border-radius: 6px;}
.form_list dd.phonenumber, .form_list dd.birth, .form_list dd.email {
    border: 1px solid #ddd;
    border-radius: 6px;
}
.form_list dd.phonenumber i {width: 4%;display: inline-block;text-align: center;}
.form_list input[type=text].wd3 {border:0;width: 30.3%;}
.form_list .birth i {width: 1px;
  height: 18px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #DCDCDC;
  display: inline-block;
  margin: 0 10px 0 12px;
  vertical-align: middle;
}
.radio_box .radio {
  float: left;
}

.radio_box .radio input {
  display: block;
  position: absolute;
  z-index: -1;
  margin-top: 10px;
  display: none;
}

.radio_box .radio label {
  display: block;
  font-size: 16px;
  padding-left: 36px;
  position: relative;
  line-height: 36px;
  cursor: pointer;
  width: 200px;
}

.radio_box .radio label::before, .radio_box .radio label::after {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
}

.radio_box .radio label::before {
  width: 24px;
  height: 24px;
  border: 1px solid #666666;
  background: #fff;
}

.radio_box .radio label::after {
  display: none;
  left: 5px;
  width: 14px;
  height: 14px;
  background: var(--color-main);
}

.radio_box .radio input:checked ~ label::before {
  border: 1px solid var(--color-main);
}

.radio_box .radio input:checked ~ label::after {
  display: block;
}
.form_list dd.adress {height: auto;display: flex;flex-wrap: wrap;justify-content: space-between;gap: .5rem;}
.adress input[type=text] {height:45px}
.adress input[type=text]:first-of-type{width: 77%;}
.form_list dd.adress button {background-color:#fff;border:1px solid var(--color-main);padding:0 2rem;border-radius: 10px;width: 22%;color: var(--color-main);font-weight: 500;transition: all .2s ease-in-out;}
.form_list dd.adress button:hover {background-color:var(--color-main); color:#fff}
.form_list dd.email select {width: 35.5%;border:0}
.btn_wrap {
    margin-top: 4rem;
    text-align: right;
}
.btn_wrap .btn {font-size:18px;width: 200px;background-color: #AEAEAE;/* border: 1px solid #AEAEAE; */color: #fff;display: inline-flex;align-items: center;justify-content: center;border-radius: 2rem;padding: 2rem;font-weight: 500;transition: all .2s ease-in-out;}
.btn_wrap .btn_prev {margin-right: 1rem;}
.btn_wrap .btn_done {background-color:var(--color-main); color:#fff}
.btn_wrap .btn_done:hover {box-shadow:3px 5px 20px rgb(236 110 97 / 40%)}