@charset "utf-8";
.btn{ display: inline-block;color: #fff;text-align: center;border: 1px solid #818dbd;padding: 10px 52px 10px 16px;background: url(../images/index/arrow.png) no-repeat 90% 45%;margin-top: 8%;-webkit-animation-delay: .8s;animation-delay: .8s;transition: all .3s}
.btn:hover{ color: #fff;background-position: 85% 45%;padding-left: 22px;padding-right: 46px}
.slide1 .btn{
	border: 1px solid #fff;
}
.btn img{ vertical-align: -2%}
.text_nowrap{ display: block;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow: ellipsis;overflow: hidden}
.ellipsis{ display: -webkit-box;overflow: hidden;white-space: normal;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all}
.text-center{ text-align: center}
.w5{ width: 6%}
.w44{ width: 44%}
.w53{ width: 53%}
.w50{ width: 48%}
.w20{ width: 20%}
.w30{ width: 30%}
.w80{ width: 80%}
.mt10{ margin-top: 10px}
.mt20{ margin-top: 20px}
.mt30{ margin-top: 30px}
.f18{ font-size: 18px}
.m-show{ display: none}
.text-center{ text-align: center}
.none {display: none !important;}
@media screen and (max-width:991px){
 .m-100{  width: 100%!important }
 .m-hide{  display: none!important }
 .m-show{  display: block }
 .m-mt20{  margin-top: 20px!important }
 .m-mt30{  margin-top: 30px!important }
}
@media screen and (max-width:768px){
 .xm-100{  width: 100%!important }
}
.tab .hd{ position: relative}
.tab .hd .more a{ display: none}
.tab .hd .more .on{ display: block}
.tab .bd .c{ display: none}
.tab .bd .on{ display: block}
.title{ text-align: center;margin-bottom: 2%}
.title h3{ font-size: 40px;line-height: 50px;margin-bottom: 1%}
.title p{ font-size: 18px;color: #777}
@media (max-width:768px){
 .title{  margin-bottom: 6% }
 .title h3{  font-size: 22px;line-height: 30px }
 .title p{  font-size: 16px }
}
h1,h2,h3,h4,h5{ font-weight: 700}
.section{ background-repeat: no-repeat;background-position: center center;background-size: cover;position: relative;height: 0;overflow: hidden}
@media (max-width:1024px),(max-height:500px){
 .section{  height: auto }
}
@media (max-width:991px){
 .section:not(.section1){  padding: 7% 0 }
}
.section2 .fp-tableCell,.section3 .fp-tableCell,.section4 .fp-tableCell,.section5 .fp-tableCell,.section6 .fp-tableCell,.section7 .fp-tableCell{ vertical-align: top}
.section2{ background-image: url(../images/index/section_bg2.jpg);display: none!important;}
.section3{ background-image: url(../images/index/section_bg3.jpg);}
.section4{ background-image: url(../images/index/section_bg4.jpg)}
.section5{ background-image: url(../images/index/section_bg5.jpg)}
.section6{ background-image: url(../images/index/section_bg6.jpg)}
.section7{ background-image: url(../images/index/section_bg7.jpg)}
.section1{ transition: all 1.3s;padding-top: 0!important}
@media (max-width:991px){
 .section1{  padding-top: 0 }
}
@media (min-height:750px){
 .section3 .fp-tableCell .title, .section6 .fp-tableCell .title{  margin-bottom: 8vh!important }
 .section5 .fp-tableCell .title{  margin-bottom: 5vh!important }
}
@media (min-height:850px){
 .section3 .fp-tableCell .title, .section6 .fp-tableCell .title{  margin-bottom: 10vh!important }
}
.mySwiper{ height: 100%;position: relative;transform: translate3d(0,0,0);}
.mySwiper .swiper-wrapper{ height: 100%}
.mySwiper .container{ position: relative}
.mySwiper .swiper-pagination{ bottom: 185px;width: 100%;text-align: right;position: absolute}
.mySwiper .swiper-pagination span{ display: inline-block;width: 100px;height: 10px;margin: 0 0 0 10px;border-radius: 0;background-color: #fff;opacity: 1;cursor: pointer}
.mySwiper .swiper-pagination .swiper-active-switch{ background-color: #17a1ff}

.mySwiper .slide1{ background-image: url(../images/s1_banner4f.jpg)}
/* .mySwiper .slide3{ background-image: url(../images/index/s1_banner2.jpg)} */
/* .mySwiper .slide2{ background-image: url(../images/index/s1_banner3.jpg)} */
.mySwiper .slide4{ background-image: url(../images/index/s1_banner4.jpg)}
.mySwiper .slide5{ background-image: url(../images/s1_bannerqx.png)}

/* .mySwiper .slide7{ background-image: url(../images/index/s1_banner7.png)} */
/* .mySwiper .slide8{ background-image: url(../images/index/s1_banner8.png)} */

.mySwiper .swiper-slide{ color: #fff;overflow: hidden;background-size: cover;position: relative;height: 0;translate3d(0,0,0);}
.mySwiper .swiper-slide .banner_text{ position: absolute;bottom: 38%;width: 100%}
.mySwiper .swiper-slide h2{ font-size: 50px;line-height: 70px;padding-bottom: 4%}
/*.mySwiper .swiper-slide h2.AGI {padding-bottom: 15%;}*/
.mySwiper .swiper-slide h2 span{ font-size: 40px}
.mySwiper .swiper-slide p{ max-width: 810px;font-size: 18px;line-height: 32px;-webkit-animation-delay: .6s;animation-delay: .6s}
.mySwiper .swiper-slide .btn1{ display: inline-block;color: #fff;text-align: center;border: 1px solid #818dbd;padding: 10px 52px 10px 16px;background: url(../images/index/arrow.png) no-repeat 90% 45%;-webkit-animation-delay: .8s;animation-delay: .8s;transition: all .3s;margin-top: 2%}
.mySwiper .swiper-slide img{width:100%;}
.mySwiper .swiper-slide img.img-txt {position: absolute; right: 10%;bottom: -14%;width: 422px;}
.mySwiper .swiper-slide-active img.img-txt {-webkit-animation-name: fadeInRight;animation-name: fadeInRight;}
@media (max-width:1055px) {
   .mySwiper .swiper-slide .banner_text{  padding-left: 3%;}
}
@media (min-width:1025px) and (max-height:750px){
 .mySwiper .swiper-slide .banner_text{  bottom: 250px;}
 .mySwiper .swiper-slide h2{  font-size: 42px;padding-bottom: 3% }
 .mySwiper .swiper-slide h2 span{  font-size: 32px }
 .mySwiper .swiper-slide .btn{  margin-top: 4% }
}
@media (min-width:1025px) and (max-height:680px){
 .mySwiper .swiper-slide .banner_text{  bottom: 230px }
 .mySwiper .swiper-slide h2{  padding-bottom: 1% }
 .mySwiper .swiper-slide .btn{  margin-top: 3% }
}
.mySwiper .swiper-slide-active h2{ -webkit-animation-name: fadeInRightBig;animation-name: fadeInRightBig}
.mySwiper .swiper-slide-active p{ -webkit-animation-name: fadeInRight;animation-name: fadeInRight}
.mySwiper .swiper-slide-active .btn{ -webkit-animation-name: fadeInRight;animation-name: fadeInRight}
.mySwiper .scene{ width: 100%;height: 100%;position: relative}
.mySwiper .scene li{ width: 100%;height: 100%;position: relative}
.mySwiper .scene li img{ position: absolute}
.mySwiper .scene .lft1 img{ bottom: 350px;left: 50%;padding: 50px}
.mySwiper .scene .lft2 img{ bottom: 680px;left: 50%;margin-left: 200px;padding: 50px}
.mySwiper .scene .lft3 img{ bottom: 640px;left: 50%;margin-left: 800px;padding: 50px}
.mySwiper .scene .lft4 img{ width: 800px;bottom: 200px;left: 50%;margin-left: 80px}
.mySwiper .slide2 .scene li img,.mySwiper .slide3 .scene li img,.mySwiper .slide4 .scene li img,.mySwiper .slide5 .scene li img,.mySwiper .slide6 .scene li img{ left: 0;top: 0;width: 100%;-o-object-fit: cover;object-fit: cover}
@media (max-width:1440px){
 .mySwiper .swiper-pagination{  padding: 0 40px }
 .mySwiper .swiper-pagination>*{  display: none }
}
@media (max-width:1024px){
 .mySwiper{  padding-top: 45%;height: 0 }
 .mySwiper .swiper-wrapper{  position: absolute;width: 100%;top: 0;left: 0;height: auto }
 .mySwiper .swiper-pagination{  bottom: 10px }
 .mySwiper .swiper-pagination span{  width: 40px }
 .mySwiper .swiper-slide .banner_text{  bottom: auto;top: 65px }
 .mySwiper .swiper-slide h2{  font-size: 26px }
 .mySwiper .swiper-slide h2 span{  font-size: 22px }
 .mySwiper .btn{  margin-top: 5% }
 .mySwiper .scene .lft1 img{  bottom: 42%;left: 46%;padding: 50px }
 .mySwiper .scene .lft2 img{  bottom: 55%;left: 60%;margin-left: 200px;padding: 50px }
 .mySwiper .scene .lft3 img{  bottom: 0;left: 80%;margin-left: 0;padding: 50px }
 .mySwiper .scene .lft4 img{  width: 80%;bottom: 10%;left: 50%;margin-left: 0 }
}
@media (max-width:680px){
 .mySwiper{  padding-top: 100% }
 .mySwiper .slide1{  background-image: url(../images/sjbannerra.png) }
 .mySwiper .slide3{  background-image: url(../images/index/s1_banner5_m.jpg) }
 .mySwiper .slide2{  background-image: url(../images/sjbannersr.png) }
 .mySwiper .slide4{  background-image: url(../images/sjbannerwz.png) }
 .mySwiper .slide5{  background-image: url(../images/sjbanner1.png) }
 .mySwiper .slide5{  background-image: url(../images/sjbanner1.png) }
 .mySwiper .slide6{  background-image: url(../images/sjbanner6.png) }
 .mySwiper .slide7{  background-image: url(/kp/2023/images/index/sjbanner7.png) }
 .mySwiper .slide8{  background-image: url(/kp/2023/images/index/sjbanner8.png) }
 .mySwiper .swiper-slide h2{  line-height: 40px;padding-top: 10% }
 .mySwiper .swiper-slide .btn{  padding: 5px 52px 5px 16px }
 .mySwiper .swiper-slide.slide1 h2{  padding-top: 8% }
 .mySwiper .swiper-slide.slide1 p{  width: 50% }
 .mySwiper .swiper-pagination{  padding-left: 0;text-align: center }
}
@media (max-width:450px){
 .mySwiper .swiper-slide h2{  font-size: 18px;line-height: 30px;padding-top: 5% }
 .mySwiper .swiper-slide h2 span{  font-size: 16px }
 .mySwiper .swiper-slide p{  font-size: 14px;width: 65%;line-height: 20px }
 .mySwiper .swiper-slide .btn{  font-size: 14px }
}
@media (max-width:350px){
 .mySwiper .swiper-slide h2{  padding-top: 5% }
 .mySwiper .swiper-slide p{  font-size: 12px }
}
.news{ position: absolute;bottom: 10px;left: 0;width: 100%;height: 160px;overflow: hidden;z-index: 92}
.news .first{float: left; width: 37%; background-color: #fff;border-radius: 5px 5px 0 0;overflow: hidden; height: 160px;}
.news .first .img_box{ width: 55%; float: left;}
.news .first .img_box a img{ height: 160px;}
.news .first .text{float: right; width: 45%; padding: 25px 15px 0;}
.news .first .text h4,
.news .normal .text h4{ font-size: 18px;line-height: 26px;padding-bottom:25px; height: 52px; box-sizing: content-box;}
.news .first .text h4 a,
.news .normal .text h4 a{ display: block;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden}
.news .first .text p,
.news .normal .text p{ font-size: 15px;color: #666; overflow: hidden; white-space:nowrap; text-overflow:ellipsis;}
.news .normal{ width: 62%; padding-left: 10px; padding-right: 10px; float: right; background-color: #fff;border-radius: 5px 5px 0 0;overflow: hidden; height: 160px;}
.news .normal li{float: left; width: 50%; position: relative; padding-left: 10px; padding-right: 10px; box-sizing: border-box;}
.news .normal .time{position: absolute; left: 15px; top: 32px;}
.news .normal .time b{font-size: 48px; line-height: 40px;}
.news .normal .time img{margin: 0 auto; display: block; height: 27px;}
.news .normal .time span{display: block;}
.news .normal .text{margin-left: 85px;}
.news .normal .text h4{padding-top: 25px;}

/* .news .normal .w1{ display: inline-block;width: 68px;text-align: center}
.news .normal .w2{ display: inline-block;width: 314px;width: calc(100% - 77px);white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all}
.news .normal p.memo .w2{ padding-left: 5px}
.news .normal h3 .w1{ font-size: 48px}
.news .normal h3 .w2{ font-size: 18px}
.news .normal p{ display: flex;align-items: center}
.news .normal p .w2{ color: #666}
.news .normal p.icon{ margin: 5px 0} */
/* .news .mid{ position: relative;right: -1%} */
@media (max-width:1366px){
 /* .news .first{  justify-content: flex-start }
 .news .first .img_box{  width: 50%;display: flex;align-items: center }
 .news .first .text{  width: 49% } */
}
@media (max-width:1024px){
 .news{  display: none }
 .news .first{  padding-top: 2% }
}
@media (max-width:991px){
 .news{  position: relative;height: auto }
 .news .first .img_box{  max-width: 300px;width: 30% }
 .news .first .img_box a img{  height: auto }
 .news .first .text{  width: 70%;padding: 0 0 0 2% }
 .news .first .text h4{  margin-bottom: 2%;font-size: 17px;padding-bottom: 0 }
 .news .normal h3 .w1{  font-size: 30px }
 .news .normal h3 .w2{  font-size: 17px }
 .news .normal p.icon{  margin: 0 }
 .news .normal p.icon .w1{  height: 20px;overflow: hidden }
 .news .normal p.icon .w1 img{  position: relative;top: -20px }
}
.section2 .box{ width: 49.09%;position: relative;height: 712px;overflow: hidden}
.section2 .flex h3{ position: absolute;color: #fff;font-size: 30px}
.section2 .flex p{ position: absolute;color: #fff;line-height: 28px;width: 50%}
.section2 .swiper{ position: absolute;top: 0;left: 0;width: 100%;height: 678px}
.section2 .swiper-slide{ background-repeat: no-repeat;background-size: cover;position: relative;overflow: hidden}
.section2 .swiper-slide a{ position: relative;display: block;width: 100%;height: 100%}
.section2 .swiper-slide .img_box{ position: absolute;width: 100%;height: auto;top: 0}
.section2 .swiper-slide h3{ top: 10%;left: 5%}
.section2 .swiper-slide p{ top: 18%;left: 5%}
.section2 .swiper-slide .human{ position: absolute;bottom: 0;right: 10%}
.section2.active .box{ -webkit-animation-name: fadeInUp;animation-name: fadeInUp;-webkit-animation-delay: .3s;animation-delay: .3s}
.section2.active .box .swiper-slide-active .human{ -webkit-animation-name: fadeInUpBig;animation-name: fadeInUpBig;-webkit-animation-delay: .1s;animation-delay: .1s}
.section2.active .zt a{ display: block;width: 100%;height: 100%}
.section2.active .zt .xnzt{ -webkit-animation-name: fadeInUp;animation-name: fadeInUp;-webkit-animation-delay: .6s;animation-delay: .6s}
.section2.active .zt .szls{ -webkit-animation-name: fadeInUp;animation-name: fadeInUp;-webkit-animation-delay: .9s;animation-delay: .9s}
.section2 .fp-tableCell .zt .szls{ position: absolute;bottom: 0;right: 0;width: 100%}
@media (min-height:875px){
 .section2 .fp-tableCell .swiper-slide .img_box, .section2 .fp-tableCell .swiper-slide .img_box img{  height: 663px }
 .section2 .fp-tableCell .swiper-slide .human{  text-align: right;bottom: 0 }
}
.section2 .swiper-pagination{ text-align: center;position: absolute;bottom: 30px;left: 0;width: 100%}
.section2 .swiper-pagination-switch{ background-color: #cbbbe1;width: 14px;height: 14px;display: inline-block;border-radius: 7px;overflow: hidden;margin: 0 5px}
.section2 .swiper-active-switch{ background-color: #fff}
.section2 .zt{ width: 49%;height: 664px;position: relative}
.section2 .zt>div{ height: 47%;background-repeat: no-repeat;background-size: cover;position: relative}
.section2 .zt>div h3{ top: 15%;left: 5%}
.section2 .zt>div p{ top: 35%;left: 5%}
.section2 .zt .xnzt{ background-image: url(../images/index/s202.jpg);margin-bottom: 2%}
.section2 .zt .szls{ background-image: url(../images/index/s203.jpg);height: 48.5%}
@media (min-width:1024px) and (max-height:875px){
 .section2 .box, .section2 .swiper, .section2 .zt{  height: 550px }
 .section2 .swiper-pagination{  bottom: 9% }
 .section2 .swiper-slide .human{  text-align: right;bottom: -10px }
 .section2 .swiper-slide .human img{  width: 80% }
}
@media (min-width:1024px) and (max-height:665px){
 .section2 .box, .section2 .swiper, .section2 .zt{  height: 450px }
 .section2 .swiper-slide .human img{  width: 60% }
}
@media (max-width:768px){
 .section2{  padding-bottom: 3% }
 .section2 .box{  height: auto;padding-top: 104% }
 .section2 .flex h3{  font-size: 22px }
 .section2 .flex p{  line-height: 26px;width: 50%;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;line-clamp: 3;-webkit-box-orient: vertical }
 .section2 .swiper{  height: 100% }
 .section2 .swiper-pagination{  bottom: 9% }
 .section2 .swiper-slide .human{  bottom: 0;text-align: right }
 .section2 .swiper-slide .human img{  width: 75% }
 .section2 .zt{  height: auto }
 .section2 .zt>div{  height: auto;padding: 9% 0 }
 .section2 .zt>div h3{  position: relative;margin-bottom: 2% }
 .section2 .zt>div p{  display: none }
 .section2 .zt .szls{  height: auto }
}
@media (max-width:500px){
 .section2 .flex h3{  font-size: 18px }
 .section2 .flex p{  line-height: 22px;width: 50% }
 .section2 .swiper-slide .human img{  width: 50% }
}
.section3 .hd{ font-size: 22px;padding: 0 5%}
.section3 .hd a{ display: inline-block;margin: 0 0;padding-bottom: 10px}
.section3 .hd a.on{ font-weight: 700;border-bottom: 3px solid #f5b03f}
.section3 .bd .flex{ justify-content: flex-start;text-align: left}
.section3 .bd .flex>a{ width: 23%;height: 0;padding-top: 14%;text-align: center;background-color: rgba(255,255,255,.3);border: 1px solid #f9fcfe;position: relative;margin: 2% 1% 0;transition: all .3s;box-sizing: border-box}
.section3 .bd .flex>a span{ width: 100%;position: absolute;left: 0}
.section3 .bd .flex>a .img_box{ height: 70%;top: 20%;transition: all .3s}
.section3 .bd .flex>a .txt{ bottom: 20%;font-size: 20px;font-weight: 700}
.section3 .bd .flex>a:hover{ background-color: rgba(255,255,255,.7)}
.section3 .bd .flex>a:hover .img_box{ top: 15%}
.section3.active .hd{ -webkit-animation-name: fadeInUp;animation-name: fadeInUp;-webkit-animation-delay: .2s;animation-delay: .2s}
.section3.active .bd .flex>a{ -webkit-animation-name: fadeInUp;animation-name: fadeInUp}
.section3.active .bd .flex>a:nth-child(1){ -webkit-animation-delay: .2s;animation-delay: .2s}
.section3.active .bd .flex>a:nth-child(2){ -webkit-animation-delay: .4s;animation-delay: .4s}
.section3.active .bd .flex>a:nth-child(3){ -webkit-animation-delay: .6s;animation-delay: .6s}
.section3.active .bd .flex>a:nth-child(4){ -webkit-animation-delay: .8s;animation-delay: .8s}
.section3.active .bd .flex>a:nth-child(5){ -webkit-animation-delay: 1s;animation-delay: 1s}
.section3.active .bd .flex>a:nth-child(6){ -webkit-animation-delay: 1.2s;animation-delay: 1.2s}
.section3.active .bd .flex>a:nth-child(7){ -webkit-animation-delay: 1.4s;animation-delay: 1.4s}
.section3.active .bd .flex>a:nth-child(8){ -webkit-animation-delay: 1.6s;animation-delay: 1.6s}
.section3 .fp-tableCell .tab{ height: 500px}
.section3 .fp-tableCell .bd .c{ height: 464px}
@media (max-height:680px){
 .section3 .fp-tableCell .bd .flex>a{  padding-top: 13%;margin: 1% 1% 0 }
}
@media (max-height:680px){
 .section3 .fp-tableCell .tab{  height: 374px }
 .section3 .fp-tableCell .bd .c{  height: 340px }
}
@media (max-width:1078px){
 .section3{  padding-bottom: 3% }
 .section3 .hd{  padding: 0 }
 .section3 .bd .flex>a{  padding: 2% 0;height: auto }
 .section3 .bd .flex>a .img_box{  position: relative;top: 0;height: 70px;display: block }
 .section3 .bd .flex>a .txt{  position: relative;bottom: 0;font-size: 16px }
}
@media (max-width:991px){
 .section3 .hd{  font-size: 18px }
 .section3 .hd a{  margin: 0;margin-bottom: 2%;padding-bottom: 6px }
 .section3 .bd .flex>a{  width: 48% }
}
@media (max-width:520px){
 .section3 .hd a{  margin: 1.5% 6% }
 .section3 .bd .flex>a{  padding-bottom: 4% }
 .section3 .bd .flex>a .img_box{  height: 55px }
 .section3 .bd .flex>a .img_box img{  transform: scale(.7) }
}
@media (max-width:368px){
 .section3 .hd a{  margin: 1.5% 4% }
}
.section4 .bluebg,.section4 .text{ position: absolute;width: 100%;height: 100%;top: 0;left: 0}
.section4 .bluebg{ background: url(../../2024/images/index/ai06.png);display: none;transition: all .3s;background-size: 100% 100%;}
.section4 .img_box{ text-align: center}
.section4 .img_box img{ width: 100%;height: 580px;}
@media (max-height:780px){
 .section4 .img_box{  overflow: hidden }
}
.section4 .text{ color: #fff;text-align: center}
.section4 .text .icon_box{ position: absolute;top: 50%;left: 0;width: 100%;transition: all .3s;margin-top: -50px}
.section4 .text .icon_box b{ font-size: 28px}
.section4 .text .icon{ display: block;margin: auto;height: 52px;align-items: center;margin-bottom: 30px}
.section4 .text .btn{ position: absolute;top: 65%;left: 50%;margin-left: -67px;opacity: 0;transition: all .3s}
.section4 .text p {position: absolute;top: 55%;line-height: 40px;text-align:left;opacity: 0;transition: all .3s;padding: 0 38px;}
.section4 .swiper-slide{ position: relative}
.section4 .swiper-slide .content{ transition: all .3s}
.section4 .swiper-slide:hover{ z-index: 22}
.section4 .swiper-slide:hover .content{ transform: scale(1.2)}
.section4 .swiper-slide:hover .bluebg{ display: block}
.section4 .swiper-slide:hover .text .icon_box{ top: 30%}
.section4 .swiper-slide:hover .text .icon_box b:after{ content: "";position: absolute;width: 40px;height: 2px;background-color: #fff;left: 50%;margin-left: -20px;bottom: -35px}
.section4 .swiper-slide:hover .text .btn{ opacity: 1}
.section4 .swiper-slide:hover .text p { opacity: 1}
.section4 .swiper-slide:hover .img_box img {border-top-left-radius: 60px;border-bottom-right-radius: 60px;}
.section4 .arrow-left,.section4 .arrow-right{ position: absolute;width: 24px;height: 43px;top: 50%;margin-top: -21px;z-index: 22;cursor: pointer;background-image: url(../images/index/s_icon411.png)}
.section4 .arrow-left{ background-position: 0 0;left: 8px}
.section4 .arrow-right{ background-position: right 0;right: 8px}
.section4.active .swiper-slide{ -webkit-animation-name: fadeInUp;animation-name: fadeInUp}
.section4.active .swiper-slide:nth-child(1){ -webkit-animation-delay: 0s;animation-delay: 0s}
.section4.active .swiper-slide:nth-child(2){ -webkit-animation-delay: .1s;animation-delay: .1s}
.section4.active .swiper-slide:nth-child(3){ -webkit-animation-delay: .2s;animation-delay: .2s}
.section4.active .swiper-slide:nth-child(4){ -webkit-animation-delay: .3s;animation-delay: .3s}
.section4.active .swiper-slide:nth-child(5){ -webkit-animation-delay: .4s;animation-delay: .4s}
.section4.active .swiper-slide:nth-child(6){ -webkit-animation-delay: .2s;animation-delay: .2s}
.section4.active .swiper-slide:nth-child(7){ -webkit-animation-delay: .4s;animation-delay: .4s}
.section4.active .swiper-slide:nth-child(8){ -webkit-animation-delay: .6s;animation-delay: .6s}
.section4.active .swiper-slide:nth-child(9){ -webkit-animation-delay: .8s;animation-delay: .8s}
.section4.active .swiper-slide:nth-child(10){ -webkit-animation-delay: 1s;animation-delay: 1s}
@media (max-height:780px){
 .section4 .fp-tableCell .jjfa{  height: 500px }
 .section4 .fp-tableCell .img_box{  max-height: 500px }
}
@media (max-height:628px){
 .section4 .fp-tableCell .jjfa{  height: 400px }
 .section4 .fp-tableCell .img_box{  max-height: 400px }
}
@media (max-height:575px){
 .section4 .fp-tableCell .jjfa{  height: 350px }
 .section4 .fp-tableCell .img_box{  max-height: 350px }
}
@media (max-width:1024px){
 .section4{  padding-bottom: 4% }
 .section4 .icon_box{  transform: scale(.8) }
}
@media (max-width:991px) {
.section4 .text p {top: 40%;}
 .section4 .swiper-slide:hover .text .icon_box {top: 15%;}
}
@media (max-width:480px){
 .section4 .icon_box{  transform: scale(.6) }
}
.section5 .type a{ width: 24%;padding: 1.5% 0 0 0;text-align: center;font-size: 18px;/*display: flex;*/align-items: center;justify-content: center;border: 1px solid transparent;transition: all .3s}
.section5 .type a span{ padding-bottom: 5%}
.section5 .type a span.zh-txt {display: block;}
.section5 .type a.on,.section5 .type a:hover{ background-color: rgba(255,255,255,.3);border: 1px solid #fcfdfe}
.section5 .hxjs .text{ width: 39.23%}
.section5 .hxjs .text h4{ font-size: 30px;margin: 10% 0 8% 0;line-height: 32px}
.section5 .hxjs .text p{ font-size: 16px;line-height: 36px;color: #858585}
.section5 .hxjs .text .btn{ color: #17a1ff;border-color: transparent;background: url(../images/index/arrow_blue.png) no-repeat 90% 45%;padding-left: 0;margin-top: 5%}
.section5 .hxjs .img_box{ width: 58%;text-align: right}
.section5 .hxjs .img_box img{ max-height: 407px}
.section5.active .type a{ -webkit-animation-name: fadeInUp;animation-name: fadeInUp}
.section5.active .type a:nth-child(1){ -webkit-animation-delay: .4s;animation-delay: .4s}
.section5.active .type a:nth-child(2){ -webkit-animation-delay: .6s;animation-delay: .6s}
.section5.active .type a:nth-child(3){ -webkit-animation-delay: .8s;animation-delay: .8s}
.section5.active .type a:nth-child(4){ -webkit-animation-delay: 1s;animation-delay: 1s}
.section5.active .hxjs .text>.btn,.section5.active .hxjs .text>h4,.section5.active .hxjs .text>p{ -webkit-animation-name: fadeInUp;animation-name: fadeInUp}
.section5.active .hxjs .text h4{ -webkit-animation-delay: .2s;animation-delay: .2s}
.section5.active .hxjs .text p{ -webkit-animation-delay: .4s;animation-delay: .4s}
.section5.active .hxjs .text .btn{ -webkit-animation-delay: .6s;animation-delay: .6s}
.section5.active .hxjs .img_box{ -webkit-animation-name: fadeInUp;animation-name: fadeInUp;-webkit-animation-delay: 1s;animation-delay: 1s}
.section5 .fp-tableCell .tab{ height: 564px;overflow: hidden}
.section5 .fp-tableCell .hxjs{ height: 426px}
@media (max-height:800px){
 .section5 .fp-tableCell .tab{  height: 514px }
 .section5 .fp-tableCell .hxjs{  height: 360px }
 .section5 .fp-tableCell .hxjs .img_box img{  max-height: 360px }
}
@media (max-height:700px){
 .section5 .fp-tableCell .tab{  height: 424px }
 .section5 .fp-tableCell .type a{  padding-top: .5%;height: 120px;overflow: hidden }
 .section5 .fp-tableCell .hxjs{  height: 326px }
 .section5 .fp-tableCell .hxjs .text h4{  margin: 7% 0 4% 0 }
 .section5 .fp-tableCell .hxjs .text p{  line-height: 30px }
 .section5 .fp-tableCell .hxjs .img_box img{  max-height: 326px }
}
@media (max-height:600px){
 .section5 .fp-tableCell .tab{  height: 400px }
 .section5 .fp-tableCell .hxjs{  height: 280px }
 .section5 .fp-tableCell .hxjs .text p{  line-height: 28px }
 .section5 .fp-tableCell .hxjs .text .btn{  margin-top: 3% }
 .section5 .fp-tableCell .hxjs .img_box img{  max-height: 270px }
}
@media (max-width:991px){
 .section5 .bd{  display: none }
 .section5 .type a{  background-color: rgba(255,255,255,.3);border: 1px solid #fcfdfe }
 .section5 .type a img{  width: 30% }
 .section5 .type a span{  /*width: 7em;*/font-size: 16px }
 .section5 .hxjs{  padding-bottom: 3%;height: auto }
 .section5 .hxjs .text h4{  margin: 3% 0 1%;font-size: 20px }
 .section5 .hxjs .text p{  line-height: 28px }
 .section5 .hxjs .text .btn{  margin-top: 3% }
}
@media (max-width:768px){
 .section5 .type a{  width: 48%;margin-bottom: 2% }
}
.section6 .title{ margin-bottom: 3%}
.section6 .main_left{ width: 35%}
.section6 .main_left p{ line-height: 28px;color: #555;margin-top: 4px}
.section6 .main_left b{ color: #004ca0;font-weight: 400}
.section6 .main_left i{ font-style: normal}
.section6 .main_left .zw{ margin-top: 50px}
.section6 .main_left .zw b{ font-size: 48px}
.section6 .main_left ul{ margin-top: 45px}
.section6 .main_left ul b{ font-size: 30px}
.section6 .main_left ul li span{ display: inline-block;border-bottom: 2px solid #024ea2;width: 40px;position: relative;top: -8px}
.section6 .main_right{ width: 57%}
.section6 .main_right li{ margin: .5% auto 1%;width: 24%}
/*.section6 .main_right li:nth-child(n+7){ margin-bottom: 0}*/
.section6 .main_right li a{ display: block;transition: all .3s}
.section6 .main_right li a:hover{ box-shadow: 0 0 7px 5px #eaecf0}
.section6 h4{ font-size: 22px;margin-bottom: 20px}
.section6.active .zw,.section6.active h4,.section6.active li,.section6.active p.animated{ -webkit-animation-name: fadeInUp;animation-name: fadeInUp}
.section6.active .main_left h4{ -webkit-animation-delay: .2s;animation-delay: .2s}
.section6.active .main_left p.animated{ -webkit-animation-delay: .4s;animation-delay: .4s}
.section6.active .main_left .zw{ -webkit-animation-delay: .5s;animation-delay: .5s}
.section6.active .main_left li{ -webkit-animation-delay: .7s;animation-delay: .7s}
.section6.active .main_right h4{ -webkit-animation-delay: .2s;animation-delay: .2s}
.section6.active .main_right li:nth-child(-n+3){ -webkit-animation-delay: .2s;animation-delay: .2s}
.section6.active .main_right li:nth-child(4),.section6.active .main_right li:nth-child(5),.section6.active .main_right li:nth-child(6){ -webkit-animation-delay: .5s;animation-delay: .5s}
.section6.active .main_right li:nth-child(n+7){ -webkit-animation-delay: .8s;animation-delay: .8s}
@media (max-width:991px){
 .section6 .main_left{  margin-top: 20px }
 .section6 .main_left .zw{  margin-top: 20px }
 .section6 .main_left .zw b{  font-size: 38px }
 .section6 .main_left ul{  margin-top: 20px }
 .section6 .main_left ul b{  font-size: 26px }
 .section6 .main_right{  margin-top: 20px;padding-bottom: 10px }
 .section6 h4{  margin-bottom: 10px;font-size: 20px }
 .section6 .main_right li:last-child{  display: none }
}
@media (max-width:991px) and (max-width:420px){
 .section6 .main_right li{  width: 48% }
}
.section7 .title h3{ color: #fff}
.section7 .title p{ color: #969ac1}
.section7 .container{ margin: 0 auto}
.section7 .container .btn{ margin-top: 2%;-webkit-animation-name: fadeInUp;animation-name: fadeInUp;-webkit-animation-delay: .8s;animation-delay: .8s}
.section7 ul.flex li{ width: 32%;background: #fff;padding: 20px;margin: 0 1% 0 0;position: relative;height: 506px;border-radius: 5px;box-shadow: 0 0 15px rgba(0,0,0,.03)}
.section7 ul.flex li .pic{ overflow: hidden}
.section7 ul.flex li b{ margin-top: 30px;font-size: 18px;display: block;display: -webkit-box;overflow: hidden;white-space: normal;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all}
.section7 ul.flex li p{ color: #666;line-height: 30px;margin-top: 15px;display: -webkit-box;overflow: hidden;white-space: normal;text-overflow: ellipsis;-webkit-box-orient: vertical;word-break: break-all;-webkit-line-clamp: 3}
.section7 ul.flex li .alzx-more a{ position: absolute;width: 150px;height: 40px;line-height: 40px;text-align: center;border: 1px solid #4865f8;color: #4865f8;bottom: 40px;left: 50%;margin-left: -75px;transition: all .3s}
.section7 ul.flex li:hover .alzx-more a{ background: #4865f8;color: #fff}
.section7 ul.flex li:nth-child(1){ -webkit-animation-name: fadeInUp;animation-name: fadeInUp;-webkit-animation-delay: .2s;animation-delay: .2s}
.section7 ul.flex li:nth-child(2){ -webkit-animation-name: fadeInUp;animation-name: fadeInUp;-webkit-animation-delay: .4s;animation-delay: .4s}
.section7 ul.flex li:nth-child(3){ -webkit-animation-name: fadeInUp;animation-name: fadeInUp;-webkit-animation-delay: .6s;animation-delay: .6s}
@media (max-width:991px){
 .section7 ul.flex li{  width: 100%;height: auto;margin-bottom: 30px }
 .section7 ul.flex li .alzx-more a{  position: relative;top: 0;left: 0;margin: 15px auto;display: block }
 .section7 ul.flex li:nth-child(3){  display: none }
}
.section8{ background-color: #fafafa}
@media (max-width:991px){
 .section8{  padding-top: 0 }
}
.section8 .fp-tableCell{ padding-top: 14%}
.section8 .slogan{ color: #fff;text-align: center;position: absolute;top: 0;left: 0;width: 100%}
.section8 .slogan img{ width: 100%}
.section8 .slogan .text{ position: absolute;width: 100%;text-align: center;top: 55%;margin-top: -50px}
.section8 .slogan h1{ font-size: 50px;line-height: 65px;margin-bottom: 1.5%}
.section8 .slogan p{ font-size: 20px}
.section8.active .text h1{ -webkit-animation-name: fadeInUp;animation-name: fadeInUp;-webkit-animation-delay: .2s;animation-delay: .2s}
.section8.active .text p{ -webkit-animation-name: fadeInUp;animation-name: fadeInUp;-webkit-animation-delay: .4s;animation-delay: .4s}
@media (min-width:1024) and (max-height:660px){
 .section8 .fp-tableCell{  padding-top: 10% }
 .section8 .slogan{  height: 18vw;overflow: hidden }
 .section8 .slogan img{  -o-object-fit: contain;object-fit: contain }
 .section8 .slogan .text{  top: 65% }
 .section8 .footer .lxff .erweima, .section8 .footer .lxff .mail, .section8 .footer .lxff .tel{  margin-top: 10px }
}
@media (max-width:1024){
 .section8 .slogan{  position: relative;background: url(../images/index/s801.jpg) no-repeat;background-size: cover }
 .section8 .slogan img{  display: none }
 .section8 .slogan .text{  margin-top: 0;position: relative;padding: 3% 0 }
 .section8 .slogan h1{  font-size: 24px;line-height: 28px }
 .section8 .slogan p{  font-size: 18px }
}
.section10{background-image:url(../images/index/kwdmx_bg.png);display: none !important;}
/*.section10 .fp-tableCell{ padding-top: 17%;}*/
.section10 .kwdmx{padding-top: 40px;padding-bottom: 140px;}
.section10 .kwdmx li{float: left;width: 25%;padding: 0px 3%;position: relative;-webkit-animation-name: fadeInUp;animation-name: fadeInUp}
.section10 .kwdmx li .wrap{position: relative;}
.section10 .kwdmx li .pannel1{position: relative;width: 100%;height: 100%;text-align: center;z-index: 1;}
.section10 .kwdmx li .imgbox{position: absolute;width: 100%;height: 400px;}
.section10 .kwdmx li .imgbox img{width: 100%;height: 400px;}
.section10 .kwdmx li .pannel1 i{display: block;width: 54px;height: 54px;margin:0px auto 10px;position: relative;z-index: 2;padding-top:180px;}
.section10 .kwdmx li .pannel1 span{font-size: 1.4em;display: inline-block;padding: 0px 1px;position: relative;line-height: 2.6em;z-index: 2;color: white;margin: 0 auto;}
.section10 .kwdmx li .pannel1 span:after{content: "";display: block;position: absolute;bottom: -4px;left: 0px;width: 46px;height: 3px;background: white;margin-left: -23px;left: 50%;}
.section10 .kwdmx li .pannel2{display: none;position: absolute;z-index: 3;left: 0px;top: 0px;padding: 20px;}
.section10 .kwdmx li .pannel2 span{color: white;font-size: 1.4em;line-height: 2em;-webkit-animation-name: fadeInUp;animation-name: fadeInUp}
.section10 .kwdmx li .pannel2 p{margin-top: 1em;color: white;font-size:0.7em;-webkit-animation-name: fadeInUp;animation-name: fadeInUp}
.section10 .kwdmx li .pannel2 a{ -webkit-animation-name: fadeInUp;animation-name: fadeInUp;transition: all .3s;display: inline-block;color: #fff;text-align: center;border: 1px solid #818dbd;font-size: 0.8em;padding: 5px 52px 5px 16px;background: url(../images/index/arrow.png) no-repeat 90% 45%;margin-top: 8%;-webkit-animation-delay: .8s;animation-delay: .8s;transition: all .3s}
.section10 .kwdmx li .picbox{width: 100%;height: 200px;position: absolute;bottom: -120px;right: -40px;z-index: 1;display: none;}
.section10 .kwdmx .kwdmx_li1 .picbox{background: url(../images/index/kwdm_pic_1.png) no-repeat  right bottom;background-size: 280px;background-position: right 20px;}
.section10 .kwdmx .kwdmx_li2 .picbox{background: url(../images/index/kwdm_pic_2.png) no-repeat  right bottom;background-size: 280px;}
.section10 .kwdmx .kwdmx_li3 .picbox{background: url(../images/index/kwdm_pic_3.png) no-repeat  right bottom;background-size: 280px;}
.section10 .kwdmx .kwdmx_li4 .picbox{background: url(../images/index/kwdm_pic_4.png) no-repeat  right bottom;background-size: 280px;}
.section10 .kwdmx .kwdmx_li1 i{background: url(../images/index/kwdmx_icon_1.png) no-repeat center bottom;}
.section10 .kwdmx .kwdmx_li2 i{background: url(../images/index/kwdmx_icon_2.png) no-repeat center bottom;}
.section10 .kwdmx .kwdmx_li3 i{background: url(../images/index/kwdmx_icon_3.png) no-repeat center bottom;}
.section10 .kwdmx .kwdmx_li4 i{background: url(../images/index/kwdmx_icon_4.png) no-repeat center bottom;}
.section10 .kwdmx li:hover .wrap{transform: scale(1.2);transition: all 0.3s}
.section10 .kwdmx li:hover .picbox{display: block;animation-delay:1s;-webkit-animation-name: fadeInUp;animation-name: fadeInUp}
.section10 .kwdmx li:hover .pannel2{display: block;}
.section10 .kwdmx li:hover .imgbox img{border-radius: 0px 20px 0px 20px;transition: all 0.3s;}
.section10 .kwdmx li:hover .pannel1 i{opacity: 0;}
.section10 .kwdmx li:hover .pannel1 span{opacity: 0;}
.section10 .kwdmx .kwdmx_li1{animation-delay:.2s}
.section10 .kwdmx .kwdmx_li2{animation-delay:.4s}
.section10 .kwdmx .kwdmx_li3{animation-delay:.6s}
.section10 .kwdmx .kwdmx_li4{animation-delay:.8s}
@media (max-width:991px){
	.section10 .kwdmx li{width:50%;margin-bottom: 20px;overflow: hidden;}
	.section10 .kwdmx li:hover .wrap{transform: none;}
	.section10 .kwdmx li .pannel2{display: block;}
	.section10 .kwdmx li .pannel1 i{opacity: 0;}
    .section10 .kwdmx li .pannel1 span{opacity: 0;}
	.section10 .kwdmx li .imgbox{height: auto;}
	.section10 .kwdmx li .imgbox img{height: auto;}
	.section10 .kwdmx li:hover .picbox{display: none;}
}
@media (max-width:768px){
	.section10 .kwdmx{padding-bottom: 20px;}
	.section10 .kwdmx li{width:100%}
}
/*公告*/
.gonggao_box{position:fixed;left:50%;margin-left:-300px;width:600px;background:#fff;font-size:14px;color:#333;top:10%;z-index:100;padding:40px;line-height:28px;display:block;}
.gonggao_box h2{text-align:center;margin-bottom:30px;}
.gonggao_box p{text-indent:2em;}
.gonggao_box .gonggao_close{float:right;width:20px;margin-top:-20px;margin-right:-20px;}
@media (max-width:991px){
	.gonggao_box{margin-left:-40%;width:80%;padding:4%;}
	.gonggao_box .gonggao_close{margin-top:0px;margin-right:0px;}
}
/*智算*/
.section .title h3:after {content: '';display: block;width: 4%;height: 5px;margin: 10px auto 0;border-radius: 100px;background-color: #2A82E4;}
.section9 .title {margin-bottom: 4%;}
.section9 {background: url(../../2024/images/index/zs_bg.png)}
.section9 .zs-swiper {height: 615px;overflow: hidden;}
.section9 .zs-swiper .swiper-slide a {display: block; width: 80%;height: 615px;padding: 0 33px;background-color: #fff;box-shadow: 0px 10px 18px rgba(166, 166, 166, 0.1);}
.section9 .zs-til {height: 170px;line-height: 210px;font-size: 30px;font-weight: 700;color: #333;text-align: center;background: url(../../2024/images/index/icon_01.png) center no-repeat;}
.section9 .zs-til2 {background: url(../../2024/images/index/icon_02.png) center no-repeat;}
.section9 .zs-til3 {background: url(../../2024/images/index/icon_03.png) center no-repeat;}
.section9 .zs {font-size: 20px;line-height: 28px;color: #808080;margin-bottom: 35px;}
/*优势*/
.section11 {position: relative;background: url(../../2024/images/index/ys_bg.png) right no-repeat;background-size: 100% 100%;}
.section11 .video-txt {position:absolute; top: 7%;left: 0;width: 42%;height: 100%;background: url(../../2024/images/index/pic_ys.png) left no-repeat;background-size: cover;}
.section11 .video-txt span {display: inline-block;position: absolute;top: 10%;left: 10%; width: 30px;color: #fff;font-size: 60px;font-weight: 700;line-height: 86px;}
.section11 .video-txt span:last-child {left: 20%;}
.section11 .super-content {position: absolute;top: 20%;left: 46%;width: 850px;height:600px;}
.section11 .super-content a {display: inline-block;padding: 13px 15px;}
.section11 .title {position: absolute;top: 10%;left: 50%;margin-left: -100px;}
.section.section11 .title h3:after {width: 40%;}
.section11  ul li {position: absolute;width: 450px;border-radius: 100px;background: linear-gradient(122.04deg, #FFFFFF 0%, #FFFFFF 100%); border: 1px solid #FFFFFF; box-shadow: 7px 7px 25px  rgba(42, 130, 228, 0.2);}
.section11  ul li a {font-size: 24px;font-weight: 700;}
.section11 ul li a span {display: inline-block;line-height: 25px;}
.section11  ul li img {margin-right: 15px;}
.section11  ul li:nth-child(1) {top: 2%;animation:myfirst linear infinite 2s;}
.section11  ul li:nth-child(2) {top: 13%;left: 34%; z-index: 33;animation:myfirsta linear infinite 2s;}
.section11  ul li:nth-child(3) {top: 27%;left: 2%;animation:myfirstb linear infinite 2s;}
.section11  ul li:nth-child(4) {top: 38%;left: 34%;z-index: 33;animation:myfirstc linear infinite 2s;}
.section11  ul li:nth-child(5) {top: 50%;animation:myfirstd linear infinite 2s;}
.section11  ul li:nth-child(5) img {vertical-align: middle;margin-top: -20px;}
.section11  ul li:nth-child(6) {top: 70%;left: 34%;z-index: 33;animation:myfirste linear infinite 2s;}
.section11  ul li:nth-child(7) {top: 80%;left: 2%;animation:myfirstf linear infinite 2s;}
@keyframes myfirst {0% {top:3%;} 50% {top:6%;} 100% {top:3%;}}
@keyframes myfirsta {0% {top:17%;} 70% {top:21%;} 100% {top:17%;}}
@keyframes myfirstb {0% {top:31%;} 60% {top:35%;} 100% {top:31%;}}
@keyframes myfirstc {0% {top:47%;} 40% {top:50%;} 100% {top:47%;}}
@keyframes myfirstd {0% {top:61%;} 40% {top:64%;} 100% {top:61%;}}
@keyframes myfirste {0% {top:75%;} 40% {top:78%;} 100% {top:75%;}}
@keyframes myfirstf {0% {top:90%;} 40% {top:93%;} 100% {top:90%;}}
@media (max-width:991px){
 .section4 .img_box img {height: auto;}
 .section11 ul li {position: unset;width: auto;}
 .section11 .super-content,.section11 .video-txt,.section11 .title {position: unset;}
 .section11 .title {margin-left: unset;}
 .section.section11 .title h3:after {width: 4%;}
 .section11 .video-txt {width: auto;height: 555px;}
 .section11 .video-txt span {font-size: 18px;line-height: 60px;}
 .section11 .super-content {width: auto;height: auto;}
 .section11 .super-content li a {font-size: 18px;}
 .section11 li {margin-bottom: 10px;}
 .section11 {background-size: 100%;}
}

.yssp{width: 100%;height:100%;position: absolute;z-index: 1111;top:0;left: 0;background: #000;}
#ucap_video{position: absolute;}
.vi_close{position: absolute;
    width: 86px;
    height: 90px;
    bottom: 10%;
    right: 30px;
    text-align: center;
    z-index: 999;}
.vi_closed{position: relative;}
.vi_close:hover .rd-notice-content {
  transform: translateX(-40px);
  opacity: 1;
  background-color: #1976d2;
}
.vi_close .rd-notice-content {
    position: absolute;
    right: 40px;
    top: 50%;
    margin-top: -20px;
    opacity: 0;
    min-height: 38px;
    z-index: 0;
    transition: all 0.3s cubic-bezier(0.86, 0, 0.07, 1);
    white-space: nowrap;
    width: auto;
    text-align: center;
    color: #fff;
    border-radius: 15px 15px 0px 15px;
    box-shadow: 0px 0px 20px 0px rgba(30, 136, 229, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 13px 10px 16px;
    font-size: 12px;
}


.section12{background: url(../../2024/images/index/2bg.png);}

/*第一层*/
@keyframes animX{
  0% {
    left: 0px;
  }
  100% {
    left: 500px;
  }
}
@keyframes animY{
  0% {
    top: 0px;
  }
  100% {
    top: 300px;
  }
}
@keyframes scale {

  0% {
    transform: scale(0.4);
    z-index: 0
  }
  50% {
    transform: scale(1);
    z-index: 3
  }
  100% {
    transform: scale(0.5);
    z-index: 0
  }
}

@keyframes hxz {
  0% {
      transform: rotateX(0deg);
  }
  100% {
      transform: rotateX(-360deg);
  }
}

@keyframes hx {
  to {
      transform: rotate(360deg);
  }
}

@keyframes path-animation {
  0% { stroke-dashoffset:500; }
  100% { stroke-dashoffset:0; }
}
.hx-box {
  transform-style: preserve-3d;
  transform: translate(-50%, 41%) rotateX(78deg);
}




#lopp {
  width: 740px;
  height: 142px;
  /* border: 10px solid transparent;
  border-radius: 50%;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #fff, #fff), linear-gradient(90deg, #8F41E9, #578AEF); */
  
  position: absolute;
  display: block;
  margin-left:20% ;
  z-index: 2;
  /* left: 50px;
  top: 70px; */
  animation: hxz 5s linear infinite;
}
/*鼠标进入停止*/
.active {
  animation-play-state: paused;
}
/*第二层*/
@keyframes anim2X{
  0% {
    left: 5px;
  }
  100% {
    left: 700px;
  }
}
@keyframes anim2Y{
  0% {
    top: 10px;
  }
  100% {
    top: 130px;
  }
}
.ball2 {
  z-index: 3;
  width: 88px;
  height: 88px;
  /*background-color: #f66;*/
  border-radius: 50%;
  position: absolute;
  color:#fff;
  font-size:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: red;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  /*line-height: 120px;*/
  /*动画执行一次所需时间*/
  animation-duration: 10s, 10s, 20s;
  /*动画以何种运行轨迹完成一个周期*/
  animation-timing-function: cubic-bezier(0.36,0,0.64,1);
  /*动画播放次数,无线循环播放*/
  animation-iteration-count: infinite;
  /*是否轮流反向播放动画 alternate:正向播放*/
  animation-direction: alternate;
  animation-name: anim2X, anim2Y,scale;
}
#lopp2 {
  width: 1100px;
  height: 217px;
  border: 2px solid #999;
  border-radius: 50%;
  position: absolute;
  left: 150px;
  top: 120px;
}
.circle {
  position: absolute;
  top: 114px;
  left: 250px;
  background: red;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  z-index: 3;
  color: #fff;
  font-size: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  background: lightgreen;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
}
.kwcontainer {
position: relative;
transform: rotateX(20deg);
  width: 1440px;
  height: 690px;
  margin: 0 auto;
}

.yq{
  text-align: center;
    position: absolute;
    width: 50%;
    left: 50%;
    margin-left: -25%;
    bottom: 22%;
    z-index: 2;
}
.borther{position: absolute; width: 750px;margin-left: 23%;}
.pr {
  position: relative;
}
.pa0 {
  left: 0;
  top: 0;
}

.pa, .pa0 {
  position: absolute;
}


.ball{
  width: 120px;
  height: 140px;
  /*background-color: #f66;*/
  position: absolute;
  font-size:22px;
  /* display:flex; */
  align-items:center;
  justify-content:center;
  z-index: 3;
  /*动画执行一次所需时间*/
  animation-duration: 10s, 10s, 20s;
  /*动画以何种运行轨迹完成一个周期*/
  animation-timing-function: cubic-bezier(0.36,0,0.64,1);
  /*动画播放次数,无线循环播放*/
  animation-iteration-count: infinite;
  /*是否轮流反向播放动画 alternate:正向播放*/
  animation-direction: alternate;
  animation-name: anim2X, anim2Y,scale;
}
.ball_1{text-align: center;background:url(../../2024/images/index/iicon_4.png) no-repeat 7px;font-size: 20px;}
.ball_2{background:  rgba(255, 255, 255, 0.5);width: 120px;border-radius: 10px; margin-top: 5px;padding: 15px 0;}
.ball_2 li{font-size: 16px;text-align: center;}
.ball_3{position: relative;}
.ball_3:after{position: absolute;content: "";bottom: -34px;left: 46px;background:url(../../2024/images/index/iicon_5.png) no-repeat bottom center;width: 26px;height: 28px;}

.conbg{position: relative;width: 100%;height: 100%;}

.zp1{
    height:100%;
    width:100%;
    position: absolute;
    top:-2%;
    left: 50%;

}
.zp1 .hx-box{
width:100%;
height:100%;
transform:translate(-50%, -19%) rotateX(0deg)
}
.zp1 .hx-box ul{
  width:100%;
height:100%;
}
.zp1 .hx-box ul li{
  width:100%;
height:100%;
border:0px;
}
.zp1 .hx-box li span{
width:100%;
height:100%;
background: url(../../2024/images/index/iicon_18.png) no-repeat center center;
/* animation:hx 4s linear infinite; */
display: block;
}

.zp2{
  height:100%;
  width:100%;
  position: absolute;
  top:4%;
  left: 50%;

}
.zp2 .hx-box{
width:100%;
height:100%;
transform:translate(-50%, 2%) rotateX(0deg)
}
.zp2 .hx-box ul{
width:100%;
height:100%;
}
.zp2 .hx-box ul li{
width:100%;
height:100%;
border:0px;
}
.zp2 .hx-box li span{
width:100%;
height:100%;
background: url(../../2024/images/index/iicon_17.png) no-repeat center center;
/* animation:hx 14s linear infinite; */
display: block;
}


@keyframes kaiws_1 {0% {top:43%;} 50% {top:46%;} 100% {top:43%;}}
@keyframes kaiws_2 {0% {top:53%;} 50% {top:55%;} 100% {top:53%;}}
@keyframes kaiws_3 {0% {top:56%;} 50% {top:58%;} 100% {top:56%;}}
@keyframes kaiws_4 {0% {top:52%;} 50% {top:54%;} 100% {top:52%;}}

.kaiws{position: absolute;width: 100%;height: 100%;}
.kaiwsc{position: relative;width: 100%;height: 100%;}
.kaiwsj{position: absolute;width: 216px;left: 50%;margin-left: -108px;top: 45%;font-size: 26px;font-weight: bold;}
.kaiws_dw{text-align: right;width: 325px;height: 115px;line-height: 88px;padding-right: 46px;position: absolute;}
.kaiws_1{background: url(../../2024/images/index/iicon_13.png) no-repeat;top: 43%;left: 11%;z-index: 5;animation:kaiws_1 linear infinite 4s;}
.kaiws_2{background: url(../../2024/images/index/iicon_14.png) no-repeat;top: 57%;left: 21%;z-index: 5;animation: kaiws_2 linear infinite 4s;}
.kaiws_3{background: url(../../2024/images/index/iicon_15.png) no-repeat;top: 60%;left: 42%;z-index: 5;animation:kaiws_3 linear infinite 4s;}
.kaiws_4{background: url(../../2024/images/index/iicon_16.png) no-repeat;top: 54%;right: 15%;z-index: 5;animation:kaiws_4 linear infinite 4s;}



.dizuo{width: 928px;margin: 0 auto;
  text-align: center;
  position: absolute;
  width: 88%;
  left: 15%;
  margin-left: -10%;
  bottom: -5%;
  z-index: 233;
}
@media (max-width: 768px) {
	.kwcontainer{width: 100%;height: 470px;}
	.yq{width: 90%;margin-left: -45%;}
	.borther{width: 98%;margin-left: 0;}
	.zp1 .hx-box li span{background-size: 95%;}
	.zp2 .hx-box li span{background-size: 100%;}
	@keyframes anim2Xs{
		0% {
		  left: 5px;
		}
		100% {
		  left: 300px;
		}
	  }
	  @keyframes anim2Ys{
		0% {
		  top: 10px;
		}
		100% {
		  top: -15px;
		}
	  }
	.ball{animation-name: anim2Xs, anim2Ys, scale;}
	/* .ball{animation-name:none;position: unset;float: left;margin: 5px;} */
	.kaiws{display: none;}
	.kaiwssj ul{position: absolute;bottom: 13%;z-index: 10;}
	.kaiwssj li{float: left; width: 49%;}
}