@charset "utf-8";

#banner{width:100%; height:100%; position:fixed; z-index:1; left:0; top:0; overflow: hidden;}
#banner .swiper-container{height:100%;}
#banner .swiper-wrapper{height:100%;}
#banner .swiper-slide{width:100%; height:100%;}
#banner .swiper-slide>div.img{width:100%; height:100%; z-index:2; background-size: cover; background-position:center; background-repeat:no-repeat;}

#banner .swiper-pagination{bottom:40px;}
#banner .swiper-pagination-bullet{width:11px; height:11px; margin:0 6px; opacity:1; background:#fff; transition:all .25s;}
#banner .swiper-pagination-bullet-active{width:34px; opacity:1; border-radius:100px; background:#ff4545;}



#m1{padding:108px 0 140px 0; background:#fff; position:relative; z-index:3; text-align:center;}
#m1 .pc{display: block;}
#m1 .mp{display: none;}
#m1 .box{width:945px; margin:46px auto 0 auto; padding-left:123px; box-sizing:border-box;}
#m1 .box>a{width:82px; height:120px; margin:0 123px 0 0; float:left;}
#m1 .box>a .img{width:80px; height:80px; border:1px solid #2d2d2d; border-radius:50%; position:relative; transition:all .35s;}
#m1 .box>a .img:after{content:''; display:block; width:0; height:0; background:#ff4545; position:absolute; left:50%; top:50%; border-radius:100px; z-index:1; transition:all .4s; opacity:0;}
#m1 .box>a .img img{position:absolute; width:100%; height:100%; left:0; top:0; transition:all .25s; z-index:2;}
#m1 .box>a .img img.white{opacity:0; z-index:3;}
#m1 .box>a .tit{font-size:1.8rem; margin-top:15px; transition:all .25s;}
#m1 .box>a:hover .img{border:1px solid #ff4545; background:#ff4545;}
#m1 .box>a:hover .img .black{opacity:0;}
#m1 .box>a:hover .img .white{opacity:1;}
#m1 .box>a:hover .tit{color:#ff4545;}
#m1 .box>a:hover .img:after{width:80px; height:80px; left:0; top:0; opacity:1; transition:all .2s;}


#m2{background:#fff; position:relative; z-index:3;}
#m2>a{display:block; width:50%; float:left; position:relative; padding-bottom:30%; height:0; overflow:hidden;}
#m2>a .img{width:100%; height:100%; position:absolute; z-index:1; left:0; top:0; background-position:50%; background-repeat:no-repeat; background-size:cover; transition:all 0.3s; transform:scale(1.0000000001);}
#m2>a:after{content:''; display:block; width:100%; height:100%; background:rgba(0,0,0,.7); position:absolute; left:0; top:0; z-index:2; transition:all .35s; opacity:0;}
#m2>a .box{display:table; width:100%; height:100%; z-index:3; position:absolute; opacity:0; transition:all .36s; margin-top:-15px;}
#m2>a .con{color:#fff; display:table-cell; vertical-align:middle; text-align:center;}
#m2>a .con .tit{font-size:2.4rem;}
#m2>a .con .desc{font-size:1.8rem; font-weight:300; margin-top:13px;}
#m2>a:hover:after{opacity:1;}
#m2>a:hover .img{transform:scale(1.05);}
#m2>a:hover .box{margin-top:0; opacity:1;}

#m2>div{clear: both; padding-top: 80px; background: #fff; }
#m2 .more{width:198px; height:42px; line-height:40px; display:block; text-align:center; font-size:1.6rem; border:1px solid #2d2d2d; margin: auto; transition:all .2s;}
#m2 .more:hover{background:#2d2d2d; color:#fff;}



#m3{padding:100px 0; background: #fff; position:relative; z-index:3;}
#m3>.wrap>.tit{font-size:3.3rem; color:#2d2d2d; font-weight:bold; padding-bottom:8px; line-height:1;}

#m3 .top{margin-top: 46px;}
#m3 .top a{display: block;}
#m3 .top a .l{width: 683px; height: 390px; float: left; overflow:hidden;}
#m3 .top a .l p{height:100%; background-size:cover; background-position:center; background-repeat:no-repeat; transition:all .3s;}
#m3 .top a:hover .l p{transform:scale(1.05);}
#m3 .top a .r{width: 645px; height: 390px; float: right; display: table;}
#m3 .top a .r .box{display: table-cell; vertical-align: middle;}
#m3 .top a .r .box>.tit{font-size: 2.667rem; color: #2d2d2d; transition:all .2s;}
#m3 .top a:hover .r .box>.tit{color:#ff4545;}
#m3 .top a .r .box>.desc{font-size: 1.6rem; color: #777; line-height: 1.9; margin-top: 25px; padding-right: 120px;}

#m3 .btm{margin-top: 24px;}
#m3 .btm>a{display: block; width: 450px; height: 495px; float: left; margin-right: 25px;}
#m3 .btm>a:last-child{margin-right: 0;}
#m3 .btm>a .img{width: 100%; height: 255px; overflow: hidden;}
#m3 .btm>a .img>p{height:100%; background-size:cover; background-position:center; background-repeat:no-repeat; transition:all .3s;}
#m3 .btm>a:hover .img>p{transform:scale(1.05);}
#m3 .btm>a .box{padding: 50px 40px; background: #fff; height: 240px;}
#m3 .btm>a .box .tit{font-size: 2.667rem; color: #2d2d2d; transition: all .2s;}
#m3 .btm>a:hover .box .tit{color:#ff4545;}
#m3 .btm>a .box .desc{
  font-size: 1.6rem;
  color: #777;line-height: 1.9;
  margin-top: 25px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

#m3 .more-wrapper{clear: both; padding-top: 180px;}
#m3 .more-wrapper .more{width:198px; height:42px; line-height:40px; display:block; text-align:center; font-size:1.6rem; border:1px solid #2d2d2d; margin: auto; transition:all .2s;}
#m3 .more-wrapper .more:hover{background:#2d2d2d; color:#fff;}



@media (max-width:1440px){
  #m3 .top a .l{width: 643px; height: 367px;}
  #m3 .top a .r{width: 605px; height: 367px;}
  #m3 .top a .r .box>.desc{padding-right: 100px;}

  #m3 .btm>a{width: 424px; height: 466px; margin-right: 24px;}
  #m3 .btm>a .img{height: 240px;}

  #m3 .more-wrapper{padding-top: 200px;}
}
@media (max-width:1366px){
  #m3 .top a .l{width: 620px; height: 354px;}
  #m3 .top a .r{width: 585px; height: 354px;}
  #m3 .top a .r .box>.desc{padding-right: 80px;}

  #m3 .btm>a{width: 406px; height: 447px; margin-right: 24px;}
  #m3 .btm>a .img{height: 230px;}
}
@media (max-width:1280px){
  #m3 .top a .l{width: 580px; height: 330px;}
  #m3 .top a .r{width: 545px; height: 330px;}
  #m3 .top a .r .box>.desc{padding-right: 40px;}

  #m3 .btm{margin-top: 23px;}
  #m3 .btm>a{width: 378px; height: 416px; margin-right: 23px;}
  #m3 .btm>a .img{height: 214px;}
}
@media (max-width:1080px){
  #banner{width:100%; height:80%; position:fixed; z-index:1; left:0; top:0; overflow: hidden;}
  #m1{padding:48px 20px 68px 20px;}
  #m1 .pc{display: none;}
  #m1 .mp{display: block; text-align: left;}
  #m1 .box{width:100%; padding-left:0;}
  #m1 .box>a{width: 25%; height: auto; margin: 0; text-align: left;}
  #m1 .box>a .img{width: 50px; height: 50px; margin: unset;}
  #m1 .box>a .tit{font-size: 1.45rem; margin-top: 10px;}
  #m1 .box>a:hover .img:after{width:50px; height:50px;}

  #m2>div{padding-top: 50px;}
  #m2>a{width:100%; float:none; padding-bottom:60%;}
  #m2>a .con .tit{font-size:2.0rem;}
  #m2>a .con .desc{font-size: 1.45rem; padding: 0 20px; margin-top:5px;}

  #m3{padding-top: 50px;}
  #m3>.wrap>.tit{text-align: center; font-size: 2.6rem;}

  #m3{background: #fff;}
  #m3 .top{margin-top: 20px;}
  #m3 .top a .l{width: 100%; height: 0; float: none; padding-bottom: 57.1%; position: relative;}
  #m3 .top a .l p{width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
  #m3 .top a .r{width: 100%; height: auto; float: none; display: block;}
  #m3 .top a .r .box{display: block; padding: 30px 20px 20px 20px;}
  #m3 .top a .r .box>.desc{padding-right: 0; margin-top: 15px;}

  #m3 .btm{margin-top: 20px;}
  #m3 .btm>a{width: 100%; height: auto; float: none; margin-right: 0; margin-top: 20px;}
  #m3 .btm>a .img{width: 100%; height: 0; padding-bottom: 57.1%; position: relative;}
  #m3 .btm>a .img>p{height:100%; width: 100%; position: absolute; left: 0; top: 0;}
  #m3 .btm>a .box{padding: 30px 20px; height: auto;}
  #m3 .top a .r .box>.tit{font-size: 2.0rem;}
  #m3 .top a .r .box>.desc{font-size: 1.45rem;}
  #m3 .btm>a .box .tit{font-size: 2.0rem;}
  #m3 .btm>a .box .desc{font-size: 1.45rem; margin-top: 15px;}

  #m3 .more-wrapper{padding-top: 25px;}
}