update

assets/scss/cus-client/cus-client-common.scss

@@ -1107,7 +1107,7 @@ client-banner-box.client-banner-index {
       font-size: 18px;
       color: #333;
       margin-top: 10%;
-      margin-bottom: 3%;
+      margin-bottom: 40px;
       font-weight: 800;
       text-align: center;
     }

components/common/layout/imgDes/imgCardLv1.vue

@@ -170,18 +170,50 @@ export default {
   }
 
   @media (max-width: 768px) {
-    // card--info
-    .card-info {
-      h5 {font-size: 16px;margin: 20px 0 10px;}
-      em{width: 35px;height: 3px;background: #00b96b;display: block;}
-      .card-des{
-        font-size: 14px;margin: 20px 0 10px;text-align: justify;line-height: 22px;
+    margin: 0 auto 60px;
+
+    .mta-card-content-h5 {
+      img {
+        width: 100%;
+        text-align: center;
+      }
+
+      .card-info {
+        width: 100%;
+
+        h5 {
+          font-size: 16px;
+          margin: 20px 0 10px;
+        }
+
+        em {
+          width: 35px;
+          height: 3px;
+          background: #00b96b;
+          display: block;
+          margin-bottom: 20px;
+        }
+
+        .card-des {
+          font-size: 14px;
+          margin: 20px 0 10px;
+          text-align: justify;
+          line-height: 22px;
+        }
+      }
+
+      .mta-card-row {
+        margin-bottom: 10px;
+
+        > span {
+          width: 44%;
+          font-size: 14px;
+          margin: 0 3%;
+        }
       }
-    }
-    .mta-card-row{
-      margin-bottom: 10px;
-      >span{width: 44%;font-size: 14px;margin: 0 3%;}
     }
   }
 }
+
+
 </style>

components/common/layout/imgDes/imgCardLv2.vue

@@ -133,24 +133,27 @@ export default {
       line-height: 24px;
     }
   }
-}
 
-@media (max-width: 768px) {
-  .mta-card-content-h5 {
-    img {
-      max-width: 100%;
-    }
-    // card--info
-    .card-info {
-      width: 100%;
-
-      h5 {font-size: 18px;margin: 20px 0 10px;}
-      em{width: 35px;height: 3px;background: #00b96b;display: block;margin-bottom: 20px;}
-      .card-des{
-        font-size: 14px;margin: 20px 0 10px;text-align: justify;line-height: 22px;
+  @media (max-width: 768px) {
+    margin: 0 auto 60px;
+    .mta-card-content-h5 {
+      img {
+        width: 100%;
+        text-align: center;
+      }
+      // card--info
+      .card-info {
+        width: 100%;
+
+        h5 {font-size: 18px;margin: 20px 0 10px;}
+        em{width: 35px;height: 3px;background: #00b96b;display: block;margin-bottom: 20px;}
+        .card-des{
+          font-size: 14px;margin: 20px 0 10px;text-align: justify;line-height: 22px;
+        }
       }
     }
   }
-
 }
+
+
 </style>

components/common/layout/imgDes/imgCardLv3.vue

@@ -102,10 +102,13 @@ export default {
       text-align: justify;
     }
   }
+
   @media (max-width: 768px) {
+    margin: 0 auto 60px;
     .mta-card-content-h5 {
       img {
-        max-width: 100%;
+        width: 100%;
+        text-align: center;
       }
       // card--info
       .card-info {
@@ -119,6 +122,5 @@ export default {
     }
 
   }
-
 }
 </style>

components/common/layout/imgDes/imgCardLv4.vue

@@ -126,10 +126,13 @@ export default {
       margin-right: 100px;
     }
   }
+
   @media (max-width: 768px) {
+    margin: 0 auto 60px;
     .mta-card-content-h5 {
       img {
-        max-width: 100%;
+        width: 100%;
+        text-align: center;
       }
       // card--info
       .card-info {
@@ -144,7 +147,5 @@ export default {
 
   }
 
-
-
 }
 </style>