﻿
body {
    background: url("/img/login-bg.jpg") no-repeat bottom left;
    background-size: 100% 100%;
    overflow: hidden;
}

.login_cenc {
    position: fixed;
    right: calc(50% - 400px);
    top: calc(50% - 200px);
    border-radius: 10px;
    width: 400px;
}

    .login_cenc .system-info {
        background: #2b4fed;
        color: #fff;
        padding: 50px;
        position: absolute;
        z-index: -1;
        box-sizing: border-box;
        height: 90%;
        width: 100%;
        left: calc(-100% + 90px);
        top: 5%;
        border-radius: 10px;
    }

        .login_cenc .system-info .system-title {
            font-size: 20px;
            opacity: 0.7;
        }

        .login_cenc .system-info .system-name {
            margin: 0px 0px 20px 0px;
            font-size: 30px;
        }
        .login_cenc .system-info .logo{
            position:absolute;
            left:50px;
            bottom:30px;
        }
            .login_cenc .system-info .logo img{
                width:80px;
            }
            .login_cenc .system-info .logo a {
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .login_cenc .system-info .logo a .iconfont{
                color:#13b600;
                margin-right:5px;
                font-size:20px;
                border-radius:100%;
                display:inline-block;
            }

            .login_cenc .system-form {
                background: rgba(255,255,255,0.5);
                backdrop-filter: blur(20px);
                padding: 30px;
                border-radius: 10px;
            }

        .login_cenc .system-form .tit {
            color: rgba(0,0,0,0.7);
            font-weight: bold;
            font-size: 20px;
            margin-bottom: 30px;
            padding: 20px;
            display: inline-block;
            color: #2b4fed;
        }

        .login_cenc .system-form .loginLine {
            position: relative;
            width: 100%;
        }

            .login_cenc .system-form .loginLine .iconfont {
                position: absolute;
                z-index: 10;
                left: 10px;
                top: 0px;
                line-height: 50px;
                font-size: 22px;
                /*background: linear-gradient(45deg,#3ca1fd,#0d75fc);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;*/
                color: #2b4fed;
            }

    .login_cenc .layui-input {
        background: #f8f8f8;
        color: #333;
        border: 1px solid #ddd;
        border-radius: 5px;
        height: 50px;
        line-height: 50px;
        text-indent: 30px;
        margin-bottom: 20px;
        width: 100%;
    }

        .login_cenc .layui-input::-webkit-input-placeholder {
            color: rgba(0,0,0,0.5);
        }

    .login_cenc .layui-btn {
        /*        background: linear-gradient(45deg,#3ca1fd,#0d75fc);
        border-radius: 10em;*/
        background: #2b4fed;
        line-height: 50px;
        height: 50px;
        margin-top: 30px;
        width: 100%;
        font-size:18px;
    }

.blbg {
    width: 300%;
    height: 500px;
    margin: 0em auto;
    left: -100%;
    overflow: hidden;
    bottom: 0px;
    position: fixed;
}

    .blbg .waves {
        width: 100% !important;
    }

.bg-cicle {
    background: linear-gradient(45deg,#98c3ff,#0d75fc);
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    box-shadow: rgba(0,0,0,0.3) 0 0 10px;
}

    .bg-cicle.top {
        top: -100px;
    }

    .bg-cicle.right {
        right: -100px;
    }

    .bg-cicle.left {
        left: -100px;
    }

    .bg-cicle.bottom {
        bottom: -100px;
    }

    .bg-cicle.large {
        width: 500px;
        height: 500px;
    }

        .bg-cicle.large.top {
            top: -250px;
        }

        .bg-cicle.large.right {
            right: -250px;
        }

        .bg-cicle.large.bottom {
            bottom: -250px;
        }

        .bg-cicle.large.left {
            left: -250px;
        }

    .bg-cicle.small {
        width: 100px;
        height: 100px;
    }

        .bg-cicle.small.top {
            top: -50px;
        }

        .bg-cicle.small.right {
            right: -50px;
        }

        .bg-cicle.small.bottom {
            bottom: -50px;
        }

        .bg-cicle.small.left {
            left: -50px;
        }

.loginbox {
    display: flex;
    flex-flow: row nowrap;
}

    .loginbox .pic {
        /*    background:url("/img/login-pic.png") no-repeat center;*/
        background-size: auto 100%;
        width: 300px;
        height: 200px;
        display: none;
    }

    .loginbox .form {
        width: 100%;
    }

.mob-btn {
    display: none;
}

.pc-btn {
    display: block;
}

@media (max-width:500px) {
    .login_cenc {
        width: 90%;
        position: initial;
        margin: 30% auto 0px auto;
        background: none;
        padding: 0px;
    }

        .login_cenc .tit {
            margin-left: 0px;
            border-radius: 5px;
        }

        .login_cenc .loginbox {
            display: block;
            width: 100%;
        }

            .login_cenc .loginbox .pic {
                display: none;
            }

            .login_cenc .loginbox .form {
                width: 100%;
            }

        .login_cenc .layui-btn {
            box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
            border: none;
        }

    .mob-btn {
        display: block;
    }

    .pc-btn {
        display: none;
    }
}
.login-qr-box{
    position:absolute;
    width:360px;
    overflow:hidden;
    text-align:center;
    left:calc(50% - 180px);
    top:10vh;
}
    .login-qr-box .loginbox {
        border-radius: 10px;
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        box-sizing: border-box;
        background: #fff;
        padding: 30px;
    }
.login-qr-box img {
    max-width: 100%;
}
    .login-qr-box .tit{
        font-size:20px;
        margin-bottom:1.5em;
        /*font-family:FangSong;
        font-weight:bold;*/
    }
    .login-qr-box .tips{
        margin-top:2em;
    }
    .login-qr-box .btn{
        color:#000;
        text-decoration:none;
        margin-top:20px;
        display:flex;
        justify-content:center;
        align-items:center;
        line-height:2em;
    }
        .login-qr-box .btn .iconfont {
            background: #2b4fed;
            width: 2em;
            margin-right: 5px;
            color: #fff;
            font-weight: normal;
            border-radius: 50%;
            text-align: center;
        }
.copyright{
    text-align:center;
    position:absolute;
    left:0px;
    right:0px;
    bottom:1em;
}
.copyright a{
    color:#000;
    text-decoration:none;
}