update

layouts/ad-operation/single.html

@@ -12,7 +12,7 @@
   <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>
+  <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script> -->
   <!-- End of HubSpot Embed Code -->
 </head>
 

layouts/ai-anchor/single.html

@@ -12,7 +12,7 @@
   <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>
+  <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script> -->
   <!-- End of HubSpot Embed Code -->
 </head>
 

layouts/ai-copywriter/single.html

@@ -12,7 +12,7 @@
   <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>
+  <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script> -->
   <!-- End of HubSpot Embed Code -->
 
   <!-- Google Tag Manager -->
@@ -73,7 +73,120 @@
     </section>
 
     <div class="container my-5 py-5">
-      <div class="row align-items-center justify-content-center">
+      <!-- 訂閱卡片 -->
+      <div class="mb-3 d-flex justify-content-center">
+        <h2 class="blogtab-title">訂閱制方案</h2>
+      </div>
+
+      <div class="row mb-5 g-4 g-xl-5">
+        <div class="col-12 col-md-4">
+          <div class="pay-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">
+                  <h5 class="card-title mb-2 fw-bold">季訂方案</h5>
+                </section>
+              </div>
+              <p class="card-text price">
+                NT$3,600
+              </p>
+              <div class="mx-auto">
+                <ul>
+                  <li class="card-text">
+                    <img width="30" src="/imgs/icon/check.png" alt="">
+                    解決公關危機
+                  </li>
+                  <li class="card-text">
+                    <img width="30" src="/imgs/icon/check.png" alt="">
+                    建立品牌形象
+                  </li>
+                  <li class="card-text">
+                    <img width="30" src="/imgs/icon/check.png" alt="">
+                    全自動化監控
+                  </li>
+                  <li class="card-text">
+                    <img width="30" src="/imgs/icon/check.png" alt="">
+                    定期成效報告
+                  </li>
+                </ul>
+              </div>
+              <a href="https://cloud.choozmo.com/ai-reporter" target="_blank" class="buy-btn my-3">Buy Now</a>
+            </div>
+          </div>
+        </div>
+        <div class="col-12 col-md-4">
+          <div class="pay-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">
+                  <h5 class="card-title mb-2 fw-bold">半年方案</h5>
+                </section>
+              </div>
+              <p class="card-text price">
+                NT$5,040
+              </p>
+              <div class="mx-auto">
+                <ul>
+                  <li class="card-text">
+                    <img width="30" src="/imgs/icon/check.png" alt="">
+                    解決公關危機
+                  </li>
+                  <li class="card-text">
+                    <img width="30" src="/imgs/icon/check.png" alt="">
+                    建立品牌形象
+                  </li>
+                  <li class="card-text">
+                    <img width="30" src="/imgs/icon/check.png" alt="">
+                    全自動化監控
+                  </li>
+                  <li class="card-text">
+                    <img width="30" src="/imgs/icon/check.png" alt="">
+                    定期成效報告
+                  </li>
+                </ul>
+              </div>
+              <a href="https://cloud.choozmo.com/ai-reporter" target="_blank" class="buy-btn my-3">Buy Now</a>
+            </div>
+          </div>
+        </div>
+        <div class="col-12 col-md-4">
+          <div class="pay-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">
+                  <h5 class="card-title mb-2 fw-bold">一年方案</h5>
+                </section>
+              </div>
+              <p class="card-text price">
+                NT$7,200
+              </p>
+              <div class="mx-auto">
+                <ul>
+                  <li class="card-text">
+                    <img width="30" src="/imgs/icon/check.png" alt="">
+                    解決公關危機
+                  </li>
+                  <li class="card-text">
+                    <img width="30" src="/imgs/icon/check.png" alt="">
+                    建立品牌形象
+                  </li>
+                  <li class="card-text">
+                    <img width="30" src="/imgs/icon/check.png" alt="">
+                    全自動化監控
+                  </li>
+                  <li class="card-text">
+                    <img width="30" src="/imgs/icon/check.png" alt="">
+                    定期成效報告
+                  </li>
+                </ul>
+              </div>
+              <a href="https://cloud.choozmo.com/ai-reporter" target="_blank" class="buy-btn my-3">Buy Now</a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="row mt-5 pt-5 align-items-center justify-content-center">
         <div class="col-12 col-lg-5 d-flex justify-content-center">
           <img src="/imgs/dm/seo/2.webp" alt="" class="img-fluid">
         </div>

layouts/ai-kiosk/single.html

@@ -12,7 +12,7 @@
   <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>
+  <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script> -->
   <!-- End of HubSpot Embed Code -->
 
   <!-- Google Tag Manager -->

layouts/ai-transform-video/single.html

@@ -12,7 +12,7 @@
   <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>
+  <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script> -->
   <!-- End of HubSpot Embed Code -->
 
   <!-- Google Tag Manager -->

layouts/bigdata/single.html

@@ -12,7 +12,7 @@
   <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>
+  <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script> -->
   <!-- End of HubSpot Embed Code -->
 </head>
 

layouts/blog-traffic/single.html

@@ -12,7 +12,7 @@
   <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>
+  <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script> -->
   <!-- End of HubSpot Embed Code -->
 </head>
 

layouts/contact/single.html

@@ -17,7 +17,7 @@
   <link rel="stylesheet" href="/css/style.css">
   <link rel="stylesheet" href="/css/contact/styles-contact.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>
+  <!-- <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>
     #heading-breadcrumbs {

layouts/crawler/single.html

@@ -12,7 +12,7 @@
   <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>
+  <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script> -->
   <!-- End of HubSpot Embed Code -->
 </head>
 

layouts/genseo/single.html

@@ -12,7 +12,7 @@
   <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>
+  <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script> -->
   <!-- End of HubSpot Embed Code -->
 
   <!-- Google Tag Manager -->

layouts/ip/single.html

@@ -12,7 +12,7 @@
   <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>
+  <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script> -->
   <!-- End of HubSpot Embed Code -->
 </head>
 

layouts/partials/components/ai-reporter.html

@@ -3,6 +3,118 @@
     <img src="imgs/home/ai-reporter/cover.jpg" alt="AI記者｜語音專訪" class="img-fluid">
   </div>
 
+  <!-- <div class="mt-5 d-flex justify-content-center">
+    <h2 class="blogtab-title">訂閱制方案</h2>
+  </div>
+
+  <div class="row g-4 g-xl-5">
+    <div class="col-12 col-md-4">
+      <div class="pay-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">
+              <h5 class="card-title mb-2 fw-bold">季訂方案</h5>
+            </section>
+          </div>
+          <p class="card-text price">
+            NT$3,600
+          </p>
+          <div class="mx-auto">
+            <ul>
+              <li class="card-text">
+                <img width="30" src="/imgs/icon/check.png" alt="">
+                解決公關危機
+              </li>
+              <li class="card-text">
+                <img width="30" src="/imgs/icon/check.png" alt="">
+                建立品牌形象
+              </li>
+              <li class="card-text">
+                <img width="30" src="/imgs/icon/check.png" alt="">
+                全自動化監控
+              </li>
+              <li class="card-text">
+                <img width="30" src="/imgs/icon/check.png" alt="">
+                定期成效報告
+              </li>
+            </ul>
+          </div>
+          <a href="https://cloud.choozmo.com/ai-reporter" target="_blank" class="buy-btn my-3">Buy Now</a>
+        </div>
+      </div>
+    </div>
+    <div class="col-12 col-md-4">
+      <div class="pay-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">
+              <h5 class="card-title mb-2 fw-bold">半年方案</h5>
+            </section>
+          </div>
+          <p class="card-text price">
+            NT$5,040
+          </p>
+          <div class="mx-auto">
+            <ul>
+              <li class="card-text">
+                <img width="30" src="/imgs/icon/check.png" alt="">
+                解決公關危機
+              </li>
+              <li class="card-text">
+                <img width="30" src="/imgs/icon/check.png" alt="">
+                建立品牌形象
+              </li>
+              <li class="card-text">
+                <img width="30" src="/imgs/icon/check.png" alt="">
+                全自動化監控
+              </li>
+              <li class="card-text">
+                <img width="30" src="/imgs/icon/check.png" alt="">
+                定期成效報告
+              </li>
+            </ul>
+          </div>
+          <a href="https://cloud.choozmo.com/ai-reporter" target="_blank" class="buy-btn my-3">Buy Now</a>
+        </div>
+      </div>
+    </div>
+    <div class="col-12 col-md-4">
+      <div class="pay-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">
+              <h5 class="card-title mb-2 fw-bold">一年方案</h5>
+            </section>
+          </div>
+          <p class="card-text price">
+            NT$7,200
+          </p>
+          <div class="mx-auto">
+            <ul>
+              <li class="card-text">
+                <img width="30" src="/imgs/icon/check.png" alt="">
+                解決公關危機
+              </li>
+              <li class="card-text">
+                <img width="30" src="/imgs/icon/check.png" alt="">
+                建立品牌形象
+              </li>
+              <li class="card-text">
+                <img width="30" src="/imgs/icon/check.png" alt="">
+                全自動化監控
+              </li>
+              <li class="card-text">
+                <img width="30" src="/imgs/icon/check.png" alt="">
+                定期成效報告
+              </li>
+            </ul>
+          </div>
+          <a href="https://cloud.choozmo.com/ai-reporter" target="_blank" class="buy-btn my-3">Buy Now</a>
+        </div>
+      </div>
+    </div>
+  </div> -->
+
   <div class="row mt-5 mt-lg-0">
     <div class="col-md-4 info">
       <img src="imgs/home/ai-reporter/素材-01.png" alt="" class="material">
@@ -10,7 +122,7 @@
         <h3>AI記者訪問<br>語音回答省時間</h3>
         <img src="imgs/home/ai-reporter/素材-03.png" alt="">
       </span>
-      <p>AI自動將中文探訪翻譯成外語<br>並推廣到外文媒體</p>
+      <p>AI自動將中文訪談翻譯成外語<br>並推廣到外文媒體</p>
     </div>
 
     <div class="col-md-4 info">

layouts/partials/footer.html

@@ -39,6 +39,9 @@
     </div>
   </div>
 
+  <!-- AI 客服嵌入按鈕 -->
+  <iframe id="iframe-content" src="https://cmm.ai/chuz/#/" allow="microphone" scrolling="no"></iframe>
+
   <!-- LINE 按鈕 -->
   <div class="line-btn">
     <a href="https://lin.ee/jYalbZq" target="_blank">
@@ -46,13 +49,6 @@
     </a>
   </div>
 
-  <iframe src="https://cmm.ai/chuz/#/" width="375px" height="650px" allow="microphone" id="responsive-iframe"
-    style="position: fixed; bottom: 75px; right: 3px; border: none; z-index: 1000; overflow: hidden;"
-    scrolling="no"></iframe>
-
-
-
-  <!-- AI 客服嵌入按鈕 -->
   <!-- <div class="embed-ai-btn">
     <iframe src="https://cmm.ai/embed-ai/#/" height="100%" width="100%" frameborder="0" allow="camera;microphone"></iframe>
   </div> -->
@@ -67,6 +63,28 @@
 <script src="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
   crossorigin="anonymous"></script>
 <script>
+  setTimeout(() => {
+    const iframeContent = document.getElementById("iframe-content");
+
+    window.addEventListener("message", function (event) {
+      // 確保來自合法的來源
+      if (event.origin !== "https://cmm.ai") {
+        return; // 忽略來自不信任的來源的訊息
+      }
+
+      // 取得 iframe 傳遞訊息
+      if (event.data === true) {
+        iframeContent.style.width = "375px";
+        iframeContent.style.height = "650px";
+      } else if (event.data === false) {
+        setTimeout(() => {
+          iframeContent.style.width = "80px";
+          iframeContent.style.height = "80px";
+        }, 300)
+      }
+    });
+  }, 1000)
+
   // 隱私權政策
   let privacy = localStorage.getItem("privacy");
 

layouts/partials/head.html

@@ -64,7 +64,7 @@
   <!-- RSS feed -->
   <link rel="alternate" href="{{ "/index.xml" | absURL }}" type="application/rss+xml" title="{{ .Site.Title }}">
 
-  <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script>
+  <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script> -->
 
   <!-- Google tag (gtag.js) -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-G5H9MMGQFM"></script>

layouts/research/single.html

@@ -12,7 +12,7 @@
   <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>
+  <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script> -->
   <!-- End of HubSpot Embed Code -->
 </head>
 

layouts/seo-image/single.html

@@ -12,7 +12,7 @@
   <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>
+  <!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script> -->
   <!-- End of HubSpot Embed Code -->
 </head>
 

layouts/video-making/single.html

@@ -14,7 +14,7 @@
   <!-- 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>
+  <!-- <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 || [];

layouts/youtube-views-zh/single.html

@@ -14,7 +14,7 @@
   <!-- 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>
+  <!-- <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 || [];
@@ -251,7 +251,6 @@
         </div>
       </div>
 
-
       <div class="pick-point">
         <img src="/imgs/dm/yt-views/image-06.png" alt="" class="bg-img">
         <div class="chat-img">

layouts/youtube-views/single.html

@@ -14,7 +14,7 @@
   <!-- 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>
+  <!-- <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 || [];

static/css/style.css

@@ -1214,7 +1214,7 @@
   width: 100%;
   padding: 1rem 2rem;
   border-radius: 30px;
-  background-color: #F8E6E2;
+  background-color: #f8e6e2;
 }
 @media (max-width: 767px) {
   #home .ai-reporter .info span {
@@ -1222,11 +1222,11 @@
   }
 }
 #home .ai-reporter .info span.grey {
-  background-color: #DDDDDD;
+  background-color: #dddddd;
 }
 @media (max-width: 767px) {
   #home .ai-reporter .info span.grey {
-    background-color: #F8E6E2;
+    background-color: #f8e6e2;
   }
 }
 #home .ai-reporter .info span h3 {
@@ -1241,7 +1241,7 @@
 }
 #home .ai-reporter .info span img {
   width: 100%;
-  height: 30vh;
+  height: 40vh;
   -o-object-fit: contain;
      object-fit: contain;
 }
@@ -2930,6 +2930,46 @@
 #seo-dm {
   overflow: hidden;
 }
+#seo-dm .pay-card {
+  box-shadow: 2px 2px 5px #ccc;
+  border-radius: 20px;
+}
+#seo-dm .pay-card .card-title {
+  font-size: 1.5rem;
+}
+#seo-dm .pay-card ul {
+  padding: 0;
+  list-style: none;
+}
+#seo-dm .pay-card .price {
+  width: 100%;
+  padding: 1rem 0;
+  font-size: 26px;
+  font-weight: 600;
+  text-align: center;
+  color: #fff;
+  background-color: #ea5413;
+  letter-spacing: 2px;
+}
+#seo-dm .pay-card .buy-btn {
+  width: 150px;
+  padding: 0.5rem;
+  display: block;
+  text-align: center;
+  border-radius: 100px;
+  font-size: 1rem;
+  font-weight: bold;
+  text-decoration: none;
+  color: #ea5413;
+  border: 2px solid #ea5413;
+  background-color: #fff;
+  letter-spacing: 1px;
+  transition: all 0.3s;
+}
+#seo-dm .pay-card .buy-btn:hover {
+  color: #fff;
+  background-color: #ea5413;
+}
 #seo-dm .header-title {
   color: #f6ab1c;
 }
@@ -4489,16 +4529,6 @@
     padding-top: 0;
   }
 }
-.sec-blogtab .blogtab-title {
-  display: inline-block;
-  margin-bottom: 30px;
-  padding-bottom: 7px;
-  font-size: 30px;
-  font-weight: bold;
-  text-align: center;
-  letter-spacing: 1px;
-  border-bottom: 7px solid #ea5413;
-}
 .sec-blogtab .blog-txt {
   font-size: 16px;
 }
@@ -4532,6 +4562,17 @@
   opacity: 0.8;
 }
 
+.blogtab-title {
+  display: inline-block;
+  margin-bottom: 30px;
+  padding-bottom: 10px;
+  font-size: 30px;
+  font-weight: bold;
+  text-align: center;
+  letter-spacing: 1px;
+  border-bottom: 6px solid #ea5413;
+}
+
 /* sec-blogtab End */
 /* aboutus Start */
 .about-header {
@@ -5247,18 +5288,26 @@
   color: #fff;
 }
 
-#responsive-iframe {
+#iframe-content {
+  width: 80px;
+  height: 80px;
+  position: fixed;
+  bottom: 5px;
   right: 3px;
+  border: none;
+  z-index: 5000;
+  overflow: hidden;
 }
+
 /* news-content End */
 .line-btn a {
   position: fixed;
-  bottom: 10px;
-  right: 18px;
+  bottom: 80px;
+  right: 20px;
 }
 .line-btn img {
   width: 60px;
-  height: 63px;
+  height: 60px;
   transition: all 0.2s ease-in-out;
 }
 .line-btn img:hover {

static/css/style.scss

@@ -1387,18 +1387,17 @@
         width: 100%;
         padding: 1rem 2rem;
         border-radius: 30px;
-        background-color: #F8E6E2;
+        background-color: #f8e6e2;
 
         @media (max-width: 767px) {
           width: 90%;
         }
 
-
         &.grey {
-          background-color: #DDDDDD;
+          background-color: #dddddd;
 
           @media (max-width: 767px) {
-            background-color: #F8E6E2;
+            background-color: #f8e6e2;
           }
         }
 
@@ -1414,7 +1413,7 @@
 
         img {
           width: 100%;
-          height: 30vh;
+          height: 40vh;
           object-fit: contain;
 
           @media (max-width: 991px) {
@@ -1938,7 +1937,6 @@
 }
 
 @media (max-width: 767px) {
-
   // .header {
   //   height: 70vh;
   // }
@@ -2725,7 +2723,7 @@
   }
 
   .card-content {
-    &>div {
+    & > div {
       display: flex;
       flex-direction: column;
       // border: 2px solid #ffebe2;
@@ -3182,6 +3180,52 @@
 #seo-dm {
   overflow: hidden;
 
+  .pay-card {
+    box-shadow: 2px 2px 5px #ccc;
+    border-radius: 20px;
+
+    .card-title {
+      font-size: 1.5rem;
+    }
+
+    ul {
+      padding: 0;
+      list-style: none;
+    }
+
+    .price {
+      width: 100%;
+      padding: 1rem 0;
+      font-size: 26px;
+      font-weight: 600;
+      text-align: center;
+      color: #fff;
+      background-color: #ea5413;
+      letter-spacing: 2px;
+    }
+
+    .buy-btn {
+      width: 150px;
+      padding: 0.5rem;
+      display: block;
+      text-align: center;
+      border-radius: 100px;
+      font-size: 1rem;
+      font-weight: bold;
+      text-decoration: none;
+      color: #ea5413;
+      border: 2px solid #ea5413;
+      background-color: #fff;
+      letter-spacing: 1px;
+      transition: all 0.3s;
+
+      &:hover {
+        color: #fff;
+        background-color: #ea5413;
+      }
+    }
+  }
+
   .header-title {
     color: #f6ab1c;
 
@@ -3781,7 +3825,7 @@
       filter: invert(33%) sepia(55%) saturate(2232%) hue-rotate(357deg) brightness(102%) contrast(89%);
     }
 
-    .content>div {
+    .content > div {
       margin-bottom: 40px;
       padding: 0px 15px;
       border-left: 1px solid rgba(0, 0, 0, 0.125);
@@ -4183,7 +4227,7 @@
     .row {
       padding: 0 5vw;
 
-      &>div {
+      & > div {
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -4774,15 +4818,15 @@
       }
     }
 
-    .table-striped>tbody>tr:nth-child(odd)>td,
-    .table-striped>tbody>tr:nth-child(odd)>th {
+    .table-striped > tbody > tr:nth-child(odd) > td,
+    .table-striped > tbody > tr:nth-child(odd) > th {
       box-shadow: none;
       background-color: #fdeae1;
       border-bottom-width: 0px !important;
     }
 
-    .table-striped>tbody>tr:nth-child(even)>td,
-    .table-striped>tbody>tr:nth-child(even)>th {
+    .table-striped > tbody > tr:nth-child(even) > td,
+    .table-striped > tbody > tr:nth-child(even) > th {
       border-bottom-width: 0px !important;
     }
 
@@ -4927,17 +4971,6 @@
     padding-top: 0;
   }
 
-  .blogtab-title {
-    display: inline-block;
-    margin-bottom: 30px;
-    padding-bottom: 7px;
-    font-size: 30px;
-    font-weight: bold;
-    text-align: center;
-    letter-spacing: 1px;
-    border-bottom: 7px solid #ea5413;
-  }
-
   .blog-txt {
     font-size: 16px;
 
@@ -4981,6 +5014,17 @@
   }
 }
 
+.blogtab-title {
+  display: inline-block;
+  margin-bottom: 30px;
+  padding-bottom: 10px;
+  font-size: 30px;
+  font-weight: bold;
+  text-align: center;
+  letter-spacing: 1px;
+  border-bottom: 6px solid #ea5413;
+}
+
 /* sec-blogtab End */
 
 /* aboutus Start */
@@ -5760,14 +5804,17 @@
   }
 }
 
-#responsive-iframe {
+#iframe-content {
+  width: 80px;
+  height: 80px;
+  // width: 375px;
+  // height: 650px;
+  position: fixed;
+  bottom: 5px;
   right: 3px;
-
-  @media (max-width: 768px) {
-    // width: 375px; /* 行動裝置上的寬度 */
-    // height: 650px; /* 行動裝置上的高度 */
-    // right: 15px;
-  }
+  border: none;
+  z-index: 5000;
+  overflow: hidden;
 }
 
 /* news-content End */
@@ -5775,13 +5822,13 @@
 .line-btn {
   a {
     position: fixed;
-    bottom: 10px;
-    right: 18px;
+    bottom: 80px;
+    right: 20px;
   }
 
   img {
     width: 60px;
-    height: 63px;
+    height: 60px;
     transition: all 0.2s ease-in-out;
 
     &:hover {
@@ -5932,4 +5979,4 @@
       margin-top: 0.3rem !important;
     }
   }
-}
+}