@import url("/font/pretendard_gov.css");
@import url("/font/nanumsquare_neo.css");
@import url("/font/jalnan_gothic.css");
@import url("/font/montserrat.css");
@import url("/font/remixicon_v4.6.0.css");
/*-------------------------------------------------

Title       : LMS
Author      : EASESOFT
Create Date : 2025-12

-------------------------------------------------*/
.login_box {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  border: 1px solid #dddddd;
  border-radius: 1.6rem;
  padding: 4rem;
}
.login_box.wide {
  max-width: 96rem;
}
.login_box .form {
  width: 100%;
  max-width: 40rem;
  margin: 4rem auto 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.8rem;
}
.login_box .form .btn_box {
  margin-top: 1rem;
}
.login_box .link {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
.login_box .link a {
  font-size: 1.5rem;
  font-weight: 600;
}
.login_box .other_wrap {
  border-top: 1px solid #dddddd;
  width: 100%;
  max-width: 40rem;
  margin: 2rem auto 0;
  padding-top: 2rem;
}
.login_box .btn_box:has(.btn.phone) {
  border-bottom: 1px solid #dddddd;
  padding-bottom: 2.4rem;
}
.login_box .phone {
  font-weight: 600;
  gap: 1rem;
  width: 100%;
}
.login_box .phone::before {
  content: "";
  width: 2.4rem;
  height: 2.4rem;
  background-image: url("/main/img/ic/phone.svg");
  background-size: 2rem;
  background-repeat: no-repeat;
  background-position: center center;
  transition: 0.3s;
}
@media screen and (min-width: 1024px) {
  .login_box .phone:hover::before {
    filter: invert(1);
  }
}
.login_box .sns {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.login_box .sns .btn {
  font-weight: 600;
  gap: 1rem;
}
.login_box .sns .btn::before {
  content: "";
  width: 2.4rem;
  height: 2.4rem;
  background-repeat: no-repeat;
  background-position: center center;
  transition: 0.3s;
}
.login_box .sns .naver::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1226_6406)'%3E%3Cpath d='M10.5432 0V8.07013L5.47789 0H0V16H5.45684V7.92519L10.5221 15.9953H15.9958V0H10.5389H10.5432Z' fill='%233ACC15'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1226_6406'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  background-size: 2rem;
}
@media screen and (min-width: 1024px) {
  .login_box .sns .naver:hover {
    background-color: #3ACC15;
    color: #fff;
  }
  .login_box .sns .naver:hover::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1226_6406)'%3E%3Cpath d='M10.5432 0V8.07013L5.47789 0H0V16H5.45684V7.92519L10.5221 15.9953H15.9958V0H10.5389H10.5432Z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1226_6406'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  }
}
.login_box .sns .kakao::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='20' viewBox='0 0 22 20' fill='none'%3E%3Cpath d='M10.9999 0C17.075 0 22 3.79756 22 8.48201C22 13.1665 17.075 16.964 10.9999 16.964C10.3837 16.964 9.77964 16.9242 9.19098 16.8492L4.57299 19.8372C4.04771 20.1123 3.86226 20.0817 4.07851 19.4092L5.01257 15.598C1.99544 14.0856 0 11.4637 0 8.48201C0 3.79756 4.92481 0 10.9999 0ZM17.1883 8.35185L18.7286 6.87723C18.9248 6.68933 18.93 6.3798 18.7401 6.18564C18.5503 5.99174 18.2374 5.98652 18.0409 6.1743L16.0209 8.10811V6.51047C16.0209 6.24046 15.7997 6.02144 15.5266 6.02144C15.2537 6.02144 15.0322 6.24046 15.0322 6.51047V9.16039C15.0135 9.23604 15.014 9.31439 15.0322 9.39025V10.8814C15.0322 11.1515 15.2537 11.3705 15.5266 11.3705C15.7997 11.3705 16.0209 11.1515 16.0209 10.8814V9.46922L16.4689 9.04049L17.9647 11.1472C18.061 11.2828 18.2142 11.3553 18.3697 11.3553C18.468 11.3553 18.5671 11.3263 18.6535 11.2663C18.8769 11.1112 18.9308 10.8061 18.7739 10.585L17.1883 8.35185ZM14.0898 10.3466H12.5603V6.52576C12.5603 6.25576 12.339 6.03674 12.0659 6.03674C11.793 6.03674 11.5717 6.25576 11.5717 6.52576V10.8355C11.5717 11.1057 11.793 11.3245 12.0659 11.3245H14.0898C14.3629 11.3245 14.5841 11.1057 14.5841 10.8355C14.5841 10.5655 14.3629 10.3466 14.0898 10.3466ZM7.95373 9.21552L8.68288 7.4459L9.35054 9.21552H7.95373ZM10.5966 9.72094C10.5968 9.71534 10.5982 9.71027 10.5982 9.70467C10.5982 9.57617 10.5471 9.4603 10.4653 9.37305L9.37013 6.47057C9.26704 6.18054 9.00901 5.98804 8.71265 5.97989C8.42128 5.97211 8.15013 6.15237 8.02847 6.44251L6.28833 10.6663C6.18536 10.9163 6.30676 11.2018 6.5596 11.3038C6.81245 11.4058 7.10099 11.2856 7.20396 11.0354L7.55075 10.1937H9.71951L10.032 11.0219C10.1063 11.2186 10.2948 11.3401 10.4954 11.34C10.5528 11.34 10.6111 11.33 10.6681 11.309C10.924 11.2147 11.0539 10.9329 10.9583 10.6797L10.5966 9.72094ZM7.11697 6.53086C7.11697 6.26086 6.89557 6.04184 6.62262 6.04184H3.22377C2.95069 6.04184 2.7293 6.26086 2.7293 6.53086C2.7293 6.80088 2.95069 7.01988 3.22377 7.01988H4.43903V10.8917C4.43903 11.1617 4.66042 11.3806 4.93338 11.3806C5.20645 11.3806 5.42786 11.1617 5.42786 10.8917V7.01988H6.62262C6.89557 7.01988 7.11697 6.80088 7.11697 6.53086Z' fill='%23391B1B'/%3E%3C/svg%3E");
  background-size: 2.4rem;
}
@media screen and (min-width: 1024px) {
  .login_box .sns .kakao:hover {
    background-color: #391B1B;
    color: #FAE300;
  }
  .login_box .sns .kakao:hover::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='20' viewBox='0 0 22 20' fill='none'%3E%3Cpath d='M10.9999 0C17.075 0 22 3.79756 22 8.48201C22 13.1665 17.075 16.964 10.9999 16.964C10.3837 16.964 9.77964 16.9242 9.19098 16.8492L4.57299 19.8372C4.04771 20.1123 3.86226 20.0817 4.07851 19.4092L5.01257 15.598C1.99544 14.0856 0 11.4637 0 8.48201C0 3.79756 4.92481 0 10.9999 0ZM17.1883 8.35185L18.7286 6.87723C18.9248 6.68933 18.93 6.3798 18.7401 6.18564C18.5503 5.99174 18.2374 5.98652 18.0409 6.1743L16.0209 8.10811V6.51047C16.0209 6.24046 15.7997 6.02144 15.5266 6.02144C15.2537 6.02144 15.0322 6.24046 15.0322 6.51047V9.16039C15.0135 9.23604 15.014 9.31439 15.0322 9.39025V10.8814C15.0322 11.1515 15.2537 11.3705 15.5266 11.3705C15.7997 11.3705 16.0209 11.1515 16.0209 10.8814V9.46922L16.4689 9.04049L17.9647 11.1472C18.061 11.2828 18.2142 11.3553 18.3697 11.3553C18.468 11.3553 18.5671 11.3263 18.6535 11.2663C18.8769 11.1112 18.9308 10.8061 18.7739 10.585L17.1883 8.35185ZM14.0898 10.3466H12.5603V6.52576C12.5603 6.25576 12.339 6.03674 12.0659 6.03674C11.793 6.03674 11.5717 6.25576 11.5717 6.52576V10.8355C11.5717 11.1057 11.793 11.3245 12.0659 11.3245H14.0898C14.3629 11.3245 14.5841 11.1057 14.5841 10.8355C14.5841 10.5655 14.3629 10.3466 14.0898 10.3466ZM7.95373 9.21552L8.68288 7.4459L9.35054 9.21552H7.95373ZM10.5966 9.72094C10.5968 9.71534 10.5982 9.71027 10.5982 9.70467C10.5982 9.57617 10.5471 9.4603 10.4653 9.37305L9.37013 6.47057C9.26704 6.18054 9.00901 5.98804 8.71265 5.97989C8.42128 5.97211 8.15013 6.15237 8.02847 6.44251L6.28833 10.6663C6.18536 10.9163 6.30676 11.2018 6.5596 11.3038C6.81245 11.4058 7.10099 11.2856 7.20396 11.0354L7.55075 10.1937H9.71951L10.032 11.0219C10.1063 11.2186 10.2948 11.3401 10.4954 11.34C10.5528 11.34 10.6111 11.33 10.6681 11.309C10.924 11.2147 11.0539 10.9329 10.9583 10.6797L10.5966 9.72094ZM7.11697 6.53086C7.11697 6.26086 6.89557 6.04184 6.62262 6.04184H3.22377C2.95069 6.04184 2.7293 6.26086 2.7293 6.53086C2.7293 6.80088 2.95069 7.01988 3.22377 7.01988H4.43903V10.8917C4.43903 11.1617 4.66042 11.3806 4.93338 11.3806C5.20645 11.3806 5.42786 11.1617 5.42786 10.8917V7.01988H6.62262C6.89557 7.01988 7.11697 6.80088 7.11697 6.53086Z' fill='%23FAE300'/%3E%3C/svg%3E");
  }
}
.login_box .captcha {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.5rem;
}
.login_box .captcha .desc {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: flex-start;
  gap: 0.3rem;
}
.login_box .captcha .desc > div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.3rem;
}
.login_box .captcha .btn {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.3rem;
  padding: 2px 5px;
  background: #1B2539;
  color: #FFFFFF;
  font-size: 1.2rem;
  letter-spacing: -1px;
}
.login_box .captcha .btn::before {
  content: "";
  font-family: "remixicon";
}
.login_box .captcha .btn.refresh::before {
  content: "\f064";
}
.login_box .captcha .btn.sound::before {
  content: "\f29b";
}
.login_box .captcha input.form_input {
  height: auto;
  flex: 1;
  border-radius: 0;
  padding: 0.5rem;
  width: 100%;
  font-size: 1.4rem;
}
.login_box .join_out {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 1rem;
  margin-top: 2rem;
}

.join_out_info {
  width: 100%;
  max-width: 96rem;
  margin: 0 auto 4.8rem;
}
.join_out_info .info_txt {
  font-size: 1.8rem;
  color: #1D3557;
  font-weight: 600;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.join_out_info .info_txt::before {
  content: "\eca1";
  font-family: "remixicon";
  font-weight: 400;
  font-size: 2rem;
}

.member_step {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  width: 100%;
  max-width: 96rem;
  margin: 0 auto;
}
.member_step li {
  width: 16rem;
  height: 5.6rem;
  border: 1px solid #dddddd;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 2.4rem;
  color: #8E8E8E;
  font-size: 1.8rem;
  gap: 1rem;
  position: relative;
  background: #FFFFFF;
}
.member_step li::before {
  content: "\ea6e";
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid #dddddd;
  font-family: "remixicon";
  font-size: 1.6rem;
  border-radius: 100%;
}
.member_step li::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  z-index: -1;
  width: 20rem;
  height: 1px;
  background: #dddddd;
}
.member_step li:last-child::after {
  display: none;
}
.member_step li.active {
  background: #5182CC;
  color: #FFFFFF;
  border-color: transparent;
}
.member_step li.active::before {
  content: "\eb7b";
}
.member_step li.active::after {
  background: #5182CC;
}

.member_wrap {
  width: 100%;
  max-width: 96rem;
  margin: 0 auto;
}
.member_wrap .agree_box {
  border: 1px solid #dddddd;
  border-radius: 2.4rem;
  padding: 4rem;
}
.member_wrap .agree_box .item {
  overflow-y: auto;
  max-height: 30rem;
}
.member_wrap .agree_form {
  margin-top: 2rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
}

/*-------------------------------------------------

Responsive

-------------------------------------------------*/
/* Media Query */
@media (max-width: 1024px) {
  .member_step li {
    width: 15rem;
    height: 5.2rem;
    font-size: 1.6rem;
  }
  .member_step li::after {
    width: 15rem;
  }
}
@media (max-width: 768px) {
  .member_step {
    gap: 1rem;
  }
  .member_step li {
    width: 10rem;
    height: auto;
    padding: 1rem;
    flex-direction: column;
    word-break: keep-all;
    text-align: center;
    gap: 0.5rem;
    line-height: 1.2;
  }
  .member_step li::after {
    width: 100%;
  }
  .member_wrap .agree_box {
    padding: 2.4rem;
  }
}
@media (max-width: 480px) {
  .member_step {
    justify-content: center;
  }
  .member_step li {
    width: 8rem;
    padding: 1rem 0.5rem;
    font-size: 1.5rem;
  }
  .member_step li::after {
    display: none;
  }
  .login_box {
    padding: 3.2rem 1.6rem;
  }
}
@media (max-width: 370px) {
  .member_step li {
    flex: 1;
  }
  .login_box {
    padding: 0;
    border: none;
    border-radius: 0;
  }
}