#canvas-wrapper { position:fixed; top:0; right:0; bottom:0; left:0; width:100%; height:100%;}
#canvas-wrapper { background:url("../images/login-bg.jpg") no-repeat top center;}

/* Login Box */
.login-box { position:relative; z-index:10; margin:160px auto 0 auto; width:500px; font-family:'Microsoft Yahei';}
.login-header { clear:both; height:40px; line-height:40px; text-align:left;}
.login-container { border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; background-color:#fafafa; box-shadow:0 1px 10px 0 rgba(0, 0, 0, 0.3);}

.login-topbar { clear:both; height:120px; border-top:5px solid #3BAFDA; border-bottom:1px solid #ddd; background:url(../images/topbar-pic.jpg) no-repeat left top; overflow:hidden;}
.login-form { clear:both; padding:20px; border-bottom:1px solid #ddd; background-color:#fafafa;}
.login-bottom { clear:both; height:60px; border-bottom-left-radius:3px; -webkit-border-bottom-left-radius:3px; -moz-border-bottom-left-radius:3px; border-bottom-right-radius:3px; -webkit-border-bottom-right-radius:3px; -moz-border-bottom-right-radius:3px; background-color:#F2F2F2;}

.topbar-link { display:block; margin:80px 10px 0 0; line-height:40px; text-align:right; color:#fff;}
.topbar-link a,.topbar-link a:hover { margin:0 5px; color:#fff; text-decoration:none;}

/*- Login Form -*/
.login-topbar { clear: both; height: 120px; border-top: 5px solid #3BAFDA; border-bottom: 1px solid #ddd; background: url(/content/statics/images/topbar-pic.jpg); overflow: hidden; }
.login-logo { float: left; margin: 30px 0 0 30px; width: 258px; height: 49px; }
.login-form-item { clear:both; margin-bottom:10px; height:75px;}
.login-form-item .login-form-title { clear:both; height:35px; line-height:35px; text-align:left; font-size:14px; color:#666;}
.login-form-item .login-form-group { clear:both; position:relative; height:40px;}
.login-form-item .login-form-group .login-input-text { position:absolute; top:0; right:0; bottom:0; left:0; z-index:2; margin:0; padding:10px; padding-left:36px; width:100%; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; border:1px solid #ddd; text-align:left; color:#626262; outline:none; -webkit-tap-highlight-color:transparent; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); -webkit-appearance:none; -moz-appearance:none; appearance:none;}
.login-form-item .login-form-group .login-input-text:focus { border-color:#4FC1E9;}
.login-form-item .login-form-group .login-form-icon { position:absolute; top:0; bottom:0; left:0; z-index:3; width:40px; line-height:40px; text-align:center; font-size:14px; color:#bbb;}

.login-form-item .login-form-group.vcode .login-input-text { padding-right:90px;}
.login-form-item .login-form-group.vcode .vcode-img { position:absolute; top:2px; right:2px; bottom:0; z-index:5;}

/*- Login Bottom -*/
.login-btn { float:right; display:inline-block; margin:10px 20px 10px 0; width:100px; height:40px; line-height:38px; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; border:0; background-color:#31b0d5; text-align:center; font-size:14px; color:#fff;}
.login-btn:hover,.login-btn:focus { background-color:#29A0CB; color:#fff; text-decoration:none;}

.login-btn.login-btn-center { float:none;}

.other-login-wrap { float:right; display:inline-block; margin:10px; height:40px; line-height:40px; font-size:12px; color:#29A0CB;}
.other-login-wrap span { margin-right:10px;}
.other-login-btn { display:inline-block; width:28px; line-height:40px; text-align:center; font-size:14px; color:#29A0CB;}

.remember-me { float:left; margin:10px 0 10px 20px; width:130px; height:40px; line-height:40px; text-align:left; font-size:12px; color:#999;}
.remember-me span { padding-left:10px;}

/* Login Footer */
.login-footer { clear:both; padding:0 10px; line-height:45px; text-align:left;}
.login-footer a,.login-footer a:hover { color:#fff; text-decoration:none;}

.login-footer .forget-password { float:left;}
.login-footer .register { float:right;}

/* Login */
.login-box,.reg-box { opacity:0; -webkit-transform:translateY(200px); -webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out; transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out;}
.login-box.active,.reg-box.active { opacity:1; -webkit-transform:translateY(0); -webkit-transition: opacity 1s ease-in-out,-webkit-transform 1s ease-in-out .1s; transition: opacity 1s ease-in-out,transform 1s ease-in-out .1s;}

/* Validation */
.validation-summary-errors { clear:both; display:block; margin-bottom:10px; padding:0 15px; height:35px; line-height:35px; border-radius:2px; border:1px solid #EDC471; background-color:#FDDD9E; text-align:left; font-size:12px; color:#C6901F;}
.validation-summary-errors ul { display:block; margin:0; padding:0; list-style:none;}
.validation-summary-errors ul li { float:left; display:inline-block; margin-right:10px;}

.login-tips { padding:5px 10px; line-height:1.5; border-radius:2px; background-color:#f4f4f4; text-align:left; color:#999;}

/* Reg Box */
.reg-box { position:relative; z-index:10; margin:160px auto 0 auto; width:800px; font-family:'Microsoft Yahei';}
.reg-container { border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; background-color:#fafafa; box-shadow:0 1px 10px 0 rgba(0, 0, 0, 0.3);}

.reg-topbar { clear:both; height:120px; border-top:5px solid #3BAFDA; border-bottom:1px solid #ddd; background:url(../images/topbar-pic.jpg) no-repeat left top;}
.reg-form { clear:both; padding:0 250px 0 0; border-bottom:1px solid #ddd; background-color:#f4f4f4;}

.reg-form-content { float:left; padding:20px; width:100%; background-color:#fafafa;}
.reg-form-sidebar { float:right; box-sizing:border-box; -webkit-box-sizing:border-box; margin-right:-250px; padding:20px; width:250px; line-height:1.8; text-align:left; color:#4F4F4F;}
.reg-bottom { clear:both; padding:0 20px; height:60px; line-height:60px; background-color:#F2F2F2;}
.reg-bottom a,.reg-bottom a:hover { font-size:14px; color:#29A0CB; text-decoration:none;}
.reg-bottom .fa { margin-left:5px;}

/*- Reg Bottom -*/
.reg-btn { float:left; display:inline-block; margin:10px 20px 10px 0; width:180px; height:40px; line-height:38px; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; border:0; background-color:#31b0d5; text-align:center; font-size:14px; color:#fff;}
.reg-btn:hover,.reg-btn:focus { background-color:#29A0CB;}

.reg-form-label { clear:both; padding:10px 0; font-weight:normal;}
.reg-form-label a,.reg-form-label a:hover { color:#29A0CB; text-decoration:none;}