<template>
  <div id="material_child1">
    <!-- 页面标题 -->
    <div class="material_title">
      <div class="d-flex">
        <img src="@/assets/materialImg/title.png" alt="">
      </div>
    </div>
    <!-- 返回按钮 -->
    <img src="@/assets/materialImg/returnHistory.png" alt="" class="material_btn">

    <!-- 图片 -->
    <img src="@/assets/materialImg/stove.png" alt="" class="stoveImg">
    <img src="@/assets/materialImg/quip.png" alt="" class="quipImg">
    <img src="@/assets/materialImg/MTop.png" alt="" class="MImg1">
    <img src="@/assets/materialImg/MLeft.png" alt="" class="MImg3">
    <img src="@/assets/materialImg/node.png" alt="" class="nodeImg1">
    <!-- 文字 -->
    <div class="label label_p1">裂解进料</div>
    <div class="label label_p2">高压锅炉给水</div>
    <div class="label label_p3">900A/B/C</div>
    <div class="label label_p19">FROM 390-P-</div>
    <div class="label label_p5">过热超高压蒸汽</div>
    <div class="label label_p6">TO 320-C-210</div>
    <div class="label label_p7">裂解气</div>
    <div class="label label_p8">FROM 320-E-270</div>
    <div class="label label_p9">急冷油</div>

    <div class="label label_p12">310-E-110A</div>

    <div class="label label_p15">310-K-110</div>
    <div class="label label_p16">310-E-110D</div>


    <div class="label label_p17">FROM 320-E-275</div>
    <div class="label label_p18">稀释蒸汽</div>

    <!-- 特殊文字 -->
    <div class="label2 label2_p1">310-V-110</div>

    <div class="label2 label2_p2">裂解炉</div>
    <!-- 标题文字 -->
    <div class="title_label title_p1">X-112</div>
    <div class="title_label title_p2">X-911</div>
    <div class="title_label title_p3">X-911</div>
    <div class="title_label title_p4">X-211</div>
    <div class="title_label title_p5">X-211</div>
    <div class="title_label title_p7">310-Z-110</div>
    <div class="title_label title_p8">X-212</div>
    <!-- 流程线及动效 -->
    <div class="line l_1">
      <img src="@/assets/materialImg/arrow1.png" style="width:745px;height:12px">
      <img src="@/assets/materialImg/arrowRight.png" style="width:18px;height:20px" class="aniMovelan1">
    </div>

    <div class="line l_2">
      <img src="@/assets/materialImg/arrow2.png" style="width:20px;height:162px">
      <img src="@/assets/materialImg/arrowTop.png" style="width:20px;height:18px" class="aniMovelan2">
    </div>

    <div class="line l_3">
      <img src="@/assets/materialImg/arrow3.png" style="width:56px;height:150px">
      <img src="@/assets/materialImg/arrowBottom.png" style="width:18px;height:20px" class="aniMovelan3">
    </div>

    <div class="line l_4">
      <img src="@/assets/materialImg/arrow50.png" style="width:691px;height:20px">
      <img src="@/assets/materialImg/arrowRight.png" style="width:18px;height:20px" class="aniMovelan4">
    </div>

    <div class="line l_5">
      <img src="@/assets/materialImg/arrow5.png" style="width:626px;height:34px">
      <img src="@/assets/materialImg/arrowLeft.png" style="width:18px;height:20px" class="aniMovelan5">
    </div>


    <div class="line l_6">
      <img src="@/assets/materialImg/arrow6.png" style="width:140px;height:254px">
      <img src="@/assets/materialImg/arrowBottom.png" style="width:20px;height:18px" class="aniMovelan6">
    </div>

    <div class="line l_7">
      <img src="@/assets/materialImg/arrow52.png" style="width:65px;height:316px">
      <img src="@/assets/materialImg/arrowBottom.png" style="width:20px;height:18px" class="aniMovelan7">
    </div>

    <div class="line l_8">
      <img src="@/assets/materialImg/arrow51.png" style="width:669px;height:34px">
      <img src="@/assets/materialImg/arrowRight.png" style="width:18px;height:20px" class="aniMovelan8">
    </div>

    <div class="line l_12">
      <img src="@/assets/materialImg/arrow12.png" style="width:217px;height:20px">
      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan12"> -->
    </div>

    <div class="line l_9">
      <img src="@/assets/materialImg/arrow9.png" style="width:307px;height:20px">
      <img src="@/assets/materialImg/arrowLeft.png" style="width:18px;height:20px" class="aniMovelan9">
    </div>

    <div class="line l_10">
      <img src="@/assets/materialImg/arrow53.png" style="width:331px;height:20px">
      <img src="@/assets/materialImg/arrowTop.png" style="width:20px;height:18px" class="aniMovelan10">
    </div>

    <div class="line l_13">
      <img src="@/assets/materialImg/arrow13.png" style="width:20px;height:26px">
      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan13"> -->
    </div>

    <div class="line l_11">
      <img src="@/assets/materialImg/arrow54.png" style="width:848px;height:26px">
      <img src="@/assets/materialImg/arrowLeft.png" style="width:18px;height:20px" class="aniMovelan11">
    </div>

    <div class="line l_15">
      <img src="@/assets/materialImg/arrow57.png" style="width:20px;height:541px">
      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan15"> -->
    </div>
    <div class="line l_16">
      <img src="@/assets/materialImg/arrow56.png" style="width:20px;height:503px">
      <img src="@/assets/materialImg/arrowBottom.png" style="width:20px;height:18px" class="aniMovelan16">
    </div>
    <div class="line l_17">
      <img src="@/assets/materialImg/arrow17.png" style="width:20px;height:191px">
      <img src="@/assets/materialImg/arrowBottom.png" style="width:20px;height:18px" class="aniMovelan17">
    </div>
    <div class="line l_18">
      <img src="@/assets/materialImg/arrow18.png" style="width:20px;height:125px">
      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan18"> -->
    </div>
    <div class="line l_19">
      <img src="@/assets/materialImg/arrow19.png" style="width:295px;height:20px">
      <img src="@/assets/materialImg/arrowLeft.png" style="width:18px;height:20px" class="aniMovelan19">
    </div>
    <div class="line l_20">
      <img src="@/assets/materialImg/arrow20.png" style="width:260px;height:12px">
      <img src="@/assets/materialImg/arrowLeft.png" style="width:18px;height:20px" class="aniMovelan20">
    </div>
    <div class="line l_21">
      <img src="@/assets/materialImg/arrow21.png" style="width:20px;height:131px">
      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan21"> -->
    </div>
    <div class="line l_22">
      <img src="@/assets/materialImg/arrow22.png" style="width:299px;height:20px">
      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan22"> -->
    </div>




    <div class="line l_23">
      <img src="@/assets/materialImg/arrow23.png" style="width:182px;height:26px">
      <img src="@/assets/materialImg/arrowLeft.png" style="width:18px;height:20px" class="aniMovelan23">
    </div>
    <div class="line l_24">
      <img src="@/assets/materialImg/arrow24.png" style="width:90px;height:12px">
      <img src="@/assets/materialImg/arrowLeft.png" style="width:18px;height:20px" class="aniMovelan24">
    </div>
    <div class="line l_25">
      <img src="@/assets/materialImg/arrow25.png" style="width:215px;height:2px">
      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan25"> -->
    </div>
    <div class="line l_26">
      <img src="@/assets/materialImg/arrow59.png" style="width:20px;height:136px">
      <img src="@/assets/materialImg/arrowBottom.png" style="width:20px;height:18px" class="aniMovelan26">
    </div>
    <div class="line l_27">
      <img src="@/assets/materialImg/arrow60.png" style="width:614px;height:65px">
      <img src="@/assets/materialImg/arrowRight.png" style="width:18px;height:20px" class="aniMovelan27">
    </div>
    <div class="line l_35">
      <img src="@/assets/materialImg/arrow61.png" style="width:253px;height:65px">
      <img src="@/assets/materialImg/arrowTop.png" style="width:20px;height:18px" class="aniMovelan28">
    </div>
    <div class="line l_28">
      <img src="@/assets/materialImg/arrow28.png" style="width:20px;height:64px">
      <img src="@/assets/materialImg/arrowTop.png" style="width:20px;height:18px" class="aniMovelan28">
    </div>
    <div class="line l_29">
      <img src="@/assets/materialImg/arrow62.png" style="width:20px;height:170px">
      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan29"> -->
    </div>

    <div class="line l_31">
      <img src="@/assets/materialImg/arrow58.png" style="width:325px;height:12px">
      <img src="@/assets/materialImg/arrowRight.png" style="width:18px;height:20px" class="aniMovelan31">
    </div>

    <div class="line l_38">
      <img src="@/assets/materialImg/arrow55.png" style="width:20px;height:364px">
      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan38"> -->
    </div>
    <div class="line l_39">
      <img src="@/assets/materialImg/arrow39.png" style="width:710px;height:20px">
      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan39"> -->
    </div>
    <div class="line l_40">
      <img src="@/assets/materialImg/arrow68.png" style="width:20px;height:450px">
      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan40"> -->
    </div>
    <div class="line l_41">
      <img src="@/assets/materialImg/arrow41.png" style="width:191px;height:20px">
      <img src="@/assets/materialImg/arrowRight.png" style="width:18px;height:20px" class="aniMovelan41">
    </div>
    <div class="line l_42">
      <img src="@/assets/materialImg/arrow42.png" style="width:121px;height:20px">
      <img src="@/assets/materialImg/arrowRight.png" style="width:18px;height:20px" class="aniMovelan42">
    </div>
    <div class="line l_43">
      <img src="@/assets/materialImg/arrow67.png" style="width:20px;height:377px">
      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan43"> -->
    </div>
    <div class="line l_44">
      <img src="@/assets/materialImg/arrow66.png" style="width:748px;height:20px">
      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan44"> -->
    </div>
    <div class="line l_45">
      <img src="@/assets/materialImg/arrow63.png" style="width:698px;height:20px">
      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan45"> -->
    </div>
    <div class="line l_46">
      <img src="@/assets/materialImg/arrow64.png" style="width:20px;height:283px">
      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan46"> -->
    </div>
    <div class="line l_34">
      <img src="@/assets/materialImg/arrow65.png" style="width:86px;height:20px">
      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan34"> -->
    </div>

    <div class="line l_48">
      <img src="@/assets/materialImg/arrow28.png" style="width:20px;height:64px">
      <img src="@/assets/materialImg/arrowTop.png" style="width:20px;height:18px" class="aniMovelan28">
    </div>
  </div>
</template>

<script>
export default {
  name: "material_child1",
  data() {
    return {

    }
  },
}
</script>

<style lang="scss">
#material_child1 {
  width: 1920px;
  height: 1080px;
  background-image: url('../../../assets/materialImg/materialBack.png');
  background-size: cover;

  .material_title {
    position: absolute;
    top: 31px;
    left: 860px
  }

  .material_btn {
    position: absolute;
    width: 158px;
    height: 53px;
    top: 69px;
    left: 54px;
    cursor: pointer;
  }

  .stoveImg {
    position: absolute;
    width: 312px;
    height: 770px;
    top: 136px;
    left: 1058px;
  }

  .quipImg {
    position: absolute;
    top: 389px;
    left: 701px;
  }

  .MImg1 {
    position: absolute;
    top: 585px;
    left: 437px;
    z-index: 4;
  }


  .MImg3 {
    position: absolute;
    top: 699px;
    left: 458px;
  }

  .nodeImg1 {
    position: absolute;
    top: 620px;
    left: 603px;
  }




  // 文字样式
  .label {
    position: absolute;
    font-family: 'Source Han Sans CN';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    color: #002063;
  }

  .label_p1 {
    top: 267px;
    left: 485px;
  }

  .label_p2 {
    top: 358px;
    left: 284px;
  }

  .label_p3 {
    top: 293px;
    left: 180px;
  }

  .label_p19 {
    top: 265px;
    left: 170px;
  }

  .label_p4 {
    top: 449px;
    left: 315px;
  }

  .label_p5 {
    top: 486px;
    left: 310px;
  }

  .label_p6 {
    top: 607px;
    left: 314px;
  }

  .label_p7 {
    top: 644px;
    left: 337px;
  }

  .label_p8 {
    top: 787px;
    left: 307px;
  }

  .label_p9 {
    top: 834px;
    left: 335px;
  }

  .label_p12 {
    top: 670px;
    left: 880px;
  }

  .label_p15 {
    top: 156px;
    left: 1245px;
  }

  .label_p16 {
    left: 1374px;
    top: 602px;
  }

  .label_p17 {
    left: 1549px;
    top: 161px;
  }

  .label_p18 {
    left: 1576px;
    top: 205px;
  }


  .label2 {
    position: absolute;
    font-family: 'Source Han Sans CN';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    color: #002063;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #3E5A94;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 16px;
  }

  .label2_p1 {
    top: 389px;
    left: 574px;
  }

  .label2_p2 {
    top: 591px;
    left: 1171px;
  }

  .title_label {
    position: absolute;
    font-family: 'Source Han Sans CN';
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 33px;
    text-align: right;
    color: #002063;
    text-shadow: 0px 4px 4px rgba(127, 130, 136, 0.5);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .title_p1 {
    width: 99px;
    height: 48px;
    padding-right: 16px;
    top: 275px;
    left: 361px;
    background: url('../../../assets/materialImg/title_b1.png') no-repeat 30%;
  }

  .title_p2 {
    width: 99px;
    height: 48px;
    padding-right: 16px;
    top: 325px;
    left: 176px;
    background: url('../../../assets/materialImg/title_b1.png') no-repeat 30%;
  }

  .title_p3 {
    width: 99px;
    height: 48px;
    padding-left: 16px;
    top: 455px;
    left: 197px;
    background: url('../../../assets/materialImg/title_b3.png') no-repeat 30%;
  }

  .title_p4 {
    width: 99px;
    height: 48px;
    padding-left: 16px;
    top: 620px;
    left: 207px;
    background: url('../../../assets/materialImg/title_b3.png') no-repeat 30%;
  }

  .title_p5 {
    width: 99px;
    height: 48px;
    padding-right: 16px;
    top: 801px;
    left: 209px;
    background: url('../../../assets/materialImg/title_b1.png') no-repeat 30%;
  }

  .title_p7 {
    top: 572px;
    left: 574px;
  }

  .title_p8 {
    width: 93px;
    height: 40px;
    padding-left: 16px;
    top: 174px;
    left: 1697px;
    background: url('../../../assets/materialImg/title_b3.png') no-repeat 30%;
  }

  .line {
    position: absolute;

    &.l_1 {
      left: 601px;
      top: 139px;

      .aniMovelan1 {
        -webkit-animation-name: aniMovelan1;
        animation-name: aniMovelan1;
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0px;
        left: 0px;
      }

      @keyframes aniMovelan1 {
        0% {
          left: 0;
          opacity: 0;
        }

        100% {
          left: 738px;
          opacity: 1;
        }
      }
    }


    &.l_2 {
      left: 592px;
      top: 143px;

      .aniMovelan2 {
        -webkit-animation-name: aniMovelan2;
        animation-name: aniMovelan2;
        -webkit-animation-duration: 3s;
        animation-duration: 3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
      }

      @keyframes aniMovelan2 {
        0% {
          top: 162px;
          opacity: 0;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }


    &.l_3 {
      left: 1294px;
      top: 145px;

      .aniMovelan3 {
        -webkit-animation-name: aniMovelan3;
        animation-name: aniMovelan3;
        -webkit-animation-duration: 3s;
        animation-duration: 3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
      }

      @keyframes aniMovelan3 {
        0% {
          top: 0;
          left: 42px;
          opacity: 0;
        }

        70% {
          top: 126px;
          left: 42px;
          opacity: .6;
          transform: rotate(0deg);
        }

        75% {
          top: 130px;
          left: 40px;
          opacity: .7;
          transform: rotate(90deg);
        }

        100% {
          top: 130px;
          opacity: 1;
          transform: rotate(90deg);
        }
      }
    }


    &.l_4 {
      left: 450px;
      top: 290px;

      .aniMovelan4 {
        -webkit-animation-name: aniMovelan4;
        animation-name: aniMovelan4;
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        // transform: rotate(90deg);
      }

      @keyframes aniMovelan4 {
        0% {
          left: 0;
          opacity: 0;
        }

        100% {
          left: 680px;
          opacity: 1;
        }
      }
    }


    &.l_5 {
      left: 1077px;
      top: 178px;

      .aniMovelan5 {
        -webkit-animation-name: aniMovelan5;
        animation-name: aniMovelan5;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 6px;
        left: 0;
      }

      @keyframes aniMovelan5 {
        0% {
          left: 626px;
          opacity: 0;
        }

        100% {
          left: 0;
          opacity: 1;
        }
      }
    }



    &.l_6 {
      left: 1290px;
      top: 191px;

      .aniMovelan6 {
        -webkit-animation-name: aniMovelan6;
        animation-name: aniMovelan6;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 126px;
        // transform: rotate(90deg);
      }

      @keyframes aniMovelan6 {
        0% {
          top: 0;
          opacity: 0;
        }

        60% {
          top: 234px;
          left: 126px;
          opacity: 0.6;
          transform: rotate(0deg);
        }

        61% {
          top: 234px;
          left: 126px;
          opacity: 0.6;
          transform: rotate(90deg);
        }

        100% {
          top: 234px;
          left: 0;
          opacity: 1;
          transform: rotate(90deg);
        }
      }
    }


    &.l_7 {
      left: 1077px;
      top: 192px;

      .aniMovelan7 {
        -webkit-animation-name: aniMovelan7;
        animation-name: aniMovelan7;
        -webkit-animation-duration: 3s;
        animation-duration: 3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -6px;
      }

      @keyframes aniMovelan7 {
        0% {
          top: 0;
          opacity: 0;
        }

        70% {
          top: 296px;
          opacity: .6;
          transform: rotate(0deg);
        }

        75% {
          top: 296px;
          left: -4px;
          opacity: .7;
          transform: rotate(-90deg);
        }

        100% {
          top: 296px;
          left: 60px;
          opacity: 1;
          transform: rotate(-90deg);
        }
      }
    }



    &.l_8 {
      left: 267px;
      top: 334px;

      .aniMovelan8 {
        -webkit-animation-name: aniMovelan8;
        animation-name: aniMovelan8;
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 6px;
        left: 0;
      }

      @keyframes aniMovelan8 {
        0% {
          left: 0;
          opacity: 0;
        }

        100% {
          left: 860px;
          opacity: 1;
        }
      }
    }


    &.l_12 {
      left: 925px;
      top: 341px;

      .aniMovelan12 {
        -webkit-animation-name: aniMovelan12;
        animation-name: aniMovelan12;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        transform: rotate(90deg);
      }

      @keyframes aniMovelan12 {
        0% {
          top: 154px;
          opacity: 0;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }

    &.l_9 {
      left: 837px;
      top: 398px;

      .aniMovelan9 {
        -webkit-animation-name: aniMovelan9;
        animation-name: aniMovelan9;
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0px;
        left: 0;
      }

      @keyframes aniMovelan9 {
        0% {
          left: 307px;
          opacity: 0;
        }

        100% {
          left: 0;
          opacity: 1;
        }
      }
    }



    &.l_10 {
      left: 811px;
      top: 367px;

      .aniMovelan10 {
        -webkit-animation-name: aniMovelan10;
        animation-name: aniMovelan10;
        -webkit-animation-duration: 3s;
        animation-duration: 3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
      }

      @keyframes aniMovelan10 {
        0% {
          top: 18px;
          left: -4px;
          opacity: 0.05;
        }

        5% {
          top: -2px;
          left: -4px;
          opacity: 0.2;
          transform: rotate(0deg);
        }

        6% {
          top: -2px;
          left: -4px;
          opacity: 0.2;
          transform: rotate(90deg);
        }

        100% {
          top: -2px;
          left: 320px;
          opacity: 1;
          transform: rotate(90deg);
        }
      }
    }


    &.l_13 {
      left: 804px;
      top: 371px;

      .aniMovelan13 {
        -webkit-animation-name: aniMovelan13;
        animation-name: aniMovelan13;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        transform: rotate(90deg);
      }

      @keyframes aniMovelan13 {
        0% {
          top: 154px;
          opacity: 0;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }



    &.l_11 {
      left: 292px;
      top: 464px;

      .aniMovelan11 {
        -webkit-animation-name: aniMovelan11;
        animation-name: aniMovelan11;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 5px;
        left: 0;
      }

      @keyframes aniMovelan11 {
        0% {
          left: 846px;
          opacity: 0;
        }

        100% {
          left: 0;
          opacity: 1;
        }
      }
    }

    &.l_15 {
      left: 728px;
      top: 419px;

      .aniMovelan15 {
        -webkit-animation-name: aniMovelan15;
        animation-name: aniMovelan15;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        transform: rotate(90deg);
      }

      @keyframes aniMovelan15 {
        0% {
          top: 154px;
          opacity: 0;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }


    &.l_16 {
      left: 750px;
      top: 420px;

      .aniMovelan16 {
        -webkit-animation-name: aniMovelan16;
        animation-name: aniMovelan16;
        -webkit-animation-duration: 8s;
        animation-duration: 8s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
      }

      @keyframes aniMovelan16 {
        0% {
          top: 0;
          left: 0;
          opacity: 0.5;
        }

        40% {
          top: 488px;
          left: 0;
          opacity: 0.5;
          transform: rotate(0deg);
        }

        41% {
          top: 488px;
          left: 0;
          opacity: 0.5;
          transform: rotate(-90deg);
        }


        75% {
          top: 488px;
          left: 686px;
          opacity: 0.6;
          transform: rotate(-90deg);
        }

        76% {
          top: 488px;
          left: 686px;
          opacity: 0.6;
          transform: rotate(-180deg);
        }


        92% {
          top: 216px;
          left: 686px;
          opacity: 0.9;
          transform: rotate(-180deg);
        }

        93% {
          top: 216px;
          left: 686px;
          opacity: 0.9;
          transform: rotate(90deg);
        }

        100% {
          top: 216px;
          left: 600px;
          opacity: 1;
          transform: rotate(90deg);
        }
      }
    }


    &.l_17 {
      left: 773px;
      top: 420px;

      .aniMovelan17 {
        -webkit-animation-name: aniMovelan17;
        animation-name: aniMovelan17;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
        // transform: rotate(90deg);
      }

      @keyframes aniMovelan17 {
        0% {
          top: 0;
          opacity: 0;
        }

        45% {
          top: 166px;
          opacity: 0.55;
          transform: rotate(0deg);
        }

        46% {
          top: 174px;
          left: 0px;
          opacity: 0.55;
          transform: rotate(-90deg);
        }

        100% {
          top: 174px;
          left: 291px;
          opacity: 1;
          transform: rotate(-90deg);
        }
      }
    }


    &.l_18 {
      left: 796px;
      top: 419px;

      .aniMovelan18 {
        -webkit-animation-name: aniMovelan18;
        animation-name: aniMovelan18;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        transform: rotate(90deg);
      }

      @keyframes aniMovelan18 {
        0% {
          top: 154px;
          opacity: 0;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }


    &.l_19 {
      left: 825px;
      top: 513px;

      .aniMovelan19 {
        -webkit-animation-name: aniMovelan19;
        animation-name: aniMovelan19;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
        // transform: rotate(90deg);
      }

      @keyframes aniMovelan19 {
        0% {
          top: 0;
          left: 306px;
          opacity: 0;
        }

        60% {
          top: 0;
          left: -1px;
          opacity: 0.6;
          transform: rotate(0deg);
        }

        61% {
          top: 0;
          left: -1px;
          opacity: 0.61;
          transform: rotate(-90deg);
        }

        100% {
          top: 120px;
          left: -1px;
          opacity: 1;
          transform: rotate(-90deg);
        }
      }
    }


    &.l_20 {
      left: 806px;
      top: 530px;

      .aniMovelan20 {
        -webkit-animation-name: aniMovelan20;
        animation-name: aniMovelan20;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        // transform: rotate(90deg);
      }

      @keyframes aniMovelan20 {
        0% {
          left: 260px;
          top: 0;
          opacity: 0;
        }

        60% {
          left: -10px;
          top: 0;
          opacity: 0.6;
          transform: rotate(0deg);
        }

        61% {
          top: 0px;
          left: -10px;
          opacity: 0.65;
          transform: rotate(90deg);
        }

        100% {
          top: -120px;
          left: -10px;
          opacity: 1;
          transform: rotate(90deg);
        }
      }
    }


    &.l_21 {
      left: 821px;
      top: 518px;

      .aniMovelan21 {
        -webkit-animation-name: aniMovelan21;
        animation-name: aniMovelan21;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        transform: rotate(90deg);
      }

      @keyframes aniMovelan21 {
        0% {
          top: 154px;
          opacity: 0;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }


    &.l_22 {
      left: 778px;
      top: 595px;

      .aniMovelan22 {
        -webkit-animation-name: aniMovelan22;
        animation-name: aniMovelan22;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        transform: rotate(90deg);
      }

      @keyframes aniMovelan22 {
        0% {
          top: 154px;
          opacity: 0;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }


    &.l_23 {
      left: 648px;
      top: 630px;

      .aniMovelan23 {
        -webkit-animation-name: aniMovelan23;
        animation-name: aniMovelan23;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 4px;
        left: -0;
      }

      @keyframes aniMovelan23 {
        0% {
          left: 182px;
          opacity: 0;
        }

        100% {
          left: 0;
          opacity: 1;
        }
      }
    }



    &.l_24 {
      left: 518px;
      top: 636px;


      .aniMovelan24 {
        -webkit-animation-name: aniMovelan24;
        animation-name: aniMovelan24;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
      }

      @keyframes aniMovelan24 {
        0% {
          left: 90px;
          opacity: 0;
        }

        100% {
          left: -215px;
          opacity: 1;
        }
      }
    }


    &.l_25 {
      left: 303px;
      top: 630px;

      .aniMovelan25 {
        -webkit-animation-name: aniMovelan25;
        animation-name: aniMovelan25;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        transform: rotate(90deg);
      }

      @keyframes aniMovelan25 {
        0% {
          top: 154px;
          opacity: 0;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }


    &.l_26 {
      left: 508px;
      top: 644px;

      .aniMovelan26 {
        -webkit-animation-name: aniMovelan26;
        animation-name: aniMovelan26;
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
      }

      @keyframes aniMovelan26 {
        0% {
          top: 0;
          opacity: 0.6;
        }

        100% {
          top: 124px;
          opacity: 1;
        }
      }
    }


    &.l_27 {
      left: 514px;
      top: 716px;

      .aniMovelan27 {
        -webkit-animation-name: aniMovelan27;
        animation-name: aniMovelan27;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 50px;
        left: 0;
      }

      @keyframes aniMovelan27 {
        0% {
          left: 0;
          opacity: 0.3;
        }

        90% {
          left: 836px;
          opacity: 0.6;
          top: 50px;
          transform: rotate(0deg);
        }

        91% {
          left: 836px;
          opacity: 0.6;
          top: 50px;
          transform: rotate(-90deg);
        }


        100% {
          left: 836px;
          top: 0px;
          opacity: 1;
          transform: rotate(-90deg);
        }
      }
    }


    &.l_35 {
      left: 1113px;
      top: 716px;

      .aniMovelan28 {
        -webkit-animation-name: aniMovelan28;
        animation-name: aniMovelan28;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -6px;
      }

      @keyframes aniMovelan28 {
        0% {
          top: 50px;
          opacity: 0.7;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }


    &.l_28 {
      left: 1062px;
      top: 715px;

      .aniMovelan28 {
        -webkit-animation-name: aniMovelan28;
        animation-name: aniMovelan28;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
      }

      @keyframes aniMovelan28 {
        0% {
          top: 50px;
          opacity: 0.7;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }


    &.l_29 {
      left: 617px;
      top: 661px;

      .aniMovelan29 {
        -webkit-animation-name: aniMovelan29;
        animation-name: aniMovelan29;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        transform: rotate(90deg);
      }

      @keyframes aniMovelan29 {
        0% {
          top: 154px;
          opacity: 0;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }



    &.l_31 {
      left: 303px;
      top: 816px;

      .aniMovelan31 {
        -webkit-animation-name: aniMovelan31;
        animation-name: aniMovelan31;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
      }

      @keyframes aniMovelan31 {
        0% {
          left: 0;
          top: 0px;
          opacity: 0;
        }

        70% {
          left: 316px;
          top: 0;
          opacity: 0.6;
          transform: rotate(0deg);
        }

        71% {
          left: 316px;
          top: 0;
          opacity: 0.7;
          transform: rotate(-90deg);
        }

        100% {
          left: 316px;
          top: -150px;
          opacity: 1;
          transform: rotate(-90deg);
        }
      }
    }


    &.l_38 {
      left: 821px;
      top: 642px;

      .aniMovelan38 {
        -webkit-animation-name: aniMovelan38;
        animation-name: aniMovelan38;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        transform: rotate(90deg);
      }

      @keyframes aniMovelan38 {
        0% {
          top: 154px;
          opacity: 0;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }


    &.l_39 {
      left: 822px;
      top: 991px;

      .aniMovelan39 {
        -webkit-animation-name: aniMovelan39;
        animation-name: aniMovelan39;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        transform: rotate(90deg);
      }

      @keyframes aniMovelan39 {
        0% {
          top: 154px;
          opacity: 0;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }


    &.l_40 {
      left: 1514px;
      top: 556px;

      .aniMovelan40 {
        -webkit-animation-name: aniMovelan40;
        animation-name: aniMovelan40;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        transform: rotate(90deg);
      }

      @keyframes aniMovelan40 {
        0% {
          top: 154px;
          opacity: 0;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }


    &.l_41 {
      left: 1337px;
      top: 554px;

      .aniMovelan41 {
        -webkit-animation-name: aniMovelan41;
        animation-name: aniMovelan41;
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
        // transform: rotate(90deg);
      }

      @keyframes aniMovelan41 {
        0% {
          left: 0;
          top: 0;
          opacity: 0;
        }

        12% {
          left: 176px;
          top: 0;
          opacity: 0.3;
          transform: rotate(0deg);
        }

        13% {
          left: 176px;
          top: 0;
          opacity: 0.35;
          transform: rotate(90deg);
        }

        35% {
          left: 176px;
          top: 434px;
          opacity: 0.6;
          transform: rotate(90deg);
        }

        36% {
          left: 176px;
          top: 434px;
          opacity: 0.6;
          transform: rotate(180deg);
        }

        77% {
          left: -514px;
          top: 434px;
          opacity: 0.7;
          transform: rotate(180deg);
        }

        78% {
          left: -514px;
          top: 434px;
          opacity: 0.8;
          transform: rotate(-90deg);
        }

        100% {
          left: -514px;
          top: 89px;
          opacity: 1;
          transform: rotate(-90deg);
        }
      }
    }


    &.l_42 {
      left: 1360px;
      top: 584px;


      .aniMovelan42 {
        -webkit-animation-name: aniMovelan42;
        animation-name: aniMovelan42;
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
        // transform: rotate(90deg);
      }

      @keyframes aniMovelan42 {
        0% {
          left: 0;
          top: 0;
          opacity: 0;
        }

        8% {
          left: 110px;
          top: 0;
          opacity: 0.1;
          transform: rotate(0deg);
        }

        9% {
          left: 110px;
          top: 0;
          opacity: 0.15;
          transform: rotate(90deg);
        }

        29% {
          left: 110px;
          top: 358px;
          opacity: 0.5;
          transform: rotate(90deg);
        }

        30% {
          left: 110px;
          top: 358px;
          opacity: 0.6;
          transform: rotate(180deg);
        }

        59% {
          left: -630px;
          top: 358px;
          opacity: 0.7;
          transform: rotate(180deg);
        }

        60% {
          left: -630px;
          top: 358px;
          opacity: 0.8;
          transform: rotate(-90deg);
        }

        100% {
          left: -630px;
          top: -160px;
          opacity: 1;
          transform: rotate(-90deg);
        }
      }
    }


    &.l_43 {
      left: 1469px;
      top: 586px;

      .aniMovelan43 {
        -webkit-animation-name: aniMovelan43;
        animation-name: aniMovelan43;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        transform: rotate(90deg);
      }

      @keyframes aniMovelan43 {
        0% {
          top: 154px;
          opacity: 0;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }


    &.l_44 {
      left: 734px;
      top: 946px;

      .aniMovelan44 {
        -webkit-animation-name: aniMovelan44;
        animation-name: aniMovelan44;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        transform: rotate(90deg);
      }

      @keyframes aniMovelan44 {
        0% {
          top: 154px;
          opacity: 0;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }


    &.l_45 {
      left: 754px;
      top: 909px;

      .aniMovelan45 {
        -webkit-animation-name: aniMovelan45;
        animation-name: aniMovelan45;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        transform: rotate(90deg);
      }

      @keyframes aniMovelan45 {
        0% {
          top: 154px;
          opacity: 0;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }


    &.l_46 {
      left: 1436px;
      top: 641px;

      .aniMovelan46 {
        -webkit-animation-name: aniMovelan46;
        animation-name: aniMovelan46;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        transform: rotate(90deg);
      }

      @keyframes aniMovelan46 {
        0% {
          top: 154px;
          opacity: 0;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }


    &.l_34 {
      left: 1365px;
      top: 637px;

      .aniMovelan34 {
        -webkit-animation-name: aniMovelan34;
        animation-name: aniMovelan34;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        transform: rotate(90deg);
      }

      @keyframes aniMovelan34 {
        0% {
          top: 154px;
          opacity: 0;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }


    &.l_47 {
      left: 1364px;
      top: 636px;

      .aniMovelan47 {
        -webkit-animation-name: aniMovelan47;
        animation-name: aniMovelan47;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        transform: rotate(90deg);
      }

      @keyframes aniMovelan47 {
        0% {
          top: 154px;
          opacity: 0;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }


    &.l_48 {
      left: 1276px;
      top: 716px;

      .aniMovelan28 {
        -webkit-animation-name: aniMovelan28;
        animation-name: aniMovelan28;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
      }

      @keyframes aniMovelan28 {
        0% {
          top: 50px;
          opacity: 0.7;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }

  }
}
</style>
