/***主顏色***/
:root {
  --bgColor: rgb(255, 255, 255);
  --mainColor: #fcfcfc;
}

/***********/
body{
  color: #243142;
}

.title::after {
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  background-color: #243142;
  margin: 5px auto 0 auto;
}

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

.fadeIn>.pstyle p,
h4 {
  text-align: center;
}

.pstyle {
  font-size: 24px;
}

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

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

.home .cover {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  background: none;
}

.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%;
}

.news .item {
  width: 100%;
  min-height: 320px;
  /* min-height: 400px; */
  margin: 30px auto;
  display: flex;
  flex-wrap: wrap;
  /* background: url(texture.png) top left repeat fixed; */
  background-size: 200px;
  background-color: #41b1e6;
  color: var(--bgColor);
}

.news .item>div {
  width: 60%;
  padding: 123px 5%;
}

header nav {
  position: absolute;
  top: calc(50% - 17.5px);
  right: 30px;
  width: 35px;
  height: 35px;
  background: url(img/navIcon.svg) center no-repeat;
  background-size: cover;
  cursor: pointer;
  
}

#copyright {
  color: rgb(131, 131, 131);
  text-align: center;
  font-size: 12px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  z-index: 100;
  background: none;
  background-size: 100px;
  background-color: var(--bgColor);
  box-shadow: 10px 10px 10px #00000043;
 
}

.about .cover{
  background-color: #fcfcfc9b;
}

.about .cover .text{
  background: none;
  background-color: #d3eefaf3;
}

.news .item p {
  color: rgba(255, 255, 255, 0.91);
}
.listBg {
  background: url(texture.png) top left repeat fixed;
  background-size: 200px;
  background-color: #808080ce;
}
.title{
  font-weight:bold;
}

figure{
  width: 30%;
}
@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:770px) {
  .about img {
    width: 100%;
  }

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

  .cover2 {
    width: 100%;
  }


 


  .cover2 {
    display: grid;
  }

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

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

  .news .item>div {
    padding: 0px 20%;
  }
  figure{
    width: 100%;
  }
}