
.login {
  width: 100%;
  height: 100%;
  position: relative;
}
.login-con {
  position: absolute;
  z-index: 10000;
  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: #bcbcbc;
  margin-top: -8px;
}
.light {
  -webkit-animation: light 12s infinite;
  animation: light 12s infinite;
  width: 100%;
  height: 100%;
  background-image: url(../img/login-bg.jpeg);
  background-size: cover;
  background-position: center;
}
@-webkit-keyframes light {
0% {
    -webkit-filter: sepia(0) contrast(1) brightness(100%);
    filter: sepia(0) contrast(1) brightness(100%);
}
40% {
    -webkit-filter: sepia(1) contrast(2) brightness(150%);
    filter: sepia(1) contrast(2) brightness(150%);
}
60% {
    -webkit-filter: sepia(1) contrast(2) brightness(150%);
    filter: sepia(1) contrast(2) brightness(150%);
}
100% {
    -webkit-filter: sepia(0) contrast(1) brightness(100%);
    filter: sepia(0) contrast(1) brightness(100%);
}
}
@keyframes light {
0% {
    -webkit-filter: sepia(0) contrast(1) brightness(100%);
    filter: sepia(0) contrast(1) brightness(100%);
}
40% {
    -webkit-filter: sepia(1) contrast(2) brightness(150%);
    filter: sepia(1) contrast(2) brightness(150%);
}
60% {
    -webkit-filter: sepia(1) contrast(2) brightness(150%);
    filter: sepia(1) contrast(2) brightness(150%);
}
100% {
    -webkit-filter: sepia(0) contrast(1) brightness(100%);
    filter: sepia(0) contrast(1) brightness(100%);
}
}


.demo-spin-icon-load {
  -webkit-animation: ani-demo-spin 1s linear infinite;
          animation: ani-demo-spin 1s linear infinite;
}

