Kaynağa Gözat

add youtube-views page

SyuanYu 2 yıl önce
ebeveyn
işleme
98472d617c
48 değiştirilmiş dosya ile 3013 ekleme ve 1170 silme
  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

@@ -327,7 +327,8 @@
 </head>
 
 <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">
       <a class="navbar-brand" href="/">
         <img src="https://ai.choozmo.com/img/Choozmo%20cloud%20logo.png" alt="" width="180" height="48"
@@ -364,14 +365,6 @@
           <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>
@@ -381,7 +374,7 @@
         </ul>
       </div>
     </div>
-  </nav>
+  </nav> -->
   <main id="ad-operation">
     <section class="header">
       <div class="row align-items-center justify-content-center g-0">

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

@@ -77,13 +77,13 @@
     .ai-anchor .header {
       padding-left: 6vw;
       width: 80%;
-      margin: 0 auto;
+      margin: 65px auto 0;
     }
 
     @media (max-width: 767px) {
       .ai-anchor .header {
         width: 90%;
-        margin-top: 100px;
+        /* margin-top: 100px; */
       }
     }
 
@@ -248,67 +248,12 @@
 </head>
 
 <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">
     <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-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>
 
           <p class="header-sub">圖文+影音+聯播<br>全方位媒體曝光,一次到位!</p>

+ 1 - 55
layouts/bigdata/single.html

@@ -66,61 +66,7 @@
 </head>
 
 <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>
     <section class="header">
       <img src="/imgs/01.webp" alt="" class="header__lefttop">

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

@@ -66,61 +66,7 @@
 </head>
 
 <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;">
     <section class="header" style="padding-top: 1.5rem;">
       <img src="/imgs/dm/blog-traffic_00.jpg" alt="" class="header__lefttop">

+ 1 - 55
layouts/crawler/single.html

@@ -66,61 +66,7 @@
 </head>
 
 <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>
     <section class="header">
       <img src="/imgs/01.webp" alt="" class="header__lefttop">

+ 56 - 0
layouts/partials/navbar.html

@@ -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

@@ -66,61 +66,7 @@
 </head>
 
 <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>
     <section class="header">
       <img src="/imgs/01.webp" alt="" class="header__lefttop">

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

@@ -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

@@ -66,61 +66,7 @@
 </head>
 
 <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>
     <section class="header">
       <img src="/imgs/01.webp" alt="" class="header__lefttop">

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

@@ -75,61 +75,7 @@
 </head>
 
 <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>
     <section class="header">
       <img src="/imgs/01.webp" alt="" class="header__lefttop">

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

@@ -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

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

Dosya farkı çok büyük olduğundan ihmal edildi
+ 0 - 2
static/css/contact/styles-contact.css.map


+ 1 - 1
static/css/custom.css

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

+ 768 - 693
static/css/style.css

@@ -1,1089 +1,1164 @@
+@charset "UTF-8";
 * {
-    letter-spacing: 1px;
+  letter-spacing: 1px;
 }
 
 .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 {
-    flex-grow: 0;
+  flex-grow: 0;
 }
 
 .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 {
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: -1;
-    width: 350px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: -1;
+  width: 350px;
 }
 
 .header__title {
-    font-size: 3rem;
-    color: #20616d;
-    font-weight: 400;
+  font-size: 3rem;
+  color: #20616d;
+  font-weight: 400;
 }
 
 .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::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 {
-    left: 28%;
+  left: 28%;
 }
 
 .header__sub::after {
-    left: 60%;
+  left: 60%;
 }
 
 .header__form {
-    margin: 1rem auto;
-    justify-content: center;
+  margin: 1rem auto;
+  justify-content: center;
 }
 
 .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 {
-    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 {
-    background-color: #ff892e;
+  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;
+  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");
+  background-image: url("https://i.imgur.com/SOu53ii.jpg");
 }
 
 .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 {
-    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 {
-    position: absolute;
-    width: 25%;
-    right: 3%;
-    bottom: 1%;
+  position: absolute;
+  width: 25%;
+  right: 3%;
+  bottom: 1%;
 }
 
 .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 {
-    width: 45%;
-    position: absolute;
-    left: -8%;
-    bottom: -3%;
-    z-index: -1;
+  width: 45%;
+  position: absolute;
+  left: -8%;
+  bottom: -3%;
+  z-index: -1;
 }
 
 .category {
-    padding: 2rem 0rem;
+  padding: 2rem 0rem;
 }
 
 .category.dm__description {
-    padding: 2rem 8rem;
+  padding: 2rem 8rem;
 }
 
 .category__sub_h2 {
-    position: relative;
+  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%);
+  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;
+  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;
+  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;
+  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;
+  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;
+  margin-bottom: 1.5rem;
 }
 
 .top3 {
-    padding: 3rem 0rem;
-    padding-bottom: 5rem;
-    position: relative;
+  padding: 3rem 0rem;
+  padding-bottom: 5rem;
+  position: relative;
 }
 
 .top3 .row {
-    padding: 0rem 4rem;
+  padding: 0rem 4rem;
 }
 
 .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 {
-    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 {
-    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 {
-    text-align: right;
+  text-align: right;
 }
 
 .card__rank__link {
-    color: #38a7bb;
-    text-decoration: none;
-    font-weight: 400;
+  color: #38a7bb;
+  text-decoration: none;
+  font-weight: 400;
 }
+
 .card__rank__link:hover {
-    color: #19879b;
+  color: #19879b;
 }
 
 .top20 {
-    padding-bottom: 5rem;
+  padding-bottom: 5rem;
 }
 
 .top20 .row {
-    padding: 0rem 4rem;
+  padding: 0rem 4rem;
 }
 
 .top20 .card__rank__word {
-    margin-left: 0;
+  margin-left: 0;
 }
+
 .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 {
-    background-color: #555555;
-    padding: 50px 0;
-    color: #999999;
+  background-color: #555555;
+  padding: 50px 0;
+  color: #999999;
 }
 
 .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 {
-    font-size: 1.3rem;
-    color: white;
+  font-size: 1.3rem;
+  color: white;
 }
 
 .footer .btn {
-    border: 2px solid #38a7bb;
-    color: #38a7bb;
-    text-decoration: none;
+  border: 2px solid #38a7bb;
+  color: #38a7bb;
+  text-decoration: none;
 }
 
 .followus__btn {
-    text-decoration: none;
-    color: white;
+  text-decoration: none;
+  color: white;
 }
 
 .followus__btn:hover {
-    color: #38a7bb;
+  color: #38a7bb;
 }
 
 .footer .btn:hover {
-    color: white;
-    background-color: #38a7bb;
+  color: white;
+  background-color: #38a7bb;
 }
 
 .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 {
-    height: 60px;
+  height: 60px;
 }
 
 /* content page */
-
 .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 {
-    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::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 {
-    left: 18%;
+  left: 18%;
 }
 
 .cntheader__sub::after {
-    left: 67%;
+  left: 67%;
 }
 
 .cntheader .category__btngrp {
-    padding: 0 4rem;
+  padding: 0 4rem;
 }
 
 .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 {
-    font-size: 1.8rem;
-    font-weight: 400;
+  font-size: 1.8rem;
+  font-weight: 400;
 }
 
 .card__text {
-    color: #918f8f;
+  color: #918f8f;
 }
 
 .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 {
-    color: #20616d;
+  color: #20616d;
 }
 
 .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 {
-    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 {
-    position: absolute;
-    width: 150px;
-    right: -4rem;
-    top: -3.5rem;
+  position: absolute;
+  width: 150px;
+  right: -4rem;
+  top: -3.5rem;
 }
 
 .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 {
-    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) {
-    border: none;
+  border: none;
 }
 
 .toparticle__list-item a {
-    text-decoration: none;
-    color: #38a7bb;
+  text-decoration: none;
+  color: #38a7bb;
 }
 
 .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 {
-    font-size: 2rem;
+  font-size: 2rem;
 }
 
 .toparticle__list-item small {
-    position: absolute;
-    right: 0;
-    top: 45%;
+  position: absolute;
+  right: 0;
+  top: 45%;
 }
 
 .cntsubscribe {
-    text-align: center;
+  text-align: center;
 }
 
 .cntsubscribe__form {
-    position: relative;
+  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;
+  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;
+  background-color: #ff892e;
+  color: white;
 }
 
 .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 {
-    width: 70%;
+  width: 70%;
 }
 
 .img-block-list {
-    padding: 2rem 6rem;
+  padding: 2rem 6rem;
 }
 
 .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 {
-    right: -10%;
-    bottom: -5%;
+  right: -10%;
+  bottom: -5%;
 }
 
 .img-block__linecir.right {
-    left: -10%;
-    bottom: -5%;
+  left: -10%;
+  bottom: -5%;
 }
 
 .img-block__linecir.left {
-    left: -10%;
-    bottom: -5%;
+  left: -10%;
+  bottom: -5%;
 }
 
 .aboutus_img {
-    width: 100%;
+  width: 100%;
 }
 
 .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 {
-    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 {
-    border: 3px dashed #ffebe8;
+  border: 3px dashed #ffebe8;
 }
 
 .ai-training__card .card-img-top {
-    height: 35vh;
+  height: 35vh;
 }
 
 .ai-training__action ul {
-    list-style: none;
-    line-height: 2rem;
+  list-style: none;
+  line-height: 2rem;
 }
 
 .ai-training__action__box {
-    flex-direction: row;
+  flex-direction: row;
 }
 
 .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 {
-    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 {
-    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 {
-    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 {
-    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 {
-    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 {
-    padding-left: 40px;
+  padding-left: 40px;
 }
+
 .pageForm__notice {
-    padding-left: 40px;
-    color: grey;
-    margin-top: 50px;
+  padding-left: 40px;
+  color: grey;
+  margin-top: 50px;
 }
+
 .pageForm__p {
-    padding: 40px;
+  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;
+  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;
+  transform: translate(2px, 2px);
+  text-decoration: none;
+  color: #ff892e;
 }
+
 @media (max-width: 1300px) {
-    .header__right__video {
-        position: absolute;
-        width: calc(80% - 4%);
-    }
+  .header__right__video {
+    position: absolute;
+    width: 76%;
+  }
 }
-
 @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) {
-    .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) {
-    .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) {
-    .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 .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) {
-    .blog-traffic .header__right {
-        height: 60vw;
-        right: 0px;
-    }
+  .blog-traffic .header__right {
+    height: 60vw;
+    right: 0px;
+  }
 }
-
 @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) {
-    .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 {
-    width: 100vw;
-    height: auto;
-    top: -120px;
+  width: 100vw;
+  height: auto;
+  top: -120px;
 }
 
 @media (max-width: 767px) {
-    .blog-traffic .header__lefttop {
-        width: 150vw;
-        height: auto;
-    }
+  .blog-traffic .header__lefttop {
+    width: 150vw;
+    height: auto;
+  }
 }
-
 .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) {
-    .blog-traffic .header__title {
-        font-size: 2.2rem;
-    }
+  .blog-traffic .header__title {
+    font-size: 2.2rem;
+  }
 }
-
 .blog-traffic .category {
-    padding: 0;
+  padding: 0;
 }
 
 .blog-traffic .category.dm__description {
-    padding: 0;
+  padding: 0;
 }
 
 .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 {
-    list-style: none;
+  list-style: none;
 }
 
 /* .blog-traffic .dm__description {
     margin-top: 3rem;
 } */
-
 @media (max-width: 1800px) {
-    .blog-traffic .dm__description {
-        margin-top: 5rem;
-    }
+  .blog-traffic .dm__description {
+    margin-top: 5rem;
+  }
 }
-
 @media (max-width: 1400px) {
-    .blog-traffic .dm__description {
-        margin-top: -5rem;
-    }
+  .blog-traffic .dm__description {
+    margin-top: -5rem;
+  }
 }
-
 @media (max-width: 1200px) {
-    .blog-traffic .dm__description {
-        margin-top: 0rem;
-    }
+  .blog-traffic .dm__description {
+    margin-top: 0rem;
+  }
 }
-
 @media (max-width: 991px) {
-    .blog-traffic .dm__description {
-        margin-top: -8rem;
-    }
+  .blog-traffic .dm__description {
+    margin-top: -8rem;
+  }
 }
-
 @media (max-width: 767px) {
-    .blog-traffic .dm__description {
-        margin-top: 11rem;
-    }
+  .blog-traffic .dm__description {
+    margin-top: 11rem;
+  }
 }
-
 @media (max-width: 414px) {
-    .blog-traffic .dm__description {
-        margin-top: 5rem;
-    }
+  .blog-traffic .dm__description {
+    margin-top: 5rem;
+  }
 }
-
 @media (max-width: 389px) {
-    .blog-traffic .dm__description {
-        margin-top: 10rem;
-    }
+  .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;
+  width: 12%;
+  -o-object-fit: contain;
+     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;
-    }
+  .blog-traffic .img-block__img {
+    top: -10px;
+  }
+  .blog-traffic .img-first {
+    top: 0;
+  }
 }
-
 @media (max-width: 991px) {
-    .blog-traffic .img-block__img {
-        width: 15%;
-    }
+  .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;
-    }
+  .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;
-    }
+  .blog-traffic .img-block__img {
+    top: 15px;
+  }
+  .blog-traffic .img-first {
+    top: 40px;
+  }
 }
-
 @media (max-width: 414px) {
-    .blog-traffic .img-block__img {
-        top: 22px;
-    }
+  .blog-traffic .img-block__img {
+    top: 22px;
+  }
 }
-
 @media (max-width: 575px) {
-    .blog-traffic .category {
-        padding: 0 10px;
-    }
+  .blog-traffic .category {
+    padding: 0 10px;
+  }
 }
-
 .blog-traffic .category h4 {
-    font-size: 2rem;
+  font-size: 2rem;
 }
 
 .blog-traffic .category h4,
 .blog-traffic .category .sub-title {
-    margin: 0;
-    color: #f5ab1b;
-    font-weight: bold;
+  margin: 0;
+  color: #f5ab1b;
+  font-weight: bold;
 }
 
 .blog-traffic .category p {
-    margin: 30px 0;
+  margin: 30px 0;
 }
 
 .blog-traffic .category ul {
-    padding: 0;
+  padding: 0;
 }
 
 .blog-traffic .category p,
 .blog-traffic .category li {
-    line-height: 30px;
+  line-height: 30px;
 }
 
 .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) {
-    .blog-traffic .add-img {
-        margin: 0 auto;
-    }
+  .blog-traffic .add-img {
+    margin: 0 auto;
+  }
 }
-
 @media (max-width: 767px) {
-    .blog-traffic .add-img {
-        margin: 10px auto -25px;
-    }
+  .blog-traffic .add-img {
+    margin: 10px auto -25px;
+  }
 }
-
 /* 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 */

Dosya farkı çok büyük olduğundan ihmal edildi
+ 0 - 0
static/css/style.css.map


+ 1199 - 0
static/css/style.scss

@@ -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


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


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


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


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


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


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


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


BIN
static/imgs/icon/analytics.png


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


BIN
static/imgs/icon/check.png


BIN
static/imgs/icon/checked.png


BIN
static/imgs/icon/checkout.png


BIN
static/imgs/icon/correct.png


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


BIN
static/imgs/icon/crown.png


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


BIN
static/imgs/icon/dollar.png


BIN
static/imgs/icon/exclamation.png


BIN
static/imgs/icon/growth.png


BIN
static/imgs/icon/ok.png


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


BIN
static/imgs/icon/padlock.png


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


BIN
static/imgs/icon/refund.png


BIN
static/imgs/icon/search.png


BIN
static/imgs/icon/user.png


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


+ 14 - 0
webSite/config.toml

@@ -90,6 +90,20 @@ page = ["HTML"]
     url = "/blog-traffic/dm/"
     weight = 8
     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]]
     identifier="login"

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

@@ -0,0 +1,34 @@
++++
+title = "DM"
+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

@@ -0,0 +1,42 @@
++++
+title = "DM"
+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 = ""
++++

Bu fark içinde çok fazla dosya değişikliği olduğu için bazı dosyalar gösterilmiyor