@charset "utf-8";

.wrap-photo {position: relative;}
.wrap-photo .area {position: relative; padding-top: 10rem;}

.wrap-photo .slider {overflow: hidden;}
.wrap-photo .slider .swiper-wrapper,
.wrap-photo .slider .swiper-wrapper a {cursor:url('../images/cur.png') 40 40, auto;}
.wrap-photo .slider .img-box {border-radius:2rem 6rem 2rem 2rem; overflow:hidden; margin-bottom: 2.5rem;}
.wrap-photo .slider .img-box img {width:100%; height:100%; object-fit:cover; transition: transform .5s; max-height:40rem;}
.wrap-photo .slider a:hover .img-box img {transform: scale(1.1)}
.wrap-photo .slider .text-box p {display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow:hidden; font-size: 2.4rem; font-weight: 600; color:#000; line-height: 4.2rem;}
.wrap-photo .slider .text-box p span {background: linear-gradient(to bottom, transparent 95%, #000 0) left center no-repeat; background-size:0; transition: background-size .5s;}
.wrap-photo .slider a:hover .text-box p span {background-size:100% auto;}

.wrap-photo .control {display: flex; align-items: center; position: absolute; top:0; right:0; z-index: 102;}
.wrap-photo .control .more {font-size: 1.6rem; color:#222; position: relative; padding-right:2.9rem;}
.wrap-photo .control .more::after {content:''; width: 1.4rem; height: 1.4rem; position: absolute; right:0; top:50%; margin-top:-.7rem; background:url('../images/more.png') no-repeat center; transition:transform .35s;}
.wrap-photo .control .more:hover::after {transform:rotate(180deg);}
.wrap-photo .control .prevnext {margin-right: 5rem;}
.wrap-photo .control .prevnext button {width: 6rem; height: 6rem; background-color:#AEAEAE; background-repeat:no-repeat; background-position:center; border-radius:50%; text-indent: -99999rem;}
.wrap-photo .control .prevnext button:hover {background-color:#005bac;}
.wrap-photo .control .prevnext .prev {margin-right: .5rem; background-image:url('../images/photo-prev.png');}
.wrap-photo .control .prevnext .next {background-image:url('../images/photo-next.png');}
.wrap-photo .nodata {width: 100%; padding: 8rem 0 6rem 0; text-align: center;}

@media screen and (max-width:1840px) {
    .wrap-photo {padding:0 2rem;}
    .wrap-photo .area {padding-left: 0; padding-right: 0;}
}

@media screen and (max-width:1200px) {
    .wrap-photo .slider {width:135%;}
    .wrap-photo .slider .text-box p {font-size: 2.4rem; line-height: 4rem;}
}

@media screen and (max-width:1100px) {
    .wrap-photo {padding:0 2rem;}
    .wrap-photo .slider .list {width:100%; margin:0;}
    .wrap-photo .slider .img-box {margin-bottom: 1.2rem; min-height: 26rem;}
    .wrap-photo .slider .img-box img {width:100%; height:100%; object-fit:cover;}
    .wrap-photo .slider .text-box p {font-size: 2rem; line-height: 3.1rem;}
    .wrap-photo .control {position: static; margin-top: 2rem;}
    .wrap-photo .control.prevnext button {position: absolute; width:5rem; height:5rem;}
    .wrap-photo .control.prevnext .prev {left:0; top:calc(50% - 8.2rem);}
    .wrap-photo .control.prevnext .next {right:0; top:calc(50% - 8.2rem);}
    .wrap-photo .control .more {position: absolute; right:0; top:2rem;}
}

@media screen and (max-width:940px) {
    .title-gallery p {display: none;}
    .wrap-photo .slider {width: 100%;}
}