update

layouts/seo/single.html

@@ -50,7 +50,7 @@
               <img src="/imgs/dm/stock-img-02.png" alt="" class="img-fluid">
             </div>
             <div class="col-10 block-content">
-              <h3 class="block-title">
+              <h3 class="block-title mb-3">
                 {{ .Params.block1_title }}
               </h3>
               <p class="m-0">{{ .Params.block1_text }}</p>
@@ -101,87 +101,58 @@
           </div>
         </div>
       </div>
-    </div>
-
 
-    <!-- <section class="header">
-      <img src="/imgs/01.webp" alt="" class="header-lefttop">
-      <div class="row align-items-center g-0">
-        <div class="col-12 col-md-5 text-center ">
-          <h2 class="header-title">{{ .Params.packageTitle }}</h2>
-          <p class="text-center px-3">{{ .Params.packageSub }}
-          <p>
-            <button class="contact-btn" onclick="window.location.href=`/contact/service/`">立即諮詢</button>
-        </div>
-        <div class="col-12 col-md-7">
-          <div class="header-right header-dm" style="background-image: url('https://i.imgur.com/ApmF3a9.jpg');">
-            <img src="/imgs/02.webp" alt="" class="header-right-cir">
-            <img class="header-right-bubble" src="/imgs/對話.webp" alt="">
-            <img class="header-right-linecir" src="/imgs/裝飾圓.webp" alt="">
+      <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="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 mb-3">
+                {{ .Params.block4_title }}
+              </h3>
+              <p>
+                {{ .Params.block4_text1 }}
+                <br>
+                {{ .Params.block4_text2 }}
+                <br>
+                {{ .Params.block4_text3 }}
+              </p>
+            </div>
           </div>
         </div>
-      </div>
-    </section> -->
-    <!-- <section class="category container text-center py-5 dm-description">
-      <h2 class="category-sub-h2"></h2>
-      <h5 style="font-weight: 300;">{{ .Params.description }}</h5>
-    </section> -->
-    <!-- <section class="category container text-center img-block">
-      <div class="row row-cols-1 row-cols-md-2">
-        <div class="col position-relative">
-          <img class="img-block-img " src="{{ .Params.block1_img }}" alt="">
-          <img class="img-block-linecir left" src="/imgs/裝飾圓.webp" alt="">
-        </div>
-        <div class="col my-auto pt-3 pt-md-0">
-          <h4>{{ .Params.block1_title }}</h4>
-          <strong>{{ .Params.block1_strong }}</strong>
-          <p>{{ .Params.block1_text | markdownify }}</p>
+        <div class="col-6">
+          <img src="{{ .Params.block4_img }}" alt="" class="img-fluid">
         </div>
       </div>
-    </section> -->
-    <!-- <section class="category container text-center img-block">
-            <div class="row row-cols-1 row-cols-md-2">
-                <div class="col my-auto">
-                  <h4>{{ .Params.block2_title }}</h4>
-                  <strong>{{ .Params.block2_strong }}</strong>
-                  <p>{{ .Params.block2_text | markdownify }}</p>
-                </div>
-                <div class="col position-relative">
-                  <img class="img-block-img" src="{{ .Params.block2_img }}" alt="">
-                  <img class="img-block-linecir right" src="/imgs/裝飾圓.webp" alt="">
-              </div>
+
+      <div class="row align-items-center" style="margin: 150px auto 0;">
+        <div class="col-12">
+          <div class="row align-items-center">
+            <div class="col-2">
+              <img src="/imgs/dm/stock-img-02.png" alt="" class="img-fluid">
             </div>
-          </section>
-          <section class="category container text-center img-block">
-            <div class="row row-cols-1 row-cols-md-2">
-                <div class="col position-relative">
-                    <img class="img-block-img" src="{{ .Params.block3_img }}" alt="">
-                    <img class="img-block-linecir left" src="/imgs/裝飾圓.webp" alt="">
-                </div>
-                <div class="col my-auto">
-                  <h4>{{ .Params.block3_title }}</h4>
-                  <strong>{{ .Params.block3_strong }}</strong>
-                  <p>{{ .Params.block3_text | markdownify }}</p>
-                </div>
+            <div class="col-8 block-content">
+              <h3 class="block-title mb-3">
+                {{ .Params.block5_title }}
+              </h3>
+              <p>
+                {{ .Params.block5_text1 }}
+                <br>
+                成效有感：
+                <br>
+                {{ .Params.block5_text2 }}
+                <br>
+                {{ .Params.block5_text3 }}
+              </p>
             </div>
-          </section> -->
-    <!-- <section class="category container text-center img-block">
-      <div class="row row-cols-1 row-cols-md-2">
-        <div class="col my-auto pt-3 pt-md-0">
-          <h4>{{ .Params.block4_title }}</h4>
-          <strong>{{ .Params.block4_strong }}</strong>
-          <ul class="text-start img-block-list">
-            <li>{{ .Params.block4_list1 }}</li>
-            <li>{{ .Params.block4_list2 }}</li>
-            <li>{{ .Params.block4_list3 }}</li>
-          </ul>
-        </div>
-        <div class="col position-relative">
-          <img class="img-block-img" src="{{ .Params.block4_img }}" alt="">
-          <img class="img-block-linecir right" src="/imgs/裝飾圓.webp" alt="">
+          </div>
         </div>
       </div>
-    </section> -->
+    </div>
+    
     <div class="container loaded pageForm pt-5">
       <div class="row">
         <div class="col-12 col-md-6">

static/css/style.css

@@ -4,13 +4,16 @@
 }
 
 .navbar {
-  box-shadow: 0 2px 10px 2px rgb(204, 204, 204);
+  -webkit-box-shadow: 0 2px 10px 2px #cccccc;
+          box-shadow: 0 2px 10px 2px #cccccc;
   background-color: white;
   width: 100%;
 }
 
 .navbar .navbar-collapse {
-  flex-grow: 0;
+  -webkit-box-flex: 0;
+      -ms-flex-positive: 0;
+          flex-grow: 0;
 }
 
 .header {
@@ -59,7 +62,9 @@
 
 .header__form {
   margin: 1rem auto;
-  justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
 }
 
 .header__form__input {
@@ -75,7 +80,9 @@
   color: white;
   border: none;
   width: 5rem;
-  transform: translateX(-100%);
+  -webkit-transform: translateX(-100%);
+          transform: translateX(-100%);
+  -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
 
@@ -107,7 +114,7 @@
 
 .header-right__video {
   position: absolute;
-  width: 70%;
+  width: calc(80% - 10%);
   height: auto;
   left: 3.3rem;
   top: 1.8rem;
@@ -125,7 +132,8 @@
   width: 22%;
   top: 0;
   left: 0;
-  transform: translate(-60%, -50%);
+  -webkit-transform: translate(-60%, -50%);
+          transform: translate(-60%, -50%);
 }
 
 .header-right-linecir {
@@ -140,6 +148,7 @@
 .footer {
   color: #656565;
 }
+
 .footer .footer-contacts {
   margin-top: 2rem;
   line-height: 32px;
@@ -249,17 +258,20 @@
     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;
@@ -289,7 +301,8 @@
   border-bottom: 10px solid #ff892e;
   left: 50%;
   top: -1.5rem;
-  transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
 }
 
 .category-btngrp {
@@ -315,7 +328,8 @@
 
 .card__rank {
   border: 1px solid #cecece;
-  box-shadow: 1px 1px 5px 1px rgb(211, 211, 211);
+  -webkit-box-shadow: 1px 1px 5px 1px lightgray;
+          box-shadow: 1px 1px 5px 1px lightgray;
   position: relative;
   padding: 1rem 1.5rem;
 }
@@ -462,7 +476,8 @@
 
 .toparticle {
   border: 1px solid #cecece;
-  box-shadow: 1px 2px 3px 1px rgb(224, 224, 224);
+  -webkit-box-shadow: 1px 2px 3px 1px #e0e0e0;
+          box-shadow: 1px 2px 3px 1px #e0e0e0;
 }
 
 .toparticle__title {
@@ -589,7 +604,7 @@
 }
 
 .aboutus_prize_img {
-  border: 1.5rem solid rgb(231, 231, 231);
+  border: 1.5rem solid #e7e7e7;
   border-radius: 1rem;
 }
 
@@ -599,7 +614,7 @@
   padding: 1rem;
   display: inline-block;
   font-size: 1.4rem;
-  background-color: rgb(255, 255, 159);
+  background-color: #ffff9f;
   border-radius: 50%;
 }
 
@@ -617,7 +632,10 @@
 }
 
 .ai-training__action__box {
-  flex-direction: row;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
 }
 
 .ai-training__action__btn {
@@ -649,7 +667,8 @@
   background: linear-gradient(20deg, #ea5413, #920783);
   color: white;
   font-size: 1.1rem;
-  box-shadow: 1px 1px 5px 1px rgba(207, 207, 207, 0.53);
+  -webkit-box-shadow: 1px 1px 5px 1px #cfcfcf87;
+          box-shadow: 1px 1px 5px 1px #cfcfcf87;
 }
 
 .contact-btn {
@@ -661,9 +680,12 @@
   background-color: #ea5413;
   margin-top: 0.5rem;
   border-radius: 3rem;
-  box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
+  -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;
   transition: all 0.3s;
 }
+
 .contact-btn:hover {
   color: #ea5413;
   background-color: transparent;
@@ -671,7 +693,8 @@
 }
 
 .loaded {
-  box-shadow: 0 4px 8px 0 rgba(53, 105, 128, 0.3), 0 6px 20px 0 rgba(165, 200, 213, 0.41);
+  -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;
   margin-bottom: 4rem;
 }
 
@@ -707,12 +730,14 @@
   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 {
-  transform: translate(2px, 2px);
+  -webkit-transform: translate(2px, 2px);
+          transform: translate(2px, 2px);
   text-decoration: none;
   color: #ff892e;
 }
@@ -720,9 +745,10 @@
 @media (max-width: 1300px) {
   .header-right__video {
     position: absolute;
-    width: 76%;
+    width: calc(80% - 4%);
   }
 }
+
 @media (max-width: 992px) {
   .header-title {
     font-size: 3rem;
@@ -741,7 +767,7 @@
     font-size: 1.3rem;
   }
   .header__sub::before,
-.header__sub::after {
+  .header__sub::after {
     width: 8%;
   }
   .header__sub::before {
@@ -802,7 +828,8 @@
     width: 100%;
   }
   .header__form__sub {
-    transform: none;
+    -webkit-transform: none;
+            transform: none;
     position: absolute;
     right: 0;
     top: 0;
@@ -835,9 +862,13 @@
     width: 100%;
   }
   .ai-training__action__box {
-    flex-direction: column;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
   }
 }
+
 @media (max-width: 767px) {
   .header .col-md-5 {
     margin-bottom: 3rem;
@@ -885,7 +916,7 @@
   }
   .header-right__video {
     position: absolute;
-    width: 70%;
+    width: calc(80% - 10%);
     left: 2.3rem;
     top: 1.5rem;
   }
@@ -896,6 +927,7 @@
     height: 50vh;
   }
 }
+
 @media (max-width: 576px) {
   .header-title {
     font-size: 2.5rem;
@@ -930,36 +962,42 @@
     width: 95%;
   }
 }
+
 @media (max-width: 480px) {
   .ctncategory-btn {
     margin-top: 0.6rem;
   }
   .header-right__video {
     position: absolute;
-    width: 75%;
+    width: calc(80% - 5%);
     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;
@@ -968,6 +1006,7 @@
   right: 30px;
   z-index: -1;
 }
+
 @media (max-width: 767px) {
   .blog-traffic .header-img {
     width: 100%;
@@ -975,67 +1014,82 @@
     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;
@@ -1044,92 +1098,110 @@
   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;
@@ -1141,6 +1213,7 @@
 #seo-dm {
   overflow: hidden;
 }
+
 #seo-dm .stock-01 {
   position: absolute;
   z-index: -1;
@@ -1148,14 +1221,24 @@
   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;
 }
+
 #seo-dm .block-content p {
   color: #656565;
   font-weight: bold;
@@ -1166,30 +1249,39 @@
 #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 {
-  box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
+  -webkit-box-shadow: 0 0 10px #20202040;
+          box-shadow: 0 0 10px #20202040;
 }
+
 #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;
@@ -1200,64 +1292,82 @@
   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;
-  box-shadow: none;
+  -webkit-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;
-  filter: invert(33%) sepia(55%) saturate(2232%) hue-rotate(357deg) brightness(102%) contrast(89%);
+  -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%);
 }
+
 #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) {
-  box-shadow: none !important;
+  -webkit-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;
@@ -1269,30 +1379,37 @@
 .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;
@@ -1300,6 +1417,7 @@
     left: 210px;
   }
 }
+
 @media (max-width: 1200px) {
   .seo-image .line {
     width: 880px;
@@ -1307,67 +1425,80 @@
     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;
@@ -1385,25 +1516,30 @@
 .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

@@ -668,7 +668,7 @@
   background: linear-gradient(20deg, #ea5413, #920783);
   color: white;
   font-size: 1.1rem;
-  box-shadow: 1px 1px 5px 1px rgb(207, 207, 207, 0.53);
+  box-shadow: 1px 1px 5px 1px #cfcfcf87;
 }
 
 .contact-btn {
@@ -690,7 +690,7 @@
 }
 
 .loaded {
-  box-shadow: 0 4px 8px 0 rgb(53, 105, 128, 0.3), 0 6px 20px 0 rgb(165, 200, 213, 0.41);
+  box-shadow: 0 4px 8px 0 #3569804d, 0 6px 20px 0 #a5c8d569;
   margin-bottom: 4rem;
 }
 .pageForm-title {
@@ -1145,6 +1145,12 @@
     top: -180px;
     left: -300px;
   }
+  .bg-img {
+    width: 50%;
+    position: absolute;
+    right: -50px;
+    z-index: -1;
+  }
   .block-content {
     margin-left: -35px;
     h3 {
@@ -1179,7 +1185,7 @@
   .card-group {
     margin-top: 50px;
     .card {
-      box-shadow: 0 0 10px rgb(32 32 32 / 25%);
+      box-shadow: 0 0 10px #20202040;
       ul {
         padding: 0;
         list-style: none;

webSite/content/seo/dm.md

@@ -31,8 +31,15 @@ block3_img2 = "/imgs/dm/seo-04.png"
 
 block4_title = "獨家 SEO 顯微鏡健檢服務"
 block4_strong = ""
-block4_list1 = "盤點網頁結構、速度"
-block4_list2 = "精準抓取目標受眾關鍵字群組"
-block4_list3 = "提出 SEO 改善建議，協同逐項優化，推動排名向前"
+block4_text1 = "盤點網頁結構、速度"
+block4_text2 = "精準抓取目標受眾關鍵字群組"
+block4_text3 = "提出 SEO 改善建議，協同逐項優化，推動排名向前"
 block4_img = "/imgs/dm/seo-05.png"
+
+block5_title = "成效報告：自動化截圖 + LINE 及時推播"
+block5_strong = ""
+block5_text1 = "全自動化程式跑截圖，大量資料的SEO關鍵字組截圖"
+block5_text2 = "曾一週內協助客戶官網在 google search 百名外的排名，其中四組衝刺到百名內，最高提升 88 名。"
+block5_text3 = "第二週關鍵字組持續推升排名，排名優異的關鍵字組，持續維持保持前十。"
+block5_img = ""
 +++