.portfolio {position:relative; width:100%;}
.portfolio .floatImg { position:absolute; top:-12rem; right:10px; width:auto; height:280px; z-index:4;  } 
.portfolio .floatImg img {width:100%; height:100%;}
.portfolio::after {content:""; position:absolute; bottom:0; left:0; width:100%; height:400px; background-color:#f8f8fb; z-index:-1;}
.top_tit {display:flex; justify-content: space-between; align-items: center;}
.top_tit .point {position:relative; display:inline-block;}
.top_tit .point::after {content:""; position:absolute; top:0; right:-20px; width:10px; height:10px; border-radius:50%; background-color: #d71818;}
.top_tit .viewBtn a {color:#b1b1b6;}

.ListBlock2_wrap {}
.ListBlock2_wrap-wrap .ListBlock {}

.tbGallBasic {margin:0 -15px;}
.tbGallBasic > li { padding-left: 15px; padding-right: 15px; padding-bottom:0;}
.tbGallBasic > li:hover .tbGallBasic .gall-description h4:after {width:100%;}

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


/*리스트 안에 이미지, 멘트*/
.tbGallBasic .gall-thum {padding-bottom: 100%; }
.tbGallBasic .gall-thum .thumWrap {position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%;}
.tbGallBasic .gall-thum img { width:100%; height:100%; object-fit:cover; }
.ListBlock-wrap .ListBlock ul li .li_border .gall-thum { border-radius: 10px 10px 0 0;}

.tbGallBasic .gall-description { display:inline-block; padding: 1.2em 0;}
.tbGallBasic .gall-description h4 {position:relative; font-size:2rem;  color:#222; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; }
.tbGallBasic .gall-description .client {margin-bottom:5px;color:#7a7b7e;}
.tbGallBasic li:hover .gall-description h4:after { width:100%; }

@media screen and (min-width:1560px){
  .portfolio .floatImg { right:50px; } 
}

@media screen and (max-width:1400px){
  .portfolio .floatImg { height:240px; } 
}
@media screen and (max-width:1024px){
  .portfolio .floatImg { height:200px;} 
}
@media screen and (max-width:768px){
  .portfolio .floatImg { height:160px;} 
  .tbGallBasic .gall-description h4 { font-size:1.8rem; }
  .tbGallBasic {margin:0 -10px;}
  .tbGallBasic > li { padding-left: 10px; padding-right: 10px; }
}

@media screen and (max-width:560px){
  .portfolio .floatImg { height:120px;} 

}