add & update page

layouts/404.html

@@ -31,7 +31,7 @@
         </div>
         <!-- /#content -->
 
-        {{ partial "footer.html" . }}
+        {{ partial "footer_default.html" . }}
 
     </div>
   </body>

layouts/DM/single.html

@@ -48,32 +48,32 @@
       </nav>
       <main>
           <section class="header">
-            <img src="/imgs/01.webp" alt="" class="header__lefttop">
+            <img src="/imgs/01.webp" alt="" class="header-lefttop">
             <div class="row align-items-center g-0">
                 <div class="col-12 col-md-5 text-center ">
-                    <h2 class="header__title">{{ .Params.packageTitle }}</h2>
+                    <h2 class="header-title">{{ .Params.packageTitle }}</h2>
                     <p class="text-center px-3">{{ .Params.packageSub }}<p>
                 </div>
                 <div class="col-12 col-md-7">
-                    <div class="header__right header__dm" style="background-image: url('{{ .Params.packageBg }}');">
-                        <img src="/imgs/02.webp" alt="" class="header__right__cir">
-                        <!-- <img src="imgs/影片.webp" alt="" class="header__right__video"> -->
-                        <img class="header__right__magnifier" src="/imgs/放大鏡.webp" alt="">
-                        <img class="header__right__bubble" src="/imgs/對話.webp" alt="">
-                        <img class="header__right__linecir" src="/imgs/裝飾圓.webp" alt="">
+                    <div class="header-right header-dm" style="background-image: url('{{ .Params.packageBg }}');">
+                        <img src="/imgs/02.webp" alt="" class="header-right-cir">
+                        <!-- <img src="imgs/影片.webp" alt="" class="header-right__video"> -->
+                        <img class="header-right-magnifier" src="/imgs/放大鏡.webp" alt="">
+                        <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"></h2>
+          <section class="category container text-center py-5 dm-description">
+            <h2 class="category-sub-h2"></h2>
             <h5 style="font-weight: 300;">{{ .Params.description }}</h5>
           </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="">
+                    <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">
                       <h4>{{ .Params.block1_title }}</h4>
@@ -90,16 +90,16 @@
                   <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="">
+                  <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="">
+                    <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>
@@ -120,8 +120,8 @@
                     </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="">
+                    <img class="img-block-img" src="{{ .Params.block4_img }}" alt="">
+                    <img class="img-block-linecir right" src="/imgs/裝飾圓.webp" alt="">
                 </div>
             </div>
           </section>
@@ -131,7 +131,7 @@
             <div class="row">
             <div class="col-6">
                 <h4>About us</h4>
-                <a href="http://www.choozmo.com/"><img src="/imgs/logo_choozmo.webp" class="footer_img"></a>
+                <a href="http://www.choozmo.com/"><img src="/imgs/logo_choozmo.webp" class="footer-img"></a>
                 <div class="followus">
                     <span class="followus__txt">關注我們</span>
                     <a href="https://www.youtube.com/channel/UCi3jHOCCmx0Zyl2ZvoHzHQg" class="followus__img"><img src="/imgs/youtube-new-flat-logo-1.png" alt="" width="32px" height="32px"></a>

layouts/_default/terms.html

@@ -102,7 +102,7 @@
         </div>
         <!-- /#content -->
 
-        {{ partial "footer.html" . }}
+        {{ partial "footer_default.html" . }}
 
     </div>
     <!-- /#all -->

layouts/_default/vtuber.html

@@ -102,7 +102,7 @@
         </div>
         <!-- /#content -->
 
-        {{ partial "footer.html" . }}
+        {{ partial "footer_default.html" . }}
 
     </div>
     <!-- /#all -->

layouts/aboutus/single.html

@@ -64,10 +64,10 @@
       </nav>
       <main style="overflow-x: hidden;">
           <section class="header" style="height: auto;">
-            <img src="/imgs/01.webp" alt="" class="header__lefttop">
+            <img src="/imgs/01.webp" alt="" class="header-lefttop">
             <div class="row align-items-center g-0">
                 <div class="col-12 text-center ">
-                    <h2 class="header__title">關於我們</h2>
+                    <h2 class="header-title">關於我們</h2>
                     <p class="text-center px-2 px-md-5">成員來自工研院巨量資料中心、台積電、中華電信研究院、台大、清大、交大；並曾獲選科技部「預見。新創計畫」代表團隊， 赴矽谷加速器培訓；成員多為資訊工程/資訊管理相關背景。
                       團隊成員曾獲得工研院傑出研究獎、資訊月百大產品獎、艾奇獎等等。優異技術獲得創投青睞。
                       <p>
@@ -75,7 +75,7 @@
             </div>
           </section>
           <section class="category container text-center py-5">
-            <h2 class="category__sub_h2">我們的合作夥伴</h2>
+            <h2 class="category-sub-h2">我們的合作夥伴</h2>
             <h5 style="font-weight: 300;">目前在資料分析與企業軟體領域
               ，已累積中大型企業客戶
               </h5>
@@ -94,8 +94,8 @@
           <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 aboutus_prize_img" src="/imgs/aboutus/aboutus_prize.png" alt="" style="width: 60%;">
-                    <img class="img-block__linecir left" src="/imgs/裝飾圓.webp" alt="">
+                    <img class="img-block-img aboutus_prize_img" src="/imgs/aboutus/aboutus_prize.png" alt="" style="width: 60%;">
+                    <img class="img-block-linecir left" src="/imgs/裝飾圓.webp" alt="">
                 </div>
                 <div class="col my-auto pt-3 pt-md-0">
                       <h4>榮獲奇點獎殊榮</h4>
@@ -111,7 +111,7 @@
             <div class="row">
             <div class="col-6">
                 <h4>About us</h4>
-                <a href="http://www.choozmo.com/"><img src="/imgs/logo_choozmo.webp" class="footer_img"></a>
+                <a href="http://www.choozmo.com/"><img src="/imgs/logo_choozmo.webp" class="footer-img"></a>
                 <div class="followus">
                     <span class="followus__txt">關注我們</span>
                     <a href="https://www.youtube.com/channel/UCi3jHOCCmx0Zyl2ZvoHzHQg" class="followus__img"><img src="/imgs/youtube-new-flat-logo-1.png" alt="" width="32px" height="32px"></a>

layouts/ad-operation/single.html

@@ -77,18 +77,18 @@
       color: #ea5413;
     }
 
-    #ad-operation .header__title {
+    #ad-operation .header-title {
       color: #000;
       font-weight: bold;
       letter-spacing: 5px;
     }
 
-    #ad-operation .dm__description h5 {
+    #ad-operation .dm-description h5 {
       font-size: 16px;
       line-height: 32px;
     }
 
-    #ad-operation .dm__description h5 strong {
+    #ad-operation .dm-description h5 strong {
       padding-bottom: 3px;
       border-bottom: 3px solid rgb(248, 228, 72);
     }
@@ -231,7 +231,7 @@
       overflow-x: hidden;
     }
 
-    #ad-operation .header__lefttop {
+    #ad-operation .header-lefttop {
       width: 60%;
       position: absolute;
       left: 10vw;
@@ -239,27 +239,27 @@
       z-index: -1;
     }
 
-    #ad-operation .category.dm__description {
+    #ad-operation .category.dm-description {
       padding: 2rem 8rem;
     }
 
     @media (max-width: 991px) {
-      #ad-operation .category.dm__description {
+      #ad-operation .category.dm-description {
         padding: 2rem 3rem;
       }
     }
 
     @media (max-width: 767px) {
-      #ad-operation .category.dm__description {
+      #ad-operation .category.dm-description {
         padding: 2rem 0rem;
       }
 
-      #ad-operation .header__lefttop {
+      #ad-operation .header-lefttop {
         left: 20vw;
       }
     }
 
-    .video-box {
+    /* .video-box {
       position: relative;
       width: 70%;
       height: 0;
@@ -292,7 +292,7 @@
       left: 0;
       width: 100%;
       height: 100%;
-    }
+    } */
 
     .accreditation p {
       font-size: 24px;
@@ -377,17 +377,17 @@
   </nav> -->
   <main id="ad-operation">
     <section class="header">
-      <div class="row align-items-center justify-content-center g-0">
+      <div class="row align-items-center justify-content-center g-0" 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>
+          <img src="/imgs/dm/operation_01.png" alt="" class="header-lefttop">
+          <h2 class="header-title">AI 廣告投手</h2>
           <p class="text-center px-3">
             大數據精準抓取目標受眾<br>
             同時管理數百檔廣告<br>
             工業局認證 AI 智慧廣告投放技術<br>
             <span>僅 5% 服務費</span>
           <p>
-            <button class="btns-dark" onclick="window.location.href=`/contact/service/`">立即諮詢</button>
+            <button class="contact-btn" onclick="window.location.href=`/contact/service/`">立即諮詢</button>
         </div>
         <div class="col-12 col-md-6">
           <div class="video-box">
@@ -399,7 +399,7 @@
         </div>
       </div>
     </section>
-    <section class="category container py-5 dm__description">
+    <section class="category container py-5 dm-description">
       <h5>
         廣告品質越好， 廣告付費就越少！
         <br><br>
@@ -479,23 +479,23 @@
     <div class="container loaded pageForm">
       <div class="row">
         <div class="col-12 col-md-6">
-          <div class="pageForm__p">
+          <div class="pageForm-p">
             <div class="mb-3">
-              <div class="pageForm__title">
-                <h3 class="pageForm__title-h3">
+              <div class="pageForm-title">
+                <h3 class="pageForm-title-h3">
                   免費獲取專業的 <br>
                   廣告投放建議書！
                 </h3>
               </div>
             </div>
-            <div class="pageForm__txt mb-3 ">
+            <div class="pageForm-txt mb-3 ">
               <p>
                 讓我們帶您深入 AI 廣告的世界 <br>
                 只剩下幾個步驟
               </p>
             </div>
-            <div class="pageForm__notice">
-              <a class="btn__detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
+            <div class="pageForm-notice">
+              <a class="btn-detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
               <p>填寫該表單將會有專人與你聯繫。<br>
                 如有問題歡迎來信 service@choozmo.com 或來電 036670804
               </p>
@@ -503,7 +503,7 @@
           </div>
         </div>
         <div class="col-12 col-md-6">
-          <div class="pageForm__p">
+          <div class="pageForm-p">
             <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
             <script>
               hbspt.forms.create({

layouts/ai-anchor/single.html

@@ -87,11 +87,11 @@
       }
     }
 
-    .ai-anchor .header__right {
+    .ai-anchor .header-right {
       width: 90%;
     }
 
-    .ai-anchor .header__right__bubble {
+    .ai-anchor .header-right-bubble {
       width: 25%;
       top: -13%;
       right: -10%;
@@ -158,7 +158,7 @@
       image-rendering: -webkit-optimize-contrast;
     }
 
-    .ai-anchor .header__dm {
+    .ai-anchor .header-dm {
       max-width: 500px;
 
     }
@@ -215,7 +215,7 @@
 
 
     @media (max-width: 767px) {
-      .ai-anchor .header__dm {
+      .ai-anchor .header-dm {
         width: 90%;
       }
 
@@ -240,7 +240,7 @@
         font-size: 20px;
       }
 
-      .header__title {
+      .header-title {
         font-size: 2rem;
       }
     }
@@ -251,7 +251,7 @@
   {{ partial "navbar.html" . }}
   <main class="ai-anchor">
     <section class="header">
-      <img src="/imgs/01.webp" alt="" class="header__lefttop">
+      <img src="/imgs/01.webp" alt="" class="header-lefttop">
       <div class="row align-items-center g-0">
         <div class="col-12 col-lg-5 text-center pt-5 pt-lg-0">
           <h2 class="header__anchor_title text-start">集仕多 ChoozMo 新聞 AI 主播<br>媒體聯播網最佳方案</h2>
@@ -261,14 +261,14 @@
           <p class="text-start">
             ChoozMo 最強大的網路新聞聯播方案，將您的圖文報導製成 AI 主播影音新聞影片，保證發佈曝光到包括yahoo 新聞、新浪網、Pchome 新聞、LineToday 等十二家知名媒體平台！
           <p>
-            <button class="btns-dark" onclick="window.location.href=`/contact/service/`">立即諮詢</button>
+            <button class="contact-btn" onclick="window.location.href=`/contact/service/`">立即諮詢</button>
         </div>
         <div class="col-12 col-lg-7" style="padding-top: 50px;">
-          <div class="header__right header__dm" style="background-image: url('/imgs/圖層 5.png');">
-            <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/圖層 8.png" alt="">
-            <img class="header__right__linecir" src="/imgs/裝飾圓.webp" alt="">
+          <div class="header-right header-dm" style="background-image: url('/imgs/圖層 5.png');">
+            <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/圖層 8.png" alt="">
+            <img class="header-right-linecir" src="/imgs/裝飾圓.webp" alt="">
           </div>
         </div>
       </div>
@@ -297,8 +297,8 @@
         <span class="d-block text-start mt-3">即可獲得總價值超過 36000 元的全方位媒體曝光方案！</span>
       </section>
     </div>
-    <!-- <section class="category container text-center py-5 dm__description">
-      <h2 class="category__sub_h2"></h2>
+    <!-- <section class="category container text-center py-5 dm-description">
+      <h2 class="category-sub-h2"></h2>
       <h5 style="font-weight: 300;">{{ .Params.description }}</h5>
     </section> -->
 
@@ -326,19 +326,19 @@
     <div class="container loaded pageForm">
       <div class="row">
         <div class="col-12 col-md-6">
-          <div class="pageForm__p">
+          <div class="pageForm-p">
             <div class="mb-3">
-              <div class="pageForm__title">
-                <h3 class="pageForm__title-h3">集仕多 ChoozMo 新聞 AI 主播媒體聯播網最佳方案</h3>
+              <div class="pageForm-title">
+                <h3 class="pageForm-title-h3">集仕多 ChoozMo 新聞 AI 主播媒體聯播網最佳方案</h3>
               </div>
             </div>
-            <div class="pageForm__txt mb-3 ">
+            <div class="pageForm-txt mb-3 ">
               <p>
                 ChoozMo 最強大的網路新聞聯播方案，將您的圖文報導製成Ai主播影音新聞影片，保證發佈曝光到包括yahoo 新聞、新浪網、Pchome 新聞、LineToday 等十二家知名媒體平台！
               </p>
             </div>
-            <div class="pageForm__notice">
-              <a class="btn__detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
+            <div class="pageForm-notice">
+              <a class="btn-detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
               <p>填寫該表單將會有專人與你聯繫。<br>
                 如有問題歡迎來信 service@choozmo.com 或來電 036670804
               </p>
@@ -346,7 +346,7 @@
           </div>
         </div>
         <div class="col-12 col-md-6">
-          <div class="pageForm__p">
+          <div class="pageForm-p">
             <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
             <script>
               hbspt.forms.create({

layouts/ai-training/single.html

@@ -54,10 +54,10 @@
       </nav>
       <main style="overflow-x: hidden;">
           <section class="header ai-training">
-            <img src="/imgs/01.webp" alt="" class="header__lefttop">
+            <img src="/imgs/01.webp" alt="" class="header-lefttop">
             <div class="row align-items-center g-0">
                 <div class="col-12 col-md-5 text-center ">
-                    <h2 class="header__title">{{ .Params.packageTitle }}</h2>
+                    <h2 class="header-title">{{ .Params.packageTitle }}</h2>
                     <p class="text-center px-3" style="font-size: 2rem;">{{ .Params.packageSub }}<p>
                     <div class="d-flex justify-content-center mt-4">
                       <span class="header__ai-training__span mx-1">提升形象</span>
@@ -66,16 +66,16 @@
                     </div>
                 </div>
                 <div class="col-12 col-md-7">
-                    <div class="header__right header__dm text-center" style="background-image: none;">
+                    <div class="header-right header-dm text-center" style="background-image: none;">
                         <img src="/imgs/dm/dm_ai-training.png" alt="" style="width: 70%;">
-                        <img src="/imgs/02.webp" alt="" class="header__right__cir">
-                        <!-- <img src="imgs/影片.webp" alt="" class="header__right__video"> -->
+                        <img src="/imgs/02.webp" alt="" class="header-right-cir">
+                        <!-- <img src="imgs/影片.webp" alt="" class="header-right__video"> -->
                     </div>
                 </div>
             </div>
           </section>
-          <section class="category container text-center py-5 dm__description">
-            <h2 class="category__sub_h2"></h2>
+          <section class="category container text-center py-5 dm-description">
+            <h2 class="category-sub-h2"></h2>
             <h5 style="font-weight: 300;">{{ .Params.description_block1}}
             <br>
             {{ .Params.description_block4}}
@@ -84,15 +84,15 @@
             </h5>
           </section>
           <section class="category container-fluid text-center py-5" style="background-color: #FFEBE8;">
-            <!-- <h2 class="category__sub_h2"></h2> -->
+            <!-- <h2 class="category-sub-h2"></h2> -->
             <p style="font-weight: 300;" class="px-2 px-md-5">{{ .Params.description_block3}}
             </p>
           </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="" style="width: 80%;">
-                    <img class="img-block__linecir left" src="/imgs/裝飾圓.webp" alt="">
+                    <img class="img-block-img " src="{{ .Params.block1_img }}" alt="" style="width: 80%;">
+                    <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>
@@ -109,8 +109,8 @@
                   <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="">
+                  <img class="img-block-img" src="{{ .Params.block2_img }}" alt="">
+                  <img class="img-block-linecir right" src="/imgs/裝飾圓.webp" alt="">
               </div>
             </div>
           </section> -->
@@ -126,16 +126,16 @@
                   </ul>
               </div>
               <div class="col position-relative">
-                <img class="img-block__img" src="{{ .Params.block4_img }}" alt="" style="width: 80%;">
-                <img class="img-block__linecir left" src="/imgs/裝飾圓.webp" alt="">
+                <img class="img-block-img" src="{{ .Params.block4_img }}" alt="" style="width: 80%;">
+                <img class="img-block-linecir left" 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 right" src="/imgs/裝飾圓.webp" alt="">
+                  <img class="img-block-img" src="{{ .Params.block3_img }}" alt="">
+                  <img class="img-block-linecir right" src="/imgs/裝飾圓.webp" alt="">
                 </div>
                 <div class="col my-auto">
                   <h4>{{ .Params.block3_title }}</h4>
@@ -195,7 +195,7 @@
             <div class="row">
             <div class="col-6">
                 <h4>About us</h4>
-                <a href="http://www.choozmo.com/"><img src="/imgs/logo_choozmo.webp" class="footer_img"></a>
+                <a href="http://www.choozmo.com/"><img src="/imgs/logo_choozmo.webp" class="footer-img"></a>
                 <div class="followus">
                     <span class="followus__txt">關注我們</span>
                     <a href="https://www.youtube.com/channel/UCi3jHOCCmx0Zyl2ZvoHzHQg" class="followus__img"><img src="/imgs/youtube-new-flat-logo-1.png" alt="" width="32px" height="32px"></a>

layouts/amp/single.html

@@ -117,25 +117,25 @@
       </nav>
       <main>
           <section class="header">
-            <img src="/imgs/01.webp" alt="" class="header__lefttop">
+            <img src="/imgs/01.webp" alt="" class="header-lefttop">
             <div class="row align-items-center g-0">
                 <div class="col-12 col-md-5 text-center ">
-                    <h2 class="header__title">{{ .Params.packageTitle }}</h2>
+                    <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>
+                    <button class="contact-btn" 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/dm_computer.jpeg');">
-                        <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 class="header-right header-dm" style="background-image: url('/imgs/dm/dm_computer.jpeg');">
+                        <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"></h2>
+          <section class="category container text-center py-5 dm-description">
+            <h2 class="category-sub-h2"></h2>
             <h5 style="font-weight: 300;">{{ .Params.description_block1}}
             <br>
             {{ .Params.description_block2}}
@@ -144,8 +144,8 @@
           <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="" style="width: 50%;">
-                    <img class="img-block__linecir left" src="/imgs/裝飾圓.webp" alt="">
+                    <img class="img-block-img " src="{{ .Params.block1_img }}" alt="" style="width: 50%;">
+                    <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>
@@ -162,16 +162,16 @@
                   <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="">
+                  <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="">
+                    <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>
@@ -183,8 +183,8 @@
           <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.block4_img }}" alt="" style="width: 50%;">
-                <img class="img-block__linecir right" src="/imgs/裝飾圓.webp" alt="">
+                <img class="img-block-img" src="{{ .Params.block4_img }}" alt="" style="width: 50%;">
+                <img class="img-block-linecir right" src="/imgs/裝飾圓.webp" alt="">
               </div>
               <div class="col my-auto pt-3 pt-md-0">
                 <h4>{{ .Params.block4_title }}</h4>
@@ -200,19 +200,19 @@
           <div class="container loaded pageForm">
             <div class="row">
               <div class="col-12 col-md-6">
-                <div class="pageForm__p">
+                <div class="pageForm-p">
                   <div class="mb-3">
-                    <div class="pageForm__title">
-                      <h3 class="pageForm__title-h3">高速行動網頁設計服務</h3>
+                    <div class="pageForm-title">
+                      <h3 class="pageForm-title-h3">高速行動網頁設計服務</h3>
                     </div>
                   </div>
-                  <div class="pageForm__txt mb-3 ">
+                  <div class="pageForm-txt mb-3 ">
                     <p>集仕多擁有Google AMP的專案經驗，Google AMP（Accelerated Mobile Pages）架構設計的網頁著重讓用戶有流暢閱讀體驗，有利大幅優化搜尋排名，吸引用戶目光，自然取得流量紅利，
                       集仕多幫你打造SEO友好設計，打造絕佳行動瀏覽體驗，留住更多的訪客。
                     </p>
                   </div>
-                  <div class="pageForm__notice">
-                    <a class="btn__detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
+                  <div class="pageForm-notice">
+                    <a class="btn-detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
                     <p>填寫該表單將會有專人與你聯繫。<br>
                       如有問題歡迎來信 service@choozmo.com 或來電 036670804
                     </p>
@@ -220,7 +220,7 @@
                 </div>
               </div>
               <div class="col-12 col-md-6">
-                <div class="pageForm__p">
+                <div class="pageForm-p">
                   <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
                   <script>
                     hbspt.forms.create({

layouts/bigdata/single.html

@@ -69,33 +69,33 @@
   {{ partial "navbar.html" . }}
   <main>
     <section class="header">
-      <img src="/imgs/01.webp" alt="" class="header__lefttop">
+      <img src="/imgs/01.webp" alt="" class="header-lefttop">
       <div class="row align-items-center g-0">
         <div class="col-12 col-md-5 text-center ">
-          <h2 class="header__title">{{ .Params.packageTitle }}</h2>
+          <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>
+            <button class="contact-btn" 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/dm_data.jpeg');">
-            <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 class="header-right header-dm" style="background-image: url('/imgs/dm/dm_data.jpeg');">
+            <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"></h2>
+    <section class="category container text-center py-5 dm-description">
+      <h2 class="category-sub-h2"></h2>
       <h5 style="font-weight: 300;">{{ .Params.description }}</h5>
     </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="">
+          <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>
@@ -112,16 +112,16 @@
           <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="">
+          <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="">
+          <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 pt-3 pt-md-0">
           <h4>{{ .Params.block3_title }}</h4>
@@ -142,27 +142,27 @@
                     </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="">
+                    <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="pageForm-p">
             <div class="mb-3">
-              <div class="pageForm__title">
-                <h3 class="pageForm__title-h3">大數據蒐集與分析服務</h3>
+              <div class="pageForm-title">
+                <h3 class="pageForm-title-h3">大數據蒐集與分析服務</h3>
               </div>
             </div>
-            <div class="pageForm__txt mb-3 ">
+            <div class="pageForm-txt mb-3 ">
               <p>集仕多團隊擁有紮實 Machine Learning 與 Deep Learning 技術，大數據專案經驗豐富，
                 包含美妝產業應用、廣告代操、選戰分析、輿情分析、金融應用，除此之外，我們也提供文字探勘服務。
               </p>
             </div>
-            <div class="pageForm__notice">
-              <a class="btn__detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
+            <div class="pageForm-notice">
+              <a class="btn-detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
               <p>填寫該表單將會有專人與你聯繫。<br>
                 如有問題歡迎來信 service@choozmo.com 或來電 036670804
               </p>
@@ -170,7 +170,7 @@
           </div>
         </div>
         <div class="col-12 col-md-6">
-          <div class="pageForm__p">
+          <div class="pageForm-p">
             <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
             <script>
               hbspt.forms.create({

layouts/blog-traffic/single.html

@@ -14,100 +14,84 @@
   <!-- 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;
-    }
-  </style>
 </head>
 
 <body>
   {{ 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">
+    <section class="header container">
+      <img src="{{ .Params.banner }}" alt="" class="banner">
+      <div class="row align-items-center pt-5 pt-md-0">
+        <div class="col-12 col-md-5 text-center">
+          <h2 class="header-title m-0">{{ .Params.packageTitle }}</h2>
+          <p class="header-title text-center px-3">{{ .Params.packageSub }}
+            <br>排名第 1
+          <p>
+            <button class="contact-btn" onclick="window.location.href=`/contact/service/`">立即諮詢</button>
+        </div>
+        <div class="col-12 col-md-7">
+          <img src="{{ .Params.packageBg }}" alt="" class="header-img">
+        </div>
+      </div>
+      </div>
+      <div class="py-5 dm-description mb-3">
+        <p>
+          {{ .Params.description_1 }}
+          <br>
+          {{ .Params.description_2 }}
+        </p>
+      </div>
+    </section>
+
+
+    <!-- <section class="header" style="padding-top: 1.5rem;">
+      <img src="/imgs/dm/blog-traffic_00.jpg" alt="" class="header-lefttop">
       <div class="row align-items-center g-0">
-        <div class="col-12 col-md-6 text-center ">
-          <h2 class="header__title m-0">{{ .Params.packageTitle }}</h2>
-          <p class="header__title text-center px-3">{{ .Params.packageSub }}
+        <div class="col-12 col-md-6 text-center">
+          <h2 class="header-title m-0">{{ .Params.packageTitle }}</h2>
+          <p class="header-title text-center px-3">{{ .Params.packageSub }}
             <br>排名第 1
           <p>
-            <button class="btns-dark" onclick="window.location.href=`/contact/service/`">立即諮詢</button>
+            <button class="contact-btn" onclick="window.location.href=`/contact/service/`">立即諮詢</button>
         </div>
         <div class="col-12 col-md-6">
-          <div class="header__right header__dm" style="background-image: url('/imgs/dm/blog-traffic.png');">
-            <!-- <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 class="header-right header-dm" style="background-image: url('/imgs/dm/blog-traffic.png');">
           </div>
         </div>
       </div>
-    </section>
+    </section> -->
 
-    <section class="category container py-5 dm__description mb-3">
-      <h5 style="line-height: 30px;">{{ .Params.description }}</h5>
-    </section>
+    <!-- <section class="container py-5 dm-description mb-3">
+      <p>
+        {{ .Params.description_1 }}
+        <br>
+        {{ .Params.description_2 }}
+      </p>
+    </section> -->
+
+    <h2 class="category-sub-h2 py-3"></h2>
 
-    <h2 class="category__sub_h2 py-3"></h2>
     <section class="category container img-block pt-4">
+      <img src="/imgs/dm/circle-02.webp" alt="" class="orange-circle">
       <div class="d-flex align-items-start">
-        <img class="img-block__img img-first" src="{{ .Params.block1_img }}" alt="">
+        <img class="img-block-img img-first" src="{{ .Params.block1_icon }}" 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 class="sub-title mb-3">{{ .Params.block1_sub }}</p>
           <p>{{ .Params.block1_text | markdownify }}</p>
-          <ul>
-            <li>1. 獨家 SEO 顯微鏡 看清您的店家 SEO 關鍵字全貌建議。</li>
-            <li>2. 為您的專訪文章內容優化且埋入您專屬的關鍵字。</li>
-            <li>3. 為您放在部落格中的文章不斷推升流量做文章 SEO。</li>
-            <li>＊選定經營文章中三組關鍵字，推升關鍵字搜尋排名。80 天後，保證其中一組進搜尋首頁！</li>
-          </ul>
+          <div class="row align-items-center">
+            <div class="col-12 col-md-6">
+              <ul>
+                <li>1. 獨家 SEO 顯微鏡 看清您的店家 SEO 關鍵字全貌建議。</li>
+                <li>2. 為您的專訪文章內容優化且埋入您專屬的關鍵字。</li>
+                <li>3. 為您放在部落格中的文章不斷推升流量做文章 SEO。</li>
+                <li>＊選定經營文章中三組關鍵字，推升關鍵字搜尋排名。80 天後，保證其中一組進搜尋首頁！</li>
+              </ul>
+            </div>
+            <div class="col-12 col-md-6">
+              <img src="{{ .Params.block1_img }}" alt="" class="img-fluid">
+            </div>
+          </div>
         </div>
       </div>
     </section>
@@ -117,10 +101,11 @@
     </div>
 
     <section class="category container img-block">
+      <img src="/imgs/dm/circle-01.webp" alt="" class="purple-circle">
       <div class="d-flex align-items-start">
-        <img class="img-block__img" src="{{ .Params.block2_img }}" alt="">
+        <img class="img-block-img" src="{{ .Params.block2_icon }}" alt="">
         <div class="mt-4 pt-3 pt-md-0">
-          <h4>{{ .Params.block2_title }}</h4>
+          <h4 class="mb-3">{{ .Params.block2_title }}</h4>
           <p>{{ .Params.block2_text | markdownify }}</p>
           <ul>
             <li>獨家 SEO 顯微鏡健檢服務：</li>
@@ -129,6 +114,7 @@
             <li>關鍵字研究：選擇適合您的關鍵字結合內容行銷，逐步提升排名。</li>
             <li>優化分析與策略：提出 SEO 改善建議，偕同逐項優化，推動排名向前。</li>
           </ul>
+          <img src="{{ .Params.block2_img }}" alt="" class="img-fluid">
         </div>
       </div>
     </section>
@@ -137,46 +123,62 @@
       <img src="/imgs/dm/blog-traffic_04.png" alt="" class="add-img">
     </div>
 
-    <section class="category container img-block">
+    <section class="category container img-block pb-5">
       <div class="d-flex align-items-start">
-        <img class="img-block__img" src="{{ .Params.block3_img }}" alt="">
+        <img class="img-block-img" src="{{ .Params.block3_icon }}" alt="">
         <div class="mt-4 pt-3 pt-md-0">
-          <h4>{{ .Params.block3_title }}</h4>
+          <h4 class="mb-3">{{ .Params.block3_title }}</h4>
           <p>{{ .Params.block3_text | markdownify }}</p>
-          <ul>
-            <li>專訪範例：</li>
-            <li>Q1、請問店裡面的料理有那些呢？</li>
-            <li>Q2、您對於食材很講究，可以介紹食材的選用嗎？</li>
-            <li>Q3、推薦的店內招牌品項和各別的特色介紹？</li>
-            <li>Q4、您的料理相當有特色，未來會想參加比賽嗎？</li>
-            <li>Q5、近期有什麼店內活動或想宣傳的部分嗎？</li>
-          </ul>
+          <div class="row align-items-center">
+            <div class="col-12 col-md-6">
+              <img src="{{ .Params.block3_img }}" alt="" class="img-fluid">
+            </div>
+            <div class="col-12 col-md-6">
+              <ul>
+                <li>專訪範例：</li>
+                <li>Q1、請問店裡面的料理有那些呢？</li>
+                <li>Q2、您對於食材很講究，可以介紹食材的選用嗎？</li>
+                <li>Q3、推薦的店內招牌品項和各別的特色介紹？</li>
+                <li>Q4、您的料理相當有特色，未來會想參加比賽嗎？</li>
+                <li>Q5、近期有什麼店內活動或想宣傳的部分嗎？</li>
+              </ul>
+            </div>
+          </div>
         </div>
       </div>
     </section>
 
-    <div class="container loaded pageForm" style="margin-top: 70px;">
+    <section class="mb-3 mt-5 mb-lg-4 d-flex align-items-center justify-content-center flex-column data-text">
+      <img src="/imgs/dm/blog-traffic-icon-05.png" alt="" style="max-width: 70px;">
+      <div class="d-flex flex-column flex-md-row">
+        <p>現在就填寫資料，</p>
+        <p>由專人來為您服務吧！</p>
+      </div>
+      <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">
-          <div class="pageForm__p">
+          <div class="pageForm-p">
             <div class="mb-3">
-              <div class="pageForm__title">
-                <h3 class="pageForm__title-h3">
+              <div class="pageForm-title">
+                <h3 class="pageForm-title-h3">
                   創業家專案
                   <br>
                   數位行銷最強後盾！
                 </h3>
               </div>
             </div>
-            <div class="pageForm__txt mb-3 ">
+            <div class="pageForm-txt mb-3 ">
               <p>
                 獨家 SEO 關鍵字研究 | 口碑文章，專訪撰寫
                 <br>
                 文章 SEO，流量推升 | 讓集仕多為您的店家創造知名度！
               </p>
             </div>
-            <div class="pageForm__notice">
-              <a class="btn__detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
+            <div class="pageForm-notice">
+              <a class="btn-detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
               <p>填寫該表單將會有專人與你聯繫。<br>
                 如有問題歡迎來信 service@choozmo.com 或來電 036670804
               </p>
@@ -184,7 +186,7 @@
           </div>
         </div>
         <div class="col-12 col-md-6">
-          <div class="pageForm__p">
+          <div class="pageForm-p">
             <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
             <script>
               hbspt.forms.create({
@@ -199,39 +201,9 @@
 
     </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) {
@@ -263,12 +235,12 @@
       };
     }();
 
-    if (os.isPc) {
-      let dom = document.querySelector('.blog-traffic .header');
-      if (dom) {
-        dom.style.height = "75vh";
-      }
-    }
+    // if (os.isPc) {
+    //   let dom = document.querySelector('.blog-traffic .header');
+    //   if (dom) {
+    //     dom.style.height = "75vh";
+    //   }
+    // }
   </script>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
     integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"

layouts/collaboration/single.html

@@ -113,15 +113,15 @@
       </nav>
       <main style="overflow-x: hidden;">
           <section class="header pb-0" style="height: auto;">
-            <img src="/imgs/01.webp" alt="" class="header__lefttop">
+            <img src="/imgs/01.webp" alt="" class="header-lefttop">
             <div class="row align-items-center g-0">
                 <div class="col-12 text-center ">
-                    <h2 class="header__title m-0">合作夥伴</h2>
+                    <h2 class="header-title m-0">合作夥伴</h2>
                 </div>
             </div>
           </section>
           <section class="category container text-center py-5">
-            <h2 class="category__sub_h2 pt-4"></h2>
+            <h2 class="category-sub-h2 pt-4"></h2>
             <div class="container">
               <div class="row">
                 <div class="col d-flex align-items-center mt-4">
@@ -133,7 +133,7 @@
           <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__linecir left" style="right: -110%; left: unset;" src="/imgs/裝飾圓.webp" alt="">
+                    <img class="img-block-linecir left" style="right: -110%; left: unset;" src="/imgs/裝飾圓.webp" alt="">
                 </div>
             </div>
           </section>

layouts/contact/single.html

@@ -515,7 +515,7 @@
             <main>
               <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
               <div class="container loaded">
-                <div class="pageForm__p">
+                <div class="pageForm-p">
                   <script>
                     hbspt.forms.create({
                       region: "na1",

layouts/crawler/single.html

@@ -69,33 +69,33 @@
   {{ partial "navbar.html" . }}
   <main>
     <section class="header">
-      <img src="/imgs/01.webp" alt="" class="header__lefttop">
+      <img src="/imgs/01.webp" alt="" class="header-lefttop">
       <div class="row align-items-center g-0">
         <div class="col-12 col-md-5 text-center ">
-          <h2 class="header__title">{{ .Params.packageTitle }}</h2>
+          <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>
+            <button class="contact-btn" 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/dm_crawler.png');">
-            <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 class="header-right header-dm" style="background-image: url('/imgs/dm/dm_crawler.png');">
+            <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"></h2>
+    <section class="category container text-center py-5 dm-description">
+      <h2 class="category-sub-h2"></h2>
       <h5 style="font-weight: 300;">{{ .Params.description }}</h5>
     </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="">
+          <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>
@@ -112,16 +112,16 @@
                   <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="">
+                  <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="">
+                    <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>
@@ -142,27 +142,27 @@
           </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="">
+          <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="pageForm-p">
             <div class="mb-3">
-              <div class="pageForm__title">
-                <h3 class="pageForm__title-h3">資訊爬蟲抓取專案服務</h3>
+              <div class="pageForm-title">
+                <h3 class="pageForm-title-h3">資訊爬蟲抓取專案服務</h3>
               </div>
             </div>
-            <div class="pageForm__txt mb-3 ">
+            <div class="pageForm-txt mb-3 ">
               <p>集仕多擁有專業的 AI 資料分析技術工程師，致力協助各類產業之業主從網路上自動化抓取資料，協助你在大量數據時代下，
                 依然可以快速且準確找到自己所需的資料，提供資料庫數據串流接上開發端後台做應用網路，應用豐富多元，依你需求提供專案服務。
               </p>
             </div>
-            <div class="pageForm__notice">
-              <a class="btn__detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
+            <div class="pageForm-notice">
+              <a class="btn-detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
               <p>填寫該表單將會有專人與你聯繫。<br>
                 如有問題歡迎來信 service@choozmo.com 或來電 036670804
               </p>
@@ -170,7 +170,7 @@
           </div>
         </div>
         <div class="col-12 col-md-6">
-          <div class="pageForm__p">
+          <div class="pageForm-p">
             <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
             <script>
               hbspt.forms.create({

layouts/ip/single.html

@@ -117,32 +117,32 @@
       </nav>
       <main>
           <section class="header">
-            <img src="/imgs/01.webp" alt="" class="header__lefttop">
+            <img src="/imgs/01.webp" alt="" class="header-lefttop">
             <div class="row align-items-center g-0">
                 <div class="col-12 col-md-5 text-center ">
-                    <h2 class="header__title">{{ .Params.packageTitle }}</h2>
+                    <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>
+                    <button class="contact-btn" 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/dm_ip.png');">
-                        <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 class="header-right header-dm" style="background-image: url('/imgs/dm/dm_ip.png');">
+                        <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"></h2>
+          <section class="category container text-center py-5 dm-description">
+            <h2 class="category-sub-h2"></h2>
             <h5 style="font-weight: 300;">{{ .Params.description }}</h5>
           </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="" style="width: 60%;">
-                    <img class="img-block__linecir left" src="/imgs/裝飾圓.webp" alt="">
+                    <img class="img-block-img " src="{{ .Params.block1_img }}" alt="" style="width: 60%;">
+                    <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>
@@ -159,16 +159,16 @@
                   <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="">
+                  <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="">
+                    <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>
@@ -189,28 +189,28 @@
                     </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="">
+                    <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="pageForm-p">
                   <div class="mb-3">
-                    <div class="pageForm__title">
-                      <h3 class="pageForm__title-h3">IP授權AI虛擬角色服務</h3>
+                    <div class="pageForm-title">
+                      <h3 class="pageForm-title-h3">IP授權AI虛擬角色服務</h3>
                     </div>
                   </div>
-                  <div class="pageForm__txt mb-3 ">
+                  <div class="pageForm-txt mb-3 ">
                     <p>集仕多擁有集AI技術獨立研發SaaS快速影片創作平台，用戶輸入文稿即有虛擬代言角色在旁提供中、英文等多種語言講解，且自動上字幕。
                       透過AI變臉技術，讓IP角色模擬真人發音嘴形、生動代言主講攻佔用戶螢幕，其製作出的影片更易於讓消費者理解。
 
                     </p>
                   </div>
-                  <div class="pageForm__notice">
-                    <a class="btn__detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
+                  <div class="pageForm-notice">
+                    <a class="btn-detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
                     <p>填寫該表單將會有專人與你聯繫。<br>
                       如有問題歡迎來信 service@choozmo.com 或來電 036670804
                     </p>
@@ -218,7 +218,7 @@
                 </div>
               </div>
               <div class="col-12 col-md-6">
-                <div class="pageForm__p">
+                <div class="pageForm-p">
                   <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
                   <script>
                     hbspt.forms.create({

layouts/page/single.html

@@ -31,7 +31,7 @@
 
         {{ partial "clients.html" . }}
 
-        {{ partial "footer.html" . }}
+        {{ partial "footer_default.html" . }}
 
     </div>
     <!-- /#all -->

layouts/partials/footer.html

@@ -1,97 +1,39 @@
-<footer id="footer">
-    <div class="container container__footer">
-
-        {{ if isset .Site.Params "about_us" }}
-        <div class="col-md-4 col-sm-6">
-            <h4>{{ i18n "aboutUs" }}</h4>
-
-            {{ .Site.Params.about_us | safeHTML }}
-            <div class="followus">
-                <span class="followus__txt">關注我們</span>
-                <a href="https://www.youtube.com/channel/UCi3jHOCCmx0Zyl2ZvoHzHQg" class="followus__img"><img src="img/youtube.png" alt=""></a>
-                <a href="https://line.me/R/ti/p/@choozmo?from=page" class="followus__img"><img src="img/line.png" alt=""></a>
-                <a href="">訂閱電子報<i class="fas fa-envelope"></i></a>
-            </div>
-            <hr class="hidden-md hidden-lg hidden-sm">
-
+<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="" style="width: 100%; max-width: 250px;">
+        <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.instagram.com/choozmo_cmm/">
+            <img src="https://i.imgur.com/pdJPY7m.png" alt="" width="60px" height="60px" style="margin-left: -6px; margin-right: -8px;">
+          </a>
+          <a href="https://twitter.com/ai_cmm">
+            <img src="https://i.imgur.com/qGBzq4J.png" alt="" width="32px" height="28px" style="margin-right: 3px;">
+          </a>
+          <a href="https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg">
+            <img src="https://i.imgur.com/zn6DUY8.png" alt="" width="38px" height="38px">
+          </a>
         </div>
-        <!-- /.col-md-4 -->
-        {{ end }}
-
-        <div class="col-md-4 col-sm-6">
-            <div>
-                <p class="footer__btn__text">想洽詢我們的專案製作嗎？</p>
-                <a href="/contact/service/" class="btn btn-lg">洽詢專案製作</a>
-            </div>
-            {{ if isset .Site.Params "recent_posts" }} {{ if .Site.Params.recent_posts.enable }}
-            <h4>{{ i18n "recentPosts" }}</h4>
-
-            <div class="blog-entries">
-                {{ range first 3 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
-                <div class="item same-height-row clearfix">
-                    <div class="image same-height-always">
-                        <a href="{{ .Permalink }}">
-                          {{ if isset .Params "banner" }}
-                            <img src="{{ .Params.banner | relURL }}" class="img-responsive" alt="{{ .Title }}">
-                          {{ else }}
-                            <img src="{{ "img/placeholder.png" | relURL }}" class="img-responsive" alt="{{ .Title }}">
-                          {{ end }}
-                        </a>
-                    </div>
-                    <div class="name same-height-always">
-                        <h5><a href="{{ .Permalink }}">{{ .Title }}</a></h5>
-                    </div>
-                </div>
-                {{ end }}
-            </div>
-
-            <hr class="hidden-md hidden-lg">
-            {{ end }} {{ end }}
-
-        </div>
-        <!-- /.col-md-4 -->
-
-        {{ if isset .Site.Params "address" }}
-        <div class="col-md-4 col-sm-6">
-
-          <h4>{{ i18n "contactTitle" }}</h4>
-
-            {{ .Site.Params.address | safeHTML }}
-
-            <!-- <a href="/contact" class="btn btn-small btn-template-main">{{ i18n "contactGoTo" }}</a> -->
-
-            <hr class="hidden-md hidden-lg hidden-sm">
-
-        </div>
-        <!-- /.col-md-4 -->
-        {{ end }}
-
-    </div>
-    <!-- /.container -->
-</footer>
-
-<!-- /#footer -->
-
-<!-- *** FOOTER END *** -->
-
-<!-- *** COPYRIGHT ***
-_________________________________________________________ -->
-
-<div id="copyright">
-    <div class="container">
-        <div class="col-md-12">
-            {{ if isset .Site.Params "copyright" }}
-            <p class="pull-left">{{ .Site.Params.copyright | safeHTML }}</p>
-            {{ end }}
-            <p class="pull-right">
-              {{ i18n "templateBy" | markdownify }} <a href="https://bootstrapious.com/p/universal-business-e-commerce-template">Bootstrapious</a>.
-              <!-- Not removing this link is part of the licence conditions of the template. Thanks for understanding :) -->
-
-              {{ i18n "portedBy" | markdownify }} <a href="https://github.com/devcows/hugo-universal-theme">DevCows</a>.
-            </p>
+      </div>
+      <div class="col-xs-12 col-sm-6">
+        <div class="footer-contacts">
+          <h5>CONTACT</h5>
+          <div>
+            集仕多股份有限公司<br>新竹縣竹北市復興二路229號9樓之9<br>聯絡電話：036670804<br>聯絡信箱：SERVICE@CHOOZMO.COM
+          </div>
         </div>
+      </div>
     </div>
-</div>
-<!-- /#copyright -->
-
-<!-- *** COPYRIGHT END *** -->
+  </div>
+</footer>

layouts/partials/footer_default.html

@@ -0,0 +1,97 @@
+<footer id="footer">
+    <div class="container container__footer">
+
+        {{ if isset .Site.Params "about_us" }}
+        <div class="col-md-4 col-sm-6">
+            <h4>{{ i18n "aboutUs" }}</h4>
+
+            {{ .Site.Params.about_us | safeHTML }}
+            <div class="followus">
+                <span class="followus__txt">關注我們</span>
+                <a href="https://www.youtube.com/channel/UCi3jHOCCmx0Zyl2ZvoHzHQg" class="followus__img"><img src="img/youtube.png" alt=""></a>
+                <a href="https://line.me/R/ti/p/@choozmo?from=page" class="followus__img"><img src="img/line.png" alt=""></a>
+                <a href="">訂閱電子報<i class="fas fa-envelope"></i></a>
+            </div>
+            <hr class="hidden-md hidden-lg hidden-sm">
+
+        </div>
+        <!-- /.col-md-4 -->
+        {{ end }}
+
+        <div class="col-md-4 col-sm-6">
+            <div>
+                <p class="footer__btn__text">想洽詢我們的專案製作嗎？</p>
+                <a href="/contact/service/" class="btn btn-lg">洽詢專案製作</a>
+            </div>
+            {{ if isset .Site.Params "recent_posts" }} {{ if .Site.Params.recent_posts.enable }}
+            <h4>{{ i18n "recentPosts" }}</h4>
+
+            <div class="blog-entries">
+                {{ range first 3 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
+                <div class="item same-height-row clearfix">
+                    <div class="image same-height-always">
+                        <a href="{{ .Permalink }}">
+                          {{ if isset .Params "banner" }}
+                            <img src="{{ .Params.banner | relURL }}" class="img-responsive" alt="{{ .Title }}">
+                          {{ else }}
+                            <img src="{{ "img/placeholder.png" | relURL }}" class="img-responsive" alt="{{ .Title }}">
+                          {{ end }}
+                        </a>
+                    </div>
+                    <div class="name same-height-always">
+                        <h5><a href="{{ .Permalink }}">{{ .Title }}</a></h5>
+                    </div>
+                </div>
+                {{ end }}
+            </div>
+
+            <hr class="hidden-md hidden-lg">
+            {{ end }} {{ end }}
+
+        </div>
+        <!-- /.col-md-4 -->
+
+        {{ if isset .Site.Params "address" }}
+        <div class="col-md-4 col-sm-6">
+
+          <h4>{{ i18n "contactTitle" }}</h4>
+
+            {{ .Site.Params.address | safeHTML }}
+
+            <!-- <a href="/contact" class="btn btn-small btn-template-main">{{ i18n "contactGoTo" }}</a> -->
+
+            <hr class="hidden-md hidden-lg hidden-sm">
+
+        </div>
+        <!-- /.col-md-4 -->
+        {{ end }}
+
+    </div>
+    <!-- /.container -->
+</footer>
+
+<!-- /#footer -->
+
+<!-- *** FOOTER END *** -->
+
+<!-- *** COPYRIGHT ***
+_________________________________________________________ -->
+
+<div id="copyright">
+    <div class="container">
+        <div class="col-md-12">
+            {{ if isset .Site.Params "copyright" }}
+            <p class="pull-left">{{ .Site.Params.copyright | safeHTML }}</p>
+            {{ end }}
+            <p class="pull-right">
+              {{ i18n "templateBy" | markdownify }} <a href="https://bootstrapious.com/p/universal-business-e-commerce-template">Bootstrapious</a>.
+              <!-- Not removing this link is part of the licence conditions of the template. Thanks for understanding :) -->
+
+              {{ i18n "portedBy" | markdownify }} <a href="https://github.com/devcows/hugo-universal-theme">DevCows</a>.
+            </p>
+        </div>
+    </div>
+</div>
+<!-- /#copyright -->
+
+<!-- *** COPYRIGHT END *** -->

layouts/partials/head.html

@@ -59,51 +59,7 @@
   <!-- RSS feed -->
   <link rel="alternate" href="{{ "/index.xml" | absURL }}" type="application/rss+xml" title="{{ .Site.Title }}">
 
-  <!-- Facebook OpenGraph tags -->
-  {{ $is_blog := and (eq .Type "blog") (eq .Kind "page") }}
-  {{ $has_image :=  isset .Params "banner" }}
-  {{ $image := cond $has_image .Params.banner (.Site.Params.default_sharing_image | default "img/sharing-default.png") }}
-  {{ $is_valid_image := print "static/" $image | fileExists }}
-  {{ if $is_valid_image }}
-  {{ $image_ext := path.Ext $image }}
-  <meta property="og:locale" content="{{ replace .Site.LanguageCode "-" "_" }}">
-  <meta property="og:site_name" content="{{ .Site.Title }}">
-  <meta property="og:title" content="{{ $title_plain }}">
-  <meta property="og:type" content="{{ cond $is_blog "article" "website" }}">
-  <meta property="og:url" content="{{ .Permalink }}" />
-  <meta property="og:description" content="{{ $description_plain }}">
-  <meta property="og:image" content="{{ $image | absURL }}">
-  <meta property="og:image:type" content="image/{{ if eq $image_ext ".svg" }}svg+xml{{ else }}{{ trim $image_ext "." }}{{ end }}">
-  {{ with .Params.banner_alt }}<meta property="og:image:alt" content="{{ . | markdownify | plainify }}">{{ end }}
-  {{ $image_local :=  printf "/static/%s" $image}}
-  {{ with (imageConfig $image_local) }}
-    <meta property="og:image:width" content="{{ .Width }}">
-    <meta property="og:image:height" content="{{ .Height }}">
-  {{ end }}
-  {{ end }}
-  {{ with .Lastmod }}<meta property="og:updated_time" content="{{ .Format "2006-01-02T15:04:05Z0700" }}">{{ end }}
-  {{ if $is_blog }}
-    {{ with .Param "facebook_site" }}<meta property="article:publisher" content="https://www.facebook.com/{{ . }}/">{{ end }}
-    {{ with .Param "facebook_author" }}<meta property="article:author" content="https://www.facebook.com/{{ . }}/">{{ end }}
-    {{ with .Params.categories }}<meta property="article:section" content="{{ index . 0 }}">{{ end }}
-    {{ range .Params.tags }}<meta property="article:tag" content="{{ . }}">
-    {{ end }}
-    {{ if gt .ExpiryDate .PublishDate }}<meta property="article:expiration_time" content="{{ .ExpiryDate.Format "2006-01-02T15:04:05Z0700" }}">{{ end }}
-    {{ with .PublishDate }}<meta property="article:published_time" content="{{ .Format "2006-01-02T15:04:05Z0700" }}">{{ end }}
-    {{ with .Lastmod }}<meta property="article:modified_time" content="{{ .Format "2006-01-02T15:04:05Z0700" }}">{{ end }}
-  {{ end }}
 
-  <!-- Twitter Card meta tags -->
-  <meta name="twitter:card" content="summary{{ if (and $is_blog (and $has_image $is_valid_image)) }}_large_image{{ end }}">
-  {{ with .Param "twitter_site" }}<meta name="twitter:site" content="@{{ . }}">{{ end }}
-  <meta name="twitter:title" content="{{ $title_plain | truncate 70 }}">
-  {{ if $is_valid_image }}
-  <meta name="twitter:image" content="{{ $image | absURL }}">
-  {{ end }}
-  <meta name="twitter:description" content="{{ $description_plain | truncate 200 }}">
-  {{ with .Param "twitter_author" }}<meta name="twitter:creator" content="@{{ . }}">{{ end }}
-  
-  <meta name="facebook-domain-verification" content="3xipgs46lfxeohb6sq2xw3ulmq94ew" />
   <!-- Global site tag (gtag.js) - Google Ads: 474336061 -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=AW-474336061"></script>
   <script>

layouts/partials/navbar.html

@@ -27,6 +27,7 @@
             <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="/seo-image/dm/">形象 SEO</a></li>
             <li><a class="dropdown-item" href="/youtube-views/dm/">YouTube 影片觀看方案</a></li>
           </ul>
         </li>

layouts/research/single.html

@@ -69,33 +69,33 @@
   {{ partial "navbar.html" . }}
   <main>
     <section class="header">
-      <img src="/imgs/01.webp" alt="" class="header__lefttop">
+      <img src="/imgs/01.webp" alt="" class="header-lefttop">
       <div class="row align-items-center g-0">
         <div class="col-12 col-md-5 text-center ">
-          <h2 class="header__title">{{ .Params.packageTitle }}</h2>
+          <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>
+            <button class="contact-btn" 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('https://i.imgur.com/cqerHee.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 class="header-right header-dm" style="background-image: url('https://i.imgur.com/cqerHee.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"></h2>
+    <section class="category container text-center py-5 dm-description">
+      <h2 class="category-sub-h2"></h2>
       <h5 style="font-weight: 300;">{{ .Params.description }}</h5>
     </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="" style="width: 50%;">
-          <img class="img-block__linecir left" src="/imgs/裝飾圓.webp" alt="">
+          <img class="img-block-img " src="{{ .Params.block1_img }}" alt="" style="width: 50%;">
+          <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>
@@ -112,16 +112,16 @@
           <p>{{ .Params.block2_text | markdownify }}</p>
         </div>
         <div class="col position-relative">
-          <img class="img-block__img" src="{{ .Params.block2_img }}" alt="" style="width: 50%;">
-          <img class="img-block__linecir right" src="/imgs/裝飾圓.webp" alt="">
+          <img class="img-block-img" src="{{ .Params.block2_img }}" alt="" style="width: 50%;">
+          <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="" style="width: 50%;">
-          <img class="img-block__linecir left" src="/imgs/裝飾圓.webp" alt="">
+          <img class="img-block-img" src="{{ .Params.block3_img }}" alt="" style="width: 50%;">
+          <img class="img-block-linecir left" src="/imgs/裝飾圓.webp" alt="">
         </div>
         <div class="col my-auto pt-3 pt-md-0">
           <h4>{{ .Params.block3_title }}</h4>
@@ -142,27 +142,27 @@
           </ul>
         </div>
         <div class="col position-relative">
-          <img class="img-block__img" src="{{ .Params.block4_img }}" alt="" style="width: 50%;">
-          <img class="img-block__linecir right" src="/imgs/裝飾圓.webp" alt="">
+          <img class="img-block-img" src="{{ .Params.block4_img }}" alt="" style="width: 50%;">
+          <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="pageForm-p">
             <div class="mb-3">
-              <div class="pageForm__title">
-                <h3 class="pageForm__title-h3">企業系統研發委外方案</h3>
+              <div class="pageForm-title">
+                <h3 class="pageForm-title-h3">企業系統研發委外方案</h3>
               </div>
             </div>
-            <div class="pageForm__txt mb-3 ">
+            <div class="pageForm-txt mb-3 ">
               <p>集仕多擁有前瞻技術及強大研發工程師團隊，以科技為導向提供解決方案或提供多種資訊研發服務，提供企業節省人力開銷的資訊委外解決方案。
                 並依照企業用戶的情況提供的需求，透過評估及分析後，補強用戶在資訊規劃上的不足，提升企業運作效率。
               </p>
             </div>
-            <div class="pageForm__notice">
-              <a class="btn__detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
+            <div class="pageForm-notice">
+              <a class="btn-detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
               <p>填寫該表單將會有專人與你聯繫。<br>
                 如有問題歡迎來信 service@choozmo.com 或來電 036670804
               </p>
@@ -170,7 +170,7 @@
           </div>
         </div>
         <div class="col-12 col-md-6">
-          <div class="pageForm__p">
+          <div class="pageForm-p">
             <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
             <script>
               hbspt.forms.create({

layouts/seo-image/single.html

@@ -14,238 +14,121 @@
   <!-- 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="">
+      <img src="{{ .Params.banner }}" alt="" class="img-fluid pt-5 px-0 px-lg-5 d-none d-md-block">
+      <img src="/imgs/dm/seo-image-mb.webp" alt="" class="img-fluid pt-5 px-2 d-block d-md-none">
+    </section>
+
+    <div class="container mt-md-5">
+      <div class="row">
+        <div class="col-12 col-lg-8">
+          <div class="video-box">
+            <iframe src="https://www.youtube.com/embed/6uMQaljwMig" title="YouTube video player" frameborder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowfullscreen></iframe>
           </div>
         </div>
+        <div class="col-12 col-lg-4 mt-5 mt-lg-0 d-flex align-items-center">
+          <p class="fw-bold">
+            {{ .Params.description }}
+            <br><br>
+            {{ .Params.descriptionSub }}
+          </p>
+        </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>
+    </div>
 
-    <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 class="container content">
+      <div class="row">
+        <div class="col-12 col-lg-7 position-relative d-flex flex-column align-items-center">
+          <h4 class="title mb-lg-4 mb-5">
+            {{ .Params.block1_title }}
+          </h4>
+          <p>
+            {{ .Params.block1_text1 }}
+            <br>
+            {{ .Params.block1_text2 }}
+            <br>
+            {{ .Params.block1_text3 }}
+          </p>
+          <img src="{{ .Params.block1_img }}" alt="" class="img-fluid img-item" style="max-width: 700px;">
+          <img src="/imgs/dm/circle-01.webp" alt="" class="purple-circle">
+          <img src="/imgs/dm/seo-image-06.webp" alt="" class="line">
         </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 class="row" style="margin-top: 75px;">
+        <div class="col-5"></div>
+        <div class="col-12 col-lg-6 position-relative d-flex flex-column align-items-center">
+          <h4 class="title mb-lg-4 mb-5">
+            {{ .Params.block2_title }}
+          </h4>
+          <p>
+            {{ .Params.block2_text1 }}
+            <br>
+            {{ .Params.block2_text2 }}
+          </p>
+          <img src="{{ .Params.block2_img }}" alt="" class="img-fluid mt-5 mt-lg-3 img-item" style="max-width: 500px;">
+          <img src="/imgs/dm/circle-02.webp" alt="" class="orange-circle">
         </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 class="row" style="margin-top: 140px;">
+        <div class="col-2"></div>
+        <div class="col-12 col-lg-6 d-flex flex-column align-items-center">
+          <h4 class="title mb-lg-4 mb-5">
+            {{ .Params.block3_title }}
+          </h4>
+          <p>
+            {{ .Params.block3_text1 }}
+            <br>
+            {{ .Params.block3_text2 }}
+            <br>
+            {{ .Params.block3_text3 }}
+          </p>
+          <img src="{{ .Params.block3_img }}" alt="" class="img-fluid img-item" style="max-width: 800px;">
         </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-01.webp" alt="" class="circle">
     </section>
+
     <div class="container loaded pageForm">
       <div class="row">
         <div class="col-12 col-md-6">
-          <div class="pageForm__p">
+          <div class="pageForm-p">
             <div class="mb-3">
-              <div class="pageForm__title">
-                <h3 class="pageForm__title-h3">SEO 搜尋排名優化服務</h3>
+              <div class="pageForm-title">
+                <h3 class="pageForm-title-h3">
+                  {{ .Params.form_title }}
+                  <br>
+                  {{ .Params.form_subtitle }}
+                </h3>
               </div>
             </div>
-            <div class="pageForm__txt mb-3 ">
-              <p>集仕多擁有獨家的 SEO 顯微鏡健檢服務，幫助你進行網站健檢，盤點網頁結構、速度及關鍵字研究，選擇適合你的關鍵字結合內容行銷，逐步提升排名
-                並且進行優化分析與策略，提出SEO改善建議，偕同逐項優化，推動排名向前。
+            <div class="pageForm-txt mb-3 ">
+              <p>{{ .Params.form_description }}
               </p>
             </div>
-            <div class="pageForm__notice">
-              <a class="btn__detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
+            <div class="pageForm-notice">
+              <a class="btn-detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
               <p>填寫該表單將會有專人與你聯繫。<br>
-                如有問題歡迎來信 service@choozmo.com 或來電 036670804
+                如有問題歡迎來信 service@choozmo.com 或來電 03-6670804
               </p>
             </div>
           </div>
         </div>
         <div class="col-12 col-md-6">
-          <div class="pageForm__p">
+          <div class="pageForm-p">
             <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
             <script>
               hbspt.forms.create({
@@ -260,39 +143,9 @@
 
     </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/seo/single.html

@@ -69,33 +69,33 @@
   {{ partial "navbar.html" . }}
   <main>
     <section class="header">
-      <img src="/imgs/01.webp" alt="" class="header__lefttop">
+      <img src="/imgs/01.webp" alt="" class="header-lefttop">
       <div class="row align-items-center g-0">
         <div class="col-12 col-md-5 text-center ">
-          <h2 class="header__title">{{ .Params.packageTitle }}</h2>
+          <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>
+            <button class="contact-btn" 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('https://i.imgur.com/ApmF3a9.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 class="header-right header-dm" style="background-image: url('https://i.imgur.com/ApmF3a9.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"></h2>
+    <section class="category container text-center py-5 dm-description">
+      <h2 class="category-sub-h2"></h2>
       <h5 style="font-weight: 300;">{{ .Params.description }}</h5>
     </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="">
+          <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>
@@ -112,16 +112,16 @@
                   <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="">
+                  <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="">
+                    <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>
@@ -142,27 +142,27 @@
           </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="">
+          <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="pageForm-p">
             <div class="mb-3">
-              <div class="pageForm__title">
-                <h3 class="pageForm__title-h3">SEO 搜尋排名優化服務</h3>
+              <div class="pageForm-title">
+                <h3 class="pageForm-title-h3">SEO 搜尋排名優化服務</h3>
               </div>
             </div>
-            <div class="pageForm__txt mb-3 ">
+            <div class="pageForm-txt mb-3 ">
               <p>集仕多擁有獨家的 SEO 顯微鏡健檢服務，幫助你進行網站健檢，盤點網頁結構、速度及關鍵字研究，選擇適合你的關鍵字結合內容行銷，逐步提升排名
                 並且進行優化分析與策略，提出SEO改善建議，偕同逐項優化，推動排名向前。
               </p>
             </div>
-            <div class="pageForm__notice">
-              <a class="btn__detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
+            <div class="pageForm-notice">
+              <a class="btn-detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
               <p>填寫該表單將會有專人與你聯繫。<br>
                 如有問題歡迎來信 service@choozmo.com 或來電 036670804
               </p>
@@ -170,7 +170,7 @@
           </div>
         </div>
         <div class="col-12 col-md-6">
-          <div class="pageForm__p">
+          <div class="pageForm-p">
             <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
             <script>
               hbspt.forms.create({

layouts/tags/vtuber.html

@@ -1,113 +1,117 @@
 <!DOCTYPE html>
 <html lang="{{ .Site.LanguageCode }}">
 
-  {{ partial "head.html" . }}
-
-  <body>
-
-    <div id="all">
-
-        {{ partial "nav.html" . }}
-
-<div id="content">
-    <h1>vtuber</h1>
-    <h1>vtuber</h1>
-    
-    <div class="container">
-                <div class="row">
-                    <!-- *** LEFT COLUMN *** -->
-                    <div class="col-md-9" id="blog-listing-medium">
-                    
-                        {{ $paginator := .Paginate (where .Data.Pages "Type" "blog") }}
-                        {{ range $paginator.Pages }}
-                        <section class="post">
-                            <div class="row">
-                                <div class="col-md-4">
-                                  <div class="image">
-                                      <a href="{{ .Permalink }}">
-                                          {{ if .Params.banner }}
-                                          <img src="{{ .Params.banner | relURL }}" class="img-responsive" alt="">
-                                          {{ else }}
-                                          <img src="{{ "img/placeholder.png" | relURL }}" class="img-responsive" alt="">
-                                          {{ end }}
-                                      </a>
-                                  </div>
-                                </div>
-                                <div class="col-md-8">
-                                    <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
-                                    <div class="clearfix">
-                                        <p class="author-category">
-                                          {{ if isset .Params "author" }}
-                                          {{ i18n "authorBy" }} <a href="#">{{ .Params.author }}</a>
-                                          {{ end }}
-                                          {{ if isset .Params "categories" }}
-                                          {{ if gt (len .Params.categories) 0 }}
-                                          in <a href="{{ "categories/" | relURL }}{{ index .Params.categories 0 | urlize | lower }}">{{ index .Params.categories 0 }}</a>
-                                          {{ end }}
-                                          {{ end }}
-
-                                        </p>
-                                        {{ if isset .Params "date" }}
-                                        <p class="date-comments">
-                                            <a href="{{ .Permalink }}"><i class="far fa-calendar"></i> {{ .Date.Format .Site.Params.date_format }}</a>
-                                        </p>
-                                        {{ end }}
-                                    </div>
-                                    <p class="intro">{{ .Summary }}</p>
-                                    <p class="read-more"><a href="{{ .Permalink }}" class="btn btn-template-main">{{ i18n "continueReading" }}</a>
-                                    </p>
-                                </div>
-                            </div>
-                        </section>
-                        {{ end }}
-
-                        <ul class="pager">
-                            {{ if .Paginator.HasPrev }}
-                            <li class="previous"><a href="{{ .Paginator.Prev.URL | relURL }}">&larr; {{ i18n "newer" }}</a></li>
-                            {{ else }}
-                            <li class="previous disabled"><a href="#">&larr; {{ i18n "newer" }}</a></li>
-                            {{ end }}
-
-                            {{ if .Paginator.HasNext }}
-                            <li class="next"><a href="{{ .Paginator.Next.URL | relURL }}">{{ i18n "older" }} &rarr;</a></li>
-                            {{ else }}
-                            <li class="next disabled"><a href="#">{{ i18n "older" }} &rarr;</a></li>
-                            {{ end }}
-                        </ul>
-                    </div>
-                    <!-- /.col-md-9 -->
-
-                    <!-- *** LEFT COLUMN END *** -->
-
-                    <!-- *** RIGHT COLUMN ***
+{{ partial "head.html" . }}
+
+<body>
+
+  <div id="all">
+
+    {{ partial "nav.html" . }}
+
+    <div id="content">
+      <h1>vtuber</h1>
+      <h1>vtuber</h1>
+
+      <div class="container">
+        <div class="row">
+          <!-- *** LEFT COLUMN *** -->
+          <div class="col-md-9" id="blog-listing-medium">
+
+            {{ $paginator := .Paginate (where .Data.Pages "Type" "blog") }}
+            {{ range $paginator.Pages }}
+            <section class="post">
+              <div class="row">
+                <div class="col-md-4">
+                  <div class="image">
+                    <a href="{{ .Permalink }}">
+                      {{ if .Params.banner }}
+                      <img src="{{ .Params.banner | relURL }}" class="img-responsive" alt="">
+                      {{ else }}
+                      <img src="{{ " img/placeholder.png" | relURL }}" class="img-responsive" alt="">
+                      {{ end }}
+                    </a>
+                  </div>
+                </div>
+                <div class="col-md-8">
+                  <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+                  <div class="clearfix">
+                    <p class="author-category">
+                      {{ if isset .Params "author" }}
+                      {{ i18n "authorBy" }} <a href="#">{{ .Params.author }}</a>
+                      {{ end }}
+                      {{ if isset .Params "categories" }}
+                      {{ if gt (len .Params.categories) 0 }}
+                      in <a href="{{ " categories/" | relURL }}{{ index .Params.categories 0 | urlize | lower }}">{{
+                        index .Params.categories 0 }}</a>
+                      {{ end }}
+                      {{ end }}
+
+                    </p>
+                    {{ if isset .Params "date" }}
+                    <p class="date-comments">
+                      <a href="{{ .Permalink }}"><i class="far fa-calendar"></i> {{ .Date.Format
+                        .Site.Params.date_format }}</a>
+                    </p>
+                    {{ end }}
+                  </div>
+                  <p class="intro">{{ .Summary }}</p>
+                  <p class="read-more"><a href="{{ .Permalink }}" class="btn btn-template-main">{{ i18n
+                      "continueReading" }}</a>
+                  </p>
+                </div>
+              </div>
+            </section>
+            {{ end }}
+
+            <ul class="pager">
+              {{ if .Paginator.HasPrev }}
+              <li class="previous"><a href="{{ .Paginator.Prev.URL | relURL }}">&larr; {{ i18n "newer" }}</a></li>
+              {{ else }}
+              <li class="previous disabled"><a href="#">&larr; {{ i18n "newer" }}</a></li>
+              {{ end }}
+
+              {{ if .Paginator.HasNext }}
+              <li class="next"><a href="{{ .Paginator.Next.URL | relURL }}">{{ i18n "older" }} &rarr;</a></li>
+              {{ else }}
+              <li class="next disabled"><a href="#">{{ i18n "older" }} &rarr;</a></li>
+              {{ end }}
+            </ul>
+          </div>
+          <!-- /.col-md-9 -->
+
+          <!-- *** LEFT COLUMN END *** -->
+
+          <!-- *** RIGHT COLUMN ***
        _________________________________________________________ -->
 
-                    <div class="col-md-3">
+          <div class="col-md-3">
 
-                        <!-- *** MENUS AND WIDGETS *** -->
+            <!-- *** MENUS AND WIDGETS *** -->
 
-                        {{ partial "sidebar.html" . }}
+            {{ partial "sidebar.html" . }}
 
-                        <!-- *** MENUS AND FILTERS END *** -->
+            <!-- *** MENUS AND FILTERS END *** -->
 
-                    </div>
-                    <!-- /.col-md-3 -->
+          </div>
+          <!-- /.col-md-3 -->
 
-                    <!-- *** RIGHT COLUMN END *** -->
+          <!-- *** RIGHT COLUMN END *** -->
 
-                </div>
-                <!-- /.row -->
-            </div>
-            <!-- /.container -->
         </div>
-        <!-- /#content -->
+        <!-- /.row -->
+      </div>
+      <!-- /.container -->
+    </div>
+    <!-- /#content -->
 
-        {{ partial "footer.html" . }}
+    {{ partial "footer_default.html" . }}
 
-    </div>
-    <!-- /#all -->
+  </div>
+  <!-- /#all -->
+
+  {{ partial "scripts.html" . }}
 
-    {{ partial "scripts.html" . }}
+</body>
 
-  </body>
-</html>
+</html>

layouts/trenddetail/single.html

@@ -37,11 +37,11 @@
         </nav>
         <main>
             <section class="cntheader">
-                <img src="/imgs/01.png" alt="" class="header__lefttop">
+                <img src="/imgs/01.png" alt="" class="header-lefttop">
                 <div class="container">
                     <div class="row align-items-center g-0">
                         <div class="col-12 col-md-3 text-center ">
-                            <h2 class="header__title ">趨勢日報</h2>
+                            <h2 class="header-title ">趨勢日報</h2>
                             <h4 class="cntheader__sub">熱門排行</h4>
                         </div>
                         <div class="col-12 col-md-9 align-self-end">
@@ -156,7 +156,7 @@
                 <div class="row">
                 <div class="col-6">
                     <h4>About us</h4>
-                    <a href="http://www.choozmo.com/"><img src="/imgs/logo_choozmo.webp" class="footer_img"></a>
+                    <a href="http://www.choozmo.com/"><img src="/imgs/logo_choozmo.webp" class="footer-img"></a>
                     <div class="followus">
                         <span class="followus__txt">關注我們</span>
                         <a href="https://www.youtube.com/channel/UCi3jHOCCmx0Zyl2ZvoHzHQg" class="followus__img"><img src="/imgs/youtube-new-flat-logo-1.png" alt="" width="32px" height="32px"></a>

layouts/trends/single.html

@@ -37,10 +37,10 @@
       </nav>
       <main>
           <section class="header">
-            <img src="/imgs/01.webp" alt="" class="header__lefttop">
+            <img src="/imgs/01.webp" alt="" class="header-lefttop">
             <div class="row align-items-center g-0">
                 <div class="col-12 col-md-5 text-center ">
-                    <h2 class="header__title">趨勢日報</h2>
+                    <h2 class="header-title">趨勢日報</h2>
                     <h4 class="header__sub">熱門排行</h4>
                     <form class="d-flex header__form">
                         <input class="form-control header__form__input" type="search" placeholder="輸入email 掌握最新資訊" aria-label="Search">
@@ -48,14 +48,14 @@
                     </form>
                 </div>
                 <div class="col-12 col-md-7">
-                    <div class="header__right">
-                        <img src="/imgs/02.webp" alt="" class="header__right__cir">
-                        <div class="header__right__video">
+                    <div class="header-right">
+                        <img src="/imgs/02.webp" alt="" class="header-right-cir">
+                        <div class="header-right__video">
                             <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//IzHhpC_bD6g?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
                         </div>
-                        <img class="header__right__magnifier" src="/imgs/放大鏡.webp" alt="">
-                        <img class="header__right__bubble" src="/imgs/對話.webp" alt="">
-                        <img class="header__right__linecir" src="/imgs/裝飾圓.webp" alt="">
+                        <img class="header-right-magnifier" src="/imgs/放大鏡.webp" alt="">
+                        <img class="header-right-bubble" src="/imgs/對話.webp" alt="">
+                        <img class="header-right-linecir" src="/imgs/裝飾圓.webp" alt="">
                     </div>
                 </div>
             </div>
@@ -322,7 +322,7 @@
             <div class="row">
             <div class="col-6">
                 <h4>About us</h4>
-                <a href="http://www.choozmo.com/"><img src="/imgs/logo_choozmo.webp" class="footer_img"></a>
+                <a href="http://www.choozmo.com/"><img src="/imgs/logo_choozmo.webp" class="footer-img"></a>
                 <div class="followus">
                     <span class="followus__txt">關注我們</span>
                     <a href="https://www.youtube.com/channel/UCi3jHOCCmx0Zyl2ZvoHzHQg" class="followus__img"><img src="/imgs/youtube-new-flat-logo-1.png" alt="" width="32px" height="32px"></a>

layouts/video-making/single.html

@@ -78,26 +78,26 @@
   {{ partial "navbar.html" . }}
   <main>
     <section class="header">
-      <img src="/imgs/01.webp" alt="" class="header__lefttop">
+      <img src="/imgs/01.webp" alt="" class="header-lefttop">
       <div class="row align-items-center g-0">
         <div class="col-12 col-md-5 text-center">
-          <h2 class="header__title">{{ .Params.packageTitle }}</h2>
+          <h2 class="header-title">{{ .Params.packageTitle }}</h2>
           <p class="text-center px-3 m-0" style="font-size: 1.4rem;">{{ .Params.packageSub1 }}</p>
           <p class="text-center px-3" style="font-size: 1.4rem;">{{ .Params.packageSub2 }}</p>
-          <button class="btns-dark" onclick="window.location.href=`/contact/service/`">立即諮詢</button>
+          <button class="contact-btn" 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/dm_video-making-1.png');">
-            <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 class="header-right header-dm" style="background-image: url('/imgs/dm/dm_video-making-1.png');">
+            <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 dm__description mt-xl">
-      <h2 class="category__sub_h2"></h2>
+    <section class="category container text-center dm-description mt-xl">
+      <h2 class="category-sub-h2"></h2>
       <h5 style="font-weight: 300;">{{ .Params.description }}</h5>
     </section>
     <section class="category container-fluid text-center py-5" style="background-color: #FFEBE8;">
@@ -110,8 +110,8 @@
     <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="" style="width: 60%;">
-          <img class="img-block__linecir left" src="/imgs/裝飾圓.webp" alt="">
+          <img class="img-block-img " src="{{ .Params.block1_img }}" alt="" style="width: 60%;">
+          <img class="img-block-linecir left" src="/imgs/裝飾圓.webp" alt="">
         </div>
         <div class="col my-auto pt-3 pt-md-0">
           <h4>{{ .Params.block3_title }}</h4>
@@ -135,16 +135,16 @@
                   <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="">
+                  <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="">
+                    <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>
@@ -165,30 +165,30 @@
           </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="">
+          <img class="img-block-img" src="{{ .Params.block4_img }}" alt="">
+          <img class="img-block-linecir right" src="/imgs/裝飾圓.webp" alt="">
         </div>
       </div>
     </section>
     <!-- <section class="category container text-center img-block" style="padding-bottom: 6rem;">
-            <button class="btns-dark" onclick="window.location.href=`/contact/service/`">立即諮詢</button>
+            <button class="contact-btn" onclick="window.location.href=`/contact/service/`">立即諮詢</button>
           </section> -->
     <div class="container loaded pageForm">
       <div class="row">
         <div class="col-12 col-md-6">
-          <div class="pageForm__p">
+          <div class="pageForm-p">
             <div class="mb-3">
-              <div class="pageForm__title">
-                <h3 class="pageForm__title-h3">影音製作服務</h3>
+              <div class="pageForm-title">
+                <h3 class="pageForm-title-h3">影音製作服務</h3>
               </div>
             </div>
-            <div class="pageForm__txt mb-3 ">
+            <div class="pageForm-txt mb-3 ">
               <p>集仕多擁有專業影音剪輯團隊、豐富的影音行銷經驗，運用曝光畫面來讓品牌影片不再是漫無目的播放，而是正確的表達產品所訴求的內容。
                 精準鎖定目標客群，以最有效的方式提高品牌影音的注目性！再進一步增加品牌的印象及知名度等一一呈現，傳達企業發展前景！
               </p>
             </div>
-            <div class="pageForm__notice">
-              <a class="btn__detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
+            <div class="pageForm-notice">
+              <a class="btn-detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
               <p>填寫該表單將會有專人與你聯繫。<br>
                 如有問題歡迎來信 service@choozmo.com 或來電 036670804
               </p>
@@ -196,7 +196,7 @@
           </div>
         </div>
         <div class="col-12 col-md-6">
-          <div class="pageForm__p">
+          <div class="pageForm-p">
             <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
             <script>
               hbspt.forms.create({

layouts/youtube-views/single.html

@@ -78,24 +78,24 @@
   {{ partial "navbar.html" . }}
   <main id="youtube-views">
     <section class="header">
-      <img src="/imgs/dm/banner-01.webp" alt="" class="header__lefttop w-100">
+      <img src="/imgs/dm/bg-arrow.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>
+            <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>
+            <button class="contact-btn" 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 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>
+    <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>
@@ -350,9 +350,9 @@
       </div>
     </div>
 
-    <!-- <section class="category container text-center dm__description mt-xl">
+    <!-- <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>
+      <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.

static/css/custom.css

@@ -1484,7 +1484,7 @@
   vertical-align: middle;
 }
 
-.footer_img {
+.footer-img {
   height: 60px;
 }
 

static/css/style.css

@@ -14,14 +14,12 @@
 }
 
 .header {
-  margin-top: 50px;
-  padding-top: 6.5rem;
-  height: 75vh;
+  margin-top: 70px;
   position: relative;
-  padding-bottom: 3rem;
+  padding: 6rem 0 3rem;
 }
 
-.header__lefttop {
+.header-lefttop {
   position: absolute;
   left: 0;
   top: 0;
@@ -29,9 +27,8 @@
   width: 350px;
 }
 
-.header__title {
+.header-title {
   font-size: 3rem;
-  color: #20616d;
   font-weight: 400;
 }
 
@@ -86,7 +83,7 @@
   background-color: #ff892e;
 }
 
-.header__right {
+.header-right {
   width: 80%;
   height: 50vh;
   background-image: url("../imgs/電腦2.webp");
@@ -96,11 +93,11 @@
   position: relative;
 }
 
-.header__right.header__dm {
+.header-right.header-dm {
   background-image: url("https://i.imgur.com/SOu53ii.jpg");
 }
 
-.header__right__cir {
+.header-right-cir {
   width: 60%;
   position: absolute;
   right: 0%;
@@ -108,7 +105,7 @@
   z-index: -1;
 }
 
-.header__right__video {
+.header-right__video {
   position: absolute;
   width: 70%;
   height: auto;
@@ -116,14 +113,14 @@
   top: 1.8rem;
 }
 
-.header__right__magnifier {
+.header-right-magnifier {
   position: absolute;
   width: 25%;
   right: 3%;
   bottom: 1%;
 }
 
-.header__right__bubble {
+.header-right-bubble {
   position: absolute;
   width: 22%;
   top: 0;
@@ -131,7 +128,7 @@
   transform: translate(-60%, -50%);
 }
 
-.header__right__linecir {
+.header-right-linecir {
   width: 45%;
   position: absolute;
   left: -8%;
@@ -139,19 +136,152 @@
   z-index: -1;
 }
 
+/* footer.html Start */
+.footer {
+  color: #656565;
+}
+.footer .footer-contacts {
+  margin-top: 2rem;
+  line-height: 32px;
+}
+
+.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;
+}
+
+/* footer.html End */
+/* footer_default.html Start */
+.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;
+}
+
+/* footer_default.html End */
+/* iframe Start */
+.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%;
+}
+
+/* iframe End */
 .category {
   padding: 2rem 0rem;
 }
 
-.category.dm__description {
+.category.dm-description {
   padding: 2rem 8rem;
 }
 
-.category__sub_h2 {
+.category-sub-h2 {
   position: relative;
 }
 
-.category__sub_h2::after {
+.category-sub-h2::after {
   position: absolute;
   content: "";
   width: 4rem;
@@ -162,11 +292,11 @@
   transform: translateX(-50%);
 }
 
-.category__btngrp {
+.category-btngrp {
   padding: 0 8rem;
 }
 
-.category__btn {
+.category-btn {
   background-color: #a7d9e2;
   border: none;
   border-radius: 5rem;
@@ -177,7 +307,7 @@
   text-decoration: none;
 }
 
-.category__btn.active {
+.category-btn.active {
   background-color: #38a7bb;
   text-decoration: none;
   color: white;
@@ -266,55 +396,6 @@
   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;
@@ -348,7 +429,7 @@
   left: 67%;
 }
 
-.cntheader .category__btngrp {
+.cntheader .category-btngrp {
   padding: 0 4rem;
 }
 
@@ -472,7 +553,7 @@
   width: 100%;
 }
 
-.img-block .img-block__img {
+.img-block .img-block-img {
   width: 70%;
 }
 
@@ -480,7 +561,7 @@
   padding: 2rem 6rem;
 }
 
-.img-block__linecir {
+.img-block-linecir {
   position: absolute;
   right: 10%;
   bottom: 5%;
@@ -488,17 +569,17 @@
   z-index: -1;
 }
 
-.img-block__linecir.left {
+.img-block-linecir.left {
   right: -10%;
   bottom: -5%;
 }
 
-.img-block__linecir.right {
+.img-block-linecir.right {
   left: -10%;
   bottom: -5%;
 }
 
-.img-block__linecir.left {
+.img-block-linecir.left {
   left: -10%;
   bottom: -5%;
 }
@@ -570,7 +651,7 @@
   box-shadow: 1px 1px 5px 1px rgba(207, 207, 207, 0.53);
 }
 
-.btns-dark {
+.contact-btn {
   text-decoration: none;
   color: white;
   border: 1px solid #ea5413;
@@ -579,8 +660,13 @@
   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);
+  transition: all 0.3s;
+}
+.contact-btn:hover {
+  color: #ea5413;
+  background-color: transparent;
+  border: 1px solid #ea5413;
 }
 
 .loaded {
@@ -588,7 +674,7 @@
   margin-bottom: 4rem;
 }
 
-.pageForm__title {
+.pageForm-title {
   padding: 0 0 0 40px;
   background-image: url(/imgs/dm/accept.png);
   background-position: 0 0;
@@ -596,21 +682,21 @@
   background-size: 30px auto;
 }
 
-.pageForm__txt {
+.pageForm-txt {
   padding-left: 40px;
 }
 
-.pageForm__notice {
+.pageForm-notice {
   padding-left: 40px;
   color: grey;
   margin-top: 50px;
 }
 
-.pageForm__p {
+.pageForm-p {
   padding: 40px;
 }
 
-.btn__detailForm {
+.btn-detailForm {
   background-color: transparent;
   border: none;
   outline: none;
@@ -624,33 +710,29 @@
   text-decoration: none;
 }
 
-.btn__detailForm:hover {
+.btn-detailForm:hover {
   transform: translate(2px, 2px);
   text-decoration: none;
   color: #ff892e;
 }
 
 @media (max-width: 1300px) {
-  .header__right__video {
+  .header-right__video {
     position: absolute;
     width: 76%;
   }
 }
 @media (max-width: 992px) {
-  .header__title {
+  .header-title {
     font-size: 3rem;
   }
-  .cntheader .header__title {
+  .cntheader .header-title {
     font-size: 2.2rem;
   }
-  .header {
-    padding-top: 4rem;
-    height: 50vh;
-  }
-  .header__right {
+  .header-right {
     height: 40vh;
   }
-  .header__right__magnifier {
+  .header-right-magnifier {
     right: -2.5rem;
     bottom: 1rem;
   }
@@ -670,14 +752,14 @@
   .header__form__input {
     font-size: 0.9rem;
   }
-  .category__btngrp {
+  .category-btngrp {
     padding: 0;
   }
-  .category__btn {
+  .category-btn {
     padding: 0.3rem 1.5rem;
     font-size: 1.2rem;
   }
-  .ctncategory__btn {
+  .ctncategory-btn {
     padding: 0.2rem 1rem;
     font-size: 1rem;
   }
@@ -724,7 +806,7 @@
     right: 0;
     top: 0;
   }
-  .header__right__linecir {
+  .header-right-linecir {
     bottom: 0;
   }
   .cntheader__sub {
@@ -756,23 +838,20 @@
   }
 }
 @media (max-width: 767px) {
-  .header {
-    height: 70vh;
-  }
   .header .col-md-5 {
     margin-bottom: 3rem;
   }
-  .header__right__bubble {
+  .header-right-bubble {
     width: 15%;
   }
-  .header__right__magnifier {
+  .header-right-magnifier {
     right: 4rem;
     bottom: 1rem;
   }
   .category {
     padding-top: 4rem;
   }
-  .category.dm__description {
+  .category.dm-description {
     padding-top: 4rem;
     padding-left: 0;
     padding-right: 0;
@@ -781,7 +860,7 @@
   .category.mt-xl {
     margin-top: 8.5rem;
   }
-  .category.dm__description h5 {
+  .category.dm-description h5 {
     padding-left: 1rem;
     padding-right: 1rem;
   }
@@ -803,7 +882,7 @@
   .cntheader {
     padding-bottom: 0rem;
   }
-  .header__right__video {
+  .header-right__video {
     position: absolute;
     width: 70%;
     left: 2.3rem;
@@ -817,38 +896,33 @@
   }
 }
 @media (max-width: 576px) {
-  .header__title {
+  .header-title {
     font-size: 2.5rem;
   }
-  .header {
-    padding-top: 3rem;
-    height: 63vh;
-    padding-bottom: 0rem;
-  }
   .header.ai-training {
     height: 80vh;
   }
-  .header__right {
+  .header-right {
     height: 30vh;
   }
-  .header__right__magnifier {
+  .header-right-magnifier {
     right: 0rem;
     bottom: 1.5rem;
   }
-  .category__btn {
+  .category-btn {
     padding: 0.2rem 1rem;
     font-size: 1rem;
   }
   .category {
     padding: 1rem;
   }
-  .footer_img {
+  .footer-img {
     height: 50px;
   }
   .footer {
     font-size: 0.9rem;
   }
-  .pageForm__p {
+  .pageForm-p {
     padding: 15px;
   }
   .pageForm {
@@ -856,10 +930,10 @@
   }
 }
 @media (max-width: 480px) {
-  .ctncategory__btn {
+  .ctncategory-btn {
     margin-top: 0.6rem;
   }
-  .header__right__video {
+  .header-right__video {
     position: absolute;
     width: 75%;
     left: 2.1rem;
@@ -867,118 +941,101 @@
   }
 }
 /* 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;
-  }
+.blog-traffic {
+  overflow-x: hidden;
 }
-@media (max-width: 414px) {
-  .blog-traffic .header__right {
-    width: 100%;
-    height: 95vw;
-    top: 0px;
-    right: 5px;
-  }
+.blog-traffic .header {
+  padding: 0;
 }
-.blog-traffic .header__lefttop {
+.blog-traffic .banner {
   width: 100vw;
   height: auto;
-  top: -120px;
+  position: absolute;
+  z-index: -10;
 }
-
 @media (max-width: 767px) {
-  .blog-traffic .header__lefttop {
+  .blog-traffic .banner {
     width: 150vw;
     height: auto;
   }
 }
-.blog-traffic .header__title {
+.blog-traffic .header-img {
+  width: 150%;
+  height: auto;
+  position: relative;
+  top: -30px;
+  right: 30px;
+  z-index: -1;
+}
+@media (max-width: 767px) {
+  .blog-traffic .header-img {
+    width: 100%;
+    top: -45px;
+    right: unset;
+  }
+}
+.blog-traffic .header-title {
   font-size: 2.5rem;
   line-height: 65px;
   font-weight: 600;
+  color: #000;
 }
-
 @media (max-width: 768px) {
-  .blog-traffic .header__title {
+  .blog-traffic .header-title {
     font-size: 2.2rem;
   }
 }
+.blog-traffic .dm-description {
+  margin-top: -250px;
+}
+@media (max-width: 1400px) {
+  .blog-traffic .dm-description {
+    margin-top: -190px;
+  }
+}
+@media (max-width: 991px) {
+  .blog-traffic .dm-description {
+    margin-top: -100px;
+  }
+}
+.blog-traffic .dm-description p {
+  font-size: 20px;
+  line-height: 32px;
+}
 .blog-traffic .category {
   padding: 0;
+  position: relative;
 }
-
-.blog-traffic .category.dm__description {
+.blog-traffic .category.dm-description {
   padding: 0;
 }
-
-.blog-traffic .category__sub_h2::after {
+@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-sub-h2::after {
   width: 3rem;
   border-bottom: 10px solid #ea5413;
   margin-top: 15px;
 }
-
 .blog-traffic ul {
+  padding: 0;
   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 ul li {
+  line-height: 32px;
 }
-.blog-traffic .img-block__img {
+.blog-traffic .img-block-img {
   width: 12%;
   -o-object-fit: contain;
      object-fit: contain;
@@ -986,77 +1043,52 @@
   position: relative;
   top: -30px;
 }
-
 @media (max-width: 1200px) {
-  .blog-traffic .img-block__img {
+  .blog-traffic .img-block-img {
     top: -10px;
   }
-  .blog-traffic .img-first {
-    top: 0;
-  }
 }
 @media (max-width: 991px) {
-  .blog-traffic .img-block__img {
+  .blog-traffic .img-block-img {
     width: 15%;
   }
 }
 @media (max-width: 767px) {
-  .blog-traffic .img-block__img {
+  .blog-traffic .img-block-img {
     width: 20%;
     top: 5px;
   }
-  .blog-traffic .img-first {
-    top: 15px;
-  }
 }
 @media (max-width: 490px) {
-  .blog-traffic .img-block__img {
+  .blog-traffic .img-block-img {
     top: 15px;
   }
-  .blog-traffic .img-first {
-    top: 40px;
-  }
 }
 @media (max-width: 414px) {
-  .blog-traffic .img-block__img {
+  .blog-traffic .img-block-img {
     top: 22px;
   }
 }
-@media (max-width: 575px) {
-  .blog-traffic .category {
-    padding: 0 10px;
+@media (max-width: 1200px) {
+  .blog-traffic .img-first {
+    top: 0;
   }
 }
-.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;
+@media (max-width: 767px) {
+  .blog-traffic .img-first {
+    top: 15px;
+  }
 }
-
-.blog-traffic .category p,
-.blog-traffic .category li {
-  line-height: 30px;
+@media (max-width: 490px) {
+  .blog-traffic .img-first {
+    top: 40px;
+  }
 }
-
 .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;
@@ -1067,6 +1099,42 @@
     margin: 10px auto -25px;
   }
 }
+.blog-traffic .purple-circle {
+  width: 50%;
+  left: -250px;
+  bottom: 100px;
+}
+@media (max-width: 991px) {
+  .blog-traffic .purple-circle {
+    left: -150px;
+  }
+}
+@media (max-width: 767px) {
+  .blog-traffic .purple-circle {
+    left: -50px;
+  }
+}
+.blog-traffic .orange-circle {
+  width: 50%;
+  right: -200px;
+  top: -200px;
+}
+@media (max-width: 767px) {
+  .blog-traffic .orange-circle {
+    right: -100px;
+    top: -150px;
+  }
+}
+.blog-traffic .data-text .circle {
+  top: -250px;
+  right: -5vw;
+}
+@media (max-width: 767px) {
+  .blog-traffic .data-text .circle {
+    top: 0px;
+  }
+}
+
 /* blog-traffic End */
 /* youtube-views Start */
 #youtube-views {
@@ -1080,7 +1148,7 @@
   font-size: 1.3rem;
   font-weight: bold;
 }
-#youtube-views .header__right {
+#youtube-views .header-right {
   background-position: center;
 }
 #youtube-views .card-group {
@@ -1160,14 +1228,156 @@
   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 {
+  #youtube-views .category.dm-description {
     padding-top: 6rem;
   }
 }
 @media (max-width: 575px) {
-  #youtube-views .category.dm__description {
+  #youtube-views .category.dm-description {
     padding-top: 14rem;
   }
 }
 
-/* youtube-views End *//*# sourceMappingURL=style.css.map */
+/* youtube-views End */
+/* seo-image Start */
+.seo-image {
+  overflow-x: hidden;
+}
+.seo-image p {
+  line-height: 32px;
+}
+.seo-image .header {
+  padding: 0;
+}
+.seo-image .video-box {
+  width: 100%;
+  padding-bottom: 56%;
+}
+.seo-image .content {
+  margin: 150px auto;
+}
+@media (max-width: 767px) {
+  .seo-image .content {
+    margin: 80px auto;
+  }
+}
+.seo-image .line {
+  width: 820px;
+  position: absolute;
+  top: -70px;
+  left: 345px;
+}
+@media (max-width: 1400px) {
+  .seo-image .line {
+    width: 840px;
+    top: -85px;
+    left: 210px;
+  }
+}
+@media (max-width: 1200px) {
+  .seo-image .line {
+    width: 880px;
+    top: -90px;
+    left: 114px;
+  }
+}
+@media (max-width: 991px) {
+  .seo-image .line {
+    display: none;
+  }
+}
+.seo-image .title {
+  font-size: 28px;
+  color: #f6ab1c;
+  font-weight: bold;
+}
+@media (max-width: 991px) {
+  .seo-image .img-item {
+    width: 100%;
+    max-width: 100% !important;
+  }
+}
+.seo-image .purple-circle,
+.seo-image .orange-circle {
+  width: 100%;
+}
+@media (max-width: 991px) {
+  .seo-image .purple-circle,
+.seo-image .orange-circle {
+    width: 60%;
+  }
+}
+.seo-image .purple-circle {
+  top: -470px;
+  right: -100%;
+}
+@media (max-width: 991px) {
+  .seo-image .purple-circle {
+    top: -350px;
+    right: -150px;
+  }
+}
+@media (max-width: 767px) {
+  .seo-image .purple-circle {
+    top: -250px;
+    right: -20px;
+  }
+}
+.seo-image .orange-circle {
+  top: -200px;
+  left: -100%;
+}
+@media (max-width: 991px) {
+  .seo-image .orange-circle {
+    top: -30vw;
+    left: -20vw;
+  }
+}
+.seo-image .data-text .circle {
+  top: -400px;
+  right: -5vw;
+}
+@media (max-width: 991px) {
+  .seo-image .data-text .circle {
+    top: -250px;
+  }
+}
+@media (max-width: 767px) {
+  .seo-image .data-text .circle {
+    top: -120px;
+  }
+}
+
+/* seo-image End */
+/* 共用 className Start */
+.purple-circle,
+.orange-circle {
+  position: absolute;
+  z-index: -1;
+}
+
+.data-text {
+  position: relative;
+}
+.data-text p {
+  font-size: 28px;
+  font-weight: bold;
+  text-align: center;
+}
+.data-text .circle {
+  width: 500px;
+  z-index: -100;
+  position: absolute;
+}
+@media (max-width: 991px) {
+  .data-text .circle {
+    width: 400px;
+  }
+}
+@media (max-width: 767px) {
+  .data-text .circle {
+    width: 250px;
+  }
+}
+
+/* 共用 className End *//*# sourceMappingURL=style.css.map */

webSite/config.toml

@@ -200,7 +200,7 @@ page = ["HTML"]
     formspree_action = "https://formspree.io/sample/of/endpoint"
     contact_form_ajax = false
 
-    about_us = '<a href="http://www.choozmo.com/"><img src="img/logo_choozmo.webp" class="footer_img"></a>'
+    about_us = '<a href="http://www.choozmo.com/"><img src="img/logo_choozmo.webp" class="footer-img"></a>'
     copyright = "Copyright (c) 2021, Choozmo; all rights reserved."
 
     # Format dates with Go's time formatting

webSite/content/blog-traffic/dm.md

@@ -4,25 +4,29 @@ date = "2022-08-16T12:00:05+08:00"
 tags = ["blog-traffic"]
 categories = ["blog-traffic"]
 layout = "blog-traffic"
-banner = "/imgs/dm/blog-traffic.png"
+banner = "/imgs/dm/bg-arrow.webp"
 packageTitle = "創業家專案"
 packageSub = "口碑文章 | 搜尋結果"
-packageBg = "/imgs/dm/blog-traffic.png"
-description = "微型店家沒有精美官方網站做行銷？不要緊！此時透過集仕多微型店家行銷專案，為您打造最在地的商家信譽與口碑流量。讓您的店家在三個月之內，擁有一篇高流量口碑專訪文章帶動整體營收，提高店家在地知名度，獲取大大的網路聲量與流量，是當前最直接且立即可見效益的，微店 SEO 行銷解決方案。"
+packageBg = "/imgs/dm/blog-traffic.webp"
+description_1 = "微型店家沒有精美官方網站做行銷？不要緊！此時透過集仕多微型店家行銷專案，為您打造最在地的商家信譽與口碑流量。"
+description_2 = "讓您的店家在三個月之內，擁有一篇高流量口碑專訪文章帶動整體營收，提高店家在地知名度，獲取大大的網路聲量與流量，是當前最直接且立即可見效益的，微店 SEO 行銷解決方案。"
 
 block1_title = "地名 + 產業名，搜尋排第一"
 block1_sub = "例如：三重+新建案、新竹+牙醫"
 block1_strong = ""
 block1_text = "透過獨家 SEO 關鍵字研究報告結果，所撰寫出店家專訪口碑文章，透過集仕多的文章 SEO 流量技術，不斷地為您的店家專網文章，提升流量與搜尋排名，讓您的店家知名度與文章瀏覽數大大提升。"
-block1_img = "/imgs/dm/blog-traffic_01.png"
+block1_img = "/imgs/dm/blog-traffic-01.webp"
+block1_icon = "/imgs/dm/blog-traffic-icon-01.png"
 
 block2_title = "沒官網也能做 SEO"
 block2_strong = ""
 block2_text = "獨家 SEO 關鍵字顯微鏡系統 | 分析您的產業關鍵字搜尋量、關鍵字廣告熱門程度、同業競業關鍵字分析，以分群演算法，抓取出最值得您經營的關鍵字組，並運用在口碑文章 SEO 中獲取目標客群。"
-block2_img = "/imgs/dm/blog-traffic_02.png"
+block2_img = "/imgs/dm/blog-traffic-02.webp"
+block2_icon = "/imgs/dm/blog-traffic-icon-02.png"
 
 block3_title = "店家專訪口碑文章"
 block3_strong = ""
 block3_text = "為您撰寫店家專訪口碑文章，經營口碑提升店家知名度。搭配關鍵字研究策略的 SEO 顯微鏡獨家技術，將您的行業關鍵字埋入文章中，讓您的店家擁有專業關鍵字優化的專訪內容資產。"
-block3_img = "/imgs/dm/blog-traffic_03.png"
+block3_img = "/imgs/dm/blog-traffic-03.webp"
+block3_icon = "/imgs/dm/blog-traffic-icon-03.png"
 +++

webSite/content/seo-image/dm.md

@@ -4,31 +4,34 @@ date = "2021-08-19T12:00:05+08:00"
 tags = ["seo"]
 categories = ["seo"]
 layout = "seo"
-banner = "https://i.imgur.com/ApmF3a9.jpg"
+banner = "/imgs/dm/seo-image-01.webp"
 packageTitle = "形象 SEO"
 packageSub = "翻轉負面新聞｜搶救負評大作戰 "
-packageBg = "https://i.imgur.com/ApmF3a9.jpg"
-description = "您正困擾於被負面新聞與惡意文章滿滿的攻擊嗎？當您的負面新聞、負面口碑文章、負面論壇文章，被大量的收錄於 Google 搜尋引擎前幾名，甚至負評滿滿於首頁時，不論對於品牌形象和個人形象，都是莫大的傷害與公關危機。不要怕，集仕多的獨家形象 SEO 技術，最快能在 14 天之內，翻轉您的負面新聞排序，搶救您的形象管理。"
+packageBg = "/imgs/dm/seo-image-01.webp"
+description = "當您的負面新聞、負面口碑文章、負面論壇文章，被大量的收錄於 Google 搜尋引擎前幾名，甚至負評滿滿於首頁時，不論對於品牌形象和個人形象，都是莫大的傷害與公關危機。"
+descriptionSub = "不要怕！集仕多的獨家形象 SEO 技術，最快能在 14 天之內，翻轉您的負面新聞排序，搶救您的形象管理。"
 
-block1_title = "透過形象SEO管理您的評價"
+block1_title = "透過形象 SEO 管理您的評價"
 block1_strong = ""
-block1_text = "我們的目標是透過形象SEO技術，讓正面文章攻佔前面排名。不論是名人或名牌，都能透過經營SEO將特定關鍵字詞搜尋優化，提高您的正面文章自然點擊率與搜尋度。從Google搜尋統計圖我們可得知，排名順位跟點擊率成正比，排名越前點擊率越高；排名越後點擊率越低。因此，正面文章的排序名列前茅，是形象SEO的操作關鍵。"
-block1_img = "/imgs/dm/blog-traffic_01.png"
+block1_text1 = "我們的目標是透過形象 SEO 技術，讓正面文章攻佔前面排名。不論是名人或名牌，都能透過經營 SEO 將特定關鍵字詞搜尋優化，提高您的正面文章自然點擊率與搜尋度。"
+block1_text2 = "從 Google 搜尋統計圖我們可得知，排名順位跟點擊率成正比，排名越前點擊率越高；排名越後點擊率越低。"
+block1_text3 = "因此，正面文章的排序名列前茅，是形象 SEO 的操作關鍵。"
+block1_img = "/imgs/dm/seo-image-03.webp"
 
-block2_title = ""
+block2_title = "客戶資料絕對保密"
 block2_strong = ""
-block2_text = ""
-block2_img = ""
+block2_text1 = "集仕多的獨家形象 SEO 技術，能強化您的核心業務與重點產品的搜尋排名向前排序，增加正面文章的曝光與轉換，以達成正面形象 SEO 經營管理，讓您在特定搜尋詞之下，正面文章佔滿首頁為終極目標！"
+block2_text2 = "團隊皆有簽屬保密協定，需要時可以用特定代號稱呼客戶，安全保密客戶資料。"
+block2_img = "/imgs/dm/seo-image-04.webp"
 
-block3_title = ""
+block3_title = "集仕多形象 SEO 獨家技術力"
 block3_strong = ""
-block3_text = ""
-block3_img = ""
+block3_text1 = "透過集仕多獨家自動大量引用 (PBN) 和自動大量點擊 (Organic CTR) 技術，集仕多形象 SEO 解決方案最快 14 天可見有效成果，是領先全球的形象 SEO 獨家技術。"
+block3_text2 = "有別於傳統 SEO 以寫手撰文方式，需要三到六個月時間發酵且不保證成效。"
+block3_text3 = "集仕多的形象 SEO 更能快速且有效率地達到，搶救負面評價於搜尋排序前茅的公關危機。"
+block3_img = "/imgs/dm/seo-image-05.webp"
 
-block4_title = "集仕多獨家 SEO 顯微鏡健檢服務"
-block4_strong = "獨家 SEO 顯微鏡健檢服務"
-block4_list1 = "網站健檢：盤點網頁結構、速度"
-block4_list2 = "關鍵字研究：選擇適合你的關鍵字結合內容行銷，逐步提升排名"
-block4_list3 = "優化分析與策略: 提出 SEO 改善建議，偕同逐項優化，推動排名向前"
-block4_img = "/imgs/dm/dm_seo_2.png"
+form_title = "您也想翻轉負評嗎？"
+form_subtitle = "一定要嘗試我們的形象 SEO"
+form_description = "塑造好形象，也可以很簡單。"
 +++

webSite/var/www/html/collaboration/info/index.html

@@ -113,15 +113,15 @@
       </nav>
       <main style="overflow-x: hidden;">
           <section class="header pb-0" style="height: auto;">
-            <img src="/imgs/01.webp" alt="" class="header__lefttop">
+            <img src="/imgs/01.webp" alt="" class="header-lefttop">
             <div class="row align-items-center g-0">
                 <div class="col-12 text-center ">
-                    <h2 class="header__title m-0">合作夥伴</h2>
+                    <h2 class="header-title m-0">合作夥伴</h2>
                 </div>
             </div>
           </section>
           <section class="category container text-center py-5">
-            <h2 class="category__sub_h2 pt-4"></h2>
+            <h2 class="category-sub-h2 pt-4"></h2>
             <div class="container">
               <div class="row">
                 <div class="col d-flex align-items-center mt-4">
@@ -133,7 +133,7 @@
           <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__linecir left" style="right: -110%; left: unset;" src="/imgs/裝飾圓.webp" alt="">
+                    <img class="img-block-linecir left" style="right: -110%; left: unset;" src="/imgs/裝飾圓.webp" alt="">
                 </div>
             </div>
           </section>