@keyframes bg_ani{
    0%{
      background-size:120% 120%; 
    }
    100%{
      background-size:100% 100%; 
    }
  }
  @keyframes title_ani{
    0%{
      opacity: 0;
      transform: translateY(60px);
    }
    60%{
      opacity: 1;transform: translateY(-5px);
    }
    100%{
      opacity: 1;transform: translateY(0);
    }
  }
/*  home ------------------------------------------------------------ */
@keyframes top_logo{
  0%{
    transform: scale(0.8);opacity: 0;
  }
  100%{
    transform:scale(1);opacity: 1;
  }
}
@keyframes top_logo_ani{
  0%{
    -webkit-filter: brightness(150%); /* Safari */
    filter: brightness(150%);
  }
  80%{
    -webkit-filter: brightness(100%); /* Safari */
    filter: brightness(100%);
  }
}
@keyframes top_bg_char{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes top_char2{
  0%{
    opacity: 0.4;transform: translateX(230px);
  }
  80%{
    opacity: 1;transform: translateX(-3px);
  }
  100%{
    opacity: 1;transform: translateX(0px);
  }
}
@keyframes top_char1{
  0%{
    opacity: 0;transform: translateX(-100px);
  }
  80%{
    opacity: 1;transform: translateX(3px);
  }
  100%{
    opacity: 1;transform: translateX(0px);
  }
}
@keyframes top_char_ani{
  0%{
    transform: translateY(-3px) scale(1.001);
  }
  100%{
    transform: translateY(0px) scale(1);
  }
}
@keyframes top_char_ani2{
  0%{
    transform: translateY(-2px) rotate(0.4deg) scale(1.002);
  }
  100%{
    transform: translateY(0px) rotate(0) scale(1);
  }
}
@keyframes top_char_ani3{
  0%{
    transform:translateY(-1px) rotate(-0.2deg);
  }
  80%{
    transform:translateY(0) rotate(0);
  }
}
@keyframes top_char_ani4{
  0%{
    transform:translateY(-1px) scale(1.007);
  }
  80%{
    transform:translateY(0) scale(1);
  }
}
@keyframes index_title{
  0%{
    opacity: 0;transform: scale(2.5);
    -webkit-filter: blur(5px); /* Safari */
    filter: blur(5px);
  }
  100%{
    opacity: 1;transform:scale(1);
    -webkit-filter: blur(0px); /* Safari */
    filter: blur(0px);
  }
}
@keyframes  copy_ani{
  0%{
    opacity: 0;
    transform: translateY(80px);
  }
  100%{
    opacity: 1; transform: translateY(0px);
  }
}
/*  news ------------------------------------------------------------ */
  @keyframes news_con{
    0%{
      opacity: 0;
      transform:translateY(100px);
    }
    100%{
      opacity: 1;transform: translateY(0);
    }
  }
/*  world ------------------------------------------------------------ */
    @keyframes world_con{
      0%{
        opacity: 0;
        transform:translateY(120px);
      }
      100%{
        opacity: 1;transform:translateY(0px);
      }
    }

/* character ------------------------------------------------------------ */
  @keyframes character_list{
    0%{
      opacity: 0;
      transform:scale(0.6);
    }
    100%{
      opacity: 1;transform:scale(1);
    }
  }
  @keyframes character_btn{
    0%{
      opacity: 0;
      transform:translateY(100px);
    }
    100%{
      opacity: 1;transform: translateY(0);
    }
  }
/* system ------------------------------------------------------------ */
  @keyframes system_right{
    0%{
      opacity: 0;
      transform: translateX(260px);
    }
    100%{
      opacity: 1;transform: translateX(0);
    }
  }
  @keyframes system_char{
    0%{
      opacity: 0;
      transform: translateX(-260px);
    }
    100%{
      opacity: 1;transform: translateX(0);
    }
  }
  @keyframes system_list{
    0%{
      opacity: 0;
      transform:scale(0.6);
    }
    100%{
      opacity: 1;transform:scale(1);
    }
  }

/* system ------------------------------------------------------------ */
@keyframes movie_char_left{
  0%{
    opacity: 0;
    transform: translateX(260px) rotate(5deg);
  }
  100%{
    opacity: 1;transform: translateX(0) rotate(0deg);
  }
}
@keyframes movie_char_right{
  0%{
    opacity: 0;
    transform: translateX(-260px) rotate(-5deg);
  }
  100%{
    opacity: 1;transform: translateX(0) rotate(0deg);
  }
}
@keyframes movie_list{
  0%{
    opacity: 0;
    transform:scale(0.5);
  }
  100%{
    opacity: 1;transform:scale(1);
  }
}