@charset "utf-8";

.btn {
  width: 100%;
}

.btn:disabled {
  background: #bcbcbc;
}

.under_btn {
  text-decoration: underline;
}

.login_inner {
  padding: 250px 0;
}

.signup_page {
  padding: 150px 0;
}

.login_container {
  width: 500px;
  margin: 0 auto;
}

.title {
  margin-bottom: 50px;
}

.title span {
  display: block;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #111;
}

.title .titleImg {
  width: 227px;
  margin-bottom: 9px;
}

.title .titleImg img {
  width: 100%;
}

.title p {
  font-size: 17px;
  font-weight: 500;
  color: #999;
}

legend {
  display: none;
}

form input {
  width: 100%;
  height: 50px;
  border: 1px solid #bcbcbc;
  padding: 0 20px;
  color: #111;
  font-size: 15px;
  font-weight: 400;
}

form input::-webkit-inner-spin-button {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

form input:active,
form input:focus {
  border: 1px solid #111;
}

form input::placeholder {
  color: #999;
}

form input.active,
form input.active:active,
form input.active:focus {
  border: 1px solid #ff5d57;
  color: #ff5d57;
}

form label {
  font-size: 17px;
  font-weight: 500;
  color: #111;
  margin-bottom: 10px;
  display: block;
}

.falseText,
.trueText {
  font-size: 13px;
  font-weight: 400;
  margin: 6px 0 15px 20px;
}

.falseText {
  color: #ff5d57;
}

.trueText {
  color: #111;
}

.loginBox .btn {
  margin-bottom: 20px;
}

.loginBox p:last-of-type {
  margin-bottom: 20px;
}

.loginBox li {
  margin-bottom: 10px;
}

.login .btm_area {
  text-align: center;
}

.login .loginSub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 120px;
}

.login .loginSub span {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: #111;
  cursor: pointer;
}

.login .login_btn {
  margin-top: 25px;
  font-weight: 500;
}

.login section a {
  margin: 0 auto;
  text-align: center;
  line-height: 1.4;
}

.login .loginSub span:last-of-type {
  background: url("../images/icon/arrow_r.svg") right center / 24px no-repeat;
  padding: 2px 28px 5px 0;
}

.login .loginSub span:first-of-type.active {
  background: url("../images/icon/check_on.svg") left center / 20px no-repeat;
}

.login .loginSub span:first-of-type {
  background: url("../images/icon/check_off.svg") left center / 20px no-repeat;

  line-height: 1.5;
  padding: 3px 0 3px 27px;
}

/* find 페이지 */
/* find 공통 */
.find_id_list>li,
.find_pw_list>li {
  margin-bottom: 16px;
}

.find_section>.login_container {
  min-width: 500px;
}

.phone_box {
  display: flex;
  margin-bottom: 0;
}

.phone_box input {
  min-width: 330px;
  margin-right: 10px;
}

.certify {
  margin-top: 10px;
}

.phone_box .certify_check {
  margin-top: 0 !important;
  font-weight: 400;
}

.tologin {
  display: block;
  text-align: center;
  padding: 17px 0;
  background-color: #111;
}

.findPage .btn {
  margin-top: 25px;
}

.findSub {
  display: flex;
  margin-bottom: 25px;
}

.findSub>button {
  width: 50%;
  padding: 14px 0;
  font-size: 17px;
  font-weight: 400;
  color: #999;
  border-bottom: 2px solid #ddd;
}

.findSub>.active {
  font-weight: 500;
  color: #111;
  border-bottom-color: #111;
}

.find.id .find_id_name label {
  display: block;
}

.findEnd.id>p {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
}

.findEnd.id>small {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: #999;
}

.findid_val {
  margin-top: 30px;
  color: #111;
}

.findid_val:focus {
  border-color: #bcbcbc;
}

.findEnd.pw>ul>li:first-child {
  margin-bottom: 13px;
}

.tologin_box {
  margin-top: 45px;
  text-align: center;
}

.tologin_box>a {
  font-size: 15px;
  text-decoration: underline;
}

/* -----회원가입 ---- */
.signup_page .wrap_inner {
  padding: 135px 0 129px;
}

.signup_page .repeat_check.btn,
.signup_page .certify_check.btn {
  font-weight: 400;
}

.signup legend {
  display: block;
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 11px;
  border-bottom: 2px solid #111;
  margin-bottom: 28px;
}

.signupBox>ul>li {
  margin-bottom: 16px;
  display: block;
}

.signup .pwContainer .pw_wrap {
  margin-bottom: 10px;
}

.signup .falseText {
  margin-top: 5px;
}

.signup .pwContainer .trueText,
.signup .pwContainer .ruleText,
.signup .phoneContainer p:first-of-type {
  margin-bottom: 5px;
}

.signup .idBox,
.signup .phoneBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.signup .idBox input,
.signup .phoneBox input {
  width: 330px;
}

.signup .idBox .btn,
.signup .phoneBox .btn {
  width: 160px;
}

.signupBox ul {
  margin-bottom: 40px;
}

/* ----------selectBox------------- */
.selectBox {
  margin-bottom: 10px;
}

.apply .selectBox,
.signup_page .selectBox {
  border: 1px solid #bcbcbc;
  border: 1px solid #BCBCBC;
  padding-right: 15px;
}

.apply .selectBox select,
.signup_page .selectBox select {
  width: 100%;
  height: 45px;
  padding-left: 15px;
  color: #111;
  font-size: 15px;
}

.apply .selectBox select option,
.signup_page .selectBox select option {
  color: #999;
  font-size: 15px;
}

.selectBox .label {
  border: 1px solid #bcbcbc;
  padding: 13px 20px 16px 20px;
  color: #999;
  font-size: 15px;
  font-weight: 400;
  width: 100%;
  text-align: left;
}

.sel_arrow {
  position: absolute;
  right: 20px;
  top: 13px;
  width: 24px;
  height: 24px;
}

.sel_arrow.active {
  transform: rotate(180deg);
}

.selectBox.disabled button {
  background: #f8f8f8;
  color: #999999;
}

.period,
.per_cor,
.gender {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.period span {
  font-size: 20px;
  font-weight: 400;
  color: #111;
  margin: 0 5px;
}

.gender input,
.per_cor input {
  display: none;
}

.period input,
.personal,
.corpor,
.man,
.woman {
  width: 240px;
}

.radioBox>div div:last-of-type {
  margin-left: 20px;
}

.signupBox .cor,
.edit_info .cor {
  display: none;
}

.signupBox .cor.active,
.edit_info .cor.active {
  display: block;
}

.signupBox .resident_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.signupBox .resident_wrap input {
  width: 240px;
  margin-bottom: 0;
}

.signupBox .resident_wrap span {
  font-weight: 500;
}

.edit_info .radioBox .per_cor input[type='radio']+label {
  background-color: #f8f8f8;
  background-image: url(../images/icon/check_off_gray.svg);
}

.edit_info .radioBox .per_cor input[type="radio"]:checked+label {
  background-image: url(../images/icon/check_on.svg);
}

.radioBox>div input[type="radio"]+label {
  background: url("../images/icon/check_off.svg") right 10px center / 20px no-repeat;
  box-shadow: 2px 2px 8px rgba(221, 221, 221, 100);
  width: 100%;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  padding: 12px 0;
  border: 1px solid #fff;
  cursor: pointer;
}

.radioBox>div input[type="radio"]:checked+label {
  background: url("../images/icon/check_on.svg") right 10px center / 20px no-repeat;
  box-sizing: border-box;
  border: 1px solid #111;
}

.period input {
  position: relative;
  padding-left: 54px;
}

.period input[type="date"] {
  position: relative;
  padding-left: 50px;
  cursor: pointer;
}

.edit_info .period input[type="date"] {
  color: #999;
  background-color: #f8f8f8;
}

.period input[type="date"]:focus,
.period input[type="date"]:active {
  border-color: #bcbcbc;
}

.period input[type="date"]::-webkit-clear-button,
.period input[type="date"]::-webkit-inner-spin-button {
  display: none;
  border-color: #BCBCBC;
}

.period input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
  cursor: pointer;
}

.period input[type="date"]::before {
  position: absolute;
  top: 50%;
  left: 20px;
  content: "";
  width: 24px;
  height: 24px;
  background: url("../images/icon/date.svg") center center / contain;
  transform: translateY(-50%);
  z-index: 0;
}

/* ------------회원가입 이용약관------------ */
.singup_term legend {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: #111;
  text-align: center;
  margin-bottom: 10px;
  border: none;
}

.singup_term label {
  font-size: 15px;
  font-weight: 400;
  color: #111;
  cursor: pointer;
}

.singup_term li {
  position: relative;
}

.term_arrow {
  position: absolute;
  right: 10px;
  top: 0;
  width: 24px;
  height: 24px;
  filter: brightness(0);
  cursor: pointer;
  transition: all 0.3s;
}

.term_arrow.active {
  transition: all 0.3s;
  transform: rotate(-180deg);
}

.term {
  display: block;
  background: #f8f8f8;
  text-align: center;
  width: 100%;
  height: 130px;
  padding: 10px 0;
  display: none;
}

.term.active {
  display: block;
}

.term>pre {
  height: 110px;
  margin: 0 auto;
  padding: 0 30px;
  font-size: 15px;
  font-weight: 400;
  color: #111;
  white-space: pre-line;
  line-height: 1.4;
  text-align: left;
  overflow-y: scroll;
  -ms-overflow-style: none;
}

.term>pre::-webkit-scrollbar {
  display: none;
}

.singup_term ul {
  margin-bottom: 10px;
}

.singup_term ul li:not(:first-of-type) {
  margin-bottom: 18px;
}

.singup_term ul li:last-of-type {
  margin-bottom: 0;
}

.singup_term ul li:first-of-type {
  border-bottom: 2px solid #111;
  margin-bottom: 24px;
}

.singup_term ul li:first-of-type label {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 6px;
}

.singup_term input {
  display: none;
}

.singup_term input[type="checkbox"]+label {
  background: url("../images/icon/check_off.svg") 11px center / 20px no-repeat;
  padding: 3px 0 6px 38px;
}

.singup_term input[type="checkbox"]:checked+label {
  background: url("../images/icon/check_on.svg") 11px center / 20px no-repeat;
}

.singup_term>p {
  font-size: 13px;
  font-weight: 400;
  color: #999;
  margin-left: 38px;
  margin-bottom: 30px;
}

/* -------------회원가입 완료 페이지------------ */
.signup_end .login_container {
  text-align: center;
}

.signup_end .login_container strong {
  display: block;
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 500;
}

.signup_end .login_container p {
  font-size: 15px;
  font-weight: 400;
}

.signupEnd .signup_end .btn {
  margin-top: 30px;
  color: #fff;
  background-color: #111;
}

.signupEnd_img {
  margin-bottom: 90px;
}

.signupEnd_img img {
  width: 100%;
}

/* 테블릿 */
@media screen and (max-width: 1500px) {
  .login .wrap_inner {
    padding: calc(100vw * (250 / 1500)) 0;
  }

  .btn {
    font-size: calc(100vw * (15 / 1500));
    padding: calc(100vw * (15 / 1500)) 0;
  }

  .login_container {
    width: calc(100vw * (500 / 1500));
  }

  .title {
    margin-bottom: calc(100vw * (50 / 1500));
  }

  .title span {
    font-size: calc(100vw * (20 / 1500));
    margin-bottom: calc(100vw * (8 / 1500));
  }

  .title .titleImg {
    width: calc(100vw * (227 / 1500));
    margin-bottom: calc(100vw * (9 / 1500));
  }

  .title p {
    font-size: calc(100vw * (17 / 1500));
  }

  form input {
    height: calc(100vw * (50 / 1500));
    padding: 0 calc(100vw * (20 / 1500));
    font-size: calc(100vw * (15 / 1500));
  }

  form label {
    font-size: calc(100vw * (17 / 1500));
    margin-bottom: calc(100vw * (10 / 1500));
  }

  .falseText,
  .trueText {
    font-size: calc(100vw * (13 / 1500));
    margin: calc(100vw * (6 / 1500)) 0 calc(100vw * (15 / 1500)) calc(100vw * (20 / 1500));
  }

  .loginBox .btn {
    margin-bottom: calc(100vw * (20 / 1500));
  }

  .loginBox li {
    margin-bottom: calc(100vw * (10 / 1500));
  }

  .loginBox p:last-of-type {
    margin-bottom: calc(100vw * (20 / 1500));
  }

  .login .loginSub {
    margin-bottom: calc(100vw * (120 / 1500));
  }

  .login .login_btn {
    margin-top: calc(100vw * (25 / 1500));
  }

  .login .loginSub span,
  .login a {
    font-size: calc(100vw * (15 / 1500));
  }

  .login .loginSub span:last-of-type {
    background: url("../images/icon/arrow_r.svg") right center / calc(100vw * (24 / 1500)) no-repeat;
    padding: calc(100vw * (2 / 1500)) calc(100vw * (28 / 1500)) calc(100vw * (5 / 1500)) 0;
  }

  .login .loginSub span:first-of-type.active {
    background: url("../images/icon/check_on.svg") left center / calc(100vw * (20 / 1500)) no-repeat;
  }

  .login .loginSub span:first-of-type {
    background: url("../images/icon/check_off.svg") left center / calc(100vw * (20 / 1500)) no-repeat;
    padding: calc(100vw * (3 / 1500)) 0 calc(100vw * (3 / 1500)) calc(100vw * (27 / 1500));
  }

  /* find 페이지 */
  .find_id_list>li,
  .find_pw_list>li {
    margin-bottom: calc(100vw * (16 / 1500));
  }

  /* find 공통 */
  .find_section>.login_container {
    min-width: calc(100vw * (500 / 1500));
  }

  .phone_box {
    margin-bottom: calc(100vw * (10 / 1500));
  }

  .phone_box input {
    min-width: calc(100vw * (330 / 1500));
    margin-right: calc(100vw * (10 / 1500));
  }

  .certify {
    margin-top: calc(100vw * (10 / 1500));
  }

  .tologin {
    padding: calc(100vw * (17 / 1500)) 0;
  }

  /* find 공통 끝 */
  .findPage .btn {
    margin-top: calc(100vw * (25 / 1500));
  }

  .findSub {
    margin-bottom: calc(100vw * (25 / 1500));
  }

  .findSub>button {
    padding: calc(100vw * (14 / 1500)) 0;
    font-size: calc(100vw * (17 / 1500));
  }

  .findEnd.id>p {
    font-size: calc(100vw * (17 / 1500));
    line-height: 1.2;
  }

  .findEnd.id>small {
    margin-top: calc(100vw * (8 / 1500));
    font-size: calc(100vw * (13 / 1500));
  }

  .findid_val {
    margin-top: calc(100vw * (30 / 1500));
  }

  .findEnd.pw>ul>li:first-child {
    margin-bottom: calc(100vw * (13 / 1500));
  }

  .tologin_box {
    margin-top: calc(100vw * (45 / 1500));
  }

  .tologin_box>a {
    font-size: calc(100vw * (15 / 1500));
  }

  /* -----회원가입 ---- */
  .signup_page .wrap_inner {
    padding: calc(100vw * (135 / 1500)) 0 calc(100vw * (129 / 1500));
  }

  .signup legend {
    font-size: calc(100vw * (20 / 1500));
    padding-bottom: calc(100vw * (11 / 1500));
    margin-bottom: calc(100vw * (28 / 1500));
  }

  .signupBox>ul>li {
    margin-bottom: calc(100vw * (16 / 1500));
  }

  .signup .pwContainer .pw_wrap {
    margin-bottom: calc(100vw * (10 / 1500));
  }

  .signup .falseText {
    margin-top: calc(100vw * (5 / 1500));
  }

  .signup .pwContainer .trueText,
  .signup .pwContainer .ruleText,
  .signup .phoneContainer p:first-of-type {
    margin-bottom: calc(100vw * (5 / 1500));
  }

  .signup .idBox input,
  .signup .phoneBox input {
    width: calc(100vw * (330 / 1500));
  }

  .signup .idBox .btn,
  .signup .phoneBox .btn {
    width: calc(100vw * (160 / 1500));
    margin-bottom: 0;
  }

  .signupBox ul {
    margin-bottom: calc(100vw * (40 / 1500));
  }

  /* ----------selectBox------------- */
  .selectBox {
    margin-bottom: calc(100vw * (10 / 1500));
  }

  .apply .selectBox,
  .signup_page .selectBox {
    padding-right: calc(100vw * (15 / 1500));
  }

  .apply .selectBox select,
  .signup_page .selectBox select {
    height: calc(100vw * (45 / 1500));
    padding-left: calc(100vw * (15 / 1500));
    font-size: calc(100vw * (15 / 1500));
  }

  .apply .selectBox select option,
  .signup_page .selectBox select option {
    font-size: calc(100vw * (15 / 1500));
  }

  .apply .selectBox,
  .signup_page .selectBox {
    padding-right: calc(100vw*(15/1500));
  }

  .apply .selectBox select,
  .signup_page .selectBox select {
    height: calc(100vw*(45/1500));
    padding-left: calc(100vw*(15/1500));
    font-size: calc(100vw*(15/1500));
  }

  .apply .selectBox select option,
  .signup_page .selectBox select option {
    font-size: calc(100vw*(15/1500));
  }

  .selectBox .label {
    padding: calc(100vw * (13 / 1500)) calc(100vw * (20 / 1500)) calc(100vw * (16 / 1500)) calc(100vw * (20 / 1500));
    font-size: calc(100vw * (15 / 1500));
  }

  .sel_arrow {
    right: calc(100vw * (20 / 1500));
    top: calc(100vw * (13 / 1500));
    width: calc(100vw * (24 / 1500));
    height: calc(100vw * (24 / 1500));
  }

  .period span {
    font-size: calc(100vw * (20 / 1500));
    margin: 0 calc(100vw * (5 / 1500));
  }

  .period input,
  .personal,
  .corpor,
  .man,
  .woman {
    width: 50%;
  }

  .radioBox>div div:last-of-type {
    margin-left: calc(100vw * (20 / 1500));
  }

  .radioBox>div input[type="radio"]+label {
    background: url("../images/icon/check_off.svg") right calc(100vw * (10 / 1500)) center / calc(100vw * (20 / 1500)) no-repeat;
    box-shadow: calc(100vw * (2 / 1500)) calc(100vw * (2 / 1500)) calc(100vw * (8 / 1500)) rgba(221, 221, 221, 100);
    font-size: calc(100vw * (15 / 1500));
    padding: calc(100vw * (14 / 1500)) 0;
  }

  .radioBox>div input[type="radio"]:checked+label {
    background: url("../images/icon/check_on.svg") right calc(100vw * (10 / 1500)) center / calc(100vw * (20 / 1500)) no-repeat;
  }

  .period input[type="date"] {
    padding-left: calc(100vw * (50 / 1500));
  }

  .period input[type="date"]::before {
    left: calc(100vw * (20 / 1500));
    width: calc(100vw * (24 / 1500));
    height: calc(100vw * (24 / 1500));
  }

  .signupBox .resident_wrap input {
    width: calc(100vw * (240 / 1500));
    margin-bottom: 0;
  }

  .apply .signupBox .resident_wrap input {
    width: calc(100vw * (225 / 1500));
  }

  /* ------------회원가입 이용약관------------ */
  .singup_term legend {
    font-size: calc(100vw * (15 / 1500));
    margin-bottom: calc(100vw * (10 / 1500));
  }

  .singup_term label {
    font-size: calc(100vw * (15 / 1500));
  }

  .term_arrow {
    right: calc(100vw * (10 / 1500));
    width: calc(100vw * (24 / 1500));
    height: calc(100vw * (24 / 1500));
  }

  .term {
    width: 100%;
    height: calc(100vw * (130 / 1500));
    padding: calc(100vw * (10 / 1500)) calc(100vw * (30 / 1500));
  }

  .term>pre {
    width: 100%;
    height: calc(100vw * (110 / 1500));
    padding: 0 calc(100vw * (30 / 1500));
    font-size: calc(100vw * (15 / 1500));
  }

  .singup_term ul {
    margin-bottom: calc(100vw * (10 / 1500));
  }

  .singup_term ul li:not(:first-of-type) {
    margin-bottom: calc(100vw * (18 / 1500));
  }

  .singup_term ul li:last-of-type {
    margin-bottom: 0;
  }

  .singup_term ul li:first-of-type {
    margin-bottom: calc(100vw * (24 / 1500));
  }

  .singup_term ul li:first-of-type label {
    font-size: calc(100vw * (17 / 1500));
    margin-bottom: calc(100vw * (6 / 1500));
  }

  .singup_term input[type="checkbox"]+label {
    background: url("../images/icon/check_off.svg") calc(100vw * (11 / 1500)) center / calc(100vw * (20 / 1500)) no-repeat;
    padding: calc(100vw * (3 / 1500)) 0 calc(100vw * (6 / 1500)) calc(100vw * (38 / 1500));
  }

  .singup_term input[type="checkbox"]:checked+label {
    background: url("../images/icon/check_on.svg") calc(100vw * (11 / 1500)) center / calc(100vw * (20 / 1500)) no-repeat;
  }

  .singup_term>p {
    font-size: calc(100vw * (13 / 1500));
    margin-left: calc(100vw * (38 / 1500));
    margin-bottom: calc(100vw * (30 / 1500));
  }

  /* -------------회원가입 완료 페이지------------ */
  .signup_end .login_container strong {
    margin-bottom: calc(100vw * (12 / 1500));
    font-size: calc(100vw * (20 / 1500));
  }

  .signup_end .login_container p {
    font-size: calc(100vw * (15 / 1500));
  }

  .signupEnd .signup_end .btn {
    margin-top: calc(100vw * (30 / 1500));
  }

  .signupEnd_img {
    margin-bottom: calc(100vw * (90 / 1500));
  }
}

/* 모바일 */
@media screen and (max-width: 900px) {
  .login .wrap_inner {
    padding: calc(100vw * (167 / 428)) 0;
  }

  .login header {
    display: none;
  }

  .wrap_inner {
    width: calc(100vw * (380 / 428));
  }

  .btn {
    font-size: calc(100vw * (15 / 428));
    padding: calc(100vw * (15 / 428)) 0;
  }

  .login_container {
    width: 100%;
  }

  .title {
    margin-bottom: calc(100vw * (50 / 428));
  }

  .title span {
    font-size: calc(100vw * (20 / 428));
    margin-bottom: calc(100vw * (8 / 428));
  }

  .title .titleImg {
    width: calc(100vw * (227 / 428));
    margin-bottom: calc(100vw * (9 / 428));
  }

  .title p {
    font-size: calc(100vw * (17 / 428));
  }

  form input {
    height: calc(100vw * (50 / 428));
    padding: 0 calc(100vw * (20 / 428));
    font-size: calc(100vw * (15 / 428));
  }

  form label {
    font-size: calc(100vw * (17 / 428));
    margin-bottom: calc(100vw * (10 / 428));
  }

  .falseText,
  .trueText {
    font-size: calc(100vw * (13 / 428));
    margin: calc(100vw * (6 / 428)) 0 calc(100vw * (16 / 428)) calc(100vw * (20 / 428));
  }

  .loginBox .btn {
    margin-bottom: calc(100vw * (20 / 428));
  }

  .loginBox li {
    margin-bottom: calc(100vw * (10 / 428));
  }

  .loginBox p:last-of-type {
    margin-bottom: calc(100vw * (20 / 428));
  }

  .login .loginSub {
    margin-bottom: calc(100vw * (120 / 428));
  }

  .login .login_btn {
    margin-top: calc(100vw * (25 / 428));
  }

  .login .loginSub span,
  .login a {
    font-size: calc(100vw * (15 / 428));
  }

  .login .loginSub span:last-of-type {
    background: url("../images/icon/arrow_r.svg") right center / calc(100vw * (24 / 428)) no-repeat;
    padding: calc(100vw * (2 / 428)) calc(100vw * (28 / 428)) calc(100vw * (5 / 428)) 0;
  }

  .login .loginSub span:first-of-type.active {
    background: url("../images/icon/check_on.svg") left center / calc(100vw * (20 / 428)) no-repeat;
  }

  .login .loginSub span:first-of-type {
    background: url("../images/icon/check_off.svg") left center / calc(100vw * (20 / 428)) no-repeat;
    padding: calc(100vw * (3 / 428)) 0 calc(100vw * (3 / 428)) calc(100vw * (27 / 428));
  }

  /* find 페이지 */
  .find_id_list>li,
  .find_pw_list>li {
    margin-bottom: calc(100vw * (16 / 428));
  }

  /* find 공통 */
  .find_section>.login_container {
    min-width: calc(100vw * (380 / 428));
  }

  .phone_box {
    margin-bottom: calc(100vw * (10 / 428));
  }

  .phone_box input {
    min-width: calc(100vw * (246 / 428));
    margin-right: calc(100vw * (10 / 428));
  }

  .certify {
    margin-top: calc(100vw * (10 / 428));
  }

  .tologin {
    padding: calc(100vw * (17 / 428)) 0;
  }

  .findPage .btn {
    margin-top: calc(100vw * (25 / 428));
  }

  .findSub {
    margin-bottom: calc(100vw * (25 / 428));
  }

  .findSub>button {
    padding: calc(100vw * (14 / 428)) 0;
    font-size: calc(100vw * (17 / 428));
  }

  .findEnd.id>p {
    font-size: calc(100vw * (17 / 428));
    line-height: 1.2;
  }

  .findEnd.id>small {
    margin-top: calc(100vw * (8 / 428));
    font-size: calc(100vw * (13 / 428));
  }

  .findid_val {
    margin-top: calc(100vw * (30 / 428));
  }

  .findEnd.pw>ul>li:first-child {
    margin-bottom: calc(100vw * (13 / 428));
  }

  .tologin_box {
    margin-top: calc(100vw * (45 / 428));
  }

  .tologin_box>a {
    font-size: calc(100vw * (15 / 428));
  }

  /* -----회원가입 ---- */
  .signup_page .wrap_inner {
    width: calc(100vw * (380 / 428));
    padding: calc(100vw * (80 / 428)) 0;
  }

  .signup legend {
    font-size: calc(100vw * (20 / 428));
    padding-bottom: calc(100vw * (11 / 428));
    margin-bottom: calc(100vw * (28 / 428));
  }

  .signupBox>ul>li {
    margin-bottom: calc(100vw * (16 / 428));
  }

  .signup .pwContainer .pw_wrap {
    margin-bottom: calc(100vw * (10 / 428));
  }

  .signup .falseText {
    margin-top: calc(100vw * (5 / 428));
  }

  .signup .pwContainer .trueText,
  .signup .pwContainer .ruleText,
  .signup .phoneContainer p:first-of-type {
    margin-bottom: calc(100vw * (5 / 428));
  }

  .signup .idBox input,
  .signup .phoneBox input {
    width: calc(100vw * (247 / 428));
  }

  .signup .idBox .btn,
  .signup .phoneBox .btn {
    width: calc(100vw * (124 / 428));
    margin-bottom: 0;
  }

  .signupBox ul {
    margin-bottom: calc(100vw * (40 / 428));
  }

  /* ----------selectBox------------- */
  .selectBox {
    margin-bottom: calc(100vw * (10 / 428));
  }

  .apply .selectBox,
  .signup_page .selectBox {
    padding-right: calc(100vw * (15 / 428));
  }

  .apply .selectBox select,
  .signup_page .selectBox select {
    height: calc(100vw * (45 / 428));
    padding-left: calc(100vw * (15 / 428));
    font-size: calc(100vw * (15 / 428));
  }

  .apply .selectBox select option,
  .signup_page .selectBox select option {
    font-size: calc(100vw * (15 / 428));
  }

  .apply .selectBox select,
  .signup_page .selectBox select {
    height: calc(100vw*(45/428));
    padding-left: calc(100vw*(15/428));
    font-size: calc(100vw*(15/428));
  }

  .apply .selectBox select option,
  .signup_page .selectBox select option {
    font-size: calc(100vw*(15/428));
  }

  .selectBox .label {
    padding: calc(100vw * (13 / 428)) calc(100vw * (20 / 428)) calc(100vw * (16 / 428)) calc(100vw * (20 / 428));
    font-size: calc(100vw * (15 / 428));
  }

  .sel_arrow {
    right: calc(100vw * (20 / 428));
    top: calc(100vw * (13 / 428));
    width: calc(100vw * (24 / 428));
    height: calc(100vw * (24 / 428));
  }

  .period span {
    font-size: calc(100vw * (20 / 428));
    margin: 0 calc(100vw * (5 / 428));
  }

  .period input,
  .personal,
  .corpor,
  .man,
  .woman {
    width: calc(100vw * (180 / 428));
  }

  .radioBox>div div:last-of-type {
    margin-left: calc(100vw * (20 / 428));
  }

  .radioBox>div input[type="radio"]+label {
    background: url("../images/icon/check_off.svg") right calc(100vw * (10 / 428)) center / calc(100vw * (20 / 428)) no-repeat;
    box-shadow: calc(100vw * (2 / 428)) calc(100vw * (2 / 428)) calc(100vw * (8 / 428)) rgba(221, 221, 221, 100);
    font-size: calc(100vw * (15 / 428));
    padding: calc(100vw * (14 / 428)) 0;
  }

  .radioBox>div input[type="radio"]:checked+label {
    background: url("../images/icon/check_on.svg") right calc(100vw * (10 / 428)) center / calc(100vw * (20 / 428)) no-repeat;
  }

  .period input[type="date"] {
    padding-left: calc(100vw * (45 / 428));
    padding-right: 0;
  }

  .period input[type="date"]::before {
    left: calc(100vw * (13 / 428));
    width: calc(100vw * (24 / 428));
    height: calc(100vw * (24 / 428));
  }

  .signupBox .resident_wrap input {
    width: calc(100vw * (180 / 428));
    margin-bottom: 0;
  }

  .apply .signupBox .resident_wrap input {
    width: calc(100vw * (180 / 428));
  }

  .signupBox .resident_wrap span {
    font-size: calc(100vw * (20 / 428));
  }

  /* ------------회원가입 이용약관------------ */
  .singup_term legend {
    font-size: calc(100vw * (15 / 428));
    margin-bottom: calc(100vw * (10 / 428));
  }

  .singup_term label {
    font-size: calc(100vw * (15 / 428));
  }

  .term_arrow {
    right: calc(100vw * (10 / 428));
    width: calc(100vw * (24 / 428));
    height: calc(100vw * (24 / 428));
  }

  .term {
    width: calc(100vw * (380 / 428));
    height: calc(100vw * (130 / 428));
    padding: calc(100vw * (10 / 428)) calc(100vw * (30 / 428));
  }

  .term>pre {
    width: 100%;
    width: 100%;
    height: calc(100vw * (110 / 428));
    padding: 0 calc(100vw * (30 / 428));
    font-size: calc(100vw * (15 / 428));
  }

  .singup_term ul {
    margin-bottom: calc(100vw * (10 / 428));
  }

  .singup_term ul li:not(:first-of-type) {
    margin-bottom: calc(100vw * (18 / 428));
  }

  .singup_term ul li:last-of-type {
    margin-bottom: 0;
  }

  .singup_term ul li:first-of-type {
    margin-bottom: calc(100vw * (24 / 428));
    border-bottom: calc(100vw * (2 / 428)) solid #111;
  }

  .singup_term ul li:first-of-type label {
    font-size: calc(100vw * (17 / 428));
    margin-bottom: calc(100vw * (6 / 428));
  }

  .singup_term input[type="checkbox"]+label {
    background: url("../images/icon/check_off.svg") calc(100vw * (11 / 428)) center / calc(100vw * (20 / 428)) no-repeat;
    padding: calc(100vw * (3 / 428)) 0 calc(100vw * (6 / 428)) calc(100vw * (38 / 428));
  }

  .singup_term input[type="checkbox"]:checked+label {
    background: url("../images/icon/check_on.svg") calc(100vw * (11 / 428)) center / calc(100vw * (20 / 428)) no-repeat;
  }

  .singup_term>p {
    font-size: calc(100vw * (13 / 428));
    margin-left: calc(100vw * (38 / 428));
    margin-bottom: calc(100vw * (30 / 428));
  }

  /* -------------회원가입 완료 페이지------------ */
  .signupEnd .wrap_inner {
    height: 100vh;
    display: flex;
    align-items: center;
  }

  .signup_end .login_container strong {
    margin-bottom: calc(100vw * (5 / 428));
    font-size: calc(100vw * (20 / 428));
  }

  .signup_end .login_container p {
    font-size: calc(100vw * (15 / 428));
  }

  .signupEnd .signup_end .btn {
    margin-top: calc(100vw * (30 / 428));
  }

  .signupEnd_img {
    width: calc(100vw * (380 / 428));
    margin-bottom: calc(100vw * (90 / 428));
  }
}