@charset "utf-8";
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: 0; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}
html{height: 100%; /*-o-user-select: none; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none;*/}
html,body,div,p,strong,span,a,b,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,del,img,i,select,button,textarea,input{margin: 0; padding: 0;}
body{background: #fff; font-family: "Microsoft YaHei"; font-size: 16px; color: #000; position: relative; min-height: 100%;}
input[type="text"],input[type="password"],button,textarea{outline: none; border: none; -webkit-appearance: none; font-family: "Microsoft YaHei";}
select{outline: none; border: none;}
a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);}
h1,h2,h3,h4,h5,h6,strong{font-weight: normal;}
a{text-decoration: none; color: #000;}
a:hover{text-decoration: none;}
a:focus{text-decoration: none;}
li{list-style: none;}
img{vertical-align: middle; border: none;}
.fl{float: left;}
.fr{float: right;}
.clear{clear: both;}
.hidden{overflow: hidden;}
/*scroll bar*/
::-webkit-scrollbar {width:6px;height:6px}
::-webkit-scrollbar-button:vertical {display:none}
::-webkit-scrollbar-corner,::-webkit-scrollbar-track {background-color:#ccc}
::-webkit-scrollbar-thumb {border-radius:0;background-color:#000;)}
::-webkit-scrollbar-thumb:vertical:hover {background-color:#000;)}
::-webkit-scrollbar-thumb:vertical:active {background-color:#000;)}


/*login1*/
.loginBox .left{position: fixed; top: 0; left: 0; bottom: 0; width: 62%; height: 100%; text-align: center; overflow: hidden;}
.loginBox .left .videoMask{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 104, 183, .7); z-index: 5;}
.loginBox .left .logoBox{width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-align: center; display: table; z-index: 9;}
.loginBox .left .logoBox a{display: table-cell; vertical-align: middle;}
.loginBox .left video{height: 100%; position: relative; z-index: 1;}
.loginBox .right{position: fixed; top: 0; right: 0; bottom: 0; width: 38%; height: 100%; padding: 0 120px; background: #fff; overflow: hidden;}
.loginBox .right .copyRight{width: 100%; text-align: center; position: absolute; bottom: 30px; left: 0; font-size: 14px; line-height: 28px; color: #0068b7;}
.loginBox .right .formBox{width: 100%; height: 100%; padding-bottom: 120px; display: table;}
.loginBox .right .formBox .items{width: 100%; display: table-cell; vertical-align: middle;}
.loginBox .right .formBox .items h3 img{display: block; margin: 0 auto; max-width: 90%;}
.loginBox .right .formBox .item{margin-top: 30px; border-bottom: 2px solid #e6e6e6; position: relative;}
.loginBox .right .formBox .item input{width: 100%; height: 70px; font-size: 18px; color: #ccc; padding: 20px 50px;}
.loginBox .right .formBox .item 
.loginBox .right .formBox .item a{position: absolute; right: 0; bottom: 0; height: 70px;}
.loginBox .right .formBox .item a img{height:40px; display: block;margin-top:15px;position:absolute;top:0;right:0;}
.loginBox .right .formBox button{width: 300px; height: 60px; display: block; margin: 90px auto 0; background: #0068b7; color: #fff; font-size: 20px; border-radius: 30px; cursor: pointer; transition: all 0.3s ease;}
.loginBox .right .formBox button:hover{background: #0082e5;}
@media screen and (max-width: 1700px){
	.loginBox .right{padding: 0 80px;}
	.loginBox .right .formBox button{width: 250px; height: 50px; margin-top: 70px;}
}
@media screen and (max-width: 1500px){
	.loginBox .left .logoBox img{height: 80px;}
	.loginBox .right{padding: 0 50px;}
	.loginBox .right .formBox .item input{padding: 20px;}
}
@media screen and (max-width: 1300px){
	.loginBox .right .formBox .item{margin-top: 15px;}
	.loginBox .right .formBox .item input{font-size: 14px; height: 50px; padding: 10px 20px;}
	.loginBox .right .formBox .item a{height: 50px;}
	.loginBox .right .copyRight{font-size: 12px; line-height: 26px;}
	.loginBox .right .formBox button{width: 240px; height: 46px; margin-top: 50px; font-size: 16px;}
}
@media screen and (max-width: 992px){
	.loginBox .left{position: relative; height: 200px; width: 100%;}
	.loginBox .left video{width: 110%; height: auto;}
	.loginBox .left .logoBox img{height: 50px;}
	.loginBox .right{position: static; width: 100%; padding: 30px 15px;}
	.loginBox .right .formBox .items h3{margin-bottom: 30px;}
	.loginBox .right .copyRight{line-height: 22px; padding: 0 10px; bottom: 10px;}
}

/*login2*/
.loginBox1 .box1{width: 100%; height: 60%; position: absolute; left: 0; top: 0; z-index: 2;}
.loginBox1 .box1 .waves{position: absolute; bottom: 0; width: 100%; height: 100%; left: 0; overflow: hidden;}
.loginBox1 .box1 .wavebg{background: url(../images/wave.png) center top no-repeat; position: absolute; bottom: 0; left: 0;}
.loginBox1 .box1 .wave1{width: 2400px; height: 645px; background-position: 0 0;}
.loginBox1 .box1 .wave2{width: 2400px; height: 710px; background-position: 0 -650px;}
.loginBox1 .box1 .wave1{animation:waves1 5s ease-in-out alternate infinite;}
.loginBox1 .box1 .wave2{animation:waves2 5s ease-in-out alternate infinite;}
@keyframes waves1 {
	0% {-ms-transform:translate(0px,-100px);-webkit-transform:translate(0px,-100px);transform:translate(0px,-100px)}
	50% {-ms-transform:translate(-80px,-50px);-webkit-transform:translate(-80px,-50px);transform:translate(-80px,-50px)}
	100% {-ms-transform:translate(-10px,0);-webkit-transform:translate(-10px,0);transform:translate(-10px,0)}
}
@keyframes waves2 {
	0% {-ms-transform:translate(0px,-40px);-webkit-transform:translate(0px,-40px);transform:translate(0px,-40px)}
	50% {-ms-transform:translate(-90px;,0);-webkit-transform:translate(-90px;,0);transform:translate(-90px;,0)}
	100% {-ms-transform:translate(-50px,-40px);-webkit-transform:translate(-50px,-40px);transform:translate(-50px,-40px)}
}
.loginBox1 .box2{width: 100%; height: 50%; position: absolute; left: 0; bottom: 0; background: #fff; z-index: 1;}
.loginBox1 .copyRight{width: 100%; position: absolute; bottom: 0; left: 0; font-size: 14px; color: #0068b7; line-height: 68px; text-align: center; z-index: 3;}
.loginBox1 .main{width: 600px; position: absolute; top: 50%; left: 50%; margin: -330px 0 0 -300px; z-index: 3;}
.loginBox1 .main .logo{text-align: center;}
.loginBox1 .main .logo img{display: block; margin: 0 auto;}
.loginBox1 .main .formBox{width: 460px; margin: 40px auto 0; background: #fff; border-radius: 10px; box-shadow: 0 0 50px rgba(0, 0, 0, .1); overflow: hidden;}
.loginBox1 .main .formBox h3{padding: 55px 0;}
.loginBox1 .main .formBox h3 img{display: block; margin: 0 auto; max-width: 70%;}
.loginBox1 .main .formBox .items{padding: 30px 30px 0;}
.loginBox1 .main .formBox .border{border: 1px solid #f2f2f2;}
.loginBox1 .main .formBox .item{width: 100%; height: 60px; position: relative; border-radius: 10px; margin-bottom: 30px;}
.loginBox1 .main .formBox .item span{width: 60px; height: 100%; float: left; background-position: center center; background-repeat: no-repeat;}
.loginBox1 .main .formBox .item span.span1{background-image: url(../images/icon1.png);}
.loginBox1 .main .formBox .item span.span2{background-image: url(../images/icon2.png);}
.loginBox1 .main .formBox .item .inputBox{padding-left: 60px; height: 100%; position: relative;}
.loginBox1 .main .formBox .item .inputBox i{width: 1px; height: 16px; background: #f2f2f2; position: absolute; top: 50%; left: 60px; margin-top: -8px;}
.loginBox1 .main .formBox .item input{width: 100%; height: 100%; padding: 20px; font-size: 16px; color: #bfbfbf; border-radius: 10px;}
.loginBox1 .main .formBox .item input.border{width: 230px;}
.loginBox1 .main .formBox .item a{height: 100%; width: 150px; position: absolute; top: 0; right: 0; border-radius: 10px; text-align: center; overflow: hidden;}
.loginBox1 .main .formBox .item img{height: 100%;}
.loginBox1 .main .formBox .item button{width: 100%; height: 100%; border-radius: 10px; background: #0068b7; color: #fff; font-size: 20px; transition: all 0.3s ease; cursor: pointer;}
.loginBox1 .main .formBox .item button:hover{background: #0082e5;}
@media screen and (max-width: 1500px){
	.loginBox1 .main .logo img{height: 80px;}
	.loginBox1 .main .formBox h3{padding: 30px 0;}
	.loginBox1 .main .formBox .items{padding: 10px 30px 30px;}
	.loginBox1 .main .formBox .item{margin-bottom: 15px;}
}
@media screen and (max-width: 992px){
	.loginBox1 .box1{background: #1977be;}
	.loginBox1 .box1 .waves{display: none;}
	.loginBox1 .main{position: relative; width: 100%; padding: 20% 15px; margin: 0 auto; left: 0;}
	.loginBox1 .main .formBox{width: 100%; margin-top: 20px;}
	.loginBox1 .main .logo img{height: 48px;}
	.loginBox1 .main .formBox h3{padding: 20px 0;}
	.loginBox1 .main .formBox .items{padding: 15px;}
	.loginBox1 .main .formBox .item{height: 40px; margin-bottom: 20px;}
	.loginBox1 .main .formBox .item input{padding: 10px; font-size: 14px;}
	.loginBox1 .main .formBox .item a{width: 30%;}
	.loginBox1 .main .formBox .item input.border{width: 68%;}
	.loginBox1 .main .formBox .item button{font-size: 16px;}
	.loginBox1 .copyRight{line-height: 22px; padding: 0 10px; bottom: 10px;}
}