@charset "utf-8";

.r-pizza{
    animation: r-pizza-ani 10s linear forwards infinite;
}
@keyframes r-pizza-ani{
    0%{
         rotate: 0deg;
    }
    100%{
        rotate: 360deg;
    }
}
.m-deco {
     animation: smooth-flow 15s linear infinite;
}

@keyframes smooth-flow {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-200%);
    }
}
.m-deco2 {
     animation: smooth-flow 15s linear infinite 5s;
}

@keyframes smooth-flow {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-200%);
    }
}
.m-deco3 {
     animation: smooth-flow 15s linear infinite 10s;
}

@keyframes smooth-flow {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-200%);
    }
}
.ev-banner>img:nth-child(1){
    animation: dissolve-1 16s ease-in-out infinite;
}
.ev-banner>img:nth-child(2){
    animation: dissolve-2 16s ease-in-out infinite;
}
.ev-banner>img:nth-child(3){
    animation: dissolve-3 16s ease-in-out infinite;
}
.ev-banner>img:nth-child(4){
    animation: dissolve-4 16s ease-in-out infinite;
}

/* 각 이미지별 디졸브 키프레임 - 순차적으로 나타나고 사라지기 */
@keyframes dissolve-1 {
    0% { opacity: 1; }
    20% { opacity: 1; }
    25% { opacity: 0; }
    95% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes dissolve-2 {
    0% { opacity: 0; }
    20% { opacity: 0; }
    25% { opacity: 1; }
    45% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes dissolve-3 {
    0% { opacity: 0; }
    45% { opacity: 0; }
    50% { opacity: 1; }
    70% { opacity: 1; }
    75% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes dissolve-4 {
    0% { opacity: 0; }
    70% { opacity: 0; }
    75% { opacity: 1; }
    95% { opacity: 1; }
    100% { opacity: 0; }
}
/* 배너박스 1 */
.banner-box1>img:nth-child(1){
    animation: dissolve-1 16s ease-in-out infinite;
}
.banner-box1>img:nth-child(2){
    animation: dissolve-2 16s ease-in-out infinite;
}
.banner-box1>img:nth-child(3){
    animation: dissolve-3 16s ease-in-out infinite;
}
.banner-box1>img:nth-child(4){
    animation: dissolve-4 16s ease-in-out infinite;
}

/* 배너박스2 */
.banner-box2>img:nth-child(1){
    animation: dissolve-1 16s ease-in-out infinite;
}
.banner-box2>img:nth-child(2){
    animation: dissolve-2 16s ease-in-out infinite;
}
.banner-box2>img:nth-child(3){
    animation: dissolve-3 16s ease-in-out infinite;
}
.banner-box2>img:nth-child(4){
    animation: dissolve-4 16s ease-in-out infinite;
}

/* 배너박스3 */
.banner-box3>img:nth-child(1){
    animation: dissolve-1 16s ease-in-out infinite;
}
.banner-box3>img:nth-child(2){
    animation: dissolve-2 16s ease-in-out infinite;
}
.banner-box3>img:nth-child(3){
    animation: dissolve-3 16s ease-in-out infinite;
}
.banner-box3>img:nth-child(4){
    animation: dissolve-4 16s ease-in-out infinite;
}