.logo-icon {
  max-width: 85.1px;
  position: relative;
  height: 44px;
  width: 100%;
}

.tab {
  max-width: 328px;
  width: 100%;
  border-radius: 8px;
  background-color: #e5eaf4;
  height: 45px;
  display: none;
}

.label {
  color: var(--colors-font-primary, #17191E);
  font-family: var(--font-font-family, Pretendard);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.top-label {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.place-holder {
  flex: 1;
  position: relative;
  line-height: 100%;
}

.itemform.error-state {
  gap: 5px;
}

.error-state .input2 {
  border: 1px solid  var(--colors-feedback-danger, #F5222D);

}
.input2 {
  align-self: stretch;
  border-radius: 8px;
  background-color: #fff;

  box-sizing: border-box;
  height: 44px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 12px;
  font-size: 16px;
  color: var(--colors-font-primary, #17191E);
}

.itemform {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}

.input-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
}

.icon-stroke {
  max-width: 9px;
  position: relative;
  height: 6.5px;
  width: 100%;
}

.check-box {
  max-width: 18px;
  width: 100%;
  border-radius: 4px;
  background-color: #2f333c;
  height: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#loginTab > form > div.input > div.radio > label.checkbox-wrapper {
  padding-left: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.check-box2 {
  max-width: 18px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background-color: #2f333c;
  margin: 0 !important;
}

.radio {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0px;
  color: #606878;
  margin: 0;
}

#loginTab > form > div.input > div.radio > label.label {
  padding-left: 0;
  color: var(--colors-font-primary, #17191E);
  font-family: var(--font-font-family, Pretendard);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  padding: 0 !important;
}

.input {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  max-width: 400px;
}

.button a{
  font-size: 14px;
}
.button {
  position: relative;
  line-height: 100%;
  font-weight: 500;
}

.basic {
  align-self: stretch;
  border-radius: 8px;
  background-color: #2f333c;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 18px 20px;
}

.iconlogo {
  max-width: 18px;
  width: 100%;
  position: relative;
  height: 18px;
  overflow: hidden;
  flex-shrink: 0;
}

.basic1 {
  align-self: stretch;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #2f333c;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 18px 20px;
  gap: 8px;
  color: #2f333c;
}

.basic-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
}

.btns {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 18px;
  color: #fff;
}

.text {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.frame-child {
  width: 1px;
  position: relative;
  border-right: 1px solid #e5eaf4;
  box-sizing: border-box;
  height: 11px;
}

.frame-item {
  width: 1px;
  position: relative;
  border-right: 1px solid #e5eaf4;
  box-sizing: border-box;
  height: 11px;
  display: none;
}

.text2 {
  width: 128px;
  height: 14px;
  display: none;
}

.text-parent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
}

.div2 {
  max-width: 400px;
  width: 100%;
  position: relative;
  line-height: 150%;
  color: #606878;
  text-align: center;
  display: none;
}

.utils {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  color: #2f333c;
}

.form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  max-width: 400px;
}

.text3 {
  border-bottom: 1px solid #2f333c;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px 1px;
  color: #2f333c;
}

body{
    background: #f8f9fc;
    height: 100vh;
}

.div.login-box{
  padding: 126px 0;
  height: auto;

}
.logo-parent {
    position: relative;
    top: inherit;
    left: inherit;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    background-color: #fff;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 80px 160px;
    box-sizing: border-box;
    gap: 32px;
    width: 100%;
    margin: 0 auto;
}

.logo {
  max-width: 54.2px;
  position: relative;
  height: 28px;
  display: none;
}

.b {
  position: relative;
  line-height: 150%;
}

.div3 {
  position: relative;
  font-size: 16px;
  line-height: 150%;
  color: #606878;
  text-align: center;
  display: none;
}

.tit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}

.breadcrum {
  width: 248px;
  height: 21px;
  display: none;
}

.title1 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 755px;
  max-width: 1200px;
}

.p {
  margin: 0;
}

.div4 {
  align-self: stretch;
  position: relative;
  font-size: 14px;
  line-height: 150%;
  color: #606878;
  text-align: center;
}

.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0px;
  max-width: 400px;
  margin-bottom: 14px;
}

.input5 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  max-width: 400px;
}

.basic2 {
  align-self: stretch;
  border-radius: 6px;
  background-color: #2f333c;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
}

.basic-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.btns1 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  color: #fff;
}

.form1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  max-width: 400px;
  font-size: 14px;
}

.login {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  font-size: 36px;
  max-width: 400px;
  width: 100%;
}

.div {
  width: 100%;
  position: relative;
  background-color: #f8f9fc;
  height: 100vh;
  text-align: left;
  font-size: 14px;
  color: #17191e;
  font-family: Pretendard;
}

.tab1 {
  position: relative;
  line-height: 150%;
  font-weight: 600;
}

.itemtab.active {
  flex: 1;
  border-radius: 6px;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
}

.itemtab {
  flex: 1;
  border-radius: 6px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  color: #606878;
}

.tab {
  width: 100%;
  position: relative;
  border-radius: 8px;
  background-color: #e5eaf4;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
  color: #17191e;
  font-family: Pretendard;
  display: flex;
  max-width: 328px;
  padding: 4px;
  align-items: center;
  gap: 4px;
}

span.error-text {
  color: var(--colors-feedback-danger, #F5222D);
  font-family: var(--font-font-family, Pretendard);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  display: none;
}
.error-state span.error-text {
  display: block;
}

.non-members {
  max-width: 400px;
  padding: 15px;
  gap: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border-radius: var(--size-radius-l, 8px);
  background: var(--colors-background-secondary, #F8F9FC);
  width: 100%;
}

.non-members p {
  color: var(--colors-font-secondary, #606878);
  text-align: center;
  font-family: var(--font-font-family, Pretendard);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 21px */
}

.non-members a.no-member-btn {
  display: flex;
  height: 38px;
  padding: 10px var(--size-radius-xl, 12px);
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: var(--size-radius-s, 4px);
  background: var(--colors-background-interactive-primary, #A445DE);
  color: var(--colors-font-inverse, #FFF);
  text-align: center;
  font-family: var(--font-font-family, Pretendard);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 14px */
}

body .sweet-alert .sa-confirm-button-container button {
  background-color: #2F333C;
}
body .sweet-alert {
  margin: 0 auto;
  left: calc(50% - 150px);
  border-radius: 8px !important;
}
.sweet-alert.showSweetAlert.visible, .sweet-alert {
  max-width: 300px;
  margin: auto;
  padding: 16px;
  border: 1px solid #9DA6BB;
  border-radius: 8px !important;
  box-shadow: 0px 2px 8px 0px #0000000D;
  animation: none;
  -webkit-animation: none;
}

body .hideSweetAlert[data-animation=pop] {
  animation: none;
  -webkit-animation: none;
}

body .showSweetAlert[data-animation=pop] {
  animation: none;
  -webkit-animation: none;
}

body .sweet-alert button {
  height: 44px;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
  border-radius: 6px !important;
}

body .sweet-alert button.cancel {
  background-color: #E5EAF4;
  color: #2F333C;
}

body .sweet-alert button.cancel:hover {
  background-color: #E5EAF4;
}

body .sweet-alert .sa-confirm-button-container {
  width: 100%;
}

body .sa-button-container {
  display: flex;
  gap: 8px;
}

body .sweet-alert h2 {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  width: 80%;
  margin: 24px auto 36px;
  white-space: break-spaces;
}


@media (max-width: 991px) {
  body .login-skin {
    display: flex;
    width: 100%;
    padding: 0;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }


  body .basic1 {
    padding: 16px;
    gap: 0px;
  }

  .sweet-alert.showSweetAlert.visible {
    transform: translate(0);
  }
  .div.login-box {
    padding: 50px 0 !important;
}
body div.logo-parent{
    background-color: transparent;
    padding: 80px 16px;
}
.non-members {
    padding: 24px 16px;
    gap: 0;
}
.non-members p{padding: 0;margin-bottom: 12px;}
.top-label .label {
    padding: 0;
    margin-bottom: 8px;
}
body .form {
        gap: 32px;
    }
}

@media (max-width: 767px) {

  .div.login-box {
        padding:  0 !important;
        background: #fff;
    }
    body div.logo-parent {
        box-shadow: none;
    }
}