#ref{
  margin:0 0 80px 0;
}

#ref .head1{position:relative;z-index:1;padding-top:18%;margin:0 0 50px 0;}
  #ref .head1:before{
    content:"";position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;background:#000;opacity:0.6;
  }
  #ref .head1 img.back{
    display:block;
    position:absolute;z-index:1;left:0;top:0;width:100%;height:100%;object-fit:cover;
  }
  #ref .head1 h1{
    position:absolute;z-index:3;left:50%;bottom:0px;translate:-50% 0;
    padding:0!important;margin:0!important;font-weight:normal;font-size:6rem;font-family:'montserrat_bold';letter-spacing:2px;
    -webkit-text-stroke: 1px #30d5c8;color:transparent;/*color:#fff;*/
  }
@media only screen and (max-width:1200px){
  #ref .head1 h1{font-size:2rem;}
}
@media only screen and (max-width:1000px){
  #ref .head1{padding-top:25%;}
}
@media only screen and (max-width:700px){
  #ref .head1{padding-top:40%;}
  #ref .head1 h1{font-size:1.8rem;}
}
@media only screen and (max-width:500px){
  #ref .head1{padding-top:55%;}
  #ref .head1 h1{font-size:1.1rem;}
}



#ref .sect20{}
#ref .sect20 .grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:40px;}
#ref .sect20 .grid .s{}
#ref .sect20 .grid .s a{
  display:block;position:relative;padding-top:60%;
  border-radius:20px;box-shadow:0 0 40px 1px #bbb;
  background:#fff;
  
}
#ref .sect20 .grid .s a img{
  position:absolute;z-index:1;left:0;top:0;width:100%;height:100%;object-fit:contain;transform:scale(0.6);
  transition:transform 500ms ease-out;
}
#ref .sect20 .grid .s a:hover img{
  transform:scale(0.9);
}
@media only screen and (max-width:1000px){
  #ref .sect20 .grid{grid-template-columns:repeat(3,1fr);grid-gap:40px;}
}
@media only screen and (max-width:800px){
  #ref .sect20 .grid{grid-template-columns:repeat(2,1fr);grid-gap:20px;}
}




/*
#ref{
  margin:0 0 80px 0;
}

#ref .head1{position:relative;z-index:1;padding-top:18%;margin:0 0 50px 0;}
  #ref .head1:before{
    content:"";position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;background:#000;opacity:0.6;
  }
  #ref .head1 img.back{
    display:block;
    position:absolute;z-index:1;left:0;top:0;width:100%;height:100%;object-fit:cover;
  }
  #ref .head1 h1{
    position:absolute;z-index:3;left:50%;bottom:0px;translate:-50% 0;
    padding:0!important;margin:0!important;font-weight:normal;font-size:6rem;font-family:'montserrat_bold';letter-spacing:2px;
    -webkit-text-stroke: 1px #30d5c8;color:transparent;
  }
@media only screen and (max-width:1200px){
  #ref .head1 h1{font-size:2rem;}
}
@media only screen and (max-width:1000px){
  #ref .head1{padding-top:25%;}
}
@media only screen and (max-width:700px){
  #ref .head1{padding-top:40%;}
  #ref .head1 h1{font-size:1.8rem;}
}
@media only screen and (max-width:500px){
  #ref .head1{padding-top:55%;}
  #ref .head1 h1{font-size:1.1rem;}
}



#ref .sect20{}
#ref .sect20 .grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:40px;}
#ref .sect20 .grid .s{}
#ref .sect20 .grid .s a{
  display:block;position:relative;padding-top:60%;
  border-radius:20px;box-shadow:0 0 40px 1px #bbb;
  background:#fff;
  
}
#ref .sect20 .grid .s a img{
  position:absolute;z-index:1;left:0;top:0;width:100%;height:100%;object-fit:contain;scale:0.6;
}
@media only screen and (max-width:1000px){
  #ref .sect20 .grid{grid-template-columns:repeat(3,1fr);grid-gap:40px;}
}
@media only screen and (max-width:800px){
  #ref .sect20 .grid{grid-template-columns:repeat(2,1fr);grid-gap:20px;}
}
*/