.marginauto{
  margin: 0 auto;
}
/*  banner style */
.banner-area{
  width: 100%;
  margin-top: 80px;
  position: relative;
  /* background: url(../images/indexImage/home-banner.png) no-repeat center; */
}
.banner-area .carousel-inner > .item{
  /* -webkit-transition:-webkit-transform 0.2s ease-in-out;
  -o-transition:-o-transform 0.2s ease-in-out;
  transition:transiform 0.2s ease-in-out; */
}
#carousel-notouch .carousel-inner > .item img{
  max-width:1920px;
  margin: 0 auto;
}
.banner-area .carousel-inner .item .banner-carousel{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.banner-content{
  /* padding-top: 140px;  */
}
.home-banner{
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.home-title-one{
  margin-bottom: 30px;
}
.home-title-two{
  font-size:24px;
  color:#00b1e5;
  margin-bottom: 10px;
}
.home-title-three{
  color:#fff;
  font-size:38px;
}
.enterPortal{

}
.enterPortal a{
  width:160px;
  display: inline-block;
  height: 46px;
  line-height: 46px;
  background-color: #00aeea;
  border-radius:22px;
  color:#fff;
  letter-spacing: 1px;
  font-size: 22px;
  text-align: center;
}
.enterPortal a:first-child{
  border: 1px solid #00aeea;
  color:#00aeea;
  background-color: rgb(0,0,0,0);
  margin-right: 42px;
}
.iservice-content{
  position: relative;
  text-align: center;
}
.iservice-content>img{
  display: block;
  margin: 0 auto;
}
.iService-title{
  position: absolute;
  top:0;
  left:50%;
  transform: translate(-50%,-50%);
}
.iService-title>img{
  display: inline-block;
  vertical-align: baseline;
  margin-right:25px;
}
.iService-title span{
  display: inline-block;
  font-size: 44px;
  color:#fff;
  vertical-align: super;
}
.iService-center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.iService-center p{
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-around;
}
.iService-center span{
  font-size:36px;
  color:#fff;
}
.iService-btn{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%,28%);
}
.iService-btn a{
  width:160px;
  display: inline-block;
  height: 46px;
  line-height: 46px;
  background-color: #00aeea;
  border-radius:22px;
  color:#fff;
  letter-spacing: 1px;
  font-size: 22px;
}
.zhezhao{
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0,0.5);
  display: none;
  z-index: 9999;
}
.home-title-two span:nth-child(2) em{
  display: inline-block;
  font-style: normal;
  /* transform: scale(0); */
}
.getbig{
  animation: scale-big 2s forwards;
}
.getout{
  animation: scale-small 2s forwards;
}
@keyframes scale-big{
  0%{
    transform:scale(0.8);
    opacity:0.8;
  }
  60%{
    transform: scale(1.5);
    opacity: 1;
  }
  100%{
    transform: scale(1);
    opacity: 0.9;
  }
}
@keyframes scale-small{
  0%{
    transform:scale(1);
    opacity:1;
  }
  60%{
    transform: scale(0.5);
    opacity: 0;
  }
}
.font36{
  font-size: 36px;
  color: #fff;
}
.font42{
  font-size: 42px;
  color: rgb(2,176,227);
  font-weight: 600;
}
.font22{
  font-size: 22px;
  color:#fff;
}
.font20{
  color: #fff;
  font-size: 20px;
}
.bluecolor{
  color: rgb(2,176,227);
}
.video-model{
  z-index: 10000;
  width: 720px;
  position: absolute;
  margin-left: -360px;
  left: 50%;
  top: 50%;
  margin-top: -240px;
  height: 440px;
  background: rgb(30,33,38);
}
.closeVideo{
  color: #fff;
  position: absolute;
  top: 4px;
  right: 15px;
  font-size: 20px;
  z-index: 666;
  cursor: pointer;
}
.notouch-btn{
  margin-top : 368px;
  margin-left : 550px;
}
.notouch-btn a {
  display: block;
  border-radius: 25px;
  font-size: 20px;
  position: relative;
  color: #fff;
}
.banner-btn{
  margin-top: 33px;
}
.video-btn {
  border: 0;
  padding: 0;
  margin:42px 0px;
  text-align: center;
}
.banner-btn a {
  display: block;
  border-radius: 25px;
  font-size: 20px;
  position: relative;
  color: #fff;
}
.video-scroll{
  position: fixed;
  width: 540px;
  height: 320px;
  right: 0px;
  bottom: 20px;
  z-index: 99999;
}
.video-modal-scrool{
  z-index: 10000;
  width: 540px;
  position: absolute;
  margin-left: -270px;
  left: 50%;
  top: 50%;
  margin-top: -180px;
  height: 305px;
  background: rgb(30,33,38);
}
/**commontitle style**/
.title{
  width: 682px;
  height: 50px;
  position: relative;
  border-left: 1px solid rgb(107,128,145);
  border-right: 1px solid rgb(107,128,145);
  border-bottom: 1px solid rgb(107,128,145);
  margin: 0 auto;
}
.title:before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20%;
  height: 1px;
  background-color:rgb(161,161,161);
}
.title:after{
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 20%;
  height: 1px;
  background-color:rgb(161,161,161);
}
.caption{
  width: 444px;
  position: absolute;
  text-align: center;
  top: -16px;
  left: 50%;
  margin-left: -222px;
}
.level-one{
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0px;
}
.level-two{
  font-size:14px;
  font-weight: 600;
  color: rgb(161,161,161);
}
/*  video introduce style */
.video-indroduce{
  height: 760px;
  padding-top: 36px;
  color: rgb(255, 255, 255);
  text-align: center;
  background: url(../images/indexImage/map-bg.png) no-repeat center;
  /* background: linear-gradient(to bottom,rgb(4, 94, 170), rgb(1, 152, 216)); */
}
.map-model{
  width: 1184px;
  height: 618px;
  margin-top: 30px;
} 
#map-content{
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../images/indexImage/china-map.png) center !important;
  background-size: 100%!important;
}
.fall-where{
  position: absolute;
}
.fall-where-one{
  width: 252px;
  height: 131px;
  top: 20px;
  left: 20px;
  background: url(../images/indexImage/north.png) no-repeat center;
}
.fall-where-two{
  width: 200px;
  height: 137px;
  top: 20px;
  left: 20px;
  background: url(../images/indexImage/yunnan.png) no-repeat center;
}
.fall-where-three{
  width: 191px;
  height: 185px;
  top: 20px;
  left: 20px;
  background: url(../images/indexImage/west.png) no-repeat center;
}
.fall-where-four{
  width: 253px;
  height:172px;
  top: 20px;
  left: 20px;
  background: url(../images/indexImage/helongjiang.png) no-repeat center;
}
/**product-function style**/
.carousel-indicators li{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-right: 10px;
  border: none;
  background-color: #eaeaea;
}
.product-function{
  width: 100%;
  height: 702px;
  background-color: rgb(238,238,238);
  text-align: center;
}
.carousel-inner .item .bg-carousel{
  width: 100%;
  height: 700px;
  background: #fff;
}
.carousel-inner .item .banner-carousel{
  /* width: 100%;
  height: 760px; */
  position: absolute;
  width:100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.carousel-inner .item .carousel-content{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.content-descript{
  display: flex;
  float:right;
  text-align: left;
  flex-direction: column;
  align-content: center;
}
.content-descript h3{
  font-size: 34px;
  font-weight: 400;
  color:rgb(41,41,41);
}
.content-descript p:nth-child(2){
  font-size: 22px;
  color:rgb(0,176,227);
  font-weight: 600;
  margin-top: 54px;
}
.content-descript p:nth-child(4){
  margin-top: 56px;
}
.content-descript p:nth-child(4),.content-descript p:nth-child(5){
  font-size: 18px;
  color:rgb(90,90,90);
}
.content-descript p:nth-child(4) span,.content-descript p:nth-child(5) span{
  font-size: 24px;
  color:rgb(0,176,227);
}
.font-descript img{
  width: 100px;
  height: 100px;
  background-size: cover;
}
.content-descript ul{
  margin-top: 26px;
  max-width: 424px;
}
.content-descript ul li{
  font-size: 18px;
  font-weight: 500;
  color: rgb(90,90,90);
  line-height: 32px;
}
.content-descript ul li em{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  margin-right: 5px;
  vertical-align: middle;
  background: rgb(0,176,227);
}
.carousel-inner .item .bg-carousel1{
  /* background: url(../images/indexImage/Body.png) no-repeat center; */
}
.carousel-inner .item .bg-carousel2{
  /* background: url(../images/indexImage/wen.jpg) no-repeat center; */
}
.carousel-inner .item .bg-carousel3{
  /* background: url(../images/indexImage/zhun.jpg) no-repeat center; */
}
.carousel-inner .item .bg-carousel4{
  /* background: url(../images/indexImage/hen.jpg) no-repeat center; */
}

.carousel-inner .item .bg-carousel5{
  /* background: url(../images/indexImage/iService-banner.png) no-repeat center; */
  /* height : 760px; */
}
.carousel-inner .item .bg-carousel6{
  /* background: url(../images/indexImage/home-banner.png) no-repeat center; */
  /* height : 760px; */
}
/** service product style**/
.service-product{
  padding:30px 0px;
  height: 800px;
}
.product-list{
  display: flex;
  padding:50px 0px 20px 0px;
}
.product-list-left{
  width:360px;
  height: 570px;
  margin-right:16px;
  position: relative;
}
.product-list-left .product-detail{
  width:360px;
  background: url('../images/indexImage/standard-bg.png') no-repeat;
  position: absolute;
}
.product-list-other{
  display:flex;
  flex-direction: column;
}
.product-list-right{
  flex:1;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.product-list-right:first-child{
  margin-bottom: 36px;
}
.product-list-right:first-child .detail-right-right .detail-content{
  display: flex;
  flex-direction: unset;
}
.detail-content .detail-content-left,.detail-content .detail-content-right{
  display: flex;
  flex-direction: column;
}
.detail-right-left{
  margin-right:16px;
  width: 405px;
}
.detail-right-right{
  width: 410px;
}
.product-list-right .detail-content{
  display: flex;
  flex-direction: column;
}
.product-detail{
  height: 100%;
  border: 1px solid #8dd8e9;
  padding-top:16px;
  background: #fff;
  /* position: absolute; */
}
.product-list-other .product-detail{
  display: flex;
  flex-direction: column;
  width: 100%;
}
.product-detail-hover{
  border: 1px solid #8dd9c3;
  box-shadow: 0 0 15px #8dd9c3;
  transform: scaleY(1.2);
  justify-content: space-between;
}
.product-detail .detail-title{
  display: flex;
  flex-direction: column;
  padding: 0px 18px;
}
.product-detail .detail-title-hover{
  transform: scaleY(0.83);
}
.product-detail .detail-title-line img{
  display:block;
}
.product-detail .detail-title .detail-title-content{
  display: flex;
}
.product-detail .link-details{
  display: none;
  width: 100%;
  height: 50px;
  text-align: center;
  /* border: 1px solid #784596; */
}
.product-detail .link-details-hover{
  display: block;
}
.product-detail .link-details-hover{
  transform: scaleY(0.83);
  position: relative;
  bottom: -4px;
}
.product-list-left .product-detail .link-details-hover{
  position: absolute;
}
.product-detail .link-details a{
  display: block;
  width: 100%;
  height: 100%;
  background: #8cdc85;
  color: #fff;
  font-size: 26px;
  /* position: absolute; */
  /* bottom: 0px; */
  text-align: center;
}
.detail-content span{
  font-size:16px;
  color:#272727;
  line-height: 40px;
  padding-left:30px;
}
.product-list-right:first-child .detail-right-right .detail-content span{
  line-height: 30px;
  padding-left:0px;
}
.anzai-type{
  position: relative;
}
.anzai-type span{
  position: absolute;
  left:36%;
  top:50%;
  transform: translate(-50%,-50%);
}
.product-detail .detail-title .detail-title-content em,.product-detail .detail-title .detail-title-content span{
  display: inline-block;
  font-size:20px;
  color:#00b0e2;
  white-space: nowrap;
}
.product-detail .detail-des{
  font-size:14px;
  color:#808080;
  line-height: 26px;
  padding:0px 18px;
}
.product-detail .detail-des-hover{
  transform: scaleY(0.83);
}
.product-detail .detail-title .detail-title-content span{
  font-size:18px;
  color:#fff;
}
.detail-content{
  display: flex;
  flex-direction: column;
  padding: 0px 18px;
}
.detail-content-hover{
  transform: scaleY(0.83);
}
.detail-content span em{
  display: inline-block;
  width:18px;
  height: 12px;
  margin-right:14px;
  background: url('../images/indexImage/tick.png') no-repeat center;
}
.product-top .detail-content{
  flex-direction: unset;
}
.product-top .detail-content .detail-content-left,.product-top .detail-content .detail-content-right{
  display: flex;
  flex-direction: column;
}
/**cloud service style**/
.cloud-sevice{
  background-color: #fff;
}
.characteries-content{
  padding-top: 40px;
}
.characteries-list{
  padding-top: 58px;
  display: flex;
}
.left-characteries{
  width: 50%;
}
.right-characteries{
  width: 50%;
}
.characteries-item{
  display: flex;
  margin-bottom: 24px;
}
.characteries-item .xuhao{
  width: 108px;
  font-size: 56px;
  color: #fff;
  text-indent: 26px;
  line-height: 100px;
  vertical-align: baseline;
  background: url(../images/indexImage/mulu.png) no-repeat;
}
.characteries-item ul{
  width: 492px;
  margin-left: 16px;
}
.characteries-item ul li:first-child{
  font-size: 26px;
  color: rgb(0,176,227);
  line-height: 76px;
}
.characteries-item ul li{
  display: flex;
  font-size:14px;
  color: rgb(118,118,118);
  line-height: 32px;
  align-items: baseline;
}
.characteries-item ul li em{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: rgb(0,176,227);
  margin-right: 4px;
}
.characteries-item ul li p{
  width: 90%;
  margin: 9px 0px;
  line-height: 16px;
}
.team-list{
  text-align: center;
  padding: 56px 0px;
}
/*  service character style */
.service-character{
  width: 100%;
  height: 710px;
  color: #fff;
  text-align: center;
  /* background: url(../images/homeImages/view.png) repeat-x; */
  background: linear-gradient(to bottom,#09384e 0%, #1d7097 100%);
}
.ty-content{
  width: 1200px;
  padding: 32px 0px 40px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.ty-view-box {
  width: 1200px;
  margin: 0px auto;
  margin-top: 40px;
  height: 548px;
  background: url(../images/indexImage/jiagou.png) no-repeat 196px  198px;
  position: absolute;
  z-index:1;
}
.font-fontstruct{
  width: 1200px;
  margin: 0 auto;
  height: 100%;
  z-index: 666;
  position: absolute;
  /* background: url(../images/indexImage/framework-font.png) no-repeat 110px 60px; */
}
.ty-view-bg{
  width: 1220px;
  margin: 0 auto;
  height: 100%;
  z-index: 30;
  position: absolute;
  background: url(../images/indexImage/framework-font.png) no-repeat 110px 60px;
}
.ty-view-router{
  width: 205px;
  height: 108px;
  position: absolute;
  background: url(../images/indexImage/luyouqi.png) no-repeat;
  bottom: 66px;
  left:64px;
  z-index: 50;
}

.ty-view-exchange{
  width: 205px;
  height: 108px;
  position: absolute;
  background: url(../images/indexImage/luyouqi.png) no-repeat;
  bottom: -2px;
  left:180px;
  z-index: 50;
}
.ty-view-ap{
  width: 205px;
  height: 108px;
  position: absolute;
  background: url(../images/indexImage/luyouqi.png) no-repeat;
  bottom: 160px;
  left:102px;
  z-index: 50;
}
.ty-view-server{
  width:246px;
  height:108px;
  background:url(../images/indexImage/luyouqi.png) no-repeat;
  position:absolute;
  bottom:82px;
  left:232px;
  z-index:91;
  cursor:pointer;
}
.ty-view-storage{
  width:246px;
  height:108px;
  background:url(../images/indexImage/luyouqi.png) no-repeat;
  position:absolute;
  bottom:20px;
  left:342px;
  z-index:90;
  cursor:pointer;
}
.ty-view-probe{
  width: 342px;
  height:178px;
  background: url(../images/indexImage/tanzhen.png) no-repeat;
  position: absolute;
  bottom: 112px;
  left: 308px;
  z-index:90;
  cursor: pointer;
}
.ty-view-apache{
  width: 481px;
  height: 304px;
  position: absolute;
  background: url(../images/indexImage/yunpingtai.png) no-repeat;
  top:0px;
  right: 28px;
  z-index: 60;
}
.ty-view-router-hover{
  background:url(../images/indexImage/luyouqi-hover.png) no-repeat;
}
.ty-view-exchange-hover{
  background:url(../images/indexImage/luyouqi-hover.png) no-repeat;
}
.ty-view-ap-hover{
  background:url(../images/indexImage/luyouqi-hover.png) no-repeat;
}
.ty-view-server-hover{
  background:url(../images/indexImage/luyouqi-hover.png) no-repeat;
}
.ty-view-storage-hover{
  background:url(../images/indexImage/luyouqi-hover.png) no-repeat;
}
.ty-view-probe-hover{
  background:url(../images/indexImage/probe.png) no-repeat;
  /* opacity: 0.6; */
}
.ty-view-apache-hover{
  background:url(../images/indexImage/cloud-platform.png) no-repeat;
}
.ty-view-cardbox{
  width:1200px;
  height:548x;
  position:absolute;
  top:0;
  left:0;
  z-index:10
}
.ty-view-exchangecard{
  width: 800px;
  height: 144px;
  position:absolute;
  top:406px;
  left:280px;
  z-index:10
}
.ty-view-routercard{
  width:349px;
  height:338px;
  position:absolute;
  top:88px;
  left:0;
  z-index:15
}
.ty-view-apcard{
  width: 431px;
  height: 326px;
  position: absolute;
  top: 6px;
  left: -16px;
  z-index: 16;
}
.ty-view-servercard{
  width: 329px;
  height: 361px;
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 16;
}
.ty-view-storagecard{
  width:474px;
  height: 166px;
  position: absolute;
  top:402px;
  left: 544px;
}
.ty-view-probecard{
  width: 414px;
  height: 213px;
  position: absolute;
  top: 46px;
  left: 0px;
}
.ty-view-apachecard{
  width: 329px;
  height: 246px;
  position: absolute;
  top:298px;
  right: 174px;
}
.ty-view-note{
  position: relative;
}
.down-note{
  position: absolute;
  top:458px;
  left: 600px;
  width: 430px;
  text-align: left;
  line-height: 28px;
  font-size: 16px;
  opacity: 0;
  color:#41c6fe;
}
.up-note{
  position: absolute;
  top:20px;
  left: 200px;
  width: 436px;
  text-align: left;
  line-height: 28px;
  font-size: 16px;
  opacity: 0;
  color:#41c6fe;
}
.ty-view-arrow1{
  top:398px;
  left:204px;
  transform: rotate(-10deg);
  background:url(../images/indexImage/ty-view-achor.png) no-repeat;
  background-position:left 0;
}
.ty-view-arrow2{
  top:466px;
  left:310px;
  background:url(../images/indexImage/ty-view-achor.png) no-repeat;
  transform: rotate(-22deg);
  /* filter:alpha(opacity=0); */
  background-position:left 0;
}
.ty-view-arrow3{
  top:344px;
  left:466px;
  transform: rotate(-24deg);
  background:url(../images/indexImage/ty-view-achor.png) no-repeat;
  background-position:left 0px;
}
.ty-view-arrow4{
  top:448px;
  left:456px;
  transform: rotate(20deg);
  background:url(../images/indexImage/ty-view-achor.png) no-repeat;
  background-position:left 0px;
}
.ty-view-arrow5{
  top:332px;
  left:254px;
  transform: rotate(20deg);
  background:url(../images/indexImage/ty-view-achor.png) no-repeat;
  background-position:left 0;
}
.ty-view-arrow6{
  top:149px;
  left:760px;
  background:url(../images/indexImage/ty-view-achor.png) no-repeat;
  background-position:left 0;
}
.ty-view-arrow7{
  top:142px;
  left:914px;
  background:url(../images/indexImage/ty-view-achor.png) no-repeat;
  transform: rotate(28deg);
  /* opacity:0;
  filter:alpha(opacity=0); */
  background-position:left 0;
}
.ty-view-arrow8{
  top:144px;
  left:770px;
  background:url(../images/indexImage/ty-view-achor.png) no-repeat;
  /* opacity:0;
  filter:alpha(opacity=0); */
  background-position:left 0;
}
.ty-view-arrow9 {
  top: 146px;
  left: 920px;
  transform: rotate(28deg);
  background: url(../images/indexImage/ty-view-achor.png) no-repeat;
  /* opacity: 0;
  filter: alpha(opacity=0); */
  background-position: left 0;
}
.ty-view-arrow {
  width: 37px;
  height: 19px;
  font-size: 0;
  position: absolute;
  z-index: 5;
}
/**custom case style**/
.customer-case{
  padding-top: 40px;
  padding-bottom: 68px;
}
.custom-list{
  padding-top: 58px;
  width: 100%;
 display: flex;
 justify-content: space-between;
}
.custom-title{
  /* display: inline-block; */
  width: 156px;
  height: 156px;
  outline: none;
  border-radius: 100%;
  background-color: #bde0e8;
  display: flex;
  align-items: center;
  text-align: center;
  color:#0a4f78;
  /* margin-right: 105px; */
}
.custom-title span{
  display: inline-block;
  width: 150px;
  font-size: 22px;
  /* padding: 0px 3px; */
}
.custom-circle{
  width: 200px;
  height: 200px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border:1px solid #69d2f1; */
}
.custom-circle:hover{
  border:1px solid #8acce0;
}
.custom-title:hover{
  animation: changeColor 0.3s forwards;
  /* border:1px solid #69d2f1; */
  color:#fff;
}
@keyframes changeColor{
  0%{
    width: 156px;
    height: 156px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #8fdbec;
    opacity:0.3;
  }
  100%{
    width: 178px;
    height: 178px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #02bbe5;
    opacity:0.8;
  }
}