init

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/style.css

@@ -0,0 +1,1815 @@
+body {
+  font-family: 'Helvetica Neue';
+}
+
+.sec-00 .container-fluid {
+  background-color: #cacaca;
+  height: 250px;
+}
+
+@media (max-width: 1100px) {
+  .sec-00 .container-fluid {
+    height: 200px;
+  }
+}
+
+.sec-00__slider {
+  margin: 0 auto;
+  width: 70%;
+  height: 100%;
+}
+
+.sec-00__slider .slide-item {
+  width: 100%;
+  height: 250px;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+@media (max-width: 1100px) {
+  .sec-00__slider .slide-item {
+    height: 200px;
+  }
+}
+
+.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;
+  -webkit-transition: all .4s;
+  transition: all .4s;
+}
+
+.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: 55px;
+}
+
+.sec-02__slider {
+  width: 100%;
+  height: 100%;
+}
+
+.sec-02__slider .slide-item {
+  width: 100%;
+  height: 60vh;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+.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;
+}
+
+.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;
+  background-image: url("../images/2_2.webp");
+}
+
+.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;
+}
+
+@media screen and (max-width: 385px) {
+  .sec-05__tabdiv .nav-item-link {
+    font-size: 1.1rem;
+  }
+}
+
+.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-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;
+  background-image: url("../images/2_2.webp");
+}
+
+@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: center center;
+  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__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;
+}
+
+@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__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-image: url("../images/2_2.webp");
+  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,1465 @@
+body {
+    font-family: 'Helvetica Neue';
+}
+
+.sec-00 {
+    .container-fluid {
+        background-color: rgb(202, 202, 202);
+        height: 250px;
+        @media (max-width: 1100px) {
+            height: 200px;
+        }
+    }
+    &__slider {
+        margin: 0 auto;
+        width: 70%;
+        height: 100%;
+        .slide-item {
+            width: 100%;
+            height: 250px;
+            background-position: center center;
+            background-size: cover;
+            background-repeat: no-repeat;
+            cursor: pointer;
+            @media (max-width: 1100px) {
+                height: 200px;
+            }
+        }
+    }
+}
+
+.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;
+                    transition: all .4s;
+                }
+            }
+            
+        }
+        .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: 55px;
+}
+
+.sec-02 {
+    &__slider {
+        width: 100%;
+        height: 100%;
+        .slide-item {
+            width: 100%;
+            height: 60vh;
+            background-position: center center;
+            background-size: cover;
+            background-repeat: no-repeat;
+            cursor: pointer;
+        }
+        
+    }
+}
+
+.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;
+        &-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;
+        background-image: url('../images/2_2.webp');
+        &.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;
+                @media screen and(max-width: 385px) {
+                    font-size: 1.1rem; 
+                }
+                &.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%;
+    }
+    .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;
+                background-image: url('../images/2_2.webp');
+                @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: center center;
+            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;
+        }
+    }
+    &__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;
+        @media (max-width: 1100px) {
+            height: 20vh;
+        }
+    }
+    &__card {
+        margin: 5px;
+        text-align: center;
+        cursor: pointer;
+        p {
+            font-size: 14px;
+            margin-top: .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-image: url('../images/2_2.webp');
+                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/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.html

@@ -0,0 +1,1655 @@
+<!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="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <div style="overflow-x:hidden;">
+        <section class="sec-00 w-100">
+            <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://m.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" target="_blank" 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://m.hhh.com.tw/about/calculator/">找諮詢</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/" target="_blank">北歐風</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/photos/lists/modern-style/">現代風</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" 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" target="_blank" href="https://m.hhh.com.tw/cases/lists/small-ctype/">小坪數</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" 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" target="_blank" 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" target="_blank" href="https://hhh.com.tw/topic/detail/402/">小坪數大空間</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://hhh.com.tw/videos/lists/">發燒影音</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="">居家防疫動起來</a>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </li>
+                      <li class="nav-item">
+                        <a class="nav-link" target="_blank" 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" target="_blank" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/">編輯精選</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/hometrends-columntypeb/">居家趨勢</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/hotrank-columntypeb/">人氣排行</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/archdesign-columntypeb/">建築設計</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/styleselection-columntypeb/">風格選店</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/editorchoose-columntypea/charitable-columntypeb/">公益活動</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" 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" target="_blank" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/">居家設計</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/smallhouse-columntypeb/">小宅規劃</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/oldhouse-columntypeb/">老屋翻新</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/stylebuild-columntypeb/">風格營造</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/color-columntypeb/">配色佈置</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/housedesign-columntypea/goodhouse-columntypeb/">好宅特輯</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" 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" target="_blank" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/">裝修前線</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/news-columntypeb/">裝修最前線</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/allocation-columntypeb/">預算配置</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/decoration-columntypea/process-columntypeb/">施工流程</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" 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" target="_blank" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/">生活PLUS</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/fengshui-columntypeb/">居家風水</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/housekeeping-columntypeb/">家事清潔</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/plus-columntypea/storageskills-columntypeb/">收納技巧</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" 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" target="_blank" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/">品牌好物</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/furnishings-columntypeb/">傢俱家飾</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/appliances-columntypeb/">美型家電</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/recommend-columntypeb/">推薦廚衛</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/gooditem-columntypea/homegoods-columntypeb/">居家好物</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" 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" target="_blank" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/">房市焦點</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/housingnews-columntypeb/">房市新聞</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/specsearch-columntypeb/">建案特蒐</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://m.hhh.com.tw/columns/lists/focus-columntypea/buyandsell-columntypeb/">買屋賣屋</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" 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" target="_blank" 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/" target="_blank">室內設計師</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/" target="_blank">建材</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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/" target="_blank">塗料</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" 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" target="_blank" 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/" target="_blank">傢俱</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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/" target="_blank">寢具裝飾</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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/" target="_blank">家電</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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/" target="_blank">廚房</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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/" target="_blank">衛浴</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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/" target="_blank">照明</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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/" target="_blank">其他</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" 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" target="_blank" href="https://hhh.com.tw/products/lists/1-page/new-sort/">所有商品</a>
+                                  </li>
+                                  <li class="dropbox-item first">
+                                    <a class="dropbox-link" target="_blank" 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/" target="_blank">依地區</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://hhh.com.tw/builder/lists/100-citys/1-page/">臺北市</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://hhh.com.tw/builder/lists/101-citys/1-page/">新北市</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://hhh.com.tw/builder/lists/103-citys/1-page/">桃園市</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://hhh.com.tw/builder/lists/104-citys/1-page/">新竹縣</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://hhh.com.tw/builder/lists/105-citys/1-page/">新竹市</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" 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" target="_blank" href="https://m.hhh.com.tw/cases/lists/small-ctype/">新建案</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://hhh.com.tw/builder/lists/mrt-types/1-page/">捷運宅</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" href="https://hhh.com.tw/builder/lists/function-types/1-page/">機能宅</a>
+                                  </li>
+                                  <li class="dropbox-item">
+                                    <a class="dropbox-link" target="_blank" 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="" class="navbar-login">登入 / 註冊</a>
+                </div>
+            </div>
+        </nav>
+        <section class="sec-02 w-100">
+            <div class="container-fluid" style="padding:0;margin:0;">
+              <div class="sec-02__slider">
+                
+              </div>
+            </div>
+        </section>
+        <section class="sec-04">
+            <div class="container" style="margin:0 auto;">
+              <div class="row mb-2">
+                <a href="https://hhh.com.tw/event170427/" class="col card px-3 pt-3 pb-4 text-center mx-2">
+                  <h5 class="card-title">老屋翻新<br>住宅改造</h5>
+                  <div class="card__imgfr"><img src="images/renovation.png" alt=""></div>
+                </a>
+                <a href="https://event.hhh.com.tw/2021-Most-Favorite-Designers/index.php" class="col card px-3 pt-3 pb-4 text-center mx-2">
+                  <h5 class="card-title">觀眾最愛<br>設計師</h5>
+                  <div class="card__imgfr"><img src="images/designerlink.png" alt=""></div>
+                </a>
+                <a href="https://event.hhh.com.tw/2021-Top-Brands/" class="col card px-3 pt-3 pb-4 text-center mx-2">
+                    <h5 class="card-title">消費者<br>愛用品牌</h5>
+                    <div class="card__imgfr"><img src="images/brandlink.png" alt=""></div>
+                </a>
+                <a href="https://event.hhh.com.tw/topglory/" class="col card px-3 pt-3 pb-4 text-center mx-2">
+                    <h5 class="card-title">GLORY<br>國際大賞</h5>
+                    <div class="card__imgfr"><img src="images/awardlink.png" alt=""></div>
+                </a>
+              </div>
+            </div>
+        </section>
+        <!-- <section class="sec-guessLike">
+          <div class="container" style="margin:0 auto;">
+            <div class="sec-guessLike__titlebox">
+              <h2 class="sec-guessLike__titlebox-h2 mb-0">猜你喜歡</h2>
+            </div>
+            <h4 class="sec-guessLike__title" style="margin-top: -12px;">影音</h4>
+            <div class="row">
+              <div class="col-7">
+                <div class="sec-guessLike__card special mb-5">
+                  <div class="sec-guessLike__card__txt"><p>走進芭比的家 粉紅泡泡歐式城堡</p></div>
+                  <img src="images/Play-Button.png" alt="" class="sec-guessLike__video__play">
+                </div>
+                <h4 class="sec-guessLike__title">專欄</h4>
+                <div class="row sec-guessLike__article">
+                  <div class="col pe-1">
+                    <div class="sec-guessLike__card mb-2">
+                    </div>
+                    <h5>走進芭比的家 粉紅泡泡歐式城堡</h5>
+                    <p class="mb-3">會議室、教室開關、巡查、空調開關及溫度設會議室、教室開關、巡查、空調開關及溫度設</p>
+                  </div>
+                  <div class="col ps-1">
+                    <div class="sec-guessLike__card mb-2">
+                    </div>
+                    <h5>走進芭比的家 粉紅泡泡歐式城堡</h5>
+                    <p class="mb-3">會議室、教室開關、巡查、空調開關及溫度設會議室、教室開關、巡查、空調開關及溫度設</p>
+                  </div>
+                </div>
+              </div>
+              <div class="col-5">
+                <div class="sec-guessLike__card mb-4">
+                  <div class="sec-guessLike__card__txt"><p>走進芭比的家 粉紅泡泡歐式城堡</p></div>
+                  <img src="images/Play-Button.png" alt="" class="sec-guessLike__video__play">
+                </div>
+                <h4 class="sec-guessLike__title">個案</h4>
+                <div class="sec-guessLike__case">
+                  <div class="sec-guessLike__card mb-2">
+                  </div>
+                  <p class="mb-3">會議室、教室開關、巡查、空調開關及溫度設</p>
+                  <div class="sec-guessLike__card mb-2">
+                  </div>
+                  <p>會議室、教室開關、巡查、空調開關及溫度設</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section> -->
+        <section class="sec-05">
+            <div class="container" style="margin:0 auto;">
+                  <div class="sec-05__tabdiv d-flex">
+                    <ul class="nav row nav-pills gx-2">
+                      <li class="nav-item col">
+                        <button class="nav-item-link bg-transparent" id="pills-hot-tab" data-link="https://hhh.com.tw/cases/lists/">最夯設計</button>
+                      </li>
+                      <li class="nav-item col">
+                        <button class="nav-item-link bg-transparent" id="pills-video-tab" data-link="https://hhh.com.tw/videos/lists/">影音實錄</button>
+                      </li>
+                      <li class="nav-item col">
+                        <button class="nav-item-link bg-transparent" id="pills-blog-tab" data-link="https://hhh.com.tw/columns/lists/">專欄文章</button>
+                      </li>
+                    </ul>
+                    <div class="more">
+                      <a href="https://hhh.com.tw/cases/lists/" class="morelink" target="_blank">看更多</a>
+                    </div>
+                  </div>
+                  <div class="tab-content sec-05tab-content" id="pills-tab">
+                    <div class="" id="pills-hot-tab">
+                        <div class="tabpar tabpar__1">
+                            <div class="tabpar__card" onclick="window.open(`https://hhh.com.tw/columns/detail/2963/`);">
+                              <div class="tabpar__card__imgfr mb-2"></div>
+                              <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                              <p class="mt-2">會議室、教室開關、巡查、空調開關及溫度設</p>
+                            </div>
+                            <div class="tabpar__card" onclick="window.open(`https://hhh.com.tw/columns/detail/2963/`);">
+                              <div class="tabpar__card__imgfr mb-2"></div>
+                              <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                              <p class="mt-2">會議室、教室開關、巡查、空調開關及溫度設</p>
+                            </div>
+                            <div class="tabpar__card" onclick="window.open(`https://hhh.com.tw/columns/detail/2963/`);">
+                              <div class="tabpar__card__imgfr mb-2"></div>
+                              <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                              <p class="mt-2">會議室、教室開關、巡查、空調開關及溫度設</p>
+                            </div>
+                            <div class="tabpar__card" onclick="window.open(`https://hhh.com.tw/columns/detail/2963/`);">
+                              <div class="tabpar__card__imgfr mb-2"></div>
+                              <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                              <p class="mt-2">會議室、教室開關、巡查、空調開關及溫度設</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="" id="pills-video-tab">
+                        <div class="tabpar tabpar__2">
+                          <div class="tabpar__card" onclick="window.open(`https://hhh.com.tw/columns/detail/2963/`);">
+                            <div class="tabpar__card__imgfr mb-2"></div>
+                            <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                            <p class="mt-2">會議室、教室開關、巡查、空調開關及溫度設</p>
+                          </div>
+                          <div class="tabpar__card" onclick="window.open(`https://hhh.com.tw/columns/detail/2963/`);">
+                            <div class="tabpar__card__imgfr mb-2"></div>
+                            <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                            <p class="mt-2">會議室、教室開關、巡查、空調開關及溫度設</p>
+                          </div>
+                          <div class="tabpar__card" onclick="window.open(`https://hhh.com.tw/columns/detail/2963/`);">
+                            <div class="tabpar__card__imgfr mb-2"></div>
+                            <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                            <p class="mt-2">會議室、教室開關、巡查、空調開關及溫度設</p>
+                          </div>
+                          <div class="tabpar__card" onclick="window.open(`https://hhh.com.tw/columns/detail/2963/`);">
+                            <div class="tabpar__card__imgfr mb-2"></div>
+                            <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                            <p class="mt-2">會議室、教室開關、巡查、空調開關及溫度設</p>
+                          </div>
+                        </div>
+                    </div>
+                    <div class="" id="pills-blog-tab">
+                        <div class="tabpar tabpar__3">
+                            <div class="tabpar__card" onclick="window.open(`https://hhh.com.tw/columns/detail/2963/`);">
+                              <div class="tabpar__card__imgfr mb-2"></div>
+                              <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                              <p class="mt-2">會議室、教室開關、巡查、空調開關及溫度設</p>
+                            </div>
+                            <div class="tabpar__card" onclick="window.open(`https://hhh.com.tw/columns/detail/2963/`);">
+                              <div class="tabpar__card__imgfr mb-2"></div>
+                              <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                              <p class="mt-2">會議室、教室開關、巡查、空調開關及溫度設</p>
+                            </div>
+                            <div class="tabpar__card" onclick="window.open(`https://hhh.com.tw/columns/detail/2963/`);">
+                              <div class="tabpar__card__imgfr mb-2"></div>
+                              <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                              <p class="mt-2">會議室、教室開關、巡查、空調開關及溫度設</p>
+                            </div>
+                            <div class="tabpar__card" onclick="window.open(`https://hhh.com.tw/columns/detail/2963/`);">
+                              <div class="tabpar__card__imgfr mb-2"></div>
+                              <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                              <p class="mt-2">會議室、教室開關、巡查、空調開關及溫度設</p>
+                            </div>
+                        </div>
+                  </div>
+                </div>
+        </section>
+        <section class="sec-06">
+          <div class="container">
+            <div class="row">
+              <div class="col-5">
+                <div class="pb-2 sec-06__title"><h3 class="mb-2">最新影音</h3></div>
+                <div class="w-100 sec-06__left">
+                  <div class="sec-06__video" data-bs-toggle="modal" data-bs-target="#videoModal">
+                    <img src="images/Play-Button.png" alt="" class="sec-06__video__play">
+                    <div class="sec-06__video__imgfr"></div>
+                  </div>
+                  <div class="sec-06__videotxt">EP.2 永久棟距開闊視野生態濕地公園首排連呼吸都療癒</div>
+                  <a class="sec-06__btns mb-2 d-flex align-items-center" href="tel:0800-366-086">
+                    <img src="images/menu/agent.svg" alt="" class="me-2">
+                    <div class="text-start">
+                      <span class="d-block sec-06__btns__txt">幸福經紀人</span>
+                      <span class="d-block sec-06__btns__txt">0800-366-086</span>
+                    </div>
+                  </a>
+                  <button class="sec-06__btns mb-2 text-start sec-06__btns__txt" style="background-color: #10506d;" onclick="window.open(`https://www.leju.com.tw/page_search_result`);">樂居實價登錄</button>
+                  <button class="sec-06__btns text-start sec-06__btns__txt" onclick="window.open(`https://event.hhh.com.tw/agent/lecture.html`);">免費報名幸福講堂</button>
+                </div>
+              </div>
+              <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
+                <div class="modal-dialog modal-dialog-centered">
+                  <div class="modal-content">
+                    <div class="modal-body text-center p-0">
+                      <iframe width="700" height="394" allow="autoplay;"></iframe>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-7">
+                <div class="px-2 pb-3 d-flex align-items-end justify-content-between">
+                  <div class="sec-06__title"><h3 class="">主題企劃</h3></div>
+                  <div class="more">
+                    <a href="https://hhh.com.tw/columns/lists/all-columntypea/" class="morelink" target="_blank">看更多</a>
+                  </div>
+                </div>
+                <div class="container-fluid px-2">
+                  <div class="sec-06__slider">
+                    <!-- <div class="sec-06__card" onclick="window.open(`https://hhh.com.tw/columns/detail/2963/`);">
+                      <div class="sec-06__card__imgfr mb-2"><img src="https://images.hhh.com.tw/uploads/_hcolumn_orig/point-index02_241.jpg" alt=""></div>
+                      <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                      <p class="mt-2">會議室、教室開關、巡查、空調開關及溫度設</p>
+                    </div>
+                    <div class="sec-06__card" onclick="window.open(`https://hhh.com.tw/columns/detail/2963/`);">
+                      <div class="sec-06__card__imgfr mb-2"><img src="https://images.hhh.com.tw/uploads/_hcolumn_orig/point-index02_241.jpg" alt=""></div>
+                      <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                      <p class="mt-2">會議室、教室開關、巡查、空調開關及溫度設</p>
+                    </div>
+                    <div class="sec-06__card" onclick="window.open(`https://hhh.com.tw/columns/detail/2963/`);">
+                      <div class="sec-06__card__imgfr mb-2"><img src="https://images.hhh.com.tw/uploads/_hcolumn_orig/point-index02_241.jpg" alt=""></div>
+                      <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                      <p class="mt-2">會議室、教室開關、巡查、空調開關及溫度設</p>
+                    </div> -->
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+        <section class="sec-07">
+            <div class="container">
+                <div class="sec-07__slider">
+                    <!-- <div class="sec-07__slider-1 mx-1" style="width: 70vw; background-image: url(https://images.hhh.com.tw/uploads/_had/adlogo_15356_1588832058.jpg);" onclick="window.open();"></div>
+                    <div class="sec-07__slider-2 mx-1" style="width: 70vw; background-image: url(https://images.hhh.com.tw/uploads/_had/adlogo_15927_1627805018.jpg);" onclick="window.open();"></div>
+                    <div class="sec-07__slider-3 mx-1" style="width: 70vw; background-image: url(https://images.hhh.com.tw/uploads/_had/adlogo_15356_1588832058.jpg);" onclick="window.open();"></div>
+                    <div class="sec-07__slider-4 mx-1" style="width: 70vw; background-image: url(https://images.hhh.com.tw/uploads/_had/adlogo_15356_1588832058.jpg);" onclick="window.open();"></div>
+                    <div class="sec-07__slider-5 mx-1" style="width: 70vw; background-image: url(https://images.hhh.com.tw/uploads/_had/adlogo_15927_1627805018.jpg);" onclick="window.open();"></div>
+                    <div class="sec-07__slider-6 mx-1" style="width: 70vw; background-image: url(https://images.hhh.com.tw/uploads/_had/adlogo_15356_1588832058.jpg);" onclick="window.open();"></div>
+                    <div class="sec-07__slider-6 mx-1" style="width: 70vw; background-image: url(https://images.hhh.com.tw/uploads/_had/adlogo_15356_1588832058.jpg);" onclick="window.open();"></div> -->
+                </div>
+            </div>
+        </section>
+        <section class="sec-08">
+            <div class="container">
+                <div class="px-2 pb-3 d-flex align-items-end justify-content-between">
+                    <div class="py-2 sec-08__title"><h3 class="mb-0">編輯精選</h3></div>
+                    <div class="more">
+                      <a href="https://hhh.com.tw/columns/lists/all-columntypea/" class="morelink" target="_blank">看更多</a>
+                    </div>
+                </div>
+                <div class="sec-08__slider row mx-0">
+                    <div class="sec-08__slider-1 sec-08__card col-12 mx-2" onclick="window.open();">
+                      <div class="sec-08__imgfr mb-2"></div>
+                      <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                      <p class="sec-08__cardtxt">2021星座開運旅行指南！天秤座入住「青旅」開出豔遇紅盤，處女座泡湯牆身心靈</p>
+                    </div>
+                    <div class="sec-08__slider-2 sec-08__card col-12 mx-2" onclick="window.open();">
+                      <div class="sec-08__imgfr mb-2"></div>
+                      <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                      <p class="sec-08__cardtxt">2021星座開運旅行指南！天秤座入住「青旅」開出豔遇紅盤，處女座泡湯牆身心靈</p>
+                    </div>
+                    <div class="sec-08__slider-3 sec-08__card col-12 mx-2" onclick="window.open();">
+                      <div class="sec-08__imgfr mb-2"></div>
+                      <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                      <p class="sec-08__cardtxt">2021星座開運旅行指南！天秤座入住「青旅」開出豔遇紅盤，處女座泡湯牆身心靈</p>
+                    </div>
+                    <div class="sec-08__slider-1 sec-08__card col-12 mx-2" onclick="window.open();">
+                        <div class="sec-08__imgfr mb-2"></div>
+                        <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                        <p class="sec-08__cardtxt">2021星座開運旅行指南！天秤座入住「青旅」開出豔遇紅盤，處女座泡湯牆身心靈</p>
+                      </div>
+                      <div class="sec-08__slider-2 sec-08__card col-12 mx-2" onclick="window.open();">
+                        <div class="sec-08__imgfr mb-2"></div>
+                        <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                        <p class="sec-08__cardtxt">2021星座開運旅行指南！天秤座入住「青旅」開出豔遇紅盤，處女座泡湯牆身心靈</p>
+                      </div>
+                      <div class="sec-08__slider-3 sec-08__card col-12 mx-2" onclick="window.open();">
+                        <div class="sec-08__imgfr mb-2"></div>
+                        <h5 class="mb-2">JTS Design Office | 現代風</h5>
+                        <p class="sec-08__cardtxt">2021星座開運旅行指南！天秤座入住「青旅」開出豔遇紅盤，處女座泡湯牆身心靈</p>
+                      </div>
+                  </div>
+            </div>
+        </section>
+        <section class="sec-09">
+            <div class="container">
+                <div class="px-2 pb-3 d-flex align-items-end justify-content-between">
+                    <div class="py-2 sec-09__title"><h3 class="mb-0">來選好物</h3></div>
+                    <div class="more">
+                      <a href="https://hhh.com.tw/columns/lists/all-columntypea/" class="morelink" target="_blank">看更多</a>
+                    </div>
+                </div>
+                <div class="sec-09__slider row mx-0">
+                    <!-- <div class="sec-09__slider-1 sec-09__card col-12 mx-2" onclick="window.open();">
+                      <div class="sec-09__imgfr mb-2"></div>
+                      <p class="sec-09__cardtxt">LEAF 320i 空氣清淨機</p>
+                    </div>
+                    <div class="sec-09__slider-2 sec-09__card col-12 mx-2" onclick="window.open();">
+                      <div class="sec-09__imgfr mb-2"></div>
+                      <p class="sec-09__cardtxt">LEAF 320i 空氣清淨機</p>
+                    </div>
+                    <div class="sec-09__slider-3 sec-09__card col-12 mx-2" onclick="window.open();">
+                      <div class="sec-09__imgfr mb-2"></div>
+                      <p class="sec-09__cardtxt">LEAF 320i 空氣清淨機</p>
+                    </div>
+                    <div class="sec-09__slider-1 sec-09__card col-12 mx-2" onclick="window.open();">
+                        <div class="sec-09__imgfr mb-2"></div>
+                        <p class="sec-09__cardtxt">LEAF 320i 空氣清淨機</p>
+                      </div>
+                      <div class="sec-09__slider-2 sec-09__card col-12 mx-2" onclick="window.open();">
+                        <div class="sec-09__imgfr mb-2"></div>
+                        <p class="sec-09__cardtxt">LEAF 320i 空氣清淨機</p>
+                      </div>
+                      <div class="sec-09__slider-3 sec-09__card col-12 mx-2" onclick="window.open();">
+                        <div class="sec-09__imgfr mb-2"></div>
+                        <p class="sec-09__cardtxt">LEAF 320i 空氣清淨機</p>
+                      </div> -->
+                </div>
+            </div>
+        </section>
+        <section class="sec-10">
+            <div class="container" style="margin:0 auto;">
+                <div class="sec-10__titlebox mb-3">
+                    <h2 class="sec-10__titlebox-h2 mb-0">本週推薦</h2>
+                </div>
+                <div class="row g-2 px-0 py-3">
+                    <div class="sec-10__card col-4 mb-3" onclick="window.open();">
+                        <div class="sec-10__card-img mb-2" style="background-image: url('https://images.hhh.com.tw/uploads/_hcase_orig/designer738_04_03.jpg');"></div>
+                        <h5>JTS Design Office | 現代風</h5>
+                        <p class="sec-10__cardtxt">禾熙室內裝修設計有限公司</p>
+                    </div>
+                    <div class="sec-10__card col-4 mb-3" onclick="window.open();">
+                        <div class="sec-10__card-img mb-2" style="background-image: url('https://images.hhh.com.tw/uploads/_hcase_orig/name_11746_20191015155016.jpg');"></div>
+                        <h5>JTS Design Office | 現代風</h5>
+                        <p class="sec-10__cardtxt">禾熙室內裝修設計有限公司</p>
+                    </div>
+                    <div class="sec-10__card col-4 mb-3" onclick="window.open();">
+                        <div class="sec-10__card-img mb-2" style="background-image: url('https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_13125_20210319112543.jpg');"></div>
+                        <h5>JTS Design Office | 現代風</h5>
+                        <p class="sec-10__cardtxt">禾熙室內裝修設計有限公司</p>
+                    </div>
+                    <div class="sec-10__card col-4" onclick="window.open();">
+                      <div class="sec-10__card-img mb-2" style="background-image: url('https://images.hhh.com.tw/uploads/_hcase_orig/designer738_04_03.jpg');"></div>
+                      <h5>JTS Design Office | 現代風</h5>
+                      <p class="sec-10__cardtxt">禾熙室內裝修設計有限公司</p>
+                  </div>
+                  <div class="sec-10__card col-4" onclick="window.open();">
+                      <div class="sec-10__card-img mb-2" style="background-image: url('https://images.hhh.com.tw/uploads/_hcase_orig/name_11746_20191015155016.jpg');"></div>
+                      <h5>JTS Design Office | 現代風</h5>
+                      <p class="sec-10__cardtxt">禾熙室內裝修設計有限公司</p>
+                  </div>
+                  <div class="sec-10__card col-4" onclick="window.open();">
+                      <div class="sec-10__card-img mb-2" style="background-image: url('https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_13125_20210319112543.jpg');"></div>
+                      <h5>JTS Design Office | 現代風</h5>
+                      <p class="sec-10__cardtxt">禾熙室內裝修設計有限公司</p>
+                  </div>
+                </div>
+                
+                <div class="more text-end">
+                    <a href="https://hhh.com.tw/topic/detail/402/" class="morelink" target="_blank">看更多</a>
+                </div>
+            </div>
+        </section>
+        <section class="sec-11">
+            <div class="container" style="margin:0 auto;">
+                <div class="sec-11__titlebox mb-3">
+                    <h2 class="sec-11__titlebox-h2 mb-0">粉絲推薦</h2>
+                </div>
+                <div class="row g-2 px-0 py-3">
+                    <div class="sec-11__card col-4 mb-3" onclick="window.open();">
+                        <div class="sec-11__card-img mb-2" style="background-image: url('https://images.hhh.com.tw/uploads/_hcase_orig/designer738_04_03.jpg');"></div>
+                        <h5>JTS Design Office | 現代風</h5>
+                        <p class="sec-11__cardtxt">禾熙室內裝修設計有限公司</p>
+                    </div>
+                    <div class="sec-11__card col-4 mb-3" onclick="window.open();">
+                        <div class="sec-11__card-img mb-2" style="background-image: url('https://images.hhh.com.tw/uploads/_hcase_orig/name_11746_20191015155016.jpg');"></div>
+                        <h5>JTS Design Office | 現代風</h5>
+                        <p class="sec-11__cardtxt">禾熙室內裝修設計有限公司</p>
+                    </div>
+                    <div class="sec-11__card col-4 mb-3" onclick="window.open();">
+                        <div class="sec-11__card-img mb-2" style="background-image: url('https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_13125_20210319112543.jpg');"></div>
+                        <h5>JTS Design Office | 現代風</h5>
+                        <p class="sec-11__cardtxt">禾熙室內裝修設計有限公司</p>
+                    </div>
+                    <div class="sec-11__card col-4" onclick="window.open();">
+                      <div class="sec-11__card-img mb-2" style="background-image: url('https://images.hhh.com.tw/uploads/_hcase_orig/designer738_04_03.jpg');"></div>
+                      <h5>JTS Design Office | 現代風</h5>
+                      <p class="sec-11__cardtxt">禾熙室內裝修設計有限公司</p>
+                  </div>
+                  <div class="sec-11__card col-4" onclick="window.open();">
+                      <div class="sec-11__card-img mb-2" style="background-image: url('https://images.hhh.com.tw/uploads/_hcase_orig/name_11746_20191015155016.jpg');"></div>
+                      <h5>JTS Design Office | 現代風</h5>
+                      <p class="sec-11__cardtxt">禾熙室內裝修設計有限公司</p>
+                  </div>
+                  <div class="sec-11__card col-4" onclick="window.open();">
+                      <div class="sec-11__card-img mb-2" style="background-image: url('https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_13125_20210319112543.jpg');"></div>
+                      <h5>JTS Design Office | 現代風</h5>
+                      <p class="sec-11__cardtxt">禾熙室內裝修設計有限公司</p>
+                  </div>
+                </div>
+                
+                <div class="more text-end">
+                    <a href="https://hhh.com.tw/topic/detail/402/" class="morelink" target="_blank">看更多</a>
+                </div>
+            </div>
+        </section>
+        <!-- <section class="sec p-4">
+          <div class="container">
+            <div class="row">
+              <div class="col test" style="overflow: hidden;">
+                <div class="cover"></div>
+                <img src="images/2_2.webp" alt="" style="width: 100%;">
+              </div>
+              <div class="col">
+                <span class="title_back">
+                  <span class="title">市原の人</span>
+                </span>
+                <p class="test_content">市原市は7万人程度の人口から、現在の27万人強の人口へ増えた歴史があり、住民の4分の3がかつては移住者でした。様々な人が移り住み、文化が混ざり合ったこのまちには、新しい人を寛容に受</p>
+              </div>
+            </div>
+          </div>
+        </section>
+        <section class="sec p-4">
+          <div class="container">
+            <div class="row">
+              <div class="col test" style="overflow: hidden;">
+                <div class="cover"></div>
+                <img src="images/2_2.webp" alt="" style="width: 100%;">
+              </div>
+              <div class="col">
+                <span class="title_back">
+                  <span class="title">市原の人</span>
+                </span>
+                <p class="test_content">市原市は7万人程度の人口から、現在の27万人強の人口へ増えた歴史があり、住民の4分の3がかつては移住者でした。様々な人が移り住み、文化が混ざり合ったこのまちには、新しい人を寛容に受</p>
+              </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 src="images/menu/Image 1@2x.png" alt="" width="20"></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 src="images/menu/instagram@2x.png" width="43" alt="" class="d-inline-block"></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 src="images/gotop.png" width="28" alt="">
+            </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 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 async defer src="js/index.js"></script>
+</body>
+
+</html>

js/index.js

@@ -0,0 +1,475 @@
+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);
+          renderVideo(result);
+          renderTrending(result);
+    });
+
+    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
+        });
+    }
+
+    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,
+        });
+    }
+
+    function renderBannerStr(sec, data) {
+        let str = '';
+        for(let i = 0; i < data.length; i++){
+            str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${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']}');"></div>
+                    <h5 class="mb-2 me-2">${sub[j]['description']}</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']}');"><img src="images/Play-Button.png" alt="" class="tabpar__card__play"></div>
+                <h5 class="mb-2  me-2">${sub[j]['description']}</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']}');"></div>
+                <h5 class="mb-2  me-2">${sub[j]['description']}</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 > 20) {
+              let str = item.textContent.substring(0, 20) + '...';
+              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']}');"><img class="sec-06__card__play" src="images/Play-Button.png"></div></div>
+                    <h5 class="mb-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']}');"></div></div>
+                    <h5 class="mb-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']}');"></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']}');"><img class="sec-08__card__play" src="images/Play-Button.png"></div>
+                        <h5 class="mb-2 me-2">${temp[i]['description']}</h5>
+                        
+                    </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']}');"></div>
+                        <h5 class="mb-2 me-2">${temp[i]['description']}</h5>
+                        
+                    </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__cardtxt');
+        cardText.forEach((item, i) => {
+          let len = item.textContent.length;
+          if(len > 20) {
+            let str = item.textContent.substring(0, 25) + '...';
+            item.textContent = str;
+          }
+        })
+    }
+
+    function renderSec09(data) {
+        let temp = data[6]['data'];
+        let str = '';
+        for(let i = 0; i < temp.length; i++){
+            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']}');"></div>
+                      <p class="sec-09__cardtxt">${temp[i]['description']}</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++){
+            if(data[i].video == 'true') {
+                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']}');"><img class="${sec}__card__play" src="images/Play-Button.png"></div>
+                        <h5 class="me-2">${data[i]['description']}</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']}');"></div>
+                        <h5 class="me-2">${data[i]['description']}</h5>
+                        <p class="${sec}__cardtxt me-2">${data[i]['description']}</p>
+                    </div>`
+            }
+            
+        }
+        $(`.${sec} .row`).html(str);
+    }
+
+    function renderVideo(data) {
+        let temp = data[9];
+        console.log(data[9]);
+        $('.sec-06__videotxt').text(temp['title']);
+        console.log('test');
+        $('.sec-06__video__imgfr').css('background-image', `url(https://img.youtube.com/vi/${temp['yt']}/hqdefault.jpg)`);
+        $('#videoModal').on('shown.bs.modal', function () {
+            $('#videoModal iframe').attr('src', `https://www.youtube.com/embed/${temp['yt']}?controls=0&autoplay=1&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fm.hhh.com.tw&amp;widgetid=1`);
+        });
+        $('#videoModal').on('hidden.bs.modal', function () {
+          $('#videoModal iframe').removeAttr('src');
+        });
+    }
+
+    function renderTrending(result){
+        let temp = result[10]['data'];
+        let str = '';
+        for(let i = 0; i < temp.length; i++){
+            str += `<a class="dropbox__hots__link" href="https://hhh.com.tw/search/lists/case/${temp[i]}-keyword/">${temp[i]}</a>`
+        }
+        $('.dropbox__hots').html(`<strong class="dropbox__hots__title">熱搜關鍵字：</strong>${str}`);
+    }
+
+
+function tab2 () {
+    if(('.dropbox__tabdiv').length){
+        // Show the first tab by default
+    $('.dropbox-tab-content>div').hide();
+    $('.dropbox-tab-content>div:first').show();
+    $('.dropbox__tabdiv .nav-pills li:first').addClass('active');
+    $('.dropbox__tabdiv .nav-pills li:first button').addClass('active');
+
+    // Change tab class and display content
+    $('.dropbox__tabdiv .nav-pills button').on('click', function(event){
+        event.preventDefault();
+        $('.dropbox__tabdiv .nav-pills li').removeClass('active');
+        $('.dropbox__tabdiv .nav-pills li button').removeClass('active');
+        $(this).addClass('active');
+        $(this).parent().addClass('active');
+        $('.dropbox-tab-content>div').hide();
+        var target = $(this).attr('id');
+        $(`#pills-tab-2 #${target}`).show();
+    });
+    }
+}
+
+tab2();
+
+window.addEventListener('scroll', fixedOnScroll);
+    
+const navbar = document.querySelector('.navbar-main');
+    
+function fixedOnScroll() {
+    const sticky = 250;
+    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');
+});
+
+// search
+
+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.open(`https://hhh.com.tw/program/?tv=gstv&date=${utc}&type=tv`);
+}
+
+
+// city result
+
+
+    //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'
+      }); 
+    });
+
+    /* const sec = document.querySelectorAll('.sec');
+    const title = document.querySelectorAll('.title');
+    const cover = document.querySelectorAll('.cover');
+    const test_content = document.querySelectorAll('.test_content');
+
+    function checkSlide() {
+        console.log('pass');
+        sec.forEach((block, i) => {
+            // half way through the image
+            //const test = document.querySelector('.test');
+            const slideInAt = window.scrollY + window.innerHeight;
+            console.log(slideInAt);
+            //console.log(test.offsetTop);
+            // bottom of the image
+            const isHalfShown = slideInAt > block.offsetTop;
+            if (isHalfShown) {
+            console.log('active');
+            title[i].style.bottom = '0em';
+            cover[i].classList.add('slidein');
+            test_content[i].classList.add('fadein');
+            }
+        })
+    };
+
+    window.addEventListener('scroll', checkSlide); */
+

json/data.json

@@ -0,0 +1,390 @@
+[
+    {
+        "_comment": "頂部輪播區",
+        "id": 0,
+        "block": "topCarousel",
+        "data": [
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15662_1607045683.webp",
+                "link": "https://hhh.com.tw/designers/cases/447/1-page/new-sort/"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15673_1603855335.webp",
+                "link": "https://hhh.com.tw/designers/cases/31/1-page/new-sort/"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16107_1628644163.webp",
+                "link": "https://hhh.com.tw/deco/"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16051_1623141203.png",
+                "link": "https://hhh.com.tw/designers/cases/33/1-page/new-sort/"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16115_1629356240.webp",
+                "link": "https://hhh.com.tw/designers/cases/438/1-page/new-sort/"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16115_1629356240.webp",
+                "link": "https://hhh.com.tw/designers/cases/438/1-page/new-sort/"
+            }
+        ]
+    }, 
+    {
+        "_comment": "主要輪播區",
+        "id": 1,
+        "block": "sec02",
+        "data": [
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16132_1631179513.webp",
+                "link": "https://hhh.com.tw/columns/detail/2963/"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16132_1631179513.webp",
+                "link": "https://hhh.com.tw/designers/cases/28/1-page/new-sort/"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16132_1631179513.webp",
+                "link": "https://event.hhh.com.tw/topglory/designer_523.html"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16132_1631179513.webp",
+                "link": "https://hhh.com.tw/softouch"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16132_1631179513.webp",
+                "link": "https://v.hhh.com.tw/"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16132_1631179513.webp",
+                "link": "https://c.hhh.com.tw/?utm_source=homepage&utm_medium=banner&utm_campaign=0809"
+            }
+        ]
+    },
+    {
+        "_comment": "tab區塊-最夯設計, 影音實錄, 專欄文章",
+        "id": 2,
+        "block": "sec03",
+        "data": [
+            {
+                "tab":"最夯設計",
+                "data": [
+                    {
+                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img_orig/name_13738_20210915115457.jpg",
+                        "link": "https://m.hhh.com.tw/cases/detail/13680/",
+                        "title": "北歐風小確幸｜48坪｜透天",
+                        "description": "北歐風小確幸｜48坪｜透天"
+                    },
+                    {
+                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img_orig/name_13738_20210915115457.jpg",
+                        "link": "https://m.hhh.com.tw/cases/detail/13680/",
+                        "title": "北歐風小確幸｜48坪｜透天",
+                        "description": "北歐風小確幸｜48坪｜透天"
+                    },
+                    {
+                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img_orig/name_13738_20210915115457.jpg",
+                        "link": "https://m.hhh.com.tw/cases/detail/13680/",
+                        "title": "北歐風小確幸｜48坪｜透天",
+                        "description": "北歐風小確幸｜48坪｜透天"
+                    },
+                    {
+                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img_orig/name_13738_20210915115457.jpg",
+                        "link": "https://m.hhh.com.tw/cases/detail/13680/",
+                        "title": "北歐風小確幸｜48坪｜透天",
+                        "description": "北歐風小確幸｜48坪｜透天"
+                    }
+                ] 
+            },
+            {
+                "tab":"影音實錄",
+                "data": [
+                    {
+                        "imgUrl": "https://img.youtube.com/vi/LLPdsC718LY/hqdefault.jpg",
+                        "link": "https://m.hhh.com.tw/video-post.php?id=4159",
+                        "title": "北歐風小確幸｜48坪｜透天",
+                        "description": "把渡假飯店搬回家 八里左岸美景盡收眼底！"
+                    },
+                    {
+                        "imgUrl": "https://img.youtube.com/vi/bRfzayE3OH0/hqdefault.jpg",
+                        "link": "https://m.hhh.com.tw/video-post.php?id=4160",
+                        "title": "北歐風小確幸｜48坪｜透天",
+                        "description": "為女友改造！美式低奢風現代宅【Softouch Home】"
+                    },
+                    {
+                        "imgUrl": "https://img.youtube.com/vi/KBcBa0-qKBU/hqdefault.jpg",
+                        "link": "https://m.hhh.com.tw/video-post.php?id=3892",
+                        "title": "北歐風小確幸｜48坪｜透天",
+                        "description": "挑戰1萬5！雜亂工作室升級工業風臥房【Softouch Home】"
+                    },
+                    {
+                        "imgUrl": "https://img.youtube.com/vi/LLPdsC718LY/hqdefault.jpg",
+                        "link": "https://m.hhh.com.tw/video-post.php?id=4159",
+                        "title": "北歐風小確幸｜48坪｜透天",
+                        "description": "把渡假飯店搬回家 八里左岸美景盡收眼底！"
+                    }
+                ] 
+            },
+            {
+                "tab":"專欄文章",
+                "data": [
+                    {
+                        "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point01_349_05.jpg",
+                        "link": "https://m.hhh.com.tw/columns/detail/6007/",
+                        "title": "北歐風小確幸｜48坪｜透天",
+                        "description": "「咖啡輪船」今日開航！星巴克特色門市再＋1"
+                    },
+                    {
+                        "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point04_449_11.jpg",
+                        "link": "https://m.hhh.com.tw/columns/detail/6006/",
+                        "title": "北歐風小確幸｜48坪｜透天",
+                        "description": "穿堂煞、樑壓床了怎麼辦？用設計破解20個常見室內風水迷思"
+                    },
+                    {
+                        "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point-index02_263.jpg",
+                        "link": "https://m.hhh.com.tw/columns/detail/6005/",
+                        "title": "北歐風小確幸｜48坪｜透天",
+                        "description": "【好宅專輯】112萬搞定！三代同堂現代風收納機能宅"
+                    },
+                    {
+                        "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point01_349_05.jpg",
+                        "link": "https://m.hhh.com.tw/columns/detail/6007/",
+                        "title": "北歐風小確幸｜48坪｜透天",
+                        "description": "「咖啡輪船」今日開航！星巴克特色門市再＋1"
+                    }
+                ] 
+            }
+        ]
+    },
+    {
+        "_comment": "主題企劃區",
+        "id": 3,
+        "block": "sec06",
+        "data": [
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcase_orig/designer546_81_07.jpg",
+                "link": "https://m.hhh.com.tw/cases/detail/13320/",
+                "title": "不是寵物是家人 毛小孩專屬智能宅"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcase_orig/designer546_81_07.jpg",
+                "link": "https://m.hhh.com.tw/cases/detail/13320/",
+                "title": "不是寵物是家人 毛小孩專屬智能宅"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcase_orig/designer546_81_07.jpg",
+                "link": "https://m.hhh.com.tw/cases/detail/13320/",
+                "title": "不是寵物是家人 毛小孩專屬智能宅"
+            }
+        ]
+    },
+    {
+        "_comment": "編輯精選",
+        "id": 4,
+        "block": "sec07",
+        "data": [
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point-index05_249.jpg",
+                "link": "https://m.hhh.com.tw/columns/detail/5649/",
+                "title": "北歐風小確幸｜48坪｜透天",
+                "description": "就要給你好看！三星8K量子電視首用Mini LED技術，顏值功能再進化"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_244_01.jpg",
+                "link": "https://m.hhh.com.tw/columns/detail/5626/",
+                "title": "北歐風小確幸｜48坪｜透天",
+                "description": "沒有設計師也能擁有個性小宅？裝潢套餐讓你講究不將就"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcolumn/clogo_5345_20210127183205.jpg",
+                "link": "https://m.hhh.com.tw/columns/detail/5345/",
+                "title": "北歐風小確幸｜48坪｜透天",
+                "description": "告別舊日陰霾 用寢具為居家生活注入安穩力量"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point-index05_249.jpg",
+                "link": "https://m.hhh.com.tw/columns/detail/5649/",
+                "title": "北歐風小確幸｜48坪｜透天",
+                "description": "就要給你好看！三星8K量子電視首用Mini LED技術，顏值功能再進化"
+            }
+        ]
+    },
+    {
+        "_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_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"
+            }
+        ]
+    },
+    {
+        "_comment": "來選好物區",
+        "id": 6,
+        "block": "sec09",
+        "data": [
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hproduct_img/name_2273_20201014114713.png",
+                "link": "https://hhh.com.tw/product-post.php?id=2273",
+                "description": "LEAF 320i 空氣清淨機"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hproduct_img/name_2272_20201014114308.png",
+                "link": "https://hhh.com.tw/product-post.php?id=2272",
+                "description": "LEAF 120 空氣清淨機"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hproduct_img/name_2271_20201014113209.png ",
+                "link": "https://hhh.com.tw/product-post.php?id=2271",
+                "description": "MP-C20U 小空間空氣清淨機"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hproduct_img/name_2273_20201014114713.png",
+                "link": "https://hhh.com.tw/product-post.php?id=2273",
+                "description": "LEAF 320i 空氣清淨機"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hproduct_img/name_2272_20201014114308.png",
+                "link": "https://hhh.com.tw/product-post.php?id=2272",
+                "description": "LEAF 120 空氣清淨機"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hproduct_img/name_2271_20201014113209.png ",
+                "link": "https://hhh.com.tw/product-post.php?id=2271",
+                "description": "MP-C20U 小空間空氣清淨機"
+            }
+        ]
+    },
+    {
+        "_comment": "本週推薦",
+        "id": 7,
+        "block": "sec10",
+        "data": [
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcase_orig/designer355_14_02.jpg",
+                "link": "https://m.hhh.com.tw/cases/detail/13369/",
+                "description": "被落羽松環繞 都市裡的日式步調",
+                "title": "北歐風小確幸｜48坪｜透天",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_12994_20210202192001.jpg",
+                "link": "https://m.hhh.com.tw/cases/detail/12994/",
+                "description": "奔跑吧親子宅 我家比公園好玩",
+                "title": "北歐風小確幸｜48坪｜透天",
+                "video": "true"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_13584_20210816172801.jpg",
+                "link": "https://m.hhh.com.tw/cases/detail/13584/",
+                "description": "又見單寧！歲月沉澱後的退休生活",
+                "title": "北歐風小確幸｜48坪｜透天",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcase_orig/designer432_42_03.jpg",
+                "link": "https://m.hhh.com.tw/cases/detail/12999/",
+                "description": "混搭風│極簡無印",
+                "title": "北歐風小確幸｜48坪｜透天",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point02_134_01.jpg",
+                "link": "https://m.hhh.com.tw/columns/detail/5436/",
+                "description": "憂慮「醛」消失！拭除疲憊的馨暖和風",
+                "title": "北歐風小確幸｜48坪｜透天",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point02_134_01.jpg",
+                "link": "https://m.hhh.com.tw/columns/detail/5436/",
+                "description": "憂慮「醛」消失！拭除疲憊的馨暖和風",
+                "title": "北歐風小確幸｜48坪｜透天",
+                "video": "false"
+            }
+        ]
+    },
+    {
+        "_comment": "粉絲推薦",
+        "id": 8,
+        "block": "sec11",
+        "data": [
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcase_orig/designer738_04_03.jpg",
+                "link": "https://m.hhh.com.tw/cases/detail/13071/",
+                "description": "木質系灰藍曲調｜英式混搭寓所｜小坪數",
+                "title": "北歐風小確幸｜48坪｜透天",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcase_orig/name_11746_20191015155016.jpg",
+                "link": "https://m.hhh.com.tw/cases/detail/11746/",
+                "description": "跳脫傳統設計 斜角開創通透大空間",
+                "title": "北歐風小確幸｜48坪｜透天",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_13125_20210319112543.jpg",
+                "link": "https://m.hhh.com.tw/cases/detail/13125/",
+                "description": "馨暖木韻蔓延 藝術家的舒心逸境｜現代風｜3房、2廳、2衛｜25坪",
+                "title": "北歐風小確幸｜48坪｜透天",
+                "video": "true"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcase_orig/name_12523_20200717134716.jpg",
+                "link": "https://m.hhh.com.tw/cases/detail/12523/",
+                "description": "變形與組合──複合式的空間設計（中）",
+                "title": "北歐風小確幸｜48坪｜透天",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_12835_20201204092123.jpg",
+                "link": "https://m.hhh.com.tw/cases/detail/12835/",
+                "description": "風華英倫、意境品味",
+                "title": "北歐風小確幸｜48坪｜透天",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_12835_20201204092123.jpg",
+                "link": "https://m.hhh.com.tw/cases/detail/12835/",
+                "description": "風華英倫、意境品味",
+                "title": "北歐風小確幸｜48坪｜透天",
+                "video": "false"
+            }
+        ]
+    },
+    {
+        "_comment": "video最新影音區",
+        "id": 9,
+        "block": "video",
+        "title": "不是寵物是家人 毛小孩專屬智能宅",
+        "yt": "IIV2ZvIojc4"
+    },
+    {
+        "_comment": "熱搜關鍵字",
+        "id": 10,
+        "block": "trending",
+        "data": ["小坪數", "收納", "軟裝佈置", "幸福經紀人", "承炫設計", "風水", "北歐風", "周石設計"]
+    }
+]

json/realtime.json

@@ -0,0 +1,486 @@
+[
+    {
+        "_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"
+            },
+            {
+                "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"
+            },
+            {
+                "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"
+            },
+            {
+                "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": ""
+            },
+            {
+                "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"
+            },
+            {
+                "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"
+            },
+            {
+                "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"
+            },
+            {
+                "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_1623141226.png"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16108_1628669736.jpg",
+                "link": "https://hhh.com.tw/designers/cases/452/1-page/new-sort/",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16108_1628669721.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16108_1628669767.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"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16138_1631259916.jpg",
+                "link": "https://hhh.com.tw/designers/cases/182/1-page/new-sort/",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16138_1631259909.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16138_1631259938.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16146_1632293528.jpg",
+                "link": "https://hhh.com.tw/designers/cases/101/1-page/new-sort/",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16146_1632293518.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16146_1632293542.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16139_1631597917.jpg",
+                "link": "https://hhh.com.tw/columns/detail/6072/",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16139_1631597907.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16139_1631597927.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16147_1632300957.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_1632300948.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16147_1632300969.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"
+            }
+        ]
+    },
+    {
+        "_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": ""
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16057_1632369449.jpg",
+                "link": "https://hhh.com.tw/columns/detail/4122/",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16057_1632369435.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16057_1632369466.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"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16082_1627804898.jpg",
+                "link": "https://hhh.com.tw/topic/detail/402/",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16082_1627804906.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16082_1627804929.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16150_1632396275.jpg",
+                "link": "https://event.hhh.com.tw/2021-Top-Brands/page.php?id=31",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16150_1632396251.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16150_1632396290.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16151_1632396108.jpg",
+                "link": "https://event.hhh.com.tw/topglory/case_24.html",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16151_1632396102.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16151_1632396203.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16148_1632396144.jpg",
+                "link": "https://event.hhh.com.tw/topglory/designer_358.html",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16148_1632396137.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16148_1632396172.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16149_1632396126.jpg",
+                "link": "https://hhh.com.tw/designers/cases/447/1-page/new-sort/",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16149_1632396119.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16149_1632396188.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16152_1632396094.jpg",
+                "link": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/case.php?id=418",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16152_1632396087.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16152_1632396225.webp"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16153_1632396080.jpg",
+                "link": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/case.php?id=491",
+                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16153_1632396059.jpg",
+                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16153_1632396240.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"
+            },
+            {
+                "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": ""
+            }
+        ]
+    },
+    {
+        "_comment": "tab區塊-最夯設計, 影音實錄, 專欄文章",
+        "id": 2,
+        "block": "sec03",
+        "data": [
+            {
+                "tab": "最夯設計",
+                "data": [
+                    {
+                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_13781_20210924112526.jpg",
+                        "link": "https://www.hhh.com.tw/cases/detail/13781/",
+                        "description": "春日絮語｜北歐風｜13坪"
+                    },
+                    {
+                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_13780_20210924102617.jpg",
+                        "link": "https://www.hhh.com.tw/cases/detail/13780/",
+                        "description": "以美學描繪生活輪廓 闡述精彩故事情節｜現代風｜111坪"
+                    },
+                    {
+                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_13779_20210924100901.jpg",
+                        "link": "https://www.hhh.com.tw/cases/detail/13779/",
+                        "description": "HC Design｜中璞邨建案設計｜現代風"
+                    }
+                ]
+            },
+            {
+                "tab": "影音實錄",
+                "data": [
+                    {
+                        "imgUrl": "https://img.youtube.com/vi/2YzswkcIeq8/hqdefault.jpg",
+                        "link": "https://www.hhh.com.tw/video-post.php?id=4187",
+                        "description": "挑戰自我的設計 量身訂做專屬高訂宅"
+                    },
+                    {
+                        "imgUrl": "https://img.youtube.com/vi/AqGKRujUuL0/hqdefault.jpg",
+                        "link": "https://www.hhh.com.tw/video-post.php?id=4186",
+                        "description": "離塵不離城 獨享一座森林的幸福適意"
+                    },
+                    {
+                        "imgUrl": "https://img.youtube.com/vi/5oH-huLBq1k/hqdefault.jpg",
+                        "link": "https://www.hhh.com.tw/video-post.php?id=4185",
+                        "description": "設計以人為本 裝修從「心」考量"
+                    }
+                ]
+            },
+            {
+                "tab": "專欄文章",
+                "data": [
+                    {
+                        "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_286_01.jpg",
+                        "link": "https://www.hhh.com.tw/column/detail/6093/",
+                        "description": "廳中的沙發椅座美學 生活乍現的一抹微笑"
+                    },
+                    {
+                        "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point04_479_01.jpg",
+                        "link": "https://www.hhh.com.tw/column/detail/6092/",
+                        "description": "【風水特輯】擺錯飾品反招衰運！4款用了就後悔的NG居家風水擺設"
+                    },
+                    {
+                        "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point-index04_478.jpg",
+                        "link": "https://www.hhh.com.tw/column/detail/6091/",
+                        "description": "東西總是沒處擺，是不是櫃子做越多越好？室內設計師告訴你正解！"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "_comment": "主題企劃區",
+        "id": 3,
+        "block": "sec06",
+        "data": [
+            {
+                "imgUrl": "https://m.hhh.com.tw/upload/_htopic/logo_402_20210730172236.jpg",
+                "link": "https://www.hhh.com.tw/topic/detail/402/",
+                "video": "false",
+                "description": "透過聰明巧思，小坪數房子也能溫馨又好用！除了而熟能詳的「樓中樓」設計，究竟設計師們還能運用那些手法讓小宅擁有豪邸的生活品質呢？一起從配色、家具挑選、風格等不同角度著手，讓你家也有魔術大視覺！（圖片提供／知域設計×一己空間制作）"
+            },
+            {
+                "imgUrl": "https://m.hhh.com.tw/upload/_htopic/logo_401_20210709222636.jpg",
+                "link": "https://www.hhh.com.tw/topic/detail/401/",
+                "video": "false",
+                "description": "雖然現代社會多為小資家庭，在都會中獨立門戶，但仍有許多家庭是採三代同堂的模式為主要居住習慣。面對上有老、下有小的居宅空間，設計師該如何因應家庭成員眾多的生活需求，打造出讓彼此生活舒適自在的好空間呢？"
+            },
+            {
+                "imgUrl": "https://m.hhh.com.tw/upload/_htopic/logo_400_20210527165623.jpg",
+                "link": "https://www.hhh.com.tw/topic/detail/400/",
+                "video": "false",
+                "description": "揮揮手、拍拍手或連上手機APP就能操控空調、大門、窗簾及燈光等物件，想做什麼都不用起身，也不用聲控任何人就能做到！可以盡情讓人發懶得智慧宅，已經不僅僅只存在電影場景中啦！快看看設計師如何將這些尖端科技隱匿於室內設計中，創造美好未來生活。（圖片提供／優尼客空間設計有限公司）"
+            }
+        ]
+    },
+    {
+        "_comment": "編輯精選",
+        "id": 4,
+        "block": "sec07",
+        "data": [
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_256_02.jpg",
+                "link": "https://www.hhh.com.tw/columns/detail/5700/",
+                "description": "蔬果開外掛！超強冰箱凍齡術延緩食材保鮮期",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcolumn/clogo_4839_20200902104602.jpg",
+                "link": "https://www.hhh.com.tw/columns/detail/4839/",
+                "description": "轉開即飲 立刻滿足您對水溫的需求",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_285_01.jpg",
+                "link": "https://www.hhh.com.tw/columns/detail/6086/",
+                "description": "改善門窗玻璃外觀，你適合什麼款式的「居家建築膜」呢？",
+                "video": "false"
+            }
+        ]
+    },
+    {
+        "_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_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"
+            }
+        ]
+    },
+    {
+        "_comment": "來選好物區",
+        "id": 6,
+        "block": "sec09",
+        "data": [
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hproduct_img/name_2384_20210803162337.png",
+                "link": "https://www.hhh.com.tw/product-post.php?id=2384/",
+                "description": "Sunline 特殊型塑鋁百葉窗",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hproduct_img/name_2383_20210816182839.png",
+                "link": "https://www.hhh.com.tw/product-post.php?id=2383/",
+                "description": "Sunline 折疊門",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hproduct_img/name_2382_20210803161842.png",
+                "link": "https://www.hhh.com.tw/product-post.php?id=2382/",
+                "description": "Sunline 推拉門",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hproduct_img/name_2381_20210527160349.png",
+                "link": "https://www.hhh.com.tw/product-post.php?id=2381/",
+                "description": "MIT鐵桌腳",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hproduct_img/name_2380_20210527160130.png",
+                "link": "https://www.hhh.com.tw/product-post.php?id=2380/",
+                "description": "實木長凳",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hproduct_img/name_2379_20210527155756.png",
+                "link": "https://www.hhh.com.tw/product-post.php?id=2379/",
+                "description": "實木小家具",
+                "video": "false"
+            }
+        ]
+    },
+    {
+        "_comment": "本週推薦",
+        "id": 7,
+        "block": "sec10",
+        "data": [
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcase/designer369_03_02.jpg",
+                "link": "https://www.hhh.com.tw/cases/detail/4182/",
+                "description": "蘊納 生活情懷",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_13774_20210922163501.jpg",
+                "link": "https://www.hhh.com.tw/cases/detail/13774/",
+                "description": "轉動鑰匙打開家的期待 雙設計師詮釋景觀新豪奢│現代風│46坪",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13629_20210827182951.jpg",
+                "link": "https://www.hhh.com.tw/cases/detail/13629/",
+                "description": "歲月．新醅│老屋翻新",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcase/designer102_66_05.jpg",
+                "link": "https://www.hhh.com.tw/cases/detail/13153/",
+                "description": "老屋翻新達人出手 缺點變優勢",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcase/designer357_07_07.jpg",
+                "link": "https://www.hhh.com.tw/cases/detail/3986/",
+                "description": "宛如電影場景的美式鄉村風",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13026_20210209111017.jpg",
+                "link": "https://www.hhh.com.tw/cases/detail/13026/",
+                "description": "品味質男看過來 清爽簡約日系宅",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcase/designer104_51_01.jpg",
+                "link": "https://www.hhh.com.tw/cases/detail/4839/",
+                "description": "360度環景視野 構築不凡層峰生活",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13739_20210915135840.jpg",
+                "link": "https://www.hhh.com.tw/cases/detail/13739/",
+                "description": "把小木屋的閒適氛圍帶回家！｜混搭風｜3房、2廳、2衛",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13601_20210820181028.jpg",
+                "link": "https://www.hhh.com.tw/cases/detail/13601/",
+                "description": "琢白│新古典│100坪",
+                "video": "false"
+            }
+        ]
+    },
+    {
+        "_comment": "粉絲推薦",
+        "id": 8,
+        "block": "sec11",
+        "data": [
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13604_20210823152753.jpg",
+                "link": "https://www.hhh.com.tw/cases/detail/13604/",
+                "description": "27坪小資宅，清新空間粉衛浴｜北歐風｜3房、2廳、2衛",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13731_20210914105623.jpg",
+                "link": "https://www.hhh.com.tw/cases/detail/13731/",
+                "description": "快意生活。Joyful Living│現代風│22坪",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13227_20210429115139.jpg",
+                "link": "https://www.hhh.com.tw/cases/detail/13227/",
+                "description": "透亮清新家景 續寫精彩幸福故事｜休閒多元｜68坪｜4房、2廳、3衛",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://images.hhh.com.tw/uploads/_hcase/designer96_68_02.jpg",
+                "link": "https://www.hhh.com.tw/cases/detail/13387/",
+                "description": "音樂藝術展覽廳 滿足居家五感體驗｜高雄都廳苑｜92坪",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img/name_13729_20210913170252.jpg",
+                "link": "https://www.hhh.com.tw/cases/detail/13729/",
+                "description": "漾。初春│北歐風│29坪",
+                "video": "false"
+            },
+            {
+                "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_13772_20210922155613.jpg",
+                "link": "https://www.hhh.com.tw/cases/detail/13772/",
+                "description": "春日。The Spring｜混搭風｜17坪",
+                "video": "false"
+            }
+        ]
+    },
+    {
+        "_comment": "video最新影音區",
+        "id": 9,
+        "block": "video",
+        "title": "挑戰自我的設計 量身訂做專屬高訂宅",
+        "yt": "2YzswkcIeq8"
+    },
+    {
+        "_comment": "熱搜關鍵字",
+        "id": 10,
+        "block": "trending",
+        "data": ["小坪數", "收納", "軟裝佈置", "幸福經紀人", "承炫設計", "風水", "北歐風", "周石設計"]
+    }
+]

json/taiwan_districts.json

@@ -0,0 +1,1618 @@
+[
+    {
+        "districts": [
+            {
+                "zip": "100",
+                "name": "中正區"
+            },
+            {
+                "zip": "103",
+                "name": "大同區"
+            },
+            {
+                "zip": "104",
+                "name": "中山區"
+            },
+            {
+                "zip": "105",
+                "name": "松山區"
+            },
+            {
+                "zip": "106",
+                "name": "大安區"
+            },
+            {
+                "zip": "108",
+                "name": "萬華區"
+            },
+            {
+                "zip": "110",
+                "name": "信義區"
+            },
+            {
+                "zip": "111",
+                "name": "士林區"
+            },
+            {
+                "zip": "112",
+                "name": "北投區"
+            },
+            {
+                "zip": "114",
+                "name": "內湖區"
+            },
+            {
+                "zip": "115",
+                "name": "南港區"
+            },
+            {
+                "zip": "116",
+                "name": "文山區"
+            }
+        ],
+        "name": "臺北市",
+        "zip": "100"
+    },
+    {
+        "districts": [
+            {
+                "zip": "207",
+                "name": "萬里區"
+            },
+            {
+                "zip": "208",
+                "name": "金山區"
+            },
+            {
+                "zip": "220",
+                "name": "板橋區"
+            },
+            {
+                "zip": "221",
+                "name": "汐止區"
+            },
+            {
+                "zip": "222",
+                "name": "深坑區"
+            },
+            {
+                "zip": "223",
+                "name": "石碇區"
+            },
+            {
+                "zip": "224",
+                "name": "瑞芳區"
+            },
+            {
+                "zip": "226",
+                "name": "平溪區"
+            },
+            {
+                "zip": "227",
+                "name": "雙溪區"
+            },
+            {
+                "zip": "228",
+                "name": "貢寮區"
+            },
+            {
+                "zip": "231",
+                "name": "新店區"
+            },
+            {
+                "zip": "232",
+                "name": "坪林區"
+            },
+            {
+                "zip": "233",
+                "name": "烏來區"
+            },
+            {
+                "zip": "234",
+                "name": "永和區"
+            },
+            {
+                "zip": "235",
+                "name": "中和區"
+            },
+            {
+                "zip": "236",
+                "name": "土城區"
+            },
+            {
+                "zip": "237",
+                "name": "三峽區"
+            },
+            {
+                "zip": "238",
+                "name": "樹林區"
+            },
+            {
+                "zip": "239",
+                "name": "鶯歌區"
+            },
+            {
+                "zip": "241",
+                "name": "三重區"
+            },
+            {
+                "zip": "242",
+                "name": "新莊區"
+            },
+            {
+                "zip": "243",
+                "name": "泰山區"
+            },
+            {
+                "zip": "244",
+                "name": "林口區"
+            },
+            {
+                "zip": "247",
+                "name": "蘆洲區"
+            },
+            {
+                "zip": "248",
+                "name": "五股區"
+            },
+            {
+                "zip": "249",
+                "name": "八里區"
+            },
+            {
+                "zip": "251",
+                "name": "淡水區"
+            },
+            {
+                "zip": "252",
+                "name": "三芝區"
+            },
+            {
+                "zip": "253",
+                "name": "石門區"
+            }
+        ],
+        "name": "新北市",
+        "zip": "101"
+    },
+    {
+        "districts": [
+            {
+                "zip": "200",
+                "name": "仁愛區"
+            },
+            {
+                "zip": "201",
+                "name": "信義區"
+            },
+            {
+                "zip": "202",
+                "name": "中正區"
+            },
+            {
+                "zip": "203",
+                "name": "中山區"
+            },
+            {
+                "zip": "204",
+                "name": "安樂區"
+            },
+            {
+                "zip": "205",
+                "name": "暖暖區"
+            },
+            {
+                "zip": "206",
+                "name": "七堵區"
+            }
+        ],
+        "name": "基隆市",
+        "zip": "102"
+    },
+    {
+        "districts": [
+            {
+                "zip": "320",
+                "name": "中壢區"
+            },
+            {
+                "zip": "324",
+                "name": "平鎮區"
+            },
+            {
+                "zip": "325",
+                "name": "龍潭區"
+            },
+            {
+                "zip": "326",
+                "name": "楊梅區"
+            },
+            {
+                "zip": "327",
+                "name": "新屋區"
+            },
+            {
+                "zip": "328",
+                "name": "觀音區"
+            },
+            {
+                "zip": "330",
+                "name": "桃園區"
+            },
+            {
+                "zip": "333",
+                "name": "龜山區"
+            },
+            {
+                "zip": "334",
+                "name": "八德區"
+            },
+            {
+                "zip": "335",
+                "name": "大溪區"
+            },
+            {
+                "zip": "336",
+                "name": "復興區"
+            },
+            {
+                "zip": "337",
+                "name": "大園區"
+            },
+            {
+                "zip": "338",
+                "name": "蘆竹區"
+            }
+        ],
+        "name": "桃園市",
+        "zip": "103"
+    },
+    {
+        "districts": [
+            {
+                "zip": "302",
+                "name": "竹北市"
+            },
+            {
+                "zip": "303",
+                "name": "湖口鄉"
+            },
+            {
+                "zip": "304",
+                "name": "新豐鄉"
+            },
+            {
+                "zip": "305",
+                "name": "新埔鎮"
+            },
+            {
+                "zip": "306",
+                "name": "關西鎮"
+            },
+            {
+                "zip": "307",
+                "name": "芎林鄉"
+            },
+            {
+                "zip": "308",
+                "name": "寶山鄉"
+            },
+            {
+                "zip": "310",
+                "name": "竹東鎮"
+            },
+            {
+                "zip": "311",
+                "name": "五峰鄉"
+            },
+            {
+                "zip": "312",
+                "name": "橫山鄉"
+            },
+            {
+                "zip": "313",
+                "name": "尖石鄉"
+            },
+            {
+                "zip": "314",
+                "name": "北埔鄉"
+            },
+            {
+                "zip": "315",
+                "name": "峨眉鄉"
+            }
+        ],
+        "name": "新竹縣",
+        "zip": "104"
+    },
+    {
+        "districts": [
+            {
+                "zip": "3001",
+                "name": "東區"
+            },
+            {
+                "zip": "3002",
+                "name": "北區"
+            },
+            {
+                "zip": "3003",
+                "name": "香山區"
+            }
+        ],
+        "name": "新竹市",
+        "zip": "105"
+    },
+    {
+        "districts": [
+            {
+                "zip": "350",
+                "name": "竹南鎮"
+            },
+            {
+                "zip": "351",
+                "name": "頭份市"
+            },
+            {
+                "zip": "352",
+                "name": "三灣鄉"
+            },
+            {
+                "zip": "353",
+                "name": "南庄鄉"
+            },
+            {
+                "zip": "354",
+                "name": "獅潭鄉"
+            },
+            {
+                "zip": "356",
+                "name": "後龍鎮"
+            },
+            {
+                "zip": "357",
+                "name": "通霄鎮"
+            },
+            {
+                "zip": "358",
+                "name": "苑裡鎮"
+            },
+            {
+                "zip": "360",
+                "name": "苗栗市"
+            },
+            {
+                "zip": "361",
+                "name": "造橋鄉"
+            },
+            {
+                "zip": "362",
+                "name": "頭屋鄉"
+            },
+            {
+                "zip": "363",
+                "name": "公館鄉"
+            },
+            {
+                "zip": "364",
+                "name": "大湖鄉"
+            },
+            {
+                "zip": "365",
+                "name": "泰安鄉"
+            },
+            {
+                "zip": "366",
+                "name": "銅鑼鄉"
+            },
+            {
+                "zip": "367",
+                "name": "三義鄉"
+            },
+            {
+                "zip": "368",
+                "name": "西湖鄉"
+            },
+            {
+                "zip": "369",
+                "name": "卓蘭鎮"
+            }
+        ],
+        "name": "苗栗縣",
+        "zip": "106"
+    },
+    {
+        "districts": [
+            {
+                "zip": "400",
+                "name": "中區"
+            },
+            {
+                "zip": "401",
+                "name": "東區"
+            },
+            {
+                "zip": "402",
+                "name": "南區"
+            },
+            {
+                "zip": "403",
+                "name": "西區"
+            },
+            {
+                "zip": "404",
+                "name": "北區"
+            },
+            {
+                "zip": "406",
+                "name": "北屯區"
+            },
+            {
+                "zip": "407",
+                "name": "西屯區"
+            },
+            {
+                "zip": "408",
+                "name": "南屯區"
+            },
+            {
+                "zip": "411",
+                "name": "太平區"
+            },
+            {
+                "zip": "412",
+                "name": "大里區"
+            },
+            {
+                "zip": "413",
+                "name": "霧峰區"
+            },
+            {
+                "zip": "414",
+                "name": "烏日區"
+            },
+            {
+                "zip": "420",
+                "name": "豐原區"
+            },
+            {
+                "zip": "421",
+                "name": "后里區"
+            },
+            {
+                "zip": "422",
+                "name": "石岡區"
+            },
+            {
+                "zip": "423",
+                "name": "東勢區"
+            },
+            {
+                "zip": "424",
+                "name": "和平區"
+            },
+            {
+                "zip": "426",
+                "name": "新社區"
+            },
+            {
+                "zip": "427",
+                "name": "潭子區"
+            },
+            {
+                "zip": "428",
+                "name": "大雅區"
+            },
+            {
+                "zip": "429",
+                "name": "神岡區"
+            },
+            {
+                "zip": "432",
+                "name": "大肚區"
+            },
+            {
+                "zip": "433",
+                "name": "沙鹿區"
+            },
+            {
+                "zip": "434",
+                "name": "龍井區"
+            },
+            {
+                "zip": "435",
+                "name": "梧棲區"
+            },
+            {
+                "zip": "436",
+                "name": "清水區"
+            },
+            {
+                "zip": "437",
+                "name": "大甲區"
+            },
+            {
+                "zip": "438",
+                "name": "外埔區"
+            },
+            {
+                "zip": "439",
+                "name": "大安區"
+            }
+        ],
+        "name": "臺中市",
+        "zip": "107"
+    },
+    {
+        "districts": [
+            {
+                "zip": "540",
+                "name": "南投市"
+            },
+            {
+                "zip": "541",
+                "name": "中寮鄉"
+            },
+            {
+                "zip": "542",
+                "name": "草屯鎮"
+            },
+            {
+                "zip": "544",
+                "name": "國姓鄉"
+            },
+            {
+                "zip": "545",
+                "name": "埔里鎮"
+            },
+            {
+                "zip": "546",
+                "name": "仁愛鄉"
+            },
+            {
+                "zip": "551",
+                "name": "名間鄉"
+            },
+            {
+                "zip": "552",
+                "name": "集集鎮"
+            },
+            {
+                "zip": "553",
+                "name": "水里鄉"
+            },
+            {
+                "zip": "555",
+                "name": "魚池鄉"
+            },
+            {
+                "zip": "556",
+                "name": "信義鄉"
+            },
+            {
+                "zip": "557",
+                "name": "竹山鎮"
+            },
+            {
+                "zip": "558",
+                "name": "鹿谷鄉"
+            }
+        ],
+        "name": "南投縣",
+        "zip": "108"
+    },
+    {
+        "districts": [
+            {
+                "zip": "500",
+                "name": "彰化市"
+            },
+            {
+                "zip": "502",
+                "name": "芬園鄉"
+            },
+            {
+                "zip": "503",
+                "name": "花壇鄉"
+            },
+            {
+                "zip": "504",
+                "name": "秀水鄉"
+            },
+            {
+                "zip": "505",
+                "name": "鹿港鎮"
+            },
+            {
+                "zip": "506",
+                "name": "福興鄉"
+            },
+            {
+                "zip": "507",
+                "name": "線西鄉"
+            },
+            {
+                "zip": "508",
+                "name": "和美鎮"
+            },
+            {
+                "zip": "509",
+                "name": "伸港鄉"
+            },
+            {
+                "zip": "510",
+                "name": "員林市"
+            },
+            {
+                "zip": "511",
+                "name": "社頭鄉"
+            },
+            {
+                "zip": "512",
+                "name": "永靖鄉"
+            },
+            {
+                "zip": "513",
+                "name": "埔心鄉"
+            },
+            {
+                "zip": "514",
+                "name": "溪湖鎮"
+            },
+            {
+                "zip": "515",
+                "name": "大村鄉"
+            },
+            {
+                "zip": "516",
+                "name": "埔鹽鄉"
+            },
+            {
+                "zip": "520",
+                "name": "田中鎮"
+            },
+            {
+                "zip": "521",
+                "name": "北斗鎮"
+            },
+            {
+                "zip": "522",
+                "name": "田尾鄉"
+            },
+            {
+                "zip": "523",
+                "name": "埤頭鄉"
+            },
+            {
+                "zip": "524",
+                "name": "溪州鄉"
+            },
+            {
+                "zip": "525",
+                "name": "竹塘鄉"
+            },
+            {
+                "zip": "526",
+                "name": "二林鎮"
+            },
+            {
+                "zip": "527",
+                "name": "大城鄉"
+            },
+            {
+                "zip": "528",
+                "name": "芳苑鄉"
+            },
+            {
+                "zip": "530",
+                "name": "二水鄉"
+            }
+        ],
+        "name": "彰化縣",
+        "zip": "109"
+    },
+    {
+        "districts": [
+            {
+                "zip": "630",
+                "name": "斗南鎮"
+            },
+            {
+                "zip": "631",
+                "name": "大埤鄉"
+            },
+            {
+                "zip": "632",
+                "name": "虎尾鎮"
+            },
+            {
+                "zip": "633",
+                "name": "土庫鎮"
+            },
+            {
+                "zip": "634",
+                "name": "褒忠鄉"
+            },
+            {
+                "zip": "635",
+                "name": "東勢鄉"
+            },
+            {
+                "zip": "636",
+                "name": "臺西鄉"
+            },
+            {
+                "zip": "637",
+                "name": "崙背鄉"
+            },
+            {
+                "zip": "638",
+                "name": "麥寮鄉"
+            },
+            {
+                "zip": "640",
+                "name": "斗六市"
+            },
+            {
+                "zip": "643",
+                "name": "林內鄉"
+            },
+            {
+                "zip": "646",
+                "name": "古坑鄉"
+            },
+            {
+                "zip": "647",
+                "name": "莿桐鄉"
+            },
+            {
+                "zip": "648",
+                "name": "西螺鎮"
+            },
+            {
+                "zip": "649",
+                "name": "二崙鄉"
+            },
+            {
+                "zip": "651",
+                "name": "北港鎮"
+            },
+            {
+                "zip": "652",
+                "name": "水林鄉"
+            },
+            {
+                "zip": "653",
+                "name": "口湖鄉"
+            },
+            {
+                "zip": "654",
+                "name": "四湖鄉"
+            },
+            {
+                "zip": "655",
+                "name": "元長鄉"
+            }
+        ],
+        "name": "雲林縣",
+        "zip": "110"
+    },
+    {
+        "districts": [
+            {
+                "zip": "602",
+                "name": "番路鄉"
+            },
+            {
+                "zip": "603",
+                "name": "梅山鄉"
+            },
+            {
+                "zip": "604",
+                "name": "竹崎鄉"
+            },
+            {
+                "zip": "605",
+                "name": "阿里山鄉"
+            },
+            {
+                "zip": "606",
+                "name": "中埔鄉"
+            },
+            {
+                "zip": "607",
+                "name": "大埔鄉"
+            },
+            {
+                "zip": "608",
+                "name": "水上鄉"
+            },
+            {
+                "zip": "611",
+                "name": "鹿草鄉"
+            },
+            {
+                "zip": "612",
+                "name": "太保市"
+            },
+            {
+                "zip": "613",
+                "name": "朴子市"
+            },
+            {
+                "zip": "614",
+                "name": "東石鄉"
+            },
+            {
+                "zip": "615",
+                "name": "六腳鄉"
+            },
+            {
+                "zip": "616",
+                "name": "新港鄉"
+            },
+            {
+                "zip": "621",
+                "name": "民雄鄉"
+            },
+            {
+                "zip": "622",
+                "name": "大林鎮"
+            },
+            {
+                "zip": "623",
+                "name": "溪口鄉"
+            },
+            {
+                "zip": "624",
+                "name": "義竹鄉"
+            },
+            {
+                "zip": "625",
+                "name": "布袋鎮"
+            }
+        ],
+        "name": "嘉義縣",
+        "zip": "111"
+    },
+    {
+        "districts": [
+            {
+                "zip": "6001",
+                "name": "西區"
+            },
+            {
+                "zip": "6002",
+                "name": "東區"
+            }
+        ],
+        "name": "嘉義市",
+        "zip": "112"
+    },
+    {
+        "districts": [
+            {
+                "zip": "700",
+                "name": "中西區"
+            },
+            {
+                "zip": "701",
+                "name": "東區"
+            },
+            {
+                "zip": "702",
+                "name": "南區"
+            },
+            {
+                "zip": "704",
+                "name": "北區"
+            },
+            {
+                "zip": "708",
+                "name": "安平區"
+            },
+            {
+                "zip": "709",
+                "name": "安南區"
+            },
+            {
+                "zip": "710",
+                "name": "永康區"
+            },
+            {
+                "zip": "711",
+                "name": "歸仁區"
+            },
+            {
+                "zip": "712",
+                "name": "新化區"
+            },
+            {
+                "zip": "713",
+                "name": "左鎮區"
+            },
+            {
+                "zip": "714",
+                "name": "玉井區"
+            },
+            {
+                "zip": "715",
+                "name": "楠西區"
+            },
+            {
+                "zip": "716",
+                "name": "南化區"
+            },
+            {
+                "zip": "717",
+                "name": "仁德區"
+            },
+            {
+                "zip": "718",
+                "name": "關廟區"
+            },
+            {
+                "zip": "719",
+                "name": "龍崎區"
+            },
+            {
+                "zip": "720",
+                "name": "官田區"
+            },
+            {
+                "zip": "721",
+                "name": "麻豆區"
+            },
+            {
+                "zip": "722",
+                "name": "佳里區"
+            },
+            {
+                "zip": "723",
+                "name": "西港區"
+            },
+            {
+                "zip": "724",
+                "name": "七股區"
+            },
+            {
+                "zip": "725",
+                "name": "將軍區"
+            },
+            {
+                "zip": "726",
+                "name": "學甲區"
+            },
+            {
+                "zip": "727",
+                "name": "北門區"
+            },
+            {
+                "zip": "730",
+                "name": "新營區"
+            },
+            {
+                "zip": "731",
+                "name": "後壁區"
+            },
+            {
+                "zip": "732",
+                "name": "白河區"
+            },
+            {
+                "zip": "733",
+                "name": "東山區"
+            },
+            {
+                "zip": "734",
+                "name": "六甲區"
+            },
+            {
+                "zip": "735",
+                "name": "下營區"
+            },
+            {
+                "zip": "736",
+                "name": "柳營區"
+            },
+            {
+                "zip": "737",
+                "name": "鹽水區"
+            },
+            {
+                "zip": "741",
+                "name": "善化區"
+            },
+            {
+                "zip": "744",
+                "name": "新市區"
+            },
+            {
+                "zip": "742",
+                "name": "大內區"
+            },
+            {
+                "zip": "743",
+                "name": "山上區"
+            },
+            {
+                "zip": "745",
+                "name": "安定區"
+            }
+        ],
+        "name": "臺南市",
+        "zip": "113"
+    },
+    {
+        "districts": [
+            {
+                "zip": "800",
+                "name": "新興區"
+            },
+            {
+                "zip": "801",
+                "name": "前金區"
+            },
+            {
+                "zip": "802",
+                "name": "苓雅區"
+            },
+            {
+                "zip": "803",
+                "name": "鹽埕區"
+            },
+            {
+                "zip": "804",
+                "name": "鼓山區"
+            },
+            {
+                "zip": "805",
+                "name": "旗津區"
+            },
+            {
+                "zip": "806",
+                "name": "前鎮區"
+            },
+            {
+                "zip": "807",
+                "name": "三民區"
+            },
+            {
+                "zip": "811",
+                "name": "楠梓區"
+            },
+            {
+                "zip": "812",
+                "name": "小港區"
+            },
+            {
+                "zip": "813",
+                "name": "左營區"
+            },
+            {
+                "zip": "814",
+                "name": "仁武區"
+            },
+            {
+                "zip": "815",
+                "name": "大社區"
+            },
+            {
+                "zip": "817",
+                "name": "東沙群島"
+            },
+            {
+                "zip": "819",
+                "name": "南沙群島"
+            },
+            {
+                "zip": "820",
+                "name": "岡山區"
+            },
+            {
+                "zip": "821",
+                "name": "路竹區"
+            },
+            {
+                "zip": "822",
+                "name": "阿蓮區"
+            },
+            {
+                "zip": "823",
+                "name": "田寮區"
+            },
+            {
+                "zip": "824",
+                "name": "燕巢區"
+            },
+            {
+                "zip": "825",
+                "name": "橋頭區"
+            },
+            {
+                "zip": "826",
+                "name": "梓官區"
+            },
+            {
+                "zip": "827",
+                "name": "彌陀區"
+            },
+            {
+                "zip": "828",
+                "name": "永安區"
+            },
+            {
+                "zip": "829",
+                "name": "湖內區"
+            },
+            {
+                "zip": "830",
+                "name": "鳳山區"
+            },
+            {
+                "zip": "831",
+                "name": "大寮區"
+            },
+            {
+                "zip": "832",
+                "name": "林園區"
+            },
+            {
+                "zip": "833",
+                "name": "鳥松區"
+            },
+            {
+                "zip": "840",
+                "name": "大樹區"
+            },
+            {
+                "zip": "842",
+                "name": "旗山區"
+            },
+            {
+                "zip": "843",
+                "name": "美濃區"
+            },
+            {
+                "zip": "844",
+                "name": "六龜區"
+            },
+            {
+                "zip": "845",
+                "name": "內門區"
+            },
+            {
+                "zip": "846",
+                "name": "杉林區"
+            },
+            {
+                "zip": "847",
+                "name": "甲仙區"
+            },
+            {
+                "zip": "848",
+                "name": "桃源區"
+            },
+            {
+                "zip": "849",
+                "name": "那瑪夏區"
+            },
+            {
+                "zip": "851",
+                "name": "茂林區"
+            },
+            {
+                "zip": "852",
+                "name": "茄萣區"
+            }
+        ],
+        "name": "高雄市",
+        "zip": "114"
+    },
+    {
+        "districts": [
+            {
+                "zip": "900",
+                "name": "屏東市"
+            },
+            {
+                "zip": "901",
+                "name": "三地門鄉"
+            },
+            {
+                "zip": "902",
+                "name": "霧臺鄉"
+            },
+            {
+                "zip": "903",
+                "name": "瑪家鄉"
+            },
+            {
+                "zip": "904",
+                "name": "九如鄉"
+            },
+            {
+                "zip": "905",
+                "name": "里港鄉"
+            },
+            {
+                "zip": "906",
+                "name": "高樹鄉"
+            },
+            {
+                "zip": "907",
+                "name": "鹽埔鄉"
+            },
+            {
+                "zip": "908",
+                "name": "長治鄉"
+            },
+            {
+                "zip": "909",
+                "name": "麟洛鄉"
+            },
+            {
+                "zip": "911",
+                "name": "竹田鄉"
+            },
+            {
+                "zip": "912",
+                "name": "內埔鄉"
+            },
+            {
+                "zip": "913",
+                "name": "萬丹鄉"
+            },
+            {
+                "zip": "920",
+                "name": "潮州鎮"
+            },
+            {
+                "zip": "921",
+                "name": "泰武鄉"
+            },
+            {
+                "zip": "922",
+                "name": "來義鄉"
+            },
+            {
+                "zip": "923",
+                "name": "萬巒鄉"
+            },
+            {
+                "zip": "924",
+                "name": "崁頂鄉"
+            },
+            {
+                "zip": "925",
+                "name": "新埤鄉"
+            },
+            {
+                "zip": "926",
+                "name": "南州鄉"
+            },
+            {
+                "zip": "927",
+                "name": "林邊鄉"
+            },
+            {
+                "zip": "928",
+                "name": "東港鎮"
+            },
+            {
+                "zip": "929",
+                "name": "琉球鄉"
+            },
+            {
+                "zip": "931",
+                "name": "佳冬鄉"
+            },
+            {
+                "zip": "932",
+                "name": "新園鄉"
+            },
+            {
+                "zip": "940",
+                "name": "枋寮鄉"
+            },
+            {
+                "zip": "941",
+                "name": "枋山鄉"
+            },
+            {
+                "zip": "942",
+                "name": "春日鄉"
+            },
+            {
+                "zip": "943",
+                "name": "獅子鄉"
+            },
+            {
+                "zip": "944",
+                "name": "車城鄉"
+            },
+            {
+                "zip": "945",
+                "name": "牡丹鄉"
+            },
+            {
+                "zip": "946",
+                "name": "恆春鎮"
+            },
+            {
+                "zip": "947",
+                "name": "滿州鄉"
+            }
+        ],
+        "name": "屏東縣",
+        "zip": "115"
+    },
+    {
+        "districts": [
+            {
+                "zip": "260",
+                "name": "宜蘭市"
+            },
+            {
+                "zip": "263",
+                "name": "壯圍鄉"
+            },
+            {
+                "zip": "261",
+                "name": "頭城鎮"
+            },
+            {
+                "zip": "262",
+                "name": "礁溪鄉"
+            },
+            {
+                "zip": "264",
+                "name": "員山鄉"
+            },
+            {
+                "zip": "265",
+                "name": "羅東鎮"
+            },
+            {
+                "zip": "266",
+                "name": "三星鄉"
+            },
+            {
+                "zip": "267",
+                "name": "大同鄉"
+            },
+            {
+                "zip": "268",
+                "name": "五結鄉"
+            },
+            {
+                "zip": "269",
+                "name": "冬山鄉"
+            },
+            {
+                "zip": "270",
+                "name": "蘇澳鎮"
+            },
+            {
+                "zip": "272",
+                "name": "南澳鄉"
+            },
+            {
+                "zip": "290",
+                "name": "釣魚臺"
+            }
+        ],
+        "name": "宜蘭縣",
+        "zip": "116"
+    },
+    {
+        "districts": [
+            {
+                "zip": "970",
+                "name": "花蓮市"
+            },
+            {
+                "zip": "971",
+                "name": "新城鄉"
+            },
+            {
+                "zip": "972",
+                "name": "秀林鄉"
+            },
+            {
+                "zip": "973",
+                "name": "吉安鄉"
+            },
+            {
+                "zip": "974",
+                "name": "壽豐鄉"
+            },
+            {
+                "zip": "975",
+                "name": "鳳林鎮"
+            },
+            {
+                "zip": "976",
+                "name": "光復鄉"
+            },
+            {
+                "zip": "977",
+                "name": "豐濱鄉"
+            },
+            {
+                "zip": "978",
+                "name": "瑞穗鄉"
+            },
+            {
+                "zip": "979",
+                "name": "萬榮鄉"
+            },
+            {
+                "zip": "981",
+                "name": "玉里鎮"
+            },
+            {
+                "zip": "982",
+                "name": "卓溪鄉"
+            },
+            {
+                "zip": "983",
+                "name": "富里鄉"
+            }
+        ],
+        "name": "花蓮縣",
+        "zip": "117"
+    },
+    {
+        "districts": [
+            {
+                "zip": "950",
+                "name": "臺東市"
+            },
+            {
+                "zip": "951",
+                "name": "綠島鄉"
+            },
+            {
+                "zip": "952",
+                "name": "蘭嶼鄉"
+            },
+            {
+                "zip": "953",
+                "name": "延平鄉"
+            },
+            {
+                "zip": "954",
+                "name": "卑南鄉"
+            },
+            {
+                "zip": "955",
+                "name": "鹿野鄉"
+            },
+            {
+                "zip": "956",
+                "name": "關山鎮"
+            },
+            {
+                "zip": "957",
+                "name": "海端鄉"
+            },
+            {
+                "zip": "958",
+                "name": "池上鄉"
+            },
+            {
+                "zip": "959",
+                "name": "東河鄉"
+            },
+            {
+                "zip": "961",
+                "name": "成功鎮"
+            },
+            {
+                "zip": "962",
+                "name": "長濱鄉"
+            },
+            {
+                "zip": "963",
+                "name": "太麻里鄉"
+            },
+            {
+                "zip": "964",
+                "name": "金峰鄉"
+            },
+            {
+                "zip": "965",
+                "name": "大武鄉"
+            },
+            {
+                "zip": "966",
+                "name": "達仁鄉"
+            }
+        ],
+        "name": "臺東縣",
+        "zip": "118"
+    },
+    {
+        "districts": [
+            {
+                "zip": "880",
+                "name": "馬公市"
+            },
+            {
+                "zip": "881",
+                "name": "西嶼鄉"
+            },
+            {
+                "zip": "882",
+                "name": "望安鄉"
+            },
+            {
+                "zip": "883",
+                "name": "七美鄉"
+            },
+            {
+                "zip": "884",
+                "name": "白沙鄉"
+            },
+            {
+                "zip": "885",
+                "name": "湖西鄉"
+            }
+        ],
+        "name": "澎湖縣",
+        "zip": "119"
+    },
+    {
+        "districts": [
+            {
+                "zip": "890",
+                "name": "金沙鎮"
+            },
+            {
+                "zip": "891",
+                "name": "金湖鎮"
+            },
+            {
+                "zip": "892",
+                "name": "金寧鄉"
+            },
+            {
+                "zip": "893",
+                "name": "金城鎮"
+            },
+            {
+                "zip": "894",
+                "name": "烈嶼鄉"
+            },
+            {
+                "zip": "896",
+                "name": "烏坵鄉"
+            }
+        ],
+        "name": "金門縣",
+        "zip": "120"
+    },
+    {
+        "districts": [
+            {
+                "zip": "209",
+                "name": "南竿鄉"
+            },
+            {
+                "zip": "210",
+                "name": "北竿鄉"
+            },
+            {
+                "zip": "211",
+                "name": "莒光鄉"
+            },
+            {
+                "zip": "212",
+                "name": "東引鄉"
+            }
+        ],
+        "name": "連江縣",
+        "zip": "121"
+    }
+]