html, body{ width: 100%; height: 100%; }
body{ padding-bottom: 94px; }

div.lr-wrapper{ width: 100%; height: 100%; overflow: hidden; position: relative; background: url("../images/site/lg/bg.jpg") no-repeat center; background-size: cover; }
div.lr-wrapper .container{ width: 1440px; height: 100%; position: relative; }

div.lr-wrapper .title{ width: 50%; height: 100%; display: flex; justify-content: flex-start; align-items: center; }
div.lr-wrapper .title img{ max-width: 100%; }

div.lr-wrapper .login-box{ position: absolute; top: 50%; right: 0; margin-top: -200px;background-color: #e4e2e4; overflow: hidden;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
div.lr-wrapper .login-box .tit{ background-color: #f5f5f7; color: #666; font-size: 18px; text-align: center; padding: 18px 0; }

div.lr-wrapper .login-box form.update{ padding: 15px 24px; }
div.lr-wrapper .login-box form.update .ipt-txt{ width: 350px; background: no-repeat left center; padding-left: 24px; border-bottom: 1px solid #CCC; margin-bottom: 20px; position: relative; }
div.lr-wrapper .login-box form.update .ipt-txt input{ border: 0; outline: none; font-size: 14px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 10px 15px; width: 100%; background-color: transparent; }
div.lr-wrapper .login-box form.update .ipt-txt.user{ background-image: url("../images/site/lg/icon_01.png"); }
div.lr-wrapper .login-box form.update .ipt-txt.pwd{ background-image: url("../images/site/lg/icon_02.png"); }
div.lr-wrapper .login-box form.update .ipt-txt.verify{ background-image: url("../images/site/lg/icon_03.png"); padding-right: 150px; }

div.lr-wrapper .login-box form.update a.code-link{ position: absolute; bottom: -1px; right: 0; background-color: #e4e2e4; color: #666; }
div.lr-wrapper .login-box form.update a.code-link img, div.lr-wrapper .login-box form.update a.code-link span{ display: inline-block; vertical-align: bottom; }
div.lr-wrapper .login-box form.update a.code-link:hover, div.lr-wrapper .login-box form.update a.code-link:focus{ text-decoration: none; }

div.lr-wrapper .login-box form.update .ipt-txt label.error{ position: absolute; left: 38px; bottom: -25px; font-weight: normal; color: #F00; }

div.lr-wrapper .login-box form.update label.read{ font-size: 14px; color: #666; font-weight: normal; }
div.lr-wrapper .login-box form.update label.read a{ color: #beae7c; }

div.lr-wrapper .login-box form.update button.btn-submit{ width: 100%; height: 45px; background-color: #a31e2c; font-size: 16px; color: #FFF; margin: 15px 0; border: 0; outline: none; }
div.lr-wrapper .login-box form.update .bottom{ }
div.lr-wrapper .login-box form.update .bottom:after{ display: block; content: ''; clear: both; }
div.lr-wrapper .login-box form.update .bottom a{ color: #666; font-size: 14px; }
div.lr-wrapper .login-box form.update .bottom a.fastLg{ float: right; }



div.footer-wrapper{ width: 100%; height: 94px; position: absolute; left: 0; bottom: 0; z-index: 999; }

@media (max-width: 1560px) {
    div.lr-wrapper .login-box{ right: 15px; }
}

@media (max-width: 1450px) {
    div.lr-wrapper .container{ width: 100%; }
}

@media (max-width: 980px) {
    /*html, body{ width: 100%; height: auto; }*/
    /*body{ padding-bottom: 0; }*/

    div.lr-wrapper .title{ display: none; width: 100%; text-align: center; padding: 50px 0;  }
    div.lr-wrapper .title img{ max-width: 60%; }

    div.lr-wrapper .login-box{ display: block; width: 400px; right: 50%; margin-right: -200px; /*position: static; margin: 50px auto 50px; */}

    div.footer-wrapper{ position: static; }
}

@media (max-width: 500px) {
    div.lr-wrapper .title img{ max-width: 90%; }
    div.lr-wrapper .login-box{ width: 100%; }
    div.lr-wrapper .login-box form.update{ padding: 15px; }
    div.lr-wrapper .login-box form.update .ipt-txt{ width: 100%; }
    div.lr-wrapper .login-box form.update .ipt-txt.verify{ padding-right: 42px; }
    div.lr-wrapper .login-box form.update a.code-link span{ display: none; }
}