@charset "UTF-8";

.wrap-comu-wrap {display:block; position:relative; z-index:0 !important; max-width:1600px; margin:0 auto; padding:30px 20px 100px;}
.wrap-comu-wrap .title-wrap .title {margin-bottom:30px; font-family:'Paperlogy Bold'; font-size:33px;}
.wrap-comu .slider {display:flex; flex-wrap:wrap; gap:30px;}
.wrap-comu .slider li {width:calc(33.333% - 20px); text-align:center; transition:0.3s;}
.wrap-comu .slider li:nth-child(n+7) {display:none;}
.wrap-comu .slider li a {display:block; overflow:visible; border-radius:0; box-shadow:none; transition:0.2s ease-in-out;}
.wrap-comu .slider li.nodata {padding:50px; border:1px solid #ccc; border-radius:20px;}
.wrap-comu .list {display:inline-block; width:100%; vertical-align:top;}
.wrap-comu .thum {position:relative; overflow:hidden; max-height:none; border-radius:25px; box-shadow:3px 5px 6px 1px rgba(0,0,0,0.2); transition:box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;}
.wrap-comu .slider li img {display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; transition:transform 0.5s ease;}
.wrap-comu .thum::after {content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(to top, rgba(238,39,94,0.65) 0%, rgba(238,39,94,0.3) 38%, rgba(238,39,94,0) 75%); opacity:0; transform:translateY(25%); transition:opacity 0.4s ease, transform 0.4s ease;}
.wrap-comu .slider li:hover .thum {box-shadow:4px 6px 7px 2px rgba(0,0,0,0.25);}
.wrap-comu .slider li:hover .thum::after {opacity:1; transform:translateY(0);}
.wrap-comu .slider li:hover .thum img {transform:scale(1.03);}
.wrap-comu .con {position:static; width:100%; padding:20px 40px 0; text-align:center;}
.wrap-comu .con .con_title {display:block; margin-bottom:15px; font-size:20px;}
.wrap-comu .con p:not(.date) {display:-webkit-box; width:fit-content; max-width:100%; min-height:2.8em; margin:0 auto; padding:0 3px; overflow:hidden; color:#222; font-family:'Paperlogy SemiBold'; font-size:21px; line-height:1.4; text-align:center; text-overflow:ellipsis; white-space:normal; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.wrap-comu .con .date {display:block; width:100%; min-height:0; margin:5px 0 0; padding:0 0 3px; overflow:visible; color:#333; font-family:'Paperlogy Medium'; font-size:16px; line-height:1.25; text-align:center; white-space:nowrap; -webkit-line-clamp:initial; -webkit-box-orient:initial;}

/* .wrap-comu .slider li:hover .con p::before {opacity: 1; width: 100%;} */

/* .wrap-comu .thum::before { content: ''; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6)); position: absolute; top: 0; left: 0; z-index: 1; transition: 0.4s; }
.wrap-comu .thum::after { content: ''; width: 100%; height: 100%; background: linear-gradient(to bottom, rgb(255 255 255 / 20%), rgb(4 27 109 / 50%)); position: absolute; top: 0; left: 0; z-index: 2; opacity: 0; transition: 0.4s; } */
.wrap-comu .slider li:hover .thum::before { opacity: 0; }
.wrap-comu .slider li:hover .thum::after { opacity: 1; }

.wrap-comu .slick-dots { display: none; }
.wrap-comu .prevnext { display: none; }

.wrap-comu-wrap .more {width: 70px; height: 70px; box-shadow: 0 0 8px 2px rgba(0,0,0,0.2); border-radius: 50%; position: absolute; top: 12px; right: 20px; transition: 0.2s ease-in-out; background: url('../images/plus-w.png') no-repeat center center / 18px #ee275e;}
.wrap-comu-wrap .more:hover {transform: rotate(90deg);}

@media (max-width: 1400px) {
    .wrap-comu-wrap .title-wrap .title {font-size: 28px;}
    .wrap-comu-wrap .more {width: 62px; height: 62px; top: 16px;}
    .wrap-comu .slider {gap: 25px;}
    .wrap-comu .slider li {width: calc(33.333% - 16.667);}
    .wrap-comu .con {bottom: 22px; left: 25px; width: 100%;}
    .wrap-comu .con p {font-size: 22px;}
}
@media (max-width: 1024px) {
    .wrap-comu-wrap {padding: 60px 20px 100px;}
    .wrap-comu-wrap .more {top: 50px;}
    .wrap-comu .slider {gap: 20px;}
    .wrap-comu .slider li {width: calc(50% - 10px);}
    .wrap-comu .slider li a {border-radius: 15px;}
}
@media (max-width: 768px) {
    .wrap-comu-wrap {padding: 40px 20px 80px;}
    .wrap-comu-wrap .title-wrap .title {font-size: 26px;}
    .wrap-comu-wrap .more {width: 52px; height: 52px; background-size: 14px; top: 35px;}
    .wrap-comu .con {left: 20px; bottom: 20px; width: 85%;}
    .wrap-comu .con p {font-size: 19px;}
}
@media (max-width: 550px) {
    .wrap-comu .slider li {width: 100%;}
    .wrap-comu .slider li:nth-child(n+4) {display: none;}
    .wrap-comu-wrap .title-wrap .title {font-size: 24px; margin-bottom: 20px;}
    .wrap-comu-wrap .more {width: 45px; height: 45px; background-size: 11px;}
}