/***主顏色***/
:root {
  --bgColor: #fffffb;
  --mainColor: #82663a;
}

/***********/
.home {
  background: url(img/banner1.jpg) center no-repeat;
  background-size: cover;
  animation-name: banner;
  animation-duration: 20s;
  animation-iteration-count: infinite;
}

.about {
  background: url(img/aboutBg.jpg) center no-repeat fixed;
  background-size: cover;
}
img {
  width: 100%;
  height: 100%;
}
.home .cover {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 251, 0.2) 0%,
    rgb(255 255 251 / 60%) 50%,
    rgba(255, 255, 251, 0.2) 100%
  );
}
.qrcode {
  display: flex;
}
.qrcode img {
  width: 30%;
  margin-top: 15px;
}
@keyframes banner {
  0% {
    background: url(img/banner1.jpg) center no-repeat;
    background-size: cover;
  }

  28% {
    background: url(img/banner1.jpg) center no-repeat;
    background-size: cover;
  }

  33% {
    background: url(img/banner2.jpg) center no-repeat;
    background-size: cover;
  }

  61% {
    background: url(img/banner2.jpg) center no-repeat;
    background-size: cover;
  }

  66% {
    background: url(img/banner3.jpg) center no-repeat;
    background-size: cover;
  }

  95% {
    background: url(img/banner3.jpg) center no-repeat;
    background-size: cover;
  }

  100% {
    background: url(img/banner1.jpg) center no-repeat;
    background-size: cover;
  }
}
@media screen and (max-width: 500px) {
  .qrcode img {
    width: 45%;
  }
  .news .item h4 {
    font-size: 20px;
  }
}

@media screen and (max-width: 770px) {
  .toLeft {
    width: calc(100% - 10px) !important;
  }
  .home {

    height: calc(50vh - 100px);
}
}

.toLeft img {
  margin: auto;
}