Home Esplora Aiuto
Registrati Accedi
choozmo
/
AI_Video_LP
4
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

update

SyuanYu 3 mesi fa
parent
c6b8312542
commit
683c0483e7
34 ha cambiato i file con 541 aggiunte e 55 eliminazioni
Visualizzazione unificata Mostra Diff Stats
  1. 175 0
      layouts/ai-transform-video/single.html
  2. 75 8
      static/css/contact/styles-contact.css
  3. 0 0
      static/css/contact/styles-contact.css.map
  4. 207 25
      static/css/style.css
  5. 0 0
      static/css/style.css.map
  6. 81 22
      static/css/style.scss
  7. BIN
      static/imgs/dm/ai-video/SaaS-03.webp
  8. BIN
      static/imgs/dm/ai-video/SaaS-04.webp
  9. BIN
      static/imgs/dm/ai-video/SaaS-05.webp
  10. BIN
      static/imgs/dm/ai-video/SaaS-06.webp
  11. BIN
      static/imgs/dm/ai-video/SaaS-07.webp
  12. BIN
      static/imgs/dm/ai-video/SaaS-08.webp
  13. BIN
      static/imgs/dm/ai-video/SaaS-09.webp
  14. BIN
      static/imgs/dm/ai-video/SaaS-10.webp
  15. BIN
      static/imgs/dm/ai-video/SaaS-11.webp
  16. BIN
      static/imgs/dm/ai-video/SaaS-12.webp
  17. BIN
      static/imgs/dm/ai-video/SaaS-13.webp
  18. BIN
      static/imgs/dm/ai-video/SaaS-14.webp
  19. BIN
      static/imgs/dm/ai-video/SaaS-15.webp
  20. BIN
      static/imgs/dm/ai-video/SaaS-16.webp
  21. BIN
      static/imgs/dm/ai-video/SaaS_s2.webp
  22. BIN
      static/imgs/dm/ai-video/style0.webp
  23. BIN
      static/imgs/dm/ai-video/style1.webp
  24. BIN
      static/imgs/dm/ai-video/style10.webp
  25. BIN
      static/imgs/dm/ai-video/style11.webp
  26. BIN
      static/imgs/dm/ai-video/style2.webp
  27. BIN
      static/imgs/dm/ai-video/style3.webp
  28. BIN
      static/imgs/dm/ai-video/style4.webp
  29. BIN
      static/imgs/dm/ai-video/style5.webp
  30. BIN
      static/imgs/dm/ai-video/style6.webp
  31. BIN
      static/imgs/dm/ai-video/style7.webp
  32. BIN
      static/imgs/dm/ai-video/style8.webp
  33. BIN
      static/imgs/dm/ai-video/style9.webp
  34. 3 0
      webSite/content/ai-transform-video/dm.md

+ 175 - 0
layouts/ai-transform-video/single.html
Vedi File 

@@ -0,0 +1,175 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1">
 
+  <meta http-equiv="Cache-Control" content="no-cache">
 
+  <title>ChoozMo 現有影片 AI 化 | 將您的現有影片轉變成 AI 影片 | 集仕多</title>
 
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
 
+    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
+  <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.11.2/css/all.css">
 
+  <link rel="stylesheet" href="/css/style.css">
 
+  <!-- Start of HubSpot Embed Code -->
 
+  <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script>
 
+  <!-- End of HubSpot Embed Code -->
 
+
 
+  <!-- Google Tag Manager -->
 
+  <script>(function (w, d, s, l, i) {
 
+      w[l] = w[l] || []; w[l].push({
 
+        'gtm.start':
 
+          new Date().getTime(), event: 'gtm.js'
 
+      }); var f = d.getElementsByTagName(s)[0],
 
+        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
 
+          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
 
+    })(window, document, 'script', 'dataLayer', 'GTM-MTWWP3G');</script>
 
+  <!-- End Google Tag Manager -->
 
+
 
+  <!-- Google tag (gtag.js) -->
 
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-G5H9MMGQFM"></script>
 
+  <script>
 
+    window.dataLayer = window.dataLayer || [];
 
+    function gtag() { dataLayer.push(arguments); }
 
+    gtag('js', new Date());
 
+
 
+    gtag('config', 'G-G5H9MMGQFM');
 
+  </script>
 
+
 
+  <!-- Global site tag (gtag.js) - Google Ads: 474336061 -->
 
+  <script async src="https://www.googletagmanager.com/gtag/js?id=AW-474336061"></script>
 
+  <script>
 
+    window.dataLayer = window.dataLayer || [];
 
+    function gtag() { dataLayer.push(arguments); }
 
+    gtag('js', new Date());
 
+
 
+    gtag('config', 'AW-474336061');
 
+  </script>
 
+</head>
 
+
 
+<body>
 
+  {{ partial "navbar.html" . }}
 
+  <main id="ai-video">
 
+    <section class="container-fluid p-0 overflow-hidden">
 
+      <img src="/imgs/dm/ai-video/SaaS-05.webp" alt="" class="img-fluid">
 
+      <h2>將您的現有影片轉變成AI影片 ChoozMo 讓舊影片煥然一新！</h2>
 
+
 
+      <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">
 
+            <h4 class="main-text">「簡單變換影片風格、增加影片數量</h4>
 
+            <h4 class="ps-5 ms-5 mt-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>
 
+            <p>無論是產品推廣、企業介紹、社交媒體內容，還是個人影片<br>我們的服務都能幫助您實現專業且個性化的虛擬主持人效果
 
+            </p>
 
+          </section>
 
+        </div>
 
+
 
+        <div class="row align-items-center">
 
+          <div class="col-6">
 
+            <section class="text-end">
 
+              <p>這項服務不僅能保存您真實形象的特色，更能提供更多樣化的人物造型<br>字幕風格、背景選擇，滿足不同類型影片的需求</p>
 
+
 
+              <p class="main-text mb-0">想增加影片內容？</p>
 
+              <p>再也不需要花費高額的拍攝費用、場地租借與後期剪輯等繁瑣步驟<br>只需要提供現有影片，我們會幫您轉變為AI影片，往後要增加影片內容<br>或是更換主播造型，都只需要在電腦上就可以完成</p>
 
+
 
+              <p class="mb-0">Choozmo AI 主播同時支援多國語言、高擬真表情管理、準確的對嘴<br>讓您的影片不僅視覺效果出色，幫助您快速抓住觀眾的目光</p>
 
+            </section>
 
+          </div>
 
+          <div class="col-6">
 
+            <img src="/imgs/dm/ai-video/SaaS_s2.webp" alt="" class="img-fluid">
 
+          </div>
 
+
 
+          <div class="col-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>
 
+
 
+              <p>轉變AI主播時，可以保留原始影片中的真人五官 (或是美化)<br>如果原始影片沒有人物略嫌單調，也可以選擇客製化新的代言人！</p>
 
+
 
+              <p class="mb-0">我們會有專人提供諮詢，將抽象的需求化為現實！<br>目前已經有許多客戶合作案例，歡迎洽詢</p>
 
+            </section>
 
+          </div>
 
+
 
+          <div class="col-12">
 
+            <h3 class="main-text">操作流程簡單</h3>
 
+            <p>「只需提供原始影片，以及告知需求，即可開始影片變身！」</p>
 
+
 
+            <div class="process">
 
+              <img src="/imgs/dm/ai-video/SaaS-09.webp" alt="" class="bg-img">
 
+              <img src="/imgs/dm/ai-video/SaaS-13.webp" alt="" class="main-img">
 
+              <img src="/imgs/dm/ai-video/SaaS-07.webp" alt="" class="arrow-img">
 
+              <img src="/imgs/dm/ai-video/style8.webp" alt="" class="main-img">
 
+              <img src="/imgs/dm/ai-video/SaaS-07.webp" alt="" class="arrow-img">
 
+              <img src="/imgs/dm/ai-video/SaaS-14.webp" alt="" class="main-img">
 
+            </div>
 
+          </div>
 
+
 
+          <div class="col-5">
 
+            <section class="text-end">
 
+              <h3 class="main-text">案例</h3>
 
+
 
+              <h5 class="fw-bold mt-3">CIJ株式會社</h5>
 
+
 
+              <p>公司匯報用影片 多不可出現誤植<br>於是將現有影片轉成 AI 主播影片後<br>只需要提供確認的腳本，就可以避免出錯</p>
 
+
 
+              <p>並且不需要再拍攝新的影片<br>也可以透過 ChoozMo SaaS 迅速更新影片資訊</p>
 
+            </section>
 
+          </div>
 
+
 
+          <div class="col-7">
 
+            <img src="/imgs/dm/ai-video/SaaS-11.webp" alt="" class="img-fluid">
 
+          </div>
 
+
 
+          <div class="col-12" style="margin-bottom: -50px;">
 
+            <img src="/imgs/dm/ai-video/SaaS-12.webp" alt="" class="img-fluid">
 
+          </div>
 
+
 
+          <div class="col-6">
 
+            <img src="/imgs/dm/ai-video/SaaS-15.webp" alt="" class="img-fluid">
 
+          </div>
 
+
 
+          <div class="col-6">
 
+            <img src="/imgs/dm/ai-video/SaaS-16.webp" alt="" class="img-fluid">
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </section>
 
+
 
+
 
+
 
+  </main>
 
+
 
+  {{ partial "footer.html" . }}
 
+
 
+  <script type="application/javascript">
 
+    var doNotTrack = false;
 
+    if (!doNotTrack) {
 
+      (function (i, s, o, g, r, a, m) {
 
+        i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
 
+          (i[r].q = i[r].q || []).push(arguments)
 
+        }, i[r].l = 1 * new Date(); a = s.createElement(o),
 
+          m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
 
+      })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
 
+      ga('create', 'UA-153100602-5', 'auto');
 
+
 
+      ga('send', 'pageview');
 
+    }
 
+  </script>
 
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
 
+    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
 
+    crossorigin="anonymous"></script>
 
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
 
+    integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
 
+    crossorigin="anonymous"></script>
 
+</body>
 
+
 
+</html>

+ 75 - 8
static/css/contact/styles-contact.css
Vedi File 

@@ -1,5 +1,7 @@
 
 .navbar .navbar-collapse {
 
 .navbar .navbar-collapse {
 
-  flex-grow: 0;
 
+  -webkit-box-flex: 0;
 
+      -ms-flex-positive: 0;
 
+          flex-grow: 0;
 
 }
 
 }
 
 
 
 .header {
 
 .header {
 
@@ -13,12 +15,14 @@
 
 * {
 
 * {
 
   margin: 0;
 
   margin: 0;
 
   padding: 0;
 
   padding: 0;
 
-  box-sizing: border-box;
 
+  -webkit-box-sizing: border-box;
 
+          box-sizing: border-box;
 
 }
 
 }
 
 
 
 .Contact_Us {
 
 .Contact_Us {
 
   position: relative;
 
   position: relative;
 
 }
 
 }
 
+
 
 .Contact_Us .banner {
 
 .Contact_Us .banner {
 
   width: 100%;
 
   width: 100%;
 
   height: 300px;
 
   height: 300px;
 
@@ -26,48 +30,59 @@
 
   z-index: -1;
 
   z-index: -1;
 
   margin-top: -19vw;
 
   margin-top: -19vw;
 
 }
 
 }
 
+
 
 .Contact_Us .banner h2 {
 
 .Contact_Us .banner h2 {
 
   position: absolute;
 
   position: absolute;
 
   color: #fff;
 
   color: #fff;
 
   top: 7vw;
 
   top: 7vw;
 
   left: 50%;
 
   left: 50%;
 
-  transform: translate(-50%, -50%);
 
+  -webkit-transform: translate(-50%, -50%);
 
+          transform: translate(-50%, -50%);
 
   text-transform: uppercase;
 
   text-transform: uppercase;
 
   letter-spacing: 2px;
 
   letter-spacing: 2px;
 
   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 
   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 
   font-size: 3vw;
 
   font-size: 3vw;
 
 }
 
 }
 
+
 
 .Contact_Us .slick-next::before {
 
 .Contact_Us .slick-next::before {
 
   content: "";
 
   content: "";
 
 }
 
 }
 
+
 
 .Contact_Us .slick-prev::before {
 
 .Contact_Us .slick-prev::before {
 
   content: "";
 
   content: "";
 
 }
 
 }
 
+
 
 .Contact_Us .slick-dots li {
 
 .Contact_Us .slick-dots li {
 
   border-radius: 50%;
 
   border-radius: 50%;
 
 }
 
 }
 
+
 
 .Contact_Us .slick-dots li button::before {
 
 .Contact_Us .slick-dots li button::before {
 
   font-size: 10px;
 
   font-size: 10px;
 
 }
 
 }
 
+
 
 .Contact_Us .slick-dots li.slick-active button:before {
 
 .Contact_Us .slick-dots li.slick-active button:before {
 
   color: #EA5413;
 
   color: #EA5413;
 
   opacity: 1;
 
   opacity: 1;
 
   border-radius: 50%;
 
   border-radius: 50%;
 
   border: 1px solid #EA5413;
 
   border: 1px solid #EA5413;
 
 }
 
 }
 
+
 
 .Contact_Us .text-title {
 
 .Contact_Us .text-title {
 
   margin-top: -90px;
 
   margin-top: -90px;
 
 }
 
 }
 
+
 
 @media screen and (max-width: 576px) {
 
 @media screen and (max-width: 576px) {
 
   .Contact_Us .text-title {
 
   .Contact_Us .text-title {
 
     margin-top: -45px;
 
     margin-top: -45px;
 
   }
 
   }
 
 }
 
 }
 
+
 
 .Contact_Us h1 {
 
 .Contact_Us h1 {
 
   font-weight: 600;
 
   font-weight: 600;
 
   font-size: 32px;
 
   font-size: 32px;
 
   text-align: center;
 
   text-align: center;
 
 }
 
 }
 
+
 
 .Contact_Us hr {
 
 .Contact_Us hr {
 
   width: 5vw;
 
   width: 5vw;
 
   margin: 0 auto;
 
   margin: 0 auto;
 
@@ -75,49 +90,59 @@
 
   opacity: 1 !important;
 
   opacity: 1 !important;
 
   background: #000;
 
   background: #000;
 
 }
 
 }
 
+
 
 @media screen and (max-width: 576px) {
 
 @media screen and (max-width: 576px) {
 
   .Contact_Us hr {
 
   .Contact_Us hr {
 
     width: 15vw;
 
     width: 15vw;
 
   }
 
   }
 
 }
 
 }
 
+
 
 .Contact_Us p {
 
 .Contact_Us p {
 
   margin-top: 15px;
 
   margin-top: 15px;
 
   text-align: center;
 
   text-align: center;
 
   color: #888888;
 
   color: #888888;
 
 }
 
 }
 
+
 
 .Contact_Us .contact_us_title {
 
 .Contact_Us .contact_us_title {
 
   width: 80vw;
 
   width: 80vw;
 
   margin: 0 auto;
 
   margin: 0 auto;
 
   text-align: center;
 
   text-align: center;
 
 }
 
 }
 
+
 
 @media screen and (max-width: 576px) {
 
 @media screen and (max-width: 576px) {
 
   .Contact_Us .contact_us_title {
 
   .Contact_Us .contact_us_title {
 
     width: 100vw;
 
     width: 100vw;
 
   }
 
   }
 
 }
 
 }
 
+
 
 .Contact_Us .service_info {
 
 .Contact_Us .service_info {
 
   padding-top: 100px;
 
   padding-top: 100px;
 
   background-color: #FFEBE2;
 
   background-color: #FFEBE2;
 
   position: relative;
 
   position: relative;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .circle-orange {
 
 .Contact_Us .service_info .circle-orange {
 
   bottom: 10px;
 
   bottom: 10px;
 
   right: 80px;
 
   right: 80px;
 
   width: 180px;
 
   width: 180px;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .content-service {
 
 .Contact_Us .service_info .content-service {
 
   margin-top: 50px;
 
   margin-top: 50px;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .content-service h2 {
 
 .Contact_Us .service_info .content-service h2 {
 
   font-weight: 600;
 
   font-weight: 600;
 
   color: #EA5413;
 
   color: #EA5413;
 
   font-size: 28px;
 
   font-size: 28px;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .content-service ul {
 
 .Contact_Us .service_info .content-service ul {
 
   margin-top: 15px;
 
   margin-top: 15px;
 
   color: #888888;
 
   color: #888888;
 
   padding-left: 1rem;
 
   padding-left: 1rem;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .LearnMore {
 
 .Contact_Us .service_info .LearnMore {
 
   margin-top: 50px;
 
   margin-top: 50px;
 
   padding: 5px 15px;
 
   padding: 5px 15px;
 
@@ -125,51 +150,62 @@
 
   border-radius: 30px;
 
   border-radius: 30px;
 
   background: #EA5413;
 
   background: #EA5413;
 
   color: #fff;
 
   color: #fff;
 
+  -webkit-transition: 0.3s;
 
   transition: 0.3s;
 
   transition: 0.3s;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .LearnMore:hover {
 
 .Contact_Us .service_info .LearnMore:hover {
 
   color: #EA5413;
 
   color: #EA5413;
 
   background: #fff;
 
   background: #fff;
 
 }
 
 }
 
+
 
 @media screen and (max-width: 576px) {
 
 @media screen and (max-width: 576px) {
 
   .Contact_Us .service_info .LearnMore {
 
   .Contact_Us .service_info .LearnMore {
 
     margin-top: 15px;
 
     margin-top: 15px;
 
   }
 
   }
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box-m {
 
 .Contact_Us .service_info .service_slider_Box-m {
 
   width: 80vw;
 
   width: 80vw;
 
   margin: 0 auto;
 
   margin: 0 auto;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box-m .slick-dots {
 
 .Contact_Us .service_info .service_slider_Box-m .slick-dots {
 
   bottom: 270px;
 
   bottom: 270px;
 
   left: 50px;
 
   left: 50px;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box-m .slick-prev {
 
 .Contact_Us .service_info .service_slider_Box-m .slick-prev {
 
   position: absolute;
 
   position: absolute;
 
   left: -20px;
 
   left: -20px;
 
   z-index: 100;
 
   z-index: 100;
 
   top: 130px;
 
   top: 130px;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box-m .slick-next {
 
 .Contact_Us .service_info .service_slider_Box-m .slick-next {
 
   position: absolute;
 
   position: absolute;
 
   right: -10px;
 
   right: -10px;
 
   z-index: 100;
 
   z-index: 100;
 
   top: 130px;
 
   top: 130px;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box {
 
 .Contact_Us .service_info .service_slider_Box {
 
   width: 85vw;
 
   width: 85vw;
 
   margin: 0 auto;
 
   margin: 0 auto;
 
   height: 400px;
 
   height: 400px;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box .slick-dots {
 
 .Contact_Us .service_info .service_slider_Box .slick-dots {
 
   bottom: 40px;
 
   bottom: 40px;
 
   width: 20%;
 
   width: 20%;
 
   left: 90px !important;
 
   left: 90px !important;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box .service_slider {
 
 .Contact_Us .service_info .service_slider_Box .service_slider {
 
   height: 450px;
 
   height: 450px;
 
   position: relative;
 
   position: relative;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box .slick-prev {
 
 .Contact_Us .service_info .service_slider_Box .slick-prev {
 
   position: absolute;
 
   position: absolute;
 
   left: 5px;
 
   left: 5px;
 
@@ -178,6 +214,7 @@
 
   width: 60px;
 
   width: 60px;
 
   height: 60px;
 
   height: 60px;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box .slick-next {
 
 .Contact_Us .service_info .service_slider_Box .slick-next {
 
   position: absolute;
 
   position: absolute;
 
   left: 350px;
 
   left: 350px;
 
@@ -186,10 +223,12 @@
 
   width: 60px;
 
   width: 60px;
 
   height: 60px;
 
   height: 60px;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box {
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box {
 
   position: relative;
 
   position: relative;
 
   margin-top: 50px;
 
   margin-top: 50px;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_seo {
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_seo {
 
   width: 280px;
 
   width: 280px;
 
   position: absolute;
 
   position: absolute;
 
@@ -198,6 +237,7 @@
 
   -o-object-fit: cover;
 
   -o-object-fit: cover;
 
      object-fit: cover;
 
      object-fit: cover;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_video {
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_video {
 
   position: absolute;
 
   position: absolute;
 
   width: 360px;
 
   width: 360px;
 
@@ -206,6 +246,7 @@
 
   -o-object-fit: cover;
 
   -o-object-fit: cover;
 
      object-fit: cover;
 
      object-fit: cover;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_developmentimg {
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_developmentimg {
 
   position: absolute;
 
   position: absolute;
 
   bottom: 100px;
 
   bottom: 100px;
 
@@ -214,6 +255,7 @@
 
   -o-object-fit: cover;
 
   -o-object-fit: cover;
 
      object-fit: cover;
 
      object-fit: cover;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_spiderimg {
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_spiderimg {
 
   position: absolute;
 
   position: absolute;
 
   bottom: 80px;
 
   bottom: 80px;
 
@@ -222,6 +264,7 @@
 
   -o-object-fit: cover;
 
   -o-object-fit: cover;
 
      object-fit: cover;
 
      object-fit: cover;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_bigdataimg {
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_bigdataimg {
 
   position: absolute;
 
   position: absolute;
 
   bottom: -10px;
 
   bottom: -10px;
 
@@ -230,6 +273,7 @@
 
   -o-object-fit: cover;
 
   -o-object-fit: cover;
 
      object-fit: cover;
 
      object-fit: cover;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_googleads {
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_googleads {
 
   position: absolute;
 
   position: absolute;
 
   bottom: 10px;
 
   bottom: 10px;
 
@@ -238,10 +282,12 @@
 
   -o-object-fit: cover;
 
   -o-object-fit: cover;
 
      object-fit: cover;
 
      object-fit: cover;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img6 {
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img6 {
 
   position: relative;
 
   position: relative;
 
   bottom: 50px;
 
   bottom: 50px;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img1 {
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img1 {
 
   position: relative;
 
   position: relative;
 
   left: 15px;
 
   left: 15px;
 
@@ -249,12 +295,14 @@
 
   -o-object-fit: cover;
 
   -o-object-fit: cover;
 
      object-fit: cover;
 
      object-fit: cover;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img2 {
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img2 {
 
   position: relative;
 
   position: relative;
 
   bottom: 50px;
 
   bottom: 50px;
 
   -o-object-fit: cover;
 
   -o-object-fit: cover;
 
      object-fit: cover;
 
      object-fit: cover;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img3 {
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img3 {
 
   position: relative;
 
   position: relative;
 
   left: 15px;
 
   left: 15px;
 
@@ -262,70 +310,89 @@
 
   -o-object-fit: cover;
 
   -o-object-fit: cover;
 
      object-fit: cover;
 
      object-fit: cover;
 
 }
 
 }
 
+
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img4 {
 
 .Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img4 {
 
   position: relative;
 
   position: relative;
 
   bottom: 80px;
 
   bottom: 80px;
 
   -o-object-fit: cover;
 
   -o-object-fit: cover;
 
      object-fit: cover;
 
      object-fit: cover;
 
 }
 
 }
 
+
 
 .Contact_Us #contact_box {
 
 .Contact_Us #contact_box {
 
   overflow: hidden;
 
   overflow: hidden;
 
   background: #fff;
 
   background: #fff;
 
 }
 
 }
 
+
 
 .Contact_Us .Contact_Information {
 
 .Contact_Us .Contact_Information {
 
   width: 90vw;
 
   width: 90vw;
 
   margin: 0 auto;
 
   margin: 0 auto;
 
   position: relative;
 
   position: relative;
 
   padding-bottom: 130px;
 
   padding-bottom: 130px;
 
 }
 
 }
 
+
 
 @media screen and (max-width: 576px) {
 
 @media screen and (max-width: 576px) {
 
   .Contact_Us .Contact_Information {
 
   .Contact_Us .Contact_Information {
 
     width: 100vw;
 
     width: 100vw;
 
   }
 
   }
 
 }
 
 }
 
+
 
 .Contact_Us .Contact_Information .Contact_Information_title {
 
 .Contact_Us .Contact_Information .Contact_Information_title {
 
   text-align: center;
 
   text-align: center;
 
 }
 
 }
 
+
 
 .Contact_Us .Contact_Information .Contact_Information_title .choozmo {
 
 .Contact_Us .Contact_Information .Contact_Information_title .choozmo {
 
   width: 640px;
 
   width: 640px;
 
 }
 
 }
 
+
 
 @media screen and (max-width: 576px) {
 
 @media screen and (max-width: 576px) {
 
   .Contact_Us .Contact_Information .Contact_Information_title .choozmo {
 
   .Contact_Us .Contact_Information .Contact_Information_title .choozmo {
 
     width: 90vw;
 
     width: 90vw;
 
   }
 
   }
 
 }
 
 }
 
+
 
 .Contact_Us .Contact_Information .Contact_Information_title .text-title {
 
 .Contact_Us .Contact_Information .Contact_Information_title .text-title {
 
   margin-top: -100px;
 
   margin-top: -100px;
 
 }
 
 }
 
+
 
 @media screen and (max-width: 576px) {
 
 @media screen and (max-width: 576px) {
 
   .Contact_Us .Contact_Information .Contact_Information_title .text-title {
 
   .Contact_Us .Contact_Information .Contact_Information_title .text-title {
 
     margin-top: -60px;
 
     margin-top: -60px;
 
   }
 
   }
 
 }
 
 }
 
+
 
 .Contact_Us .Contact_Information .Contact_Information_title .qrcode {
 
 .Contact_Us .Contact_Information .Contact_Information_title .qrcode {
 
   width: 350px;
 
   width: 350px;
 
 }
 
 }
 
+
 
 .Contact_Us .Contact_Information .contact-text {
 
 .Contact_Us .Contact_Information .contact-text {
 
   margin-top: -50px;
 
   margin-top: -50px;
 
 }
 
 }
 
+
 
 .Contact_Us .circle {
 
 .Contact_Us .circle {
 
   position: absolute;
 
   position: absolute;
 
   bottom: -300px;
 
   bottom: -300px;
 
   left: -350px;
 
   left: -350px;
 
 }
 
 }
 
+
 
 @-webkit-keyframes drift {
 
 @-webkit-keyframes drift {
 
   0% {
 
   0% {
 
-    transform: rotate(0deg);
 
+    -webkit-transform: rotate(0deg);
 
+            transform: rotate(0deg);
 
   }
 
   }
 
   100% {
 
   100% {
 
-    transform: rotate(360deg);
 
+    -webkit-transform: rotate(360deg);
 
+            transform: rotate(360deg);
 
   }
 
   }
 
 }
 
 }
 
+
 
 @keyframes drift {
 
 @keyframes drift {
 
   0% {
 
   0% {
 
-    transform: rotate(0deg);
 
+    -webkit-transform: rotate(0deg);
 
+            transform: rotate(0deg);
 
   }
 
   }
 
   100% {
 
   100% {
 
-    transform: rotate(360deg);
 
+    -webkit-transform: rotate(360deg);
 
+            transform: rotate(360deg);
 
   }
 
   }
 
-}/*# sourceMappingURL=styles-contact.css.map */
 
+}
 
+/*# sourceMappingURL=styles-contact.css.map */

File diff suppressed because it is too large
+ 0 - 0
static/css/contact/styles-contact.css.map


File diff suppressed because it is too large
+ 207 - 25
static/css/style.css


File diff suppressed because it is too large
+ 0 - 0
static/css/style.css.map


+ 81 - 22
static/css/style.scss
Vedi File 

@@ -47,10 +47,10 @@
 
     border: 1px solid #ea5413;
 
     border: 1px solid #ea5413;
 
     background-color: #ea5413;
 
     background-color: #ea5413;
 
     border-radius: 3rem;
 
     border-radius: 3rem;
 
-    transition: all .3s;
 
+    transition: all 0.3s;
 
 
 
     &:hover {
 
     &:hover {
 
-      opacity: .8;
 
+      opacity: 0.8;
 
     }
 
     }
 
 
 
     @media (max-width: 1400px) {
 
     @media (max-width: 1400px) {
 
@@ -1304,7 +1304,7 @@
 
   border: none;
 
   border: none;
 
   text-decoration: none;
 
   text-decoration: none;
 
   background-color: #fff;
 
   background-color: #fff;
 
-  color: rgba(0, 0, 0, .55);
 
+  color: rgba(0, 0, 0, 0.55);
 
 }
 
 }
 
 
 
 #home {
 
 #home {
 
@@ -1638,7 +1638,9 @@
 
 }
 
 }
 
 
 
 .loaded {
 
 .loaded {
 
-  box-shadow: 0 4px 8px 0 #3569804d, 0 6px 20px 0 #a5c8d569;
 
+  box-shadow:
 
+    0 4px 8px 0 #3569804d,
 
+    0 6px 20px 0 #a5c8d569;
 
   margin-bottom: 4rem;
 
   margin-bottom: 4rem;
 
 }
 
 }
 
 
 
@@ -1839,7 +1841,6 @@
 
 }
 
 }
 
 
 
 @media (max-width: 767px) {
 
 @media (max-width: 767px) {
 
-
 
   // .header {
 
   // .header {
 
   //   height: 70vh;
 
   //   height: 70vh;
 
   // }
 
   // }
 
@@ -2626,7 +2627,7 @@
 
   }
 
   }
 
 
 
   .card-content {
 
   .card-content {
 
-    &>div {
 
+    & > div {
 
       display: flex;
 
       display: flex;
 
       flex-direction: column;
 
       flex-direction: column;
 
       // border: 2px solid #ffebe2;
 
       // border: 2px solid #ffebe2;
 
@@ -3213,6 +3214,65 @@
 
 
 
 /* seo End */
 
 /* seo End */
 
 
 
+/* ai-video Start */
 
+
 
+#ai-video {
 
+  h2 {
 
+    padding: 10px;
 
+    font-weight: 600;
 
+    text-align: center;
 
+    color: #fff;
 
+    background-color: #910782;
 
+  }
 
+
 
+  p {
 
+    font-weight: 600;
 
+    color: #474047;
 
+    line-height: 2.5;
 
+  }
 
+
 
+  .main-text {
 
+    font-size: 28px;
 
+    font-weight: 600;
 
+    color: #910782;
 
+  }
 
+
 
+  .bg-img {
 
+    width: 100%;
 
+    position: absolute;
 
+    top: 50px;
 
+    z-index: -1;
 
+    transform: scale(1.15);
 
+  }
 
+
 
+  .process {
 
+    display: flex;
 
+    position: relative;
 
+    margin: 80px auto 160px;
 
+
 
+    .bg-img {
 
+      top: -230px;
 
+      opacity: 0.3;
 
+    }
 
+
 
+    .main-img {
 
+      width: 25vw;
 
+      height: 180px;
 
+      max-width: 100%;
 
+      object-fit: cover;
 
+    }
 
+
 
+    .arrow-img {
 
+      width: 5vw;
 
+      margin: 0 1vw;
 
+      max-width: 100%;
 
+      object-fit: contain;
 
+    }
 
+  }
 
+}
 
+
 
+/* ai-video End */
 
+
 
 /* youtube-views Start */
 
 /* youtube-views Start */
 
 
 
 #youtube-views,
 
 #youtube-views,
 
@@ -3294,7 +3354,7 @@
 
       filter: invert(33%) sepia(55%) saturate(2232%) hue-rotate(357deg) brightness(102%) contrast(89%);
 
       filter: invert(33%) sepia(55%) saturate(2232%) hue-rotate(357deg) brightness(102%) contrast(89%);
 
     }
 
     }
 
 
 
-    .content>div {
 
+    .content > div {
 
       margin-bottom: 40px;
 
       margin-bottom: 40px;
 
       padding: 0px 15px;
 
       padding: 0px 15px;
 
       border-left: 1px solid rgba(0, 0, 0, 0.125);
 
       border-left: 1px solid rgba(0, 0, 0, 0.125);
 
@@ -3696,7 +3756,7 @@
 
     .row {
 
     .row {
 
       padding: 0 5vw;
 
       padding: 0 5vw;
 
 
 
-      &>div {
 
+      & > div {
 
         display: flex;
 
         display: flex;
 
         flex-direction: column;
 
         flex-direction: column;
 
         align-items: center;
 
         align-items: center;
 
@@ -4287,15 +4347,15 @@
 
       }
 
       }
 
     }
 
     }
 
 
 
-    .table-striped>tbody>tr:nth-child(odd)>td,
 
-    .table-striped>tbody>tr:nth-child(odd)>th {
 
+    .table-striped > tbody > tr:nth-child(odd) > td,
 
+    .table-striped > tbody > tr:nth-child(odd) > th {
 
       box-shadow: none;
 
       box-shadow: none;
 
       background-color: #fdeae1;
 
       background-color: #fdeae1;
 
       border-bottom-width: 0px !important;
 
       border-bottom-width: 0px !important;
 
     }
 
     }
 
 
 
-    .table-striped>tbody>tr:nth-child(even)>td,
 
-    .table-striped>tbody>tr:nth-child(even)>th {
 
+    .table-striped > tbody > tr:nth-child(even) > td,
 
+    .table-striped > tbody > tr:nth-child(even) > th {
 
       border-bottom-width: 0px !important;
 
       border-bottom-width: 0px !important;
 
     }
 
     }
 
 
 
@@ -5228,7 +5288,6 @@
 
     padding: 50px 30px;
 
     padding: 50px 30px;
 
   }
 
   }
 
 
 
-
 
   form {
 
   form {
 
     margin: auto;
 
     margin: auto;
 
     max-width: 600px;
 
     max-width: 600px;
 
@@ -5257,10 +5316,10 @@
 
   border: 1px solid #ea5413;
 
   border: 1px solid #ea5413;
 
   border-radius: 5px;
 
   border-radius: 5px;
 
   text-decoration: none;
 
   text-decoration: none;
 
-  transition: all .3s;
 
+  transition: all 0.3s;
 
 
 
   &:hover {
 
   &:hover {
 
-    opacity: .8;
 
+    opacity: 0.8;
 
     color: #fff;
 
     color: #fff;
 
   }
 
   }
 
 }
 
 }
 
@@ -5277,7 +5336,7 @@
 
   img {
 
   img {
 
     width: 63px;
 
     width: 63px;
 
     height: 63px;
 
     height: 63px;
 
-    transition: all .2s ease-in-out;
 
+    transition: all 0.2s ease-in-out;
 
 
 
     &:hover {
 
     &:hover {
 
       width: 68px;
 
       width: 68px;
 
@@ -5312,10 +5371,10 @@
 
   a {
 
   a {
 
     font-weight: bold;
 
     font-weight: bold;
 
     border-bottom: 1px solid #000;
 
     border-bottom: 1px solid #000;
 
-    transition: all .2s;
 
+    transition: all 0.2s;
 
 
 
     &:hover {
 
     &:hover {
 
-      opacity: .8;
 
+      opacity: 0.8;
 
     }
 
     }
 
   }
 
   }
 
 
 
@@ -5326,10 +5385,10 @@
 
     border: none;
 
     border: none;
 
     border-radius: 5px;
 
     border-radius: 5px;
 
     background-color: #ea5413;
 
     background-color: #ea5413;
 
-    transition: all .2s;
 
+    transition: all 0.2s;
 
 
 
     &:hover {
 
     &:hover {
 
-      opacity: .8;
 
+      opacity: 0.8;
 
     }
 
     }
 
   }
 
   }
 
 }
 
 }
 
@@ -5376,6 +5435,6 @@
 
   }
 
   }
 
 
 
   .accordion-item:not(:first-of-type) {
 
   .accordion-item:not(:first-of-type) {
 
-    border-top: 1px solid rgba(0, 0, 0, .125);
 
+    border-top: 1px solid rgba(0, 0, 0, 0.125);
 
   }
 
   }
 
-}
 
+}

BIN
static/imgs/dm/ai-video/SaaS-03.webp
Vedi File


BIN
static/imgs/dm/ai-video/SaaS-04.webp
Vedi File


BIN
static/imgs/dm/ai-video/SaaS-05.webp
Vedi File


BIN
static/imgs/dm/ai-video/SaaS-06.webp
Vedi File


BIN
static/imgs/dm/ai-video/SaaS-07.webp
Vedi File


BIN
static/imgs/dm/ai-video/SaaS-08.webp
Vedi File


BIN
static/imgs/dm/ai-video/SaaS-09.webp
Vedi File


BIN
static/imgs/dm/ai-video/SaaS-10.webp
Vedi File


BIN
static/imgs/dm/ai-video/SaaS-11.webp
Vedi File


BIN
static/imgs/dm/ai-video/SaaS-12.webp
Vedi File


BIN
static/imgs/dm/ai-video/SaaS-13.webp
Vedi File


BIN
static/imgs/dm/ai-video/SaaS-14.webp
Vedi File


BIN
static/imgs/dm/ai-video/SaaS-15.webp
Vedi File


BIN
static/imgs/dm/ai-video/SaaS-16.webp
Vedi File


BIN
static/imgs/dm/ai-video/SaaS_s2.webp
Vedi File


BIN
static/imgs/dm/ai-video/style0.webp
Vedi File


BIN
static/imgs/dm/ai-video/style1.webp
Vedi File


BIN
static/imgs/dm/ai-video/style10.webp
Vedi File


BIN
static/imgs/dm/ai-video/style11.webp
Vedi File


BIN
static/imgs/dm/ai-video/style2.webp
Vedi File


BIN
static/imgs/dm/ai-video/style3.webp
Vedi File


BIN
static/imgs/dm/ai-video/style4.webp
Vedi File


BIN
static/imgs/dm/ai-video/style5.webp
Vedi File


BIN
static/imgs/dm/ai-video/style6.webp
Vedi File


BIN
static/imgs/dm/ai-video/style7.webp
Vedi File


BIN
static/imgs/dm/ai-video/style8.webp
Vedi File


BIN
static/imgs/dm/ai-video/style9.webp
Vedi File


+ 3 - 0
webSite/content/ai-transform-video/dm.md
Vedi File 

@@ -0,0 +1,3 @@
 
++++
 
+title = "ChoozMo 現有影片 AI 化"
 
++++

Some files were not shown because too many files changed in this diff