* {
  margin: 0;
  padding: 0;
  font-family: PingFang SC;
}

/* 中间背景 - 开始 */
.section {
  height: 100%;
  width: 100%;
  background: unset;
  background: url(../img/networkSecurity/banner.png) 50% 50% no-repeat;
  background-size: cover;
}
.uk-flex-middle > .uk-align-left {
  position: absolute;
  left: 0px;
  top: 145px;
}

.uk-flex-middle > .uk-align-left > b {
  color: #0C235B;
  font-weight: 600;
  font-size: 56px;
}
.uk-flex-middle > .uk-align-left > .text {
  color: #0C235B;
  line-height: 32px;
  font-size: 16px;
  margin: 15px 0px;
  margin-bottom: 48px;
}
.uk-flex-middle > .uk-align-right {
  position: absolute;
  right: 0px;
  top: 0px;
}
.uk-flex-middle > .uk-align-right > img{
  width: 500px;
  height: 480px;
}
.section > div > .uk-h4 > a {
  background: linear-gradient(90deg, #00E0FF 0%, #00E0FF 14.99%, #0788FF 100%);
  border-radius: 2px;
  width: 112px;
  height: 44px;
  display: block;
  text-align: center;
  line-height: 44px;
  font-size: 18px;
  letter-spacing: 2px;
  margin-top: 28px;
}
.section > div > .uk-h4 {
  position: absolute;
  background: rgba(30, 38, 111, 0.35);
  width: 100%;
  height: 40px;
  line-height: 40px;
  bottom: 0;
  margin: 0;
  box-sizing: border-box;
}
.section > div > .uk-h4>.center{
  width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  font-size: 16px;
}
.section > div > .uk-h4 > .uk-flex {
  display: flex;
  align-items: center;
  padding-left: 36px;
}
.section > div > .uk-h4 >.center>span > .circle::after {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(90deg, #00E0FF 0%, #00E0FF 14.99%, #0788FF 100%);
  margin-right: 12px;
}
.section > div > .uk-h4 >.center>span.uk-align-right {
  margin-bottom: unset;
}
.section > div > .uk-h4>.center > span.uk-align-right > .time {
  margin-right: 12px;
}
.section > div > .uk-h4>.center > .circle > span {
  color: #fff;
  font-size: 18px;
}
.section > div > .uk-h4 >.center>.uk-flex{
  align-items: center;
}
.uk-align-left>.free{
  width: 112px;
  height: 44px;
  line-height: 44px;
  background: linear-gradient(90deg, #00E0FF 0%, #00E0FF 14.99%, #0788FF 100%);
  border-radius: 2px;
  text-align: center;
  position: relative;
}
.uk-align-left>.free::before{
  content: '';
  display: block;
  position: absolute;
  background: #008BF0;
  left: 0;
  top: 0;
  width: 0px;
  height: 100%;
  transition: width 0.5s;
  z-index: 2;
}
.uk-align-left>.free:hover::before{
  width: 100%;
  z-index: 2;
}
.uk-align-left>.free>a{
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 2px;
  text-decoration: none;
  z-index: 11;
  position: relative;
}
/* 中间背景 - 结束 */
/* 产品介绍 - 开始 */
/* new */
.uk-align-center {
  text-align: center;
  font-size: 32px;
  position: relative;
  color: #333333;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: 2px;
  width: 100%;
}
.uk-align-center::after {
  position: absolute;
  content: '';
  width: 64px;
  height: 4px;
  display: block;
  background: #008BF0;
  border-radius: 2px;
  left: 0;
  right: 0;
  margin: 0 auto;
  margin-top: 5px;
}
/* new */
.productBox {
  height: 256px;
  width: 240px;
  border-radius: 8px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 5;
  position: relative;
  box-shadow: 0px 0px 8px rgba(0, 50, 87, 0.1);

}
.productBox > div {
  width: 100%;
  padding-top: 30px;
  padding-bottom: 12px;
  box-sizing: border-box;
}
.productBox > div > span {
  display: block;
  width: 72px;
  height: 76px;
  margin: 0 auto;
  border-radius: 4px;
  text-align: center;
  background: url(../img/assetManagement.svg) 50% 50% no-repeat;
  background-color: #FFDFDF;
}
.productBox > .title{
  margin-top: unset;
  width: 100%;
  margin-bottom: 20px;
}
.productBox > .title::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  left: 0;
  right: 0;
  background: #F33A00;
  margin: auto;
  margin-top: 8px;
  cursor: pointer;
}
.productContent .product::after{
  content: '';
  display: block;
  height: 256px;
  width: 0px !important;
  background: #FF6D6D;
  border-radius: 8px;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 30px;
  margin: 0 auto;
  transition: all 0.3s;
  z-index: 2;
}
.product:hover::after{
  width: 240px !important;
  cursor: pointer;
  transition: all 0.3s;
}
.productOne {
  position: relative;
}
.productTwo {
  position: relative;
}
.productTwo::after{
  background: #5AD8C2 !important;
}
.productThree {
  position: relative;
}
.productThree::after {
  background: #008BF0 !important;
}
.productFour {
  position: relative;
}
.productFour::after{
  background: #FFBE5B !important;
}
.product:hover > .productBox>.icon > span {
  background-color: #FFFFFF;
}
.product:hover >.productBox> .title::after {
  background: #fff;
}
.product:hover >.productBox> .title {
  color: #FFFFFF;
}
.product:hover >.productBox> .text > span {
  color: #FFFFFF !important;
}
.productBox > .text > span {
  width: 180px;
  color: #777D8C;
  font-size: 12px;
  text-align: center;
  display: block;
  line-height: 24px;
  margin: 0 auto;
}
.product:hover  .text > span{
  color: #fff;
}
.uk-width-4-4 > div > .uk-width-1-4 {
  padding: 0;
}
.ip > div > span {
  background: url(../img/ip.svg) 50% 50% no-repeat;
  background-color: #DEFFF9;
}
.ip > .title::after {
  background: #5AD8C2;
}
.AssetDisposal > div > span {
  background: url(../img/AssetDisposal.svg) 50% 50% no-repeat;
  background-color: #CCEAFF;
}
.AssetDisposal > .title::after {
  background: #008BF0;
}
.baseline > div > span {
  background: url(../img/baseline.svg) 50% 50% no-repeat;
  background-color: #FFF1DC;
}
.baseline > .title::after {
  background: #FFBE5B;
}
.risk > div > span {
  background: url(../img/risk.svg) 50% 50% no-repeat;
  background-color: #FFF1DC;
}
.risk > .title::after {
  background: #FFBE5B;
}
.loophole > div > span {
  background: url(../img/loophole.svg) 50% 50% no-repeat;
  background-color: #CCEAFF;
}
.loophole > .title::after {
  background: #008BF0;
}
.security > div > span {
  background: url(../img/security.svg) 50% 50% no-repeat;
  background-color: #FFDFDF;
}
.operate > div > span {
  background: url(../img/operate.svg) 50% 50% no-repeat;
  background-color: #DEFFF9;
}
.operate > .title::after {
  background: #5AD8C2;
}
/* 产品介绍 - 结束 */
/* 为什么使用我们的产品 - 开始*/
.productText {
  margin-top: 0;
  text-align: right;
  /* width: 614px;
  height: 344px; */
}
.productText > li > span {
  display: inline-block;
  height: 44px;
  line-height: 44px;
  font-size: 18px;
  background: #FFFFFF;
  box-shadow: 7px 7px 0px -2px rgb(26 71 103 / 8%);
  margin-bottom: 16px;
  text-align: center;
  width: 348px;
}
.productText > li:nth-of-type(2) > span {
  width: 368px;
  margin-right: 24px;
}
.productText > li:nth-of-type(3) > span {
  width:386px;
  margin-right: 48px;
}
.productText > li:nth-of-type(4) > span {
  width: 422px;
  margin-right: 65px;
}
.productText > li:nth-of-type(5) > span {
  width: 466px;
  margin-right: 87px;
}
.productText > li:nth-of-type(6) > span {
  width: 512px;
  margin-right: 120px;
}
.riskPri{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 80px;
    height: 116px;
}
.rad-prg{
  position: relative;
  width: 80px;
  height: 80px !important;
  }
  .rad-prg>canvas{
    width: unset !important;
    height:unset !important;
  }
  .riskPri>.text{
    color: #333333;
    font-size: 18px;
    line-height: 28px;
  }
  .rad-con{
    position: absolute;
    z-index: 1;
    top:0;
    left: 0;
    width:80px;
    height: 80px;
    font-family: "microsoft yahei";
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .rad-con>.percentage{
    color: #000000;
    font-size: 16px;
    line-height: 24px;
  }
  .rad-con>p>img{
    display: block;
    width: 24px;
    height: 24px;
  }
.up{
  width:300px;
  height:530px;
  position: relative;
}
.up>img{
  position: absolute;
  bottom: 0;
  left: 0;

}
.up>img.column1{
  display: block;
  width: 94px;
  height: 175px;
  left: 20px;
  z-index: 5;
  opacity: 0;

}
.up>img.column2{
  display: block;
  bottom: 50px;
  width: 95px;
  height: 228px;
  left: 100px;
  z-index: 3;
  opacity: 0;

}
.up>img.column3{
  display: block;
  bottom: 109px;
  width: 95px;
  height: 270px;
  left: 190px;
  z-index: 2;
  opacity: 0;
}
.up.blockColumn > img.column1 {
  animation: column 0.5s linear both;
}
.up.blockColumn > img.column2 {
  animation: column 0.5s linear 0.4s both;
}
.up.blockColumn > img.column3 {
  animation: column 0.5s linear 0.9s both;
}
.up.blockColumn > img.column4 {
  animation: column 0.5s linear 1.4s both;
}
.up>img.column4{
  display: block;
  width: 226px;
  height: 403px;
  left: 20px;
  z-index: 9;
  opacity: 0;
  bottom: 140px;

}

/* 为什么使用我们的产品 - 结束*/
/* 产品特点- 开始 */
.trait>.uk-position-relative{
  margin: 0 auto;
  background:unset;
  height: 652px;
  padding-top: 88px;
  box-sizing: border-box;
  width: 1200px;
}
.trait .product {
  display: flex;
  height: 476px;
  justify-content: space-between;
}
.uk-accordion-title::before {
  background-image: unset !important;
}
.it > li {
  height: unset;
}
.it > li > a {
  display: inline-block;
  color: #333333 !important;
  font-weight: 600 ;
  font-size: 18px ;
  line-height: 22px ;
  display: flex;
  align-items: center;
  position: relative;
}
.it > li > a::before {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  background: #008BF0;
  border-radius: 50%;
  left: 0;
  top: 0px;
  float: unset;
  margin-right: 12px;
}
.it > li > a::after {
  position: absolute;
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(../img/open.png) 50% 50% no-repeat;
  background-size: 100% 100%;
  left: 16px;
}
.it > li.uk-open > a::after {
  position: absolute;
  content: '';
  display: inline-block;
  width: 15px;
  height: 2px;
  background: url(../img/close.png) 50% 50% no-repeat;
  background-size: 100% 100%;
  left: 16px;
}
.it > li.uk-open > a {
  color: #008BF0 !important;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
}
.itList {
  width: 406px;
  height: 216px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.itList::before {
  position: absolute;
  content: '';
  display: block;
  width: 1px;
  height: 100%;
  background: #008BF0;
  left: 24px;
}
.itList > li {
  color: #333333;
  font-size: 14px;
  line-height: 22px;
  padding-left: 16px;
  display: flex;
  align-items: center;
}
.administration > li:nth-of-type(2) {
  padding-bottom: 20px;
}
.administration > li:nth-of-type(n+3) {
  color: #767B89;
}
.itList > li:nth-of-type(3) {
  padding-bottom: 20px;
}
.administration > li:nth-of-type(3) {
  padding-bottom: unset;
}
.itList > li:nth-of-type(n+4) {
  color: #767B89;
}
.itList > li:nth-of-type(-n+4)::before {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  background: url(../img/nice.png) 50% 50% no-repeat;
  background-size: 100% 100%;
  margin-right: 10px;
}
.itList > li:nth-of-type(n+4)::before {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  background: url(../img/unqualified.png) 50% 50% no-repeat;
  background-size: 100% 100%;
  margin-right: 10px;
}
.administration > li:nth-of-type(-n+3)::before {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  background: url(../img/nice.png) 50% 50% no-repeat;
  background-size: 100% 100%;
  margin-right: 10px;
}
.administration > li:nth-of-type(n+3)::before {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  background: url(../img/unqualified.png) 50% 50% no-repeat;
  background-size: 100% 100%;
  margin-right: 10px;
}
.admini {
  height: 216px;
}
.administration {
  height: 150px;
}
.first {
  margin: 0 auto;
}
.first > img {
  display: block;
  width: 100%;
  height: 100%;
}
.private {
  justify-content: space-between;
}
.uk-light .uk-dotnav > .uk-active > * {
  border-color: transparent;
  width: 64px;
  height: 8px;
  border-radius: 4px;
  background: #008BF0;
}
.uk-light .uk-dotnav > * > * {
  border-color: rgba(255, 255, 255, 0.9);
  width: 20px;
  height: 8px;
  border-radius: 4px;
  background: #D2E7FF;
}
/* 产品特点- 结束 */
/* 方案 - 开始 */
.privateText {
  box-sizing: border-box;
}
.privateText>.uk-width-1-1{
  color: #333333;
  font-weight: 600;
  font-size: 42px;
  line-height: 48px;
  width: 100%;
}
.privateText>.blue{
  color: #008BF0;
  font-size: 32px;
  line-height: 48px;
  font-weight: 600;
  width: 100%;
}
.privateText > .uk-width-1-1 > span {
  display: flex;
  align-items: center;
}
.privateText > .uk-width-1-1 > .siyou::before {
  content: '';
  display: block;
  width: 58px;
  height: 58px;
  margin-right: 32px;
  background: url(../img/siyou.png) 50% 50% no-repeat;
  background-size: 100% 100%;
}
.privateText > .uk-width-1-1 > .yun::before {
  content: '';
  display: block;
  width: 58px;
  height: 58px;
  margin-right: 32px;
  background: url(../img/yun.png) 50% 50% no-repeat;
  background-size: 100% 100%;
}
.privateText > .blue > span {
  display: block;
  padding-top: 26px;
  width: 395px;
  text-align: left;
}
.privatList {
  width: 388px;
  height: 164px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.privatList > li {
  color: #333333;
  font-size: 16px;
  line-height: 32px;
  display: flex;
  align-items: center;
  position: relative;
}
.privatList > li::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  background: #008BF0;
  border-radius: 50%;
  margin-right: 10px;
}
.privatList > li::after {
  content: '';
  position: absolute;
  display: block;
  width: 16px;
  height: 16px;
  background: url(../img/whiteNice.png) 50% 50% no-repeat;
  background-size: 100% 100%;
  left: 4px;
}
.privateImg {
  width: 736px;
  height: 388px;
}
.uk-position-small > .uk-dotnav > li {
  font-size: 24px;
  line-height: 48px;
  color: #C9CACB;
  cursor: pointer;
}
.uk-position-small > .uk-dotnav > .uk-active {
  color: #008BF0;
  font-weight: bold;
  cursor: pointer;
}
.uk-position-small > .uk-dotnav > li:hover {
  color: #008BF0;
  text-decoration: underline;
}
.cloudList > li::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  background: #D9ECFF;
  border: 1px dashed #008BF0;
  border-radius: 50%;
  margin-right: 10px;
  box-sizing: border-box;
}
.cloudList > li::after {
  content: '';
  position: absolute;
  display: block;
  width: 16px;
  height: 16px;
  background: url(../img/blueNice.png) 50% 50% no-repeat;
  background-size: 100% 100%;
  left: 4px;
}
/* 方案 - 结束 */
/* 场景 - 开始 */
.sceneBox {
  height: 432px !important;
  position: relative;
}
.scenebackgroud {
  width: 100%;
  height: 256px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0px;
}
.scenebackgroud > .line {
  position: absolute;
  content: '';
  display: block;
  width: 100%;
  border: 2px dashed #008BF0;
  top: 50%;
}
.scenebackgroud > .uk-h4 {
  color: #333333;
  font-weight: 500;
  font-size: 32px;
  position: relative;
}
.scenebackgroud > .uk-h4::after {
  position: absolute;
  content: '';
  width: 64px;
  height: 4px;
  display: block;
  background: #008BF0;
  border-radius: 2px;
  left: 0;
  right: 0;
  margin: 0 auto;
  margin-top: 5px;
}
.sceneCenter {
  width: 1036px;
  height: 164px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.sceneList::after {
  left: 0;
}
.sceneList::before {
  right: 0;
}
.sceneList::before,
.sceneList::after {
  position: absolute;
  content: '';
  display: block;
  top: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: auto 0;
  border: 1px solid #008BF0;
  background-color: #fff;
  z-index: 3;
}
.sceneCenter > .line {
  position: absolute;
  content: '';
  display: block;
  width: 100%;
  bottom: 0;
  top: 0;
  margin: auto 0;
  border-bottom: 2px dashed #008BF0;
  height: 1px;
  box-sizing: border-box;
}
.sceneList {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0;
  padding: 0 18px;
}
/* 场景项 hover 效果 */
.sceneList .sceneListBox {
  height: 100%;
  position: relative;
}

.sceneList .sceneListBox .wrapper {
    position: relative;
    height: 124px;
    width: 107.39px;
    margin: 0 auto;
}

.sceneList .sceneListBox .wrapper .icon {
    overflow: hidden;
}

.sceneList .sceneListBox .wrapper .icon .bg,
.sceneList .sceneListBox .wrapper .icon .fg {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    overflow: hidden;
}

.sceneList .sceneListBox .wrapper .icon .fg {
    width: 100%;
    height: 100%;
    z-index: 3;
}

.sceneList .sceneListBox .wrapper .icon .fg,
.sceneList .sceneListBox .wrapper .icon .bg,
.sceneList .sceneListBox .wrapper .icon .bg::before,
.sceneList .sceneListBox .wrapper .icon .bg::after {
    clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

.sceneList .sceneListBox .wrapper .icon .bg {
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #008BF0;
    transition: all .3s;
}

.sceneList .sceneListBox .wrapper .icon .bg::before,
.sceneList .sceneListBox .wrapper .icon .bg::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.sceneList .sceneListBox .wrapper .icon .bg::before {
    background-color: #008BF0;
    width: 0;
    height: 0;
    z-index: 3;
}

.sceneList .sceneListBox .wrapper .icon .bg::after {
    background-color: #fff;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    z-index: 2;
}

.sceneList .sceneListBox .wrapper .icon.hvr {
    z-index: 9;
    height: 0;
    width: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transition: all .3s;
}

.sceneList .sceneListBox .wrapper .icon.hvr .bg::before {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
}

.sceneList .sceneListBox .wrapper .icon.hvr .bg::after {
    background-color: #008BF0
}

.sceneList .sceneListBox:hover .wrapper .icon.hvr {
    width: 100%;
    height: 100%;
}

.sceneList .sceneListBox .blockScene {
  width: 124px;
  height: 144px;
}

.sceneList .sceneListBox.asset .wrapper .icon .fg {
    background: url(../img/bassets.svg) 50% 50% no-repeat;
}

.sceneList .sceneListBox.asset .wrapper .icon.hvr .fg {
    background: url(../img/wassets.svg) 50% 50% no-repeat;
}

.sceneList .sceneListBox.project .wrapper .icon .fg {
    background: url(../img/bproject.svg) 50% 50% no-repeat;
}

.sceneList .sceneListBox.project .wrapper .icon.hvr .fg {
    background: url(../img/woperation.svg) 50% 50% no-repeat;
}

.sceneList .sceneListBox.operation .wrapper .icon .fg {
    background: url(../img/boperation.svg) 50% 50% no-repeat;
}

.sceneList .sceneListBox.operation .wrapper .icon.hvr .fg {
    background: url(../img/winspection.svg) 50% 50% no-repeat;
}

.sceneList .sceneListBox.event .wrapper .icon .fg {
    background: url(../img/bsafety.svg) 50% 50% no-repeat;
}

.sceneList .sceneListBox.event .wrapper .icon.hvr .fg {
    background: url(../img/wauxiliary.svg) 50% 50% no-repeat;
}

.sceneList .sceneListBox.patrol .wrapper .icon .fg {
    background: url(../img/binspection.svg) 50% 50% no-repeat;
}

.sceneList .sceneListBox.patrol .wrapper .icon.hvr .fg {
    background: url(../img/wproject.svg) 50% 50% no-repeat;
}
.sceneList .sceneListBox.auxiliary .wrapper .icon .fg {
  background: url(../img/bauxiliary.svg) 50% 50% no-repeat;
}

.sceneList .sceneListBox.auxiliary .wrapper .icon.hvr .fg {
  background: url(../img/wsafety.svg) 50% 50% no-repeat;
}

.sceneList .sceneListBox .blockScene > div>span {
  display: inline-block;
  width: 107.39px;
  height: 124px;
  position: absolute;
  background: url(../img/bassets.svg) 50% 50% no-repeat;
  top: 0;
  left: 0;
}
.sceneList .sceneListBox .blockScene .project > span {
  background: url(../img/bproject.svg) 50% 50% no-repeat;
  position: relative;
}
.sceneList .sceneListBox .blockScene .operation > span {
  background: url(../img/boperation.svg) 50% 50% no-repeat;
}
.sceneList .sceneListBox .blockScene .event > span {
  background: url(../img/bsafety.svg) 50% 50% no-repeat;
}
.sceneList .sceneListBox .blockScene .patrol > span {
  background: url(../img/binspection.svg) 50% 50% no-repeat;
}
.sceneList .sceneListBox .blockScene .auxiliary > span {
  background: url(../img/bauxiliary.svg) 50% 50% no-repeat;
}
.sceneList .sceneListBox .hideScene > div > .operation>span {
  background: url(../img/wsafety.svg) 50% 50% no-repeat;
}
.sceneListBox{
  position: relative;
}
.hideScene{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 0px !important;
  height: 0px !important;
  overflow: hidden;
  transform: translate(-50%, -50%);
  transition:all 5s
}
/* .sceneListBox:hover .hideScene{ */
/*   width: 100% !important; */
/*   height: 100% !important; */
/*   /\* transform: translate(-50%, -50%); *\/ */
/*   cursor: pointer; */
/* } */
.hideScene > .blockScene >.bsafety::before{
  content: '';
  display: block;
  width: 107.39px;
  height: 124px;
  background-color: #008BF0;
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  overflow: hidden;
  position: relative;
  transition:all 0.4s
}
.hideScene >.blockScene>.bsafety::before{
  content: '';
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  height: 122px;
  width: 105.39px;
  background: #008BF0;
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.sceneList > .sceneListBox > .hideScene >div>div>span {
  display: inline-block;
  width: 107.39px;
  height: 124px;
  position: absolute;
  background: url(../img/wassets.svg) 50% 50% no-repeat;
  top: 0;
  left: 0;
}
.sceneList > .sceneListBox > span {
  color: #000;
  font-size: 16px;
  position: absolute;
  left: 0;
  right: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* 场景 - 结束 */
/* 公司资质 - 开始 */
.qualifications {
  height: 457px;
  background: url(../img/customer.png) 50% 50% no-repeat;
  background-size: 100% 100%;
}
.company {
  width: 180px;
  height: 128px;
  background: #FFFFFF;
  box-shadow: 0px 0px 10px rgba(15, 21, 34, 0.1);
  border-radius: 4px;
  margin: 0 auto;
}
.company > img{
  width: 80px;
  height: 80px;
}
.company > span {
  display: block;
  width: 80px !important;
  height: 80px;
  background: url(../img/ios.png) 50% 50% no-repeat;
  background-size: contain;
  margin: 0 auto;
}
ul > div > li:nth-of-type(4) > div > span {
  display: block;
  width: 80px !important;
  height: 80px;
  background: url(../img/CNITSEC.png) 50% 50% no-repeat;
  background-size: 65px 62px;
}
ul > div > li:nth-of-type(5) > div > span {
  display: block;
  width: 80px !important;
  height: 80px;
  background: url(../img/HTE.png) 50% 50% no-repeat;
  background-size: 49px 62px;
}
ul > div > li:nth-of-type(6) > div > span {
  display: block;
  width: 80px !important;
  height: 80px;
  background: url(../img/CMMI.png) 50% 50% no-repeat;
  background-size: 61px 53px;
}
ul > div > li:nth-of-type(7) > div > span {
  display: block;
  width: 80px !important;
  height: 80px;
  background: url(../img/CNITSEC.png) 50% 50% no-repeat;
  background-size: 65px 62px;
}
ul > div > li:nth-of-type(8) > div > span {
  display: block;
  width: 104px !important;
  height: 80px;
  background: url(../img/CNYD.png) 50% 50% no-repeat;
  background-size: 100% 70px;
}
.company > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.company > div > span {
  color: #99AEC2;
  font-size: 12px;
}
/* 公司资质 - 结束 */
/* 我们的客户 - 开始 */
.customer {
  margin: 88px 0;
}
.customerBox {
  height: 400px;
  width: 1200px;
  margin: 0 auto;
}
.customerBox>.customerList{
  width: 992px;
  height: 305px !important;
}
.customerBox > p {
  color: #333333;
  font-weight: 500;
  font-size: 32px;
  line-height: 48px;
  position: relative;
}
.customerBox > p::after {
  position: absolute;
  content: '';
  width: 64px;
  height: 4px;
  display: block;
  background: #008BF0;
  border-radius: 2px;
  left: 0;
  right: 0;
  margin: 0 auto;
  margin-top: 5px;
}
.customerList {
  width: 992px!important;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-top: 0px;
}
.customerList > li {
  width: 20%;
  height: 79px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.customerList > li > img {
  display: block;
  width: 174px;
  height: 64px !important;
}
.customerList > li:not(:nth-of-type(5n+5))::after {
  content: '';
  width: 1px;
  height: 100%;
  background-color: #F2F5FA;
  position: absolute;
  right: 0;
  top: 0;
}
.customerList > li:not(:nth-of-type(n+16)):before {
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  background-color: #F2F5FA;
  left: 0;
}
/* 我们的客户 - 结束 */
/* 为什么使用我们的产品 */
@keyframes column{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
/* Authored by Saltb0rn */
.bg-wrapper {
    height: 100%;
    position: absolute;
    left: 50%;
    margin-left: -1340px;
    width: 2680px;
}
@media screen and (max-width: 1440px){
  .section {
    background-position: center center;
}

}
@media screen and (max-width: 768px){
.section {
  padding: 0 16px;
}

}