@charset "UTF-8";

.wrap-photo {padding: 80px 0 40px 0;}
.wrap-photo .photo-title {position: relative; text-align: right;}
.wrap-photo .photo-title h1 {display: none; width: 100%; font-size: 60px; color: #242424; font-family:'Mont Bold'; line-height: 1;}
.wrap-photo .photo-title h1::before {content: ''; position: absolute; left: 213px; top: 70px; width: 56px; height: 43px; background: url('/Web-home/fnct/recentBbs/eng_recentBbs/images/ico-news.png') no-repeat center center;}
.wrap-photo .photo-list .first .thumb {height: 510px;}
.wrap-photo .photo-list .thumb {height: 250px; margin: 0 0 30px 0; background-size: cover !important;}
.wrap-photo .photo-list .slider {width: 103.5%; margin: 30px 0 0 0;}
.wrap-photo .photo-list .slider .first {width: 50%; padding: 0 4.2% 0 0;}
.wrap-photo .nodata {padding: 100px 0 140px 0; text-align: center;}

.wrap-photo .photo-list .slider> a {display: block; position: relative; top: 60px; opacity: 0;}
.multipleDiv.edit .wrap-photo .photo-list .slider a {opacity: 1;}
.multipleDiv.on .wrap-photo .photo-list .slider a {display: block; opacity: 1; top: 0; transition: .2s;}
/*
.multipleDiv.on .wrap-photo .photo-list .slider li:nth-child(1) a {transition-delay: 0s;}
.multipleDiv.on .wrap-photo .photo-list .slider li:nth-child(2) a{transition-delay: .4s;}
.multipleDiv.on .wrap-photo .photo-list .slider li:nth-child(3) a {transition-delay: .8s;}
.multipleDiv.on .wrap-photo .photo-list .slider li:nth-child(4) a {transition-delay: 1.2s;}
.multipleDiv.on .wrap-photo .photo-list .slider li:nth-child(5) a {transition-delay: 1.6s;}
*/

.wrap-photo .photo-list .slider li {float: left; width: 25%; padding: 0 3.5% 40px 0;}
.wrap-photo .photo-list .subject {display: inline; font-family: 'Roboto'; font-weight: 500; font-size: 19px; line-height: 1.2; height: 50px; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;    text-overflow: ellipsis;}
.wrap-photo .photo-list .subject {position: relative; background: linear-gradient(to bottom, transparent 60%, rgba(124,195,255,0.64) 0) left center no-repeat; background-size: 0; transition: .4s;}
/*
.wrap-photo .photo-list a:hover .subject{background-size: 100% auto;}
*/
.wrap-photo .photo-list a:hover .subject {color: #373B7B;}
.wrap-photo .photo-list .desc {padding: 20px 0 0 0; font-family: 'Roboto'; font-size: 15px; color: #666;}
.wrap-photo .photo-list .date {display: block; padding: 55px 0 0 0; font-family: 'Roboto'; font-size: 14px; color: #666;}
.wrap-photo .control {display: inline-block;}
.wrap-photo .control button,
.wrap-photo .control a {display: inline-block; width: 40px; height: 40px; font-size: 0; vertical-align: middle; transition: 0s;}
.wrap-photo .control button:hover,
.wrap-photo .control a:hover {background-position: center bottom !important;}
.wrap-photo .control .state {display: inline-block; vertical-align: middle;}
.wrap-photo .control button {display: none;}
.wrap-photo .control button.prev {background: url('../images/btn-photo-prev.png') no-repeat center top;}
.wrap-photo .control button.next {background: url('../images/btn-photo-next.png') no-repeat center top;}
.wrap-photo .control .more,
.wrap-photo .btn-photo {position: absolute; top: 0; right: 0; background: url('../images/btn-photo-more.png') no-repeat center top; display: inline-block; width: 40px; height: 40px; font-size: 0; vertical-align: middle; transition: 0s;}
.hidden-more {display: none;}

@media all and (max-width: 1300px) {
    .wrap-photo .photo-list .slider li {width: 50%;}
    .wrap-photo .photo-list .slider li:nth-child(n+5) {display: none;}
    .wrap-photo .photo-list .first .thumb {height: 300px}
    .wrap-photo .photo-list .desc {display: none;}
    .wrap-photo .photo-list .date {display: none;}
    .wrap-photo .photo-list .subject {display: inline-block; overflow: hidden; width: 100%; white-space: nowrap; text-overflow: ellipsis; height: auto;}
}

@media all and (max-width: 1023px) {
.wrap-photo .control .more,
.wrap-photo .btn-photo {position: static; margin: 0 0 30px 0; float: right;}

}

@media all and (max-width: 700px) {
    .wrap-photo {padding: 70px 0 30px 0;}
    .wrap-photo .photo-list .slider {width: 100%;}
    .wrap-photo .photo-list .slider li {width: 100% !important; padding: 0 0 40px 0 !important;}
    .wrap-photo .photo-list .slider li:nth-child(n+5) {display: block;}
}