update

layouts/ai-transform-video/single.html

@@ -57,41 +57,41 @@
       <div class="container my-5 position-relative">
         <img src="/imgs/dm/ai-video/SaaS-08.webp" alt="" class="img-fluid bg-img">
 
-        <div class="py-5 ps-5">
-          <section class="ps-5 ms-5">
+        <div class="py-5 ps-lg-5 text-center text-lg-start">
+          <section class="ms-lg-5 ps-lg-5">
             <h4 class="main-text">「簡單變換影片風格、增加影片數量</h4>
-            <h4 class="ps-5 ms-5 mt-4 main-text">再也不要看一成不變的真人介紹影片」</h4>
+            <h4 class="ps-lg-5 ms-lg-5 mt-2 mt-lg-4 main-text">再也不要看一成不變的真人介紹影片」</h4>
           </section>
 
-          <section class="d-flex flex-column align-items-center ms-5 ps-5">
-            <p style="margin-bottom: -10px;">Choozmo 使用先進的AI技術讓您可以輕鬆地將真人形象轉化為 <span class="main-text">AI</span> 主播</p>
+          <section class="d-flex flex-column align-items-center ms-lg-5 ps-lg-5">
+            <p class="ai-line">Choozmo 使用先進的AI技術讓您可以輕鬆地將真人形象轉化為 <span class="main-text">AI</span> 主播</p>
             <p>無論是產品推廣、企業介紹、社交媒體內容，還是個人影片<br>我們的服務都能幫助您實現專業且個性化的虛擬主持人效果
             </p>
           </section>
         </div>
 
         <div class="row align-items-center">
-          <div class="col-6">
-            <section class="text-end">
+          <div class="col-12 col-lg-6">
+            <section class="text-center text-lg-end">
               <p>這項服務不僅能保存您真實形象的特色，更能提供更多樣化的人物造型<br>字幕風格、背景選擇，滿足不同類型影片的需求</p>
 
-              <p class="main-text mb-0">想增加影片內容？</p>
+              <p class="main-text mt-5 mt-lg-0 mb-lg-0">想增加影片內容？</p>
               <p>再也不需要花費高額的拍攝費用、場地租借與後期剪輯等繁瑣步驟<br>只需要提供現有影片，我們會幫您轉變為AI影片，往後要增加影片內容<br>或是更換主播造型，都只需要在電腦上就可以完成</p>
 
               <p class="mb-0">Choozmo AI 主播同時支援多國語言、高擬真表情管理、準確的對嘴<br>讓您的影片不僅視覺效果出色，幫助您快速抓住觀眾的目光</p>
             </section>
           </div>
-          <div class="col-6">
+          <div class="col-12 col-lg-6 mt-5 mt-lg-0">
             <img src="/imgs/dm/ai-video/SaaS_s2.webp" alt="" class="img-fluid">
           </div>
 
-          <div class="col-7 mt-5">
+          <div class="col-12 col-lg-7 mt-5">
             <img src="/imgs/dm/ai-video/SaaS-06.webp" alt="" class="img-fluid">
           </div>
 
-          <div class="col-5">
-            <section class="text-start">
-              <p class="main-text mb-0">擬真形象轉換</p>
+          <div class="col-12 col-lg-5">
+            <section class="text-center text-lg-start">
+              <p class="main-text mb-lg-0">擬真形象轉換</p>
 
               <p>轉變AI主播時，可以保留原始影片中的真人五官 (或是美化)<br>如果原始影片沒有人物略嫌單調，也可以選擇客製化新的代言人！</p>
 
@@ -99,7 +99,7 @@
             </section>
           </div>
 
-          <div class="col-12">
+          <div class="col-12 mt-5">
             <h3 class="main-text">操作流程簡單</h3>
             <p>「只需提供原始影片，以及告知需求，即可開始影片變身！」</p>
 
@@ -113,8 +113,8 @@
             </div>
           </div>
 
-          <div class="col-5">
-            <section class="text-end">
+          <div class="col-12 col-lg-5">
+            <section class="text-center text-lg-end">
               <h3 class="main-text">案例</h3>
 
               <h5 class="fw-bold mt-3">CIJ株式會社</h5>
@@ -125,7 +125,7 @@
             </section>
           </div>
 
-          <div class="col-7">
+          <div class="col-12 col-lg-7">
             <img src="/imgs/dm/ai-video/SaaS-11.webp" alt="" class="img-fluid">
           </div>
 
@@ -143,7 +143,8 @@
           <div class="col-6">
             <div class="contrast">
               <img src="/imgs/dm/ai-video/SaaS-16.webp" alt="" class="img-fluid">
-              <p class="ai">ChoozMo 再製 - 影片AI化</p>
+              <p class="ai d-sm-block d-none">ChoozMo 再製 - 影片AI化</p>
+              <p class="ai d-sm-none d-block">影片AI化</p>
             </div>
           </div>
         </div>
@@ -153,7 +154,7 @@
 
           <p class="title">適合誰使用？</p>
 
-          <div class="col-4 mt-5">
+          <div class="col-12 col-lg-4 mt-5">
             <div class="item">
               <h5>企業與品牌</h5>
               <ul>
@@ -165,7 +166,7 @@
             </div>
           </div>
 
-          <div class="col-4 mt-5 ms-4">
+          <div class="col-12 col-lg-4 mt-5 ms-lg-4">
             <div class="item">
               <h5>內容創作者</h5>
               <ul>
@@ -180,6 +181,8 @@
         <p class="mt-5 title">常見問答（FAQ）</p>
 
         <div class="faq-list">
+          <img src="/imgs/dm/circle-02.webp" alt="" class="circle">
+
           <div class="q-item q-1">
             <img src="/imgs/dm/ai-video/SaaS-19.webp" alt="">
             <p>這項服務如何將真人轉換為 AI 主播？</p>
@@ -233,9 +236,12 @@
         </div>
       </div>
 
-      <div id="form">
-        {{ partial "form-main.html" . }}
+      <div class="container">
+        <div id="form">
+          {{ partial "form-main.html" . }}
+        </div>
       </div>
+
     </section>
 
   </main>

layouts/partials/navbar.html

@@ -1,7 +1,8 @@
 <nav class="navbar navbar-expand-xl navbar-light fixed-top">
   <div class="container-fluid justify-content-between justify-content-xl-start">
     <a class="navbar-brand" href="/">
-      <img src="https://ai.choozmo.com/img/Choozmo%20cloud%20logo.png" alt="" width="185" class="d-inline-block align-text-top">
+      <img src="https://ai.choozmo.com/img/Choozmo%20cloud%20logo.png" alt="" width="185"
+        class="d-inline-block align-text-top">
     </a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
       aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -24,6 +25,7 @@
             服務
           </a>
           <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <li><a class="dropdown-item" href="/ai-transform-video/dm/">現有影片 AI 化</a></li>
             <li><a class="dropdown-item" href="/ai-copywriter/dm/">AI 記者</a></li>
             <li><a class="dropdown-item" href="/ai-balanced-news-reporting/">AI 平衡報導</a></li>
             <li><a class="dropdown-item" href="/ad-operation/dm/">AI 廣告投放</a></li>
@@ -62,7 +64,7 @@
         </li>
       </ul>
 
-      <ul class="nav navbar-nav navbar-right flex-row ms-auto my-3 my-lg-0">
+      <ul class="nav navbar-nav navbar-right flex-row ms-auto mt-3 mt-xl-0">
         <li class="me-3 mb-4 mb-xl-0">
           <a href="/virtual-host-solution/" class="solution-link">客製化 AI 主持人報價</a>
         </li>

static/css/style.css

@@ -2967,11 +2967,35 @@
   color: #474047;
   line-height: 2.5;
 }
+@media (max-width: 991px) {
+  #ai-video p {
+    line-height: 2;
+  }
+}
+#ai-video .ai-line {
+  margin-bottom: -10px;
+}
+@media (max-width: 991px) {
+  #ai-video .ai-line {
+    margin-bottom: -5px;
+  }
+}
 #ai-video .main-text {
   font-size: 28px;
   font-weight: 600;
   color: #910782;
 }
+@media (max-width: 991px) {
+  #ai-video .main-text {
+    line-height: 2;
+  }
+}
+@media (max-width: 767px) {
+  #ai-video .main-text {
+    margin-bottom: 1rem;
+    font-size: 22px;
+  }
+}
 #ai-video .bg-img {
   width: 100%;
   position: absolute;
@@ -2985,17 +3009,32 @@
   position: relative;
   margin: 80px auto 160px;
 }
+@media (max-width: 991px) {
+  #ai-video .process {
+    flex-direction: column;
+    align-items: center;
+    margin: 60px auto;
+  }
+}
 #ai-video .process .bg-img {
-  top: -230px;
+  top: -185px;
   opacity: 0.3;
 }
 #ai-video .process .main-img {
   width: 25vw;
-  height: 180px;
+  height: 205px;
   max-width: 100%;
   -o-object-fit: cover;
      object-fit: cover;
 }
+@media (max-width: 991px) {
+  #ai-video .process .main-img {
+    width: 100%;
+    height: auto;
+    max-width: 650px;
+    margin: 1rem auto;
+  }
+}
 #ai-video .process .arrow-img {
   width: 5vw;
   margin: 0 1vw;
@@ -3003,6 +3042,13 @@
   -o-object-fit: contain;
      object-fit: contain;
 }
+@media (max-width: 991px) {
+  #ai-video .process .arrow-img {
+    width: 10vw;
+    margin: 0 5vw;
+    transform: rotate(90deg);
+  }
+}
 #ai-video .contrast {
   position: relative;
 }
@@ -3012,9 +3058,75 @@
   top: 3vw;
   font-size: 20px;
 }
+@media (max-width: 1200px) {
+  #ai-video .contrast p {
+    right: 10vw;
+    top: 2vw;
+  }
+}
+@media (max-width: 991px) {
+  #ai-video .contrast p {
+    right: 5vw;
+    top: 5vw;
+    font-size: 16px;
+  }
+}
+@media (max-width: 767px) {
+  #ai-video .contrast p {
+    top: 6vw;
+    font-size: 14px;
+  }
+}
+@media (max-width: 575px) {
+  #ai-video .contrast p {
+    top: 8vw;
+  }
+}
 #ai-video .contrast .ai {
   right: 6vw;
 }
+@media (max-width: 1200px) {
+  #ai-video .contrast .ai {
+    right: 2vw;
+  }
+}
+@media (max-width: 991px) {
+  #ai-video .contrast .ai {
+    right: -2vw;
+  }
+}
+@media (max-width: 767px) {
+  #ai-video .contrast .ai {
+    right: -5vw;
+  }
+}
+@media (max-width: 575px) {
+  #ai-video .contrast .ai {
+    right: 13vw;
+  }
+}
+@media (max-width: 1200px) {
+  #ai-video .contrast img {
+    margin-left: -20px;
+  }
+}
+@media (max-width: 991px) {
+  #ai-video .contrast img {
+    max-width: 120%;
+    margin-top: 20px;
+  }
+}
+@media (max-width: 767px) {
+  #ai-video .contrast img {
+    max-width: 40vw;
+    margin-top: 30px;
+  }
+}
+@media (max-width: 575px) {
+  #ai-video .contrast img {
+    max-width: 50vw;
+  }
+}
 #ai-video .title {
   font-size: 30px;
   color: #e95513;
@@ -3055,12 +3167,25 @@
   margin: auto;
   display: flex;
   flex-direction: column;
+  position: relative;
+}
+@media (max-width: 575px) {
+  #ai-video .faq-list {
+    font-size: 14px;
+  }
 }
 #ai-video .faq-list p {
   margin: 0;
   line-height: 1.6;
   position: absolute;
 }
+#ai-video .faq-list .circle {
+  width: 600px;
+  left: -30vw;
+  top: 300px;
+  z-index: -100;
+  position: absolute;
+}
 #ai-video .faq-list .q-item,
 #ai-video .faq-list .a-item {
   position: relative;
@@ -3076,6 +3201,7 @@
 #ai-video .faq-list .q-item.q-1 img {
   width: 380px;
   height: 120px;
+  margin-bottom: 10px;
 }
 #ai-video .faq-list .q-item.q-1 p {
   left: 60px;
@@ -3083,6 +3209,7 @@
 #ai-video .faq-list .q-item.q-2 img {
   width: 255px;
   height: 110px;
+  margin-bottom: 30px;
 }
 #ai-video .faq-list .q-item.q-2 p {
   left: 50px;
@@ -3090,6 +3217,7 @@
 #ai-video .faq-list .q-item.q-3 img {
   width: 315px;
   height: 120px;
+  margin-bottom: 25px;
 }
 #ai-video .faq-list .q-item.q-3 p {
   left: 50px;
@@ -3097,13 +3225,25 @@
 #ai-video .faq-list .q-item.q-4 img {
   width: 470px;
   height: 115px;
+  margin-bottom: 35px;
+}
+@media (max-width: 575px) {
+  #ai-video .faq-list .q-item.q-4 img {
+    width: 400px;
+  }
 }
 #ai-video .faq-list .q-item.q-4 p {
   left: 40px;
 }
+@media (max-width: 575px) {
+  #ai-video .faq-list .q-item.q-4 p {
+    left: 30px;
+  }
+}
 #ai-video .faq-list .q-item.q-5 img {
   width: 210px;
   height: 110px;
+  margin-bottom: 35px;
 }
 #ai-video .faq-list .q-item.q-5 p {
   left: 50px;
@@ -3118,12 +3258,24 @@
 #ai-video .faq-list .a-item.a-1 img {
   width: 550px;
   height: 210px;
+  margin-bottom: -20px;
+}
+@media (max-width: 575px) {
+  #ai-video .faq-list .a-item.a-1 img {
+    width: 400px;
+    height: 225px;
+  }
 }
 #ai-video .faq-list .a-item.a-1 p {
   width: 435px;
   top: 53px;
   right: 53px;
 }
+@media (max-width: 575px) {
+  #ai-video .faq-list .a-item.a-1 p {
+    width: 300px;
+  }
+}
 #ai-video .faq-list .a-item.a-2 img {
   width: 420px;
   height: 140px;
@@ -3134,9 +3286,13 @@
   right: 40px;
 }
 #ai-video #form {
-  max-width: 900px;
   margin: 100px auto;
 }
+@media (max-width: 991px) {
+  #ai-video #form {
+    margin: 50px auto 100px;
+  }
+}
 
 /* ai-video End */
 /* youtube-views Start */

static/css/style.scss

@@ -3232,12 +3232,33 @@
     font-weight: 600;
     color: #474047;
     line-height: 2.5;
+
+    @media (max-width: 991px) {
+      line-height: 2;
+    }
+  }
+
+  .ai-line {
+    margin-bottom: -10px;
+
+    @media (max-width: 991px) {
+      margin-bottom: -5px;
+    }
   }
 
   .main-text {
     font-size: 28px;
     font-weight: 600;
     color: #910782;
+
+    @media (max-width: 991px) {
+      line-height: 2;
+    }
+
+    @media (max-width: 767px) {
+      margin-bottom: 1rem;
+      font-size: 22px;
+    }
   }
 
   .bg-img {
@@ -3254,16 +3275,29 @@
     position: relative;
     margin: 80px auto 160px;
 
+    @media (max-width: 991px) {
+      flex-direction: column;
+      align-items: center;
+      margin: 60px auto;
+    }
+
     .bg-img {
-      top: -230px;
+      top: -185px;
       opacity: 0.3;
     }
 
     .main-img {
       width: 25vw;
-      height: 180px;
+      height: 205px;
       max-width: 100%;
       object-fit: cover;
+
+      @media (max-width: 991px) {
+        width: 100%;
+        height: auto;
+        max-width: 650px;
+        margin: 1rem auto;
+      }
     }
 
     .arrow-img {
@@ -3271,6 +3305,12 @@
       margin: 0 1vw;
       max-width: 100%;
       object-fit: contain;
+
+      @media (max-width: 991px) {
+        width: 10vw;
+        margin: 0 5vw;
+        transform: rotate(90deg);
+      }
     }
   }
 
@@ -3282,10 +3322,66 @@
       right: 13vw;
       top: 3vw;
       font-size: 20px;
+
+      @media (max-width: 1200px) {
+        right: 10vw;
+        top: 2vw;
+      }
+
+      @media (max-width: 991px) {
+        right: 5vw;
+        top: 5vw;
+        font-size: 16px;
+      }
+
+      @media (max-width: 767px) {
+        top: 6vw;
+        font-size: 14px;
+      }
+
+      @media (max-width: 575px) {
+        top: 8vw;
+      }
     }
 
     .ai {
       right: 6vw;
+
+      @media (max-width: 1200px) {
+        right: 2vw;
+      }
+
+      @media (max-width: 991px) {
+        right: -2vw;
+      }
+
+      @media (max-width: 767px) {
+        right: -5vw;
+      }
+
+      @media (max-width: 575px) {
+        right: 13vw;
+      }
+    }
+
+    img {
+      @media (max-width: 1200px) {
+        margin-left: -20px;
+      }
+
+      @media (max-width: 991px) {
+        max-width: 120%;
+        margin-top: 20px;
+      }
+
+      @media (max-width: 767px) {
+        max-width: 40vw;
+        margin-top: 30px;
+      }
+
+      @media (max-width: 575px) {
+        max-width: 50vw;
+      }
     }
   }
 
@@ -3339,6 +3435,11 @@
     margin: auto;
     display: flex;
     flex-direction: column;
+    position: relative;
+
+    @media (max-width: 575px) {
+      font-size: 14px;
+    }
 
     p {
       margin: 0;
@@ -3346,12 +3447,17 @@
       position: absolute;
     }
 
+    .circle {
+      width: 600px;
+      left: -30vw;
+      top: 300px;
+      z-index: -100;
+      position: absolute;
+    }
+
     .q-item,
     .a-item {
       position: relative;
-      // padding: 20px;
-      // background-size: contain;
-      // background-repeat: no-repeat;
     }
 
     .q-item {
@@ -3367,6 +3473,7 @@
         img {
           width: 380px;
           height: 120px;
+          margin-bottom: 10px;
         }
 
         p {
@@ -3378,6 +3485,7 @@
         img {
           width: 255px;
           height: 110px;
+          margin-bottom: 30px;
         }
 
         p {
@@ -3389,6 +3497,7 @@
         img {
           width: 315px;
           height: 120px;
+          margin-bottom: 25px;
         }
 
         p {
@@ -3400,10 +3509,19 @@
         img {
           width: 470px;
           height: 115px;
+          margin-bottom: 35px;
+
+          @media (max-width: 575px) {
+            width: 400px;
+          }
         }
 
         p {
           left: 40px;
+
+          @media (max-width: 575px) {
+            left: 30px;
+          }
         }
       }
 
@@ -3411,6 +3529,7 @@
         img {
           width: 210px;
           height: 110px;
+          margin-bottom: 35px;
         }
 
         p {
@@ -3432,12 +3551,22 @@
         img {
           width: 550px;
           height: 210px;
+          margin-bottom: -20px;
+
+          @media (max-width: 575px) {
+            width: 400px;
+            height: 225px;
+          }
         }
 
         p {
           width: 435px;
           top: 53px;
           right: 53px;
+
+          @media (max-width: 575px) {
+            width: 300px;
+          }
         }
       }
 
@@ -3457,8 +3586,11 @@
   }
 
   #form {
-    max-width: 900px;
     margin: 100px auto;
+
+    @media (max-width: 991px) {
+      margin: 50px auto 100px;
+    }
   }
 }