diff --git a/src/assets/images/edu/1.png b/src/assets/images/edu/1.png
new file mode 100644
index 0000000..abcfd6f
Binary files /dev/null and b/src/assets/images/edu/1.png differ
diff --git a/src/assets/images/edu/2.png b/src/assets/images/edu/2.png
new file mode 100644
index 0000000..b78686b
Binary files /dev/null and b/src/assets/images/edu/2.png differ
diff --git a/src/assets/images/edu/3.png b/src/assets/images/edu/3.png
new file mode 100644
index 0000000..71bd96c
Binary files /dev/null and b/src/assets/images/edu/3.png differ
diff --git a/src/assets/images/edu/4.png b/src/assets/images/edu/4.png
new file mode 100644
index 0000000..644cd87
Binary files /dev/null and b/src/assets/images/edu/4.png differ
diff --git a/src/assets/images/edu/5.png b/src/assets/images/edu/5.png
new file mode 100644
index 0000000..ed02d6d
Binary files /dev/null and b/src/assets/images/edu/5.png differ
diff --git a/src/assets/images/news/1.png b/src/assets/images/news/1.png
new file mode 100644
index 0000000..3acd1f2
Binary files /dev/null and b/src/assets/images/news/1.png differ
diff --git a/src/pages/about/index.vue b/src/pages/about/index.vue
index cc38300..4a0ffdf 100644
--- a/src/pages/about/index.vue
+++ b/src/pages/about/index.vue
@@ -2,7 +2,7 @@
   <div class="wrap">
     <img width="100%" height="480" src="@/assets/images/about/1.png" alt="">
     
-    <div class="block history">
+    <div class="block history gray">
       <div class="inner">
         <h2 style="margin-left: 57px">Our History</h2>
         <div class="texts">
@@ -114,7 +114,7 @@
       </div>
     </div>
 
-    <div class="block list-block">
+    <div class="block list-block gray">
       <div class="inner">
         <h2 class="b-title">Committees</h2>
         <p class="intro">What makes a ligh chinese bay chaser</p>
@@ -189,7 +189,6 @@ export default {
 <style lang="scss" scoped>
 @import "../../styles/page/page.scss";
 .history {
-  background: #F2F6F8;
   h2 {
     font-size: 30px;
     color: #333;
@@ -282,7 +281,6 @@ export default {
   }
 }
 .list-block {
-  background: #F2F6F8;
   .inner {
     width: 80%;
     padding: 90px 0;
diff --git a/src/pages/careers/index.vue b/src/pages/careers/index.vue
index 8b0387a..28f8f7c 100644
--- a/src/pages/careers/index.vue
+++ b/src/pages/careers/index.vue
@@ -2,17 +2,42 @@
   <div class="wrap">
     <img width="100%" height="480" src="@/assets/images/careers/1.png" alt="">
 
-    <div class="wrap">
+    <div class="block">
       <div class="inner">
         <ul class="card">
           <li>
-            
+            <h6>Research </h6>
+            <p class="text">Positions</p>
+            <div class="arrow">
+              <img src="@/assets/images/arrow-white.png" alt="">
+            </div>
+          </li>
+          <li>
+            <h6>Engineering </h6>
+            <p class="text">Positions</p>
+            <div class="arrow">
+              <img src="@/assets/images/arrow-white.png" alt="">
+            </div>
+          </li>
+          <li>
+            <h6>Management Staff </h6>
+            <p class="text">Positions</p>
+            <div class="arrow">
+              <img src="@/assets/images/arrow-white.png" alt="">
+            </div>
+          </li>
+          <li>
+            <h6>Post-doc Programs </h6>
+            <p class="text">Positions</p>
+            <div class="arrow">
+              <img src="@/assets/images/arrow-white.png" alt="">
+            </div>
           </li>
         </ul>
       </div>
     </div>
 
-    <div class="block people-block">
+    <div class="block gray">
       <div class="inner">
         <h2 class="b-title">Profiles</h2>
         <p class="intro">What makes a light chaser</p>
@@ -47,6 +72,33 @@
         </ul>
       </div>
     </div>
+
+    <ul class="shows">
+      <li>
+        <div class="left">
+          <h6>Benefits</h6>
+          <div class="sub">YOU ARE IN GOOD HANDS</div>
+          <div class="des">We offer the most competitive package to assure the welfare of our people at IAST.</div>
+          <img class="arrow" src="@/assets/images/arrow-white.png" alt="">
+        </div>
+      </li>
+      <li>
+        <div class="left">
+          <h6>Traineeships</h6>
+          <div class="sub">YOUR FUTURE STARTS HERE</div>
+          <div class="des">IASF works with research institutions, universities, and others, to provide a pathway for future scientists, engineers, and industry leaders.</div>
+          <img class="arrow" src="@/assets/images/arrow-white.png" alt="">
+        </div>
+      </li>
+      <li>
+        <div class="left">
+          <h6>Programs</h6>
+          <div class="sub">YOUR INSPIRATION HAS GREAT SUPPORTS</div>
+          <div class="des">We collect various professional and funding resources to support your dream and ideas, your job is as simple as it looks, go for it!</div>
+          <img class="arrow" src="@/assets/images/arrow-white.png" alt="">
+        </div>
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -84,8 +136,54 @@ export default {
 
 <style lang="scss" scoped>
 @import "../../styles/page/page.scss";
-.people-block {
-  background: #F2F6F8;
+.card {
+  display: flex;
+  justify-content: center;
+  li {
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 368px;
+    height: 526px;
+    margin-right: 14px;
+    color: #fff;
+    background: url(../../assets/images/careers/2.png) 0 0/100% 100% no-repeat;
+    cursor: pointer;
+    &:hover {
+      .arrow {
+        opacity: 1;
+      }
+    }
+    &:nth-child(2) {
+      background-image: url(../../assets/images/careers/3.png);
+    }
+    &:nth-child(3) {
+      background-image: url(../../assets/images/careers/4.png);
+    }
+    &:nth-child(4) {
+      background-image: url(../../assets/images/careers/5.png);
+    }
+    h6 {
+      margin-bottom: 10px;
+      font-size: 35px;
+    }
+    .text {
+      font-size: 24px;
+    }
+    .arrow {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 177px;
+      padding-top: 62px;
+      text-align: center;
+      background: #36404A;
+      opacity: 0;
+      transition: .3s;
+    }
+  }
 }
 .people {
   li {
@@ -132,4 +230,44 @@ export default {
     height: 450px;
   }
 }
+.shows {
+  li {
+    
+    margin-bottom: 40px;
+    color: #fff;
+    background: url(../../assets/images/careers/9.png) 0 0/100% 100% no-repeat;
+    &:nth-child(even) {
+      display: flex;
+      justify-content: flex-end;
+    }
+    &:nth-child(2) {
+      background-image: url(../../assets/images/careers/10.png);
+      .left {
+        background-color: rgba(47, 79, 23, .65);
+      }
+    }
+    &:nth-child(3) {
+      background-image: url(../../assets/images/careers/11.png);
+      .left {
+        background-color: rgba(91, 58, 35, .65);
+      }
+    }
+  }
+  .left {
+    width: 43.3%;
+    padding: 138px 30px 30px 103px;
+    background-color: rgba(54, 54, 54, .65);
+  }
+  h6 {
+    font-size: 46px;
+  }
+  .sub {
+    margin: 20px;
+    font-size: 36px;
+  }
+  .des {
+    margin-bottom: 40px;
+    font-size: 24px;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/edu/index.vue b/src/pages/edu/index.vue
new file mode 100644
index 0000000..2aadca4
--- /dev/null
+++ b/src/pages/edu/index.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="wrap">
+    <img width="100%" height="480" src="@/assets/images/edu/1.png" alt="">
+
+    <div class="block gray">
+      <div class="inner">
+        <h2 class="b-title">Partnership</h2>
+        <p class="intro">Together, Stronger</p>
+        <img width="100%" height="536" src="@/assets/images/edu/2.png" alt="">
+      </div>
+    </div>
+    
+    <div class="block">
+      <div class="inner">
+        <h2 class="b-title">Programs</h2>
+        <p class="intro">Our campus is Shenzhen and Beyound</p>
+        <img width="100%" height="536" src="@/assets/images/edu/2.png" alt="">
+      </div>
+    </div>
+    
+    <div class="block gray">
+      <div class="inner">
+        <h2 class="b-title">Engagement</h2>
+        <p class="intro">Serving Community</p>
+        <ul class="list">
+          <li>
+            <img class="pic" src="@/assets/images/edu/3.png" alt="">
+            <div class="texts">
+              <h6>community service</h6>
+              <p class="sub">IASF is driven to serve the Science and industry, and solve grand challenges. </p>
+              <div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area …</div>
+            </div>
+          </li>
+          <li>
+            <img class="pic" src="@/assets/images/edu/4.png" alt="">
+            <div class="texts">
+              <h6>community service</h6>
+              <p class="sub">IASF is driven to serve the Science and industry, and solve grand challenges. </p>
+              <div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area …</div>
+            </div>
+          </li>
+          <li>
+            <img class="pic" src="@/assets/images/edu/5.png" alt="">
+            <div class="texts">
+              <h6>community service</h6>
+              <p class="sub">IASF is driven to serve the Science and industry, and solve grand challenges. </p>
+              <div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area …</div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Setting from '@/setting'
+import Util from '@/libs/util'
+export default {
+  data() {
+    return {
+      id: this.$route.query.id,
+      columnId: '',
+      form: {},
+    }
+  },
+  watch: {
+    '$route'() {
+      this.id = this.$route.query.id
+      // this.getInfo()
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    // 获取文章详情
+    getInfo() {
+      this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
+        this.form = data
+        this.columnId = data.columnId
+      }).catch(err => {})
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/page/page.scss";
+.list {
+  li {
+    position: relative;
+    &:nth-child(even) {
+      text-align: right;
+      .texts {
+        left: 0;
+      }
+    }
+  }
+  .pic {
+    width: 650px;
+    height: 730px;
+  }
+  .texts {
+    position: absolute;
+    top: 120px;
+    left: 610px;
+    width: 850px;
+    height: 440px;
+    padding: 60px 30px 30px 100px;
+    background-color: #fff;
+  }
+  h6 {
+    font-size: 40px;
+    color: #3C3C3C;
+  }
+  .sub {
+    font-size: 24px;
+    color: #1C1C1C;
+    line-height: 33px;
+  }
+  .des {
+    font-size: 20px;
+    color: #3C3C3C;
+    line-height: 32px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/news/index.vue b/src/pages/news/index.vue
new file mode 100644
index 0000000..a192204
--- /dev/null
+++ b/src/pages/news/index.vue
@@ -0,0 +1,427 @@
+<template>
+  <div class="wrap">
+    <img width="100%" height="480" src="@/assets/images/news/1.png" alt="">
+
+    <ul class="tabs">
+      <li :class="{active: item.id == active}" v-for="(item, i) in tabs" :key="i" @click="tabChange(item)">{{ item.name }}</li>
+    </ul>
+
+    <div class="block">
+      <div class="inner">
+        <h2 class="b-title">Seminars & Workshops</h2>
+        <p class="intro">What makes a ligh chinese bay chaser</p>
+        <div class="banner">
+          <img width="100%" height="480" src="@/assets/images/about/5.png" alt="">
+          <div class="right">
+            <h6>IASF is driven to serve the Science and industry, and solve grand challenges through research and innovation. We are open and creative</h6>
+            <div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan. And the Guangdong-Hong Kong-Macao Greater Bay </div>
+            <p class="meta">2022-07-24 | Research</p>
+          </div>
+        </div>
+        <ul class="card">
+          <li>
+            <img class="pic" src="@/assets/images/about/9.png" alt="">
+            <div class="texts">
+              <p class="meta">2022-09-09 | Research</p>
+              <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
+              <img class="arrow" src="@/assets/images/arrow.png" alt="">
+            </div>
+          </li>
+          <li>
+            <img class="pic" src="@/assets/images/about/10.png" alt="">
+            <div class="texts">
+              <p class="meta">2022-09-09 | Research</p>
+              <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
+              <img class="arrow" src="@/assets/images/arrow.png" alt="">
+            </div>
+          </li>
+          <li>
+            <img class="pic" src="@/assets/images/about/11.png" alt="">
+            <div class="texts">
+              <p class="meta">2022-09-09 | Research</p>
+              <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
+              <img class="arrow" src="@/assets/images/arrow.png" alt="">
+            </div>
+          </li>
+        </ul>
+        <div class="more">More news ></div>
+      </div>
+    </div>
+
+    <div class="block gray">
+      <div class="inner lg">
+        <h2 class="b-title">Seminars & Workshops</h2>
+        <p class="intro">What makes a ligh chinese bay chaser</p>
+        <div class="shop-shows">
+          <div class="left">
+            <img width="100%" height="400" src="@/assets/images/about/5.png" alt="">
+            <div class="texts">
+              <h6>2022 New Year Messag President Sun Dongbai….</h6>
+              <div class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</div>
+            </div>
+          </div>
+          <div class="right">
+            <ul class="show-card">
+              <li>
+                <img class="pic" src="@/assets/images/about/9.png" alt="">
+                <div class="des">Comprises the installation and nanostructuri</div>
+              </li>
+              <li>
+                <img class="pic" src="@/assets/images/about/10.png" alt="">
+                <div class="des">Prof. Stephan V. Roth's research</div>
+              </li>
+            </ul>
+            <ul class="card-list">
+              <li>
+                <img class="pic" src="@/assets/images/about/9.png" alt="">
+                <div class="texts">
+                  <h6>Hold doctorates or the highest degree in their field</h6>
+                  <div class="des">Characterization in Fibre and Polymer Technology, KTH Royal Institute of Technology.Characteriza Royal Institute of technology.…</div>
+                </div>
+              </li>
+              <li>
+                <img class="pic" src="@/assets/images/about/10.png" alt="">
+                <div class="texts">
+                  <h6>This 2019 image depicted a Centers for Disease</h6>
+                  <div class="des">laboratory technician, dressed in personal protective equipment (PPE), in thelaboratory technician, dressed in personal in the…</div>
+                </div>
+              </li>
+              <li>
+                <img class="pic" src="@/assets/images/about/11.png" alt="">
+                <div class="texts">
+                  <h6>Browse premium related images on iStock</h6>
+                  <div class="des">which would undergo analysis, here, in this laboratory environment.which would undergo analysis, here, in this laboratory environment.…</div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="block conference">
+      <div class="inner lg">
+        <h2 class="b-title">Conference</h2>
+        <p class="intro">What makes a ligh chinese bay chaser</p>
+        <div class="shows">
+          <div class="left">
+            <img width="100%" height="558" src="@/assets/images/about/5.png" alt="">
+            <div class="texts">
+              <div class="meta">
+                <p class="date">09</p>
+                <p class="year">2022-03</p>
+              </div>
+              <div>
+                <h6>Browse premium related images on iStock</h6>
+                <div class="des">which would undergo analysis, here, in this laboratory environment.which would undergo analysis, here, in this laboratory environment.…</div>
+              </div>
+            </div>
+          </div>
+          <ul class="card-list">
+            <li>
+              <img class="pic" src="@/assets/images/about/9.png" alt="">
+              <div class="texts">
+                <h6>Professional technical Free electron laser device</h6>
+                <p class="text">
+                  <img class="icon" src="@/assets/images/address.png" alt="">
+                  Jiahang Shao
+                </p>
+                <p class="text">
+                  <img class="icon" src="@/assets/images/address.png" alt="">
+                  Time: 2022.8.13  14:30
+                </p>
+                <p class="text">
+                  <img class="icon" src="@/assets/images/address.png" alt="">
+                  Address: Big conference room on the fourth floor of headquarters
+                </p>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Setting from '@/setting'
+import Util from '@/libs/util'
+export default {
+  data() {
+    return {
+      id: this.$route.query.id,
+      active: 1,
+      tabs: [
+        {
+          id: 1,
+          name: 'General news'
+        },
+        {
+          id: 2,
+          name: 'Research news'
+        },
+        {
+          id: 3,
+          name: 'Journal covers'
+        },
+      ]
+    }
+  },
+  watch: {
+    '$route'() {
+      this.id = this.$route.query.id
+      // this.getInfo()
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    // tab回调
+    tabChange(item) {
+      this.active = item.id
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/page/page.scss";
+.tabs {
+  display: flex;
+  justify-content: center;
+  box-shadow: 0px 2px 14px 0px rgba(167,167,167,0.26);
+  li {
+    padding: 25px 19px;
+    margin: 0 10px;
+    font-size: 22px;
+    color: #333;
+    border-bottom: 4px solid transparent;
+    text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
+    cursor: pointer;
+    &.active {
+      color: #1583FF;
+      border-bottom-color: #1583FF;
+    }
+  }
+}
+.banner {
+  display: flex;
+  .pic {
+    width: 700px;
+    height: 380px;
+  }
+  .right {
+    padding: 50px 50px 30px;
+    background: #1583FF;
+    color: #fff;
+  }
+  h6 {
+    font-size: 24px;
+  }
+  .des {
+    margin: 30px 0;
+    font-size: 16px;
+    line-height: 24px;
+  }
+  .meta {
+    font-size: 16px;
+  }
+}
+.card {
+  display: flex;
+  margin-top: 40px;
+  li {
+    width: 448px;
+    margin-right: 28px;
+    box-shadow: 0px 0px 20px 0px rgba(176,176,176,0.21);
+    border-radius: 6px;
+    cursor: pointer;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  .pic {
+    width: 100%;
+    height: 240px;
+  }
+  .texts {
+    padding: 40px 30px;
+  }
+  .meta {
+    font-size: 16px;
+    color: #666;
+  }
+  .des {
+    margin: 10px 0;
+    font-size: 20px;
+    color: #333;
+    line-height: 28px;
+  }
+  .arrow {
+    width: 36px;
+  }
+}
+.more {
+  width: 374px;
+  margin: 58px auto 0;
+  line-height: 64px;
+  font-size: 30px;
+  text-align: center;
+  color: #1583FF;
+  border-radius: 35px;
+  border: 2px solid #2B6CEF;
+}
+.shop-shows {
+  display: flex;
+  .left {
+    width: 660px;
+    margin-right: 20px;
+    background-color: #fff;
+    .texts {
+      padding: 40px 30px;
+    }
+    h6 {
+      font-size: 24px;
+      color: #272727;
+    }
+    .des {
+      margin-top: 10px;
+      font-size: 16px;
+      color: #666;
+      line-height: 30px;
+    }
+  }
+  .right {
+    width: 824px;
+  }
+  .show-card {
+    display: flex;
+    margin-bottom: 20px;
+    li {
+      position: relative;
+      &:first-child {
+        margin-right: 22px;
+      }
+    }
+    .pic {
+      width: 401px;
+      height: 197px;
+    }
+    .des {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      font-size: 16px;
+      color: #fff;
+      line-height: 48px;
+      text-align: center;
+      background: rgba(0,0,0,0.49);
+      box-shadow: 0px 0px 30px 0px rgba(48,48,48,0.08);
+    }
+  }
+  .card-list {
+    padding: 34px 26px;
+    background-color: #fff;
+    li {
+      display: inline-flex;
+      padding-right: 124px;
+      margin-bottom: 38px;
+      background: url(../../assets/images/arrow.png) (right 20px)/(23px 23px) no-repeat;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    .pic {
+      width: 116px;
+      height: 85px;
+      margin-right: 28px;
+    }
+    h6 {
+      font-size: 20px;
+      color: #272727;
+    }
+    .des {
+      margin-top: 15px;
+      font-size: 14px;
+      color: #666;
+      line-height: 24px;
+    }
+  }
+}
+.conference {
+  background: #072947;
+  .b-title, .intro {
+    color: #fff;
+  }
+  .shows {
+    display: flex;
+  }
+  .left {
+    width: 688px;
+    margin-right: 20px;
+    background-color: #fff;
+    .texts {
+      display: flex;
+      padding: 40px 30px;
+    }
+    .meta {
+      padding: 10px 23px 10px 0;
+      margin-right: 32px;
+      text-align: center;
+      border-right: 1px solid #ddd;
+    }
+    .date {
+      font-size: 45px;
+      font-family: DINAlternate-Bold, DINAlternate;
+      font-weight: bold;
+      color: #1F1F1F;
+      line-height: 52px;
+    }
+    .year {
+      font-size: 16px;
+      white-space: nowrap;
+      color: #666;
+    }
+    h6 {
+      font-size: 20px;
+      color: #272727;
+    }
+    .des {
+      margin-top: 10px;
+      font-size: 14px;
+      color: #666;
+      line-height: 24px;
+    }
+  }
+  .card-list {
+    width: 784px;
+    li {
+      display: flex;
+      padding: 24px;
+      margin-bottom: 13px;
+      background-color: #fff;
+    }
+    .pic {
+      width: 188px;
+      height: 130px;
+      margin-right: 28px;
+    }
+    h6 {
+      margin-bottom: 10px;
+      font-size: 20px;
+      color: #333;
+    }
+    .text {
+      display: flex;
+      align-items: center;
+      margin: 10px 0;
+    }
+    .icon {
+      width: 15px;
+      margin-right: 12px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/router/modules/edu.js b/src/router/modules/edu.js
new file mode 100644
index 0000000..beaea3e
--- /dev/null
+++ b/src/router/modules/edu.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'edu'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/news.js b/src/router/modules/news.js
new file mode 100644
index 0000000..3571c77
--- /dev/null
+++ b/src/router/modules/news.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'news'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/styles/page/page.scss b/src/styles/page/page.scss
index 8cbe03a..d79fc41 100644
--- a/src/styles/page/page.scss
+++ b/src/styles/page/page.scss
@@ -29,4 +29,10 @@
 .inner {
   width: 1400px;
   margin: 0 auto;
+  &.lg {
+    width: 1505px;
+  }
+}
+.gray {
+  background-color: #F2F6F8;
 }
\ No newline at end of file