/* 轮播样式图 */
#banner {
  width: 100%;
  height: 523px;
  overflow: hidden;
  position: relative;
}

.swiper-container {
  height: 523px;
  position: absolute;
}

#banner img {
  width: inherit;
  height: inherit;
}

.swiper-slide .detail {
  height: 90px;
  background: rgba(0, 0, 0, .7);
  position: absolute;
  width: 100%;
  bottom: 0;
  color: #fff;
  opacity: 0;
  transition: opacity .3s .3s;
}

.swiper-slide-active .detail {
  opacity: 1;
}

.swiper-slide .detail h3 {
  width: 100%;
  margin: 15px auto 0;
  text-align: center;
}

.swiper-slide .detail p {
  width: 100%;
  margin: 5px auto 0;
  text-align: center;
}

.swiper-slide .detail p span {
  width: 100%;
  display: block;
}

/**/
.effect1 img {
  transform: scale(1.25, 1.25) translate(10%, 10%);
  transform: scale(1.1, 1.1) translate(4.545%, 4.545%);
  /*tr     =    (sc-1)/2sc*100%              */
  /* --1.25       0.25/2.5*100%=10%          */

}

.leftUp img {
  -webkit-animation-name: leftUp;
  animation-name: leftUp;
}

@-webkit-keyframes leftUp {
  0% {
    transform: scale(1.1, 1.1) translate(4.545%, 4.545%);
  }

  100% {
    transform: scale(1.1, 1.1) translate(-4.545%, -4.545%);
  }
}

@keyframes leftUp {
  0% {
    transform: scale(1.1, 1.1) translate(4.545%, 4.545%);
  }

  100% {
    transform: scale(1.1, 1.1) translate(-4.545%, -4.545%);
  }
}

.moveRight img {
  -webkit-animation-name: moveRight;
  animation-name: moveRight;
}

@-webkit-keyframes moveRight {
  0% {
    transform: scale(1.1, 1.1) translate(-4.545%, 0);
  }

  100% {
    transform: scale(1.1, 1.1) translate(4.545%, 0);
  }
}

@keyframes moveRight {
  0% {
    transform: scale(1.1, 1.1) translate(-4.545%, 0);
  }

  100% {
    transform: scale(1.1, 1.1) translate(4.545%, 0);
  }
}

.moveDown img {
  -webkit-animation-name: moveDown;
  animation-name: moveDown;
}

@-webkit-keyframes moveDown {
  0% {
    transform: scale(1.1, 1.1) translate(0, -4.545%);
  }

  100% {
    transform: scale(1.1, 1.1) translate(0, 4.545%);
  }
}

@keyframes moveDown {
  0% {
    transform: scale(1.1, 1.1) translate(0, -4.545%);
  }

  100% {
    transform: scale(1.1, 1.1) translate(0, 4.545%);
  }
}

.centerBig img {
  -webkit-animation-name: centerBig;
  animation-name: centerBig;
}

@-webkit-keyframes centerBig {
  100% {
    transform: scale(1.1, 1.1);
  }
}

@keyframes centerBig {
  100% {
    transform: scale(1.1, 1.1);
  }
}

.rightDownBig img {
  -webkit-animation-name: rightDownBig;
  animation-name: rightDownBig;
}

@-webkit-keyframes rightDownBig {
  100% {
    transform: scale(1.1, 1.1) translate(4%, 4%);
  }
}

@keyframes rightDownBig {
  100% {
    transform: scale(1.1, 1.1) translate(4%, 4%);
  }
}

.swiper-slide img {
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
}

.swiper-pagination {
  bottom: 30px;
  right: 20px;
}

.swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  background: #fff;
  margin: 0 5px;
  border-radius: 50% !important;
}