@charset "utf-8";


html,body{background:#f4f5f6;}
#contact{border-top:1px solid #e6e6e6;}


#banner{width:100%; height:650px; background:url('../img/b_show.jpg?20200527') center/cover no-repeat; position:relative;}


#list{padding:0 150px 80px 150px;}
#list .wrap{width:102%; margin-left:-1%;}
#list .item{width:31.3333333%; float:left; margin:1%;}
#list .item:nth-child(3n+1){clear:both;}
#list a{display:block; background:#fff; transition:all .3s;}
#list a .img{width:100%; padding-top:60%; overflow:hidden; position:relative; background:#eee url('../img/ico.photo.png') center/32px no-repeat;}
#list a .img>p{width:100%; height:100%; background-position:center; background-size:cover; position:absolute; left:0; top:0; transition:all .5s ease; transform:scale(1.00000001);}
#list a .tit{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:40px; padding:3% 6% 3.5% 6%; font-size:1.7rem; color:#464646; transition:all .3s; position:relative; font-family: Quicksand;}
#list a .tit:before{position:absolute; left:6%; top:50%; height:0; width:1px; background:#fff; content:''; display:block; transition:all .2s;}
#list a:hover{background:#1885f5;}
#list a:hover .img>p{transform:scale(1.1);}
#list a:hover .tit{color:#fff; padding-left:9.5%;}
#list a:hover .tit:before{margin-top:-.8rem; height:1.6rem; width:4px;}


@media (max-width:1440px){
  #list{padding:0 130px 80px 130px;}
}
@media (max-width:1366px){
  #banner{height:600px;}

  #list{padding:0 100px 80px 100px;}
  #list a .tit{font-size:1.6rem;}
  #list a:hover .tit:before{margin-top:-.7rem; height:1.4rem;}
}
@media (max-width:1280px){
  #banner{height:580px;}

  #list{padding:0 60px 80px 60px;}
  #list a .tit{font-size:1.5rem;}
}
@media (max-width:1080px){
  #banner{height:260px;}

  #list{padding:0 20px 40px 20px;}
  #list .wrap{width:100%; margin-left:0;}
  #list .item{width:100%; float:none; margin:0 0 20px 0;}
  #list .wrap .item.show{opacity:1; transform:translate3d(0,0,0);}
}