@keyframes drag_guide {
  0% {
    right: 330px;
    bottom: -260px;
  }
  100%{
    right: 330px;
    bottom: -720px;
  }
}
@keyframes aniMovie01 {
  0%{
    left: 740px;
    top: -210px;
    transform: rotateY(180deg);
  }
  15%{
    left: 1470px;
    top: -120px;
    transform: rotateY(180deg);
  }
  25%{
    left: 1880px;
    top: 30px;
    transform: rotateY(180deg);
  }
  30%{
    left: 2040px;
    top: 210px;
    transform: rotateY(180deg);
  }
  31%{
    transform: rotateY(0deg);
  }
  40%{
    left: 1790px;
    top: 500px;
    transform: rotateY(0deg);
  }
  75%{
    left: 110px;
    top: 230px;
    transform: rotateY(0deg);
  }
  82%{
    left: -40px;
    top: -20px;
    transform: rotateY(0deg);
  }
  83%{
    transform: rotateY(180deg);
  }
  93%{
    left: 230px;
    top: -260px;
    transform: rotateY(180deg);
  }
  100%{
    left: 740px;
    top: -210px;
    transform: rotateY(180deg);
  }
}

@keyframes aniMovie02 {
  0%{
    left: 460px;
    top: -250px;
    transform: rotateY(180deg);
  }
  20%{
    left: 1470px;
    top: -120px;
    transform: rotateY(180deg);
  }
  28%{
    left: 1880px;
    top: 30px;
    transform: rotateY(180deg);
  }
  33%{
    left: 2040px;
    top: 210px;
    transform: rotateY(180deg);
  }
  34%{
    transform: rotateY(0deg);
  }
  43%{
    left: 1790px;
    top: 500px;
    transform: rotateY(0deg);
  }
  78%{
    left: 110px;
    top: 230px;
    transform: rotateY(0deg);
  }
  85%{
    left: -40px;
    top: -20px;
    transform: rotateY(0deg);
  }
  86%{
    transform: rotateY(180deg);
  }
  93%{
    left: 150px;
    top: -260px;
    transform: rotateY(180deg);
  }
  100%{
    left: 460px;
    top: -250px;
    transform: rotateY(180deg);
  }
}


@keyframes aniMovie03 {
  0%{
    left: 1320px;
    top: -140px;
    transform: rotateY(180deg);
  }
  3%{
    left: 1470px;
    top: -120px;
    transform: rotateY(180deg);
  }
  13%{
    left: 1880px;
    top: 30px;
    transform: rotateY(180deg);
  }
  20%{
    left: 2040px;
    top: 210px;
    transform: rotateY(180deg);
  }
  21%{
    transform: rotateY(0deg);
  }
  33%{
    left: 1790px;
    top: 500px;
    transform: rotateY(0deg);
  }
  63%{
    left: 110px;
    top: 230px;
    transform: rotateY(0deg);
  }
  70%{
    left: -40px;
    top: -20px;
    transform: rotateY(0deg);
  }
  71%{
    transform: rotateY(180deg);
  }
  76%{
    left: 150px;
    top: -260px;
    transform: rotateY(180deg);
  }
  100%{
    left: 1320px;
    top: -140px;
    transform: rotateY(180deg);
  }
}

@keyframes aniMovie04 {
  0%{
    left: 1910px;
    top: 300px;
    transform: rotateY(0deg);
  }
  5%{
    left: 1670px;
    top: 510px;
    transform: rotateY(0deg);
  }
  35%{
    left: 70px;
    top: 260px;
    transform: rotateY(0deg);
  }
  43%{
    left:-70px;
    top: -10px;
    transform: rotateY(0deg);
  }
  44%{
    transform: rotateY(180deg);
  }
  55%{
    left:260px;
    top:-270px;
    transform: rotateY(180deg);
  }
  65%{
    left:610px;
    top:-220px;
    transform: rotateY(180deg);
  }
  90%{
    left:1890px;
    top:0px;
    transform: rotateY(180deg);
  }
  94%{
    transform: rotateY(180deg);
  }
  95%{
    transform: rotateY(0deg);
  }
  100%{
    left: 1910px;
    top: 300px;
    transform: rotateY(0deg);
  }
}

@keyframes aniMovie05 {
  0%{
    left: 440px;
    top: 270px;
    transform: rotateY(0deg);
  }
  8%{
    left: 70px;
    top: 190px;
    transform: rotateY(0deg);
  }
  15%{
    left: -60px;
    top: 0;
    transform: rotateY(0deg);
  }
  16%{
    transform: rotateY(180deg);
  }
  23%{
    transform: rotateY(180deg);
  }
  24%{
    left: 130px;
    top: -240px;
    transform: rotateY(180deg);
  }
  30%{
    left: 440px;
    top: -260px;
    transform: rotateY(180deg);
  }
  50%{
    left: 1570px;
    top: -90px;
    transform: rotateY(180deg);
  }
  60%{
    left: 1950px;
    top: 70px;
    transform: rotateY(180deg);
  }
  64%{
    transform: rotateY(180deg);
  }
  65%{
    left: 1950px;
    top: 290px;
    transform: rotateY(0deg);
  }
  70%{
    transform: rotateY(0deg);
  }
  75%{
    left: 1760px;
    top: 490px;
    transform: rotateY(0deg);
  }
  100%{
    left: 440px;
    top: 270px;
    transform: rotateY(0deg);
  }
}






@keyframes evt_complete{
  0% {
	transform:scale(1);
  } 
  100% {
	transform:scale(.2);
  }
}
@keyframes character_zoom{
  0% {
	width:500px;
	height:300px;
  } 
  100% {
	width:798px;
	height:493px;
  }
}
@keyframes evt_expand{
  0% {
	width:0;
  } 
  100% {
	width:100%;
  }
}
@keyframes main_txt01{
  0% {
	width:100%;
  }
 
  100% {
	width:0;
  }
}
@keyframes main_txt02{
  0% {
	width:100%;
  }
 
  100% {
	width:0;
  }
}
@keyframes fire01{
  0% {
	transform:scale(0);
	top: 120px;
	left: 120px;
	opacity:0;
  }
  100% {
	transform:scale(1);
	top: 0;
	left: -100px;
	opacity:1;
  }
}
@keyframes fire02{
  0% {
	transform:scale(0);
	left: 100px;
	opacity:0;
  }
  100% {
	transform:scale(1);
	left: -76px;
	opacity:1;
  }
}

@keyframes fire03{
  0% {
	transform:scale(0);
	left: 100px;
	top:170px;
	opacity:0;
  }
  100% {
	transform:scale(1);
	left: -15px;
	top:290px;
	opacity:1;
  }
}
@keyframes fire04{
  0% {
	transform:scale(0);
	right: 60px;
	top:70px;
	opacity:0;
  }
  100% {
	transform:scale(1);
	right: -32px;
	top:0;
	opacity:1;
  }
}
@keyframes fire05{
  0% {
	transform:scale(0);
	right: 130px;
	opacity:0;
  }
  100% {
	transform:scale(1);
	right: 10px;
	opacity:1;
  }
}
@keyframes fire06{
  0% {
	transform:scale(0);
	top: 120px;
	right: 450px;
	opacity:0;
  }
  100% {
	transform:scale(1);
	top: 50px;
	right: 278px;
	opacity:1;
  }
}
@keyframes fire07{
  0% {
	transform:scale(0);
	top: 227px;
	right: 450px;
	opacity:0;
  }
  100% {
	transform:scale(1);
	top: 227px;
	right: 360px;
	opacity:1;
  }
}

@keyframes fire08{
  0% {
	transform:scale(0);
	top: 240px;
	right: 450px;
	opacity:0;
  }
  100% {
	transform:scale(1);
	top: 280px;
	right: 325px;
	opacity:1;
  }
}

@keyframes fire{
  0% {
	transform:scale(0);
	opacity:0;
  }
  100% {
	transform:scale(1);
	opacity:1;
  }
}

@keyframes zoom{
  0% {
    scale: 1;
  }
  50% {
    scale: 1.1;
  }
  100% {
    scale: 1;
  }
}
@keyframes blink{
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes arrow{
  0% {
	top: 420px
  }
  100% {
	top: 450px
   
  }
}
@keyframes typing{
  0% {
    width: 0%;
  }
  50% {
    width: 280px;
  }
  100% {
    width: 0%;
  }
}
@keyframes char_move01{
  0% {
    top: 40px;
    left: 8px;
  }
  10% {
    top: 0px;
    left: 98px;
  }
  25% {
    top: -110px;
    left: 128px;
  }
  35% {
    top: -100px;
    left: 268px;
  }
  40% {
    top: -40px;
    left: 248px;
  }
  60% {
    top: -40px;
    left: 363px;
  }
  70% {
    top: -90px;
    left: 493px;
  }
  75% {
    top: -70px;
    left: 543px;
  }
  80% {
    top: -30px;
    left: 513px;
  }
  100% {
    top: 30px;
    left: 383px;
  }
}
@keyframes char_move02 {
  0%{
    top: 30px;
    left: 383px;
  }
  20%{
    top: 130px;
    left: 303px;
  }
  35%{
    top: 160px;
    left: 203px;
  }
  70%{
    top: 140px;
    left: -17px;
  }
  85%{
    top: 120px;
    left: -47px;
  }
  90%{
    top: 90px;
    left: -36px;
  }
  100%{
    top: 50px;
    left: 16px;
  }
}
@keyframes ani_move1 {
  from {
    stroke-dashoffset:0;
  }
  to {
    stroke-dashoffset: -900;
  }
}
@keyframes ani_move2 {
  from {
    stroke-dashoffset: -890;
  }
  to {
    stroke-dashoffset: -1550;
  }
}
@keyframes rotate{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes ball_selected{
  0% {
    top: 0;
    left:86px;
  }
  10% {
    top: 130px;
    left: 86px;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 130px;
    left: 450px;
    opacity:0;
  }
}
@keyframes ball_selected1{
  0% {
    top: 0;
    left:86px;
  }
  10% {
    top: 130px;
    left: 86px;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 130px;
    left: 360px;
    opacity:1;
  }
}
@keyframes ball_selected2{
  0% {
    top: 0;
    left:86px;
  }
  10% {
    top: 130px;
    left: 86px;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 130px;
    left: 250px;
    opacity:1;
  }
}
@keyframes ball_selected3{
  0% {
    top: 0;
    left:86px;
  }
  10% {
    top: 130px;
    left: 86px;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 130px;
    left: 140px;
    opacity:1;
  }
}
@keyframes ball_selected4{
  0% {
    top: 0;
    left:86px;
  }
  10% {
    top: 130px;
    left: 86px;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 130px;
    left: 30px;
    opacity:1;
  }
}
@keyframes ball_selected5{
  0% {
    top: 0;
    left:86px;
  }
  10% {
    top: 130px;
    left: 86px;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 130px;
    left: -80px;
    opacity:1;
  }
}
@keyframes radum_move1{
  0% {

  }
  10% {
    top: 51px;
    left: 46px;
  }
  20% {
    top: 211px;
    left: 220px;
  }
  30% {
    top: 211px;
    left: 33px;
  }
  40% {
    top: 45px;
    left: 220px;
  }
  50% {
    top: 210px;
    left: 220px;
  }
  60% {
    top: 147px;
    left: -7px;
  }
  70% {
    top: 147px;
    left: 220px;
  }
  80% {
    top: 157px;
    left: 213px;
  }
  90% {
    top: -3px;
    left: 153px;
  }
  100% {
    top: 147px;
    left: 213px;
  }
}



@keyframes radum_move2{
  0% {

  }
  10% {
    top: 111px;
    left: 246px;

  }
  20% {
    top: 51px;
    left: 46px;
  }
  30% {
    top: 211px;
    left: 33px;
  }
  40% {
    top: 210px;
    left: 220px;
  }
  50% {
    top: 45px;
    left: 220px;

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

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

  }
  90% {
    top: 57px;
    left: 213px;
  }
  100% {
    top: 210px;
    left: 113px;
  }
}



@keyframes radum_move3{
  0% {

  }
  10% {
    top: 45px;
    left: 223px;
  }
  20% {
    top: 111px;
    left: 220px;
  }
  30% {
    top: 51px;
    left: 46px;
  }
  40% {
    top: 137px;
    left: 210px;
  }
  50% {
    top: 111px;
    left: 33px;
  }
  60% {
    top: 147px;
    left: -7px;
  }
  70% {
    top: -3px;
    left: 153px;

  }
  80% {
    top: 157px;
    left: 213px;
  }
  90% {
    top: 147px;
    left: 220px;
  }
  100% {
    top: 147px;
    left: 200px;
  }
}

@keyframes radum_move4{
  0% {

  }
  10% {
    top: 136px;
    left: 217px;
  }
  20% {
    top: 46px;
    left: 57px;
  }
  30% {
    top: 133px;
    left: 220px;
  }
  40% {
    top: 223px;
    left: 30px;
  }
  50% {
    top: 153px;
    left: 184px;
  }
  60% {
    top: 63px;
    left: 38px;
  }
  70% {
    top: 163px;
    left: 168px;
  }
  80% {
    top: -5px;
    left: 148px;
  }
  90% {
    top: 45px;
    left: 220px;
  }
  100% {
    top: 155px;
    left: 138px;
  }
}

@keyframes radum_move5{
  0% {

  }
  10% {
    top: 210px;
    left: 30px;
  }
  20% {
    top: 133px;
    left: 220px;

  }
  30% {
    top: 46px;
    left: 57px;
  }
  40% {
    top: 136px;
    left: 217px;
  }
  50% {
    top: 153px;
    left: 210px;
  }
  60% {
    top: 45px;
    left: 220px;

  }
  70% {
    top: -5px;
    left: 148px;
  }
  80% {
    top: 63px;
    left: 38px;
  }
  90% {
    top: 263px;
    left: 168px;
  }
  100% {
    top: 155px;
    left: 138px;
  }
}

@keyframes radum_move6{
  0% {

  }
  10% {
    top: 133px;
    left: 220px;

  }
  20% {
    top: 210px;
    left: 30px;

  }
  30% {
    top: 136px;
    left: 200px;
  }
  40% {
    top: 46px;
    left: 57px;
  }
  50% {
    top: 45px;
    left: 225px;
  }
  60% {
    top: 153px;
    left: 220px;
  }
  70% {
    top: 63px;
    left: 38px;
  }
  80% {
    top: -5px;
    left: 148px;
  }
  90% {
    top: 210px;
    left: 220px;
  }
  100% {
    top: 155px;
    left: 138px;
  }
}


@keyframes radum_move7{
  0% {

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


  }
  20% {

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

  }
  40% {
    top: 136px;
    left: 217px;
  }
  50% {
    top: 123px;
    left: 30px;
  }
  60% {
    top: 133px;
    left: 220px;
  }
  70% {
    top: 63px;
    left: 38px;
  }
  80% {
    top: 200px;
    left: 210px;

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

@keyframes radum_move8{
  0% {

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

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


  }
  30% {

    top: 45px;
    left: 220px;
  }
  40% {
    top: 133px;
    left: 220px;
  }
  50% {
    top: 46px;
    left: 57px;
  }
  60% {
    top: 136px;
    left: 117px;

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

  }
  80% {

    top: 63px;
    left: 38px;
  }
  90% {
    top: 163px;
    left: 168px;
  }
  100% {
    top: 155px;
    left:200px;
  }
}


@keyframes radum_move9{
  0% {

  }
  10% {
    top: 163px;
    left: 168px;
  }
  20% {
    top: 45px;
    left: 220px;
  }
  30% {
    top: 123px;
    left: 30px;

  }
  40% {
    top: 133px;
    left: 220px;
  }
  50% {
    top: 153px;
    left: 220px;
  }
  60% {
    top: 63px;
    left: 38px;
  }
  70% {
    top: 136px;
    left: 217px;
  }
  80% {
    top: -5px;
    left: 148px;
  }
  90% {
    top: 46px;
    left: 57px;
  }
  100% {
    top: 155px;
    left:138px;
  }
}


@keyframes radum_move10{
  0% {

  }
  10% {

    top: 153px;
    left: 184px;
  }
  20% {
    top: 123px;
    left: 30px;
  }
  30% {
    top: 45px;
    left: 220px;
  }
  40% {
    top: 46px;
    left: 57px;
  }
  50% {
    top: 133px;
    left: 127px;

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


  }
  70% {

    top: 63px;
    left: 38px;
  }
  80% {
    top: 200px;
    left: 220px;


  }
  90% {
    top: 136px;
    left: 217px;
  }
  100% {
    top: 155px;
    left:170px;
  }
}

@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 ball_selected1_1{
   0% {
     top: 0;
     left:86px;
   }
   10% {
     top: 130px;
     left: 86px;
   }
   95% {
     opacity:1;
   }
   100% {
     top: 130px;
     left: 300px;
     opacity:1;
   }
 }
@keyframes ball_selected1_2{
  0% {
    top: 0;
    left:86px;
  }
  10% {
    top: 130px;
    left: 86px;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 130px;
    left: 190px;
    opacity:1;
  }
}
@keyframes ball_selected1_3{
  0% {
    top: 0;
    left:86px;
  }
  10% {
    top: 130px;
    left: 86px;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 130px;
    left: 83px;
    opacity:1;
  }
}
@keyframes ball_selected1_4{
  0% {
    top: 0;
    left:86px;
  }
  10% {
    top: 130px;
    left: 86px;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 130px;
    left: -30px;
    opacity:1;
  }
}
@keyframes ball_selected1_5{
  0% {
    top: 0;
    left:86px;
  }
  10% {
    top: 130px;
    left: 86px;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 130px;
    left: -140px;
    opacity:1;
  }
}

@keyframes ball_selected2_1{
  0% {
    top: 0;
    left:86px;
  }
  10% {
    top: 130px;
    left: 86px;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 130px;
    left: 300px;
    opacity:1;
  }
}
@keyframes ball_selected2_2{
  0% {
    top: 0;
    left:86px;
  }
  10% {
    top: 130px;
    left: 86px;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 130px;
    left: 163px;
    opacity:1;
  }
}
@keyframes ball_selected2_3{
  0% {
    top: 0;
    left:86px;
  }
  10% {
    top: 130px;
    left: 86px;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 130px;
    left: 0;
    opacity:1;
  }
}
@keyframes ball_selected2_4{
  0% {
    top: 0;
    left:86px;
  }
  10% {
    top: 130px;
    left: 86px;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 130px;
    left: -140px;
    opacity:1;
  }
}

@keyframes ball_selected3_1{
  0% {
    top: 0;
    left:86px;
  }
  10% {
    top: 130px;
    left: 86px;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 130px;
    left: 211px;
    opacity:1;
  }
}
@keyframes ball_selected3_2{
  0% {
    top: 0;
    left:86px;
  }
  10% {
    top: 130px;
    left: 86px;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 130px;
    left: 83px;
    opacity:1;
  }
}
@keyframes ball_selected3_3{
  0% {
    top: 0;
    left:86px;
  }
  10% {
    top: 130px;
    left: 86px;
  }
  95% {
    opacity:1;
  }
  100% {
    top: 130px;
    left: -44px;
    opacity:1;
  }
}