init

css/list-style-mb.css

@@ -0,0 +1,774 @@
+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__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__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);
+}
+/*# sourceMappingURL=list-style.css.map */

css/list-style-mb.scss

@@ -0,0 +1,652 @@
+$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;
+    }
+    &__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 {
+      &__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);
+    }
+        
+}

css/list-style.css

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

css/list-style.scss

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

css/reset.css

@@ -0,0 +1,54 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+button {
+	padding: 0;
+}
+p{
+	margin-bottom: 0 !important;
+}

css/slick-theme.css

@@ -0,0 +1,204 @@
+@charset 'UTF-8';
+/* Slider */
+.slick-loading .slick-list
+{
+    background: #fff url('./ajax-loader.gif') center center no-repeat;
+}
+
+/* Icons */
+@font-face
+{
+    font-family: 'slick';
+    font-weight: normal;
+    font-style: normal;
+
+    src: url('./fonts/slick.eot');
+    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
+}
+/* Arrows */
+.slick-prev,
+.slick-next
+{
+    font-size: 0;
+    line-height: 0;
+
+    position: absolute;
+    top: 50%;
+
+    display: block;
+
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    -webkit-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    transform: translate(0, -50%);
+
+    cursor: pointer;
+
+    color: transparent;
+    border: none;
+    outline: none;
+    background: transparent;
+}
+.slick-prev:hover,
+.slick-prev:focus,
+.slick-next:hover,
+.slick-next:focus
+{
+    color: transparent;
+    outline: none;
+    background: transparent;
+}
+.slick-prev:hover:before,
+.slick-prev:focus:before,
+.slick-next:hover:before,
+.slick-next:focus:before
+{
+    opacity: 1;
+}
+.slick-prev.slick-disabled:before,
+.slick-next.slick-disabled:before
+{
+    opacity: .25;
+}
+
+.slick-prev:before,
+.slick-next:before
+{
+    font-family: 'slick';
+    font-size: 20px;
+    line-height: 1;
+
+    opacity: .75;
+    color: white;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.slick-prev
+{
+    left: -25px;
+}
+[dir='rtl'] .slick-prev
+{
+    right: -25px;
+    left: auto;
+}
+.slick-prev:before
+{
+    content: '←';
+}
+[dir='rtl'] .slick-prev:before
+{
+    content: '→';
+}
+
+.slick-next
+{
+    right: -25px;
+}
+[dir='rtl'] .slick-next
+{
+    right: auto;
+    left: -25px;
+}
+.slick-next:before
+{
+    content: '→';
+}
+[dir='rtl'] .slick-next:before
+{
+    content: '←';
+}
+
+/* Dots */
+.slick-dotted.slick-slider
+{
+    margin-bottom: 30px;
+}
+
+.slick-dots
+{
+    position: absolute;
+    bottom: -25px;
+
+    display: block;
+
+    width: 100%;
+    padding: 0;
+    margin: 0;
+
+    list-style: none;
+
+    text-align: center;
+}
+.slick-dots li
+{
+    position: relative;
+
+    display: inline-block;
+
+    width: 20px;
+    height: 20px;
+    margin: 0 5px;
+    padding: 0;
+
+    cursor: pointer;
+}
+.slick-dots li button
+{
+    font-size: 0;
+    line-height: 0;
+
+    display: block;
+
+    width: 20px;
+    height: 20px;
+    padding: 5px;
+
+    cursor: pointer;
+
+    color: transparent;
+    border: 0;
+    outline: none;
+    background: transparent;
+}
+.slick-dots li button:hover,
+.slick-dots li button:focus
+{
+    outline: none;
+}
+.slick-dots li button:hover:before,
+.slick-dots li button:focus:before
+{
+    opacity: 1;
+}
+.slick-dots li button:before
+{
+    font-family: 'slick';
+    font-size: 6px;
+    line-height: 20px;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 20px;
+    height: 20px;
+
+    content: '•';
+    text-align: center;
+
+    opacity: .25;
+    color: black;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+.slick-dots li.slick-active button:before
+{
+    opacity: .75;
+    color: black;
+}

css/slick.css

@@ -0,0 +1,119 @@
+/* Slider */
+.slick-slider
+{
+    position: relative;
+
+    display: block;
+    box-sizing: border-box;
+
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -ms-touch-action: pan-y;
+        touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list
+{
+    position: relative;
+
+    display: block;
+    overflow: hidden;
+
+    margin: 0;
+    padding: 0;
+}
+.slick-list:focus
+{
+    outline: none;
+}
+.slick-list.dragging
+{
+    cursor: pointer;
+    cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list
+{
+    -webkit-transform: translate3d(0, 0, 0);
+       -moz-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+         -o-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+}
+
+.slick-track
+{
+    position: relative;
+    top: 0;
+    left: 0;
+
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+.slick-track:before,
+.slick-track:after
+{
+    display: table;
+
+    content: '';
+}
+.slick-track:after
+{
+    clear: both;
+}
+.slick-loading .slick-track
+{
+    visibility: hidden;
+}
+
+.slick-slide
+{
+    display: none;
+    float: left;
+
+    height: 100%;
+    min-height: 1px;
+}
+[dir='rtl'] .slick-slide
+{
+    float: right;
+}
+.slick-slide img
+{
+    display: block;
+}
+.slick-slide.slick-loading img
+{
+    display: none;
+}
+.slick-slide.dragging img
+{
+    pointer-events: none;
+}
+.slick-initialized .slick-slide
+{
+    display: block;
+}
+.slick-loading .slick-slide
+{
+    visibility: hidden;
+}
+.slick-vertical .slick-slide
+{
+    display: block;
+
+    height: auto;
+
+    border: 1px solid transparent;
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}

css/style.css

@@ -0,0 +1,1951 @@
+body {
+  font-family: 'Helvetica Neue';
+}
+
+.sec-00 {
+  height: 295px;
+  -webkit-transition-property: height;
+  transition-property: height;
+  -webkit-transition-duration: 300ms;
+          transition-duration: 300ms;
+}
+
+@media (max-width: 1850px) {
+  .sec-00 {
+    height: 260px;
+  }
+}
+
+@media (max-width: 1550px) {
+  .sec-00 {
+    height: 230px;
+  }
+}
+
+@media (max-width: 1100px) {
+  .sec-00 {
+    height: 200px;
+  }
+}
+
+.sec-00__close {
+  position: absolute;
+  top: 0;
+  right: 20px;
+  width: 50px;
+  height: 30px;
+  background-color: rgba(255, 255, 255, 0.66);
+  border-radius: 0 0 50px 50px;
+  color: #888;
+  border: none;
+  outline: none;
+  font-size: 11px;
+  -webkit-box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
+          box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
+  line-height: 12px;
+}
+
+.sec-00.bannerClose {
+  height: 0;
+  overflow: hidden;
+  -webkit-transition-property: height;
+  transition-property: height;
+  -webkit-transition-duration: 300ms;
+          transition-duration: 300ms;
+}
+
+.sec-00 .container-fluid {
+  background-color: #cacaca;
+  height: 295px;
+}
+
+@media (max-width: 1850px) {
+  .sec-00 .container-fluid {
+    height: 260px;
+  }
+}
+
+@media (max-width: 1550px) {
+  .sec-00 .container-fluid {
+    height: 230px;
+  }
+}
+
+@media (max-width: 1100px) {
+  .sec-00 .container-fluid {
+    height: 200px;
+  }
+}
+
+.sec-00__slider {
+  margin: 0 auto;
+  width: 70%;
+  height: 100%;
+  max-width: 1344px;
+}
+
+@media (max-width: 1850px) {
+  .sec-00__slider {
+    max-width: 1176px;
+  }
+}
+
+@media (max-width: 1550px) {
+  .sec-00__slider {
+    max-width: 1010px;
+  }
+}
+
+.sec-00__slider .slide-item {
+  width: 100%;
+  height: 295px;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+@media (max-width: 1850px) {
+  .sec-00__slider .slide-item {
+    height: 260px;
+  }
+}
+
+@media (max-width: 1550px) {
+  .sec-00__slider .slide-item {
+    height: 230px;
+  }
+}
+
+@media (max-width: 1100px) {
+  .sec-00__slider .slide-item {
+    height: 200px;
+  }
+}
+
+.sec-00 .slick-prev:before, .sec-00 .slick-next:before {
+  display: none;
+}
+
+@-webkit-keyframes slidein {
+  100% {
+    height: 0px;
+  }
+}
+
+@keyframes slidein {
+  100% {
+    height: 0px;
+  }
+}
+
+.navbar {
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  padding-top: 5px;
+  padding-bottom: 5px;
+  background-color: white !important;
+  z-index: 99;
+}
+
+.navbar .container-fluid {
+  padding: 0 2.5rem;
+}
+
+@media (max-width: 1100px) {
+  .navbar .container-fluid {
+    padding: 0 .6rem;
+  }
+}
+
+.navbar-toggler {
+  padding-left: 0;
+  border-color: transparent !important;
+}
+
+.navbar-toggler:focus {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.navbar-toggler-icon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  justify-items: center;
+}
+
+.navbar-toggler-icon i {
+  font-size: 25px;
+  line-height: 30px;
+  display: inline-block;
+}
+
+.navbar-search, .navbar-login {
+  padding-right: 2px;
+}
+
+.navbar-login {
+  cursor: pointer;
+}
+
+.navbar-search-magnify {
+  cursor: pointer;
+}
+
+.navbar-brand {
+  font-size: 1.5rem;
+}
+
+.navbar-brand.navbar-logo {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.navbar-brand .navbar-login {
+  font-size: 1rem;
+  color: #EE7800;
+  text-decoration: none;
+}
+
+.navbar .nav-link {
+  cursor: pointer;
+}
+
+@media (max-width: 1100px) {
+  .navbar .nav-link {
+    padding: .5rem .5rem;
+    font-size: .9rem;
+  }
+}
+
+.navbar .navbar-nav .nav-item {
+  margin: 0 .5rem;
+}
+
+@media (max-width: 1100px) {
+  .navbar .navbar-nav .nav-item {
+    margin: 0 0rem;
+  }
+}
+
+.navbar .navbar-nav .nav-item .dropbox {
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: all .4s;
+  transition: all .4s;
+  position: absolute;
+  width: 100vw;
+  top: 100%;
+  left: 0;
+  background-color: rgba(255, 255, 255, 0.932);
+  padding-top: 1.5rem;
+  padding-bottom: 3rem;
+}
+
+.navbar .navbar-nav .nav-item .dropbox ul {
+  padding-left: 0;
+}
+
+.navbar .navbar-nav .nav-item .dropbox-item {
+  margin-bottom: .5rem;
+}
+
+.navbar .navbar-nav .nav-item .dropbox-item.first {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.navbar .navbar-nav .nav-item .dropbox-item.first .dropbox-link {
+  color: black;
+}
+
+.navbar .navbar-nav .nav-item .dropbox-link {
+  text-decoration: none;
+  color: #929292;
+  font-size: .85rem;
+}
+
+.navbar .navbar-nav .nav-item .dropbox-link:hover {
+  color: #EE7800;
+}
+
+.navbar .navbar-nav .nav-item .dropbox-link.dropbox-btn {
+  border: 1px solid #929292;
+  padding: .5rem 2rem;
+  border-radius: 5px;
+  width: 85%;
+  min-width: 7rem;
+  max-width: 11rem;
+}
+
+.navbar .navbar-nav .nav-item .dropbox-btn {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+.navbar .navbar-nav .nav-item .dropbox .container {
+  max-width: 900px;
+  width: 70%;
+}
+
+.navbar .navbar-nav .nav-item .dropbox .container.stylebox {
+  -webkit-transform: translateX(-30%);
+          transform: translateX(-30%);
+}
+
+.navbar .navbar-nav .nav-item .dropbox .container.designerbox {
+  -webkit-transform: translateX(-5%);
+          transform: translateX(-5%);
+}
+
+.navbar .navbar-nav .nav-item .dropbox .container.newbox {
+  -webkit-transform: translateX(15%);
+          transform: translateX(15%);
+}
+
+.navbar .navbar-nav .nav-item .dropbox .container.forumbox {
+  -webkit-transform: translateX(50%);
+          transform: translateX(50%);
+}
+
+.navbar .navbar-nav .nav-item .nav-link {
+  position: relative;
+}
+
+.navbar .navbar-nav .nav-item .nav-link:after {
+  position: absolute;
+  content: " ";
+  width: 100%;
+  height: 90%;
+  top: 0;
+  right: 0;
+  border-bottom: 2px solid #EE7800;
+  opacity: 0;
+  -webkit-transform: opacity 1s;
+          transform: opacity 1s;
+}
+
+.navbar .navbar-nav .nav-item:hover .nav-link:after {
+  opacity: 1;
+}
+
+.navbar .navbar-nav .nav-item:hover > .dropbox {
+  visibility: visible;
+  opacity: 1;
+}
+
+.navbar .navbar-nav .nav-item.lg .container {
+  max-width: 1200px;
+  width: 90%;
+}
+
+.navbar .navbar-nav .nav-item.lg .dropbox-link {
+  text-decoration: none;
+  color: #929292;
+  font-size: .7rem;
+}
+
+.navbar .navbar-nav .nav-item.lg .dropbox-link:hover {
+  color: #EE7800;
+}
+
+.navbar .navbar-nav .nav-item.lg .dropbox-item {
+  margin-bottom: .1rem;
+}
+
+.navbar .navbar-nav .nav-item.lg .dropbox-item.first .dropbox-link {
+  font-size: .85rem;
+}
+
+.navbar-search .container {
+  max-width: 900px;
+  width: 70%;
+}
+
+@media (max-width: 1100px) {
+  .navbar-search .container {
+    width: 90%;
+  }
+}
+
+.navbar-search .dropbox {
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: all .2s;
+  transition: all .2s;
+  position: absolute;
+  width: 100vw;
+  top: 100%;
+  left: 0;
+  background-color: rgba(255, 255, 255, 0.932);
+  padding-top: 1.5rem;
+  padding-bottom: 3rem;
+}
+
+.navbar-search .dropbox.open {
+  visibility: visible;
+  opacity: 1;
+}
+
+.navbar-search .dropbox__searchtab {
+  width: 100%;
+  background-color: gray;
+  border-radius: 3px;
+  padding: .2rem 1rem;
+  padding-bottom: 1rem;
+}
+
+.navbar-search .dropbox__hots__title {
+  font-size: 1rem;
+  color: #6b6b6b;
+}
+
+.navbar-search .dropbox__hots__link {
+  font-size: .9rem;
+  color: #929292;
+  text-decoration: none;
+  cursor: pointer;
+  margin: 0 .2rem;
+}
+
+.navbar-search .dropbox__searchBar__input {
+  width: 100%;
+  outline: none;
+  border: 2px solid #EE7800;
+  border-radius: 5rem;
+  padding: .3rem 1.2rem;
+  font-size: .9rem;
+}
+
+.navbar-search .dropbox__searchBar__submit {
+  outline: none;
+  border: none;
+  font-size: .9rem;
+  background-color: transparent;
+  color: #EE7800;
+  margin-left: -1rem;
+  -webkit-transform: translateX(-100%);
+          transform: translateX(-100%);
+  padding: 0 .6rem;
+}
+
+.navbar-search .dropbox__tab .nav-item {
+  margin: 0 .6rem;
+}
+
+.navbar-search .dropbox .nav-item-link {
+  border: none;
+  outline: none;
+  font-size: 1rem;
+  color: white;
+  padding: 3px;
+  position: relative;
+}
+
+.navbar-search .dropbox .nav-item-link::after {
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-bottom: 3px solid #EE7800;
+  opacity: 0;
+}
+
+.navbar-search .dropbox .nav-item-link.active::after {
+  opacity: 1;
+}
+
+.navbar-search .dropbox-tab-content .tabpar {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding-top: .5rem;
+}
+
+.navbar-search .dropbox-tab-content .tabpar .col {
+  margin: 0 .6rem;
+}
+
+.navbar-search .dropbox-tab-content .tabpar .select {
+  font-size: 1rem;
+  padding: .6rem;
+  border-radius: 3px;
+  color: #747474;
+}
+
+.navbar-search .dropbox-tab-content .tabpar button {
+  border: none;
+  outline: none;
+  background-color: #EE7800;
+  border-radius: 3px;
+  color: white;
+  font-size: 1rem;
+  padding: .6rem;
+}
+
+.navbar-search .dropbox-tab-content .tabpar .image-search {
+  border: none;
+  outline: none;
+  background-color: #EE7800;
+  border-radius: 3px;
+  color: white;
+  font-size: 1rem;
+}
+
+.navbar-search .dropbox-tab-content .tabpar .article-btn {
+  border: none;
+  outline: none;
+  background-color: #EE7800;
+  border-radius: 3px;
+  color: white;
+  font-size: 1rem;
+  padding: .6rem;
+}
+
+.navbar-search .dropbox-tab-content .tabpar .home-btn {
+  border: none;
+  outline: none;
+  background-color: #EE7800;
+  border-radius: 3px;
+  color: white;
+  font-size: 1rem;
+  padding: .6rem;
+}
+
+.navbar-search .dropbox__tab .nav-item-link.active .nav-item-link::after {
+  opacity: 1;
+}
+
+.navbar-main.sticky {
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+.navbar-main.sticky + .sec-02 {
+  padding-top: 53.5px;
+}
+
+.sec-02__slider {
+  width: 100%;
+  height: 100%;
+}
+
+.sec-02__slider .slide-item {
+  width: 100%;
+  height: 74vh;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+.sec-02 .slick-prev:before, .sec-02 .slick-next:before {
+  display: none;
+}
+
+.sec-02 .slick-prev {
+  left: 15px;
+  z-index: 3;
+}
+
+.sec-02 .slick-next {
+  right: 15px;
+}
+
+.sec-04 {
+  background-color: #F4F4F4;
+  padding: 4rem 1rem;
+}
+
+.sec-04 .container {
+  max-width: 950px;
+  width: 70%;
+}
+
+@media (max-width: 1100px) {
+  .sec-04 .container {
+    width: 90%;
+  }
+}
+
+.sec-04 .card {
+  -webkit-box-shadow: 1px 2px 8px 1px #d6d6d6;
+          box-shadow: 1px 2px 8px 1px #d6d6d6;
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-transition: all .6s;
+  transition: all .6s;
+}
+
+.sec-04 .card-title {
+  font-size: 1.4rem;
+  line-height: 1.8rem;
+  color: #4C4C4C;
+  font-weight: 500;
+  -webkit-transition: all 2s;
+  transition: all 2s;
+}
+
+.sec-04 .card__imgfr {
+  width: 100%;
+}
+
+.sec-04 .card__imgfr img {
+  width: 100%;
+  height: 100%;
+}
+
+.sec-04 .card:hover {
+  -webkit-transform: scale(1.05);
+          transform: scale(1.05);
+}
+
+.sec-guessLike .container {
+  margin: 0 auto;
+  padding: 2rem 2rem;
+  max-width: 1050px;
+  width: 70%;
+}
+
+@media (max-width: 1100px) {
+  .sec-guessLike .container {
+    width: 90%;
+    padding: 0 1rem;
+  }
+}
+
+.sec-guessLike__titlebox-h2 {
+  margin: 0 auto;
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: #535353;
+  padding: .8rem 0;
+  border-bottom: 6px solid #EE7800;
+  display: inline-block;
+}
+
+.sec-guessLike__title {
+  display: block;
+  text-align: center;
+  position: relative;
+  font-size: 1.2rem;
+  margin-bottom: .8rem;
+}
+
+.sec-guessLike__title::before, .sec-guessLike__title::after {
+  position: absolute;
+  content: " ";
+  width: 40%;
+  height: 0rem;
+  border-top: 1px solid black;
+  top: 50%;
+}
+
+.sec-guessLike__title::before {
+  left: 0;
+}
+
+.sec-guessLike__title::after {
+  left: 60%;
+}
+
+.sec-guessLike__article h5 {
+  font-size: 1.1rem;
+}
+
+.sec-guessLike__article p {
+  font-size: 14px;
+}
+
+.sec-guessLike__case p {
+  font-size: 1.1rem;
+  font-weight: 500;
+}
+
+.sec-guessLike__card {
+  width: 100%;
+  overflow: hidden;
+  height: 26vh;
+  position: relative;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.sec-guessLike__card.special {
+  height: 45vh;
+}
+
+.sec-guessLike__card__img {
+  width: 100%;
+  -webkit-transition: all .8s;
+  transition: all .8s;
+}
+
+.sec-guessLike__card__txt {
+  position: absolute;
+  bottom: 1rem;
+  left: 3rem;
+  color: white;
+  z-index: 2;
+  font-size: 600;
+  text-shadow: 1px 1px 2px gray;
+}
+
+.sec-guessLike__video__play {
+  position: absolute;
+  width: 2.5rem;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+
+.sec-05 {
+  border-top: 1px solid #bbbbbb;
+  padding-bottom: 2rem;
+}
+
+.sec-05 .container {
+  margin: 0 auto;
+  padding: 0 2rem;
+  max-width: 1050px;
+  width: 70%;
+}
+
+@media (max-width: 1100px) {
+  .sec-05 .container {
+    width: 90%;
+    padding: 0 1rem;
+  }
+}
+
+.sec-05__tabdiv {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+.sec-05__tabdiv .more {
+  padding-bottom: .4rem;
+}
+
+.sec-05__tabdiv .nav-item {
+  position: relative;
+  padding-right: 18px;
+  padding-left: 18px;
+}
+
+.sec-05__tabdiv .nav-item::after {
+  position: absolute;
+  content: " ";
+  width: 100%;
+  height: 30%;
+  left: 0;
+  top: 35%;
+  background-color: transparent;
+  border-right: 1px solid #b3b3b3;
+  z-index: -1;
+}
+
+.sec-05__tabdiv .nav-item:nth-of-type(3)::after {
+  display: none;
+}
+
+.sec-05__tabdiv .nav-item-link {
+  color: black;
+  font-weight: 500;
+  font-size: 1.6rem;
+  border: none;
+  position: relative;
+  padding: 1.5rem 0;
+  outline: none;
+}
+
+@media screen and (max-width: 385px) {
+  .sec-05__tabdiv .nav-item-link {
+    font-size: 1.1rem;
+  }
+}
+
+.sec-05__tabdiv .nav-item-link:focus {
+  outline: none !important;
+}
+
+.sec-05__tabdiv .nav-item-link.active {
+  color: #EE7800;
+}
+
+.sec-05__tabdiv .nav-item-link::before {
+  position: absolute;
+  content: " ";
+  width: 101%;
+  height: 100%;
+  left: -2px;
+  top: 0px;
+  background-color: transparent;
+  border-top: 3px solid #EE7800;
+  opacity: 0;
+}
+
+.sec-05__tabdiv .nav-item-link.active::before {
+  opacity: 1;
+}
+
+.sec-05 .tab-pane {
+  height: 100%;
+}
+
+.sec-05tab-content {
+  height: 35vh;
+}
+
+.sec-05 .tabpar__card {
+  margin: 3px;
+  position: relative;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.sec-05 .tabpar__card__imgfr {
+  width: 100%;
+  height: 25vh;
+  position: relative;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+@media (max-width: 1100px) {
+  .sec-05 .tabpar__card__imgfr {
+    height: 20vh;
+  }
+}
+
+.sec-05 .tabpar__card h5 {
+  font-size: 1rem;
+}
+
+.sec-05 .tabpar__card p {
+  font-size: .95rem;
+  font-weight: 300;
+  color: gray;
+}
+
+.sec-05 .tabpar__card__play {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  width: 2.5rem;
+}
+
+.sec-05 .slick-prev {
+  top: 40%;
+  left: -2rem;
+  z-index: 2;
+}
+
+.sec-05 .slick-next {
+  top: 40%;
+  right: -2rem;
+  z-index: 2;
+}
+
+.sec-05 .slick-prev:before, .sec-05 .slick-next:before {
+  display: none;
+}
+
+.sec-06 {
+  padding: 2rem 0;
+}
+
+.sec-06 .container {
+  margin: 0 auto;
+  padding: 1rem 2rem;
+  max-width: 1050px;
+  width: 70%;
+}
+
+@media (max-width: 1100px) {
+  .sec-06 .container {
+    width: 90%;
+    padding: 0 1rem;
+  }
+}
+
+.sec-06__title h3 {
+  display: inline-block;
+  font-size: 1.6rem;
+  padding-bottom: .5rem;
+  border-bottom: 6px solid #EE7800;
+  color: #535353;
+  margin-bottom: 0;
+}
+
+.sec-06__video {
+  width: 100%;
+  position: relative;
+}
+
+.sec-06__video__imgfr {
+  width: 100%;
+  height: 34vh;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+@media (max-width: 1100px) {
+  .sec-06__video__imgfr {
+    height: 25vh;
+  }
+}
+
+.sec-06__video__play {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 2.5rem;
+  height: 2.5rem;
+  z-index: 2;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+
+.sec-06__videotxt {
+  width: 90%;
+  margin: 0 auto;
+  background-color: rgba(255, 255, 255, 0.842);
+  -webkit-box-shadow: 1px 1px 3px 1px rgba(196, 196, 196, 0.795);
+          box-shadow: 1px 1px 3px 1px rgba(196, 196, 196, 0.795);
+  padding: .4rem .8rem;
+  -webkit-transform: translateY(-20%);
+          transform: translateY(-20%);
+  font-weight: 600;
+  font-size: 1.1rem;
+}
+
+.sec-06__btns {
+  display: block;
+  outline: none;
+  border: none;
+  padding: .4rem 1.2rem;
+  width: 88%;
+  margin: 0 auto;
+  background-color: #ea068c;
+  color: white;
+  border-radius: 3px;
+  -webkit-box-shadow: 1px 1px 3px 1px rgba(196, 196, 196, 0.795);
+          box-shadow: 1px 1px 3px 1px rgba(196, 196, 196, 0.795);
+  -webkit-transition: all .4s;
+  transition: all .4s;
+  text-decoration: none;
+}
+
+.sec-06__btns:hover {
+  -webkit-transform: translate(2px, 2px);
+          transform: translate(2px, 2px);
+  color: white;
+}
+
+.sec-06__btns__txt {
+  font-weight: 600;
+}
+
+.sec-06__btns:nth-of-type(2), .sec-06__btns:nth-of-type(3) {
+  padding: 1rem 1.2rem;
+}
+
+.sec-06__card {
+  width: 100%;
+}
+
+.sec-06__card:hover .sec-06__card__imgfr {
+  -webkit-transform: scale(1.1);
+          transform: scale(1.1);
+}
+
+.sec-06__card h5 {
+  font-size: 1.1rem;
+  margin-bottom: .3rem;
+}
+
+.sec-06__card p {
+  font-size: .9rem;
+}
+
+.sec-06__card__outer {
+  width: 100%;
+  height: 48vh;
+  overflow: hidden;
+}
+
+.sec-06__card__play {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  width: 2.5rem;
+}
+
+.sec-06__card__imgfr {
+  width: 100%;
+  height: 48vh;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  -webkit-transition: all .5s;
+  transition: all .5s;
+  position: relative;
+}
+
+.sec-06 .slick-prev {
+  top: 40%;
+  left: .5rem;
+  z-index: 2;
+}
+
+.sec-06 .slick-next {
+  top: 40%;
+  right: .5rem;
+  z-index: 2;
+}
+
+.sec-06 .slick-prev:before, .sec-06 .slick-next:before {
+  display: none;
+}
+
+.sec-07 {
+  padding: 2rem 0;
+}
+
+.sec-07 .container {
+  margin: 0 auto;
+  padding: .8rem 1.2rem;
+  max-width: 1050px;
+  width: 70%;
+  background-color: #F4F4F4;
+}
+
+@media (max-width: 1100px) {
+  .sec-07 .container {
+    width: 90%;
+    padding: 0 1rem;
+  }
+}
+
+.sec-07__slider {
+  height: 100%;
+}
+
+.sec-07__slider .slide-item {
+  height: 23vh;
+  background-position: center center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  width: 100%;
+  margin: 0 5px;
+  cursor: pointer;
+}
+
+@media (max-width: 1100px) {
+  .sec-07__slider .slide-item {
+    height: 18vh;
+  }
+}
+
+.sec-08 {
+  padding-bottom: 2.5rem;
+}
+
+.sec-08 .container {
+  margin: 0 auto;
+  padding: 1rem 0rem;
+  max-width: 1050px;
+  width: 70%;
+}
+
+@media (max-width: 1100px) {
+  .sec-08 .container {
+    width: 90%;
+    padding: 0 1rem;
+  }
+}
+
+.sec-08__title {
+  border-bottom: 6px solid #EE7800;
+  color: #535353;
+}
+
+.sec-08__title h3 {
+  font-size: 1.6rem;
+}
+
+.sec-08__slider {
+  width: 100%;
+  cursor: pointer;
+}
+
+.sec-08__imgfr {
+  width: 100%;
+  height: 28vh;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+@media (max-width: 1100px) {
+  .sec-08__imgfr {
+    height: 20vh;
+  }
+}
+
+.sec-08__card h5 {
+  font-size: 1rem;
+}
+
+.sec-08__card p {
+  font-size: .9rem;
+}
+
+.sec-08__card__play {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  width: 2.5rem;
+}
+
+.sec-08__cardtxt {
+  font-size: 14px;
+  padding-right: .6rem;
+}
+
+.sec-08 .slick-prev {
+  top: 40%;
+  left: -2rem;
+  z-index: 2;
+}
+
+.sec-08 .slick-next {
+  top: 40%;
+  right: -2rem;
+  z-index: 2;
+}
+
+.sec-08 .slick-prev:before, .sec-08 .slick-next:before {
+  display: none;
+}
+
+.sec-09 {
+  background-color: #F4F4F4;
+}
+
+.sec-09 .container {
+  margin: 0 auto;
+  padding: 2rem 0rem;
+  max-width: 1050px;
+  width: 70%;
+}
+
+@media (max-width: 1100px) {
+  .sec-09 .container {
+    width: 90%;
+    padding: 0 1rem;
+  }
+}
+
+.sec-09__imgfr {
+  width: 100%;
+  height: 25vh;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+@media (max-width: 1100px) {
+  .sec-09__imgfr {
+    height: 20vh;
+  }
+}
+
+.sec-09__card {
+  margin: 5px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.sec-09__card p {
+  font-size: 14px;
+  margin-top: .5rem;
+}
+
+.sec-09__card__play {
+  position: absolute;
+  right: .6rem;
+  bottom: .6rem;
+  width: 2.5rem;
+}
+
+.sec-09__title {
+  border-bottom: 6px solid #EE7800;
+  color: #535353;
+}
+
+.sec-09__title h3 {
+  font-size: 1.6rem;
+}
+
+.sec-09 .slick-prev {
+  top: 40%;
+  left: -2rem;
+  z-index: 2;
+}
+
+.sec-09 .slick-next {
+  top: 40%;
+  right: -2rem;
+  z-index: 2;
+}
+
+.sec-09 .slick-prev:before, .sec-09 .slick-next:before {
+  display: none;
+}
+
+.sec-10 {
+  padding: 2.5rem 0;
+}
+
+.sec-10 .container {
+  max-width: 1000px;
+  width: 70%;
+}
+
+@media (max-width: 1100px) {
+  .sec-10 .container {
+    width: 90%;
+    padding: 0 1rem;
+  }
+}
+
+.sec-10__titlebox {
+  border-bottom: 1px solid #4b4b4b;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+.sec-10__titlebox-h2 {
+  margin: 0 auto;
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: #535353;
+  padding: .8rem 0;
+  border-bottom: 6px solid #EE7800;
+  display: inline-block;
+}
+
+.sec-10__card {
+  cursor: pointer;
+}
+
+.sec-10__card h5 {
+  font-size: 1rem;
+  margin-bottom: .3rem;
+}
+
+.sec-10__card p {
+  font-size: .95rem;
+  font-weight: 300;
+  color: gray;
+}
+
+.sec-10__card-img {
+  width: 100%;
+  height: 25vh;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+@media (max-width: 1100px) {
+  .sec-10__card-img {
+    height: 20vh;
+  }
+}
+
+.sec-10__card__play {
+  position: absolute;
+  right: 1rem;
+  bottom: 1rem;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.sec-11 {
+  padding: 2.5rem 0;
+  padding-top: 1rem;
+}
+
+.sec-11 .container {
+  max-width: 1000px;
+  width: 70%;
+}
+
+@media (max-width: 1100px) {
+  .sec-11 .container {
+    width: 90%;
+    padding: 0 1rem;
+  }
+}
+
+.sec-11__titlebox {
+  border-bottom: 1px solid #4b4b4b;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+.sec-11__titlebox-h2 {
+  margin: 0 auto;
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: #535353;
+  padding: .8rem 0;
+  border-bottom: 6px solid #EE7800;
+  display: inline-block;
+}
+
+.sec-11__card {
+  cursor: pointer;
+}
+
+.sec-11__card h5 {
+  font-size: 1rem;
+  margin-bottom: .3rem;
+}
+
+.sec-11__card p {
+  font-size: .95rem;
+  font-weight: 300;
+  color: gray;
+}
+
+.sec-11__card-img {
+  width: 100%;
+  height: 25vh;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+@media (max-width: 1100px) {
+  .sec-11__card-img {
+    height: 20vh;
+  }
+}
+
+.sec-11__card__play {
+  position: absolute;
+  right: 1rem;
+  bottom: 1rem;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.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;
+}
+
+#videoModal .modal-content {
+  background-color: transparent;
+  border: none;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+#videoModal .modal-dialog {
+  max-width: 700px;
+}
+
+.morelink {
+  text-decoration: none;
+  color: #EE7800;
+  font-weight: 700;
+}
+
+.morelink:hover {
+  color: #EE7800;
+}
+
+.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);
+}
+
+.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);
+}
+
+#loginModal .btn-close {
+  position: absolute;
+  right: -2rem;
+  top: -2rem;
+}
+
+#favorModal .btn-close {
+  position: absolute;
+  right: -2rem;
+  top: -2rem;
+}
+
+#favorModal .sec-favor-title {
+  color: #4C4C4C;
+  font-size: 18px;
+}
+
+#favorModal .sec-favor-list {
+  background-color: #F3F3F3;
+  padding: 1rem;
+  padding-bottom: 1.4rem;
+}
+
+#favorModal .sec-favor-list hr {
+  background-color: #aaaaaa;
+}
+
+#favorModal .sec-favor-form .form-user, #favorModal .sec-favor-checklist .form-user {
+  width: 50%;
+  color: #707070;
+  font-size: 16px;
+}
+
+#favorModal .sec-favor-form .form-progressbar, #favorModal .sec-favor-checklist .form-progressbar {
+  width: 50%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+#favorModal .sec-favor-form .form-progressbar li, #favorModal .sec-favor-checklist .form-progressbar li {
+  width: 1.6rem;
+  height: 1.6rem;
+  border-radius: 50%;
+  border: 2px solid #D3D3D3;
+  line-height: 1.4rem;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  position: relative;
+  color: #D3D3D3;
+  background-color: #F3F3F3;
+  z-index: 2;
+}
+
+#favorModal .sec-favor-form .form-progressbar li.active, #favorModal .sec-favor-checklist .form-progressbar li.active {
+  border: 2px solid #EE7800;
+  color: #EE7800;
+}
+
+#favorModal .sec-favor-form .form-progressbar li.active::before, #favorModal .sec-favor-checklist .form-progressbar li.active::before {
+  border-top: 2px solid #EE7800;
+}
+
+#favorModal .sec-favor-form .form-progressbar li::before, #favorModal .sec-favor-checklist .form-progressbar li::before {
+  position: absolute;
+  content: " ";
+  width: 4rem;
+  height: 0;
+  border-top: 2px dashed #D3D3D3;
+  right: 100%;
+  top: 50%;
+  z-index: 1;
+}
+
+#favorModal .sec-favor-form .form-progressbar li:nth-of-type(1)::before, #favorModal .sec-favor-checklist .form-progressbar li:nth-of-type(1)::before {
+  display: none;
+}
+
+#favorModal .sec-favor-form .form-step, #favorModal .sec-favor-checklist .form-step {
+  background-color: white;
+  border-radius: 3px;
+  padding: 1.5rem 1rem;
+  padding-bottom: 1.5rem;
+  -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);
+  overflow: visible;
+}
+
+#favorModal .sec-favor-form .form-step .next, #favorModal .sec-favor-checklist .form-step .next {
+  padding: .6rem 5rem;
+  background-color: #EE7800;
+  border-radius: 3px;
+  color: white;
+  border: none;
+  outline: none;
+}
+
+#favorModal .sec-favor-form .form-step1, #favorModal .sec-favor-checklist .form-step1 {
+  display: block;
+}
+
+#favorModal .sec-favor-form .form-step2, #favorModal .sec-favor-checklist .form-step2 {
+  display: none;
+}
+
+#favorModal .sec-favor-form .form-step3, #favorModal .sec-favor-checklist .form-step3 {
+  display: none;
+  position: relative;
+  padding-bottom: 1.5rem;
+}
+
+#favorModal .sec-favor-form input[type="checkbox"], #favorModal .sec-favor-form input[type="radio"], #favorModal .sec-favor-checklist input[type="checkbox"], #favorModal .sec-favor-checklist input[type="radio"] {
+  display: none;
+}
+
+#favorModal .sec-favor-form .imgfr, #favorModal .sec-favor-checklist .imgfr {
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 4.5rem;
+  border-radius: 8px;
+  border: 2px solid transparent;
+}
+
+#favorModal .sec-favor-form h4, #favorModal .sec-favor-checklist h4 {
+  color: #AAAAAA;
+  font-size: 15px;
+  font-weight: 400;
+}
+
+#favorModal .sec-favor-form input[type="checkbox"]:checked + .fs-label-info .imgfr, #favorModal .sec-favor-checklist input[type="checkbox"]:checked + .fs-label-info .imgfr {
+  border: 2px solid #EE7800;
+}
+
+#favorModal .sec-favor-form input[type="checkbox"]:checked + .fs-label-chbox, #favorModal .sec-favor-checklist input[type="checkbox"]:checked + .fs-label-chbox {
+  border: 1px solid #EE7800;
+  color: #EE7800;
+}
+
+#favorModal .sec-favor-form input[type="radio"]:checked + .fs-label-chbox, #favorModal .sec-favor-checklist input[type="radio"]:checked + .fs-label-chbox {
+  border: 1px solid #EE7800;
+  color: #EE7800;
+}
+
+#favorModal .sec-favor-form .step3-block, #favorModal .sec-favor-checklist .step3-block {
+  margin-bottom: 1rem;
+}
+
+#favorModal .sec-favor-form .step3-block:nth-of-type(3), #favorModal .sec-favor-checklist .step3-block:nth-of-type(3) {
+  margin-bottom: 0;
+}
+
+#favorModal .sec-favor-form .step3-block-title, #favorModal .sec-favor-checklist .step3-block-title {
+  color: #AAAAAA;
+  display: block;
+  margin-bottom: .5rem;
+  font-size: 1rem;
+}
+
+#favorModal .sec-favor-form .step3-block .radio, #favorModal .sec-favor-checklist .step3-block .radio {
+  display: inline-block;
+  padding: .25rem .7rem;
+  margin-right: .4rem;
+  border: 1px solid #707070;
+  border-radius: 2rem;
+  color: #797979;
+  margin-bottom: .5rem;
+}
+
+#favorModal .sec-favor-form .skip, #favorModal .sec-favor-checklist .skip {
+  padding: .3rem 1rem;
+  color: #AAAAAA;
+  border: none;
+  outline: none;
+  background-color: transparent;
+}
+
+#favorModal .sec-favor-form .btngrp, #favorModal .sec-favor-checklist .btngrp {
+  /* position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: -6rem; */
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+#favorModal .sec-favor-form .btngrp .next, #favorModal .sec-favor-checklist .btngrp .next {
+  -webkit-transform: translateY(0rem);
+          transform: translateY(0rem);
+}
+
+#favorModal .sec-favor-checklist .form-user {
+  margin: 0 auto;
+  text-align: center;
+  margin-bottom: 1rem;
+}
+
+#favorModal .sec-favor-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);
+}
+
+.test {
+  position: relative;
+}
+
+.test .cover {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  display: block;
+  background-color: white;
+  height: 100%;
+}
+
+.test .cover.slidein {
+  -webkit-animation: slidein 2s forwards;
+  animation: slidein  2s forwards;
+}
+
+.title_back {
+  display: block;
+  position: relative;
+  width: 10em;
+  height: 1.75em;
+  overflow: hidden;
+}
+
+.title_back .title {
+  position: absolute;
+  left: 0;
+  bottom: -1.75em;
+  display: block;
+  -webkit-transition: all 1s;
+  transition: all 1s;
+}
+
+.test_content {
+  opacity: 0;
+}
+
+.test_content.fadein {
+  -webkit-animation: fadein 2s forwards;
+  animation: fadein  2s forwards;
+}
+
+@-webkit-keyframes slidein {
+  100% {
+    height: 0px;
+  }
+}
+
+@keyframes slidein {
+  100% {
+    height: 0px;
+  }
+}
+
+@-webkit-keyframes fadein {
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadein {
+  100% {
+    opacity: 1;
+  }
+}
+/*# sourceMappingURL=style.css.map */

css/style.scss

@@ -0,0 +1,1558 @@
+body {
+    font-family: 'Helvetica Neue';
+}
+
+.sec-00 {
+    height: 295px;
+    transition-property: height;
+    transition-duration: 300ms;
+    @media (max-width: 1850px) {
+        height: 260px;
+    }
+    @media (max-width: 1550px) {
+        height: 230px;
+    }
+    @media (max-width: 1100px) {
+        height: 200px;
+    }
+    &__close {
+        position: absolute;
+        top: 0;
+        right: 20px;
+        width: 50px;
+        height: 30px;
+        background-color: hsla(0,0%,100%,.66);
+        border-radius: 0 0 50px 50px;
+        color: #888;
+        border: none;
+        outline: none;
+        font-size: 11px;
+        box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
+        line-height: 12px;
+    }
+    &.bannerClose {
+        height: 0;
+        overflow: hidden;
+        transition-property: height;
+        transition-duration: 300ms;
+    }
+    .container-fluid {
+        background-color: rgb(202, 202, 202);
+        height: 295px;
+        @media (max-width: 1850px) {
+            height: 260px;
+        }
+        @media (max-width: 1550px) {
+            height: 230px;
+        }
+        @media (max-width: 1100px) {
+            height: 200px;
+        }
+    }
+    &__slider {
+        margin: 0 auto;
+        width: 70%;
+        height: 100%;
+        max-width: 1344px;
+        @media (max-width: 1850px) {
+            max-width: 1176px;
+        }
+        @media (max-width: 1550px) {
+            max-width: 1010px;
+        }
+        .slide-item {
+            width: 100%;
+            height: 295px;
+            background-position: center center;
+            background-size: cover;
+            background-repeat: no-repeat;
+            cursor: pointer;
+            @media (max-width: 1850px) {
+                height: 260px;
+            }
+            @media (max-width: 1550px) {
+                height: 230px;
+            }
+            @media (max-width: 1100px) {
+                height: 200px;
+            }
+        }
+    }
+    .slick-prev:before, .slick-next:before {
+        display: none;
+    }
+}
+
+@-webkit-keyframes slidein {
+    100% {
+        height: 0px;
+      }
+}
+
+@keyframes slidein {
+    100% {
+        height: 0px;
+    }
+}
+
+.navbar {
+    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
+    -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
+    -moz-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
+    padding-top: 5px;
+    padding-bottom: 5px;
+    background-color: white !important;
+    z-index: 99;
+    .container-fluid {
+        padding:0 2.5rem;
+        @media (max-width: 1100px) {
+            padding:0 .6rem;
+        }
+    }
+    &-toggler {
+        padding-left: 0;
+        border-color: transparent !important;
+        &:focus {
+            box-shadow: none;
+        }
+    }
+    &-toggler-icon {
+        display: flex;
+        justify-items: center;
+        i {
+            font-size: 25px;
+            line-height: 30px;
+            display: inline-block;
+        }
+    }
+    &-search, &-login {
+        padding-right: 2px;
+    }
+    &-login {
+        cursor: pointer;
+    }
+    &-search {
+        &-magnify {
+            cursor: pointer;
+        }
+    }
+    &-brand {
+        font-size: 1.5rem;
+        &.navbar-logo {
+            display: flex;
+            align-items: center;
+        }
+        .navbar-login {
+            font-size: 1rem;
+            color: #EE7800;
+            text-decoration: none;
+        }
+    }
+    .nav-link {
+        cursor: pointer;
+        @media (max-width: 1100px) {
+            padding: .5rem .5rem;
+            font-size: .9rem;
+        }
+    }
+    .navbar-nav {
+        .nav-item {
+            margin: 0 .5rem;
+            @media (max-width: 1100px) {
+                margin: 0 0rem;
+            }
+            .dropbox {
+                visibility: hidden;
+                opacity: 0;
+                transition: all .4s;
+                position: absolute;
+                width: 100vw;
+                top: 100%;
+                left: 0;
+                background-color: rgba(255, 255, 255, 0.932);
+                padding-top: 1.5rem;
+                padding-bottom: 3rem;
+                ul {
+                    padding-left: 0;
+                }
+                &-item {
+                    margin-bottom: .5rem;
+                    &.first {
+                        font-size: 1.1rem;
+                        font-weight: 600;
+                        .dropbox-link {
+                            color: black;
+                        }
+                    }
+                }
+                &-link {
+                    text-decoration: none;
+                    color: rgb(146, 146, 146);
+                    font-size: .85rem;
+                    &:hover {
+                        color: #EE7800;
+                    }
+                    &.dropbox-btn {
+                        border: 1px solid rgb(146, 146, 146);
+                        padding: .5rem 2rem;
+                        border-radius: 5px;
+                        width: 85%;
+                        min-width: 7rem;
+                        max-width: 11rem;
+                    }
+                }
+                &-btn {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+                .container {
+                    max-width: 900px;
+                    width: 70%;
+                    &.stylebox {
+                        transform: translateX(-30%);
+                    }
+                    &.designerbox {
+                        transform: translateX(-5%);
+                    }
+                    &.newbox {
+                        transform: translateX(15%);
+                    }
+                    &.forumbox {
+                        transform: translateX(50%);
+                    }
+                }
+            }
+            .nav-link {
+                position: relative;
+            }
+            .nav-link:after {
+                position: absolute;
+                content: " ";
+                width: 100%;
+                height: 90%;
+                top: 0;
+                right: 0;
+                border-bottom: 2px solid #EE7800;
+                opacity: 0;
+                transform: opacity 1s;
+            }
+            &:hover {
+                .nav-link:after {
+                    opacity: 1;
+                }
+                >.dropbox {
+                    visibility: visible;
+                    opacity: 1;
+                }
+            }
+            
+        }
+        .nav-item.lg {
+            .container {
+                max-width: 1200px;
+                width: 90%;
+            }
+            .dropbox-link {
+                text-decoration: none;
+                color: rgb(146, 146, 146);
+                font-size: .7rem;
+                &:hover {
+                    color: #EE7800;
+                }
+            }
+            .dropbox-item {
+                margin-bottom: .1rem;
+                &.first {
+                    .dropbox-link {
+                        font-size: .85rem;
+                    }
+                }
+            }
+        }
+    }
+    &-search {
+        .container {
+            max-width: 900px;
+            width: 70%;
+            @media (max-width: 1100px) {
+                width: 90%;
+            }
+        }
+        .dropbox {
+            visibility: hidden;
+            opacity: 0;
+            transition: all .2s;
+            position: absolute;
+            width: 100vw;
+            top: 100%;
+            left: 0;
+            background-color: rgba(255, 255, 255, 0.932);
+            padding-top: 1.5rem;
+            padding-bottom: 3rem;
+            &.open {
+                visibility: visible;
+                opacity: 1;
+            }
+            &__searchtab {
+                width: 100%;
+                background-color: gray;
+                border-radius: 3px;
+                padding: .2rem 1rem;
+                padding-bottom: 1rem;
+            }
+            &__hots {
+                &__title {
+                    font-size: 1rem;
+                    color: rgb(107, 107, 107);
+                }
+                &__link {
+                    font-size: .9rem;
+                    color: rgb(146, 146, 146);
+                    text-decoration: none;
+                    cursor: pointer;
+                    margin: 0 .2rem;
+                }
+            }
+            &__searchBar {
+                &__input {
+                    width: 100%;
+                    outline: none;
+                    border: 2px solid #EE7800;
+                    border-radius: 5rem;
+                    padding: .3rem 1.2rem;
+                    font-size: .9rem;
+                }
+                &__submit {
+                    outline: none;
+                    border: none;
+                    font-size: .9rem;
+                    background-color: transparent;
+                    color: #EE7800;
+                    margin-left: -1rem;
+                    transform: translateX(-100%);
+                    padding: 0 .6rem;
+                }
+            }
+            &__tab {
+                .nav-item {
+                    margin: 0 .6rem;
+                    }
+                }
+                .nav-item-link {
+                    border: none;
+                    outline: none;
+                    font-size: 1rem;
+                    color: white;
+                    padding: 3px;
+                    position: relative;
+                    &::after {
+                        position: absolute;
+                        content: "";
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                        border-bottom: 3px solid #EE7800;
+                        opacity: 0;
+                    }
+                    &.active::after {
+                        opacity: 1;
+                    }
+                }
+                    
+            }
+        .dropbox-tab-content {
+            .tabpar {
+                display: flex;
+                padding-top: .5rem;
+                .col {
+                    margin: 0 .6rem;
+                }
+                .select {
+                    font-size: 1rem;
+                    padding: .6rem;
+                    border-radius: 3px;
+                    color: rgb(116, 116, 116);
+                }
+                button {
+                    border: none;
+                    outline: none;
+                    background-color: #EE7800;
+                    border-radius: 3px;
+                    color: white;
+                    font-size: 1rem;
+                    padding: .6rem;
+                }
+                .image-search {
+                    border: none;
+                    outline: none;
+                    background-color: #EE7800;
+                    border-radius: 3px;
+                    color: white;
+                    font-size: 1rem;
+                }
+                .article-btn {
+                    border: none;
+                    outline: none;
+                    background-color: #EE7800;
+                    border-radius: 3px;
+                    color: white;
+                    font-size: 1rem;
+                    padding: .6rem;
+                }
+                .home-btn {
+                    border: none;
+                    outline: none;
+                    background-color: #EE7800;
+                    border-radius: 3px;
+                    color: white;
+                    font-size: 1rem;
+                    padding: .6rem;
+                }
+            }
+        }
+    }
+}
+
+.navbar-search .dropbox__tab .nav-item-link.active .nav-item-link::after {
+    opacity: 1;
+}
+.navbar-main.sticky {
+    position: fixed;
+    top: 0;
+    width: 100%;
+}
+
+.navbar-main.sticky + .sec-02 {
+    padding-top: 53.5px;
+}
+
+.sec-02 {
+    &__slider {
+        width: 100%;
+        height: 100%;
+        .slide-item {
+            width: 100%;
+            height: 74vh;
+            background-position: center center;
+            background-size: cover;
+            background-repeat: no-repeat;
+            cursor: pointer;
+        }
+        
+    }
+    .slick-prev:before, .slick-next:before {
+        display: none;
+    }
+    .slick-prev {
+        left: 15px;
+        z-index: 3;
+    }
+    .slick-next {
+        right: 15px;
+    }
+}
+
+.sec-04 {
+    background-color: #F4F4F4;
+    padding: 4rem 1rem;
+    .container {
+        max-width: 950px;
+        width: 70%;
+        @media (max-width: 1100px) {
+            width: 90%;
+        }
+    }
+    .card {
+        box-shadow: 1px 2px 8px 1px rgb(214, 214, 214);
+        text-decoration: none;
+        cursor: pointer;
+        transition: all .6s;
+        &-title {
+            font-size: 1.4rem;
+            line-height: 1.8rem;
+            color: #4C4C4C;
+            font-weight: 500;
+            transition: all 2s;
+        }
+        &__imgfr {
+            width: 100%;
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+        &:hover {
+            transform: scale(1.05);
+        }
+    }
+}
+
+.sec-guessLike {
+    .container {
+        margin:0 auto;
+        padding: 2rem 2rem;
+        max-width: 1050px;
+        width: 70%;
+        @media (max-width: 1100px) {
+            width: 90%;
+            padding: 0 1rem;
+        }
+    }
+    &__titlebox {
+        &-h2 {
+            margin: 0 auto;
+            font-size: 1.8rem;
+            font-weight: 600;
+            color: rgb(83, 83, 83);
+            padding: .8rem 0;
+            border-bottom: 6px solid #EE7800;
+            display: inline-block;
+        }
+    }
+    &__title {
+        display: block;
+        text-align: center;
+        position: relative;
+        font-size: 1.2rem;
+        margin-bottom: .8rem;
+        &::before, &::after {
+            position: absolute;
+            content: " ";
+            width: 40%;
+            height: 0rem;
+            border-top: 1px solid black;
+            top: 50%;
+        }
+        &::before {
+            left: 0;
+        }
+        &::after {
+            left: 60%;
+        }
+    }
+    &__article {
+        h5 {
+            font-size: 1.1rem;
+        }
+        p {
+            font-size: 14px;
+        }
+    }
+    &__case {
+        p {
+            font-size: 1.1rem;
+            font-weight: 500;
+        }
+    }
+    &__card {
+        width: 100%;
+        overflow: hidden;
+        height: 26vh;
+        position: relative;
+        background-position: center center;
+        background-size: cover;
+        background-repeat: no-repeat;
+        
+        &.special {
+            height: 45vh;
+        }
+        &__img {
+            width: 100%;
+            transition: all .8s;
+        }
+        &__txt {
+            position: absolute;
+            bottom: 1rem;
+            left: 3rem;
+            color: white;
+            z-index: 2;
+            font-size: 600;
+            text-shadow: 1px 1px 2px gray;
+        }
+    }
+    &__video__play {
+        position: absolute;
+        width: 2.5rem;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
+
+.sec-05 {
+    border-top: 1px solid rgb(187, 187, 187);
+    padding-bottom: 2rem;
+    .container {
+        margin:0 auto;
+        padding: 0 2rem;
+        max-width: 1050px;
+        width: 70%;
+        @media (max-width: 1100px) {
+            width: 90%;
+            padding: 0 1rem;
+        }
+    }
+    &__tabdiv {
+        box-sizing: content-box;
+        align-items: center;
+        justify-content: space-between;
+        .more {
+            padding-bottom: .4rem;
+        }
+        .nav {
+            &-item {
+                position: relative;
+                padding-right: 18px;
+                padding-left: 18px;
+                &::after {
+                    position: absolute;
+                    content: " ";
+                    width: 100%;
+                    height: 30%;
+                    left: 0;
+                    top: 35%;
+                    background-color: transparent;
+                    border-right: 1px solid rgb(179, 179, 179);
+                    z-index: -1;
+                }
+                &:nth-of-type(3)::after {
+                    display: none;
+                }
+            }
+            &-item-link {
+                color: black;
+                font-weight: 500;
+                font-size: 1.6rem;
+                border: none;
+                position: relative;
+                padding: 1.5rem 0;
+                outline: none;
+                @media screen and(max-width: 385px) {
+                    font-size: 1.1rem; 
+                }
+                &:focus {
+                    outline: none !important;
+                }
+                &.active {
+                    color: #EE7800;
+                }
+                &::before {
+                    position: absolute;
+                    content: " ";
+                    width: 101%;
+                    height: 100%;
+                    left: -2px;
+                    top: 0px;
+                    background-color: transparent;
+                    border-top: 3px solid #EE7800;
+                    opacity: 0;
+                }
+            }
+        }
+        .nav-item-link.active::before {
+            opacity: 1;
+        }
+    }
+    .tab-pane {
+        height: 100%;
+    }
+    &tab-content {
+        height: 35vh;
+    }
+    .tabpar {
+        &__card {
+            margin: 3px;
+            position: relative;
+            font-size: 14px;
+            cursor: pointer;
+            &__imgfr {
+                width: 100%;
+                height: 25vh;
+                position: relative;
+                background-position: center center;
+                background-size: cover;
+                background-repeat: no-repeat;
+                
+                @media (max-width: 1100px) {
+                    height: 20vh;
+                }
+            }
+            h5 {
+                font-size: 1rem;
+            }
+            p {
+                font-size: .95rem;
+                font-weight: 300;
+                color: gray;
+            }
+            &__play {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+                width: 2.5rem;
+            }
+        }
+    }
+    .slick-prev {
+        top: 40%;
+        left: -2rem;
+        z-index: 2;
+    }
+    .slick-next {
+        top: 40%;
+        right: -2rem;
+        z-index: 2;
+    }
+    .slick-prev:before, .slick-next:before {
+        display: none;
+    }
+}
+
+.sec-06 {
+    padding: 2rem 0;
+    .container {
+        margin:0 auto;
+        padding: 1rem 2rem;
+        max-width: 1050px;
+        width: 70%;
+        @media (max-width: 1100px) {
+            width: 90%;
+            padding: 0 1rem;
+        }
+    }
+    &__title {
+        h3 {
+            display: inline-block;
+            font-size: 1.6rem;
+            padding-bottom: .5rem;
+            border-bottom: 6px solid #EE7800;
+            color: #535353;
+            margin-bottom: 0;
+        }
+    }
+    &__video {
+        width: 100%;;
+        position: relative;
+        &__imgfr {
+            width: 100%;
+            height: 34vh;
+            background-position: center center;
+            background-size: cover;
+            background-repeat: no-repeat;
+            @media (max-width: 1100px) {
+                height: 25vh;
+            }
+        }
+        &__play {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 2.5rem;
+            height: 2.5rem;
+            z-index: 2;
+            transform: translate(-50%, -50%);
+        }
+    }
+    &__videotxt {
+        width: 90%;
+        margin: 0 auto;
+        background-color: rgba(255, 255, 255, 0.842);
+        box-shadow: 1px 1px 3px 1px rgba(196, 196, 196, 0.795);
+        padding: .4rem .8rem;
+        transform: translateY(-20%);
+        font-weight: 600;
+        font-size: 1.1rem;
+    }
+    &__btns {
+        display: block;
+        outline: none;
+        border: none;
+        padding: .4rem 1.2rem;
+        width: 88%;
+        margin: 0 auto;
+        background-color: #ea068c;
+        color: white;
+        border-radius: 3px;
+        box-shadow: 1px 1px 3px 1px rgba(196, 196, 196, 0.795);
+        transition: all .4s;
+        text-decoration: none;
+        &:hover {
+            transform: translate(2px , 2px);
+            color: white;
+        }
+        &__txt {
+            font-weight: 600;
+        }
+        &:nth-of-type(2), &:nth-of-type(3) {
+            padding: 1rem 1.2rem;
+            // #10506d;
+        }
+    }
+    &__card {
+        width: 100%;
+        &:hover .sec-06__card__imgfr {
+            transform: scale(1.1);
+        }
+        h5 {
+            font-size: 1.1rem;
+            margin-bottom: .3rem;
+        }
+        p {
+            font-size: .9rem;
+        }
+        &__outer {
+            width: 100%;
+            height: 48vh;
+            overflow: hidden;
+        }
+        &__play {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 2.5rem;
+        }
+        &__imgfr {
+            width: 100%;
+            height: 48vh;
+            background-position: center center;
+            background-size: cover;
+            background-repeat: no-repeat;
+            transition: all .5s;
+            position: relative;
+        }
+    }
+    .slick-prev {
+        top: 40%;
+        left: .5rem;
+        z-index: 2;
+    }
+    .slick-next {
+        top: 40%;
+        right: .5rem;
+        z-index: 2;
+    }
+    .slick-prev:before, .slick-next:before {
+        display: none;
+    }
+}
+
+.sec-07 {
+    padding: 2rem 0;
+    .container {
+        margin:0 auto;
+        padding: .8rem 1.2rem;
+        max-width: 1050px;
+        width: 70%;
+        background-color: #F4F4F4;
+        @media (max-width: 1100px) {
+            width: 90%;
+            padding: 0 1rem;
+        }
+    }
+    &__slider {
+        height: 100%;
+        .slide-item {
+            height: 23vh;
+            background-position: center center;
+            background-size: contain;
+            background-repeat: no-repeat;
+            width: 100%;
+            margin: 0 5px;
+            cursor: pointer;
+            @media (max-width: 1100px) {
+                height: 18vh;
+            }
+        }
+    } 
+}
+
+.sec-08 {
+    padding-bottom: 2.5rem;
+    .container {
+        margin:0 auto;
+        padding: 1rem 0rem;
+        max-width: 1050px;
+        width: 70%;
+        @media (max-width: 1100px) {
+            width: 90%;
+            padding: 0 1rem;
+        }
+    }
+    &__title {
+        border-bottom: 6px solid #EE7800;
+        color: #535353;
+        h3 {
+            font-size: 1.6rem;
+        }
+    }
+    &__slider {
+        width: 100%;
+        cursor: pointer;
+    }
+    &__imgfr {
+        width: 100%;
+        height: 28vh;
+        background-position: center center;
+        background-size: cover;
+        background-repeat: no-repeat;
+        position: relative;
+        @media (max-width: 1100px) {
+            height: 20vh;
+        }
+    }
+    &__card {
+        h5 {
+            font-size: 1rem;
+        }
+        p {
+            font-size: .9rem;
+        }
+    }
+    &__card__play {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 2.5rem;
+    }
+    &__cardtxt {
+        font-size: 14px;
+        padding-right: .6rem;
+    }
+    .slick-prev {
+        top: 40%;
+        left: -2rem;
+        z-index: 2;
+    }
+    .slick-next {
+        top: 40%;
+        right: -2rem;
+        z-index: 2;
+    }
+    .slick-prev:before, .slick-next:before {
+        display: none;
+    }
+}
+
+.sec-09 {
+    background-color: #F4F4F4;
+    .container {
+        margin:0 auto;
+        padding: 2rem 0rem;
+        max-width: 1050px;
+        width: 70%;
+        @media (max-width: 1100px) {
+            width: 90%;
+            padding: 0 1rem;
+        }
+    }
+    &__imgfr {
+        width: 100%;
+        height: 25vh;
+        background-position: center center;
+        background-size: cover;
+        background-repeat: no-repeat;
+        position: relative;
+        @media (max-width: 1100px) {
+            height: 20vh;
+        }
+    }
+    &__card {
+        margin: 5px;
+        text-align: center;
+        cursor: pointer;
+        p {
+            font-size: 14px;
+            margin-top: .5rem;
+        }
+        &__play {
+            position: absolute;
+            right: .6rem;
+            bottom: .6rem;
+            width: 2.5rem;
+        }
+    }
+    &__title {
+        border-bottom: 6px solid #EE7800;
+        color: #535353;
+        h3 {
+            font-size: 1.6rem;
+        }
+    }
+    .slick-prev {
+        top: 40%;
+        left: -2rem;
+        z-index: 2;
+    }
+    .slick-next {
+        top: 40%;
+        right: -2rem;
+        z-index: 2;
+    }
+    
+    .slick-prev:before, .slick-next:before {
+        display: none;
+    }
+}
+
+.sec-10 {
+    padding: 2.5rem 0;
+    .container {
+        max-width: 1000px;
+        width: 70%;
+        @media (max-width: 1100px) {
+            width: 90%;
+            padding: 0 1rem;
+        }
+    }
+    &__titlebox {
+        border-bottom: 1px solid rgb(75, 75, 75);
+        display: flex;
+        justify-content: center;
+        &-h2 {
+            margin: 0 auto;
+            font-size: 1.8rem;
+            font-weight: 600;
+            color: rgb(83, 83, 83);
+            padding: .8rem 0;
+            border-bottom: 6px solid #EE7800;
+            display: inline-block;
+        }
+    }
+    &__card {
+        cursor: pointer;
+        h5 {
+            font-size: 1rem;
+            margin-bottom: .3rem;
+        }
+        p {
+            font-size: .95rem;
+            font-weight: 300;
+            color: gray;
+        }
+        &-img {
+            width: 100%;
+            height: 25vh;
+            background-position: center center;
+            background-size: cover;
+            background-repeat: no-repeat;
+            position: relative;
+            @media (max-width: 1100px) {
+                height: 20vh;
+            }
+        }
+        &__play {
+            position: absolute;
+            right: 1rem;
+            bottom: 1rem;
+            width: 2.5rem;
+            height: 2.5rem;
+        }
+    }
+}
+
+.sec-11 {
+    padding: 2.5rem 0;
+    padding-top: 1rem;
+    .container {
+        max-width: 1000px;
+        width: 70%;
+        @media (max-width: 1100px) {
+            width: 90%;
+            padding: 0 1rem;
+        }
+    }
+    &__titlebox {
+        border-bottom: 1px solid rgb(75, 75, 75);
+        display: flex;
+        justify-content: center;
+        &-h2 {
+            margin: 0 auto;
+            font-size: 1.8rem;
+            font-weight: 600;
+            color: rgb(83, 83, 83);
+            padding: .8rem 0;
+            border-bottom: 6px solid #EE7800;
+            display: inline-block;
+        }
+    }
+    &__card {
+        cursor: pointer;
+        h5 {
+            font-size: 1rem;
+            margin-bottom: .3rem;
+        }
+        p {
+            font-size: .95rem;
+            font-weight: 300;
+            color: gray;
+        }
+        &-img {
+            width: 100%;
+            height: 25vh;
+            background-position: center center;
+            background-size: cover;
+            background-repeat: no-repeat;
+            position: relative;
+            @media (max-width: 1100px) {
+                height: 20vh;
+            }
+        }
+        &__play {
+            position: absolute;
+            right: 1rem;
+            bottom: 1rem;
+            width: 2.5rem;
+            height: 2.5rem;
+        }
+    }
+}
+
+.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;
+    }
+}
+
+#videoModal .modal-content {
+    background-color: transparent;
+    border: none;
+    width: fit-content;
+}
+
+#videoModal .modal-dialog {
+    max-width: 700px;
+}
+
+.more {
+    &link {
+        text-decoration: none;
+        color: #EE7800;
+        font-weight: 700;
+        &:hover {
+            color: #EE7800;
+        }
+    }
+}
+
+.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);
+    }
+        
+}
+
+.sec-login {
+    &-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);
+    }
+}
+
+#loginModal {
+    .btn-close {
+        position: absolute;
+        right: -2rem;
+        top: -2rem;
+    }
+}
+
+#favorModal {
+    .btn-close {
+        position: absolute;
+        right: -2rem;
+        top: -2rem;
+    }
+    .sec-favor {
+        &-title {
+            color: #4C4C4C;
+            font-size: 18px;
+        }
+        &-list {
+            background-color: #F3F3F3;
+            padding: 1rem;
+            padding-bottom: 1.4rem;
+            hr {
+                background-color: #aaaaaa;
+            }
+        }
+        &-form, &-checklist {
+            .form-user {
+                width: 50%;
+                color: #707070;
+                font-size: 16px;
+            }
+            .form-progressbar {
+                width: 50%;
+                display: flex;
+                justify-content: space-between;
+                li {
+                    width: 1.6rem;
+                    height: 1.6rem;
+                    border-radius: 50%;
+                    border: 2px solid #D3D3D3;
+                    line-height: 1.4rem;
+                    display: flex;
+                    justify-content: center;
+                    position: relative;
+                    color: #D3D3D3;
+                    background-color: #F3F3F3;
+                    z-index: 2;
+                    &.active {
+                        border: 2px solid #EE7800;
+                        color: #EE7800;
+                        &::before {
+                            border-top: 2px solid #EE7800;
+                        }
+                    }
+                    &::before {
+                        position: absolute;
+                        content: " ";
+                        width: 4rem;
+                        height: 0;
+                        border-top: 2px dashed #D3D3D3;
+                        right: 100%;
+                        top: 50%;
+                        z-index: 1;
+                    }
+                    &:nth-of-type(1)::before {
+                        display: none;
+                    }
+                }
+            }
+            .form-step {
+                background-color: white;
+                border-radius: 3px;
+                padding: 1.5rem 1rem;
+                padding-bottom: 1.5rem;
+                box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
+                overflow: visible;
+                
+                .next {
+                    padding: .6rem 5rem;
+                    background-color: #EE7800;
+                    border-radius: 3px;
+                    color: white;
+                    border: none;
+                    outline: none;
+                }
+            }
+            .form-step1 {
+                display: block;
+            }
+            .form-step2 {
+                display: none;
+            }
+            .form-step3 {
+                display: none;
+                position: relative;
+                padding-bottom: 1.5rem;
+            }
+            input[type="checkbox"], input[type="radio"] {
+                display: none;
+            }
+            .imgfr {
+                
+                background-position: center center;
+                background-size: cover;
+                background-repeat: no-repeat;
+                width: 100%;
+                height: 4.5rem;
+                border-radius: 8px;
+                border: 2px solid transparent;
+            }
+            h4 {
+                color: #AAAAAA;
+                font-size: 15px;
+                font-weight: 400;
+            }
+            input[type="checkbox"]:checked + .fs-label-info .imgfr {
+                border: 2px solid #EE7800;
+            } 
+            input[type="checkbox"]:checked + .fs-label-chbox {
+                border: 1px solid #EE7800;
+                color: #EE7800;
+            }
+            input[type="radio"]:checked + .fs-label-chbox {
+                border: 1px solid #EE7800;
+                color: #EE7800;
+            } 
+            .step3-block {
+                margin-bottom: 1rem;
+                &:nth-of-type(3) {
+                    margin-bottom: 0;
+                }
+                &-title {
+                    color: #AAAAAA;
+                    display: block;
+                    margin-bottom: .5rem;
+                    font-size: 1rem;
+                }
+                .radio {
+                    display: inline-block;
+                    padding: .25rem .7rem;
+                    margin-right: .4rem;
+                    border: 1px solid #707070;
+                    border-radius: 2rem;
+                    color: #797979;
+                    margin-bottom: .5rem;
+                }
+            }
+            .skip {
+                padding: .3rem 1rem;
+                color: #AAAAAA;
+                border: none;
+                outline: none;
+                background-color: transparent;
+            }
+            .btngrp {
+                /* position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: -6rem; */
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                .next {
+                    transform: translateY(0rem);
+                }
+            }
+        }
+        &-checklist .form-user {
+            margin: 0 auto;
+            text-align: center;
+            margin-bottom: 1rem;
+        }
+        &-btns {
+            padding: 1rem;
+            background-color: white;
+            box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
+        }
+    }
+}
+
+ .test {
+    position: relative;
+    .cover {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        display: block;
+        background-color: white;
+        height: 100%;
+        &.slidein  {
+            //transform: translateX(0px);
+            -webkit-animation: slidein 2s forwards;
+            
+            animation: slidein  2s forwards;
+            
+        }
+    }
+    
+}
+
+.title_back {
+    display: block;
+    position: relative;
+    width: 10em;
+    height: 1.75em;
+    overflow: hidden;
+    .title {
+        position: absolute;
+        left: 0;
+        bottom: -1.75em;
+        display: block;
+        transition: all 1s;
+    }
+}
+
+.test_content {
+    opacity: 0;
+    &.fadein  {
+        //transform: translateX(0px);
+        -webkit-animation: fadein 2s forwards;
+        
+        animation: fadein  2s forwards;
+        
+    }
+}
+
+@-webkit-keyframes slidein {
+    100% { height: 0px; }
+}
+
+@keyframes slidein {
+    100% { height: 0px; }
+} 
+
+@-webkit-keyframes fadein {
+    100% { opacity: 1; }
+}
+
+@keyframes fadein {
+    100% { opacity: 1; }
+} 

images/menu/agent.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23.264" height="17.658" viewBox="0 0 23.264 17.658"><defs><style>.a,.b,.c{fill:none;stroke-miterlimit:10;stroke-width:1.5px;}.a{stroke:#ee7800;}.a,.c{stroke-linecap:round;}.b,.c{stroke:#4c4c4c;}.d{fill:#4c4c4c;}</style></defs><g transform="translate(-36.25 -652.229)"><path class="a" d="M-183.533,269.746a9.468,9.468,0,0,0,12.306,0" transform="translate(229.689 395.066)"/><g transform="translate(268.976 438.733)"><path class="b" d="M-224.652,214.6l-6.857,5.608a1.272,1.272,0,0,0-.467.984v7.94A1.272,1.272,0,0,0-230.7,230.4h13.543a1.272,1.272,0,0,0,1.271-1.272V221.04a1.272,1.272,0,0,0-.467-.985l-6.686-5.457A1.271,1.271,0,0,0-224.652,214.6Z" transform="translate(0)"/><path class="c" d="M-183.533,269.746a9.468,9.468,0,0,0,12.306,0" transform="translate(-39.287 -44.667)"/><circle class="d" cx="1.152" cy="1.152" r="1.152" transform="translate(-223.933 221.054)"/></g></g></svg>

images/menu/building.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.887" height="22.591" viewBox="0 0 14.887 22.591"><defs><style>.a{fill:#ee7800;stroke:#ee7800;stroke-width:1.5px;}.a,.b{stroke-miterlimit:10;}.b{fill:none;stroke:#4c4c4c;}</style></defs><g transform="translate(-37.5 -512.683)"><g transform="translate(-714.436 754.034)"><path class="a" d="M.5,0H1.921a.5.5,0,0,1,.5.5V5.01a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V.5A.5.5,0,0,1,.5,0Z" transform="translate(757.937 -226.419)"/><g transform="translate(752.436 -240.851)"><path class="b" d="M380.179,737.87v-20.2a.7.7,0,0,0-.694-.694h-12.5a.693.693,0,0,0-.693.693v20.2a.7.7,0,0,0,.694.694h12.5A.7.7,0,0,0,380.179,737.87Z" transform="translate(-366.292 -716.973)"/><g transform="translate(2.484 3.029)"><line class="b" x2="1.955"/><line class="b" x2="1.955" transform="translate(3.482)"/><line class="b" x2="1.955" transform="translate(6.965)"/></g><g transform="translate(2.484 6.16)"><line class="b" x2="1.955"/><line class="b" x2="1.955" transform="translate(3.482)"/><line class="b" x2="1.955" transform="translate(6.965)"/></g><g transform="translate(2.484 9.291)"><line class="b" x2="1.955"/><line class="b" x2="1.955" transform="translate(3.482)"/><line class="b" x2="1.955" transform="translate(6.965)"/></g><g transform="translate(2.484 12.422)"><line class="b" x2="1.955"/><line class="b" x2="1.955" transform="translate(3.482)"/><line class="b" x2="1.955" transform="translate(6.965)"/></g><path class="b" d="M.5,0H2.284a.5.5,0,0,1,.5.5V5.763a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V.5A.5.5,0,0,1,.5,0Z" transform="translate(5.551 15.827)"/></g></g></g></svg>

images/menu/cart.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.145" height="19.609" viewBox="0 0 20.145 19.609"><defs><style>.a{fill:#ee7800;}.b{fill:#4c4c4c;stroke:#4c4c4c;stroke-width:0.3px;}</style></defs><g transform="translate(-33.269 -144.612)"><path class="a" d="M.356,0h9.853L9.055,4.984,2.2,5.716Z" transform="translate(40 151)"/><g transform="translate(-1.889 -3.303)"><path class="b" d="M80.549,521.865a2.071,2.071,0,1,0,2.071,2.071h0A2.071,2.071,0,0,0,80.549,521.865Zm0,3.222a1.151,1.151,0,1,1,1.151-1.151A1.151,1.151,0,0,1,80.549,525.087Z" transform="translate(-38.913 -358.633)"/><path class="b" d="M279.08,521.865a2.071,2.071,0,1,0,2.071,2.071h0A2.071,2.071,0,0,0,279.08,521.865Zm0,3.222a1.151,1.151,0,1,1,1.151-1.151A1.151,1.151,0,0,1,279.08,525.087Z" transform="translate(-228.698 -358.633)"/><path class="b" d="M1.2,180.471l-14.982-.207L-14.194,179a2.117,2.117,0,0,0-1.979-1.427h-1.542a.46.46,0,0,0-.46.46.46.46,0,0,0,.46.46h1.542a1.2,1.2,0,0,1,1.1.805l2.923,8.815-.23.529a2.209,2.209,0,0,0,.207,2,2.14,2.14,0,0,0,1.726.967H-1.49a.46.46,0,0,0,.46-.46.46.46,0,0,0-.46-.46h-8.953a1.174,1.174,0,0,1-.967-.552,1.266,1.266,0,0,1-.115-1.1l.184-.414,9.689-1.013a2.532,2.532,0,0,0,2.186-1.933l1.1-4.626a.391.391,0,0,0-.069-.391A.576.576,0,0,0,1.2,180.471Zm-1.565,4.994a1.565,1.565,0,0,1-1.4,1.22l-9.574.99-2.14-6.49,14.108.207Z" transform="translate(53.484 -29.506)"/></g></g></svg>

images/menu/champion.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17.823" height="15.595" viewBox="0 0 17.823 15.595"><defs><style>.a{fill:#4c4c4c;}.b{fill:#ee7800;stroke:#ee7800;stroke-miterlimit:10;stroke-width:1.5px;}</style></defs><g transform="translate(-37.115 -839.999)"><path class="a" d="M17.052,6.084V3.856H5.913V6.084H2.571V8.312A3.344,3.344,0,0,0,6.915,11.5a5.573,5.573,0,0,0,3.453,2.27v3.453H9.254a2.228,2.228,0,0,0-2.228,2.228h8.912a2.228,2.228,0,0,0-2.228-2.228H12.6V13.77a5.572,5.572,0,0,0,3.453-2.27,3.344,3.344,0,0,0,4.345-3.189V6.084ZM5.913,10.331A2.021,2.021,0,0,1,3.894,8.312V7.2H5.913V8.312A5.556,5.556,0,0,0,6.277,10.3,2.022,2.022,0,0,1,5.913,10.331ZM19.071,8.312A2.017,2.017,0,0,1,16.687,10.3a5.556,5.556,0,0,0,.365-1.985V7.2h2.019Z" transform="translate(34.545 836.143)"/><path class="b" d="M.5,0H1.921a.5.5,0,0,1,.5.5V5.01a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V.5A.5.5,0,0,1,.5,0Z" transform="translate(49.421 851.01) rotate(180)"/></g></svg>

images/menu/designs.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.329" height="19.438" viewBox="0 0 19.329 19.438"><defs><style>.a,.b,.c{fill:none;stroke:#4c4c4c;}.a{stroke-miterlimit:10;}.b,.c{stroke-linejoin:round;}.c{stroke-linecap:round;}.d{fill:#ee7800;}</style></defs><g transform="translate(-35.5 -282.935)"><g transform="translate(36 283.435)"><g transform="translate(3.852 1.228)"><line class="a" y1="1.099" x2="1.099" transform="translate(0 0)"/><line class="a" y1="1.099" x2="1.099" transform="translate(0.926 0.926)"/><line class="a" y1="1.099" x2="1.099" transform="translate(2.778 2.778)"/><line class="a" y1="1.977" x2="1.977" transform="translate(0.973 1.852)"/></g><g transform="translate(12.033 10.395)"><line class="a" y1="1.977" x2="1.977" transform="translate(0 0)"/><line class="a" y1="1.099" x2="1.099" transform="translate(1.804 0.926)"/><line class="a" y1="1.977" x2="1.977" transform="translate(2.778 2.778)"/><line class="a" y1="1.099" x2="1.099" transform="translate(2.73 1.852)"/></g><g transform="translate(0 0)"><path class="b" d="M102.463,535.153l-5.283-5.283-3.724,3.724,5.283,5.283" transform="translate(-93.456 -529.871)"/><rect class="c" width="5.267" height="8.084" transform="translate(8.681 12.515) rotate(-45)"/></g><g transform="translate(3.452 1.941)"><path class="d" d="M101.265,547.362l11.892-11.892-2.429-2.429L98.836,544.934" transform="translate(-98.836 -533.042)"/></g><line class="a" x2="2.489" y2="2.489" transform="translate(2.016 13.997)"/><g transform="translate(0.241 0.729)"><path class="a" d="M116.337,534.7l.384-.384a1.488,1.488,0,0,0,0-2.1h0l-.384-.384a1.489,1.489,0,0,0-2.105,0l-.384.384" transform="translate(-99.626 -531.39)"/><path class="a" d="M98.723,547.538l12.19-12.19-2.489-2.489-12.19,12.19-1.765,4.072a.146.146,0,0,0,.191.191Z" transform="translate(-94.458 -531.782)"/></g></g></g></svg>

images/menu/discuss.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.651" height="16.774" viewBox="0 0 19.651 16.774"><defs><style>.a,.b,.c{fill:none;stroke-miterlimit:10;}.a{stroke:#dc5d00;stroke-width:2px;}.a,.c{stroke-linecap:round;}.b,.c{stroke:#4c4c4c;}</style></defs><g transform="translate(-36.5 -562.173)"><g transform="translate(-765.112 850)"><g transform="translate(805.046 -284.126)"><path class="a" d="M442.421,659.288H454.9" transform="translate(-442.421 -659.288)"/><path class="a" d="M442.421,663.267H454.9" transform="translate(-442.421 -660.504)"/><path class="a" d="M442.421,667.246H454.9" transform="translate(-442.421 -661.72)"/></g><g transform="translate(802.112 -287.327)"><path class="b" d="M455.314,666.05a1.616,1.616,0,0,0,1.612-1.612v-9.612a1.616,1.616,0,0,0-1.612-1.612H439.887a1.616,1.616,0,0,0-1.612,1.612v9.612a1.616,1.616,0,0,0,1.612,1.612h4.022v2.757a.174.174,0,0,0,.273.143l3.79-2.885S452.809,666.05,455.314,666.05Z" transform="translate(-438.275 -653.215)"/><g transform="translate(3.233 3.467)"><path class="c" d="M442.932,658.208h12.478" transform="translate(-442.932 -658.208)"/><path class="c" d="M442.932,662.187h12.478" transform="translate(-442.932 -659.424)"/><path class="c" d="M442.932,666.166h12.478" transform="translate(-442.932 -660.641)"/></g></g></g></g></svg>

images/menu/fb.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="43" height="43" viewBox="0 0 43 43"><defs><style>.a{fill:#3b5998;}.b{fill:#fff;}</style></defs><g transform="translate(0.385 0.231)"><g transform="translate(0)"><circle class="a" cx="21.5" cy="21.5" r="21.5" transform="translate(-0.385 -0.231)"/><path class="b" d="M25.623,17.387h2.267V14H25.223c-3.262.124-3.929,1.965-4,3.894h0v1.689H19v3.307h2.222v8.889h3.351V22.889h2.738l.533-3.316H24.574V18.551a1.084,1.084,0,0,1,1-1.165Z" transform="translate(-2.156 -1.555)"/></g></g></svg>

images/menu/freelecture.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18.699" height="20.865" viewBox="0 0 18.699 20.865"><defs><style>.a{fill:#4c4c4c;}.b{fill:#ee7800;}</style></defs><g transform="translate(-36.005 -606.183)"><g transform="translate(36.005 606.183)"><path class="a" d="M39.454,8.695l1.131-1.132L37.931,4.909,36.8,6.042a9.674,9.674,0,0,1,2.654,2.653Z" transform="translate(-21.886 -2.787)"/><path class="a" d="M11.587,6.355a9.056,9.056,0,1,0,9.058,9.056,9.055,9.055,0,0,0-9.058-9.056Zm0,17.013a7.957,7.957,0,1,1,7.959-7.958,7.957,7.957,0,0,1-7.959,7.958Z" transform="translate(-2.533 -3.602)"/><path class="a" d="M18.336,1.9a9.057,9.057,0,0,1,3.755,0V1.211h.536V.048H17.8V1.212h.536Z" transform="translate(-11.158 -0.048)"/><path class="b" d="M23.327,11.447v6.878H30.2a6.878,6.878,0,0,0-6.878-6.878Z" transform="translate(-14.294 -6.488)"/></g></g></svg>

images/menu/icon/blogs.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52.304" viewBox="0 0 52 52.304"><defs><style>.a{fill:#ee7800;}.b,.c{fill:none;stroke:#4c4c4c;stroke-width:1.5px;}.b{stroke-miterlimit:10;}.c{stroke-linecap:round;stroke-linejoin:round;}.d{fill:#4c4c4c;font-size:13px;font-family:PingFangTC-Semibold, PingFang TC;font-weight:600;}</style></defs><g transform="translate(690.5 -262.263)"><g transform="translate(-850.771 -188)"><circle class="a" cx="4.441" cy="4.441" r="4.441" transform="translate(171.559 468.668)"/><g transform="translate(176 451.319)"><circle class="b" cx="1.735" cy="1.735" r="1.735" transform="translate(10.223 10.279)"/><path class="c" d="M315.279,656.453l-3.2,2.681-6.156-7.337,3.2-2.681" transform="translate(-290.297 -649.116)"/><line class="c" x1="9.775" y2="8.202" transform="translate(0.854 13.13)"/><path class="c" d="M310.4,658.9c-2.279,1.911-3.224,5.765-3,8.011l-17.98,4.456,7.51-16.934c2.174.607,6.132.346,8.41-1.567" transform="translate(-289.416 -649.316)"/></g></g><text class="d" transform="translate(-664.5 310.567)"><tspan x="-26" y="0">專欄文章</tspan></text></g></svg>

images/menu/icon/designer.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="53.497" viewBox="0 0 40 53.497"><defs><style>.a{fill:#4c4c4c;font-size:13px;font-family:PingFangTC-Semibold, PingFang TC;font-weight:600;}.b{fill:#ee7800;}.c,.d{fill:none;stroke:#4c4c4c;stroke-width:1.5px;}.c{stroke-miterlimit:10;}.d{stroke-linecap:round;stroke-linejoin:round;}</style></defs><g transform="translate(476.524 -261.498)"><text class="a" transform="translate(-456.524 310.995)"><tspan x="-19.5" y="0">設計師</tspan></text><path class="b" d="M138.144,742.081l-3.858-5.686,9.194-3.858,4.942,7.511" transform="translate(-608.31 -456.038)"/><g transform="translate(-472.024 262.248)"><circle class="c" cx="4.998" cy="4.998" r="4.998" transform="translate(11.782 0)"/><path class="c" d="M162.551,734.4a5.37,5.37,0,0,0-3.588-4.578,5.5,5.5,0,0,0-6.5,2.555l-4.008,6.944a5.274,5.274,0,0,0-.335.706h-4.935a1.937,1.937,0,0,0-1.891,1.379,1.9,1.9,0,0,0,1.824,2.407H162.04a.883.883,0,0,0,.888-.9C162.869,740.583,162.647,735.815,162.551,734.4Z" transform="translate(-135.953 -718.67)"/><path class="d" d="M138.9,740.1l-3.617-5.331,8.62-3.617,4.633,7.042" transform="translate(-135.285 -718.852)"/><line class="d" y1="3.298" x2="1.999" transform="translate(7.092 18.003)"/></g></g></svg>

images/menu/icon/forum.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="48.491" viewBox="0 0 40 48.491"><defs><style>.a,.b,.c{fill:none;stroke-miterlimit:10;}.a{stroke:#dc5d00;stroke-width:2px;}.a,.c{stroke-linecap:round;}.b,.c{stroke:#4c4c4c;stroke-width:1.5px;}.d{fill:#4c4c4c;font-size:13px;font-family:PingFangTC-Semibold, PingFang TC;font-weight:600;}</style></defs><g transform="translate(544.526 -266.509)"><path class="a" d="M442.421,659.288h17.012" transform="translate(-974.66 -386.665)"/><path class="a" d="M442.421,663.267h17.012" transform="translate(-974.66 -386.877)"/><path class="a" d="M442.421,667.246h17.012" transform="translate(-974.66 -387.089)"/><path class="b" d="M461.505,670.714a2.2,2.2,0,0,0,2.2-2.2v-13.1a2.2,2.2,0,0,0-2.2-2.2H440.472a2.2,2.2,0,0,0-2.2,2.2v13.1a2.2,2.2,0,0,0,2.2,2.2h5.484v3.759a.237.237,0,0,0,.372.2l5.168-3.933S458.091,670.714,461.505,670.714Z" transform="translate(-974.514 -385.956)"/><g transform="translate(-531.831 271.986)"><path class="c" d="M442.932,658.208h17.012" transform="translate(-442.932 -658.208)"/><path class="c" d="M442.932,662.187h17.012" transform="translate(-442.932 -658.421)"/><path class="c" d="M442.932,666.166h17.012" transform="translate(-442.932 -658.633)"/></g><text class="d" transform="translate(-524.526 311)"><tspan x="-19.5" y="0">討論區</tspan></text></g></svg>

images/menu/icon/mueble.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52.839" viewBox="0 0 52 52.839"><defs><style>.a{fill:#4c4c4c;font-size:13px;font-family:PingFangTC-Semibold, PingFang TC;font-weight:600;}.b{fill:#ee7800;}.c{fill:none;stroke:#4c4c4c;stroke-miterlimit:10;stroke-width:1.5px;}</style></defs><g transform="translate(342.524 -262.156)"><text class="a" transform="translate(-316.524 310.995)"><tspan x="-26" y="0">居家商品</tspan></text><path class="b" d="M3.411,0H15.827a3.411,3.411,0,0,1,3.411,3.411v8.582a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V3.411A3.411,3.411,0,0,1,3.411,0Z" transform="translate(-328.137 263.525)"/><path class="c" d="M293.484,730.776V733h17.8v-2.219a2.633,2.633,0,0,1,1.233-2.228v-4.439a3.851,3.851,0,0,0-3.851-3.852H296.1a3.852,3.852,0,0,0-3.852,3.852v4.439A2.634,2.634,0,0,1,293.484,730.776Z" transform="translate(-619.337 -457.351)"/><path class="c" d="M313.832,728.312a2.641,2.641,0,0,0-2.642,2.641v2.219h-17.8v-2.219a2.642,2.642,0,0,0-5.283,0v4.438a2.642,2.642,0,0,0,2.642,2.641h23.081a2.641,2.641,0,0,0,2.641-2.641v-4.438A2.641,2.641,0,0,0,313.832,728.312Z" transform="translate(-619.246 -457.529)"/><g transform="translate(-327.087 280.504)"><path class="c" d="M292.25,738.252V744a.482.482,0,0,0,.482.482h.852a.481.481,0,0,0,.462-.342l2.075-5.886Z" transform="translate(-292.25 -738.252)"/><path class="c" d="M312.884,738.252V744a.482.482,0,0,1-.482.482h-.852a.482.482,0,0,1-.462-.342l-2.075-5.886Z" transform="translate(-292.619 -738.252)"/></g></g></svg>

images/menu/icon/newcase.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="55.644" viewBox="0 0 40 55.644"><defs><style>.a{fill:#4c4c4c;font-size:13px;font-family:PingFangTC-Semibold, PingFang TC;font-weight:600;}.b{fill:#ee7800;stroke:#ee7800;}.b,.c{stroke-miterlimit:10;stroke-width:1.5px;}.c{fill:none;stroke:#4c4c4c;}</style></defs><g transform="translate(266.524 -259.351)"><text class="a" transform="translate(-246.524 310.995)"><tspan x="-19.5" y="0">新建案</tspan></text><path class="b" d="M.5,0H2.8a.5.5,0,0,1,.5.5V6.831a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V.5A.5.5,0,0,1,.5,0Z" transform="translate(-248.491 280.778)"/><g transform="translate(-255.991 260.101)"><path class="c" d="M385.225,745.463V717.92a.947.947,0,0,0-.947-.947H367.237a.945.945,0,0,0-.945.945v27.545a.947.947,0,0,0,.947.947h17.04A.947.947,0,0,0,385.225,745.463Z" transform="translate(-366.292 -716.973)"/><g transform="translate(3.386 4.13)"><line class="c" x2="2.665"/><line class="c" x2="2.665" transform="translate(4.748)"/><line class="c" x2="2.665" transform="translate(9.495)"/></g><g transform="translate(3.386 8.399)"><line class="c" x2="2.665"/><line class="c" x2="2.665" transform="translate(4.748)"/><line class="c" x2="2.665" transform="translate(9.495)"/></g><g transform="translate(3.386 12.667)"><line class="c" x2="2.665"/><line class="c" x2="2.665" transform="translate(4.748)"/><line class="c" x2="2.665" transform="translate(9.495)"/></g><g transform="translate(3.386 16.936)"><line class="c" x2="2.665"/><line class="c" x2="2.665" transform="translate(4.748)"/><line class="c" x2="2.665" transform="translate(9.495)"/></g><path class="c" d="M.5,0H3.3a.5.5,0,0,1,.5.5V7.858a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V.5A.5.5,0,0,1,.5,0Z" transform="translate(7.568 21.579)"/></g></g></svg>

images/menu/icon/portfolio.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="27.482" height="50.567" viewBox="0 0 27.482 50.567"><defs><style>.a{fill:#ee7800;}.b{fill:none;stroke:#4c4c4c;stroke-miterlimit:10;stroke-width:1.5px;}.c{fill:#4c4c4c;font-size:13px;font-family:PingFangTC-Semibold, PingFang TC;font-weight:600;}</style></defs><g transform="translate(817.5 -264)"><g transform="translate(-847 -186.369)"><rect class="a" width="9.826" height="9.826" rx="1" transform="translate(47.156 450.369)"/><g transform="translate(32 452.266)"><rect class="b" width="9.826" height="9.826" rx="1"/><rect class="b" width="9.826" height="9.826" rx="1" transform="translate(12.377)"/><rect class="b" width="9.826" height="9.826" rx="1" transform="translate(0 12.713)"/><rect class="b" width="9.826" height="9.826" rx="1" transform="translate(12.377 12.713)"/></g></g><text class="c" transform="translate(-804.5 310.567)"><tspan x="-13" y="0">圖輯</tspan></text></g></svg>

images/menu/icon/price.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="51.243" viewBox="0 0 52 51.243"><defs><style>.a{fill:#4c4c4c;font-size:13px;font-family:PingFangTC-Semibold, PingFang TC;font-weight:600;}.b{fill:#ee7800;}.c,.d{fill:none;stroke:#4c4c4c;stroke-width:1.5px;}.c{stroke-miterlimit:10;}.d{stroke-linecap:round;stroke-linejoin:round;}</style></defs><g transform="translate(202.55 -263.751)"><text class="a" transform="translate(-176.55 310.995)"><tspan x="-26" y="0">實價登錄</tspan></text><path class="b" d="M0,0H25.714a0,0,0,0,1,0,0V3.9A1.524,1.524,0,0,1,24.19,5.428H1.524A1.524,1.524,0,0,1,0,3.9V0A0,0,0,0,1,0,0Z" transform="translate(-188.573 279.652)"/><g transform="translate(-190.276 264.501)"><path class="c" d="M463.086,739.875a2.324,2.324,0,0,0,2.317-2.317V722.922a2.324,2.324,0,0,0-2.317-2.317h-22.82a2.324,2.324,0,0,0-2.317,2.317v14.637a2.324,2.324,0,0,0,2.317,2.317Z" transform="translate(-437.949 -720.605)"/><path class="d" d="M446.936,745.435h9.589" transform="translate(-438.003 -720.754)"/><line class="c" x1="27" transform="translate(0.454 13.571)"/><line class="c" y2="4.22" transform="translate(13.727 20.028)"/></g></g></svg>

images/menu/icon/soft.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="55.995" viewBox="0 0 52 55.995"><defs><style>.a{fill:#4c4c4c;font-size:13px;font-family:PingFangTC-Semibold, PingFang TC;font-weight:600;}.b{fill:#ee7800;}.c,.d{fill:none;stroke:#4c4c4c;stroke-miterlimit:10;stroke-width:1.5px;}.d{stroke-linecap:round;}</style></defs><g transform="translate(412.524 -259)"><text class="a" transform="translate(-386.524 310.995)"><tspan x="-26" y="0">軟裝佈置</tspan></text><path class="b" d="M237.465,730.155l-3.136-11.418a.473.473,0,0,0-.456-.347H224.9a.472.472,0,0,0-.456.347l-3.137,11.417a.476.476,0,0,0,.459.6h15.239A.475.475,0,0,0,237.465,730.155Z" transform="translate(-613.126 -459.39)"/><g transform="translate(-393.836 261.051)"><path class="c" d="M235.6,728.8l-3.137-11.418a.472.472,0,0,0-.456-.347h-8.97a.474.474,0,0,0-.457.347L219.442,728.8a.476.476,0,0,0,.459.6h15.239A.476.476,0,0,0,235.6,728.8Z" transform="translate(-219.425 -717.031)"/><line class="d" x2="13.182" transform="translate(1.619 28.132)"/><line class="c" y2="15.765" transform="translate(8.096 12.367)"/><line class="d" y2="6.795" transform="translate(11.132 12.367)"/></g></g></svg>

images/menu/icon/video.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="48.317" viewBox="0 0 36 48.317"><defs><style>.a{fill:#ee7800;}.b{fill:none;stroke:#4c4c4c;stroke-miterlimit:10;stroke-width:1.5px;}.c{fill:#4c4c4c;font-size:13px;font-family:Helvetica-Bold, Helvetica;font-weight:700;}</style></defs><g transform="translate(612.5 -265.25)"><path class="a" d="M373.8,661.656v7.138a.532.532,0,0,0,.777.472l6.855-3.544a.533.533,0,0,0,0-.945l-6.856-3.593A.532.532,0,0,0,373.8,661.656Z" transform="translate(-972.144 -388.334)"/><path class="b" d="M375.436,654.408c-3.4,0-6.822.106-10.171.318a3.516,3.516,0,0,0-3.279,3.3,56.7,56.7,0,0,0,0,11.914,3.49,3.49,0,0,0,3.275,3.3c3.891.21,7.583.316,10.972.316s6.589-.106,9.526-.316a3.527,3.527,0,0,0,3.285-3.3,56.694,56.694,0,0,0,0-11.914,3.522,3.522,0,0,0-3.279-3.3C382.311,654.515,378.835,654.408,375.436,654.408Z" transform="translate(-969.897 -388.408)"/><path class="b" d="M372.674,660.531v7.138a.533.533,0,0,0,.777.473l6.855-3.545a.532.532,0,0,0,0-.944l-6.855-3.594A.533.533,0,0,0,372.674,660.531Z" transform="translate(-970.484 -388.706)"/><text class="c" transform="translate(-594.5 310.567)"><tspan x="-17.583" y="0">Video</tspan></text></g></svg>

images/menu/lecture.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.802" height="22.366" viewBox="0 0 14.802 22.366"><defs><style>.a{fill:#ee7800;}.b{fill:#4c4c4c;stroke:#4c4c4c;stroke-width:0.3px;}</style></defs><g transform="translate(-38.436 -695.576)"><rect class="a" width="4.457" height="9.208" rx="1" transform="translate(46.883 705.17)"/><path class="b" d="M102.329,5.93a.69.69,0,0,0-.552-1.1H91.434V4.019a1.028,1.028,0,0,1,.3-.731l.975-.975a.347.347,0,0,0,.039-.047,1.208,1.208,0,1,0-.479-.479.343.343,0,0,0-.047.039l-.975.975a1.713,1.713,0,0,0-.5,1.219v.808H88.676a.69.69,0,0,0-.552,1.1l2.62,3.494V20H90.4a1.036,1.036,0,0,0-1.034,1.034v.69a.345.345,0,0,0,.345.345h11.033a.345.345,0,0,0,.345-.345v-.69A1.036,1.036,0,0,0,100.053,20h-.345V9.424ZM93.33.69a.517.517,0,1,1-.517.517A.518.518,0,0,1,93.33.69ZM98.674,20a.345.345,0,1,0,0,.69h1.379a.345.345,0,0,1,.345.345v.345H90.055v-.345a.345.345,0,0,1,.345-.345h6.9a.345.345,0,1,0,0-.69H91.434V7.585H97.3a.345.345,0,1,0,0-.69H91.089a.345.345,0,0,0-.345.345V8.275L88.676,5.517h13.1L99.709,8.275V7.24a.345.345,0,0,0-.345-.345h-.69a.345.345,0,1,0,0,.69h.345V20Z" transform="translate(-49.389 695.726)"/></g></svg>

images/menu/line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42" height="43" viewBox="0 0 42 43"><defs><style>.a{fill:#00c200;}.b{fill:#fff;}</style></defs><g transform="translate(0.077 0.231)"><g transform="translate(0)"><g transform="translate(0)"><ellipse class="a" cx="21" cy="21.5" rx="21" ry="21.5" transform="translate(-0.077 -0.231)"/><g transform="translate(10.492 11.556)"><path class="b" d="M33.441,22.645A5.182,5.182,0,0,0,33.53,22c0-.276,0-.56,0-.836C33.272,16.618,28.552,13,22.774,13,16.818,13,12,16.831,12,21.56c0,4.347,4.071,7.938,9.352,8.489a.578.578,0,0,1,.516.64h0l-.222,2.027a.587.587,0,0,0,.516.649.578.578,0,0,0,.32-.062,25.582,25.582,0,0,0,8.712-6.276,23.306,23.306,0,0,0,1.422-2.018A7.209,7.209,0,0,0,33.441,22.645Z" transform="translate(-12 -13)"/><path class="a" d="M17.312,24.067V20.511a.551.551,0,0,0-.551-.551h0a.551.551,0,0,0-.551.551h0v4.107a.551.551,0,0,0,.551.551h2.2a.551.551,0,0,0,.551-.551h0a.551.551,0,0,0-.551-.551Z" transform="translate(-12.468 -13.773)"/><path class="a" d="M21.187,25.164h-.24a.418.418,0,0,1-.427-.427v-4.4a.418.418,0,0,1,.427-.427h.24a.427.427,0,0,1,.436.427v4.4a.427.427,0,0,1-.436.427Z" transform="translate(-12.946 -13.767)"/><path class="a" d="M25.88,20.461v2.533s-2.2-2.862-2.231-2.907a.587.587,0,0,0-.436-.178.569.569,0,0,0-.533.569v4.134a.551.551,0,0,0,.551.551h0a.551.551,0,0,0,.551-.551h0V22.088s2.231,2.9,2.267,2.925a.524.524,0,0,0,.373.151.569.569,0,0,0,.551-.569V20.452a.542.542,0,0,0-.551-.542h0a.542.542,0,0,0-.542.551Z" transform="translate(-13.186 -13.767)"/><path class="a" d="M31.748,20.461h0a.542.542,0,0,0-.551-.551H29a.542.542,0,0,0-.551.551h0v4.151a.551.551,0,0,0,.551.551h2.2a.551.551,0,0,0,.551-.551h0a.551.551,0,0,0-.551-.551H29.552v-.978H31.2a.542.542,0,0,0,.551-.551h0a.542.542,0,0,0-.551-.542H29.552v-.978H31.2a.551.551,0,0,0,.551-.551Z" transform="translate(-13.827 -13.767)"/></g></g></g></g></svg>

images/menu/pen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.286" height="19.944" viewBox="0 0 22.286 19.944"><defs><style>.a{fill:#ee7800;}.b,.c{fill:none;stroke:#4c4c4c;}.b{stroke-miterlimit:10;}.c{stroke-linecap:round;stroke-linejoin:round;}</style></defs><g transform="translate(-34 -422.079)"><g transform="translate(34 422.783)"><ellipse class="a" cx="3.257" cy="3.257" rx="3.257" ry="3.257" transform="translate(0 12.725)"/><g transform="translate(3.258)"><ellipse class="b" cx="1.273" cy="1.273" rx="1.273" ry="1.273" transform="translate(7.498 7.539)"/><path class="c" d="M312.787,654.5l-2.344,1.967-4.516-5.381,2.344-1.967" transform="translate(-294.462 -649.116)"/><line class="c" x1="7.17" y2="6.016" transform="translate(0.627 9.63)"/><path class="c" d="M304.807,657.29a7.6,7.6,0,0,0-2.2,5.876l-13.188,3.268,5.508-12.421a7.6,7.6,0,0,0,6.169-1.149" transform="translate(-289.416 -650.262)"/></g></g></g></svg>

images/menu/person.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.753" height="19.442" viewBox="0 0 21.753 19.442"><defs><style>.a{fill:#ee7800;}.b,.c{fill:none;stroke:#4c4c4c;}.b{stroke-miterlimit:10;}.c{stroke-linecap:round;stroke-linejoin:round;}</style></defs><g transform="translate(-34 -376.224)"><g transform="translate(34 376.724)"><path class="a" d="M137.115,739.537l-2.83-4.17,6.743-2.83,3.625,5.509" transform="translate(-134.285 -722.084)"/><g transform="translate(1.467)"><ellipse class="b" cx="3.666" cy="3.666" rx="3.666" ry="3.666" transform="translate(8.642 0)"/><path class="b" d="M156.866,733.1a3.939,3.939,0,0,0-2.632-3.358,4.036,4.036,0,0,0-4.769,1.874l-2.94,5.093a3.869,3.869,0,0,0-.245.518h-3.62a1.42,1.42,0,0,0-1.387,1.012,1.393,1.393,0,0,0,1.338,1.766h13.881a.647.647,0,0,0,.651-.663C157.1,737.638,156.937,734.141,156.866,733.1Z" transform="translate(-137.357 -721.565)"/><path class="c" d="M137.939,737.716l-2.653-3.91,6.322-2.653,3.4,5.165" transform="translate(-135.285 -722.13)"/><line class="c" y1="2.419" x2="1.466" transform="translate(5.202 13.205)"/></g></g></g></svg>

images/menu/pinterest.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.308" height="42.304" viewBox="0 0 42.308 42.304"><defs><style>.a{fill:#e42b33;}.a,.b{fill-rule:evenodd;}.b{fill:#fefefe;}</style></defs><g transform="translate(0)"><path class="a" d="M1243.975,388.647a21.152,21.152,0,1,1-21.151,21.152,21.155,21.155,0,0,1,21.151-21.152Z" transform="translate(-1222.824 -388.647)"/><path class="b" d="M1296.88,435.834c-7.125,0-10.719,4.87-10.719,8.933a8.016,8.016,0,0,0,.279,2.146,4.724,4.724,0,0,0,2.793,3.319.517.517,0,0,0,.749-.355c.069-.252.232-.887.308-1.15a.668.668,0,0,0-.215-.8,3.814,3.814,0,0,1-.818-1.482,4.8,4.8,0,0,1-.175-1.322c0-3.617,2.84-6.856,7.386-6.856,4.024,0,6.242,2.347,6.242,5.483a12.53,12.53,0,0,1-.278,2.644c-.627,2.867-2.271,4.962-4.477,4.962a2.246,2.246,0,0,1-2.369-2.753c.215-.864.529-1.763.79-2.6a8.961,8.961,0,0,0,.534-2.472,1.948,1.948,0,0,0-2.021-2.146c-1.609,0-2.9,1.58-2.9,3.7a5.768,5.768,0,0,0,.1,1.07,4.624,4.624,0,0,0,.377,1.2s-1.643,6.633-1.928,7.795a15.293,15.293,0,0,0-.046,5.437.2.2,0,0,0,.36.08,15.2,15.2,0,0,0,2.706-4.675c.186-.641,1.051-3.937,1.051-3.937a4.367,4.367,0,0,0,3.664,1.785c3.931,0,6.829-2.782,7.77-6.845a13.1,13.1,0,0,0,.325-2.959c0-4.246-3.768-8.2-9.494-8.2Z" transform="translate(-1274.674 -427.134)"/></g></svg>

images/menu/prize.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11.343" height="17.253" viewBox="0 0 11.343 17.253"><defs><style>.a{fill:#ee7800;}.b{fill:none;stroke:#4c4c4c;stroke-linecap:round;stroke-linejoin:round;}</style></defs><g transform="translate(-40.497 -792.374)"><circle class="a" cx="3" cy="3" r="3" transform="translate(44 796)"/><g transform="translate(40.997 792.874)"><path class="b" d="M17.843,6.671A5.171,5.171,0,1,1,12.671,1.5a5.171,5.171,0,0,1,5.171,5.171Z" transform="translate(-7.5 -1.5)"/><path class="b" d="M11.394,20.827l-.894,6.73,3.694-2.216,3.694,2.216-.894-6.738" transform="translate(-9.022 -11.305)"/></g></g></svg>

images/menu/sofa.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.805" height="18.477" viewBox="0 0 21.805 18.477"><defs><style>.a{fill:#ee7800;}.b{fill:none;stroke:#4c4c4c;stroke-miterlimit:10;}</style></defs><g transform="translate(-34.5 -468.865)"><g transform="translate(-662.318 708.892)"><path class="a" d="M3.411,0H10.7A3.411,3.411,0,0,1,14.11,3.411V8.8a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V3.411A3.411,3.411,0,0,1,3.411,0Z" transform="translate(699.518 -237.606)"/><g transform="translate(697.318 -239.527)"><path class="b" d="M293.155,727.973V729.6h13.054v-1.628a1.932,1.932,0,0,1,.9-1.634v-3.256a2.825,2.825,0,0,0-2.825-2.826h-9.213a2.826,2.826,0,0,0-2.826,2.826v3.256A1.932,1.932,0,0,1,293.155,727.973Z" transform="translate(-289.28 -720.257)"/><path class="b" d="M306.976,728.312a1.937,1.937,0,0,0-1.938,1.937v1.628H291.984V730.25a1.938,1.938,0,0,0-3.875,0V733.5a1.938,1.938,0,0,0,1.938,1.938h16.93a1.937,1.937,0,0,0,1.937-1.937V730.25A1.937,1.937,0,0,0,306.976,728.312Z" transform="translate(-288.109 -722.534)"/><g transform="translate(2.97 12.908)"><path class="b" d="M292.25,738.252v4.215a.353.353,0,0,0,.354.354h.625a.353.353,0,0,0,.339-.251l1.522-4.318Z" transform="translate(-292.25 -738.252)"/><path class="b" d="M311.852,738.252v4.215a.353.353,0,0,1-.354.354h-.625a.354.354,0,0,1-.339-.251l-1.522-4.318Z" transform="translate(-296.988 -738.252)"/></g></g></g></g></svg>

images/menu/style.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18.824" height="18.424" viewBox="0 0 18.824 18.424"><defs><style>.a{fill:#ee7800;}.b{fill:none;stroke:#4c4c4c;stroke-miterlimit:10;}</style></defs><g transform="translate(-35.5 -237.17)"><g transform="translate(36 237.17)"><rect class="a" width="7.208" height="7.208" rx="1" transform="translate(11.116 0)"/><g transform="translate(0 1.391)"><rect class="b" width="7.208" height="7.208" rx="1"/><rect class="b" width="7.208" height="7.208" rx="1" transform="translate(9.078)"/><rect class="b" width="7.208" height="7.208" rx="1" transform="translate(0 9.325)"/><rect class="b" width="7.208" height="7.208" rx="1" transform="translate(9.078 9.325)"/></g></g></g></svg>

images/menu/tv.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.441" height="12.933" viewBox="0 0 22.441 12.933"><defs><style>.a{fill:#ee7800;}.b{fill:#4c4c4c;stroke:#4c4c4c;stroke-width:0.5px;}</style></defs><g transform="translate(-36.295 -749.013)"><path class="a" d="M3.411,0h1.92A3.411,3.411,0,0,1,8.742,3.411V5.7a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V3.411A3.411,3.411,0,0,1,3.411,0Z" transform="translate(43.146 756)"/><g transform="translate(36.548 749.263)"><path class="b" d="M356.144,431.2a.889.889,0,0,1-.849-.85v-4.822a1.39,1.39,0,0,1,.427-1.161l.466-.387,4.4-3.653a1.2,1.2,0,0,1,1.813,0l5.082,4.217-.332.4-5.326-4.348a.525.525,0,0,0-.662,0l-4.918,3.984a1.05,1.05,0,0,0-.389.815v4.669a.525.525,0,0,0,.523.525l10.751.043V427.8a.571.571,0,0,0-.219-.45l-.087-.068-2.693-2.125.329-.412,2.8,2.233a1.076,1.076,0,0,1,.439.912v2.747h4.18l.7.578Z" transform="translate(-355.285 -418.778)"/><path class="b" d="M635.952,388.594h.487v-3.109h-.487v1.31h-1.117v.488h1.117Z" transform="translate(-625.529 -385.486)"/><rect class="b" width="0.991" height="0.488" transform="translate(11.424 1.31)"/><path class="b" d="M745.9,430.627h-1.085l-.721-.6H745.9a1.682,1.682,0,0,0,1.68-1.68v-1.636a1.682,1.682,0,0,0-1.68-1.68H741.29a2.282,2.282,0,0,1-2.279-2.279V421.6a2.282,2.282,0,0,1,2.279-2.279h4.44a2.282,2.282,0,0,1,2.279,2.279v1.062h-.6V421.6a1.682,1.682,0,0,0-1.68-1.68h-4.44a1.682,1.682,0,0,0-1.68,1.68v1.151a1.682,1.682,0,0,0,1.68,1.68H745.9a2.282,2.282,0,0,1,2.279,2.279v1.636A2.282,2.282,0,0,1,745.9,430.627Z" transform="translate(-726.238 -418.197)"/></g></g></svg>

images/menu/videos.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.308" height="15.043" viewBox="0 0 21.308 15.043"><defs><style>.a{fill:#ee7800;}.b{fill:none;stroke:#4c4c4c;stroke-miterlimit:10;}</style></defs><g transform="translate(-34.499 -331.563)"><g transform="translate(-714.226 620.34)"><path class="a" d="M373.8,661.514v5.235a.39.39,0,0,0,.57.346l5.028-2.6a.391.391,0,0,0,0-.693l-5.029-2.635A.39.39,0,0,0,373.8,661.514Z" transform="translate(382.76 -944.394)"/><g transform="translate(749.226 -288.278)"><path class="b" d="M371.767,654.408c-2.493,0-5,.078-7.46.233a2.579,2.579,0,0,0-2.405,2.42,41.587,41.587,0,0,0,0,8.739,2.56,2.56,0,0,0,2.4,2.42c2.854.154,5.562.232,8.048.232s4.833-.078,6.987-.232a2.587,2.587,0,0,0,2.409-2.42,41.587,41.587,0,0,0,0-8.739,2.584,2.584,0,0,0-2.405-2.42C376.81,654.486,374.261,654.408,371.767,654.408Z" transform="translate(-361.672 -654.408)"/><path class="b" d="M372.674,660.389v5.236a.391.391,0,0,0,.57.347l5.028-2.6a.39.39,0,0,0,0-.692l-5.028-2.636A.391.391,0,0,0,372.674,660.389Z" transform="translate(-365.034 -656.117)"/></g></g></g></svg>

images/menu/youtube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42" height="43" viewBox="0 0 42 43"><defs><style>.a{fill:red;}.b{fill:#fff;}</style></defs><g transform="translate(-0.231 0.231)"><g transform="translate(0)"><g transform="translate(0)"><ellipse class="a" cx="21" cy="21.5" rx="21" ry="21.5" transform="translate(0.231 -0.231)"/><path class="b" d="M33.01,18.253a2.5,2.5,0,0,0-1.778-1.778c-1.582-.436-8-.436-8-.436s-6.391,0-8,.436a2.533,2.533,0,0,0-1.778,1.778A28.09,28.09,0,0,0,13,23.214a26.365,26.365,0,0,0,.436,4.951,2.48,2.48,0,0,0,1.778,1.778c1.582.409,8,.409,8,.409s6.391,0,8-.436a2.525,2.525,0,0,0,1.778-1.778,27.788,27.788,0,0,0,.453-4.925,26.526,26.526,0,0,0-.436-4.96Zm-11.885,8v-6.08l5.334,3.04Z" transform="translate(-1.676 -1.781)"/></g></g></g></svg>

index_designerList.html

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

index_designerList_mb.html

@@ -0,0 +1,1310 @@
+<!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">
+                  <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 class="mb__infoCard__more my-3">
+                    <i class="fa fa-chevron-down" aria-hidden="true"></i>
+                  </div>
+                  <div class="mb__infoCard__detail other">
+                    <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>
+                    <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>
+                    <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>
+                  <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="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-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,153 @@
+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 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`);
+}
+
+
+    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;
+})
+

js/index-list.js

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

js/index.js

@@ -0,0 +1,623 @@
+let userAgent;
+let isSafari = false;
+let browserName;
+window.onload = function(){
+    if(screen.width < 900){
+        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);
+      });
+}
+  
+
+function detectDirection () {
+    let height = (window.screen.width * 5) / 12;
+    console.log(height);
+    $('.sec-02 .slide-item').css('height', `${height}px`);
+}
+
+function detectBrowser(agent){
+    if(userAgent.match(/chrome|chromium|crios/i)){
+      browserName = "chrome";
+    }else if(userAgent.match(/firefox|fxios/i)){
+      browserName = "firefox";
+    }  else if(userAgent.match(/safari/i)){
+      browserName = "safari";
+    }else if(userAgent.match(/opr\//i)){
+      browserName = "opera";
+    } else if(userAgent.match(/edg/i)){
+      browserName = "edge";
+    }else{
+      browserName="No browser detection";
+    }
+  
+    if(browserName === 'safari'){
+      isSafari = true;
+    }
+    console.log(isSafari);
+  }
+
+
+
+    function renderSec00(data) {
+        let temp = data[0]['data'];
+        renderBannerStr('sec-00__slider', temp);
+        $(".sec-00__slider").slick({
+            dots: false,
+            speed: 800,
+            autoplay: true,
+            autoplaySpeed: 5000,
+            arrows: true,
+            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>'
+        });
+    }
+
+    function renderSec02(data) {
+        let temp = data[1]['data'];
+        renderBannerStr('sec-02__slider', temp);
+        $(".sec-02__slider").slick({
+            dots: false,
+            autoplay: true,
+            arrows: true,
+            fade: true,
+            autoplaySpeed: 4000,
+            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 33px;color: white;transform: translateY(-10px);"></i></button>',
+            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 33px;color: white;transform: translateY(-10px);"></i></button>'
+        });
+    }
+
+    function renderBannerStr(sec, data) {
+        let str = '';
+        for(let i = 0; i < data.length; i++){
+            if(data[i]['Dwebp'] && !isSafari) {
+                str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['Dwebp']}');" data-bg="${data[i]['Dwebp']}"></div>`
+            } else {
+                str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['DimgUrl']}');" data-bg="${data[i]['DimgUrl']}"></div>`
+            }
+            
+        }
+        $(`.${sec}`).html(str);
+    }
+
+    function renderSec05(data) {
+        let randomIdx = Math.floor(Math.random()*3);
+        const ran = $('.sec-05__tabdiv .nav-pills li').eq(randomIdx);
+        const ranDiv = $('.sec-05tab-content>div').eq(randomIdx);
+        $('.sec-05tab-content>div').hide();
+        ranDiv.show();
+        ran.addClass('active');
+        ran.children().addClass('active');
+        $('.sec-05 .morelink').attr('href', $('.sec-05__tabdiv .nav-item-link.active').data('link'));
+          let temp = data[2]['data'];
+          for(let i = 0; i < temp.length; i++){
+            if(temp[i]["tab"] == '最夯設計'){
+              let str = '';
+              let sub = temp[i]["data"];
+              for(let j = 0; j < sub.length; j++){
+                str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
+                    <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"></div>
+                    <h5 class="mb-2 me-2">${sub[j]['title']}</h5>
+                    <p class="mt-2">${sub[j]['description']}</p>
+                </div>`;
+              }
+              $('#pills-hot-tab .tabpar').html(str);
+            }
+            if(temp[i]["tab"] == '影音實錄'){
+              let str = '';
+              let sub = temp[i]["data"];
+              for(let j = 0; j < sub.length; j++){
+                str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
+                <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"><img data-src="images/Play-Button.webp" alt="" class="tabpar__card__play lazyload"></div>
+                <h5 class="mb-2  me-2">${sub[j]['title']}</h5>
+                <p class="mt-2">${sub[j]['description']}</p>
+            </div>`;
+              }
+              $('#pills-video-tab .tabpar').html(str);
+            }
+            if(temp[i]["tab"] == '專欄文章'){
+              let str = '';
+              let sub = temp[i]["data"];
+              for(let j = 0; j < sub.length; j++){
+                str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
+                <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"></div>
+                <h5 class="mb-2  me-2">${sub[j]['title']}</h5>
+                <p class="mt-2">${sub[j]['description']}</p>
+            </div>`;
+              }
+              $('#pills-blog-tab .tabpar').html(str);
+            }
+          }
+          const cardText = document.querySelectorAll('.tabpar__card p');
+          cardText.forEach((item, i) => {
+            let len = item.textContent.length;
+            if(len > 18) {
+              let str = item.textContent.substring(0, 18) + '...';
+              item.textContent = str;
+            }
+          })
+          $('.sec-05__tabdiv .nav-pills button').on('click', function(event){
+            event.preventDefault();
+            $('.sec-05__tabdiv .nav-pills li').removeClass('active');
+            $('.sec-05__tabdiv .nav-pills li button').removeClass('active');
+            $(this).addClass('active');
+            $(this).parent().addClass('active');
+            $('.sec-05tab-content>div').hide();
+            var target = $(this).attr('id');
+            $(`#pills-tab #${target}`).show();
+            $('.sec-05tab-content .tabpar').slick('setPosition');
+        });
+
+        $(`.sec-05tab-content .tabpar`).slick({
+            arrows: true,
+            slidesToShow: 3,
+            infinite: false,
+            dots: false,
+            slidesToScroll: 1,
+            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
+            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
+        });
+
+        $('.sec-05__tabdiv .nav-item-link').click(function() {
+            $('.sec-05 .morelink').attr('href',$('.sec-05__tabdiv .nav-item-link.active').data('link'));
+        });
+    }
+
+    function renderSec06(data) {
+        let temp = data[3]['data'];
+        let str = '';
+        for(let i = 0; i < temp.length; i++){
+            if(temp[i].video == 'true'){
+                str+= `<div class="sec-06__card" onclick="window.open('${temp[i]['link']}');">
+                    <div class="sec-06__card__outer"><div class="sec-06__card__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-06__card__play lazyload" data-src="images/Play-Button.webp"></div></div>
+                    <h5 class="mb-2 mt-2">${temp[i]['title']}</h5>
+                    <p class="mt-2">${temp[i]['description']}</p>
+                    </div>`;
+            } else {
+                str+= `<div class="sec-06__card" onclick="window.open('${temp[i]['link']}');">
+                    <div class="sec-06__card__outer"><div class="sec-06__card__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div></div>
+                    <h5 class="mb-2 mt-2">${temp[i]['title']}</h5>
+                    <p class="mt-2">${temp[i]['description']}</p>
+                    </div>`;
+            }
+        }
+        $('.sec-06 .sec-06__slider').html(str);
+        $('.sec-06__slider').slick({
+            arrows: true,
+            dots: false,
+            speed: 800,
+            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 30px;color: white;"></i></button>',
+            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 30px;color: white;"></i></button>'
+        });
+        const cardText = document.querySelectorAll('.sec-06__card p');
+        cardText.forEach((item, i) => {
+            let len = item.textContent.length;
+            if(len > 20) {
+              let str = item.textContent.substring(0, 40) + '...';
+              item.textContent = str;
+            }
+        });
+    }
+
+    function renderSec07(data) {
+        let temp = data[5]['data'];
+        let str = '';
+        for(let i = 0; i < temp.length; i++){
+            str+= `<div class="sec-07__slider-${i+1} slide-item" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>`
+        }
+        $(`.sec-07__slider`).html(str);
+        $(".sec-07__slider").slick({
+            dots: false,
+            autoplay: true,
+            arrows: false,
+            slidesToShow: 4,
+            slidesToScroll: 1,
+            autoplaySpeed: 7000,
+            initialSlide: 0,
+            infinite: true,
+        });
+    }
+
+    function renderSec08(data) {
+        let temp = data[4]['data'];
+        let str = '';
+        for(let i = 0; i < temp.length; i++){
+            if(temp[i].video == 'true'){
+                str+= `<div class="sec-08__slider-${i+1} sec-08__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
+                        <div class="sec-08__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-08__card__play lazyload" data-src="images/Play-Button.webp"></div>
+                        <h5 class="mb-2 me-2">${temp[i]['title']}</h5>
+                        <p class="mb-2 me-2">${temp[i]['description']}</p>
+                    </div>`;
+            } else {
+                str+= `<div class="sec-08__slider-${i+1} sec-08__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
+                        <div class="sec-08__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>
+                        <h5 class="mb-2 me-2">${temp[i]['title']}</h5>
+                        <p class="mb-2 me-2">${temp[i]['description']}</p>
+                    </div>`;
+            }
+        }
+        $('.sec-08__slider').html(str);
+        $(".sec-08__slider").slick({
+          arrows: true,
+          slidesToShow: 1,
+          infinite: false,
+          dots: false,
+          slidesToShow: 3,
+          centerPadding: '12px',
+          prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
+            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
+      });
+      const cardText = document.querySelectorAll('.sec-08__card p');
+        cardText.forEach((item, i) => {
+          let len = item.textContent.length;
+          if(len > 20) {
+            let str = item.textContent.substring(0, 20) + '...';
+            item.textContent = str;
+          }
+        })
+    }
+
+    function renderSec09(data) {
+        let temp = data[6]['data'];
+        let str = '';
+        for(let i = 0; i < temp.length; i++){
+            if(temp[i].video !== 'false') {
+                str+= `<div class="sec-09__slider-1 sec-09__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
+                      <div class="sec-09__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-09__card__play lazyload" data-src="images/Play-Button.webp"></div>
+                      <p class="sec-09__cardtxt">${temp[i]['title']}</p>
+                    </div>`
+            } else {
+                str+= `<div class="sec-09__slider-1 sec-09__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
+                      <div class="sec-09__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>
+                      <p class="sec-09__cardtxt">${temp[i]['title']}</p>
+                    </div>`
+            }
+            
+        }
+        $('.sec-09__slider').html(str);
+        $(".sec-09__slider").slick({
+            autoplay: true,
+            autoplaySpeed: 7000,
+            arrows: true,
+            slidesToShow: 4,
+            infinite: true,
+            dots: false,
+            slidesToScroll: 1,
+            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
+            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
+        });
+    }
+    function renderSec10(data) {
+        renderRecStr("sec-10", data[7]['data'].slice(0, 6));
+        renderRecStr("sec-11", data[8]['data'].slice(0, 6));
+    }
+
+    function renderRecStr(sec, data) {
+        let str = '';
+        for(let i = 0; i < data.length; i++){
+            //console.log(data[i]['description'].length);
+            if(data[i]['description'].length > 0) {
+                data[i]['description'].split('，');
+                data[i]['description'] = data[i]['description'].split('，').slice(1).join("");
+            }
+            if(data[i].video !== 'false') {
+                str+= `<div class="${sec}__card col-4 mb-3" onclick="window.open('${data[i]['link']}');">
+                        <div class="${sec}__card-img mb-2" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"><img class="${sec}__card__play lazyload" data-src="images/Play-Button.webp"></div>
+                        <h5 class="me-2">${data[i]['title']}</h5>
+                        <p class="${sec}__cardtxt me-2">${data[i]['description']}</p>
+                    </div>`
+            } else {
+                str+= `<div class="${sec}__card col-4 mb-3" onclick="window.open('${data[i]['link']}');">
+                        <div class="${sec}__card-img mb-2" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"></div>
+                        <h5 class="me-2">${data[i]['title']}</h5>
+                        <p class="${sec}__cardtxt me-2">${data[i]['description']}</p>
+                    </div>`
+            }
+            
+        }
+        $(`.${sec} .row`).html(str);
+        const cardText = document.querySelectorAll(`.${sec}__card p`);
+        cardText.forEach((item, i) => {
+          let len = item.textContent.length;
+          if(len > 18) {
+            let str = item.textContent.substring(0, 18) + '...';
+            item.textContent = str;
+          }
+        })
+    }
+
+    function renderVideo(data) {
+        let temp = data[9];
+        console.log(data[9]);
+        $('.sec-06__videotxt').text(temp['title']);
+        console.log('test');
+        $('.sec-06__video__imgfr').css('background-image', `url(https://img.youtube.com/vi/${temp['yt']}/hqdefault.jpg)`);
+        $('#videoModal').on('shown.bs.modal', function () {
+            $('#videoModal iframe').attr('src', `https://www.youtube.com/embed/${temp['yt']}?controls=0&autoplay=1&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fm.hhh.com.tw&amp;widgetid=1`);
+        });
+        $('#videoModal').on('hidden.bs.modal', function () {
+          $('#videoModal iframe').removeAttr('src');
+        });
+    }
+
+    function renderTrending(result){
+        let temp = result[10]['data'];
+        let str = '';
+        for(let i = 0; i < temp.length; i++){
+            str += `<a class="dropbox__hots__link" href="https://hhh.com.tw/search/lists/case/${temp[i]}-keyword/">${temp[i]}</a>`
+        }
+        $('.dropbox__hots').html(`<strong class="dropbox__hots__title">熱搜關鍵字：</strong>${str}`);
+    }
+
+
+function tab2 () {
+    if(('.dropbox__tabdiv').length){
+        // Show the first tab by default
+    $('.dropbox-tab-content>div').hide();
+    $('.dropbox-tab-content>div:first').show();
+    $('.dropbox__tabdiv .nav-pills li:first').addClass('active');
+    $('.dropbox__tabdiv .nav-pills li:first button').addClass('active');
+
+    // Change tab class and display content
+    $('.dropbox__tabdiv .nav-pills button').on('click', function(event){
+        event.preventDefault();
+        $('.dropbox__tabdiv .nav-pills li').removeClass('active');
+        $('.dropbox__tabdiv .nav-pills li button').removeClass('active');
+        $(this).addClass('active');
+        $(this).parent().addClass('active');
+        $('.dropbox-tab-content>div').hide();
+        var target = $(this).attr('id');
+        $(`#pills-tab-2 #${target}`).show();
+    });
+    }
+}
+
+tab2();
+
+let sticky = document.querySelector('.sec-00').offsetHeight;
+window.addEventListener('scroll', fixedOnScroll);
+    
+const navbar = document.querySelector('.navbar-main');
+    
+function fixedOnScroll() {
+    if(window.pageYOffset >= sticky){
+        navbar.classList.add('sticky');
+    } else {
+        navbar.classList.remove('sticky');
+    }
+}
+
+$(window).scroll(function() {
+    if ( $(this).scrollTop() > 800 ){
+        $('.fixed-btn').fadeIn(222);
+    } else {
+        $('.fixed-btn').stop().fadeOut(222);
+    }
+}).scroll();
+
+$('.btn-gotop').click(function () {
+    $('html, body').animate({
+        scrollTop: 0
+    }, 500)
+});
+
+$('.navbar-search img').click(function(){
+    $('.navbar-search .dropbox').toggleClass('open');
+     if($('.navbar-search .dropbox').hasClass('open')) {
+        $('.navbar-nav .nav-item>.dropbox').addClass('d-none');
+    } else {
+        $('.navbar-nav .nav-item>.dropbox').removeClass('d-none');
+    } 
+});
+
+$('.sec-00__close').click(function(){
+    $(this).css('display', 'none');
+    $('.sec-00').addClass('bannerClose');
+    //$('.sec-02').css('padding-top', '53px');
+    sticky = 0;
+});
+
+// search
+const imageSearch = document.querySelector('.image-search');
+const imagesSelect = document.querySelectorAll('#pills-img-tab select');
+
+imageSearch.addEventListener("click", function() {
+    searchQueryStr(imagesSelect, 'photos');
+})
+
+const newsSearch = document.querySelector('.news-search');
+const newsSelect = document.querySelectorAll('#pills-news-tab select');
+
+newsSearch.addEventListener("click", function() {
+    searchQueryStr(newsSelect, 'builder');
+});
+
+const caseSearch= document.querySelector('.case-search');
+const caseSelect = document.querySelectorAll('#pills-case-tab select');
+
+caseSearch.addEventListener("click", function() {
+    let query = ''
+    let str = 'https://hhh.com.tw/cases/lists/1-page/new-sort/';
+    if($('#case-shui').val() == '風水') {
+        caseSelect.forEach((item, i) => {
+            if(i < 2) {
+                if(item.value !== ''){ 
+                    query += `/${item.value}`;
+                }
+            }
+        });
+        str = `https://hhh.com.tw/cases/lists${query}/風水-keyword/1-page/`;
+        window.open(str);
+        return;
+    } 
+    caseSelect.forEach((item, i) => {
+        if(item.value !== ''){
+            query += `/${item.value}`;
+        }
+    });
+    str = `https://hhh.com.tw/cases/lists${query}/1-page/`;
+    window.open(str);
+})
+
+const designerSearch = document.querySelector('.designer-search');
+const designerSelect = document.querySelectorAll('#pills-designer-tab select');
+
+designerSearch.addEventListener("click", function() {
+    searchQueryStr(designerSelect, 'designers');
+})
+
+function searchQueryStr(block, link){
+    let query = ''
+    let str = `https://hhh.com.tw/${link}/lists/1-page/`;
+    block.forEach((item, i) => {
+        if(item.value !== ''){
+            query += `/${item.value}`;
+        }
+    });
+    str = `https://hhh.com.tw/${link}/lists${query}/1-page/`;
+    window.location.href = str;
+}
+
+const searchBtn = document.querySelector('.dropbox__searchBar__submit');
+const searchBar = document.querySelector('.dropbox__searchBar__input');
+
+searchBtn.addEventListener('click', search);
+searchBar.addEventListener('keyup', pressSearch);
+function search() {
+  if(searchBar.value == '') {
+    window.location.href = 'https://m.hhh.com.tw/search/lists/case/';
+  } else {
+    window.location.href = `https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`;
+    console.log(`https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`)
+  }
+}
+
+function pressSearch(e) {
+  if (e.keyCode === 13) {
+    e.preventDefault();
+    search();
+  }
+}
+
+function todayTV() {
+    var utc = new Date().toJSON().slice(0,10).replace(/-/g,'-');
+    window.location.href=`https://hhh.com.tw/program/?tv=gstv&date=${utc}&type=tv`;
+}
+
+document.addEventListener('lazybeforeunveil', function(e){
+    var bg = e.target.getAttribute('data-bg');
+    if(bg){
+        e.target.style.backgroundImage = 'url(' + bg + ')';
+    }
+});
+
+// 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/realtime.json

@@ -0,0 +1,569 @@
+[
+    {
+        "_comment": "頂部輪播區",
+        "id": 0,
+        "block": "topCarousel",
+        "data": [
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15664_1619582521.jpg",
+                "link": "https://hhh.com.tw/designer-index.php?designer_id=23",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15664_1619582509.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_15664_1619582537.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_15664_1619582529.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15672_1605260703.jpg",
+                "link": "https://hhh.com.tw/designer-index.php?designer_id=28",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15672_1605260690.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_15672_1605260747.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_15672_1605260741.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15662_1607045625.jpg",
+                "link": "https://hhh.com.tw/designer-index.php?designer_id=447",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15662_1607045611.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_15662_1607045687.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_15662_1607045683.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15673_1603096869.jpg",
+                "link": "https://hhh.com.tw/designer-index.php?designer_id=31",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15673_1603096869.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_15673_1603096869.jpg.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_15673_1603855335.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16076_1625209654.jpg",
+                "link": "https://hhh.com.tw/designers/cases/586/1-page/new-sort/",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16076_1625209580.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16076_1625209663.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_16076_1625209659.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15666_1627961097.jpg",
+                "link": "https://hhh.com.tw/designer-index.php?designer_id=32",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15666_1627961071.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_15666_1627961107.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_15666_1627961102.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16002_1617866880.jpg",
+                "link": "https://hhh.com.tw/brand-index.php?brand_id=202",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16002_1617866862.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16002_1617866888.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_16002_1617866884.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16051_1623138395.png",
+                "link": "https://hhh.com.tw/designers/cases/33/1-page/new-sort/",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16051_1623138372.png",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16051_1634264137.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_16051_1634264092.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16115_1629356235.png",
+                "link": "https://hhh.com.tw/designers/cases/438/1-page/new-sort/",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16115_1629356225.png",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16115_1629356246.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_16115_1629356240.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16147_1634886096.jpg",
+                "link": "https://bigsale.tmall.com/wow/a/act/haiwaifenzu/dailygroup/1345/wupr?disableNav=YES&wh_pid=daily-249643&ali_trackid=2:mm_2663294",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16147_1634886089.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16147_1634886105.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_16147_1634886101.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16107_1628644159.jpg",
+                "link": "https://hhh.com.tw/deco/",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16107_1628644143.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16107_1628644166.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_16107_1628644163.webp"
+            }
+        ]
+    },
+    {
+        "_comment": "主要輪播區",
+        "id": 1,
+        "block": "sec02",
+        "data": [
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15660_1604643433.jpg",
+                "link": "https://hhh.com.tw/designer-index.php?designer_id=28",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15660_1604643425.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_15660_1604643433.jpg.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_15660_1604643440.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16057_1635138388.jpg",
+                "link": "https://hhh.com.tw/columns/detail/3523/",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16057_1635138373.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16057_1635138400.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_16057_1635138394.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16093_1629944189.jpg",
+                "link": "https://v.hhh.com.tw/",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16093_1629944183.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16093_1629944200.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_16093_1629944195.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16082_1633429312.jpg",
+                "link": "https://hhh.com.tw/topic/detail/404/",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16082_1633429296.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16082_1633429327.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_16082_1633429322.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16164_1633686437.jpg",
+                "link": "https://www.rinnai.com.tw/BrandNewDetail/36",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16164_1633683454.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16164_1633686444.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_16164_1633683463.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16176_1634804710.jpg",
+                "link": "https://event.hhh.com.tw/topglory/designer_692.html",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16176_1634804704.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16176_1634804775.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_16176_1634804769.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16174_1634804737.jpg",
+                "link": "https://event.hhh.com.tw/topglory/designer_684.html",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16174_1634804731.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16174_1634804749.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_16174_1634804743.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16175_1634804723.jpg",
+                "link": "https://hhh.com.tw/designers/cases/19/1-page/new-sort/",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16175_1634804717.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16175_1634804762.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_16175_1634804755.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16177_1634804698.jpg",
+                "link": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/case.php?id=694",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16177_1634804691.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16177_1634804792.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_16177_1634804786.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16178_1634804686.jpg",
+                "link": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/case.php?id=584",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16178_1634804665.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16178_1634804805.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_16178_1634804800.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16099_1627623476.jpg",
+                "link": "https://hhh.com.tw/deco/",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16099_1627623458.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16099_1627623493.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_16099_1627623482.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15781_1601366572.jpg",
+                "link": "https://hhh.com.tw/softouch",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15781_1601366572.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_15781_1601366572.jpg.webp",
+                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_15781_1603934935.webp"
+            }
+        ]
+    },
+    {
+        "_comment": "tab區塊-最夯設計, 影音實錄, 專欄文章,(txt為部分內容段落)",
+        "id": 2,
+        "block": "sec03",
+        "data": [
+            {
+                "tab": "最夯設計",
+                "data": [
+                    {
+                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_13937_20211027103637.jpg",
+                        "link": "https://hhh.com.tw/cases/detail/13937/",
+                        "title": "信義張公館｜現代風｜42坪",
+                        "description": ""
+                    },
+                    {
+                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_13936_20211027100934.jpg",
+                        "link": "https://hhh.com.tw/cases/detail/13936/",
+                        "title": "悠雅綠境｜混搭風｜19坪",
+                        "description": ""
+                    },
+                    {
+                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_13935_20211026135148.jpg",
+                        "link": "https://hhh.com.tw/cases/detail/13935/",
+                        "title": "姊妹一家親 雙宅雙風格│妹妹家",
+                        "description": "此案為一對姊妹雙戶對門的居宅設計，屋主的姊姊是第二次與富億空間設計合作，因姊妹倆住對門，因此也將自己新家一同交付給有「生活創藝師」之稱的陳錦樹總監規劃設計，打造出現代時尚居宅的大氣之姿。"
+                    }
+                ]
+            },
+            {
+                "tab": "影音實錄",
+                "data": [
+                    {
+                        "imgUrl": "https://img.youtube.com/vi/ZQA8AllqAqk/hqdefault.jpg",
+                        "link": "https://hhh.com.tw/video-post.php?id=4221",
+                        "title": "SD網路百科",
+                        "description": "微簡約大機能 獨身女子清新宅"
+                    },
+                    {
+                        "imgUrl": "https://img.youtube.com/vi/2MALQGLjpNY/hqdefault.jpg",
+                        "link": "https://hhh.com.tw/video-post.php?id=4220",
+                        "title": "",
+                        "description": "設計之源 自然之本"
+                    },
+                    {
+                        "imgUrl": "https://img.youtube.com/vi/Sc_2shJqJtc/hqdefault.jpg",
+                        "link": "https://hhh.com.tw/video-post.php?id=4219",
+                        "title": "格綸木材廠",
+                        "description": "【幸福出任務】千萬巨木隱身百年大廠！美學獵人親授擇木心法"
+                    }
+                ]
+            },
+            {
+                "tab": "專欄文章",
+                "data": [
+                    {
+                        "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point03_71_01.jpg",
+                        "link": "https://hhh.com.tw/columns/detail/6184/",
+                        "title": "木作櫃和系統櫃，到底選哪一種好？",
+                        "description": "經常聽到有人提出「該做木作裝潢？還是直接選系統櫃？」「木作櫃和系統櫃哪種便宜？哪一個好？」這類問題，但其實它沒有標準答案，因為各有優缺點，所以也沒有好壞之分。但設計師仍需依據空間的條件與屋主需求來作選擇，同一個裝潢case不一定只能選一種來做，需要考量整體設計，結合二者的優點以達到設計美感與實用性。"
+                    },
+                    {
+                        "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point02_308_01.jpg",
+                        "link": "https://hhh.com.tw/columns/detail/6183/",
+                        "title": "【好宅專輯】空間機能結合線條藝術，演繹「1+1=1」的雙拼豪宅美學公式！",
+                        "description": "在兩戶合併成一戶的空間設計中，如何消弭明顯的分戶線、重新分配機能格局，達成「1+1=1」的公式，是雙拼豪宅最重要的挑戰與任務。在本案的空間規劃上，比沙列室內裝修設計有限公司保留私領域主要的景觀房，並將其他臥房改為書房、廚房、佛堂等機能用途，同時以招待會所的形式，延展客餐廳橫向尺度，使豪奢的生活想像、豐美壯闊的自然景象藏納於一室。此外，藝術總監張靜峰更以「線條藝術」作為建構空間秩序的介質，透過橫向、縱向的比例分割，塑造畫面的一致性及多維性。而筆直的線條走向，隨著生活的動態軌跡，讓區域之間轉換的節點頓挫有力，完美成就現代奢華風格洗鍊、雅致的視覺印象。"
+                    },
+                    {
+                        "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point04_502_01.jpg",
+                        "link": "https://hhh.com.tw/columns/detail/6182/",
+                        "title": "衣櫃總是塞滿滿？3大收納原則放大你家衣櫥",
+                        "description": "如果你的衣櫥看起來像被轟炸過，覺得明明沒有很多衣服，衣櫥卻塞滿滿，那就絕對不要錯過這篇文章！其實有時候不是你的衣櫥太小，也不是你的東西太多，是沒有用對收納的技巧！今天就來跟大家分享「衣服收納三大技巧」"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "_comment": "主題企劃區,(title為主題標題，description為部分內容段落)",
+        "id": 3,
+        "block": "sec06",
+        "data": [
+            {
+                "imgUrl": "https://m.hhh.com.tw/upload/_htopic/logo_404_20211005171824.jpg",
+                "link": "https://hhh.com.tw/topic/detail/404/",
+                "video": "false",
+                "description": "在順手、美觀的環境烹飪是每個家庭煮夫／婦的夢想！想打造理想廚房，不僅須考量使用者身形，更要顧慮到使用動線、水電線路以及設備配置，牽涉層面廣泛也相對複雜。本期就一起瞧瞧設計師們的幸福廚房提案，然後汲取你喜愛的部分，建構屬於自己的「食」尚廚房吧！",
+                "title": "幸福廚房提案 讓你輕鬆做「煮」"
+            },
+            {
+                "imgUrl": "https://m.hhh.com.tw/upload/_htopic/logo_403_20211004193204.jpg",
+                "link": "https://hhh.com.tw/topic/detail/403/",
+                "video": "false",
+                "description": "⼤家都在講豪宅，但是，什麼樣的居宅才是豪宅呢？有⼈說，真正的豪宅產品是將有形價值組成部分都演繹到極致，獨棟獨院、名⼈聚落、地段優越，量⾝打造建築設計，或擁有娛樂廳、游泳池、酒窖或⾼爾夫練習室；滿⾜這些條件，就是⼼⽬中豪宅的樣⼦了嗎？回歸專屬的⽣活態度，豪宅設計講求展現空間質感與美學概念，在整體建築設計與周邊環境產⽣共鳴，架構互動和諧的居所饗宴。掌握其中關鍵美學概念，就算家裡⾮百坪尺度，也能從格局規劃，⽣活需求的機能設計及陳設藝術的品味擺飾等，學習在⼀般住宅畫⿓點睛地打造豪宅尺度的⽣活空間。",
+                "title": "訂製豪宅！層峰品味質感生活"
+            },
+            {
+                "imgUrl": "https://m.hhh.com.tw/upload/_htopic/logo_402_20210730172236.jpg",
+                "link": "https://hhh.com.tw/topic/detail/402/",
+                "video": "false",
+                "description": "透過聰明巧思，小坪數房子也能溫馨又好用！除了而熟能詳的「樓中樓」設計，究竟設計師們還能運用那些手法讓小宅擁有豪邸的生活品質呢？一起從配色、家具挑選、風格等不同角度著手，讓你家也有魔術大視覺！（圖片提供／知域設計×一己空間制作）",
+                "title": "解壓縮小宅！享受豪宅級空間感"
+            }
+        ]
+    },
+    {
+        "_comment": "編輯精選,(txt為部分內容段落)",
+        "id": 4,
+        "block": "sec07",
+        "data": [
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point-index05_295.jpg",
+                "link": "https://hhh.com.tw/columns/detail/6138/",
+                "title": "料理就該靚、淨、靜！Pacific變頻排油煙機帶你品嚐好食光",
+                "video": "false",
+                "description": "晨起，蓊鬱日光浸染視線；日落，夕照彩霞斜映成景。在家，即能細聽葉落花開、靜觀季節時序遞嬗，這裡正是海芬工作室 朱玉芬設計總監的家，本身從事室內設計的專業背景，加上曾旅居美國的學習經驗，讓她對於「生活」有著不一樣的見解與堅持。深信「家」是盛裝情感的容器，不只講究自然光景，也專精於透過軟件擺飾凸顯獨有品格，重要的是，時刻洋溢歡聲笑語、促成暖心互動的廚房，亦是她格外著墨的要點，也因此於自宅嚴選深耕在地逾50年的台灣品牌Pacific排油煙機，用最好的設備、做出最好的家。"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point06_308_01.jpg",
+                "link": "https://hhh.com.tw/columns/detail/6150/",
+                "title": "萬坪公園首排 日系見築在簡約中展奢華",
+                "video": "false",
+                "description": "今年上半年北部交易熱區中，桃園市桃園區榮登榜首，近年桃園區重劃開發、大型公共建設一波接一波，如捷運綠線、桃園總圖書館等建設陸續到位，且北北桃一日生活圈成形，雙北外移人口流入，屋齡較新的重劃區新建案表現亮眼，加上集結交通、居住、商場、娛樂、觀光、休閒等多元機能，房市買氣大爆棚。這次賞屋新手莎莎，要帶大家前進桃園市中心在地人矚目焦點所在的「小檜溪重劃區」，房價更相對雙北市親民，購屋負擔較輕的條件下，一起來開箱「亞昕一見」，實際感受萬坪公園首排的綠意住宅生活圈的舒心感。"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_297_01.jpg",
+                "link": "https://hhh.com.tw/columns/detail/6149/",
+                "title": "HIGHER你的生活！打造世界級居家用水體驗 進口廚衛進軍台灣",
+                "video": "false",
+                "description": "在每個人家中，舉凡洗漱、烹飪、沐浴都離不開熱水，熱水器在我們的生活當中，已經是不可或缺的家電之一。面對市場眾多品牌，如何挑選兼具安全與功能性，同時符合國際水準，並擁有口碑的熱水器，成為民眾關心的課題。尤其，現代人對於居家生活品質的要求標準日益提升，使得用水相關產品成了近來最夯的廚房家電標配之一。"
+            }
+        ]
+    },
+    {
+        "_comment": "活動頁banners區",
+        "id": 5,
+        "block": "sec08",
+        "data": [
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15356_1588832058.jpg",
+                "link": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/?utm_source=INDEX_BANNER&adid=15356"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15927_1627805018.jpg",
+                "link": "https://hhh.com.tw/topic/detail/402/"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16106_1628489482.jpg",
+                "link": "https://c.hhh.com.tw/?utm_source=homepage&utm_medium=banner&utm_campaign=0809"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15984_1627623575.jpg",
+                "link": "https://hhh.com.tw/deco/"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15782_1601366873.jpg",
+                "link": "https://hhh.com.tw/softouch"
+            }
+        ]
+    },
+    {
+        "_comment": "來選好物區",
+        "id": 6,
+        "block": "sec09",
+        "data": [
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hproduct_img/name_2390_20211013134933.png",
+                "link": "https://hhh.com.tw/product-post.php?id=2390",
+                "title": "滾筒洗衣機NA-V180HDH",
+                "description": "顏色:冰鑽白(W)/炫亮銀(S)<br>\r\n洗衣脫水18Kg/烘衣10Kg<br>\r\n洗劑量自動精準投入<br>\r\n溫水泡洗淨<br>\r\n溫風循環烘衣科技<br>\r\nnanoeX雙效自動槽洗淨<br>\r\n30°C溫水槽洗淨<br>\r\nECONAVI智慧節能科技<br>\r\nIOT智慧家電",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hproduct_img/name_2389_20211013134703.png",
+                "link": "https://hhh.com.tw/product-post.php?id=2389",
+                "title": "日本製電冰箱NR-F607HX",
+                "description": "顏色:鑽石黑(X1)/翡翠白(W1)/翡翠金(N1)<br>\r\n商品特點:<br>\r\n新鮮急凍結<br>\r\n-3°C微凍結<br>\r\n智慧雙層保濕蔬果室<br>\r\nIOT智慧家電<br>\r\nAI- ECONAVI智慧節能科技<br>\r\nnanoeX健康科技<br>\r\n自動製冰",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hproduct_img/name_2388_20211013134111.png",
+                "link": "https://hhh.com.tw/product-post.php?id=2388",
+                "title": "電子衣櫥N-RGB1R",
+                "description": "UV紫外線+高溫蒸氣 雙重除菌<br>\r\n去除異味<br>\r\n輕柔烘乾<br>\r\n蒸氣除皺<br>",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hproduct_img/name_2387_20210928174941.png",
+                "link": "https://hhh.com.tw/product-post.php?id=2387",
+                "title": "Panasonic旋轉鞋櫃",
+                "description": "1.耐久性測試<br>\r\n旋轉鞋架放滿狀態（3kg/層板）可轉30,000回。<br>\r\n2.靈活運用空間<br>\r\n住宅空間改造必備品。<br>\r\n3.超強大收納力<br>\r\n旋轉鞋架放滿狀態：約可收納54雙鞋子，<br>\r\n比一般鞋櫃多約30%空間。<br>",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hproduct_img/name_2386_20210928174642.png",
+                "link": "https://hhh.com.tw/product-post.php?id=2386",
+                "title": "PRIMAVERA電纜式地暖",
+                "description": "電纜式地暖可使用於任何空間，主要鋪設面材為磁磚、石材等材料，電纜為一體成形不必過度擔心漏電；同時，地暖具有健康、除濕、節能等優點；同時，地暖系統不須維修或更換耗材，正常使用年限可達30年甚至更長。",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hproduct_img/name_2385_20210928174423.png",
+                "link": "https://hhh.com.tw/product-post.php?id=2385",
+                "title": "PRIMAVERA薄膜碳纖維地暖",
+                "description": "日本PRIMAVERA「電器式地暖系統」，利用遠紅外線特性，在不將空氣擾動的情況下直接傳導熱能至身體，具有健康、除濕、節能等優點；同時，地暖系統不須維修或更換耗材，正常使用年限可達30年甚至更長。",
+                "video": "false"
+            }
+        ]
+    },
+    {
+        "_comment": "本週推薦,(txt為部分內容段落)",
+        "id": 7,
+        "block": "sec10",
+        "data": [
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point-index05_291.jpg",
+                "link": "https://hhh.com.tw/columns/detail/6116",
+                "title": "冰熱溫水操之在手！職人水專家「大匠牧水」讓你安心喝好水",
+                "description": "喝冰水好？還是喝溫水好？一直以來爭執不休的話題，顯示出「水溫」的重要性，但無論你站哪一派，優良水質與方便取用，絕對是彼此共識，不過在台灣近九成的家庭都是使用熱水瓶，不只佔用空間，也常常發生「水到用時方恨少」的窘境，而普遍市售的淨水器也只有冷熱兩種選項。難道一早起床喝杯冰水或溫水、宵夜想吃碗熱騰騰泡麵就這麼困難？深耕淨水器領域逾20年的揚古實業，在觀察到此現象後，即與研發團隊首創「Aqua-Mia大匠牧水系列」，一轉開水龍頭，冰熱溫水操之在你，想喝就喝、想用就用，連同水質也是嚴謹看待，以匠人精神替你的健康嚴格把關！",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://img.youtube.com/vi/k_JDSx4w73Y/hqdefault.jpg",
+                "link": "https://hhh.com.tw/video-post.php?id=4087",
+                "title": "典雅大器 夢想中的設計居所",
+                "description": "",
+                "video": "k_JDSx4w73Y"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point02_134_01.jpg",
+                "link": "https://hhh.com.tw/columns/detail/5436",
+                "title": "憂慮「醛」消失！拭除疲憊的馨暖和風",
+                "description": "日光輕巧探入屋內，淘氣地喚起木質的馨暖，渲染清新因子，調和出屬於家的宜人溫度，如茶香般沁入心脾，濾除焦躁，傳遞安穩踏實的能量。豐聚室內裝修設計黃翊峰與李羽芝設計師，以理性與感性兼具的細膩設計思維，再次為注重生活品質的夫妻，擘劃出自然舒和的美學空間，讓回家成為每天最期待的一件事。",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13892_20211018101253.jpg",
+                "link": "https://hhh.com.tw/cases/detail/d/13892",
+                "title": "即景│簡約風│36坪",
+                "description": "",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13628_20210827175405.jpg",
+                "link": "https://hhh.com.tw/cases/detail/d/13628",
+                "title": "系統櫃玩風格 美式休閒退休宅",
+                "description": "旅居國外十多年的屋主夫妻，希望回台享受閒逸退休的生活。在《幸福空間》上看到采品室內設計的作品後，認為十分契合夫妻倆對於退休宅的想像，委請盧慧珊設計師打造出兼具簡單俐落與優雅溫馨的現代美式鄉村質感退休樂活宅。",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcase/designer100_75_11.jpg",
+                "link": "https://hhh.com.tw/cases/detail/d/13309",
+                "title": "揉合溫潤木質與海洋意象 圍塑現代質感新婚宅",
+                "description": "",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13601_20210820181028.jpg",
+                "link": "https://hhh.com.tw/cases/detail/d/13601",
+                "title": "琢白│新古典│100坪",
+                "description": "置身繁華城市與自然共舞，平時日照翠綠，夜晚則燈火霓虹，大方延續窗外景色，融入各空間，並聚焦於感官體驗，注重從建築至室內的整體性，強調視覺的通透感與空間尺度。",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://img.youtube.com/vi/WaY1Nfd6E3I/hqdefault.jpg",
+                "link": "https://hhh.com.tw/video-post.php?id=3991",
+                "title": "日料職人的廚具首選 兼具機能美學與完美收納【SUNWAVE廚具-台灣驪住】",
+                "description": "",
+                "video": "WaY1Nfd6E3I"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13840_20211007184313.jpg",
+                "link": "https://hhh.com.tw/cases/detail/d/13840",
+                "title": "都會裡的蔚藍寧靜海洋｜休閒多元風｜老屋翻新｜40坪",
+                "description": "",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13543_20210804151957.jpg",
+                "link": "https://hhh.com.tw/cases/detail/d/13543",
+                "title": "灰藍調的慵懶旋律｜休閒多元｜25坪｜3房、2廳、2衛",
+                "description": "書房、廚房均用鋁框玻璃門，做出半開放空間格局，創造通透舒適的居住環境。",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13432_20210702163725.jpg",
+                "link": "https://hhh.com.tw/cases/detail/d/13432",
+                "title": "光譜節奏北歐風格 精緻細節成就未來生活｜3房、2廳",
+                "description": "本案屋主為年輕夫妻，較能接受活潑的設計語彙，因此松格室內裝修許清松設計師雖然將本案定調為北歐風，仍揉入光帶、巴洛克線條及亮眼色彩等元素，讓各個空間各自精采，日子充實美滿。",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13786_20210927105459.jpg",
+                "link": "https://hhh.com.tw/cases/detail/d/13786",
+                "title": "揉合現代美式風雅 圍塑都會女性精緻生活品味│40坪",
+                "description": "為女屋主量身打造的生活空間，展呈出個人的品味及生活的細節。同樣身為現代女性的恆星設計鄧湘盈設計師，透過低彩度的色調，將線條、燈光、材質等細膩處作為美學的體現，營造悠閒恣意 端莊優雅的氛圍。設計與藝術融合出舒適與品味的生活感，在現代風底蘊下，揉合優雅美式風格，體現都會女性的特色。將公共區域打造成透空式格局動線，增加空間穿透感，低彩度的色彩搭配大理石形成剛柔並濟的空間。",
+                "video": "false"
+            }
+        ]
+    },
+    {
+        "_comment": "粉絲推薦,(txt為部分內容段落)",
+        "id": 8,
+        "block": "sec11",
+        "data": [
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcase/designer630_45_08.jpg",
+                "link": "https://hhh.com.tw/cases/detail/d/13327",
+                "title": "現代北歐新選擇 自有工班打造休閒別墅｜80坪",
+                "description": "本案屋主曾有過不少裝修經驗，過去的風格取向多以奢華為主，如今因心境轉變，而更嚮往溫馨明亮的空間氛圍。在盡覽《幸福空間》的各式案例後，發現上築空間設計的北歐宅規劃十分符合自己的想像，於是將新購置的透天宅委由魏子涵設計總監全權操刀，透過造型、材質的相輔相成，打破北歐風的既定印象，織就清爽大氣的別墅風範。",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13785_20210924185325.jpg",
+                "link": "https://hhh.com.tw/cases/detail/d/13785",
+                "title": "台北市新南公館住宅｜混搭風｜40坪",
+                "description": "歷史悠久的台灣大學，從前身「臺北帝國大學」到正式更名，已有九十多年的歷史。事實上，其所在地「公館」亦曾是昔日交通要口，在清朝時期，隨著內湖陂、璢公圳、大坪林圳陸續鑿成，沿岸日益繁華，清政府於是在此設立官署納糧課稅，公館於是成為新店溪流域出入臺北盆地的大站。時至今日，此區仍有許多充滿古意的小道、建設及古蹟，也已然成為著名的文教商圈。",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13789_20210927164320.jpg",
+                "link": "https://hhh.com.tw/cases/detail/d/13789",
+                "title": "森昌｜極簡風｜24坪",
+                "description": "",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcase/name_12463_20200617180525.jpg",
+                "link": "https://hhh.com.tw/cases/detail/d/12463",
+                "title": "注入人文與奢華 雕琢大氣質感",
+                "description": "希望家的風格具有人文氣息，同時還要奢華高貴，兩種截然不同的風格究竟要怎麼融合？YS暘昇國際室內裝修工程的李宗育設計師透過建材與色彩，找出兩種風格的特色加以平衡，巧妙混搭出無違和的新感受。",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13854_20211008184723.jpg",
+                "link": "https://hhh.com.tw/cases/detail/d/13854",
+                "title": "住辦「心」主張 一秒到花東 城市裡的慢活 設計就該如此│現代風│120坪",
+                "description": "",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcase/name_11314_20190612105618.jpg",
+                "link": "https://hhh.com.tw/cases/detail/d/11314",
+                "title": "寶輝  一品花園  毛胚屋 裝修案（一）",
+                "description": "每次接到毛胚屋的案子，對於原來的銷售平面總是可以發現到諸多不合理、不完美，甚至不真實的地方。其原因在於建築師的訓練，著重於建築物本身種種的設計策略，其大方向、大尺寸的掌握，以至於使用者更細膩的感官效果、空間行為的產生、空間美感經驗等設計必須勢必延續的部分，在建築設計工作的尾端形成斷點。",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcase/designer514_16_07.jpg",
+                "link": "https://hhh.com.tw/cases/detail/d/13163",
+                "title": "以人為本 讓藝術走入生活空間｜現代風",
+                "description": "本案位於市中心，因此謝雅蓉設計師希望將陽光、空氣、水帶入這個空間，如利用絲柔百葉篩入柔光，配置雞翅木餐桌，呼應屋主姿態優美的大量植栽，營塑自然和諧氛圍。空間中一幅描繪淡水及觀音山美景的畫作意義非凡，其作者吳老師為介紹里摩室內裝修設計給夫妻倆的牽線人，畫作中的黃、綠、藍色彩被作為空間的主色調，搭配灰白石材、深邃木皮砌出沉穩層次。",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13241_20210507183049.jpg",
+                "link": "https://hhh.com.tw/cases/detail/d/13241",
+                "title": "拭除20年歲月痕跡  編織寫意城居光景",
+                "description": "推開門的霎那，瞬間跌入透亮自然語彙，心底漾起溫煦暖意，焦慮緊繃心緒隨之消散。界陽＆大司室內設計馬健凱設計師更新全室管線及格局，拭除20年老屋的歲月痕跡，並循著屋主的生活脈絡，勾勒清馨雅緻的獨有輪廓，編織悠然寫意的城居光景。",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13760_20210920150117.jpg",
+                "link": "https://hhh.com.tw/cases/detail/d/13760",
+                "title": "老屋翻新住辦現代風質感宅│35坪",
+                "description": "",
+                "video": "false"
+            }
+        ]
+    },
+    {
+        "_comment": "video最新影音區",
+        "id": 9,
+        "block": "video",
+        "title": "租屋7大陷阱題 ! 小白找房全攻略｜賣厝阿明X安盛房屋-陳俊杰XClaire",
+        "yt": "Dw11B-FaEJA"
+    },
+    {
+        "_comment": "熱搜關鍵字",
+        "id": 10,
+        "block": "trending",
+        "data": [
+            "客變",
+            "小坪數",
+            "老屋翻新",
+            "收納",
+            "軟裝佈置",
+            "新手裝修",
+            "承炫設計",
+            "風水",
+            "北歐風"
+        ]
+    }
+]