Procházet zdrojové kódy

[Feat 0000]局部通风机、测风装置SVG开发

bobo04052021@163.com před 1 dnem
rodič
revize
70a6a22db9

+ 1 - 1
pages/gasreport/components/gasImgIdentify.vue

@@ -283,7 +283,7 @@
 import api from "@/api/api";
 import moment from "moment";
 import configService from "@/common/service/config.service.js";
-import { RHFselcet } from "@/uni_modules/fz-media-selcet";
+// import { RHFselcet } from "@/uni_modules/fz-media-selcet";
 import helangCompress from "@/components/helang-compress/helang-compress";
 export default {
   name: "gasFill",

+ 2 - 7
pages/home/detail/autodoor/autodoor.vue

@@ -170,12 +170,7 @@
             </windrectAnimate>
           </view>
           <view class="flcard deviceback" v-if="TabCur == 'fanlocal'">
-            <fanlocalAnimate
-              :fan1State="fan1State"
-              :fan2State="fan2State"
-              :title="title"
-              :height="height"
-            >
+            <fanlocalAnimate :fan1State="fan1State" :fan2State="fan2State">
             </fanlocalAnimate>
           </view>
           <view class="flcard deviceback" v-if="TabCur == 'fanmain'">
@@ -440,7 +435,7 @@ import initDictOptions from "@/common/util/dictUtil.js";
 import autodoorDandao from "../doorAnimate/autodoor-dandao.vue";
 import autodoorShuangdao from "../doorAnimate/autodoor-shuangdao.vue";
 import windrectAnimate from "../windrectAnimate/windrectAnimate.vue";
-import fanlocalAnimate from "../fanlocalAnimate/fanlocalAnimate2.vue";
+import fanlocalAnimate from "../fanlocalAnimate/fanlocalAnimate.vue";
 import fanmainAnimate from "../fanmainAnimate/fanmainAnimate.vue";
 import { getDeviceIcon } from "@/common/util/deviceIcon";
 import WindowDandao from "../windowAnimate/window-dandao.vue";

+ 1536 - 1060
pages/home/detail/fanlocalAnimate/fanlocalAnimate.vue

@@ -1,1121 +1,1597 @@
+<!-- 本文件由 gen-jubu.js 生成(素材 workspace),改完源 SVG 后重新生成即可 -->
 <template>
-  <view style="width: 100%; height: 100%">
-    <div class="pageback">
-      <div class="ventilate" id="topPic">
-        <!-- 进风箭头 -->
-        <div
-          :class="
-            nowfengji == '2' ? 'arrow1' : nowfengji == '1' ? 'arrow1-fan1' : ''
-          "
-          id="arrow1"
-        ></div>
-        <div
-          :class="
-            nowfengji == '2' ? 'arrow2' : nowfengji == '1' ? 'arrow2-fan1' : ''
-          "
-          id="arrow2"
-        ></div>
-        <div
-          :class="
-            nowfengji == '2' ? 'arrow3' : nowfengji == '1' ? 'arrow3-fan1' : ''
-          "
-          id="arrow3"
-        ></div>
-        <div
-          :class="
-            nowfengji == '2' ? 'arrow4' : nowfengji == '1' ? 'arrow4-fan1' : ''
-          "
-          id="arrow4"
-        ></div>
-        <div
-          :class="
-            nowfengji == '2' ? 'arrow5' : nowfengji == '1' ? 'arrow5-fan1' : ''
-          "
-          id="arrow5"
-        ></div>
-        <div
-          :class="
-            nowfengji == '2' ? 'arrow6' : nowfengji == '1' ? 'arrow6-fan1' : ''
-          "
-          id="arrow6"
-        ></div>
-        <div
-          :class="
-            nowfengji == '2' ? 'arrow7' : nowfengji == '1' ? 'arrow7-fan1' : ''
-          "
-          id="arrow7"
-        ></div>
-        <div
-          :class="
-            nowfengji == '2' ? 'arrow8' : nowfengji == '1' ? 'arrow8-fan1' : ''
-          "
-          id="arrow8"
-        ></div>
-        <div
-          :class="
-            nowfengji == '2' ? 'arrow9' : nowfengji == '1' ? 'arrow9-fan1' : ''
-          "
-          id="arrow9"
-        ></div>
-        <div
-          :class="
-            nowfengji == '2'
-              ? 'arrow10'
-              : nowfengji == '1'
-              ? 'arrow10-fan1'
-              : ''
-          "
-          id="arrow10"
-        ></div>
-        <!-- 回风箭头 -->
-        <div class="arrow101" id="arrow101" v-show="nowfengji != ''"></div>
-        <div class="arrow102" id="arrow102" v-show="nowfengji != ''"></div>
-        <div class="arrow103" id="arrow103" v-show="nowfengji != ''"></div>
-        <div class="arrow104" id="arrow104" v-show="nowfengji != ''"></div>
-        <div class="arrow105" id="arrow105" v-show="nowfengji != ''"></div>
-        <div class="arrow106" id="arrow106" v-show="nowfengji != ''"></div>
-        <!-- <div class="arrow107" id="arrow107"></div>
-      <div class="arrow108" id="arrow108"></div>-->
-        <!-- 回风 -->
-        <div class="arrow201" id="arrow201"></div>
-        <div class="arrow202" id="arrow202"></div>
-        <div class="arrow203" id="arrow203"></div>
-        <div class="arrow204" id="arrow204"></div>
-        <div class="arrow205" id="arrow205"></div>
-        <div
-          style="
-            color: #fff;
-            font-size: 14px;
-            position: absolute;
-            top: 12%;
-            left: 80%;
-            width: auto;
-            height: 60px;
-          "
-          @click="fanclick(1)"
-        >
-          <span>主风机</span>
-        </div>
-        <div
-          style="
-            color: #fff;
-            font-size: 14px;
-            position: absolute;
-            top: 16%;
-            left: 80%;
-            width: auto;
-            height: 60px;
-          "
-          @click="fanclick(2)"
-        >
-          <span>备用风机</span>
-        </div>
-        <!-- 风扇动画展示 -->
-        <div class="box2" style="top: 12.8%; right: 29%" @click="fanclick(1)">
-          <div id="box2">
-            <span></span>
-            <span></span>
-            <span></span>
-            <span></span>
-          </div>
-        </div>
-        <div class="box" style="top: 15.5%; right: 29%" @click="fanclick(2)">
-          <div id="box1">
-            <span></span>
-            <span></span>
-            <span></span>
-            <span></span>
-          </div>
-        </div>
-      </div>
-    </div>
+  <view class="jubu-svg-wrap">
+    <view
+      class="jubu-svg-host"
+      :id="hostId"
+      :data-fan1="fan1On"
+      :data-fan2="fan2On"
+    ></view>
   </view>
 </template>
 
 <script>
+let hostSeq = 0;
+
+/**
+ * 运行状态判定:兼容布尔、数字、字符串三种传参
+ * @param {boolean|number|string} value - 传入的状态
+ * @returns {boolean} 是否运行
+ */
+function isRunning(value) {
+  if (value === true) return true;
+  if (value === false || value === null || value === undefined) return false;
+  if (typeof value === "number") return value !== 0;
+
+  const text = String(value).trim().toLowerCase();
+
+  return text !== "" && text !== "0" && text !== "false";
+}
+
 export default {
+  name: "JuBuFengJi",
+  props: {
+    /** 1 号(上面的)风机是否运行 */
+    fan1State: {
+      type: [Boolean, Number, String],
+      default: false,
+    },
+    /** 2 号(下面的)风机是否运行 */
+    fan2State: {
+      type: [Boolean, Number, String],
+      default: false,
+    },
+  },
   data() {
     return {
-      fengliangUp: "", // 风量上限
-      fengliangDown: "", // 风量下限
-      controTypeName: "变频器频率",
-      // 界面风机动画
-
-      // 控制类型 1 变频器频率 2 需风量
-      controlType: "1",
-      loading: "", // 数据加载
-      yMax1: 100,
-      yMax2: 10,
-      yMax3: 1000,
-      textColor: "#000",
-      option1: {},
-      readData: {},
-      nowfengji: "1",
+      /** 宿主节点 id(保证多实例时互不干扰) */
+      hostId: "jubu-svg-host-" + (hostSeq += 1),
     };
   },
-  props: {
-    mainFanText: {
-      type: String,
-      default: "主风机",
+  computed: {
+    /** 1 号是否运行("1" / "0",经宿主节点属性交给视图层) */
+    fan1On() {
+      return isRunning(this.fan1State) ? "1" : "0";
     },
-    subFanText: {
-      type: String,
-      default: "备风机",
+    /**
+     * 2 号是否运行:两台互斥,1 号在跑时 2 号一律按停止处理,
+     * 避免两个字段同时为真时两路气流一起出现
+     */
+    fan2On() {
+      if (isRunning(this.fan1State)) return "0";
+
+      return isRunning(this.fan2State) ? "1" : "0";
     },
   },
+};
+</script>
+
+<script module="svgRender" lang="renderjs">
+/**
+ * 局部风机(视图层,JS 逐帧驱动)
+ *
+ * 1. SVG 以字符串写入宿主节点(内部不放任何样式);
+ * 2. 运行状态从宿主节点的 data-fan1 / data-fan2 读取;
+ * 3. 用定时器逐帧推进:每 STEP_MS 写一次各气流的行内 transform,
+ *    配合 40ms 的 CSS transition 补间 —— 不依赖 @keyframes / animation;
+ * 4. 循环回到第 1 帧时关掉过渡,避免箭头往回滑。
+ */
+
+const SVG_MARKUP = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 412 259" preserveAspectRatio="xMidYMid meet" style="display:block;width:100%;height:100%">
+  <defs>
+    <linearGradient id="Gradient_1" gradientUnits="userSpaceOnUse" x1="152.65" y1="140.15" x2="152.65" y2="141.35" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_2" gradientUnits="userSpaceOnUse" x1="143.95" y1="140.15" x2="143.95" y2="141.35" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_3" gradientUnits="userSpaceOnUse" x1="144" y1="133" x2="144" y2="134.2" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_4" gradientUnits="userSpaceOnUse" x1="144" y1="125.15" x2="144" y2="126.35" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_5" gradientUnits="userSpaceOnUse" x1="152.7" y1="133" x2="152.7" y2="134.2" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_6" gradientUnits="userSpaceOnUse" x1="152.7" y1="125.15" x2="152.7" y2="126.35" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_7" gradientUnits="userSpaceOnUse" x1="152.65" y1="117.30000000000001" x2="152.65" y2="118.5" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_8" gradientUnits="userSpaceOnUse" x1="143.95" y1="117.30000000000001" x2="143.95" y2="118.5" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_9" gradientUnits="userSpaceOnUse" x1="144" y1="109.30000000000001" x2="144" y2="110.5" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_10" gradientUnits="userSpaceOnUse" x1="143.95" y1="101.55000000000001" x2="143.95" y2="102.75" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_11" gradientUnits="userSpaceOnUse" x1="152.7" y1="109.30000000000001" x2="152.7" y2="110.5" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_12" gradientUnits="userSpaceOnUse" x1="152.65" y1="101.55000000000001" x2="152.65" y2="102.75" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_13" gradientUnits="userSpaceOnUse" x1="130.25" y1="96.6625" x2="130.25" y2="139.2375" spreadMethod="pad">
+      <stop offset="0%" stop-color="#6D728A"/>
+      <stop offset="13.72549019607843%" stop-color="#B7C4CB"/>
+      <stop offset="31.764705882352942%" stop-color="#E0ECEF"/>
+      <stop offset="72.94117647058823%" stop-color="#A5ABB4"/>
+      <stop offset="100%" stop-color="#5A6B76"/>
+    </linearGradient>
+    <linearGradient id="Gradient_14" gradientUnits="userSpaceOnUse" x1="152.7" y1="93.80000000000001" x2="152.7" y2="95" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_15" gradientUnits="userSpaceOnUse" x1="311.25" y1="94.425" x2="311.25" y2="141.075" spreadMethod="pad">
+      <stop offset="0%" stop-color="#121314"/>
+      <stop offset="37.64705882352941%" stop-color="#6F6F6F"/>
+      <stop offset="65.09803921568627%" stop-color="#6D6D6D"/>
+      <stop offset="100%" stop-color="#0D0E10"/>
+    </linearGradient>
+    <linearGradient id="Gradient_16" gradientUnits="userSpaceOnUse" x1="150.25" y1="95.85" x2="150.25" y2="139.25" spreadMethod="pad">
+      <stop offset="0%" stop-color="#6D728A"/>
+      <stop offset="14.509803921568627%" stop-color="#A7B0B4"/>
+      <stop offset="31.764705882352942%" stop-color="#CFD7D9"/>
+      <stop offset="72.94117647058823%" stop-color="#949AA3"/>
+      <stop offset="100%" stop-color="#5A6B76"/>
+    </linearGradient>
+    <linearGradient id="Gradient_17" gradientUnits="userSpaceOnUse" x1="144" y1="93.80000000000001" x2="144" y2="95" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_18" gradientUnits="userSpaceOnUse" x1="99.25" y1="139.95" x2="99.25" y2="95.64999999999999" spreadMethod="pad">
+      <stop offset="0%" stop-color="#40466B"/>
+      <stop offset="13.72549019607843%" stop-color="#7C8C9E"/>
+      <stop offset="31.372549019607842%" stop-color="#8BA5B1"/>
+      <stop offset="55.294117647058826%" stop-color="#7C8C9E"/>
+      <stop offset="100%" stop-color="#40466B"/>
+    </linearGradient>
+    <linearGradient id="Gradient_19" gradientUnits="userSpaceOnUse" x1="272.05" y1="106.14999999999999" x2="272.05" y2="139.04999999999998" spreadMethod="pad">
+      <stop offset="0%" stop-color="#121617"/>
+      <stop offset="26.666666666666668%" stop-color="#24272D"/>
+      <stop offset="41.1764705882353%" stop-color="#232730"/>
+      <stop offset="71.76470588235294%" stop-color="#3B3E4D"/>
+      <stop offset="100%" stop-color="#727376"/>
+    </linearGradient>
+    <linearGradient id="Gradient_20" gradientUnits="userSpaceOnUse" x1="315.7" y1="140.225" x2="315.7" y2="141.275" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_21" gradientUnits="userSpaceOnUse" x1="307" y1="140.225" x2="307" y2="141.275" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_22" gradientUnits="userSpaceOnUse" x1="307" y1="133.025" x2="307" y2="134.07500000000002" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_23" gradientUnits="userSpaceOnUse" x1="307" y1="125.175" x2="307" y2="126.22500000000001" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_24" gradientUnits="userSpaceOnUse" x1="315.7" y1="133.025" x2="315.7" y2="134.07500000000002" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_25" gradientUnits="userSpaceOnUse" x1="315.7" y1="125.175" x2="315.7" y2="126.22500000000001" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_26" gradientUnits="userSpaceOnUse" x1="315.7" y1="117.375" x2="315.7" y2="118.42500000000001" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_27" gradientUnits="userSpaceOnUse" x1="307" y1="117.375" x2="307" y2="118.42500000000001" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_28" gradientUnits="userSpaceOnUse" x1="307" y1="109.32499999999999" x2="307" y2="110.375" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_29" gradientUnits="userSpaceOnUse" x1="307" y1="101.625" x2="307" y2="102.67500000000001" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_30" gradientUnits="userSpaceOnUse" x1="315.7" y1="109.32499999999999" x2="315.7" y2="110.375" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_31" gradientUnits="userSpaceOnUse" x1="315.7" y1="101.625" x2="315.7" y2="102.67500000000001" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_32" gradientUnits="userSpaceOnUse" x1="177.1" y1="105.925" x2="177.1" y2="139.075" spreadMethod="pad">
+      <stop offset="0%" stop-color="#121617"/>
+      <stop offset="26.666666666666668%" stop-color="#24272D"/>
+      <stop offset="41.1764705882353%" stop-color="#232730"/>
+      <stop offset="71.76470588235294%" stop-color="#3B3E4D"/>
+      <stop offset="100%" stop-color="#727376"/>
+    </linearGradient>
+    <linearGradient id="Gradient_33" gradientUnits="userSpaceOnUse" x1="215.55" y1="123.69999999999999" x2="215.55" y2="126" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_34" gradientUnits="userSpaceOnUse" x1="218.9" y1="99" x2="218.9" y2="148.6" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2ECAE3"/>
+      <stop offset="37.64705882352941%" stop-color="#A7E7F4"/>
+      <stop offset="60.3921568627451%" stop-color="#A3E7F4"/>
+      <stop offset="100%" stop-color="#02A6AA"/>
+    </linearGradient>
+    <linearGradient id="Gradient_35" gradientUnits="userSpaceOnUse" x1="234.75" y1="137.04999999999998" x2="234.75" y2="139.35" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_36" gradientUnits="userSpaceOnUse" x1="234.75" y1="130.32500000000002" x2="234.75" y2="132.475" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_37" gradientUnits="userSpaceOnUse" x1="215.55" y1="130.32500000000002" x2="215.55" y2="132.475" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_38" gradientUnits="userSpaceOnUse" x1="215.55" y1="137.04999999999998" x2="215.55" y2="139.35" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_39" gradientUnits="userSpaceOnUse" x1="234.75" y1="123.69999999999999" x2="234.75" y2="126" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_40" gradientUnits="userSpaceOnUse" x1="215.55" y1="109.75" x2="215.55" y2="111.85" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_41" gradientUnits="userSpaceOnUse" x1="234.75" y1="109.75" x2="234.75" y2="111.85" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_42" gradientUnits="userSpaceOnUse" x1="215.55" y1="116.77499999999999" x2="215.55" y2="118.925" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_43" gradientUnits="userSpaceOnUse" x1="234.75" y1="116.77499999999999" x2="234.75" y2="118.925" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_44" gradientUnits="userSpaceOnUse" x1="215.55" y1="102.9" x2="215.55" y2="105.1" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_45" gradientUnits="userSpaceOnUse" x1="234.75" y1="102.9" x2="234.75" y2="105.1" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_46" gradientUnits="userSpaceOnUse" x1="201.95" y1="96.67500000000001" x2="201.95" y2="139.125" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2149A3"/>
+      <stop offset="11.372549019607844%" stop-color="#7CA4F3"/>
+      <stop offset="25.88235294117647%" stop-color="#9FBFF1"/>
+      <stop offset="63.529411764705884%" stop-color="#206AC3"/>
+      <stop offset="81.96078431372548%" stop-color="#0D248F"/>
+      <stop offset="100%" stop-color="#244896"/>
+    </linearGradient>
+    <linearGradient id="Gradient_47" gradientUnits="userSpaceOnUse" x1="215.5" y1="95.41250000000001" x2="215.5" y2="99.3875" spreadMethod="pad">
+      <stop offset="27.84313725490196%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="67.84313725490196%" stop-color="#8D8D8D"/>
+      <stop offset="100%" stop-color="#2D63D6"/>
+    </linearGradient>
+    <linearGradient id="Gradient_48" gradientUnits="userSpaceOnUse" x1="253.85" y1="94.15" x2="253.85" y2="141.65" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2149A3"/>
+      <stop offset="11.372549019607844%" stop-color="#4671C5"/>
+      <stop offset="25.88235294117647%" stop-color="#6C93CF"/>
+      <stop offset="63.529411764705884%" stop-color="#1355A3"/>
+      <stop offset="81.96078431372548%" stop-color="#0D248F"/>
+      <stop offset="100%" stop-color="#244896"/>
+    </linearGradient>
+    <linearGradient id="Gradient_49" gradientUnits="userSpaceOnUse" x1="205.7" y1="94.125" x2="205.7" y2="108.17500000000001" spreadMethod="pad">
+      <stop offset="0%" stop-color="#0B3490"/>
+      <stop offset="11.372549019607844%" stop-color="#7790FB"/>
+      <stop offset="25.88235294117647%" stop-color="#89C6F9"/>
+      <stop offset="63.529411764705884%" stop-color="#206AC3"/>
+      <stop offset="81.96078431372548%" stop-color="#082D82"/>
+      <stop offset="100%" stop-color="#1242AA"/>
+    </linearGradient>
+    <linearGradient id="Gradient_50" gradientUnits="userSpaceOnUse" x1="244.6" y1="94.125" x2="244.6" y2="108.17500000000001" spreadMethod="pad">
+      <stop offset="0%" stop-color="#0B3490"/>
+      <stop offset="11.372549019607844%" stop-color="#7790FB"/>
+      <stop offset="25.88235294117647%" stop-color="#89C6F9"/>
+      <stop offset="63.529411764705884%" stop-color="#206AC3"/>
+      <stop offset="81.96078431372548%" stop-color="#082D82"/>
+      <stop offset="100%" stop-color="#1242AA"/>
+    </linearGradient>
+    <linearGradient id="Gradient_51" gradientUnits="userSpaceOnUse" x1="62.8" y1="113.8375" x2="93.8" y2="89.9625" spreadMethod="pad">
+      <stop offset="0%" stop-color="#40466B"/>
+      <stop offset="13.72549019607843%" stop-color="#7C8C9E"/>
+      <stop offset="31.372549019607842%" stop-color="#8BA5B1"/>
+      <stop offset="55.294117647058826%" stop-color="#7C8C9E"/>
+      <stop offset="100%" stop-color="#40466B"/>
+    </linearGradient>
+    <linearGradient id="Gradient_52" gradientUnits="userSpaceOnUse" x1="23.35" y1="92.75" x2="23.35" y2="54.550000000000004" spreadMethod="pad">
+      <stop offset="0%" stop-color="#40466B"/>
+      <stop offset="23.92156862745098%" stop-color="#7C8C9E"/>
+      <stop offset="47.05882352941177%" stop-color="#8BA5B1"/>
+      <stop offset="71.37254901960785%" stop-color="#7C8C9E"/>
+      <stop offset="100%" stop-color="#40466B"/>
+    </linearGradient>
+    <linearGradient id="Gradient_53" gradientUnits="userSpaceOnUse" x1="15" y1="4.549999999999999" x2="15" y2="15.35" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_54" gradientUnits="userSpaceOnUse" x1="35.65" y1="13.362499999999999" x2="35.65" y2="17.3375" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_55" gradientUnits="userSpaceOnUse" x1="3.4499999999999993" y1="16.8" x2="17.55" y2="16.8" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_56" gradientUnits="userSpaceOnUse" x1="1.325000000000001" y1="18.75" x2="19.275" y2="18.75" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_57" gradientUnits="userSpaceOnUse" x1="-1" y1="3.8999999999999986" x2="-1" y2="16" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_58" gradientUnits="userSpaceOnUse" x1="7.95" y1="0.925" x2="7.95" y2="1.675" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_59" gradientUnits="userSpaceOnUse" x1="8.85" y1="3.6" x2="11.35" y2="3.6" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_60" gradientUnits="userSpaceOnUse" x1="8.350000000000001" y1="1.3" x2="11.75" y2="1.3" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_61" gradientUnits="userSpaceOnUse" x1="12.1" y1="0.925" x2="12.1" y2="1.675" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_62" gradientUnits="userSpaceOnUse" x1="22.3" y1="8.85" x2="22.3" y2="11.15" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_63" gradientUnits="userSpaceOnUse" x1="20.3" y1="2.5999999999999996" x2="20.3" y2="17.4" spreadMethod="pad">
+      <stop offset="0%" stop-color="#475154"/>
+      <stop offset="31.372549019607842%" stop-color="#B4B7C2"/>
+      <stop offset="65.09803921568627%" stop-color="#A6A9AF"/>
+      <stop offset="100%" stop-color="#535863"/>
+    </linearGradient>
+    <linearGradient id="Gradient_64" gradientUnits="userSpaceOnUse" x1="12.925" y1="6.25" x2="20.175" y2="6.25" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_65" gradientUnits="userSpaceOnUse" x1="4.65" y1="7.1499999999999995" x2="4.65" y2="19.85" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_66" gradientUnits="userSpaceOnUse" x1="0.65" y1="1.9249999999999998" x2="0.65" y2="2.375" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_67" gradientUnits="userSpaceOnUse" x1="0.2" y1="1.9000000000000001" x2="0.2" y2="2.3000000000000003" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_68" gradientUnits="userSpaceOnUse" x1="1.5499999999999998" y1="4.1" x2="5.55" y2="4.1" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_69" gradientUnits="userSpaceOnUse" x1="0.47499999999999964" y1="10.162500000000001" x2="19.225" y2="-0.6625000000000005" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_70" gradientUnits="userSpaceOnUse" x1="0.8249999999999997" y1="2.55" x2="6.375" y2="2.55" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_71" gradientUnits="userSpaceOnUse" x1="0.8249999999999997" y1="1.3" x2="6.375" y2="1.3" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_72" gradientUnits="userSpaceOnUse" x1="2.5749999999999993" y1="2.775" x2="7.625" y2="-5.975" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_73" gradientUnits="userSpaceOnUse" x1="177.1" y1="17.425" x2="177.1" y2="50.575" spreadMethod="pad">
+      <stop offset="0%" stop-color="#121617"/>
+      <stop offset="26.666666666666668%" stop-color="#24272D"/>
+      <stop offset="41.1764705882353%" stop-color="#232730"/>
+      <stop offset="71.76470588235294%" stop-color="#3B3E4D"/>
+      <stop offset="100%" stop-color="#727376"/>
+    </linearGradient>
+    <linearGradient id="Gradient_74" gradientUnits="userSpaceOnUse" x1="130.25" y1="8.162499999999998" x2="130.25" y2="50.7375" spreadMethod="pad">
+      <stop offset="0%" stop-color="#6D728A"/>
+      <stop offset="13.72549019607843%" stop-color="#B7C4CB"/>
+      <stop offset="31.764705882352942%" stop-color="#E0ECEF"/>
+      <stop offset="72.94117647058823%" stop-color="#A5ABB4"/>
+      <stop offset="100%" stop-color="#5A6B76"/>
+    </linearGradient>
+    <linearGradient id="Gradient_75" gradientUnits="userSpaceOnUse" x1="253.85" y1="5.649999999999999" x2="253.85" y2="53.15" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2149A3"/>
+      <stop offset="11.372549019607844%" stop-color="#4671C5"/>
+      <stop offset="25.88235294117647%" stop-color="#6C93CF"/>
+      <stop offset="63.529411764705884%" stop-color="#1355A3"/>
+      <stop offset="81.96078431372548%" stop-color="#0D248F"/>
+      <stop offset="100%" stop-color="#244896"/>
+    </linearGradient>
+    <linearGradient id="Gradient_76" gradientUnits="userSpaceOnUse" x1="23.35" y1="54.550000000000004" x2="23.35" y2="92.75" spreadMethod="pad">
+      <stop offset="0%" stop-color="#40466B"/>
+      <stop offset="23.92156862745098%" stop-color="#7C8C9E"/>
+      <stop offset="47.05882352941177%" stop-color="#8BA5B1"/>
+      <stop offset="71.37254901960785%" stop-color="#7C8C9E"/>
+      <stop offset="100%" stop-color="#40466B"/>
+    </linearGradient>
+    <linearGradient id="Gradient_77" gradientUnits="userSpaceOnUse" x1="62.8" y1="33.4625" x2="93.8" y2="57.3375" spreadMethod="pad">
+      <stop offset="0%" stop-color="#40466B"/>
+      <stop offset="13.72549019607843%" stop-color="#7C8C9E"/>
+      <stop offset="31.372549019607842%" stop-color="#8BA5B1"/>
+      <stop offset="55.294117647058826%" stop-color="#7C8C9E"/>
+      <stop offset="100%" stop-color="#40466B"/>
+    </linearGradient>
+    <linearGradient id="Gradient_78" gradientUnits="userSpaceOnUse" x1="143.95" y1="51.65" x2="143.95" y2="52.85" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_79" gradientUnits="userSpaceOnUse" x1="152.65" y1="51.65" x2="152.65" y2="52.85" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_80" gradientUnits="userSpaceOnUse" x1="99.25" y1="7.349999999999998" x2="99.25" y2="51.650000000000006" spreadMethod="pad">
+      <stop offset="0%" stop-color="#40466B"/>
+      <stop offset="13.72549019607843%" stop-color="#7C8C9E"/>
+      <stop offset="31.372549019607842%" stop-color="#8BA5B1"/>
+      <stop offset="55.294117647058826%" stop-color="#7C8C9E"/>
+      <stop offset="100%" stop-color="#40466B"/>
+    </linearGradient>
+    <linearGradient id="Gradient_81" gradientUnits="userSpaceOnUse" x1="152.7" y1="44.5" x2="152.7" y2="45.7" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_82" gradientUnits="userSpaceOnUse" x1="144" y1="44.5" x2="144" y2="45.7" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_83" gradientUnits="userSpaceOnUse" x1="144" y1="36.65" x2="144" y2="37.85" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_84" gradientUnits="userSpaceOnUse" x1="143.95" y1="28.799999999999997" x2="143.95" y2="30" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_85" gradientUnits="userSpaceOnUse" x1="152.7" y1="36.65" x2="152.7" y2="37.85" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_86" gradientUnits="userSpaceOnUse" x1="152.65" y1="28.799999999999997" x2="152.65" y2="30" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_87" gradientUnits="userSpaceOnUse" x1="152.7" y1="20.799999999999997" x2="152.7" y2="22" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_88" gradientUnits="userSpaceOnUse" x1="152.65" y1="13.05" x2="152.65" y2="14.25" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_89" gradientUnits="userSpaceOnUse" x1="144" y1="20.799999999999997" x2="144" y2="22" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_90" gradientUnits="userSpaceOnUse" x1="143.95" y1="13.05" x2="143.95" y2="14.25" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_91" gradientUnits="userSpaceOnUse" x1="144" y1="5.300000000000001" x2="144" y2="6.5" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_92" gradientUnits="userSpaceOnUse" x1="150.25" y1="7.349999999999998" x2="150.25" y2="50.75" spreadMethod="pad">
+      <stop offset="0%" stop-color="#6D728A"/>
+      <stop offset="14.509803921568627%" stop-color="#A7B0B4"/>
+      <stop offset="31.764705882352942%" stop-color="#CFD7D9"/>
+      <stop offset="72.94117647058823%" stop-color="#949AA3"/>
+      <stop offset="100%" stop-color="#5A6B76"/>
+    </linearGradient>
+    <linearGradient id="Gradient_93" gradientUnits="userSpaceOnUse" x1="311.25" y1="5.924999999999997" x2="311.25" y2="52.575" spreadMethod="pad">
+      <stop offset="0%" stop-color="#121314"/>
+      <stop offset="37.64705882352941%" stop-color="#6F6F6F"/>
+      <stop offset="65.09803921568627%" stop-color="#6D6D6D"/>
+      <stop offset="100%" stop-color="#0D0E10"/>
+    </linearGradient>
+    <linearGradient id="Gradient_94" gradientUnits="userSpaceOnUse" x1="152.7" y1="5.300000000000001" x2="152.7" y2="6.5" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_95" gradientUnits="userSpaceOnUse" x1="218.9" y1="10.499999999999996" x2="218.9" y2="60.099999999999994" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2ECAE3"/>
+      <stop offset="37.64705882352941%" stop-color="#A7E7F4"/>
+      <stop offset="60.3921568627451%" stop-color="#A3E7F4"/>
+      <stop offset="100%" stop-color="#02A6AA"/>
+    </linearGradient>
+    <linearGradient id="Gradient_96" gradientUnits="userSpaceOnUse" x1="215.55" y1="48.550000000000004" x2="215.55" y2="50.85" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_97" gradientUnits="userSpaceOnUse" x1="234.75" y1="48.550000000000004" x2="234.75" y2="50.85" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_98" gradientUnits="userSpaceOnUse" x1="234.75" y1="35.2" x2="234.75" y2="37.5" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_99" gradientUnits="userSpaceOnUse" x1="234.75" y1="41.824999999999996" x2="234.75" y2="43.975" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_100" gradientUnits="userSpaceOnUse" x1="234.75" y1="28.275000000000002" x2="234.75" y2="30.425" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_101" gradientUnits="userSpaceOnUse" x1="215.55" y1="41.824999999999996" x2="215.55" y2="43.975" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_102" gradientUnits="userSpaceOnUse" x1="215.55" y1="35.2" x2="215.55" y2="37.5" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_103" gradientUnits="userSpaceOnUse" x1="215.55" y1="28.275000000000002" x2="215.55" y2="30.425" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_104" gradientUnits="userSpaceOnUse" x1="201.95" y1="8.174999999999997" x2="201.95" y2="50.625" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2149A3"/>
+      <stop offset="11.372549019607844%" stop-color="#7CA4F3"/>
+      <stop offset="25.88235294117647%" stop-color="#9FBFF1"/>
+      <stop offset="63.529411764705884%" stop-color="#206AC3"/>
+      <stop offset="81.96078431372548%" stop-color="#0D248F"/>
+      <stop offset="100%" stop-color="#244896"/>
+    </linearGradient>
+    <linearGradient id="Gradient_105" gradientUnits="userSpaceOnUse" x1="205.7" y1="5.625" x2="205.7" y2="19.675" spreadMethod="pad">
+      <stop offset="0%" stop-color="#0B3490"/>
+      <stop offset="11.372549019607844%" stop-color="#7790FB"/>
+      <stop offset="25.88235294117647%" stop-color="#89C6F9"/>
+      <stop offset="63.529411764705884%" stop-color="#206AC3"/>
+      <stop offset="81.96078431372548%" stop-color="#082D82"/>
+      <stop offset="100%" stop-color="#1242AA"/>
+    </linearGradient>
+    <linearGradient id="Gradient_106" gradientUnits="userSpaceOnUse" x1="215.55" y1="21.25" x2="215.55" y2="23.35" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_107" gradientUnits="userSpaceOnUse" x1="234.75" y1="21.25" x2="234.75" y2="23.35" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_108" gradientUnits="userSpaceOnUse" x1="215.55" y1="14.4" x2="215.55" y2="16.6" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_109" gradientUnits="userSpaceOnUse" x1="234.75" y1="14.4" x2="234.75" y2="16.6" spreadMethod="pad">
+      <stop offset="16.07843137254902%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="78.82352941176471%" stop-color="#8D8D8D"/>
+    </linearGradient>
+    <linearGradient id="Gradient_110" gradientUnits="userSpaceOnUse" x1="215.5" y1="6.9125000000000005" x2="215.5" y2="10.887500000000001" spreadMethod="pad">
+      <stop offset="27.84313725490196%" stop-color="#6C6C6C"/>
+      <stop offset="47.05882352941177%" stop-color="#D5E7F6"/>
+      <stop offset="67.84313725490196%" stop-color="#8D8D8D"/>
+      <stop offset="100%" stop-color="#2D63D6"/>
+    </linearGradient>
+    <linearGradient id="Gradient_111" gradientUnits="userSpaceOnUse" x1="272.05" y1="17.650000000000002" x2="272.05" y2="50.55" spreadMethod="pad">
+      <stop offset="0%" stop-color="#121617"/>
+      <stop offset="26.666666666666668%" stop-color="#24272D"/>
+      <stop offset="41.1764705882353%" stop-color="#232730"/>
+      <stop offset="71.76470588235294%" stop-color="#3B3E4D"/>
+      <stop offset="100%" stop-color="#727376"/>
+    </linearGradient>
+    <linearGradient id="Gradient_112" gradientUnits="userSpaceOnUse" x1="307" y1="51.725" x2="307" y2="52.775" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_113" gradientUnits="userSpaceOnUse" x1="315.7" y1="51.725" x2="315.7" y2="52.775" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_114" gradientUnits="userSpaceOnUse" x1="244.6" y1="5.625" x2="244.6" y2="19.675" spreadMethod="pad">
+      <stop offset="0%" stop-color="#0B3490"/>
+      <stop offset="11.372549019607844%" stop-color="#7790FB"/>
+      <stop offset="25.88235294117647%" stop-color="#89C6F9"/>
+      <stop offset="63.529411764705884%" stop-color="#206AC3"/>
+      <stop offset="81.96078431372548%" stop-color="#082D82"/>
+      <stop offset="100%" stop-color="#1242AA"/>
+    </linearGradient>
+    <linearGradient id="Gradient_115" gradientUnits="userSpaceOnUse" x1="315.7" y1="44.525" x2="315.7" y2="45.574999999999996" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_116" gradientUnits="userSpaceOnUse" x1="307" y1="44.525" x2="307" y2="45.574999999999996" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_117" gradientUnits="userSpaceOnUse" x1="307" y1="36.675000000000004" x2="307" y2="37.725" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_118" gradientUnits="userSpaceOnUse" x1="307" y1="28.875" x2="307" y2="29.924999999999997" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_119" gradientUnits="userSpaceOnUse" x1="315.7" y1="36.675000000000004" x2="315.7" y2="37.725" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_120" gradientUnits="userSpaceOnUse" x1="315.7" y1="28.875" x2="315.7" y2="29.924999999999997" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_121" gradientUnits="userSpaceOnUse" x1="315.7" y1="20.825000000000003" x2="315.7" y2="21.875" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_122" gradientUnits="userSpaceOnUse" x1="315.7" y1="13.125" x2="315.7" y2="14.175" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_123" gradientUnits="userSpaceOnUse" x1="307" y1="20.825000000000003" x2="307" y2="21.875" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_124" gradientUnits="userSpaceOnUse" x1="307" y1="13.125" x2="307" y2="14.175" spreadMethod="pad">
+      <stop offset="0%" stop-color="#2D3234"/>
+      <stop offset="31.372549019607842%" stop-color="#CECECE"/>
+      <stop offset="65.09803921568627%" stop-color="#A4A5A8"/>
+      <stop offset="100%" stop-color="#2D3037"/>
+    </linearGradient>
+    <linearGradient id="Gradient_125" gradientUnits="userSpaceOnUse" x1="144.53750000000002" y1="45.3625" x2="-13.037500000000009" y2="43.2375" spreadMethod="pad">
+      <stop offset="0%" stop-color="#5DFD00"/>
+      <stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>
+    </linearGradient>
+    <g id="___10_0_Layer0_0_FILL">
+      <path fill="url(#Gradient_1)" stroke="none" d="&#xA;M 152.05 141.3&#xA;L 153.25 141.3 153.25 140.25 152.05 140.25 152.05 141.3 Z"/>
+      <path fill="url(#Gradient_2)" stroke="none" d="&#xA;M 144.55 140.25&#xA;L 143.35 140.25 143.35 141.3 144.55 141.3 144.55 140.25 Z"/>
+      <path fill="url(#Gradient_3)" stroke="none" d="&#xA;M 144.55 134.1&#xA;L 144.55 133.05 143.35 133.05 143.35 134.1 144.55 134.1 Z"/>
+      <path fill="url(#Gradient_4)" stroke="none" d="&#xA;M 144.55 126.25&#xA;L 144.55 125.2 143.35 125.2 143.35 126.25 144.55 126.25 Z"/>
+      <path fill="url(#Gradient_5)" stroke="none" d="&#xA;M 153.25 133.05&#xA;L 152.05 133.05 152.05 134.1 153.25 134.1 153.25 133.05 Z"/>
+      <path fill="url(#Gradient_6)" stroke="none" d="&#xA;M 153.25 125.2&#xA;L 152.05 125.2 152.05 126.25 153.25 126.25 153.25 125.2 Z"/>
+      <path fill="url(#Gradient_7)" stroke="none" d="&#xA;M 152.05 118.45&#xA;L 153.25 118.45 153.25 117.4 152.05 117.4 152.05 118.45 Z"/>
+      <path fill="url(#Gradient_8)" stroke="none" d="&#xA;M 143.35 117.4&#xA;L 143.35 118.45 144.55 118.45 144.55 117.4 143.35 117.4 Z"/>
+      <path fill="url(#Gradient_9)" stroke="none" d="&#xA;M 144.55 110.4&#xA;L 144.55 109.35 143.35 109.35 143.35 110.4 144.55 110.4 Z"/>
+      <path fill="url(#Gradient_10)" stroke="none" d="&#xA;M 143.35 102.7&#xA;L 144.55 102.7 144.55 101.65 143.35 101.65 143.35 102.7 Z"/>
+      <path fill="url(#Gradient_11)" stroke="none" d="&#xA;M 152.05 109.35&#xA;L 152.05 110.4 153.25 110.4 153.25 109.35 152.05 109.35 Z"/>
+      <path fill="url(#Gradient_12)" stroke="none" d="&#xA;M 152.05 101.65&#xA;L 152.05 102.7 153.25 102.7 153.25 101.65 152.05 101.65 Z"/>
+      <path fill="url(#Gradient_13)" stroke="none" d="&#xA;M 144.55 96.75&#xA;L 115.95 96.75 115.95 139.15 144.55 139.15 144.55 134.1 143.35 134.1 143.35 133.05 144.55 133.05 144.55 126.25 143.35 126.25 143.35 125.2 144.55 125.2 144.55 118.45 143.35 118.45 143.35 117.4 144.55 117.4 144.55 110.4 143.35 110.4 143.35 109.35 144.55 109.35 144.55 102.7 143.35 102.7 143.35 101.65 144.55 101.65 144.55 96.75&#xA;M 195.05 106&#xA;L 195.05 96.75 152.05 96.75 152.05 101.65 153.25 101.65 153.25 102.7 152.05 102.7 152.05 109.35 153.25 109.35 153.25 110.4 152.05 110.4 152.05 117.4 153.25 117.4 153.25 118.45 152.05 118.45 152.05 125.2 153.25 125.2 153.25 126.25 152.05 126.25 152.05 133.05 153.25 133.05 153.25 134.1 152.05 134.1 152.05 139.15 160.05 139.15 160.05 138.55 160.05 106 195.05 106&#xA;M 307.6 96.75&#xA;L 254.9 96.75 254.9 106 289.1 106 289.1 138.65 289.1 139.15 307.6 139.15 307.6 134.1 306.4 134.1 306.4 133.05 307.6 133.05 307.6 126.25 306.4 126.25 306.4 125.2 307.6 125.2 307.6 118.45 306.4 118.45 306.4 117.4 307.6 117.4 307.6 110.4 306.4 110.4 306.4 109.35 307.6 109.35 307.6 102.7 306.4 102.7 306.4 101.65 307.6 101.65 307.6 96.75&#xA;M 325.15 147.3&#xA;L 325.15 88.5 315.85 96.75 315.1 96.75 315.1 101.65 316.3 101.65 316.3 102.7 315.1 102.7 315.1 109.35 316.3 109.35 316.3 110.4 315.1 110.4 315.1 117.4 316.3 117.4 316.3 118.45 315.1 118.45 315.1 125.2 316.3 125.2 316.3 126.25 315.1 126.25 315.1 133.05 316.3 133.05 316.3 134.1 315.1 134.1 315.1 139.15 315.85 139.15 325.15 147.3 Z"/>
+      <path fill="url(#Gradient_14)" stroke="none" d="&#xA;M 152.05 93.85&#xA;L 152.05 94.9 153.25 94.9 153.25 93.85 152.05 93.85 Z"/>
+      <path fill="url(#Gradient_15)" stroke="none" d="&#xA;M 148.45 94.45&#xA;L 147.95 94.45 147.95 141.1 148.45 141.1 148.45 94.45&#xA;M 225.25 93.55&#xA;L 224.95 93.55 224.95 141.65 225.25 141.65 225.25 93.55&#xA;M 311.5 94.45&#xA;L 311 94.45 311 141.1 311.5 141.1 311.5 94.45 Z"/>
+      <path fill="url(#Gradient_16)" stroke="none" d="&#xA;M 148.45 93.55&#xA;L 148.45 94.45 148.45 141.1 148.45 141.6 152.05 141.6 152.05 141.3 152.05 140.25 152.05 139.15 152.05 134.1 152.05 133.05 152.05 126.25 152.05 125.2 152.05 118.45 152.05 117.4 152.05 110.4 152.05 109.35 152.05 102.7 152.05 101.65 152.05 96.75 152.05 94.9 152.05 93.85 152.05 93.55 148.45 93.55&#xA;M 144.55 93.85&#xA;L 144.55 94.9 144.55 96.75 144.55 101.65 144.55 102.7 144.55 109.35 144.55 110.4 144.55 117.4 144.55 118.45 144.55 125.2 144.55 126.25 144.55 133.05 144.55 134.1 144.55 139.15 144.55 140.25 144.55 141.3 144.55 141.6 147.95 141.6 147.95 141.1 147.95 94.45 147.95 93.55 144.55 93.55 144.55 93.85&#xA;M 311.5 93.55&#xA;L 311.5 94.45 311.5 141.1 311.5 141.6 315.1 141.6 315.1 141.3 315.1 140.25 315.1 139.15 315.1 134.1 315.1 133.05 315.1 126.25 315.1 125.2 315.1 118.45 315.1 117.4 315.1 110.4 315.1 109.35 315.1 102.7 315.1 101.65 315.1 96.75 315.1 94.9 315.1 93.85 315.1 93.55 311.5 93.55&#xA;M 307.6 93.85&#xA;L 307.6 94.9 307.6 96.75 307.6 101.65 307.6 102.7 307.6 109.35 307.6 110.4 307.6 117.4 307.6 118.45 307.6 125.2 307.6 126.25 307.6 133.05 307.6 134.1 307.6 139.15 307.6 140.25 307.6 141.3 307.6 141.6 311 141.6 311 141.1 311 94.45 311 93.55 307.6 93.55 307.6 93.85 Z"/>
+      <path fill="url(#Gradient_17)" stroke="none" d="&#xA;M 144.55 94.9&#xA;L 144.55 93.85 143.35 93.85 143.35 94.9 144.55 94.9&#xA;M 315.1 93.85&#xA;L 315.1 94.9 316.3 94.9 316.3 93.85 315.1 93.85&#xA;M 307.6 94.9&#xA;L 307.6 93.85 306.4 93.85 306.4 94.9 307.6 94.9 Z"/>
+      <path fill="url(#Gradient_18)" stroke="none" d="&#xA;M 115.95 96.75&#xA;L 115.95 95.45 97.9 95.45 82.6 140.15 115.95 140.15 115.95 139.15 115.95 96.75 Z"/>
+      <path fill="url(#Gradient_19)" stroke="none" d="&#xA;M 289.1 138.65&#xA;L 289.1 106 254.9 106 254.9 138.65 289.1 138.65 Z"/>
+      <path fill="url(#Gradient_20)" stroke="none" d="&#xA;M 315.1 140.25&#xA;L 315.1 141.3 316.3 141.3 316.3 140.25 315.1 140.25 Z"/>
+      <path fill="url(#Gradient_21)" stroke="none" d="&#xA;M 307.6 141.3&#xA;L 307.6 140.25 306.4 140.25 306.4 141.3 307.6 141.3 Z"/>
+      <path fill="url(#Gradient_22)" stroke="none" d="&#xA;M 307.6 134.1&#xA;L 307.6 133.05 306.4 133.05 306.4 134.1 307.6 134.1 Z"/>
+      <path fill="url(#Gradient_23)" stroke="none" d="&#xA;M 307.6 126.25&#xA;L 307.6 125.2 306.4 125.2 306.4 126.25 307.6 126.25 Z"/>
+      <path fill="url(#Gradient_24)" stroke="none" d="&#xA;M 316.3 134.1&#xA;L 316.3 133.05 315.1 133.05 315.1 134.1 316.3 134.1 Z"/>
+      <path fill="url(#Gradient_25)" stroke="none" d="&#xA;M 316.3 125.2&#xA;L 315.1 125.2 315.1 126.25 316.3 126.25 316.3 125.2 Z"/>
+      <path fill="#CECECE" stroke="none" d="&#xA;M 289.1 139.15&#xA;L 289.1 138.65 254.9 138.65 254.9 139.15 289.1 139.15 Z"/>
+      <path fill="url(#Gradient_26)" stroke="none" d="&#xA;M 315.1 118.45&#xA;L 316.3 118.45 316.3 117.4 315.1 117.4 315.1 118.45 Z"/>
+      <path fill="url(#Gradient_27)" stroke="none" d="&#xA;M 306.4 118.45&#xA;L 307.6 118.45 307.6 117.4 306.4 117.4 306.4 118.45 Z"/>
+      <path fill="url(#Gradient_28)" stroke="none" d="&#xA;M 306.4 110.4&#xA;L 307.6 110.4 307.6 109.35 306.4 109.35 306.4 110.4 Z"/>
+      <path fill="url(#Gradient_29)" stroke="none" d="&#xA;M 307.6 102.7&#xA;L 307.6 101.65 306.4 101.65 306.4 102.7 307.6 102.7 Z"/>
+      <path fill="url(#Gradient_30)" stroke="none" d="&#xA;M 316.3 109.35&#xA;L 315.1 109.35 315.1 110.4 316.3 110.4 316.3 109.35 Z"/>
+      <path fill="url(#Gradient_31)" stroke="none" d="&#xA;M 315.1 101.65&#xA;L 315.1 102.7 316.3 102.7 316.3 101.65 315.1 101.65 Z"/>
+      <path fill="#C0C0C0" stroke="none" d="&#xA;M 195.05 139.15&#xA;L 195.05 138.55 160.05 138.55 160.05 139.15 195.05 139.15 Z"/>
+      <path fill="url(#Gradient_32)" stroke="none" d="&#xA;M 195.05 138.55&#xA;L 195.05 106 160.05 106 160.05 138.55 195.05 138.55 Z"/>
+      <path fill="url(#Gradient_33)" stroke="none" d="&#xA;M 222.8 123.7&#xA;L 208.25 123.7 208.25 126 222.8 126 222.8 123.7 Z"/>
+      <path fill="url(#Gradient_34)" stroke="none" d="&#xA;M 242.05 137.05&#xA;L 242.05 132.5 227.4 132.5 227.4 137.05 242.05 137.05&#xA;M 227.4 139.35&#xA;L 227.4 141.65 242.05 141.65 242.05 139.35 227.4 139.35&#xA;M 242.05 130.35&#xA;L 242.05 126 227.4 126 227.4 130.35 242.05 130.35&#xA;M 208.25 126&#xA;L 208.25 130.35 222.8 130.35 222.8 126 208.25 126&#xA;M 208.25 139.35&#xA;L 208.25 141.65 222.8 141.65 222.8 139.35 208.25 139.35&#xA;M 208.25 132.5&#xA;L 208.25 137.05 222.8 137.05 222.8 132.5 208.25 132.5&#xA;M 222.8 123.7&#xA;L 222.8 118.95 208.25 118.95 208.25 123.7 222.8 123.7&#xA;M 227.4 118.95&#xA;L 227.4 123.7 242.05 123.7 242.05 118.95 227.4 118.95&#xA;M 227.4 111.85&#xA;L 227.4 116.8 242.05 116.8 242.05 111.85 227.4 111.85&#xA;M 222.8 116.8&#xA;L 222.8 111.85 208.25 111.85 208.25 116.8 222.8 116.8&#xA;M 222.8 109.75&#xA;L 222.8 105.1 208.25 105.1 208.25 109.75 222.8 109.75&#xA;M 242.05 109.75&#xA;L 242.05 105.1 227.4 105.1 227.4 109.75 242.05 109.75&#xA;M 222.8 98.3&#xA;L 208.25 98.3 208.25 102.9 222.8 102.9 222.8 98.3&#xA;M 242.05 98.3&#xA;L 227.4 98.3 227.4 102.9 242.05 102.9 242.05 98.3&#xA;M 227.4 93.55&#xA;L 227.4 96.5 242.05 96.5 242.05 93.55 227.4 93.55&#xA;M 208.25 93.55&#xA;L 208.25 96.5 222.8 96.5 222.8 93.55 208.25 93.55 Z"/>
+      <path fill="url(#Gradient_35)" stroke="none" d="&#xA;M 227.4 137.05&#xA;L 227.4 139.35 242.05 139.35 242.05 137.05 227.4 137.05 Z"/>
+      <path fill="url(#Gradient_36)" stroke="none" d="&#xA;M 242.05 132.5&#xA;L 242.05 130.35 227.4 130.35 227.4 132.5 242.05 132.5 Z"/>
+      <path fill="url(#Gradient_37)" stroke="none" d="&#xA;M 208.25 130.35&#xA;L 208.25 132.5 222.8 132.5 222.8 130.35 208.25 130.35 Z"/>
+      <path fill="url(#Gradient_38)" stroke="none" d="&#xA;M 208.25 137.05&#xA;L 208.25 139.35 222.8 139.35 222.8 137.05 208.25 137.05 Z"/>
+      <path fill="url(#Gradient_39)" stroke="none" d="&#xA;M 242.05 123.7&#xA;L 227.4 123.7 227.4 126 242.05 126 242.05 123.7 Z"/>
+      <path fill="url(#Gradient_40)" stroke="none" d="&#xA;M 222.8 111.85&#xA;L 222.8 109.75 208.25 109.75 208.25 111.85 222.8 111.85 Z"/>
+      <path fill="url(#Gradient_41)" stroke="none" d="&#xA;M 227.4 111.85&#xA;L 242.05 111.85 242.05 109.75 227.4 109.75 227.4 111.85 Z"/>
+      <path fill="url(#Gradient_42)" stroke="none" d="&#xA;M 222.8 118.95&#xA;L 222.8 116.8 208.25 116.8 208.25 118.95 222.8 118.95 Z"/>
+      <path fill="url(#Gradient_43)" stroke="none" d="&#xA;M 227.4 116.8&#xA;L 227.4 118.95 242.05 118.95 242.05 116.8 227.4 116.8 Z"/>
+      <path fill="url(#Gradient_44)" stroke="none" d="&#xA;M 222.8 105.1&#xA;L 222.8 102.9 208.25 102.9 208.25 105.1 222.8 105.1 Z"/>
+      <path fill="url(#Gradient_45)" stroke="none" d="&#xA;M 242.05 105.1&#xA;L 242.05 102.9 227.4 102.9 227.4 105.1 242.05 105.1 Z"/>
+      <path fill="url(#Gradient_46)" stroke="none" d="&#xA;M 204.8 96.7&#xA;L 197.25 96.7 197.25 139.15 206.6 139.15 206.6 108.2 204.8 108.2 204.8 96.7&#xA;M 252.8 96.7&#xA;L 245.35 96.7 245.35 108.2 243.8 108.2 243.8 139.15 252.8 139.15 252.8 96.7 Z"/>
+      <path fill="url(#Gradient_47)" stroke="none" d="&#xA;M 227.4 96.5&#xA;L 227.4 98.3 242.05 98.3 242.05 96.5 227.4 96.5&#xA;M 208.25 96.5&#xA;L 208.25 98.3 222.8 98.3 222.8 96.5 208.25 96.5 Z"/>
+      <path fill="url(#Gradient_48)" stroke="none" d="&#xA;M 227.4 93.55&#xA;L 225.25 93.55 225.25 141.65 227.4 141.65 227.4 139.35 227.4 137.05 227.4 132.5 227.4 130.35 227.4 126 227.4 123.7 227.4 118.95 227.4 116.8 227.4 111.85 227.4 109.75 227.4 105.1 227.4 102.9 227.4 98.3 227.4 96.5 227.4 93.55&#xA;M 222.8 96.5&#xA;L 222.8 98.3 222.8 102.9 222.8 105.1 222.8 109.75 222.8 111.85 222.8 116.8 222.8 118.95 222.8 123.7 222.8 126 222.8 130.35 222.8 132.5 222.8 137.05 222.8 139.35 222.8 141.65 224.95 141.65 224.95 93.55 222.8 93.55 222.8 96.5&#xA;M 208.25 98.3&#xA;L 208.25 96.5 208.25 93.55 206.6 93.55 206.6 94.15 206.6 108.2 206.6 139.15 206.6 141.65 208.25 141.65 208.25 139.35 208.25 137.05 208.25 132.5 208.25 130.35 208.25 126 208.25 123.7 208.25 118.95 208.25 116.8 208.25 111.85 208.25 109.75 208.25 105.1 208.25 102.9 208.25 98.3&#xA;M 195.05 93.85&#xA;L 195.05 96.75 195.05 106 195.05 138.55 195.05 139.15 195.05 141.6 197.25 141.6 197.25 139.15 197.25 96.7 197.25 93.85 195.05 93.85&#xA;M 243.8 94.15&#xA;L 243.8 93.55 242.05 93.55 242.05 96.5 242.05 98.3 242.05 102.9 242.05 105.1 242.05 109.75 242.05 111.85 242.05 116.8 242.05 118.95 242.05 123.7 242.05 126 242.05 130.35 242.05 132.5 242.05 137.05 242.05 139.35 242.05 141.65 243.8 141.65 243.8 139.15 243.8 108.2 243.8 94.15&#xA;M 254.9 94.15&#xA;L 252.8 94.15 252.8 96.7 252.8 139.15 252.8 141.65 254.9 141.65 254.9 139.15 254.9 138.65 254.9 106 254.9 96.75 254.9 94.15 Z"/>
+      <path fill="url(#Gradient_49)" stroke="none" d="&#xA;M 206.6 94.15&#xA;L 204.8 94.15 204.8 96.7 204.8 108.2 206.6 108.2 206.6 94.15 Z"/>
+      <path fill="url(#Gradient_50)" stroke="none" d="&#xA;M 245.35 94.15&#xA;L 243.8 94.15 243.8 108.2 245.35 108.2 245.35 96.7 245.35 94.15 Z"/>
+      <path fill="url(#Gradient_51)" stroke="none" d="&#xA;M 80.8 73.15&#xA;L 46.65 73.15 46.65 93.2 82.6 140.15 97.9 95.45 80.8 73.15 Z"/>
+      <path fill="url(#Gradient_52)" stroke="none" d="&#xA;M 0 54.15&#xA;L 0 93.2 46.65 93.2 46.65 73.15 46.65 54.15 0 54.15 Z"/>
+    </g>
+    <g id="___5_0_Layer0_0_FILL">
+      <path fill="url(#Gradient_53)" stroke="none" d="&#xA;M 19.55 10.4&#xA;L 1.7 10.4 1.7 12.55 19.55 12.55 19.55 10.4&#xA;M 1.7 15.35&#xA;L 3.45 15.35 17.55 15.35 19.55 15.35 19.55 13.4 1.7 13.4 1.7 15.35&#xA;M 19.55 4.55&#xA;L 11.35 4.55 8.85 4.55 1.7 4.55 1.7 6.55 19.55 6.55 19.55 4.55&#xA;M 19.55 9.5&#xA;L 19.55 7.45 1.7 7.45 1.7 9.5 19.55 9.5 Z"/>
+      <path fill="url(#Gradient_54)" stroke="none" d="&#xA;M 1.7 12.55&#xA;L 1.7 13.4 19.55 13.4 19.55 12.55 1.7 12.55&#xA;M 19.55 10.4&#xA;L 19.55 9.5 1.7 9.5 1.7 10.4 19.55 10.4&#xA;M 19.55 7.45&#xA;L 19.55 6.55 1.7 6.55 1.7 7.45 19.55 7.45 Z"/>
+      <path fill="url(#Gradient_55)" stroke="none" d="&#xA;M 3.45 16.65&#xA;L 6.35 18.25 14.65 18.25 17.55 16.75 17.55 15.35 3.45 15.35 3.45 16.65 Z"/>
+      <path fill="url(#Gradient_56)" stroke="none" d="&#xA;M 6.35 18.25&#xA;L 1.35 18.25 1.35 19.3 19.3 19.3 19.3 18.25 14.65 18.25 6.35 18.25 Z"/>
+      <path fill="url(#Gradient_57)" stroke="none" d="&#xA;M 1.7 4.55&#xA;L 1.7 3.9 -2.05 3.9 -3.05 4.3&#xA;Q -4.5451171875 9.762890625 -3.05 15.4&#xA;L -2.05 15.95 1.7 15.95 1.7 15.35 1.7 13.4 1.7 12.55 1.7 10.4 1.7 9.5 1.7 7.45 1.7 6.55 1.7 4.55 Z"/>
+      <path fill="url(#Gradient_58)" stroke="none" d="&#xA;M 7.6 1.85&#xA;L 8.35 1.85 8.35 0.75 7.6 0.75 7.6 1.85 Z"/>
+      <path fill="url(#Gradient_59)" stroke="none" d="&#xA;M 11.35 4.55&#xA;L 11.35 2.65 8.85 2.65 8.85 4.55 11.35 4.55 Z"/>
+      <path fill="url(#Gradient_60)" stroke="none" d="&#xA;M 11.75 2.65&#xA;L 11.75 1.85 11.75 0.75 11.75 0 8.35 0 8.35 0.75 8.35 1.85 8.35 2.65 8.85 2.65 11.35 2.65 11.75 2.65 Z"/>
+      <path fill="url(#Gradient_61)" stroke="none" d="&#xA;M 11.75 1.85&#xA;L 12.5 1.85 12.5 0.75 11.75 0.75 11.75 1.85 Z"/>
+      <path fill="url(#Gradient_62)" stroke="none" d="&#xA;M 23.4 9.05&#xA;L 21.1 9.05 21.1 10.9 23.4 10.9 23.4 9.05 Z"/>
+      <path fill="url(#Gradient_63)" stroke="none" d="&#xA;M 21.1 17.1&#xA;L 21.1 10.9 21.1 9.05 21.1 2.9 19.55 2.9 19.55 4.55 19.55 6.55 19.55 7.45 19.55 9.5 19.55 10.4 19.55 12.55 19.55 13.4 19.55 15.35 19.55 17.1 21.1 17.1 Z"/>
+    </g>
+    <g id="___8_0_Layer0_0_FILL">
+      <path fill="url(#Gradient_64)" stroke="none" d="&#xA;M 7.25 6.35&#xA;L 7.25 5.75 0 5.75 0 6.35 7.25 6.35 Z"/>
+      <path fill="url(#Gradient_65)" stroke="none" d="&#xA;M 0 6.35&#xA;L 0 8.2 7.25 8.2 7.25 6.35 0 6.35 Z"/>
+      <path fill="url(#Gradient_66)" stroke="none" d="&#xA;M 0.4 1.7&#xA;L 0.4 2.55 0.85 2.55 0.85 1.7 0.4 1.7 Z"/>
+      <path fill="url(#Gradient_67)" stroke="none" d="&#xA;M 0.4 1.5&#xA;L 0 1.5 0 2.7 0.4 2.7 0.4 2.55 0.4 1.7 0.4 1.5 Z"/>
+      <path fill="url(#Gradient_68)" stroke="none" d="&#xA;M 5.6 3.4&#xA;Q 5.4 3.5 5.15 3.6 4.5 3.8 3.65 3.8&#xA;L 3.6 3.8&#xA;Q 3.55 3.8 3.5 3.8 2.55 3.75 1.85 3.5 1.75 3.45 1.65 3.4 1.45 3.3 1.3 3.2 1.65 3.95 1.35 4.65 3.6 5.35 5.8 4.65 5.55 4 5.8 3.3 5.7 3.35 5.6 3.4 Z"/>
+      <path fill="url(#Gradient_69)" stroke="none" d="&#xA;M 7.25 3&#xA;L 6.2 3&#xA;Q 6 3.2 5.8 3.3 5.55 4 5.8 4.65 3.6 5.35 1.35 4.65 1.65 3.95 1.3 3.2 1.15 3.1 1.1 3&#xA;L 0 3 0 5.75 7.25 5.75 7.25 3 Z"/>
+      <path fill="url(#Gradient_70)" stroke="none" d="&#xA;M 6.4 2.55&#xA;L 6.4 1.35&#xA;Q 6.35 1.85 5.6 2.2 4.8 2.6 3.65 2.6&#xA;L 3.6 2.6&#xA;Q 3.55 2.6 3.5 2.6 2.45 2.55 1.65 2.2 0.9 1.85 0.85 1.35&#xA;L 0.85 1.7 0.85 2.55&#xA;Q 0.9 2.8 1.1 3 1.15 3.1 1.3 3.2 1.45 3.3 1.65 3.4 1.75 3.45 1.85 3.5 2.55 3.75 3.5 3.8 3.55 3.8 3.6 3.8&#xA;L 3.65 3.8&#xA;Q 4.5 3.8 5.15 3.6 5.4 3.5 5.6 3.4 5.7 3.35 5.8 3.3 6 3.2 6.2 3 6.35 2.8 6.4 2.55 Z"/>
+      <path fill="url(#Gradient_71)" stroke="none" d="&#xA;M 6.4 1.35&#xA;L 6.4 1.3&#xA;Q 6.4 0.75 5.6 0.4 4.8 0 3.65 0 2.45 0 1.65 0.4 0.85 0.75 0.85 1.3&#xA;L 0.85 1.35&#xA;Q 0.9 1.85 1.65 2.2 2.45 2.55 3.5 2.6 3.55 2.6 3.6 2.6&#xA;L 3.65 2.6&#xA;Q 4.8 2.6 5.6 2.2 6.35 1.85 6.4 1.35&#xA;M 5.3 0.45&#xA;Q 6 0.75 6 1.25 6 1.3 6 1.35 5.9 1.75 5.3 2 4.6 2.35 3.65 2.35&#xA;L 3.6 2.35&#xA;Q 3.55 2.35 3.5 2.35 2.6 2.3 1.95 2 1.35 1.75 1.25 1.35 1.25 1.3 1.25 1.25 1.25 0.75 1.95 0.45 2.6 0.1 3.5 0.1 3.55 0.1 3.6 0.1&#xA;L 3.65 0.1&#xA;Q 4.6 0.1 5.3 0.45 Z"/>
+      <path fill="url(#Gradient_72)" stroke="none" d="&#xA;M 6 1.25&#xA;Q 6 0.75 5.3 0.45 4.6 0.1 3.65 0.1&#xA;L 3.6 0.1&#xA;Q 3.55 0.1 3.5 0.1 2.6 0.1 1.95 0.45 1.25 0.75 1.25 1.25 1.25 1.3 1.25 1.35 1.35 1.75 1.95 2 2.6 2.3 3.5 2.35 3.55 2.35 3.6 2.35&#xA;L 3.65 2.35&#xA;Q 4.6 2.35 5.3 2 5.9 1.75 6 1.35 6 1.3 6 1.25 Z"/>
+    </g>
+    <g id="___9_0_Layer0_0_FILL">
+      <path fill="url(#Gradient_73)" stroke="none" d="&#xA;M 195.05 50.05&#xA;L 195.05 17.5 160.05 17.5 160.05 50.05 195.05 50.05 Z"/>
+      <path fill="#B6B6B6" stroke="none" d="&#xA;M 195.05 50.65&#xA;L 195.05 50.05 160.05 50.05 160.05 50.65 195.05 50.65 Z"/>
+      <path fill="url(#Gradient_74)" stroke="none" d="&#xA;M 195.05 17.5&#xA;L 195.05 8.25 152.05 8.25 152.05 13.15 153.25 13.15 153.25 14.2 152.05 14.2 152.05 20.85 153.25 20.85 153.25 21.9 152.05 21.9 152.05 28.9 153.25 28.9 153.25 29.95 152.05 29.95 152.05 36.7 153.25 36.7 153.25 37.75 152.05 37.75 152.05 44.55 153.25 44.55 153.25 45.6 152.05 45.6 152.05 50.65 160.05 50.65 160.05 50.05 160.05 17.5 195.05 17.5&#xA;M 143.35 13.15&#xA;L 144.55 13.15 144.55 8.25 115.95 8.25 115.95 50.65 144.55 50.65 144.55 45.6 143.35 45.6 143.35 44.55 144.55 44.55 144.55 37.75 143.35 37.75 143.35 36.7 144.55 36.7 144.55 29.95 143.35 29.95 143.35 28.9 144.55 28.9 144.55 21.9 143.35 21.9 143.35 20.85 144.55 20.85 144.55 14.2 143.35 14.2 143.35 13.15&#xA;M 306.4 13.15&#xA;L 307.6 13.15 307.6 8.25 254.9 8.25 254.9 17.5 289.1 17.5 289.1 50.15 289.1 50.65 307.6 50.65 307.6 45.6 306.4 45.6 306.4 44.55 307.6 44.55 307.6 37.75 306.4 37.75 306.4 36.7 307.6 36.7 307.6 29.95 306.4 29.95 306.4 28.9 307.6 28.9 307.6 21.9 306.4 21.9 306.4 20.85 307.6 20.85 307.6 14.2 306.4 14.2 306.4 13.15&#xA;M 325.15 58.8&#xA;L 325.15 0 315.85 8.25 315.1 8.25 315.1 13.15 316.3 13.15 316.3 14.2 315.1 14.2 315.1 20.85 316.3 20.85 316.3 21.9 315.1 21.9 315.1 28.9 316.3 28.9 316.3 29.95 315.1 29.95 315.1 36.7 316.3 36.7 316.3 37.75 315.1 37.75 315.1 44.55 316.3 44.55 316.3 45.6 315.1 45.6 315.1 50.65 315.85 50.65 325.15 58.8 Z"/>
+      <path fill="url(#Gradient_75)" stroke="none" d="&#xA;M 195.05 8.25&#xA;L 195.05 17.5 195.05 50.05 195.05 50.65 195.05 53.1 197.25 53.1 197.25 50.65 197.25 8.2 197.25 5.35 195.05 5.35 195.05 8.25&#xA;M 206.6 5.05&#xA;L 206.6 5.65 206.6 19.7 206.6 50.65 206.6 53.15 208.25 53.15 208.25 50.85 208.25 48.55 208.25 44 208.25 41.85 208.25 37.5 208.25 35.2 208.25 30.45 208.25 28.3 208.25 23.35 208.25 21.25 208.25 16.6 208.25 14.4 208.25 9.8 208.25 8 208.25 5.05 206.6 5.05&#xA;M 224.95 5.05&#xA;L 222.8 5.05 222.8 8 222.8 9.8 222.8 14.4 222.8 16.6 222.8 21.25 222.8 23.35 222.8 28.3 222.8 30.45 222.8 35.2 222.8 37.5 222.8 41.85 222.8 44 222.8 48.55 222.8 50.85 222.8 53.15 224.95 53.15 224.95 5.05&#xA;M 227.4 9.8&#xA;L 227.4 8 227.4 5.05 225.25 5.05 225.25 53.15 227.4 53.15 227.4 50.85 227.4 48.55 227.4 44 227.4 41.85 227.4 37.5 227.4 35.2 227.4 30.45 227.4 28.3 227.4 23.35 227.4 21.25 227.4 16.6 227.4 14.4 227.4 9.8&#xA;M 243.8 5.65&#xA;L 243.8 5.05 242.05 5.05 242.05 8 242.05 9.8 242.05 14.4 242.05 16.6 242.05 21.25 242.05 23.35 242.05 28.3 242.05 30.45 242.05 35.2 242.05 37.5 242.05 41.85 242.05 44 242.05 48.55 242.05 50.85 242.05 53.15 243.8 53.15 243.8 50.65 243.8 19.7 243.8 5.65&#xA;M 254.9 8.25&#xA;L 254.9 5.65 252.8 5.65 252.8 8.2 252.8 50.65 252.8 53.15 254.9 53.15 254.9 50.65 254.9 50.15 254.9 17.5 254.9 8.25 Z"/>
+      <path fill="url(#Gradient_76)" stroke="none" d="&#xA;M 0 54.1&#xA;L 0 93.15 46.65 93.15 46.65 74.15 46.65 54.1 0 54.1 Z"/>
+      <path fill="url(#Gradient_77)" stroke="none" d="&#xA;M 97.9 51.85&#xA;L 82.6 7.15 46.65 54.1 46.65 74.15 80.8 74.15 97.9 51.85 Z"/>
+      <path fill="url(#Gradient_78)" stroke="none" d="&#xA;M 144.55 51.75&#xA;L 143.35 51.75 143.35 52.8 144.55 52.8 144.55 51.75 Z"/>
+      <path fill="url(#Gradient_79)" stroke="none" d="&#xA;M 152.05 52.8&#xA;L 153.25 52.8 153.25 51.75 152.05 51.75 152.05 52.8 Z"/>
+      <path fill="url(#Gradient_80)" stroke="none" d="&#xA;M 115.95 8.25&#xA;L 115.95 7.15 82.6 7.15 97.9 51.85 115.95 51.85 115.95 50.65 115.95 8.25 Z"/>
+      <path fill="url(#Gradient_81)" stroke="none" d="&#xA;M 152.05 45.6&#xA;L 153.25 45.6 153.25 44.55 152.05 44.55 152.05 45.6 Z"/>
+      <path fill="url(#Gradient_82)" stroke="none" d="&#xA;M 144.55 45.6&#xA;L 144.55 44.55 143.35 44.55 143.35 45.6 144.55 45.6 Z"/>
+      <path fill="url(#Gradient_83)" stroke="none" d="&#xA;M 144.55 36.7&#xA;L 143.35 36.7 143.35 37.75 144.55 37.75 144.55 36.7 Z"/>
+      <path fill="url(#Gradient_84)" stroke="none" d="&#xA;M 144.55 29.95&#xA;L 144.55 28.9 143.35 28.9 143.35 29.95 144.55 29.95 Z"/>
+      <path fill="url(#Gradient_85)" stroke="none" d="&#xA;M 153.25 36.7&#xA;L 152.05 36.7 152.05 37.75 153.25 37.75 153.25 36.7 Z"/>
+      <path fill="url(#Gradient_86)" stroke="none" d="&#xA;M 152.05 28.9&#xA;L 152.05 29.95 153.25 29.95 153.25 28.9 152.05 28.9 Z"/>
+      <path fill="url(#Gradient_87)" stroke="none" d="&#xA;M 152.05 20.85&#xA;L 152.05 21.9 153.25 21.9 153.25 20.85 152.05 20.85 Z"/>
+      <path fill="url(#Gradient_88)" stroke="none" d="&#xA;M 153.25 13.15&#xA;L 152.05 13.15 152.05 14.2 153.25 14.2 153.25 13.15 Z"/>
+      <path fill="url(#Gradient_89)" stroke="none" d="&#xA;M 144.55 20.85&#xA;L 143.35 20.85 143.35 21.9 144.55 21.9 144.55 20.85 Z"/>
+      <path fill="url(#Gradient_90)" stroke="none" d="&#xA;M 144.55 14.2&#xA;L 144.55 13.15 143.35 13.15 143.35 14.2 144.55 14.2 Z"/>
+      <path fill="url(#Gradient_91)" stroke="none" d="&#xA;M 144.55 5.35&#xA;L 143.35 5.35 143.35 6.4 144.55 6.4 144.55 5.35&#xA;M 307.6 5.35&#xA;L 306.4 5.35 306.4 6.4 307.6 6.4 307.6 5.35&#xA;M 315.1 5.35&#xA;L 315.1 6.4 316.3 6.4 316.3 5.35 315.1 5.35 Z"/>
+      <path fill="url(#Gradient_92)" stroke="none" d="&#xA;M 147.95 5.95&#xA;L 147.95 5.05 144.55 5.05 144.55 5.35 144.55 6.4 144.55 8.25 144.55 13.15 144.55 14.2 144.55 20.85 144.55 21.9 144.55 28.9 144.55 29.95 144.55 36.7 144.55 37.75 144.55 44.55 144.55 45.6 144.55 50.65 144.55 51.75 144.55 52.8 144.55 53.1 147.95 53.1 147.95 52.6 147.95 5.95&#xA;M 152.05 5.35&#xA;L 152.05 5.05 148.45 5.05 148.45 5.95 148.45 52.6 148.45 53.1 152.05 53.1 152.05 52.8 152.05 51.75 152.05 50.65 152.05 45.6 152.05 44.55 152.05 37.75 152.05 36.7 152.05 29.95 152.05 28.9 152.05 21.9 152.05 20.85 152.05 14.2 152.05 13.15 152.05 8.25 152.05 6.4 152.05 5.35&#xA;M 311 5.95&#xA;L 311 5.05 307.6 5.05 307.6 5.35 307.6 6.4 307.6 8.25 307.6 13.15 307.6 14.2 307.6 20.85 307.6 21.9 307.6 28.9 307.6 29.95 307.6 36.7 307.6 37.75 307.6 44.55 307.6 45.6 307.6 50.65 307.6 51.75 307.6 52.8 307.6 53.1 311 53.1 311 52.6 311 5.95&#xA;M 315.1 5.35&#xA;L 315.1 5.05 311.5 5.05 311.5 5.95 311.5 52.6 311.5 53.1 315.1 53.1 315.1 52.8 315.1 51.75 315.1 50.65 315.1 45.6 315.1 44.55 315.1 37.75 315.1 36.7 315.1 29.95 315.1 28.9 315.1 21.9 315.1 20.85 315.1 14.2 315.1 13.15 315.1 8.25 315.1 6.4 315.1 5.35 Z"/>
+      <path fill="url(#Gradient_93)" stroke="none" d="&#xA;M 148.45 5.95&#xA;L 147.95 5.95 147.95 52.6 148.45 52.6 148.45 5.95&#xA;M 225.25 5.05&#xA;L 224.95 5.05 224.95 53.15 225.25 53.15 225.25 5.05&#xA;M 311.5 5.95&#xA;L 311 5.95 311 52.6 311.5 52.6 311.5 5.95 Z"/>
+      <path fill="url(#Gradient_94)" stroke="none" d="&#xA;M 152.05 5.35&#xA;L 152.05 6.4 153.25 6.4 153.25 5.35 152.05 5.35 Z"/>
+      <path fill="url(#Gradient_95)" stroke="none" d="&#xA;M 222.8 53.15&#xA;L 222.8 50.85 208.25 50.85 208.25 53.15 222.8 53.15&#xA;M 242.05 53.15&#xA;L 242.05 50.85 227.4 50.85 227.4 53.15 242.05 53.15&#xA;M 222.8 28.3&#xA;L 222.8 23.35 208.25 23.35 208.25 28.3 222.8 28.3&#xA;M 227.4 44&#xA;L 227.4 48.55 242.05 48.55 242.05 44 227.4 44&#xA;M 227.4 37.5&#xA;L 227.4 41.85 242.05 41.85 242.05 37.5 227.4 37.5&#xA;M 242.05 35.2&#xA;L 242.05 30.45 227.4 30.45 227.4 35.2 242.05 35.2&#xA;M 208.25 44&#xA;L 208.25 48.55 222.8 48.55 222.8 44 208.25 44&#xA;M 208.25 30.45&#xA;L 208.25 35.2 222.8 35.2 222.8 30.45 208.25 30.45&#xA;M 208.25 37.5&#xA;L 208.25 41.85 222.8 41.85 222.8 37.5 208.25 37.5&#xA;M 242.05 23.35&#xA;L 227.4 23.35 227.4 28.3 242.05 28.3 242.05 23.35&#xA;M 222.8 14.4&#xA;L 222.8 9.8 208.25 9.8 208.25 14.4 222.8 14.4&#xA;M 227.4 9.8&#xA;L 227.4 14.4 242.05 14.4 242.05 9.8 227.4 9.8&#xA;M 222.8 21.25&#xA;L 222.8 16.6 208.25 16.6 208.25 21.25 222.8 21.25&#xA;M 227.4 16.6&#xA;L 227.4 21.25 242.05 21.25 242.05 16.6 227.4 16.6&#xA;M 222.8 8&#xA;L 222.8 5.05 208.25 5.05 208.25 8 222.8 8&#xA;M 242.05 8&#xA;L 242.05 5.05 227.4 5.05 227.4 8 242.05 8 Z"/>
+      <path fill="url(#Gradient_96)" stroke="none" d="&#xA;M 222.8 48.55&#xA;L 208.25 48.55 208.25 50.85 222.8 50.85 222.8 48.55 Z"/>
+      <path fill="url(#Gradient_97)" stroke="none" d="&#xA;M 242.05 48.55&#xA;L 227.4 48.55 227.4 50.85 242.05 50.85 242.05 48.55 Z"/>
+      <path fill="url(#Gradient_98)" stroke="none" d="&#xA;M 227.4 35.2&#xA;L 227.4 37.5 242.05 37.5 242.05 35.2 227.4 35.2 Z"/>
+      <path fill="url(#Gradient_99)" stroke="none" d="&#xA;M 227.4 41.85&#xA;L 227.4 44 242.05 44 242.05 41.85 227.4 41.85 Z"/>
+      <path fill="url(#Gradient_100)" stroke="none" d="&#xA;M 242.05 30.45&#xA;L 242.05 28.3 227.4 28.3 227.4 30.45 242.05 30.45 Z"/>
+      <path fill="url(#Gradient_101)" stroke="none" d="&#xA;M 208.25 41.85&#xA;L 208.25 44 222.8 44 222.8 41.85 208.25 41.85 Z"/>
+      <path fill="url(#Gradient_102)" stroke="none" d="&#xA;M 208.25 35.2&#xA;L 208.25 37.5 222.8 37.5 222.8 35.2 208.25 35.2 Z"/>
+      <path fill="url(#Gradient_103)" stroke="none" d="&#xA;M 208.25 28.3&#xA;L 208.25 30.45 222.8 30.45 222.8 28.3 208.25 28.3 Z"/>
+      <path fill="url(#Gradient_104)" stroke="none" d="&#xA;M 206.6 19.7&#xA;L 204.8 19.7 204.8 8.2 197.25 8.2 197.25 50.65 206.6 50.65 206.6 19.7&#xA;M 252.8 8.2&#xA;L 245.35 8.2 245.35 19.7 243.8 19.7 243.8 50.65 252.8 50.65 252.8 8.2 Z"/>
+      <path fill="url(#Gradient_105)" stroke="none" d="&#xA;M 206.6 5.65&#xA;L 204.8 5.65 204.8 8.2 204.8 19.7 206.6 19.7 206.6 5.65 Z"/>
+      <path fill="url(#Gradient_106)" stroke="none" d="&#xA;M 222.8 23.35&#xA;L 222.8 21.25 208.25 21.25 208.25 23.35 222.8 23.35 Z"/>
+      <path fill="url(#Gradient_107)" stroke="none" d="&#xA;M 227.4 21.25&#xA;L 227.4 23.35 242.05 23.35 242.05 21.25 227.4 21.25 Z"/>
+      <path fill="url(#Gradient_108)" stroke="none" d="&#xA;M 222.8 16.6&#xA;L 222.8 14.4 208.25 14.4 208.25 16.6 222.8 16.6 Z"/>
+      <path fill="url(#Gradient_109)" stroke="none" d="&#xA;M 227.4 14.4&#xA;L 227.4 16.6 242.05 16.6 242.05 14.4 227.4 14.4 Z"/>
+      <path fill="url(#Gradient_110)" stroke="none" d="&#xA;M 222.8 9.8&#xA;L 222.8 8 208.25 8 208.25 9.8 222.8 9.8&#xA;M 242.05 9.8&#xA;L 242.05 8 227.4 8 227.4 9.8 242.05 9.8 Z"/>
+      <path fill="url(#Gradient_111)" stroke="none" d="&#xA;M 254.9 17.5&#xA;L 254.9 50.15 289.1 50.15 289.1 17.5 254.9 17.5 Z"/>
+      <path fill="url(#Gradient_112)" stroke="none" d="&#xA;M 307.6 52.8&#xA;L 307.6 51.75 306.4 51.75 306.4 52.8 307.6 52.8 Z"/>
+      <path fill="url(#Gradient_113)" stroke="none" d="&#xA;M 315.1 51.75&#xA;L 315.1 52.8 316.3 52.8 316.3 51.75 315.1 51.75 Z"/>
+      <path fill="#B8B8B8" stroke="none" d="&#xA;M 254.9 50.15&#xA;L 254.9 50.65 289.1 50.65 289.1 50.15 254.9 50.15 Z"/>
+      <path fill="url(#Gradient_114)" stroke="none" d="&#xA;M 245.35 5.65&#xA;L 243.8 5.65 243.8 19.7 245.35 19.7 245.35 8.2 245.35 5.65 Z"/>
+      <path fill="url(#Gradient_115)" stroke="none" d="&#xA;M 315.1 44.55&#xA;L 315.1 45.6 316.3 45.6 316.3 44.55 315.1 44.55 Z"/>
+      <path fill="url(#Gradient_116)" stroke="none" d="&#xA;M 307.6 45.6&#xA;L 307.6 44.55 306.4 44.55 306.4 45.6 307.6 45.6 Z"/>
+      <path fill="url(#Gradient_117)" stroke="none" d="&#xA;M 307.6 36.7&#xA;L 306.4 36.7 306.4 37.75 307.6 37.75 307.6 36.7 Z"/>
+      <path fill="url(#Gradient_118)" stroke="none" d="&#xA;M 307.6 29.95&#xA;L 307.6 28.9 306.4 28.9 306.4 29.95 307.6 29.95 Z"/>
+      <path fill="url(#Gradient_119)" stroke="none" d="&#xA;M 316.3 36.7&#xA;L 315.1 36.7 315.1 37.75 316.3 37.75 316.3 36.7 Z"/>
+      <path fill="url(#Gradient_120)" stroke="none" d="&#xA;M 315.1 28.9&#xA;L 315.1 29.95 316.3 29.95 316.3 28.9 315.1 28.9 Z"/>
+      <path fill="url(#Gradient_121)" stroke="none" d="&#xA;M 316.3 20.85&#xA;L 315.1 20.85 315.1 21.9 316.3 21.9 316.3 20.85 Z"/>
+      <path fill="url(#Gradient_122)" stroke="none" d="&#xA;M 316.3 13.15&#xA;L 315.1 13.15 315.1 14.2 316.3 14.2 316.3 13.15 Z"/>
+      <path fill="url(#Gradient_123)" stroke="none" d="&#xA;M 307.6 21.9&#xA;L 307.6 20.85 306.4 20.85 306.4 21.9 307.6 21.9 Z"/>
+      <path fill="url(#Gradient_124)" stroke="none" d="&#xA;M 307.6 13.15&#xA;L 306.4 13.15 306.4 14.2 307.6 14.2 307.6 13.15 Z"/>
+    </g>
+    <g id="Mask_9_MASK_0_FILL">
+      <path fill="#FFFFFF" stroke="none" d="&#xA;M 410.4 108.15&#xA;L 410.4 69.05 146 69.05 146 108.15 410.4 108.15 Z"/>
+    </g>
+    <g id="JianTou_0_Layer0_0_FILL">
+      <path fill="url(#Gradient_125)" stroke="none" d="&#xA;M 107.7 0&#xA;L 107.7 25.65 0 37.9 0 54.7 107.7 66.4 107.7 89.9 160.55 45.75 107.7 0 Z"/>
+    </g>
+    <g id="Mask_7_MASK_0_FILL">
+      <path fill="#FFFFFF" stroke="none" d="&#xA;M 410.4 189.3&#xA;L 410.4 150.2 146 150.2 146 189.3 410.4 189.3 Z"/>
+    </g>
+    <g id="Mask_5_MASK_0_FILL">
+      <path fill="#FFFFFF" stroke="none" d="&#xA;M 113.6 129.25&#xA;L 146 108.3 114.85 68.15 80.65 112.9&#xA;Q 98.0724609375 116.98828125 113.6 129.25 Z"/>
+    </g>
+    <g id="Mask_3_MASK_0_FILL">
+      <path fill="#FFFFFF" stroke="none" d="&#xA;M 82.8 148.75&#xA;L 114.85 190.35 146 150.2 113.6 129.25 82.8 148.75 Z"/>
+    </g>
+    <g id="Mask_1_MASK_0_FILL">
+      <path fill="#FFFFFF" stroke="none" d="&#xA;M 80.65 144.7&#xA;L 80.65 112.9 0.2 112.9 0.2 144.7 80.65 144.7 Z"/>
+    </g>
+  </defs>
+  <g transform="matrix( 0.9219207763671875, 0, 0, 0.9219207763671875, 39,61.55) ">
+    <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+      <use xlink:href="#___10_0_Layer0_0_FILL"/>
+    </g>
+    <g transform="matrix( 1, 0, 0, 1, 171.65,108.05) ">
+      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+        <use xlink:href="#___5_0_Layer0_0_FILL"/>
+      </g>
+    </g>
+    <g transform="matrix( -1, 0, 0, 1, 278.3,108.05) ">
+      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+        <use xlink:href="#___5_0_Layer0_0_FILL"/>
+      </g>
+    </g>
+    <g transform="matrix( 1, 0, 0, 1, 178.6,91.6) ">
+      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+        <use xlink:href="#___8_0_Layer0_0_FILL"/>
+      </g>
+    </g>
+    <g transform="matrix( 1, 0, 0, 1, 265.15,91.6) ">
+      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+        <use xlink:href="#___8_0_Layer0_0_FILL"/>
+      </g>
+    </g>
+    <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+        <use xlink:href="#___9_0_Layer0_0_FILL"/>
+      </g>
+      <g transform="matrix( 1, 0, 0, 1, 171.65,19.55) ">
+        <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+          <use xlink:href="#___5_0_Layer0_0_FILL"/>
+        </g>
+      </g>
+      <g transform="matrix( -1, 0, 0, 1, 278.3,19.55) ">
+        <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+          <use xlink:href="#___5_0_Layer0_0_FILL"/>
+        </g>
+      </g>
+      <g transform="matrix( 1, 0, 0, 1, 178.6,3.1) ">
+        <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+          <use xlink:href="#___8_0_Layer0_0_FILL"/>
+        </g>
+      </g>
+      <g transform="matrix( 1, 0, 0, 1, 265.15,3.1) ">
+        <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+          <use xlink:href="#___8_0_Layer0_0_FILL"/>
+        </g>
+      </g>
+    </g>
+  </g>
+  <g mask="url(#Mask_Mask_1)" data-fan="1" data-anim="0">
+    <g transform="matrix( 1, 0, 0, 1, 290.35,88.7) ">
+      <g transform="matrix( 0.8019256591796875, 0, 0, 0.8019256591796875, -344.35,-8) ">
+        <g transform="matrix( -0.2574462890625, 0, 0, -0.240966796875, 591.05,20.85) ">
+          <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+            <use xlink:href="#JianTou_0_Layer0_0_FILL"/>
+          </g>
+        </g>
+      </g>
+      <g transform="matrix( 0.8019256591796875, 0, 0, 0.8019256591796875, -390,-8) ">
+        <g transform="matrix( -0.2574462890625, 0, 0, -0.240966796875, 591.05,20.85) ">
+          <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+            <use xlink:href="#JianTou_0_Layer0_0_FILL"/>
+          </g>
+        </g>
+      </g>
+      <g transform="matrix( 0.8019256591796875, 0, 0, 0.8019256591796875, -434.95,-8) ">
+        <g transform="matrix( -0.2574462890625, 0, 0, -0.240966796875, 591.05,20.85) ">
+          <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+            <use xlink:href="#JianTou_0_Layer0_0_FILL"/>
+          </g>
+        </g>
+      </g>
+      <g transform="matrix( 0.8019256591796875, 0, 0, 0.8019256591796875, -479.8,-8) ">
+        <g transform="matrix( -0.2574462890625, 0, 0, -0.240966796875, 591.05,20.85) ">
+          <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+            <use xlink:href="#JianTou_0_Layer0_0_FILL"/>
+          </g>
+        </g>
+      </g>
+      <g transform="matrix( 0.8019256591796875, 0, 0, 0.8019256591796875, -525.45,-8) ">
+        <g transform="matrix( -0.2574462890625, 0, 0, -0.240966796875, 591.05,20.85) ">
+          <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+            <use xlink:href="#JianTou_0_Layer0_0_FILL"/>
+          </g>
+        </g>
+      </g>
+      <g transform="matrix( 0.8019256591796875, 0, 0, 0.8019256591796875, -570.4,-8) ">
+        <g transform="matrix( -0.2574462890625, 0, 0, -0.240966796875, 591.05,20.85) ">
+          <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+            <use xlink:href="#JianTou_0_Layer0_0_FILL"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+  <g mask="url(#Mask_Mask_2)" data-fan="2" data-anim="1">
+    <g transform="matrix( 1, 0, 0, 1, 290.35,170.35) ">
+      <g transform="matrix( 0.8019256591796875, 0, 0, 0.8019256591796875, -344.35,-8) ">
+        <g transform="matrix( -0.2574462890625, 0, 0, -0.240966796875, 591.05,20.85) ">
+          <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+            <use xlink:href="#JianTou_0_Layer0_0_FILL"/>
+          </g>
+        </g>
+      </g>
+      <g transform="matrix( 0.8019256591796875, 0, 0, 0.8019256591796875, -390,-8) ">
+        <g transform="matrix( -0.2574462890625, 0, 0, -0.240966796875, 591.05,20.85) ">
+          <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+            <use xlink:href="#JianTou_0_Layer0_0_FILL"/>
+          </g>
+        </g>
+      </g>
+      <g transform="matrix( 0.8019256591796875, 0, 0, 0.8019256591796875, -434.95,-8) ">
+        <g transform="matrix( -0.2574462890625, 0, 0, -0.240966796875, 591.05,20.85) ">
+          <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+            <use xlink:href="#JianTou_0_Layer0_0_FILL"/>
+          </g>
+        </g>
+      </g>
+      <g transform="matrix( 0.8019256591796875, 0, 0, 0.8019256591796875, -479.8,-8) ">
+        <g transform="matrix( -0.2574462890625, 0, 0, -0.240966796875, 591.05,20.85) ">
+          <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+            <use xlink:href="#JianTou_0_Layer0_0_FILL"/>
+          </g>
+        </g>
+      </g>
+      <g transform="matrix( 0.8019256591796875, 0, 0, 0.8019256591796875, -525.45,-8) ">
+        <g transform="matrix( -0.2574462890625, 0, 0, -0.240966796875, 591.05,20.85) ">
+          <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+            <use xlink:href="#JianTou_0_Layer0_0_FILL"/>
+          </g>
+        </g>
+      </g>
+      <g transform="matrix( 0.8019256591796875, 0, 0, 0.8019256591796875, -570.4,-8) ">
+        <g transform="matrix( -0.2574462890625, 0, 0, -0.240966796875, 591.05,20.85) ">
+          <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+            <use xlink:href="#JianTou_0_Layer0_0_FILL"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+  <g mask="url(#Mask_Mask_3)" data-fan="1" data-anim="2">
+    <g transform="matrix( 1, 0, 0, 1, 128.45,80.85) ">
+      <g transform="matrix( 0.52935791015625, -0.60235595703125, 0.60235595703125, 0.52935791015625, -293.15,321.35) ">
+        <g transform="matrix( -0.2574462890625, 0, 0, -0.240966796875, 591.05,20.85) ">
+          <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+            <use xlink:href="#JianTou_0_Layer0_0_FILL"/>
+          </g>
+        </g>
+      </g>
+      <g transform="matrix( 0.52935791015625, -0.60235595703125, 0.60235595703125, 0.52935791015625, -322.8,355.15) ">
+        <g transform="matrix( -0.2574462890625, 0, 0, -0.240966796875, 591.05,20.85) ">
+          <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+            <use xlink:href="#JianTou_0_Layer0_0_FILL"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+  <g mask="url(#Mask_Mask_4)" data-fan="2" data-anim="3">
+    <g transform="matrix( 1, 0, 0, 1, 125,176.4) ">
+      <g transform="matrix( 0.504913330078125, 0.6229705810546875, -0.6229705810546875, 0.504913330078125, -267.55,-342.95) ">
+        <g transform="matrix( -0.2574462890625, 0, 0, -0.240966796875, 591.05,20.85) ">
+          <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+            <use xlink:href="#JianTou_0_Layer0_0_FILL"/>
+          </g>
+        </g>
+      </g>
+      <g transform="matrix( 0.504913330078125, 0.6229705810546875, -0.6229705810546875, 0.504913330078125, -295.9,-377.8) ">
+        <g transform="matrix( -0.2574462890625, 0, 0, -0.240966796875, 591.05,20.85) ">
+          <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+            <use xlink:href="#JianTou_0_Layer0_0_FILL"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+  <g mask="url(#Mask_Mask_5)" data-fan="all" data-anim="4">
+    <g transform="matrix( 1, 0, 0, 1, 39.35,128.1) ">
+      <g transform="matrix( 0.8019256591796875, 0, 0, 0.8019256591796875, -434.6,-8) ">
+        <g transform="matrix( -0.2574462890625, 0, 0, -0.240966796875, 591.05,20.85) ">
+          <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+            <use xlink:href="#JianTou_0_Layer0_0_FILL"/>
+          </g>
+        </g>
+      </g>
+      <g transform="matrix( 0.8019256591796875, 0, 0, 0.8019256591796875, -480.15,-8) ">
+        <g transform="matrix( -0.2574462890625, 0, 0, -0.240966796875, 591.05,20.85) ">
+          <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+            <use xlink:href="#JianTou_0_Layer0_0_FILL"/>
+          </g>
+        </g>
+      </g>
+      <g transform="matrix( 0.8019256591796875, 0, 0, 0.8019256591796875, -389.65,-8) ">
+        <g transform="matrix( -0.2574462890625, 0, 0, -0.240966796875, 591.05,20.85) ">
+          <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+            <use xlink:href="#JianTou_0_Layer0_0_FILL"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+  <mask id="Mask_Mask_1">
+    <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+      <use xlink:href="#Mask_9_MASK_0_FILL"/>
+    </g>
+  </mask>
+  <mask id="Mask_Mask_2">
+    <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+      <use xlink:href="#Mask_7_MASK_0_FILL"/>
+    </g>
+  </mask>
+  <mask id="Mask_Mask_3">
+    <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+      <use xlink:href="#Mask_5_MASK_0_FILL"/>
+    </g>
+  </mask>
+  <mask id="Mask_Mask_4">
+    <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+      <use xlink:href="#Mask_3_MASK_0_FILL"/>
+    </g>
+  </mask>
+  <mask id="Mask_Mask_5">
+    <g transform="matrix( 1, 0, 0, 1, 0,0) ">
+      <use xlink:href="#Mask_1_MASK_0_FILL"/>
+    </g>
+  </mask>
+</svg>`;
+
+/** 一轮循环时长与每帧步长 */
+const LOOP_MS = 1600;
+const STEP_MS = 400;
+
+/** 每条气流:逐帧 transform + 归属(1 / 2 / all) */
+const FLOW_GROUPS = [
+  {
+    fan: "1",
+    frames: [
+      "matrix(1, 0, 0, 1, 290.35, 88.7)",
+      "matrix(1, 0, 0, 1, 278.95, 88.7)",
+      "matrix(1, 0, 0, 1, 267.55, 88.7)",
+      "matrix(1, 0, 0, 1, 256.1, 88.7)",
+      "matrix(1, 0, 0, 1, 244.7, 88.7)",
+    ],
+  },
+  {
+    fan: "2",
+    frames: [
+      "matrix(1, 0, 0, 1, 290.35, 170.35)",
+      "matrix(1, 0, 0, 1, 278.95, 170.35)",
+      "matrix(1, 0, 0, 1, 267.55, 170.35)",
+      "matrix(1, 0, 0, 1, 256.1, 170.35)",
+      "matrix(1, 0, 0, 1, 244.7, 170.35)",
+    ],
+  },
+  {
+    fan: "1",
+    frames: [
+      "matrix(1, 0, 0, 1, 128.45, 80.85)",
+      "matrix(1, 0, 0, 1, 121.05, 89.3)",
+      "matrix(1, 0, 0, 1, 113.7, 97.75)",
+      "matrix(1, 0, 0, 1, 106.3, 106.2)",
+      "matrix(1, 0, 0, 1, 98.9, 114.65)",
+    ],
+  },
+  {
+    fan: "2",
+    frames: [
+      "matrix(1, 0, 0, 1, 125, 176.4)",
+      "matrix(1, 0, 0, 1, 117.95, 167.7)",
+      "matrix(1, 0, 0, 1, 110.85, 159)",
+      "matrix(1, 0, 0, 1, 103.8, 150.25)",
+      "matrix(1, 0, 0, 1, 96.7, 141.55)",
+    ],
+  },
+  {
+    fan: "all",
+    frames: [
+      "matrix(1, 0, 0, 1, 39.35, 128.1)",
+      "matrix(1, 0, 0, 1, 28.1, 128.1)",
+      "matrix(1, 0, 0, 1, 16.9, 128.1)",
+      "matrix(1, 0, 0, 1, 5.65, 128.1)",
+      "matrix(1, 0, 0, 1, -5.6, 128.1)",
+    ],
+  },
+];
+
+/** 给注入的 SVG 内部 id 加实例后缀,避免多份 SVG 同页时 id 撞车 */
+let svgSeq = 0;
+
+const HOST_CLASS = "jubu-svg-host";
+const HOST_PREFIX = "jubu-svg-host-";
+
+/**
+ * 给 SVG 内部的 id 加实例后缀(同时改写 url(#id) 与 xlink:href="#id")
+ * @param {string} markupText - SVG 标记
+ * @param {string} suffix - 实例后缀
+ * @returns {string} 处理后的标记
+ */
+function scopeSvgIds(markupText, suffix) {
+  const ids = [];
+
+  markupText.replace(/([\s<])id="([^"]+)"/g, (match, lead, id) => {
+    ids.push(id);
+    return match;
+  });
+
+  if (ids.length === 0) return markupText;
+
+  const map = new Map();
+  ids.forEach((id) => map.set(id, id + suffix));
+
+  return markupText
+    .replace(
+      /([\s<])id="([^"]+)"/g,
+      (match, lead, id) => lead + 'id="' + (map.get(id) || id) + '"',
+    )
+    .replace(/url\(#([^)]+)\)/g, (match, id) =>
+      map.has(id) ? "url(#" + map.get(id) + ")" : match,
+    )
+    .replace(/(xlink:href|href)="#([^"]+)"/g, (match, attr, id) =>
+      map.has(id) ? attr + '="#' + map.get(id) + '"' : match,
+    );
+}
+
+export default {
+  data() {
+    return {
+      /** 已缓存的 5 条气流节点 */
+      flows: [],
+      /** 当前帧号 */
+      index: 0,
+      observer: null,
+      pollTimer: null,
+      frameTimer: null,
+    };
+  },
+  mounted() {
+    try {
+      this.injectSvg();
+      this.syncState();
+      this.observe();
+    } catch (error) {
+      if (typeof console !== "undefined" && console.error) {
+        console.error("[JuBuFengJi] 初始化失败", error);
+      }
+    }
+  },
+  beforeDestroy() {
+    this.teardown();
+  },
   methods: {
-    setnowfengji(val) {
-      if (this.nowfengji != val) {
-        this.nowfengji = val;
-        this.setFengjiDonghua();
+    /**
+     * 取宿主节点:优先在自己根节点里找,多实例不会抢节点
+     * @returns {Object|null} 宿主节点
+     */
+    hostElement() {
+      const root = this.$el;
+
+      if (!root || typeof root.querySelector !== "function") return null;
+
+      if (
+        root.classList &&
+        typeof root.classList.contains === "function" &&
+        root.classList.contains(HOST_CLASS)
+      ) {
+        return root;
       }
+
+      const scoped =
+        root.querySelector('[id^="' + HOST_PREFIX + '"]') ||
+        root.querySelector("." + HOST_CLASS);
+
+      if (scoped) return scoped;
+
+      if (typeof document !== "undefined" && document.querySelector) {
+        return document.querySelector('[id^="' + HOST_PREFIX + '"]');
+      }
+
+      return null;
     },
-    fanclick(val) {
-      this.$emit("fanclick", val);
-    },
-    setFengjiDonghua() {
-      if (this.nowfengji == "2") {
-        document.getElementById("box1").style.animationPlayState = "running";
-        document.getElementById("box1").style.WebkitAnimationPlayState =
-          "running";
-
-        document.getElementById("box2").style.animationPlayState = "paused";
-        document.getElementById("box2").style.WebkitAnimationPlayState =
-          "paused";
-      } else if (this.nowfengji == "1") {
-        document.getElementById("box2").style.animationPlayState = "running";
-        document.getElementById("box2").style.WebkitAnimationPlayState =
-          "running";
-        document.getElementById("box1").style.animationPlayState = "paused";
-        document.getElementById("box1").style.WebkitAnimationPlayState =
-          "paused";
-      } else {
-        document.getElementById("box2").style.animationPlayState = "paused";
-        document.getElementById("box2").style.WebkitAnimationPlayState =
-          "paused";
-        document.getElementById("box1").style.animationPlayState = "paused";
-        document.getElementById("box1").style.WebkitAnimationPlayState =
-          "paused";
+
+    /** 注入 SVG 并缓存气流节点 */
+    injectSvg() {
+      const host = this.hostElement();
+
+      if (!host || !host.querySelector) return;
+
+      if (!host.querySelector("svg")) {
+        host.innerHTML = scopeSvgIds(SVG_MARKUP, "-s" + (svgSeq += 1));
       }
+
+      const nodes = host.querySelectorAll("[data-fan]");
+
+      this.flows = Array.prototype.slice
+        .call(nodes)
+        .map((node) => {
+          const layer = node.firstElementChild;
+
+          if (layer) {
+            // 基准点:让 CSS transform 与 SVG transform 属性对齐
+            layer.style.transformBox = "view-box";
+            layer.style.transformOrigin = "0 0";
+          }
+
+          return {
+            fan: node.getAttribute("data-fan"),
+            frames: FLOW_GROUPS[Number(node.getAttribute("data-anim"))]
+              ? FLOW_GROUPS[Number(node.getAttribute("data-anim"))].frames
+              : [],
+            node,
+            layer,
+          };
+        })
+        .filter((item) => item.node && item.layer);
     },
-  },
-  watch: {},
-  onLoad(query) {
-    this.setFengjiDonghua();
-  },
-};
-</script>
 
-<style scoped>
-div.pageback {
-  padding-top: 10px;
-  margin-top: 12px;
-  width: 100%;
-  height: calc(80% - 50px);
-  min-height: 350px;
-  background-image: url(/static/fan/page-back.png);
-  background-size: 100% 100%;
-}
-div.ventilate {
-  min-width: 300px;
-  width: 60%;
-  margin-left: 10%;
-  height: 80%;
-  height: calc(80% - 120px);
-  min-height: 330px;
-  background-image: url(/static/fan/localfan-back.png);
-  background-size: 100% 100%;
-}
-div.arrow1,
-div.arrow2,
-div.arrow3,
-div.arrow4,
-div.arrow5,
-div.arrow6,
-div.arrow7,
-div.arrow8,
-div.arrow9,
-div.arrow10,
-div.arrow1-fan1,
-div.arrow2-fan1,
-div.arrow3-fan1,
-div.arrow4-fan1,
-div.arrow5-fan1,
-div.arrow6-fan1,
-div.arrow7-fan1,
-div.arrow8-fan1,
-div.arrow9-fan1,
-div.arrow10-fan1 {
-  position: absolute;
-  right: 40px;
-  opacity: 0;
-  top: 96px;
-  width: 30px;
-  height: 15px;
-  box-sizing: border-box;
-  float: right;
-  z-index: 1;
-  transition: all 2s ease;
-  background-image: url(/static/fan/arrow-in.png);
-  background-size: 100% 100%;
-}
-div.arrow101,
-div.arrow102,
-div.arrow103,
-div.arrow104,
-div.arrow105,
-div.arrow106,
-div.arrow107,
-div.arrow108 {
-  position: absolute;
-  right: 70px;
-  opacity: 0;
-  top: 516px;
-  width: 30px;
-  height: 13px;
-  box-sizing: border-box;
-  float: right;
-  z-index: 1;
-  transition: all 2s ease;
-  background-image: url(/static/fan/arrow-out.png);
-  background-size: 100% 100%;
-}
-div.arrow201,
-div.arrow202,
-div.arrow203,
-div.arrow204,
-div.arrow205 {
-  position: absolute;
-  right: 0px;
-  opacity: 0;
-  top: 30px;
-  width: 45px;
-  height: 23px;
-  box-sizing: border-box;
-  float: right;
-  z-index: 10;
-  transition: all 2s ease;
-  background-image: url(/static/fan/arrow-in.png);
-  background-size: 100% 100%;
-}
-</style>
-<style scoped>
-.arrow1 {
-  position: relative;
-  animation: myfirst1 20s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst1 20s infinite linear;
-}
+    /**
+     * 读宿主节点上的运行状态
+     * @returns {Object} { fan1, fan2 }
+     */
+    readState() {
+      const host = this.hostElement();
+      const isOn = (value) => String(value) === "1";
 
-@keyframes myfirst1 {
-  0% {
-    right: 10%;
-    top: 16%;
-    -webkit-transform: rotate(0deg);
-    opacity: 1;
-  }
-  10% {
-    right: 33%;
-    top: 16%;
-    -webkit-transform: rotate(0deg);
-    opacity: 1;
-  }
-  11% {
-    right: 34%;
-    top: 15%;
-    -webkit-transform: rotate(40deg);
-    opacity: 1;
-  }
-  14% {
-    right: 40%;
-    top: 13%;
-    -webkit-transform: rotate(40deg);
-    opacity: 1;
-  }
-  15% {
-    right: 41%;
-    top: 13%;
-    -webkit-transform: rotate(0deg);
-    opacity: 1;
-  }
-  22% {
-    right: 60%;
-    top: 13%;
-    -webkit-transform: rotate(0deg);
-    opacity: 1;
-  }
-  23% {
-    right: 60.5%;
-    top: 14%;
-    -webkit-transform: rotate(-90deg);
-    opacity: 1;
-  }
-  98% {
-    right: 60.5%;
-    top: 91%;
-    -webkit-transform: rotate(-90deg);
-    opacity: 1;
-  }
-  100% {
-    right: 60.5%;
-    top: 93%;
-    -webkit-transform: rotate(-90deg);
-    opacity: 0;
-  }
-}
+      if (!host || !host.getAttribute) return { fan1: false, fan2: false };
 
-@-webkit-keyframes myfirst1 /* Safari 和 Chrome */ {
-  0% {
-    right: 10%;
-    top: 16%;
-    -webkit-transform: rotate(0deg);
-    opacity: 1;
-  }
-  10% {
-    right: 33%;
-    top: 16%;
-    -webkit-transform: rotate(0deg);
-    opacity: 1;
-  }
-  11% {
-    right: 34%;
-    top: 15%;
-    -webkit-transform: rotate(30deg);
-    opacity: 1;
-  }
-  14% {
-    right: 40%;
-    top: 12%;
-    -webkit-transform: rotate(30deg);
-    opacity: 1;
-  }
-  15% {
-    right: 41%;
-    top: 12%;
-    -webkit-transform: rotate(0deg);
-    opacity: 1;
-  }
-  22% {
-    right: 60%;
-    top: 12%;
-    -webkit-transform: rotate(0deg);
-    opacity: 1;
-  }
-  23% {
-    right: 60.5%;
-    top: 13%;
-    -webkit-transform: rotate(-90deg);
-    opacity: 1;
-  }
-  98% {
-    right: 60.5%;
-    top: 91%;
-    -webkit-transform: rotate(-90deg);
-    opacity: 1;
-  }
-  100% {
-    right: 60.5%;
-    top: 93%;
-    -webkit-transform: rotate(-90deg);
-    opacity: 0;
-  }
-}
+      return {
+        fan1: isOn(host.getAttribute("data-fan1")),
+        fan2: isOn(host.getAttribute("data-fan2")),
+      };
+    },
 
-.arrow2 {
-  position: relative;
-  animation-delay: -18s;
-  animation: myfirst1 20s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst1 20s infinite linear;
-  -webkit-animation-delay: -18s;
-}
+    /** 按状态显示 / 隐藏气流,并启停逐帧定时器 */
+    syncState() {
+      const state = this.readState();
+      const anyRunning = state.fan1 || state.fan2;
 
-.arrow3 {
-  position: relative;
-  animation-delay: -16s;
-  animation: myfirst1 20s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst1 20s infinite linear;
-  -webkit-animation-delay: -16s;
-}
+      this.flows.forEach((item) => {
+        item.shown =
+          (item.fan === "1" && state.fan1) ||
+          (item.fan === "2" && state.fan2) ||
+          (item.fan === "all" && anyRunning);
 
-.arrow4 {
-  position: relative;
-  animation-delay: -14s;
-  animation: myfirst1 20s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst1 20s infinite linear;
-  -webkit-animation-delay: -14s;
-}
+        item.node.style.display = item.shown ? "" : "none";
+      });
 
-.arrow5 {
-  position: relative;
-  animation-delay: -12s;
-  animation: myfirst1 20s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst1 20s infinite linear;
-  -webkit-animation-delay: -12s;
-}
+      if (anyRunning) {
+        this.index = 0;
+        this.applyFrame(true);
+        this.startTimer();
+        return;
+      }
 
-.arrow6 {
-  position: relative;
-  animation-delay: -10s;
-  animation: myfirst1 20s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst1 20s infinite linear;
-  -webkit-animation-delay: -10s;
-}
+      this.stopTimer();
+    },
 
-.arrow7 {
-  position: relative;
-  animation-delay: -8s;
-  animation: myfirst1 20s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst1 20s infinite linear;
-  -webkit-animation-delay: -8s;
-}
+    /**
+     * 把当前帧写到每条正在运行的气流上
+     * @param {boolean} reset - 是否关掉过渡(归位时用,避免箭头往回滑)
+     */
+    applyFrame(reset) {
+      this.flows.forEach((item) => {
+        if (!item.shown) return;
 
-.arrow8 {
-  position: relative;
-  animation-delay: -6s;
-  animation: myfirst1 20s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst1 20s infinite linear;
-  -webkit-animation-delay: -6s;
-}
+        const frames = item.frames;
 
-.arrow9 {
-  position: relative;
-  animation-delay: -4s;
-  animation: myfirst1 20s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst1 20s infinite linear;
-  -webkit-animation-delay: -4s;
-}
+        if (!frames || frames.length === 0) return;
 
-.arrow10 {
-  position: relative;
-  animation-delay: -2s;
-  animation: myfirst1 20s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst1 20s infinite linear;
-  -webkit-animation-delay: -2s;
-}
-</style>
+        const matrix = frames[this.index % frames.length];
 
-<style scoped>
-.arrow101 {
-  position: relative;
-  animation-delay: -10s;
-  animation: myfirst101 12s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst101 12s infinite linear;
-  -webkit-animation-delay: -10s;
-}
+        item.layer.style.transition = reset ? "none" : "transform " + STEP_MS + "ms linear";
+        // 双写:行内 CSS transform 负责平滑补间;SVG transform 属性兜底(不支持 CSS 时也有位移)
+        item.layer.style.transform = matrix;
+        if (typeof item.layer.setAttribute === "function") {
+          item.layer.setAttribute("transform", matrix);
+        }
+      });
+    },
 
-@keyframes myfirst101 {
-  0% {
-    right: 62.5%;
-    top: 94%;
-    -webkit-transform: rotate(-180deg);
-    opacity: 1;
-  }
-  15% {
-    right: 73%;
-    top: 94%;
-    -webkit-transform: rotate(-180deg);
-    opacity: 1;
-  }
-  17% {
-    right: 73%;
-    top: 93%;
-    -webkit-transform: rotate(-90deg);
-    opacity: 1;
-  }
-  62% {
-    right: 73%;
-    top: 57%;
-    -webkit-transform: rotate(-90deg);
-    opacity: 1;
-  }
-  64% {
-    right: 73%;
-    top: 55%;
-    -webkit-transform: rotate(-180deg);
-    opacity: 1;
-  }
-  66% {
-    right: 74%;
-    top: 55%;
-    -webkit-transform: rotate(-180deg);
-    opacity: 1;
-  }
-  90% {
-    right: 93%;
-    top: 55%;
-    -webkit-transform: rotate(-180deg);
-    opacity: 1;
-  }
-  100% {
-    right: 98%;
-    top: 55%;
-    -webkit-transform: rotate(-180deg);
-    opacity: 0;
-  }
-}
+    /**
+     * 推进一帧(测试与定时器共用)
+     *
+     * 第 5 帧与第 1 帧视觉等价(正好差一格箭头间距),所以回卷不能占一整步,
+     * 否则每轮会停 STEP_MS。这里直接瞬时归位后立刻接上第 2 帧,动画不断档。
+     */
+    advance() {
+      const next = (this.index + 1) % 5;
 
-@-webkit-keyframes myfirst101 /* Safari 和 Chrome */ {
-  0% {
-    right: 62.5%;
-    top: 94%;
-    -webkit-transform: rotate(-180deg);
-    opacity: 1;
-  }
-  15% {
-    right: 73%;
-    top: 94%;
-    -webkit-transform: rotate(-180deg);
-    opacity: 1;
-  }
-  17% {
-    right: 73%;
-    top: 93%;
-    -webkit-transform: rotate(-90deg);
-    opacity: 1;
-  }
-  62% {
-    right: 73%;
-    top: 57%;
-    -webkit-transform: rotate(-90deg);
-    opacity: 1;
-  }
-  64% {
-    right: 73%;
-    top: 55%;
-    -webkit-transform: rotate(-180deg);
-    opacity: 1;
-  }
-  66% {
-    right: 74%;
-    top: 55%;
-    -webkit-transform: rotate(-180deg);
-    opacity: 1;
-  }
-  90% {
-    right: 93%;
-    top: 55%;
-    -webkit-transform: rotate(-180deg);
-    opacity: 1;
-  }
-  100% {
-    right: 98%;
-    top: 55%;
-    -webkit-transform: rotate(-180deg);
-    opacity: 0;
-  }
-}
+      if (next !== 0) {
+        this.index = next;
+        this.applyFrame(false);
+        return;
+      }
 
-.arrow102 {
-  position: relative;
-  animation-delay: -8s;
-  animation: myfirst101 12s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst101 12s infinite linear;
-  -webkit-animation-delay: -8s;
-}
-.arrow103 {
-  position: relative;
-  animation-delay: -6s;
-  animation: myfirst101 12s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst101 12s infinite linear;
-  -webkit-animation-delay: -6s;
-}
-.arrow104 {
-  position: relative;
-  animation-delay: -4s;
-  animation: myfirst101 12s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst101 12s infinite linear;
-  -webkit-animation-delay: -4s;
-}
-.arrow105 {
-  position: relative;
-  animation-delay: -2s;
-  animation: myfirst101 12s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst101 12s infinite linear;
-  -webkit-animation-delay: -2s;
-}
-.arrow106 {
-  position: relative;
-  animation-delay: 0s;
-  animation: myfirst101 12s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst101 12s infinite linear;
-  -webkit-animation-delay: 0s;
-}
-</style>
-<style scoped>
-.arrow1-fan1 {
-  position: relative;
-  animation: myfirst1-fan1 20s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst1-fan1 20s infinite linear;
-}
+      this.wrapToNext();
+    },
 
-@keyframes myfirst1-fan1 {
-  0% {
-    right: 10%;
-    top: 10%;
-    -webkit-transform: rotate(0deg);
-    opacity: 1;
-  }
-  10% {
-    right: 33%;
-    top: 10%;
-    -webkit-transform: rotate(0deg);
-    opacity: 1;
-  }
-  11% {
-    right: 34%;
-    top: 11%;
-    -webkit-transform: rotate(-40deg);
-    opacity: 1;
-  }
-  14% {
-    right: 40%;
-    top: 13%;
-    -webkit-transform: rotate(-40deg);
-    opacity: 1;
-  }
-  15% {
-    right: 41%;
-    top: 13%;
-    -webkit-transform: rotate(0deg);
-    opacity: 1;
-  }
-  22% {
-    right: 60%;
-    top: 13%;
-    -webkit-transform: rotate(0deg);
-    opacity: 1;
-  }
-  23% {
-    right: 60.5%;
-    top: 14%;
-    -webkit-transform: rotate(-90deg);
-    opacity: 1;
-  }
-  98% {
-    right: 60.5%;
-    top: 89%;
-    -webkit-transform: rotate(-90deg);
-    opacity: 1;
-  }
-  100% {
-    right: 60.5%;
-    top: 91%;
-    -webkit-transform: rotate(-90deg);
-    opacity: 0;
-  }
-}
+    /** 回卷:瞬时归位到第 1 帧,同时立刻开始走向第 2 帧 */
+    wrapToNext() {
+      this.index = 0;
 
-@-webkit-keyframes myfirst1-fan1 /* Safari 和 Chrome */ {
-  0% {
-    right: 10%;
-    top: 10%;
-    -webkit-transform: rotate(0deg);
-    opacity: 1;
-  }
-  10% {
-    right: 33%;
-    top: 10%;
-    -webkit-transform: rotate(0deg);
-    opacity: 1;
-  }
-  11% {
-    right: 34%;
-    top: 11%;
-    -webkit-transform: rotate(-40deg);
-    opacity: 1;
-  }
-  14% {
-    right: 40%;
-    top: 13%;
-    -webkit-transform: rotate(-40deg);
-    opacity: 1;
-  }
-  15% {
-    right: 41%;
-    top: 13%;
-    -webkit-transform: rotate(0deg);
-    opacity: 1;
-  }
-  22% {
-    right: 60%;
-    top: 13%;
-    -webkit-transform: rotate(0deg);
-    opacity: 1;
-  }
-  23% {
-    right: 60.5%;
-    top: 14%;
-    -webkit-transform: rotate(-90deg);
-    opacity: 1;
-  }
-  98% {
-    right: 60.5%;
-    top: 89%;
-    -webkit-transform: rotate(-90deg);
-    opacity: 1;
-  }
-  100% {
-    right: 60.5%;
-    top: 91%;
-    -webkit-transform: rotate(-90deg);
-    opacity: 0;
-  }
-}
+      this.flows.forEach((item) => {
+        if (!item.shown || !item.layer) return;
 
-.arrow2-fan1 {
-  position: relative;
-  animation-delay: -18s;
-  animation: myfirst1-fan1 20s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst1-fan1 20s infinite linear;
-  -webkit-animation-delay: -18s;
-}
+        const frames = item.frames;
+        const layer = item.layer;
+        const setTransform = (matrix) => {
+          layer.style.transform = matrix;
+          if (typeof layer.setAttribute === "function") {
+            layer.setAttribute("transform", matrix);
+          }
+        };
 
-.arrow3-fan1 {
-  position: relative;
-  animation-delay: -16s;
-  animation: myfirst1-fan1 20s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst1-fan1 20s infinite linear;
-  -webkit-animation-delay: -16s;
-}
+        if (!frames || frames.length < 2) return;
 
-.arrow4-fan1 {
-  position: relative;
-  animation-delay: -14s;
-  animation: myfirst1-fan1 20s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst1-fan1 20s infinite linear;
-  -webkit-animation-delay: -14s;
-}
+        layer.style.transition = "none";
+        setTransform(frames[0]);
 
-.arrow5-fan1 {
-  position: relative;
-  animation-delay: -12s;
-  animation: myfirst1-fan1 20s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst1-fan1 20s infinite linear;
-  -webkit-animation-delay: -12s;
-}
+        // 强制一次重排,让"瞬时归位"先被浏览器接受,下一段过渡才会生效
+        if (typeof layer.getBoundingClientRect === "function") {
+          layer.getBoundingClientRect();
+        }
 
-.arrow6-fan1 {
-  position: relative;
-  animation-delay: -10s;
-  animation: myfirst1-fan1 20s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst1-fan1 20s infinite linear;
-  -webkit-animation-delay: -10s;
-}
+        layer.style.transition = "transform " + STEP_MS + "ms linear";
+        setTransform(frames[1]);
+      });
 
-.arrow7-fan1 {
-  position: relative;
-  animation-delay: -8s;
-  animation: myfirst1-fan1 20s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst1-fan1 20s infinite linear;
-  -webkit-animation-delay: -8s;
-}
+      this.index = 1;
+    },
 
-.arrow8-fan1 {
-  position: relative;
-  animation-delay: -6s;
-  animation: myfirst1-fan1 20s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst1-fan1 20s infinite linear;
-  -webkit-animation-delay: -6s;
-}
+    /** 启动逐帧定时器 */
+    startTimer() {
+      this.stopTimer();
+      this.frameTimer = setInterval(() => this.advance(), STEP_MS);
+    },
 
-.arrow9-fan1 {
-  position: relative;
-  animation-delay: -4s;
-  animation: myfirst1-fan1 20s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst1-fan1 20s infinite linear;
-  -webkit-animation-delay: -4s;
-}
+    /** 停止逐帧定时器 */
+    stopTimer() {
+      if (this.frameTimer) {
+        clearInterval(this.frameTimer);
+        this.frameTimer = null;
+      }
+    },
 
-.arrow10-fan1 {
-  position: relative;
-  animation-delay: -2s;
-  animation: myfirst1-fan1 20s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst1-fan1 20s infinite linear;
-  -webkit-animation-delay: -2s;
-}
-</style>
+    /** 监听状态属性变化,没有 MutationObserver 时退化为轮询 */
+    observe() {
+      const refresh = () => {
+        try {
+          this.syncState();
+        } catch (error) {
+          if (typeof console !== "undefined" && console.error) {
+            console.error("[JuBuFengJi] 更新状态失败", error);
+          }
+        }
+      };
 
-<style scoped>
-.arrow201 {
-  position: relative;
-  animation-delay: -8s;
-  animation: myfirst201 10s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst201 10s infinite linear;
-  -webkit-animation-delay: -8s;
-}
+      const host = this.hostElement();
 
-@keyframes myfirst201 {
-  0% {
-    right: 0px;
-    top: 90px;
-    -webkit-transform: rotate(0deg);
-    opacity: 0;
-  }
-  2% {
-    right: 10px;
-    top: 90px;
-    -webkit-transform: rotate(0deg);
-    opacity: 1;
-  }
-  94% {
-    right: 530px;
-    top: 90px;
-    -webkit-transform: rotate(0deg);
-    opacity: 1;
-  }
-  100% {
-    right: 570px;
-    top: 90px;
-    -webkit-transform: rotate(0deg);
-    opacity: 0;
-  }
-}
+      if (host && typeof MutationObserver !== "undefined") {
+        this.observer = new MutationObserver(refresh);
+        this.observer.observe(host, {
+          attributes: true,
+          attributeFilter: ["data-fan1", "data-fan2"],
+        });
 
-@-webkit-keyframes myfirst201 /* Safari 和 Chrome */ {
-  0% {
-    right: 0px;
-    top: 90px;
-    -webkit-transform: rotate(0deg);
-    opacity: 0;
-  }
-  2% {
-    right: 10px;
-    top: 90px;
-    -webkit-transform: rotate(0deg);
-    opacity: 1;
-  }
-  94% {
-    right: 530px;
-    top: 90px;
-    -webkit-transform: rotate(0deg);
-    opacity: 1;
-  }
-  100% {
-    right: 570px;
-    top: 90px;
-    -webkit-transform: rotate(0deg);
-    opacity: 0;
-  }
-}
-.arrow202 {
-  position: relative;
-  animation-delay: -6s;
-  animation: myfirst201 10s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst201 10s infinite linear;
-  -webkit-animation-delay: -6s;
-}
+        return;
+      }
 
-.arrow203 {
-  position: relative;
-  animation-delay: -4s;
-  animation: myfirst201 10s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst201 10s infinite linear;
-  -webkit-animation-delay: -4s;
-}
+      this.pollTimer = setInterval(refresh, 400);
+    },
 
-.arrow204 {
-  position: relative;
-  animation-delay: -2s;
-  animation: myfirst201 10s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst201 10s infinite linear;
-  -webkit-animation-delay: -2s;
-}
+    /** 停止监听、轮询与逐帧定时器 */
+    teardown() {
+      this.stopTimer();
+
+      if (this.observer) {
+        this.observer.disconnect();
+        this.observer = null;
+      }
+
+      if (this.pollTimer) {
+        clearInterval(this.pollTimer);
+        this.pollTimer = null;
+      }
+    },
+  },
+};
+</script>
 
-.arrow205 {
-  position: relative;
-  animation-delay: -0.1s;
-  animation: myfirst201 10s infinite linear;
-  /* Safari 和 Chrome */
-  -webkit-animation: myfirst201 10s infinite linear;
-  -webkit-animation-delay: -0.1s;
-}
-</style>
 <style scoped>
-.box,
-.box2 {
-  position: absolute;
-  transform: perspective(1000px) rotateY(-70deg);
-  width: 5px;
-  height: 15px;
-  transform-style: preserve-3d;
-}
-.box::before,
-.box2::before {
-  content: "";
-  position: absolute;
-  bottom: -20px;
-  left: 0;
-  width: 100%;
-  height: 10px;
-  background: #000;
-  filter: blur(10px);
-  opacity: 0.5;
-  transform: rotateX(90deg);
-}
-.box div {
-  position: absolute;
-  top: 0;
-  left: 0;
+.jubu-svg-wrap {
+  position: relative;
   width: 100%;
-  height: 100%;
-  transform-style: preserve-3d;
-  animation: animate 5s linear infinite;
+  padding-top: 62.86%; /* 259 / 412 */
+  min-height: 120px;
 }
-.box2 div {
+
+.jubu-svg-host {
   position: absolute;
-  top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
-  transform-style: preserve-3d;
-  animation: animate 5s linear infinite;
-  animation-play-state: paused;
-  -webkit-animation-play-state: paused;
-}
-.box div span,
-.box2 div span {
-  position: absolute;
   top: 0;
-  left: 0;
-  display: block;
   width: 100%;
   height: 100%;
-  background: linear-gradient(0deg, #f1f1f1, #999, #f1f1f1);
-  border-radius: 5px;
-}
-
-.box div span:nth-child(1),
-.box2 div span:nth-child(1) {
-  transform: rotateX(0deg);
-}
-.box div span:nth-child(2),
-.box2 div span:nth-child(2) {
-  transform: rotateX(45deg);
-}
-.box div span:nth-child(3),
-.box2 div span:nth-child(3) {
-  transform: rotateX(-45deg);
-}
-.box div span:nth-child(4),
-.box2 div span:nth-child(4) {
-  transform: rotateX(90deg);
-}
-@keyframes animate {
-  0% {
-    transform: perspective(1000px) rotateX(0deg);
-  }
-  100% {
-    transform: perspective(1000px) rotateX(359deg);
-  }
-}
-</style>
-<style scoped>
-.localT1 {
-  position: absolute;
-  width: 70px;
-}
-.localT1 div:nth-child(1) {
-  float: left;
-  width: 20px;
-  height: 20px;
-  padding: 2px;
-  background: #1515e9;
-  font-size: 12px;
-  font-weight: 100;
-  color: #fff;
-  border: 1px solid #000;
-  box-shadow: #1515e9 0px 0px 10px;
-}
-.localT1 div:nth-child(2) {
-  float: left;
-  width: 40px;
-  height: 20px;
-  padding-top: 3px;
-  text-align: center;
-  background: #fd1f0f;
-  font-size: 10px;
-  font-weight: 300;
-  color: #fff;
-  border: 1px solid rgb(124, 80, 80);
-  box-shadow: #fd1f0f 0px 0px 10px;
-}
-.localF1 {
-  position: absolute;
-  width: 62px;
-}
-.localF1 div:nth-child(1) {
-  float: left;
-  width: 17px;
-  height: 19px;
-  padding: 2px;
-  background: #a9a9e6;
-  font-size: 12px;
-  font-weight: 100;
-  color: #fff;
-  border: 1px solid #000;
-  box-shadow: #a9a9e6 0px 0px 10px;
-}
-.localF1 div:nth-child(2) {
-  float: left;
-  width: 35px;
-  height: 20px;
-  padding-top: 3px;
-  text-align: center;
-  background: #16f179;
-  font-size: 10px;
-  font-weight: 300;
-  color: #fff;
-  border: 1px solid rgb(118, 153, 108);
-  box-shadow: #16f179 0px 0px 10px;
-}
-
-.imgF2 {
-  top: 80%;
-  right: 62%;
-  position: absolute;
-  width: 20px;
-  height: 4px;
-  background: #f80404;
-  border: 1px solid rgb(182, 85, 85);
-  box-shadow: #f80404 0px 0px 10px;
-}
-.imgF1 {
-  top: 12.5%;
-  right: 53%;
-  position: absolute;
-  height: 18px;
-  width: 4px;
-  background: #f80404;
-  border: 1px solid rgb(182, 85, 85);
-  box-shadow: #f80404 0px 0px 10px;
 }
 </style>

Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 232 - 109
pages/home/detail/windrectAnimate/windrectAnimate.vue


Některé soubory nejsou zobrazeny, neboť je v těchto rozdílových datech změněno mnoho souborů