diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index ad54864..ba4719e 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="dowebok" ref="dowebok">
-    <div class="section">
+    <div class="section" v-if="0">
       <div class="banner-block col-xs-8">
         <!-- <el-carousel :interval="6000" height="490px" style="width: 100%">
           <el-carousel-item v-for="item in pcBannerList" :key="item.id" >
@@ -38,6 +38,106 @@
 
       <!-- 走马灯 -->
     </div>
+    <div class="section" style="width: 100%;height:600px;background-color: #0D0E12;">
+      <!-- 全球数字资产交易平台 -->
+      <div class="section-block section-block-1" v-if="!isLogin">
+        <div>
+          <h1 style="font-size: 42px;">{{ $t("home.a4") }}</h1>
+          <h2 style="margin-bottom: 20px;">{{ $t("home.a5") }}</h2>
+          <router-link :to="`/sign-up`" class="btn3">{{ $t("home.a6") }}</router-link>
+        </div>
+        <img
+              src="../../../static/images/home_bg_1.png"
+              width="590px"
+              height="491px"
+            />
+      </div>
+      <!-- 向賬戶充值 -->
+      <div class="section-block section-block-1" v-if="isLogin">
+        <div>
+          <h1>{{ $t("home.a0") }}</h1>
+          <h2 style="margin-bottom: 20px;">
+            {{ $t("home.a1") }}
+            <br />{{ $t("home.a2") }}
+          </h2>
+          <div class="btn3">{{ $t("home.a3") }}</div>
+        </div>
+        <img
+              src="../../../static/images/home_bg_1.png"
+              width="607px"
+              height="452px"
+            />
+      </div>
+    </div>
+    <!-- 市场价 -->
+    <div class="section-block">
+      <div class="col-xs-8 banner-block-2">
+        <div class="flex-item-2" v-for="item in homeList2" :key="item.pair + ''">
+          <div class="price-info d-flex">
+            <img :src="item.coin_icon" alt="">
+            <div class="symbol" style="margin: 0px 20px 0px 6px;font-weight: bold;font-size: 16px;">
+              {{ item.pair_name }}
+            </div>
+            <div class="d-flex">
+              <span :class="item.increase >= 0 ? 'c_increase' : 'c_decreace'">
+                {{ item.increaseStr }}
+              </span>
+            </div>
+          </div>
+          <div style="font-weight: bold;font-size: 20px;">{{ item.close }}</div>
+          <div style="color: #999;">{{ item.close }}</div>
+        </div>
+      </div>
+    </div>
+    <!-- futures class -->
+    <div class="section-block section-block-4">
+      <div class="d-flex justify-content-between">
+          <div class="img-box" v-for="(item, index) in articleList" :key="index">
+              <router-link class="post-link" :to="`/college/detail/${item.category_id}/${item.id}`">
+                  <img :src="item.full_cover" alt="" >
+              </router-link>
+              <!-- <div>{{ item.title }}</div> -->
+          </div>
+      </div>
+    </div>
+    <!-- 市场趋势 -->
+    <div class="section-block section-block-2">
+      <div class="d-flex justify-content-between" style="align-items: center;">
+        <h1>{{ $t("home.a8") }}</h1>
+        <!-- <span>
+          <router-link to="/exchange" style="color:#999;">{{ $t("home.a13") }}</router-link>
+          <img src="../../../static/images/icon/right.png" alt="" width="10" height="10" />
+        </span> -->
+      </div>
+      <div style="color: #999;">{{ $t("home.a7") }}</div>
+      <div class="d-flex justify-content-between mb-4">
+        <div style="width:25%;">
+          <div class="th">{{ $t("home.a9") }}</div>
+          <div class="td" v-for="(item, index) in brokenLine" :key="index">
+            <img :src="item.coin_icon" style="width:30px;height:30px;" />
+            <span>{{item.coin_name}}</span>
+          </div>
+        </div>
+        <div style="width:25%;">
+          <div class="th">{{ $t("home.a10") }}</div>
+          <div class="td" v-for="(item, index) in brokenLine" :key="index">{{item.close}}</div>
+        </div>
+        <div style="width:25%;text-align: center;">
+          <div class="th">{{ $t("home.a11") }}</div>
+          <div class="td" v-for="(item, index) in brokenLine" :key="index" 
+            :class="item.increase < 0 ? 'td c_decreace' : 'td c_increase'">{{item.increaseStr}}
+          </div>
+        </div>
+        <div style="width:25%;text-align: right;">
+          <div class="th">{{ $t("home.a12") }}</div>
+          <div class="td" v-for="(item, index) in brokenLine" :key="index">{{item.vol}}</div>
+        </div>
+      </div>
+      <!-- <div v-if="!isLogin">
+        <div style="font-weight: bold;font-size: 22px;">{{ $t("home.a14") }}</div>
+        <div class="btn3 mt-3"><router-link to="/sign-in" class="target-a">{{ $t("home.a15") }}</router-link></div>
+      </div> -->
+    </div>
     <!-- <div class="marquee">
       <div class="marquee-pargress d-flex">
         <ul class="marquee-list d-flex" v-for="box in 4" :key="box">
@@ -353,28 +453,110 @@
     <!--        </div>-->
     <!--中间显示4个图标-->
 
-    <!-- number count -->
+    <!-- number count 五百万 -->
     <div class="num-info d-flex">
       <div class="num-info-count">
-        <div class="num">5 {{ $t("common.million") }}+</div>
-        <div class="title">{{ $t("common.user") }}</div>
+        <div class="num">{{ $t("home.a13") }}</div>
+        <div class="title">{{ $t("home.a17") }}</div>
       </div>
       <div class="num-info-count">
-        <div class="num">92,115,351</div>
-        <div class="title">{{ $t("common.tradings") }}</div>
+        <div class="num">{{ $t("home.a14") }}</div>
+        <div class="title">{{ $t("home.a18") }}</div>
       </div>
-      <!-- <div class="num-info-count">
-        <div class="num">12,689,199</div>
-        <div class="title">payments in local currency</div>
-      </div> -->
       <div class="num-info-count">
-        <div class="num">8,464,594</div>
-        <div class="title">{{ $t("common.using") }}</div>
+        <div class="num">{{ $t("home.a15") }}</div>
+        <div class="title">{{ $t("home.a19") }}</div>
+      </div>
+      <div class="num-info-count">
+        <div class="num">{{ $t("home.a16") }}</div>
+        <div class="title">{{ $t("home.a20") }}</div>
       </div>
     </div>
+    <!-- build --><!-- 多终端支持 -->
+    <div class="build-box">
+      <div class="build-bottom d-flex">
+        <div class="build-left">
+          <!-- applogo -->
+          <div class="service-title">
+            <div class="build-left-text-appname"
+              style="font-size: 32px;font-weight: bold;"
+            >
+            {{ $t("home.a21") }}
+            </div>
+            <div style="font-size: 16px">
+              {{ $t("home.a22") }}
+            </div>
+          </div>
 
+          <div class="build-left-text" style="font-size: 20px;margin-top: 30px;">
+            {{ $t("home.a23") }}
+          </div>
+
+          <div class="build-left-download d-flex">
+            <!-- ios -->
+            <div class="download">
+              <img src="../../../static/images/icon/antFill-apple@2x.png" alt="" />
+              <div class="download-ios-name">{{ $t("home.a24") }}</div>
+            </div>
+            <!-- android -->
+            <div class="download">
+              <img src="../../../static/images/icon/fab fa-android@2x.png" alt="" />
+              <div class="download-android-name">{{ $t("home.a25") }}</div>
+            </div>
+
+          </div>
+          <!-- qrcode -->
+          <div class="d-flex" style="align-items: center;">
+            <div class="qrcode">
+              <!-- <img src="../../assets/img/download.png" alt="" /> -->
+            </div>
+            <div>
+              <span style="font-size: 20px;font-weight: bold;">{{ $t("home.a26") }}</span>
+              <br />
+              <span>{{ $t("home.a27") }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="build-right">
+          <div class="build-right-phone">
+            <img src="../../../static/images/a.png" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 在NVRcoin，交易安全稳定 -->
+    <div class="section-block section-block-3">
+      <h1>{{ $t("home.a28") }}</h1>
+      <div style="color: #6A6E74;margin-bottom: 30px;">{{ $t("home.a29") }}</div>
+      <div class="d-flex justify-content-between" style="flex-wrap: wrap;">
+        <div class="box box1">
+          <div>
+            <div class="txt_1">{{ $t("home.a30") }}</div>
+            <div class="txt_2">{{ $t("home.a31") }}</div>
+          </div>
+        </div>
+        <div class="box box2">
+          <div>
+            <div class="txt_1">{{ $t("home.a32") }}</div>
+            <div class="txt_2">{{ $t("home.a33") }}</div>
+          </div>
+        </div>
+        <div class="box box3">
+          <div>
+            <div class="txt_1">{{ $t("home.a34") }}</div>
+            <div class="txt_2">{{ $t("home.a35") }}</div>
+          </div>
+        </div>
+        <div class="box box4">
+          <div>
+            <div class="txt_1">{{ $t("home.a36") }}</div>
+            <div class="txt_2">{{ $t("home.a37") }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
     <!-- why you choose -->
-    <div class="lattest-news-section">
+    <div class="lattest-news-section" v-if="0">
       <div class="section_choose service">
         <!-- 标题 -->
         <div class="service-title">
@@ -526,7 +708,7 @@
     <!--        </div>-->
 
     <!-- our technology -->
-    <div class="lattest-news-section">
+    <div class="lattest-news-section" v-if="0">
       <div class="section_technology service">
         <!-- 标题 -->
         <div class="service-title">
@@ -569,7 +751,7 @@
     </div>
 
     <!-- beginner's guide -->
-    <div class="lattest-news-section">
+    <div class="lattest-news-section" v-if="0">
       <div class="beginner service">
         <!-- 标题 -->
         <div class="service-title">
@@ -702,97 +884,26 @@
         </div>
       </div>
     </div>
-    <!-- build -->
-    <div class="build-box">
-      <!-- 标题部分 -->
-      <!-- <div class="section-choose section-build" style="height: 200px">
-        <div class="section-choose-top">
-          <div style="font-size: 48px; font-weight: 700">
-            Build your crypto portfolio anywhere
-          </div>
-          <div style="font-size: 20px; margin: 5px 0">
-            A powerful cryptocurrency exchange in your pocket. Buy, sell and
-            trade crypto on the go.
-          </div>
-          <div class="section-choose-boder"></div>
-        </div>
-      </div> -->
-      <!-- 下方部分 -->
-      <div class="build-bottom d-flex">
-        <!-- phone module -->
-        <div class="build-right">
-          <div class="build-right-phone">
-            <img src="../../assets/img/phonemodule.png" alt="" />
+    <!-- 新手指引 -->
+    <div class="section-block section-block-4" style="margin-top: 50px;">
+      <h1>{{ $t("home.a38") }}</h1>
+      <div style="color: #6A6E74;margin-bottom: 30px;">{{ $t("home.a39") }}</div>
+      <div class="d-flex justify-content-between">
+          <div class="img-box-2" v-for="(item, index) in articleList" :key="index">
+              <router-link class="post-link" :to="`/college/detail/${item.category_id}/${item.id}`">
+                  <!-- <img :src="item.full_cover" alt="" > -->
+                  <div class="img"></div>
+              </router-link>
+              <!-- <div>{{ item.title }}</div> -->
           </div>
-        </div>
-        <div class="build-left">
-          <!-- applogo -->
-          <div class="service-title">
-            <div
-              class="build-left-text-appname text-start service-title-text1"
-              style="font-size: 48px"
-            >
-              YBGCOINS APP
-            </div>
-            <div class="dotfive d-flex">
-              <div class="dotblue" v-for="item in 5" :key="item"></div>
-            </div>
-          </div>
-
-          <div class="build-left-text" style="font-size: 36px">
-            {{ $t("common.Create") }}
-          </div>
-          <div
-            class="build-left-text"
-            style="font-size: 20px; margin-top: 10px;"
-          >
-            {{ $t("common.Scan") }}.
-          </div>
-
-          <div class="build-left-download d-flex">
-            <!-- android -->
-            <div class="download_box d-flex">
-              <div class="download checked d-flex">
-                
-                  <img class="download_ico" src="../../assets/img/icon/android-fill.svg" alt="" />
-                
-                <div class="download-android-name">
-                  {{ $t("common.Android") }}
-                </div>
-              </div>
-            </div>
-
-            <!-- ios -->
-            <div class="download_box d-flex">
-              <div class="download checked d-flex">
-                
-                  <img class="download_ico" src="../../assets/img/icon/apple-fill.svg" alt="" />
-                
-                <div class="download-ios-name">{{ $t("common.ios") }}</div>
-              </div>
-            </div>
-
-            <!-- qrcode -->
-          </div>
-          <!-- <div
-            class="build-left-text"
-            style="font-size: 20px; margin-top: 10px; font-weight: 400"
-          >
-          {{ $t("common.Scan") }}.
-          </div> -->
-
-          <!-- qrcode -->
-          <div class="download_qrcode d-flex">
-            <div class="qrcode">
-              <img src="../../assets/img/download.png" alt="" />
-            </div>
-            <div class="qrcode">
-              <img src="../../assets/img/download.png" alt="" />
-            </div>
-          </div>
-        </div>
       </div>
     </div>
+    <!-- 立即赚取收益 -->
+    <div class="section-block" style="padding-bottom: 100px;text-align: center;margin-top: 100px;">
+      <div style="font-size: 40px;font-weight: bold;margin-bottom: 30px;">{{ $t("home.a40") }}</div>
+      <router-link :to="`/exchange`" class="btn4" v-if="isLogin">{{ $t("home.a41") }}</router-link>
+      <router-link :to="`/sign-in`" class="btn4" v-if="!isLogin">{{ $t("home.a41") }}</router-link>
+    </div>
   </div>
 </template>
   
@@ -887,6 +998,8 @@ export default {
       bannerList: [],
       articleList: [],
       homeList: [],
+      homeList2: [],
+      brokenLine: [],
       iconList: [],
       marketList: [],
       tab: "Optional",
@@ -947,6 +1060,7 @@ export default {
           this.bannerList = res.bannerList;
 
           this.homeList = res.homeList;
+          this.homeList2 = res.homeList.splice(0,4);
           //   console.log(res.homeList);
           this.marketList = res.marketList;
           // this.calculatePath()
@@ -1053,6 +1167,8 @@ export default {
         let { data, msg, code, sub, type, status } = res;
         if (sub == "indexMarketList") {
           this.marketList = data;
+          this.brokenLine = data[0].marketInfoList.slice(0,5);
+          this.homeList2 = data[0].marketInfoList.slice(0,4);
           this.replaceOptional();
           // this.calculatePath()
         } else if (type == "ping") {
@@ -1081,9 +1197,9 @@ export default {
     },
     // 新手教程
     getArticleList() {
-      College.getArticleList(20)
+      College.getArticleList(18)
         .then((data) => {
-          this.articleList = data.splice(0, 4);
+          this.articleList = data.splice(0, 3);
           setTimeout(() => {
             this.skroll();
           }, 100);
@@ -1159,7 +1275,7 @@ export default {
   
   <style lang="scss" scoped>
 #dowebok {
-  background: rgb(18, 19, 24) !important;
+  background: #121318 !important;
   .el_carousel {
     width: 100%;
     .el_carousel_item {
@@ -1217,6 +1333,7 @@ path {
   height: 660px;
   background-size: 100% 100%;
   overflow-x: hidden;
+  background-color: transparent;
   .banner-block {
     width: 100%;
     height: 660px;
@@ -1409,17 +1526,18 @@ path {
 }
 // num count
 .num-info {
-  width: 100%;
+  width: 1200px;
   height: 150px;
-  justify-content: space-evenly;
-  margin: 60px 0;
+  justify-content: space-between;
+  margin: 50px auto;
   .num-info-count {
     .num {
       font-size: 36px;
-      color: rgba(50, 105, 235, 1);
+      font-weight: bold;
+      color: white;
     }
     .title {
-      color: white;
+      color: #999;
       font-size: 20px;
     }
   }
@@ -1571,91 +1689,75 @@ path {
   width: 100%;
   text-align: center;
   color: white;
-  padding-bottom: 100px;
+  padding: 50px 0px;
+  background: url("../../../static/images/home_build_bg1.png");
+  background-size: 100% 100%;
   .build-bottom {
-    justify-content: center;
+    width: 1200px;
+    margin: 0px auto;
+    justify-content: space-between;
+    align-items: center;
     .text-start {
       text-align: start;
     }
     .build-left {
       text-align: left;
-      margin-left: 80px;
       .service-title {
-        margin-bottom: 30px;
         .dotfive {
           margin-left: 8px;
         }
       }
-      //   .build-left-logo {
-      //     width: 366px;
-      //     height: 92px;
-      //     .build-left-logo img {
-      //       width: 100%;
-      //       height: 100%;
-      //     }
-      //   }
       .build-left-download {
         justify-content: space-between;
         align-items: center;
-        width: 551px;
-        height: 80px;
+        width: 220px;
+        height: 130px;
         font-size: 14px;
-        color: #000;
-
+        border-radius: 9999px;
         margin: 28px 0;
-        .download_box {
-          width: 210px;
-          height: 80px;
-          align-items: center;
-          justify-content: center;
-          border: 2px solid white;
-          border-radius: 9999px;
-          padding: 6px;
-          .download {
-            width: 190px;
-            height: 60px;
-            background-color: #fff;
-            font-size: 24px;
-            align-items: center;
-            justify-content: center;
-            .download_ico {
-              width: 28px;
-              height: 28px;
-              margin-right: 6px;
-              
-            }
+
+        .download {
+          width: 100px;
+          text-align: center;
+
+          font-size: 16px;
+          font-weight: 500;
+
+          img{
+            width: 48px;
+            height: 48px;
           }
         }
-
+        .download:nth-of-type(1){
+          width: 80px;
+        }
         .checked {
           border-radius: 9999px;
+          border: 1px solid rgba(187, 187, 187, 1);
           background-color: rgba(255, 255, 255, 1);
+          color: #000;
         }
       }
-      .download_qrcode {
-        width: 551px;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0 2px;
-        .qrcode {
-          width: 210px;
-          height: 210px;
-          border: 2px solid #fff;
-          background-color: #000;
-          border-radius: 20px;
-          img {
-            width: 100%;
-            height: 100%;
-          }
+      .qrcode {
+        width: 110px;
+        height: 110px;
+        padding: 10px;
+        border: 2px solid #fff;
+        background-color: #fff;
+        border-radius: 5px;
+        margin-right: 15px;
+        img {
+          width: 100%;
+          height: 100%;
         }
       }
     }
     .build-right {
-      width: 384px;
-      height: 791px;
-      .build-right img {
-        width: 100%;
-        height: 100%;
+      width: 297px;
+      height: 599px;
+      img {
+        width: 297px;
+        height: 599px;
       }
     }
   }
@@ -1954,6 +2056,262 @@ path {
   }
 }
 
+
+.banner-block-2{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 30px 0px;
+
+    .flex-item-2{
+      width: 336px;
+      height: 85px;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      .price-info{
+        align-items: center;
+        img{
+          width: 30px;
+          height: 30px;
+        }
+      }
+    }
+    .flex-item-2:nth-of-type(1),
+    .flex-item-2:nth-of-type(2),
+    .flex-item-2:nth-of-type(3){
+      border-right: 1px solid #5e5e5e;
+    }
+    .flex-item-2:nth-of-type(2),
+    .flex-item-2:nth-of-type(3){
+      padding: 0px 75px;
+      flex-shrink: 0;
+    }
+    .flex-item-2:nth-of-type(1){
+      flex-shrink: 1;
+    }
+    .flex-item-2:nth-of-type(4){
+      padding-left: 80px;
+      flex-shrink: 1;
+    }
+}
+.c_decreace {
+  color: #CF6A57;
+}
+
+.c_increase {
+  color: #4EAA97;
+}
+.section-block{
+  width: 1200px;
+  margin: 0 auto;
+
+  h1{
+    font-size: 32px;
+    font-weight: 600;
+  }
+  h2{
+    font-size: 28px;
+    font-weight: normal;
+  }
+  h3{
+    font-size: 26px;
+    font-weight: 600;
+  }
+  .btn3{
+    display: inline-block;
+    width: auto;
+    padding: 10px 20px;
+    text-align: center;
+    background: #0B0FCC;
+    border-radius: 30px;
+    min-width: 200px;
+    color: #FFF;
+
+    a{
+      color: #FFF;
+    }
+  }
+  .btn4{
+    display: inline-block;
+    width: auto;
+    padding: 10px 20px;
+    text-align: center;
+    background: #0B0FCC;
+    border-radius: 5px;
+    min-width: 200px;
+    color: #FFF;
+
+    a{
+      color: #FFF;
+    }
+  }
+}
+.section-block-1{
+  height: 600px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.section-block-2{
+  padding: 40px 0px 0px;
+  .th{
+    color:#898F9B;
+  }
+  .th, .td{
+    line-height: 50px;
+  }
+  .td span{
+    color:#898F9B;
+    margin-left: 6px;
+  }
+}
+.section-block-3{
+  margin-top: 80px;
+
+  .box{
+    border-radius: 10px;
+    box-sizing: border-box;
+  }
+  .box1{
+    width: 802px;
+    min-height: 220px;
+    padding: 18px 44px 18px 28px;
+    background-image: url("../../../static/images/1.png");
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+
+    .txt_1, .txt_2{
+      width: 450px;
+    }
+    img{
+      width: 277px;
+      height: 184px;
+    }
+  }
+  .box2{
+    width: 368px;
+    min-height: 220px;
+    padding: 26px 0px 0px 24px;
+    background-image: url("../../../static/images/2.png");
+    background-size: 100% 100%;
+    position: relative;
+
+    .txt_1{
+      width: 260px;
+    }
+    .txt_2{
+      width: 200px;
+    }
+    img{
+      width: 167px;
+      height: 167px;
+      position: absolute;
+      right: 0px;
+      bottom: 0px;
+      z-index: 1;
+    }
+  }
+  .box3{
+    width: 368px;
+    height: 260px;
+    padding: 26px 0px 0px 17px;
+    background-image: url("../../../static/images/3.png");
+    background-size: 100% 100%;
+    margin-top: 30px;
+    position: relative;
+
+    .txt_1, .txt_2{
+      width: 250px;
+    }
+    img{
+      width: 155px;
+      height: 155px;
+      position: absolute;
+      right: 0px;
+      bottom: 0px;
+      z-index: 1;
+    }
+  }
+  .box4{
+    width: 802px;
+    height: 260px;
+    padding: 30px 50px 30px 30px;
+    background-image: url("../../../static/images/4.png");
+    background-size: 100% 100%;
+    margin-top: 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: start;
+
+    .txt_1, .txt_2{
+      width: 520px;
+    }
+    img{
+      width: 225px;
+      height: 225px;
+    }
+  }
+  .txt_1{
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+  .txt_2{
+    color: #999
+  }
+  img{
+    background: #ccc;
+  }
+}
+.section-block-4{
+  
+  .label-1{
+    background: #F5F5F6;
+    padding: 10px 20px;
+    margin-right: 30px;
+    cursor: pointer;
+  }
+  .img-box{
+    width: 32%;
+    img{
+      width: 100%;
+      height: 220px;
+      background: #000;
+      border-radius: 10px;
+      margin-bottom: 0.5rem;
+    }
+  }
+  .img-box-2{
+    width: 386px;
+    
+    a, a div{
+      width: 386px;
+      height: 180px;
+    }
+  }
+  .img-box-2:nth-of-type(1) .img{
+    background-image: url("../../../static/images/7.png");
+  }
+  .img-box-2:nth-of-type(2) .img{
+    background-image: url("../../../static/images/8.png");
+  }
+  .img-box-2:nth-of-type(3) .img{
+    background-image: url("../../../static/images/9.png");
+  }
+  .de{
+      color: #fff;
+      background: #326AEB;
+  }
+  .in{
+      background: #F5F5F6;
+  }
+}
+
 .markets__title_span {
   font-size: 16px;
   color: #a1a7ae;