@charset "utf-8";
/* =====================首页样式======================== */

:root {
  --color: #096fca;
}

.Header-navbar-line{display:none!important}

/* loading */
#loading{position:fixed;width:100vw;height:100vh;z-index:9999999;left:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;transition:background-color 3s ease}
#loading .logo{width:100vw;height:calc(100vh + 2px);position:absolute;left:0;top:-1px;right:0;bottom:0;margin:auto;object-fit:cover;z-index:-1;transition:opacity .8s ease}
@keyframes scan{0%{background-size:0 100%}100%{background-size:100% 100%}}
#loading .txt{margin-top:120px;background:#585858 -webkit-linear-gradient(left,#096fca,#096fca) no-repeatcont 0 0;-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:20px;color:#585858;font-weight:500;background-size:0 100%;transition:opacity .8s ease}
#loading .load{background-size:100% 100%;animation:scan 4s linear}
#loading .Footer-wrapper{padding:40px 0;background:0 0;transition:opacity .8s ease}
#loading .Footer-wrapper p{color:#9c9c9c}
#loading.matrix{background:0 0}
#loading.matrix .Footer-wrapper,#loading.matrix ._logo,#loading.matrix .txt{opacity:0}
#loading.matrix .go{opacity:1;transition:transform 1.8s cubic-bezier(1,.01,0,.04) 1s,opacity 2s ease-in .8s;transform-origin:49.3% 48.2%;transform:matrix(100,0,0,100,0,0) perspective(1px)}

/* common */
.Header-wrapper{background:0 0}
.com-page-go{position:absolute;width:100%;right:0;bottom:0;z-index:11;animation:mVshake .7s infinite linear alternate}
.com-page-go a{color:#fff;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:15px;font-family:neuehaasdisplay-bold;z-index:999;position:absolute;right:80px;bottom:80px}
.com-page-go a svg{margin-top:10px}
.com-page-go .prev{margin-bottom:4%}
.sm-titleX,.titleX{font-weight:700}
.sm-titleX .lighter,.titleX .lighter{display:inline-block;padding:0 20px;font-style:normal;font-weight:lighter}

.banner .com-bg{transform:scale(3);animation:com_bg 7s linear both}
@keyframes com_bg{0%{transform:scale(1.4)}100%{transform:scale(1)}}
.banner .txt{color:#fff;position:relative;z-index:3}
.banner .txt .title{font-weight:700;opacity:0}
.banner .txt .tip{opacity:0}
.banner .txt .tip span{padding-left:20px}
.banner .visual{opacity:0;transition:opacity 1s ease;position:absolute;top:calc(50% + 80px / 2 - 20px);transform:translateY(-50%);width:750px;height:750px;right:-50px;animation:mVballoon 15s infinite linear reverse}
.banner .visual .cell{background:url(../images/index/visual-cell-bg.png) no-repeat;width:140px;height:140px;position:absolute;display:flex;align-items:center;justify-content:center;color:#fff;font-family:neuehaasdisplay-bold;white-space:nowrap;font-weight:700;}
.banner .visual .cell.cell1{top:8%;left:40%}
.banner .visual .cell.cell2{top:56%;left:14%}
.banner .visual .cell.cell3{top:50%;left:50%;transform:translate(-50%,-50%);background-size:140px;background-position:center;padding-left:0}
.banner .visual .cell.cell3:after{display:none}
.banner .visual .cell.cell4{top:56%;left:69%}
.banner .visual .cell.cell5{top:26%;left:69%}
.banner .visual .cell.cell6{top:73%;left:41%}
.banner .visual .cell.cell7{top:25%;left:14%}
.banner .visual .cell:after{content:"";display:inline-block;position:absolute;left:50%;top:50%;width:100px;height:100px;border:2px solid #fff;border-radius:100%;transform:translate(-50%,-50%);-webkit-box-sizing:border-box;box-sizing:border-box;opacity:0;animation:diagramPointer 3s infinite ease-out 1s}
.banner .visual .line{overflow:hidden;position:absolute;width:2px;background-color:rgba(255,255,255,.3)}
.banner .visual .line span{position:relative;top:-60%;width:100%;height:60%;background:linear-gradient(45deg,transparent,#fff 70%);animation:diagramLine 3s infinite linear;display:block}
.banner .visual .line.line1{top:171px;left:369px;height:164px;transform:rotate(-1deg)}
.banner .visual .line.line2{top:353px;left:266px;height:167px;transform:rotate(-120deg)}
.banner .visual .line.line3{top:363px;left:474px;height:157px;transform:rotate(120deg)}
.banner .visual .line.line4{top:246px;left:476px;height:157px;transform:rotate(60deg)}
.banner .visual .line.line5{top:416px;left:367px;height:157px;transform:rotate(180deg)}
.banner .visual .line.line6{top:239px;left:262px;height:162px;transform:rotate(300deg)}
.client .bg{height:100%;position:absolute;width:100%;left:0;top:0;z-index:-1}
.client .bg .sub{position:absolute;left:0;top:0;width:100%;height:100%;text-align:center;transition:all 1.5s cubic-bezier(.23,1,.32,1);visibility:hidden;opacity:0}
.client .bg .sub.active{opacity:1;visibility:visible}
.client .gallery-more{padding-left:1px}
.client .gallery .sm-title span,.client .gallery .title span{font-weight:300;padding:0 20px}
.client .thumbs{width:100%;position:absolute;left:0;bottom:0;z-index:3}
.client .thumbs .swiper-container{padding-top:2px}
.client .thumbs.animate{animation:com-animate-d 1s ease both .5s}
.client .swiper-slide-active .sm-titleX{animation:fadeInUp 1s ease both .4s}
.client .swiper-slide-active .titleX{animation:fadeInUp 1s ease both .6s}
.client .swiper-slide-active .icon-list{animation:fadeInUp 1s ease both .8s}
.client .thumbs-item a{height:102px;display:flex;align-items:center;justify-content:center;position:relative}
.client .thumbs-item a:after{content:'';width:100%;height:1px;border-top:1px solid rgba(255,255,255,.1);position:absolute;left:0;top:0}
.client .thumbs-item a:before{content:"";position:absolute;top:-1px;background:#e10013;height:3px;left:100%;width:0;transition:.2s all linear}
.client .thumbs-item a:hover .w{display:block}
.client .thumbs-item a:hover .c{display:none}
.client .thumbs-item.active a:before{width:100%;left:0;transition-delay:.1s}
.client .thumbs-item.active~.thumbs-item a:before{left:0}
.client .thumbs-item.active a .w{display:block}
.client .thumbs-item.active a .c{display:none}
.client .thumbs-item .w{display:none}
.icon-list li{border:1px solid rgba(255,255,255,.8);width:126px;height:92px;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-top:-1px;margin-left:-1px}
.icon-list .icon{height:30px;display:flex;align-items:flex-end;justify-content:center}
.icon-list .tit{font-size:17px;font-weight:500;margin-top:8px}
.software{background:#001242;overflow: hidden}
.software .bg{position:absolute;bottom:0;z-index:-1;left:50%;transform:translateX(-50%) translateY(100%);transition: all 1.5s ease}
@keyframes beam{from{transform:translateY(50%)}to{transform:translateY(-300%);opacity:0}}
.software .line{position:absolute;height:260px;width:5px;background:linear-gradient(180deg,#76fcf4 0,#1e58b5 40%,#5d58b4 80%,rgba(255,255,255,0) 100%);animation:beam 2.5s ease-in-out both infinite 1s}
.software .line:nth-child(even){animation-delay:2.5s}
.software .line:before{content:'';width:10px;height:10px;border-radius:50%;background:#76fcf4;position:absolute;top:-4px;left:50%;transform:translateX(-50%)}
.software .line.sm{width:3px;height:230px}
.software .line.sm:before{width:8px;height:8px}
.software .line_list{
	overflow: hidden;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 100%;
}
.software .line.l1{left:24%;bottom:-10%}
.software .line.l2{left:34.65%;bottom:-22%;z-index:-2}
.software .line.l3{left:43%;bottom:-11%;z-index:-2}
.software .line.l4{left:45%;bottom:-14%;z-index:-2}
.software .line.l5{left:52%;bottom:-21%}
.software .line.l6{right:15.5%;bottom:-23%;z-index:-2}
.software .line.l7{right:10%;bottom:-10%;z-index:-2}
.software .vs.animate{animation:zoomIn 1s ease both}
.software .vs img{max-width:100%}
.software .vs .c-out{width:676px}
.software .vs .c1{width:546px;animation:bullet_0deg 30s infinite linear}
.software .vs .c2{width:622px;animation:scale 2s infinite linear}
.software .vs .c3{width:520px;animation:scale 2s infinite linear 1s}
.software .vs .c4{width:548px}
.software .vs .c5{width:390px;animation:bullet_0deg 30s infinite linear}
.software .vs .cc{width:304px}
.software .vs .c{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto}
.software .vs li{background:url(../images/index/cc-txt.png) no-repeat center/100%;white-space:nowrap;width:154px;height:154px;display:flex;align-items:center;justify-content:center;color:#096fca;font-size:20px;font-weight:700;position:absolute;animation:mVballoon 20s ease both infinite}
.software .vs li:nth-child(1){top:-6%;left:29%;animation-delay:1s}
.software .vs li:nth-child(2){top:12%;right:1%;animation-delay:.5s}
.software .vs li:nth-child(3){top:45%;left:-5%;animation-delay:.3s}
.software .vs li:nth-child(4){top:57%;right:-5%;animation-delay:.7s}
.news .heading .title{font-weight:700}
.news .heading .go{display:flex;align-items:center;font-size:16px;font-weight:500;padding:5px;margin-right:-5px;border-radius:8px;transition:background-color .4s ease}
.news .heading .go .icon{margin-left:10px;transition:margin-left .4s ease}
.news .heading .go:hover{background:rgba(0,0,0,.2)}
.news .heading .go:hover .icon{margin-left:5px}
.news .slider{width:38.158%}
.news .slider .swiper-container{height:100%}
.news .slider a{padding-top:79.312%;height:100%}
.news .slider a img{transform:scale(1.02);transition:all .6s ease}
.news .slider a:hover img{transform:scale(1)}
.news .slider a .tit{position:absolute;bottom:0;left:0;width:100%;height:100%;display:flex;align-items:flex-end;padding:30px 17px;font-weight:700;font-size:17px;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,#000 100%)}
.news .slider a .tit span{padding:5px;transition:background-color .4s ease;border-radius:8px}
.news .slider a .tit:hover span{background:rgba(9,111,202,.5)}
.news .slider .swiper-container-horizontal>.swiper-pagination-bullets{display:flex;justify-content:flex-end;bottom:18px;padding-right:30px}
.news .slider .swiper-pagination-bullet{opacity:1;background:#fff;width:9px;height:9px}
.news .slider .swiper-pagination-bullet-active{background:#00499f}
.news .rgt{width:60.5%;margin-top:-20px}
.news .rgt .item{background:#fff;padding:19px 22px;display:flex;align-items:center;width:49%;margin-top:20px;transition:background-color .4s ease}
.news .rgt .item .time{background:#f8f8f8;width:102px;height:102px;font-family:OPPOSANS-B;color:#5e5e5e;display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:700;transition:all .4s ease}
.news .rgt .item .time span{display:block;color:#444;line-height:1;margin-bottom:5px;transition:color .4s ease}
.news .rgt .item .title{flex:1;padding-left:20px;color:#333;font-size:17px;line-height:24px;font-weight:500;max-height:48px;transition:color .4s ease}
.news .rgt .item:hover{background-color:#096fca}
.news .rgt .item:hover .time{background-color:#096fca;color:#fff}
.news .rgt .item:hover .time span{color:#fff}
.news .rgt .item:hover .title{color:#fff}
.Footer-wrapper{position:absolute;bottom:0;left:0}

/* 动画 */
.banner.active .txt .title.animate{animation:fadeInUp 1.2s ease both .7s}
.banner.active .txt .title.animate:nth-child(2){animation-delay:.9s}
.banner.active .txt .tip.animate{animation:fadeInUp 1.2s ease both 1.2s}
.banner .visual.animate{opacity:1}
.banner .com-bg.animate{transform:scale(1)}

.software.active .software .bg.animate{transform:translateY(0) translateX(-50%)}
.software.active .icon-list.animate,.software.active .sm-titleX.animate,.software.active .titleX.animate{animation:fadeInUp 1.4s ease both .8s}
.active .sm-titleX+.titleX.animate{animation-delay:1s}
.active .sm-titleX+.titleX.animate+.icon-list.animate{animation-delay:1.2s}

.news.active .heading .go.animate{animation:fadeInLeft 1.4s ease both .4s}
.news.active .heading .title.animate{animation:fadeInLeft 1.4s ease both .6s}
.news.active .slider.animate{animation:fadeInLeft 1.4s ease both .8s}
.news.active .rgt.animate{animation:fadeInLeft 1.6s ease both 1s}

.news .heading .go.animate{animation-delay:.8s}
.news .slider.animate{animation-delay:.8s}
.news .rgt.animate{animation-delay:1.2s}
/* 新增 */
.client.active .fp-tableCell .contain-max .gallery .gallery-more .cont{animation: clientWordsdown 2s ease both 400ms;}
@keyframes clientWordsdown {0% {transform: translateY(90px);filter: blur(6px); opacity: 0;}100% {transform: translateY(0);filter: blur(0px); opacity: 1;}}

/* -------------------------PC端--------------------------- */
@media all and (max-width:1700px) {
  /* 1600 × (900) */
  .banner .visual{width: 700px;height: 700px}
  .banner .visual .cell.cell1{top: 9%;left: 40%}
  .banner .visual .line.line1{top: 23.8%;left: 49%;height: 142px}
  .banner .visual .line.line2{top: 48%;left: 36%;height: 146px}
  .banner .visual .line.line3{top: 48.7%;left: 63.5%;height: 150px}
  .banner .visual .line.line4{top: 32.7%;left: 63.5%;height: 150px}
  .banner .visual .line.line5{top: 55.7%;left: 49.5%;height: 150px}
  .banner .visual .line.line6{top: 32.7%;left: 35.5%;height: 150px}
  .software .vs .c-out{width: 656px}
  .software .vs .c1{width: 526px}
  .software .vs .c2{width: 602px}
  .software .vs .c4{width: 528px}
  .software .vs .c5{width: 370px}
  .software .vs .cc{width: 284px}
  .software .vs li:nth-child(1){top: -3%}
  .software .vs li:nth-child(2){right: 3%}
  .software .vs li:nth-child(4){right: -2%}
  .news .rgt{margin-top: -15px}
  .news .rgt .item{margin-top: 15px}
  .news .slider .swiper-container-horizontal > .swiper-pagination-bullets{padding-right: 20px}
  .com-page-go .prev{margin-bottom: 3%}
}

@media all and (max-width:1599px) {
  /* 1440 × (700)  */
  .titleX .lighter, .sm-titleX .lighter{padding: 0 15px}
  .banner .visual{transform: translateY(-50%) scale(.75)}
  .client .thumbs-item a{height: 90px}
  .software .vs{transform: scale(.75)}
  .news .rgt .item .time{width: 80px;height: 80px}
  .news .rgt .item{padding: 15px}
  .news .rgt .item .time span{font-size: 20px}
  .news .rgt .item .title{font-size: 16px;padding-left: 15px}
  .news .rgt{margin-top: -10px}
  .news .rgt .item{margin-top: 10px}
  .news .slider .swiper-container-horizontal > .swiper-pagination-bullets{bottom: 12px}
  .news .slider a .tit{font-size: 16px;padding: 30px 10px}
}

@media all and (max-width:1439px) {
  /* 1360 */
}

@media all and (max-width:1359px) {
  /* 1280 */
}

@media all and (max-width:1279px) {
  /* 1152 × (700) */
  .section{position: relative;overflow: hidden}
  .com-page-go{display: none}
  .banner{height: 100vh;display: flex}
  .Footer-wrapper{position: static}
  .client .thumbs{position: static;margin-top: 200px}
  .client{padding-top: 60px}
  .icon-list li{width: 110px;height: 86px}
  .icon-list .tit{font-size: 16px}
  .client .thumbs-item a{height: 80px}
  .software .bg{z-index: 1}
  .software{padding: 60px 0 40px}
  .software .vs .c-out{width: 516px}
  .software .vs .c1{width: 426px}
  .software .vs .c2{width: 502px}
  .software .vs .c3{width: 410px}
  .software .vs .c4{width: 428px}
  .software .vs .c5{width: 270px}
  .software .vs .cc{width: 184px}
  .banner .visual{right: -100px}
  .software .vs li{width: 140px;height: 140px}
  .software .vs li:nth-child(1){top: -6%;left: 26%}
  .software .vs li:nth-child(2){right: 1%}
  .software .vs li:nth-child(3){top: 42.5%}
  .software .vs li:nth-child(4){top: 54%;right: -5%}
  .news .main{padding: 60px 0}
  .news .heading .go{font-size: 15px}
  .news .rgt .item .time{width: 60px;height: 60px;font-size: 12px}
  .news .rgt .item .time span{font-size: 15px;margin-bottom:0}
  .news .rgt .item .title{font-size: 14px;line-height: 22px;max-height: 44px}
  .news .slider .swiper-pagination-bullet{width: 6px;height: 6px}
  .news .slider a .tit{font-size: 15px}
  #loading{display: none}
  .banner .txt .title,.banner .txt .tip,.banner .visual{opacity: 1}
}

@media all and (max-width:1151px) {
  /* 1024 */
}

/* ------------------------手机端-------------------------- */
@media all and (max-width:1000px) {
  /* 平板设备 720 适配 */
  .banner .inner{align-items: flex-start}
  .banner .txt{margin-top: calc(60px + 10%)}
  .banner .visual{top:auto;bottom: 0;transform: translateX(50%) scale(0.7);right:50%}
  .icon-list li{width: 100px;height: 70px}
  .titleX .lighter, .sm-titleX .lighter{padding: 0 10px}
  .icon-list .tit{font-size: 15px;margin-top:5px}
  .icon-list .icon{height: 22px}
  .software .contain-max{flex-wrap: wrap}
  .software .txt{width: 100%}
  .software .vs{margin: 0 auto}
  .software{padding: 60px 0 0}
  .news .slider{width: 100%}
  .news .rgt{width: 100%;margin: 0}
  .client .swiper-slide-active .sm-titleX,.client .swiper-slide-active .titleX,.client .swiper-slide-active .icon-list,
  .banner .txt .title,.banner .txt .tip{animation:none}
  .software .line{height: 200px;width: 3px}
  .software .line.sm{width: 2px;height: 150px;z-index: 0}
  .software .line.sm:before{width: 4px;height: 4px}
  .software .line:before{width:6px;height: 6px}
}
@media all and (max-width:640px) {
  /* 移动终端以上 360 适配 */
  .banner .visual{transform: translateX(50%) scale(0.5);bottom:-150px}
  .client .thumbs-item a{height: 60px}
  .client .thumbs-item a:before{height: 2px}
  .banner{height: 600px}
  .client .thumbs{margin-top: 130px}
  .client{padding-top: 40px}
  .icon-list li{width: 50%}
  .news .rgt .item{width: 100%}
  .news .main{padding: 40px 0}
  .news .heading .go{font-size: 14px}
  .software .vs li{width: 120px;height: 120px;font-size: 18px}
  .news .rgt .item{padding: 15px 10px}
  .banner .txt .title{font-size:24px}
  .banner .txt .tip{font-size:16px;margin-top:15px}
  .banner .txt .tip span{display:block;padding:0}
  .news .slider a .tit{height:60%}
}