Browse Source

contact page update

andy 3 years ago
parent
commit
35daa49e04
40 changed files with 1216 additions and 155 deletions
  1. 0 0
      hugo-universal-theme
  2. 507 154
      layouts/contact/single.html
  3. 384 0
      static/css/contact/styles-contact.css
  4. 0 1
      static/css/contact/styles-contact.css.map
  5. 325 0
      static/css/contact/styles-contact.scss
  6. BIN
      static/img/ContactUsImg/BG.png
  7. BIN
      static/img/ContactUsImg/Group 933.png
  8. BIN
      static/img/ContactUsImg/Group 934.png
  9. BIN
      static/img/ContactUsImg/Mask Group 2.png
  10. BIN
      static/img/ContactUsImg/Mask Group 4.png
  11. BIN
      static/img/ContactUsImg/QR code.png
  12. BIN
      static/img/ContactUsImg/bigdata-m.png
  13. BIN
      static/img/ContactUsImg/bigdata.png
  14. BIN
      static/img/ContactUsImg/bigdataimg.png
  15. BIN
      static/img/ContactUsImg/choozmo.png
  16. BIN
      static/img/ContactUsImg/circle.png
  17. BIN
      static/img/ContactUsImg/contact us.png
  18. BIN
      static/img/ContactUsImg/development-m.png
  19. BIN
      static/img/ContactUsImg/development.png
  20. BIN
      static/img/ContactUsImg/developmentimg.png
  21. BIN
      static/img/ContactUsImg/googleads-m.png
  22. BIN
      static/img/ContactUsImg/googleads.png
  23. BIN
      static/img/ContactUsImg/googleadsimg.png
  24. BIN
      static/img/ContactUsImg/seo-m.png
  25. BIN
      static/img/ContactUsImg/seo.png
  26. BIN
      static/img/ContactUsImg/seoimg.png
  27. BIN
      static/img/ContactUsImg/spider-m.png
  28. BIN
      static/img/ContactUsImg/spider.png
  29. BIN
      static/img/ContactUsImg/video-m.png
  30. BIN
      static/img/ContactUsImg/video.png
  31. BIN
      static/img/ContactUsImg/videoimg.png
  32. BIN
      static/img/ContactUsImg/影片製作頁.png
  33. BIN
      static/img/ContactUsImg/立即諮詢-聯絡我們 – 1.png
  34. BIN
      static/img/ContactUsImg/立即諮詢-聯絡我們 – 2.png
  35. BIN
      static/img/ContactUsImg/立即諮詢-聯絡我們 – 3.png
  36. BIN
      static/img/ContactUsImg/立即諮詢-聯絡我們 – 4.png
  37. BIN
      static/img/ContactUsImg/立即諮詢-聯絡我們 – 5.png
  38. BIN
      static/img/ContactUsImg/立即諮詢-聯絡我們.png
  39. BIN
      static/img/ContactUsImg/立即諮詢-聯絡我們_手機板.png
  40. BIN
      static/img/ContactUsImg/背景-紫.png

+ 0 - 0
hugo-universal-theme


+ 507 - 154
layouts/contact/single.html

@@ -1,62 +1,76 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1">
-    <meta http-equiv="Cache-Control" content="no-cache">
-    <title>Choozmo Marketing Cloud</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" 
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1">
+  <meta http-equiv="Cache-Control" content="no-cache">
+  <title>Choozmo Marketing Cloud</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
-    <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.11.2/css/all.css">
-    <link rel="stylesheet" href="/css/style.css">
-    <!-- Start of HubSpot Embed Code -->
-    <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script>
-    <!-- End of HubSpot Embed Code -->  
-    <style>
-      #heading-breadcrumbs {
-        background: url('https://i.imgur.com/N7tVTSh.png');
-        padding: 0 0;
-        background-size: cover;
-        background-repeat: no-repeat;
-        padding-bottom: 40px;
-        margin-bottom: 40px;
-        text-align: center;
-        position: relative;
-      }
-      #heading-breadcrumbs a {
-        font-size: 1rem;
-      }
-      #heading-breadcrumbs .breadcrumbs_title {
-        position: relative;
-      }
+  <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.11.2/css/all.css">
+  <!-- Add the slick-theme.css if you want default styling -->
+  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
+  <!-- Add the slick-theme.css if you want default styling -->
+  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
+  <link rel="stylesheet" href="/css/style.css">
+  <link rel="stylesheet" href="/css/contact/styles-contact.css">
 
-      #heading-breadcrumbs .breadcrumbs_title::after {
-        position: absolute;
-        width: 6rem;
-        height: .5rem;
-        top: 120%;
-        left: 46.5%;
-        content: "";
-        background-color: #EA5413;
-      }
-      #heading-breadcrumbs h1 {
-        color: #333333;
-        text-transform: uppercase;
-        font-size: 30px;
-        font-weight: 700;
-        letter-spacing: 0.08em;
-        margin: 20px 0;
+
+  <!-- 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>
+    #heading-breadcrumbs {
+      background: url('https://i.imgur.com/N7tVTSh.png');
+      padding: 0 0;
+      background-size: cover;
+      background-repeat: no-repeat;
+      padding-bottom: 40px;
+      /* margin-bottom: 40px; */
+      text-align: center;
+      position: relative;
     }
+
+    #heading-breadcrumbs a {
+      font-size: 1rem;
+    }
+
+    #heading-breadcrumbs .breadcrumbs_title {
+      position: relative;
+    }
+
+    #heading-breadcrumbs .breadcrumbs_title::after {
+      position: absolute;
+      width: 6rem;
+      height: .5rem;
+      top: 120%;
+      left: 46.5%;
+      content: "";
+      background-color: #EA5413;
+    }
+
+    #heading-breadcrumbs h1 {
+      color: #333333;
+      text-transform: uppercase;
+      font-size: 30px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      margin: 20px 0;
+    }
+
     #heading-breadcrumbs .container:nth-of-type(1) {
       padding: 30px 0;
     }
+
     .container.loaded {
       max-width: 800px;
       background: #fff;
       box-shadow: 0 4px 8px 0 rgb(53, 105, 128, .3), 0 6px 20px 0 rgb(165, 200, 213, .41);
       margin-bottom: 4rem;
     }
+
     .footer {
       color: #656565;
     }
@@ -104,137 +118,476 @@
     .footer .footer-socials a {
       margin-right: 5px;
     }
+
     @media (max-width: 576px) {
       .container.loaded {
         width: 90%;
       }
     }
-    </style>
+  </style>
 </head>
+
 <body>
-    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
-        <div class="container-fluid">
-            <a class="navbar-brand" href="/">
-                <img src="https://ai.choozmo.com/img/Choozmo%20cloud%20logo.png" alt="" width="180" height="48" class="d-inline-block align-text-top">
+  <nav class="navbar navbar-expand-lg navbar-light fixed-top">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="/">
+        <img src="https://ai.choozmo.com/img/Choozmo%20cloud%20logo.png" alt="" width="180" height="48"
+          class="d-inline-block align-text-top">
+      </a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse ms-auto" id="navbarNav">
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="/">Home</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
+              aria-expanded="false">
+              服務
             </a>
-          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <div class="collapse navbar-collapse ms-auto" id="navbarNav">
-            <ul class="navbar-nav">
-              <li class="nav-item">
-                <a class="nav-link active" aria-current="page" href="/">Home</a>
-              </li>
-              <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                  服務
-                </a>
-                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-                  <li><a class="dropdown-item" href="/ad-operation/dm/">廣告代操</a></li>
-                  <li><a class="dropdown-item" href="/bigdata/dm/">大數據分析</a></li>
-                  <li><a class="dropdown-item" href="/crawler/dm/">資訊爬蟲</a></li>
-                  
-                  <li><a class="dropdown-item" href="/research/dm/">企業系統研發委外</a></li>
-                  <li><a class="dropdown-item" href="/seo/dm/">SEO搜尋排名優化</a></li>
-                  <li><a class="dropdown-item" href="/video-making/dm/">影片製作服務</a></li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="/tags/vtuber/">部落格</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="/contact/service/">聯絡我們</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="/aboutus/info/">關於我們</a>
-              </li>
+            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+              <li><a class="dropdown-item" href="/ad-operation/dm/">廣告代操</a></li>
+              <li><a class="dropdown-item" href="/bigdata/dm/">大數據分析</a></li>
+              <li><a class="dropdown-item" href="/crawler/dm/">資訊爬蟲</a></li>
+
+              <li><a class="dropdown-item" href="/research/dm/">企業系統研發委外</a></li>
+              <li><a class="dropdown-item" href="/seo/dm/">SEO搜尋排名優化</a></li>
+              <li><a class="dropdown-item" href="/video-making/dm/">影片製作服務</a></li>
             </ul>
-          </div>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/tags/vtuber/">部落格</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/contact/service/">聯絡我們</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/aboutus/info/">關於我們</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+  <!-- <div id="heading-breadcrumbs" style="margin-top: 77px;">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12">
+          <h1 class="breadcrumbs_title">聯絡我們</h1>
         </div>
-    </nav>
-    <div id="heading-breadcrumbs" style="margin-top: 77px;">
-      <div class="container">
-          <div class="row">
-              <div class="col-md-12">
-                  <h1 class="breadcrumbs_title">聯絡我們</h1>
-              </div>
-          </div>
       </div>
-      <div class="container">
-          <div class="row">
-              <div class="col-md-12">
-                  <div>專業團隊X提高流量X增加營收</div>
-              </div>
-              <!-- <div class="col-md-4 blog_social">
+    </div>
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12">
+          <div>專業團隊X提高流量X增加營收</div>
+        </div>
+        <div class="col-md-4 blog_social">
                   <a href="https://www.linkedin.com/company/choozmo/"><img src="https://i.imgur.com/u2MFY3U.png" alt=""></a>
                   <a href="https://www.instagram.com/choozmo_cmm/"><img src="https://i.imgur.com/LNAJtkO.png" alt=""></a>
                   <a href="https://twitter.com/ai_cmm"><img src="https://i.imgur.com/ImYZfgI.png" alt=""></a>
                   <a href="https://www.youtube.com/channel/UCi3jHOCCmx0Zyl2ZvoHzHQg"><img src="https://i.imgur.com/A8EG8wf.png" width="32" height="32" alt=""></a>
                   <a href="https://www.facebook.com/choozmo/"><img src="https://i.imgur.com/0t496B3.png"></a>
-              </div> -->
-          </div>
+              </div>
       </div>
     </div>
-  
-      <main>
-        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
-        <div class="container loaded">
-          <div class="pageForm__p">
-            <script>
-              hbspt.forms.create({
-              region: "na1",
-              portalId: "20485755",
-              formId: "21f47afb-2238-442d-b155-e1f377dae291"
-            });
-            </script>
-          </div>
-        </div>
-       
-      </main>
-      <footer class="footer">
-        <div class="container">
-            <div class="row">
-                <div class="col-xs-12 col-sm-6">
-                    <img src="https://i.imgur.com/P1gNopa.png" alt="" width="250">
-                    <div class="footer-aigirl">Choozmo AI Spokesgirl</div>
-                    <div class="footer-follow">關注我們</div>
-                    <div class="footer-socials">
-                        <a href="https://www.linkedin.com/company/choozmo/"><img src="https://i.imgur.com/qnd9QrT.png" alt="" width="32px" height="32px"></a>
-                        <a href="https://www.facebook.com/choozmo/"><img src="https://i.imgur.com/WdCAhSo.png" alt="" width="48px" height="48px"></a>
-                        <a href="https://line.me/R/ti/p/@choozmo?from=page"><img src="https://i.imgur.com/dNZ2aGW.png" alt="" width="32px" height="32px"></a>
-                        <a href="https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg"><img src="https://i.imgur.com/zn6DUY8.png" alt="" width="32px" height="32px"></a>
-                        <a href="https://www.instagram.com/choozmo_cmm/"><img src="https://i.imgur.com/pdJPY7m.png" alt="" width="48px" height="48px"></a>
-                        <a href="https://twitter.com/ai_cmm"><img src="https://i.imgur.com/qGBzq4J.png" alt="" width="32px" height="32px"></a>
-                    </div>
-                </div>
-                <div class="col-xs-12 col-sm-6">
-                    <div class="footer-contacts" style="margin-top: 2rem;">
-                        <h5>CONTACT</h5>
-                        <div>
-                            集仕多股份有限公司<br>新竹縣竹北市復興二路229號9樓之9<br>聯絡電話:036670804<br>聯絡信箱:SERVICE@CHOOZMO.COM
-                        </div>
-                    </div>
+  </div> -->
+
+  <div class="Contact_Us" style="overflow: hidden;">
+    <section class="service_info">
+      <div class="contact_us_title pt-3">
+        <img class="img-fluid contact_Us_Img" src="/img/ContactUsImg/contact us.png" alt="">
+        <div class="text-title">
+          <h1>聯絡我們</h1>
+          <hr>
+          <p>服務項目介紹</p>
+        </div>
+      </div>
+      <div class="service_slider_Box d-none d-md-block">
+        <div class="service_slider">
+          <div class="row px-0 mx-0">
+            <div class="col-md-5 px-0">
+              <div class="content-service">
+                <h2>SEO搜尋排名優化服務</h2>
+                <ul>
+                  <li>網站健檢: 盤點網頁結構、速度</li>
+                  <li>網站健檢: 盤點網頁結構、速度</li>
+                  <li>關鍵字研究: 選擇適合你的關鍵字結合內容行銷,逐步提升排名</li>
+                </ul>
+                <button class="LearnMore">了解詳情</button>
+              </div>
+
+            </div>
+            <div class="col-md-1 px-0">
+
+            </div>
+            <div class="col-md-6 px-0">
+              <div class="service_Img_Box">
+                <img class="service_Img1 img-fluid" src="/img/ContactUsImg/seo.png">
+
+                <img class="service_Img_seo" src="/img/ContactUsImg/seoimg.png" alt="">
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="service_slider">
+          <div class="row px-0 mx-0">
+            <div class="col-md-5 px-0">
+              <div class="content-service">
+                <h2>影音製作服務</h2>
+                <ul>
+                  <li>只要提供素材,將你的故事變成影片</li>
+                  <li>行銷形象影片,銷售更容易,提高成交率</li>
+                  <li>客製化量身打造,用質感為品牌加分,用影像為企業發聲</li>
+                </ul>
+                <button class="LearnMore">了解詳情</button>
+              </div>
+
+            </div>
+            <div class="col-md-1 px-0">
+
+            </div>
+            <div class="col-md-6 px-0">
+              <div class="service_Img_Box">
+                <img class="service_Img2 img-fluid" src="/img/ContactUsImg/video.png">
+
+                <img class="service_Img_video" src="/img/ContactUsImg/videoimg.png" alt="">
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="service_slider">
+          <div class="row px-0 mx-0">
+            <div class="col-md-5 px-0">
+              <div class="content-service">
+                <h2>企業系統研發委外方案</h2>
+                <ul>
+                  <li>企業研發後盾快速導入AI人工智慧技術</li>
+                  <li>降低資訊研發、維護成本</li>
+                  <li>完善的軟、硬體系統規劃</li>
+                </ul>
+                <button class="LearnMore">了解詳情</button>
+              </div>
+
+            </div>
+            <div class="col-md-1 px-0">
+
+            </div>
+            <div class="col-md-6">
+              <div class="service_Img_Box">
+                <img class="service_Img3 img-fluid" src="/img/ContactUsImg/development.png">
+
+                <img class="service_Img_developmentimg" src="/img/ContactUsImg/developmentimg.png" alt="">
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="service_slider">
+          <div class="row px-0 mx-0">
+            <div class="col-md-5 px-0">
+              <div class="content-service">
+                <h2>資訊爬蟲</h2>
+                <ul>
+                  <li>自動化抓取各類產業的資料</li>
+                  <li>提供資料庫數據串流接上開發端後台做應用</li>
+                  <li>開發與優化搜尋爬蟲程式</li>
+                </ul>
+                <button class="LearnMore">了解詳情</button>
+              </div>
+
+            </div>
+            <div class="col-md-1 px-0">
+
+            </div>
+            <div class="col-md-6 px-0">
+              <div class="service_Img_Box">
+                <img class="service_Img4 img-fluid" src="/img/ContactUsImg/spider.png">
+
+                <img class="service_Img_spiderimg" src="/img/ContactUsImg/developmentimg.png" alt="">
+              </div>
+            </div>
+          </div>
+        </div>
+      
+      
+        <div class="service_slider">
+          <div class="row px-0 mx-0">
+            <div class="col-md-5 px-0">
+              <div class="content-service">
+                <h2>Big Data 大數據蒐集與分析</h2>
+                <ul>
+                  <li>數據專案經驗豐富,與許多大企業合作</li>
+                  <li>Deep Learning商品趨勢預測,找出潛力商品</li>
+                  <li>Text Mining文字探勘,比對結果預測績效</li>
+                </ul>
+                <button class="LearnMore">了解詳情</button>
+              </div>
+
+            </div>
+            <div class="col-md-1 px-0">
+
+            </div>
+            <div class="col-md-6 px-0">
+              <div class="service_Img_Box">
+                <img class="service_Img5 img-fluid" src="/img/ContactUsImg/bigdata.png">
+
+                <img class="service_Img_bigdataimg" src="/img/ContactUsImg/bigdataimg.png" alt="">
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="service_slider">
+          <div class="row px-0 mx-0">
+            <div class="col-md-5 px-0">
+              <div class="content-service">
+                <h2>廣告代操 智慧投放Google廣告</h2>
+                <ul>
+                  <li>搭配不同廣告策略,達到成效最佳化</li>
+                  <li>吸引新訪客光顧網站、 提高線上銷售量、提升客戶回訪率</li>
+                  <li>改善建議,協同逐項優化,推動排名向前</li>
+                </ul>
+                <button class="LearnMore">了解詳情</button>
+              </div>
+
+            </div>
+            <div class="col-md-1 px-0">
+
+            </div>
+            <div class="col-md-6 px-0">
+              <div class="service_Img_Box">
+                <img class="service_Img6 img-fluid" src="/img/ContactUsImg/googleads.png">
+
+                <img class="service_Img_googleads" src="/img/ContactUsImg/googleadsimg.png" alt="">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="service_slider_Box-m d-block d-md-none">
+        <div class="service_slider-m">
+          <img class="img-fluid" src="/img/ContactUsImg/seo-m.png" alt="">
+          <div class="content-service">
+            <h2>SEO搜尋排名優化服務</h2>
+            <ul>
+              <li>網站健檢: 盤點網頁結構、速度</li>
+              <li>網站健檢: 盤點網頁結構、速度</li>
+              <li>關鍵字研究: 選擇適合你的關鍵字結合內容行銷,逐步提升排名</li>
+            </ul>
+            <div class="text-center">
+              <a style="text-decoration: none;" href="/seo/dm">
+                <button class="LearnMore">了解詳情</button>
+               </a>
+            </div>
+          </div>
+        </div>
+        <div class="service_slider-m">
+          <img class="img-fluid" src="/img/ContactUsImg/video-m.png" alt="">
+          <div class="content-service">
+            <h2>影音製作服務</h2>
+                <ul>
+                  <li>只要提供素材,將你的故事變成影片</li>
+                  <li>行銷形象影片,銷售更容易,提高成交率</li>
+                  <li>客製化量身打造,用質感為品牌加分,用影像為企業發聲</li>
+                </ul>
+            <div class="text-center">
+              <a style="text-decoration: none;" href="/video-making/dm">
+                <button class="LearnMore">了解詳情</button>
+               </a>
+            </div>
+          </div>
+        </div>
+        <div class="service_slider-m">
+          <img class="img-fluid" src="/img/ContactUsImg/development-m.png" alt="">
+          <div class="content-service">
+            <h2>企業系統研發委外方案</h2>
+                <ul>
+                  <li>企業研發後盾快速導入AI人工智慧技術</li>
+                  <li>降低資訊研發、維護成本</li>
+                  <li>完善的軟、硬體系統規劃</li>
+                </ul>
+            <div class="text-center">
+              <a style="text-decoration: none;" href="/research/dm">
+                <button class="LearnMore">了解詳情</button>
+               </a>
+            </div>
+          </div>
+        </div>
+        <div class="service_slider-m">
+          <img class="img-fluid" src="/img/ContactUsImg/spider-m.png" alt="">
+          <div class="content-service">
+            <h2>資訊爬蟲</h2>
+            <ul>
+              <li>自動化抓取各類產業的資料</li>
+              <li>提供資料庫數據串流接上開發端後台做應用</li>
+              <li>開發與優化搜尋爬蟲程式</li>
+            </ul>
+            <div class="text-center">
+              <a style="text-decoration: none;" href="/crawler/dm">
+                <button class="LearnMore">了解詳情</button>
+               </a>
+            </div>
+          </div>
+        </div>
+        <div class="service_slider-m">
+          <img class="img-fluid" src="/img/ContactUsImg/bigdata-m.png" alt="">
+          <div class="content-service">
+            <h2>Big Data 大數據蒐集與分析</h2>
+            <ul>
+              <li>數據專案經驗豐富,與許多大企業合作</li>
+              <li>Deep Learning商品趨勢預測,找出潛力商品</li>
+              <li>Text Mining文字探勘,比對結果預測績效</li>
+            </ul>
+            <div class="text-center">
+              <a style="text-decoration: none;" href="/bigdata/dm">
+                <button class="LearnMore">了解詳情</button>
+               </a>
+            </div>
+          </div>
+        </div>
+        <div class="service_slider-m">
+          <img class="img-fluid" src="/img/ContactUsImg/googleads-m.png" alt="">
+          <div class="content-service">
+            <h2>廣告代操 智慧投放Google廣告</h2>
+                <ul>
+                  <li>搭配不同廣告策略,達到成效最佳化</li>
+                  <li>吸引新訪客光顧網站、 提高線上銷售量、提升客戶回訪率</li>
+                  <li>改善建議,協同逐項優化,推動排名向前</li>
+                </ul>
+            <div class="text-center">
+              <a style="text-decoration: none;" href="/ad-operation/dm">
+                <button class="LearnMore">了解詳情</button>
+               </a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <img class="img-fluid pt-3" src="/img/ContactUsImg/Mask Group 4.png" alt="">
+      <img class="circle-orange d-none d-md-block" style="position: absolute;" src="/img/ContactUsImg/circle.png" alt="">
+    </section>
+   
+    <div id="contact_box">
+      <section class="Contact_Information">
+        <div class="row px-0 mx-0">
+          <div class="col-md-6">
+            <div class="Contact_Information_title pt-3">
+              <img class="choozmo" src="/img/ContactUsImg/choozmo.png" alt="">
+              <div class="text-title">
+                <h1>LINE</h1>
+                <hr>
+                <p>專業團隊X提高流量X增加營收</p>
+              </div>
+              <img class="qrcode" src="/img/ContactUsImg/QR code.png" alt="">
+              <div class="contact-text">
+                <p class="fw-bold text-dark">掃描行動條碼即可將官方帳號加入好友</p>
+                <p style="font-size: 14px;">將有專人為您服務</p>
+              </div>
+
+            </div>
+          </div>
+          <div class="col-md-6">
+            <main>
+              <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
+              <div class="container loaded">
+                <div class="pageForm__p">
+                  <script>
+                    hbspt.forms.create({
+                      region: "na1",
+                      portalId: "20485755",
+                      formId: "21f47afb-2238-442d-b155-e1f377dae291"
+                    });
+                  </script>
                 </div>
+              </div>
+
+            </main>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <img class="circle" src="/img/ContactUsImg/背景-紫.png" alt="">
+
+  </div>
+
+  <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>
-      </footer>
-      <script type="application/javascript">
-        var doNotTrack = false;
-        if (!doNotTrack) {
-          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-          })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-          ga('create', 'UA-153100602-5', 'auto');
-          
-          ga('send', 'pageview');
-        }
-      </script>
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" 
-    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" 
+      </div>
+    </div>
+  </footer>
+  <script type="application/javascript">
+    var doNotTrack = false;
+    if (!doNotTrack) {
+      (function (i, s, o, g, r, a, m) {
+        i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
+          (i[r].q = i[r].q || []).push(arguments)
+        }, i[r].l = 1 * new Date(); a = s.createElement(o),
+          m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
+      })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+      ga('create', 'UA-153100602-5', 'auto');
+
+      ga('send', 'pageview');
+    }
+  </script>
+
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
+    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
     crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" 
-    integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
+    integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
     crossorigin="anonymous"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+    <script>
+      $('.service_slider_Box').slick({
+      slidesToShow: 1, //預設 1 幻燈片顯示幾張
+      slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
+      arrows: true, // 預設 true 左右箭頭是否顯示
+      dots:true,
+      prevArrow: '<button type="button" class="slick-prev"><img src="/img/ContactUsImg/Group 934.png" alt="" width="60" height="60"></button>',
+      nextArrow: '<button type="button" class="slick-next"><img src="/img/ContactUsImg/Group 933.png" alt="" width="60" height="60"></button>'
+      });
+
+      $('.service_slider_Box-m').slick({
+      slidesToShow: 1, //預設 1 幻燈片顯示幾張
+      slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
+      arrows: true, // 預設 true 左右箭頭是否顯示
+      dots:true,
+      prevArrow: '<button type="button" class="slick-prev"><img src="/img/ContactUsImg/Group 934.png" alt="" width="50" height="50"></button>',
+      nextArrow: '<button type="button" class="slick-next"><img src="/img/ContactUsImg/Group 933.png" alt="" width="50" height="50"></button>'
+      });
+      
+
+    </script>
 </body>
-</html>
+
+</html>

+ 384 - 0
static/css/contact/styles-contact.css

@@ -11,4 +11,388 @@
   position: relative;
   padding-bottom: 3rem;
 }
+
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.Contact_Us {
+  position: relative;
+}
+
+.Contact_Us .banner {
+  width: 100%;
+  height: 300px;
+  position: relative;
+  z-index: -1;
+  margin-top: -19vw;
+}
+
+.Contact_Us .banner h2 {
+  position: absolute;
+  color: #fff;
+  top: 7vw;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  font-size: 3vw;
+}
+
+.Contact_Us .slick-next::before {
+  content: "";
+}
+
+.Contact_Us .slick-prev::before {
+  content: "";
+}
+
+.Contact_Us .slick-dots li {
+  border-radius: 50%;
+}
+
+.Contact_Us .slick-dots li button::before {
+  font-size: 10px;
+}
+
+.Contact_Us .slick-dots li.slick-active button:before {
+  color: #EA5413;
+  opacity: 1;
+  border-radius: 50%;
+  border: 1px solid #EA5413;
+}
+
+.Contact_Us .text-title {
+  margin-top: -90px;
+}
+
+@media screen and (max-width: 576px) {
+  .Contact_Us .text-title {
+    margin-top: -45px;
+  }
+}
+
+.Contact_Us h1 {
+  font-weight: 600;
+  font-size: 32px;
+  text-align: center;
+}
+
+.Contact_Us hr {
+  width: 5vw;
+  margin: 0 auto;
+  height: 6px;
+  opacity: 1 !important;
+  background: #000;
+}
+
+@media screen and (max-width: 576px) {
+  .Contact_Us hr {
+    width: 15vw;
+  }
+}
+
+.Contact_Us p {
+  margin-top: 15px;
+  text-align: center;
+  color: #888888;
+}
+
+.Contact_Us .contact_us_title {
+  width: 80vw;
+  margin: 0 auto;
+  text-align: center;
+}
+
+@media screen and (max-width: 576px) {
+  .Contact_Us .contact_us_title {
+    width: 100vw;
+  }
+}
+
+.Contact_Us .service_info {
+  padding-top: 100px;
+  background-color: #FFEBE2;
+  position: relative;
+}
+
+.Contact_Us .service_info .circle-orange {
+  bottom: 10px;
+  right: 80px;
+  width: 180px;
+}
+
+.Contact_Us .service_info .content-service {
+  margin-top: 50px;
+}
+
+.Contact_Us .service_info .content-service h2 {
+  font-weight: 600;
+  color: #EA5413;
+  font-size: 28px;
+}
+
+.Contact_Us .service_info .content-service ul {
+  margin-top: 15px;
+  color: #888888;
+  padding-left: 1rem;
+}
+
+.Contact_Us .service_info .LearnMore {
+  margin-top: 50px;
+  padding: 5px 15px;
+  border: 1px solid #EA5413;
+  border-radius: 30px;
+  background: #EA5413;
+  color: #fff;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+.Contact_Us .service_info .LearnMore:hover {
+  color: #EA5413;
+  background: #fff;
+}
+
+@media screen and (max-width: 576px) {
+  .Contact_Us .service_info .LearnMore {
+    margin-top: 15px;
+  }
+}
+
+.Contact_Us .service_info .service_slider_Box-m {
+  width: 80vw;
+  margin: 0 auto;
+}
+
+.Contact_Us .service_info .service_slider_Box-m .slick-dots {
+  bottom: 270px;
+  left: 50px;
+}
+
+.Contact_Us .service_info .service_slider_Box-m .slick-prev {
+  position: absolute;
+  left: -20px;
+  z-index: 100;
+  top: 130px;
+}
+
+.Contact_Us .service_info .service_slider_Box-m .slick-next {
+  position: absolute;
+  right: -10px;
+  z-index: 100;
+  top: 130px;
+}
+
+.Contact_Us .service_info .service_slider_Box {
+  width: 85vw;
+  margin: 0 auto;
+  height: 400px;
+}
+
+.Contact_Us .service_info .service_slider_Box .slick-dots {
+  bottom: 40px;
+  width: 20%;
+  left: 90px !important;
+}
+
+.Contact_Us .service_info .service_slider_Box .service_slider {
+  height: 450px;
+  position: relative;
+}
+
+.Contact_Us .service_info .service_slider_Box .slick-prev {
+  position: absolute;
+  left: 5px;
+  top: 350px;
+  z-index: 100;
+  width: 60px;
+  height: 60px;
+}
+
+.Contact_Us .service_info .service_slider_Box .slick-next {
+  position: absolute;
+  left: 350px;
+  top: 350px;
+  z-index: 100;
+  width: 60px;
+  height: 60px;
+}
+
+.Contact_Us .service_info .service_slider_Box .service_Img_Box {
+  position: relative;
+  margin-top: 50px;
+}
+
+.Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_seo {
+  width: 280px;
+  position: absolute;
+  left: -180px;
+  bottom: 180px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_video {
+  position: absolute;
+  width: 360px;
+  left: -250px;
+  bottom: 50px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_developmentimg {
+  position: absolute;
+  bottom: 100px;
+  left: -180px;
+  width: 280px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_spiderimg {
+  position: absolute;
+  bottom: 80px;
+  left: -180px;
+  width: 280px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_bigdataimg {
+  position: absolute;
+  bottom: -10px;
+  width: 400px;
+  left: -200px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img_googleads {
+  position: absolute;
+  bottom: 10px;
+  left: -150px;
+  width: 280px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img6 {
+  position: relative;
+  bottom: 50px;
+}
+
+.Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img1 {
+  position: relative;
+  left: 15px;
+  bottom: 120px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img2 {
+  position: relative;
+  bottom: 50px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img3 {
+  position: relative;
+  left: 15px;
+  bottom: 100px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.Contact_Us .service_info .service_slider_Box .service_Img_Box .service_Img4 {
+  position: relative;
+  bottom: 80px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.Contact_Us #contact_box {
+  overflow: hidden;
+  background: #fff;
+}
+
+.Contact_Us .Contact_Information {
+  width: 90vw;
+  margin: 0 auto;
+  position: relative;
+  padding-bottom: 130px;
+}
+
+@media screen and (max-width: 576px) {
+  .Contact_Us .Contact_Information {
+    width: 100vw;
+  }
+}
+
+.Contact_Us .Contact_Information .Contact_Information_title {
+  text-align: center;
+}
+
+.Contact_Us .Contact_Information .Contact_Information_title .choozmo {
+  width: 640px;
+}
+
+@media screen and (max-width: 576px) {
+  .Contact_Us .Contact_Information .Contact_Information_title .choozmo {
+    width: 90vw;
+  }
+}
+
+.Contact_Us .Contact_Information .Contact_Information_title .text-title {
+  margin-top: -100px;
+}
+
+@media screen and (max-width: 576px) {
+  .Contact_Us .Contact_Information .Contact_Information_title .text-title {
+    margin-top: -60px;
+  }
+}
+
+.Contact_Us .Contact_Information .Contact_Information_title .qrcode {
+  width: 350px;
+}
+
+.Contact_Us .Contact_Information .contact-text {
+  margin-top: -50px;
+}
+
+.Contact_Us .circle {
+  position: absolute;
+  bottom: -300px;
+  left: -350px;
+}
+
+@-webkit-keyframes drift {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+@keyframes drift {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
 /*# sourceMappingURL=styles-contact.css.map */

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


+ 325 - 0
static/css/contact/styles-contact.scss

@@ -9,4 +9,329 @@
   position: relative;
   padding-bottom: 3rem;
 
+}
+
+
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+
+
+.Contact_Us{
+  position: relative;
+
+
+.banner{
+  width:100%;
+  height: 300px;
+  position: relative;
+  z-index: -1;
+  margin-top: -19vw;
+  h2{
+    position: absolute;
+    color:#fff;
+    top:7vw;
+    left: 50%;
+    transform:translate(-50%,-50%);
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    text-shadow: 0px 1px 2px rgba(black,0.1);
+    font-size: 3vw;
+  }
+
+}
+
+  
+  .slick-next::before{
+      content: "";
+  }
+  .slick-prev::before{
+      content: "";
+  }
+ 
+  
+  .slick-dots li{
+      border-radius: 50%;
+     
+  }
+  .slick-dots li button::before{
+  font-size: 10px;
+  
+  }
+  .slick-dots li.slick-active button:before{
+      color:#EA5413;
+      opacity: 1;
+      border-radius: 50%;
+  
+      border:1px solid #EA5413
+  }
+  .text-title{
+      margin-top: -90px;
+      @media screen and(max-width:576px) {
+        margin-top: -45px;
+      }
+      
+  }
+  h1{
+      font-weight: 600;
+      font-size: 32px;
+      text-align: center;
+  }
+
+  hr{
+      width: 5vw;
+      margin: 0 auto;
+      height: 6px;
+      opacity: 1 !important;
+      background: #000;
+      @media screen and(max-width:576px) {
+        width: 15vw;
+      }
+  }
+  p{
+      margin-top: 15px;
+      text-align: center;
+      color:#888888;
+  }
+  .contact_us_title{
+     width: 80vw;
+     margin: 0 auto; 
+     text-align: center;
+ 
+    @media screen and(max-width:576px) {
+      width: 100vw;
+    }
+  }
+  .service_info{
+      // height: 100vh;
+      // background: #FFEBE2;
+      padding-top: 100px;
+      background-color: #FFEBE2;
+      // padding-bottom: 130px;
+      position: relative;
+      .circle-orange{
+        bottom: 10px;
+        right:80px;
+        width: 180px;
+      }
+      .content-service{
+        margin-top: 50px;
+        h2{
+            font-weight: 600;
+            color:#EA5413;
+            font-size: 28px;
+        }
+
+        ul{
+            margin-top: 15px;
+            color:#888888;
+           padding-left: 1rem;
+        }
+    } 
+      .LearnMore{
+          margin-top: 50px;
+          padding: 5px 15px;
+          border:1px solid #EA5413;
+          border-radius: 30px;
+          background: #EA5413;
+          color: #fff;
+          transition: 0.3s;
+          &:hover{
+              color:#EA5413;
+              background: #fff;
+          }
+          @media screen and(max-width:576px) {
+            margin-top: 15px;
+          }
+      }
+      .service_slider_Box-m{
+        width: 80vw;
+        margin: 0 auto;
+        .slick-dots{
+          bottom:270px;
+          left:50px;
+        
+        }
+        .slick-prev{
+          position: absolute;
+          left:-20px;
+          z-index: 100;
+         top:130px;
+        }
+        .slick-next{
+          position: absolute;
+          right:-10px;
+          z-index: 100;
+          top:130px;
+        }
+      }
+      .service_slider_Box{
+          width: 85vw;
+          margin: 0 auto;
+          height: 400px;
+        //  padding-bottom:150px;
+        .slick-dots{
+          bottom:40px;
+          width: 20%;
+          left:90px !important;
+        }
+          .service_slider{
+              height: 450px;
+              position: relative;
+             
+          }
+         
+          .slick-prev{
+          position: absolute;
+          left: 5px;
+          top:350px;
+          z-index: 100;
+          width: 60px;
+          height: 60px;
+          }
+        .slick-next{
+          position: absolute;
+          left: 350px;
+          top:350px;
+          z-index: 100;
+          width: 60px;
+          height: 60px;
+        }
+          .service_Img_Box{
+              position: relative;
+              margin-top: 50px;
+            .service_Img_seo{
+              width: 280px;
+              position: absolute;
+              left:-180px;
+              bottom:180px;
+              object-fit: cover;   
+
+            }
+            .service_Img_video{
+              position: absolute;
+              width: 360px;
+              left:-250px;
+              bottom:50px;
+              object-fit: cover;   
+            }
+            .service_Img_developmentimg{
+              position: absolute;
+              bottom:100px;
+              left:-180px;
+              width: 280px;
+              object-fit: cover;
+            }
+            .service_Img_spiderimg{
+              position: absolute;
+              bottom:80px;
+              left:-180px;
+              width: 280px;
+              object-fit: cover;
+            }
+
+            .service_Img_bigdataimg{
+              position: absolute;
+              bottom:-10px;
+              width: 400px;
+              left:-200px;
+              object-fit: cover;
+            }
+            .service_Img_googleads{
+              position: absolute;
+              bottom:10px;
+              left:-150px;
+              width: 280px;
+              object-fit: cover;
+
+            }
+            .service_Img6{
+              position: relative;
+              bottom:50px;
+            }
+            .service_Img1 {
+              position: relative;
+              left:15px;
+              bottom:120px;
+              object-fit: cover;   
+            }
+          
+
+            .service_Img2 {
+              position: relative;
+              
+              bottom:50px;
+              object-fit: cover;   
+            }
+            .service_Img3 {
+              position: relative;
+              left:15px;
+              bottom:100px;
+              object-fit: cover;   
+            }
+            .service_Img4 {
+              position: relative;
+              bottom:80px;
+              object-fit: cover;   
+            }
+           
+          }
+          
+      }
+  }
+  #contact_box{
+      overflow: hidden; 
+      background: #fff; 
+      // margin-top: -10vw;
+  }
+  .Contact_Information{
+      width: 90vw;
+      margin: 0 auto;
+      position: relative;
+      padding-bottom: 130px;
+      @media screen and(max-width:576px) {
+        width: 100vw;
+      }
+      .Contact_Information_title{
+          text-align: center;
+          .choozmo{
+             width: 640px;
+             @media screen and(max-width:576px) {
+              width: 90vw;
+            }
+          }
+          .text-title{
+              margin-top: -100px;
+              @media screen and(max-width:576px) {
+                margin-top: -60px;
+              }
+          }
+          .qrcode{
+              width: 350px;
+          }
+      }
+      .contact-text{
+          margin-top: -50px;
+      }
+      
+  }
+  
+  .circle{
+    position: absolute;
+    bottom: -300px;
+    left: -350px;
+}
+  @keyframes drift {
+      0%{
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  
+
 }

BIN
static/img/ContactUsImg/BG.png


BIN
static/img/ContactUsImg/Group 933.png


BIN
static/img/ContactUsImg/Group 934.png


BIN
static/img/ContactUsImg/Mask Group 2.png


BIN
static/img/ContactUsImg/Mask Group 4.png


BIN
static/img/ContactUsImg/QR code.png


BIN
static/img/ContactUsImg/bigdata-m.png


BIN
static/img/ContactUsImg/bigdata.png


BIN
static/img/ContactUsImg/bigdataimg.png


BIN
static/img/ContactUsImg/choozmo.png


BIN
static/img/ContactUsImg/circle.png


BIN
static/img/ContactUsImg/contact us.png


BIN
static/img/ContactUsImg/development-m.png


BIN
static/img/ContactUsImg/development.png


BIN
static/img/ContactUsImg/developmentimg.png


BIN
static/img/ContactUsImg/googleads-m.png


BIN
static/img/ContactUsImg/googleads.png


BIN
static/img/ContactUsImg/googleadsimg.png


BIN
static/img/ContactUsImg/seo-m.png


BIN
static/img/ContactUsImg/seo.png


BIN
static/img/ContactUsImg/seoimg.png


BIN
static/img/ContactUsImg/spider-m.png


BIN
static/img/ContactUsImg/spider.png


BIN
static/img/ContactUsImg/video-m.png


BIN
static/img/ContactUsImg/video.png


BIN
static/img/ContactUsImg/videoimg.png


BIN
static/img/ContactUsImg/影片製作頁.png


BIN
static/img/ContactUsImg/立即諮詢-聯絡我們 – 1.png


BIN
static/img/ContactUsImg/立即諮詢-聯絡我們 – 2.png


BIN
static/img/ContactUsImg/立即諮詢-聯絡我們 – 3.png


BIN
static/img/ContactUsImg/立即諮詢-聯絡我們 – 4.png


BIN
static/img/ContactUsImg/立即諮詢-聯絡我們 – 5.png


BIN
static/img/ContactUsImg/立即諮詢-聯絡我們.png


BIN
static/img/ContactUsImg/立即諮詢-聯絡我們_手機板.png


BIN
static/img/ContactUsImg/背景-紫.png


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