html,body{
	width:100%;
	height:100%;
}

canvas{
  display:block;
  vertical-align:bottom;
}

.count-particles{
  background: #000022;
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles{
  font-size: 1.1em;
}

#stats,
.count-particles{
  -webkit-user-select: none;
  margin-top: 5px;
  margin-left: 5px;
}

#stats{
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.count-particles{
  border-radius: 0 0 3px 3px;
}


#particles-js{
	width: 100%;
	height: 100%;
	position: relative;
	background-image: url(../img/bg_blue.png);
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
}

.sk-rotating-plane {
	display: none;
    width: 80px;
    height: 80px;
    margin: auto;
    background-color: white;
    -webkit-animation: sk-rotating-plane 1.2s infinite ease-in-out;
    animation: sk-rotating-plane 1.2s infinite ease-in-out;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -40px;
    margin-top: -80px;
}
.sk-rotating-plane.active{display: block;}

@keyframes sk-rotating-plane{
	0% {
	    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
	    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
	}
	50% {
	    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
	    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
	}
	100% {
	    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
	    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
	}
}

@keyframes login-small{
	0%{
		transform: scale(1);-moz-transform: scale(1);	/* Firefox 4 */-webkit-transform: scale(1);	/* Safari 和 Chrome */-o-transform: scale(1);	/* Opera */-ms-transform:scale(1); 	/* IE 9 */
	}
	100%{
		transform: scale(0.2);-moz-transform: scale(0.1);	/* Firefox 4 */-webkit-transform: scale(0.2);	/* Safari 和 Chrome */-o-transform: scale(0.1);	/* Opera */-ms-transform:scale(0.1); 	/* IE 9 */
	}
}

.login{
    z-index: 2;
    box-sizing: border-box;
    padding:33px 49px;
    width: 510px;border-radius:0 5px 5px 0;height: 510px;background: white;
}
.login-top{font-size: 24px;margin-bottom: 51px;box-sizing: border-box;color: #333333;
   }
.login-top > span{
    display: block;
    padding-bottom: 14px;
    border-bottom: 1.5px solid #dddddd;
    font-family: FZLTCHJW--GB1-0;
    font-size: 30px;
    font-weight: 500;
    color: #666666;
    letter-spacing: 0;
}
.login-center{
    width: 100%;
    height:40px;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 5px 12px;
    background-color: white;
    /*margin-bottom: 16px;*/
}
.checkcode{
    margin-bottom: 8px;
}
.login-center-img{width: 14px;height: 16px; display: inline-block }
.login-center-img>img{width: 100%;vertical-align: middle}
.login-center-input{display: inline-block;width: 230px;height: 30px;position: relative;vertical-align: middle}
.login-center-input input{z-index: 2;color: #333333;width: 100%;height: 30px;border: 0;box-sizing: border-box;outline: none;position: relative;font-size: 20px}
/*.login-center-input input:focus{border: 1px solid dodgerblue;}*/
.login-center-input-text{background: white;padding: 0 5px;position: absolute;z-index: 0;opacity: 0;height: 20px;top: 50%;margin-top: -10px;font-size: 14px;left: 5px;color: dodgerblue;line-height: 20px;transition: all 0.5s;-moz-transition: all 0.5s;	/* Firefox 4 */-webkit-transition: all 0.5s;	/* Safari 和 Chrome */-o-transition: all 0.5s;	/* Opera */}
.login-center-input input:focus~.login-center-input-text{top: 0;z-index: 3;opacity: 1;margin-top: -15px;}
.login.active{-webkit-animation: login-small 0.8s ; animation: login-small 0.8s ;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}
.login-button{cursor: pointer;width:100%;text-align: center;height: 50px;line-height: 40px;background: #2795F7;border-radius: 4px;margin: 0 auto;margin-top: 8px;margin-bottom: 28px;font-size: 18px;
    color: #F3F8FE;}
.main{
    width: 1020px;
    height: 665px;
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%,-50%);
    font-size: 0;
}

.left-bg{
    display: inline-block;
    width: 510px;
    height: 510px;
    background:url("../img/smallbg.png") no-repeat center center;
}
.main form{
    display: inline-block;
    font-size: 16px;
    vertical-align: top;
}
.logo-box{
    /*width: 803px;*/
    height: 98px;
    /*display: inline-block;*/
    /*margin-right: 44px;*/
    vertical-align: 30px;
    margin-bottom: 20px;
}

.logo{
    /*width: 803px;*/
    height: 98px;
    background:url("../img/logo_blue.png") no-repeat center center;

}
.logo-button{
    opacity: 0.9;
    background: rgba(0,0,0,0.37);
    border: 1px solid rgba(255,255,255,0.82);
    border-radius: 4px;
    border-radius: 4px;
    width: 587px;
    height: 54px;
    font-size: 0;
    box-sizing: border-box;
}
.logo-button >div{
    font-size: 14px;
    display: inline-block;
    cursor: pointer;
    width: 50%;
    text-align: center;
    line-height: 52px;
    height: 100%;
}
.logo-button span{
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #FFFFFF;
    letter-spacing: 0;
    vertical-align: 6px;
}
.logo-button-left > .icon{
    display: inline-block;
    width: 24px;
    height: 24px;
    background:url("../img/main.png") no-repeat center center;
}
.logo-button-right > .icon{
    display: inline-block;
    width: 24px;
    height: 24px;
    background:url("../img/collect.png") no-repeat center center;
}
.support{
    position: absolute;
    bottom: 90px;
    left: 50%;
    opacity: 0.67;
    font-family: PingFangSC-Regular;
    font-size: 22px;
    color: #FFFFFF;
    letter-spacing: 0;
    transform: translateX(-50%);
}
.changepwd{
    font-size: 16px;
}
.changepwd >a{
    color: #1C6BEB;
    text-decoration: underline;
}
#msg{
    font-size: 16px;
}
.changepwd-box{
    padding-bottom: 28px;
    /*border-bottom: 1.5px solid #dddddd;*/
    text-align: center;
}
@media screen and (max-width: 1600px) {
    .main{
        width:900px;
        height:530px;
        top:40%;
    }
    .logo-box{
        margin-bottom: 10px;
        /*width: 730px;*/
    }
    .logo-box .logo{
        /*width:510px;*/
        /*background-size:contain;*/
    }
    .left-bg{
        width:440px;
        height:440px;
        background-size: contain;

    }
    .login{
        padding:26px 39px;
        width:440px;
        height:440px;
    }
    .login-top{
        font-size:22px;
        margin-bottom:20px;
    }
    .login-top >span{
        font-size: 22px;
    }
    .input-title{
        /*width: 47px;*/
        /*height: 15px;*/
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #555555;
        line-height: 48px;
        font-weight: 520;
    }

    /*.support{*/
    /*    bottom: 90px;*/
    /*}*/
}
@media screen and (max-width: 1400px) {
    .support{
        bottom: 70px;
    }
    /*.main{*/
    /*    width:660px;*/
    /*    height:520px;*/
    /*}*/
    /*.logo-box{*/
    /*    margin-bottom: 35px;*/
    /*    width: 660px;*/
    /*}*/
    /*.logo-box .logo{*/
    /*    width:660px;*/
    /*    background-size:contain;*/
    /*}*/
    /*.left-bg{*/
    /*    width:290px;*/
    /*    height:400px;*/
    /*}*/
    /*.login{*/
    /*    padding:22px 28px;*/
    /*    width:370px;*/
    /*    height:400px;*/
    /*}*/
    /*.login-top{*/
    /*    font-size:18px;*/
    /*    margin-bottom:20px;*/
    /*}*/
    /*.login-top >span{*/
    /*    font-size: 20px;*/
    /*}*/
}

.input-title{
    /*width: 47px;*/
    /*height: 15px;*/
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #555555;
    line-height: 48px;
}

input::-webkit-input-placeholder {
    font-size: 15px;
}
input:-moz-placeholder {
    font-size: 15px;
}
input::-moz-placeholder {
    font-size: 15px;
}
input::-ms-input-placeholder {
    /* Internet Explorer 10+ */
    font-size: 15px;
}