/***主顏色***/



:root {



  --bgColor: #FFFFFB;



  --mainColor: #82663A;



  --mainFontColor: rgba(254, 254, 254, 0.85);



  --mainBorder: 1.5px solid var(--mainFontColor);



}



header {



  background-color: #6abab9;



}



header nav {



  filter: brightness(0);



}



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



.home {



  background: url(img/banner01.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;



}



.en {



  font-weight: 600;



}



.home {



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



  background-size: cover;



  -webkit-animation-name: banner;



  animation-name: banner;



  -webkit-animation-duration: 20s;



  animation-duration: 20s;



  -webkit-animation-iteration-count: infinite;



  animation-iteration-count: infinite;



}



.item a{



  width: 50%;



  text-align: center;



  border: solid 1px #82663A;



  padding: 10px;



}

.hide{

  display: none;

}

.item{
  display: flex;
  align-items: center;
}

.item img{
  align-items: center;
}

@-webkit-keyframes banner {



  0% {



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



    background-size: cover;



  }



  28% {



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



    background-size: cover;



  }



  33% {



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



    background-size: cover;



  }



  61% {



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



    background-size: cover;



  }



  66% {



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



    background-size: cover;



  }



  95% {



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



    background-size: cover;



  }



  100% {



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



    background-size: cover;



  }



}



@keyframes banner {



  0% {



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



    background-size: cover;



  }



  28% {



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



    background-size: cover;



  }



  33% {



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



    background-size: cover;



  }



  61% {



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



    background-size: cover;



  }



  66% {



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



    background-size: cover;



  }



  95% {



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



    background-size: cover;



  }



  100% {



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



    background-size: cover;



  }



}



.listBg {



  background: url(img/texture.png) top left repeat fixed;



  background-size: 200px;



  background-color: rgb(183, 230, 230, 80%);



}



.menu ol li.menuSp {



  text-align: center;



  -ms-flex-wrap: wrap;



  flex-wrap: wrap;



  width: 100%;



}



.menuSp * {



  width: 100%;



  max-width: none;



}



.menu ol li.menuSp p {



  font-size: 16px;



  margin: 0 auto;



}



.menuSp h5 {



  font-size: 28px;



  color: #0d0d0d;



  margin: 75px auto 10px auto;



}



.menuSp h6 {



  font-size: 20px;



  color: #0d0d0d;



  margin-bottom: 5px;



}



.menuSp h5:first-child {



  margin-top: 0;



}



.menuSp hr {



  width: 80%;



  margin: 15px auto;



}



.about .cover {



  background-color: rgba(100, 100, 100, 0.281);



}



article {



  padding-bottom: 80px;



}



.title {



  margin-bottom: 80px;



}



.next_prev {



  -webkit-transition: all 0.5s;



  transition: all 0.5s;



  visibility: hidden;



}



.next_prev .next_box {



  visibility: visible;



  position: relative;



}



.next_prev .next_box::after {



  position: absolute;



  content: ">";



  font-size: 50px;



  font-weight: 900;



  -webkit-transition: all .5s;



  transition: all .5s;



  top: -10px;



}



.next_prev .next_box:hover::after {



  color: #3d3d3d;



}



.next_prev .prev_box {



  visibility: visible;



  position: relative;



}



.next_prev .prev_box::after {



  position: absolute;



  content: "<";



  font-size: 50px;



  font-weight: 900;



  -webkit-transition: all .5s;



  transition: all .5s;



  top: -10px;



}



/*



.menu ol {



  width: 90%;



  padding: 100px 5%;



  flex-wrap: wrap;



  list-style: none;



  justify-content: space-between;



  background: url(texture.png) top left repeat fixed;



  background-size: 200px;



  background-color: rgb(240, 240, 240);



  border-top: var(--mainColor) 5px solid;



  display: none;



} */



.next_prev .prev_box:hover::after {



  color: #000000;



}



.img_control1 {



  position: absolute;



  z-index: 99;



  font-size: 30px;



  top: 0;



  left: 0;



}



.img_control2 {



  position: absolute;



  z-index: 99;



  font-size: 30px;



  top: 0;



  right: 0;



}



.swiper-container {



  width: 100%;



  margin-left: auto;



  margin-right: auto;



}



.gallery-top {



  width: 100%;



}



.gallery-thumbs {



  -webkit-box-sizing: border-box;



  box-sizing: border-box;



  padding: 10px 0;



}



.gallery-thumbs.swiper-container {



  padding: 10px;



  margin: 0px;



}



.gallery-thumbs .swiper-slide {



  width: 250px;



  height: 60px;



  text-align: center;



}



.title_box {



  width: 95%;



  margin: 0 auto;



}



.title_box .next_btn {



  visibility: hidden;



}



.title_box .next_btn::after {



  content: ">";



  position: absolute;



  font-size: 50px;



  top: -17px;



  left: 40px;



  visibility: visible;



  -webkit-transition: all .3s;



  transition: all .3s;



  color: #666666;



  font-weight: 900;



}



.title_box .next_btn:hover::after {



  color: #000000;



}



.title_box .prev_btn {



  visibility: hidden;



}



.title_box .prev_btn::after {



  content: "<";



  position: absolute;



  font-size: 50px;



  top: -17px;



  right: 40px;



  visibility: visible;



  -webkit-transition: all .3s;



  transition: all .3s;



  color: #666666;



  font-weight: 900;



}



.title_box .prev_btn:hover::after {



  color: #000000;



}



.title_box .swiper_title {



  position: relative;



  cursor: pointer;



  -webkit-transition: all 0.3s;



  transition: all 0.3s;



  color: #666666;



}



.title_box .swiper_title:hover {



  color: #000000;



}



.title_box .swiper_title p {



  font-size: 24px;



}



.gallery-thumbs .swiper-slide-active {



  color: #000000;



}



.gallery-thumbs .swiper-slide-active p::after {



  content: "▲";



  position: absolute;



  top: 100%;



  left: 46%;



  color: #222222;



}



.slider_box {



  width: 100%;



  border-top: 4px solid #000000;



}



.slider_all_box {



  width: 70%;



  margin: 0 auto;



}



.title_control {



  height: 0;



}



.title_control li {



  opacity: 0;



}



.title_control li p {



  opacity: 0;



}



.gallery-top .swiper-slide-active {



  background-color: rgb(240, 240, 240);



  color: black;



  height: 100%;



  background-image: url(../img/texture.png);



  background-position: center;



  background-repeat: repeat;



  list-style: none;



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex;



  -ms-flex-wrap: wrap;



  flex-wrap: wrap;



  -webkit-box-pack: center;



  -ms-flex-pack: center;



  justify-content: center;



  padding: 80px 0;



}



.gallery-top .swiper-slide-active li {



  width: 40%;



  display: -webkit-box;



  display: -ms-flexbox;



  display: flex;



  -webkit-box-pack: justify;



  -ms-flex-pack: justify;



  justify-content: space-between;



  line-height: 1.5;



  margin-bottom: 30px;



  padding-bottom: 30px;



  border-bottom: #505050 1px solid;



  margin-left: 5%;



  margin-right: 5%;



  opacity: 1;



}



.gallery-top .swiper-slide-active p {



  opacity: 1;



  font-size: 18px;



}



@media (max-width: 771px) {



  #img_change1 {



    width: 100% !important;



    height: 100% !important;



  }



  #img_change2 {



    width: 100% !important;



    height: 100% !important;



  }



  .menu {



    padding-bottom: 0px;



  }



  .gallery-thumbs .swiper-slide {



    width: 300px;



  }



  .title_box {



    width: 85%;



  }



  .slider_all_box {



    width: 90%;



  }



  .gallery-top .swiper-slide-active li {



    width: 100%;



  }



}



.img_control1 {



  position: absolute;



  z-index: 99;



  font-size: 30px;



  top: 0;



  left: 0;



}



.img_control2 {



  position: absolute;



  z-index: 99;



  font-size: 30px;



  top: 0;



  right: 0;



}



/*# sourceMappingURL=style.css.map */