html, body, .login-content {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    background-color: #f8f8f8;
    font-size: 14px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-flow: column;
}
.login_background {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url(/admin/images/login_bg.png);
    /*background-image: url(/admin/images/login_background.png);*/
}
.login-container {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 18rem;
    padding: 0 2rem;
}
.img {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.img img {
    z-index: 0;
    width: 500px;
}

.login-box {
    display: flex;
    align-items: center;
    text-align: center;
}

.login-form {
    width: 400px;
}

.font-semibold {
    font-weight: 600;
}
.text-6xl {
    font-size: 30px;
    color: #4c7cc3;
}
.flex, .flex-center {
    display: flex;
}
.self-center {
    align-self: center;
}
.justify-center {
    justify-content: center;
}
.p-12 {
    padding: 40px;
}
.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.rounded-3xl {
    border-radius: 1.5rem;
    border: 1px solid #f0f0f0;
}
.w-96 {
    width: 384px;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.login-content-form {
    margin-top: 20px;
}
.login-content-form .login-msg {
    color: #a8abb2;
}
.login-content-form .login-animation4 {
    opacity: 0;
    animation-name: error-num;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-delay: .4s;
}
.login-content-form input {
    height: 40px;
}
.mt30 {
    margin-top: 30px!important;
}
.font12 {
    font-size: 12px!important;
}
@keyframes error-num {
    0% {
        transform: translateY(60px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

.login-header {
    margin-bottom: 20px;
}
.login-header .logo {
    display: flex;
    align-items: center;
}

.login-header .logo img {
    width: 137px;
    height: 49px;
    vertical-align: bottom;
    margin-right: 10px;
}
.login-header .logo label {
    font-size: 24px;
}

.ver_img {
    filter: grayscale(100%);
    border-radius: 4px;filter: grayscale(100%);
    height: 40px;
    cursor: pointer;
}

.btn-primary{
    background-color: #4c7cc3 !important;
    /*border-color:#4c7cc3 !important;*/
}

@media screen and (min-width: 769px) {
    ::-webkit-scrollbar {
        width: 7px;
        height: 7px;
    }
}

@media screen and (min-width: 769px) {
    ::-webkit-scrollbar-thumb {
        background-color: #9093994d;
        background-clip: padding-box;
        min-height: 28px;
        border-radius: 5px;
        -webkit-transition: .3s background-color;
        transition: .3s background-color;
    }
}
@media screen and (min-width: 769px) {
    ::-webkit-scrollbar-track-piece {
        background-color: #f8f8f8;;
    }
}
@media screen and (max-width: 968px) {
    .login-container {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 1180px) {
    .login-container {
        grid-gap: 4rem;
    }
}
@media screen and (max-width: 968px) {
    .img {
        display: none;
    }
}

@media screen and (max-width: 968px) {
    .login-box {
        justify-content: center;
    }
}
@media screen and (max-width: 1180px) {
    .login-form {
        width: 400px;
    }
}