/***主顏色***/

:root {

  --bgColor: #FFFFFB;

  --mainColor: #c49f8c;

}


.sns {
  width: 60px;
  position: fixed;
  max-width: calc(100% - 50px);
  height: calc(100vh - 100px);
  list-style: none;
  border-left: none;
  margin-top: 200px;
  margin-right: -30px;
  transition: right 1s ease-in-out;
  right: 30px !important;
  bottom: 0px;
}

header ul.sns li a {
  filter: brightness(1);
}

* {
  margin: 0;
  padding: 0;
  position: relative;
  outline: none;
  font-family: times new roman, kozuka mincho pr6n, microsoft jhenghei, serif;
}


.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

}

/* img {
  -webkit-filter: drop-shadow(5px 5px 0.5em rgba(0, 0, 0, 0.7));
  filter: drop-shadow(5px 5px 0.5em rgba(0, 0, 0, 0.7));
} */

.qrcode img {
  filter: none;
}

.sns img {
  filter: none;
}

.btn_group {
  margin-top: 10%;
}

.btn_group a {
  display: block;
  flex-wrap: wrap;
  margin: auto;
  font-weight: 900;
  border-radius: 30%;
  border: 2px solid var(--darkColor);
  color: var(--darkColor);
  font-size: 14px;
  margin-top: 50px;
  width: 100%;
  text-align: center;
  transition: 0.5s;
}

.btn_group a:hover {
  background-color: #c49f8c;
  color: #fff;
}


.gallery .box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin: auto;
}

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

/* .home {

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

  background-size: cover;

  animation-name: banner;

  animation-duration: 20s;

  animation-iteration-count: infinite;

} */

/* banner輪播 */
.swiper1 {
  width: 100%;
  height: 100vh;
}

.swiper-slide1 {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide1 img {
  display: block;
  width: 100%;
  height: 100%;
  /* object-fit: contain; */
}

.trasec {
  display: block;
}

.title {
  font-family: 'Times New Roman';
  letter-spacing: 5px;
  font-weight: 100;
}

.menu ol li p,

.news .item p,

p {

  color: #000;

}



.menu ol li p {

  max-width: 100%;

}

header h1 {
  background-color: #c49f8c;
}


header h1 img {

  margin: 0 auto;

}



header {

  height: 90px;

}



main {

  padding-top: 90px;

}



.about {

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

  background-size: cover;

}



.about .cover {

  width: 100%;

  height: 100%;

  background-color: rgba(252, 250, 242, 0.877);

  padding: 150px 0;

}

.about h4 {

  width: 80%;

  margin: 0 auto;

  margin-bottom: 80px;

}







.news .item h4 {

  margin-bottom: 10px;

}



.menu ol li {

  width: 100%;

  border-bottom: none;

}



span {

  font-weight: bold;

  font-size: 20px;

  display: block;

  width: 100%;

  text-align: center;

  color: var(--mainColor);

  border-bottom: 1px solid var(--mainColor);

  margin-bottom: 30px;

}



.icon {

  display: flex;

  margin-left: 25%;

}



.icon a {

  margin: 3%;

  width: 15%;

}



.btn_group a {

  margin: auto;

  padding: 10px;

  width: 30%;

  letter-spacing: 2px;

  text-align: center;

  border: 1px solid #c49f8c;

  background-color: #FFFFFB;

  color: #c49f8c;

}

.item3 {
  float: left;
  width: 30%;
  margin-bottom: 10%;
  margin-top: 3%;
}

.gallery .box a.cross {

  width: calc(100% * 1 / 3 - 20px);

}



.gallery .box a {

  height: 100%;

}



.gallery .box a :hover {

  transition: 0.5s;

  filter: brightness(0.5);

}



.qrcodebox {

  width: 100%;

}



.qrcode {
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0;

}



/* videoArea */



.videoArea {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

  width: 100%;

  margin: 0 auto;

}



.videoItem {

  width: 49%;

  margin: 0 auto;

}





iframe {

  width: 100%;

  height: 250px;

}





/* videoAreaEnd */



/* .menu ol li:last-child,

.menu ol li:nth-last-child(2) {

  border-bottom: 1px solid;

} */



@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: 900px) {

  .item3 {

    margin-top: 5%;
  }

  .btn_group {
    margin-top: 10px;
  }
}

@media screen and (max-width: 770px) {


  .btn_group {
    margin-top: 10px;
  }

  .item3 {
    width: 100%;
    margin-top: 10%;
  }

  .cover p {

    color: #c9a063;

    font-size: 12px;

  }



  .qrcode {

    width: 100%;

    margin: auto;
    margin-top: 40px;

  }



  .gallery .box .cover {

    background-color: rgba(255, 255, 255, 0.213);

  }



  .gallery .box a.cross {

    width: calc(100% * 1.6 / 3 - 20px);

  }



  .home {

    display: flex;

    width: 100%;

    height: calc(40vh - 100px);

  }



  .videoItem {

    width: 100%;

    margin: 10px auto;

  }

  .contact address {

    font-size: 20px;
    word-break: keep-all;
    letter-spacing: 1.2px;
  }

}





@media screen and (max-width:576px) {

  .sns {

    margin-right: -38px;

  }


  .btn_group a {

    margin: auto;

    padding: 6px;

    width: 10%;

    letter-spacing: 2px;

    text-align: center;

    border: 1px solid #c49f8c;

    background-color: #FFFFFB;

    color: #c49f8c;

  }





  .menuSwitch img {

    width: 110%;

    height: 100%;

    object-fit: cover;

    object-position: center;

  }

  .news .item p {
    font-size: 12px;
    word-break: keep-all;
  }


}







@media only screen and (max-width: 500px) {

  .title {

    font-size: 32px;

    margin-bottom: 40px;

  }



}

@media only screen and (max-width: 480px) {

  .contact address {

    font-size: 12px;
    word-break: keep-all;
    letter-spacing: 1.2px;
  }


}