@charset "utf-8";
/* CSS Document */
/*------------------------------------------------------------
>>>>>>>>>>>>>>>>>>>>>>>>> 2020.9.16起 新版web端登录页样式
------------------------------------------------------------*/
html, body { height: 100%;}
body { font-family: "PingFang SC", Helvetica, "Helvetica Neue", "Microsoft YaHei", "SimSun", Tahoma, Arial, sans-serif;}

/*适配safari浏览器输入框光标过长*/
input {
	line-height: 15px !important;
}
.login-bg { position: relative; min-height: 600px; text-align: center; background-image: url('../images/login-bg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed;}
.login-bg:after { content: ''; display: inline-block; height: 100%; vertical-align: middle;}

.login-container { display: inline-block; margin: -40px auto 0; vertical-align: middle;}
.login-container img { max-height: 100%; max-width: 100%;}

.login-container .logo-wrapper { width:950px; margin-bottom: 20px; font-size: 0;}
.login-container .logo-wrapper span { float: none; display: inline-block; vertical-align: middle;}
.login-container .logo-wrapper .logo { height: 90px; margin-right: 10px;}
.login-container .logo-wrapper .name { max-width: 735px; font-size: 34px; font-weight: 700; color: white; line-height: 1.2; text-align: left; margin-bottom: 15px; -webkit-text-shadow: rgba(0,0,0, .26); -moz-text-shadow: rgba(0,0,0, .26); -o-text-shadow: rgba(0,0,0, .26); -ms-text-shadow: rgba(0,0,0, .26); text-shadow: rgba(0,0,0, .26);}

.login-container .wrapper { display: inline-block; width: 835px; height: 500px; font-size: 0; vertical-align: middle; -webkit-box-shadow: rgba(0,0,0, .26); -moz-box-shadow: rgba(0,0,0, .26); -o-box-shadow: rgba(0,0,0, .26); -ms-box-shadow: rgba(0,0,0, .26); box-shadow: rgba(0,0,0, .26);}
.login-container .wrapper > div { display: inline-block; height: inherit; vertical-align: middle;}
.login-container .wrapper .left { width: 335px;}
.login-container .wrapper .right { width: 500px; padding-right: 60px; padding-left: 60px; text-align: left; background-color: white; vertical-align: middle; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
.login-container .wrapper .right:after { content: ''; display: inline-block; height: 100%; vertical-align: middle;}
.login-container .wrapper .right .wrap { display: inline-block; width: 100%; vertical-align: middle;}

.login-container .title { display: block; font-size: 0; color: #0195ff;}
.login-container .title span { display: inline-block; vertical-align: middle;}
.login-container .title .text { margin-right: 5px; font-size: 40px; font-weight: 700; letter-spacing: 5px;}
.login-container .title .spell { font-size: 45px; text-transform: uppercase; opacity: .1; fill: alpah(opacity=10);}

.login-container .form-row { margin: 16px 0;}
.login-container .form-row:last-child { margin-top: 30px;}
.login-container .form-con { position: relative;}
.login-container .form-con.form-hasprepend .form-control { padding-left: 50px;}
.login-container .form-con.form-hasappend .form-control { padding-right: 50px;}
.login-container .form-con .prepend,
.login-container .form-con .append { position: absolute; top: 50%; height: 50px; margin-top: -25px; padding: 0 15px; vertical-align: middle;}
.login-container .form-con .prepend { left: 0;}
.login-container .form-con .append { right: 1px; background-color: #f5f7f9; border: 1px solid transparent;}
.login-container .form-con .prepend:after,
.login-container .form-con .append:after { content: ''; display: inline-block; height: 100%; vertical-align: middle;}
.login-container .form-con .prepend span,
.login-container .form-con .append span { display: inline-block; vertical-align: middle;}
.login-container .form-con .prepend span i,
.login-container .form-con .append span i { font-size: inherit;}
.login-container .form-con .prepend span { font-size: 20px; color: #c1c5c7;}
.login-container .form-con .append { display: none;}
.login-container .form-con .append span { font-size: 18px; cursor: pointer;}
.login-container .form-con .append span:hover { color: #0195ff;}

.login-container .form-control { width: 100%; height: 60px; font-size: 16px; line-height: 58px; background-color: #f5f7f9; border: 1px solid #f5f7f9; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
.login-container .form-control:focus { background-color: white; border-color: #0195ff; outline: 1px solid #0195ff;}
.login-container .form-hasappend.form-vcode { padding-right: 150px;}
.login-container .form-hasappend.form-vcode .append { display: block; width: 135px; padding: 0;}
.login-container .form-hasappend.form-vcode .append .code { display: inline-block; border: 1px solid #f5f7f9;}
.login-container .login-btn { display: block; font-size: 22px; font-weight: normal; color: white; text-align: center; line-height: 60px; letter-spacing: 5px; background-color: #0195ff; -webkit-box-shadow: 0 6px 10px rgba(1,149,255, .2); -moz-box-shadow: 0 6px 10px rgba(1,149,255, .2); -o-box-shadow: 0 6px 10px rgba(1,149,255, .2); -ms-box-shadow: 0 6px 10px rgba(1,149,255, .2); box-shadow: 0 6px 10px rgba(1,149,255, .2);cursor: pointer;}
.login-container .login-btn:hover { background-color: #2484de;}
.login-container .login-btn.disabled { color: white !important; background-color: #cfcfcf; text-shadow: none !important; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; -ms-box-shadow: none; box-shadow: none;}

.login-container .form-hint { font-size: 0; color: red;}
.login-container .form-hint span { display: inline-block; font-size: 14px; color: inherit; vertical-align: middle;}
.login-container .form-hint .icon { margin-right: 6px; font-size: 16px;}
.login-container .form-hint b { margin-right: 8px; font-weight: border; font-style: italic;}

.login-footer { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; padding: 20px 0; font-size: 16px; color: white; text-align: center; vertical-align: middle;}
.login-footer span { display: inline-block; vertical-align: middle;}
.login-footer .icon { width: 1.4rem; margin-right: 8px;}
.login-footer .icon img { width: 100%; height: auto; vertical-align: middle;}

.login-tr { position: fixed; top: 24px; right: 24px; z-index: 1; font-size: 0;}
.login-tr > * { display: inline-block; margin-left: 12px; vertical-align: middle;}

@media (max-height: 768px) {
	.login-container, .login-footer { -webkit-transform: scale(.9); -moz-transform: scale(.9); -ms-transform: scale(.9); -o-transform: scale(.9); transform: scale(.9);}
	.login-footer { -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -o-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom;}
}
@media (max-height: 700px) {
	.login-container, .login-footer { -webkit-transform: scale(.8); -moz-transform: scale(.8); -ms-transform: scale(.8); -o-transform: scale(.8); transform: scale(.8);}
}

.form-control::-moz-placeholder { color: #bebebe; opacity: 1; }
.form-control:-ms-input-placeholder { color: #bebebe; }
.form-control::-webkit-input-placeholder { color: #bebebe; }

input::-ms-clear,input::-ms-reveal{
	display: none;
}

.ie9 .form-con.form-hasappend .form-control { padding-right: 0;}