.btn-back::before {
    content: "";
    display: block;
    width: .22rem;
    height: 0.28rem;
    background: url(//game.gtimg.cn/images/kq/web202305/home/sd-order-de.png) no-repeat;
    background-size: 100%;
    margin-right: 0.16rem;
    transform: rotateY(180deg);
}

.btn-back:hover::before {
    -webkit-animation: hover-back .8s linear infinite;
    animation: hover-back .8s linear infinite;
}

@keyframes hover-back {
    0% {
        transform: rotateY(180deg) translate3d(0, 0, 0);
    }

    50% {
        transform: rotateY(180deg) translate3d(0.16rem, 0, 0);
    }

    100% {
        transform: rotateY(180deg) translate3d(0, 0, 0);
    }
}

.swiper-slide-active .fadeTop ,.show  .fadeTop {
    animation: fadeTop 0.8s ease both;
    -webkit-animation: fadeTop 0.8s ease both;
}

@keyframes fadeTop {
    0% {
        transform: translateY(-50px);
        -webkit-atransform: translateY(-50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        opacity: 1;
    }
}

.swiper-slide-active .fadeLeft ,.show  .fadeLeft {
    animation: fadeLeft 0.8s ease both;
    -webkit-animation: fadeLeft 0.8s ease both;
}
@keyframes fadeLeft {
    0% {
        transform: translateX(-50px);
        -webkit-transform: translateX(-50px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
.swiper-slide-active .fadeLeftTop ,.show  .fadeLeftTop {
    animation: fadeLeftTop 0.8s ease both;
    -webkit-animation: fadeLeftTop 0.8s ease both;
}

@keyframes fadeLeftTop {
    0% {
        transform: translate(-50px,-50px);
        -webkit-transform: translate(-50px,-50px);
        opacity: 0;
    }

    100% {
        transform: translate(0,0);
        opacity: 1;
        -webkit-transform: translate(0,0);
    }
}
.swiper-slide-active .fadeRightBot ,.show  .fadeRightBot {
    animation: fadeRightBot 0.8s ease both;
    -webkit-animation: fadeRightBot 0.8s ease both;
}

@keyframes fadeRightBot {
    0% {
        transform: translate(50px,50px);
        -webkit-transform: translate(50px,50px);
        opacity: 0;
    }

    100% {
        transform: translate(0,0);
        opacity: 1;
        -webkit-transform: translate(0,0);
    }
}

.swiper-slide-active .fadeRight ,.show  .fadeRight {
    animation: fadeRight 0.8s ease both;
    -webkit-animation: fadeRight 0.8s ease both;
}

@keyframes fadeRight {
    0% {
        transform: translateX(50px);
        opacity: 0;
        -webkit-transform: translateX(50px);
    }

    100% {
        transform: translateX(0);
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

.swiper-slide-active .fadeBot ,.show  .fadeBot {
    animation: fadeBot 0.8s ease both;
    -webkit-animation: fadeBot 0.8s ease both;
}

@keyframes fadeBot {
    0% {
        transform: translateY(50px);
        -webkit-transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        opacity: 1;
    }
}

.swiper-slide-active .delay1 ,.show  .delay1 {
    animation-delay: .1s;
    -webkit-animation-delay: .1s;
}

.swiper-slide-active .delay2 ,.show  .delay2 {
    animation-delay: .2s;
    -webkit-animation-delay: .2s;
}

.swiper-slide-active .delay3 ,.show  .delay3 {
    animation-delay: .3s;
    -webkit-animation-delay: .3s;
}

.swiper-slide-active .delay4 ,.show  .delay4 {
    animation-delay: .4s;
    -webkit-animation-delay: .4s;
}

.swiper-slide-active .delay5 ,.show  .delay5 {
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
}

.swiper-slide-active .delay6 ,.show  .delay6 {
    animation-delay: .6s;
    -webkit-animation-delay: .6s;
}

.swiper-slide-active .delay7 ,.show  .delay7 {
    animation-delay: .7s;
    -webkit-animation-delay: .7s;
}

.swiper-slide-active .delay8 ,.show  .delay8 {
    animation-delay: .8s;
    -webkit-animation-delay: .8s;
}

.swiper-slide-active .delay9 ,.show  .delay9 {
    animation-delay: .9s;
    -webkit-animation-delay: .9s;
}
.swiper-slide-active .delay10 ,.show  .delay10 {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}
.swiper-slide-active .toggleLeft ,.show  .toggleLeft {
    animation: toggleLeft 1.2s ease both;
}

@keyframes toggleLeft {
    0% {
        transform: translatex(0);
        opacity: 1;
        pointer-events: all;
    }

    30% {
        transform: translatex(-1.5rem);
        opacity: 0;
    }

    70% {
        transform: translatex(-1.5rem);
        opacity: 0;
    }

    99% {
        pointer-events: none;
    }

    100% {
        transform: translatex(0);
        opacity: 1;
        pointer-events: all;
    }
}

.swiper-slide-active .toggleRight ,.show  .toggleRight {
    animation: toggleRight 1.2s ease both;
}

@keyframes toggleRight {
    0% {
        transform: translatex(0);
        opacity: 1;
        pointer-events: none;
    }

    30% {
        transform: translatex(1.5rem);
        opacity: 0;
    }

    70% {
        transform: translatex(1.5rem);
        opacity: 0;
    }

    99% {
        pointer-events: none;
    }

    100% {
        transform: translatex(0);
        opacity: 1;
        pointer-events: all;
    }
}

.swiper-slide-active .toggleRole ,.show  .toggleRole {
    animation: toggleRole 0.8s ease both;
}

@keyframes toggleRole {
    0% {
        transform: translateY(-1rem);
        opacity: 0;
    }

    50% {
        opacity: 0;
        transform: translateY(-1rem);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.swiper-slide-active .toggleCamp ,.show  .toggleCamp {
    animation: toggleCamp 0.4s ease both;
}

@keyframes toggleCamp {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }

    50% {
        opacity: 0;
        transform: translateY(1rem);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.swiper-slide-active .toggleSpeech ,.show  .toggleSpeech {
    animation: toggleSpeech 1.2s ease both;
}

@keyframes toggleSpeech {
    0% {
        transform: translateY(-0.5rem);
        opacity: 0;
    }

    50% {
        opacity: 0;
        transform: translateY(-0.5rem);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.dialog.dia-welfare .dia-con {
    width: 540px;
    height: 558px;
    background: url(//game.gtimg.cn/images/kq/web202305/dia_wel.png);
    background-size: 100%;
    padding-top: 36px;
    position: relative;
}

.dialog.dia-welfare .dia-tit {
    font-family: "ali";
    font-size: 24px;
    color: #222222;
    line-height: 30px;
    text-align: center;
    margin-top: 14px;
}

.dialog.dia-welfare .wel-tip {
    width: 430px;
    margin: 0 auto;
    font-family: "cgr";
    font-size: 16px;
    color: #222222;
    line-height: 30px;
    text-align: left;
    margin-top: 18px;
}

.dialog.dia-welfare .dia-download {
    text-indent: -999em;
    font-size: 0;
    display: block;
    margin: 20px auto 0;
    width: 320px;
    height: 72px;
    background: url(//game.gtimg.cn/images/kq/web202305/dia-download.png);
    background-size: 100%;
}

.wel-list {
    display: flex;
    width: 438px;
    position: absolute;
    left: 57px;
    top: 422px;
    justify-content: space-between;
}

.wel-list li {
    width: 100px;
    height: 66px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-family: "cgr";
    font-size: 16px;
    line-height: 24px;
    /* background-color: #ee1717; */

}