.downLoad {
    display: inline-block;
    cursor: pointer;
}

.showpage {
    display: flex;
    flex-direction: column;
    align-items: center;

    /* width: 1200rem;
    margin: 0 360rem 0 360rem  */
}


.topBox {
    width: 1200rem;
    height: 64rem;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    z-index: 99;
    position: relative;
}

.topMiddle {
    display: flex;
    gap: 40rem;
}

.topMiddle div:hover {
    cursor: pointer;
    color: #8B6EF3;
}

.is_border {
    border-bottom: 1rem solid #D8D8D8;
}

.topLeft>img {
    width: 32rem;
    height: 32rem;
    vertical-align: middle;
    /* margin-left: -8rem; */
}

.topLeft span {
    font-weight: bold;
    color: #FFFFFF;
}

.topRight {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32rem;
    /* margin-top: 12rem; */
}

.topRightTxt {
    color: #FFFFFF;
    font-size: 16rem;
}
.topRightTxt:hover{
    cursor: pointer;
    color: #FF3674;
}
.topRightBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    width: 129rem;
    height: 40rem;
    background: linear-gradient(270deg, #FA9691 0%, #FA5789 100%);
    border-radius: 20rem;
    line-height: 40rem;
    font-size: 14rem;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;

}

.topRight img {
    width: 18rem;
    height: 18rem;
}


.topRightBtn:hover {

    background: linear-gradient(270deg, #FA5789 0%, #FA9691 100%);
}

.banner {
    display: flex;
    justify-content: center;
    height: 1080rem;
    width: 100%;
    position: relative;

}

.bannerBgImg {
    position: absolute;
    width: 100%;
    height: 1080rem;

}

.image-compare {
    display: flex;
    justify-items: center;
    align-items: center;
}

.icv__circle {
    background-image: url('../img/slider1@2x.png');
    background-size: 100% 100%;
}

.icv__arrow-wrapper svg {
    width: 0 !important;
    height: 0 !important;
}

.icv__control-line:first-child {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, #FFFFFF 52%, #FFFFFF 100%) !important;
}

.icv__control-line:last-child {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 52%, rgba(255, 255, 255, 0.05) 100%) !important;
}

.bannerImg {
    position: absolute;
    height: 720rem;
    width: 100%;
    top: 0;
    margin: 0 auto;
    object-fit: cover;
    z-index: 1;
}

.cover {
    position: absolute;
    width: 100%;
    height: 720rem;
    z-index: 9;
}

.bannerLeft {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 99;
    top: 240rem;
    width: 1200rem;

}

.bannerTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 16rem;
    height: 72rem;
    font-weight: bold;
    font-size: 48rem;
    color: #FFFFFF;
}

.bannerTxt {
    height: 20rem;
    margin-top: 32rem;
    font-weight: 500;
    font-size: 20rem;
    color: #FFFFFF;
    line-height: 30rem;
}

.bannerFuctionBox {
    display: flex;
    gap: 56rem;
    margin-top: 64rem;
}

.bannerFuction {
    display: flex;
    gap: 12rem;
    flex-direction: column;
    align-items: center;
}

.bannerFuction img {
    width: 60rem;
    height: 60rem;
}

.bannerFuction>div {
    font-weight: 400;
    font-size: 16rem;
    color: #FFFFFF;
}

.bannerBtn {
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12rem;
    margin-top: 32rem;
    width: 217rem;
    height: 60rem;
    background: linear-gradient(270deg, #FA9691 0%, #FA5789 100%);
    box-shadow: 0rem 11rem 30rem 0rem rgba(250,87,137,0.3), 0rem 4rem 10rem 0rem rgba(250,87,137,0.17);    border-radius: 4rem;
    font-weight: 500;
    font-size: 20rem;
    color: #FFFFFF;
    overflow: hidden;
}

.bannerBtn:hover {
    background: linear-gradient(270deg, #FA5789 0%, #FA9691 100%);

}

.bannerBtn img {
    width: 24rem;
    height: 24rem;
}

.bannerSuit {
    font-weight: 400;
    font-size: 14rem;
    color: #FFFFFF;
    line-height: 14rem;
    margin-top: 20rem;
}

.accumulateBox {
    display: flex;
    align-items: center;
    gap: 64rem;
    margin-top: 82rem;
}

.accumulate {
    display: flex;
    align-items: baseline;
    font-size: 16rem;
    color: #FFFFFF;
}

.bannerRound {
    position: relative;
    top: 3rem;
    width: 16rem;
    height: 16rem;
    margin-right: 16rem;
    border-radius: 8rem;
    background: linear-gradient(270deg, #FA9691 0%, #FA5789 100%);
    box-shadow: 0rem 11rem 30rem 0rem rgba(250, 87, 137, 0.3), 0rem 4rem 10rem 0rem rgba(250, 87, 137, 0.17);
}

.accumulate span {
    font-size: 32rem;
    color: #FFFFFF;

}

#rolling-number {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    font-size: 32rem;
    /* 根据需要调整字体大小 */
    position: relative;
}

.digit {
    display: inline-block;
    position: relative;
    overflow: hidden;
    top: 7rem;
    height: 40rem;
    width: 20rem;
    /* 根据字体调整宽度 */
    text-align: center;
}

.digit span {
    display: block;
    position: absolute;

    width: 100%;
    animation: roll-up 0.5s ease-in-out;
}

@keyframes roll-up {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.functionBox {
    margin-top: 120rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.functionTitle {
    text-align: center;
    font-weight: 600;
    font-size: 32rem;
    color: #333333;
    height: 32rem;
    line-height: 32rem;
    position: relative;
    display: flex;
    justify-content: center;
}


.titleImg {

    position: absolute;
    width: 100%;
    height: 23rem;
    top: 6rem;
    background: linear-gradient(270deg, rgba(250, 150, 145, 0.08) 0%, rgba(250, 87, 137, 0.3) 100%);
    border-radius: 12rem;
}



.functionToolBox {
    display: flex;
    gap: 77rem;
    margin-bottom: 40rem;
    margin-top: 72rem;
}

.functionTool {
    display: flex;
    gap: 20rem;
    flex-direction: column;
    align-items: center;
}
.functionTool:hover {
    cursor: pointer;
    transition: 300ms, visibility 0s;
    transform: scale(1.05);
}
.functionTool:hover .functionToolTxt{
    color: #FF3674;
 }
.functionToolBox img {
    width: 80rem;
    height: 80rem;
}

.functionToolTxt {
    font-weight: 500;
    font-size: 20rem;
    color: #333333;
}





.describe {
    margin-top: 24rem;
    width: 798rem;
    font-weight: 500;
    font-size: 16rem;
    color: #333333;
    line-height: 24rem;
    text-align: center;
    font-style: normal;
}

.describeImg {
    margin-top: 48rem;
    width: 1200rem;
    height: 600rem;
}

.functionCardBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40rem 20rem;
    width: 1200rem;
    margin: 0 auto;

    /* margin: 48rem 36rem 0 36rem; */
    margin-top: 43rem;
}

.functionCard {
    cursor: pointer;
    border-radius: 8rem;
    width: 285rem;
    height: 232rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 24rem;
}

.functionactive {
    border-radius: 8rem;
    width: 285rem;
    height: 232rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 24rem;
    box-shadow: 0rem 4rem 12rem 0rem rgba(0, 0, 0, 0.06);
    transform: scale(1.05);
    transition: all 200ms linear;

}


.functionCard>img {
    width: 60rem;
    height: 60rem;
}

.functionCardTit {
    text-align: center;
    height: 20rem;
    font-size: 20rem;
    font-weight: 500;
    color: #333333;
    line-height: 20rem;
    margin-top: 26rem;
}

.functionCardTxt {
    text-align: center;
    max-width: 256rem;
    font-size: 16rem;
    font-weight: 400;
    color: #666666;
    line-height: 24rem;
    margin: 0 auto;
    margin-top: 8rem;
}

.functionBtn {
    position: relative;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-top: 72rem;
    width: 217rem;
    height: 60rem;
    background: linear-gradient(137deg, #15AAED 0%, #04E19E 100%);
    box-shadow: 0rem 11rem 30rem 0rem rgba(18, 94, 217, 0.3), 0rem 4rem 10rem 0rem rgba(18, 94, 217, 0.17);
    border-radius: 4rem;
    font-weight: 500;
    font-size: 20rem;
    color: #FFFFFF;
    line-height: 20rem;
    overflow: hidden;
}

.functionBtn:hover {
    background: linear-gradient(137deg, #04E19E 0%, #15AAED 100%);
}

.functionBtn img {
    width: 24rem;
    height: 24rem;
    margin-right: 12rem;
}

.introduce {
    width: 100%;
    margin-top: 120rem;
    position: relative;
    display: flex;
    padding-bottom: 60rem;
    flex-direction: column;
    align-items: center;
}

.TxtLeft {
    width: 32rem;
    height: 32rem;
    margin-right: 12rem;
    display: inline-block;
}

.introducebox {
    display: flex;
    justify-content: space-between;
    width: 1200rem;
    margin-top: 72rem;
}

.introduceLeft {

    padding-left: 12rem;
}

.introduceRight {
    width: 553rem;
    height: 406rem;
     margin-top: -74rem;
}

.introduceTitle {
    display: flex;
    align-items: center;

    height: 24rem;
    font-size: 24rem;
    font-weight: 500;
    color: #333333;
    line-height: 24rem;
}

.colorFont1 {
    background: -webkit-linear-gradient(134.0782797165043deg, #FFC4B3 0%, #EF9C86 13%, #EB76A8 30%, #A83AC1 58%, #824BE3 78%, #8B6EF3 100%);
    /* 渐变颜色 */
    -webkit-background-clip: text;
    /* 文本填充背景 */
    color: transparent;
    /* 文本颜色设置为透明 */
    font-size: 24rem;
    /* 字体大小 */
}
.colorFont2{
    background: -webkit-linear-gradient(135deg, #32C5FF 0%, #B620E0 51%, #F7B500 100%);
    /* 渐变颜色 */
    -webkit-background-clip: text;
    /* 文本填充背景 */
    color: transparent;
    /* 文本颜色设置为透明 */
    font-size: 24rem;
    /* 字体大小 */
}

.introduceTxt {
    margin-top: 32rem;
    font-size: 18rem;
    width: 420rem;
    color: #666666;
    font-weight: 400;
    line-height: 27rem;
}

.baColorBox {
    display: flex;
    gap: 16rem;
    margin-top: 24rem;
}

.baColorTxt{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 88rem;
    height: 36rem;
    padding: 7rem;
    background: linear-gradient(223deg, #DDFFF4 0%, #FFDFE7 100%);
    border-radius: 4rem;
    box-sizing: border-box;
    color: #FF3674;

}

.introduceBtn {
    display: inline-block;
    width: 222rem;
    height: 60rem;
    background: linear-gradient(270deg, #FA9691 0%, #FA5789 100%);
    box-shadow: 0rem 11rem 30rem 0rem rgba(250, 87, 137, 0.3), 0rem 4rem 10rem 0rem rgba(250, 87, 137, 0.17);
    border-radius: 4rem;
    margin-top: 32rem;
    /* margin-left: -0.12rem; */
    font-size: 20rem;
    text-align: center;
    line-height: 60rem;
    color: #FFFFFF;
    cursor: pointer;
}

.introduceBtn:hover {
    background: linear-gradient(270deg, #FA5789 0%, #FA9691 100%);

}

.introduceBtn a {
    font-size: 20rem;
    text-align: center;
    line-height: 60rem;
    color: #FFFFFF;
}



.introduceTwoImg {
    width: 685rem;
    height: 450rem;
    position: absolute;
    left: 300rem;
    top: 499rem;
}

.introduceTxtTwoBox {
    position: absolute;
    top: 615rem;
    left: 1173rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-end;
}

.introduceTxtTwoBox .introduceTxtThree {
    width: 387rem;
}

.scene {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 32rem;
    margin-bottom: 120rem;
}
.sceneBox{
    display: flex;
    gap: 45rem;
    margin-top: 72rem;

}
.sceneCard{
    width: 370rem;
height: 456rem;
padding: 32rem;
box-sizing: border-box;
background: linear-gradient( 180deg, #DDE9FF 0%, #FFDFE7 100%);
border-radius: 20rem;
}
.sceneCard:hover {
    cursor: pointer;
    transition: 300ms, visibility 0s;
    transform: scale(1.05);
}
.sceneCardTitle{
    background: -webkit-linear-gradient(135deg, #32C5FF 0%, #B620E0 51%, #F7B500 100%);
    /* 渐变颜色 */
    -webkit-background-clip: text;
    /* 文本填充背景 */
    color: transparent;
    /* 文本颜色设置为透明 */
    font-size: 24rem;
    /* 字体大小 */
    font-weight: bold;
    margin-bottom: 32rem;
}
.sceneImgBox{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 32rem 0rem;
}
.sceneImgTxtBox{
    display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16rem
}
.sceneImg{
    width: 120rem;
    height: 120rem;
}
.sceneImgTxt{
    font-weight: 500;
font-size: 16rem;
color: #333333;
line-height: 16rem;
}
.evaluate {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


.swipers {
    margin-top: 52rem;
}

.evaluateImg {
    position: absolute;
    height: 423rem;
    width: 100%;
    top: 0;
    margin: 0 auto;
    object-fit: cover;
    z-index: 1;
}

.swiperBox {
    margin-top: 88rem;
    /* margin-left: 36rem; */
    display: flex;
    position: relative;
}

.swiperCard {
    width: 400rem;
    height: 188rem;
    background: #FFFFFF;
    box-shadow: 0rem 5rem 10rem 0rem rgba(0, 0, 0, 0.11);
    border-radius: 8rem;
    position: absolute;
    border-top: 10rem solid #fff;
    cursor: pointer;
    /* transition: width 1s,height 1s,top 1s,left 1s,z-index 1s,opacity 1s;  */
}

.swiperCard>img {
    position: absolute;
    width: 64rem;
    height: 64rem;
    left: 168rem;
    top: -40rem;
}

.startBox {
    margin-top: 42rem;
    padding: 0 135rem;
    display: flex;
    gap: 11rem;
}

.startBox img {
    width: 24rem;
    height: 24rem;
}

.swiperCardTxt {
    margin: 21rem 40rem 0rem 40rem;
    font-size: 14rem;
    font-weight: 400;
    color: #1A1A1A;
    height: 66rem;
}

.swiperCardName {
    text-align: center;
    font-size: 13rem;
    font-weight: 400;
    color: #000000;
}

.swiperBox {
    width: 1200rem;
    overflow: hidden;
    margin: 0 auto;
    height: 340rem;

}

.swiper-slide {
    width: 40rem;
    transition: 300ms, visibility 0s;
    transform: scale(1);
    opacity: 0.8;
    height: 188rem !important;
    text-align: center;
}

.swiper-wrapper {

    margin-top: 88rem;
}

.swiper-slide-active,
.swiper-slide-duplicate-active {

    transform: scale(1.25);
    opacity: 1;
    z-index: 999;
}




/* 底部 */

.bottom {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    height: 223rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 120rem;
}

.bottomImg {
    position: absolute;
    height: 223rem;
    width: 100%;
    top: 0;
    margin: 0 auto;
    object-fit: cover;
    z-index: 1;
}

.bottomBox {
    position: absolute;
    z-index: 9;
}

.bottom>div {
    text-align: center;
    /* margin: 0 auto; */
}

.bottomTitle {
    height: 30rem;
    font-size: 30rem;
    font-weight: 500;
    color: #fff;
    line-height: 30rem;
}

.bottomTxt {
    height: 20rem;
    font-size: 20rem;
    font-weight: 400;
    color: #fff;
    margin-top: 19rem;
}

.bottomBox {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 40rem;
}

.bottomBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 170rem;
    height: 48rem;
    background: linear-gradient( 270deg, #FA9691 0%, #FA5789 100%);
    box-shadow: 0rem 9rem 24rem 0rem rgba(255,54,116,0.3), 0rem 3rem 8rem 0rem rgba(239,71,111,0.17);
    border-radius: 24rem;
    color: #fff;
    font-size: 16rem;
    margin-top: 32rem;
}

.bottomBtn:hover {
    background: linear-gradient(270deg, #FA5789 0%, #FA9691 100%);
}

.bottomBtn img {
    width: 24rem;
    height: 24rem;
    margin-right: 12rem;
}



.company {
    margin-top: 2rem;
}

.footerTxt {
    margin-top: 8rem;
}

.footer {
    height: 71rem;
    background: #000;
    font-size: 14rem;
    text-align: center;
    color: #fff;
    overflow: hidden;
    width: 100%;
}

.footer div {
    color: #fff;
    opacity: 0.6;
}

.footerTxt {
    margin-top: 19rem;
}

.footerTxt span {
    margin: 0 4rem;
    color: #fff;
    font-size: 12rem;
}

.footerTxt a {
    margin: 0 04rem;
    color: #fff;
    font-size: 12rem;
}

.footerTxt a:hover {
    color: #30CF85;
}

.Divider {
    display: inline-block;
    width: 01rem;
    height: 12rem;
    font-size: 12rem;
    font-weight: 400;
    background-color: #FFFFFF;
    line-height: .17rem;
    vertical-align: middle;
    margin-left: 08rem;
}

.rightFixed {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    right: 0;
    width: 52rem;
    height: 103rem;
    z-index: 999;
    /* background-color: green; */
    top: 730rem;
    background: #FFFFFF;
    box-shadow: 0rem 0rem 10rem 0rem rgba(18, 94, 217, 0.07);
    border-radius: 8rem;
    border: 1rem solid #EFEFEF;
}

.customer {
    background-image: url('../img/icon_customer_service_nor@2x.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 19rem;
    height: 20rem;
    margin: 0 auto;
    margin-top: 8rem;
    cursor: pointer;
}

.customer:hover {
   color: #FF3674;;

}

.customerTxt {
    /* width: .2rem; */
    height: 10rem;
    font-size: 12rem;
    transform: scale(0.82);
    font-weight: 400;
    color: #1A1A1A;
    line-height: 22rem;
    text-align: center;
    margin-left: 3rem;
}

.customerBox {
    cursor: pointer;
}

.customerBox:hover .QRcode {
    display: block;
}

.QRcode span {
    font-size: 12rem;
}

.customerBox:hover div {
   color: #FF3674;
}

.customerBox:hover a {
   color: #FF3674;
}

.customerBox:hover .customer {
    background-image: url('../img/icon_Customer_service_hover@2x.png');
}

.solids {
    width: 44rem;
    height: 1rem;
    background: #EFEFEF;
    margin: 0 auto;
    margin-top: 12rem;

}

.downLoadimg {
    background-image: url('../img/icon_download_nor@2x.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 20rem;
    height: 20rem;
    margin: 0 auto;
    margin-top: 8rem;
    cursor: pointer;
}

.downLoadTXt {
    height: 10rem;
    font-size: 12rem;
    transform: scale(0.82);
    font-weight: 400;
    color: #1A1A1A;
    line-height: 22rem;
    text-align: center;
    margin-left: 3rem;
}

.downLoadimg:hover {
    background-image: url('../img/global_icon_download_hover@2x.png');
}

.downLoadBox {
    cursor: pointer;
}

.downLoadBox:hover div,
a {
   color: #FF3674;
}

.downLoadBox:hover a {
   color: #FF3674;
}

.downLoadBox:hover .downLoadimg {
    background-image: url('../img/global_icon_download_hover@2x.png');
}

.QRcode {
    width: 140rem;
    height: 173rem;
    background-color: #fff;
    position: absolute;
    left: -152rem;
    top: 0;
    display: none;
    border-radius: 8rem;
    border: 1rem solid #EFEFEF;
    box-shadow: 0rem 0rem 10rem 0rem rgba(18, 94, 217, 0.07);
    text-align: center;
}

.QRcode>img {
    width: 124rem;
    height: 124rem;
    margin: 8rem;
}

.rightBackTopBox {
    position: fixed;
    right: 0;
    width: 52rem;
    height: 53rem;
    z-index: 999;
    /* background-color: green; */
    top: 850rem;
    background: #FFFFFF;
    box-shadow: 0rem 0rem 10rem 0rem rgba(18, 94, 217, 0.07);
    border-radius: 8rem;
    border: 1rem solid #EFEFEF;

}


.backTopimg {
    background-image: url('../img/global_icon_uptop@2x.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 20rem;
    height: 20rem;
    margin: 0 auto;
    margin-top: 8rem;
    cursor: pointer;
}

.backTopTXt {
    height: 10rem;
    font-size: 12rem;
    transform: scale(0.82);
    font-weight: 400;
    color: #1A1A1A;
    line-height: 22rem;
    text-align: center;
    /* margin-left: -03rem; */
}

.backTopimg:hover {
    background-image: url('../img/global_icon_up_hover@2x.png');
}

.backTopBox {
    cursor: pointer;
}

.backTopBox:hover div {
   color: #FF3674;
}

.backTopBox:hover .backTopimg {
    background-image: url('../img/global_icon_up_hover@2x.png');
}




/* 政策 */
p {
    margin-bottom: 2rem !important;
    line-height: .26rem;
}

.Breadcrumbs {
    width: 12rem;
    margin: 0 auto;
    color: #999999;
    margin-top: .14rem;
    font-size: .14rem;
}

.Breadcrumbs a {
    font-size: .14rem;
    font-weight: 400;
    color: #333333;
    line-height: .14rem;
}

.Breadcrumbs a:hover {
   color: #FF3674;;
}

.article_title {
    font-size: .26rem;
    color: #4d4d4d;
    text-align: left;
    margin-bottom: .3rem;
    margin-top: .20rem;
    border-left: .02rem #04E19E solid;
    padding-left: .10rem;
}

.container {
    width: 12.00rem;
    margin: 0 auto;
}



#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    display: none;
}

#loading-spinner {
    border: 8rem solid #f3f3f3;
    border-top: 8rem solid #0FEFB5;
    border-radius: 50%;
    width: 50rem;
    height: 50rem;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.dwon-an {
    position: absolute;
    width: 220rem;
    height: 220rem;

    background: #fff;
    opacity: 0.1;
    z-index: 1;
    animation: bigyuan 1.2s infinite;
    -webkit-animation: bigyuan 1.2s infinite;
    border-radius: 100%;
}

@keyframes bigyuan {
    0% {
        transform: scale(0);
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
    }
}