@media only screen and (max-width: 991px) {
    .container {
        width: 100%;
        margin: 0 auto;
        padding: 0 20px;
    }

    .intro-box {
        width: 100%;
        margin-top: 200px;
    }
    .intro-box h1 {
        font-size: 48px;
    }
    .intro-box .button {
        width: auto;
        margin: 10px;
        padding: 15px 50px;
        font-size: 18px;
        font-weight: bold;
        text-decoration: none;
        color: white;
        background: rgba(226,0,87,1);
        border-radius: 100px;
        transition: background .3s, box-shadow .3s;
    }
    .menu-pre {
        float: left;
        margin-right: 50px;
    }
    .menu-pre img {
        height: 500px;
        outline: 1px solid red;
    }

    .shorts {
        color: white;
        text-align: center;
        background-color: rgba(75,75,75,1);
    }
    .short {
        display: inline-block;
        margin: 30px 0;
        padding: 0 50px;
        box-sizing: border-box;
    }
    .short p {
        margin: 0;
    }
    .short-middle {
        display: inline-block;
        width: 1px;
        height: 60px;
        background: white;
    }
    .short-title {
        font-size: 36px;
    }
    .short-title .online {
        color: red;
    }
    .short-title .offline {
        color: grey;
    }
    .short-title .server {
        color: rgba(68,123,145,1);
    }
    .short-title .version {
        color: rgba(239,204,75,1);
    }
    .short-text {
        font-size: 20px;
    }

    .login-btn {
        position: fixed;
        top: 20px;
        right: 40px;
        font-size: 30px;
        color: rgba(255,255,255,.5);
        z-index: 5;
        transition: color 1s;
    }
    #login {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 4;
    }
    .login {
        width: 100%;
        height: 100%;
    }
    .login-header {
        width: 100%;
        height: 70px;
        line-height: 70px;
        text-align: center;
        font-size: 24px;
        color: white;
        background: rgba(41,128,201,1);
        box-sizing: border-box;
    }
    .logout {
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 6;
    }
    .logout button {
        height: 40px;
        padding: 0 10px;
        margin: 3px 0;
        font-size: 18px;
        color: white;
        background: rgba(226,0,87,1);
        border: none;
        border-radius: 3px;
        box-sizing: border-box;
        cursor: pointer;
    }
    .login-body {
        vertical-align: top;
        width: 100%;
        height: 100%;
        font-size: 18px;
        box-sizing: border-box;
    }
    .login-body-floor {
        display: block;
        padding: 20px;
        box-sizing: border-box;
    }
    .login-body button {
        height: 40px;
        padding: 0 10px;
        margin: 3px 0;
        font-size: 18px;
        border: none;
        border-radius: 3px;
        box-sizing: border-box;
        cursor: pointer;
    }
    .footer-items {
        width: 90%;
        margin: 0 auto;
        color: white;
    }
}