/* ================================================
	LOGIN
=================================================== */
/*  body
=================================================== */
body#login {
  padding-top: 0;
  background: #fff;
}

@media (max-width: 767px) {
  body#login {
    padding-top: 0;
  }
}

@media (max-width: 575px) {
  body#login {
    padding-top: 0;
  }
}

/*  main
=================================================== */
#login main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*  logo
=================================================== */
#login-logo {
  padding-bottom: 75px;
}

.login-logo-img {
  max-width: 560px;
  margin: 0 auto;
}

@media (max-width: 575px) {
  #login-logo {
    padding-bottom: 15%;
  }
  .login-logo-img {
    max-width: 80%;
  }
}

/*  form
=================================================== */
#login-form {
  padding-bottom: 75px;
}

.login-form__inner {
  max-width: 270px;
  margin: 0 auto;
  text-align: center;
}

.login-form-input input {
  width: 100%;
  border-radius: 5px !important;
}

.login-form-id {
  margin-bottom: 20px;
}

.login-form-id input {
  background: url("../img/icon/user_id.svg") no-repeat right 10px center;
}

.login-form-pass {
  margin-bottom: 30px;
}

.login-form-pass input {
  background: url("../img/icon/user_pass.svg") no-repeat right 10px center;
}

.login-form-btn {
  max-width: 210px;
  margin: 0 auto;
}

.login-form-btn button {
  width: 100%;
  transition: 0.3s;
  color: #fff;
  background: linear-gradient(90deg, #0a9351 0%, #46d95b 100%) !important;
}

.login-form-btn button:hover {
  opacity: 0.8;
}

@media (max-width: 575px) {
  #login-form {
    padding-bottom: 10%;
  }
}

/*  link
=================================================== */
#login-link p {
  text-align: center;
}

#login-link p + p {
  margin-top: 1.5em;
}

#login-link p a {
  color: #747474;
}

#login-link p a:hover {
  text-decoration: underline;
}