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

add youtube-views page

SyuanYu 2 years ago
parent
46cd8dfcf1
commit
98472d617c
48 changed files with 3013 additions and 1170 deletions
Unified View Show Diff Stats
  1. 3 10
      layouts/ad-operation/single.html
  2. 4 59
      layouts/ai-anchor/single.html
  3. 1 55
      layouts/bigdata/single.html
  4. 1 55
      layouts/blog-traffic/single.html
  5. 1 55
      layouts/crawler/single.html
  6. 56 0
      layouts/partials/navbar.html
  7. 1 55
      layouts/research/single.html
  8. 318 0
      layouts/seo-image/single.html
  9. 1 55
      layouts/seo/single.html
  10. 1 55
      layouts/video-making/single.html
  11. 560 0
      layouts/youtube-views/single.html
  12. 8 75
      static/css/contact/styles-contact.css
  13. 0 2
      static/css/contact/styles-contact.css.map
  14. 1 1
      static/css/custom.css
  15. 768 693
      static/css/style.css
  16. 0 0
      static/css/style.css.map
  17. 1199 0
      static/css/style.scss
  18. BIN
      static/imgs/bottom-line.png
  19. BIN
      static/imgs/dm/banner-01.webp
  20. BIN
      static/imgs/dm/bg-01.webp
  21. BIN
      static/imgs/dm/bg-02.webp
  22. BIN
      static/imgs/dm/seo-image.jpg
  23. BIN
      static/imgs/dm/youtube-01.png
  24. BIN
      static/imgs/dm/youtube-02.png
  25. BIN
      static/imgs/dm/youtube-03.png
  26. BIN
      static/imgs/icon/analytics.png
  27. BIN
      static/imgs/icon/check-01.png
  28. BIN
      static/imgs/icon/check.png
  29. BIN
      static/imgs/icon/checked.png
  30. BIN
      static/imgs/icon/checkout.png
  31. BIN
      static/imgs/icon/correct.png
  32. BIN
      static/imgs/icon/credit-card.png
  33. BIN
      static/imgs/icon/crown.png
  34. BIN
      static/imgs/icon/customer-support.png
  35. BIN
      static/imgs/icon/dollar.png
  36. BIN
      static/imgs/icon/exclamation.png
  37. BIN
      static/imgs/icon/growth.png
  38. BIN
      static/imgs/icon/ok.png
  39. BIN
      static/imgs/icon/on-time.png
  40. BIN
      static/imgs/icon/padlock.png
  41. BIN
      static/imgs/icon/play-button.png
  42. BIN
      static/imgs/icon/refund.png
  43. BIN
      static/imgs/icon/search.png
  44. BIN
      static/imgs/icon/user.png
  45. BIN
      static/imgs/icon/video-camera.png
  46. 14 0
      webSite/config.toml
  47. 34 0
      webSite/content/seo-image/dm.md
  48. 42 0
      webSite/content/youtube-views/dm.md

+ 3 - 10
layouts/ad-operation/single.html
View File 

@@ -327,7 +327,8 @@
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
-  <nav class="navbar navbar-expand-lg navbar-light fixed-top">
 
+  {{ partial "navbar.html" . }}
 
+  <!-- <nav class="navbar navbar-expand-lg navbar-light fixed-top">
 
     <div class="container-fluid">
 
     <div class="container-fluid">
 
       <a class="navbar-brand" href="/">
 
       <a class="navbar-brand" href="/">
 
         <img src="https://ai.choozmo.com/img/Choozmo%20cloud%20logo.png" alt="" width="180" height="48"
 
         <img src="https://ai.choozmo.com/img/Choozmo%20cloud%20logo.png" alt="" width="180" height="48"
 
@@ -364,14 +365,6 @@
 
           <li class="nav-item">
 
           <li class="nav-item">
 
             <a class="nav-link" href="/collaboration/info/">合作夥伴</a>
 
             <a class="nav-link" href="/collaboration/info/">合作夥伴</a>
 
           </li>
 
           </li>
 
-          <!-- <li class="nav-item dropdown">
 
-            <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 
-              合作夥伴
 
-            </a>
 
-            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
-              <li><a class="dropdown-item" href="/collaboration/river-cam/">康河智庫管理顧問有限公司</a></li>
 
-            </ul>
 
-          </li> -->
 
           <li class="nav-item">
 
           <li class="nav-item">
 
             <a class="nav-link" href="/contact/service">聯絡我們</a>
 
             <a class="nav-link" href="/contact/service">聯絡我們</a>
 
           </li>
 
           </li>
 
@@ -381,7 +374,7 @@
 
         </ul>
 
         </ul>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
-  </nav>
 
+  </nav> -->
 
   <main id="ad-operation">
 
   <main id="ad-operation">
 
     <section class="header">
 
     <section class="header">
 
       <div class="row align-items-center justify-content-center g-0">
 
       <div class="row align-items-center justify-content-center g-0">

+ 4 - 59
layouts/ai-anchor/single.html
View File 

@@ -77,13 +77,13 @@
 
     .ai-anchor .header {

     .ai-anchor .header {

       padding-left: 6vw;

       padding-left: 6vw;

       width: 80%;

       width: 80%;

-      margin: 0 auto;

+      margin: 65px auto 0;

     }

     }

 

 

     @media (max-width: 767px) {

     @media (max-width: 767px) {

       .ai-anchor .header {

       .ai-anchor .header {

         width: 90%;

         width: 90%;

-        margin-top: 100px;

+        /* margin-top: 100px; */

       }

       }

     }

     }

 

 

@@ -248,67 +248,12 @@
 
 </head>

 </head>

 

 

 <body>

 <body>

-  <nav class="navbar navbar-expand-lg navbar-light fixed-top">

-    <div class="container-fluid">

-      <a class="navbar-brand" href="/">

-        <img src="https://ai.choozmo.com/img/Choozmo%20cloud%20logo.png" alt="" width="180" height="48"

-          class="d-inline-block align-text-top">

-      </a>

-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"

-        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

-        <span class="navbar-toggler-icon"></span>

-      </button>

-      <div class="collapse navbar-collapse ms-auto" id="navbarNav">

-        <ul class="navbar-nav">

-          <li class="nav-item">

-            <a class="nav-link active" aria-current="page" href="/">Home</a>

-          </li>

-          <li class="nav-item dropdown">

-            <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown"

-              aria-expanded="false">

-              服務

-            </a>

-            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

-              <li><a class="dropdown-item" href="/ad-operation/dm/">廣告代操</a></li>

-              <li><a class="dropdown-item" href="/bigdata/dm/">大數據分析</a></li>

-              <li><a class="dropdown-item" href="/crawler/dm/">資訊爬蟲</a></li>

-              <li><a class="dropdown-item" href="/research/dm/">企業系統研發委外</a></li>

-              <li><a class="dropdown-item" href="/seo/dm/">SEO 搜尋排名優化</a></li>

-              <li><a class="dropdown-item" href="/video-making/dm/">影片製作服務</a></li>

-              <li><a class="dropdown-item" href="/ai-anchor/dm/">新聞 AI 主播媒體聯播網</a></li>

-              <li><a class="dropdown-item" href="/blog-traffic/dm/">創業家專案</a></li>

-            </ul>

-          </li>

-          <li class="nav-item">

-            <a class="nav-link" href="/tags/vtuber/">部落格</a>

-          </li>

-          <li class="nav-item">

-            <a class="nav-link" href="/collaboration/info/">合作夥伴</a>

-          </li>

-          <!-- <li class="nav-item dropdown">

-            <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">

-              合作夥伴

-            </a>

-            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

-              <li><a class="dropdown-item" href="/collaboration/river-cam/">康河智庫管理顧問有限公司</a></li>

-            </ul>

-          </li> -->

-          <li class="nav-item">

-            <a class="nav-link" href="/contact/service/">聯絡我們</a>

-          </li>

-          <li class="nav-item">

-            <a class="nav-link" href="/aboutus/info/">關於我們</a>

-          </li>

-        </ul>

-      </div>

-    </div>

-  </nav>

-

+  {{ partial "navbar.html" . }}

   <main class="ai-anchor">

   <main class="ai-anchor">

     <section class="header">

     <section class="header">

       <img src="/imgs/01.webp" alt="" class="header__lefttop">

       <img src="/imgs/01.webp" alt="" class="header__lefttop">

       <div class="row align-items-center g-0">

       <div class="row align-items-center g-0">

-        <div class="col-12 col-lg-5 text-center">

+        <div class="col-12 col-lg-5 text-center pt-5 pt-lg-0">

           <h2 class="header__anchor_title text-start">集仕多 ChoozMo 新聞 AI 主播<br>媒體聯播網最佳方案</h2>

           <h2 class="header__anchor_title text-start">集仕多 ChoozMo 新聞 AI 主播<br>媒體聯播網最佳方案</h2>

 

 

           <p class="header-sub">圖文+影音+聯播<br>全方位媒體曝光，一次到位！</p>

           <p class="header-sub">圖文+影音+聯播<br>全方位媒體曝光，一次到位！</p>

+ 1 - 55
layouts/bigdata/single.html
View File 

@@ -66,61 +66,7 @@
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
-  <nav class="navbar navbar-expand-lg navbar-light fixed-top">
 
-    <div class="container-fluid">
 
-      <a class="navbar-brand" href="/">
 
-        <img src="https://ai.choozmo.com/img/Choozmo%20cloud%20logo.png" alt="" width="180" height="48"
 
-          class="d-inline-block align-text-top">
 
-      </a>
 
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
 
-        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 
-        <span class="navbar-toggler-icon"></span>
 
-      </button>
 
-      <div class="collapse navbar-collapse ms-auto" id="navbarNav">
 
-        <ul class="navbar-nav">
 
-          <li class="nav-item">
 
-            <a class="nav-link active" aria-current="page" href="/">Home</a>
 
-          </li>
 
-          <li class="nav-item dropdown">
 
-            <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
 
-              aria-expanded="false">
 
-              服務
 
-            </a>
 
-            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
-              <li><a class="dropdown-item" href="/ad-operation/dm/">廣告代操</a></li>
 
-              <li><a class="dropdown-item" href="/bigdata/dm/">大數據分析</a></li>
 
-              <li><a class="dropdown-item" href="/crawler/dm/">資訊爬蟲</a></li>
 
-              <li><a class="dropdown-item" href="/research/dm/">企業系統研發委外</a></li>
 
-              <li><a class="dropdown-item" href="/seo/dm/">SEO 搜尋排名優化</a></li>
 
-              <li><a class="dropdown-item" href="/video-making/dm/">影片製作服務</a></li>
 
-              <li><a class="dropdown-item" href="/ai-anchor/dm/">新聞 AI 主播媒體聯播網</a></li>
 
-              <li><a class="dropdown-item" href="/blog-traffic/dm/">創業家專案</a></li>
 
-            </ul>
 
-          </li>
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/tags/vtuber/">部落格</a>
 
-          </li>
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/collaboration/info/">合作夥伴</a>
 
-          </li>
 
-          <!-- <li class="nav-item dropdown">
 
-            <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 
-              合作夥伴
 
-            </a>
 
-            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
-              <li><a class="dropdown-item" href="/collaboration/river-cam/">康河智庫管理顧問有限公司</a></li>
 
-            </ul>
 
-          </li> -->
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/contact/service/">聯絡我們</a>
 
-          </li>
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/aboutus/info/">關於我們</a>
 
-          </li>
 
-        </ul>
 
-      </div>
 
-    </div>
 
-  </nav>
 
+  {{ partial "navbar.html" . }}
 
   <main>
 
   <main>
 
     <section class="header">
 
     <section class="header">
 
       <img src="/imgs/01.webp" alt="" class="header__lefttop">
 
       <img src="/imgs/01.webp" alt="" class="header__lefttop">

+ 1 - 55
layouts/blog-traffic/single.html
View File 

@@ -66,61 +66,7 @@
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
-  <nav class="navbar navbar-expand-lg navbar-light fixed-top">
 
-    <div class="container-fluid">
 
-      <a class="navbar-brand" href="/">
 
-        <img src="https://ai.choozmo.com/img/Choozmo%20cloud%20logo.png" alt="" width="180" height="48"
 
-          class="d-inline-block align-text-top">
 
-      </a>
 
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
 
-        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 
-        <span class="navbar-toggler-icon"></span>
 
-      </button>
 
-      <div class="collapse navbar-collapse ms-auto" id="navbarNav">
 
-        <ul class="navbar-nav">
 
-          <li class="nav-item">
 
-            <a class="nav-link active" aria-current="page" href="/">Home</a>
 
-          </li>
 
-          <li class="nav-item dropdown">
 
-            <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
 
-              aria-expanded="false">
 
-              服務
 
-            </a>
 
-            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
-              <li><a class="dropdown-item" href="/ad-operation/dm/">廣告代操</a></li>
 
-              <li><a class="dropdown-item" href="/bigdata/dm/">大數據分析</a></li>
 
-              <li><a class="dropdown-item" href="/crawler/dm/">資訊爬蟲</a></li>
 
-              <li><a class="dropdown-item" href="/research/dm/">企業系統研發委外</a></li>
 
-              <li><a class="dropdown-item" href="/seo/dm/">SEO 搜尋排名優化</a></li>
 
-              <li><a class="dropdown-item" href="/video-making/dm/">影片製作服務</a></li>
 
-              <li><a class="dropdown-item" href="/ai-anchor/dm/">新聞 AI 主播媒體聯播網</a></li>
 
-              <li><a class="dropdown-item" href="/blog-traffic/dm/">創業家專案</a></li>
 
-            </ul>
 
-          </li>
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/tags/vtuber/">部落格</a>
 
-          </li>
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/collaboration/info/">合作夥伴</a>
 
-          </li>
 
-          <!-- <li class="nav-item dropdown">
 
-            <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 
-              合作夥伴
 
-            </a>
 
-            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
-              <li><a class="dropdown-item" href="/collaboration/river-cam/">康河智庫管理顧問有限公司</a></li>
 
-            </ul>
 
-          </li> -->
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/contact/service/">聯絡我們</a>
 
-          </li>
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/aboutus/info/">關於我們</a>
 
-          </li>
 
-        </ul>
 
-      </div>
 
-    </div>
 
-  </nav>
 
+  {{ partial "navbar.html" . }}
 
   <main class="blog-traffic" style="overflow: hidden;">
 
   <main class="blog-traffic" style="overflow: hidden;">
 
     <section class="header" style="padding-top: 1.5rem;">
 
     <section class="header" style="padding-top: 1.5rem;">
 
       <img src="/imgs/dm/blog-traffic_00.jpg" alt="" class="header__lefttop">
 
       <img src="/imgs/dm/blog-traffic_00.jpg" alt="" class="header__lefttop">

+ 1 - 55
layouts/crawler/single.html
View File 

@@ -66,61 +66,7 @@
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
-  <nav class="navbar navbar-expand-lg navbar-light fixed-top">
 
-    <div class="container-fluid">
 
-      <a class="navbar-brand" href="/">
 
-        <img src="https://ai.choozmo.com/img/Choozmo%20cloud%20logo.png" alt="" width="180" height="48"
 
-          class="d-inline-block align-text-top">
 
-      </a>
 
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
 
-        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 
-        <span class="navbar-toggler-icon"></span>
 
-      </button>
 
-      <div class="collapse navbar-collapse ms-auto" id="navbarNav">
 
-        <ul class="navbar-nav">
 
-          <li class="nav-item">
 
-            <a class="nav-link active" aria-current="page" href="/">Home</a>
 
-          </li>
 
-          <li class="nav-item dropdown">
 
-            <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
 
-              aria-expanded="false">
 
-              服務
 
-            </a>
 
-            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
-              <li><a class="dropdown-item" href="/ad-operation/dm/">廣告代操</a></li>
 
-              <li><a class="dropdown-item" href="/bigdata/dm/">大數據分析</a></li>
 
-              <li><a class="dropdown-item" href="/crawler/dm/">資訊爬蟲</a></li>
 
-              <li><a class="dropdown-item" href="/research/dm/">企業系統研發委外</a></li>
 
-              <li><a class="dropdown-item" href="/seo/dm/">SEO 搜尋排名優化</a></li>
 
-              <li><a class="dropdown-item" href="/video-making/dm/">影片製作服務</a></li>
 
-              <li><a class="dropdown-item" href="/ai-anchor/dm/">新聞 AI 主播媒體聯播網</a></li>
 
-              <li><a class="dropdown-item" href="/blog-traffic/dm/">創業家專案</a></li>
 
-            </ul>
 
-          </li>
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/tags/vtuber/">部落格</a>
 
-          </li>
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/collaboration/info/">合作夥伴</a>
 
-          </li>
 
-          <!-- <li class="nav-item dropdown">
 
-            <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 
-              合作夥伴
 
-            </a>
 
-            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
-              <li><a class="dropdown-item" href="/collaboration/river-cam/">康河智庫管理顧問有限公司</a></li>
 
-            </ul>
 
-          </li> -->
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/contact/service/">聯絡我們</a>
 
-          </li>
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/aboutus/info/">關於我們</a>
 
-          </li>
 
-        </ul>
 
-      </div>
 
-    </div>
 
-  </nav>
 
+  {{ partial "navbar.html" . }}
 
   <main>
 
   <main>
 
     <section class="header">
 
     <section class="header">
 
       <img src="/imgs/01.webp" alt="" class="header__lefttop">
 
       <img src="/imgs/01.webp" alt="" class="header__lefttop">

+ 56 - 0
layouts/partials/navbar.html
View File 

@@ -0,0 +1,56 @@
 
+<nav class="navbar navbar-expand-lg navbar-light fixed-top">
 
+  <div class="container-fluid">
 
+    <a class="navbar-brand" href="/">
 
+      <img src="https://ai.choozmo.com/img/Choozmo%20cloud%20logo.png" alt="" width="180" height="48"
 
+        class="d-inline-block align-text-top">
 
+    </a>
 
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
 
+      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 
+      <span class="navbar-toggler-icon"></span>
 
+    </button>
 
+    <div class="collapse navbar-collapse ms-auto" id="navbarNav">
 
+      <ul class="navbar-nav">
 
+        <li class="nav-item">
 
+          <a class="nav-link active" aria-current="page" href="/">Home</a>
 
+        </li>
 
+        <li class="nav-item dropdown">
 
+          <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
 
+            aria-expanded="false">
 
+            服務
 
+          </a>
 
+          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
+            <li><a class="dropdown-item" href="/ad-operation/dm/">廣告代操</a></li>
 
+            <li><a class="dropdown-item" href="/bigdata/dm/">大數據分析</a></li>
 
+            <li><a class="dropdown-item" href="/crawler/dm/">資訊爬蟲</a></li>
 
+            <li><a class="dropdown-item" href="/research/dm/">企業系統研發委外</a></li>
 
+            <li><a class="dropdown-item" href="/seo/dm/">SEO 搜尋排名優化</a></li>
 
+            <li><a class="dropdown-item" href="/video-making/dm/">影片製作服務</a></li>
 
+            <li><a class="dropdown-item" href="/ai-anchor/dm/">新聞 AI 主播媒體聯播網</a></li>
 
+            <li><a class="dropdown-item" href="/blog-traffic/dm/">創業家專案</a></li>
 
+            <li><a class="dropdown-item" href="/youtube-views/dm/">YouTube 影片觀看方案</a></li>
 
+          </ul>
 
+        </li>
 
+        <li class="nav-item">
 
+          <a class="nav-link" href="/tags/vtuber/">部落格</a>
 
+        </li>
 
+        <li class="nav-item">
 
+          <a class="nav-link" href="/collaboration/info/">合作夥伴</a>
 
+        </li>
 
+        <!-- <li class="nav-item dropdown">
 
+            <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 
+              合作夥伴
 
+            </a>
 
+            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
+              <li><a class="dropdown-item" href="/collaboration/river-cam/">康河智庫管理顧問有限公司</a></li>
 
+            </ul>
 
+          </li> -->
 
+        <li class="nav-item">
 
+          <a class="nav-link" href="/contact/service">聯絡我們</a>
 
+        </li>
 
+        <li class="nav-item">
 
+          <a class="nav-link" href="/aboutus/info/">關於我們</a>
 
+        </li>
 
+      </ul>
 
+    </div>
 
+  </div>
 
+</nav>

+ 1 - 55
layouts/research/single.html
View File 

@@ -66,61 +66,7 @@
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
-  <nav class="navbar navbar-expand-lg navbar-light fixed-top">
 
-    <div class="container-fluid">
 
-      <a class="navbar-brand" href="/">
 
-        <img src="https://ai.choozmo.com/img/Choozmo%20cloud%20logo.png" alt="" width="180" height="48"
 
-          class="d-inline-block align-text-top">
 
-      </a>
 
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
 
-        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 
-        <span class="navbar-toggler-icon"></span>
 
-      </button>
 
-      <div class="collapse navbar-collapse ms-auto" id="navbarNav">
 
-        <ul class="navbar-nav">
 
-          <li class="nav-item">
 
-            <a class="nav-link active" aria-current="page" href="/">Home</a>
 
-          </li>
 
-          <li class="nav-item dropdown">
 
-            <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
 
-              aria-expanded="false">
 
-              服務
 
-            </a>
 
-            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
-              <li><a class="dropdown-item" href="/ad-operation/dm/">廣告代操</a></li>
 
-              <li><a class="dropdown-item" href="/bigdata/dm/">大數據分析</a></li>
 
-              <li><a class="dropdown-item" href="/crawler/dm/">資訊爬蟲</a></li>
 
-              <li><a class="dropdown-item" href="/research/dm/">企業系統研發委外</a></li>
 
-              <li><a class="dropdown-item" href="/seo/dm/">SEO 搜尋排名優化</a></li>
 
-              <li><a class="dropdown-item" href="/video-making/dm/">影片製作服務</a></li>
 
-              <li><a class="dropdown-item" href="/ai-anchor/dm/">新聞 AI 主播媒體聯播網</a></li>
 
-              <li><a class="dropdown-item" href="/blog-traffic/dm/">創業家專案</a></li>
 
-            </ul>
 
-          </li>
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/tags/vtuber/">部落格</a>
 
-          </li>
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/collaboration/info/">合作夥伴</a>
 
-          </li>
 
-          <!-- <li class="nav-item dropdown">
 
-            <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 
-              合作夥伴
 
-            </a>
 
-            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
-              <li><a class="dropdown-item" href="/collaboration/river-cam/">康河智庫管理顧問有限公司</a></li>
 
-            </ul>
 
-          </li> -->
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/contact/service/">聯絡我們</a>
 
-          </li>
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/aboutus/info/">關於我們</a>
 
-          </li>
 
-        </ul>
 
-      </div>
 
-    </div>
 
-  </nav>
 
+  {{ partial "navbar.html" . }}
 
   <main>
 
   <main>
 
     <section class="header">
 
     <section class="header">
 
       <img src="/imgs/01.webp" alt="" class="header__lefttop">
 
       <img src="/imgs/01.webp" alt="" class="header__lefttop">

+ 318 - 0
layouts/seo-image/single.html
View File 

@@ -0,0 +1,318 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1">
 
+  <meta http-equiv="Cache-Control" content="no-cache">
 
+  <title>Choozmo Marketing Cloud</title>
 
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
 
+    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
+  <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.11.2/css/all.css">
 
+  <link rel="stylesheet" href="/css/style.css">
 
+  <!-- Start of HubSpot Embed Code -->
 
+  <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script>
 
+  <!-- End of HubSpot Embed Code -->
 
+  <style>
 
+    .header {
 
+      margin-top: 50px;
 
+    }
 
+
 
+    .footer {
 
+      color: #656565;
 
+    }
 
+
 
+    .footer a {
 
+      color: #656565;
 
+      text-decoration: none;
 
+    }
 
+
 
+    .footer h5 {
 
+      color: black;
 
+      font-weight: 600;
 
+      padding-bottom: 15px;
 
+    }
 
+
 
+    .footer .link {
 
+      padding-bottom: 20px;
 
+    }
 
+
 
+    .footer {
 
+      background-color: #F0F0F0;
 
+      padding: 3rem;
 
+    }
 
+
 
+    .footer .right-column {
 
+      border-left: 1px solid black;
 
+    }
 
+
 
+    .footer .footer-aigirl {
 
+      font-weight: 600;
 
+      font-size: 2rem;
 
+      margin-top: 1rem;
 
+      margin-bottom: 1rem;
 
+    }
 
+
 
+    .footer .footer-follow {
 
+      font-size: 1.6rem;
 
+      margin-bottom: 1rem;
 
+      color: black;
 
+      font-size: 1rem;
 
+      font-weight: 600;
 
+      margin-top: 2rem;
 
+    }
 
+
 
+    .footer .footer-socials a {
 
+      margin-right: 5px;
 
+    }
 
+
 
+    .dm__description h5 {
 
+      line-height: 32px;
 
+    }
 
+
 
+    .header__right__bubble {
 
+      top: -30px;
 
+      left: -30px;
 
+    }
 
+
 
+    .seo-image .img-block__img {
 
+    width: 12%;
 
+    object-fit: contain;
 
+    image-rendering: -webkit-optimize-contrast;
 
+    position: relative;
 
+    top: -30px;
 
+}
 
+
 
+@media (max-width: 1200px) {
 
+    .seo-image .img-block__img {
 
+        top: -10px;
 
+    }
 
+    .seo-image .img-first {
 
+        top: 0;
 
+    }
 
+}
 
+
 
+@media (max-width: 991px) {
 
+    .seo-image .img-block__img {
 
+        width: 15%;
 
+    }
 
+}
 
+
 
+@media (max-width: 767px) {
 
+    .seo-image .img-block__img {
 
+        width: 20%;
 
+        top: 5px;
 
+    }
 
+    .seo-image .img-first {
 
+        top: 15px;
 
+    }
 
+}
 
+
 
+@media (max-width: 490px) {
 
+    .seo-image .img-block__img {
 
+        top: 15px;
 
+    }
 
+    .seo-image .img-first {
 
+        top: 40px;
 
+    }
 
+}
 
+
 
+@media (max-width: 414px) {
 
+    .seo-image .img-block__img {
 
+        top: 22px;
 
+    }
 
+}
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  {{ partial "navbar.html" . }}
 
+  <main class="seo-image">
 
+    形象 SEO
 
+    <section class="header">
 
+      <img src="/imgs/01.webp" alt="" class="header__lefttop">
 
+      <div class="row align-items-center g-0">
 
+        <div class="col-12 col-md-5 text-center ">
 
+          <h2 class="header__title">{{ .Params.packageTitle }}</h2>
 
+          <p class="text-center px-3">{{ .Params.packageSub }}
 
+          <p>
 
+            <button class="btns-dark" onclick="window.location.href=`/contact/service/`">立即諮詢</button>
 
+        </div>
 
+        <div class="col-12 col-md-7">
 
+          <div class="header__right header__dm" style="background-image: url('/imgs/dm/seo-image.jpg');">
 
+            <img src="/imgs/02.webp" alt="" class="header__right__cir">
 
+            <!-- <img src="imgs/影片.webp" alt="" class="header__right__video"> -->
 
+            <img class="header__right__bubble" src="/imgs/對話.webp" alt="">
 
+            <img class="header__right__linecir" src="/imgs/裝飾圓.webp" alt="">
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </section>
 
+    <section class="category container text-center py-5 dm__description">
 
+      <h2 class="category__sub_h2 mb-5"></h2>
 
+      <h5>{{ .Params.description }}</h5>
 
+    </section>
 
+
 
+    <section class="category container img-block pt-4">
 
+      <div class="d-flex align-items-start">
 
+        <img class="img-block__img img-first" src="{{ .Params.block1_img }}" alt="">
 
+        <div class="mt-4 pt-3 pt-md-0">
 
+          <h4>{{ .Params.block1_title }}</h4>
 
+          <p class="sub-title">{{ .Params.block1_sub }}</p>
 
+          <!-- <strong>{{ .Params.block1_strong }}</strong> -->
 
+          <p>{{ .Params.block1_text | markdownify }}</p>
 
+        </div>
 
+      </div>
 
+    </section>
 
+
 
+    <section class="category container text-center img-block">
 
+      <div class="row row-cols-1 row-cols-md-2">
 
+        <div class="col position-relative">
 
+          <img class="img-block__img " src="{{ .Params.block1_img }}" alt="">
 
+          <img class="img-block__linecir left" src="/imgs/裝飾圓.webp" alt="">
 
+        </div>
 
+        <div class="col my-auto pt-3 pt-md-0">
 
+          <h4>{{ .Params.block1_title }}</h4>
 
+          <strong>{{ .Params.block1_strong }}</strong>
 
+          <p>{{ .Params.block1_text | markdownify }}</p>
 
+        </div>
 
+      </div>
 
+    </section>
 
+    <!-- <section class="category container text-center img-block">
 
+            <div class="row row-cols-1 row-cols-md-2">
 
+                <div class="col my-auto">
 
+                  <h4>{{ .Params.block2_title }}</h4>
 
+                  <strong>{{ .Params.block2_strong }}</strong>
 
+                  <p>{{ .Params.block2_text | markdownify }}</p>
 
+                </div>
 
+                <div class="col position-relative">
 
+                  <img class="img-block__img" src="{{ .Params.block2_img }}" alt="">
 
+                  <img class="img-block__linecir right" src="/imgs/裝飾圓.webp" alt="">
 
+              </div>
 
+            </div>
 
+          </section>
 
+          <section class="category container text-center img-block">
 
+            <div class="row row-cols-1 row-cols-md-2">
 
+                <div class="col position-relative">
 
+                    <img class="img-block__img" src="{{ .Params.block3_img }}" alt="">
 
+                    <img class="img-block__linecir left" src="/imgs/裝飾圓.webp" alt="">
 
+                </div>
 
+                <div class="col my-auto">
 
+                  <h4>{{ .Params.block3_title }}</h4>
 
+                  <strong>{{ .Params.block3_strong }}</strong>
 
+                  <p>{{ .Params.block3_text | markdownify }}</p>
 
+                </div>
 
+            </div>
 
+          </section> -->
 
+    <section class="category container text-center img-block">
 
+      <div class="row row-cols-1 row-cols-md-2">
 
+        <div class="col my-auto pt-3 pt-md-0">
 
+          <h4>{{ .Params.block4_title }}</h4>
 
+          <strong>{{ .Params.block4_strong }}</strong>
 
+          <ul class="text-start img-block-list">
 
+            <li>{{ .Params.block4_list1 }}</li>
 
+            <li>{{ .Params.block4_list2 }}</li>
 
+            <li>{{ .Params.block4_list3 }}</li>
 
+          </ul>
 
+        </div>
 
+        <div class="col position-relative">
 
+          <img class="img-block__img" src="{{ .Params.block4_img }}" alt="">
 
+          <img class="img-block__linecir right" src="/imgs/裝飾圓.webp" alt="">
 
+        </div>
 
+      </div>
 
+    </section>
 
+    <div class="container loaded pageForm">
 
+      <div class="row">
 
+        <div class="col-12 col-md-6">
 
+          <div class="pageForm__p">
 
+            <div class="mb-3">
 
+              <div class="pageForm__title">
 
+                <h3 class="pageForm__title-h3">SEO 搜尋排名優化服務</h3>
 
+              </div>
 
+            </div>
 
+            <div class="pageForm__txt mb-3 ">
 
+              <p>集仕多擁有獨家的 SEO 顯微鏡健檢服務，幫助你進行網站健檢，盤點網頁結構、速度及關鍵字研究，選擇適合你的關鍵字結合內容行銷，逐步提升排名
 
+                並且進行優化分析與策略，提出SEO改善建議，偕同逐項優化，推動排名向前。
 
+              </p>
 
+            </div>
 
+            <div class="pageForm__notice">
 
+              <a class="btn__detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
 
+              <p>填寫該表單將會有專人與你聯繫。<br>
 
+                如有問題歡迎來信 service@choozmo.com 或來電 036670804
 
+              </p>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <div class="col-12 col-md-6">
 
+          <div class="pageForm__p">
 
+            <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
 
+            <script>
 
+              hbspt.forms.create({
 
+                region: "na1",
 
+                portalId: "20485755",
 
+                formId: "e08cd305-569c-4913-96f5-4da9f5f90970"
 
+              });
 
+            </script>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+    </div>
 
+  </main>
 
+  <footer class="footer">
 
+    <div class="container">
 
+      <div class="row">
 
+        <div class="col-xs-12 col-sm-6">
 
+          <img src="https://i.imgur.com/P1gNopa.png" alt="" width="250">
 
+          <div class="footer-aigirl">Choozmo AI Spokesgirl</div>
 
+          <div class="footer-follow">關注我們</div>
 
+          <div class="footer-socials">
 
+            <a href="https://www.linkedin.com/company/choozmo/"><img src="https://i.imgur.com/qnd9QrT.png" alt=""
 
+                width="32px" height="32px"></a>
 
+            <a href="https://www.facebook.com/choozmo/"><img src="https://i.imgur.com/WdCAhSo.png" alt="" width="48px"
 
+                height="48px"></a>
 
+            <a href="https://line.me/R/ti/p/@choozmo?from=page"><img src="https://i.imgur.com/dNZ2aGW.png" alt=""
 
+                width="32px" height="32px"></a>
 
+            <a href="https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg"><img
 
+                src="https://i.imgur.com/zn6DUY8.png" alt="" width="32px" height="32px"></a>
 
+            <a href="https://www.instagram.com/choozmo_cmm/"><img src="https://i.imgur.com/pdJPY7m.png" alt=""
 
+                width="48px" height="48px"></a>
 
+            <a href="https://twitter.com/ai_cmm"><img src="https://i.imgur.com/qGBzq4J.png" alt="" width="32px"
 
+                height="32px"></a>
 
+          </div>
 
+        </div>
 
+        <div class="col-xs-12 col-sm-6">
 
+          <div class="footer-contacts" style="margin-top: 2rem;">
 
+            <h5>CONTACT</h5>
 
+            <div>
 
+              集仕多股份有限公司<br>新竹縣竹北市復興二路229號9樓之9<br>聯絡電話：036670804<br>聯絡信箱：SERVICE@CHOOZMO.COM
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </footer>
 
+  <script type="application/javascript">
 
+    var doNotTrack = false;
 
+    if (!doNotTrack) {
 
+      (function (i, s, o, g, r, a, m) {
 
+        i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
 
+          (i[r].q = i[r].q || []).push(arguments)
 
+        }, i[r].l = 1 * new Date(); a = s.createElement(o),
 
+          m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
 
+      })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
 
+      ga('create', 'UA-153100602-5', 'auto');
 
+
 
+      ga('send', 'pageview');
 
+    }
 
+  </script>
 
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
 
+    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
 
+    crossorigin="anonymous"></script>
 
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
 
+    integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
 
+    crossorigin="anonymous"></script>
 
+</body>
 
+
 
+</html>

+ 1 - 55
layouts/seo/single.html
View File 

@@ -66,61 +66,7 @@
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
-  <nav class="navbar navbar-expand-lg navbar-light fixed-top">
 
-    <div class="container-fluid">
 
-      <a class="navbar-brand" href="/">
 
-        <img src="https://ai.choozmo.com/img/Choozmo%20cloud%20logo.png" alt="" width="180" height="48"
 
-          class="d-inline-block align-text-top">
 
-      </a>
 
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
 
-        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 
-        <span class="navbar-toggler-icon"></span>
 
-      </button>
 
-      <div class="collapse navbar-collapse ms-auto" id="navbarNav">
 
-        <ul class="navbar-nav">
 
-          <li class="nav-item">
 
-            <a class="nav-link active" aria-current="page" href="/">Home</a>
 
-          </li>
 
-          <li class="nav-item dropdown">
 
-            <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
 
-              aria-expanded="false">
 
-              服務
 
-            </a>
 
-            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
-              <li><a class="dropdown-item" href="/ad-operation/dm/">廣告代操</a></li>
 
-              <li><a class="dropdown-item" href="/bigdata/dm/">大數據分析</a></li>
 
-              <li><a class="dropdown-item" href="/crawler/dm/">資訊爬蟲</a></li>
 
-              <li><a class="dropdown-item" href="/research/dm/">企業系統研發委外</a></li>
 
-              <li><a class="dropdown-item" href="/seo/dm/">SEO 搜尋排名優化</a></li>
 
-              <li><a class="dropdown-item" href="/video-making/dm/">影片製作服務</a></li>
 
-              <li><a class="dropdown-item" href="/ai-anchor/dm/">新聞 AI 主播媒體聯播網</a></li>
 
-              <li><a class="dropdown-item" href="/blog-traffic/dm/">創業家專案</a></li>
 
-            </ul>
 
-          </li>
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/tags/vtuber/">部落格</a>
 
-          </li>
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/collaboration/info/">合作夥伴</a>
 
-          </li>
 
-          <!-- <li class="nav-item dropdown">
 
-            <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 
-              合作夥伴
 
-            </a>
 
-            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
-              <li><a class="dropdown-item" href="/collaboration/river-cam/">康河智庫管理顧問有限公司</a></li>
 
-            </ul>
 
-          </li> -->
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/contact/service/">聯絡我們</a>
 
-          </li>
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/aboutus/info/">關於我們</a>
 
-          </li>
 
-        </ul>
 
-      </div>
 
-    </div>
 
-  </nav>
 
+  {{ partial "navbar.html" . }}
 
   <main>
 
   <main>
 
     <section class="header">
 
     <section class="header">
 
       <img src="/imgs/01.webp" alt="" class="header__lefttop">
 
       <img src="/imgs/01.webp" alt="" class="header__lefttop">

+ 1 - 55
layouts/video-making/single.html
View File 

@@ -75,61 +75,7 @@
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
-  <nav class="navbar navbar-expand-lg navbar-light fixed-top">
 
-    <div class="container-fluid">
 
-      <a class="navbar-brand" href="/">
 
-        <img src="https://ai.choozmo.com/img/Choozmo%20cloud%20logo.png" alt="" width="180" height="48"
 
-          class="d-inline-block align-text-top">
 
-      </a>
 
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
 
-        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 
-        <span class="navbar-toggler-icon"></span>
 
-      </button>
 
-      <div class="collapse navbar-collapse ms-auto" id="navbarNav">
 
-        <ul class="navbar-nav">
 
-          <li class="nav-item">
 
-            <a class="nav-link active" aria-current="page" href="/">Home</a>
 
-          </li>
 
-          <li class="nav-item dropdown">
 
-            <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
 
-              aria-expanded="false">
 
-              服務
 
-            </a>
 
-            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
-              <li><a class="dropdown-item" href="/ad-operation/dm/">廣告代操</a></li>
 
-              <li><a class="dropdown-item" href="/bigdata/dm/">大數據分析</a></li>
 
-              <li><a class="dropdown-item" href="/crawler/dm/">資訊爬蟲</a></li>
 
-              <li><a class="dropdown-item" href="/research/dm/">企業系統研發委外</a></li>
 
-              <li><a class="dropdown-item" href="/seo/dm/">SEO 搜尋排名優化</a></li>
 
-              <li><a class="dropdown-item" href="/video-making/dm/">影片製作服務</a></li>
 
-              <li><a class="dropdown-item" href="/ai-anchor/dm/">新聞 AI 主播媒體聯播網</a></li>
 
-              <li><a class="dropdown-item" href="/blog-traffic/dm/">創業家專案</a></li>
 
-            </ul>
 
-          </li>
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/tags/vtuber/">部落格</a>
 
-          </li>
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/collaboration/info/">合作夥伴</a>
 
-          </li>
 
-          <!-- <li class="nav-item dropdown">
 
-            <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 
-              合作夥伴
 
-            </a>
 
-            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
-              <li><a class="dropdown-item" href="/collaboration/river-cam/">康河智庫管理顧問有限公司</a></li>
 
-            </ul>
 
-          </li> -->
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/contact/service/">聯絡我們</a>
 
-          </li>
 
-          <li class="nav-item">
 
-            <a class="nav-link" href="/aboutus/info/">關於我們</a>
 
-          </li>
 
-        </ul>
 
-      </div>
 
-    </div>
 
-  </nav>
 
+  {{ partial "navbar.html" . }}
 
   <main>
 
   <main>
 
     <section class="header">
 
     <section class="header">
 
       <img src="/imgs/01.webp" alt="" class="header__lefttop">
 
       <img src="/imgs/01.webp" alt="" class="header__lefttop">

+ 560 - 0
layouts/youtube-views/single.html
View File 

@@ -0,0 +1,560 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1">
 
+  <meta http-equiv="Cache-Control" content="no-cache">
 
+  <title>Choozmo Marketing Cloud</title>
 
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
 
+    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
+  <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.11.2/css/all.css">
 
+  <link rel="stylesheet" href="/css/style.css">
 
+  <!-- Global site tag (gtag.js) - Google Ads: 474336061 -->
 
+  <script async src="https://www.googletagmanager.com/gtag/js?id=AW-474336061"></script>
 
+  <!-- Start of HubSpot Embed Code -->
 
+  <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script>
 
+  <!-- End of HubSpot Embed Code -->
 
+  <script>
 
+    window.dataLayer = window.dataLayer || [];
 
+    function gtag() { dataLayer.push(arguments); }
 
+    gtag('js', new Date());
 
+
 
+    gtag('config', 'AW-474336061');
 
+  </script>
 
+  <style>
 
+    .footer {
 
+      color: #656565;
 
+    }
 
+
 
+    .footer a {
 
+      color: #656565;
 
+      text-decoration: none;
 
+    }
 
+
 
+    .footer h5 {
 
+      color: black;
 
+      font-weight: 600;
 
+      padding-bottom: 15px;
 
+    }
 
+
 
+    .footer .link {
 
+      padding-bottom: 20px;
 
+    }
 
+
 
+    .footer {
 
+      background-color: #F0F0F0;
 
+      padding: 3rem;
 
+    }
 
+
 
+    .footer .right-column {
 
+      border-left: 1px solid black;
 
+    }
 
+
 
+    .footer .footer-aigirl {
 
+      font-weight: 600;
 
+      font-size: 2rem;
 
+      margin-top: 1rem;
 
+      margin-bottom: 1rem;
 
+    }
 
+
 
+    .footer .footer-follow {
 
+      font-size: 1.6rem;
 
+      margin-bottom: 1rem;
 
+      color: black;
 
+      font-size: 1rem;
 
+      font-weight: 600;
 
+      margin-top: 2rem;
 
+    }
 
+
 
+    .footer .footer-socials a {
 
+      margin-right: 5px;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  {{ partial "navbar.html" . }}
 
+  <main id="youtube-views">
 
+    <section class="header">
 
+      <img src="/imgs/dm/banner-01.webp" alt="" class="header__lefttop w-100">
 
+      <div class="container">
 
+        <div class="row align-items-center g-0">
 
+          <div class="col-12 col-md-6 text-center">
 
+            <h2 class="header__title" style="font-size: 2.9rem;">{{ .Params.packageTitle }}</h2>
 
+            <p class="text-center px-3 m-0">{{ .Params.packageSub1 }}</p>
 
+            <p class="text-center px-3">{{ .Params.packageSub2 }}</p>
 
+            <button class="btns-dark" onclick="window.location.href=`/contact/service/`">Contact us</button>
 
+          </div>
 
+          <div class="col-12 col-md-6">
 
+            <div class="header__right header__dm" style="background-image: url('/imgs/dm/dm_video-making-1.png');">
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </section>
 
+    <section class="category container text-center dm__description mt-xl mt-5 mt-lg-0">
 
+      <h2 class="category__sub_h2 pt-4 pt-lg-5"></h2>
 
+      <h5>
 
+        {{ .Params.description_01 }}
 
+        <br>
 
+        {{ .Params.description_02 }}
 
+      </h5>
 
+    </section>
 
+
 
+    <div class="container">
 
+      <div class="card-group flex-column flex-lg-row">
 
+        <div class="card">
 
+          <div class="card-body p-0 py-4 d-flex flex-column align-items-center">
 
+            <div class="d-flex flex-column mb-2">
 
+              <section class="d-flex mx-auto">
 
+                <img width="30" height="30" src="/imgs/icon/play-button.png" alt="" class="me-2">
 
+                <h5 class="card-title m-0 fw-bold">2,000</h5>
 
+              </section>
 
+              <span class="text-center" style="color: #7c8ba7;">Views</span>
 
+            </div>
 
+            <p class="card-text price">30 USD</p>
 
+            <div class="mx-auto mt-2 mb-1">
 
+              <ul>
 
+                <li class="card-text mb-2">
 
+                  <img width="30" src="/imgs/icon/check.png" alt="">
 
+                  100% true views
 
+                </li>
 
+                <li class="card-text">
 
+                  <img width="30" src="/imgs/icon/check.png" alt="">
 
+                  Performance report included
 
+                </li>
 
+              </ul>
 
+              <!-- <p class="card-text mb-2">Placement fee : NT$400／video</p> -->
 
+              <!-- <p class="card-text">Cost per valid view : NT$0.4</p> -->
 
+            </div>
 
+            <button class="buy-btn">Buy Now</button>
 
+          </div>
 
+        </div>
 
+        <div class="card mx-lg-5 my-5 my-lg-0">
 
+          <div class="card-body p-0 py-4 d-flex flex-column align-items-center">
 
+            <div class="d-flex flex-column mb-2">
 
+              <section class="d-flex mx-auto">
 
+                <img width="30" height="30" src="/imgs/icon/play-button.png" alt="" class="me-2">
 
+                <h5 class="card-title m-0 fw-bold">4,200</h5>
 
+              </section>
 
+              <span class="text-center" style="color: #7c8ba7;">Views</span>
 
+            </div>
 
+            <p class="card-text price">60 USD</p>
 
+            <div class="mx-auto mt-2 mb-1">
 
+              <ul>
 
+                <li class="card-text mb-2">
 
+                  <img width="30" src="/imgs/icon/check.png" alt="">
 
+                  100% true views
 
+                </li>
 
+                <li class="card-text">
 
+                  <img width="30" src="/imgs/icon/check.png" alt="">
 
+                  Performance report included
 
+                </li>
 
+              </ul>
 
+              <!-- <p class="card-text mb-2">Placement fee : NT$400／video</p> -->
 
+              <!-- <p class="card-text">Cost per valid view : NT$0.4</p> -->
 
+            </div>
 
+            <button class="buy-btn">Buy Now</button>
 
+          </div>
 
+        </div>
 
+        <div class="card">
 
+          <div class="card-body p-0 py-4 d-flex flex-column align-items-center">
 
+            <div class="d-flex flex-column mb-2">
 
+              <section class="d-flex mx-auto">
 
+                <img width="30" height="30" src="/imgs/icon/play-button.png" alt="" class="me-2">
 
+                <h5 class="card-title m-0 fw-bold">7,500</h5>
 
+              </section>
 
+              <span class="text-center" style="color: #7c8ba7;">Views</span>
 
+            </div>
 
+            <p class="card-text price">100 USD</p>
 
+            <div class="mx-auto mt-2 mb-1">
 
+              <ul>
 
+                <li class="card-text mb-2">
 
+                  <img width="30" src="/imgs/icon/check.png" alt="">
 
+                  100% true views
 
+                </li>
 
+                <li class="card-text">
 
+                  <img width="30" src="/imgs/icon/check.png" alt="">
 
+                  Performance report included
 
+                </li>
 
+              </ul>
 
+              <!-- <p class="card-text mb-2">Placement fee : NT$400／video</p> -->
 
+              <!-- <p class="card-text">Cost per valid view : NT$0.4</p> -->
 
+            </div>
 
+            <button class="buy-btn">Buy Now</button>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <div class="row direction-list">
 
+        <div class="col-12 col-md-6 content">
 
+          <div class="d-flex align-items-start">
 
+            <img src="/imgs/icon/analytics.png" alt="" class="me-3">
 
+            <section class="d-flex flex-column">
 
+              <h5>What are YouTube views?</h5>
 
+              <p>
 
+                Views on a YouTube video are counted if the video is played at the initiative of the user and the video
 
+                is not detected as spam by YouTube’s algorithm.
 
+              </p>
 
+            </section>
 
+          </div>
 
+
 
+          <div class="d-flex align-items-start">
 
+            <img src="/imgs/icon/padlock.png" alt="" class="me-3">
 
+            <section class="d-flex flex-column">
 
+              <h5>Safe and secure</h5>
 
+              <p>
 
+                We NEVER ask the password of your YouTube account or any private information when you purchase our
 
+                services. However, you should protect your YouTube account and never share the password of your YouTube
 
+                account with anyone.
 
+              </p>
 
+            </section>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-12 col-md-6 content">
 
+          <div class="d-flex align-items-start">
 
+            <img src="/imgs/icon/search.png" alt="" class="me-3">
 
+            <section class="d-flex flex-column">
 
+              <h5>Why buy YouTube views?</h5>
 
+              <p>
 
+                People tend to look at the view count of videos when deciding which video to watch. Videos with high
 
+                view counts attract more people to click and watch the videos. Buying views can increase your chances of
 
+                getting more organic views.
 
+              </p>
 
+            </section>
 
+          </div>
 
+
 
+          <div class="d-flex align-items-start">
 
+            <img src="/imgs/icon/exclamation.png" alt="" class="me-3">
 
+            <section class="d-flex flex-column">
 
+              <h5>Making sure your YouTube views are counted correctly</h5>
 
+              <p>
 
+                To ensure your YouTube views are counted correctly, DO NOT purchase views from multiple services at the
 
+                same time.
 
+              </p>
 
+            </section>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <div class="container-fluid py-5 my-5 position-relative" style="background-color: #FFEBE2;">
 
+      <div class="row justify-content-center align-items-center">
 
+        <div class="col-11 col-lg-5">
 
+          <h5 class="title">Why Should You Buy YouTube Views?</h5>
 
+          <p>
 
+            Given YouTube’s popularity as a video streaming platform, competition for views and ranking on YouTube is
 
+            tough. Aside from the title, thumbnail, and description of a video, view count is also an important factor
 
+            for users to decide which video to watch – in fact, people prefer watching videos which have a high view
 
+            count! Videos with a high view count attract more people to click and watch the videos. Buying YouTube views
 
+            can increase your chances of getting more organic views and gaining higher exposure, which in turn increases
 
+            your channel’s credibility, puts your video higher in the rankings, and potentially helps you earn more
 
+            subscribers.
 
+          </p>
 
+        </div>
 
+
 
+        <div class="col-12 col-lg-6">
 
+          <img src="/imgs/dm/youtube-01.png" alt="" class="img-fluid">
 
+        </div>
 
+      </div>
 
+      <img src="/imgs/bottom-line.png" alt="" class="position-absolute">
 
+    </div>
 
+
 
+    <div class="container" style="margin-top: 80px;">
 
+      <div class="row my-5 align-items-center justify-content-center">
 
+        <div class="col-12 col-lg-6">
 
+          <img src="/imgs/dm/youtube-02.png" alt="" class="img-fluid">
 
+        </div>
 
+        <div class="col-11 col-lg-6 mt-5 mt-lg-0">
 
+          <h5 class="title">Is buying YouTube views safe and legal?</h5>
 
+          <p>
 
+            The only thing related to YouTube that we ask when you purchase YouTube views from us is the ID or link of
 
+            the YouTube video – we NEVER ask the password of your YouTube account or any of your private information.
 
+            However, you should always protect your YouTube account and never share the password of your YouTube account
 
+            with anyone, in order to prevent your YouTube account from being compromised.
 
+            <br>
 
+            <br>
 
+            YouTube allows users to purchase views, as long as such activities are not considered spamming. Do note that
 
+            YouTube can delete videos that are deemed spam or contain spam activity, and the uploader can risk being
 
+            suspended or banned from YouTube – therefore, you should refrain from buying too many views all at once. In
 
+            addition, you should make sure that your purchase of YouTube views does not violate the laws and regulations
 
+            in your area.
 
+          </p>
 
+        </div>
 
+        <div class="col-11 col-lg-6 mt-5">
 
+          <h5 class="title">What Are the Benefits of Having YouTube Views?</h5>
 
+          <p>
 
+            Having YouTube views will make your videos look more popular – users tend to view popular videos, that is,
 
+            videos with a high amount of views. The popularity of a video will increase as it is viewed, and popular
 
+            videos
 
+            will be watched by more people.
 
+            <br>
 
+            <br>
 
+            Even if you don’t buy YouTube views, your channel and its videos can still have the potential to become
 
+            popular
 
+            – however it may take more time than when you buy YouTube views. Buying YouTube views help you save time and
 
+            make your channel and its videos become popular faster.
 
+          </p>
 
+        </div>
 
+        <div class="col-12 col-lg-6">
 
+          <img src="/imgs/dm/youtube-03.png" alt="" class="img-fluid">
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- <section class="category container text-center dm__description mt-xl">
 
+      <h5 class="mb-5" style="font-size: 2rem;">常見問題</h5>
 
+      <h2 class="category__sub_h2 pt-3"></h2>
 
+      <p>
 
+        Find answers to any questions you may have in mind about our products and tools. If you can't find your answer
 
+        at FAQ you can reach us via our live support center without a fee.
 
+      </p>
 
+    </section> -->
 
+
 
+    <!-- FAQ -->
 
+    <!-- <div class="container pb-5">
 
+      <div class="row">
 
+        <div class="col-6">
 
+          <div class="accordion" id="accordionExample">
 
+            <div class="accordion-item">
 
+              <h2 class="accordion-header" id="headingTwo">
 
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+                  data-bs-target="#faq_01" aria-expanded="false" aria-controls="faq_01">
 
+                  Can this service help me reach 4,000 hours of view time required for monetization and partnership?
 
+                </button>
 
+              </h2>
 
+              <div id="faq_01" class="accordion-collapse collapse" aria-labelledby="headingTwo"
 
+                data-bs-parent="#accordionExample">
 
+                <div class="accordion-body">
 
+                  Yes! When you get YouTube views, the video you targeted will be watched from start to end by the
 
+                  specific amount of accounts you decided. With this service, you can easily surpass the 4,000 hours
 
+                  limit.
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="accordion-item">
 
+              <h2 class="accordion-header" id="headingTwo">
 
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+                  data-bs-target="#faq_02" aria-expanded="false" aria-controls="faq_02">
 
+                  Is it possible for YouTube to realize I'm not getting genuine views?
 
+                </button>
 
+              </h2>
 
+              <div id="faq_02" class="accordion-collapse collapse" aria-labelledby="headingTwo"
 
+                data-bs-parent="#accordionExample">
 
+                <div class="accordion-body">
 
+                  It's not likely. Since there isn't a list called "viewers," or such, it's almost impossible for
 
+                  YouTube to catch you red-handed. It's not so much different than asking a friend to watch your video.
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="accordion-item">
 
+              <h2 class="accordion-header" id="headingThree">
 
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+                  data-bs-target="#faq_03" aria-expanded="false" aria-controls="faq_03">
 
+                  Can my number of views decrease over time?
 
+                </button>
 
+              </h2>
 
+              <div id="faq_03" class="accordion-collapse collapse" aria-labelledby="headingThree"
 
+                data-bs-parent="#accordionExample">
 
+                <div class="accordion-body">
 
+                  No! It's not possible to lose your video views. Those views are intended to stay on your profile for a
 
+                  remarkable period. We can clearly say those views are going to remain intact on your account.
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="accordion-item">
 
+              <h2 class="accordion-header" id="headingThree">
 
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+                  data-bs-target="#faq_04" aria-expanded="false" aria-controls="faq_04">
 
+                  What counts as a view on YouTube?
 
+                </button>
 
+              </h2>
 
+              <div id="faq_04" class="accordion-collapse collapse" aria-labelledby="headingThree"
 
+                data-bs-parent="#accordionExample">
 
+                <div class="accordion-body">
 
+                  YouTube counts 30 seconds of watch time a single view.
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="accordion-item">
 
+              <h2 class="accordion-header" id="headingThree">
 
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+                  data-bs-target="#faq_05" aria-expanded="false" aria-controls="faq_05">
 
+                  What counts as a view for a paid advertisement on YouTube?
 
+                </button>
 
+              </h2>
 
+              <div id="faq_05" class="accordion-collapse collapse" aria-labelledby="headingThree"
 
+                data-bs-parent="#accordionExample">
 
+                <div class="accordion-body">
 
+                  If the user watches a complete ad or watches at least 30 seconds of an ad, it counts as a view.
 
+                  Interactions with the ad are also counted as views.
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="accordion-item">
 
+              <h2 class="accordion-header" id="headingThree">
 
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+                  data-bs-target="#faq_06" aria-expanded="false" aria-controls="faq_06">
 
+                  Does rewatching a video counts as a view?
 
+                </button>
 
+              </h2>
 
+              <div id="faq_06" class="accordion-collapse collapse" aria-labelledby="headingThree"
 
+                data-bs-parent="#accordionExample">
 
+                <div class="accordion-body">
 
+                  Yes, if you replay and watch more than 30 seconds, it counts as a view.
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <div class="col-6">
 
+          <div class="accordion" id="accordionExample">
 
+            <div class="accordion-item">
 
+              <h2 class="accordion-header" id="headingTwo">
 
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+                  data-bs-target="#faq_07" aria-expanded="false" aria-controls="faq_07">
 
+                  How are YouTubers paid?
 
+                </button>
 
+              </h2>
 
+              <div id="faq_07" class="accordion-collapse collapse" aria-labelledby="headingTwo"
 
+                data-bs-parent="#accordionExample">
 
+                <div class="accordion-body">
 
+                  They are paid with the advertisements they optimize with AdSense.
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="accordion-item">
 
+              <h2 class="accordion-header" id="headingThree">
 
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+                  data-bs-target="#faq_08" aria-expanded="false" aria-controls="faq_08">
 
+                  Is it illegal to buy YouTube views?
 
+                </button>
 
+              </h2>
 
+              <div id="faq_08" class="accordion-collapse collapse" aria-labelledby="headingThree"
 
+                data-bs-parent="#accordionExample">
 
+                <div class="accordion-body">
 
+                  Paying people to see your videos is not illegal, so no.
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="accordion-item">
 
+              <h2 class="accordion-header" id="headingThree">
 
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+                  data-bs-target="#faq_09" aria-expanded="false" aria-controls="faq_09">
 
+                  Is it safe to buy YouTube views?
 
+                </button>
 
+              </h2>
 
+              <div id="faq_09" class="accordion-collapse collapse" aria-labelledby="headingThree"
 
+                data-bs-parent="#accordionExample">
 
+                <div class="accordion-body">
 
+                  Absolutely. Our website is protected by an SSL certificate, so you can be comfortable when you're
 
+                  buying services from us.
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="accordion-item">
 
+              <h2 class="accordion-header" id="headingThree">
 
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+                  data-bs-target="#faq_10" aria-expanded="false" aria-controls="faq_10">
 
+                  Can YouTubers see who viewed their videos?
 
+                </button>
 
+              </h2>
 
+              <div id="faq_10" class="accordion-collapse collapse" aria-labelledby="headingThree"
 
+                data-bs-parent="#accordionExample">
 
+                <div class="accordion-body">
 
+                  Unfortunately not. They can only see how many people viewed their videos.
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="accordion-item">
 
+              <h2 class="accordion-header" id="headingThree">
 
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+                  data-bs-target="#faq_11" aria-expanded="false" aria-controls="faq_11">
 
+                  How can I get 4000 hours of watch time quickly?
 
+                </button>
 
+              </h2>
 
+              <div id="faq_11" class="accordion-collapse collapse" aria-labelledby="headingThree"
 
+                data-bs-parent="#accordionExample">
 
+                <div class="accordion-body">
 
+                  If you want to get 4000 watch hours fast, you can have a look at our YouTube Watch Hours service.
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="accordion-item">
 
+              <h2 class="accordion-header" id="headingThree">
 
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
 
+                  data-bs-target="#faq_12" aria-expanded="false" aria-controls="faq_12">
 
+                  What happens when you get 1K subscribers on YouTube?
 
+                </button>
 
+              </h2>
 
+              <div id="faq_12" class="accordion-collapse collapse" aria-labelledby="headingThree"
 
+                data-bs-parent="#accordionExample">
 
+                <div class="accordion-body">
 
+                  When you hit 1K subscribers, YouTube sends you a mail to congratulate you.
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div> -->
 
+  </main>
 
+  <footer class="footer">
 
+    <div class="container">
 
+      <div class="row">
 
+        <div class="col-xs-12 col-sm-6">
 
+          <img src="https://i.imgur.com/P1gNopa.png" alt="" width="250">
 
+          <div class="footer-aigirl">Choozmo AI Spokesgirl</div>
 
+          <div class="footer-follow">關注我們</div>
 
+          <div class="footer-socials">
 
+            <a href="https://www.linkedin.com/company/choozmo/"><img src="https://i.imgur.com/qnd9QrT.png" alt=""
 
+                width="32px" height="32px"></a>
 
+            <a href="https://www.facebook.com/choozmo/"><img src="https://i.imgur.com/WdCAhSo.png" alt="" width="48px"
 
+                height="48px"></a>
 
+            <a href="https://line.me/R/ti/p/@choozmo?from=page"><img src="https://i.imgur.com/dNZ2aGW.png" alt=""
 
+                width="32px" height="32px"></a>
 
+            <a href="https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg"><img
 
+                src="https://i.imgur.com/zn6DUY8.png" alt="" width="32px" height="32px"></a>
 
+            <a href="https://www.instagram.com/choozmo_cmm/"><img src="https://i.imgur.com/pdJPY7m.png" alt=""
 
+                width="48px" height="48px"></a>
 
+            <a href="https://twitter.com/ai_cmm"><img src="https://i.imgur.com/qGBzq4J.png" alt="" width="32px"
 
+                height="32px"></a>
 
+          </div>
 
+        </div>
 
+        <div class="col-xs-12 col-sm-6">
 
+          <div class="footer-contacts" style="margin-top: 2rem;">
 
+            <h5>CONTACT</h5>
 
+            <div>
 
+              集仕多股份有限公司<br>新竹縣竹北市復興二路229號9樓之9<br>聯絡電話：036670804<br>聯絡信箱：SERVICE@CHOOZMO.COM
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </footer>
 
+  <script type="application/javascript">
 
+    var doNotTrack = false;
 
+    if (!doNotTrack) {
 
+      (function (i, s, o, g, r, a, m) {
 
+        i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
 
+          (i[r].q = i[r].q || []).push(arguments)
 
+        }, i[r].l = 1 * new Date(); a = s.createElement(o),
 
+          m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
 
+      })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
 
+      ga('create', 'UA-153100602-5', 'auto');
 
+
 
+      ga('send', 'pageview');
 
+    }
 
+  </script>
 
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
 
+    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
 
+    crossorigin="anonymous"></script>
 
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
 
+    integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
 
+    crossorigin="anonymous"></script>
 
+</body>
 
+
 
+</html>

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

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

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


+ 1 - 1
static/css/custom.css
View File 

@@ -430,7 +430,7 @@
 
   width: 65%;
 
   width: 65%;
 
   padding: 3.5rem;
 
   padding: 3.5rem;
 
   padding-bottom: 6rem;
 
   padding-bottom: 6rem;
 
-  box-shadow: 1px 1px 10px 2px grey;
 
+  box-shadow: 0 0 10px rgb(32 32 32 / 25%);
 
   height: 48rem;
 
   height: 48rem;
 
   overflow: hidden;
 
   overflow: hidden;
 
   text-align: left;
 
   text-align: left;

+ 768 - 693
static/css/style.css
View File 

@@ -1,1089 +1,1164 @@
 
+@charset "UTF-8";
 
 * {
 
 * {
 
-    letter-spacing: 1px;
 
+  letter-spacing: 1px;
 
 }
 
 }
 
 
 
 .navbar {
 
 .navbar {
 
-    box-shadow: 0 2px 10px 2px rgb(204, 204, 204);
 
-    background-color: white;
 
-    width: 100%;
 
+  box-shadow: 0 2px 10px 2px rgb(204, 204, 204);
 
+  background-color: white;
 
+  width: 100%;
 
 }
 
 }
 
 
 
 .navbar .navbar-collapse {
 
 .navbar .navbar-collapse {
 
-    flex-grow: 0;
 
+  flex-grow: 0;
 
 }
 
 }
 
 
 
 .header {
 
 .header {
 
-    margin-top: 77px;
 
-    padding-top: 6.5rem;
 
-    height: 75vh;
 
-    position: relative;
 
-    padding-bottom: 3rem;
 
+  margin-top: 50px;
 
+  padding-top: 6.5rem;
 
+  height: 75vh;
 
+  position: relative;
 
+  padding-bottom: 3rem;
 
 }
 
 }
 
 
 
 .header__lefttop {
 
 .header__lefttop {
 
-    position: absolute;
 
-    left: 0;
 
-    top: 0;
 
-    z-index: -1;
 
-    width: 350px;
 
+  position: absolute;
 
+  left: 0;
 
+  top: 0;
 
+  z-index: -1;
 
+  width: 350px;
 
 }
 
 }
 
 
 
 .header__title {
 
 .header__title {
 
-    font-size: 3rem;
 
-    color: #20616d;
 
-    font-weight: 400;
 
+  font-size: 3rem;
 
+  color: #20616d;
 
+  font-weight: 400;
 
 }
 
 }
 
 
 
 .header__sub {
 
 .header__sub {
 
-    color: #38a7bb;
 
-    font-size: 1.5rem;
 
-    font-weight: 300;
 
-    position: relative;
 
+  color: #38a7bb;
 
+  font-size: 1.5rem;
 
+  font-weight: 300;
 
+  position: relative;
 
 }
 
 }
 
 
 
 .header__sub::before,
 
 .header__sub::before,
 
 .header__sub::after {
 
 .header__sub::after {
 
-    content: " ";
 
-    position: absolute;
 
-    width: 12%;
 
-    height: 1px;
 
-    background-color: #38a7bb;
 
-    top: 50%;
 
+  content: " ";
 
+  position: absolute;
 
+  width: 12%;
 
+  height: 1px;
 
+  background-color: #38a7bb;
 
+  top: 50%;
 
 }
 
 }
 
 
 
 .header__sub::before {
 
 .header__sub::before {
 
-    left: 28%;
 
+  left: 28%;
 
 }
 
 }
 
 
 
 .header__sub::after {
 
 .header__sub::after {
 
-    left: 60%;
 
+  left: 60%;
 
 }
 
 }
 
 
 
 .header__form {
 
 .header__form {
 
-    margin: 1rem auto;
 
-    justify-content: center;
 
+  margin: 1rem auto;
 
+  justify-content: center;
 
 }
 
 }
 
 
 
 .header__form__input {
 
 .header__form__input {
 
-    border-radius: 10rem;
 
-    padding: 0.4rem 0.8rem;
 
-    width: 60%;
 
-    margin-left: 4.5rem;
 
+  border-radius: 10rem;
 
+  padding: 0.4rem 0.8rem;
 
+  width: 60%;
 
+  margin-left: 4.5rem;
 
 }
 
 }
 
 
 
 .header__form__sub {
 
 .header__form__sub {
 
-    border-radius: 10rem;
 
-    background-color: #fca25e;
 
-    color: white;
 
-    border: none;
 
-    width: 5rem;
 
-    transform: translateX(-100%);
 
-    transition: all 0.3s;
 
+  border-radius: 10rem;
 
+  background-color: #fca25e;
 
+  color: white;
 
+  border: none;
 
+  width: 5rem;
 
+  transform: translateX(-100%);
 
+  transition: all 0.3s;
 
 }
 
 }
 
 
 
 .header__form__sub:hover {
 
 .header__form__sub:hover {
 
-    background-color: #ff892e;
 
+  background-color: #ff892e;
 
 }
 
 }
 
 
 
 .header__right {
 
 .header__right {
 
-    width: 80%;
 
-    height: 50vh;
 
-    background-image: url("../imgs/電腦2.webp");
 
-    background-size: contain;
 
-    background-repeat: no-repeat;
 
-    margin: 0 auto;
 
-    position: relative;
 
+  width: 80%;
 
+  height: 50vh;
 
+  background-image: url("../imgs/電腦2.webp");
 
+  background-size: contain;
 
+  background-repeat: no-repeat;
 
+  margin: 0 auto;
 
+  position: relative;
 
 }
 
 }
 
 
 
 .header__right.header__dm {
 
 .header__right.header__dm {
 
-    background-image: url("https://i.imgur.com/SOu53ii.jpg");
 
+  background-image: url("https://i.imgur.com/SOu53ii.jpg");
 
 }
 
 }
 
 
 
 .header__right__cir {
 
 .header__right__cir {
 
-    width: 60%;
 
-    position: absolute;
 
-    right: 0%;
 
-    top: -5%;
 
-    z-index: -1;
 
+  width: 60%;
 
+  position: absolute;
 
+  right: 0%;
 
+  top: -5%;
 
+  z-index: -1;
 
 }
 
 }
 
 
 
 .header__right__video {
 
 .header__right__video {
 
-    position: absolute;
 
-    width: calc(80% - 10%);
 
-    height: auto;
 
-    left: 3.3rem;
 
-    top: 1.8rem;
 
+  position: absolute;
 
+  width: 70%;
 
+  height: auto;
 
+  left: 3.3rem;
 
+  top: 1.8rem;
 
 }
 
 }
 
 
 
 .header__right__magnifier {
 
 .header__right__magnifier {
 
-    position: absolute;
 
-    width: 25%;
 
-    right: 3%;
 
-    bottom: 1%;
 
+  position: absolute;
 
+  width: 25%;
 
+  right: 3%;
 
+  bottom: 1%;
 
 }
 
 }
 
 
 
 .header__right__bubble {
 
 .header__right__bubble {
 
-    position: absolute;
 
-    width: 22%;
 
-    top: 0;
 
-    left: 0;
 
-    transform: translate(-60%, -50%);
 
+  position: absolute;
 
+  width: 22%;
 
+  top: 0;
 
+  left: 0;
 
+  transform: translate(-60%, -50%);
 
 }
 
 }
 
 
 
 .header__right__linecir {
 
 .header__right__linecir {
 
-    width: 45%;
 
-    position: absolute;
 
-    left: -8%;
 
-    bottom: -3%;
 
-    z-index: -1;
 
+  width: 45%;
 
+  position: absolute;
 
+  left: -8%;
 
+  bottom: -3%;
 
+  z-index: -1;
 
 }
 
 }
 
 
 
 .category {
 
 .category {
 
-    padding: 2rem 0rem;
 
+  padding: 2rem 0rem;
 
 }
 
 }
 
 
 
 .category.dm__description {
 
 .category.dm__description {
 
-    padding: 2rem 8rem;
 
+  padding: 2rem 8rem;
 
 }
 
 }
 
 
 
 .category__sub_h2 {
 
 .category__sub_h2 {
 
-    position: relative;
 
+  position: relative;
 
 }
 
 }
 
 
 
 .category__sub_h2::after {
 
 .category__sub_h2::after {
 
-    position: absolute;
 
-    content: "";
 
-    width: 4rem;
 
-    height: 1rem;
 
-    border-bottom: 10px solid #ff892e;
 
-    left: 50%;
 
-    top: -1.5rem;
 
-    transform: translateX(-50%);
 
+  position: absolute;
 
+  content: "";
 
+  width: 4rem;
 
+  height: 1rem;
 
+  border-bottom: 10px solid #ff892e;
 
+  left: 50%;
 
+  top: -1.5rem;
 
+  transform: translateX(-50%);
 
 }
 
 }
 
 
 
 .category__btngrp {
 
 .category__btngrp {
 
-    padding: 0 8rem;
 
+  padding: 0 8rem;
 
 }
 
 }
 
 
 
 .category__btn {
 
 .category__btn {
 
-    background-color: #a7d9e2;
 
-    border: none;
 
-    border-radius: 5rem;
 
-    outline: none;
 
-    color: white;
 
-    font-size: 1.3rem;
 
-    padding: 0.4rem 2rem;
 
-    text-decoration: none;
 
+  background-color: #a7d9e2;
 
+  border: none;
 
+  border-radius: 5rem;
 
+  outline: none;
 
+  color: white;
 
+  font-size: 1.3rem;
 
+  padding: 0.4rem 2rem;
 
+  text-decoration: none;
 
 }
 
 }
 
 
 
 .category__btn.active {
 
 .category__btn.active {
 
-    background-color: #38a7bb;
 
-    text-decoration: none;
 
-    color: white;
 
+  background-color: #38a7bb;
 
+  text-decoration: none;
 
+  color: white;
 
 }
 
 }
 
 
 
 .card__rank {
 
 .card__rank {
 
-    border: 1px solid #cecece;
 
-    box-shadow: 1px 1px 5px 1px rgb(211, 211, 211);
 
-    position: relative;
 
-    padding: 1rem 1.5rem;
 
+  border: 1px solid #cecece;
 
+  box-shadow: 1px 1px 5px 1px rgb(211, 211, 211);
 
+  position: relative;
 
+  padding: 1rem 1.5rem;
 
 }
 
 }
 
 
 
 .top20 .card__rank {
 
 .top20 .card__rank {
 
-    margin-bottom: 1.5rem;
 
+  margin-bottom: 1.5rem;
 
 }
 
 }
 
 
 
 .top3 {
 
 .top3 {
 
-    padding: 3rem 0rem;
 
-    padding-bottom: 5rem;
 
-    position: relative;
 
+  padding: 3rem 0rem;
 
+  padding-bottom: 5rem;
 
+  position: relative;
 
 }
 
 }
 
 
 
 .top3 .row {
 
 .top3 .row {
 
-    padding: 0rem 4rem;
 
+  padding: 0rem 4rem;
 
 }
 
 }
 
 
 
 .top3 .backfill {
 
 .top3 .backfill {
 
-    position: absolute;
 
-    width: 100%;
 
-    height: 100px;
 
-    background-color: #ffebe8;
 
-    left: 0;
 
-    right: 0;
 
-    top: 7rem;
 
+  position: absolute;
 
+  width: 100%;
 
+  height: 100px;
 
+  background-color: #ffebe8;
 
+  left: 0;
 
+  right: 0;
 
+  top: 7rem;
 
 }
 
 }
 
 
 
 .top3__num {
 
 .top3__num {
 
-    color: #fca25e;
 
-    font-size: 5.8rem;
 
-    font-family: "Trebuchet MS";
 
-    position: absolute;
 
-    left: 1rem;
 
-    top: -3.5rem;
 
-    font-weight: 300;
 
+  color: #fca25e;
 
+  font-size: 5.8rem;
 
+  font-family: "Trebuchet MS";
 
+  position: absolute;
 
+  left: 1rem;
 
+  top: -3.5rem;
 
+  font-weight: 300;
 
 }
 
 }
 
 
 
 .card__rank__word {
 
 .card__rank__word {
 
-    color: #20616d;
 
-    margin-left: 3rem;
 
-    font-size: 1.8rem;
 
-    font-weight: 400;
 
+  color: #20616d;
 
+  margin-left: 3rem;
 
+  font-size: 1.8rem;
 
+  font-weight: 400;
 
 }
 
 }
 
 
 
 .card__rank__goto {
 
 .card__rank__goto {
 
-    text-align: right;
 
+  text-align: right;
 
 }
 
 }
 
 
 
 .card__rank__link {
 
 .card__rank__link {
 
-    color: #38a7bb;
 
-    text-decoration: none;
 
-    font-weight: 400;
 
+  color: #38a7bb;
 
+  text-decoration: none;
 
+  font-weight: 400;
 
 }
 
 }
 
+
 
 .card__rank__link:hover {
 
 .card__rank__link:hover {
 
-    color: #19879b;
 
+  color: #19879b;
 
 }
 
 }
 
 
 
 .top20 {
 
 .top20 {
 
-    padding-bottom: 5rem;
 
+  padding-bottom: 5rem;
 
 }
 
 }
 
 
 
 .top20 .row {
 
 .top20 .row {
 
-    padding: 0rem 4rem;
 
+  padding: 0rem 4rem;
 
 }
 
 }
 
 
 
 .top20 .card__rank__word {
 
 .top20 .card__rank__word {
 
-    margin-left: 0;
 
+  margin-left: 0;
 
 }
 
 }
 
+
 
 .top20__num {
 
 .top20__num {
 
-    color: #fca25e;
 
-    font-size: 2.5rem;
 
-    font-family: "Trebuchet MS";
 
-    font-weight: 300;
 
-    display: inline-block;
 
-    width: 3rem;
 
+  color: #fca25e;
 
+  font-size: 2.5rem;
 
+  font-family: "Trebuchet MS";
 
+  font-weight: 300;
 
+  display: inline-block;
 
+  width: 3rem;
 
 }
 
 }
 
 
 
 .footer {
 
 .footer {
 
-    background-color: #555555;
 
-    padding: 50px 0;
 
-    color: #999999;
 
+  background-color: #555555;
 
+  padding: 50px 0;
 
+  color: #999999;
 
 }
 
 }
 
 
 
 .footer h4 {
 
 .footer h4 {
 
-    text-transform: uppercase;
 
-    color: white;
 
-    font-size: 14px;
 
-    font-weight: 800;
 
+  text-transform: uppercase;
 
+  color: white;
 
+  font-size: 14px;
 
+  font-weight: 800;
 
 }
 
 }
 
 
 
 .footer__btn__text {
 
 .footer__btn__text {
 
-    font-size: 1.3rem;
 
-    color: white;
 
+  font-size: 1.3rem;
 
+  color: white;
 
 }
 
 }
 
 
 
 .footer .btn {
 
 .footer .btn {
 
-    border: 2px solid #38a7bb;
 
-    color: #38a7bb;
 
-    text-decoration: none;
 
+  border: 2px solid #38a7bb;
 
+  color: #38a7bb;
 
+  text-decoration: none;
 
 }
 
 }
 
 
 
 .followus__btn {
 
 .followus__btn {
 
-    text-decoration: none;
 
-    color: white;
 
+  text-decoration: none;
 
+  color: white;
 
 }
 
 }
 
 
 
 .followus__btn:hover {
 
 .followus__btn:hover {
 
-    color: #38a7bb;
 
+  color: #38a7bb;
 
 }
 
 }
 
 
 
 .footer .btn:hover {
 
 .footer .btn:hover {
 
-    color: white;
 
-    background-color: #38a7bb;
 
+  color: white;
 
+  background-color: #38a7bb;
 
 }
 
 }
 
 
 
 .followus__txt {
 
 .followus__txt {
 
-    display: inline-block;
 
-    margin-right: 1rem;
 
-    color: white;
 
-    font-weight: 600;
 
+  display: inline-block;
 
+  margin-right: 1rem;
 
+  color: white;
 
+  font-weight: 600;
 
 }
 
 }
 
 
 
 .footer_img {
 
 .footer_img {
 
-    height: 60px;
 
+  height: 60px;
 
 }
 
 }
 
 
 
 /* content page */
 
 /* content page */
 
-
 
 .cntheader {
 
 .cntheader {
 
-    margin-top: 81px;
 
-    padding: 4rem 0;
 
-    position: relative;
 
-    padding-bottom: 2rem;
 
+  margin-top: 81px;
 
+  padding: 4rem 0;
 
+  position: relative;
 
+  padding-bottom: 2rem;
 
 }
 
 }
 
 
 
 .cntheader__sub {
 
 .cntheader__sub {
 
-    color: #38a7bb;
 
-    font-size: 1.5rem;
 
-    font-weight: 300;
 
-    position: relative;
 
+  color: #38a7bb;
 
+  font-size: 1.5rem;
 
+  font-weight: 300;
 
+  position: relative;
 
 }
 
 }
 
 
 
 .cntheader__sub::before,
 
 .cntheader__sub::before,
 
 .cntheader__sub::after {
 
 .cntheader__sub::after {
 
-    content: " ";
 
-    position: absolute;
 
-    width: 15%;
 
-    height: 1px;
 
-    background-color: #38a7bb;
 
-    top: 50%;
 
+  content: " ";
 
+  position: absolute;
 
+  width: 15%;
 
+  height: 1px;
 
+  background-color: #38a7bb;
 
+  top: 50%;
 
 }
 
 }
 
 
 
 .cntheader__sub::before {
 
 .cntheader__sub::before {
 
-    left: 18%;
 
+  left: 18%;
 
 }
 
 }
 
 
 
 .cntheader__sub::after {
 
 .cntheader__sub::after {
 
-    left: 67%;
 
+  left: 67%;
 
 }
 
 }
 
 
 
 .cntheader .category__btngrp {
 
 .cntheader .category__btngrp {
 
-    padding: 0 4rem;
 
+  padding: 0 4rem;
 
 }
 
 }
 
 
 
 .card__art {
 
 .card__art {
 
-    padding: 1rem;
 
-    border: 1px solid #20616d;
 
-    border-radius: 1rem;
 
-    margin-bottom: 1rem;
 
+  padding: 1rem;
 
+  border: 1px solid #20616d;
 
+  border-radius: 1rem;
 
+  margin-bottom: 1rem;
 
 }
 
 }
 
 
 
 .card__title {
 
 .card__title {
 
-    font-size: 1.8rem;
 
-    font-weight: 400;
 
+  font-size: 1.8rem;
 
+  font-weight: 400;
 
 }
 
 }
 
 
 
 .card__text {
 
 .card__text {
 
-    color: #918f8f;
 
+  color: #918f8f;
 
 }
 
 }
 
 
 
 .card__link {
 
 .card__link {
 
-    display: inline-block;
 
-    color: #38a7bb;
 
-    margin-right: 1rem;
 
-    text-decoration: none;
 
+  display: inline-block;
 
+  color: #38a7bb;
 
+  margin-right: 1rem;
 
+  text-decoration: none;
 
 }
 
 }
 
 
 
 .card__link:hover {
 
 .card__link:hover {
 
-    color: #20616d;
 
+  color: #20616d;
 
 }
 
 }
 
 
 
 .toparticle {
 
 .toparticle {
 
-    border: 1px solid #cecece;
 
-    box-shadow: 1px 2px 3px 1px rgb(224, 224, 224);
 
+  border: 1px solid #cecece;
 
+  box-shadow: 1px 2px 3px 1px rgb(224, 224, 224);
 
 }
 
 }
 
 
 
 .toparticle__title {
 
 .toparticle__title {
 
-    color: white;
 
-    background-color: #38a7bb;
 
-    text-align: center;
 
-    font-size: 1.3rem;
 
-    padding: 0.3rem 0;
 
-    position: relative;
 
+  color: white;
 
+  background-color: #38a7bb;
 
+  text-align: center;
 
+  font-size: 1.3rem;
 
+  padding: 0.3rem 0;
 
+  position: relative;
 
 }
 
 }
 
 
 
 .toparticle__title img {
 
 .toparticle__title img {
 
-    position: absolute;
 
-    width: 150px;
 
-    right: -4rem;
 
-    top: -3.5rem;
 
+  position: absolute;
 
+  width: 150px;
 
+  right: -4rem;
 
+  top: -3.5rem;
 
 }
 
 }
 
 
 
 .toparticle__list {
 
 .toparticle__list {
 
-    padding: 1.5rem;
 
-    padding-top: 0;
 
-    list-style: none;
 
-    padding-bottom: 1rem;
 
+  padding: 1.5rem;
 
+  padding-top: 0;
 
+  list-style: none;
 
+  padding-bottom: 1rem;
 
 }
 
 }
 
 
 
 .toparticle__list-item {
 
 .toparticle__list-item {
 
-    padding: 0.3rem;
 
-    border-bottom: 1px solid #cecece;
 
-    color: #38a7bb;
 
-    position: relative;
 
+  padding: 0.3rem;
 
+  border-bottom: 1px solid #cecece;
 
+  color: #38a7bb;
 
+  position: relative;
 
 }
 
 }
 
 
 
 .toparticle__list-item:nth-of-type(10) {
 
 .toparticle__list-item:nth-of-type(10) {
 
-    border: none;
 
+  border: none;
 
 }
 
 }
 
 
 
 .toparticle__list-item a {
 
 .toparticle__list-item a {
 
-    text-decoration: none;
 
-    color: #38a7bb;
 
+  text-decoration: none;
 
+  color: #38a7bb;
 
 }
 
 }
 
 
 
 .toparticle__num {
 
 .toparticle__num {
 
-    color: #fca25e;
 
-    font-size: 1.8rem;
 
-    font-family: "Trebuchet MS";
 
-    font-weight: 300;
 
-    margin-right: 8px;
 
+  color: #fca25e;
 
+  font-size: 1.8rem;
 
+  font-family: "Trebuchet MS";
 
+  font-weight: 300;
 
+  margin-right: 8px;
 
 }
 
 }
 
 
 
 .toparticle__top {
 
 .toparticle__top {
 
-    font-size: 2rem;
 
+  font-size: 2rem;
 
 }
 
 }
 
 
 
 .toparticle__list-item small {
 
 .toparticle__list-item small {
 
-    position: absolute;
 
-    right: 0;
 
-    top: 45%;
 
+  position: absolute;
 
+  right: 0;
 
+  top: 45%;
 
 }
 
 }
 
 
 
 .cntsubscribe {
 
 .cntsubscribe {
 
-    text-align: center;
 
+  text-align: center;
 
 }
 
 }
 
 
 
 .cntsubscribe__form {
 
 .cntsubscribe__form {
 
-    position: relative;
 
+  position: relative;
 
 }
 
 }
 
 
 
 .cntsubscribe__sub {
 
 .cntsubscribe__sub {
 
-    border-radius: 10rem;
 
-    background-color: #fca25e;
 
-    color: white;
 
-    border: none;
 
-    width: 5rem;
 
-    position: absolute;
 
-    right: 0;
 
-    top: 0;
 
-    padding: 0.45rem 0.8rem;
 
+  border-radius: 10rem;
 
+  background-color: #fca25e;
 
+  color: white;
 
+  border: none;
 
+  width: 5rem;
 
+  position: absolute;
 
+  right: 0;
 
+  top: 0;
 
+  padding: 0.45rem 0.8rem;
 
 }
 
 }
 
 
 
 .cntsubscribe__sub:hover {
 
 .cntsubscribe__sub:hover {
 
-    background-color: #ff892e;
 
-    color: white;
 
+  background-color: #ff892e;
 
+  color: white;
 
 }
 
 }
 
 
 
 .cntsubscribe__input {
 
 .cntsubscribe__input {
 
-    border-radius: 10rem;
 
-    padding: 0.4rem 0.8rem;
 
-    width: 100%;
 
+  border-radius: 10rem;
 
+  padding: 0.4rem 0.8rem;
 
+  width: 100%;
 
 }
 
 }
 
 
 
 .img-block .img-block__img {
 
 .img-block .img-block__img {
 
-    width: 70%;
 
+  width: 70%;
 
 }
 
 }
 
 
 
 .img-block-list {
 
 .img-block-list {
 
-    padding: 2rem 6rem;
 
+  padding: 2rem 6rem;
 
 }
 
 }
 
 
 
 .img-block__linecir {
 
 .img-block__linecir {
 
-    position: absolute;
 
-    right: 10%;
 
-    bottom: 5%;
 
-    width: 30%;
 
-    z-index: -1;
 
+  position: absolute;
 
+  right: 10%;
 
+  bottom: 5%;
 
+  width: 30%;
 
+  z-index: -1;
 
 }
 
 }
 
 
 
 .img-block__linecir.left {
 
 .img-block__linecir.left {
 
-    right: -10%;
 
-    bottom: -5%;
 
+  right: -10%;
 
+  bottom: -5%;
 
 }
 
 }
 
 
 
 .img-block__linecir.right {
 
 .img-block__linecir.right {
 
-    left: -10%;
 
-    bottom: -5%;
 
+  left: -10%;
 
+  bottom: -5%;
 
 }
 
 }
 
 
 
 .img-block__linecir.left {
 
 .img-block__linecir.left {
 
-    left: -10%;
 
-    bottom: -5%;
 
+  left: -10%;
 
+  bottom: -5%;
 
 }
 
 }
 
 
 
 .aboutus_img {
 
 .aboutus_img {
 
-    width: 100%;
 
+  width: 100%;
 
 }
 
 }
 
 
 
 .aboutus_prize_img {
 
 .aboutus_prize_img {
 
-    border: 1.5rem solid rgb(231, 231, 231);
 
-    border-radius: 1rem;
 
+  border: 1.5rem solid rgb(231, 231, 231);
 
+  border-radius: 1rem;
 
 }
 
 }
 
 
 
 .header__ai-training__span {
 
 .header__ai-training__span {
 
-    width: 6rem;
 
-    height: 6rem;
 
-    padding: 1rem;
 
-    display: inline-block;
 
-    font-size: 1.4rem;
 
-    background-color: rgb(255, 255, 159);
 
-    border-radius: 50%;
 
+  width: 6rem;
 
+  height: 6rem;
 
+  padding: 1rem;
 
+  display: inline-block;
 
+  font-size: 1.4rem;
 
+  background-color: rgb(255, 255, 159);
 
+  border-radius: 50%;
 
 }
 
 }
 
 
 
 .ai-training__action {
 
 .ai-training__action {
 
-    border: 3px dashed #ffebe8;
 
+  border: 3px dashed #ffebe8;
 
 }
 
 }
 
 
 
 .ai-training__card .card-img-top {
 
 .ai-training__card .card-img-top {
 
-    height: 35vh;
 
+  height: 35vh;
 
 }
 
 }
 
 
 
 .ai-training__action ul {
 
 .ai-training__action ul {
 
-    list-style: none;
 
-    line-height: 2rem;
 
+  list-style: none;
 
+  line-height: 2rem;
 
 }
 
 }
 
 
 
 .ai-training__action__box {
 
 .ai-training__action__box {
 
-    flex-direction: row;
 
+  flex-direction: row;
 
 }
 
 }
 
 
 
 .ai-training__action__btn {
 
 .ai-training__action__btn {
 
-    padding: 1.2rem 3rem;
 
-    border: none;
 
-    outline: none;
 
-    border-radius: 4rem;
 
-    background: #fca25e;
 
-    font-size: 1.5rem;
 
+  padding: 1.2rem 3rem;
 
+  border: none;
 
+  outline: none;
 
+  border-radius: 4rem;
 
+  background: #fca25e;
 
+  font-size: 1.5rem;
 
 }
 
 }
 
 
 
 .ai-training__action__img {
 
 .ai-training__action__img {
 
-    width: 15rem;
 
-    height: 15rem;
 
-    background-repeat: no-repeat;
 
-    background-position: center;
 
-    background-size: cover;
 
-    border-radius: 50%;
 
-    border: 3px solid #ffdbd6;
 
+  width: 15rem;
 
+  height: 15rem;
 
+  background-repeat: no-repeat;
 
+  background-position: center;
 
+  background-size: cover;
 
+  border-radius: 50%;
 
+  border: 3px solid #ffdbd6;
 
 }
 
 }
 
 
 
 .hero-btn {
 
 .hero-btn {
 
-    border: none;
 
-    outline: none;
 
-    border-radius: 3rem;
 
-    margin-top: 0.5rem;
 
-    padding: 0.6rem 1.5rem;
 
-    background: linear-gradient(20deg, #ea5413, #920783);
 
-    color: white;
 
-    font-size: 1.1rem;
 
-    box-shadow: 1px 1px 5px 1px rgb(207, 207, 207, 0.53);
 
+  border: none;
 
+  outline: none;
 
+  border-radius: 3rem;
 
+  margin-top: 0.5rem;
 
+  padding: 0.6rem 1.5rem;
 
+  background: linear-gradient(20deg, #ea5413, #920783);
 
+  color: white;
 
+  font-size: 1.1rem;
 
+  box-shadow: 1px 1px 5px 1px rgba(207, 207, 207, 0.53);
 
 }
 
 }
 
 
 
 .btns-dark {
 
 .btns-dark {
 
-    text-decoration: none;
 
-    color: white;
 
-    border: 1px solid #ea5413;
 
-    padding: 0.6rem 1.5rem;
 
-    outline: none;
 
-    background-color: #ea5413;
 
-    margin-top: 0.5rem;
 
-    border-radius: 3rem;
 
-    font-size: 1.1rem;
 
-    box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
 
+  text-decoration: none;
 
+  color: white;
 
+  border: 1px solid #ea5413;
 
+  padding: 0.6rem 1.5rem;
 
+  outline: none;
 
+  background-color: #ea5413;
 
+  margin-top: 0.5rem;
 
+  border-radius: 3rem;
 
+  font-size: 1.1rem;
 
+  box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
 
 }
 
 }
 
 
 
 .loaded {
 
 .loaded {
 
-    box-shadow: 0 4px 8px 0 rgb(53, 105, 128, 0.3), 0 6px 20px 0 rgb(165, 200, 213, 0.41);
 
-    margin-bottom: 4rem;
 
+  box-shadow: 0 4px 8px 0 rgba(53, 105, 128, 0.3), 0 6px 20px 0 rgba(165, 200, 213, 0.41);
 
+  margin-bottom: 4rem;
 
 }
 
 }
 
+
 
 .pageForm__title {
 
 .pageForm__title {
 
-    padding: 0 0 0 40px;
 
-    background-image: url(/imgs/dm/accept.png);
 
-    background-position: 0 0;
 
-    background-repeat: no-repeat;
 
-    background-size: 30px auto;
 
+  padding: 0 0 0 40px;
 
+  background-image: url(/imgs/dm/accept.png);
 
+  background-position: 0 0;
 
+  background-repeat: no-repeat;
 
+  background-size: 30px auto;
 
 }
 
 }
 
+
 
 .pageForm__txt {
 
 .pageForm__txt {
 
-    padding-left: 40px;
 
+  padding-left: 40px;
 
 }
 
 }
 
+
 
 .pageForm__notice {
 
 .pageForm__notice {
 
-    padding-left: 40px;
 
-    color: grey;
 
-    margin-top: 50px;
 
+  padding-left: 40px;
 
+  color: grey;
 
+  margin-top: 50px;
 
 }
 
 }
 
+
 
 .pageForm__p {
 
 .pageForm__p {
 
-    padding: 40px;
 
+  padding: 40px;
 
 }
 
 }
 
+
 
 .btn__detailForm {
 
 .btn__detailForm {
 
-    background-color: transparent;
 
-    border: none;
 
-    outline: none;
 
-    color: #ff892e;
 
-    padding: 0 0;
 
-    padding-bottom: 0.1rem;
 
-    margin-bottom: 0.8rem;
 
-    display: inline-block;
 
-    border-bottom: 1px dotted #ff892e;
 
-    transition: all 0.4s;
 
-    text-decoration: none;
 
+  background-color: transparent;
 
+  border: none;
 
+  outline: none;
 
+  color: #ff892e;
 
+  padding: 0 0;
 
+  padding-bottom: 0.1rem;
 
+  margin-bottom: 0.8rem;
 
+  display: inline-block;
 
+  border-bottom: 1px dotted #ff892e;
 
+  transition: all 0.4s;
 
+  text-decoration: none;
 
 }
 
 }
 
+
 
 .btn__detailForm:hover {
 
 .btn__detailForm:hover {
 
-    transform: translate(2px, 2px);
 
-    text-decoration: none;
 
-    color: #ff892e;
 
+  transform: translate(2px, 2px);
 
+  text-decoration: none;
 
+  color: #ff892e;
 
 }
 
 }
 
+
 
 @media (max-width: 1300px) {
 
 @media (max-width: 1300px) {
 
-    .header__right__video {
 
-        position: absolute;
 
-        width: calc(80% - 4%);
 
-    }
 
+  .header__right__video {
 
+    position: absolute;
 
+    width: 76%;
 
+  }
 
 }
 
 }
 
-
 
 @media (max-width: 992px) {
 
 @media (max-width: 992px) {
 
-    .header__title {
 
-        font-size: 3rem;
 
-    }
 
-    .cntheader .header__title {
 
-        font-size: 2.2rem;
 
-    }
 
-    .header {
 
-        padding-top: 4rem;
 
-        height: 50vh;
 
-    }
 
-    .header__right {
 
-        height: 40vh;
 
-    }
 
-    .header__right__magnifier {
 
-        right: -2.5rem;
 
-        bottom: 1rem;
 
-    }
 
-    .header__sub {
 
-        font-size: 1.3rem;
 
-    }
 
-    .header__sub::before,
 
-    .header__sub::after {
 
-        width: 8%;
 
-    }
 
-    .header__sub::before {
 
-        left: 30%;
 
-    }
 
-    .header__sub::after {
 
-        left: 62%;
 
-    }
 
-    .header__form__input {
 
-        font-size: 0.9rem;
 
-    }
 
-    .category__btngrp {
 
-        padding: 0;
 
-    }
 
-    .category__btn {
 
-        padding: 0.3rem 1.5rem;
 
-        font-size: 1.2rem;
 
-    }
 
-    .ctncategory__btn {
 
-        padding: 0.2rem 1rem;
 
-        font-size: 1rem;
 
-    }
 
-    .top3 .row {
 
-        padding: 0;
 
-    }
 
-    .card__rank {
 
-        padding: 0.8rem 1rem;
 
-    }
 
-    .top3__num {
 
-        left: 0.6rem;
 
-        top: -2.5rem;
 
-        font-size: 4rem;
 
-    }
 
-    .card__rank__word {
 
-        margin-left: 1.5rem;
 
-        font-size: 1.2rem;
 
-    }
 
-    .card__rank hr {
 
-        margin-top: 8px;
 
-        margin-bottom: 8px;
 
-    }
 
-    .top20 .row {
 
-        padding: 0;
 
-    }
 
-    .top20__num {
 
-        font-size: 2.1rem;
 
-        width: 1.6rem;
 
-    }
 
-    .container__footer {
 
-        width: 95vw;
 
-    }
 
-    .header__form {
 
-        width: 85%;
 
-        position: relative;
 
-    }
 
-    .header__form__input {
 
-        margin-left: 0;
 
-        width: 100%;
 
-    }
 
-    .header__form__sub {
 
-        transform: none;
 
-        position: absolute;
 
-        right: 0;
 
-        top: 0;
 
-    }
 
-    .header__right__linecir {
 
-        bottom: 0;
 
-    }
 
-    .cntheader__sub {
 
-        font-size: 1.2rem;
 
-    }
 
-
 
-    .cntheader__sub::before {
 
-        left: 13%;
 
-    }
 
-
 
-    .cntheader__sub::after {
 
-        left: 72%;
 
-    }
 
-    .toparticle__title img {
 
-        position: absolute;
 
-        width: 90px;
 
-        right: -2rem;
 
-        top: -2rem;
 
-    }
 
-    .toparticle__top {
 
-        font-size: 1.7rem;
 
-    }
 
-    .fb__fr {
 
-        width: 100%;
 
-    }
 
-    .cntsubscribe__form {
 
-        width: 100%;
 
-    }
 
-    .ai-training__action__box {
 
-        flex-direction: column;
 
-    }
 
+  .header__title {
 
+    font-size: 3rem;
 
+  }
 
+  .cntheader .header__title {
 
+    font-size: 2.2rem;
 
+  }
 
+  .header {
 
+    padding-top: 4rem;
 
+    height: 50vh;
 
+  }
 
+  .header__right {
 
+    height: 40vh;
 
+  }
 
+  .header__right__magnifier {
 
+    right: -2.5rem;
 
+    bottom: 1rem;
 
+  }
 
+  .header__sub {
 
+    font-size: 1.3rem;
 
+  }
 
+  .header__sub::before,
 
+.header__sub::after {
 
+    width: 8%;
 
+  }
 
+  .header__sub::before {
 
+    left: 30%;
 
+  }
 
+  .header__sub::after {
 
+    left: 62%;
 
+  }
 
+  .header__form__input {
 
+    font-size: 0.9rem;
 
+  }
 
+  .category__btngrp {
 
+    padding: 0;
 
+  }
 
+  .category__btn {
 
+    padding: 0.3rem 1.5rem;
 
+    font-size: 1.2rem;
 
+  }
 
+  .ctncategory__btn {
 
+    padding: 0.2rem 1rem;
 
+    font-size: 1rem;
 
+  }
 
+  .top3 .row {
 
+    padding: 0;
 
+  }
 
+  .card__rank {
 
+    padding: 0.8rem 1rem;
 
+  }
 
+  .top3__num {
 
+    left: 0.6rem;
 
+    top: -2.5rem;
 
+    font-size: 4rem;
 
+  }
 
+  .card__rank__word {
 
+    margin-left: 1.5rem;
 
+    font-size: 1.2rem;
 
+  }
 
+  .card__rank hr {
 
+    margin-top: 8px;
 
+    margin-bottom: 8px;
 
+  }
 
+  .top20 .row {
 
+    padding: 0;
 
+  }
 
+  .top20__num {
 
+    font-size: 2.1rem;
 
+    width: 1.6rem;
 
+  }
 
+  .container__footer {
 
+    width: 95vw;
 
+  }
 
+  .header__form {
 
+    width: 85%;
 
+    position: relative;
 
+  }
 
+  .header__form__input {
 
+    margin-left: 0;
 
+    width: 100%;
 
+  }
 
+  .header__form__sub {
 
+    transform: none;
 
+    position: absolute;
 
+    right: 0;
 
+    top: 0;
 
+  }
 
+  .header__right__linecir {
 
+    bottom: 0;
 
+  }
 
+  .cntheader__sub {
 
+    font-size: 1.2rem;
 
+  }
 
+  .cntheader__sub::before {
 
+    left: 13%;
 
+  }
 
+  .cntheader__sub::after {
 
+    left: 72%;
 
+  }
 
+  .toparticle__title img {
 
+    position: absolute;
 
+    width: 90px;
 
+    right: -2rem;
 
+    top: -2rem;
 
+  }
 
+  .toparticle__top {
 
+    font-size: 1.7rem;
 
+  }
 
+  .fb__fr {
 
+    width: 100%;
 
+  }
 
+  .cntsubscribe__form {
 
+    width: 100%;
 
+  }
 
+  .ai-training__action__box {
 
+    flex-direction: column;
 
+  }
 
 }
 
 }
 
-
 
 @media (max-width: 767px) {
 
 @media (max-width: 767px) {
 
-    .header {
 
-        height: 70vh;
 
-    }
 
-    .header .col-md-5 {
 
-        margin-bottom: 3rem;
 
-    }
 
-    .header__right__bubble {
 
-        width: 15%;
 
-    }
 
-    .header__right__magnifier {
 
-        right: 4rem;
 
-        bottom: 1rem;
 
-    }
 
-    .category {
 
-        padding-top: 4rem;
 
-    }
 
-    .category.dm__description {
 
-        padding-top: 4rem;
 
-        padding-left: 0;
 
-        padding-right: 0;
 
-        margin-top: 4.5rem;
 
-    }
 
-    .category.mt-xl {
 
-        margin-top: 8.5rem;
 
-    }
 
-    .category.dm__description h5 {
 
-        padding-left: 1rem;
 
-        padding-right: 1rem;
 
-    }
 
-    .top3 {
 
-        padding-bottom: 2rem;
 
-    }
 
-    .top3 .col-md-4 {
 
-        margin-bottom: 1.5rem;
 
-    }
 
-    .top3 .col-md-4:nth-of-type(3) {
 
-        margin-bottom: 0;
 
-    }
 
-    .card__rank {
 
-        margin-bottom: 1.5rem;
 
-    }
 
-    .row-right {
 
-        margin-top: 2rem;
 
-    }
 
-    .cntheader {
 
-        padding-bottom: 0rem;
 
-    }
 
-    .header__right__video {
 
-        position: absolute;
 
-        width: calc(80% - 10%);
 
-        left: 2.3rem;
 
-        top: 1.5rem;
 
-    }
 
-    .img-block-list {
 
-        padding: 2rem 1.5rem;
 
-    }
 
-    .ai-training__card .card-img-top {
 
-        height: 50vh;
 
-    }
 
+  .header {
 
+    height: 70vh;
 
+  }
 
+  .header .col-md-5 {
 
+    margin-bottom: 3rem;
 
+  }
 
+  .header__right__bubble {
 
+    width: 15%;
 
+  }
 
+  .header__right__magnifier {
 
+    right: 4rem;
 
+    bottom: 1rem;
 
+  }
 
+  .category {
 
+    padding-top: 4rem;
 
+  }
 
+  .category.dm__description {
 
+    padding-top: 4rem;
 
+    padding-left: 0;
 
+    padding-right: 0;
 
+    margin-top: 4.5rem;
 
+  }
 
+  .category.mt-xl {
 
+    margin-top: 8.5rem;
 
+  }
 
+  .category.dm__description h5 {
 
+    padding-left: 1rem;
 
+    padding-right: 1rem;
 
+  }
 
+  .top3 {
 
+    padding-bottom: 2rem;
 
+  }
 
+  .top3 .col-md-4 {
 
+    margin-bottom: 1.5rem;
 
+  }
 
+  .top3 .col-md-4:nth-of-type(3) {
 
+    margin-bottom: 0;
 
+  }
 
+  .card__rank {
 
+    margin-bottom: 1.5rem;
 
+  }
 
+  .row-right {
 
+    margin-top: 2rem;
 
+  }
 
+  .cntheader {
 
+    padding-bottom: 0rem;
 
+  }
 
+  .header__right__video {
 
+    position: absolute;
 
+    width: 70%;
 
+    left: 2.3rem;
 
+    top: 1.5rem;
 
+  }
 
+  .img-block-list {
 
+    padding: 2rem 1.5rem;
 
+  }
 
+  .ai-training__card .card-img-top {
 
+    height: 50vh;
 
+  }
 
 }
 
 }
 
-
 
 @media (max-width: 576px) {
 
 @media (max-width: 576px) {
 
-    .header__title {
 
-        font-size: 2.5rem;
 
-    }
 
-    .header {
 
-        padding-top: 3rem;
 
-        height: 63vh;
 
-        padding-bottom: 0rem;
 
-    }
 
-    .header.ai-training {
 
-        height: 80vh;
 
-    }
 
-    .header__right {
 
-        height: 30vh;
 
-    }
 
-    .header__right__magnifier {
 
-        right: 0rem;
 
-        bottom: 1.5rem;
 
-    }
 
-    .category__btn {
 
-        padding: 0.2rem 1rem;
 
-        font-size: 1rem;
 
-    }
 
-    .category {
 
-        padding: 1rem;
 
-    }
 
-    .footer_img {
 
-        height: 50px;
 
-    }
 
-    .footer {
 
-        font-size: 0.9rem;
 
-    }
 
-    .pageForm__p {
 
-        padding: 15px;
 
-    }
 
-    .pageForm {
 
-        width: 95%;
 
-    }
 
+  .header__title {
 
+    font-size: 2.5rem;
 
+  }
 
+  .header {
 
+    padding-top: 3rem;
 
+    height: 63vh;
 
+    padding-bottom: 0rem;
 
+  }
 
+  .header.ai-training {
 
+    height: 80vh;
 
+  }
 
+  .header__right {
 
+    height: 30vh;
 
+  }
 
+  .header__right__magnifier {
 
+    right: 0rem;
 
+    bottom: 1.5rem;
 
+  }
 
+  .category__btn {
 
+    padding: 0.2rem 1rem;
 
+    font-size: 1rem;
 
+  }
 
+  .category {
 
+    padding: 1rem;
 
+  }
 
+  .footer_img {
 
+    height: 50px;
 
+  }
 
+  .footer {
 
+    font-size: 0.9rem;
 
+  }
 
+  .pageForm__p {
 
+    padding: 15px;
 
+  }
 
+  .pageForm {
 
+    width: 95%;
 
+  }
 
 }
 
 }
 
-
 
 @media (max-width: 480px) {
 
 @media (max-width: 480px) {
 
-    .ctncategory__btn {
 
-        margin-top: 0.6rem;
 
-    }
 
-    .header__right__video {
 
-        position: absolute;
 
-        width: calc(80% - 5%);
 
-        left: 2.1rem;
 
-        top: 1.3rem;
 
-    }
 
+  .ctncategory__btn {
 
+    margin-top: 0.6rem;
 
+  }
 
+  .header__right__video {
 
+    position: absolute;
 
+    width: 75%;
 
+    left: 2.1rem;
 
+    top: 1.3rem;
 
+  }
 
 }
 
 }
 
-
 
 /* blog-traffic Start */
 
 /* blog-traffic Start */
 
-
 
 .blog-traffic .header__right {
 
 .blog-traffic .header__right {
 
-    width: 100%;
 
-    height: 53vw;
 
-    position: relative;
 
-    top: -75px;
 
-    right: -70px;
 
-    z-index: -1;
 
-    background-size: cover;
 
+  width: 100%;
 
+  height: 50vw;
 
+  position: relative;
 
+  top: -100px;
 
+  right: -70px;
 
+  z-index: -1;
 
+  background-size: cover;
 
 }
 
 }
 
 
 
 @media (max-width: 1200px) {
 
 @media (max-width: 1200px) {
 
-    .blog-traffic .header__right {
 
-        height: 60vw;
 
-        right: 0px;
 
-    }
 
+  .blog-traffic .header__right {
 
+    height: 60vw;
 
+    right: 0px;
 
+  }
 
 }
 
 }
 
-
 
 @media (max-width: 767px) {
 
 @media (max-width: 767px) {
 
-    .blog-traffic .header__right {
 
-        width: 80%;
 
-        height: 75vw;
 
-        top: 0px;
 
-        right: 0px;
 
-    }
 
+  .blog-traffic .header__right {
 
+    width: 80%;
 
+    height: 75vw;
 
+    top: 0px;
 
+    right: 0px;
 
+  }
 
 }
 
 }
 
-
 
 @media (max-width: 414px) {
 
 @media (max-width: 414px) {
 
-    .blog-traffic .header__right {
 
-        width: 100%;
 
-        height: 95vw;
 
-        top: 0px;
 
-        right: 5px;
 
-    }
 
+  .blog-traffic .header__right {
 
+    width: 100%;
 
+    height: 95vw;
 
+    top: 0px;
 
+    right: 5px;
 
+  }
 
 }
 
 }
 
-
 
 .blog-traffic .header__lefttop {
 
 .blog-traffic .header__lefttop {
 
-    width: 100vw;
 
-    height: auto;
 
-    top: -120px;
 
+  width: 100vw;
 
+  height: auto;
 
+  top: -120px;
 
 }
 
 }
 
 
 
 @media (max-width: 767px) {
 
 @media (max-width: 767px) {
 
-    .blog-traffic .header__lefttop {
 
-        width: 150vw;
 
-        height: auto;
 
-    }
 
+  .blog-traffic .header__lefttop {
 
+    width: 150vw;
 
+    height: auto;
 
+  }
 
 }
 
 }
 
-
 
 .blog-traffic .header__title {
 
 .blog-traffic .header__title {
 
-    font-size: 2.5rem;
 
-    line-height: 65px;
 
-    font-weight: 600;
 
+  font-size: 2.5rem;
 
+  line-height: 65px;
 
+  font-weight: 600;
 
 }
 
 }
 
 
 
 @media (max-width: 768px) {
 
 @media (max-width: 768px) {
 
-    .blog-traffic .header__title {
 
-        font-size: 2.2rem;
 
-    }
 
+  .blog-traffic .header__title {
 
+    font-size: 2.2rem;
 
+  }
 
 }
 
 }
 
-
 
 .blog-traffic .category {
 
 .blog-traffic .category {
 
-    padding: 0;
 
+  padding: 0;
 
 }
 
 }
 
 
 
 .blog-traffic .category.dm__description {
 
 .blog-traffic .category.dm__description {
 
-    padding: 0;
 
+  padding: 0;
 
 }
 
 }
 
 
 
 .blog-traffic .category__sub_h2::after {
 
 .blog-traffic .category__sub_h2::after {
 
-    width: 3rem;
 
-    border-bottom: 10px solid #ea5413;
 
-    margin-top: 15px;
 
+  width: 3rem;
 
+  border-bottom: 10px solid #ea5413;
 
+  margin-top: 15px;
 
 }
 
 }
 
 
 
 .blog-traffic ul {
 
 .blog-traffic ul {
 
-    list-style: none;
 
+  list-style: none;
 
 }
 
 }
 
 
 
 /* .blog-traffic .dm__description {
 
 /* .blog-traffic .dm__description {
 
     margin-top: 3rem;
 
     margin-top: 3rem;
 
 } */
 
 } */
 
-
 
 @media (max-width: 1800px) {
 
 @media (max-width: 1800px) {
 
-    .blog-traffic .dm__description {
 
-        margin-top: 5rem;
 
-    }
 
+  .blog-traffic .dm__description {
 
+    margin-top: 5rem;
 
+  }
 
 }
 
 }
 
-
 
 @media (max-width: 1400px) {
 
 @media (max-width: 1400px) {
 
-    .blog-traffic .dm__description {
 
-        margin-top: -5rem;
 
-    }
 
+  .blog-traffic .dm__description {
 
+    margin-top: -5rem;
 
+  }
 
 }
 
 }
 
-
 
 @media (max-width: 1200px) {
 
 @media (max-width: 1200px) {
 
-    .blog-traffic .dm__description {
 
-        margin-top: 0rem;
 
-    }
 
+  .blog-traffic .dm__description {
 
+    margin-top: 0rem;
 
+  }
 
 }
 
 }
 
-
 
 @media (max-width: 991px) {
 
 @media (max-width: 991px) {
 
-    .blog-traffic .dm__description {
 
-        margin-top: -8rem;
 
-    }
 
+  .blog-traffic .dm__description {
 
+    margin-top: -8rem;
 
+  }
 
 }
 
 }
 
-
 
 @media (max-width: 767px) {
 
 @media (max-width: 767px) {
 
-    .blog-traffic .dm__description {
 
-        margin-top: 11rem;
 
-    }
 
+  .blog-traffic .dm__description {
 
+    margin-top: 11rem;
 
+  }
 
 }
 
 }
 
-
 
 @media (max-width: 414px) {
 
 @media (max-width: 414px) {
 
-    .blog-traffic .dm__description {
 
-        margin-top: 5rem;
 
-    }
 
+  .blog-traffic .dm__description {
 
+    margin-top: 5rem;
 
+  }
 
 }
 
 }
 
-
 
 @media (max-width: 389px) {
 
 @media (max-width: 389px) {
 
-    .blog-traffic .dm__description {
 
-        margin-top: 10rem;
 
-    }
 
+  .blog-traffic .dm__description {
 
+    margin-top: 10rem;
 
+  }
 
 }
 
 }
 
-
 
 .blog-traffic .img-block__img {
 
 .blog-traffic .img-block__img {
 
-    width: 12%;
 
-    object-fit: contain;
 
-    image-rendering: -webkit-optimize-contrast;
 
-    position: relative;
 
-    top: -30px;
 
+  width: 12%;
 
+  -o-object-fit: contain;
 
+     object-fit: contain;
 
+  image-rendering: -webkit-optimize-contrast;
 
+  position: relative;
 
+  top: -30px;
 
 }
 
 }
 
 
 
 @media (max-width: 1200px) {
 
 @media (max-width: 1200px) {
 
-    .blog-traffic .img-block__img {
 
-        top: -10px;
 
-    }
 
-    .blog-traffic .img-first {
 
-        top: 0;
 
-    }
 
+  .blog-traffic .img-block__img {
 
+    top: -10px;
 
+  }
 
+  .blog-traffic .img-first {
 
+    top: 0;
 
+  }
 
 }
 
 }
 
-
 
 @media (max-width: 991px) {
 
 @media (max-width: 991px) {
 
-    .blog-traffic .img-block__img {
 
-        width: 15%;
 
-    }
 
+  .blog-traffic .img-block__img {
 
+    width: 15%;
 
+  }
 
 }
 
 }
 
-
 
 @media (max-width: 767px) {
 
 @media (max-width: 767px) {
 
-    .blog-traffic .img-block__img {
 
-        width: 20%;
 
-        top: 5px;
 
-    }
 
-    .blog-traffic .img-first {
 
-        top: 15px;
 
-    }
 
+  .blog-traffic .img-block__img {
 
+    width: 20%;
 
+    top: 5px;
 
+  }
 
+  .blog-traffic .img-first {
 
+    top: 15px;
 
+  }
 
 }
 
 }
 
-
 
 @media (max-width: 490px) {
 
 @media (max-width: 490px) {
 
-    .blog-traffic .img-block__img {
 
-        top: 15px;
 
-    }
 
-    .blog-traffic .img-first {
 
-        top: 40px;
 
-    }
 
+  .blog-traffic .img-block__img {
 
+    top: 15px;
 
+  }
 
+  .blog-traffic .img-first {
 
+    top: 40px;
 
+  }
 
 }
 
 }
 
-
 
 @media (max-width: 414px) {
 
 @media (max-width: 414px) {
 
-    .blog-traffic .img-block__img {
 
-        top: 22px;
 
-    }
 
+  .blog-traffic .img-block__img {
 
+    top: 22px;
 
+  }
 
 }
 
 }
 
-
 
 @media (max-width: 575px) {
 
 @media (max-width: 575px) {
 
-    .blog-traffic .category {
 
-        padding: 0 10px;
 
-    }
 
+  .blog-traffic .category {
 
+    padding: 0 10px;
 
+  }
 
 }
 
 }
 
-
 
 .blog-traffic .category h4 {
 
 .blog-traffic .category h4 {
 
-    font-size: 2rem;
 
+  font-size: 2rem;
 
 }
 
 }
 
 
 
 .blog-traffic .category h4,
 
 .blog-traffic .category h4,
 
 .blog-traffic .category .sub-title {
 
 .blog-traffic .category .sub-title {
 
-    margin: 0;
 
-    color: #f5ab1b;
 
-    font-weight: bold;
 
+  margin: 0;
 
+  color: #f5ab1b;
 
+  font-weight: bold;
 
 }
 
 }
 
 
 
 .blog-traffic .category p {
 
 .blog-traffic .category p {
 
-    margin: 30px 0;
 
+  margin: 30px 0;
 
 }
 
 }
 
 
 
 .blog-traffic .category ul {
 
 .blog-traffic .category ul {
 
-    padding: 0;
 
+  padding: 0;
 
 }
 
 }
 
 
 
 .blog-traffic .category p,
 
 .blog-traffic .category p,
 
 .blog-traffic .category li {
 
 .blog-traffic .category li {
 
-    line-height: 30px;
 
+  line-height: 30px;
 
 }
 
 }
 
 
 
 .blog-traffic .add-img {
 
 .blog-traffic .add-img {
 
-    width: 130px;
 
-    margin: 10px auto 0;
 
-    image-rendering: -webkit-optimize-contrast;
 
+  width: 130px;
 
+  margin: 10px auto 0;
 
+  image-rendering: -webkit-optimize-contrast;
 
 }
 
 }
 
 
 
 @media (max-width: 991px) {
 
 @media (max-width: 991px) {
 
-    .blog-traffic .add-img {
 
-        margin: 0 auto;
 
-    }
 
+  .blog-traffic .add-img {
 
+    margin: 0 auto;
 
+  }
 
 }
 
 }
 
-
 
 @media (max-width: 767px) {
 
 @media (max-width: 767px) {
 
-    .blog-traffic .add-img {
 
-        margin: 10px auto -25px;
 
-    }
 
+  .blog-traffic .add-img {
 
+    margin: 10px auto -25px;
 
+  }
 
 }
 
 }
 
-
 
 /* blog-traffic End */
 
 /* blog-traffic End */
 
+/* youtube-views Start */
 
+#youtube-views {
 
+  overflow-x: hidden;
 
+}
 
+#youtube-views h5 {
 
+  line-height: 32px;
 
+}
 
+#youtube-views .title {
 
+  color: #ea5413;
 
+  font-size: 1.3rem;
 
+  font-weight: bold;
 
+}
 
+#youtube-views .header__right {
 
+  background-position: center;
 
+}
 
+#youtube-views .card-group {
 
+  margin-top: 50px;
 
+}
 
+#youtube-views .card-group .card {
 
+  box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
 
+}
 
+#youtube-views .card-group .card ul {
 
+  padding: 0;
 
+  list-style: none;
 
+}
 
+#youtube-views .card-group .card ul img {
 
+  margin-bottom: 1px;
 
+}
 
+#youtube-views .card-group .card .price {
 
+  width: 100%;
 
+  padding: 10px 0;
 
+  font-size: 28px;
 
+  font-weight: bold;
 
+  text-align: center;
 
+  color: #fff;
 
+  background-color: #ea5413;
 
+  letter-spacing: 2px;
 
+}
 
+#youtube-views .card-group .card .buy-btn {
 
+  padding: 10px 20px;
 
+  color: #fff;
 
+  border: 1px solid transparent;
 
+  border-radius: 50px;
 
+  background: #ea5413;
 
+  transition: all 0.3s;
 
+}
 
+#youtube-views .card-group .card .buy-btn:hover {
 
+  color: #ea5413;
 
+  border: 1px solid #ea5413;
 
+  background: #fff;
 
+}
 
+#youtube-views .direction-list {
 
+  margin-top: 100px;
 
+}
 
+#youtube-views .direction-list img {
 
+  width: 50px;
 
+  -o-object-fit: contain;
 
+     object-fit: contain;
 
+  filter: invert(33%) sepia(55%) saturate(2232%) hue-rotate(357deg) brightness(102%) contrast(89%);
 
+}
 
+#youtube-views .direction-list .content > div {
 
+  margin-bottom: 40px;
 
+  padding: 0px 15px;
 
+  border-left: 1px solid rgba(0, 0, 0, 0.125);
 
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
 
+}
 
+#youtube-views .direction-list section h5 {
 
+  margin: 0;
 
+  font-size: 18px;
 
+  font-weight: bold;
 
+}
 
+#youtube-views .direction-list section p {
 
+  font-size: 14px;
 
+}
 
+#youtube-views .accordion-button {
 
+  padding: 20px;
 
+}
 
+#youtube-views .accordion-button:not(.collapsed) {
 
+  color: #ea5413 !important;
 
+  background-color: #ffebe2 !important;
 
+}
 
+#youtube-views button:focus:not(:focus-visible) {
 
+  box-shadow: none !important;
 
+}
 
+#youtube-views .accordion-button:not(.collapsed)::after {
 
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ea5413'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 
+}
 
+@media (max-width: 767px) {
 
+  #youtube-views .category.dm__description {
 
+    padding-top: 6rem;
 
+  }
 
+}
 
+
 
+/* youtube-views End *//*# sourceMappingURL=style.css.map */

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


+ 1199 - 0
static/css/style.scss
View File 

@@ -0,0 +1,1199 @@
 
+* {
 
+  letter-spacing: 1px;
 
+}
 
+
 
+.navbar {
 
+  box-shadow: 0 2px 10px 2px rgb(204, 204, 204);
 
+  background-color: white;
 
+  width: 100%;
 
+}
 
+
 
+.navbar .navbar-collapse {
 
+  flex-grow: 0;
 
+}
 
+
 
+.header {
 
+  margin-top: 50px;
 
+  padding-top: 6.5rem;
 
+  height: 75vh;
 
+  position: relative;
 
+  padding-bottom: 3rem;
 
+}
 
+
 
+.header__lefttop {
 
+  position: absolute;
 
+  left: 0;
 
+  top: 0;
 
+  z-index: -1;
 
+  width: 350px;
 
+}
 
+
 
+.header__title {
 
+  font-size: 3rem;
 
+  color: #20616d;
 
+  font-weight: 400;
 
+}
 
+
 
+.header__sub {
 
+  color: #38a7bb;
 
+  font-size: 1.5rem;
 
+  font-weight: 300;
 
+  position: relative;
 
+}
 
+
 
+.header__sub::before,
 
+.header__sub::after {
 
+  content: " ";
 
+  position: absolute;
 
+  width: 12%;
 
+  height: 1px;
 
+  background-color: #38a7bb;
 
+  top: 50%;
 
+}
 
+
 
+.header__sub::before {
 
+  left: 28%;
 
+}
 
+
 
+.header__sub::after {
 
+  left: 60%;
 
+}
 
+
 
+.header__form {
 
+  margin: 1rem auto;
 
+  justify-content: center;
 
+}
 
+
 
+.header__form__input {
 
+  border-radius: 10rem;
 
+  padding: 0.4rem 0.8rem;
 
+  width: 60%;
 
+  margin-left: 4.5rem;
 
+}
 
+
 
+.header__form__sub {
 
+  border-radius: 10rem;
 
+  background-color: #fca25e;
 
+  color: white;
 
+  border: none;
 
+  width: 5rem;
 
+  transform: translateX(-100%);
 
+  transition: all 0.3s;
 
+}
 
+
 
+.header__form__sub:hover {
 
+  background-color: #ff892e;
 
+}
 
+
 
+.header__right {
 
+  width: 80%;
 
+  height: 50vh;
 
+  background-image: url("../imgs/電腦2.webp");
 
+  background-size: contain;
 
+  background-repeat: no-repeat;
 
+  margin: 0 auto;
 
+  position: relative;
 
+}
 
+
 
+.header__right.header__dm {
 
+  background-image: url("https://i.imgur.com/SOu53ii.jpg");
 
+}
 
+
 
+.header__right__cir {
 
+  width: 60%;
 
+  position: absolute;
 
+  right: 0%;
 
+  top: -5%;
 
+  z-index: -1;
 
+}
 
+
 
+.header__right__video {
 
+  position: absolute;
 
+  width: calc(80% - 10%);
 
+  height: auto;
 
+  left: 3.3rem;
 
+  top: 1.8rem;
 
+}
 
+
 
+.header__right__magnifier {
 
+  position: absolute;
 
+  width: 25%;
 
+  right: 3%;
 
+  bottom: 1%;
 
+}
 
+
 
+.header__right__bubble {
 
+  position: absolute;
 
+  width: 22%;
 
+  top: 0;
 
+  left: 0;
 
+  transform: translate(-60%, -50%);
 
+}
 
+
 
+.header__right__linecir {
 
+  width: 45%;
 
+  position: absolute;
 
+  left: -8%;
 
+  bottom: -3%;
 
+  z-index: -1;
 
+}
 
+
 
+.category {
 
+  padding: 2rem 0rem;
 
+}
 
+
 
+.category.dm__description {
 
+  padding: 2rem 8rem;
 
+}
 
+
 
+.category__sub_h2 {
 
+  position: relative;
 
+}
 
+
 
+.category__sub_h2::after {
 
+  position: absolute;
 
+  content: "";
 
+  width: 4rem;
 
+  height: 1rem;
 
+  border-bottom: 10px solid #ff892e;
 
+  left: 50%;
 
+  top: -1.5rem;
 
+  transform: translateX(-50%);
 
+}
 
+
 
+.category__btngrp {
 
+  padding: 0 8rem;
 
+}
 
+
 
+.category__btn {
 
+  background-color: #a7d9e2;
 
+  border: none;
 
+  border-radius: 5rem;
 
+  outline: none;
 
+  color: white;
 
+  font-size: 1.3rem;
 
+  padding: 0.4rem 2rem;
 
+  text-decoration: none;
 
+}
 
+
 
+.category__btn.active {
 
+  background-color: #38a7bb;
 
+  text-decoration: none;
 
+  color: white;
 
+}
 
+
 
+.card__rank {
 
+  border: 1px solid #cecece;
 
+  box-shadow: 1px 1px 5px 1px rgb(211, 211, 211);
 
+  position: relative;
 
+  padding: 1rem 1.5rem;
 
+}
 
+
 
+.top20 .card__rank {
 
+  margin-bottom: 1.5rem;
 
+}
 
+
 
+.top3 {
 
+  padding: 3rem 0rem;
 
+  padding-bottom: 5rem;
 
+  position: relative;
 
+}
 
+
 
+.top3 .row {
 
+  padding: 0rem 4rem;
 
+}
 
+
 
+.top3 .backfill {
 
+  position: absolute;
 
+  width: 100%;
 
+  height: 100px;
 
+  background-color: #ffebe8;
 
+  left: 0;
 
+  right: 0;
 
+  top: 7rem;
 
+}
 
+
 
+.top3__num {
 
+  color: #fca25e;
 
+  font-size: 5.8rem;
 
+  font-family: "Trebuchet MS";
 
+  position: absolute;
 
+  left: 1rem;
 
+  top: -3.5rem;
 
+  font-weight: 300;
 
+}
 
+
 
+.card__rank__word {
 
+  color: #20616d;
 
+  margin-left: 3rem;
 
+  font-size: 1.8rem;
 
+  font-weight: 400;
 
+}
 
+
 
+.card__rank__goto {
 
+  text-align: right;
 
+}
 
+
 
+.card__rank__link {
 
+  color: #38a7bb;
 
+  text-decoration: none;
 
+  font-weight: 400;
 
+}
 
+.card__rank__link:hover {
 
+  color: #19879b;
 
+}
 
+
 
+.top20 {
 
+  padding-bottom: 5rem;
 
+}
 
+
 
+.top20 .row {
 
+  padding: 0rem 4rem;
 
+}
 
+
 
+.top20 .card__rank__word {
 
+  margin-left: 0;
 
+}
 
+.top20__num {
 
+  color: #fca25e;
 
+  font-size: 2.5rem;
 
+  font-family: "Trebuchet MS";
 
+  font-weight: 300;
 
+  display: inline-block;
 
+  width: 3rem;
 
+}
 
+
 
+.footer {
 
+  background-color: #555555;
 
+  padding: 50px 0;
 
+  color: #999999;
 
+}
 
+
 
+.footer h4 {
 
+  text-transform: uppercase;
 
+  color: white;
 
+  font-size: 14px;
 
+  font-weight: 800;
 
+}
 
+
 
+.footer__btn__text {
 
+  font-size: 1.3rem;
 
+  color: white;
 
+}
 
+
 
+.footer .btn {
 
+  border: 2px solid #38a7bb;
 
+  color: #38a7bb;
 
+  text-decoration: none;
 
+}
 
+
 
+.followus__btn {
 
+  text-decoration: none;
 
+  color: white;
 
+}
 
+
 
+.followus__btn:hover {
 
+  color: #38a7bb;
 
+}
 
+
 
+.footer .btn:hover {
 
+  color: white;
 
+  background-color: #38a7bb;
 
+}
 
+
 
+.followus__txt {
 
+  display: inline-block;
 
+  margin-right: 1rem;
 
+  color: white;
 
+  font-weight: 600;
 
+}
 
+
 
+.footer_img {
 
+  height: 60px;
 
+}
 
+
 
+/* content page */
 
+
 
+.cntheader {
 
+  margin-top: 81px;
 
+  padding: 4rem 0;
 
+  position: relative;
 
+  padding-bottom: 2rem;
 
+}
 
+
 
+.cntheader__sub {
 
+  color: #38a7bb;
 
+  font-size: 1.5rem;
 
+  font-weight: 300;
 
+  position: relative;
 
+}
 
+
 
+.cntheader__sub::before,
 
+.cntheader__sub::after {
 
+  content: " ";
 
+  position: absolute;
 
+  width: 15%;
 
+  height: 1px;
 
+  background-color: #38a7bb;
 
+  top: 50%;
 
+}
 
+
 
+.cntheader__sub::before {
 
+  left: 18%;
 
+}
 
+
 
+.cntheader__sub::after {
 
+  left: 67%;
 
+}
 
+
 
+.cntheader .category__btngrp {
 
+  padding: 0 4rem;
 
+}
 
+
 
+.card__art {
 
+  padding: 1rem;
 
+  border: 1px solid #20616d;
 
+  border-radius: 1rem;
 
+  margin-bottom: 1rem;
 
+}
 
+
 
+.card__title {
 
+  font-size: 1.8rem;
 
+  font-weight: 400;
 
+}
 
+
 
+.card__text {
 
+  color: #918f8f;
 
+}
 
+
 
+.card__link {
 
+  display: inline-block;
 
+  color: #38a7bb;
 
+  margin-right: 1rem;
 
+  text-decoration: none;
 
+}
 
+
 
+.card__link:hover {
 
+  color: #20616d;
 
+}
 
+
 
+.toparticle {
 
+  border: 1px solid #cecece;
 
+  box-shadow: 1px 2px 3px 1px rgb(224, 224, 224);
 
+}
 
+
 
+.toparticle__title {
 
+  color: white;
 
+  background-color: #38a7bb;
 
+  text-align: center;
 
+  font-size: 1.3rem;
 
+  padding: 0.3rem 0;
 
+  position: relative;
 
+}
 
+
 
+.toparticle__title img {
 
+  position: absolute;
 
+  width: 150px;
 
+  right: -4rem;
 
+  top: -3.5rem;
 
+}
 
+
 
+.toparticle__list {
 
+  padding: 1.5rem;
 
+  padding-top: 0;
 
+  list-style: none;
 
+  padding-bottom: 1rem;
 
+}
 
+
 
+.toparticle__list-item {
 
+  padding: 0.3rem;
 
+  border-bottom: 1px solid #cecece;
 
+  color: #38a7bb;
 
+  position: relative;
 
+}
 
+
 
+.toparticle__list-item:nth-of-type(10) {
 
+  border: none;
 
+}
 
+
 
+.toparticle__list-item a {
 
+  text-decoration: none;
 
+  color: #38a7bb;
 
+}
 
+
 
+.toparticle__num {
 
+  color: #fca25e;
 
+  font-size: 1.8rem;
 
+  font-family: "Trebuchet MS";
 
+  font-weight: 300;
 
+  margin-right: 8px;
 
+}
 
+
 
+.toparticle__top {
 
+  font-size: 2rem;
 
+}
 
+
 
+.toparticle__list-item small {
 
+  position: absolute;
 
+  right: 0;
 
+  top: 45%;
 
+}
 
+
 
+.cntsubscribe {
 
+  text-align: center;
 
+}
 
+
 
+.cntsubscribe__form {
 
+  position: relative;
 
+}
 
+
 
+.cntsubscribe__sub {
 
+  border-radius: 10rem;
 
+  background-color: #fca25e;
 
+  color: white;
 
+  border: none;
 
+  width: 5rem;
 
+  position: absolute;
 
+  right: 0;
 
+  top: 0;
 
+  padding: 0.45rem 0.8rem;
 
+}
 
+
 
+.cntsubscribe__sub:hover {
 
+  background-color: #ff892e;
 
+  color: white;
 
+}
 
+
 
+.cntsubscribe__input {
 
+  border-radius: 10rem;
 
+  padding: 0.4rem 0.8rem;
 
+  width: 100%;
 
+}
 
+
 
+.img-block .img-block__img {
 
+  width: 70%;
 
+}
 
+
 
+.img-block-list {
 
+  padding: 2rem 6rem;
 
+}
 
+
 
+.img-block__linecir {
 
+  position: absolute;
 
+  right: 10%;
 
+  bottom: 5%;
 
+  width: 30%;
 
+  z-index: -1;
 
+}
 
+
 
+.img-block__linecir.left {
 
+  right: -10%;
 
+  bottom: -5%;
 
+}
 
+
 
+.img-block__linecir.right {
 
+  left: -10%;
 
+  bottom: -5%;
 
+}
 
+
 
+.img-block__linecir.left {
 
+  left: -10%;
 
+  bottom: -5%;
 
+}
 
+
 
+.aboutus_img {
 
+  width: 100%;
 
+}
 
+
 
+.aboutus_prize_img {
 
+  border: 1.5rem solid rgb(231, 231, 231);
 
+  border-radius: 1rem;
 
+}
 
+
 
+.header__ai-training__span {
 
+  width: 6rem;
 
+  height: 6rem;
 
+  padding: 1rem;
 
+  display: inline-block;
 
+  font-size: 1.4rem;
 
+  background-color: rgb(255, 255, 159);
 
+  border-radius: 50%;
 
+}
 
+
 
+.ai-training__action {
 
+  border: 3px dashed #ffebe8;
 
+}
 
+
 
+.ai-training__card .card-img-top {
 
+  height: 35vh;
 
+}
 
+
 
+.ai-training__action ul {
 
+  list-style: none;
 
+  line-height: 2rem;
 
+}
 
+
 
+.ai-training__action__box {
 
+  flex-direction: row;
 
+}
 
+
 
+.ai-training__action__btn {
 
+  padding: 1.2rem 3rem;
 
+  border: none;
 
+  outline: none;
 
+  border-radius: 4rem;
 
+  background: #fca25e;
 
+  font-size: 1.5rem;
 
+}
 
+
 
+.ai-training__action__img {
 
+  width: 15rem;
 
+  height: 15rem;
 
+  background-repeat: no-repeat;
 
+  background-position: center;
 
+  background-size: cover;
 
+  border-radius: 50%;
 
+  border: 3px solid #ffdbd6;
 
+}
 
+
 
+.hero-btn {
 
+  border: none;
 
+  outline: none;
 
+  border-radius: 3rem;
 
+  margin-top: 0.5rem;
 
+  padding: 0.6rem 1.5rem;
 
+  background: linear-gradient(20deg, #ea5413, #920783);
 
+  color: white;
 
+  font-size: 1.1rem;
 
+  box-shadow: 1px 1px 5px 1px rgb(207, 207, 207, 0.53);
 
+}
 
+
 
+.btns-dark {
 
+  text-decoration: none;
 
+  color: white;
 
+  border: 1px solid #ea5413;
 
+  padding: 0.6rem 1.5rem;
 
+  outline: none;
 
+  background-color: #ea5413;
 
+  margin-top: 0.5rem;
 
+  border-radius: 3rem;
 
+  font-size: 1.1rem;
 
+  box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
 
+}
 
+
 
+.loaded {
 
+  box-shadow: 0 4px 8px 0 rgb(53, 105, 128, 0.3), 0 6px 20px 0 rgb(165, 200, 213, 0.41);
 
+  margin-bottom: 4rem;
 
+}
 
+.pageForm__title {
 
+  padding: 0 0 0 40px;
 
+  background-image: url(/imgs/dm/accept.png);
 
+  background-position: 0 0;
 
+  background-repeat: no-repeat;
 
+  background-size: 30px auto;
 
+}
 
+.pageForm__txt {
 
+  padding-left: 40px;
 
+}
 
+.pageForm__notice {
 
+  padding-left: 40px;
 
+  color: grey;
 
+  margin-top: 50px;
 
+}
 
+.pageForm__p {
 
+  padding: 40px;
 
+}
 
+.btn__detailForm {
 
+  background-color: transparent;
 
+  border: none;
 
+  outline: none;
 
+  color: #ff892e;
 
+  padding: 0 0;
 
+  padding-bottom: 0.1rem;
 
+  margin-bottom: 0.8rem;
 
+  display: inline-block;
 
+  border-bottom: 1px dotted #ff892e;
 
+  transition: all 0.4s;
 
+  text-decoration: none;
 
+}
 
+.btn__detailForm:hover {
 
+  transform: translate(2px, 2px);
 
+  text-decoration: none;
 
+  color: #ff892e;
 
+}
 
+@media (max-width: 1300px) {
 
+  .header__right__video {
 
+    position: absolute;
 
+    width: calc(80% - 4%);
 
+  }
 
+}
 
+
 
+@media (max-width: 992px) {
 
+  .header__title {
 
+    font-size: 3rem;
 
+  }
 
+  .cntheader .header__title {
 
+    font-size: 2.2rem;
 
+  }
 
+  .header {
 
+    padding-top: 4rem;
 
+    height: 50vh;
 
+  }
 
+  .header__right {
 
+    height: 40vh;
 
+  }
 
+  .header__right__magnifier {
 
+    right: -2.5rem;
 
+    bottom: 1rem;
 
+  }
 
+  .header__sub {
 
+    font-size: 1.3rem;
 
+  }
 
+  .header__sub::before,
 
+  .header__sub::after {
 
+    width: 8%;
 
+  }
 
+  .header__sub::before {
 
+    left: 30%;
 
+  }
 
+  .header__sub::after {
 
+    left: 62%;
 
+  }
 
+  .header__form__input {
 
+    font-size: 0.9rem;
 
+  }
 
+  .category__btngrp {
 
+    padding: 0;
 
+  }
 
+  .category__btn {
 
+    padding: 0.3rem 1.5rem;
 
+    font-size: 1.2rem;
 
+  }
 
+  .ctncategory__btn {
 
+    padding: 0.2rem 1rem;
 
+    font-size: 1rem;
 
+  }
 
+  .top3 .row {
 
+    padding: 0;
 
+  }
 
+  .card__rank {
 
+    padding: 0.8rem 1rem;
 
+  }
 
+  .top3__num {
 
+    left: 0.6rem;
 
+    top: -2.5rem;
 
+    font-size: 4rem;
 
+  }
 
+  .card__rank__word {
 
+    margin-left: 1.5rem;
 
+    font-size: 1.2rem;
 
+  }
 
+  .card__rank hr {
 
+    margin-top: 8px;
 
+    margin-bottom: 8px;
 
+  }
 
+  .top20 .row {
 
+    padding: 0;
 
+  }
 
+  .top20__num {
 
+    font-size: 2.1rem;
 
+    width: 1.6rem;
 
+  }
 
+  .container__footer {
 
+    width: 95vw;
 
+  }
 
+  .header__form {
 
+    width: 85%;
 
+    position: relative;
 
+  }
 
+  .header__form__input {
 
+    margin-left: 0;
 
+    width: 100%;
 
+  }
 
+  .header__form__sub {
 
+    transform: none;
 
+    position: absolute;
 
+    right: 0;
 
+    top: 0;
 
+  }
 
+  .header__right__linecir {
 
+    bottom: 0;
 
+  }
 
+  .cntheader__sub {
 
+    font-size: 1.2rem;
 
+  }
 
+
 
+  .cntheader__sub::before {
 
+    left: 13%;
 
+  }
 
+
 
+  .cntheader__sub::after {
 
+    left: 72%;
 
+  }
 
+  .toparticle__title img {
 
+    position: absolute;
 
+    width: 90px;
 
+    right: -2rem;
 
+    top: -2rem;
 
+  }
 
+  .toparticle__top {
 
+    font-size: 1.7rem;
 
+  }
 
+  .fb__fr {
 
+    width: 100%;
 
+  }
 
+  .cntsubscribe__form {
 
+    width: 100%;
 
+  }
 
+  .ai-training__action__box {
 
+    flex-direction: column;
 
+  }
 
+}
 
+
 
+@media (max-width: 767px) {
 
+  .header {
 
+    height: 70vh;
 
+  }
 
+  .header .col-md-5 {
 
+    margin-bottom: 3rem;
 
+  }
 
+  .header__right__bubble {
 
+    width: 15%;
 
+  }
 
+  .header__right__magnifier {
 
+    right: 4rem;
 
+    bottom: 1rem;
 
+  }
 
+  .category {
 
+    padding-top: 4rem;
 
+  }
 
+  .category.dm__description {
 
+    padding-top: 4rem;
 
+    padding-left: 0;
 
+    padding-right: 0;
 
+    margin-top: 4.5rem;
 
+  }
 
+  .category.mt-xl {
 
+    margin-top: 8.5rem;
 
+  }
 
+  .category.dm__description h5 {
 
+    padding-left: 1rem;
 
+    padding-right: 1rem;
 
+  }
 
+  .top3 {
 
+    padding-bottom: 2rem;
 
+  }
 
+  .top3 .col-md-4 {
 
+    margin-bottom: 1.5rem;
 
+  }
 
+  .top3 .col-md-4:nth-of-type(3) {
 
+    margin-bottom: 0;
 
+  }
 
+  .card__rank {
 
+    margin-bottom: 1.5rem;
 
+  }
 
+  .row-right {
 
+    margin-top: 2rem;
 
+  }
 
+  .cntheader {
 
+    padding-bottom: 0rem;
 
+  }
 
+  .header__right__video {
 
+    position: absolute;
 
+    width: calc(80% - 10%);
 
+    left: 2.3rem;
 
+    top: 1.5rem;
 
+  }
 
+  .img-block-list {
 
+    padding: 2rem 1.5rem;
 
+  }
 
+  .ai-training__card .card-img-top {
 
+    height: 50vh;
 
+  }
 
+}
 
+
 
+@media (max-width: 576px) {
 
+  .header__title {
 
+    font-size: 2.5rem;
 
+  }
 
+  .header {
 
+    padding-top: 3rem;
 
+    height: 63vh;
 
+    padding-bottom: 0rem;
 
+  }
 
+  .header.ai-training {
 
+    height: 80vh;
 
+  }
 
+  .header__right {
 
+    height: 30vh;
 
+  }
 
+  .header__right__magnifier {
 
+    right: 0rem;
 
+    bottom: 1.5rem;
 
+  }
 
+  .category__btn {
 
+    padding: 0.2rem 1rem;
 
+    font-size: 1rem;
 
+  }
 
+  .category {
 
+    padding: 1rem;
 
+  }
 
+  .footer_img {
 
+    height: 50px;
 
+  }
 
+  .footer {
 
+    font-size: 0.9rem;
 
+  }
 
+  .pageForm__p {
 
+    padding: 15px;
 
+  }
 
+  .pageForm {
 
+    width: 95%;
 
+  }
 
+}
 
+
 
+@media (max-width: 480px) {
 
+  .ctncategory__btn {
 
+    margin-top: 0.6rem;
 
+  }
 
+  .header__right__video {
 
+    position: absolute;
 
+    width: calc(80% - 5%);
 
+    left: 2.1rem;
 
+    top: 1.3rem;
 
+  }
 
+}
 
+
 
+/* blog-traffic Start */
 
+
 
+.blog-traffic .header__right {
 
+  width: 100%;
 
+  height: 50vw;
 
+  position: relative;
 
+  top: -100px;
 
+  right: -70px;
 
+  z-index: -1;
 
+  background-size: cover;
 
+}
 
+
 
+@media (max-width: 1200px) {
 
+  .blog-traffic .header__right {
 
+    height: 60vw;
 
+    right: 0px;
 
+  }
 
+}
 
+
 
+@media (max-width: 767px) {
 
+  .blog-traffic .header__right {
 
+    width: 80%;
 
+    height: 75vw;
 
+    top: 0px;
 
+    right: 0px;
 
+  }
 
+}
 
+
 
+@media (max-width: 414px) {
 
+  .blog-traffic .header__right {
 
+    width: 100%;
 
+    height: 95vw;
 
+    top: 0px;
 
+    right: 5px;
 
+  }
 
+}
 
+
 
+.blog-traffic .header__lefttop {
 
+  width: 100vw;
 
+  height: auto;
 
+  top: -120px;
 
+}
 
+
 
+@media (max-width: 767px) {
 
+  .blog-traffic .header__lefttop {
 
+    width: 150vw;
 
+    height: auto;
 
+  }
 
+}
 
+
 
+.blog-traffic .header__title {
 
+  font-size: 2.5rem;
 
+  line-height: 65px;
 
+  font-weight: 600;
 
+}
 
+
 
+@media (max-width: 768px) {
 
+  .blog-traffic .header__title {
 
+    font-size: 2.2rem;
 
+  }
 
+}
 
+
 
+.blog-traffic .category {
 
+  padding: 0;
 
+}
 
+
 
+.blog-traffic .category.dm__description {
 
+  padding: 0;
 
+}
 
+
 
+.blog-traffic .category__sub_h2::after {
 
+  width: 3rem;
 
+  border-bottom: 10px solid #ea5413;
 
+  margin-top: 15px;
 
+}
 
+
 
+.blog-traffic ul {
 
+  list-style: none;
 
+}
 
+
 
+/* .blog-traffic .dm__description {
 
+    margin-top: 3rem;
 
+} */
 
+
 
+@media (max-width: 1800px) {
 
+  .blog-traffic .dm__description {
 
+    margin-top: 5rem;
 
+  }
 
+}
 
+
 
+@media (max-width: 1400px) {
 
+  .blog-traffic .dm__description {
 
+    margin-top: -5rem;
 
+  }
 
+}
 
+
 
+@media (max-width: 1200px) {
 
+  .blog-traffic .dm__description {
 
+    margin-top: 0rem;
 
+  }
 
+}
 
+
 
+@media (max-width: 991px) {
 
+  .blog-traffic .dm__description {
 
+    margin-top: -8rem;
 
+  }
 
+}
 
+
 
+@media (max-width: 767px) {
 
+  .blog-traffic .dm__description {
 
+    margin-top: 11rem;
 
+  }
 
+}
 
+
 
+@media (max-width: 414px) {
 
+  .blog-traffic .dm__description {
 
+    margin-top: 5rem;
 
+  }
 
+}
 
+
 
+@media (max-width: 389px) {
 
+  .blog-traffic .dm__description {
 
+    margin-top: 10rem;
 
+  }
 
+}
 
+
 
+.blog-traffic .img-block__img {
 
+  width: 12%;
 
+  object-fit: contain;
 
+  image-rendering: -webkit-optimize-contrast;
 
+  position: relative;
 
+  top: -30px;
 
+}
 
+
 
+@media (max-width: 1200px) {
 
+  .blog-traffic .img-block__img {
 
+    top: -10px;
 
+  }
 
+  .blog-traffic .img-first {
 
+    top: 0;
 
+  }
 
+}
 
+
 
+@media (max-width: 991px) {
 
+  .blog-traffic .img-block__img {
 
+    width: 15%;
 
+  }
 
+}
 
+
 
+@media (max-width: 767px) {
 
+  .blog-traffic .img-block__img {
 
+    width: 20%;
 
+    top: 5px;
 
+  }
 
+  .blog-traffic .img-first {
 
+    top: 15px;
 
+  }
 
+}
 
+
 
+@media (max-width: 490px) {
 
+  .blog-traffic .img-block__img {
 
+    top: 15px;
 
+  }
 
+  .blog-traffic .img-first {
 
+    top: 40px;
 
+  }
 
+}
 
+
 
+@media (max-width: 414px) {
 
+  .blog-traffic .img-block__img {
 
+    top: 22px;
 
+  }
 
+}
 
+
 
+@media (max-width: 575px) {
 
+  .blog-traffic .category {
 
+    padding: 0 10px;
 
+  }
 
+}
 
+
 
+.blog-traffic .category h4 {
 
+  font-size: 2rem;
 
+}
 
+
 
+.blog-traffic .category h4,
 
+.blog-traffic .category .sub-title {
 
+  margin: 0;
 
+  color: #f5ab1b;
 
+  font-weight: bold;
 
+}
 
+
 
+.blog-traffic .category p {
 
+  margin: 30px 0;
 
+}
 
+
 
+.blog-traffic .category ul {
 
+  padding: 0;
 
+}
 
+
 
+.blog-traffic .category p,
 
+.blog-traffic .category li {
 
+  line-height: 30px;
 
+}
 
+
 
+.blog-traffic .add-img {
 
+  width: 130px;
 
+  margin: 10px auto 0;
 
+  image-rendering: -webkit-optimize-contrast;
 
+}
 
+
 
+@media (max-width: 991px) {
 
+  .blog-traffic .add-img {
 
+    margin: 0 auto;
 
+  }
 
+}
 
+
 
+@media (max-width: 767px) {
 
+  .blog-traffic .add-img {
 
+    margin: 10px auto -25px;
 
+  }
 
+}
 
+
 
+/* blog-traffic End */
 
+
 
+/* youtube-views Start */
 
+
 
+#youtube-views {
 
+  overflow-x: hidden;
 
+  h5 {
 
+    line-height: 32px;
 
+  }
 
+  .title {
 
+    color: #ea5413;
 
+    font-size: 1.3rem;
 
+    font-weight: bold;
 
+  }
 
+  .header__right {
 
+    background-position: center;
 
+  }
 
+  .card-group {
 
+    margin-top: 50px;
 
+    .card {
 
+      box-shadow: 0 0 10px rgb(32 32 32 / 25%);
 
+      // border: 1px solid rgba(0, 0, 0, 0.125);
 
+      ul {
 
+        padding: 0;
 
+        list-style: none;
 
+        img {
 
+          margin-bottom: 1px;
 
+        }
 
+      }
 
+      // ul li::before {
 
+      //   content: "○";
 
+      //   color: #ea5413;
 
+      //   font-weight: bold;
 
+      //   display: inline-block;
 
+      //   margin-right: 5px;
 
+      // }
 
+      .price {
 
+        width: 100%;
 
+        padding: 10px 0;
 
+        font-size: 28px;
 
+        font-weight: bold;
 
+        text-align: center;
 
+        color: #fff;
 
+        background-color: #ea5413;
 
+        letter-spacing: 2px;
 
+      }
 
+      .buy-btn {
 
+        padding: 10px 20px;
 
+        color: #fff;
 
+        border: 1px solid transparent;
 
+        border-radius: 50px;
 
+        background: #ea5413;
 
+        transition: all 0.3s;
 
+        &:hover {
 
+          color: #ea5413;
 
+          border: 1px solid #ea5413;
 
+          background: #fff;
 
+        }
 
+      }
 
+    }
 
+  }
 
+  .direction-list {
 
+    margin-top: 100px;
 
+    img {
 
+      width: 50px;
 
+      object-fit: contain;
 
+      filter: invert(33%) sepia(55%) saturate(2232%) hue-rotate(357deg) brightness(102%) contrast(89%);
 
+    }
 
+    .content > div {
 
+      margin-bottom: 40px;
 
+      padding: 0px 15px;
 
+      border-left: 1px solid rgba(0, 0, 0, 0.125);
 
+      border-bottom: 1px solid rgba(0, 0, 0, 0.125);
 
+    }
 
+    section {
 
+      h5 {
 
+        margin: 0;
 
+        font-size: 18px;
 
+        font-weight: bold;
 
+      }
 
+      p {
 
+        font-size: 14px;
 
+      }
 
+    }
 
+  }
 
+
 
+  .accordion-button {
 
+    padding: 20px;
 
+  }
 
+
 
+  .accordion-button:not(.collapsed) {
 
+    color: #ea5413 !important;
 
+    background-color: #ffebe2 !important;
 
+  }
 
+
 
+  button:focus:not(:focus-visible) {
 
+    box-shadow: none !important;
 
+  }
 
+
 
+  .accordion-button:not(.collapsed)::after {
 
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ea5413'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 
+  }
 
+
 
+  @media (max-width: 767px) {
 
+    & .category.dm__description {
 
+      padding-top: 6rem;
 
+    }
 
+  }
 
+}
 
+
 
+/* youtube-views End */

BIN
static/imgs/bottom-line.png
View File


BIN
static/imgs/dm/banner-01.webp
View File


BIN
static/imgs/dm/bg-01.webp
View File


BIN
static/imgs/dm/bg-02.webp
View File


BIN
static/imgs/dm/seo-image.jpg
View File


BIN
static/imgs/dm/youtube-01.png
View File


BIN
static/imgs/dm/youtube-02.png
View File


BIN
static/imgs/dm/youtube-03.png
View File


BIN
static/imgs/icon/analytics.png
View File


BIN
static/imgs/icon/check-01.png
View File


BIN
static/imgs/icon/check.png
View File


BIN
static/imgs/icon/checked.png
View File


BIN
static/imgs/icon/checkout.png
View File


BIN
static/imgs/icon/correct.png
View File


BIN
static/imgs/icon/credit-card.png
View File


BIN
static/imgs/icon/crown.png
View File


BIN
static/imgs/icon/customer-support.png
View File


BIN
static/imgs/icon/dollar.png
View File


BIN
static/imgs/icon/exclamation.png
View File


BIN
static/imgs/icon/growth.png
View File


BIN
static/imgs/icon/ok.png
View File


BIN
static/imgs/icon/on-time.png
View File


BIN
static/imgs/icon/padlock.png
View File


BIN
static/imgs/icon/play-button.png
View File


BIN
static/imgs/icon/refund.png
View File


BIN
static/imgs/icon/search.png
View File


BIN
static/imgs/icon/user.png
View File


BIN
static/imgs/icon/video-camera.png
View File


+ 14 - 0
webSite/config.toml
View File 

@@ -90,6 +90,20 @@ page = ["HTML"]
 
     url = "/blog-traffic/dm/"
 
     url = "/blog-traffic/dm/"
 
     weight = 8
 
     weight = 8
 
     parent = "home"
 
     parent = "home"
 
+
 
+[[menu.main]]
 
+    identifier="seo-image"
 
+    name = "形象 SEO"
 
+    url = "/seo-image/dm/"
 
+    weight = 9
 
+    parent = "home"
 
+
 
+[[menu.main]]
 
+    identifier="youtube-views"
 
+    name = "YouTube 影片觀看方案"
 
+    url = "/youtube-views/dm/"
 
+    weight = 10
 
+    parent = "home"
 
     
     
 [[menu.main]]
 
 [[menu.main]]
 
     identifier="login"
 
     identifier="login"

+ 34 - 0
webSite/content/seo-image/dm.md
View File 

@@ -0,0 +1,34 @@
 
++++
 
+title = "ＤＭ"
 
+date = "2021-08-19T12:00:05+08:00"
 
+tags = ["seo"]
 
+categories = ["seo"]
 
+layout = "seo"
 
+banner = "https://i.imgur.com/ApmF3a9.jpg"
 
+packageTitle = "形象 SEO"
 
+packageSub = "翻轉負面新聞｜搶救負評大作戰 "
 
+packageBg = "https://i.imgur.com/ApmF3a9.jpg"
 
+description = "您正困擾於被負面新聞與惡意文章滿滿的攻擊嗎？當您的負面新聞、負面口碑文章、負面論壇文章，被大量的收錄於 Google 搜尋引擎前幾名，甚至負評滿滿於首頁時，不論對於品牌形象和個人形象，都是莫大的傷害與公關危機。不要怕，集仕多的獨家形象 SEO 技術，最快能在 14 天之內，翻轉您的負面新聞排序，搶救您的形象管理。"
 
+
 
+block1_title = "透過形象SEO管理您的評價"
 
+block1_strong = ""
 
+block1_text = "我們的目標是透過形象SEO技術，讓正面文章攻佔前面排名。不論是名人或名牌，都能透過經營SEO將特定關鍵字詞搜尋優化，提高您的正面文章自然點擊率與搜尋度。從Google搜尋統計圖我們可得知，排名順位跟點擊率成正比，排名越前點擊率越高；排名越後點擊率越低。因此，正面文章的排序名列前茅，是形象SEO的操作關鍵。"
 
+block1_img = "/imgs/dm/blog-traffic_01.png"
 
+
 
+block2_title = ""
 
+block2_strong = ""
 
+block2_text = ""
 
+block2_img = ""
 
+
 
+block3_title = ""
 
+block3_strong = ""
 
+block3_text = ""
 
+block3_img = ""
 
+
 
+block4_title = "集仕多獨家 SEO 顯微鏡健檢服務"
 
+block4_strong = "獨家 SEO 顯微鏡健檢服務"
 
+block4_list1 = "網站健檢：盤點網頁結構、速度"
 
+block4_list2 = "關鍵字研究：選擇適合你的關鍵字結合內容行銷，逐步提升排名"
 
+block4_list3 = "優化分析與策略: 提出 SEO 改善建議，偕同逐項優化，推動排名向前"
 
+block4_img = "/imgs/dm/dm_seo_2.png"
 
++++

+ 42 - 0
webSite/content/youtube-views/dm.md
View File 

@@ -0,0 +1,42 @@
 
++++
 
+title = "ＤＭ"
 
+date = "2021-08-19T12:00:05+08:00"
 
+tags = ["video-making"]
 
+categories = ["video-making"]
 
+layout = "video-making"
 
+banner = "https://i.imgur.com/cqerHee.jpg"
 
+packageTitle = "YouTube View Booster"
 
+packageSub1 = "If your YouTube videos get more views then more people will be willing to watch them. This will lead to more exposure and growth."
 
+packageSub2 = "To boost the views on your videos you can buy real YouTube views from ChoozMo and get the exposure you deserve."
 
+packageBg = "https://i.imgur.com/cqerHee.jpg"
 
+description_01 = "Our view booster runs through Google Ads and is not a bot."
 
+description_02 = "All you need are the link to your YouTube video, your audience region, and your desired audience language. We will provide you with an ad performance report as soon as 5 days."
 
+description_block3_title = ""
 
+description_block3 = ""
 
+block1_title = ""
 
+block1_strong = ""
 
+block1_text = ""
 
+block1_img = ""
 
+
 
+block2_title = ""
 
+block2_strong = ""
 
+block2_text = ""
 
+block2_img = ""
 
+
 
+block3_title = ""
 
+block3_strong = ""
 
+block3_list1 = ""
 
+block3_list2 = ""
 
+block3_list3 = ""
 
+block3_list4 = ""
 
+block3_list5 = ""
 
+block3_list6 = ""
 
+block3_img = ""
 
+
 
+block4_title = ""
 
+block4_strong = ""
 
+block4_list1 = ""
 
+block4_list2 = ""
 
+block4_list3 = ""
 
+block4_img = ""
 
++++

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