頁面修正

about/about.css

@@ -21,7 +21,7 @@ body {
 body .arrow {
   position: fixed;
   right: 30px;
-  top: 500px;
+  top: 400px;
   width: 45px;
   height: 40px;
   z-index: 10;
@@ -348,7 +348,8 @@ body .arrow:hover {
 
 @media screen and (max-width: 767px) {
   #banner #banner-container .tab-content .sec01 .condition {
-    padding: 18px;
+    padding: 10vw 18px;
+    padding-bottom: 15vw;
   }
 }
 
@@ -361,6 +362,13 @@ body .arrow:hover {
   background-blend-mode: overlay;
 }
 
+@media screen and (max-width: 767px) {
+  #banner #banner-container .tab-content .sec01 .idea {
+    padding: 10vw 18px;
+    padding-bottom: 15vw;
+  }
+}
+
 #banner #banner-container .tab-content .sec01 .contact {
   padding-bottom: 10vw;
   padding: 4vw 24px;
@@ -371,17 +379,18 @@ body .arrow:hover {
   word-break: break-all;
 }
 
-#banner #banner-container .tab-content .sec01 .contact a {
-  text-decoration: none;
-  color: #fff;
-}
-
 @media screen and (max-width: 767px) {
   #banner #banner-container .tab-content .sec01 .contact {
-    padding: 18px;
+    padding: 10vw 18px;
+    padding-bottom: 15vw;
   }
 }
 
+#banner #banner-container .tab-content .sec01 .contact a {
+  text-decoration: none;
+  color: #fff;
+}
+
 #banner #banner-container .tab-content .sec02 .col-lg-4,
 #banner #banner-container .tab-content .sec04 .col-lg-4 {
   position: relative;
@@ -407,7 +416,7 @@ body .arrow:hover {
   #banner #banner-container .tab-content .sec04 .col-lg-4 .sec02-p-m {
     width: 100%;
     position: absolute;
-    top: 100px;
+    top: 35%;
     left: 0px;
     font-size: 18px;
     opacity: 0;
@@ -450,12 +459,19 @@ body .arrow:hover {
   -o-object-fit: cover;
      object-fit: cover;
   width: 100% !important;
-  height: 280px !important;
+  height: 17vw;
   opacity: 1;
   -webkit-transition: 0.3s ease-in-out;
   transition: 0.3s ease-in-out;
 }
 
+@media screen and (max-width: 767px) {
+  #banner #banner-container .tab-content .sec02 .col-lg-4 img,
+  #banner #banner-container .tab-content .sec04 .col-lg-4 img {
+    height: 50vw;
+  }
+}
+
 #banner #banner-container .tab-content .sec02 .col-lg-4 .sec03-img-m,
 #banner #banner-container .tab-content .sec04 .col-lg-4 .sec03-img-m {
   text-align: center;
@@ -523,7 +539,7 @@ body .arrow:hover {
 @media screen and (min-width: 1025px) {
   #banner #banner-container .tab-content .sec03 .col-lg-4 .sec03-p-m {
     position: absolute;
-    top: 50px;
+    top: 30%;
     left: 0px;
     background-size: contain;
     opacity: 0;
@@ -559,12 +575,18 @@ body .arrow:hover {
   -o-object-fit: cover;
      object-fit: cover;
   width: 100% !important;
-  height: 17vw !important;
+  height: 17vw;
   opacity: 1;
   -webkit-transition: 0.3s ease-in-out;
   transition: 0.3s ease-in-out;
 }
 
+@media screen and (max-width: 767px) {
+  #banner #banner-container .tab-content .sec03 .col-lg-4 img {
+    height: 50vw;
+  }
+}
+
 #banner #banner-container .tab-content .sec03 .col-lg-4 .sec03-img-m {
   text-align: center;
   width: 100%;
@@ -662,7 +684,7 @@ body .arrow:hover {
   -o-object-fit: cover;
      object-fit: cover;
   width: 100% !important;
-  height: 200px !important;
+  height: 16.5vw;
   opacity: 1;
   -webkit-transition: 0.3s ease-in-out;
   transition: 0.3s ease-in-out;
@@ -670,7 +692,7 @@ body .arrow:hover {
 
 @media screen and (max-width: 767px) {
   #banner #banner-container .tab-content .sec04 .col-lg-4 img {
-    height: 180px !important;
+    height: 50vw;
   }
 }
 
@@ -720,13 +742,14 @@ body .arrow:hover {
   text-align: center;
   width: 80vw;
   margin: 0 auto !important;
+  padding-top: 2vw;
+  padding: 1vw;
 }
 
 @media screen and (max-width: 767px) {
   #footer {
     width: 95vw;
-    padding: 5vw;
-    padding-bottom: 12vw;
+    padding: 30vw 5vw;
   }
 }
 

about/about.scss

@@ -24,7 +24,7 @@ body {
     .arrow {
         position: fixed;
         right: 30px;
-        top: 500px;
+        top: 400px;
         width: 45px;
         height: 40px;
         z-index: 10;
@@ -281,12 +281,12 @@ body {
             .sec01{
                 // 公司簡介
                 .condition {
-                 
                     padding:4vw 24px;
                     font-size: 16px;
                     padding-bottom: 10vw;
                     @media screen and(max-width:$moblie) {
-                        padding: 18px;
+                        padding:10vw 18px;
+                        padding-bottom: 15vw;
                     }
                 }
                 .idea {
@@ -296,6 +296,10 @@ body {
                     background-size: contain;
                     background-repeat: no-repeat;
                     background-blend-mode: overlay;
+                    @media screen and(max-width:$moblie) {
+                        padding:10vw 18px;
+                        padding-bottom: 15vw;
+                    }
                 }
                 .contact {
                     padding-bottom: 10vw;
@@ -305,13 +309,14 @@ body {
                     background-repeat: no-repeat;
                     background-blend-mode: overlay;
                     word-break: break-all;
+                    @media screen and(max-width:$moblie) {
+                        padding:10vw 18px;
+                        padding-bottom: 15vw;
+                    }
                     a {
                         text-decoration: none;
                         color: #fff;
                     }
-                    @media screen and(max-width:$moblie) {
-                        padding: 18px;
-                    }
                 }
 
             }
@@ -332,7 +337,7 @@ body {
                         @media screen and(min-width:$desktop) {
                             width: 100%;
                             position: absolute;
-                            top: 100px;
+                            top: 35%;
                             left: 0px;
                             font-size: 18px;
                             opacity: 0;
@@ -361,9 +366,12 @@ body {
                     img {
                         object-fit: cover;
                         width: 100% !important;
-                        height: 280px !important;
+                        height: 17vw ;
                         opacity: 1;
                         transition: 0.3s ease-in-out;
+                        @media screen and(max-width:$moblie) {
+                            height: 50vw;
+                        }
                     }
                     .sec03-img-m {
                         text-align: center;
@@ -414,7 +422,7 @@ body {
                     .sec03-p-m {
                         @media screen and(min-width:$desktop) {
                             position: absolute;
-                            top: 50px;
+                            top: 30%;
                             left: 0px;
                             background-size: contain;
                             opacity: 0;
@@ -442,9 +450,12 @@ body {
                     img {
                         object-fit: cover;
                         width: 100% !important;
-                        height: 17vw !important;
+                        height: 17vw;
                         opacity: 1;
                         transition: 0.3s ease-in-out;
+                        @media screen and(max-width:$moblie) {
+                            height: 50vw;
+                        }
                     }
                     .sec03-img-m {
                         text-align: center;
@@ -523,11 +534,11 @@ body {
                     img {
                         object-fit: cover;
                         width: 100% !important;
-                        height: 200px !important;
+                        height: 16.5vw ;
                         opacity: 1;
                         transition: 0.3s ease-in-out;
                         @media screen and(max-width:$moblie) {
-                            height: 180px !important;
+                           height: 50vw;
                         }
                     }
                     .sec03-img-m {
@@ -574,10 +585,12 @@ body {
     text-align: center;
     width: 80vw;
     margin: 0 auto !important;
+    padding-top: 2vw;
+    padding:1vw;
     @media screen and(max-width:$moblie) {
         width: 95vw;
-        padding: 5vw;
-        padding-bottom: 12vw;
+        padding: 30vw 5vw;
+       
     }
     a {
         text-decoration: none;