/* =========================================================
  용인시수지노인복지관 : 메인슬라이드 최신글 스킨 스타일시트
========================================================= */

/* 슬라이드 이미지 영역 */
#visual { 
  width: 357px; 
  flex-shrink: 0;
}
#visual .splide__slide img { 
  height: 435px;

  object-fit: cover;
  border-radius: 30px 30px 0 30px;
}

/* 슬라이드 컨트롤러 영역 */
#visual .splide__arrows {
  width: 225px;
  height: 50px;
  padding: 0 15px 0 20px;

  position: absolute;
  right: -1px;
  bottom: -1px;

  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  
  border-radius: 30px 0 0 0;
}
#visual .slideCounter {
  display: flex;
  gap: 10px;
  align-items: center;
}
#visual .slideCounter span {
  color: #666;
  font-size: 18px;
  font-weight: 500;
  line-height: 177.778%; /* 32px */
}
#visual .slideCounter .counter_point {
  color: #13264E;
  font-weight: 700;
}
#visual .dot {
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background-color: #555;
}
#visual .control_btn_wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}
#visual .splide__arrow,
#visual .splide__toggle {
  width: 30px;
  height: 30px;
  padding: unset;

  position: unset;
  transform: unset;
  opacity: 1;
  z-index: 2;
  cursor: pointer;

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

  border-radius: 5px;
  border: 1px solid #13264E;
  background: rgba(255, 255, 255, 0.70);
}
#visual .splide__arrow:hover,
#visual .splide__toggle:hover {
  background-color: #13264E;
}
#visual .splide__arrow:hover svg path,
#visual .splide__toggle:hover svg path {
  fill: #FFFFFF;
}
#visual .splide__arrows svg {
  width: unset;
  height: unset;
  fill: unset;
}
#visual .splide__arrow--prev svg { transform: rotate(0deg); }





/* =========================================================
  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) {}