diff --git a/css/search.css b/css/search.css
index b1fc616..db84b3f 100644
--- a/css/search.css
+++ b/css/search.css
@@ -52,16 +52,16 @@
 .boxbox .body .left .input-box {
   width: 750px;
   height: 48px;
-  background-color: #f2f2f2;
-  border-radius: 183px;
+  background-color: #ffffff;
+  border-radius: 10px;
   padding: 0 20px;
   margin-bottom: 30px;
   position: relative;
   z-index: 10;
+  border: 2px solid #c4c7ce;
 }
 .boxbox .body .left .input-box.input-active {
-  border-radius: 183px 183px 0 0;
-  border: 2px solid #c4c7ce;
+  border-radius: 10px 10px 0 0;
   border-bottom: none;
 }
 .boxbox .body .left .input-box input {
@@ -76,6 +76,42 @@
   height: 18px;
   cursor: pointer;
 }
+.boxbox .body .left .input-box .hint-list {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  max-height: 400px;
+  top: 48px;
+  left: 0;
+  background-color: #ffffff;
+  border-radius: 0 0 10px 10px;
+  z-index: 10;
+  overflow: auto;
+  animation: hintShow 0.3s forwards;
+  border: 0px solid #c4c7ce;
+  border-top: none;
+  box-shadow: 0px 5px 5px #dfdfdf;
+}
+@keyframes hintShow {
+  0% {
+    height: 0;
+  }
+  100% {
+    border-width: 1px;
+    height: auto;
+  }
+}
+.boxbox .body .left .input-box .hint-list .item {
+  color: #333333;
+  font-size: 14px;
+  padding: 10px;
+  cursor: pointer;
+  line-height: 30px;
+  display: block;
+}
+.boxbox .body .left .input-box .hint-list .item:not(:last-of-type) {
+  border-bottom: 1px #e6e4e4 dotted;
+}
 .boxbox .body .left .total {
   font-size: 14px;
   font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
diff --git a/css/search.less b/css/search.less
index ec6bdec..6dc7c2e 100644
--- a/css/search.less
+++ b/css/search.less
@@ -54,16 +54,16 @@
             .input-box {
                 width: 750px;
                 height: 48px;
-                background-color: rgba(242, 242, 242, 1);
-                border-radius: 183px;
+                background-color: rgba(255, 255, 255, 1);
+                border-radius: 10px;
                 padding: 0 20px;
                 margin-bottom: 30px;
                 position: relative;
                 z-index: 10;
+                border: 2px solid #c4c7ce;
 
                 &.input-active {
-                    border-radius: 183px 183px 0 0;
-                    border: 2px solid #c4c7ce;
+                    border-radius: 10px 10px 0 0;
                     border-bottom: none;
                 }
 
@@ -80,6 +80,47 @@
                     height: 18px;
                     cursor: pointer;
                 }
+
+                .hint-list {
+                    position: absolute;
+                    width: 100%;
+                    height: 0;
+                    max-height: 400px;
+                    top: 48px;
+                    left: 0;
+                    background-color: rgba(255, 255, 255, 1);
+                    border-radius: 0 0 10px 10px;
+                    z-index: 10;
+                    overflow: auto;
+                    animation: hintShow 0.3s forwards;
+                    border: 0px solid #c4c7ce;
+                    border-top: none;
+                    box-shadow: 0px 5px 5px #dfdfdf;
+
+                    @keyframes hintShow {
+                        0% {
+                            height: 0;
+                        }
+
+                        100% {
+                            border-width: 1px;
+                            height: auto;
+                        }
+                    }
+
+                    .item {
+                        color: #333333;
+                        font-size: 14px;
+                        padding: 10px;
+                        cursor: pointer;
+                        line-height: 30px;
+                        display: block;
+
+                        &:not(:last-of-type) {
+                            border-bottom: 1px #e6e4e4 dotted;
+                        }
+                    }
+                }
             }
 
             .total {