.slideUp {animation-name:slideUp;animation-duration: .8s;animation-fill-mode: forwards;opacity: 0;animation-timing-function:ease;}
.slideUp_text {animation-name:slideUp_text;animation-duration: .4s;animation-fill-mode: forwards;opacity: 0;animation-timing-function:ease;}
.bubble {animation-name:bubble;animation-duration: .8s;animation-fill-mode: forwards;opacity: 0;animation-timing-function:ease;}
.opa {animation-name:opa;animation-duration: .8s;animation-fill-mode: forwards;opacity: 0;animation-timing-function:ease;}
.slideDown {animation-name:slideDown;animation-duration: .8s;animation-fill-mode: forwards;opacity: 0;animation-timing-function:ease;}
.slideLeft {animation-name:slideLeft;animation-duration: .8s;animation-fill-mode: forwards;opacity: 0;animation-timing-function:ease;}
.slideLeftAll {animation-name:slideLeftAll;animation-duration: .8s;animation-fill-mode: forwards;opacity: 0;animation-timing-function:ease;}
.slideRight {animation-name:slideRight;animation-duration: .8s;animation-fill-mode: forwards;opacity: 0;animation-timing-function:ease;}
.slideRightAll {animation-name:slideRightAll;animation-duration: .8s;animation-fill-mode: forwards;opacity: 0;animation-timing-function:ease;}
.scale {animation-name:scale;animation-duration: .8s;animation-fill-mode: forwards;opacity: 0;animation-timing-function:ease;}
.scale2 {animation-name:scale2;animation-duration: .8s;animation-fill-mode: forwards;opacity: 0;animation-timing-function:ease;}
.zoom {animation-name:zoom;animation-duration: .8s;animation-fill-mode: forwards;opacity: 0;animation-timing-function:ease;}
.show {animation-name:show;animation-duration: .8s;animation-fill-mode: forwards;opacity: 0;animation-timing-function:ease;}
.arrowUp {animation-name:arrowUp;animation-duration: .8s;animation-fill-mode: forwards;opacity: 0;animation-timing-function:linear;animation-iteration-count:infinite;}
.arrowDown {animation-name:arrowDown;animation-duration: .8s;animation-fill-mode: forwards;opacity: 0;animation-timing-function:linear;animation-iteration-count:infinite;}
.blink {animation-name:blink;animation-duration: 1s;animation-iteration-count:infinite;animation-timing-function:step-end;}
.bounce {animation-name:bounce;animation-duration: 0.6s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(0, 0, 0.18, 0.99);animation-direction: alternate;} 
.rolling {animation-name:rolling;animation-duration: 40s;animation-timing-function: linear;animation-delay: 0s;animation-fill-mode:forwards;animation-iteration-count: infinite;}
.rolling_rv {animation-name:rolling_rv;animation-duration: 40s;animation-timing-function: linear;animation-delay: 0s;animation-fill-mode:forwards;animation-iteration-count: infinite;}
.rolling_clone {animation-name:rolling_clone;animation-duration: 40s;animation-timing-function: linear;animation-delay: 0s;animation-iteration-count: infinite;}
.shake {animation-name:shake;animation-duration:6s;animation-iteration-count: infinite;}
.openclose_center {animation-name:openclose_center;animation-duration: 0.7s;animation-timing-function: ease-in-out;animation-delay: 0.2s;animation-iteration-count: 1;animation-fill-mode: forwards;white-space: nowrap;justify-content: left;}
.openclose_center2 {animation-name:openclose_center2;animation-duration: 0.7s;animation-timing-function: ease-in-out;animation-delay: 0.2s;animation-iteration-count: 1;animation-fill-mode: forwards;white-space: nowrap;justify-content: left;}
.float {animation: float 1.2s ease-in-out infinite;}
.rotate {animation: rotate 5s linear infinite;}
@keyframes rotate {
    from {
        transform: perspective(600px) rotateY(0deg);
    }
    to {
        transform: perspective(600px) rotateY(360deg);
    }
}
@keyframes float {
    0%, 100%{-webkit-transform:rotateZ(-5deg);transform:rotateZ(-5deg)}
25%{-webkit-transform:rotateZ(-6deg);transform:rotateZ(-6deg)}
50%{-webkit-transform:rotateZ(5deg);transform:rotateZ(5deg)}
75%{-webkit-transform:rotateZ(6deg);transform:rotateZ(6deg)}
}
@keyframes shake {
    0% {transform:rotate(0deg)}
    25% {transform:rotate(-1.5deg)}
    50% {transform:rotate(1.5deg)}
    75% {transform:rotate(-1.5deg)}
    100% {transform:rotate(0deg)}
} 
@keyframes bubble {
    0% {transform:scale(0)}
    100% {transform:scale(1)}
} 
@keyframes slideUp {
    0% {transform:translateY(100px);opacity: 0;}
    100% {transform:translateY(0);opacity: 1;}
}
@keyframes slideUp_text {
    0% {transform:translateY(10px);opacity: 0;}
    100% {transform:translateY(0);opacity: 1;}
}
@keyframes slideDown {
    0% {transform:translateY(-100px);opacity: 0;}
    100% {transform:translateY(0);opacity: 1;}
}

@keyframes slideLeft {
    0% {transform:translateX(100px);opacity: 0;}
    100% {transform:translateX(0);opacity: 1;}
}
@keyframes slideRight {
    0% {transform:translateX(-100px);opacity: 0;}
    100% {transform:translateX(0);opacity: 1;}
}
@keyframes slideRightAll {
    0% {transform:translateX(-100%);opacity: 0;}
    100% {transform:translateX(0);opacity: 1;}
}@keyframes slideLeftAll {
    0% {transform:translateX(-100%);opacity: 0;}
    100% {transform: translateX(-50%);;opacity: 1;}
}
@keyframes show {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes sb {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.05);
  }
}
@keyframes sb1 {
    0% {
        transform: rotate(2deg);
    }
    25% {
        transform: rotate(-2deg);
    }
    50% {
        transform: rotate(2deg);
    }
    100% {
        transform: rotate(2deg);
    }
  }
@keyframes scale {
    0% {transform:scale(1);opacity: 0;}
    50% {transform:scale(1.2);opacity: 0;}
    100% {transform:scale(1);opacity: 1;}
}
@keyframes scale2 {
    0% {transform:translateY(-50%) scale(1);opacity: 0;}
    50% {transform:translateY(-50%) scale(2);opacity: 0;}
    100% {transform:translateY(-50%) scale(1);opacity: 1;}
}
@keyframes zoom {
  0% {transform:scale(0);opacity: 0;}
  50% {transform:scale(1.2);opacity: 1;}
  100% {transform:scale(1);opacity: 1;}
}
@keyframes rolling { /* 원본용 */
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-100%);
  }
}
@keyframes rolling_rv { /* 원본용 */
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
  }
@keyframes rolling_clone { /* 클론용 */
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-200%);
  }
}
@keyframes motion {
	0% {margin-top: 0px;} /* 처음 위치 */
	100% {margin-top: 3px;} /* 마지막 위치 */
  }
  @keyframes flip {
  0%,80% {
    transform: rotateY(360deg) 
  }
}
@keyframes bounce{
  to{
      transform: translateX(-50%) translateY(-7px);
  }
}
@keyframes arrowUp {
    0% {
        opacity: 0;
      transform:translateY(5px);
    }
    30% {
        opacity: 1;
      transform:translateY(0px);
    }
    70% {
        opacity: 1;
      transform:translateY(0px);
    }
    100% {
        opacity: 0;
      transform:translateY(5px);
    }
}
@keyframes arrowDown {
    0% {
        opacity: 0;
      transform:translateY(0px);
    }
    30% {
        opacity: 1;
      transform:translateY(5px);
    }
    70% {
        opacity: 1;
      transform:translateY(5px);
    }
    100% {
        opacity: 0;
      transform:translateY(0px);
    }
}
@keyframes openclose_center {
    0% {
      width: 0;
      opacity: 0;
    }
    100% {
      width: 75vh;
      text-indent: 0;
      opacity: 1;
    }
  }
  @keyframes openclose_center2 {
      0% {
        width: 0;
        opacity: 0;
      }
      100% {
        width: 20vh;
        text-indent: 0;
        opacity: 1;
      }
    }
@keyframes openclose {
    0% {
      width: 0;
      opacity: 0;
    }
    100% {
      width: 52.2vh;
      text-indent: 0;
      opacity: 1;
    }
  }
  @keyframes openclose2 {
    0% {
      width: 0;
      opacity: 0;
    }
    100% {
      width: 38vh;
      text-indent: 0;
      opacity: 1;
    }
  }
  @keyframes blink {
    50% {
        opacity: 1;
      }
  }
  @keyframes opa {
    0% {
        opacity: 0;
      }
    100% {
        opacity: 1;
      }
  }

  @media screen and (max-width:1440px) {
    @keyframes openclose {
        0% {
          width: 0;
          opacity: 0;
        }
        100% {
          width: 45vh;
          text-indent: 0;
          opacity: 1;
        }
      }
      @keyframes openclose2 {
        0% {
          width: 0;
          opacity: 0;
        }
        100% {
          width: 31.5vh;
          text-indent: 0;
          opacity: 1;
        }
      }
  }
  @media screen and (max-width:768px) {
    
    @keyframes openclose {
        0% {
          width: 0;
          opacity: 0;
        }
        100% {
          width: 54vw;
          text-indent: 0;
          opacity: 1;
        }
      }
      @keyframes openclose2 {
        0% {
          width: 0;
          opacity: 0;
        }
        100% {
          width: 39vw;
          text-indent: 0;
          opacity: 1;
        }
      }
      @keyframes openclose_center {
        0% {
          width: 0;
          opacity: 0;
        }
        100% {
          width: 85vw;
          text-indent: 0;
          opacity: 1;
        }
      }
      @keyframes openclose_center2 {
          0% {
            width: 0;
            opacity: 0;
          }
          100% {
            width: 30vw;
            text-indent: 0;
            opacity: 1;
          }
        }
  }

  @media screen and (max-width:550px) {
    @keyframes openclose {
        0% {
          width: 0;
          opacity: 0;
        }
        100% {
          width: 71.5vw;
          text-indent: 0;
          opacity: 1;
        }
      }
      @keyframes openclose2 {
        0% {
          width: 0;
          opacity: 0;
        }
        100% {
          width: 53vw;
          text-indent: 0;
          opacity: 1;
        }
      }
      @keyframes scale2 {
        0% {transform:scale(1);opacity: 0;}
        50% {transform:scale(2);opacity: 0;}
        100% {transform:scale(1);opacity: 1;}
    }
  }