@charset "utf-8";

.latest-swiper-wrap{
  position: relative;
}
.mySwiper { width:100%; padding-top:50px; padding-bottom:50px; }
.mySwiper .swiper-slide { background-position:center; background-size:cover; position:relative; overflow:hidden;
  border-radius:14px;  opacity: 0.4;  transition: opacity 0.3s ease;}
.mySwiper .swiper-slide img{  display:block;  width:100%;  height:100%;  object-fit:cover;   display:block;}
.mySwiper .swiper-slide .txt{ display:none; }

.latest-swiper{ overflow: hidden;padding-bottom: 28px;}
.latest-swiper .swiper-slide{ width: 85vw;   max-width: 960px;   aspect-ratio: 16 / 9; height: auto;
  position: relative; overflow: hidden; border-radius: 14px;}
.latest-swiper .swiper-slide-active{ opacity: 1;}

.mySwiper .swiper-slide a{ display:block; width:100%; height:100%;  position:relative; }

.mySwiper .swiper-slide-active .txt{position:absolute;  left:40px;  right:40px;   bottom:40px; z-index:2;
  font-size:28px;  color:#fff;  text-shadow:0 4px 14px rgba(0,0,0,.6);
  display:flex;   justify-content: space-between;  align-items:center;  box-sizing:border-box;}

.latest-swiper .txt .arrow{ width:60px;  height:60px;  border:1px solid rgba(255,255,255,1);  border-radius:50%;
  display:inline-flex;  align-items:center;  justify-content:center;  color:#fff;  font-size:20px;
  flex:0 0 auto;  transition:.25s;}

/* hover는 부모 a에 걸려도 같이 반응 */
.latest-swiper a:hover .txt .arrow{  background:var(--main-color);}

.latest-swiper .swiper-pagination{
  bottom: 6px;            /* padding 안쪽에서 아래 위치 */
}
.latest-swiper-pagination{
  position: relative;     /* static도 OK */
  width: 100%;
  margin-top: 18px;       /* ✅ 이미지와 떨어진 간격 */
  text-align: center;
  min-height: 14px;       /* 0 높이 방지 */
}            


.latest-swiper-pagination .swiper-pagination-bullet{
  background: #fff;              /* 기본 흰색 */
  opacity: 1;                    /* 흐리게 안 보이게 */
  width: 10px;
  height: 10px;
  margin: 0 5px;
  transition: background 0.25s, transform 0.25s;
}

/* 활성화된 점 */
.latest-swiper-pagination .swiper-pagination-bullet-active{
  background: var(--main-color); /* 메인 컬러 */
  transform: scale(1.2);         /* 살짝 커지게 (선택) */
}

@media (max-width:969px){
  .latest-swiper .swiper-slide{ width:540px; height:320px; }
  .latest-swiper .swiper-slide-active .txt{  font-size:22px;left:22px; right:22px; bottom:22px;  }
  .latest-swiper .txt .arrow{ width:50px;  height:50px;  font-size:18px;}
}
@media (max-width:693px){
  .latest-swiper .swiper-slide{ width:360px; height:240px;  border-radius: 10px;}
  .latest-swiper .swiper-slide-active .txt{ left:16px; bottom:16px; right:16px; font-size:18px; }
  .latest-swiper .txt .arrow{ width:40px;  height:40px;  font-size:16px;}
  .latest-swiper-pagination .swiper-pagination-bullet{ width: 8px; height: 8px; margin: 0 4px;}
  
}

@media (max-width:399px){
  .latest-swiper .swiper-slide{ width:270px; height:180px;  border-radius: 5px;}
 .latest-swiper .swiper-slide-active .txt{ font-size: 14px;}
  .latest-swiper .txt .arrow{ width:35px;  height:35px;  font-size:14px;}
  .latest-swiper-pagination .swiper-pagination-bullet{ width: 6px; height: 6px; margin: 0 4px;}
}