update ai-operation page

layouts/ad-operation/single.html

@@ -14,372 +14,76 @@
   <!-- 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>
-    .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;
-    }
-
-    #ad-operation .header {
-      height: auto;
-    }
-
-    #ad-operation .header p {
-      font-weight: bold;
-      line-height: 32px;
-    }
-
-    #ad-operation .header p span {
-      font-size: 20px;
-      color: #ea5413;
-    }
-
-    #ad-operation .header-title {
-      color: #000;
-      font-weight: bold;
-      letter-spacing: 5px;
-    }
-
-    #ad-operation .dm-description h5 {
-      font-size: 16px;
-      line-height: 32px;
-    }
-
-    #ad-operation .dm-description h5 strong {
-      padding-bottom: 3px;
-      border-bottom: 3px solid rgb(248, 228, 72);
-    }
-
-    .card-content div {
-      display: flex;
-      flex-direction: column;
-      border: 2px solid #FFEBE2;
-      border-radius: 10px;
-    }
-
-    .card-content h3 {
-      width: 60%;
-      margin: -17px auto 0;
-      padding: 8px 5px;
-      display: inline-block;
-      color: #fff;
-      background: #ea5413;
-      text-align: center;
-      font-size: 18px;
-      font-weight: bold;
-      letter-spacing: 2px;
-      border-radius: 10px;
-      box-shadow: 2px 2px 5px #ccc;
-    }
-
-    @media (max-width: 576px) {
-      .card-content h3 {
-        width: auto;
-        padding: 7px 15px;
-        font-size: 16px;
-      }
-    }
-
-    .card-content h4 {
-      margin-top: 25px;
-      padding: 20px 10px;
-      font-size: 14px;
-      line-height: 32px;
-      background: #FFEBE2;
-    }
-
-    .card-content h4 strong {
-      font-size: 20px;
-    }
-
-    .content-box {
-      width: 65%;
-      margin: auto;
-      padding: 30px 0;
-      display: flex;
-      justify-content: center;
-      background: #FFEBE2;
-      position: relative;
-    }
-
-    .content-box p {
-      margin: 0;
-      line-height: 32px;
-    }
-
-    .content-box h4 {
-      font-size: 22px;
-      font-weight: bold;
-      margin-bottom: 20px;
-    }
-
-    @media (max-width: 991px) {
-      .content-box {
-        width: 90%;
-      }
-    }
-
-    @media (max-width: 767px) {
-      .content-box {
-        width: 100%;
-      }
-
-      .content-box h4 {
-        font-size: 18px;
-      }
-
-      .content-box p {
-        font-size: 14px;
-      }
-    }
-
-    @media (max-width: 475px) {
-      .content-box {
-        padding-left: 10px;
-      }
-
-      .content-box h4 {
-        font-size: 14px;
-        white-space: nowrap;
-      }
-
-      .content-box p {
-        font-size: 13px;
-      }
-    }
-
-    .content-box .line {
-      height: 3px;
-      background: #fff;
-      width: 950px;
-      position: absolute;
-      left: -200px;
-      top: 35px;
-    }
-
-    @media (max-width: 767px) {
-      .content-box .line {
-        top: 33px;
-      }
-    }
-
-    @media (max-width: 575px) {
-      .content-box .line {
-        top: 30px;
-      }
-    }
-
-    .content-badge {
-      position: absolute;
-      left: 0;
-      top: -53px;
-      padding: 5px 10px;
-      background: #ea5413;
-      border-radius: 10px;
-      font-size: 22px;
-      font-weight: bold;
-      color: #fff;
-    }
-
-    .pageForm {
-      line-height: 32px;
-      letter-spacing: 1px;
-    }
-
-    #ad-operation {
-      overflow-x: hidden;
-    }
-
-    #ad-operation .header-lefttop {
-      width: 60%;
-      position: absolute;
-      left: 10vw;
-      top: -13vw;
-      z-index: -1;
-    }
-
-    #ad-operation .category.dm-description {
-      padding: 2rem 8rem;
-    }
-
-    @media (max-width: 991px) {
-      #ad-operation .category.dm-description {
-        padding: 2rem 3rem;
-      }
-    }
-
-    @media (max-width: 767px) {
-      #ad-operation .category.dm-description {
-        padding: 2rem 0rem;
-      }
-
-      #ad-operation .header-lefttop {
-        left: 20vw;
-      }
-    }
-
-    /* .video-box {
-      position: relative;
-      width: 70%;
-      height: 0;
-      padding-bottom: 40%;
-    }
-
-    @media (max-width: 1200px) {
-      .video-box {
-        width: 80%;
-        padding-bottom: 45%;
-      }
-    }
-
-    @media (max-width: 767px) {
-      .video-box {
-        margin: 50px auto 0;
-      }
-    }
-
-    @media (max-width: 576px) {
-      .video-box {
-        width: 90%;
-        padding-bottom: 50%;
-      }
-    }
-
-    .video-box iframe {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    } */
-
-    .accreditation p {
-      font-size: 24px;
-    }
-
-    .accreditation img {
-      width: 150px;
-      position: absolute;
-      top: -35px;
-      left: -25px;
-    }
-
-    @media (max-width: 767px) {
-      .accreditation img {
-        width: 135px;
-        left: -50px;
-      }
-    }
-
-    @media (max-width: 575px) {
-      .accreditation img {
-        width: 120px;
-        top: -80px;
-        left: -20px;
-      }
-
-      .accreditation p {
-        font-size: 20px;
-      }
-    }
-  </style>
 </head>
 
 <body>
   {{ 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"
-          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">
-            <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 "pageFormBtn.html" . }}
+ 
   <main id="ad-operation">
     <section class="header">
-      <div class="row align-items-center justify-content-center g-0" style="padding: 100px 0;">
+      <div class="banner d-flex flex-column align-items-center justify-content-center">
+        <img src="/imgs/dm/ad-operation-01.webp" alt="" class="img">
+        <img src="/imgs/dm/word.png" alt="" class="text">
+        <section style="opacity: 0;">
+          <h2>
+            決戰 1111 AI 廣告投放x儲值金大放送
+          </h2>
+          <h3>
+            儲值廣告金
+            <br>
+            代操費業界最低 3%
+          </h3>
+        </section>
+        <section class="slogen">
+          <h3>
+            儲值 google 廣告 12 萬
+            <br>
+            <span>代操費</span>
+            <span class="point">僅 3 %</span>
+            <small>原 20%</small>
+            <br>
+          </h3>
+          <h4>
+            送 一個月官網 SEO <small>(三組字)</small>
+          </h4>
+          <button class="contact-btn" onclick="window.location.href=`/contact/service/`">立即諮詢</button>
+        </section>
+      </div>
+
+      <section class="img-content">
+        <img src="/imgs/dm/ad-operation-02.png" alt="">
+        <h4 class="left">大數據精準 <br> 抓取目標受眾</h4>
+        <h4 class="center">同時管理 <br> 數百檔廣告</h4>
+        <h4 class="right">工業局認證 <br> AI智慧廣告 <br> 投放技術</h4>
+      </section>
+
+      <div class="container category dm-description position-relative">
+        <h2 class="title mx-3 mx-sm-0">ChoozMo <br> AI 廣告投手</h2>
+        <section class="pt-4 pb-5 position-relative">
+          <h5>
+            廣告品質越好， 廣告付費就越少！
+            <br><br>
+            集仕多擁有專業投放廣告的豐富經驗，利用 <strong>獨家 SEO 顯微鏡健檢服務</strong> 和綁定 <strong>Google My Business</strong> 兩大分析系統。
+            <br><br>
+            完整收集數據與分析報告， 為各大企業、 商家以最有效的廣告策略<br>
+            <strong>精準鎖定目標客群， 並適時地調整廣告策略。</strong>
+            <br><br>
+            透過 LINE 就能即時查詢分析報告， 以達到出色的廣告效益， 提高品牌曝光量和知名度！
+          </h5>
+          <img src="/imgs/dm/ad-operation-04.png" alt="" class="header-lefttop">
+        </section>
+        <img src="/imgs/dm/circle-01.webp" alt="" class="purple-circle">
+        <div class="video-box mx-auto">
+          <iframe width="560" height="315" src="https://www.youtube.com/embed/teVJmQz8jpQ" title="YouTube video player"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen></iframe>
+        </div>
+      </div>
+
+      <!-- <div class="row align-items-center justify-content-center g-0" style="padding: 100px 0;">
         <div class="col-12 col-md-6 text-center position-relative">
           <img src="/imgs/dm/operation_01.png" alt="" class="header-lefttop">
           <h2 class="header-title">AI 廣告投手</h2>
@@ -399,31 +103,41 @@
               allowfullscreen></iframe>
           </div>
         </div>
-      </div>
-    </section>
-    <section class="category container py-5 dm-description">
-      <h5>
-        廣告品質越好， 廣告付費就越少！
-        <br><br>
-        集仕多擁有專業投放廣告的豐富經驗，利用 <strong>獨家SEO顯微鏡健檢服務</strong> 和綁定 <strong>Google My Business</strong> 兩大分析系統。
-        <br><br>
-        完整收集數據與分析報告， 為各大企業、 商家以最有效的廣告策略<br>
-        <strong>精準鎖定目標客群， 並適時地調整廣告策略。</strong>
-        <br><br>
-        透過 LINE 就能即時查詢分析報告， 以達到出色的廣告效益， 提高品牌曝光量和知名度！
-      </h5>
+      </div> -->
     </section>
+
     <div class="container">
       <div class="row my-5 justify-content-center card-content px-3 px-sm-0">
         <div class="col-12 col-md-5 mx-3">
           <h3>獨家 SEO 顯微鏡健檢服務</h3>
-          <h4>
-            <strong>網站健檢</strong>：盤點網頁結構、速度 <br>
-            <strong>關鍵字研究</strong>：選擇適合的關鍵字結合內容行銷，逐步提升排名 <br>
-            <strong>優化分析與策略</strong>：<br>
-            提出 SEO 改善建議，協同逐項優化，推動排名向前
-          </h4>
-          <img class="img-fluid my-4" src="/imgs/dm/operation_02.png" alt="">
+
+          <div class="row mx-auto table">
+            <div class="col-6">
+              <strong>網站健檢</strong>
+            </div>
+            <div class="col-6 my-auto">
+              <p>盤點網頁結構、速度 </p>
+            </div>
+            <div class="col-12 mt-1 mb-2">
+              <span></span>
+            </div>
+            <div class="col-6">
+              <strong>關鍵字研究</strong>
+            </div>
+            <div class="col-6">
+              <p>選擇適合的關鍵字結合內容行銷，逐步提升排名</p>
+            </div>
+            <div class="col-12 mt-1 mb-2">
+              <span></span>
+            </div>
+            <div class="col-6">
+              <strong>優化分析與策略</strong>
+            </div>
+            <div class="col-6">
+              <p>提出 SEO 改善建議，協同逐項優化，推動排名向前</p>
+            </div>
+          </div>
+          <img class="img-fluid my-4" src="/imgs/dm/ad-operation-05.png" alt="">
         </div>
         <div class="col-12 col-md-5 mx-3 mt-5 mt-md-0">
           <h3>Google My Business</h3>
@@ -432,13 +146,23 @@
             <strong>我的商家</strong>串接 Google My Business <br>
             從眾多競爭對手中脫穎而出，吸引顧客上門；隨時視需要輕鬆更新商家檔案。
           </h4>
-          <img class="img-fluid my-auto" src="/imgs/dm/operation_04.png" alt="">
+          <img class="img-fluid my-auto" src="/imgs/dm/ad-operation-06.png" alt="">
+        </div>
+        <div class="col-12 col-md-5 mx-3 mt-5">
+          <h3>受眾目標分析</h3>
+          <h4>
+            研究品牌/產業/SEO顯微鏡
+            <br>
+            產生<strong>目標族群圖</strong>，能更精準評估適合投放之廣告項目。
+          </h4>
+          <img class="img-fluid my-auto" src="/imgs/dm/ad-operation-07.png" alt="">
         </div>
       </div>
-      <div class="row mb-5" style="margin-top: 100px;">
+      <div class="row mb-5 position-relative" style="margin-top: 100px;">
         <div class="col-12">
-          <div class="row">
-            <div class="col-12">
+          <div class="row mx-0">
+            <div class="col-12 p-0">
+              <img src="/imgs/dm/circle-01.webp" alt="" class="purple-circle">
               <div class="content-box">
                 <span class="content-badge">內容包含</span>
                 <section class="position-relative">
@@ -464,20 +188,65 @@
                 </section>
               </div>
             </div>
+            <div class="col-12 content-box mt-4" style="background: #fff;">
+              <div class="row px-2 align-items-end">
+                <div class="col-6">
+                  <section class="d-flex flex-column align-items-center">
+                    <h4 class="mb-2" style="white-space: normal;">LINE 即時推播ｘ成效報告</h4>
+                  <p class="ms-2 mb-2">數據驅動每個月提供成效分析報告
+                    <br>
+                    讓客戶清楚了解流量優化方向及成效
+                    <br>
+                    掌握客戶實戰績效
+                    <br>
+                    協助客戶流量節節上升
+                  </p>
+                  </section>
+                  <img src="/imgs/dm/ad-operation-08.png" alt="" class="img-fluid">
+                </div>
+                <div class="col-6">
+                  <img src="/imgs/dm/ad-operation-09.png" alt="" class="img-fluid">
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-        <div class="col-12 col-sm-11 col-lg-8 mx-auto position-relative" style="margin-top: 100px;">
+        <!-- <div class="col-12 col-sm-11 col-lg-8 mx-auto position-relative" style="margin-top: 100px;">
           <section class="accreditation">
-            <img src="/imgs/dm/operation_05.png" alt="">
+            <img src="/imgs/dm/ad-operation-10.png" alt="">
             <p class="m-0 text-center fw-bold">工業局認證 AI智慧廣告投放技術</p>
           </section>
-          <img class="img-fluid" src="/imgs/dm/operation_06.png" alt="">
-          <img class="img-fluid mt-5 mb-3 d-none d-sm-block" src="/imgs/dm/operation_07.png" alt="">
-          <img class="img-fluid mt-5 mb-3 d-block d-sm-none mx-auto" src="/imgs/dm/operation_08.png" alt=""
+          <img class="img-fluid" src="/imgs/dm/ad-operation-11.png" alt="">
+          <img class="img-fluid mt-5 mb-3 d-none d-sm-block" src="/imgs/dm/ad-operation-12.png" alt="">
+          <img class="img-fluid mt-5 mb-3 d-block d-sm-none mx-auto" src="/imgs/dm/ad-operation-13.png" alt=""
             style="width: 60%;">
-        </div>
+        </div> -->
       </div>
     </div>
+
+    <img src="/imgs/dm/ad-operation-03.png" alt="" class="img-fluid">
+
+    <div class="container">
+      <div class="row">
+    <div class="col-12 col-sm-11 col-lg-8 mx-auto position-relative" style="margin-top: 100px;">
+      <section class="accreditation">
+        <img src="/imgs/dm/ad-operation-10.png" alt="">
+        <p class="m-0 text-center fw-bold">工業局認證 AI智慧廣告投放技術</p>
+      </section>
+      <img class="img-fluid" src="/imgs/dm/ad-operation-11.png" alt="">
+      <img class="img-fluid mt-5 mb-3 d-none d-sm-block" src="/imgs/dm/ad-operation-12.png" alt="">
+      <img class="img-fluid mt-5 mb-3 d-block d-sm-none mx-auto" src="/imgs/dm/ad-operation-13.png" alt=""
+        style="width: 60%;">
+    </div>
+  </div>
+</div>
+
+<section class="my-3 my-lg-4 d-flex align-items-center justify-content-center flex-column flex-md-row data-text">
+  <p>現在就填寫資料，</p>
+  <p>開啟廣告投放之路吧！</p>
+  <img src="/imgs/dm/circle-02.webp" alt="" class="circle">
+</section>
+
     <div class="container loaded pageForm">
       <div class="row">
         <div class="col-12 col-md-6">
@@ -520,39 +289,7 @@
 
     </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>
+  {{ partial "footer.html" . }}
   <script type="application/javascript">
     var doNotTrack = false;
     if (!doNotTrack) {

layouts/partials/navbar.html

@@ -19,7 +19,7 @@
             服務
           </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="/ad-operation/dm/">AI 廣告投放</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>

layouts/partials/pageFormBtn.html

@@ -0,0 +1,14 @@
+<div class="pageForm-btn">
+  <button>
+    <img src="/imgs/icon/edit.png" alt="" width="30">
+  </button>
+</div>
+
+<script>
+  let btn = document.querySelector('.pageForm-btn');
+
+  btn.addEventListener('click', () => {
+    let element = document.querySelector('.pageForm');
+    window.scrollTo(0, element.offsetTop - 200);
+  })
+</script>

static/css/style.css

@@ -151,6 +151,29 @@
   left: -300px;
 }
 
+.pageForm-btn {
+  position: fixed;
+  bottom: 90px;
+  right: 17px;
+  z-index: 1000;
+  cursor: pointer;
+}
+.pageForm-btn button {
+  width: 60px;
+  height: 60px;
+  border: none;
+  border-radius: 100%;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 6px, rgba(0, 0, 0, 0.2) 0px 2px 24px;
+  background-image: linear-gradient(-225deg, rgb(241, 95, 121) 35%, rgb(178, 69, 146) 100%);
+}
+.pageForm-btn button:hover {
+  opacity: 0.9;
+}
+.pageForm-btn button img {
+  cursor: pointer;
+  filter: invert(99%) sepia(0%) saturate(2%) hue-rotate(31deg) brightness(107%) contrast(100%);
+}
+
 /* footer.html Start */
 .footer {
   color: #656565;
@@ -1091,6 +1114,551 @@
 }
 
 /* ai-anchor End */
+/* ad-operation Start */
+#ad-operation {
+  overflow-x: hidden;
+}
+#ad-operation .header {
+  height: auto;
+  margin-top: -20px;
+}
+#ad-operation .header p {
+  font-weight: bold;
+  line-height: 32px;
+}
+#ad-operation .header p span {
+  font-size: 20px;
+  color: #ea5413;
+}
+#ad-operation .header .banner {
+  position: relative;
+}
+#ad-operation .header .banner .img {
+  max-width: 100vw;
+  height: auto;
+}
+#ad-operation .header .banner .text {
+  width: 100%;
+  position: absolute;
+  z-index: 100;
+  left: -20px;
+  top: -90px;
+}
+@media (max-width: 1200px) {
+  #ad-operation .header .banner .text {
+    top: -70px;
+  }
+}
+@media (max-width: 767px) {
+  #ad-operation .header .banner .text {
+    top: -40px;
+  }
+}
+@media (max-width: 575px) {
+  #ad-operation .header .banner .text {
+    top: -25px;
+  }
+}
+#ad-operation .header .banner .slogen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  top: 63vw;
+}
+#ad-operation .header .banner .slogen h3 {
+  margin-bottom: 0;
+  font-size: 40px;
+  font-weight: bold;
+}
+@media (max-width: 1200px) {
+  #ad-operation .header .banner .slogen h3 {
+    font-size: 33px;
+  }
+}
+@media (max-width: 991px) {
+  #ad-operation .header .banner .slogen h3 {
+    font-size: 28px;
+  }
+}
+@media (max-width: 767px) {
+  #ad-operation .header .banner .slogen h3 {
+    font-size: 20px;
+  }
+}
+@media (max-width: 575px) {
+  #ad-operation .header .banner .slogen h3 {
+    font-size: 16px;
+  }
+}
+#ad-operation .header .banner .slogen h3 span {
+  margin: 20px 0;
+  display: inline-block;
+  font-size: 70px;
+  color: #900381;
+}
+@media (max-width: 1200px) {
+  #ad-operation .header .banner .slogen h3 span {
+    font-size: 58px;
+  }
+}
+@media (max-width: 991px) {
+  #ad-operation .header .banner .slogen h3 span {
+    margin: 10px 0;
+    font-size: 50px;
+  }
+}
+@media (max-width: 767px) {
+  #ad-operation .header .banner .slogen h3 span {
+    font-size: 36px;
+  }
+}
+@media (max-width: 575px) {
+  #ad-operation .header .banner .slogen h3 span {
+    margin: 5px 0;
+    font-size: 20px;
+  }
+}
+#ad-operation .header .banner .slogen h3 .point {
+  color: #dd541a;
+}
+#ad-operation .header .banner .slogen h3 small {
+  margin-left: 5px;
+  color: #868585;
+  text-decoration: line-through;
+}
+#ad-operation .header .banner .slogen h4 {
+  font-size: 46px;
+  font-weight: bold;
+}
+@media (max-width: 1200px) {
+  #ad-operation .header .banner .slogen h4 {
+    font-size: 38px;
+  }
+}
+@media (max-width: 991px) {
+  #ad-operation .header .banner .slogen h4 {
+    font-size: 32px;
+  }
+}
+@media (max-width: 767px) {
+  #ad-operation .header .banner .slogen h4 {
+    font-size: 24px;
+  }
+}
+@media (max-width: 575px) {
+  #ad-operation .header .banner .slogen h4 {
+    font-size: 14px;
+  }
+}
+#ad-operation .header .banner .slogen button {
+  margin-top: 30px;
+}
+@media (max-width: 991px) {
+  #ad-operation .header .banner .slogen button {
+    margin-top: 10px;
+  }
+}
+@media (max-width: 575px) {
+  #ad-operation .header .banner .slogen button {
+    margin-top: 5px;
+  }
+}
+#ad-operation .header-title {
+  color: #000;
+  font-weight: bold;
+  letter-spacing: 5px;
+}
+#ad-operation .img-content {
+  display: flex;
+  justify-content: center;
+  margin: -550px auto 0;
+  position: relative;
+  z-index: 100;
+  width: 1300px;
+}
+@media (max-width: 1200px) {
+  #ad-operation .img-content {
+    width: 1000px;
+    margin: -400px auto 0;
+  }
+}
+@media (max-width: 991px) {
+  #ad-operation .img-content {
+    width: 700px;
+    margin: -300px auto 0;
+  }
+}
+@media (max-width: 767px) {
+  #ad-operation .img-content {
+    width: 600px;
+    margin: -250px auto 0;
+  }
+}
+@media (max-width: 575px) {
+  #ad-operation .img-content {
+    left: -10px;
+    width: 350px;
+  }
+}
+#ad-operation .img-content img {
+  width: 100%;
+}
+@media (max-width: 575px) {
+  #ad-operation .img-content img {
+    width: 140%;
+  }
+}
+#ad-operation .img-content h4 {
+  position: absolute;
+  font-size: 30px;
+  line-height: 40px;
+  font-weight: bold;
+  text-align: center;
+}
+@media (max-width: 1200px) {
+  #ad-operation .img-content h4 {
+    font-size: 22px;
+    line-height: 30px;
+  }
+}
+@media (max-width: 991px) {
+  #ad-operation .img-content h4 {
+    font-size: 16px;
+    line-height: 24px;
+  }
+}
+@media (max-width: 767px) {
+  #ad-operation .img-content h4 {
+    font-size: 14px;
+    line-height: 20px;
+  }
+}
+@media (max-width: 575px) {
+  #ad-operation .img-content h4 {
+    font-size: 12px;
+  }
+}
+#ad-operation .img-content .left {
+  top: 320px;
+  left: 280px;
+}
+@media (max-width: 1200px) {
+  #ad-operation .img-content .left {
+    top: 245px;
+    left: 218px;
+  }
+}
+@media (max-width: 991px) {
+  #ad-operation .img-content .left {
+    top: 170px;
+    left: 150px;
+  }
+}
+@media (max-width: 767px) {
+  #ad-operation .img-content .left {
+    top: 145px;
+    left: 128px;
+  }
+}
+@media (max-width: 575px) {
+  #ad-operation .img-content .left {
+    top: 115px;
+    left: 32px;
+  }
+}
+#ad-operation .img-content .center {
+  top: 420px;
+  left: 600px;
+}
+@media (max-width: 1200px) {
+  #ad-operation .img-content .center {
+    top: 325px;
+    left: 465px;
+  }
+}
+@media (max-width: 991px) {
+  #ad-operation .img-content .center {
+    top: 225px;
+    left: 323px;
+  }
+}
+@media (max-width: 767px) {
+  #ad-operation .img-content .center {
+    top: 193px;
+    left: 278px;
+  }
+}
+@media (max-width: 575px) {
+  #ad-operation .img-content .center {
+    top: 153px;
+    left: 155px;
+  }
+}
+#ad-operation .img-content .right {
+  top: 545px;
+  right: 240px;
+}
+@media (max-width: 1200px) {
+  #ad-operation .img-content .right {
+    top: 420px;
+    right: 188px;
+  }
+}
+@media (max-width: 991px) {
+  #ad-operation .img-content .right {
+    top: 290px;
+    right: 130px;
+  }
+}
+@media (max-width: 767px) {
+  #ad-operation .img-content .right {
+    top: 250px;
+    right: 109px;
+  }
+}
+@media (max-width: 575px) {
+  #ad-operation .img-content .right {
+    top: 200px;
+    right: 17px;
+  }
+}
+#ad-operation .dm-description h2 {
+  margin: 0;
+  padding: 8px 10px;
+  color: #fff;
+  display: inline-block;
+  text-align: center;
+  font-size: 24px;
+  line-height: 33px;
+  border-radius: 10px;
+  background: #ea5413;
+}
+#ad-operation .dm-description h5 {
+  font-size: 16px;
+  line-height: 32px;
+}
+#ad-operation .dm-description h5 strong {
+  padding-bottom: 3px;
+  background: linear-gradient(to bottom, #fff 50%, #ffebe2 50%);
+}
+#ad-operation .dm-description .purple-circle {
+  top: 100px;
+}
+#ad-operation .card-content > div {
+  display: flex;
+  flex-direction: column;
+  border: 2px solid #ea5413;
+  border-radius: 10px;
+}
+#ad-operation .card-content h3 {
+  width: 60%;
+  margin: -17px auto 0;
+  padding: 8px 5px;
+  display: inline-block;
+  color: #fff;
+  background: #ea5413;
+  text-align: center;
+  font-size: 18px;
+  font-weight: bold;
+  letter-spacing: 2px;
+  border-radius: 10px;
+  box-shadow: 2px 2px 5px #ccc;
+}
+@media (max-width: 576px) {
+  #ad-operation .card-content h3 {
+    width: auto;
+    padding: 7px 15px;
+    font-size: 16px;
+  }
+}
+#ad-operation .card-content h4,
+#ad-operation .card-content .table {
+  margin-top: 25px;
+  padding: 20px;
+  font-size: 14px;
+  line-height: 32px;
+  background: #ffebe2;
+}
+#ad-operation .card-content h4 span,
+#ad-operation .card-content .table span {
+  display: block;
+  border-bottom: 1px solid;
+}
+#ad-operation .card-content h4 strong,
+#ad-operation .card-content .table strong {
+  font-size: 20px;
+}
+#ad-operation .card-content h4 p,
+#ad-operation .card-content .table p {
+  margin: 0;
+  line-height: 20px;
+}
+#ad-operation .content-box {
+  width: 65%;
+  margin: auto;
+  padding: 30px 0;
+  display: flex;
+  justify-content: center;
+  background: #ffebe2;
+  border: 2px solid #ffebe2;
+  position: relative;
+}
+@media (max-width: 991px) {
+  #ad-operation .content-box {
+    width: 90%;
+  }
+}
+@media (max-width: 767px) {
+  #ad-operation .content-box {
+    width: 100%;
+  }
+}
+@media (max-width: 475px) {
+  #ad-operation .content-box {
+    padding-left: 10px;
+  }
+}
+#ad-operation .content-box p {
+  margin: 0;
+  line-height: 32px;
+}
+@media (max-width: 767px) {
+  #ad-operation .content-box p {
+    font-size: 14px;
+  }
+}
+@media (max-width: 475px) {
+  #ad-operation .content-box p {
+    font-size: 13px;
+  }
+}
+#ad-operation .content-box h4 {
+  font-size: 22px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+@media (max-width: 767px) {
+  #ad-operation .content-box h4 {
+    font-size: 18px;
+  }
+}
+@media (max-width: 475px) {
+  #ad-operation .content-box h4 {
+    font-size: 14px;
+    white-space: nowrap;
+  }
+}
+#ad-operation .content-box .line {
+  height: 3px;
+  background: #fff;
+  width: 950px;
+  position: absolute;
+  left: -200px;
+  top: 35px;
+}
+@media (max-width: 767px) {
+  #ad-operation .content-box .line {
+    top: 33px;
+  }
+}
+@media (max-width: 575px) {
+  #ad-operation .content-box .line {
+    top: 30px;
+  }
+}
+#ad-operation .content-badge {
+  position: absolute;
+  left: 0;
+  top: -53px;
+  padding: 5px 10px;
+  background: #ea5413;
+  border-radius: 10px;
+  font-size: 22px;
+  font-weight: bold;
+  color: #fff;
+}
+#ad-operation .pageForm {
+  line-height: 32px;
+  letter-spacing: 1px;
+  background: #fff;
+}
+#ad-operation .header-lefttop {
+  width: 100%;
+  position: absolute;
+  left: -35vw;
+  top: 400px;
+  z-index: -1;
+  opacity: 0.5;
+}
+#ad-operation .category.dm-description {
+  padding: 2rem 8rem;
+}
+@media (max-width: 991px) {
+  #ad-operation .category.dm-description {
+    padding: 2rem 3rem;
+  }
+}
+@media (max-width: 767px) {
+  #ad-operation .category.dm-description {
+    padding: 2rem 0rem;
+  }
+}
+#ad-operation .accreditation p {
+  font-size: 24px;
+}
+@media (max-width: 575px) {
+  #ad-operation .accreditation p {
+    font-size: 20px;
+  }
+}
+#ad-operation .accreditation img {
+  width: 150px;
+  position: absolute;
+  top: -35px;
+  left: -25px;
+}
+@media (max-width: 767px) {
+  #ad-operation .accreditation img {
+    width: 135px;
+    left: -50px;
+  }
+}
+@media (max-width: 575px) {
+  #ad-operation .accreditation img {
+    width: 120px;
+    top: -80px;
+    left: -20px;
+  }
+}
+#ad-operation .purple-circle {
+  width: 40%;
+  top: -400px;
+  right: -150px;
+  position: absolute;
+  z-index: -100;
+}
+@media (max-width: 991px) {
+  #ad-operation .purple-circle {
+    width: 60%;
+  }
+}
+@media (max-width: 767px) {
+  #ad-operation .purple-circle {
+    top: -300px;
+  }
+}
+#ad-operation .data-text .circle {
+  top: -220px;
+  left: -5vw;
+}
+@media (max-width: 767px) {
+  #ad-operation .data-text .circle {
+    top: -100px;
+  }
+}
+
+/* ad-operation End */
 /* blog-traffic Start */
 .blog-traffic {
   overflow-x: hidden;

static/css/style.scss

@@ -159,6 +159,29 @@
   left: -300px;
 }
 
+.pageForm-btn {
+  position: fixed;
+  bottom: 90px;
+  right: 17px;
+  z-index: 1000;
+  cursor: pointer;
+  button {
+    width: 60px;
+    height: 60px;
+    border: none;
+    border-radius: 100%;
+    box-shadow: rgb(0 0 0 / 10%) 0px 1px 6px, rgb(0 0 0 / 20%) 0px 2px 24px;
+    background-image: linear-gradient(-225deg, rgb(241, 95, 121) 35%, rgb(178, 69, 146) 100%);
+    &:hover{
+      opacity: .9;
+    }
+    img {
+      cursor: pointer;
+      filter: invert(99%) sepia(0%) saturate(2%) hue-rotate(31deg) brightness(107%) contrast(100%);
+    }
+  }
+}
+
 /* footer.html Start */
 
 .footer {
@@ -1114,6 +1137,480 @@
 
 /* ai-anchor End */
 
+/* ad-operation Start */
+
+#ad-operation {
+  overflow-x: hidden;
+  .header {
+    height: auto;
+    margin-top: -20px;
+    p {
+      font-weight: bold;
+      line-height: 32px;
+      span {
+        font-size: 20px;
+        color: #ea5413;
+      }
+    }
+    .banner {
+      position: relative;
+      .img {
+        max-width: 100vw;
+        height: auto;
+      }
+      .text {
+        width: 100%;
+        position: absolute;
+        z-index: 100;
+        left: -20px;
+        top: -90px;
+        @media (max-width: 1200px) {
+          top: -70px;
+        }
+        @media (max-width: 767px) {
+          top: -40px;
+        }
+        @media (max-width: 575px) {
+          top: -25px;
+        }
+      }
+      .slogen {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: absolute;
+        top: 63vw;
+        // @media (max-width: 1200px) {
+        //   margin-top: 44vw;
+        // }
+        h3 {
+          margin-bottom: 0;
+          font-size: 40px;
+          font-weight: bold;
+          @media (max-width: 1200px) {
+            font-size: 33px;
+          }
+          @media (max-width: 991px) {
+            font-size: 28px;
+          }
+          @media (max-width: 767px) {
+            font-size: 20px;
+          }
+          @media (max-width: 575px) {
+            font-size: 16px;
+          }
+          span {
+            margin: 20px 0;
+            display: inline-block;
+            font-size: 70px;
+            color: #900381;
+            @media (max-width: 1200px) {
+              font-size: 58px;
+            }
+            @media (max-width: 991px) {
+              margin: 10px 0;
+              font-size: 50px;
+            }
+            @media (max-width: 767px) {
+              font-size: 36px;
+            }
+            @media (max-width: 575px) {
+              margin: 5px 0;
+              font-size: 20px;
+            }
+          }
+          .point {
+            color: #dd541a;
+          }
+          small {
+            margin-left: 5px;
+            color: #868585;
+            text-decoration: line-through;
+          }
+        }
+        h4 {
+          font-size: 46px;
+          font-weight: bold;
+          @media (max-width: 1200px) {
+            font-size: 38px;
+          }
+          @media (max-width: 991px) {
+            font-size: 32px;
+          }
+          @media (max-width: 767px) {
+            font-size: 24px;
+          }
+          @media (max-width: 575px) {
+            font-size: 14px;
+          }
+        }
+        button {
+          margin-top: 30px;
+          @media (max-width: 991px) {
+            margin-top: 10px;
+          }
+          @media (max-width: 575px) {
+            margin-top: 5px;
+          }
+        }
+      }
+    }
+  }
+
+  .header-title {
+    color: #000;
+    font-weight: bold;
+    letter-spacing: 5px;
+  }
+
+  .img-content {
+    display: flex;
+    justify-content: center;
+    margin: -550px auto 0;
+    position: relative;
+    z-index: 100;
+    width: 1300px;
+
+    @media (max-width: 1200px) {
+      width: 1000px;
+      margin: -400px auto 0;
+    }
+    @media (max-width: 991px) {
+      width: 700px;
+      margin: -300px auto 0;
+    }
+    @media (max-width: 767px) {
+      width: 600px;
+      margin: -250px auto 0;
+    }
+    @media (max-width: 575px) {
+      left: -10px;
+      width: 350px;
+    }
+    img {
+      width: 100%;
+      @media (max-width: 575px) {
+        width: 140%;
+      }
+    }
+    h4 {
+      position: absolute;
+      font-size: 30px;
+      line-height: 40px;
+      font-weight: bold;
+      text-align: center;
+      @media (max-width: 1200px) {
+        font-size: 22px;
+        line-height: 30px;
+      }
+      @media (max-width: 991px) {
+        font-size: 16px;
+        line-height: 24px;
+      }
+      @media (max-width: 767px) {
+        font-size: 14px;
+        line-height: 20px;
+      }
+      @media (max-width: 575px) {
+        font-size: 12px;
+      }
+    }
+    .left {
+      top: 320px;
+      left: 280px;
+      @media (max-width: 1200px) {
+        top: 245px;
+        left: 218px;
+      }
+      @media (max-width: 991px) {
+        top: 170px;
+        left: 150px;
+      }
+      @media (max-width: 767px) {
+        top: 145px;
+        left: 128px;
+      }
+      @media (max-width: 575px) {
+        top: 115px;
+        left: 32px;
+      }
+    }
+    .center {
+      top: 420px;
+      left: 600px;
+      @media (max-width: 1200px) {
+        top: 325px;
+        left: 465px;
+      }
+      @media (max-width: 991px) {
+        top: 225px;
+        left: 323px;
+      }
+      @media (max-width: 767px) {
+        top: 193px;
+        left: 278px;
+      }
+      @media (max-width: 575px) {
+        top: 153px;
+        left: 155px;
+      }
+    }
+    .right {
+      top: 545px;
+      right: 240px;
+      @media (max-width: 1200px) {
+        top: 420px;
+        right: 188px;
+      }
+      @media (max-width: 991px) {
+        top: 290px;
+        right: 130px;
+      }
+      @media (max-width: 767px) {
+        top: 250px;
+        right: 109px;
+      }
+      @media (max-width: 575px) {
+        top: 200px;
+        right: 17px;
+      }
+    }
+  }
+
+  .dm-description {
+    h2 {
+      margin: 0;
+      padding: 8px 10px;
+      color: #fff;
+      display: inline-block;
+      text-align: center;
+      font-size: 24px;
+      line-height: 33px;
+      border-radius: 10px;
+      background: #ea5413;
+    }
+    h5 {
+      font-size: 16px;
+      line-height: 32px;
+      strong {
+        padding-bottom: 3px;
+        background: linear-gradient(to bottom, #fff 50%, #ffebe2 50%);
+        // border-bottom: 3px solid rgb(248, 228, 72);
+      }
+    }
+    .purple-circle {
+      top: 100px;
+    }
+  }
+
+  .card-content {
+    & > div {
+      display: flex;
+      flex-direction: column;
+      // border: 2px solid #ffebe2;
+      border: 2px solid #ea5413;
+      border-radius: 10px;
+    }
+    h3 {
+      width: 60%;
+      margin: -17px auto 0;
+      padding: 8px 5px;
+      display: inline-block;
+      color: #fff;
+      background: #ea5413;
+      text-align: center;
+      font-size: 18px;
+      font-weight: bold;
+      letter-spacing: 2px;
+      border-radius: 10px;
+      box-shadow: 2px 2px 5px #ccc;
+      @media (max-width: 576px) {
+        width: auto;
+        padding: 7px 15px;
+        font-size: 16px;
+      }
+    }
+
+    h4,
+    .table {
+      margin-top: 25px;
+      padding: 20px;
+      font-size: 14px;
+      line-height: 32px;
+      background: #ffebe2;
+      span {
+        display: block;
+        border-bottom: 1px solid;
+      }
+      strong {
+        font-size: 20px;
+      }
+      p {
+        margin: 0;
+        line-height: 20px;
+      }
+    }
+  }
+
+  .content-box {
+    width: 65%;
+    margin: auto;
+    padding: 30px 0;
+    display: flex;
+    justify-content: center;
+    background: #ffebe2;
+    border: 2px solid #ffebe2;
+    position: relative;
+    @media (max-width: 991px) {
+      width: 90%;
+    }
+
+    @media (max-width: 767px) {
+      width: 100%;
+    }
+
+    @media (max-width: 475px) {
+      padding-left: 10px;
+    }
+
+    p {
+      margin: 0;
+      line-height: 32px;
+      @media (max-width: 767px) {
+        font-size: 14px;
+      }
+      @media (max-width: 475px) {
+        font-size: 13px;
+      }
+    }
+    h4 {
+      font-size: 22px;
+      font-weight: bold;
+      margin-bottom: 20px;
+      @media (max-width: 767px) {
+        font-size: 18px;
+      }
+      @media (max-width: 475px) {
+        font-size: 14px;
+        white-space: nowrap;
+      }
+    }
+    .line {
+      height: 3px;
+      background: #fff;
+      width: 950px;
+      position: absolute;
+      left: -200px;
+      top: 35px;
+
+      @media (max-width: 767px) {
+        top: 33px;
+      }
+      @media (max-width: 575px) {
+        top: 30px;
+      }
+    }
+  }
+
+  .content-badge {
+    position: absolute;
+    left: 0;
+    top: -53px;
+    padding: 5px 10px;
+    background: #ea5413;
+    border-radius: 10px;
+    font-size: 22px;
+    font-weight: bold;
+    color: #fff;
+  }
+
+  .pageForm {
+    line-height: 32px;
+    letter-spacing: 1px;
+    background: #fff;
+  }
+
+  // .header-lefttop {
+  //   width: 60%;
+  //   position: absolute;
+  //   left: 10vw;
+  //   top: -13vw;
+  //   z-index: -1;
+  //   @media (max-width: 767px) {
+  //     left: 20vw;
+  //   }
+  // }
+
+  .header-lefttop {
+    width: 100%;
+    position: absolute;
+    left: -35vw;
+    top: 400px;
+    z-index: -1;
+    opacity: 0.5;
+  }
+
+  .category.dm-description {
+    padding: 2rem 8rem;
+    @media (max-width: 991px) {
+      padding: 2rem 3rem;
+    }
+    @media (max-width: 767px) {
+      padding: 2rem 0rem;
+    }
+  }
+
+  .accreditation {
+    p {
+      font-size: 24px;
+
+      @media (max-width: 575px) {
+        font-size: 20px;
+      }
+    }
+    img {
+      width: 150px;
+      position: absolute;
+      top: -35px;
+      left: -25px;
+      @media (max-width: 767px) {
+        width: 135px;
+        left: -50px;
+      }
+
+      @media (max-width: 575px) {
+        width: 120px;
+        top: -80px;
+        left: -20px;
+      }
+    }
+  }
+
+  .purple-circle {
+    width: 40%;
+    top: -400px;
+    right: -150px;
+    position: absolute;
+    z-index: -100;
+    @media (max-width: 991px) {
+      width: 60%;
+    }
+    @media (max-width: 767px) {
+      top: -300px;
+    }
+  }
+
+  .data-text .circle {
+    top: -220px;
+    left: -5vw;
+    @media (max-width: 767px) {
+      top: -100px;
+    }
+  }
+}
+
+/* ad-operation End */
+
 /* blog-traffic Start */
 
 .blog-traffic {

webSite/config.toml

@@ -37,7 +37,7 @@ page = ["HTML"]
 
 [[menu.main]]
     identifier="ad-operation"
-    name = "廣告代操"
+    name = "AI 廣告投放"
     url = "/ad-operation/dm/"
     weight = 1
     parent = "home"