@charset "utf-8";
.wrap_photo { height: 360px; border-radius: 4px; background: #F0F0F0; position: relative; overflow: hidden; } 
.wrap_photo .title { font-family: 'Pre Bold'; font-size: 16px; line-height: 1; padding: 28.5px 25px; border-bottom: 1px solid rgba(112,112,112,.3); } 

.wrap_photo .list { font-size: 0; } 
.wrap_photo .list ul { display: inline-block; width: 100%; } 
.wrap_photo .list ul .slick-list { padding: 20px 0; margin: 0 27px; } 
.wrap_photo .list li { float: left; width: 100%; } 
.wrap_photo .list li a { position: relative; height: 245px; display: flex; gap: 4.7%; justify-content: space-between; flex-direction: row-reverse; } 
.wrap_photo .text { flex-basis: 46.3%; } 
.wrap_photo .text .subjectText { white-space: pre-wrap; } 
.wrap_photo .text .date { color: #707070; margin-top: 12px; } 
.wrap_photo .thumb { flex-basis: 49%; border-radius: 4px; overflow: hidden; position: relative;  } 
.wrap_photo .thumb img { max-width: unset; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 4px;} 

.wrap_photo .list .nodata { font-size: 18px; text-align: center; padding: 30px; width: 100%; margin-top: 70px;} 


/* control */
.wrap_photo .dots-wrap {display: block;}
.wrap_photo .dots-wrap .slick-dots li { display: inline-block; margin: 0 5px; } 
.wrap_photo .dots-wrap .slick-dots li button { width: 10px; height: 10px; border-radius: 50%; background-color: gray; border: none; cursor: pointer; } 

.prevnext button { content: ''; width: 20px; height: 20px; position: absolute; top: 27px; text-indent: -9999px; } 
.prevnext button.prev { right: 65px; } 
.prevnext button.next { right: 29px; } 
.prevnext button svg { position: absolute;  top: 0; left: 0; }

.wrap_photo .text .subjectText {max-width: 350px;}
.wrap_photo .text .subjectText span { background: linear-gradient(to bottom, transparent 96%, rgba(0, 0, 0) 0%) left center no-repeat; background-size: 0; transition: background-size .5s; color: #000; font-family: 'Pre Bold'; font-size: 20px;} 
.wrap_photo .list li a:hover .subjectText span {background-size: 100% auto;}

.wrap_photo .dots-wrap {display: none;position: absolute;left: 50%;bottom: 20px;transform: translateX(-50%);}
.wrap_photo .dots-wrap .slick-dots {display: flex;}
.wrap_photo .dots-wrap .slick-dots li {width: 7px;height: 7px;margin: 0 12px 0 0; border-radius: 50%;opacity: 30%;text-indent: -9999px;cursor: pointer;}
.wrap_photo .dots-wrap .slick-dots li:last-child {margin: 0 !important;}
.wrap_photo .dots-wrap .slick-dots li.slick-active {opacity: 1;}

.wrap_photo .dots-wrap.c1 .slick-dots li {background: #000;}
.wrap_photo .dots-wrap.c2 .slick-dots li {background: #fff;}


@media (max-width: 1280px) {
    .wrap_photo .list .nodata {margin-top: 0;}
}

@media (max-width: 768px) {
    .wrap_photo .list li a {flex-direction: column-reverse;height: auto;padding: 0 20px;}
    .wrap_photo .thumb {overflow: visible;flex-basis: auto; height:200px; overflow:hidden;} 
    .wrap_photo .thumb img {position: relative;left: auto;top: auto;transform: translate(0);border-radius: 2px; width:100%; height:100%; object-fit: cover;}
    .wrap_photo .text {flex-basis: auto;margin: 0 0 30px;}
    .wrap_photo .list ul .slick-list {padding: 20px 0 47px;}
    .wrap_photo .text .subjectText {max-width: 100%;}
    .wrap_photo .dots-wrap {display: block;}
    .wrap_photo .title {padding: 20px 22px 18px;font-size: 17px;}
    .wrap_photo .prevnext {display: none;}
    .wrap_photo .text {margin: 0 0 20px;}
    .wrap_photo .text .subjectText > i {font-size: 17px;}
    .wrap_photo .text .date {margin-top: 10px;}
    .wrap_photo .slick-slide {padding: 0 5px !important;}
    .wrap_photo .slick-list {margin: 0 -5px !important;}
    .wrap_photo .list .nodata {margin-top: 20px;}
}