/*.swiper-slide.swiper-slide-active img {

  animation: enlarge .5s forwards;

}



 @keyframes enlarge {

  from {

    opacity: 0;

  }



  to {

    opacity: 1;

  }

} */

.banInfo{
  position: relative;
}



.banSwiper .swiper-slide {

  background-size: cover !important;

  background-position: center !important;

  background-repeat: no-repeat !important;

  opacity: 0;

  transition: .4s;

}


.banSwiper .swiper-slide.swiper-slide-active {
  opacity: 1;
}



.slogan {

  width: 840px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}



.poster h1 {

  text-align: center;

  transition: .4s;

}



.poster h1:hover {

  opacity: .5;

}



.more {

  display: flex;

  align-items: center;

  margin: 60px 0 0;

  font-size: 14px;

  color: #fff;

  gap: 10px;

}



.more img {

  display: block;

  width: 30px;

  transition: .4s;

}



.more:hover img {

  transform: translateX(30px);

}



.banSwiper .swiper-pagination {

  bottom: 70px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

}



.banSwiper .swiper-pagination-bullet {

  width: 10px;

  height: 10px;

  opacity: 1;

  background: rgba(0, 0, 0, .4);

  margin: 0 !important;

  box-sizing: border-box;

  /* border: 1px solid #24282b; */

}



.banSwiper .swiper-pagination-bullet.swiper-pagination-bullet-active {

  width: 14px;

  height: 14px;

  background: #fff;

}



.hotspot {

  box-sizing: border-box;

  padding: 80px 35px;

  position: relative;

  z-index: 1;

}



.column {

  text-align: center;

  font-size: 16px;

  color: #7e694f;

  margin: 0 0 60px;

  /* font-weight: normal; */

}



.hotList li {

  display: flex;

  justify-content: space-between;

  margin: 0 0 50px;

}



.hotxt {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  width: 560px;

}



.hotList li:nth-child(even) .hotxt {

  order: 2;

}



.hotxt h3 {

  font-size: 36px;

  color: #121212;

  font-weight: normal;

  font-family: ChaparralPro-Regular;

}



.hotxt h3:hover {

  opacity: .6;

}



.hotxt p {

  font-size: 18px;

  line-height: 30px;

  color: #121212;

}



.remarks {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.toRed,

.remarks h5 {

  color: #7e694f;

  font-size: 14px;

  font-weight: normal;

}



.toRed {

  display: flex;

  align-items: center;

  gap: 10px;

}



.toRed img {

  display: block;

  width: 30px;

  box-sizing: border-box;

  transition: .4s;

}



.toRed:hover img {

  transform: translateX(20px);

}



.hotMg {

  display: block;

  width: 505px;

  overflow: hidden;

}



.hotMg img {

  display: block;

  width: 100%;

  transition: .4s;

}



.hotMg:hover img {

  transform: scale(1.1);

}





.latest {

  width: 100%;

  box-sizing: border-box;

  padding: 80px 0;

  background: #F2F2F2;

}



.latList {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 60px;

}



.latList li {

  margin: 0 0 60px;

}



.latList h5 {

  font-size: 16px;

  color: #7e694f;

  margin: 0 0 20px;

}



.latList h3 {

  margin: 0 0 20px;

}



.latList h3 a {

  color: #24282b;

  font-size: 24px;

  font-weight: normal;

}



.latList h3 a:hover {

  opacity: .6;

}



.latList p {

  font-size: 16px;

  line-height: 25px;

  color: #121212;

  margin: 0 0 30px;

}



.latList h6 {

  font-size: 14px;

  color: #7e694f;

  font-weight: normal;

}



.article {

  width: 100%;

  box-sizing: border-box;

  padding: 80px 0;

  background: #fff;

}



.special {

  padding: 80px 0 110px;

  background: #F2F2F2;

}



.speBox {

  max-width: 1080px;

  margin: 0 auto;

  position: relative;

}



.speSwiper a {

  width: 100%;

  height: 100%;

  display: block;

  box-sizing: border-box;

  padding: 90px 10px 65px;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  position: relative;

}



.speSwiper a::after {

  position: absolute;

  top: 0;

  left: 0;

  content: "";

  background-color: #000;

  opacity: .5;

  width: 100%;

  height: 100%;

  transition: .4s;

}



.speSwiper a:hover::after {

  opacity: 1;

  background: #7E694F;

}



.speSwiper h4 {

  width: 100%;

  height: 215px;

  box-sizing: border-box;

  padding: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-top: 1px solid #fff;

  border-bottom: 1px solid #fff;

  font-size: 36px;

  color: #fff;

  font-weight: normal;

  margin: 0 0 60px;

  position: relative;

  z-index: 1;

}



.speSwiper .redAll {

  color: #fff;

  position: relative;

  z-index: 1;

}



.speSwiper .swiper-button-next:after,

.speSwiper .swiper-button-prev:after {

  display: none;

}





.central li {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

}



.centMg {

  display: block;

  overflow: hidden;

}



.central li:nth-child(even) .centMg {

  order: 2;

}



.centMg img {

  display: block;

  width: 100%;

  transition: .4s;

}



.centMg:hover img {

  transform: scale(1.1);

}



.centxt {

  box-sizing: border-box;

  padding: 50px 100px;

  background: #121212;

  color: #fff;

  display: flex;

}



.central li:nth-child(even) .centxt {

  justify-content: flex-end;

}



.centxt>div {

  display: flex;

  flex-direction: column;

  justify-content: space-around;

  height: 100%;

  max-width: 500px;

}



.centxt h3 a {

  color: #fff;

  font-size: 36px;

  font-weight: normal;

}



.centxt h3 a:hover {

  opacity: .6;

}



.centxt p {

  font-size: 30px;

}







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



  .hotspot {

    padding: 40px 0;

  }



  .hotxt {

    width: 49%;

  }



  .hotMg {

    width: 47%;

  }



  .hotxt h3,

  .centxt h3 a {

    font-size: 28px;

  }



  .hotxt p {

    font-size: 16px;

    line-height: 25px;

  }



  .latest,

  .article,

  .special {

    padding: 40px 0;

  }



  .column {

    margin: 0 0 30px;

  }



  .latList {

    gap: 30px;

  }



  .latList h3 a {

    font-size: 20px;

  }



  .latList li {

    margin: 0 0 40px;

  }



  .speSwiper h4 {

    height: 100px;

    padding: 30px;

    font-size: 28px;

    margin: 0 0 20px;

  }



  .centxt {

    padding: 30px 50px;

  }



  .centxt p {

    font-size: 22px;

  }



}





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



  .poster h1,

  .hotxt h3,

  .centxt h3 a {

    font-size: 22px;

  }



  .hotxt p {

    font-size: 15px;

    line-height: 25px;

  }



  .latList {

    grid-template-columns: repeat(2, 1fr);

    gap: 40px;

  }



  .latList li {

    margin: 0;

  }



  .latList h3 a {

    font-size: 18px;

  }



  .latList h5 {

    font-size: 14px;

    margin: 0 0 10px;

  }



  .latList p {

    font-size: 15px;

    line-height: 25px;

    margin: 0 0 20px;

  }



  .speSwiper h4 {

    font-size: 20px;

  }



  .centxt p {

    font-size: 18px;

  }



}





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

  #header{
    position: absolute;
    background: transparent;
  }

  .banSwiper .swiper-pagination{
    bottom: 30px;
  }


  .more{
    margin: 30px 0 0;
  }

  .banInfo{
    padding: 80px 0 40px;
  }


  .poster h1,

  .hotxt h3,

  .centxt h3 a {

    font-size: 20px;

    line-height: 30px;

  }



  .hotList li {

    flex-wrap: wrap;

    gap: 20px;

  }



  .hotList li>* {

    width: 100%;

  }



  .hotList li:nth-child(even) .hotxt,

  .central li:nth-child(even) .centMg {

    order: 0;

  }



  .latList {

    grid-template-columns: repeat(1, 1fr);

    gap: 20px;

  }



  .latList h3 {

    margin: 0 0 5px;

  }



  .latList p {

    font-size: 14px;

    line-height: 25px;

    margin: 0 0 10px;

  }



  .centxt {

    padding: 20px;

  }



  .centxt p {

    font-size: 14px;

    margin: 10px 0;

  }



  .centxt h3 a {

    font-size: 18px;

    line-height: 30px;

  }



  .toRed img {

    width: 22px;

  }



  .central li {

    grid-template-columns: repeat(1, 1fr);

  }



  .central li:nth-child(even) .centxt {

    justify-content: flex-start;

  }



  .speSwiper a {

    padding: 50px 10px;

  }





}