@charset "utf-8";


.lt-benaf-inner .listBox { display: flex; flex-wrap: wrap; margin: 0 auto; }
.lt-benaf-inner .listBox > li{ position: relative; width: 23.5%; margin-right: 2%; }
.lt-benaf-inner .listBox > li:nth-of-type(4n){ margin-right: 0; }
.lt-benaf-inner .listBox > li:nth-of-type(n+5){ margin-top: 30px; }
.lt-benaf-inner .listBox > li.empty_list{ width: 100%; margin: 0; }
.lt-benaf-inner .listBox > li > .gall_chk{ position: absolute; left: 10px; top: 10px; z-index: 20; }
.lt-benaf-inner .listBox > li > a{ display: block; }
.lt-benaf-inner .listBox .li_empty { width: 100%; padding: 100px 0 ; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; font-size: 16px; text-align: center; margin-right: 0; }
.lt-benaf-inner .listBox .imgBox { position: relative; width: 100%; border-radius: 6px; overflow: hidden; }
.lt-benaf-inner .listBox .imgBox img{ width: 100% !important; object-fit: cover; transition: all 0.5s ease-out; }


.lt-benaf-inner .img-comp-container { position: relative; height: 320px; overflow: hidden; /*should be the same height as the images*/ }
.lt-benaf-inner .img-comp-img { position: absolute; width: auto; height: auto; overflow: hidden; }
.lt-benaf-inner .img-comp-img img { display: block; vertical-align: middle; width: 290px; height: 320px; }
.lt-benaf-inner .img-comp-slider { position: absolute; z-index: 9; cursor: ew-resize; /*set the appearance of the slider:*/ width: 37px; height: 37px; background: url(/img/ico_slider.svg) no-repeat center center #FFC917; opacity: 1; border-radius: 50%; }
.lt-benaf-inner .img-comp-slider > span{ display: none; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 2px; background-color: transparent; z-index: 10; }
.lt-benaf-inner .bar-hline { z-index: 6; }
.lt-benaf-inner .sl-text { display: block; white-space: nowrap; font-size: 14px; color: #fff; font-weight: 600; text-align: center; z-index: 11; }

/** info box */
.lt-benaf-inner .listBox .info-box { position: relative; width: 100%; padding: 15px 0 0; background-color: transparent; z-index: 11; border-radius: 0; overflow: hidden; }
.lt-benaf-inner .listBox .info-box > h5{ display: block; width: 100%; font-size: 18px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .2s ease-out; }
.lt-benaf-inner .listBox .info-box .bt-edt { display: inline-block; margin-top: 8px; font-size: 12px; line-height: 22px; padding: 0 6px; color: #fff; background-color: #aaa; }


/*? hover */
.lt-benaf-inner .listBox li:hover .info-box > h5{ color: #FFC917; }





/*! TABLET  */
@media screen and (max-width: 1279px){ 
    
.lt-benaf-inner .listBox { display: flex; flex-wrap: nowrap; margin: 0 auto; overflow: auto; scroll-snap-type: x mandatory; }
.lt-benaf-inner .listBox::-webkit-scrollbar { display: none; }
.lt-benaf-inner .listBox > li{ position: relative; width: 290px; margin-right: 2%; }
.lt-benaf-inner .listBox > li:nth-of-type(4n){ margin-right: 2%; }
.lt-benaf-inner .listBox > li:nth-of-type(n+3){ margin-top: 0; }
.lt-benaf-inner .listBox > li.empty_list{ width: 100%; margin: 0; }
.lt-benaf-inner .listBox > li > .gall_chk{ position: absolute; left: 10px; top: 10px; z-index: 20; }
.lt-benaf-inner .listBox > li > a{ display: block; }
.lt-benaf-inner .listBox .li_empty { width: 100%; padding: 100px 0 ; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; font-size: 16px; text-align: center; margin-right: 0; }
.lt-benaf-inner .listBox .imgBox { position: relative; width: 100%; border-radius: 6px; overflow: hidden; }
.lt-benaf-inner .listBox .imgBox img{ width: 100% !important; object-fit: cover; transition: all 0.5s ease-out; }

.lt-benaf-inner .img-comp-container { position: relative; width: 290px; height: 320px; overflow: hidden; /*should be the same height as the images*/ }


}


/*! MOBILE  */
@media screen and (max-width: 767px){ 


/** info box */
.lt-benaf-inner .listBox .info-box { position: relative; width: 100%; padding: 15px 0 0; background-color: transparent; z-index: 11; border-radius: 0; overflow: hidden; }
.lt-benaf-inner .listBox .info-box > h5{ display: block; width: 100%; font-size: 14px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .2s ease-out; }
.lt-benaf-inner .listBox .info-box .bt-edt { display: inline-block; margin-top: 8px; font-size: 12px; line-height: 22px; padding: 0 6px; color: #fff; background-color: #aaa; }



}