diff --git a/src/assets/img/logo.png b/src/assets/img/logo.png
new file mode 100644
index 0000000..0b3bc23
Binary files /dev/null and b/src/assets/img/logo.png differ
diff --git a/src/assets/img/logo1.png b/src/assets/img/logo1.png
new file mode 100644
index 0000000..1c86c64
Binary files /dev/null and b/src/assets/img/logo1.png differ
diff --git a/src/components/CommonFooter.vue b/src/components/CommonFooter.vue
index d216e61..4b0ab6e 100644
--- a/src/components/CommonFooter.vue
+++ b/src/components/CommonFooter.vue
@@ -2,18 +2,63 @@
   <!-- colto-section -->
   <footer class="footer mt-5">
     <div class="footer-upper-section">
-      <div class="container">
-        <div class="row">
-          <div class="col-lg-2 col-md-3 mb-4">
+      <div class="item_left">
+        <div class="logo">
+          <img src="../assets/img/logo1.png" alt="logo" style="width:208px;height:68px" />
+          <span>{{$t('common.footerTips1')}}</span>
+        </div>
+        <p class="foot_p">{{$t('common.footerTips2',{name:appConfig.name})}}</p>
+        <p class="foot_p">{{$t('common.footerTips3')}}</p>
+      </div>
+      <div class="item_right">
+        <div class="item">
+          <p class="item_p">{{ $t("common.service") }}</p>
+          <p class="foot_p" >
+            <router-link :to="service[0].url">{{ service[0].label }}</router-link>
+            &nbsp
+            <router-link :to="service[1].url">{{ service[1].label }}</router-link>
+          </p>
+          <p class="foot_p">
+            <router-link :to="service[2].url">{{ service[2].label }}</router-link>
+            &nbsp
+            <router-link :to="service[3].url">{{ service[3].label }}</router-link>
+          </p>
+        </div>
+
+        <div class="item item1">
+          <p class="item_p">{{ $t("common.college") }}</p>
+          <p class="foot_p" >
+            <router-link :to="college[0].url">{{ college[0].label }}</router-link>&nbsp
+            <router-link :to="college[1].url">{{ college[1].label }}</router-link>
+          </p>
+          <p class="foot_p">
+            <router-link :to="college[2].url">{{ college[2].label }}</router-link>&nbsp
+            <router-link :to="college[3].url">{{ college[3].label }}</router-link>
+          </p>
+        </div>
+
+        <div class="item item2">
+          <p class="item_p">{{ $t("common.contactUs") }}</p>
+          <p class="foot_p">
+            {{ $t("common.email") }}:
+          </p>
+          <p class="foot_p">
+            {{email}}
+          </p>
+        </div>
+      </div>
+      <!-- <div class="container">
+        <div class="row"> -->
+          <!-- <div class="col-lg-2 col-md-3 mb-4">
             <div class="footer-logo">
               <a href="#">
-                <!-- <img :src="logo.imgurl" alt="img" class="img-responsive" /> -->
+                <img :src="logo.imgurl" alt="img" class="img-responsive" />
                 <img :src="appConfig.foot_logo" alt="logo" />
               </a>
             </div>
-          </div>
+          </div> -->
           <!-- 服务列表 -->
-          <div class="col-lg-1 col-md-3 mb-4">
+          <!-- <div class="col-lg-1 col-md-3 mb-4">
             <div class="footer-info-list">
               <h4>{{ $t("common.service") }}</h4>
               <ul>
@@ -22,9 +67,9 @@
                 </li>
               </ul>
             </div>
-          </div>
+          </div> -->
           <!-- 学院列表 -->
-          <div class="col-lg-1 col-md-3 mb-4">
+          <!-- <div class="col-lg-1 col-md-3 mb-4">
             <div class="footer-info-list">
               <h4>{{ $t("common.college") }}</h4>
               <ul>
@@ -33,10 +78,10 @@
                 </li>
               </ul>
             </div>
-          </div>
+          </div> -->
 
           <!-- 联系我们 -->
-          <div class="col-lg-2 col-md-6">
+          <!-- <div class="col-lg-2 col-md-6">
             <div class="footer-info-list">
               <h4>{{$t('common.contactUs')}}</h4>
               <ul class="contact-info">
@@ -45,7 +90,7 @@
                   <span>{{email}}</span>
                 </li>
                 <li>
-                  <!-- Phone: <span>{{contactinfo.mobile}}</span> -->
+                  Phone: <span>{{contactinfo.mobile}}</span>
                 </li>
               </ul>
               <ul class="social-style-two">
@@ -76,8 +121,8 @@
                 </li>
               </ul>
             </div>
-          </div>
-          <div class="col-lg-4 col-md-6 border-left">
+          </div> -->
+          <!-- <div class="col-lg-4 col-md-6 border-left">
             <div class="pl-2 ">
               <div class="mb-2">
                 {{$t('common.footerTips1')}}
@@ -86,9 +131,9 @@
               <div class="mb-2">{{$t('common.footerTips3')}}</div>
               
             </div>
-          </div>
-        </div>
-      </div>
+          </div> -->
+        <!-- </div> -->
+      <!-- </div> -->
     </div>
     <div class="footer-bottom">
       <!-- 版权信息 -->
@@ -161,5 +206,57 @@ export default {
 };
 </script>
 
-<style>
+<style scoped lang="scss">
+  .footer-upper-section{
+    padding: 0;
+    display: flex;
+    align-items: center;
+    height: 324px;
+    margin-left: 233px;
+
+    .item_left{
+      width: 504px;
+      margin-right: 291px;
+      .logo{
+        display: flex;
+        align-items: center;
+        color: white;
+        justify-content: space-between;
+        width: 100%;
+        font-size: 16px;
+        margin-bottom: 17px;
+      }
+    }
+
+    .item_right{
+      display: flex;
+      height: 99px;
+
+      .item{
+        min-width: 200px;
+        border-right: 1px solid #303D4B;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .item_p{
+          font-size: 16px;
+        }
+      }
+      .item1{
+        text-align: center;
+      }
+      .item2{
+        padding-left: 64px;
+      }
+      .item:last-child{
+        border: none;
+      }
+    }
+
+  }
+  .foot_p{
+    color: #797979;
+    font-size: 14px;
+    margin: 0;
+  }
 </style>
diff --git a/src/components/CommonHeader.vue b/src/components/CommonHeader.vue
index 15566b8..049c4c6 100644
--- a/src/components/CommonHeader.vue
+++ b/src/components/CommonHeader.vue
@@ -2,8 +2,8 @@
     <header id="common-header" :class="[`light-bb`, hook]">
         <nav class="navbar navbar-expand-lg">
             <a class="navbar-brand" href="#/">
-                <img :src="appConfig.head_logo" alt="logo" />
-                <!-- <img src="../assets/img/logo-light.png" alt="logo" /> -->
+                <!-- <img :src="appConfig.head_logo" alt="logo" /> -->
+                <img src="../assets/img/logo.png" alt="logo" style="width:102px;height:30px"/>
                 <!-- <span class="logo-text">
                 AMATAK
         </span>-->
@@ -25,9 +25,9 @@
                         <router-link class="nav-link" :to="exchange.url">{{ exchange.label }}</router-link>
                     </li>
 
-                    <li class="nav-item" >
+                    <!-- <li class="nav-item" >
                         <router-link class="nav-link" :to="option.url">{{ option.label }}</router-link>
-                    </li>
+                    </li> -->
 
                     <li class="nav-item" v-if="false">
                         <router-link class="nav-link" :to="market.url">{{ market.label }}</router-link>
@@ -35,16 +35,16 @@
                     <li class="nav-item" >
                         <router-link class="nav-link" :to="contract.url">{{ contract.label }}</router-link>
                     </li>
-                    <li class="nav-item">
+                    <!-- <li class="nav-item">
                         <router-link class="nav-link" :to="purchase.url">{{ purchase.label }}</router-link>
                     </li>
                     <li class="nav-item">
                         <a href="/newProduct" class="nav-link" target="_blank">{{ $t('common.newzone') }}</a>
-                    </li>
+                    </li> -->
 
-                    <li class="nav-item">
+                    <!-- <li class="nav-item">
                         <router-link class="nav-link" :to="application.url">{{ application.label }}</router-link>
-                    </li>
+                    </li> -->
                     <li class="nav-item">
                         <router-link class="nav-link" :to="college.url">{{college.label}}</router-link>
                     </li>
@@ -75,7 +75,7 @@
           </li>-->
                 </ul>
                 <ul class="navbar-nav">
-                    <li class="nav-item header-custom-icon">
+                    <!-- <li class="nav-item header-custom-icon">
                     <a class="nav-link" href="#" id="clickFullscreen">
                         <i class="icon ion-md-expand"></i>
                     </a>
@@ -84,7 +84,7 @@
                     <a class="nav-link sight-sense" href="javascript:changeSightSense()">
                         夜晚模式
                     </a>
-                    </li>
+                    </li> -->
 
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ nativeLang }}</a>
@@ -148,8 +148,8 @@
                         </li>
                     </template>
                     <template v-else>
-                        <li class="nav-item dropdown no-login">
-                            <router-link to="/sign-in" class="btn btn-primary btn-sm rounded-pill" href="#" tag="div" role="button">{{$t('common.sign_in')}}</router-link>
+                        <li class="nav-item dropdown no-login" style="width:auto">
+                            <router-link to="/sign-in" class="btn btn-primary btn-sm rounded-pill" href="#" tag="div" role="button" style="margin:0 15px">{{$t('common.sign_in')}}</router-link>
                             <router-link to="/sign-up" class="btn btn-outline-light btn-sm btn-light-shadow rounded-pill" href="#" tag="div" role="button">{{$t('common.sign_up')}}</router-link>
                         </li>
                     </template>
@@ -496,8 +496,10 @@ header {
     }
 
     .nav-bar .router-link-active {
-        color: #c99445;
-        border-bottom: 2px solid #c99445;
+        // color: #c99445;
+        color: white;
+        border-bottom: 2px solid #3553D2;
+        background-color:rgba(53, 83, 210, 0.2) ;
     }
     .dropdown {
         padding-top: 5px;
@@ -509,4 +511,9 @@ header {
     right: 10px;
     bottom: 10px;
 }
+.rounded-pill{
+    border-radius:5px !important
+
+}
+
 </style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 2397f18..be16f07 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -2,22 +2,32 @@
   <div id="dowebok" ref="dowebok">
     <div class="section">
       <div class="banner-block col-xs-8">
-        <el-carousel :interval="6000" height="490px">
+        <!-- <el-carousel :interval="6000" height="490px">
           <el-carousel-item v-for="item in pcBannerList" :key="item.id">
              <img :src="item.imgurl" width="100%" height="100%" />
           </el-carousel-item>
-        </el-carousel>
+        </el-carousel> -->
+        <img src="../../assets/img/index_banner.png" alt="" class="index_banner">
+        <div class="banner_right">
+          <p class="banner_right_p">买币上Coinbebop</p>
+          <input type="text" placeholder="输入您的邮箱" class="banner_right_input">
+          <div class="banner_right_code">
+            <input type="text" placeholder="输入您的邮箱验证码" class="banner_right_input">
+            <button>发送验证码</button>
+          </div>
+          <button class="banner_right_sign">立即注册</button>
+        </div>
       </div>
       <!-- 公告 -->
-      <div class="notice container d-flex align-items-center">
+      <!-- <div class="notice container d-flex align-items-center">
         <div class="item d-flex" @click="$router.push(`/notice/${item.id}`)" v-for="(item) in noticeList" :key="item.id">
           <div class="title text-truncate">{{item.title}}</div>
           <div class="time">{{getNoticeDate(item.created_at)}}</div>
         </div>
         <router-link to="/notice" class="text-warning">{{$t('home.more')}}</router-link>
-      </div>
+      </div> -->
       <!-- 走马灯 -->
-      <div class="marquee">
+      <!-- <div class="marquee">
         <div class="marquee-pargress d-flex">
           <ul class="marquee-list d-flex" v-for="box in 4" :key="box">
             <li
@@ -37,7 +47,7 @@
             </li>
           </ul>
         </div>
-      </div>
+      </div> -->
     </div>
 
     <div class="section markets">
@@ -48,10 +58,12 @@
               <ul class="nav nav-tabs ticker-nav" role="tablist">
                 <li class="nav-item">
                   <div class="markets__title">
-                    {{ $t("home.marketCenter") }}
+                    <!-- {{ $t("home.marketCenter") }} -->
+                    市场趋势
+                    <span class="markets__title_span">/ 24小时货币最新动态</span>
                   </div>
                 </li>
-                <li class="nav-item">
+                <!-- <li class="nav-item">
                   <a
                     class="nav-link"
                     href="javascript:void(0);"
@@ -74,7 +86,7 @@
                     href="javascript:void(0);"
                     >{{ item.coin_name }}</a
                   >
-                </li>
+                </li> -->
               </ul>
             </div>
             <div class="market-ticker-block">
@@ -157,18 +169,23 @@
                   <table class="table coin-list table-hover">
                     <thead>
                       <tr>
-                        <th></th>
-                        <th scope="col">{{ $t("home.coinType") }}</th>
-                        <th scope="col">{{ $t("home.latestPrice") }}</th>
-                        <th scope="col">
-                          {{ $t("home.upAndDown") }}
+                        <!-- <th></th> -->
+                        <!-- <th scope="col" class="table_th">{{ $t("home.coinType") }}</th> -->
+                        <th scope="col" class="table_th">币种</th>
+                        <th scope="col" class="table_th">{{ $t("home.low") }}</th>
+                        <!-- <th scope="col" class="table_th">{{ $t("home.latestPrice") }}</th> -->
+                        <th scope="col" class="table_th">
+                          <!-- {{ $t("home.upAndDown") }} -->
+                          24小时涨停
                           <span class="ti-arrow-down"></span>
                         </th>
-                        <th scope="col">{{ $t("home.heigh") }}</th>
-                        <th scope="col">{{ $t("home.low") }}</th>
-                        <th scope="col">
+                        <th scope="col" class="table_th">行情</th>
+                        <th scope="col" class="table_th">交易</th>
+                        <!-- <th scope="col" class="table_th">{{ $t("home.heigh") }}</th> -->
+                        
+                        <!-- <th scope="col" class="table_th">
                           <div class="text-center">{{ $t("home.vol") }}</div>
-                        </th>
+                        </th> -->
                       </tr>
                     </thead>
                     <tbody>
@@ -180,27 +197,29 @@
                           v-show="isShow(item.pair_name)"
                           :key="item.pair_name"
                         >
-                          <td>
+                          <!-- <td>
                             <i
                               href="javascript:void(0);"
                               @click="option(item)"
                               :class="{ active: isCoolect(item) }"
                               class="el-icon-star-on star-icon fn-22"
                             ></i>
-                          </td>
+                          </td> -->
                           <td>
-                            <router-link :to="`/exchange/${item.symbol}`">{{
-                              item.pair_name
-                            }}</router-link>
+                            <router-link :to="`/exchange/${item.symbol}`">
+                              <img :src="item.coin_icon" alt="" class="coin_icon">
+                              {{item.pair_name}}
+                            </router-link>
                           </td>
-                          <td>
+                          <!-- <td>
                             <span
                               :class="
                                 item.increase * 1 >= 0 ? 'increace' : 'decreace'
                               "
                               >{{ item.close }}</span
                             >
-                          </td>
+                          </td> -->
+                          <td>{{ item.low }}</td>
                           <td>
                             <span
                               :class="
@@ -209,9 +228,24 @@
                               >{{ item.increaseStr }}</span
                             >
                           </td>
-                          <td>{{ item.high }}</td>
-                          <td>{{ item.low }}</td>
-                          <td class="text-center">{{ item.vol }}</td>
+                          <td>
+                            <!-- <span
+                              :class="
+                                item.increase * 1 >= 0 ? 'increace' : 'decreace'
+                              "
+                              >{{ item.increaseStr }}</span
+                            > -->
+                            <img src="../../assets/img/increace.png" class="td_img" alt="" v-show="item.increase * 1 >= 0">
+                            <img src="../../assets/img/decreace.png" class="td_img" alt="" v-show="item.increase * 1 < 0">
+                          </td>
+                          <td>
+                            <router-link :to="`/exchange/${item.symbol}`">
+                              <button class="td_button">购买</button>
+                            </router-link>
+                          </td>
+                          <!-- <td>{{ item.high }}</td> -->
+                          
+                          <!-- <td class="text-center">{{ item.vol }}</td> -->
                         </tr>
                       </template>
                     </tbody>
@@ -224,107 +258,27 @@
           </div>
 
           <div class="text-center">
+            <!-- tag="button"
+              type="button" -->
             <router-link
               to="/market"
-              tag="button"
-              type="button"
+              
               class="view-more btn btn-outline-light"
             >
-              {{ $t("home.more") }}
+              <!-- {{ $t("home.more") }} -->
+              查看更多
             </router-link>
           </div>
         </div>
       </div>
     </div>
-
-    <div class="section features">
-      <!-- new-ticker-block -->
-
-      <header>
-        <h3>{{ $t("home.features") }}</h3>
-      </header>
-
-      <aside class="activity-box">
-        <div class="swiper-container">
-          <ul class="swiper-wrapper">
-            <li
-              :class="[`swiper-slide`, { zoom: item.zoom }]"
-              v-for="(item, index) in featuresList"
-              :key="index"
-            >
-              <!-- 鼠标移上去效果 -->
-              <section class="active">
-                <div>
-                  <img :src="item.thumb" width="80" />
-                </div>
-
-                <!-- 标题内容 -->
-                <h3>{{ item.title }}</h3>
-
-                <!-- 固定内容的盒子 -->
-                <section>{{ item.content }}</section>
-              </section>
-
-              <!-- 静止状态样式 -->
-              <section class="default">
-                <!--固定背景的盒子-->
-                <div>
-                  <img :src="item.picture" width="130" />
-                </div>
-                <!-- 标题内容 -->
-                <h3>{{ item.title }}</h3>
-              </section>
-            </li>
-          </ul>
-
-          <!-- Add Arrows -->
-          <!-- 
-                        <div class="swiper-button-next"></div>
-                        <div class="swiper-button-prev"></div> 
-                    -->
-          <!-- Add Pagination -->
-          <div class="swiper-pagination"></div>
-        </div>
-
-        <div class="turning">
-          <!-- Add Arrows -->
-          <a href="javascript:void 0" class="prevBtn"></a>
-          <a href="javascript:void 0" class="nextBtn"></a>
-        </div>
-      </aside>
-    </div>
-    <div class="section">
-      <!-- 多平台下载 -->
-      <div class="multi-platform" ref="platform">
-        <div class="d-flex container align-items-center">
-          <div class="left text-center d-flex align-items-center">
-            <div class="d-flex flex-column align-items-center">
-              <div class="h2">{{ $t("home.download") }}</div>
-              <div class="tip1">{{ $t("home.easy") }}</div>
-              <div class="qr-code-box">
-                <vue-qr :text="downloadLink" :margin="0" :size="200" />
-                <div class="label">
-                  <img
-                    class="scan-icon"
-                    src="../../assets/img/homescan.png"
-                    alt=""
-                  />
-                  {{ $t("home.skan") }}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="right">
-          <img
-              class=""
-              src="../../assets/img/home_bgb.png"
-              alt=""
-            />
-        </div>
-      </div>
+    <div class="banner-block col-xs-8 banner2" >
+      <p class="banner_right_p">顶级加密风控管理</p>
+      <p class="banner_right_p1">为您的财产安全保驾护航</p>
+      <button>由Coinbebop实验中心提供</button>
     </div>
 
+    
     <div class="section news">
       <!-- wallets-section -->
       <div class="lattest-news-section">
@@ -363,6 +317,62 @@
         </div>
       </div>
     </div>
+
+    <div class="banner-block col-xs-8 banner3" >
+      <p class="banner3_p">
+        <span>立刻开始货币交易/</span>
+        <span class="banner3_p_span">扫描下方二维码下载</span>
+      </p>
+      <div class="banner3_content">
+        <div class="banner3_content_item">
+          <img src="../../assets/img/homescan.png" alt="" class="banner3_content_item_code">
+          <div class="introduce">
+            <!-- <span class="glyphicon glyphicon-phone"></span> -->
+            <span>Android扫码下载</span>
+          </div>
+        </div>
+        <div class="banner3_content_item">
+          <img src="../../assets/img/homescan.png" alt="" class="banner3_content_item_code">
+          <div class="introduce">
+            <!-- <ion-icon name="phone-portrait"></ion-icon> -->
+            <span>IOS扫码下载</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="section">
+      多平台下载
+      <div class="multi-platform" ref="platform">
+        <div class="d-flex container align-items-center">
+          <div class="left text-center d-flex align-items-center">
+            <div class="d-flex flex-column align-items-center">
+              <div class="h2">{{ $t("home.download") }}</div>
+              <div class="tip1">{{ $t("home.easy") }}</div>
+              <div class="qr-code-box">
+                <vue-qr :text="downloadLink" :margin="0" :size="200" />
+                <div class="label">
+                  <img
+                    class="scan-icon"
+                    src="../../assets/img/homescan.png"
+                    alt=""
+                  />
+                  {{ $t("home.skan") }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="right">
+          <img
+              class=""
+              src="../../assets/img/home_bgb.png"
+              alt=""
+            />
+        </div>
+      </div>
+    </div> -->
+
+    
     <!-- lattest-news-section -->
     <div class="colto-section">
       <div class="container">
@@ -370,14 +380,15 @@
           class="colto-content-wrap d-flex flex-column align-items-center justify-content-center"
         >
           <div class="colto-content">
-            <div class="title">{{ $t("common.start-trade") }}</div>
+            <!-- <div class="title">{{ $t("common.start-trade") }}</div> -->
+            <div class="title">现在使用Coinbebop</div>
           </div>
           <div class="colto-btn-group" v-if="!isLogin">
-            <router-link tag="button" to="/sign-in" class="btn btn-success rounded-pill callto-btn">{{
+            <router-link tag="button" to="/sign-in" class="btn btn-success rounded-pill callto-btn container_button">{{
               $t("common.login")
             }}</router-link>
             <span>or</span>
-            <router-link tag="button" to="/sign-up" class="btn btn-primary rounded-pill callto-btn">{{
+            <router-link tag="button" to="/sign-up" class="btn btn-primary rounded-pill callto-btn container_button1">{{
               $t("common.register")
             }}</router-link>
           </div>
@@ -1077,4 +1088,188 @@ export default {
     // }
   }
 }
+.banner-block{
+  display: flex;
+  align-items: center;
+  padding-left: 136px;
+  .index_banner{
+    width: 758px;
+    height: 463px;
+  }
+  .banner_right{
+    width: 440px;
+    margin-left: 353px;
+    display: flex;
+    flex-direction: column;
+    
+    .banner_right_p{
+      color: white;
+      font-size: 48px;
+      font-weight: bold;
+      margin-bottom: 30px;
+    }
+    .banner_right_input{
+      background-color: rgba(23, 38, 54, 100);
+      color: white;
+      font-size: 15px;
+      height: 44px;
+      border: none;
+      padding-left: 10px;
+    }
+    .banner_right_code{
+      margin-top: 20px;
+      margin-bottom: 30px;
+      input{
+        width: 310px;
+
+      }
+      button{
+        width: 125px;
+        height: 44px;
+        border: none;
+        background-color: rgba(49, 65, 132, 100);
+        color: rgba(255, 255, 255, 100);
+        font-size: 15px;
+      }
+    }
+    .banner_right_sign{
+      height: 44px;
+      border: none;
+      background-color: rgba(49, 65, 132, 100);
+      color: rgba(255, 255, 255, 100);
+      width: 100%;
+      font-size: 20px;
+    }
+  }
+}
+.markets__title_span{
+  font-size: 16px;
+  color: #A1A7AE;
+  display: inline-block;
+  margin-left: 22px;
+}
+.table_th{
+  background-color: #222E3E;
+  text-align: center;
+  color: #9B9B9B;
+}
+.coin-list tbody tr{
+  background: transparent;
+  text-align: center;
+  td{
+    min-width: 150px;
+  }
+  
+}
+.td_img{
+  width: 109px;
+  height: 39px;
+}
+.td_button{
+  width: 140px;
+  height: 34px;
+  color: #2CB8FF ;
+  font-size: 14px;
+  border: 1px solid #4B5763;
+  background: transparent;
+}
+.btn-outline-light{
+  border: none;
+}
+.coin_icon{
+  width: 34px;
+  height: 34px;
+  margin-right:20px ;
+}
+.banner2{
+  background: url('../../assets/img/banner2.png') 100% 100% no-repeat;
+  padding-left: 233px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items:flex-start;
+
+  .banner_right_p{
+    color: white;
+    font-size: 48px;
+    font-weight: bold;
+    margin-bottom: 0;
+  }
+  .banner_right_p1{
+    color: #A0A7AD;
+    font-size: 36px;
+    margin-bottom: 51px;
+  }
+  button{
+    width: 398px;
+    height: 52px;
+    background: #3553D2;
+    color: white;
+    font-size: 20px;
+    border: none;
+  }
+}
+.banner3{
+  background: url('../../assets/img/banner3.png')  no-repeat;
+  background-color: #162636;
+  padding-right: 230px;
+  padding-top: 129px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  
+  .banner3_p{
+    font-size: 16px;
+    color: #9AA1A8;
+    margin-bottom: 65px;
+
+    .banner3_p_span{
+      font-size: 28px;
+      color: white;
+      font-weight: bold;
+    }
+  }
+  .banner3_content{
+    display: flex;
+    
+    .banner3_content_item{
+      display: flex;
+      flex-direction: column;
+      margin-left: 90px;
+
+      .banner3_content_item_code{
+        width: 160px;
+        height: 160px;
+        margin-bottom: 50px;
+      }
+
+      .introduce{
+        display: flex;
+        align-items: center;
+        color: white;
+        font-size: 14px;
+        width: 160px;
+        justify-content: center;
+        img{
+          width: 23px;
+          height: 23px;
+          margin-right: 9px;
+        }
+      }
+
+    }
+    .banner3_content_item:first-child{
+      margin-left: 0;
+    }
+  }
+}
+.colto-section{
+  background: #222E3E;
+}
+.container_button{
+  background: #3553D2 ;
+}
+.container_button1{
+  background: #6C7EE4  ;
+}
 </style>