#banner #swiper1 .swiper-slide img {
  /* width: 100%;
	animation:banner 30s;
	animation-iteration-count:infinite;
	-webkit-animation:banner 30s; 
	-webkit-animation-iteration-count:infinite; */
}
@keyframes banner {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes banner {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
#banner #swiper1 .swiper-slide .swipertext {
  position: absolute;
  top: 22.5%;
  left: 13.75%;
  padding-right: 46px;
  z-index: 1;
}

#banner #swiper1 .swiper-slide .swipertext h1 {
  font-size: 60px;
  font-weight: bold;
  color: #ffffff;
  line-height: normal;
}

#banner #swiper1 .swiper-slide .swipertext h1 span {
  font-weight: normal;
}

#banner #swiper1 .swiper-slide .swipertext h2 {
  font-size: 25px;
  font-weight: inherit;
  color: #ffffff;
  margin-top: 40px;
  margin-bottom: 104px;
}

#banner #swiper1 .swiper-slide .swipertext a {
  font-size: 14px;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 17px 59px;
  transition: all 0.5s;
}

#banner #swiper1 .swiper-slide .swipertext a:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

#swiper1 #sb1 {
  top: 89.7%;
  left: -34.3%;
}

#swiper1 .swiper-pagination-bullet-active {
  background-color: #ffffff;
  width: 16px;
  height: 16px;
  margin: 0 7px;
}

#swiper1 .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  margin: 0 7px;
  border: 1px solid #ffffff;
}

#about {
  position: relative;
}

#about .down {
  display: flex;
}

#about .about {
  background-color: #f7f7f7;
  flex-basis: 56.77%;
}

#about .aboutin {
  margin: 122px 166px 442px 264px;
}

#about .aboutin h1 {
  margin-top: 47px;
  font-size: 30px;
  color: #333333;
  line-height: 1.5;
}

#about .aboutin #ablin {
  width: 40px;
  height: 3px;
  background-color: #028cd7;
  margin: 40px 0;
}

#about .aboutin p {
  font-size: 14px;
}

#about .aboutin .aboutdown {
  margin-top: 80px;
  max-width: 100%;
}

#about .honor {
  background-color: #e6e6e6;
  background-image: url(../images/honorimg.png);
  background-position: top right;
  background-repeat: no-repeat;
  flex-basis: 43.23%;
}

#about .honorin {
  margin: 120px 0 0 118px;
}

#about .honorin h1 {
  color: #333333;
  font-size: 18px;
}

#about .honorin img {
  margin: 22px 0 50px;
}

#about .honorin p {
  color: #666666;
  font-size: 14px;
}

#about .honorin a {
  margin-top: 84px;
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url(../images/arrow.png);
}

#about .honorin a:hover {
  background-image: url(../images/arrowb.png);
}

#about .top {
  position: absolute;
  left: 264px;
  bottom: 0;
}

#about .top img {
  max-width: 100%;
}

#about .top a {
  position: absolute;
  left: 0px;
  bottom: 0;
  width: 556px;
  height: 235px;
  background-image: url(../images/learnmore.png);
}

#about .top a:hover {
  background-image: url(../images/learnmoreh.png);
}

#product {
  background-image: url(../images/productbg.png);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#product .title {
  padding: 104px 0 64px;
  margin: 0 auto;
}

#swiper2 {
  max-width: 1392px;
}

#swiper2 {
  background-color: #cccccc;
}

#product .productbunner {
  position: relative;
  margin-bottom: 138px;
}

#product .swiper-slide a {
  display: inline-block;
  background-color: #f6f6f7;
  text-align: center;
}

#product .swiper-slide a img {
  max-width: 100%;
  overflow: hidden;
  transition: all 0.5s;
}

#product .swiper-slide a:hover > img {
  transform: scale(1.1);
}

#product .swiper-slide p {
  color: #333333;
  padding: 27px 0;
}

#product #bt1,
#product #bt2 {
  width: 64px;
  height: 104px;
  background-size: 64px 104px;
  top: 42%;
  outline: none;
}

#product #bt1 {
  background-image: url(../images/prev.png);
  left: 12vw;
  transition: all 0.5s;
}

#product #bt1:hover {
  background-image: url(../images/prev.png);
  left: 220px;
}

#product #bt2 {
  background-image: url(../images/next.png);
  right: 12vw;
  transition: all 0.5s;
}

#product #bt2:hover {
  background-image: url(../images/next.png);
  right: 220px;
}

#news {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#news .title {
  padding: 104px 0 64px;
  margin: 0 auto;
}

#news .newsin {
  margin: 0 auto 104px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 72.5%;
}

#news .newsbox {
  width: 23vw;
}

#news .newsbox:hover > .lin {
  width: 100%;
}

#news .lin {
  width: 32px;
  height: 5px;
  background-color: #028cd7;
  margin-bottom: 24px;
  transition: all 0.5s;
}

#news a {
  display: inline-block;
  margin-top: 80px;
  width: 40px;
  height: 40px;
  background-image: url(../images/arrow.png);
}

#news a:hover {
  background-image: url(../images/arrowb.png);
}

#contact {
  height: 400px;
  background-image: url(../images/contacebg.png);
}

#contact .contactin {
  padding: 90px 0 0 264px;
}

#contact .contactin h1 {
  font-size: 36px;
  color: #ffffff;
}

#contact .contactin p {
  font-size: 14px;
  color: #ffffff;
  margin: 20px 0 70px;
}

#contact .contactin a {
  font-size: 14px;
  color: #ffffff;
  background-color: #028cd7;
  padding: 17px 59px;
  transition: all 0.5s;
}

#contact .contactin a:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

@media only screen and (max-width: 1440px) {
  #banner #swiper1 .swiper-slide .swipertext h2 {
    margin-bottom: 65px;
  }
  #about .aboutin {
    margin-left: 118px;
  }
  #about .top {
    left: 118px;
  }
  #about .about,
  #about .honor {
    flex-basis: 50%;
  }
  #product #bt1,
  #product #bt2 {
    display: none;
  }
  #contact .contactin {
    padding-left: 118px;
  }
}

@media only screen and (max-width: 1320px) {
  #banner {
    margin-top: 9vw;
  }
  #banner #swiper1 .swiper-slide .swipertext h1 {
    font-size: 4vw;
  }
  #banner #swiper1 .swiper-slide .swipertext h2 {
    font-size: 1.5vw;
    margin: 3.5vh 0;
  }
  #banner #swiper1 .swiper-slide .swipertext a,
  #swiper1 #sb1 {
    display: none;
  }
  #about .down {
    flex-wrap: wrap;
  }
  #about .about,
  #about .honor {
    flex-basis: 100%;
  }
  #about .aboutin {
    margin: 80px 9vw;
  }
  #about .honorin {
    margin: 80px 9vw;
  }
  #about .top {
    position: static;
  }
  .newsin div:last-child {
    display: none;
  }
  #news .newsbox {
    width: 33vw;
  }
  #contact .contactin {
    padding: 90px 9vw;
  }
  #contact .contactin p {
    margin: 5vw 0;
  }
}

@media only screen and (max-width: 768px) {
  #banner {
    margin-top: 0vw;
  }
  #banner #swiper1 .swiper-slide img {
    width: 100%;
    height: 210px;
  }
}
@media only screen and (max-width: 500px) {
  #banner {
    margin-top: 0vw;
  }
  #banner #swiper1 .swiper-slide img {
    width: 100%;
    height: 210px;
  }
}

@media only screen and (max-width: 700px) {
  #about .honor {
    background-image: none;
  }
}

@media only screen and (max-width: 840px) {
  #about .top {
    display: none;
  }
}

@media only screen and (max-width: 425px) {
  #banner {
    margin-top: 0vw;
  }
}

@media only screen and (max-width: 320px) {
  #banner {
    margin-top: 16vw;
  }
  #about .aboutin h1 {
    font-size: 22px;
  }
}