update

hhh_index/css/style.css

@@ -142,17 +142,16 @@ body {
 .sec-00-bulletList {
   position: absolute;
   bottom: 10px;
-  left: calc(50% - 650px);
   width: 1300px;
+  max-width: 100%;
   box-sizing: border-box;
   display: flex;
   z-index: 10;
   background-color: rgba(0, 0, 0, 0.1);
 }
-@media (max-width: 576px) {
+@media (max-width: 991px) {
   .sec-00-bulletList {
-    width: 100%;
-    left: 0px;
+    bottom: 0;
   }
 }
 .sec-00-bullet {
@@ -2709,6 +2708,36 @@ iframe {
 .top-card a span {
   background-color: var(--sub-color);
 }
+.top-card .bag-btn {
+  color: var(--sub-color) !important;
+}
+.top-card .bag-btn:hover {
+  color: #fff !important;
+}
+.top-card .bag-btn:hover section img {
+  transition: all 0.5s;
+}
+.top-card .bag-btn:hover section img:last-child {
+  opacity: 1;
+}
+.top-card .bag-btn section {
+  width: 20px;
+  position: relative;
+}
+.top-card .bag-btn section img {
+  width: 15px;
+  text-shadow: 1px 2px 4px rgb(188, 84, 6);
+  top: -10px;
+  left: -2px;
+  position: absolute;
+}
+.top-card .bag-btn section img:first-child {
+  filter: invert(46%) sepia(79%) saturate(779%) hue-rotate(350deg) brightness(98%) contrast(91%);
+}
+.top-card .bag-btn section img:last-child {
+  opacity: 0;
+  filter: invert(100%) sepia(2%) saturate(0%) hue-rotate(21deg) brightness(107%) contrast(101%);
+}
 
 .center-card a:hover {
   color: #fff;
@@ -3196,9 +3225,27 @@ iframe {
   transform: scale(1) !important;
 }
 .popular-slider .designer-item h2 {
+  width: 12vw;
   font-size: 16px;
-  margin: 5px 0 0 10px;
+  margin: 10px 0 0 10px;
   color: #707070;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-break: after-white-space;
+  transition: all 0.2s;
+}
+@media (max-width: 1200px) {
+  .popular-slider .designer-item h2 {
+    width: 9vw;
+  }
+}
+@media (max-width: 991px) {
+  .popular-slider .designer-item h2 {
+    width: 22vw;
+  }
 }
 
 .video-slider section {

hhh_index/css/style.scss

@@ -159,16 +159,16 @@ body {
   &-bulletList {
     position: absolute;
     bottom: 10px;
-    left: calc(50% - 650px);
+    // left: calc(50% - 650px);
     width: 1300px;
+    max-width: 100%;
     box-sizing: border-box;
     display: flex;
     z-index: 10;
     background-color: rgba(0, 0, 0, 0.1);
 
-    @media (max-width:576px) {
-      width: 100%;
-      left: 0px;
+    @media (max-width: 991px) {
+      bottom: 0;
     }
   }
 
@@ -3365,6 +3365,7 @@ iframe {
         color: #fff;
         text-shadow: 1px 2px 4px rgb(188 84 6);
         background-color: transparent !important;
+
         span {
           width: 225%;
           height: 500%;
@@ -3378,10 +3379,50 @@ iframe {
 .top-card {
   a {
     span {
-      // background-color: #f5d2b7; // 測試
+      // background-color: #f5d2b7;
       background-color: var(--sub-color);
     }
   }
+
+  .bag-btn {
+    color: var(--sub-color) !important;
+
+    &:hover {
+      color: #fff !important;
+
+      section {
+        img {
+          transition: all .5s;
+
+          &:last-child {
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    section {
+      width: 20px;
+      position: relative;
+
+      img {
+        width: 15px;
+        text-shadow: 1px 2px 4px rgb(188, 84, 6);
+        top: -10px;
+        left: -2px;
+        position: absolute;
+
+        &:first-child {
+          filter: invert(46%) sepia(79%) saturate(779%) hue-rotate(350deg) brightness(98%) contrast(91%);
+        }
+
+        &:last-child {
+          opacity: 0;
+          filter: invert(100%) sepia(2%) saturate(0%) hue-rotate(21deg) brightness(107%) contrast(101%);
+        }
+      }
+    }
+  }
 }
 
 .center-card {
@@ -3913,9 +3954,25 @@ iframe {
     }
 
     h2 {
+      width: 12vw;
       font-size: 16px;
-      margin: 5px 0 0 10px;
+      margin: 10px 0 0 10px;
       color: #707070;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      line-break: after-white-space; // for safari
+      transition: all .2s;
+
+      @media (max-width: 1200px) {
+        width: 9vw;
+      }
+
+      @media (max-width: 991px) {
+        width: 22vw;
+      }
     }
   }
 }
@@ -3987,7 +4044,7 @@ iframe {
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
-        -webkit-line-clamp: 1; // 超過兩行則省略
+        -webkit-line-clamp: 1; // 超過則省略
         -webkit-box-orient: vertical;
         line-break: after-white-space; // for safari
         transition: all .2s;

hhh_index/images/icon/bag-shopping-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M160 112c0-35.3 28.7-64 64-64s64 28.7 64 64v48H160V112zm-48 48H48c-26.5 0-48 21.5-48 48V416c0 53 43 96 96 96H352c53 0 96-43 96-96V208c0-26.5-21.5-48-48-48H336V112C336 50.1 285.9 0 224 0S112 50.1 112 112v48zm24 48a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm152 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"/></svg>

index_used.html

@@ -152,7 +152,12 @@
           <a href="https://hhh.com.tw/about/calculator/" target="_blank">預估裝修費用<span></span></a>
         </div>
         <div class="col-6 col-md-3">
-          <a href="https://shop.hhh.com.tw/" target="_blank">嚴選好物<span></span></a>
+          <a href="https://shop.hhh.com.tw/" target="_blank" class="bag-btn">
+            <section>
+              <img src="./hhh_index/images/icon/bag-shopping-solid.svg" alt="嚴選好物">
+              <img src="./hhh_index/images/icon/bag-shopping-solid.svg" alt="嚴選好物">
+            </section>
+             嚴選好物<span></span></a>
         </div>
       </div>