SyuanYu преди 5 месеца
родител
ревизия
a1db079269
променени са 11 файла, в които са добавени 6489 реда и са изтрити 24 реда
  1. 2 2
      builder/detail/index.html
  2. 1036 0
      css/index.css
  3. 0 0
      css/index.css.map
  4. 1154 0
      css/index.scss
  5. 315 0
      css/slick.css
  6. 2260 0
      hhh_index.html
  7. 0 14
      index.html
  8. 1639 0
      js/index.js
  9. 75 0
      json/index-slider.json
  10. 6 6
      template/button.html
  11. 2 2
      template/navbar.html

+ 2 - 2
builder/detail/index.html

@@ -56,7 +56,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600&display=swap" rel="stylesheet" />
   <!-- Slick -->
-  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
+  <!-- <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> -->
   <!-- Swiper -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
   <!-- Lightgallery -->
@@ -253,7 +253,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
 
   <!-- Slick -->
-  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+  <!-- <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> -->
   <!-- Swiper JS -->
   <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
   <!-- Bootstrap -->

+ 1036 - 0
css/index.css

@@ -0,0 +1,1036 @@
+@charset "UTF-8";
+:root {
+  --main-color: #34404b;
+  --sub-color: #ee751b;
+}
+
+.info-item .logo-img {
+  position: absolute;
+  z-index: 10;
+  top: 20px;
+  left: 50px;
+}
+@media (max-width: 991px) {
+  .info-item .logo-img {
+    left: 100px;
+  }
+}
+@media (max-width: 767px) {
+  .info-item .logo-img {
+    top: 5%;
+    right: 0;
+    left: -65%;
+  }
+}
+.info-item .logo-img img {
+  width: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.info-item .logo-img .img-designer {
+  height: 50px;
+}
+@media (max-width: 767px) {
+  .info-item .logo-img .img-designer {
+    height: 40px;
+  }
+}
+@media (max-width: 575px) {
+  .info-item .logo-img .img-designer {
+    height: 26px;
+  }
+}
+.info-item .logo-img .img-renovation {
+  height: 60px;
+}
+.info-item .logo-img .img-glory {
+  height: 70px;
+}
+@media (max-width: 767px) {
+  .info-item .logo-img .img-glory,
+  .info-item .logo-img .img-renovation {
+    height: 60px;
+  }
+}
+@media (max-width: 575px) {
+  .info-item .logo-img .img-glory,
+  .info-item .logo-img .img-renovation {
+    height: 34px;
+    margin-left: -4vw;
+  }
+}
+.info-item section {
+  position: absolute;
+  z-index: 10;
+  bottom: 70px;
+  left: 70px;
+  color: #fff;
+  text-shadow: 1px 1px 4px #333;
+}
+@media (max-width: 991px) {
+  .info-item section {
+    left: 14%;
+    bottom: 10%;
+  }
+}
+@media (max-width: 767px) {
+  .info-item section {
+    left: 6%;
+    bottom: 6%;
+  }
+}
+.info-item section h3 {
+  margin-bottom: 1rem;
+  font-size: 18px;
+}
+@media (max-width: 767px) {
+  .info-item section h3 {
+    display: none;
+  }
+}
+.info-item section div {
+  display: flex;
+  border: 1px solid #fff;
+}
+@media (max-width: 767px) {
+  .info-item section div {
+    flex-direction: column;
+  }
+}
+.info-item section div h2 {
+  margin: auto;
+  margin-left: 0;
+  padding: 5px 30px;
+  font-size: 26px;
+}
+@media (max-width: 575px) {
+  .info-item section div h2 {
+    font-size: 18px;
+    margin: 0;
+    text-align: center;
+  }
+}
+.info-item section div h2:first-child {
+  padding-bottom: 8px;
+  background-color: rgba(237, 237, 237, 0.3);
+}
+.info-item section div h2:last-child {
+  font-size: 24px;
+}
+@media (max-width: 575px) {
+  .info-item section div h2:last-child {
+    font-size: 18px;
+  }
+}
+.info-item section div h2:last-child small {
+  font-size: 16px;
+  font-weight: 300;
+}
+@media (max-width: 575px) {
+  .info-item section div h2:last-child small {
+    font-size: 14px;
+  }
+}
+
+.banner-content {
+  max-width: 100%;
+  margin-top: 0.875rem;
+}
+@media (max-width: 991px) {
+  .banner-content {
+    margin-top: 0;
+  }
+}
+.banner-content img {
+  width: 1300px;
+  height: 535px;
+  margin: 0 7px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+@media (max-width: 1200px) {
+  .banner-content img {
+    width: 100%;
+    height: 400px;
+  }
+}
+@media (max-width: 991px) {
+  .banner-content img {
+    height: 50vw;
+  }
+}
+@media (max-width: 767px) {
+  .banner-content img {
+    height: 65vw;
+    width: 93vw;
+  }
+}
+.banner-content .slick-next:before,
+.banner-content .slick-prev:before {
+  content: "" !important;
+}
+.banner-content .slick-next {
+  right: 160px;
+  margin-left: auto;
+}
+@media (max-width: 575px) {
+  .banner-content .slick-next {
+    right: 20px;
+  }
+}
+.banner-content .slick-prev {
+  left: -50px;
+  margin-right: auto;
+}
+@media (max-width: 575px) {
+  .banner-content .slick-prev {
+    left: 20px;
+  }
+}
+.banner-content .slick-next,
+.banner-content .slick-prev {
+  top: 5vw;
+  z-index: 1000;
+}
+.banner-content .slick-next i,
+.banner-content .slick-prev i {
+  opacity: 0.6;
+  font-size: 32px;
+  transition: all 0.3s;
+}
+.banner-content .slick-next:hover i,
+.banner-content .slick-prev:hover i {
+  opacity: 1;
+}
+@media (max-width: 1200px) {
+  .banner-content .slick-next,
+  .banner-content .slick-prev {
+    top: 1vw;
+  }
+}
+.banner-content .slick-next i,
+.banner-content .slick-prev i {
+  padding: 200px 100px;
+}
+.banner-content .slick-dots {
+  bottom: 10px;
+}
+.banner-content .slick-dots li {
+  margin: 0;
+}
+.banner-content .slick-dots li button:before {
+  width: 10px;
+  height: 10px;
+  content: "";
+  opacity: 1;
+  border: 1px solid #fff;
+  border-radius: 100px;
+}
+.banner-content .slick-dots .slick-active button:before {
+  color: #fff;
+  background-color: #fff;
+}
+.banner-content .banner-slider img {
+  filter: brightness(50%);
+}
+.banner-content .slick-now img {
+  filter: brightness(100%) !important;
+}
+.banner-content .slick-slide {
+  position: relative;
+}
+
+@media (max-width: 991px) {
+  .index-content {
+    max-width: 100%;
+  }
+}
+.index-content * {
+  letter-spacing: 0.05em;
+  font-family: "Helvetica";
+}
+.index-content .fas {
+  font-family: Font Awesome\ 5 Free !important;
+}
+.index-content h3 {
+  color: #727272;
+  font-weight: 500;
+  line-height: 22px;
+}
+.index-content h5 {
+  padding: 0 10px;
+  margin-bottom: 20px;
+  font-size: 22px;
+  font-weight: 500;
+  color: var(--main-color);
+}
+.index-content h5 span {
+  color: var(--sub-color);
+}
+.index-content .describe {
+  padding-top: 50px;
+  margin: 25px 0;
+  font-size: 32px;
+  font-weight: 500;
+  text-align: center;
+  color: #34404b;
+  line-height: 1.3em;
+  border-top: 1px solid #989898;
+}
+.index-content .describe span {
+  color: var(--sub-color);
+}
+@media (max-width: 991px) {
+  .index-content .describe {
+    padding-top: 1.3rem;
+  }
+}
+@media (max-width: 767px) {
+  .index-content .describe {
+    font-size: 25px;
+  }
+}
+.index-content .card-item {
+  padding: 0 10px;
+  margin-top: 1.3rem;
+}
+.index-content .card-item a {
+  height: 90px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 500;
+  text-align: center;
+  color: #727272;
+  background-color: #ededed;
+  border-radius: 5px;
+  transition: all 0.3s;
+  line-height: 1.2rem;
+}
+@media (max-width: 767px) {
+  .index-content .card-item a {
+    height: 60px;
+    margin-bottom: 16px;
+  }
+}
+.index-content .top-card a,
+.index-content .center-card a {
+  position: relative;
+  overflow: hidden;
+}
+.index-content .top-card a span,
+.index-content .center-card a span {
+  position: absolute;
+  display: block;
+  width: 0px;
+  height: 0px;
+  border-radius: 100%;
+  transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+}
+.index-content .top-card a:hover,
+.index-content .center-card a:hover {
+  color: #fff;
+  background-color: transparent !important;
+}
+.index-content .top-card a:hover span,
+.index-content .center-card a:hover span {
+  width: 225%;
+  height: 500%;
+}
+.index-content .topic-content .img-box {
+  border-radius: 5px;
+  overflow: hidden;
+}
+.index-content .topic-content .slick-track {
+  margin: 0;
+  display: flex;
+  justify-content: space-around;
+}
+@media (max-width: 575px) {
+  .index-content .topic-content .slick-track {
+    justify-content: start;
+  }
+}
+.index-content .designer-content h3 {
+  margin: 10px auto 5px;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  line-break: after-white-space;
+}
+@media (max-width: 575px) {
+  .index-content .designer-content h3 {
+    width: 160px;
+  }
+}
+.index-content .designer-content .name {
+  margin-top: 5px;
+  display: block;
+  font-size: 16px;
+  font-weight: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-break: after-white-space;
+}
+.index-content .designer-content .name small {
+  font-size: 12px;
+}
+.index-content .designer-content .slide-item {
+  -o-object-position: top;
+     object-position: top;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.index-content .designer-content .slick-slide {
+  margin: 0 15px;
+}
+.index-content .designer-content section {
+  position: relative;
+}
+.index-content .designer-content section .slide-img {
+  display: block;
+  margin: 0 auto 15px;
+  height: 130px;
+  width: 130px;
+  border-radius: 100px;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
+  transition: 0.3s all ease-in;
+  overflow: unset;
+}
+.index-content .designer-content section .slide-img a {
+  display: block;
+  position: relative;
+}
+.index-content .designer-content section .slide-img img {
+  height: 130px;
+  width: 130px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 100px;
+  transform: scale(1) !important;
+}
+.index-content .designer-content section .slide-img img:hover {
+  transform: scale(1) !important;
+}
+.index-content .designer-content section .slide-img:hover .img-border {
+  opacity: 1 !important;
+}
+.index-content .designer-content section .slide-img .img-border {
+  opacity: 0;
+  display: block;
+  border: 2px solid var(--sub-color);
+  width: 140px;
+  height: 140px;
+  position: absolute;
+  top: -5px;
+  left: -5px;
+  border-radius: 100px;
+  z-index: 100;
+  transition: opacity 0.35s cubic-bezier(0.4, 0.8, 0.74, 1) 0s, transform 0.35s cubic-bezier(0.26, 1, 0.48, 1) 0s;
+}
+.index-content .designer-content .slick-track {
+  padding-top: 20px;
+}
+.index-content .topic-slider section,
+.index-content .featured-slider section,
+.index-content .popular-slider section {
+  padding: 0 10px;
+}
+@media (max-width: 767px) {
+  .index-content .topic-slider section,
+  .index-content .featured-slider section,
+  .index-content .popular-slider section {
+    width: 100%;
+  }
+}
+@media (max-width: 575px) {
+  .index-content .topic-slider section,
+  .index-content .featured-slider section,
+  .index-content .popular-slider section {
+    width: 45vw;
+  }
+}
+@media (max-width: 414px) {
+  .index-content .topic-slider section,
+  .index-content .featured-slider section,
+  .index-content .popular-slider section {
+    width: 75vw;
+  }
+}
+.index-content .topic-slider img,
+.index-content .featured-slider img,
+.index-content .popular-slider img {
+  height: 185px;
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+@media (max-width: 1400px) {
+  .index-content .topic-slider img,
+  .index-content .featured-slider img,
+  .index-content .popular-slider img {
+    height: 11vw;
+  }
+}
+@media (max-width: 991px) {
+  .index-content .topic-slider img,
+  .index-content .featured-slider img,
+  .index-content .popular-slider img {
+    height: 200px;
+  }
+}
+@media (max-width: 767px) {
+  .index-content .topic-slider img,
+  .index-content .featured-slider img,
+  .index-content .popular-slider img {
+    height: 145px;
+  }
+}
+@media (max-width: 575px) {
+  .index-content .topic-slider img,
+  .index-content .featured-slider img,
+  .index-content .popular-slider img {
+    height: 25vw;
+  }
+}
+@media (max-width: 414px) {
+  .index-content .topic-slider img,
+  .index-content .featured-slider img,
+  .index-content .popular-slider img {
+    height: 42vw;
+  }
+}
+.index-content .topic-slider .title,
+.index-content .featured-slider .title,
+.index-content .popular-slider .title {
+  display: flex;
+  align-items: flex-start;
+  margin-top: 10px;
+}
+.index-content .topic-slider .tab-block,
+.index-content .featured-slider .tab-block,
+.index-content .popular-slider .tab-block {
+  display: flex;
+  flex-wrap: wrap;
+  height: 30px;
+  overflow: hidden;
+  margin-top: 10px;
+}
+.index-content .topic-slider .tab-block a,
+.index-content .featured-slider .tab-block a,
+.index-content .popular-slider .tab-block a {
+  display: inline-block;
+  margin-right: 6px;
+}
+.index-content .topic-slider .tab-block a:hover h4,
+.index-content .featured-slider .tab-block a:hover h4,
+.index-content .popular-slider .tab-block a:hover h4 {
+  color: var(--sub-color);
+  border: 1px solid var(--sub-color);
+}
+.index-content .topic-slider .tab-block a h4,
+.index-content .featured-slider .tab-block a h4,
+.index-content .popular-slider .tab-block a h4 {
+  margin-bottom: 10px;
+  padding: 3px 10px 5px;
+  color: #ADADAD;
+  border: 1px solid #ADADAD;
+  border-radius: 5px;
+  font-size: 14px;
+  font-weight: 400;
+}
+.index-content .popular-slider .slide-img {
+  overflow: auto;
+}
+.index-content .popular-slider .slide-img a:first-child {
+  display: block;
+  overflow: hidden;
+  border-radius: 5px;
+  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1607843137);
+}
+.index-content .popular-slider .slide-img a:first-child img {
+  border-radius: 5px;
+}
+.index-content .popular-slider .designer-item {
+  display: flex;
+  align-items: center;
+  margin: -20px 0 10px 10px;
+}
+.index-content .popular-slider .designer-item img {
+  width: 80px;
+  height: 80px;
+  -o-object-position: top;
+     object-position: top;
+  -o-object-fit: cover;
+     object-fit: cover;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
+  transform: scale(1) !important;
+}
+.index-content .popular-slider .designer-item h2 {
+  width: 12vw;
+  font-size: 16px;
+  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) {
+  .index-content .popular-slider .designer-item h2 {
+    width: 9vw;
+  }
+}
+@media (max-width: 991px) {
+  .index-content .popular-slider .designer-item h2 {
+    width: 22vw;
+  }
+}
+.index-content .featured-content .slide-img,
+.index-content .topic-content .slide-img,
+.index-content .video-content .slide-img {
+  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1607843137);
+}
+.index-content .video-content .slide-img a {
+  display: block;
+  position: relative;
+}
+.index-content .video-content .slide-img a:hover .play-btn img {
+  transform: scale(1.1);
+}
+.index-content .video-content .slide-img .play-btn {
+  position: absolute;
+  z-index: 999;
+  bottom: 0;
+  right: 3px;
+}
+.index-content .video-content .slide-img .play-btn img {
+  width: 60px;
+  height: 60px;
+}
+.index-content .video-slider section {
+  margin: auto 10px;
+  max-width: 300px;
+}
+@media (max-width: 575px) {
+  .index-content .video-slider section {
+    width: 43vw;
+  }
+}
+@media (max-width: 414px) {
+  .index-content .video-slider section {
+    width: 70vw;
+  }
+}
+.index-content .video-slider .slide-img {
+  border-radius: 5px;
+}
+.index-content .video-slider .slide-img .slide-item {
+  height: 170px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  width: 100%;
+}
+@media (max-width: 767px) {
+  .index-content .video-slider .slide-img .slide-item {
+    height: 135px;
+  }
+}
+@media (max-width: 414px) {
+  .index-content .video-slider .slide-img .slide-item {
+    height: 39.5vw;
+  }
+}
+.index-content .slide-img {
+  display: block;
+  overflow: hidden;
+}
+.index-content .slide-img img {
+  transition: all 0.5s;
+}
+.index-content .slide-img:hover img {
+  transform: scale(1.1);
+}
+.index-content #youtubeModal .modal-content {
+  background-color: transparent;
+  border: none;
+}
+.index-content #youtubeModal .modal-content .modal-header {
+  border-bottom: none;
+}
+.index-content #youtubeModal .modal-content .modal-title {
+  padding: 0;
+  font-size: 30px;
+  font-weight: bold;
+  color: #fff;
+}
+.index-content #youtubeModal .modal-body {
+  padding: 10px 0;
+}
+.index-content #youtubeModal .modal-body section {
+  display: flex;
+  justify-content: center;
+}
+.index-content #youtubeModal .modal-body section h2 {
+  color: #fff;
+  font-size: 20px;
+  margin-top: 15px;
+  border-bottom: 1px solid #fff;
+  text-align: center;
+  padding-bottom: 3px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  line-break: after-white-space;
+  transition: all 0.2s;
+}
+.index-content #youtubeModal .video-box {
+  display: flex;
+  margin: auto;
+  position: relative;
+  width: 80%;
+  height: 0;
+  padding-bottom: 45%;
+}
+@media (max-width: 991px) {
+  .index-content #youtubeModal .video-box {
+    width: 100%;
+    padding-bottom: 55%;
+  }
+}
+.index-content #youtubeModal .video-box iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.index-content .featured-slider .slide-img {
+  border-radius: 5px;
+}
+
+.top-card a:hover {
+  text-shadow: 1px 2px 4px rgb(188, 84, 6);
+}
+.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;
+  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;
+}
+.center-card div:nth-child(1) a span,
+.center-card div:nth-child(2) a span {
+  background-color: #EA068C;
+}
+.center-card div:nth-child(3) a span {
+  background-color: #0F506D;
+}
+
+.more-link {
+  color: var(--sub-color);
+  transition: all 0.2s;
+}
+.more-link:hover {
+  color: var(--sub-color);
+  opacity: 0.7;
+}
+.more-link img {
+  width: 15px;
+  transform: rotate(90deg);
+  filter: invert(50%) sepia(97%) saturate(1293%) hue-rotate(348deg) brightness(95%) contrast(96%);
+}
+
+.options-content h3 {
+  font-size: 16px;
+}
+.options-content .space-slider .slick-list,
+.options-content .options-slider .slick-list {
+  padding-bottom: 5px;
+}
+.options-content .space-slider .slick-slide section,
+.options-content .options-slider .slick-slide section {
+  margin: 0 10px;
+  border-radius: 0 0 5px 5px;
+}
+.options-content .space-slider .slick-slide section .slide-img,
+.options-content .options-slider .slick-slide section .slide-img {
+  height: 170px;
+  display: block;
+  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1607843137);
+  border-radius: 5px;
+  overflow: hidden;
+}
+@media (max-width: 767px) {
+  .options-content .space-slider .slick-slide section .slide-img,
+  .options-content .options-slider .slick-slide section .slide-img {
+    width: 155px;
+    height: 140px;
+  }
+}
+.options-content .space-slider .slick-slide section .slide-img img,
+.options-content .options-slider .slick-slide section .slide-img img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 5px 5px 0 0;
+  transition: all 0.5s;
+}
+.options-content .space-slider .slick-slide section a,
+.options-content .options-slider .slick-slide section a {
+  position: relative;
+  display: flex;
+  height: 100%;
+}
+.options-content .space-slider .slick-slide section a:hover h3,
+.options-content .options-slider .slick-slide section a:hover h3 {
+  color: var(--sub-color);
+  background-color: rgba(237, 237, 237, 0.9);
+}
+.options-content .space-slider .slick-slide section a:hover img,
+.options-content .options-slider .slick-slide section a:hover img {
+  transform: scale(1.1);
+}
+.options-content .space-slider .slick-slide section a h3,
+.options-content .options-slider .slick-slide section a h3 {
+  padding: 10px;
+  text-align: center;
+  color: var(--main-color);
+  background-color: rgba(237, 237, 237, 0.8);
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 0 0 5px 5px;
+}
+.options-content .space-slider .slick-slide section a h3 strong,
+.options-content .options-slider .slick-slide section a h3 strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  line-break: after-white-space;
+  transition: all 0.2s;
+  font-weight: 500;
+}
+@media (max-width: 767px) {
+  .options-content .space-slider .slick-slide section span {
+    width: 100%;
+  }
+}
+@media (max-width: 575px) {
+  .options-content .space-slider .slick-slide section span {
+    width: 41vw;
+  }
+}
+.options-content .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.options-content .slick-prev,
+.main-content .slick-prev {
+  left: -10px !important;
+}
+.options-content .slick-next,
+.main-content .slick-next {
+  right: -12px !important;
+}
+.options-content .slick-prev,
+.options-content .slick-next,
+.main-content .slick-prev,
+.main-content .slick-next {
+  width: 35px;
+  height: 35px;
+  z-index: 100;
+  box-shadow: 2px 2px 7px #979797;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 100px;
+  transition: all 0.3s;
+}
+.options-content .slick-prev:hover,
+.options-content .slick-next:hover,
+.main-content .slick-prev:hover,
+.main-content .slick-next:hover {
+  background: rgba(255, 255, 255, 0.8);
+}
+.options-content .slick-prev .fa-chevron-right,
+.options-content .slick-prev .fa-chevron-left,
+.options-content .slick-next .fa-chevron-right,
+.options-content .slick-next .fa-chevron-left,
+.main-content .slick-prev .fa-chevron-right,
+.main-content .slick-prev .fa-chevron-left,
+.main-content .slick-next .fa-chevron-right,
+.main-content .slick-next .fa-chevron-left {
+  padding-top: 20px;
+  color: #989898 !important;
+  font-size: 15px !important;
+}
+.options-content .slick-prev .fa-chevron-right,
+.options-content .slick-next .fa-chevron-right,
+.main-content .slick-prev .fa-chevron-right,
+.main-content .slick-next .fa-chevron-right {
+  padding-left: 4px;
+}
+.options-content .slick-prev:before,
+.options-content .slick-next:before,
+.main-content .slick-prev:before,
+.main-content .slick-next:before {
+  content: "" !important;
+}
+
+.main-content {
+  margin-bottom: 100px;
+}
+.main-content h3 {
+  font-size: 18px;
+  line-height: 1.4em;
+  letter-spacing: 0.05em;
+}
+
+.slider-close-btn {
+  position: absolute;
+  top: 0;
+  right: 20px;
+  width: 50px;
+  height: 30px;
+  background-color: hsla(0, 0%, 100%, 0.66);
+  border-radius: 0 0 50px 50px;
+  color: #888;
+  border: none;
+  outline: none;
+  font-size: 11px;
+  box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
+  line-height: 12px;
+  z-index: 3;
+}
+
+/* 手機版進度條 */
+.progress {
+  display: none;
+  width: 50%;
+  height: 3px;
+  margin: 10px auto 0;
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: #f5f5f5;
+  background-image: linear-gradient(to right, var(--sub-color), var(--sub-color));
+  background-repeat: no-repeat;
+  background-size: 0 100%;
+  transition: background-size 0.4s ease-in-out;
+}
+@media (max-width: 575px) {
+  .progress {
+    display: block;
+  }
+}
+
+.loading-item {
+  background: #fff;
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  z-index: 1000;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.loading-item.loading-hide {
+  animation-name: fadeOut;
+  animation-duration: 1s;
+  opacity: 0;
+  z-index: -1000;
+}
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.sub-banner-content .sub-banner-slider img {
+  width: 650px;
+  margin: auto;
+  padding: 0 10px;
+}
+.sub-banner-content .sub-banner-slider .slick-prev:before,
+.sub-banner-content .sub-banner-slider .slick-next:before {
+  content: "" !important;
+}
+.sub-banner-content .sub-banner-slider .slick-prev i,
+.sub-banner-content .sub-banner-slider .slick-next i {
+  display: none;
+  opacity: 0.3;
+  transition: all 0.3s;
+}
+.sub-banner-content .sub-banner-slider .slick-prev i:hover,
+.sub-banner-content .sub-banner-slider .slick-next i:hover {
+  opacity: 0.8;
+}
+
+.ellipsis-title {
+  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;
+}
+.ellipsis-title:hover {
+  color: var(--sub-color) !important;
+}/*# sourceMappingURL=index.css.map */

Файловите разлики са ограничени, защото са твърде много
+ 0 - 0
css/index.css.map


+ 1154 - 0
css/index.scss

@@ -0,0 +1,1154 @@
+:root {
+  --main-color: #34404b;
+  --sub-color: #ee751b;
+}
+
+// .top-block {
+//   background-color: rgb(202, 202, 202);
+//   transition-property: height;
+//   transition-duration: 300ms;
+
+//   .slick-next,
+//   .slick-prev {
+//     z-index: 1000;
+//   }
+
+//   .slick-next {
+//     right: 15px;
+//   }
+
+//   .slick-prev {
+//     left: 15px;
+//   }
+
+//   .slick-prev:before,
+//   .slick-next:before {
+//     display: none;
+//   }
+// }
+
+.info-item {
+  .logo-img {
+    position: absolute;
+    z-index: 10;
+    top: 20px;
+    left: 50px;
+
+    @media (max-width: 991px) {
+      left: 100px;
+    }
+
+    @media (max-width: 767px) {
+      top: 5%;
+      right: 0;
+      left: -65%;
+    }
+
+    img {
+      width: 100%;
+      object-fit: contain;
+    }
+
+    .img-designer {
+      height: 50px;
+
+      @media (max-width: 767px) {
+        height: 40px;
+      }
+
+      @media (max-width: 575px) {
+        height: 26px;
+      }
+    }
+
+    .img-renovation {
+      height: 60px;
+    }
+
+    .img-glory {
+      height: 70px;
+    }
+
+    .img-glory,
+    .img-renovation {
+      @media (max-width: 767px) {
+        height: 60px;
+      }
+
+      @media (max-width: 575px) {
+        height: 34px;
+        margin-left: -4vw;
+      }
+    }
+  }
+
+  section {
+    position: absolute;
+    z-index: 10;
+    bottom: 70px;
+    left: 70px;
+    color: #fff;
+    text-shadow: 1px 1px 4px #333;
+
+    @media (max-width: 991px) {
+      left: 14%;
+      bottom: 10%;
+    }
+
+    @media (max-width: 767px) {
+      left: 6%;
+      bottom: 6%;
+    }
+
+    h3 {
+      margin-bottom: 1rem;
+      font-size: 18px;
+
+      @media (max-width: 767px) {
+        display: none;
+      }
+    }
+
+    div {
+      display: flex;
+      border: 1px solid #fff;
+
+      @media (max-width: 767px) {
+        flex-direction: column;
+      }
+
+      h2 {
+        margin: auto;
+        margin-left: 0;
+        padding: 5px 30px;
+        font-size: 26px;
+
+        @media (max-width: 575px) {
+          font-size: 18px;
+          margin: 0;
+          text-align: center;
+        }
+      }
+
+      h2:first-child {
+        padding-bottom: 8px;
+        background-color: rgba(237, 237, 237, .3);
+      }
+
+      h2:last-child {
+        font-size: 24px;
+
+        @media (max-width: 575px) {
+          font-size: 18px;
+        }
+
+        small {
+          font-size: 16px;
+          font-weight: 300;
+
+          @media (max-width: 575px) {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.banner-content {
+  max-width: 100%;
+  margin-top: .875rem;
+
+  @media (max-width: 991px) {
+    margin-top: 0;
+  }
+
+  img {
+    width: 1300px;
+    height: 535px;
+    margin: 0 7px;
+    object-fit: cover;
+
+    @media (max-width: 1200px) {
+      width: 100%;
+      height: 400px;
+    }
+
+    @media (max-width: 991px) {
+      height: 50vw;
+    }
+
+    @media (max-width: 767px) {
+      height: 65vw;
+      width: 93vw;
+    }
+  }
+
+  .slick-next:before,
+  .slick-prev:before {
+    content: "" !important;
+  }
+
+  .slick-next {
+    right: 160px;
+    margin-left: auto;
+
+    @media (max-width: 575px) {
+      right: 20px;
+    }
+  }
+
+  .slick-prev {
+    left: -50px;
+    margin-right: auto;
+
+    @media (max-width: 575px) {
+      left: 20px;
+    }
+  }
+
+  .slick-next,
+  .slick-prev {
+    top: 5vw;
+    z-index: 1000;
+
+    i {
+      opacity: .6;
+      font-size: 32px;
+      transition: all .3s;
+    }
+
+    &:hover {
+      i {
+        opacity: 1;
+        // font-size: 36px;
+      }
+    }
+
+    @media (max-width: 1200px) {
+      top: 1vw;
+    }
+
+    i {
+      padding: 200px 100px;
+    }
+  }
+
+  .slick-dots {
+    bottom: 10px;
+
+    li {
+      margin: 0;
+
+      button:before {
+        width: 10px;
+        height: 10px;
+        content: "";
+        opacity: 1;
+        border: 1px solid #fff;
+        border-radius: 100px;
+      }
+    }
+
+    & .slick-active {
+      button:before {
+        color: #fff;
+        background-color: #fff;
+      }
+    }
+  }
+
+  .banner-slider {
+    img {
+      filter: brightness(50%);
+    }
+  }
+
+  .slick-now {
+    img {
+      filter: brightness(100%) !important;
+    }
+  }
+
+  .slick-slide {
+    position: relative;
+  }
+
+}
+
+.index-content {
+  @media (max-width: 991px) {
+    max-width: 100%;
+  }
+
+  * {
+    letter-spacing: 0.05em;
+    font-family: 'Helvetica';
+  }
+
+  .fas {
+    font-family: Font Awesome\ 5 Free !important;
+  }
+
+  h3 {
+    color: #727272;
+    font-weight: 500;
+    line-height: 22px;
+  }
+
+  h5 {
+    padding: 0 10px;
+    margin-bottom: 20px;
+    font-size: 22px;
+    font-weight: 500;
+    color: var(--main-color);
+
+    span {
+      color: var(--sub-color);
+    }
+  }
+
+  .describe {
+    padding-top: 50px;
+    margin: 25px 0;
+    font-size: 32px;
+    font-weight: 500;
+    text-align: center;
+    color: #34404b;
+    line-height: 1.3em;
+    border-top: 1px solid #989898;
+
+    span {
+      color: var(--sub-color);
+    }
+
+    @media (max-width: 991px) {
+      padding-top: 1.3rem;
+    }
+
+    @media (max-width: 767px) {
+      font-size: 25px;
+    }
+  }
+
+  .card-item {
+    padding: 0 10px;
+    margin-top: 1.3rem;
+
+    a {
+      height: 90px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 16px;
+      font-weight: 500;
+      text-align: center;
+      color: #727272;
+      background-color: #ededed;
+      border-radius: 5px;
+      transition: all .3s;
+      line-height: 1.2rem;
+
+      @media (max-width: 767px) {
+        height: 60px;
+        margin-bottom: 16px;
+      }
+    }
+  }
+
+  .top-card,
+  .center-card {
+    a {
+      position: relative;
+      overflow: hidden;
+
+      span {
+        position: absolute;
+        display: block;
+        width: 0px;
+        height: 0px;
+        border-radius: 100%;
+        transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
+        transform: translate(-50%, -50%);
+        z-index: -1;
+      }
+
+      &:hover {
+        color: #fff;
+        background-color: transparent !important;
+
+        span {
+          width: 225%;
+          height: 500%;
+        }
+      }
+    }
+  }
+
+  .topic-content {
+    .img-box {
+      border-radius: 5px;
+      overflow: hidden;
+    }
+
+    .slick-track {
+      margin: 0;
+      display: flex;
+      justify-content: space-around;
+
+      @media (max-width: 575px) {
+        justify-content: start;
+      }
+    }
+  }
+
+  .designer-content {
+    h3 {
+      margin: 10px auto 5px;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      line-break: after-white-space;
+
+      @media (max-width: 575px) {
+        width: 160px;
+      }
+    }
+
+    .name {
+      margin-top: 5px;
+      display: block;
+      font-size: 16px;
+      font-weight: normal;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      line-break: after-white-space;
+
+      small {
+        font-size: 12px;
+      }
+    }
+
+    .slide-item {
+      object-position: top;
+      object-fit: contain;
+    }
+
+    .slick-slide {
+      margin: 0 15px;
+    }
+
+    section {
+      position: relative;
+
+      .slide-img {
+        display: block;
+        margin: 0 auto 15px;
+        height: 130px;
+        width: 130px;
+        border-radius: 100px;
+        box-shadow: 0px 3px 6px #00000029;
+        transition: 0.3s all ease-in;
+        overflow: unset;
+
+        a {
+          display: block; // for safari
+          position: relative;
+        }
+
+        img {
+          height: 130px;
+          width: 130px;
+          object-fit: cover;
+          border-radius: 100px;
+          transform: scale(1) !important;
+
+          &:hover {
+            transform: scale(1) !important;
+          }
+        }
+
+        &:hover {
+          .img-border {
+            opacity: 1 !important;
+          }
+        }
+
+        .img-border {
+          opacity: 0;
+          display: block;
+          border: 2px solid var(--sub-color);
+          width: 140px;
+          height: 140px;
+          position: absolute;
+          top: -5px;
+          left: -5px;
+          border-radius: 100px;
+          z-index: 100;
+          transition: opacity .35s cubic-bezier(.4, .8, .74, 1) 0s, transform .35s cubic-bezier(.26, 1, .48, 1) 0s, -webkit-transform .35s cubic-bezier(.26, 1, .48, 1) 0s;
+        }
+      }
+    }
+
+    .slick-track {
+      padding-top: 20px;
+    }
+  }
+
+  .topic-slider,
+  .featured-slider,
+  .popular-slider {
+    section {
+      padding: 0 10px;
+
+      @media (max-width: 767px) {
+        width: 100%;
+      }
+
+      @media (max-width: 575px) {
+        width: 45vw;
+      }
+
+      @media (max-width: 414px) {
+        width: 75vw;
+      }
+    }
+
+    img {
+      height: 185px;
+      width: 100%;
+      object-fit: cover;
+
+      @media (max-width: 1400px) {
+        height: 11vw;
+      }
+
+      @media (max-width: 991px) {
+        height: 200px;
+      }
+
+      @media (max-width: 767px) {
+        height: 145px;
+      }
+
+      @media (max-width: 575px) {
+        height: 25vw;
+      }
+
+      @media (max-width: 414px) {
+        height: 42vw;
+      }
+    }
+
+    .title {
+      // height: 50px;
+      display: flex;
+      align-items: flex-start;
+      margin-top: 10px;
+    }
+
+    .tab-block {
+      display: flex;
+      flex-wrap: wrap;
+      height: 30px;
+      overflow: hidden;
+      margin-top: 10px;
+
+      a {
+        display: inline-block;
+        margin-right: 6px;
+
+        &:hover {
+          h4 {
+            color: var(--sub-color);
+            border: 1px solid var(--sub-color);
+          }
+        }
+
+        h4 {
+          margin-bottom: 10px;
+          padding: 3px 10px 5px;
+          color: #ADADAD;
+          border: 1px solid #ADADAD;
+          border-radius: 5px;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+
+  .popular-slider {
+    .slide-img {
+      overflow: auto;
+
+      a:first-child {
+        display: block;
+        overflow: hidden;
+        border-radius: 5px;
+        box-shadow: 2px 2px 6px #00000029;
+
+        img {
+          border-radius: 5px;
+        }
+      }
+    }
+
+    .designer-item {
+      display: flex;
+      align-items: center;
+      margin: -20px 0 10px 10px;
+
+      img {
+        width: 80px;
+        height: 80px;
+        object-position: top;
+        object-fit: cover;
+        box-shadow: 0px 3px 6px #00000029;
+        transform: scale(1) !important;
+      }
+
+      h2 {
+        width: 12vw;
+        font-size: 16px;
+        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;
+        }
+      }
+    }
+  }
+
+
+  .featured-content,
+  .topic-content,
+  .video-content {
+    .slide-img {
+      box-shadow: 2px 2px 6px #00000029;
+    }
+  }
+
+  .video-content {
+    .slide-img {
+      a {
+        display: block;
+        position: relative;
+
+        &:hover {
+          .play-btn img {
+            transform: scale(1.1);
+          }
+        }
+      }
+
+      .play-btn {
+        position: absolute;
+        z-index: 999;
+        bottom: 0;
+        right: 3px;
+
+        img {
+          width: 60px;
+          height: 60px;
+        }
+      }
+    }
+  }
+
+  .video-slider {
+    section {
+      margin: auto 10px;
+      max-width: 300px;
+
+      @media (max-width: 575px) {
+        width: 43vw;
+      }
+
+      @media (max-width: 414px) {
+        width: 70vw;
+      }
+    }
+
+    .slide-img {
+      border-radius: 5px;
+
+      .slide-item {
+        height: 170px;
+        object-fit: cover;
+        width: 100%;
+
+        @media (max-width: 767px) {
+          height: 135px;
+        }
+
+        @media (max-width: 414px) {
+          height: 39.5vw;
+        }
+      }
+    }
+  }
+
+  .slide-img {
+    display: block;
+    overflow: hidden;
+
+    img {
+      transition: all .5s;
+    }
+
+    &:hover {
+      img {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+
+  #youtubeModal {
+    .modal-content {
+      background-color: transparent;
+      border: none;
+
+      .modal-header {
+        border-bottom: none;
+      }
+
+      .modal-title {
+        padding: 0;
+        font-size: 30px;
+        font-weight: bold;
+        color: #fff;
+      }
+    }
+
+    .modal-body {
+      padding: 10px 0;
+
+      section {
+        display: flex;
+        justify-content: center;
+
+        h2 {
+          color: #fff;
+          font-size: 20px;
+          margin-top: 15px;
+          border-bottom: 1px solid #fff;
+          text-align: center;
+          padding-bottom: 3px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1; // 超過則省略
+          -webkit-box-orient: vertical;
+          line-break: after-white-space; // for safari
+          transition: all .2s;
+        }
+      }
+    }
+
+    .video-box {
+      display: flex;
+      margin: auto;
+      position: relative;
+      width: 80%;
+      height: 0;
+      padding-bottom: 45%;
+
+      @media (max-width: 991px) {
+        width: 100%;
+        padding-bottom: 55%;
+      }
+
+      iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .featured-slider {
+    .slide-img {
+      border-radius: 5px;
+    }
+  }
+}
+
+.top-card {
+  a {
+    &:hover {
+      text-shadow: 1px 2px 4px rgb(188 84 6);
+    }
+
+    span {
+      // 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;
+        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 {
+  a:hover {
+    color: #fff;
+  }
+
+  div:nth-child(1),
+  div:nth-child(2) {
+    a {
+      span {
+        background-color: #EA068C;
+      }
+    }
+  }
+
+  div:nth-child(3) {
+    a {
+      span {
+        background-color: #0F506D;
+      }
+    }
+  }
+}
+
+.more-link {
+  color: var(--sub-color);
+  transition: all 0.2s;
+
+  &:hover {
+    color: var(--sub-color);
+    opacity: 0.7;
+  }
+
+  img {
+    width: 15px;
+    transform: rotate(90deg);
+    filter: invert(50%) sepia(97%) saturate(1293%) hue-rotate(348deg) brightness(95%) contrast(96%);
+  }
+}
+
+.options-content {
+  h3 {
+    font-size: 16px;
+  }
+
+  .space-slider,
+  .options-slider {
+    .slick-list {
+      padding-bottom: 5px;
+    }
+
+    .slick-slide {
+      section {
+        margin: 0 10px;
+        border-radius: 0 0 5px 5px;
+
+        .slide-img {
+          height: 170px;
+          display: block;
+          box-shadow: 2px 2px 6px #00000029;
+          border-radius: 5px;
+          overflow: hidden;
+
+          @media (max-width: 767px) {
+            width: 155px;
+            height: 140px;
+          }
+
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 5px 5px 0 0;
+            transition: all 0.5s;
+          }
+        }
+
+        a {
+          position: relative;
+          display: flex;
+          height: 100%;
+
+          &:hover {
+            h3 {
+              color: var(--sub-color);
+              background-color: rgba(237, 237, 237, 0.9);
+            }
+
+            img {
+              transform: scale(1.1);
+            }
+          }
+
+          h3 {
+            padding: 10px;
+            text-align: center;
+            color: var(--main-color);
+            background-color: rgba(237, 237, 237, .8);
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-radius: 0 0 5px 5px;
+
+            strong {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-line-clamp: 1;
+              -webkit-box-orient: vertical;
+              line-break: after-white-space;
+              transition: all 0.2s;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .space-slider {
+    .slick-slide {
+      section {
+        span {
+          @media (max-width: 767px) {
+            width: 100%;
+          }
+
+          @media (max-width: 575px) {
+            width: 41vw;
+          }
+        }
+      }
+    }
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+}
+
+.options-content,
+.main-content {
+  .slick-prev {
+    left: -10px !important;
+  }
+
+  .slick-next {
+    right: -12px !important;
+  }
+
+  .slick-prev,
+  .slick-next {
+    width: 35px;
+    height: 35px;
+    z-index: 100;
+    box-shadow: 2px 2px 7px #979797;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 100px;
+    transition: all .3s;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.8);
+    }
+
+    .fa-chevron-right,
+    .fa-chevron-left {
+      padding-top: 20px;
+      color: #989898 !important;
+      font-size: 15px !important;
+    }
+
+    .fa-chevron-right {
+      padding-left: 4px;
+    }
+
+    &:before {
+      content: "" !important;
+    }
+  }
+}
+
+.main-content {
+  margin-bottom: 100px;
+
+  h3 {
+    font-size: 18px;
+    line-height: 1.4em;
+    letter-spacing: 0.05em;
+  }
+}
+
+.slider-close-btn {
+  position: absolute;
+  top: 0;
+  right: 20px;
+  width: 50px;
+  height: 30px;
+  background-color: hsla(0, 0%, 100%, 0.66);
+  border-radius: 0 0 50px 50px;
+  color: #888;
+  border: none;
+  outline: none;
+  font-size: 11px;
+  box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
+  line-height: 12px;
+  z-index: 3;
+}
+
+/* 手機版進度條 */
+.progress {
+  display: none;
+  width: 50%;
+  height: 3px;
+  margin: 10px auto 0;
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: #f5f5f5;
+  background-image: linear-gradient(to right, var(--sub-color), var(--sub-color));
+  background-repeat: no-repeat;
+  background-size: 0 100%;
+  transition: background-size 0.4s ease-in-out;
+
+  @media (max-width: 575px) {
+    display: block;
+  }
+}
+
+.loading-item {
+  background: #fff;
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  z-index: 1000;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &.loading-hide {
+    animation-name: fadeOut;
+    animation-duration: 1s;
+    opacity: 0;
+    z-index: -1000;
+  }
+
+  @keyframes fadeOut {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+}
+
+.sub-banner-content {
+  .sub-banner-slider {
+    img {
+      width: 650px;
+      margin: auto;
+      padding: 0 10px;
+    }
+
+    .slick-prev:before,
+    .slick-next:before {
+      content: "" !important;
+    }
+
+    .slick-prev i,
+    .slick-next i {
+      display: none;
+      opacity: 0.3;
+      transition: all 0.3s;
+    }
+
+    .slick-prev i:hover,
+    .slick-next i:hover {
+      opacity: 0.8;
+    }
+
+  }
+}
+
+// 標題省略
+.ellipsis-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; // 超過兩行則省略
+  -webkit-box-orient: vertical;
+  line-break: after-white-space;
+  transition: all .2s;
+
+  &:hover {
+    color: var(--sub-color) !important;
+  }
+}

+ 315 - 0
css/slick.css

@@ -0,0 +1,315 @@
+/* Slider */
+.slick-slider {
+  position: relative;
+
+  display: block;
+  box-sizing: border-box;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  -webkit-touch-callout: none;
+  -khtml-user-select: none;
+  -ms-touch-action: pan-y;
+  touch-action: pan-y;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list {
+  position: relative;
+
+  display: block;
+  overflow: hidden;
+
+  margin: 0;
+  padding: 0;
+}
+
+.slick-list:focus {
+  outline: none;
+}
+
+.slick-list.dragging {
+  cursor: pointer;
+  cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list {
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+
+.slick-track {
+  position: relative;
+  top: 0;
+  left: 0;
+
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.slick-track:before,
+.slick-track:after {
+  display: table;
+
+  content: "";
+}
+
+.slick-track:after {
+  clear: both;
+}
+
+.slick-loading .slick-track {
+  visibility: hidden;
+}
+
+.slick-slide {
+  display: none;
+  float: left;
+
+  height: 100%;
+  min-height: 1px;
+}
+
+[dir="rtl"] .slick-slide {
+  float: right;
+}
+
+.slick-slide img {
+  display: block;
+}
+
+.slick-slide.slick-loading img {
+  display: none;
+}
+
+.slick-slide.dragging img {
+  pointer-events: none;
+}
+
+.slick-initialized .slick-slide {
+  display: block;
+}
+
+.slick-loading .slick-slide {
+  visibility: hidden;
+}
+
+.slick-vertical .slick-slide {
+  display: block;
+
+  height: auto;
+
+  border: 1px solid transparent;
+}
+
+.slick-arrow.slick-hidden {
+  display: none;
+}
+
+/* Slider */
+.slick-loading .slick-list {
+  background: #fff url("./ajax-loader.gif") center center no-repeat;
+}
+
+/* Icons */
+@font-face {
+  font-family: "slick";
+  font-weight: normal;
+  font-style: normal;
+
+  src: url("./fonts/slick.eot");
+  src:
+    url("./fonts/slick.eot?#iefix") format("embedded-opentype"),
+    url("./fonts/slick.woff") format("woff"),
+    url("./fonts/slick.ttf") format("truetype"),
+    url("./fonts/slick.svg#slick") format("svg");
+}
+
+/* Arrows */
+.slick-prev,
+.slick-next {
+  font-size: 0;
+  line-height: 0;
+
+  position: absolute;
+  top: 50%;
+
+  display: block;
+
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  -webkit-transform: translate(0, -50%);
+  -ms-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+
+  cursor: pointer;
+
+  color: transparent;
+  border: none;
+  outline: none;
+  background: transparent;
+}
+
+.slick-prev:hover,
+.slick-prev:focus,
+.slick-next:hover,
+.slick-next:focus {
+  color: transparent;
+  outline: none;
+  background: transparent;
+}
+
+.slick-prev:hover:before,
+.slick-prev:focus:before,
+.slick-next:hover:before,
+.slick-next:focus:before {
+  opacity: 1;
+}
+
+.slick-prev.slick-disabled:before,
+.slick-next.slick-disabled:before {
+  opacity: 0.25;
+}
+
+.slick-prev:before,
+.slick-next:before {
+  font-family: "slick";
+  font-size: 20px;
+  line-height: 1;
+
+  opacity: 0.75;
+  color: white;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.slick-prev {
+  left: -25px;
+}
+
+[dir="rtl"] .slick-prev {
+  right: -25px;
+  left: auto;
+}
+
+.slick-prev:before {
+  content: "←";
+}
+
+[dir="rtl"] .slick-prev:before {
+  content: "→";
+}
+
+.slick-next {
+  right: -25px;
+}
+
+[dir="rtl"] .slick-next {
+  right: auto;
+  left: -25px;
+}
+
+.slick-next:before {
+  content: "→";
+}
+
+[dir="rtl"] .slick-next:before {
+  content: "←";
+}
+
+.slick-dotted.slick-slider {
+  margin-bottom: 30px;
+}
+
+.slick-dots {
+  position: absolute;
+  bottom: -25px;
+
+  display: block;
+
+  width: 100%;
+  padding: 0;
+  margin: 0;
+
+  list-style: none;
+
+  text-align: center;
+}
+
+.slick-dots li {
+  position: relative;
+
+  display: inline-block;
+
+  width: 20px;
+  height: 20px;
+  margin: 0 5px;
+  padding: 0;
+
+  cursor: pointer;
+}
+
+.slick-dots li button {
+  font-size: 0;
+  line-height: 0;
+
+  display: block;
+
+  width: 20px;
+  height: 20px;
+  padding: 5px;
+
+  cursor: pointer;
+
+  color: transparent;
+  border: 0;
+  outline: none;
+  background: transparent;
+}
+
+.slick-dots li button:hover,
+.slick-dots li button:focus {
+  outline: none;
+}
+
+.slick-dots li button:hover:before,
+.slick-dots li button:focus:before {
+  opacity: 1;
+}
+
+.slick-dots li button:before {
+  font-family: "slick";
+  font-size: 6px;
+  line-height: 20px;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 20px;
+  height: 20px;
+
+  content: "•";
+  text-align: center;
+
+  opacity: 0.25;
+  color: black;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.slick-dots li.slick-active button:before {
+  opacity: 0.75;
+  color: black;
+}

+ 2260 - 0
hhh_index.html

@@ -0,0 +1,2260 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <!-- Google Tag Manager -->
+  <script>(function (w, d, s, l, i) {
+      w[l] = w[l] || []; w[l].push({
+        'gtm.start':
+          new Date().getTime(), event: 'gtm.js'
+      }); var f = d.getElementsByTagName(s)[0],
+        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+    })(window, document, 'script', 'dataLayer', 'GTM-W3RJHTZ');</script>
+  <!-- End Google Tag Manager -->
+
+  <!-- google seo rich-results-up-->
+
+  <script type="application/ld+json">
+            {       
+            "@context":"https://schema.org",
+                "@type":"ItemList",
+                "itemListElement":[
+                {
+                "@type": "ListItem",
+                "position": 1,
+                "url":"https://hhh.com.tw/hhh_index.html",
+                "name": "頂部廣告輪播區",
+                "itemListElement": [
+                         
+             {
+                "@type": "ListItem",
+                "position": 1,
+                "url": "https://hhh.com.tw/designer-index.php?designer_id=32",
+                "image": "https://images.hhh.com.tw/uploads/_had/adlogo_15666_1691745237.jpg"
+            
+            }         
+                 ,{
+                    "@type": "ListItem",
+                    "position": 2,
+                    "url": "https://homeinspection.leju.com.tw/?utm_source=Google&utm_medium=Keywords&utm_campaign=homeinspection&gad_source=1&gclid=CjwKCAjww_iwBhApEiwAuG6ccOw8p8Bj3fcBK_LLSEsXZzXZwdytgpDI_Tb4BQqUi-Go_NVWQS_1shoCKWgQAvD_BwE",
+                    "image": "https://images.hhh.com.tw/uploads/_had/adlogo_17397_1713333058.jpg"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 3,
+                    "url": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=99",
+                    "image": "https://images.hhh.com.tw/uploads/_had/adlogo_17205_1702972693.jpg"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 4,
+                    "url": "https://hhh.com.tw/designer-index.php?designer_id=31",
+                    "image": "https://images.hhh.com.tw/uploads/_had/adlogo_15673_1603096869.jpg"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 5,
+                    "url": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=28",
+                    "image": "https://images.hhh.com.tw/uploads/_had/adlogo_17037_1692604388.jpg"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 6,
+                    "url": "https://hhh.com.tw/designer-index.php?designer_id=447",
+                    "image": "https://images.hhh.com.tw/uploads/_had/adlogo_15662_1682071915.jpg"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 7,
+                    "url": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=980",
+                    "image": "https://images.hhh.com.tw/uploads/_had/adlogo_17426_1714095097.jpg"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 8,
+                    "url": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=182",
+                    "image": "https://images.hhh.com.tw/uploads/_had/adlogo_17395_1713236623.jpg"
+                }
+              ] } , {"@type": "ListItem",
+                "position": 2,
+                "url":"https://hhh.com.tw/hhh_index.html",
+                "name": "主要廣告輪播區",
+                "itemListElement": [
+                         
+             {
+                "@type": "ListItem",
+                "position": 1,
+                "url": "https://event.hhh.com.tw/topglory/designer_356.html",
+                "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17461_1717052352.jpg"
+            
+            }         
+                 ,{
+                    "@type": "ListItem",
+                    "position": 2,
+                    "url": "https://event.hhh.com.tw/2023-Most-Favorite-Designers/case.php?id=279&title=%E4%B8%89%E5%AE%85%E4%B8%80%E7%A7%80%20%E5%AE%A4%E5%85%A7%E8%A8%AD%E8%A8%88",
+                    "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17460_1717052378.jpg"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 3,
+                    "url": "https://event.hhh.com.tw/2023-Most-Favorite-Designers/case.php?id=363&title=%E9%9B%B2%E5%8F%B8%E5%9C%8B%E9%9A%9B%E8%A8%AD%E8%A8%88",
+                    "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17459_1717052387.jpg"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 4,
+                    "url": "https://event.hhh.com.tw/2023-Most-Favorite-Designers/case.php?id=65&title=%E9%87%87%E8%88%8D%E7%A9%BA%E9%96%93%E8%A8%AD%E8%A8%88",
+                    "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17458_1717052400.jpg"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 5,
+                    "url": "https://event.hhh.com.tw/2023-Most-Favorite-Designers/case.php?id=418&title=%E9%87%87%E5%93%81%E5%AE%A4%E5%85%A7%E8%A8%AD%E8%A8%88",
+                    "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17457_1717052414.jpg"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 6,
+                    "url": "https://event.hhh.com.tw/2023-Most-Favorite-Designers/case.php?id=954&title=%E8%AA%A0%E7%A6%BE%E5%B7%A5%E7%A8%8B%E7%BE%8E%E5%AD%B8",
+                    "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17456_1717052424.jpg"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 7,
+                    "url": "https://hhh.com.tw/HHH_NEW/columns_detail/6625.php",
+                    "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17470_1717660259.jpg"
+                }
+              ] },  {"@type": "ListItem",
+                "position": 3,
+                "url":"https://hhh.com.tw/hhh_index.html",
+                "name": "空間解決方案(上)",
+                "itemListElement": [
+                {
+                "@type": "ListItem",
+                "position": 1,
+                "url": "https://hhh.com.tw/photos/index/",
+                "name":"找尋設計靈感"
+            
+                 },
+                 {
+                "@type": "ListItem",
+                "position": 2,
+                "url": "https://hhh.com.tw/about/request/",
+                "name":"免費裝修諮詢"
+                 },
+                 {
+                "@type": "ListItem",
+                "position": 3,
+                "url": "https://hhh.com.tw/about/calculator/",
+                "name":"預估裝修費用"
+                 },
+                 {
+                "@type": "ListItem",
+                "position": 4,
+                "url": "https://hhh.com.tw/minordecor",
+                "name":"輕裝修方案"
+                 }
+                  ] }, {"@type": "ListItem",
+                "position": 4,
+                "url":"https://hhh.com.tw/hhh_index.html",
+                "name": "依照空間尋找商品",
+                "itemListElement": [
+                {
+                "@type": "ListItem",
+                "position": 1,
+                "url": "https://hhh.style/hh12FFRrE",
+                "name":"客廳",
+                "image":"https://hhh.com.tw/hhh_index/images/index/space/Livingroom.jpg"
+                 },
+                 {
+                "@type": "ListItem",
+                "position": 2,
+                "url": "https://hhh.style/hh12riAMr",
+                "name":"餐廳",
+                "image":"https://hhh.com.tw/hhh_index/images/index/space/Resturent.jpg"
+                 },
+                 {
+                "@type": "ListItem",
+                "position": 3,
+                "url": "https://hhh.style/hh12YRr7r",
+                "name":"臥室",
+                "image":"https://hhh.com.tw/hhh_index/images/index/space/Bedroom.jpg"
+                 },
+                 {
+                "@type": "ListItem",
+                "position": 4,
+                "url": "https://hhh.style/hh12UBRQB",
+                "name":"玄關",
+                "image":"https://hhh.com.tw/hhh_index/images/index/space/Entrance.jpg"
+                 },
+                 {
+                "@type": "ListItem",
+                "position": 5,
+                "url": "https://hhh.style/hh12Eiabj",
+                "name":"收納",
+                "image":"https://hhh.com.tw/hhh_index/images/index/space/Storage.jpg"
+                 }
+                  ] }, {"@type": "ListItem",
+                "position": 5,
+                "url":"https://hhh.com.tw/hhh_index.html",
+                "name": "最新主打商品",
+                "itemListElement": [
+                         
+             {
+                "@type": "ListItem",
+                "position": 1,
+                "url": "https://hhh.style/hh12aeffB",
+                "name":"CERIALE 茶几",
+                "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17268_1706772328.jpg"
+            
+            }         
+                 ,{
+                    "@type": "ListItem",
+                    "position": 2,
+                    "url": "https://hhh.style/hh12Pqyr7",
+                    "name":"BOUHET 餐椅",
+                    "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17269_1706772957.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 3,
+                    "url": "https://hhh.style/hh12yFaBu",
+                    "name":"WINGS 茶几",
+                    "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17278_1706773479.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 4,
+                    "url": "https://hhh.style/hh12Pvzb7",
+                    "name":"DISO 圓邊几",
+                    "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17279_1706773592.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 5,
+                    "url": "https://hhh.style/hh12TaNv7",
+                    "name":"LECCE L型實木書桌",
+                    "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17280_1706773721.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 6,
+                    "url": "https://hhh.style/hh12peju6",
+                    "name":"KATOL 衣帽架",
+                    "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17281_1706773854.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 7,
+                    "url": "https://hhh.style/hh12rNzjj",
+                    "name":"SRGURA 床頭櫃",
+                    "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17282_1706774254.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 8,
+                    "url": "https://hhh.style/hh12aeRia",
+                    "name":"AMBRA 實木延伸餐桌",
+                    "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17283_1706774404.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 9,
+                    "url": "https://hhh.style/hh12hrM7A",
+                    "name":"AGEN 電視櫃",
+                    "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17284_1706774514.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 10,
+                    "url": "https://hhh.style/hh12Z7qAz",
+                    "name":"SEREIN 餐椅",
+                    "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17285_1706774634.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 11,
+                    "url": "https://hhh.style/hh12bjfaq",
+                    "name":"MEDIS 餐椅",
+                    "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17286_1706774701.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 12,
+                    "url": "https://hhh.style/hh12WrMVu",
+                    "name":"ROME 餐椅",
+                    "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17287_1706774773.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 13,
+                    "url": "https://hhh.style/hh12Ujiff",
+                    "name":"UNIQUE 餐椅",
+                    "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17288_1706775039.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 14,
+                    "url": "https://hhh.style/hh12jUquf",
+                    "name":"CBD 麻糬好眠枕 - 人體工學型",
+                    "image":"https://images.hhh.com.tw/uploads/_had/adlogo_17289_1706775117.jpg"
+                
+                }
+              ] },  {"@type": "ListItem",
+                "position": 6,
+                "url":"https://hhh.com.tw/hhh_index.html",
+                "name": "依照風格瀏覽設計",
+                "itemListElement": [
+                         
+             {
+                "@type": "ListItem",
+                "position": 2,
+                "url": "https://hhh.com.tw/photos/lists/nordic-style/",
+                "name":"北歐風",
+                "image":"https://hhh.com.tw/assets/images/photo/style/nordic.jpg"
+            
+            }         
+                 ,{
+                    "@type": "ListItem",
+                    "position": 1,
+                    "url": "https://hhh.com.tw/photos/lists/modern-style/",
+                    "name":"現代風",
+                    "image":"https://hhh.com.tw/assets/images/photo/style/modern.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 6,
+                    "url": "https://hhh.com.tw/photos/lists/industry-style/",
+                    "name":"工業風",
+                    "image":"https://hhh.com.tw/assets/images/photo/style/industry.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 4,
+                    "url": "https://hhh.com.tw/photos/lists/american-style/",
+                    "name":"美式風",
+                    "image":"https://hhh.com.tw/assets/images/photo/style/american.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 5,
+                    "url": "https://hhh.com.tw/photos/lists/leisure-style/",
+                    "name":"休閒多元",
+                    "image":"https://hhh.com.tw/assets/images/photo/style/leisure.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 16,
+                    "url": "https://hhh.com.tw/photos/lists/vanguard-style/",
+                    "name":"前衛風",
+                    "image":"https://hhh.com.tw/assets/images/photo/style/vanguard.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 10,
+                    "url": "https://hhh.com.tw/photos/lists/rustuc-style/",
+                    "name":"鄉村風",
+                    "image":"https://hhh.com.tw/assets/images/photo/style/rustuc.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 3,
+                    "url": "https://hhh.com.tw/photos/lists/mashup-style/",
+                    "name":"混搭風",
+                    "image":"https://hhh.com.tw/assets/images/photo/style/mashup.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 7,
+                    "url": "https://hhh.com.tw/photos/lists/neoclassic-style/",
+                    "name":"新古典",
+                    "image":"https://hhh.com.tw/assets/images/photo/style/neoclassic.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 12,
+                    "url": "https://hhh.com.tw/photos/lists/luxurious-style/",
+                    "name":"奢華風",
+                    "image":"https://hhh.com.tw/assets/images/photo/style/luxurious.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 9,
+                    "url": "https://hhh.com.tw/photos/lists/classical-style/",
+                    "name":"古典風",
+                    "image":"https://hhh.com.tw/assets/images/photo/style/classical.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 15,
+                    "url": "https://hhh.com.tw/photos/lists/exotic-style/",
+                    "name":"異國風",
+                    "image":"https://hhh.com.tw/assets/images/photo/style/exotic.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 11,
+                    "url": "https://hhh.com.tw/photos/lists/zen-style/",
+                    "name":"禪風",
+                    "image":"https://hhh.com.tw/assets/images/photo/style/zen.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 14,
+                    "url": "https://hhh.com.tw/photos/lists/oriental-style/",
+                    "name":"東方風",
+                    "image":"https://hhh.com.tw/assets/images/photo/style/oriental.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 13,
+                    "url": "https://hhh.com.tw/photos/lists/japanese-style/",
+                    "name":"日式風",
+                    "image":"https://hhh.com.tw/assets/images/photo/style/japanese.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 8,
+                    "url": "https://hhh.com.tw/photos/lists/muju-style/",
+                    "name":"無印風",
+                    "image":"https://hhh.com.tw/assets/images/photo/style/muji.jpg"
+                
+                }
+              ] } , {"@type": "ListItem",
+                "position": 7,
+                "url":"https://hhh.com.tw/hhh_index.html",
+                "name": "依照空間瀏覽設計",
+                "itemListElement": [
+                         
+             {
+                "@type": "ListItem",
+                "position": 1,
+                "url": "https://hhh.com.tw/photos/lists/living-space/",
+                "name":"客廳",
+                "image":"https://hhh.com.tw/assets/images/photo/space/living.jpg"
+            
+            }         
+                 ,{
+                    "@type": "ListItem",
+                    "position": 4,
+                    "url": "https://hhh.com.tw/photos/lists/kitchen-space/",
+                    "name":"廚房",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/kitchen.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 9,
+                    "url": "https://hhh.com.tw/photos/lists/children-space/",
+                    "name":"兒童房",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/children.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 8,
+                    "url": "https://hhh.com.tw/photos/lists/study-space/",
+                    "name":"書房",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/study.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 6,
+                    "url": "https://hhh.com.tw/photos/lists/restaurant-space/",
+                    "name":"餐廳",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/restaurant.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 2,
+                    "url": "https://hhh.com.tw/photos/lists/entrance-space/",
+                    "name":"玄關",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/entrance.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 3,
+                    "url": "https://hhh.com.tw/photos/lists/bedroom-space/",
+                    "name":"臥室",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/bedroom.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 7,
+                    "url": "https://hhh.com.tw/photos/lists/locker-space/",
+                    "name":"更衣室",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/locker.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 13,
+                    "url": "https://hhh.com.tw/photos/lists/balcony-space/",
+                    "name":"陽台",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/balcony.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 20,
+                    "url": "https://hhh.com.tw/photos/lists/guest-space/",
+                    "name":"客房",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/guest.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 5,
+                    "url": "https://hhh.com.tw/photos/lists/bathroom-space/",
+                    "name":"衛浴",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/bathroom.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 23,
+                    "url": "https://hhh.com.tw/photos/lists/reception-space/",
+                    "name":"會客室",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/reception.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 18,
+                    "url": "https://hhh.com.tw/photos/lists/office-space/",
+                    "name":"辦公空間",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/office.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 24,
+                    "url": "https://hhh.com.tw/photos/lists/outdoor-space/",
+                    "name":"戶外空間",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/outdoor.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 21,
+                    "url": "https://hhh.com.tw/photos/lists/commercial-space/",
+                    "name":"商用空間",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/commercial.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 16,
+                    "url": "https://hhh.com.tw/photos/lists/cloakroom-space/",
+                    "name":"衣帽間",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/cloakroom.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 14,
+                    "url": "https://hhh.com.tw/photos/lists/bar-space/",
+                    "name":"吧檯/吧台",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/bar.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 17,
+                    "url": "https://hhh.com.tw/photos/lists/multi-space/",
+                    "name":"多功能室",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/multi.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 11,
+                    "url": "https://hhh.com.tw/photos/lists/japanese-space/",
+                    "name":"和室",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/japanese.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 10,
+                    "url": "https://hhh.com.tw/photos/lists/nakajima-space/",
+                    "name":"中島",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/nakajima.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 19,
+                    "url": "https://hhh.com.tw/photos/lists/swimming-space/",
+                    "name":"泳池",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/swimming.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 22,
+                    "url": "https://hhh.com.tw/photos/lists/corridor-space/",
+                    "name":"廊道",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/corridor.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 15,
+                    "url": "https://hhh.com.tw/photos/lists/studio-space/",
+                    "name":"工作室",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/studio.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 12,
+                    "url": "https://hhh.com.tw/photos/lists/shenming-space/",
+                    "name":"神明廳",
+                    "image":"https://hhh.com.tw/assets/images/photo/space/shenming.jpg"
+                
+                }
+              ] } , {"@type": "ListItem",
+                "position": 8,
+                "url":"https://hhh.com.tw/hhh_index.html",
+                "name": "依照專長尋找專家",
+                "itemListElement": [
+                {
+                "@type": "ListItem",
+                "position": 1,
+                "url": "https://event.hhh.com.tw/2023-Most-Favorite-Designers/",
+                "name":"人氣設計師",
+                "image":"https://hhh.com.tw/hhh_index/images/index/designer/MFD.jpg"
+            
+                 },
+                 {
+                "@type": "ListItem",
+                "position": 2,
+                "url": "https://hhh.com.tw/event170427/",
+                "name":"老屋翻新",
+                "image":"https://hhh.com.tw/hhh_index/images/index/designer/RRD.jpg"
+                 },
+                {
+                "@type": "ListItem",
+                "position": 3,
+                "url": "https://event.hhh.com.tw/topglory/",
+                "name":"國際大賞",
+                "image":"https://hhh.com.tw/hhh_index/images/index/designer/topglory.jpg"
+                 },
+                 {
+                "@type": "ListItem",
+                "position": 4,
+                "url": "https://hhh.com.tw/minordecor",
+                "name":"輕裝修方案",
+                "image":"https://hhh.com.tw/hhh_index/images/index/designer/minordecor.jpg"
+                 },
+ 		{
+                "@type": "ListItem",
+                "position": 5,
+                "url": "https://matching.framer.website/",
+                "name":"居家快易便",
+                "image":"https://hhh.com.tw/hhh_index/images/index/designer/matching.jpg"
+                 },
+                 {
+                "@type": "ListItem",
+                "position": 6,
+                "url": "https://hhh.com.tw/search/lists/case/%E5%B0%8F%E5%9D%AA%E6%95%B8-keyword/",
+                "name":"小坪數收納",
+                "image":"https://hhh.com.tw/hhh_index/images/index/designer/04.png"
+                 },
+                 {
+                "@type": "ListItem",
+                "position": 7,
+                "url": "https://hhh.com.tw/search/lists/case/%E5%A4%A7%E5%9D%AA%E6%95%B8-keyword/",
+                "name":"大坪數豪宅",
+                "image":"https://hhh.com.tw/hhh_index/images/index/designer/07.png"
+                 }
+
+                  ] }, {"@type": "ListItem",
+                "position": 9,
+                "url":"https://hhh.com.tw/hhh_index.html",
+                "name": "活動頁banners區",
+                "itemListElement": [
+                         
+             {
+                "@type": "ListItem",
+                "position": 1,
+                "url": "https://hhh.com.tw/minordecor"
+            
+            }         
+                 ,{
+                    "@type": "ListItem",
+                    "position": 2,
+                    "url": "https://hhh.com.tw/brands/lists/"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 3,
+                    "url": "https://homeinspection.leju.com.tw/?utm_source=Google&utm_medium=Keywords&utm_campaign=homeinspection&gad_source=1&gclid=CjwKCAjww_iwBhApEiwAuG6ccOw8p8Bj3fcBK_LLSEsXZzXZwdytgpDI_Tb4BQqUi-Go_NVWQS_1shoCKWgQAvD_BwE"
+                
+                }
+              ] } , {"@type": "ListItem",
+                "position": 10,
+                "url":"https://hhh.com.tw/hhh_index.html",
+                "name": "主題企劃區",
+                "itemListElement": [
+                         
+             {
+                "@type": "ListItem",
+                "position": 1,
+                "url": "https://hhh.com.tw/columns/detail/7562",
+                "name":"讓小宅「空間最大化」!活用空隙的4大收納技巧",
+                "image":"https://cloud.hhh.com.tw/upload/_hcolumn/clogo_7562_20231218153604.jpg"
+
+            
+            }         
+                 ,{
+                    "@type": "ListItem",
+                    "position": 2,
+                    "url": "https://hhh.com.tw/columns/detail/6763",
+                    "name":"收納無死角!3個可以好好利用的畸零角落",
+                    "image":"https://cloud.hhh.com.tw/upload/_hcolumn/clogo_6763_20220818232508.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 3,
+                    "url": "https://hhh.com.tw/cases/detail/d/17267",
+                    "name":"轉場。入境│現代侘寂風│18坪",
+                    "image":"https://m.hhh.com.tw/upload/_hcase_img/name_17267_20240423145859.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 4,
+                    "url": "https://hhh.com.tw/cases/detail/d/17302",
+                    "name":"Everyday Object│北歐風│18坪",
+                    "image":"https://m.hhh.com.tw/upload/_hcase_img/name_17302_20240502154031.jpg"
+                
+                }
+              ] },  {"@type": "ListItem",
+                "position": 11,
+                "url":"https://hhh.com.tw/hhh_index.html",
+                "name": "推薦設計師",
+                "itemListElement": [
+                         
+             {
+                "@type": "ListItem",
+                "position": 1,
+                "url": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=995",
+                "image":"https://m.hhh.com.tw/upload/_hdesigner/img_path_995_20240604090023.jpg",
+                "title":"龍樺裝潢設計",
+                "name":"龍樺設計團隊"
+            
+            }         
+                 ,{
+                    "@type": "ListItem",
+                    "position": 2,
+                    "url": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=737",
+                    "image":"https://cloud.hhh.com.tw/upload/_hdesigner/img_path_737_20210819165617.jpg",
+                    "title":"極喀室內裝修設計有限公司",
+                    "name":"杜政坤 KEN"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 3,
+                    "url": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=736",
+                    "image":"https://cloud.hhh.com.tw/upload/_hdesigner/img_path_736_20230113113247.jpg",
+                    "title":"迪品空間設計",
+                    "name":"alaia(施芷穎)"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 4,
+                    "url": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=731",
+                    "image":"https://cloud.hhh.com.tw/upload/_hdesigner/img_path_731_20210728120031.png",
+                    "title":"雲頂設計 YU design",
+                    "name":"張禎毅、張耕文"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 5,
+                    "url": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=730",
+                    "image":"https://cloud.hhh.com.tw/upload/_hdesigner/img_path_730_20210713105617.jpg",
+                    "title":"沐熙空間設計",
+                    "name":"廖柏坤Kun"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 6,
+                    "url": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=725",
+                    "image":"https://cloud.hhh.com.tw/upload/_hdesigner/img_path_725_20210625163449.jpg",
+                    "title":"弦鉅設計有限公司",
+                    "name":"洪瑋寧"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 7,
+                    "url": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=723",
+                    "image":"https://m.hhh.com.tw/upload/_hdesigner/img_path_723_20240312115946.jpg",
+                    "title":"菓子空間室內設計",
+                    "name":"林慧珊"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 8,
+                    "url": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=720",
+                    "image":"https://m.hhh.com.tw/upload/_hdesigner/img_path_720_20240412104307.jpg",
+                    "title":"緣初設計",
+                    "name":"劉瀚陽、秦詣擎、陳正倫"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 9,
+                    "url": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=717",
+                    "image":"https://cloud.hhh.com.tw/upload/_hdesigner/img_path_717_20210512105515.jpg",
+                    "title":"玥木森室內裝修設計有限公司",
+                    "name":"彭惠惠"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 10,
+                    "url": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=716",
+                    "image":"https://cloud.hhh.com.tw/upload/_hdesigner/img_path_716_20210512182340.jpg",
+                    "title":"小寶優居-美好成家",
+                    "name":"小寶優居"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 11,
+                    "url": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=443",
+                    "image":"https://m.hhh.com.tw/upload/_hdesigner/img_path_443_20240524182618.jpg",
+                    "title":"法蘭德室內設計",
+                    "name":"吳秉霖 徐國棟 汪銘祥"
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 12,
+                    "url": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=931",
+                    "image":"https://cloud.hhh.com.tw/upload/_hdesigner/img_path_931_20231219103339.jpg",
+                    "title":"森河空間規劃",
+                    "name":"黃慶豪"
+                }
+              ] },  {"@type": "ListItem",
+                "position": 12,
+                "url":"https://hhh.com.tw/hhh_index.html",
+                "name": "編輯精選",
+                "itemListElement": [
+                         
+             {
+                "@type": "ListItem",
+                "position": 1,
+                "url": "https://hhh.com.tw/columns/detail/7811/",
+                "name":"一鍵聯動 任何椅子秒變按摩椅!全球首創OSIM隱形按摩椅",
+                "image":"https://m.hhh.com.tw/upload/_hcolumn/clogo_7811_20240606171323.jpg",
+                "tag":"['按摩椅', 'OSIM']"
+            
+            }         
+                 ,{
+                    "@type": "ListItem",
+                    "position": 2,
+                    "url": "https://hhh.com.tw/columns/detail/7810/",
+                    "name":"英國設計居家品牌 Joseph Joseph 插旗台灣!用聰明設計玩轉日常創意 多合一、好收納、聰明家務的創意美學",
+                    "image":"https://m.hhh.com.tw/upload/_hcolumn/clogo_7810_20240605182103.jpg",
+                    "tag":"['品牌新訊', '居家用品']"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 3,
+                    "url": "https://hhh.com.tw/columns/detail/7809/",
+                    "name":"廚安×食安問題一次解決!IH感應爐、無毒鈦鍋與「安心生鮮超市」讓主婦好放心",
+                    "image":"https://m.hhh.com.tw/upload/_hcolumn/clogo_7809_20240605152115.JPG",
+                    "tag":"['廚安', '食安', 'IH感應爐', '無毒鈦鍋']"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 4,
+                    "url": "https://hhh.com.tw/columns/detail/7807/",
+                    "name":"露營系 YouTuber 夏季出遊攻略 分享5款必備凹豆露營神器",
+                    "image":"https://m.hhh.com.tw/upload/_hcolumn/clogo_7807_20240530095729.jpg",
+                    "tag":"['家電', '露營家電', '戶外家電', '循環扇', '三合一空調']"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 5,
+                    "url": "https://hhh.com.tw/columns/detail/7762/",
+                    "name":"你用除濕機的方式對嗎?5個NG用法,小心引發火災!",
+                    "image":"https://m.hhh.com.tw/upload/_hcolumn/clogo_7762_20240425175355.jpg",
+                    "tag":"['除濕機', '梅雨季', '濕度']"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 6,
+                    "url": "https://hhh.com.tw/columns/detail/6909/",
+                    "name":"17坪小空間客變收納機能宅 高低差增取採光和最佳坪效",
+                    "image":"https://images.hhh.com.tw/uploads/_hcolumn_orig/point-index02_471.jpg",
+                    "tag":"['好宅專輯', '小坪數', '居家設計', '小宅', '客變', '坪效']"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 7,
+                    "url": "https://hhh.com.tw/columns/detail/7790/",
+                    "name":"英皇室寢具品牌春夏4款埃及棉寢具 給肌膚頂級觸感體驗",
+                    "image":"https://m.hhh.com.tw/upload/_hcolumn/clogo_7790_20240528105815.jpg",
+                    "tag":"['品牌好物', '寢具', '日比家族', '織品', '臥室']"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 8,
+                    "url": "https://hhh.com.tw/columns/detail/7300/",
+                    "name":"【小宅裝修必學】家裡櫃體過多反而不好!4大收納設計原則極致發揮坪效",
+                    "image":"https://images.hhh.com.tw/uploads/_hcolumn_orig/point02_545_06.jpg",
+                    "tag":"['小坪數', '收納設計', '收納櫃', '小宅', '精選好書', '設計提案']"
+                
+                }
+              ] } , {"@type": "ListItem",
+                "position": 13,
+                "url":"https://hhh.com.tw/hhh_index.html",
+                "name": "最夯設計",
+                "itemListElement": [
+                         
+             {
+                "@type": "ListItem",
+                "position": 1,
+                "url": "https://hhh.com.tw/cases/detail/17398/",
+                "name":"灰階潤感柔光美型小宅│17坪",
+                "image":"https://m.hhh.com.tw/upload/_hcase_img/name_17398_20240606162547.jpg",
+                "tag":"['現代風', '小坪數', '新成屋']"
+            
+            }         
+                 ,{
+                    "@type": "ListItem",
+                    "position": 2,
+                    "url": "https://hhh.com.tw/cases/detail/17397/",
+                    "name":"BLANCHE 返璞|無印風|23坪",
+                    "image":"https://m.hhh.com.tw/upload/_hcase_img/name_17397_20240606112633.jpg",
+                    "tag":"['無印風', '標準格局', '新成屋']"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 3,
+                    "url": "https://hhh.com.tw/cases/detail/17396/",
+                    "name":"弧光淡色 秀麗棲所|美式風|26坪",
+                    "image":"https://m.hhh.com.tw/upload/_hcase_img/name_17396_20240606102254.jpg",
+                    "tag":"['', '別墅/透天', '新成屋']"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 4,
+                    "url": "https://hhh.com.tw/cases/detail/17395/",
+                    "name":"序曲concerto│現代風│100坪",
+                    "image":"https://m.hhh.com.tw/upload/_hcase_img/name_17395_20240606155038.jpg",
+                    "tag":"['現代風', '別墅/透天', '新成屋']"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 5,
+                    "url": "https://hhh.com.tw/cases/detail/17394/",
+                    "name":"宴。遊│現代風│35坪",
+                    "image":"https://m.hhh.com.tw/upload/_hcase_img/name_17394_20240605172409.jpg",
+                    "tag":"['現代風', '標準格局', '新成屋']"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 6,
+                    "url": "https://hhh.com.tw/cases/detail/17393/",
+                    "name":"晨曦之境│現代北歐無印風│17坪",
+                    "image":"https://m.hhh.com.tw/upload/_hcase_img/name_17393_20240605154149.jpg",
+                    "tag":"['混搭風', '現代風', '北歐風', '無印風', '小坪數', '新成屋']"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 7,
+                    "url": "https://hhh.com.tw/cases/detail/17392/",
+                    "name":"漫步法式美寓│法式清奢風│35坪",
+                    "image":"https://m.hhh.com.tw/upload/_hcase_img/name_17392_20240605145635.jpg",
+                    "tag":"['輕奢風', '法式輕奢風', '標準格局', '老屋翻新']"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 8,
+                    "url": "https://hhh.com.tw/cases/detail/17391/",
+                    "name":"隅美|現代風|53坪",
+                    "image":"https://m.hhh.com.tw/upload/_hcase_img/name_17391_20240605115128.jpg",
+                    "tag":"['現代風', '簡約風', '標準格局', '中古屋']"
+                
+                }
+              ] },  {"@type": "ListItem",
+                "position": 14,
+                "url":"https://hhh.com.tw/hhh_index.html",
+                "name": "影音實錄",
+                "itemListElement": [
+                         
+             {
+                "@type": "ListItem",
+                "position": 1,
+                "url": "https://www.youtube.com/watch?v=8W2BQ22br1U",
+                "name":"坪數不夠怎麼辦?小改動隔出大空間!! 連電視牆也有貓「匿」?!",
+                "image":"https://img.youtube.com/vi/8W2BQ22br1U/hqdefault.jpg"
+            
+            }         
+                 ,{
+                    "@type": "ListItem",
+                    "position": 2,
+                    "url": "https://www.youtube.com/watch?v=TLvIR78JEY0",
+                    "name":"什麼樣的油漆竟然要45萬!!功能vs美觀,哪種油漆適合你!? 達人帶你挑,DIY也能輕鬆上手!|【沒有山姆的聊天室】Ep.8",
+                    "image":"https://img.youtube.com/vi/TLvIR78JEY0/hqdefault.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 3,
+                    "url": "https://www.youtube.com/watch?v=Yadsg7v1kdk",
+                    "name":"屋主自有礦山!進口石材價格也可以親民!? 選對這個產區,小資裝修也能有高CP石材!?",
+                    "image":"https://img.youtube.com/vi/Yadsg7v1kdk/hqdefault.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 4,
+                    "url": "https://www.youtube.com/watch?v=Ob3y5ZIH19k",
+                    "name":"10坪的長形空間,面寬不夠怎麼辦? 用這六招翻轉格局,不僅房間數激增、多工又收納,簡直太神!",
+                    "image":"https://img.youtube.com/vi/Ob3y5ZIH19k/hqdefault.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 5,
+                    "url": "https://www.youtube.com/watch?v=UrmMk7mT_qE",
+                    "name":"住上下樓的姊妹,串門子不想有回自己家的Fu? 「生活實踐家」如何打造二元姊妹宅?!",
+                    "image":"https://img.youtube.com/vi/UrmMk7mT_qE/hqdefault.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 6,
+                    "url": "https://www.youtube.com/watch?v=yXkmZdGxCqU",
+                    "name":"27坪 客變宅|預售屋隨家庭成員增加怎麼辦?! 他用這些設計滿足了3人2貓1狗!!",
+                    "image":"https://img.youtube.com/vi/yXkmZdGxCqU/hqdefault.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 7,
+                    "url": "https://www.youtube.com/watch?v=jd1u8mdf9F0",
+                    "name":"老屋翻新優化動線! 「設計狂小姐」用這個設計放大空間,剛柔美學之下還有「浪花主牆」?!",
+                    "image":"https://img.youtube.com/vi/jd1u8mdf9F0/hqdefault.jpg"
+                
+                }
+                     
+                 ,{
+                    "@type": "ListItem",
+                    "position": 8,
+                    "url": "https://www.youtube.com/watch?v=4T0itR5Iq0A",
+                    "name":"個位數小宅增大術,用「半個S」就能拉大空間!? 木頭穿心,他家住在樹屋裡!?|程作設計-羅士承| 幸福60秒",
+                    "image":"https://img.youtube.com/vi/4T0itR5Iq0A/hqdefault.jpg"
+                
+                }
+              ] }    ]} </script>
+  <!-- google seo rich-results-down-->
+  <script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-W3RJHTZ"></script>
+  <script src="https://connect.facebook.net/signals/config/585285442299590?v=2.9.100&amp;r=stable" async=""></script>
+  <!--                                    -->
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1" />
+  <meta http-equiv="Cache-Control" content="no-cache" />
+  <meta name="copyright" content="2021 © 幸福空間 │ All Rights Reserved." />
+  <meta name="creation-date" content="2021-08-05 12:00:04 GTM+8" />
+  <meta name="description" content="讓幸福室內設計,走進您的生活,解決您的裝潢問
+    題!幸福空間是台灣最大的室內設計、設計師與設計個案影音平台之一,找尋室內設計點子與案例我
+    們一定能幫助你!" />
+  <meta name="distribution" content="Taiwan" />
+  <meta name="keywords" content="" />
+  <meta name="revisit-after" content="1 days" />
+  <meta name="robots" content="all" />
+  <meta name="format-detection" content="telephone=no" />
+
+  <meta property="og:description" content="讓幸福室內設計,走進您的生活,解決您的裝潢問題!
+    幸福空間是台灣最大的室內設計、設計師與設計個案影音平台之一,找尋室內設計點子與案例我們一定能幫助
+    你!" />
+  <meta property="og:site_name" content="幸福空間" />
+  <meta property="og:title" content="幸福空間 - 台灣最大的室內設計、設計師與設計個案影音平台" />
+  <meta property="og:type" content="website" />
+  <meta property="og:locale" content="zh_TW" />
+
+  <title>幸福空間 - 室內設計、裝潢、居家生活、影音平台</title>
+
+  <link rel="icon" href="hhh_index/images/favicon.ico" />
+  <!-- Fontawesome -->
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
+    integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous" />
+  <!-- Bootstrap -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
+  <!-- Google Font -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500&display=swap" rel="stylesheet" />
+  <!-- Slick -->
+  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
+  <link rel="stylesheet" href="./css/slick.css" />
+  <!-- CSS -->
+  <link rel="stylesheet" href="./css/reset.css" />
+  <link rel="stylesheet" href="./css/all.css" />
+  <link rel="stylesheet" href="./css/index.css" />
+
+  <!-- <link rel="stylesheet" type="text/css" href="hhh_index/css/slick.css?w=3gygd" />
+  <link rel="stylesheet" type="text/css" href="hhh_index/css/slick-theme.css?dd=3gydg2" />
+  <link rel="stylesheet" href="hhh_index/css/list-style.css?fa=3dfgdffyf23" />
+  <link rel="stylesheet" href="hhh_index/css/style.css?fa=gfry1yfd" /> -->
+
+  <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "LocalBusiness",
+        "@id": "https://hhh.com.tw/",
+        "image": ["https://hhh.com.tw/_nuxt/img/def1b0a.svg"],
+        "name": "幸福空間股份有限公司",
+        "address": "110台北市信義區菸廠路88號五樓之6",
+        "url": "https://hhh.com.tw/",
+        "telephone": "+886-2-6617-0123"
+      }
+    </script>
+
+  <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "Organization",
+        "url": "https://hhh.com.tw/",
+        "logo": "https://hhh.com.tw/_nuxt/img/def1b0a.svg",
+        "name": "幸福空間",
+        "sameAs": [
+          "https://www.facebook.com/hhhfb/",
+          "https://page.line.me/ovs4341s",
+          "https://www.youtube.com/user/gorgeousspace",
+          "https://www.instagram.com/gorgeous_space/"
+        ],
+        "contactPoint": [
+          {
+            "@type": "ContactPoint",
+            "areaServed": "TW",
+            "telephone": "+886-2-6617-0123",
+            "contactType": "customer service",
+            "availableLanguage": "Chinese"
+          }
+        ]
+      }
+    </script>
+
+  <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        "name": "幸福空間-室內設計、裝潢、居家生活、影音平台",
+        "author": "幸福空間",
+        "url": "https://hhh.com.tw/",
+        "potentialAction": {
+          "@type": "SearchAction",
+          "target": "https://hhh.com.tw/search/lists/case/{search_term_string}-keyword/",
+          "query-input": "required name=search_term_string"
+        }
+      }
+    </script>
+  <link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.hhh.com.tw/hhh_index.html" />
+  <link rel="canonical" href="https://hhh.com.tw/hhh_index.html" />
+
+</head>
+
+<body style="overflow-x: hidden" id="top" class="wholeBody unscrollable">
+
+  <!-- Google Tag Manager (noscript) -->
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W3RJHTZ" height="0" width="0"
+      style="display:none;visibility:hidden"></iframe></noscript>
+  <!-- End Google Tag Manager (noscript) -->
+
+  <!-- <section class="top-block w-100 position-relative">
+    <button class="text-center slider-close-btn d-none d-lg-block">
+      <i class="fas fa-chevron-up" style="transform: translateY(-2px)"></i>
+      <p>隱藏</p>
+    </button>
+    <div class="container-fluid mx-auto slider-content" style="max-width: 1300px">
+      <div class="top-block-slider"></div>
+      <div class="bullet-list"></div>
+    </div>
+  </section> -->
+
+  <!-- 動態載入 -->
+   <div id="topCarousel"></div>
+  <div id="navbar">
+    <nav class="navbar navbar-expand-lg navbar-light bg-light p-2 p-lg-0">
+      <div class="container-fluid flex-row-reverse flex-lg-row">
+        <button id="search-btn" data-bs-toggle="modal" data-bs-target="#searchModal"
+          class="d-block d-lg-none search-btn mb-1">
+          <img src="https://hhh.com.tw/hhh_index/images/icon/ionic-ios-search.svg" alt="" />
+        </button>
+        <a href="https://hhh.com.tw/">
+          <img alt="logo" src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" width="130" class="logo" />
+        </a>
+        <a href="https://hhh.com.tw/calculator_request/index.html" class="renovation-btn d-none d-lg-block"
+          target="_blank">裝修計算機</a>
+        <button class="navbar-toggler p-0" type="button" data-bs-toggle="collapse"
+          data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+          aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <span class="shadow-item"></span>
+        <div class="collapse navbar-collapse mt-3 mt-lg-0" id="navbarSupportedContent">
+          <ul class="navbar-nav mb-2 mb-lg-0 ms-auto align-items-lg-center">
+            <!-- <li class="nav-item">
+              <a class="nav-link active" aria-current="page" href="#">Home</a>
+            </li>
+
+            <li class="nav-item">
+              <div class="d-flex">
+                <a class="nav-link d-flex align-items-center w-100 mt-lg-2" href="https://shop.hhh.com.tw/"
+                  target="_blank" style="color: var(--sub-color)">
+                  <img class="d-block d-lg-none" src="./img/menu/cart.svg" alt="">
+                  <span class="fw-bold ms-3 ms-lg-0">+好物</span>
+                </a>
+              </div>
+            </li> -->
+
+            <li class="nav-item dropdown">
+              <!-- <a href="https://hhh.com.tw/columns/lists/all-columntypea/" target="" data-bs-toggle="dropdown"
+                aria-expanded="false" class="nav-link dropdown-toggle">
+                <span>專欄文章</span>
+              </a> -->
+
+              <span class="nav-link d-flex align-items-center justify-content-between mt-lg-2" role="button"
+                data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                <section class="d-flex">
+                  <img src="https://hhh.com.tw/hhh_index/images/menu/pen.svg" alt="" class="d-block d-lg-none">
+                  <a onclick="window.location.href='https://hhh.com.tw/columns/lists/all-columntypea/';">
+                    <p class="ms-3 ms-lg-0 d-flex"><span class="search-text">尋找</span>專欄文章</p>
+                  </a>
+                </section>
+                <div class="expand d-block d-lg-none"><i class="fas fa-chevron-down"></i></div>
+              </span>
+
+              <ul class="dropdown-menu dropdown-level-width py-0 py-lg-2 list">
+
+                <li class="nav-item dropdown dropdown-sub hover-block m-0">
+                  <div class="dropdown ps-0 ps-lg-4 pe-0 pe-lg-2">
+                    <span class="nav-link d-flex align-items-center justify-content-between mt-lg-1 py-2" role="button"
+                      data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                      <a onclick="window.location.href='https://hhh.com.tw/columns/lists/editorchoose-columntypea/';"
+                        class="submenu">
+                        <p>編輯精選</p>
+                      </a>
+                      <div class="expand">
+                        <i aria-hidden="true" class="fas fa-chevron-down d-block d-lg-none"></i>
+                        <i aria-hidden="true" class="v-icon fa fa-angle-right theme--light d-none d-lg-block"
+                          style="font-size: 14px"></i>
+                      </div>
+                    </span>
+                    <ul class="dropdown-menu dropdown-level-width p-0 p-lg-2">
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/editorchoose-columntypea/hometrends-columntypeb/"
+                          target="" class="dropdown-item py-2">居家趨勢</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/editorchoose-columntypea/hotrank-columntypeb/"
+                          target="" class="dropdown-item py-2">人氣排行</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/editorchoose-columntypea/archdesign-columntypeb/"
+                          target="" class="dropdown-item py-2">建築設計</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/editorchoose-columntypea/styleselection-columntypeb/"
+                          target="" class="dropdown-item py-2">風格選店</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/editorchoose-columntypea/charitable-columntypeb/"
+                          target="" class="dropdown-item py-2">公益活動</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/editorchoose-columntypea/exhibition-columntypeb/"
+                          target="" class="dropdown-item py-2">展演資訊</a>
+                      </li>
+                    </ul>
+                  </div>
+                </li>
+
+                <li class="nav-item dropdown dropdown-sub hover-block m-0">
+                  <div class="dropdown ps-0 ps-lg-4 pe-0 pe-lg-2">
+                    <span class="nav-link d-flex align-items-center justify-content-between mt-lg-1 py-2" role="button"
+                      data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                      <a onclick="window.location.href='https://hhh.com.tw/columns/lists/housedesign-columntypea/';"
+                        class="submenu">
+                        <p>居家設計</p>
+                      </a>
+                      <div class="expand">
+                        <i aria-hidden="true" class="fas fa-chevron-down d-block d-lg-none"></i>
+                        <i aria-hidden="true" class="v-icon fa fa-angle-right theme--light d-none d-lg-block"
+                          style="font-size: 14px"></i>
+                      </div>
+                    </span>
+                    <ul class="dropdown-menu dropdown-level-width p-0 p-lg-2">
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/housedesign-columntypea/smallhouse-columntypeb/"
+                          target="" class="dropdown-item py-2">小宅規劃</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/housedesign-columntypea/oldhouse-columntypeb/"
+                          target="" class="dropdown-item py-2">老屋翻新</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/housedesign-columntypea/stylebuild-columntypeb/"
+                          target="" class="dropdown-item py-2">風格營造</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/housedesign-columntypea/color-columntypeb/" target=""
+                          class="dropdown-item py-2">配色佈置</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/housedesign-columntypea/goodhouse-columntypeb/"
+                          target="" class="dropdown-item py-2">好宅特輯</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/housedesign-columntypea/proposal-columntypeb/"
+                          target="" class="dropdown-item py-2">設計提案</a>
+                      </li>
+                    </ul>
+                  </div>
+                </li>
+
+                <li class="nav-item dropdown dropdown-sub hover-block m-0">
+                  <div class="dropdown ps-0 ps-lg-4 pe-0 pe-lg-2">
+                    <span class="nav-link d-flex align-items-center justify-content-between mt-lg-1 py-2" role="button"
+                      data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                      <a onclick="window.location.href='https://hhh.com.tw/columns/lists/decoration-columntypea/';"
+                        class="submenu">
+                        <p>裝修前線</p>
+                      </a>
+                      <div class="expand">
+                        <i aria-hidden="true" class="fas fa-chevron-down d-block d-lg-none"></i>
+                        <i aria-hidden="true" class="v-icon fa fa-angle-right theme--light d-none d-lg-block"
+                          style="font-size: 14px"></i>
+                      </div>
+                    </span>
+                    <ul class="dropdown-menu dropdown-level-width p-0 p-lg-2">
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/decoration-columntypea/news-columntypeb/" target=""
+                          class="dropdown-item py-2">新聞最前線</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/decoration-columntypea/allocation-columntypeb/"
+                          target="" class="dropdown-item py-2">預算分配</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/decoration-columntypea/process-columntypeb/" target=""
+                          class="dropdown-item py-2">施工流程</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/decoration-columntypea/knowledge-columntypeb/"
+                          target="" class="dropdown-item py-2">建材知識</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/decoration-columntypea/decorating-columntypeb/"
+                          target="" class="dropdown-item py-2">裝潢撇步</a>
+                      </li>
+                    </ul>
+                  </div>
+                </li>
+
+
+                <li class="nav-item dropdown dropdown-sub hover-block m-0">
+                  <div class="dropdown ps-0 ps-lg-4 pe-0 pe-lg-2">
+                    <span class="nav-link d-flex align-items-center justify-content-between mt-lg-1 py-2" role="button"
+                      data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                      <a onclick="window.location.href='https://hhh.com.tw/columns/lists/plus-columntypea/';"
+                        class="submenu">
+                        <p>生活 PLUS</p>
+                      </a>
+                      <div class="expand">
+                        <i aria-hidden="true" class="fas fa-chevron-down d-block d-lg-none"></i>
+                        <i aria-hidden="true" class="v-icon fa fa-angle-right theme--light d-none d-lg-block"
+                          style="font-size: 14px"></i>
+                      </div>
+                    </span>
+                    <ul class="dropdown-menu dropdown-level-width p-0 p-lg-2">
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/plus-columntypea/fengshui-columntypeb/" target=""
+                          class="dropdown-item py-2">居家風水</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/plus-columntypea/housekeeping-columntypeb/" target=""
+                          class="dropdown-item py-2">家事清潔</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/plus-columntypea/storageskills-columntypeb/" target=""
+                          class="dropdown-item py-2">收納技巧</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/plus-columntypea/renovation-columntypeb/" target=""
+                          class="dropdown-item py-2">改造修繕</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/plus-columntypea/retire-columntypeb/" target=""
+                          class="dropdown-item py-2">退休好幸福</a>
+                      </li>
+                    </ul>
+                  </div>
+                </li>
+
+                <li class="nav-item dropdown dropdown-sub hover-block m-0">
+                  <div class="dropdown ps-0 ps-lg-4 pe-0 pe-lg-2">
+                    <span class="nav-link d-flex align-items-center justify-content-between mt-lg-1 py-2" role="button"
+                      data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                      <a onclick="window.location.href='https://hhh.com.tw/columns/lists/gooditem-columntypea/';"
+                        class="submenu">
+                        <p>品牌好物</p>
+                      </a>
+                      <div class="expand">
+                        <i aria-hidden="true" class="fas fa-chevron-down d-block d-lg-none"></i>
+                        <i aria-hidden="true" class="v-icon fa fa-angle-right theme--light d-none d-lg-block"
+                          style="font-size: 14px"></i>
+                      </div>
+                    </span>
+                    <ul class="dropdown-menu dropdown-level-width p-0 p-lg-2">
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/gooditem-columntypea/furnishings-columntypeb/"
+                          target="" class="dropdown-item py-2">家具家飾</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/gooditem-columntypea/appliances-columntypeb/"
+                          target="" class="dropdown-item py-2">美型家電</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/gooditem-columntypea/recommend-columntypeb/" target=""
+                          class="dropdown-item py-2">推薦廚衛</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/gooditem-columntypea/homegoods-columntypeb/" target=""
+                          class="dropdown-item py-2">居家好物</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/gooditem-columntypea/quality-columntypeb/" target=""
+                          class="dropdown-item py-2">優質建材</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/gooditem-columntypea/brandnews-columntypeb/" target=""
+                          class="dropdown-item py-2">品牌新訊</a>
+                      </li>
+                    </ul>
+                  </div>
+                </li>
+
+                <li class="nav-item dropdown dropdown-sub hover-block m-0">
+                  <div class="dropdown ps-0 ps-lg-4 pe-0 pe-lg-2">
+                    <span class="nav-link d-flex align-items-center justify-content-between mt-lg-1 py-2" role="button"
+                      data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                      <a onclick="window.location.href='https://hhh.com.tw/columns/lists/focus-columntypea/';"
+                        class="submenu">
+                        <p>房市焦點</p>
+                      </a>
+                      <div class="expand">
+                        <i aria-hidden="true" class="fas fa-chevron-down d-block d-lg-none"></i>
+                        <i aria-hidden="true" class="v-icon fa fa-angle-right theme--light d-none d-lg-block"
+                          style="font-size: 14px"></i>
+                      </div>
+                    </span>
+                    <ul class="dropdown-menu dropdown-level-width p-0 p-lg-2">
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/focus-columntypea/housingnews-columntypeb/" target=""
+                          class="dropdown-item py-2">房市新聞</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/focus-columntypea/specsearch-columntypeb/" target=""
+                          class="dropdown-item py-2">建案特搜</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/focus-columntypea/buyandsell-columntypeb/" target=""
+                          class="dropdown-item py-2">買屋賣屋</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/focus-columntypea/mortgage-columntypeb/" target=""
+                          class="dropdown-item py-2">房貸稅務</a>
+                      </li>
+                      <li>
+                        <a href="https://hhh.com.tw/columns/lists/focus-columntypea/renting-columntypeb/" target=""
+                          class="dropdown-item py-2">租房須知</a>
+                      </li>
+                    </ul>
+                  </div>
+                </li>
+
+                <li class="nav-item dropdown dropdown-sub hover-block m-0">
+                  <div class="dropdown ps-0 ps-lg-4 pe-0 pe-lg-2">
+                    <a class="nav-link ps-5 ps-lg-2 py-3 py-lg-2" href="https://hhh.com.tw/topic/lists/1-page/new-sort/"
+                      class="submenu">
+                      <p>主題企劃</p>
+                    </a>
+                  </div>
+                </li>
+              </ul>
+            </li>
+
+            <!-- <li class="nav-item">
+              <a href="https://hhh.com.tw/about/calculator/" target="_blank" class="nav-link">估預算</a>
+            </li>
+            <li class="nav-item dropdown"><a href="https://hhh.com.tw/photos/index/" target="" class="nav-link">
+                <span>找風格</span>
+              </a>
+              <ul class="dropdown-menu dropdown-level-width">
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2">
+                    <a href="https://hhh.com.tw/photos/lists/nordic-style/" class="submenu dropdown-item">北歐風</a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2"><a
+                      href="https://hhh.com.tw/photos/lists/modern-style/" class="submenu dropdown-item">現代風</a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2"><a
+                      href="https://hhh.com.tw/photos/lists/industry-style/" class="submenu dropdown-item">工業風</a>
+                  </div>
+                </li>
+              </ul>
+            </li> -->
+
+            <li class="nav-item dropdown">
+              <span class="nav-link d-flex align-items-center justify-content-between mt-lg-2" role="button"
+                data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                <section class="d-flex">
+                  <img src="https://hhh.com.tw/hhh_index/images/menu/designs.svg" alt="" class="d-block d-lg-none">
+                  <a onclick="window.location.href='https://hhh.com.tw/cases/lists/';">
+                    <p class="ms-3 ms-lg-0 d-flex"><span class="search-text">尋找</span>空間靈感</p>
+                  </a>
+                </section>
+                <div class="expand d-block d-lg-none"><i class="fas fa-chevron-down"></i></div>
+              </span>
+
+              <ul class="dropdown-menu dropdown-level-width py-0 py-lg-2 list">
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2">
+                    <a href="https://hhh.com.tw/cases/lists/small-ctype/" class="submenu dropdown-item">小坪數</a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2">
+                    <a href="https://hhh.com.tw/cases/lists/renovation-condition/"
+                      class="submenu dropdown-item">老屋翻新</a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2">
+                    <a href="https://hhh.com.tw/search/lists/case/%E9%A2%A8%E6%B0%B4-keyword/"
+                      class="submenu dropdown-item">風水</a>
+                  </div>
+                </li>
+              </ul>
+            </li>
+
+            <li class="nav-item dropdown">
+              <span class="nav-link d-flex align-items-center justify-content-between mt-lg-2" role="button"
+                data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                <section class="d-flex">
+                  <img src="https://hhh.com.tw/hhh_index/images/menu/person.svg" alt="" class="d-block d-lg-none">
+                  <a onclick="window.location.href='https://hhh.com.tw/designers/lists/';">
+                    <p class="ms-3 ms-lg-0 d-flex"><span class="search-text">尋找</span>設計師</p>
+                  </a>
+                </section>
+                <div class="expand d-block d-lg-none"><i class="fas fa-chevron-down"></i></div>
+              </span>
+
+              <ul class="dropdown-menu dropdown-level-width py-0 py-lg-2 list">
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2">
+                    <a href="https://hhh.com.tw/designers/lists/" class="submenu dropdown-item">設計師總覽</a>
+                  </div>
+                </li>
+
+                <!-- <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2">
+                    <a href="https://event.hhh.com.tw/EmergingDesigners/" target="_blank"
+                      class="submenu dropdown-item">新銳設計師</a>
+                  </div>
+                </li> -->
+
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2">
+                    <a href="https://event.hhh.com.tw/2023-Most-Favorite-Designers/index.php" target="_blank"
+                      class="submenu dropdown-item">觀眾最愛設計師</a>
+                  </div>
+                </li>
+
+                <!-- <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2">
+                    <a href="https://event.hhh.com.tw/2023trends/" target="_blank"
+                      class="submenu dropdown-item">大師有約</a>
+                  </div>
+                </li> -->
+
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2">
+                    <a href="https://event.hhh.com.tw/topglory/" target="_blank" class="submenu dropdown-item">Glory
+                      國際大賞</a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2">
+                    <a href="https://hhh.com.tw/event170427/" target="_blank" class="submenu dropdown-item">老屋翻新</a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2">
+                    <a href="https://hhh.com.tw/minordecor" target="_blank" class="submenu dropdown-item">輕裝修方案</a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2">
+                    <a href="https://matching.framer.website/" target="_blank" class="submenu dropdown-item">居家快易便</a>
+                  </div>
+                </li>
+
+              </ul>
+            </li>
+
+            <li class="nav-item dropdown">
+              <span class="nav-link d-flex align-items-center justify-content-between mt-lg-2" role="button"
+                data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                <section class="d-flex">
+                  <img src="https://hhh.com.tw/hhh_index/images/menu/videos.svg" alt="" class="d-block d-lg-none">
+                  <a onclick="window.location.href='https://hhh.com.tw/videos/lists/';">
+                    <p class="ms-3 ms-lg-0 d-flex"><span class="search-text">尋找</span>裝修影片</p>
+                  </a>
+                </section>
+                <div class="expand d-block d-lg-none"><i class="fas fa-chevron-down"></i></div>
+              </span>
+
+              <ul class="dropdown-menu dropdown-level-width py-0 py-lg-2 list">
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2">
+                    <a href="https://hhh.com.tw/videos/lists/" class="submenu dropdown-item">發燒影音</a>
+                  </div>
+                </li>
+
+                <!-- <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2">
+                    <a href="https://hhh.com.tw/video-list-5945tw.php" class="submenu dropdown-item">呼叫師傅</a>
+                  </div>
+                </li> -->
+
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2">
+                    <a href="https://hhh.com.tw/program/" class="submenu dropdown-item">TV 節目表</a>
+                  </div>
+                </li>
+              </ul>
+            </li>
+
+            <!-- <li class="nav-item dropdown"><a href="https://hhh.com.tw/products/lists/" target="" data-toggle="dropdown"
+                class="nav-link">居家商品</a>
+              <ul class="dropdown-menu dropdown-level-width">
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2"><a
+                      href="https://hhh.com.tw/products/lists/" class="submenu dropdown-item">商品總覽</a></div>
+                </li>
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2"><a
+                      href="https://hhh.com.tw/products/lists/furniture-pcategorya/"
+                      class="submenu dropdown-item">傢俱</a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2"><a
+                      href="https://hhh.com.tw/products/lists/household-pcategorya/"
+                      class="submenu dropdown-item">家電</a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2"><a
+                      href="https://hhh.com.tw/products/lists/kitchen-pcategorya/" class="submenu dropdown-item">廚房</a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2"><a
+                      href="https://hhh.com.tw/products/lists/bathroom-pcategorya/" class="submenu dropdown-item">衛浴</a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2"><a
+                      href="https://hhh.com.tw/products/lists/lighting-pcategorya/" class="submenu dropdown-item">照明</a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2"><a
+                      href="https://hhh.com.tw/brands/lists/" class="submenu dropdown-item">品牌總覽</a></div>
+                </li>
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2"><a
+                      href="https://hhh.com.tw/brand-index.php?brand_id=194" target="_blank"
+                      class="submenu dropdown-item">軟裝佈置</a></div>
+                </li>
+                <li class="nav-item dropdown dropdown-sub">
+                  <div class="d-flex justify-content-between align-items-center py-2"><a
+                      href="https://event.hhh.com.tw/2021-Top-Brands/index.php" target="_blank"
+                      class="submenu dropdown-item">消費者愛用品牌</a></div>
+                </li>
+              </ul>
+            </li> -->
+
+            <!-- <li class="nav-item">
+              <div class="d-flex">
+                <a class="nav-link d-flex align-items-center w-100 mt-lg-2" href="https://hhh.com.tw/brands/lists/"
+                  target="_blank">
+                  <img src="https://hhh.com.tw/hhh_index/images/menu/sofa.svg" alt="" height="22"
+                    class="d-block d-lg-none">
+                  <span class="ms-3 ms-lg-0">品牌館</span>
+                </a>
+              </div>
+            </li> -->
+
+            <li class="nav-item">
+              <div class="d-flex">
+                <a class="nav-link d-flex align-items-center w-100 mt-lg-2" href="https://hhh.com.tw/builder/lists/">
+                  <img src="https://hhh.com.tw/hhh_index/images/menu/building.svg" alt="" height="22"
+                    class="d-block d-lg-none">
+                  <span class="ms-3 ms-lg-0 d-flex"><span class="search-text">尋找</span>新建案</span>
+                </a>
+              </div>
+            </li>
+            <!--
+        <li class="nav-item">
+          <div class="d-flex">
+            <a class="nav-link d-flex align-items-center w-100 mt-lg-2" href="https://hhh.com.tw/forum/category/"
+              target="_blank">
+              <img src="https://hhh.com.tw/hhh_index/images/menu/discuss.svg" alt="" class="d-block d-lg-none">
+              <span class="ms-3 ms-lg-0">討論區</span>
+            </a>
+          </div>
+        </li>
+-->
+          </ul>
+
+          <ul class="navbar-nav mb-2 mb-lg-0 ms-auto d-none d-lg-flex">
+            <li class="nav-item d-flex align-items-center mt-1" id="app_user">
+              <!-- <a class="nav-link" href="javascript:;" onclick="hhh_user_api_login()">
+            <section class="d-flex align-items-center">
+              <img src="https://hhh.com.tw/hhh_index/images/icon/material-people.svg" alt="" class="me-2 mt-1" />
+              <span class="pt-1">登入</span>
+            </section>
+          </a> -->
+
+            </li>
+            <!-- 暫時隱藏 -->
+            <!-- <li class="nav-item">
+          <a class="nav-link" href="#">
+            <section class="d-flex align-items-center">
+              <img src="https://hhh.com.tw/images/icon/feather-briefcase.svg" alt="" class="me-2">
+              <span class="pt-1">設計師登入</span>
+            </section>
+          </a>
+        </li> -->
+            <li class="nav-item d-none d-lg-block">
+              <a class="nav-link mt-1" href="javascript:;" type="button" data-bs-toggle="modal"
+                data-bs-target="#searchModal">
+                <span>
+                  <button type="button" class="search-btn">
+                    <img src="https://hhh.com.tw/hhh_index/images/icon/ionic-ios-search.svg" alt="" />
+                  </button>
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+
+
+
+
+
+
+  </div>
+
+  <!-- searchModal -->
+  <div class="modal fade search-modal" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel"
+    aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+      <div class="modal-content">
+        <div class="modal-body">
+          <div class="input-group">
+            <input type="text" class="form-control keyword" placeholder="請輸入關鍵字" aria-label="Please enter keywords"
+              aria-describedby="search-input" />
+            <span class="input-group-text" id="search-input">全站搜尋</span>
+          </div>
+        </div>
+        <section class="keyword-list">
+          <span>熱搜關鍵字:</span>
+          <ul>
+            <li>客變</li>
+            <li>小坪數</li>
+            <li>老屋翻新</li>
+            <li>收納</li>
+            <li>軟裝佈置</li>
+            <li>新手裝修</li>
+            <li>風水</li>
+            <li>北歐風</li>
+          </ul>
+        </section>
+      </div>
+    </div>
+  </div>
+
+  <!-- <section class="w-100 hero">
+    <div style="padding:0;margin:0;">
+      <img class="img-fluid w-100 hero__img" src="" alt="">
+    </div>
+  </section> -->
+  <div class="d-flex justify-content-center">
+    <div class="banner-content">
+      <div class="banner-slider"></div>
+      <div class="progress m-0" role="progressbar" aria-valuemin="0" aria-valuemax="100">
+        <span class="slider-label sr-only"></span>
+      </div>
+    </div>
+  </div>
+
+  <div class="loading-item">
+    <img src="./img/loadings.gif" alt="" />
+  </div>
+
+  <div class="index-content">
+    <div class="container">
+      <p class="describe d-none d-md-block">
+        在幸福空間上找到最適合自己的<span>空間解決方案</span>
+      </p>
+      <p class="describe d-block d-md-none">
+        在幸福空間上找到 <br />
+        最適合自己的<span>空間解決方案</span>
+      </p>
+      <div class="row card-item top-card my-5">
+        <div class="col-6 col-md-4">
+          <a href="https://hhh.com.tw/photos/index/" target="_blank">找尋設計靈感<span></span></a>
+        </div>
+        <div class="col-6 col-md-4">
+          <a href="https://hhh.com.tw/calculator_request/index.html" target="_blank">免費裝修諮詢<span></span></a>
+        </div>
+        <!--
+        <div class="col-6 col-md-3">
+          <a href="https://hhh.com.tw/about/calculator/" target="_blank">預估裝修費用<span></span></a>
+        </div>
+-->
+        <div class="col-6 col-md-4">
+          <a href="https://hhh.com.tw/minordecor" target="_blank" class="bag-btn">
+
+            輕裝修方案<span></span>
+          </a>
+
+          <!--
+          <a href="https://shop.hhh.com.tw/" target="_blank" class="bag-btn">
+            <section>
+
+              <img src="./img/icon/bag-shopping-solid.svg" alt="嚴選好物">
+              <img src="./img/icon/bag-shopping-solid.svg" alt="嚴選好物">
+
+            </section>
+            嚴選好物<span></span>
+          </a>
+-->
+        </div>
+      </div>
+
+      <div class="banner-content">
+        <div class="options-slider"></div>
+      </div>
+
+      <div class="options-content">
+        <h5>依照<span>空間</span>尋找商品</h5>
+        <div class="space-slider slider-00">
+          <!-- 動態載入 -->
+        </div>
+        <div class="progress item-00" role="progressbar" aria-valuemin="0" aria-valuemax="100">
+          <span class="slider-label sr-only"></span>
+        </div>
+
+        <h5 class="mt-5">最新<span>主打</span>商品</h5>
+        <div class="options-slider slider-01">
+          <!-- 動態載入 -->
+        </div>
+        <div class="progress item-01" role="progressbar" aria-valuemin="0" aria-valuemax="100">
+          <span class="slider-label sr-only"></span>
+        </div>
+
+        <h5 class="slider-01-title mt-5">依照<span>風格</span>瀏覽設計</h5>
+        <div class="options-slider slider-02">
+          <!-- 動態載入 -->
+        </div>
+        <div class="progress item-02" role="progressbar" aria-valuemin="0" aria-valuemax="100">
+          <span class="slider-label sr-only"></span>
+        </div>
+
+        <h5 class="slider-02-title mt-5">依照<span>空間</span>瀏覽設計</h5>
+        <div class="options-slider slider-03">
+          <!-- 動態載入 -->
+        </div>
+        <div class="progress item-03" role="progressbar" aria-valuemin="0" aria-valuemax="100">
+          <span class="slider-label sr-only"></span>
+        </div>
+
+        <h5 class="mt-5">依照<span>專長</span>尋找專家</h5>
+        <div class="options-slider slider-04 designer">
+          <!-- 動態載入 -->
+        </div>
+        <div class="progress item-04" role="progressbar" aria-valuemin="0" aria-valuemax="100">
+          <span class="slider-label sr-only"></span>
+        </div>
+      </div>
+
+      <!-- <div class="row my-5 card-item center-card">
+        <div class="col-6 col-md-4">
+          <a href="https://event.hhh.com.tw/agent/" target="_blank">幸福經紀人 <br />
+            0800-366-086<span></span></a>
+        </div>
+        <div class="col-6 col-md-4">
+          <a href="https://event.hhh.com.tw/agent/lecture.html" target="_blank">免費報名幸福講堂<span></span></a>
+        </div>
+        <div class="col-12 col-md-4">
+          <a href="https://www.leju.com.tw/page_search_result" target="_blank">樂居實價登錄<span></span></a>
+        </div>
+      </div> -->
+    </div>
+
+    <div class="container-fluid py-4 sub-banner-content mt-5" style="background-color: var(--main-color)">
+      <div class="container py-1">
+        <div class="sub-banner-slider">
+          <!-- 動態載入 -->
+        </div>
+        <div class="progress mt-4" role="progressbar" aria-valuemin="0" aria-valuemax="100">
+          <span class="slider-label sr-only"></span>
+        </div>
+      </div>
+    </div>
+
+    <div class="container mt-5 main-content">
+      <div class="popular-content mt-5">
+        <section class="d-flex justify-content-between pe-2">
+          <h5>最夯設計</h5>
+          <a href="https://hhh.com.tw/cases/lists/" class="more-link d-none d-md-block" target="_blank">
+            看更多 more
+            <img src="./img/icon/feather-chevron-right.svg" alt="" />
+          </a>
+          <a href="https://m.hhh.com.tw/cases/lists/" class="more-link d-block d-md-none" target="_blank">
+            看更多 more
+            <img src="./img/icon/feather-chevron-right.svg" alt="" />
+          </a>
+        </section>
+        <div class="popular-slider slider item-03">
+          <!-- 動態載入 -->
+        </div>
+        <div class="progress item-03 mt-4" role="progressbar" aria-valuemin="0" aria-valuemax="100">
+          <span class="slider-label sr-only"></span>
+        </div>
+      </div>
+
+      <div class="designer-content mt-5">
+        <section class="d-flex justify-content-between pe-2">
+          <h5 class="mb-0">本週推薦設計師</h5>
+          <a href="https://hhh.com.tw/designers/lists/" class="more-link d-none d-md-block" target="_blank">
+            看更多 more
+            <img src="./img/icon/feather-chevron-right.svg" alt="" />
+          </a>
+          <a href="https://m.hhh.com.tw/designers/lists/" class="more-link d-block d-md-none" target="_blank">
+            看更多 more
+            <img src="./img/icon/feather-chevron-right.svg" alt="" />
+          </a>
+        </section>
+        <div class="designer-slider slider item-01 pt-3">
+          <!-- 動態載入 -->
+        </div>
+        <div class="progress item-01 mt-4" role="progressbar" aria-valuemin="0" aria-valuemax="100">
+          <span class="slider-label sr-only"></span>
+        </div>
+      </div>
+
+      <div class="featured-content mt-5">
+        <section class="d-flex justify-content-between pe-2">
+          <h5>編輯精選</h5>
+          <a href="https://hhh.com.tw/columns/lists/all-columntypea/" class="more-link d-none d-md-block"
+            target="_blank">
+            看更多 more
+            <img src="./img/icon/feather-chevron-right.svg" alt="" />
+          </a>
+          <a href="https://m.hhh.com.tw/columns/lists/all-columntypea/" class="more-link d-block d-md-none"
+            target="_blank">
+            看更多 more
+            <img src="./img/icon/feather-chevron-right.svg" alt="" />
+          </a>
+        </section>
+        <div class="featured-slider slider item-02">
+          <!-- 動態載入 -->
+        </div>
+        <div class="progress item-02 mt-4" role="progressbar" aria-valuemin="0" aria-valuemax="100">
+          <span class="slider-label sr-only"></span>
+        </div>
+      </div>
+
+      <div class="topic-content mt-5">
+        <section class="d-flex justify-content-between pe-2">
+          <h5>主題企劃</h5>
+          <a href="" class="more-link" target="_blank">
+            看更多 more
+            <img src="./img/icon/feather-chevron-right.svg" alt="" />
+          </a>
+        </section>
+        <!-- <div class="row list"></div> -->
+        <div class="topic-slider slider item-00">
+          <!-- 動態載入 -->
+        </div>
+        <div class="progress item-00" role="progressbar" aria-valuemin="0" aria-valuemax="100">
+          <span class="slider-label sr-only"></span>
+        </div>
+      </div>
+
+      <div class="video-content mt-5">
+        <section class="d-flex justify-content-between pe-2">
+          <h5>最新影音實錄</h5>
+          <a href="https://www.youtube.com/user/gorgeousspace" class="more-link" target="_blank">
+            看更多 more
+            <img src="./img/icon/feather-chevron-right.svg" alt="" />
+          </a>
+        </section>
+        <div class="video-slider slider item-04">
+          <!-- 動態載入 -->
+        </div>
+        <div class="progress item-04 mt-4" role="progressbar" aria-valuemin="0" aria-valuemax="100">
+          <span class="slider-label sr-only"></span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal -->
+  <!-- <div class="modal fade" id="adModal" tabindex="-1" aria-labelledby="adModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body p-0">
+          <a href="https://shop.hhh.com.tw/" target="_blank">
+            <img src="./images/230215_幸福空間15週年慶_1200x800.jpg" alt="" class="img-fluid">
+          </a>
+        </div>
+      </div>
+    </div>
+  </div> -->
+
+  <!-- videoModal -->
+  <div class="modal fade" id="youtubeModal" tabindex="-1" aria-labelledby="youtubeModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title mx-auto" id="youtubeModalLabel">最新影音</h5>
+          <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
+        </div>
+        <div class="modal-body">
+          <div class="video-box">
+            <iframe id="video" src="" title="YouTube video player" frameborder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              allowfullscreen></iframe>
+          </div>
+          <section>
+            <h2>
+              <!-- 動態載入 -->
+            </h2>
+          </section>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 動態載入 -->
+  <div id="btn-box"></div>
+  <div id="footer"></div>
+
+  <!-- Bootstrap -->
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
+    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+    integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
+    crossorigin="anonymous"></script>
+  <!-- jQuery -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+  <!-- Slick -->
+  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+  <script async defer src="./js/index.js"></script>
+
+  <script>
+    // 首頁搜尋
+    $(".search-modal .keyword-list li").on("click", (e) => {
+      dataLayer.push({
+        'event': 'Click_Promo_Keyword',
+        'promo_keyword': `${e.target.innerText}`,
+        'promo_category': 'All_Search'
+      });
+      location.href = `https://hhh.com.tw/search/lists/case/${e.target.innerText}-keyword/`;
+    });
+
+    $(".search-modal #search-input").on("click", () => {
+      let keyword = $(".search-modal .keyword").val();
+
+      dataLayer.push({
+        'event': 'View_Search_Results',
+        'search_term': `${keyword}`,
+        'search_category': 'All_Search'
+      });
+
+      location.href = `https://hhh.com.tw/search/lists/case/${keyword}-keyword/`;
+    });
+
+    $(".nav-item.dropdown .nav-link").on("click", function () {
+      $(this).find(".expand").toggleClass("rotate")
+    });
+
+    $(".nav-item.dropdown").on("click", function () {
+      if (window.innerWidth > 991) {
+        $(".dropdown-menu").removeClass("show");
+        $(".nav-link").removeClass("show");
+      }
+    });
+  </script>
+</body>
+
+</html>

+ 0 - 14
index.html

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-
-<body>
-
-</body>
-
-</html>

+ 1639 - 0
js/index.js

@@ -0,0 +1,1639 @@
+let userAgent;
+let isSafari = false;
+let browserName;
+
+// pagination variables
+let num_per_page = 9;
+let n = 0;
+let totalPages = {
+  intro: 0,
+  video: 0,
+  columns: 0,
+  vr360: 0,
+  company: 0,
+};
+
+window.onload = function () {
+  // hhh_user_api();
+  if (screen.width < 991) {
+    window.location.href = `https://m.hhh.com.tw/`;
+  }
+  userAgent = navigator.userAgent;
+  detectBrowser(userAgent);
+  // detectDirection();
+
+  // let result;
+  // $.ajax({
+  //   method: "GET",
+  //   url: "./hhh_index/json/realtime.json",
+  //   dataType: "json",
+  // }).done(function (msg) {
+  //   result = [...msg];
+  //   console.log('result', result);
+  //   renderTopCarousel(result);
+  //   // renderBanner(result);
+  // });
+
+  $('#navbar').load('../../template/navbar.html');
+  $('#footer').load('../../template/footer.html');
+  $('#btn-box').load('../../template/button.html');
+  $('#topCarousel').load('../../template/top_carousel.html');
+};
+
+function hhh_user_api_login() {
+  window.location.href = `https://hhh.com.tw/users`;
+}
+
+let user_data = [];
+
+function hhh_user_api() {
+  $.ajax({
+    method: "post",
+    url: "https://hhh.com.tw/adapter/index?http_method=GET&api_url=/base/v1/member/index",
+    // async: false,
+    dataType: "json",
+  }).done(function (msg) {
+    user_data = msg;
+    let app_user = "";
+    console.log('hhh_user_msg', msg);
+    if (msg.status == "Success") {
+      app_user += `
+      <div class="dropdown">
+        <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" onclick="hhh_user_api_login()">
+          <div class="d-flex align-items-center">
+            <img src="${msg.data["user_avatar"]}" alt="" style="height: 32px; width: 32px;border-radius: 100px;">
+            <p class="ms-2">${msg.data["name"]}</p>
+          </div>
+        </button>
+        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+          <li><a class="dropdown-item" href="https://hhh.com.tw/users">會員專區</a></li>
+        </ul>
+      </div>`;
+    } else {
+      app_user += `
+      <a class="nav-link" href="javascript:;" onclick="hhh_user_api_login()">
+        <section class="d-flex align-items-center">
+          <img src="./img/icon/material-people.svg" alt="login" class="me-2" style="padding-top: 2px;" />
+          <span class="pt-1">登入</span>
+        </section>
+      </a>`;
+    }
+    $("#app_user").html(app_user);
+  }).fail(function (err) {
+    console.log('err', err);
+  });
+}
+
+hhh_user_api();
+
+// function detectDirection() {
+//   let height = (window.screen.width * 5) / 12;
+//   $(".sec-02 .slide-item").css("height", `${height}px`);
+// }
+
+function detectBrowser(agent) {
+  if (userAgent.match(/chrome|chromium|crios/i)) {
+    browserName = "chrome";
+  } else if (userAgent.match(/firefox|fxios/i)) {
+    browserName = "firefox";
+  } else if (userAgent.match(/safari/i)) {
+    browserName = "safari";
+  } else if (userAgent.match(/opr\//i)) {
+    browserName = "opera";
+  } else if (userAgent.match(/edg/i)) {
+    browserName = "edge";
+  } else {
+    browserName = "No browser detection";
+  }
+
+  if (browserName === "safari") {
+    isSafari = true;
+  }
+}
+
+// 範圍內取隨機整數(0-8)
+function getRandomInt(max) {
+  return Math.floor(Math.random() * max);
+}
+
+function renderBanner(data) {
+  let temp = data[1]["data"];
+  // renderBullet(temp);
+  // renderBannerStr("banner-slider", temp);
+
+  let str = "";
+  let img = "";
+
+  if (window.innerWidth < 767) {
+    // 手機版
+    img = "imgUrl";
+  } else {
+    // 電腦版
+    img = "Dwebp";
+  }
+  let adNamesMain = [];
+  for (let i = 0; i < temp.length; i++) {
+
+    let adNameMain = `${temp[i]["id"]}${temp[i]["alt"]}`;
+    adNamesMain.push(adNameMain);
+
+    str += `
+      <a href="${temp[i]["link"]}" target="_blank"   data-ga4="${temp[i]["id"]}${temp[i]["alt"]}">
+        <section class="info-item">
+          <span class="logo-img">
+            <img class="img-${temp[i].logo_icon} ${temp[i].logo_icon === "" ? "d-none" : ""}" src="./img/index/banner_logo/${temp[i].logo_icon}.png">
+          </span>
+          <section class="${temp[i].index_char_1 === "" || temp[i].index_char_2_1 === "" || temp[i].index_char_2_2 === "" ? "d-none" : ""}">
+            <h3>${temp[i].index_char_1}</h3>
+            <div>
+              <h2>${temp[i].index_char_2_1}</h2>
+              <h2>
+                ${temp[i].index_char_2_2}
+                <small>${temp[i].index_char_2_3}</small>
+              </h2>
+            </div>
+         </section>
+        </section>
+        <img class="banner-slider-${i + 1} slide-item img-fluid" src="${temp[i][`${img}`]}" data-bg="${temp[i][`${img}`]}" alt="${temp[i]["alt"]}" data_id="${temp[i]["id"]}${temp[i]["alt"]}">
+      </a>`;
+  }
+
+  $(`.banner-slider`).html(str);
+
+  //ga4-banners
+  adNamesMain.forEach((adNameMain) => {
+    document.querySelectorAll(`a[data-ga4="${adNameMain}"]`).forEach((element) => {
+      element.addEventListener('click', function () {
+        dataLayer.push({
+          'event': 'Banner_Click',
+          'ad_name': adNameMain,
+          'ad_location': '首頁大Banner'
+        });
+      });
+    });
+  });
+
+  let randomInt = getRandomInt(8);
+  let list_Top_Banner;
+  let ad_first;
+
+  //首頁大Banner ga4(一開始近來先送)剩下輪播送
+  list_Top_Banner = document.querySelectorAll('.banner-slider .slide-item');
+
+  //console.log('list_TOP:',list_Top_Banner[randomInt].getAttribute('data_id'))
+
+
+  try {
+    ad_first = list_Top_Banner[randomInt].getAttribute('data_id');
+  } catch (e) {
+    ad_first = '加載問題,所以請無視';
+    console.log(ad_first);
+
+  }
+
+
+  dataLayer.push({
+    'event': 'Banner_Impression',
+    'ad_name': ad_first,
+    'ad_location': '首頁大Banner'
+  });
+
+
+  // 輪播設定
+  $('.banner-slider').slick({
+    dots: true,
+    infinite: true,
+    speed: 300,
+    arrows: true,
+    autoplay: true,
+    autoplaySpeed: 4000,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    centerMode: true,
+    variableWidth: true,
+    initialSlide: randomInt, // 起始順序
+    prevArrow:
+      '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="color: white;transform: translateY(-10px);"></i></button>',
+    nextArrow:
+      '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="color: white;transform: translateY(-10px);"></i></button>',
+    responsive: [
+      {
+        breakpoint: 575,
+        settings: {
+          dots: false,
+          arrows: false,
+        }
+      }
+    ]
+  });
+
+
+  // 初始輪播外層新增 className
+  try {
+    list_Top_Banner[randomInt].parentNode.classList.add("slick-now");
+
+  } catch (e) {
+
+    console.log(e);
+
+  }
+
+
+  // On before slide change
+  $('.banner-slider').on('beforeChange', function (event, { slideCount: count }, currentSlide, nextSlide) {
+    let selectors = [nextSlide, nextSlide - count, nextSlide + count].map(n => `[data-slick-index="${n}"]`).join(', ');
+    $('.slick-now').removeClass('slick-now');
+    $(selectors).addClass('slick-now');
+  });
+
+  $('[data-slick-index="0"]').addClass('slick-now');
+}
+
+function renderBannerStr(sec, data) {
+  let adNamesTop = [];
+  let str = "";
+  for (let i = 0; i < data.length; i++) {
+    let adNameTop = `${data[i]["id"]}${data[i]["alt"]}`;
+    adNamesTop.push(adNameTop);
+
+    if (data[i]["Dwebp"]) {
+      str += `
+      <a href="${data[i]["link"]}" data-ga4="${data[i]["id"]}${data[i]["alt"]}">
+        <img class="${sec}-${i + 1} slide-item img-fluid" src="${data[i]["Dwebp"]}" data-bg="${data[i]["Dwebp"]}" alt="${data[i]["alt"]}"  data_id="${data[i]["id"]}${data[i]["alt"]}">
+      </a>`;
+    } else {
+      str += `
+      <a href="${data[i]["link"]}" data-ga4="${data[i]["id"]}${data[i]["alt"]}">
+        <img class="${sec}-${i + 1} slide-item img-fluid" src="${data[i]["DimgUrl"]}" data-bg="${data[i]["DimgUrl"]}" alt="${data[i]["alt"]}" data_id="${data[i]["id"]}${data[i]["alt"]}">
+      </a>`;
+    }
+  }
+  $(`.${sec}`).html(str);
+  //ga4-banners
+  adNamesTop.forEach((adNameTop) => {
+    document.querySelectorAll(`a[data-ga4="${adNameTop}"]`).forEach((element) => {
+      element.addEventListener('click', function () {
+        dataLayer.push({
+          'event': 'Banner_Click',
+          'ad_name': adNameTop,
+          'ad_location': '新刊頭'
+        });
+      });
+    });
+  });
+}
+
+$(window)
+  .scroll(function () {
+    if ($(this).scrollTop() > 800) {
+      $(".fixed-btn").fadeIn(222);
+    } else {
+      $(".fixed-btn").stop().fadeOut(222);
+    }
+  })
+  .scroll();
+
+$("#top-btn").click(function () {
+  $("html, body").animate(
+    {
+      scrollTop: 0,
+    },
+    500
+  );
+});
+
+$(".slider-close-btn").click(function () {
+  $(this).css("display", "none");
+  sticky = 0;
+});
+
+document.addEventListener("lazybeforeunveil", function (e) {
+  var bg = e.target.getAttribute("data-bg");
+  if (bg) {
+    e.target.style.backgroundImage = "url(" + bg + ")";
+  }
+});
+
+function addToFavorite(cid) {
+  if (user_data.data["uid"] == undefined) {
+    Swal.fire({
+      title: "請先登入",
+      showConfirmButton: false,
+    });
+
+    $.ajax({
+      url: "https://hhh.com.tw/hhhajax/save_http_referer",
+      type: "post",
+      datatype: "json",
+      data: { http_referer: location.href },
+      success: function () {
+        location.href = "/login/index";
+      },
+    });
+  }
+
+  $.ajax({
+    url: `https://hhh.com.tw/favorite/set?type=column&id=${cid}`,
+  }).done(function (data) {
+    if (data == 1) {
+      $(".like").css("display", "block");
+      $(".like-o").css("display", "none");
+    } else {
+      $(".like").css("display", "none");
+      $(".like-o").css("display", "block");
+    }
+  });
+}
+
+function putEmail() {
+  const emailPattern =
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  if ($("#email").val() !== null && emailPattern.test($("#email").val())) {
+    $("#error").hide();
+    $("#putEmail_hidden").css("display", "block");
+    $("#add_email").text($("#email").val());
+    $("#email").val("");
+  } else {
+    $("#error").show();
+    $("#error").text("email 格式有誤");
+  }
+}
+
+$(".fm-close").click(() => {
+  $("#putEmail_hidden").css("display", "none");
+  $("#add_email").text("");
+});
+
+$("#putEmail").click(function (event) {
+  $("#putEmail_hidden").show();
+  const vm = $("#email").val();
+  const emailPattern =
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+  if (vm.length == 0) {
+    $("#error").show();
+    $("#error").text("請輸入Email");
+    $("#email").addClass("border-revise");
+    $("#button-fm").addClass("fm-btn-border");
+
+    $("#email").focus();
+    return false;
+  } else if (!emailPattern.test(vm)) {
+    $("#error").show();
+    $("#error").text("email 格式有誤");
+    $("#email").addClass("border-revise");
+    $("#button-fm").addClass("fm-btn-border");
+    $("#email").focus();
+    return false;
+    // } else if (vm.length >= 5) {
+    //     $('#error').show();
+    //     $('#error').text('最多一次轉寄 5 封');
+    //     $('#email').addClass('border-revise');
+    //     $('#button-fm').addClass('fm-btn-border');
+    //
+    //     $('#email').focus();
+    //     return false;
+  } else {
+    $("#email").removeClass("border-revise");
+    $("#button-fm").removeClass("fm-btn-border");
+    $("#error").hide();
+    $("#add_email").text($("#email").val());
+    $("#email").val("");
+  }
+});
+
+$("#doSend").click(function (event) {
+  stop = 0;
+  var emailPattern =
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  let this_url = window.location.href;
+  // 如果 uid 為空代表沒登入(由於此寄信功能需要 uid 故需要先登入)
+  if (user_data.data["uid"] == undefined) {
+    $("#error").text("請先登錄/註冊會員帳號");
+    stop = 1;
+  } else if ($("#email").val() == "") {
+    $("#error").text("收件人不得為空");
+    stop = 1;
+  } else {
+    if (!emailPattern.test($("#email").val())) {
+      $("#error").text("請以 email 格式填寫");
+      stop = 1;
+    }
+  }
+
+  if (stop == 0) {
+    $("#error").text();
+    $.ajax({
+      url: "https://hhh.com.tw/adapter/index?http_method=POST&api_url=/base/v1/member/forward",
+      type: "post",
+      datatype: "json",
+      data: {
+        data: JSON.stringify({
+          uid: user_data.data["uid"],
+          sender: user_data.data["email"],
+          recipient: $("#email").val(),
+          url: this_url,
+          subject: $("#title").val(),
+          content: $("#content").val(),
+        }),
+      },
+      success: function (result) {
+        $("#forward_modal").modal("hide");
+        Swal.fire({
+          title: "發送成功",
+          showConfirmButton: false,
+        });
+        $("#emailModal").modal("hide");
+      },
+    });
+  }
+});
+
+/* 手機版輪播進度條 */
+
+//ga4-頂部廣告banner參數  
+let adTop_count = []
+let time_top_count = 0
+$('.banner-slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) { // 頂部輪播(首頁大Banner)
+  let list = document.querySelectorAll('.banner-slider .slide-item');
+
+  //console.log(list[nextSlide+2].getAttribute('data_id'))
+  let ad1 = list[nextSlide + 2].getAttribute('data_id');
+
+  //由於剛進來就會送首頁大Banner的ga4,所以之後輪播時就不再送出
+  if (time_top_count == 0) {
+    let ad2 = list[nextSlide + 1].getAttribute('data_id');
+    adTop_count.push(ad2);
+    time_top_count = 1
+  }
+  //送dataLayer(要看得到廣告才送(電腦手機板不一樣))
+  if ($('.banner-slider .slide-item').offset().top - $(window).scrollTop() > -330) {
+    if (!adTop_count.includes(ad1)) {
+
+      dataLayer.push({
+        'event': 'Banner_Impression',
+        'ad_name': ad1,
+        'ad_location': '首頁大Banner'
+      });
+
+      adTop_count.push(ad1);
+    }
+  }
+  // 以下才是輪播
+  let calc = ((nextSlide) / (slick.slideCount - 1)) * 100;
+  $('.banner-content .progress')
+    .css('background-size', calc + '% 100%')
+    .attr('aria-valuenow', calc);
+});
+
+
+
+
+//ga4-中間廣告banner參數
+let ad_count = []
+$('.sub-banner-slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) { // 廣告區塊
+  //ga4-送參數(電腦手機不一樣)
+  let list = document.querySelectorAll('.sub-banner-slider .slide-item');
+  let max_v = (list.length - 2) / 2
+  let ad1 = list[currentSlide > 0 ? currentSlide - 1 : max_v - 1].getAttribute('data_id')
+
+  let ad2 = list[currentSlide].getAttribute('data_id')
+  //console.log(currentSlide-1,currentSlide)
+  //console.log(ad1,ad2)
+  //廣告位置(電腦手機不一樣)
+  if ($('.container-fluid.py-4.sub-banner-content').offset().top - $(window).scrollTop() < 800 && $('.container-fluid.py-4.sub-banner-content').offset().top - $(window).scrollTop() > -154) {
+    //送dataLayer
+    if (!ad_count.includes(ad1)) {
+
+      dataLayer.push({
+        'event': 'Banner_Impression',
+        'ad_name': ad1,
+        'ad_location': '首頁列表'
+      });
+
+      ad_count.push(ad1);
+    }
+    if (!ad_count.includes(ad2)) {
+      dataLayer.push({
+        'event': 'Banner_Impression',
+        'ad_name': ad2,
+        'ad_location': '首頁列表'
+      });
+      ad_count.push(ad2);
+    }
+  }
+  // 以下才是輪播
+  let calc = ((nextSlide) / (slick.slideCount - 1)) * 100;
+  $('.sub-banner-content .progress')
+    .css('background-size', calc + '% 100%')
+    .attr('aria-valuenow', calc);
+});
+
+let optionsSliderList = document.querySelectorAll('.options-slider'); // 廣告上方列表
+for (let i = 0; i < optionsSliderList.length; i++) {
+  let count;
+  let element;
+  const progressBar = $(`.progress.item-0${i}`);
+  const progressBarLabel = $('.slider-label');
+
+  if (i === 0) {
+    count = 2;
+    element = $(`.space-slider.slider-0${i}`);
+  } else {
+    window.innerWidth < 415 ? count = 2 : count = 3;
+    element = $(`.options-slider.slider-0${i}`);
+  }
+
+  element.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
+    let calc = ((nextSlide) / (slick.slideCount - count)) * 100;
+    progressBar
+      .css('background-size', calc + '% 100%')
+      .attr('aria-valuenow', calc);
+    progressBarLabel.text(calc + '% completed');
+  });
+}
+
+let mainSliderList = document.querySelectorAll('.main-content .slider'); // 廣告下方列表
+let count;
+window.innerWidth < 415 ? count = 1 : count = 2;
+for (let i = 0; i < mainSliderList.length; i++) {
+  let element = $(`.main-content .slider.item-0${i}`);
+  const progressBar = $(`.main-content .progress.item-0${i}`);
+  const progressBarLabel = $('.main-content .slider-label');
+
+  element.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
+    let calc = ((nextSlide) / (slick.slideCount - count)) * 100;
+    progressBar
+      .css('background-size', calc + '% 100%')
+      .attr('aria-valuenow', calc);
+    progressBarLabel.text(calc + '% completed');
+  });
+}
+
+/* 2024/02/21關閉 */
+// 廣告彈跳視窗 Modal
+
+/*
+
+(function createModal() {
+  const newDiv = document.createElement("div");
+  let str = `
+    <div class="modal fade" id="adModal" tabindex="-1" aria-labelledby="adModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered"  style="max-width: 900px;">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body p-0">
+            <a href="https://hhh.style/hh12fMF7i" target="_blank">
+              <img src="./img/20240207year.jpg" alt="" class="img-fluid">
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>`;
+
+  newDiv.innerHTML = str;
+  document.body.appendChild(newDiv);
+})();
+
+*/
+
+
+
+/* 判斷閒置 */
+let defaultNum = 60; // 60 秒
+let maxTime = defaultNum;
+let intervalId;
+
+let time = maxTime;
+
+$('body').on('keydown mousemove mousedown', function (e) {
+  maxTime = defaultNum; // Seconds        
+  time = maxTime; // Reset
+});
+runSetInterval();
+
+function runSetInterval() {
+  intervalId = setInterval(function () {
+    time--;
+    if (time <= 0) {
+      ShowInvalidLoginMessage();
+      clearInterval(intervalId);
+    }
+  }, 1000)
+}
+$('#adModal').on('hide.bs.modal', function () {
+  dialogTimeclose();
+  runSetInterval();
+  $('body').addClass('scrollable');
+});
+
+function dialogTimeclose() {
+  time = maxTime;
+}
+
+function ShowInvalidLoginMessage() {
+  $('#adModal').modal('show');
+}
+
+
+
+/* genjson_new 新版首頁 */
+
+let result;
+
+$.ajax({
+  method: "get",
+  url: "./json/data_index.json",
+  // url: "https://m3.hhh.com.tw:18689/genjson_new?filename=realtime.json",
+
+  dataType: "json",
+}).done((data) => {
+  result = [...data];
+  // 隱藏 loading
+  $('body').removeClass('unscrollable');
+  $('.loading-item').addClass('loading-hide');
+
+  let ad = localStorage.getItem('ad');
+  if (!ad) {
+    localStorage.setItem('ad', true);
+    $('#adModal').modal('show');
+  } else {
+    $('#adModal').modal('hide');
+    $('body').addClass('scrollable');
+  }
+
+  // renderTopCarousel(result);
+  renderBanner(result);
+  renderData(result); // 廣告上方列表
+  renderEventAd(result); // 廣告輪播
+  renderTopic(); // 主題企劃
+  renderDesigner(result); // 推薦設計師
+  renderTabContent(result); // 最夯設計, 影音實錄, 專欄文章
+
+  //ga4_Click
+  document.querySelectorAll('a[data-ga4="By_Style"]').forEach(function (element) {
+    element.addEventListener('click', function () {
+      dataLayer.push({
+        'event': 'Inner_Click',
+        'section_name': '依照風格瀏覽設計'
+      });
+    });
+  });
+
+  document.querySelectorAll('a[data-ga4="By_Space"]').forEach(function (element) {
+    element.addEventListener('click', function () {
+      dataLayer.push({
+        'event': 'Inner_Click',
+        'section_name': '依照空間瀏覽設計'
+      });
+    });
+  });
+
+  document.querySelectorAll('a[data-ga4="By_Specialty"]').forEach(function (element) {
+    element.addEventListener('click', function () {
+      dataLayer.push({
+        'event': 'Inner_Click',
+        'section_name': '依照專長尋找專家'
+      });
+    });
+  });
+  document.querySelectorAll('a[data-ga4="By_Topic"]').forEach(function (element) {
+    element.addEventListener('click', function () {
+      dataLayer.push({
+        'event': 'Inner_Click',
+        'section_name': '主題企劃'
+      });
+    });
+  });
+  document.querySelectorAll('a[data-ga4="By_Designer"]').forEach(function (element) {
+    element.addEventListener('click', function () {
+      dataLayer.push({
+        'event': 'Inner_Click',
+        'section_name': '本週推薦設計師'
+      });
+    });
+  });
+  document.querySelectorAll('a[data-ga4="By_Editor"]').forEach(function (element) {
+    element.addEventListener('click', function () {
+      dataLayer.push({
+        'event': 'Inner_Click',
+        'section_name': '編輯精選'
+      });
+    });
+  });
+  document.querySelectorAll('a[data-ga4="Best_Design"]').forEach(function (element) {
+    element.addEventListener('click', function () {
+      dataLayer.push({
+        'event': 'Inner_Click',
+        'section_name': '最夯設計'
+      });
+    });
+  });
+  document.querySelectorAll('a[data-ga4="Latest_Video"]').forEach(function (element) {
+    element.addEventListener('click', function () {
+      dataLayer.push({
+        'event': 'Inner_Click',
+        'section_name': '最新影音實錄'
+      });
+    });
+  });
+
+
+
+
+}).fail((error) => {
+  console.log('genjson_new error', error);
+});
+
+$.ajax({
+  method: "get",
+  url: "./json/index-slider.json",
+  async: false,
+  dataType: "json",
+}).done((data) => {
+  renderJsonData(data); // 依照空間尋找商品, 依照專長尋找設計師
+}).fail((error) => {
+  console.log('error', error);
+});
+
+function renderJsonData(data) {
+  data.map(e => {
+    if (e.tab === "依照空間尋找商品") {
+      let str = "";
+      let SpaceProducts = [];
+
+      for (let i = 0; i < e.data.length; i++) {
+        let item = e.data[i];
+        let SpaceProduct = `${item.name}`;
+        SpaceProducts.push(SpaceProduct);
+
+        str += `
+        <div>
+          <section>
+            <span class="slide-img">
+              <a href="${item.url}" target="_blank"  data-ga4="${item.name}">
+                <img class="slide-item img-fluid" src="${item.image}" alt="${item.name}">
+                <h3>${item.name}</h3>
+              </a>
+            </span>
+          </section>
+        </div>`
+      }
+      $(".space-slider").html(str);
+
+      //ga4-banners
+      SpaceProducts.forEach((SpaceProduct) => {
+        document.querySelectorAll(`a[data-ga4="${SpaceProduct}"]`).forEach((element) => {
+          element.addEventListener('click', function () {
+            dataLayer.push({
+              'event': 'ShopBanner_Click',
+              'product_name': SpaceProduct
+
+            });
+          });
+        });
+      });
+
+
+      // 輪播設定
+      $('.space-slider').slick({
+        infinite: false,
+        slidesToShow: 4,
+        slidesToScroll: 1,
+        variableWidth: false,
+        prevArrow:
+          '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+        nextArrow:
+          '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+        responsive: [
+          {
+            breakpoint: 991,
+            settings: {
+              slidesToShow: 3,
+              slidesToScroll: 1
+            }
+          },
+          {
+            breakpoint: 767,
+            settings: {
+              slidesToShow: 2,
+              slidesToScroll: 1,
+            }
+          },
+          {
+            breakpoint: 575,
+            settings: {
+              slidesToShow: 2,
+              slidesToScroll: 1,
+              variableWidth: true,
+              arrows: false,
+            }
+          }
+        ]
+      });
+    } else {
+      let str = "";
+
+      for (let i = 0; i < e.data.length; i++) {
+        let item = e.data[i];
+        str += `
+        <div>
+          <section>
+            <span class="slide-img">
+              <a href="${item.url}" target="_blank" data-ga4="By_Specialty">
+                <img class="slide-item img-fluid" src="${item.image}" alt="${item.name}">
+                <h3>${item.name}</h3>
+              </a>
+            </span>
+          </section>
+        </div>`
+      }
+      $(".options-slider.designer").html(str);
+    }
+
+    hideSlickArrow();
+  })
+
+
+}
+
+let locationUrl = '';
+window.innerWidth > 767 ? locationUrl = "https://hhh.com.tw" : locationUrl = "https://m.hhh.com.tw";
+
+// 首頁廣告上方列表
+function renderData(data) {
+  data.map((e) => {
+    if (e._comment === "加好物商品") {
+      renderDom("slider-01", e.data);
+    } else if (e._comment === "首頁photo頁") {
+      e.data.map((list, index) => {
+        renderDom(`slider-0${index + 2}`, list.data);
+        // $(`.slider-0${index + 1}-title`).text(list.tab);
+      })
+    }
+  })
+
+  // 輪播設定
+  $('.options-slider').slick({
+    infinite: false,
+    slidesToShow: 6,
+    slidesToScroll: 6,
+    variableWidth: false,
+    prevArrow:
+      '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+    nextArrow:
+      '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+    responsive: [
+      {
+        breakpoint: 1200,
+        settings: {
+          slidesToShow: 5,
+          slidesToScroll: 5,
+        }
+      },
+      {
+        breakpoint: 991,
+        settings: {
+          slidesToShow: 4,
+          slidesToScroll: 4
+        }
+      },
+      {
+        breakpoint: 767,
+        settings: {
+          slidesToShow: 3,
+          slidesToScroll: 1,
+        }
+      },
+      {
+        breakpoint: 575,
+        settings: {
+          slidesToShow: 3,
+          slidesToScroll: 1,
+          variableWidth: true,
+          arrows: false,
+        }
+      },
+      {
+        breakpoint: 415,
+        settings: {
+          slidesToShow: 2,
+          slidesToScroll: 1,
+          variableWidth: true,
+          arrows: false,
+        }
+      }
+    ]
+  });
+
+  hideSlickArrow();
+}
+
+function renderDom(sec, data) {
+
+  if (sec !== "slider-01" && sec == "slider-02") {
+    data = data.sort((a, b) => a.order - b.order);
+    let str = "";
+    for (let i = 0; i < data.length; i++) {
+      str += `
+    <div>
+      <section>
+        <span class="slide-img">
+          <a href="${locationUrl + data[i]["url"]}"  target="_blank" data-ga4="By_Style">
+            <img class="${sec}-${i + 1} slide-item img-fluid" src="${locationUrl + data[i]["image"]}" alt="${data[i]["name"]}">
+            <h3>${data[i]["name"]}</h3>
+          </a>
+        </span>
+      </section>
+    </div>`
+    }
+    $(`.${sec}`).html(str);
+  }
+  else if (sec !== "slider-01" && sec == "slider-03") {
+    data = data.sort((a, b) => a.order - b.order);
+    let str = "";
+    for (let i = 0; i < data.length; i++) {
+      str += `
+    <div>
+      <section>
+        <span class="slide-img">
+          <a href="${locationUrl + data[i]["url"]}"  target="_blank" data-ga4="By_Space">
+            <img class="${sec}-${i + 1} slide-item img-fluid" src="${locationUrl + data[i]["image"]}" alt="${data[i]["name"]}">
+            <h3>${data[i]["name"]}</h3>
+          </a>
+        </span>
+      </section>
+    </div>`
+    }
+    $(`.${sec}`).html(str);
+  }
+
+
+
+
+  else {
+    data = data.sort(() => Math.random() - 0.5); // 隨機排序
+    data = data.slice(0, 12); // 取前 12 筆
+    let str = "";
+    ShopProducts = [];
+    for (let i = 0; i < data.length; i++) {
+      let ShopProduct = `${data[i]["title"]}`;
+      ShopProducts.push(ShopProduct);
+      str += `
+      <div>
+        <section>
+          <span class="slide-img">
+            <a href="${data[i]["link"]}" target="_blank" data-ga4="${data[i]["title"]}">
+              <img class="${sec}-${i + 1} slide-item img-fluid" src="${data[i]["imgUrl"]}" alt="${data[i]["title"]}">
+              <h3>
+                <strong>${data[i]["title"]}</strong>
+              </h3>
+            </a>
+          </span>
+        </section>
+      </div>`
+    }
+    $(`.${sec}`).html(str);
+
+    //ga4-banners
+    ShopProducts.forEach((ShopProduct) => {
+      document.querySelectorAll(`a[data-ga4="${ShopProduct}"]`).forEach((element) => {
+        element.addEventListener('click', function () {
+          dataLayer.push({
+            'event': 'ShopBanner_Click',
+            'product_name': ShopProduct
+
+          });
+        });
+      });
+    });
+  }
+
+}
+
+// let timer;
+
+// $(window).resize(function () {
+//   // 延遲縮放
+//   window.clearTimeout(timer);
+//   timer = window.setTimeout(() => {
+//     renderTopic();
+//   }, 100);
+// })
+
+// 首頁主題企劃
+function renderTopic() {
+  if (result) {
+    result.map(list => {
+      if (list._comment === "主題企劃區") {
+        let webData = [];
+        let mobileData = [];
+
+        list.data.filter(e => {
+          if (e.tab === "web") {
+            webData = e.data;
+          } else {
+            mobileData = e.data;
+          }
+        });
+
+        let arr;
+        let str = "";
+        // 固定取手機版第一筆
+        let linkHref = `https://m.hhh.com.tw${mobileData[0].link}`;
+
+        window.innerWidth > 767 ? arr = webData : arr = mobileData;
+
+        let topicLink = document.querySelector(".topic-content .more-link");
+        topicLink.setAttribute("href", linkHref);
+
+        for (let i = 0; i < arr.length; i++) {
+          str += `
+          <div>
+            <section>
+              <span class="slide-img">
+                <a href="${locationUrl + arr[i]["link"]}" target="_blank" data-ga4="By_Topic">
+                  <div class="img-box slide-img"> <img src="${arr[i]["imgUrl"]}" alt="${arr[i]["title"]}" class="img-fluid"></div>
+                </a>
+              </span>
+              <a href="${locationUrl + arr[i]["link"]}" target="_blank" data-ga4="By_Topic">
+                <h3 class="mt-2 ellipsis-title">${arr[i]["title"]}</h3>
+              </a>
+            </section>
+          </div>`;
+        }
+
+        $('.topic-slider').html(str);
+        // 輪播設定
+        $('.topic-slider').slick({
+          infinite: false,
+          slidesToShow: 4,
+          slidesToScroll: 4,
+          variableWidth: false,
+          prevArrow:
+            '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+          nextArrow:
+            '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+          responsive: [
+            {
+              breakpoint: 991,
+              settings: {
+                slidesToShow: 2,
+                slidesToScroll: 2,
+              }
+            },
+            {
+              breakpoint: 767,
+              settings: {
+                slidesToShow: 2,
+                slidesToScroll: 1,
+                // variableWidth: true,
+                // arrows: false,
+              }
+            },
+            {
+              breakpoint: 575,
+              settings: {
+                slidesToShow: 2,
+                slidesToScroll: 1,
+                variableWidth: true,
+                arrows: false,
+              }
+            },
+            {
+              breakpoint: 415,
+              settings: {
+                slidesToShow: 1,
+                slidesToScroll: 1,
+                variableWidth: true,
+                arrows: false,
+              }
+            }
+          ]
+        });
+      }
+    });
+  }
+}
+
+// 按鈕 hover
+$(function () {
+  $('.top-card a, .center-card a')
+    .on('mouseenter', function (e) {
+      var parentOffset = $(this).offset(),
+        relX = e.pageX - parentOffset.left,
+        relY = e.pageY - parentOffset.top;
+      $(this).find('span').css({ top: relY, left: relX })
+    })
+    .on('mouseout', function (e) {
+      var parentOffset = $(this).offset(),
+        relX = e.pageX - parentOffset.left,
+        relY = e.pageY - parentOffset.top;
+      $(this).find('span').css({ top: relY, left: relX })
+    });
+});
+
+// 首頁廣告輪播
+function renderEventAd(data) {
+  let adNames = [];
+  data.map(list => {
+    if (list._comment === "活動頁banners區") {
+      let str = "";
+      list.data = list.data.sort(() => Math.random() - 0.5); // 隨機排序
+      for (let i = 0; i < list.data.length; i++) {
+        let adName = `${list.data[i]["id"]}${list.data[i]["alt"]}`;
+        adNames.push(adName);
+
+        str += `
+        <div>
+          <a href="${list.data[i]["link"]}" target="_blank" data-ga4="${list.data[i]["id"]}${list.data[i]["alt"]}">
+            <img class="slide-item img-fluid" src="${list.data[i]["webp"]}" alt="${list.data[i]["alt"]}" data_id="${list.data[i]["id"]}${list.data[i]["alt"]}">
+          </a>
+        </div>`
+      }
+
+      $('.sub-banner-content .sub-banner-slider').html(str);
+
+      //ga4-banners
+      adNames.forEach((adName) => {
+        document.querySelectorAll(`a[data-ga4="${adName}"]`).forEach((element) => {
+          element.addEventListener('click', function () {
+            dataLayer.push({
+              'event': 'Banner_Click',
+              'ad_name': adName,
+              'ad_location': '首頁列表'
+            });
+          });
+        });
+      });
+
+    }
+  });
+
+  // 輪播設定
+  $('.sub-banner-content .sub-banner-slider').slick({
+    dots: false,
+    infinite: true,
+    speed: 300,
+    arrows: true,
+    autoplay: true,
+    autoplaySpeed: 4000,
+    slidesToShow: 2,
+    slidesToScroll: 1,
+    prevArrow:
+      '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+    nextArrow:
+      '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+    responsive: [
+      {
+        breakpoint: 767,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+        }
+      },
+      {
+        breakpoint: 575,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+          arrows: false
+        }
+      }
+    ]
+  });
+}
+
+// 隨機對調前後順序(e.g. 5678 1234)
+function randomArr(ary, num = 4) {
+  // 取得隨機整數
+  let randomVal;
+  (Math.random() > 0.5) ? randomVal = 1 : randomVal = 0;
+
+  let data = [...ary]; // 深拷貝
+  let list = [];
+
+  // index < 拆分的次數
+  // 如陣列長度為 8 跟 12,拆分次數即為 2 跟 3 
+  // 例如:[8] => [4,4] or [12] => [4,4,4]
+  for (let index = 0; index < 1; index++) {
+    list.push(data.splice(num, num));
+    // list.push(test.splice(4, 4));
+  }
+
+  list = list.sort(() => Math.random() - 0.5); // 隨機排序
+
+  let finalData = [];
+
+  if (randomVal) {
+    finalData = data.concat(list);
+  } else {
+    finalData = list.concat(data);
+  }
+
+  return finalData.flat(Infinity) // 展開陣列
+}
+
+
+function renderDesigner(data) {
+  data.map(list => {
+    if (list._comment === "推薦設計師") {
+      let randomData = randomArr(list.data, 6);
+      let str = "";
+
+      for (let i = 0; i < randomData.length; i++) {
+        const item = randomData[i];
+
+        str += `
+        <div>
+          <section>
+            <span class="slide-img">
+              <a href="${locationUrl + item.link}" target="_blank" data-ga4="By_Designer">
+                <img class="slide-item img-fluid" src="${item.imgUrl}" alt="${item.name}|${item.designers_name}">
+                <span class="img-border"></span>
+              </a>
+            </span>
+            <a href="${locationUrl + item.link}" target="_blank" data-ga4="By_Designer">
+              <h3 class="ellipsis-title">
+                ${item.name}
+              </h3>
+              <h3 class="name">
+                ${item.designers_name}
+                <small>設計師</small>
+              </h3>
+            </a>
+          </section>
+        </div>`;
+      }
+
+      $('.designer-slider').html(str);
+      // 輪播設定
+      $('.designer-slider').slick({
+        infinite: false,
+        slidesToShow: 6,
+        slidesToScroll: 6,
+        variableWidth: false,
+        prevArrow:
+          '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+        nextArrow:
+          '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+        responsive: [
+          {
+            breakpoint: 1200,
+            settings: {
+              slidesToShow: 4,
+              slidesToScroll: 4,
+            }
+          },
+          {
+            breakpoint: 767,
+            settings: {
+              slidesToShow: 3,
+              slidesToScroll: 3,
+            }
+          },
+          {
+            breakpoint: 575,
+            settings: {
+              slidesToShow: 2,
+              slidesToScroll: 1,
+              variableWidth: true,
+              arrows: false,
+            }
+          },
+        ]
+      });
+
+      hideSlickArrow();
+
+      $(".designer-content h3").hover(
+        function () {
+          $(this).parent().prev().children().children('.img-border').css('opacity', '1');
+        }, function () {
+          $(this).parent().prev().children().children('.img-border').css('opacity', '0');
+        }
+      );
+    }
+  });
+}
+
+function renderTabContent(data) {
+  data.map(list => {
+    if (list._comment === "tab區塊-最夯設計, 影音實錄, 專欄文章") {
+      list.data.map(item => {
+        if (item.tab === "編輯精選") {
+          let randomData = randomArr(item.data);
+          let str = "";
+          let tagList = [];
+
+          for (let i = 0; i < randomData.length; i++) {
+            const item = randomData[i];
+            str += `
+            <div>
+              <section>
+                <span class="slide-img">
+                  <a href="${locationUrl + item.link}" target="_blank" data-ga4="By_Editor">
+                    <img class="slide-item img-fluid" src="${item.imgUrl}" alt="${item.title}">
+                  </a>
+                </span>
+                <a href="${locationUrl + item.link}" target="_blank" class="title" data-ga4="By_Editor">
+                  <h3 class="mb-0 ellipsis-title">${item.title}</h3>
+                </a>
+                <div class="tab-block tag-list-${i}"></div>
+              </section>
+            </div>`;
+            tagList.push(item.ctag);
+
+          }
+
+          $('.featured-slider').html(str);
+          // 輪播設定
+          $('.featured-slider').slick({
+            infinite: false,
+            slidesToShow: 4,
+            slidesToScroll: 4,
+            variableWidth: false,
+            prevArrow:
+              '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+            nextArrow:
+              '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+            responsive: [
+              {
+                breakpoint: 991,
+                settings: {
+                  slidesToShow: 2,
+                  slidesToScroll: 2,
+                }
+              },
+              {
+                breakpoint: 767,
+                settings: {
+                  slidesToShow: 2,
+                  slidesToScroll: 2,
+                  // variableWidth: true,
+                  // arrows: false,
+                }
+              },
+              {
+                breakpoint: 575,
+                settings: {
+                  slidesToShow: 2,
+                  slidesToScroll: 2,
+                  variableWidth: true,
+                  arrows: false,
+                }
+              },
+              {
+                breakpoint: 415,
+                settings: {
+                  slidesToShow: 1,
+                  slidesToScroll: 1,
+                  variableWidth: true,
+                  arrows: false,
+                }
+              }
+            ]
+          });
+
+          hideSlickArrow();  // 判斷輪播按鈕顯示
+          randomTag(randomData, tagList, "featured-content"); // 渲染標籤
+
+        } else if (item.tab === "最夯設計") {
+          let randomData = randomArr(item.data);
+          let str = "";
+          let tagList = [];
+
+          for (let i = 0; i < randomData.length; i++) {
+            const item = randomData[i];
+            str += `
+            <div>
+              <section>
+                <span class="slide-img">
+                  <a href="${locationUrl + item.link}" target="_blank" data-ga4="Best_Design">
+                    <img class="slide-item img-fluid" src="${item.imgUrl}" alt="${item.title}">
+                  </a>
+                  <a href="${locationUrl + item.link}" target="_blank" class="designer-item"  data-ga4="Best_Design">
+                    <img class="slide-item img-fluid" src="${item.img_designer}" alt="${item.title_designer}">
+                    <h2>${item.title_designer}</h2>
+                  </a>
+                  <a href="${locationUrl + item.link}" target="_blank" class="title" data-ga4="Best_Design">
+                    <h3 class="mb-0 ellipsis-title">${item.title}</h3>
+                  </a>
+                </span>
+                <div class="tab-block tag-list-${i}"></div>
+              </section>
+            </div>`;
+            tagList.push(item.ctag);
+          }
+
+          $('.popular-slider').html(str);
+          // 輪播設定
+          $('.popular-slider').slick({
+            infinite: false,
+            slidesToShow: 4,
+            slidesToScroll: 4,
+            variableWidth: false,
+            prevArrow:
+              '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+            nextArrow:
+              '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+            responsive: [
+              {
+                breakpoint: 991,
+                settings: {
+                  slidesToShow: 2,
+                  slidesToScroll: 2,
+                }
+              },
+              {
+                breakpoint: 767,
+                settings: {
+                  slidesToShow: 2,
+                  slidesToScroll: 2,
+                  // variableWidth: true,
+                  // arrows: false,
+                }
+              },
+              {
+                breakpoint: 575,
+                settings: {
+                  slidesToShow: 2,
+                  slidesToScroll: 2,
+                  variableWidth: true,
+                  arrows: false,
+                }
+              },
+              {
+                breakpoint: 415,
+                settings: {
+                  slidesToShow: 1,
+                  slidesToScroll: 1,
+                  variableWidth: true,
+                  arrows: false,
+                }
+              },
+            ]
+          });
+
+          hideSlickArrow();  // 判斷輪播按鈕顯示
+          randomTag(randomData, tagList, "popular-content"); // 渲染標籤
+
+        } else if (item.tab === "最新影音實錄") {
+          let randomData = randomArr(item.data);
+          let str = "";
+
+          for (let i = 0; i < randomData.length; i++) {
+            const item = randomData[i];
+            // <a href="javascript:;" onclick="videoSet('${item.link}','${item.description}')" data-bs-toggle="modal" data-src="${item.link}" data-bs-target="#youtubeModal">
+            //   <img class="slide-item img-fluid" src="${item.imgUrl}" alt="">
+            // </a>
+            str += `
+            <div>
+              <section>
+                <span class="slide-img">
+                  <a href="${item.link}" target="_blank" data-ga4="Latest_Video">
+                    <img class="slide-item img-fluid" src="${item.imgUrl}" alt="${item.description}">
+                    <span class="play-btn">
+                      <img class="slide-item img-fluid" src="./img/icon/material-play-circle-outline.svg" alt="">
+                    </span>
+                  </a>
+                </span>
+                <a href="${item.link}" target="_blank" class="title" data-ga4="Latest_Video">
+                  <h3 class="mb-0 mt-3 ellipsis-title">${item.description}</h3>
+                </a>
+              </section>
+            </div>`;
+          }
+
+          $('.video-slider').html(str);
+          // 輪播設定
+          $('.video-slider').slick({
+            infinite: false,
+            slidesToShow: 4,
+            slidesToScroll: 4,
+            variableWidth: false,
+            prevArrow:
+              '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+            nextArrow:
+              '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+            responsive: [
+              {
+                breakpoint: 991,
+                settings: {
+                  slidesToShow: 2,
+                  slidesToScroll: 2,
+                }
+              },
+              {
+                breakpoint: 767,
+                settings: {
+                  slidesToShow: 2,
+                  slidesToScroll: 2,
+                }
+              },
+              {
+                breakpoint: 575,
+                settings: {
+                  slidesToShow: 2,
+                  slidesToScroll: 1,
+                  variableWidth: true,
+                  arrows: false,
+                }
+              },
+              {
+                breakpoint: 415,
+                settings: {
+                  slidesToShow: 1,
+                  slidesToScroll: 1,
+                  variableWidth: true,
+                  arrows: false,
+                }
+              }
+            ]
+          });
+
+          hideSlickArrow();  // 判斷輪播按鈕顯示
+        }
+      })
+    }
+  })
+
+  // hover 事件
+  $(".main-content h3").hover(
+    function () {
+      $(this).parent().parent().addClass('img-scale');
+    }, function () {
+      $(this).parent().parent().removeClass('img-scale');
+    }
+  );
+
+  $(".main-content .slide-img").hover(
+    function () {
+      $(this).parent().parent().find('h3').css('color', '#ee751b');
+    }, function () {
+      ;
+      $(this).parent().parent().find('h3').css('color', '#727272');
+    }
+  );
+}
+
+// 參數需帶入 (隨機排序清單, 標籤陣列, 外層 className)
+function randomTag(randomData, tagList, content) {
+  let tagLink;
+  if (content === "featured-content") {
+    // 編輯精選
+    tagLink = "column";
+  } else {
+    // 最夯設計
+    tagLink = "case";
+  }
+
+  for (let index = 0; index < tagList.length; index++) {
+    const element = tagList[index];
+    randomData.map((e, i) => {
+      if (i === index) {
+        let list = [];
+        for (let i = 0; i < element.length; i++) {
+          const item = element[i];
+          if (item !== "") {
+            let tag = `
+            <a href=https://hhh.com.tw/search/lists/${tagLink}/${item}-keyword/" target="_blank">
+              <h4>${item}</h4>
+            </a>
+          `;
+            list.push(tag);
+          }
+        }
+        $(`.${content} .tag-list-${index}`).html(list);
+      }
+    })
+  }
+}
+
+function hideSlickArrow() {
+  // 隱藏輪播 disabled 按鈕,後續改為點擊判斷
+  $('.slick-arrow.slick-disabled').css('display', 'none');
+  $('.slick-arrow').click(function () {
+    $('.slick-arrow').css('display', 'block');
+    $('.slick-arrow.slick-disabled').css('display', 'none');
+  });
+}
+
+// 影音實錄 Modal
+function videoSet(src, title) {
+  let url = new URL(src);
+  let id = url.searchParams.get('v');
+  $("#video").attr('src', `https://www.youtube-nocookie.com/embed/${id}`);
+  $("#youtubeModal h2").text(`${title}`);
+}
+
+// Back to top
+$(window).scroll(function () {
+  if ($(this).scrollTop()) {
+    $('.btn-box').fadeIn();
+  } else {
+    $('.btn-box').fadeOut();
+  }
+});

+ 75 - 0
json/index-slider.json

@@ -0,0 +1,75 @@
+[
+    {
+        "id": 0,
+        "tab": "依照空間尋找商品",
+        "data": [
+            {
+                "image": "./img/index/space/Livingroom.jpg",
+                "name": "客廳",
+                "url": "https://hhh.style/hh12FFRrE"
+            },
+            {
+                "image": "./img/index/space/Resturent.jpg",
+                "name": "餐廳",
+                "url": "https://hhh.style/hh12riAMr"
+            },
+            {
+                "image": "./img/index/space/Bedroom.jpg",
+                "name": "臥室",
+                "url": "https://hhh.style/hh12YRr7r"
+            },
+	    {
+                "image": "./img/index/space/Entrance.jpg",
+                "name": "玄關",
+                "url": "https://hhh.style/hh12UBRQB"
+            },
+            {
+                "image": "./img/index/space/Storage.jpg",
+                "name": "收納",
+                "url": "https://hhh.style/hh12Eiabj"
+            }
+        ]
+    },
+    {
+        "id": 1,
+        "tab": "依照專長尋找設計師",
+        "data": [
+            {
+                "image": "./img/index/designer/MFD.jpg",
+                "name": "人氣設計師",
+                "url": "https://event.hhh.com.tw/2023-Most-Favorite-Designers/"
+            },
+            {
+                "image": "./img/index/designer/RRD.jpg",
+                "name": "老屋翻新",
+                "url": "https://hhh.com.tw/event170427/"
+            },
+            
+            {
+                "image": "./img/index/designer/topglory.jpg",
+                "name": "國際大賞",
+                "url": "https://event.hhh.com.tw/topglory/"
+            },
+	         {
+                "image": "./img/index/designer/minordecor.jpg",
+                "name": "輕裝修方案",
+                "url": "https://hhh.com.tw/minordecor"
+            },
+            {
+                "image": "./img/index/designer/matching.jpg",
+                "name": "居家快易便",
+                "url": "https://matching.framer.website/"
+            },
+            {
+                "image": "./img/index/designer/04.png",
+                "name": "小坪數收納",
+                "url": "https://hhh.com.tw/search/lists/case/%E5%B0%8F%E5%9D%AA%E6%95%B8-keyword/"
+            },
+            {
+                "image": "./img/index/designer/07.png",
+                "name": "大坪數豪宅",
+                "url": "https://hhh.com.tw/search/lists/case/%E5%A4%A7%E5%9D%AA%E6%95%B8-keyword/"
+            }
+        ]
+    }
+]

+ 6 - 6
template/button.html

@@ -7,25 +7,25 @@
 
 <!-- <button title="為我推薦設計師" class="d-none d-md-inline" data-ga="Go_To_Request">
     <a href="https://hhh.com.tw/about/request/" target="_blank">
-      <img src="./hhh_index/images/icon/feather-file-text.svg" alt="">
+      <img src="./img/icon/feather-file-text.svg" alt="">
     </a>
   </button>
 
   <button title="裝修預算評估" class="d-none d-md-inline" data-ga="Go_To_Calculator">
     <a href="https://hhh.com.tw/about/calculator/" target="_blank">
-      <img src="./hhh_index/images/icon/ionic-ios-calculator.svg" alt="" style="width: 22px; margin-left: 3px;">
+      <img src="./img/icon/ionic-ios-calculator.svg" alt="" style="width: 22px; margin-left: 3px;">
     </a>
   </button>
 
   <button title="裝修預算諮詢" class="d-none d-md-inline" data-ga="Go_To_Calculator">
     <a href="https://hhh.com.tw/calculator_request/index.html" target="_blank">
-      <img src="./hhh_index/images/icon/ionic-ios-calculator.svg" alt="" style="width: 22px; margin-left: 3px;">
+      <img src="./img/icon/ionic-ios-calculator.svg" alt="" style="width: 22px; margin-left: 3px;">
     </a>
   </button>
 
   <button title="+好物商城" class="d-none d-md-inline" data-ga="Go_To_Shop">
     <a href="https://shop.hhh.com.tw/" target="_blank">
-      <img src="./hhh_index/images/icon/feather-shopping-cart.svg" alt="">
+      <img src="./img/icon/feather-shopping-cart.svg" alt="">
     </a>
   </button> -->
 
@@ -55,13 +55,13 @@
 <div class="d-md-none justify-content-evenly mb-menu">
   <!-- <section title="為我推薦設計師" data-ga="Go_To_Request">
     <a href="https://hhh.com.tw/about/request/" target="_blank">
-      <img src="./hhh_index/images/icon/feather-file-text.svg" alt="為我推薦設計師">
+      <img src="./img/icon/feather-file-text.svg" alt="為我推薦設計師">
       <h4>填需求</h4>
     </a>
   </section>
   <section title="裝修預算評估" data-ga="Go_To_Calculator">
     <a href="https://hhh.com.tw/about/calculator/" target="_blank">
-      <img src="./hhh_index/images/icon/ionic-ios-calculator.svg" alt="裝修預算評估">
+      <img src="./img/icon/ionic-ios-calculator.svg" alt="裝修預算評估">
       <h4>估預算</h4>
     </a>
   </section> -->

+ 2 - 2
template/navbar.html

@@ -695,7 +695,7 @@
     window.location.href = `https://hhh.com.tw/users`;
   }
 
-  let user_data = [];
+  let userData = [];
 
   function hhh_user_api() {
     console.log('登入');
@@ -705,7 +705,7 @@
       // async: false,
       dataType: "json",
     }).done(function (msg) {
-      user_data = msg;
+      userData = msg;
       let app_user = "";
       console.log('hhh_user_msg', msg);
       if (msg.status == "Success") {

Някои файлове не бяха показани, защото твърде много файлове са промени