@charset "UTF-8";

.wrap-photo {position:relative; overflow:hidden; max-width: 1400px; margin: 0 auto;}
.wrap-photo .title {position:relative; display:inline-block; font-size:1.25vw; font-family:'Noto Demilight'; display: none;}
.wrap-photo .more {position:absolute; right:0; top:10px; text-indent:-99999px;  width:20px; height:20px; background:url('../images/notice-more.png') no-repeat center center; display: none;}
.wrap-photo .slider {width:105%;}
.wrap-photo .slider li {padding:0 60px 0 0;}
.wrap-photo .slider .con {display:inline-block; width:100%; padding:20px 0; border-bottom:1px solid #d0d0d0;}
.wrap-photo .con {display: inline-block; width: 100%;}
.wrap-photo .con a {position:relative; display: block; width: 100%; height: 100%; position: relative; color: white; font-family: 'Noto Thin';}
.wrap-photo .date {float:right; font-size:0.85vw; color:#a2a2a2}
.wrap-photo .list {margin-top: 10px; overflow:hidden;}
.wrap-photo .list .nodata {text-align: center; padding: 20px 0;}
.wrap-photo .list li {margin-bottom: 7px; width: calc(22% - 1px); float: left; margin-right: 4%; height: 345px; position: relative;}
.wrap-photo .list li:nth-child(even){margin-top:40px;}
.wrap-photo .list li:hover a::before{content:""; display: block; position: absolute; width: 100%; height: 100%; background-color :rgba(0,0,0,0.7); top: 0; left: 0;}
.wrap-photo .list li:hover a::after{content:""; display: block; position: absolute; width: 75px; height: 75px; background: url(../images/photo-hover.png); top: 116px; left: 50%; margin-left: -37.5px;}
.wrap-photo .list li:hover a .recentBbs-comment{background: transparent; bottom: 105px;}
.wrap-photo .list li:hover a .recentBbs-comment p{position: relative; z-index: 2;}
.wrap-photo .list li:hover a .recentBbs-comment::after{content:""; display: block; position: absolute; width: 70%; bottom: 8px; background-color: #243971; height: 15px; left: 15%; z-index: 1;}
.wrap-photo .list li:last-child{margin-right: 0;}
.wrap-photo .list li.nodata{width:100%;padding-top:100px;}
.wrap-photo .recentBbs-image{height: 345px;}
.wrap-photo .recentBbs-comment{position: absolute; bottom: 0; width: 100%; background-color: rgba(0,0,0,0.4); text-align: center; padding: 10.5px 0;}
.wrap-photo .recentBbs-comment p{text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding:0 15px;}

.read-more-btn{text-align: center; font-weight: 400; font-size: 14px; }
.read-more-btn a{padding: 21px 0; color: white !important; display: inline-block; border-top: 1px solid white; border-bottom: 1px solid white; width: 200px; margin-top: 55px;}

@media all and (max-width: 1400px) {
  .wrap-photo {padding: 0 20px;}
}

@media all and (max-width: 1024px) {
  .wrap-photo .recentBbs-image{height: 300px;}
  .wrap-photo .list li .recentBbs-comment p{font-size: 14px;}
  .wrap-photo .list li:hover a .recentBbs-comment{bottom: 65px;}
  .wrap-photo .list li:hover a .recentBbs-comment::after{width: 90%; left: 5%;}
  .read-more-btn a{margin-top: 30px; padding: 15px 0;}
}

@media all and (max-width: 767px) {
  .wrap-photo .list li{width: 100%; float: none; margin-right: 0; margin-bottom: 15px; height: 300px;}
  .wrap-photo .list li:nth-child(even){float: none; }
  .wrap-photo .list li .recentBbs-comment p{font-size:18px;}
}