update

layouts/ad-operation/single.html

@@ -96,7 +96,7 @@
     .card-content div {
       display: flex;
       flex-direction: column;
-      border: 2px solid #ea5413;
+      border: 2px solid #FFEBE2;
       border-radius: 10px;
     }
 

layouts/home-ad/single.html

@@ -192,7 +192,6 @@
       </script>
     <script>
       function tabLP () {
-            console.log('pass');
             if(('.m-tabs').length){
                   // Show the first tab by default
               $('.blog-tabs-stage>div').hide();
@@ -228,16 +227,12 @@
       const featuresBlock = document.querySelectorAll('.features-block');
       const featuresRow = document.querySelectorAll('.sec-features .row');
       function checkSlide() {
-        console.log('pass');
         featuresRow.forEach((block, i) => {
         // half way through the image
         const slideInAt = (window.scrollY + window.innerHeight) - block.offsetHeight / 2;
-        console.log(slideInAt);
-        console.log(block.offsetTop);
         // bottom of the image
         const isHalfShown = slideInAt > block.offsetTop;
         if (isHalfShown) {
-          console.log('active');
           featuresBlock[i].classList.add('active');
         }
       });

layouts/index.html

@@ -14,6 +14,8 @@
 
        {{ partial "LP_components/hero.html" . }} 
 
+       {{ partial "LP_components/video.html" . }} 
+
        {{ partial "LP_components/use_cases.html" . }}
 
        {{ partial "LP_components/steps.html" . }}
@@ -34,7 +36,6 @@
     {{ partial "scripts.html" . }}
     <script>
       function tabLP () {
-            console.log('pass');
             if(('.m-tabs').length){
                   // Show the first tab by default
               $('.blog-tabs-stage>div').hide();
@@ -70,12 +71,9 @@
       const featuresBlock = document.querySelectorAll('.features-block');
       const featuresRow = document.querySelectorAll('.sec-features .row');
       function checkSlide() {
-        console.log('pass');
         featuresRow.forEach((block, i) => {
         // half way through the image
         const slideInAt = (window.scrollY + window.innerHeight) - block.offsetHeight / 2;
-        console.log(slideInAt);
-        console.log(block.offsetTop);
         // bottom of the image
         const isHalfShown = slideInAt > block.offsetTop;
         if (isHalfShown) {

layouts/partials/LP_components/steps.html

@@ -1,6 +1,6 @@
 <section class="sec-steps">
     <div class="container text-center">
-        <h2 class="steps-title"><strong>3</strong>步驟快速合成影片</h2>
+        <h2 class="steps-title"><strong>3</strong> 步驟快速合成影片</h2>
         <div class="row">
             <div class="col-xs-12 col-sm-4">
                 <div class="steps-block">

layouts/partials/LP_components/video.html

@@ -0,0 +1,16 @@
+<section class="sec-video">
+    <div class="container">
+        <h2 class="video-title">三代主播－客製化範例影片</h2>
+        <span class="line"></span>
+        <p class="video-text">
+            2022 年與藝點新聞合作之活動宣傳影片 <br>
+            歐美主播 ｘ 客製化字幕 ｘ 高解析度人像
+        </p>
+        <img src="./imgs/dm/stock-img-03.png" alt="" class="stock">
+        <div class="video-box">
+            <iframe src="https://www.youtube.com/embed/rTML9TAsUS8" title="YouTube video player" frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen></iframe>
+        </div>
+    </div>
+</section>

layouts/seo/single.html

@@ -26,7 +26,7 @@
           <h2 class="header-title">
             {{ .Params.packageTitle }}
           </h2>
-          <p class="text-start" style="margin: 40px auto;">
+          <p class="text-start px-3" style="margin: 40px auto;">
             {{ .Params.description }}
             <br><br>
             {{ .Params.descriptionSub }}
@@ -41,16 +41,16 @@
 
     <div class="container my-5 py-5">
       <div class="row align-items-center">
-        <div class="col-6">
+        <div class="col-12 col-lg-6">
           <img src="{{ .Params.block1_img }}" alt="" class="img-fluid">
         </div>
-        <div class="col-6">
+        <div class="col-12 col-lg-6">
           <div class="row align-items-center">
-            <div class="col-2">
+            <div class="col-3">
               <img src="/imgs/dm/stock-img-02.png" alt="" class="img-fluid">
             </div>
-            <div class="col-10 block-content">
-              <h3 class="block-title mb-3">
+            <div class="col-9 block-content">
+              <h3 class="block-title">
                 {{ .Params.block1_title }}
               </h3>
               <p class="m-0">{{ .Params.block1_text }}</p>
@@ -60,13 +60,13 @@
       </div>
 
       <div class="row align-items-center" style="margin: 150px auto;">
-        <div class="col-4">
+        <div class="col-lg-5">
           <div class="row align-items-center">
-            <div class="col-4">
+            <div class="col-3 col-lg-4">
               <img src="/imgs/dm/stock-img-02.png" alt="" class="img-fluid">
             </div>
-            <div class="col-8 block-content">
-              <h3 class="block-title m-0">
+            <div class="col-9 col-lg-8 block-content">
+              <h3 class="block-title mb-0">
                 {{ .Params.block2_text1 }}
                 <br>
                 {{ .Params.block2_text2 }}
@@ -76,25 +76,25 @@
             </div>
           </div>
         </div>
-        <div class="col-8">
+        <div class="col-lg-7">
           <img src="{{ .Params.block2_img }}" alt="" class="img-fluid">
         </div>
       </div>
 
       <div class="row">
-        <div class="col-6 p-0">
+        <div class="col-12 col-lg-6 p-0">
           <img src="{{ .Params.block3_img1 }}" alt="" class="img-fluid">
         </div>
-        <div class="col-3 p-0 mt-4">
+        <div class="col-6 col-lg-3 p-0 mt-4">
           <img src="{{ .Params.block3_img2 }}" alt="" class="img-fluid">
         </div>
-        <div class="col-3 p-0">
+        <div class="col-6 col-lg-3 p-0">
           <div class="row align-items-center">
             <div class="col-4">
               <img src="/imgs/dm/stock-img-02.png" alt="" class="img-fluid">
             </div>
             <div class="col-8 block-content">
-              <h3 class="block-title m-0" style="width: 130%;">
+              <h3 class="block-title mb-0" style="width: 130%;">
                 {{ .Params.block3_title }}
               </h3>
             </div>
@@ -104,16 +104,16 @@
 
       <div class="row align-items-center position-relative" style="margin: 150px auto;">
         <img src="/imgs/dm/stock-img-03.png" alt="" class="bg-img">
-        <div class="col-6">
+        <div class="col-12 col-lg-6">
           <div class="row align-items-center">
-            <div class="col-4">
+            <div class="col-3 col-lg-4">
               <img src="/imgs/dm/stock-img-02.png" alt="" class="img-fluid">
             </div>
-            <div class="col-8 block-content">
-              <h3 class="block-title mb-3">
+            <div class="col-9 col-lg-8 block-content">
+              <h3 class="block-title">
                 {{ .Params.block4_title }}
               </h3>
-              <p>
+              <p class="m-0">
                 {{ .Params.block4_text1 }}
                 <br>
                 {{ .Params.block4_text2 }}
@@ -123,7 +123,7 @@
             </div>
           </div>
         </div>
-        <div class="col-6">
+        <div class="col-12 col-lg-6 mt-3 mt-sm-0">
           <img src="{{ .Params.block4_img }}" alt="" class="img-fluid">
         </div>
       </div>
@@ -131,14 +131,14 @@
       <div class="row align-items-center" style="margin: 150px auto 0;">
         <div class="col-12">
           <div class="row align-items-center">
-            <div class="col-2">
+            <div class="col-3 col-lg-2">
               <img src="/imgs/dm/stock-img-02.png" alt="" class="img-fluid">
             </div>
-            <div class="col-8 block-content">
-              <h3 class="block-title mb-3">
+            <div class="col-9 col-lg-10 block-content">
+              <h3 class="block-title">
                 {{ .Params.block5_title }}
               </h3>
-              <p>
+              <p class="m-0">
                 {{ .Params.block5_text1 }}
                 <br>
                 成效有感：

static/css/custom.css

@@ -187,6 +187,64 @@
   }
 }
 
+/* sec-video */
+
+.sec-video {
+  margin: 200px auto 100px;
+  position: relative;
+}
+
+.sec-video .stock {
+  width: 550px;
+  left: 0;
+  top: 0;
+  position: absolute;
+  z-index: -1;
+}
+
+@media (max-width: 991px) {
+  .sec-video .stock {
+    width: 25%;
+  }
+}
+
+.sec-video .video-box {
+  position: relative;
+  width: 80%;
+  height: 0;
+  padding-bottom: 45%;
+  margin: auto;
+}
+
+.sec-video .video-box iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.sec-video .video-title {
+  margin-bottom: 20px;
+  font-size: 3rem;
+  text-align: center;
+}
+
+.sec-video .video-text {
+  margin-bottom: 20px;
+  font-size: 16px;
+  text-align: center;
+  letter-spacing: 1px;
+}
+
+.sec-video .line {
+  height: 7px;
+  width: 70px;
+  display: block;
+  background: #ea5413;
+  margin: 30px auto;
+}
+
 /* sec-usecase */
 .sec-usecase {
   padding: 6rem 0;
@@ -194,7 +252,8 @@
   margin-bottom: 0 !important;
 }
 
-.sec-usecase .container {
+.sec-usecase .container,
+.sec-video .container {
   width: 95%;
   max-width: 1200px;
 }
@@ -214,6 +273,7 @@
 .sec-usecase .usecase-title {
   font-size: 3rem;
   text-align: center;
+  margin-bottom: 50px;
 }
 
 .sec-usecase .usecase-sub {
@@ -270,7 +330,7 @@
 
 .sec-steps .steps-block::after {
   position: absolute;
-  bottom: -1rem;
+  bottom: -1.8rem;
   left: 0;
   width: 100%;
   height: 15rem;
@@ -290,6 +350,10 @@
   height: 100%;
 }
 
+.sec-steps .steps-sub {
+  margin: 5px auto 0;
+}
+
 .sec-steps .steps-txt {
   display: flex;
   align-items: center;

static/css/style.css

@@ -4,16 +4,13 @@
 }
 
 .navbar {
-  -webkit-box-shadow: 0 2px 10px 2px #cccccc;
-          box-shadow: 0 2px 10px 2px #cccccc;
+  box-shadow: 0 2px 10px 2px rgb(204, 204, 204);
   background-color: white;
   width: 100%;
 }
 
 .navbar .navbar-collapse {
-  -webkit-box-flex: 0;
-      -ms-flex-positive: 0;
-          flex-grow: 0;
+  flex-grow: 0;
 }
 
 .header {
@@ -62,9 +59,7 @@
 
 .header__form {
   margin: 1rem auto;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 
 .header__form__input {
@@ -80,9 +75,7 @@
   color: white;
   border: none;
   width: 5rem;
-  -webkit-transform: translateX(-100%);
-          transform: translateX(-100%);
-  -webkit-transition: all 0.3s;
+  transform: translateX(-100%);
   transition: all 0.3s;
 }
 
@@ -114,7 +107,7 @@
 
 .header-right__video {
   position: absolute;
-  width: calc(80% - 10%);
+  width: 70%;
   height: auto;
   left: 3.3rem;
   top: 1.8rem;
@@ -132,8 +125,7 @@
   width: 22%;
   top: 0;
   left: 0;
-  -webkit-transform: translate(-60%, -50%);
-          transform: translate(-60%, -50%);
+  transform: translate(-60%, -50%);
 }
 
 .header-right-linecir {
@@ -148,7 +140,6 @@
 .footer {
   color: #656565;
 }
-
 .footer .footer-contacts {
   margin-top: 2rem;
   line-height: 32px;
@@ -258,20 +249,17 @@
     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;
@@ -301,8 +289,7 @@
   border-bottom: 10px solid #ff892e;
   left: 50%;
   top: -1.5rem;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
+  transform: translateX(-50%);
 }
 
 .category-btngrp {
@@ -328,8 +315,7 @@
 
 .card__rank {
   border: 1px solid #cecece;
-  -webkit-box-shadow: 1px 1px 5px 1px lightgray;
-          box-shadow: 1px 1px 5px 1px lightgray;
+  box-shadow: 1px 1px 5px 1px rgb(211, 211, 211);
   position: relative;
   padding: 1rem 1.5rem;
 }
@@ -476,8 +462,7 @@
 
 .toparticle {
   border: 1px solid #cecece;
-  -webkit-box-shadow: 1px 2px 3px 1px #e0e0e0;
-          box-shadow: 1px 2px 3px 1px #e0e0e0;
+  box-shadow: 1px 2px 3px 1px rgb(224, 224, 224);
 }
 
 .toparticle__title {
@@ -604,7 +589,7 @@
 }
 
 .aboutus_prize_img {
-  border: 1.5rem solid #e7e7e7;
+  border: 1.5rem solid rgb(231, 231, 231);
   border-radius: 1rem;
 }
 
@@ -614,7 +599,7 @@
   padding: 1rem;
   display: inline-block;
   font-size: 1.4rem;
-  background-color: #ffff9f;
+  background-color: rgb(255, 255, 159);
   border-radius: 50%;
 }
 
@@ -632,10 +617,7 @@
 }
 
 .ai-training__action__box {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  flex-direction: row;
 }
 
 .ai-training__action__btn {
@@ -667,8 +649,7 @@
   background: linear-gradient(20deg, #ea5413, #920783);
   color: white;
   font-size: 1.1rem;
-  -webkit-box-shadow: 1px 1px 5px 1px #cfcfcf87;
-          box-shadow: 1px 1px 5px 1px #cfcfcf87;
+  box-shadow: 1px 1px 5px 1px rgba(207, 207, 207, 0.5294117647);
 }
 
 .contact-btn {
@@ -680,12 +661,9 @@
   background-color: #ea5413;
   margin-top: 0.5rem;
   border-radius: 3rem;
-  -webkit-box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
-          box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
-  -webkit-transition: all 0.3s;
+  box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
   transition: all 0.3s;
 }
-
 .contact-btn:hover {
   color: #ea5413;
   background-color: transparent;
@@ -693,8 +671,7 @@
 }
 
 .loaded {
-  -webkit-box-shadow: 0 4px 8px 0 #3569804d, 0 6px 20px 0 #a5c8d569;
-          box-shadow: 0 4px 8px 0 #3569804d, 0 6px 20px 0 #a5c8d569;
+  box-shadow: 0 4px 8px 0 rgba(53, 105, 128, 0.3019607843), 0 6px 20px 0 rgba(165, 200, 213, 0.4117647059);
   margin-bottom: 4rem;
 }
 
@@ -730,14 +707,12 @@
   margin-bottom: 0.8rem;
   display: inline-block;
   border-bottom: 1px dotted #ff892e;
-  -webkit-transition: all 0.4s;
   transition: all 0.4s;
   text-decoration: none;
 }
 
 .btn-detailForm:hover {
-  -webkit-transform: translate(2px, 2px);
-          transform: translate(2px, 2px);
+  transform: translate(2px, 2px);
   text-decoration: none;
   color: #ff892e;
 }
@@ -745,10 +720,9 @@
 @media (max-width: 1300px) {
   .header-right__video {
     position: absolute;
-    width: calc(80% - 4%);
+    width: 76%;
   }
 }
-
 @media (max-width: 992px) {
   .header-title {
     font-size: 3rem;
@@ -767,7 +741,7 @@
     font-size: 1.3rem;
   }
   .header__sub::before,
-  .header__sub::after {
+.header__sub::after {
     width: 8%;
   }
   .header__sub::before {
@@ -828,8 +802,7 @@
     width: 100%;
   }
   .header__form__sub {
-    -webkit-transform: none;
-            transform: none;
+    transform: none;
     position: absolute;
     right: 0;
     top: 0;
@@ -862,13 +835,9 @@
     width: 100%;
   }
   .ai-training__action__box {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
+    flex-direction: column;
   }
 }
-
 @media (max-width: 767px) {
   .header .col-md-5 {
     margin-bottom: 3rem;
@@ -916,7 +885,7 @@
   }
   .header-right__video {
     position: absolute;
-    width: calc(80% - 10%);
+    width: 70%;
     left: 2.3rem;
     top: 1.5rem;
   }
@@ -927,7 +896,6 @@
     height: 50vh;
   }
 }
-
 @media (max-width: 576px) {
   .header-title {
     font-size: 2.5rem;
@@ -962,42 +930,36 @@
     width: 95%;
   }
 }
-
 @media (max-width: 480px) {
   .ctncategory-btn {
     margin-top: 0.6rem;
   }
   .header-right__video {
     position: absolute;
-    width: calc(80% - 5%);
+    width: 75%;
     left: 2.1rem;
     top: 1.3rem;
   }
 }
-
 /* blog-traffic Start */
 .blog-traffic {
   overflow-x: hidden;
 }
-
 .blog-traffic .header {
   padding: 0;
 }
-
 .blog-traffic .banner {
   width: 100vw;
   height: auto;
   position: absolute;
   z-index: -10;
 }
-
 @media (max-width: 767px) {
   .blog-traffic .banner {
     width: 150vw;
     height: auto;
   }
 }
-
 .blog-traffic .header-img {
   width: 150%;
   height: auto;
@@ -1006,7 +968,6 @@
   right: 30px;
   z-index: -1;
 }
-
 @media (max-width: 767px) {
   .blog-traffic .header-img {
     width: 100%;
@@ -1014,82 +975,67 @@
     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 {
     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 {
   padding: 0;
 }
-
 @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 ul li {
   line-height: 32px;
 }
-
 .blog-traffic .img-block-img {
   width: 12%;
   -o-object-fit: contain;
@@ -1098,110 +1044,92 @@
   position: relative;
   top: -30px;
 }
-
 @media (max-width: 1200px) {
   .blog-traffic .img-block-img {
     top: -10px;
   }
 }
-
 @media (max-width: 991px) {
   .blog-traffic .img-block-img {
     width: 15%;
   }
 }
-
 @media (max-width: 767px) {
   .blog-traffic .img-block-img {
     width: 20%;
     top: 5px;
   }
 }
-
 @media (max-width: 490px) {
   .blog-traffic .img-block-img {
     top: 15px;
   }
 }
-
 @media (max-width: 414px) {
   .blog-traffic .img-block-img {
     top: 22px;
   }
 }
-
 @media (max-width: 1200px) {
   .blog-traffic .img-first {
     top: 0;
   }
 }
-
 @media (max-width: 767px) {
   .blog-traffic .img-first {
     top: 15px;
   }
 }
-
 @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;
   }
 }
-
 @media (max-width: 767px) {
   .blog-traffic .add-img {
     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;
@@ -1213,7 +1141,6 @@
 #seo-dm {
   overflow: hidden;
 }
-
 #seo-dm .stock-01 {
   position: absolute;
   z-index: -1;
@@ -1221,67 +1148,72 @@
   top: -180px;
   left: -300px;
 }
-
 #seo-dm .bg-img {
   width: 50%;
   position: absolute;
   right: -50px;
   z-index: -1;
 }
-
 #seo-dm .block-content {
   margin-left: -35px;
 }
-
 #seo-dm .block-content h3 {
   color: #f6ab1c;
   font-size: 2.2rem;
   font-weight: bold;
 }
-
+@media (max-width: 991px) {
+  #seo-dm .block-content h3 {
+    font-size: 1.8rem;
+  }
+}
+@media (max-width: 575px) {
+  #seo-dm .block-content h3 {
+    font-size: 1.5rem;
+  }
+}
 #seo-dm .block-content p {
   color: #656565;
   font-weight: bold;
 }
+#seo-dm .block-content .block-title {
+  margin-bottom: 20px;
+}
+@media (max-width: 575px) {
+  #seo-dm .block-content .block-title {
+    margin-bottom: 0;
+  }
+}
 
 /* seo End */
 /* youtube-views Start */
 #youtube-views {
   overflow-x: hidden;
 }
-
 #youtube-views h5 {
   line-height: 32px;
 }
-
 #youtube-views .title {
   color: #ea5413;
   font-size: 1.3rem;
   font-weight: bold;
 }
-
 #youtube-views .header-right {
   background-position: center;
 }
-
 #youtube-views .card-group {
   margin-top: 50px;
 }
-
 #youtube-views .card-group .card {
-  -webkit-box-shadow: 0 0 10px #20202040;
-          box-shadow: 0 0 10px #20202040;
+  box-shadow: 0 0 10px rgba(32, 32, 32, 0.2509803922);
 }
-
 #youtube-views .card-group .card ul {
   padding: 0;
   list-style: none;
 }
-
 #youtube-views .card-group .card ul img {
   margin-bottom: 1px;
 }
-
 #youtube-views .card-group .card .price {
   width: 100%;
   padding: 10px 0;
@@ -1292,82 +1224,64 @@
   background-color: #ea5413;
   letter-spacing: 2px;
 }
-
 #youtube-views .card-group .card .buy-btn {
   padding: 10px 20px;
   color: #fff;
   border: 1px solid transparent;
   border-radius: 50px;
   background: #ea5413;
-  -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
-
 #youtube-views .card-group .card .buy-btn:hover {
   color: #ea5413;
   border: 1px solid #ea5413;
   background: #fff;
 }
-
 #youtube-views .card-group .paypal-content {
   margin: 0 20px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
-
 #youtube-views .direction-list {
   margin-top: 100px;
 }
-
 #youtube-views .direction-list img {
   width: 50px;
   -o-object-fit: contain;
      object-fit: contain;
-  -webkit-filter: invert(33%) sepia(55%) saturate(2232%) hue-rotate(357deg) brightness(102%) contrast(89%);
-          filter: invert(33%) sepia(55%) saturate(2232%) hue-rotate(357deg) brightness(102%) contrast(89%);
+  filter: invert(33%) sepia(55%) saturate(2232%) hue-rotate(357deg) brightness(102%) contrast(89%);
 }
-
 #youtube-views .direction-list .content > div {
   margin-bottom: 40px;
   padding: 0px 15px;
   border-left: 1px solid rgba(0, 0, 0, 0.125);
   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
 }
-
 #youtube-views .direction-list section h5 {
   margin: 0;
   font-size: 18px;
   font-weight: bold;
 }
-
 #youtube-views .direction-list section p {
   font-size: 14px;
 }
-
 #youtube-views .accordion-button {
   padding: 20px;
 }
-
 #youtube-views .accordion-button:not(.collapsed) {
   color: #ea5413 !important;
   background-color: #ffebe2 !important;
 }
-
 #youtube-views button:focus:not(:focus-visible) {
-  -webkit-box-shadow: none !important;
-          box-shadow: none !important;
+  box-shadow: none !important;
 }
-
 #youtube-views .accordion-button:not(.collapsed)::after {
   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 {
     padding-top: 6rem;
   }
 }
-
 @media (max-width: 575px) {
   #youtube-views .category.dm-description {
     padding-top: 14rem;
@@ -1379,37 +1293,30 @@
 .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;
@@ -1417,7 +1324,6 @@
     left: 210px;
   }
 }
-
 @media (max-width: 1200px) {
   .seo-image .line {
     width: 880px;
@@ -1425,80 +1331,67 @@
     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 {
+.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;
@@ -1516,30 +1409,25 @@
 .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 */
+/* 共用 className End *//*# sourceMappingURL=style.css.map */

static/css/style.scss

@@ -1157,11 +1157,23 @@
       color: #f6ab1c;
       font-size: 2.2rem;
       font-weight: bold;
+      @media (max-width: 991px) {
+        font-size: 1.8rem;
+      }
+      @media (max-width: 575px) {
+        font-size: 1.5rem;
+      }
     }
     p {
       color: #656565;
       font-weight: bold;
     }
+    .block-title {
+      margin-bottom: 20px;
+      @media (max-width: 575px) {
+        margin-bottom: 0;
+      }
+    }
   }
 }
 

webSite/config.toml

@@ -42,38 +42,38 @@ page = ["HTML"]
     weight = 1
     parent = "home"
 
-[[menu.main]]
-    identifier="video-making"
-    name = "影片製作服務"
-    url = "/video-making/dm/"
-    weight = 2
-    parent = "home"
-
 [[menu.main]]
     identifier="bigdata"
     name = "大數據分析"
     url = "/bigdata/dm/"
-    weight = 3
+    weight = 2
     parent = "home"
 
 [[menu.main]]
     identifier="crawler"
     name = "資訊爬蟲"
     url = "/crawler/dm/"
-    weight = 4
+    weight = 3
     parent = "home"
 
 [[menu.main]]
     identifier="research"
     name = "企業系統研發委外"
     url = "/research/dm/"
-    weight = 5
+    weight = 4
     parent = "home"
 
 [[menu.main]]
-    identifier="seo"
+    identifier="seo-search"
     name = "SEO 搜尋排名優化"
     url = "/seo/dm/"
+    weight = 5
+    parent = "home"
+    
+[[menu.main]]
+    identifier="video-making"
+    name = "影片製作服務"
+    url = "/video-making/dm/"
     weight = 6
     parent = "home"