* {
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
}

#logo {
    position: absolute;
    top: 3vw;
    left: 3vw;
    height: 6.4vw;
    z-index: 999;
}

#header {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100vw;
    max-width: 100%;
    height: 68vw;
    z-index: 999;
}

#header > div:last-child {
    text-align: center;
    position: relative;
    bottom: 10vw;
}

#header > div:last-child > a {
    display: inline-block;
    margin: 0px 5px;
}

#header > div:last-child > a > img {
    width: 5vw;
    height: 5vw;
}

#main {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('../image/cover.jpg?t=87746456646');
    width: 100vw;
    max-width: 100%;
    height: 149.1vw;
}

#player {
    background-color: black;
    width: 65.8vw;
    height: 34.7vw;
    position: absolute;
    top: 74.6vw;
    left: 15.5vw;
    border: 1vw black solid;
}

#play {
    display: block;
    margin: 10vw auto;
}

#footer {
    text-align: center;
    padding: 5vw;
}

.beian, .advice, .beian a {
    color: #696966;
}

.copyright {
    color: white;
}

#android {
    position: absolute;
    top: 50vw;
    left: 30.5vw;
    width: 16.6vw;
}

#ios {
    position: absolute;
    top: 50vw;
    left: 50.97vw;
    width: 16.6vw;
}

@media screen and (orientation: portrait) {
    #android {
        left: 21.4vw;
        width: 25.4vw;
    }

    #ios {
        left: 49.6vw;
        width: 25.4vw;
    }
}

#img-box {
    width: 100%;
    height: 100%;
}

#img-box > img {
    width: 100%;
    height: 100%;
}