@charset "utf-8";

#imgs{width: 100%; height: calc(100vh - 100px); position: relative; z-index: 1; background: #eff0f2;}
#imgs .swiper-container{height: 100%; position: relative; z-index: 1;}
#imgs .swiper-wrapper{height: 100%;}
#imgs .swiper-slide{width: 100%; height: 100%;}
#imgs .swiper-slide .img{width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; top: 0; background-size:cover; background-position: center top; background-repeat: no-repeat; transition: transform 15s;}
#imgs .swiper-slide .tit{position: absolute; right: 30px; bottom: 30px; z-index: 2; background: #fff; color: #2b2b2b; font-size: 1.7rem; padding: 12px; letter-spacing: .03rem; border-radius: 8px;}

#imgs .prev, #imgs .next{display: block; width: 40px; height: 40px; top: 50%; margin-top: -30px; position: absolute; z-index: 2; text-align: center; line-height: 46px; cursor: pointer; transition: all .2s;}
#imgs .prev:hover, #imgs .next:hover{opacity: .7;}
#imgs .prev i, #imgs .next i{color: #fff; font-size: 4.6rem;}
#imgs .prev{left: 30px; transform: rotate(-180deg);}
#imgs .next{right: 30px;}

#imgs>.tit{color: #fff; font-size: 7rem; letter-spacing: -.16rem; font-weight: 700; position: absolute; top: 40%; z-index: 2; width: 100%; text-align: center;}

#imgs .swiper-pagination{left: 30px; bottom: 30px; color: #fff; font-size: 1.7rem; width: auto; background: #04458e; color: #fff; padding: 12px; letter-spacing: .03rem; border-radius: 8px; font-weight: bold;}

#imgs .scroll{position: absolute; left: 0; right: 0; margin: auto; bottom: 35px; width: 65px; height: 45px; color: #fff; text-align: center; font-weight: 300; font-size: 2.4rem; z-index: 2;}
#imgs .scroll::before{content: ''; display: block; width: 20px; height: 1px; background: #fff; position: absolute; left: 17px; top: 38px; transform: rotate(42deg); animation: down 1.5s ease infinite;}
#imgs .scroll::after{content: ''; display: block; width: 20px; height: 1px; background: #fff; position: absolute; left: 31px; top: 38px; transform: rotate(-42deg); animation: down 1.5s ease infinite;}
@keyframes down{
  0% {top: 38px; opacity: 1;}
  50% {top: 45px; opacity: .8;}
  100% {top: 38px; opacity: 1;}
}


#videos{padding: 85px 0 125px 0;}
#videos .wrap>.tit{font-size: 3.6rem; color: #2b2b2b; font-weight: bold;}
#videos .list{display: flex; flex-wrap: wrap; margin-top: 50px;}
#videos .list a{display: block; width: calc(33.33333% - 50px); height: 0; padding-bottom: 26.666664%; background: #eff0f2; position: relative; overflow: hidden; margin-right: 50px; margin-bottom: 50px;}
#videos .list a:nth-child(3n){margin-right: 0;}
#videos .list a .img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;}
#videos .list a .img>div{width: 100%; height: 100%; background: no-repeat center/cover; transition: all .75s;}
#videos .list a:hover .img>div{transform: scale(1.08);}
#videos .list a .tit{position: absolute; left: 0; bottom: 0; width: 100%; height: 60px; line-height: 60px; font-size: 1.7rem; color: #fff; font-weight: 300; background: rgba(0,0,0, .5); text-align: center; transition: all .3s ease;}
#videos .list a:hover .tit{bottom: 50px; background: rgba(16,70,160, .9);}
#videos .list a .zoom{height: 50px; position: absolute; left: 0; bottom: -50px; width: 100%; color: #fff; text-align: center; background: rgba(0,0,0, .5); transition: all .3s ease;}
#videos .list a:hover .zoom{bottom: 0; background: rgba(16,70,160, .9);}
#videos .list a .zoom>i{font-size: 2.4rem;}

@media (max-width:1440px){
  #imgs .swiper-slide .tit{font-size: 1.6rem;}

  #imgs .prev, #imgs .next{margin-top: -40px;}
  #imgs>.tit{font-size: 6.2rem;}
  #imgs .prev i, #imgs .next i{font-size: 4.2rem;}

  #imgs .swiper-pagination{font-size: 1.6rem;}

  #videos{padding: 80px 0 100px 0;}
  #videos .wrap>.tit{font-size: 3.4rem;}
  #videos .list a{width: calc(33.33333% - 40px);}
  #videos .list a .tit{font-size: 1.6rem;}
}
@media (max-width:1366px){
  #imgs .swiper-slide .tit{font-size: 1.5rem;}

  #imgs .prev, #imgs .next{margin-top: -50px;}
  #imgs>.tit{font-size: 5.6rem;}
  #imgs .prev i, #imgs .next i{font-size: 4rem;}

  #imgs .swiper-pagination{font-size: 1.5rem;}

  #videos{padding: 80px 0 100px 0;}
  #videos .wrap>.tit{font-size: 3.2rem;}
  #videos .list a{width: calc(33.33333% - 36px);}
  #videos .list a .tit{font-size: 1.5rem;}
}
@media (max-width:1000px){
  #imgs{height: 300px;}
  #imgs .swiper-slide .tit{right: 15px; bottom: 15px; font-size: 1.4rem; padding: 10px;}

  #imgs .prev, #imgs .next{display: block; width: 32px; height: 32px; top: 50%; margin-top: -30px; line-height: 32px; z-index: 3;}
  #imgs .prev i, #imgs .next i{font-size: 2.4rem;}
  #imgs .prev{left: 10px;}
  #imgs .next{right: 10px;}

  #imgs>.tit{font-size: 3rem; width: calc(100% - 100px); left: 0; right: 0; margin: auto;}

  #imgs .swiper-pagination{left: 15px; bottom: 15px; font-size: 1.4rem; padding: 10px; font-weight: normal;}

  #imgs .scroll{display: none;}

  #videos{padding: 45px 15px 85px 15px;}
  #videos .wrap>.tit{font-size: 3rem;}
  #videos .list{display: block; margin-top: 40px;}
  #videos .list a{width: 100%; padding-bottom: 60%; margin-right: 0; margin-bottom: 10px;}
  #videos .list a:nth-child(3n){margin-right: 0;}
  #videos .list a .tit{height: 50px; line-height: 48px; font-size: 1.5rem;}
}