@charset "utf-8";

#banner{width: 100%; height: 0; padding-bottom: 33.0729%; position: fixed; z-index: 1; left: 0; top: 0; background: #111;}
#banner>div{width: 100%; height: 100%; background: no-repeat center/cover; position: absolute; top: 0; z-index: 1;}
#banner .wrap{position: absolute; z-index: 2; left: 0; right: 0; margin: auto;}
#banner .con{position: relative; top: 55%;}
#banner .t2{margin: 15px 0 0 11.6%;}

/*---1440---*/
@media (max-width:1679px){

}
/*---1366---*/
@media (max-width:1439px){

}
/*---1280---*/
@media (max-width:1365px){

}
/*---MP---*/
@media (max-width:1279px){
  #banner{padding-bottom: 0; height: 80%;}
}


#space{height:0; padding-bottom: 33.0729%;}
/*---MP---*/
@media (max-width:1279px){
  #space{height: 80%; padding-bottom: 0;}
  #banner .con{top: 51%; text-align: center; transform: scale(.9);}
  #banner .t1, #banner .t2{margin: auto;}
  #banner .t2{margin-top: 15px;}
}


#path{position: relative; z-index: 2; background: #fff; color: #3e3a39; font-size: 1.7rem; padding: 60px 0 70px 0;}
#path a{color: #3e3a39;}
#path a:hover{color: #666;}


#view{position: relative; z-index: 2; background: #fff;}
#view .next{position: absolute; z-index: 2; top: 45%; right: 0; width: 48px; height: 64px; text-align: center; cursor: pointer; transition: all .3s;}
#view .next.active{top: 40%;}
#view .next i{color: #fff; font-size: 4rem; position: relative; top: 12px; left: 2px;}
#view .next:hover{background: rgba(255,255,255, .2);}
#view .prev{position: absolute; z-index: 2; top: 45%; left: 0; width: 48px; height: 64px; text-align: center; cursor: pointer; transform: rotate(180deg); transition: all .3s;}
#view .prev.active{top: 40%;}
#view .prev i{color: #fff; font-size: 4rem; position: relative; top: 12px; left: 2px;}
#view .prev:hover{background: rgba(255,255,255, .2);}
#view .next.swiper-button-disabled, #view .prev.swiper-button-disabled{opacity: .5;}

#view .up{display: block; height: 100px; text-align: center; position: absolute; width: 100%; bottom: 0; z-index: 2; transition: all .3s;}
#view .up.active{bottom: -100px;}
#view .up i{color: #fff; font-size: 5.6rem; position: relative; top: 20px;}

#view .thumbs{position: absolute; left: 0; bottom: -165px; height: 165px; background: rgba(255,255,255, .6); width: 100%; z-index: 3; transition: all .35s;}
#view .thumbs.active{bottom: 0;}
#view .wrap{margin-top: 30px;}
#view .gallery-thumbs{height: 90px;}
#view .thumbs .swiper-slide{background: no-repeat center/cover;}

#view .swiper-pagination{display: none;}

/*---1440---*/
@media (max-width:1679px){

}
/*---1366---*/
@media (max-width:1439px){
  #path{font-size: 1.6rem;}

  #view .up{height: 80px;}
  #view .up.active{bottom: -80px;}
  #view .up i{font-size: 4.6rem;}

  #view .thumbs{bottom: -135px; height: 135px;}
  #view .wrap{margin-top: 25px;}
  #view .gallery-thumbs{height: 80px;}
}
/*---1280---*/
@media (max-width:1365px){
  #path{font-size: 1.5rem;}

  #view .up{height: 70px;}
  #view .up.active{bottom: -70px;}
  #view .up i{font-size: 4rem;}

  #view .thumbs{bottom: -120px; height: 120px;}
  #view .wrap{margin-top: 21px;}
  #view .gallery-thumbs{height: 74px;}
}
/*---MP---*/
@media (max-width:1279px){
  #path{font-size: 1.5rem; padding: 50px 15px;}

  #view{padding-bottom: 100px;}
  #view .next, #view .prev{display: none;}
  #view .up{display: none;}
  #view .thumbs{display: none;}

  #view .swiper-pagination{display: block; margin-top: 20px; text-align: center; width: 100%;}
  #view .swiper-pagination-bullet{background: #ccc; transition: all .25s;}
  #view .swiper-pagination-bullet-active{background: #464646;}
}