/* 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;;
    
}

.fade-wrap {
    opacity: 0;
    transform: translateY(0px); /* 40px 아래에서 대기 */
    transition: all 0.8s ease-out; /* 0.8초 동안 움직임 */
}


.polo-fade {
    opacity: 0;
}

/* 3번 이미지 (맨 밑장) : 0.08초 뒤에 거의 바로 탁! 나옴 */
@keyframes step3 {
    0%, 1% { opacity: 0; }
    2%, 85% { opacity: 1; }
    85.1%, 100% { opacity: 0; } /* 85%가 끝나는 순간 3장 동시 즉시 증발! */
}

/* 2번 이미지 (중간장) : 약 1초 뒤에 툭! */
@keyframes step2 {
    0%, 24% { opacity: 0; }
    25%, 85% { opacity: 1; }
    85.1%, 100% { opacity: 0; } /* 3장 동시 증발 */
}

/* 1번 이미지 (맨 윗장) : 약 2초 뒤에 툭! */
@keyframes step1 {
    0%, 49% { opacity: 0; }
    50%, 85% { opacity: 1; }
    85.1%, 100% { opacity: 0; } /* 3장 동시 증발 */
}

/* ------------------------------------------------
   스크립트가 작동하면 각자의 대본대로 4초 무한루프 시작
------------------------------------------------ */
.polo-fade.polo-show.polo-delay-03 { animation: step3 4s infinite; }
.polo-fade.polo-show.polo-delay-02 { animation: step2 4s infinite; }
.polo-fade.polo-show.polo-delay-01 { animation: step1 4s infinite; }


.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;
}


/* BASIC css end */