.login {
    position: fixed;
    width: 80vw;
    max-width: 80vh;
    height: auto;
    padding: 7.50vw 5.25vw;
    border-radius: 1.75vw;
    background: rgba(56, 117, 161, 0.7);
}

.login_header {
    font-size: 4.50vw;
    text-align: center;
    font-weight: 600;
}

.login_content {
    margin-top: 1.75vw;
}

.language {
    width: 100%;
}

.sp_login {
    margin-top: 1.75vw;
}

.sp_login_button {
    width: 70vw;
    max-height: 70vh;
    height: 10.00vw;
    max-height: 10.00vh;
    line-height: 10.00vw;
    margin: 0 auto;
    border-radius: 1.50vw;
    overflow: hidden;
    background-image: linear-gradient(to right, #36abd4, #62dcfb);
}

.sp_login_button:active {
    opacity: 0.7;
}

.sp_login_icon {
    position: absolute;
    left: 23vw;
    width: 4.50vw;
    max-width: 4.50vh;
    height: auto;
}

.sp_login_text {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
}

.agreement {
    margin-top: 1.25vw;
    font-size: 1vw;
    padding-left: 3.5vw;
}

.agreement_button {
    width: 2.9vw;
    max-width: 2.9vh;
    height: 2.9vw;
    max-height: 2.9vh;
    top: 60%;
    position: absolute;
    left: 0;
}

.line_box {
    width: 70vw;
    max-width: 70vh;
    height: 5.25vw;
    max-height: 5.25vh;
    line-height: 5.25vw;
    margin-top: 4.75vw;
}

.line_box>i {
    width: 31.25vw;
    max-width: 31.25vh;
    position: absolute;
    border-top: 1px solid #fff;
}

.left_line {
    left: 0;
}

.right_line {
    right: 0;
}

.line_text {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    font-weight: 600;
}

.channel_login {
    width: 70vw;
    max-width: 70vh;
    height: 17.25vw;
    max-height: 17.25vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.channel_login>div {
    flex: 0 1 auto;
    width: 7.50vw;
    max-width: 7.50vh;
    height: 7.50vw;
    max-height: 7.50vh;
    margin: 6.75vw;
}

.channel_login>div:active {
    opacity: 0.7;
}

.facebook {
    background: url(../../images/h5_sdk/facebook_login.png) no-repeat center center;
    background-size: 100% 100%;
}

.google {
    background: url(../../images/h5_sdk/google_login.png) no-repeat center center;
    background-size: 100% 100%;
}

@media screen and (orientation: landscape) {

    /* 横屏 */
    .login {
        padding: 7.50vh 5.25vh;
        border-radius: 1.75vh;
    }

    .login_header {
        font-size: 4.50vh;
    }

    .login_content {
        margin-top: 1.75vh;
    }

    .sp_login {
        margin-top: 1.75vh;
    }

    .sp_login_button {
        width: 70vh;
        height: 10.00vh;
        line-height: 10.00vh;
        border-radius: 1.50vh;
    }


    .sp_login_icon {
        left: 23vh;
        width: 4.50vh;
    }

    .sp_login_text {
        width: 100%;
        height: 100%;
    }

    .agreement {
        margin-top: 1.25vh;
        font-size: 1vh;
        padding-left: 3.5vh;
    }

    .agreement_button {
        width: 2.9vh;
        height: 2.9vh;
    }

    .line_box {
        width: 70vh;
        height: 5.25vh;
        line-height: 5.25vh;
        margin-top: 4.75vh;
    }

    .line_box>i {
        width: 31.25vh;
    }

    .left_line {
        left: 0;
    }

    .right_line {
        right: 0;
    }

    .channel_login {
        width: 70vh;
        height: 17.25vh;
    }

    .channel_login>div {
        height: 7.50vh;
        margin: 6.75vh;
    }

}