.key_animate{
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-timing-function: steps(1);
}

@keyframes ani_bgm {
  0% {
    transform: rotate(25deg);
  }
  50% {
    transform: rotate(-80deg);
  }
  100% {
    transform: rotate(25deg);
  }
}
@keyframes keyframes-empty {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes keyframes-rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes keyframes-rotate2 {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0);
  }
}

@keyframes keyframes-update {
  0% {
    transform: translateY(0.1rem);
  }
  50% {
    transform: translateY(0rem);
  }
  100% {
    transform: translateY(0.1rem);
  }
}

@keyframes btn_scale {
  0% {
    transform: scale(1.1);
    opacity: 1;
  }

  50% {
    transform:  scale(1);
    opacity: 0.5;
  }

  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}

@keyframes keyframes-scale2 {
  0% {
    transform: scale(1.1);
  }

  50% {
    transform:  scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}

@keyframes keyframes-keyword_get {
  0% {
    transform: scale(1.1) rotate(-48deg);
  }

  50% {
    transform:  scale(1) rotate(-48deg);
  }

  100% {
    transform: scale(1.1) rotate(-48deg);
  }
}

@keyframes keyframes-keyword_get_2 {
  0% {
    transform: scale(1.1) rotate(28deg);
  }

  50% {
    transform:  scale(1) rotate(28deg);
  }

  100% {
    transform: scale(1.1) rotate(28deg);
  }
}



@keyframes keyframes-run {
  0% {
      width: 100%;
      height: 0;
      padding-bottom: 105.98290598290599%;
      background-image: url("../img/main_role/sprites.png");
      background-size: 2100% 100%;
  }

  4.76% {
      background-position: 5% 0%;
  }

  9.52% {
      background-position: 10% 0%;
  }

  14.29% {
      background-position: 15% 0%;
  }

  19.05% {
      background-position: 20% 0%;
  }

  23.81% {
      background-position: 25% 0%;
  }

  28.57% {
      background-position: 30% 0%;
  }

  33.33% {
      background-position: 35% 0%;
  }

  38.10% {
      background-position: 40% 0%;
  }

  42.86% {
      background-position: 45% 0%;
  }

  47.62% {
      background-position: 50% 0%;
  }

  52.38% {
      background-position: 55.00000000000001% 0%;
  }

  57.14% {
      background-position: 60% 0%;
  }

  61.90% {
      background-position: 65% 0%;
  }

  66.67% {
      background-position: 70% 0%;
  }

  71.43% {
      background-position: 75% 0%;
  }

  76.19% {
      background-position: 80% 0%;
  }

  80.95% {
      background-position: 85% 0%;
  }

  85.71% {
      background-position: 90% 0%;
  }

  90.48% {
      background-position: 95% 0%;
  }

  95.24%,
  100% {
      background-position: 100% 0%;
  }
}

@keyframes keyframes-stand {
  0% {
      width: 100%;
      height: 0;
      padding-bottom: 105.98290598290599%;
      background-image: url("../img/main_role/stand.png");
      background-size: 1200% 100%;
  }

  8.33% {
      background-position: 9.090909090909092% 0%;
  }

  16.67% {
      background-position: 18.181818181818183% 0%;
  }

  25.00% {
      background-position: 27.27272727272727% 0%;
  }

  33.33% {
      background-position: 36.36363636363637% 0%;
  }

  41.67% {
      background-position: 45.45454545454545% 0%;
  }

  50.00% {
      background-position: 54.54545454545454% 0%;
  }

  58.33% {
      background-position: 63.63636363636363% 0%;
  }

  66.67% {
      background-position: 72.72727272727273% 0%;
  }

  75.00% {
      background-position: 81.81818181818183% 0%;
  }

  83.33% {
      background-position: 90.9090909090909% 0%;
  }

  91.67%,
  100% {
      background-position: 100% 0%;
  }
}

@keyframes keyframes-mission {
  0% {
      width: 100%;
      height: 0;
      padding-bottom: 138.69731800766283%;
      background-image: url("../img/page_street/part_1/mission_sprites.png");
      background-size: 2200% 100%;
  }

  4.55% {
      background-position: 4.761904761904762% 0%;
  }

  9.09% {
      background-position: 9.523809523809524% 0%;
  }

  13.64% {
      background-position: 14.285714285714285% 0%;
  }

  18.18% {
      background-position: 19.047619047619047% 0%;
  }

  22.73% {
      background-position: 23.809523809523807% 0%;
  }

  27.27% {
      background-position: 28.57142857142857% 0%;
  }

  31.82% {
      background-position: 33.33333333333333% 0%;
  }

  36.36% {
      background-position: 38.095238095238095% 0%;
  }

  40.91% {
      background-position: 42.857142857142854% 0%;
  }

  45.45% {
      background-position: 47.61904761904761% 0%;
  }

  50.00% {
      background-position: 52.38095238095239% 0%;
  }

  54.55% {
      background-position: 57.14285714285714% 0%;
  }

  59.09% {
      background-position: 61.904761904761905% 0%;
  }

  63.64% {
      background-position: 66.66666666666666% 0%;
  }

  68.18% {
      background-position: 71.42857142857143% 0%;
  }

  72.73% {
      background-position: 76.19047619047619% 0%;
  }

  77.27% {
      background-position: 80.95238095238095% 0%;
  }

  81.82% {
      background-position: 85.71428571428571% 0%;
  }

  86.36% {
      background-position: 90.47619047619048% 0%;
  }

  90.91% {
      background-position: 95.23809523809523% 0%;
  }

  95.45%,
  100% {
      background-position: 100% 0%;
  }
}

@keyframes keyframes-word{
  0%{
    transform: scale(0)
  }
  20%{
    transform: scale(1)
  }
  90%{
    transform: scale(1)
  }
  90.1%{
    transform: scale(0)
  }
  100%{
    transform: scale(0)
  }
}

@keyframes keyframes-word2{
  0%{
    transform: scale(0)
  }
  20%{
    transform: scale(1.2)
  }
  90%{
    transform: scale(1.2)
  }
  90.1%{
    transform: scale(0)
  }
  100%{
    transform: scale(0)
  }
}

@keyframes keyframes-notic{
  0%{
    width: 0;
  }
  10%{
    width: 29%;
  }
  40%{
    width: 58%;
  }
  70%{
    width: 100%;
  }
  100%{
    width: 0;
  }
  /* 0%{
    width: 0;
  }
  10%{
    width: 0.294rem;
  }
  40%{
    width: 0.58rem;
  }
  70%{
    width: 1rem;
  }
  100%{
    width: 0;
  } */
}


@keyframes keyframes-npc_lixi {
  0% {
      width: 100%;
      height: 0;
      padding-bottom: 106.9090909090909%;
      background-image: url("../img/page_street/part_1/sprites_lixi.png");
      background-size: 2400% 100%;
  }

  4.00% {
      background-position: 4.3478260869565215% 0%;
  }

  8.00% {
      background-position: 8.695652173913043% 0%;
  }

  12.00% {
      background-position: 13.043478260869565% 0%;
  }

  16.00% {
      background-position: 17.391304347826086% 0%;
  }

  20.00% {
      background-position: 21.73913043478261% 0%;
  }

  24.00% {
      background-position: 26.08695652173913% 0%;
  }

  28.00% {
      background-position: 30.434782608695656% 0%;
  }

  32.00% {
      background-position: 34.78260869565217% 0%;
  }

  36.00% {
      background-position: 39.130434782608695% 0%;
  }

  40.00% {
      background-position: 43.47826086956522% 0%;
  }

  44.00% {
      background-position: 47.82608695652174% 0%;
  }

  48.00% {
      background-position: 52.17391304347826% 0%;
  }

  52.00% {
      background-position: 56.52173913043478% 0%;
  }

  56.00% {
      background-position: 60.86956521739131% 0%;
  }

  60.00% {
      background-position: 65.21739130434783% 0%;
  }

  64.00% {
      background-position: 69.56521739130434% 0%;
  }

  68.00% {
      background-position: 73.91304347826086% 0%;
  }

  72.00% {
      background-position: 78.26086956521739% 0%;
  }

  76.00% {
      background-position: 82.6086956521739% 0%;
  }

  80.00% {
      background-position: 86.95652173913044% 0%;
  }

  84.00% {
      background-position: 91.30434782608695% 0%;
  }

  88.00% {
      background-position: 95.65217391304348% 0%;
  }

  92.00% {
      background-position: 100% 0%;
  }

  96.00%,
  100% {
      background-position: 0% 0%;
  }
}


@keyframes keyframes-npc_shizi {
  0% {
      width: 100%;
      height: 0;
      padding-bottom: 90.41450777202073%;
      background-image: url("../img/page_street/part_1/sprites_shizi.png");
      background-size: 2000% 100%;
  }

  4.76% {
      background-position: 5.263157894736842% 0%;
  }

  9.52% {
      background-position: 10.526315789473683% 0%;
  }

  14.29% {
      background-position: 15.789473684210526% 0%;
  }

  19.05% {
      background-position: 21.052631578947366% 0%;
  }

  23.81% {
      background-position: 26.31578947368421% 0%;
  }

  28.57% {
      background-position: 31.57894736842105% 0%;
  }

  33.33% {
      background-position: 36.84210526315789% 0%;
  }

  38.10% {
      background-position: 42.10526315789473% 0%;
  }

  42.86% {
      background-position: 47.368421052631575% 0%;
  }

  47.62% {
      background-position: 52.63157894736842% 0%;
  }

  52.38% {
      background-position: 57.89473684210527% 0%;
  }

  57.14% {
      background-position: 63.1578947368421% 0%;
  }

  61.90% {
      background-position: 68.42105263157895% 0%;
  }

  66.67% {
      background-position: 73.68421052631578% 0%;
  }

  71.43% {
      background-position: 78.94736842105263% 0%;
  }

  76.19% {
      background-position: 84.21052631578947% 0%;
  }

  80.95% {
      background-position: 89.47368421052632% 0%;
  }

  85.71% {
      background-position: 94.73684210526315% 0%;
  }

  90.48% {
      background-position: 100% 0%;
  }

  95.24%,
  100% {
      background-position: 0% 0%;
  }
}


@keyframes keyframes-npc_duxin {
    0% {
        width: 100%;
        height: 0;
        padding-bottom: 97.97570850202429%;
        background-image: url("../img/page_street/part_2/sprites-duxin.png");
        background-size: 2300% 100%;
    }

    4.00% {
        background-position: 4.545454545454546% 0%;
    }

    8.00% {
        background-position: 9.090909090909092% 0%;
    }

    12.00% {
        background-position: 13.636363636363635% 0%;
    }

    16.00% {
        background-position: 18.181818181818183% 0%;
    }

    20.00% {
        background-position: 22.727272727272727% 0%;
    }

    24.00% {
        background-position: 27.27272727272727% 0%;
    }

    28.00% {
        background-position: 31.818181818181817% 0%;
    }

    32.00% {
        background-position: 36.36363636363637% 0%;
    }

    36.00% {
        background-position: 40.909090909090914% 0%;
    }

    40.00% {
        background-position: 45.45454545454545% 0%;
    }

    44.00% {
        background-position: 50% 0%;
    }

    48.00% {
        background-position: 0% 0%;
    }

    52.00% {
        background-position: 54.54545454545454% 0%;
    }

    56.00% {
        background-position: 59.09090909090909% 0%;
    }

    60.00% {
        background-position: 63.63636363636363% 0%;
    }

    64.00% {
        background-position: 68.18181818181817% 0%;
    }

    68.00% {
        background-position: 72.72727272727273% 0%;
    }

    72.00% {
        background-position: 77.27272727272727% 0%;
    }

    76.00% {
        background-position: 81.81818181818183% 0%;
    }

    80.00% {
        background-position: 86.36363636363636% 0%;
    }

    84.00% {
        background-position: 90.9090909090909% 0%;
    }

    88.00% {
        background-position: 95.45454545454545% 0%;
    }

    92.00% {
        background-position: 100% 0%;
    }

    96.00%,
    100% {
        background-position: 0% 0%;
    }
}


@keyframes keyframes-npc_ruxue {
  0% {
      width: 100%;
      height: 0;
      padding-bottom: 89.44337811900192%;
      background-image: url("../img/page_street/part_2/sprites_ruxue.png");
      background-size: 1900% 100%;
  }

  5.26% {
      background-position: 5.555555555555555% 0%;
  }

  10.53% {
      background-position: 11.11111111111111% 0%;
  }

  15.79% {
      background-position: 16.666666666666664% 0%;
  }

  21.05% {
      background-position: 22.22222222222222% 0%;
  }

  26.32% {
      background-position: 27.77777777777778% 0%;
  }

  31.58% {
      background-position: 33.33333333333333% 0%;
  }

  36.84% {
      background-position: 38.88888888888889% 0%;
  }

  42.11% {
      background-position: 44.44444444444444% 0%;
  }

  47.37% {
      background-position: 50% 0%;
  }

  52.63% {
      background-position: 55.55555555555556% 0%;
  }

  57.89% {
      background-position: 61.111111111111114% 0%;
  }

  63.16% {
      background-position: 66.66666666666666% 0%;
  }

  68.42% {
      background-position: 72.22222222222221% 0%;
  }

  73.68% {
      background-position: 77.77777777777779% 0%;
  }

  78.95% {
      background-position: 83.33333333333334% 0%;
  }

  84.21% {
      background-position: 88.88888888888889% 0%;
  }

  89.47% {
      background-position: 94.44444444444444% 0%;
  }

  94.74%,
  100% {
      background-position: 100% 0%;
  }
}

@keyframes keyframes-npc_partner {
  0% {
      width: 100%;
      height: 0;
      padding-bottom: 143.85026737967914%;
      background-image: url("../img/page_street/part_3/sprites_partner.png");
      
      background-size: 1400% 100%;
  }

  5.00% {
      background-position: 7.6923076923076925% 0%;
  }

  10.00% {
      background-position: 15.384615384615385% 0%;
  }

  15.00% {
      background-position: 23.076923076923077% 0%;
  }

  20.00% {
      background-position: 30.76923076923077% 0%;
  }

  25.00% {
      background-position: 38.46153846153847% 0%;
  }

  30.00% {
      background-position: 46.15384615384615% 0%;
  }

  35.00% {
      background-position: 53.84615384615385% 0%;
  }

  40.00% {
      background-position: 61.53846153846154% 0%;
  }

  45.00% {
      background-position: 69.23076923076923% 0%;
  }

  50.00% {
      background-position: 76.92307692307693% 0%;
  }

  55.00% {
      background-position: 38.46153846153847% 0%;
  }

  60.00% {
      background-position: 46.15384615384615% 0%;
  }

  65.00% {
      background-position: 53.84615384615385% 0%;
  }

  70.00% {
      background-position: 61.53846153846154% 0%;
  }

  75.00% {
      background-position: 69.23076923076923% 0%;
  }

  80.00% {
      background-position: 76.92307692307693% 0%;
  }

  85.00% {
      background-position: 84.61538461538461% 0%;
  }

  90.00% {
      background-position: 92.3076923076923% 0%;
  }

  95.00%,
  100% {
      background-position: 100% 0%;
  }
}


@keyframes keyframes-npc_ssr {
  0% {
      width: 100%;
      height: 0;
      padding-bottom: 101.28617363344053%;
      background-image: url("../img/page_street/part_3/sprites_ssr.png");
      background-size: 2000% 100%;
  }

  4.76% {
      background-position: 5.263157894736842% 0%;
  }

  9.52% {
      background-position: 10.526315789473683% 0%;
  }

  14.29% {
      background-position: 15.789473684210526% 0%;
  }

  19.05% {
      background-position: 21.052631578947366% 0%;
  }

  23.81% {
      background-position: 26.31578947368421% 0%;
  }

  28.57% {
      background-position: 31.57894736842105% 0%;
  }

  33.33% {
      background-position: 36.84210526315789% 0%;
  }

  38.10% {
      background-position: 42.10526315789473% 0%;
  }

  42.86% {
      background-position: 47.368421052631575% 0%;
  }

  47.62% {
      background-position: 52.63157894736842% 0%;
  }

  52.38% {
      background-position: 57.89473684210527% 0%;
  }

  57.14% {
      background-position: 63.1578947368421% 0%;
  }

  61.90% {
      background-position: 68.42105263157895% 0%;
  }

  66.67% {
      background-position: 73.68421052631578% 0%;
  }

  71.43% {
      background-position: 78.94736842105263% 0%;
  }

  76.19% {
      background-position: 84.21052631578947% 0%;
  }

  80.95% {
      background-position: 89.47368421052632% 0%;
  }

  85.71% {
      background-position: 94.73684210526315% 0%;
  }

  90.48% {
      background-position: 100% 0%;
  }

  95.24%,
  100% {
      background-position: 0% 0%;
  }
}


@keyframes keyframes-npc_zuozhan {
  0% {
      width: 100%;
      height: 0;
      padding-bottom: 142.10526315789474%;
      background-image: url("../img/page_street/part_2/sprites_zuozhan.png");
      background-size: 200% 100%;
  }

  50.00%,
  100% {
      background-position: 100% 0%;
  }
}


@keyframes keyframes-tree {
  0% {
      width: 100%;
      height: 0;
      padding-bottom: 77.75%;
      background-image: url("../img/page_street/part_3/sprites_tree.png");
      background-size: 1600% 100%;
  }

  5.88% {
      background-position: 6.666666666666667% 0%;
  }

  11.76% {
      background-position: 13.333333333333334% 0%;
  }

  17.65% {
      background-position: 20% 0%;
  }

  23.53% {
      background-position: 26.666666666666668% 0%;
  }

  29.41% {
      background-position: 33.33333333333333% 0%;
  }

  35.29% {
      background-position: 40% 0%;
  }

  41.18% {
      background-position: 46.666666666666664% 0%;
  }

  47.06% {
      background-position: 53.333333333333336% 0%;
  }

  52.94% {
      background-position: 60% 0%;
  }

  58.82% {
      background-position: 66.66666666666666% 0%;
  }

  64.71% {
      background-position: 73.33333333333333% 0%;
  }

  70.59% {
      background-position: 80% 0%;
  }

  76.47% {
      background-position: 86.66666666666667% 0%;
  }

  82.35% {
      background-position: 93.33333333333333% 0%;
  }

  88.24% {
      background-position: 100% 0%;
  }

  94.12%,
  100% {
      background-position: 0% 0%;
  }
}

@keyframes shake-hard {
  2% {
      transform: translate(0.07rem, -0.04rem) rotate(-.5deg)
  }

  4% {
      transform: translate(0.03rem, 0.07rem) rotate(2.5deg)
  }

  6% {
      transform: translate(0.03rem, 0.08rem) rotate(.5deg)
  }

  8% {
      transform: translate(-0.07rem, 0.04rem) rotate(1.5deg)
  }

  10% {
      transform: translate(0.06rem, 0.10rem) rotate(-.5deg)
  }

  12% {
      transform: translate(0.04rem, 0.02rem) rotate(-.5deg)
  }

  14% {
      transform: translate(-0.04rem,0.06rem) rotate(3.5deg)
  }

  16% {
      transform: translate(0.01rem, 0.05rem) rotate(-1.5deg)
  }

  18% {
      transform: translate(0.03rem, -0.07rem) rotate(-2.5deg)
  }

  20% {
      transform: translate(-0.08rem, -0.07rem) rotate(.5deg)
  }

  22% {
      transform: translate(0.03rem, -0.02rem) rotate(-2.5deg)
  }

  24% {
      transform: translate(0.05rem, -0.04rem) rotate(1.5deg)
  }

  26% {
      transform: translate(-0.06rem, -0.04rem) rotate(-.5deg)
  }

  28% {
      transform: translate(0.01rem, 0rem) rotate(.5deg)
  }

  30% {
      transform: translate(-0.09rem, -0.03rem) rotate(3.5deg)
  }

  32% {
      transform: translate(0.03rem, 0.06rem) rotate(-1.5deg)
  }

  34% {
      transform: translate(-0.02rem, -0.03rem) rotate(-1.5deg)
  }

  36% {
      transform: translate(0.09rem, -0.03rem) rotate(-.5deg)
  }

  38% {
      transform: translate(0.09rem, -0.09rem) rotate(-1.5deg)
  }

  40% {
      transform: translate(0.08rem, -0.07rem) rotate(-2.5deg)
  }

  42% {
      transform: translate(-0.08rem, -0.02rem) rotate(2.5deg)
  }

  44% {
      transform: translate(-0.07rem, 0.02rem) rotate(-.5deg)
  }

  46% {
      transform: translate(-0.01rem, 0.04rem) rotate(3.5deg)
  }

  48% {
      transform: translate(0.03rem, 0.01rem) rotate(1.5deg)
  }

  50% {
      transform: translate(0.09rem, -0.01rem) rotate(2.5deg)
  }

  52% {
      transform: translate(-0.01rem, 0.05rem) rotate(-2.5deg)
  }

  54% {
      transform: translate(0.09rem, -0.02rem) rotate(.5deg)
  }

  56% {
      transform: translate(0.05rem, -0.04rem) rotate(-2.5deg)
  }

  58% {
      transform: translate(0.05rem, -0.08rem) rotate(-1.5deg)
  }

  60% {
      transform: translate(0.010rem, 0.04rem) rotate(1.5deg)
  }

  62% {
      transform: translate(-0.08rem, 0.01rem) rotate(-2.5deg)
  }

  64% {
      transform: translate(-0.09rem, 0.06rem) rotate(-1.5deg)
  }

  66% {
      transform: translate(-0.03rem, 0.02rem) rotate(.5deg)
  }

  68% {
      transform: translate(0.010rem, 0.04rem) rotate(.5deg)
  }

  70% {
      transform: translate(0.03rem, -0.04rem) rotate(-2.5deg)
  }

  72% {
      transform: translate(-0.05rem, 0.01rem) rotate(.5deg)
  }

  74% {
      transform: translate(0, -0.07rem) rotate(3.5deg)
  }

  76% {
      transform: translate(0.08rem, -0.03rem) rotate(-2.5deg)
  }

  78% {
      transform: translate(-0.08rem, 0.02rem) rotate(-.5deg)
  }

  80% {
      transform: translate(0.02rem, 0.07rem) rotate(-2.5deg)
  }

  82% {
      transform: translate(0.06rem, -0.04rem) rotate(1.5deg)
  }

  84% {
      transform: translate(0.03rem, 0.02rem) rotate(3.5deg)
  }

  86% {
      transform: translate(0rem, -0.05rem) rotate(-2.5deg)
  }

  88% {
      transform: translate(0.01rem, -0.03rem) rotate(2.5deg)
  }

  90% {
      transform: translate(-0.08rem, -0.09rem) rotate(2.5deg)
  }

  92% {
      transform: translate(-0.02rem, 0.03rem) rotate(2.5deg)
  }

  94% {
      transform: translate(-0.06rem, 0.00rem) rotate(-.5deg)
  }

  96% {
      transform: translate(-0.09rem, 0.08rem) rotate(1.5deg)
  }

  98% {
      transform: translate(0.09rem, 0.04rem) rotate(-1.5deg)
  }

  0%,100% {
      transform: translate(0, 0) rotate(0)
  }
}