/* BASIC css start */
#contents {
   display:block;
   width:100%;
}

#contents img{
    width: 100%
}

.ani_wrap{
  position: relative;
  width:100%;
  overflow:hidden;
}

.ani_wrap .position{
    position: absolute;
    z-index: 9 !important;
    
}


.fade-wrap {
    transition: 1.3s;
    opacity: 0;
    position: relative;
    bottom: -50px;
}

.fade-wrap.fade-in {
    opacity: 1;
    bottom: 0;
}


.swiper-container {
    padding-bottom: 0 !important;
    margin-bottom: -1px !important;
}

.swiper-wrapper {
    margin-left: -31px !important;
}

.swiper-pagination{
    left: 41% !important;
}

.swiper-pagination-bullet{
    width: 10px !important;
}

.swiper-pagination-bullet-active {
    width:15px !important;
}


.animated-text {
   position:absolute;
   left:0;
   top:0;
   z-index:11;
   /* animation 속성 사용 */
   animation-name: fadeIn;        /* 정의된 애니메이션 이름 */
   animation-duration: 1.2s;       /* 애니메이션 지속 시간 */
   animation-timing-function: ease-out; /* 애니메이션 타이밍 함수 */
   animation-fill-mode: forwards; /* 애니메이션 후 스타일 유지 */
    }

@keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateX(0); 
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }


/* 기본 스타일 */
.zoom-out {
   width: 100%; /* 이미지의 초기 너비 */
   height: auto;
   opacity: 0; /* 초기에는 보이지 않게 설정 */
   animation: zoomOut 1s ease-out forwards; /* zoomOut 애니메이션을 1초 동안, 부드러운 시작으로, 끝까지 적용 */
}

/* @keyframes로 축소 애니메이션 정의 */
@keyframes zoomOut {
  0% {
    transform: scale(1.3); /* 초기에는 140% 크기 */
    opacity: 1; /* 나타나는 동안에도 보임 */
  }
  100% {
    transform: scale(1); /* 최종적으로 100% 크기 */
    opacity: 1; /* 최종적으로 완전히 보이도록 */
  }
}

/* BASIC css end */