/* BASIC css start */
div#content {
    width: 100%;
    margin: 0 auto;
}

#contentWrapper{
    margin: 90px auto 0px auto;
}

#content img{
    width: 100%
}


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

.ani_wrap .position{
    position: absolute;    
}


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

}

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


.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 */