.anime-fade-in-box {
  animation: fadein 1s;
  -moz-animation: fadein 1s; /* Firefox */
  -webkit-animation: fadein 1s; /* Safari and Chrome */
  -o-animation: fadein 1s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
        transform: translateY(-999px);
    }
    to {
        opacity:1;
        transform: translateY(0);
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

.element {
  animation: moveUp 1s forwards;
}

.anime-fade-out {
    animation: fadeout 0.7s ease-out forwards 2.2s;
}

@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        display: none;
    }
}
.anime-contain-close {
    animation: containClose 0.5s ease-out forwards;
    overflow: hidden;
}
@keyframes containClose{
    0% {
        max-height: 400px;
    }
    100%{
        max-height: 0px;
        /*display: none;*/
    }
}

.anime-contain-open {
    animation: containOpen 0.6s ease-out forwards 0.3s;
    max-height: 0px;
    overflow: hidden;
}

@keyframes containOpen{
    0% {
        opacity: 0;
        max-height: 0vh;   
    }
    50%{
        max-height: 100vh;
    }
    100%{
        opacity: 1;
        max-height: 999vh;
    }
}


.anime-lr-view {
	/*
    animation: lrview 0.5s ease-in-out forwards;
    */
  }
  
  @keyframes lrview {
    0% {
      transform: translate(20%,20%);
      opacity: 0;
    }
    70% {
      transform: translate(-5%,-5%);
      opacity: 0.3;
    }
    100% {
      transform: translate(0,0);
      opacity: 1;
    }
  }

/* ----------- 리스트 스와이프 -------------*/
.anime-swipe-right-start {
    animation: swipeRightStart 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  }
  
  @keyframes swipeRightStart {
    0% {
      transform: translate(0%,0);
      opacity: 1;
    }
    100% {
      transform: translate(-100%,0);
      opacity: 0;
    }
  }
  
.anime-swipe-right-end {
    animation: swipeRightEnd 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  }

  @keyframes swipeRightEnd {
    0% {
        transform: translate(100%, 0);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
  }
  
.anime-swipe-left-start {
    animation: swipeLeftStart 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  }
  
  @keyframes swipeLeftStart {
    0% {
      transform: translate(0%,0);
      opacity: 1;
    }
    100% {
      transform: translate(100%,0);
      opacity: 0;
    }
  }
  
.anime-swipe-left-end {
    animation: swipeLeftEnd 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  }

  @keyframes swipeLeftEnd {
    0% {
        transform: translate(-100%, 0);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
  }
/*----------------------------- 룰렛 -----------------------------------*/

.anime-lotate-ready {
  animation: readyRotate 0.8s ease-out forwards;
	transform-origin: 50% 50%;
}

.anime-lotate-right {
  animation: rotateRight 0.3s linear infinite;
	transform-origin: 50% 50%;
}

@keyframes readyRotate {
  0% {
    transform: rotate(-710deg);
  }
  60%{
  	transform: rotate(10deg);
  }
  80%{
  	transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes rotateRight {
	to {
		transform: rotate(360deg);
	}
}
/*----------------------------- 모달  -----------------------------------*/

.anime-modal-open{
	animation: modalOpen 0.5s ease-in-out forwards;
}

@keyframes modalOpen {
    0% {
        transform: scale(0);
    }
    60% {
        transform: scale(1.2);
    }
    70% {
        transform: scale(0.9);
    }
    80% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}