update css

layouts/partials/components/nav.html

@@ -47,7 +47,7 @@
             中 / en
           </button>
         </li>
-        <li class="me-3 mb-4 mb-xl-0">
+        <li class="me-3 mb-4 mb-xl-0 pb-1 pb-xl-0">
           <a href="/virtual-host-solution/" class="solution-link">客製化 AI 主持人報價</a>
         </li>
         <li>

static/css/custom.css

@@ -1663,9 +1663,9 @@
   width: 185px;
 }
 
-@media (max-width: 1200px) {
+@media (max-width: 1400px) {
   .logo {
-    width: 165px;
+    width: 150px;
   }
 }
 
@@ -2274,16 +2274,15 @@
   font-weight: bold;
 }
 
-
-.aicustomerSec01{
+.aicustomerSec01 {
   width: 90%;
   margin: 100px auto;
-} 
+}
 
-.aicustomerSec01 img{
+.aicustomerSec01 img {
   border-radius: 15px;
 }
-.aicustoerSec02-0{
+.aicustoerSec02-0 {
   width: 70%;
   margin: 30px auto;
   /* background-image: url(../img/aicustomer/aicustomerbg.png);
@@ -2291,42 +2290,39 @@
   background-size: contain; */
 }
 
-.aicustoerSec02-1{
+.aicustoerSec02-1 {
   justify-content: space-between;
 }
 
-.aicustoerSec02-1,p{
+.aicustoerSec02-1,
+p {
   margin-top: 30px;
 }
-.aicustoerSec02-title{
+.aicustoerSec02-title {
   margin-left: 70px;
 }
 
-.aicustomer-title-line{
+.aicustomer-title-line {
   width: 700px;
   height: auto;
   object-fit: cover;
 }
 
-
-
 @media (max-width: 767px) {
-  .aicustomer-title-line{
+  .aicustomer-title-line {
     width: 365px;
     height: auto;
     object-fit: cover;
   }
 }
-.aicustoerSec02{
+.aicustoerSec02 {
   background-image: url(../img/aicustomer/aicustomerbg.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
 }
 
-
-
-.aicustoerSec03{
+.aicustoerSec03 {
   background-image: url(../img/aicustomer/aiccc.webp);
 
   background-attachment: fixed;
@@ -2339,34 +2335,33 @@
 
 @media screen and (max-width: 768px) {
   .aicustoerSec03 {
-      background-image: url(../img/aicustomer/aicustomer-m-bg.webp);
-    
-      background-size: contain;
-      /* background-position: center; */
-  background-attachment:scroll  ;
-    
-      height: 300px;
+    background-image: url(../img/aicustomer/aicustomer-m-bg.webp);
+
+    background-size: contain;
+    /* background-position: center; */
+    background-attachment: scroll;
+
+    height: 300px;
   }
 }
 
-.aicustoerSec04,.aicustoerSec06{
+.aicustoerSec04,
+.aicustoerSec06 {
   width: 80%;
   margin: 50px auto;
 }
 
-.aisec02img-3{
+.aisec02img-3 {
   margin-top: -30px;
-
 }
 
 @media screen and (max-width: 768px) {
-  .aisec02img-3{
+  .aisec02img-3 {
     margin-top: 0px;
-  
   }
 }
 
-.aicustoerSec05{
+.aicustoerSec05 {
   background-image: url(../img/aicustomer/aicustomerbg2.webp);
 
   background-attachment: fixed;
@@ -2378,17 +2373,15 @@
 }
 @media screen and (max-width: 768px) {
   .aicustoerSec05 {
-      background-image: url(../img/aicustomer/aicustomer-m-bg2.webp);
-    
-      background-size: contain;
-      /* background-position: center; */
-  background-attachment:scroll  ;
-    
-      height: 300px;
-  }
-}
+    background-image: url(../img/aicustomer/aicustomer-m-bg2.webp);
 
+    background-size: contain;
+    /* background-position: center; */
+    background-attachment: scroll;
 
+    height: 300px;
+  }
+}
 
 .arrow-wave {
   display: inline-block;
@@ -2398,11 +2391,9 @@
   /*   background-color: rgba(100,100,100,0.4); */
 }
 
-
 @media screen and (max-width: 768px) {
   .arrow-wave {
     display: none;
-    
   }
 }
 .arrow-wave span {
@@ -2470,11 +2461,11 @@
   }
 }
 
-.aicustomerSec01_cta_arrow{
+.aicustomerSec01_cta_arrow {
   margin-top: -30px;
 }
 
-.aicustoerSec06 .accordion{
+.aicustoerSec06 .accordion {
   margin-top: 30px;
 }
 
@@ -2485,15 +2476,15 @@
   border-color: #ea5413;
 }
 
-#aicustoerCta .sec-action h2{
+#aicustoerCta .sec-action h2 {
   font-size: 2rem;
 }
 
-#aicustoerCta  a{
+#aicustoerCta a {
   background-color: white;
   color: #ea5413;
- text-decoration: none;
- font-size: 20px;
- font-weight: 600;
- padding: 20px 30px;
-}
+  text-decoration: none;
+  font-size: 20px;
+  font-weight: 600;
+  padding: 20px 30px;
+}

static/css/style.css

@@ -49,7 +49,13 @@
 }
 @media (max-width: 1400px) {
   .navbar-nav .solution-link {
-    font-size: 14px;
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+}
+@media (max-width: 1199px) {
+  .navbar-nav .solution-link {
+    font-size: 16px;
   }
 }
 .navbar-nav .signin-link {
@@ -62,7 +68,13 @@
 }
 @media (max-width: 1400px) {
   .navbar-nav .signin-link {
-    font-size: 14px;
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+}
+@media (max-width: 1199px) {
+  .navbar-nav .signin-link {
+    font-size: 16px;
   }
 }
 .navbar-nav .signup-link {
@@ -87,7 +99,7 @@
     font-size: 14px;
   }
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   .navbar {
     font-size: 16px;
   }
@@ -364,7 +376,7 @@
   padding-bottom: 40%;
 }
 
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   .video-box {
     width: 80%;
     padding-bottom: 45%;
@@ -675,7 +687,7 @@
   padding: 0 25px;
   font-size: 18px;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   #home #main .journey-content .list {
     padding: 0;
   }
@@ -696,7 +708,7 @@
 #home #main .journey-content .list p {
   height: 75px;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   #home #main .journey-content .list p {
     height: 85px;
   }
@@ -948,7 +960,7 @@
     line-height: 34px;
   }
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   #home .ai-content .img-item p {
     top: 28%;
     line-height: 32px;
@@ -1047,7 +1059,7 @@
   position: absolute;
   transform: rotate(90deg);
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   #home .progress-item .cont {
     left: -145px;
   }
@@ -1144,7 +1156,7 @@
     left: 45%;
   }
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   #home .home-en .ai-content .img-item p {
     max-width: 350px;
     top: 28%;
@@ -1871,7 +1883,7 @@
     top: 55px;
   }
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   #ai-anchor .faq-content .img-box .text-box {
     font-size: 16px;
     right: 185px;
@@ -2046,7 +2058,7 @@
   font-size: 40px;
   font-weight: bold;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   #ad-operation .header .banner .slogen h3 {
     font-size: 33px;
   }
@@ -2072,7 +2084,7 @@
   font-size: 70px;
   color: #900381;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   #ad-operation .header .banner .slogen h3 span {
     font-size: 58px;
   }
@@ -2106,7 +2118,7 @@
   font-size: 46px;
   font-weight: bold;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   #ad-operation .header .banner .slogen h4 {
     font-size: 38px;
   }
@@ -2156,7 +2168,7 @@
   z-index: 100;
   width: 1300px;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   #ad-operation .img-content {
     width: 1000px;
     margin: -50px auto;
@@ -2193,7 +2205,7 @@
   font-weight: bold;
   text-align: center;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   #ad-operation .img-content h4 {
     font-size: 22px;
     line-height: 30px;
@@ -2220,7 +2232,7 @@
   top: 320px;
   left: 280px;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   #ad-operation .img-content .left {
     top: 245px;
     left: 218px;
@@ -2248,7 +2260,7 @@
   top: 420px;
   left: 600px;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   #ad-operation .img-content .center {
     top: 325px;
     left: 465px;
@@ -2276,7 +2288,7 @@
   top: 545px;
   right: 240px;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   #ad-operation .img-content .right {
     top: 420px;
     right: 188px;
@@ -2344,7 +2356,7 @@
   top: 100%;
   height: 660px;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   #ad-operation .dm-description .stock-img {
     height: 535px;
   }
@@ -2724,7 +2736,7 @@
   position: relative;
   top: -30px;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   .blog-traffic .img-block-img {
     top: -10px;
   }
@@ -2750,7 +2762,7 @@
     top: 22px;
   }
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   .blog-traffic .img-first {
     top: 0;
   }
@@ -3489,7 +3501,7 @@
     left: 210px;
   }
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   .seo-image .line {
     width: 880px;
     top: -90px;
@@ -3829,7 +3841,7 @@
   margin-top: -250px;
   font-weight: bold;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   .ai-presenter .template-content table {
     margin-top: -195px;
   }
@@ -3866,7 +3878,7 @@
   margin-top: -242px;
   text-align: end;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   .ai-presenter .template-content .table-title {
     margin-top: -185px;
   }
@@ -3918,7 +3930,7 @@
   font-size: 34px;
   font-weight: bold;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   .ai-presenter .template-content .info .img-text-left,
   .ai-presenter .template-content .info .img-text-right {
     top: 8%;
@@ -4133,7 +4145,7 @@
   text-align: center;
   color: #6d6d6d;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   .about-content h2 {
     font-size: 22px;
   }
@@ -4190,7 +4202,7 @@
   -o-object-fit: contain;
      object-fit: contain;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   .about-content .project-item img {
     height: 220px;
   }
@@ -4254,7 +4266,7 @@
   position: absolute;
   transform: rotate(90deg);
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   .about-content .progress-item .cont {
     left: -240px;
   }
@@ -4375,7 +4387,7 @@
   padding-bottom: 25%;
   width: 48%;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   .carousel-wrapper .carousel .wrapper .video-wrapper.e-win {
     padding-bottom: 22%;
     width: 46%;
@@ -4407,7 +4419,7 @@
   padding: 8px 20px;
   border-radius: 8px;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   .carousel-wrapper .carousel .frame-item select {
     padding: 2px 0px;
   }
@@ -4418,7 +4430,7 @@
   left: 4.5vw;
   z-index: 100;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   .carousel-wrapper .carousel .toggle-video {
     top: 33%;
     left: 3vw;

static/css/style.scss

@@ -54,7 +54,12 @@
     }
 
     @media (max-width: 1400px) {
-      font-size: 14px;
+      padding: 8px 10px;
+      font-size: 12px;
+    }
+
+    @media (max-width: 1199px) {
+      font-size: 16px;
     }
   }
 
@@ -67,7 +72,12 @@
     border-radius: 3rem;
 
     @media (max-width: 1400px) {
-      font-size: 14px;
+      padding: 8px 10px;
+      font-size: 12px;
+    }
+
+    @media (max-width: 1199px) {
+      font-size: 16px;
     }
   }
 
@@ -96,7 +106,7 @@
     font-size: 14px;
   }
 
-  @media (max-width: 1200px) {
+  @media (max-width: 1199px) {
     font-size: 16px;
   }
 }
@@ -398,7 +408,7 @@
   padding-bottom: 40%;
 }
 
-@media (max-width: 1200px) {
+@media (max-width: 1199px) {
   .video-box {
     width: 80%;
     padding-bottom: 45%;
@@ -807,7 +817,7 @@
         padding: 0 25px;
         font-size: 18px;
 
-        @media (max-width: 1200px) {
+        @media (max-width: 1199px) {
           padding: 0;
         }
 
@@ -826,7 +836,7 @@
         p {
           height: 75px;
 
-          @media (max-width: 1200px) {
+          @media (max-width: 1199px) {
             height: 85px;
           }
 
@@ -1097,7 +1107,7 @@
           line-height: 34px;
         }
 
-        @media (max-width: 1200px) {
+        @media (max-width: 1199px) {
           top: 28%;
           line-height: 32px;
           font-size: 18px;
@@ -1206,7 +1216,7 @@
       position: absolute;
       transform: rotate(90deg);
 
-      @media (max-width: 1200px) {
+      @media (max-width: 1199px) {
         left: -145px;
       }
 
@@ -1311,7 +1321,7 @@
             left: 45%;
           }
 
-          @media (max-width: 1200px) {
+          @media (max-width: 1199px) {
             max-width: 350px;
             top: 28%;
             left: 50%;
@@ -2121,7 +2131,7 @@
           top: 55px;
         }
 
-        @media (max-width: 1200px) {
+        @media (max-width: 1199px) {
           font-size: 16px;
           right: 185px;
           top: 40px;
@@ -2294,7 +2304,7 @@
         position: absolute;
         top: 63vw;
 
-        // @media (max-width: 1200px) {
+        // @media (max-width: 1199px) {
         //   margin-top: 44vw;
         // }
         h3 {
@@ -2302,7 +2312,7 @@
           font-size: 40px;
           font-weight: bold;
 
-          @media (max-width: 1200px) {
+          @media (max-width: 1199px) {
             font-size: 33px;
           }
 
@@ -2324,7 +2334,7 @@
             font-size: 70px;
             color: #900381;
 
-            @media (max-width: 1200px) {
+            @media (max-width: 1199px) {
               font-size: 58px;
             }
 
@@ -2358,7 +2368,7 @@
           font-size: 46px;
           font-weight: bold;
 
-          @media (max-width: 1200px) {
+          @media (max-width: 1199px) {
             font-size: 38px;
           }
 
@@ -2410,7 +2420,7 @@
     z-index: 100;
     width: 1300px;
 
-    @media (max-width: 1200px) {
+    @media (max-width: 1199px) {
       width: 1000px;
       margin: -50px auto;
       // margin: -400px auto 0;
@@ -2446,7 +2456,7 @@
       font-weight: bold;
       text-align: center;
 
-      @media (max-width: 1200px) {
+      @media (max-width: 1199px) {
         font-size: 22px;
         line-height: 30px;
       }
@@ -2470,7 +2480,7 @@
       top: 320px;
       left: 280px;
 
-      @media (max-width: 1200px) {
+      @media (max-width: 1199px) {
         top: 245px;
         left: 218px;
       }
@@ -2495,7 +2505,7 @@
       top: 420px;
       left: 600px;
 
-      @media (max-width: 1200px) {
+      @media (max-width: 1199px) {
         top: 325px;
         left: 465px;
       }
@@ -2520,7 +2530,7 @@
       top: 545px;
       right: 240px;
 
-      @media (max-width: 1200px) {
+      @media (max-width: 1199px) {
         top: 420px;
         right: 188px;
       }
@@ -2591,7 +2601,7 @@
       top: 100%;
       height: 660px;
 
-      @media (max-width: 1200px) {
+      @media (max-width: 1199px) {
         height: 535px;
       }
 
@@ -2977,7 +2987,7 @@
     position: relative;
     top: -30px;
 
-    @media (max-width: 1200px) {
+    @media (max-width: 1199px) {
       top: -10px;
     }
 
@@ -3000,7 +3010,7 @@
   }
 
   .img-first {
-    @media (max-width: 1200px) {
+    @media (max-width: 1199px) {
       top: 0;
     }
 
@@ -3768,7 +3778,7 @@
   //       line-height: 40px;
   //       transform: translate(-50%, -50%);
 
-  //       @media (max-width: 1200px) {
+  //       @media (max-width: 1199px) {
   //         top: 40%;
   //       }
 
@@ -3863,7 +3873,7 @@
       left: 210px;
     }
 
-    @media (max-width: 1200px) {
+    @media (max-width: 1199px) {
       width: 880px;
       top: -90px;
       left: 114px;
@@ -4224,7 +4234,7 @@
       margin-top: -250px;
       font-weight: bold;
 
-      @media (max-width: 1200px) {
+      @media (max-width: 1199px) {
         margin-top: -195px;
       }
 
@@ -4261,7 +4271,7 @@
       margin-top: -242px;
       text-align: end;
 
-      @media (max-width: 1200px) {
+      @media (max-width: 1199px) {
         margin-top: -185px;
       }
 
@@ -4316,7 +4326,7 @@
         font-size: 34px;
         font-weight: bold;
 
-        @media (max-width: 1200px) {
+        @media (max-width: 1199px) {
           top: 8%;
           font-size: 28px;
         }
@@ -4542,7 +4552,7 @@
     text-align: center;
     color: #6d6d6d;
 
-    @media (max-width: 1200px) {
+    @media (max-width: 1199px) {
       font-size: 22px;
     }
 
@@ -4598,7 +4608,7 @@
       height: 280px;
       object-fit: contain;
 
-      @media (max-width: 1200px) {
+      @media (max-width: 1199px) {
         height: 220px;
       }
 
@@ -4668,7 +4678,7 @@
       position: absolute;
       transform: rotate(90deg);
 
-      @media (max-width: 1200px) {
+      @media (max-width: 1199px) {
         left: -240px;
       }
 
@@ -4802,7 +4812,7 @@
           padding-bottom: 25%;
           width: 48%;
 
-          @media (max-width: 1200px) {
+          @media (max-width: 1199px) {
             padding-bottom: 22%;
             width: 46%;
           }
@@ -4835,7 +4845,7 @@
         padding: 8px 20px;
         border-radius: 8px;
 
-        @media (max-width: 1200px) {
+        @media (max-width: 1199px) {
           padding: 2px 0px;
         }
       }
@@ -4847,7 +4857,7 @@
       left: 4.5vw;
       z-index: 100;
 
-      @media (max-width: 1200px) {
+      @media (max-width: 1199px) {
         top: 33%;
         left: 3vw;
       }