add matching

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "liveServer.settings.port": 5501
+  "liveServer.settings.port": 5502
 }

css/list-style.css

@@ -0,0 +1,1028 @@
+body {
+  font-family: 'Helvetica Neue';
+}
+
+.sec-00 {
+  height: 295px;
+  -webkit-transition-property: height;
+  transition-property: height;
+  -webkit-transition-duration: 300ms;
+          transition-duration: 300ms;
+}
+
+@media (max-width: 1850px) {
+  .sec-00 {
+    height: 260px;
+  }
+}
+
+@media (max-width: 1550px) {
+  .sec-00 {
+    height: 230px;
+  }
+}
+
+@media (max-width: 1100px) {
+  .sec-00 {
+    height: 200px;
+  }
+}
+
+.sec-00__close {
+  position: absolute;
+  top: 0;
+  right: 20px;
+  width: 50px;
+  height: 30px;
+  background-color: rgba(255, 255, 255, 0.66);
+  border-radius: 0 0 50px 50px;
+  color: #888;
+  border: none;
+  outline: none;
+  font-size: 11px;
+  -webkit-box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
+          box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
+  line-height: 12px;
+}
+
+.sec-00.bannerClose {
+  height: 0;
+  overflow: hidden;
+  -webkit-transition-property: height;
+  transition-property: height;
+  -webkit-transition-duration: 300ms;
+          transition-duration: 300ms;
+}
+
+.sec-00 .container-fluid {
+  background-color: #cacaca;
+  height: 295px;
+}
+
+@media (max-width: 1850px) {
+  .sec-00 .container-fluid {
+    height: 260px;
+  }
+}
+
+@media (max-width: 1550px) {
+  .sec-00 .container-fluid {
+    height: 230px;
+  }
+}
+
+@media (max-width: 1100px) {
+  .sec-00 .container-fluid {
+    height: 200px;
+  }
+}
+
+.sec-00__slider {
+  margin: 0 auto;
+  width: 70%;
+  height: 100%;
+  max-width: 1344px;
+}
+
+@media (max-width: 1850px) {
+  .sec-00__slider {
+    max-width: 1176px;
+  }
+}
+
+@media (max-width: 1550px) {
+  .sec-00__slider {
+    max-width: 1010px;
+  }
+}
+
+.sec-00__slider .slide-item {
+  width: 100%;
+  height: 295px;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+@media (max-width: 1850px) {
+  .sec-00__slider .slide-item {
+    height: 260px;
+  }
+}
+
+@media (max-width: 1550px) {
+  .sec-00__slider .slide-item {
+    height: 230px;
+  }
+}
+
+@media (max-width: 1100px) {
+  .sec-00__slider .slide-item {
+    height: 200px;
+  }
+}
+
+.sec-00 .slick-prev:before, .sec-00 .slick-next:before {
+  display: none;
+}
+
+@-webkit-keyframes slidein {
+  100% {
+    height: 0px;
+  }
+}
+
+@keyframes slidein {
+  100% {
+    height: 0px;
+  }
+}
+
+.navbar {
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  padding-top: 5px;
+  padding-bottom: 5px;
+  background-color: white !important;
+  z-index: 99;
+}
+
+.navbar .container-fluid {
+  padding: 0 2.5rem;
+}
+
+@media (max-width: 1100px) {
+  .navbar .container-fluid {
+    padding: 0 .6rem;
+  }
+}
+
+.navbar-toggler {
+  padding-left: 0;
+  border-color: transparent !important;
+}
+
+.navbar-toggler:focus {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.navbar-toggler-icon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  justify-items: center;
+}
+
+.navbar-toggler-icon i {
+  font-size: 25px;
+  line-height: 30px;
+  display: inline-block;
+}
+
+.navbar-search, .navbar-login {
+  padding-right: 2px;
+}
+
+.navbar-login {
+  cursor: pointer;
+}
+
+.navbar-search-magnify {
+  cursor: pointer;
+}
+
+.navbar-brand {
+  font-size: 1.5rem;
+}
+
+.navbar-brand.navbar-logo {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.navbar-brand .navbar-login {
+  font-size: 1rem;
+  color: #EE7800;
+  text-decoration: none;
+}
+
+.navbar .nav-link {
+  cursor: pointer;
+}
+
+@media (max-width: 1100px) {
+  .navbar .nav-link {
+    padding: .5rem .5rem;
+    font-size: .9rem;
+  }
+}
+
+.navbar .navbar-nav .nav-item {
+  margin: 0 .5rem;
+}
+
+@media (max-width: 1100px) {
+  .navbar .navbar-nav .nav-item {
+    margin: 0 0rem;
+  }
+}
+
+.navbar .navbar-nav .nav-item .dropbox {
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: all .4s;
+  transition: all .4s;
+  position: absolute;
+  width: 100vw;
+  top: 100%;
+  left: 0;
+  background-color: rgba(255, 255, 255, 0.932);
+  padding-top: 1.5rem;
+  padding-bottom: 3rem;
+}
+
+.navbar .navbar-nav .nav-item .dropbox ul {
+  padding-left: 0;
+}
+
+.navbar .navbar-nav .nav-item .dropbox-item {
+  margin-bottom: .5rem;
+}
+
+.navbar .navbar-nav .nav-item .dropbox-item.first {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.navbar .navbar-nav .nav-item .dropbox-item.first .dropbox-link {
+  color: black;
+}
+
+.navbar .navbar-nav .nav-item .dropbox-link {
+  text-decoration: none;
+  color: #929292;
+  font-size: .85rem;
+}
+
+.navbar .navbar-nav .nav-item .dropbox-link:hover {
+  color: #EE7800;
+}
+
+.navbar .navbar-nav .nav-item .dropbox-link.dropbox-btn {
+  border: 1px solid #929292;
+  padding: .5rem 2rem;
+  border-radius: 5px;
+  width: 85%;
+  min-width: 7rem;
+  max-width: 11rem;
+}
+
+.navbar .navbar-nav .nav-item .dropbox-btn {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+.navbar .navbar-nav .nav-item .dropbox .container {
+  max-width: 900px;
+  width: 70%;
+}
+
+.navbar .navbar-nav .nav-item .dropbox .container.stylebox {
+  -webkit-transform: translateX(-30%);
+          transform: translateX(-30%);
+}
+
+.navbar .navbar-nav .nav-item .dropbox .container.designerbox {
+  -webkit-transform: translateX(-5%);
+          transform: translateX(-5%);
+}
+
+.navbar .navbar-nav .nav-item .dropbox .container.newbox {
+  -webkit-transform: translateX(15%);
+          transform: translateX(15%);
+}
+
+.navbar .navbar-nav .nav-item .dropbox .container.forumbox {
+  -webkit-transform: translateX(50%);
+          transform: translateX(50%);
+}
+
+.navbar .navbar-nav .nav-item .nav-link {
+  position: relative;
+}
+
+.navbar .navbar-nav .nav-item .nav-link:after {
+  position: absolute;
+  content: " ";
+  width: 100%;
+  height: 90%;
+  top: 0;
+  right: 0;
+  border-bottom: 2px solid #EE7800;
+  opacity: 0;
+  -webkit-transform: opacity 1s;
+          transform: opacity 1s;
+}
+
+.navbar .navbar-nav .nav-item:hover .nav-link:after {
+  opacity: 1;
+}
+
+.navbar .navbar-nav .nav-item:hover > .dropbox {
+  visibility: visible;
+  opacity: 1;
+}
+
+.navbar .navbar-nav .nav-item.lg .container {
+  max-width: 1200px;
+  width: 90%;
+}
+
+.navbar .navbar-nav .nav-item.lg .dropbox-link {
+  text-decoration: none;
+  color: #929292;
+  font-size: .7rem;
+}
+
+.navbar .navbar-nav .nav-item.lg .dropbox-link:hover {
+  color: #EE7800;
+}
+
+.navbar .navbar-nav .nav-item.lg .dropbox-item {
+  margin-bottom: .1rem;
+}
+
+.navbar .navbar-nav .nav-item.lg .dropbox-item.first .dropbox-link {
+  font-size: .85rem;
+}
+
+.navbar-search .container {
+  max-width: 900px;
+  width: 70%;
+}
+
+@media (max-width: 1100px) {
+  .navbar-search .container {
+    width: 90%;
+  }
+}
+
+.navbar-search .dropbox {
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: all .2s;
+  transition: all .2s;
+  position: absolute;
+  width: 100vw;
+  top: 100%;
+  left: 0;
+  background-color: rgba(255, 255, 255, 0.932);
+  padding-top: 1.5rem;
+  padding-bottom: 3rem;
+}
+
+.navbar-search .dropbox.open {
+  visibility: visible;
+  opacity: 1;
+}
+
+.navbar-search .dropbox__searchtab {
+  width: 100%;
+  background-color: gray;
+  border-radius: 3px;
+  padding: .2rem 1rem;
+  padding-bottom: 1rem;
+}
+
+.navbar-search .dropbox__hots__title {
+  font-size: 1rem;
+  color: #6b6b6b;
+}
+
+.navbar-search .dropbox__hots__link {
+  font-size: .9rem;
+  color: #929292;
+  text-decoration: none;
+  cursor: pointer;
+  margin: 0 .2rem;
+}
+
+.navbar-search .dropbox__searchBar__input {
+  width: 100%;
+  outline: none;
+  border: 2px solid #EE7800;
+  border-radius: 5rem;
+  padding: .3rem 1.2rem;
+  font-size: .9rem;
+}
+
+.navbar-search .dropbox__searchBar__submit {
+  outline: none;
+  border: none;
+  font-size: .9rem;
+  background-color: transparent;
+  color: #EE7800;
+  margin-left: -1rem;
+  -webkit-transform: translateX(-100%);
+          transform: translateX(-100%);
+  padding: 0 .6rem;
+}
+
+.navbar-search .dropbox__tab .nav-item {
+  margin: 0 .6rem;
+}
+
+.navbar-search .dropbox .nav-item-link {
+  border: none;
+  outline: none;
+  font-size: 1rem;
+  color: white;
+  padding: 3px;
+  position: relative;
+}
+
+.navbar-search .dropbox .nav-item-link::after {
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-bottom: 3px solid #EE7800;
+  opacity: 0;
+}
+
+.navbar-search .dropbox .nav-item-link.active::after {
+  opacity: 1;
+}
+
+.navbar-search .dropbox-tab-content .tabpar {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding-top: .5rem;
+}
+
+.navbar-search .dropbox-tab-content .tabpar .col {
+  margin: 0 .6rem;
+}
+
+.navbar-search .dropbox-tab-content .tabpar .select {
+  font-size: 1rem;
+  padding: .6rem;
+  border-radius: 3px;
+  color: #747474;
+}
+
+.navbar-search .dropbox-tab-content .tabpar button {
+  border: none;
+  outline: none;
+  background-color: #EE7800;
+  border-radius: 3px;
+  color: white;
+  font-size: 1rem;
+  padding: .6rem;
+}
+
+.navbar-search .dropbox-tab-content .tabpar .image-search {
+  border: none;
+  outline: none;
+  background-color: #EE7800;
+  border-radius: 3px;
+  color: white;
+  font-size: 1rem;
+}
+
+.navbar-search .dropbox-tab-content .tabpar .article-btn {
+  border: none;
+  outline: none;
+  background-color: #EE7800;
+  border-radius: 3px;
+  color: white;
+  font-size: 1rem;
+  padding: .6rem;
+}
+
+.navbar-search .dropbox-tab-content .tabpar .home-btn {
+  border: none;
+  outline: none;
+  background-color: #EE7800;
+  border-radius: 3px;
+  color: white;
+  font-size: 1rem;
+  padding: .6rem;
+}
+
+.navbar-search .dropbox__tab .nav-item-link.active .nav-item-link::after {
+  opacity: 1;
+}
+
+.navbar-main.sticky {
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+.navbar-main.sticky + .sec-02 {
+  padding-top: 53.5px;
+}
+
+.sec-02__slider {
+  width: 100%;
+  height: 100%;
+}
+
+.sec-02__slider .slide-item {
+  width: 100%;
+  height: 74vh;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+.sec-02 .slick-prev:before, .sec-02 .slick-next:before {
+  display: none;
+}
+
+.sec-02 .slick-prev {
+  left: 15px;
+  z-index: 3;
+}
+
+.sec-02 .slick-next {
+  right: 15px;
+}
+
+a {
+  text-decoration: none;
+}
+
+.text-hhh {
+  color: #EE7800;
+}
+
+.content {
+  background-color: #FCFCFC;
+  padding: 1rem 30px 0.5rem;
+}
+
+.content .infoCard {
+  color: #727679;
+  text-align: center;
+  padding: 1rem;
+  background-color: rgba(244, 244, 244, 0.8);
+  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  -webkit-transform: translateY(-150px);
+          transform: translateY(-150px);
+}
+
+.content .infoCard__seo {
+  font-size: .9rem;
+  text-align: center;
+  padding: 1rem;
+  display: block;
+  line-height: 1.2;
+}
+
+.content .infoCard__approve {
+  color: #FF0000;
+}
+
+.content .infoCard__avatar {
+  width: 200px;
+  height: 200px;
+  border: 3px solid #FFF;
+  border-radius: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.content .infoCard__detail aside {
+  line-height: 2;
+  font-size: .9rem;
+}
+
+.content .infoCard__detail__l {
+  -ms-flex-preferred-size: 30%;
+      flex-basis: 30%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  -webkit-box-flex: 0;
+      -ms-flex-positive: 0;
+          flex-grow: 0;
+  max-width: 30%;
+}
+
+.content .infoCard__detail__l.title {
+  color: #AAAAAA;
+  font-size: 1.125rem;
+  font-weight: bold;
+  -webkit-transform: translateX(-15px);
+          transform: translateX(-15px);
+}
+
+.content .infoCard__detail__r {
+  -ms-flex-preferred-size: 70%;
+      flex-basis: 70%;
+  text-align: start;
+  -webkit-box-flex: 0;
+      -ms-flex-positive: 0;
+          flex-grow: 0;
+  max-width: 70%;
+  word-break: break-all;
+}
+
+.content .infoCard .scMedia {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 1rem 0;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+}
+
+.content .infoCard .scMedia a {
+  width: 16%;
+}
+
+.content .infoCard .scMedia a img {
+  width: 100%;
+}
+
+.infoContent a {
+  color: #727679;
+  text-decoration: none;
+  font-size: .9rem;
+}
+
+.infoContent a.active {
+  color: #EE7800;
+}
+
+.infoContent .nav-item {
+  margin: 0 0.8rem;
+  width: auto;
+}
+
+.infoContent .nav-item-link {
+  display: block;
+  padding: 0.5rem 2.5rem;
+  text-decoration: none;
+  background-color: transparent;
+  font-size: .9rem;
+  color: #727679;
+}
+
+.infoContent .nav-item-link.active {
+  color: #EE7800;
+  border-bottom: 2px solid #EE7800;
+}
+
+.infoContent .likeSee__divider {
+  height: 12px;
+  display: inline-block;
+  border: 0.5px solid #9d9d9d;
+}
+
+.infoContent .card {
+  -webkit-box-shadow: 0 1px 10px #eee;
+          box-shadow: 0 1px 10px #eee;
+  margin: 0 0 1.5rem;
+  border: none;
+}
+
+.infoContent .card__bgImg {
+  height: 293px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+      justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+      align-items: center;
+  -webkit-box-pack: center;
+}
+
+.infoContent .card-body {
+  padding: 0.5rem 1rem;
+}
+
+.infoContent .card__title {
+  font-size: 1.125rem;
+  -webkit-box-orient: vertical;
+  box-orient: vertical;
+  -webkit-line-clamp: 2;
+  height: calc(18px * 2 * 1.5);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  font-weight: bold;
+  margin: 0.5rem 0;
+  color: #727679;
+}
+
+.infoContent .card__tag {
+  margin: 0 0.2rem 0 0;
+}
+
+.infoContent .company__block {
+  margin: 0 0 2rem;
+}
+
+.infoContent .company__title {
+  color: #AAAAAA;
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+.infoContent .company__text {
+  color: #43484C;
+}
+
+.nav-collapse-fixed {
+  position: fixed;
+  top: 52px;
+  z-index: 1010;
+  width: 100%;
+  opacity: 0;
+  -webkit-transition: opacity .5s;
+  transition: opacity .5s;
+}
+
+.nav-collapse-fixed.sticky {
+  display: block;
+  opacity: 1;
+}
+
+.nav-collapse-fixed .nav-collpase {
+  padding: 1rem 0;
+  background-color: #FCFCFC;
+  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+
+.navbar-main.sticky + .hero {
+  padding-top: 53px;
+}
+
+.fixed-btn {
+  position: fixed;
+  right: 15px;
+  bottom: 2rem;
+}
+
+.fixed-btn .btn-gotop, .fixed-btn .btn-login, .fixed-btn .btn-favor {
+  cursor: pointer;
+  padding: 1.2rem .8rem;
+  background-color: rgba(255, 255, 255, 0.897);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+
+.footer {
+  background: #e9e9e9;
+  padding: 2.5rem 0;
+}
+
+@media (max-width: 1100px) {
+  .footer .container {
+    width: 98%;
+    max-width: 950px;
+  }
+}
+
+.footer__block {
+  padding: 1rem 3rem;
+  border-left: 1px solid #8f8f8f;
+}
+
+@media (max-width: 1100px) {
+  .footer__block {
+    padding: 1rem 1rem;
+  }
+}
+
+.footer__block-title {
+  font-size: 1.3rem;
+  margin-bottom: 1.5rem;
+}
+
+.footer__block-list {
+  padding-left: 0;
+}
+
+.footer__block:nth-of-type(1) {
+  border-left: none;
+}
+
+.footer__block:nth-of-type(2) {
+  padding: 1rem 4rem;
+}
+
+@media (max-width: 1100px) {
+  .footer__block:nth-of-type(2) {
+    padding: 1rem 1rem;
+  }
+}
+
+.footer__block-socials {
+  padding-left: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+@media (max-width: 1100px) {
+  .footer__block-socials img {
+    width: 30px;
+  }
+}
+
+.footer__block .follows-fp {
+  text-decoration: none;
+  color: #696969;
+  font-size: .9rem;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+@media (max-width: 1100px) {
+  .footer__block .follows-fp {
+    font-size: .8rem;
+  }
+}
+
+.footer__block-phone p {
+  display: inline;
+}
+
+@media (max-width: 900px) {
+  .footer__block-phone p {
+    display: block;
+  }
+}
+
+.footer__block-phone p, .footer__block-phone span {
+  font-size: .9rem;
+}
+
+.footer__block-phone .text-phone {
+  color: #EE7800;
+  text-decoration: none;
+}
+
+.footer__block-links {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-top: 1rem;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+.footer__block-links-grp {
+  padding: .3rem;
+  border-left: 1px solid #b9b9b9;
+}
+
+.footer__block-links-grp:nth-of-type(1) {
+  border-left: none;
+}
+
+.footer__block-links-grp a {
+  display: block;
+  text-decoration: none;
+  color: #696969;
+  font-size: .9rem;
+  margin-bottom: .4rem;
+}
+
+@media (max-width: 1100px) {
+  .footer__block-links-grp a {
+    font-size: .8rem;
+  }
+}
+
+.footer__block-subscribe {
+  width: 100%;
+  margin-top: 1rem;
+}
+
+.footer__block-subscribe .subscribeBar {
+  font-size: .8rem;
+  width: 70%;
+  margin-left: 7%;
+}
+
+@media (max-width: 900px) {
+  .footer__block-subscribe .subscribeBar {
+    width: 75%;
+    margin-left: 3%;
+    font-size: .7rem;
+  }
+}
+
+.footer__block-subscribe .subscribeBtn {
+  width: 20%;
+  padding: .4rem .6rem;
+  padding-bottom: 9px;
+  border: none;
+  outline: none;
+  background-color: #292929;
+  color: white;
+  border-radius: 0 3px 3px 0;
+  margin-left: -.4rem;
+}
+
+@media (max-width: 900px) {
+  .footer__block-subscribe .subscribeBtn {
+    margin-left: -.3rem;
+    font-size: .8rem;
+    padding-top: 9px;
+    padding-bottom: 10px;
+  }
+}
+
+.footer__list-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  text-decoration: none;
+  margin-bottom: .5rem;
+}
+
+.footer__list-item p {
+  color: #696969;
+  font-size: .9rem;
+  font-weight: 300;
+}
+
+.footer__list-icon {
+  width: 30px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  margin-right: .3rem;
+}
+
+.footer .bottom-box {
+  padding: 1rem 0;
+  border-top: 1px solid #b9b9b9;
+  margin-top: 2.5rem;
+}
+/*# sourceMappingURL=list-style.css.map */

css/list-style.scss

@@ -0,0 +1,804 @@
+body {
+  font-family: 'Helvetica Neue';
+}
+
+.sec-00 {
+  height: 295px;
+  transition-property: height;
+  transition-duration: 300ms;
+  @media (max-width: 1850px) {
+      height: 260px;
+  }
+  @media (max-width: 1550px) {
+      height: 230px;
+  }
+  @media (max-width: 1100px) {
+      height: 200px;
+  }
+  &__close {
+      position: absolute;
+      top: 0;
+      right: 20px;
+      width: 50px;
+      height: 30px;
+      background-color: hsla(0,0%,100%,.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;
+  }
+  &.bannerClose {
+      height: 0;
+      overflow: hidden;
+      transition-property: height;
+      transition-duration: 300ms;
+  }
+  .container-fluid {
+      background-color: rgb(202, 202, 202);
+      height: 295px;
+      @media (max-width: 1850px) {
+          height: 260px;
+      }
+      @media (max-width: 1550px) {
+          height: 230px;
+      }
+      @media (max-width: 1100px) {
+          height: 200px;
+      }
+  }
+  &__slider {
+      margin: 0 auto;
+      width: 70%;
+      height: 100%;
+      max-width: 1344px;
+      @media (max-width: 1850px) {
+          max-width: 1176px;
+      }
+      @media (max-width: 1550px) {
+          max-width: 1010px;
+      }
+      .slide-item {
+          width: 100%;
+          height: 295px;
+          background-position: center center;
+          background-size: cover;
+          background-repeat: no-repeat;
+          cursor: pointer;
+          @media (max-width: 1850px) {
+              height: 260px;
+          }
+          @media (max-width: 1550px) {
+              height: 230px;
+          }
+          @media (max-width: 1100px) {
+              height: 200px;
+          }
+      }
+  }
+  .slick-prev:before, .slick-next:before {
+      display: none;
+  }
+}
+
+@-webkit-keyframes slidein {
+  100% {
+      height: 0px;
+    }
+}
+
+@keyframes slidein {
+  100% {
+      height: 0px;
+  }
+}
+
+.navbar {
+  box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
+  -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
+  -moz-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
+  padding-top: 5px;
+  padding-bottom: 5px;
+  background-color: white !important;
+  z-index: 99;
+  .container-fluid {
+      padding:0 2.5rem;
+      @media (max-width: 1100px) {
+          padding:0 .6rem;
+      }
+  }
+  &-toggler {
+      padding-left: 0;
+      border-color: transparent !important;
+      &:focus {
+          box-shadow: none;
+      }
+  }
+  &-toggler-icon {
+      display: flex;
+      justify-items: center;
+      i {
+          font-size: 25px;
+          line-height: 30px;
+          display: inline-block;
+      }
+  }
+  &-search, &-login {
+      padding-right: 2px;
+  }
+  &-login {
+      cursor: pointer;
+  }
+  &-search {
+      &-magnify {
+          cursor: pointer;
+      }
+  }
+  &-brand {
+      font-size: 1.5rem;
+      &.navbar-logo {
+          display: flex;
+          align-items: center;
+      }
+      .navbar-login {
+          font-size: 1rem;
+          color: #EE7800;
+          text-decoration: none;
+      }
+  }
+  .nav-link {
+      cursor: pointer;
+      @media (max-width: 1100px) {
+          padding: .5rem .5rem;
+          font-size: .9rem;
+      }
+  }
+  .navbar-nav {
+      .nav-item {
+          margin: 0 .5rem;
+          @media (max-width: 1100px) {
+              margin: 0 0rem;
+          }
+          .dropbox {
+              visibility: hidden;
+              opacity: 0;
+              transition: all .4s;
+              position: absolute;
+              width: 100vw;
+              top: 100%;
+              left: 0;
+              background-color: rgba(255, 255, 255, 0.932);
+              padding-top: 1.5rem;
+              padding-bottom: 3rem;
+              ul {
+                  padding-left: 0;
+              }
+              &-item {
+                  margin-bottom: .5rem;
+                  &.first {
+                      font-size: 1.1rem;
+                      font-weight: 600;
+                      .dropbox-link {
+                          color: black;
+                      }
+                  }
+              }
+              &-link {
+                  text-decoration: none;
+                  color: rgb(146, 146, 146);
+                  font-size: .85rem;
+                  &:hover {
+                      color: #EE7800;
+                  }
+                  &.dropbox-btn {
+                      border: 1px solid rgb(146, 146, 146);
+                      padding: .5rem 2rem;
+                      border-radius: 5px;
+                      width: 85%;
+                      min-width: 7rem;
+                      max-width: 11rem;
+                  }
+              }
+              &-btn {
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+              }
+              .container {
+                  max-width: 900px;
+                  width: 70%;
+                  &.stylebox {
+                      transform: translateX(-30%);
+                  }
+                  &.designerbox {
+                      transform: translateX(-5%);
+                  }
+                  &.newbox {
+                      transform: translateX(15%);
+                  }
+                  &.forumbox {
+                      transform: translateX(50%);
+                  }
+              }
+          }
+          .nav-link {
+              position: relative;
+          }
+          .nav-link:after {
+              position: absolute;
+              content: " ";
+              width: 100%;
+              height: 90%;
+              top: 0;
+              right: 0;
+              border-bottom: 2px solid #EE7800;
+              opacity: 0;
+              transform: opacity 1s;
+          }
+          &:hover {
+              .nav-link:after {
+                  opacity: 1;
+              }
+              >.dropbox {
+                  visibility: visible;
+                  opacity: 1;
+              }
+          }
+          
+      }
+      .nav-item.lg {
+          .container {
+              max-width: 1200px;
+              width: 90%;
+          }
+          .dropbox-link {
+              text-decoration: none;
+              color: rgb(146, 146, 146);
+              font-size: .7rem;
+              &:hover {
+                  color: #EE7800;
+              }
+          }
+          .dropbox-item {
+              margin-bottom: .1rem;
+              &.first {
+                  .dropbox-link {
+                      font-size: .85rem;
+                  }
+              }
+          }
+      }
+  }
+  &-search {
+      .container {
+          max-width: 900px;
+          width: 70%;
+          @media (max-width: 1100px) {
+              width: 90%;
+          }
+      }
+      .dropbox {
+          visibility: hidden;
+          opacity: 0;
+          transition: all .2s;
+          position: absolute;
+          width: 100vw;
+          top: 100%;
+          left: 0;
+          background-color: rgba(255, 255, 255, 0.932);
+          padding-top: 1.5rem;
+          padding-bottom: 3rem;
+          &.open {
+              visibility: visible;
+              opacity: 1;
+          }
+          &__searchtab {
+              width: 100%;
+              background-color: gray;
+              border-radius: 3px;
+              padding: .2rem 1rem;
+              padding-bottom: 1rem;
+          }
+          &__hots {
+              &__title {
+                  font-size: 1rem;
+                  color: rgb(107, 107, 107);
+              }
+              &__link {
+                  font-size: .9rem;
+                  color: rgb(146, 146, 146);
+                  text-decoration: none;
+                  cursor: pointer;
+                  margin: 0 .2rem;
+              }
+          }
+          &__searchBar {
+              &__input {
+                  width: 100%;
+                  outline: none;
+                  border: 2px solid #EE7800;
+                  border-radius: 5rem;
+                  padding: .3rem 1.2rem;
+                  font-size: .9rem;
+              }
+              &__submit {
+                  outline: none;
+                  border: none;
+                  font-size: .9rem;
+                  background-color: transparent;
+                  color: #EE7800;
+                  margin-left: -1rem;
+                  transform: translateX(-100%);
+                  padding: 0 .6rem;
+              }
+          }
+          &__tab {
+              .nav-item {
+                  margin: 0 .6rem;
+                  }
+              }
+              .nav-item-link {
+                  border: none;
+                  outline: none;
+                  font-size: 1rem;
+                  color: white;
+                  padding: 3px;
+                  position: relative;
+                  &::after {
+                      position: absolute;
+                      content: "";
+                      top: 0;
+                      left: 0;
+                      width: 100%;
+                      height: 100%;
+                      border-bottom: 3px solid #EE7800;
+                      opacity: 0;
+                  }
+                  &.active::after {
+                      opacity: 1;
+                  }
+              }
+                  
+          }
+      .dropbox-tab-content {
+          .tabpar {
+              display: flex;
+              padding-top: .5rem;
+              .col {
+                  margin: 0 .6rem;
+              }
+              .select {
+                  font-size: 1rem;
+                  padding: .6rem;
+                  border-radius: 3px;
+                  color: rgb(116, 116, 116);
+              }
+              button {
+                  border: none;
+                  outline: none;
+                  background-color: #EE7800;
+                  border-radius: 3px;
+                  color: white;
+                  font-size: 1rem;
+                  padding: .6rem;
+              }
+              .image-search {
+                  border: none;
+                  outline: none;
+                  background-color: #EE7800;
+                  border-radius: 3px;
+                  color: white;
+                  font-size: 1rem;
+              }
+              .article-btn {
+                  border: none;
+                  outline: none;
+                  background-color: #EE7800;
+                  border-radius: 3px;
+                  color: white;
+                  font-size: 1rem;
+                  padding: .6rem;
+              }
+              .home-btn {
+                  border: none;
+                  outline: none;
+                  background-color: #EE7800;
+                  border-radius: 3px;
+                  color: white;
+                  font-size: 1rem;
+                  padding: .6rem;
+              }
+          }
+      }
+  }
+}
+
+.navbar-search .dropbox__tab .nav-item-link.active .nav-item-link::after {
+  opacity: 1;
+}
+.navbar-main.sticky {
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+.navbar-main.sticky + .sec-02 {
+  padding-top: 53.5px;
+}
+
+.sec-02 {
+  &__slider {
+      width: 100%;
+      height: 100%;
+      .slide-item {
+          width: 100%;
+          height: 74vh;
+          background-position: center center;
+          background-size: cover;
+          background-repeat: no-repeat;
+          cursor: pointer;
+      }
+      
+  }
+  .slick-prev:before, .slick-next:before {
+      display: none;
+  }
+  .slick-prev {
+      left: 15px;
+      z-index: 3;
+  }
+  .slick-next {
+      right: 15px;
+  }
+}
+
+a {
+    text-decoration: none;
+}
+
+.text-hhh {
+    color: #EE7800;
+}
+
+.content {
+  background-color: #FCFCFC;
+  padding: 1rem 30px 0.5rem;
+  .infoCard {
+    color: #727679;
+    text-align: center;
+    padding: 1rem;
+    background-color: rgba(244, 244, 244, 0.8);
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
+    transform: translateY(-150px);
+    &__seo {
+        font-size: .9rem;
+        text-align: center;
+        padding: 1rem;
+        display: block;
+        line-height: 1.2;
+    }
+    &__approve {
+        color: #FF0000;
+    }
+    &__avatar {
+        width: 200px;
+        height: 200px;
+        border: 3px solid #FFF;
+        border-radius: 50%;
+        background-size: cover;
+        background-repeat: no-repeat;
+    
+    }
+    &__detail {
+        aside {
+            line-height: 2;
+            font-size: .9rem;
+        }
+        &__l {
+            flex-basis: 30%;
+            display: flex;
+            justify-content: flex-end;
+            flex-grow: 0;
+            max-width: 30%;
+            &.title {
+                color: #AAAAAA;
+                font-size: 1.125rem;
+                font-weight: bold;
+                transform: translateX(-15px);
+            }
+        }
+        &__r {
+            flex-basis: 70%;
+            text-align: start;
+            flex-grow: 0;
+            max-width: 70%;
+            word-break: break-all;
+        }
+    }
+    .scMedia {
+        display: flex;
+        padding: 1rem 0;
+        width: 100%;
+        margin-left: auto;
+        margin-right: auto;
+        justify-content: space-around;
+        a {
+            width: 16%;
+            img {
+                width: 100%;
+            }
+        }
+    }
+  }
+}
+
+.infoContent {
+    a {
+        color: #727679;
+        text-decoration: none;
+        font-size: .9rem;
+        &.active {
+            color: #EE7800;
+        }
+    }
+    .nav-item {
+        margin: 0 0.8rem;
+        width: auto;
+        &-link {
+            display: block;
+            padding: 0.5rem 2.5rem;
+            text-decoration: none;
+            background-color: transparent;
+            font-size: .9rem;
+            color: #727679;
+            &.active {
+                color: #EE7800;
+                border-bottom: 2px solid #EE7800;
+            }
+        }
+    }
+    .likeSee {
+        &__divider {
+            height: 12px;
+            display: inline-block;
+            border: 0.5px solid #9d9d9d;
+        }
+    }
+    .card {
+        box-shadow: 0 1px 10px #eee;
+        margin: 0 0 1.5rem;
+        border: none;
+        &__bgImg {
+            height: 293px;
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-position: center;
+            position: relative;
+            display: flex;
+            justify-content: center;
+            -webkit-box-align: center;
+            align-items: center;
+            -webkit-box-pack: center;
+        }
+        &-body {
+            padding: 0.5rem 1rem;
+        }
+        &__title {
+            font-size: 1.125rem;
+            -webkit-box-orient: vertical;
+            box-orient: vertical;
+            -webkit-line-clamp: 2;
+            height: calc(18px * 2 * 1.5);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            font-weight: bold;
+            margin: 0.5rem 0;
+            color: #727679;
+        }
+        &__tag {
+            margin: 0 0.2rem 0 0;
+        }
+    }
+    .company {
+        &__block {
+            margin: 0 0 2rem;
+        }
+        &__title {
+            color: #AAAAAA;
+            font-size: 2rem;
+            font-weight: bold;
+        }
+        &__text {
+            color: #43484C;
+        }
+    }
+}
+
+.nav-collapse-fixed {
+    position: fixed;
+    top: 52px;
+    z-index: 1010;
+    width: 100%;
+    opacity: 0;
+    transition: opacity .5s;
+    &.sticky {
+        display: block;
+        opacity: 1;
+    }
+    .nav-collpase {
+        padding: 1rem 0;
+        background-color: #FCFCFC;
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15)
+    }
+}
+
+.navbar-main.sticky + .hero {
+    padding-top: 53px;
+}
+
+.fixed-btn {
+    position: fixed;
+    right: 15px;
+    bottom: 2rem;
+    .btn-gotop, .btn-login, .btn-favor {
+        cursor: pointer;
+        padding: 1.2rem .8rem;
+        background-color: rgba(255, 255, 255, 0.897);
+        display: flex;
+        align-items: center;
+        box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+        -webkit-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+        -moz-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+    }
+        
+}
+
+
+.footer {
+  background: #e9e9e9;
+  padding: 2.5rem 0;
+  .container {
+      @media (max-width: 1100px) {
+          width: 98%;
+          max-width: 950px;
+      }
+  }
+  &__block {
+      padding: 1rem 3rem;
+      border-left: 1px solid rgb(143, 143, 143);
+      @media (max-width: 1100px) {
+          padding: 1rem 1rem;
+      }
+      &-title {
+          font-size: 1.3rem;
+          margin-bottom: 1.5rem;
+      }
+      &-list {
+          padding-left: 0;
+      }
+      &:nth-of-type(1) {
+          border-left: none;
+      }
+      &:nth-of-type(2) {
+          padding: 1rem 4rem;
+          @media (max-width: 1100px) {
+              padding: 1rem 1rem;
+          }
+      }
+      &-socials {
+          padding-left: 0;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          img {
+              @media (max-width: 1100px) {
+                  width: 30px;
+              }
+          }
+      }
+      .follows-fp {
+          text-decoration: none;
+          color: #696969;
+          font-size: .9rem;
+          display: flex;
+          align-items: center;
+          @media (max-width: 1100px) {
+              font-size: .8rem;
+          }
+      }
+      &-phone {
+          p {
+              display: inline;
+              @media (max-width: 900px) {
+                  display: block;
+              }
+          }
+          p, span {
+              font-size: .9rem;
+          }
+          .text-phone {
+              color: #EE7800;
+              text-decoration: none;
+          }
+      }
+      &-links {
+          display: flex;
+          align-items: center;
+          margin-top: 1rem;
+          justify-content: center;
+          &-grp {
+              padding: .3rem;
+              border-left: 1px solid rgb(185, 185, 185);
+              &:nth-of-type(1) {
+                  border-left: none;
+              }
+              a {
+                  display: block;
+                  text-decoration: none;
+                  color: #696969;
+                  font-size: .9rem;
+                  margin-bottom: .4rem;
+                  @media (max-width: 1100px) {
+                      font-size: .8rem;
+                  }
+              }
+          }
+      }
+      &-subscribe {
+          width: 100%;
+          margin-top: 1rem;
+          .subscribeBar {
+              font-size: .8rem;
+              width: 70%;
+              margin-left: 7%;
+              @media (max-width: 900px) {
+                  width: 75%;
+                  margin-left: 3%;
+                  font-size: .7rem;
+              }
+          }
+          .subscribeBtn {
+              width: 20%;
+              padding: .4rem .6rem;
+              padding-bottom: 9px;
+              border: none;
+              outline: none;
+              background-color: rgb(41, 41, 41);
+              color: white;
+              border-radius: 0 3px 3px 0;
+              margin-left: -.4rem;
+              @media (max-width: 900px) {
+                  margin-left: -.3rem;
+                  font-size: .8rem;
+                  padding-top: 9px;
+                  padding-bottom: 10px;
+              }
+          }
+      }
+  }
+  &__list-item {
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+      margin-bottom: .5rem;
+      p {
+          color: #696969;
+          font-size: .9rem;
+          font-weight: 300;
+      }
+  }
+  &__list-icon {
+      width: 30px;
+      display: flex;
+      justify-content: center;
+      margin-right: .3rem;
+  }
+  .bottom-box {
+      padding: 1rem 0;
+      border-top: 1px solid rgb(185, 185, 185);
+      margin-top: 2.5rem;
+  }
+}

css/style.css

@@ -3,31 +3,13 @@ body {
 }
 
 .sec-00 {
-  height: 295px;
+  background-color: #cacaca;
   -webkit-transition-property: height;
   transition-property: height;
   -webkit-transition-duration: 300ms;
           transition-duration: 300ms;
 }
 
-@media (max-width: 1850px) {
-  .sec-00 {
-    height: 260px;
-  }
-}
-
-@media (max-width: 1550px) {
-  .sec-00 {
-    height: 230px;
-  }
-}
-
-@media (max-width: 1100px) {
-  .sec-00 {
-    height: 200px;
-  }
-}
-
 .sec-00__close {
   position: absolute;
   top: 0;
@@ -56,73 +38,40 @@ body {
 
 .sec-00 .container-fluid {
   background-color: #cacaca;
-  height: 295px;
-}
-
-@media (max-width: 1850px) {
-  .sec-00 .container-fluid {
-    height: 260px;
-  }
-}
-
-@media (max-width: 1550px) {
-  .sec-00 .container-fluid {
-    height: 230px;
-  }
-}
-
-@media (max-width: 1100px) {
-  .sec-00 .container-fluid {
-    height: 200px;
-  }
 }
 
 .sec-00__slider {
   margin: 0 auto;
-  width: 70%;
+  width: 100%;
   height: 100%;
-  max-width: 1344px;
+  max-width: 1310px;
+  padding-top: 20px;
+  padding-bottom: 24px;
 }
 
 @media (max-width: 1850px) {
   .sec-00__slider {
-    max-width: 1176px;
+    max-width: 1310px;
   }
 }
 
 @media (max-width: 1550px) {
   .sec-00__slider {
-    max-width: 1010px;
+    max-width: 1310px;
   }
 }
 
 .sec-00__slider .slide-item {
   width: 100%;
-  height: 295px;
-  background-position: center center;
-  background-size: cover;
-  background-repeat: no-repeat;
+  height: 100%;
+  max-width: 1310px;
+  max-height: 300px;
+  -o-object-fit: contain;
+  object-fit: contain;
+  height: 300px;
   cursor: pointer;
 }
 
-@media (max-width: 1850px) {
-  .sec-00__slider .slide-item {
-    height: 260px;
-  }
-}
-
-@media (max-width: 1550px) {
-  .sec-00__slider .slide-item {
-    height: 230px;
-  }
-}
-
-@media (max-width: 1100px) {
-  .sec-00__slider .slide-item {
-    height: 200px;
-  }
-}
-
 .sec-00 .slick-prev:before, .sec-00 .slick-next:before {
   display: none;
 }
@@ -1628,7 +1577,8 @@ body {
   bottom: 2rem;
 }
 
-.fixed-btn .btn-gotop, .fixed-btn .btn-login, .fixed-btn .btn-favor {
+.fixed-btn .btn-gotop, .fixed-btn .btn-login, .fixed-btn .btn-favor,
+.fixed-btn .btn-match {
   cursor: pointer;
   padding: 1.2rem .8rem;
   background-color: rgba(255, 255, 255, 0.897);
@@ -1643,6 +1593,85 @@ body {
   -moz-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
+.fixed-btn .btn-match {
+  height: 100px;
+  padding: .2rem;
+  background-color: #EE7800;
+  color: #fff;
+  font-size: 1em;
+  word-spacing: 5px;
+  width: 53px;
+  text-align: center;
+}
+
+#matchModal .modal-content {
+  position: relative;
+}
+
+#matchModal .modal-content .btn-close {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+}
+
+.match__next {
+  outline: none;
+  border: none;
+  background-color: #EE7800;
+  border-radius: .3rem;
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+  color: white;
+}
+
+.match__next2 {
+  outline: none;
+  border: none;
+  background-color: #EE7800;
+  border-radius: .3rem;
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+  color: white;
+}
+
+.sec-match p {
+  color: #707070;
+}
+
+.sec-match__imgfr {
+  width: 90%;
+  height: 14rem;
+  background-image: url(https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_244_01.jpg);
+  background-position: center;
+  background-size: cover;
+}
+
+.sec-match__designer {
+  background-image: url(https://cloud.hhh.com.tw/upload/_hdesigner/img_path_611_20190318172644.jpg);
+  width: 80%;
+  height: 12rem;
+  background-position: center;
+  background-size: cover;
+  border-radius: 50%;
+}
+
+.sec-match .btn-match {
+  outline: none;
+  border: none;
+  color: #EE7800;
+  border: 1px solid #EE7800;
+  background-color: transparent;
+  border-radius: 10px;
+  padding: .3rem .6rem;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+}
+
+.sec-match .btn-match:hover {
+  background-color: #EE7800;
+  color: white;
+}
+
 .sec-login-list {
   background-color: #F3F3F3;
   padding: 1rem;
@@ -1948,4 +1977,21 @@ body {
     opacity: 1;
   }
 }
+
+.last-step {
+  cursor: pointer;
+}
+
+.btn-call {
+  color: #EA068C;
+  padding: .6rem 1.5rem;
+  border: 1px solid #EA068C;
+  border-radius: 2rem;
+  background-color: transparent;
+  text-decoration: none;
+}
+
+.btn-call:hover {
+  color: #EA068C;
+}
 /*# sourceMappingURL=style.css.map */

css/style.scss

@@ -3,18 +3,10 @@ body {
 }
 
 .sec-00 {
-    height: 295px;
+    background-color: rgb(202, 202, 202);
     transition-property: height;
     transition-duration: 300ms;
-    @media (max-width: 1850px) {
-        height: 260px;
-    }
-    @media (max-width: 1550px) {
-        height: 230px;
-    }
-    @media (max-width: 1100px) {
-        height: 200px;
-    }
+    
     &__close {
         position: absolute;
         top: 0;
@@ -38,44 +30,40 @@ body {
     }
     .container-fluid {
         background-color: rgb(202, 202, 202);
-        height: 295px;
-        @media (max-width: 1850px) {
-            height: 260px;
-        }
-        @media (max-width: 1550px) {
-            height: 230px;
-        }
-        @media (max-width: 1100px) {
-            height: 200px;
-        }
+        // height: 295px;
+        // @media (max-width: 1850px) {
+        //     height: 260px;
+        // }
+        // @media (max-width: 1550px) {
+        //     height: 230px;
+        // }
+        // @media (max-width: 1100px) {
+        //     height: 200px;
+        // }
     }
     &__slider {
         margin: 0 auto;
-        width: 70%;
+        width: 100%;
         height: 100%;
-        max-width: 1344px;
+        max-width: 1310px;
+        padding-top: 20px;
+        padding-bottom: 24px;
         @media (max-width: 1850px) {
-            max-width: 1176px;
+            max-width: 1310px;
         }
         @media (max-width: 1550px) {
-            max-width: 1010px;
+            max-width: 1310px;
         }
         .slide-item {
             width: 100%;
-            height: 295px;
-            background-position: center center;
-            background-size: cover;
-            background-repeat: no-repeat;
+            height: 100%;
+            max-width: 1310px;
+            max-height: 300px;
+            -o-object-fit: contain;
+            object-fit: contain;
+            height: 300px;
             cursor: pointer;
-            @media (max-width: 1850px) {
-                height: 260px;
-            }
-            @media (max-width: 1550px) {
-                height: 230px;
-            }
-            @media (max-width: 1100px) {
-                height: 200px;
-            }
+            
         }
     }
     .slick-prev:before, .slick-next:before {
@@ -1283,7 +1271,8 @@ body {
     position: fixed;
     right: 15px;
     bottom: 2rem;
-    .btn-gotop, .btn-login, .btn-favor {
+    .btn-gotop, .btn-login, .btn-favor,
+    .btn-match {
         cursor: pointer;
         padding: 1.2rem .8rem;
         background-color: rgba(255, 255, 255, 0.897);
@@ -1293,7 +1282,81 @@ body {
         -webkit-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
         -moz-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
     }
-        
+    .btn-match {
+        height: 100px;
+        padding: .2rem;
+        background-color: #EE7800;
+        color: #fff;
+        font-size: 1em;
+        word-spacing: 5px;
+        width: 53px;
+        text-align: center;
+    }  
+}
+
+#matchModal .modal-content {
+    position: relative;
+    .btn-close {
+        position: absolute;
+        right: 1rem;
+        top: 1rem;
+    }
+   
+}
+
+.match__next {
+    outline: none;
+    border: none;
+    background-color: #EE7800;
+    border-radius: .3rem;
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    color: white;
+}
+
+.match__next2 {
+    outline: none;
+    border: none;
+    background-color: #EE7800;
+    border-radius: .3rem;
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    color: white;
+}
+
+.sec-match {
+    p {
+        color: #707070;
+    }
+    &__imgfr {
+        width: 90%;
+        height: 14rem;
+        background-image: url(https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_244_01.jpg);
+        background-position: center;
+        background-size: cover;
+    }
+    &__designer {
+        background-image: url(https://cloud.hhh.com.tw/upload/_hdesigner/img_path_611_20190318172644.jpg);
+        width: 80%;
+        height: 12rem;
+        background-position: center;
+        background-size: cover;
+        border-radius: 50%;
+    }
+    .btn-match {
+        outline: none;
+        border: none;
+        color: #EE7800;
+        border: 1px solid #EE7800;
+        background-color: transparent;
+        border-radius: 10px;
+        padding: .3rem .6rem;
+        transition: all .3s;
+        &:hover {
+            background-color: #EE7800;
+            color: white;
+        }
+    }
 }
 
 .sec-login {
@@ -1555,4 +1618,20 @@ body {
 
 @keyframes fadein {
     100% { opacity: 1; }
-} 
+} 
+
+.last-step {
+    cursor: pointer;
+}
+
+.btn-call {
+    color: #EA068C;
+    padding: .6rem 1.5rem;
+    border: 1px solid #EA068C;
+    border-radius: 2rem;
+    background-color: transparent;
+    text-decoration: none;
+    &:hover {
+        color: #EA068C;
+    }
+}

index.html

@@ -97,7 +97,6 @@
                                   <li class="dropbox-item">
                                     <a class="dropbox-link" href="https://m.hhh.com.tw/search/lists/case/%E9%A2%A8%E6%B0%B4-keyword/">風水</a>
                                   </li>
-                                  
                                 </ul>
                               </div>
                               <div class="col">
@@ -1276,9 +1275,13 @@
             <div class="btn-login mb-2" data-bs-toggle="modal" data-bs-target="#loginModal">
               <img src="images/gotop.png" width="28" alt="">
             </div> -->
+            <div class="btn-match mb-2" data-bs-toggle="modal" data-bs-target="#matchModal">
+              <span class="">快速媒合設計師！</span>
+            </div> 
             <div class="btn-gotop">
               <img data-src="images/gotop.webp" width="28" alt="" class="lazyload">
             </div>
+            
           </div>
           <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
             <div class="modal-dialog modal-dialog-centered">
@@ -1286,7 +1289,8 @@
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                   <div class="container-fluid sec-login-block px-0">
                     <div class="sec-login-list w-100">
-                      <h4 class="sec- text-center">會員登入</h4>
+                      <h4 class="sec- text-center">快速媒合設計師</h4>
+                      <h6 class="sec- text-center"></h6>
                       <hr>
                       <div class="sec-login-btns">
                       </div>
@@ -1295,6 +1299,221 @@
               </div>
             </div>
           </div>
+          <div class="modal fade" id="matchModal" tabindex="-1" aria-labelledby="matchModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered">
+              <div class="modal-content">
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                  <div class="container-fluid sec-login-block px-0">
+                      <div class="sec-login-list w-100">
+                        <div class="last-step">
+                          <span>< 上一步</span>
+                        </div>
+                        <h4 class="sec- text-center">快速媒合設計師</h4>
+                        <h6 class="sec- text-center">請填寫您的裝修資訊</h6>
+                        <div class="container container_match">
+                          <div class="row">
+                            <div class="col-1"></div>
+                            <div class="col-3" style="padding : 2rem 0;">
+                              <label for="area">房屋地區</label>
+                            </div>
+                            <div class="col-7" style="padding : 2rem 0;">
+                              <select name="area" id="area" class="form-select">
+                                <option value="" disabled selected>請選擇房屋地區</option>
+                                <option class="option" value="基隆市">基隆市</option>
+                                <option class="option" value="台北市">台北市</option>
+                                <option class="option" value="新北市">新北市</option>
+                                <option class="option" value="桃園市">桃園市</option>
+                                <option class="option" value="新竹縣">新竹縣</option>
+                                <option class="option" value="新竹市">新竹市</option>
+                                <option class="option" value="苗栗縣">苗栗縣</option>
+                                <option class="option" value="台中市">台中市</option>
+                                <option class="option" value="彰化縣">彰化縣</option>
+                                <option class="option" value="南投縣">南投縣</option>
+                                <option class="option" value="雲林縣">雲林縣</option>
+                                <option class="option" value="嘉義縣">嘉義縣</option>
+                                <option class="option" value="嘉義市">嘉義市</option>
+                                <option class="option" value="台南市">台南市</option>
+                                <option class="option" value="高雄市">高雄市</option>
+                                <option class="option" value="屏東縣">屏東縣</option>
+                                <option class="option" value="宜蘭縣">宜蘭縣</option>
+                                <option class="option" value="花蓮縣">花蓮縣</option>
+                                <option class="option" value="台東縣">台東縣</option>
+                                <option class="option" value="澎湖縣">澎湖縣</option>
+                              </select>
+                            </div>
+                            <div class="col-1"></div>
+                            <div class="col-1"></div>
+                            <div class="col-3" style="padding : 2rem 0;">
+                              <label for="type">房屋類型</label>
+                            </div>
+                            <div class="col-7" style="padding : 2rem 0;">
+                              <select name="type" id="type" class="form-select">
+                                <option value="" disabled selected>請選擇房屋類型</option>
+                                <option class="option" value="預售屋">預售屋</option>
+                                <option class="option" value="中古屋">中古屋</option>
+                                <option class="option" value="新成屋">新成屋</option>
+                                <option class="option" value="毛胚屋">毛胚屋</option>
+                                <option class="option" value="自地自建">自地自建</option>
+                              </select>
+                            </div>
+                            <div class="col-1"></div>
+                            <div class="col-1"></div>
+                            <div class="col-3" style="padding : 2rem 0;">
+                              <label for="square">房屋坪數</label>
+                            </div>
+                            <div class="col-7" style="padding : 2rem 0;">
+                              <select name="square" id="square" class="form-select">
+                                <option value="" disabled selected>請選擇房屋坪數</option>
+                                <option class="option" value="10坪以下">10坪以下</option>
+                                <option class="option" value="11~20坪">11~20坪</option>
+                                <option class="option" value="21~30坪">21~30坪</option>
+                                <option class="option" value="31~40坪">31~40坪</option>
+                                <option class="option" value="41~50坪">41~50坪</option>
+                                <option class="option" value="51坪以上">51坪以上</option>
+                              </select>
+                            </div>
+                            <div class="col-1"></div>
+                            <div class="col-1"></div>
+                            <div class="col-3" style="padding : 2rem 0;">
+                              <label for="pattern">房屋格局</label>
+                            </div>
+                            <div class="col-7" style="padding : 2rem 0;">
+                              <select name="pattern" id="pattern" class="form-select">
+                                <option value="" disabled selected>請選擇房屋格局</option>
+                                <option class="option" value="一房">一房</option>
+                                <option class="option" value="兩房">兩房</option>
+                                <option class="option" value="三房">三房</option>
+                                <option class="option" value="四房">四房</option>
+                                <option class="option" value="五房">五房</option>
+                                <option class="option" value="六房">六房</option>
+                                <option class="option" value="六房以上">六房以上</option>
+                              </select>
+                            </div>
+                            <div class="col-1"></div>
+                            <div class="col-1"></div>
+                            <div class="col-3" style="padding : 2rem 0;">
+                              <label for="style">喜愛風格</label>
+                            </div>
+                            <div class="col-7" style="padding : 2rem 0;">
+                              <select name="style" id="style" class="form-select">
+                                <option value="" disabled selected>請選擇喜愛風格</option>
+                                <option class="option" value="現代風">現代風</option>
+                                <option class="option" value="鄉村風">鄉村風</option>
+                                <option class="option" value="古典風">古典風</option>
+                                <option class="option" value="休閒多元">休閒多元</option>
+                                <option class="option" value="美式風">美式風</option>
+                                <option class="option" value="奢華風">奢華風</option>
+                                <option class="option" value="東方風">東方風</option>
+                                <option class="option" value="混搭風">混搭風</option>
+                                <option class="option" value="新古典">新古典</option>
+                                <option class="option" value="日式禪風">日式禪風</option>
+                                <option class="option" value="北歐風">北歐風</option>
+                                <option class="option" value="工業風">工業風</option>
+                                <option class="option" value="異國風">異國風</option>
+                              </select>
+                            </div>
+                            <div class="col-1"></div>
+                          </div>
+                          <div class="row">
+                            <button class="match__next mx-auto d-inline-block col-6">下一步</button>
+                          </div>
+                        </div>
+                        <div class="container container_match2">
+                          <div class="row">
+                            <div class="col-1"></div>
+                            <div class="col-3" style="padding : 2rem 0;">
+                              <label for="area">姓名</label>
+                            </div>
+                            <div class="col-7" style="padding : 2rem 0;">
+                              <input type="text" class="form-control" required>
+                            </div>
+                            <div class="col-1"></div>
+                            <div class="col-1"></div>
+                            <div class="col-3" style="padding : 2rem 0;">
+                              <label for="type">電話</label>
+                            </div>
+                            <div class="col-7" style="padding : 2rem 0;">
+                              <input type="text" class="form-control" required>
+                            </div>
+                            <div class="col-1"></div>
+                            <div class="col-1"></div>
+                            <div class="col-3" style="padding : 2rem 0;">
+                              <label for="square">性別</label>
+                            </div>
+                            <div class="col-7" style="padding : 2rem 0;">
+                              <select name="square" id="square" class="form-select">
+                                <option value="" disabled selected>請選擇性別</option>
+                                <option value="男">男</option>
+                                <option value="女">女</option>
+                              </select>
+                            </div>
+                            <div class="col-1"></div>
+                            <div class="col-1"></div>
+                            <div class="col-3" style="padding : 2rem 0;">
+                              <label for="pattern">方便聯絡時間</label>
+                            </div>
+                            <div class="col-7 d-flex flex-column align-items-center text-start" style="padding : 2rem 0;">
+                              <div style="width: 60%;" class="form-check">
+                                <input type="checkbox" value="隨時皆可" name="time" id="2a" checked class="form-check-input"/>
+                                <label for="2a">
+                                  <p>隨時皆可</p>
+                                </label>
+                              </div>
+                              <div style="width: 60%;" class="form-check">
+                                <input type="checkbox" value="上午9點至12點" name="time" id="2b" class="form-check-input"/>
+                                <label  for="2b">
+                                  <p>上午9點至12點</p>
+                                </label>
+                              </div>
+                              <div style="width: 60%;" class="form-check">
+                                <input type="checkbox" value="中午12點至1點" name="time" id="2c" class="form-check-input"/>
+                                <label  for="2c">
+                                  <p>中午12點至1點</p>
+                                </label>
+                              </div>
+                              <div style="width: 60%;" class="form-check">
+                                <input type="checkbox" value="下午1點至6點" name="time" id="2a" class="form-check-input"/>
+                                <label  for="2a">
+                                  <p>下午1點至6點</p>
+                                </label>
+                              </div>
+                              <div style="width: 60%;" class="form-check">
+                                <input type="checkbox" value="晚上6點至9點" name="time" id="2b" class="form-check-input" />
+                                <label  for="2b">
+                                  <p>晚上6點至9點</p>
+                                </label>
+                              </div>
+                            </div>
+                            <div class="col-1"></div>
+                          </div>
+                          <div class="row mb-3">
+                            <button class="match__next2 mx-auto d-inline-block col-6">送出</button>
+                          </div>
+                          <div class="row mb-3">
+                            <div class="col-8 mx-auto">
+                              <div class="form-check">
+                                <input type="checkbox" id="readPolicy" class="form-check-input" checked>
+                                <label for="readPolicy" class="custom-control-label">同意 
+                                  <a href="/about/privacy_policy" target="_blank">免責聲明與隱私使用政策</a>
+                                </label>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="col-8 mx-auto">
+                            <div class="form-check">
+                              <input type="checkbox" id="readPolicy" class="form-check-input">
+                              <label for="readPolicy" class="custom-control-label"> 
+                                裝潢貸款享超長7年還款期，最低利率2.59%起
+                              </label>
+                            </div>
+                          </div>
+                          </div>
+                      </div>
+                    </div>
+                  </div>
+              </div>
+            </div>
+          </div>
           <div class="modal fade" id="favorModal" tabindex="-1" aria-labelledby="favorModalLabel" aria-hidden="true">
             <div class="modal-dialog modal-dialog-centered">
               <div class="modal-content">

index_designerList.html

@@ -0,0 +1,1691 @@
+<!DOCTYPE html>
+<html lang="zh_TW">
+<head>
+    <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="images/favicon.ico">
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
+    crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
+        rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
+        crossorigin="anonymous">
+        
+      <!-- <link rel="stylesheet" href="css/jquery-ui.css"> -->
+      <link rel="stylesheet" type="text/css" href="css/slick.css" />
+      <link rel="stylesheet" type="text/css" href="css/slick-theme.css" />
+
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <link rel="stylesheet" href="css/list-style.css">
+</head>
+<body>
+    <div style="overflow-x:hidden;">
+        <section class="sec-00 w-100">
+            <button class="text-center sec-00__close">
+              <i class="fas fa-chevron-up" style="transform:translateY(-2px);"></i>
+              <p>隱藏</p>
+            </button>
+            <div class="container-fluid" style="padding:0;margin:0;">
+                <div class="sec-00__slider">
+                    
+                </div>
+            </div>
+        </section>
+        <nav class="navbar navbar-expand-lg navbar-light navbar-main">
+            <div class="container-fluid" style="margin:0;">
+                <a href="https://hhh.com.tw/" class="navbar-brand navbar-logo"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="110"></a>
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
+                      <li class="nav-item">
+                        <a class="nav-link" target="_blank" href="https://m.hhh.com.tw/about/calculator/">估預算</a>
+                      </li>
+                      <li class="nav-item">
+                        <a class="nav-link" href="https://m.hhh.com.tw/photos/index/">找風格</a>
+                        <div class="dropbox">
+                          <div class="container stylebox" style="max-width: 650px;">
+                            <div class="row g-0 px-5">
+                              <div class="col-5">
+                                <ul class="mx-auto mb-lg-0">
+                                  <li class="dropbox-item mb-3">
+                                    <a class="dropbox-link dropbox-btn" target="_blank" href="https://m.hhh.com.tw/about/calculator/">估預算</a>
+                                  </li>
+                                  <li class="dropbox-item mb-0">
+                                    <a class="dropbox-link dropbox-btn" target="_blank" href="https://hhh.com.tw/about/request/">找諮詢</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/photos/lists/nordic-style/" >北歐風</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/photos/lists/modern-style/">現代風</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link"href="https://m.hhh.com.tw/photos/lists/industry-style/">工業風</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/cases/lists/small-ctype/">小坪數</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/search/lists/case/%E9%A2%A8%E6%B0%B4-keyword/">風水</a>
+                                  </li>
+                                  
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/search/lists/video/%E8%8E%8E%E8%8E%8E-keyword/">莎莎看房去</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/topic/detail/402/">小坪數大空間</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/videos/lists/">發燒影音</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="">居家防疫動起來</a>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </li>
+                      <li class="nav-item">
+                        <a class="nav-link" href="https://m.hhh.com.tw/columns/lists/all-columntypea/">專欄文章</a>
+                        <div class="dropbox">
+                          <div class="container">
+                            <div class="row g-0">
+                              <div class="col">
+                                <ul class="mx-auto mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/">編輯精選</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/hometrends-columntypeb/">居家趨勢</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/hotrank-columntypeb/">人氣排行</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/archdesign-columntypeb/">建築設計</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/styleselection-columntypeb/">風格選店</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/charitable-columntypeb/">公益活動</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/exhibition-columntypeb/">展演資訊</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/">居家設計</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/smallhouse-columntypeb/">小宅規劃</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/oldhouse-columntypeb/">老屋翻新</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/stylebuild-columntypeb/">風格營造</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/color-columntypeb/">配色佈置</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/goodhouse-columntypeb/">好宅特輯</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/proposal-columntypeb/">設計提案</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/">裝修前線</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/news-columntypeb/">裝修最前線</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/allocation-columntypeb/">預算配置</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/process-columntypeb/">施工流程</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/knowledge-columntypeb/">建材知識</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/">生活PLUS</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/fengshui-columntypeb/">居家風水</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/housekeeping-columntypeb/">家事清潔</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/storageskills-columntypeb/">收納技巧</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/renovation-columntypeb/">改造修繕</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/">品牌好物</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/furnishings-columntypeb/">傢俱家飾</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/appliances-columntypeb/">美型家電</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/recommend-columntypeb/">推薦廚衛</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/homegoods-columntypeb/">居家好物</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/quality-columntypeb/">優質建材</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/">房市焦點</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/housingnews-columntypeb/">房市新聞</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/specsearch-columntypeb/">建案特蒐</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/buyandsell-columntypeb/">買屋賣屋</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/mortgage-columntypeb/">房貸稅務</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/topic/lists/1-page/new-sort/">主題企劃</a>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </li>
+                      <li class="nav-item">
+                        <a class="nav-link" target="_blank" href="https://m.hhh.com.tw/designers/lists/">設計師</a>
+                        <div class="dropbox">
+                          <div class="container designerbox" style="max-width: 680px;">
+                            <div class="row g-0 px-5">
+                              <div class="col-5">
+                                <ul class="mx-auto mb-lg-0">
+                                  <li class="dropbox-item mb-4">
+                                    <a class="dropbox-link dropbox-btn" target="_blank" href="https://m.hhh.com.tw/decoquery/lists/address/">查證照</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/designers/lists/">室內設計師</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" target="_blank" href="https://event.hhh.com.tw/2021-Most-Favorite-Designers/index.php">觀眾最愛設計師</a>
+                                  </li>
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" target="_blank" href="https://event.hhh.com.tw/topglory/">GLORY 國際大賞</a>
+                                  </li>
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" target="_blank" href="https://hhh.com.tw/event170427/">老屋翻新居家改造</a>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </li>
+                      <li class="nav-item lg">
+                        <a class="nav-link" target="_blank" href="https://m.hhh.com.tw/products/lists/">居家商品</a>
+                        <div class="dropbox">
+                          <div class="container">
+                            <div class="row g-0">
+                              <div class="col-2">
+                                <ul class="mx-auto mb-lg-0">
+                                  <li class="dropbox-item mb-4">
+                                    <a class="dropbox-link dropbox-btn" target="_blank" href="https://shop.hhh.com.tw/"><img src="images/menu/cart.svg" width="15" alt=""><p>+好物</p></a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-3">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/building-pcategorya/1-page/new-sort/">建材</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/building-pcategorya/wooden-pcategoryb/1-page/new-sort/">木地板</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/building-pcategorya/sheetmetal-pcategoryb/1-page/new-sort/">板材</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/building-pcategorya/tile-pcategoryb/1-page/new-sort/">磁磚</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/building-pcategorya/stone-pcategoryb/1-page/new-sort/">石材</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/building-pcategorya/cement-pcategoryb/1-page/new-sort/">水泥</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/building-pcategorya/glass-pcategoryb/1-page/new-sort/">玻璃、隔熱膜</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/building-pcategorya/wallcovering-pcategoryb/1-page/new-sort/">壁紙、壁布</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/building-pcategorya/doorswindows-pcategoryb/1-page/new-sort/">門窗</a>
+                                  </li>
+                                </ul>
+                                <ul class="mx-auto">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/coating-pcategorya/1-page/new-sort/">塗料</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/coating-pcategorya/paint-pcategoryb/1-page/new-sort/">油漆</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/coating-pcategorya/coatings-pcategoryb/1-page/new-sort/">塗料</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-3">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/furniture-pcategorya/1-page/new-sort/">傢俱</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/furniture-pcategorya/living-pcategoryb/1-page/new-sort/">客廳</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/furniture-pcategorya/bedroom-pcategoryb/1-page/new-sort/">臥室</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/furniture-pcategorya/restaurant-pcategoryb/1-page/new-sort/">餐廳</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/furniture-pcategorya/study-pcategoryb/1-page/new-sort/">書房/辦公室</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/furniture-pcategorya/storage-pcategoryb/1-page/new-sort/">收納</a>
+                                  </li>
+                                </ul>
+                                <ul class="mx-auto">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/home-pcategorya/1-page/new-sort/">寢具裝飾</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/home-pcategorya/bedding-pcategoryb/1-page/new-sort/">寢飾</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/home-pcategorya/curtains-pcategoryb/1-page/new-sort/">窗簾、葉窗</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/home-pcategorya/carpet-pcategoryb/1-page/new-sort/">地毯、地墊</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/home-pcategorya/artdecoration-pcategoryb/1-page/new-sort/">藝術、擺飾</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/home-pcategorya/mirror-pcategoryb/1-page/new-sort/">鏡子</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/1-page/new-sort/">家電</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/refrigerator-pcategoryb/1-page/new-sort/">冰箱</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/airconditioning-pcategoryb/1-page/new-sort/">冷氣、空調</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/tv-pcategoryb/1-page/new-sort/">電視</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/projector-pcategoryb/1-page/new-sort/">投影機</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/sound-pcategoryb/1-page/new-sort/">音響</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/aircleaner-pcategoryb/1-page/new-sort/">空氣清淨機</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/vacuumcleaner-pcategoryb/1-page/new-sort/">吸塵器</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/efan-pcategoryb/1-page/new-sort/">電風扇</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/eheater-pcategoryb/1-page/new-sort/">電暖器機</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/dehumidifier-pcategoryb/1-page/new-sort/">除濕機</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/massage-pcategoryb/1-page/new-sort/">按摩家電</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/coffee-pcategoryb/1-page/new-sort/">咖啡機</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/kitchen-pcategorya/1-page/new-sort/">廚房</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/kitchen-pcategorya/electromagnetic-pcategoryb/1-page/new-sort/">電磁、電子爐</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/kitchen-pcategorya/dryingmachine-pcategoryb/1-page/new-sort/">洗、烘碗機</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/kitchen-pcategorya/ventilator-pcategoryb/1-page/new-sort/">排油煙機</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/kitchen-pcategorya/steamoven-pcategoryb/1-page/new-sort/">烤箱、蒸爐</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/kitchen-pcategorya/kithardware-pcategoryb/1-page/new-sort/">廚房五金</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/kitchen-pcategorya/potsandutensils-pcategoryb/1-page/new-sort/">鍋具、器皿</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/bathroom-pcategorya/1-page/new-sort/">衛浴</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/bathroom-pcategorya/bathtub-pcategoryb/1-page/new-sort/">浴缸</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/bathroom-pcategorya/waterheater-pcategoryb/1-page/new-sort/">電熱水器</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/bathroom-pcategorya/bathaircondition-pcategoryb/1-page/new-sort/">浴室空調</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/bathroom-pcategorya/bathfittings-pcategoryb/1-page/new-sort/">衛浴五金</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/bathroom-pcategorya/showerdoor-pcategoryb/1-page/new-sort/">淋浴拉門</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/bathroom-pcategorya/bathm-pcategoryb/1-page/new-sort/">衛浴設備</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/lighting-pcategorya/1-page/new-sort/" >照明</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/lighting-pcategorya/ceiling-pcategoryb/1-page/new-sort/">吸頂燈</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/lighting-pcategorya/spotlight-pcategoryb/1-page/new-sort/">投射燈</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/lighting-pcategorya/chandelier-pcategoryb/1-page/new-sort/">吊燈</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/lighting-pcategorya/walllamp-pcategoryb/1-page/new-sort/">壁燈</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/lighting-pcategorya/tablelamp-pcategoryb/1-page/new-sort/">檯燈</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/lighting-pcategorya/standing-pcategoryb/1-page/new-sort/">立燈</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/lighting-pcategorya/recessed-pcategoryb/1-page/new-sort/">嵌燈</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/lighting-pcategorya/lightbulbs-pcategoryb/1-page/new-sort/">燈泡、燈具</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/other-pcategorya/1-page/new-sort/">其他</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/other-pcategorya/fire-pcategoryb/1-page/new-sort/">消防設備</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/other-pcategorya/smartdevice-pcategoryb/1-page/new-sort/">智能設備</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/other-pcategorya/lifegroceries-pcategoryb/1-page/new-sort/">生活雜貨</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/other-pcategorya/cleaningsupplies-pcategoryb/1-page/new-sort/">清潔用品</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/other-pcategorya/photography-pcategoryb/1-page/new-sort/">攝影</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/other-pcategorya/otherservice-pcategoryb/1-page/new-sort/">其他服務</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col-2">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" target="_blank" href="https://event.hhh.com.tw/2020-Top-Brands/">消費者最愛品牌</a>
+                                  </li>
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/1-page/new-sort/">所有商品</a>
+                                  </li>
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/brands/lists/">所有品牌</a>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </li>
+                      <li class="nav-item">
+                        <a class="nav-link" target="_blank" href="https://m.hhh.com.tw/builder/lists/">新建案</a>
+                        <div class="dropbox">
+                          <div class="container newbox" style="max-width: 650px;">
+                            <div class="row g-0 px-5">
+                              <div class="col-6">
+                                <ul class="mx-auto mb-lg-0">
+                                  <li class="dropbox-item mb-4">
+                                    <a class="dropbox-link dropbox-btn" target="_blank" href="https://www.leju.com.tw/page_search_result">實價登錄</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col-3">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/builder/lists/1-page/">依地區</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/builder/lists/100-citys/1-page/">臺北市</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/builder/lists/101-citys/1-page/">新北市</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/builder/lists/103-citys/1-page/">桃園市</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/builder/lists/104-citys/1-page/">新竹縣</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/builder/lists/105-citys/1-page/">新竹市</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/builder/lists/107-citys/1-page/">臺中市</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col-3">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/cases/lists/small-ctype/">新建案</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/builder/lists/mrt-types/1-page/">捷運宅</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/builder/lists/function-types/1-page/">機能宅</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/builder/lists/king-types/1-page/">帝王宅</a>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </li>
+                      <li class="nav-item">
+                        <a class="nav-link" target="_blank" href="https://m.hhh.com.tw/forum/category/">討論區</a>
+                        <div class="dropbox">
+                          <div class="container forumbox" style="max-width: 450px;">
+                            <div class="row g-0 px-5">
+                              <div class="col-6">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/forum/lists?category=1" target="_blank">居家綜合</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://hhh.com.tw/forum/lists?category=2">室內設計與佈置</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://hhh.com.tw/forum/lists?category=3">房屋修繕</a>
+                                  </li>
+                                  
+                                </ul>
+                              </div>
+                              <div class="col-6">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://hhh.com.tw/forum/lists?category=4">房產房產經驗宅</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://hhh.com.tw/forum/lists?category=5">家店開箱與討論</a>
+                                  </li>
+                        
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </li>
+                      <li class="nav-item">
+                        <a class="nav-link" onclick="todayTV();">TV節目表</a>
+                      </li>
+                    </ul>
+                </div>
+                <div class="navbar-brand navbar-search me-2 d-flex align-items-center">
+                    <img width="25" class="navbar-search-magnify" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMC4wMDMiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMC4wMDMgMjAiPgogIDxnIGlkPSJzZWFyY2giIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjA1KSI+CiAgICA8cGF0aCBpZD0iUGF0aF8yMjcyIiBkYXRhLW5hbWU9IlBhdGggMjI3MiIgZD0iTTE5Ljg4LDE4Ljk4bC00Ljg2Mi00Ljg2YTguNTM5LDguNTM5LDAsMSwwLS44NDMuODQzbDQuODYyLDQuODZhLjYuNiwwLDAsMCwuNDIxLjE3Ny41ODQuNTg0LDAsMCwwLC40MjEtLjE3N0EuNi42LDAsMCwwLDE5Ljg4LDE4Ljk4Wk0xLjI0Myw4LjUyOGE3LjMzMyw3LjMzMywwLDEsMSw3LjMzMyw3LjMzNUE3LjM0LDcuMzQsMCwwLDEsMS4yNDMsOC41MjhaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwKSIgZmlsbD0iI2VlNzgwMCIvPgogIDwvZz4KPC9zdmc+Cg==" alt="">
+                    <div class="dropbox">
+                      <div class="container">
+                        <div class="w-100 text-center dropbox__searchBar mb-3">
+                          <input type="text" class="dropbox__searchBar__input" placeholder="請輸入關鍵字">
+                          <button class="dropbox__searchBar__submit">搜尋</button>
+                        </div>
+                        <div class="dropbox__searchtab">
+                          <div class="dropbox__tab dropbox__tabdiv">
+                            <ul class="nav row nav-pills gx-2 justify-content-around">
+                              <li class="nav-item col text-center">
+                                <button class="nav-item-link bg-transparent" id="pills-img-tab">圖片</button>
+                              </li>
+                              <li class="nav-item col text-center">
+                                <button class="nav-item-link bg-transparent" id="pills-article-tab">專欄文章</button>
+                              </li>
+                              <li class="nav-item col text-center">
+                                <button class="nav-item-link bg-transparent" id="pills-case-tab">設計案例</button>
+                              </li>
+                              <li class="nav-item col text-center">
+                                <button class="nav-item-link bg-transparent" id="pills-designer-tab">設計師</button>
+                              </li>
+                              <li class="nav-item col text-center">
+                                <button class="nav-item-link bg-transparent" id="pills-home-tab">居家商品</button>
+                              </li>
+                              <li class="nav-item col text-center">
+                                <button class="nav-item-link bg-transparent" id="pills-news-tab">新建案</button>
+                              </li>
+                            </ul>
+                          </div>
+                          <div class="tab-content dropbox-tab-content" id="pills-tab-2">
+                            <div class="" id="pills-img-tab">
+                                <div class="tabpar tabpar__1">
+                                  <select name="image-style" id="image-style" class="col select">
+                                    <option value="" selected="selected" disabled>風格</option>
+                                    <option value="all-style">不拘</option>
+                                    <option value="modern-style">現代風</option>
+                                    <option value="nordic-style">北歐風</option>
+                                    <option value="industry-style">工業風</option>
+                                    <option value="american-style">美式風</option>
+                                    <option value="leisure-style">休閒多元風</option>
+                                  </select>
+                                  <select name="image-space" id="image-space" class="col select">
+                                    <option value="" selected="selected" disabled>空間</option>
+                                    <option value="all-space">不拘</option>
+                                    <option value="living-space">客廳</option>
+                                    <option value="kitchen-space">廚房</option>
+                                    <option value="children-space">兒童房</option>
+                                    <option value="study-space">書房</option>
+                                    <option value="restaurant-space">餐廳</option>
+                                  </select>
+                                  <select name="image-area" id="image-area" class="col select">
+                                    <option value="" selected="selected" disabled>坪數</option>
+                                    <option value="all-area">不拘</option>
+                                    <option value="c20-area">20坪以下</option>
+                                    <option value="c21-area">21-30坪</option>
+                                    <option value="c31-area">31-50坪</option>
+                                    <option value="c51-area">51坪以上</option>
+                                  </select>
+                                  <button class="col image-search">送出</button>
+                                </div>
+                            </div>
+                            <div class="" id="pills-article-tab">
+                                <div class="tabpar tabpar__2">
+                                  <button class="col article-btn" onclick="window.open(`https://hhh.com.tw/columns/lists/editorchoose-columntypea/`);">編輯精選</button>
+                                  <button class="col article-btn" onclick="window.open(`https://m.hhh.com.tw/columns/lists/housedesign-columntypea/`);">居家設計</button>
+                                  <button class="col article-btn" onclick="window.open(`https://m.hhh.com.tw/columns/lists/decoration-columntypea/`);">裝修前線</button>
+                                </div>
+                            </div>
+                            <div class="" id="pills-case-tab">
+                                <div class="tabpar tabpar__3">
+                                  <select name="cases-type" id="cases-type" class="col select">
+                                    <option value="small-ctype">小坪數</option>
+                                    <option value="all-ctype">不拘</option>
+                                    <option value="standard-ctype">標準格局</option>
+                                    <option value="big-ctype">大坪數</option>
+                                    <option value="villa-ctype">別墅</option>
+                                    <option value="raisehigh-ctype">挑高樓層</option>
+                                    <option value="middle-ctype">樓中樓</option>
+                                    <option value="sample-ctype">實品／樣品屋</option>
+                                    <option value="workspace-ctype">工作空間</option>
+                                    <option value="commercial-ctype">商業空間</option>
+                                    <option value="homestay-ctype">民宿旅館</option>
+                                    <option value="dining-ctype">餐飲空間</option>
+                                    <option value="public-ctype">公共空間</option>
+                                  </select>
+                                  <select name="cases-condition" id="cases-condition" class="col select">
+                                    <option value="renovation-condition">老屋翻新</option>
+                                    <option value="all-condition">不拘</option>
+                                    <option value="new-condition">新成屋</option>
+                                    <option value="blanks-condition">毛胚屋</option>
+                                    <option value="selfbuilt-condition">自地自建</option>
+                                  </select>
+                                  <select name="case-shui" id="case-shui" class="col select">
+                                    <option value="" selected="selected" disabled>風水</option>
+                                    <option value="風水">風水</option>
+                                  </select>
+                                  <button class="col case-search">送出</button>
+                                </div>
+                          </div>
+                          <div class="" id="pills-designer-tab">
+                            <div class="tabpar tabpar__4">
+                              <select name="designer-city" id="designer-city" class="col select">
+                                <option value="" selected="selected" disabled>所在縣市</option>
+                                
+                              </select>
+                              <select name="designer-country" id="designer-country" class="col select">
+                                <option value="" selected="selected" disabled>所在地區</option>
+                                
+                              </select>
+                              <select name="designer-region" id="designer-region" class="col select">
+                                <option value="坪數" selected="selected" disabled>接案地區</option>
+                                <option value="all-region">不拘</option>
+                                <option value="north-region">北區</option>
+                                <option value="central-region">中區</option>
+                                <option value="south-region">南區</option>
+                                <option value="east-region">宜蘭花東</option>
+                                <option value="outlying-region">離島地區</option>
+                                <option value="overseas-region">海外地區</option>
+                              </select>
+                              <button class="col designer-search">送出</button>
+                            </div>
+                          </div>
+                          <div class="" id="pills-home-tab">
+                            <div class="tabpar tabpar__5">
+                              <button class="col home-btn" onclick="window.open(`https://hhh.com.tw/products/lists/furniture-pcategorya/1-page/new-sort`);">傢俱</button>
+                              <button class="col home-btn" onclick="window.open(`https://hhh.com.tw/products/lists/household-pcategorya/1-page/new-sort/`);">家電</button>
+                              <button class="col home-btn" onclick="window.open(`https://hhh.com.tw/products/lists/building-pcategorya/1-page/new-sort/`);">建材</button>
+                            </div>
+                          </div>
+                          <div class="" id="pills-news-tab">
+                            <div class="tabpar tabpar__6">
+                              <select name="news-city" id="news-city" class="col select">
+                                <option value="風格" selected="selected" disabled>所在縣市</option>
+                                <option value="100-citys">台北市</option>
+                                <option value="101-citys">新北市</option>
+                                <option value="102-citys">基隆市</option>
+                                <option value="103-citys">桃園市</option>
+                                <option value="104-citys">新竹縣</option>
+                                <option value="105-citys">新竹市</option>
+                                <option value="107-citys">台中市</option>
+                              </select>
+                              <select name="news-types" id="news-types" class="col select">
+                                <option value="空間" selected="selected" disabled>類型</option>
+                                <option value="mrt-types">捷運宅</option>
+                                <option value="function-types">機能宅</option>
+                                <option value="king-types">帝王宅</option>
+                              </select>
+                              <button class="col news-search">送出</button>
+                            </div>
+                          </div>
+                          </div> 
+                        </div>
+                        <div class="text-center dropbox__hots"> 
+                          <strong class="dropbox__hots__title">熱搜關鍵字：</strong>
+                          <a class="dropbox__hots__link">小坪數</a>
+                          <a class="dropbox__hots__link">收納</a>
+                          <a class="dropbox__hots__link">軟裝佈置</a>
+                          <a class="dropbox__hots__link">幸福經紀人</a>
+                          <a class="dropbox__hots__link">承炫設計</a>
+                          <a class="dropbox__hots__link">風水</a>
+                          <a class="dropbox__hots__link">北歐風</a>
+                          <a class="dropbox__hots__link">周石設計</a>
+                        </div>
+                      </div>
+                    </div>
+                </div>
+                <div class="navbar-brand navbar-login ms-2 d-flex align-items-center">
+                    <a href="https://hhh.com.tw/login/index" class="navbar-login">登入 / 註冊</a>
+                </div>
+            </div>
+        </nav>
+        <section class="w-100 hero">
+            <div  style="padding:0;margin:0;">
+              <img class="img-fluid w-100" src="https://cloud.hhh.com.tw/upload/_hdesigner/background_769_20211122142507.jpg" alt="">
+            </div>
+        </section>
+        <section class="content">
+          <div class="row justify-content-around">
+            <div class="col-12 col-md-3">
+              <div class="infoCard">
+                <div class="infoCard__avatar mx-auto mb-3" style="background-image: url(https://cloud.hhh.com.tw/gs/designer/designer494_00.jpg);">
+                </div>
+                <h2>蔡岳儒</h2>
+                <span class="mb-3 d-inline-block">設計師</span>
+                <h4 class="mb-3">恆岳空間設計</h4>
+                <strong class="mb-3 infoCard__seo">恆岳空間設計｜蔡岳儒 室內設計師，為台北老屋翻新好評推薦的室內設計師，
+                  將老屋妙手回春成現代風小豪宅，亦擅長置入日式精闢手工藝術融入室內空間設計中。</strong>
+                <div class="infoCard__approve mb-3">
+                  ★老屋翻新‧住宅改造
+                </div>
+                <div class="infoCard__detail">
+                  <aside class="d-flex">
+                    <div class="infoCard__detail__l">
+                      <div>免費專線：</div>
+                    </div>
+                    <div class="infoCard__detail__r">
+                      <a href="tel:0809000123,19499" class="text-hhh">0809-000-123#18890</a>
+                    </div>
+                  </aside>
+                  <aside class="d-flex">
+                    <div class="infoCard__detail__l">
+                      <div>諮詢專線：02-2562-7755</div>
+                    </div>
+                    <div class="infoCard__detail__r">
+                      <div>0809-000-123#18890</div>
+                    </div>
+                  </aside>
+                  <aside class="d-flex">
+                    <div class="infoCard__detail__l">
+                      <div>諮詢專線：</div>
+                    </div>
+                    <div class="infoCard__detail__r">
+                      <div>0937-070-794</div>
+                    </div>
+                  </aside>
+                  <aside class="d-flex">
+                    <div class="infoCard__detail__l">
+                      <div>公司傳真：</div>
+                    </div>
+                    <div class="infoCard__detail__r">
+                      <div>02-2562-7002</div>
+                    </div>
+                  </aside>
+                  <aside class="d-flex">
+                    <div class="infoCard__detail__l">
+                      <div>公司地址：</div>
+                    </div>
+                    <div class="infoCard__detail__r">
+                      <div>台北市中山區林森北路50號4樓之一</div>
+                    </div>
+                  </aside>
+                  <aside class="d-flex">
+                    <div class="infoCard__detail__l">
+                      <div>電子信箱：</div>
+                    </div>
+                    <div class="infoCard__detail__r">
+                      <div>hengyuehdesign@gmail.com,gakuju@gmail.com</div>
+                    </div>
+                  </aside>
+                  <aside class="d-flex">
+                    <div class="infoCard__detail__l">
+                      <div>公司網址：</div>
+                    </div>
+                    <div class="infoCard__detail__r">
+                      <div>
+                        http://www.hengyueh.com.tw/</div>
+                    </div>
+                  </aside>
+                  <div class="infoCard__detail other">
+                    <aside class="d-flex">
+                      <div class="infoCard__detail__l">
+                        <div>分公司地址：</div>
+                      </div>
+                      <div class="infoCard__detail__r">
+                        <div>台北市中山區林森北路50號4樓之一</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="infoCard__detail__l">
+                        <div>分公司電話：</div>
+                      </div>
+                      <div class="infoCard__detail__r">
+                        <div>02-2562-7755</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="infoCard__detail__l">
+                        <div>分公司傳真：</div>
+                      </div>
+                      <div class="infoCard__detail__r">
+                        <div>02-2562-7002</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="infoCard__detail__l">
+                        <div>分公司地址：</div>
+                      </div>
+                      <div class="infoCard__detail__r">
+                        <div>上海市闵行区东川路2688号</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="infoCard__detail__l title mt-5 mb-3">
+                        <div>接案條件</div>
+                      </div>
+                      <div class="infoCard__detail__r">
+                        <div></div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="infoCard__detail__l">
+                        <div>接案預算：</div>
+                      </div>
+                      <div class="infoCard__detail__r">
+                        <div>不限</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="infoCard__detail__l">
+                        <div>接案坪數：</div>
+                      </div>
+                      <div class="infoCard__detail__r">
+                        <div>不限</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="infoCard__detail__l">
+                        <div>特殊接案：</div>
+                      </div>
+                      <div class="infoCard__detail__r">
+                        <div>不限</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="infoCard__detail__l">
+                        <div>收費方式：</div>
+                      </div>
+                      <div class="infoCard__detail__r">
+                        <div>請來電洽詢 / 【丈量費】NT$5,000元(透天別墅另計) *此費用含實地丈量、需求訪談、
+                          初步平面配置與風格提案 *以上費用於簽設計合約時，可全額折抵</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="infoCard__detail__l">
+                        <div>付費方式：</div>
+                      </div>
+                      <div class="infoCard__detail__r">
+                        <div>簽約付30％、依工程進度分兩次，各付30％、完工驗收收10％</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="infoCard__detail__l">
+                        <div>付費方式：</div>
+                      </div>
+                      <div class="infoCard__detail__r">
+                        <div>簽約付30％、依工程進度分兩次，各付30％、完工驗收收10％</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="infoCard__detail__l">
+                        <div>接案區域：</div>
+                      </div>
+                      <div class="infoCard__detail__r">
+                        <div>北區,中區,南區,大陸</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="infoCard__detail__l">
+                        <div>接案類型：</div>
+                      </div>
+                      <div class="infoCard__detail__r">
+                        <div>小坪數,標準格局,別墅,大坪數,樓中樓,商業空間,工作空間,餐飲空間,民宿旅館,公共空間</div>
+                      </div>
+                    </aside>
+                    <aside class="d-flex">
+                      <div class="infoCard__detail__l">
+                        <div>接案風格：</div>
+                      </div>
+                      <div class="infoCard__detail__r">
+                        <div>現代風,鄉村風,古典風,休閒多元,美式風,奢華風,新古典,日式禪風,東方風,混搭風,前衛風,北歐風,工業風,異國風</div>
+                      </div>
+                    </aside>
+                  </div>
+                  <section class="scMedia">
+                    <a href="">
+                      <img src="https://hhh.com.tw/assets/images/rv_web/fb.svg" alt="">
+                    </a>
+                    <a href="">
+                      <img src="https://hhh.com.tw/assets/images/rv_web/line.svg" alt="">
+                    </a>
+                    <a href="">
+                      <img src="https://hhh.com.tw/assets/images/rv_web/wechat.svg" alt="">
+                    </a>
+                    <a href="">
+                      <img src="https://hhh.com.tw/assets/images/rv_web/share.svg" alt="">
+                    </a>
+                    <a href="">
+                      <img src="https://hhh.com.tw/assets/images/rv_web/like-o.svg" alt="">
+                    </a>
+                  </section>
+                </div>
+              </div>
+            </div>
+            <div class="col-12 col-md-9">
+              <div class="infoContent">
+                <div class="d-flex justify-content-between">
+                  <ul class="nav d-flex nav-pills flex-wrap" id="pills-tab" role="tablist">
+                    <li class="nav-item active p-0" role="presentation">
+                      <a class="nav-item-link nav-item-active bg-transparent active" id="pills-intro-tab"
+                      data-bs-toggle="pill" data-bs-target="#pills-intro" type="button" role="tab"
+                      aria-controls="pills-intro" aria-selected="true" data-link="https://hhh.com.tw/cases/lists/">設計師作品</a>
+                    </li>
+                    <li class="nav-item p-0" role="presentation">
+                      <a class="nav-item-link nav-item-active bg-transparent" id="pills-video-tab"
+                      data-bs-toggle="pill" data-bs-target="#pills-video" type="button" role="tab"
+                      aria-controls="pills-video" aria-selected="false" data-link="https://hhh.com.tw/videos/lists/">設計師影音</a>
+                    </li>
+                    <li class="nav-item p-0" role="presentation">
+                      <a class="nav-item-link nav-item-active bg-transparent" id="pills-columns-tab"
+                      data-bs-toggle="pill" data-bs-target="#pills-columns" type="button" role="tab"
+                      aria-controls="pills-columns" aria-selected="false" data-link="https://hhh.com.tw/columns/lists/">設計師專欄</a>
+                    </li>
+                    <li class="nav-item p-0" role="presentation">
+                      <a class="nav-item-link nav-item-active bg-transparent" id="pills-company-tab"
+                      data-bs-toggle="pill" data-bs-target="#pills-company" type="button" role="tab"
+                      aria-controls="pills-company" aria-selected="false" data-link="https://hhh.com.tw/columns/lists/">設計師公司簡介</a>
+                    </li>
+                  </ul>
+                  <div class="likeSee" hidden>
+                    <a href="">人氣</a>
+                    <span class="likeSee__divider"></span>
+                    <a href="">最新</a>
+                  </div>
+                  <aside class="nav-collapse-fixed" id="nav-collapse">
+                    <ul class="nav d-flex nav-collpase flex-wrap" id="pills-tab" role="tablist">
+                      <li class="nav-item active p-0" role="presentation">
+                        <a class="nav-item-link nav-item-active bg-transparent active" id="pills-intro-tab"
+                        data-bs-toggle="pill" data-bs-target="#pills-intro" type="button" role="tab"
+                        aria-controls="pills-intro" aria-selected="true" data-link="https://hhh.com.tw/cases/lists/">設計師作品</a>
+                      </li>
+                      <li class="nav-item p-0" role="presentation">
+                        <a class="nav-item-link nav-item-active bg-transparent" id="pills-video-tab"
+                        data-bs-toggle="pill" data-bs-target="#pills-video" type="button" role="tab"
+                        aria-controls="pills-video" aria-selected="false" data-link="https://hhh.com.tw/videos/lists/">設計師影音</a>
+                      </li>
+                      <li class="nav-item p-0" role="presentation">
+                        <a class="nav-item-link nav-item-active bg-transparent" id="pills-columns-tab"
+                        data-bs-toggle="pill" data-bs-target="#pills-columns" type="button" role="tab"
+                        aria-controls="pills-columns" aria-selected="false" data-link="https://hhh.com.tw/columns/lists/">設計師專欄</a>
+                      </li>
+                      <li class="nav-item p-0" role="presentation">
+                        <a class="nav-item-link nav-item-active bg-transparent" id="pills-company-tab"
+                        data-bs-toggle="pill" data-bs-target="#pills-company" type="button" role="tab"
+                        aria-controls="pills-company" aria-selected="false" data-link="https://hhh.com.tw/columns/lists/">設計師公司簡介</a>
+                      </li>
+                    </ul>
+                  </aside>
+                </div>
+                <div class="tab-content mt-5" id="pills-tabContent">
+                  <div class="tab-pane fade active show" id="pills-intro" role="tabpanel"
+                      aria-labelledby="pills-intro-tab">
+                    <div class="row">
+                      <div class="col-md-4">
+                        <a href="" target="_blank">
+                          <div class="card">
+                            <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
+                            </div>
+                            <div class="card-body">
+                              <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
+                              <p class="card-text mb-0">
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                              </p>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col-md-4">
+                        <a href="" target="_blank">
+                          <div class="card">
+                            <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
+                            </div>
+                            <div class="card-body">
+                              <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
+                              <p class="card-text mb-0">
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                              </p>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col-md-4">
+                        <a href="" target="_blank">
+                          <div class="card">
+                            <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
+                            </div>
+                            <div class="card-body">
+                              <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
+                              <p class="card-text mb-0">
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                              </p>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="tab-pane fade" id="pills-video" role="tabpanel"
+                      aria-labelledby="pills-video-tab">
+                      <div class="row">
+                        <div class="col-md-4">
+                          <a href="" target="_blank">
+                            <div class="card">
+                              <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
+                                <img src="https://hhh.com.tw/assets/images/rv_web/play.svg" alt="" width="50" height="50">
+                              </div>
+                              <div class="card-body">
+                                <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
+                                <p class="card-text mb-0">
+                                  <a href="" class="card__tag" target="_blank">混搭風</a>
+                                  <a href="" class="card__tag" target="_blank">混搭風</a>
+                                  <a href="" class="card__tag" target="_blank">混搭風</a>
+                                </p>
+                              </div>
+                            </div>
+                          </a>
+                        </div>
+                        <div class="col-md-4">
+                          <a href="" target="_blank">
+                            <div class="card">
+                              <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
+                                <img src="https://hhh.com.tw/assets/images/rv_web/play.svg" alt="" width="50" height="50">
+                              </div>
+                              <div class="card-body">
+                                <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
+                                <p class="card-text mb-0">
+                                  <a href="" class="card__tag" target="_blank">混搭風</a>
+                                  <a href="" class="card__tag" target="_blank">混搭風</a>
+                                  <a href="" class="card__tag" target="_blank">混搭風</a>
+                                </p>
+                              </div>
+                            </div>
+                          </a>
+                        </div>
+                        
+                      </div>
+                  </div>
+                  <div class="tab-pane fade" id="pills-columns" role="tabpanel"
+                    aria-labelledby="pills-columns-tab">
+                    <div class="row">
+                      <div class="col-md-4">
+                        <a href="" target="_blank">
+                          <div class="card">
+                            <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
+                            </div>
+                            <div class="card-body">
+                              <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
+                              <p class="card-text mb-0">
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                              </p>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col-md-4">
+                        <a href="" target="_blank">
+                          <div class="card">
+                            <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
+                            </div>
+                            <div class="card-body">
+                              <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
+                              <p class="card-text mb-0">
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                              </p>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col-md-4">
+                        <a href="" target="_blank">
+                          <div class="card">
+                            <div class="card__bgImg" style="background-image: url(https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg);">
+                            </div>
+                            <div class="card-body">
+                              <h5 class="card-title card__title mt-0">藏岳│混搭風│26坪</h5>
+                              <p class="card-text mb-0">
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                              </p>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="tab-pane fade" id="pills-company" role="tabpanel"
+                    aria-labelledby="pills-company-tab">
+                    <div class="row justfy-content-between">
+                      <div class="col-md-8">
+                        <article>
+                          <div class="company__block">
+                            <h4 class="company__title">設計理念</h4>
+                            <div class="company__text">
+                              空間設計的美學藝術，蔡岳儒總監更能將日式精闢的手工藝術融入台灣的設計與工程，更將留日所學發揚光大明確的把結構、
+                              動線、收納、光線與品味融入建築、景觀與室內三大空間之中，藉由點線面展現出空間的獨特性，並賦予空間延續的生命活力。
+                              <br>
+                              Design director Yueh-Ju Tsai is good at applying Japanese handmade fine art to the design
+                               and construction in Taiwan. Mr. Tsai has developed what he learned in Japan, and applied 
+                               structure, flow, storage, light and taste to the area of architecture, landscape and 
+                               interior. Mr. Tsai utilizes dots, lines, surface to show the unique character of space and 
+                               put vivid life into the space.
+                            </div>
+                          </div>
+                          <div class="company__block">
+                            <h4 class="company__title">公司統編</h4>
+                            <div class="company__text">
+                              經濟部／財政部登記有案：54656779
+                            </div>
+                          </div>
+                          <div class="company__block">
+                            <h4 class="company__title">相關經歷</h4>
+                            <div class="company__text">
+                              <p>蔡岳儒
+                                <br>◆現任／恆岳空間設計 主持設計師
+                                <br>◆學歷／東京デザイナー学院卒業
+                                <br>◆經歷／十餘年設計、工程經歷。
+                                <br><br>1999年日本國色彩士 
+                                <br>2000年東京デザイナ-学院卒業 
+                                <br>2009年一級室內裝飾設計師 
+                                <br>2012年環保署整潔綠美化管理人員 
+                                <br>2013年內政部建築物室內裝修登記立案
+                                <br>2014年無障礙設施設備勘檢人員培訓</p>
+                            </div>
+                          </div>
+                          <div class="company__block">
+                            <h4 class="company__title">專業證照</h4>
+                            <div class="company__text">
+                              建築物室內裝修專業技術人員登記證 高恒悌 第40EC116787號
+                              <br>建築物室內裝修專業技術人員登記證 高恒悌 第40EC116787號
+                            </div>
+                          </div>
+                        </article>
+                      </div>
+                      <div class="col-md-4"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <footer class="footer">
+            <div class="container" style="margin:0 auto;">
+                <div class="row">
+                    <div class="col footer__block">
+                        <h4 class="footer__block-title">相關連結</h4>
+                        <ul class="footer__block-list">
+                            <li><a class="footer__list-item" href="http://gstv.com.tw/" target="_blank">
+                                <div class="footer__list-icon"><img src="images/menu/tv.svg" alt=""></div>
+                                <p>幸福空間居家台</p>
+                            </a></li>
+                            <li><a class="footer__list-item" href="https://event.hhh.com.tw/contest/2018/" target="_blank">
+                                <div class="footer__list-icon"><img src="images/menu/prize.svg" alt=""></div>
+                                <p>ADA 亞洲設計獎</p>
+                            </a></li>
+                            <li><a class="footer__list-item" href="https://event.hhh.com.tw/2019global-award/" target="_blank">
+                                <div class="footer__list-icon"><img src="images/menu/champion.svg" alt=""></div>
+                                <p>國際設計大獎代辦</p>
+                            </a></li>
+                            <li><a class="footer__list-item" href="https://www.leju.com.tw/" target="_blank">
+                                <div class="footer__list-icon"><img data-src="images/menu/Image 1@2x.png" alt="" width="20" class="lazyload"></div>
+                                <p>樂居網</p>
+                            </a></li>
+                            <li><a class="footer__list-item" href="https://shop.hhh.com.tw/" target="_blank">
+                                <div class="footer__list-icon"><img src="images/menu/cart.svg" alt=""></div>
+                                <p>+好物</p>
+                            </a></li>
+                        </ul>
+                    </div>
+                    <div class="col footer__block">
+                        <h4 class="footer__block-title">相關社群</h4>
+                        <div class="d-flex flex-column justify-content-center">
+                            <ul class="footer__block-socials">
+                                <li><a href="https://www.facebook.com/hhhfb"><img src="images/menu/fb.svg" alt="" class="d-inline-block"></a></li>
+                                <li><a href="https://line.me/ti/p/%40ovs4341s"><img src="images/menu/line.svg" alt="" class="d-inline-block"></a></li>
+                                <li><a href="https://www.youtube.com/user/gorgeousspace"><img src="images/menu/youtube.svg" alt="" class="d-inline-block"></a></li>
+                                <li><a href="https://www.instagram.com/gorgeous_space/"><img data-src="images/menu/instagram@2x.png" width="43" alt="" class="d-inline-block lazyload"></a></li>
+                                <li><a href=""><img src="images/menu/pinterest.svg" alt="" class="d-inline-block"></a></li>
+                            </ul>
+                            <div class="py-4 text-center d-flex justify-content-center">
+                                <a href="https://www.facebook.com/agent.hhh.com.tw" class="follows-fp me-2"><img src="images/menu/fb.svg" alt="" width="20" class="d-inline-block me-2"><p>幸福經紀人</p></a>
+                                <a href="https://www.facebook.com/retire.tw/" class="follows-fp ms-2"><img src="images/menu/fb.svg" alt="" width="20" class="d-inline-block me-2"><p>退休好幸福</p></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col footer__block d-flex flex-column justify-content-center align-items-center">
+                        <div class="footer__block-phone">
+                            <p>幸福經紀人免付費諮詢電話</p><span class="ms-2"><a class="text-phone" href="tel:0800-366-086">0800-366-086</a></span></a>
+                        </div>
+                        <div class="footer__block-links">
+                            <div class="footer__block-links-grp">
+                                <a href="https://m.hhh.com.tw/about/contact/">關於我們</a>
+                                <a href="https://m.hhh.com.tw/about/timeline/">公司歷程</a>
+                            </div>
+                            <div class="footer__block-links-grp">
+                                <a href="https://m.hhh.com.tw/about/privacy_policy/">隱私保護</a>
+                                <a href="https://www.104.com.tw/company/d6hr8sg">企業徵才</a>
+                            </div>
+                            <div class="footer__block-links-grp">
+                                <a href="https://m.hhh.com.tw/about/contact/">聯絡我們</a>
+                                <a href="https://m.hhh.com.tw/about/sitemap/">網站地圖</a>
+                            </div>
+                        </div>
+                        <!-- <div class="footer__block-subscribe">
+                            <input type="text" name="searchQuery" class="subscribeBar p-2" placeholder="訂閱電子報，請輸入您的Email">
+                            <button type="button" class="subscribeBtn">訂閱</button>
+                        </div> -->
+                    </div>
+                </div>
+            </div>
+            <div class="container-fluid bottom-box">
+
+            </div>
+        </footer>
+          <div class="fixed-btn">
+            <!-- <div class="btn-favor mb-2" data-bs-toggle="modal" data-bs-target="#favorModal">
+              <img src="images/gotop.png" width="28" alt="">
+            </div>
+            <div class="btn-login mb-2" data-bs-toggle="modal" data-bs-target="#loginModal">
+              <img src="images/gotop.png" width="28" alt="">
+            </div> -->
+            <div class="btn-gotop">
+              <img data-src="images/gotop.webp" width="28" alt="" class="lazyload">
+            </div>
+          </div>
+          <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered">
+              <div class="modal-content">
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                  <div class="container-fluid sec-login-block px-0">
+                    <div class="sec-login-list w-100">
+                      <h4 class="sec- text-center">會員登入</h4>
+                      <hr>
+                      <div class="sec-login-btns">
+                      </div>
+                    </div>
+                  </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal fade" id="favorModal" tabindex="-1" aria-labelledby="favorModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered">
+              <div class="modal-content">
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                <div class="container-fluid sec-favor-block px-0">
+                  <div class="sec-favor-list w-100">
+                    <h4 class="sec-favor-title text-center">我的喜好</h4>
+                    <hr>
+                    <div class="sec-favor-form">
+                      <form action="" method="" id="msform">
+                        <div class="d-flex justify-content-between align-items">
+                          <div class="form-user">Hi 陳喬治</div>
+                          <ul class="p-0 form-progressbar">
+                            <li class="active">1</li>
+                            <li>2</li>
+                            <li>3</li>
+                          </ul>
+                        </div>
+                        <fieldset class="form-step form-step1 text-center">
+                          <div style="position: relative;">
+                          <h4 class="mb-3">請選擇設計風格 / 多選</h4>
+                          <div class="row mb-2">
+                            <input type="checkbox" value="北歐風" name="q1" id="1a" checked/>
+                            <label class="col-4 mr fs-label-info text-center" for="1a">
+                              <div class="imgfr mb-1"></div>
+                              <p>北歐風</p>
+                            </label>
+                            <input type="checkbox" value="現代風" name="q1" id="1b" />
+                            <label class="col-4 mr fs-label-info text-center" for="1b">
+                              <div class="imgfr mb-1"></div>
+                              <p>現代風</p>
+                            </label>
+                            <input type="checkbox" value="工業風" name="q1" id="1c" />
+                            <label class="col-4 mr fs-label-info text-center" for="1c">
+                              <div class="imgfr mb-1"></div>
+                              <p>工業風</p>
+                            </label>
+                          </div>
+                          <div class="row mb-2">
+                            <input type="checkbox" value="美式風" name="q1" id="1d" />
+                            <label class="col-4 mr fs-label-info text-center" for="1d">
+                              <div class="imgfr mb-1"></div>
+                              <p>美式風</p>
+                            </label>
+                            <input type="checkbox" value="鄉村風" name="q1" id="1e" />
+                            <label class="col-4 mr fs-label-info text-center" for="1e">
+                              <div class="imgfr mb-1"></div>
+                              <p>鄉村風</p>
+                            </label>
+                            <input type="checkbox" value="古典風" name="q1" id="1f" />
+                            <label class="col-4 mr fs-label-info text-center" for="1f">
+                              <div class="imgfr mb-1"></div>
+                              <p>古典風</p>
+                            </label>
+                          </div>
+                          <div class="row mb-2">
+                            <input type="checkbox" value="新古典風" name="q1" id="1g" />
+                            <label class="col-4 mr fs-label-info text-center" for="1g">
+                              <div class="imgfr mb-1"></div>
+                              <p>新古典風</p>
+                            </label>
+                            <input type="checkbox" value="休閒多元" name="q1" id="1h" />
+                            <label class="col-4 mr fs-label-info text-center" for="1h">
+                              <div class="imgfr mb-1"></div>
+                              <p>休閒多元</p>
+                            </label>
+                            <input type="checkbox" value="其他" name="q1" id="1i" />
+                            <label class="col-4 mr fs-label-info text-center" for="1i">
+                              <div class="imgfr mb-1"></div>
+                              <p>其他</p>
+                            </label>
+                          </div>
+                          <input class="next" type="button" value="下一步">
+                        </div>
+                        </fieldset>
+                        <fieldset class="form-step form-step2 text-center">
+                          <div style="">
+                          <h4 class="mb-3">請選擇喜歡的居家空間 / 多選</h4>
+                          <div class="row mb-2">
+                            <input type="checkbox" value="北歐風" name="q2" id="2a" checked/>
+                            <label class="col-4 mr fs-label-info text-center" for="2a">
+                              <div class="imgfr mb-1"></div>
+                              <p>客廳</p>
+                            </label>
+                            <input type="checkbox" value="現代風" name="q2" id="2b" />
+                            <label class="col-4 mr fs-label-info text-center" for="2b">
+                              <div class="imgfr mb-1"></div>
+                              <p>餐廳</p>
+                            </label>
+                            <input type="checkbox" value="工業風" name="q2" id="2c" />
+                            <label class="col-4 mr fs-label-info text-center" for="2c">
+                              <div class="imgfr mb-1"></div>
+                              <p>臥室</p>
+                            </label>
+                          </div>
+                          <div class="row mb-2">
+                            <input type="checkbox" value="美式風" name="q2" id="2d" />
+                            <label class="col-4 mr fs-label-info text-center" for="2d">
+                              <div class="imgfr mb-1"></div>
+                              <p>廚房</p>
+                            </label>
+                            <input type="checkbox" value="鄉村風" name="q2" id="2e" />
+                            <label class="col-4 mr fs-label-info text-center" for="2e">
+                              <div class="imgfr mb-1"></div>
+                              <p>浴室</p>
+                            </label>
+                            <input type="checkbox" value="古典風" name="q2" id="2f" />
+                            <label class="col-4 mr fs-label-info text-center" for="2f">
+                              <div class="imgfr mb-1"></div>
+                              <p>玄關</p>
+                            </label>
+                          </div>
+                          <div class="row mb-2">
+                            <input type="checkbox" value="新古典風" name="q2" id="2g" />
+                            <label class="col-4 mr fs-label-info text-center" for="2g">
+                              <div class="imgfr mb-1"></div>
+                              <p>兒童房</p>
+                            </label>
+                            <input type="checkbox" value="休閒多元" name="q2" id="2h" />
+                            <label class="col-4 mr fs-label-info text-center" for="2h">
+                              <div class="imgfr mb-1"></div>
+                              <p>陽台</p>
+                            </label>
+                            <input type="checkbox" value="其他" name="q1" id="2i" />
+                            <label class="col-4 mr fs-label-info text-center" for="2i">
+                              <div class="imgfr mb-1"></div>
+                              <p>其他</p>
+                            </label>
+                          </div>
+                          <input class="next" type="button" value="下一步">
+                          </div>
+                        </fieldset>
+                        <fieldset class="form-step form-step3 text-center">
+                          <h4 class="mb-3 text-center">請選擇以下條件</h4>
+                          <div class="step3-block text-start">
+                            <span class="step3-block-title">房屋坪數 / 單選</span>
+                            <input type="radio" value="20坪以下" name="q3" id="3a" />
+                            <label class="mr fs-label-chbox radio" for="3a">20坪以下</label>
+                            <input type="radio" value="20~30坪" name="q3" id="3b" />
+                            <label class="mr fs-label-chbox radio" for="3b">20~30坪</label>
+                            <input type="radio" value="30~40坪" name="q3" id="3c" />
+                            <label class="mr fs-label-chbox radio" for="3c">31~50坪</label>
+                            <input type="radio" value="50坪以上" name="q3" id="3e" />
+                            <label class="mr fs-label-chbox radio" for="3e">50坪以上</label>
+                          </div>
+                          <div class="step3-block text-start">
+                            <span class="step3-block-title text-left">房屋預算 / 單選</span>
+                            <input type="radio" value="20坪以下" name="q4" id="4a" />
+                            <label class="mr fs-label-chbox radio" for="4a">100萬以下</label>
+                            <input type="radio" value="20~30坪" name="q4" id="4b" />
+                            <label class="mr fs-label-chbox radio" for="4b">101~200萬</label>
+                            <input type="radio" value="30~40坪" name="q4" id="4c" />
+                            <label class="mr fs-label-chbox radio" for="4c">201~300萬</label>
+                            <input type="radio" value="50坪以上" name="q4" id="4e" />
+                            <label class="mr fs-label-chbox radio" for="4e">301萬以上</label>
+                          </div>
+                          <div class="step3-block text-start">
+                            <span class="step3-block-title text-left">裝修屋況 / 單選</span>
+          
+                            <input type="radio" value="20坪以下" name="q5" id="5a" />
+                            <label class="mr fs-label-chbox radio" for="5a">新成屋</label>
+                            <input type="radio" value="20~30坪" name="q5" id="5b" />
+                            <label class="mr fs-label-chbox radio" for="5b">中古屋</label>
+                            <input type="radio" value="30~40坪" name="q5" id="5c" />
+                            <label class="mr fs-label-chbox radio" for="5c">毛胚屋</label>
+                            <input type="radio" value="50坪以上" name="q5" id="5d" />
+                            <label class="mr fs-label-chbox radio" for="5d">老屋翻新</label>
+                            <input type="radio" value="50坪以上" name="q5" id="5e" />
+                            <label class="mr fs-label-chbox radio" for="5e">自地自建</label>
+                          </div>
+                          <div class="btngrp text-center">
+                            <input class="skip d-block mb-2" type="button" value="略過">
+                            <input class="next d-block" type="button" value="下一步">
+                          </div>
+                        </fieldset>
+                      </form>
+                    </div>
+                    <div class="sec-favor-checklist d-none">
+                      <form action="" method="">
+                        <div class="form-user">Hi 陳喬治</div>
+                        <fieldset class="form-step text-center">
+                          <h4 class="mb-3 text-center">請選擇以下條件</h4>
+                          <div class="step3-block text-start">
+                            <span class="step3-block-title">設計風格 / 多選</span>
+          
+                            <input type="checkbox" value="20坪以下" name="style" id="north" />
+                            <label class="mr fs-label-chbox radio" for="north">北歐風</label>
+                            <input type="checkbox" value="20~30坪" name="style" id="modern" />
+                            <label class="mr fs-label-chbox radio" for="modern">現代風</label>
+                            <input type="checkbox" value="30~40坪" name="style" id="indust" />
+                            <label class="mr fs-label-chbox radio" for="indust">工業風</label>
+                            <input type="checkbox" value="50坪以上" name="style" id="usa" />
+                            <label class="mr fs-label-chbox radio" for="usa">美式風</label>
+                            <input type="checkbox" value="50坪以上" name="style" id="casual" />
+                            <label class="mr fs-label-chbox radio" for="casual">休閒多元</label>
+                            <input type="checkbox" value="50坪以上" name="style" id="country" />
+                            <label class="mr fs-label-chbox radio" for="country">鄉村風</label>
+                            <input type="checkbox" value="50坪以上" name="style" id="old" />
+                            <label class="mr fs-label-chbox radio" for="old">古典風</label>
+                            <input type="checkbox" value="50坪以上" name="style" id="other" />
+                            <label class="mr fs-label-chbox radio" for="other">其他</label>
+                          </div>
+                          <div class="step3-block text-start mb-3">
+                            <span class="step3-block-title">喜歡的居家空間 / 多選</span>
+          
+                            <input type="checkbox" value="20坪以下" name="space" id="salon" />
+                            <label class="mr fs-label-chbox radio" for="salon">客廳</label>
+                            <input type="checkbox" value="20~30坪" name="space" id="restaurant" />
+                            <label class="mr fs-label-chbox radio" for="restaurant">餐廳</label>
+                            <input type="checkbox" value="30~40坪" name="space" id="bedroom" />
+                            <label class="mr fs-label-chbox radio" for="bedroom">臥室</label>
+                            <input type="checkbox" value="50坪以上" name="space" id="kitchen" />
+                            <label class="mr fs-label-chbox radio" for="kitchen">廚房</label>
+                            <input type="checkbox" value="50坪以上" name="space" id="bathroom" />
+                            <label class="mr fs-label-chbox radio" for="bathroom">浴室</label>
+                            <input type="checkbox" value="50坪以上" name="space" id="porch" />
+                            <label class="mr fs-label-chbox radio" for="porch">玄關</label>
+                            <input type="checkbox" value="50坪以上" name="space" id="childroom" />
+                            <label class="mr fs-label-chbox radio" for="childroom">兒童房</label>
+                            <input type="checkbox" value="50坪以上" name="space" id="balcony" />
+                            <label class="mr fs-label-chbox radio" for="balcony">陽台</label>
+                            <input type="checkbox" value="50坪以上" name="space" id="others" />
+                            <label class="mr fs-label-chbox radio" for="others">其他</label>
+                          </div>
+                          <div class="step3-block text-start">
+                            <span class="step3-block-title">房屋坪數 / 單選</span>
+          
+                            <input type="radio" value="20坪以下" name="feet" id="below20" />
+                            <label class="mr fs-label-chbox radio" for="below20">20坪以下</label>
+                            <input type="radio" value="20~30坪" name="feet" id="20to30" />
+                            <label class="mr fs-label-chbox radio" for="20to30">20~30坪</label>
+                            <input type="radio" value="30~40坪" name="feet" id="30to50" />
+                            <label class="mr fs-label-chbox radio" for="30to50">31~50坪</label>
+                            <input type="radio" value="50坪以上" name="feet" id="above50" />
+                            <label class="mr fs-label-chbox radio" for="above50">50坪以上</label>
+                          </div>
+                          <div class="step3-block text-start">
+                            <span class="step3-block-title text-left">房屋預算 / 多選</span>
+                            <input type="checkbox" value="20坪以下" name="budget" id="below1m" />
+                            <label class="mr fs-label-chbox radio" for="below1m">100萬以下</label>
+                            <input type="checkbox" value="20~30坪" name="budget" id="100to200" />
+                            <label class="mr fs-label-chbox radio" for="100to200">101~200萬</label>
+                            <input type="checkbox" value="30~40坪" name="budget" id="200to300" />
+                            <label class="mr fs-label-chbox radio" for="200to300">201~300萬</label>
+                            <input type="checkbox" value="50坪以上" name="budget" id="300up" />
+                            <label class="mr fs-label-chbox radio" for="300up">301萬以上</label>
+                          </div>
+                          <div class="step3-block text-start">
+                            <span class="step3-block-title text-left">裝修屋況 / 單選</span>
+          
+                            <input type="radio" value="20坪以下" name="condition" id="new" />
+                            <label class="mr fs-label-chbox radio" for="new">新成屋</label>
+                            <input type="radio" value="20~30坪" name="condition" id="aged" />
+                            <label class="mr fs-label-chbox radio" for="aged">中古屋</label>
+                            <input type="radio" value="30~40坪" name="condition" id="unfinished" />
+                            <label class="mr fs-label-chbox radio" for="unfinished">毛胚屋</label>
+                            <input type="radio" value="50坪以上" name="condition" id="refurbish" />
+                            <label class="mr fs-label-chbox radio" for="refurbish">老屋翻新</label>
+                            <input type="radio" value="50坪以上" name="condition" id="selfown" />
+                            <label class="mr fs-label-chbox radio" for="selfown">自地自建</label>
+                          </div>
+                          <div class="btngrp text-center">
+                            <input class="next d-block mb-3" type="button" value="下一步">
+                          </div>
+                        </fieldset>
+                      </form>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+    </div>
+    <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>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+    <script async defer src="js/index.js"></script>
+    <script async defer src="js/index-list.js"></script>
+    <script src="js/lazy-load.js" async></script>
+</body>
+
+</html>

index_match.html

@@ -0,0 +1,1523 @@
+<!DOCTYPE html>
+<html lang="zh_TW">
+<head>
+    <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="images/favicon.ico">
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
+    crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
+        rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
+        crossorigin="anonymous">
+        
+      <!-- <link rel="stylesheet" href="css/jquery-ui.css"> -->
+      <link rel="stylesheet" type="text/css" href="css/slick.css" />
+      <link rel="stylesheet" type="text/css" href="css/slick-theme.css" />
+
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <div style="overflow-x:hidden;">
+        
+        <nav class="navbar navbar-expand-lg navbar-light navbar-main">
+            <div class="container-fluid" style="margin:0;">
+                <a href="https://hhh.com.tw/" class="navbar-brand navbar-logo"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="110"></a>
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
+                      <li class="nav-item">
+                        <a class="nav-link" target="_blank" href="https://m.hhh.com.tw/about/calculator/">估預算</a>
+                      </li>
+                      <li class="nav-item">
+                        <a class="nav-link" href="https://m.hhh.com.tw/photos/index/">找風格</a>
+                        <div class="dropbox">
+                          <div class="container stylebox" style="max-width: 650px;">
+                            <div class="row g-0 px-5">
+                              <div class="col-5">
+                                <ul class="mx-auto mb-lg-0">
+                                  <li class="dropbox-item mb-3">
+                                    <a class="dropbox-link dropbox-btn" target="_blank" href="https://m.hhh.com.tw/about/calculator/">估預算</a>
+                                  </li>
+                                  <li class="dropbox-item mb-0">
+                                    <a class="dropbox-link dropbox-btn" target="_blank" href="https://hhh.com.tw/about/request/">找諮詢</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/photos/lists/nordic-style/" >北歐風</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/photos/lists/modern-style/">現代風</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link"href="https://m.hhh.com.tw/photos/lists/industry-style/">工業風</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/cases/lists/small-ctype/">小坪數</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/search/lists/case/%E9%A2%A8%E6%B0%B4-keyword/">風水</a>
+                                  </li>
+                                  
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/search/lists/video/%E8%8E%8E%E8%8E%8E-keyword/">莎莎看房去</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/topic/detail/402/">小坪數大空間</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/videos/lists/">發燒影音</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="">居家防疫動起來</a>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </li>
+                      <li class="nav-item">
+                        <a class="nav-link" href="https://m.hhh.com.tw/columns/lists/all-columntypea/">專欄文章</a>
+                        <div class="dropbox">
+                          <div class="container">
+                            <div class="row g-0">
+                              <div class="col">
+                                <ul class="mx-auto mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/">編輯精選</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/hometrends-columntypeb/">居家趨勢</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/hotrank-columntypeb/">人氣排行</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/archdesign-columntypeb/">建築設計</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/styleselection-columntypeb/">風格選店</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/charitable-columntypeb/">公益活動</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/exhibition-columntypeb/">展演資訊</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/">居家設計</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/smallhouse-columntypeb/">小宅規劃</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/oldhouse-columntypeb/">老屋翻新</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/stylebuild-columntypeb/">風格營造</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/color-columntypeb/">配色佈置</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/goodhouse-columntypeb/">好宅特輯</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/proposal-columntypeb/">設計提案</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/">裝修前線</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/news-columntypeb/">裝修最前線</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/allocation-columntypeb/">預算配置</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/process-columntypeb/">施工流程</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/knowledge-columntypeb/">建材知識</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/">生活PLUS</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/fengshui-columntypeb/">居家風水</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/housekeeping-columntypeb/">家事清潔</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/storageskills-columntypeb/">收納技巧</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/renovation-columntypeb/">改造修繕</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/">品牌好物</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/furnishings-columntypeb/">傢俱家飾</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/appliances-columntypeb/">美型家電</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/recommend-columntypeb/">推薦廚衛</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/homegoods-columntypeb/">居家好物</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/quality-columntypeb/">優質建材</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/">房市焦點</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/housingnews-columntypeb/">房市新聞</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/specsearch-columntypeb/">建案特蒐</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/buyandsell-columntypeb/">買屋賣屋</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/mortgage-columntypeb/">房貸稅務</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/topic/lists/1-page/new-sort/">主題企劃</a>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </li>
+                      <li class="nav-item">
+                        <a class="nav-link" target="_blank" href="https://m.hhh.com.tw/designers/lists/">設計師</a>
+                        <div class="dropbox">
+                          <div class="container designerbox" style="max-width: 680px;">
+                            <div class="row g-0 px-5">
+                              <div class="col-5">
+                                <ul class="mx-auto mb-lg-0">
+                                  <li class="dropbox-item mb-4">
+                                    <a class="dropbox-link dropbox-btn" target="_blank" href="https://m.hhh.com.tw/decoquery/lists/address/">查證照</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/designers/lists/">室內設計師</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" target="_blank" href="https://event.hhh.com.tw/2021-Most-Favorite-Designers/index.php">觀眾最愛設計師</a>
+                                  </li>
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" target="_blank" href="https://event.hhh.com.tw/topglory/">GLORY 國際大賞</a>
+                                  </li>
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" target="_blank" href="https://hhh.com.tw/event170427/">老屋翻新居家改造</a>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </li>
+                      <li class="nav-item lg">
+                        <a class="nav-link" target="_blank" href="https://m.hhh.com.tw/products/lists/">居家商品</a>
+                        <div class="dropbox">
+                          <div class="container">
+                            <div class="row g-0">
+                              <div class="col-2">
+                                <ul class="mx-auto mb-lg-0">
+                                  <li class="dropbox-item mb-4">
+                                    <a class="dropbox-link dropbox-btn" target="_blank" href="https://shop.hhh.com.tw/"><img src="images/menu/cart.svg" width="15" alt=""><p>+好物</p></a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-3">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/building-pcategorya/1-page/new-sort/">建材</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/building-pcategorya/wooden-pcategoryb/1-page/new-sort/">木地板</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/building-pcategorya/sheetmetal-pcategoryb/1-page/new-sort/">板材</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/building-pcategorya/tile-pcategoryb/1-page/new-sort/">磁磚</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/building-pcategorya/stone-pcategoryb/1-page/new-sort/">石材</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/building-pcategorya/cement-pcategoryb/1-page/new-sort/">水泥</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/building-pcategorya/glass-pcategoryb/1-page/new-sort/">玻璃、隔熱膜</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/building-pcategorya/wallcovering-pcategoryb/1-page/new-sort/">壁紙、壁布</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/building-pcategorya/doorswindows-pcategoryb/1-page/new-sort/">門窗</a>
+                                  </li>
+                                </ul>
+                                <ul class="mx-auto">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/coating-pcategorya/1-page/new-sort/">塗料</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/coating-pcategorya/paint-pcategoryb/1-page/new-sort/">油漆</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/coating-pcategorya/coatings-pcategoryb/1-page/new-sort/">塗料</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto mb-3">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/furniture-pcategorya/1-page/new-sort/">傢俱</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/furniture-pcategorya/living-pcategoryb/1-page/new-sort/">客廳</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/furniture-pcategorya/bedroom-pcategoryb/1-page/new-sort/">臥室</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/furniture-pcategorya/restaurant-pcategoryb/1-page/new-sort/">餐廳</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/furniture-pcategorya/study-pcategoryb/1-page/new-sort/">書房/辦公室</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/furniture-pcategorya/storage-pcategoryb/1-page/new-sort/">收納</a>
+                                  </li>
+                                </ul>
+                                <ul class="mx-auto">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/home-pcategorya/1-page/new-sort/">寢具裝飾</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/home-pcategorya/bedding-pcategoryb/1-page/new-sort/">寢飾</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/home-pcategorya/curtains-pcategoryb/1-page/new-sort/">窗簾、葉窗</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/home-pcategorya/carpet-pcategoryb/1-page/new-sort/">地毯、地墊</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/home-pcategorya/artdecoration-pcategoryb/1-page/new-sort/">藝術、擺飾</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/home-pcategorya/mirror-pcategoryb/1-page/new-sort/">鏡子</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/1-page/new-sort/">家電</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/refrigerator-pcategoryb/1-page/new-sort/">冰箱</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/airconditioning-pcategoryb/1-page/new-sort/">冷氣、空調</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/tv-pcategoryb/1-page/new-sort/">電視</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/projector-pcategoryb/1-page/new-sort/">投影機</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/sound-pcategoryb/1-page/new-sort/">音響</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/aircleaner-pcategoryb/1-page/new-sort/">空氣清淨機</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/vacuumcleaner-pcategoryb/1-page/new-sort/">吸塵器</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/efan-pcategoryb/1-page/new-sort/">電風扇</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/eheater-pcategoryb/1-page/new-sort/">電暖器機</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/dehumidifier-pcategoryb/1-page/new-sort/">除濕機</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/massage-pcategoryb/1-page/new-sort/">按摩家電</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/household-pcategorya/coffee-pcategoryb/1-page/new-sort/">咖啡機</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/kitchen-pcategorya/1-page/new-sort/">廚房</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/kitchen-pcategorya/electromagnetic-pcategoryb/1-page/new-sort/">電磁、電子爐</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/kitchen-pcategorya/dryingmachine-pcategoryb/1-page/new-sort/">洗、烘碗機</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/kitchen-pcategorya/ventilator-pcategoryb/1-page/new-sort/">排油煙機</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/kitchen-pcategorya/steamoven-pcategoryb/1-page/new-sort/">烤箱、蒸爐</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/kitchen-pcategorya/kithardware-pcategoryb/1-page/new-sort/">廚房五金</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/kitchen-pcategorya/potsandutensils-pcategoryb/1-page/new-sort/">鍋具、器皿</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/bathroom-pcategorya/1-page/new-sort/">衛浴</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/bathroom-pcategorya/bathtub-pcategoryb/1-page/new-sort/">浴缸</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/bathroom-pcategorya/waterheater-pcategoryb/1-page/new-sort/">電熱水器</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/bathroom-pcategorya/bathaircondition-pcategoryb/1-page/new-sort/">浴室空調</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/bathroom-pcategorya/bathfittings-pcategoryb/1-page/new-sort/">衛浴五金</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/bathroom-pcategorya/showerdoor-pcategoryb/1-page/new-sort/">淋浴拉門</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/bathroom-pcategorya/bathm-pcategoryb/1-page/new-sort/">衛浴設備</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/lighting-pcategorya/1-page/new-sort/" >照明</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/lighting-pcategorya/ceiling-pcategoryb/1-page/new-sort/">吸頂燈</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/lighting-pcategorya/spotlight-pcategoryb/1-page/new-sort/">投射燈</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/lighting-pcategorya/chandelier-pcategoryb/1-page/new-sort/">吊燈</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/lighting-pcategorya/walllamp-pcategoryb/1-page/new-sort/">壁燈</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/lighting-pcategorya/tablelamp-pcategoryb/1-page/new-sort/">檯燈</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/lighting-pcategorya/standing-pcategoryb/1-page/new-sort/">立燈</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/lighting-pcategorya/recessed-pcategoryb/1-page/new-sort/">嵌燈</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/lighting-pcategorya/lightbulbs-pcategoryb/1-page/new-sort/">燈泡、燈具</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col">
+                                <ul class="mx-auto">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/other-pcategorya/1-page/new-sort/">其他</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/other-pcategorya/fire-pcategoryb/1-page/new-sort/">消防設備</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/other-pcategorya/smartdevice-pcategoryb/1-page/new-sort/">智能設備</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/other-pcategorya/lifegroceries-pcategoryb/1-page/new-sort/">生活雜貨</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/other-pcategorya/cleaningsupplies-pcategoryb/1-page/new-sort/">清潔用品</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/other-pcategorya/photography-pcategoryb/1-page/new-sort/">攝影</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/other-pcategorya/otherservice-pcategoryb/1-page/new-sort/">其他服務</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col-2">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" target="_blank" href="https://event.hhh.com.tw/2020-Top-Brands/">消費者最愛品牌</a>
+                                  </li>
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/products/lists/1-page/new-sort/">所有商品</a>
+                                  </li>
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/brands/lists/">所有品牌</a>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </li>
+                      <li class="nav-item">
+                        <a class="nav-link" target="_blank" href="https://m.hhh.com.tw/builder/lists/">新建案</a>
+                        <div class="dropbox">
+                          <div class="container newbox" style="max-width: 650px;">
+                            <div class="row g-0 px-5">
+                              <div class="col-6">
+                                <ul class="mx-auto mb-lg-0">
+                                  <li class="dropbox-item mb-4">
+                                    <a class="dropbox-link dropbox-btn" target="_blank" href="https://www.leju.com.tw/page_search_result">實價登錄</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col-3">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/builder/lists/1-page/">依地區</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/builder/lists/100-citys/1-page/">臺北市</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/builder/lists/101-citys/1-page/">新北市</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/builder/lists/103-citys/1-page/">桃園市</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/builder/lists/104-citys/1-page/">新竹縣</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/builder/lists/105-citys/1-page/">新竹市</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/builder/lists/107-citys/1-page/">臺中市</a>
+                                  </li>
+                                </ul>
+                              </div>
+                              <div class="col-3">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" href="https://m.hhh.com.tw/cases/lists/small-ctype/">新建案</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/builder/lists/mrt-types/1-page/">捷運宅</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/builder/lists/function-types/1-page/">機能宅</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/builder/lists/king-types/1-page/">帝王宅</a>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </li>
+                      <li class="nav-item">
+                        <a class="nav-link" target="_blank" href="https://m.hhh.com.tw/forum/category/">討論區</a>
+                        <div class="dropbox">
+                          <div class="container forumbox" style="max-width: 450px;">
+                            <div class="row g-0 px-5">
+                              <div class="col-6">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" href="https://hhh.com.tw/forum/lists?category=1" target="_blank">居家綜合</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://hhh.com.tw/forum/lists?category=2">室內設計與佈置</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://hhh.com.tw/forum/lists?category=3">房屋修繕</a>
+                                  </li>
+                                  
+                                </ul>
+                              </div>
+                              <div class="col-6">
+                                <ul class="mx-auto mb-2 mb-lg-0">
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://hhh.com.tw/forum/lists?category=4">房產房產經驗宅</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://hhh.com.tw/forum/lists?category=5">家店開箱與討論</a>
+                                  </li>
+                        
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </li>
+                      <li class="nav-item">
+                        <a class="nav-link" onclick="todayTV();">TV節目表</a>
+                      </li>
+                    </ul>
+                </div>
+                <div class="navbar-brand navbar-search me-2 d-flex align-items-center">
+                    <img width="25" class="navbar-search-magnify" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMC4wMDMiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMC4wMDMgMjAiPgogIDxnIGlkPSJzZWFyY2giIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjA1KSI+CiAgICA8cGF0aCBpZD0iUGF0aF8yMjcyIiBkYXRhLW5hbWU9IlBhdGggMjI3MiIgZD0iTTE5Ljg4LDE4Ljk4bC00Ljg2Mi00Ljg2YTguNTM5LDguNTM5LDAsMSwwLS44NDMuODQzbDQuODYyLDQuODZhLjYuNiwwLDAsMCwuNDIxLjE3Ny41ODQuNTg0LDAsMCwwLC40MjEtLjE3N0EuNi42LDAsMCwwLDE5Ljg4LDE4Ljk4Wk0xLjI0Myw4LjUyOGE3LjMzMyw3LjMzMywwLDEsMSw3LjMzMyw3LjMzNUE3LjM0LDcuMzQsMCwwLDEsMS4yNDMsOC41MjhaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwKSIgZmlsbD0iI2VlNzgwMCIvPgogIDwvZz4KPC9zdmc+Cg==" alt="">
+                    <div class="dropbox">
+                      <div class="container">
+                        <div class="w-100 text-center dropbox__searchBar mb-3">
+                          <input type="text" class="dropbox__searchBar__input" placeholder="請輸入關鍵字">
+                          <button class="dropbox__searchBar__submit">搜尋</button>
+                        </div>
+                        <div class="dropbox__searchtab">
+                          <div class="dropbox__tab dropbox__tabdiv">
+                            <ul class="nav row nav-pills gx-2 justify-content-around">
+                              <li class="nav-item col text-center">
+                                <button class="nav-item-link bg-transparent" id="pills-img-tab">圖片</button>
+                              </li>
+                              <li class="nav-item col text-center">
+                                <button class="nav-item-link bg-transparent" id="pills-article-tab">專欄文章</button>
+                              </li>
+                              <li class="nav-item col text-center">
+                                <button class="nav-item-link bg-transparent" id="pills-case-tab">設計案例</button>
+                              </li>
+                              <li class="nav-item col text-center">
+                                <button class="nav-item-link bg-transparent" id="pills-designer-tab">設計師</button>
+                              </li>
+                              <li class="nav-item col text-center">
+                                <button class="nav-item-link bg-transparent" id="pills-home-tab">居家商品</button>
+                              </li>
+                              <li class="nav-item col text-center">
+                                <button class="nav-item-link bg-transparent" id="pills-news-tab">新建案</button>
+                              </li>
+                            </ul>
+                          </div>
+                          <div class="tab-content dropbox-tab-content" id="pills-tab-2">
+                            <div class="" id="pills-img-tab">
+                                <div class="tabpar tabpar__1">
+                                  <select name="image-style" id="image-style" class="col select">
+                                    <option value="" selected="selected" disabled>風格</option>
+                                    <option value="all-style">不拘</option>
+                                    <option value="modern-style">現代風</option>
+                                    <option value="nordic-style">北歐風</option>
+                                    <option value="industry-style">工業風</option>
+                                    <option value="american-style">美式風</option>
+                                    <option value="leisure-style">休閒多元風</option>
+                                  </select>
+                                  <select name="image-space" id="image-space" class="col select">
+                                    <option value="" selected="selected" disabled>空間</option>
+                                    <option value="all-space">不拘</option>
+                                    <option value="living-space">客廳</option>
+                                    <option value="kitchen-space">廚房</option>
+                                    <option value="children-space">兒童房</option>
+                                    <option value="study-space">書房</option>
+                                    <option value="restaurant-space">餐廳</option>
+                                  </select>
+                                  <select name="image-area" id="image-area" class="col select">
+                                    <option value="" selected="selected" disabled>坪數</option>
+                                    <option value="all-area">不拘</option>
+                                    <option value="c20-area">20坪以下</option>
+                                    <option value="c21-area">21-30坪</option>
+                                    <option value="c31-area">31-50坪</option>
+                                    <option value="c51-area">51坪以上</option>
+                                  </select>
+                                  <button class="col image-search">送出</button>
+                                </div>
+                            </div>
+                            <div class="" id="pills-article-tab">
+                                <div class="tabpar tabpar__2">
+                                  <button class="col article-btn" onclick="window.open(`https://hhh.com.tw/columns/lists/editorchoose-columntypea/`);">編輯精選</button>
+                                  <button class="col article-btn" onclick="window.open(`https://m.hhh.com.tw/columns/lists/housedesign-columntypea/`);">居家設計</button>
+                                  <button class="col article-btn" onclick="window.open(`https://m.hhh.com.tw/columns/lists/decoration-columntypea/`);">裝修前線</button>
+                                </div>
+                            </div>
+                            <div class="" id="pills-case-tab">
+                                <div class="tabpar tabpar__3">
+                                  <select name="cases-type" id="cases-type" class="col select">
+                                    <option value="small-ctype">小坪數</option>
+                                    <option value="all-ctype">不拘</option>
+                                    <option value="standard-ctype">標準格局</option>
+                                    <option value="big-ctype">大坪數</option>
+                                    <option value="villa-ctype">別墅</option>
+                                    <option value="raisehigh-ctype">挑高樓層</option>
+                                    <option value="middle-ctype">樓中樓</option>
+                                    <option value="sample-ctype">實品／樣品屋</option>
+                                    <option value="workspace-ctype">工作空間</option>
+                                    <option value="commercial-ctype">商業空間</option>
+                                    <option value="homestay-ctype">民宿旅館</option>
+                                    <option value="dining-ctype">餐飲空間</option>
+                                    <option value="public-ctype">公共空間</option>
+                                  </select>
+                                  <select name="cases-condition" id="cases-condition" class="col select">
+                                    <option value="renovation-condition">老屋翻新</option>
+                                    <option value="all-condition">不拘</option>
+                                    <option value="new-condition">新成屋</option>
+                                    <option value="blanks-condition">毛胚屋</option>
+                                    <option value="selfbuilt-condition">自地自建</option>
+                                  </select>
+                                  <select name="case-shui" id="case-shui" class="col select">
+                                    <option value="" selected="selected" disabled>風水</option>
+                                    <option value="風水">風水</option>
+                                  </select>
+                                  <button class="col case-search">送出</button>
+                                </div>
+                          </div>
+                          <div class="" id="pills-designer-tab">
+                            <div class="tabpar tabpar__4">
+                              <select name="designer-city" id="designer-city" class="col select">
+                                <option value="" selected="selected" disabled>所在縣市</option>
+                                
+                              </select>
+                              <select name="designer-country" id="designer-country" class="col select">
+                                <option value="" selected="selected" disabled>所在地區</option>
+                                
+                              </select>
+                              <select name="designer-region" id="designer-region" class="col select">
+                                <option value="坪數" selected="selected" disabled>接案地區</option>
+                                <option value="all-region">不拘</option>
+                                <option value="north-region">北區</option>
+                                <option value="central-region">中區</option>
+                                <option value="south-region">南區</option>
+                                <option value="east-region">宜蘭花東</option>
+                                <option value="outlying-region">離島地區</option>
+                                <option value="overseas-region">海外地區</option>
+                              </select>
+                              <button class="col designer-search">送出</button>
+                            </div>
+                          </div>
+                          <div class="" id="pills-home-tab">
+                            <div class="tabpar tabpar__5">
+                              <button class="col home-btn" onclick="window.open(`https://hhh.com.tw/products/lists/furniture-pcategorya/1-page/new-sort`);">傢俱</button>
+                              <button class="col home-btn" onclick="window.open(`https://hhh.com.tw/products/lists/household-pcategorya/1-page/new-sort/`);">家電</button>
+                              <button class="col home-btn" onclick="window.open(`https://hhh.com.tw/products/lists/building-pcategorya/1-page/new-sort/`);">建材</button>
+                            </div>
+                          </div>
+                          <div class="" id="pills-news-tab">
+                            <div class="tabpar tabpar__6">
+                              <select name="news-city" id="news-city" class="col select">
+                                <option value="風格" selected="selected" disabled>所在縣市</option>
+                                <option value="100-citys">台北市</option>
+                                <option value="101-citys">新北市</option>
+                                <option value="102-citys">基隆市</option>
+                                <option value="103-citys">桃園市</option>
+                                <option value="104-citys">新竹縣</option>
+                                <option value="105-citys">新竹市</option>
+                                <option value="107-citys">台中市</option>
+                              </select>
+                              <select name="news-types" id="news-types" class="col select">
+                                <option value="空間" selected="selected" disabled>類型</option>
+                                <option value="mrt-types">捷運宅</option>
+                                <option value="function-types">機能宅</option>
+                                <option value="king-types">帝王宅</option>
+                              </select>
+                              <button class="col news-search">送出</button>
+                            </div>
+                          </div>
+                          </div> 
+                        </div>
+                        <div class="text-center dropbox__hots"> 
+                          <strong class="dropbox__hots__title">熱搜關鍵字：</strong>
+                          <a class="dropbox__hots__link">小坪數</a>
+                          <a class="dropbox__hots__link">收納</a>
+                          <a class="dropbox__hots__link">軟裝佈置</a>
+                          <a class="dropbox__hots__link">幸福經紀人</a>
+                          <a class="dropbox__hots__link">承炫設計</a>
+                          <a class="dropbox__hots__link">風水</a>
+                          <a class="dropbox__hots__link">北歐風</a>
+                          <a class="dropbox__hots__link">周石設計</a>
+                        </div>
+                      </div>
+                    </div>
+                </div>
+                <div class="navbar-brand navbar-login ms-2 d-flex align-items-center">
+                    <a href="https://hhh.com.tw/login/index" class="navbar-login">登入 / 註冊</a>
+                </div>
+            </div>
+        </nav>
+        <section class="sec-match">
+          <h3 class="text-center my-5" style="font-size: 1.2rem;font-weight: 400;color: #707070;">依據你的需求，我們推薦以下案例和幾位設計師為您服務，<br>
+            請選擇您有興趣的設計師，設計師將會主動與留言聯繫您。</h3>
+          <div class="container">
+            <div class="row align-items-center py-3 justify-content-center text-center" style="border-bottom: 1px solid #B2B2B2;">
+              <div class="col">
+                <div class="sec-match__imgfr mx-auto"></div>
+                <!-- <img src="https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_244_01.jpg" alt=""> -->
+              </div>
+              <div class="col">
+                <div class="sec-match__designer mx-auto">
+                </div>
+              </div>
+              <div class="col">
+                <div style="width: 190px;" class="text-start mx-auto">
+                  <p>周明志 設計師</p>
+                  <p class="mb-2">春風時尚空間設計</p>
+                  <p>擅長風格 現代風 </p>
+                  <p>接案坪數 20～30坪</p>
+                  <p>接案地區 台北 新北 </p>
+                </div>
+              </div>
+              <div class="col">
+                <p>15 人正在諮詢</p>
+              </div>
+              <div class="col">
+                <button class="btn-match">我有興趣</button>
+              </div>
+            </div>
+            <div class="row align-items-center py-3 justify-content-center text-center" style="border-bottom: 1px solid #B2B2B2;">
+              <div class="col">
+                <div class="sec-match__imgfr mx-auto"></div>
+                <!-- <img src="https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_244_01.jpg" alt=""> -->
+              </div>
+              <div class="col">
+                <div class="sec-match__designer mx-auto">
+                </div>
+              </div>
+              <div class="col">
+                <div style="width: 190px;" class="text-start mx-auto">
+                  <p>周明志 設計師</p>
+                  <p class="mb-2">春風時尚空間設計</p>
+                  <p>擅長風格 現代風 </p>
+                  <p>接案坪數 20～30坪</p>
+                  <p>接案地區 台北 新北 </p>
+                </div>
+              </div>
+              <div class="col">
+                <p>15 人正在諮詢</p>
+              </div>
+              <div class="col">
+                <button class="btn-match">我有興趣</button>
+              </div>
+            </div>
+            <div class="row align-items-center py-3 justify-content-center text-center">
+              <div class="col">
+                <div class="sec-match__imgfr mx-auto"></div>
+                <!-- <img src="https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_244_01.jpg" alt=""> -->
+              </div>
+              <div class="col">
+                <div class="sec-match__designer mx-auto">
+                </div>
+              </div>
+              <div class="col">
+                <div style="width: 190px;" class="text-start mx-auto">
+                  <p>周明志 設計師</p>
+                  <p class="mb-2">春風時尚空間設計</p>
+                  <p>擅長風格 現代風 </p>
+                  <p>接案坪數 20～30坪</p>
+                  <p>接案地區 台北 新北 </p>
+                </div>
+              </div>
+              <div class="col">
+                <p>15 人正在諮詢</p>
+              </div>
+              <div class="col">
+                <button class="btn-match">我有興趣</button>
+              </div>
+            </div>
+          </div>
+          <div class="d-flex justify-content-center align-items-center mb-5">
+            <p>想找免費顧問來幫你嗎？請撥打<span style="color: #EA068C;">0800-366-086</span>！</p>
+            <a class="btn-call" href="tel:0800-366-086">立即撥打</a>
+          </div>
+        </section>
+        <footer class="footer">
+            <div class="container" style="margin:0 auto;">
+                <div class="row">
+                    <div class="col footer__block">
+                        <h4 class="footer__block-title">相關連結</h4>
+                        <ul class="footer__block-list">
+                            <li><a class="footer__list-item" href="http://gstv.com.tw/" target="_blank">
+                                <div class="footer__list-icon"><img src="images/menu/tv.svg" alt=""></div>
+                                <p>幸福空間居家台</p>
+                            </a></li>
+                            <li><a class="footer__list-item" href="https://event.hhh.com.tw/contest/2018/" target="_blank">
+                                <div class="footer__list-icon"><img src="images/menu/prize.svg" alt=""></div>
+                                <p>ADA 亞洲設計獎</p>
+                            </a></li>
+                            <li><a class="footer__list-item" href="https://event.hhh.com.tw/2019global-award/" target="_blank">
+                                <div class="footer__list-icon"><img src="images/menu/champion.svg" alt=""></div>
+                                <p>國際設計大獎代辦</p>
+                            </a></li>
+                            <li><a class="footer__list-item" href="https://www.leju.com.tw/" target="_blank">
+                                <div class="footer__list-icon"><img data-src="images/menu/Image 1@2x.png" alt="" width="20" class="lazyload"></div>
+                                <p>樂居網</p>
+                            </a></li>
+                            <li><a class="footer__list-item" href="https://shop.hhh.com.tw/" target="_blank">
+                                <div class="footer__list-icon"><img src="images/menu/cart.svg" alt=""></div>
+                                <p>+好物</p>
+                            </a></li>
+                        </ul>
+                    </div>
+                    <div class="col footer__block">
+                        <h4 class="footer__block-title">相關社群</h4>
+                        <div class="d-flex flex-column justify-content-center">
+                            <ul class="footer__block-socials">
+                                <li><a href="https://www.facebook.com/hhhfb"><img src="images/menu/fb.svg" alt="" class="d-inline-block"></a></li>
+                                <li><a href="https://line.me/ti/p/%40ovs4341s"><img src="images/menu/line.svg" alt="" class="d-inline-block"></a></li>
+                                <li><a href="https://www.youtube.com/user/gorgeousspace"><img src="images/menu/youtube.svg" alt="" class="d-inline-block"></a></li>
+                                <li><a href="https://www.instagram.com/gorgeous_space/"><img data-src="images/menu/instagram@2x.png" width="43" alt="" class="d-inline-block lazyload"></a></li>
+                                <li><a href=""><img src="images/menu/pinterest.svg" alt="" class="d-inline-block"></a></li>
+                            </ul>
+                            <div class="py-4 text-center d-flex justify-content-center">
+                                <a href="https://www.facebook.com/agent.hhh.com.tw" class="follows-fp me-2"><img src="images/menu/fb.svg" alt="" width="20" class="d-inline-block me-2"><p>幸福經紀人</p></a>
+                                <a href="https://www.facebook.com/retire.tw/" class="follows-fp ms-2"><img src="images/menu/fb.svg" alt="" width="20" class="d-inline-block me-2"><p>退休好幸福</p></a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col footer__block d-flex flex-column justify-content-center align-items-center">
+                        <div class="footer__block-phone">
+                            <p>幸福經紀人免付費諮詢電話</p><span class="ms-2"><a class="text-phone" href="tel:0800-366-086">0800-366-086</a></span></a>
+                        </div>
+                        <div class="footer__block-links">
+                            <div class="footer__block-links-grp">
+                                <a href="https://m.hhh.com.tw/about/contact/">關於我們</a>
+                                <a href="https://m.hhh.com.tw/about/timeline/">公司歷程</a>
+                            </div>
+                            <div class="footer__block-links-grp">
+                                <a href="https://m.hhh.com.tw/about/privacy_policy/">隱私保護</a>
+                                <a href="https://www.104.com.tw/company/d6hr8sg">企業徵才</a>
+                            </div>
+                            <div class="footer__block-links-grp">
+                                <a href="https://m.hhh.com.tw/about/contact/">聯絡我們</a>
+                                <a href="https://m.hhh.com.tw/about/sitemap/">網站地圖</a>
+                            </div>
+                        </div>
+                        <!-- <div class="footer__block-subscribe">
+                            <input type="text" name="searchQuery" class="subscribeBar p-2" placeholder="訂閱電子報，請輸入您的Email">
+                            <button type="button" class="subscribeBtn">訂閱</button>
+                        </div> -->
+                    </div>
+                </div>
+            </div>
+            <div class="container-fluid bottom-box">
+
+            </div>
+        </footer>
+          <div class="fixed-btn">
+            <!-- <div class="btn-favor mb-2" data-bs-toggle="modal" data-bs-target="#favorModal">
+              <img src="images/gotop.png" width="28" alt="">
+            </div>
+            <div class="btn-login mb-2" data-bs-toggle="modal" data-bs-target="#loginModal">
+              <img src="images/gotop.png" width="28" alt="">
+            </div> -->
+            
+            <div class="btn-gotop">
+              <img data-src="images/gotop.webp" width="28" alt="" class="lazyload">
+            </div>
+            
+          </div>
+          <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered">
+              <div class="modal-content">
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                  <div class="container-fluid sec-login-block px-0">
+                    <div class="sec-login-list w-100">
+                      <h4 class="sec- text-center">快速媒合設計師</h4>
+                      <h6 class="sec- text-center"></h6>
+                      <hr>
+                      <div class="sec-login-btns">
+                      </div>
+                    </div>
+                  </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal fade" id="matchModal" tabindex="-1" aria-labelledby="matchModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered">
+              <div class="modal-content">
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                  <div class="container-fluid sec-login-block px-0">
+                    <div class="sec-login-list w-100">
+                      <h4 class="sec- text-center">快速媒合設計師</h4>
+                      <h6 class="sec- text-center">請填寫您的裝修資訊</h6>
+                      <div class="container container_match">
+                        <div class="row text-center">
+                          <div class="col-5" style="padding : 2rem 0;">
+                            <label for="area">房屋地區</label>
+                          </div>
+                          <div class="col-7" style="padding : 2rem 0;">
+                            <select name="area" id="area" class="form-select">
+                              <option value="" disabled selected>請選擇房屋地區</option>
+                            </select>
+                          </div>
+                          <div class="col-5" style="padding : 2rem 0;">
+                            <label for="type">房屋類型</label>
+                          </div>
+                          <div class="col-7" style="padding : 2rem 0;">
+                            <select name="type" id="type" class="form-select">
+                              <option value="" disabled selected>請選擇房屋類型</option>
+                            </select>
+                          </div>
+                          <div class="col-5" style="padding : 2rem 0;">
+                            <label for="square">房屋坪數</label>
+                          </div>
+                          <div class="col-7" style="padding : 2rem 0;">
+                            <select name="square" id="square" class="form-select">
+                              <option value="" disabled selected>請選擇房屋坪數</option>
+                            </select>
+                          </div>
+                          <div class="col-5" style="padding : 2rem 0;">
+                            <label for="pattern">房屋格局</label>
+                          </div>
+                          <div class="col-7" style="padding : 2rem 0;">
+                            <select name="pattern" id="pattern" class="form-select">
+                              <option value="" disabled selected>請選擇房屋格局</option>
+                            </select>
+                          </div>
+                          <div class="col-5" style="padding : 2rem 0;">
+                            <label for="style">喜愛風格</label>
+                          </div>
+                          <div class="col-7" style="padding : 2rem 0;">
+                            <select name="style" id="style" class="form-select">
+                              <option value="" disabled selected>請選擇喜愛風格</option>
+                            </select>
+                          </div>
+                        </div>
+                        <div class="row">
+                          <button class="match__next mx-auto d-inline-block col-6">下一步</button>
+                        </div>
+                      </div>
+                      <div class="container container_match2">
+                        <div class="row text-center">
+                          <div class="col-5" style="padding : 2rem 0;">
+                            <label for="area">姓名</label>
+                          </div>
+                          <div class="col-7" style="padding : 2rem 0;">
+                            <input type="text" class="form-control">
+                          </div>
+                          <div class="col-5" style="padding : 2rem 0;">
+                            <label for="type">電話</label>
+                          </div>
+                          <div class="col-7" style="padding : 2rem 0;">
+                            <input type="text" class="form-control">
+                          </div>
+                          <div class="col-5" style="padding : 2rem 0;">
+                            <label for="square">性別</label>
+                          </div>
+                          <div class="col-7" style="padding : 2rem 0;">
+                            <select name="square" id="square" class="form-select">
+                              <option value="" disabled selected>請選擇性別</option>
+                              <option value="男">男</option>
+                              <option value="女">女</option>
+                            </select>
+                          </div>
+                          <div class="col-5" style="padding : 2rem 0;">
+                            <label for="pattern">方便聯絡時間</label>
+                          </div>
+                          <div class="col-7 d-flex flex-column align-items-center text-start" style="padding : 2rem 0;">
+                            <div style="width: 60%;" class="form-check">
+                              <input type="checkbox" value="隨時皆可" name="time" id="2a" checked class="form-check-input"/>
+                              <label for="2a">
+                                <p>隨時皆可</p>
+                              </label>
+                            </div>
+                            <div style="width: 60%;" class="form-check">
+                              <input type="checkbox" value="上午9點至12點" name="time" id="2b" class="form-check-input"/>
+                              <label  for="2b">
+                                <p>上午9點至12點</p>
+                              </label>
+                            </div>
+                            <div style="width: 60%;" class="form-check">
+                              <input type="checkbox" value="中午12點至1點" name="time" id="2c" class="form-check-input"/>
+                              <label  for="2c">
+                                <p>中午12點至1點</p>
+                              </label>
+                            </div>
+                            <div style="width: 60%;" class="form-check">
+                              <input type="checkbox" value="下午1點至6點" name="time" id="2a" class="form-check-input"/>
+                              <label  for="2a">
+                                <p>下午1點至6點</p>
+                              </label>
+                            </div>
+                            <div style="width: 60%;" class="form-check">
+                              <input type="checkbox" value="晚上6點至9點" name="time" id="2b" class="form-check-input" />
+                              <label  for="2b">
+                                <p>晚上6點至9點</p>
+                              </label>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="row mb-3">
+                          <button class="match__next2 mx-auto d-inline-block col-6">送出</button>
+                        </div>
+                        <div class="form-check">
+                          <input type="checkbox" id="readPolicy" class="form-check-input" checked>
+                          <label for="readPolicy" class="custom-control-label">同意 
+                            <a href="/about/privacy_policy" target="_blank">免責聲明與隱私使用政策</a>
+                          </label>
+                        </div>
+                        <div class="form-check">
+                          <input type="checkbox" id="readPolicy" class="form-check-input">
+                          <label for="readPolicy" class="custom-control-label"> 
+                            裝潢貸款享超長7年還款期，最低利率2.59%起
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal fade" id="match2Modal" tabindex="-1" aria-labelledby="match2ModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered">
+              <div class="modal-content">
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                  <div class="container-fluid sec-login-block px-0">
+                    <div class="sec-login-list w-100">
+                      <h4 class="sec- text-center">快速媒合設計師</h4>
+                      <h6 class="sec- text-center">請填寫您的裝修資訊</h6>
+                      <div class="container container_match2">
+                        <div class="row text-center">
+                          <div class="col-5" style="padding : 2rem 0;">
+                            <label for="area">姓名</label>
+                          </div>
+                          <div class="col-7" style="padding : 2rem 0;">
+                            <input type="text">
+                          </div>
+                          <div class="col-5" style="padding : 2rem 0;">
+                            <label for="type">電話</label>
+                          </div>
+                          <div class="col-7" style="padding : 2rem 0;">
+                            <input type="text">
+                          </div>
+                          <div class="col-5" style="padding : 2rem 0;">
+                            <label for="square">性別</label>
+                          </div>
+                          <div class="col-7" style="padding : 2rem 0;">
+                            <select name="square" id="square">
+                              <option value="" disabled selected>請選擇性別</option>
+                              <option value="男">男</option>
+                              <option value="女">女</option>
+                            </select>
+                          </div>
+                          <div class="col-5" style="padding : 2rem 0;">
+                            <label for="pattern">方便聯絡時間</label>
+                          </div>
+                          <div class="col-7 d-flex flex-column align-items-center text-start" style="padding : 2rem 0;">
+                            <div style="width: 60%;">
+                              <input type="checkbox" value="隨時皆可" name="time" id="2a" checked/>
+                              <label for="2a">
+                                <p>隨時皆可</p>
+                              </label>
+                            </div>
+                            <div style="width: 60%;">
+                              <input type="checkbox" value="上午9點至12點" name="time" id="2b" />
+                              <label  for="2b">
+                                <p>上午9點至12點</p>
+                              </label>
+                            </div>
+                            <div style="width: 60%;">
+                              <input type="checkbox" value="中午12點至1點" name="time" id="2c" />
+                              <label  for="2c">
+                                <p>中午12點至1點</p>
+                              </label>
+                            </div>
+                            <div style="width: 60%;">
+                              <input type="checkbox" value="下午1點至6點" name="time" id="2a"/>
+                              <label  for="2a">
+                                <p>下午1點至6點</p>
+                              </label>
+                            </div>
+                            <div style="width: 60%;">
+                              <input type="checkbox" value="晚上6點至9點" name="time" id="2b" />
+                              <label  for="2b">
+                                <p>晚上6點至9點</p>
+                              </label>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="row mb-3">
+                          <button class="match__next mx-auto d-inline-block col-6">送出</button>
+                        </div>
+                        <div class="custom-control custom-checkbox">
+                          <input type="checkbox" id="readPolicy" class="custom-control-input" checked>
+                          <label for="readPolicy" class="custom-control-label">同意 
+                            <a href="/about/privacy_policy" target="_blank">免責聲明與隱私使用政策</a>
+                          </label>
+                        </div>
+                        <div class="custom-control custom-checkbox">
+                          <input type="checkbox" id="readPolicy" class="custom-control-input">
+                          <label for="readPolicy" class="custom-control-label"> 
+                            裝潢貸款享超長7年還款期，最低利率2.59%起
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal fade" id="favorModal" tabindex="-1" aria-labelledby="favorModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered">
+              <div class="modal-content">
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                <div class="container-fluid sec-favor-block px-0">
+                  <div class="sec-favor-list w-100">
+                    <h4 class="sec-favor-title text-center">我的喜好</h4>
+                    <hr>
+                    <div class="sec-favor-form">
+                      <form action="" method="" id="msform">
+                        <div class="d-flex justify-content-between align-items">
+                          <div class="form-user">Hi 陳喬治</div>
+                          <ul class="p-0 form-progressbar">
+                            <li class="active">1</li>
+                            <li>2</li>
+                            <li>3</li>
+                          </ul>
+                        </div>
+                        <fieldset class="form-step form-step1 text-center">
+                          <div style="position: relative;">
+                          <h4 class="mb-3">請選擇設計風格 / 多選</h4>
+                          <div class="row mb-2">
+                            <input type="checkbox" value="北歐風" name="q1" id="1a" checked/>
+                            <label class="col-4 mr fs-label-info text-center" for="1a">
+                              <div class="imgfr mb-1"></div>
+                              <p>北歐風</p>
+                            </label>
+                            <input type="checkbox" value="現代風" name="q1" id="1b" />
+                            <label class="col-4 mr fs-label-info text-center" for="1b">
+                              <div class="imgfr mb-1"></div>
+                              <p>現代風</p>
+                            </label>
+                            <input type="checkbox" value="工業風" name="q1" id="1c" />
+                            <label class="col-4 mr fs-label-info text-center" for="1c">
+                              <div class="imgfr mb-1"></div>
+                              <p>工業風</p>
+                            </label>
+                          </div>
+                          <div class="row mb-2">
+                            <input type="checkbox" value="美式風" name="q1" id="1d" />
+                            <label class="col-4 mr fs-label-info text-center" for="1d">
+                              <div class="imgfr mb-1"></div>
+                              <p>美式風</p>
+                            </label>
+                            <input type="checkbox" value="鄉村風" name="q1" id="1e" />
+                            <label class="col-4 mr fs-label-info text-center" for="1e">
+                              <div class="imgfr mb-1"></div>
+                              <p>鄉村風</p>
+                            </label>
+                            <input type="checkbox" value="古典風" name="q1" id="1f" />
+                            <label class="col-4 mr fs-label-info text-center" for="1f">
+                              <div class="imgfr mb-1"></div>
+                              <p>古典風</p>
+                            </label>
+                          </div>
+                          <div class="row mb-2">
+                            <input type="checkbox" value="新古典風" name="q1" id="1g" />
+                            <label class="col-4 mr fs-label-info text-center" for="1g">
+                              <div class="imgfr mb-1"></div>
+                              <p>新古典風</p>
+                            </label>
+                            <input type="checkbox" value="休閒多元" name="q1" id="1h" />
+                            <label class="col-4 mr fs-label-info text-center" for="1h">
+                              <div class="imgfr mb-1"></div>
+                              <p>休閒多元</p>
+                            </label>
+                            <input type="checkbox" value="其他" name="q1" id="1i" />
+                            <label class="col-4 mr fs-label-info text-center" for="1i">
+                              <div class="imgfr mb-1"></div>
+                              <p>其他</p>
+                            </label>
+                          </div>
+                          <input class="next" type="button" value="下一步">
+                        </div>
+                        </fieldset>
+                        <fieldset class="form-step form-step2 text-center">
+                          <div style="">
+                          <h4 class="mb-3">請選擇喜歡的居家空間 / 多選</h4>
+                          <div class="row mb-2">
+                            <input type="checkbox" value="北歐風" name="q2" id="2a" checked/>
+                            <label class="col-4 mr fs-label-info text-center" for="2a">
+                              <div class="imgfr mb-1"></div>
+                              <p>客廳</p>
+                            </label>
+                            <input type="checkbox" value="現代風" name="q2" id="2b" />
+                            <label class="col-4 mr fs-label-info text-center" for="2b">
+                              <div class="imgfr mb-1"></div>
+                              <p>餐廳</p>
+                            </label>
+                            <input type="checkbox" value="工業風" name="q2" id="2c" />
+                            <label class="col-4 mr fs-label-info text-center" for="2c">
+                              <div class="imgfr mb-1"></div>
+                              <p>臥室</p>
+                            </label>
+                          </div>
+                          <div class="row mb-2">
+                            <input type="checkbox" value="美式風" name="q2" id="2d" />
+                            <label class="col-4 mr fs-label-info text-center" for="2d">
+                              <div class="imgfr mb-1"></div>
+                              <p>廚房</p>
+                            </label>
+                            <input type="checkbox" value="鄉村風" name="q2" id="2e" />
+                            <label class="col-4 mr fs-label-info text-center" for="2e">
+                              <div class="imgfr mb-1"></div>
+                              <p>浴室</p>
+                            </label>
+                            <input type="checkbox" value="古典風" name="q2" id="2f" />
+                            <label class="col-4 mr fs-label-info text-center" for="2f">
+                              <div class="imgfr mb-1"></div>
+                              <p>玄關</p>
+                            </label>
+                          </div>
+                          <div class="row mb-2">
+                            <input type="checkbox" value="新古典風" name="q2" id="2g" />
+                            <label class="col-4 mr fs-label-info text-center" for="2g">
+                              <div class="imgfr mb-1"></div>
+                              <p>兒童房</p>
+                            </label>
+                            <input type="checkbox" value="休閒多元" name="q2" id="2h" />
+                            <label class="col-4 mr fs-label-info text-center" for="2h">
+                              <div class="imgfr mb-1"></div>
+                              <p>陽台</p>
+                            </label>
+                            <input type="checkbox" value="其他" name="q1" id="2i" />
+                            <label class="col-4 mr fs-label-info text-center" for="2i">
+                              <div class="imgfr mb-1"></div>
+                              <p>其他</p>
+                            </label>
+                          </div>
+                          <input class="next" type="button" value="下一步">
+                          </div>
+                        </fieldset>
+                        <fieldset class="form-step form-step3 text-center">
+                          <h4 class="mb-3 text-center">請選擇以下條件</h4>
+                          <div class="step3-block text-start">
+                            <span class="step3-block-title">房屋坪數 / 單選</span>
+                            <input type="radio" value="20坪以下" name="q3" id="3a" />
+                            <label class="mr fs-label-chbox radio" for="3a">20坪以下</label>
+                            <input type="radio" value="20~30坪" name="q3" id="3b" />
+                            <label class="mr fs-label-chbox radio" for="3b">20~30坪</label>
+                            <input type="radio" value="30~40坪" name="q3" id="3c" />
+                            <label class="mr fs-label-chbox radio" for="3c">31~50坪</label>
+                            <input type="radio" value="50坪以上" name="q3" id="3e" />
+                            <label class="mr fs-label-chbox radio" for="3e">50坪以上</label>
+                          </div>
+                          <div class="step3-block text-start">
+                            <span class="step3-block-title text-left">房屋預算 / 單選</span>
+                            <input type="radio" value="20坪以下" name="q4" id="4a" />
+                            <label class="mr fs-label-chbox radio" for="4a">100萬以下</label>
+                            <input type="radio" value="20~30坪" name="q4" id="4b" />
+                            <label class="mr fs-label-chbox radio" for="4b">101~200萬</label>
+                            <input type="radio" value="30~40坪" name="q4" id="4c" />
+                            <label class="mr fs-label-chbox radio" for="4c">201~300萬</label>
+                            <input type="radio" value="50坪以上" name="q4" id="4e" />
+                            <label class="mr fs-label-chbox radio" for="4e">301萬以上</label>
+                          </div>
+                          <div class="step3-block text-start">
+                            <span class="step3-block-title text-left">裝修屋況 / 單選</span>
+          
+                            <input type="radio" value="20坪以下" name="q5" id="5a" />
+                            <label class="mr fs-label-chbox radio" for="5a">新成屋</label>
+                            <input type="radio" value="20~30坪" name="q5" id="5b" />
+                            <label class="mr fs-label-chbox radio" for="5b">中古屋</label>
+                            <input type="radio" value="30~40坪" name="q5" id="5c" />
+                            <label class="mr fs-label-chbox radio" for="5c">毛胚屋</label>
+                            <input type="radio" value="50坪以上" name="q5" id="5d" />
+                            <label class="mr fs-label-chbox radio" for="5d">老屋翻新</label>
+                            <input type="radio" value="50坪以上" name="q5" id="5e" />
+                            <label class="mr fs-label-chbox radio" for="5e">自地自建</label>
+                          </div>
+                          <div class="btngrp text-center">
+                            <input class="skip d-block mb-2" type="button" value="略過">
+                            <input class="next d-block" type="button" value="下一步">
+                          </div>
+                        </fieldset>
+                      </form>
+                    </div>
+                    <div class="sec-favor-checklist d-none">
+                      <form action="" method="">
+                        <div class="form-user">Hi 陳喬治</div>
+                        <fieldset class="form-step text-center">
+                          <h4 class="mb-3 text-center">請選擇以下條件</h4>
+                          <div class="step3-block text-start">
+                            <span class="step3-block-title">設計風格 / 多選</span>
+          
+                            <input type="checkbox" value="20坪以下" name="style" id="north" />
+                            <label class="mr fs-label-chbox radio" for="north">北歐風</label>
+                            <input type="checkbox" value="20~30坪" name="style" id="modern" />
+                            <label class="mr fs-label-chbox radio" for="modern">現代風</label>
+                            <input type="checkbox" value="30~40坪" name="style" id="indust" />
+                            <label class="mr fs-label-chbox radio" for="indust">工業風</label>
+                            <input type="checkbox" value="50坪以上" name="style" id="usa" />
+                            <label class="mr fs-label-chbox radio" for="usa">美式風</label>
+                            <input type="checkbox" value="50坪以上" name="style" id="casual" />
+                            <label class="mr fs-label-chbox radio" for="casual">休閒多元</label>
+                            <input type="checkbox" value="50坪以上" name="style" id="country" />
+                            <label class="mr fs-label-chbox radio" for="country">鄉村風</label>
+                            <input type="checkbox" value="50坪以上" name="style" id="old" />
+                            <label class="mr fs-label-chbox radio" for="old">古典風</label>
+                            <input type="checkbox" value="50坪以上" name="style" id="other" />
+                            <label class="mr fs-label-chbox radio" for="other">其他</label>
+                          </div>
+                          <div class="step3-block text-start mb-3">
+                            <span class="step3-block-title">喜歡的居家空間 / 多選</span>
+          
+                            <input type="checkbox" value="20坪以下" name="space" id="salon" />
+                            <label class="mr fs-label-chbox radio" for="salon">客廳</label>
+                            <input type="checkbox" value="20~30坪" name="space" id="restaurant" />
+                            <label class="mr fs-label-chbox radio" for="restaurant">餐廳</label>
+                            <input type="checkbox" value="30~40坪" name="space" id="bedroom" />
+                            <label class="mr fs-label-chbox radio" for="bedroom">臥室</label>
+                            <input type="checkbox" value="50坪以上" name="space" id="kitchen" />
+                            <label class="mr fs-label-chbox radio" for="kitchen">廚房</label>
+                            <input type="checkbox" value="50坪以上" name="space" id="bathroom" />
+                            <label class="mr fs-label-chbox radio" for="bathroom">浴室</label>
+                            <input type="checkbox" value="50坪以上" name="space" id="porch" />
+                            <label class="mr fs-label-chbox radio" for="porch">玄關</label>
+                            <input type="checkbox" value="50坪以上" name="space" id="childroom" />
+                            <label class="mr fs-label-chbox radio" for="childroom">兒童房</label>
+                            <input type="checkbox" value="50坪以上" name="space" id="balcony" />
+                            <label class="mr fs-label-chbox radio" for="balcony">陽台</label>
+                            <input type="checkbox" value="50坪以上" name="space" id="others" />
+                            <label class="mr fs-label-chbox radio" for="others">其他</label>
+                          </div>
+                          <div class="step3-block text-start">
+                            <span class="step3-block-title">房屋坪數 / 單選</span>
+          
+                            <input type="radio" value="20坪以下" name="feet" id="below20" />
+                            <label class="mr fs-label-chbox radio" for="below20">20坪以下</label>
+                            <input type="radio" value="20~30坪" name="feet" id="20to30" />
+                            <label class="mr fs-label-chbox radio" for="20to30">20~30坪</label>
+                            <input type="radio" value="30~40坪" name="feet" id="30to50" />
+                            <label class="mr fs-label-chbox radio" for="30to50">31~50坪</label>
+                            <input type="radio" value="50坪以上" name="feet" id="above50" />
+                            <label class="mr fs-label-chbox radio" for="above50">50坪以上</label>
+                          </div>
+                          <div class="step3-block text-start">
+                            <span class="step3-block-title text-left">房屋預算 / 多選</span>
+                            <input type="checkbox" value="20坪以下" name="budget" id="below1m" />
+                            <label class="mr fs-label-chbox radio" for="below1m">100萬以下</label>
+                            <input type="checkbox" value="20~30坪" name="budget" id="100to200" />
+                            <label class="mr fs-label-chbox radio" for="100to200">101~200萬</label>
+                            <input type="checkbox" value="30~40坪" name="budget" id="200to300" />
+                            <label class="mr fs-label-chbox radio" for="200to300">201~300萬</label>
+                            <input type="checkbox" value="50坪以上" name="budget" id="300up" />
+                            <label class="mr fs-label-chbox radio" for="300up">301萬以上</label>
+                          </div>
+                          <div class="step3-block text-start">
+                            <span class="step3-block-title text-left">裝修屋況 / 單選</span>
+          
+                            <input type="radio" value="20坪以下" name="condition" id="new" />
+                            <label class="mr fs-label-chbox radio" for="new">新成屋</label>
+                            <input type="radio" value="20~30坪" name="condition" id="aged" />
+                            <label class="mr fs-label-chbox radio" for="aged">中古屋</label>
+                            <input type="radio" value="30~40坪" name="condition" id="unfinished" />
+                            <label class="mr fs-label-chbox radio" for="unfinished">毛胚屋</label>
+                            <input type="radio" value="50坪以上" name="condition" id="refurbish" />
+                            <label class="mr fs-label-chbox radio" for="refurbish">老屋翻新</label>
+                            <input type="radio" value="50坪以上" name="condition" id="selfown" />
+                            <label class="mr fs-label-chbox radio" for="selfown">自地自建</label>
+                          </div>
+                          <div class="btngrp text-center">
+                            <input class="next d-block mb-3" type="button" value="下一步">
+                          </div>
+                        </fieldset>
+                      </form>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+    </div>
+    <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>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+    <script async defer src="js/index_match.js"></script>
+    <script src="js/lazy-load.js" async></script>
+</body>
+
+</html>

js/index-list.js

@@ -0,0 +1,24 @@
+let over = document.querySelector('.infoContent .tab-content').offsetHeight+100;
+window.addEventListener('scroll', fixedOnOver);
+    
+const navCollapse = document.querySelector('#nav-collapse');
+    
+function fixedOnOver() {
+    if(window.pageYOffset >= over){
+      navCollapse.classList.add('sticky');
+    } else {
+      navCollapse.classList.remove('sticky');
+    }
+}
+
+checkTab()
+$('.infoContent .nav-item-link').click(checkTab);
+
+function checkTab() {
+  if($('#pills-intro-tab').hasClass('active')) {
+    $('.likeSee').attr('hidden', false)
+  } else {
+    $('.likeSee').attr('hidden', true)
+  }
+}
+

js/index.js

@@ -91,9 +91,9 @@ function detectBrowser(agent){
         let str = '';
         for(let i = 0; i < data.length; i++){
             if(data[i]['Dwebp'] && !isSafari) {
-                str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['Dwebp']}');" data-bg="${data[i]['Dwebp']}"></div>`
+                str+= `<img class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['Dwebp']}');" data-bg="${data[i]['Dwebp']}"></img>`
             } else {
-                str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['DimgUrl']}');" data-bg="${data[i]['DimgUrl']}"></div>`
+                str+= `<img class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['DimgUrl']}');" data-bg="${data[i]['DimgUrl']}"></img>`
             }
             
         }
@@ -395,12 +395,13 @@ function tab2 () {
 tab2();
 
 let sticky = document.querySelector('.sec-00').offsetHeight;
+console.log(sticky);
 window.addEventListener('scroll', fixedOnScroll);
     
 const navbar = document.querySelector('.navbar-main');
     
 function fixedOnScroll() {
-    if(window.pageYOffset >= sticky){
+    if(window.pageYOffset >= 344){
         navbar.classList.add('sticky');
     } else {
         navbar.classList.remove('sticky');
@@ -531,6 +532,24 @@ document.addEventListener('lazybeforeunveil', function(e){
     }
 });
 
+$('.container_match2').hide();
+$('.match__next').click(function() {
+    $('.container_match').fadeOut(0);
+    $('.container_match2').fadeIn(500);
+    $('.last-step').show();
+});
+
+$('.last-step').hide();
+
+$('.match__next2').click(function() {
+    window.open('./index_match.html');
+})
+
+$('.last-step').click(function() {
+    $('.container_match').fadeIn(500);
+    $('.container_match2').fadeOut(0);
+    $('.last-step').hide();
+});
 // city result
 let cityResult;
 $.ajax({

js/index_match.js

@@ -0,0 +1,624 @@
+let userAgent;
+let isSafari = false;
+let browserName;
+window.onload = function(){
+    if(screen.width < 900){
+        window.location.href = "https://m3.hhh.com.tw/";   
+    }
+    userAgent = navigator.userAgent;
+    detectBrowser(userAgent);
+    detectDirection ();
+    let result;
+      $.ajax({
+          method: "GET",
+          url: "./json/realtime.json",
+          dataType: "json",
+      }).done(function (msg) {
+          result = [...msg];
+          renderSec00(result);
+          renderSec02(result);
+          renderSec05(result);
+          renderSec06(result);
+          renderSec07(result);
+          renderSec08(result);
+          renderSec09(result);
+          renderSec10(result);
+          //renderSec11(result);
+          renderVideo(result);
+          renderTrending(result);
+      });
+}
+  
+
+function detectDirection () {
+    let height = (window.screen.width * 5) / 12;
+    console.log(height);
+    $('.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;
+    }
+    console.log(isSafari);
+  }
+
+
+
+    function renderSec00(data) {
+        let temp = data[0]['data'];
+        renderBannerStr('sec-00__slider', temp);
+        $(".sec-00__slider").slick({
+            dots: false,
+            speed: 800,
+            autoplay: true,
+            autoplaySpeed: 5000,
+            arrows: true,
+            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>'
+        });
+    }
+
+    function renderSec02(data) {
+        let temp = data[1]['data'];
+        renderBannerStr('sec-02__slider', temp);
+        $(".sec-02__slider").slick({
+            dots: false,
+            autoplay: true,
+            arrows: true,
+            fade: true,
+            autoplaySpeed: 4000,
+            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 33px;color: white;transform: translateY(-10px);"></i></button>',
+            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 33px;color: white;transform: translateY(-10px);"></i></button>'
+        });
+    }
+
+    function renderBannerStr(sec, data) {
+        let str = '';
+        for(let i = 0; i < data.length; i++){
+            if(data[i]['Dwebp'] && !isSafari) {
+                str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['Dwebp']}');" data-bg="${data[i]['Dwebp']}"></div>`
+            } else {
+                str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['DimgUrl']}');" data-bg="${data[i]['DimgUrl']}"></div>`
+            }
+            
+        }
+        $(`.${sec}`).html(str);
+    }
+
+    function renderSec05(data) {
+        let randomIdx = Math.floor(Math.random()*3);
+        const ran = $('.sec-05__tabdiv .nav-pills li').eq(randomIdx);
+        const ranDiv = $('.sec-05tab-content>div').eq(randomIdx);
+        $('.sec-05tab-content>div').hide();
+        ranDiv.show();
+        ran.addClass('active');
+        ran.children().addClass('active');
+        $('.sec-05 .morelink').attr('href', $('.sec-05__tabdiv .nav-item-link.active').data('link'));
+          let temp = data[2]['data'];
+          for(let i = 0; i < temp.length; i++){
+            if(temp[i]["tab"] == '最夯設計'){
+              let str = '';
+              let sub = temp[i]["data"];
+              for(let j = 0; j < sub.length; j++){
+                str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
+                    <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"></div>
+                    <h5 class="mb-2 me-2">${sub[j]['title']}</h5>
+                    <p class="mt-2">${sub[j]['description']}</p>
+                </div>`;
+              }
+              $('#pills-hot-tab .tabpar').html(str);
+            }
+            if(temp[i]["tab"] == '影音實錄'){
+              let str = '';
+              let sub = temp[i]["data"];
+              for(let j = 0; j < sub.length; j++){
+                str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
+                <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"><img data-src="images/Play-Button.webp" alt="" class="tabpar__card__play lazyload"></div>
+                <h5 class="mb-2  me-2">${sub[j]['title']}</h5>
+                <p class="mt-2">${sub[j]['description']}</p>
+            </div>`;
+              }
+              $('#pills-video-tab .tabpar').html(str);
+            }
+            if(temp[i]["tab"] == '專欄文章'){
+              let str = '';
+              let sub = temp[i]["data"];
+              for(let j = 0; j < sub.length; j++){
+                str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
+                <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"></div>
+                <h5 class="mb-2  me-2">${sub[j]['title']}</h5>
+                <p class="mt-2">${sub[j]['description']}</p>
+            </div>`;
+              }
+              $('#pills-blog-tab .tabpar').html(str);
+            }
+          }
+          const cardText = document.querySelectorAll('.tabpar__card p');
+          cardText.forEach((item, i) => {
+            let len = item.textContent.length;
+            if(len > 18) {
+              let str = item.textContent.substring(0, 18) + '...';
+              item.textContent = str;
+            }
+          })
+          $('.sec-05__tabdiv .nav-pills button').on('click', function(event){
+            event.preventDefault();
+            $('.sec-05__tabdiv .nav-pills li').removeClass('active');
+            $('.sec-05__tabdiv .nav-pills li button').removeClass('active');
+            $(this).addClass('active');
+            $(this).parent().addClass('active');
+            $('.sec-05tab-content>div').hide();
+            var target = $(this).attr('id');
+            $(`#pills-tab #${target}`).show();
+            $('.sec-05tab-content .tabpar').slick('setPosition');
+        });
+
+        $(`.sec-05tab-content .tabpar`).slick({
+            arrows: true,
+            slidesToShow: 3,
+            infinite: false,
+            dots: false,
+            slidesToScroll: 1,
+            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
+            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
+        });
+
+        $('.sec-05__tabdiv .nav-item-link').click(function() {
+            $('.sec-05 .morelink').attr('href',$('.sec-05__tabdiv .nav-item-link.active').data('link'));
+        });
+    }
+
+    function renderSec06(data) {
+        let temp = data[3]['data'];
+        let str = '';
+        for(let i = 0; i < temp.length; i++){
+            if(temp[i].video == 'true'){
+                str+= `<div class="sec-06__card" onclick="window.open('${temp[i]['link']}');">
+                    <div class="sec-06__card__outer"><div class="sec-06__card__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-06__card__play lazyload" data-src="images/Play-Button.webp"></div></div>
+                    <h5 class="mb-2 mt-2">${temp[i]['title']}</h5>
+                    <p class="mt-2">${temp[i]['description']}</p>
+                    </div>`;
+            } else {
+                str+= `<div class="sec-06__card" onclick="window.open('${temp[i]['link']}');">
+                    <div class="sec-06__card__outer"><div class="sec-06__card__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div></div>
+                    <h5 class="mb-2 mt-2">${temp[i]['title']}</h5>
+                    <p class="mt-2">${temp[i]['description']}</p>
+                    </div>`;
+            }
+        }
+        $('.sec-06 .sec-06__slider').html(str);
+        $('.sec-06__slider').slick({
+            arrows: true,
+            dots: false,
+            speed: 800,
+            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 30px;color: white;"></i></button>',
+            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 30px;color: white;"></i></button>'
+        });
+        const cardText = document.querySelectorAll('.sec-06__card p');
+        cardText.forEach((item, i) => {
+            let len = item.textContent.length;
+            if(len > 20) {
+              let str = item.textContent.substring(0, 40) + '...';
+              item.textContent = str;
+            }
+        });
+    }
+
+    function renderSec07(data) {
+        let temp = data[5]['data'];
+        let str = '';
+        for(let i = 0; i < temp.length; i++){
+            str+= `<div class="sec-07__slider-${i+1} slide-item" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>`
+        }
+        $(`.sec-07__slider`).html(str);
+        $(".sec-07__slider").slick({
+            dots: false,
+            autoplay: true,
+            arrows: false,
+            slidesToShow: 4,
+            slidesToScroll: 1,
+            autoplaySpeed: 7000,
+            initialSlide: 0,
+            infinite: true,
+        });
+    }
+
+    function renderSec08(data) {
+        let temp = data[4]['data'];
+        let str = '';
+        for(let i = 0; i < temp.length; i++){
+            if(temp[i].video == 'true'){
+                str+= `<div class="sec-08__slider-${i+1} sec-08__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
+                        <div class="sec-08__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-08__card__play lazyload" data-src="images/Play-Button.webp"></div>
+                        <h5 class="mb-2 me-2">${temp[i]['title']}</h5>
+                        <p class="mb-2 me-2">${temp[i]['description']}</p>
+                    </div>`;
+            } else {
+                str+= `<div class="sec-08__slider-${i+1} sec-08__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
+                        <div class="sec-08__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>
+                        <h5 class="mb-2 me-2">${temp[i]['title']}</h5>
+                        <p class="mb-2 me-2">${temp[i]['description']}</p>
+                    </div>`;
+            }
+        }
+        $('.sec-08__slider').html(str);
+        $(".sec-08__slider").slick({
+          arrows: true,
+          slidesToShow: 1,
+          infinite: false,
+          dots: false,
+          slidesToShow: 3,
+          centerPadding: '12px',
+          prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
+            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
+      });
+      const cardText = document.querySelectorAll('.sec-08__card p');
+        cardText.forEach((item, i) => {
+          let len = item.textContent.length;
+          if(len > 20) {
+            let str = item.textContent.substring(0, 20) + '...';
+            item.textContent = str;
+          }
+        })
+    }
+
+    function renderSec09(data) {
+        let temp = data[6]['data'];
+        let str = '';
+        for(let i = 0; i < temp.length; i++){
+            if(temp[i].video !== 'false') {
+                str+= `<div class="sec-09__slider-1 sec-09__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
+                      <div class="sec-09__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-09__card__play lazyload" data-src="images/Play-Button.webp"></div>
+                      <p class="sec-09__cardtxt">${temp[i]['title']}</p>
+                    </div>`
+            } else {
+                str+= `<div class="sec-09__slider-1 sec-09__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
+                      <div class="sec-09__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>
+                      <p class="sec-09__cardtxt">${temp[i]['title']}</p>
+                    </div>`
+            }
+            
+        }
+        $('.sec-09__slider').html(str);
+        $(".sec-09__slider").slick({
+            autoplay: true,
+            autoplaySpeed: 7000,
+            arrows: true,
+            slidesToShow: 4,
+            infinite: true,
+            dots: false,
+            slidesToScroll: 1,
+            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
+            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
+        });
+    }
+    function renderSec10(data) {
+        renderRecStr("sec-10", data[7]['data'].slice(0, 6));
+        renderRecStr("sec-11", data[8]['data'].slice(0, 6));
+    }
+
+    function renderRecStr(sec, data) {
+        let str = '';
+        for(let i = 0; i < data.length; i++){
+            //console.log(data[i]['description'].length);
+            if(data[i]['description'].length > 0) {
+                data[i]['description'].split('，');
+                data[i]['description'] = data[i]['description'].split('，').slice(1).join("");
+            }
+            if(data[i].video !== 'false') {
+                str+= `<div class="${sec}__card col-4 mb-3" onclick="window.open('${data[i]['link']}');">
+                        <div class="${sec}__card-img mb-2" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"><img class="${sec}__card__play lazyload" data-src="images/Play-Button.webp"></div>
+                        <h5 class="me-2">${data[i]['title']}</h5>
+                        <p class="${sec}__cardtxt me-2">${data[i]['description']}</p>
+                    </div>`
+            } else {
+                str+= `<div class="${sec}__card col-4 mb-3" onclick="window.open('${data[i]['link']}');">
+                        <div class="${sec}__card-img mb-2" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"></div>
+                        <h5 class="me-2">${data[i]['title']}</h5>
+                        <p class="${sec}__cardtxt me-2">${data[i]['description']}</p>
+                    </div>`
+            }
+            
+        }
+        $(`.${sec} .row`).html(str);
+        const cardText = document.querySelectorAll(`.${sec}__card p`);
+        cardText.forEach((item, i) => {
+          let len = item.textContent.length;
+          if(len > 18) {
+            let str = item.textContent.substring(0, 18) + '...';
+            item.textContent = str;
+          }
+        })
+    }
+
+    function renderVideo(data) {
+        let temp = data[9];
+        console.log(data[9]);
+        $('.sec-06__videotxt').text(temp['title']);
+        console.log('test');
+        $('.sec-06__video__imgfr').css('background-image', `url(https://img.youtube.com/vi/${temp['yt']}/hqdefault.jpg)`);
+        $('#videoModal').on('shown.bs.modal', function () {
+            $('#videoModal iframe').attr('src', `https://www.youtube.com/embed/${temp['yt']}?controls=0&autoplay=1&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fm.hhh.com.tw&amp;widgetid=1`);
+        });
+        $('#videoModal').on('hidden.bs.modal', function () {
+          $('#videoModal iframe').removeAttr('src');
+        });
+    }
+
+    function renderTrending(result){
+        let temp = result[10]['data'];
+        let str = '';
+        for(let i = 0; i < temp.length; i++){
+            str += `<a class="dropbox__hots__link" href="https://hhh.com.tw/search/lists/case/${temp[i]}-keyword/">${temp[i]}</a>`
+        }
+        $('.dropbox__hots').html(`<strong class="dropbox__hots__title">熱搜關鍵字：</strong>${str}`);
+    }
+
+
+function tab2 () {
+    if(('.dropbox__tabdiv').length){
+        // Show the first tab by default
+    $('.dropbox-tab-content>div').hide();
+    $('.dropbox-tab-content>div:first').show();
+    $('.dropbox__tabdiv .nav-pills li:first').addClass('active');
+    $('.dropbox__tabdiv .nav-pills li:first button').addClass('active');
+
+    // Change tab class and display content
+    $('.dropbox__tabdiv .nav-pills button').on('click', function(event){
+        event.preventDefault();
+        $('.dropbox__tabdiv .nav-pills li').removeClass('active');
+        $('.dropbox__tabdiv .nav-pills li button').removeClass('active');
+        $(this).addClass('active');
+        $(this).parent().addClass('active');
+        $('.dropbox-tab-content>div').hide();
+        var target = $(this).attr('id');
+        $(`#pills-tab-2 #${target}`).show();
+    });
+    }
+}
+
+tab2();
+
+
+window.addEventListener('scroll', fixedOnScroll);
+    
+const navbar = document.querySelector('.navbar-main');
+    
+function fixedOnScroll() {
+   
+}
+
+$(window).scroll(function() {
+    if ( $(this).scrollTop() > 800 ){
+        $('.fixed-btn').fadeIn(222);
+    } else {
+        $('.fixed-btn').stop().fadeOut(222);
+    }
+}).scroll();
+
+$('.btn-gotop').click(function () {
+    $('html, body').animate({
+        scrollTop: 0
+    }, 500)
+});
+
+$('.navbar-search img').click(function(){
+    $('.navbar-search .dropbox').toggleClass('open');
+     if($('.navbar-search .dropbox').hasClass('open')) {
+        $('.navbar-nav .nav-item>.dropbox').addClass('d-none');
+    } else {
+        $('.navbar-nav .nav-item>.dropbox').removeClass('d-none');
+    } 
+});
+
+$('.sec-00__close').click(function(){
+    $(this).css('display', 'none');
+    $('.sec-00').addClass('bannerClose');
+    //$('.sec-02').css('padding-top', '53px');
+    sticky = 0;
+});
+
+// search
+const imageSearch = document.querySelector('.image-search');
+const imagesSelect = document.querySelectorAll('#pills-img-tab select');
+
+imageSearch.addEventListener("click", function() {
+    searchQueryStr(imagesSelect, 'photos');
+})
+
+const newsSearch = document.querySelector('.news-search');
+const newsSelect = document.querySelectorAll('#pills-news-tab select');
+
+newsSearch.addEventListener("click", function() {
+    searchQueryStr(newsSelect, 'builder');
+});
+
+const caseSearch= document.querySelector('.case-search');
+const caseSelect = document.querySelectorAll('#pills-case-tab select');
+
+caseSearch.addEventListener("click", function() {
+    let query = ''
+    let str = 'https://hhh.com.tw/cases/lists/1-page/new-sort/';
+    if($('#case-shui').val() == '風水') {
+        caseSelect.forEach((item, i) => {
+            if(i < 2) {
+                if(item.value !== ''){ 
+                    query += `/${item.value}`;
+                }
+            }
+        });
+        str = `https://hhh.com.tw/cases/lists${query}/風水-keyword/1-page/`;
+        window.open(str);
+        return;
+    } 
+    caseSelect.forEach((item, i) => {
+        if(item.value !== ''){
+            query += `/${item.value}`;
+        }
+    });
+    str = `https://hhh.com.tw/cases/lists${query}/1-page/`;
+    window.open(str);
+})
+
+const designerSearch = document.querySelector('.designer-search');
+const designerSelect = document.querySelectorAll('#pills-designer-tab select');
+
+designerSearch.addEventListener("click", function() {
+    searchQueryStr(designerSelect, 'designers');
+})
+
+function searchQueryStr(block, link){
+    let query = ''
+    let str = `https://hhh.com.tw/${link}/lists/1-page/`;
+    block.forEach((item, i) => {
+        if(item.value !== ''){
+            query += `/${item.value}`;
+        }
+    });
+    str = `https://hhh.com.tw/${link}/lists${query}/1-page/`;
+    window.location.href = str;
+}
+
+const searchBtn = document.querySelector('.dropbox__searchBar__submit');
+const searchBar = document.querySelector('.dropbox__searchBar__input');
+
+searchBtn.addEventListener('click', search);
+searchBar.addEventListener('keyup', pressSearch);
+function search() {
+  if(searchBar.value == '') {
+    window.location.href = 'https://m.hhh.com.tw/search/lists/case/';
+  } else {
+    window.location.href = `https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`;
+    console.log(`https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`)
+  }
+}
+
+function pressSearch(e) {
+  if (e.keyCode === 13) {
+    e.preventDefault();
+    search();
+  }
+}
+
+function todayTV() {
+    var utc = new Date().toJSON().slice(0,10).replace(/-/g,'-');
+    window.location.href=`https://hhh.com.tw/program/?tv=gstv&date=${utc}&type=tv`;
+}
+
+document.addEventListener('lazybeforeunveil', function(e){
+    var bg = e.target.getAttribute('data-bg');
+    if(bg){
+        e.target.style.backgroundImage = 'url(' + bg + ')';
+    }
+});
+
+$('.container_match2').hide();
+$('.match__next').click(function() {
+    $('.container_match').fadeOut(0);
+    $('.container_match2').fadeIn(500);
+})
+// city result
+let cityResult;
+$.ajax({
+    method: "GET",
+    url: "../json/taiwan_districts.json",
+    dataType: "json",
+}).done(function (msg) {
+    cityResult = [...msg];
+    let str = '';
+    for(let i = 0; i < cityResult.length; i++){
+        str += `<option value="${cityResult[i]['zip']}-city">${cityResult[i]['name']}</option>`;
+    }
+    $('#designer-city').html(`<option value="" selected="selected" disabled>所在縣市</option>${str}`);
+    $('#designer-city').on('change', function() {
+        let selected = $(this).val().split('-')[0];
+        let countyStr = '';
+        for(let i = 0; i < cityResult.length; i++){
+            if(cityResult[i]['zip'] == selected) {
+                for(let j = 0; j < cityResult[i]['districts'].length; j++){
+                    countyStr += `<option value="${cityResult[i]['districts'][j]['zip']}-county">${cityResult[i]['districts'][j]['name']}</option>`;
+                }
+            }
+        }
+        $('#designer-country').html(`<option value="" selected="selected" disabled>所在地區</option>${countyStr}`);
+    });
+});
+
+    //jQuery time
+    var current_fs, next_fs, previous_fs; //fieldsets
+    var left, opacity, scale; //fieldset properties which we will animate
+    var animating; //flag to prevent quick multi-click glitches
+    
+    $(".next").click(function(){
+         if(animating) return false;
+         animating = true;
+        
+        current_fs = $(this).parent().parent();
+        next_fs = $(this).parent().parent().next();
+        
+        //activate next step on progressbar using the index of next_fs
+        $(".form-progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
+        
+        //show the next fieldset
+        next_fs.animate({opacity: 1}, {
+            step: function(now, mx) {
+                //as the opacity of current_fs reduces to 0 - stored in "now"
+                //1. scale current_fs down to 80%
+                scale = 0 + (1 + now) * .5 ;
+                //2. bring next_fs from the right(50%)
+                left = (now * 50)+"%";
+                //3. increase opacity of next_fs to 1 as it moves in
+                opacity = 0 + now;
+                next_fs.css({
+            'transform': 'scale('+scale+')',
+          });
+                next_fs.css({'opacity': opacity});
+            }, 
+            duration: 400, 
+            complete: function(){
+                next_fs.show();
+                animating = false;
+            }, 
+            //this comes from the custom easing plugin
+            easing: 'easeInOutBack'
+      }); 
+        //hide the current fieldset with style
+         current_fs.animate({opacity: 0}, {
+            step: function(now, mx) {
+                //as the opacity of current_fs reduces to 0 - stored in "now"
+                //1. scale current_fs down to 80%
+                scale = 1 - (1 - now) * 0.2;
+                //2. bring next_fs from the right(50%)
+                left = (now * 50)+"%";
+                //3. increase opacity of next_fs to 1 as it moves in
+                opacity = 1 - now;
+                current_fs.css({
+            'transform': 'scale('+scale+')',
+          });
+                next_fs.css({'opacity': opacity});
+            }, 
+            duration: 400, 
+            complete: function(){
+                current_fs.hide();
+                animating = false;
+            }, 
+            //this comes from the custom easing plugin
+            easing: 'easeInOutBack'
+      }); 
+    });
+