@charset "UTF-8";

.wrap-photo {position: relative; min-height: 335px;}
.wrap-photo > ul {position: absolute; height: 100%;}
.wrap-photo > ul > li {display: table; width: 100%; height: 100%; table-layout: fixed;}
.wrap-photo .title {position: relative; display: table-cell; width: 290px; font-family: 'Noto Regular'; font-size: 20px; vertical-align: middle; color: #fff;}
.wrap-photo .title::after {content: ''; position: absolute; left: 34%; top: 0; width: 270px; height: 100%; background: url('../images/logo-photo.png') no-repeat center center;}
.wrap-photo .title em {font-family: 'Noto Medium'; font-size: 30px;}
.wrap-photo .title .text {position: relative; z-index: 1;}
.wrap-photo .control {margin: 25px 0 0 0; font-size: 0;}
.wrap-photo .control button,
.wrap-photo .control a {display: inline-block; width: 50px; height: 50px; margin: 0 1px 0 0; text-indent: -99999px; vertical-align: middle;}
.wrap-photo .control .prev {background: #fff url('../images/arrow-photo-prev.png') no-repeat center center;}
.wrap-photo .control .next {background: #fff url('../images/arrow-photo-next.png') no-repeat center center;}
.wrap-photo .control .more {background: #fff url('../images/arrow-photo-more.png') no-repeat center center;z-index: 1;position: relative;}
.wrap-photo .control .prev:hover,
.wrap-photo .control .next:hover,
.wrap-photo .control .more:hover {background-color: #eee;}
.wrap-photo .list {display: table-cell; vertical-align: middle;}
.wrap-photo .list .slick-slide {padding: 0 20px;}
.wrap-photo .list .thumb {height: 220px;}
.wrap-photo .list .slick-slide img {width: 100%; height: 100%}
.wrap-photo .desc {padding: 20px 30px; background: #fff;}
.wrap-photo .subject {overflow: hidden; display: block; margin: 0 0 10px 0; font-family: 'Noto Regular'; font-size: 16px; color: #222; white-space: nowrap; text-overflow: ellipsis;}
.wrap-photo a:hover .subject {color: #00529c;}
.wrap-photo .date {display: block; font-family: 'Mont Regular'; font-size: 16px; color: #666;}

@media all and (max-width: 1500px) {
    .wrap-photo .title {width: 230px;}
}

@media all and (max-width: 768px) {
    .wrap-photo > ul {position: static;}
    .wrap-photo > ul > li,
    .wrap-photo .title,
    .wrap-photo .list {display: block; width: 100%;}
    .wrap-photo .title {margin: 0 0 25px 0;}
    .wrap-photo .title::after {display: none;}
    .wrap-photo .list .slick-slide {padding: 0;}
    .wrap-photo .list .thumb {height: auto;}
    .wrap-photo .control {position: absolute; right: 0; top: 10px; z-index: 1; margin: 0;}
}