.container{
    width: 7.5rem;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: #131217;
}
.index{
    width: 100%;
    height: 100%;
    position: relative;
}
.audio-control{
    width: .48rem;
    position: fixed;
    top: .1rem;
    right: .1rem;
    z-index: 99;
}
#audio_index{
    position: fixed;
    top: -100%;
    left:100% ;
}
.audio-control img{
    width: 100%;
}
.audio-play{
    animation: rotate1 2s linear infinite;
}


.indexLoading{
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.loadingBox{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(19,18,23,1);
    z-index: 11;
}
.indexLoadingBg{
    width: 7.5rem;
    height: 16.24rem;
    position: absolute;
    top: 0;
    left: 0;
}
.indexLoadingBg img{
    width: 7.5rem;
    height: 16.24rem;
}
.indexLoadingMain{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}
.setCutTips{
    width: 7.5rem;
    height: 0.4rem;
    position: absolute;
    top: 0;
    left: 0;
}
.setGuideGif1{
    width: 6.08rem;
    height: 1.22rem;
    position: absolute;
    top: 9rem;
    left: 0.74rem;
}
.setGuideGif2{
    width: 7.5rem;
    height: 3.6rem;
    position: absolute;
    top: 6rem;
    left: 0;
}
.setGuide1{
    width: 6.34rem;
    height: 2.94rem;
    position: absolute;
    top: 6.2rem;
    left: 0.58rem;
    z-index: 10;
}
.setGuide1Bg{
    width: 6.34rem;
    height: 2.94rem;
    position: absolute;
    top: 0;
    left: 0;
}
.setGuide11{
    width: 6.34rem;
    height: 0.44rem;
    position: absolute;
    top: 0.6rem;
    left: 0;
    animation: guideTxtActive 0.8s linear forwards;
}
.setGuide12{
    width: 6.34rem;
    height: 0.5rem;
    position: absolute;
    top: 1.24rem;
    left: 0;
    animation: guideTxtActive 0.8s linear forwards;
}
.setGuide13{
    width: 6.34rem;
    height: 0.4rem;
    position: absolute;
    top: 2.0rem;
    left: 0;
    animation: guideTxtActive 0.8s linear forwards;
}
.setGuide14{
    width: 6.34rem;
    height: 0.44rem;
    position: absolute;
    top: 2rem;
    left: 0;
    animation: guideTxtActive 0.8s linear forwards;
}
.setGuide2{
    width: 6.34rem;
    height: 2.64rem;
    position: absolute;
    top: 6.2rem;
    left: 0.58rem;
    z-index: 10;
}
.setGuideGif{
    width: 7.5rem;
    height: 3.24rem;
    position: absolute;
    top: 6.2rem;
    left: 0;
}
.setGuide2Bg{
    width: 6.34rem;
    height: 2.64rem;
    position: absolute;
    top: 0;
    left: 0;
}
.setGuide21{
    width: 6.49rem;
    height: 1.26rem;
    position: absolute;
    top: 0.7rem;
    left: -0.08rem;
    animation: guideTxtActive 0.8s linear forwards;
}
.indexLoadingMainRound1{
    width: 2.32rem;
    height: 2.32rem;
    position: absolute;
    top: 3.98rem;
    left: 2.48rem;
    animation: rotate1 2s linear infinite;
}
.indexLoadingMainRound2{
    width: 2.56rem;
    height: 2.56rem;
    position: absolute;
    top: 3.86rem;
    left: 2.48rem;
    animation: rotate1 2s linear infinite;
}
.indexLoadingMainCard{
    width: 0.62rem;
    height: 0.9rem;
    position: absolute;
    top: 4.7rem;
    left: 3.38rem;
    animation: rotate2 2s linear infinite;
}
.indexLoadingMainTxt{
    width: 4.06rem;
    height: 0.3rem;
    position: absolute;
    top: 7rem;
    left: 1.72rem;
    overflow: hidden;
}
.indexLoadingMainTxt img{
    width: 4.06rem;
    height: 0.3rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    animation: loadingDoing 1s linear infinite;
}

.indexSet{
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.setCut{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.setCutBg{
    width: 7.5rem;
    height: 16.24rem;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(5);
    animation: setCutBgs 2s linear forwards;
}
.setCutBg1{
    width: 7.5rem;
    height: 16.24rem;
    position: absolute;
    top: 0;
    left: 0;
}
.setCutBg2{
    width: 7.5rem;
    height: 16.24rem;
    position: absolute;
    top: 0;
    left: 0;
}
.beforeBtn{
    width: 6.88rem;
    height: 1.06rem;
    position: absolute;
    top: 9rem;
    left: 0.31rem;
    z-index: 3;
    animation: breaths 2s linear infinite;
}
.setCutGu1{
    width: 1.8rem;
    height: 0.78rem;
    position: absolute;
    top: 9.1rem;
    left: 0;
    animation: setCutGu1s 2s linear infinite;
    z-index: 2;
}
.setCutGu2{
    width: 1.12rem;
    height: 1.06rem;
    position: absolute;
    top: 9.1rem;
    right: 0.4rem;
    animation: setCutGu2s 2s linear infinite;
    z-index: 2;
}
@keyframes setCutGu1s{
    0%{
        transform: translateX(0);
        opacity: 1;
    }
    100%{
        transform: translateX(-60%);
        opacity: 0;
    }
}
@keyframes setCutGu2s{
    0%{
        transform: translateX(0);
        opacity: 1;
    }
    100%{
        transform: translateX(60%);
        opacity: 0;
    }
}
.setGuideTitle{
    width: 7.5rem;
    height: 1.64rem;
    position: absolute;
    top: 0.5rem;
    left: 0;
}
.setCutRound{
    width: 7.26rem;
    height: 7.12rem;
    position: absolute;
    top: 1.4rem;
    left: 0.2rem;
    transform: scale(0.2);
    animation: setCutRounds 1s linear forwards;
}
.setCutCard1{
    width: 2.44rem;
    height: 3.82rem;
    position: absolute;
    top: 3rem;
    left: 2.6rem;
    transform: scale(0.2);
    animation: setCutCard1s 2s linear forwards;
}
.setCutPerson{
    width: 7.5rem;
    height: 9.28rem;
    position: absolute;
    top: 1.78rem;
    left: 0;
    z-index: 2;
}
.setCutZhu{
    width: 7.02rem;
    height: 1.54rem;
    position: absolute;
    top: 6.1rem;
    left: 0.36rem;
    z-index: 2;
}
.setCutCard{
    width: 4.09rem;
    height: 0.98rem;
    position: absolute;
    top: 6.8rem;
    left: 1.76rem;
    z-index: 2;
}
.setCutTable{
    width: 7.5rem;
    height: 11.36rem;
    position: absolute;
    top: 5.7rem;
    left: 0;
    animation: setCutTables 2s linear forwards;
}
.setCutSecretCard{
    width: 1.88rem;
    height: 2.15rem;
    position: absolute;
    top: 4.7rem;
    left: 2.8rem;
    z-index: 3;
}
.setCutMouse1{
    width: 3.04rem;
    height: 2.08rem;
    position: absolute;
    top: 4.5rem;
    left: 2.23rem;
    animation: setCutMou1 2s linear forwards;
    z-index: 2;
}
.setCutMouse2{
    width: 3.04rem;
    height: 2.08rem;
    position: absolute;
    top: 4.5rem;
    left: 2.23rem;
    animation: setCutMou2 2s linear forwards;
    z-index: 2;
}
@keyframes setCutMou1{
    0%{
        transform: translateX(0);
        opacity: 1;
    }
    100%{
        transform: translateX(-60%);
        opacity: 0;
    }
}
@keyframes setCutMou2{
    0%{
        transform: translateX(0);
        opacity: 1;
    }
    100%{
        transform: translateX(60%);
        opacity: 0;
    }
}
.payTopCard{
    position: absolute;
    z-index: 10;
    display: none;
}
.lightLine{
    position: absolute;
    top: 0;
    left: -100%;
    width:30%;
    height: 100%;
    transform: skewX(-45deg);
    background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,0.8) 20%,rgba(255,255,255,0) 100%);
    animation:flashBy 1.5s;
    z-index: 10;
}
@keyframes flashBy{
    0%{
        left: -100%;
    }
    100%{
        left:200%;
    }
}
@keyframes payTopCards {
    0%{
        transform: translateY(0.1rem);
    }
    50%{
        transform: translateY(-0.1rem);
    }
    100%{
        transform: translateY(0.1rem);
    }
}
@keyframes setCutTables {
    0%{
        transform: translateY(100vh);
    }
    100%{
        transform: translateY(0);
    }
}
@keyframes setCutBgs {
    0%{
        transform: scale(5);
    }
    100%{
        transform: scale(1);
    }
}
@keyframes setCutRounds {
    0%{
        transform: scale(0.2);
        opacity: 1;
    }
    100%{
        transform: scale(1.8);
        opacity: 0.6;
    }
}
@keyframes setCutCard1s {
    0%{
        transform: scale(0.2) rotateY(0);
        opacity: 1;
    }
    50%{
        transform: scale(1) rotateY(360deg);
        opacity: 1;
    }
    100%{
        transform: scale(0.4) rotateY(0);
        opacity: 0;
    }
}
.indexSetImg1{
    width: 5.68rem;
    height: 1.58rem;
    position: absolute;
    top: 2.4rem;
    left: 0.9rem;
}
.indexSetImg2{
    width: 1.5rem;
    height: 2.14rem;
    position: absolute;
    top: 6.84rem;
    left: 3rem;
}
.scaleSmall{
    animation: scaleDoing 1s linear;
}
.scaleSmall1{
    animation: scaleDoing1 0.9s linear forwards;
}

.indexStart{
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.indexStartTip{
    width: 7.5rem;
    height: 0.42rem;
}
.order{
    width: 0.56rem;
    height: 2.06rem;
    position: fixed;
    top: 2rem;
    right: 0;
}
.indexStartMain{
    width: 6.84rem;
    height: 9.9rem;
    margin-left: 0.33rem;
    position: relative;
    margin-top: -0.3rem;
}
.indexStartMainBg{
    width: 6.84rem;
    height: 9.9rem;
    position: absolute;
    top: 0;
    left: 0;
}
.indexStartMainDesc{
    width: 5.74rem;
    height: 5.96rem;
    position: absolute;
    top: 2.5rem;
    left: 0.55rem;
}
.indexStartMainChoose{
    width: 100%;
    height: 0.82rem;
    position: absolute;
    top: 8.1rem;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.indexStartMainChoose1{
    width: 2.46rem;
    height: 0.82rem;
    margin-right: 0.2rem;
    position: relative;
}
.indexStartMainChoose11{
    width: 2.46rem;
    height: 0.82rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.indexStartMainChoose12{
    width: 2.46rem;
    height: 0.82rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.indexStartMainChoose2{
    width: 2.46rem;
    height: 0.82rem;
    margin-left: 0.2rem;
    position: relative;
}
.indexStartMainChoose21{
    width: 2.46rem;
    height: 0.82rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.indexStartMainChoose22{
    width: 2.46rem;
    height: 0.82rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.indexStartBtn{
    width: 7.5rem;
    height: 1.7rem;
    position: relative;
    margin-top: -0.3rem;
}
.indexStartBtn1{
    width: 7.5rem;
    height: 1.7rem;
    position: absolute;
    top: 0;
    left: 0;
}
.indexStartBtn2{
    width: 7.5rem;
    height: 1.7rem;
    position: absolute;
    top: 0;
    left: 0;
}
.privacyBtn{
    width: 4.1rem;
    height: 0.36rem;
    position: absolute;
    top: 10.4rem;
    left: 1.7rem;
    z-index: 3;
}
.indexBtnActive{
    filter: brightness(40%);
}
.privacyBtn img{
    width: 4.1rem;
    height: 0.36rem;
    position: absolute;
    top: 0;
    left: 0;
}
.privacyBtn1{
    opacity: 0;
}
.btn-wrap{
    width: 4.1rem;
    height: 0.36rem;
    position: absolute;
    top: 0;
    left: 0;
}
.btn-wrap .privacyRight{
    width: 0.6rem;
    height: 0.4rem;
    position: absolute;
    top: 0;
    left: 0;
}
.btn-wrap .agreement{
    width: 1.5rem;
    height: 0.4rem;
    position: absolute;
    top: 0;
    left: 0.9rem;
}
.btn-wrap .privacy{
    width: 1.5rem;
    height: 0.4rem;
    position: absolute;
    top: 0;
    left: 2.9rem;
}
.load{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: rgba(0,0,0,0.4);
}
.loadAll{
    width: 5rem;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: #131217;
    z-index: 100;
    border-radius: 0.3rem;
    overflow: hidden;
}
.load img{
    width: 0.54rem;
    height: 0.54rem;
    text-align: center;
    display: inline-block;
    margin-top: 0.3rem;
    margin-left: 2.22rem;
}
.loadP{
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    width: 100%;
    text-align: center;
    font-size: 0.3rem;
    color: #ffffff;
}
.dui-tip{
    width: 70%;
    height: 0.8rem;
    background-color: black;
    border-radius: 0.2rem;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 999;
    text-align: center;
    font-size: 0.3rem;
    color: #ffffff;
    line-height: 0.8rem;
}
.indexRuffle{
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.indexRuffleMiddle{
    width: 1.48rem;
    height: 2.32rem;
    position: absolute;
    top: 5.28rem;
    left: 3rem;
}
.indexRuffleMiddleAll{
    width: 1.48rem;
    height: 2.32rem;
    position: absolute;
    top: 5.28rem;
    left: 3rem;
}
.indexRuffleMiddles{
    width: 1.48rem;
    height: 2.32rem;
    position: absolute;
    top: 5.28rem;
    left: 3rem;
}
.indexRuffleMiddle1{
    z-index: 3;
    animation: cardTranslate1 2s linear;
    animation-iteration-count: 2;
}
.indexRuffleMiddle2{
    z-index: 3;
    animation: cardTranslate2 2s linear;
    animation-iteration-count: 2;
}
.indexRuffleMiddle3{
    z-index: 3;
    animation: cardTranslate3 2s linear;
    animation-iteration-count: 2;
}
.indexRuffleMiddle4{
    z-index: 3;
    animation: cardTranslate4 2s linear;
    animation-iteration-count: 2;
}
.indexRuffleMiddle5{
    z-index: 3;
    animation: cardTranslate5 2s linear;
    animation-iteration-count: 2;
}
.indexRuffleMiddle6{
    z-index: 3;
    animation: cardTranslate6 2s linear;
    animation-iteration-count: 2;
}
.indexRuffleMiddle7{
    z-index: 2;
    filter: brightness(80%);
    animation: cardTranslate7 2s linear;
    animation-iteration-count: 2;
}
.indexRuffleMiddle8{
    z-index: 2;
    filter: brightness(80%);
    animation: cardTranslate8 2s linear;
    animation-iteration-count: 2;
}
.indexRuffleMiddle9{
    z-index: 2;
    filter: brightness(80%);
    animation: cardTranslate9 2s linear;
    animation-iteration-count: 2;
}
.indexRuffleMiddle10{
    z-index: 2;
    filter: brightness(80%);
    animation: cardTranslate10 2s linear;
    animation-iteration-count: 2;
}
.indexRuffleMiddle11{
    z-index: 2;
    filter: brightness(80%);
    animation: cardTranslate11 2s linear;
    animation-iteration-count: 2;
}
.indexRuffleMiddle12{
    z-index: 2;
    filter: brightness(80%);
    animation: cardTranslate12 2s linear;
    animation-iteration-count: 2;
}
.indexRuffleMiddle13{
    filter: brightness(60%);
    animation: cardTranslate13 2s linear;
    animation-iteration-count: 2;
}
.indexRuffleMiddle14{
    filter: brightness(60%);
    animation: cardTranslate14 2s linear;
    animation-iteration-count: 2;
}
.indexRuffleMiddle15{
    filter: brightness(60%);
    animation: cardTranslate15 2s linear;
    animation-iteration-count: 2;
}
.indexRuffleMiddle16{
    filter: brightness(60%);
    animation: cardTranslate16 2s linear;
    animation-iteration-count: 2;
}
.indexRuffleMiddle17{
    filter: brightness(60%);
    animation: cardTranslate17 2s linear;
    animation-iteration-count: 2;
}
.indexRuffleMiddle18{
    filter: brightness(60%);
    animation: cardTranslate18 2s linear;
    animation-iteration-count: 2;
}
.indexRuffleMiddles1{
    z-index: 8;
    animation: cardTranslates1 3s linear infinite;
}
.indexRuffleMiddles2{
    z-index: 7;
    animation: cardTranslates2 3s linear infinite;
}
.indexRuffleMiddles3{
    z-index: 6;
    animation: cardTranslates3 3s linear infinite;
}
.indexRuffleMiddles4{
    z-index: 6;
    animation: cardTranslates4 3s linear infinite;
}
.indexRuffleMiddles5{
    z-index: 5;
    animation: cardTranslates5 3s linear infinite;
}
.indexRuffleMiddles6{
    z-index: 5;
    animation: cardTranslates6 3s linear infinite;
}
.indexRuffleMiddles7{
    z-index:5;
    animation: cardTranslates7 3s linear infinite;
}
.indexRuffleDesc1{
    width: 5.58rem;
    height: 0.94rem;
    position: absolute;
    top: 0.8rem;
    left: 0.96rem;
}
.indexRuffleDesc2{
    width: 5.58rem;
    height: 0.94rem;
    position: absolute;
    top: 0.8rem;
    left: 0.96rem;
    opacity: 0;
}

.indexChoose{
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.indexChooseMain{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}
.indexChooseMiddleCard{
    width: 1.48rem;
    height: 2.32rem;
    position: absolute;
    animation: oneCardChoose 1s linear forwards;
}
.indexChooseTitle{
    width: 3.12rem;
    height: 3.08rem;
    position: absolute;
    top: 1.6rem;
    left: 2.16rem;
}
.indexPro{
    font-size: 0.3rem;
    color: #73737b;
    position: absolute;
    top: 2.9rem;
    left: 3.46rem;
}
.indexPro span{
    color: #e2e2e2;
    font-size: 0.4rem;
}
.indexChooseTips{
    width: 3.88rem;
    height: 0.28rem;
    position: absolute;
    top: 11.5rem;
    left: 1.81rem;
}
.indexChooseCard1{
    width: 1.52rem;
    height: 1.04rem;
    position: absolute;
    left: 0.4rem;
    display: none;
}
.indexChooseCard2{
    width: 1.52rem;
    height: 1.04rem;
    position: absolute;
    right: 0.4rem;
    display: none;
}
.indexChooseCard3{
    width: 1.52rem;
    height: 1.04rem;
    position: absolute;
    top: 4.5rem;
    left: 0.4rem;
    transform-origin: 3.34rem 0.54rem;
    display: none;
}
.indexChooseCard3 img{
    width: 1.52rem;
    height: 1.04rem;
}
.indexChooseBaseAll{
    width: 100%;
    position: absolute;
    top: 10.5rem;
    left: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.indexChooseBase{
    width: 1.34rem;
    position: relative;
}
.indexChooseBaseTitleImg{
    width: 1.4rem;
    height: 0.36rem;
    position: absolute;
    top: -1.9rem;
    left: 0;
}
.indexChooseBase1{
    width: 1.34rem;
    height: 0.76rem;
    position: absolute;
    top: 0;
    left: 0;
}
.indexChooseBase2{
    width: 1.14rem;
    height: 1.72rem;
    position: absolute;
    top: -1.44rem;
    left: 0.12rem;
}
.indexChooseBase3{
    width: 0.98rem;
    height: 1.6rem;
    position: absolute;
    top: -1.38rem;
    left: 0.20rem;
    text-align: center;
    color: #f8c5b3;
    font-size: 0.6rem;
    line-height: 1.6rem;
}
.indexChooseBase4{
    width: 0.98rem;
    height: 1.6rem;
    position: absolute;
    top: -1.38rem;
    left: 0.20rem;
    border-radius: 0.08rem;
    overflow: hidden;
}
.indexChooseBase41{
    width: 0.98rem;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.indexChooseBase42{
    width: 0.98rem;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}




.indexShow{
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.indexShowCard{
    width: 1.32rem;
    height: 2.19rem;
    position: absolute;
    transform: scale(0.9);
}
.indexShowCardImg{
    width: 1.32rem;
    height: 2.19rem;
    position: absolute;
    top: 0;
    left: 0;
    filter: brightness(40%);
}
.lightLineAll{
    width: 1.32rem;
    height: 2.19rem;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.indexShowCardTitle{
    width: 1.56rem;
    height: 0.4rem;
    position: absolute;
    top: -0.5rem;
    left: -0.12rem;
}
.indexShowCardTitleImg{
    width: 1.56rem;
    height: 0.4rem;
    position: absolute;
    top: 0;
    left: 0;
}
.indexShowRotateCard{
    width: 0.64rem;
    height: 0.94rem;
    position: absolute;
    top: 8.1rem;
    left: 3.46rem;
}
.indexShowRotateCardActive{
    animation: rotate2 2s linear infinite;
}
.proBg{
    width: 7.5rem;
    height: 1.52rem;
    position: absolute;
    top: 8.9rem;
    left: 0;
}
.proTxt{
    width: 100%;
    height: 0.54rem;
    font-size: 0.4rem;
    font-weight: bold;
    text-align: center;
    color: #fcffe5;
    position: absolute;
    top: 9.1rem;
    left: 0;
}
.indexShowProgress{
    width: 4.34rem;
    height: 1.22rem;
    position: absolute;
    top: 9.4rem;
    left: 1.58rem;
}
.indexShowProgressImg{
    width: 4.34rem;
    height: 1.22rem;
    position: absolute;
    top: 0;
    left: 0;
}
.indexShowProgressAll{
    width: 3.38rem;
    height: 0.14rem;
    overflow: hidden;
    border-radius: 0.07rem;
    position: absolute;
    top: 0.52rem;
    left: 0.48rem;
}
.indexShowProgressOne{
    width: 3.38rem;
    height: 0.14rem;
    position: absolute;
    top: 0;
}
.resultCardUnder{
    width: 4rem;
    height: 0.30rem;
    position: absolute;
    bottom: -0.4rem;
    left: -1.34rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.isYes{
    width: 0.3rem;
    height: 0.3rem;
}
.resultCardUnderTxt{
    font-size: 0.26rem;
    color: #eeefeb;
    margin-left: 0.1rem;
}
.indexShowBtn{
    width: 100%;
    position: absolute;
    top: 8rem;
    left: 0;
}
.indexShowBtn1{
    width: 6.42rem;
    height: 1.2rem;
    margin-left: 0.54rem;
    animation: breaths 2s linear infinite;
}
.indexShowBtn2{
    margin-top: 0.2rem;
    margin-left: 1.54rem;
    width: 4.42rem;
    height: 0.56rem;
    transform: scale(0.9);
}
.indexShowProgressOneActive{
    animation: progressOne 3.2s linear;
    animation-iteration-count: 4;
}
.ensureImgAnimate{
    animation: ensureImgAnimates 2s linear forwards;
}
@keyframes ensureImgAnimates{
    0%{
        filter: brightness(40%);
        transform: scale(1) rotateY(0deg);
        -webkit-transform: scale(1) rotateY(0deg);
    }
    20%{
        transform: scale(1.2) rotateY(0deg);
        -webkit-transform: scale(1.2) rotateY(0deg);
    }
    70%{
        transform:  scale(1.2)  rotateY(360deg);
        -webkit-transform: scale(1.2)  rotateY(360deg);
    }
    75%{
        transform: scale(1.2)  rotateY(360deg);
        -webkit-transform: scale(1.2) rotateY(360deg);
    }
    100%{
        filter: brightness(100%);
        transform: scale(1)  rotateY(360deg);
        -webkit-transform: scale(1)  rotateY(360deg);
    }
}
@keyframes progressOne{
    0%{
        left: -3.38rem;
    }
    100%{
        left: 0;
    }
}
.cardChooseActive1{
    z-index: 100;
    animation: cardChoose1 0.7s linear forwards;
}
.cardChooseActive21{
    z-index: 100;
    animation: cardChoose21 0.7s linear forwards;
}
.cardChooseActive22{
    z-index: 100;
    animation: cardChoose22 0.7s linear forwards;
}
.cardChooseActive23{
    z-index: 100;
    animation: cardChoose23 0.7s linear forwards;
}
.cardChooseActive24{
    z-index: 100;
    animation: cardChoose24 0.7s linear forwards;
}
.cardChooseActive25{
    z-index: 100;
    animation: cardChoose25 0.7s linear forwards;
}
.cardChooseActive2{
    z-index: 100;
    animation: cardChoose2 0.7s linear forwards;
}
.cardChooseActive3{
    z-index: 100;
    animation: cardChoose3 0.7s linear forwards;
}
.cardChooseActive31{
    z-index: 100;
    animation: cardChoose31 0.7s linear forwards;
}
.cardChooseActive32{
    z-index: 100;
    animation: cardChoose32 0.7s linear forwards;
}
.cardChooseActive33{
    z-index: 100;
    animation: cardChoose33 0.7s linear forwards;
}
.cardChooseActive34{
    z-index: 100;
    animation: cardChoose34 0.7s linear forwards;
}
.cardChooseActive35{
    z-index: 100;
    animation: cardChoose35 0.7s linear forwards;
}
.cardChooseActive4{
    z-index: 100;
    animation: cardChoose4 0.7s linear forwards;
}
.cardChooseActive5{
    z-index: 100;
    animation: cardChoose5 0.7s linear forwards;
}
.indexChooseBaseActive1{
    display: block;
    animation: chooseBaseActive1 0.5s linear forwards;
}
.indexChooseBaseActive2{
    display: block;
    animation: chooseBaseActive2 0.5s linear forwards;
}
@keyframes chooseBaseActive2{
    100%{
        transform: rotateY(360deg);
    }
}
@keyframes chooseBaseActive1{
    100%{
        transform: rotateY(180deg);
    }
}
@keyframes cardChoose1{
    100%{
        top: 9.4rem;
        left: 0.1rem;
        transform: rotate(-90deg);
        display: none;
    }
}
@keyframes cardChoose21{
    100%{
        top: 6.8rem;
        left: -2.46rem;
        transform: rotate(-90deg);
        display: none;
    }
}
@keyframes cardChoose22{
    100%{
        top: 6.8rem;
        left: -0.58rem;
        transform: rotate(-90deg);
        display: none;
    }
}
@keyframes cardChoose23{
    100%{
        top: 6.8rem;
        left: 1.3rem;
        transform: rotate(-90deg);
        display: none;
    }
}
@keyframes cardChoose24{
    100%{
        top: 6.8rem;
        left: 3.18rem;
        transform: rotate(-90deg);
        display: none;
    }
}
@keyframes cardChoose25{
    100%{
        top: 6.8rem;
        left: 3.36rem;
        transform: rotate(-90deg);
        display: none;
    }
}
@keyframes cardChoose2{
    100%{
        top: 9.4rem;
        left: 1.98rem;
        transform: rotate(-90deg);
        display: none;
    }
}
@keyframes cardChoose3{
    100%{
        top: 9.4rem;
        left: 3.86rem;
        transform: rotate(-90deg);
        display: none;
    }
}
@keyframes cardChoose31{
    100%{
        top: 9.4rem;
        right: 5.73rem;
        transform: rotate(-90deg);
        display: none;
    }
}
@keyframes cardChoose32{
    100%{
        top: 9.4rem;
        right: 3.84rem;
        transform: rotate(-90deg);
        display: none;
    }
}
@keyframes cardChoose33{
    100%{
        top: 9.4rem;
        right: 1.98rem;
        transform: rotate(-90deg);
        display: none;
    }
}
@keyframes cardChoose34{
    100%{
        top: 9.4rem;
        right: 0.08rem;
        transform: rotate(-90deg);
        display: none;
    }
}
@keyframes cardChoose35{
    100%{
        top: 9.4rem;
        right: -0.06rem;
        transform: rotate(-90deg);
        display: none;
    }
}
@keyframes cardChoose4{
    100%{
        top: 9.4rem;
        left: 5.74rem;
        transform: rotate(-90deg);
        display: none;
    }
}
@keyframes cardChoose5{
    100%{
        top: 9.4rem;
        left: 5.92rem;
        transform: rotate(-90deg);
        display: none;
    }
}
@keyframes oneCardChoose{
    0%{
        transform: scale(1);
        top: 5.28rem;
        left: 3rem;
    }
    100%{
        transform: scale(0.64) rotate(90deg);
        top: -0.36rem;
        left: 0.4rem;
    }
}
@keyframes cardTranslate1 {
    0%{
        top: 5.28rem;
        left: 3rem;
    }
    25%{
        top: 2.6rem;
        left: 1.8rem;
    }
    35%{
        top: 2.6rem;
        left: 1.8rem;
    }
    60%{
        top: 2.6rem;
        left: 4.2rem;
    }
    65%{
        top: 2.6rem;
        left: 4.2rem;
    }
    90%{
        top: 5.28rem;
        left: 3rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslate2 {
    0%{
        top: 5.28rem;
        left: 3rem;
    }
    25%{
        top: 2.6rem;
        left: 4.2rem;
    }
    35%{
        top: 2.6rem;
        left: 4.2rem;
    }
    60%{
        top: 5.28rem;
        left: 5.5rem;
    }
    65%{
        top: 5.28rem;
        left: 5.5rem;
    }
    90%{
        top: 5.28rem;
        left: 3rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslate3 {
    0%{
        top: 5.28rem;
        left: 3rem;
    }
    25%{
        top: 5.28rem;
        left: 0.5rem;
    }
    35%{
        top: 5.28rem;
        left: 0.5rem;
    }
    60%{
        top: 2.6rem;
        left: 1.8rem;
    }
    65%{
        top: 2.6rem;
        left: 1.8rem;
    }
    90%{
        top: 5.28rem;
        left: 3rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslate4 {
    0%{
        top: 5.28rem;
        left: 3rem;
    }
    25%{
        top: 5.28rem;
        left: 5.5rem;
    }
    35%{
        top: 5.28rem;
        left: 5.5rem;
    }
    60%{
        top: 8rem;
        left: 4.2rem;
    }
    65%{
        top: 8rem;
        left: 4.2rem;
    }
    90%{
        top: 5.28rem;
        left: 3rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslate5 {
    0%{
        top: 5.28rem;
        left: 3rem;
    }
    25%{
        top: 8rem;
        left: 1.8rem;
    }
    35%{
        top: 8rem;
        left: 1.8rem;
    }
    60%{
        top: 5.28rem;
        left: 0.5rem;
    }
    65%{
        top: 5.28rem;
        left: 0.5rem;
    }
    90%{
        top: 5.28rem;
        left: 3rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslate6 {
    0%{
        top: 5.28rem;
        left: 3rem;
    }
    25%{
        top: 8rem;
        left: 4.2rem;
    }
    35%{
        top: 8rem;
        left: 4.2rem;
    }
    60%{
        top: 8rem;
        left: 1.8rem;
    }
    65%{
        top: 8rem;
        left: 1.8rem;
    }
    90%{
        top: 5.28rem;
        left: 3rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslate7 {
    0%{
        top: 5.28rem;
        left: 3rem;
    }
    4%{
        top: 5.28rem;
        left: 3rem;
    }
    29%{
        top: 2.6rem;
        left: 1.8rem;
    }
    39%{
        top: 2.6rem;
        left: 1.8rem;
    }
    64%{
        top: 2.6rem;
        left: 4.2rem;
    }
    70%{
        top: 2.6rem;
        left: 4.2rem;
    }
    90%{
        top: 5.28rem;
        left: 3rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslate8 {
    0%{
        top: 5.28rem;
        left: 3rem;
    }
    4%{
        top: 5.28rem;
        left: 3rem;
    }
    29%{
        top: 2.6rem;
        left: 4.2rem;
    }
    39%{
        top: 2.6rem;
        left: 4.2rem;
    }
    64%{
        top: 5.28rem;
        left: 5.5rem;
    }
    70%{
        top: 5.28rem;
        left: 5.5rem;
    }
    90%{
        top: 5.28rem;
        left: 3rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslate9 {
    0%{
        top: 5.28rem;
        left: 3rem;
    }
    4%{
        top: 5.28rem;
        left: 3rem;
    }
    29%{
        top: 5.28rem;
        left: 0.5rem;
    }
    39%{
        top: 5.28rem;
        left: 0.5rem;
    }
    64%{
        top: 2.6rem;
        left: 1.8rem;
    }
    70%{
        top: 2.6rem;
        left: 1.8rem;
    }
    90%{
        top: 5.28rem;
        left: 3rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslate10 {
    0%{
        top: 5.28rem;
        left: 3rem;
    }
    4%{
        top: 5.28rem;
        left: 3rem;
    }
    29%{
        top: 5.28rem;
        left: 5.5rem;
    }
    39%{
        top: 5.28rem;
        left: 5.5rem;
    }
    64%{
        top: 8rem;
        left: 4.2rem;
    }
    70%{
        top: 8rem;
        left: 4.2rem;
    }
    90%{
        top: 5.28rem;
        left: 3rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslate11 {
    0%{
        top: 5.28rem;
        left: 3rem;
    }
    4%{
        top: 5.28rem;
        left: 3rem;
    }
    29%{
        top: 8rem;
        left: 1.8rem;
    }
    39%{
        top: 8rem;
        left: 1.8rem;
    }
    64%{
        top: 5.28rem;
        left: 0.5rem;
    }
    70%{
        top: 5.28rem;
        left: 0.5rem;
    }
    90%{
        top: 5.28rem;
        left: 3rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslate12 {
    0%{
        top: 5.28rem;
        left: 3rem;
    }
    4%{
        top: 5.28rem;
        left: 3rem;
    }
    29%{
        top: 8rem;
        left: 4.2rem;
    }
    39%{
        top: 8rem;
        left: 4.2rem;
    }
    64%{
        top: 8rem;
        left: 1.8rem;
    }
    70%{
        top: 8rem;
        left: 1.8rem;
    }
    90%{
        top: 5.28rem;
        left: 3rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslate13 {
    0%{
        top: 5.28rem;
        left: 3rem;
    }
    8%{
        top: 5.28rem;
        left: 3rem;
    }
    33%{
        top: 2.6rem;
        left: 1.8rem;
    }
    43%{
        top: 2.6rem;
        left: 1.8rem;
    }
    68%{
        top: 2.6rem;
        left: 4.2rem;
    }
    73%{
        top: 2.6rem;
        left: 4.2rem;
    }
    91%{
        top: 5.28rem;
        left: 3rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslate14 {
    0%{
        top: 5.28rem;
        left: 3rem;
    }
    8%{
        top: 5.28rem;
        left: 3rem;
    }
    33%{
        top: 2.6rem;
        left: 4.2rem;
    }
    43%{
        top: 2.6rem;
        left: 4.2rem;
    }
    68%{
        top: 5.28rem;
        left: 5.5rem;
    }
    73%{
        top: 5.28rem;
        left: 5.5rem;
    }
    91%{
        top: 5.28rem;
        left: 3rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslate15 {
    0%{
        top: 5.28rem;
        left: 3rem;
    }
    8%{
        top: 5.28rem;
        left: 3rem;
    }
    33%{
        top: 5.28rem;
        left: 0.5rem;
    }
    43%{
        top: 5.28rem;
        left: 0.5rem;
    }
    68%{
        top: 2.6rem;
        left: 1.8rem;
    }
    73%{
        top: 2.6rem;
        left: 1.8rem;
    }
    91%{
        top: 5.28rem;
        left: 3rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslate16 {
    0%{
        top: 5.28rem;
        left: 3rem;
    }
    8%{
        top: 5.28rem;
        left: 3rem;
    }
    33%{
        top: 5.28rem;
        left: 5.5rem;
    }
    43%{
        top: 5.28rem;
        left: 5.5rem;
    }
    68%{
        top: 8rem;
        left: 4.2rem;
    }
    73%{
        top: 8rem;
        left: 4.2rem;
    }
    91%{
        top: 5.28rem;
        left: 3rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslate17 {
    0%{
        top: 5.28rem;
        left: 3rem;
    }
    8%{
        top: 5.28rem;
        left: 3rem;
    }
    33%{
        top: 8rem;
        left: 1.8rem;
    }
    43%{
        top: 8rem;
        left: 1.8rem;
    }
    68%{
        top: 5.28rem;
        left: 0.5rem;
    }
    73%{
        top: 5.28rem;
        left: 0.5rem;
    }
    91%{
        top: 5.28rem;
        left: 3rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslate18 {
    0%{
        top: 5.28rem;
        left: 3rem;
    }
    8%{
        top: 5.28rem;
        left: 3rem;
    }
    33%{
        top: 8rem;
        left: 4.2rem;
    }
    43%{
        top: 8rem;
        left: 4.2rem;
    }
    68%{
        top: 8rem;
        left: 1.8rem;
    }
    73%{
        top: 8rem;
        left: 1.8rem;
    }
    91%{
        top: 5.28rem;
        left: 3rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslates1 {
    0%{
        top: 5.28rem;
        left: 3rem;
        transform: scale(1);
    }
    10%{
        top: 5.28rem;
        left: 3rem;
        transform: scale(1.2);
    }
    30%{
        top: 5.28rem;
        left: 0.5rem;
        transform: scale(1);
    }
    80%{
        top: 5.28rem;
        left: 0.5rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslates2 {
    0%{
        top: 5.28rem;
        left: 3rem;
        transform: scale(1);
    }
    30%{
        top: 5.28rem;
        left: 3rem;
        transform: scale(1);
    }
    40%{
        top: 5.28rem;
        left: 3rem;
        transform: scale(1.2);
    }
    60%{
        top: 5.28rem;
        left: 5.5rem;
        transform: scale(1);
    }
    80%{
        top: 5.28rem;
        left: 5.5rem;
        transform: scale(1);
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslates7 {
    0%{
        top: 5.28rem;
        left: 3rem;
        transform: scale(1);
        z-index:5;
    }
    60%{
        top: 5.28rem;
        left: 3rem;
        transform: scale(1);
        z-index:5;
    }
    68%{
        top: 5.28rem;
        left: 3rem;
        transform: scale(1.2);
        z-index:5;
    }
    75%{
        top: 5.28rem;
        left: 3rem;
        transform: scale(1.2);
        z-index: 10;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
        transform: scale(1);
        z-index: 10;
    }
}
@keyframes cardTranslates3 {
    0%{
        top: 5.28rem;
        left: 3rem;
        transform: scale(1);
    }
    10%{
        top: 5.28rem;
        left: 3rem;
        transform: scale(1.2);
    }
    32%{
        top: 5.28rem;
        left: 0.5rem;
        transform: scale(1);
    }
    82%{
        top: 5.28rem;
        left: 0.5rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslates4 {
    0%{
        top: 5.28rem;
        left: 3rem;
        transform: scale(1);
    }
    30%{
        top: 5.28rem;
        left: 3rem;
        transform: scale(1);
    }
    40%{
        top: 5.28rem;
        left: 3rem;
        transform: scale(1.2);
    }
    62%{
        top: 5.28rem;
        left: 5.5rem;
        transform: scale(1);
    }
    82%{
        top: 5.28rem;
        left: 5.5rem;
        transform: scale(1);
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslates5 {
    0%{
        top: 5.28rem;
        left: 3rem;
        transform: scale(1);
    }
    10%{
        top: 5.28rem;
        left: 3rem;
        transform: scale(1.2);
    }
    28%{
        top: 5.28rem;
        left: 0.5rem;
        transform: scale(1);
    }
    84%{
        top: 5.28rem;
        left: 0.5rem;
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}
@keyframes cardTranslates6 {
    0%{
        top: 5.28rem;
        left: 3rem;
        transform: scale(1);
    }
    30%{
        top: 5.28rem;
        left: 3rem;
        transform: scale(1);
    }
    40%{
        top: 5.28rem;
        left: 3rem;
        transform: scale(1.2);
    }
    59%{
        top: 5.28rem;
        left: 5.5rem;
        transform: scale(1);
    }
    81%{
        top: 5.28rem;
        left: 5.5rem;
        transform: scale(1);
    }
    100%{
        top: 5.28rem;
        left: 3rem;
    }
}



@keyframes rotate1 {
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes rotate2 {
    0%{
        transform: rotateY(0);
    }
    100%{
        transform: rotateY(360deg);
    }
}
@keyframes loadingDoing {
    0%{
        filter: brightness(100%);
    }
    50%{
        filter: brightness(50%);
    }
    100%{
        filter: brightness(100%);
    }
}
@keyframes scaleDoing {
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
}
@keyframes scaleDoing1 {
    0%{
        transform: scale(1) translateY(0);
    }
    100%{
        transform: scale(5) translateY(-0.5rem);
    }
}
@keyframes beforeRounds {
    0%{
        transform: translateY(0.1rem);
    }
    50%{
        transform: translateY(-0.1rem);
    }
    100%{
        transform: translateY(0.1rem);
    }
}
@keyframes breaths {
    0%{
        transform: scale(0.9);
    }
    50%{
        transform: scale(1);
    }
    100%{
        transform: scale(0.9);
    }
}
@keyframes guideTxtActive {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}