/*@import url(//fonts.googleapis.com/css?family=Lato:300:400);*/
html{height;100%; overflow:hidden;}
body {
  margin:0; 
  font-family:14px/1.3 PingFangSC-Light,PingFang SC,Helvetica,Tahoma,Arial,Microsoft YaHei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif;
}
.hhd{position:absolute;bottom:0; top:0;left:0;right:0;}
.logoBlock{padding-top:50px; margin-left:40px;}

div.loginFormBlock {position: absolute;width: 400px;height: 460px;left:50%;margin-left: 200px;top:50%;margin-top: -240px;display: flex;justify-content: center;align-items: center;}
.logoImg{margin-top:170px;}
.banner{ position:absolute;width:600px;height:100px;left:10%;top:50%;margin-top: -100px;}
.bantitle{font-size:35px; margin-bottom:20px; font-weight:700;letter-spacing:2px;display: flex;    align-items: center;}
.bantitle span{font-weight:100; font-size:20px; line-height:35px; padding:0 15px; color:rgba(255,255,255,0.6)}
.bancontent{font-size:20px; line-height:30px;letter-spacing:1px}
.LoginForm{width:400px;height: 460px;background: #fff;text-align: center;}
.LoginForm .title{padding-top:80px;font-size: 28px;color:#333;display: flex;flex-direction:column;align-items: center;margin-bottom: 30px;}
.welcome{background:#f5f6f9; color:#999; text-align: center; border-radius:30px; width:250px; font-size: 16px; height:22px; margin-top:15px;}
.input_username,.input_password{border:0;border:1px solid #ddd;width: 220px;height:40px;line-height: 40px;padding-left:45px;}
.input_username{margin-bottom:20px;}
.btn-login{background: #2074ef;border-radius: 5px;height: 45px;width: 260px;margin-top:40px;border:0;color:#fff;font-size: 15px;}
.iconArea{ position:absolute;left:65px;padding-top:6px;}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{ background:#b2b7c9!important; color:#fff!important}
input::-webkit-input-placeholder { /* WebKit browsers */    color: #fff!important;     }
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */     color: #fff!important;     }
input::-moz-placeholder { /* Mozilla Firefox 19+ */     color: #fff!important;     }
input:-ms-input-placeholder { /* Internet Explorer 10+ */     color: #fff!important;     }
.remInfor{ color:#666; font-size:13px; margin-top:20px; width:260px; margin:0 auto; margin-top:20px; display:flex; justify-content:space-between}
.icon-checkbox{border:1px solid #ddd; width:10px; height:10px; display:inline-block; margin-right:10px;}
input:focus {        outline-color: #fff;      }
input[type="checkbox"]:before {
    border: 1px solid #aaa;
    background-color: #fff;
    content: '';
    width: 20px;
    height: 20px;
    display: block;
    border-radius: 2px;
    transition: all 180ms linear;
}
input[type="checkbox"]:checked:before {
    background:linear-gradient(60deg, rgb(71, 35, 142) 0%, rgb(23, 93, 181) 100%);
    border: 1px solid #C359AA;
}
input[type="checkbox"]:after {
    content: '';
    border: 2px solid #fff;
    border-right: 0;
    border-top: 0;
    display: block;
    height: 4px;
    left: 4px;
    opacity: 0;
    position: absolute;
    top: 6px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 12px;
    transition: all 180ms linear;
}
input[type="checkbox"]:checked:after {
    opacity: 1;
}
.hhd{background:url(../images/bg.jpg);
}

.header {
  position:relative;
  background:#0458bf;
  background: linear-gradient(60deg, rgba(10, 3, 121, 0.65) 0%, rgb(4, 88, 191) 100%);
color:white;
height:100%;
}
.logo {
  width:50px;
  fill:white;
  padding-right:15px;
  display:inline-block;
  vertical-align: middle;
}

.inner-header {
  height:70vh;
  width:100%;
  margin: 0;
  padding: 0;
}
.remInfor{ display:flex; justify-content:space-between}
.remInfor a{ color: #2074ef;    text-decoration: none;}
.remInfor a:hover{ color:#032dc5}
.footer{position:fixed; bottom:0;left:0;right:0; height:40px; line-height:40px; color:#333;font-size:12px;padding-left:100px; padding-right:100px;z-index:999; border-top:1px dashed #ddd; background:#f6f6f6}
.footer .content{ text-align:center; }
.content span{ margin:0 5px}
.content span i{font-style:normal; margin-left:8px;}
.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.waves {
  position:absolute;
  width: 100%;
  height:10vh;
bottom:40px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}

.content {
  position:relative;
  height:15vh;
  text-align:center;
}

/* Animation */

.parallax > use {
  animation: move-forever 1s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }
}