@media(min-width: 1281px) {
    html {
        font-size: 24px
    }
}

@media(min-width: 751px) {
    html {
        font-size: 20px
    }
}

@media(min-width: 415px)and (max-width: 750px) {
    html {
        font-size: 18px
    }
}

@media(max-width: 414px) {
    html {
        font-size: 14px
    }
}

@keyframes scale {
    0% {
        transform: scale(0.9)
    }
    50% {
        transform: scale(1)
    }
    100% {
        transform: scale(0.9)
    }
}

* {
    user-select: none
}

html {
    margin: 0;
    padding: 0
}

body {
    max-width: 750px;
    margin: 0 auto;
    padding: 0;
    background-color: #9c0808
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: .714rem 1rem;
    background: linear-gradient(to right, rgb(255, 0, 0), rgb(255, 217, 0))
}

header .logo {
    width: 3.857rem;
    height: 3.857rem;
    overflow: hidden
}

header .logo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

header .button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-radius: .429rem
}

header .button img {
    width: 8.571rem;
    height: 2.857rem
}

header .button span {
    color: #fff;
    font-weight: bold;
    font-size: 1.143rem;
    line-height: 1.143rem
}

header .button span:first-child {
    font-size: .571rem;
    font-weight: 500;
    line-height: .571rem;
    margin-bottom: .143rem
}

main {
    background-color: #6c0505;
    overflow: hidden;
    background: url(../image/bg.webp) no-repeat center center;
    background-size: cover
}

main .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start
}

main .main .icon {
    width: 20rem;
    margin-top: 6.429rem;
    animation: scale 2s infinite;
    filter: drop-shadow(0.286rem 0.571rem 0.286rem rgba(0, 0, 0, 0.767))
}

main .main .icon img {
    width: 100%
}

main .main .vod {
    box-sizing: border-box;
    padding: 0 1rem;
    margin-top: 1.714rem;
    width: 100%;
    height: 15.286rem
}

main .main .vod .video-js {
    width: 100%;
    height: 100%;
    border-radius: .714rem;
    box-shadow: #fb0 0 0 .286rem;
    overflow: hidden
}

main .main .button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fb0;
    padding: .714rem 2.143rem;
    margin-top: 3.214rem;
    border-radius: .714rem;
    box-shadow: #664b00 0 .286rem 0
}

main .main .button span {
    color: #fff;
    font-weight: bold;
    font-size: 1.571rem;
    line-height: 1.571rem;
    letter-spacing: .02rem
}

main .main .button span:last-child {
    margin-top: .286rem;
    font-size: .714rem;
    line-height: .714rem;
    font-weight: 500;
    letter-spacing: 0
}

main .main p {
    margin: 1rem 0 1rem;
    font-size: 1rem;
    color: #fb0;
    text-align: center
}

main .game {
    position: relative;
    width: 100%
}

main .game .rotate {
    transform-origin: 100% 100%;
    transform: perspective(57.143rem) rotate3d(0, 1, 0, -23deg) scaleX(1.2)
}

main .game .rotate .games {
    padding: 0 1rem
}

main .game .rotate .games .line {
    display: flex;
    align-items: center;
    justify-content: center
}

main .game .rotate .games .item {
    width: 5.714rem;
    height: 5.714rem;
    margin: 0 .643rem .643rem;
    filter: drop-shadow(0.143rem 0.286rem 0.286rem rgba(0, 0, 0, 0.5));
    border-radius: .429rem;
    overflow: hidden
}

main .game .rotate .games .item img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

main .game .rotate .screen {
    margin-top: 1.714rem;
    padding: 0 1rem;
    filter: drop-shadow(0.143rem 0.286rem 0.286rem rgba(0, 0, 0, 0.5))
}

main .game .rotate .screen .swiper {
    box-sizing: border-box;
    border-radius: 1rem;
    overflow: hidden;
    border: .286rem solid #fb0
}

main .game .rotate .screen .swiper .swiper-slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

main .game .rotate .screen .swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

main .game .renwu {
    position: absolute;
    left: -3.5rem;
    bottom: .23rem;
    width: 14.571rem;
    height: 32.143rem;
    filter: drop-shadow(0.143rem 0.286rem 0.286rem rgba(0, 0, 0, 0.5))
}

main .game .renwu img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

main .comment {
    padding: 4.286rem 1.714rem 2.857rem
}

main .comment .title {
    color: #ffc933;
    font-size: 1.286rem;
    line-height: 1.286rem;
    font-weight: bold;
    text-align: center;
    text-shadow: #fb0 0 0 .286rem;
    -webkit-text-stroke: 1px #fb0
}

main .comment .item {
    box-sizing: border-box;
    padding: 1rem 1rem 1.143rem;
    margin-bottom: 1.286rem;
    background-color: #2c0202;
    border-radius: .571rem;
    box-shadow: rgba(255, 81, 0, .7176470588) 0 0 .286rem
}

main .comment .item:last-child {
    margin-bottom: 0
}

main .comment .item .avatar {
    display: flex;
    align-items: center
}

main .comment .item .avatar img {
    display: block;
    width: 2.571rem;
    height: 2.571rem;
    margin-right: 1rem;
    border-radius: 50%;
    background-color: #3b0303;
    overflow: hidden;
    object-fit: cover
}

main .comment .item .avatar span {
    color: #fff;
    font-weight: bold;
    font-size: 1.286rem
}

main .comment .item .content p {
    margin: .714rem 0 0;
    color: #afafaf;
    font-size: .857rem
}

main .comment .item .content p span {
    color: #fb0;
    font-weight: bold
}

main .comment .button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fb0;
    padding: .714rem 2.143rem;
    margin-top: 3.214rem;
    border-radius: .714rem;
    box-shadow: #664b00 0 .286rem 0
}

main .comment .button span {
    color: #fff;
    font-weight: bold;
    font-size: 1.571rem;
    line-height: 1.571rem;
    letter-spacing: .02rem
}

main .comment .button span:last-child {
    margin-top: .286rem;
    font-size: .714rem;
    line-height: .714rem;
    font-weight: 500;
    letter-spacing: 0
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2.143rem 0 6.571rem;
    background-color: #3b0303
}

footer .logo {
    width: 14.286rem;
    overflow: hidden
}

footer .logo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

footer .links {
    margin-top: 2rem
}

footer .links ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0
}

footer .links ul li {
    margin: 0 0 .571rem;
    padding: 0 .714rem
}

footer .links ul li a {
    color: #afafaf;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1rem
}

footer .social {
    margin-top: 1.857rem
}

footer .social a {
    display: flex;
    align-items: center;
    padding: .571rem .857rem;
    background-color: #25a3e2;
    border-radius: .429rem;
    text-decoration: none;
    color: #fff
}

footer .social a i {
    margin-right: .286rem;
    transform: translateY(0.071rem)
}

footer .social a span {
    transform: translateY(-0.071rem)
}

footer .notice {
    margin: 1.857rem 1rem 0;
    color: #7c7c7c;
    font-size: .857rem;
    line-height: 1.1rem;
    text-align: center
}

footer .copyright {
    box-sizing: border-box;
    margin-top: 1.857rem;
    padding: 0 1rem;
    width: 100%;
    color: #afafaf;
    font-size: 1rem;
    line-height: 1rem;
    text-align: center
}

footer .copyright p {
    margin: 0;
    padding: 1.429rem 0 0;
    border-top: .071rem solid #7c7c7c
}

.float {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    height: 5.143rem;
    padding: .714rem 1rem;
    background: linear-gradient(to right, rgb(255, 0, 0), rgb(255, 217, 0));
    border-start-end-radius: 1rem;
    border-start-start-radius: 1rem
}

.float .logo {
    width: 3.857rem;
    height: 3.857rem;
    overflow: hidden
}

.float .logo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.float .name {
    flex-grow: 1;
    margin-left: 1rem
}

.float .name h1 {
    color: #fff;
    font-size: 1.286rem
}

.float .button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-radius: .429rem;
    animation: scale 1s infinite
}

.float .button img {
    width: 8.571rem;
    height: 2.857rem
}

.float .button span {
    color: #fb0;
    font-weight: bold;
    font-size: 1.286rem;
    line-height: 1.286rem;
    letter-spacing: .02rem
}

.float .button span {
    color: #fff;
    font-weight: bold;
    font-size: 1.143rem;
    line-height: 1.143rem
}

.float .button span:first-child {
    font-size: .571rem;
    font-weight: 500;
    line-height: .571rem;
    margin-bottom: .143rem
}

/*# sourceMappingURL=index.min.css.map */