*{
    padding: 0;
    margin: 0;
}
body{
    background: #0f0e2f;
}
.row{
    display: flex;
    flex-direction: row;
}
.column{
    display: flex;;
    flex-direction: column;
}
.chart-container{
    width: 4.00rem;
    height: 2.84rem;
    border: 2px solid #21357a;
    border-radius: 0.1rem;
    margin-left: 0.15rem;
}
.chart-containers{
    width: 8.18rem;
    height: 5.84rem;
    border: 2px solid #21357a;
    border-radius: 0.1rem;
    margin-left: 0.15rem;
}
.top-dong{
    margin-left: 2.11rem;
    width: 1.30rem;
    overflow: hidden;
    margin-top: 0.05rem;
    position: relative;
}
.top-dong-img{
    width: 1.66rem;
    height: 0.64rem;
    top: 0;
    position: absolute;
}
.top-dong22{
    margin-left: 0.96rem;
    width: 1.30rem;
    overflow: hidden;
    margin-top: 0.05rem;
    position: relative;
}
#container{
    margin-top: 0.20rem;
    margin-left: -0.20rem;
    z-index: 999;
}
.container-img{
    width: 0.57rem;
    height: 0.79rem;
    margin-top: 47%;
}
.container-title{
    width: 2.30rem;
    height: 0.76rem;
    margin-top: 0.20rem;
    background-image: url("./img/a2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    line-height: 0.76rem;
    text-align: center;
    color: #78ffff;
    font-size: 0.22rem;
}
.container-cc{
    z-index: 1;
    position: relative;
}
.container-text{
    position: absolute;
    width: 2.7rem;
    height: 2.3rem;
    bottom: 0.35rem;
    left: 0.20rem;
}
.dian1{
    width: 0.1rem;
    height: 0.1rem;
    background-image: linear-gradient(90deg,
    #f85549 0%,
    #ffd200 100%);
    border-radius: 50%;
    margin-top: 0.05rem;
}
.dian2{
    width: 0.1rem;
    height: 0.1rem;
    background-image: linear-gradient(90deg,
    #e26e30 2%,
    #f4ce5c 100%);
    border-radius: 50%;
    margin-top: 0.05rem;
}
.dian3{
    width: 0.1rem;
    height: 0.1rem;
    background-image: linear-gradient(0deg,
    #2ccbff 0%,
    #0096ff 100%);
    border-radius: 50%;
    margin-top: 0.05rem;
}
.dian1-text{
    font-size: 0.18rem;
    color: #ff7241;
    margin-left: 0.05rem;
}
.dian2-text{
    font-size: 0.18rem;
    color: #ff7241;
    margin-left: 0.05rem;
}
.dian2-text{
    font-size: 0.18rem;
    color: #ffc000;
    margin-left: 0.05rem;
}
.dian3-text{
    font-size: 0.18rem;
    color: #78ffff;
    margin-left: 0.05rem;
}
.text1{
    font-size: 0.23rem;
    color: #ff7241;
    margin-left: 0.20rem;
}
.text2{
    font-size: 0.23rem;
    color: #ffc000;
    margin-left: 0.20rem;
}
.container-text-con{
    margin-top: 0.05rem;
}
.container-text-image{
    width: 2.89rem;
    height: 0.64rem;
    margin-left: 0.05rem;
}
.top{
    background-image: url("./img/a4.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 12.8rem;
    height: 1rem;
}
.top-text1{
    font-size: 0.28rem;
    color: #78ffff;
    text-align: center;
    margin-top: 0.15rem;
}
.top-text2{
    font-size: 0.17rem;
    text-align: center;
    color: #78ffff;
}
.top-text{
    margin-left: 1rem;
}
.all-con{
    margin: 0 auto;
   align-items: center;
}
.top-dong1{
    font-size: 0.08rem;
    line-height: 0.12rem;
    color: #28478b;
    animation:myfirst 5s  infinite linear;
}
@keyframes myfirst
{
    0% {margin-left: 0}
    50% {margin-left: -1.50rem}
    75% {margin-left: -2.20rem}
    100%{margin-left: -2.50rem}
}
@keyframes myfirst2
{
    0% {margin-left: -2.50rem}
    50% {margin-left: -1.50rem}
    75% {margin-left: -0.70rem}
    100%{margin-left: 0}
}
.top-dong2{
    font-size: 0.10rem;
    color: #2f53a4;
    line-height: 0.14rem;
    animation:myfirst2 5s  infinite linear;
}
.top-dong3{
    animation:myfirst 5s  infinite linear;
    font-size: 0.06rem;
    color: #17204d;
    line-height: 0.10rem;
}
.top-dong4{
    animation:myfirst2 5s  infinite linear;
    font-size: 0.08rem;
    line-height: 0.012rem;
    color: #233172;
}

.chart-containertiao{
    position: absolute;
    height: 1.9rem;
    width: 0.06rem;
    background-color: #0f0e2f;
    left: 0.52rem;
    z-index: 999;
    top: 0.40rem;

}
.chart-containersss{
    width: 4.09rem;
    height: 4.36rem;
    border: 2px solid #21357a;
    border-radius: 0.10rem;
    margin-left: 0.15rem;
    position: relative;
}
.chart-containersss-top{
    width: 4.09rem;
    height:1.6rem;
    position: relative;
}

.xian{
    width: 3.58rem;
    height: 1px;
    background-image: linear-gradient(90deg,
    #01dcff 0%,
    #01dcff 50%,
    #01dcff 100%);
    opacity: 0.5;
    margin: 0 auto;
}
.music-bars span {
    background-image: linear-gradient(0deg,
    #fb698b 0%,
    #ff9854 100%) !important;
    display: block;
    width: 0.05rem;
    float: left;
    margin-right: 0.02rem;
    border-radius: 0.10rem;
}
#music-bars span {
    background-image: linear-gradient(0deg,
    #5eff4f 0%,
    #e1fd1d 100%);
    display: block;
    width: 0.05rem;
    float: left;
    margin-right: 0.02rem;
    border-radius: 0.10rem;
}
#music-bars{
    width: 0.81rem;
    height: 0.51rem;
    overflow: hidden;
    position: absolute;
    right: 0.33rem;
    top: 0.28rem;
}
.chart-containersss-text1{
    font-size: 0.18rem;
    color: #78ffff;
}

.chart-containersss-text4{
    font-size: 0.15rem;
    color: #78ffff;
}
.chart-containersss-text2{
    font-size: 0.46rem;
    color: #78ffff;
}
.chart-containersss-text3{
    font-size: 0.23rem;
    color: #78ffff;
    line-height: 0.76rem;
}
.chart-containersss-top{
    margin-top: 0.10rem;
    margin-left: 0.20rem;
}
.chart-containersss-text5{
    font-size: 0.2rem;
    color: #5dfc52;
    margin-left: 0.05rem;
}
.chart-containersss-text6{
    font-size: 0.16rem;
    color: #fb6a8a;
    margin-left: 0.05rem;
}
.chart-containersss-img-i{
    width: 0.16rem;
    height: 0.19rem;
}
.chart-containersss-img{
    justify-content: center;
    align-items: center;
    margin-left: 0.55rem;
}
.brokenLinews1{
    position: absolute;
    align-items: center;
    top: 1.7rem;
    left: 2.3rem;
}
.brokenLinews1-dian1{
    width: 0.05rem;
    height: 0.05rem;
    background-image: linear-gradient(90deg,
    #b671ff 0%,
    #72aef9 50%,
    #31e8f2 100%);
    border-radius: 50%;
}
.brokenLinews1-text1{
    font-size: 0.12rem;
    color: #4ad2f4;
    margin-left: 0.05rem;
}
.brokenLinews1-dian2{
    width: 0.06rem;
    height: 0.06rem;
    background-image: linear-gradient(90deg,
    #f85549 0%,
    #ffd200 100%);
    border-radius: 50%;
    margin-left: 0.10rem;
}
.brokenLinews1-text2{
    font-size: 0.15rem;
    color: #ffa600;
    margin-left: 0.05rem;
}
.distribution-con{
    width: 3.43rem;
    height: 0.32rem;
    border-bottom: 1px solid #322657;
    justify-content: space-between;
    padding-left: 0.06rem;
    padding-right: 0.20rem;
    box-sizing: border-box;
    margin-top: 0.03rem;
}
.distribution-list{

}
.distribution-list img{
    width: 0.21rem;
    height: 0.12rem;
}
.distribution-text{
    font-size: 0.15rem;
    color: #f2ce59;
}
.distribution-text4{
    font-size: 0.15rem;
    color: #78ffff;
}
.distribution-text2{
    font-size: 0.15rem;
    color: #45bbf1
}
.distribution-text3{
    font-size: 0.15rem;
    color: #61d8b2
}
.marlfet{
    margin-left: 0.10rem;
}
.distribution-text5{
    font-size: 0.15rem;
    color: #ffffff;
}
.distribution-con-con{
    align-items: center;
}
.distribution-title{
    font-size: 0.18rem;
    color: #78ffff;
    margin-left: 0.16rem;
    margin-top: 0.10rem;
    margin-bottom: 0.05rem;
}
.chart-containerchang{
    width: 8.24rem;
    height: 2.84rem;
    border: 2px solid #21357a;
    border-radius: 0.10rem;
    margin-left: 0.15rem;
}
.chart-containertexte1{
    font-size: 0.12rem;
    color: #78ffff;
}
.chart-containertexte2{
    font-size: 0.30rem;
    color: #78ffff;
}
.chart-containerfang{
    width: 4.0rem;
    height: 4.36rem;
    border: 2px solid #21357a;
    border-radius: 0.10rem;
    margin-left: 0.15rem;
    margin-top: 0.15rem;
}
.chart-containerfangchang{
    width: 8.24rem;
    height: 4.36rem;
    border: 2px solid #21357a;
    border-radius: 0.10rem;
    margin-left: 0.15rem;
    margin-top: 0.15rem;
}
.distribution-con-animation1{
    animation:mymove 0.5s infinite paused ;
}
@keyframes mymove
{   0% {opacity: 1}
    1% {opacity: 0}
    100% {opacity: 1}
    }
.distribution-con-animation2{
    animation:mymove2 1s infinite paused ;
}
@keyframes mymove2
{
    0% {opacity: 1}
    2% {opacity: 0}
    50% {opacity: 0}
    100% {opacity: 1}
}
.distribution-con-animation21{
    animation:mymove21 1s infinite paused ;
}
@keyframes mymove21
{
    0% {opacity: 1}
    12% {opacity: 0}
    50% {opacity: 0}
    100% {opacity: 1}
}
.distribution-con-animation3{
    animation:mymove3 1.5s infinite paused ;
}
@keyframes mymove3
{
    0% {opacity: 1}
    1% {opacity: 0}
    66% {opacity: 0}
    100% {opacity: 1}
}

.distribution-con-animation4{
    animation:mymove4 2s infinite paused ;
}
@keyframes mymove4
{
    0% {opacity: 1}
    1% {opacity: 0}
    75% {opacity: 0}
    100% {opacity: 1}
}
.distribution-con-animation5{
    animation:mymove5 2.5s infinite paused ;
}
@keyframes mymove5
{
    0% {opacity: 1}
    1% {opacity: 0}
    80% {opacity: 0}
    100% {opacity: 1}
}

.distribution-con-animation6{
    animation:mymove6 3s infinite paused ;
}
@keyframes mymove6
{
    0% {opacity: 1}
    1% {opacity: 0}
    83.4% {opacity: 0}
    100% {opacity: 1}
}
.distribution-con-animation66{
    animation:mymove66 3s infinite paused ;
}
@keyframes mymove66
{
    0% {opacity: 1}
    1% {opacity: 0}
    83% {opacity: 0}
    100% {opacity: 1}
}
.distribution-con-animation7{
    animation:mymove7 3.5s infinite paused ;
}
@keyframes mymove7
{
    0% {opacity: 1}
    1% {opacity: 0}
    86% {opacity: 0}
    100% {opacity: 1}
}

.distribution-con-animation8{
    animation:mymove8 4s infinite paused ;
}
@keyframes mymove8
{
    0% {opacity: 1}
    1% {opacity: 0}
    87.5% {opacity: 0}
    100% {opacity: 1}
}
.distribution-con-animation9{
    animation:mymove9 4.5s infinite paused ;
}
@keyframes mymove9
{
    0% {opacity: 1}
    1% {opacity: 0}
    88.9% {opacity: 0}
    100% {opacity: 1}
}
.distribution-con-animation10{
    animation:mymove10 5s infinite paused ;
}
@keyframes mymove10
{
    0% {opacity: 1}
    1% {opacity: 0}
    90% {opacity: 0}
    100% {opacity: 1}
}
.distribution-con-animation11{
    animation:mymove11 5.5s infinite paused ;
}
@keyframes mymove11
{
    0% {opacity: 1}
    1% {opacity: 0}
    91% {opacity: 0}
    100% {opacity: 1}
}
.distribution-con-animation12{
    animation:mymove12 6s infinite paused ;
}
@keyframes mymove12
{
    0% {opacity: 1}
    1% {opacity: 0}
    91.6% {opacity: 0}
    100% {opacity: 1}
}

.distribution-con-animation13{
    animation:mymove13 6.5s infinite paused ;
}
@keyframes mymove13
{
    0% {opacity: 1}
    1% {opacity: 0}
    92.4% {opacity: 0}
    100% {opacity: 1}
}

.distribution-con-animation14{
    animation:mymove14 7s infinite paused ;
}
@keyframes mymove14
{
    0% {opacity: 1}
    1% {opacity: 0}
    92.9% {opacity: 0}
    100% {opacity: 1}
}

.imageanimation1{
    animation:imageanimation1 1.2s infinite paused;
}
@keyframes imageanimation1
{
    0% {width: 0.21rem;height: 0.21rem}
    10% {width: 0.3rem;height: 0.3rem;transform:rotate(7deg);}
    20% {width: 0.3rem;height: 0.3rem;transform:rotate(-7deg);}
    30%{width: 0.3rem;height: 0.3rem;transform:rotate(7deg);}
    40% {width: 0.3rem;height: 0.3rem;transform:rotate(-7deg);}
    50% {width: 0.3rem;height: 0.3rem;transform:rotate(7deg);}
    60% {width: 0.3rem;height: 0.3rem;transform:rotate(-7deg);}
    70% {width: 0.3rem;height: 0.3rem;transform:rotate(7deg);}
    80% {width: 0.3rem;height: 0.3rem;transform:rotate(-7deg);}
    90% {width: 0.3rem;height: 0.3rem;transform:rotate(7deg);}

    100% {width: 0.21rem;height: 0.21rem}
}

.imageanimation{
    animation:imageanimation 1.2s infinite paused;
}
@keyframes imageanimation
{
    0% {width: 0.21rem;height: 0.21rem}
    10% {width: 0.3rem;height: 0.3rem;transform:rotate(7deg);}
    20% {width: 0.3rem;height: 0.3rem;transform:rotate(-7deg);}
    30%{width: 0.3rem;height: 0.3rem;transform:rotate(7deg);}
    40% {width: 0.3rem;height: 0.3rem;transform:rotate(-7deg);}
    50% {width: 0.3rem;height: 0.3rem;transform:rotate(7deg);}
    60% {width: 0.3rem;height: 0.3rem;transform:rotate(-7deg);}
    70% {width: 0.3rem;height: 0.3rem;transform:rotate(7deg);}
    80% {width: 0.3rem;height: 0.3rem;transform:rotate(-7deg);}
    90% {width: 0.3rem;height: 0.3rem;transform:rotate(7deg);}

    100% {width: 0.21rem;height: 0.21rem}
}

.sanjiu-image{
    width: 3.64rem;
    margin-left: 0.16rem;
    position:absolute;
    bottom: 0.20rem;
}
.xiegang1{
    background-image: url("img/cx.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 1.40rem;
    height: 0.28rem;
    position: absolute;
    top: 0.70rem;
    left: 2rem;
}
.xiegang2{
    background-image: url("img/cx.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 1.40rem;
    height: 0.28rem;
    position: absolute;
    top: 0.95rem;
    left: 2rem;
}
.xiegang3{
    background-image: url("img/cx.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 1.40rem;
    height: 0.28rem;
    position: absolute;
    top: 1.2rem;
    left: 2rem;
}
.xiegang4{
    background-image: url("img/cx.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 1.40rem;
    height: 0.28rem;
    position: absolute;
    top: 1.45rem;
    left: 2rem;
}
.xiegang5{
    background-image: url("img/cx.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 1.40rem;
    height: 0.28rem;
    position: absolute;
    top: 1.7rem;
    left: 2rem;
}
.xiegang6{

    width: 1.40rem;
    height: 0.28rem;
    position: absolute;
    top: 1.95rem;
    left: 2rem;
}
.xiegang7{

    width: 1.40rem;
    height: 0.28rem;
    position: absolute;
    top: 2.2rem;
    left: 2rem;
}
.xiegang-text1{
    font-size: 0.15rem;
    color: #ffeb6c;
    line-height: 0.16rem;
    margin-top: 0.05rem;
    margin-left: 0.38rem;
}

.xiegang-text2{
    font-size: 0.15rem;
    color: #01dcff;
    line-height: 0.16rem;
    margin-top: 0.05rem;
    margin-left: 0.38rem;
}
.xiegang-text3{
    font-size: 0.15rem;
    color: #70c56f;
    line-height: 0.16rem;
    margin-top: 0.05rem;
    margin-left: 0.38rem;
}
.xiegang-text4{
    font-size: 0.15rem;
    color: #78ffff;
    margin-top: 0.05rem;
    margin-left: 0.38rem;
    line-height: 0.16rem;
}
.chart-containerfangchang-sss{
    width: 8.44rem;
    height: 4.09rem;
    background-image: url("img/d1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.dot1:before{
    content:' ';
    position: absolute;
    z-index:2;
    left:3rem;
    top:1.30rem;
    width:0.12rem;
    height:0.12rem;
    background-color: #fd5a76;
    border-radius: 50%;
}

.dot1:after {
    content:' ';
    position: absolute;
    z-index:1;
    width:0.12rem;
    height:0.12rem;
    background-color: #fd5a76;
    border-radius: 50%;
    box-shadow: 0 0 0.10rem rgba(0,0,0,.3) inset;
    -webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1s;/*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s;/*动画延迟时间*/
    -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal;/*定义动画方式*/
}
@keyframes ripple {
    0% {
        left:3.05rem;
        top:1.35rem;
        opcity:75;
        width:0;
        height:0;
    }
    100% {
        left:2.80rem;
        top:1.10rem;
        opacity: 0;
        width:0.64rem;
        height:0.64rem;
    }
}
.dot2:before{
    content:' ';
    position: absolute;
    z-index:2;
    left:2.05rem;
    top:1.30rem;
    width:0.12rem;
    height:0.12rem;
    background-color: #45bbf1;
    border-radius: 50%;
}

.dot2:after {
    content:' ';
    position: absolute;
    z-index:1;
    width:0.12rem;
    height:0.12rem;
    background-color: #45bbf1;
    border-radius: 50%;
    box-shadow: 0 0 0.10rem rgba(0,0,0,.3) inset;
    -webkit-animation-name:'ripple2';/*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1s;/*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s;/*动画延迟时间*/
    -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal;/*定义动画方式*/
}
@keyframes ripple2 {
    0% {
        left:2.10rem;
        top:1.35rem;
        opcity:75;
        width:0;
        height:0;
    }
    100% {
        left:185rem;
        top:110rem;
        opacity: 0;
        width:0.64rem;
        height:0.64rem;
    }
}
.dot3:before{
    content:' ';
    position: absolute;
    z-index:2;
    left:2.25rem;
    top:2.15rem;
    width:0.12rem;
    height:0.12rem;
    background-color: #78ffff;
    border-radius: 50%;
}

.dot3:after {
    content:' ';
    position: absolute;
    z-index:1;
    width:0.12rem;
    height:0.12rem;
    background-color: #78ffff;
    border-radius: 50%;
    box-shadow: 0 0 0.10rem rgba(0,0,0,.3) inset;
    -webkit-animation-name:'ripple3';/*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1s;/*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s;/*动画延迟时间*/
    -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal;/*定义动画方式*/
}
@keyframes ripple3 {
    0% {
        left:2.30rem;
        top:2.20rem;
        opcity:75;
        width:0;
        height:0;
    }
    100% {
        left:2.05rem;
        top:1.95rem;
        opacity: 0;
        width:0.64rem;
        height:0.64rem;
    }
}
.dot4:before{
    content:' ';
    position: absolute;
    z-index:2;
    left:4rem;
    top:1.80rem;
    width:0.12rem;
    height:0.12rem;
    background-color: #78ffff;
    border-radius: 50%;
}

.dot4:after {
    content:' ';
    position: absolute;
    z-index:1;
    width:0.12rem;
    height:0.12rem;
    background-color: #78ffff;
    border-radius: 50%;
    box-shadow: 0 0 0.10rem rgba(0,0,0,.3) inset;
    -webkit-animation-name:'ripple4';/*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1s;/*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s;/*动画延迟时间*/
    -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal;/*定义动画方式*/
}
@keyframes ripple4 {
    0% {
        left:4.05rem;
        top:1.85rem;
        opcity:75;
        width:0;
        height:0;
    }
    100% {
        left:3.80rem;
        top:1.60rem;
        opacity: 0;
        width:0.64rem;
        height:0.64rem;
    }
}

.dot5:before{
    content:' ';
    position: absolute;
    z-index:2;
    left:4.60rem;
    top:2.20rem;
    width:0.12rem;
    height:0.12rem;
    background-color: #78ffff;
    border-radius: 50%;
}

.dot5:after {
    content:' ';
    position: absolute;
    z-index:1;
    width:0.12rem;
    height:0.12rem;
    background-color: #78ffff;
    border-radius: 50%;
    box-shadow: 0 0 0.10rem rgba(0,0,0,.3) inset;
    -webkit-animation-name:'ripple5';/*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1s;/*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s;/*动画延迟时间*/
    -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal;/*定义动画方式*/
}
@keyframes ripple5 {
    0% {
        left:4.65rem;
        top:2.25rem;
        opcity:75;
        width:0;
        height:0;
    }
    100% {
        left:4.40rem;
        top:2rem;
        opacity: 0;
        width:0.64rem;
        height:0.64rem;
    }
}

.dot6:before{
    content:' ';
    position: absolute;
    z-index:2;
    left:4.90rem;
    top:1.60rem;
    width:0.12rem;
    height:0.12rem;
    background-color: #fdc822;
    border-radius: 50%;
}

.dot6:after {
    content:' ';
    position: absolute;
    z-index:1;
    width:0.12rem;
    height:0.12rem;
    background-color: #fdc822;
    border-radius: 50%;
    box-shadow: 0 0 0.10rem rgba(0,0,0,.3) inset;
    -webkit-animation-name:'ripple6';/*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1s;/*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s;/*动画延迟时间*/
    -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal;/*定义动画方式*/
}
@keyframes ripple6 {
    0% {
        left:4.95rem;
        top:1.65rem;
        opcity:75;
        width:0;
        height:0;
    }
    100% {
        left:4.70rem;
        top:1.40rem;
        opacity: 0;
        width:0.64rem;
        height:0.64rem;
    }
}
.swiper-container {
    width: 12.8rem;
}
#jishu{
    height: 0.4rem;
}
.shuzi{
    width: 0.25rem;
    margin-top: -0.60rem;
}