body, html {
    height: 100%
}

.layui-layout-body {
    overflow: auto
}

#user-login, .layadmin-user-display-show {
    display: block !important
}

.layadmin-user-login {
    padding: 20px 0 50px 0;
}

.layadmin-user-login-main {
    width: 375px;
    margin: auto;
    box-sizing: border-box;
    margin-top: 160px
}

.layadmin-user-login-box {
    padding: 0px 20px;
}

.layadmin-user-login-header {
    text-align: center
}

    .layadmin-user-login-header h2 {
        margin-bottom: 10px;
        font-weight: 300;
        font-size: 30px;
        color: #000
    }

    .layadmin-user-login-header p {
        font-weight: 300;
        color: #999
    }

.layadmin-user-login-body .layui-form-item {
    position: relative
}

.layadmin-user-login-icon {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 38px;
    line-height: 36px;
    text-align: center;
    color: #d2d2d2
}

.layadmin-user-login-body .layui-form-item .layui-input {
    padding-left: 38px
}

.layadmin-user-login-codeimg {
    max-height: 38px;
    width: 100%;
    cursor: pointer;
    box-sizing: border-box
}

.layadmin-user-login-other {
    position: relative;
    font-size: 0;
    line-height: 38px;
}

    .layadmin-user-login-other > * {
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
        font-size: 14px
    }

    .layadmin-user-login-other .layui-icon {
        position: relative;
        top: 2px;
        font-size: 26px
    }

    .layadmin-user-login-other a:hover {
        opacity: .8
    }

.layadmin-user-jump-change {
    float: right
}

.layadmin-user-login-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 30px;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
    color: rgba(0,0,0,.5)
}

    .layadmin-user-login-footer span {
        padding: 0 5px
    }

    .layadmin-user-login-footer a {
        padding: 0 5px;
        color: rgba(0,0,0,.5)
    }

        .layadmin-user-login-footer a:hover {
            color: rgba(0,0,0,1)
        }

.layadmin-user-login-main[bgimg] {
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,.05)
}

.ladmin-user-login-theme {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center
}

    .ladmin-user-login-theme ul {
        display: inline-block;
        padding: 5px;
        background-color: #fff
    }

        .ladmin-user-login-theme ul li {
            display: inline-block;
            vertical-align: top;
            width: 64px;
            height: 43px;
            cursor: pointer;
            transition: all .3s;
            -webkit-transition: all .3s;
            background-color: #f2f2f2
        }

            .ladmin-user-login-theme ul li:hover {
                opacity: .9
            }

.layadmin-user-login-header .title {
    height: 60px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(res/logo-max.png)
}

.aminui {
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-flow: column;
}

.login_background {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url(res/login_background.png);
}

.login_background_front {
    width: 450px;
    height: 450px;
    margin-left: 100px;
    margin-top: 15%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url(res/login_background_front.png);
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

.login_main {
    flex: 1;
    overflow: auto;
    display: flex;
}

.login-form {
    top: 20%;
    right: 15%;
    position: absolute;
    width: 450px;
    margin-left: 10%;
    padding: 10px 0;
}

.ant-card-bordered {
    border: 1px solid var(--border-color-split);
}

.ant-card {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: var(--text-color);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum";
    position: relative;
    background: var(--component-background);
    border-radius: 5px;
}

.ant-card-body {
    padding: 24px;
}

@media (max-width: 1200px) {
    .login-form {
        width: 340px;
    }
}

@media (max-width: 1000px) {
    .login_main {
        display: block;
    }

    .login_background_front {
        display: none
    }

    .login-form {
        width: 84%;
        padding: 20px 30px;
        right: 0 !important;
        top: 15% !important;
    }
}

:root {
        --blue-1: #e6f7ff;
        --blue-2: #bae7ff;
        --blue-3: #91d5ff;
        --blue-4: #69c0ff;
        --blue-5: #40a9ff;
        --blue-6: #1890ff;
        --blue-7: #096dd9;
        --blue-8: #0050b3;
        --blue-9: #003a8c;
        --blue-10: #002766;
        --green-1: #f6ffed;
        --green-2: #d9f7be;
        --green-3: #b7eb8f;
        --green-4: #95de64;
        --green-5: #73d13d;
        --green-6: #52c41a;
        --green-7: #389e0d;
        --green-8: #237804;
        --green-9: #135200;
        --green-10: #092b00;
        --red-1: #fff1f0;
        --red-2: #ffccc7;
        --red-3: #ffa39e;
        --red-4: #ff7875;
        --red-5: #ff4d4f;
        --red-6: #f5222d;
        --red-7: #cf1322;
        --red-8: #a8071a;
        --red-9: #820014;
        --red-10: #5c0011;
        --gold-1: #fffbe6;
        --gold-2: #fff1b8;
        --gold-3: #ffe58f;
        --gold-4: #ffd666;
        --gold-5: #ffc53d;
        --gold-6: #faad14;
        --gold-7: #d48806;
        --gold-8: #ad6800;
        --gold-9: #874d00;
        --gold-10: #613400;
        --purple-1: #f9f0ff;
        --purple-2: #efdbff;
        --purple-3: #d3adf7;
        --purple-4: #b37feb;
        --purple-5: #9254de;
        --purple-6: #722ed1;
        --purple-7: #531dab;
        --purple-8: #391085;
        --purple-9: #22075e;
        --purple-10: #120338;
        --cyan-1: #e6fffb;
        --cyan-2: #b5f5ec;
        --cyan-3: #87e8de;
        --cyan-4: #5cdbd3;
        --cyan-5: #36cfc9;
        --cyan-6: #13c2c2;
        --cyan-7: #08979c;
        --cyan-8: #006d75;
        --cyan-9: #00474f;
        --cyan-10: #002329;
        --pink-1: #fff0f6;
        --pink-2: #ffd6e7;
        --pink-3: #ffadd2;
        --pink-4: #ff85c0;
        --pink-5: #f759ab;
        --pink-6: #eb2f96;
        --pink-7: #c41d7f;
        --pink-8: #9e1068;
        --pink-9: #780650;
        --pink-10: #520339;
        --orange-1: #fff7e6;
        --orange-2: #ffe7ba;
        --orange-3: #ffd591;
        --orange-4: #ffc069;
        --orange-5: #ffa940;
        --orange-6: #fa8c16;
        --orange-7: #d46b08;
        --orange-8: #ad4e00;
        --orange-9: #873800;
        --orange-10: #612500;
        --primary-1: var(--blue-1);
        --primary-2: var(--blue-2);
        --primary-3: var(--blue-3);
        --primary-4: var(--blue-4);
        --primary-5: var(--blue-5);
        --primary-6: var(--blue-6);
        --primary-7: var(--blue-7);
        --primary-8: var(--blue-8);
        --primary-9: var(--blue-9);
        --primary-10: var(--blue-10);
        --primary-color: var(--primary-6);
        --primary-color-hover: var(--primary-5);
        --primary-color-active: var(--primary-7);
        --primary-color-outline: var(--primary-2);
        --info-color: var(--primary-color);
        --success-color: var(--green-6);
        --processing-color: var(--blue-6);
        --highlight-color: var(--red-5);
        --warning-color: var(--gold-6);
        --warning-color-hover: var(--gold-5);
        --warning-color-active: var(--gold-7);
        --warning-color-outline: var(--gold-2);
        --error-color: var(--red-5);
        --error-color-hover: var(--red-4);
        --error-color-active: var(--red-7);
        --error-color-outline: var(--red-2);
        --body-background: #fff;
        --component-background: #fff;
        --popover-background: var(--component-background);
        --popover-customize-border-color: var(--border-color-split);
        --text-color: rgba(0, 0, 0, .65);
        --text-color-secondary: rgba(0, 0, 0, .45);
        --text-color-inverse: #fff;
        --icon-color-hover: rgba(0, 0, 0, .75);
        --heading-color: rgba(0, 0, 0, .65);
        --item-hover-bg: #f5f5f5;
        --border-color-base: #d9d9d9;
        --border-color-split: #f0f0f0;
        --background-color-light: #fafafa;
        --background-color-base: #f5f5f5;
        --disabled-color: rgba(0, 0, 0, .25);
        --disabled-bg: var(--background-color-base);
        --disabled-color-dark: rgba(255, 255, 255, .35);
        --shadow-color: rgba(0, 0, 0, .15);
        --shadow-color-inverse: var(--component-background);
        --box-shadow-base: var(--shadow-1-down);
        --shadow-1-up: 0 -2px 8px var(--shadow-color);
        --shadow-1-down: 0 2px 8px var(--shadow-color);
        --shadow-1-left: -2px 0 8px var(--shadow-color);
        --shadow-1-right: 2px 0 8px var(--shadow-color);
        --shadow-2: 0 4px 12px var(--shadow-color);
        --btn-shadow: 0 2px 0 rgba(235, 18, 18, .015);
        --btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, .045);
        --btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
        --btn-default-bg: var(--component-background);
        --btn-default-ghost-color: var(--component-background);
        --btn-default-ghost-border: var(--component-background);
        --btn-text-hover-bg: rgba(0, 0, 0, .018);
        --btn-text-active-bg: rgba(0, 0, 0, .028);
        --checkbox-check-bg: #fff;
        --descriptions-bg: #fafafa;
        --divider-color: rgba(0, 0, 0, .06);
        --dropdown-menu-submenu-disabled-bg: var(--component-background);
        --radio-dot-disabled-color: rgba(0, 0, 0, .2);
        --radio-solid-checked-color: var(--component-background);
        --radio-disabled-button-checked-bg: coverTintMixin(#000, 90%);
        --radio-disabled-button-checked-color: rgba(0, 0, 0, .25);
        --layout-body-background: #f0f2f5;
        --layout-header-background: #001529;
        --layout-trigger-background: #002140;
        --dropdown-menu-bg: var(--component-background);
        --input-placeholder-color: #bfbfbf;
        --input-icon-color: var(--text-color);
        --input-bg: var(--component-background);
        --input-number-handler-active-bg: #f4f4f4;
        --input-icon-hover-color: rgba(0, 0, 0, .85);
        --mentions-dropdown-bg: var(--component-background);
        --select-dropdown-bg: var(--component-background);
        --select-background: var(--component-background);
        --select-clear-background: var(--select-background);
        --select-selection-item-bg: var(--background-color-base);
        --select-selection-item-border-color: var(--border-color-split);
        --select-multiple-disabled-background: var(--disabled-bg);
        --select-multiple-item-disabled-color: #bfbfbf;
        --select-multiple-item-disabled-border-color: var(--border-color-base);
        --cascader-bg: var(--component-background);
        --cascader-menu-bg: var(--component-background);
        --cascader-menu-border-color-split: var(--border-color-split);
        --tooltip-bg: rgba(0, 0, 0, .75);
        --popover-bg: var(--component-background);
        --modal-header-bg: var(--component-background);
        --modal-header-border-color-split: var(--border-color-split);
        --modal-content-bg: var(--component-background);
        --modal-footer-border-color-split: var(--border-color-split);
        --progress-steps-item-bg: #f3f3f3;
        --menu-popup-bg: var(--component-background);
        --menu-dark-bg: var(--layout-header-background);
        --menu-dark-inline-submenu-bg: #000c17;
        --table-header-bg: var(--background-color-light);
        --table-header-sort-bg: var(--background-color-base);
        --table-body-sort-bg: #fafafa;
        --table-row-hover-bg: var(--background-color-light);
        --table-expanded-row-bg: #fbfbfb;
        --table-header-cell-split-color: rgba(0, 0, 0, .06);
        --table-header-sort-active-bg: rgba(0, 0, 0, .04);
        --table-header-filter-active-bg: rgba(0, 0, 0, .04);
        --table-filter-btns-bg: inherit;
        --table-filter-dropdown-bg: var(--component-background);
        --table-expand-icon-bg: var(--component-background);
        --picker-bg: var(--component-background);
        --picker-basic-cell-disabled-bg: var(--disabled-bg);
        --picker-border-color: var(--border-color-split);
        --calendar-bg: var(--component-background);
        --calendar-input-bg: var(--input-bg);
        --calendar-border-color: #fff;
        --calendar-full-bg: var(--calendar-bg);
        --badge-text-color: var(--component-background);
        --rate-star-bg: var(--border-color-split);
        --card-actions-background: var(--component-background);
        --card-skeleton-bg: #cfd8dc;
        --card-shadow: 0 1px 2px -2px rgba(0, 0, 0, .16), 0 3px 6px 0 rgba(0, 0, 0, .12), 0 5px 12px 4px rgba(0, 0, 0, .09);
        --comment-bg: inherit;
        --comment-author-time-color: #ccc;
        --comment-action-hover-color: #595959;
        --back-top-bg: var(--text-color-secondary);
        --back-top-hover-bg: var(--text-color);
        --avatar-bg: #ccc;
        --switch-bg: var(--component-background);
        --pagination-item-bg: var(--component-background);
        --pagination-item-bg-active: var(--component-background);
        --pagination-item-link-bg: var(--component-background);
        --pagination-item-disabled-color-active: #fff;
        --pagination-item-disabled-bg-active: #dbdbdb;
        --pagination-item-input-bg: var(--component-background);
        --page-header-back-color: #000;
        --page-header-ghost-bg: inherit;
        --slider-rail-background-color: var(--background-color-base);
        --slider-rail-background-color-hover: #e1e1e1;
        --slider-dot-border-color: var(--border-color-split);
        --slider-dot-border-color-active: var(--primary-4);
        --tree-bg: var(--component-background);
        --skeleton-to-color: coverShadeMixin(rgba(190, 190, 190, .2), 5%);
        --transfer-item-hover-bg: var(--item-hover-bg);
        --message-notice-content-bg: var(--component-background);
        --list-customize-card-bg: var(--component-background);
        --drawer-bg: var(--component-background);
        --timeline-color: var(--border-color-split);
        --timeline-dot-color: var(--primary-color);
        --image-preview-operation-disabled-color: rgba(255, 255, 255, .45);
        --steps-nav-arrow-color: rgba(0, 0, 0, .25);
        --steps-background: var(--component-background);
        --notification-bg: var(--component-background);
        --sidebar-light-shadow: 1px 3px 3px rgba(0, 21, 41, .08);
        --sidebar-dark-shadow: 0 4px 4px rgba(0, 0, 0, .35);
        --header-light-shadow: 0 1px 4px rgba(0, 21, 41, .08);
        --header-dark-shadow: 0 1px 4px rgba(0, 0, 0, .1);
        --header-tool-hover-bg: rgba(0, 0, 0, .025);
        --header-dark-tool-hover-bg: rgba(255, 255, 255, .05);
        --header-color-split: rgba(0, 0, 0, .08);
        --logo-light-shadow: 1px 2px 3px rgba(0, 21, 41, .08);
        --logo-dark-shadow: 0 3px 4px rgba(0, 0, 0, .35);
        --gradient-min: rgba(207, 216, 220, .2);
        --gradient-max: rgba(207, 216, 220, .4);
        --success-fade-20: rgba(82, 196, 26, .2);
        --error-fade-20: rgba(255, 77, 79, .2);
        --warning-fade-20: rgba(250, 173, 20, .2);
        --primary-fade-20: var(--primary-2);
        --white--fade--65: rgba(255, 255, 255, .65);
        --menu-dark-highlight-color: #fff;
        --btn-primary-color: #fff;
        --tooltip-color: #fff;
        --node-wrap-box-color: #ffffff;
        --node-wrap-box-before-color: #FFFFFF;
        --node-wrap-box-before-borde-color: #cacaca;
        --auto-judge-before-color: var(--component-background)
    }


#app {
    height: 100%;
}

html, body, #app {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
/* ===== PC DESIGN ===== */
.container {
    width: inherit;
    height: inherit;
    max-width: 100% !important;
    background-color: #f0f2f5;
    background-image: url(res/login_bg.png);
    background-size: cover;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
}

    .container .content {
        width: 52vw;
        height: 29.12vw;
        background-color: #ffffff;
        -webkit-box-shadow: 0px 16px 40px rgba(0, 0, 0, 0.07);
        box-shadow: 0px 16px 40px rgba(0, 0, 0, 0.07);
        border-radius: 20px;
        position: relative;
    }

        .container .content .pic {
            width: 23vw;
            height: inherit;
            background-image: url(res/pic.login.png);
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 20px 0 0 20px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .container .content .field {
            width: 29vw;
            height: inherit;
            position: absolute;
            top: 0;
            left: 23vw;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }
.login-box {
    width: 360px;
    height: 200px;
}
.container .footer {
    height: 16px;
    line-height: 16px;
    font-size: 12px;
    color: #8c8c8c;
    position: absolute;
    bottom: 30px;
}

    .container .footer a,
    .container .footer a:hover,
    .container .footer a:active {
        color: inherit;
        text-decoration: none;
    }

@media screen and (min-width: 599px) and (max-width: 1366px) {
    .container .content {
        width: 710px;
        height: 427px;
    }

        .container .content .pic {
            width: 314px;
        }

        .container .content .field {
            width: calc(710px - 314px);
            left: 314px;
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
        }
}
/* ===== MOBILE DESIGN ===== */
@media screen and (max-width: 599px) {
    .login-box {
        width: 300px;
    }

    .container {
        background-image: url(res/bg-mobile.png);
        min-width: 280px;
        min-height: 568px;
        font-family: PingFang SC;
    }

        .container .content {
            width: 87vw;
            height: 87vw;
            min-width: 250px;
            min-height: 340px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }

            .container .content .pic {
                display: none;
            }

            .container .content .field {
                width: inherit;
                min-height: inherit;
                left: 0;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
            }

        .container .footer {
            font-family: PingFang SC;
            line-height: 17px;
            color: #333333;
            opacity: 0.6;
            position: absolute;
            bottom: 20px;
        }
}

.layui-btns {
    display: inline-block;
    vertical-align: middle;
    height: 38px;
    line-height: 38px;
    border: 1px solid transparent;
    padding: 0 18px;
    background-color: #16baaa;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    border-radius: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.layui-btn-primary {
    border-color: #d2d2d2;
    background: 0 0;
    color: #5f5f5f;
}