.login-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: url(../images/login-bg.jpg) no-repeat center; background-size: cover; }
.login-logo { position: relative; z-index: 1; text-align: center; padding: 20px 0; }
.login-logo__img { height: 30px; }
.login-wrap { position: fixed; top: 50%; left: 20px; right: 20px; transform: translate(0, -50%); z-index: 1; display: flex; background-color: #fff; box-shadow: 0 0 40px rgba(255, 255, 255, 0.4); border-radius: 10px; overflow: hidden; }
.login-img { flex: 0 1 50%; display: none; background-color: #f7f2ff; overflow: hidden; }
.login-img img { max-width: 100%; }
.login-form { padding: 40px 30px; flex: 1; }
.login-form-item { font-size: 16px; }
.login-form-item__label { margin: 0 0 15px 0; }
.login-form-item__field { padding-bottom: 10px; border-bottom: 1px solid #e5e5e5; }
.login-form-item__field--flex { display: flex; align-items: center; }
.login-form-item__field--flex .login-form-item__input { flex: 1; }
.login-form-item__input { width: 100%; border: 0; }
.login-form-item__input:focus { outline: 0; }
.login-form-item__input::placeholder { color: #999; }
.login-form-item__yzm { height: 30px; }
.login-form-item + .login-form-item { margin: 20px 0 0; }
.login-form-footer { margin: 30px 0 0; display: flex; justify-content: space-between; align-items: center; }
.login-form-footer a { color: #999; }
.login-form-footer a:link { text-decoration: none; }
.login-form-btn { position: relative; height: 44px; line-height: 44px; padding: 0 60px; font-size: 16px; color: #fff; background-image: linear-gradient(#5034de, #7c4afe); border-radius: 100px; }
.login-form-btn:after { position: absolute; top: 0; z-index: -1; left: 0; right: 0; bottom: 0; content: ""; background-image: inherit; border-radius: 100px; filter: blur(10px) opacity(0.7); }
.login-form-btn:link { color: #fff; text-decoration: none; }
.login-form-btn:active { background-image: linear-gradient(#4023d6, #6a31fe); }
.login-copyright { position: fixed; bottom: 0; left: 0; z-index: 1; right: 0; padding: 20px 0; text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.4); }

@media (min-width: 768px) { .login-logo__img { height: auto; }
  .login-wrap { left: 100px; right: 100px; }
  .login-form { padding: 40px 50px; }
  .login-form-item { font-size: 18px; }
  .login-form-footer a { font-size: 16px; }
  .login-form-btn { height: 60px; line-height: 60px; font-size: 20px !important; padding: 0 85px; } }
@media (min-width: 1024px) { .login-img { display: flex; align-items: center; justify-content: center; padding: 0 30px; }
  .login-form { flex: 0 1 50%; }
  .login-bg { background: url(../images/login-bg--lg.jpg) no-repeat center; } }
@media (min-width: 1200px) { .login-container { width: 1200px; margin: 0 auto; }
  .login-logo { text-align: left; }
  .login-wrap { width: 1200px; height: 600px; margin: 0 auto; }
  .login-img { padding: 0 60px; }
  .login-form { padding: 70px 80px; }
  .login-form-item__label { font-size: 20px; }
  .login-form-item__input { font-size: 22px; }
  .login-form-item + .login-form-item { margin: 30px 0 0; }
  .login-form-item__yzm { height: 52px; }
  .login-form-footer a { font-size: 20px; }
  .login-form-btn { height: 80px; line-height: 80px; font-size: 30px !important; }
  .login-copyright { font-size: 15px; } }