add service swiper效果

Andy
1 parent 2459da42
Showing 1 changed file with 129 additions and 2 deletions
css/services.css
@@ -56,11 +56,11 @@
     float: left;
 }
 .part3 .hd,.part5 .hd{width: 500px!important; margin-top: 50px; overflow: hidden;margin-left:500px; background: #fff; z-index: 1000;}
-.part .hd h2{width: 110px !important; cursor: pointer; float: left; font-size: 20px; padding-bottom: 15px; margin-bottom: 0; text-align: center;}
+.part .hd h2{width: 110px; cursor: pointer; float: left; font-size: 20px; padding-bottom: 15px; margin-bottom: 0; text-align: center;}
 .part .hd h2.active-nav{ border-bottom: solid 3px #3F9FFE;color:#3F9FFE; }
 .part .bd{width: 100%;float: left;}
 .part .line {
-    width: 90%;
+    width: 100%;
     /* margin: 0 auto; */
     height: 1px;
     background: #818181;
@@ -148,6 +148,133 @@
     float: left;
     /*overflow: hidden;*/
 }
+@media screen and (min-width: 1000px) and (max-width: 2500px){
+}
+
+@media screen and (min-width: 980px) and (max-width: 1000px){
+    .part3 .bd .txt,  .part5 .bd .txt {
+        margin-right: 0px;
+    }
+    
+}
+
+@media screen and (min-width: 767px) and (max-width: 980px){
+    .container{width: 100% !important}
+     .part{height: auto}
+     .part .con {
+        width: 100%;
+        margin-left: 0px;
+        margin-bottom: 50px;
+    }
+     .part .hd {
+        width:100%;
+        margin:20px auto 0;
+        text-align: center;
+        overflow: hidden;
+    }
+     .part .bd .p1 {
+        font-size:2.5rem; text-align: center;
+
+    }
+     .part .bd .p2 {
+        font-size: 2.1rem; display: none
+
+    }
+     .part  .line{width: 100%;}
+     .part .hd h2 {
+        width: 80px;
+        float: none; display: inline-block; margin-left: -4px;
+    }
+     .part .bd .img {
+        font-size: 34px;
+        margin: 0 auto; float: none;
+        position: static;
+
+    }
+
+
+     .part3 , .part4, .part5 {
+        height: 750px;
+
+    }
+     .part .hd {
+        width: 100%;
+        margin: 30px auto 0;
+
+    }
+     .part3 .bd .txt,  .part5 .bd .txt {
+        float: none;
+        width: 100%;
+        margin:0 auto;
+    }
+
+     .part4 .bd .txt {
+        float: none;
+        width: 100%;
+        margin-left: 0;
+    }
+
+}
+
+@media screen and (min-width: 320px) and (max-width: 767px){
+    .container{
+        width: 100%
+    }
+     .part{height: auto; width: 100%;}
+     .part .con {
+        width: 100%;
+        margin-left: 0px;
+        margin-bottom: 50px;
+    }
+     .part .hd {
+        width:100%;
+        margin:20px auto 0;
+        text-align: center;
+        overflow: hidden;
+    }
+     .part .bd .p1 {
+        font-size:2.5rem; text-align: center;
+
+    }
+     .part .bd .p2 {
+        font-size: 2.1rem; display: none
+
+    }
+     .part  .line{width: 100%;}
+     .part .hd h2 {
+        width: 72px;
+        float: none; display: inline-block; margin-left: -4px;
+    }
+     .part .bd .img {
+        font-size: 34px;
+        margin: 0 auto; float: none;
+        position: static;
+
+    }
+
+
+     .part3 , .part4, .part5 {
+        height: 750px;
+        width: 100%;
+    }
+     .part .hd {
+        width: 90% !important;
+        margin: 30px auto 0;
+
+    }
+     .part3 .bd .txt,  .part5 .bd .txt {
+        float: none;
+        width: 100%;
+        margin:0 auto;
+    }
+
+     .part4 .bd .txt {
+        float: none;
+        width: 100%;
+        margin-left: 0;
+    }
+}
+
  
 /*footer sta*/
 .services-foottit{