@charset "utf-8";


.lt-works-inner .listBox{ display: flex; flex-wrap: wrap; margin: 0 auto; }
.lt-works-inner .listBox > li{ position: relative; width: 19.2%; margin-right: 1%; }
.lt-works-inner .listBox > li:nth-of-type(5n){ margin-right: 0; }
.lt-works-inner .listBox > li:nth-of-type(n+6){ margin-top: 30px; }
.lt-works-inner .listBox > li.empty_list{ width: 100%; margin: 0; }
.lt-works-inner .listBox > li > .gall_chk{ position: absolute; left: 10px; top: 10px; z-index: 20; }
.lt-works-inner .listBox > li > a{ display: block; }
.lt-works-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-works-inner .listBox .imgBox{ position: relative; width: 100%; border-radius: 6px; overflow: hidden; }
.lt-works-inner .listBox .imgBox img{ width: 100% !important; object-fit: cover; transition: all 0.5s ease-out; }
.lt-works-inner .listBox .imgBox .img-shade { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 0; background-color: rgba(0, 0, 0, .6); transition: all .3s ease-out; }
.lt-works-inner .listBox .imgBox .btn-more { position: absolute; display: inline-block; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 14px; line-height: 28px; margin: 0 auto; padding: 0 20px; border-radius: 6px; border: 1px solid #fff; opacity: 0; transition: all .3s ease-out; }


/** info box */
.lt-works-inner .listBox .info-box { position: relative; width: 100%; padding: 15px 0 0; text-align: left; background-color: transparent; z-index: 11; border-radius: 6px; overflow: hidden; }
.lt-works-inner .listBox .info-box > span{ display: inline-block; font-size: 12px; line-height: 20px; padding: 0 6px; border-radius: 4px; background-color: #FFC917; margin-bottom: 5px; }
.lt-works-inner .listBox .info-box > h5{ display: block; width: 100%; font-size: 16px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .2s ease-out; }

/** hover box */
.lt-works-inner .listBox .imgBox .hovBox{ position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: rgba(0, 0, 0, .6); overflow: hidden; z-index: 10; opacity: 0; transition: all .3s ease-out; }
.lt-works-inner .listBox .imgBox .hovBox > span{ display: inline-flex; justify-content: space-between; align-items: center; width: 130px; height: 40px; border-radius: 6px; background-color: #FFC917; padding: 12px; opacity: 0; transform: translateY(20px); transition: all .3s ease-out .2s; }
.lt-works-inner .listBox .imgBox .hovBox > span > p{ font-size: 12px; font-weight: 500; color: #181818; }

/*? hover */
.lt-works-inner .listBox li > a:hover{ border-color: rgba(256, 256, 256, .1); }
.lt-works-inner .listBox li > a:hover .hovBox{ opacity: 1; }
.lt-works-inner .listBox li > a:hover .hovBox > span{ opacity: 1; transform: translateY(0); }
.lt-works-inner .listBox li > a:hover .info-box > h5{ color: #FFC917; }



/** rel item */
.rel-item { position: relative; width: 100%; margin-top: 10px; padding: 10px 10px; background-color: #f8f8f8; border-radius: 6px; }
.rel-item.dat-none{ display: none; }
.rel-item > a{ display: block; width: 100%; }
.rel-item > a:nth-of-type(2){ margin-top: 8px; border-top: 1px solid #ededed; padding-top: 8px; }
.rel-item > a > ul{ display: flex; justify-content: flex-start; align-items: center; }
.rel-item > a > ul > li > span{ position: relative; display: block; width: 52px; height: 52px; border: 1px solid #ededed; border-radius: 3px; background-color: #fff; overflow: hidden; }
.rel-item > a > ul > li > span > img{ width: 100%; object-fit: cover; }
.rel-item > a > ul > li:last-of-type{ padding-left: 11px; text-align: left; }
.rel-item > a > ul > li > h5{ font-size: 13px; font-weight: 500; transition: all .2s ease-out; }
.rel-item > a > ul > li > p{ font-size: 11px; color: #B5B5B5; margin-top: 5px; }

.rel-item > a:hover > ul > li > h5{ color: #FFC917; }
.rel-item > a.dat-none{ display: none; }







/*! TABLET  */
@media screen and (max-width: 1279px){ 
    
.lt-works-inner .listBox{ display: flex; flex-wrap: wrap; margin: 0 auto; }
.lt-works-inner .listBox > li{ position: relative; width: 49%; margin-right: 1%; }
.lt-works-inner .listBox > li:nth-of-type(5n){ margin-right: 1%; }
.lt-works-inner .listBox > li:nth-of-type(n+3){ margin-top: 30px; }
.lt-works-inner .listBox > li.empty_list{ width: 100%; margin: 0; }
.lt-works-inner .listBox > li > .gall_chk{ position: absolute; left: 10px; top: 10px; z-index: 20; }
.lt-works-inner .listBox > li > a{ display: block; }
.lt-works-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-works-inner .listBox .imgBox{ position: relative; width: 100%; border-radius: 6px; overflow: hidden; }
.lt-works-inner .listBox .imgBox img{ width: 100% !important; object-fit: cover; transition: all 0.5s ease-out; }
.lt-works-inner .listBox .imgBox .img-shade { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 0; background-color: rgba(0, 0, 0, .6); transition: all .3s ease-out; }
.lt-works-inner .listBox .imgBox .btn-more { position: absolute; display: inline-block; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 14px; line-height: 28px; margin: 0 auto; padding: 0 20px; border-radius: 6px; border: 1px solid #fff; opacity: 0; transition: all .3s ease-out; }

/*? hover */
.lt-works-inner .listBox li > a:hover{ border-color: rgba(256, 256, 256, .1); }
.lt-works-inner .listBox li > a:hover .hovBox{ opacity: 0; }



}


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

.lt-works-inner .listBox{ display: flex; flex-wrap: wrap; margin: 0 auto; }
.lt-works-inner .listBox > li{ position: relative; width: 49%; margin-right: 1%; }
.lt-works-inner .listBox > li:nth-of-type(5n){ margin-right: 1%; }
.lt-works-inner .listBox > li:nth-of-type(n+3){ margin-top: 30px; }
.lt-works-inner .listBox > li.empty_list{ width: 100%; margin: 0; }
.lt-works-inner .listBox > li > .gall_chk{ position: absolute; left: 10px; top: 10px; z-index: 20; }
.lt-works-inner .listBox > li > a{ display: block; }
.lt-works-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-works-inner .listBox .imgBox{ position: relative; width: 100%; border-radius: 6px; overflow: hidden; }
.lt-works-inner .listBox .imgBox img{ width: 100% !important; object-fit: cover; transition: all 0.5s ease-out; }
.lt-works-inner .listBox .imgBox .img-shade { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 0; background-color: rgba(0, 0, 0, .6); transition: all .3s ease-out; }
.lt-works-inner .listBox .imgBox .btn-more { position: absolute; display: inline-block; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 14px; line-height: 28px; margin: 0 auto; padding: 0 20px; border-radius: 6px; border: 1px solid #fff; opacity: 0; transition: all .3s ease-out; }

/** info box */
.lt-works-inner .listBox .info-box { position: relative; width: 100%; padding: 15px 0 0; text-align: left; background-color: transparent; z-index: 11; border-radius: 6px; overflow: hidden; }
.lt-works-inner .listBox .info-box > span{ display: inline-block; font-size: 12px; line-height: 20px; padding: 0 6px; border-radius: 4px; background-color: #FFC917; margin-bottom: 5px; }
.lt-works-inner .listBox .info-box > h5{ display: block; width: 100%; font-size: 14px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .2s ease-out; }


/** rel item */
.rel-item { position: relative; width: 100%; margin-top: 10px; padding: 10px 10px; background-color: #f8f8f8; border-radius: 6px; }
.rel-item.dat-none{ display: none; }
.rel-item > a{ display: block; width: 100%; }
.rel-item > a:nth-of-type(2){ margin-top: 8px; border-top: 1px solid #ededed; padding-top: 8px; }
.rel-item > a > ul{ display: flex; justify-content: flex-start; align-items: center; }
.rel-item > a > ul > li > span{ position: relative; display: block; width: 42px; height: 42px; border: 1px solid #ededed; border-radius: 3px; background-color: #fff; overflow: hidden; }
.rel-item > a > ul > li > span > img{ width: 100%; object-fit: cover; }
.rel-item > a > ul > li:last-of-type{ padding-left: 8px; text-align: left; padding-right: 8px; }
.rel-item > a > ul > li > h5{ display: block; width: 100%; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .2s ease-out; }
.rel-item > a > ul > li > p{ font-size: 10px; color: #B5B5B5; margin-top: 3px; }

.rel-item > a:hover > ul > li > h5{ color: #111; }
.rel-item > a.dat-none{ display: none; }



}