/*--------------------页面背景开始-----------------------*/
html, body, form {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #f9f9f9;
}

.wrapper {
    height: 50%;
    background: #128031;
}
/*--------------------页面背景结束-----------------------*/

/*--------------------头部开始-----------------------*/
.sys-name {
    margin: 8% 0 0 0;
    color: #FFF;
}

    .sys-name h1 {
        font-size: 3em;
        font-weight: bold;
    }
/*--------------------头部结束-----------------------*/

/*--------------------主体部分开始-----------------------*/
.sys-container {
    width: 45%;
    -moz-box-shadow: 0px 0px 5px #b2b2b2;
    -webkit-box-shadow: 0px 0px 5px #b2b2b2;
    box-shadow: 0px 0px 5px #b2b2b2;
    margin: 2% auto 0 auto;
    padding: 3em;
    background: #FFF;
    border-radius: 15px;
}

.banner {
    background: #f5f5f5;
    border-radius: 15px;
    padding: 2em;
}

    .banner img {
        width: 100%;
    }

.login {
    padding: 2% 8% 0 8%;
}

.welcome {
    color: #128031;
}

.v-code {
    padding: 3px;
}

    .v-code img {
        width: 100px;
        height: 26px;
    }

.app-download {
    margin: 0.8em 0 0 0;
}

    .app-download a {
        color: #333333;
    }

        .app-download a:hover {
            color: #333333;
            text-decoration: none;
        }

.qrcode {
    width: 180px;
    height: 180px;
    padding: 5px;
}

.copyright {
    position: absolute;
    width: 100%;
    bottom: 0;
}
/*--------------------主体部分结束-----------------------*/

/*--------------------响应样式开始-----------------------*/
@media screen and (max-width: 1600px) {
    .sys-container {
        width: 50%;
        padding: 1em;
    }

    .sys-name {
        margin: 6% 0 0 0;
    }

    .welcome {
        padding: 0 0 2% 0;
    }
}

@media screen and (max-width: 1200px) {
    .sys-container {
        width: 70%;
        padding: 1em;
    }

    .sys-name {
        margin: 8% 0 0 0;
    }

    .welcome {
        padding: 0 0 10% 0;
    }
}

@media screen and (max-width: 992px) {
    .sys-container {
        width: 50%;
    }
}

@media screen and (max-width: 768px) {
    .sys-container {
        width: 68%;
    }
}

@media screen and (max-width: 480px) {
    .sys-container {
        width: 98%;
    }

    .sys-name {
        margin: 20% 0 0 0;
    }

        .sys-name h1 {
            font-size: 2.3em;
            font-weight: bold;
        }

        .sys-name h6 {
            font-size: 0.6em;
        }
}

@media screen and (max-height: 620px) {
    .copyright {
        display: none;
    }
}
/*--------------------响应样式结束-----------------------*/