*{ margin: 0; padding: 0;} 
body{    overflow-x: hidden;}
.header1{width: 100%;height: 930px;}

img {
  pointer-events: none;
  }

.header1 .bg{left:0px;top:0px;width:100%;height:930px;position:absolute;}
.header1 .line{left:0px;top:928px;width:100%;height:2px;position:absolute;}
.header1 .compute{
  left: 50%;
  top:219px;width:1133px;height:613px;position:absolute;
  transform: translateX(-50%);
}
.header1 .play{
  left:50%;top:280px;width:729px;height:458px;position:absolute;
  transform: translateX(-50%);  
}

.header1 .play vedio{
  width: 100%;
  height: 100%;
}

.header1 .play img{
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: none;
}
.header1 .play img{
  pointer-events:all;
}

.compute_course{
  width: 100%;
  height: 1125px;
  position: relative;
  overflow: hidden;
}

.compute_course .bg{
  left:274px;top:0;width:1349px;height:1327px;position:absolute;}
.compute_course .warp{
   height: 500px;
   position: absolute;
   left: 50%;
   top: 80px;
   transform: translateX(-50%);
   z-index: 99999;
}

.compute_course .warp .circle{
  width: 100%;
  height: 44px;
  top: 582px;
  left: 0;
  position: absolute;
 
}
.line{
  width: 1159px;
  height: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #eeeeee;
}

.compute_course .warp .circle div{
  border-radius: 50%;
  /* border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition:all 1s; */
}
.compute_course .warp .circle [class*="circle"]{
  transition: all 1s;
}
.compute_course .warp .circle [class*="circle"]:hover{
  transform: scale(1.5);
}
[class*="history"]{
  display: none;
}

.history_block{
  display: block!important;
}

.history1{
  width: 112px;
  height: 139px;
  position: absolute;
  left: -40px;
  top: 0;
}
.compute_course .warp .circle  .circle1{
  width: 44px;
  height: 44px;
   background: #BB71DD;
   left: 50%;
   margin-left: -24px;
   position: absolute;
}

.history1 img{
  position: absolute;
  top: 22px;
}
.history2{
  width: 112px;
  height: 187px;
  position: absolute;
  left:65px;
  bottom: 38px;
}
.compute_course .warp .circle .circle2{
  width: 20px;
  height: 20px;
  background: #FBB19D;
  left: 50%;
  margin: -10px 0 0 -9px;
  bottom: -26px;
  position: absolute;
}
.history2 img{
  position: absolute;
  top: 22px;
}
.history3 {
  position: absolute;
  left: 165px;
  top: 20px;
}
.compute_course .warp .circle .circle3{
  width: 44px;
  height: 44px;
  background: #9BAEFF;
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -24px;
}
.history4  {
  position: absolute;
  left: 305px;
  bottom: 15px;
}
.compute_course .warp .circle .circle4{
  width: 20px;
  height: 20px;
  background: #EDC303;
  position: absolute;
  bottom: -4px;
  left: 50%;
  margin-left: -13px;
}
.history5  {
  position: absolute;
  left: 425px;
  top: 0;
  margin-top: 15px;
}
.compute_course .warp .circle .circle5{
  width: 44px;
  height: 44px;
  background: #73DFDE;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -26px;
  margin-top: -15px;
}
.history6  {
  position: absolute;
  left: 520px;
  bottom: 12px;
}
.compute_course .warp .circle .circle6{
  width: 20px;
  height: 20px;
  background: #6A81E5;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -6px;
}
.history7  {
  position: absolute;
  left: 655px;
  top: 0;
}
.compute_course .warp .circle .circle7{
  width: 44px;
  height: 44px;
  background: #0176B3;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -22px;
}

.history8  {
  position: absolute;
  right: 240px;
  bottom: 0;
  margin-bottom: 15px;
}
.compute_course .warp .circle .circle8{
  width: 20px;
  height: 20px;
  background: #E4A2ED;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  margin-top: -15px;
}
.history9  {
  position: absolute;
  right: 124px;
  top: 0;
  margin-top: 15px;
}
.compute_course .warp .circle .circle9{
  width: 44px;
  height: 44px;
  background: #9D96FA;
  top: 0;
  left: 50%;
  margin-left: -22px;
  margin-top: -15px;
  position: absolute
}

.history10  {
  position: absolute;
  right: 0;
  bottom: 15px;
}

.compute_course .warp .circle .circle10{
  width: 20px;
  height: 20px;
  background: #75BEC8;
  left: 50%;
  bottom: -2px;
  position: absolute;

}

.compute_course .msg3{
  left:50%;
  top:200px;
  width:918px;
  height:127px;position:absolute;
  font-size:16px;
line-height: 36px;
font-weight:bold;
color:rgba(0,0,0,1);
transform: translate(-50%);
}

.compute_course .msg3 .attention{
  color: #30BBCD;
}
.compute_course .title{
  left:50%;
  top:110px;
  transform: translate(-50%,0);
  position:absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.compute_course .title .msg2{
  width: 121px;
  height: 30px;
  font-size:30px;
  font-weight:bold;
  color:rgba(58,58,58,1);
  position: absolute;
  top: -28px;
  }

  .compute_course .title .msg1{
    width: 245px;
    height: 22px;
    font-size:20px;
    font-weight:400;
    color:rgba(58,58,58,1);
    text-align: center;
    position: absolute;
  }
  .compute_course .title .line1{
    width: 50px;
    height: 5px;
    position: absolute;
    top: -11px;
  }
.business{
  width: 100%;
  height: 930px;
  overflow: hidden;
}
.business .bg{width:100%;height:1232px;}
.business .miniprogram{
  left:50%;top:2140px;
  width:791px;
  height:428px;position:absolute;transform: translateX(-50%);
}

.business .miniprogram .mini{
  width: 451px;
  height: 332px;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}
.business .miniprogram .title{
    width: 400px;
   position: absolute;
   left: 50%;
   top: -45px;
   transform: translateX(-50%);
   display: none;
}
.business .miniprogram .title .title1{
  display: flex;
  align-items: center;
  justify-content: center;
}
.business .miniprogram .title .title1 div{
margin: 0 10px;
font-size:36px;
font-family:MicrosoftYaHei-Bold;
font-weight:bold;
color: #3A3A3A;
white-space: nowrap;
}

.business .miniprogram .title .content{

  font-size:18px;
  font-family:MicrosoftYaHei;
  font-weight:400;
  color:rgba(58,58,58,1);
  line-height:30px;
}

.business .miniprogram .title .content div{
  font-family:MicrosoftYaHei;
  font-weight:400;
  color:rgba(58,58,58,1);
  line-height:30px;
}

/* 左边文本 */
.business .miniprogram .left{
  position: absolute;
  top: 262px;
  left: -100px;
  z-index: 1;
  display: none;
}

.business .miniprogram .left div{
  margin: 0 10px;
font-size:36px;
font-family:MicrosoftYaHei-Bold;
font-weight:bold;
color: #3A3A3A;
display: flex;
align-items: center;
}
.business .miniprogram .left .msg3{
  font-size:18px;
  font-family:MicrosoftYaHei;
  font-weight:400;
  color:rgba(58,58,58,1);
}

.business .miniprogram .right{
  width: 390px;
  position: absolute;
  top: 300px;
  left: 556px;
  z-index: 1;
  display: none;
}

.business .miniprogram .right .top{
  margin: 0 10px;
font-size:36px;
font-family:MicrosoftYaHei-Bold;
font-weight:bold;
color: #3A3A3A;
display: flex;
align-items: center;
}

.business .miniprogram .right .top div{
  margin: 0 10px;
  color: #3A3A3A;
}

.business .miniprogram .right .info div{
font-size:18px;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(58,58,58,1);
} 
.business .miniprogram span{
  width: 20px!important;
  height: 20px!important;
  border-radius:50%;
  background: #24b8cb;
  display: inline-block;
}
.business .link{

  left:50%;   top: 2575px;width:631px;height:153px;
  position:absolute;transform: translateX(-50%);
}

.business .link img{
    width: 100%;
    height: 100%;
    display: none;
}

.business .link div{
  width: 250px;
font-size:20px;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(0,0,0,1);
display: none;
}
.business .link .left{
  position: absolute;
  top: 50%;
  left: calc(50% - 300px);
  transform: translateY(-50%);
}
.business .link .right{
  position: absolute;
  top: 50%;
  right: calc(50% - 350px);
  transform: translateY(-50%);
}

.business .erp{
  left: 50%;
  top: 2734px;
  width: 912px;
  height: 217px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(-50%);
}
.business .erp .left{
  width: 100px;
  height: 23px;
  position: absolute;
  top: 34%;
  transform: translateX(-50%);
  left: calc(50% - 320px);
}

.business .erp .right{
  width: 100px;
  height: 60px;
  position: absolute;
  left: calc(50% + 280px);
}

.business .erp .left div,
.business .erp .right div{
  width: 100px;
font-size:20px;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(79,79,79,1);
}

.business .erp .left div:first-child{
  margin-top: -51px;
  margin-left: 38px;
  position: absolute;
}

.business .erp .left div:last-child {
  margin-top: 26px;
  margin-left: 38px;
  position: absolute;
}

.business .erp .right div:first-child{
  margin-top: -51px;
  margin-left: -38px;
  position: absolute;
}

.business .erp  .item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition:  all 1s;
  margin: 0 40px;
}

.business .erp  .item:hover{
  transform: scale(1.5);
}
.business .erp span{
font-size:24px;
font-weight:bold;
color:rgba(58,58,58,1);
line-height:40px;
}

.business .erp .word{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.link-company{
  width: 100%;
  height: 850px;
  position: relative;
}

.link-company .bg1{left:93px;top:50%;width:100%;height:475px;position:absolute;
   transform: translateY(-50%);
}
.link-company .word{left:50%;top:0%;position:absolute;transform: translateX(-50%);}

.link-company .word .map{
  right: -266px;;top:24%;width:308px;height:354px;position:absolute;
  transform: translateY(-50%);
  display: none;
}

.rectangle1{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.link-company .word .rectangle{
  left:50%;top:50%;width:567px;height:652px;position:absolute;
  transform: translate(-50%,-50%);
  margin-left: -130px;
}
.rectangle-box{
  width: 100%;
  height: 100%;
  display: none;
}

.link-company .word .title{
  left:72px;
  top:166px;
  position:absolute;
  display: flex;
  flex-direction: column;
}
.link-company .word .title .msg2{
font-size:36px;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(58,58,58,1);
line-height:51px;
white-space: nowrap;
}
.link-company .word .title .line{
  width:63px;height:6px;
  transform: inherit;
  left: 0;
}
.link-company .word .title .msg1{
font-size:58px;
font-family:PingFang-SC-Light;
font-weight:300;
color:rgba(58,58,58,1);
line-height:71px;
/* left:604px;top:0;width:369px;height:44px;position:absolute; */
}
.link-company .word .info{
  width: 100%;
  height: 500px;
  left:72px;top:337px;position:absolute;
  display: flex;
  flex-direction: column;
}


.link-company .word .info div{
  margin-bottom: 24px;
  font-size:20px;
  font-family:MicrosoftYaHei;
  font-weight:400;
  color:rgba(58,58,58,1);
  line-height:20px;
  display: flex;
  align-items: center;
  }

  .link-company .word .info div img{
     margin-right: 21px;
  }
  .link-company .word .info .address  span{
font-size:12px;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(58,58,58,1);
line-height:20px;
  }

.footer{
  width: 100%;
  height: 268px;
  overflow: hidden;
  position: relative;
}

.footer .bg1{left:0;top:0;width:100%;height:100%;position:absolute;}
.footer .bg{
  left: 0;
  top: 0;
  width: 100%;
  position: absolute;
}
.footer .line{left:0px;bottom:0;width:100%;height:2px;position:absolute;}
.footer .code{
 display: flex;
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 justify-content: center;
}

.footer .img-box{
  width: 132px;
  margin-right: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.footer .img-box  img{
  width: 132px;
  height: 132px;
}

.footer .img-box  span{
  width:130px;
  height:16px;
  font-size:16px;
  text-align: center;
  font-family:MicrosoftYaHei;
  font-weight:400;
  color:rgba(255,255,255,1);
  line-height:50px;
}

.footer .info{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.footer .info div{
  color: #fff;
font-size:16px;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(255,255,255,1);
line-height:50px;
}

.footer .info div:first-child{
height:48px;
font-size:60px;
font-weight:bold;
color:rgba(255,255,255,1);
line-height: 40px;
}