nav ul,
ul,
li {
  list-style: none;
}

#banner {
  width: 100%;
  height: 337px;
  overflow: hidden;
  position: relative;
  /* margin-top: 50px; */
  /* margin-left: 150px; */
  border-radius: 20px;
  box-shadow: 5px 5px 10px #666;
}

.swiper-container {
  width: 100%;
  height: 100%;
  position: absolute;
  /* width: 1750px;
        height: 523px;
        position: absolute;
        left: -875px;
        margin-left: 50%; */
}

.swiper-slide .detail {
  height: 100%;
  width: 50%;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  opacity: 1;
  /* transition: opacity 1.5s 0.5s; */
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}

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

.swiper-slide .detail h3 {
  width: 100%;
  margin: 15px auto 0;
  opacity: 0;
  transition: opacity 1.5s 0.5s;
}

.swiper-slide .detail .p1,
.swiper-slide .detail .p2,
.swiper-slide .detail .p3 {
  width: 100%;
  margin: 5px auto 0;
  opacity: 0;
  transition: opacity 1.5s 0.5s;
}

.swiper-slide-active .detail h3 {
  opacity: 1;
  margin-left: 300px;
  animation: delayedLeft 0.5s both;
  animation-delay: 0.5s;
}

@keyframes delayedLeft {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
    margin-left: 30px;
  }
}

.swiper-slide-active .detail .p1,
.swiper-slide-active .detail .p2,
.swiper-slide-active .detail .p3 {
  opacity: 1;
  margin-left: 300px;
}
.swiper-slide-active .detail .p1{
  animation: delayedLeft2 0.7s both;
  animation-delay: 0.7s;
}
.swiper-slide-active .detail .p2{
  animation: delayedLeft2 0.9s both;
  animation-delay: 0.9s;
}
.swiper-slide-active .detail .p3{
  animation: delayedLeft2 1.1s both;
  animation-delay: 1.1s;
}

@keyframes delayedLeft2 {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
    margin-left: 30px;
  }
}

.swiper-slide .detail p span {
  width: 70%;
  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 {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
}

.swiper-pagination-bullet {
  width: 75px !important;
  height: 80px !important;
  border-radius: 0% !important;
  background: #fff !important;
  opacity: 1 !important;
  /* margin: 0 5px; */
}
.swiper-pagination-custom{
  bottom: 0 !important;
}

.topclick {
  width: 100%;
  overflow: hidden;
  /* margin-top: 50px; */
  /* margin-left: 150px; */
  margin-bottom: 20px;
  height: 80px;
  position: relative;
  display: inline-block;
}
.iconImg{
  width: 100%;
  height: 100%;
}
.ispreload,.ispreloadV2{
  position: absolute;
  width: 800px;
  height: 50px;
  line-height: 50px;
  top: -130px;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  color: #FFF;
  z-index: 2;
  font-size: 50px;
  text-shadow: 2px 2px 5px #333;
}
.ispreloadV2{
  color: rgb(235, 235, 235);
  top: 40px;
  font-size: 30px;
  text-align: center;
  text-shadow: 2px 2px 5px #333;
}