@charset "UTF-8";

/* [S] wrap-photo */
.wrap-photo {position: relative; padding:15.5rem 0 16rem; background:url(../images/bg-photo.jpg) no-repeat center / cover;}
.wrap-photo .frame {max-width:unset;}
.wrap-photo .title {display: flex; justify-content: space-between; max-width:158rem; margin:0 auto; margin-bottom: 5rem; }
.wrap-photo h2 {position: relative; left: 10rem; font-family: sm; font-size: 5rem; color:#fff; opacity: 0;}
.wrap-photo h2 span {color:#D5FF79; margin-right: 6rem; display: inline-block; position: relative; }
.wrap-photo h2 span::after {content:''; width:5rem; height: 6.3rem; background:url(../images/img-title-obj3.png) no-repeat center; position: absolute; left:100%;top:-3rem;}
.wrap-photo .controls {position: relative; left: 10rem; display: flex; align-items: center; justify-content: end; max-width:158rem; margin:0 auto; margin-bottom: 7rem; opacity: 0;}
.wrap-photo .prevnext {position: relative; margin-right: 4rem;}
.wrap-photo .prevnext button { text-indent: -9999px; width: 4.3rem; height:3.4rem; transition: background .3s;}
.wrap-photo .prevnext .prev {background:url(../images/btn-prev.png) no-repeat center; margin-right: 1.5rem; position: relative;}
.wrap-photo .prevnext .prev::before {content:''; width: 0.3rem; height:0.3rem; background:#b2b2b2; border-radius:50%; position: absolute; right:-1.5rem; top:50%; margin-top:-0.2rem;}
.wrap-photo .prevnext .prev:hover {background:url(../images/btn-prev-on.png) no-repeat center;}
.wrap-photo .prevnext .next {background:url(../images/btn-next.png) no-repeat center; margin-left: 1rem;}
.wrap-photo .prevnext .next:hover {background:url(../images/btn-next-on.png) no-repeat center;}
.wrap-photo .con {margin-top: -12rem;}
.wrap-photo .slider-box {max-width:calc(175rem - 10px); margin-left:auto; overflow:hidden;}
.wrap-photo .slider-box .swiper-slide.slide0,
.wrap-photo .slider-box .swiper-slide.slide1,
.wrap-photo .slider-box .swiper-slide.slide2,
.wrap-photo .slider-box .swiper-slide.slide3,
.wrap-photo .slider-box .swiper-slide.slide4,
.wrap-photo .slider-box .swiper-slide.slide5,
.wrap-photo .slider-box .swiper-slide.slide6,
.wrap-photo .slider-box .swiper-slide.slide7,
.wrap-photo .slider-box .swiper-slide.slide8,
.wrap-photo .slider-box .swiper-slide.slide9,
.wrap-photo .slider-box .swiper-slide.slide10 {position: relative; left: 10rem; opacity: 0;}
.wrap-photo li a {position: relative; display: block;}
.wrap-photo li::before {content:''; width:100%; height:0.1rem; background:rgba(255,255,255,0.3); position: absolute; bottom:0; left:0;}
.wrap-photo li::after {content:''; width:0%; height:0.1rem; background:#D5FF79; position: absolute; bottom:0; left:0; transition:.5s;}
.wrap-photo li:hover::after {width:100%;}
.wrap-photo .img-box {overflow:hidden; position: relative; margin-bottom: 2.5rem; height:0; padding-bottom:56%; }
.wrap-photo .img-box img {position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.wrap-photo .text-box {color:#fff;padding-bottom: 4.5rem; }
.wrap-photo .sj {height:7rem; font-size: 2.4rem; font-family: pb; line-height: 3.5rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wrap-photo .sj span {background: linear-gradient(to bottom, transparent 92%, rgba(255,255,255,1) 0) left center no-repeat; background-size:0; transition: background-size .5s;}
.wrap-photo a:hover .sj span {background-size:100% auto;}
.wrap-photo .cn {font-family: pl; font-size: 1.8rem; line-height: 3rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top: 0.5rem; min-height:6rem}
.wrap-photo .hashtag {position: relative; margin-top: 2.2rem;}
.wrap-photo .hashtag span {display: inline-block;font-size: 1.6rem; font-family: pl; background:#2E41B6; border-radius:5rem; padding:0.8rem 1.5rem; margin-right: 1rem;}
.wrap-photo .more {height:5rem;font-size: 1.6rem; font-family: sl; color:#fff; text-transform: uppercase; display: flex; align-items: center; border:0.1rem solid #fff; border-radius:5rem; padding:0 1.5rem;} 
.wrap-photo .more::after {content:''; width: 0.9rem; height:0.9rem; display: inline-block; margin-left: 2.3rem; background:url(../images/ic-more.png) no-repeat center; transform: translateY(-0.1rem);}
.wrap-photo .more:hover {border-color:#45E99A; color:#45E99A}
.wrap-photo .more:hover::after {background:url(../images/ic-more-on.png) no-repeat center;}
.wrap-photo .loop {position: absolute; bottom:0; left:0; width:100%;}
.wrap-photo svg {width:100%;}
.wrap-photo svg text {font-size: 7.81vw; color:transparent; stroke-width: 0.3rem; stroke:#175AFF; font-family: sb; fill: transparent; opacity:0.2; white-space: nowrap; animation: txtMove 15s linear infinite;}
.wrap-photo svg text:last-child {animation-delay: -23s; }
@keyframes txtMove {
	0% {transform:translateX(100%)}
	to
	{transform:translateX(-100%)}
}

@media screen and (min-width: 2900px) {
    .wrap-photo svg text {font-size: 5vw !important;}
}

@media screen and (min-width: 2500px) {
    .wrap-photo svg text {font-size: 6.81vw;}
}

@media screen and (min-width: 1921px) { 
    .wrap-photo .slider-box {max-width: calc(178.5rem - 10px);}
    .wrap-photo .prevnext button {background-size: cover !important;}
}

@media screen and (max-width:1500px) {
    .wrap-photo .frame {padding:unset;}
    .wrap-photo .title  {padding: 0 4rem;}
    .wrap-photo .controls {padding: 0 4rem;}
}
@media screen and (max-width:1400px) {
    .wrap-photo h2 {font-size: 4.5rem;}
    .wrap-photo .prevnext {margin-right: 2rem;}
    .wrap-photo .slider-box {margin-left: 4rem;}

}
@media screen and (max-width:1300px) {
    .wrap-photo {padding: 7.5rem 0 8rem 0;}
    .wrap-photo .title {margin-bottom: 1.5rem;}
    .wrap-photo .title h2 {line-height: 1.5;}
    .wrap-photo .con {margin-top: 0;}
    .wrap-photo .controls {margin-bottom: 6rem; justify-content: start;}
    .wrap-photo svg text {font-size: 7rem;}
    .wrap-photo svg text:last-child {opacity:0.2;}
}

@media screen and (max-width:768px) {
    .wrap-photo {padding: 7.5rem 0 10rem 0;}
    .wrap-photo .title {margin-bottom: 0;}
    .wrap-photo .title  {padding: 0 2rem;}
    .wrap-photo h2 {font-size: 3.5rem; line-height: 1.3;}
    .wrap-photo h2 strong {display: block;}
    .wrap-photo h2 span {margin-right: 3rem;}
    .wrap-photo h2 span::after {width: 3.6rem; height:4.4rem; background-size:cover; top:-2rem; left:unset; right:-2.5rem;}
    .wrap-photo .slider-box {margin-left: 2rem;}
    .wrap-photo li .text-box {padding-bottom: 3.7rem;}
    .wrap-photo .prevnext button {width: 3.5rem; height:2.8rem; background-size:cover !important;}
    .wrap-photo .controls {justify-content: end; margin-bottom: 5rem;padding: 0 2rem;}
    .wrap-photo .more {text-indent: -9999rem; padding:0; border:0;}
    .wrap-photo .more::after {margin-left:0; width: 3rem; height:3rem; border:0.1rem solid #fff; border-radius:50%;}
    .wrap-photo .more:hover::after {border:0.1rem solid #45E99A}
	.wrap-photo .sj {font-size: 2.2rem;}
	.wrap-photo .cn {font-size: 1.6rem;line-height: 2.5rem; margin-top: 1rem; min-height:5rem;}
    .wrap-photo svg text {font-size: 8rem; animation: txtMove 10s linear infinite;}
    .wrap-photo svg text:last-child {opacity:0;}
}
@media screen and (max-width:650px) {
    .wrap-photo .slider-box {padding:0 2rem; margin-left: 0rem;}
}
@media screen and (max-width:550px) {
    .wrap-photo .con {margin-top: -5.5rem;}
    .wrap-photo .img-box img {width:100%;}
    .wrap-photo .loop {bottom:-0.8rem}
    .wrap-photo svg text {font-size: 7rem;}
    
}
/* [E] wrap-photo */