/***主顏色***/
:root {
  --bgColor: #7cbbd6;
  --mainColor: #fcfcfc;
}

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

.sns{
  filter: brightness(2);
}

.fadeIn > .pstyle p,
h4 {
  text-align: center;
}
.listBg {
  background-color: #616161;
}
.pstyle {
  font-size: 24px;
}

.news .item h4 {
  text-align: left;
}

.pstyle a {
  border-style: solid;
  border-width: 3px;
  border-color: #fff;
  padding: 8px;
}

.home .cover {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  background: linear-gradient(
    to bottom,
    rgba(219, 218, 218, 0.322) 0%,
    rgb(121 84 84 / 15%) 50%,
    rgba(231, 228, 228, 0.438) 100%
  );
}

.home .cover h2{
  line-height: 1.6;
  text-shadow: 0.1em 0.1em 0.2em rgba(42, 42, 42, 0.864);
}

.home .cover span{
  font-size: 65%;
}

.cover {
  margin: auto;
}

.about {
  background: url(img/aboutBg.jpg) center no-repeat fixed;
  background-size: cover;
}

.fadeIn p {
  text-align: left;
}

.about img {
  width: 70%;
  margin: auto;
}

.cover1 {
  width: 100%;
  height: 100%;
  background-color: rgba(13, 13, 13, 0.5);
  padding: 0px 0;
}

.boxwidth {
  margin-bottom: 500px;
}

/* .gallery .box a.cross {
  width: calc(100% * 1 / 3 - 20px);
}

.cover2 {
  margin: auto;
  display: flex;
  width: 75%;
  height: 100%;
}

.cover2 img {
  margin: auto;
  width: 90%;
} */

header {
  height: 120px;
  background-color: #eeeeee;
}

header h1 img {
  height: 110px;
}
.about .cover .text {
  background-color: rgb(254 243 235 / 93%);
}
.news .item h4 {
  text-align: left;
  color: #186f94;
}
.item a {
  color: #555;
}


@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 (min-width: 800px) {
  .imgActive {
    display: none !important;
  }
}

@media screen and (max-width: 770px) {
  .about img {
    width: 100%;
  }

  .test001 {
    width: 100% !important;
  }

  .home {
    height: calc(60vh - 142px);
  }

  .cover2 {
    width: 100%;
  }

  header {
    height: 100px;
  }

  header h1 img {
    height: 80px;
  }

  .cover2 {
    display: grid;
  }

  .cover2 img {
    margin-top: 20px;
  }

  .gallery .box a.cross {
    width: calc(100% * 3 / 3 - 20px);
  }
  .gallery .box a {
    width: calc(100% - 10px);
  }

  /* .item img {
    width: 100% !important;
    object-fit: fill !important;
  } */

  .imgFade {
    display: none !important;
  }
}

.fadeIn {
  margin: auto;
}



.test001 {
  width: 50%;
}

.icon-test{
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 1em;
}
.icon-test a{
width: 100px;
}

.icon-test a:nth-child(2) img{
  border-radius: 25px;
  width: 100%;
}

iframe {
  width: 100% !important;
}