@charset "utf-8";

.photo-recent{background: url(../images/bg-background.png) no-repeat center / cover; margin-top: 12rem; padding-bottom: 12rem;}
.photo-recent .container{max-width: 168rem; padding: 0 4rem; margin: 0 auto;}
.photo-recent .photo-recent-header{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; position: relative; padding: 8.4rem 0 2.5rem;}
.photo-recent .photo-recent-header h2{font-size: 5.6rem; color: #161616; font-family: pbl;}
.photo-recent .photo-recent-category{display: flex; flex-wrap: wrap; align-items: center; width: 36rem; border-radius: 3.6rem; background-color: rgba(180,180,180,.2); padding: .7rem .8rem; position: absolute; top: 10.5rem; left: 50%; transform: translateX(-50%);}
.photo-recent .category-title{width: 50%; border-radius: 2.9rem;}
.photo-recent .category-title button{font-size: 2.2rem; color: #000000; font-family: pb; width: 100%; height: 100%; display: block; text-align: center; padding: 1.25rem .5rem;}
.photo-recent .category-title button:hover{color: #503992}
.photo-recent .category-title.active{background-color: #503992;}
.photo-recent .category-title.active button{color: white;}
.photo-recent .category-title.active button:hover{color: white;}
.photo-recent .photo-recent-remote > div{display: none;}
.photo-recent .photo-recent-remote > div.active{display: flex; flex-wrap: wrap; align-items: center;}
.photo-recent .photo-recent-remote .now{font-size: 1.6rem; color: #161616; font-family: pb;}
.photo-recent .photo-recent-remote .remote-pagination{width: 20rem; margin: 0 1.5rem 0 2rem; position: relative; background-color: #c8c8c8; height: .2rem; }
.photo-recent .photo-recent-remote .total{font-size: 1.6rem; color: #161616; font-family: pb; margin: 0 2rem 0 1.4rem;}
.photo-recent .remote-playstop button{display: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: .1rem solid #c1c1c1; background-repeat: no-repeat; background-size: .6rem; background-position: center center; text-indent: -9999rem;}
.photo-recent .remote-playstop button.on{display: block;}
.photo-recent .remote-playstop button.play{background-image: url(../images/btn-play.png);}
.photo-recent .remote-playstop button.stop{background-image: url(../images/btn-stop.png);}
.photo-recent .photo-recent-remote .prev{width: 4.4rem; height: 4.4rem; border-radius: 50%; border: .1rem solid #c1c1c1; background-repeat: no-repeat; background-size: 2rem; background-position: center center; text-indent: -9999rem; background-image: url(../images/btn-prev.png); margin-right: .7rem; transition: background-color .35s;}
.photo-recent .photo-recent-remote .next{width: 4.4rem; height: 4.4rem; border-radius: 50%; border: .1rem solid #c1c1c1; background-repeat: no-repeat; background-size: 2rem; background-position: center center; text-indent: -9999rem; background-image: url(../images/btn-next.png); transition: background-color .35s;}
.photo-recent .photo-recent-remote .prev:hover,
.photo-recent .photo-recent-remote .next:hover{background-color: #c1c1c1;}
.photo-recent .photo-recent-remote .news-more{width: 2.8rem; height: 2.8rem; display: block; background: url(../images/btn-more.png) no-repeat center center / cover; text-indent: -9999rem; margin-left: 3rem; transition: transform .35s;}
.photo-recent .photo-recent-remote .news-more:hover{transform: rotate(180deg);}
.photo-recent .photo-recent-content .swiper-container{display: none;;}
.photo-recent .photo-recent-content .swiper-container.active{display: block;}
.photo-recent .photo-recent-content .subject{position: relative; width: 100%; height: 100%; display: block;}
.photo-recent .photo-recent-content .subject:hover{border-bottom-right-radius: 10rem;}
.photo-recent .photo-recent-content .subject:hover::after{content:""; display: block; position: absolute; right: 0; bottom: 0; width: 6rem; height: 6rem; background: #36c0c9 url(../images/btn-link.png) no-repeat center center / 1.8rem; border-radius: 50%; z-index: 5;}
.photo-recent .photo-recent-content .subject:hover .thumb{border-bottom-right-radius: 10rem;}
.photo-recent .photo-recent-content .thumb{padding-bottom: 38rem; position: relative; overflow: hidden;}
.photo-recent .photo-recent-content .thumb::before{content:""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(46, 63, 69, 0.7) 100%); z-index: 2;}
.photo-recent .photo-recent-content .thumb img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: inherit; transition: all .5s;}
.photo-recent .photo-recent-content .subject:hover .thumb img{transform: scale(1.05)}
.photo-recent .photo-recent-content .con{position: absolute; left: 4rem; bottom: 2.5rem; width: calc(100% - 8rem); z-index: 3;}
.photo-recent .photo-recent-content .subjectText{font-size: 2.4rem; color: #ffffff; font-family: psb; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; word-break: break-all;}
.photo-recent .photo-recent-content .date{font-size: 1.4rem; color: rgba(255,255,255,.5); font-family: pm; margin-top: .7rem;}

@media screen and (max-width: 1500px) {
    .photo-recent .photo-recent-remote .remote-pagination{width: 11rem;}
}

@media screen and (max-width: 1200px) {
    .photo-recent .photo-recent-remote .now,
    .photo-recent .photo-recent-remote .total,
    .photo-recent .photo-recent-remote .remote-pagination,
    .photo-recent .remote-playstop{display: none;}

    .photo-recent{margin-top: 9.3rem; padding-bottom: 8rem; background-position: left top;}
    .photo-recent .photo-recent-header{padding: 5.9rem 0 2.5rem;}
    .photo-recent .photo-recent-category{top: 8rem;}
}

@media screen and (max-width: 768px) {
    .photo-recent{margin-top: 6rem; padding-bottom: 6rem;}
    .photo-recent .container{padding: 0 2rem;}
    .photo-recent .photo-recent-header{padding: 3.3rem 0 10rem}
    .photo-recent .photo-recent-header h2{font-size: 4.6rem;}
    .photo-recent .photo-recent-category{width: 25.8rem; justify-content: center;}
    .photo-recent .category-title{width: auto;}
    .photo-recent .photo-recent-category{top: 13.4rem;}
    .photo-recent .category-title button{font-size: 1.7rem; padding: 1.25rem 2.25rem;}
    .photo-recent .photo-recent-content .thumb{padding-bottom: 31rem;}
}