body{
  height: 100vh;
}
.swiper-container.server-wrap,.swiper-wrapper{
  height: 100%;
}
.swiper-container.server-wrap .swiper-slide{
  overflow: hidden;
  padding-top: 80px;
}
img{
  width:  100%;
}
.server-web-wrap{
  height: calc(100vh - 80px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.server-lt-web{
  width: 63.5%;
  height: 100%;
  position: relative;
}
.server-rt-web{
  width: 36.5%;
  position: relative;
}

.server-web-info{
  width: 380px;
}
.server-web-info .img{
  width: 59%;
  margin-bottom: 28px;
  position: relative;
}
.server-web-info .desc{
  padding-left: 22px;
  margin-bottom: 20px;
}
.server-web-info .web-list{
  padding-left: 22px;
}
.server-web-info .web-list-item{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
} 
.server-web-info .web-list-item .tip{
  width: 50px;
  height: 50px;
  line-height: 18px;
  color: #333;
  border: 1px solid #333;
  border-radius: 50%;
  text-align: center;
  align-items: center;
  margin-right: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.server-web-info .web-list-item:hover{
  color: #008fff;
  transform: all .3s easy-in-out;
}
.server-web-info .web-list-item:hover .tip{
  background-color: #008fff;
  transform: all .6s easy-in-out;
  color: #fff;
  border-color: #008fff;
}
.server-web-info .web-list-item  p{
  width: 280px;
  font-size: 12px;
  line-height: 16px;
}
.server-web-info .more-case{
  padding-left: 14px;
}
.more-case{
  text-align: left;
}
.more-case a{
  display: inline-block;
  transform: all .6s ease-in-out;
}
.more-case a:hover{
  transform: scale(1.05);
  transform: all .6s ease-in-out;
}

.server-web-build{
  position: absolute;
  width: 88.52%;
  height: 100%;
  right: 0;
  background: url(../images/demo/web-bg.png) no-repeat 16.67% bottom;
  background-size: auto 100%;
}
.server-web-family{
  position: absolute;
  width: 90%;
  top: 50%;
  transform: translateY(-50%);
  height: 55%;
  right: 9.8%;
  z-index: 9;
}
.server-web-family .img-pc-b{
  position: absolute;
  bottom: 3.5%;
  z-index: 10;
  left: 30.8%;
  width: 59%;
}
.server-web-family .img-pc{
  position: absolute;
  left: 0;
  bottom: 3.5%;
  z-index: 12;
  width: 48.2%;
}
.server-web-family .img-pad{
  position: absolute;
  right: 0;
  bottom: 5.1%;
  z-index: 13;
  width: 20.5%;
}

.server-web-family .img-mobile{
  position: absolute;
  bottom: 0px;
  z-index: 14;
  left: 1.23%;
  width: 10.26%;

}
/**********************************************/
.server-app-wrap{
  height: calc(100vh - 80px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.server-app-lf{
  width: 39.58%;
  position: relative;
  height: 100%;
}

.server-app-rt{
  position: relative;
  width: 60.42%;
  height: 100%;;
  /*  */
}
.server-app-lf .server-app-info{
  width: 380px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8.42%;
}
.server-app-info .img img{
  width: auto;
  height: 70px;
}
.server-app-lf .server-app-info .desc {
  padding: 28px 0 30px 0;
  line-height: 22px;
}
.server-app-lf .server-app-list{
  display: flex;
  flex-wrap: wrap;
}
.server-app-lf .server-app-list li{
  width: 25%;
  padding-right: 20px;
  line-height: 22px;
  color: #333;
}
.server-app-lf .server-app-list li::before{
  content: '';
  display: inline-block;
  margin-right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffb751;
}
.server-app-lf .server-app-list li:hover{
  color: #ffb751;
}
.server-app-lf .more-case{
  padding: 36px 0 0 0;
}

.server-appimg-list{
  position: absolute;
  height: 67.2%;
  width: 100%;
  top: 50%;
  /* background: url(../images/server/app-bg.png) no-repeat center; */
  /* background-size: 100% auto; */
  transform: translateY(-50%);
  left: 0;
  
}
.server-appimg-list .app-img-bg{
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}
.server-appimg-list .img-mobile{
  top: 50%;
  transform: translateY(-50%);
  left: 15.20%;;
  width: 28.93%;
  z-index: 14;
  position: absolute;
}
.server-appimg-list .img-info{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 42.14%;
  width: 22.97%;
  z-index: 13;
}
.server-appimg-list .img-card{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 63.21%;
  width: 21.24%;
  z-index: 12;
}
.server-appimg-list  img{
  height: 100%;
}
/********************************************************/
.server-mini-wrap{
  display: flex;
  justify-content: space-between;
  height: calc(100vh - 80px);
}
.server-mini-lt{
  position: relative;
  width: 60.88%;
}
.server-mini-bg{
  height: 100%;
  background: url(../images/server/bg-mini.png) no-repeat center;
  background-size: cover;
}
.server-mini-rt{
  width: 36.46%;
  position: relative;
  display: flex;
  align-items: center;
}

.server-mini-info{
  width: 380px;
}
.server-mini-info .img img{
  height: 70px;
  width: auto
}
.server-mini-info .desc {
  padding: 28px 0 30px 0;
  line-height: 22px;
}
.server-mini-list {
  display: flex;
  justify-content: space-between;
}
.server-mini-list li{
  width: 33.3%;
  height: 77px;
  
  background-size: auto 100%;
}
.server-mini-list li:nth-child(1){
  background: url(../images/server/wechat-off.png) no-repeat center;
  transform: all .6s ease-out;
}
.server-mini-list li:nth-child(2){
  background: url(../images/server/baidu-off.png) no-repeat center;
  transform: all .6s ease-out;
}
.server-mini-list li:nth-child(3){
  background: url(../images/server/applay-off.png) no-repeat center;
  transform: all .6s ease-out;
}
.server-mini-list li:nth-child(1):hover{
  background: url(../images/server/wechat-on.png) no-repeat center;
  transform: all .6s ease-out;
}
.server-mini-list li:nth-child(2):hover{
  background: url(../images/server/baidu-on.png) no-repeat center;
  transform: all .6s ease-out;
}
.server-mini-list li:nth-child(3):hover{
  background: url(../images/server/applay-on.png) no-repeat center;
  transform: all .6s ease-out;
}
.server-mini-info .more-case{
  padding: 36px 0 20px 0;
}

/*************************************/
.server-soft-wrap{
  text-align: center;
  height: calc(100vh - 80px);
  overflow: hidden;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  padding-top: 36px;
}
.server-soft-wrap .title  img{
  height: 70px;
  width: auto;
}

.server-soft-wrap .desc{
  max-width: 716px;
  margin: 26px auto 20px;
}
.server-soft-list {
  font-size: 16px;
  color: #333;

}
.server-soft-list span{
  margin: 0 10px;
}
.server-soft-list span:hover{
  color: #7a46fc;
  transform: all .3s easy-in-out;
}

.server-soft-wrap .more-case{
  padding: 26px 0 50px 0;
  text-align: center;
}
.server-soft-item{
  position: relative;
}
.server-soft-item>img{
  width: 87%;
}
.server-soft-item .img{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 37%;
  transform: translate(-50%,-50%);
}
.server-soft-item .img img{
  width: 100%;
}
/*******************************************************/
.server-media-wrap{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: calc(100vh - 80px);
  background: url(../images/server/media-bg.png) no-repeat right center;
  background-size: 77.6% 100%;
}
.server-media-lt{
  position: relative;
  width: 36%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.server-media-info{
  width: 382px;
}
.server-media-info .title img{
  height: 70px;
  width: auto;
}
.server-media-info .desc{
  line-height: 22px;
  margin: 30px 0 16px 0;
}
.server-media-list li{
  font-size: 16px;
  line-height: 30px;
  color: #333;
}
.server-media-list li::before{
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #008fff;
  margin-right: 8px;
}
.server-media-list li:hover{
  color: #008fff;
  transform: all .3s ease-in-out;
}
.server-media-wrap .more-case{
  padding: 36px 0  0;
}

.server-media-rt{
  width: 64%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.server-media-img img{
  height: 100%;
}
/********************************************************************/
.server-vi-wrap{
  display: flex;
  justify-content: space-between;
  height: calc(100vh - 80px);
  align-items: center;
}
.server-vi-lt{
  position: relative;
  width: 55%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.server-vi-imgs{
  position: relative;
  width: 832px;
  overflow: hidden;
}
.server-vi-imgs img{
  width: 100%;
  object-fit: cover;
}

.pagination-wrap.it-page{
  margin-bottom: 60px;
}
.server-vi-rt{
  width: 36.45%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-items: flex-start;
} 

.server-vi-info{
  width: 370px;
}
.server-vi-info .title img{
  height: 70px;
  width: auto;
}
.server-vi-info .desc{
  line-height: 22px;
  padding: 30px 0 34px 0;
}
.server-vi-list{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.server-vi-list li{
  width: 33.33%;
  margin-bottom: 26px;
  text-align: center;
  height: 62px;
  background-size: auto 100%;
}
.server-vi-list li:nth-child(1){
  background: url(../images/server/vi-01-off.png) no-repeat left center;
  transform: all .6s ease-in;
}
.server-vi-list li:nth-child(2){
  background: url(../images/server/vi-02-off.png) no-repeat left center;
  transform: all .6s ease-in;
}
.server-vi-list li:nth-child(3){
  background: url(../images/server/vi-03-off.png) no-repeat left center;
  transform: all .6s ease-in;
}
.server-vi-list li:nth-child(4){
  background: url(../images/server/vi-04-off.png) no-repeat left center;
  transform: all .6s ease-in;
}
.server-vi-list li:nth-child(5){
  background: url(../images/server/vi-05-off.png) no-repeat left center;
  transform: all .6s ease-in;
}
.server-vi-list li:nth-child(6){
  background: url(../images/server/vi-06-off.png) no-repeat left center;
  transform: all .6s ease-in;
}

.server-vi-list li:nth-child(1):hover{
  background: url(../images/server/vi-01-on.png) no-repeat left center;
  transform: all .6s ease-in;
}
.server-vi-list li:nth-child(2):hover{
  background: url(../images/server/vi-02-on.png) no-repeat left center;
  transform: all .6s ease-in;
}
.server-vi-list li:nth-child(3):hover{
  background: url(../images/server/vi-03-on.png) no-repeat left center;
  transform: all .6s ease-in;
}
.server-vi-list li:nth-child(4):hover{
  background: url(../images/server/vi-04-on.png) no-repeat left center;
  transform: all .6s ease-in;
}
.server-vi-list li:nth-child(5):hover{
  background: url(../images/server/vi-05-on.png) no-repeat left center;
  transform: all .6s ease-in;
}
.server-vi-list li:nth-child(6):hover{
  background: url(../images/server/vi-06-on.png) no-repeat left center;
  transform: all .6s ease-in;
}
.server-vi-list li img{
  height: 50px;
  width: 60px;
}


/*********************************/
.swiper-slide-active .server-web-family div{
  animation: webAni_01 .6s linear forwards;
  -webkit-animation:  webAni_01 .6s linear forwards;
  transform: translateX(1920px);
}
.swiper-slide-active .server-web-info{
  animation: webAni_02 1s linear forwards;
  -webkit-animation:  webAni_02 1s linear forwards;
}
.swiper-slide-active .server-web-family div:nth-child(1){
  animation-delay: .4s;
}
.swiper-slide-active .server-web-family div:nth-child(2){
  animation-delay: .8s;
}
.swiper-slide-active .server-web-family div:nth-child(3){
  animation-delay: 1.2s;
}
.swiper-slide-active .server-web-family div:nth-child(4){
  animation-delay: 1.6s;
}
@keyframes  webAni_01{
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes  webAni_02{
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%,0, 0);
    transform: translate3d(100%,0, 0);
  }
  50% {
    opacity: 0.1;
    -webkit-transform: translate3d(50%,0, 0);
    transform: translate3d(50%,0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0,0, 0);
    transform: translate3d(0,0, 0);
  }
}

.swiper-slide-active .server-appimg-list div{
  animation: appAni_01 .6s linear forwards;
  -webkit-animation:  appAni_01 .6s linear forwards;
  transform: translate3D(1280px,-50%,0);
}
.swiper-slide-active .server-app-info{
  animation: appAni_02 .6s linear forwards;
  -webkit-animation:  appAni_02 .6s linear .6s forwards;
  transform: translate3d(-100%, -50%, 0);
} 
@keyframes  appAni_02{
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -50%, 0);
    transform: translate3d(-100%, -50%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0,-50%, 0);
  }
}

.swiper-slide-active .server-appimg-list div:nth-child(1){
  animation-delay: .4s;
}
.swiper-slide-active .server-appimg-list div:nth-child(2){
  animation-delay: .8s;
}
.swiper-slide-active .server-appimg-list div:nth-child(3){
  animation-delay: 1.2s;
}
.swiper-slide-active .server-appimg-list div:nth-child(4){
  animation-delay: 1.6s;
}
@keyframes  appAni_01{
  from {
    opacity: 0;
    -webkit-transform: translate3d(200%, -50%, 0);
    transform: translate3d(200%, -50%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
}

.swiper-slide-active .server-mini-bg{
  animation: miniAni_01 1s linear forwards;
  -webkit-animation:  miniAni_01 1s linear forwards;
  opacity: 0;
}
.swiper-slide-active .server-mini-info{
  animation: miniAni_02 1s linear forwards;
  -webkit-animation:  mimiAni_02 1s linear forwards;
  transform: translateX(1280px);
} 
@keyframes  miniAni_01{
  from {
    opacity: 0;
    /* -webkit-transform: translate3D(100%,100%,0);
    transform: translate3D(100%,100%,0); */
  }
  to {
    opacity: 1;
    /* -webkit-transform:translate3D(0,0,0);
    transform: translate3D(0,0,0); */
  }
}
@keyframes  mimiAni_02{
  0% {
    opacity: 0;
    -webkit-transform: translate3d(1280px,0, 0);
    transform: translate3d(1280px,0, 0);
  }
  50% {
    opacity: 0.1;
    -webkit-transform: translate3d(640px,0, 0);
    transform: translate3d(640px,0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0,0, 0);
    transform: translate3d(0,0, 0);
  }
}


.swiper-slide-active .server-soft-wrap .title{
  animation: softAni_01 .6s ease-in-out forwards;
  -webkit-animation:  softAni_01 .6s ease-in-out .6s forwards;
  transform: translateY(-600px);
} 
.swiper-slide-active .server-soft-wrap .desc{
  animation: softAni_01 .6s ease-in-out forwards;
  -webkit-animation:  softAni_01 .6s ease-in-out .6s forwards;
  transform: translateY(-600px);
} 
.swiper-slide-active .server-soft-wrap .server-soft-list{
  animation: softAni_01 .6s ease-in-out forwards;
  -webkit-animation:  softAni_01 .6s ease-in-out .6s forwards;
  transform: translateY(-600px);
} 
.swiper-slide-active .server-soft-wrap .more-case{
  animation: softAni_01 .6s ease-in-out forwards;
  -webkit-animation:  softAni_01 .6s ease-in-out .6s forwards;
  transform: translateY(-600px);
} 
.swiper-slide-active .server-soft-item {
  animation: softAni_02 .6s linear forwards;
  -webkit-animation:  softAni_02 .6s linear  forwards;
  transform: translateY(100%);
}
.swiper-slide-active .server-soft-item .img{
  animation: softAni_03 .6s linear forwards;
  -webkit-animation:  softAni_03 .6s linear .6s forwards;
  transform: translate3d(-50%,50%,0)
}
.swiper-slide-active .server-soft-item>img:hover{
  animation: softAni_04 1.8s ease-in-out forwards
}

@keyframes  softAni_01{
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -600px, 0);
    transform: translate3d(0, -600px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes  softAni_02{
  from {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes  softAni_03{
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50%,50%,0);
    transform: translate3d(-50%,50%,0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0)
  }
}
@keyframes  softAni_04{
  0% {
    transform: scale(1);
  }
  50%{
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}


.swiper-slide-active .server-media-info{
  animation: mediaAni_01 1s linear forwards;
  -webkit-animation:  mediaAni_01 1s linear forwards;
  transform: translate3d(-1280px,0, 0);
} 
.server-media-img{
  width: 76%;
  padding-left: 76px;
}

.swiper-slide-active .server-media-img{
  animation: mediaAni_02 1s linear forwards;
  -webkit-animation:  mediaAni_02 1s linear forwards;
  /* transform: translate3d(1280px,0, 0); */
} 
.swiper-slide-active .server-media-img:hover img{
  animation: mediaAni_03 3.6s ease-in-out  infinite;
  -webkit-animation:  mediaAni_03 3.6s ease-in-out infinite;
}
@keyframes  mediaAni_01{
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-1280px,0, 0);
    transform: translate3d(-1280px,0, 0);
  }
  50% {
    opacity: 0.1;
    -webkit-transform: translate3d(-640px,0, 0);
    transform: translate3d(-640px,0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0,0, 0);
    transform: translate3d(0,0, 0);
  }
}
@keyframes  mediaAni_02{
  from {
    opacity: 0;
    -webkit-transform: translate3d(1280px,0, 0);
    transform: translate3d(1280px,0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0,0, 0);
    transform: translate3d(0,0, 0);
  }
}
@keyframes  mediaAni_03{
  0% {
    -webkit-transform: translate3d(0,0, 0);
    transform: translate3d(0,0, 0);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate3d(40px,-20px, 0);
    transform: translate3d(40px,-20px, 0);
    opacity: .8;
  }
  100% {
    -webkit-transform: translate3d(0,0, 0);
    transform: translate3d(0,0, 0);
    opacity: 1;
  }
}
.swiper-slide-active .server-vi-imgs{
  animation: viAni_01 1.6s linear forwards;
  -webkit-animation:  viAni_01 1.6s linear forwards;
} 
.swiper-slide-active .server-vi-info{
  animation: viAni_02 1s linear forwards;
  -webkit-animation:  viAni_02 1s linear forwards;
  transform: translate3d(1280px,0, 0);
} 
@keyframes  viAni_01{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes  viAni_02{
  0% {
    opacity: 0;
    -webkit-transform: translate3d(1280px,0, 0);
    transform: translate3d(1280px,0, 0);
  }
  50% {
    opacity: 0.1;
    -webkit-transform: translate3d(640px,0, 0);
    transform: translate3d(640px,0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0,0, 0);
    transform: translate3d(0,0, 0);
  }
}