section.tab {
  position: fixed;
  margin-top: 60px;
  right: 0;
  top: 0;
  left: 0;
  padding: 0;
  background-color: var(--white-color);
  z-index: var(--tab-level);
}

section.tab .container {
  display: flex;
  gap: 24px;
  max-width: 1140px;
  margin: auto;
}

section.tab .container>a {
  position: relative;
  line-height: 58px;
  font-size: 18px;
  font-weight: bold;
  color: var(--light-grey-color);
  transition: color 0.3s ease;
}

@media screen and (max-width: 576px) {
  section.tab .container>a:not(:first-child) {
    display: none;
  }
}

section.tab .container>a.active {
  color: var(--dark-black-color);;
}

section.tab .container>a.active::before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(75%);
  height: 2px;
  border-radius: 2px;
  background-color: var(--primary-color);
}

.sign_wrapper .blueBtn {
  min-height: 32px;
  min-width: 100px;
  font-size: 12px;
}

body .password_check_strength.active{
  margin-top: 4px;  
}

.inputWrapper {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin-top: 12px;
}

.inputWrapper:first-child {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin-top: 0px;
}

.inputWrapper .inputWrapper_placeholder {
  position: absolute;
  top: 10px;
  left: 10px;
  transition: all linear 0.2s;
  color: #1f1f1f;
  background-color: transparent;
  font-size: 11px;
  font-weight: 400;
}

.row_input_wrapper .inputWrapper .inputWrapper_placeholder {
  top: 8px;
}

.sign_box_input_wrapper .inputWrapper .inputWrapper_placeholder {
  top: 16px;
  font-size: 16px;
  line-height: 22px;
  color: #1F1F1F;
}

.inputWrapper .inputWrapper_placeholder.active {
  position: absolute;
  top: -10px;
  left: 10px;
  transition: all linear 0.2s;
  background-color: var(--white-color);
  width: fit-content;
  padding: 0 5px;
  height: fit-content;
  font-size: 10px;
  font-weight: 400;
  color: #1f1f1f;
}

.inputWrapper .inputWrapper_placeholder.input_welcome_placeholder {
  color: var(--white-color);
  font-size: 11px;
}

.tutorial .inputWrapper .inputWrapper_placeholder.input_welcome_placeholder.active {
  background-color: var(--dark-black-color);
  /* color: var(--primary-color); */
  font-size: 10px;
}

.tutorial .inputWrapper.tel-input.welcome_tel__input:focus-within .inputWrapper_placeholder.input_placeholder_welcome_info_tele {
  color: var(--primary-color);
}

.inputWrapper.tel-input.welcome_tel__input:focus-within .inputWrapper_placeholder.input_placeholder_welcome_info {
  color: var(--primary-color);
}

.inputWrapper input {
  width: 100%;
  height: 54px;
  padding: 9px 11px;
  color: var(--dark-black-color);
  border-radius: 5px;
  background-color: var(--white-color);
  border: 1px solid #1f1f1f;
  font-size: 16px;
  line-height: 20px;
}

.inputWrapper input:focus,
.input_wrapper input:focus {
  color: var(--dark-black-color);
  border: 2px solid var(--primary-color);
  height: 54px;
}

.tutorial .inputWrapper .input_placeholder_welcome_info {
  width: 100%;
  height: 35px;
  padding: 10px;
  color: var(--white-color);
  border-radius: 5px;
  background-color: var(--dark-black-color);
  border: 1px solid #8a8a8a;
  font-size: 14px;
  line-height: 20px;
}

.inputWrapper input[type="tel"] {
  position: relative;
  box-sizing: border-box;
  appearance: none;
  display: block;
  outline: none;
  padding-left: 10px;
}

.inputWrapper.inputWrapper--red input:focus,
.inputWrapper.inputWrapper--red input {
  border: 1px solid #df2f4a;
}

.inputWrapper.inputWrapper--red .inputWrapper_placeholder.active {
  color: #df2f4a;
}

.inputWrapper.inputWrapper--blue input:focus,
.inputWrapper.inputWrapper--blue input {
  border: 1px solid var(--primary-color);
}

.inputWrapper.inputWrapper--blue .inputWrapper_placeholder.active {
  color: var(--primary-color);
}

.inputWrapper.tel-input .dial-code {
  position: absolute;
  top: 0;
  left: 5px;
  transform: translateY(50%);
  width: fit-content;
  z-index: 10;
  color: black;
}

.inputWrapper input:focus {
  color: var(--dark-black-color);
  border: 2px solid var(--primary-color);
}

.inputWrapper .input_placeholder_welcome_info:focus {
  color: var(--white-color);
  border: 1px solid var(--primary-color);
}

.inputWrapper:focus-within .inputWrapper_placeholder {
  color: var(--primary-color);
}

.inputWrapper .remove_value {
  position: absolute !important;
  top: 50%;
  right: 5px;
  width: 20px !important;
  height: 20px !important;
  padding: 5px;
  box-sizing: border-box !important;
  transform: translateY(-50%);
  border-radius: 100%;
  display: none;
  background-position: -25px -75px;
  background-repeat: no-repeat;
  background-image: url("/images/icon/image_sprite/etc_iconset.svg");
  transition: background-color 0.3s ease;
  display: none !important;
}

.inputWrapper .remove_value:hover {
  cursor: pointer;
  background-color: #4c4c4c;
}

body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.full_area_wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: var(--main-white-color);
  /* background: #212121; */
}

.full_area_wrapper .left_randing_slide {
  position: absolute;
  top: 0px;
  left: 100%;
  width: 100%;
  height: 100%;
  background-color: var(--white-color);
  -webkit-clip-path: polygon(40% 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 0% 100%);
}

.full_area_wrapper .left_randing_slide .left_inner_first_line {
  position: absolute;
  top: -28%;
  left: 39%;
  width: 17%;
  height: 28%;
  background-color: #0d3eda;
  -webkit-clip-path: polygon(65% 0%, 90% 0%, 25% 100%, 0% 100%);
  clip-path: polygon(65% 0%, 90% 0%, 25% 100%, 0% 100%);
}

.full_area_wrapper .left_randing_slide .left_inner_second_line {
  position: absolute;
  top: -22%;
  left: 42.2%;
  width: 13%;
  height: 22%;
  background-color: #2080f9;
  -webkit-clip-path: polygon(76% 0%, 93% 0%, 28% 100%, 0% 114%);
  clip-path: polygon(76% 0%, 93% 0%, 28% 100%, 0% 114%);
}

.full_area_wrapper .right_randing_slide {
  position: absolute;
  top: 0px;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #f3f8ff;
  -webkit-clip-path: polygon(0% 0, 80% 0, 40% 100%, 0% 100%);
  clip-path: polygon(0% 0, 80% 0, 40% 100%, 0% 100%);
}

.full_area_wrapper .right_randing_slide .left_inner_first_line {
  position: absolute;
  bottom: -28%;
  right: 57.6%;
  width: 17%;
  height: 28%;
  background-color: #0d3eda;
  -webkit-clip-path: polygon(65% 0%, 90% 0%, 25% 100%, 0% 100%);
  clip-path: polygon(65% 0%, 90% 0%, 25% 100%, 0% 100%);
}

.full_area_wrapper .right_randing_slide .left_inner_second_line {
  position: absolute;
  bottom: -22%;
  right: 63.4%;
  width: 13%;
  height: 22%;
  background-color: #2080f9;
  -webkit-clip-path: polygon(77% 0%, 95% 0%, 28% 100%, 0% 114%);
  clip-path: polygon(77% 0%, 95% 0%, 28% 100%, 0% 114%);
}

.sign_wrapper {
  position: relative;
  padding: 50px 100px;
  border-radius: 20px;
  background-color: var(--white-color);
  margin-top: 50px;
  max-width: 600px;
  min-height: 646px;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
  /* box-shadow: 0px 4px 24px -1px rgba(0, 0, 0, 0.15); */
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  opacity: 0;
  overflow: unset !important;
  z-index: 6;
}

@media screen and (max-width: 800px) {
  .sign_wrapper {
    padding: 0px;
    gap: 8px;
    border-radius: 16px;
}
}

.sign_up_error_modal {
  position: absolute;
  padding: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  background-color: var(--white-color);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  box-shadow: 0px 4px 24px -1px rgba(0, 0, 0, 0.15);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  z-index: 6;
  max-width: 380px;
  width: 100%;
}


partners .sign_wrapper {
  padding: 30px;
}

.sign_up_modal_wrapper {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100vh;
  background-color: rgba(28, 28, 28, 0.5);
  display: none;
  z-index: 10;
}

.sign_up_error_modal {
  opacity: 1;
  z-index: 5;
}

.sign_wrapper.sign_up_error_modal {
  opacity: 0;
  display: block;
  width: 240px;
  background-color: var(--white-color);
  height: 136px;
  padding: 12px 24px;
  gap: 8px;
}

.sign_up_error_modal .modal_title {
  color: var(--dark-black-color);
  line-height: 32px;
  font-size: 22px;
  font-weight: 400;
}

.sign_up_error_modal .modal_content {
  color: var(--dark-black-color);
  font-size: 16px;
  line-height: 22px;
  height: 24px;
}

.sign_up_error_modal .modal_action_button {
  margin-top: 36px;
  height: 40px;
}

.sign_wrapper.sign_up_first {
  padding-bottom: 24px;
}

.tutorial.sign_wrapper.welcome_info_form_wrapper {
  top: 141.25px;
  left: 0px;
  background: var(--dark-black-color);
  height: 212px;
  padding: 0 32px;
  transform: none;
  box-shadow: none;
}

.sign_wrapper .logo_wrapper {
  position: absolute;
  top: -52px;
  left: 40px;
  object-fit: cover;
  width: 100%;
  display: block;
}

.sign_wrapper .input_box_title {
  color: #1f1f1f;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  min-height: 28px;
}

.sign_wrapper .input_fin_text {
  color: #1f1f1f;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 36px;
}

.sign_wrapper .input_fin_text img {
  display: block;
  width: 24px;
  height: 24px;
  -o-object-fit: contain;
  object-fit: contain;
}

.sign_wrapper .inputWrapper_box {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.sign_wrapper .back_btn {
  color: #aaa;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: transparent;
  border: 2px solid #aaa;
  min-height: 46px;
  max-height: 46px;
  padding: 12px 24px;
  min-width: 120px;
  border-radius: 30px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  margin-right: auto;
  margin-left: 10px;
}

/* .sign_wrapper .back_btn:hover {
  color: var(--primary-color);
} */

.sign_wrapper .content_wrapper {
  position: relative;
  width: 100%;
  height: auto;
}

partners .sign_wrapper .content_wrapper {
  padding-bottom: 24px;
}

.sign_wrapper .sign_step {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
}

@media screen and (max-width: 800px) {
.sign_wrapper .sign_step {
    gap:30px;
  }
}

.sign_wrapper .sign_in_first {
  position: relative;
  top: 0px;
  left: 0px;
}

.sign_wrapper .sign_up_first {
  position: relative;
  top: 0px;
  left: 0px;
}

.sign_wrapper .sign_up_second {
  position: relative;
  top: 0px;
  left: 0px;
  gap: 0px;
}

.sign_wrapper .sign_up_third {
  position: relative;
  top: 0px;
  left: 0px;
  gap: 0px;
}

.sign_wrapper .find_password_first {
  position: relative;
  top: 0px;
  left: 0px;
  gap: 0px;
}

.sign_wrapper .find_password_second {
  position: relative;
  top: 0px;
  left: 0px;
  gap: 0px;
}

.sign_wrapper .find_password_third {
  position: relative;
  top: 0px;
  left: 0px;
  gap: 0px;
}

.sign_wrapper .sign_fin {
  position: relative;
  top: 0px;
  left: 0px;
}

.sign_wrapper .sign_box_title {
  color: var(--primary-color);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  display: flex;
  align-items: center;
}

.sign_wrapper .verifi_wrapper {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0px;
}

.sign_wrapper .verifi_wrapper .verifi_timer {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  margin-bottom: 12px;
}

.sign_wrapper .verifi_wrapper .verifi_timer .resend_verifi_btn {
  color: #aaa;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: underline;
  transition: all 0.3s ease;
  cursor: pointer;
}

.sign_wrapper .verifi_wrapper .verifi_timer .resend_verifi_btn:hover {
  color: var(--primary-color);
}

.sign_wrapper .verifi_wrapper .verifi_timer .verifi_timer_content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.sign_wrapper .verifi_wrapper .verifi_timer .verifi_timer_content p {
  color: #1f1f1f;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin-right: 8px;
}

.sign_wrapper .verifi_wrapper .verifi_timer .verifi_timer_content span {
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.sign_wrapper .sign_box_input_wrapper {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0px;
}

@media screen and (max-width: 800px) {
  .sign_wrapper .sign_box_input_wrapper {
    gap: 8px;
  }
}

.sign_wrapper .sign_box_input_wrapper.sign_verifi_input_wrapper {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  gap: 8px;
}

.sign_wrapper .sign_box_input_wrapper.sign_verifi_input_wrapper .inputWrapper {
  width: 94px;
  margin-top: 0px;
}

.sign_wrapper .sign_box_input_wrapper.sign_verifi_input_wrapper .inputWrapper input {
  height: 94px;
  font-size: 55px;
  text-align: center;
  text-transform: uppercase;
  color: var(--primary-color);
  font-weight: 700;
  line-height: 50px;
  border-width: 1px;
}

.sign_wrapper .sign_verifi_input_wrapper .inputWrapper .inputField.active {
  border-color: var(--primary-color);
  border-width: 2px;
}

.sign_wrapper .inputWrapper.error_input:after {
  content: attr(data-inputField-after);
  font-size: 10px;
  line-height: 12px;
  height: auto;
  color: #df2f4a;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
}

.sign_wrapper .inputWrapper.error_input .inputWrapper_placeholder {
  color: #df2f4a;
}

.sign_wrapper .inputWrapper.error_input input {
  border: 2px solid #df2f4a;
}

.sign_wrapper .sign_button_wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  margin-top: 24px;
}

.sign_wrapper .sign_button_wrapper .sign_etc_btn {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
}

.sign_wrapper .sign_button_wrapper .sign_etc_btn p {
  color: #7F7F7F;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sign_wrapper .sign_button_wrapper .sign_etc_btn:hover p {
  color: #214eeb;
}

.sign_wrapper .sign_button_wrapper .sign_etc_btn:active p {
  color: #0d3eda;
}

.sign_wrapper .sign_box_guid_text {
  color: #1f1f1f;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  min-height: auto;
  margin-bottom: 24px;
}

.sign_wrapper .sso_wrapper {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
}

.sign_wrapper .sso_wrapper .sso_line {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.sign_wrapper .sso_wrapper .sso_line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  border-top: 1px solid #aaa;
}

.sign_wrapper .sso_wrapper .sso_line span {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 30px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  color: #aaa;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  background-color: var(--white-color);
}

.sign_wrapper .sso_wrapper .sso_btn_wrapper {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
}

@media screen and (max-width: 800px) {
.sign_wrapper .sso_wrapper .sso_btn_wrapper {
    gap: 8px;
  }
}

.sign_wrapper .sso_wrapper .sso_btn_wrapper .ssoBtn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 54px;
  border-radius: 5px;
  border: 1px solid #7F7F7F;
  background-color: var(--white-color);
  color: #666;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  transition: border 0.3s ease;
  cursor: pointer;
}

.sign_wrapper .sso_wrapper .sso_btn_wrapper .ssoBtn:hover {
  border-color: var(--primary-color);
}

.sign_wrapper .sso_wrapper .sso_btn_wrapper .ssoBtn img {
  width: 24px;
  height: 24px;
  object-fit: cover;
}

.sign_wrapper .sso_wrapper .sso_btn_wrapper .ssoBtn p {
  color: #1f1f1f;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  transition: all 0.3s ease;
}

.sign_wrapper .sso_wrapper .sso_btn_wrapper .ssoBtn:hover p {
  color: var(--primary-color);
}

.sign_wrapper .sso_wrapper .sso_btn_wrapper .ssoBtn.innorix_sign {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: auto;
  border: 0px;
  background-color: transparent;
  cursor: pointer;
}

.sign_wrapper .sso_wrapper .sso_btn_wrapper .ssoBtn.innorix_sign:hover {
  border-color: var(--primary-color);
}

.sign_wrapper .sso_wrapper .sso_btn_wrapper .ssoBtn.innorix_sign img {
  width: 16px;
  height: 16px;
  object-fit: cover;
}

.sign_wrapper .sso_wrapper .sso_btn_wrapper .ssoBtn.innorix_sign p {
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.full_area_wrapper.bg-transparent .right_randing_slide,
.full_area_wrapper.bg-transparent .left_randing_slide {
  background: transparent;
  transition: all 0.2s ease;
}

.tutorial_wrapper {
  padding: 48px 32px;
  position: absolute;
  top: 40px;
  left: 0;
  bottom: 0;
  /* height: 99%; */
  background-color: transparent;
  width: 99%;
  background: var(--dark-black-color);
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 0px 10px;
  border-radius: 4px;
}

.tutorial_wrapper .head {
  /* width: fit-content;
  width: fit-content; */
  color: var(--white-color);
  /* text-align: center; */
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  /* padding: 0px 32px; */
}

.tutorial_wrapper .head .head_title {
  font-weight: bold;
  font-size: 24px;
  /* font-size: 32px; */
  line-height: 32px;
}

.tutorial_wrapper .head .head_text {
  width: 100%;
  font-weight: normal;
  font-size: 14px;
}

.tutorial_wrapper .tutorial_wrapper__content {
  display: flex;
  gap: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
}

.tutorial_wrapper .tutorial_wrapper__content .tutorial_wrapper__content__box {
  box-sizing: content-box;
  background-color: #2c2c2c;
  /* padding: 10px; */
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  transition: all 0.15s ease;
  border: 1px solid #6c6c6c;
  cursor: pointer;
  border-radius: 5px;
  /* height: 250px;
  width: 250px; */
  height: 200px;
  width: 200px;
  box-sizing: border-box;
}

.tutorial_wrapper .tutorial_wrapper__content .tutorial_wrapper__content__box .tutorial_wrapper__content__box__title {
  font-size: 12px;
  text-align: left;
  width: 100%;
}

.tutorial_wrapper .tutorial_wrapper__content .tutorial_wrapper__content__box .tutorial_wrapper__content__box__image {
  height: 60px;
}

.tutorial_wrapper .tutorial_wrapper__content .tutorial_wrapper__content__box:first-child .tutorial_wrapper__content__box__image {
  /* height: 60px; */
  width: 104px;
  height: auto;
}

.tutorial_wrapper .tutorial_wrapper__content .tutorial_wrapper__content__box .tutorial_wrapper__content__box__text {
  font-size: 11px;
}

.tutorial_wrapper .tutorial_wrapper__content .tutorial_wrapper__content__box:hover {
  background-color: var(--primary-color);
}

.tutorial_wrapper .tutorial_wrapper__content .tutorial_wrapper__content__box img {
  height: 100px;
  width: auto;
  object-fit: cover;
}

.multi_input_wrapper {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
}

.multi_input_wrapper .tel-input .inputWrapper_placeholder {
  position: absolute;
  top: -7px;
  left: 10px;
  transition: all linear 0.2s;
  background-color: var(--white-color);
  width: fit-content;
  padding: 0 5px;
  height: fit-content;
  font-size: 10px;
  font-weight: 400;
  color: #6c6c6c;
}

.multi_input_wrapper .tel-input .inputWrapper_placeholder.input_placeholder_welcome_info {
  position: absolute;
  transition: all linear 0.2s;
  top: 7px;
  left: 10px;
  background-color: var(--dark-black-color);
  width: fit-content;
  padding: 0 5px;
  border: none;
  height: fit-content;
  font-size: 11px;
  font-weight: 400;
  color: var(--white-color);
}

.tutorial .multi_input_wrapper .tel-input .inputWrapper_placeholder.input_placeholder_welcome_info.active {
  position: absolute;
  top: -10px;
  left: 10px;
  transition: all linear 0.2s;
  background-color: var(--dark-black-color);
  width: fit-content;
  padding: 0 5px;
  height: fit-content;
  font-size: 10px;
  font-weight: 400;
  /* color: var(--primary-color); */
}

.tutorial .welcome_tel__input input {
  background: var(--dark-black-color);
  color: var(--white-color);
  border: 1px solid #8a8a8a;
}

.welcome_tel__input input:focus {
  color: var(--white-color);
}

.tutorial .welcome_tel__input input:focus {
  color: var(--white-color);
  border: 1px solid var(--primary-color);
}

.multi_input_wrapper .tel-input.input_placeholder_welcome_info {
  background-color: #212121;
}

.multi_input_wrapper .tel-input.input_placeholder_welcome_info {
  position: absolute;
  top: -7px;
  left: 10px;
  transition: all linear 0.2s;
  background-color: #212121;
  width: fit-content;
  padding: 0 5px;
  height: fit-content;
  font-size: 10px;
  font-weight: 400;
  color: var(--white-color);
}

.tutorial .multi_input_wrapper .selectCountryWrapper__options {
  position: absolute;
  z-index: 10;
  left: 0;
  top: calc(100% + 10px);
  border-radius: 5px;
  border: 1px solid #2c2c2c;
  width: 100%;
  background-color: #2c2c2c;
  padding: 8px;
  gap: 8px;
}

.multi_input_wrapper .selectCountryWrapper__options .options__itemWrapper {
  max-height: 250px;
  overflow: auto;
}

.multi_input_wrapper .selectCountryWrapper__options .selectCountryWrapper__options__search {
  box-sizing: border-box;
  height: 35px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px;
  background: #000;
  height: 24px;
  border-bottom: 1px solid #212121;
  border-radius: 4px;
  margin-bottom: 8px;
}

.multi_input_wrapper .selectCountryWrapper__options .selectCountryWrapper__options__search input {
  height: 35px;
  outline: none;
  color: var(--white-color);
  appearance: none;
  width: 100%;
  background-color: #000;
  border: none;
  height: 16px;
}

.tutorial .multi_input_wrapper .selectCountryWrapper__options .selectCountryWrapper__options__search .search_country_input_welcomepage::placeholder {
  font-size: 11px;
}

.multi_input_wrapper .selectCountryWrapper__options .selectCountryWrapper__options__search img {
  height: 12px;
  width: 15px;
  width: auto;
  object-fit: contain;
}

.multi_input_wrapper .selectCountryWrapper__options .selectCountryWrapper__options__item {
  box-sizing: border-box;
  height: 35px;
  padding: 10px;
  display: flex;
  align-items: center;
  color: var(--white-color);
  gap: 10px;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  border-radius: 4px;
}

.tutorial .multi_input_wrapper .selectCountryWrapper__options .selectCountryWrapper__options__item {
  box-sizing: border-box;
  height: 35px;
  padding: 10px;
  display: flex;
  align-items: center;
  color: var(--white-color);
  gap: 10px;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  border-radius: 4px;
}

.multi_input_wrapper .selectCountryWrapper__options .selectCountryWrapper__options__item:hover {
  cursor: pointer;
  background-color: var(--primary-color);
}

.multi_input_wrapper .selectCountryWrapper__options .selectCountryWrapper__options__item .selectCountryWrapper__options__item__flag {
  height: 15px;
  width: auto;
  object-fit: contain;
}

.multi_input_wrapper .selectCountryWrapper__options .selectCountryWrapper__options__item .selectCountryWrapper__options__item__name,
.multi_input_wrapper .selectCountryWrapper__options .selectCountryWrapper__options__item .selectCountryWrapper__options__item__tel {
  color: #666;
  font-size: 14px;
  min-width: 50px;
}

.multi_input_wrapper .selectCountryWrapper__options .options__itemWrapper::-webkit-scrollbar {
  width: 0px;
}

.multi_input_wrapper .selectCountryWrapper__options .selectCountryWrapper__options__item .selectCountryWrapper__options__item__name,
.multi_input_wrapper .selectCountryWrapper__options .selectCountryWrapper__options__item .selectCountryWrapper__options__item__tel {
  color: var(--white-color);
}

.selectCountryWrapper {
  position: relative;
  box-sizing: border-box;
  height: 35px;
  padding: 10px;
  width: 20%;
  display: flex;
  gap: 5px;
  background-color: var(--dark-black-color);
  border-radius: 5px;
  border: 1px solid #8a8a8a;
  cursor: pointer;
}

.selectCountryWrapper.selectCountryWrapper--focus {
  border: 1px solid var(--primary-color);
}

.selectCountryWrapper .selectCountryWrapper__selected {
  display: flex;
  gap: 15px;
  align-items: center;
}

.selectCountryWrapper .selectCountryWrapper__selected>img {
  height: 15px;
  width: auto;
  object-fit: contain;
}

.selectCountryWrapper .selectCountryWrapper__selected>img[alt="arrow"] {
  height: 7px;
}

.button--loading {
  position: relative;
}

.button--loading .rs-btn-spin::before {
  border-color: rgba(248, 247, 250, 0.3);
}

.button--loading .rs-btn-spin::after {
  animation: rotate 0.6s linear infinite;
  border-color: var(--white-color) transparent transparent;
}

.rs-btn-spin::before,
.rs-btn-spin::after {
  position: absolute;
  content: "";
  inset: 0;
  height: 18px;
  width: 18px;
  z-index: 10;
  margin: auto;

  border-style: solid;
  border-width: 3px;
  border-radius: 50%;
}

.rs-btn-spin {
  position: absolute;
  inset: -0;
  background-color: var(--primary-color);
  box-sizing: border-box;
  color: transparent !important;
  cursor: default;
  pointer-events: none;
  line-height: 20px;
  animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(1turn);
  }
}

.slide_wrapper {
  width: 3000px;
  height: 3000px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(35deg);
}

.slide_wrapper .left_bg_slide,
.slide_wrapper .right_bg_slide {
  width: 50%;
  transition: 2s;
}

.slide_wrapper .left_bg_slide {
  background-color: #f3f8ff;
  margin-right: -1px;
}

.slide_wrapper .right_bg_slide {
  background-color: var(--white-color);
}

.line_wrapper {
  z-index: 5;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 40px;
  border-radius: 10px;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 500px;
}

.line_wrapper .test_line--top {
  position: absolute;
  top: -114%;
  right: -114%;
  z-index: -1;
}

.line_wrapper .test_sub_line--top {
  position: absolute;
  top: -97%;
  right: -116%;
  z-index: -1;
}

.line_wrapper .test_line--bottom {
  position: absolute;
  bottom: -114%;
  left: -114%;
  z-index: -1;
}

.line_wrapper .test_sub_line--bottom {
  position: absolute;
  bottom: -97%;
  left: -116%;
  z-index: -1;
}

/* .sign_wrapper .common__square--blue--btn.login_btn {
  font-size: 16px;
  line-height: 22px;
  border-radius: 5px;
  padding: 10px 15px;
  overflow: hidden;
} */

.background-image {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.background-image img {
  display: block;
  width: 100%;
  min-width: 1280px;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.background-image .mask {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 100%);
}

.login_frame {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1280px;
  padding: 0px;
  margin: 0 auto;
  height: 100vh;
  width: 100%;
}

.login_frame .left .text_box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-left: 0px;
  max-width: 600px;
  margin-top: 50px;
  opacity: 0;
}

.login_frame .left .text_box .login_title {
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  margin-bottom: 24px;
}

.login_frame .left .text_box .login_title b {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.login_frame .left .text_box .login_text_box {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  gap: 60px;
  margin-bottom: 60px;
}
.login_frame .left .text_box .login_text_box p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.login_frame .left .text_box .login_text_box p b {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.login_frame .left .text_box .login_text_box a {
  margin-left: auto;
}

.login_frame .left .text_box .login_text_box a div {
  white-space: nowrap;
}

.login_frame .left .text_box div > img {
  overflow: hidden;
}

.resend_verifycode_expried_btn {
  color: var(--primary-color);
  margin-top: 1px;
  border-bottom: 1px solid var(--primary-color);
  cursor: pointer;
}

@media screen and (max-width: 1210px) {
  .login_frame {
    min-height: fit-content;
    flex-direction: column-reverse;
    padding: 50px 20px;
    justify-content: center;
    gap: 20px;
  }
  .login_frame .left .text_box div > img {
    display: none;
  }
  .login_frame .left .text_box > .login_text_box {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    margin-bottom: 0px;
  }
  .login_frame .left .text_box .login_text_box a {
    margin-left: 0px;
  }
}

.sign_box_line_content {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    border-top: 1px solid #AAAAAA;
    transform: translateY(-50%);
  }
  div {
    position: relative;
    z-index: 1;
    background-color: var(--white-color);
    padding: 0px 12px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #AAAAAA;
  }
}

@media screen and (max-width: 1024px) {
  .login_frame {
    min-height: fit-content;
    flex-direction: column-reverse;
    padding: 50px 20px;
    justify-content: center;
    gap: 20px;
  }
}

@media screen and (max-width: 576px) {
  .login_frame {
    min-height: fit-content;
    flex-direction: column-reverse;
    padding: 50px 20px;
    justify-content: center;
    gap: 20px;
  }
}

.login_frame .left {
  position: relative;
  height: 546px;
}
@media screen and (max-width: 1210px) {
  .login_frame .left {
    height: unset;
  }
}

@media screen and (max-width: 1024px) {
  .login_frame .left {
    height: unset;
    max-width: 600px;
  }
}

@media screen and (max-width: 800px) {
  .login_frame .left {
    width: 100%;
    padding: 0 0px;
  }
  .login_frame .left .text_box div > img {
    display: none;
  }
}

@media screen and (max-width: 576px) {
  .login_frame .left {
    padding: 0;
  }
}

.login_frame .left > img {}
  @media screen and (max-width: 800px) {
  .login_frame .left > img {
    height: 30px;
  }
}

@media screen and (max-width: 576px) {
  .login_frame .left > img {
    height: 22px;
  }
}

.login_frame .left .text {
  margin-top: 24px;
  font-size: 32px;
  line-height: 44px;
  font-weight: 700;
  color: var(--white-color);
}

@media screen and (max-width: 800px) {
  .login_frame .left .text {
    margin-top: 20px;
  }
}

@media screen and (max-width: 800px) {
  .login_frame .left .text {
    font-size: 20px;
    line-height: 32px;
  }
}