@charset "UTF-8";

.wrap-photo {position: relative; padding: 0 35px; min-height: 495px;}
.wrap-photo .title {font-size: 36px; font-family:'TitilliumWeb-Bold'; padding-bottom: 55px; margin-bottom: 24px; background: url('../images/arrow-photo.png') no-repeat left bottom;}
.wrap-photo .thumb {margin-bottom: 10px;}
.wrap-photo .thumb a {display: block; width: 100%; height: 230px;}
.wrap-photo .subject {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; font-family: 'Noto Regular'; margin-bottom: 21px;}
.wrap-photo .subject a {position: relative;}
.wrap-photo .subject a:after {content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: #006276; transition: all .5s ease;}
.wrap-photo .subject a:hover:after {width: 100%;}
.wrap-photo .subject a:hover {color: #006276;}
.wrap-photo .date {font-size: 14px; color: #666666;}
.wrap-photo .control {position: absolute; right: 35px; bottom: 0; width: 100%; text-align: right;}
.wrap-photo .control:after {content: ''; position: absolute; width: calc(100% - 70px); height: 1px; right: 0; top: 50%; background: #9da5a9; }
.wrap-photo .control button {position: relative; z-index: 100; display: inline-block; width: 75px; height: 50px; text-indent: -99999px;}
.wrap-photo .control button.prev {background: #172b44 url('../images/arrow-photo-prev.png') no-repeat center center; margin-right: -4px;}
.wrap-photo .control button.next {background: #172b44 url('../images/arrow-photo-next.png') no-repeat center center;}
.wrap-photo .control button:hover {background-color: #244977; transition: .4s;}
.wrap-photo .nodata {text-align: center; padding: 35.5% 0;}
.wrap-photo .more {position: absolute; top: 13px; right: 30px; width: 30px; height: 30px; background: url('../images/btn-notice-more.png') no-repeat center center; text-indent: -9999px;}

@media all and (max-width:1400px) {
    .wrap-photo .title {font-size: 24px; line-height: 1.2}
    .wrap-photo .more {top: 0;}
}

@media all and (max-width: 1324px) {
    .wrap-photo .nodata {padding: 104px 0;}
}

@media all and (max-width:1023px) {
    .wrap-photo {padding: 0 0 0 35px;}
    .wrap-photo .thumb img {width: 100%;}
    .wrap-photo .title {font-size: 36px; background-image: none; padding-bottom: 0;}
    .wrap-photo .control {right: 0;}
    .wrap-photo .control:after {width: calc(100% - 35px);}
    .wrap-photo .nodata{padding: 158px 0;}
    .wrap-photo .more {top: 7px; right: 0px;}
}

@media all and (max-width:767px) {
    .wrap-photo {padding: 0 0 60px 0;}
    .wrap-photo .control:after {width: calc(100%);}
}

@media all and (max-width:540px) {
    .wrap-photo {min-height: 465px;}
}