/* section5 */
.section5 {
  padding: 0.56rem 0 0.6rem 0;
  overflow: hidden;
}

.section5 .tit-c .tx::after {
  left: 1.98rem;
}

.s5 {
  position: relative;
  z-index: 1;
}

.s5 ul {
  justify-content: flex-start;
  padding-top: 0.1rem;
}

.s5 a {
  display: block;
}

.s5 a .icon {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0 auto;
  padding: 0.1rem;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}

.s5 a .icon .y {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid 1px #1f6be6;
  border-radius: 50%;
  z-index: -1;
  animation: play2 6s linear forwards;
  animation-play-state: paused;
}

.s5 a .icon .y::before {
  content: '';
  position: absolute;
  top: 0.23rem;
  left: 0.05rem;
  width: 0.07rem;
  height: 0.07rem;
  border-radius: 50%;
  background-color: #1f6be6;
}

.s5 a .icon .y::after {
  content: '';
  position: absolute;
  top: 0.92rem;
  right: 0.06rem;
  width: 0.07rem;
  height: 0.07rem;
  border-radius: 50%;
  background-color: #1f6be6;
}

.s5 li.li2 a .icon .y::before {
  top: 0.52rem;
  left: -0.04rem;
}

.s5 li.li2 a .icon .y::after {
  top: 0.61rem;
  right: -0.04rem;
}

.s5 li.li3 a .icon .y::before {
  top: 0.76rem;
  left: 0;
}

.s5 li.li3 a .icon .y::after {
  top: 0.37rem;
  right: 0;
}

.s5 li.li4 a .icon .y::before {
  top: 0.23rem;
  left: 0.06rem;
}

.s5 li.li4 a .icon .y::after {
  top: 0.84rem;
  right: 0.04rem;
}

.s5 li.li5 a .icon .y::before {
  top: 0.52rem;
  left: -0.04rem;
}

.s5 li.li5 a .icon .y::after {
  top: 0.61rem;
  right: -0.04rem;
}

.s5 li.li6 a .icon .y::before {
  top: 0.75rem;
  left: 0;
}

.s5 li.li6 a .icon .y::after {
  top: 0.47rem;
  right: -0.04rem;
}

.s5 a .icon .tb {
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s;
}

.s5 a .icon .tb img {
  display: block;
  max-width: 0.56rem;
  max-height: 0.56rem;
}

.s5 a .icon .tb img:nth-child(2) {
  display: none;
}

.s5 a .tx {
  text-align: center;
  margin-top: 0.2rem;
}

.s5 a .tx h3 {
  font-size: 0.18rem;
  color: #1f6be6;
}

.s5 a .tx h3 b {
  font-family: syh-m;
  font-size: 0.3rem;
  padding-right: 0.04rem;
}

.s5 a .tx p {
  font-size: 0.16rem;
  color: #333;
  margin-top: 0.1rem;
}

.s5 li:hover a .icon .tb {
  background: #1f6be6;
}

.s5 li:hover a .icon .tb img:first-child {
  display: none;
}

.s5 li:hover a .icon .tb img:nth-child(2) {
  display: block;
}

.s5 li:hover a .icon .y {
  animation-iteration-count: infinite;
  animation-play-state: running;
}


.s5 .swiper-button {
  font-size: 0;
  opacity: 0.5;
  margin-top: 0;
  top: 30%;
  width: 0.5rem;
  height: 0.5rem;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.15rem auto;
  z-index: 9;
  cursor: pointer;
  transition: all 0.5s;
}

.s5 .swiper-button-prev {
  left: -0.3rem;
  background-image: url(../images/s1-p.png);
}

.s5 .swiper-button-next {
  right: -0.3rem;
  background-image: url(../images/s1-n.png);
}

.s5 .swiper-button:hover {
  opacity: 1;
}

li.swiper-slide {
    width: 20%;
    padding: .1rem 0;
}
@media screen and (max-width: 1400px) {
li.swiper-slide {
    width: 33%;
}
}

@media screen and (max-width: 1024px) {
li.swiper-slide {
    width: 50%;
}
}