body {
    background: red;
}

:root {
    color-scheme: light dark;
    background: red;
    color: black;
}

@media (prefers-color-scheme: dark) {
    :root {
        background: red;
        color: white;
    }
}

.user-btn {
    width: 1.066667rem;
    height: 1.066667rem;
    background-position: -0.133333rem -4.026667rem;
    position: absolute;
    z-index: 10;
    top: 0.5rem;
    left: 0.45rem;
}

.user-hover {
    width: 9.093333rem;
    height: 3.2rem;
    background-color: #222122;
    border-radius: 0.133333rem;
    position: absolute;
    top: 1.4rem;
    display: none;
}

.user-btn:hover .user-hover {
    display: block;
}

.triangle-up {
    width: 0;
    height: 0;
    border-left: 0.25rem solid transparent;
    border-right: 0.25rem solid transparent;
    border-bottom: 0.35rem solid #222122;
    position: absolute;
    top: -0.28rem;
    left: 0.3rem;
}

.user-name {
    height: .9333rem;
    font-size: 0.32rem;
    line-height: .9333rem;
    color: #ffffff;
    border-bottom: 1px solid #6b6b6b;
    padding-left: .7333rem;
    margin-bottom: .2rem;
}

.user-hover a {
    display: block;
    font-size: 0.32rem;
    line-height: .9rem;
    padding-left: .7333rem;
    color: #ffffff;
}

.open-nav {
    width: 1.066667rem;
    height: 1.066667rem;
    background-position: -4.266667rem -2.693333rem;
    position: fixed;
    top: 0.466667rem;
    right: 0.4rem;
    z-index: 200;
}

.slide-nav {
    width: 4.28rem;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    background-color: rgba(34, 33, 34, 0.949);
    z-index: 300;
    display: none;
}

.page-pagination {
    padding: 2rem 0 0 .6667rem;
}

.page-pagination li,
.langauge {
    font-size: 0.533333rem;
    padding: .35rem 0;
    line-height: 0.666667rem;
    color: #ffffff;
}

.page-pagination .active {
    color: #fcd059;
}

.close-nav {
    width: 1.066667rem;
    height: 1.066667rem;
    background-position: -2.933333rem -2.693333rem;
    position: absolute;
    top: 0.466667rem;
    right: 0.4rem;
}

.font {
    width: 2.8rem;
}

.flower2 {
    width: 0.32rem;
    height: 0.306667rem;
    background-position: -5.6rem -3.44rem;
    position: relative;
    top: 0.15rem;
    margin-right: .1333rem;
    opacity: 0;
}

.active .flower2 {
    opacity: 1;
}

.langauge {
    border-top: 0.013333rem solid #6b6b6b;
    padding: 0.6rem 0 0 .6rem;
    margin-top: .6rem;
    position: relative;
}

.langauge .active {
    color: #fcd059;
}

.down-icon {
    width: 0.28rem;
    height: 0.16rem;
    background-position: -4.053333rem -4.026667rem;
    margin-right: .1333rem;
}

.hover-fade {
    position: absolute;
    left: 0;
    top: 2rem;
    display: none;
}

.langauge:hover .hover-fade {
    display: block;
}

.hover-fade a {
    display: block;
    padding: 0.25rem 0 0.25rem 1.24rem;
    font-size: 0.533333rem;
    /* line-height: 50px; */
    color: #ffffff;
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fadeInRight {
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

.fadeOutRight {
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}

.banner {
    height: 14.2rem;
    position: relative;
    overflow: hidden;
}

.kv {
    position: relative;
    left: 50%;
    margin-left: -5rem;
}

.kv img {
    width: 10rem;
}

.yun {
    width: 10rem;
    height: 1.84rem;
    background: url(../img/yun.png) center top no-repeat;
    background-size: 10rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -5rem;
}

.link-box {
    width: 8.25rem;
    margin: 0 auto;
    flex-wrap: wrap;
    position: absolute;
    bottom: 1.8rem;
    left: 50%;
    margin-left: -3.915rem;
}

.link-box a {
    margin: 0 .2rem .3rem 0;
}

.link-box a:nth-of-type(2) {
    margin-right: 0;
}

.link-box a img {
    width: 3.906667rem;
}

.ios-btn {
    margin-left: .24rem;
}

.rechage-btn {
    width: 4.08rem;
    height: 1.253333rem;
    line-height: 1.253333rem;
    text-align: center;
    font-size: 0.426667rem;
    font-weight: bold;
    background: url(../img/rechage-btn.png) 0 0 no-repeat;
    background-size: 4.08rem;
    color: #ffffff;
}

.content {
    width: 10rem;
    height: 66.7067rem;
    background: url(../img/content_bg.jpg) center top no-repeat;
    background-size: 10rem;
}

.page-title img {
    width: auto;
    height: 1.3867rem;
    margin-left: .2667rem;
}

.heroes-box {
    height: 18.5rem;
    margin-top: 3.7rem;
    position: relative;
}

/* .heroes-box .page-title img{
    width: 3.7867rem;
} */

.role-img {
    width: 10rem;
    position: absolute;
    top: -1.35rem;
}

.camp-img {
    position: absolute;
    top: 11.6rem;
    left: .9067rem;
}

.top0 {
    top: 0;
}

.top2 {
    top: 0.5rem;
}

.top3 {
    top: -3.2rem;
}

.top4 {
    top: 0.65rem;
}

.top5 {
    top: -0.25rem;
}

.top6 {
    top: 0.8rem;
}

.top7 {
    top: 0.25rem;
}

.top8 {
    top: -0.65rem;
}

.xian .role-camp1 {
    width: 4.92rem;
}

.xian .role-camp2 {
    width: 4.4133rem;

}

.xian .role-camp3 {
    width: 6.546667rem;
}

.sheng .role-camp1 {
    width: 4.3467rem;
}

.sheng .role-camp2 {
    width: 4.76rem;

}

.sheng .role-camp3 {
    width: 6.506667rem;
}

.ming .role-camp1 {
    width: 7.5733rem;
}

.ming .role-camp2 {
    width: 5.3733rem;
}

.ming .role-camp3 {
    width: 7.5867rem;
}

.yao .role-camp1 {
    width: 7.7867rem;
}

.yao .role-camp2 {
    width: 6.7067rem;
}

.yao .role-camp3 {
    width: 4.9333rem;
}

.cmap-tab {
    width: 7.64rem;
    left: 50%;
    margin-left: -3.82rem;
    justify-content: space-between;
    display: flex;
    position: absolute;
    bottom: .4667rem;
    z-index: 10;
}

.cmap-tab li {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    transition: all 500ms;
    font-size: 0.346667rem;
    line-height: 0.466667rem;
    color: #8e5c43;
    text-align: center;
    font-weight: bold;
}

.cmap-tab li.active {
    filter: none;
}

.cmap-tab li img {
    width: 1.2rem;
    margin: 0 auto 0.1rem;
}

.role-text {
    width: 7.8933rem;
    height: 1.7333rem;
    position: absolute;
    bottom: 3.8rem;
    left: 1rem;
    z-index: 10;
}

.role-name {
    font-size: 0.746667rem;
    color: #ca7c60;
    position: relative;
}

.role-name img {
    margin-right: .1333rem;
}

.camp-icon1 {
    width: 0.933333rem;
}

.camp-icon2 {
    width: .9067rem;
}

.camp-icon3 {
    width: .9467rem;
}

.camp-icon4 {
    width: .9733rem;
}

.bottom-line {
    width: 3.96rem;
    border: dashed 0.013333rem #b09567;
    position: absolute;
    bottom: -0.08rem;
    left: 0.55rem;
}

.role-intro {
    font-size: 0.32rem;
    line-height: 0.36rem;
    letter-spacing: 0.066667rem;
    color: #92836c;
    padding: .2rem 0 0 .1333rem;
}

.hero .swiper {
    overflow: inherit;
}

.hero .swiper-button-prev,
.hero .swiper-button-next {
    width: 1.133333rem;
    height: 1.066667rem;
    opacity: 1;
    z-index: 100;
    top: 5.6rem;
}

.hero .swiper-button-prev {
    left: 0.133333rem;
    background-position: -1.533333rem -2.693333rem;
}

.hero .swiper-button-next {
    right: 0.133333rem;
    background-position: -0.133333rem -2.693333rem;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    content: '';
}

.hide {
    display: none;
}

.show {
    display: block;
}

.boundless-world {
    margin-top: 1.58rem;
}

/* .boundless-world .page-title img{
    width: 5.8133rem;
} */
.scene-box {
    position: relative;
    z-index: 100;
}

.scene-intro {
    width: 10rem;
    height: 6.55rem;
}

.scene-intro {
    padding-top: 1.3rem;
}

.scene-intro .scene-name {
    font-size: 0.48rem;
    color: #ca7c60;
    text-align: center;
    font-weight: bold;
}

.scene-text {
    width: 8.72rem;
    height: 3.026667rem;
    margin: 0.4rem auto 0;
    font-size: 0.32rem;
    line-height: 0.533333rem;
    letter-spacing: 0rem;
    color: #6c6357;
}

.scene-img {
    width: 10rem;
    height: 6.08rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0eede;
}

.sceneSwiper {
    width: 8.6933rem;
    height: 5.613333rem;
}

.sceneSwiper img {
    width: 9.04rem;
}

.scene-pagination {
    display: flex;
    justify-content: center;
    margin-top: .2667rem;
}

.scene-pagination .swiper-pagination-bullet,
.special-page .swiper-pagination-bullet {
    width: 0.386667rem;
    height: 0.373333rem;
    background: url(../img/icon.png) -2.893333rem -4.026667rem;
    background-size: 6.5067rem;
    opacity: 1;
    margin: 0 0.1rem !important;
}

.current-btn {
    width: 5.653333rem;
    display: flex;
    justify-content: space-between;
    margin: .2rem auto 0;
}

.next-btn,
.prev-btn {
    width: 1.106667rem;
    height: 1.106667rem;
}

.next-btn {
    background-position: -4.773333rem -0.933333rem;
}

.prev-btn {
    background-position: -3.4rem -0.933333rem;
}

.scene-pagination .swiper-pagination-bullet-active,
.special-page .swiper-pagination-bullet-active {
    background-position: -2.213333rem -4.026667rem;
}

.game-features {
    margin-top: 2.5rem;
    height: 13rem;
}

.special-box {
    margin-top: 2.05rem;
    position: relative;
}

.specialSwiper {
    height: 5.2rem;
}

.specialSwiper,
.tabThumbs {
    width: 8.5867rem;
    margin: 0 auto;
}

.tabThumbs {
    height: 1.6rem;
}

.specialSwiper img {
    width: 8.5867rem;
}

.tabThumbs img {
    width: 2.8rem;
}

.special-next-btn,
.special-prev-btn {
    width: 0.48rem;
    height: 0.48rem;
    opacity: 1;
    position: absolute;
    top: 2.2rem;
}

.special-next-btn {
    background-position: -5.6rem -2.693333rem;
    right: .1rem;
}

.special-prev-btn {
    background-position: -1.466667rem -4.026667rem;
    left: .1rem;
}

.special-page {
    display: flex;
    justify-content: center;
    margin-top: .3333rem;
}

.page-text img {
    width: 10rem;
    margin-top: .6rem;
}

.more-btn {
    width: 5.1733rem;
    height: .7867rem;
    display: block;
    margin: 0.633333rem auto 0;
}

.more-btn img {
    width: 5.1733rem;
}