@charset "utf-8";

.wrap-photo {position: relative;}
.wrap-photo .inner {max-width:unset; padding:0;}
.wrap-photo .photo-title {max-width:1720px; width:100%; margin:0 auto;}
.wrap-photo .title-inner {display: flex; align-items: start; justify-content: space-between; width:calc(50% - 60px); margin-bottom: -50px;}
.wrap-photo .photo-title strong {font-size: 30px; line-height: 1.5; color:#000; font-family: 'SUITE ExtraBold';}
.wrap-photo .control {position: absolute; right:50%; margin-right:3.2%; top:0; z-index: 1;}
.wrap-photo .control button,
.wrap-photo .control a {width:50px; height:50px; border:1px solid #000; text-indent: -9999px; display: inline-block; vertical-align: top; margin-left: 10px; transition: background .3s;}
.wrap-photo .prev {background:#fff url('../images/prev.png') no-repeat center;}
.wrap-photo .next {background:#fff url('../images/next.png') no-repeat center;}
.wrap-photo .more {background:#fff url('../images/more.png') no-repeat center;}
@media (hover: hover) and (pointer: fine) {
    .wrap-photo .control button:hover,
    .wrap-photo .control a:hover {border:1px solid #005BAC;}
    .wrap-photo .prev:hover {background:#005BAC url('../images/prev-on.png') no-repeat center;}
    .wrap-photo .next:hover {background:#005BAC url('../images/next-on.png') no-repeat center;}
    .wrap-photo .more:hover {background:#005BAC url('../images/more-on.png') no-repeat center;}
}

.wrap-photo .slider {font-size: 0;}
.wrap-photo .slider .slick-track {left:19.4%;}
.wrap-photo .slider.nodata-wrap .slick-track {left:0;}
.wrap-photo .slick-slide {max-width:740px; margin:0 20px; max-height:590px; padding-top:159px; transition: padding-top 1.2s;}
.wrap-photo .slick-slide li {max-height:430px;}
.wrap-photo .nodata-wrap {min-height:430px; display: flex; align-items: center; font-family: 'HG Regular';}
.wrap-photo .nodata-wrap > * {font-family: 'HG Regular'; font-size: 17px;}
.wrap-photo .img-box {position: relative; width:100%; height:430px; overflow:hidden;}
.wrap-photo .img-box img {width:100%; height:100%; object-fit:cover; transition: transform .5s;}
.wrap-photo .img-box::after {content:''; width:100%; height:100%; position: absolute; top:0; left:0; background:rgba(0,0,0,0.4); transition:background .5s;}
.wrap-photo .img-box p {position: absolute; bottom:33px; left:40px; font-size: 26px; font-family: 'SUITE Bold'; color:#fff; z-index: 1; transition:bottom 1.2s;}
.wrap-photo .text-box {transform: translateY(-125%); transition: transform 1.2s; position: relative; z-index: -1; padding:0 20px; margin-top: 15px;}
.wrap-photo .text-box strong {font-size: 26px; letter-spacing: -.05em; color:#000; font-family: 'SUITE ExtraBold';}
.wrap-photo .text-box p {font-size: 18px; line-height: 26px; font-family: 'HG Regular'; color:#000; display:-webkit-box; -webkit-line-clamp: 2; overflow:hidden; -webkit-box-orient:vertical; margin-top: 26px;}
.wrap-photo .slick-slide.slick-now {max-height:590px; padding-top: 0;}
.wrap-photo .slick-now .img-box {box-shadow:3px 3px 15px rgba(0,0,0,0.35); overflow:hidden;}
.wrap-photo .slick-now .img-box::after {background:rgba(0,0,0,0);}
.wrap-photo .slick-now .img-box p {bottom:-40px;}
.wrap-photo .slick-now .text-box {transform: translateY(0);}

.wrap-photo a:hover .img-box img {transform:scale(1.1);}

@media screen and (max-width:1800px) {
    .wrap-photo .photo-title {padding:0 20px;}
    .wrap-photo .control {margin-right: 8%;}
    .wrap-photo .title-inner {width:calc(50% - 10%);}
}
@media screen and (max-width:1500px) {
    .wrap-photo .control {margin-right: 12%;}
}
@media screen and (max-width:1200px) {
    .wrap-photo .photo-title {padding:0 40px;}
    .wrap-photo .control {margin-right:0; right:40px; left:unset;}
    .wrap-photo .title-inner {width:100%;}
    .wrap-photo .slider {height:440px;}
    .wrap-photo .slider .slick-track {left:unset;}
    .wrap-photo .slick-slide {max-width:520px; padding-top: 140px; max-height:440px;}
    .wrap-photo .slick-slide li {}
    .wrap-photo .img-box {height:300px;}
    .wrap-photo .img-box p {font-size: 24px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis;}
    .wrap-photo .text-box {margin-top: 7px;}
    .wrap-photo .text-box strong {font-size: 24px;}
    .wrap-photo .text-box p {-webkit-line-clamp: 3; margin-top: 0; font-size: 16px;}
}
@media screen and (max-width:980px) {
    .wrap-photo .title-inner {margin-bottom: 20px;}
}
@media screen and (max-width:768px) {
    .wrap-photo .photo-title {padding:0 20px;}
    .wrap-photo .title-inner {margin-bottom: 25px;}
    .wrap-photo .control {right:20px; margin-top: 8px;}
    .wrap-photo .control button, .wrap-photo .control a {width:30px; height: 30px; margin-left: 5px;}
    .wrap-photo .slider {left:20px;height:350px; overflow:hidden;}
    .wrap-photo .slider .slick-list {min-height:350px;}
    .wrap-photo .slider .slick-track { }
    .wrap-photo .slick-slide {max-width:410px; margin:0 10px;}
    .wrap-photo .img-box {height:240px;}
    .wrap-photo .img-box p {font-size: 20px; left:20px; bottom:20px;}
    .wrap-photo .text-box {padding:0;}
    .wrap-photo .text-box strong {font-size: 20px; white-space: nowrap; width:100%; overflow:hidden; text-overflow:ellipsis;}
    .wrap-photo .text-box p {-webkit-line-clamp: 2;}
    .wrap-photo .slick-slide {padding-top:110px; max-height: 350px;}
    .wrap-photo .slick-now {max-height:350px;}
    .wrap-photo .slick-now .img-box {box-shadow:unset;}
}