@charset "utf-8";

/**  =================== 登录的样式 ===================  **/
body, a, dl, dt, dd, li, img, button { cursor: url("../images/cursor.cur"), auto !important; }
body {
    min-height: 100vh;
    overflow-x: hidden;
    background: #f5f7fb;
}
body::before { display: none; }
.login-shell { position: relative; z-index: 2; display: flex; min-height: 100vh; box-sizing: border-box; }
.login-visual { position: relative; flex: 0 0 520px; min-height: 100vh; overflow: hidden; color: #ffffff; background: #0b67a8 url(../images/jtl_login_building.jpg) no-repeat center top; background-size: cover; text-shadow: 0 2px 8px rgba(8, 38, 72, .35); }
.login-visual::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(6, 55, 101, .12), rgba(6, 31, 66, .42)); content: ""; }
.login-visual-content { position: absolute; top: 78px; right: 46px; left: 46px; z-index: 1; }
.login-visual-mark { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 4px; font-size: 14px; font-weight: 700; letter-spacing: 1px; }
.login-visual h1 { margin: 24px 0 14px; font-size: 34px; line-height: 1.28; font-weight: 700; letter-spacing: 0; }
.login-visual p { margin: 0; max-width: 420px; font-size: 16px; line-height: 1.8; color: rgba(255, 255, 255, .92); }
.login-panel { position: relative; display: flex; flex: 1 1 auto; align-items: center; justify-content: center; min-width: 0; min-height: 100vh; padding: 64px 6vw 88px; background: #f7f9fc; box-sizing: border-box; }
.login-wrapper { position: relative; z-index: 2; flex: 0 0 420px; margin: 0; padding: 0; max-width: 420px; box-sizing: border-box; }
.login-wrapper .layui-btn { border-color: currentcolor !important; }
.login-wrapper > .layui-form { padding: 36px 40px 28px; border: 0; border-radius: 12px; background-color: #ffffff; box-shadow: 0 24px 70px rgba(15, 35, 67, .08); box-sizing: border-box; }
.login-brand { margin-bottom: 30px; text-align: center; }
.login-brand img { display: block; width: 118px; max-width: 52%; height: auto; margin: 0 auto 14px; }
.login-brand h2 { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.35; color: #0b64ad; }
.login-brand p { margin: 8px 0 0; color: #172033; font-size: 22px; font-weight: 700; }
.login-wrapper > .layui-form > .layui-form-item { position: relative; margin-bottom: 25px; }
.login-wrapper > .layui-form > .layui-form-item:last-child { margin-bottom: 0; }
.login-wrapper > .layui-form > .layui-form-item > .layui-input { height: 46px; line-height: 46px; border-color: #dde6f0; border-radius: 4px !important; background-color: #f6f9fd; }
.login-wrapper > .layui-form > .layui-form-item > .layui-input:focus { border-color: #0b7ad1 !important; box-shadow: 0 0 0 3px rgba(11, 122, 209, .12); }
.login-wrapper .layui-input-icon-group > .layui-input { padding-left: 46px; }
.login-wrapper .layui-input-icon-group > .layui-icon { position: absolute; top: 0; left: 0; width: 46px; height: 46px; font-size: 20px; text-align: center; color: #6d8dad; line-height: 46px; }
.login-wrapper > .layui-form > .layui-form-item.login-captcha-group { padding-right: 135px; }
.login-wrapper > .layui-form > .layui-form-item.login-captcha-group > .login-captcha { position: absolute; top: 0; right: 0; width: 120px; height: 46px; border: 1px solid #d9e6f2; border-radius: 4px !important; cursor: pointer; box-sizing: border-box; }
.login-wrapper > .layui-form > .layui-form-item > .layui-form-checkbox { margin: 0 !important; padding-left: 25px; }
.login-wrapper > .layui-form > .layui-form-item > .layui-form-checkbox > .layui-icon { width: 15px !important; height: 15px !important; }
.login-wrapper > .layui-form .layui-btn-fluid { height: 48px; line-height: 48px; font-size: 16px; border-radius: 4px !important; box-shadow: 0 10px 22px rgba(11, 122, 209, .22); }
.login-wrapper > .layui-form > .layui-form-item.login-oauth-group > a > .layui-icon { font-size: 26px; }
.login-copyright { position: absolute; right: 0; bottom: 22px; left: 520px; z-index: 3; text-align: center; color: #7b8495; text-shadow: none; }
.layui-btn { border-color: #5fb878; background-color: #5fb878; }
.layui-link { color: #0b7ad1 !important; }
.layui-btn-gloomy { background-color: #444c69; }
.layui-btn-danger { background-color: #f56c6c; }
.layui-btn-default { background-color: #0b7ad1; }
.layui-btn-forbid,
.layui-btn-forbid:hover { cursor: not-allowed; opacity: 0.65; pointer-events: none; }

@media screen and (max-width: 1200px) {
    .login-visual { flex-basis: 430px; }
    .login-copyright { left: 430px; }
}

@media screen and (max-width: 900px) {
    body { overflow: auto; }
    .login-shell { display: block; min-height: 100vh; }
    .login-visual { display: block; min-height: 240px; height: 240px; background-position: center 22%; }
    .login-visual-content { top: 24px; right: 24px; left: 24px; }
    .login-visual h1 { margin: 14px 0 8px; font-size: 25px; }
    .login-visual p { font-size: 14px; line-height: 1.6; }
    .login-panel { min-height: auto; padding: 28px 18px 78px; }
    .login-wrapper { flex: 1 1 auto; width: 100%; max-width: 430px; }
    .login-wrapper > .layui-form { padding: 28px 24px; }
    .login-copyright { position: static; padding: 0 18px 22px; background: #f7f9fc; color: #7b8495; }
}