/* Login 페이지 전용 스타일 - 높은 우선순위 */
.sector-login {
  background-color: #2e4890 !important;
  height: 100vh !important;
}
.sector-login .inner {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  height: 100% !important;
}
.sector-login .inner .link-button {
  color: #95a1c6 !important;
  font-size: 14px !important;
  line-height: 100% !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}
.sector-login .inner .link-button.underline {
  color: #fff !important;
  text-decoration: underline !important;
}
.sector-login .inner .login-area {
  max-width: 816px !important;
  max-height: 816px !important;
}
.sector-login .inner .login-area .title {
  text-align: center !important;
}
.sector-login .inner .login-area .title .cont-title {
  margin-bottom: 107px !important;
  color: #fff !important;
}
.sector-login .inner .login-area .title .cont-sub {
  margin-bottom: 24px !important;
  color: #fff !important;
}
.sector-login .inner .login-area .title .icon.log-check {
  width: 50px !important;
  height: 50px !important;
}
.sector-login .inner .login-area .title .error-msg {
  font-size: 14px !important;
  line-height: 100% !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  line-height: normal !important;
  color: #fff !important;
  margin-bottom: 40px !important;
}
.sector-login .inner .login-area .input-box .input-wrap {
  margin-bottom: 10px !important;
}
.sector-login .inner .login-area .input-box .input-wrap input[type="text"],
.sector-login .inner .login-area .input-box .input-wrap input[type="password"] {
  /* 0825 수정 */
  color: #fff !important;
  background-color: #51639d !important;
  border: none !important;
}
.sector-login
  .inner
  .login-area
  .input-box
  .input-wrap
  input[type="text"]:focus,
.sector-login
  .inner
  .login-area
  .input-box
  .input-wrap
  input[type="password"]:focus {
  border: 1px solid #fff !important;
}

/* Password toggle button styles */
.sector-login .inner .login-area .input-box .input-wrap.password-wrap {
  position: relative !important;
}
.sector-login
  .inner
  .login-area
  .input-box
  .input-wrap.password-wrap
  .password-toggle {
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sector-login
  .inner
  .login-area
  .input-box
  .input-wrap.password-wrap
  .password-toggle
  img {
  width: 24px !important;
  height: 24px !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s ease !important;
}
.sector-login
  .inner
  .login-area
  .input-box
  .input-wrap.password-wrap
  .password-toggle:hover
  img {
  opacity: 1 !important;
}
.sector-login
  .inner
  .login-area
  .input-box
  .input-wrap.password-wrap
  input[type="password"],
.sector-login
  .inner
  .login-area
  .input-box
  .input-wrap.password-wrap
  input[type="text"] {
  padding-right: 50px !important;
}

.sector-login .inner .login-area .check-wrap {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 40px !important;
}
.sector-login .inner .login-area .check-wrap .checkbox-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.sector-login
  .inner
  .login-area
  .check-wrap
  .checkbox-wrapper
  .custom-checkbox {
  width: 20px !important;
  height: 20px !important;
}
.sector-login .inner .login-area .check-wrap .checkbox-wrapper label {
  color: #edf0f6 !important;
  font-size: 14px !important;
  line-height: 100% !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}
.sector-login .inner .login-area button.default.wide.white {
  width: 100% !important;
  margin: 0 auto 20px !important;
  background-color: #fff !important;
  color: #2e4890 !important;
}
.sector-login .inner .login-area .make-account {
  color: #fff !important;
  text-align: center !important;
}
.sector-login .inner .login-area .make-account .link-button {
  font-size: 16px !important;
}
.sector-login .inner .logo {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 40px !important;
  width: 120px !important;
  height: 18px !important;
}
.sector-login .inner .logo a,
.sector-login .inner .logo img {
  width: 100% !important;
  height: 100% !important;
}
@media (min-width: 1024px) {
  .sector-login {
    background-color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .sector-login .inner {
    width: 816px !important;
    background-color: #2e4890 !important;
    padding: 80px 50px !important;
    box-sizing: border-box !important;
    max-height: 834px !important;
  }
  .sector-login .inner .login-area {
    padding-bottom: 32px !important;
  }
  .sector-login .inner .login-area .title .cont-sub {
    margin-bottom: 24px !important;
  }
  .sector-login .inner .login-area .title .cont-sub br {
    display: none !important;
  }
  .sector-login .inner .login-area .title .icon.log-check {
    width: 70px !important;
    height: 70px !important;
  }
  .sector-login .inner .login-area .title .icon .error-msg {
    font-size: 16px !important;
  }
  .sector-login .inner .login-area .input-box {
    text-align: center !important;
  }
  .sector-login .inner .login-area .input-box input::placeholder {
    color: #fff !important;
  }
  .sector-login .inner .login-area .input-box input[type="text"],
  .sector-login .inner .login-area .input-box input[type="password"] {
    margin: 0 auto !important;
    width: 100% !important;
    height: 50px !important;
    padding: 15px !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    color: #fff !important;
    background-color: #51639d !important;
    border: none !important;
  }
  .sector-login .inner .login-area .input-box input[type="text"]:focus,
  .sector-login .inner .login-area .input-box input[type="password"]:focus {
    border: 1px solid #fff !important;
  }
  .sector-login .inner .login-area .check-box {
    max-width: 350px !important;
    margin: 0 auto !important;
    margin-bottom: 40px !important;
  }
  .sector-login .inner .login-area .check-box .checkbox-wrapper {
    gap: 10px !important;
  }
  .sector-login
    .inner
    .login-area
    .check-box
    .checkbox-wrapper
    .custom-checkbox {
    width: 32px !important;
    height: 32px !important;
  }
  .sector-login .inner .login-area .check-box .checkbox-wrapper label {
    font-size: 16px !important;
  }
  .sector-login .inner .login-area .check-box .link-button {
    font-size: 16px !important;
  }
  .sector-login .inner .login-area button.default.wide {
    width: 100% !important;
    margin: 0 auto 20px !important;
  }
  .sector-login .inner .login-area .make-account {
    font-size: 18px !important;
  }
}