.link-wrap-top li{width: 20%}

/*概述*/
.introduction{ width:1200px;margin-top: 114px;position: relative;overflow: hidden}
.introduction>h2{ color:#025BEB;font-size: 30px; text-align: center;margin-bottom: 25px;}
.introduction>p{ color:#025BEB;font-size: 18px; text-align: center;margin-bottom: 59px; }
.introduction .title{font-size:30px; width:471px;height:59px;color: #ffffff;line-height:59px;background:linear-gradient(93deg,rgba(67,67,253,1) 0%,rgba(28,176,252,1) 100%);box-shadow: 0 3px 10px #025BEB;border-radius:30px;}
.introduction .img img{width: 100%;}
.introduction .img{position: relative}
.introduction .figure{position: absolute;left: 0;top:0;height: 100%;width: 100%;z-index: -1}
.introduction .figure>div{}
.introduction .figure-1{width: 22.75%;height: 49.6%;margin-top: 35%;margin-left: 39%;border-radius: 50%;overflow: hidden;animation: ground 5s linear infinite;}
/*.introduction .figure-1:hover{*/
/*    */
/*}*/
.introduction .figure-2{width: 45.66%;height: 49.2%}
.introduction .figure-3{width: 62.7%;height: 66.6%}


@keyframes ground {
    0% {
     background-color: #8DB3FE;
      transform: scale(1);

    }
    100% {
        background-color: #ffffff;
        transform: scale(4);
    }
}
.scenes-wrap{padding-top: 30px;padding-bottom: 30px}
.scenes{position: relative}
.scenes-wrap .common .title>span{color: #025BEB}
.item-tooltip span{display: table;margin-bottom: 20px}
.item-tooltip{text-align: center;position: absolute; left: 0; top: -45px;width: auto;z-index: 9;}
.item-tooltip.item-tooltip-right{position: absolute;left: auto;right: -43%;;top: -9%;}
.item-tooltip.item-tooltip-right span{display: block;}
.item-tooltip.item-tooltip-bottom{text-align: center;position: absolute;  top: initial;bottom: -46px}
.item-tooltip.item-tooltip-left{position: absolute;left: -70px;top: 68%;}
.item-tooltip.item-tooltip-left-bottom{position: absolute; top: 20%;}
.item-tooltip.item-tooltip-right-bottom{position: absolute; right: -53%;left: initial;bottom: -47%;top: initial;}
.item-tooltip.item-tooltip-left span{display: block;}
.item-tooltip span{padding: 2px 10px;line-height:22px;background-color: #eaf1ff;border: 1px solid #b7cfff;color: #344054;font-size: 14px;border-radius:20px; margin-left: 5px}
.scenes-content{position: relative;width: 1124px;margin-top: 64px}
.scenes-content>div{float: left;width: 20%;text-align: center}
.scenes-content .img img{width: 100%}
.scenes-content .scenes-content-item{}
.scenes-content .scenes-content-item>div{position: relative;cursor: pointer}
.scenes-content .scenes-content-item>div:hover  .item-tooltip{z-index: 10}
.scenes-content .scenes-content-item>div:hover  .item-tooltip span{background-color: #F39800;font-size: 16px;color: #ffffff;border: 1px solid #F39800 }
.scenes-content .scenes-3{margin-bottom: 9%;}
.scenes-content .scenes-5{margin-bottom: 28%;}
.scenes-content .scenes-9{ margin-top: 112%;}
.scenes-content .scenes-2,.scenes-content .scenes-6{margin-top: 50%;margin-bottom: 35%;}
.scenes-content .scenes-1{margin-top: 94%;position: relative;left: 41%;}
.scenes-content .scenes-6{position: relative;left: -26px;}
.scenes-content .scenes-8 {position: relative;left: -17%;}
.scenes-content .scenes-9 {position: relative;left: -22%;}
.scenes-content .scenes-2 {position: relative;left: 21%;}



.product-wrap{background:linear-gradient(0deg,rgba(64,114,239,1) 0%,rgba(38,118,253,1) 100%);position: relative}
.product-wrap .title span{color: #ffffff}
.product-wrap .product{margin-top: -60px}
.product-wrap .product .line{margin-bottom: 10px}
.product-wrap .product .line img{animation: lineAnimat 20s linear infinite;opacity: 0.2}
.product-wrap .swiper-container{width: 1200px;position: relative}
.product-wrap .swiper-slide ul{height: 560px}
.product-wrap  .swiper-pagination{position: absolute;bottom: 10px;left: 40%}
.product-wrap .swiper-slide li{transition: all 1s;height: 560px;float: left;width: 20%;text-align: center;border-top-left-radius: 12px;border-top-right-radius: 12px;color: #ffffff}
.product-wrap .swiper-slide li .img{width:78px;height:78px;background:#ffffff;border-radius:50%;margin-bottom: 52px;margin-top: 59px}
.product-wrap .swiper-slide li .img img{    margin-top: 22px;}
.product-wrap .swiper-slide li dt{ margin-bottom: 42px;font-size: 22px}
.product-wrap .swiper-slide li dd{width: 84%;font-size: 14px;margin: 0 auto 30px auto}
.product-wrap .swiper-slide .p-wrap-1{background:linear-gradient(0deg,rgba(6,130,234,1) 0%,rgba(16,208,199,1) 100%); height: 450px;transform: translate(0, 111px)}
.product-wrap .swiper-slide .p-wrap-2{background:linear-gradient(0deg,rgba(67,67,253,1) 0%,rgba(28,176,252,1) 100%); height: 500px;transform: translate(0, 61px)}
.product-wrap .swiper-slide .p-wrap-3{background:linear-gradient(0deg,rgba(14,95,249,1) 0%,rgba(11,195,233,1) 100%);  height: 560px}
.product-wrap .swiper-slide .p-wrap-4{background:linear-gradient(0deg,rgba(74,61,237,1) 0%,rgba(102,91,254,1) 100%);height: 500px;transform: translate(0, 61px)}
.product-wrap .swiper-slide .p-wrap-5{background:linear-gradient(0deg,rgba(6,130,234,1) 0%,rgba(16,208,199,1) 100%);height: 450px; transform: translate(0, 111px)}

.product-wrap .swiper-slide .p-wrap-6{background:linear-gradient(0deg,rgba(67,67,253,1) 0%,rgba(28,176,252,1) 100%); height: 500px;transform: translate(0, 61px);margin-left: 20%}
.product-wrap .swiper-slide .p-wrap-7{background:linear-gradient(0deg,rgba(14,95,249,1) 0%,rgba(11,195,233,1) 100%);  height: 560px}
.product-wrap .swiper-slide .p-wrap-8{background:linear-gradient(0deg,rgba(74,61,237,1) 0%,rgba(102,91,254,1) 100%);height: 500px;transform: translate(0, 61px);margin-right: 20%}

.product-wrap .swiper-pagination-bullet-active {opacity: 1;background: #fff;width: 15px;height: 8px;border-radius: 20px;}
.product-wrap  .swiper-pagination-bullet{background-color: #ffffff}
.product-wrap .swiper-slide li:hover{height: 560px;transform: translate(0, 0);}

.cooperation-warp{background-color: #F6F6F6;padding-top: 30px;padding-bottom: 65px}
.cooperation-warp .down:before{border-top: 15px solid #F6F6F6}
.cooperation{width: 1200px}
.cooperation ul{margin-top:  10px}
.cooperation li{float: left;position: relative;z-index: 1;overflow: hidden;width: 48%;margin-left: 2%;background-color: #ffffff;margin-bottom: 42px;padding: 53px 54px 0 58px;height: 200px;transition: all 0.3s}
.cooperation li .img{float: left;width:12%;text-align: center;margin-top: 32px}
.cooperation li dl{overflow: hidden;margin-left: 10%;float: left;width: 75%}
.cooperation li dt{color: #025BEB;font-size: 18px;margin-bottom: 25px}
.cooperation li dd{color: #333333;font-size: 14px}
.cooperation li:hover{box-shadow: 0 4px 8px 0 rgba(61,74,102,0.08);transform: translate(0, -10px)}
.example-warp{padding-bottom: 84px}
.example-warp .square{margin-top: 0}
.example{position: relative;margin-top: -60px}
.example .swiper-container,.example .navigation-button{width: 1200px;position: relative}
.example  .swiper-slide{cursor: pointer}
.example  .swiper-slide .img{background-color: #ffffff}
.example  .swiper-slide .img img{  width:100%}
.example  .swiper-slide .dl{height:90px;background-color: #EBF2FD;text-align: center}
.example .pre{ position: absolute; z-index: 3; left: 5px; top: 48%; width: 48px; height: 48px; background: url("../images/service/leftnext.png") no-repeat;background-size: cover}
.example .pre:hover{ background: url("../images/service/leftnext_hover.png") no-repeat;background-size: cover}
.example .next{position: absolute; z-index: 3; right: 5px; top:  48%; width: 48px; height: 48px; background: url("../images/service/next.png") no-repeat;background-size: cover}
.example .next:hover{ background: url("../images/service/next_hover.png") no-repeat;background-size: cover}
.example  .swiper-pagination{position: absolute;bottom: 100px;left: 48%}
.example .swiper-pagination-bullet-active {opacity: 1;background: #2598FC;width: 15px;height: 8px;border-radius: 20px;}
.example .swiper-pagination span{margin-left: 5px}
.example dl{height: 90px;text-align: center;padding-top: 12px;background-color:  rgba(2, 91, 235, 0.08)}
.example dt{color: #4A6C84;font-size: 20px;margin-bottom: 10px}
.example dd{color: #4A6C84;font-size: 14px}


@media screen and (max-width: 1700px) {
    .example .pre{ left: 10%}
    .example .next{right: 10%;}
}
@media screen and (max-width: 1200px) {
    .introduction,.scenes-content,.cooperation{position: relative;width: 90%;}
    .product-wrap .swiper-container{width: 100%;}
    .example .swiper-container{width: 90%}
    .example dl{height: auto}
    .example .swiper-slide .img{height: auto}
    .cooperation li{float: none; width:100%;margin-left: 0%;}
    .item-tooltip span{font-size: 10px;margin-bottom: 4px!important;width: 100px}
}
@media screen and (max-width: 950px) {
    .product-wrap .swiper-slide li:hover{height: 430px;margin-top: 0;border-radius: 50%}
    .product-wrap .swiper-slide li:hover dd{font-size: 12px}
    .product-wrap .swiper-slide li{height: 430px;float: left;width: 50%;margin-left: 0!important;}
    .product-wrap .swiper-slide .p-wrap-8,.product-wrap .swiper-slide .p-wrap-7,.product-wrap .swiper-slide .p-wrap-6,.product-wrap .swiper-slide .p-wrap-5,.product-wrap .swiper-slide .p-wrap-4,
    .product-wrap .swiper-slide .p-wrap-3,.product-wrap .swiper-slide .p-wrap-2,.product-wrap .swiper-slide .p-wrap-1{height: 430px;transform: translate(0,0) !important;padding: 0 10%}
    .product-wrap .swiper-slide li .img {margin-bottom: 18px;margin-top: 50px;}
    .product-wrap .swiper-slide li dt{margin-bottom: 16px}
    .product-wrap .swiper-slide li dd {width: 84%;font-size: 14px;margin: 0 auto 14px auto;}
    .banner-words{display: none}
}
@media screen and (max-width: 750px) {
    .scenes-content{position: relative;width: 80%}
    .introduction .title{width: 80%;font-size: 20px}
    .item-tooltip{display: none!important;}
    .scenes-content .scenes-content-item>div:hover  .item-tooltip{display: block!important;}
    .scenes-9 .item-tooltip span{position: relative;left: -40px!important;width: 70px;}
}
.scenes-wrap svg line {stroke: #7da8ff;stroke-width: 1;fill: none;stroke-dasharray: 5,5;}
.scenes-content svg{position: absolute;left: 0;top: 0;height: 100%;width: 100%;z-index: -1;}
@keyframes depict {
    from {
        stroke-dashoffset: 100;
    }
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes lineAnimat {
    from {
       transform: translate(0);
    }
    to {
        transform: translate(-1920px, 0px);
    }
}

svg line{stroke-dasharray: 100;animation: depict 6s linear infinite;}