diff --git a/contact.html b/contact.html
index e5e234d..e61e4d4 100644
--- a/contact.html
+++ b/contact.html
@@ -53,22 +53,6 @@
 </head>
 <body>
 
-<!--<div class="color-plate ">-->
-<!--<a class="icon"><i class="fa fa-cog fa-spin"></i></a>-->
-<!--<h2>Ruby Color</h2>-->
-<!--<div class="color-head">-->
-<!--<span class="color1"></span>-->
-<!--<span class="color2"></span>-->
-<!--<span class="color3"></span>-->
-<!--<span class="color4"></span>-->
-<!--<span class="color5"></span>-->
-<!--<span class="color6"></span>-->
-<!--<span class="color7"></span>-->
-<!--<span class="color8"></span>-->
-<!--<span class="color9"></span>-->
-<!--</div>-->
-<!--</div>-->
-
 <!-- Header Area -->
 <header id="header" class="header">
 
@@ -88,36 +72,55 @@
 
 <section id="contact" class="section contact" >
     <div class="container">
-        <div class="row">
+        <p class="row">
             <div class="example-title text-center">经典案例</div>
             <div class="example-subtitle text-center">打造创新型停车场 轻松停车</div>
             <ul class="example-wrap" id="example-wrap">
-                <li class="text-center col-md-6 col-xs-12 example-wrap-dy example-wrap-main">
-                    <div>
-                        <div>丹阳</div>
-                        <div>智慧停车</div>
-                    </div>
+                <li class="example-wrap-main example-wrap-l example-img1">
+                </li>
+                <li class="example-wrap-main example-msg">
+                    <div class="exa-msg-title">内蒙古赤峰市</div>
+                    <p>总投资不低于10亿元，分两期实施。</p>
+                    <p>平面泊位运营资源1.5万个</p>
+                    <p>新增泊位资源1万个</p>
+                    <p>社会停车场接入300+</p>
+                    <p>主城区机动车保有量18万</p>
+                    <p>用户空间30万+</p>
+                    <p>特许经营25年</p>
                 </li>
-                <li class="text-center col-md-6 col-xs-12 example-wrap-cf example-wrap-main">
-                    <div>
-                        <div>赤峰红山区</div>
-                        <div>智慧停车</div>
-                    </div>
 
+                <li class="example-wrap-main example-wrap-l example-img2">
+                </li>
+                <li class="example-wrap-main example-msg">
+                    <div class="exa-msg-title">江苏扬中市</div>
+                    <p>负责扬中市城区智慧停车系统的全额投</p>
+                    <p>资、勘察、设计、建设、运营、维护。</p>
+                    <p>覆盖路侧车位超过1万个，建设智能停车</p>
+                    <p>云服务平台，运营管理权限20年</p>
+                    <p>用户空间10万＋</p>
                 </li>
-                <li class="text-center col-md-6 col-xs-12 example-wrap-yz example-wrap-main">
-                    <div>
-                        <div>扬中</div>
-                        <div>智慧停车</div>
-                    </div>
 
+                <li class="example-wrap-main example-wrap-l example-img3">
+                </li>
+                <li class="example-wrap-main example-msg">
+                    <div class="exa-msg-title">江苏丹阳市</div>
+                    <p>总投资4200万元</p>
+                    <p>政府公共资源运营泊位1万个</p>
+                    <p>社会车场接入数量200＋</p>
+                    <p>主城区机动车保有量12万</p>
+                    <p>用户空间20万+</p>
+                    <p>特许经营15年</p>
                 </li>
-                <li class="text-center col-md-6 col-xs-12 example-wrap-empty example-wrap-main">
-                    <div>
-                        <div>双流</div>
-                        <div>智慧停车</div>
-                    </div>
 
+                <li class="  example-wrap-main example-wrap-l example-img4">
+                </li>
+                <li class=" example-wrap-main example-msg">
+                    <div class="exa-msg-title">北京西城区</div>
+                    <p>建设静态交通大数据中心、“西城区停车</p>
+                    <p>综合管理及信息服务共享平台”</p>
+                    <p>建立北京西城区停车数据标准规范体系</p>
+                    <p>实现800多个停车场，13万个停车泊位</p>
+                    <p>的数据接入。</p>
                 </li>
 
             </ul>
diff --git a/css/contact.css b/css/contact.css
index 0fd35b3..fade779 100644
--- a/css/contact.css
+++ b/css/contact.css
@@ -35,7 +35,7 @@
     font-weight:400;
     color:rgba(0,0,0,.7);
 }
-.example-wrap li{
+/*.example-wrap li{
     height: 331px;
     margin-top: 58px ;
 }
@@ -76,7 +76,7 @@
     line-height: 20px;
     font-size:20px;
     color:rgba(255,255,255,1);
-}
+}*/
 .contact-map{
     height: 811px;
     /*background: url("../images/contact-map.png") no-repeat;*/
@@ -130,3 +130,54 @@
 
 }
 
+/*新版 经典案例*/
+.example-wrap-main{
+    width: 100%;
+    height: auto;
+    /*min-width: 1200px;*/
+}
+.example-wrap li{
+    height: 232px;
+    margin-top: 58px;
+    width: 25%;
+    float: left;
+}
+.example-wrap-l{
+    /*width:336px;*/
+    width:100%;
+    height:232px;
+    border-radius:4px !important;
+}
+.example-img1{
+    background: url("../images/contact-wrap-cf.png") no-repeat center center;
+    background-size: 100% 100%;
+}
+.example-img2{
+    background: url("../images/contact-wrap-yz.png") no-repeat center center;
+    background-size: 100% 100%;
+}
+.example-img3{
+    background: url("../images/contact-wrap-dy.png") no-repeat center center;
+    background-size: 100% 100%;
+}
+.example-img4{
+    background: url("../images/contact-wrap-xc.png") no-repeat center center;
+    background-size: 100% 100%;
+}
+.example-msg{
+    padding-left: 24px;
+}
+.exa-msg-title{
+    height:22px;
+    font-size:22px;
+    font-weight:500;
+    color:rgba(0,0,0,1);
+    margin-bottom: 18px;
+    margin-top: 24px;
+}
+.example-msg p{
+    font-size:14px;
+    font-weight:400;
+    color:rgba(0,0,0,1);
+    line-height:23px;
+}
\ No newline at end of file
diff --git a/images/contact-wrap-cf.png b/images/contact-wrap-cf.png
new file mode 100644
index 0000000..ac2e812
--- /dev/null
+++ b/images/contact-wrap-cf.png
diff --git a/images/contact-wrap-dy.png b/images/contact-wrap-dy.png
new file mode 100644
index 0000000..4765582
--- /dev/null
+++ b/images/contact-wrap-dy.png
diff --git a/images/contact-wrap-xc.png b/images/contact-wrap-xc.png
new file mode 100644
index 0000000..f7cbaf3
--- /dev/null
+++ b/images/contact-wrap-xc.png
diff --git a/images/contact-wrap-yz.png b/images/contact-wrap-yz.png
new file mode 100644
index 0000000..c6c1ac1
--- /dev/null
+++ b/images/contact-wrap-yz.png
