test like

index.html

@@ -418,6 +418,50 @@
         </div>
       </div>
     </section>
+    <!-- <section class="sec-guessLike">
+      <h3 class="px-3 pb-1">猜你喜歡</h3>
+      <div class="container-fluid" style="padding: 0 15px;margin:0;">
+        <h4 class="sec-guessLike__title">影音</h4>
+        <div class="row">
+          <div class="col mb-3">
+            <div class="sec-guessLike__img mb-2">
+            </div>
+            <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
+          </div>
+          <div class="col mb-3">
+            <div class="sec-guessLike__img mb-2">
+            </div>
+            <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
+          </div>
+        </div>
+        <h4 class="sec-guessLike__title">個案</h4>
+        <div class="row">
+          <div class="col mb-3">
+            <div class="sec-guessLike__img mb-2">
+            </div>
+            <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
+          </div>
+          <div class="col mb-3">
+            <div class="sec-guessLike__img mb-2">
+            </div>
+            <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
+          </div>
+        </div>
+        <h4 class="sec-guessLike__title">專欄</h4>
+        <div class="row">
+          <div class="col mb-3">
+            <div class="sec-guessLike__img mb-2">
+            </div>
+            <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
+          </div>
+          <div class="col mb-3">
+            <div class="sec-guessLike__img mb-2">
+            </div>
+            <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
+          </div>
+        </div>
+      </div>
+    </section> -->
     <div class="fixed-btn">
       <!-- <div class="btn-gotop mb-2">
         <img src="images/gotop.png" width="28" alt="">

sass/main.css

@@ -539,6 +539,41 @@ body {
   font-size: 14px;
 }
 
+.sec-guessLike__title {
+  display: block;
+  text-align: center;
+  position: relative;
+}
+
+.sec-guessLike__title::before, .sec-guessLike__title::after {
+  position: absolute;
+  content: " ";
+  width: 40%;
+  height: 0rem;
+  border-top: 1px solid black;
+  top: 50%;
+}
+
+.sec-guessLike__title::before {
+  left: 0;
+}
+
+.sec-guessLike__title::after {
+  left: 60%;
+}
+
+.sec-guessLike__img {
+  height: 14vh;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-image: url("https://images.hhh.com.tw/uploads/_hcase_orig/designer355_14_02.jpg");
+}
+
+.sec-guessLike__txt {
+  font-size: 14px;
+}
+
 .morelink {
   text-decoration: none;
   color: #EE7800;

sass/main.scss

@@ -458,6 +458,38 @@ body {
     }
 }
 
+.sec-guessLike {
+    &__title {
+        display: block;
+        text-align: center;
+        position: relative;
+        &::before, &::after {
+            position: absolute;
+            content: " ";
+            width: 40%;
+            height: 0rem;
+            border-top: 1px solid black;
+            top: 50%;
+        }
+        &::before {
+            left: 0;
+        }
+        &::after {
+            left: 60%;
+        }
+    }
+    &__img {
+        height: 14vh;
+        background-position: center center;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-image: url('https://images.hhh.com.tw/uploads/_hcase_orig/designer355_14_02.jpg');
+    }
+    &__txt {
+        font-size: 14px;
+    }
+}
+
 .more {
     &link {
         text-decoration: none;