body {
  background-color: #f0f8fe;
}

/* 渗透测试服务内容 */
.service-con .list {
  margin: 50px auto 60px;
}

.service-con .list li {
  width: 380px;
  height: 310px;
  padding: 50px 80px;
  background-color: #fff;
  text-align: center;
  transition: 0.3s;
}

.service-con .list li img {
  width: 121px;
  height: 123px;
}

.service-con .list li p {
  font-size: 18px;
  margin-top: 20px;
}

.service-con .list li:hover {
  box-shadow: 0 0 15px #eee;
  transform: translateY(-10px);
}

/* 渗透测试服务原则 */
.service-principle {
  background: url('../img/stcspw_bg.png') no-repeat center;
  background-size: 100% 100%;
  height: 534px;
  text-align: center;
}

.service-principle img {
  margin-top: 50px;
}

/* 渗透测试服务范围 */
.service-range ul {
  margin: 50px auto 60px;
}

.service-range ul li {
  width: 300px;
  text-align: center;
  padding: 60px 100px;
  background-color: #fff;
  border-right: 1px dashed #eee;
}

.service-range ul li p {
  margin-top: 30px;
  font-size: 16px;
}

.service-range ul li:hover img {
  animation: move 1s;
}

@keyframes move {
  0% {
    transform: rotate(180deg);
  }

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

/* 渗透测试服务流程 */
.service-process {
  height: 622px;
  background-color: #fff;
  text-align: center;
  margin-bottom: 50px;
}

.service-process img {
  margin-top: 50px;
}

@media only screen and (max-width: 1440px) {
  .service-con .list li {
    width: 285px;
    height: 235px;
    padding: 20px 60px;
  }
  .service-con .list li img {
    transform: scale(0.9);
  }
  .service-con .list li p {
    font-size: 16px;
  }
  .service-principle {
    height: 400px;
  }
  .service-principle img {
    width: 900px;
    height: 250px;
  }
  .service-range ul li {
    width: 225px;
    padding: 40px 75px;
  }
  .service-range ul li img {
    transform: scale(0.9);
  }
  .service-process {
    height: 466px;
  }
  .service-process img {
    width: 900px;
    height: 315px;
  }
}

@media only screen and (max-width: 1280px) {
  .service-con .list li {
    width: 253px;
    height: 206px;
    padding: 25px 40px;
  }

  .service-con .list li img {
    width: 76px;
    height: 76px;
  }

  .service-con .list li p {
    font-size: 16px;
    margin-top: 15px;
  }

  .service-principle {
    height: 450px;
  }

  .service-principle img {
    width: 800px;
    height: 222px;
  }

  .service-range ul li {
    width: 200px;
    padding: 30px 50px;
  }

  .service-process {
    height: 410px;
  }

  .service-process img {
    width: 800px;
    height: 280px;
  }
}

@media only screen and (max-width: 1024px) {
  .service-con .list li {
    width: 201px;
    height: 164px;
    padding: 20px 30px;
  }

  .service-con .list li p {
    font-size: 14px;
    margin-top: 10px;
  }

  .service-principle {
    height: 400px;
  }

  .service-principle img {
    width: 636px;
    height: 177px;
  }

  .service-range ul li {
    width: 159px;
    padding: 30px;
  }

  .service-process {
    height: 350px;
  }

  .service-process img {
    width: 636px;
    height: 222px;
  }
}