update

layouts/index.html

@@ -16,8 +16,9 @@
       {{ partial "components/carousel.html" . }}
       {{ partial "components/main.html" . }}
       {{ partial "components/serve.html" . }}
+      {{ partial "components/progress.html" . }}
       {{ partial "LP_components/blogs_tab.html" . }}
-      {{ partial "LP_components/Footer.html" . }}
+      {{ partial "footer.html" . }}
     </div>
 
     <!-- {{ partial "nav.html" . }}
@@ -44,6 +45,7 @@
   <!-- /#all -->
 
   {{ partial "components/scripts.html" . }}
+
   <script>
     function tabLP() {
       if (('.m-tabs').length) {
@@ -100,14 +102,15 @@
       }, 1000);
     })
 
-    var swiper = new Swiper(".mySwiper", {
+    var swiper = new Swiper(".carousel", {
       pagination: {
         el: ".swiper-pagination",
         clickable: true,
       },
     });
   </script>
-
+  <!-- 進度條 -->
+  <script src="../js/progress.js"></script>
 </body>
 
 </html>

layouts/partials/LP_components/blogs_tab.html

@@ -1,4 +1,4 @@
-<section class="sec-blogtab">
+<section class="sec-blogtab" id="blog">
     <div class="container text-center">
         <h2 class="blogtab-title">BLOG</h2>
         <div class="row">

layouts/partials/components/carousel.html

@@ -1,4 +1,4 @@
-<div class="swiper mySwiper">
+<div class="swiper carousel">
   <div class="swiper-wrapper">
     <div class="swiper-slide">
       <a href="">

layouts/partials/components/main.html

@@ -1,5 +1,5 @@
 <div class="mt-5" id="main">
-  <div class="content">
+  <div class="content" id="info">
     <section>
       <img src="https://i.imgur.com/P1gNopa.png" alt="" class="logo mb-3">
       <h4>
@@ -25,10 +25,81 @@
     </div>
   </div>
 
-  <div class="journey-content">
+  <div class="journey-content" id="journey">
     <div class="container">
-      <h3>ChoozMo Digital Customer Journey 數位顧客旅程</h3>
-      <div class="row">
+      <h3 class="d-none d-md-block">ChoozMo Digital Customer Journey 數位顧客旅程</h3>
+      <h3 class="d-block d-md-none">ChoozMo Digital Customer Journey <br> 數位顧客旅程</h3>
+      <!-- 手機版 -->
+      <div class="row d-md-none">
+        <div class="col-12 px-5 px-sm-4 title">
+          <h4 class="mb-4">
+            awareness
+          </h4>
+          <!-- <img src="/imgs/home/icon-02.png" alt=""> -->
+          <!-- <span class="line"></span> -->
+          <section class="list">
+            <h5>品牌與產品曝光：</h5>
+            <p>各式 Google 廣告 GDN、搜尋、地標、購物廣告、YT、FB 廣告</p>
+            <strong>
+              適合廣告投放
+            </strong>
+          </section>
+          <span class="position-relative">
+            <span class="line"></span>
+            <img src="/imgs/home/icon-02.png" alt="">
+          </span>
+        </div>
+        <div class="col-12 px-5 px-sm-4 title">
+          <h4 class="mb-4">
+            Search
+          </h4>
+          <section class="list">
+            <h5>自然搜尋：</h5>
+            <p>消費者知道產品或品牌後，做消費功課與各家產品比較</p>
+            <strong>
+              適合 SEO 優化
+            </strong>
+          </section>
+          <span class="position-relative">
+            <span class="line"></span>
+            <img src="/imgs/home/icon-02.png" alt="">
+          </span>
+        </div>
+        <div class="col-12 px-5 px-sm-4 title">
+          <h4 class="mb-4">
+            Reputation
+          </h4>
+          <section class="list">
+            <h5>口碑參考：</h5>
+            <p>
+              消費者查詢品牌或產品的使用心得與評價
+            </p>
+            <strong>
+              適合新聞和口碑寫手
+            </strong>
+          </section>
+          <span class="position-relative">
+            <span class="line"></span>
+            <img src="/imgs/home/icon-02.png" alt="">
+          </span>
+        </div>
+        <div class="col-12 px-5 px-sm-4 title pb-5">
+          <h4>
+            Conversion
+          </h4>
+          <section class="list">
+            <h5>口碑參考：</h5>
+            <p>
+              消費者查詢品牌或產品的使用心得與評價
+            </p>
+            <strong>
+              適合新聞和口碑寫手
+            </strong>
+          </section>
+        </div>
+      </div>
+      <!-- 電腦版 -->
+      <div class="row d-none d-md-flex">
         <div class="col-3 title">
           <h4>
             awareness
@@ -99,9 +170,9 @@
     </div>
   </div>
 
-  <div class="container team-content">
+  <div class="container team-content" id="team">
     <div class="row justify-content-center align-items-center">
-      <div class="col-12 col-md-5">
+      <div class="col-12 col-md-5 px-4 px-md-0">
         <strong>Choozmo Team</strong>
         <h4>團隊獲得專業創投千萬元投資， <br>
           技術能力獲得工業局 AI 服務能量登錄。</h4>

layouts/partials/components/progress.html

@@ -0,0 +1,28 @@
+<!-- <div class="progress">
+    <div class="progress-name">
+        <a id="btn_A">A</a>
+        <a id="btn_B">B</a>
+        <a id="btn_C">C</a>
+        <a id="btn_D">D</a>
+        <a id="btn_E">E</a>
+        <a id="btn_F">F</a>
+    </div>
+    <div class="progress-bar">
+        <div class="bar-line">
+            <div class="bar-circle"></div>
+        </div>
+    </div>
+</div> -->
+
+<div class="progress-item">
+    <div class="cont">
+        <progress id="progress-bar" min="1" max="100" value="0"></progress>
+        <span class="info border-change"></span>
+        <span class="journey"></span>
+        <span class="team"></span>
+        <span class="ai-ad"></span>
+        <span class="seo"></span>
+        <span class="ai-video"></span>
+        <span class="blog"></span>
+    </div>
+</div>

layouts/partials/components/serve.html

@@ -1,5 +1,5 @@
 <!-- AI 廣告 -->
-<div class="container-fluid ad-content position-relative">
+<div class="container-fluid ad-content position-relative" id="ai-ad">
   <div class="tag-item" style="top: -50px; right: -5vw;">
     <img src="imgs/home/裝飾-01.png" alt="">
     <h5 style="right: 40px;">AI 廣告</h5>
@@ -8,9 +8,11 @@
     <h4>
       AI 智能 廣告投放<br>
       <strong>精密規劃您的廣告預算 | 用低於業界金額 打出最好成效</strong>
+      <!-- <strong class="d-none d-md-block">精密規劃您的廣告預算 | 用低於業界金額 打出最好成效</strong> -->
+      <!-- <strong class="d-block d-md-none">精密規劃您的廣告預算 <br> 用低於業界金額 打出最好成效</strong> -->
     </h4>
   </section>
-  <div class="row justify-content-center align-items-center px-5 px-lg-0">
+  <div class="row justify-content-center align-items-center px-4 px-lg-0">
     <div class="col-12 col-lg-3">
       <img src="imgs/home/首頁-04.png" alt="" class="d-lg-block d-none">
       <img src="imgs/home/首頁-04-mb.png" alt="" class="d-lg-none d-block mx-auto">
@@ -50,7 +52,7 @@
       <img src="imgs/home/裝飾-03.png" alt="">
       <span class="img-text">Youtube廣告 <br> 影片有效觀看</span>
     </div>
-    <div class="col-12 col-sm-8 col-lg-4 px-5 px-sm-3 px-lg-0">
+    <div class="col-12 col-sm-8 col-lg-4 px-4 px-sm-3 px-lg-0">
       <h5>1 個觀看數只要 0.4 元 <br>
         <strong>
           透過 Google 廣告投放，增漲 YT 影片的有效觀看數，可自訂目標觀看受眾群，結案提供廣告成效報告與報表。<br>
@@ -68,7 +70,7 @@
 </div>
 
 <!-- SEO -->
-<div class="container-fluid position-relative pt-4 px-0">
+<div class="container-fluid position-relative pt-4 px-0" id="seo">
   <div class="tag-item">
     <img src="imgs/home/裝飾-01.png" alt="">
     <h5>SEO</h5>
@@ -77,7 +79,7 @@
     <h4>
       高速 SEO 搜尋排名優化
     </h4>
-    <section class="d-flex flex-column align-items-lg-center justify-content-center">
+    <section class="d-flex flex-column align-items-lg-center justify-content-center px-3 px-sm-0">
       <p class="my-5">
         你的 SEO 要跑多久？ <br>
         集仕多獨家高速 SEO，經審核網站後，會提出網站優化建議，並且推薦適合的關鍵字 <br>
@@ -98,15 +100,15 @@
       <div class="d-block d-lg-none">
         <ul class="p-0">
           <li>
-            <strong>➤　形象 SEO</strong> <br>
+            <strong class="d-inline-block mb-1">➤　形象 SEO</strong> <br>
             將負面評價、負面新聞、負面討論排序向後，達成正面形象的目標
           </li>
           <li class="my-4">
-            <strong>➤　新聞 SEO</strong> <br>
+            <strong class="d-inline-block mb-1">➤　新聞 SEO</strong> <br>
             撰寫 SEO 新聞稿、製作AI主播報導影片、一次曝光到 11 家網路媒體
           </li>
           <li>
-            <strong>➤　創業家 SEO</strong> <br>
+            <strong class="d-inline-block mb-1">➤　創業家 SEO</strong> <br>
             為店家打造在地口碑，以第三方客觀角度撰寫專屬推薦文章
           </li>
         </ul>
@@ -127,7 +129,7 @@
 </div>
 
 <!-- AI 主播 -->
-<div class="container-fluid position-relative px-0 ai-content">
+<div class="container-fluid position-relative px-0 ai-content" id="ai-video">
   <div class="tag-item">
     <img src="imgs/home/裝飾-01.png" alt="">
     <h5 class="fw-bold" style="right: 40px;">AI 主播</h5>
@@ -137,7 +139,7 @@
       AI 虛擬人像
     </h4>
 
-    <div class="row my-5 py-5 justify-content-center align-items-center">
+    <div class="row my-5 py-0 py-md-5 justify-content-center align-items-center">
       <div class="col-12 col-md-6 d-flex justify-content-center">
         <section>
           <h2 class="title">製作影片 一鍵合成</h2>

layouts/partials/footer.html

@@ -1,7 +1,7 @@
 <footer class="footer">
   <div class="container">
     <div class="row">
-      <div class="col-xs-12 col-sm-6">
+      <div class="col-xs-12 col-sm-6 px-0">
         <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>

static/css/style.css

@@ -228,7 +228,7 @@
 }
 
 .footer .footer-socials a {
-  margin-right: 5px;
+  margin-right: 0px;
 }
 
 /* footer.html End */
@@ -443,6 +443,9 @@
   max-width: 100%;
   height: auto;
 }
+#home .swiper {
+  overflow: initial;
+}
 #home .swiper .swiper-pagination-bullet {
   width: 13px;
   height: 13px;
@@ -456,7 +459,7 @@
   }
 }
 #home .swiper .swiper-pagination {
-  bottom: -5px;
+  bottom: -15px;
 }
 #home .swiper .swiper-pagination-bullet-active {
   background-color: #000 !important;
@@ -465,7 +468,7 @@
   overflow: hidden;
 }
 #home #main .content {
-  height: 65vh;
+  height: 80vh;
   padding-left: 15vw;
   background-image: url("/imgs/home/首頁-01.png");
   background-position: center;
@@ -502,6 +505,11 @@
   font-size: 26px;
   line-height: 40px;
 }
+@media (max-width: 767px) {
+  #home #main .content section h3 {
+    font-size: 22px;
+  }
+}
 #home #main .content .logo {
   width: 200px;
 }
@@ -529,10 +537,16 @@
   background-repeat: no-repeat;
 }
 #home #main .journey-content h3 {
+  line-height: 40px;
   text-align: center;
   font-weight: bold;
   padding: 260px 0 80px;
 }
+@media (max-width: 767px) {
+  #home #main .journey-content h3 {
+    padding: 80px 0;
+  }
+}
 #home #main .journey-content h4 {
   color: #ea5413;
   text-align: center;
@@ -554,6 +568,21 @@
   width: 180px;
   position: absolute;
 }
+@media (max-width: 767px) {
+  #home #main .journey-content .title img {
+    top: -45px;
+    right: -16vw;
+    width: 150px;
+    transform: rotate(90deg);
+  }
+}
+@media (max-width: 575px) {
+  #home #main .journey-content .title img {
+    top: -36px;
+    right: -21vw;
+    width: 130px;
+  }
+}
 #home #main .journey-content .list {
   padding: 0 25px;
   font-size: 18px;
@@ -584,6 +613,11 @@
     height: 85px;
   }
 }
+@media (max-width: 767px) {
+  #home #main .journey-content .list p {
+    height: auto;
+  }
+}
 #home #main .journey-content .list strong {
   display: block;
   padding: 15px;
@@ -592,8 +626,19 @@
   color: #fff;
   background-color: #ea5413;
 }
+@media (max-width: 991px) {
+  #home #main .journey-content .list strong {
+    font-size: 13px;
+  }
+}
+@media (max-width: 767px) {
+  #home #main .journey-content .list strong {
+    font-size: 16px;
+    margin: 20px auto 10px;
+  }
+}
 #home #main .team-content {
-  margin: 100px auto;
+  padding: 100px 0;
 }
 #home #main .team-content strong {
   font-size: 26px;
@@ -604,6 +649,11 @@
   font-weight: bold;
   line-height: 36px;
 }
+@media (max-width: 575px) {
+  #home #main .team-content h4 {
+    font-size: 18px;
+  }
+}
 #home #main .team-content ul {
   list-style: none;
   padding: 0;
@@ -613,6 +663,11 @@
   margin: 5px 0;
   font-size: 18px;
 }
+@media (max-width: 575px) {
+  #home #main .team-content ul li {
+    font-size: 16px;
+  }
+}
 #home .ad-content {
   width: 90%;
   padding: 50px 0 0;
@@ -625,14 +680,16 @@
 #home .ad-content ul li {
   margin-bottom: 50px;
 }
-#home .ad-content ul li h5 {
-  font-weight: bold;
-}
 #home .ad-content ul li p {
   color: #90268f;
-  font-size: 20px;
+  font-size: 18px;
   font-weight: bold;
 }
+@media (max-width: 767px) {
+  #home .ad-content ul li p {
+    font-size: 16px;
+  }
+}
 #home .ad-content section h4 {
   text-align: center;
   font-size: 30px;
@@ -644,14 +701,25 @@
   font-size: 24px;
   color: #ea5413;
 }
+@media (max-width: 767px) {
+  #home .ad-content section h4 strong {
+    font-size: 18px;
+  }
+}
+@media (max-width: 575px) {
+  #home .ad-content section h4 strong {
+    padding: 0 20px;
+    line-height: 32px;
+  }
+}
 #home .ad-content h5 {
   font-weight: bold;
-  font-size: 24px;
+  font-size: 20px;
   line-height: 32px;
 }
-@media (max-width: 1200px) {
+@media (max-width: 991px) {
   #home .ad-content h5 {
-    font-size: 20px;
+    font-size: 18px;
   }
 }
 #home .ad-content h5 strong {
@@ -667,9 +735,14 @@
   font-size: 1.6vw;
   font-weight: bold;
 }
+@media (max-width: 991px) {
+  #home .ad-content .img-text {
+    font-size: 2vw;
+  }
+}
 @media (max-width: 575px) {
   #home .ad-content .img-text {
-    font-size: 24px;
+    font-size: 5.5vw;
   }
 }
 #home .tag-item {
@@ -693,14 +766,25 @@
   list-style: none;
 }
 #home .seo-content ul li {
+  margin: 10px 0;
   font-size: 18px;
 }
+@media (max-width: 575px) {
+  #home .seo-content ul li {
+    font-size: 16px;
+  }
+}
 #home .seo-content section p {
   color: #6c6d70;
   font-weight: bold;
   font-size: 18px;
   line-height: 32px;
 }
+@media (max-width: 575px) {
+  #home .seo-content section p {
+    font-size: 16px;
+  }
+}
 #home .seo-content .video-box {
   width: 55%;
   padding-bottom: 30%;
@@ -714,7 +798,7 @@
 }
 #home .seo-content h4,
 #home .ai-content h4 {
-  padding-top: 100px;
+  padding-top: 130px;
   text-align: center;
   font-size: 30px;
   font-weight: bold;
@@ -726,12 +810,22 @@
   line-height: 32px;
   font-size: 18px;
 }
+@media (max-width: 575px) {
+  #home .ai-content p {
+    font-size: 16px;
+  }
+}
 #home .ai-content .title {
   color: #ea5413;
   font-weight: bold;
 }
+@media (max-width: 575px) {
+  #home .ai-content .title {
+    font-size: 22px;
+  }
+}
 #home .ai-content .video-title {
-  font-size: 2rem;
+  font-size: 30px;
   font-weight: bold;
 }
 @media (max-width: 991px) {
@@ -796,6 +890,11 @@
 #home .ai-content .sec-video {
   margin-top: 0;
 }
+@media (max-width: 767px) {
+  #home .ai-content .sec-video {
+    margin-bottom: 0;
+  }
+}
 #home .ai-content .sec-video .video-mb-title {
   font-size: 26px;
   font-weight: bold;
@@ -807,7 +906,7 @@
   }
 }
 #home .ai-content .sec-usecase .usecase-title {
-  font-size: 2rem;
+  font-size: 30px;
   font-weight: bold;
 }
 #home .ai-content .sec-usecase .usecase-imgfr {
@@ -837,10 +936,12 @@
   background-color: #d54d13;
 }
 #home .sec-blogtab {
-  margin: 100px auto;
+  padding-top: 100px;
+  margin: 0 auto 50px;
 }
 #home .sec-blogtab .blogtab-title {
-  font-size: 2rem;
+  font-size: 30px;
+  font-weight: bold;
   margin-bottom: 30px;
 }
 #home .sec-blogtab .blog-txt {
@@ -851,6 +952,11 @@
   transition: all 0.3s;
   text-decoration: none;
 }
+@media (max-width: 767px) {
+  #home .sec-blogtab .blog-tabs .blog-tabs-nav {
+    padding: 1rem 2rem 3rem;
+  }
+}
 #home .sec-blogtab .blog-tabs-nav a {
   transition: all 0.3s;
   text-decoration: none;
@@ -858,6 +964,76 @@
 #home .sec-blogtab .blog-tabs-nav a:hover {
   opacity: 0.8;
 }
+#home .progress-item {
+  height: 100%;
+  width: 200px;
+  position: fixed;
+  z-index: 100;
+  left: -325px;
+  top: 0;
+}
+#home .progress-item .cont {
+  height: 100%;
+  width: 420px;
+  left: calc(50% - 288px);
+  padding: 0;
+  margin: 0 auto;
+  position: absolute;
+  transform: rotate(90deg);
+}
+#home .progress-item .cont #progress-bar {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  width: 420px;
+  color: #000;
+  height: 2px;
+  margin: 0 auto;
+}
+#home .progress-item .cont span {
+  height: 10px;
+  width: 10px;
+  border-radius: 100%;
+  border: 3px solid #137cc0;
+  background: #137cc0;
+  position: absolute;
+  left: 0;
+  top: 12px;
+  cursor: pointer;
+  transition: all 0.4s ease-in-out;
+}
+#home .progress-item .cont .journey {
+  left: 70px;
+}
+#home .progress-item .cont .team {
+  left: 140px;
+}
+#home .progress-item .cont .ai-ad {
+  left: 210px;
+}
+#home .progress-item .cont .seo {
+  left: 280px;
+}
+#home .progress-item .cont .ai-video {
+  left: 350px;
+}
+#home .progress-item .cont .blog {
+  left: 420px;
+}
+#home .progress-item .cont #progress-bar::-webkit-progress-value {
+  /* Changes line color */
+  background: #ea5413;
+  -webkit-transition: all 0.4s ease-in-out;
+  transition: all 0.4s ease-in-out;
+}
+#home .progress-item .cont #progress-bar::-webkit-progress-bar {
+  /* Changes background color */
+  background: #137cc0;
+}
+#home .progress-item .cont .border-change {
+  border-color: #ea5413;
+  transition: all 0.4s ease-in-out;
+}
 
 /* content page */
 .cntheader {

static/css/style.scss

@@ -237,7 +237,7 @@
 }
 
 .footer .footer-socials a {
-  margin-right: 5px;
+  margin-right: 0px;
 }
 
 /* footer.html End */
@@ -467,6 +467,7 @@
     height: auto;
   }
   .swiper {
+    overflow: initial;
     .swiper-pagination-bullet {
       width: 13px;
       height: 13px;
@@ -478,7 +479,7 @@
       }
     }
     .swiper-pagination {
-      bottom: -5px;
+      bottom: -15px;
     }
     .swiper-pagination-bullet-active {
       background-color: #000 !important;
@@ -487,7 +488,7 @@
   #main {
     overflow: hidden;
     .content {
-      height: 65vh;
+      height: 80vh;
       padding-left: 15vw;
       background-image: url("/imgs/home/首頁-01.png");
       background-position: center;
@@ -517,6 +518,9 @@
           font-weight: bold;
           font-size: 26px;
           line-height: 40px;
+          @media (max-width: 767px) {
+            font-size: 22px;
+          }
         }
       }
       .logo {
@@ -547,9 +551,13 @@
       background-position: top;
       background-repeat: no-repeat;
       h3 {
+        line-height: 40px;
         text-align: center;
         font-weight: bold;
         padding: 260px 0 80px;
+        @media (max-width: 767px) {
+          padding: 80px 0;
+        }
       }
       h4 {
         color: #ea5413;
@@ -570,6 +578,17 @@
           right: -75px;
           width: 180px;
           position: absolute;
+          @media (max-width: 767px) {
+            top: -45px;
+            right: -16vw;
+            width: 150px;
+            transform: rotate(90deg);
+          }
+          @media (max-width: 575px) {
+            top: -36px;
+            right: -21vw;
+            width: 130px;
+          }
         }
       }
       .list {
@@ -592,6 +611,9 @@
           @media (max-width: 1200px) {
             height: 85px;
           }
+          @media (max-width: 767px) {
+            height: auto;
+          }
         }
         strong {
           display: block;
@@ -600,12 +622,19 @@
           text-align: center;
           color: #fff;
           background-color: #ea5413;
+          @media (max-width: 991px) {
+            font-size: 13px;
+          }
+          @media (max-width: 767px) {
+            font-size: 16px;
+            margin: 20px auto 10px;
+          }
         }
       }
     }
 
     .team-content {
-      margin: 100px auto;
+      padding: 100px 0;
       strong {
         font-size: 26px;
       }
@@ -614,6 +643,9 @@
         color: #ea5413;
         font-weight: bold;
         line-height: 36px;
+        @media (max-width: 575px) {
+          font-size: 18px;
+        }
       }
       ul {
         list-style: none;
@@ -622,6 +654,9 @@
         li {
           margin: 5px 0;
           font-size: 18px;
+          @media (max-width: 575px) {
+            font-size: 16px;
+          }
         }
       }
     }
@@ -635,13 +670,13 @@
       list-style: none;
       li {
         margin-bottom: 50px;
-        h5 {
-          font-weight: bold;
-        }
         p {
           color: #90268f;
-          font-size: 20px;
+          font-size: 18px;
           font-weight: bold;
+          @media (max-width: 767px) {
+            font-size: 16px;
+          }
         }
       }
     }
@@ -655,15 +690,22 @@
           margin: 20px 0 50px;
           font-size: 24px;
           color: #ea5413;
+          @media (max-width: 767px) {
+            font-size: 18px;
+          }
+          @media (max-width: 575px) {
+            padding: 0 20px;
+            line-height: 32px;
+          }
         }
       }
     }
     h5 {
       font-weight: bold;
-      font-size: 24px;
+      font-size: 20px;
       line-height: 32px;
-      @media (max-width: 1200px) {
-        font-size: 20px;
+      @media (max-width: 991px) {
+        font-size: 18px;
       }
       strong {
         margin: 30px 0;
@@ -678,8 +720,11 @@
       transform: translate(-50%, -50%);
       font-size: 1.6vw;
       font-weight: bold;
+      @media (max-width: 991px) {
+        font-size: 2vw;
+      }
       @media (max-width: 575px) {
-        font-size: 24px;
+        font-size: 5.5vw;
       }
     }
   }
@@ -697,13 +742,16 @@
       font-size: 26px;
     }
   }
-
   .seo-content {
     overflow: hidden;
     ul {
       list-style: none;
       li {
+        margin: 10px 0;
         font-size: 18px;
+        @media (max-width: 575px) {
+          font-size: 16px;
+        }
       }
     }
     section {
@@ -712,6 +760,9 @@
         font-weight: bold;
         font-size: 18px;
         line-height: 32px;
+        @media (max-width: 575px) {
+          font-size: 16px;
+        }
       }
     }
     .video-box {
@@ -724,31 +775,35 @@
       }
     }
   }
-
   .seo-content,
   .ai-content {
     h4 {
-      padding-top: 100px;
+      padding-top: 130px;
       text-align: center;
       font-size: 30px;
       font-weight: bold;
     }
   }
-
   .ai-content {
     margin-top: 100px;
     p {
       line-height: 32px;
       font-size: 18px;
+      @media (max-width: 575px) {
+        font-size: 16px;
+      }
     }
 
     .title {
       color: #ea5413;
       font-weight: bold;
+      @media (max-width: 575px) {
+        font-size: 22px;
+      }
     }
 
     .video-title {
-      font-size: 2rem;
+      font-size: 30px;
       font-weight: bold;
     }
 
@@ -802,6 +857,9 @@
 
     .sec-video {
       margin-top: 0;
+      @media (max-width: 767px) {
+        margin-bottom: 0;
+      }
       .video-mb-title {
         font-size: 26px;
         font-weight: bold;
@@ -816,7 +874,7 @@
 
     .sec-usecase {
       .usecase-title {
-        font-size: 2rem;
+        font-size: 30px;
         font-weight: bold;
       }
       .usecase-imgfr {
@@ -828,7 +886,6 @@
       }
     }
   }
-
   .bg-img {
     margin-top: -85vw;
     position: relative;
@@ -836,7 +893,6 @@
     transform: scale(1.1);
     object-position: 3vw 0px;
   }
-
   .more-btn {
     padding: 13px 30px;
     color: #fff;
@@ -848,11 +904,12 @@
       background-color: #d54d13;
     }
   }
-
   .sec-blogtab {
-    margin: 100px auto;
+    padding-top: 100px;
+    margin: 0 auto 50px;
     .blogtab-title {
-      font-size: 2rem;
+      font-size: 30px;
+      font-weight: bold;
       margin-bottom: 30px;
     }
     .blog-txt {
@@ -863,6 +920,13 @@
       transition: all 0.3s;
       text-decoration: none;
     }
+    .blog-tabs {
+      .blog-tabs-nav {
+        @media (max-width: 767px) {
+          padding: 1rem 2rem 3rem;
+        }
+      }
+    }
     .blog-tabs-nav {
       a {
         transition: all 0.3s;
@@ -873,6 +937,73 @@
       }
     }
   }
+  .progress-item {
+    height: 100%;
+    width: 200px;
+    position: fixed;
+    z-index: 100;
+    left: -325px;
+    top: 0;
+    .cont {
+      height: 100%;
+      width: 420px;
+      left: calc(50% - 288px);
+      padding: 0;
+      margin: 0 auto;
+      position: absolute;
+      transform: rotate(90deg);
+      #progress-bar {
+        appearance: none;
+        width: 420px;
+        color: #000;
+        height: 2px;
+        margin: 0 auto;
+      }
+      span {
+        height: 10px;
+        width: 10px;
+        border-radius: 100%;
+        border: 3px solid #137cc0;
+        background: #137cc0;
+        position: absolute;
+        left: 0;
+        top: 12px;
+        cursor: pointer;
+        transition: all 0.4s ease-in-out;
+      }
+      .journey {
+        left: calc(420 / 6) + px;
+      }
+      .team {
+        left: calc(420 / 6 * 2) + px;
+      }
+      .ai-ad {
+        left: calc(420 / 6 * 3) + px;
+      }
+      .seo {
+        left: calc(420 / 6 * 4) + px;
+      }
+      .ai-video {
+        left: calc(420 / 6 * 5) + px;
+      }
+      .blog {
+        left: calc(420 / 6 * 6) + px;
+      }
+      #progress-bar::-webkit-progress-value {
+        /* Changes line color */
+        background: #ea5413;
+        transition: all 0.4s ease-in-out;
+      }
+      #progress-bar::-webkit-progress-bar {
+        /* Changes background color */
+        background: #137cc0;
+      }
+      .border-change {
+        border-color: #ea5413;
+        transition: all 0.4s ease-in-out;
+      }
+    }
+  }
 }
 
 /* content page */

static/js/progress.js

@@ -0,0 +1,39 @@
+$(document).ready(function () {
+  $('.progress-item span').click(function (e) {
+    let className = $(this).attr("class").split(' ')[0];
+
+    console.log('animate');
+    console.log('className', className);
+
+    // 錨點
+    $('html,body').animate({ scrollTop: $(`#${className}`).offset().top }, 300);
+
+    let percent = '';
+
+    if (className === "journey") {
+      percent = '17'
+    } else if (className === "team") {
+      percent = '34'
+    } else if (className === "ai-ad") {
+      percent = '51'
+    } else if (className === "seo") {
+      percent = '68'
+    } else if (className === "ai-video") {
+      percent = '85'
+    } else if (className === "blog") {
+      percent = '100'
+    }
+
+    console.log('click', e);
+
+    if ($(this).hasClass('info')) {
+      $('#progress-bar').val('0');
+      $(this).nextAll().removeClass('border-change');
+    } else if ($(this).hasClass(className)) {
+      $(this).nextAll().removeClass('border-change');
+      $('#progress-bar').val(percent);
+      $(this).prevAll().addClass('border-change');
+      $(this).addClass('border-change');
+    }
+  });
+});// complete click