@charset "utf-8";

.pic_lt{ position:relative; }
.pic_lt ul{ display: flex; flex-wrap: wrap; }
.pic_lt ul li{ position: relative; }
.pic_lt ul li > a{ display: block; }
.pic_lt ul li > a .imgBox{ position: relative; width: 100%; height: 260px; overflow: hidden; }
.pic_lt ul li > a .imgBox::before{ position: absolute; left: 0; bottom: 0; width: 100%; height: 70px; background: rgb(0,0,0); background: linear-gradient(360deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.49763655462184875) 50%, rgba(0,0,0,0) 100%); z-index: 10; content: ''; display: block; }
.pic_lt ul li > a .imgBox::after{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(224, 227, 33, 0.5); content: ''; display: block; opacity: 0; transition: all 0.3s ease-in-out; }
.pic_lt ul li > a .imgBox > .more{ position: absolute; left: 0; bottom: -50px; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 30px 7% 20px; z-index: 20; opacity: 0; transition: all 0.3s ease-in-out; }
.pic_lt ul li > a .imgBox > .more strong{ font-size: 14px; font-weight: 400; color: #fff; }
.pic_lt ul li > a dl{ padding-top: 15px; }
.pic_lt ul li > a dl dt{ font-size: 15px; font-weight: 400; color: #222; }
.pic_lt ul li > a dl dt strong{ font-weight: 400; text-transform: uppercase; }
.pic_lt ul li > a dl dt em{ display: inline-block; font-size: 12px; color: #777; font-style: normal; margin-left: 5px; }
.pic_lt ul li > a dl dd{ height: 46px; font-size: 15px; font-weight: 400; color: #222; letter-spacing: -0.5px; line-height: 23px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word; }
/* ? hover */
.pic_lt ul li > a:hover .imgBox::after{ opacity: 1; }
.pic_lt ul li > a:hover .imgBox > .more{ bottom: 0; opacity: 1; }


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

    .pic_lt ul li{ width: 49%; margin-right: 2%; }
    .pic_lt ul li:nth-of-type(2n){ margin-right: 0; }
    .pic_lt ul li:nth-of-type(n+3){ margin-top: 40px; }
    .pic_lt ul li > a .imgBox{ height: 44vw; min-height: 140px; }
    .pic_lt ul li > a .imgBox > img{ width: 100%; }
    .pic_lt ul li > a .imgBox::after{ display: none; }
    .pic_lt ul li > a .imgBox > .more{ display: none; }
    .pic_lt ul li > a dl{ padding-top: 12px; }
    .pic_lt ul li > a dl dt{ font-size: 11px; }
    .pic_lt ul li > a dl dt strong{ font-weight: 500; }
    .pic_lt ul li > a dl dt em{ font-size: 9px; margin-left: 3px; }
    .pic_lt ul li > a dl dd{ height: 40px; font-size: 13px; letter-spacing: 0; line-height: 20px; }

}

/*! TABLET  */
@media screen and (min-width:768px) and (max-width: 1199px){ 

    .pic_lt ul li{ width: 32%; margin-right: 2%; }
    .pic_lt ul li:nth-of-type(3n){ margin-right: 0; }
    .pic_lt ul li:nth-of-type(n+4){ margin-top: 40px; }
    .pic_lt ul li > a .imgBox{ height: 28vw; }
    .pic_lt ul li > a .imgBox > img{ width: 100%; }
    .pic_lt ul li > a .imgBox::after{ transition: all 0s; }
    .pic_lt ul li > a .imgBox > .more{ transition: all 0s; }
    .pic_lt ul li > a dl dt{ font-size: 14px; }

}

/*! PC  */
@media screen and (min-width: 1200px){ 

    .pic_lt ul li{ width: 260px; margin-right: 20px; }
    .pic_lt ul li:nth-of-type(4n){ margin-right: 0; }
    .pic_lt ul li:nth-of-type(n+5){ margin-top: 60px; }

}