/*英雄剪影*/
.gallery{text-align:center;}
.galleryZone{height:100%;position:relative;}
.galleryZone h2{position:absolute;right:50px; top:50px;z-index: 999;}


.galleryList{ height:100%;max-width: 1600px;margin:auto;}
.galleryList li{
    flex:1;
    position:relative;
    height:100%;
    transition: all .5s;
    align-items:flex-end;
    padding-bottom: 220px;
    
}

.galleryList li>aside{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    overflow:hidden;
}

.galleryList li>aside:after{
     content: "";
     background:center bottom no-repeat;

     width: 100%;
     height:100%;
     filter: grayscale(1) brightness(.7) var(--shadow);
     transition: all .7s;
     position:absolute;
     left: 0;
     top:0;
     z-index: 0;
     
}

.galleryList li + li:before{
    content:"";
    height:100%;
    width:1px;
    position:absolute;
    left: 0;
    top: 0;
    background:#fff;
    z-index: 10;
}



.galleryList li.g1>aside:after{
    background-image:url(../../images/gallery/g1.png);
    background-position:30% bottom;
}

.galleryList li.g2>aside:after{background-image:url(../../images/gallery/g2.png);}
.galleryList li.g3>aside:after{background-image:url(../../images/gallery/g3.png);}
.galleryList li.g4>aside:after{
    background-image:url(../../images/gallery/g4.png);
    background-position:right center;
}

.galleryList li:hover{
     flex:1.5;
     cursor:pointer;
     transition: all .7s;
 }

 .galleryList li:hover>aside:after{
     filter:none;
     filter: var(--shadow);
     transition: all .3s;
     transform:scale(1.1) ;
 }

 .galleryList li:hover div>a{
    display:block;
    transform:translateY(-30px) ;
    transition: all .3s;
 }

 .galleryList li.g1:hover aside:after{
     background-position:center center;
 } 

 .galleryList li.g4:hover aside:after{
     background-position:calc(100% - 100px) center;
 }


  .galleryList li:hover div> a aside:after{
    background:#ae2c2c;
  }

 .galleryList li>div{
    position:relative;
    z-index: 5;
    width: 240px;
    filter:var(--shadow);
    

 }

  .galleryList li>div>aside{}
  .galleryList li>div> a aside:after{
    background:#133548;
    width: 220px;
    height:40px;
    content: "";
    position: absolute;
    z-index: -1;
    left:10px;
    top:20px;
    clip-path: polygon(4%  0, 100% 0,  96% 100%, 0 100%);
  }

  .galleryList li>div p{font-size:18px;color:#fff;font-family: 'Merriweather', serif;}
  .galleryList li>div p big{font-size:65px;color:#fff;}


/*1450x800*/	
@media (max-width:1450px) and (max-height: 800px) {

    .galleryList li>aside:after{
        background-size:cover;
    }

     .galleryList li:hover>aside:after{
         transform:scale(1.1) ;
     }

}