Home Explore Help
Register Sign In
choozmo
/
AI_Video_LP
4
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

update css

SyuanYu 1 month ago
parent
41f5dbfbf0
commit
83e92bc586
37 changed files with 1302 additions and 866 deletions
Split View Show Diff Stats
  1. 2 2
      layouts/_default/list.html
  2. 2 1
      layouts/_default/single.html
  3. 3 3
      layouts/_default/taxonomy.html
  4. 5 5
      layouts/aboutus/single_back.html
  5. 263 272
      layouts/ai-customer/single.html
  6. 16 16
      layouts/contact/single.html
  7. 1 1
      layouts/partials/breadcrumbs.html
  8. 10 10
      layouts/partials/comparison.html
  9. 1 1
      layouts/partials/features.html
  10. 5 5
      layouts/partials/footer_default.html
  11. 5 2
      layouts/partials/head.html
  12. 3 3
      layouts/partials/manywords.html
  13. 1 1
      layouts/partials/newsanchor.html
  14. 4 4
      layouts/partials/scripts.html
  15. 87 45
      layouts/partials/seo.html
  16. 3 3
      layouts/partials/steps.html
  17. 4 4
      layouts/partials/testimonials.html
  18. 4 4
      layouts/partials/trends.html
  19. 15 15
      layouts/partials/videoDemo.html
  20. 3 3
      layouts/partials/videos.html
  21. 1 1
      layouts/partials/visualfeature.html
  22. 87 45
      layouts/partials/vtuber.html
  23. 36 15
      layouts/shortcodes/seo.html
  24. 478 220
      layouts/shortcodes/vtuber.html
  25. 8 8
      layouts/shortcodes/vtuberlist.html
  26. 14 14
      layouts/shortcodes/what-is-seo-list.html
  27. 20 20
      layouts/trends/single.html
  28. 3 3
      static/css/contact/styles-contact.css
  29. 1 1
      static/css/contact/styles-contact.scss
  30. 145 100
      static/css/custom.css
  31. 10 8
      static/css/style.css
  32. 0 0
      static/css/style.css.map
  33. 49 20
      static/css/style.default.css
  34. 10 8
      static/css/style.scss
  35. 1 1
      static/css/style.web3.css
  36. 1 1
      webSite/content/tags/vtuber-list/_index.md
  37. 1 1
      webSite/var/www/html/collaboration/index.html

+ 2 - 2
layouts/_default/list.html
View File 

@@ -7,12 +7,12 @@
 
 
   <div id="all">
 
 
-    {{ partial "nav.html" . }}
 
+    {{ partial "navbar.html" . }}
 
 
     {{ partial "breadcrumbs.html" . }}
 
 
     <div id="content">
 
-      <div class="container">
 
+      <div class="container pt-5">
 
         <div class="row">
 
           <div class="col-md-9" id="blog-listing-medium">

+ 2 - 1
layouts/_default/single.html
View File 

@@ -10,7 +10,8 @@
 
   <!-- End Google Tag Manager (noscript) -->
 
 
   <div id="all">
 
-    {{ partial "nav.html" . }}
 
+    {{ partial "navbar.html" . }}
 
+    <!-- {{ partial "nav.html" . }} -->
 
 
     {{ partial "breadcrumbs.html" . }}

+ 3 - 3
layouts/_default/taxonomy.html
View File 

@@ -5,13 +5,13 @@
 
 
 <body>
 
   <div id="all" style="overflow-x: hidden;">
 
-
 
-    {{ partial "nav.html" . }}
 
+    {{ partial "navbar.html" . }}
 
+    <!-- {{ partial "nav.html" . }} -->
 
     {{ partial "breadcrumbs.html" . }}
 
 
     <div id="content">
 
       {{ .Content }}
 
-      <div class="container container_list">
 
+      <div class="container container-list">
 
         <div class="row">
 
           <div class="col-md-9" id="blog-listing-medium">

+ 5 - 5
layouts/aboutus/single_back.html
View File 

@@ -68,16 +68,16 @@
 
 
   </main>
 
   <footer class="footer">
 
-    <div class="container container__footer">
 
+    <div class="container container-footer">
 
       <div class="row">
 
         <div class="col-6">
 
           <h4>About us</h4>
 
           <a href="http://www.choozmo.com/"><img src="/imgs/logo_choozmo.webp" class="footer-img"></a>
 
           <div class="followus">
 
-            <span class="followus__txt">關注我們</span>
 
-            <a href="https://www.youtube.com/channel/UCi3jHOCCmx0Zyl2ZvoHzHQg" class="followus__img"><img
 
+            <span class="followus-txt">關注我們</span>
 
+            <a href="https://www.youtube.com/channel/UCi3jHOCCmx0Zyl2ZvoHzHQg" class="followus-img"><img
 
                 src="/imgs/youtube-new-flat-logo-1.png" alt="" width="32px" height="32px"></a>
 
-            <a href="https://line.me/R/ti/p/@choozmo?from=page" class="followus__img"><img src="/imgs/line.png"
 
+            <a href="https://line.me/R/ti/p/@choozmo?from=page" class="followus-img"><img src="/imgs/line.png"
 
                 alt=""></a>
 
             <br>
 
             <a href="" class="followus__btn">訂閱電子報<i class="fas fa-envelope"></i></a>
 
@@ -86,7 +86,7 @@
 
         </div>
 
         <!-- <div class="col-md-4 col-6">
 
                 <div>
 
-                    <p class="footer__btn__text">想洽詢我們的專案製作嗎？</p>
 
+                    <p class="footer-btn-text">想洽詢我們的專案製作嗎？</p>
 
                     <a href="/contact/service/" class="btn btn-lg">洽詢專案製作</a>
 
                 </div>
 
             </div> -->

+ 263 - 272
layouts/ai-customer/single.html
View File 

@@ -14,12 +14,12 @@
 
 
   .container p {
 
     font-size: 16px;
 
-    letter-spacing: 3px;
 
+    letter-spacing: 2px;
 
     line-height: 32px;
 
     margin-bottom: 50px;
 
   }
 
 
-  .container {
 
+  /* .container {
 
     max-width: 50%;
 
   }
 
 
@@ -39,7 +39,7 @@
 
     .container {
 
       max-width: 50%;
 
     }
 
-  }
 
+  } */
 
 
   .video-box {
 
     width: 100%;
 
@@ -50,306 +50,302 @@
 
 <body>
 
   {{ partial "navbar.html" . }}
 
 
-  <section class="aicustomerSec01">
 
-    <img class="img-fluid" src="/img/aicustomer/choozmoAiCustomer.webp" alt="choozmoAiCustomer">
 
-    <div class="aicustomerSec01_cta_arrow text-center">
 
-      <a href="#ctablock">
 
-        <div class="arrow-wave">
 
-          <span></span>
 
-          <span></span>
 
-
 
-        </div>
 
-      </a>
 
-    </div>
 
-
 
-  </section>
 
-
 
-  <section class="aicustoerSec02">
 
-    <h2 class="aicustoerSec02-title">
 
-      ChoozMo AI 客服優勢
 
-    </h2>
 
-    <img class="aicustomer-title-line" src="/img/aicustomer/aicustomer-title.png" alt="">
 
-    <div class="mt-4">
 
-      <div class="container">
 
-        <div class="video-box mb-5">
 
-          <iframe src="https://www.youtube.com/embed/fqLmn1OLH74" title="YouTube video player" frameborder="0"
 
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 
-            allowfullscreen></iframe>
 
-        </div>
 
-        <p>隨著人工智慧（AI）技術的快速發展，AI智能客服逐漸成為現代企業提升客戶體驗的核心工具之一。透過高度擬真的AI技術和影像識別能力，企業能夠打造出具有人格化、互動性強的客服代表，為顧客提供更加個性化和高效的服務。
 
-        </p>
 
-        <div class="d-flex justify-content-center mb-5">
 
-          <a href="#news-form" class="submit-btn mb-3"> 立即諮詢</a>
 
-        </div>
 
-        <h3 id="一建生成AI客服"><strong> 一鍵生成AI客服</strong></h3>
 
-        <img class="img-fluid" src="/img/aicustomer/webv1.webp" alt="">
 
-        <p>
 
-          一鍵生成AI客服，支持手機、平板、Kiosk、電腦等多種裝置，實現無縫跨平台體驗。數字人虛擬形象，精準對嘴互動，提供多語言服務，讓顧客享受真實流暢的對話體驗。專屬後台管理系統，簡單自訂客服流程，快速響應顧客需求，有效提升客戶滿意度及品牌形象，幫助企業更高效地運營與拓展。
 
-        </p>
 
-        <h3 id="高度擬真Ai技術"><strong> 高度擬真AI客服技術</strong></h3>
 
-        <p>AI智能影像客服的核心技術基於Generative
 
-          AI（生成式人工智慧）和深度學習模型，能夠生成具備擬真外觀與語言的客服人物。這些虛擬客服不僅能夠模擬真人的面部表情、肢體動作，還能進行流暢的語音對話，讓客戶在互動中有更真實、更具情感的體驗。無論是基本的查詢、複雜的問題解答，還是情感交互，AI客服都能靈活應對，並提升整體的客戶滿意度。
 
-        </p>
 
-        <h3 id="語言多樣性"><strong> 語言多樣性與市場拓展</strong></h3>
 
-        <p>
 
-          自家訓練的語言模型（LLM）支持超過20種語言，涵蓋全球多個市場的語言需求，從英語、中文、西班牙語到日語、韓語等，無論在哪個語言區域，企業都能提供無縫的客服體驗。這樣的語言多樣性不僅能夠打破語言障礙，還能幫助企業進一步拓展國際市場，實現全球化業務的快速推廣。
 
-        </p>
 
-
 
-        <h3 id="語言多樣性"><strong>24/7 全天候服務</strong></h3>
 
-        <p>
 
-          AI智能影像客服最大的一個優勢在於其無需休息的特性。它能夠實現24小時全天候服務，即使在高峰期或非工作時間，依然能快速回應顧客的查詢和需求。無論是跨時區的用戶，還是緊急的技術支持需求，都可以即時處理，進一步提升了顧客的滿意度與忠誠度，從而促進企業與客戶之間長期穩定的關係。
 
-        </p>
 
-        <img class="img-fluid mb-5" src="/img/aicustomer/aicustomer.webp" alt="">
 
-        <h3 id="語言多樣性"><strong>ChooZmo AI智能客服應用實例</strong></h3>
 
-        <img class="img-fluid" src="/img/aicustomer/2024meettaipei.webp" alt="">
 
-        <p> ▲ 2024 Meet Taipei 創新創業嘉年華開幕式展現出數位時代專屬AI主播魏時黛參與互動</p>
 
-        <img class="img-fluid mb-3" src="/img/aicustomer/aicustomer3.webp" alt="">
 
-        <p> ▲ 零售場域導入AI客服，提供中英日韓多語言服務，機場專櫃整合引導，提升顧客互動體驗。</p>
 
-        <img class="img-fluid mb-3" src="/img/aicustomer/aicustomer4.webp" alt="">
 
-
 
-        <p> ▲ 日照中心導入台語AI客服，提供親切流暢的語音互動，提升顧客服務體驗。</p>
 
-        <div id="news-form" class="news-form mt-0">
 
-          <div class="text-center title">
 
-            <h4>線上諮詢</h4>
 
-            <p>與我們合作，馬上展開全新的創作里程碑</p>
 
+ <div class="container-fluid">
 
+<div class="row my-5">
 
+  <div class="col-md-8">
 
+    <section class="aicustomer-sec01">
 
+      <img class="img-fluid" src="/img/aicustomer/choozmoAiCustomer.webp" alt="choozmoAiCustomer">
 
+      <div class="aicustomer-sec01-cta-arrow  text-center">
 
+        <a href="#ctablock">
 
+          <div class="arrow-wave">
 
+            <span></span>
 
+            <span></span>
 
+  
           </div>
 
-          <form>
 
-            <div class="mb-4 align-items-center">
 
-              <label for="nameValue">
 
-                聯繫人稱呼 <span class="text-danger">*</span>
 
-              </label>
 
-              <div class="mt-2">
 
-                <input type="text" class="form-control" id="nameValue" placeholder="請留下聯繫人稱呼" required>
 
-              </div>
 
+        </a>
 
+      </div>
 
+    </section>
 
+  
+    <section class="aicustomer-sec02">
 
+      <h2 class="aicustomer-sec02-title">
 
+        ChoozMo AI 客服優勢
 
+      </h2>
 
+      <img class="aicustomer-title-line" src="/img/aicustomer/aicustomer-title.png" alt="">
 
+      <div class="mt-4">
 
+        <div class="container">
 
+          <div class="video-box mb-5">
 
+            <iframe src="https://www.youtube.com/embed/fqLmn1OLH74" title="YouTube video player" frameborder="0"
 
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 
+              allowfullscreen></iframe>
 
+          </div>
 
+          <p>隨著人工智慧（AI）技術的快速發展，AI智能客服逐漸成為現代企業提升客戶體驗的核心工具之一。透過高度擬真的AI技術和影像識別能力，企業能夠打造出具有人格化、互動性強的客服代表，為顧客提供更加個性化和高效的服務。
 
+          </p>
 
+          <div class="d-flex justify-content-center mb-5">
 
+            <a href="#news-form" class="submit-btn mb-3"> 立即諮詢</a>
 
+          </div>
 
+          <h3 id="一建生成AI客服"><strong> 一鍵生成AI客服</strong></h3>
 
+          <img class="img-fluid" src="/img/aicustomer/webv1.webp" alt="">
 
+          <p>
 
+            一鍵生成AI客服，支持手機、平板、Kiosk、電腦等多種裝置，實現無縫跨平台體驗。數字人虛擬形象，精準對嘴互動，提供多語言服務，讓顧客享受真實流暢的對話體驗。專屬後台管理系統，簡單自訂客服流程，快速響應顧客需求，有效提升客戶滿意度及品牌形象，幫助企業更高效地運營與拓展。
 
+          </p>
 
+          <h3 id="高度擬真Ai技術"><strong> 高度擬真AI客服技術</strong></h3>
 
+          <p>AI智能影像客服的核心技術基於Generative
 
+            AI（生成式人工智慧）和深度學習模型，能夠生成具備擬真外觀與語言的客服人物。這些虛擬客服不僅能夠模擬真人的面部表情、肢體動作，還能進行流暢的語音對話，讓客戶在互動中有更真實、更具情感的體驗。無論是基本的查詢、複雜的問題解答，還是情感交互，AI客服都能靈活應對，並提升整體的客戶滿意度。
 
+          </p>
 
+          <h3 id="語言多樣性"><strong> 語言多樣性與市場拓展</strong></h3>
 
+          <p>
 
+            自家訓練的語言模型（LLM）支持超過20種語言，涵蓋全球多個市場的語言需求，從英語、中文、西班牙語到日語、韓語等，無論在哪個語言區域，企業都能提供無縫的客服體驗。這樣的語言多樣性不僅能夠打破語言障礙，還能幫助企業進一步拓展國際市場，實現全球化業務的快速推廣。
 
+          </p>
 
+  
+          <h3 id="語言多樣性"><strong>24/7 全天候服務</strong></h3>
 
+          <p>
 
+            AI智能影像客服最大的一個優勢在於其無需休息的特性。它能夠實現24小時全天候服務，即使在高峰期或非工作時間，依然能快速回應顧客的查詢和需求。無論是跨時區的用戶，還是緊急的技術支持需求，都可以即時處理，進一步提升了顧客的滿意度與忠誠度，從而促進企業與客戶之間長期穩定的關係。
 
+          </p>
 
+          <img class="img-fluid mb-5" src="/img/aicustomer/aicustomer.webp" alt="">
 
+          <h3 id="語言多樣性"><strong>ChooZmo AI智能客服應用實例</strong></h3>
 
+          <img class="img-fluid" src="/img/aicustomer/2024meettaipei.webp" alt="">
 
+          <p> ▲ 2024 Meet Taipei 創新創業嘉年華開幕式展現出數位時代專屬AI主播魏時黛參與互動</p>
 
+          <img class="img-fluid mb-3" src="/img/aicustomer/aicustomer3.webp" alt="">
 
+          <p> ▲ 零售場域導入AI客服，提供中英日韓多語言服務，機場專櫃整合引導，提升顧客互動體驗。</p>
 
+          <img class="img-fluid mb-3" src="/img/aicustomer/aicustomer4.webp" alt="">
 
+  
+          <p> ▲ 日照中心導入台語AI客服，提供親切流暢的語音互動，提升顧客服務體驗。</p>
 
+          
+          <!-- <div id="news-form" class="news-form mt-0">
 
+            <div class="text-center title">
 
+              <h4>線上諮詢</h4>
 
+              <p>與我們合作，馬上展開全新的創作里程碑</p>
 
             </div>
 
-
 
-            <div class="row mb-4 align-items-center">
 
-              <label for="phoneValue">
 
-                聯絡電話 <span class="text-danger">*</span>
 
-              </label>
 
-              <div class="mt-2 col-sm-4">
 
-                <select id="countryCode" class="form-select">
 
-                  <option selected>選擇國碼</option>
 
-                </select>
 
+            <form>
 
+              <div class="mb-4 align-items-center">
 
+                <label for="nameValue">
 
+                  聯繫人稱呼 <span class="text-danger">*</span>
 
+                </label>
 
+                <div class="mt-2">
 
+                  <input type="text" class="form-control" id="nameValue" placeholder="請留下聯繫人稱呼" required>
 
+                </div>
 
               </div>
 
-              <div class="mt-3 mt-sm-2 col-sm-8">
 
-                <input type="tel" class="form-control" id="phoneCode" placeholder="e.g., 988 888 888" required>
 
+  
+              <div class="row mb-4 align-items-center">
 
+                <label for="phoneValue">
 
+                  聯絡電話 <span class="text-danger">*</span>
 
+                </label>
 
+                <div class="mt-2 col-sm-4">
 
+                  <select id="countryCode" class="form-select">
 
+                    <option selected>選擇國碼</option>
 
+                  </select>
 
+                </div>
 
+                <div class="mt-3 mt-sm-2 col-sm-8">
 
+                  <input type="tel" class="form-control" id="phoneCode" placeholder="e.g., 988 888 888" required>
 
+                </div>
 
               </div>
 
-            </div>
 
-
 
-            <div class="mb-4 align-items-center">
 
-              <label for="emailValue">
 
-                電子信箱 <span class="text-danger">*</span>
 
-              </label>
 
-              <div class="mt-2">
 
-                <input type="email" class="form-control" id="emailValue" placeholder="請留下 E-mail" required>
 
+  
+              <div class="mb-4 align-items-center">
 
+                <label for="emailValue">
 
+                  電子信箱 <span class="text-danger">*</span>
 
+                </label>
 
+                <div class="mt-2">
 
+                  <input type="email" class="form-control" id="emailValue" placeholder="請留下 E-mail" required>
 
+                </div>
 
+  
+                <div class="invalid-feedback">
 
+                  Please choose a username.
 
+                </div>
 
               </div>
 
-
 
-              <div class="invalid-feedback">
 
-                Please choose a username.
 
+  
+              <div class="mb-4 align-items-center">
 
+                <label for="captionValue">
 
+                  需求說明 <span class="text-danger">*</span>
 
+                </label>
 
+                <div class="mt-2">
 
+                  <textarea class="form-control" id="captionValue" rows="3" placeholder="請簡述說明" required></textarea>
 
+                </div>
 
               </div>
 
-            </div>
 
-
 
-            <!-- <div class="mb-4 align-items-center">
 
-              <label for="dateValue">
 
-                預計執行日期 <span class="text-danger">*</span>
 
-              </label>
 
-              <div class="mt-2 d-flex align-items-center">
 
-                <input type="date" id="dateValue" name="dateValue" class="px-2"
 
-                  style="border:1px solid #ced4da; border-radius: 3px;" required />
 
+  
+              <div class="mb-4 align-items-center">
 
+                <label for="companyValue">
 
+                  公司名稱 (非必填)
 
+                </label>
 
+                <div class="mt-2">
 
+                  <input type="text" class="form-control" id="companyValue" placeholder="請留下公司名稱">
 
+                </div>
 
               </div>
 
-            </div> -->
 
-
 
-            <div class="mb-4 align-items-center">
 
-              <label for="captionValue">
 
-                需求說明 <span class="text-danger">*</span>
 
-              </label>
 
-              <div class="mt-2">
 
-                <textarea class="form-control" id="captionValue" rows="3" placeholder="請簡述說明" required></textarea>
 
+  
+              <div class="mb-4 align-items-center">
 
+                <label for="companyValue">
 
+                  LINE ID (非必填)
 
+                </label>
 
+                <div class="mt-2">
 
+                  <input type="text" class="form-control" id="lineidValue" placeholder="請留下 LINE ID">
 
+                </div>
 
               </div>
 
-            </div>
 
-
 
-            <div class="mb-4 align-items-center">
 
-              <label for="companyValue">
 
-                公司名稱 (非必填)
 
-              </label>
 
+  
               <div class="mt-2">
 
-                <input type="text" class="form-control" id="companyValue" placeholder="請留下公司名稱">
 
+                <div class="form-check">
 
+                  <input class="form-check-input mt-2" type="checkbox" id="agreeValue">
 
+                  <label class="form-check-label w-100" for="agreeValue">
 
+                    本人同意集仕多搜集資料
 
+                  </label>
 
+                </div>
 
               </div>
 
-            </div>
 
-
 
-            <div class="mb-4 align-items-center">
 
-              <label for="companyValue">
 
-                LINE ID (非必填)
 
-              </label>
 
-              <div class="mt-2">
 
-                <input type="text" class="form-control" id="lineidValue" placeholder="請留下 LINE ID">
 
+  
+              <div style="height: 15px;">
 
+                <span class="errorText text-danger">尚有欄位未填寫</span>
 
               </div>
 
-            </div>
 
-
 
-            <div class="mt-2">
 
-              <div class="form-check">
 
-                <input class="form-check-input mt-2" type="checkbox" id="agreeValue">
 
-                <label class="form-check-label w-100" for="agreeValue">
 
-                  本人同意集仕多搜集資料
 
-                </label>
 
+  
+              <div class="d-flex justify-content-center mt-5">
 
+  
+                <button type="submit" class="submit-btn" id="submitBtn">
 
+                  <span class="spinner-border spinner-border-sm me-2 loading-btn" role="status" aria-hidden="true"></span>
 
+                  提交
 
+                </button>
 
               </div>
 
-            </div>
 
-
 
-            <div style="height: 15px;">
 
-              <span class="errorText text-danger">尚有欄位未填寫</span>
 
-            </div>
 
-
 
-            <div class="d-flex justify-content-center mt-5">
 
-
 
-              <button type="submit" class="submit-btn" id="submitBtn">
 
-                <span class="spinner-border spinner-border-sm me-2 loading-btn" role="status" aria-hidden="true"></span>
 
-                提交
 
-              </button>
 
-            </div>
 
-          </form>
 
+            </form>
 
+          </div> -->
 
         </div>
 
+        <!-- <div class="aicustomer-sec02-1 row">
 
+          <div class="col-lg-3">
 
+            <img class="img-fluid" src="/img/aicustomer/aicustomer1.png" alt="">
 
+            <p>以Generative AI技術為核心，客製化專屬AI客服人物，為客戶提供多元服務，提高整體客戶體驗。
 
+            </p>
 
+          </div>
 
+          <div class="col-lg-3">
 
+            <img class="img-fluid" src="/img/aicustomer/aicustomer2.png" alt="">
 
+            <p>自家LLM訓練精準多語言，支援20+國語言，提供了更廣泛的可能性，並且
 
+              有助於打入不同的市場。
 
+            </p>
 
+          </div>
 
+          <div class="aisec02img-3 col-lg-3">
 
+            <img class="img-fluid" src="/img/aicustomer/aicustomer3.png" alt="">
 
+            <p>提供24小時即時支援，無需休息或輪班，因此可以快速回應客戶查詢和需求，提高滿意度和忠誠度。</p>
 
+          </div>
 
+        </div> -->
 
       </div>
 
-      <!-- <div class="aicustoerSec02-1 row">
 
-        <div class="col-lg-3">
 
-          <img class="img-fluid" src="/img/aicustomer/aicustomer1.png" alt="">
 
-          <p>以Generative AI技術為核心，客製化專屬AI客服人物，為客戶提供多元服務，提高整體客戶體驗。
 
-          </p>
 
-        </div>
 
-        <div class="col-lg-3">
 
-          <img class="img-fluid" src="/img/aicustomer/aicustomer2.png" alt="">
 
-          <p>自家LLM訓練精準多語言，支援20+國語言，提供了更廣泛的可能性，並且
 
-            有助於打入不同的市場。
 
-          </p>
 
-        </div>
 
-        <div class="aisec02img-3 col-lg-3">
 
-          <img class="img-fluid" src="/img/aicustomer/aicustomer3.png" alt="">
 
-          <p>提供24小時即時支援，無需休息或輪班，因此可以快速回應客戶查詢和需求，提高滿意度和忠誠度。</p>
 
-        </div>
 
-      </div> -->
 
-    </div>
 
-  </section>
 
-
 
-
 
-
 
-  <section class="aicustoerSec06">
 
-    <h2>
 
-      ChoozMo AI 客服常見問題
 
-    </h2>
 
-    <img class="aicustomer-title-line" src="/img/aicustomer/aicustomer-title.png" alt="">
 
-    <div class="row">
 
-      <div class="col-lg-8">
 
-        <div class="accordion solution-accordion pb-1" id="accordionExample">
 
-          <div class="accordion-item">
 
-            <h2 class="accordion-header" id="heading_1">
 
-              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_1"
 
-                aria-expanded="true" aria-controls="collapse_1">
 
-                1. 與真人客服相比，AI智慧客服有哪些優勢？
 
-              </button>
 
-            </h2>
 
-            <div id="collapse_1" class="accordion-collapse collapse show" aria-labelledby="heading_1"
 
-              data-bs-parent="#accordionExample">
 
-              <div class="accordion-body">
 
-                AI客服可以全天候提供幫助，無需休息或輪班、也能支援翻譯（中英日韓）等。
 
-                <br><br>
 
-
 
+    </section>
 
+  
+    <section class="aicustomer-faq">
 
+      <h2>
 
+        ChoozMo AI 客服常見問題
 
+      </h2>
 
+      <img class="aicustomer-title-line" src="/img/aicustomer/aicustomer-title.png" alt="">
 
+      <div class="row">
 
+        <div class="col-lg-8">
 
+          <div class="accordion solution-accordion pb-1" id="accordionExample">
 
+            <div class="accordion-item">
 
+              <h2 class="accordion-header" id="heading_1">
 
+                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_1"
 
+                  aria-expanded="true" aria-controls="collapse_1">
 
+                  1. 與真人客服相比，AI智慧客服有哪些優勢？
 
+                </button>
 
+              </h2>
 
+              <div id="collapse_1" class="accordion-collapse collapse show" aria-labelledby="heading_1"
 
+                data-bs-parent="#accordionExample">
 
+                <div class="accordion-body">
 
+                  AI客服可以全天候提供幫助，無需休息或輪班、也能支援翻譯（中英日韓）等。
 
+                  <br><br>
 
+  
+                </div>
 
               </div>
 
             </div>
 
-          </div>
 
-
 
-          <div class="accordion-item">
 
-            <h2 class="accordion-header" id="heading_2">
 
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
-                data-bs-target="#collapse_2" aria-expanded="true" aria-controls="collapse_2">
 
-                2.AI智能客服能否與現有系統和平臺整合？
 
-              </button>
 
-            </h2>
 
-            <div id="collapse_2" class="accordion-collapse collapse" aria-labelledby="heading_2"
 
-              data-bs-parent="#accordionExample">
 
-              <div class="accordion-body">
 
-                可以，我們的AI客服可以與現有網站、APP、各種螢幕顯示裝置（如平板、觸控螢幕、Kiosk售票機等）串接。
 
+  
+            <div class="accordion-item">
 
+              <h2 class="accordion-header" id="heading_2">
 
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+                  data-bs-target="#collapse_2" aria-expanded="true" aria-controls="collapse_2">
 
+                  2. AI智能客服能否與現有系統和平臺整合？
 
+                </button>
 
+              </h2>
 
+              <div id="collapse_2" class="accordion-collapse collapse" aria-labelledby="heading_2"
 
+                data-bs-parent="#accordionExample">
 
+                <div class="accordion-body">
 
+                  可以，我們的AI客服可以與現有網站、APP、各種螢幕顯示裝置（如平板、觸控螢幕、Kiosk售票機等）串接。
 
+                </div>
 
               </div>
 
             </div>
 
-          </div>
 
-          <div class="accordion-item">
 
-            <h2 class="accordion-header" id="heading_3">
 
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
-                data-bs-target="#collapse_3" aria-expanded="true" aria-controls="collapse_3">
 
-                3. AI客服系統是否支援多語言和多渠道溝通？
 
-              </button>
 
-            </h2>
 
-            <div id="collapse_3" class="accordion-collapse collapse" aria-labelledby="heading_3"
 
-              data-bs-parent="#accordionExample">
 
-              <div class="accordion-body">
 
-                可以，目前可支援中文、英文、日文、韓文。
 
+            <div class="accordion-item">
 
+              <h2 class="accordion-header" id="heading_3">
 
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+                  data-bs-target="#collapse_3" aria-expanded="true" aria-controls="collapse_3">
 
+                  3. AI客服系統是否支援多語言和多渠道溝通？
 
+                </button>
 
+              </h2>
 
+              <div id="collapse_3" class="accordion-collapse collapse" aria-labelledby="heading_3"
 
+                data-bs-parent="#accordionExample">
 
+                <div class="accordion-body">
 
+                  可以，目前可支援中文、英文、日文、韓文。
 
+                </div>
 
               </div>
 
             </div>
 
-          </div>
 
-          <div class="accordion-item">
 
-            <h2 class="accordion-header" id="heading_4">
 
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
-                data-bs-target="#collapse_4" aria-expanded="true" aria-controls="collapse_4">
 
-                4.AI智能客服可以提供即時支援和回應客戶查詢嗎？
 
-              </button>
 
-            </h2>
 
-            <div id="collapse_4" class="accordion-collapse collapse" aria-labelledby="heading_3"
 
-              data-bs-parent="#accordionExample">
 
-              <div class="accordion-body">
 
-                AI客服可以提供即時支援和回應客戶查詢，而且能夠同時處理多個查詢不受限制。
 
+            <div class="accordion-item">
 
+              <h2 class="accordion-header" id="heading_4">
 
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+                  data-bs-target="#collapse_4" aria-expanded="true" aria-controls="collapse_4">
 
+                  4. A智能客服可以提供即時支援和回應客戶查詢嗎？
 
+                </button>
 
+              </h2>
 
+              <div id="collapse_4" class="accordion-collapse collapse" aria-labelledby="heading_3"
 
+                data-bs-parent="#accordionExample">
 
+                <div class="accordion-body">
 
+                  AI客服可以提供即時支援和回應客戶查詢，而且能夠同時處理多個查詢不受限制。
 
+                </div>
 
               </div>
 
             </div>
 
-          </div>
 
-
 
-          <div class="accordion-item">
 
-            <h2 class="accordion-header" id="heading_4">
 
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
-                data-bs-target="#collapse_4" aria-expanded="true" aria-controls="collapse_4">
 
-                5.智能聊天機器人是什麼？
 
-              </button>
 
-            </h2>
 
-            <div id="collapse_4" class="accordion-collapse collapse" aria-labelledby="heading_3"
 
-              data-bs-parent="#accordionExample">
 
-              <div class="accordion-body">
 
-                人工智慧 (AI) 聊天機器人是可以使用自然語言理解 (NLU)或自然語言處理 (NLP) 和機器學習 (ML)
 
-                進行類似人類對話的應用程式或介面。人工智慧聊天機器人與標準聊天機器人的不同之處在於，它們利用大型語言模型 (LLM) 與傳統對話流和預先編程回應來產生對文字和語音輸入的回應。
 
+  
+            <div class="accordion-item">
 
+              <h2 class="accordion-header" id="heading_4">
 
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+                  data-bs-target="#collapse_4" aria-expanded="true" aria-controls="collapse_4">
 
+                  5. 智能聊天機器人是什麼？
 
+                </button>
 
+              </h2>
 
+              <div id="collapse_4" class="accordion-collapse collapse" aria-labelledby="heading_3"
 
+                data-bs-parent="#accordionExample">
 
+                <div class="accordion-body">
 
+                  人工智慧 (AI) 聊天機器人是可以使用自然語言理解 (NLU)或自然語言處理 (NLP) 和機器學習 (ML)
 
+                  進行類似人類對話的應用程式或介面。人工智慧聊天機器人與標準聊天機器人的不同之處在於，它們利用大型語言模型 (LLM) 與傳統對話流和預先編程回應來產生對文字和語音輸入的回應。
 
+                </div>
 
               </div>
 
             </div>
 
-          </div>
 
-
 
-          <div class="accordion-item">
 
-            <h2 class="accordion-header" id="heading_5">
 
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
-                data-bs-target="#collapse_5" aria-expanded="true" aria-controls="collapse_5">
 
-                6.AI客服是否需要另外下載app使用?
 
-              </button>
 
-            </h2>
 
-            <div id="collapse_5" class="accordion-collapse collapse" aria-labelledby="heading_3"
 
-              data-bs-parent="#accordionExample">
 
-              <div class="accordion-body">
 
-                AI客服無論KIOSK或是手機皆以網頁運行，故不需要另外下載app。
 
+  
+            <div class="accordion-item">
 
+              <h2 class="accordion-header" id="heading_5">
 
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+                  data-bs-target="#collapse_5" aria-expanded="true" aria-controls="collapse_5">
 
+                  6. AI客服是否需要另外下載 APP 使用？
 
+                </button>
 
+              </h2>
 
+              <div id="collapse_5" class="accordion-collapse collapse" aria-labelledby="heading_3"
 
+                data-bs-parent="#accordionExample">
 
+                <div class="accordion-body">
 
+                  AI客服無論KIOSK或是手機皆以網頁運行，故不需要另外下載app。
 
+                </div>
 
               </div>
 
             </div>
 
+  
           </div>
 
-
 
-
 
+        </div>
 
+        <div class="col-lg-4">
 
+          <img class="img-fluid" src="/img/aicustomer/aicustomerfaq.webp" alt="">
 
         </div>
 
       </div>
 
-      <div class="col-lg-4">
 
-
 
-        <img class="img-fluid" src="/img/aicustomer/aicustomerfaq.webp" alt="">
 
+    </section>
 
+  </div>
 
 
-      </div>
 
+  <div class="col-md-4 pe-md-5">
 
+    <div id="form">
 
+      {{ partial "form-main.html" . }}
 
     </div>
 
-  </section>
 
+  </div>
 
+</div>
 
+ </div>
 
 
-  <section id="aicustoerCta" class="sec-action pb-5">
 
+  <section id="aicustomerCta" class="sec-action pb-5">
 
     <div class="container-fluid">
 
       <div class="action-clip text-center">
 
-        <h2 class="mb-0" style="line-height: 46px;">
 
+        <h2 class="mb-0">
 
           你不會的，AI 都能做
 
           <br>
 
           Choozmo 多語言 AI 客服
 
-
 
         </h2>
 
       </div>
 
       <div class="action-triangle">
 
@@ -357,18 +353,13 @@
 
     </div>
 
     <div class="container text-center">
 
       <a class="action-btn" href="#ctablock">
 
-        立即擁有Ai客服
 
-
 
+        立即擁有 AI 客服
 
       </a>
 
     </div>
 
   </section>
 
 
-
 
   {{ partial "footer.html" . }}
 
 
-
 
-
 
-
 
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
 
     integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
 
     crossorigin="anonymous"></script>

+ 16 - 16
layouts/contact/single.html
View File 

@@ -35,11 +35,11 @@
 
       font-size: 1rem;
 
     }
 
 
-    #heading-breadcrumbs .breadcrumbs_title {
 
+    #heading-breadcrumbs .breadcrumbs-title {
 
       position: relative;
 
     }
 
 
-    #heading-breadcrumbs .breadcrumbs_title::after {
 
+    #heading-breadcrumbs .breadcrumbs-title::after {
 
       position: absolute;
 
       width: 6rem;
 
       height: .5rem;
 
@@ -84,7 +84,7 @@
 
     <div class="container">
 
       <div class="row">
 
         <div class="col-md-12">
 
-          <h1 class="breadcrumbs_title">聯絡我們</h1>
 
+          <h1 class="breadcrumbs-title">聯絡我們</h1>
 
         </div>
 
       </div>
 
     </div>
 
@@ -93,7 +93,7 @@
 
         <div class="col-md-12">
 
           <div>專業團隊Ｘ提高流量Ｘ增加營收</div>
 
         </div>
 
-        <div class="col-md-4 blog_social">
 
+        <div class="col-md-4 blog-social">
 
           <a href="https://www.linkedin.com/company/choozmo/"><img src="https://i.imgur.com/u2MFY3U.png" alt=""></a>
 
           <a href="https://www.instagram.com/choozmo_cmm/"><img src="https://i.imgur.com/LNAJtkO.png" alt=""></a>
 
           <a href="https://twitter.com/ai_cmm"><img src="https://i.imgur.com/ImYZfgI.png" alt=""></a>
 
@@ -127,7 +127,7 @@
 
                   <li>關鍵字研究：選擇適合你的關鍵字結合內容行銷，逐步提升排名</li>
 
                 </ul>
 
                 <a style="text-decoration: none;" href="/seo/dm">
 
-                  <button class="LearnMore">了解詳情</button>
 
+                  <button class="learn-more">了解詳情</button>
 
                 </a>
 
               </div>
 
 
@@ -155,7 +155,7 @@
 
                   <li>客製化量身打造，用質感為品牌加分，用影像為企業發聲</li>
 
                 </ul>
 
                 <a style="text-decoration: none;" href="/video-making/dm">
 
-                  <button class="LearnMore">了解詳情</button>
 
+                  <button class="learn-more">了解詳情</button>
 
                 </a>
 
               </div>
 
 
@@ -183,7 +183,7 @@
 
                   <li>完善的軟、硬體系統規劃</li>
 
                 </ul>
 
                 <a style="text-decoration: none;" href="/research/dm">
 
-                  <button class="LearnMore">了解詳情</button>
 
+                  <button class="learn-more">了解詳情</button>
 
                 </a>
 
               </div>
 
 
@@ -211,7 +211,7 @@
 
                   <li>開發與優化搜尋爬蟲程式</li>
 
                 </ul>
 
                 <a style="text-decoration: none;" href="/crawler/dm">
 
-                  <button class="LearnMore">了解詳情</button>
 
+                  <button class="learn-more">了解詳情</button>
 
                 </a>
 
               </div>
 
 
@@ -241,7 +241,7 @@
 
                   <li>Text Mining文字探勘，比對結果預測績效</li>
 
                 </ul>
 
                 <a style="text-decoration: none;" href="/bigdata/dm">
 
-                  <button class="LearnMore">了解詳情</button>
 
+                  <button class="learn-more">了解詳情</button>
 
                 </a>
 
               </div>
 
 
@@ -269,7 +269,7 @@
 
                   <li>改善建議，協同逐項優化，推動排名向前</li>
 
                 </ul>
 
                 <a style="text-decoration: none;" href="/ad-operation/dm">
 
-                  <button class="LearnMore">了解詳情</button>
 
+                  <button class="learn-more">了解詳情</button>
 
                 </a>
 
               </div>
 
 
@@ -299,7 +299,7 @@
 
             </ul>
 
             <div class="text-center">
 
               <a style="text-decoration: none;" href="/seo/dm">
 
-                <button class="LearnMore">了解詳情</button>
 
+                <button class="learn-more">了解詳情</button>
 
               </a>
 
             </div>
 
           </div>
 
@@ -315,7 +315,7 @@
 
             </ul>
 
             <div class="text-center">
 
               <a style="text-decoration: none;" href="/video-making/dm">
 
-                <button class="LearnMore">了解詳情</button>
 
+                <button class="learn-more">了解詳情</button>
 
               </a>
 
             </div>
 
           </div>
 
@@ -331,7 +331,7 @@
 
             </ul>
 
             <div class="text-center">
 
               <a style="text-decoration: none;" href="/research/dm">
 
-                <button class="LearnMore">了解詳情</button>
 
+                <button class="learn-more">了解詳情</button>
 
               </a>
 
             </div>
 
           </div>
 
@@ -347,7 +347,7 @@
 
             </ul>
 
             <div class="text-center">
 
               <a style="text-decoration: none;" href="/crawler/dm">
 
-                <button class="LearnMore">了解詳情</button>
 
+                <button class="learn-more">了解詳情</button>
 
               </a>
 
             </div>
 
           </div>
 
@@ -363,7 +363,7 @@
 
             </ul>
 
             <div class="text-center">
 
               <a style="text-decoration: none;" href="/bigdata/dm">
 
-                <button class="LearnMore">了解詳情</button>
 
+                <button class="learn-more">了解詳情</button>
 
               </a>
 
             </div>
 
           </div>
 
@@ -379,7 +379,7 @@
 
             </ul>
 
             <div class="text-center">
 
               <a style="text-decoration: none;" href="/ad-operation/dm">
 
-                <button class="LearnMore">了解詳情</button>
 
+                <button class="learn-more">了解詳情</button>
 
               </a>
 
             </div>
 
           </div>

+ 1 - 1
layouts/partials/breadcrumbs.html
View File 

@@ -2,7 +2,7 @@
 
     <div class="container">
 
         <div class="row">
 
             <div class="col-md-12">
 
-                <h1 class="breadcrumbs_title">{{ .Title }}</h1>
 
+                <h1 class="breadcrumbs-title">{{ .Title }}</h1>
 
             </div>
 
         </div>
 
     </div>

+ 10 - 10
layouts/partials/comparison.html
View File 

@@ -11,7 +11,7 @@
 
                 <div class="col-md-6 mb-mobile">
 
                     <div class="box-simple">
 
                         <h3 class="video__title"></h3>
 
-                        <p class="video__desc">ChoozMo擅長以數據行銷概念，結合獨創AI視覺影像為客戶品牌及產品特色傳達理念。我們具備商業策略 、數據技術、影像製作的能力。
 
+                        <p class="video-desc">ChoozMo擅長以數據行銷概念，結合獨創AI視覺影像為客戶品牌及產品特色傳達理念。我們具備商業策略 、數據技術、影像製作的能力。
 
                             ​具備豐富專案經驗，以及良好溝通能力，結合資訊數據蒐集及分析，評估影片內容與市場現況，提供客戶可行的建議 ，強效的戰略替客戶在險峻疫情下拓展跨國際遠距行銷新銷售市場。
 
                             <br>選擇ChoozMo為你的企業、品牌、商品、形象做最完整的影像傳達，提供最優質的服務。
 
                             </p>
 
@@ -21,27 +21,27 @@
 
                 <div class="col-md-6">
 
                     <div class="box-simple">
 
                         <div class="table">
 
-                            <div class="column column__first">
 
+                            <div class="column column-first">
 
                                 <div></div>
 
-                                <div class="body__head">多語言主播商品解說成本</div>
 
-                                <div class="body__head">擬真人化程度</div>
 
-                                <div class="body__head">多語言翻譯</div>
 
+                                <div class="body-head">多語言主播商品解說成本</div>
 
+                                <div class="body-head">擬真人化程度</div>
 
+                                <div class="body-head">多語言翻譯</div>
 
                             </div>
 
-                            <div class="column column__choozmo">
 
+                            <div class="column column-choozmo">
 
                                 <img src="img/badge.png" alt="" style="width: 32px; height: 32px;">
 
-                                <div class="body__company">Choozmo</div>
 
+                                <div class="body-company">Choozmo</div>
 
                                 <div>低<i class="fas fa-check"></i></div>
 
                                 <div>90%</div>
 
                                 <div>Smart Auto<i class="fas fa-check"></i></div>
 
                             </div>
 
                             <div class="column">
 
-                                <div class="body__company">傳統影片製作公司</div>
 
+                                <div class="body-company">傳統影片製作公司</div>
 
                                 <div>非常高</div>
 
                                 <div>100%</div>
 
                                 <div>Single</div>
 
                             </div>
 
-                            <div class="column column__last">
 
-                                <div class="body__company">虛擬人物軟體</div>
 
+                            <div class="column column-last">
 
+                                <div class="body-company">虛擬人物軟體</div>
 
                                 <div>高</div>
 
                                 <div>多為3D動漫</div>
 
                                 <div>Single</div>

+ 1 - 1
layouts/partials/features.html
View File 

@@ -16,7 +16,7 @@
 
                         {{ with $element.url }}
 
                         <a href="{{ $element.url }}">
 
                         {{ end }}
 
-                            <div class="icon icon__feature">
 
+                            <div class="icon icon-feature">
 
                                 <i class="{{ .icon }}"></i>
 
                             </div>
 
                         {{ with $element.url }}

+ 5 - 5
layouts/partials/footer_default.html
View File 

@@ -1,5 +1,5 @@
 
 <footer id="footer">
 
-    <div class="container container__footer">
 
+    <div class="container container-footer">
 
 
         {{ if isset .Site.Params "about_us" }}
 
         <div class="col-md-4 col-sm-6">
 
@@ -7,9 +7,9 @@
 
 
             {{ .Site.Params.about_us | safeHTML }}
 
             <div class="followus">
 
-                <span class="followus__txt">關注我們</span>
 
-                <a href="https://www.youtube.com/channel/UCi3jHOCCmx0Zyl2ZvoHzHQg" class="followus__img"><img src="img/youtube.png" alt=""></a>
 
-                <a href="https://line.me/R/ti/p/@choozmo?from=page" class="followus__img"><img src="img/line.png" alt=""></a>
 
+                <span class="followus-txt">關注我們</span>
 
+                <a href="https://www.youtube.com/channel/UCi3jHOCCmx0Zyl2ZvoHzHQg" class="followus-img"><img src="img/youtube.png" alt=""></a>
 
+                <a href="https://line.me/R/ti/p/@choozmo?from=page" class="followus-img"><img src="img/line.png" alt=""></a>
 
                 <a href="">訂閱電子報<i class="fas fa-envelope"></i></a>
 
             </div>
 
             <hr class="hidden-md hidden-lg hidden-sm">
 
@@ -20,7 +20,7 @@
 
 
         <div class="col-md-4 col-sm-6">
 
             <div>
 
-                <p class="footer__btn__text">想洽詢我們的專案製作嗎？</p>
 
+                <p class="footer-btn-text">想洽詢我們的專案製作嗎？</p>
 
                 <a href="/contact/service/" class="btn btn-lg">洽詢專案製作</a>
 
             </div>
 
             {{ if isset .Site.Params "recent_posts" }} {{ if .Site.Params.recent_posts.enable }}

+ 5 - 2
layouts/partials/head.html
View File 

@@ -23,8 +23,9 @@
 
 
   <!-- Bootstrap and Font Awesome CSS -->
 
   <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.11.2/css/all.css">
 
-  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
 
-    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
 
+  <!-- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
 
+    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
 
 
   <!-- CSS animations  -->
 
   <link href="{{ "css/animate.css" | relURL}}" rel="stylesheet">
 
@@ -35,6 +36,8 @@
 
   {{ else }}
 
   <link href="{{ "css/style.default.css" | relURL}}" rel="stylesheet" id="theme-stylesheet">
 
   {{ end }}
 
+  <link href="{{ "css/style.css" | relURL}}" rel="stylesheet" id="theme-stylesheet">
 
+  <!-- <link rel="stylesheet" href="/css/style.css"> -->
 
 
   <!-- Custom stylesheet - for your changes -->
 
   <link href="{{ "css/custom.css" | relURL}}" rel="stylesheet">

+ 3 - 3
layouts/partials/manywords.html
View File 

@@ -15,20 +15,20 @@
 
             <h2>什麼是AI 合成主播?</h2>
 
         </div>
 
         <div class="col-md-12">
 
-            <p class="video__desc">集仕多人工智慧合成主播是我們大數據智慧服務之一。</p>
 
+            <p class="video-desc">集仕多人工智慧合成主播是我們大數據智慧服務之一。</p>
 
         </div>
 
         <div class="heading text-center">
 
             <h2>台灣第一個人工智慧合成主播</h2>
 
         </div>
 
         <div class="col-md-12">
 
-            <p class="video__desc">集仕多人工智慧合成主播是我們大數據智慧服務之一。</p>
 
+            <p class="video-desc">集仕多人工智慧合成主播是我們大數據智慧服務之一。</p>
 
         </div>
 
 
         <div class="heading text-center">
 
             <h2>韓國推出世界第一個AI女團「Eternity」</h2>
 
         </div>
 
         <div class="col-md-12">
 
-            <p class="video__desc">鑽研人工智慧技術的韓國公司「Pulse9」，近期推出人類史上第一個人工智慧女子偶像團體「Eternity」，號稱所有團員及演出內容都由 AI 技術合成，並非真實人類。AI 公司「Pulse9」去年就已經為此 AI 女團舉辦盛大的投票活動，利用 AI 技術演算大量女偶像、演員、網紅的臉，重新合成創造出 101 名所謂的「AI 練習生」（此數字很明顯引用自韓國知名選秀電視節目《PRODUCE 101》系列）、並放在社群網站上，由網友選出最受歡迎的外表的前 11 名組成「 AI 女團」。一位專做歌曲翻唱的韓國 YouTuber 「Rui」突然公佈她的臉部其實不是真的，而是 AI 合成，聲音及頸部以下雖然是她本人親自出演，但頭部僅有頭髮是她原來的，臉蛋及五官等等全都由人工智慧技術合成。</p>
 
+            <p class="video-desc">鑽研人工智慧技術的韓國公司「Pulse9」，近期推出人類史上第一個人工智慧女子偶像團體「Eternity」，號稱所有團員及演出內容都由 AI 技術合成，並非真實人類。AI 公司「Pulse9」去年就已經為此 AI 女團舉辦盛大的投票活動，利用 AI 技術演算大量女偶像、演員、網紅的臉，重新合成創造出 101 名所謂的「AI 練習生」（此數字很明顯引用自韓國知名選秀電視節目《PRODUCE 101》系列）、並放在社群網站上，由網友選出最受歡迎的外表的前 11 名組成「 AI 女團」。一位專做歌曲翻唱的韓國 YouTuber 「Rui」突然公佈她的臉部其實不是真的，而是 AI 合成，聲音及頸部以下雖然是她本人親自出演，但頭部僅有頭髮是她原來的，臉蛋及五官等等全都由人工智慧技術合成。</p>
 
         </div>

+ 1 - 1
layouts/partials/newsanchor.html
View File 

@@ -8,7 +8,7 @@
 
                 <div class="col-md-6 mb-mobile">
 
                     <div class="box-simple">
 
                         <h3 class="video__title"></h3>
 
-                        <p class="video__desc">2016年日本出現第一位由軟體建立而成的線上虛擬YouTuber「絆愛」，而中國在2018年推出全球第一個人工智能(Artificial Intelligence，簡稱AI)科技合成男主播，隔年更公開亮相一名站立式3D女主播。能坐能站能帶手勢。兩位虛擬主播由搜狗公司及新華社共同研發，外型與聲音皆完整參照真人主播；南韓也接著於2020年11月推出一名語調激似真人的AI女主播。
 
+                        <p class="video-desc">2016年日本出現第一位由軟體建立而成的線上虛擬YouTuber「絆愛」，而中國在2018年推出全球第一個人工智能(Artificial Intelligence，簡稱AI)科技合成男主播，隔年更公開亮相一名站立式3D女主播。能坐能站能帶手勢。兩位虛擬主播由搜狗公司及新華社共同研發，外型與聲音皆完整參照真人主播；南韓也接著於2020年11月推出一名語調激似真人的AI女主播。
 
                             <br>
 
                             </p>
 
                             <a href="/contact/service/" class="btn btn-lg">洽詢專案製作</a>

+ 4 - 4
layouts/partials/scripts.html
View File 

@@ -1,10 +1,10 @@
 
 {{ template "_internal/google_analytics.html" . }}
 
 <script src="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
 
     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> -->
 
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
 
+    integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
 
+    crossorigin="anonymous"></script>
 
+<!-- <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> -->
 
 
 
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

+ 87 - 45
layouts/partials/seo.html
View File 

@@ -1,49 +1,91 @@
 
 <div id="block-vtuber">
 
-    <section class="row sec sec01">
 
-        <div class="container">
 
-            <div class="row">
 
-                <div class="col-md-6">
 
-                    <div class="txt-block">
 
-                        <h2>SEO</h2>
 
-                        <p>全名為「Search Engine Optimization」。</p>
 
-                    </div>
 
-                </div>
 
-                <div class="col-md-6">
 
-                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//IzHhpC_bD6g?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
 
-                </div>
 
-            </div>
 
+  <section class="sec sec01">
 
+    <div class="container">
 
+      <div class="row">
 
+        <div class="col-md-6">
 
+          <div class="txt-block">
 
+            <h2>SEO</h2>
 
+            <p>全名為「Search Engine Optimization」。</p>
 
+          </div>
 
+        </div>
 
+        <div class="col-md-6">
 
+          <style>
 
+            .embed-container {
 
+              position: relative;
 
+              padding-bottom: 56.25%;
 
+              height: 0;
 
+              max-width: 100%;
 
+              box-shadow: 1px 1px 8px 2px grey;
 
+              border-radius: 1rem;
 
+            }
 
+
 
+            .embed-container iframe,
 
+            .embed-container object,
 
+            .embed-container embed {
 
+              position: absolute;
 
+              top: 0;
 
+              left: 0;
 
+              width: 100%;
 
+              height: 100%;
 
+            }
 
+          </style>
 
+          <div class='embed-container'><iframe src='https://www.youtube.com/embed//IzHhpC_bD6g?autoplay=1&mute=1'
 
+              frameborder='0' allowfullscreen></iframe></div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </section>
 
+  <section class="row sec sec02">
 
+    <div class="container">
 
+      <div class="row">
 
+        <div class="col-md-6">
 
+          <style>
 
+            .embed-container {
 
+              position: relative;
 
+              padding-bottom: 56.25%;
 
+              height: 0;
 
+              max-width: 100%;
 
+              box-shadow: 1px 1px 8px 2px grey;
 
+              border-radius: 1rem;
 
+            }
 
+
 
+            .embed-container iframe,
 
+            .embed-container object,
 
+            .embed-container embed {
 
+              position: absolute;
 
+              top: 0;
 
+              left: 0;
 
+              width: 100%;
 
+              height: 100%;
 
+            }
 
+          </style>
 
+          <div class='embed-container'><iframe src='https://www.youtube.com/embed//9vrkENKrWeA?autoplay=1&mute=1'
 
+              frameborder='0' allowfullscreen></iframe></div>
 
         </div>
 
-    </section>
 
-    <section class="row sec sec02">
 
-        <div class="container">
 
-            <div class="row">
 
-                <div class="col-md-6">
 
-                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//9vrkENKrWeA?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
 
-                </div>
 
-                <div class="col-md-6">
 
-                    <div class="txt-block">
 
-                        <h2>Top Vtuber</h2>
 
-                        <div class="owl-carousel project">
 
-                            <ul class="item rankblock">
 
-                                <li><span>No1.</span> Kizuna AI</li>
 
-                                <li><span>No2.</span> Gawr Gura </li>
 
-                                <li><span>No3.</span> Inugami Korone </li>
 
-                            </ul>
 
-                            <ul class="item rankblock">
 
-                                <li>No4. Kizuna AI</li>
 
-                                <li>No5. Gawr Gura </li>
 
-                                <li>No6. Inugami Korone </li>
 
-                            </ul>
 
-                            <ul class="item rankblock">
 
-                                <li>No7. Kizuna AI</li>
 
-                                <li>No8. Gawr Gura </li>
 
-                                <li>No9. Inugami Korone </li>
 
-                                <li>No10. Inugami Korone </li>
 
-                            </ul>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
+        <div class="col-md-6">
 
+          <div class="txt-block">
 
+            <h2>Top Vtuber</h2>
 
+            <div class="owl-carousel project">
 
+              <ul class="item rankblock">
 
+                <li><span>No1.</span> Kizuna AI</li>
 
+                <li><span>No2.</span> Gawr Gura </li>
 
+                <li><span>No3.</span> Inugami Korone </li>
 
+              </ul>
 
+              <ul class="item rankblock">
 
+                <li>No4. Kizuna AI</li>
 
+                <li>No5. Gawr Gura </li>
 
+                <li>No6. Inugami Korone </li>
 
+              </ul>
 
+              <ul class="item rankblock">
 
+                <li>No7. Kizuna AI</li>
 
+                <li>No8. Gawr Gura </li>
 
+                <li>No9. Inugami Korone </li>
 
+                <li>No10. Inugami Korone </li>
 
+              </ul>
 
             </div>
 
+          </div>
 
         </div>
 
-    </section>
 
-</div>
 
+      </div>
 
+    </div>
 
+  </section>
 
+</div>

+ 3 - 3
layouts/partials/steps.html
View File 

@@ -9,9 +9,9 @@
 
         <div class="col-md-12">
 
             <div class="row">
 
             {{ range $index, $element := sort .Site.Data.steps "weight" }}
 
-                <div class="col-md-3 step__box">
 
+                <div class="col-md-3 step-box">
 
                     <div class="box-simple box-steps">
 
-                        <div class="step__box">
 
+                        <div class="step-box">
 
                             <span>{{ $element.weight | markdownify }}</span>
 
                         </div>
 
                         {{ with $element.url }}
 
@@ -29,7 +29,7 @@
 
                 </div>
 
             {{ end }}
 
             </div>
 
-            <div class="goto__btn">
 
+            <div class="goto-btn">
 
                 <a href="/contact/service/" class="btn btn-lg">洽詢專案製作 -></a>
 
             </div>
 
         </div>

+ 4 - 4
layouts/partials/testimonials.html
View File 

@@ -25,8 +25,8 @@
 
                                 <h5 class="testimonial-title">{{ .name }}</h5>
 
                                 <p class="testimonial-text">{{ .text | markdownify }}</p>
 
                             </div>
 
-                            <div class="testimonial_imgdiv">
 
-                                <img class="testimonial_img" alt="" src="{{ .avatar | absURL }}">
 
+                            <div class="testimonial-imgdiv">
 
+                                <img class="testimonial-img" alt="" src="{{ .avatar | absURL }}">
 
                             </div>
 
                         </div>
 
                     </li>
 
@@ -38,10 +38,10 @@
 
             </div>
 
 
         </div>
 
-        <!-- <div class="testimonials__pro text-center">
 
+        <!-- <div class="testimonials-pro text-center">
 
             <p>馬上擁有自己的接單客服系統</p>
 
         </div> -->
 
-        <div class="testimonials__goto__btn text-center" style="margin-top: 0rem;">
 
+        <div class="testimonials-goto-btn text-center" style="margin-top: 0rem;">
 
             <a href="/contact/service/" class="btn btn-lg">洽詢專案製作 -></a>
 
         </div>
 
     </div>

+ 4 - 4
layouts/partials/trends.html
View File 

@@ -8,12 +8,12 @@
 
             <h2>趨勢排行</h2>
 
         </div>
 
         <div class="col-md-12">
 
-            <div class="row row__rank">
 
+            <div class="row row-rank">
 
             {{ range $index, $element := sort .Site.Data.trends "weight" }}
 
                 <div class="col-6 col-md-3 rank">
 
-                    <div class="box-simple rank__box">
 
-                        <span class="rank__num">{{ $element.weight | markdownify }}</span>
 
-                        <h3 class="rank__word">{{ $element.name | markdownify }}</h3>
 
+                    <div class="box-simple rank-box">
 
+                        <span class="rank-num">{{ $element.weight | markdownify }}</span>
 
+                        <h3 class="rank-word">{{ $element.name | markdownify }}</h3>
 
                     </div>
 
                 </div>
 
             {{ end }}

+ 15 - 15
layouts/partials/videoDemo.html
View File 

@@ -7,40 +7,40 @@
 
         </div>
 
         <div class="col-md-12">
 
             <div class="row">
 
-                <div class="col-md-6 video__col video__steps">
 
+                <div class="col-md-6 video-col video-steps">
 
                     <div class="video-steps">
 
-                        <div class="steps__box">
 
-                            <div class="steps__num">
 
+                        <div class="steps-box">
 
+                            <div class="steps-num">
 
                                 1
 
                             </div>
 
                             <div>
 
-                                <i class="fas fa-heading steps__icon"></i>
 
-                                <p class="steps__name">命名影片</p>
 
+                                <i class="fas fa-heading steps-icon"></i>
 
+                                <p class="steps-name">命名影片</p>
 
                             </div>
 
                         </div>
 
-                        <div class="steps__box">
 
-                            <div class="steps__num">
 
+                        <div class="steps-box">
 
+                            <div class="steps-num">
 
                                 2
 
                             </div>
 
                             <div>
 
-                                <i class="fas fa-scroll steps__icon"></i>
 
-                                <p class="steps__name">輸入講稿</p>
 
+                                <i class="fas fa-scroll steps-icon"></i>
 
+                                <p class="steps-name">輸入講稿</p>
 
                             </div>
 
                         </div>
 
-                        <div class="steps__box">
 
-                            <div class="steps__num">
 
+                        <div class="steps-box">
 
+                            <div class="steps-num">
 
                                 3
 
                             </div>
 
                             <div>
 
-                                <i class="fas fa-images steps__icon"></i>
 
-                                <p class="steps__name">輸入背景圖片</p>
 
+                                <i class="fas fa-images steps-icon"></i>
 
+                                <p class="steps-name">輸入背景圖片</p>
 
                             </div>
 
                         </div>
 
                     </div>
 
                     <a href="/contact/service/" class="btn btn-lg btn-video">洽詢專案製作</a>
 
                 </div>
 
-                <div class="col-md-6 video__col">
 
-                    <div class="box-simple box__video">
 
+                <div class="col-md-6 video-col">
 
+                    <div class="box-simple box-video">
 
                         <iframe src="https://www.youtube.com/embed/E4Dt7eU3WCo?autoplay=1" frameborder="0" style="width: 100%; height: 220px;"></iframe>
 
                     </div>
 
                 </div>

+ 3 - 3
layouts/partials/videos.html
View File 

@@ -9,13 +9,13 @@
 
         <div class="col-md-12">
 
             <div class="row">
 
             {{ range $index, $element := sort .Site.Data.videos "weight" }}
 
-                <div class="col-md-6 video__col">
 
-                    <div class="box-simple box__video">
 
+                <div class="col-md-6 video-col">
 
+                    <div class="box-simple box-video">
 
                         {{ with $element.url }}
 
                         </a>
 
                         {{ end }}
 
                         <h3 class="video__title">{{ $element.name | markdownify }}</h3>
 
-                        <p class="video__desc">{{ $element.description | markdownify }}</p>
 
+                        <p class="video-desc">{{ $element.description | markdownify }}</p>
 
                         <iframe src="{{ $element.url }}" frameborder="0" style="width: 100%; height: 220px;"></iframe>
 
                     </div>
 
                 </div>

+ 1 - 1
layouts/partials/visualfeature.html
View File 

@@ -19,7 +19,7 @@
 
                         {{ with $element.url }}
 
                         <a href="{{ $element.url }}">
 
                         {{ end }}
 
-                            <div class="icon icon__feature">
 
+                            <div class="icon icon-feature">
 
                                 <i class="{{ .icon }}"></i>
 
                             </div>
 
                         {{ with $element.url }}

+ 87 - 45
layouts/partials/vtuber.html
View File 

@@ -1,49 +1,91 @@
 
 <div id="block-vtuber">
 
-    <section class="row sec sec01">
 
-        <div class="container">
 
-            <div class="row">
 
-                <div class="col-md-6">
 
-                    <div class="txt-block">
 
-                        <h2>What is VTuber?<br>VTuber 101</h2>
 
-                        <p>全名為「Virtual YouTuber」簡稱為「Vtuber」，其意思為「虛擬的」Youtuber。是以虛擬的人物進行Youtube相關的影音創作，藉此讓動畫人物如真正的人一樣生動且真實。</p>
 
-                    </div>
 
-                </div>
 
-                <div class="col-md-6">
 
-                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//IzHhpC_bD6g?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
 
-                </div>
 
-            </div>
 
+  <section class="sec sec01">
 
+    <div class="container">
 
+      <div class="row">
 
+        <div class="col-md-6">
 
+          <div class="txt-block">
 
+            <h2>What is VTuber?<br>VTuber 101</h2>
 
+            <p>全名為「Virtual YouTuber」簡稱為「Vtuber」，其意思為「虛擬的」Youtuber。是以虛擬的人物進行Youtube相關的影音創作，藉此讓動畫人物如真正的人一樣生動且真實。</p>
 
+          </div>
 
+        </div>
 
+        <div class="col-md-6">
 
+          <style>
 
+            .embed-container {
 
+              position: relative;
 
+              padding-bottom: 56.25%;
 
+              height: 0;
 
+              max-width: 100%;
 
+              box-shadow: 1px 1px 8px 2px grey;
 
+              border-radius: 1rem;
 
+            }
 
+
 
+            .embed-container iframe,
 
+            .embed-container object,
 
+            .embed-container embed {
 
+              position: absolute;
 
+              top: 0;
 
+              left: 0;
 
+              width: 100%;
 
+              height: 100%;
 
+            }
 
+          </style>
 
+          <div class='embed-container'><iframe src='https://www.youtube.com/embed//IzHhpC_bD6g?autoplay=1&mute=1'
 
+              frameborder='0' allowfullscreen></iframe></div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </section>
 
+  <section class="row sec sec02">
 
+    <div class="container">
 
+      <div class="row">
 
+        <div class="col-md-6">
 
+          <style>
 
+            .embed-container {
 
+              position: relative;
 
+              padding-bottom: 56.25%;
 
+              height: 0;
 
+              max-width: 100%;
 
+              box-shadow: 1px 1px 8px 2px grey;
 
+              border-radius: 1rem;
 
+            }
 
+
 
+            .embed-container iframe,
 
+            .embed-container object,
 
+            .embed-container embed {
 
+              position: absolute;
 
+              top: 0;
 
+              left: 0;
 
+              width: 100%;
 
+              height: 100%;
 
+            }
 
+          </style>
 
+          <div class='embed-container'><iframe src='https://www.youtube.com/embed//9vrkENKrWeA?autoplay=1&mute=1'
 
+              frameborder='0' allowfullscreen></iframe></div>
 
         </div>
 
-    </section>
 
-    <section class="row sec sec02">
 
-        <div class="container">
 
-            <div class="row">
 
-                <div class="col-md-6">
 
-                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//9vrkENKrWeA?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
 
-                </div>
 
-                <div class="col-md-6">
 
-                    <div class="txt-block">
 
-                        <h2>Top Vtuber</h2>
 
-                        <div class="owl-carousel project">
 
-                            <ul class="item rankblock">
 
-                                <li><span>No1.</span> Kizuna AI</li>
 
-                                <li><span>No2.</span> Gawr Gura </li>
 
-                                <li><span>No3.</span> Inugami Korone </li>
 
-                            </ul>
 
-                            <ul class="item rankblock">
 
-                                <li>No4. Kizuna AI</li>
 
-                                <li>No5. Gawr Gura </li>
 
-                                <li>No6. Inugami Korone </li>
 
-                            </ul>
 
-                            <ul class="item rankblock">
 
-                                <li>No7. Kizuna AI</li>
 
-                                <li>No8. Gawr Gura </li>
 
-                                <li>No9. Inugami Korone </li>
 
-                                <li>No10. Inugami Korone </li>
 
-                            </ul>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
+        <div class="col-md-6">
 
+          <div class="txt-block">
 
+            <h2>Top Vtuber</h2>
 
+            <div class="owl-carousel project">
 
+              <ul class="item rankblock">
 
+                <li><span>No1.</span> Kizuna AI</li>
 
+                <li><span>No2.</span> Gawr Gura </li>
 
+                <li><span>No3.</span> Inugami Korone </li>
 
+              </ul>
 
+              <ul class="item rankblock">
 
+                <li>No4. Kizuna AI</li>
 
+                <li>No5. Gawr Gura </li>
 
+                <li>No6. Inugami Korone </li>
 
+              </ul>
 
+              <ul class="item rankblock">
 
+                <li>No7. Kizuna AI</li>
 
+                <li>No8. Gawr Gura </li>
 
+                <li>No9. Inugami Korone </li>
 
+                <li>No10. Inugami Korone </li>
 
+              </ul>
 
             </div>
 
+          </div>
 
         </div>
 
-    </section>
 
-</div>
 
+      </div>
 
+    </div>
 
+  </section>
 
+</div>

+ 36 - 15
layouts/shortcodes/seo.html
View File 

@@ -1,18 +1,39 @@
 
 <div id="block-vtuber">
 
-    <section class="row sec sec01">
 
-        <div class="container">
 
-            <div class="row">
 
-                <div class="col-md-6">
 
-                    <div class="txt-block">
 
-                        <h2>What is SEO?<br>SEO 101</h2>
 
-                        <p>全名為全名為「Search Engine Optimization」。簡稱為「SEO」。集仕多股份有限公司是竹北SEO公司</p>
 
-                    </div>
 
-                </div>
 
-                <div class="col-md-6" style="position: relative;">
 
-                    <img src="https://i.imgur.com/2HjEBt5.png" alt="" width="250px" class="sec-right">
 
-                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//IzHhpC_bD6g?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
 
-                </div>
 
-            </div>
 
+  <section class="sec sec01">
 
+    <div class="container">
 
+      <div class="row">
 
+        <div class="col-md-6">
 
+          <div class="txt-block">
 
+            <h2>What is SEO?<br>SEO 101</h2>
 
+            <p>全名為全名為「Search Engine Optimization」。簡稱為「SEO」。集仕多股份有限公司是竹北SEO公司</p>
 
+          </div>
 
         </div>
 
-    </section>
 
+        <div class="col-md-6" style="position: relative;">
 
+          <img src="https://i.imgur.com/2HjEBt5.png" alt="" width="250px" class="sec-right">
 
+          <style>
 
+            .embed-container {
 
+              position: relative;
 
+              padding-bottom: 56.25%;
 
+              height: 0;
 
+              max-width: 100%;
 
+              box-shadow: 1px 1px 8px 2px grey;
 
+              border-radius: 1rem;
 
+            }
 
+
 
+            .embed-container iframe,
 
+            .embed-container object,
 
+            .embed-container embed {
 
+              position: absolute;
 
+              top: 0;
 
+              left: 0;
 
+              width: 100%;
 
+              height: 100%;
 
+            }
 
+          </style>
 
+          <div class='embed-container'><iframe src='https://www.youtube.com/embed//IzHhpC_bD6g?autoplay=1&mute=1'
 
+              frameborder='0' allowfullscreen></iframe></div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </section>
 
 </div>

+ 478 - 220
layouts/shortcodes/vtuber.html
View File 

@@ -1,240 +1,498 @@
 
 <div id="block-vtuber">
 
-    <section class="row sec sec01">
 
-        <div class="container">
 
-            <div class="row">
 
-                <div class="col-md-6">
 
+  <section class="sec sec01">
 
+    <div class="container">
 
+      <div class="row">
 
+        <div class="col-md-6">
 
+          <div class="txt-block">
 
+            <h2>What is VTuber?<br>VTuber 101</h2>
 
+            <p>全名為「Virtual YouTuber」簡稱為「Vtuber」，其意思為「虛擬的」Youtuber。是以虛擬的人物進行Youtube相關的影音創作，藉此讓動畫人物如真正的人一樣生動且真實。</p>
 
+          </div>
 
+        </div>
 
+        <div class="col-md-6" style="position: relative;">
 
+          <img src="https://i.imgur.com/2HjEBt5.png" alt="" width="250px" class="sec-right">
 
+          <style>
 
+            .embed-container {
 
+              position: relative;
 
+              padding-bottom: 56.25%;
 
+              height: 0;
 
+              max-width: 100%;
 
+              box-shadow: 1px 1px 8px 2px grey;
 
+              border-radius: 1rem;
 
+            }
 
+
 
+            .embed-container iframe,
 
+            .embed-container object,
 
+            .embed-container embed {
 
+              position: absolute;
 
+              top: 0;
 
+              left: 0;
 
+              width: 100%;
 
+              height: 100%;
 
+            }
 
+          </style>
 
+          <div class='embed-container'><iframe src='https://www.youtube.com/embed//IzHhpC_bD6g?autoplay=1&mute=1'
 
+              frameborder='0' allowfullscreen></iframe></div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </section>
 
+  <section class="row sec sec02">
 
+    <div class="container">
 
+      <div class="row">
 
+        <div class="col-md-6">
 
+          <style>
 
+            .embed-container {
 
+              position: relative;
 
+              padding-bottom: 56.25%;
 
+              height: 0;
 
+              max-width: 100%;
 
+              box-shadow: 1px 1px 8px 2px grey;
 
+              border-radius: 1rem;
 
+            }
 
+
 
+            .embed-container iframe,
 
+            .embed-container object,
 
+            .embed-container embed {
 
+              position: absolute;
 
+              top: 0;
 
+              left: 0;
 
+              width: 100%;
 
+              height: 100%;
 
+            }
 
+          </style>
 
+          <div class='embed-container'><iframe src='https://www.youtube.com/embed//9vrkENKrWeA?autoplay=1&mute=1'
 
+              frameborder='0' allowfullscreen></iframe></div>
 
+        </div>
 
+        <div class="col-md-6">
 
+          <div class="txt-block">
 
+            <h2>Top Vtuber</h2>
 
+            <div class="owl-carousel project">
 
+              <ul class="item rankblock">
 
+                <li><span>No1.</span> Gawr Gura / がうる・ぐら</li>
 
+                <li><span>No2.</span> Inugami Korone / 戌神ころね</li>
 
+                <li><span>No3.</span> Usada Pekora / 兎田ぺこら</li>
 
+              </ul>
 
+              <ul class="item rankblock">
 
+                <li><span>No4.</span> Mori Calliope / もりかりおぺ</li>
 
+                <li><span>No5.</span> Shirakami Fubuki / 白上フブキ</li>
 
+                <li><span>No6.</span> Houshou Marine / 宝鐘マリン</li>
 
+              </ul>
 
+              <ul class="item rankblock">
 
+                <li><span>No7.</span> Kiryu Coco / 桐生ココ</li>
 
+                <li><span>No8.</span> Watson Amelia / ワトソン・アメリア</li>
 
+                <li><span>No9.</span> Minato Aqua / 湊あくあ</li>
 
+              </ul>
 
+              <ul class="item rankblock">
 
+                <li><span>No10.</span> Uruha Rushi / 羽るしあ</li>
 
+              </ul>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </section>
 
+  <section class="row sec sec03">
 
+    <div class="container">
 
+      <h2>各國 VTuber</h2>
 
+      <div class="row">
 
+        <div class="col-md-12">
 
+          <div class="v-tabs">
 
+            <ul class="v-tabs-nav">
 
+              <li><a href="#tab-1">日本</a></li>
 
+              <li><a href="#tab-2">歐美</a></li>
 
+              <li><a href="#tab-3">印尼</a></li>
 
+              <li><a href="#tab-4">台灣</a></li>
 
+            </ul>
 
+            <div class="v-tabs-stage">
 
+              <div id="tab-1">
 
+                <div class="row">
 
+                  <div class="col-md-7">
 
                     <div class="txt-block">
 
-                        <h2>What is VTuber?<br>VTuber 101</h2>
 
-                        <p>全名為「Virtual YouTuber」簡稱為「Vtuber」，其意思為「虛擬的」Youtuber。是以虛擬的人物進行Youtube相關的影音創作，藉此讓動畫人物如真正的人一樣生動且真實。</p>
 
+                      <h2>Kizuna AI キズナアイ</h2>
 
+                      <p>絆愛（日語：キズナアイ；英語：Kizuna
 
+                        AI）是一個日本虛擬偶像、影音部落客，經營有YouTube頻道「A.I.Channel」和「A.I.Games」，也是公認的第一個虛擬YouTuber，頻道訂閱數超過400多萬。</p>
 
                     </div>
 
+                  </div>
 
+                  <div class="col-md-5">
 
+                    <style>
 
+                      .embed-container {
 
+                        position: relative;
 
+                        padding-bottom: 56.25%;
 
+                        height: 0;
 
+                        max-width: 100%;
 
+                        box-shadow: 1px 1px 8px 2px grey;
 
+                        border-radius: 1rem;
 
+                      }
 
+
 
+                      .embed-container iframe,
 
+                      .embed-container object,
 
+                      .embed-container embed {
 
+                        position: absolute;
 
+                        top: 0;
 
+                        left: 0;
 
+                        width: 100%;
 
+                        height: 100%;
 
+                      }
 
+                    </style>
 
+                    <div class='embed-container'><iframe
 
+                        src='https://www.youtube.com/embed//6IjFyOQUPf8?autoplay=1&mute=1' frameborder='0'
 
+                        allowfullscreen></iframe></div>
 
+                  </div>
 
                 </div>
 
-                <div class="col-md-6" style="position: relative;">
 
-                    <img src="https://i.imgur.com/2HjEBt5.png" alt="" width="250px" class="sec-right">
 
-                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//IzHhpC_bD6g?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
 
+              </div>
 
+              <div id="tab-2">
 
+                <div class="owl-carousel homepage">
 
+                  <div class="row item">
 
+                    <div class="col-md-7">
 
+                      <div class="txt-block">
 
+                        <h2>Ami Yamato</h2>
 
+                        <p>Ami
 
+                          Yamato是一位來自日本居住在倫敦的女性，影片以Vlog的形式呈現，紀錄她生活的點滴，影片中還經常有真人坐在她的旁邊並進行合作，或是與影星於電視劇中對談，充分融入現實的生活情景中。
 
+                        </p>
 
+                      </div>
 
+                    </div>
 
+                    <div class="col-md-5">
 
+                      <style>
 
+                        .embed-container {
 
+                          position: relative;
 
+                          padding-bottom: 56.25%;
 
+                          height: 0;
 
+                          max-width: 100%;
 
+                          box-shadow: 1px 1px 8px 2px grey;
 
+                          border-radius: 1rem;
 
+                        }
 
+
 
+                        .embed-container iframe,
 
+                        .embed-container object,
 
+                        .embed-container embed {
 
+                          position: absolute;
 
+                          top: 0;
 
+                          left: 0;
 
+                          width: 100%;
 
+                          height: 100%;
 
+                        }
 
+                      </style>
 
+                      <div class='embed-container'><iframe
 
+                          src='https://www.youtube.com/embed//9tYxBQbkmCM?autoplay=1&mute=1' frameborder='0'
 
+                          allowfullscreen></iframe></div>
 
+                    </div>
 
+                  </div>
 
+                  <div class="row item">
 
+                    <div class="col-md-7">
 
+                      <div class="txt-block">
 
+                        <h2>Miquela</h2>
 
+                        <p>來自洛杉磯，現年19歲的Lil Miquela便是其中佼佼者。擁有巴西與西班牙血統，Lil
 
+                          Miquela總是跟上最新趨勢的時髦穿搭，齊瀏海、雀斑與雙包包頭的個性造型，吸引了超過百萬的全球追蹤者關注，自2016年在Instagram出道以來，已在全球累積超過160萬追蹤者。
 
+                        </p>
 
+                      </div>
 
+                    </div>
 
+                    <div class="col-md-5">
 
+                      <style>
 
+                        .embed-container {
 
+                          position: relative;
 
+                          padding-bottom: 56.25%;
 
+                          height: 0;
 
+                          max-width: 100%;
 
+                          box-shadow: 1px 1px 8px 2px grey;
 
+                          border-radius: 1rem;
 
+                        }
 
+
 
+                        .embed-container iframe,
 
+                        .embed-container object,
 
+                        .embed-container embed {
 
+                          position: absolute;
 
+                          top: 0;
 
+                          left: 0;
 
+                          width: 100%;
 
+                          height: 100%;
 
+                        }
 
+                      </style>
 
+                      <div class='embed-container'><iframe
 
+                          src='https://www.youtube.com/embed//rQkvFXDi8Ic?autoplay=1&mute=1' frameborder='0'
 
+                          allowfullscreen></iframe></div>
 
+                    </div>
 
+                  </div>
 
                 </div>
 
-            </div>
 
-        </div>
 
-    </section>
 
-    <section class="row sec sec02">
 
-        <div class="container">
 
-            <div class="row">
 
-                <div class="col-md-6">
 
-                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//9vrkENKrWeA?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
 
+              </div>
 
+              <div id="tab-3">
 
+                <div class="row">
 
+                  <div class="col-md-7">
 
+                    <div class="txt-block">
 
+                      <h2>Hololive Vtuber 練習生</h2>
 
+                      <p>日本 Vtuber 公司 HoloLive，往全球開始拓展，HoloLive印尼第一期生相當成功，一期生有Airani Iofifteen, AyundaRisu,
 
+                        MoonaHoshinova ，因此也推出了二期生，在二期生當中，PavoliaReine, AnyaMelfissa 及 Kureiji Ollie，其中Kureiji
 
+                        Ollie已達74萬訂閱。</p>
 
+                    </div>
 
+                  </div>
 
+                  <div class="col-md-5">
 
+                    <style>
 
+                      .embed-container {
 
+                        position: relative;
 
+                        padding-bottom: 56.25%;
 
+                        height: 0;
 
+                        max-width: 100%;
 
+                        box-shadow: 1px 1px 8px 2px grey;
 
+                        border-radius: 1rem;
 
+                      }
 
+
 
+                      .embed-container iframe,
 
+                      .embed-container object,
 
+                      .embed-container embed {
 
+                        position: absolute;
 
+                        top: 0;
 
+                        left: 0;
 
+                        width: 100%;
 
+                        height: 100%;
 
+                      }
 
+                    </style>
 
+                    <div class='embed-container'><iframe
 
+                        src='https://www.youtube.com/embed//2zc9Cj6ZZN8?autoplay=1&mute=1' frameborder='0'
 
+                        allowfullscreen></iframe></div>
 
+                  </div>
 
                 </div>
 
-                <div class="col-md-6">
 
+              </div>
 
+              <div id="tab-4">
 
+                <div class="row">
 
+                  <div class="col-md-7">
 
                     <div class="txt-block">
 
-                        <h2>Top Vtuber</h2>
 
-                        <div class="owl-carousel project">
 
-                            <ul class="item rankblock">
 
-                                <li><span>No1.</span> Gawr Gura / がうる・ぐら</li>
 
-                                <li><span>No2.</span> Inugami Korone / 戌神ころね</li>
 
-                                <li><span>No3.</span> Usada Pekora / 兎田ぺこら</li>
 
-                            </ul>
 
-                            <ul class="item rankblock">
 
-                                <li><span>No4.</span> Mori Calliope / もりかりおぺ</li>
 
-                                <li><span>No5.</span> Shirakami Fubuki / 白上フブキ</li>
 
-                                <li><span>No6.</span> Houshou Marine / 宝鐘マリン</li>
 
-                            </ul>
 
-                            <ul class="item rankblock">
 
-                                <li><span>No7.</span> Kiryu Coco / 桐生ココ</li>
 
-                                <li><span>No8.</span> Watson Amelia / ワトソン・アメリア</li>
 
-                                <li><span>No9.</span> Minato Aqua / 湊あくあ</li>
 
-                            </ul>
 
-                            <ul class="item rankblock">
 
-                                <li><span>No10.</span> Uruha Rushi / 羽るしあ</li>
 
-                            </ul>
 
-                        </div>
 
+                      <h2>台灣熱議 VTuber</h2>
 
+                      <p>台日混血的杏仁咪嚕，是Yahoo
 
+                        TV所屬的虛擬網紅，遊戲實況、翻唱及直播為主。璐洛洛、粉絲被稱為滷肉肉。設定為DPC研究團隊，開啟的Vtuber培育計畫所誕生的人造人，鳥羽樂奈、整體為貓頭鷹的形象，基調為綠色，米白色的頭髮帶有一點黃色挑染，香草奈若、整體為蠑螈帽子的形象，粉紅色的頭髮，會學國動、學甚麼像甚麼。悠白、設定為來自天空的雲之少女，整體為短髮，頭部帶著雲朵同心圓的金屬家徽，由於外觀因素常被戲稱為蚊香。
 
+                      </p>
 
                     </div>
 
+                  </div>
 
+                  <div class="col-md-5">
 
+                    <style>
 
+                      .embed-container {
 
+                        position: relative;
 
+                        padding-bottom: 56.25%;
 
+                        height: 0;
 
+                        max-width: 100%;
 
+                        box-shadow: 1px 1px 8px 2px grey;
 
+                        border-radius: 1rem;
 
+                      }
 
+
 
+                      .embed-container iframe,
 
+                      .embed-container object,
 
+                      .embed-container embed {
 
+                        position: absolute;
 
+                        top: 0;
 
+                        left: 0;
 
+                        width: 100%;
 
+                        height: 100%;
 
+                      }
 
+                    </style>
 
+                    <div class='embed-container'><iframe
 
+                        src='https://www.youtube.com/embed//2zc9Cj6ZZN8?autoplay=1&mute=1' frameborder='0'
 
+                        allowfullscreen></iframe></div>
 
+                  </div>
 
                 </div>
 
+              </div>
 
             </div>
 
+          </div>
 
         </div>
 
-    </section>
 
-    <section class="row sec sec03">
 
-        <div class="container">
 
-            <h2>各國 VTuber</h2>
 
-            <div class="row">
 
-                <div class="col-md-12">
 
-                    <div class="v-tabs">
 
-                        <ul class="v-tabs-nav">
 
-                          <li><a href="#tab-1">日本</a></li>
 
-                          <li><a href="#tab-2">歐美</a></li>
 
-                          <li><a href="#tab-3">印尼</a></li>
 
-                          <li><a href="#tab-4">台灣</a></li>
 
-                        </ul>
 
-                        <div class="v-tabs-stage">
 
-                          <div id="tab-1">
 
-                            <div class="row">
 
-                                <div class="col-md-7">
 
-                                    <div class="txt-block">
 
-                                        <h2>Kizuna AI キズナアイ</h2>
 
-                                        <p>絆愛（日語：キズナアイ；英語：Kizuna AI）是一個日本虛擬偶像、影音部落客，經營有YouTube頻道「A.I.Channel」和「A.I.Games」，也是公認的第一個虛擬YouTuber，頻道訂閱數超過400多萬。</p>
 
-                                    </div>
 
-                                </div>
 
-                                <div class="col-md-5">
 
-                                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//6IjFyOQUPf8?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
 
-                                </div>
 
-                            </div>
 
-                          </div>
 
-                          <div id="tab-2">
 
-                            <div class="owl-carousel homepage">
 
-                                <div class="row item">
 
-                                    <div class="col-md-7">
 
-                                        <div class="txt-block">
 
-                                            <h2>Ami Yamato</h2>
 
-                                            <p>Ami Yamato是一位來自日本居住在倫敦的女性，影片以Vlog的形式呈現，紀錄她生活的點滴，影片中還經常有真人坐在她的旁邊並進行合作，或是與影星於電視劇中對談，充分融入現實的生活情景中。</p>
 
-                                        </div>
 
-                                    </div>
 
-                                    <div class="col-md-5">
 
-                                        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//9tYxBQbkmCM?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
 
-                                    </div>
 
-                                </div>
 
-                                <div class="row item">
 
-                                    <div class="col-md-7">
 
-                                        <div class="txt-block">
 
-                                            <h2>Miquela</h2>
 
-                                            <p>來自洛杉磯，現年19歲的Lil Miquela便是其中佼佼者。擁有巴西與西班牙血統，Lil Miquela總是跟上最新趨勢的時髦穿搭，齊瀏海、雀斑與雙包包頭的個性造型，吸引了超過百萬的全球追蹤者關注，自2016年在Instagram出道以來，已在全球累積超過160萬追蹤者。</p>
 
-                                        </div>
 
-                                    </div>
 
-                                    <div class="col-md-5">
 
-                                        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//rQkvFXDi8Ic?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
 
-                                    </div>
 
-                                </div>
 
-                            </div>
 
-                          </div>
 
-                          <div id="tab-3">
 
-                            <div class="row">
 
-                                <div class="col-md-7">
 
-                                    <div class="txt-block">
 
-                                        <h2>Hololive Vtuber 練習生</h2>
 
-                                        <p>日本 Vtuber 公司 HoloLive，往全球開始拓展，HoloLive印尼第一期生相當成功，一期生有Airani Iofifteen, AyundaRisu, MoonaHoshinova ，因此也推出了二期生，在二期生當中，PavoliaReine, AnyaMelfissa 及 Kureiji Ollie，其中Kureiji Ollie已達74萬訂閱。</p>
 
-                                    </div>
 
-                                </div>
 
-                                <div class="col-md-5">
 
-                                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//2zc9Cj6ZZN8?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
 
-                                </div>
 
-                            </div>
 
-                          </div>
 
-                          <div id="tab-4">
 
-                            <div class="row">
 
-                                <div class="col-md-7">
 
-                                    <div class="txt-block">
 
-                                        <h2>台灣熱議 VTuber</h2>
 
-                                        <p>台日混血的杏仁咪嚕，是Yahoo TV所屬的虛擬網紅，遊戲實況、翻唱及直播為主。璐洛洛、粉絲被稱為滷肉肉。設定為DPC研究團隊，開啟的Vtuber培育計畫所誕生的人造人，鳥羽樂奈、整體為貓頭鷹的形象，基調為綠色，米白色的頭髮帶有一點黃色挑染，香草奈若、整體為蠑螈帽子的形象，粉紅色的頭髮，會學國動、學甚麼像甚麼。悠白、設定為來自天空的雲之少女，整體為短髮，頭部帶著雲朵同心圓的金屬家徽，由於外觀因素常被戲稱為蚊香。</p>
 
-                                    </div>
 
-                                </div>
 
-                                <div class="col-md-5">
 
-                                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//2zc9Cj6ZZN8?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
 
-                                </div>
 
-                            </div>
 
-                          </div>
 
-                        </div>
 
+      </div>
 
+    </div>
 
+  </section>
 
+  <section class="row sec sec04">
 
+    <div class="container">
 
+      <h2>特殊類型 VTuber</h2>
 
+      <div class="row">
 
+        <div class="col-md-12">
 
+          <div class="d-tabs">
 
+            <ul class="d-tabs-nav">
 
+              <li><a href="#tab2-1">企業</a></li>
 
+              <li><a href="#tab2-2">非人像</a></li>
 
+            </ul>
 
+            <div class="d-tabs-stage">
 
+              <div id="tab2-1">
 
+                <div class="row">
 
+                  <div class="col-md-7">
 
+                    <div class="txt-block">
 
+                      <h2>企業形象VTuber</h2>
 
+                      <p>
 
+                        各企業也紛紛推出VTuber，Netflix推出N子黑野明擔任宣傳大使，可以說英日兩種語言，並且擔任Netflix動畫情報的專員。雅虎擔任也推出兩位虛擬網紅虎妮與杏仁咪魯，樂敦製藥與三得利也皆推出VTuber，茨城縣則由VTuber擔任形象大使。
 
+                      </p>
 
                     </div>
 
+                  </div>
 
+                  <div class="col-md-5">
 
+                    <style>
 
+                      .embed-container {
 
+                        position: relative;
 
+                        padding-bottom: 56.25%;
 
+                        height: 0;
 
+                        max-width: 100%;
 
+                        box-shadow: 1px 1px 8px 2px grey;
 
+                        border-radius: 1rem;
 
+                      }
 
+
 
+                      .embed-container iframe,
 
+                      .embed-container object,
 
+                      .embed-container embed {
 
+                        position: absolute;
 
+                        top: 0;
 
+                        left: 0;
 
+                        width: 100%;
 
+                        height: 100%;
 
+                      }
 
+                    </style>
 
+                    <div class='embed-container'><iframe
 
+                        src='https://www.youtube.com/embed//QIbinFBjJxA?autoplay=1&mute=1' frameborder='0'
 
+                        allowfullscreen></iframe></div>
 
+                  </div>
 
                 </div>
 
-            </div>
 
-        </div>
 
-    </section>
 
-    <section class="row sec sec04">
 
-        <div class="container">
 
-            <h2>特殊類型 VTuber</h2>
 
-            <div class="row">
 
-                <div class="col-md-12">
 
-                    <div class="d-tabs">
 
-                        <ul class="d-tabs-nav">
 
-                          <li><a href="#tab2-1">企業</a></li>
 
-                          <li><a href="#tab2-2">非人像</a></li>
 
-                        </ul>
 
-                        <div class="d-tabs-stage">
 
-                          <div id="tab2-1">
 
-                            <div class="row">
 
-                                <div class="col-md-7">
 
-                                    <div class="txt-block">
 
-                                        <h2>企業形象VTuber</h2>
 
-                                        <p>各企業也紛紛推出VTuber，Netflix推出N子黑野明擔任宣傳大使，可以說英日兩種語言，並且擔任Netflix動畫情報的專員。雅虎擔任也推出兩位虛擬網紅虎妮與杏仁咪魯，樂敦製藥與三得利也皆推出VTuber，茨城縣則由VTuber擔任形象大使。</p>
 
-                                    </div>
 
-                                </div>
 
-                                <div class="col-md-5">
 
-                                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//QIbinFBjJxA?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
 
-                                </div>
 
-                            </div>
 
-                          </div>
 
-                          <div id="tab2-2">
 
-                            <div class="row">
 
-                                <div class="col-md-7">
 
-                                    <div class="txt-block">
 
-                                        <h2>非人像玩偶VTuber</h2>
 
-                                        <p>風靡全球的三麗鷗招牌萌貓 Hello Kitty，在2018年正式出道，當起了 VTuber，由於 Hello Kitty本身的高人氣，一開台即吸引了上萬人訂閱，目前已有將近三十萬人訂閱。除此之外，花生君是另一特別 VTuber，是個外型特殊的花生，醜中帶可愛的外型，也吸引了十二萬訂閱數。</p>
 
-                                    </div>
 
-                                </div>
 
-                                <div class="col-md-5">
 
-                                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//uwUVb7jPMJo?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
 
-                                </div>
 
-                            </div>
 
-                          </div>
 
-                        </div>
 
-                      </div>
 
+              </div>
 
+              <div id="tab2-2">
 
+                <div class="row">
 
+                  <div class="col-md-7">
 
+                    <div class="txt-block">
 
+                      <h2>非人像玩偶VTuber</h2>
 
+                      <p>風靡全球的三麗鷗招牌萌貓 Hello Kitty，在2018年正式出道，當起了 VTuber，由於 Hello
 
+                        Kitty本身的高人氣，一開台即吸引了上萬人訂閱，目前已有將近三十萬人訂閱。除此之外，花生君是另一特別 VTuber，是個外型特殊的花生，醜中帶可愛的外型，也吸引了十二萬訂閱數。</p>
 
+                    </div>
 
+                  </div>
 
+                  <div class="col-md-5">
 
+                    <style>
 
+                      .embed-container {
 
+                        position: relative;
 
+                        padding-bottom: 56.25%;
 
+                        height: 0;
 
+                        max-width: 100%;
 
+                        box-shadow: 1px 1px 8px 2px grey;
 
+                        border-radius: 1rem;
 
+                      }
 
+
 
+                      .embed-container iframe,
 
+                      .embed-container object,
 
+                      .embed-container embed {
 
+                        position: absolute;
 
+                        top: 0;
 
+                        left: 0;
 
+                        width: 100%;
 
+                        height: 100%;
 
+                      }
 
+                    </style>
 
+                    <div class='embed-container'><iframe
 
+                        src='https://www.youtube.com/embed//uwUVb7jPMJo?autoplay=1&mute=1' frameborder='0'
 
+                        allowfullscreen></iframe></div>
 
+                  </div>
 
                 </div>
 
+              </div>
 
             </div>
 
+          </div>
 
         </div>
 
-    </section>
 
-    <section class="row sec sec06">
 
-        <img src="https://i.imgur.com/2HjEBt5.png" alt="" width="250px" class="sec06-left">
 
-        <img src="https://i.imgur.com/2932J5G.png" alt="" width="250px" class="sec06-right">
 
-        <div class="container">
 
-            <h2 class="grow_title">How to Promote Your VTuber Channel</h2>
 
-            <p class="grow_txt">ChoozMo support Virtual YouTuber/Influencer digital marketing and fan growth strategy.<br>
 
-                We have a powerful video marketing SEO solution for you.<br>Our ChoozMo AIGV, the new software
 
-                service. It is driven by deep learning and other unique technology and<br>we can even custom virtual 
-                presenter to say anything! Any language!</p>
 
-            <span class="grow_call">Optimize your VTuber Channel</span>
 
-            <a class="grow_btn" href="https://docs.google.com/forms/d/e/1FAIpQLSfmkiBSQn5SZtZ3Wulq2O7D-XtYcf_9mlu35lrJp9Tq-mIa9Q/viewform">Grow Fans Now ! </a>
 
-            <div class="sec06-icons">
 
-                <img src="/img/Icon awesome-play.png" alt="" width="15">
 
-                <img src="/img/Group 946.png" alt="" width="15">
 
-                <img src="/img/Group 947.png" alt="" width="20">
 
-            </div>
 
-        </div>
 
-    </section>
 
-    <section class="row sec sec05">
 
-        <div class="container">
 
-            <h2>VTuber製作軟體</h2>
 
-            <div class="row">
 
-                <div class="col-md-12">
 
-                    <div class="m-tabs">
 
-                        <ul class="m-tabs-nav">
 
-                          <li><a href="#tab3-1">免費</a></li>
 
-                          <li><a href="#tab3-2">付費</a></li>
 
-                        </ul>
 
-                        <div class="m-tabs-stage">
 
-                          <div id="tab3-1">
 
-                            <div class="row">
 
-                                <div class="col-md-7">
 
-                                    <div class="txt-block">
 
-                                        <h2>VTuber免費製作軟體</h2>
 
-                                        <p>現在Vtuber越來越多樣化，想要當Vtuber首先要有工具，這邊介紹3款免費製作VTuber的軟體，VTube Studio、它具有創新功能，例如將道具固定到你的模型以及更多功能，也可以與觀眾一起玩樂。wakaru是個簡單易用的Vtuber工具，你只有要webcam，或是利用手機鏡頭， 配合OBS使用，馬上就可以成為Vtuber！VTuber Maker 、是一款，專注於極簡即用的VTuber直播軟體，僅僅只需要一個攝像頭，就能免費、簡單使用的3D工具。這些工具幫助你、跨出Vtuber的第一步。</p>
 
-                                    </div>
 
-                                </div>
 
-                                <div class="col-md-5">
 
-                                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//6JVBDIM7zac?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
 
-                                </div>
 
-                            </div>
 
-                          </div>
 
-                          <div id="tab3-2">
 
-                            <div class="row">
 
-                                <div class="col-md-7">
 
-                                    <div class="txt-block">
 
-                                        <h2>VTuber付費製作軟體</h2>
 
-                                        <p>付費的工具，讓你的角色更精緻。FaceRig、支持數字動作表情，語音調整，也可以訂自特殊角色。SUVA、支持數字觸發表情，如果沒有硬體、僅能追蹤頭部與眼睛。VDRAW 是一個可將你在電腦上所做的任何工作表達為虛擬角色活動，不僅可以做插畫，還可以做遊戲、3D建模、編程、DTM等。</p>
 
-                                    </div>
 
-                                </div>
 
-                                <div class="col-md-5">
 
-                                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//47lmIQebSck?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
 
-                                </div>
 
-                            </div>
 
-                          </div>
 
-                        </div>
 
-                      </div>
 
+      </div>
 
+    </div>
 
+  </section>
 
+  <section class="row sec sec06">
 
+    <img src="https://i.imgur.com/2HjEBt5.png" alt="" width="250px" class="sec06-left">
 
+    <img src="https://i.imgur.com/2932J5G.png" alt="" width="250px" class="sec06-right">
 
+    <div class="container">
 
+      <h2 class="grow-title">How to Promote Your VTuber Channel</h2>
 
+      <p class="grow-txt">ChoozMo support Virtual YouTuber/Influencer digital marketing and fan growth strategy.<br>
 
+        We have a powerful video marketing SEO solution for you.<br>Our ChoozMo AIGV, the new software
 
+        service. It is driven by deep learning and other unique technology and<br>we can even custom virtual
 
+        presenter to say anything! Any language!</p>
 
+      <span class="grow-call">Optimize your VTuber Channel</span>
 
+      <a class="grow-btn"
 
+        href="https://docs.google.com/forms/d/e/1FAIpQLSfmkiBSQn5SZtZ3Wulq2O7D-XtYcf_9mlu35lrJp9Tq-mIa9Q/viewform">Grow
 
+        Fans Now ! </a>
 
+      <div class="sec06-icons">
 
+        <img src="/img/Icon awesome-play.png" alt="" width="15">
 
+        <img src="/img/Group 946.png" alt="" width="15">
 
+        <img src="/img/Group 947.png" alt="" width="20">
 
+      </div>
 
+    </div>
 
+  </section>
 
+  <section class="row sec sec05">
 
+    <div class="container">
 
+      <h2>VTuber製作軟體</h2>
 
+      <div class="row">
 
+        <div class="col-md-12">
 
+          <div class="m-tabs">
 
+            <ul class="m-tabs-nav">
 
+              <li><a href="#tab3-1">免費</a></li>
 
+              <li><a href="#tab3-2">付費</a></li>
 
+            </ul>
 
+            <div class="m-tabs-stage">
 
+              <div id="tab3-1">
 
+                <div class="row">
 
+                  <div class="col-md-7">
 
+                    <div class="txt-block">
 
+                      <h2>VTuber免費製作軟體</h2>
 
+                      <p>現在Vtuber越來越多樣化，想要當Vtuber首先要有工具，這邊介紹3款免費製作VTuber的軟體，VTube
 
+                        Studio、它具有創新功能，例如將道具固定到你的模型以及更多功能，也可以與觀眾一起玩樂。wakaru是個簡單易用的Vtuber工具，你只有要webcam，或是利用手機鏡頭，
 
+                        配合OBS使用，馬上就可以成為Vtuber！VTuber Maker
 
+                        、是一款，專注於極簡即用的VTuber直播軟體，僅僅只需要一個攝像頭，就能免費、簡單使用的3D工具。這些工具幫助你、跨出Vtuber的第一步。</p>
 
+                    </div>
 
+                  </div>
 
+                  <div class="col-md-5">
 
+                    <style>
 
+                      .embed-container {
 
+                        position: relative;
 
+                        padding-bottom: 56.25%;
 
+                        height: 0;
 
+                        max-width: 100%;
 
+                        box-shadow: 1px 1px 8px 2px grey;
 
+                        border-radius: 1rem;
 
+                      }
 
+
 
+                      .embed-container iframe,
 
+                      .embed-container object,
 
+                      .embed-container embed {
 
+                        position: absolute;
 
+                        top: 0;
 
+                        left: 0;
 
+                        width: 100%;
 
+                        height: 100%;
 
+                      }
 
+                    </style>
 
+                    <div class='embed-container'><iframe
 
+                        src='https://www.youtube.com/embed//6JVBDIM7zac?autoplay=1&mute=1' frameborder='0'
 
+                        allowfullscreen></iframe></div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div id="tab3-2">
 
+                <div class="row">
 
+                  <div class="col-md-7">
 
+                    <div class="txt-block">
 
+                      <h2>VTuber付費製作軟體</h2>
 
+                      <p>付費的工具，讓你的角色更精緻。FaceRig、支持數字動作表情，語音調整，也可以訂自特殊角色。SUVA、支持數字觸發表情，如果沒有硬體、僅能追蹤頭部與眼睛。VDRAW
 
+                        是一個可將你在電腦上所做的任何工作表達為虛擬角色活動，不僅可以做插畫，還可以做遊戲、3D建模、編程、DTM等。</p>
 
+                    </div>
 
+                  </div>
 
+                  <div class="col-md-5">
 
+                    <style>
 
+                      .embed-container {
 
+                        position: relative;
 
+                        padding-bottom: 56.25%;
 
+                        height: 0;
 
+                        max-width: 100%;
 
+                        box-shadow: 1px 1px 8px 2px grey;
 
+                        border-radius: 1rem;
 
+                      }
 
+
 
+                      .embed-container iframe,
 
+                      .embed-container object,
 
+                      .embed-container embed {
 
+                        position: absolute;
 
+                        top: 0;
 
+                        left: 0;
 
+                        width: 100%;
 
+                        height: 100%;
 
+                      }
 
+                    </style>
 
+                    <div class='embed-container'><iframe
 
+                        src='https://www.youtube.com/embed//47lmIQebSck?autoplay=1&mute=1' frameborder='0'
 
+                        allowfullscreen></iframe></div>
 
+                  </div>
 
                 </div>
 
+              </div>
 
             </div>
 
+          </div>
 
         </div>
 
-    </section>
 
+      </div>
 
+    </div>
 
+  </section>
 
 </div>

+ 8 - 8
layouts/shortcodes/vtuberlist.html
View File 

@@ -2,7 +2,7 @@
 
 <div class="container vt-list">
 
     <div class="row vt-content" style="margin-right: 0px">
 
         <div class="col-6 col-sm-4 col-md-3">
 
-          <div class="card" style="width: 100%;">
 
+          <div class="card w-100">
 
             <div class="card-img-fr"><img class="card-img-top" src="https://www.tcbla.org.tw//img/16202921382044L6QIxJYF2J.jpg" alt="Card image cap"></div>
 
             <div class="card-body">
 
               <h5 class="card-title">宇宙喵 Kuroro</h5>
 
@@ -12,7 +12,7 @@
 
         </div>
 
         </div>
 
         <div class="col-6 col-sm-4 col-md-3">
 
-            <div class="card" style="width: 100%;">
 
+            <div class="card w-100">
 
                 <div class="card-img-fr"><img class="card-img-top" src="https://www.tcbla.org.tw//img/162029083055025AVzgnnjV0.jpg" alt="Card image cap"></div>
 
                 <div class="card-body">
 
                   <h5 class="card-title">達達與妃妃 DaiDai FeiFei</h5>
 
@@ -22,7 +22,7 @@
 
             </div>
 
         </div>
 
         <div class="col-6 col-sm-4 col-md-3">
 
-          <div class="card" style="width: 100%;">
 
+          <div class="card w-100">
 
             <div class="card-img-fr"><img class="card-img-top" src="https://www.tcbla.org.tw//img/162679825917082cO19F1hVS.jpg" alt="Card image cap"></div>
 
             <div class="card-body">
 
               <h5 class="card-title">汪來汪趣 wdog</h5>
 
@@ -32,7 +32,7 @@
 
         </div>
 
         </div>
 
         <div class="col-6 col-sm-4 col-md-3">
 
-          <div class="card" style="width: 100%;">
 
+          <div class="card w-100">
 
             <div class="card-img-fr"><img class="card-img-top" src="https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg" alt="Card image cap"></div>
 
             <div class="card-body">
 
               <h5 class="card-title">左翌設計 ZoeL Design</h5>
 
@@ -42,7 +42,7 @@
 
         </div>
 
         </div>
 
         <div class="col-6 col-sm-4 col-md-3">
 
-            <div class="card" style="width: 100%;">
 
+            <div class="card w-100">
 
               <div class="card-img-fr"><img class="card-img-top" src="https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg" alt="Card image cap"></div>
 
               <div class="card-body">
 
                 <h5 class="card-title">左翌設計 ZoeL Design</h5>
 
@@ -52,7 +52,7 @@
 
           </div>
 
           </div>
 
           <div class="col-6 col-sm-4 col-md-3">
 
-            <div class="card" style="width: 100%;">
 
+            <div class="card w-100">
 
               <div class="card-img-fr"><img class="card-img-top" src="https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg" alt="Card image cap"></div>
 
               <div class="card-body">
 
                 <h5 class="card-title">左翌設計 ZoeL Design</h5>
 
@@ -62,7 +62,7 @@
 
             </div>
 
           </div>
 
           <div class="col-6 col-sm-4 col-md-3">
 
-            <div class="card" style="width: 100%;">
 
+            <div class="card w-100">
 
               <div class="card-img-fr"><img class="card-img-top" src="https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg" alt="Card image cap"></div>
 
               <div class="card-body">
 
                 <h5 class="card-title">左翌設計 ZoeL Design</h5>
 
@@ -72,7 +72,7 @@
 
             </div>
 
           </div>
 
           <div class="col-6 col-sm-4 col-md-3">
 
-            <div class="card" style="width: 100%;">
 
+            <div class="card w-100">
 
               <div class="card-img-fr"><img class="card-img-top" src="https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg" alt="Card image cap"></div>
 
               <div class="card-body">
 
                 <h5 class="card-title">左翌設計 ZoeL Design</h5>

+ 14 - 14
layouts/shortcodes/what-is-seo-list.html
View File 

@@ -1,11 +1,11 @@
 
-<div class="seo_list">
 
+<div class="seo-list">
 
 
-    <div class="seo_content_box">
 
-        <div class="seo_list_header">
 
+    <div class="seo-content-box">
 
+        <div class="seo-list-header">
 
             <b class="list_title">內容目錄</b>
 
         </div>
 
-        <div class="seo_list_content">
 
-            <div class="Seo_list_itemWrap">
 
+        <div class="seo-list-content">
 
+            <div class="seo-list-item-wrap">
 
                 <div class="lwptoc_item">
 
                     <a href="#a1">
 
                         <span class="lwptoc_item_number">1.</span>
 
@@ -27,7 +27,7 @@
 
                         <span class="lwptoc_item_number">4.</span>
 
                         <span class="lwptoc_item_label">關鍵字廣告(PPC)付費流量 vs 搜尋引擎優化(SEO)免費流量</span>
 
                     </a>
 
-                    <div class="Seo_list_itemWrap">
 
+                    <div class="seo-list-item-wrap">
 
                         <div class="lwptoc_item"> <a href="#a4-1">
 
                                 <span class="lwptoc_item_number">4-1</span>
 
                                 <span class="lwptoc_item_label">在短時間內迅速看到成效 → 關鍵字廣告(PPC)</span>
 
@@ -44,7 +44,7 @@
 
                         <span class="lwptoc_item_number">5.</span>
 
                         <span class="lwptoc_item_label">SEO是什麼？</span>
 
                     </a>
 
-                    <div class="Seo_list_itemWrap">
 
+                    <div class="seo-list-item-wrap">
 
                         <div class="lwptoc_item"> <a href="#a5-1">
 
                                 <span class="lwptoc_item_number">5-1</span>
 
                                 <span class="lwptoc_item_label">我的網站需要做SEO嗎？如何判斷自己是否該做SEO？</span>
 
@@ -56,7 +56,7 @@
 
                         <span class="lwptoc_item_number">6.</span>
 
                         <span class="lwptoc_item_label">了解Google演算法與運作模式，讓Google更信任你的網站</span>
 
                     </a>
 
-                    <div class="Seo_list_itemWrap">
 
+                    <div class="seo-list-item-wrap">
 
                         <div class="lwptoc_item"> <a href="#a6-1">
 
                                 <span class="lwptoc_item_number">6-1</span>
 
                                 <span class="lwptoc_item_label">檢索(Crawl):</span>
 
@@ -83,7 +83,7 @@
 
                         <span class="lwptoc_item_number">8.</span>
 
                         <span class="lwptoc_item_label">SEO的2大核心方向技術、內容缺一不可</span>
 
                     </a>
 
-                    <div class="Seo_list_itemWrap">
 
+                    <div class="seo-list-item-wrap">
 
                         <div class="lwptoc_item"> <a href="#a8-1">
 
                                 <span class="lwptoc_item_number">8-1</span>
 
                                 <span class="lwptoc_item_label">Technical SEO:技術導向 SEO:讓google讀懂你的網站:</span>
 
@@ -101,7 +101,7 @@
 
                         <span class="lwptoc_item_number">9.</span>
 
                         <span class="lwptoc_item_label">如何開始做SEO?掌握以下技巧!獲得穩定的自然流量!</span>
 
 
-                        <div class="Seo_list_itemWrap">
 
+                        <div class="seo-list-item-wrap">
 
                             <div class="lwptoc_item"> <a href="#a9-1">
 
                                     <span class="lwptoc_item_number">9-1</span>
 
                                     <span class="lwptoc_item_label">關鍵字優化:</span>
 
@@ -189,7 +189,7 @@
 
     <p>&nbsp;</p>
 
     <h2 id="關鍵字廣告ppc付費流量vs搜尋引擎優化seo免費流量">關鍵字廣告(PPC)付費流量vs搜尋引擎優化(SEO)免費流量</h2>
 
     <p class="img_box">
 
-        <img class="seo_img" src="/imgs/seo/PpcVsSeo.png" alt="">
 
+        <img class="seo-img" src="/imgs/seo/PpcVsSeo.png" alt="">
 
     </p>
 
     <table>
 
         <thead>
 
@@ -254,7 +254,7 @@
 
 
     <p>那究竟該如何獲得穩定且源源不絕的「自然流量」呢 ?? 就是透過SEO （搜尋引擎優化）。</p>
 
     <a style="text-decoration: none;" target="_blank" href="/contact/service/">
 
-        <button class="LearnMore">我要透過SEO獲取流量</button>
 
+        <button class="learn-more">我要透過SEO獲取流量</button>
 
 
     </a>
 
     <p><a id="a5"></a></p>
 
@@ -369,7 +369,7 @@
 
 
     <p>系統化的SEO操作非常的複雜，細節也非常多，是一門跨領域的重大工程。因此使用SEO公司的系統化服務配和內容進行優化，SEO的效果會更顯著。</p>
 
     <a style="text-decoration: none;" target="_blank" href="/contact/service/">
 
-        <button class="LearnMore">我要做全方位的SEO</button>
 
+        <button class="learn-more">我要做全方位的SEO</button>
 
     </a>
 
     <a id="a8"></a>
 
     <p>&nbsp;</p>
 
@@ -499,6 +499,6 @@
 
     <p>不過由於技術為導向的seo還是需要有資深背景的工程團隊來進行，因此若是想要做到全方面的SEO(包含關鍵字、網站架構、網址結構)。 </p>
 
     <p>不妨立即諮詢我們由我們來對您的網站做一次全面的健檢。</p>
 
     <a style="text-decoration: none;" target="_blank" href="/contact/service/">
 
-        <button class="LearnMore">立即諮詢</button>
 
+        <button class="learn-more">立即諮詢</button>
 
     </a>
 
 </div>

+ 20 - 20
layouts/trends/single.html
View File 

@@ -78,7 +78,7 @@
 
           <div class="col-md-4">
 
             <div class="card card__rank">
 
               <span class="top3__num">1</span>
 
-              <strong class="card__rank__word">{{ .Params.no01 }}</strong>
 
+              <strong class="card__rank-word">{{ .Params.no01 }}</strong>
 
               <hr>
 
               <div class="card__rank__goto">
 
                 <a href="/trenddetail/{{ .Params.date.Format " 20060102" }}_01/" class="card__rank__link">看新聞 ></a>
 
@@ -88,7 +88,7 @@
 
           <div class="col-md-4">
 
             <div class="card card__rank">
 
               <span class="top3__num">2</span>
 
-              <strong class="card__rank__word">{{ .Params.no02 }}</strong>
 
+              <strong class="card__rank-word">{{ .Params.no02 }}</strong>
 
               <hr>
 
               <div class="card__rank__goto">
 
                 <a href="/trenddetail/{{ .Params.date.Format " 20060102" }}_02/" class="card__rank__link">看新聞 ></a>
 
@@ -98,7 +98,7 @@
 
           <div class="col-md-4">
 
             <div class="card card__rank">
 
               <span class="top3__num">3</span>
 
-              <strong class="card__rank__word">{{ .Params.no03 }}</strong>
 
+              <strong class="card__rank-word">{{ .Params.no03 }}</strong>
 
               <hr>
 
               <div class="card__rank__goto">
 
                 <a href="/trenddetail/{{ .Params.date.Format " 20060102" }}_03/" class="card__rank__link">看新聞 ></a>
 
@@ -115,7 +115,7 @@
 
             <div class="card card__rank">
 
               <div class="d-flex align-items-center">
 
                 <span class="top20__num">4</span>
 
-                <strong class="card__rank__word">{{ .Params.no04 }}</strong>
 
+                <strong class="card__rank-word">{{ .Params.no04 }}</strong>
 
               </div>
 
               <hr>
 
               <div class="card__rank__goto">
 
@@ -127,7 +127,7 @@
 
             <div class="card card__rank">
 
               <div class="d-flex align-items-center">
 
                 <span class="top20__num">5</span>
 
-                <strong class="card__rank__word">{{ .Params.no05 }}</strong>
 
+                <strong class="card__rank-word">{{ .Params.no05 }}</strong>
 
               </div>
 
               <hr>
 
               <div class="card__rank__goto">
 
@@ -139,7 +139,7 @@
 
             <div class="card card__rank">
 
               <div class="d-flex align-items-center">
 
                 <span class="top20__num">6</span>
 
-                <strong class="card__rank__word">{{ .Params.no06 }}</strong>
 
+                <strong class="card__rank-word">{{ .Params.no06 }}</strong>
 
               </div>
 
               <hr>
 
               <div class="card__rank__goto">
 
@@ -151,7 +151,7 @@
 
             <div class="card card__rank">
 
               <div class="d-flex align-items-center">
 
                 <span class="top20__num">7</span>
 
-                <strong class="card__rank__word">{{ .Params.no07 }}</strong>
 
+                <strong class="card__rank-word">{{ .Params.no07 }}</strong>
 
               </div>
 
               <hr>
 
               <div class="card__rank__goto">
 
@@ -163,7 +163,7 @@
 
             <div class="card card__rank">
 
               <div class="d-flex align-items-center">
 
                 <span class="top20__num">8</span>
 
-                <strong class="card__rank__word">{{ .Params.no08 }}</strong>
 
+                <strong class="card__rank-word">{{ .Params.no08 }}</strong>
 
               </div>
 
               <hr>
 
               <div class="card__rank__goto">
 
@@ -175,7 +175,7 @@
 
             <div class="card card__rank">
 
               <div class="d-flex align-items-center">
 
                 <span class="top20__num">9</span>
 
-                <strong class="card__rank__word">{{ .Params.no09 }}</strong>
 
+                <strong class="card__rank-word">{{ .Params.no09 }}</strong>
 
               </div>
 
               <hr>
 
               <div class="card__rank__goto">
 
@@ -187,7 +187,7 @@
 
             <div class="card card__rank">
 
               <div class="d-flex align-items-center">
 
                 <span class="top20__num">10</span>
 
-                <strong class="card__rank__word">{{ .Params.no10 }}</strong>
 
+                <strong class="card__rank-word">{{ .Params.no10 }}</strong>
 
               </div>
 
               <hr>
 
               <div class="card__rank__goto">
 
@@ -199,7 +199,7 @@
 
             <div class="card card__rank">
 
               <div class="d-flex align-items-center">
 
                 <span class="top20__num">11</span>
 
-                <strong class="card__rank__word">{{ .Params.no11 }}</strong>
 
+                <strong class="card__rank-word">{{ .Params.no11 }}</strong>
 
               </div>
 
               <hr>
 
               <div class="card__rank__goto">
 
@@ -211,7 +211,7 @@
 
             <div class="card card__rank">
 
               <div class="d-flex align-items-center">
 
                 <span class="top20__num">12</span>
 
-                <strong class="card__rank__word">{{ .Params.no12 }}</strong>
 
+                <strong class="card__rank-word">{{ .Params.no12 }}</strong>
 
               </div>
 
               <hr>
 
               <div class="card__rank__goto">
 
@@ -223,7 +223,7 @@
 
             <div class="card card__rank">
 
               <div class="d-flex align-items-center">
 
                 <span class="top20__num">13</span>
 
-                <strong class="card__rank__word">{{ .Params.no13 }}</strong>
 
+                <strong class="card__rank-word">{{ .Params.no13 }}</strong>
 
               </div>
 
               <hr>
 
               <div class="card__rank__goto">
 
@@ -235,7 +235,7 @@
 
             <div class="card card__rank">
 
               <div class="d-flex align-items-center">
 
                 <span class="top20__num">14</span>
 
-                <strong class="card__rank__word">{{ .Params.no14 }}</strong>
 
+                <strong class="card__rank-word">{{ .Params.no14 }}</strong>
 
               </div>
 
               <hr>
 
               <div class="card__rank__goto">
 
@@ -247,7 +247,7 @@
 
             <div class="card card__rank">
 
               <div class="d-flex align-items-center">
 
                 <span class="top20__num">15</span>
 
-                <strong class="card__rank__word">{{ .Params.no15 }}</strong>
 
+                <strong class="card__rank-word">{{ .Params.no15 }}</strong>
 
               </div>
 
               <hr>
 
               <div class="card__rank__goto">
 
@@ -259,7 +259,7 @@
 
             <div class="card card__rank">
 
               <div class="d-flex align-items-center">
 
                 <span class="top20__num">16</span>
 
-                <strong class="card__rank__word">{{ .Params.no16 }}</strong>
 
+                <strong class="card__rank-word">{{ .Params.no16 }}</strong>
 
               </div>
 
               <hr>
 
               <div class="card__rank__goto">
 
@@ -271,7 +271,7 @@
 
             <div class="card card__rank">
 
               <div class="d-flex align-items-center">
 
                 <span class="top20__num">17</span>
 
-                <strong class="card__rank__word">{{ .Params.no17 }}</strong>
 
+                <strong class="card__rank-word">{{ .Params.no17 }}</strong>
 
               </div>
 
               <hr>
 
               <div class="card__rank__goto">
 
@@ -283,7 +283,7 @@
 
             <div class="card card__rank">
 
               <div class="d-flex align-items-center">
 
                 <span class="top20__num">18</span>
 
-                <strong class="card__rank__word">{{ .Params.no18 }}</strong>
 
+                <strong class="card__rank-word">{{ .Params.no18 }}</strong>
 
               </div>
 
               <hr>
 
               <div class="card__rank__goto">
 
@@ -295,7 +295,7 @@
 
             <div class="card card__rank">
 
               <div class="d-flex align-items-center">
 
                 <span class="top20__num">19</span>
 
-                <strong class="card__rank__word">{{ .Params.no19 }}</strong>
 
+                <strong class="card__rank-word">{{ .Params.no19 }}</strong>
 
               </div>
 
               <hr>
 
               <div class="card__rank__goto">
 
@@ -307,7 +307,7 @@
 
             <div class="card card__rank">
 
               <div class="d-flex align-items-center">
 
                 <span class="top20__num">20</span>
 
-                <strong class="card__rank__word">{{ .Params.no20 }}</strong>
 
+                <strong class="card__rank-word">{{ .Params.no20 }}</strong>
 
               </div>
 
               <hr>
 
               <div class="card__rank__goto">

+ 3 - 3
static/css/contact/styles-contact.css
View File 

@@ -143,7 +143,7 @@
 
   padding-left: 1rem;
 
 }
 
 
-.Contact_Us .service_info .LearnMore {
 
+.Contact_Us .service_info .learn-more {
 
   margin-top: 50px;
 
   padding: 5px 15px;
 
   border: 1px solid #EA5413;
 
@@ -154,13 +154,13 @@
 
   transition: 0.3s;
 
 }
 
 
-.Contact_Us .service_info .LearnMore:hover {
 
+.Contact_Us .service_info .learn-more:hover {
 
   color: #EA5413;
 
   background: #fff;
 
 }
 
 
 @media screen and (max-width: 576px) {
 
-  .Contact_Us .service_info .LearnMore {
 
+  .Contact_Us .service_info .learn-more {
 
     margin-top: 15px;
 
   }
 
 }

+ 1 - 1
static/css/contact/styles-contact.scss
View File 

@@ -131,7 +131,7 @@
 
            padding-left: 1rem;
 
         }
 
     } 
-      .LearnMore{
 
+      .learn-more{
 
           margin-top: 50px;
 
           padding: 5px 15px;
 
           border:1px solid #EA5413;

+ 145 - 100
static/css/custom.css
View File 

@@ -738,7 +738,7 @@
 
   margin-bottom: 0;
 
 }
 
 
-.box-simple .video__desc {
 
+.box-simple .video-desc {
 
   color: black;
 
   font-size: 1.8rem;
 
   text-align: left;
 
@@ -746,19 +746,19 @@
 
   padding-right: 1rem;
 
 }
 
 
-.goto__btn {
 
+.goto-btn {
 
   text-align: center;
 
   margin-top: 2rem;
 
   margin-left: auto;
 
   margin-right: auto;
 
 }
 
 
-.container__footer {
 
+.container-footer {
 
   display: flex;
 
   align-items: center;
 
 }
 
 
-.box-simple .icon__feature {
 
+.box-simple .icon-feature {
 
   width: 120px;
 
   height: 120px;
 
   border-radius: 50%;
 
@@ -769,19 +769,23 @@
 
   margin-right: auto;
 
 }
 
 
-.box-simple .icon__feature > i {
 
+.box-simple .icon-feature > i {
 
   font-size: 4.5rem;
 
 }
 
 
-#content .container_list {
 
+#content .container-list {
 
   margin-top: 100px;
 
 }
 
 
+/* #all {
 
+  background: #fff;
 
+} */
 
+
 
 #post-content img {
 
   max-width: 100%;
 
   box-shadow: 0 11px 21px 0 rgba(194, 194, 194, 0.644);
 
   transition: all 0.3s;
 
-  margin: 1.5rem 0;
 
+  margin: 1.5rem .5rem;
 
 }
 
 
 #post-content img:hover {
 
@@ -798,13 +802,23 @@
 
   padding-bottom: 3rem;
 
 }
 
 
+#blog-post .submit-btn {
 
+  padding: 15px 40px 10px;
 
+}
 
+
 
 #blog-post h2 {
 
-  font-family: "Proxima Nova", sans-serif;
 
+  padding-left: 20px;
 
+  margin: 30px 0;
 
+  font-size: 1.8rem;
 
+  font-weight: bold;
 
+  border-left: 4px solid #ea5413;
 
+  letter-spacing: 2px;
 
+  /* font-family: "Proxima Nova", sans-serif;
 
   margin-right: 5px;
 
   font-size: 3.2rem;
 
   padding-left: 2rem;
 
   border-left: 4px solid #ea5413;
 
-  letter-spacing: 1px;
 
+  letter-spacing: 1px; */
 
 }
 
 
 #blog-post h3 {
 
@@ -816,19 +830,24 @@
 
   /* border-left: 4px solid #EA5413; */
 
 }
 
 
-#blog-post p,
 
+/* #blog-post p,
 
 #blog-post li {
 
   font-size: 2rem;
 
   font-family: "Proxima Nova", sans-serif;
 
   letter-spacing: 1px;
 
-}
 
+} */
 
 
-#blog-post p {
 
-  margin-bottom: 1.8rem;
 
+#blog-post p,
 
+#blog-post li {
 
+  font-size: 16px;
 
   letter-spacing: 1px;
 
   line-height: 32px;
 
 }
 
 
+#blog-post p {
 
+  margin-bottom: 50px;
 
+}
 
+
 
 #blog-post code {
 
   color: black;
 
   font-size: 80%;
 
@@ -892,12 +911,13 @@
 
 #block-vtuber h2 {
 
   font-family: "Poppins", sans-serif;
 
   font-weight: bolder;
 
-  font-size: 3.7rem;
 
+  font-size: 36px;
 
 }
 
 
 #block-vtuber p {
 
-  font-size: 1.8rem;
 
-  line-height: 3rem;
 
+  font-size: 16px;
 
+  line-height: 32px;
 
+  letter-spacing: 1px;
 
 }
 
 
 .txt-block {
 
@@ -905,13 +925,13 @@
 
 }
 
 
 .sec {
 
-  padding: 9rem 0;
 
+  padding: 3rem 0;
 
   margin-bottom: 0;
 
 }
 
 
-.sec01 {
 
+/* .sec01 {
 
   padding-top: 2rem;
 
-}
 
+} */
 
 
 .sec-right {
 
   position: absolute;
 
@@ -989,12 +1009,6 @@
 
   background-position: 0 0;
 
 }
 
 
-.img_decor {
 
-  position: absolute;
 
-  left: 4rem;
 
-  top: 1rem;
 
-}
 
-
 
 .project {
 
   max-height: 16rem;
 
 }
 
@@ -1059,6 +1073,11 @@
 
   color: #ea5413;
 
 }
 
 
+.panel-body .btn {
 
+  padding: 7px 14px;
 
+  border-radius: 0 2rem 2rem 0;
 
+}
 
+
 
 .btn {
 
   color: #ea5413;
 
   border: 2px solid #ea5413;
 
@@ -1264,15 +1283,15 @@
 
   margin-right: 1rem;
 
 }
 
 
-.grow_title {
 
+.grow-title {
 
   text-align: center;
 
 }
 
 
-.grow_txt {
 
+.grow-txt {
 
   font-size: 1.2rem;
 
 }
 
 
-.grow_call {
 
+.grow-call {
 
   font-weight: 700;
 
   font-family: Arial, Helvetica, sans-serif;
 
   font-size: 2.3rem;
 
@@ -1282,7 +1301,7 @@
 
   color: #ea5413;
 
 }
 
 
-.grow_btn {
 
+.grow-btn {
 
   padding: 1.2rem 7rem;
 
   font-size: 2.5rem;
 
   border: 2px solid #ea5413;
 
@@ -1295,13 +1314,13 @@
 
   text-decoration: none;
 
 }
 
 
-.grow_btn:hover {
 
+.grow-btn:hover {
 
   color: white;
 
   background: #ea5413;
 
   text-decoration: none;
 
 }
 
 
-.grow_img {
 
+.grow-img {
 
   display: block;
 
   margin: 0 auto;
 
   margin-top: 1rem;
 
@@ -1542,19 +1561,19 @@
 
 }
 
 
 @media (max-width: 992px) {
 
-  .container__footer {
 
+  .container-footer {
 
     flex-direction: column;
 
   }
 
-  .container__footer > div {
 
+  .container-footer > div {
 
     margin-bottom: 1.5rem;
 
   }
 
-  .video__col {
 
+  .video-col {
 
     margin-bottom: 2rem;
 
   }
 
   .mb-mobile {
 
     margin-bottom: 5rem;
 
   }
 
-  .step__box {
 
+  .step-box {
 
     margin-bottom: 2rem;
 
   }
 
 }
 
@@ -1570,7 +1589,7 @@
 
   position: relative;
 
 }
 
 
-.box-steps .step__box {
 
+.box-steps .step-box {
 
   position: absolute;
 
   left: -5px;
 
   top: -5px;
 
@@ -1579,7 +1598,7 @@
 
   background-color: white;
 
 }
 
 
-.box-steps .step__box span {
 
+.box-steps .step-box span {
 
   font-size: 3rem;
 
   font-weight: 600;
 
   color: #38a7bb;
 
@@ -1593,11 +1612,11 @@
 
   font-size: 3.5rem;
 
 }
 
 
-.box__video {
 
+.box-video {
 
   min-height: 280px;
 
 }
 
 
-.footer__btn__text {
 
+.footer-btn-text {
 
   font-size: 2rem;
 
   color: white;
 
 }
 
@@ -1616,7 +1635,7 @@
 
   padding: 10px 2rem;
 
 }
 
 
-.table .column .body__company {
 
+.table .column .body-company {
 
   font-size: 1.6rem;
 
   font-weight: 500;
 
 }
 
@@ -1626,19 +1645,19 @@
 
   color: rgb(5, 212, 5);
 
 }
 
 
-.table .column .body__head {
 
+.table .column .body-head {
 
   color: gray;
 
 }
 
 
-.table .column__first {
 
+.table .column-first {
 
   border-radius: 15px 0 0 15px;
 
 }
 
 
-.table .column__last {
 
+.table .column-last {
 
   border-radius: 0 15px 15px 0;
 
 }
 
 
-.table .column__choozmo {
 
+.table .column-choozmo {
 
   border: 1px solid rgb(212, 212, 212);
 
   box-shadow: 0 0 5px 1px rgb(197, 197, 197);
 
   border-radius: 15px;
 
@@ -1681,10 +1700,6 @@
 
   height: 40px;
 
 }
 
 
-.logo_text {
 
-  vertical-align: middle;
 
-}
 
-
 
 .footer-img {
 
   height: 60px;
 
 }
 
@@ -1696,14 +1711,14 @@
 
   margin-top: 1rem;
 
 }
 
 
-.followus__txt {
 
+.followus-txt {
 
   display: inline-block;
 
   margin-right: 1rem;
 
   color: white;
 
   font-weight: 600;
 
 }
 
 
-.followus .followus__img {
 
+.followus .followus-img {
 
   margin-right: 1rem;
 
 }
 
 
@@ -1726,7 +1741,7 @@
 
   line-height: 2.2rem;
 
 }
 
 
-.testimonial_img {
 
+.testimonial-img {
 
   width: 200px;
 
   border-radius: 50%;
 
   display: block;
 
@@ -1742,15 +1757,15 @@
 
   font-size: 1.6rem;
 
 }
 
 
-.testimonials__pro {
 
+.testimonials-pro {
 
   margin-bottom: 1rem;
 
 }
 
 
-.testimonials__pro p {
 
+.testimonials-pro p {
 
   font-size: 1.6rem;
 
 }
 
 
-.testimonials__goto__btn a {
 
+.testimonials-goto-btn a {
 
   animation-name: move;
 
   animation-duration: 1.5s;
 
   animation-delay: 0;
 
@@ -1773,21 +1788,21 @@
 
   }
 
 }
 
 
-.row__rank {
 
+.row-rank {
 
   height: min-content;
 
 }
 
 
-.rank__box {
 
+.rank-box {
 
   min-height: min-content;
 
 }
 
 
-.rank .rank__word {
 
+.rank .rank-word {
 
   display: inline-block;
 
   font-weight: 500;
 
   position: relative;
 
 }
 
 
-.rank .rank__word::after {
 
+.rank .rank-word::after {
 
   position: absolute;
 
   content: " ";
 
   width: 100%;
 
@@ -1797,7 +1812,7 @@
 
   background-color: #499aa8af;
 
 }
 
 
-.rank__num {
 
+.rank-num {
 
   display: inline-block;
 
   font-size: 3.5rem;
 
   color: #38a7bb;
 
@@ -1805,7 +1820,7 @@
 
   font-weight: 600;
 
 }
 
 
-.video__steps {
 
+.video-steps {
 
   margin-top: 6rem;
 
 }
 
 
@@ -1817,7 +1832,7 @@
 
 }
 
 
 @media (max-width: 992px) {
 
-  .video__steps {
 
+  .video-steps {
 
     margin-top: 1rem;
 
   }
 
 }
 
@@ -1827,23 +1842,23 @@
 
   text-align: center;
 
 }
 
 
-.steps__box {
 
+.steps-box {
 
   flex: 20%;
 
   position: relative;
 
 }
 
 
-.steps__icon {
 
+.steps-icon {
 
   font-size: 5rem;
 
   color: #38a7bb;
 
 }
 
 
-.steps__name {
 
+.steps-name {
 
   font-size: 1.8rem;
 
   color: rgb(68, 67, 67);
 
   margin-bottom: 1rem;
 
 }
 
 
-.steps__num {
 
+.steps-num {
 
   position: absolute;
 
   left: 15%;
 
   top: -2.5rem;
 
@@ -1858,7 +1873,7 @@
 
   box-shadow: 4px 4px 1px rgb(0, 0, 0, 0.1);
 
   transition: all 0.5s;
 
   text-align: center;
 
-  height: 42vh;
 
+  /* height: 42vh; */
 
   max-height: 45vh;
 
   border-radius: 1rem;
 
   background-color: #fff;
 
@@ -1940,15 +1955,20 @@
 
 .card-img-fr {
 
   width: 100%;
 
   transition: all 0.8s;
 
-  height: 20vh;
 
+  /* height: 20vh; */
 
   background-size: cover;
 
   background-position: top;
 
   background-repeat: no-repeat;
 
   background-color: #fff;
 
 }
 
 
+.card-img-top {
 
+  height: 30vh;
 
+  object-fit: cover;
 
+}
 
+
 
 .card-title {
 
-  font-size: 2.1rem;
 
+  font-size: 2rem;
 
   margin-bottom: 2rem;
 
 }
 
 
@@ -2157,73 +2177,74 @@
 
   background-color: antiquewhite;
 
 }
 
 
-.seo_list_content a {
 
+.seo-list-content a {
 
   font-size: 18px;
 
   font-weight: 400;
 
   line-height: 28px;
 
   letter-spacing: 1px;
 
 }
 
 
-.seo_list_header {
 
+.seo-list-header {
 
   font-size: 18px;
 
 }
 
 
-.Seo_list_itemWrap {
 
+.seo-list-item-wrap {
 
   margin: 2px 0 0 14px;
 
 }
 
 
-.seo_content_box {
 
+.seo-content-box {
 
   padding: 14px 18px 18px;
 
   background: #fafafa;
 
 }
 
 
-.seo_list_header {
 
+.seo-list-header {
 
   margin-bottom: 6px;
 
 }
 
 
-.seo_list p {
 
+.seo-list p {
 
   margin-bottom: 1.6em !important;
 
   letter-spacing: 1px;
 
 }
 
 
-.seo_list table {
 
+.seo-list table {
 
   width: 100%;
 
   margin-bottom: 1.4em;
 
   max-width: 100%;
 
   border: 1px solid #eaeaea;
 
   font-size: 16px;
 
 }
 
-.seo_list table tbody tr td {
 
+
 
+.seo-list table tbody tr td {
 
   width: 40%;
 
   padding: 1em 1.4em;
 
   border: solid 1px #bbb;
 
   text-align: left;
 
 }
 
 
-.seo_list table th {
 
+.seo-list table th {
 
   padding: 1em 1.4em;
 
   border: solid 1px #bbb;
 
   text-align: left;
 
 }
 
 
-.seo_list table thead th {
 
+.seo-list table thead th {
 
   padding: 1em 1.4em;
 
   border: solid 1px #bbb;
 
   text-align: left;
 
 }
 
-.seo_list .fw-bold {
 
+.seo-list .fw-bold {
 
   font-weight: 900;
 
 }
 
 
-.seo_list ul {
 
+.seo-list ul {
 
   margin-bottom: 32px;
 
 }
 
 
-.seo_list ul li {
 
+.seo-list ul li {
 
   margin-bottom: 0.8em;
 
 }
 
 
-.seo_list .LearnMore {
 
+.seo-list .learn-more {
 
   padding: 10px 20px;
 
   border: 1px solid #ea5413;
 
   border-radius: 30px;
 
@@ -2234,18 +2255,18 @@
 
   font-size: 18px;
 
 }
 
 
-.seo_list .LearnMore:hover {
 
+.seo-list .learn-more:hover {
 
   color: #ea5413;
 
   background: #fff;
 
 }
 
 
 @media screen and (max-width: 576px) {
 
-  .seo_list .LearnMore {
 
+  .seo-list .learn-more {
 
     margin-top: 15px;
 
   }
 
 }
 
 
-.seo_img {
 
+.seo-img {
 
   width: 90% !important;
 
 }
 
 
@@ -2274,15 +2295,15 @@
 
   font-weight: bold;
 
 }
 
 
-.aicustomerSec01 {
 
-  width: 90%;
 
+.aicustomer-sec01 {
 
+  width: 95%;
 
   margin: 100px auto;
 
 }
 
 
-.aicustomerSec01 img {
 
+.aicustomer-sec01 img {
 
   border-radius: 15px;
 
 }
 
-.aicustoerSec02-0 {
 
+.aicustomer-sec02-0 {
 
   width: 70%;
 
   margin: 30px auto;
 
   /* background-image: url(../img/aicustomer/aicustomerbg.png);
 
@@ -2290,15 +2311,15 @@
 
   background-size: contain; */
 
 }
 
 
-.aicustoerSec02-1 {
 
+.aicustomer-sec02-1 {
 
   justify-content: space-between;
 
 }
 
 
-.aicustoerSec02-1,
 
-p {
 
+.aicustomer-sec02-1,
 
+.aicustomer-sec02 p {
 
   margin-top: 30px;
 
 }
 
-.aicustoerSec02-title {
 
+.aicustomer-sec02-title {
 
   margin-left: 70px;
 
 }
 
 
@@ -2315,7 +2336,7 @@ p {
 
     object-fit: cover;
 
   }
 
 }
 
-.aicustoerSec02 {
 
+.aicustomer-sec02 {
 
   background-image: url(../img/aicustomer/aicustomerbg.png);
 
   background-repeat: no-repeat;
 
   background-size: contain;
 
@@ -2346,7 +2367,7 @@ p {
 
 }
 
 
 .aicustoerSec04,
 
-.aicustoerSec06 {
 
+.aicustomer-faq {
 
   width: 80%;
 
   margin: 50px auto;
 
 }
 
@@ -2461,26 +2482,27 @@ p {
 
   }
 
 }
 
 
-.aicustomerSec01_cta_arrow {
 
+.aicustomer-sec01-cta-arrow {
 
   margin-top: -30px;
 
 }
 
 
-.aicustoerSec06 .accordion {
 
+.aicustomer-faq .accordion {
 
   margin-top: 30px;
 
 }
 
 
-#aicustoerCta .sec-action .action-clip {
 
+#aicustomerCta .sec-action .action-clip {
 
   width: 100%;
 
   background-color: #ea5413;
 
   padding: 2rem 0;
 
   border-color: #ea5413;
 
 }
 
 
-#aicustoerCta .sec-action h2 {
 
+#aicustomerCta .sec-action h2 {
 
   font-size: 2rem;
 
+  line-height: 46px;
 
 }
 
 
-#aicustoerCta a {
 
+#aicustomerCta a {
 
   background-color: white;
 
   color: #ea5413;
 
   text-decoration: none;
 
@@ -2488,3 +2510,26 @@ p {
 
   font-weight: 600;
 
   padding: 20px 30px;
 
 }
 
+
 
+#form {
 
+  margin-top: 100px;
 
+  position: sticky;
 
+  top: 80px;
 
+}
 
+
 
+#form .news-form {
 
+  padding: 25px 50px;
 
+  margin-top: 0;
 
+}
 
+
 
+#form .title {
 
+  margin-bottom: 0;
 
+}
 
+
 
+#form .title h4 {
 
+  font-size: 28px;
 
+}
 
+
 
+#form .submit-btn {
 
+  margin-top: 20px;
 
+}

+ 10 - 8
static/css/style.css
View File 

@@ -7,6 +7,7 @@
 
   box-shadow: 0 2px 10px 2px rgb(204, 204, 204);
 
   background-color: white !important;
 
   width: 100%;
 
+  font-size: 16px;
 
 }
 
 
 .navbar .navbar-collapse {
 
@@ -333,7 +334,7 @@
 
   font-weight: 800;
 
 }
 
 
-.footer__btn__text {
 
+.footer-btn-text {
 
   font-size: 1.3rem;
 
   color: white;
 
 }
 
@@ -358,7 +359,7 @@
 
   background-color: #38a7bb;
 
 }
 
 
-.followus__txt {
 
+.followus-txt {
 
   display: inline-block;
 
   margin-right: 1rem;
 
   color: white;
 
@@ -489,7 +490,7 @@
 
   font-weight: 300;
 
 }
 
 
-.card__rank__word {
 
+.card__rank-word {
 
   color: #20616d;
 
   margin-left: 3rem;
 
   font-size: 1.8rem;
 
@@ -518,7 +519,7 @@
 
   padding: 0rem 4rem;
 
 }
 
 
-.top20 .card__rank__word {
 
+.top20 .card__rank-word {
 
   margin-left: 0;
 
 }
 
 
@@ -1566,7 +1567,7 @@
 
     top: -2.5rem;
 
     font-size: 4rem;
 
   }
 
-  .card__rank__word {
 
+  .card__rank-word {
 
     margin-left: 1.5rem;
 
     font-size: 1.2rem;
 
   }
 
@@ -1578,10 +1579,10 @@
 
     padding: 0;
 
   }
 
   .top20__num {
 
-    font-size: 2.1rem;
 
+    font-size: 2rem;
 
     width: 1.6rem;
 
   }
 
-  .container__footer {
 
+  .container-footer {
 
     width: 95vw;
 
   }
 
   .header__form {
 
@@ -5140,6 +5141,7 @@
 
   border-radius: 5px;
 
   text-decoration: none;
 
   transition: all 0.3s;
 
+  font-size: 16px;
 
 }
 
 .submit-btn:hover {
 
   opacity: 0.8;
 
@@ -5207,7 +5209,7 @@
 
 }
 
 
 .solution-accordion h2 {
 
-  margin: 0;
 
+  margin: 0 !important;
 
 }
 
 .solution-accordion h2 button {
 
   font-weight: bold;

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


+ 49 - 20
static/css/style.default.css
View File 

@@ -303,7 +303,7 @@ ul.list-style-none {
 
 #top.light .login a {
 
   color: #555555;
 
 }
 
-.navbar {
 
+/* .navbar {
 
   border: none;
 
 }
 
 .navbar ul.nav > li > a {
 
@@ -313,7 +313,6 @@ ul.list-style-none {
 
   letter-spacing: 0.08em;
 
   border-top: solid 5px transparent;
 
 }
 
-
 
 .navbar ul.nav > li.open > a {
 
   text-decoration: none !important;
 
   border-top: solid 5px #20616d;
 
@@ -491,7 +490,7 @@ ul.list-style-none {
 
   .navbar-affixed-top.affix + section {
 
     margin-top: 0;
 
   }
 
-}
 
+} */
 
 #login-modal {
 
   overflow: hidden;
 
 }
 
@@ -906,6 +905,12 @@ fieldset[disabled] .btn-template-primary.active {
 
 .panel.sidebar-menu .panel-body {
 
   padding: 0;
 
 }
 
+.panel.sidebar-menu .panel-body ul {
 
+  flex-direction: column;
 
+}
 
+.panel.sidebar-menu .panel-body a {
 
+  display: block;
 
+}
 
 .panel.sidebar-menu .panel-body span.colour {
 
   display: inline-block;
 
   width: 15px;
 
@@ -978,7 +983,8 @@ fieldset[disabled] .btn-template-primary.active {
 
 }
 
 .panel.sidebar-menu ul.tag-cloud li a {
 
   display: inline-block;
 
-  padding: 5px;
 
+  /* padding: 5px; */
 
+  padding: 5px 10px 3px 5px;
 
   border: solid 1px #eeeeee;
 
   border-radius: 0;
 
   color: #ea5413;
 
@@ -1749,25 +1755,26 @@ fieldset[disabled] .btn-template-primary.active {
 
   position: relative;
 
 }
 
 
-#heading-breadcrumbs .breadcrumbs_title {
 
+#heading-breadcrumbs .breadcrumbs-title {
 
   position: relative;
 
 }
 
 
-#heading-breadcrumbs .breadcrumbs_title::after {
 
+#heading-breadcrumbs .breadcrumbs-title::after {
 
   position: absolute;
 
   width: 6rem;
 
-  height: 0.5rem;
 
-  top: 145%;
 
-  left: 47.5%;
 
+  height: 0.3rem;
 
+  bottom: -20px;
 
+  left: 50%;
 
+  transform: translate(-50%, 0%);
 
   content: "";
 
   background-color: #ea5413;
 
 }
 
 
-#heading-breadcrumbs .blog_social {
 
+#heading-breadcrumbs .blog-social {
 
   display: flex;
 
   align-items: center;
 
 }
 
-#heading-breadcrumbs .blog_social a {
 
+#heading-breadcrumbs .blog-social a {
 
   margin-right: 1rem;
 
 }
 
 
@@ -2208,7 +2215,8 @@ fieldset[disabled] .btn-template-primary.active {
 
 }
 
 #blog-listing-medium .post .image {
 
   margin-bottom: 10px;
 
-  overflow: hidden;
 
+  position: relative;
 
+  /* overflow: hidden; */
 
 }
 
 #blog-listing-medium .post .image img {
 
   -webkit-transition: all 0.2s ease-out;
 
@@ -2218,6 +2226,7 @@ fieldset[disabled] .btn-template-primary.active {
 
   width: 100%;
 
   object-fit: cover;
 
   position: relative;
 
+  z-index: 100;
 
 }
 
 @media (max-width: 991px) {
 
   #blog-listing-medium .post .image img {
 
@@ -2232,11 +2241,11 @@ fieldset[disabled] .btn-template-primary.active {
 
 #blog-listing-medium .post .image::after {
 
   position: absolute;
 
   content: " ";
 
-  right: 4rem;
 
-  bottom: 4rem;
 
+  right: 3.5rem;
 
+  bottom: 2.5rem;
 
   width: 90%;
 
-  height: 91%;
 
-  z-index: -1;
 
+  height: 90%;
 
+  z-index: 10;
 
 }
 
 #blog-listing-medium .post .image img {
 
   border: 5px solid white;
 
@@ -2922,7 +2931,7 @@ fieldset[disabled] .btn-template-primary.active {
 
   border-top: none;
 
 }
 
 /* navbar */
 
-.navbar {
 
+/* .navbar {
 
   position: relative;
 
   min-height: 62px;
 
   margin-bottom: 0;
 
@@ -3271,7 +3280,7 @@ fieldset[disabled] .navbar-default .btn-link:hover,
 
 .navbar-default .btn-link[disabled]:focus,
 
 fieldset[disabled] .navbar-default .btn-link:focus {
 
   color: #cccccc;
 
-}
 
+} */
 
 /* scaffolding */
 
 body {
 
   font-family: "Roboto", Helvetica, Arial, sans-serif;
 
@@ -3384,16 +3393,23 @@ label {
 
 }
 
 /* pager*/
 
 .pager {
 
+  display: flex;
 
+  justify-content: space-between;
 
   margin: 20px 0;
 
-  border-top: solid 1px #eeeeee;
 
+  padding-left: 0;
 
   padding-top: 20px;
 
+  border-top: solid 1px #eeeeee;
 
   text-transform: uppercase;
 
-  letter-spacing: 0.08em;
 
+  letter-spacing: 1px;
 
   font-family: "Roboto", Helvetica, Arial, sans-serif;
 
 }
 
 .pager li {
 
   display: inline;
 
 }
 
+.pager li a {
 
+  display: block;
 
+  padding: 5px 15px;
 
+}
 
 .pager li > a,
 
 .pager li > span {
 
   background-color: #ffffff;
 
@@ -3634,6 +3650,9 @@ address {
 
   color: #fff;
 
   text-decoration: none;
 
 }
 
+.panel-heading .panel-title {
 
+  font-size: 16px;
 
+}
 
 a.badge:hover,
 
 a.badge:focus {
 
   color: #ffffff;
 
@@ -3712,3 +3731,13 @@ a.list-group-item.active > .badge,
 
   left: 15px;
 
   right: 15px;
 
 }
 
+.vt-content .card-title {
 
+  font-size: 20px;
 
+  /* 超過則省略 */
 
+  overflow: hidden;
 
+  text-overflow: ellipsis;
 
+  display: -webkit-box;
 
+  -webkit-line-clamp: 1;
 
+  -webkit-box-orient: vertical;
 
+  line-break: after-white-space;
 
+}

+ 10 - 8
static/css/style.scss
View File 

@@ -6,6 +6,7 @@
 
   box-shadow: 0 2px 10px 2px rgb(204, 204, 204);
 
   background-color: white !important;
 
   width: 100%;
 
+  font-size: 16px;
 
 }
 
 
 .navbar .navbar-collapse {
 
@@ -363,7 +364,7 @@
 
   font-weight: 800;
 
 }
 
 
-.footer__btn__text {
 
+.footer-btn-text {
 
   font-size: 1.3rem;
 
   color: white;
 
 }
 
@@ -388,7 +389,7 @@
 
   background-color: #38a7bb;
 
 }
 
 
-.followus__txt {
 
+.followus-txt {
 
   display: inline-block;
 
   margin-right: 1rem;
 
   color: white;
 
@@ -525,7 +526,7 @@
 
   font-weight: 300;
 
 }
 
 
-.card__rank__word {
 
+.card__rank-word {
 
   color: #20616d;
 
   margin-left: 3rem;
 
   font-size: 1.8rem;
 
@@ -554,7 +555,7 @@
 
   padding: 0rem 4rem;
 
 }
 
 
-.top20 .card__rank__word {
 
+.top20 .card__rank-word {
 
   margin-left: 0;
 
 }
 
 
@@ -1760,7 +1761,7 @@
 
     font-size: 4rem;
 
   }
 
 
-  .card__rank__word {
 
+  .card__rank-word {
 
     margin-left: 1.5rem;
 
     font-size: 1.2rem;
 
   }
 
@@ -1775,11 +1776,11 @@
 
   }
 
 
   .top20__num {
 
-    font-size: 2.1rem;
 
+    font-size: 2rem;
 
     width: 1.6rem;
 
   }
 
 
-  .container__footer {
 
+  .container-footer {
 
     width: 95vw;
 
   }
 
 
@@ -5652,6 +5653,7 @@
 
   border-radius: 5px;
 
   text-decoration: none;
 
   transition: all 0.3s;
 
+  font-size: 16px;
 
 
   &:hover {
 
     opacity: 0.8;
 
@@ -5730,7 +5732,7 @@
 
 
 .solution-accordion {
 
   h2 {
 
-    margin: 0;
 
+    margin: 0 !important;
 
 
     button {
 
       font-weight: bold;

+ 1 - 1
static/css/style.web3.css
View File 

@@ -2,7 +2,7 @@
 
   font-size: 1.2rem;
 
 }
 
 
-#heading-breadcrumbs .breadcrumbs_title::after {
 
+#heading-breadcrumbs .breadcrumbs-title::after {
 
   left: 50%;
 
   transform: translateX(-50%);
 
 }

+ 1 - 1
webSite/content/tags/vtuber-list/_index.md
View File 

@@ -3,4 +3,4 @@ title = "Vtuber List"
 
 date = "2021-07-23T12:27:12+08:00"
 
 +++
 
 
-{{< vtuberlist >}}
 
+<!-- {{< vtuberlist >}} -->

+ 1 - 1
webSite/var/www/html/collaboration/index.html
View File 

@@ -190,7 +190,7 @@
 
       <div class="container">
 
         <div class="row">
 
           <div class="col-md-12">
 
-            <h1 class="breadcrumbs_title">Aboutuses</h1>
 
+            <h1 class="breadcrumbs-title">Aboutuses</h1>
 
           </div>
 
         </div>
 
       </div>

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