html, body {
    margin: 0;
    padding: 0;
}

.container {
    margin: 0 auto;
    max-width: 640px;
}

.pages, .loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.loading {
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.loading .loading-bg {
    width: 400px;
    height: 142px;
}

.loading .loading-bar {
    border-radius: 2px;
    margin: 35px 0 0 0;
    width: 400px;
    height: 4px;

}

.loading .loading-bar .loading-bar-process {
    width: 0;
    border-radius: 2px;
    height: 4px;
    background: #99B6B9;
}

.pages {
    display: none;
}

.pages.current {
    display: block;
}

.pages .bg {
    margin: 0 auto;
    position: absolute;
    transform-origin: 0% 0% 0px;
    transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 0);
}

.player {
    position: absolute;
    width: 120px;
    height: 80px;
    background-color: transparent;
    transform-origin: 0% 0% 0px;
    transform: translate3d(0%, 0%, 0px) matrix(0.5, 0, 0, 0.5, 547, 117);
}

.player-container {
    position: absolute;
    background-color: transparent;
    width: 105px;
    height: 70px;
    transform-origin: 0% 0% 0px;
    transform: translate3d(0%, 0%, 0px) matrix(1.14286, 0, 0, 1.14286, 0, 0);
}

.player svg {
    position: absolute;
    width: 12.3529px;
    height: 47.6471px;
    opacity: 1;
    transform-origin: 50% 50% 0px;
}

.menu {
    position: absolute;
    width: 1px;
    height: 1px;
    background-color: transparent;
    transform-origin: 0% 0% 0px;
    transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 0);
}

.menu img {
    position: absolute;
    transform-origin: 0% 0% 0px;
    animation: opacity 1s linear infinite alternate;
}

.menu .menu-item {
    position: absolute;
    width: 119px;
    height: 59px;
    background-color: transparent;
    cursor: pointer;
    transform-origin: 0% 0% 0px;
}

@keyframes opacity {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.slides {
    position: absolute;
    width: 3200px;
    height: 932px;
    background-color: transparent;
    transform-origin: 0% 0% 0px;
    transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 373);
}

.tips {
    width: 100%;
    position: absolute;
    bottom: 60px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    font-size: 20px;
}

.tips p {
    margin: 0;
    padding: 0;
}

.tips img {
    width: 50px;
    height: auto;
}

.tips img.arrow {
    width: 40px;
    height: 40px;
    animation: opacity 1s linear infinite alternate;
}

.tags {
    position: absolute;
    width: 200px;
    height: 490px;
    background-color: transparent;
    transform-origin: 100% 100% 0;
    bottom: 0;
    right: 0;
    display: none;
}

.tags.active {
    display: block;
}

.tags ul {
    border-radius: 15px;
    list-style: none;
    padding: 0 10px;
}

.tags ul li {
    color: #fff;
    text-align: center;
    font-size: 19px;
    line-height: 50px;
    border-bottom: 1px solid #fff;
}

.tags ul li:first-child {
    padding-top: 5px;
}

.tags ul li:last-child {
    padding-bottom: 5px;
    border-bottom: none;
}

#tags-1 ul {
    background: rgba(160, 125, 99, .7);
}

#tags-2 ul {
    background: rgba(227, 116, 112, .7);
}

#tags-3 ul {
    background: rgba(73, 166, 200, .7);
}

#tags-4 ul {
    background: rgba(47, 127, 56, .7);
}

#tags-5 ul {
    background: rgba(130, 154, 101, .7);
}

#tags-6 ul {
    background: rgba(214, 129, 37, .7);
}

#tags-7 ul {
    background: rgba(61, 93, 151, .7);
}