body { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif; color: #848a9f; }
.page { position: relative; height: 100%; width: 100%; background: -webkit-linear-gradient(#0a0e19,#373e51); }
.page-head { width: 960px; margin: auto; height: 9%; }
.login-box { width: 1120px; height: 600px; margin: auto; position: relative; box-shadow: 0 5px 25px 5px rgba(23,28,63,.5); }
.login-box .login-media { position: absolute; top: 0px; right: 400px; bottom: 0px; left: 0px; background-color: #3c426e; }
.login-box .login-media .grid { width: 100%; height: 600px; padding: 0px; }
.login-box .login-media .grid figure { min-width: unset; max-width: unset; max-height: none; width: 100%; height: 100%; margin: 0px; }
.login-box .login-media figure.effect-ming { background-color: transparent; overflow: hidden; }
.login-box .login-form { position: absolute; width: 400px; height: 100%; top: 0px; right: 0px; padding: 55px; background-color: #ffffff; }
.login-box .login-form .soft-name { font-size: 18px; }
.login-box .login-form .title { margin-top: 35px; margin-bottom: 15px; margin-right: 15px; cursor: pointer; font-size: 18px; font-weight: bold; color: #5a617d; padding: 5px 0px; line-height: 24px; }
.login-box .login-form .title.current { border-bottom: 5px solid #27b98c; }
.login-box .login-form .method { display: none; text-align: center; }
.login-box .login-form .method.current { display: block; }
.login-box .login-form .input-group { margin-top: 25px; }
.login-box .login-form .qrcode-panel { margin: 35px auto 15px auto; width: 250px; border: 1px solid #848a9f; padding: 15px 0; display: flex; justify-content: center; }
.login-box .login-form #qrcode { margin: auto; text-align: center; margin: 0; }
.login-box .login-form .qrcode-title { display: flex; justify-content: center; align-items:center}
.login-box .login-form .qrcode-title img { margin-right: 5px; }
.login-box .login-form .input-group .input-group-addon { padding-left: 32px; width: 87px; background-color: #fff; font-size: 14px; vertical-align: middle; }
.login-box .login-form .input-group .input-group-addon.login-user { background: url(/Content/images/login-user.png) no-repeat 10px 9px; }
.login-box .login-form .input-group .input-group-addon.login-pwd { background: url(/Content/images/login-pwd.png) no-repeat 10px 9px; }
.login-box .login-form .input-group .input-group-addon.login-code { background: url(/Content/images/login-code.png) no-repeat 10px 9px; }
.login-box .login-form .error-tip { color: #ff0000; height: 21px; margin-top: 15px; }
.login-box .login-form button { margin-top: 50px; background-color: #11203d; border-color: #101f3c; }
.login-box .login-form button:active { background-color: #182643; border-color: #101f3c; }
.login-box .login-form .forget-pwd { line-height: 1.5; margin-top: 15px; text-align: right; font-size: 14px; }
.login-box .login-form .forget-pwd a { color: #848a9f; text-decoration: underline; }
.login-box .login-media .grid { position: relative; clear: both; margin: 0 auto; list-style: none; text-align: center; }
.login-box .login-media .grid figure { position: relative; overflow: hidden; text-align: center; cursor: pointer; }
.login-box .login-media .grid figure img { position: relative; display: block; min-height: 100%; max-width: 100%; opacity: .8; }
.login-box .login-media .grid figure figcaption { padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.login-box .login-media .grid figure figcaption::before, .grid figure figcaption::after { pointer-events: none; }
.login-box .login-media .grid figure figcaption, .grid figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.login-box .login-media .grid figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; }
.login-box .login-media .grid figure h2 { word-spacing: -.15em; font-weight: 300; }
.login-box .login-media .grid figure h2 span { font-weight: 800; }
.login-box .login-media .grid figure h2, .grid figure p { margin: 0; }
.login-box .login-media .grid figure p { letter-spacing: 1px; font-size: 68.5%; }
.login-box .login-media figure.effect-ming img { opacity: .9; -webkit-transition: opacity .35s; transition: opacity .35s; }
.login-box .login-media figure.effect-ming figcaption::before { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; border: 2px solid #fff; box-shadow: 0 0 0 30px rgba(255,255,255,.2); content: ''; opacity: 0; -webkit-transition: opacity .35s,-webkit-transform .35s; transition: opacity .35s,transform .35s; -webkit-transform: scale3d(1.4,1.4,1); transform: scale3d(1.4,1.4,1); }
.login-box .login-media figure.effect-ming h2 { margin: 20% 0 10px; -webkit-transition: -webkit-transform .35s; transition: transform .35s; color: #11203d; font-weight: bold; }
.login-box .login-media figure.effect-ming p { padding: 1em; opacity: 0; -webkit-transition: opacity .35s,-webkit-transform .35s; transition: opacity .35s,transform .35s; -webkit-transform: scale(1.5); transform: scale(1.5); }
.login-box .login-media figure.effect-ming h2 { -webkit-transform: scale(.9); transform: scale(.9); }
.login-box .login-media figure.effect-ming figcaption::before, figure.effect-ming:hover p { opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
.login-box .login-media figure.effect-ming figcaption { background-color: transparent; }
.login-box .login-media figure.effect-ming img { opacity: .4; }
footer { position: fixed; bottom: 0px; left: 0px; right: 0px; padding: 15px; text-align: center; background-color: rgba(0,0,0,.25); color: rgba(255,255,255,.65); z-index: 3; border-top: 1px solid #222; font-size: 12px; }
footer a { color: rgba(255,255,255,.65); }