/***主顏色***/





:root {





  --bgColor: #151f29;





  --mainColor: #e4b862;





}

header h1 img {
  margin: 0;
  width: 100px;
  object-fit: contain;
}

/* LOGO */
.logo_gp {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: auto;
  padding: 0;
  margin: 0;
  height: 100%;
}


.logo_gp a {
  width: 100px;
  margin: 10px;
  background-color: #fff;
}






/***********/





.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: #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%, rgba(121, 84, 84, 0.5) 50%, rgba(231, 228, 228, 0.438) 100%);





}











.cover {





  margin: auto;





}











.about {





  background: url(img/aboutBg.jpg) center no-repeat fixed;





  background-size: cover;





}











.fadeIn p {





  text-align: center;





}











.about .cover .text {





  border: 4px solid #e4b862;





  background-color: rgb(254 243 235 / 93%);


  ;





}





.title {





  color: #e4b862;





}



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;





}





.gallery .box .cover p {





  font-size: 25PX;





}











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





}










/* 
header h1 img {





  height: 130px;





} */





.fadeIn.active {





  line-height: 40px;





}





.justicon {


  display: flex;


  flex-wrap: wrap;


}





.justicon a {


  margin: auto;


}


.btn {

  border: 2px solid rgb(254 243 235 / 93%);

  padding: 20px;


  font-size: 16px;

  border-radius: 4px;

  display: flex;
  width: 50%;
  margin: auto;
  justify-content: center;

  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.btn:hover {
  background-color: rgb(254 243 235 / 93%);

}





@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) {


  header h1 img {
    margin: 0;
  }














  .about img {





    width: 100%;





  }











  .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);





  }











}

@media screen and (max-width:375px) {
  .btn {
    padding: 8px;
    width: 80%;
  }
}