@charset "UTF-8";

@keyframes marquee{
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(-50%);
    }
}

.upDownAni1{
    position: relative;
    animation: upDownAni1 3s ease-in-out infinite;
}
@keyframes upDownAni1{
    0%{
        top: 0px;
    }
    50%{
        top: 30px;
    }
    100%{
        top: 0px;
    }
}

.upDownAni2{
    position: relative;
    animation: upDownAni2 3s ease-in-out infinite;
}
@keyframes upDownAni2{
    0%{
        top: 0px;
    }
    50%{
        top: -30px;
    }
    100%{
        top: 0px;
    }
}

.upDownAni3{
    position: relative;
    animation: upDownAni3 2s ease-in-out infinite;
}
@keyframes upDownAni3{
    0%{
        top: 0px;
    }
    50%{
        top: -15px;
    }
    100%{
        top: 0px;
    }
}
@media(max-width:767px){
    @keyframes upDownAni3{
        0%{
            top: 0px;
        }
        50%{
            top: -10px;
        }
        100%{
            top: 0px;
        }
    }   
}

.upDownAni4{
    position: relative;
    animation: upDownAni4 2.2s ease-in-out infinite;
}
@keyframes upDownAni4{
    0%{
        top: 0px;
    }
    50%{
        top: -18px;
    }
    100%{
        top: 0px;
    }
}


.swingRotate{
    position: relative;
     display: inline-block;
    transform-origin: bottom center; /* ✅ 중심축: 아래 중앙 */
    animation: swingRotate 2s ease-in-out infinite;
}
@keyframes swingRotate {
  0%   { transform: rotate(-5deg); }  /* 왼쪽 */
  50%  { transform: rotate(5deg); }   /* 오른쪽 */
  100% { transform: rotate(-5deg); }  /* 다시 왼쪽 */
}

/* marquee 효과 */
.marquee{
    display: flex;
    align-items: center;
    overflow: hidden;
}
.marquee-cont{
    display: flex;
}
.marquee.playing .marquee-cont.forward{
    animation: marquee var(--marquee-duration) linear infinite;
}
@keyframes marquee{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-50%);
    }
}
.marquee.playing .marquee-cont.reverse{
    animation: marquee-reverse var(--marquee-duration) linear infinite;
}
@keyframes marquee-reverse{
    0%{
        transform: translateX(-50%);
    }
    100%{
        transform: translateX(0);
    }
}

.marquee2.playing .marquee-cont.forward{
    animation: marquee var(--marquee-duration) linear infinite;
}
@keyframes marquee{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-50%);
    }
}

@media(max-width:767px){
    @keyframes upDownAni1{
        0%{
            top: 0px;
        }
        50%{
            top: 15px;
        }
        100%{
            top: 0px;
        }
    }
    @keyframes upDownAni2{
        0%{
            top: 0px;
        }
        50%{
            top: -15px;
        }
        100%{
            top: 0px;
        }
    }
}