diff --git a/src/home/index.scss b/src/home/index.scss
new file mode 100644
index 00000000..e806fa72
--- /dev/null
+++ b/src/home/index.scss
@@ -0,0 +1,335 @@
+.homePage {
+  background: #fff;
+  font-size: 16px;
+  // min-width: 800px;
+  // 首页多个部分公共样式
+
+  // 1行省略号
+  .ellipsis-1 {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  // 2行省略号
+  .ellipsis-2 {
+    text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  // 5行省略号
+  .ellipsis-5 {
+    text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 5;
+    line-clamp: 5;
+    -webkit-box-orient: vertical;
+  }
+
+  // 8行省略号
+  .ellipsis-8 {
+    text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 8;
+    line-clamp: 8;
+    -webkit-box-orient: vertical;
+  }
+
+  .link {
+    cursor: pointer;
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  .ant-btn-primary {
+    background-color: #2a3ee9;
+    border-color: #2a3ee9;
+    height: 3.5em;
+    box-shadow: 0px 0px 9px 2px rgba(65, 84, 241, 0.33) !important;
+    border-radius: 0.375em;
+  }
+  .homepage-btn {
+    width: 8.75em;
+    height: 3.5em;
+    font-size: 1em;
+    &:hover {
+      background-color: #4154f1;
+      border-color: #4154f1;
+    }
+    .icon-gengduoicon {
+      margin-left: 0.375em;
+      color: #ffbf2d;
+      font-size: 1em !important;
+    }
+  }
+  .text-center {
+    text-align: center;
+  }
+
+  .homepage-main {
+    width: 1200px;
+    max-width: 96%;
+    margin: -1px auto 0;
+  }
+
+  .homePage-blue-tit {
+    color: #000870;
+    font-size: 2.125em;
+    margin-bottom: 0;
+  }
+
+  .homePage-subhead {
+    font-size: 1em;
+    color: #666;
+  }
+
+  .homePage-white-tit {
+    font-size: 2.25em;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 3.125em;
+  }
+
+  .homePage-white-subhead {
+    font-size: 1em;
+    font-weight: 400;
+    color: #fff;
+    line-height: 1.6875em;
+    opacity: 0.8;
+  }
+
+  // 首页特定头部样式起
+
+  &.newHeaders {
+    // background-color: #1a2358;
+    background-color: #0037af;
+  }
+  .head-nav {
+    min-width: auto;
+  }
+  .head-nav ul#header-nav li a {
+    font-size: 1em;
+    color: #fff;
+  }
+  .head-nav ul#header-nav li:hover a,
+  .head-nav ul#header-nav li.active a {
+    color: #ffa13a;
+  }
+  .head-nav ul#header-nav li.active a::after {
+    background-color: #ffa13a;
+  }
+
+  .logoDiv img {
+    min-width: 2.8125em;
+    height: 2.8125em;
+  }
+
+  .color-home {
+    color: #fff;
+  }
+
+  .color-home:hover {
+    color: #4154f1;
+  }
+
+  .register-button {
+    height: 3em;
+    margin-left: 1.25em;
+    padding: 0 1.5625em;
+    font-size: 0.875em;
+  }
+  // 首页特定头部样式止
+}
+
+// 波浪样式起
+.waves {
+  position: relative;
+  width: 100%;
+  height: 8vh;
+  bottom: -0.5vh;
+}
+// .waves-low {
+//   height: 6vh;
+// }
+.parallax > use {
+  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
+}
+.parallax > use:nth-child(1) {
+  animation-delay: -2s;
+  animation-duration: 7s;
+}
+.parallax > use:nth-child(2) {
+  animation-delay: -3s;
+  animation-duration: 10s;
+}
+.parallax > use:nth-child(3) {
+  animation-delay: -4s;
+  animation-duration: 13s;
+}
+.parallax > use:nth-child(4) {
+  animation-delay: -5s;
+  animation-duration: 20s;
+}
+@keyframes move-forever {
+  0% {
+    transform: translate3d(-90px, 0, 0);
+  }
+  100% {
+    transform: translate3d(85px, 0, 0);
+  }
+} /*Shrinking for mobile*/
+
+@media screen and (max-width: 1000px) {
+  .newContainer .home-first-section {
+    height: auto;
+    margin-top: -5vh;
+    .website-content {
+      height: 60vh;
+    }
+    .grid-picture {
+      background-size: auto 100%;
+    }
+  }
+}
+@media screen and (max-width: 1200px) {
+  .waves {
+    height: 6vh;
+  }
+  .newContainer .home-first-section {
+    .grid-picture {
+      background-size: auto 100%;
+    }
+  }
+  .home-fifth-section .circle-wave {
+    left: 1.5vw;
+  }
+
+  .home-seventh-section {
+    .seventh-main .clients {
+      .start-icon {
+        top: 100px;
+        left: 150px;
+      }
+      .end-icon {
+        bottom: 100px;
+        right: 280px;
+      }
+    }
+  }
+  .home-footer {
+    height: 400px;
+    .arc {
+      margin: -100px -100px 0;
+      height: 200px;
+      border-radius: 50%;
+    }
+    .footer-main {
+      height: 200px;
+    }
+  }
+}
+@media screen and (min-width: 2000px) {
+  .homePage {
+    font-size: 20px;
+    &.newHeaders {
+      height: 4.375em;
+      .head-nav {
+        height: inherit;
+        ul#header-nav {
+          height: inherit;
+          li {
+            height: inherit;
+            font-size: 1em;
+            line-height: 4.375em;
+            a {
+              font-size: 1.1em;
+            }
+          }
+        }
+      }
+      .login-box {
+        font-size: 0.9375em;
+      }
+    }
+    .homepage-main {
+      width: 1600px;
+    }
+    .home-first-section {
+      .website {
+        margin-right: 7%;
+        .website-vision {
+          justify-content: flex-start;
+          span {
+            margin-right: 1.5em;
+          }
+        }
+      }
+      .play-img {
+        width: 50%;
+        height: 600px;
+        .play-circle {
+          right: 21%;
+        }
+        .play-circle-circle1,
+        .play-circle-circle2,
+        .play-circle-circle3,
+        .play-circle-circle4,
+        .play-circle-circle5 {
+          right: 26.1%;
+        }
+      }
+    }
+
+    .home-seventh-section {
+      .clients {
+        .start-icon {
+          top: 100px;
+          left: 380px;
+        }
+        .end-icon {
+          bottom: 130px;
+          right: 480px;
+        }
+      }
+    }
+    .footerbottom {
+      font-size: 16px !important;
+    }
+  }
+}
+
+@media screen and (min-width: 2800px) {
+  .homePage {
+    font-size: 24px;
+    .homepage-main {
+      width: 2000px;
+    }
+    .home-first-section {
+      .website {
+        margin-right: 14%;
+      }
+      .play-img {
+        width: 40%;
+        .play-circle {
+          right: 21%;
+        }
+        .play-circle-circle1,
+        .play-circle-circle2,
+        .play-circle-circle3,
+        .play-circle-circle4,
+        .play-circle-circle5 {
+          right: 26.1%;
+        }
+      }
+    }
+  }
+}