@keyframes drag_guide {
  0% {
    right: -80px;
    bottom: -120px;
  }
  100%{
    right: -320px;
    bottom: 130px;
  }
}
@keyframes aniMovie01 {
  0%{
    left: 1080px;
    top: -210px;
  }
  20%{
    left: 2310px;
    top: -20px;
  }
  24%{
    left: 2530px;
    top: 70px;
  }
  30%{
    left: 2710px;
    top: 250px;
    transform:rotateY(180deg);
  }
  31%{
    transform:rotateY(0deg);
  }
  35%{
    left: 2710px;
    top: 470px;
    transform:rotateY(0deg);
  }
  40%{
    left: 2580px;
    top: 670px;
    transform:rotateY(0deg);
  }
  45%{
    left: 2370px;
    top: 760px;
    transform:rotateY(0deg);
  }
  70%{
    left: 290px;
    top: 430px;
    transform:rotateY(0deg);
  }
  75%{
    left: 60px;
    top: 290px;
    transform:rotateY(0deg);
  }
  81%{
    transform:rotateY(0deg);
  }
  82%{
    left: -20px;
    top: 110px;
    transform:rotateY(180deg);
  }
  85%{
    left: 30px;
    top: -90px;
    transform:rotateY(180deg);
  }
  90%{
    left: 310px;
    top: -220px;
    transform:rotateY(180deg);
  }
  100%{
    left: 1080px;
    top: -210px;
    transform:rotateY(180deg);
  }

}


@keyframes aniMovie02 {
  0%{
    left: 680px;
    top: -210px;
  }
  30%{
    left: 2340px;
    top: 50px;
  }
  35%{
    left: 2600px;
    top: 140px;
  }
  39%{
    left: 2660px;
    top: 390px;
    transform: rotateY(180deg);
  }
  40%{
    left: 2660px;
    top: 390px;
    transform: rotateY(0deg);
  }
  45%{
    left: 2560px;
    top: 670px;
    transform: rotateY(0deg);
  }
  50%{
    left: 2260px;
    top: 750px;
    transform: rotateY(0deg);
  }
  75%{
    left: 200px;
    top: 390px;
    transform: rotateY(0deg);
  }
  80%{
    left: -70px;
    top: 70px;
    transform: rotateY(0deg);
  }
  81%{
    transform: rotateY(180deg);
  }
  80%{
    left: 60px;
    top: -140px;
    transform: rotateY(180deg);
  }
  92%{
    left: 370px;
    top: -250px;
    transform: rotateY(180deg);
  }
  100%{
    left: 680px;
    top: -210px;
    transform: rotateY(180deg);
  }

}

@keyframes aniMovie03 {
  0%{
    left: 2110px;
    top: -20px;
    transform: rotateY(180deg);
  }
  8%{
    left: 2470px;
    top: 60px;
    transform: rotateY(180deg);
  }
  15%{
    left: 2790px;
    top: 360px;
    transform: rotateY(180deg);
  }
  16%{
    transform: rotateY(0deg);
  }
  21%{
    left: 2680px;
    top: 660px;
    transform: rotateY(0deg);
  }
  26%{
    left: 2380px;
    top: 760px;
    transform: rotateY(0deg);
  }
  60%{
    left: 280px;
    top: 400px;
    transform: rotateY(0deg);
  }
  68%{
    left: -70px;
    top: 170px;
    transform: rotateY(0deg);
  }
  69%{
    transform: rotateY(180deg);
  }
  75%{
    left: 120px;
    top: -190px;
    transform: rotateY(180deg);
  }
  80%{
    left: 670px;
    top: -270px;
    transform: rotateY(180deg);
  }
  100%{
    left: 2110px;
    top: -20px;
    transform: rotateY(180deg);
  }
}

@keyframes aniMovie04 {
  0%{
    left: 2700px;
    top: 420px;
  }
  10%{
    left: 2430px;
    top: 750px;
  }
  50%{
    left: 100px;
    top: 400px;
    transform: rotateY(0deg);
  }
  58%{
    left: -120px;
    top: 190px;
    transform: rotateY(0deg);
  }
  59%{
    transform: rotateY(180deg);
  }
  68%{
    left: 150px;
    top: -190px;
    transform: rotateY(180deg);
  }
  75%{
    left: 700px;
    top: -260px;
    transform: rotateY(180deg);
  }
  95%{
    left: 2580px;
    top: 90px;
    transform: rotateY(180deg);
  }
  99%{
    transform: rotateY(180deg);
  }
  100%{
    left: 2700px;
    top: 420px;
    transform: rotateY(0deg);
  }
}

@keyframes aniMovie05 {
  0%{
    left: 690px;
    top: 520px;
  }
  7%{
    left: 170px;
    top: 340px;
  }
  12%{
    left: -20px;
    top: 90px;
    transform: rotateY(0deg);
  }
  13%{
    transform: rotateY(180deg);
  }
  20%{
    left: 180px;
    top: -180px;
    transform: rotateY(180deg);
  }

  22%{
    left: 280px;
    top:-220px;
    transform: rotateY(180deg);
  }
  30%{
    left: 850px;
    top:-200px;
    transform: rotateY(180deg);
  }
  60%{
    left: 2500px;
    top:70px;
    transform: rotateY(180deg);
  }
  68%{
    left: 2800px;
    top:390px;
    transform: rotateY(180deg);
  }
  69%{
    transform: rotateY(0deg);
  }
  75%{
    left: 2330px;
    top:770px;
    transform: rotateY(0deg);
  }

  100%{
    left: 690px;
    top: 520px;
    transform: rotateY(0deg);
  }
}

@keyframes moveAlongPath {
  from {
    offset-distance: 0%; /* 시작점 */
  }
  to {
    offset-distance: 100%; /* 끝점 */
  }
}

@keyframes ani_move2 {
  from {
    stroke-dashoffset: -890;
  }
  to {
    stroke-dashoffset: -1550;
  }
}
@keyframes ani_move {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -1500;
  }
}
@keyframes card_on{
  0% {
    opacity:0;
  }

  100% {
    opacity:1;
  }
}
@keyframes light{
  0% {
    opacity:0;
  }
  50% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}
@keyframes circle_rotate{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes light_eng{
  0% {
    opacity:0;
  }

  50% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}
@keyframes zoom{
  0% {
    scale: 1;
  }
  50% {
    scale: 1.1;
  }
  100% {
    scale: 1;
  }
}
@keyframes arrow{
  0% {
    right: -90px
  }
  100% {
    right: -130px

  }
}
@keyframes blink{
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes typing{
  0% {
    width: 0%;
  }
  50% {
    width: 330px;
  }
  100% {
    width: 0%;
  }
}
@keyframes txt_blink{
  0% {
    opacity:1;
  }
  55% {
    opacity:.5;
  }
  60% {
    opacity:1;
  }
  70% {
    opacity:0;
  }
  80% {
    opacity:1;
  }
  90% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}


@keyframes leaf_up{
  0% {
    bottom:-114px;
    opacity:0;
  }
  70% {
    bottom:-17px;
    opacity:0;
  }
  100% {
    bottom:0;
    opacity:1;
  }
}

@keyframes water_drop{
  0% {
    opacity:0;
    width:0;
  }
  100% {
    width:89px;
    opacity:1;
  }
}
@keyframes twinkle{
  0% {
    opacity:0;
    transform:scale(0);
  }
  50% {
    opacity:1;
  }
  100% {
    transform:scale(1);
    opacity:0;
  }
}

@keyframes h_move01{
  0% {
    right:0;
    top:150px;
  }
  100% {
    top:150px;
    right:-300px;
  }
}
@keyframes h_move02{
  0% {
    top:100px;
    left:0;
  }
  100% {
    top:400px;
    left:-420px
  }
}
@keyframes h_move03{
  0% {
    top:200px;
    left:0;
  }
  100% {
    top:200px;
    left:-200px
  }
}
@keyframes event_end{
  0% {
    opacity:0;
  }
  49% {
    opacity:0;
  }
  50% {
    opacity:1;
  }
  99% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}


@keyframes radum_move1{
  0% {

  }
  10% {
    top: 51px;
    left: 46px;
  }
  20% {
    top: 311px;
    left: 346px;
  }
  30% {
    top: 311px;
    left: 33px;
  }
  40% {
    top: 45px;
    left: 323px;
  }
  50% {
    top: 337px;
    left: 323px;
  }
  60% {
    top: 147px;
    left: -7px;
  }
  70% {
    top: 147px;
    left: 383px;
  }
  80% {
    top: 357px;
    left: 213px;
  }
  90% {
    top: -3px;
    left: 153px;
  }
  100% {
    top: 347px;
    left: 313px;
  }
}



@keyframes radum_move2{
  0% {

  }
  10% {
    top: 311px;
    left: 346px;

  }
  20% {
    top: 51px;
    left: 46px;
  }
  30% {
    top: 311px;
    left: 33px;
  }
  40% {
    top: 337px;
    left: 323px;
  }
  50% {
    top: 45px;
    left: 323px;

  }
  60% {
    top: 147px;
    left: 383px;

  }
  70% {
    top: 147px;
    left: -7px;
  }
  80% {
    top: -3px;
    left: 153px;

  }
  90% {
    top: 357px;
    left: 213px;
  }
  100% {
    top: 347px;
    left: 113px;
  }
}



@keyframes radum_move3{
  0% {

  }
  10% {
    top: 45px;
    left: 323px;
  }
  20% {
    top: 311px;
    left: 346px;
  }
  30% {
    top: 51px;
    left: 46px;
  }
  40% {
    top: 337px;
    left: 323px;
  }
  50% {
    top: 311px;
    left: 33px;
  }
  60% {
    top: 147px;
    left: -7px;
  }
  70% {
    top: -3px;
    left: 153px;

  }
  80% {
    top: 357px;
    left: 213px;
  }
  90% {
    top: 147px;
    left: 383px;
  }
  100% {
    top: 347px;
    left: 250px;
  }
}

@keyframes radum_move4{
  0% {

  }
  10% {
    top: 336px;
    left: 317px;
  }
  20% {
    top: 46px;
    left: 57px;
  }
  30% {
    top: 333px;
    left: 327px;
  }
  40% {
    top: 223px;
    left: -6px;
  }
  50% {
    top: 153px;
    left: 384px;
  }
  60% {
    top: 63px;
    left: 38px;
  }
  70% {
    top: 363px;
    left: 268px;
  }
  80% {
    top: -5px;
    left: 148px;
  }
  90% {
    top: 45px;
    left: 325px;
  }
  100% {
    top: 355px;
    left: 138px;
  }
}

@keyframes radum_move5{
  0% {

  }
  10% {
    top: 223px;
    left: -6px;
  }
  20% {
    top: 333px;
    left: 327px;

  }
  30% {
    top: 46px;
    left: 57px;
  }
  40% {
    top: 336px;
    left: 317px;
  }
  50% {
    top: 153px;
    left: 384px;
  }
  60% {
    top: 45px;
    left: 325px;

  }
  70% {
    top: -5px;
    left: 148px;
  }
  80% {
    top: 63px;
    left: 38px;
  }
  90% {
    top: 363px;
    left: 268px;
  }
  100% {
    top: 355px;
    left: 138px;
  }
}

@keyframes radum_move6{
  0% {

  }
  10% {
    top: 333px;
    left: 327px;

  }
  20% {
    top: 223px;
    left: -6px;

  }
  30% {
    top: 336px;
    left: 317px;
  }
  40% {
    top: 46px;
    left: 57px;
  }
  50% {
    top: 45px;
    left: 325px;
  }
  60% {
    top: 153px;
    left: 384px;
  }
  70% {
    top: 63px;
    left: 38px;
  }
  80% {
    top: -5px;
    left: 148px;
  }
  90% {
    top: 263px;
    left: 268px;
  }
  100% {
    top: 355px;
    left: 138px;
  }
}


@keyframes radum_move7{
  0% {

  }
  10% {
    top: 153px;
    left: 384px;


  }
  20% {

    top: 45px;
    left: 325px;
  }
  30% {
    top: 46px;
    left: 57px;

  }
  40% {
    top: 336px;
    left: 317px;
  }
  50% {
    top: 223px;
    left: -6px;
  }
  60% {
    top: 333px;
    left: 327px;
  }
  70% {
    top: 63px;
    left: 38px;
  }
  80% {
    top: 263px;
    left: 268px;

  }
  90% {
    top: -5px;
    left: 148px;
  }
  100% {
    top: 355px;
    left: 138px;
  }
}

@keyframes radum_move8{
  0% {

  }
  10% {
    top: 223px;
    left: -6px;

  }
  20% {
    top: 153px;
    left: 384px;


  }
  30% {

    top: 45px;
    left: 325px;
  }
  40% {
    top: 333px;
    left: 327px;
  }
  50% {
    top: 46px;
    left: 57px;
  }
  60% {
    top: 336px;
    left: 317px;

  }
  70% {
    top: -5px;
    left: 148px;

  }
  80% {

    top: 63px;
    left: 38px;
  }
  90% {
    top: 263px;
    left: 268px;
  }
  100% {
    top: 355px;
    left:338px;
  }
}


@keyframes radum_move9{
  0% {

  }
  10% {
    top: 263px;
    left: 268px;
  }
  20% {
    top: 45px;
    left: 325px;
  }
  30% {
    top: 223px;
    left: -6px;

  }
  40% {
    top: 333px;
    left: 327px;
  }
  50% {
    top: 153px;
    left: 384px;
  }
  60% {
    top: 63px;
    left: 38px;
  }
  70% {
    top: 336px;
    left: 317px;
  }
  80% {
    top: -5px;
    left: 148px;
  }
  90% {
    top: 46px;
    left: 57px;
  }
  100% {
    top: 355px;
    left:338px;
  }
}


@keyframes radum_move10{
  0% {

  }
  10% {

    top: 153px;
    left: 384px;
  }
  20% {
    top: 223px;
    left: -6px;
  }
  30% {
    top: 45px;
    left: 325px;
  }
  40% {
    top: 46px;
    left: 57px;
  }
  50% {
    top: 333px;
    left: 327px;

  }
  60% {
    top: -5px;
    left: 148px;


  }
  70% {

    top: 63px;
    left: 38px;
  }
  80% {
    top: 263px;
    left: 268px;


  }
  90% {
    top: 336px;
    left: 317px;
  }
  100% {
    top: 355px;
    left:170px;
  }
}


@keyframes rotate{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes ball_selected{
  0% {
    top: -150px;
    left:0;
  }
  10% {
    top: 0;
    left: 0;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 0;
    left: 450px;
    opacity:1;
  }
}
@keyframes ball_selected1{
  0% {
    top: -150px;
    left:0;
  }
  10% {
    top: 0;
    left: 0;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 0;
    left: 450px;
    opacity:1;
  }
}
@keyframes ball_selected2{
  0% {
    top: -150px;
    left:0;
  }
  10% {
    top: 0;
    left: 0;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 0;
    left: 330px;
    opacity:1;
  }
}
@keyframes ball_selected3{
  0% {
    top: -150px;
    left:0;
  }
  10% {
    top: 0;
    left: 0;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 0;
    left: 210px;
    opacity:1;
  }
}
@keyframes ball_selected4{
  0% {
    top: -150px;
    left:0;
  }
  10% {
    top: 0;
    left: 0;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 0;
    left: 90px;
    opacity:1;
  }
}
@keyframes ball_selected5{
  0% {
    top: -150px;
    left:0;
  }
  10% {
    top: 0;
    left: 0;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 0;
    left: -30px;
    opacity:1;
  }
}