body {
	height: initial;
}
#wrapper{position: relative;margin-bottom:20px;padding-top:100px;}
.btn-weibo{background-color: #ff6666;color: #fff;}
.btn-weibo:hover{background-color: #FF4D4D;color: #fff;}
.btn-weibo:active{background-color: #E64545;color: #fff;}
.btn-qq{background-color: #418ae2;color: #fff;color: #fff;}
.btn-qq:hover{background-color: #2D7FE2;color: #fff;}
.btn-qq:active{background-color: #1773E2;color: #fff;}
.btn-wechat{background-color: #73db42;color: #fff;}
.btn-wechat:hover{color: #fff;}
.btn-primary{border:none;background-color: #59b0ff;}
.btn-primary:hover{background-color: #4daaff;}
.btn-primary:active, .btn-primary:focus{background-color: #1a90ff;}
.btn:active, .btn.active{box-shadow: none;}
.whz-login-box{width: 620px;margin:0 auto;background-color: #ffffff;border-radius: 5px;}
.whz-login-box .logo{width:220px;height:50px;}
.whz-login-box .logo a{display: block;width:220px;height:50px;}
.whz-login-box .mod-body{padding:50px 60px;}
.whz-login-box .mod-body .content{margin-right: 0px;}
.whz-login-box .mod-body .content h2{margin:13px 0 40px;color: #666666;}
.whz-login-box .mod-body .content ul li{margin-top: 20px;line-height: 30px;}
.whz-login-box .mod-body .content ul li:first-child{margin-top: 0;}
.whz-login-box .mod-body .content ul li.last{font-size: 12px;line-height: 40px;}
.whz-login-box .mod-body .content ul li.last input{vertical-align: -2px\0;}
.whz-login-box .mod-body .content ul li.last a{color: #666666;}
.whz-login-box .mod-body .content ul li .btn-primary{width:112px;color: #fff !important;}
.whz-login-box .mod-body .side-bar{height: 326px;padding:60px 0 60px 60px;border-left: 1px solid #e6e6e6;}
.whz-login-box .mod-body .side-bar h3{margin-bottom:27px;color: #666666;text-align: center;}
.whz-login-box .mod-body .side-bar .btn{position:relative;width: 170px;height: 40px;line-height: 40px;margin:0 0 20px;padding:0 0 0 15px;}
.whz-login-box .mod-body .side-bar .btn i{position:absolute;left:15px;top:10px;font-size: 18px;color: #fff;}
.whz-login-box .mod-body .side-bar .btn-wechat .img{display: none;}
.whz-login-box .mod-body .side-bar .btn-wechat.active{position: relative;height:200px;background-color: #4d4d4d;}
.whz-login-box .mod-body .side-bar .btn-wechat.active .img{display:block;position: absolute;left: 10px;top: 40px;width:148px;height: 148px;}
.whz-login-box .mod-body .side-bar .btn-wechat.active img{max-width: 148px;}
.whz-login-box .mod-body .side-bar .btn-wechat.active #whz-loading-mini-box{margin-top: 55px;}
.whz-login-box .mod-body .form-control{height: 40px;line-height: 28px\0;padding-left:15px !important;box-shadow: none;border-color: #e6e6e6;}
.whz-login-box .mod-footer{height: 70px;line-height:70px;background-color: #f5f5f5; border-radius:0 0 5px 5px;padding:0 60px;color: #66b7ff;}
.whz-login-box .mod-footer span{color: #666666;}
.whz-login-box .mod-footer a{color: #66b7ff;}
.whz-footer-wrap{color: #999999;}
.whz-footer-wrap a{color: #66b7ff;}
@media (max-width:640px){
	#wrapper{padding: 20px;}
	.whz-login-wrap{width: auto;}
	.whz-login-box .whz-mod-head, .whz-login-box .whz-mod-body, .whz-login-box .whz-mod-footer{width: auto;}
	.whz-login-box .whz-mod-body{padding: 20px;}
	.whz-login-box .whz-mod-body #whz-login-user-name, .whz-mod-body #whz-login-user-password{width: 195px;}
	.whz-login-box .whz-mod-footer{padding:0 10px !important;}
}


.loginWrapper{
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	margin:  10% auto;
	flex-direction: row;
	-webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;  
	-webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center; 
    justify-content: center;
	width:  50%;
	/*max-width: 600px;*/   
	height: 600px;     
	font-size: 14px; 
	color: #909090;
}

.banWrapper{
	flex:  0 0 50%;
	width: 50%;
	height:100%;          
}
.banContent{
	height: 100%;
}
.banContent a{display: block; width: 100%; height: 100%;}  
.banContent a img{
	object-fit: revert;
	width: 100%;
	height: 100%;
}
.loginMain{
	flex: 1;
/*	width: 50%;*/
	height: 100%; 
	background-color: #fff; 
}
.loginWidth{
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	justify-content: space-around;
	-webkit-box-pack: justify;
    -webkit-justify-content: space-around;
    -ms-flex-pack: justify;
	-webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center; 
    align-items: center;
	height: 100%; 
}
.loginLogoDiv{ margin: 0 auto;}
.loginLogo{
	display: block;
	width: 200px; 
	height: 100px;   
	/*background: url('./resource/images/loginlogo.png') no-repeat;  */
/*	background:url('{$logo}') no-repeat; */

}  
.remember {
	display: flex;
	flex-direction: row; 
	justify-content: space-between;
	align-items: center; 
} 
.formLogin{width: 310px; padding-top: 40px; margin: 0 auto;}
.loginList{position: relative; height: 38px; line-height: 38px; width: 260px; padding: 2px 18px 2px 32px; margin-bottom: 16px; border-bottom: 1px solid #e7e7e7;}
.loginList .loginText{height: 30px; line-height: 15px;padding: 7px 0; width: 100%;color: #606060; border: 0 none;-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;}
.loginList label{position: absolute;left: 2px; top: 8px; width: 10%; height: 24px;}  

 
.loginListCode label{background-position: -3px -3px;}
.loginListTel label{background: url(../images/telicon.png) 2px 0 no-repeat;}
.loginListKey label{background: url(../images/keyicon.png) 0 0 no-repeat;}
.errorTips{display: none; font-size: 12px; color: #fe514a; height: 20px; line-height: 20px; position: absolute; left: 310px; top: 10px; min-width: 100px;white-space:nowrap;}
.errorTips i,.sysError i{padding: 0 9px; line-height: 20px; height: 20px; display: inline-block; vertical-align: middle; background: url(../../public/images/loginIcon.png) -32px -35px no-repeat;}
.errorTips em,.sysError em{font-style: normal; line-height: 20px; height: 20px; display: inline-block; vertical-align: middle; white-space:nowrap; }
p.loginList{text-align: right; width: 100px; padding: 0; font-size: 13px; margin-bottom:0; height: 16px; line-height: 16px; border: 0 none;}
p.loginList a{color: #03c5ff;}
.loginBtn{width: 100%; height: 46px; line-height: 46px; margin-top: 20px;  border-radius: 2px; color: #fff; border: 0 none; letter-spacing:4px; font-size:16px;background-color: #e4572e;} 
.loginBtn:hover{background: #04bff7;}
.have{height: 20px; line-height: 20px; padding-top: 16px;}
.have i{height: 20px; padding: 0 10px;background: url(../../public/images/loginIcon.png) -52px -37px no-repeat;}
.have a{color: #03c5ff;}
.loginListCode img{position: absolute; right: 30px; top:-1px; height: 42px; border: 0; background: #f7f7f7; border-top-right-radius: 2px; border-bottom-right-radius: 2px; color: #909090;}
.loginListCode .getImg{position: absolute; right: 5px; top: 8px; width: 19px; height: 21px; background: url(../images/loginIcon.png) -2px -33px no-repeat;}

.sysError{color:#fe514a;font-size: 12px;height: 20px; line-height: 20px; position: relative; top:-5px;}  
.sysError a{color: #03c5ff;} 
.iphone {
	display: none;
}
@media only screen and (max-width: 480px) {
	body {
		background-image: none;
		background-color: #fff;  
	}
	.loginWrapper {
	   	display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
	    display: -moz-box; /* 老版本语法: Firefox (buggy) */
	    display: -ms-flexbox; /* 混合版本语法: IE 10 */
	    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
	    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
		margin: 0;
		-webkit-box-direction: normal;
	    -webkit-box-orient: vertical;
	    -moz-flex-direction: column;
	    -webkit-flex-direction: column;
	    flex-direction: column;

		-webkit-box-pack: space-between;
	    -moz-justify-content: space-between;
	    -webkit-justify-content: space-between;
	    justify-content: space-between;

		-webkit-box-align: center;
	    -moz-align-items: center;
	    -webkit-align-items: center;
	    align-items: center; 
		width: 100%;
	}
	.loginWrapper > div {
		-webkit-box-flex: 1;
	    -webkit-flex: 1;
	    -ms-flex: 1;
	    flex: 1;
	    min-height: 600px;    
	}
	.loginWrapper > div:last-child {
		-webkit-box-flex: 1;
	    -webkit-flex: 1;
	    -ms-flex: 1;
	    flex: 1;
	    min-height: 60px; 
	} 
	.banWrapper {
		display: none;    
	}
	.whz-footer-wrap {
		display: none;  
	}
	.iphone {
		display: none;
		flex: 0 0 100%;
		width: 100%; 
	}
	.self_desc {
		flex: 0 0; 
	}
	.banContent a img {
		object-fit: contain;              
	}
	.loginList .loginText {
	    height: 30px;
	    line-height: 15px;
	    padding: 7px 0;
	    width: 200px;
	    color: #606060;
	    border: 0 none;
	    -webkit-appearance: none;
	    -moz-appearance: none;
	    -o-appearance: none;
	    appearance: none; 
	}
}

@media only screen and (min-width:481px) and (max-width:1366px){
	.loginWrapper{
		display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: flex;
		margin:  10% auto;
		flex-direction: row;
		-webkit-box-pack: justify;
	    -webkit-justify-content: space-between;
	    -ms-flex-pack: justify;
	    justify-content: space-between;  
		-webkit-box-pack: center;
	    -webkit-justify-content: center;
	    -ms-flex-pack: center; 
	    justify-content: center;
		width:  50%;
		/*max-width: 600px;*/   
		height: 460px;     
		font-size: 14px; 
		color: #909090;
	}
} 

@media only screen and (min-width:1367px)and (max-width:1600px){           
	.loginWrapper{
		display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: flex;
		margin:  10% auto;
		flex-direction: row;
		-webkit-box-pack: justify;  
	    -webkit-justify-content: space-between;
	    -ms-flex-pack: justify;
	    justify-content: space-between;  
		-webkit-box-pack: center;
	    -webkit-justify-content: center;
	    -ms-flex-pack: center; 
	    justify-content: center;
		width:  50%;
		/*max-width: 600px;*/   
		height: 510px;     
		font-size: 14px;  
		color: #909090;
	} 
}