@charset "UTF-8";
.login-register { background: #0a0c18 url("../images/login-bg.png") no-repeat center center; background-size: cover; width: 100%; padding-top: 64px; box-sizing: border-box; }

.login-register .container { width: 1000px; }

.login-register .top { display: flex; justify-content: space-between; align-items: flex-end; }

.login-register .top .r-nav a { margin-left: 44px; color: #fff; font-size: 16px; }

.login-register .mobile-logo { display: none; }

.login-register .box { margin-top: 33px; background-color: #171a2b; display: flex; flex-direction: row; height: 622px; }

.login-register .box-title { height: 40px; border-left: 8px solid #db1d40; padding-left: 40px; }

.login-register .box-left { flex: 1; padding-top: 100px; }

.login-register .box-left.register { padding-top: 50px; }

.login-register .box-left .layui-form { margin: 40px auto 0; padding: 0 50px; }

.login-register .box-left .layui-form .layui-form-item { margin-bottom: 20px; }

.login-register .box-left .layui-form .tips { margin-top: -20px; margin-bottom: -10px; height: 46px; line-height: 46px; color: #db1d40; }

.login-register .box-left .layui-form .layui-input-block { margin-left: 0; background-color: #0b0d19; height: 50px; display: flex; align-items: center; }

.login-register .box-left .layui-form .layui-input-block i.icon-img { display: inline-block; margin: 0 20px; }

.login-register .box-left .layui-form .layui-input-block i.icon-img + .layui-input { padding-left: 0; flex: 1; }

.login-register .box-left .layui-form .layui-input-block .layui-input { background: none; border: none; padding-right: 20px; color: #fff; }

.login-register .box-left .layui-form .layui-input-block .layui-input::placeholder { color: #777b86; }

.login-register .box-left .layui-form .layui-input-block .input__suffix { padding-right: 20px; color: #fff; white-space: nowrap; width: auto; height: auto; margin-top: 0; margin-right: 5px; border: none; }

.login-register .box-left .layui-form .layui-input-block .input__suffix img { width: 80px; height: 40px; margin-left: auto; margin-right: -10px; }

.login-register .box-left .layui-form .layui-input-block .input__suffix.layui-btn { height: 32px; font-size: 14px; }

.login-register .box-left .layui-form .checkbox { color: #777b86; padding-bottom: 10px; }

.login-register .box-left .layui-form .checkbox a { color: #017efd; }

.login-register .box-left .layui-form .layui-btn { margin-top: 10px; font-size: 16px; width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; color: #ffffff; background: #db1d40; }

.login-register .box-left .other-login { width: 400px; margin: 50px auto 0; }

.login-register .box-left .other-login .title { width: 100%; height: 1px; background-color: #212434; position: relative; }

.login-register .box-left .other-login .title:after { content: "其他登录方式"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0 20px; background-color: #171a2b; color: #777b86; }

.login-register .box-left .other-login .btns { display: flex; justify-content: space-between; margin-top: 34px; }

.login-register .box-left .other-login .btns a { width: 190px; height: 50px; line-height: 50px; display: flex; align-items: center; justify-content: center; background-color: #2a2e45; }

.login-register .box-left .other-login .btns a img, .login-register .box-left .other-login .btns a i { margin-right: 10px; }

.login-register .box-right { flex: 1; display: flex; flex-direction: column; align-items: center; background: url(../images/login-cbg.png) no-repeat center top; text-align: center; color: #fff; font-size: 16px; padding-top: 160px; }

.login-register .box-right .radius-btn { margin-top: 20px; width: 180px; height: 42px; border: 2px solid #fff; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 21px; color: #fff; }

.login-register .box-right .radius-btn.qq { border: none; background-image: linear-gradient(to right, #1580f9, #15bbf9); }

.login-register .box-right .radius-btn.wechat { border: none; background-image: linear-gradient(to right, #2aa146, #13d06c); }

@media screen and (min-width: 1000px) and (max-width: 1300px) { .login-register .container { width: 1000px !important; } }

@media screen and (min-width: 751px) and (max-width: 1000px) { .login-register .container { width: 100%; } }