designer list

css/list-style-mb.css

@@ -0,0 +1,786 @@
+body {
+  font-family: 'Helvetica Neue';
+}
+
+a:focus {
+  outline: none;
+}
+
+a:focus-visible {
+  outline: none;
+}
+
+button:focus-visible {
+  outline: none;
+}
+
+img:focus-visible {
+  outline: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+.text-hhh {
+  color: #EE7800;
+}
+
+.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-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 {
+  padding-right: 2px;
+}
+
+.navbar-brand {
+  font-size: 1.5rem;
+}
+
+.navbar-main.sticky {
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+.navbar-main.sticky + .sec-01 {
+  padding-top: 58px;
+}
+
+.fixed_menu {
+  height: 78px;
+  position: fixed;
+  z-index: 4;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #fff;
+  box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+@media (min-width: 480px) {
+  .fixed_menu {
+    height: 50px;
+  }
+}
+
+@media (min-width: 480px) {
+  .fixed_menu .row {
+    height: 50px;
+  }
+}
+
+@media (min-width: 480px) {
+  .fixed_menu__box {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.fixed_menu__box img:focus-visible {
+  outline: none;
+}
+
+@media (min-width: 480px) {
+  .fixed_menu__box img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.sec-menu {
+  display: none;
+  z-index: 105;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  font-size: 14px;
+}
+
+.sec-menu-block {
+  padding-top: 61px;
+  margin: 0;
+  -webkit-transition: -webkit-transform .5s;
+  transition: -webkit-transform .5s;
+  transition: transform .5s;
+  transition: transform .5s, -webkit-transform .5s;
+  position: fixed;
+  top: 0;
+  left: -100%;
+  right: 0;
+  height: 100%;
+  overflow-y: scroll;
+  max-width: 100%;
+  background-color: white;
+}
+
+.sec-menu-block.slidein {
+  -webkit-animation: slidein 0.3s forwards;
+  animation: slidein 0.3s forwards;
+}
+
+.sec-menu-block.slideout {
+  -webkit-animation: slideout 0.3s forwards;
+  animation: slideout 0.3s forwards;
+}
+
+.sec-menu-list {
+  background: white;
+  margin-bottom: 0;
+}
+
+.sec-menu-list .navbar-nav {
+  padding: 0 2rem;
+  width: 100%;
+}
+
+.sec-menu-list .navbar-nav .dropdown-menu {
+  border: none;
+  padding: 0;
+  height: 0;
+  opacity: 0;
+  -webkit-transition: all 1s;
+  transition: all 1s;
+}
+
+.sec-menu-list .navbar-nav .dropdown-menu.show {
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  opacity: 1;
+}
+
+.sec-menu-list .navbar-nav .dropdown-menu .dropdown-item {
+  padding-left: 3rem;
+}
+
+.sec-menu-list .navbar-nav .dropdown-menu .dropdown-item:active, .sec-menu-list .navbar-nav .dropdown-menu .dropdown-item.active, .sec-menu-list .navbar-nav .dropdown-menu .dropdown-item:focus {
+  background-color: white;
+}
+
+.sec-menu-list .navbar-nav .dropdown-menu .dropdown-item:hover {
+  background-color: white;
+}
+
+.sec-menu-list .navbar-nav .dropdown-menu .sub-menu .dropdown-item {
+  padding-left: 6rem;
+}
+
+.sec-menu-list .nav-item {
+  font-size: 17px;
+  display: block;
+  width: 100%;
+}
+
+.sec-menu-list .nav-link {
+  padding-top: 11px;
+  padding-bottom: 8px;
+  color: #707070;
+  position: relative;
+}
+
+.sec-menu-list .nav-link .link_div {
+  width: 25px;
+}
+
+.sec-menu-list .nav-link a {
+  color: #707070;
+  text-decoration: none;
+}
+
+.sec-menu-list .nav-link.show i {
+  -webkit-transform: rotate(-180deg);
+          transform: rotate(-180deg);
+}
+
+.sec-menu-list .nav-link .expand {
+  position: absolute;
+  right: 10px;
+}
+
+.sec-menu-list .nav-link .expand i {
+  font-size: 11px;
+  color: #D3D3D3;
+  -webkit-transition: all .5s;
+  transition: all .5s;
+}
+
+.sec-menu-list .nav-link.text-main {
+  color: #EE7800;
+}
+
+.sec-menu-list .sub-link .expand {
+  position: absolute;
+  right: 20px;
+  top: 8px;
+  width: 1.5rem;
+  text-align: center;
+}
+
+.sec-menu-list .sub-menu {
+  display: none;
+}
+
+.sec-menu-list .sub-menu.show {
+  display: block;
+}
+
+.sec-menu-list hr {
+  margin: 3px 0;
+  background-color: #bbbbbb;
+}
+
+.sec-menu-follows {
+  padding: 2rem 2.5rem;
+  background-color: #e6e6e6ef;
+  margin-top: -9px;
+}
+
+.sec-menu-follows-title {
+  color: #797979;
+  font-size: 14px;
+}
+
+.sec-menu-links {
+  margin-bottom: 2.5rem;
+}
+
+.sec-menu-links a {
+  color: #797979;
+  text-decoration: none;
+  display: inline-block;
+  padding: 1px 0;
+  border-bottom: 1px solid #acacac;
+  margin: 0 .6rem;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+}
+
+@media screen and (max-width: 385px) {
+  .sec-menu-links a {
+    margin: 0 .4rem;
+  }
+}
+
+.sec-menu .follows-fp {
+  color: #797979;
+  text-decoration: none;
+  font-weight: 400;
+  display: block;
+  padding-left: .5rem;
+}
+
+.sec-menu .follows-fp:nth-of-type(1) {
+  margin-bottom: .6rem;
+}
+
+.sec-menu .copyright {
+  color: #797979;
+  font-size: 13px;
+}
+
+@-webkit-keyframes slidein {
+  100% {
+    left: 0;
+  }
+}
+
+@keyframes slidein {
+  100% {
+    left: 0;
+  }
+}
+
+@-webkit-keyframes slideout {
+  100% {
+    left: -100%;
+  }
+}
+
+@keyframes slideout {
+  100% {
+    left: -100%;
+  }
+}
+
+.sec-search {
+  display: none;
+  z-index: 107;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  font-size: 14px;
+}
+
+.sec-search-block {
+  padding-top: 61px;
+  margin: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100;
+  height: 100%;
+  overflow-y: scroll;
+  background-color: rgba(0, 0, 0, 0.774);
+}
+
+.sec-search-list {
+  background-color: #F3F3F3;
+  padding: 1rem;
+  padding-bottom: 1.4rem;
+}
+
+.sec-search-list hr {
+  background-color: #aaaaaa;
+}
+
+.sec-search-form {
+  width: 100%;
+}
+
+.sec-search .searchBar {
+  font-size: 17px;
+  padding: .5rem .3rem;
+  display: inline-block;
+  width: 88%;
+  outline: none;
+  border: 2px solid #EE7800;
+  border-radius: 5px;
+}
+
+.sec-search .searchBtn {
+  outline: none;
+  border: none;
+  background-color: transparent;
+  display: inline-block;
+  width: 10%;
+}
+
+.sec-search-hots {
+  padding: 1rem;
+  background-color: white;
+  -webkit-box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
+          box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
+}
+
+.sec-search-hots__title {
+  color: #AAAAAA;
+  font-size: 18px;
+  font-weight: 400;
+  padding-top: .5rem;
+}
+
+.sec-search-hots__link {
+  display: inline-block;
+  text-decoration: none;
+  color: #797979;
+  border: 1px solid #797979;
+  border-radius: 3rem;
+  padding: .3rem .5rem;
+  margin-right: .8rem;
+  margin-bottom: .8rem;
+}
+
+.sec-search-hots__link:hover {
+  color: #797979;
+}
+
+.sec-login {
+  display: none;
+  z-index: 109;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  font-size: 14px;
+}
+
+.sec-login-block {
+  padding-top: 61px;
+  margin: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100;
+  height: 100%;
+  overflow-y: hidden;
+  background-color: #F3F3F3;
+}
+
+.sec-login-list {
+  background-color: #F3F3F3;
+  padding: 1rem;
+  padding-bottom: 1.4rem;
+}
+
+.sec-login-list hr {
+  background-color: #aaaaaa;
+}
+
+.sec-login-btns {
+  padding: 1rem;
+  background-color: white;
+  -webkit-box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
+          box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
+}
+
+.text-main {
+  color: #EE7800;
+}
+
+.text-phone {
+  color: #EA068C;
+  text-decoration: none;
+}
+
+.bg-white {
+  background-color: #fff;
+}
+
+.mb__hero {
+  margin-top: calc(52px);
+}
+
+.mb__hero__bgImg {
+  height: 240px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+}
+
+.mb__content {
+  background-color: rgba(244, 244, 244, 0.8);
+}
+
+.other {
+  display: none;
+}
+
+.mb__infoCard {
+  color: #727679;
+  text-align: center;
+  padding: 1rem;
+  background-color: rgba(244, 244, 244, 0.8);
+  margin: 3rem 0 0;
+}
+
+.mb__infoCard__name, .mb__infoCard__span {
+  font-size: 1.25rem;
+  color: #43484C;
+  font-weight: bold;
+}
+
+.mb__infoCard__span {
+  font-size: 1rem;
+}
+
+.mb__infoCard__cmy {
+  font-size: 1.125rem;
+  font-weight: 400;
+}
+
+.mb__infoCard__avatar {
+  width: 188px;
+  height: 188px;
+  position: absolute;
+  top: -120px;
+  border: 3px solid #FFF;
+  border-radius: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+
+.mb__infoCard__seo {
+  font-size: 1.12rem;
+  text-align: center;
+  padding: 1rem;
+  display: block;
+  line-height: 1.2;
+  font-weight: 400;
+}
+
+.mb__infoCard__approve {
+  color: #FF0000;
+}
+
+.mb__infoCard__more {
+  color: #FFAC73;
+  text-align: center;
+  cursor: pointer;
+}
+
+.mb__infoCard__detail aside {
+  line-height: 2;
+  font-size: 1rem;
+}
+
+.mb__infoCard__detail a {
+  color: #727679;
+}
+
+.mb__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%;
+}
+
+.mb__infoCard__detail__l.title {
+  color: #AAAAAA;
+  font-size: 1.125rem;
+  font-weight: bold;
+  -webkit-transform: translateX(-15px);
+          transform: translateX(-15px);
+}
+
+.mb__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;
+}
+
+.mb__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;
+}
+
+.mb__infoCard .scMedia a {
+  width: 16%;
+}
+
+.mb__infoCard .scMedia a img {
+  width: 100%;
+}
+
+.infoContent a {
+  color: #727679;
+  text-decoration: none;
+  font-size: .9rem;
+}
+
+.infoContent a.active {
+  color: #EE7800;
+}
+
+.infoContent__navBlock.tab_sticky {
+  position: fixed;
+  top: 60px;
+  width: 100%;
+  z-index: 12;
+}
+
+.infoContent .nav-item {
+  margin: 0;
+  width: 25%;
+  text-align: center;
+}
+
+.infoContent .nav-item-link {
+  display: block;
+  padding: 1rem 0.5rem;
+  text-decoration: none;
+  background-color: transparent;
+  font-size: .9rem;
+  color: #727679;
+  text-align: center;
+  font-size: 1.12rem;
+}
+
+.infoContent .nav-item-link.active {
+  color: #EE7800;
+  border-bottom: 2px solid #EE7800;
+}
+
+.infoContent .likeSee {
+  font-size: 1.05rem;
+}
+
+.infoContent .likeSee__divider {
+  height: 12px;
+  display: inline-block;
+  border: 0.5px solid #9d9d9d;
+}
+
+.infoContent .tab-content {
+  padding: 0 1rem;
+}
+
+.infoContent .tab-content .row > div {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.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: 145px;
+  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: 1.125rem;
+  font-weight: bold;
+}
+
+.infoContent .company__text {
+  color: #43484C;
+}
+
+.infoContent__navBlock {
+  padding-top: 0rem;
+}
+
+.infoContent__navBlock.tab_sticky + .tab-content {
+  padding-top: 60.8px;
+}
+
+.freeCall {
+  position: fixed;
+  bottom: 78px;
+  z-index: 11;
+  width: 100%;
+  text-align: center;
+  background: -webkit-gradient(linear, left top, left bottom, from(rgba(244, 244, 244, 0.9)), to(rgba(244, 244, 244, 0.9)));
+  background: linear-gradient(180deg, rgba(244, 244, 244, 0.9) 0%, rgba(244, 244, 244, 0.9) 100%);
+}
+
+.freeCall__btn {
+  color: #fff;
+  background-color: #EE7800;
+  border-color: #EE7800;
+}
+
+.fixed-btn {
+  position: fixed;
+  right: 15px;
+  bottom: 5.5rem;
+  z-index: 15;
+}
+
+@media (min-width: 480px) {
+  .fixed-btn {
+    bottom: 5rem;
+  }
+}
+
+.fixed-btn .btn-gotop {
+  padding: 1rem .65rem;
+  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);
+}
+
+.like {
+  display: none;
+}
+/*# sourceMappingURL=list-style-mb.css.map */

css/list-style-mb.scss

@@ -0,0 +1,659 @@
+$horizontal: 480px;
+body {
+    font-family: 'Helvetica Neue';
+}
+a:focus {
+    outline: none;
+}
+a:focus-visible {
+    outline: none;
+}
+button:focus-visible {
+    outline: none;
+}
+img:focus-visible  {
+    outline: none;
+}
+
+a {
+    text-decoration: none;
+}
+
+.text-hhh {
+    color: #EE7800;
+}
+
+.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;
+    &-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 {
+        padding-right: 2px;
+    }
+    &-brand {
+        font-size: 1.5rem;
+    }
+}
+
+.navbar-main.sticky {
+    position: fixed;
+    top: 0;
+    width: 100%;
+}
+
+.navbar-main.sticky + .sec-01 {
+    padding-top: 58px;
+}
+
+.fixed_menu {
+    height: 78px;
+    position: fixed;
+    z-index: 4;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: #fff;
+    box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    -moz-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    //padding-bottom: 16px;
+    @media (min-width: $horizontal) {
+        height: 50px;
+    }
+    .row {
+        @media (min-width: $horizontal) {
+            height: 50px;
+        } 
+    }
+    &__box {
+        @media (min-width: $horizontal) {
+            width: 100%;
+            height: 100%;
+        } 
+        img {
+            &:focus-visible {
+                outline: none;
+            }
+            @media (min-width: $horizontal) {
+                width: 100%;
+                height: 100%;
+            } 
+        }
+    }
+}
+
+.sec-menu {
+    display: none;
+    z-index: 105;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    font-size: 14px;
+    &-block {
+        padding-top: 61px;
+        margin:0;
+        // transform: translateX(-500px);
+        transition: transform .5s;
+        position: fixed;
+        top: 0;
+        left: -100%;
+        right: 0;
+        height: 100%;
+        overflow-y: scroll;
+        max-width: 100%;
+        background-color: white;
+        &.slidein {
+            //transform: translateX(0px);
+            -webkit-animation: slidein 0.3s forwards;
+            
+            animation: slidein 0.3s forwards;
+            
+        }
+        &.slideout {
+            //transform: translateX(0px);
+            -webkit-animation: slideout 0.3s forwards;
+            
+            animation: slideout 0.3s forwards;
+            
+        }
+    }
+    &-list {
+        background: white;
+        margin-bottom: 0;
+        .navbar-nav {
+            padding: 0 2rem;
+            width: 100%;
+            .dropdown-menu {
+                border: none;
+                padding: 0;
+                height: 0;
+                opacity: 0;
+                transition: all 1s;
+                &.show {
+                    height: fit-content;
+                    opacity: 1;
+                }
+                .dropdown-item {
+                    padding-left: 3rem;
+                    &:active, &.active, &:focus {
+                        background-color: white;
+                    }
+                    &:hover {
+                        background-color: white;
+                    }
+                }
+                .sub-menu {
+                    .dropdown-item {
+                        padding-left: 6rem;
+                    }
+                }
+            }
+        }
+        .nav-item {
+            font-size: 17px;
+            display: block;
+            width: 100%;
+        }
+        .nav-link {
+            padding-top: 11px;
+            padding-bottom: 8px;
+            color: #707070;
+            position: relative;
+            .link_div {
+                width: 25px;
+            }
+            a {
+                color: #707070;
+                text-decoration: none;
+            }
+            &.show {
+                i {
+                    transform: rotate(-180deg);
+                }
+            }
+            .expand {
+                position: absolute;
+                right: 10px;
+                i {
+                    font-size: 11px;
+                    color: #D3D3D3;
+                    transition: all .5s;
+                }
+            }
+            &.text-main {
+                color: #EE7800;
+            }
+        }
+        .sub-link {
+            .expand {
+                position: absolute;
+                right: 20px;
+                top: 8px;
+                width: 1.5rem;
+                text-align: center;
+            }
+        }
+        .sub-menu {
+            display: none;
+        }
+        .sub-menu.show {
+            display: block;
+        }
+        hr {
+            margin: 3px 0;
+            background-color: rgb(187, 187, 187);
+        }
+    }
+    &-follows {
+        padding: 2rem 2.5rem;
+        background-color: #e6e6e6ef;
+        margin-top: -9px;
+        &-title {
+            color: #797979;
+            font-size: 14px;
+        }
+    }
+    &-links {
+        margin-bottom: 2.5rem;
+        a {
+            color: #797979;
+            text-decoration: none;
+            display: inline-block;
+            padding: 1px 0;
+            border-bottom: 1px solid #acacac;
+            margin: 0 .6rem;
+            flex-wrap: nowrap;
+            @media screen and(max-width: 385px) {
+                margin: 0 .4rem;
+            }
+        }
+    }
+    .follows-fp {
+        color: #797979;
+        text-decoration: none;
+        font-weight: 400;
+        display: block;
+        padding-left: .5rem;
+        &:nth-of-type(1) {
+            margin-bottom: .6rem;
+        }
+    }
+    .copyright {
+        color: #797979;
+        font-size: 13px;
+    }
+}
+
+@-webkit-keyframes slidein {
+    100% { left: 0; }
+}
+
+@keyframes slidein {
+    100% { left: 0; }
+}
+
+@-webkit-keyframes slideout {
+    100% { left: -100%; }
+}
+
+@keyframes slideout {
+    100% { left: -100%; }
+}
+
+.sec-search {
+    display: none;
+    z-index: 107;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    font-size: 14px;
+    &-block {
+        padding-top: 61px;
+        margin:0;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        width: 100;
+        height: 100%;
+        overflow-y: scroll;
+        background-color: rgba(0, 0, 0, 0.774);
+    }
+    &-list {
+        background-color: #F3F3F3;
+        padding: 1rem;
+        padding-bottom: 1.4rem;
+        hr {
+            background-color: #aaaaaa;
+        }
+    }
+    &-form {
+        width: 100%;
+    }
+    .searchBar {
+        font-size: 17px;
+        padding: .5rem .3rem;
+        display: inline-block;
+        width: 88%;
+        outline: none;
+        border: 2px solid #EE7800;
+        border-radius: 5px;
+    }
+    .searchBtn {
+        outline: none;
+        border: none;
+        background-color: transparent;
+        display: inline-block;
+        width: 10%;
+    }
+    &-hots {
+        padding: 1rem;
+        background-color: white;
+        box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
+        &__title {
+            color: #AAAAAA;
+            font-size: 18px;
+            font-weight: 400;
+            padding-top: .5rem;
+        }
+        &__link {
+            display: inline-block;
+            text-decoration: none;
+            color: #797979;
+            border: 1px solid #797979;
+            border-radius: 3rem;
+            padding: .3rem .5rem;
+            margin-right: .8rem;
+            margin-bottom: .8rem;
+            &:hover {
+                color: #797979;
+            }
+        }
+    }
+}
+
+.sec-login {
+    display: none;
+    z-index: 109;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    font-size: 14px;
+    &-block {
+        padding-top: 61px;
+        margin:0;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        width: 100;
+        height: 100%;
+        overflow-y: hidden;
+        background-color: #F3F3F3;
+    }
+    &-list {
+        background-color: #F3F3F3;
+        padding: 1rem;
+        padding-bottom: 1.4rem;
+        hr {
+            background-color: #aaaaaa;
+        }
+    }
+    &-btns {
+        padding: 1rem;
+        background-color: white;
+        box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
+    }
+}
+
+
+.text-main {
+    color: #EE7800;
+}
+
+.text-phone {
+    color: #EA068C;
+    text-decoration: none;
+}
+
+.bg-white {
+  background-color: #fff;
+}
+.mb__hero {
+  margin-top: calc(52px);
+  &__bgImg {
+    height: 240px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+  }
+}
+
+.mb__content {
+  background-color: rgba(244, 244, 244, 0.8);
+}
+
+.other {
+    display: none;
+}
+
+.mb__infoCard {
+  color: #727679;
+  text-align: center;
+  padding: 1rem;
+  background-color: rgba(244, 244, 244, 0.8);
+  margin: 3rem 0 0;
+  &__name, &__span {
+    font-size: 1.25rem;
+    color: #43484C;
+    font-weight: bold;
+  }
+  &__span {
+      font-size: 1rem;
+  }
+  &__cmy {
+      font-size: 1.125rem;
+      font-weight: 400;
+  }
+  &__avatar {
+    width: 188px;
+    height: 188px;
+    position: absolute;
+    top: -120px;
+    border: 3px solid #FFF;
+    border-radius: 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  &__seo {
+    font-size: 1.12rem;
+    text-align: center;
+    padding: 1rem;
+    display: block;
+    line-height: 1.2;
+    font-weight: 400;
+  }
+  &__approve {
+    color: #FF0000;
+  }
+  &__more {
+    color: #FFAC73;
+    text-align: center;
+    cursor: pointer;
+  }
+  &__detail {
+    aside {
+        line-height: 2;
+        font-size: 1rem;
+    }
+    a {
+        color: #727679;
+    }
+    &__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;
+      }
+  }
+  &__navBlock {
+      &.tab_sticky {
+        position: fixed;
+        top: 60px;
+        width: 100%;
+        z-index: 12;
+    }
+  }
+  .nav-item {
+      margin: 0;
+      width: 25%;
+      text-align: center;
+      &-link {
+          display: block;
+          padding: 1rem 0.5rem;
+          text-decoration: none;
+          background-color: transparent;
+          font-size: .9rem;
+          color: #727679;
+          text-align: center;
+          font-size: 1.12rem;
+          &.active {
+              color: #EE7800;
+              border-bottom: 2px solid #EE7800;
+          }
+      }
+  }
+  .likeSee {
+    font-size: 1.05rem;
+      &__divider {
+          height: 12px;
+          display: inline-block;
+          border: 0.5px solid #9d9d9d;
+      }
+  }
+  .tab-content {
+      padding: 0 1rem;
+  }
+  .tab-content .row > div {
+      padding-left: 5px;
+      padding-right: 5px;
+  }
+  .card {
+      box-shadow: 0 1px 10px #eee;
+      margin: 0 0 1.5rem;
+      border: none;
+      &__bgImg {
+          height: 145px;
+          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: 1.125rem;
+          font-weight: bold;
+      }
+      &__text {
+          color: #43484C;
+      }
+  }
+}
+.infoContent__navBlock {
+    padding-top: 0rem;
+}
+.infoContent__navBlock.tab_sticky + .tab-content {
+    padding-top: 60.8px;
+}
+
+.freeCall {
+    position: fixed;
+    bottom: 78px;
+    z-index: 11;
+    width: 100%;
+    text-align: center;
+    background: linear-gradient(180deg, rgba(244, 244, 244, 0.9) 0%, rgba(244, 244, 244, 0.9) 100%);
+    &__btn {
+        color: #fff;
+        background-color: #EE7800;
+        border-color: #EE7800;
+    }
+}
+
+.fixed-btn {
+    position: fixed;
+    right: 15px;
+    bottom: 5.5rem;
+    z-index: 15;
+    @media (min-width: $horizontal) {
+        bottom: 5rem;
+    } 
+    .btn-gotop {
+        
+        padding: 1rem .65rem;
+        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);
+    }
+}
+
+.like {
+    display: none;
+}

css/list-style.css

@@ -0,0 +1,1050 @@
+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;
+  z-index: 1012;
+}
+
+.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__detail__r a {
+  color: #727679;
+}
+
+.content .infoCard__detail__r a:hover {
+  color: #EE7800;
+}
+
+.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%;
+}
+
+.content .infoCard .scMedia span {
+  width: 16%;
+}
+
+.content .infoCard .scMedia span 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: -1;
+  width: 100%;
+  opacity: 0;
+  -webkit-transition: opacity .5s;
+  transition: opacity .5s;
+}
+
+.nav-collapse-fixed.sticky {
+  display: block;
+  opacity: 1;
+  z-index: 1010;
+}
+
+.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;
+}
+
+.like {
+  display: none;
+}
+/*# sourceMappingURL=list-style.css.map */

css/list-style.scss

@@ -0,0 +1,823 @@
+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;
+              z-index: 1012;
+              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;
+            a {
+                color: #727679;
+                &:hover {
+                    color: #EE7800;
+                }
+            }
+
+        }
+    }
+    .scMedia {
+        display: flex;
+        padding: 1rem 0;
+        width: 100%;
+        margin-left: auto;
+        margin-right: auto;
+        justify-content: space-around;
+        a {
+            width: 16%;
+            img {
+                width: 100%;
+            }
+        }
+        span {
+            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: -1;
+    width: 100%;
+    opacity: 0;
+    transition: opacity .5s;
+    &.sticky {
+        display: block;
+        opacity: 1;
+        z-index: 1010;
+    }
+    .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;
+  }
+}
+
+.like {
+    display: none;
+}

index_designerList.html

@@ -0,0 +1,1746 @@
+<!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 hero__img" src="" 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" >
+                </div>
+                <h2 class="infoCard__name"></h2>
+                <span class="mb-3 d-inline-block">設計師</span>
+                <h4 class="mb-3 infoCard__company">恆岳空間設計</h4>
+                <strong class="mb-3 infoCard__seo"></strong>
+                <div class="infoCard__approve mb-3">
+                  ★老屋翻新‧住宅改造
+                </div>
+                <div class="infoCard__detail">
+                  <div class="infoCard__basics">
+                    <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>諮詢專線：</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>
+                  
+                  <div class="infoCard__detail other">
+                    <div class="infoCard__branches">
+                      <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>
+                    </div>
+                    <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>
+                    <div class="infoCard__terms">
+                      <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>
+                    
+                  </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>
+                    <span>
+                      <img src="https://hhh.com.tw/assets/images/rv_web/like-o.svg" class="dislike" alt="">
+                      <img src="https://hhh.com.tw/assets/images/rv_web/like.svg" class="like" alt="">
+                    </span>
+                  </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-vr360-tab"
+                      data-bs-toggle="pill" data-bs-target="#pills-vr360" type="button" role="tab"
+                      aria-controls="pills-vr360" aria-selected="false" data-link="https://hhh.com.tw/columns/lists/">VR 360</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 pill-aside" 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-vr360-tab"
+                        data-bs-toggle="pill" data-bs-target="#pills-vr360" type="button" role="tab"
+                        aria-controls="pills-columns" aria-selected="false" data-link="https://hhh.com.tw/columns/lists/">VR 360</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-vr360" role="tabpanel"
+                    aria-labelledby="pills-vr360-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>
+                  </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 class="company__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_designerList_mb.html

@@ -0,0 +1,1327 @@
+<!DOCTYPE html>
+<html lang="zh_TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"">
+    <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-mb.css">
+</head>
+<body>
+  <div style="overflow-x:hidden;" class="wholeBody">
+    <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
+        <div class="container-fluid" style="padding:0 8px;margin:0;">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <a href="https://m.hhh.com.tw/" class="navbar-brand"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="141"></a>
+            <div class="navbar-brand navbar-search me-0 d-flex align-items-center">
+                <img width="25" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMC4wMDMiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMC4wMDMgMjAiPgogIDxnIGlkPSJzZWFyY2giIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjA1KSI+CiAgICA8cGF0aCBpZD0iUGF0aF8yMjcyIiBkYXRhLW5hbWU9IlBhdGggMjI3MiIgZD0iTTE5Ljg4LDE4Ljk4bC00Ljg2Mi00Ljg2YTguNTM5LDguNTM5LDAsMSwwLS44NDMuODQzbDQuODYyLDQuODZhLjYuNiwwLDAsMCwuNDIxLjE3Ny41ODQuNTg0LDAsMCwwLC40MjEtLjE3N0EuNi42LDAsMCwwLDE5Ljg4LDE4Ljk4Wk0xLjI0Myw4LjUyOGE3LjMzMyw3LjMzMywwLDEsMSw3LjMzMyw3LjMzNUE3LjM0LDcuMzQsMCwwLDEsMS4yNDMsOC41MjhaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwKSIgZmlsbD0iI2VlNzgwMCIvPgogIDwvZz4KPC9zdmc+Cg==" alt="">
+            </div>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            </div>
+        </div>
+    </nav>
+
+    <section class="w-100 mb__hero">
+      <div class="mb__hero__bgImg" style="background-image: url(https://cloud.hhh.com.tw/upload/_hdesigner/background_mobile_447_20210128104517.jpg);">
+      </div>
+    </section>
+    <section class="mb__content container-fluid">
+      <div class="row">
+        <div class="col-12 col-md-3 position-relative">
+          <div class="mb__infoCard">
+            <div class="mb__infoCard__avatar mx-auto mb-3" style="background-image: url(https://cloud.hhh.com.tw/gs/designer/designer494_00.jpg);">
+            </div>
+            <h2 class="mt-3 mb__infoCard__name">蔡岳儒</h2>
+            <span class="mb-3 d-inline-block mb__infoCard__span">設計師</span>
+            <h4 class="mb-3 mb__infoCard__cmy">恆岳空間設計</h4>
+            <strong class="mb-3 mb__infoCard__seo">恆岳空間設計｜蔡岳儒 室內設計師，為台北老屋翻新好評推薦的室內設計師，
+                將老屋妙手回春成現代風小豪宅，亦擅長置入日式精闢手工藝術融入室內空間設計中。</strong>
+            <div class="mb__infoCard__approve mb-3">
+              ★老屋翻新‧住宅改造
+            </div>
+            <div class="mb__infoCard__detail">
+              <div class="mb__infoCard__basics">
+                  <aside class="d-flex">
+                    <div class="mb__infoCard__detail__l">
+                      <div>免費專線：</div>
+                    </div>
+                    <div class="mb__infoCard__detail__r">
+                      <a href="tel:0809000123,19499" class="text-hhh">0809-000-123#18890</a>
+                    </div>
+                  </aside>
+                  <aside class="d-flex">
+                    <div class="mb__infoCard__detail__l">
+                      <div>諮詢專線：</div>
+                    </div>
+                    <div class="mb__infoCard__detail__r">
+                      <div>0809-000-123#18890</div>
+                    </div>
+                  </aside>
+                  <aside class="d-flex">
+                    <div class="mb__infoCard__detail__l">
+                      <div>諮詢專線：</div>
+                    </div>
+                    <div class="mb__infoCard__detail__r">
+                      <div>0937-070-794</div>
+                    </div>
+                  </aside>
+                  <aside class="d-flex">
+                    <div class="mb__infoCard__detail__l">
+                      <div>公司傳真：</div>
+                    </div>
+                    <div class="mb__infoCard__detail__r">
+                      <div>02-2562-7002</div>
+                    </div>
+                  </aside>
+                  <aside class="d-flex">
+                    <div class="mb__infoCard__detail__l">
+                      <div>公司地址：</div>
+                    </div>
+                    <div class="mb__infoCard__detail__r">
+                      <div>台北市中山區林森北路50號4樓之一</div>
+                    </div>
+                  </aside>
+                  <aside class="d-flex">
+                    <div class="mb__infoCard__detail__l">
+                      <div>電子信箱：</div>
+                    </div>
+                    <div class="mb__infoCard__detail__r">
+                      <div>hengyuehdesign@gmail.com,gakuju@gmail.com</div>
+                    </div>
+                  </aside>
+                  <aside class="d-flex">
+                    <div class="mb__infoCard__detail__l">
+                      <div>公司網址：</div>
+                    </div>
+                    <div class="mb__infoCard__detail__r">
+                      <div>
+                        http://www.hengyueh.com.tw/</div>
+                    </div>
+                  </aside>
+              </div>
+                  <div class="mb__infoCard__more my-3">
+                    <i class="fa fa-chevron-down" aria-hidden="true"></i>
+                  </div>
+                  <div class="mb__infoCard__detail other">
+                    <div class="mb__infoCard__branches">
+                      <aside class="d-flex">
+                        <div class="mb__infoCard__detail__l">
+                          <div>分公司地址：</div>
+                        </div>
+                        <div class="mb__infoCard__detail__r">
+                          <div>台北市中山區林森北路50號4樓之一</div>
+                        </div>
+                      </aside>
+                      <aside class="d-flex">
+                        <div class="mb__infoCard__detail__l">
+                          <div>分公司電話：</div>
+                        </div>
+                        <div class="mb__infoCard__detail__r">
+                          <div>02-2562-7755</div>
+                        </div>
+                      </aside>
+                      <aside class="d-flex">
+                        <div class="mb__infoCard__detail__l">
+                          <div>分公司傳真：</div>
+                        </div>
+                        <div class="mb__infoCard__detail__r">
+                          <div>02-2562-7002</div>
+                        </div>
+                      </aside>
+                      <aside class="d-flex">
+                      <div class="mb__infoCard__detail__l">
+                        <div>分公司地址：</div>
+                      </div>
+                      <div class="mb__infoCard__detail__r">
+                        <div>上海市闵行区东川路2688号</div>
+                      </div>
+                    </aside>
+                    </div>
+                    <aside class="d-flex">
+                      <div class="mb__infoCard__detail__l title mt-5 mb-3">
+                        <div>接案條件</div>
+                      </div>
+                      <div class="infoCard__detail__r">
+                        <div></div>
+                      </div>
+                    </aside>
+                    <div class="mb__infoCard__terms">
+                      <aside class="d-flex">
+                        <div class="mb__infoCard__detail__l">
+                          <div>接案預算：</div>
+                        </div>
+                        <div class="mb__infoCard__detail__r">
+                          <div>不限</div>
+                        </div>
+                      </aside>
+                      <aside class="d-flex">
+                        <div class="mb__infoCard__detail__l">
+                          <div>接案坪數：</div>
+                        </div>
+                        <div class="mb__infoCard__detail__r">
+                          <div>不限</div>
+                        </div>
+                      </aside>
+                      <aside class="d-flex">
+                        <div class="mb__infoCard__detail__l">
+                          <div>特殊接案：</div>
+                        </div>
+                        <div class="mb__infoCard__detail__r">
+                          <div>不限</div>
+                        </div>
+                      </aside>
+                      <aside class="d-flex">
+                        <div class="mb__infoCard__detail__l">
+                          <div>收費方式：</div>
+                        </div>
+                        <div class="mb__infoCard__detail__r">
+                          <div>請來電洽詢 / 【丈量費】NT$5,000元(透天別墅另計) *此費用含實地丈量、需求訪談、
+                            初步平面配置與風格提案 *以上費用於簽設計合約時，可全額折抵</div>
+                        </div>
+                      </aside>
+                      <aside class="d-flex">
+                        <div class="mb__infoCard__detail__l">
+                          <div>付費方式：</div>
+                        </div>
+                        <div class="mb__infoCard__detail__r">
+                          <div>簽約付30％、依工程進度分兩次，各付30％、完工驗收收10％</div>
+                        </div>
+                      </aside>
+                      <aside class="d-flex">
+                        <div class="mb__infoCard__detail__l">
+                          <div>付費方式：</div>
+                        </div>
+                        <div class="mb__infoCard__detail__r">
+                          <div>簽約付30％、依工程進度分兩次，各付30％、完工驗收收10％</div>
+                        </div>
+                      </aside>
+                      <aside class="d-flex">
+                        <div class="mb__infoCard__detail__l">
+                          <div>接案區域：</div>
+                        </div>
+                        <div class="mb__infoCard__detail__r">
+                          <div>北區,中區,南區,大陸</div>
+                        </div>
+                      </aside>
+                      <aside class="d-flex">
+                        <div class="mb__infoCard__detail__l">
+                          <div>接案類型：</div>
+                        </div>
+                        <div class="mb__infoCard__detail__r">
+                          <div>小坪數,標準格局,別墅,大坪數,樓中樓,商業空間,工作空間,餐飲空間,民宿旅館,公共空間</div>
+                        </div>
+                      </aside>
+                      <aside class="d-flex">
+                        <div class="mb__infoCard__detail__l">
+                          <div>接案風格：</div>
+                        </div>
+                        <div class="mb__infoCard__detail__r">
+                          <div>現代風,鄉村風,古典風,休閒多元,美式風,奢華風,新古典,日式禪風,東方風,混搭風,前衛風,北歐風,工業風,異國風</div>
+                        </div>
+                      </aside>
+                    </div>
+                  </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 px-0">
+          <div class="infoContent">
+            <div class="bg-white infoContent__navBlock">
+              <ul class="nav d-flex nav-pills flex-wrap justify-content-around" 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> -->
+            </div>
+            <div class="row">
+              <div class="col-12 mx-0 mt-5">
+                <div class="d-flex justify-content-end mb-3 mx-3">
+                  <div class="likeSee">
+                    <a href="">人氣</a>
+                    <span class="likeSee__divider"></span>
+                    <a href="">最新</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="tab-content mt-1" 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-6 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-6 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-6 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-6 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-6 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-6 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-6 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-6 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-6 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-6 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-6 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>
+    <!-- <section class="sec-guessLike">
+      <h3 class="px-3 pb-1">猜你喜歡</h3>
+      <div class="container-fluid" style="padding: 0 15px;margin:0;">
+        <h4 class="sec-guessLike__title">影音</h4>
+        <div class="row">
+          <div class="col mb-3">
+            <div class="sec-guessLike__img mb-2">
+            </div>
+            <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
+          </div>
+          <div class="col mb-3">
+            <div class="sec-guessLike__img mb-2">
+            </div>
+            <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
+          </div>
+        </div>
+        <h4 class="sec-guessLike__title">個案</h4>
+        <div class="row">
+          <div class="col mb-3">
+            <div class="sec-guessLike__img mb-2">
+            </div>
+            <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
+          </div>
+          <div class="col mb-3">
+            <div class="sec-guessLike__img mb-2">
+            </div>
+            <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
+          </div>
+        </div>
+        <h4 class="sec-guessLike__title">專欄</h4>
+        <div class="row">
+          <div class="col mb-3">
+            <div class="sec-guessLike__img mb-2">
+            </div>
+            <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
+          </div>
+          <div class="col mb-3">
+            <div class="sec-guessLike__img mb-2">
+            </div>
+            <p class="sec-guessLike__txt">會議室、教室開關、巡查、空調開關及溫度設</p>
+          </div>
+        </div>
+      </div>
+    </section> -->
+    <div class="fixed-btn">
+      <!-- <div class="btn-gotop mb-2">
+        <img src="images/gotop.png" width="28" alt="">
+      </div> -->
+      <div class="btn-gotop">
+        <img src="images/gotop.webp" width="28" alt="">
+      </div>
+    </div>
+    <div class="freeCall py-3">
+      <button class="btn freeCall__btn" >
+        <i class="fa fa-phone" aria-hidden="true"></i>免付費電話
+      </button>
+    </div>
+    <div style="margin-bottom:120px;"></div>
+    <!-- bottom fixed menu -->
+    <div class="container-fluid px-0 m-0 fixed_menu">
+      <div class="row gx-2 ps-1 pe-2">
+        <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/about/request/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/40a8bf5.svg" alt=""></a></div>
+        <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/about/calculator/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/170ebf4.svg" alt=""></a></div>
+        <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/decoquery/lists/address/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/479aa61.svg" alt=""></a></div>
+        <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/program/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/dc6b655.svg" alt=""></a></div>
+        <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/login/index" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/76749fd.svg" alt=""></a></div>
+      </div>
+    </div>
+    <div class="sec-menu">
+      <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
+        <div class="container-fluid" style="padding:0 8px;margin:0;">
+            <div class="navbar-brand navbar-back me-0">
+              <i class="fas fa-chevron-left"></i>
+            </div>
+            <a href="#" class="navbar-brand"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="141"></a>
+            <div class="navbar-brand navbar-search me-0">
+            </div>
+        </div>
+      </nav>
+      <div class="container-fluid sec-menu-block px-0">
+        
+          <div class="navbar sec-menu-list w-100">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+              <li class="nav-item">
+                <a class="nav-link active text-main d-flex align-items-center" aria-current="page" href="https://shop.hhh.com.tw/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/cart.svg" alt=""></div>
+                  <p>+好物</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link text-main d-flex align-items-center" href="https://m.hhh.com.tw/about/calculator/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/budget.svg" alt=""></div>
+                  <p>估預算</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item dropdown">
+                <span class="nav-link text-main d-flex align-items-center" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/style.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/photos/index/`;"><p>找風格</p></a>
+                  <div class="expand"><i class="fas fa-chevron-down"></i></div>
+                </span>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown" style="position: static;">
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/photos/lists/nordic-style/">北歐風</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/photos/lists/modern-style/">現代風</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/photos/lists/industry-style/">工業風</a></li>
+                </ul>
+              </li>
+              <hr>
+              <li class="nav-item dropdown">
+                <span class="nav-link d-flex align-items-center" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/designs.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/cases/lists/`;"><p>挑設計</p></a>
+                  <div class="expand"><i class="fas fa-chevron-down"></i></div>
+                </span>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown2" style="position: static;transform: none;">
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/cases/lists/small-ctype/">小坪數</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/cases/lists/renovation-condition/" target="_blank">老屋翻新</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/search/lists/case/%E9%A2%A8%E6%B0%B4-keyword/">風水</a></li>
+                </ul>
+              </li>
+              <hr>
+              <li class="nav-item dropdown">
+                <span class="nav-link d-flex align-items-center" id="navbarDropdown3" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/videos.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/videos/lists/`;"><p>看影音</p></a>
+                  <div class="expand"><i class="fas fa-chevron-down"></i></div>
+                </span>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown3" style="position: static;transform: none;">
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/videos/lists/">發燒影音</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/video-list-5945tw.php">呼叫師傅</a></li>
+                </ul>
+              </li>
+              <hr>
+              <li class="nav-item dropdown">
+                <span class="nav-link d-flex align-items-center" id="navbarDropdown4" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/person.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/designers/lists/`;"><p>設計師</p></a>
+                  <div class="expand"><i class="fas fa-chevron-down"></i></div>
+                </span>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown4" style="position: static;transform: none;">
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/designers/lists/">設計師總覽</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://event.hhh.com.tw/2021-Most-Favorite-Designers/index.php" target="_blank">觀眾最愛設計師</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://event.hhh.com.tw/topglory/" target="_blank">Glory國際大賞</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://hhh.com.tw/event170427/" target="_blank">老屋翻新</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/decoquery/lists/address/" target="_blank">查証照</a></li>
+                </ul>
+              </li>
+              <hr>
+              <li class="nav-item dropdown">
+                <span class="nav-link d-flex align-items-center" id="navbarDropdown5" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/pen.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/columns/lists/all-columntypea/`;"><p>專欄文章</p></a>
+                  <div class="expand"><i class="fas fa-chevron-down"></i></div>
+                </span>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown5" style="position: static;transform: none;">
+                  <hr>
+                  <li class="nav-item dropdown">
+                    <span class="dropdown-item nav-link sub-link" id="subDropdown1">
+                      <a href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/"><p>編輯精選</p></a>
+                      <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
+                    </span>
+                    <ul class="sub-menu ps-0" style="position: static;transform: none;">
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/hometrends-columntypeb/">居家趨勢</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/hotrank-columntypeb/">人氣排行</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/archdesign-columntypeb/">建築設計</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/styleselection-columntypeb/">風格選店</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/charitable-columntypeb/">公益活動</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/exhibition-columntypeb/">展演資訊</a></li>
+                    </ul>
+                  </li>
+                  <hr>
+                  <li class="nav-item">
+                    <span class="dropdown-item nav-link sub-link">
+                      <a href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/"><p>居家設計</p></a>
+                      <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
+                    </span>
+                    <ul class="sub-menu ps-0" style="position: static;transform: none;">
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/smallhouse-columntypeb/">小宅規劃</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/oldhouse-columntypeb/">老屋翻新</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/stylebuild-columntypeb/">風格營造</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/color-columntypeb/">配色佈置</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/goodhouse-columntypeb/">好宅特輯</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/proposal-columntypeb/">設計提案</a></li>
+                    </ul>
+                  </li>
+                  <hr>
+                  <li class="nav-item">
+                    <span class="dropdown-item nav-link sub-link">
+                      <a href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/"><p>裝修前線</p></a>
+                      <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
+                    </span>
+                    <ul class="sub-menu ps-0" style="position: static;transform: none;">
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/news-columntypeb/">新聞最前線</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/allocation-columntypeb/">預算分配</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/process-columntypeb/">施工流程</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/knowledge-columntypeb/">建材知識</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/decorating-columntypeb/">裝潢撇步</a></li>
+                    </ul>
+                  </li>
+                  <hr>
+                  <li class="nav-item">
+                    <span class="dropdown-item nav-link sub-link">
+                      <a href="https://m.hhh.com.tw/columns/lists/plus-columntypea/"><p>生活PLUS</p></a>
+                      <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
+                    </span>
+                    <ul class="sub-menu ps-0" style="position: static;transform: none;">
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/fengshui-columntypeb/">居家風水</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/housekeeping-columntypeb/">家事清潔</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/storageskills-columntypeb/">收納技巧</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/renovation-columntypeb/">改造修繕</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/retire-columntypeb/">退休好幸福</a></li>
+                    </ul>
+                  </li>
+                  <hr>
+                  <li class="nav-item">
+                    <span class="dropdown-item nav-link sub-link">
+                      <a href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/"><p>品牌好物</p></a>
+                      <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
+                    </span>
+                    <ul class="sub-menu ps-0" style="position: static;transform: none;">
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/furnishings-columntypeb/">家具家飾</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/appliances-columntypeb/">美型家電</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/recommend-columntypeb/">推薦廚衛</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/homegoods-columntypeb/">居家好物</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/quality-columntypeb/">優質建材</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/brandnews-columntypeb/">品牌快訊</a></li>
+                    </ul>
+                  </li>
+                  <hr>
+                  <li class="nav-item">
+                    <span class="dropdown-item nav-link sub-link">
+                      <a href="https://m.hhh.com.tw/columns/lists/focus-columntypea/"><p>房市焦點</p></a>
+                      <div class="expand subexpand"><i class="fas fa-chevron-down"></i></div>
+                    </span>
+                    <ul class="sub-menu ps-0" style="position: static;transform: none;">
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/housingnews-columntypeb/">房市新聞</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/specsearch-columntypeb/">建案特搜</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/buyandsell-columntypeb/">買屋賣屋</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/mortgage-columntypeb/">房貸税務</a></li>
+                      <hr>
+                      <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/renting-columntypeb/">租房須知</a></li>
+                    </ul>
+                  </li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/topic/lists/1-page/new-sort/">主題企劃</a></li>
+                </ul>
+              </li>
+              <hr>
+              <li class="nav-item dropdown">
+                <span class="nav-link d-flex align-items-center" id="navbarDropdown6" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/sofa.svg" alt=""></div><a onclick="window.location.href=`https://m.hhh.com.tw/products/lists/`;"><p>居家商品</p></a>
+                  <div class="expand"><i class="fas fa-chevron-down"></i></div>
+                </span>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown6" style="position: static;transform: none;">
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/">商品總覽</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/furniture-pcategorya/">傢俱</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/household-pcategorya/">家電</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/kitchen-pcategorya/">廚房</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/bathroom-pcategorya/">衛浴</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/products/lists/lighting-pcategorya/">照明</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/brands/lists/">品牌總覽</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/brand-index.php?brand_id=194">軟裝佈置</a></li>
+                  <hr>
+                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://event.hhh.com.tw/2021-Top-Brands/index.php">消費者愛用品牌</a></li>
+                </ul>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center" href="https://m.hhh.com.tw/builder/lists/">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/building.svg" alt=""></div>
+                  <p>新建案</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center" href="https://m.hhh.com.tw/forum/category/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/discuss.svg" alt=""></div>
+                  <p>討論區</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center" href="https://event.hhh.com.tw/agent/lecture.html" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/freelecture.svg" alt=""></div>
+                  <p>免費報名幸福講堂</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item d-flex align-items-center">
+                <a class="nav-link d-flex align-items-center" href="https://event.hhh.com.tw/agent/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/agent.svg" alt=""></div>
+                  <p>幸福經紀人</p>
+                  <span class="ms-2"><a class="text-phone" href="tel:0800-366-086">0800-366-086</a></span></a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center" href="http://gstv.com.tw/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/tv.svg" alt=""></div>
+                  <p>幸福空間居家台</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center" href="https://event.hhh.com.tw/contest/2018/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/prize.svg" alt=""></div>
+                  <p>ADA 亞洲設計獎</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center" href="https://event.hhh.com.tw/2019global-award/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/champion.svg" alt=""></div>
+                  <p>國際設計大獎代辦</p>
+                </a>
+              </li>
+              <hr>
+              <li class="nav-item">
+                <a class="nav-link d-flex align-items-center mb-1" href="https://www.leju.com.tw/" target="_blank">
+                  <div class="d-inline-block link_div me-2"><img src="images/menu/Image 1@2x.png" alt="" width="20"></div>
+                  <p>樂居網</p>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="sec-menu-follows w-100">
+            <h5 class="sec-menu-follows-title w-100">追蹤我們</h5>
+            <div class="d-flex justify-content-between">
+              <a href="https://www.facebook.com/hhhfb"><img src="images/menu/fb.svg" alt="" class="d-inline-block"></a>
+              <a href="https://line.me/ti/p/%40ovs4341s"><img src="images/menu/line.svg" alt="" class="d-inline-block"></a>
+              <a href="https://www.youtube.com/user/gorgeousspace"><img src="images/menu/youtube.svg" alt="" class="d-inline-block"></a>
+              <a href="https://www.instagram.com/gorgeous_space/"><img src="images/menu/instagram@2x.png" alt="" width="43" class="d-inline-block"></a>
+              <a href=""><img src="images/menu/pinterest.svg" alt="" class="d-inline-block"></a>
+            </div>
+            <div class="py-4">
+              <a href="https://www.facebook.com/agent.hhh.com.tw" class="follows-fp"><img src="images/menu/fb.svg" alt="" width="20" class="d-inline-block me-2">幸福經紀人粉絲專頁</a>
+              <a href="https://www.facebook.com/retire.tw/" class="follows-fp"><img src="images/menu/fb.svg" alt="" width="20" class="d-inline-block me-2">退休好幸福粉絲專頁</a>
+            </div>
+            <div class="sec-menu-links">
+              <div class="d-flex mb-2">
+                <a href="https://m.hhh.com.tw/about/">關於我們</a>
+                <a href="https://m.hhh.com.tw/about/contact/">聯絡我們</a>
+                <a href="https://m.hhh.com.tw/about/privacy_policy/">隱私保護</a>
+                <a href="https://m.hhh.com.tw/about/timeline/">公司歷程</a>
+              </div>
+              <div class="d-flex">
+                <a href="https://www.104.com.tw/company/d6hr8sg">企業徵才</a>
+                <a href="https://m.hhh.com.tw/about/sitemap/">網站地圖</a>
+              </div>
+            </div>
+            <div class="copyright text-center">幸福空間　版權所有<br>© Gorgeous Space Co.Ltd. All Rights Reserved</div>
+          </div>
+      
+      </div>
+    </div>
+
+    <div class="sec-search">
+      <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
+        <div class="container-fluid" style="padding:0 8px;margin:0;">
+            <div class="navbar-brand navbar-backs me-0">
+              <i class="fas fa-chevron-left"></i>
+            </div>
+            <a href="#" class="navbar-brand"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="141"></a>
+            <div class="navbar-brand navbar-search me-0">
+            </div>
+        </div>
+      </nav>
+      <div class="container-fluid sec-search-block px-0">
+        <div class="sec-search-list w-100">
+          <div class="sec-search-form">
+            <input type="text" name="searchQuery" class="searchBar">
+            <button type="button" class="searchBtn">
+              <img width="30" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMC4wMDMiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMC4wMDMgMjAiPgogIDxnIGlkPSJzZWFyY2giIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjA1KSI+CiAgICA8cGF0aCBpZD0iUGF0aF8yMjcyIiBkYXRhLW5hbWU9IlBhdGggMjI3MiIgZD0iTTE5Ljg4LDE4Ljk4bC00Ljg2Mi00Ljg2YTguNTM5LDguNTM5LDAsMSwwLS44NDMuODQzbDQuODYyLDQuODZhLjYuNiwwLDAsMCwuNDIxLjE3Ny41ODQuNTg0LDAsMCwwLC40MjEtLjE3N0EuNi42LDAsMCwwLDE5Ljg4LDE4Ljk4Wk0xLjI0Myw4LjUyOGE3LjMzMyw3LjMzMywwLDEsMSw3LjMzMyw3LjMzNUE3LjM0LDcuMzQsMCwwLDEsMS4yNDMsOC41MjhaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwKSIgZmlsbD0iI2VlNzgwMCIvPgogIDwvZz4KPC9zdmc+Cg==" alt="">
+            </button>
+          </div>
+          <hr>
+          <div class="sec-search-hots">
+            <h4 class="sec-search-hots__title">熱搜關鍵字</h4>
+            <hr>
+            <div class="d-flex flex-wrap">
+              <a class="sec-search-hots__link">小坪數</a>
+              <a class="sec-search-hots__link">收納</a>
+              <a class="sec-search-hots__link">軟裝佈置</a>
+              <a class="sec-search-hots__link">幸福經紀人</a>
+              <a class="sec-search-hots__link">承炫設計</a>
+              <a class="sec-search-hots__link">風水</a>
+              <a class="sec-search-hots__link">北歐風</a>
+              <a class="sec-search-hots__link">周石設計</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="sec-login">
+      <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
+        <div class="container-fluid" style="padding:0 8px;margin:0;">
+            <div class="navbar-brand navbar-backs me-0">
+              <i class="fas fa-chevron-left"></i>
+            </div>
+            <a href="#" class="navbar-brand"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="141"></a>
+            <div class="navbar-brand navbar-search me-0">
+            </div>
+        </div>
+      </nav>
+      <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 class="sec-favor d-none">
+      <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-main fixed-top">
+        <div class="container-fluid" style="padding:0 8px;margin:0;">
+            <div class="navbar-brand navbar-back-fav me-0">
+              <i class="fas fa-chevron-left"></i>
+            </div>
+            <a href="#" class="navbar-brand"><img src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="141"></a>
+            <div class="navbar-brand navbar-search me-0">
+            </div>
+        </div>
+      </nav>
+      <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="5e" />
+                  <label class="mr fs-label-chbox radio" for="5e">老屋翻新</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>
+    <!-- bootstrap JS -->
+    <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 src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+    <script src="js/lazy-load.js" async></script>
+    <script async defer src="js/index-list-mb.js"></script>
+</body>
+</html>

js/index-list-mb.js

@@ -0,0 +1,256 @@
+let userAgent;
+let isSafari = false;
+let browserName;
+window.onload = function(){
+  //window.scrollBy(0, 1);
+  if(screen.width >= 901){
+      window.location.href = "../index_designerList.html";   
+  }
+  userAgent = navigator.userAgent;
+  detectBrowser(userAgent);
+  detectDirection ();
+  let result; 
+  let designer;
+  let id = 0;
+  $.ajax({
+    method: "GET",
+    url: "./json/designers.json",
+    dataType: "json",
+  }).done(function (msg) {
+    designer = [...msg][id];
+    console.log(designer)
+    renderinfoCard(designer)
+    // renderTab(designer['Content'])
+    // renderTabContent(designer['Content'])
+  });
+}
+let over = document.querySelector('.infoContent__navBlock').offsetTop;
+
+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 detectDirection () {
+  let height = (window.screen.width * 2) / 3;
+  
+  $('.sec-02 .slide-item').css('height', `${height}px`);
+  let topHeight = (window.screen.width * 30) / 131;
+  
+  $('.sec-00 .slide-item').css('height', `${topHeight}px`);
+  $('.sec-00 .container-fluid').css('height', `${topHeight}px`);
+}
+
+function renderinfoCard(designer) {
+  $('.mb__hero__bgImg').attr('backgroundImage', `url(${designer['BannerImg']})`);
+  $('.mb__infoCard__avatar').css('backgroundImage', `url(${designer['Designerimg']})`)
+  $('.mb__infoCard__name').text(designer['DesignerName']);
+  $('.mb__infoCard__seo').text(designer['Description']);
+  $('.mb__infoCard__cmy').text(designer['CompanyName']);
+  if(designer['Approve'] !== '') {
+      $('.mb__infoCard__approve').text(designer['Approve']);
+  }
+  // Basics
+  let str = '';
+  for(let i = 0;i < designer['Basics'].length; i ++) {
+      str += `<aside class="d-flex">
+                  <div class="mb__infoCard__detail__l">
+                      <div>${designer['Basics'][i].title}</div>
+                  </div>
+                  <div class="mb__infoCard__detail__r">
+                      <a href="${designer['Basics'][i].link}">${designer['Basics'][i].data}</a>
+                  </div>
+              </aside>`
+  }
+  $('.mb__infoCard__basics').html(str);
+
+  // Branches
+  let otherStr = '';
+  for(let i = 0;i < designer['Branches'].length; i ++) {
+      otherStr += `<aside class="d-flex">
+                  <div class="mb__infoCard__detail__l">
+                      <div>${designer['Branches'][i].title}</div>
+                  </div>
+                  <div class="mb__infoCard__detail__r">
+                      <a href="${designer['Branches'][i].link}" >${designer['Branches'][i].data}</a>
+                  </div>
+              </aside>`
+  }
+  $('.mb__infoCard__branches').html(otherStr);
+
+  // scMedia
+  let mediaStr = '';
+  for(let i = 0;i < designer['scMedia'].length; i ++) {
+      if(i === 4) {
+        mediaStr += `<span>
+                    <img src="${designer['scMedia'][i].img}" class="dislike" alt="">
+                    <img src="https://hhh.com.tw/assets/images/rv_web/like.svg" class="like" alt="">
+                </span>`;
+    } else {
+        mediaStr += `<a href="${designer['scMedia'][i].link}">
+                    <img src="${designer['scMedia'][i].img}" alt="">
+                </a>`;
+    }
+  }
+  $('.scMedia').html(mediaStr);
+
+  document.querySelector('.dislike').addEventListener('click', function() {
+    $('.dislike').css('display', 'none');
+    $('.like').css('display', 'block');
+  })
+
+  document.querySelector('.like').addEventListener('click', function() {
+      $('.dislike').css('display', 'block');
+      $('.like').css('display', 'none');
+  })
+
+  // term condition
+  let termStr = '';
+  for(let i = 0;i < designer['Terms'].length; i ++) {
+      termStr += `<aside class="d-flex">
+                      <div class="mb__infoCard__detail__l">
+                          <div>${designer['Terms'][i].title}</div>
+                      </div>
+                      <div class="mb__infoCard__detail__r">
+                          <div>${designer['Terms'][i].data}</div>
+                      </div>
+                  </aside>`
+  }
+  $('.mb__infoCard__terms').html(termStr);
+}
+
+
+    window.addEventListener('scroll', fixedOnScroll);
+    const navBlock = document.querySelector('.infoContent__navBlock');
+    function fixedOnScroll() {
+      if(window.innerHeight < window.innerWidth){
+      } else {
+        detectDirection ();
+      }
+      
+        if(window.pageYOffset >= over){
+          navBlock.classList.add('tab_sticky');
+        } else if(window.pageYOffset < over) {
+          navBlock.classList.remove('tab_sticky');
+        }
+    }
+    
+    $('.navbar-toggler').click(function(){
+        $(".sec-menu").css('display', 'block');
+        $(".wholeBody").css('overflow-y', 'hidden');
+        $('.sec-menu-block').addClass('slidein');
+        $('.sec-menu-block').removeClass('slideout');
+    });
+    
+    $('.navbar-back').click(function(){
+        $(".sec-menu").css('display', 'none');
+        $(".wholeBody").css('overflow-y', 'scroll');
+        $('.sec-menu-block').removeClass('slidein');
+        $('.sec-menu-block').addClass('slideout');
+    });
+    
+    $('.subexpand').click(function(){
+        $(this).parent().next().toggleClass('show');
+        $(this).parent().toggleClass('show');
+    });
+    
+    $('.navbar-search').click(function(){
+        $(".sec-search").css('display', 'block');
+        $(".wholeBody").css('overflow-y', 'hidden');
+    })
+    
+    $('.navbar-backs').click(function(){
+        $(".sec-search").css('display', 'none');
+        $(".wholeBody").css('overflow-y', 'scroll');
+    });
+
+    $('.navbar-back-fav').click(function(){
+      $(".sec-favor").css('display', 'none');
+    })
+
+      $('.btn-gotop').click(function () {
+        $('html, body').animate({
+            scrollTop: 0
+        }, 500)
+    });
+
+    $(window).scroll(function() {
+		if ( $(this).scrollTop() > 500 ){
+        $('.fixed-btn').fadeIn(222);
+        $('.freeCall').fadeIn(222);
+		} else {
+      $('.fixed-btn').stop().fadeOut(222);
+      $('.freeCall').stop().fadeOut(222);
+    }
+    }).scroll();
+
+    
+const searchBtn = document.querySelector('.searchBtn');
+const searchBar = document.querySelector('.searchBar');
+const searchHotLink = document.querySelectorAll('.sec-search-hots__link');
+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/`;
+  }
+}
+
+function pressSearch(e) {
+  if (e.keyCode === 13) {
+    e.preventDefault();
+    search();
+  }
+}
+
+searchHotLink.forEach((item, i) => {
+  item.addEventListener('click', function() {
+    window.location.href = `https://m.hhh.com.tw/search/lists/case/${this.textContent}-keyword/`;
+  })
+})
+
+document.addEventListener('lazybeforeunveil', function(e){
+  var bg = e.target.getAttribute('data-bg');
+  if(bg){
+      e.target.style.backgroundImage = 'url(' + bg + ')';
+  }
+});
+
+$('.mb__infoCard__more').click(function() {
+  $(this).hide();
+  $('.other').css('display', 'block');
+  over = document.querySelector('.infoContent__navBlock').offsetTop;
+})
+
+
+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-list.js

@@ -0,0 +1,13 @@
+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');
+    }
+}
+

js/index.js

@@ -1,32 +1,50 @@
 let userAgent;
 let isSafari = false;
 let browserName;
+
+// pagination variables
+let num_per_page = 9;
+let n = 0;
+let totalPages = {
+    intro: 0,
+    video: 0,
+    columns: 0,
+    vr360: 0,
+    company: 0,
+};
+
 window.onload = function(){
     if(screen.width < 900){
-        window.location.href = "https://m3.hhh.com.tw/";   
+        window.location.href = "../index_designerList_mb.html";   
     }
     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);
-      });
+    let designer;
+    let id = 0;
+    $.ajax({
+        method: "GET",
+        url: "./json/realtime.json",
+        dataType: "json",
+    }).done(function (msg) {
+        result = [...msg];
+        renderSec00(result);
+    });
+    $.ajax({
+        method: "GET",
+        url: "./json/designers.json",
+        dataType: "json",
+    }).done(function (msg) {
+        designer = [...msg][id];
+        console.log(designer)
+        renderinfoCard(designer)
+        renderTab(designer['Content'])
+        renderTabContent(designer['Content'])
+        $(window).scroll(function() {
+            loadMore(designer);
+        })
+    });
 }
   
 
@@ -59,340 +77,207 @@ function detectBrowser(agent){
 
 
 
-    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 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 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>`
-            }
-            
+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);
+            
     }
+    $(`.${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 renderinfoCard(designer) {
+    $('.hero__img').attr('src', designer['BannerImg']);
+    $('.infoCard__avatar').css('backgroundImage', `url(${designer['Designerimg']})`)
+    $('.infoCard__name').text(designer['DesignerName']);
+    $('.infoCard__seo').text(designer['Description']);
+    $('.infoCard__company').text(designer['CompanyName']);
+    if(designer['Approve'] !== '') {
+        $('.infoCard__approve').text(designer['Approve']);
     }
-
-    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;
-            }
-        });
+    // Basics
+    let str = '';
+    for(let i = 0;i < designer['Basics'].length; i ++) {
+        str += `<aside class="d-flex">
+                    <div class="infoCard__detail__l">
+                        <div>${designer['Basics'][i].title}</div>
+                    </div>
+                    <div class="infoCard__detail__r">
+                        <a href="${designer['Basics'][i].link}">${designer['Basics'][i].data}</a>
+                    </div>
+                </aside>`
     }
-
-    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,
-        });
+    $('.infoCard__basics').html(str);
+
+    // Branches
+    let otherStr = '';
+    for(let i = 0;i < designer['Branches'].length; i ++) {
+        otherStr += `<aside class="d-flex">
+                    <div class="infoCard__detail__l">
+                        <div>${designer['Branches'][i].title}</div>
+                    </div>
+                    <div class="infoCard__detail__r">
+                        <a href="${designer['Branches'][i].link}" >${designer['Branches'][i].data}</a>
+                    </div>
+                </aside>`
     }
-
-    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>`;
-            }
+    $('.infoCard__branches').html(otherStr);
+
+    // scMedia
+    let mediaStr = '';
+    for(let i = 0;i < designer['scMedia'].length; i ++) {
+        if(i === 4) {
+            mediaStr += `<span>
+                        <img src="${designer['scMedia'][i].img}" class="dislike" alt="">
+                        <img src="https://hhh.com.tw/assets/images/rv_web/like.svg" class="like" alt="">
+                    </span>`;
+        } else {
+            mediaStr += `<a href="${designer['scMedia'][i].link}">
+                        <img src="${designer['scMedia'][i].img}" alt="">
+                    </a>`;
         }
-        $('.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;
-          }
-        })
     }
+    $('.scMedia').html(mediaStr);
+
+    document.querySelector('.dislike').addEventListener('click', function() {
+        $('.dislike').css('display', 'none');
+        $('.like').css('display', 'block');
+    })
+
+    document.querySelector('.like').addEventListener('click', function() {
+        $('.dislike').css('display', 'block');
+        $('.like').css('display', 'none');
+    })
+
+
+    // term condition
+    let termStr = '';
+    for(let i = 0;i < designer['Terms'].length; i ++) {
+        termStr += `<aside class="d-flex">
+                        <div class="infoCard__detail__l">
+                            <div>${designer['Terms'][i].title}</div>
+                        </div>
+                        <div class="infoCard__detail__r">
+                            <div>${designer['Terms'][i].data}</div>
+                        </div>
+                    </aside>`
+    }
+    $('.infoCard__terms').html(termStr);
+}
 
-    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>`
-            }
-            
+function renderTab(content) {
+    let tabTitleStr = '';
+    for(let i = 0;i < content.length; i ++) {
+        if(i == 0) {
+            tabTitleStr += `<li class="nav-item p-0 active" role="presentation">
+                                <a class="nav-item-link nav-item-active bg-transparent active" id="pills-${content[i]['Tabtag']}-tab"
+                                data-bs-toggle="pill" data-bs-target="#pills-${content[i]['Tabtag']}" type="button" role="tab"
+                                aria-controls="pills-${content[i]['Tabtag']}" aria-selected="false" data-link="https://hhh.com.tw/videos/lists/">${content[i]['Title']}</a>
+                            </li>`
+        } else {
+            tabTitleStr += `<li class="nav-item p-0" role="presentation">
+                            <a class="nav-item-link nav-item-active bg-transparent" id="pills-${content[i]['Tabtag']}-tab"
+                            data-bs-toggle="pill" data-bs-target="#pills-${content[i]['Tabtag']}" type="button" role="tab"
+                            aria-controls="pills-${content[i]['Tabtag']}" aria-selected="false" data-link="https://hhh.com.tw/videos/lists/">${content[i]['Title']}</a>
+                        </li>`
         }
-        $('.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));
     }
+    $('#pills-tab').html(tabTitleStr);
+    $('.pill-aside').html(tabTitleStr);
+}
+
 
-    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("");
+function renderTabContent(content) {
+    let tabStr = '';
+    for(let i = 0;i < content.length; i ++) {
+        let cardData = ''
+        if(content[i].info) {
+            for(let j = 0;j < content[i].info.length; j ++) {
+                cardData += `<div class="company__block">
+                                <h4 class="company__title">${content[i].info[j].title}</h4>
+                                <div class="company__text">
+                                    ${content[i].info[j].data}
+                                </div>
+                            </div>`
             }
-            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>
+            tabStr +=  `<div class="tab-pane fade " id="pills-${content[i]['Tabtag']}" role="tabpanel"
+                        aria-labelledby="pills-${content[i]['Tabtag']}-tab">
+                        <div class="row justfy-content-between">
+                            <div class="col-md-8">
+                                <article class="company__article">
+                                    ${cardData}
+                                </article>
+                            </div>
+                        </div>
                     </div>`
+        
+        } else {
+            for(let j = 0;j < (content[i].Carddata.length < num_per_page? content[i].Carddata.length: num_per_page); j ++) {
+                cardData += `<div class="col-md-4">
+                                <a href="" target="_blank">
+                                <div class="card">
+                                    <div class="card__bgImg" style="background-image: url(${content[i].Carddata[j]['imgURL']});">
+                                    </div>
+                                    <div class="card-body">
+                                    <h5 class="card-title card__title mt-0">${content[i].Carddata[j]['title']}</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>`
             }
-            
-        }
-        $(`.${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>`
+            tabStr +=  `<div class="tab-pane fade " id="pills-${content[i]['Tabtag']}" role="tabpanel"
+                        aria-labelledby="pills-${content[i]['Tabtag']}-tab">
+                        <div class="row work__row">
+                            ${cardData}
+                        </div>
+                    </div>`
+                    let key = content[i]['Tabtag'];
+                    totalPages[key] = content[i].Carddata.length;
         }
-        $('.dropbox__hots').html(`<strong class="dropbox__hots__title">熱搜關鍵字：</strong>${str}`);
+        
+        
     }
+    console.log(tabStr);
+    console.log(totalPages);
+    $('#pills-tabContent').html(tabStr);
+    $('#pills-intro').addClass('active', 'show');
+    $('#pills-intro').addClass('show');
+    $('#pills-video .card__bgImg').append('<img src="https://hhh.com.tw/assets/images/rv_web/play.svg" alt="" width="50" height="50">')
+    $('.infoContent .nav-item-link').click(checkTab);
+    checkTab();
+}
 
-
-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();
-    });
+function checkTab() {
+    if($('#pills-intro-tab').hasClass('active')) {
+      $('.likeSee').attr('hidden', false)
+    } else {
+      $('.likeSee').attr('hidden', true)
     }
 }
 
-tab2();
 
 let sticky = document.querySelector('.sec-00').offsetHeight;
 window.addEventListener('scroll', fixedOnScroll);
@@ -413,22 +298,54 @@ $(window).scroll(function() {
     } else {
         $('.fixed-btn').stop().fadeOut(222);
     }
+
 }).scroll();
 
+function loadMore(designer) {
+    let nowTab = document.querySelector('.infoContent .tab-pane.show')
+    if(nowTab === document.querySelector('#pills-intro')) {
+        let pageNum = Math.ceil(totalPages.intro / 9);
+        if ($(this).scrollTop() > 2300) {
+            if(n >= pageNum) {
+                n = pageNum;
+                return;
+              } else {
+                n ++;
+                console.log('test');
+                let append = '';
+                let d = designer['Content'][0].Carddata.slice(9*n, (9*n)+9);
+                for(let j = 0;j < d.length; j ++) {
+                    append += `<div class="col-md-4">
+                                    <a href="" target="_blank">
+                                    <div class="card">
+                                        <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
+                                        </div>
+                                        <div class="card-body">
+                                        <h5 class="card-title card__title mt-0">${d[j]['title']}</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>`
+                }
+                $('.work__row').append(append);
+            }
+        
+        }
+    }
+}
+
 $('.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');
@@ -437,92 +354,6 @@ $('.sec-00__close').click(function(){
     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');
@@ -531,93 +362,3 @@ document.addEventListener('lazybeforeunveil', function(e){
     }
 });
 
-// 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'
-      }); 
-    });
-

json/designers.json

@@ -0,0 +1,361 @@
+[
+  {
+      "_comment": "設計師",
+      "id": 0,
+      "BannerImg": "https://cloud.hhh.com.tw/upload/_hdesigner/background_769_20211122142507.jpg",
+      "CompanyName": "恆岳空間設計",
+      "DesignerName": "蔡岳儒",
+      "Designerimg": "https://cloud.hhh.com.tw/gs/designer/designer494_00.jpg",
+      "Description": "恆岳空間設計｜蔡岳儒 室內設計師，為台北老屋翻新好評推薦的室內設計師， 將老屋妙手回春成現代風小豪宅，亦擅長置入日式精闢手工藝術融入室內空間設計中。",
+      "Approve": "★老屋翻新‧住宅改造",
+      "Basics": [
+        {"title": "免費專線：", "link": "tel:0809-000-123#18890", "data": "0809-000-123#18890"},
+        {"title": "諮詢專線：", "link": "tel:02-2562-7755", "data": "02-2562-7755"},
+        {"title": "諮詢專線：", "link": "tel:0937-070-794", "data": "0937-070-794"},
+        {"title": "公司傳真：", "link": "tel:02-2562-7002", "data": "02-2562-7002"},
+        {"title": "公司地址：", "link": "台北市中山區林森北路50號4樓之一", "data": "台北市中山區林森北路50號4樓之一"},
+        {"title": "電子信箱：", "link": "mailto:hengyuehdesign@gmail.com,gakuju@gmail.com", "data": "hengyuehdesign@gmail.com,gakuju@gmail.com"},
+        {"title": "公司網址：", "link": "https://www.star-interiordesign.com", "data": "https://www.star-interiordesign.com"}
+      ],
+      "FreeCall": "0809-000-123#18890",
+      "ConsoleCall_1": "02-2562-7755",
+      "ConsoleCall_2": "0937-070-794",
+      "Fax": "02-2562-7002",
+      "Address": "台北市中山區林森北路50號4樓之一",
+      "Email": "hengyuehdesign@gmail.com,gakuju@gmail.com",
+      "Web": "https://www.star-interiordesign.com",
+      "Branches": [
+        {"title": "分公司地址：", "link": "台北市中山區林森北路50號4樓之一", "data": "台北市中山區林森北路50號4樓之一"},
+        {"title": "分公司電話：", "link": "tel:02-2562-7755", "data": "02-2562-7755"},
+        {"title": "分公司傳真：", "link": "tel:02-2562-7002", "data": "02-2562-7002"},
+        {"title": "分公司地址：", "link": "上海市闵行区东川路2688号", "data": "上海市闵行区东川路2688号"}
+      ],
+      "Budget": "不限",
+      "Square": "不限",
+      "SpecialCase": "不限",
+      "Charge": "請來電洽詢 / 【丈量費】NT$5,000元(透天別墅另計) *此費用含實地丈量、需求訪談、初步平面配置與風格提案 *以上費用於簽設計合約時，可全額折抵",
+      "Pay": "簽約付30％、依工程進度分兩次，各付30％、完工驗收收10％",
+      "WorkLoc": "北區,中區,南區,大陸",
+      "WorkType": "小坪數,標準格局,別墅,大坪數,樓中樓,商業空間,工作空間,餐飲空間,民宿旅館,公共空間",
+      "WorkStyle": "現代風,鄉村風,古典風,休閒多元,美式風,奢華風,新古典,日式禪風,東方風,混搭風,前衛風,北歐風,工業風,異國風",
+      "WorkBudget": "100萬以上",
+      "Terms": [
+        {"title": "接案預算：", "data": "不限"},
+        {"title": "接案坪數：", "data": "不限"},
+        {"title": "特殊接案：", "data": "不限"},
+        {"title": "收費方式：", "data": "請來電洽詢 / 【丈量費】NT$5,000元(透天別墅另計) *此費用含實地丈量、需求訪談、初步平面配置與風格提案 *以上費用於簽設計合約時，可全額折抵"},
+        {"title": "付費方式：", "data": "簽約付30％、依工程進度分兩次，各付30％、完工驗收收10％"},
+        {"title": "接案區域：", "data": "北區,中區,南區,大陸"},
+        {"title": "接案類型：", "data": "小坪數,標準格局,別墅,大坪數,樓中樓,商業空間,工作空間,餐飲空間,民宿旅館,公共空間"},
+        {"title": "接案風格：", "data": "現代風,鄉村風,古典風,休閒多元,美式風,奢華風,新古典,日式禪風,東方風,混搭風,前衛風,北歐風,工業風,異國風"}
+      ],
+      "scMedia": [
+        {"name": "Facebook","img": "https://hhh.com.tw/assets/images/rv_web/fb.svg", "link": "https://www.facebook.com/Sdesign2018"},
+        {"name": "Line","img": "https://hhh.com.tw/assets/images/rv_web/line.svg", "link": "https://www.facebook.com/Sdesign2018"},
+        {"name": "Wechat","img": "https://hhh.com.tw/assets/images/rv_web/wechat.svg", "link": "https://www.facebook.com/Sdesign2018"},
+        {"name": "email","img": "https://hhh.com.tw/assets/images/rv_web/share.svg", "link": "https://www.facebook.com/Sdesign2018"},
+        {"name": "Like","img": "https://hhh.com.tw/assets/images/rv_web/like-o.svg", "link": ""}
+      ],
+      "Content": [
+        {
+          "Title": "設計師作品",
+          "Tabtag": "intro",
+          "Display_mb": true,
+          "isActive": true,
+          "Carddata": [
+            { 
+              "imgURL": "https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg",
+              "title": "藏岳│混搭風│26坪",
+              "tags": [
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                {
+                  "name": "混搭風",
+                  "link": ""
+                }
+              ]
+            },
+            { 
+              "imgURL": "https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg",
+              "title": "藏岳│混搭風│26坪",
+              "tags": [
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                {
+                  "name": "混搭風",
+                  "link": ""
+                }
+              ]
+            },
+            { 
+              "imgURL": "https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg",
+              "title": "藏岳│混搭風│26坪",
+              "tags": [
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                {
+                  "name": "混搭風",
+                  "link": ""
+                }
+              ]
+            },
+            { 
+              "imgURL": "https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg",
+              "title": "藏岳│混搭風│26坪",
+              "tags": [
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                {
+                  "name": "混搭風",
+                  "link": ""
+                }
+              ]
+            },
+            { 
+              "imgURL": "https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg",
+              "title": "藏岳│混搭風│26坪",
+              "tags": [
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                {
+                  "name": "混搭風",
+                  "link": ""
+                }
+              ]
+            },
+            { 
+              "imgURL": "https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg",
+              "title": "藏岳│混搭風│26坪",
+              "tags": [
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                {
+                  "name": "混搭風",
+                  "link": ""
+                }
+              ]
+            },
+            { 
+              "imgURL": "https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg",
+              "title": "藏岳│混搭風│26坪",
+              "tags": [
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                {
+                  "name": "混搭風",
+                  "link": ""
+                }
+              ]
+            },
+            { 
+              "imgURL": "https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg",
+              "title": "藏岳│混搭風│26坪",
+              "tags": [
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                {
+                  "name": "混搭風",
+                  "link": ""
+                }
+              ]
+            },
+            { 
+              "imgURL": "https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg",
+              "title": "藏岳│混搭風│26坪",
+              "tags": [
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                {
+                  "name": "混搭風",
+                  "link": ""
+                }
+              ]
+            },
+            { 
+              "imgURL": "https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg",
+              "title": "藏岳│混搭風│26坪",
+              "tags": [
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                {
+                  "name": "混搭風",
+                  "link": ""
+                }
+              ]
+            },
+            { 
+              "imgURL": "https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg",
+              "title": "藏岳│混搭風│26坪",
+              "tags": [
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                {
+                  "name": "混搭風",
+                  "link": ""
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "Title": "設計師影音",
+          "Tabtag": "video",
+          "Display_mb": true,
+          "isActive": true,
+          "Carddata": [
+            { 
+              "imgURL": "https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg",
+              "title": "藏岳│混搭風│26坪",
+              "tags": [
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                {
+                  "name": "混搭風",
+                  "link": ""
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "Title": "設計師專欄",
+          "Tabtag": "columns",
+          "Display_mb": true,
+          "isActive": true,
+          "Carddata": [
+            { 
+              "imgURL": "https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg",
+              "title": "藏岳│混搭風│26坪",
+              "tags": [
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                {
+                  "name": "混搭風",
+                  "link": ""
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "Title": "VR360",
+          "Tabtag": "vr360",
+          "Display_mb": false,
+          "isActive": true,
+          "Carddata": [
+            { 
+              "imgURL": "https://images.hhh.com.tw/uploads/_hcase_orig/designer494_39_05.jpg",
+              "title": "藏岳│混搭風│26坪",
+              "tags": [
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                { 
+                  "name": "混搭風",
+                  "link": ""
+                },
+                {
+                  "name": "混搭風",
+                  "link": ""
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "Title": "設計師公司簡介",
+          "Tabtag": "company",
+          "Display_mb": true,
+          "isActive": true,
+          "Carddata": [
+          ],
+          "info": [
+            { "title": "設計理念", "data": "空間設計的美學藝術，蔡岳儒總監更能將日式精闢的手工藝術融入台灣的設計與工程，更將留日所學發揚光大明確的把結構、 動線、收納、光線與品味融入建築、景觀與室內三大空間之中，藉由點線面展現出空間的獨特性，並賦予空間延續的生命活力。"},
+            { "title": "公司統編", "data": "經濟部／財政部登記有案：54290717"},
+            { "title": "相關經歷", "data": "蔡岳儒<br>◆現任／恆岳空間設計 主持設計師<br>◆學歷／東京デザイナー学院卒業<br>◆經歷／十餘年設計、工程經歷。"},
+            { "title": "專業證照", "data": "建築師證書 高恒悌 (101) 專高建字第000013號<br>建築物室內裝修專業技術人員登記證 高恒悌 第40EC116787號"},
+            { "title": "獲獎紀錄", "data": "2020年雪梨設計獎SYDNEY Design Awards GIOD-Quality Arena<br>2020年雪梨設計獎SYDNEY Design Awards SELECTION- Life Savoring"}
+          ]
+        }
+      ]
+  }
+]