@charset "UTF-8";

.loading-box{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    /* display: none; */
}
.loading-box .bubble-box1{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.loading-box .bubble-box1 .cup-bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.loading-box .load-bubbles .load-bubble{
    position: absolute;
    border-radius: 100%;
}
.loading-box .load-bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.loading-box .load-bg .bubble{
    position: absolute;
    border-radius: 100%;
    animation:spin 6s infinite linear;
    transform-origin: 50% 45%;
}
.loading-box .load-bg .bubble:nth-child(2n){
    animation:spin2 6s infinite linear;
}

.loading-box .load-bg .bubble1{
    width: 51%;
    padding-top: 51%;
    border: 1px solid rgba(255,255,255,.3);
    left: -10.4%;
    top: -29.6%;

}
.loading-box .load-bg .bubble2{
    width: 50%;
    padding-top: 50%;
    background-color:rgba(255,255,255,.1);
    left: -28.6%;
    top: 27.77%
}
.loading-box .load-bg .bubble3{
    width: 39.583%;
    padding-top: 39.583%;
    background-color:rgba(255,255,255,.1);
    left: 79.427%;
    top: -9.2%
}
.loading-box .load-bg .bubble4{
    width: 51%;
    padding-top: 51%;
    border: 1px solid rgba(255,255,255,.3);
    left: 70.83%;
    top: 48%
}



.loading-box .bubble-box1 .txt{
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: #fff;
    text-align: center;
    font-family: "Gilroy-Medium";
}



.loading-box .cup-bg {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    /* transform: scale(42);
    transform-origin: 50% 10%; */
}



.loading-box .cup-svg svg {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}



.loading-box .cup-svg svg rect {
    fill: white;
    transform-origin: center center;
}

.loading-box .cup-svg .cup{
    transform-origin: center center;
    /* transform: scale(10) */
}

.loading-box .cup-svg svg > rect {
    -webkit-mask: url(#mask);
    mask: url(#mask);
    transform-origin: 50% 32%;
}

.loading-box .bubble-box1 .load-bubble-wrap{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.load-bubble-wrap .fake-bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #d80c25;
}

.loading-box .bubble-bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #fff;
}
.loading-box .bubble-bg .bubble{
    position: absolute;
    border-radius: 100%;
    animation:spin 6s infinite linear;
    transform-origin: 50% 46%;
}
.loading-box .bubble-bg .bubble:nth-child(2n){
    animation:spin2 6s infinite linear;
}

.loading-box .bubble-bg .sm-bubble{
    transform-origin: 30% 30px;
}
.loading-box .bubble-bg .bubble1{
    top: -8.7%;
    left: -4.27%;
    width: 12%;
    padding-top: 12%;
    background-color: #d80c25;
    opacity: .05;
    filter: alpha(opacity=5);
}
.loading-box .bubble-bg .bubble2{
    width: 50%;
    padding-top: 50%;
    left: -27.6%;
    top: 27.22%;
    background: -webkit-linear-gradient(top, rgba(247,247,247,.5),#fff 50%,rgba(247,247,247,.5) 100%);
    background: -ms-linear-gradient(top, rgba(247,247,247,.5),#fff 50%,rgba(247,247,247,.5) 100%);
    background: linear-gradient(top, rgba(247,247,247,.5),#fff 50%,rgba(247,247,247,.5) 100%);
    border: 1px solid rgba(221,221,221,.5);
}
.loading-box .bubble-bg .bubble3{
    width: 50%;
    padding-top: 50%;
    left: 72.67%;
    top: 43%;
    border: 1px solid rgba(216,12,37,.1);
}
.loading-box .bubble-bg .bubble4{
    width: 50%;
    padding-top: 50%;
    left: 72%;
    top: -53.7%;
    background-color: rgba(216,12,37,.05);
}
.loading-box .bubble-bg .bubble5{
    background-color: rgba(216,12,37,.2);
    width: 10px;
    padding-top: 10px;
    left: 30.2%;
    top: 34.375%;
}
.loading-box .bubble-bg .bubble6{
    background-color: rgba(216,12,37,.2);
    width: 10px;
    padding-top: 10px;
    left: 80.52%;
    top: 40.4%;
}
.loading-box .bubble-bg .bubble7{
    background-color: rgba(216,12,37,.2);
    width: 10px;
    padding-top: 10px;
    left: 7.6%;
    top: 36.458%;
}
.loading-box .bubble-bg .bubble8{
    background-color: rgba(216,12,37,.2);
    width: 8px;
    padding-top: 8px;
    left: 10.9375%;
    top: 46.67%;
}
.loading-box .bubble-bg .bubble9{
    background-color: rgba(216,12,37,.2);
    width: 8px;
    padding-top: 8px;
    left: 67.4%;
    top: 51%;
}
.loading-box .bubble-bg .bubble10{
    border: 1px solid #d80c25;
    width:3.75%;
    padding-top:3.75%;
    left: 18.958%;
    top: 16.979%;
}
.loading-box .bubble-bg .bubble11{
    border: 1px solid #d80c25;
    width: 7.3%;
    padding-top: 7.3%;
    left: 76.2%;
    top: 85.7%;
}
.loading-box .bubble-bg .bubble12{
    border: 1px solid #d80c25;
    width: 7.3%;
    padding-top: 7.3%;
    left: 57.45%;
    top: -10.9375%;
}
.loading-box .bubble-bg .bubble13{
    border: 1px solid #d80c25;
    width: 3.75%;
    padding-top: 3.75%;
    left:-1.875%;
    top: 83.75%;
}
.loading-box .bubble-bg .bubble14{
    width: 12.5%;
    padding-top: 12.5%;
    left:-8.854%;
    top: 43.75%;
    background: -webkit-linear-gradient(top, rgba(216,12,37,.6),rgba(255,255,255,.5) 100%);
    background: -ms-linear-gradient(top, rgba(216,12,37,.6),rgba(255,255,255,.5) 100%);
    background: linear-gradient(top, rgba(216,12,37,.6),rgba(255,255,255,.5) 100%);
}
.loading-box .bubble-bg .bubble15{
    width: 6px;
    padding-top: 6px;
    left:93.3854%;
    top: 77.5%;
    background-color: rgba(216,12,37,.2);
}
.loading-box .bubble-bg .bubble16{
    width: 30px;
    padding-top: 30px;
    left:25%;
    top: 74.479%;
    background-color: rgba(216,12,37,.2);
}
.loading-box .bubble-bg .bubble17{
    width: 16px;
    padding-top: 16px;
    left:67.7%;
    top: 74.479%;
    background-color: rgba(216,12,37,.2);
}
.loading-box .bubble-bg .bubble18{
    width: 6px;
    padding-top: 6px;
    left:75%;
    top: 52%;
    background-color: rgba(216,12,37,.2);
}
.loading-box .bubble-bg .bubble19{
    width: 4px;
    padding-top: 4px;
    left:87.5%;
    top: 80.2%;
    background-color: rgba(216,12,37,.2);
}
.loading-box .bubble-bg .bubble20{
    width: 4px;
    padding-top: 4px;
    left:5.2%;
    top: 76%;
    background-color: rgba(216,12,37,.2);
}
.loading-box .bubble-bg .bubble21{
    width: 13%;
    padding-top: 13%;
    left:22.5%;
    top: -20.3125%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,.5),rgba(216,12,37,.6) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,.5),rgba(216,12,37,.6) 100%);
    background: linear-gradient(left, rgba(255,255,255,.5),rgba(216,12,37,.6) 100%);
}


.loading-box .event-text{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    z-index: 3;
}
.loading-box .event-text .time{
    font-size: 1rem;
    line-height: 1.1rem;
    color: #333;
    opacity: 0;
    filter: alpha(opacity=0);
}
.loading-box .event-text .time span{
    font-family: "Gilroy-Medium";
}

.loading-box .event-text .con{
    font-size: 1rem;
    line-height: 1.4rem;
    color: #333;
    margin-top: .5rem;
}
.loading-box .event-text .con p{

    opacity: 0;
    filter: alpha(opacity=0);
}
.loading-box .event-text .con span{
    color: #d80c25;
}
.loading-box .text1 .con span{
    font-weight: bold;
}
.loading-box .event-text .con .num{
    font-family: "gilroy-bold";
    font-size: 1.5rem;
}

.loading-box .event-text .icon{
    width: 238px;
    margin: 0 auto;
}
.loading-box .event-text .icon img{
    width: 100%;
}
.loading-box .event-text .tit{
    font-size: 1.25rem;
    line-height: 1.5rem;
    color: #333;
    margin-top: .6rem;
}
.loading-box .event-text .index-more{
    margin: 1.5rem auto 0;
}
.loading-box .event-text.text4{
    opacity: 0;
    filter: alpha(opacity=0);
    visibility: hidden;
}
.index-more{
    display: block;
    width: 154px;
    height: 48px;
    background-color: rgba(51, 51, 51, 1);
    box-sizing: border-box;
    border-radius: 24px;
    padding: 0 9px 0 30px;
}
.index-more:before{
    content: "";
    position: absolute;
    right: .25rem;
    top: 50%;
    margin-top: -.375rem;
    width: .75rem;
    height: .75rem;
    border-radius: 100%;
    background-color: #ac0021;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: all .3s;
}
.index-more span{
    display: inline-block;
    *display: inline;
    zoom: 1;
    font-size: .4rem;
    line-height: 1.15rem;
    color: #fff;
    vertical-align: top;
}
.loading-box .event-text.text2 .con{
    margin-top: .6rem;

}
.loading-box .bubble-bg.on{
    opacity: 1;
    filter: alpha(opacity=100);
}

.loading-box .cup-wrap{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    padding-top: 100%;
    margin:-50% 0 0 -50%;
}
.loading-box .cup-circle{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 0;
    filter: alpha(opacity=0);
    visibility: hidden;
}


.click_more{
    width: 154px;
    height: 48px;
    background: #333333;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 9px 0 30px;
    margin: 57px auto 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.7s;
}
.click_more p{
    font-size: 16px;
    font-weight: 300;
    color: #FEFEFE;
}
.click_more .circle{
    width: 32px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.click_more .iconfont{
    font-size: 22px;
    transform: rotate(180deg);
}
.click_more:hover{
    background: #cf000d;
}
.loading-box .cup-group-svg{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20rem;
    height: 20rem;
    margin: -10rem 0 0 -10rem;
    transform-origin: center center;
}

.loading-box .cup-group-svg .first-item,
.loading-box .cup-group-svg .cup-item{
    position: absolute;
    left: 50%;
    margin-left: -.75rem;
    top: 0;
    width: 1.5rem;
    transform-origin: center 10rem;
}
.loading-box .cup-group-svg .first-item img,
.loading-box .cup-group-svg .cup-item img{
    width: 100%;
}
.loading-box .cup-group-svg .first-item img{
    transform: scale(44);
    transform-origin: center center;
}
.loading-box .cup-group-svg .cup-item{
    opacity: 0;
    filter: alpha(opacity=0);
}

.loading-box .cup-group-svg .first-item{
    top: 20%;
}

.loading-box .cup-bg .white-svg{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20.1rem;
    height: 20.1rem;
    opacity: 0;
    filter: alpha(opacity=0);
    margin: -10.05rem 0 0 -10.05rem;
    transform: rotate(-100deg);
}

.loading-box .cup-group-svg.show .cup-item,
.loading-box .cup-group-svg.show .white-svg{
    opacity: 1;
    filter: alpha(opacity=100);
}

.loading-box .big-circle-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.loading-box .big-circle-box .big-circle{
    position: absolute;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 0;
    height: 0;

}
.loading-box .big-circle-box.on .big-circle{
    transition: width 1s cubic-bezier(0.14, 0.76, 0.25, 1),padding-top 1s cubic-bezier(0.14, 0.76, 0.25, 1);
}
.loading-box .big-circle-box .big-circle .block{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border-style: solid;
    border-width: calc(2.5rem + 2px);
    border-color: #fff;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    opacity: 0;
    filter: alpha(opacity=0);
}
.loading-box .big-circle-box .red-circle{
    width: 20.1rem;
    padding-top: 20.1rem;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 5;
}

.loading-box .big-circle-box.on .big-circle .block{
    opacity: 1;
    filter: alpha(opacity=100);
}
.loading-box .big-circle-box.on .red-circle{
    width: 110%;
    padding-top: 110%;
}
.loading-box .big-circle-box .red-circle .block{
    border-color:#d80c25;
    opacity: 1;
    filter: alpha(opacity=100);
}
.loading-box .big-circle-box.on .red-circle.out{
    width: 130%;
    padding-top: 130%;
    transition: width .5s, padding-top .5s;
}

.loading-box .cup-group-svg svg{
    width: 100%;
    height: 100%;
    transform-origin: center center;
}
.loading-box .cup-group{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    opacity: 0;
    filter: alpha(opacity=0);
}
.loading-box .cup-group .white{
    transform: rotate(-100deg);
    transform-origin: center center;
}
.loading-box .cup-circle .red{
    opacity: 0;
    filter: alpha(opacity=0);
    transition: opacity 1s;
}
.loading-box .cup-circle .red.on{
    opacity: 1;
    filter: alpha(opacity=100);
}

.loading-box .circle-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    /* background-color: #fff; */
}
.loading-box .cup-circle  rect{
    fill: #fff;
}
.loading-box .circle-group .white-bg{
    -webkit-mask: url(#red-circle);
    mask: url(#red-circle);
    /* opacity: 0;
    filter: alpha(opacity=0); */
}
.loading-box .cup-group.white rect{
    fill: #fff;
}
.cup-circle.on .path-circle{
    display: none;
}
.loading-box .circle-group2 rect{
    -webkit-mask: url(#trans-circle);
    mask: url(#trans-circle);
    opacity: 0;
    filter: alpha(opacity=0);
}

.ani-circle{
    animation: anim 4s linear infinite;
}
.ani-circle:nth-child(3n){
    animation: anim2 4s linear infinite;
}

.loading-box .skip-btn{
    position: absolute;
    left: 50%;
    bottom: 5.56%;
    width: 3.5rem;
    height: .9rem;
    background-color: #fff;
    border-radius: .45rem;
    text-align: center;
    font-size: 0;
    z-index: 3;
    margin-left: -1.75rem;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    transition: background-color .3s;
    display: none;
}
.loading-box .skip-btn span{
    display: inline-block;
    *display: inline;
    zoom: 1;
    font-size: .35rem;
    line-height: .9rem;
    color: #d70d26;
    position: relative;
    transition: all .3s;
}
.loading-box .skip-btn span:before{
    content: "";
    position: absolute;
    right: -.4rem;
    top: 50%;
    margin-top: -4px;
    width: 9px;
    height: 9px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: all .3s;
}
/* loading */

.index-page header{
    height: 0;
    padding: 0;
    top: 1.35rem;
}
.index-container footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 2;
}
/* .index-container .top-btn{
	display: none;
} */
.index-container{
    /* opacity: 0;
    filter: alpha(opacity=0);
    transition: opacity .5s; */
}
.index-container.is-show{
    opacity: 1;
    filter: alpha(opacity=100);

}
.index-wrap{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    overflow: hidden;
}


.index-wrap>ul{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}
.index-wrap>ul>li{
    height: 100vh;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}



.banner .pc-box{
    overflow: hidden;
    position: relative;
    background-color: #fff;
}
.banner .swiper-slide{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
    overflow: hidden;
}
.banner .swiper-slide .block{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.banner .slider-inner{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.banner .ban-video{
    /* background-color: #000; */
}
.banner .swiper-slide video{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    /* background-color: #000; */
}
.banner .swiper-slide .img{
    background-size: cover;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.04);
    transition: transform 5.3s ease .7s;
}
.banner .swiper-slide .m-img{
    display: none;
}

.banner .swiper-slide .text-box{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}
.banner .swiper-slide .text-box .tit{
    font-size: 1.75rem;
    line-height: 2rem;
    color: #333;
    overflow: hidden;
}

.banner .ani-inner{
    transform: translateY(100%);

}
.banner .swiper-slide .text-box .ban-more{
    margin-top: 1rem;
    overflow: hidden;
}

.banner .swiper-slide-active .img{
    transform: scale(1);
}

.banner .swiper-slide.cur .ani-inner{
    transform: translateY(0);
    transition: transform .7s;
}

.banner .btns{
    position: absolute;
    left: 3.125%;
    bottom: 5.55%;
    /* text-align: center; */
    z-index: 3;
    font-size: 0;
    white-space: nowrap;
}
.banner .btns .swiper-pagination-bullet{
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: .75rem;
    height: 3px;
    background-color: #fff;
    transition: all .3s;
    margin-right: 5px;
}
.banner .btns .swiper-pagination-bullet-active{
    width: 1.75rem;
    background-color: #d70c25;
}
.header-right.brand-open{
    width: 1rem;
}
.header-right.brand-open .close-btn{
    display: block;
    margin: 0;
}
.header-right.brand-open .search-btn,
.header-right.brand-open .lang-btn{
    display: none;
}
.index-brand-box{
    height: 100%;
    position: relative;
}
.index-brand-box .bimg-tab{
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1;
}
.index-brand-box .bimg-tab .swiper-slide{
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.index-brand-box .bimg-tab .img{
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    transition: all .8s;
}
.index-brand-box .bimg-tab .swiper-slide:nth-child(1) .img{
    background-position: -25% bottom;
    background-size: auto 70%;
}
.index-brand-box .bimg-tab .swiper-slide:nth-child(2) .img{
    background-position: bottom center;
    background-size: auto 90%;
}
.index-brand-box .bimg-tab .swiper-slide:nth-child(3) .img{
    background-position: right bottom;
    background-size: auto 80%;
}

.index-brand-box .bimg-tab .text-box{
    position: absolute;
    left: 0;
    top: 22.22%;
    width: 100%;
    text-align: center;
}
.index-brand-box .bimg-tab .text-box .text{
    /* transform: translateY(-40px);
    opacity: 0;
    filter: alpha(opacity=0); */
}
.index-brand-box .bimg-tab .text-box .bubbles-tit{
    position: relative;
}
.index-brand-box .bimg-tab .text-box .bubbles{
    width:5.5rem;
    height: 5.5rem;
    margin:0 auto;
    position: relative;
}
.index-brand-box .bimg-tab .text-box .bubbles .bubble{
    position: absolute;
    border-radius: 100%;
}
.index-brand-box .bimg-tab .text-box .bubbles .bubble1{
    width:10px;
    height: 10px;
    left:17.27%;
    top:59.545%;
}
.index-brand-box .bimg-tab .text-box .bubbles .bubble2{
    width:10px;
    height: 10px;
    left:75.9%;
    top:64.65%;
}
.index-brand-box .bimg-tab .text-box .bubbles .bubble3{
    width:2px;
    height: 2px;
    left:75.2%;
    top:84.687%;
}
.index-brand-box .bimg-tab .text-box .bubbles .bubble4{
    width:6px;
    height: 6px;
    left:68.636%;
    top:21.8%;
}
.index-brand-box .bimg-tab .text-box .bubbles .bubble5{
    width:6px;
    height: 6px;
    left:28.628%;
    top:79.865%;
}
.index-brand-box .bimg-tab .text-box .bubbles .bubble6{
    width:.3rem;
    height: .3rem;
    left:28.5%;
    top:41.264%;
}
.index-brand-box .bimg-tab .text-box .bubbles .bubble7{
    width:1.25rem;
    height: 1.25rem;
    left:41.6%;
    top:7.73%;
}
.index-brand-box .bimg-tab .text-box .bubbles .bubble8{
    width:.95rem;
    height: .95rem;
    left:53.636%;
    top:35.9%;
    background-color: #eee;
}
.index-brand-box .bimg-tab .text-box .bubbles .bubble9{
    width:.65rem;
    height: .65rem;
    left:37.4636%;
    top:37%;
}
.index-brand-box .bimg-tab .text-box .bubbles .bubble10{
    width:.75rem;
    height: .75rem;
    left:73.636%;
    top:32.8127%;
}
.index-brand-box .bimg-tab .text-box .bubbles .bubble11{
    width:1.4rem;
    height: 1.4rem;
    left:11.6%;
    top:11.818%;
}
.index-brand-box .bimg-tab .text-box .bubbles .bubble12{
    width:.3rem;
    height: .3rem;
    left:41.6%;
    top:78.65%;
}
.index-brand-box .bimg-tab .text-box .bubbles .bubble13{
    width:.75rem;
    height: .75rem;
    left:48.7277%;
    top:77.358%;
}

.index-brand-box .bimg-tab .xpp-slide .text-box .bubbles .bubble1,
.index-brand-box .bimg-tab .xpp-slide .text-box .bubbles .bubble2,
.index-brand-box .bimg-tab .xpp-slide .text-box .bubbles .bubble3,
.index-brand-box .bimg-tab .xpp-slide .text-box .bubbles .bubble12{
    background-color:#d80c25;
}
.index-brand-box .bimg-tab .xpp-slide .text-box .bubbles .bubble4,
.index-brand-box .bimg-tab .xpp-slide .text-box .bubbles .bubble5,
.index-brand-box .bimg-tab .xpp-slide .text-box .bubbles .bubble9,
.index-brand-box .bimg-tab .xpp-slide .text-box .bubbles .bubble10,
.index-brand-box .bimg-tab .xpp-slide .text-box .bubbles .bubble11,
.index-brand-box .bimg-tab .xpp-slide .text-box .bubbles .bubble13{
    border:1px solid #d80c25;
}
.index-brand-box .bimg-tab .xpp-slide .text-box .bubbles .bubble6{
    background-color: #d80c25;
    opacity: .1;
}
.index-brand-box .bimg-tab .xpp-slide .text-box .bubbles .bubble7{
    background-color:#fdf3f4;
}


.index-brand-box .bimg-tab .meco-slide .text-box .bubbles .bubble1,
.index-brand-box .bimg-tab .meco-slide .text-box .bubbles .bubble2,
.index-brand-box .bimg-tab .meco-slide .text-box .bubbles .bubble3,
.index-brand-box .bimg-tab .meco-slide .text-box .bubbles .bubble12{
    background-color:#45b7e6;
}
.index-brand-box .bimg-tab .meco-slide .text-box .bubbles .bubble4,
.index-brand-box .bimg-tab .meco-slide .text-box .bubbles .bubble5,
.index-brand-box .bimg-tab .meco-slide .text-box .bubbles .bubble9,
.index-brand-box .bimg-tab .meco-slide .text-box .bubbles .bubble10,
.index-brand-box .bimg-tab .meco-slide .text-box .bubbles .bubble11,
.index-brand-box .bimg-tab .meco-slide .text-box .bubbles .bubble13{
    border:1px solid #45b7e6;
}
.index-brand-box .bimg-tab .meco-slide .text-box .bubbles .bubble6{
    background-color: #45b7e6;
    opacity: .1;
}
.index-brand-box .bimg-tab .meco-slide .text-box .bubbles .bubble7{
    background-color:#ddf5ff;
}


.index-brand-box .bimg-tab .lan-slide .text-box .bubbles .bubble1,
.index-brand-box .bimg-tab .lan-slide .text-box .bubbles .bubble2,
.index-brand-box .bimg-tab .lan-slide .text-box .bubbles .bubble3,
.index-brand-box .bimg-tab .lan-slide .text-box .bubbles .bubble12{
    background-color:#02695e;
}
.index-brand-box .bimg-tab .lan-slide .text-box .bubbles .bubble4,
.index-brand-box .bimg-tab .lan-slide .text-box .bubbles .bubble5,
.index-brand-box .bimg-tab .lan-slide .text-box .bubbles .bubble9,
.index-brand-box .bimg-tab .lan-slide .text-box .bubbles .bubble10,
.index-brand-box .bimg-tab .lan-slide .text-box .bubbles .bubble11,
.index-brand-box .bimg-tab .lan-slide .text-box .bubbles .bubble13{
    border:1px solid #02695e;
}
.index-brand-box .bimg-tab .lan-slide .text-box .bubbles .bubble6{
    background-color: #02695e;
    opacity: .1;
}
.index-brand-box .bimg-tab .lan-slide .text-box .bubbles .bubble7{
    background-color:#c6e4e1;
}

.index-brand-box .bimg-tab .text-box .bubbles .bubble{
    transform-origin:40% 10px;
    animation: spin 4s linear infinite;
}
.index-brand-box .bimg-tab .text-box .bubbles .bubble:nth-child(2n){
    animation: spin2 4s linear infinite;
}
.index-brand-box .bimg-tab .text-box .bubbles .bubble:nth-child(3n){
    animation: spin2 4s linear infinite .3s;
}

.index-brand-box .bimg-tab .text-box .type-tit{
    font-size: .75rem;
    line-height: .8rem;
    position: absolute;
    left: 0;
    bottom: 30%;
    width: 100%;
    font-weight: bold;
    font-family: "gilroy-bold";
}
.index-brand-box .bimg-tab .text-box .desc{
    font-size: 1.75rem;
    line-height: 1.8rem;
    color: #333;
    overflow: hidden;
}
.index-brand-box .bimg-tab .text-box .more-box{
    margin: 1.4rem auto 0;
    width: 5.75rem;
    overflow: hidden;
}
.index-brand-box .bimg-tab .text-box .index-more{
    width: auto;
    /* margin: 1.4rem auto 0;
    width: 5.75rem; */
    /* transform: translateY(40px);
    opacity: 0;
    filter: alpha(opacity=0); */
}

.index-brand-box .brand-prev,
.index-brand-box .brand-next{
    position: absolute;
    top: 50%;
    width: 1.6rem;
    transform: translateY(-50%) scale(0);
    z-index: 3;
    /* transition: transform 1s .5s; */
}

.index-brand-box .brand-prev{
    left: 3.125%;
}
.index-brand-box .brand-next{
    right: 3.125%;
}

.index-brand-box .brand-prev img,
.index-brand-box .brand-next img{
    width: 100%;
}

.index-brand-box .brand-prev .init,
.index-brand-box .brand-next .init{
    transition: all .3s;
}
.index-brand-box .brand-prev .hover-box,
.index-brand-box .brand-next .hover-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    transition: all .3s;
}
.index-brand-box .brand-prev .hover-box .item,
.index-brand-box .brand-next .hover-box .item{
    display: none;
}
.index-brand-box .brand-prev .hover-box .item img{
    width: 100%;
}
.index-brand-box .brand-prev .txt,
.index-brand-box .brand-next .txt{
    position: absolute;
    top: 50%;
    margin-top: -.3rem;
    font-size: .5rem;
    line-height: .6rem;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    /* opacity: 0;
    filter: alpha(opacity=0);
    transition: all .3s; */
}

.index-brand-box .brand-prev .txt{
    left: 100%;
    padding-left: .5rem;
}
.index-brand-box .brand-next .txt{
    right: 100%;
    padding-right: .5rem;
}
.index-brand-box .brand-prev .txt .o,
.index-brand-box .brand-next .txt .o{
    display: inline-block;
    *display: inline;
    zoom: 1;
    transform: translateY(100%);
    opacity: 0;
    transition: transform .2s;
}

.index-brand-box .brand-svg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}


.index-brand-box .brand-list .ani-inner{
    transform: translateY(0);
    transition: transform 1s;
}
.index-brand-box.is-open .brand-list .ani-inner{
    transform: translateY(100%);
}

.index-brand-box .bubbles-inner{
    transform: translateY(-50%);
    opacity: 0;

}
/* .index-brand-box.is-open .bubbles-inner{
	transform: translateY(0);
	opacity: 1;
	transition: all 1s 1.5s;
} */

.index-brand-box .bubbles-ani-inner{
    transform: translateY(-1rem);
    opacity: 0;
}
.index-brand-box .bimg-tab .swiper-slide-active .bubbles-ani-inner{
    transform: translateY(0);
    opacity: 1;
    transition: all 1s;
}
.index-brand-box .bimg-tab .text-inner{
    transform: translateY(100%);
}

/* .index-brand-box.is-open .bimg-tab .text-inner{
	transform: translateY(0);
	transition: transform 1s 1.5s;
} */
.index-brand-box .bimg-tab .ani-inner{
    transform: translateY(100%)
}

.index-brand-box .bimg-tab .swiper-slide-active .ani-inner{
    transform: translateY(0);
    transition: transform 1s;
}

.i-news-bubble{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.i-news-bubble .bubble{
    position: absolute;
    border-radius: 100%;
    animation:spin 8s infinite linear;
    transform-origin: 50% 40%;
}
.i-news-bubble .bubble:nth-child(2n){
    animation:spin2 8s infinite linear;
}
.i-news-bubble .sm-bubble{
    transform-origin: 30% 30px;
}
.i-news-bubble .bubble1{
    width: 74px;
    height: 74px;
    border: 1px solid #dd2d43;
    left: -37px;
    top: 24.8%;
}
.i-news-bubble .bubble2{
    width: 24%;
    padding-top: 24%;
    left:62.5%;
    top: -28.6458%;
    background: -webkit-radial-gradient(#fff,#fdf4f5 100%);
    background: -ms-radial-gradient(#fff,#fdf4f5 100%);
    background: radial-gradient(#fff,#fdf4f5 100%);
}
.i-news-bubble .bubble3{
    width: 24%;
    padding-top: 24%;
    left:-7.5%;
    top: 80%;
    background: -webkit-radial-gradient(#fff,#fdf4f5 100%);
    background: -ms-radial-gradient(#fff,#fdf4f5 100%);
    background: radial-gradient(#fff,#fdf4f5 100%);
}
.i-news-bubble .bubble4{
    width: 30px;
    padding-top: 30px;
    left:31.25%;
    top: 86.979%;
    border: 1px solid #dd2d43;
}
.i-news-bubble .bubble5{
    width: 8.854%;
    padding-top: 8.854%;
    left:96.875%;
    top: 74.48%;
    border: 1px solid #dd2d43;
}

.index-news-box{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    z-index: 3;
}
.index-news-box .bubble-bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.news-view{
    width: 87.5%;
    margin: 0 auto;
}
.index-news-box .news-tit{
    font-size: 1.4rem;
    line-height: 1.5rem;
    color: #333;
    text-align: center;
    overflow: hidden;
}
.index-news-box .news-tit span{
    display:inline-block;
    *display: inline;
    zoom:1;
    transform:translateY(100%);
}

.index-news-box .index-news{
    margin: 1.5rem -.75rem 0;
}
.index-news .row{
    margin: 0 -.75rem;

}
.index-news .btns{
    display: none;
}
.index-news-box .index-news .row{
    opacity: 0;
}
.index-news .swiper-slide{
    padding: 0 .75rem;
    width: 33.33%;
}
.index-news .item{
    padding: 0 .75rem;
    box-sizing: border-box;
}
.index-news .con-box{
    /* background-color: #f7f7f7; */

    overflow: hidden;
    display: block;
    transition: all .3s;
}

.index-news .con-box .image{
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.index-news .con-box .img{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 8.6rem;
    transition: all .3s;
}
.index-news .con-box img{
    display: none;
    width: 100%;
}
.index-news .play-icon{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 1.3rem;
    height: 1.3rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.index-news .video-tit{
    font-size: .6rem;
    line-height: .7rem;
    color: #333;
    margin-top: .6rem;
    text-align: center;
    transition: all .3s;
}
.index-news .con-box .text{
    margin: .5rem 0 0;
}
.index-news .con-box .tit{
    font-size: .6rem;
    line-height: .75rem;
    color: #333;
    height: 1.5rem;
    overflow: hidden;
    font-family: "gilroy-regular";
    transition: all .3s;
}
.index-news .con-box .bottom{
    margin-top: .9rem;
}
.index-news .con-box .time{
    float: left;
    font-size: .375rem;
    line-height: .5rem;
    color: #999;
    font-family: "gilroy-regular";
    transition: all .3s;
}
.index-news .con-box .detail-btn{
    font-size: 0;
    float: right;
}
.index-news .con-box .detail-btn span{
    display: inline-block;
    *display: inline;
    zoom: 1;
    font-size: .4rem;
    line-height: .5rem;
    color: #999;
    /* padding-right: .7rem; */
    padding-right: 0;
    position: relative;
    transition: all .3s;
}
.index-news .con-box .detail-btn span:before{
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: .45rem;
    height: .45rem;
    background-color: #d80c25;
    border-radius: 100%;
    background-position: center;
    margin-top: -.225rem;
    opacity: 0;
    filter: alpha(opacity=0);
    transition: all .3s;
}
.index-news .index-news-more{
    margin-top: 1.5rem;
    overflow: hidden;
}
.index-news .index-more{
    margin:0 auto;
    transform:translateY(100%);
}

.index-data-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.index-data-box .data-list .invest-buttons{
    display: none;
}
.index-data{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.index-data .white-circle{
    position: absolute;
    width: 77%;
    padding-top: 77%;
    border-radius: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 100%;
    background-color: #fff;
}
.index-data .bubble-bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.index-data .bubble-bg .bubble{
    position: absolute;
    border-radius: 100%;
    animation:spin 8s infinite linear;
    transform-origin: 50% 45%;
}
.index-data .bubble-bg .bubble:nth-child(2n){
    animation:spin2 8s infinite linear;
}
.index-data .bubble-bg .sm-bubble{
    transform-origin: 30% 30px;
}
.index-data .bubble-bg .bubble1{
    left: -2.9%;
    top: -3.125%;
    width: 12%;
    padding-top: 12%;
    background-color: #d80c25;
    opacity: 0.05;
    filter: alpha(opacity=5);
}

.index-data .bubble-bg .bubble2{
    left: 7.5%;
    top: 25%;
    width: 72px;
    height: 72px;
    background-color: #eee;
    z-index: 3;
}
.index-data .bubble-bg .bubble3{
    left: 15.625%;
    top: 18.4375%;
    border: 1px solid #da172f;
    width: 72px;
    height: 72px;
}
.index-data .bubble-bg .bubble4{
    left: 29.895%;
    top: 22.9%;
    border: 1px solid #ddd;
    width: 5.73%;
    padding-top: 5.73%;
}
.index-data .bubble-bg .bubble5{
    left: 30.1%;
    top: 39.0625%;
    background-color: #d80c25;
    opacity: .1;
    width: 10px;
    height: 10px;
}
.index-data .bubble-bg .bubble6{
    width: 56.77%;
    padding-top: 56.77%;
    left: -28.3854%;
    top: 31.48%;
    background: -webkit-linear-gradient(left, rgba(247,247,247,1),rgba(247,247,247,.1) 100%);
    background: -ms-linear-gradient(left, rgba(247,247,247,1),rgba(247,247,247,.1) 100%);
    background: linear-gradient(left, rgba(247,247,247,1),rgba(247,247,247,.1) 100%);
}

.index-data .bubble-bg .bubble7{
    width: 13%;
    padding-top: 13%;
    left: -6.5%;
    top: 45.3125%;
    border:1px solid #ddd;
}
.index-data .bubble-bg .bubble8{
    width: 72px;
    height: 72px;
    left: -1.875%;
    top: 82.3%;
    border:1px solid #d80c25;
}
.index-data .bubble-bg .bubble9{
    width: 10px;
    padding-top: 10px;
    left: 8.33%;
    top: 41%;
    background-color: rgba(216,12,37,.1);
}
.index-data .bubble-bg .bubble10{
    width: 6px;
    padding-top: 6px;
    left: 11.67%;
    top: 50%;
    background-color: rgba(216,12,37,.1);
}
.index-data .bubble-bg .bubble11{
    width: 20.3125%;
    padding-top: 20.3125%;
    left: 82.03125%;
    top: -21.875%;
    background: -webkit-radial-gradient(#fff,#fdf4f5 100%);
    background: -ms-radial-gradient(#fff,#fdf4f5 100%);
    background: radial-gradient(#fff,#fdf4f5 100%);
}
/* .index-data .bubble-bg .bubble12{
	width: 20.3125%;
	padding-top: 20.3125%;
	left: 82.03125%;
	top: -21.875%;
	background: -webkit-radial-gradient(#fff,#fdf4f5 100%);
	background: -ms-radial-gradient(#fff,#fdf4f5 100%);
	background: radial-gradient(#fff,#fdf4f5 100%);
} */
.index-data .bubble-bg .bubble12{
    left: 80.2%;
    top: 67.7%;
    background-color: #d80c25;
    opacity: .05;
    width: 47.9%;
    padding-top: 47.9%;
}
.index-data .bubble-bg .bubble13{
    width: 10px;
    height: 10px;
    background-color: #d80c25;
    opacity: .1;
    left: 84.11%;
    top: 44.27%;
}
.index-data .bubble-bg .bubble14{
    width: 6px;
    height: 6px;
    background-color: #d80c25;
    opacity: .1;
    left: 68.23%;
    top: 54.17%;
}
.index-data .bubble-bg .bubble15{
    width: 6px;
    height: 6px;
    background-color: #d80c25;
    opacity: .1;
    left: 75.52%;
    top: 54.6875%;
}
.index-data .bubble-bg .bubble16{
    width: 16px;
    height: 16px;
    background-color: #d80c25;
    opacity: .1;
    left: 68.54%;
    top: 74.17%;
}

.index-data .data-circle{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.index-data .data-circle circle{
    transform-origin: center center;
    stroke-dashoffset: 3580;
    stroke-dasharray: 3580;
    transform: rotate(90deg);
    transform-origin: center center;
}

.index-data-box .data-title-box{
    position: absolute;
    left: 0;
    top: 21.2%;
    width: 100%;
}
.index-data-box .data-title-box .wrap-inner{
    overflow: hidden;
}
.index-data-box .data-title-box .title-canvas,
.data-title-box .title .enter-btn{
    transform:translateY(100%);
}
.index-data-box .data-title-box .m-tit{
    display: none;
}
.data-title-box .title>img{
    display: none;
}
.data-title-box .title .enter-box{
    text-align: center;
    margin-top: .6rem;
}
.data-title-box .title .enter-btn{
    display: inline-block;
    *display: inline;
    zoom: 1;
    text-align: center;
    font-size: .4rem;
    line-height: .5rem;
    color: #d10a30;
}
.index-data-box .data-list{
    position: absolute;
    left: 50%;
    top: 41.2%;
    width: 90%;
    margin-left: -45%;
}
.index-data-box .data-list .swiper-wrapper{
    justify-content: space-between;
}
.index-data-box .data-list .item{
    width: 5.75rem;
    height:5.75rem;
    position: relative;
}
.index-data-box .data-list .item a{
    display: block;
}

/* .index-data-box .data-list .item:nth-child(1){
	float: left;
	margin-left: 4.6875%;
}
.index-data-box .data-list .item:nth-child(2){
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
}
.index-data-box .data-list .item:nth-child(3){
	float: right;
	margin-right: 4.6875%;
} */

.index-data-box .data-list .item .wrap-inner{
    overflow: hidden;
}
.index-data-box .data-list .item .num-inner{
    width:5.75rem;
    height: 5.75rem;
    position: relative;
    z-index: 3;
    margin:0 auto;
    z-index: 3;
}
.index-data-box .data-list .item .desc-inner{
    height: 1.5rem;
    font-size: .6rem;
    line-height: .75rem;
    text-align: center;
    position: relative;
    top: -.5rem;
    left: 50%;
    width: 9rem;
    margin-left: -4.5rem;
    color: #333;
    transition: all .3s;
}
.index-data-box .data-list .item .title-svg{
    width: 100%;
    height: 100%;
    position: relative;
    top:100%;
    display:block;
}
.index-data-box .data-list .item:nth-child(1) .num-inner{
    transform-origin: 52.2% center;
}
.index-data-box .data-list .item:nth-child(2) .num-inner{
    transform-origin: 56% 59%;
    /* transform: scale(143); */
}

.index-data-box .data-list .item:nth-child(3) .num-inner{
    transform-origin: 50% 58%;
    /* transform: scale(133); */
}
.index-data-box .data-list .item .data-more{
    margin: 1.5rem auto 0;
    overflow: hidden;
    position: relative;
    width: 4.5rem;
    height: 1.15rem;
}
.index-data-box .data-list .item .data-more .index-more{
    margin: 0 auto;
    top: 100%;
    position: absolute;
    left: 0;
    opacity: 0;
    transition: opacity .3s;
}
.index-data-box .data-list .item.on{
    z-index:5;
}

.index-data-box .data-list .num-box .clip-text{
    font-size: 150px;
    transition: all .3s;
}
.index-data-box .data-list .num-box rect{
    /* transition: opacity .3s; */
}

.index-data-box .data-list .desc{
    position: relative;
    top:100%;
    white-space: nowrap;
}

.index-data-box .data-list .hover-circle{
    position: absolute;
    width:5.6rem;
    height:5.6rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    left:0;
    top:0;
    transform: scale(0);
    transition:all .3s;
}
.index-data-box .data-list .item.hover .num-box .black-bg{
    opacity: 0;
    filter: alpha(opacity=0);
}
.index-data-box .data-list .item.hover .num-box .clip-text{
    font-size: 160px;
    /* letter-spacing: -10px; */
}
.index-data-box .data-list .item.hover .num-box .desc-inner{
    transform: scale(1.6);
    top: 0;
}
.index-data-box .data-list .item.hover .hover-circle{
    transform: scale(1);
}
.index-data-box .data-list .item.hover .index-more{
    opacity: 1;
}
.index-data-box .data-list .item.clicked{
    z-index: 5;
}
.index-data-box .data-list .item.clicked .black-bg,
.index-data-box .data-list .item.clicked .num-bubbles,
.index-data-box .data-list .item.clicked image{
    opacity:0;
}
/* .index-data-box .data-list .item.clicked .num-inner{
	transition: transform .8s .1s;
}
.index-data-box .data-list .item:nth-child(1).clicked .num-inner{
	transform:scale(260);
}
.index-data-box .data-list .item:nth-child(2).clicked .num-inner{
	transform:scale(144);
}
.index-data-box .data-list .item:nth-child(3).clicked .num-inner{
	transform:scale(133);
} */

.data-tab-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
}
.data-tab-box .pub-close{
    display: none;
}
.data-tab-box .invest-buttons{
    display: none;
    z-index: 3;
}

.data-tab-box .first-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #e20c2f;
}
.first-box .bubble-bg .bubble,
.first-box .bubble-bg2 .bubble{
    border-radius: 100%;
    position: absolute;
}
.first-box .bubble-bg .bubble1{
    width: 56.77%;
    padding-top: 56.77%;
    left: -28.3854%;
    top: 41.67%;
    background: -webkit-linear-gradient(-180deg, rgba(255,255,255,.1),rgba(255,255,255,.1) 20%,transparent 50%,rgba(255,255,255,.1) 80%,rgba(255,255,255,.1) 100%);
    background: -ms-linear-gradient(-180deg, rgba(255,255,255,.1),rgba(255,255,255,.1) 20%,transparent 50%,rgba(255,255,255,.1) 80%,rgba(255,255,255,.1) 100%);
    background: linear-gradient(-180deg, rgba(255,255,255,.1),rgba(255,255,255,.1) 20%,transparent 50%,rgba(255,255,255,.1) 80%,rgba(255,255,255,.1) 100%);
}
.first-box .bubble-bg .bubble2{
    width: 56.77%;
    padding-top: 56.77%;
    left: 54.95%;
    top: 79.6875%;
    background: -webkit-linear-gradient(-90deg, rgba(255,255,255,.1),rgba(255,255,255,.1) 20%,transparent 50%,rgba(255,255,255,.1) 80%,rgba(255,255,255,.1) 100%);
    background: -ms-linear-gradient(-90deg, rgba(255,255,255,.1),rgba(255,255,255,.1) 20%,transparent 50%,rgba(255,255,255,.1) 80%,rgba(255,255,255,.1) 100%);
    background: linear-gradient(-90deg, rgba(255,255,255,.1),rgba(255,255,255,.1) 20%,transparent 50%,rgba(255,255,255,.1) 80%,rgba(255,255,255,.1) 100%);
}
.first-box .bubble-bg .bubble3{
    width: 56.77%;
    padding-top: 56.77%;
    left: 72.65625%;
    top: -57.8125%;
    background: -webkit-linear-gradient(-90deg, rgba(255,255,255,.1),rgba(255,255,255,.1) 20%,transparent 50%,rgba(255,255,255,.1) 80%,rgba(255,255,255,.1) 100%);
    background: -ms-linear-gradient(-90deg, rgba(255,255,255,.1),rgba(255,255,255,.1) 20%,transparent 50%,rgba(255,255,255,.1) 80%,rgba(255,255,255,.1) 100%);
    background: linear-gradient(-90deg, rgba(255,255,255,.1),rgba(255,255,255,.1) 20%,transparent 50%,rgba(255,255,255,.1) 80%,rgba(255,255,255,.1) 100%);
}
.first-box .bubble-bg .bubble4{
    width: 114px;
    height: 114px;
    border: 1px solid #fff;
    left: 29.17%;
    top: -7%;
}
.first-box .bubble-bg .bubble5{
    width: 12px;
    height: 12px;
    background-color: #ff495f;
    left: 15.9375%;
    top: 23.125%;
}
.first-box .bubble-bg .bubble6{
    width: 36px;
    height: 36px;
    background-color: #fff;
    left: 4.48%;
    top: 35.625%;
}
.first-box .bubble-bg .bubble7{
    width: 36px;
    height: 36px;
    background-color: #fff;
    left: 78.3854%;
    top: 98.125%;
}
.first-box .bubble-bg .bubble8{
    width: 54px;
    height: 54px;
    border:1px solid #fff;
    left: 98.177%;
    top: 72.9%;
}


.first-box .bubble-bg2 .bubble1{
    width: 26px;
    height: 26px;
    border: 1px solid #fff;
    left: 35.4%;
    top: 87.5%;
}
.first-box .bubble-bg2 .bubble2{
    width: 16px;
    height: 16px;
    background-color: #fff;
    opacity: .1;
    left: 71%;
    top: 63%;
}
.first-box .bubble-bg2 .bubble3{
    width: 84px;
    height: 84px;
    background-color: #ff495f;
    left: 65.52%;
    top: 20.83%;
}

.first-box .circle-box{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 51.5625%;
    border-radius: 100%;
    padding-top: 51.5625%;
    transform: translate(-50%, -50%);

}
.first-box .circle-box .circle1{
    position: absolute;
    width: 100%;
    padding-top: 100%;
    left: 50%;
    top: 50%;
    margin:-50% 0 0 -50%;
    transform: scale(0);
    border-radius: 100%;
    background-image: linear-gradient(-45deg, rgba(255,255,255,.3) 0 ,rgba(255,255,255,.07) 30%, #e20c2f 50%,rgba(255,255,255,.07) 70%,rgba(255,255,255,.3) 100%);
}

.first-box .circle-box .circle2{
    position: absolute;
    width: 100%;
    /* transform: rotate(-45deg); */
    transform: scale(1) rotate(-90deg);
    left: 0;
    top: 0;
    transform-origin: center center;
}
.first-box .circle-box .circle2 circle{
    stroke-dasharray: 2080;
    stroke-dashoffset: -2080;
}
.first-box .circle-box .circle3{
    position: absolute;
    width: 52.52%;
    top: 50%;
    left: 50%;
    padding-top: 52.52%;
    background-color: #d70c25;
}
.first-box .circle-box .num{
    position: absolute;
    left: 0;
    top: 50%;
    font-size: 1.25rem;
    line-height: 1.3rem;
    transform: scale(0);
    margin-top: -.65rem;
    text-align: center;
    width: 100%;
    font-family: "Gilroy-Light";
    color: #fff;
}
.first-box .circle-box .num span{
    font-size: 5rem;
}
.first-box .circle-box .text{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.75rem;
    line-height: 1.8rem;
    color: #fff;
    font-family: "MicrosoftYaHeiLight";
    opacity: 0;
    filter: alpha(opacity=0);
}

.first-box .circle-box .text1{
    left: -15.1%;
}

.first-box .circle-box .text1 span{
    font-size: 2.5rem;
    font-family: "Gilroy-Light";
}
.first-box .circle-box .text2{
    right: -40.35%;
}
.first-box  .bubble-bg,
.first-box  .bubble-bg2{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.first-box .bubble-bg .bubble,
.first-box .bubble-bg2 .bubble{
    transform-origin: 50% 46%;
    animation: spin 8s linear infinite;
}
.first-box .bubble-bg .bubble:nth-child(2n),
.first-box .bubble-bg2 .bubble:nth-child(2n){
    animation: spin2 8s linear infinite;
}
.first-box .bubble-bg .sm-bubble,
.first-box .bubble-bg2 .sm-bubble{
    transform-origin: 30% 30px;
}
.data-tab-box .data-btns{
    position: absolute;
    bottom: 5.55%;
    left: 3.125%;
    z-index: 3;
    font-size: 0;
}
.data-tab-box .data-btns .item{
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin-right: 1.85rem;
    position: relative;
    text-align: center;
    vertical-align: top;
}
.data-tab-box .data-btns .item:last-child{
    margin-right: 0;
}

.data-tab-box .data-btns .item:before{
    content: "";
    position: absolute;
    right: -.925rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 2.25rem;
    background-color: #000;
    opacity: .2;
    filter: alpha(opacity=20);
    transition: all .3s;

}
.data-tab-box .data-btns .item:last-child:before{
    display: none;
}
.data-tab-box .data-btns .item .num{
    font-size: 1.75rem;
    line-height: 1.8rem;
    /* color: #fff; */
    font-family: "gilroy-regular";
    color: #000;
    transition: all .3s;
}
.data-tab-box .data-btns .item .txt{
    font-size: .375rem;
    line-height: .5rem;
    color: #000;
    transition: all .3s;
}
.data-tab-box .data-btns .circle{
    position: absolute;
    top: -.7rem;
    width: 2rem;
    height: 2rem;
    border-radius: 100%;
    transition: all .3s;
}
.data-tab-box .data-btns .row{
    position: relative;
    z-index: 3;
}
.data-tab-box .data-btns.on1 .item:before{
    background-color: #fff;
    opacity: .25;
    filter: alpha(opacity=25);
}
.data-tab-box .data-btns.on1 .item .num{
    color: #fff;
}
.data-tab-box .data-btns.on1 .item .txt{
    color: #fff;
}
.data-tab-box .data-btns.on1 .circle{
    background-color: #fff;
    opacity: .3;
    filter: alpha(opacity=30);
}
.data-tab-box .data-btns.on1 .circle{
    left: 0;
}
.data-tab-box .data-btns.on2 .circle{
    left: 5.2rem;
    background-color: #fbe6e9;
}
.data-tab-box .data-btns.on2 .item:nth-child(2) .num,
.data-tab-box .data-btns.on2 .item:nth-child(2) .txt{
    color: #d80c25;
}
.data-tab-box .data-btns.on3 .circle{
    left: 10.1rem;
    background-color: #fbe6e9;

}
.data-tab-box .data-btns.on3 .item:nth-child(3) .num,
.data-tab-box .data-btns.on3 .item:nth-child(3) .txt{
    color: #d80c25;
}

.index-earth-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
}
.index-earth-box .index-earth-img{
    position: absolute;
    width: 29.17%;
    left: 50%;
    top: 50%;
    border-radius: 100%;
    overflow: hidden;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.index-earth-box .index-earth-img img{
    width: 100%;
}
.index-earth-box .circle-line{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.index-earth-box .bubble-bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.index-earth-box .bubble-bg .bubble{
    position: absolute;
    border-radius: 100%;
    animation:spin 6s infinite linear;
    transform-origin: 50% 40%;
}
.index-earth-box .bubble-bg .bubble:nth-child(2n){
    animation:spin2 6s infinite linear;
}
.index-earth-box .bubble-bg .sm-bubble{
    transform-origin: 30% 30px;
}
.index-earth-box .bubble-bg .bubble1{
    width: 12%;
    padding-top: 12%;
    background-color: #d70c25;
    opacity: .05;
    left: -4.427%;
    top: -10%;
}
.index-earth-box .bubble-bg .bubble2{
    width: 56.77%;
    padding-top: 56.77%;
    background-color: #f7f7f7;
    opacity: .2;
    left: -27.8645%;
    top: 21.354%;
}
.index-earth-box .bubble-bg .bubble3{
    width: 72px;
    padding-top: 72px;
    border: 1px solid #d80c25;
    left: -36px;
    top: 75%;
}
.index-earth-box .bubble-bg .bubble4{
    width: 10.73%;
    padding-top: 10.73%;
    border: 1px solid #ddd;
    left: 39.427%;
    top: -14.583%;
}
.index-earth-box .bubble-bg .bubble5{
    width: 10px;
    padding-top: 10px;
    background-color: #d80c25;
    opacity: .1;
    left: 7.552%;
    top: 33.854%;
}
.index-earth-box .bubble-bg .bubble6{
    width: 6px;
    padding-top: 6px;
    background-color: #d80c25;
    opacity: .1;
    left: 10.78125%;
    top: 42.7%;
}
.index-earth-box .bubble-bg .bubble7{
    width: 10px;
    padding-top: 10px;
    background-color: #d80c25;
    opacity: .1;
    left: 30.2%;
    top: 33.854%;
}
.index-earth-box .bubble-bg .bubble8{
    width: 30px;
    padding-top: 30px;
    background-color: #d80c25;
    opacity: .1;
    left: 24.74%;
    top: 66.67%;
}
.index-earth-box .bubble-bg .bubble9{
    width: 10px;
    padding-top: 10px;
    background-color: #d80c25;
    opacity: .1;
    left: 80.364%;
    top: 37%;
}
.index-earth-box .bubble-bg .bubble10{
    width: 4px;
    padding-top: 4px;
    background-color: #d80c25;
    left: 62.4%;
    top: 29.79%;
}
.index-earth-box .bubble-bg .bubble11{
    width: 16px;
    padding-top: 16px;
    opacity: .1;
    background-color: #d80c25;
    left: 63%;
    top: 53.854%;
}
.index-earth-box .bubble-bg .bubble12{
    width: 16px;
    padding-top: 16px;
    opacity: .1;
    background-color: #d80c25;
    left: 67.7%;
    top: 67.1875%;
}
.index-earth-box .bubble-bg .bubble13{
    width: 10.7%;
    padding-top: 10.7%;
    border: 1px solid #ddd;
    left: 78.125%;
    top: 89.583%;
}

.index-earth-box .text-circle{
    position: absolute;
    width: 5rem;
    padding-top: 5rem;
    top: 18.5%;
    left: 16.1458%;
    transform: scale(0);
}
.index-earth-box .text-circle .circle{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #d80c25;
    background-color: #fff;
    border-radius: 100%;
    transform-origin: 50% 40%;
    -webkit-animation: spin 6s linear infinite;
    animation: spin 6s linear infinite;
}

.index-earth-box .text-circle .circle span{
    -webkit-animation: spin-reverse 6s linear infinite;
    animation: spin-reverse 6s linear infinite;
}

.index-earth-box .text-circle.on{
    transform-origin: 50% 46%;
    -webkit-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
}

.index-earth-box .text-circle span{
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: .75rem;
    line-height: .8rem;
    margin-top: -.4rem;
    color: #da0f2b;
}

.index-earth-box .img-circle{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}
.index-earth-box .circle-img{
    position: absolute;
    border-radius: 100%;
    left: 50%;
    top: 50%;
    transform: scale(0);
    transform-origin: center center;
}

.index-earth-box .circle-img .img{
    width: 100%;
    animation:spin 6s infinite linear;
    transform-origin: 50% 30%;
}

.index-earth-box .circle-img:nth-child(2n) .img{
    animation:spin2 6s infinite linear;
}
.index-earth-box .circle-img img{
    width: 100%;
    animation:spin-reverse 6s infinite linear;
}
.index-earth-box .circle-img:nth-child(2n) img{
    animation:spin-reverse2 6s infinite linear;
}
.index-earth-box .circle-img1{
    width: 1.5rem;
    margin: -.75rem 0 0 -.75rem;
    /* left: 42.5%;
    top: 31.5%; */
}
.index-earth-box .circle-img2{
    width: 2.25rem;
    margin: -1.125rem 0 0 -1.125rem;
    /* left: 57.25%;
    top: 45%; */
}

.index-earth-box .circle-img2 .img{
    border: 2px solid #d70c25;
    border-radius: 100%;
}
.index-earth-box .circle-img3{
    width: 2.25rem;
    margin: -1.125rem 0 0 -1.125rem;
    /* left: 37%;
    top: 55.5%; */
}
.index-earth-box .circle-img4{
    width: 1.5rem;
    margin: -.75rem 0 0 -.75rem;
    /* top: 70%;
    left: 58.6%; */
}
.index-earth-box .earth-text{
    position: absolute;
    font-size: 1.75rem;
    line-height: 1.8rem;
    color: #333;
    top: 50%;
    margin-top: -.9rem;
    /* opacity: 0;
    filter: alpha(opacity=0); */
    vertical-align: bottom;
    z-index: 5;
    width: 100%;
}
.index-earth-box .text{
    position: absolute;
    top: 0;
    white-space: nowrap;
    opacity: 0;
    filter: alpha(opacity=0);
}
.index-earth-box .text1{
    left: 10.9375%;
}
.index-earth-box .text2{
    right: 8.59375%;
}
.index-earth-box .text .num{
    display: inline-block;
    *display: inline;
    zoom: 1;
    font-size: 2.5rem;
    font-family: "gilroy-regular";
    color: #d80c25;
    overflow: hidden;
    line-height: 2rem;
    height: 2rem;
    width: 3.15rem;
    white-space: nowrap;
}
.index-earth-box .origin{
    position: absolute;
    right: 3.125%;
    bottom: 4.6%;
    font-size: .4rem;
    line-height: .5rem;
    color: #000;
    z-index: 3;
    opacity: 0;
    filter: alpha(opacity=0);
}

.index-people-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
}
.index-people-bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.index-people-bg .bubble{
    position: absolute;
}
.index-people-bg .bubble .circle{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    animation:spin 6s infinite linear;
    transform-origin: 50% 40%;
}
.index-people-bg .bubble .circle img{
    width: 100%;
    animation:spin-reverse 6s infinite linear;
}

.index-people-bg .bubble:nth-child(2n) .circle{
    animation:spin2 6s infinite linear;
}
.index-people-bg .bubble:nth-child(2n) .circle img{
    width: 100%;
    animation:spin-reverse2 6s infinite linear;
}
.index-people-bg .sm-bubble .circle{
    transform-origin: 30% 30px;
}
.index-people-bg .left-bg .bubble1{
    left: 26.3%;
    top: 41.875%;
    width: 76px;
    height: 76px;
}
.index-people-bg .left-bg .bubble1 .circle{
    background-color: #f7f7f7;
}
.index-people-bg .left-bg .bubble2{
    left: 27.864%;
    top: 38.33%;
    width: 10px;
    height: 10px;
}
.index-people-bg .left-bg .bubble2 .circle{
    background-color: #d80c25;
    opacity: .1;
}
.index-people-bg .left-bg .bubble3{
    left: 22.552%;
    top: 78.125%;
    width: 30px;
    height: 30px;
}
.index-people-bg .left-bg .bubble3 .circle{
    background-color: #d80c25;
    opacity: .1;
}
.index-people-bg .left-bg .bubble4{
    left: 32%;
    top: 83.75%;
    width: 70px;
    height: 70px;
}
.index-people-bg .left-bg .bubble4 .circle{
    background-color: #f7f7f7;
}
.index-people-bg .left-bg .bubble5{
    left: 14.8%;
    top: 30.3125%;
    width: 114px;
    height: 114px;
}
.index-people-bg .left-bg .bubble5 .circle{
    background-color: #f7ced3;
}
.index-people-bg .left-bg .bubble6{
    left: 5.2%;
    top: 40.625%;
    width: 10px;
    height: 10px;
}
.index-people-bg .left-bg .bubble6 .circle{
    background-color: #d80c25;
    opacity: .1;
}
.index-people-bg .left-bg .bubble7{
    left: 8.59375%;
    top: 50.417%;
    width: 8px;
    height: 8px;
}
.index-people-bg .left-bg .bubble7 .circle{
    background-color: #d80c25;
    opacity: .1;
}
.index-people-bg .left-bg .bubble8{
    width: 11.77%;
    padding-top: 11.77%;
    left: 8.3%;
    top: 54.9%;
}
.index-people-bg .right-bg .bubble1{
    left: 80.26%;
    top: 57.5%;
    width: 70px;
    height: 70px;
}
.index-people-bg .right-bg .bubble1 .circle{
    background-color: #ea7582;
}
.index-people-bg .right-bg .bubble2{
    left: 70.83%;
    top: 74%;
    width: 114px;
    height: 114px;
}
.index-people-bg .right-bg .bubble2 .circle{
    border:1px solid #d80c25;
}
.index-people-bg .right-bg .bubble3{
    left: 67.86%;
    top: 34.8958%;
    width: 10px;
    height: 10px;
}
.index-people-bg .right-bg .bubble3 .circle{
    background-color: #d80c25;
    opacity: .1;
}
.index-people-bg .right-bg .bubble4{
    left: 78.125%;
    top: 44.27%;
    width: 10px;
    height: 10px;
}
.index-people-bg .right-bg .bubble4 .circle{
    background-color: #d80c25;
    opacity: .1;
}
.index-people-bg .right-bg .bubble5{
    left: 65%;
    top: 54.6875%;
    width: 8px;
    height: 8px;
}
.index-people-bg .right-bg .bubble5 .circle{
    background-color: #d80c25;
    opacity: .1;
}
.index-people-bg .right-bg .bubble6{
    left: 86.2%;
    top: 35.4%;
    width: 7.3%;
    padding-top: 7.3%;
}
.index-people-bg .right-bg .bubble6 .circle{
    border:1px solid rgba(216,12,37,.2);
}
.index-people-bg .right-bg .bubble7{
    left: 65%;
    top: 11.458%;
    width: 52px;
    padding-top: 52px;
}
.index-people-bg .right-bg .bubble7 .circle{
    border:1px solid #d80c25;
}
.index-people-bg .right-bg .bubble8{
    left: 63.8%;
    top: 61.7%;
    width: 18px;
    padding-top: 18px;
}
.index-people-bg .right-bg .bubble8 .circle{
    background-color: #d80c25;
    opacity:.1;
}
.index-people-bg .right-bg .bubble9{
    left: 72.76%;
    top:55.9375%;
    width: 6px;
    padding-top: 6px;
}
.index-people-bg .right-bg .bubble9 .circle{
    background-color: #d80c25;
    opacity:.1;
}
.index-people-bg .right-bg .bubble10{
    left: 85.3125%;
    top:84.17%;
    width: 4px;
    padding-top: 4px;
}
.index-people-bg .right-bg .bubble10 .circle{
    background-color: #d80c25;
    opacity:.3;
}
.index-people-bg .right-bg .bubble11{
    left: 69.79%;
    top: 36%;
    width: 70px;
    height: 70px;
}

.big-cup{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}


.big-cup .cls-1,
.big-cup .cls-20 {
    fill: #ddd;
}

.big-cup .cls-11,
.big-cup .cls-12,
.big-cup .cls-13,
.big-cup .cls-17,
.big-cup .cls-2,
.big-cup .cls-4,
.big-cup .cls-5 {
    fill: #d70c25;
}

.big-cup .cls-14,
.big-cup .cls-16,
.big-cup .cls-18,
.big-cup .cls-27,
.big-cup .cls-3,
.big-cup .cls-9 {
    fill: none;
    stroke-width: 1px;
}

.big-cup .cls-3 {
    stroke: #e60012;
}

.big-cup .cls-20,
.big-cup .cls-21,
.big-cup .cls-4 {
    opacity: 0.3;
}

.big-cup .cls-25,
.big-cup .cls-26,
.big-cup .cls-5 {
    opacity: 0.1;
}

.big-cup .cls-6 {
    fill: #fbe6e9;
}

.big-cup .cls-7 {
    fill: #f8d3d7;
}

.big-cup .cls-8 {
    fill: #f8f5f6;
}

.big-cup .cls-9 {
    stroke: #d80c25;
}

.big-cup .cls-10 {
    fill: #0f7f7f;
}

.big-cup .cls-11 {
    opacity: 0.2;
}

.big-cup .cls-12 {
    opacity: 0.6;
}

.big-cup .cls-13,
.big-cup .cls-27 {
    opacity: 0.5;
}

.big-cup .cls-14 {
    stroke: #eee;
}

.big-cup .cls-15,
.big-cup .cls-26 {
    fill: #e60012;
}

.big-cup .cls-16,
.big-cup .cls-27 {
    stroke: #d10a30;
}

.big-cup .cls-17 {
    opacity: 0.7;
}

.big-cup .cls-18 {
    stroke: #ddd;
}

.big-cup .cls-19,
.big-cup .cls-21 {
    fill: #d10a30;
}

.big-cup .cls-22,
.big-cup .cls-25 {
    fill: #d80c25;
}

.big-cup .cls-22 {
    opacity: 0.8;
}

.big-cup .cls-23 {
    fill: #f7ced3;
}

.big-cup .cls-24 {
    fill: #ea7582;
}

.index-people-box .text{
    position: absolute;
    left: 0;
    top: 49%;
    width: 100%;
    text-align: center;
    font-size: 1.75rem;
    line-height: 1.8rem;
    color: #333;
    opacity: 0;
    filter: alpha(opacity=0);
}
.index-people-box .text span{
    font-size: 2.5rem;
    line-height: 2.5rem;
    color: #d10a30;
    font-family: "gilroy-regular";
}

.index-process-box,
.index-process-box .slider-inner{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.index-process-box .pub-close{
    display: none;
}
.index-process-box .btns-box{
    position: absolute;
    left:0;
    bottom:4.63%;
    width:100%;
    font-size: 0;
    text-align:center;
    /* opacity: 0; */
    z-index: 3;
    display: none;
}
.index-process-box .btns{
    display: inline-block;
    *display:inline;
    zoom:1;
    padding:6px 14px;
    border-radius: 10px;
    background-color: rgba(0,0,0,.1);
}
.index-process-box .btns a{
    display: inline-block;
    *display: inline;
    width:8px;
    height:8px;
    border-radius: 100%;
    background-color:#fff;
    opacity:.5;
    margin:0 6px;
    transition:all .3s;
}
.index-process-box .btns a.cur{
    opacity: 1;
}
.index-process-box>.swiper-wrapper>.swiper-slide{
    overflow: hidden;
}
.index-raw-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
.index-raw-box>img{
    width:100%;
    opacity: 0;
}
.index-raw-box .m-img{
    display: none;
}
.index-raw-box .white-line{
    overflow: hidden;
    width: 100%;
}
.index-raw-box .white-line img{
    width:100vw;
}
.index-raw-box .white-line .m-line{
    display: none;
}
.index-raw-box .index-raw{
    position: absolute;
    left: 0;
    top:14.8%;
    width:100%;
    /* height:70.37%; */
}
.index-raw-box .raw-line{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-repeat: no-repeat;
    background-position:top center;
    background-size: cover;
}
.index-raw .country-img{
    position: absolute;
    width:8.33%;
    padding-top: 8.33%;
    border-radius: 100%;
    transform:scale(0);
    transition: transform .5s;
}


.index-raw .circle-line{
    position: absolute;
    left: 0;
    top: 0;
    width:100%;
    height: 100%;
    border:2px dashed rgba(255,255,255,.5);
    border-radius: 100%;
}
.index-raw .country-img .img-box{
    position: absolute;
    left: 0;
    top:50%;
    width:100%;
    transform:translateY(calc(-50% + .25rem + 2px ));
    text-align: center;
}
.index-raw .country-img .img-box .img{
    width:1rem;
    margin:0 auto;
    font-size: 0;
}
.index-raw .country-img .img-box .img img{
    width:100%;
}
.index-raw .country-img .img-box .txt{
    font-size: .4rem;
    line-height:.5rem;
    margin-top: 5px;
    color:#fff;
}
.index-raw .country-img .image{
    width:100%;
    position: absolute;
    left: 0;
    top: 0;
}
.index-raw .country-img .image img{
    width:100%;
}
.index-raw .country-img1{
    left:31.25%;
    top:-4.74%;
}
.index-raw .country-img2{
    left:33.33%;
    top:10.263%;
}
.index-raw .country-img3{
    left:25.52%;
    top:7.895%;
}
.index-raw .country-img4{
    left:86.41%;
    top:85.8421%;
    z-index: 1;
}
.index-raw .country-img5{
    left:79.6875%;
    top:78.947%;
}
.index-raw-box .process-svg{
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
}
.process-tit{
    font-size: 1.5rem;
    line-height: 2rem;
    overflow: hidden;
}
.process-con{
    font-size: .425rem;
    line-height: .7rem;
    margin-top: .9rem;
    overflow: hidden;
}
.process-tit .text-inner,
.process-con .text-inner{
    transform:translateY(100%);
}
.index-raw-box .text-box{
    position: absolute;
    left: 0;
    bottom: 10.185%;
    width: 100%;
}
.index-raw-box .text{
    width: 17.5rem;
}
.index-raw-box .text .process-tit,
.index-raw-box .text .process-con{
    color: #fff;
}
/* .index-raw-box .text .process-tit{
	transform: translateY(-1rem);
	opacity: 0;
	filter: alpha(opacity=0);
}
.index-raw-box .text .process-con{
	transform: translateY(1rem);
	opacity: 0;
	filter: alpha(opacity=0);
} */

.index-raw-box .country-list .item .txt{
    font-size: .4rem;
    line-height: .5rem;
    color: #fff;
    margin-top: 5px;
}


.index-raw .box1.on .country-img,
.index-raw .box2.on .country-img{
    transform: scale(1);
}
.index-raw .box1.on .country-img2{
    transition-delay: .2s;
}
.index-raw .box1.on .country-img3{
    transition-delay: .4s;
}
.index-raw .box2.on .country-img5{
    transition-delay: .2s;
}
.index-process-box .process-next{
    position: absolute;
    right: 3.125%;
    top: 50%;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: -.875rem;
    transform: scale(0);
}
.index-process-box .process-next .img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    font-size: 0;
}

.index-process-box .process-next .img:before{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
    box-sizing: border-box;
    border: 2px dashed #fff;
    border-radius: 100%;

}
.index-process-box .process-next .img img{
    width: 100%;
}
.index-process-box .process-next .txt{
    font-size: .5rem;
    line-height: .6rem;
    position: absolute;
    top: 50%;
    right: 100%;
    padding-right: .4rem;
    transform: translateY(-50%);
    color: #fff;
    white-space: nowrap;
}

@keyframes rotate{
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate{
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.index-tech-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: top center;
}
.index-tech-box .text-box{
    position: absolute;
    left: 0;
    top: 20.37%;
    width: 100%;
}
.index-tech-box .text{
    width: 17.5rem;
}
.index-tech-box .text .process-tit,
.index-tech-box .text .process-con{
    color: #fff;
    /* transform: translateY(-1rem);
    opacity: 0;
    filter: alpha(opacity=0); */
}
.index-tech-box .tech-line{
    position: absolute;
    left: 0;
    bottom: 12.8%;
    width:100%;
    overflow: hidden;
}
.index-tech-box .tech-line img{
    width:100vw;
}
.index-tech-box .tech-line .m-line{
    display: none;
}
.index-tech-box .bubble-bg{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}
.index-tech-box .bubble-bg .bubble{
    position: absolute;
    border-radius: 100%;
    animation:spin 6s infinite linear;
    transform-origin: 50% 40%;
}
.index-tech-box .bubble-bg .bubble:nth-child(2n){
    animation:spin2 6s infinite linear;
    transform-origin: 30% 30%;
}
.index-tech-box .bubble-bg .bubble1{
    left:-6.3%;
    top:68.54%;
    width:4.5rem;
    height:4.5rem;
    background-color: #ea4961;
}
.index-tech-box .bubble-bg .bubble2{
    left:3.125%;
    top:83.75%;
    width:26px;
    height:26px;
    border:1px solid #fff;
}

.tech-bubbles{
    position: absolute;
    left: 37%;
    top: 0;
    width: 50%;
    height: 52%;
}
.tech-bubbles .particle{
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 100%;
    position: absolute;
}

.index-time-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(63deg, #e51944,#d80c25 100%);
    background: -ms-linear-gradient(63deg, #e51944,#d80c25 100%);
    background: linear-gradient(63deg, #e51944,#d80c25 100%);
}
.index-time-box .line-box{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}
.index-time-box .line-box .line{
    position: absolute;
    top:50%;
    left:50%;
    border:2px dashed #fff;
    border-radius: 100%;
    transform:scale(0);
}
.index-time-box .line-box .line1{
    width:62.5%;
    padding-top:62.5%;
    opacity: .3;
    margin:-31.25% 0 0 -31.25%;
}
.index-time-box .line-box .line2{
    width:43.75%;
    padding-top: 43.75%;
    opacity: .5;
    margin:-21.875% 0 0 -21.875%;
}
.index-time-box .line-box .line3{
    width:25%;
    padding-top: 25%;
    border-color:#ddd;
    margin:-12.5% 0 0 -12.5%;
    opacity: .8;
}
.index-time-box .bubble{
    position: absolute;
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
    border-radius: 100%;
}
.index-time-box .center-img{
    position: absolute;
    left: 50%;
    top:50%;
    width:13%;
    padding-top: 13%;
    margin:-6.5% 0 0 -6.5%;

}
.index-time-box .center-img .bubble{
    border:2px solid #fff;
    width:100%;
    height:100%;
    top:0;
    left:0;
}
.index-time-box .center-img .bubble:before{
    content: "";
    position: absolute;
    left:50%;
    top:50%;
    width:8px;
    height:8px;
    margin:-4px 0 0 -4px;
    background-color: #fff;
    border-radius: 100%;
}
.index-time-box .center-img .time-line{
    position: absolute;
    left: calc(-50vw + 50%);
    top: 36%;
    width: 0;
    height:64%;
    overflow: hidden;
}
.index-time-box .center-img .time-line img{
    width:50vw;
    height:100%;
}
.index-time-box .center-img .time-line .m-line{
    display: none;
}
.time-bubbles{
    position: absolute;
    left:0;
    top: 0;
    width:100%;
    height:100%;
}
.time-bubbles .bubble{
    position: absolute;
    left:50%;
    top:50%;
    transform:scale(0);
}
.time-bubbles .circle,
.time-bubbles .circle .img{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 100%;
}
.time-bubbles .bubble .circle{
    animation:spin 6s infinite linear;
    transform-origin: 30% 30px;
}
.time-bubbles .bubble:nth-child(2n) .circle{
    animation:spin2 6s infinite linear;
}
.time-bubbles .bubble .circle .img{
    animation:spin-reverse 6s infinite linear;

}
.time-bubbles .bubble:nth-child(2n) .img{
    animation:spin-reverse2 6s infinite linear;
}

.time-bubbles .bubble1{
    width:2.4%;
    padding-top:2.4%;
    /* left:5.4%;
    top:77.5%; */
    margin:-1.2% 0 0 -1.2%;
}
.time-bubbles .bubble1 .circle{
    background-color: #fff;
    opacity: .2;
}
.time-bubbles .bubble2{
    width:10px;
    padding-top:10px;
    /* left:20.677%;
    top:36.25%; */
    margin:-5px 0 0 -5px;
}
.time-bubbles .bubble2 .circle{
    background-color: #d80c25;
}
.time-bubbles .bubble3{
    width:4.48%;
    padding-top:4.48%;
    /* left:24.73958%;
    top:-4.27%; */
    margin:-2.24% 0 0 -2.24%;
}
.time-bubbles .bubble3 .circle{
    background-color: #fff;
    opacity: .1;
}
.time-bubbles .bubble4{
    width:1.7%;
    padding-top:1.7%;
    /* left:19.53125%;
    top:67.3958%; */
    margin:-.65% 0 0 -.65%;
}
.time-bubbles .bubble4 .circle{
    background-color: #fff;
}
.time-bubbles .bubble5{
    width:6px;
    padding-top:6px;
    /* left:26.25%;
    top:46.25%; */
    margin:-3px 0 0 -3px;
}
.time-bubbles .bubble5 .circle{
    background-color: #fff;
    opacity: .3;
}
.time-bubbles .bubble6{
    width:12px;
    padding-top:12px;
    /* left:69.0625%;
    top:35.2%; */
    margin:-6px 0 0 -6px;
}
.time-bubbles .bubble6 .circle{
    background-color: #fff9ed;
    opacity: .5;
}
.time-bubbles .bubble7{
    width:8px;
    padding-top:8px;
    /* left:41.51%;
    top:38.23%; */
    margin:-4px 0 0 -4px;
}
.time-bubbles .bubble7 .circle{
    background-color: #fff;
    opacity: .3;
}
.time-bubbles .bubble8{
    width:5.2%;
    padding-top:5.2%;
    /* left:18.75%;
    top:18.4375%; */
    margin:-2.6% 0 0 -2.6%;
}
.time-bubbles .bubble8 .img{
    border:1px solid #000;
}
.time-bubbles .bubble9{
    width:4.9%;
    padding-top:4.9%;
    /* left:66%;
    top:69.58%; */
    margin:-2.45% 0 0 -2.45%;
}
.time-bubbles .bubble9 .img{
    border:1px solid #fff;
}
.time-bubbles .bubble10{
    width:4.9%;
    padding-top:4.9%;
    /* left:25.83%;
    top:89.375%; */
    margin:-2.45% 0 0 -2.45%;
}
.time-bubbles .bubble10 .img{
    border:1px solid #fff;
}
.time-bubbles .bubble11{
    width:3.6458%;
    padding-top:3.6458%;
    /* left:56%;
    top:4.83%; */
    margin:-1.8229% 0 0 -1.8229%;
}
.time-bubbles .bubble11 .img{
    border:1px solid #000;
}
.time-bubbles .bubble12{
    width:3.6458%;
    padding-top:3.6458%;
    /* left:78.33%;
    top:66.67%; */
    margin:-1.8229% 0 0 -1.8229%;
}
.time-bubbles .bubble12 .img{
    border:1px solid #fff;
}
.time-bubbles .bubble13{
    width:2%;
    padding-top:2%;
    /* left:78.33%;
    top:66.67%; */
    margin:-1% 0 0 -1%;
}
.time-bubbles .bubble13 .circle{
    background-color: #fff9ed;
}
.time-bubbles .bubble14{
    width:18px;
    padding-top:18px;
    /* left:28.75%;
    top:35.2%; */
    margin:-9px 0 0 -9px;
}
.time-bubbles .bubble14 .circle{
    background-color: #fff;
}
.time-bubbles .bubble15{
    width:26px;
    padding-top:26px;
    /* left:77.1354%;
    top:31%; */
    margin:-13px 0 0 -13px;
}
.time-bubbles .bubble15 .circle{
    background-color: #fff;
}
.time-bubbles .bubble16{
    width:4.8%;
    padding-top:4.8%;
    /* left:34.375%;
    top:41.67%; */
    margin:-2.4% 0 0 -2.4%;
}
.time-bubbles .bubble16 .img{
    border:2px solid #fff;
}



.index-time-box .text-box{
    position: absolute;
    left: 0;
    bottom: 10%;
    width: 100%;
    text-align: center;
}
.index-time-box .time-tit{
    font-size: 1.5rem;
    line-height: 1.75rem;
    color: #fff;
    overflow: hidden;
    /* transform: translateY(-1rem) scale(0);
    transform-origin: top center;
    opacity: 0;
    filter: alpha(opacity=0); */
}
.index-time-box .time-tit .text-inner{
    transform:translateY(100%);
}

.index-quality-box{
    overflow: hidden;
}
.index-quality-box .quality-cup{
    position: absolute;
    left:50%;
    bottom:-14%;
    width:107.3%;
    margin-left: -53.65%;
    text-align: justify;
    text-align-last: justify;
    line-height:0;
}

.index-quality-box .quality-cup .cup-item{
    display: inline-block;
    *display: inline;
    zoom:1;
    vertical-align: top;
    width:17%;
    position: relative;
    opacity: 0;
}
.index-quality-box .quality-cup .cup-item:nth-child(2n){
    z-index: 3;
}
.index-quality-box .quality-cup .cup-item img{
    width:100%;
}
.index-quality-box .quality-cup .red-line{
    position: absolute;
    left:2.8%;
    bottom:37%;
    width:0;
    height:39%;
    overflow: hidden;
}
.index-quality-box .quality-cup .red-line img{
    display:block;
    width:100vw;
    height:100%;
}
.index-quality-box .quality-cup .red-line .m-line{
    display: none;
}
.index-quality-box .quality-cup .bubbles-box .bubble{
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 100%;
    left: 72%;
    top: -6%;
    transform:scale(0) translate(-50%, -50%);
    transform-origin: center;
}

.index-quality-box .quality-cup .bubbles-box .bubble1{
    width:39.77%;
    padding-top: 39.77%;
    /* margin:-19.885% 0 0 -19.885%; */
    /* left: 25%;
    top: -90%; */
}
.index-quality-box .quality-cup .bubbles-box .bubble2{
    /* left: 106%;
    top: -90%; */
    width:39.77%;
    padding-top: 39.77%;
    /* margin:-19.885% 0 0 -19.885%; */
}
.index-quality-box .quality-cup .bubbles-box .bubble3{
    /* left: 140.5%;
    top: -56%; */
    width:5px;
    height:5px;
    /* margin:-2px 0 0 -2px; */
    background-color: #d80c25;
}
.index-quality-box .quality-cup .bubbles-box .bubble4{
    /* left: 101.5%;
    top: -25%; */
    width:19.886%;
    padding-top:19.886%;
    /* margin:-9.943% 0 0 -9.943%; */
    background-color: #d80c25;
    opacity: .1;
}
.index-quality-box .quality-cup .bubbles-box .bubble5{
    /* left: 77%;
    top: -64%; */
    width:8px;
    height:8px;
    /* margin:-4px 0 0 -4px; */
    background-color: #d80c25;
    opacity: .1;

}
.index-quality-box .quality-cup .bubbles-box .bubble6{
    /* left: 48%;
    top: -41.5%; */
    width:3px;
    height:3px;
    /* margin:-2px 0 0 -2px; */
    background-color: #d80c25;
}
.index-quality-box .quality-cup .bubbles-box .bubble7{
    /* left: 50%;
    top: -37%; */
    width:19.886%;
    padding-top:19.886%;
    /* margin:-9.943% 0 0 -9.943%; */
    background-color: #f7f7f7;
}
.index-quality-box .quality-cup .bubbles-box .bubble8{
    /* left: 84%;
    top: -66%; */
    width:28.4%;
    padding-top:28.4%;
    /* margin:-14.2% 0 0 -14.2%; */
    background-color: #d80c25;
    opacity: .1;
}
.index-quality-box .quality-cup .bubbles-box .bubble9{
    /* left: 79%;
    top: -47%; */
    width:31.25%;
    padding-top:31.25%;
    /* margin:-15.625% 0 0 -15.625%; */
}
.index-quality-box .quality-cup .bubbles-box .bubble10{
    /* left: 75%;
    top: -12.5%; */
    width:24px;
    height:24px;
    margin:-12px 0 0 -12px;
    border:1px solid #d80c25;
}
.index-quality-box .quality-cup .bubbles-box .bubble11{
    /* left: 80%;
    top: -23.5%; */
    width:10px;
    height:10px;
    /* margin:-5px 0 0 -5px; */
    background-color:#d80c25;
    opacity: .1;
}
.index-quality-box .quality-cup .bubbles-box .bubble12{
    /* left: 91%;
    top: -16.5%; */
    width:10px;
    height:10px;
    /* margin:-5px 0 0 -5px; */
    background-color:#ddd;
}
.index-quality-box .quality-cup .bubbles-box .bubble13{
    /* left: 65%;
    top: -12%; */
    width:8px;
    height:8px;
    /* margin:-4px 0 0 -4px; */
    background-color:#d80c25;
    opacity: .1;
}
.index-quality-box .quality-cup .bubbles-box .bubble14{
    /* left: 31%;
    top: -54%; */
    width:10px;
    height:10px;
    /* margin:-5px 0 0 -5px; */
    background-color:#d80c25;
}
.index-quality-box .quality-cup .bubbles-box .bubble15{
    /* left: 87%;
    top: -4%; */
    width:30px;
    height:30px;
    /* margin:-15px 0 0 -15px; */
    background-color:#d80c25;
    opacity: 0.1;
}
.index-quality-box .quality-cup .bubbles-box .bubble16{
    /* left: 69%;
    top: -40.5%; */
    width:8px;
    height:8px;
    /* margin:-4px 0 0 -4px; */
    background-color:#d80c25;
}
.index-quality-box .quality-cup .bubbles-box .bubble17{
    /* left: 97%;
    top: -24%; */
    width:5px;
    height:5px;
    /* margin:-2px 0 0 -2px; */
    background-color:#d80c25;
}
.index-quality-box .quality-cup .bubbles-box .bubble18{
    /* left: 105.5%;
    top: -46.5%; */
    width:3px;
    height:3px;
    /* margin:-2px 0 0 -2px; */
    background-color:#d80c25;
}
.index-quality-box .quality-cup .bubbles-box .bubble19{
    /* left: 81.5%;
    top: -2.5%; */
    width:3px;
    height:3px;
    /* margin:-2px 0 0 -2px; */
    background-color:#d80c25;
}
.index-quality-box .quality-cup .bubbles-box .bubble20{
    /* left: 23%;
    top: -83.5%; */
    width:3px;
    height:3px;
    /* margin:-2px 0 0 -2px; */
    background-color:#d80c25;
}
.index-quality-box .quality-cup .bubbles-box .bubble21{
    /* left: 146%;
    top: -61.5%; */
    width:3px;
    height:3px;
    /* margin:-2px 0 0 -2px; */
    background-color:#d80c25;
}
.index-quality-box .quality-cup .bubbles-box .bubble22{
    /* left: 101%;
    top: -68.5%; */
    width:3px;
    height:3px;
    /* margin:-2px 0 0 -2px; */
    background-color:#d80c25;
}
.index-quality-box .quality-cup .bubbles-box .bubble23{
    /* left: 47%;
    top: -62.5%; */
    width:28.4%;
    padding-top:28.4%;
    border:1px solid #d80c25;
    opacity: .6;
}
.index-quality-box .quality-cup .bubbles-box .bubble24{
    /* left: 113.5%;
    top: -51%; */
    width:15.9%;
    padding-top:15.9%;
    /* margin:-7.95% 0 0 -7.95%; */
    border:1px solid #d80c25;
}
.index-quality-box .quality-cup .bubbles-box .bubble25{
    /* left: 81.5%;
    top: -73%; */
    width:6.8%;
    padding-top:6.8%;
    /* margin:-3.4% 0 0 -3.4%; */
    border:1px solid #d80c25;
}
.index-quality-box .quality-cup .bubbles-box .bubble26{
    /* left: 117.5%;
    top: -62%; */
    width:6.25%;
    padding-top:6.25%;
    /* margin:-3.125% 0 0 -3.125%; */
    background-color:#d80c25;
    opacity: .1;
}
.index-quality-box .quality-cup .bubbles-box .bubble27{
    /* left: 119%;
    top: -34%; */
    width:5.1%;
    padding-top:5.1%;
    /* margin:-2.55% 0 0 -2.55%; */
    background-color:#d80c25;
}
.index-quality-box .text-box{
    position: absolute;
    left: 0;
    top: 20.83%;
    width: 100%;
}
.index-quality-box .text-box .process-con{
    width: 17.5rem;
}


.index-quality-box .process-next .img:before{
    border-color: #d80c25;
}

.index-quality-box .process-next .txt{
    color: #d80c25;
}
/* .index-quality-box .process-tit,
.index-quality-box .process-con{
	transform: translateY(1rem);
	opacity: 0;
	filter: alpha(opacity=0);
} */


.index-heart-box .index-heart-bg{
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
}
.index-heart-box .index-heart-bg .bubble{
    position: absolute;
}
.index-heart-box .index-heart-bg .bubble .circle{
    position: absolute;
    left: 0;
    top:0;
    width:100%;
    height:100%;
    border-radius: 100%;

}
.index-heart-box .index-heart-bg .left-bg .bubble .circle,
.index-heart-box .index-heart-bg .right-bg .bubble .circle{
    animation:spin 6s infinite linear;
    transform-origin: 50% 40%;
}
.index-heart-box .index-heart-bg .left-bg .sm-bubble .circle,
.index-heart-box .index-heart-bg .right-bg .sm-bubble .circle {
    transform-origin: 30% 30px;
}
.index-heart-box .index-heart-bg .left-bg .bubble:nth-child(2n) .circle,
.index-heart-box .index-heart-bg .right-bg .bubble:nth-child(2n) .circle{
    animation:spin2 6s infinite linear;
}
.index-heart-box .index-heart-bg .bubble .circle img{
    animation:spin-reverse 6s infinite linear;
}
.index-heart-box .index-heart-bg .bubble:nth-child(2n) .circle img{
    animation:spin-reverse2 6s infinite linear;
}
.index-heart-box .index-heart-bg .bubble .circle img{
    width:100%;
    border-radius: 100%;
}

.index-heart-box .index-heart-bg .bg-box{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}
.index-heart-box .index-heart-bg .bg-box .bubble{
    transform-origin:50% 40%;
    animation:spin 6s infinite linear;
}
.index-heart-box .index-heart-bg .bg-box .bubble:nth-child(2n){
    animation:spin2 6s infinite linear;
}
.index-heart-box .index-heart-bg .bg-box .bubble .circle{
    animation:spin-reverse 6s infinite linear;
}
.index-heart-box .index-heart-bg .bg-box .bubble:nth-child(2n) .circle{
    animation:spin-reverse2 6s infinite linear;
}
.index-heart-box .index-heart-bg .bg-box .bubble1{
    width:12%;
    padding-top:12%;
    border-radius: 100%;
    left:-4.48%;
    top:-7.87%;
    z-index: 3;
}
.index-heart-box .index-heart-bg .bg-box .bubble1 .circle{
    background-color: #d80c25;
    opacity: .05;
}
.index-heart-box .index-heart-bg .bg-box .bubble2{
    width:29.17%;
    padding-top:29.17%;
    border-radius: 100%;
    left:1.8%;
    top:-12.685%;

}
.index-heart-box .index-heart-bg .bg-box .bubble2 .circle{
    background: -webkit-linear-gradient(top, #f7f7f7,#fff 40%,#fff 60%,#f7f7f7 100%);
    background: -ms-linear-gradient(top, #f7f7f7,#fff 40%,#fff 60%,#f7f7f7 100%);
    background: linear-gradient(top, #f7f7f7,#fff 40%,#fff 60%,#f7f7f7 100%);
}
.index-heart-box .index-heart-bg .bg-box .bubble3{
    width:45%;
    padding-top:45%;
    border-radius: 100%;
    left:-10.9375%;
    top:58.33%;
}

.index-heart-box .index-heart-bg .bg-box .bubble3 .circle{
    background: -webkit-linear-gradient(45deg, #f7f7f7,#fff 40%,#fff 60%,#f7f7f7 100%);
    background: -ms-linear-gradient(45deg, #f7f7f7,#fff 40%,#fff 60%,#f7f7f7 100%);
    background: linear-gradient(45deg, #f7f7f7,#fff 40%,#fff 60%,#f7f7f7 100%);
}
.index-heart-box .index-heart-bg .bg-box .bubble4{
    width:20.3125%;
    padding-top:20.3125%;
    left:85.2%;
    top:17.78%;
}
.index-heart-box .index-heart-bg .bg-box .bubble4 .circle{
    background: -webkit-linear-gradient(135deg, #f7f7f7,#fff 55%,#fff 65%,#f7f7f7 100%);
    background: -ms-linear-gradient(135deg, #f7f7f7,#fff 55%,#fff 65%,#f7f7f7 100%);
    background: linear-gradient(135deg, #f7f7f7,#fff 55%,#fff 65%,#f7f7f7 100%);
}
.index-heart-box .index-heart-bg .bg-box .bubble5{
    width:30.73%;
    padding-top:30.73%;
    left:74.479%;
    top:61%;
}
.index-heart-box .index-heart-bg .bg-box .bubble5 .circle{
    background: -webkit-linear-gradient(135deg, #fdf3f4,#fff 55%,#fff 65%,#fdf3f4 100%);
    background: -ms-linear-gradient(135deg, #fdf3f4,#fff 55%,#fff 65%,#fdf3f4 100%);
    background: linear-gradient(135deg, #fdf3f4,#fff 55%,#fff 65%,#fdf3f4 100%);
}

.index-heart-box .index-heart-bg .left-bg .bubble1{
    width:10px;
    padding-top: 10px;
    left:28.9%;
    top:37%;
}
.index-heart-box .index-heart-bg .left-bg .bubble1 .circle{
    background-color: #d80c25;
    opacity: .1;
}
.index-heart-box .index-heart-bg .left-bg .bubble2{
    width:10px;
    padding-top: 10px;
    left:6.354%;
    top:39.27%;
}
.index-heart-box .index-heart-bg .left-bg .bubble2 .circle{
    background-color: #d80c25;
    opacity: .1;
}
.index-heart-box .index-heart-bg .left-bg .bubble3{
    width:8px;
    padding-top: 8px;
    left:9.6875%;
    top:49.17%;
}
.index-heart-box .index-heart-bg .left-bg .bubble3 .circle{
    background-color: #d80c25;
    opacity: .1;
}
.index-heart-box .index-heart-bg .left-bg .bubble4{
    width:20px;
    padding-top: 20px;
    left:36.979%;
    top:97.6%;
}
.index-heart-box .index-heart-bg .left-bg .bubble4 .circle{
    background-color: #d80c25;
}
.index-heart-box .index-heart-bg .left-bg .bubble5{
    width:30px;
    padding-top: 30px;
    left:23.854%;
    top:74.27%;
}
.index-heart-box .index-heart-bg .left-bg .bubble5 .circle{
    background-color: #d80c25;
    opacity: .1;
}
.index-heart-box .index-heart-bg .left-bg .bubble6{
    width:5.73%;
    padding-top: 5.73%;
    left:10.4%;
    top:60.417%;
}
.index-heart-box .index-heart-bg .left-bg .bubble6 .circle{
    border:1px solid #d80c25;
}
.index-heart-box .index-heart-bg .left-bg .bubble7{
    width:76px;
    padding-top: 76px;
    left:33.854%;
    top:47.3%;
}
.index-heart-box .index-heart-bg .left-bg .bubble7 .circle{
    background-color: #ffecee;
}
.index-heart-box .index-heart-bg .left-bg .bubble8{
    width:20px;
    padding-top: 20px;
    left:30.2%;
    top:15.3125%;
}
.index-heart-box .index-heart-bg .left-bg .bubble8 .circle{
    border:1px solid #d80c25;
}
.index-heart-box .index-heart-bg .left-bg .bubble10{
    width:80px;
    padding-top: 80px;
    left:19%;
    top:33.33%;
}
.index-heart-box .index-heart-bg .left-bg .bubble10 .circle{
    border:2px solid #d80c25;
}
.index-heart-box .index-heart-bg .left-bg .bubble11{
    width:120px;
    padding-top: 120px;
    left:29.479%;
    top:81.77%;
}
.index-heart-box .index-heart-bg .left-bg .bubble11 .circle{
    border:2px solid #d80c25;
}
.index-heart-box .index-heart-bg .right-bg .bubble1{
    width:10px;
    padding-top: 10px;
    left:79.17%;
    top:42.7%;
}
.index-heart-box .index-heart-bg .right-bg .bubble1 .circle{
    background-color: #d80c25;
    opacity: .1;
}
.index-heart-box .index-heart-bg .right-bg .bubble2{
    width:8px;
    padding-top: 8px;
    left:66.14%;
    top:50.52%;
}
.index-heart-box .index-heart-bg .right-bg .bubble2 .circle{
    background-color: #d80c25;
    opacity: .1;
}
.index-heart-box .index-heart-bg .right-bg .bubble3{
    width:12px;
    padding-top: 12px;
    left:67.5%;
    top:86%;
}
.index-heart-box .index-heart-bg .right-bg .bubble3 .circle{
    background-color: #d80c25;
    opacity: .1;
}
.index-heart-box .index-heart-bg .right-bg .bubble4{
    width:18px;
    padding-top: 18px;
    left:64.8958%;
    top:57.3958%;
}
.index-heart-box .index-heart-bg .right-bg .bubble4 .circle{
    background-color: #d80c25;
    opacity: .1;
}
.index-heart-box .index-heart-bg .right-bg .bubble5{
    width:6px;
    padding-top: 6px;
    left:73.8%;
    top:54.6875%;
}
.index-heart-box .index-heart-bg .right-bg .bubble5 .circle{
    background-color: #d80c25;
    opacity: .1;
}
.index-heart-box .index-heart-bg .right-bg .bubble6{
    width:8px;
    padding-top: 8px;
    left:56.6%;
    top:43.4375%;
}
.index-heart-box .index-heart-bg .right-bg .bubble6 .circle{
    background-color: #d80c25;
    opacity: .1;
}
.index-heart-box .index-heart-bg .right-bg .bubble7{
    width:40px;
    padding-top: 40px;
    left:54.6875%;
    top:91.11%;
}
.index-heart-box .index-heart-bg .right-bg .bubble7 .circle{
    border:1px solid #d80c25;
}
.index-heart-box .index-heart-bg .right-bg .bubble8{
    width:12px;
    padding-top: 12px;
    left:77.76%;
    top:54.479%;
}
.index-heart-box .index-heart-bg .right-bg .bubble8 .circle{
    background-color: #eee;
}
.index-heart-box .index-heart-bg .right-bg .bubble9{
    width:18px;
    padding-top: 18px;
    left:92.6%;
    top:65.83%;
}
.index-heart-box .index-heart-bg .right-bg .bubble9 .circle{
    border:1px solid #d80c25;
}
.index-heart-box .index-heart-bg .right-bg .bubble10{
    width:30px;
    padding-top: 30px;
    left:52.7%;
    top:41.1458%;
}
.index-heart-box .index-heart-bg .right-bg .bubble10 .circle{
    background-color: #d80c25;
    opacity: .1;
}
.index-heart-box .index-heart-bg .right-bg .bubble11{
    width:50px;
    padding-top: 50px;
    left:71.2%;
    top:34.8958%;
}
.index-heart-box .index-heart-bg .right-bg .bubble11 .circle{
    border:1px solid #d80c25;
}
.index-heart-box .index-heart-bg .right-bg .bubble12{
    width:68px;
    padding-top: 68px;
    left:73%;
    top:64.27%;
}
.index-heart-box .index-heart-bg .right-bg .bubble12 .circle{
    border:2px solid #d80c25;
}
.index-heart-box .text-inner{
    overflow: hidden;
}
.index-heart-box .text-inner p{
    transform:translateY(100%);
}
.index-heart-box .text1{
    position: absolute;
    left: 0;
    bottom: 15%;
    width: 100%;
    text-align: center;
    font-size: 1.75rem;
    color: #333;
    line-height: 2.2rem;
    transform-origin: top center;
}
.index-heart-box .text1 span{
    font-size: 2.5rem;
    font-family: "gilroy-regular";
}
.index-heart-box .text2{
    position: absolute;
    left: 0;
    bottom: 32%;
    width: 100%;
    text-align: center;
    font-size: 0;
}
.index-heart-box .text2 span{
    display: inline-block;
    *display: inline;
    zoom: 1;
    font-size: .5rem;
    line-height: .6rem;
    color: #dc102e;
    padding-right: .7rem;
    position: relative;
    transform:translateY(100%);
}
.index-heart-box .text2 span:before{
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: .45rem;
    height: .45rem;
    background-color: #d80c25;
    border-radius: 100%;
    margin-top: -.225rem;
    background-size: .45rem;
    background-position: center;
    background-repeat: no-repeat;
}

.index-heart-box .cup-group-box{
    position: absolute;
    left: 0;
    top:42%;
    width:100%;
}

.index-heart-box .heart-cup-box{
    width:2.15rem;
    margin:0 auto;
    position: relative;
}
.index-heart-box .heart-cup{
    display: block;
    width:2.15rem;
    position: relative;
    opacity: 0;
    transform:scale(1.7);
    transform-origin:50% 80%;
}
.index-heart-box .heart-cup img{
    width:100%;
}
.index-heart-box .heart-cup .bubble{
    position: absolute;
    border-radius: 100%;
}
.index-heart-box .heart-cup .bubble1{
    width:.25rem;
    height: .25rem;
    background-color: #fff;
    left:78.8%;
    top:29.54%;
}
.index-heart-box .heart-cup .bubble1{
    width:.25rem;
    height: .25rem;
    background-color: #fff;
    left:21.378%;
    top:54.421%;
}
.index-heart-box .heart-cup .bubble2{
    width:.3rem;
    height: .3rem;
    background-color: #fff;
    left:51.7647%;
    top:62.5%;
}
.index-heart-box .heart-cup .bubble3{
    width:.2rem;
    height: .2rem;
    border:1px solid #fff;
    left:72.473%;
    top:61.4693%;
}
.index-heart-box .heart-cup .bubble4{
    width:.2rem;
    height: .2rem;
    border:1px solid #fff;
    left:25.543%;
    top:63.17%;
}
.index-heart-box .heart-cup .bubble5{
    width:.2rem;
    height: .2rem;
    border:1px solid #fff;
    left:66.24%;
    top:91%;
}
.index-heart-box .heart-cup .bubble6{
    width:.2rem;
    height: .2rem;
    border:1px solid #fff;
    left:51.1244%;
    top:73.295%;
}
.index-heart-box .heart-cup .bubble7{
    width:.375rem;
    height: .375rem;
    border:1px solid #fff;
    left:24.5%;
    top:76.42%;
}
.index-heart-box .heart-cup .bubble8{
    width:.1rem;
    height: .1rem;
    border:1px solid #fff;
    left:48%;
    top:80%;
}
.index-heart-box .heart-cup .bubble9{
    width:.2rem;
    height: .2rem;
    background-color: #fff;
    left:74%;
    top:53%;
}
.index-heart-box .heart-cup .bubble10{
    width:.25rem;
    height: .25rem;
    background-color: #f07f8d;
    left: 44%;
    top: 56%;
}
.index-heart-box .heart-cup .bubble11{
    width:.25rem;
    height: .25rem;
    background-color: #f07f8d;
    left: 70%;
    top: 71%;
}
.index-heart-box .heart-cup .bubble12{
    width:.25rem;
    height: .25rem;
    background-color: #f07f8d;
    left: 38%;
    top: 68%;
}
.index-heart-box .heart-cup .bubble13{
    width:.1rem;
    height: .1rem;
    border:1px solid #fff;
    left: 23%;
    top: 70.9693%;
}
.index-heart-box .heart-cup .bubble14{
    width:.4rem;
    height: .4rem;
    background-color: #fff;
    left: 43%;
    top: 85%;
}
.index-heart-box .heart-cup .bubble15{
    width:.25rem;
    height: .25rem;
    background-color: #f07f8d;
    left: 70%;
    top: 82.386%;
}
.index-heart-box .heart-cup .bubble16{
    width:.15rem;
    height: .15rem;
    background-color: #fff;
    left: 63%;
    top: 78.85284%;
}
.index-heart-box .heart-cup .bubble17{
    width:.25rem;
    height: .25rem;
    background-color: #f07f8d;
    left: 28%;
    top: 90.636%;
}
.index-heart-box .cup-bubbles .bubble{
    position: absolute;
    border-radius: 100%;
    left: 92%;
    top: -1%;
    transform:scale(0);
}
.index-heart-box .cup-bubbles .bubble .img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 100%;
}
.index-heart-box .cup-bubbles .bubble1{
    width:4.45rem;
    height:4.45rem;
    margin:-2.225rem 0 0 -2.225rem;
    /* left:-205.263%;
    top:-267%; */
}
.index-heart-box .cup-bubbles .bubble2{
    width:7.25rem;
    height:7.25rem;
    margin:-3.625rem 0 0 -3.625rem;
    /* left:57.8947%;
    top:-352.27%; */
    background-color: #fdf3f4;
}
.index-heart-box .cup-bubbles .bubble3{
    width:2rem;
    height:2rem;
    margin:-1rem 0 0 -1rem;
    /* left:282.895%;
    top:-184%; */
    border:2px solid #d80c25;
}
.index-heart-box .cup-bubbles .bubble4{
    width:2.35rem;
    height:2.35rem;
    margin:-1.175rem 0 0 -1.175rem;
    /* left:138.16%;
    top:-173.86%; */
    background-color: #eee;
}
.index-heart-box .cup-bubbles .bubble5{
    width:1.65rem;
    height:1.65rem;
    margin:-.875rem 0 0 -.875rem;
    /* left:21%;
    top:-170.45%; */
    border:1px solid #d80c25;
}
.index-heart-box .cup-bubbles .bubble6{
    width:.75rem;
    height:.75rem;
    margin:-.375rem 0 0 -.375rem;
    /* left:-42%;
    top:-156.8%; */
    background-color: #d80c25;
    opacity: .1;
}
.index-heart-box .cup-bubbles .bubble7{
    width:.7rem;
    height:.7rem;
    margin:-.35rem 0 0 -.35rem;
    /* left:-56.578%;
    top:-129.54%; */
    background-color: #d80c25;
}
.index-heart-box .cup-bubbles .bubble8{
    width:.7rem;
    height:.7rem;
    margin:-.35rem 0 0 -.35rem;
    /* left:223.684%;
    top:-113.63%; */
    background-color: #d80c25;
}
.index-heart-box .cup-bubbles .bubble9{
    width:3.25rem;
    height:3.25rem;
    margin:-1.625rem 0 0 -1.625rem;
    /* left:5.26%;
    top:-114.77%; */
}
.index-heart-box .cup-bubbles .bubble10{
    width:4px;
    height:4px;
    margin:-2px 0 0 -2px;
    /* left:203.947%;
    top:-69.3%; */
    background-color: #d80c25;
}
.index-heart-box .cup-bubbles .bubble11{
    width:.35rem;
    height:.35rem;
    margin:-.175rem 0 0 -.175rem;
    /* left:0;
    top:-42%; */
    border:1px solid #d80c25;
}
.index-heart-box .cup-bubbles .bubble12{
    width:.5rem;
    height:.5rem;
    margin:-.25rem 0 0 -.25rem;
    /* left:92.1%;
    top:-31.25%; */
    border:1px solid #d80c25;
}
.index-heart-box .cup-bubbles .bubble13{
    width:4px;
    height:4px;
    margin:-2px 0 0 -2px;
    /* left:102.63%;
    top:-10.2%; */
    background-color: #d80c25;
}
.index-heart-box .heart-line{
    position: absolute;
    left: 190%;
    top: -20%;
    width: 986%;
    overflow: hidden;
}
.index-heart-box .heart-line img{
    width:100%;
    opacity: 0;
}
.index-heart-box .heart-line .line{
    position: absolute;
    left:0;
    top:0;
    width:0%;
    height:100%;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
}
.index-heart-box .heart-line .m-line{
    display: none;
}



@media (max-width: 1680px){

}

@media (max-width: 1366px){
    .index-news .con-box .img{
        height: 7.6rem;
    }
}

.brand-video {
    display: none;
}