.main-one{
    position: relative;
    width: 1100px;
    height: 866px;
    margin: 0 auto;
    overflow: hidden;
}
.main-one .title{
    width:440px;
    height:53px;
    margin-top:140px;
    font-size:40px;
    font-weight:500;
    line-height:48px;
    color:rgba(26,5,29,1);
}
.main-one .second-title{
    width:75px;
    height:48px;
    font-size:40px;
    font-weight:500;
    line-height:48px;
    margin-top:51px;
    color:rgba(26,5,29,1);
}
.main-one .msg-list{
    margin:11px 0 55px
}
.main-one .msg-list li{
    list-style-type:none;
    font-size: 18px;
    line-height:30px;
}
.main-one-bg{
    position: absolute;
    top:19px;
    left:305px;
    width: 976px;
    height: 549px;
}

.main-two{
    position: relative;
    width: 1100px;
    height: 968px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}


.main-two .title{
    width:800px;
    height:53px;
    margin: 107px auto 0;
    font-size:40px;
    font-weight:500;
    line-height:48px;
    color:rgba(26,5,29,1);
}

.main-two .msg{
    width:1068px;
    height:78px;
    margin: 24px auto 0;
    font-size:18px;
    font-weight:400;
    line-height:30px;
    color:rgba(26,5,29,1);
}
.main-two-bg{
    position: absolute;
    width: 448px;
    height: 450px;
    top:310px;
    left:326px;
}


.main-three{
    
    position: relative;
    width: 1100px;
    /* height: 4981px; */
    margin: 0 auto;
    margin-top: 100px;
    /* overflow: hidden; */
  }

  .main-three .tag-list{
    width: 980px;
    margin: 107px auto 95px;
  }

  .main-three .tag-list li{
    display: inline-block;
    list-style-type:none;
    width:235px;
    height:53px;
    font-size:38px;
    font-family:SF Pro Display;
    font-weight:500;
    line-height:48px;
  }

  .main-three .tag-list li{
      margin:5px 43px;
  }

  .main-three .i4cloud-bg{
      position: relative;
      width: 1100px;
      height: 588px;
      margin-bottom:140px;
  }
  .i4cloud-bg img{
      width: 996px;
      height: 515px;
      margin-left:80px;
  }
  .i4cloud-msg{
      position: absolute;
      width: 230px;
  }
  .i4cloud-msg span{
      width: 100%;
      display: block;
      text-align: center;
      color:rgba(26,5,29,1);
  }
  .i4cloud-msg .first{
      font-size: 20px;
      line-height: 40px;
      font-weight: bold;
  }
  .i4cloud-msg .second{
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
}
.i4cloud-msg .third{
    font-size: 14px;
    line-height: 24px;
    font-weight: rgba(129,136,147,1);
}
  .main-three .title-one{
    width:400px;
    height:53px;
    font-size:40px;
    font-weight:500;
    line-height:48px;
    text-align: center;
    margin:150px auto 0;
  }

  .swiper-container { 
    width: 1100px;
    height: 399px;
  }  

.slide-item{
    width:334px !important;
    height:303px !important;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 20px rgba(167,171,178,0.3);
    overflow: hidden;
}
.slide-item img{
    display: block;
    width: 100%;
    height: 216px;
}
.slide-item .msg{
    height: 87px;
    font-size: 20px;
    line-height: 24px;
    padding:21px 20px 0;
}
.my-bullet{
    top:63px;
    width: 5px;
    height: 5px;
    margin-left:16px;
    border-radius: 50%;
    display: inline-block;
    background:rgba(236,241,254,1);
}
.button-prev{
    cursor: pointer;
    position: absolute;
    left:-50px;;
    top:158px;
    width:40px;
    height:40px;
    background: url('../../images/arrow-left.png') no-repeat;
    background-size: 100%;
}
.button-next{
    cursor: pointer;
    position: absolute;
    right: -50px;
    top:158px;
    width:40px;
    height:40px;
    background: url('../../images/arrow-right.png') no-repeat;
    background-size: 100%;
}
.main-three .title-two{
    margin:149px  auto 101px;
    width:730px;
    height:53px;
    font-size:40px;
    font-weight:bold;
    line-height:48px;
}
.server-list{
    width: 1088px;
    margin: 0 auto;
    overflow: hidden;
}
.server-list-item{
    vertical-align: top;
    display: inline-block;
    width: 20%;
    min-height:249px;
    margin: 0 2% 54px;
    text-align: center;
}
.server-list-item img{
    width: 100px;
    height: 100px;
    margin: 0 auto 37px;
}
.server-list-item .title{
    width:100%;
    height:27px;
    font-size:20px;
    font-weight:bold;
    line-height:27px;
    margin-bottom:15px;
}
.server-list-item .msg{
    width:100%;
    height:58px;
    font-size:14px;
    font-weight:400;
    line-height:24px;
    color:rgba(26,5,29,1);
}

.main-three .title-three{
    margin: 84px auto 128px;
    width:240px;
    height:53px;
    font-size:40px;
    font-weight:bold;
    line-height:48px;
}

.evaluate-body{
    position: relative;
    left:-180px;
    width:1483px;
    height: 481px;
    background: #EAEAEA;
}
.evaluate-body .base{
    position: absolute;
    width:100%;
    top:0;
    left:0;
    height: 100%;
    background: #EAEAEA;
    z-index:80;
}
.evaluate-body .one{
    position: absolute;
    top:-20px;
    left:18px;
    width:1447px;
    height: 481px;
    background:rgba(240,240,240,1);
    z-index:50;
}

.evaluate-body .two{
    left:39px;
    top:-34px;
    position: absolute;
    width:1406px;
    height: 481px;
    background:rgba(247,247,247,1);
    z-index:30;
}
.evaluate-body .main{
    position: absolute;
    left:50%;
    margin-left:-550px;
    width: 1100px;
    height: 481px;
    z-index:99
}
.evaluate-msg{
    margin: 157px auto 107px;
    width:1067px;
    height:99px;
    font-size:26px;
    font-weight:400;
    line-height:40px;
}
.evaluate-eff{
    position: absolute;
    width: 30px;
    height: 67px;
    background: url('../../images/main-12.png');
    background-size: 100%;
    z-index:100;
}
.evaluate-eff.left{
    top:110px;
    left:208px;
}
.evaluate-eff.right{
    right:229px;
    bottom: 173px;
}
.partner{
    width: 100%
}
.partner img{
    vertical-align: middle;
}
.partner img:nth-child(1){
    width: 135px;
    height: 37px;
}

.partner img:nth-child(2){
    width: 152px;
    height: 35px;
}
.partner img:nth-child(3){
    width: 116px;
    height: 31px;
}
.partner img:nth-child(4){
    width: 123px;
    height: 43px;
}
.partner img:nth-child(5){
    width: 148px;
    height: 39px;
}
.partner img:not(:last-child){
    margin-right:82px
}
.title-four{
    margin: 149px auto 97px;
    width:400px;
    height:106px;
    font-size:40px;
    font-weight:bold;
    line-height:48px;
    text-align: center;
}
.factory{
    display: block;
    width:881px;
    height:85px;
    margin: 0 auto 114px;
}
.factory-evaluate-body{
    position: relative;
    margin-left:78px
}
.factory-evaluate{
    display: inline-block;
    width:457px;
    vertical-align: top;
}
.factory-evaluate-item{
    cursor: pointer;
    padding:45px 36px;
    width: 100%;
    height: 297px;
    box-shadow:0px 0px 10px rgba(167,171,178,0.3);
    border-radius:2px;
}
.factory-evaluate-item:hover{
    box-shadow:0px 0px 20px rgba(167,171,178,0.3);

}
.factory-evaluate .factory-evaluate-item:not(:last-child){
    margin-bottom:28px;
}
.factory-evaluate-item img{
    display:inline-block;
    vertical-align: top;
    width: 46px;
    height: 46px;
}
.factory-msg{
    display:inline-block;
    vertical-align: top;
    margin-left:20px;
    width:280px;
    height:56px;
    font-size:18px;
    font-weight:400;
    line-height:16px;
}
.factory-msg p{
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 14px;
}
.factory-msg span{
    font-size:18px;
}
.factory-evaluate-item .msg{
    margin-top: 38px;
    font-size:18px;
    font-weight:400;
    line-height:27px;
}
.title-five{
    margin:0 auto 37px;
    width:356px;
    height:88px;
    font-size:18px;
    font-weight:500;
    line-height:40px;
    text-align: center;
}
.title-five + div{
    margin-top:80px!important;
}

.title-five p{
    font-size: 30px;
    margin-bottom:15px;
}
.title-five span{
    font-size: 18px;
}
.title-font{
    font-size:40px;
    font-weight:500;
    line-height:48px;
    text-align: center;
}



  

 
  /*********************************/

  .luopan-box{
    text-align: center;
    display: flex;
    justify-content: center;
    position: relative;
  }

  @keyframes bg{
    0%{
      background-position: 0 140px ;
    }
    100%{
      background-position: 140px 140px ;
    }
  }

  @-moz-keyframes rotate  {

    0% {-moz-transform:rotate(0deg);}
    100% {-moz-transform:rotate(360deg);}
}

@-webkit-keyframes rotate  {
    0% {-webkit-transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);}
}

@keyframes rotate {
    0% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}

@keyframes circle1{
      0% {transform:rotate(-0deg);}
     25% {transform:rotate(-90deg);}
     50% {transform:rotate(-180deg);}
     75% {transform:rotate(-270deg);}
    100% {transform:rotate(-360deg);}
}

@-webkit-keyframes circle2{
    0% {transform:rotate(0deg);}
    25% {transform:rotate(90deg);}
    50% {transform:rotate(180deg);}
    75% {transform:rotate(270deg);}
   100% {transform:rotate(360deg);}
}

@keyframes circle2{
      0% {transform:rotate(0deg);}
     25% {transform:rotate(90deg);}
     50% {transform:rotate(180deg);}
     75% {transform:rotate(270deg);}
    100% {transform:rotate(360deg);}
}

.luopan-bgs{
    background-size: 100% 100%;
    padding-top: 100%;
    z-index: 1;
}



.luopan-fours{
    border: 2px solid #3F60EF;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    z-index: 10;
    margin-top: 100px;
    margin-left: calc( 50% - 250px);
  
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
}
.luopan-tag{
    position: absolute;
    width: 130px;
    height: 130px;
    line-height: 130px;
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
}

.luopan-tag[data-tag="fa"]{
    left: 0%;
    top: 70%;
    margin-left:-25px;
    margin-top: -35px;
    background: url('/images/ball.png');
    box-shadow: inset -10px -10px 10px #3F60EF, 10px 10px 30px rgba(0, 0, 0, 0.6), inset 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.luopan-tag[data-tag="cai"]{
    left: 50%;
    top: 0px;
    margin-left:-65px;
    margin-top: -65px;
    background: url('/images/ball-green.png');
    box-shadow: inset -10px -10px 10px #13d765, 10px 10px 30px rgba(0, 0, 0, 0.6), inset 0px 0px 10px rgba(0, 0, 0, 0.5);;
}

.luopan-tag[data-tag="di"]{
    right: 0px;
    top: 70%;
    margin-right:-25px;
    margin-top:-35px;
    background: url('/images/ball-or.png');
    box-shadow: inset -10px -10px 10px #EA7E10, 10px 10px 30px rgba(0, 0, 0, 0.6), inset 0px 0px 10px rgba(0, 0, 0, 0.5);;
}




.animation .luopan-fours{
    -moz-animation: circle2 10s linear infinite,bg 2s linear infinite;;
    -webkit-animation: circle2 10s linear infinite,bg 2s linear infinite;; 
    animation: circle2 10s linear infinite,bg 2s linear infinite;;
}

.animation .luopan-tag{
    -moz-animation: circle1 10s linear infinite,bg 2s linear infinite;;
    -webkit-animation: circle1 10s linear infinite,bg 2s linear infinite;;
    animation: circle1 10s linear infinite,bg 2s linear infinite;;
}

.transition .luopan-fours, .transition .luopan-tag{
    transition: transform .5s ease-in-out;
}


.tags-icon{
    background: url(./tag-bg.png) center center no-repeat;
    background-size: 100% 100%;
    -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
       -o-border-radius: 50%;
          border-radius: 50%;
    -moz-box-shadow: 0px 3px 5px 0px #000000;
    -webkit-box-shadow: 0px 3px 5px 0px #000000;
    box-shadow: 0px 3px 5px 0px #000000;
    font-size: 18px;
    color: #ffffff;
}  

.ball-line{
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    top: 99px;
    left: 99px;
    /* animation: ball-line-roate 8s cubic-bezier(0,0,1,1) .15s  infinite  ; */
  }

    
  #in-lopp {
    width: 408px;
    height: 408px;
    position: absolute;
    left: 46px;
    top: 46px;
    border: 2px solid #C2CCFA;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .in-deep-circle{
    position: absolute;
    top: 139px;
    left: 139px;
    width: 130px;
    height: 130px;
    background: #FDD000;
    border-radius: 50%;
    text-align: center;
    line-height: 130px;
    font-size: 18px;
    color: #1A051D;
    z-index: 100;
    background: url('/images/ball-yellow.png');
    box-shadow: inset -10px -10px 10px #FDD000, 5px 5px 20px rgba(0, 0, 0, 0.6), inset 0px 0px 10px rgba(0, 0, 0, 0.5);
     -moz-animation: circle1 10s linear infinite;
    -webkit-animation: circle1 10s linear infinite;
    animation: circle1 10s linear infinite,bg 2s linear infinite;
    
  } 

.ovh{
    overflow-x: hidden;
}