 @charset "utf-8";
/* CSS Document */

#top .swiper-slide{position: relative;  background-size: cover; background-repeat: no-repeat;background-position: center; height: 1024px; display: block;}
#top .swiper-pagination-bullet{width: 22px; height: 4px; border-radius: 0;}
#top .yg-shell{left: 55%; top: 38%; position: absolute;}
#top .swiper-slide .title{font-size: 50px; color: #3c393a; line-height: 65px; margin-bottom: 15px;}
#top .swiper-slide p{color: #5e5e5e; font-size:22px; font-family: "宋体"; line-height: 30px;}
#top .sks-shell{left: 55%; top: 58%; position: absolute;}
#top .rj-shell{left:13%; top: 38%; position: absolute;}
@media (min-width:1440px) and (max-width:1920px){
#top .swiper-slide{height:800px;}
}
@media (min-width:1301px) and (max-width:1440px){
#top .swiper-slide{height:576px;}
}
@media (min-width: 992px) and (max-width: 1300px) {
#top .swiper-slide{height: 520px;}
}
@media (max-width: 991px) {
  #top .swiper-slide{height: 396px;}
  #top .swiper-slide .title{ font-size: 36px; line-height: 48px; }
  #top .swiper-slide p{ font-size: 16px; line-height: 25px; overflow:hidden;}
}
@media (max-width: 767px) {
#top .swiper-slide{height: 350px;}
#top .swiper-slide::before{content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background:rgba(0,0,0,0.4);}
#top .yg-shell,#top .sks-shell,#top .rj-shell{left:0; top:28%; z-index: 2; width: 100%; text-align: center;}
#top .swiper-slide .title{ font-size: 26px; line-height: 35px; color: #fff;}
#top .swiper-slide p{ font-size: 14px; line-height: 25px; color: #e6e5e5;}
}

#gridBox{padding-top: 4rem;background: rgba(253,253,253,1);}
#gridBox .container-fluid{max-width: 1920px; margin-left: auto; margin-right: auto;}
#gridBox .row{margin-left: -10px; margin-right: -10px;}
#gridBox .row .col-sm-3{padding-left: 10px; padding-right: 10px;}
#gridBox .title{color: #5e5e5e; font-size: 18px;margin-top: 10px; font-weight: bold; padding-left: 3.8%;}
#gridBox p{color: #a8a9aa;padding-left: 3.8%;}

#gridBox .boxdes{display: block; text-decoration: none; margin-bottom: 20px;}
#gridBox  .box-img{ overflow: hidden;display: block; position: relative; border-radius: 5px;}
#gridBox  .box-img img{ transition:all 0.3s ease;}
#gridBox a:hover.boxdes .box-img img{ transform: scale(1.2); } 
#gridBox  a:hover.boxdes .title{color: #000;}

