.ListBlock3_wrap {}
.ListBlock3_wrap-wrap .ListBlock {}

.tbGallBasic {margin:0 -10px;}
.tbGallBasic > li { padding-left: 10px; padding-right: 10px; }

.ListBlock3_wrap .ListBlock ul li {padding-left: 10px; padding-right: 10px; padding-bottom: 20px; vertical-align: top; display: inline-block;}

/*리스트 안에 이미지, 멘트*/
.tbGallBasic .gall-thum {position:relative; padding-bottom: 112%; }
.tbGallBasic .gall-thum img { position: absolute; width:100%; height:100%; object-fit:cover; filter : grayscale(1);}

.tbGallBasic > li .gall-thum:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-color:#C03300; opacity:0; z-index:1; transition: opacity 0.3s; }
.tbGallBasic > li:hover .gall-thum:after { opacity:.8;  }

.tbGallBasic .gall-description { width:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -60%); display:inline-block; padding: 1.2em 20px; z-index:2; }
.tbGallBasic .gall-description h4 { font-size:3.6rem; line-height:1.4em; color:#FFF; text-align:center; opacity:0;  transition: opacity 0.3s; /*display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word;*/}
.tbGallBasic > li:hover .gall-description h4 { opacity:1;}

@media screen and (max-width:1024px){
  .tbGallBasic .gall-description h4 { font-size:2.8rem; }
}
@media screen and (max-width:768px){
  .tbGallBasic {margin:0 -5px;}
  .tbGallBasic > li { padding-left: 5px; padding-right: 5px; }
}

@media screen and (max-width:560px){
  .tbGallBasic > li.li33 { width: 50%;}
  .tbGallBasic .gall-description h4 { font-size:2rem; }
}

@media screen and (max-width:480px){
  
}