@charset "utf-8";

#banner{width:100%; height: 470px; background: #fafafa no-repeat center/cover;}
#banner .wrap{position: relative; top: 38.2%; font-size: 2.6rem; color: #2b2b2b;}
#banner .wrap>i{content: ''; display: block; width: 4px; height: 6rem; background: #2e7eef; left: 0; top: 4px; position: absolute;}
#banner .wrap>span{display: inline-block; padding-left: 25px; width: 50%; line-height: 1.3; color: #fff;}

#space{height: 100px;}

@media (max-width:1279px){ /*mp*/
  #banner{display: none;}
  #mp-head{background: #1f53be; height: 80px;}
  #space{height: 120px;}
}


/* 栏目菜单 */
#child{background: none; padding: 0; position: relative; top: -40px;}
#child .wrap>a{width: 25%;}

@media (max-width:1279px){ /*mp*/
  #child .wrap{height: 48px;}
  #child .wrap>a{line-height: 47px; font-size: 1.3rem;}
  #child .wrap>a::after{height: 1.3rem; top: 17px;}
}


/* 展示 */
#show{padding: 110px 0 150px 0; background: #f6f7fb; margin-top: -80px;}
#show .wrap>.tit{color: #2b2b2b; font-size: 3.2rem; font-family: 'Montserrat';}
#show .wrap>.desc{color: #2b2b2b; font-size: 1.6rem; font-family: 'Muli'; margin-top: 20px; line-height: 1.8;}

#show .list{margin-top: 60px; display: flex; flex-wrap: wrap;}
#show .list a{display: block; width: 25%; box-sizing: border-box; height: 0; padding-bottom: 25%; border-right: 1px solid #fff; border-bottom: 1px solid #fff; overflow: hidden; position: relative; transition: all .3s;}
#show .list a:hover{background: #fff;}
#show .list a .img{width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: no-repeat center/cover; transition: all .27s; background-origin: content-box; padding: 0; box-sizing: border-box;}
#show .list a:hover .img{transform: scale(1.09);}
#show .list a::after{content: ''; display: block; position: absolute; width: 100%; height: 100%; top: -100%; left: 0; z-index: 1; transition: all .36s;background: linear-gradient(rgba(255,255,255, .5), rgba(255,255,255, 0)); opacity: 0;}
#show .list a:hover::after{top: 0; opacity: 1;}
#show .list a .tit{position: absolute; width: 100%; height: 45px; z-index: 2; bottom: 25px; left: 0; right: 0; margin: auto; text-align: center; transition: all .27s;}
#show .list a:hover .tit{bottom: 0;}
#show .list a .tit>span{max-width: 100%; box-sizing: border-box; height: 45px;  background: #1f53be; display: inline-block; padding: 0 20px; color: #fff; line-height: 45px; font-size: 1.6rem; transition: all .3s;}
#show .list a:hover .tit>span{background: #2e7eef;}


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

}
@media (max-width:1439px){ /*1366*/
  #banner{height: 450px;}
  #banner .wrap{top: 36%;}

  #show .wrap>.tit{font-size: 3rem;}
  #show .wrap>.desc{font-size: 1.6rem;}
}
@media (max-width:1365px){ /*1280*/
  #show .wrap>.tit{font-size: 2.8rem;}
  #show .wrap>.desc{font-size: 1.5rem;}
  #show .list a .tit{height: 43px;}
  #show .list a .tit>span{font-size: 1.4rem; height: 43px; line-height: 43px;}
}
@media (max-width:1279px){ /*MP*/
  #show{padding: 70px 15px 100px 15px;}
  #show .wrap>.tit{font-size: 2.2rem;}

  #show .list{margin-top: 30px;}
  #show .list a{width: 50%; padding-bottom: 50%;}
  #show .list a:hover{background: #fff;}
  #show .list a .tit{height: 40px; bottom: 0; width: 100%;}
  #show .list a .tit>span{height: 40px; line-height: 40px; display: block;}
}