@charset "utf-8";

.swiper-box { position: relative; }
/* .mediaSwiper { margin: 3rem 0; } */
.mediaSwiper .swiper-slide { border-radius: 1rem; overflow: hidden; cursor: pointer;}
.mediaSwiper .swiper-slide .txt_box { padding: 1.5rem 2rem; background-color: var(--light-gray); }
.mediaSwiper .swiper-slide .txt_box .cate { display: inline-block; /* min-width: 30%; */ width: 7.2rem; padding: .3rem 1.5rem; background-color: var(--point3color); color: #fff; font-weight: 600; text-align: center; border-radius: 30px; }
.mediaSwiper .swiper-slide .txt_box .tit { /* font-size: 1.1rem;  */font-weight: 800; color: #000; }
.mediaSwiper .swiper-slide .txt_box .cont { color: var(--dark-gray); font-weight: 400; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.mediaSwiper .swiper-slide .txt_box .cont span {font-size: 1.250rem !important;}
.mediaSwiper .swiper-slide .txt_box .data { display: flex; align-items: center; }
.mediaSwiper .swiper-slide .txt_box .data .pf { width: 30px; height: 30px; border-radius: 50%; margin-right: .5rem; overflow: hidden; }
.mediaSwiper .swiper-slide .txt_box .data .info { color: var(--dark-gray); }

.mediaSwiper .swiper-slide .img_box {overflow: hidden; aspect-ratio: 1/1;}
.mediaSwiper .swiper-slide .img_box > img {transition: 0.45s; width: 100%;}
.mediaSwiper .swiper-slide:hover .img_box img {position: relative; transform: scale(1.2);}

@media(max-width:768px) {
    .mediaSwiper .swiper-slide .txt_box .cate {width: 10rem;}
    .mediaSwiper .swiper-slide .txt_box .font-20,
    .mediaSwiper .swiper-slide .txt_box .cont span {font-size: 1.750rem !important;}
}

@media(max-width:500px) {
    .mediaSwiper.width90 {width: 100%;}
    .swiper-button-next,
    .swiper-button-prev {display: none;}

    .mediaSwiper .swiper-slide .txt_box .font-20,
    .mediaSwiper .swiper-slide .txt_box .cont span {font-size: 1.5rem !important;}
}

@media(max-width:350px) {
    .mediaSwiper .swiper-slide .txt_box .data .pf {display: none;}
}

/* .mediaSwiper ~ .swiper-buttons { position: absolute; top: 50%; transform: translateY(-50%); }
.mediaSwiper ~ .swiper-buttons.swiper-button-prev { left: -5rem; }
.mediaSwiper ~ .swiper-buttons.swiper-button-next { right: -5rem; }
.mediaSwiper ~ .swiper-buttons.swiper-button-disabled { opacity: 1; color: var(--gray); } */