body {
  background-color: #eeeeee;
}
.banner {
  background: url(../images/banner-service.png) center center / cover no-repeat;
  height: 820px;
  position: relative;
}
.banner .top {
  padding-top: 2.0625rem;
}
.banner .top p {
  color: #fff;
  font-size: 0.525rem;
  line-height: 0.8875rem;
  /* text-align: center; */
}
.banner .top .mar1 {
  margin-top: 30px;
}
.banner .ser-ban-list {
  margin-top: 2.3125rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.banner .ser-ban-list ul {
  padding: 1rem 0 0 0;
}
.banner .ser-ban-list ul li {
  float: left;
  width: 20%;
  text-align: center;
  transition: all 0.5s;
}
.banner .ser-ban-list ul li a span {
  display: block;
  margin-top: 0.475rem;
  color: #ffffff;
  font-size: 0.3rem;
  transition: all 0.5s;
}
.banner .ser-ban-list ul li:hover {
  transform: translateY(8px);
}
.banner .ser-ban-list ul li:hover span {
  transform: translateY(5px);
}
.main .service {
  margin-top: 0.55rem;
}
.main .service .ser-l {
  float: left;
}
.main .service .ser-r {
  float: right;
}
.main .service span {
  font-size: 0.4rem;
  font-weight: bold;
}
.main .service span i {
  display: block;
  font-size: 0.225rem;
  color: #c5082c;
  padding-left: 0.375rem;
  position: relative;
  font-style: normal;
}
.main .service span i::before {
  content: "";
  width: 0.2rem;
  height: 3px;
  background: #c5082c;
  position: absolute;
  left: 0px;
  top: 0.125rem;
}
.main .service p {
  margin-top: 1.125rem;
  line-height: 0.3rem;
  font-size: 0.175rem;
}
.main .service ul {
  width: 100%;
  overflow: hidden;
  margin-top: 0.375rem;
}
.main .service ul li {
  float: left;
  width: 50%;
  margin-top: 0.25rem;
  transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  cursor: pointer;
}
.main .aa ul li {
  float: left;
  width: 25%;
  margin-top: 0.25rem;
  transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  cursor: pointer;
}
.main .service ul li p {
  width: 0.875rem;
  height: 0.875rem;
  /* border: 1px solid #c6c6c6; */
  border-radius: 0.25rem;
  text-align: center;
  line-height: 70px;
  margin-top: 0;
}
.main .service ul li span {
  display: block;
  color: #666666;
  margin-top: 0.225rem;
  font-size: 0.175rem;
  font-weight: normal;
}
.main .service ul li span em {
  font-style: normal;
}
.main .service ul li:hover {
  transform: translateX(5px);
}
.main .service a.ser-link {
  float: left;
  width: 42px;
  height: 42px;
  border: 1px solid #cacaca;
  border-radius: 100%;
  margin-top: 50px;
  position: relative;
  overflow: hidden;
}
.main .service a.ser-link::after {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../images/ser1-icon6.png) no-repeat center;
  position: absolute;
  bottom: 0px;
  right: 0px;
}
.main .service a.ser-link:hover {
  background: #e60012;
  border-color: #e60012;
}
.main .service a.ser-link:hover::after {
  -webkit-animation: iHover 0.6s linear;
  animation: iHover 0.6s linear;
  background: url(../images/ser1-icon6-2.png) no-repeat center;
  animation: move1 0.4s linear 1;
  transform: translateX(0%);
}
@keyframes move1 {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
.main .ser1 {
  background-color: #fff;
  padding: 0 0 0.775rem 0;
}
.main .ser1 .ser-l {
  width: 6.725rem;
  padding-left: 1.6rem;
  padding-top: 1.2125rem;
}
.main .ser1 .ser1p {
  margin-top: 0.39rem;
}
.main .ser1 .ser-l span {
  color: #222222;
}
.main .ser1 .ser-l p {
  color: #666666;
}
.main .ser1 .ser-r {
  width: 866px;
  /* padding-top: 0.475rem; */
}
.main .ser2 {
  background: url(../images/ser2-bg.png) no-repeat;
  padding: 0 0 0.775rem 0;
}
.main .ser2 .ser-l {
  width: 10.6125rem;
  padding: 0.5rem 0 0 1.39rem;
}
.main .ser2 .ser-r {
  width: 6.725rem;
  padding-top: 1.2125rem;
}
.main .ser2 .ser-r span {
  color: #fff;
}
.main .ser2 .ser-r p {
  color: #e5e5e5;
}
.main .ser3 {
  background: url(../images/service-img3-1.png) no-repeat 5.8rem 0rem;
  background-color: #fff;
  padding: 1.2125rem 0 1.27rem 0;
}
.main .ser3 .ser-l {
  width: 6.3875rem;
  padding-left: 1.6rem;
}
.main .ser3 .ser-l span {
  color: #222222;
}
.main .ser3 .ser-l p {
  color: #666666;
}
.main .ser3 .ser-l ul li {
  width: 50%;
}
.main .ser3 .ser-r {
  width: 733px;
  padding-top: 0.1125rem;
}
.main .ser4 {
  background: url(../images/ser2-bg.png) no-repeat;
  padding: 1.2125rem 0 0.775rem 0;
}
.main .ser4 .ser-l {
  width: 9.6125rem;
  padding: 0.5rem 0 0rem 0.8rem;
}
.main .ser4 .ser-r {
  width: 7.725rem;
}
.main .ser4 .ser-r span {
  color: #fff;
}
.main .ser4 .ser-r p {
  color: #e5e5e5;
}
.main .ser4 .ser-r ul li {
  width: 25%;
}
.main .ser5 {
  background-color: #fff;
  padding: 1.2125rem 0 0.775rem 0;
  margin-bottom: 1rem;
}
.main .ser5 .ser-l {
  width: 9.6125rem;
  padding: 0.5rem 0 0 2.075rem;
}
.main .ser5 .ser-r {
  width: 7.725rem;
  margin-top: 0.5rem;
}
.main .ser5 .ser-r span {
  color: #fff;
}
.main .ser5 .ser-r p {
  color: #e5e5e5;
}
.main .ser5 .ser-l ul li {
  width: 25%;
}
.main .ser5 .ser-l .color5 {
  color: #666666;
}