body { min-width: auto; background: url(../images/login.jpg) no-repeat center; }

.page-header { z-index: 0; background: none; box-shadow: none; }
.page-header .header-title  { color: #fff; }
.page-header .links { margin-top: 20px; }
.page-header .link { margin: 5px; color: #fff; font-size: 14px; }
.page-header .link:hover { text-decoration: underline; }

.page-footer { z-index: 0; }

.form-block { position: absolute; left: 170px; top: 50%; z-index: 1; width: 440px; height: 400px; margin: -200px 0 0 -40px; background-color: #fff; box-shadow: rgba(0, 0, 0, .13) 0 0 17px; }
.form-block>img { display: block; height: 40px; margin: 25px auto 0; -ms-filter: grayscale(100%); }
.row { margin: 20px 50px; border-bottom: 1px solid #ededed; white-space: nowrap; }
.row>icon { margin: 0 10px; color: #5cb2c7; font-size: 20px; vertical-align: middle; }
.row .h-30 { width: 280px; height: 36px; border: none; vertical-align: middle; }
.row text { font-size: 14px; }
.row .valicode-wrapper { display: inline-block; margin-right: 10px; margin-bottom: 2px; border: 1px solid #f2f2f2; padding: 2px; }
.row .valicode-input { width: 190px; }
.forgot-row { border-bottom: none; text-align: center; }
.forgot-row .link { color: #999999; font-size: 14px; text-decoration: underline; } 
#login-confirm { display: block; width: 160px; height: 30px; margin: 0 auto; border: none; border-radius: 0; background-color: #5cb2c7; font-size: 18px; text-align: center; }
.checkbox-wrapper { display: block; margin: 20px 60px; color: #faa458; }  
.checkbox-wrapper icon { border: 1px solid currentColor; color: currentColor; }  
.checkbox-wrapper text { font-size: 14px; }  

#form-bg { position: absolute; top: 50%; left: 130px; width: 400px; height: 360px; margin: -220px 0 0 -20px; background-color: #ffcc1c; box-shadow: rgba(0, 0, 0, .13) 0 0 17px; opacity: .7; }

#border-bg { position: absolute; top: 50%; left: 50%; z-index: -1; width: 1200px; max-width: calc(100% - 340px); height: 700px; max-height: calc(100% - 240px); }
#border-bg { -webkit-transform: translate(-50%); -moz-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%, -50%); }
@media screen and (min-width: 1540px) {
	.form-block>img { height: auto; }
	.row { margin: 25px 60px; }
	.checkbox-wrapper { margin: 25px 70px; }  
	#login-confirm { width: 180px; height: 40px; font-size: 20px; }
	.form-block { left: calc(50% - 1200px / 2); width: 460px; height: 440px; }
	#form-bg { left: calc(50% - 1200px / 2 - 20px); margin-left: -40px; }
}

.language-switch-box { position: absolute; top: 10px; right: 10px; }

/*browser-tip*/
.browser-tip { position: absolute; top: 50px; left: 50%; background-color: rgba(255, 255, 255, .2); padding: 12px 30px; color: #fff; font-size: 14px; }
.browser-tip .cross { position: absolute; top: 0; right: 0; display: block; width: 18px; height: 18px; background-color: rgba(255, 255, 255, .2); color: #fff; font-size: 12px; text-align: center; cursor: pointer; }
.browser-tip .cross:before { display: block; margin-top: 3px; -webkit-transform: scale(.8); -moz-transform: scale(.8); -ms-transform: scale(.8); transform: scale(.8); }

/*forget*/
.tip { font-size: 14px; color: #999; text-align: center; }
.tip .necessary { margin-right: 2px; }
.tip a { color: #5cb2c7; text-decoration: underline; }

icon.correct { margin-right: 5px; margin-left: 0; font-size: 20px; vertical-align: middle; }


.forget-block .row { position: relative; margin-bottom: 25px; border-bottom: none; }
.forget-block .row:first-child { margin-top: 40px; margin-bottom: 40px; }
.forget-block .row h5 { color: #5cb2c7; font-size: 24px; text-align: center; }
.forget-block .row input { width: calc(100% - 2px); border: 1px solid #ebebeb; }
.forget-block .row .confirm { width: 160px; height: 30px; border-radius: 0; padding: 0; font-size: 18px; }
.forget-block .msg { color: #faa458; font-size: 14px; text-align: center; }
.btn-row { margin-top: 40px; }
.link-row { border-bottom: none; text-align: center; }
.link-row .link { color: #999999; font-size: 14px; text-decoration: underline; } 
@media screen and (min-width: 1540px) {
	.btn-row { margin-top: 60px; }
	.forget-block .row .confirm { width: 200px; height: 40px; font-size: 20px; }
}

#step1 .row input { padding-left: 40px; }
#step1 .row>icon { position: absolute; top: 5px; }
#step1 .row .valicode-input { width: calc(100% - 100px); }
#step1 .row .valicode-img { border: 1px solid #f2f2f2; padding: 2px; }
#step1 .row .confirm { padding: 0; }

#step2 .msg { margin-bottom: 30px; }
#step2 .msg p { display: inline-block; text-align: left; }
#step2 .msg p,
#step2 .msg icon { vertical-align: top; }
#step2 .row .valicode-input { padding-left: 10px; }
#step2 .tip { margin-top: 40px; text-align: left; }
html[lang="en"] #step2 .tip span { margin-left: 8px; }
html[lang="en"] #step2 .tip span:first-child { margin-left: 0; }

#step3 .row span { display: inline-block; width: 100px; font-size: 16px; }
#step3 .row .input-password { width: calc(100% - 110px); }
#step3 .tip span { width: auto; font-size: 14px; }
html[lang="en"] #step3 .input-row span { width: 80px; line-height: 16px; vertical-align: middle; }
html[lang="en"] #step3 .input-row .input-password { width: calc(100% - 90px); vertical-align: middle; }

#userinfo-account { margin-right: 10px; }
html[lang="en"] #userinfo-account { margin-left: 5px; }
html[lang="en"] #userinfo-tel { margin-left: 5px; }