/* =========================================================
  용인시수지노인복지관 : 공지사항 최신글 스킨 스타일시트
========================================================= */

.news_slide_splide .splide__track {
  padding: 20px !important;
}
.news_slide_splide .slide_card_inner {
  height: 350px;
  padding: 50px 40px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;

  border-radius: 40px;
  background: #FFF;
  border: 3px solid transparent;
  box-shadow: 0 0 20px 0 #DDE4F2;

  transition: all .3s ease-in-out;
}
.news_slide_splide .slide_card_inner:hover {
  box-shadow: unset;
  background: #F9FCFF;
  border: 3px solid #223769;
}

.news_slide_splide .slide_card_body {
  display: flex;
  gap: 20px;
  flex-direction: column;
  align-items: flex-start;
}
.news_slide_splide .slide_ti {
  width: 100%;

  color: #333;
  font-size: 1.33rem; /* 24px */
  font-weight: 700;
  line-height: 133.333%; /* 32px */

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 두 줄까지 노출 */
  -webkit-box-orient: vertical;
}
.news_slide_splide .slide_con {
  width: 100%;

  color: #333;
  font-size: 18px;
  font-weight: 400;
  line-height: 144.444% ; /* 26px */

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 세 줄까지 노출 */
  -webkit-box-orient: vertical;
}

.news_slide_splide .slide_card_footer {
  width: 100%;

  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.news_slide_splide .slide_date {
  flex: 1;

  color: #666;
  font-size: 16px;
  font-weight: 600;
}
.news_slide_splide .slide_more_btn {
  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  background: #13264E;
}
.news_slide_splide .slide_more_btn svg { transition: transform 0.3s ease; }
.news_slide_splide .slide_card_inner:hover .slide_more_btn svg,
.news_slide_splide .slide_card_inner:focus-visible .slide_more_btn svg {
  animation: slideArrowMove 0.45s ease-in-out;
}
@keyframes slideArrowMove {
  0% {
    transform: translate(0, 0);
  }

  45% {
    transform: translate(5px, 5px);
  }

  100% {
    transform: translate(0, 0);
  }
}



/* =========================================================
  Media Query
========================================================= */

/* ===== PC ===== */
@media (max-width: 1600px) {}
@media (max-width: 1440px) {}
@media (max-width: 1280px) {}


/* ===== Tablet ===== */
@media (max-width: 1024px) {}
@media (max-width: 960px) {}


/* ===== Mobile ===== */
@media (max-width: 768px) {}
@media (max-width: 640px) {}
@media (max-width: 480px) {}
@media (max-width: 360px) {}