html,body{
    padding:0;
    margin:0;
}
body{
    font-size: 16rem;
}
.zx-f-c-1{
   color: #666C73;
}
.zx-f-c-2{
   color: #555861;
}
.zx-f-c-3{
   color: #14161C;
}
.zx-f-c-white{
    color:#FFF;
}

.zx-f-s-14{
    font-size: 14rem;
}
.zx-f-s-18{
    font-size: 18rem;
}
.zx-f-s-40{
    font-size: 40rem;
}
.zx-f-w-b{
    font-weight: bold;
}
.zx-b-t-1{
    border-top: 1rem solid #E2E7ED;
}
.zx-h-136{
    height: 136rem;
}
.zx-h-360{
    height: 360rem;
}

.zx-b-m-20{
    margin-bottom: 20rem;
}
/**/
.zx-nav-item{
    width:155rem;
    position: relative;
    text-align: center;
}
.zx-nav-item a{
 color:#131415;
 text-decoration: none;
}
.zx-nav-item a:focus{
    color:#0841F1;
}
.zx-nav-item-active a{
    color:#0841F1;
}
.zx-nav-item-active::after{
    content: '';
    position: absolute;
    bottom: -10rem;
    left: 34rem;
    width: 87rem;
    height: 2rem;
    background-color: #0841F1;
}

/**/
.zx-section-case{
    height: 537rem;
    width: 100%;
    background-image: url(../image/bg/index-case-bg.png);
    background-size: 100% 100%;
    position: relative;
    margin-bottom:150rem;


}
.case-item img{
    width:244rem;
    height:126rem;
    margin-bottom:20rem;
}
/**/
.zx-index-top-wrap{
    width:100%;
    height: 1000rem;
    /* background-image: url(../image/banner/index-top-banner-bg.png);
    background-repeat: no-repeat;
    background-position: top right; */
    position: relative;
    margin-bottom:100rem;
}
.zx-index-top-content{
    width:90%;
    margin:0 auto;
    padding-top:200rem;
}
.zx-index-top-content-name{
    font-size:50rem;
    font-weight:bold;
}
.zx-index-top-content-text{
    color:#63656B;
    font-size: 20rem;
    width:620rem;
}
.zx-index-top-nav-wrap{
    width: 100%;
    height: 150rem;
    position: absolute;
    bottom: 0rem;
    right: 0;
    background-image: url(../image/bg/index-top-nav-bg.png);
    background-repeat: no-repeat;
    background-position: top right;
}
.zx-index-top-nav-main{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150rem;

}
.zx-index-top-nav-item{
    width:350rem;
    text-align: center;
}
.zx-index-top-nav-item-num{
    font-size: 44rem;
    color:#182232;
    font-weight: bold;
}
.zx-index-top-nav-item-text{
    font-size: 18rem;
    color:#A1A3B1;
}
/**/

.zx-core-intro{
    text-align: center;
    font-size: 40rem;
    font-weight: bold;
    width:778rem;
    margin:0 auto 130rem auto;
    
}
.zx-core-intro-text{
    color:#A1A3B1;
    font-size: 20rem;
    font-weight: normal;
}
.zx-core-node-wrap{
    /* background-image: url(../image/bg/index-core-bg.png);
    background-repeat: no-repeat;
    background-position: top center; */
    /* background-size: 100% 100%; */
    height: 720rem;
    position: relative;
}

.zx-core-stat-wrap{
    position: absolute;
    top:220rem;
    left:0;
    width: 100%;
    text-align: center;

}
.zx-core-node-item{
    width:362rem;
    height:138rem;
    position: absolute;
    box-shadow: 0 2rem 5rem rgba(0,0,0,0.4);
    border-radius: 15rem;
    color:#9498A6;
    font-size: 20rem;
}
.zx-core-node-item-inner span{
    font-size:24rem;
    color:#141E2E;
    font-weight: bold;
}
.zx-core-node-item-inner{
    /* margin-left:77rem; */
    padding:24rem 24rem 24rem 77rem;
}
.zx-core-node-item-1{
    background-image: url(../image/bg/index-core-node-1.png);
     background-size:362rem 138rem;
    right:calc( 50% - 362rem - 50rem );
    top:-50rem;
}
.zx-core-node-item-2{
    background-image: url(../image/bg/index-core-node-2.png);
    background-size:362rem 138rem;
    left:calc( 50% - 362rem - 200rem );
    top:256rem;
}
.zx-core-node-item-3{
    background-image: url(../image/bg/index-core-node-3.png);
    background-size:362rem 138rem;
     right:calc( 50% - 362rem - 130rem );
     top:382rem;
}
.content-wrap{
    display: flex;
    justify-content: center;
    margin-bottom:80rem;
}
.content-item{
    width:221rem;
    height: 286rem;
    color:#FFF;
    text-align: center;
}
.content-item-name{
    font-size: 22rem;
    margin-bottom:20rem;
    padding-top:120rem;
}
.content-item-text{
    font-size: 16rem;
    padding-left:20rem;
    padding-right:20rem;
    opacity: 0.8;
}

.content-item-1{
 background-image: url(../image/bg/index-content-zt-bg.png);
 background-size: 100% 100%;
 margin-right:25rem;

}
.content-item-2{
 background-image: url(../image/bg/index-content-jl-bg.png);
 background-size: 100% 100%;
 margin-right:25rem;

}
.content-item-3{
 background-image: url(../image/bg/index-content-jn-bg.png);
 background-size: 100% 100%;
 margin-right:25rem;

}
.content-item-4{
 background-image: url(../image/bg/index-content-tx-bg.png);
 background-size: 100% 100%;
 margin-right:25rem;

}
.content-item-5{
 background-image: url(../image/bg/index-content-xhs-bg.png);
 background-size: 100% 100%;

}
.more-btn{
    width:180rem;
    height: 50rem;
    background: linear-gradient( 139deg, #62B9FB 0%, #1576FF 100%);
    border-radius: 4rem;
    display: block;
    margin:0 auto;
    color:#FFF;
    line-height: 50rem;
    text-decoration: none;
    text-align: center;
}
/**/


.zx-section-footer a{
     color: #666C73;
}
.zx-footer-question-wrap{
    height: 342rem;
    /* background-image: url(../image/bg/question-bg.png);
    background-size: 100% 100%; */
    margin-bottom:80rem;
    position: relative;
}


/**/
.case-top-wrap{
    /* background-image: url(../image/bg/case-top-bg.png);
    background-position: top center; */
    height: 605rem;
    width:100%;
    position: relative;
}
.case-top-main{
    text-align: center;
    width:800rem;
    margin:0 auto;
    position: relative;

}
.case-content-wrap-bg{
    width:100%;
    height: 699rem;
    background-image: url(../image/bg/case-top-float-bg.png);
    background-repeat: no-repeat;
    background-position: top center;
    position: absolute;
    z-index:-1;
}
.case-content-main{
    width:90%;
    margin:0 auto;
    z-index:2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.case-show-item{
    width: 639rem;
    margin-bottom:100rem;
}
.case-show-item:nth-child(odd){
    margin-right:80rem;
}
.case-show-item-image{
    width:639rem;
    height:485rem;
    margin-bottom:20rem;
    background: #E5E5E5;
    border-radius: 18rem;
    position: relative;
}
.case-show-item-image-maker{
    width:639rem;
    height:485rem;
    position: absolute;
    left: 0;
    top:0;
    background: rgba(0,0,0,0);
}
.case-show-item-image img{
     width:639rem;
    height:485rem;
     border-radius: 18rem;
}

.case-show-item-info{
    width:639rem;
    height:145rem;
    padding:30rem;
    border-radius: 18rem;
}
/*.case-show-item-active .case-show-item-info{
    background: #0565FC;
    color:#FFF;
}*/
.case-show-item:hover .case-show-item-info{
    background: #0565FC;
    color:#FFF;
}
.case-show-item:hover .case-show-item-image-maker{
    background: rgba(0,0,0,0.4);
}
.case-show-item-title{
    font-size: 32rem;
    font-weight: bold;
}
.case-show-item-mode{
    width: 100%;
    text-align: right;
}

/**/

.about-top-wrap{
    /* background-image: url(../image/bg/about-top-bg.png);
    background-position: top center; */
    height: 605rem;
    width:100%;
    margin-bottom:140rem;
    position: relative;
}
.about-top-bg{
    width:100%;
    height: 605rem;
    /* background-image: url(../image/bg/about-top-bg.png);
    background-position: top center; */
    position: absolute;
    left:0;
    top:0;
    z-index:-1;
}
.about-stat-wrap{
    display: flex;
    justify-content: center;
    width: 100%;
}
.about-stat-item{
    width:25%;
    text-align: center;
    border-right:1rem solid #e5e5e5;
}
.about-stat-item:last-child{
    border-right:none;
}
.about-stat-num{
    font-size: 50rem;
    font-weight: bold;
    background: -webkit-linear-gradient( #62B9FB, #1576FF);
    -webkit-background-clip: text;
    color: transparent;
}
.about-stat-title{
    font-size:20rem;
    color:#121A28;
}
.about-bottom-wrap{
    /* background-image:url(../image/bg/about-bottom-bg.png);
    background-position: bottom center;
    background-repeat: no-repeat; */
    width: 100%;
    height: 982rem;
    position: relative;
}
.about-bottom-item{
    width:311rem;
    height: 476rem;
    position: absolute;
}
.about-bottom-item-1{
    background-image: url(../image/bg/about-bottom-item-1.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    bottom:451rem;
    right:calc( 50% + 394rem + 50rem )

}

.about-bottom-item-2{
    background-image: url(../image/bg/about-bottom-item-2.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    bottom:257rem;
     right:calc( 50% + 50rem )
}
.about-bottom-item-3{
    background-image: url(../image/bg/about-bottom-item-3.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    bottom:275rem;
     right:calc( 50% -  194rem - 200rem )
}
.about-bottom-item-4{
    background-image: url(../image/bg/about-bottom-item-4.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    bottom:438rem;
     right:calc( 50% - 476rem - 194rem - 100rem )
}
.about-bottom-item-clean{
    height:131rem;
}
.about-bottom-title,.about-bottom-text{
    width:222rem;
    margin-left:38rem;
}
.about-bottom-title{
    font-size:26rem;
    color:#141E2E;
    font-weight: bold;
}
.about-bottom-text{
    margin-top:35rem;
    color:#9498A6;
    font-size:18rem;
}

.about-step-point{
    width:25rem;
    height:25rem;
    border-radius: 25rem;
    background: rgba(29,109,238,0.17);
    position: relative;
}
.about-step-point > div{
    content: " ";
    width:12rem;
    height:12rem;
    border-radius: 12rem;
    background: #1D6DEE;
    position: absolute;
    top:6rem;
    left:6rem;
}
.about-step-item{
    position: absolute;
    display: flex;
    width:580rem;
    align-items: center;
}
.about-step-info{
    display: flex;
    align-items: center;
}

.about-step-item-1,.about-step-item-3,.about-step-item-5,.about-step-item-7{
    left:calc(50% - 13rem);
    justify-content: flex-start;
}
.about-step-item-2,.about-step-item-4,.about-step-item-6,.about-step-item-8{
    right:calc(50% -  13rem);
     justify-content: flex-end;
}
.about-step-item-1{
    top:37rem;
}

.about-step-item-2{
    top:137rem;
}

.about-step-item-3{
    top:240rem;
}

.about-step-item-4{
    top:341rem;
}

.about-step-item-5{
    top:442rem;
}

.about-step-item-6{
    top:544rem;
}

.about-step-item-7{
    top:645rem;
}
.about-step-item-8{
    top:755rem;
}
.about-step-year{
    font-size: 40rem;
    color:#1D6DEE;
    font-weight: bold;
}
.about-step-text{
    font-size: 20rem;
    color:#6C6E76;
}

.about-step-odd .about-step-year{
    margin-left:45rem;
    margin-right:20rem;
}
.about-step-evnen .about-step-year{
     margin-right:45rem;
     margin-left:20rem;
}

/**/


.product-top-wrap{
    /* background-image: url(../image/bg/product-top-bg.png);
    background-position: top center; */
    height: 605rem;
    width:100%;
    margin-bottom:140rem;
    position: relative;
}

.product-top-item{
    width:388rem;
    margin-right:30rem;
}
.product-top-item:last-child{
    margin-right:0rem;
}

.product-top-item-header{
    width:388rem;
    height:106rem;
    margin-bottom:16rem;
    color:#637088;
    font-size:26rem;
    line-height: 106rem;
}
.product-top-item-header span{
    margin-left:56rem;
}

.product-top-item-header-1{
    background-image: url(../image/bg/product-top-item-header-1.png);
}
.product-top-item-header-2{
    background-image: url(../image/bg/product-top-item-header-2.png);
}
.product-top-item-header-3{
    background-image: url(../image/bg/product-top-item-header-3.png);
}
.product-top-item-main{
    width:388rem;
    height:285rem;
    font-size: 22rem;
    color:#fff;
    background-image: url(../image/bg/product-top-item-main-bg.png);
}
.product-top-item-main-text{
    padding:30rem;
}

.product-second-wrap{
    width:100%;
    height: 705rem;
    /* background-color: #F8FCFF; */
    /* background-image: url(../image/bg/product-second-item-bg.png);
    background-position: top right; */
    position: relative;

}

.product-three-wrap{
    width:100%;
    height: 705rem;
    /* background-color: #F8FCFF;
    background-image: url(../image/bg/product-three-item-bg.png);
    background-position: top right; */
    position: relative;

}

.product-content-wrap{
    width:480rem;
}
.product-content-left{
    position: absolute;
    top:150rem;
    left:calc(50% - 680rem)
}
.product-content-title{
    color:#121212;
    font-size: 28rem;
    margin-bottom:56rem;
}

.product-content-item{
    display: flex;
    margin-bottom:53rem;
}
.product-content-item-icon{
    margin-right:27rem;
}

.product-content-item-info-title{
    font-size: 20rem;
}
.product-content-item-info-text{
    color:#69768B;
    font-size:16rem;
}

/**/

.contact-top-wrap{
    background-image: url(../image/bg/contact-top-bg.png);
    background-position: top center;
    height: 605rem;
    width:100%;
    margin-bottom:140rem;
}

.contact-tuan-wrap{
     background-image: url(../image/bg/contact-tuan-bg.png);
    background-position: top center;
    height: 968rem;
    width:100%;
}

.contact-tag-wrap{
    display: flex;
    justify-content: center;
}
.contact-tag-item{
    width:260rem;
    height:72rem;
    border-radius: 72rem;
    color:#FFF;
    text-align: center;
    line-height: 72rem;
    background: #1663FF;
    margin-right:54rem;
}
.contact-tag-item:last-child{
    margin-right:0rem;
}


.contact-express-wrap{
    width:100%;
    height:937rem;
    background-image: url(../image/bg/contact-middle-bg.png);
    background-position: top center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
}

.contact-express-item-wrap{
    width:595rem;
    margin-right: 42rem;
}
.contact-express-item-header{
    width:595rem;
    height:153rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rem;
    font-weight: bold;
    color:#141E2E;

}
.contact-express-item-wrap:last-child{
    margin-right:0rem;
}


.contact-express-item-image img{
    width:595rem;
    height:408rem;
    margin-bottom:40rem;
}
.contact-express-item-bottom{
    background-image: url(../image/bg/contact-middle-bottom-bg.png);
    width:595rem;
    height:225rem;
    justify-content: center;
    flex-direction: column;
    display: flex;
    align-items: center;

}
.contact-express-item-bottom-name{
    font-size: 70rem;
    color:#1D6DEE;
    font-weight: bold;
}

.contact-express-item-bottom-summary{
    font-size: 20rem;
    color:#121A28;
}


.contact-job-item-wrap{
    display: flex;
    width:30%;
    height:225rem;
    margin-right:66rem;
    box-shadow: 0 1rem 4rem rgba(0,0,0,0.3);
    border-radius: 18rem;
    align-items: center;
}
.contact-job-item-wrap:last-child{
    margin-right:0rem;
}
.contact-job-icon img{
    width:106rem;
    height:106rem;
    margin-left:56rem;
    margin-right:56rem;
}
.contact-job-name{
    color:#121A28;
    font-weight: bold;
    font-size: 30rem;
    margin-bottom:19rem;
}
.contact-job-summary{
    color:#69768B;
    font-size:18rem;
    margin-bottom:41rem;
}

.contact-job-emial{
    color:#0263FC;
    font-size:18rem;
}


/**/

.view {
  position: relative;
  margin:0 auto;
  width: 400rem;
  height: 250rem;
  counter-reset: num 0;
  transform-style: preserve-3d;
  perspective: 500rem;
  animation: scroll 5s infinite;
}
.view:hover {
  animation-play-state: paused;
}
@keyframes scroll {
  to {
    transform: translateZ(0.1rem);
  }
}
.item {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 8rem;
  display: grid;
  place-content: center;
  counter-increment: num;
  background-color: blueviolet;
  box-shadow: 2rem 2rem 10rem rgba(0, 0, 0, 0.1);
  color: #fff;
  transition: 1s;
  transform: translate3d(0, 0, -100rem);
  opacity: 0;
}
.item:nth-child(2n + 1) {
  background: tomato;
}
.item:nth-child(3n + 2) {
  background: royalblue;
}
.item:nth-child(5n + 3) {
  background: violet;
}
.item:nth-child(7n + 4) {
  background: tan;
  color: #333;
}
.item:nth-child(11n + 5) {
  background: yellowgreen;
}
.item.current {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.item.current + .item,
.item:first-child:has(~ .item.current:last-child) {
  transform: translate3d(30%, 0, -100rem);
  opacity: 1;
}
.item:has(+ .item.current),
.item.current:first-child ~ .item:last-child {
  transform: translate3d(-30%, 0, -100rem);
  opacity: 1;
}

.item.current + .item + .item,
.item:first-child:has(~ .item.current:nth-last-child(2)),
.item:nth-child(2):has(~ .item.current:last-child) {
  transform: translate3d(50%, 0, -150rem);
  opacity: 1;
}
.item:has(+ .item + .item.current),
.item.current:first-child ~ .item:nth-last-child(2),
.item.current:nth-child(2) ~ .item:last-child {
  transform: translate3d(-50%, 0, -150rem);
  opacity: 1;
}
.item::after {
  /*content: counter(num);*/
  font-size: 60rem;
}