.login {
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#5788fe));
  background: linear-gradient(to bottom, #000000 0%, #5788fe 100%);
  position: relative;
  overflow: hidden;
}
.login .filter {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fe5757;
  -webkit-animation: colorChange 30s ease-in-out infinite;
          animation: colorChange 30s ease-in-out infinite;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  mix-blend-mode: overlay;
}
@-webkit-keyframes colorChange {
0%,
  100% {
    opacity: 0;
}
50% {
    opacity: 0.9;
}
}
@keyframes colorChange {
0%,
  100% {
    opacity: 0;
}
50% {
    opacity: 0.9;
}
}
.login .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/xkbg.aecdbe8a.png) center bottom repeat-x;
  background-size: 1000px 250px;
  overflow: hidden;
}
.login-con {
  position: absolute;
  right: 160px;
  top: 50%;
  -webkit-transform: translateY(-60%);
          transform: translateY(-60%);
  width: 300px;
}
.login-con-header {
  font-size: 16px;
  font-weight: 300;
  text-align: center;
  padding: 30px 0;
}
.login-con .form-con {
  padding: 10px 0 0;
}
.login-con .login-tip {
  font-size: 10px;
  text-align: center;
  color: #c3c3c3;
}