body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
    -webkit-text-size-adjust: none;
    margin: 0;
    padding: 0;
}
*{
    box-sizing: border-box;
}
body, button, input, select, textarea {
    font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
}

address, cite, dfn, em, var {
    font-style: normal;
}

code, kbd, pre, samp {
    font-family: courier new, courier, monospace;
}

small {
    font-size: 12px;
}

ul, ol {
    list-style: none;
}

a {
    text-decoration: none;
    outline: 0 none
}

sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

legend {
    color: #000;
}

fieldset, img {
    border: 0;
}

button, input, select, textarea {
    font-size: 100%;
    resize: none;
}
/* 隐藏Safari 联系人自动填充蓝色对号图标 */
input::-webkit-contacts-auto-fill-button {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none;
    opacity: 0;
}
input::-webkit-credentials-auto-fill-button {
    display: none !important;
    visibility: hidden !important;
}
input:focus::-webkit-contacts-auto-fill-button {
    display: none !important;
    visibility: hidden !important;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

body, html {
    width: 100%;
    height: 100%;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    background-color: #fff;
    overflow: hidden;
}

a {
    color: #5B5B5B;
    outline: none;
}

* {
    -webkit-tap-highlight-color: transparent
}
body {
    font-size: 14px;
    line-height: 28px;
    color: #121212;
    box-sizing: border-box;
}

.ost_box {
    min-width: 1200px !important;
}

html {
    font-size: calc(100vw / 3840 * 100);
}

.th {
    line-height: 999px;
    overflow: hidden;
}

.sp1 {
    background-image: url(//game.gtimg.cn/images/smgcn/chasingkaleidorider/spr.png);
    background-repeat: no-repeat;
    background-size: 38.4rem 20rem;
}
.main-content a:hover{filter: brightness(1.1);-webkit-filter: brightness(1.1);}


img.contain {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

img.cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

img.auto-h {
    display: block;
    width: 100%;
    height: auto;
}
.t{display:block;text-indent:-999em;overflow:hidden;}

.ani-left, .ani-right, .ani-bottom, .ani-bottom-rever, .ani-opacity, .m-ani-bottom {
    opacity: 0;
    will-change: transform, opacity;
}
.swiper-slide-active .ani-right2 {
    will-change: transform;
}

.swiper-slide-active .ani-left {
    animation: float-left 1s ease forwards;
}

.swiper-slide-active .ani-right {
    animation: float-right 1s ease forwards;
}
.swiper-slide-active .ani-right2 {
    animation: float-right2 1s ease forwards;
}

.swiper-slide-active .ani-bottom {
    animation: float-bottom 1s ease forwards;
}

.swiper-slide-active .ani-top {
    animation: float-top 1s ease forwards;
}

.swiper-slide-active .ani-opacity {
    animation: opacityAni 1s ease forwards;
}

.ani-delay-1 {
    animation-delay: 0.1s !important;
}

.ani-delay-1_5 {
    animation-delay: 0.15s !important;
}

.ani-delay-2 {
    animation-delay: 0.2s !important;
}

.ani-delay-2_5 {
    animation-delay: 0.25s !important;
}

.ani-delay-3 {
    animation-delay: 0.3s !important;
}

.ani-delay-4 {
    animation-delay: 0.4s !important;
}
@keyframes float-left {
    0% {
        transform: translateX(-1rem);
        opacity: 0;
    }

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

}

@keyframes float-right {
    0% {
        transform: translateX(1rem);
        opacity: 0;
    }

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

}
@keyframes float-right2 {
    0% {
        transform: translateX(10rem);
    }

    100% {
        transform: translateX(0);
    }

}

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

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

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

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

}

@keyframes float-bottom-rever {
    0% {
        transform: translateY(1rem) rotate(180deg);
        opacity: 0;
    }

    100% {
        transform: translateY(0px) rotate(180deg);
        opacity: 1;
    }

}

@keyframes opacityAni {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}
@keyframes noteWave {
    0%, 100% {
        height: 0.2rem;
    }
    50% {
        height: 0.46rem;
    }
}
@font-face {
    font-family: DINNextLTPro-BC;
    src: url(//game.gtimg.cn/images/smgcn/chasingkaleidorider/DINNextLTPro-BoldCondensed.ttf) format('truetype');
    font-weight: normal;
    font-display: swap;
}
.pop{
    display: none;
}
.pop_close{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.55rem;
    height: 1.27rem;
    position: absolute;
    right: 0;
    top: 0;
}
.pop_close::after {
    background: url("//game.gtimg.cn/images/smgcn/chasingkaleidorider/spr.png");
    background-repeat: no-repeat;
    background-size: 38.4rem 20rem;
    content: "";
    width: 0.53rem;
    height: 0.53rem;
    background-position: -23.5rem -0rem;
    transition: transform 0.6s;
}
.pop_close:hover::after {
    transform: rotate(180deg) translate3d(0, 0, 0);

}
.pop .pop_cont{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: 0 0;
    position: absolute;
}
.pop .pop_tit{
    font-size: 0.64rem;
    color: #383838;
    text-align: center;
    font-weight: bold;
    padding-top: 1.02rem;
    line-height: 0.74rem;
}
.pop .pop_cont{

    background: #ececec url("//game.gtimg.cn/images/smgcn/chasingkaleidorider/pop_bg.png") no-repeat;
    background-position: calc(100% + 1px) -1px;
    border-radius: 0.37rem;
    background-size: 1.93rem 1.28rem;
}

.pop_login .pop_cont{
    width: 8.06rem;
    min-height: 5.78rem;
}
.login_btn_box{
    display: flex;
    justify-content: center;
    margin-top: 0.77rem;
}
.login_btn_box .login_btn{
    width: 2.13rem;
    height: 2.13rem;
    margin: 0 0.64rem;
}
.login_btn_box .login_btn:hover{filter: brightness(1.1);-webkit-filter: brightness(1.1);}
.login_btn_box .login_btn_wx{
    background-position: -27.2rem -0rem;
}
.login_btn_box .login_btn_qq{
    background-position: -24.6rem -0rem;
}
.pop1 .pop_cont{
    height: 7.5rem;
    width: 8.06rem;
}
.pop_succes{
    text-align: center;
    font-size: 0.3rem;
    line-height: 0.48rem;
}
.pop_succes .text1{
    color: #fa458c;
    margin-top: 0.4rem;
}
.pop_succes .text2{
    color: #898989;
}
.pop_succes .ewm_box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.24rem;
    height: 3.24rem;
    border-radius: 0.3rem;
    background: #fff;
    margin: 0.4rem auto 0;
}
.pop_succes .ewm_box .ewm{
    width: 2.93rem;
    height: 2.93rem;
}
.pop1_2 .ewm_box{
    width: 3.82rem;
    height: 3.82rem;
    border-radius: 0.3rem;
    background: #f6f6f6;
    margin: 0.74rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pop1_2 .ewm_box .ewm{
    width: 96%;
    height: 96%;
    border-radius: 0.3rem;
}
.pop2 .pop_cont{
    width: 8.06rem;
    height: 5.77rem;
}
.pop2 .text_box{
    font-size: 0.3rem;
    line-height: 0.48rem;
    color: #898989;
    padding: 0 0.6rem;
    margin-top: 0.5rem;
}
.pop2 .text_box span{
    color: #fa458c;
}
.pop_bind_phone .pop_cont{
    width: 8.06rem;
    height: 10.8rem;
}
.pop .form{
    width: 6.05rem;
    margin: 0.56rem auto 0;
}
.pop .form_item{
    display: flex;
    border-radius: 0.22rem;
    overflow: hidden;
    margin-bottom: 0.32rem;
}
.pop .form input{
    background: #f6f6f6;
    font-size: 0.32rem;
    padding: 0 0.42rem;
    color: #000;
    border: none;
    outline: none;
    height: 1.02rem;
}
.pop .form input::placeholder{
    color: #c6c6c6;
}
.pop_bind_phone .form .phone_input,.pop3_2 .form .phone_input{
    width: 6.05rem;
}
.pop_bind_phone .form .code_input,.pop3_2 .form .code_input{
    width: 3.45rem;
}
.pop_bind_phone .get_code,.pop3_2 .get_code{
    width: 2.6rem;
    height: 1.02rem;
    background: #fa458c;
    text-align: center;
    line-height: 1.02rem;
    font-size: 0.32rem;
    color: #fff;
}
.pop_bind_phone .get_code.gray,.pop3_2 .get_code.gray{
    background: #8d8d8d;
}
.agree_box{font-size: 0.3rem;
    color: #898989;
    margin-top: 0.3rem;position: relative;line-height: 0.48rem;
    margin-bottom: 0.17rem;
    padding-left: 0.54rem;
}
.agree_box .agreement_checkbox{
    background: url("//game.gtimg.cn/images/smgcn/chasingkaleidorider/checkbox2.png") no-repeat center;
    background-size: 100% auto;width: 0.34rem;height: 0.35rem;
    left: 0;
    top: 0.04rem;
    position: absolute;}
.agree_box input:checked+label .agreement_checkbox{background: url("//game.gtimg.cn/images/smgcn/chasingkaleidorider/checkbox1.png") no-repeat center;background-size: 100% auto;}
.pop_bind_phone .tips{
    font-size: 0.24rem;
    line-height: 0.36rem;
    color: #c1c1c1;
    margin-top: .16rem;
}
.pop_bind_phone .submit_btn,.pop3_2 .submit_btn{
    width: 100%;
    display: block;
    font-size: 0.4rem;
    color: #f6f6f6;
    text-align: center;
    line-height: 1rem;
    height: 1rem;
    border-radius: 0.5rem;
    margin-top: .66rem;
    background: #fa458c;
}
.pop3 .pop_cont{
    width: 8.06rem;
    height: 10.14rem;
}
.pop3_1 .text{
    font-size: 0.3rem;
    line-height: 0.48rem;
    color: #898989;
    white-space: nowrap;
}
.pop3_1 .ewm_box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.82rem;
    height: 2.82rem;
    border-radius: 0.3rem;
    background: #f6f6f6;
    margin: 0.27rem auto 0.86rem;
}
.pop3_1 .ewm_box .ewm{

    width: 2.5rem;
    height: 2.5rem;
}
.pop3_1 .ewm_box canvas{
    width: 100%;
    height: 100%;
    display: block;
}
.pop3_1 .copy{
    margin-top: 0.32rem;
}
.pop3_1 .copy_input{
    width: 3.45rem;
    color: #c6c6c6 !important;
}
.pop3_1 .copy_btn{
    width: 2.6rem;
    height: 1.02rem;
    background: #fa458c;
    text-align: center;
    line-height: 1.02rem;
    font-size: 0.32rem;
    color: #fff ;
}
.pop3_2 .tips{
    font-size: 0.26rem;
    line-height: 0.42rem;
    color: #898989;
}
.pop3_2 .tips span{
    color: #fa458c;
}
.pop4 .pop_cont{
    width: 8.06rem;
    height: 10rem;
}
.pop4 .pop_main{
    width: 6.05rem;
    margin: 0 auto;
}
.pop4 .text1,.pop5 .text1{
    margin-top: 0.66rem;
    color: #fa458c;
    font-size: 0.44rem;
    line-height: 0.54rem;
    text-align: center;
}
.pop4 .text2{
    color: #898989;
    font-size: 0.3rem;
    line-height: 0.4rem;
    margin-top: 0.16rem;
    text-align: center;
}
.pop4 .exchange_box{
    background: #f6f6f6;
    width: 6.06rem;
    height: 2.2rem;
    border-radius: 0.22rem;
    margin-top: 0.45rem;
    padding: 0.34rem 0.1rem 0 0.3rem;
    font-size: 0.3rem;
    line-height: 0.5rem;
    color: #898989;
}
.pop4 .text3{
    font-weight: bold;
}
.pop4 .line{
    background: #c8c8c8;
    height: 0.02rem;
    margin-top: 0.59rem;
}
.pop4 .text5{
    font-size: 0.3rem;
    color: #898989;
    line-height: 0.48rem;
    margin-top: 0.48rem;
    text-align: center;
}
.pop4 .pop_btn{
    width: 100%;
    display: block;
    font-size: 0.4rem;
    color: #f6f6f6;
    text-align: center;
    line-height: 1rem;
    height: 1rem;
    border-radius: 0.5rem;
    margin-top: .22rem;
    background: #fa458c;
}
.pop4 .copy2,.pop4 .copy3{
    display: flex;
    border-radius: 0.22rem;
    overflow: hidden;
    margin-top: 0.32rem;
}


.pop4 .copy2 input,.pop4 .copy3 input{
    background: #f6f6f6;
    font-size: 0.32rem;
    padding: 0 0.42rem;
    border: none;
    outline: none;
    width: 4.25rem;
    height: 1.02rem;
    color: #c6c6c6 !important;
}
.pop4 .copy2 input::placeholder,.pop4 .copy2 input::placeholder{
    color: #c6c6c6;
}
.pop4 .copy2 .copy_btn2,.pop4 .copy3 .copy_btn3{
    width: 1.8rem;
    height: 1.02rem;
    background: #fa458c;
    text-align: center;
    line-height: 1.02rem;
    font-size: 0.32rem;
    color: #fff;
}
.pop4_2 .pop_cont{
    width: 8.06rem;
    height: 10.8rem;
}
.pop4_1 .down_btn{
    width: 3.04rem;
    height: 1rem;
    background: #fa458c;
    text-align: center;
    line-height: 1rem;
    font-size: 0.32rem;
    color: #fff;
    border-radius: 0.5rem;
    display: block;
    margin: 0.6rem auto 0;
}
.pop4_1 .text6{
    text-align: center;
    color: #898989;
    font-size: 0.24rem;
    line-height: 0.48rem;
    margin-top: 0.08rem;
}
.pop5 .pop_cont{

    width: 8.06rem;
    height: 6.77rem;
}
.pop5 .btn_box{
    display: flex;
    margin-top: 1.3rem;
}
.pop5 .btn_box .item{
    width: 50%;
    text-align: center;
    color: #898989;
    font-size: 0.24rem;
    line-height: 0.44rem;
}
.pop5 .btn_box a{
    width: 3.04rem;
    height: 1rem;
    background: #fa458c;
    text-align: center;
    line-height: 1rem;
    font-size: 0.32rem;
    color: #fff;
    border-radius: 0.5rem;
    display: block;
    margin: 0rem auto 0.1rem;
}
.pop6 .pop_cont{
    width: 8.06rem;
    height: 5.57rem;
}
.pop6 .pop_main{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.5rem;
    margin: 0.1rem auto;
    height: 3rem;
}
.pop6 .pop_main .text_box{
    font-size: 0.36rem;
    line-height: 0.52rem;
    color: #898989;
    text-align: center;
    width: 100%;
}
.pop6 .text_box .text1{
    color: #fa458c;
    font-size: 0.44rem;
    margin-bottom: 0.24rem;
}
.pop6 .text_box span{
    color: #fa458c;
}
.pop6_2 .text_box .text2{
    font-size: 0.3rem;
}

.pop5_2 .text2{
    margin-top: 0.66rem;
    color: #898989;
    font-size: 0.3rem;
    line-height: 0.48rem;
    text-align: center;
}
.pop5_2 .btn_box{
    justify-content: center;
}
.pop5_2 .btn_box a{
    margin: 0 0.23rem;
}
.pop5_2 .btn_box .btn2{
    background: #383838;
}
.toast_pop{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    pointer-events: none;
    z-index: 999999;
    display: none;
}
.toast_pop .toast_cont{
    width: 6.71rem;
    height: 1.34rem;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: url("//game.gtimg.cn/images/smgcn/chasingkaleidorider/dia_tips.png") no-repeat center;
    background-size: 100% auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.toast_pop .toast_cont .toast_text{
    font-size: 0.3rem;
    line-height: 0.48rem;
    color: #fff;
}
.pop5_3 .pop_cont{
    height: 7.7rem;
}
.pop5_3 .text2{
    padding: 0 0.6rem;
    text-align: left;
    margin-top: 0.5rem;
}
.pop5_3 .text2 span{
    color: #fa458c;
}
.pop5_3 .btn_box{
    margin-top: 0.6rem;
}