@charset "UTF-8";

.photo-notice{position: relative;padding: 40px;}
.photo-notice .info ul{padding-bottom: 70px;}
.photo-notice .info ul::after{content: ""; display: table; clear: both;}
.photo-notice .info li {
    overflow: hidden;
    float: left;
    position: relative;
    width: 24.3%;
    margin-right: 0.93%;
    border: 1px solid #4941414a;
    /* border-radius: 8px; */
}
.photo-notice .info li a{display: block; width: 100%; height: 100%;}
.photo-notice .info li:nth-child(even){top: 30px;}
.photo-notice .info li:last-child{margin-right: 0;}
.photo-notice .info li.nodata {width: 100%; text-align: center; color: #fff;}
.photo-notice .photo-box{position: relative;}
.photo-notice .photo-thumbnail{width: 100%; height: 345px; transition: all .3s;}
.photo-notice .photo-title{position: absolute; left: 0; bottom: 0; width: 100%; background-color: #05052da6; transition: all .3s; height: 55px;padding: 0px 15px;}
.photo-notice .photo-more {
    display: none;
    width: 75px;
    height: 75px;
    margin: 0 auto;
    opacity: 0;
    transition: all .3s;
    font-size: 0;background: url(../images/photo_more.png) no-repeat center 20px;
}
.photo-notice .photo-title span{overflow: hidden; display: block; padding: 10.5px 15px; font-family: 'Noto Thin'; transition: all .3s; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.photo-notice .photo-title p {
    color: #fff;    font-family: 'Dream Light';    font-size: 0.9rem;
    font-weight: 200;
    line-height: 1.45rem;
    letter-spacing: 0; padding-top:30px;
}
.photo-notice .info li:hover .photo-thumbnail{transform: scale(1.05);}
.photo-notice .info li:hover .photo-title{height: 100%; padding-top: 0; text-align: center;border:1px dotted #fff;}
.photo-notice .info li:hover .photo-title span{font-size:1.5rem!important;overflow: auto; position: relative; display: inline; margin-top: 15px; padding: 0 15px; background: linear-gradient(to bottom, transparent 85%, #ffffff55 0) left center no-repeat; font-size: 18px; text-align: center; text-overflow:inherit; white-space: normal; color:#01e0f9;line-height:1.4rem;}
.photo-notice .info li:hover .photo-more{display: block; opacity: 1;}
.photo-notice .row .more-box{text-align: center;display:none;}
.photo-notice .row .more-box a{display: inline-block; font-size: 14px; color: #fff; font-family: 'Mont Regular'; border-top: 1px solid rgba(255,255,255,0.5); border-bottom: 1px solid rgba(255,255,255,0.5); padding: 13.5px 57px; text-transform: uppercase; transition: all .3s;}
.photo-notice .row .more-box a span{position: relative;}
.photo-notice .row .more-box a span::after{content: ""; display: block; position: absolute;  left: 0; bottom: 0; width: 0%; height: 1px; background-color: #fff;transition: all .3s;}
.photo-notice .row .more-box a:hover{border-top:1px solid #fff; border-bottom: 1px solid #fff;}
.photo-notice .row .more-box a:hover span::after{width: 100%;}

@media all and (max-width: 1023px) {
    .photo-notice .photo-thumbnail{height: 300px;}
    .photo-notice .info li:hover .photo-title{padding-top: 12%;}
}

@media all and (max-width: 768px) {
    .photo-notice .info li{width: 49%; margin-right: 0; margin-bottom: 20px;}
    .photo-notice .info li:nth-child(even){float: right; top: 0;}
    .photo-notice .photo-thumbnail{height: 250px;}
}

@media all and (max-width: 420px) {
    .photo-notice .info li{width: 100%; float: none;}
    .photo-notice .info li:nth-child(even){float: none;}
}