diff --git a/about.html b/about.html
index 3aebe5e..74770e7 100644
--- a/about.html
+++ b/about.html
@@ -19,7 +19,7 @@
 </head>
 
 <body>
-    <div class="header">
+    <div class="header style1">
         <div class="main main-wrap">
             <div class="logo">
                 <a href="" target="_blank">
diff --git a/business.html b/business.html
index af00a1e..552b52e 100644
--- a/business.html
+++ b/business.html
@@ -19,7 +19,7 @@
 </head>
 
 <body>
-    <div class="header">
+    <div class="header style1">
         <div class="main main-wrap">
             <div class="logo">
                 <a href="" target="_blank">
@@ -45,12 +45,12 @@
         </div>
         <div class="section main-wrap business-nav">
             <ul class="nav">
-                <li><a class="active" href="">综合企业服务赋能</a></li>
-                <li><a href="">个人债务管理咨询</a></li>
-                <li><a href="">融资咨询</a></li>
+                <li><a class="active" href="#g1">综合企业服务赋能</a></li>
+                <li><a href="#g2">个人债务管理咨询</a></li>
+                <li><a href="#g3">融资咨询</a></li>
             </ul>
         </div>
-        <div class="section main-wrap business-cont s1">
+        <div class="section main-wrap business-cont s1" id="g1">
             <div class="title">
                 <h2>综合企业服务赋能</h2>
             </div>
@@ -117,7 +117,7 @@
                 </ul>
             </div>
         </div>
-        <div class="section main-wrap business-cont s2">
+        <div class="section main-wrap business-cont s2" id="g2">
             <div class="title">
                 <h2>债务管理咨询</h2>
             </div>
@@ -215,7 +215,7 @@
                 </div>
             </div>
         </div>
-        <div class="section full-wrap business-cont s3">
+        <div class="section full-wrap business-cont s3" id="g3">
             <div class="title">
                 <h2>融资咨询</h2>
             </div>
diff --git a/contact.html b/contact.html
index 150b64d..e3b96b7 100644
--- a/contact.html
+++ b/contact.html
@@ -19,7 +19,7 @@
 </head>
 
 <body>
-    <div class="header">
+    <div class="header style1">
         <div class="main main-wrap">
             <div class="logo">
                 <a href="" target="_blank">
diff --git a/css/reset.css b/css/reset.css
index 5c46da8..dc2aa43 100644
--- a/css/reset.css
+++ b/css/reset.css
@@ -1,15 +1,12 @@
 * {
     padding: 0;
     margin: 0;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color:rgba(0,0,0,0);
 }
-
 ul {
     list-style: none;
 }
-
 a {
     color: unset;
     text-decoration: none;
-    outline: none;
 }
\ No newline at end of file
diff --git a/css/responsive.css b/css/responsive.css
index 08b713e..56fb511 100644
--- a/css/responsive.css
+++ b/css/responsive.css
@@ -9,6 +9,26 @@
     width: 92%;
     max-width: 500px;
   }
+  .header.style1 .menu .link {
+    color: #FFFFFF;
+  }
+  .header.style1 .menu .link.active {
+    color: #FFFFFF;
+    font-weight: bold;
+  }
+  .header.style1 .menu .link:hover {
+    color: #FFFFFF;
+  }
+  .header.style2 .menu .link {
+    color: #FFFFFF;
+  }
+  .header.style2 .menu .link.active {
+    color: #FFFFFF;
+    font-weight: bold;
+  }
+  .header.style2 .menu .link:hover {
+    color: #FFFFFF;
+  }
   .header .logo {
     font-size: 0;
   }
@@ -19,7 +39,7 @@
     height: 45px;
   }
   .header .menu .menu-group {
-    z-index: 20;
+    z-index: 10;
     display: none;
     position: fixed;
     left: 0;
@@ -28,16 +48,18 @@
     animation-duration: 0.2s;
   }
   .header .menu .menu-mask {
-    z-index: 10;
+    z-index: 5;
     display: none;
     position: fixed;
-    top: 45px;
+    top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     animation-duration: 0.35s;
   }
   .header .menu .menu-btn {
+    z-index: 10;
+    position: relative;
     font-size: 0;
   }
   .header .menu .menu-btn .btn-img {
@@ -54,10 +76,6 @@
     border-bottom: 2px solid #D02121;
     padding: 15px 0;
   }
-  .header .menu .item .link.active,
-  .header .menu .item .link:hover {
-    font-weight: normal;
-  }
   .header .menu .item:first-child {
     padding-top: 25px;
   }
@@ -122,7 +140,7 @@
     height: auto;
     margin-top: 10px;
     padding: 20px;
-    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
+    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
   }
   .section.idx-culture .title {
     margin-bottom: 14px;
@@ -206,7 +224,7 @@
   .section.contact-map .cm-desc {
     width: 339px;
     border: 1px solid #DDDDDD;
-    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
+    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
   }
   .section.contact-map .cm-desc .logo {
     width: 127px;
@@ -353,8 +371,8 @@
     color: #666666;
     font-size: 14px;
     line-height: 30px;
-    background-color: #F3F3F3;
-    padding: 2px 5px;
+    padding: 2px 12px;
+    box-sizing: border-box;
   }
   .section.business-cont .title {
     font-size: 0px;
@@ -439,7 +457,7 @@
     width: 100%;
     height: auto;
     padding: 20px 0;
-    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
+    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
   }
   .s-content.g2 li {
@@ -450,7 +468,7 @@
     width: 100%;
     height: auto;
     border: 1px solid #DDDDDD;
-    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
+    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
   }
   .s-content.g2 .icon-cont {
     height: auto;
@@ -486,7 +504,7 @@
     width: 100%;
     height: auto;
     border: 1px solid #DDDDDD;
-    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
+    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
   }
   .s-content.g3 .desc,
   .s-content.g4 .desc {
diff --git a/css/responsive.less b/css/responsive.less
index d9a8b7e..a4ef4d4 100644
--- a/css/responsive.less
+++ b/css/responsive.less
@@ -19,6 +19,40 @@
         max-width: 500px;
     }
 
+    .header.style1 {
+        .menu {
+            .link {
+                color: #FFFFFF;
+            }
+
+            .link.active {
+                color: #FFFFFF;
+                font-weight: bold;
+            }
+
+            .link:hover {
+                color: #FFFFFF;
+            }
+        }
+    }
+
+    .header.style2 {
+        .menu {
+            .link {
+                color: #FFFFFF;
+            }
+
+            .link.active {
+                color: #FFFFFF;
+                font-weight: bold;
+            }
+
+            .link:hover {
+                color: #FFFFFF;
+            }
+        }
+    }
+
     .header {
         .logo {
             font-size: 0;
@@ -34,7 +68,7 @@
 
         .menu {
             .menu-group {
-                z-index: 20;
+                z-index: 10;
                 display: none;
                 position: fixed;
                 left: 0;
@@ -44,18 +78,19 @@
             }
 
             .menu-mask {
-                z-index: 10;
+                z-index: 5;
                 display: none;
                 position: fixed;
-                top: 45px;
+                top: 0;
                 left: 0;
                 right: 0;
                 bottom: 0;
                 animation-duration: 0.35s;
-                // background-image: url('../images/transparent-bg.png');
             }
 
             .menu-btn {
+                z-index: 10;
+                position: relative;
                 font-size: 0;
 
                 .btn-img {
@@ -74,11 +109,6 @@
                     border-bottom: 2px solid #D02121;
                     padding: 15px 0;
                 }
-
-                .link.active,
-                .link:hover {
-                    font-weight: normal;
-                }
             }
 
             .item:first-child {
@@ -172,7 +202,7 @@
             height: auto;
             margin-top: 10px;
             padding: 20px;
-            box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.35);
+            box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
         }
 
         .title {
@@ -279,7 +309,7 @@
         .cm-desc {
             width: 339px;
             border: 1px solid #DDDDDD;
-            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
+            box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
 
             .logo {
                 width: 127px;
@@ -390,6 +420,7 @@
 
             .text-con {
                 padding: 9px 10px;
+
                 p {
                     height: 16px;
                     font-size: @mt;
@@ -473,8 +504,8 @@
                 color: #666666;
                 font-size: @st;
                 line-height: 30px;
-                background-color: #F3F3F3;
-                padding: 2px 5px;
+                padding: 2px 12px;
+                box-sizing: border-box;
             }
         }
     }
@@ -584,7 +615,7 @@
             width: 100%;
             height: auto;
             padding: 20px 0;
-            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
+            box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
             border-radius: 10px;
         }
     }
@@ -599,7 +630,7 @@
             width: 100%;
             height: auto;
             border: 1px solid #DDDDDD;
-            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
+            box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
         }
 
         .icon-cont {
@@ -642,7 +673,7 @@
             width: 100%;
             height: auto;
             border: 1px solid #DDDDDD;
-            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
+            box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
         }
 
         .desc {
diff --git a/css/style.css b/css/style.css
index 5e13c62..3b17358 100644
--- a/css/style.css
+++ b/css/style.css
@@ -57,6 +57,34 @@
   margin-left: auto;
   margin-right: auto;
 }
+.header.style1 {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
+  background-color: unset;
+}
+.header.style1 .menu .link {
+  color: #FFFFFF;
+}
+.header.style1 .menu .link.active {
+  color: #FFFFFF;
+  font-weight: bold;
+}
+.header.style1 .menu .link:hover {
+  color: #E72A3A;
+}
+.header.style2 {
+  background-color: #FFFFFF;
+  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
+}
+.header.style2 .menu .link {
+  color: #666666;
+}
+.header.style2 .menu .link.active {
+  color: #E72A3A;
+  font-weight: bold;
+}
+.header.style2 .menu .link:hover {
+  color: #E72A3A;
+}
 .header {
   z-index: 20;
   position: fixed;
@@ -64,9 +92,10 @@
   left: 0;
   right: 0;
   width: 100%;
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
   animation-name: headerFadeInDown;
   animation-duration: 0.8s;
+  transition: all 0.35s;
+  box-sizing: border-box;
 }
 .header .main {
   height: 90px;
@@ -85,11 +114,7 @@
 }
 .header .menu .link {
   font-size: 18px;
-  color: #FFFFFF;
-}
-.header .menu .link.active,
-.header .menu .link:hover {
-  font-weight: bold;
+  transition: all 0.35s;
 }
 .footer {
   width: 100%;
@@ -238,7 +263,7 @@
   height: 156px;
   background: rgba(248, 248, 248, 0);
   border: 1px solid #DDDDDD;
-  box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
+  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
   border-radius: 20px;
   box-sizing: border-box;
   padding: 30px;
@@ -387,7 +412,7 @@
   width: 1045px;
   display: flex;
   border: 2px solid #DDDDDD;
-  box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
+  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
   margin: 0 auto;
 }
@@ -673,7 +698,7 @@
   height: 303px;
   background: rgba(229, 0, 32, 0);
   border: 2px solid #DDDDDD;
-  box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
+  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
   border-radius: 20px;
   display: flex;
   flex-direction: column;
@@ -722,7 +747,7 @@
   height: 349px;
   background: #FFFFFF;
   border: 2px solid #DDDDDD;
-  box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
+  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
 }
 .s-content.g2 .icon-cont {
@@ -804,7 +829,7 @@
   width: 420px;
   background: #FFFFFF;
   border: 2px solid #DDDDDD;
-  box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
+  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
 }
 .s-content.g3 .icon-cont,
diff --git a/css/style.less b/css/style.less
index 7121357..a6361e9 100644
--- a/css/style.less
+++ b/css/style.less
@@ -75,6 +75,47 @@
     margin-right: auto;
 }
 
+.header.style1 {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
+    background-color: unset;
+
+    .menu {
+        .link {
+            color: #FFFFFF;
+        }
+
+        .link.active {
+            color: #FFFFFF;
+            font-weight: bold;
+        }
+
+        .link:hover {
+            color: #E72A3A;
+        }
+    }
+}
+
+.header.style2 {
+    background-color: #FFFFFF;
+    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
+
+    .menu {
+        .link {
+            color: #666666;
+        }
+
+
+        .link.active {
+            color: #E72A3A;
+            font-weight: bold;
+        }
+
+        .link:hover {
+            color: #E72A3A;
+        }
+    }
+}
+
 .header {
     z-index: 20;
     position: fixed;
@@ -82,9 +123,10 @@
     left: 0;
     right: 0;
     width: 100%;
-    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
     animation-name: headerFadeInDown;
     animation-duration: 0.8s;
+    transition: all .35s;
+    box-sizing: border-box;
 
     .main {
         height: 90px;
@@ -110,12 +152,7 @@
 
         .link {
             font-size: 18px;
-            color: #FFFFFF;
-        }
-
-        .link.active,
-        .link:hover {
-            font-weight: bold;
+            transition: all .35s;
         }
     }
 }
@@ -306,7 +343,7 @@
         height: 156px;
         background: rgba(248, 248, 248, 0);
         border: 1px solid #DDDDDD;
-        box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
+        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
         border-radius: 20px;
         box-sizing: border-box;
         padding: 30px;
@@ -495,7 +532,7 @@
         width: 1045px;
         display: flex;
         border: 2px solid #DDDDDD;
-        box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
+        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
         box-sizing: border-box;
         margin: 0 auto;
 
@@ -860,7 +897,7 @@
         height: 303px;
         background: rgba(229, 0, 32, 0);
         border: 2px solid #DDDDDD;
-        box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
+        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
         border-radius: 20px;
         display: flex;
         flex-direction: column;
@@ -921,7 +958,7 @@
         height: 349px;
         background: #FFFFFF;
         border: 2px solid #DDDDDD;
-        box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
+        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
         box-sizing: border-box;
     }
 
@@ -1021,7 +1058,7 @@
         width: 420px;
         background: #FFFFFF;
         border: 2px solid #DDDDDD;
-        box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
+        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
         box-sizing: border-box;
     }
 
diff --git a/detail.html b/detail.html
index 4fe454e..79818d6 100644
--- a/detail.html
+++ b/detail.html
@@ -19,7 +19,7 @@
 </head>
 
 <body>
-    <div class="header">
+    <div class="header style1">
         <div class="main main-wrap">
             <div class="logo">
                 <a href="" target="_blank">
diff --git a/index.html b/index.html
index 549ea6f..e13d1e4 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
 </head>
 
 <body>
-    <div class="header">
+    <div class="header style1">
         <div class="main main-wrap">
             <div class="logo">
                 <a href="" target="_blank">
diff --git a/js/main.js b/js/main.js
index c5284c4..2bfd7a5 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,21 +1,17 @@
-
 window.Config = {
-    staticDir: ".",
+    staticDir: '.'
 };
+
 let isClose = true,
     header = $('.header'),
     heaerMenuGroup = $('.menu-group'),
     headerMask = $('.menu-mask'),
-    headerMenuBtn = $('.btn-img'),
-    headerBg = header.css('background-image');
+    headerMenuBtn = $('.btn-img');
 
 function showMenu() {
     heaerMenuGroup.show().addClass('fadeIn');
     headerMask.show().addClass('fadeIn');
     headerMenuBtn.attr('src', window.Config.staticDir + '/images/guanbi.png');
-    header.css({
-        'background-image': 'url(\'' + window.Config.staticDir + '/images/transparent-bg.png\')'
-    });
     isClose = false;
 }
 
@@ -23,30 +19,25 @@ function hideMenu() {
     heaerMenuGroup.removeClass('fadeIn').hide();
     headerMask.removeClass('fadeIn').hide();
     headerMenuBtn.attr('src', window.Config.staticDir + '/images/menu.png');
-    header.css({
-        'background-image': headerBg
-    });
     isClose = true;
 }
 
 $(function () {
-    $('.header .menu-group').load('/common/header.html');
-    $('.footer').load('/common/footer.html');
-    // if ($(window).width() > 768) {
-    //     let headerBg = header.css('background-image');
-    //     $(window).scroll(function () {
-    //         let t = $(document).scrollTop();
-    //         if (t > 430) {
-    //             header.css({
-    //                 'background-image': "url('/static/module/index/zxf/images/transparent-bg.png')"
-    //             });
-    //         } else {
-    //             header.css({
-    //                 'background-image': headerBg
-    //             });
-    //         }
-    //     });
-    // }
+    $('.header .menu-group').load('../common/header.html');
+    $('.footer').load('../common/footer.html');
+    $(window).scroll(function () {
+        let t = $(document).scrollTop(), flag;
+        if ($(window).width() > 768) {
+            flag = t > 400;
+        } else {
+            flag = t > 60;
+        }
+        if (flag) {
+            header.removeClass('style1').addClass('style2');
+        } else {
+            header.removeClass('style2').addClass('style1');
+        }
+    });
     header.on('click', '.menu-btn', function () {
         (isClose == true) ? showMenu() : hideMenu();
     });
@@ -66,4 +57,4 @@ $(function () {
     });
 
     new WOW().init();
-});
\ No newline at end of file
+});
diff --git a/story.html b/story.html
index c1ba67d..85116e5 100644
--- a/story.html
+++ b/story.html
@@ -19,7 +19,7 @@
 </head>
 
 <body>
-    <div class="header">
+    <div class="header style1">
         <div class="main main-wrap">
             <div class="logo">
                 <a href="" target="_blank">
