@keyframes go{
  0%{transform: translateX(0);}
  50%{transform: translateX(10px);}
  100%{transform: translateX(0);}
}
@keyframes up{
  0%{transform: translateY(0);}
  50%{transform: translateY(-8px);}
  100%{transform: translateY(0);}
}
@keyframes roted{
  0%{transform: rotate(0deg);}
  100%{transform: rotate(360deg);}
}



.index-banner{width: inherit; height: 100vh; position: relative; width: 100%; height: 100vh; overflow: hidden; /* position: fixed; */}
.index-banner .swiper-wrapper{left: 0; top: 0;}
.index-banner .swiper-slide{position: relative;}
.index-banner .swiper-slide::after{content: ""; display: block; position: absolute; bottom: 0; width: inherit; height: 100px; background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent); z-index: 1;}
.index-banner .swiper-slide .container{position: absolute; left: 50%; transform: translateX(-50%); bottom: 5%; z-index: 2; max-width: 100%;}
.index-banner .swiper-slide .container h3{position: relative; z-index: 2; color: white; white-space: nowrap; text-shadow: 0 0 5px black;}
.index-banner .swiper-slide a{width: inherit;}
.index-banner .swiper-slide a:hover img{transform: scale(1);}
.index-banner .swiper-slide img{width: inherit;object-fit: cover;}

.index-banner > .container{position: absolute; bottom: 5%; height: auto; left: 50%; transform: translateX(-50%); z-index: 10; text-align: right;width: 100%;}
.index-banner > .container .fraction{display: inline-block; position: relative; z-index: 10; color: white; margin-bottom: 10px;}
.index-banner > .container .fraction span{font-family: ArialMT,sans-serif; font-size: 16px; color: #ffffff; letter-spacing: 0; line-height: 28px;}
.index-banner > .container .fraction span:first-child{font-size: 32px;}
.index-banner > .container .swiper-pagination{right: 0%; bottom: 0; height: 12px;width:100% }
.index-banner > .container .swiper-pagination span{margin-left: 10px; height: 12px; width: 12px; border-radius: 8px; background: white; opacity: 1;}
.index-banner > .container .swiper-pagination .swiper-pagination-bullet-active{background: #eced9d;}
.index-banner .swiper-slide img {width: 100%;}


.index-banner .swiper-slide .sc{transform: scale(1);transition:linear 5s;}
.index-banner a .sc{transform: scale(1.1); *//* height: 100%;}


@media (max-width: 1200px) {
.index-banner {  height: auto;  }
.index-banner .swiper-slide img {width: 100%;}
.index-banner > .container .swiper-pagination {  right: unset;  left: 50%;  width: max-content;  transform: translateX(-50%);  }
.index-banner > .container .swiper-pagination span:first-child {  margin-left: 0;  }
}

@media (max-width: 992px) {
.index-banner .swiper-slide img {}
    .index-banner{margin-top:0px;}
.index-banner > .container .swiper-pagination {  right: unset;  left: 50%;  width: max-content;  transform: translateX(-50%);  }
.index-banner > .container .swiper-pagination span:first-child {  margin-left: 0;  }
}

@media(max-width: 768px) {
.index-banner{height:auto;}
    .index-banner{margin-top:0px;}
.index-banner .swiper-slide .container h3 {  bottom: 10px;  font-size: 22px;  max-width: 100%;  margin-left: auto;  margin-right: auto;  }
.index-banner > .container {  width: 100%;  }
.index-banner > .container .swiper-pagination {  right: unset;  left: 50%;  width: max-content;  transform: translateX(-50%);  }
.index-banner > .container .swiper-pagination span:first-child {  margin-left: 0;  }
}