update

.vscode/settings.json

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

hhh_index/css/list-style.css

@@ -0,0 +1,1686 @@
+@charset "UTF-8";
+body {
+  font-family: "Helvetica Neue";
+}
+
+.sec-00 {
+  background-color: rgb(202, 202, 202);
+  transition-property: height;
+  transition-duration: 300ms;
+}
+.sec-00__close {
+  position: absolute;
+  top: 0;
+  right: 20px;
+  width: 50px;
+  height: 30px;
+  background-color: hsla(0, 0%, 100%, 0.66);
+  border-radius: 0 0 50px 50px;
+  color: #888;
+  border: none;
+  outline: none;
+  font-size: 11px;
+  box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
+  line-height: 12px;
+  z-index: 3;
+}
+.sec-00.bannerClose {
+  height: 0;
+  overflow: hidden;
+  transition-property: height;
+  transition-duration: 300ms;
+}
+.sec-00 .container-fluid {
+  background-color: rgb(202, 202, 202);
+}
+.sec-00__slider {
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  max-width: 1310px;
+  padding-top: 20px;
+  padding-bottom: 24px;
+}
+@media (max-width: 1850px) {
+  .sec-00__slider {
+    max-width: 1310px;
+  }
+}
+@media (max-width: 1550px) {
+  .sec-00__slider {
+    max-width: 1310px;
+  }
+}
+@media (max-width: 576px) {
+  .sec-00__slider {
+    max-width: 100%;
+    height: auto;
+  }
+}
+.sec-00__slider .slide-item {
+  width: 100%;
+  height: 100%;
+  max-width: 1310px;
+  max-height: 300px;
+  -o-object-fit: contain;
+  object-fit: contain;
+  height: 300px;
+  cursor: pointer;
+}
+@media (max-width: 576px) {
+  .sec-00__slider .slide-item {
+    max-width: 100%;
+    height: auto;
+  }
+}
+@media (max-width: 576px) {
+  .sec-00 .slick-next {
+    right: 25px;
+  }
+}
+.sec-00 .slick-prev {
+  z-index: 100;
+}
+@media (max-width: 576px) {
+  .sec-00 .slick-prev {
+    left: 25px;
+  }
+}
+.sec-00 .slick-prev:before,
+.sec-00 .slick-next:before {
+  display: none;
+}
+
+/* 設計師列表頁_navbar start*/
+.v-toolbar {
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+}
+
+.v-toolbar__content_nav_box {
+  justify-content: center;
+  height: 100%;
+}
+
+.layout {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: nowrap;
+  min-width: 0;
+}
+
+.v-toolbar__content {
+  position: relative;
+  align-items: center;
+  display: flex;
+}
+.v-toolbar__content .logo {
+  position: absolute;
+  left: 10px;
+  top: 8px;
+  z-index: 200;
+}
+
+.shadow-none {
+  box-shadow: none;
+}
+
+.text-promote-color {
+  color: #ee7800 !important;
+}
+
+.navbar-main {
+  background: #fff;
+  z-index: 1000;
+}
+
+.dropdown {
+  position: relative;
+}
+
+#app_user .dropdown-toggle {
+  padding: 15px 0;
+}
+#app_user .dropdown:hover .dropdown-menu {
+  display: block;
+}
+#app_user .dropdown-menu {
+  position: absolute;
+  top: 62px;
+  left: 0;
+  right: 0;
+  text-align: center;
+}
+#app_user .dropdown-menu:hover {
+  background-color: #eeeeee;
+}
+
+@media (min-width: 991px) {
+  li.dropdown:hover > .dropdown-menu {
+    display: block;
+  }
+}
+.nav-item {
+  position: relative;
+}
+.nav-item .nav-link {
+  position: relative;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 1.17rem;
+  padding: 1.075rem 10px;
+}
+@media (max-width: 991px) {
+  .nav-item .nav-link {
+    padding: 0;
+  }
+}
+.nav-item .dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1050;
+  float: left;
+  min-width: 10rem;
+  padding: 0.5rem 0;
+  margin: 0.125rem 0 0;
+  font-size: 1rem;
+  color: #212529;
+  text-align: left;
+  list-style: none;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.25rem;
+  transition: 0.3s;
+}
+
+.nav-item .thdmenu-block {
+  display: none;
+  position: absolute;
+  left: 99.5%;
+  top: -1px;
+}
+
+.dropdown-menu {
+  min-height: 42px;
+  margin-left: 10px;
+}
+
+.dropdown-toggle::after {
+  display: none !important;
+}
+
+.thdmenu-block {
+  position: absolute;
+  left: 99.5% !important;
+  top: -1px !important;
+}
+
+.dropdown-item {
+  cursor: pointer;
+}
+
+.v-toolbar .navbar-nav > li:hover > .dropdown-menu {
+  display: block;
+}
+
+.v-toolbar .dropdown-menu > li:hover > .thdmenu-block {
+  display: block;
+}
+
+.navbar .dropdown-menu.dropdown-level-width {
+  min-width: 13.5rem;
+}
+
+.navbar .navbar-nav .dropdown-item:hover {
+  background: transparent !important;
+}
+
+.dropdown-sub:hover .submenu,
+.dropdown-sub:hover > div .thdmenu-block > li:hover > .dropdown-item,
+.dropdown-sub:hover i {
+  color: #ee7800;
+}
+
+.navbar .dropdown-menu {
+  top: 98%;
+}
+
+.navbar-nav .dropdown-menu {
+  float: none;
+}
+
+.navbar-expand-lg .navbar-nav .dropdown-menu {
+  position: absolute;
+  top: 72px;
+}
+@media (max-width: 1200px) {
+  .navbar-expand-lg .navbar-nav .dropdown-menu {
+    top: 69px;
+  }
+}
+@media (max-width: 991px) {
+  .navbar-expand-lg .navbar-nav .dropdown-menu {
+    top: 0;
+    position: initial;
+  }
+}
+
+.dropdown-menu li {
+  position: relative;
+}
+
+.dropdown-menu .thdmenu-block {
+  display: none;
+  position: absolute;
+  left: 100%;
+  top: -7px;
+}
+
+@media (min-width: 991px) {
+  .dropdown-menu > li:hover > .thdmenu-block {
+    display: block;
+  }
+}
+.thdmenu-block > li:hover > .dropdown-item {
+  color: #ee7800;
+}
+
+.dropdown-sub a {
+  font-size: 16px;
+}
+.dropdown-sub p {
+  font-size: 16px;
+}
+
+.dropdown-sub .dropdown-menu {
+  top: -10px !important;
+  left: 213px;
+}
+.dropdown-sub .dropdown-menu > li:hover > a {
+  color: #ee7800;
+}
+.dropdown-sub .submenu {
+  color: #34404b;
+}
+@media (min-width: 991px) {
+  .dropdown-sub:hover .dropdown-menu {
+    display: block;
+  }
+}
+@media (max-width: 991px) {
+  .dropdown-sub .submenu {
+    padding: 10px 20px;
+  }
+}
+.dropdown-sub .dropdown-menu {
+  padding-left: 10px;
+}
+@media (max-width: 991px) {
+  .dropdown-sub .dropdown-menu {
+    padding-left: 30px;
+  }
+}
+
+@media (max-width: 991px) {
+  .dropdown .list .dropdown-sub {
+    padding-left: 30px;
+  }
+  .dropdown .list .dropdown-sub .nav-link {
+    padding-left: 30px;
+  }
+  .dropdown .list .dropdown-sub .submenu {
+    padding: 8px 20px;
+  }
+  .dropdown .list .hover-block {
+    padding: 0 !important;
+  }
+}
+
+.hover-block .nav-link {
+  border-bottom: none !important;
+}
+.hover-block .nav-link:hover a,
+.hover-block .nav-link:hover p {
+  color: var(--sub-color);
+}
+
+.sticky-top {
+  position: sticky;
+  top: 0;
+  z-index: 1020;
+}
+
+.toolbar .member-center {
+  top: 5px;
+  position: absolute;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  z-index: 99;
+}
+
+.v-btn {
+  height: 50px;
+  transition: 0.3s;
+  border-radius: 2px;
+}
+
+.v-btn__content {
+  align-items: center;
+  display: flex;
+  flex: 1 0 auto;
+  justify-content: center;
+  margin: 0 auto;
+  position: relative;
+  transition: 0.3scubic-bezier 0.25, 0.8, 0.5, 1;
+  white-space: nowrap;
+  width: inherit;
+  padding: 5px 8px;
+}
+.v-btn__content a {
+  font-size: 14px;
+  font-weight: normal;
+  cursor: pointer;
+  color: #000;
+  font-family: Helvetica, Noto Sans TC, Roboto, Arial, sans-serif !important;
+}
+
+.v-btn:hover {
+  position: relative;
+}
+
+.v-btn:hover {
+  background-color: #e5e6e5;
+}
+
+.navbar-login {
+  padding-right: 8px !important;
+}
+
+.navbar-mb {
+  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-mb-toggler {
+  padding-left: 0;
+  border-color: transparent !important;
+}
+.navbar-mb-toggler:focus {
+  box-shadow: none;
+}
+.navbar-mb-toggler-icon {
+  display: flex;
+  justify-items: center;
+}
+.navbar-mb-toggler-icon i {
+  font-size: 25px;
+  line-height: 30px;
+  display: inline-block;
+}
+.navbar-mb-search {
+  padding-right: 2px;
+}
+.navbar-mb-brand {
+  font-size: 1.5rem;
+}
+
+.navbar-main.sticky {
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+.navbar-main.sticky + .sec-01 {
+  padding-top: 58px;
+}
+
+.sticky {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 3000;
+}
+
+.sticky + .sec-01 {
+  padding-top: 58px;
+}
+
+.sec-menu {
+  display: none;
+  z-index: 105;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  font-size: 14px;
+}
+.sec-menu-block {
+  padding-top: 61px;
+  margin: 0;
+  transition: transform 0.5s;
+  position: fixed;
+  top: 0;
+  left: -100%;
+  right: 0;
+  height: 100%;
+  overflow-y: scroll;
+  max-width: 100%;
+  background-color: white;
+  transition: all 0.3s;
+}
+.sec-menu-list {
+  background: white;
+  margin-bottom: 0;
+}
+.sec-menu-list .navbar-nav {
+  padding: 0 2rem;
+  width: 100%;
+}
+.sec-menu-list .navbar-nav .dropdown-menu {
+  border: none;
+  padding: 0;
+  height: 0;
+  opacity: 0;
+  transition: all 1s;
+}
+.sec-menu-list .navbar-nav .dropdown-menu.show {
+  height: -moz-fit-content;
+  height: fit-content;
+  opacity: 1;
+}
+.sec-menu-list .navbar-nav .dropdown-menu .dropdown-item {
+  padding-left: 3rem;
+}
+.sec-menu-list .navbar-nav .dropdown-menu .dropdown-item:active, .sec-menu-list .navbar-nav .dropdown-menu .dropdown-item.active, .sec-menu-list .navbar-nav .dropdown-menu .dropdown-item:focus {
+  background-color: white;
+}
+.sec-menu-list .navbar-nav .dropdown-menu .dropdown-item:hover {
+  background-color: white;
+}
+.sec-menu-list .navbar-nav .dropdown-menu .sub-menu .dropdown-item {
+  padding-left: 6rem;
+}
+.sec-menu-list .nav-item {
+  font-size: 17px;
+  display: block;
+  width: 100%;
+}
+.sec-menu-list .nav-link {
+  padding-top: 11px;
+  padding-bottom: 8px;
+  color: #707070;
+  position: relative;
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+       appearance: none !important;
+  border-radius: 0;
+}
+.sec-menu-list .nav-link .link_div {
+  width: 25px;
+}
+.sec-menu-list .nav-link a {
+  color: #707070;
+  text-decoration: none;
+}
+.sec-menu-list .nav-link.show i {
+  transform: rotate(-180deg);
+}
+.sec-menu-list .nav-link .expand {
+  position: absolute;
+  right: 10px;
+}
+.sec-menu-list .nav-link .expand i {
+  font-size: 11px;
+  color: #d3d3d3;
+  transition: all 0.5s;
+}
+.sec-menu-list .nav-link.text-main {
+  color: #ee7800;
+}
+.sec-menu-list .sub-link .expand {
+  position: absolute;
+  right: 20px;
+  top: 8px;
+  width: 1.5rem;
+  text-align: center;
+}
+.sec-menu-list .sub-menu {
+  display: none;
+}
+.sec-menu-list .sub-menu.show {
+  display: block;
+}
+.sec-menu-list hr {
+  margin: 3px 0;
+  background-color: rgb(187, 187, 187);
+}
+.sec-menu-follows {
+  padding: 2rem 2.5rem;
+  background-color: rgba(230, 230, 230, 0.937254902);
+  margin-top: -9px;
+}
+.sec-menu-follows-title {
+  color: #797979;
+  font-size: 14px;
+}
+.sec-menu-links {
+  margin-bottom: 2.5rem;
+}
+.sec-menu-links a {
+  color: #797979;
+  text-decoration: none;
+  display: inline-block;
+  padding: 1px 0;
+  border-bottom: 1px solid #acacac;
+  margin: 0 0.6rem;
+  flex-wrap: nowrap;
+}
+@media (max-width: 385px) {
+  .sec-menu-links a {
+    margin: 0 0.4rem;
+  }
+}
+.sec-menu .follows-fp {
+  color: #797979;
+  text-decoration: none;
+  font-weight: 400;
+  display: block;
+  padding-left: 0.5rem;
+}
+.sec-menu .follows-fp:nth-of-type(1) {
+  margin-bottom: 0.6rem;
+}
+.sec-menu .copyright {
+  color: #797979;
+  font-size: 13px;
+}
+
+.navbar-light .navbar-brand {
+  cursor: pointer;
+}
+
+.designers-nav li .nav-link {
+  font-size: 16px;
+}
+.designers-nav li .nav-link:hover {
+  opacity: 0.8;
+}
+.designers-nav .text-phone {
+  color: #ea068c;
+}
+.designers-nav .nav-item .nav-link:after {
+  border: none !important;
+}
+
+/* 設計師列表頁_navbar end */
+#navbarSupportedContent img {
+  width: 20px;
+}
+
+.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 0.6rem;
+  }
+}
+.navbar-toggler {
+  padding-left: 0;
+  border-color: transparent !important;
+}
+.navbar-toggler:focus {
+  box-shadow: none;
+}
+.navbar-toggler-icon {
+  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: flex;
+  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 {
+    font-size: 0.9rem;
+  }
+}
+.navbar .nav-link .expand {
+  transition: all 0.3s;
+}
+.navbar .nav-link .expand i {
+  color: #D3D3D3;
+}
+.navbar .nav-link .rotate {
+  transform: rotate(180deg);
+}
+@media (max-width: 991px) {
+  .navbar .navbar-nav > li {
+    padding: 15px 0;
+  }
+  .navbar .navbar-nav li {
+    border-bottom: 1px solid #F4F4F4;
+  }
+  .navbar .navbar-nav .dropdown-menu {
+    border: none;
+    margin: 15px 0 -15px;
+  }
+  .navbar .navbar-nav .dropdown-menu .dropdown-sub:first-child {
+    border-top: 1px solid #F4F4F4;
+  }
+  .navbar .navbar-nav .dropdown-menu .dropdown-sub:last-child {
+    border-bottom: none;
+  }
+  .navbar .navbar-nav .dropdown-sub .dropdown-menu {
+    margin: 0;
+  }
+  .navbar .navbar-nav .dropdown-sub .dropdown-menu li {
+    padding: 8px 50px;
+  }
+  .navbar .navbar-nav .dropdown-sub .dropdown-menu li:first-child {
+    border-top: 1px solid #F4F4F4;
+  }
+  .navbar .navbar-nav .dropdown-sub .dropdown-menu li:last-child {
+    border-bottom: none;
+  }
+}
+.navbar .navbar-nav .nav-item {
+  margin: 0 0.5rem;
+}
+@media (max-width: 1200px) {
+  .navbar .navbar-nav .nav-item {
+    margin: 0 0.25rem;
+  }
+}
+.navbar .navbar-nav .nav-item .dropbox {
+  visibility: hidden;
+  opacity: 0;
+  transition: all 0.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: 0.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: rgb(146, 146, 146);
+  font-size: 0.85rem;
+}
+.navbar .navbar-nav .nav-item .dropbox-link:hover {
+  color: #ee7800;
+}
+.navbar .navbar-nav .nav-item .dropbox-link.dropbox-btn {
+  border: 1px solid rgb(146, 146, 146);
+  padding: 0.5rem 2rem;
+  border-radius: 5px;
+  width: 85%;
+  min-width: 7rem;
+  max-width: 11rem;
+}
+.navbar .navbar-nav .nav-item .dropbox-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.navbar .navbar-nav .nav-item .dropbox .container {
+  max-width: 900px;
+  width: 70%;
+}
+.navbar .navbar-nav .nav-item .dropbox .container.stylebox {
+  transform: translateX(-30%);
+}
+.navbar .navbar-nav .nav-item .dropbox .container.designerbox {
+  transform: translateX(-5%);
+}
+.navbar .navbar-nav .nav-item .dropbox .container.newbox {
+  transform: translateX(15%);
+}
+.navbar .navbar-nav .nav-item .dropbox .container.forumbox {
+  transform: translateX(50%);
+}
+.navbar .navbar-nav .nav-item .nav-link {
+  position: relative;
+  font-size: 19px;
+  cursor: pointer;
+  color: #34404b;
+  border-bottom: 4px solid transparent;
+}
+@media (max-width: 1200px) {
+  .navbar .navbar-nav .nav-item .nav-link {
+    font-size: 17px;
+  }
+}
+@media (max-width: 991px) {
+  .navbar .navbar-nav .nav-item .nav-link {
+    border-bottom: none;
+  }
+}
+.navbar .navbar-nav .nav-item .nav-link a {
+  transition: all 0.2s;
+}
+.navbar .navbar-nav .nav-item .nav-link:hover {
+  border-bottom: 4px solid #ee7800;
+}
+@media (max-width: 991px) {
+  .navbar .navbar-nav .nav-item .nav-link:hover {
+    color: #ee7800;
+    border-bottom: none;
+  }
+  .navbar .navbar-nav .nav-item .nav-link:hover a {
+    color: #ee7800;
+  }
+}
+.navbar .navbar-nav .nav-item .nav-link span {
+  display: block;
+}
+.navbar .navbar-nav .nav-item .nav-link .search-btn {
+  border: none;
+  background: transparent;
+  padding-top: 4px;
+}
+@media (max-width: 1200px) {
+  .navbar .navbar-nav .nav-item .nav-link .search-btn {
+    padding-top: 3px;
+  }
+}
+.navbar .navbar-nav .nav-item .nav-link .search-btn img {
+  padding-bottom: 4px;
+}
+@media (max-width: 1200px) {
+  .navbar .navbar-nav .nav-item .nav-link .search-btn img {
+    padding-bottom: 3px;
+  }
+}
+@media (max-width: 1100px) {
+  .navbar .navbar-nav .nav-item .nav-link .search-btn img {
+    padding-bottom: 2px;
+  }
+}
+.navbar .navbar-nav .nav-item .search-btn {
+  border: none;
+  background: transparent;
+}
+.navbar .navbar-nav .nav-item:hover > .dropbox {
+  visibility: visible;
+  opacity: 1;
+}
+.navbar .navbar-nav .nav-item.lg .container {
+  max-width: 1200px;
+  width: 90%;
+}
+.navbar .navbar-nav .nav-item.lg .dropbox-link {
+  text-decoration: none;
+  color: rgb(146, 146, 146);
+  font-size: 0.7rem;
+}
+.navbar .navbar-nav .nav-item.lg .dropbox-link:hover {
+  color: #ee7800;
+}
+.navbar .navbar-nav .nav-item.lg .dropbox-item {
+  margin-bottom: 0.1rem;
+}
+.navbar .navbar-nav .nav-item.lg .dropbox-item.first .dropbox-link {
+  font-size: 0.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;
+  transition: all 0.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: 0.2rem 1rem;
+  padding-bottom: 1rem;
+}
+.navbar-search .dropbox__hots__title {
+  font-size: 1rem;
+  color: rgb(107, 107, 107);
+}
+.navbar-search .dropbox__hots__link {
+  font-size: 0.9rem;
+  color: rgb(146, 146, 146);
+  text-decoration: none;
+  cursor: pointer;
+  margin: 0 0.2rem;
+}
+.navbar-search .dropbox__searchBar__input {
+  width: 100%;
+  outline: none;
+  border: 2px solid #ee7800;
+  border-radius: 5rem;
+  padding: 0.3rem 1.2rem;
+  font-size: 0.9rem;
+}
+.navbar-search .dropbox__searchBar__submit {
+  outline: none;
+  border: none;
+  font-size: 0.9rem;
+  background-color: transparent;
+  color: #ee7800;
+  margin-left: -1rem;
+  transform: translateX(-100%);
+  padding: 0 0.6rem;
+}
+.navbar-search .dropbox__tab .nav-item {
+  margin: 0 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: flex;
+  padding-top: 0.5rem;
+}
+.navbar-search .dropbox-tab-content .tabpar .col {
+  margin: 0 0.6rem;
+}
+.navbar-search .dropbox-tab-content .tabpar .select {
+  font-size: 1rem;
+  padding: 0.6rem;
+  border-radius: 3px;
+  color: rgb(116, 116, 116);
+}
+.navbar-search .dropbox-tab-content .tabpar button {
+  border: none;
+  outline: none;
+  background-color: #ee7800;
+  border-radius: 3px;
+  color: white;
+  font-size: 1rem;
+  padding: 0.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: 0.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: 0.6rem;
+}
+.navbar #search-btn {
+  font-size: 20px;
+  border: none;
+  background: transparent;
+}
+
+.navbar-search .dropbox__tab .nav-item-link.active .nav-item-link::after {
+  opacity: 1;
+}
+
+.navbar-main.sticky {
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+.navbar-main.sticky + .sec-02 {
+  padding-top: 53.5px;
+}
+
+.shadow-item {
+  position: absolute;
+  display: none;
+  height: 3px;
+  top: 51px;
+  width: 100vw;
+  right: 0;
+  left: 0;
+  margin: auto;
+  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1607843137);
+  border-bottom: 1px solid #ccc;
+}
+@media (max-width: 991px) {
+  .shadow-item {
+    display: block;
+  }
+}
+
+.sec-02__slider {
+  width: 100%;
+  height: 100%;
+}
+.sec-02__slider .slide-item {
+  width: 100%;
+  height: 74vh;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+.sec-02 .slick-prev:before,
+.sec-02 .slick-next:before {
+  display: none;
+}
+.sec-02 .slick-prev {
+  left: 15px;
+  z-index: 3;
+}
+.sec-02 .slick-next {
+  right: 15px;
+}
+
+a {
+  text-decoration: none;
+}
+
+.text-hhh {
+  color: #ee7800;
+}
+
+.content {
+  background-color: #fcfcfc;
+  padding: 1rem 30px 0.5rem;
+}
+.content .infoCard {
+  color: #727679;
+  text-align: center;
+  padding: 1rem;
+  background-color: rgba(244, 244, 244, 0.8);
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  transform: translateY(-150px);
+}
+.content .infoCard__seo {
+  font-size: 0.9rem;
+  text-align: center;
+  padding: 1rem;
+  display: block;
+  line-height: 1.2;
+}
+.content .infoCard__approve {
+  color: #ff0000;
+}
+.content .infoCard__avatar {
+  width: 200px;
+  height: 200px;
+  border: 3px solid #fff;
+  border-radius: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.content .infoCard__detail aside {
+  line-height: 2;
+  font-size: 0.9rem;
+}
+.content .infoCard__detail__l {
+  flex-basis: 30%;
+  display: flex;
+  justify-content: flex-end;
+  flex-grow: 0;
+  max-width: 30%;
+}
+.content .infoCard__detail__l.title {
+  color: #aaaaaa;
+  font-size: 1.125rem;
+  font-weight: 400;
+  transform: translateX(-15px);
+}
+.content .infoCard__detail__r {
+  flex-basis: 70%;
+  text-align: start;
+  flex-grow: 0;
+  max-width: 70%;
+  word-break: break-all;
+}
+.content .infoCard__detail__r a {
+  color: #727679;
+}
+.content .infoCard__detail__r a:hover {
+  color: #ee7800;
+}
+.content .infoCard .scMedia {
+  display: flex;
+  padding: 1rem 0;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  justify-content: space-around;
+}
+.content .infoCard .scMedia a {
+  width: 16%;
+}
+.content .infoCard .scMedia a img {
+  width: 100%;
+}
+.content .infoCard .scMedia span {
+  width: 16%;
+  cursor: pointer;
+}
+.content .infoCard .scMedia span img {
+  width: 100%;
+}
+
+.infoContent a {
+  color: #727679;
+  text-decoration: none;
+  font-size: 0.9rem;
+}
+.infoContent a.active {
+  color: #ee7800;
+}
+.infoContent .nav-item {
+  margin: 0 0.8rem;
+  width: auto;
+}
+.infoContent .nav-item-link {
+  display: block;
+  padding: 0.5rem 2.5rem;
+  text-decoration: none;
+  background-color: transparent;
+  font-size: 0.9rem;
+  color: #727679;
+  transition: all 0.3s;
+  -webkit-appearance: none !important;
+}
+@media (max-width: 1200px) {
+  .infoContent .nav-item-link {
+    padding: 0.5rem 0.8rem;
+  }
+}
+.infoContent .nav-item-link:hover {
+  color: #ee7800;
+}
+.infoContent .nav-item-link.active {
+  color: #ee7800;
+  border-bottom: 2px solid #ee7800;
+}
+.infoContent .likeSee {
+  margin-top: 0.8rem;
+}
+@media (max-width: 1200px) {
+  .infoContent .likeSee {
+    width: 12%;
+    position: absolute;
+    right: -1.5rem;
+    bottom: -1.5rem;
+  }
+}
+.infoContent .likeSee span {
+  color: #727679;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+.infoContent .likeSee span:hover {
+  color: #ee7800;
+}
+.infoContent .likeSee__divider {
+  height: 12px;
+  display: inline-block;
+  border: 0.5px solid #9d9d9d;
+}
+.infoContent .card {
+  box-shadow: 0 1px 10px #eee;
+  margin: 0 0 1.5rem;
+  border: none;
+  overflow: hidden;
+}
+.infoContent .card:hover .card__bgImg {
+  transform: scale(1.1);
+}
+.infoContent .card__bgImg {
+  height: 293px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  transition: all 0.4s;
+}
+.infoContent .card-body {
+  padding: 0.5rem 1rem;
+}
+.infoContent .card__title {
+  font-size: 1.125rem;
+  -webkit-box-orient: vertical;
+  box-orient: vertical;
+  -webkit-line-clamp: 2;
+  height: 54px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  font-weight: bold;
+  margin: 0.5rem 0;
+  color: #727679;
+}
+.infoContent .card__tag {
+  margin: 0 0.2rem 0 0;
+}
+.infoContent .card__tag:hover {
+  color: #ee7800;
+}
+.infoContent .company__block {
+  margin: 0 0 2rem;
+}
+.infoContent .company__title {
+  color: #aaaaaa;
+  font-size: 2rem;
+  font-weight: bold;
+}
+.infoContent .company__text {
+  color: #43484c;
+}
+
+.nav-collapse-fixed {
+  position: fixed;
+  top: 52px;
+  z-index: -1;
+  width: 100%;
+  opacity: 0;
+  transition: opacity 0.5s;
+}
+@media (max-width: 1200px) {
+  .nav-collapse-fixed {
+    width: auto;
+  }
+}
+.nav-collapse-fixed.sticky {
+  display: block;
+  opacity: 1;
+  z-index: 20;
+}
+.nav-collapse-fixed .nav-collpase {
+  padding: 1rem 0;
+  background-color: #fcfcfc;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+
+.navbar-main.sticky + .hero {
+  padding-top: 53px;
+}
+
+.page-link {
+  color: #727679;
+}
+.page-link:hover {
+  color: #fff;
+  background-color: #ee7800;
+  border-color: #ee7800;
+}
+
+.page-link:focus {
+  color: #fff;
+  background-color: #ee7800;
+  border-color: #ee7800;
+  box-shadow: none;
+}
+
+.page-active {
+  color: #fff;
+  background-color: #ee7800;
+  border-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 0.8rem;
+  background-color: rgba(255, 255, 255, 0.897);
+  display: flex;
+  align-items: center;
+  box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+
+.footer__block-socials {
+  padding-left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+@media (max-width: 1100px) {
+  .footer__block-socials img {
+    width: 30px;
+  }
+}
+@media (max-width: 575px) {
+  .footer__block-socials {
+    justify-content: center;
+  }
+  .footer__block-socials li {
+    margin: 5px;
+  }
+}
+
+.like {
+  display: none;
+}
+
+.emodal-title {
+  color: #ee7800;
+  margin: 0 auto;
+  font-size: 18px;
+}
+.emodal .form-control:focus {
+  border-color: #ffb76f;
+  box-shadow: none;
+}
+.emodal .btn-plus {
+  color: #aaa;
+  border-color: #aaa;
+}
+.emodal .btn-send {
+  background-color: #ee7800;
+  color: white;
+  width: 30%;
+  border: none;
+  padding: 0.875rem 1rem;
+  border-radius: 2px;
+}
+.emodal .btn-dismiss {
+  width: 30%;
+  border: none;
+  padding: 0.875rem 1rem;
+  background-color: #d1d2d3;
+  border-radius: 2px;
+  color: #fff;
+}
+
+#putEmail_hidden {
+  border: 1px solid;
+  border-radius: 28px;
+  color: #ee7800 !important;
+}
+#putEmail_hidden .fm-email-btn {
+  padding: 2px 5px 2px 5px;
+}
+
+/* designers.html start */
+.text-primary {
+  color: #ee7800 !important;
+}
+
+.border-primary {
+  border-color: #ee7800 !important;
+}
+
+.container-searchbar {
+  max-width: 990px;
+}
+
+.list-head {
+  font-weight: bold;
+  font-size: 1.5rem;
+  font-family: "Microsoft JhengHei", Helvetica, Noto Sans TC, Roboto, Arial, sans-serif;
+}
+
+.search-bar-keyword a {
+  color: #ee7800;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.search-bar .search-bar-aside {
+  position: fixed;
+  top: 490px;
+  z-index: 999;
+  transform: translateX(0%);
+}
+.search-bar .search-bar-aside-text {
+  position: absolute;
+  top: -24px;
+  color: #444;
+  background: rgba(255, 255, 255, 0.75);
+  padding: 0 5px;
+  width: 100%;
+  text-align: right;
+  cursor: pointer;
+}
+.search-bar .search-bar-block {
+  padding: 0 8px 8px 0;
+  transform: translateX(0%);
+  transition: transform 300ms ease-in-out;
+  background: rgba(255, 255, 255, 0.75);
+}
+.search-bar .search-bar-aside-arrow {
+  transition: transform 300ms ease-in-out;
+}
+.search-bar .is-hidden {
+  transform: translateX(-90%);
+}
+.search-bar .is-rotate {
+  transform: rotate(180deg);
+}
+
+.input-group {
+  height: calc(1.5em + 2rem + 2px);
+}
+.input-group .input-group-text,
+.input-group .keywords {
+  font-weight: bold;
+  font-size: 0.875rem !important;
+}
+.input-group .input-group-text {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 2rem !important;
+  margin-bottom: 0;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  background-color: #ee7800;
+  border: 2px solid #ee7800;
+  line-height: 1.5;
+  border-radius: 0.3rem;
+  cursor: pointer;
+}
+.input-group .keywords {
+  border: 2px solid;
+  padding: 0 2rem;
+}
+
+.search-tab .bg-main {
+  background-color: #fafafa;
+}
+.search-tab .dropdown-wrapper {
+  display: flex;
+}
+.search-tab small {
+  font-size: 16px;
+}
+.search-tab small span {
+  font-size: 20px;
+  font-weight: bold;
+}
+.search-tab .btn-original {
+  background-color: #fff;
+  font-weight: bold;
+  border-color: #dbdbdb;
+}
+.search-tab .btn-original:focus {
+  box-shadow: none;
+  color: #ee7800;
+  border-color: #ee7800;
+}
+.search-tab .tab-content .dropdown-menu {
+  padding: 0;
+  min-width: 20rem;
+  max-height: 300px;
+  overflow-y: auto;
+  transform: none !important;
+  top: 38px !important;
+  inset: auto !important;
+}
+.search-tab .form-check-input,
+.search-tab .form-check-label {
+  cursor: pointer;
+}
+.search-tab .form-check-input:checked {
+  background-color: #000;
+  border-color: #000;
+}
+.search-tab .form-check-input:focus {
+  box-shadow: none !important;
+}
+.search-tab .search-tab-filter a {
+  color: #000;
+}
+.search-tab .search-tab-filter a:hover {
+  text-decoration: none;
+  color: #ee7800;
+}
+.search-tab .search-tab-filter .divider::before {
+  content: "";
+  border: 0.5px solid #aaaaaa;
+}
+
+.designer-container h6 {
+  color: #000;
+}
+.designer-container img {
+  width: 100%;
+  height: 300px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.designer-container .item-card-person {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background-size: cover;
+  box-shadow: 2px 2px 10px -2px rgba(0, 0, 0, 0.15);
+}
+.designer-container .item-card-company,
+.designer-container h6 {
+  -webkit-box-orient: vertical;
+  font-size: 0.875rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-height: 1.25;
+  height: 1.09375rem;
+}
+.designer-container .ad-image {
+  width: 100%;
+  height: 295px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  image-rendering: -webkit-optimize-contrast;
+}
+
+.search-tab-itemResult img {
+  cursor: pointer;
+}
+
+.btn-box {
+  position: fixed;
+  right: 13px;
+  bottom: 170px;
+  z-index: 10;
+  font-size: 32px;
+  width: 50px;
+  height: 50px;
+  cursor: pointer;
+}
+@media (max-width: 767px) {
+  .btn-box {
+    right: 5px;
+    bottom: 85px;
+  }
+}
+.btn-box a {
+  color: #000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.btn-box button {
+  width: 46px;
+  height: 46px;
+  margin: 3px 0;
+  border: none;
+  border-radius: 5px;
+  box-shadow: 0px 2px 3px #ccc;
+  background: rgba(255, 255, 255, 0.9);
+}
+.btn-box button:hover {
+  transition: all 0.5s;
+  background: rgb(255, 255, 255);
+}
+.btn-box button:hover img {
+  filter: invert(50%) sepia(50%) saturate(4600%) hue-rotate(365deg) brightness(100%) contrast(100%);
+}
+.btn-box button img {
+  width: 20px;
+}
+.btn-box .btn-gotop img {
+  margin-top: -7px;
+}
+
+.fixed-bottom {
+  padding: 10px 0;
+  position: fixed !important;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background-color: white;
+  justify-content: space-evenly;
+  box-shadow: 0 8px 15px 2px rgba(0, 0, 0, 0.15);
+  display: none;
+}
+@media (max-width: 767px) {
+  .fixed-bottom {
+    display: flex;
+  }
+}
+.fixed-bottom div {
+  padding: 0 15px;
+}
+.fixed-bottom a {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.fixed-bottom a img {
+  width: 70px;
+  height: auto;
+  max-width: 100%;
+}
+.fixed-bottom a span {
+  margin: 5px 0;
+}
+
+@media (max-width: 767px) {
+  .designerlist-footer {
+    display: none;
+  }
+}
+
+@media (max-width: 767px) {
+  .designer-pagination {
+    margin: 0 70px 115px;
+  }
+}
+
+/* designers.html end */
+/* columns.html start */
+#columns .dropdown-menu li:hover .sub-menu {
+  visibility: visible;
+}
+
+/* columns.html end *//*# sourceMappingURL=list-style.css.map */

hhh_index/css/list-style.scss

@@ -0,0 +1,2139 @@
+body {
+  font-family: "Helvetica Neue";
+}
+
+.sec-00 {
+  background-color: rgb(202, 202, 202);
+  transition-property: height;
+  transition-duration: 300ms;
+
+  &__close {
+    position: absolute;
+    top: 0;
+    right: 20px;
+    width: 50px;
+    height: 30px;
+    background-color: hsla(0, 0%, 100%, 0.66);
+    border-radius: 0 0 50px 50px;
+    color: #888;
+    border: none;
+    outline: none;
+    font-size: 11px;
+    box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
+    line-height: 12px;
+    z-index: 3;
+  }
+
+  &.bannerClose {
+    height: 0;
+    overflow: hidden;
+    transition-property: height;
+    transition-duration: 300ms;
+  }
+
+  .container-fluid {
+    background-color: rgb(202, 202, 202);
+    // height: 295px;
+    // @media (max-width: 1850px) {
+    //     height: 260px;
+    // }
+    // @media (max-width: 1550px) {
+    //     height: 230px;
+    // }
+    // @media (max-width: 1100px) {
+    //     height: 200px;
+    // }
+  }
+
+  &__slider {
+    margin: 0 auto;
+    width: 100%;
+    height: 100%;
+    max-width: 1310px;
+    padding-top: 20px;
+    padding-bottom: 24px;
+
+    @media (max-width: 1850px) {
+      max-width: 1310px;
+    }
+
+    @media (max-width: 1550px) {
+      max-width: 1310px;
+    }
+
+    @media (max-width:576px) {
+      max-width: 100%;
+      height: auto;
+    }
+
+    .slide-item {
+      width: 100%;
+      height: 100%;
+      max-width: 1310px;
+      max-height: 300px;
+      -o-object-fit: contain;
+      object-fit: contain;
+      height: 300px;
+      cursor: pointer;
+
+      @media (max-width:576px) {
+        max-width: 100%;
+        height: auto;
+      }
+    }
+  }
+
+  .slick-next {
+    @media (max-width:576px) {
+      right: 25px;
+    }
+  }
+
+  .slick-prev {
+    z-index: 100;
+
+    @media (max-width:576px) {
+      left: 25px;
+    }
+  }
+
+  .slick-prev:before,
+  .slick-next:before {
+    display: none;
+  }
+}
+
+/* 設計師列表頁_navbar start*/
+
+.v-toolbar {
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+}
+
+.v-toolbar__content_nav_box {
+  justify-content: center;
+  height: 100%;
+}
+
+.layout {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: nowrap;
+  min-width: 0;
+}
+
+.v-toolbar__content {
+  position: relative;
+  align-items: center;
+  display: flex;
+
+  .logo {
+    position: absolute;
+    left: 10px;
+    top: 8px;
+    z-index: 200;
+  }
+}
+
+.shadow-none {
+  box-shadow: none;
+}
+
+.text-promote-color {
+  color: #ee7800 !important;
+}
+
+.navbar-main {
+  background: #fff;
+  z-index: 1000;
+}
+
+.dropdown {
+  position: relative;
+}
+
+#app_user {
+  .dropdown-toggle {
+    padding: 15px 0;
+  }
+
+  .dropdown:hover .dropdown-menu {
+    display: block;
+  }
+
+  .dropdown-menu {
+    position: absolute;
+    top: 62px;
+    left: 0;
+    right: 0;
+    text-align: center;
+
+    &:hover {
+      background-color: #eeeeee;
+    }
+  }
+}
+
+@media (min-width:991px) {
+  li.dropdown:hover>.dropdown-menu {
+    display: block;
+  }
+}
+
+// li.dropdown:hover>.dropdown-menu {
+//   display: block;
+//   @media (max-width:991px) {
+
+//   }
+// }
+
+// .dropdown-menu li:hover .sub-menu {
+//   visibility: visible;
+// }
+// .dropdown:hover .dropdown-menu {
+//   display: block;
+// }
+
+.nav-item {
+  position: relative;
+
+  .nav-link {
+    position: relative;
+    color: rgba(0, 0, 0, 0.87);
+    font-size: 1.17rem;
+    padding: 1.075rem 10px;
+
+    @media (max-width: 991px) {
+      padding: 0;
+    }
+  }
+
+  .dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1050;
+    float: left;
+    min-width: 10rem;
+    padding: 0.5rem 0;
+    margin: 0.125rem 0 0;
+    font-size: 1rem;
+    color: #212529;
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 0.25rem;
+    transition: 0.3s;
+  }
+}
+
+.nav-item .thdmenu-block {
+  display: none;
+  position: absolute;
+  left: 99.5%;
+  top: -1px;
+}
+
+.dropdown-menu {
+  // position: relative;
+  min-height: 42px;
+  margin-left: 10px;
+}
+
+.dropdown-toggle::after {
+  display: none !important;
+}
+
+.thdmenu-block {
+  position: absolute;
+  left: 99.5% !important;
+  top: -1px !important;
+}
+
+.dropdown-item {
+  cursor: pointer;
+}
+
+.v-toolbar .navbar-nav>li:hover>.dropdown-menu {
+  display: block;
+}
+
+.v-toolbar .dropdown-menu>li:hover>.thdmenu-block {
+  // color:#0000;
+  display: block;
+}
+
+.navbar .dropdown-menu.dropdown-level-width {
+  min-width: 13.5rem;
+}
+
+.navbar .navbar-nav .dropdown-item:hover {
+  background: transparent !important;
+}
+
+.dropdown-sub:hover .submenu,
+.dropdown-sub:hover>div .thdmenu-block>li:hover>.dropdown-item,
+.dropdown-sub:hover i {
+  color: #ee7800;
+}
+
+.navbar .dropdown-menu {
+  top: 98%;
+}
+
+.navbar-nav .dropdown-menu {
+  // position: static;
+  float: none;
+}
+
+.navbar-expand-lg .navbar-nav .dropdown-menu {
+  position: absolute;
+  top: 72px;
+
+  @media (max-width: 1200px) {
+    top: 69px;
+  }
+
+  @media (max-width: 991px) {
+    top: 0;
+    position: initial;
+  }
+
+  // &>li:hover>.thdmenu-block {
+  //   display: block;
+  // }
+}
+
+.dropdown-menu li {
+  position: relative;
+}
+
+.dropdown-menu .thdmenu-block {
+  display: none;
+  position: absolute;
+  left: 100%;
+  top: -7px;
+}
+
+@media (min-width:991px) {
+  .dropdown-menu>li:hover>.thdmenu-block {
+    display: block;
+  }
+}
+
+// .dropdown-menu>li:hover>.thdmenu-block {
+//   display: block;
+// }
+
+.thdmenu-block>li:hover>.dropdown-item {
+  color: #ee7800;
+}
+
+.dropdown-sub {
+  a {
+    font-size: 16px;
+  }
+
+  p {
+    font-size: 16px;
+  }
+}
+
+.dropdown-sub {
+  .dropdown-menu {
+    // top: 45px !important; 
+    // left: 185px;
+    top: -10px !important;
+    left: 213px;
+
+    &>li:hover>a {
+      color: #ee7800;
+    }
+  }
+
+  .submenu {
+    color: #34404b;
+  }
+
+  @media (min-width: 991px) {
+    &:hover .dropdown-menu {
+      display: block;
+    }
+  }
+
+  @media (max-width: 991px) {
+    // .nav-link {
+    //   padding-left: 30px;
+    // }
+
+    .submenu {
+      // padding-left: 50px;
+      padding: 10px 20px;
+    }
+  }
+
+
+  .dropdown-menu {
+    padding-left: 10px;
+
+    @media (max-width: 991px) {
+      padding-left: 30px;
+    }
+  }
+
+}
+
+.dropdown {
+  .list {
+    @media (max-width: 991px) {
+      .dropdown-sub {
+        & {
+          padding-left: 30px;
+        }
+
+        .nav-link {
+          padding-left: 30px;
+        }
+
+        // padding-left: 30px;
+        .submenu {
+          padding: 8px 20px;
+        }
+      }
+
+      .hover-block {
+        padding: 0 !important;
+      }
+    }
+  }
+}
+
+// .hover-block:hover .dropdown-menu {
+//   display: block;
+// }
+
+// .hover-block > li:hover > a {
+//   color: #ee7800;
+// }
+
+.hover-block {
+  .nav-link {
+    border-bottom: none !important;
+
+    &:hover {
+
+      a,
+      p {
+        color: var(--sub-color);
+      }
+    }
+  }
+
+}
+
+.sticky-top {
+  position: sticky;
+  top: 0;
+  z-index: 1020;
+}
+
+.toolbar .member-center {
+  top: 5px;
+  position: absolute;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  z-index: 99;
+}
+
+.v-btn {
+  height: 50px;
+  transition: 0.3s;
+  border-radius: 2px;
+}
+
+.v-btn__content {
+  align-items: center;
+
+  display: flex;
+  flex: 1 0 auto;
+  justify-content: center;
+  margin: 0 auto;
+  position: relative;
+  transition: 0.3scubic-bezier (0.25, 0.8, 0.5, 1);
+  white-space: nowrap;
+  width: inherit;
+  padding: 5px 8px;
+
+  a {
+    font-size: 14px;
+    font-weight: normal;
+    cursor: pointer;
+    color: #000;
+    font-family: Helvetica, Noto Sans TC, Roboto, Arial, sans-serif !important;
+  }
+}
+
+.v-btn:hover {
+  position: relative;
+}
+
+.v-btn:hover {
+  background-color: #e5e6e5;
+}
+
+.navbar-login {
+  padding-right: 8px !important;
+}
+
+.navbar-mb {
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+    0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  padding-top: 5px;
+  padding-bottom: 5px;
+  background-color: white !important;
+  z-index: 99;
+
+  &-toggler {
+    padding-left: 0;
+    border-color: transparent !important;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  &-toggler-icon {
+    display: flex;
+    justify-items: center;
+
+    i {
+      font-size: 25px;
+      line-height: 30px;
+      display: inline-block;
+    }
+  }
+
+  &-search {
+    padding-right: 2px;
+  }
+
+  &-brand {
+    font-size: 1.5rem;
+  }
+}
+
+.navbar-main.sticky {
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+.navbar-main.sticky+.sec-01 {
+  padding-top: 58px;
+}
+
+.sticky {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 3000;
+}
+
+.sticky+.sec-01 {
+  padding-top: 58px;
+}
+
+.sec-menu {
+  display: none;
+  z-index: 105;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  font-size: 14px;
+
+  &-block {
+    padding-top: 61px;
+    margin: 0;
+    // display: none;
+    // transform: translateX(-500px);
+    transition: transform 0.5s;
+    position: fixed;
+    top: 0;
+    left: -100%;
+    right: 0;
+    height: 100%;
+    overflow-y: scroll;
+    max-width: 100%;
+    background-color: white;
+    transition: all 0.3s;
+    // &.slidein {
+    //     -webkit-animation: slidein 0.3s;
+    //     animation: slidein 0.3s;
+    // }
+    // &.slideout {
+    //     -webkit-animation: slideout 0.3s;
+    //     animation: slideout 0.3s;
+    // }
+  }
+
+  &-list {
+    background: white;
+    margin-bottom: 0;
+
+    .navbar-nav {
+      padding: 0 2rem;
+      width: 100%;
+
+      .dropdown-menu {
+        border: none;
+        padding: 0;
+        height: 0;
+        opacity: 0;
+        transition: all 1s;
+
+        &.show {
+          height: fit-content;
+          opacity: 1;
+        }
+
+        .dropdown-item {
+          padding-left: 3rem;
+
+          &:active,
+          &.active,
+          &:focus {
+            background-color: white;
+          }
+
+          &:hover {
+            background-color: white;
+          }
+        }
+
+        .sub-menu {
+          .dropdown-item {
+            padding-left: 6rem;
+          }
+        }
+      }
+    }
+
+    .nav-item {
+      font-size: 17px;
+      display: block;
+      width: 100%;
+    }
+
+    .nav-link {
+      padding-top: 11px;
+      padding-bottom: 8px;
+      color: #707070;
+      position: relative;
+      -webkit-appearance: none !important;
+      appearance: none !important;
+      border-radius: 0;
+
+      .link_div {
+        width: 25px;
+      }
+
+      a {
+        color: #707070;
+        text-decoration: none;
+      }
+
+      &.show {
+        i {
+          transform: rotate(-180deg);
+        }
+      }
+
+      .expand {
+        position: absolute;
+        right: 10px;
+
+        i {
+          font-size: 11px;
+          color: #d3d3d3;
+          transition: all 0.5s;
+        }
+      }
+
+      &.text-main {
+        color: #ee7800;
+      }
+    }
+
+    .sub-link {
+      .expand {
+        position: absolute;
+        right: 20px;
+        top: 8px;
+        width: 1.5rem;
+        text-align: center;
+      }
+    }
+
+    .sub-menu {
+      display: none;
+    }
+
+    .sub-menu.show {
+      display: block;
+    }
+
+    hr {
+      margin: 3px 0;
+      background-color: rgb(187, 187, 187);
+    }
+  }
+
+  &-follows {
+    padding: 2rem 2.5rem;
+    background-color: #e6e6e6ef;
+    margin-top: -9px;
+
+    &-title {
+      color: #797979;
+      font-size: 14px;
+    }
+  }
+
+  &-links {
+    margin-bottom: 2.5rem;
+
+    a {
+      color: #797979;
+      text-decoration: none;
+      display: inline-block;
+      padding: 1px 0;
+      border-bottom: 1px solid #acacac;
+      margin: 0 0.6rem;
+      flex-wrap: nowrap;
+
+      @media (max-width: 385px) {
+        margin: 0 0.4rem;
+      }
+    }
+  }
+
+  .follows-fp {
+    color: #797979;
+    text-decoration: none;
+    font-weight: 400;
+    display: block;
+    padding-left: 0.5rem;
+
+    &:nth-of-type(1) {
+      margin-bottom: 0.6rem;
+    }
+  }
+
+  .copyright {
+    color: #797979;
+    font-size: 13px;
+  }
+}
+
+// @keyframes slidein {
+//     100% {
+//         left: 0;
+//     }
+// }
+
+// @keyframes slideout {
+//     100% {
+//         left: -100%;
+//     }
+// }
+
+.navbar-light .navbar-brand {
+  cursor: pointer;
+}
+
+.designers-nav {
+  li {
+    .nav-link {
+      font-size: 16px;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+
+  .text-phone {
+    color: #ea068c;
+  }
+
+  .nav-item .nav-link:after {
+    border: none !important;
+  }
+}
+
+/* 設計師列表頁_navbar end */
+
+#navbarSupportedContent {
+  img {
+    width: 20px;
+  }
+}
+
+.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 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) {
+      font-size: 0.9rem;
+    }
+
+    .expand {
+      transition: all .3s;
+
+      i {
+        color: #D3D3D3;
+      }
+    }
+
+    .rotate {
+      transform: rotate(180deg);
+    }
+  }
+
+
+  .navbar-nav {
+    @media (max-width: 991px) {
+      &>li {
+        padding: 15px 0;
+      }
+
+      li {
+        border-bottom: 1px solid #F4F4F4;
+      }
+
+      .dropdown-menu {
+        border: none;
+        margin: 15px 0 -15px;
+
+        .dropdown-sub {
+          &:first-child {
+            border-top: 1px solid #F4F4F4;
+          }
+
+          &:last-child {
+            border-bottom: none;
+          }
+        }
+      }
+
+      .dropdown-sub {
+        .dropdown-menu {
+          margin: 0;
+
+          li {
+            padding: 8px 50px;
+
+            &:first-child {
+              border-top: 1px solid #F4F4F4;
+            }
+
+            &:last-child {
+              border-bottom: none;
+            }
+          }
+        }
+      }
+    }
+
+    .nav-item {
+      margin: 0 0.5rem;
+
+      @media (max-width: 1200px) {
+        margin: 0 0.25rem;
+      }
+
+      .dropbox {
+        visibility: hidden;
+        opacity: 0;
+        transition: all 0.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: 0.5rem;
+
+          &.first {
+            font-size: 1.1rem;
+            font-weight: 600;
+
+            .dropbox-link {
+              color: black;
+            }
+          }
+        }
+
+        &-link {
+          text-decoration: none;
+          color: rgb(146, 146, 146);
+          font-size: 0.85rem;
+
+          &:hover {
+            color: #ee7800;
+          }
+
+          &.dropbox-btn {
+            border: 1px solid rgb(146, 146, 146);
+            padding: 0.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 {
+        // padding-top: 20px;
+        position: relative;
+        font-size: 19px;
+        cursor: pointer;
+        color: #34404b;
+        border-bottom: 4px solid transparent;
+
+        @media (max-width: 1200px) {
+          font-size: 17px;
+        }
+
+        @media (max-width: 991px) {
+          border-bottom: none;
+        }
+
+        a {
+          transition: all .2s;
+        }
+
+        &:hover {
+          border-bottom: 4px solid #ee7800;
+
+          @media (max-width: 991px) {
+            color: #ee7800;
+            border-bottom: none;
+
+            a {
+              color: #ee7800;
+            }
+          }
+        }
+
+        span {
+          display: block;
+          // padding-top: .25rem;
+        }
+
+        .search-btn {
+          border: none;
+          background: transparent;
+          padding-top: 4px;
+
+          @media (max-width: 1200px) {
+            padding-top: 3px;
+          }
+
+          img {
+            padding-bottom: 4px;
+
+            @media (max-width: 1200px) {
+              padding-bottom: 3px;
+            }
+
+            @media (max-width: 1100px) {
+              padding-bottom: 2px;
+            }
+          }
+        }
+      }
+
+      .search-btn {
+        border: none;
+        background: transparent;
+      }
+
+      // .nav-link:after {
+      //   position: absolute;
+      //   content: " ";
+      //   width: 100%;
+      //   height: 100%;
+      //   top: 0;
+      //   right: 0;
+      //   border-bottom: 4px solid #ee7800;
+      //   opacity: 0;
+      //   transform: opacity 1s;
+      // }
+      &:hover {
+
+        // .nav-link:after {
+        //   opacity: 1;
+        // }
+        >.dropbox {
+          visibility: visible;
+          opacity: 1;
+        }
+      }
+    }
+
+    .nav-item.lg {
+      .container {
+        max-width: 1200px;
+        width: 90%;
+      }
+
+      .dropbox-link {
+        text-decoration: none;
+        color: rgb(146, 146, 146);
+        font-size: 0.7rem;
+
+        &:hover {
+          color: #ee7800;
+        }
+      }
+
+      .dropbox-item {
+        margin-bottom: 0.1rem;
+
+        &.first {
+          .dropbox-link {
+            font-size: 0.85rem;
+          }
+        }
+      }
+    }
+  }
+
+  &-search {
+    .container {
+      max-width: 900px;
+      width: 70%;
+
+      @media (max-width: 1100px) {
+        width: 90%;
+      }
+    }
+
+    .dropbox {
+      visibility: hidden;
+      opacity: 0;
+      transition: all 0.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: 0.2rem 1rem;
+        padding-bottom: 1rem;
+      }
+
+      &__hots {
+        &__title {
+          font-size: 1rem;
+          color: rgb(107, 107, 107);
+        }
+
+        &__link {
+          font-size: 0.9rem;
+          color: rgb(146, 146, 146);
+          text-decoration: none;
+          cursor: pointer;
+          margin: 0 0.2rem;
+        }
+      }
+
+      &__searchBar {
+        &__input {
+          width: 100%;
+          outline: none;
+          border: 2px solid #ee7800;
+          border-radius: 5rem;
+          padding: 0.3rem 1.2rem;
+          font-size: 0.9rem;
+        }
+
+        &__submit {
+          outline: none;
+          border: none;
+          font-size: 0.9rem;
+          background-color: transparent;
+          color: #ee7800;
+          margin-left: -1rem;
+          transform: translateX(-100%);
+          padding: 0 0.6rem;
+        }
+      }
+
+      &__tab {
+        .nav-item {
+          margin: 0 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: 0.5rem;
+
+        .col {
+          margin: 0 0.6rem;
+        }
+
+        .select {
+          font-size: 1rem;
+          padding: 0.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: 0.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: 0.6rem;
+        }
+
+        .home-btn {
+          border: none;
+          outline: none;
+          background-color: #ee7800;
+          border-radius: 3px;
+          color: white;
+          font-size: 1rem;
+          padding: 0.6rem;
+        }
+      }
+    }
+  }
+
+  #search-btn {
+    font-size: 20px;
+    border: none;
+    background: transparent;
+  }
+}
+
+.navbar-search .dropbox__tab .nav-item-link.active .nav-item-link::after {
+  opacity: 1;
+}
+
+.navbar-main.sticky {
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+.navbar-main.sticky+.sec-02 {
+  padding-top: 53.5px;
+}
+
+.shadow-item {
+  position: absolute;
+  display: none;
+  height: 3px;
+  top: 51px;
+  width: 100vw;
+  right: 0;
+  left: 0;
+  margin: auto;
+  box-shadow: 0px 2px 3px #00000029;
+  border-bottom: 1px solid #ccc;
+
+  @media (max-width: 991px) {
+    display: block;
+  }
+}
+
+.sec-02 {
+  &__slider {
+    width: 100%;
+    height: 100%;
+
+    .slide-item {
+      width: 100%;
+      height: 74vh;
+      background-position: center center;
+      background-size: cover;
+      background-repeat: no-repeat;
+      cursor: pointer;
+    }
+  }
+
+  .slick-prev:before,
+  .slick-next:before {
+    display: none;
+  }
+
+  .slick-prev {
+    left: 15px;
+    z-index: 3;
+  }
+
+  .slick-next {
+    right: 15px;
+  }
+}
+
+a {
+  text-decoration: none;
+}
+
+.text-hhh {
+  color: #ee7800;
+}
+
+.content {
+  background-color: #fcfcfc;
+  padding: 1rem 30px 0.5rem;
+
+  .infoCard {
+    color: #727679;
+    text-align: center;
+    padding: 1rem;
+    background-color: rgba(244, 244, 244, 0.8);
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+    transform: translateY(-150px);
+
+    &__seo {
+      font-size: 0.9rem;
+      text-align: center;
+      padding: 1rem;
+      display: block;
+      line-height: 1.2;
+    }
+
+    &__approve {
+      color: #ff0000;
+    }
+
+    &__avatar {
+      width: 200px;
+      height: 200px;
+      border: 3px solid #fff;
+      border-radius: 50%;
+      background-size: cover;
+      background-repeat: no-repeat;
+    }
+
+    &__detail {
+      aside {
+        line-height: 2;
+        font-size: 0.9rem;
+      }
+
+      &__l {
+        flex-basis: 30%;
+        display: flex;
+        justify-content: flex-end;
+        flex-grow: 0;
+        max-width: 30%;
+
+        &.title {
+          color: #aaaaaa;
+          font-size: 1.125rem;
+          font-weight: 400;
+          transform: translateX(-15px);
+        }
+      }
+
+      &__r {
+        flex-basis: 70%;
+        text-align: start;
+        flex-grow: 0;
+        max-width: 70%;
+        word-break: break-all;
+
+        a {
+          color: #727679;
+
+          &:hover {
+            color: #ee7800;
+          }
+        }
+      }
+    }
+
+    .scMedia {
+      display: flex;
+      padding: 1rem 0;
+      width: 100%;
+      margin-left: auto;
+      margin-right: auto;
+      justify-content: space-around;
+
+      a {
+        width: 16%;
+
+        img {
+          width: 100%;
+        }
+      }
+
+      span {
+        width: 16%;
+        cursor: pointer;
+
+        img {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+.infoContent {
+  a {
+    color: #727679;
+    text-decoration: none;
+    font-size: 0.9rem;
+
+    &.active {
+      color: #ee7800;
+    }
+  }
+
+  .nav-item {
+    margin: 0 0.8rem;
+    width: auto;
+
+    &-link {
+      display: block;
+      padding: 0.5rem 2.5rem;
+      text-decoration: none;
+      background-color: transparent;
+      font-size: 0.9rem;
+      color: #727679;
+      transition: all 0.3s;
+      -webkit-appearance: none !important;
+
+      @media (max-width: 1200px) {
+        padding: 0.5rem 0.8rem;
+      }
+
+      &:hover {
+        color: #ee7800;
+      }
+
+      &.active {
+        color: #ee7800;
+        border-bottom: 2px solid #ee7800;
+      }
+    }
+  }
+
+  .likeSee {
+    margin-top: 0.8rem;
+
+    @media (max-width: 1200px) {
+      width: 12%;
+      position: absolute;
+      right: -1.5rem;
+      bottom: -1.5rem;
+    }
+
+    span {
+      color: #727679;
+      font-size: 0.9rem;
+      cursor: pointer;
+
+      &:hover {
+        color: #ee7800;
+      }
+    }
+
+    &__divider {
+      height: 12px;
+      display: inline-block;
+      border: 0.5px solid #9d9d9d;
+    }
+  }
+
+  .card {
+    box-shadow: 0 1px 10px #eee;
+    margin: 0 0 1.5rem;
+    border: none;
+    overflow: hidden;
+
+    &:hover .card__bgImg {
+      transform: scale(1.1);
+    }
+
+    &__bgImg {
+      height: 293px;
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      -webkit-box-align: center;
+      align-items: center;
+      -webkit-box-pack: center;
+      transition: all 0.4s;
+    }
+
+    &-body {
+      padding: 0.5rem 1rem;
+    }
+
+    &__title {
+      font-size: 1.125rem;
+      -webkit-box-orient: vertical;
+      box-orient: vertical;
+      -webkit-line-clamp: 2;
+      height: calc(18px * 2 * 1.5);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      font-weight: bold;
+      margin: 0.5rem 0;
+      color: #727679;
+    }
+
+    &__tag {
+      margin: 0 0.2rem 0 0;
+
+      &:hover {
+        color: #ee7800;
+      }
+    }
+  }
+
+  .company {
+    &__block {
+      margin: 0 0 2rem;
+    }
+
+    &__title {
+      color: #aaaaaa;
+      font-size: 2rem;
+      font-weight: bold;
+    }
+
+    &__text {
+      color: #43484c;
+    }
+  }
+}
+
+.nav-collapse-fixed {
+  position: fixed;
+  top: 52px;
+  z-index: -1;
+  width: 100%;
+
+  @media (max-width: 1200px) {
+    width: auto;
+  }
+
+  opacity: 0;
+  transition: opacity 0.5s;
+
+  &.sticky {
+    display: block;
+    opacity: 1;
+    z-index: 20;
+  }
+
+  .nav-collpase {
+    padding: 1rem 0;
+    background-color: #fcfcfc;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  }
+}
+
+.navbar-main.sticky+.hero {
+  padding-top: 53px;
+}
+
+.page-link {
+  color: #727679;
+
+  &:hover {
+    color: #fff;
+    background-color: #ee7800;
+    border-color: #ee7800;
+  }
+}
+
+.page-link:focus {
+  color: #fff;
+  background-color: #ee7800;
+  border-color: #ee7800;
+  box-shadow: none;
+}
+
+.page-active {
+  color: #fff;
+  background-color: #ee7800;
+  border-color: #ee7800;
+}
+
+.fixed-btn {
+  position: fixed;
+  right: 15px;
+  bottom: 2rem;
+
+  .btn-gotop,
+  .btn-login,
+  .btn-favor {
+    cursor: pointer;
+    padding: 1.2rem 0.8rem;
+    background-color: rgba(255, 255, 255, 0.897);
+    display: flex;
+    align-items: center;
+    box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+      0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    -moz-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+      0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  }
+}
+
+.footer__block-socials {
+  padding-left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  @media (max-width: 1100px) {
+    & img {
+      width: 30px;
+    }
+  }
+
+  @media (max-width: 575px) {
+    justify-content: center;
+
+    & li {
+      margin: 5px;
+    }
+  }
+}
+
+.like {
+  display: none;
+}
+
+// #pills-intro {
+//     .work__row  {
+//         .col-md-4:nth-of-type(3n-1) {
+//             margin-top: .5rem;
+//         }
+//         .col-md-4:nth-of-type(3n) {
+//             margin-top: -1rem;
+//         }
+//         .col-md-4:nth-of-type(3n+1) {
+//             margin-top: -1rem;
+//         }
+//         .col-md-4:nth-of-type(2) {
+//             margin-top: .5rem;
+//         }
+//     }
+// }
+
+.emodal {
+  &-title {
+    color: #ee7800;
+    margin: 0 auto;
+    font-size: 18px;
+  }
+
+  .form-control:focus {
+    border-color: #ffb76f;
+    box-shadow: none;
+  }
+
+  .btn-plus {
+    color: #aaa;
+    border-color: #aaa;
+  }
+
+  .btn-send {
+    background-color: #ee7800;
+    color: white;
+    width: 30%;
+    border: none;
+    padding: 0.875rem 1rem;
+    border-radius: 2px;
+  }
+
+  .btn-dismiss {
+    width: 30%;
+    border: none;
+    padding: 0.875rem 1rem;
+    background-color: #d1d2d3;
+    border-radius: 2px;
+    color: #fff;
+  }
+}
+
+#putEmail_hidden {
+  border: 1px solid;
+  border-radius: 28px;
+  color: #ee7800 !important;
+
+  .fm-email-btn {
+    padding: 2px 5px 2px 5px;
+  }
+}
+
+/* designers.html start */
+
+.text-primary {
+  color: #ee7800 !important;
+}
+
+.border-primary {
+  border-color: #ee7800 !important;
+}
+
+.container-searchbar {
+  max-width: 990px;
+}
+
+.list-head {
+  font-weight: bold;
+  font-size: 1.5rem;
+  font-family: "Microsoft JhengHei", Helvetica, Noto Sans TC, Roboto, Arial, sans-serif;
+}
+
+.search-bar-keyword {
+  a {
+    color: #ee7800;
+    text-decoration: none;
+    background-color: transparent;
+  }
+}
+
+.search-bar {
+  .search-bar-aside {
+    position: fixed;
+    top: 490px;
+    z-index: 999;
+    transform: translateX(0%);
+  }
+
+  .search-bar-aside-text {
+    position: absolute;
+    top: -24px;
+    color: #444;
+    background: rgba(255, 255, 255, 0.75);
+    padding: 0 5px;
+    width: 100%;
+    text-align: right;
+    cursor: pointer;
+  }
+
+  .search-bar-block {
+    padding: 0 8px 8px 0;
+    transform: translateX(0%);
+    transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
+    background: rgba(255, 255, 255, 0.75);
+  }
+
+  .search-bar-aside-arrow {
+    transition: transform 300ms ease-in-out;
+  }
+
+  .is-hidden {
+    transform: translateX(-90%);
+  }
+
+  .is-rotate {
+    transform: rotate(180deg);
+  }
+}
+
+.input-group {
+  height: calc(1.5em + 2rem + 2px);
+
+  .input-group-text,
+  .keywords {
+    font-weight: bold;
+    font-size: 0.875rem !important;
+  }
+
+  .input-group-text {
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    padding: 0.5rem 2rem !important;
+    margin-bottom: 0;
+    color: #fff;
+    text-align: center;
+    white-space: nowrap;
+    background-color: #ee7800;
+    border: 2px solid #ee7800;
+    line-height: 1.5;
+    border-radius: 0.3rem;
+    cursor: pointer;
+  }
+
+  .keywords {
+    border: 2px solid;
+    padding: 0 2rem;
+  }
+}
+
+.search-tab {
+  .bg-main {
+    background-color: #fafafa;
+  }
+
+  .dropdown-wrapper {
+    display: flex;
+  }
+
+  small {
+    font-size: 16px;
+
+    span {
+      font-size: 20px;
+      font-weight: bold;
+    }
+  }
+
+  .btn-original {
+    background-color: #fff;
+    font-weight: bold;
+    border-color: #dbdbdb;
+  }
+
+  .btn-original:focus {
+    box-shadow: none;
+    color: #ee7800;
+    border-color: #ee7800;
+  }
+
+  .tab-content {
+    .dropdown-menu {
+      padding: 0;
+      min-width: 20rem;
+      max-height: 300px;
+      overflow-y: auto;
+      transform: none !important;
+      top: 38px !important;
+      inset: auto !important;
+    }
+  }
+
+  .form-check-input,
+  .form-check-label {
+    cursor: pointer;
+  }
+
+  .form-check-input:checked {
+    background-color: #000;
+    border-color: #000;
+  }
+
+  .form-check-input:focus {
+    box-shadow: none !important;
+  }
+
+  .search-tab-filter {
+    a {
+      color: #000;
+
+      &:hover {
+        text-decoration: none;
+        color: #ee7800;
+      }
+    }
+
+    .divider::before {
+      content: "";
+      border: 0.5px solid #aaaaaa;
+    }
+  }
+}
+
+.designer-container {
+  h6 {
+    color: #000;
+  }
+
+  img {
+    width: 100%;
+    height: 300px;
+    object-fit: cover;
+  }
+
+  .item-card-person {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background-size: cover;
+    box-shadow: 2px 2px 10px -2px rgba(0, 0, 0, 0.15);
+  }
+
+  .item-card-company,
+  h6 {
+    -webkit-box-orient: vertical;
+    font-size: 0.875rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    line-height: 1.25;
+    height: 1.09375rem;
+  }
+
+  .ad-image {
+    width: 100%;
+    height: 295px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    image-rendering: -webkit-optimize-contrast;
+  }
+}
+
+.search-tab-itemResult img {
+  cursor: pointer;
+}
+
+.btn-box {
+  position: fixed;
+  right: 13px;
+  bottom: 170px;
+  // bottom: 225px;
+  z-index: 10;
+  font-size: 32px;
+  width: 50px;
+  height: 50px;
+  cursor: pointer;
+
+  @media (max-width: 767px) {
+    right: 5px;
+    bottom: 85px;
+  }
+
+  a {
+    color: #000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  button {
+    width: 46px;
+    height: 46px;
+    margin: 3px 0;
+    border: none;
+    border-radius: 5px;
+    box-shadow: 0px 2px 3px #ccc;
+    background: rgba(255, 255, 255, 0.9);
+
+    &:hover {
+      transition: all .5s;
+      background: rgb(255, 255, 255);
+    }
+
+    &:hover img {
+      filter: invert(50%) sepia(50%) saturate(4600%) hue-rotate(365deg) brightness(100%) contrast(100%);
+    }
+
+    img {
+      width: 20px;
+    }
+  }
+
+  .btn-gotop {
+    img {
+      margin-top: -7px;
+    }
+  }
+
+  // button {
+  //   width: 50px;
+  //   height: 50px;
+  //   border: none;
+  //   &:hover {
+  //     .top_img {
+  //       box-shadow: 1px 3px 11px -3px rgba(0, 0, 0, 0.35);
+  //     }
+  //   }
+  //   .top_img {
+  //     width: 50px;
+  //     height: 50px;
+  //     display: block;
+  //     background-size: cover;
+  //     background-image: url("https://hhh.com.tw/assets/images/section/icon/new-tool-icon/top1.svg");
+  //   }
+  // }
+  // .note,
+  // .user,
+  // .cart,
+  // .top_img {
+  //   background: #fff;
+  //   box-shadow: 1px 3px 11px -3px rgba(0, 0, 0, 0.55);
+  //   &:hover {
+  //     box-shadow: 1px 3px 11px -3px rgba(0, 0, 0, 0.35);
+  //   }
+  // }
+  // .note {
+  //   margin-bottom: 10px;
+  //   img {
+  //     width: 22px;
+  //     height: 22px;
+  //     margin-left: 5px;
+  //   }
+  // }
+  // .user {
+  //   margin-bottom: 10px;
+  //   img {
+  //     width: 20px;
+  //     height: 20px;
+  //   }
+  // }
+  // .cart {
+  //   img {
+  //     width: 25px;
+  //     height: 25px;
+  //   }
+  // }
+}
+
+.fixed-bottom {
+  padding: 10px 0;
+  position: fixed !important;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background-color: white;
+  justify-content: space-evenly;
+  box-shadow: 0 8px 15px 2px rgba(0, 0, 0, 0.15);
+  display: none;
+
+  @media (max-width: 767px) {
+    display: flex;
+  }
+
+  div {
+    padding: 0 15px;
+  }
+
+  a {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    img {
+      width: 70px;
+      height: auto;
+      max-width: 100%;
+    }
+
+    span {
+      margin: 5px 0;
+    }
+  }
+}
+
+.designerlist-footer {
+  @media (max-width: 767px) {
+    display: none;
+  }
+}
+
+.designer-pagination {
+  @media (max-width: 767px) {
+    margin: 0 70px 115px;
+  }
+}
+
+/* designers.html end */
+
+/* columns.html start */
+
+#columns {
+  .dropdown-menu li:hover .sub-menu {
+    visibility: visible;
+  }
+
+  // .dropdown:hover .dropdown-menu {
+  //   display: block;
+  // }
+
+  // .dropdown-menu>li:hover>.thdmenu-block {
+  //   display: block;
+  // }
+}
+
+/* columns.html end */

hhh_index/css/reset.css

@@ -0,0 +1,135 @@
+/* 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;
+}

hhh_index/css/slick-theme.css

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

hhh_index/css/slick.css

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

hhh_index/css/style.css

@@ -0,0 +1,3365 @@
+@charset "UTF-8";
+:root {
+  --main-color: #34404b;
+  --sub-color: #ee751b;
+}
+
+body {
+  font-family: "Noto Sans TC", sans-serif;
+}
+
+.scrollable {
+  overflow-x: hidden;
+}
+
+.unscrollable {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.loading-item {
+  background: #fff;
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  z-index: 1000;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loading-hide {
+  animation-name: fadeOut;
+  animation-duration: 1s;
+  opacity: 0;
+  z-index: -1000;
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.sec-00 {
+  background-color: rgb(202, 202, 202);
+  transition-property: height;
+  transition-duration: 300ms;
+}
+.sec-00 .slider-content {
+  padding: 0.75rem 0;
+}
+@media (max-width: 991px) {
+  .sec-00 .slider-content {
+    padding: 0;
+  }
+}
+.sec-00__close {
+  position: absolute;
+  top: 0;
+  right: 20px;
+  width: 50px;
+  height: 30px;
+  background-color: hsla(0, 0%, 100%, 0.66);
+  border-radius: 0 0 50px 50px;
+  color: #888;
+  border: none;
+  outline: none;
+  font-size: 11px;
+  box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
+  line-height: 12px;
+  z-index: 3;
+}
+.sec-00.bannerClose {
+  height: 0;
+  overflow: hidden;
+  transition-property: height;
+  transition-duration: 300ms;
+}
+.sec-00 .container-fluid {
+  background-color: rgb(202, 202, 202);
+}
+.sec-00__slider {
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  max-width: 1310px;
+  padding-top: 20px;
+  padding-bottom: 24px;
+}
+@media (max-width: 1850px) {
+  .sec-00__slider {
+    max-width: 1310px;
+  }
+}
+@media (max-width: 1550px) {
+  .sec-00__slider {
+    max-width: 1310px;
+  }
+}
+@media (max-width: 576px) {
+  .sec-00__slider {
+    max-width: 100%;
+    height: auto;
+  }
+}
+.sec-00__slider .slide-item {
+  width: 100%;
+  height: 100%;
+  max-width: 1310px;
+  max-height: 300px;
+  -o-object-fit: contain;
+  object-fit: contain;
+  height: 300px;
+  cursor: pointer;
+}
+@media (max-width: 576px) {
+  .sec-00__slider .slide-item {
+    max-width: 100%;
+    height: auto;
+  }
+}
+@media (max-width: 576px) {
+  .sec-00 .slick-next {
+    right: 25px;
+  }
+}
+.sec-00 .slick-prev {
+  z-index: 100;
+}
+@media (max-width: 576px) {
+  .sec-00 .slick-prev {
+    left: 25px;
+  }
+}
+.sec-00 .slick-prev:before,
+.sec-00 .slick-next:before {
+  display: none;
+}
+.sec-00-bulletList {
+  position: absolute;
+  bottom: 10px;
+  left: calc(50% - 650px);
+  width: 1300px;
+  box-sizing: border-box;
+  display: flex;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+@media (max-width: 576px) {
+  .sec-00-bulletList {
+    width: 100%;
+    left: 0px;
+  }
+}
+.sec-00-bullet {
+  position: relative;
+  width: 100%;
+  height: 3px;
+  background-color: rgba(0, 0, 0, 0.1);
+  flex: 1 1 auto;
+  opacity: 1;
+}
+.sec-00-bullet::after {
+  content: "";
+  background: #ee7800;
+  position: absolute;
+  width: 0;
+  height: 100%;
+  left: 0;
+  top: 0;
+  border-radius: 2px;
+}
+.sec-00 .bullet-active::after {
+  width: 0;
+  animation-name: progress;
+  animation-duration: 4s;
+  animation-timing-function: linear;
+}
+
+@keyframes progress {
+  0% {
+    width: 0%;
+  }
+  25% {
+    width: 25%;
+  }
+  50% {
+    width: 50%;
+  }
+  75% {
+    width: 75%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@keyframes slidein {
+  100% {
+    height: 0px;
+  }
+}
+.navbar-main.sticky + .sec-02 {
+  padding-top: 53.5px;
+}
+
+.sec-02__slider {
+  width: 100%;
+  height: 100%;
+}
+.sec-02__slider .slide-item {
+  width: 100%;
+  height: 74vh;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+.sec-02 .slick-prev:before,
+.sec-02 .slick-next:before {
+  display: none;
+}
+.sec-02 .slick-prev {
+  left: 15px;
+  z-index: 3;
+}
+.sec-02 .slick-next {
+  right: 15px;
+}
+
+.sec-04 {
+  background-color: #f4f4f4;
+  padding: 4rem 1rem;
+}
+.sec-04 .container {
+  max-width: 950px;
+  width: 70%;
+}
+@media (max-width: 1100px) {
+  .sec-04 .container {
+    width: 90%;
+  }
+}
+.sec-04 .card {
+  box-shadow: 1px 2px 8px 1px rgb(214, 214, 214);
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.6s;
+}
+.sec-04 .card-title {
+  font-size: 1.4rem;
+  line-height: 1.8rem;
+  color: #4c4c4c;
+  font-weight: 500;
+  transition: all 2s;
+}
+.sec-04 .card__imgfr {
+  width: 100%;
+}
+.sec-04 .card__imgfr img {
+  width: 100%;
+  height: 100%;
+}
+.sec-04 .card:hover {
+  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: rgb(83, 83, 83);
+  padding: 0.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: 0.8rem;
+}
+.sec-guessLike__title::before, .sec-guessLike__title::after {
+  position: absolute;
+  content: " ";
+  width: 40%;
+  height: 0rem;
+  border-top: 1px solid black;
+  top: 50%;
+}
+.sec-guessLike__title::before {
+  left: 0;
+}
+.sec-guessLike__title::after {
+  left: 60%;
+}
+.sec-guessLike__article h5 {
+  font-size: 1.1rem;
+}
+.sec-guessLike__article p {
+  font-size: 14px;
+}
+.sec-guessLike__case p {
+  font-size: 1.1rem;
+  font-weight: 500;
+}
+.sec-guessLike__card {
+  width: 100%;
+  overflow: hidden;
+  height: 26vh;
+  position: relative;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.sec-guessLike__card.special {
+  height: 45vh;
+}
+.sec-guessLike__card__img {
+  width: 100%;
+  transition: all 0.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%;
+  transform: translate(-50%, -50%);
+}
+
+.sec-05 {
+  border-top: 1px solid rgb(187, 187, 187);
+  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 {
+  box-sizing: content-box;
+  align-items: center;
+  justify-content: space-between;
+}
+.sec-05__tabdiv .more {
+  padding-bottom: 0.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 rgb(179, 179, 179);
+  z-index: -1;
+}
+.sec-05__tabdiv .nav-item:nth-of-type(3)::after {
+  display: none;
+}
+.sec-05__tabdiv .nav-item-link {
+  color: black;
+  font-weight: 500;
+  font-size: 1.6rem;
+  border: none;
+  position: relative;
+  padding: 1.5rem 0;
+  outline: none;
+}
+@media (max-width: 385px) {
+  .sec-05__tabdiv .nav-item-link {
+    font-size: 1.1rem;
+  }
+}
+.sec-05__tabdiv .nav-item-link:focus {
+  outline: none !important;
+}
+.sec-05__tabdiv .nav-item-link.active {
+  color: #ee7800;
+}
+.sec-05__tabdiv .nav-item-link::before {
+  position: absolute;
+  content: " ";
+  width: 101%;
+  height: 100%;
+  left: -2px;
+  top: 0px;
+  background-color: transparent;
+  border-top: 3px solid #ee7800;
+  opacity: 0;
+}
+.sec-05__tabdiv .nav-item-link.active::before {
+  opacity: 1;
+}
+.sec-05 .tab-pane {
+  height: 100%;
+}
+.sec-05tab-content {
+  height: 35vh;
+}
+.sec-05 .tabpar__card {
+  margin: 3px;
+  position: relative;
+  font-size: 14px;
+  cursor: pointer;
+}
+.sec-05 .tabpar__card__imgfr {
+  width: 100%;
+  height: 25vh;
+  position: relative;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+@media (max-width: 1100px) {
+  .sec-05 .tabpar__card__imgfr {
+    height: 20vh;
+  }
+}
+.sec-05 .tabpar__card h5 {
+  font-size: 1rem;
+}
+.sec-05 .tabpar__card p {
+  font-size: 0.95rem;
+  font-weight: 300;
+  color: gray;
+}
+.sec-05 .tabpar__card__play {
+  position: absolute;
+  left: 50%;
+  top: 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: 0.5rem;
+  border-bottom: 6px solid #ee7800;
+  color: #535353;
+  margin-bottom: 0;
+}
+.sec-06__video {
+  width: 100%;
+  position: relative;
+}
+.sec-06__video__imgfr {
+  width: 100%;
+  height: 34vh;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+@media (max-width: 1100px) {
+  .sec-06__video__imgfr {
+    height: 25vh;
+  }
+}
+.sec-06__video__play {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 2.5rem;
+  height: 2.5rem;
+  z-index: 2;
+  transform: translate(-50%, -50%);
+}
+.sec-06__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: 0.4rem 0.8rem;
+  transform: translateY(-20%);
+  font-weight: 600;
+  font-size: 1.1rem;
+}
+.sec-06__btns {
+  display: block;
+  outline: none;
+  border: none;
+  padding: 0.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 0.4s;
+  text-decoration: none;
+}
+.sec-06__btns:hover {
+  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 {
+  transform: scale(1.1);
+}
+.sec-06__card h5 {
+  font-size: 1.1rem;
+  margin-bottom: 0.3rem;
+}
+.sec-06__card p {
+  font-size: 0.9rem;
+}
+.sec-06__card__outer {
+  width: 100%;
+  height: 48vh;
+  overflow: hidden;
+}
+.sec-06__card__play {
+  position: absolute;
+  left: 50%;
+  top: 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;
+  transition: all 0.5s;
+  position: relative;
+}
+.sec-06 .slick-prev {
+  top: 40%;
+  left: 0.5rem;
+  z-index: 2;
+}
+.sec-06 .slick-next {
+  top: 40%;
+  right: 0.5rem;
+  z-index: 2;
+}
+.sec-06 .slick-prev:before,
+.sec-06 .slick-next:before {
+  display: none;
+}
+
+.sec-08 {
+  padding-bottom: 2.5rem;
+}
+.sec-08 .container {
+  margin: 0 auto;
+  padding: 1rem 0rem;
+  max-width: 1050px;
+  width: 70%;
+}
+@media (max-width: 1100px) {
+  .sec-08 .container {
+    width: 90%;
+    padding: 0 1rem;
+  }
+}
+.sec-08__title {
+  border-bottom: 6px solid #ee7800;
+  color: #535353;
+}
+.sec-08__title h3 {
+  font-size: 1.6rem;
+}
+.sec-08__slider {
+  width: 100%;
+  cursor: pointer;
+}
+.sec-08__imgfr {
+  width: 100%;
+  height: 28vh;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: relative;
+}
+@media (max-width: 1100px) {
+  .sec-08__imgfr {
+    height: 20vh;
+  }
+}
+.sec-08__card h5 {
+  font-size: 1rem;
+}
+.sec-08__card p {
+  font-size: 0.9rem;
+}
+.sec-08__card__play {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 2.5rem;
+}
+.sec-08__cardtxt {
+  font-size: 14px;
+  padding-right: 0.6rem;
+}
+.sec-08 .slick-prev {
+  top: 40%;
+  left: -2rem;
+  z-index: 2;
+}
+.sec-08 .slick-next {
+  top: 40%;
+  right: -2rem;
+  z-index: 2;
+}
+.sec-08 .slick-prev:before,
+.sec-08 .slick-next:before {
+  display: none;
+}
+
+.sec-09 {
+  background-color: #f4f4f4;
+}
+.sec-09 .container {
+  margin: 0 auto;
+  padding: 2rem 0rem;
+  max-width: 1050px;
+  width: 70%;
+}
+@media (max-width: 1100px) {
+  .sec-09 .container {
+    width: 90%;
+    padding: 0 1rem;
+  }
+}
+.sec-09__imgfr {
+  width: 100%;
+  height: 25vh;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: relative;
+}
+@media (max-width: 1100px) {
+  .sec-09__imgfr {
+    height: 20vh;
+  }
+}
+.sec-09__card {
+  margin: 5px;
+  text-align: center;
+  cursor: pointer;
+}
+.sec-09__card p {
+  font-size: 14px;
+  margin-top: 0.5rem;
+}
+.sec-09__card__play {
+  position: absolute;
+  right: 0.6rem;
+  bottom: 0.6rem;
+  width: 2.5rem;
+}
+.sec-09__title {
+  border-bottom: 6px solid #ee7800;
+  color: #535353;
+}
+.sec-09__title h3 {
+  font-size: 1.6rem;
+}
+.sec-09 .slick-prev {
+  top: 40%;
+  left: -2rem;
+  z-index: 2;
+}
+.sec-09 .slick-next {
+  top: 40%;
+  right: -2rem;
+  z-index: 2;
+}
+.sec-09 .slick-prev:before,
+.sec-09 .slick-next:before {
+  display: none;
+}
+
+.sec-10 {
+  padding: 2.5rem 0;
+}
+.sec-10 .container {
+  max-width: 1000px;
+  width: 70%;
+}
+@media (max-width: 1100px) {
+  .sec-10 .container {
+    width: 90%;
+    padding: 0 1rem;
+  }
+}
+.sec-10__titlebox {
+  border-bottom: 1px solid rgb(75, 75, 75);
+  display: flex;
+  justify-content: center;
+}
+.sec-10__titlebox-h2 {
+  margin: 0 auto;
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: rgb(83, 83, 83);
+  padding: 0.8rem 0;
+  border-bottom: 6px solid #ee7800;
+  display: inline-block;
+}
+.sec-10__card {
+  cursor: pointer;
+}
+.sec-10__card h5 {
+  font-size: 1rem;
+  margin-bottom: 0.3rem;
+}
+.sec-10__card p {
+  font-size: 0.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 rgb(75, 75, 75);
+  display: flex;
+  justify-content: center;
+}
+.sec-11__titlebox-h2 {
+  margin: 0 auto;
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: rgb(83, 83, 83);
+  padding: 0.8rem 0;
+  border-bottom: 6px solid #ee7800;
+  display: inline-block;
+}
+.sec-11__card {
+  cursor: pointer;
+}
+.sec-11__card h5 {
+  font-size: 1rem;
+  margin-bottom: 0.3rem;
+}
+.sec-11__card p {
+  font-size: 0.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 {
+  padding: 2rem;
+  background-color: #F4F4F4;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
+}
+.footer h2 {
+  text-align: center;
+  margin: 100px auto 0;
+  color: #707070;
+  font-size: 16px;
+  font-weight: 300;
+  letter-spacing: 0.05rem;
+}
+@media (max-width: 991px) {
+  .footer h2 {
+    margin: 80px auto 30px;
+    font-size: 14px;
+  }
+}
+.footer h4 {
+  color: #797979;
+  text-align: center;
+  margin-bottom: 50px;
+}
+@media (max-width: 991px) {
+  .footer h4 {
+    text-align: left;
+    margin-bottom: 20px;
+  }
+}
+@media (max-width: 991px) {
+  .footer .about-list,
+  .footer .follow-list,
+  .footer .more-list {
+    display: flex;
+    justify-content: center;
+  }
+  .footer .about-list section,
+  .footer .follow-list section,
+  .footer .more-list section {
+    width: 300px;
+  }
+}
+.footer .about-list a {
+  color: #707070;
+  transition: all 0.3s;
+}
+.footer .about-list a:hover {
+  opacity: 0.8;
+}
+.footer .about-list ul {
+  padding: 0;
+  letter-spacing: 0.05em;
+}
+@media (max-width: 991px) {
+  .footer .about-list ul {
+    margin-bottom: 0;
+  }
+}
+.footer .about-list ul li {
+  margin: 5px 0;
+}
+@media (max-width: 991px) {
+  .footer .about-list ul li {
+    margin: 0;
+    height: 30px;
+  }
+}
+.footer .about-list ul li span {
+  color: #EA068C;
+}
+.footer .about-list img {
+  width: 20px;
+  height: 20px;
+  margin-right: 7px;
+}
+.footer .follow-list img {
+  width: 45px;
+  height: 45px;
+  transition: all 0.3s;
+}
+@media (max-width: 1200px) {
+  .footer .follow-list img {
+    width: 40px;
+    height: 40px;
+  }
+}
+.footer .follow-list .media {
+  display: flex;
+}
+@media (max-width: 991px) {
+  .footer .follow-list .media {
+    margin: 0 8px 10px 0;
+  }
+  .footer .follow-list .media section {
+    margin-bottom: 20px;
+  }
+}
+.footer .follow-list .media a {
+  display: block;
+  margin: 0 5px;
+  position: relative;
+}
+@media (max-width: 1200px) {
+  .footer .follow-list .media a {
+    margin: 0 3px;
+  }
+}
+.footer .follow-list .media .media-item.after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+}
+.footer .follow-list .fb-list {
+  display: flex;
+  margin-top: 30px;
+}
+@media (max-width: 991px) {
+  .footer .follow-list .fb-list {
+    flex-direction: column;
+    margin-top: 5px;
+  }
+}
+.footer .follow-list .fb-list a {
+  display: flex;
+  align-items: center;
+  padding-right: 10px;
+  color: #797979;
+  font-size: 0.9rem;
+  transition: all 0.3s;
+}
+@media (max-width: 1200px) {
+  .footer .follow-list .fb-list a {
+    padding-right: 5px;
+    font-size: 14px;
+  }
+}
+@media (max-width: 991px) {
+  .footer .follow-list .fb-list a {
+    font-size: 15px;
+    height: 30px;
+  }
+}
+.footer .follow-list .fb-list a:hover {
+  opacity: 0.8;
+}
+.footer .follow-list .fb-list a img {
+  width: 20px;
+  margin-right: 5px;
+}
+@media (max-width: 1200px) {
+  .footer .follow-list .fb-list a img {
+    width: 18px;
+    margin-right: 3px;
+  }
+}
+@media (max-width: 991px) {
+  .footer .follow-list .fb-list a img {
+    width: 20px;
+    margin-right: 8px;
+  }
+}
+.footer .follow-list,
+.footer .more-list {
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+}
+@media (max-width: 991px) {
+  .footer .follow-list,
+  .footer .more-list {
+    margin-top: 30px;
+    padding-top: 30px;
+    border-top: 1px solid #989898;
+  }
+}
+.footer .follow-list::after,
+.footer .more-list::after {
+  content: "";
+  height: 100%;
+  display: block;
+  width: 1px;
+  background: #989898;
+  position: absolute;
+  top: 50px;
+}
+@media (max-width: 991px) {
+  .footer .follow-list::after,
+  .footer .more-list::after {
+    display: none;
+  }
+}
+.footer .more-list ::-moz-placeholder {
+  text-align: center;
+}
+.footer .more-list ::placeholder {
+  text-align: center;
+}
+.footer .more-list a {
+  display: inline-block;
+  margin: 5px;
+  padding-bottom: 2px;
+  color: #797979;
+  border-bottom: 1px solid;
+  transition: all 0.3s;
+}
+.footer .more-list a:hover {
+  opacity: 0.8;
+}
+.footer .more-list .input-focus {
+  border-color: var(--sub-color) !important;
+}
+.footer .more-list .input-focus button {
+  background-color: var(--sub-color) !important;
+}
+.footer .more-list .input-error {
+  border-color: #FF5252 !important;
+}
+.footer .more-list .input-error button {
+  background-color: #FF5252 !important;
+}
+.footer .more-list .subscriber-item {
+  width: 100%;
+  max-width: 300px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  border: 2px solid #34404B;
+}
+.footer .more-list .subscriber-item:hover {
+  border: 2px solid var(--sub-color);
+}
+.footer .more-list .subscriber-item:hover button {
+  background-color: var(--sub-color);
+}
+@media (max-width: 1200px) {
+  .footer .more-list .subscriber-item {
+    max-width: 250px;
+  }
+}
+@media (max-width: 991px) {
+  .footer .more-list .subscriber-item {
+    max-width: 300px;
+  }
+}
+.footer .more-list .subscriber-item input:focus {
+  outline: none;
+}
+.footer .more-list .subscriber-item input,
+.footer .more-list .subscriber-item button {
+  padding: 10px;
+  border: none;
+}
+.footer .more-list .subscriber-item button {
+  color: #fff;
+  background-color: #34404B;
+  transition: all 0.1s;
+}
+.footer .more-list .subscriber-item .spinner-border {
+  display: none;
+}
+.footer .more-list .subscriber-item .show {
+  display: inline-block;
+}
+.footer .more-list .link {
+  width: 230px;
+}
+@media (max-width: 991px) {
+  .footer .more-list .link {
+    width: 310px;
+    margin-left: -3px;
+  }
+}
+
+/* 舊 */
+#videoModal .modal-content {
+  background-color: transparent;
+  border: none;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+#videoModal .modal-dialog {
+  max-width: 700px;
+}
+
+.modal-content {
+  letter-spacing: 1px;
+}
+.modal-content .fm-close {
+  cursor: pointer;
+}
+
+.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 0.8rem;
+  background-color: rgba(255, 255, 255, 0.897);
+  display: flex;
+  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;
+  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: flex;
+  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: flex;
+  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;
+  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: 0.6rem 5rem;
+  background-color: #ee7800;
+  border-radius: 3px;
+  color: white;
+  border: none;
+  outline: none;
+}
+#favorModal .sec-favor-form .form-step1, #favorModal .sec-favor-checklist .form-step1 {
+  display: block;
+}
+#favorModal .sec-favor-form .form-step2, #favorModal .sec-favor-checklist .form-step2 {
+  display: none;
+}
+#favorModal .sec-favor-form .form-step3, #favorModal .sec-favor-checklist .form-step3 {
+  display: none;
+  position: relative;
+  padding-bottom: 1.5rem;
+}
+#favorModal .sec-favor-form input[type=checkbox],
+#favorModal .sec-favor-form input[type=radio], #favorModal .sec-favor-checklist input[type=checkbox],
+#favorModal .sec-favor-checklist input[type=radio] {
+  display: none;
+}
+#favorModal .sec-favor-form .imgfr, #favorModal .sec-favor-checklist .imgfr {
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 4.5rem;
+  border-radius: 8px;
+  border: 2px solid transparent;
+}
+#favorModal .sec-favor-form h4, #favorModal .sec-favor-checklist h4 {
+  color: #aaaaaa;
+  font-size: 15px;
+  font-weight: 400;
+}
+#favorModal .sec-favor-form input[type=checkbox]:checked + .fs-label-info .imgfr, #favorModal .sec-favor-checklist input[type=checkbox]:checked + .fs-label-info .imgfr {
+  border: 2px solid #ee7800;
+}
+#favorModal .sec-favor-form input[type=checkbox]:checked + .fs-label-chbox, #favorModal .sec-favor-checklist input[type=checkbox]:checked + .fs-label-chbox {
+  border: 1px solid #ee7800;
+  color: #ee7800;
+}
+#favorModal .sec-favor-form input[type=radio]:checked + .fs-label-chbox, #favorModal .sec-favor-checklist input[type=radio]:checked + .fs-label-chbox {
+  border: 1px solid #ee7800;
+  color: #ee7800;
+}
+#favorModal .sec-favor-form .step3-block, #favorModal .sec-favor-checklist .step3-block {
+  margin-bottom: 1rem;
+}
+#favorModal .sec-favor-form .step3-block:nth-of-type(3), #favorModal .sec-favor-checklist .step3-block:nth-of-type(3) {
+  margin-bottom: 0;
+}
+#favorModal .sec-favor-form .step3-block-title, #favorModal .sec-favor-checklist .step3-block-title {
+  color: #aaaaaa;
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 1rem;
+}
+#favorModal .sec-favor-form .step3-block .radio, #favorModal .sec-favor-checklist .step3-block .radio {
+  display: inline-block;
+  padding: 0.25rem 0.7rem;
+  margin-right: 0.4rem;
+  border: 1px solid #707070;
+  border-radius: 2rem;
+  color: #797979;
+  margin-bottom: 0.5rem;
+}
+#favorModal .sec-favor-form .skip, #favorModal .sec-favor-checklist .skip {
+  padding: 0.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: flex;
+  flex-direction: column;
+  align-items: center;
+}
+#favorModal .sec-favor-form .btngrp .next, #favorModal .sec-favor-checklist .btngrp .next {
+  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;
+  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 {
+  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;
+  transition: all 1s;
+}
+
+.test_content {
+  opacity: 0;
+}
+.test_content.fadein {
+  animation: fadein 2s forwards;
+}
+@keyframes slidein {
+  100% {
+    height: 0px;
+  }
+}
+@keyframes fadein {
+  100% {
+    opacity: 1;
+  }
+}
+#hhh-cases .article__readMore::before {
+  content: "";
+  display: inline-block;
+  background: linear-gradient(0deg, #fcfcfc 0%, rgba(255, 255, 255, 0.454219) 100%);
+  width: 100%;
+  height: 25px;
+  transition: all 300ms ease-in-out;
+}
+#hhh-cases .article__contexts_cases {
+  font-size: 1.1rem;
+  line-height: 1.8;
+  height: 50px;
+  overflow: hidden;
+  transition: all 300ms ease-in-out;
+  color: #727679;
+}
+#hhh-cases .article__readMore {
+  cursor: pointer;
+  margin-left: auto;
+  margin-right: auto;
+  color: #ffac73;
+  text-align: center;
+  font-size: 90%;
+  padding: 0 0 1rem;
+  transform: translateY(-20px);
+  transition: all 300ms ease-in-out;
+}
+#hhh-cases .article__readMore a {
+  text-decoration: none;
+  color: #ffac73;
+}
+#hhh-cases .img-wrapper-desktop {
+  background-color: #6d6d6d;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+}
+#hhh-cases .swiper-zoom-container-desktop {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+#hhh-cases .swiper-zoom-container-desktop img {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  -o-object-fit: contain;
+  object-fit: contain;
+}
+#hhh-cases .swiper-zoom-container-sm-desktop {
+  width: 50%;
+  height: 70%;
+}
+#hhh-cases .swiper-zoom-container-sm-desktop {
+  width: 50%;
+  height: 70%;
+}
+#hhh-cases .slick-prev:before,
+#hhh-cases .slick-next:before {
+  display: none;
+}
+#hhh-cases .modal-body {
+  padding: 0 !important;
+}
+#hhh-cases .case-slick-box {
+  height: 100vh;
+  position: sticky;
+  top: 15px;
+}
+@media (max-width: 576px) {
+  #hhh-cases .case-slick-box {
+    height: 60vh;
+    position: static;
+  }
+}
+#hhh-cases .img-wrapper-desktopp {
+  width: 95%;
+  margin: 0 auto;
+  height: 100%;
+}
+#hhh-cases .CaseDetail-slick {
+  height: 100vh;
+  width: 95%;
+  margin: 0 auto;
+}
+@media (max-width: 576px) {
+  #hhh-cases .CaseDetail-slick {
+    height: 60vh;
+  }
+}
+#hhh-cases .CaseDetail-slick .slick-slide {
+  height: 100vh;
+}
+@media (max-width: 576px) {
+  #hhh-cases .CaseDetail-slick .slick-slide {
+    height: 60vh;
+  }
+}
+#hhh-cases .CaseDetail-slick img {
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+#hhh-cases .breadcrumb {
+  padding: 0.75rem 1rem;
+  letter-spacing: 1px;
+}
+@media (max-width: 576px) {
+  #hhh-cases .breadcrumb {
+    margin-bottom: 0;
+    display: block;
+  }
+}
+#hhh-cases .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
+  float: unset;
+  padding-right: 0.2rem;
+  color: #6c757d;
+  content: var(--bs-breadcrumb-divider, "／");
+}
+#hhh-cases .breadcrumb a {
+  font-size: 0.75rem;
+  color: #727679;
+  text-decoration: none;
+}
+@media (max-width: 576px) {
+  #hhh-cases .breadcrumb li {
+    display: inline;
+  }
+}
+#hhh-cases .breadcrumb .active a {
+  color: #aaaaaa;
+}
+#hhh-cases .breadcrumb-item + .breadcrumb-item {
+  padding-left: 0.2rem;
+}
+#hhh-cases .h4 {
+  font-weight: bold;
+  color: #34404b;
+}
+#hhh-cases .article {
+  color: #727679;
+}
+#hhh-cases .article .small {
+  padding: 0.5rem 0;
+  font-size: 80%;
+}
+#hhh-cases .shadow-sm {
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08) !important;
+}
+#hhh-cases .container-width-column {
+  max-width: 1120px;
+  margin: 0 auto;
+}
+#hhh-cases .article__wrapper {
+  padding: 0.75rem 1rem;
+}
+#hhh-cases .shadow {
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+}
+#hhh-cases .cases-content {
+  background: #fcfcfc;
+}
+#hhh-cases .cases-content .caseSlider {
+  background: #fff;
+  max-width: 1310px;
+  margin: 0 auto;
+  padding: 100px;
+  position: relative;
+}
+@media (max-width: 576px) {
+  #hhh-cases .cases-content .caseSlider {
+    padding: 0;
+  }
+}
+#hhh-cases .cases-content .caseSlider .morePhotoTip {
+  cursor: pointer;
+  position: absolute;
+  color: #fff;
+  right: 120px;
+  bottom: 120px;
+  padding: 0.2rem 0.8rem;
+  background-color: rgba(0, 0, 0, 0.45);
+  transition: all 300ms ease-in-out;
+}
+@media (max-width: 576px) {
+  #hhh-cases .cases-content .caseSlider .morePhotoTip {
+    bottom: 10px;
+    right: 10px;
+  }
+}
+#hhh-cases .container--padding {
+  padding: 1.2rem 0;
+}
+#hhh-cases .info__items {
+  font-size: 1.2rem;
+  text-align: center;
+  color: #34404b;
+  font-weight: 800;
+  min-height: 4.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+@media (max-width: 576px) {
+  #hhh-cases .info__items {
+    font-size: 1rem;
+  }
+}
+#hhh-cases .info__items__title {
+  color: #727679;
+  font-weight: 400;
+  font-size: 1rem;
+}
+#hhh-cases .case-scMedia__block {
+  width: 35%;
+  margin: 0 auto;
+}
+@media (max-width: 576px) {
+  #hhh-cases .case-scMedia__block {
+    width: 100%;
+  }
+}
+#hhh-cases .case-scMedia__block .case-scMedia__list {
+  background-color: #fff;
+  box-shadow: 0 1px 10px #cecece;
+  border-radius: 45px;
+  padding: 1rem 2.8rem;
+  display: flex;
+  justify-content: space-around;
+}
+@media (max-width: 576px) {
+  #hhh-cases .case-scMedia__block .case-scMedia__list {
+    border-radius: 0px;
+    box-shadow: none;
+    padding: 0;
+  }
+}
+#hhh-cases .relTag {
+  padding: 1rem;
+}
+#hhh-cases .relTag a {
+  margin: 0 0 0.6rem 0.6rem;
+  transition: all 300ms ease-in-out;
+}
+#hhh-cases .relTag a:hover {
+  color: #ffac73;
+  border-color: #ffac73;
+}
+#hhh-cases .relTag__items__title {
+  width: 7%;
+}
+#hhh-cases .relTag__items {
+  width: 100%;
+  display: flex;
+  align-items: baseline;
+}
+#hhh-cases .relTag__items__tags {
+  width: 93%;
+}
+#hhh-cases .btn-outline-custom {
+  border-color: #707070;
+}
+#hhh-cases .caseData {
+  color: #727679;
+  padding: 0.5rem 0 0;
+  margin-bottom: 3rem;
+}
+#hhh-cases .caseData h4 {
+  font-weight: bold;
+  color: #34404b;
+  padding: 0.5rem;
+}
+@media (max-width: 576px) {
+  #hhh-cases .caseData h4 {
+    padding: 1rem 0.5rem 0.5rem;
+  }
+}
+#hhh-cases .caseData .caseData__infoBlock {
+  position: relative;
+  box-shadow: 0 1px 10px #cecece;
+  padding: 1rem;
+}
+#hhh-cases .caseData .caseData__infoItems {
+  padding: 0.5rem;
+}
+#hhh-cases .caseData .caseData__infoItems__list {
+  display: flex;
+}
+#hhh-cases .caseData .caseData__infoItems__list--lf {
+  justify-content: start;
+  -webkit-box-align: start;
+  display: flex;
+  flex-grow: 0;
+  max-width: 15%;
+  flex-basis: 15%;
+  -webkit-box-flex: 0;
+}
+@media (max-width: 576px) {
+  #hhh-cases .caseData .caseData__infoItems__list--lf {
+    max-width: 25%;
+    flex-basis: 25%;
+  }
+}
+#hhh-cases .caseData .caseData__infoItems__list--rt {
+  flex-basis: 80%;
+  flex-grow: 0;
+  max-width: 80%;
+  justify-content: start;
+  word-break: break-all;
+}
+@media (max-width: 576px) {
+  #hhh-cases .caseData .caseData__infoItems__list--rt {
+    flex-basis: 70%;
+    max-width: 70%;
+  }
+}
+#hhh-cases .caseData a {
+  text-decoration: none;
+  background-color: transparent;
+  color: #727679;
+}
+#hhh-cases .caseData__designerBlock {
+  display: flex;
+  box-shadow: 0 1px 10px #cecece;
+}
+#hhh-cases .caseData__designerBlock ul {
+  list-style-type: none;
+  padding: 0.6rem;
+}
+#hhh-cases .caseData__designerBlock__designer--pc {
+  padding: 1rem 0.9rem;
+  width: 50%;
+  height: 370px;
+}
+@media (max-width: 576px) {
+  #hhh-cases .caseData__designerBlock__designer {
+    width: 60%;
+  }
+}
+#hhh-cases .caseData__designerBlock__designer--above {
+  height: 70%;
+}
+#hhh-cases .caseData__designerBlock__designer--below {
+  height: 25%;
+  border-top: 1px solid #727679;
+}
+#hhh-cases .caseData__designerBlock__avatar--img {
+  height: 100%;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+@media (max-width: 576px) {
+  #hhh-cases .caseData__designerBlock__avatar--img {
+    height: 190px;
+    background-size: contain;
+  }
+}
+#hhh-cases .caseData__designerBlock__avatar {
+  width: 50%;
+}
+@media (max-width: 576px) {
+  #hhh-cases .caseData__designerBlock__avatar {
+    width: 40%;
+  }
+}
+#hhh-cases .tel {
+  color: #ee751b !important;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+@media (max-width: 576px) {
+  #hhh-cases .tel {
+    font-size: 1rem;
+  }
+}
+#hhh-cases .likeSee__state {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+#hhh-cases .likeSee__state h4 {
+  font-weight: bold;
+  color: #34404b;
+}
+#hhh-cases .likeSee__state .likeSee__state__filter--divider {
+  height: 12px;
+  display: inline-block;
+  border: 0.5px solid #9d9d9d;
+}
+#hhh-cases .likeSee__state a {
+  color: #727679;
+  text-decoration: none;
+  transition: 0.3s;
+}
+#hhh-cases .likeSee__state a:hover {
+  color: #ee7800;
+}
+#hhh-cases .likeSee__state .active {
+  color: #ee751b;
+}
+#hhh-cases .card {
+  border: none;
+  font-size: 0.75rem;
+}
+#hhh-cases .vue-waterfall {
+  position: relative;
+}
+#hhh-cases .vue-waterfall a {
+  color: #727679;
+  text-decoration: none;
+  background-color: transparent;
+  font-size: 0.75rem;
+  transition: all 300ms ease-in-out;
+}
+#hhh-cases .vue-waterfall a:hover {
+  color: #ffac73;
+}
+#hhh-cases .vue-waterfall .card-body {
+  padding: 0.5rem 0.5rem 0.5rem 0;
+}
+#hhh-cases .vue-waterfall .likeSee__tag--item {
+  margin: 0 0.2rem 0 0;
+  text-decoration: none !important;
+  color: #727679;
+  transition: all 300ms ease-in-out;
+}
+#hhh-cases .vue-waterfall .likeSee__tag--item:hover {
+  color: #ffac73;
+}
+#hhh-cases .likeSee__tag {
+  padding: 0.5rem 0;
+}
+#hhh-cases .likeSee__tag--item {
+  margin: 0 0.2rem 0 0;
+  text-decoration: none !important;
+  color: #727679;
+  transition: all 300ms ease-in-out;
+}
+#hhh-cases .likeSee__tag--item:hover {
+  color: #ffac73;
+}
+#hhh-cases .likeSee__state__filter--item {
+  cursor: pointer;
+}
+#hhh-cases .formBtn .btn {
+  padding: 1.2rem 0.75rem;
+}
+#hhh-cases .btn-primary {
+  color: #fff;
+  background-color: #ee7800;
+  border-color: #ee7800;
+}
+#hhh-cases .btn-block {
+  display: block;
+  width: 100%;
+}
+#hhh-cases .container-width-ad {
+  max-width: 768px;
+}
+#hhh-cases .formBtn {
+  width: 47%;
+}
+@media (max-width: 576px) {
+  #hhh-cases .formBtn {
+    margin-top: 15px;
+    width: 100%;
+  }
+}
+#hhh-cases .ad__bgImg {
+  height: 80px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+#hhh-cases .container-width-ad {
+  max-width: 768px;
+  margin-bottom: 30px;
+}
+@media (max-width: 576px) {
+  #hhh-cases .container-width-ad {
+    margin-bottom: 100px;
+  }
+}
+#hhh-cases .contact-section-avatar {
+  width: 75px;
+  height: 100px;
+}
+#hhh-cases .contact-section-company {
+  font-weight: bold;
+  font-size: 18px;
+  color: #6d6d6d;
+  text-decoration: none;
+  height: 50.04px;
+}
+#hhh-cases .contact-section-detail-box {
+  color: #6d6d6d;
+  display: flex !important;
+}
+#hhh-cases .contact-section-detail-box .contact-section-detail-lf {
+  flex-basis: 7%;
+  flex-grow: 0;
+  max-width: 7%;
+  display: flex !important;
+  -webkit-box-align: start;
+  -webkit-box-flex: 0;
+}
+#hhh-cases .contact-section-detail-box a {
+  color: #6d6d6d;
+  text-decoration: none;
+}
+#hhh-cases .loading-move {
+  animation-name: move;
+  animation-duration: 2s;
+  animation-delay: 0;
+  animation-iteration-count: infinite;
+  animation-direction: normal;
+  animation-timing-function: linear;
+}
+@keyframes move {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+#hhh-cases .info-area-title-desktop {
+  font-size: 18px;
+  font-weight: bold;
+  padding: 0.6rem 0 0.6rem 0.6rem;
+  margin: 1.6rem 0 1rem 0;
+  background-color: #efefef;
+}
+#hhh-cases .info-area-title-desktop a {
+  color: #6d6d6d;
+  text-decoration: none;
+}
+#hhh-cases .info-area-data-desktop,
+#hhh-cases .info-area-other-case-desktop,
+#hhh-cases .info-area-same-case-desktop,
+#hhh-cases .info-area-contact-desktop {
+  font-size: 16px;
+  font-weight: bold;
+  color: #6d6d6d;
+}
+#hhh-cases .info-area-data-desktop a,
+#hhh-cases .info-area-other-case-desktop a,
+#hhh-cases .info-area-same-case-desktop a,
+#hhh-cases .info-area-contact-desktop a {
+  color: #6d6d6d;
+  text-decoration: none;
+}
+#hhh-cases .divider {
+  width: 100%;
+  height: 1px;
+  border-left: none;
+  border-bottom: 1px solid #9c9c9c;
+  margin: 10px 0;
+}
+#hhh-cases .data-table-desktop {
+  width: 100%;
+  font-size: 14px;
+  padding: 0.55rem 0;
+}
+#hhh-cases .data-table-lf {
+  flex-basis: 18%;
+  flex-grow: 0;
+  max-width: 25%;
+  display: flex;
+  justify-content: start;
+  align-items: start;
+}
+#hhh-cases .contact-section-detail-desktop {
+  font-size: 14px;
+}
+#hhh-cases .contact-section-detail-lf {
+  flex-basis: 7%;
+  flex-grow: 0;
+  display: flex;
+  align-items: start;
+  max-width: 7%;
+}
+#hhh-cases .info {
+  margin: 0 0 1.8rem;
+  transition: all 300ms ease-in-out;
+}
+#hhh-cases .info .info__option {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100%;
+}
+#hhh-cases .info .info__items--ellipse {
+  -webkit-box-orient: vertical;
+  box-orient: vertical;
+  -webkit-line-clamp: 1;
+  line-break: after-white-space;
+  height: 28.8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  transition: all 300ms ease-in-out;
+}
+@media (max-width: 576px) {
+  #hhh-cases .info .info__items--ellipse {
+    height: 24px;
+    min-height: 0;
+    padding: 0;
+  }
+}
+#hhh-cases .info .border-sidebar {
+  position: relative;
+}
+#hhh-cases .info .border-sidebar::after {
+  content: "";
+  display: inline-block;
+  width: 1px;
+  height: 120px;
+  background-color: #cecece;
+  transform: translate3d(0, 0, 0);
+  position: absolute;
+  left: 100%;
+  top: 12px;
+}
+#hhh-cases .info .mh {
+  min-height: 75px;
+}
+#hhh-cases .info .border-below {
+  border-bottom: 1px solid #cecece;
+}
+@media (max-width: 576px) {
+  #hhh-cases .info .container--padding {
+    padding: 0 1.875rem;
+  }
+}
+@media (max-width: 576px) {
+  #hhh-cases .display-pc {
+    display: none;
+  }
+}
+@media (max-width: 576px) {
+  #hhh-cases .CaseInfo-pc {
+    display: none;
+  }
+}
+#hhh-cases .info--shadow {
+  box-shadow: 0 1px 10px #cecece;
+}
+
+/* 舊版 */
+.fixed_menu {
+  height: 78px;
+  position: fixed;
+  z-index: 4;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #fff;
+  box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+@media (min-width: 480px) {
+  .fixed_menu {
+    height: 50px;
+  }
+}
+@media (min-width: 480px) {
+  .fixed_menu .row {
+    height: 50px;
+  }
+}
+@media (min-width: 480px) {
+  .fixed_menu__box {
+    width: 100%;
+    height: 100%;
+  }
+}
+.fixed_menu__box img:focus-visible {
+  outline: none;
+}
+@media (min-width: 480px) {
+  .fixed_menu__box img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+/* 新版 */
+.footer-fix-block {
+  height: 65px;
+  padding: 5px 10px;
+  position: fixed;
+  z-index: 5;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #fff;
+  box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+.footer-fix-block .footer-fix-wrapper a {
+  display: flex;
+}
+.footer-fix-block .footer-fix-wrapper img {
+  margin: auto;
+  max-width: 65px;
+}
+
+.article--style {
+  background: #fff;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+@media (max-width: 576px) {
+  .article--style {
+    box-shadow: none;
+  }
+}
+
+.article__title {
+  color: #34404b;
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.article__contexts {
+  font-size: 1.1rem;
+  line-height: 1.8;
+}
+@media (max-width: 576px) {
+  .article__contexts {
+    max-width: calc(100vw - 32px);
+    height: auto !important;
+    word-break: break-word;
+  }
+}
+.article__contexts img {
+  max-width: 80%;
+  margin: 0.5rem 0;
+}
+@media (max-width: 576px) {
+  .article__contexts img {
+    max-width: 100% !important;
+  }
+}
+.article__contexts p {
+  margin-bottom: 1rem !important;
+}
+.article__contexts a {
+  text-decoration: none;
+}
+.article__contexts strong {
+  font-weight: bolder;
+}
+
+table {
+  width: 100% !important;
+  display: block;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+iframe {
+  width: 100%;
+  max-width: 640px;
+}
+
+.cardList__items {
+  box-shadow: 0 1px 10px #eee;
+  margin: 0 0 1.5rem;
+}
+.cardList__items img {
+  width: 100%;
+  height: 293px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.cardList__items .cardList__items__content {
+  padding: 0.5rem 1rem;
+}
+.cardList__items .cardList__items--title {
+  font-size: 1.125rem;
+  font-weight: bold;
+  margin: 0.5rem 0;
+  color: #727679;
+}
+.cardList__items .likeSee__tag--item {
+  margin: 0 0.2rem 0 0;
+}
+.cardList__items a {
+  font-size: 16px !important;
+}
+.cardList__items p {
+  margin-bottom: 1rem !important;
+}
+
+.article__contexts__note {
+  width: 99.5%;
+  margin: 1.8rem auto;
+  font-size: 1.125rem;
+  padding: 1rem;
+  border: 1px solid #727679;
+}
+.article__contexts__note p {
+  margin-bottom: 1rem !important;
+}
+
+.scMedia {
+  width: 100%;
+  max-width: 500px;
+  margin: 0 auto;
+}
+@media (max-width: 576px) {
+  .scMedia {
+    width: 100%;
+    padding: 1rem 0;
+  }
+}
+.scMedia .scMedia__list {
+  background-color: #fff;
+  box-shadow: 0 1px 10px #cecece;
+  border-radius: 45px;
+  padding: 1rem 2.8rem;
+  display: flex;
+  justify-content: space-around;
+}
+@media (max-width: 576px) {
+  .scMedia .scMedia__list {
+    border-radius: 0px;
+    box-shadow: none;
+    padding: 0;
+  }
+}
+.scMedia .scMedia__list a {
+  display: inline-block;
+  margin: 0 5px;
+}
+.scMedia .scMedia__list span {
+  cursor: pointer;
+}
+
+.fixed-btn {
+  position: fixed;
+  right: 15px;
+  bottom: 8rem;
+}
+@media (min-width: 480px) {
+  .fixed-btn {
+    bottom: 5rem;
+  }
+}
+.fixed-btn .btn-gotop {
+  padding: 1.2rem 0.8rem;
+  background-color: rgba(255, 255, 255, 0.897);
+  display: flex;
+  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-ads {
+  padding: 2rem 0;
+  background-color: #f4f4f4;
+}
+.sec-ads .slick-prev {
+  left: 15px;
+  z-index: 100;
+}
+.sec-ads .slick-next {
+  right: 15px;
+}
+.sec-ads .sec-slide-box {
+  width: 85%;
+  margin: 0 auto;
+}
+.sec-ads .container {
+  margin: 0 auto;
+  padding: 0.8rem 1.2rem;
+  max-width: 1050px;
+  width: 60%;
+}
+@media (max-width: 1100px) {
+  .sec-ads .container {
+    width: 90%;
+    padding: 0 1rem;
+  }
+}
+.sec-ads__slider {
+  height: 100%;
+}
+.sec-ads__slider .slide-item {
+  height: 23vh;
+  cursor: pointer;
+}
+@media (max-width: 1100px) {
+  .sec-ads__slider .slide-item {
+    height: 20vh;
+  }
+}
+
+/* index Start */
+.info-item .logo-img {
+  position: absolute;
+  z-index: 10;
+  top: 20px;
+  left: 50px;
+}
+@media (max-width: 991px) {
+  .info-item .logo-img {
+    left: 100px;
+  }
+}
+@media (max-width: 767px) {
+  .info-item .logo-img {
+    left: 4%;
+    top: 5%;
+  }
+}
+@media (max-width: 575px) {
+  .info-item .logo-img {
+    left: 1%;
+    top: 3%;
+  }
+}
+.info-item .logo-img img {
+  width: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.info-item .logo-img .img-designer {
+  height: 50px;
+}
+@media (max-width: 767px) {
+  .info-item .logo-img .img-designer {
+    height: 40px;
+  }
+}
+@media (max-width: 575px) {
+  .info-item .logo-img .img-designer {
+    height: 26px;
+  }
+}
+.info-item .logo-img .img-renovation {
+  height: 60px;
+}
+.info-item .logo-img .img-glory {
+  height: 70px;
+}
+@media (max-width: 767px) {
+  .info-item .logo-img .img-glory,
+  .info-item .logo-img .img-renovation {
+    height: 60px;
+  }
+}
+@media (max-width: 575px) {
+  .info-item .logo-img .img-glory,
+  .info-item .logo-img .img-renovation {
+    height: 34px;
+  }
+}
+.info-item section {
+  position: absolute;
+  z-index: 10;
+  bottom: 70px;
+  left: 70px;
+  color: #fff;
+  text-shadow: 1px 1px 4px #333;
+}
+@media (max-width: 991px) {
+  .info-item section {
+    left: 14%;
+    bottom: 10%;
+  }
+}
+@media (max-width: 767px) {
+  .info-item section {
+    left: 6%;
+    bottom: 6%;
+  }
+}
+.info-item section h3 {
+  font-size: 18px;
+}
+@media (max-width: 767px) {
+  .info-item section h3 {
+    display: none;
+  }
+}
+.info-item section div {
+  display: flex;
+  border: 1px solid #fff;
+}
+@media (max-width: 767px) {
+  .info-item section div {
+    flex-direction: column;
+  }
+}
+.info-item section div h2 {
+  margin: auto;
+  padding: 5px 30px;
+  font-size: 26px;
+}
+@media (max-width: 575px) {
+  .info-item section div h2 {
+    font-size: 18px;
+    margin: 0;
+    text-align: center;
+  }
+}
+.info-item section div h2:first-child {
+  padding-bottom: 8px;
+  background-color: rgba(237, 237, 237, 0.3);
+}
+.info-item section div h2:last-child {
+  font-size: 24px;
+}
+@media (max-width: 575px) {
+  .info-item section div h2:last-child {
+    font-size: 18px;
+  }
+}
+.info-item section div h2:last-child small {
+  font-size: 16px;
+  font-weight: 300;
+}
+@media (max-width: 575px) {
+  .info-item section div h2:last-child small {
+    font-size: 14px;
+  }
+}
+
+.banner-content {
+  max-width: 100%;
+  margin-top: 0.875rem;
+}
+@media (max-width: 991px) {
+  .banner-content {
+    margin-top: 0;
+  }
+}
+.banner-content img {
+  width: 1300px;
+  height: 535px;
+  margin: 0 7px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+@media (max-width: 1200px) {
+  .banner-content img {
+    width: 100%;
+    height: 400px;
+  }
+}
+@media (max-width: 991px) {
+  .banner-content img {
+    height: 50vw;
+  }
+}
+@media (max-width: 767px) {
+  .banner-content img {
+    height: 65vw;
+    width: 93vw;
+  }
+}
+.banner-content .slick-next:before,
+.banner-content .slick-prev:before {
+  content: "" !important;
+}
+.banner-content .slick-next {
+  right: 160px;
+  margin-left: auto;
+}
+@media (max-width: 575px) {
+  .banner-content .slick-next {
+    right: 20px;
+  }
+}
+.banner-content .slick-prev {
+  left: -50px;
+  margin-right: auto;
+}
+@media (max-width: 575px) {
+  .banner-content .slick-prev {
+    left: 20px;
+  }
+}
+.banner-content .slick-next,
+.banner-content .slick-prev {
+  top: 5vw;
+  z-index: 1000;
+}
+.banner-content .slick-next i,
+.banner-content .slick-prev i {
+  opacity: 0.6;
+  font-size: 32px;
+  transition: all 0.3s;
+}
+.banner-content .slick-next:hover i,
+.banner-content .slick-prev:hover i {
+  opacity: 1;
+}
+@media (max-width: 1200px) {
+  .banner-content .slick-next,
+  .banner-content .slick-prev {
+    top: 1vw;
+  }
+}
+.banner-content .slick-next i,
+.banner-content .slick-prev i {
+  padding: 200px 100px;
+}
+.banner-content .slick-dots {
+  bottom: 10px;
+}
+.banner-content .slick-dots li {
+  margin: 0;
+}
+.banner-content .slick-dots li button:before {
+  width: 10px;
+  height: 10px;
+  content: "";
+  opacity: 1;
+  border: 1px solid #fff;
+  border-radius: 100px;
+}
+.banner-content .slick-dots .slick-active button:before {
+  color: #fff;
+  background-color: #fff;
+}
+.banner-content .banner-slider img {
+  filter: brightness(50%);
+}
+.banner-content .slick-now img {
+  filter: brightness(100%) !important;
+}
+.banner-content .slick-slide {
+  position: relative;
+}
+
+/* 手機版進度條 */
+.progress {
+  display: none;
+  width: 50%;
+  height: 3px;
+  margin: 10px auto 0;
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: #f5f5f5;
+  background-image: linear-gradient(to right, var(--sub-color), var(--sub-color));
+  background-repeat: no-repeat;
+  background-size: 0 100%;
+  transition: background-size 0.4s ease-in-out;
+}
+@media (max-width: 575px) {
+  .progress {
+    display: block;
+  }
+}
+
+.index-content {
+  /* 手機版進度條 */
+}
+@media (max-width: 991px) {
+  .index-content {
+    max-width: 100%;
+  }
+}
+.index-content * {
+  letter-spacing: 0.05em;
+  font-family: "Helvetica";
+}
+.index-content .fas {
+  font-family: Font Awesome\ 5 Free !important;
+}
+.index-content h3 {
+  color: #727272;
+  font-weight: bold;
+  line-height: 22px;
+}
+.index-content h5 {
+  padding: 0 10px;
+  margin-bottom: 20px;
+  font-size: 22px;
+  font-weight: bold;
+  color: var(--main-color);
+}
+.index-content h5 span {
+  color: var(--sub-color);
+}
+.index-content .describe {
+  padding-top: 50px;
+  margin: 25px 0;
+  font-size: 32px;
+  font-weight: bold;
+  text-align: center;
+  color: #34404b;
+  line-height: 1.3em;
+  border-top: 1px solid #989898;
+}
+.index-content .describe span {
+  color: var(--sub-color);
+}
+@media (max-width: 991px) {
+  .index-content .describe {
+    padding-top: 1.3rem;
+  }
+}
+@media (max-width: 767px) {
+  .index-content .describe {
+    font-size: 25px;
+  }
+}
+.index-content .card-item {
+  padding: 0 10px;
+  margin-top: 1.3rem;
+}
+.index-content .card-item a {
+  height: 90px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  color: #727272;
+  background-color: #ededed;
+  border-radius: 5px;
+  transition: all 0.3s;
+  line-height: 1.2rem;
+}
+@media (max-width: 767px) {
+  .index-content .card-item a {
+    height: 60px;
+    margin-bottom: 16px;
+  }
+}
+.index-content .top-card a,
+.index-content .center-card a {
+  position: relative;
+  overflow: hidden;
+}
+.index-content .top-card a span,
+.index-content .center-card a span {
+  position: absolute;
+  display: block;
+  width: 0px;
+  height: 0px;
+  border-radius: 100%;
+  transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+}
+.index-content .top-card a:hover,
+.index-content .center-card a:hover {
+  color: #fff;
+  text-shadow: 1px 2px 4px rgb(188, 84, 6);
+  background-color: transparent !important;
+}
+.index-content .top-card a:hover span,
+.index-content .center-card a:hover span {
+  width: 225%;
+  height: 500%;
+}
+
+.top-card a span {
+  background-color: var(--sub-color);
+}
+
+.center-card a:hover {
+  color: #fff;
+}
+.center-card div:nth-child(1) a span,
+.center-card div:nth-child(2) a span {
+  background-color: #EA068C;
+}
+.center-card div:nth-child(3) a span {
+  background-color: #0F506D;
+}
+
+.more-link {
+  color: var(--sub-color);
+  transition: all 0.2s;
+}
+.more-link:hover {
+  color: var(--sub-color);
+  opacity: 0.7;
+}
+.more-link img {
+  width: 15px;
+  transform: rotate(90deg);
+  filter: invert(50%) sepia(97%) saturate(1293%) hue-rotate(348deg) brightness(95%) contrast(96%);
+}
+
+.options-content h3 {
+  font-size: 16px;
+}
+.options-content .space-slider .slick-list,
+.options-content .options-slider .slick-list {
+  padding-bottom: 5px;
+}
+.options-content .space-slider .slick-slide section,
+.options-content .options-slider .slick-slide section {
+  margin: 0 10px;
+  border-radius: 0 0 5px 5px;
+}
+.options-content .space-slider .slick-slide section span,
+.options-content .options-slider .slick-slide section span {
+  height: 170px;
+  display: block;
+  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1607843137);
+  border-radius: 5px;
+}
+@media (max-width: 767px) {
+  .options-content .space-slider .slick-slide section span,
+  .options-content .options-slider .slick-slide section span {
+    width: 155px;
+    height: 140px;
+  }
+}
+.options-content .space-slider .slick-slide section span img,
+.options-content .options-slider .slick-slide section span img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 5px 5px 0 0;
+}
+.options-content .space-slider .slick-slide section a,
+.options-content .options-slider .slick-slide section a {
+  position: relative;
+  display: flex;
+  height: 100%;
+}
+.options-content .space-slider .slick-slide section a:hover h3,
+.options-content .options-slider .slick-slide section a:hover h3 {
+  color: var(--sub-color);
+  background-color: rgba(237, 237, 237, 0.9);
+}
+.options-content .space-slider .slick-slide section a:hover img,
+.options-content .options-slider .slick-slide section a:hover img {
+  transform: scale(1.1);
+}
+.options-content .space-slider .slick-slide section a h3,
+.options-content .options-slider .slick-slide section a h3 {
+  padding: 10px;
+  text-align: center;
+  color: var(--main-color);
+  background-color: rgba(237, 237, 237, 0.8);
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -9px;
+  border-radius: 0 0 5px 5px;
+}
+.options-content .space-slider .slick-slide section a h3 strong,
+.options-content .options-slider .slick-slide section a h3 strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  line-break: after-white-space;
+  transition: all 0.2s;
+  font-weight: 600;
+}
+@media (max-width: 767px) {
+  .options-content .space-slider .slick-slide section span {
+    width: 100%;
+  }
+}
+@media (max-width: 575px) {
+  .options-content .space-slider .slick-slide section span {
+    width: 41vw;
+  }
+}
+.options-content .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.options-content .slick-prev,
+.main-content .slick-prev {
+  left: -10px !important;
+}
+.options-content .slick-next,
+.main-content .slick-next {
+  right: -12px !important;
+}
+.options-content .slick-prev,
+.options-content .slick-next,
+.main-content .slick-prev,
+.main-content .slick-next {
+  width: 35px;
+  height: 35px;
+  z-index: 100;
+  box-shadow: 2px 2px 7px #979797;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 100px;
+  transition: all 0.3s;
+}
+.options-content .slick-prev:hover,
+.options-content .slick-next:hover,
+.main-content .slick-prev:hover,
+.main-content .slick-next:hover {
+  background: rgba(255, 255, 255, 0.8);
+}
+.options-content .slick-prev .fa-chevron-right,
+.options-content .slick-prev .fa-chevron-left,
+.options-content .slick-next .fa-chevron-right,
+.options-content .slick-next .fa-chevron-left,
+.main-content .slick-prev .fa-chevron-right,
+.main-content .slick-prev .fa-chevron-left,
+.main-content .slick-next .fa-chevron-right,
+.main-content .slick-next .fa-chevron-left {
+  padding-top: 20px;
+  color: #989898 !important;
+  font-size: 15px !important;
+}
+.options-content .slick-prev .fa-chevron-right,
+.options-content .slick-next .fa-chevron-right,
+.main-content .slick-prev .fa-chevron-right,
+.main-content .slick-next .fa-chevron-right {
+  padding-left: 4px;
+}
+.options-content .slick-prev:before,
+.options-content .slick-next:before,
+.main-content .slick-prev:before,
+.main-content .slick-next:before {
+  content: "" !important;
+}
+
+.main-content {
+  margin-bottom: 100px;
+}
+.main-content h3 {
+  font-size: 18px;
+  line-height: 1.4em;
+  letter-spacing: 0.05em;
+}
+
+.slide-img {
+  display: block;
+  overflow: hidden;
+}
+.slide-img img {
+  transition: all 0.5s;
+}
+.slide-img img:hover {
+  transform: scale(1.1);
+}
+
+.img-scale img {
+  transition: all 0.5s;
+  transform: scale(1.1);
+}
+
+.ad-content .ad-slider img {
+  width: 650px;
+  margin: auto;
+  padding: 0 10px;
+}
+.ad-content .ad-slider .slick-prev:before,
+.ad-content .ad-slider .slick-next:before {
+  content: "" !important;
+}
+.ad-content .ad-slider .slick-prev i,
+.ad-content .ad-slider .slick-next i {
+  opacity: 0.3;
+  transition: all 0.3s;
+}
+.ad-content .ad-slider .slick-prev i:hover,
+.ad-content .ad-slider .slick-next i:hover {
+  opacity: 0.8;
+}
+
+.ellipsis-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-break: after-white-space;
+  transition: all 0.2s;
+}
+.ellipsis-title:hover {
+  color: var(--sub-color) !important;
+}
+
+.featured-content .slide-img,
+.topic-content .slide-img,
+.video-content .slide-img {
+  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1607843137);
+}
+
+.video-content .slide-img a {
+  display: block;
+  position: relative;
+}
+.video-content .slide-img a:hover .play-btn img {
+  transform: scale(1.1);
+}
+.video-content .slide-img .play-btn {
+  position: absolute;
+  z-index: 999;
+  bottom: 0;
+  right: 3px;
+}
+.video-content .slide-img .play-btn img {
+  width: 60px;
+  height: 60px;
+}
+
+.topic-content .img-box {
+  border-radius: 5px;
+}
+.topic-content .slick-track {
+  margin: 0;
+  display: flex;
+  justify-content: space-around;
+}
+@media (max-width: 575px) {
+  .topic-content .slick-track {
+    justify-content: start;
+  }
+}
+
+.designer-content h3 {
+  margin: 10px auto 5px;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  line-break: after-white-space;
+}
+@media (max-width: 575px) {
+  .designer-content h3 {
+    width: 160px;
+  }
+}
+.designer-content .name {
+  margin-top: 5px;
+  display: block;
+  font-size: 16px;
+  font-weight: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-break: after-white-space;
+}
+.designer-content .name small {
+  font-size: 12px;
+}
+.designer-content .slide-item {
+  -o-object-position: top;
+     object-position: top;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.designer-content .slick-slide {
+  margin: 0 15px;
+}
+.designer-content section {
+  position: relative;
+}
+.designer-content section .slide-img {
+  margin: 0 auto 15px;
+  height: 130px;
+  width: 130px;
+  border-radius: 100px;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
+  transition: 0.3s all ease-in;
+  overflow: unset;
+}
+.designer-content section .slide-img a {
+  display: block;
+  position: relative;
+}
+.designer-content section .slide-img img {
+  height: 130px;
+  width: 130px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 100px;
+  transform: scale(1) !important;
+}
+.designer-content section .slide-img img:hover {
+  transform: scale(1) !important;
+}
+.designer-content section .slide-img:hover .img-border {
+  opacity: 1 !important;
+}
+.designer-content section .slide-img .img-border {
+  opacity: 0;
+  display: block;
+  border: 2px solid var(--sub-color);
+  width: 140px;
+  height: 140px;
+  position: absolute;
+  top: -5px;
+  left: -5px;
+  border-radius: 100px;
+  z-index: 100;
+  transition: opacity 0.35s cubic-bezier(0.4, 0.8, 0.74, 1) 0s, transform 0.35s cubic-bezier(0.26, 1, 0.48, 1) 0s;
+}
+.designer-content .slick-track {
+  padding-top: 20px;
+}
+
+.topic-slider section,
+.featured-slider section,
+.popular-slider section {
+  padding: 0 10px;
+}
+@media (max-width: 767px) {
+  .topic-slider section,
+  .featured-slider section,
+  .popular-slider section {
+    width: 100%;
+  }
+}
+@media (max-width: 575px) {
+  .topic-slider section,
+  .featured-slider section,
+  .popular-slider section {
+    width: 45vw;
+  }
+}
+@media (max-width: 414px) {
+  .topic-slider section,
+  .featured-slider section,
+  .popular-slider section {
+    width: 75vw;
+  }
+}
+.topic-slider img,
+.featured-slider img,
+.popular-slider img {
+  height: 185px;
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+@media (max-width: 1400px) {
+  .topic-slider img,
+  .featured-slider img,
+  .popular-slider img {
+    height: 11vw;
+  }
+}
+@media (max-width: 991px) {
+  .topic-slider img,
+  .featured-slider img,
+  .popular-slider img {
+    height: 200px;
+  }
+}
+@media (max-width: 767px) {
+  .topic-slider img,
+  .featured-slider img,
+  .popular-slider img {
+    height: 145px;
+  }
+}
+@media (max-width: 575px) {
+  .topic-slider img,
+  .featured-slider img,
+  .popular-slider img {
+    height: 25vw;
+  }
+}
+@media (max-width: 414px) {
+  .topic-slider img,
+  .featured-slider img,
+  .popular-slider img {
+    height: 42vw;
+  }
+}
+.topic-slider .title,
+.featured-slider .title,
+.popular-slider .title {
+  display: flex;
+  align-items: flex-start;
+  margin-top: 10px;
+}
+.topic-slider .tab-block,
+.featured-slider .tab-block,
+.popular-slider .tab-block {
+  display: flex;
+  flex-wrap: wrap;
+  height: 30px;
+  overflow: hidden;
+  margin-top: 10px;
+}
+.topic-slider .tab-block a,
+.featured-slider .tab-block a,
+.popular-slider .tab-block a {
+  display: inline-block;
+  margin-right: 6px;
+}
+.topic-slider .tab-block a:hover h4,
+.featured-slider .tab-block a:hover h4,
+.popular-slider .tab-block a:hover h4 {
+  color: var(--sub-color);
+  border: 1px solid var(--sub-color);
+}
+.topic-slider .tab-block a h4,
+.featured-slider .tab-block a h4,
+.popular-slider .tab-block a h4 {
+  color: #ADADAD;
+  border: 1px solid #ADADAD;
+  border-radius: 5px;
+  padding: 4px 10px;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.popular-slider .slide-img {
+  overflow: auto;
+}
+.popular-slider .slide-img a:first-child {
+  display: block;
+  overflow: hidden;
+  border-radius: 5px;
+  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1607843137);
+}
+.popular-slider .slide-img a:first-child img {
+  border-radius: 5px;
+}
+.popular-slider .designer-item {
+  display: flex;
+  align-items: center;
+  margin: -20px 0 10px 10px;
+}
+.popular-slider .designer-item img {
+  width: 80px;
+  height: 80px;
+  -o-object-position: top;
+     object-position: top;
+  -o-object-fit: cover;
+     object-fit: cover;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
+  transform: scale(1) !important;
+}
+.popular-slider .designer-item h2 {
+  font-size: 16px;
+  margin: 5px 0 0 10px;
+  color: #707070;
+}
+
+.video-slider section {
+  margin: auto 10px;
+  max-width: 300px;
+}
+@media (max-width: 575px) {
+  .video-slider section {
+    width: 43vw;
+  }
+}
+@media (max-width: 414px) {
+  .video-slider section {
+    width: 70vw;
+  }
+}
+.video-slider .slide-img {
+  border-radius: 5px;
+}
+.video-slider .slide-img .slide-item {
+  height: 170px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  width: 100%;
+}
+@media (max-width: 767px) {
+  .video-slider .slide-img .slide-item {
+    height: 135px;
+  }
+}
+@media (max-width: 414px) {
+  .video-slider .slide-img .slide-item {
+    height: 39.5vw;
+  }
+}
+
+#youtubeModal .modal-content {
+  background-color: transparent;
+  border: none;
+}
+#youtubeModal .modal-content .modal-header {
+  border-bottom: none;
+}
+#youtubeModal .modal-content .modal-title {
+  padding: 0;
+  font-size: 30px;
+  font-weight: bold;
+  color: #fff;
+}
+#youtubeModal .modal-body {
+  padding: 10px 0;
+}
+#youtubeModal .modal-body section {
+  display: flex;
+  justify-content: center;
+}
+#youtubeModal .modal-body section h2 {
+  color: #fff;
+  font-size: 20px;
+  margin-top: 15px;
+  border-bottom: 1px solid #fff;
+  text-align: center;
+  padding-bottom: 3px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  line-break: after-white-space;
+  transition: all 0.2s;
+}
+#youtubeModal .video-box {
+  display: flex;
+  margin: auto;
+  position: relative;
+  width: 80%;
+  height: 0;
+  padding-bottom: 45%;
+}
+@media (max-width: 991px) {
+  #youtubeModal .video-box {
+    width: 100%;
+    padding-bottom: 55%;
+  }
+}
+#youtubeModal .video-box iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.featured-slider .slide-img {
+  border-radius: 5px;
+}
+
+@media (max-width: 991px) {
+  .search-modal .modal-dialog {
+    max-width: 100%;
+  }
+}
+.search-modal .modal-content {
+  border: none;
+  background: transparent;
+}
+.search-modal .modal-content .input-group {
+  height: 50px;
+}
+.search-modal .form-control:focus {
+  box-shadow: none;
+}
+.search-modal .keyword-list {
+  display: flex;
+  padding: 0 20px;
+}
+@media (max-width: 991px) {
+  .search-modal .keyword-list {
+    flex-direction: column;
+  }
+}
+.search-modal .keyword-list span {
+  color: #fff;
+  margin-right: 10px;
+}
+.search-modal .keyword-list ul {
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  color: #fff;
+}
+.search-modal .keyword-list ul li {
+  margin: 5px 10px 5px 0;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+.search-modal .keyword-list ul li:hover {
+  opacity: 0.8;
+}
+@media (max-width: 991px) {
+  .search-modal .keyword-list ul li {
+    border-bottom: 1px solid #fff;
+  }
+}
+
+.modal-backdrop.show {
+  opacity: 0.7 !important;
+}
+
+#adModal .modal-header {
+  position: absolute;
+  z-index: 1;
+  right: 0;
+  border: none;
+}
+#adModal .btn-close {
+  transition: all 0.3s;
+  opacity: 1 !important;
+}
+#adModal .btn-close:hover {
+  opacity: 0.7 !important;
+}
+
+/* index End *//*# sourceMappingURL=style.css.map */

hhh_index/css/style.scss

@@ -0,0 +1,4105 @@
+$horizontal: 480px;
+
+:root {
+  --main-color: #34404b;
+  --sub-color: #ee751b;
+}
+
+body {
+  font-family: 'Noto Sans TC', sans-serif;
+  // font-family: "Helvetica Neue";
+}
+
+.scrollable {
+  overflow-x: hidden;
+}
+
+.unscrollable {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.loading-item {
+  background: #fff;
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  z-index: 1000;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loading-hide {
+  animation-name: fadeOut;
+  animation-duration: 1s;
+  opacity: 0;
+  z-index: -1000;
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.sec-00 {
+  background-color: rgb(202, 202, 202);
+  transition-property: height;
+  transition-duration: 300ms;
+
+  .slider-content {
+    padding: .75rem 0;
+
+    @media (max-width: 991px) {
+      padding: 0;
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 0;
+    right: 20px;
+    width: 50px;
+    height: 30px;
+    background-color: hsla(0, 0%, 100%, 0.66);
+    border-radius: 0 0 50px 50px;
+    color: #888;
+    border: none;
+    outline: none;
+    font-size: 11px;
+    box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
+    line-height: 12px;
+    z-index: 3;
+  }
+
+  &.bannerClose {
+    height: 0;
+    overflow: hidden;
+    transition-property: height;
+    transition-duration: 300ms;
+  }
+
+  .container-fluid {
+    background-color: rgb(202, 202, 202);
+    // height: 295px;
+    // @media (max-width: 1850px) {
+    //     height: 260px;
+    // }
+    // @media (max-width: 1550px) {
+    //     height: 230px;
+    // }
+    // @media (max-width: 1100px) {
+    //     height: 200px;
+    // }
+  }
+
+  &__slider {
+    margin: 0 auto;
+    width: 100%;
+    height: 100%;
+    max-width: 1310px;
+    padding-top: 20px;
+    padding-bottom: 24px;
+
+    @media (max-width: 1850px) {
+      max-width: 1310px;
+    }
+
+    @media (max-width: 1550px) {
+      max-width: 1310px;
+    }
+
+    @media (max-width:576px) {
+      max-width: 100%;
+      height: auto;
+    }
+
+    .slide-item {
+      width: 100%;
+      height: 100%;
+      max-width: 1310px;
+      max-height: 300px;
+      -o-object-fit: contain;
+      object-fit: contain;
+      height: 300px;
+      cursor: pointer;
+
+      @media (max-width:576px) {
+        max-width: 100%;
+        height: auto;
+      }
+    }
+  }
+
+  .slick-next {
+    @media (max-width:576px) {
+      right: 25px;
+    }
+  }
+
+  .slick-prev {
+    z-index: 100;
+
+    @media (max-width:576px) {
+      left: 25px;
+    }
+  }
+
+  .slick-prev:before,
+  .slick-next:before {
+    display: none;
+  }
+
+  &-bulletList {
+    position: absolute;
+    bottom: 10px;
+    left: calc(50% - 650px);
+    width: 1300px;
+    box-sizing: border-box;
+    display: flex;
+    z-index: 10;
+    background-color: rgba(0, 0, 0, 0.1);
+
+    @media (max-width:576px) {
+      width: 100%;
+      left: 0px;
+    }
+  }
+
+  &-bullet {
+    position: relative;
+    width: 100%;
+    height: 3px;
+    background-color: rgba(0, 0, 0, 0.1);
+    flex: 1 1 auto;
+    opacity: 1;
+
+    &::after {
+      content: "";
+      background: #ee7800;
+      position: absolute;
+      width: 0;
+      height: 100%;
+      left: 0;
+      top: 0;
+      border-radius: 2px;
+    }
+  }
+
+  .bullet-active::after {
+    width: 0;
+    -webkit-animation-name: progress;
+    animation-name: progress;
+    -webkit-animation-duration: 4s;
+    animation-duration: 4s;
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+  }
+}
+
+@keyframes progress {
+  0% {
+    width: 0%;
+  }
+
+  25% {
+    width: 25%;
+  }
+
+  50% {
+    width: 50%;
+  }
+
+  75% {
+    width: 75%;
+  }
+
+  100% {
+    width: 100%;
+  }
+}
+
+@-webkit-keyframes progress {
+  0% {
+    width: 0%;
+  }
+
+  25% {
+    width: 25%;
+  }
+
+  50% {
+    width: 50%;
+  }
+
+  75% {
+    width: 75%;
+  }
+
+  100% {
+    width: 100%;
+  }
+}
+
+@-webkit-keyframes slidein {
+  100% {
+    height: 0px;
+  }
+}
+
+@keyframes slidein {
+  100% {
+    height: 0px;
+  }
+}
+
+.navbar-main.sticky+.sec-02 {
+  padding-top: 53.5px;
+}
+
+.sec-02 {
+  &__slider {
+    width: 100%;
+    height: 100%;
+
+    .slide-item {
+      width: 100%;
+      height: 74vh;
+      background-position: center center;
+      background-size: cover;
+      background-repeat: no-repeat;
+      cursor: pointer;
+    }
+  }
+
+  .slick-prev:before,
+  .slick-next:before {
+    display: none;
+  }
+
+  .slick-prev {
+    left: 15px;
+    z-index: 3;
+  }
+
+  .slick-next {
+    right: 15px;
+  }
+}
+
+.sec-04 {
+  background-color: #f4f4f4;
+  padding: 4rem 1rem;
+
+  .container {
+    max-width: 950px;
+    width: 70%;
+
+    @media (max-width: 1100px) {
+      width: 90%;
+    }
+  }
+
+  .card {
+    box-shadow: 1px 2px 8px 1px rgb(214, 214, 214);
+    text-decoration: none;
+    cursor: pointer;
+    transition: all 0.6s;
+
+    &-title {
+      font-size: 1.4rem;
+      line-height: 1.8rem;
+      color: #4c4c4c;
+      font-weight: 500;
+      transition: all 2s;
+    }
+
+    &__imgfr {
+      width: 100%;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+}
+
+.sec-guessLike {
+  .container {
+    margin: 0 auto;
+    padding: 2rem 2rem;
+    max-width: 1050px;
+    width: 70%;
+
+    @media (max-width: 1100px) {
+      width: 90%;
+      padding: 0 1rem;
+    }
+  }
+
+  &__titlebox {
+    &-h2 {
+      margin: 0 auto;
+      font-size: 1.8rem;
+      font-weight: 600;
+      color: rgb(83, 83, 83);
+      padding: 0.8rem 0;
+      border-bottom: 6px solid #ee7800;
+      display: inline-block;
+    }
+  }
+
+  &__title {
+    display: block;
+    text-align: center;
+    position: relative;
+    font-size: 1.2rem;
+    margin-bottom: 0.8rem;
+
+    &::before,
+    &::after {
+      position: absolute;
+      content: " ";
+      width: 40%;
+      height: 0rem;
+      border-top: 1px solid black;
+      top: 50%;
+    }
+
+    &::before {
+      left: 0;
+    }
+
+    &::after {
+      left: 60%;
+    }
+  }
+
+  &__article {
+    h5 {
+      font-size: 1.1rem;
+    }
+
+    p {
+      font-size: 14px;
+    }
+  }
+
+  &__case {
+    p {
+      font-size: 1.1rem;
+      font-weight: 500;
+    }
+  }
+
+  &__card {
+    width: 100%;
+    overflow: hidden;
+    height: 26vh;
+    position: relative;
+    background-position: center center;
+    background-size: cover;
+    background-repeat: no-repeat;
+
+    &.special {
+      height: 45vh;
+    }
+
+    &__img {
+      width: 100%;
+      transition: all 0.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: 0.4rem;
+    }
+
+    .nav {
+      &-item {
+        position: relative;
+        padding-right: 18px;
+        padding-left: 18px;
+
+        &::after {
+          position: absolute;
+          content: " ";
+          width: 100%;
+          height: 30%;
+          left: 0;
+          top: 35%;
+          background-color: transparent;
+          border-right: 1px solid rgb(179, 179, 179);
+          z-index: -1;
+        }
+
+        &:nth-of-type(3)::after {
+          display: none;
+        }
+      }
+
+      &-item-link {
+        color: black;
+        font-weight: 500;
+        font-size: 1.6rem;
+        border: none;
+        position: relative;
+        padding: 1.5rem 0;
+        outline: none;
+
+        @media (max-width: 385px) {
+          font-size: 1.1rem;
+        }
+
+        &:focus {
+          outline: none !important;
+        }
+
+        &.active {
+          color: #ee7800;
+        }
+
+        &::before {
+          position: absolute;
+          content: " ";
+          width: 101%;
+          height: 100%;
+          left: -2px;
+          top: 0px;
+          background-color: transparent;
+          border-top: 3px solid #ee7800;
+          opacity: 0;
+        }
+      }
+    }
+
+    .nav-item-link.active::before {
+      opacity: 1;
+    }
+  }
+
+  .tab-pane {
+    height: 100%;
+  }
+
+  &tab-content {
+    height: 35vh;
+  }
+
+  .tabpar {
+    &__card {
+      margin: 3px;
+      position: relative;
+      font-size: 14px;
+      cursor: pointer;
+
+      &__imgfr {
+        width: 100%;
+        height: 25vh;
+        position: relative;
+        background-position: center center;
+        background-size: cover;
+        background-repeat: no-repeat;
+
+        @media (max-width: 1100px) {
+          height: 20vh;
+        }
+      }
+
+      h5 {
+        font-size: 1rem;
+      }
+
+      p {
+        font-size: 0.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: 0.5rem;
+      border-bottom: 6px solid #ee7800;
+      color: #535353;
+      margin-bottom: 0;
+    }
+  }
+
+  &__video {
+    width: 100%;
+    position: relative;
+
+    &__imgfr {
+      width: 100%;
+      height: 34vh;
+      background-position: center center;
+      background-size: cover;
+      background-repeat: no-repeat;
+
+      @media (max-width: 1100px) {
+        height: 25vh;
+      }
+    }
+
+    &__play {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: 2.5rem;
+      height: 2.5rem;
+      z-index: 2;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &__videotxt {
+    width: 90%;
+    margin: 0 auto;
+    background-color: rgba(255, 255, 255, 0.842);
+    box-shadow: 1px 1px 3px 1px rgba(196, 196, 196, 0.795);
+    padding: 0.4rem 0.8rem;
+    transform: translateY(-20%);
+    font-weight: 600;
+    font-size: 1.1rem;
+  }
+
+  &__btns {
+    display: block;
+    outline: none;
+    border: none;
+    padding: 0.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 0.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: 0.3rem;
+    }
+
+    p {
+      font-size: 0.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 0.5s;
+      position: relative;
+    }
+  }
+
+  .slick-prev {
+    top: 40%;
+    left: 0.5rem;
+    z-index: 2;
+  }
+
+  .slick-next {
+    top: 40%;
+    right: 0.5rem;
+    z-index: 2;
+  }
+
+  .slick-prev:before,
+  .slick-next:before {
+    display: none;
+  }
+}
+
+// .sec-07 {
+//     padding: 2rem 0;
+//     .container {
+//         margin:0 auto;
+//         padding: .8rem 1.2rem;
+//         max-width: 1050px;
+//         width: 70%;
+//         background-color: #F4F4F4;
+//         @media (max-width: 1100px) {
+//             width: 90%;
+//             padding: 0 1rem;
+//         }
+//     }
+//     &__slider {
+//         height: 100%;
+//         .slide-item {
+//             height: 23vh;
+//             background-position: center center;
+//             background-size: contain;
+//             background-repeat: no-repeat;
+//             width: 100%;
+//             margin: 0 5px;
+//             cursor: pointer;
+//             @media (max-width: 1100px) {
+//                 height: 18vh;
+//             }
+//         }
+//     }
+// }
+
+.sec-08 {
+  padding-bottom: 2.5rem;
+
+  .container {
+    margin: 0 auto;
+    padding: 1rem 0rem;
+    max-width: 1050px;
+    width: 70%;
+
+    @media (max-width: 1100px) {
+      width: 90%;
+      padding: 0 1rem;
+    }
+  }
+
+  &__title {
+    border-bottom: 6px solid #ee7800;
+    color: #535353;
+
+    h3 {
+      font-size: 1.6rem;
+    }
+  }
+
+  &__slider {
+    width: 100%;
+    cursor: pointer;
+  }
+
+  &__imgfr {
+    width: 100%;
+    height: 28vh;
+    background-position: center center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: relative;
+
+    @media (max-width: 1100px) {
+      height: 20vh;
+    }
+  }
+
+  &__card {
+    h5 {
+      font-size: 1rem;
+    }
+
+    p {
+      font-size: 0.9rem;
+    }
+  }
+
+  &__card__play {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 2.5rem;
+  }
+
+  &__cardtxt {
+    font-size: 14px;
+    padding-right: 0.6rem;
+  }
+
+  .slick-prev {
+    top: 40%;
+    left: -2rem;
+    z-index: 2;
+  }
+
+  .slick-next {
+    top: 40%;
+    right: -2rem;
+    z-index: 2;
+  }
+
+  .slick-prev:before,
+  .slick-next:before {
+    display: none;
+  }
+}
+
+.sec-09 {
+  background-color: #f4f4f4;
+
+  .container {
+    margin: 0 auto;
+    padding: 2rem 0rem;
+    max-width: 1050px;
+    width: 70%;
+
+    @media (max-width: 1100px) {
+      width: 90%;
+      padding: 0 1rem;
+    }
+  }
+
+  &__imgfr {
+    width: 100%;
+    height: 25vh;
+    background-position: center center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: relative;
+
+    @media (max-width: 1100px) {
+      height: 20vh;
+    }
+  }
+
+  &__card {
+    margin: 5px;
+    text-align: center;
+    cursor: pointer;
+
+    p {
+      font-size: 14px;
+      margin-top: 0.5rem;
+    }
+
+    &__play {
+      position: absolute;
+      right: 0.6rem;
+      bottom: 0.6rem;
+      width: 2.5rem;
+    }
+  }
+
+  &__title {
+    border-bottom: 6px solid #ee7800;
+    color: #535353;
+
+    h3 {
+      font-size: 1.6rem;
+    }
+  }
+
+  .slick-prev {
+    top: 40%;
+    left: -2rem;
+    z-index: 2;
+  }
+
+  .slick-next {
+    top: 40%;
+    right: -2rem;
+    z-index: 2;
+  }
+
+  .slick-prev:before,
+  .slick-next:before {
+    display: none;
+  }
+}
+
+.sec-10 {
+  padding: 2.5rem 0;
+
+  .container {
+    max-width: 1000px;
+    width: 70%;
+
+    @media (max-width: 1100px) {
+      width: 90%;
+      padding: 0 1rem;
+    }
+  }
+
+  &__titlebox {
+    border-bottom: 1px solid rgb(75, 75, 75);
+    display: flex;
+    justify-content: center;
+
+    &-h2 {
+      margin: 0 auto;
+      font-size: 1.8rem;
+      font-weight: 600;
+      color: rgb(83, 83, 83);
+      padding: 0.8rem 0;
+      border-bottom: 6px solid #ee7800;
+      display: inline-block;
+    }
+  }
+
+  &__card {
+    cursor: pointer;
+
+    h5 {
+      font-size: 1rem;
+      margin-bottom: 0.3rem;
+    }
+
+    p {
+      font-size: 0.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: 0.8rem 0;
+      border-bottom: 6px solid #ee7800;
+      display: inline-block;
+    }
+  }
+
+  &__card {
+    cursor: pointer;
+
+    h5 {
+      font-size: 1rem;
+      margin-bottom: 0.3rem;
+    }
+
+    p {
+      font-size: 0.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 {
+  padding: 2rem;
+  background-color: #F4F4F4;
+  box-shadow: 0px 0px 20px #00000033;
+
+  h2 {
+    text-align: center;
+    margin: 100px auto 0;
+    color: #707070;
+    font-size: 16px;
+    font-weight: 300;
+    letter-spacing: 0.05rem;
+
+    @media (max-width: 991px) {
+      margin: 80px auto 30px;
+      font-size: 14px;
+    }
+  }
+
+  h4 {
+    color: #797979;
+    text-align: center;
+    margin-bottom: 50px;
+
+    @media (max-width: 991px) {
+      text-align: left;
+      margin-bottom: 20px;
+    }
+  }
+
+  .about-list,
+  .follow-list,
+  .more-list {
+    @media (max-width: 991px) {
+      display: flex;
+      justify-content: center;
+
+      section {
+        width: 300px;
+      }
+    }
+  }
+
+  .about-list {
+    a {
+      color: #707070;
+      transition: all .3s;
+
+      &:hover {
+        opacity: .8;
+      }
+    }
+
+    ul {
+      padding: 0;
+      letter-spacing: 0.05em;
+
+      @media (max-width: 991px) {
+        margin-bottom: 0;
+      }
+
+      li {
+        margin: 5px 0;
+
+        @media (max-width: 991px) {
+          margin: 0;
+          height: 30px;
+        }
+
+        span {
+          color: #EA068C;
+        }
+      }
+    }
+
+    img {
+      width: 20px;
+      height: 20px;
+      margin-right: 7px;
+    }
+  }
+
+  .follow-list {
+    img {
+      width: 45px;
+      height: 45px;
+      transition: all .3s;
+
+      @media (max-width: 1200px) {
+        width: 40px;
+        height: 40px;
+      }
+    }
+
+    .media {
+      display: flex;
+
+      @media (max-width: 991px) {
+        margin: 0 8px 10px 0;
+
+        section {
+          margin-bottom: 20px;
+        }
+      }
+
+      a {
+        display: block;
+        margin: 0 5px;
+        position: relative;
+
+        @media (max-width: 1200px) {
+          margin: 0 3px;
+        }
+      }
+
+      .media-item.after {
+        // display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        opacity: 0;
+      }
+    }
+
+
+    .fb-list {
+      display: flex;
+      margin-top: 30px;
+
+      @media (max-width: 991px) {
+        flex-direction: column;
+        margin-top: 5px;
+      }
+
+      a {
+        display: flex;
+        align-items: center;
+        padding-right: 10px;
+        color: #797979;
+        font-size: .9rem;
+        transition: all .3s;
+
+        @media (max-width: 1200px) {
+          padding-right: 5px;
+          font-size: 14px;
+        }
+
+        @media (max-width: 991px) {
+          font-size: 15px;
+          height: 30px;
+        }
+
+        &:hover {
+          opacity: .8;
+        }
+
+        img {
+          width: 20px;
+          margin-right: 5px;
+
+          @media (max-width: 1200px) {
+            width: 18px;
+            margin-right: 3px;
+          }
+
+          @media (max-width: 991px) {
+            width: 20px;
+            margin-right: 8px;
+          }
+        }
+      }
+    }
+  }
+
+  .follow-list,
+  .more-list {
+    padding: 0;
+    overflow: hidden;
+    position: relative;
+
+    @media (max-width: 991px) {
+      margin-top: 30px;
+      padding-top: 30px;
+      border-top: 1px solid #989898;
+    }
+
+    &::after {
+      content: "";
+      height: 100%;
+      display: block;
+      width: 1px;
+      background: #989898;
+      position: absolute;
+      top: 50px;
+
+      @media (max-width: 991px) {
+        display: none;
+      }
+    }
+  }
+
+  .more-list {
+    ::placeholder {
+      text-align: center;
+    }
+
+    a {
+      display: inline-block;
+      margin: 5px;
+      padding-bottom: 2px;
+      color: #797979;
+      border-bottom: 1px solid;
+      transition: all .3s;
+
+      &:hover {
+        opacity: .8;
+      }
+    }
+
+    .input-focus {
+      border-color: var(--sub-color) !important;
+
+      button {
+        background-color: var(--sub-color) !important;
+      }
+    }
+
+    .input-error {
+      border-color: #FF5252 !important;
+
+      button {
+        background-color: #FF5252 !important;
+      }
+    }
+
+    .subscriber-item {
+      width: 100%;
+      max-width: 300px;
+      margin: auto;
+      display: flex;
+      flex-direction: column;
+      border: 2px solid #34404B;
+
+      &:hover {
+        border: 2px solid var(--sub-color);
+
+        button {
+          background-color: var(--sub-color);
+        }
+      }
+
+
+      @media (max-width: 1200px) {
+        max-width: 250px;
+      }
+
+      @media (max-width: 991px) {
+        max-width: 300px;
+      }
+
+      input:focus {
+        outline: none;
+      }
+
+      input,
+      button {
+        padding: 10px;
+        border: none;
+      }
+
+      button {
+        color: #fff;
+        background-color: #34404B;
+        transition: all .1s;
+        // &:hover {
+        //   background-color: var(--sub-color);
+        // }
+      }
+
+      .spinner-border {
+        display: none;
+      }
+
+      .show {
+        display: inline-block;
+      }
+    }
+
+    .link {
+      width: 230px;
+
+      @media (max-width: 991px) {
+        width: 310px;
+        margin-left: -3px;
+      }
+    }
+  }
+}
+
+/* 舊 */
+// .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: 0.9rem;
+//       display: flex;
+//       align-items: center;
+
+//       @media (max-width: 1100px) {
+//         font-size: 0.8rem;
+//       }
+//     }
+
+//     &-phone {
+//       p {
+//         display: inline;
+
+//         @media (max-width: 900px) {
+//           display: block;
+//         }
+//       }
+
+//       p,
+//       span {
+//         font-size: 0.9rem;
+//       }
+
+//       .text-phone {
+//         color: #ee7800;
+//         text-decoration: none;
+//       }
+//     }
+
+//     &-links {
+//       display: flex;
+//       align-items: center;
+//       margin-top: 1rem;
+//       justify-content: center;
+
+//       &-grp {
+//         padding: 0.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: 0.9rem;
+//           margin-bottom: 0.4rem;
+
+//           @media (max-width: 1100px) {
+//             font-size: 0.8rem;
+//           }
+//         }
+//       }
+//     }
+
+//     &-subscribe {
+//       width: 100%;
+//       margin-top: 1rem;
+
+//       .subscribeBar {
+//         font-size: 0.8rem;
+//         width: 70%;
+//         margin-left: 7%;
+
+//         @media (max-width: 900px) {
+//           width: 75%;
+//           margin-left: 3%;
+//           font-size: 0.7rem;
+//         }
+//       }
+
+//       .subscribeBtn {
+//         width: 20%;
+//         padding: 0.4rem 0.6rem;
+//         padding-bottom: 9px;
+//         border: none;
+//         outline: none;
+//         background-color: rgb(41, 41, 41);
+//         color: white;
+//         border-radius: 0 3px 3px 0;
+//         margin-left: -0.4rem;
+
+//         @media (max-width: 900px) {
+//           margin-left: -0.3rem;
+//           font-size: 0.8rem;
+//           padding-top: 9px;
+//           padding-bottom: 10px;
+//         }
+//       }
+//     }
+//   }
+
+//   &__list-item {
+//     display: flex;
+//     align-items: center;
+//     text-decoration: none;
+//     margin-bottom: 0.5rem;
+
+//     p {
+//       color: #696969;
+//       font-size: 0.9rem;
+//       font-weight: 300;
+//     }
+//   }
+
+//   &__list-icon {
+//     width: 30px;
+//     display: flex;
+//     justify-content: center;
+//     margin-right: 0.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;
+}
+
+.modal-content {
+  letter-spacing: 1px;
+
+  .fm-close {
+    cursor: pointer;
+  }
+}
+
+.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 0.8rem;
+    background-color: rgba(255, 255, 255, 0.897);
+    display: flex;
+    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;
+
+    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: 0.6rem 5rem;
+          background-color: #ee7800;
+          border-radius: 3px;
+          color: white;
+          border: none;
+          outline: none;
+        }
+      }
+
+      .form-step1 {
+        display: block;
+      }
+
+      .form-step2 {
+        display: none;
+      }
+
+      .form-step3 {
+        display: none;
+        position: relative;
+        padding-bottom: 1.5rem;
+      }
+
+      input[type="checkbox"],
+      input[type="radio"] {
+        display: none;
+      }
+
+      .imgfr {
+        background-position: center center;
+        background-size: cover;
+        background-repeat: no-repeat;
+        width: 100%;
+        height: 4.5rem;
+        border-radius: 8px;
+        border: 2px solid transparent;
+      }
+
+      h4 {
+        color: #aaaaaa;
+        font-size: 15px;
+        font-weight: 400;
+      }
+
+      input[type="checkbox"]:checked+.fs-label-info .imgfr {
+        border: 2px solid #ee7800;
+      }
+
+      input[type="checkbox"]:checked+.fs-label-chbox {
+        border: 1px solid #ee7800;
+        color: #ee7800;
+      }
+
+      input[type="radio"]:checked+.fs-label-chbox {
+        border: 1px solid #ee7800;
+        color: #ee7800;
+      }
+
+      .step3-block {
+        margin-bottom: 1rem;
+
+        &:nth-of-type(3) {
+          margin-bottom: 0;
+        }
+
+        &-title {
+          color: #aaaaaa;
+          display: block;
+          margin-bottom: 0.5rem;
+          font-size: 1rem;
+        }
+
+        .radio {
+          display: inline-block;
+          padding: 0.25rem 0.7rem;
+          margin-right: 0.4rem;
+          border: 1px solid #707070;
+          border-radius: 2rem;
+          color: #797979;
+          margin-bottom: 0.5rem;
+        }
+      }
+
+      .skip {
+        padding: 0.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;
+  }
+}
+
+// 個案頁面
+#hhh-cases {
+  .article__readMore::before {
+    content: "";
+    display: inline-block;
+    background: -webkit-gradient(linear, left bottom, left top, from(#fcfcfc), to(rgba(255, 255, 255, 0.454219)));
+    background: linear-gradient(0deg, #fcfcfc 0%, rgba(255, 255, 255, 0.454219) 100%);
+    width: 100%;
+    height: 25px;
+    -webkit-transition: all 300ms ease-in-out;
+    transition: all 300ms ease-in-out;
+  }
+
+  .article__contexts_cases {
+    font-size: 1.1rem;
+    line-height: 1.8;
+    height: 50px;
+    overflow: hidden;
+    -webkit-transition: all 300ms ease-in-out;
+    transition: all 300ms ease-in-out;
+    color: #727679;
+    //  @media (max-width:576px) {
+    //     height: 50px;
+    // }
+  }
+
+  .article__readMore {
+    cursor: pointer;
+    margin-left: auto;
+    margin-right: auto;
+    color: #ffac73;
+    text-align: center;
+    font-size: 90%;
+    padding: 0 0 1rem;
+    -webkit-transform: translateY(-20px);
+    transform: translateY(-20px);
+    -webkit-transition: all 300ms ease-in-out;
+    transition: all 300ms ease-in-out;
+
+    a {
+      text-decoration: none;
+      color: #ffac73;
+    }
+  }
+
+  .img-wrapper-desktop {
+    background-color: #6d6d6d;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    margin: 0 auto;
+  }
+
+  .swiper-zoom-container-desktop {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    text-align: center;
+  }
+
+  .swiper-zoom-container-desktop img {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    -o-object-fit: contain;
+    object-fit: contain;
+  }
+
+  .swiper-zoom-container-sm-desktop {
+    width: 50%;
+    height: 70%;
+  }
+
+  .swiper-zoom-container-sm-desktop {
+    width: 50%;
+    height: 70%;
+  }
+
+  .slick-prev:before,
+  .slick-next:before {
+    display: none;
+  }
+
+  .modal-body {
+    padding: 0 !important;
+  }
+
+  .case-slick-box {
+    height: 100vh;
+    // width: 100%;
+    position: sticky;
+    top: 15px;
+
+    @media (max-width:576px) {
+      height: 60vh;
+      position: static;
+    }
+  }
+
+  .img-wrapper-desktopp {
+    width: 95%;
+    margin: 0 auto;
+    height: 100%;
+  }
+
+  .CaseDetail-slick {
+    height: 100vh;
+    width: 95%;
+    margin: 0 auto;
+
+    @media (max-width:576px) {
+      height: 60vh;
+    }
+
+    .slick-slide {
+      height: 100vh;
+
+      @media (max-width:576px) {
+        height: 60vh;
+      }
+    }
+
+    img {
+      width: 100%;
+      height: auto;
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .breadcrumb {
+    padding: 0.75rem 1rem;
+    letter-spacing: 1px;
+
+    @media (max-width:576px) {
+      margin-bottom: 0;
+      display: block;
+    }
+
+    .breadcrumb-item+.breadcrumb-item::before {
+      float: unset;
+      padding-right: 0.2rem;
+      color: #6c757d;
+      content: var(--bs-breadcrumb-divider, "／");
+    }
+
+    a {
+      font-size: 0.75rem;
+      color: #727679;
+      text-decoration: none;
+    }
+
+    li {
+      @media (max-width:576px) {
+        display: inline;
+      }
+    }
+
+    .active {
+      a {
+        color: #aaaaaa;
+      }
+    }
+  }
+
+  .breadcrumb-item+.breadcrumb-item {
+    padding-left: 0.2rem;
+  }
+
+  .h4 {
+    font-weight: bold;
+    color: #34404b;
+  }
+
+  .article {
+    color: #727679;
+
+    .small {
+      padding: 0.5rem 0;
+      font-size: 80%;
+    }
+  }
+
+  .shadow-sm {
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08) !important;
+  }
+
+  .container-width-column {
+    max-width: 1120px;
+    margin: 0 auto;
+  }
+
+  .article__wrapper {
+    padding: 0.75rem 1rem;
+  }
+
+  .shadow {
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+  }
+
+  .cases-content {
+    // height: 100vh;
+    background: #fcfcfc;
+
+    .caseSlider {
+      background: #fff;
+      max-width: 1310px;
+      margin: 0 auto;
+      padding: 100px;
+      position: relative;
+
+      @media (max-width:576px) {
+        padding: 0;
+      }
+    }
+
+    .caseSlider .morePhotoTip {
+      cursor: pointer;
+      position: absolute;
+      color: #fff;
+      right: 120px;
+      bottom: 120px;
+      padding: 0.2rem 0.8rem;
+      background-color: rgba(0, 0, 0, 0.45);
+      -webkit-transition: all 300ms ease-in-out;
+      transition: all 300ms ease-in-out;
+
+      @media (max-width:576px) {
+        bottom: 10px;
+        right: 10px;
+      }
+    }
+  }
+
+  .container--padding {
+    padding: 1.2rem 0;
+  }
+
+  .info__items {
+    font-size: 1.2rem;
+    text-align: center;
+    color: #34404b;
+    font-weight: 800;
+    min-height: 4.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    @media (max-width:576px) {
+      font-size: 1rem;
+    }
+  }
+
+  .info__items__title {
+    color: #727679;
+    font-weight: 400;
+    font-size: 1rem;
+  }
+
+  .case-scMedia__block {
+    width: 35%;
+    margin: 0 auto;
+
+    @media (max-width:576px) {
+      width: 100%;
+    }
+
+    .case-scMedia__list {
+      background-color: #fff;
+      box-shadow: 0 1px 10px #cecece;
+      border-radius: 45px;
+      padding: 1rem 2.8rem;
+      display: flex;
+      justify-content: space-around;
+
+      @media (max-width:576px) {
+        border-radius: 0px;
+        box-shadow: none;
+        padding: 0;
+      }
+    }
+  }
+
+  .relTag {
+    padding: 1rem;
+
+    a {
+      margin: 0 0 0.6rem 0.6rem;
+      transition: all 300ms ease-in-out;
+
+      &:hover {
+        color: #ffac73;
+        border-color: #ffac73;
+      }
+    }
+  }
+
+  .relTag__items__title {
+    width: 7%;
+  }
+
+  .relTag__items {
+    width: 100%;
+    display: flex;
+    align-items: baseline;
+  }
+
+  .relTag__items__tags {
+    width: 93%;
+  }
+
+  .btn-outline-custom {
+    border-color: #707070;
+  }
+
+  .caseData {
+    color: #727679;
+    padding: 0.5rem 0 0;
+    margin-bottom: 3rem;
+
+    h4 {
+      font-weight: bold;
+      color: #34404b;
+      padding: 0.5rem;
+
+      @media (max-width:576px) {
+        padding: 1rem 0.5rem 0.5rem;
+      }
+    }
+
+    .caseData__infoBlock {
+      position: relative;
+      box-shadow: 0 1px 10px #cecece;
+      padding: 1rem;
+    }
+
+    .caseData__infoItems {
+      padding: 0.5rem;
+    }
+
+    .caseData__infoItems__list {
+      display: flex;
+    }
+
+    .caseData__infoItems__list--lf {
+      justify-content: start;
+      -webkit-box-align: start;
+      display: flex;
+      flex-grow: 0;
+      max-width: 15%;
+      flex-basis: 15%;
+      -webkit-box-flex: 0;
+
+      @media (max-width:576px) {
+        max-width: 25%;
+        flex-basis: 25%;
+      }
+    }
+
+    .caseData__infoItems__list--rt {
+      flex-basis: 80%;
+      flex-grow: 0;
+      max-width: 80%;
+      justify-content: start;
+      word-break: break-all;
+
+      @media (max-width:576px) {
+        flex-basis: 70%;
+        max-width: 70%;
+      }
+    }
+
+    a {
+      text-decoration: none;
+      background-color: transparent;
+      color: #727679;
+    }
+  }
+
+  .caseData__designerBlock {
+    display: flex;
+    box-shadow: 0 1px 10px #cecece;
+
+    ul {
+      list-style-type: none;
+      padding: 0.6rem;
+    }
+  }
+
+  .caseData__designerBlock__designer--pc {
+    padding: 1rem 0.9rem;
+    width: 50%;
+    height: 370px;
+  }
+
+  .caseData__designerBlock__designer {
+    @media (max-width:576px) {
+      width: 60%;
+    }
+  }
+
+  .caseData__designerBlock__designer--above {
+    height: 70%;
+  }
+
+  .caseData__designerBlock__designer--below {
+    height: 25%;
+    border-top: 1px solid #727679;
+  }
+
+  .caseData__designerBlock__avatar--img {
+    height: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+
+    @media (max-width:576px) {
+      height: 190px;
+      background-size: contain;
+    }
+  }
+
+  .caseData__designerBlock__avatar {
+    width: 50%;
+
+    @media (max-width:576px) {
+      width: 40%;
+    }
+  }
+
+  .tel {
+    color: #ee751b !important;
+    font-size: 1.5rem;
+    font-weight: bold;
+
+    @media (max-width:576px) {
+      font-size: 1rem;
+    }
+  }
+
+  .likeSee__state {
+    display: flex;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    -webkit-box-align: center;
+    align-items: center;
+
+    h4 {
+      font-weight: bold;
+      color: #34404b;
+    }
+
+    .likeSee__state__filter--divider {
+      height: 12px;
+      display: inline-block;
+      border: 0.5px solid #9d9d9d;
+    }
+
+    a {
+      color: #727679;
+      text-decoration: none;
+      transition: 0.3s;
+
+      &:hover {
+        color: #ee7800;
+      }
+    }
+
+    .active {
+      color: #ee751b;
+    }
+  }
+
+  .card {
+    border: none;
+    font-size: 0.75rem;
+  }
+
+  .vue-waterfall {
+    position: relative;
+
+    a {
+      color: #727679;
+      text-decoration: none;
+      background-color: transparent;
+      font-size: 0.75rem;
+      transition: all 300ms ease-in-out;
+
+      &:hover {
+        color: #ffac73;
+      }
+    }
+
+    .card-body {
+      padding: 0.5rem 0.5rem 0.5rem 0;
+    }
+
+    .likeSee__tag--item {
+      margin: 0 0.2rem 0 0;
+      text-decoration: none !important;
+      color: #727679;
+      transition: all 300ms ease-in-out;
+
+      &:hover {
+        color: #ffac73;
+      }
+    }
+  }
+
+  .likeSee__tag {
+    padding: 0.5rem 0;
+  }
+
+  .likeSee__tag--item {
+    margin: 0 0.2rem 0 0;
+    text-decoration: none !important;
+    color: #727679;
+    transition: all 300ms ease-in-out;
+
+    &:hover {
+      color: #ffac73;
+    }
+  }
+
+  .likeSee__state__filter--item {
+    cursor: pointer;
+  }
+
+  .formBtn .btn {
+    padding: 1.2rem 0.75rem;
+  }
+
+  .btn-primary {
+    color: #fff;
+    background-color: #ee7800;
+    border-color: #ee7800;
+  }
+
+  .btn-block {
+    display: block;
+    width: 100%;
+  }
+
+  .container-width-ad {
+    max-width: 768px;
+  }
+
+  .formBtn {
+    width: 47%;
+
+    @media (max-width:576px) {
+      margin-top: 15px;
+      width: 100%;
+    }
+  }
+
+  .ad__bgImg {
+    height: 80px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+  }
+
+  .container-width-ad {
+    max-width: 768px;
+    margin-bottom: 30px;
+
+    @media (max-width:576px) {
+      margin-bottom: 100px;
+    }
+  }
+
+  // 彈出視窗
+  .contact-section-avatar {
+    width: 75px;
+    height: 100px;
+  }
+
+  .contact-section-company {
+    font-weight: bold;
+    font-size: 18px;
+    color: #6d6d6d;
+    text-decoration: none;
+    height: calc(18px * 2 * 1.39);
+  }
+
+  .contact-section-detail-box {
+    color: #6d6d6d;
+    display: flex !important;
+
+    .contact-section-detail-lf {
+      flex-basis: 7%;
+      flex-grow: 0;
+      max-width: 7%;
+      display: flex !important;
+      -webkit-box-align: start;
+      -webkit-box-flex: 0;
+    }
+
+    a {
+      color: #6d6d6d;
+      text-decoration: none;
+    }
+  }
+
+  .loading-move {
+    animation-name: move;
+    animation-duration: 2s;
+    animation-delay: 0;
+    animation-iteration-count: infinite;
+    animation-direction: normal;
+    animation-timing-function: linear;
+  }
+
+  @keyframes move {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .info-area-title-desktop {
+    font-size: 18px;
+    font-weight: bold;
+    padding: 0.6rem 0 0.6rem 0.6rem;
+    margin: 1.6rem 0 1rem 0;
+    background-color: #efefef;
+
+    a {
+      color: #6d6d6d;
+      text-decoration: none;
+    }
+  }
+
+  .info-area-data-desktop,
+  .info-area-other-case-desktop,
+  .info-area-same-case-desktop,
+  .info-area-contact-desktop {
+    font-size: 16px;
+    font-weight: bold;
+    color: #6d6d6d;
+
+    a {
+      color: #6d6d6d;
+      text-decoration: none;
+    }
+  }
+
+  .divider {
+    width: 100%;
+    height: 1px;
+    border-left: none;
+    border-bottom: 1px solid #9c9c9c;
+    margin: 10px 0;
+  }
+
+  .data-table-desktop {
+    width: 100%;
+    font-size: 14px;
+    padding: 0.55rem 0;
+  }
+
+  .data-table-lf {
+    -ms-flex-preferred-size: 18%;
+    flex-basis: 18%;
+    -webkit-box-flex: 0;
+    flex-grow: 0;
+    max-width: 25%;
+    display: flex;
+    -webkit-box-pack: start;
+    justify-content: start;
+    -webkit-box-align: start;
+    align-items: start;
+  }
+
+  .contact-section-detail-desktop {
+    font-size: 14px;
+  }
+
+  .contact-section-detail-lf {
+    flex-basis: 7%;
+    -webkit-box-flex: 0;
+
+    flex-grow: 0;
+    display: -webkit-box;
+
+    display: flex;
+    -webkit-box-align: start;
+
+    align-items: start;
+    max-width: 7%;
+  }
+
+  .info {
+    margin: 0 0 1.8rem;
+    -webkit-transition: all 300ms ease-in-out;
+    transition: all 300ms ease-in-out;
+
+    .info__option {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: center;
+      -ms-flex-pack: center;
+      justify-content: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      min-height: 100%;
+    }
+
+    .info__items--ellipse {
+      -webkit-box-orient: vertical;
+      box-orient: vertical;
+      -webkit-line-clamp: 1;
+      line-break: after-white-space;
+      height: calc(19.2px * 1 * 1.5);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-transition: all 300ms ease-in-out;
+      transition: all 300ms ease-in-out;
+
+      @media (max-width:576px) {
+        height: calc(16px * 1 * 1.5);
+        min-height: 0;
+        padding: 0;
+      }
+    }
+
+    .border-sidebar {
+      position: relative;
+    }
+
+    .border-sidebar::after {
+      content: "";
+      display: inline-block;
+      width: 1px;
+      height: calc(150px * 0.8);
+      background-color: #cecece;
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      position: absolute;
+      left: 100%;
+      top: 12px;
+    }
+
+    .mh {
+      min-height: 75px;
+    }
+
+    .border-below {
+      border-bottom: 1px solid #cecece;
+    }
+
+    .container--padding {
+      @media (max-width:576px) {
+        padding: 0 1.875rem;
+      }
+    }
+  }
+
+  .display-pc {
+    @media (max-width:576px) {
+      display: none;
+    }
+  }
+
+  .CaseInfo-pc {
+    @media (max-width:576px) {
+      display: none;
+    }
+  }
+
+  .info--shadow {
+    -webkit-box-shadow: 0 1px 10px #cecece;
+    box-shadow: 0 1px 10px #cecece;
+  }
+}
+
+/* 舊版 */
+.fixed_menu {
+  height: 78px;
+  position: fixed;
+  z-index: 4;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #fff;
+  box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+
+  //padding-bottom: 16px;
+  @media (min-width: $horizontal) {
+    height: 50px;
+  }
+
+  .row {
+    @media (min-width: $horizontal) {
+      height: 50px;
+    }
+  }
+
+  &__box {
+    @media (min-width: $horizontal) {
+      width: 100%;
+      height: 100%;
+    }
+
+    img {
+      &:focus-visible {
+        outline: none;
+      }
+
+      @media (min-width: $horizontal) {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+
+/* 新版 */
+.footer-fix-block {
+  height: 65px;
+  padding: 5px 10px;
+  position: fixed;
+  z-index: 5;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #fff;
+  box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+
+  .footer-fix-wrapper {
+    a {
+      display: flex;
+    }
+
+    img {
+      margin: auto;
+      max-width: 65px;
+    }
+  }
+}
+
+// 文章頁面
+.article--style {
+  background: #fff;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+
+  @media (max-width:576px) {
+    box-shadow: none;
+  }
+}
+
+.article__title {
+  color: #34404b;
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.article__contexts {
+  font-size: 1.1rem;
+  line-height: 1.8;
+
+  @media (max-width:576px) {
+    max-width: calc(100vw - 32px);
+    height: auto !important;
+    word-break: break-word;
+  }
+
+  img {
+    max-width: 80%;
+    margin: 0.5rem 0;
+
+    @media (max-width:576px) {
+      max-width: 100% !important;
+    }
+  }
+
+  p {
+    margin-bottom: 1rem !important;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  strong {
+    font-weight: bolder;
+  }
+}
+
+table {
+  width: 100% !important;
+  display: block;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+iframe {
+  width: 100%;
+  max-width: 640px;
+}
+
+.cardList__items {
+  box-shadow: 0 1px 10px #eee;
+  margin: 0 0 1.5rem;
+
+  img {
+    width: 100%;
+    height: 293px;
+    object-fit: cover;
+  }
+
+  .cardList__items__content {
+    padding: 0.5rem 1rem;
+  }
+
+  .cardList__items--title {
+    font-size: 1.125rem;
+    font-weight: bold;
+    margin: 0.5rem 0;
+    color: #727679;
+  }
+
+  .likeSee__tag--item {
+    margin: 0 0.2rem 0 0;
+  }
+
+  a {
+    font-size: 16px !important;
+  }
+
+  p {
+    margin-bottom: 1rem !important;
+  }
+}
+
+.article__contexts__note {
+  width: 99.5%;
+  margin: 1.8rem auto;
+  font-size: 1.125rem;
+  padding: 1rem;
+  border: 1px solid #727679;
+
+  p {
+    margin-bottom: 1rem !important;
+  }
+}
+
+.scMedia {
+  width: 100%;
+  max-width: 500px;
+  margin: 0 auto;
+
+  @media (max-width:576px) {
+    width: 100%;
+    padding: 1rem 0;
+  }
+
+  .scMedia__list {
+    background-color: #fff;
+    box-shadow: 0 1px 10px #cecece;
+    border-radius: 45px;
+    padding: 1rem 2.8rem;
+    display: flex;
+    justify-content: space-around;
+
+    @media (max-width:576px) {
+      border-radius: 0px;
+      box-shadow: none;
+      padding: 0;
+    }
+
+    a {
+      display: inline-block;
+      margin: 0 5px;
+    }
+
+    span {
+      cursor: pointer;
+    }
+  }
+}
+
+.fixed-btn {
+  position: fixed;
+  right: 15px;
+  bottom: 8rem;
+
+  @media (min-width: $horizontal) {
+    bottom: 5rem;
+  }
+
+  .btn-gotop {
+    padding: 1.2rem 0.8rem;
+    background-color: rgba(255, 255, 255, 0.897);
+    display: flex;
+    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-ads {
+  padding: 2rem 0;
+  background-color: #f4f4f4;
+
+  .slick-prev {
+    left: 15px;
+    z-index: 100;
+  }
+
+  .slick-next {
+    right: 15px;
+  }
+
+  .sec-slide-box {
+    width: 85%;
+    margin: 0 auto;
+  }
+
+  .container {
+    margin: 0 auto;
+    padding: 0.8rem 1.2rem;
+    max-width: 1050px;
+    width: 60%;
+
+    @media (max-width: 1100px) {
+      width: 90%;
+      padding: 0 1rem;
+    }
+  }
+
+  &__slider {
+    height: 100%;
+
+    .slide-item {
+      height: 23vh;
+      cursor: pointer;
+
+      @media (max-width: 1100px) {
+        height: 20vh;
+      }
+    }
+  }
+}
+
+/* index Start */
+
+.info-item {
+  .logo-img {
+    position: absolute;
+    z-index: 10;
+    top: 20px;
+    left: 50px;
+
+    @media (max-width: 991px) {
+      left: 100px;
+    }
+
+    @media (max-width: 767px) {
+      left: 4%;
+      top: 5%;
+    }
+
+    @media (max-width: 575px) {
+      left: 1%;
+      top: 3%;
+    }
+
+    img {
+      width: 100%;
+      object-fit: contain;
+    }
+
+    .img-designer {
+      height: 50px;
+
+      @media (max-width: 767px) {
+        height: 40px;
+      }
+
+      @media (max-width: 575px) {
+        height: 26px;
+      }
+    }
+
+    .img-renovation {
+      height: 60px;
+    }
+
+    .img-glory {
+      height: 70px;
+    }
+
+    .img-glory,
+    .img-renovation {
+      @media (max-width: 767px) {
+        height: 60px;
+      }
+
+      @media (max-width: 575px) {
+        height: 34px;
+      }
+    }
+  }
+
+  section {
+    position: absolute;
+    z-index: 10;
+    bottom: 70px;
+    left: 70px;
+    color: #fff;
+    text-shadow: 1px 1px 4px #333;
+
+    @media (max-width: 991px) {
+      left: 14%;
+      bottom: 10%;
+    }
+
+    @media (max-width: 767px) {
+      left: 6%;
+      bottom: 6%;
+    }
+
+    h3 {
+      font-size: 18px;
+
+      @media (max-width: 767px) {
+        display: none;
+      }
+    }
+
+    div {
+      display: flex;
+      border: 1px solid #fff;
+
+      @media (max-width: 767px) {
+        flex-direction: column;
+      }
+
+      h2 {
+        margin: auto;
+        padding: 5px 30px;
+        font-size: 26px;
+
+        @media (max-width: 575px) {
+          font-size: 18px;
+          margin: 0;
+          text-align: center;
+        }
+      }
+
+      h2:first-child {
+        padding-bottom: 8px;
+        background-color: rgba(237, 237, 237, .3);
+      }
+
+      h2:last-child {
+        font-size: 24px;
+
+        @media (max-width: 575px) {
+          font-size: 18px;
+        }
+
+        small {
+          font-size: 16px;
+          font-weight: 300;
+
+          @media (max-width: 575px) {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.banner-content {
+  max-width: 100%;
+  margin-top: .875rem;
+
+  @media (max-width: 991px) {
+    margin-top: 0;
+  }
+
+  img {
+    width: 1300px;
+    height: 535px;
+    margin: 0 7px;
+    object-fit: cover;
+
+    @media (max-width: 1200px) {
+      width: 100%;
+      height: 400px;
+    }
+
+    @media (max-width: 991px) {
+      height: 50vw;
+    }
+
+    @media (max-width: 767px) {
+      height: 65vw;
+      width: 93vw;
+    }
+  }
+
+  .slick-next:before,
+  .slick-prev:before {
+    content: "" !important;
+  }
+
+  .slick-next {
+    right: 160px;
+    margin-left: auto;
+
+    @media (max-width: 575px) {
+      right: 20px;
+    }
+  }
+
+  .slick-prev {
+    left: -50px;
+    margin-right: auto;
+
+    @media (max-width: 575px) {
+      left: 20px;
+    }
+  }
+
+  .slick-next,
+  .slick-prev {
+    top: 5vw;
+    z-index: 1000;
+
+    i {
+      opacity: .6;
+      font-size: 32px;
+      transition: all .3s;
+    }
+
+    &:hover {
+      i {
+        opacity: 1;
+        // font-size: 36px;
+      }
+    }
+
+    @media (max-width: 1200px) {
+      top: 1vw;
+    }
+
+    i {
+      padding: 200px 100px;
+    }
+  }
+
+  .slick-dots {
+    bottom: 10px;
+
+    li {
+      margin: 0;
+
+      button:before {
+        width: 10px;
+        height: 10px;
+        content: "";
+        opacity: 1;
+        border: 1px solid #fff;
+        border-radius: 100px;
+      }
+    }
+
+    & .slick-active {
+      button:before {
+        color: #fff;
+        background-color: #fff;
+      }
+    }
+  }
+
+  .banner-slider {
+    img {
+      filter: brightness(50%);
+    }
+  }
+
+  .slick-now {
+    img {
+      filter: brightness(100%) !important;
+    }
+  }
+
+  .slick-slide {
+    position: relative;
+  }
+
+}
+
+/* 手機版進度條 */
+.progress {
+  display: none;
+  width: 50%;
+  height: 3px;
+  margin: 10px auto 0;
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: #f5f5f5;
+  background-image: linear-gradient(to right, var(--sub-color), var(--sub-color));
+  background-repeat: no-repeat;
+  background-size: 0 100%;
+  transition: background-size 0.4s ease-in-out;
+
+  @media (max-width: 575px) {
+    display: block;
+  }
+}
+
+.index-content {
+
+  @media (max-width: 991px) {
+    max-width: 100%;
+  }
+
+  * {
+    letter-spacing: 0.05em;
+    font-family: 'Helvetica';
+  }
+
+  .fas {
+    font-family: Font Awesome\ 5 Free !important;
+  }
+
+  h3 {
+    color: #727272;
+    font-weight: bold;
+    line-height: 22px;
+  }
+
+  h5 {
+    padding: 0 10px;
+    margin-bottom: 20px;
+    font-size: 22px;
+    font-weight: bold;
+    color: var(--main-color);
+
+    span {
+      color: var(--sub-color);
+    }
+  }
+
+  .describe {
+    padding-top: 50px;
+    margin: 25px 0;
+    font-size: 32px;
+    font-weight: bold;
+    text-align: center;
+    color: #34404b;
+    line-height: 1.3em;
+    border-top: 1px solid #989898;
+
+    span {
+      color: var(--sub-color);
+    }
+
+    @media (max-width: 991px) {
+      padding-top: 1.3rem;
+    }
+
+    @media (max-width: 767px) {
+      font-size: 25px;
+    }
+  }
+
+  /* 手機版進度條 */
+  // .progress {
+  //   display: none;
+  //   width: 50%;
+  //   height: 3px;
+  //   margin: 10px auto 0;
+  //   border-radius: 10px;
+  //   overflow: hidden;
+  //   background-color: #f5f5f5;
+  //   background-image: linear-gradient(to right, var(--sub-color), var(--sub-color));
+  //   background-repeat: no-repeat;
+  //   background-size: 0 100%;
+  //   transition: background-size 0.4s ease-in-out;
+
+  //   @media (max-width: 575px) {
+  //     display: block;
+  //   }
+  // }
+
+  .card-item {
+    padding: 0 10px;
+    margin-top: 1.3rem;
+
+    a {
+      height: 90px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 16px;
+      font-weight: bold;
+      text-align: center;
+      color: #727272;
+      background-color: #ededed;
+      border-radius: 5px;
+      transition: all .3s;
+      line-height: 1.2rem;
+
+      @media (max-width: 767px) {
+        height: 60px;
+        margin-bottom: 16px;
+      }
+    }
+  }
+
+  .top-card,
+  .center-card {
+    a {
+      position: relative;
+      overflow: hidden;
+
+      span {
+        position: absolute;
+        display: block;
+        width: 0px;
+        height: 0px;
+        border-radius: 100%;
+        transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
+        transform: translate(-50%, -50%);
+        z-index: -1;
+      }
+
+      &:hover {
+        color: #fff;
+        text-shadow: 1px 2px 4px rgb(188 84 6);
+        background-color: transparent !important;
+        span {
+          width: 225%;
+          height: 500%;
+        }
+      }
+    }
+  }
+}
+
+
+.top-card {
+  a {
+    span {
+      // background-color: #f5d2b7;
+      background-color: var(--sub-color);
+    }
+  }
+}
+
+.center-card {
+  a:hover {
+    color: #fff;
+  }
+
+  div:nth-child(1),
+  div:nth-child(2) {
+    a {
+      span {
+        background-color: #EA068C;
+      }
+    }
+  }
+
+  div:nth-child(3) {
+    a {
+      span {
+        background-color: #0F506D;
+      }
+    }
+  }
+}
+
+.more-link {
+  color: var(--sub-color);
+  transition: all 0.2s;
+
+  &:hover {
+    color: var(--sub-color);
+    opacity: 0.7;
+  }
+
+  img {
+    width: 15px;
+    transform: rotate(90deg);
+    filter: invert(50%) sepia(97%) saturate(1293%) hue-rotate(348deg) brightness(95%) contrast(96%);
+  }
+}
+
+.options-content {
+  h3 {
+    font-size: 16px;
+  }
+
+  .space-slider,
+  .options-slider {
+    .slick-list {
+      padding-bottom: 5px;
+    }
+
+    .slick-slide {
+      section {
+        margin: 0 10px;
+        border-radius: 0 0 5px 5px;
+
+        span {
+          height: 170px;
+          display: block;
+          box-shadow: 2px 2px 6px #00000029;
+          border-radius: 5px;
+
+          @media (max-width: 767px) {
+            width: 155px;
+            height: 140px;
+          }
+
+          // @media (max-width: 575px) {
+          //   width: 41vw;
+          // }
+
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 5px 5px 0 0;
+          }
+        }
+
+        a {
+          position: relative;
+          display: flex;
+          height: 100%;
+
+          &:hover {
+            h3 {
+              color: var(--sub-color);
+              background-color: rgba(237, 237, 237, 0.9);
+            }
+
+            img {
+              transform: scale(1.1);
+            }
+          }
+
+          h3 {
+            padding: 10px;
+            text-align: center;
+            color: var(--main-color);
+            background-color: rgba(237, 237, 237, .8);
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: -9px;
+            border-radius: 0 0 5px 5px;
+
+            strong {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-line-clamp: 1;
+              -webkit-box-orient: vertical;
+              line-break: after-white-space;
+              transition: all 0.2s;
+              font-weight: 600;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .space-slider {
+    .slick-slide {
+      section {
+        span {
+          @media (max-width: 767px) {
+            width: 100%;
+          }
+
+          @media (max-width: 575px) {
+            width: 41vw;
+          }
+        }
+      }
+    }
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+}
+
+.options-content,
+.main-content {
+  .slick-prev {
+    left: -10px !important;
+  }
+
+  .slick-next {
+    right: -12px !important;
+  }
+
+  .slick-prev,
+  .slick-next {
+    width: 35px;
+    height: 35px;
+    z-index: 100;
+    box-shadow: 2px 2px 7px #979797;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 100px;
+    transition: all .3s;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.8);
+    }
+
+    .fa-chevron-right,
+    .fa-chevron-left {
+      padding-top: 20px;
+      color: #989898 !important;
+      font-size: 15px !important;
+    }
+
+    .fa-chevron-right {
+      padding-left: 4px;
+    }
+
+    &:before {
+      content: "" !important;
+    }
+  }
+}
+
+.main-content {
+  margin-bottom: 100px;
+
+  h3 {
+    font-size: 18px;
+    line-height: 1.4em;
+    letter-spacing: 0.05em;
+  }
+}
+
+.slide-img {
+  display: block;
+  overflow: hidden;
+
+  img {
+    transition: all .5s;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
+}
+
+.img-scale {
+  img {
+    transition: all .5s;
+    transform: scale(1.1);
+  }
+}
+
+.ad-content {
+  .ad-slider {
+    img {
+      width: 650px;
+      margin: auto;
+      padding: 0 10px;
+    }
+
+    .slick-prev,
+    .slick-next {
+      &:before {
+        content: "" !important;
+      }
+
+      i {
+        opacity: .3;
+        transition: all .3s;
+
+        &:hover {
+          opacity: .8;
+        }
+      }
+
+    }
+  }
+}
+
+// 標題省略
+.ellipsis-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; // 超過兩行則省略
+  -webkit-box-orient: vertical;
+  line-break: after-white-space;
+  transition: all .2s;
+
+  &:hover {
+    color: var(--sub-color) !important;
+  }
+}
+
+.featured-content,
+.topic-content,
+.video-content {
+  .slide-img {
+    box-shadow: 2px 2px 6px #00000029;
+  }
+}
+
+.video-content {
+  .slide-img {
+    a {
+      display: block;
+      position: relative;
+
+      &:hover {
+        .play-btn img {
+          transform: scale(1.1);
+        }
+      }
+    }
+
+    .play-btn {
+      position: absolute;
+      z-index: 999;
+      bottom: 0;
+      right: 3px;
+
+      img {
+        width: 60px;
+        height: 60px;
+      }
+    }
+  }
+}
+
+.topic-content {
+  .img-box {
+    border-radius: 5px;
+  }
+
+  .slick-track {
+    margin: 0;
+    display: flex;
+    justify-content: space-around;
+
+    @media (max-width: 575px) {
+      justify-content: start;
+    }
+  }
+}
+
+.designer-content {
+  h3 {
+    margin: 10px auto 5px;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    line-break: after-white-space;
+
+    @media (max-width: 575px) {
+      width: 160px;
+    }
+  }
+
+  .name {
+    margin-top: 5px;
+    display: block;
+    font-size: 16px;
+    font-weight: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    line-break: after-white-space;
+
+    small {
+      font-size: 12px;
+    }
+  }
+
+  .slide-item {
+    object-position: top;
+    object-fit: contain;
+  }
+
+  .slick-slide {
+    margin: 0 15px;
+  }
+
+  section {
+    position: relative;
+
+    .slide-img {
+      margin: 0 auto 15px;
+      height: 130px;
+      width: 130px;
+      border-radius: 100px;
+      box-shadow: 0px 3px 6px #00000029;
+      transition: 0.3s all ease-in;
+      overflow: unset;
+
+      a {
+        display: block; // for safari
+        position: relative;
+      }
+
+      img {
+        height: 130px;
+        width: 130px;
+        object-fit: cover;
+        border-radius: 100px;
+        transform: scale(1) !important;
+
+        &:hover {
+          transform: scale(1) !important;
+        }
+      }
+
+      &:hover {
+        .img-border {
+          opacity: 1 !important;
+        }
+      }
+
+      .img-border {
+        opacity: 0;
+        display: block;
+        border: 2px solid var(--sub-color);
+        width: 140px;
+        height: 140px;
+        position: absolute;
+        top: -5px;
+        left: -5px;
+        border-radius: 100px;
+        z-index: 100;
+        transition: opacity .35s cubic-bezier(.4, .8, .74, 1) 0s, transform .35s cubic-bezier(.26, 1, .48, 1) 0s, -webkit-transform .35s cubic-bezier(.26, 1, .48, 1) 0s;
+      }
+
+      // &:hover {
+      //   border: 2px solid #fff;
+      //   outline: 2px solid var(--sub-color);
+      // }
+    }
+  }
+
+  .slick-track {
+    padding-top: 20px;
+  }
+}
+
+.topic-slider,
+.featured-slider,
+.popular-slider {
+  section {
+    padding: 0 10px;
+
+    @media (max-width: 767px) {
+      width: 100%;
+    }
+
+    @media (max-width: 575px) {
+      width: 45vw;
+    }
+
+    @media (max-width: 414px) {
+      width: 75vw;
+    }
+  }
+
+  img {
+    height: 185px;
+    width: 100%;
+    object-fit: cover;
+
+    @media (max-width: 1400px) {
+      height: 11vw;
+    }
+
+    @media (max-width: 991px) {
+      height: 200px;
+    }
+
+    @media (max-width: 767px) {
+      height: 145px;
+    }
+
+    @media (max-width: 575px) {
+      height: 25vw;
+    }
+
+    @media (max-width: 414px) {
+      height: 42vw;
+    }
+  }
+
+  .title {
+    // height: 50px;
+    display: flex;
+    align-items: flex-start;
+    margin-top: 10px;
+  }
+
+  .tab-block {
+    display: flex;
+    flex-wrap: wrap;
+    height: 30px;
+    overflow: hidden;
+    margin-top: 10px;
+
+    a {
+      display: inline-block;
+      margin-right: 6px;
+
+      &:hover {
+        h4 {
+          color: var(--sub-color);
+          border: 1px solid var(--sub-color);
+        }
+      }
+
+      h4 {
+        color: #ADADAD;
+        border: 1px solid #ADADAD;
+        border-radius: 5px;
+        padding: 4px 10px;
+        font-size: 14px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+
+.popular-slider {
+  .slide-img {
+    overflow: auto;
+
+    a:first-child {
+      display: block;
+      overflow: hidden;
+      border-radius: 5px;
+      box-shadow: 2px 2px 6px #00000029;
+
+      img {
+        border-radius: 5px;
+      }
+    }
+  }
+
+  .designer-item {
+    display: flex;
+    align-items: center;
+    margin: -20px 0 10px 10px;
+
+    img {
+      width: 80px;
+      height: 80px;
+      object-position: top;
+      object-fit: cover;
+      box-shadow: 0px 3px 6px #00000029;
+      transform: scale(1) !important;
+    }
+
+    h2 {
+      font-size: 16px;
+      margin: 5px 0 0 10px;
+      color: #707070;
+    }
+  }
+}
+
+.video-slider {
+  section {
+    margin: auto 10px;
+    max-width: 300px;
+
+    @media (max-width: 575px) {
+      width: 43vw;
+    }
+
+    @media (max-width: 414px) {
+      width: 70vw;
+    }
+  }
+
+  .slide-img {
+    border-radius: 5px;
+
+    .slide-item {
+      height: 170px;
+      object-fit: cover;
+      width: 100%;
+
+      @media (max-width: 767px) {
+        height: 135px;
+      }
+
+      @media (max-width: 414px) {
+        height: 39.5vw;
+      }
+    }
+  }
+}
+
+#youtubeModal {
+  .modal-content {
+    background-color: transparent;
+    border: none;
+
+    .modal-header {
+      border-bottom: none;
+    }
+
+    .modal-title {
+      padding: 0;
+      font-size: 30px;
+      font-weight: bold;
+      color: #fff;
+    }
+  }
+
+  .modal-body {
+    padding: 10px 0;
+
+    section {
+      display: flex;
+      justify-content: center;
+
+      h2 {
+        color: #fff;
+        font-size: 20px;
+        margin-top: 15px;
+        border-bottom: 1px solid #fff;
+        text-align: center;
+        padding-bottom: 3px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1; // 超過兩行則省略
+        -webkit-box-orient: vertical;
+        line-break: after-white-space; // for safari
+        transition: all .2s;
+      }
+    }
+  }
+
+  .video-box {
+    display: flex;
+    margin: auto;
+    position: relative;
+    width: 80%;
+    height: 0;
+    padding-bottom: 45%;
+
+    @media (max-width: 991px) {
+      width: 100%;
+      padding-bottom: 55%;
+    }
+
+    iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.featured-slider {
+  .slide-img {
+    border-radius: 5px;
+  }
+}
+
+.search-modal {
+  .modal-dialog {
+    @media (max-width: 991px) {
+      max-width: 100%;
+    }
+  }
+
+  .modal-content {
+    border: none;
+    background: transparent;
+
+    .input-group {
+      height: 50px;
+    }
+  }
+
+  .form-control:focus {
+    box-shadow: none;
+  }
+
+  .keyword-list {
+    display: flex;
+    padding: 0 20px;
+
+    @media (max-width: 991px) {
+      flex-direction: column;
+    }
+
+    span {
+      color: #fff;
+      margin-right: 10px;
+    }
+
+    ul {
+      padding: 0;
+      display: flex;
+      flex-wrap: wrap;
+      color: #fff;
+
+      li {
+        margin: 5px 10px 5px 0;
+        cursor: pointer;
+        transition: all 0.3s;
+
+        &:hover {
+          opacity: 0.8;
+        }
+
+        @media (max-width: 991px) {
+          border-bottom: 1px solid #fff;
+        }
+      }
+    }
+  }
+}
+
+.modal-backdrop.show {
+  opacity: 0.7 !important;
+}
+
+#adModal {
+  .modal-header {
+    position: absolute;
+    z-index: 1;
+    right: 0;
+    border: none;
+  }
+
+  .btn-close {
+    transition: all .3s;
+    opacity: 1 !important;
+
+    &:hover {
+      opacity: .7 !important;
+    }
+  }
+}
+
+/* index End */

hhh_index/genjson/gen_realtime.py

@@ -0,0 +1,590 @@
+import os
+from typing import Optional
+from dataset.util import ResultIter
+from datetime import tzinfo
+import datetime
+import mysql.connector
+from mysql.connector import Error
+import dataset
+import json
+from pytube import extract
+import requests
+access_token = "57e1d6642904ecc2348b2768b028b5dd74720f791c7a3fd7ec551db3fd12a303"
+
+hhhMBPath = '../hhh-home-mb'
+hhhPCPath = '../hhh-home-pc'
+
+#connstr = 'mysql://hhh7796hhh:lYmWsu^ujcA1@hhh-v57.cmab1ctkglka.ap-northeast-2.rds.amazonaws.com:3306/xoops?charset=utf8mb4'
+#2022/12/13 change
+connstr = 'mysql://hhh7796hhh:lYmWsu^ujcA1@ec2-3-35-26-49.ap-northeast-2.compute.amazonaws.com:3306/xoops?charset=utf8mb4'
+
+""" db = dataset.connect(
+    'mysql://hhh7796hhh:lYmWsu^ujcA1@hhh-v57.cmab1ctkglka.ap-northeast-2.rds.amazonaws.com:3306/xoops?charset=utf8mb4') """
+#        charset='utf8',
+#        collation='utf8_unicode_ci'
+
+#2022/12/13 change
+connobj = {
+    'host': 'ec2-3-35-26-49.ap-northeast-2.compute.amazonaws.com',
+   'database': 'xoops',
+   'user': 'hhh7796hhh',
+   'password': 'lYmWsu^ujcA1',
+   'use_unicode': True
+#'charset': 'utf8',
+#'collation': 'utf8_unicode_ci'
+  }
+
+#connobj = {
+  #  'host': 'hhh-v57.cmab1ctkglka.ap-northeast-2.rds.amazonaws.com',
+   # 'database': 'xoops',
+   # 'user': 'hhh7796hhh',
+   # 'password': 'lYmWsu^ujcA1',
+   # 'use_unicode': True
+   # #'charset': 'utf8',
+   # #'collation': 'utf8_unicode_ci'
+#}
+
+def ExecuteQuery(isql):
+    with mysql.connector.connect(**connobj) as connection :
+        with connection.cursor(dictionary=True) as cursor:
+    # connection.set_charset_collation('utf8','utf8_general_ci')
+            #cursor = connection.cursor(dictionary=True)
+            cursor.execute(isql)
+            return cursor.fetchall()
+def genjson_new(filename: str = "realtime.json"):
+    
+    jData = json.load(open('../json/'+filename, encoding='utf8'))
+
+    records = ExecuteQuery("SELECT * FROM _had where (now() between start_time and end_time or ( start_time is null and end_time is null) or ( start_time = '0000-00-00 00:00:00' and end_time = '0000-00-00 00:00:00')) and onoff='1' and adtype like '首八大%' ")
+
+    for x in jData:
+
+        # 頂部輪播區-新刊頭
+        if x['id'] == 0:
+
+            records = ExecuteQuery("""SELECT adlogo lo,adlogo_mobile mlo, adhref lk, adlogo_mobile_webp lomwebp, adlogo_webp dwebp FROM _had
+                        WHERE adtype LIKE '新刊頭%'
+                        AND onoff='1'
+                        AND(NOW() BETWEEN start_time AND end_time OR(start_time='0000-00-00 00:00:00' and end_time='0000-00-00 00:00:00') or (start_time is null and end_time is NULL))
+                        ORDER BY cast(SUBSTR(adtype,4) AS DECIMAL)""")
+
+            x["data"] = []
+            for c in records:
+                a = {'imgUrl': c['mlo'], 'link': str(
+                    c['lk']), 'DimgUrl': c['lo'], 'webp': str(c['lomwebp']), 'Dwebp': str(c['dwebp'])}
+                x["data"].append(a)
+            # print(x["data"])
+
+        # 主要輪播區-首八大
+        if x['id'] == 1:
+            records = ExecuteQuery("""SELECT adlogo lo,adlogo_mobile mlo, adhref lk, adlogo_mobile_webp lomwebp, adlogo_webp dwebp,logo_icon,index_char_1,index_char_2_1,index_char_2_2,index_char_2_3 FROM _had
+                        WHERE adtype LIKE '首八大%'
+                        AND onoff='1'
+                        AND(NOW() BETWEEN start_time AND end_time OR(start_time='0000-00-00 00:00:00' and end_time='0000-00-00 00:00:00') or (start_time is null and end_time is NULL))
+                        ORDER BY cast(SUBSTR(adtype,4) AS DECIMAL)""")
+
+            x["data"] = []
+            for c in records:
+                if c['index_char_1']==None:
+                    c['index_char_1']=''
+                if c['index_char_2_1']==None:
+                    c['index_char_2_1']=''
+                if c['index_char_2_2']==None:
+                    c['index_char_2_2']=''
+                if c['index_char_2_3']==None:
+                    c['index_char_2_3']=''
+                a = {'imgUrl': c['mlo'], 'link': str(
+                    c['lk']), 'DimgUrl': c['lo'], 'webp': str(c['lomwebp']), 'Dwebp': str(c['dwebp']),'logo_icon':str(c['logo_icon']),'index_char_1':str(c['index_char_1']),'index_char_2_1':str(c['index_char_2_1']),'index_char_2_2':str(c['index_char_2_2']),'index_char_2_3':str(c['index_char_2_3'])}
+                x["data"].append(a)
+            # print(x["data"])
+
+        #tab區塊-最夯設計, 影音實錄, 專欄文章
+        if x['id'] == 6:
+            x["data"] = []
+            #過年後修改
+            a = {'tab': '編輯精選', 'data': []}
+            records_for_custom = ExecuteQuery("""SELECT hcolumn_id, ctitle,clogo,cdesc,_hcolumn.ctag
+                            FROM homepage_set
+                            LEFT JOIN _hcolumn ON mapping_id = hcolumn_id
+                            WHERE outer_set=8
+                            AND homepage_set.onoff='Y'
+                            AND(NOW() BETWEEN homepage_set.start_time AND homepage_set.end_time OR(homepage_set.start_time='0000-00-00 00:00:00' and homepage_set.end_time='0000-00-00 00:00:00') or (homepage_set.start_time is null and homepage_set.end_time is NULL))
+                            ORDER BY inner_sort limit 4""")
+            
+            
+            #加入不重複id
+            id_use = []
+            for c in records_for_custom:
+                id_use.append(c['hcolumn_id'])
+            id_len = 8 - len(id_use)
+            # print(id_use)
+            str_id_use=''
+            for k in id_use:
+                str_id_use+=' and hcolumn_id!=%s '%k
+            # print(str_id_use)
+
+
+
+            #加入不重複id sql
+            # records = ExecuteQuery("""SELECT ctag,ctitle TT,clogo IMG, CONCAT('/columns/detail/',hcolumn_id,'/') LK, cdesc
+            #                 from _hcolumn
+            #                 WHERE onoff='1' """+str_id_use+"""
+            #                 AND NOW() > sdate
+            #                 ORDER BY hcolumn_id DESC
+            #                 LIMIT 8""")
+            records = ExecuteQuery("""SELECT ctag,ctitle TT,clogo IMG, CONCAT('/columns/detail/',hcolumn_id,'/') LK, cdesc
+                            from _hcolumn
+                            WHERE onoff='1' """ +str_id_use+"""
+                            AND NOW() > sdate
+                            ORDER BY hcolumn_id DESC
+                            LIMIT """+ str(id_len) +""" """)
+
+
+            count_k=1
+            for c in records:
+                ctag_list=c['ctag'].split(',')
+                if len(ctag_list)==1 and ctag_list[0]=='':
+                    ctag_list=[]
+                ad = {'imgUrl': c['IMG'], 'link': c['LK'],
+                    'title': c['TT'],'ctag':ctag_list}
+                a['data'].append(ad)
+                if count_k==4:
+                    for d in records_for_custom:
+                        ad = {'imgUrl': d['clogo'], 'link': "/columns/detail/" + str(
+                            d['hcolumn_id']) + "/", 'title': d['ctitle'], 'ctag':d['ctag'].split(',')}
+                        a["data"].append(ad)
+                count_k+=1
+
+
+            
+            x["data"].append(a)
+
+
+
+
+
+
+            
+
+
+           
+
+
+
+            a = {'tab': '最夯設計', 'data': []}
+            records_for_custom = ExecuteQuery(""" SELECT  hcase_id,caption TT,tag ,cover IMG, CONCAT('/cases/detail/',hcase_id,'/') LK,_hdesigner.hdesigner_id hid,img_path,title
+                            FROM homepage_set
+                            LEFT JOIN _hcase ON mapping_id = hcase_id
+                            left join _hdesigner ON _hcase.hdesigner_id=_hdesigner.hdesigner_id
+                            WHERE outer_set=2 and  _hcase.onoff='1' AND _hdesigner.onoff='1' 
+                            AND homepage_set.onoff='Y'
+                            AND(NOW() BETWEEN homepage_set.start_time AND homepage_set.end_time OR(homepage_set.start_time='0000-00-00 00:00:00' and homepage_set.end_time='0000-00-00 00:00:00') or (homepage_set.start_time is null and homepage_set.end_time is NULL))
+                            ORDER BY inner_sort limit 4""")
+            #加入不重複id
+            id_use = []
+            for c in records_for_custom:
+                id_use.append(c['hcase_id'])
+            id_len = 8 - len(id_use)
+            # print(id_use)
+            str_id_use=''
+            for k in id_use:
+                str_id_use+=' and hcase_id!=%s '%k
+
+            records = ExecuteQuery("""SELECT hcase_id,caption TT,tag ,cover IMG, CONCAT('/cases/detail/',hcase_id,'/') LK,_hdesigner.hdesigner_id hid,img_path,title
+                            from _hcase
+                            left join _hdesigner ON _hcase.hdesigner_id=_hdesigner.hdesigner_id
+                            WHERE
+                            _hcase.onoff='1' AND _hdesigner.onoff='1' 
+                            AND (NOW() > sdate)  """+str_id_use+"""
+                            ORDER BY hcase_id DESC
+                            LIMIT """+ str(id_len) +""" """)
+
+            count_k=1
+            for c in records:
+                # print(c['hcase_id'])
+                ctag_list="、".join(c['tag'].split(',')).split("、")
+                if len(ctag_list)==1 and ctag_list[0]=='':
+                    ctag_list=[]
+                ad = {'imgUrl': c['IMG'], 'link': c['LK'],'img_designer':c['img_path'],
+                    'title': c['TT'],'ctag':ctag_list,'title_designer':c['title'],'link_designer': "/HHH_NEW/designers/index_designerList.php?cid=" + str(c['hid'])}
+                a['data'].append(ad)
+                if count_k==4:
+                    for d in records_for_custom:
+                        ctag_list="、".join(d['tag'].split(',')).split("、")
+                        if len(ctag_list)==1 and ctag_list[0]=='':
+                            ctag_list=[]
+                        ad = {'imgUrl': d['IMG'], 'link': d['LK'],'img_designer':d['img_path'],
+                    'title': d['TT'],'ctag':ctag_list,'title_designer':d['title'],'link_designer': "/HHH_NEW/designers/index_designerList.php?cid=" + str(c['hid'])}
+                        a["data"].append(ad)
+                count_k+=1
+            x["data"].append(a)
+
+
+
+
+
+
+
+
+
+            a = {'tab': '最新影音實錄', 'data': []}
+
+
+
+            records_for_custom = ExecuteQuery(""" SELECT  hvideo_id,title TT,iframe IMG , CONCAT('https://hhh.com.tw/video-post.php?id=',hvideo_id) LK , name
+                            FROM homepage_set
+                            LEFT JOIN _hvideo ON mapping_id = hvideo_id
+                            WHERE outer_set=3 
+                            AND homepage_set.onoff='Y'
+                            AND(NOW() BETWEEN homepage_set.start_time AND homepage_set.end_time OR (homepage_set.start_time='0000-00-00 00:00:00' and homepage_set.end_time='0000-00-00 00:00:00') or (homepage_set.start_time is null and homepage_set.end_time is NULL))
+                            ORDER BY inner_sort limit 4""")
+            #加入不重複id
+            id_use = []
+            for c in records_for_custom:
+                id_use.append(c['hvideo_id'])
+            id_len = 8 - len(id_use)
+            # print(id_use)
+            str_id_use=''
+            for k in id_use:
+                str_id_use+=' and hvideo_id!=%s '%k
+
+            records = ExecuteQuery("""SELECT title TT,iframe IMG , CONCAT('https://hhh.com.tw/video-post.php?id=',hvideo_id) LK , name
+                            from _hvideo where display_datetime < NOW() """+str_id_use+"""
+                            ORDER BY hvideo_id DESC
+                            LIMIT """+ str(id_len) +""" """)
+            count_k=1
+            for c in records:
+                tid = extract.video_id(c['IMG'])
+                timg = "https://img.youtube.com/vi/" + tid+"/hqdefault.jpg"
+                ad = {'imgUrl': timg, 'link': "https://www.youtube.com/watch?v="+str(tid),
+                     'description': c['TT']}
+                a['data'].append(ad)
+                if count_k==4:
+                    for d in records_for_custom:
+                        tid = extract.video_id(d['IMG'])
+                        timg = "https://img.youtube.com/vi/" + tid+"/hqdefault.jpg"
+                        ad = {'imgUrl': timg, 'link': "https://www.youtube.com/watch?v="+str(tid),
+                            'description': d['TT']}
+                        a["data"].append(ad)
+                count_k+=1
+
+            x["data"].append(a)
+
+            
+            # print(x["data"])
+
+        # 主題企劃區
+        if x['id'] == 4:
+            records = ExecuteQuery("""SELECT logo lo, CONCAT('/topic/detail/',htopic_id,'/') lk, `desc`, title FROM _htopic
+WHERE onoff = '1'
+ORDER BY htopic_id DESC limit 3""")
+
+            x["data"] = []
+            #手機板
+            a = {'tab': 'phone', 'data': []}
+            for c in records:
+                phone = {'imgUrl': c['lo'], 'link': str(
+                    c['lk']),  'title': c['title']} #'video': 'false', 'description': c['desc'],
+                a["data"].append(phone)
+            x["data"].append(a)
+            #電腦版
+            records = ExecuteQuery("""SELECT theme_type, mapping_id, IFNULL(ifnull(ifnull(ifnull(_hcase.caption,_hcolumn.ctitle),_hproduct.name),_hvideo.title),_hbrand.title) caption , 
+                IFNULL(ifnull(ifnull(_hcase.cover,_hcolumn.clogo),_hproduct.cover),_hbrand.logo) J,
+(case when theme_type='case' then CONCAT('/cases/detail/d/',mapping_id) when theme_type='column' then CONCAT('/columns/detail/',mapping_id) when theme_type='product' then CONCAT('/product-post.php?id=',mapping_id) when theme_type='video' then CONCAT('https://hhh.com.tw/video-post.php?id=',mapping_id) when theme_type='brand' then CONCAT('/brand-index.php?brand_id=',mapping_id) ELSE '' END) url
+FROM homepage_set left join _hcase ON _hcase.hcase_id=homepage_set.mapping_id AND theme_type='case'-- AND _hcase.onoff = '1'
+LEFT JOIN _hproduct ON mapping_id = _hproduct.id AND theme_type='product'
+LEFT JOIN _hcolumn ON mapping_id = _hcolumn.hcolumn_id AND theme_type='column'
+LEFT JOIN _hvideo ON mapping_id = _hvideo.hvideo_id AND theme_type='video'
+LEFT JOIN _hbrand ON mapping_id = _hbrand.hbrand_id AND theme_type='brand'
+WHERE homepage_set.onoff='Y' and outer_set=1 and (NOW() BETWEEN homepage_set.start_time AND homepage_set.end_time OR(homepage_set.start_time='0000-00-00 00:00:00' and homepage_set.end_time='0000-00-00 00:00:00') or (homepage_set.start_time is null and homepage_set.end_time is NULL)) order by inner_sort asc limit 4""")
+            a = {'tab': 'web', 'data': []}
+            for c in records:
+                phone = {'imgUrl': c['J'], 'link': str(
+                    c['url']),  'title': c['caption']} #'video': 'false', 'description': c['desc'],
+                a["data"].append(phone)
+            x["data"].append(a)
+
+            # print(x["data"])
+
+        # 編輯精選
+        # if x['id'] == 4:
+        #     records = ExecuteQuery("""SELECT hcolumn_id, ctitle, clogo,cdesc
+        #                         FROM homepage_set
+        #                         LEFT JOIN _hcolumn ON mapping_id = hcolumn_id
+        #                         WHERE outer_set=8
+        #                         AND homepage_set.onoff='Y'
+        #                         AND(NOW() BETWEEN homepage_set.start_time AND homepage_set.end_time OR(homepage_set.start_time='0000-00-00 00:00:00' and homepage_set.end_time='0000-00-00 00:00:00') or (homepage_set.start_time is null and homepage_set.end_time is NULL))
+        #                         ORDER BY inner_sort""")
+
+        #     x["data"] = []
+        #     for c in records:
+        #         a = {'imgUrl': c['clogo'], 'link': "https://hhh.com.tw/columns/detail/" + str(
+        #             c['hcolumn_id']) + "/", 'title': c['ctitle'], 'video': 'false', 'description': c['cdesc']}
+        #         x["data"].append(a)
+            # print(x["data"])
+
+        # 首列表廣告
+        if x['id'] == 3:
+            records = ExecuteQuery("""SELECT adlogo lo,adlogo_mobile mlo, adhref lk, adlogo_mobile_webp lomwebp, adlogo_webp dwebp FROM _had
+                        WHERE adtype LIKE '首列表廣告%'
+                        AND onoff='1'
+                        AND(NOW() BETWEEN start_time AND end_time OR(start_time='0000-00-00 00:00:00' and end_time='0000-00-00 00:00:00') or (start_time is null and end_time is NULL))
+                        ORDER BY adtype""")
+
+            x["data"] = []
+            for c in records:
+                a = {'imgUrl': c['mlo'], 'link': str(
+                    c['lk']), 'DimgUrl': c['lo'], 'webp': str(c['lomwebp']), 'Dwebp': str(c['dwebp'])}
+                x["data"].append(a)
+
+            # print(x["data"])
+
+        # 來選好物區
+#         if x['id'] == 6:
+
+#             records = ExecuteQuery(
+#                 "SELECT max_row from outer_site_set WHERE title='來選好貨'")
+
+#             maxrow = 1
+#             for c in records:
+#                 maxrow = c['max_row']
+
+#             records = ExecuteQuery("""(SELECT theme_type, mapping_id, IFNULL(ifnull(ifnull(_hcase.caption,_hcolumn.ctitle),_hproduct.name),_hvideo.title) COLLATE utf8_general_ci caption  , IFNULL(ifnull(_hcase.cover,_hcolumn.clogo),_hproduct.cover) COLLATE utf8_general_ci J, iframe , IFNULL(ifnull(ifnull(_hcase.short_desc,_hcolumn.cdesc),_hproduct.descr),_hvideo.`desc`) COLLATE utf8_general_ci short_desc
+# , (case when theme_type='case' then CONCAT('https://hhh.com.tw/cases/detail/d/',mapping_id) when theme_type='column' then CONCAT('https://hhh.com.tw/columns/detail/',mapping_id) when theme_type='product' then CONCAT('https://hhh.com.tw/product-post.php?id=',mapping_id) when theme_type='video' then CONCAT('https://hhh.com.tw/video-post.php?id=',mapping_id) ELSE '' END) url
+# -- SELECT *
+# FROM homepage_set
+# left join _hcase ON _hcase.hcase_id=homepage_set.mapping_id AND theme_type='case'-- AND _hcase.onoff = '1'
+# LEFT JOIN _hproduct ON mapping_id = _hproduct.id AND theme_type='product'-- AND _hproduct.onoff = '1'
+# LEFT JOIN _hcolumn ON mapping_id = _hcolumn.hcolumn_id AND theme_type='column'-- AND _hcolumn.onoff = '1'
+# LEFT JOIN _hvideo ON mapping_id = _hvideo.hvideo_id AND theme_type='video'
+# WHERE homepage_set.onoff='Y'
+# AND outer_set = (SELECT oss_id from outer_site_set WHERE title='來選好貨')
+# AND(NOW() BETWEEN homepage_set.start_time AND homepage_set.end_time OR(homepage_set.start_time='0000-00-00 00:00:00' and homepage_set.end_time='0000-00-00 00:00:00') or (homepage_set.start_time is null and homepage_set.end_time is NULL))
+# ORDER BY outer_set, inner_sort)
+# UNION
+# (SELECT 'product', id, `name`, cover, NULL ,descr ,CONCAT('https://hhh.com.tw/product-post.php?id=',id) FROM _hproduct WHERE onoff='1' ORDER BY id DESC LIMIT """ + str(maxrow) + """)
+#                                 LIMIT """ + str(maxrow))
+
+#             x["data"] = []
+#             for c in records:
+#                 #print(c)
+#                 if c['iframe'] is None:
+#                     if isinstance(c['J'], bytearray) or isinstance(c['J'], bytes):
+#                         c['J'] = c['J'].decode('utf8')
+#                     if isinstance(c['caption'], bytearray) or isinstance(c['caption'], bytes):
+#                         c['caption'] = c['caption'].decode('utf8')
+#                     if isinstance(c['short_desc'], bytearray) or isinstance(c['short_desc'], bytes):
+#                         c['short_desc'] = c['short_desc'].decode('utf8')
+#                     a = {'imgUrl': c['J'], 'link': c['url'], 'title': c['caption'],
+#                         'description': c['short_desc'], 'video': 'false'}
+#                 else:
+#                     tid = extract.video_id(str(c['iframe']))
+#                     timg = "https://img.youtube.com/vi/" + tid+"/hqdefault.jpg"
+#                     ccaption = ""
+#                     cdescription = ""
+#                     if isinstance(c['caption'], bytearray):
+#                         ccaption = str(c['caption'].decode('utf8'))
+#                     else:
+#                         ccaption = str(c['caption'])
+#                     if c['short_desc'] is not None:
+#                         if isinstance(c['short_desc'], bytes):
+#                             cdescription = str(c['short_desc'].decode('utf8'))
+#                         else:
+#                             cdescription = str(c['short_desc'])
+#                     a = {'imgUrl': timg, 'link': c['url'], 'title': ccaption,
+#                         'description': cdescription, 'video': tid}
+#                 x["data"].append(a)
+#             # print(x["data"])
+
+#         # 本週推薦
+#         if x['id'] == 7:
+#             # records = ExecuteQuery(
+#             #     "SELECT max_row from outer_site_set WHERE title='本週推薦'")
+
+#             maxrow = 8
+#             # for c in records:
+#             #     maxrow = c['max_row']
+
+#             records = ExecuteQuery("""SELECT theme_type, mapping_id, IFNULL(ifnull(ifnull(ifnull(_hcase.caption,_hcolumn.ctitle),_hproduct.name),_hvideo.title),_hbrand.title) caption , 
+#                 IFNULL(ifnull(ifnull(_hcase.cover,_hcolumn.clogo),_hproduct.cover),_hbrand.logo) J, iframe , IFNULL(ifnull(ifnull(ifnull(_hcase.short_desc,_hcolumn.cdesc),_hproduct.descr),_hvideo.`desc`),_hbrand.intro) short_desc
+# , (case when theme_type='case' then CONCAT('https://hhh.com.tw/cases/detail/d/',mapping_id) when theme_type='column' then CONCAT('https://hhh.com.tw/columns/detail/',mapping_id) when theme_type='product' then CONCAT('https://hhh.com.tw/product-post.php?id=',mapping_id) when theme_type='video' then CONCAT('https://hhh.com.tw/video-post.php?id=',mapping_id) when theme_type='brand' then CONCAT('https://hhh.com.tw/brand-index.php?brand_id=',mapping_id) ELSE '' END) url
+# -- SELECT *
+# FROM homepage_set
+# left join _hcase ON _hcase.hcase_id=homepage_set.mapping_id AND theme_type='case'-- AND _hcase.onoff = '1'
+# LEFT JOIN _hproduct ON mapping_id = _hproduct.id AND theme_type='product'-- AND _hproduct.onoff = '1'
+# LEFT JOIN _hcolumn ON mapping_id = _hcolumn.hcolumn_id AND theme_type='column'-- AND _hcolumn.onoff = '1'
+# LEFT JOIN _hvideo ON mapping_id = _hvideo.hvideo_id AND theme_type='video'
+# LEFT JOIN _hbrand ON mapping_id = _hbrand.hbrand_id AND theme_type='brand'
+# WHERE homepage_set.onoff='Y'
+# AND outer_set = (SELECT oss_id from outer_site_set WHERE title='本週推薦')
+# AND(NOW() BETWEEN homepage_set.start_time AND homepage_set.end_time OR(homepage_set.start_time='0000-00-00 00:00:00' and homepage_set.end_time='0000-00-00 00:00:00') or (homepage_set.start_time is null and homepage_set.end_time is NULL))
+# ORDER BY outer_set, inner_sort
+#                             LIMIT """ + str(maxrow))
+
+#             x["data"] = []
+#             for c in records:
+#                 if c['iframe'] is None:
+#                     if isinstance(c['J'], bytearray) or isinstance(c['J'], bytes):
+#                         c['J'] = c['J'].decode('utf8')
+#                     if isinstance(c['caption'], bytearray) or isinstance(c['caption'], bytes):
+#                         c['caption'] = c['caption'].decode('utf8')
+#                     if isinstance(c['short_desc'], bytearray) or isinstance(c['short_desc'], bytes):
+#                         c['short_desc'] = c['short_desc'].decode('utf8')
+#                     a = {'imgUrl': c['J'], 'link': c['url'], 'title': c['caption'],
+#                         'description': c['short_desc'], 'video': 'false'}
+#                 else:
+#                     tid = extract.video_id(str(c['iframe']))
+#                     timg = "https://img.youtube.com/vi/" + tid+"/hqdefault.jpg"
+#                     ccaption = ""
+#                     cdescription = ""
+#                     if isinstance(c['caption'], bytearray):
+#                         ccaption = str(c['caption'].decode('utf8'))
+#                     else:
+#                         ccaption = str(c['caption'])
+#                     if c['short_desc'] is not None:
+#                         if isinstance(c['short_desc'], bytes):
+#                             cdescription = str(c['short_desc'].decode('utf8'))
+#                         else:
+#                             cdescription = str(c['short_desc'])
+#                     a = {'imgUrl': timg, 'link': c['url'], 'title': ccaption,
+#                         'description': cdescription, 'video': tid}
+#                 x["data"].append(a)
+#             # print(x["data"])
+
+#         # 粉絲推薦
+#         if x['id'] == 8:
+
+#             records = ExecuteQuery(
+#                 "SELECT max_row from outer_site_set WHERE title='粉絲推薦'")
+
+#             maxrow = 1
+#             for c in records:
+#                 maxrow = c['max_row']
+
+#             records = ExecuteQuery("""SELECT theme_type, mapping_id, IFNULL(ifnull(ifnull(ifnull(_hcase.caption,_hcolumn.ctitle),_hproduct.name),_hvideo.title),_hbrand.title) caption , 
+#                 IFNULL(ifnull(ifnull(_hcase.cover,_hcolumn.clogo),_hproduct.cover),_hbrand.logo) J, iframe , IFNULL(ifnull(ifnull(ifnull(_hcase.short_desc,_hcolumn.cdesc),_hproduct.descr),_hvideo.`desc`),_hbrand.intro) short_desc
+# , (case when theme_type='case' then CONCAT('https://hhh.com.tw/cases/detail/d/',mapping_id) when theme_type='column' then CONCAT('https://hhh.com.tw/columns/detail/',mapping_id) when theme_type='product' then CONCAT('https://hhh.com.tw/product-post.php?id=',mapping_id) when theme_type='video' then CONCAT('https://hhh.com.tw/video-post.php?id=',mapping_id) when theme_type='brand' then CONCAT('https://hhh.com.tw/brand-index.php?brand_id=',mapping_id) ELSE '' END) url
+# -- SELECT *
+# FROM homepage_set
+# left join _hcase ON _hcase.hcase_id=homepage_set.mapping_id AND theme_type='case'-- AND _hcase.onoff = '1'
+# LEFT JOIN _hproduct ON mapping_id = _hproduct.id AND theme_type='product'-- AND _hproduct.onoff = '1'
+# LEFT JOIN _hcolumn ON mapping_id = _hcolumn.hcolumn_id AND theme_type='column'-- AND _hcolumn.onoff = '1'
+# LEFT JOIN _hvideo ON mapping_id = _hvideo.hvideo_id AND theme_type='video'
+# LEFT JOIN _hbrand ON mapping_id = _hbrand.hbrand_id AND theme_type='brand'
+# WHERE homepage_set.onoff='Y'
+# AND outer_set = (SELECT oss_id from outer_site_set WHERE title='粉絲推薦')
+# AND(NOW() BETWEEN homepage_set.start_time AND homepage_set.end_time OR(homepage_set.start_time='0000-00-00 00:00:00' and homepage_set.end_time='0000-00-00 00:00:00') or (homepage_set.start_time is null and homepage_set.end_time is NULL))
+# ORDER BY outer_set, inner_sort
+#                             LIMIT """ + str(maxrow))
+
+#             x["data"] = []
+#             for c in records:
+#                 if c['iframe'] is None:
+#                     if isinstance(c['J'], bytearray) or isinstance(c['J'], bytes):
+#                         c['J'] = c['J'].decode('utf8')
+#                     if isinstance(c['caption'], bytearray) or isinstance(c['caption'], bytes):
+#                         c['caption'] = c['caption'].decode('utf8')
+#                     if isinstance(c['short_desc'], bytearray) or isinstance(c['short_desc'], bytes):
+#                         c['short_desc'] = c['short_desc'].decode('utf8')
+#                     a = {'imgUrl': c['J'], 'link': c['url'], 'title': c['caption'],
+#                         'description': c['short_desc'], 'video': 'false'}
+#                 else:
+#                     tid = extract.video_id(str(c['iframe']))
+#                     timg = "https://img.youtube.com/vi/" + tid+"/hqdefault.jpg"
+#                     ccaption = ""
+#                     cdescription = ""
+#                     if isinstance(c['caption'], bytearray):
+#                         ccaption = str(c['caption'].decode('utf8'))
+#                     else:
+#                         ccaption = str(c['caption'])
+#                     if c['short_desc'] is not None:
+#                         if isinstance(c['short_desc'], bytes):
+#                             cdescription = str(c['short_desc'].decode('utf8'))
+#                         else:
+#                             cdescription = str(c['short_desc'])
+#                     a = {'imgUrl': timg, 'link': c['url'], 'title': ccaption,
+#                         'description': cdescription, 'video': tid}
+#                 x["data"].append(a)
+        # 推薦設計師
+        if x['id'] == 5:
+            records = ExecuteQuery("""SELECT hdesigner_id,title,img_path,name FROM _hdesigner where onoff=1 order by dorder limit 12;
+                                """)
+
+            x["data"] = []
+            for c in records:
+                a = {'imgUrl': c['img_path'],'name': c['title'] ,'designers_name':c['name'],'link': "/HHH_NEW/designers/index_designerList.php?cid=" + str(c['hdesigner_id'])}
+                x["data"].append(a)
+#=======================================================================================================================
+        # 加好物API
+
+
+        if x['id'] == 7:
+            url = 'https://open.shopline.io/v1/products/search'
+            params = {'per_page': 200, 'page': 1,"category_id":"6108deabe15ff9003e5cef08"}
+            headers = {
+                'accept': 'application/json',
+                'authorization': 'Bearer '+access_token,
+                'User-Agent': 'Shopline test'
+                    }
+
+            response = requests.get(url, params=params, headers=headers)
+
+
+
+            use=response.json()
+            
+
+            x["data"] = []
+            # for i in range(len(use['items'])):
+            for i in range(len(use['items'])):
+                if use['items'][i]['status']=='active':
+                    title = use['items'][i]['title_translations']['zh-hant']
+                    link = use['items'][i]['link']
+                    img = use['items'][i]['medias'][0]['images']['original']['url']
+                    a = {'imgUrl': img,'title': title ,'link':'https://shop.hhh.com.tw/products'+link}
+                    x["data"].append(a)
+
+#=======================================================================================================================
+
+            # print(x["data"])
+
+        # if x['id'] == 9:
+        #     records = ExecuteQuery(
+        #         "SELECT id, (case when youtube_title = '' OR youtube_title IS NULL then (SELECT title FROM _hvideo where display_datetime < NOW() ORDER BY hvideo_id DESC LIMIT 1 ) ELSE youtube_title END) T, (case when youtube_id = '' OR youtube_id IS NULL then (SELECT iframe FROM _hvideo where display_datetime < NOW() ORDER BY hvideo_id DESC LIMIT 1) ELSE youtube_id end) Y FROM site_setup")
+
+        #     for c in records:
+        #         x['title'] = ""
+        #         if isinstance(c['T'], bytearray):
+        #             x['title'] = str(c['T'].decode('utf8'))
+        #         else:
+        #             x['title'] = str(c['T'])
+        #         x['yt'] = extract.video_id(str(c['Y']))
+                # print(id)
+
+        # if x['id'] == 10:
+        #     records = ExecuteQuery(
+        #         "SELECT all_search_tag ast FROM site_setup")
+
+        #     x["data"] = []
+        #     for c in records:
+        #         x["data"] = c['ast'].split(',')
+                # print(id)
+
+    # print(jData)
+    """ if not os.path.exists(hhhMBPath):
+        os.mkdir(hhhMBPath)
+    with open(hhhMBPath+'/json/' + filename, 'w', encoding='utf-8') as f:
+        json.dump(jData, f, ensure_ascii=False, indent=4)
+
+    if not os.path.exists(hhhPCPath):
+        os.mkdir(hhhPCPath)
+    with open(hhhPCPath+'/json/' + filename, 'w', encoding='utf-8') as f:
+        json.dump(jData, f, ensure_ascii=False, indent=4) """
+    with open('../json/' + filename, 'w', encoding='utf-8') as f:
+        json.dump(jData, f, ensure_ascii=False, indent=4)
+
+    return jData
+
+genjson_new("data_index.json")
+#cmd="""curl -X POST "https://api.cloudflare.com/client/v4/zones/8cb58022ad5743cfd9f088d5e3a261eb/purge_cache" -H "X-Auth-Email: web.dept.hhh@gmail.com"  -H "X-Auth-Key:63e51d9a1638d66afcbfc3320aabec52304de" -H "Content-Type: application/json" --data '{"files":["https://hhh.com.tw/hhh_index/json/data_index.json"]}'"""
+#os.system(cmd)

hhh_index/images/icon/feather-briefcase.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.638" height="20.574" viewBox="0 0 22.638 20.574">
+  <g id="Icon_feather-briefcase" data-name="Icon feather-briefcase" transform="translate(-2 -3.5)">
+    <path id="Path_31" data-name="Path 31" d="M5.064,10.5h16.51a2.064,2.064,0,0,1,2.064,2.064V22.883a2.064,2.064,0,0,1-2.064,2.064H5.064A2.064,2.064,0,0,1,3,22.883V12.564A2.064,2.064,0,0,1,5.064,10.5Z" transform="translate(0 -1.872)" fill="none" stroke="#34404b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Path_32" data-name="Path 32" d="M20.255,23.074V6.564A2.064,2.064,0,0,0,18.191,4.5H14.064A2.064,2.064,0,0,0,12,6.564v16.51" transform="translate(-2.809)" fill="none" stroke="#34404b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  </g>
+</svg>

hhh_index/images/icon/feather-chevron-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.828" height="11.414" viewBox="0 0 20.828 11.414">
+  <path id="Icon_feather-chevron-right" data-name="Icon feather-chevron-right" d="M13.5,27l9-9-9-9" transform="translate(-7.586 23.5) rotate(-90)" fill="none" stroke="#989898" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+</svg>

hhh_index/images/icon/feather-file-text.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="25.75" viewBox="0 0 21 25.75">
+  <g id="Icon_feather-file-text" data-name="Icon feather-file-text" transform="translate(-5 -2)">
+    <path id="Path_33" data-name="Path 33" d="M17.875,3h-9.5A2.375,2.375,0,0,0,6,5.375v19A2.375,2.375,0,0,0,8.375,26.75h14.25A2.375,2.375,0,0,0,25,24.375V10.125Z" transform="translate(0)" fill="none" stroke="#989898" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Path_34" data-name="Path 34" d="M21,3v7.125h7.125" transform="translate(-3.125)" fill="none" stroke="#989898" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Path_35" data-name="Path 35" d="M21.5,19.5H12" transform="translate(-1.25 -3.438)" fill="none" stroke="#989898" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Path_36" data-name="Path 36" d="M21.5,25.5H12" transform="translate(-1.25 -4.688)" fill="none" stroke="#989898" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Path_37" data-name="Path 37" d="M14.375,13.5H12" transform="translate(-1.25 -2.188)" fill="none" stroke="#989898" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  </g>
+</svg>

hhh_index/images/icon/feather-shopping-cart.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25.737" height="25.158" viewBox="0 0 25.737 25.158">
+  <g id="Icon_feather-shopping-cart" data-name="Icon feather-shopping-cart" transform="translate(-0.5 -0.5)">
+    <path id="Path_40" data-name="Path 40" d="M14.158,31.079A1.079,1.079,0,1,1,13.079,30,1.079,1.079,0,0,1,14.158,31.079Z" transform="translate(-2.947 -8)" fill="none" stroke="#989898" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+    <path id="Path_41" data-name="Path 41" d="M30.658,31.079A1.079,1.079,0,1,1,29.579,30,1.079,1.079,0,0,1,30.658,31.079Z" transform="translate(-7.579 -8)" fill="none" stroke="#989898" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+    <path id="Path_42" data-name="Path 42" d="M1.5,1.5H5.816L8.708,15.947a2.158,2.158,0,0,0,2.158,1.737H21.353a2.158,2.158,0,0,0,2.158-1.737l1.726-9.053H6.895" fill="none" stroke="#989898" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  </g>
+</svg>

hhh_index/images/icon/ionic-ios-calculator.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.327" height="26.318" viewBox="0 0 26.327 26.318">
+  <g id="Group_842" data-name="Group 842" transform="translate(-1987.393 -900.664)">
+    <path id="Path_3979" data-name="Path 3979" d="M17.467,30.318H7.73A1.73,1.73,0,0,1,6,28.588V7.73A1.73,1.73,0,0,1,7.73,6h15.4a1.73,1.73,0,0,1,1.73,1.73V19.057" transform="translate(1982.393 895.664)" fill="none" stroke="#989898" stroke-linecap="round" stroke-width="2"/>
+    <path id="Path_3980" data-name="Path 3980" d="M212.846,205.423h-.108a5.578,5.578,0,1,0,2.477.58" transform="translate(1794.404 709.3)" fill="none" stroke="#989898" stroke-linecap="round" stroke-width="2"/>
+    <path id="Path_3981" data-name="Path 3981" d="M54.58,45.582H45.349a.745.745,0,0,1-.745-.745V42.263a.745.745,0,0,1,.745-.745H55.919a.745.745,0,0,1,.745.745v.806" transform="translate(1947.217 863.004)" fill="none" stroke="#989898" stroke-linecap="round" stroke-width="1.8"/>
+    <rect id="Rectangle_2013" data-name="Rectangle 2013" width="3.237" height="2.65" rx="1.325" transform="translate(1990.921 910.964)" fill="#989898"/>
+    <rect id="Rectangle_2014" data-name="Rectangle 2014" width="3.237" height="2.65" rx="1.325" transform="translate(1996.253 910.964)" fill="#989898"/>
+    <rect id="Rectangle_2015" data-name="Rectangle 2015" width="3.237" height="2.65" rx="1.325" transform="translate(1990.921 915.942)" fill="#989898"/>
+    <rect id="Rectangle_2016" data-name="Rectangle 2016" width="3.237" height="2.65" rx="1.325" transform="translate(1996.253 915.942)" fill="#989898"/>
+    <rect id="Rectangle_2017" data-name="Rectangle 2017" width="3.237" height="2.65" rx="1.325" transform="translate(1990.921 920.97)" fill="#989898"/>
+    <rect id="Rectangle_2018" data-name="Rectangle 2018" width="3.237" height="2.65" rx="1.325" transform="translate(1996.253 920.97)" fill="#989898"/>
+    <rect id="Rectangle_2019" data-name="Rectangle 2019" width="3.237" height="2.65" rx="1.325" transform="translate(2001.544 910.964)" fill="#989898"/>
+    <path id="Path_3983" data-name="Path 3983" d="M271.519,256.169a2.042,2.042,0,0,0-1.418-.7,1.435,1.435,0,0,0-1.559,1.325c0,.976,1.488,1.13,1.488,1.13s1.64.043,1.64,1.3c0,1.1-1.481,1.054-1.481,1.054a2.015,2.015,0,0,1-1.43-.516" transform="translate(1737.04 662.525)" fill="none" stroke="#989898" stroke-linecap="round" stroke-width="1.8"/>
+    <line id="Line_86" data-name="Line 86" y1="0.836" transform="translate(2007.142 917.163)" fill="none" stroke="#989898" stroke-linecap="round" stroke-width="1.8"/>
+    <line id="Line_87" data-name="Line 87" y2="0.988" transform="translate(2007.142 922.811)" fill="none" stroke="#989898" stroke-linecap="round" stroke-width="1.8"/>
+  </g>
+</svg>

hhh_index/images/icon/ionic-ios-search.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18.469" height="18.474" viewBox="0 0 18.469 18.474">
+  <path id="Icon_ionic-ios-search" data-name="Icon ionic-ios-search" d="M22.753,21.63l-5.137-5.185a7.32,7.32,0,1,0-1.111,1.125l5.1,5.151a.79.79,0,0,0,1.116.029A.8.8,0,0,0,22.753,21.63Zm-10.889-4a5.78,5.78,0,1,1,4.088-1.693A5.745,5.745,0,0,1,11.864,17.633Z" transform="translate(-4.5 -4.493)" fill="#34404b"/>
+</svg>

hhh_index/images/icon/material-people.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.763" height="16.763" viewBox="0 0 16.763 16.763">
+  <path id="Icon_material-people" data-name="Icon material-people" d="M9.881,14.684a3.592,3.592,0,1,0-3.592-3.592A3.577,3.577,0,0,0,9.881,14.684Zm0,2.395c-2.79,0-8.381,1.4-8.381,4.191v2.993H18.263V21.269C18.263,18.48,12.671,17.079,9.881,17.079Z" transform="translate(-1.5 -7.5)" fill="#34404b"/>
+</svg>

hhh_index/images/icon/material-play-circle-outline.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="79.618" height="79.618" viewBox="0 0 79.618 79.618">
+  <defs>
+    <filter id="Icon_material-play-circle-outline" x="0" y="0" width="79.618" height="79.618" filterUnits="userSpaceOnUse">
+      <feOffset dy="3" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feFlood flood-opacity="0.502"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Icon_material-play-circle-outline)">
+    <path id="Icon_material-play-circle-outline-2" data-name="Icon material-play-circle-outline" d="M27.647,47.673,46.132,33.809,27.647,19.945ZM33.809,3A30.809,30.809,0,1,0,64.618,33.809,30.82,30.82,0,0,0,33.809,3Zm0,55.456A24.647,24.647,0,1,1,58.456,33.809,24.68,24.68,0,0,1,33.809,58.456Z" transform="translate(6 3)" fill="#fff" opacity="0.803"/>
+  </g>
+</svg>

hhh_index/images/icon/simple-hipchat.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.498" height="20.087" viewBox="0 0 21.498 20.087">
+  <path id="Icon_simple-hipchat" data-name="Icon simple-hipchat" d="M17.679,17.545s.092-.065.239-.177a8.759,8.759,0,0,0,3.58-6.914c0-5.119-4.813-9.273-10.746-9.273S0,5.334,0,10.453,4.811,19.73,10.747,19.73a12.327,12.327,0,0,0,2.261-.2l.235-.04a11.188,11.188,0,0,0,5.633,1.783.577.577,0,0,0,.494-.989,10.88,10.88,0,0,1-1.691-2.734Zm-1.31-4.054a6.948,6.948,0,0,1-5.6,2.588h-.041a6.957,6.957,0,0,1-5.6-2.588,1.018,1.018,0,0,1-.245-.514.439.439,0,0,1,.4-.471.048.048,0,0,1,.019,0,.563.563,0,0,1,.294.1,8.185,8.185,0,0,0,5.154,1.842,7.887,7.887,0,0,0,5.16-1.844.413.413,0,0,1,.28-.109.432.432,0,0,1,.433.425,1.183,1.183,0,0,1-.24.576h-.01Z" transform="translate(0 -1.181)" fill="#989898"/>
+</svg>

hhh_index/images/logo.svg

@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="150.05" height="43.623" viewBox="0 0 150.05 43.623">
+  <g id="Group_4" data-name="Group 4" transform="translate(-84.885 -58.491)">
+    <g id="Group_1" data-name="Group 1" transform="translate(136.874 68.843)">
+      <path id="Path_1" data-name="Path 1" d="M384.662,266.713h1.48v2.433a2.756,2.756,0,0,1-.565.158,4.322,4.322,0,0,1-.775.061,2.832,2.832,0,0,1-1.119-.213,2.434,2.434,0,0,1-.868-.62,2.784,2.784,0,0,1-.565-1.009,4.373,4.373,0,0,1-.2-1.368,4.3,4.3,0,0,1,.233-1.508,2.758,2.758,0,0,1,.618-1,2.266,2.266,0,0,1,.891-.553,3.322,3.322,0,0,1,1.066-.17,3.525,3.525,0,0,1,.88.109,4.1,4.1,0,0,1,.833.316l.21-.694a3.243,3.243,0,0,0-.932-.34,5.779,5.779,0,0,0-1.119-.1,3.864,3.864,0,0,0-1.422.256,3.153,3.153,0,0,0-1.13.748,3.4,3.4,0,0,0-.746,1.235,5,5,0,0,0-.268,1.7,4.619,4.619,0,0,0,.286,1.691,3.6,3.6,0,0,0,.775,1.228,3.225,3.225,0,0,0,1.142.754,3.8,3.8,0,0,0,1.4.255,5.693,5.693,0,0,0,1.241-.115,5.6,5.6,0,0,0,.938-.3v-3.637h-2.284Z" transform="translate(-381.166 -236.817)" fill="#34404b"/>
+      <path id="Path_2" data-name="Path 2" d="M431.725,263.191a2.785,2.785,0,0,0-1.055-.736,3.516,3.516,0,0,0-1.311-.243,3.4,3.4,0,0,0-1.323.256,2.982,2.982,0,0,0-1.066.754,3.617,3.617,0,0,0-.717,1.229,4.993,4.993,0,0,0-.262,1.691,5.228,5.228,0,0,0,.256,1.721,3.563,3.563,0,0,0,.7,1.228,2.838,2.838,0,0,0,1.055.742,3.546,3.546,0,0,0,2.628-.006,2.966,2.966,0,0,0,1.072-.754,3.6,3.6,0,0,0,.717-1.235,5.044,5.044,0,0,0,.262-1.7,5.233,5.233,0,0,0-.257-1.721A3.57,3.57,0,0,0,431.725,263.191Zm-.134,4.385a2.968,2.968,0,0,1-.525,1.01,2.107,2.107,0,0,1-.769.6,2.281,2.281,0,0,1-.938.195,2.361,2.361,0,0,1-.95-.195,2.131,2.131,0,0,1-.787-.6,2.98,2.98,0,0,1-.536-1.01,4.645,4.645,0,0,1-.2-1.435,4.74,4.74,0,0,1,.192-1.423,2.969,2.969,0,0,1,.524-1.01,2.107,2.107,0,0,1,.769-.6,2.277,2.277,0,0,1,.938-.195,2.428,2.428,0,0,1,.95.188,2.126,2.126,0,0,1,.786.578,2.847,2.847,0,0,1,.536,1,5.443,5.443,0,0,1,.006,2.889Z" transform="translate(-418.126 -236.817)" fill="#34404b"/>
+      <path id="Path_3" data-name="Path 3" d="M481.082,266.855a2.094,2.094,0,0,0,.839-1.077,2.355,2.355,0,0,0,.128-.8,2.553,2.553,0,0,0-.151-.894,1.926,1.926,0,0,0-.443-.7,2.011,2.011,0,0,0-.728-.456,2.859,2.859,0,0,0-1.008-.164h-2.261v7.663h.781v-3.126h1.48l1.818,3.126h.955l-1.992-3.284A2.829,2.829,0,0,0,481.082,266.855Zm-1.725-.255h-1.119v-3.126h1.212a1.945,1.945,0,0,1,1.288.371,1.458,1.458,0,0,1,.437,1.174,1.662,1.662,0,0,1-.14.712,1.351,1.351,0,0,1-.385.493,1.593,1.593,0,0,1-.577.286A2.681,2.681,0,0,1,479.357,266.6Z" transform="translate(-460.561 -237.275)" fill="#34404b"/>
+      <path id="Path_4" data-name="Path 4" d="M518.675,266.713h1.48v2.433a2.759,2.759,0,0,1-.565.158,4.322,4.322,0,0,1-.775.061,2.832,2.832,0,0,1-1.119-.213,2.435,2.435,0,0,1-.868-.62,2.781,2.781,0,0,1-.565-1.009,4.369,4.369,0,0,1-.2-1.368,4.3,4.3,0,0,1,.233-1.508,2.763,2.763,0,0,1,.618-1,2.267,2.267,0,0,1,.891-.553,3.322,3.322,0,0,1,1.066-.17,3.524,3.524,0,0,1,.88.109,4.1,4.1,0,0,1,.833.316l.21-.694a3.239,3.239,0,0,0-.932-.34,5.779,5.779,0,0,0-1.118-.1,3.865,3.865,0,0,0-1.422.256,3.151,3.151,0,0,0-1.13.748,3.4,3.4,0,0,0-.746,1.235,5,5,0,0,0-.268,1.7,4.618,4.618,0,0,0,.286,1.691,3.6,3.6,0,0,0,.775,1.228,3.228,3.228,0,0,0,1.142.754,3.8,3.8,0,0,0,1.4.255,5.694,5.694,0,0,0,1.241-.115,5.6,5.6,0,0,0,.938-.3v-3.637h-2.284Z" transform="translate(-491.663 -236.817)" fill="#34404b"/>
+      <path id="Path_5" data-name="Path 5" d="M563.1,266.831h3.17v-.718H563.1v-2.628h3.473v-.717h-4.311v7.663h4.347v-.718H563.1Z" transform="translate(-530.486 -237.275)" fill="#34404b"/>
+      <path id="Path_6" data-name="Path 6" d="M602.993,263.191a2.785,2.785,0,0,0-1.055-.736,3.515,3.515,0,0,0-1.311-.243,3.4,3.4,0,0,0-1.323.256,2.982,2.982,0,0,0-1.066.754,3.614,3.614,0,0,0-.717,1.229,4.991,4.991,0,0,0-.262,1.691,5.232,5.232,0,0,0,.256,1.721,3.569,3.569,0,0,0,.7,1.228,2.84,2.84,0,0,0,1.055.742,3.546,3.546,0,0,0,2.628-.006,2.965,2.965,0,0,0,1.072-.754,3.6,3.6,0,0,0,.717-1.235,5.044,5.044,0,0,0,.262-1.7,5.233,5.233,0,0,0-.257-1.721A3.567,3.567,0,0,0,602.993,263.191Zm-.134,4.385a2.964,2.964,0,0,1-.524,1.01,2.109,2.109,0,0,1-.769.6,2.28,2.28,0,0,1-.938.195,2.362,2.362,0,0,1-.95-.195,2.131,2.131,0,0,1-.786-.6,2.977,2.977,0,0,1-.536-1.01,4.647,4.647,0,0,1-.2-1.435,4.742,4.742,0,0,1,.192-1.423,2.974,2.974,0,0,1,.524-1.01,2.109,2.109,0,0,1,.769-.6,2.278,2.278,0,0,1,.938-.195,2.428,2.428,0,0,1,.95.188,2.128,2.128,0,0,1,.786.578,2.846,2.846,0,0,1,.536,1,5.44,5.44,0,0,1,.006,2.889Z" transform="translate(-559.341 -236.817)" fill="#34404b"/>
+      <path id="Path_7" data-name="Path 7" d="M653.1,267.5a3.777,3.777,0,0,1-.111.949,2.075,2.075,0,0,1-.338.73,1.541,1.541,0,0,1-.589.475,2.007,2.007,0,0,1-.862.17,1.843,1.843,0,0,1-1.5-.565,2.994,2.994,0,0,1-.472-1.9v-4.585H648.4V267.4a3.279,3.279,0,0,0,.746,2.39,2.783,2.783,0,0,0,2.063.748,2.668,2.668,0,0,0,2.022-.748,3.266,3.266,0,0,0,.717-2.329v-4.7H653.1Z" transform="translate(-601.504 -237.275)" fill="#34404b"/>
+      <path id="Path_8" data-name="Path 8" d="M695.938,265.849l-.781-.268a2.739,2.739,0,0,1-1.014-.542,1.11,1.11,0,0,1-.326-.845,1.123,1.123,0,0,1,.431-.943,1.812,1.812,0,0,1,1.142-.335,3.486,3.486,0,0,1,.822.1,4.605,4.605,0,0,1,.9.34l.21-.718a4.048,4.048,0,0,0-.961-.328,5.1,5.1,0,0,0-1.008-.1,2.551,2.551,0,0,0-1.783.566,1.968,1.968,0,0,0-.617,1.527,1.713,1.713,0,0,0,.454,1.247,2.885,2.885,0,0,0,1.189.712l.757.255a3.887,3.887,0,0,1,.711.31,1.843,1.843,0,0,1,.443.347,1.042,1.042,0,0,1,.227.4,1.573,1.573,0,0,1,.064.456,1.146,1.146,0,0,1-.472,1.01,2.023,2.023,0,0,1-1.183.328,4.165,4.165,0,0,1-1-.116,4.271,4.271,0,0,1-.961-.371l-.221.718a4.672,4.672,0,0,0,1.113.377,5.715,5.715,0,0,0,1.113.109,3.142,3.142,0,0,0,1-.152,2.372,2.372,0,0,0,.781-.426,1.884,1.884,0,0,0,.507-.669,2.132,2.132,0,0,0,.181-.894,1.98,1.98,0,0,0-.414-1.235A2.746,2.746,0,0,0,695.938,265.849Z" transform="translate(-638.244 -236.817)" fill="#34404b"/>
+      <path id="Path_9" data-name="Path 9" d="M760.956,265.882l-.781-.268a2.738,2.738,0,0,1-1.014-.541,1.111,1.111,0,0,1-.326-.845,1.123,1.123,0,0,1,.431-.943,1.812,1.812,0,0,1,1.142-.335,3.475,3.475,0,0,1,.822.1,4.581,4.581,0,0,1,.9.34l.21-.718a4.043,4.043,0,0,0-.961-.328,5.1,5.1,0,0,0-1.008-.1,2.551,2.551,0,0,0-1.783.566,1.968,1.968,0,0,0-.617,1.527,1.714,1.714,0,0,0,.454,1.247,2.889,2.889,0,0,0,1.189.712l.757.255a3.894,3.894,0,0,1,.711.31,1.85,1.85,0,0,1,.443.347,1.045,1.045,0,0,1,.227.4,1.579,1.579,0,0,1,.064.456,1.147,1.147,0,0,1-.472,1.01,2.024,2.024,0,0,1-1.183.328,4.165,4.165,0,0,1-1-.116,4.279,4.279,0,0,1-.961-.371l-.221.718a4.681,4.681,0,0,0,1.113.377,5.7,5.7,0,0,0,1.113.109,3.142,3.142,0,0,0,1-.152,2.369,2.369,0,0,0,.781-.426,1.883,1.883,0,0,0,.507-.669,2.131,2.131,0,0,0,.18-.894,1.98,1.98,0,0,0-.414-1.235A2.748,2.748,0,0,0,760.956,265.882Z" transform="translate(-691.854 -236.844)" fill="#34404b"/>
+      <path id="Path_10" data-name="Path 10" d="M802.017,263.38a2.236,2.236,0,0,0-.786-.432,3.221,3.221,0,0,0-.99-.146h-2.156v7.663h.839v-3.1h1.2a3.474,3.474,0,0,0,1.031-.146,2.341,2.341,0,0,0,.816-.432,2.009,2.009,0,0,0,.542-.718,2.381,2.381,0,0,0,.2-1,2.466,2.466,0,0,0-.18-.979A1.915,1.915,0,0,0,802.017,263.38Zm-.344,2.463a1.206,1.206,0,0,1-.419.48,1.779,1.779,0,0,1-.653.249,4.5,4.5,0,0,1-.839.073h-.839v-3.138h1.1a3.03,3.03,0,0,1,.664.073,1.535,1.535,0,0,1,.577.255,1.365,1.365,0,0,1,.408.487,1.631,1.631,0,0,1,.157.754A1.713,1.713,0,0,1,801.673,265.843Z" transform="translate(-724.926 -237.303)" fill="#34404b"/>
+      <path id="Path_11" data-name="Path 11" d="M830.128,262.8l-2.89,7.663h.874l.8-2.19h3.146l.8,2.19h.885l-2.843-7.663Zm1.678,4.768h-2.657l.606-1.642q.1-.267.192-.517t.175-.5q.087-.255.181-.535t.187-.6h.023q.2.645.379,1.186t.332.967Z" transform="translate(-748.964 -237.303)" fill="#34404b"/>
+      <path id="Path_12" data-name="Path 12" d="M873.191,263.717a2.281,2.281,0,0,1,.868-.572,2.993,2.993,0,0,1,1.043-.183,3.513,3.513,0,0,1,.868.1,3.924,3.924,0,0,1,.787.3l.2-.681a3.686,3.686,0,0,0-.839-.322,4.739,4.739,0,0,0-1.142-.116,3.668,3.668,0,0,0-1.4.262,3.128,3.128,0,0,0-1.113.766,3.518,3.518,0,0,0-.734,1.241,4.96,4.96,0,0,0-.262,1.672,4.8,4.8,0,0,0,.274,1.691,3.6,3.6,0,0,0,.746,1.228,3.1,3.1,0,0,0,1.107.754,3.6,3.6,0,0,0,1.358.255,5.232,5.232,0,0,0,1.124-.1,3.623,3.623,0,0,0,.845-.3l-.2-.706a4.133,4.133,0,0,1-.717.28,3.473,3.473,0,0,1-.95.109,2.973,2.973,0,0,1-1-.17,2.29,2.29,0,0,1-.862-.547,2.7,2.7,0,0,1-.606-.985,4.98,4.98,0,0,1,0-2.974A2.871,2.871,0,0,1,873.191,263.717Z" transform="translate(-785.432 -236.844)" fill="#34404b"/>
+      <path id="Path_13" data-name="Path 13" d="M916.068,266.864h3.17v-.718h-3.17v-2.628h3.472V262.8h-4.311v7.663h4.347v-.718h-3.508Z" transform="translate(-821.516 -237.303)" fill="#34404b"/>
+      <path id="Path_14" data-name="Path 14" d="M401.872,127.068a16.46,16.46,0,0,1,2.477.144v-1.636a16.682,16.682,0,0,1-2.477.144h-7.384v-2.67h5.7a16.718,16.718,0,0,1,2.453.145v-1.636a16.747,16.747,0,0,1-2.453.144h-5.7v-.433a13.377,13.377,0,0,1,.144-2.141H392.78a14.157,14.157,0,0,1,.144,2.117v.457H387.56a16.75,16.75,0,0,1-2.454-.144V123.2a17.182,17.182,0,0,1,2.454-.145h5.364v2.67h-6.951a17.142,17.142,0,0,1-2.478-.144v1.636a18.1,18.1,0,0,1,2.478-.144Z" transform="translate(-383.086 -118.842)" fill="#34404b"/>
+      <path id="Path_15" data-name="Path 15" d="M391,174.973v2.165a16.586,16.586,0,0,1-.168,2.453h1.9a15.3,15.3,0,0,1-.168-2.453v-2.165h7.842a17,17,0,0,1,2.453.144v-1.636a16.64,16.64,0,0,1-2.429.144h-7.866v-2.694h5.917a16.913,16.913,0,0,1,2.477.144V169.44a17.365,17.365,0,0,1-2.477.145h-2.79a24.884,24.884,0,0,0,1.9-3.416l-1.467-.433a18.572,18.572,0,0,1-1.972,3.849h-8.371a17.6,17.6,0,0,1-2.477-.145v1.636a18.6,18.6,0,0,1,2.477-.144H391v2.694h-7.384a17,17,0,0,1-2.453-.144v1.636a17.714,17.714,0,0,1,2.453-.144Z" transform="translate(-381.166 -157.269)" fill="#34404b"/>
+      <path id="Path_16" data-name="Path 16" d="M411.57,169.126l1.251-.7a12.922,12.922,0,0,0-1.78-3.1l-1.227.626A15.564,15.564,0,0,1,411.57,169.126Z" transform="translate(-404.787 -156.931)" fill="#34404b"/>
+      <path id="Path_17" data-name="Path 17" d="M587.536,194.229a18.055,18.055,0,0,1-.144-2.477V186a18.852,18.852,0,0,1,.1-2.309,17.859,17.859,0,0,1-2.333.1H577c-1.058,0-1.8-.024-2.381-.072a19.346,19.346,0,0,1,.1,2.309V191.7a17.547,17.547,0,0,1-.145,2.429h1.564v-1.106h9.814v1.2Zm-5.989-9.188h4.4v2.6h-4.4Zm-1.371,6.735h-4.041v-2.91h4.041Zm0-4.137h-4.041v-2.6h4.041Zm1.371,4.137v-2.91h4.4v2.91Z" transform="translate(-540.634 -172.076)" fill="#34404b"/>
+      <path id="Path_18" data-name="Path 18" d="M583.868,125.967a20.8,20.8,0,0,1,2.285.12v-1.612a20.757,20.757,0,0,1-2.381.12H574.9a22.766,22.766,0,0,1-2.381-.12v1.612a21.49,21.49,0,0,1,2.285-.12Z" transform="translate(-538.938 -123.249)" fill="#34404b"/>
+      <path id="Path_19" data-name="Path 19" d="M529.861,149.592a22.414,22.414,0,0,1,2.213,2.622l.938-1.2a14.91,14.91,0,0,0-2.117-2c-.457-.361-.505-.409-.866-.7a20.338,20.338,0,0,0,2.622-4.281,6.6,6.6,0,0,1,.481-.938l-.7-.914a5.383,5.383,0,0,1-1.131.072h-4.233a14.82,14.82,0,0,1-1.8-.1v1.564a16.456,16.456,0,0,1,1.852-.1H531.3a17.905,17.905,0,0,1-2.622,4.234,18.989,18.989,0,0,1-4.281,3.848,3.946,3.946,0,0,1,.866,1.323,24.411,24.411,0,0,0,3.127-2.838v7.312c0,.914-.048,1.78-.12,2.525h1.708a19.658,19.658,0,0,1-.12-2.525Z" transform="translate(-499.267 -137.83)" fill="#34404b"/>
+      <path id="Path_20" data-name="Path 20" d="M544.177,121.216a18.123,18.123,0,0,0-2.333-3.32l-1.131.673a15.929,15.929,0,0,1,2.189,3.44Z" transform="translate(-512.717 -117.824)" fill="#34404b"/>
+      <path id="Path_21" data-name="Path 21" d="M591.549,142.571a18.868,18.868,0,0,1-2.213.12h-6.062a15.043,15.043,0,0,1-2.261-.12,16.056,16.056,0,0,1,.1,2v1.564a15.166,15.166,0,0,1-.1,1.972,20.041,20.041,0,0,1,2.285-.1h5.965a18.734,18.734,0,0,1,2.285.1,15,15,0,0,1-.1-2.021v-1.539A14.9,14.9,0,0,1,591.549,142.571Zm-1.539,4.209h-7.481v-2.838h7.481Z" transform="translate(-545.946 -138.169)" fill="#34404b"/>
+      <path id="Path_22" data-name="Path 22" d="M689.167,196.867V190.83h4.907a17.349,17.349,0,0,1,2.429.144v-1.66a17.74,17.74,0,0,1-2.5.144H682.793a11.635,11.635,0,0,1-2.309-.144v1.66a12.464,12.464,0,0,1,2.381-.144H687.6v6.037h-6.879a19.225,19.225,0,0,1-2.67-.144v1.708a17.849,17.849,0,0,1,2.67-.168h15.587a17.5,17.5,0,0,1,2.6.168v-1.708a18.31,18.31,0,0,1-2.6.144Z" transform="translate(-625.958 -176.71)" fill="#34404b"/>
+      <path id="Path_23" data-name="Path 23" d="M681.07,125.351h1.612v-3.343H699.3v3.175h1.612a9.247,9.247,0,0,1-.12-1.684v-1.323a10.816,10.816,0,0,1,.1-1.66,20.228,20.228,0,0,1-2.429.12h-6.567a23.821,23.821,0,0,0-1.9-3.151l-1.251.6a14.95,14.95,0,0,1,1.539,2.55h-6.759a20.228,20.228,0,0,1-2.429-.12,11.224,11.224,0,0,1,.1,1.66v1.275A12.026,12.026,0,0,1,681.07,125.351Z" transform="translate(-628.445 -117.486)" fill="#34404b"/>
+      <path id="Path_24" data-name="Path 24" d="M680.806,157.7a19.156,19.156,0,0,0,4.33-2.573,14.514,14.514,0,0,0,2.814-2.959l-1.347-.553a12.457,12.457,0,0,1-2.622,2.574,17.93,17.93,0,0,1-4.281,2.189A3.234,3.234,0,0,1,680.806,157.7Z" transform="translate(-627.315 -145.629)" fill="#34404b"/>
+      <path id="Path_25" data-name="Path 25" d="M748.65,152.556a51.74,51.74,0,0,1,6.855,5.22l1.179-1.131a54.838,54.838,0,0,0-7.072-5.027Z" transform="translate(-684.167 -145.629)" fill="#34404b"/>
+      <path id="Path_26" data-name="Path 26" d="M828.145,142.619h1.78a17.357,17.357,0,0,1-.144-2.694V128.619h4.4c.962,0,1.78.024,2.43.072-.048-.6-.072-1.275-.072-2.237v-2.983c0-.89.024-1.612.072-2.285a21.08,21.08,0,0,1-2.454.1h-3.44a22.234,22.234,0,0,1-2.526-.1c.072.769.1,1.467.1,2.646v16.092A17.985,17.985,0,0,1,828.145,142.619Zm1.636-20.157h5.388v1.924h-5.388Zm0,3.055h5.388v1.948h-5.388Z" transform="translate(-749.712 -120.538)" fill="#34404b"/>
+      <path id="Path_27" data-name="Path 27" d="M897.835,140.285V123.833a22.761,22.761,0,0,1,.12-2.646,22.235,22.235,0,0,1-2.526.1h-3.969a20.813,20.813,0,0,1-2.453-.1c.048.721.072,1.443.072,2.285v2.983c0,.89-.024,1.611-.072,2.237.65-.048,1.419-.072,2.429-.072h4.931v11.57c0,.577-.168.674-1.155.674a25.366,25.366,0,0,1-2.67-.216,5.513,5.513,0,0,1,.433,1.539c.673.048,1.8.072,2.381.072C897.354,142.258,897.835,141.873,897.835,140.285Zm-7.384-17.823h5.917v1.924H890.45Zm0,5v-1.948h5.917v1.948Z" transform="translate(-799.895 -120.538)" fill="#34404b"/>
+      <path id="Path_28" data-name="Path 28" d="M866.668,184.122c-.048-.626-.072-1.473-.072-2.387v-3.8c0-.962.024-1.828.072-2.5a21.275,21.275,0,0,1-2.381.1h-4.378a21.75,21.75,0,0,1-2.405-.1c.048.7.072,1.66.072,2.5V182a18.2,18.2,0,0,1-.1,2.146,18.136,18.136,0,0,1,2.141-.1h4.594C865.225,184.05,865.995,184.074,866.668,184.122Zm-7.7-7.438h6.254v2.381h-6.254Zm0,6.115v-2.531h6.254V182.8Z" transform="translate(-773.9 -165.265)" fill="#34404b"/>
+    </g>
+    <g id="Group_2" data-name="Group 2" transform="translate(84.885 58.491)">
+      <path id="Path_29" data-name="Path 29" d="M126.883,106.139,117.077,98.3l-1.155,1.445,9.446,7.453.305.24a2,2,0,0,1,.767,1.577v8.114a1.841,1.841,0,0,1-1.849,1.841l-35.865-.152a1.841,1.841,0,0,1-1.833-1.841V100.6a3.681,3.681,0,0,1,1.364-2.86l17.25-13.976a1.841,1.841,0,0,1,2.323,0l18.682,15.251,1.164-1.4L109.851,82.822s-2.53-3.179-6.361,0L88.05,95.636l-1.634,1.356a4.874,4.874,0,0,0-1.5,4.071v16.914a3.117,3.117,0,0,0,2.98,2.982L124.92,121a3.162,3.162,0,0,0,3.5-3.023v-8.64A3.773,3.773,0,0,0,126.883,106.139Z" transform="translate(-84.885 -77.387)" fill="#ee751b"/>
+      <path id="Path_30" data-name="Path 30" d="M274.831,69.4h1.71v-10.9h-1.71v4.6h-3.917V64.8h3.917Z" transform="translate(-238.271 -58.491)" fill="#ee751b"/>
+      <rect id="Rectangle_4" data-name="Rectangle 4" width="3.475" height="1.712" transform="translate(40.073 4.597)" fill="#ee751b"/>
+    </g>
+  </g>
+</svg>

hhh_index/images/media/fb.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+<title>f</title><g id="圖層_2" data-name="圖層 2">
+<g id="圖層_1-2" data-name="圖層 1"><g id="Community">
+<g id="f"><circle id="Ellipse_8" data-name="Ellipse 8" cx="24" cy="24" r="24" style="fill:#d1d2d3"/>
+<path id="f-2" d="M26.45,17.81H29V14H26c-3.67.14-4.42,2.21-4.5,4.38h0v1.9H19V24h2.5V34h3.77V24h3.08l.6-3.73H25.27V19.12a1.22,1.22,0,0,1,1.13-1.31Z" style="fill:#fff"/></g></g></g></g></svg>

hhh_index/images/media/fb_h.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>f_h</title><g id="圖層_2" data-name="圖層 2"><g id="圖層_1-2" data-name="圖層 1"><g id="Community_hover" data-name="Community hover"><g id="f"><circle id="Ellipse_8" data-name="Ellipse 8" cx="24" cy="24" r="24" style="fill:#3b5998"/><path id="f-2" d="M26.45,17.81H29V14H26c-3.67.14-4.42,2.21-4.5,4.38h0v1.9H19V24h2.5V34h3.77V24h3.08l.6-3.73H25.27V19.12a1.22,1.22,0,0,1,1.13-1.31Z" style="fill:#fff"/></g></g></g></g></svg>

hhh_index/images/media/ig.svg

@@ -0,0 +1,4 @@
+<svg id="instagram" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+  <circle id="Ellipse_11" data-name="Ellipse 11" cx="24" cy="24" r="24" fill="#d1d2d3"/>
+  <path id="Path_2808" data-name="Path 2808" d="M17.79,0H2.72A2.44,2.44,0,0,0,0,2.74V17.81A2.41,2.41,0,0,0,2.63,20.5H17.79a2.45,2.45,0,0,0,2.71-2.72V2.69A2.43,2.43,0,0,0,17.79,0ZM16.13,2.32c2,0,2,0,2,2s0,2-2,2-2,0-2-2S14.15,2.32,16.13,2.32Zm-5.87,4a4,4,0,1,1-4,3.93,4.06,4.06,0,0,1,4-3.98Zm7.9,10.67c0,1-.27,1.23-1.22,1.23H3.55c-.94,0-1.2-.27-1.2-1.23V9.52c0-.7.2-.87.85-.84.94.07,1,0,.85.94A6.3,6.3,0,1,0,16.5,9.14c-.07-.37,0-.43.34-.43,1.41-.1,1.41-.13,1.41,1.33Z" transform="translate(14.021 14.019)" fill="#fcfcfc" fill-rule="evenodd"/>
+</svg>

hhh_index/images/media/ln.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>line</title><g id="圖層_2" data-name="圖層 2"><g id="圖層_1-2" data-name="圖層 1"><g id="Community"><g id="line"><circle id="Ellipse_13" data-name="Ellipse 13" cx="24" cy="24" r="24" style="fill:#d1d2d3"/><g id="line-2"><path id="Path_2248" data-name="Path 2248" d="M36.12,23.85a5.83,5.83,0,0,0,.1-.73c0-.31,0-.63,0-.94-.29-5.11-5.6-9.18-12.1-9.18C17.42,13,12,17.31,12,22.63c0,4.89,4.58,8.93,10.52,9.55a.65.65,0,0,1,.58.72h0l-.25,2.28a.66.66,0,0,0,.58.73.65.65,0,0,0,.36-.07c5-2.42,8-4.9,9.8-7.06a26.22,26.22,0,0,0,1.6-2.27A8.11,8.11,0,0,0,36.12,23.85Z" style="fill:#fff"/><path id="Path_2249" data-name="Path 2249" d="M17.45,24.58v-4a.62.62,0,0,0-.62-.62h0a.62.62,0,0,0-.62.62h0V25.2a.62.62,0,0,0,.62.62h2.48a.62.62,0,0,0,.62-.62h0a.62.62,0,0,0-.62-.62H17.45Z" style="fill:#aaa"/><path id="Path_2250" data-name="Path 2250" d="M21.27,25.82H21a.47.47,0,0,1-.48-.48V20.39a.47.47,0,0,1,.48-.48h.27a.48.48,0,0,1,.49.48v4.95A.48.48,0,0,1,21.27,25.82Z" style="fill:#aaa"/><path id="Path_2251" data-name="Path 2251" d="M26.28,20.53v2.85s-2.48-3.22-2.51-3.27a.66.66,0,0,0-.49-.2.64.64,0,0,0-.6.64V25.2a.62.62,0,0,0,.62.62h0a.62.62,0,0,0,.62-.62h0V22.36s2.51,3.26,2.55,3.29a.59.59,0,0,0,.42.17.64.64,0,0,0,.62-.64V20.52a.61.61,0,0,0-.62-.61h0A.61.61,0,0,0,26.28,20.53Z" style="fill:#aaa"/><path id="Path_2252" data-name="Path 2252" d="M32.16,20.53h0a.61.61,0,0,0-.62-.62H29.07a.61.61,0,0,0-.62.62h0V25.2a.62.62,0,0,0,.62.62h2.47a.62.62,0,0,0,.62-.62h0a.62.62,0,0,0-.62-.62H29.69v-1.1h1.85a.61.61,0,0,0,.62-.62h0a.61.61,0,0,0-.62-.61H29.69v-1.1h1.85a.62.62,0,0,0,.62-.62Z" style="fill:#aaa"/></g></g></g></g></g></svg>

hhh_index/images/media/ln_h.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>l_h</title><g id="圖層_2" data-name="圖層 2"><g id="圖層_1-2" data-name="圖層 1"><g id="Community_hover" data-name="Community hover"><g id="line"><circle id="Ellipse_13" data-name="Ellipse 13" cx="24" cy="24" r="24" style="fill:#00c200"/><g id="line-2"><path id="Path_2248" data-name="Path 2248" d="M36.12,23.85a5.83,5.83,0,0,0,.1-.73c0-.31,0-.63,0-.94-.29-5.11-5.6-9.18-12.1-9.18C17.42,13,12,17.31,12,22.63c0,4.89,4.58,8.93,10.52,9.55a.65.65,0,0,1,.58.72h0l-.25,2.28a.66.66,0,0,0,.58.73.65.65,0,0,0,.36-.07c5-2.42,8-4.9,9.8-7.06a26.22,26.22,0,0,0,1.6-2.27A8.11,8.11,0,0,0,36.12,23.85Z" style="fill:#fff"/><path id="Path_2249" data-name="Path 2249" d="M17.45,24.58v-4a.62.62,0,0,0-.62-.62h0a.62.62,0,0,0-.62.62h0V25.2a.62.62,0,0,0,.62.62h2.48a.62.62,0,0,0,.62-.62h0a.62.62,0,0,0-.62-.62H17.45Z" style="fill:#00c200"/><path id="Path_2250" data-name="Path 2250" d="M21.27,25.82H21a.47.47,0,0,1-.48-.48V20.39a.47.47,0,0,1,.48-.48h.27a.48.48,0,0,1,.49.48v4.95A.48.48,0,0,1,21.27,25.82Z" style="fill:#00c200"/><path id="Path_2251" data-name="Path 2251" d="M26.28,20.53v2.85s-2.48-3.22-2.51-3.27a.66.66,0,0,0-.49-.2.64.64,0,0,0-.6.64V25.2a.62.62,0,0,0,.62.62h0a.62.62,0,0,0,.62-.62h0V22.36s2.51,3.26,2.55,3.29a.59.59,0,0,0,.42.17.64.64,0,0,0,.62-.64V20.52a.61.61,0,0,0-.62-.61h0A.61.61,0,0,0,26.28,20.53Z" style="fill:#00c200"/><path id="Path_2252" data-name="Path 2252" d="M32.16,20.53h0a.61.61,0,0,0-.62-.62H29.07a.61.61,0,0,0-.62.62h0V25.2a.62.62,0,0,0,.62.62h2.47a.62.62,0,0,0,.62-.62h0a.62.62,0,0,0-.62-.62H29.69v-1.1h1.85a.61.61,0,0,0,.62-.62h0a.61.61,0,0,0-.62-.61H29.69v-1.1h1.85a.62.62,0,0,0,.62-.62Z" style="fill:#00c200"/></g></g></g></g></g></svg>

hhh_index/images/media/rb.svg

@@ -0,0 +1,13 @@
+<svg id="Group_895" data-name="Group 895" xmlns="http://www.w3.org/2000/svg" width="43" height="43" viewBox="0 0 43 43">
+  <circle id="Ellipse_27" data-name="Ellipse 27" cx="21.5" cy="21.5" r="21.5" fill="#adadad"/>
+  <g id="Group_878" data-name="Group 878" transform="translate(-1147.61 -6332.509)">
+    <path id="Path_3994" data-name="Path 3994" d="M298.3,347.44H300.6c.022,3.42.014,6.841.015,10.261a2.267,2.267,0,0,1-.764,1.914,3.75,3.75,0,0,1-2.293.368c-.3-.655-.6-1.316-.872-1.987.406,0,.813.01,1.218-.014a.356.356,0,0,0,.361-.44C298.285,354.173,298.267,350.805,298.3,347.44Z" transform="translate(857.813 6000.227)" fill="#fff"/>
+    <path id="Path_3995" data-name="Path 3995" d="M352.545,346.514c.793-.012,1.585,0,2.371,0-.413,1.055-1,2.049-1.321,3.133a8.163,8.163,0,0,0,2.2.13c-.591,1.382-1.252,2.735-1.809,4.134a7.906,7.906,0,0,0,1.567.066c-.288.659-.583,1.313-.876,1.968-.9-.015-1.8.037-2.693-.024a.79.79,0,0,1-.765-1c.327-1,.837-1.933,1.225-2.911-.559-.037-1.228.122-1.684-.291-.356-.354-.149-.872.019-1.264Q351.68,348.489,352.545,346.514Z" transform="translate(813.062 6001)" fill="#fff"/>
+    <path id="Path_3996" data-name="Path 3996" d="M423.463,346.59h2.344v.881c1.125-.044,2.434-.041,3.247.871.872.964.589,2.354.64,3.536a2.8,2.8,0,0,1,2.317.95c.615.867.373,1.987.422,2.978-.032.943.2,2.083-.578,2.8-.82.886-2.134.615-3.21.677-.327-.662-.606-1.345-.894-2.024.654-.019,1.308.025,1.96-.022a.383.383,0,0,0,.359-.4,18.722,18.722,0,0,0,0-1.877.75.75,0,0,0-.847-.689c-1.142-.017-2.281,0-3.423,0v5.008h-2.346v-5.012H421.11v-2.354c.779,0,1.56,0,2.339-.012q.022-1.016,0-2.046c-.518-.008-1.037-.015-1.557-.01v-2.359h1.555Zm2.332,3.249q0,1.033.015,2.066h1.582a18.009,18.009,0,0,0-.024-1.863C426.981,349.632,426.3,349.911,425.795,349.839Z" transform="translate(754.466 6000.933)" fill="#fff"/>
+    <path id="Path_3997" data-name="Path 3997" d="M377.207,351.81h5.372v2.359H381.1v7.075c.754.008,1.509,0,2.263.008v2.354H375.5c.354-.786.71-1.572,1.074-2.354.7,0,1.408,0,2.11-.008v-7.07h-1.472Q377.2,352.989,377.207,351.81Z" transform="translate(792.351 5996.596)" fill="#fff"/>
+    <path id="Path_3998" data-name="Path 3998" d="M474.564,351.935a1.171,1.171,0,1,1,.847,2.1c-.439.039-.879.017-1.318.015C474.122,353.344,473.906,352.428,474.564,351.935Z" transform="translate(710.467 5996.688)" fill="#fff"/>
+    <path id="Path_3999" data-name="Path 3999" d="M280.184,365.629c.774,0,1.546.012,2.319-.019-.047,1.323-.195,2.642-.278,3.963a8.162,8.162,0,0,1-1.4,4.421c-.423-.894-.82-1.8-1.216-2.71a3.748,3.748,0,0,0,.224-1.026C279.94,368.725,280.06,367.173,280.184,365.629Z" transform="translate(872 5985.134)" fill="#fff"/>
+    <path id="Path_4000" data-name="Path 4000" d="M329.1,365.72h2.342c.119,1.54.241,3.079.352,4.619a3.671,3.671,0,0,0,.224,1.042c-.4.906-.8,1.811-1.214,2.71a7.843,7.843,0,0,1-1.372-4.065C329.308,368.594,329.214,367.153,329.1,365.72Z" transform="translate(830.892 5985.043)" fill="#fff"/>
+    <path id="Path_4001" data-name="Path 4001" d="M346.26,408.823q.537-1.186,1.084-2.363a17.345,17.345,0,0,0,3.692.181c-.352.789-.713,1.575-1.076,2.359A15.878,15.878,0,0,1,346.26,408.823Z" transform="translate(816.639 5951.203)" fill="#fff"/>
+  </g>
+</svg>

hhh_index/images/media/rb_h.svg

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FB2741;}
+	.st1{fill:#FFFFFF;}
+</style>
+<rect class="st0" width="300" height="300"/>
+<g id="Group_878" transform="translate(-1147.61 -6332.509)">
+	<path id="Path_3994" class="st1" d="M1206.9,6438.3h16c0.2,23.9,0.1,47.7,0.1,71.6c0.5,5-1.5,10-5.3,13.4c-4.9,2.5-10.5,3.4-16,2.6
+		c-2.1-4.6-4.2-9.2-6.1-13.9c2.8,0,5.7,0.1,8.5-0.1c1.4,0.1,2.5-1,2.6-2.4c0-0.2,0-0.5-0.1-0.7
+		C1206.8,6485.2,1206.7,6461.7,1206.9,6438.3z"/>
+	<path id="Path_3995" class="st1" d="M1273.2,6437.2c5.5-0.1,11.1,0,16.5,0c-2.9,7.4-7,14.3-9.2,21.9c5.1,1,10.2,1.3,15.3,0.9
+		c-4.1,9.6-8.7,19.1-12.6,28.8c3.6,0.5,7.3,0.7,10.9,0.5c-2,4.6-4.1,9.2-6.1,13.7c-6.3-0.1-12.6,0.3-18.8-0.2c-3,0-5.5-2.4-5.5-5.5
+		c0-0.5,0.1-1,0.2-1.5c2.3-7,5.8-13.5,8.5-20.3c-3.9-0.3-8.6,0.9-11.7-2c-2.5-2.5-1-6.1,0.1-8.8
+		C1265,6455.5,1269.1,6446.4,1273.2,6437.2z"/>
+	<path id="Path_3996" class="st1" d="M1359.1,6437.3h16.4v6.1c7.8-0.3,17-0.3,22.7,6.1c6.1,6.7,4.1,16.4,4.5,24.7
+		c6.1-0.5,12.1,2,16.2,6.6c4.3,6,2.6,13.9,2.9,20.8c-0.2,6.6,1.4,14.5-4,19.5c-5.7,6.2-14.9,4.3-22.4,4.7c-2.3-4.6-4.2-9.4-6.2-14.1
+		c4.6-0.1,9.1,0.2,13.7-0.2c1.5-0.1,2.6-1.3,2.5-2.8c0.2-4.4,0.2-8.7,0-13.1c-0.2-2.9-2.7-5-5.6-4.8c-0.1,0-0.2,0-0.3,0
+		c-8-0.1-15.9,0-23.9,0v34.9h-16.4v-35h-16.4v-16.4c5.4,0,10.9,0,16.3-0.1c0.1-4.7,0.1-9.5,0-14.3c-3.6-0.1-7.2-0.1-10.9-0.1v-16.5
+		h10.8L1359.1,6437.3z M1375.4,6459.9c0,4.8,0,9.6,0.1,14.4h11c0.2-4.3,0.1-8.7-0.2-13C1383.7,6458.5,1378.9,6460.4,1375.4,6459.9z"
+		/>
+	<path id="Path_3997" class="st1" d="M1300.7,6443.4h37.5v16.5h-10.3v49.4c5.3,0.1,10.5,0,15.8,0.1v16.4h-54.9
+		c2.5-5.5,5-11,7.5-16.4c4.9,0,9.8,0,14.7-0.1v-49.3h-10.3C1300.7,6454.4,1300.7,6448.9,1300.7,6443.4z"/>
+	<path id="Path_3998" class="st1" d="M1408.7,6444.9c3.6-2.7,8.7-2,11.4,1.7c2.7,3.6,2,8.7-1.7,11.4c-1.1,0.8-2.5,1.4-3.9,1.6
+		c-3.1,0.3-6.1,0.1-9.2,0.1C1405.6,6454.8,1404.1,6448.4,1408.7,6444.9z"/>
+	<path id="Path_3999" class="st1" d="M1179.5,6459.9c5.4,0,10.8,0.1,16.2-0.1c-0.3,9.2-1.4,18.4-1.9,27.6c-0.2,11-3.6,21.7-9.8,30.8
+		c-3-6.2-5.7-12.6-8.5-18.9c0.9-2.3,1.4-4.7,1.6-7.2C1177.8,6481.5,1178.7,6470.6,1179.5,6459.9z"/>
+	<path id="Path_4000" class="st1" d="M1234,6459.9h16.3c0.8,10.7,1.7,21.5,2.5,32.2c0.2,2.5,0.7,4.9,1.6,7.3
+		c-2.8,6.3-5.6,12.6-8.5,18.9c-5.8-8.4-9.1-18.2-9.6-28.4C1235.4,6479.9,1234.8,6469.9,1234,6459.9z"/>
+	<path id="Path_4001" class="st1" d="M1254.3,6524.5c2.5-5.5,5-11,7.6-16.5c8.5,1.3,17.2,1.8,25.8,1.3c-2.5,5.5-5,11-7.5,16.5
+		C1271.5,6526.3,1262.8,6525.9,1254.3,6524.5z"/>
+</g>
+<g id="Group_878-2" transform="translate(-1147.61 -6332.509)">
+	<path id="Path_3994-2" class="st1" d="M1206.9,6438.3h16c0.2,23.9,0.1,47.7,0.1,71.6c0.5,5-1.5,10-5.3,13.4
+		c-4.9,2.5-10.5,3.4-16,2.6c-2.1-4.6-4.2-9.2-6.1-13.9c2.8,0,5.7,0.1,8.5-0.1c1.4,0.1,2.5-1,2.6-2.4c0-0.2,0-0.5-0.1-0.7
+		C1206.8,6485.2,1206.7,6461.7,1206.9,6438.3z"/>
+	<path id="Path_3995-2" class="st1" d="M1273.2,6437.2c5.5-0.1,11.1,0,16.5,0c-2.9,7.4-7,14.3-9.2,21.9c5.1,1,10.2,1.3,15.3,0.9
+		c-4.1,9.6-8.7,19.1-12.6,28.8c3.6,0.5,7.3,0.7,10.9,0.5c-2,4.6-4.1,9.2-6.1,13.7c-6.3-0.1-12.6,0.3-18.8-0.2c-3,0-5.5-2.4-5.5-5.5
+		c0-0.5,0.1-1,0.2-1.5c2.3-7,5.8-13.5,8.5-20.3c-3.9-0.3-8.6,0.9-11.7-2c-2.5-2.5-1-6.1,0.1-8.8
+		C1265,6455.5,1269.1,6446.4,1273.2,6437.2z"/>
+	<path id="Path_3996-2" class="st1" d="M1359.1,6437.3h16.4v6.1c7.8-0.3,17-0.3,22.7,6.1c6.1,6.7,4.1,16.4,4.5,24.7
+		c6.1-0.5,12.1,2,16.2,6.6c4.3,6,2.6,13.9,2.9,20.8c-0.2,6.6,1.4,14.5-4,19.5c-5.7,6.2-14.9,4.3-22.4,4.7c-2.3-4.6-4.2-9.4-6.2-14.1
+		c4.6-0.1,9.1,0.2,13.7-0.2c1.5-0.1,2.6-1.3,2.5-2.8c0.2-4.4,0.2-8.7,0-13.1c-0.2-2.9-2.7-5-5.6-4.8c-0.1,0-0.2,0-0.3,0
+		c-8-0.1-15.9,0-23.9,0v34.9h-16.4v-35h-16.4v-16.4c5.4,0,10.9,0,16.3-0.1c0.1-4.7,0.1-9.5,0-14.3c-3.6-0.1-7.2-0.1-10.9-0.1v-16.5
+		h10.8L1359.1,6437.3z M1375.4,6459.9c0,4.8,0,9.6,0.1,14.4h11c0.2-4.3,0.1-8.7-0.2-13C1383.7,6458.5,1378.9,6460.4,1375.4,6459.9z"
+		/>
+	<path id="Path_3997-2" class="st1" d="M1300.7,6443.4h37.5v16.5h-10.3v49.4c5.3,0.1,10.5,0,15.8,0.1v16.4h-54.9
+		c2.5-5.5,5-11,7.5-16.4c4.9,0,9.8,0,14.7-0.1v-49.3h-10.3C1300.7,6454.4,1300.7,6448.9,1300.7,6443.4z"/>
+	<path id="Path_3998-2" class="st1" d="M1408.7,6444.9c3.6-2.7,8.7-2,11.4,1.7c2.7,3.6,2,8.7-1.7,11.4c-1.1,0.8-2.5,1.4-3.9,1.6
+		c-3.1,0.3-6.1,0.1-9.2,0.1C1405.6,6454.8,1404.1,6448.4,1408.7,6444.9z"/>
+	<path id="Path_3999-2" class="st1" d="M1179.5,6459.9c5.4,0,10.8,0.1,16.2-0.1c-0.3,9.2-1.4,18.4-1.9,27.6
+		c-0.2,11-3.6,21.7-9.8,30.8c-3-6.2-5.7-12.6-8.5-18.9c0.9-2.3,1.4-4.7,1.6-7.2C1177.8,6481.5,1178.7,6470.6,1179.5,6459.9z"/>
+	<path id="Path_4000-2" class="st1" d="M1234,6459.9h16.3c0.8,10.7,1.7,21.5,2.5,32.2c0.2,2.5,0.7,4.9,1.6,7.3
+		c-2.8,6.3-5.6,12.6-8.5,18.9c-5.8-8.4-9.1-18.2-9.6-28.4C1235.4,6479.9,1234.8,6469.9,1234,6459.9z"/>
+	<path id="Path_4001-2" class="st1" d="M1254.3,6524.5c2.5-5.5,5-11,7.6-16.5c8.5,1.3,17.2,1.8,25.8,1.3c-2.5,5.5-5,11-7.5,16.5
+		C1271.5,6526.3,1262.8,6525.9,1254.3,6524.5z"/>
+</g>
+</svg>

hhh_index/images/media/tt.svg

@@ -0,0 +1,21 @@
+<svg id="Group_897" data-name="Group 897" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="43" height="43" viewBox="0 0 43 43">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_2022" data-name="Rectangle 2022" width="43" height="43" fill="#adadad"/>
+    </clipPath>
+  </defs>
+  <g id="Group_877" data-name="Group 877">
+    <g id="Group_876" data-name="Group 876" clip-path="url(#clip-path)">
+      <path id="Path_3984" data-name="Path 3984" d="M42.838,21.419A21.419,21.419,0,1,1,21.419,0,21.419,21.419,0,0,1,42.838,21.419" fill="#adadad"/>
+    </g>
+  </g>
+  <g id="Group_896" data-name="Group 896">
+    <path id="Path_4002" data-name="Path 4002" d="M37.108,47.273l.077.07c.237.169.409.408.636.591a4.142,4.142,0,0,0,2.4.929A4.081,4.081,0,0,0,44.5,45.248a2.778,2.778,0,0,0,.008-.313V25.713c0-.432,0-.433.431-.433q1.46,0,2.921,0a.436.436,0,0,1,.27.041.1.1,0,0,0,.017.013.334.334,0,0,1,.074.173,6.738,6.738,0,0,0,2.708,4.145c.089.065.163.146.249.215l.186.158a4.312,4.312,0,0,1,.592.507A6.737,6.737,0,0,0,54.622,31.9c.088.023.188.021.251.1a.054.054,0,0,0,.016.014.281.281,0,0,1,.049.214q0,1.694,0,3.389c0,.258-.035.272-.3.272A10.874,10.874,0,0,1,52.2,35.6a11.714,11.714,0,0,1-3.842-1.656c-.062-.041-.127-.127-.193-.1-.084.038-.04.146-.04.222,0,3.18.012,6.361-.007,9.541a9.1,9.1,0,0,1-8.043,9.039,9,9,0,0,1-5.177-.915,4.722,4.722,0,0,1-.755-.461l-.224-.2a6.178,6.178,0,0,1-1.323-1.687,9.147,9.147,0,0,1-1.228-4.958,9.094,9.094,0,0,1,6.208-8.216,8.244,8.244,0,0,1,2.09-.425,2.977,2.977,0,0,1,.4-.032.292.292,0,0,1,.182.042.077.077,0,0,0,.02.013.381.381,0,0,1,.028.2q0,1.719,0,3.439c0,.04,0,.081,0,.121-.005.115-.064.154-.173.122a4.354,4.354,0,0,0-.96-.147,3.652,3.652,0,0,0-1.468.218,4.075,4.075,0,0,0-.919,7.265c.114.079.231.153.338.242" transform="translate(-21.406 -17.258)" fill="#fff"/>
+    <path id="Path_4003" data-name="Path 4003" d="M40.133,65.764c.061-.017.1.032.138.058a9.087,9.087,0,0,0,3.315,1.224,8.528,8.528,0,0,0,1.8.1,9.064,9.064,0,0,0,8.379-6.755,8.78,8.78,0,0,0,.276-1.815c.018-.353.016-.706.016-1.06q0-4.546,0-9.092v-.207c.079-.021.115.038.159.068a11.641,11.641,0,0,0,3.509,1.633,11.805,11.805,0,0,0,2.113.38c.3.026.6.023.9.044.132.01.133,0,.135-.133s0-.29,0-.434q0-1.539,0-3.077c0-.064,0-.127.006-.191.27.03.536.089.808.109a4.773,4.773,0,0,0,.5.023c.083,0,.118.027.109.11a.949.949,0,0,0,0,.1v4.45c0,.029,0,.058,0,.087,0,.129,0,.132-.14.131a10.773,10.773,0,0,1-1.387-.092,11.7,11.7,0,0,1-5.124-1.962c-.046-.032-.095-.061-.166-.107v.208q0,4.859,0,9.717a9.032,9.032,0,0,1-9.677,9.022,8.961,8.961,0,0,1-5.556-2.42c-.042-.039-.078-.084-.117-.127" transform="translate(-27.398 -31.752)" fill="#cecece"/>
+    <path id="Path_4004" data-name="Path 4004" d="M60.667,22.885c-.063,0-.127.009-.19.009h-3.13c-.242,0-.242,0-.242.234q0,9.561,0,19.122a4.115,4.115,0,0,1-.171,1.3,4.146,4.146,0,0,1-7.162,1.426.545.545,0,0,1-.046-.072,5.568,5.568,0,0,0,.97.32,4.145,4.145,0,0,0,4.931-3.387,3.98,3.98,0,0,0,.049-.71q0-9.579,0-19.157c0-.3-.042-.261.255-.261q2.209,0,4.417,0h.1c.151,0,.153,0,.153.155a5.033,5.033,0,0,0,.062,1.02" transform="translate(-33.948 -14.821)" fill="#cecece"/>
+    <path id="Path_4005" data-name="Path 4005" d="M37.271,55.887a9.29,9.29,0,0,0-2.635.457,9.062,9.062,0,0,0-5.873,6.139,8.73,8.73,0,0,0-.306,1.79A8.967,8.967,0,0,0,30.9,71.107a.438.438,0,0,1,.039.056,2.139,2.139,0,0,1-.469-.323,9.031,9.031,0,0,1-3.455-7.7,9.028,9.028,0,0,1,5.946-7.89,9,9,0,0,1,2.4-.51,9.348,9.348,0,0,1,1.785.04c.08.01.128.026.126.121-.006.33-.006.66-.008.99" transform="translate(-18.433 -37.35)" fill="#cecece"/>
+    <path id="Path_4006" data-name="Path 4006" d="M44.671,69.9a3.424,3.424,0,0,1-.961-.674,4.022,4.022,0,0,1-1.25-2.513,4.132,4.132,0,0,1,5.209-4.441.251.251,0,0,0,.134.018.472.472,0,0,0,.013-.189q0-1.738,0-3.476c0-.063.006-.127.01-.19a7.444,7.444,0,0,1,1.334.059c.07.008.089.04.087.1,0,.035,0,.069,0,.1q0,2.3,0,4.605a.3.3,0,0,1-.022.176c-.2-.038-.4-.1-.606-.128a4.058,4.058,0,0,0-3.195.851,3.965,3.965,0,0,0-1.5,2.54,4.043,4.043,0,0,0,.678,3.039c.026.038.049.078.073.117" transform="translate(-28.968 -39.887)" fill="#cecece"/>
+    <path id="Path_4007" data-name="Path 4007" d="M87.289,29.964a5.774,5.774,0,0,1-1.2-.967,6.777,6.777,0,0,1-1.833-3.532.18.18,0,0,1,0-.035c.416-.024.833,0,1.25-.011.074,0,.107.028.1.1,0,.029,0,.058,0,.087a6.255,6.255,0,0,0,.894,3.238,6.7,6.7,0,0,0,.711,1c.029.035.071.062.076.113" transform="translate(-57.522 -17.353)" fill="#cecece"/>
+    <path id="Path_4008" data-name="Path 4008" d="M97.91,42.216a6.775,6.775,0,0,1-3.137-1.595,2.469,2.469,0,0,1-.376-.381.184.184,0,0,1,.111.043,6.876,6.876,0,0,0,2.306.816,5.583,5.583,0,0,0,.965.084c.135,0,.139,0,.138.133,0,.3,0,.6-.007.9" transform="translate(-64.443 -27.471)" fill="#cecece"/>
+  </g>
+</svg>

hhh_index/images/media/tt_h.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#CB1C54;}
+	.st2{fill:#6ABAC5;}
+</style>
+<rect width="300" height="300"/>
+<g id="Group_896">
+	<path id="Path_4002" class="st0" d="M109.5,209.4l0.5,0.5c1.7,1.2,2.9,2.8,4.4,4.1c4.8,3.9,10.6,6.2,16.7,6.5
+		c15.1,0.8,28.2-10.2,29.9-25.2c0.1-0.7,0.1-1.5,0.1-2.2V59c0-3,0-3,3-3c6.8,0,13.6,0,20.4,0c0.6-0.1,1.3,0,1.9,0.3l0.1,0.1
+		c0.3,0.3,0.5,0.8,0.5,1.2c2.4,11.7,9.2,22,18.9,28.9c0.6,0.5,1.1,1,1.7,1.5l1.3,1.1c1.5,1.1,2.9,2.2,4.1,3.5
+		c5.4,4.5,11.8,7.8,18.6,9.5c0.6,0.2,1.3,0.1,1.8,0.7l0.1,0.1c0.3,0.4,0.4,1,0.3,1.5c0,7.9,0,15.8,0,23.6c0,1.8-0.2,1.9-2.1,1.9
+		c-5.7,0-11.4-0.7-17-2c-9.6-2.2-18.6-6.1-26.8-11.6c-0.4-0.3-0.9-0.9-1.3-0.7c-0.6,0.3-0.3,1-0.3,1.5c0,22.2,0.1,44.4,0,66.6
+		c0,32.2-24.1,59.3-56.1,63.1c-12.4,1.5-25-0.7-36.1-6.4c-1.9-0.9-3.6-2-5.3-3.2l-1.6-1.4c-3.7-3.4-6.9-7.3-9.2-11.8
+		c-6.1-10.5-9.1-22.5-8.6-34.6c1.2-26.2,18.4-49,43.3-57.3c4.7-1.6,9.6-2.6,14.6-3c0.9-0.1,1.9-0.2,2.8-0.2c0.4,0,0.9,0.1,1.3,0.3
+		l0.1,0.1c0.2,0.4,0.3,0.9,0.2,1.4c0,8,0,16,0,24c0,0.3,0,0.6,0,0.8c0,0.8-0.4,1.1-1.2,0.9c-2.2-0.6-4.4-0.9-6.7-1
+		c-3.5-0.2-7,0.3-10.2,1.5C98.7,162,90.8,178.1,95.9,193c2,6,6,11.1,11.3,14.6C108,208.2,108.8,208.7,109.5,209.4"/>
+	<path id="Path_4003" class="st1" d="M88.8,237.3c0.4-0.1,0.7,0.2,1,0.4c7.1,4.3,14.9,7.2,23.1,8.5c4.1,0.7,8.4,0.9,12.6,0.7
+		c27.7-1.2,51.4-20.3,58.5-47.1c1.1-4.1,1.7-8.4,1.9-12.7c0.1-2.5,0.1-4.9,0.1-7.4c0-21.1,0-42.3,0-63.4v-1.4
+		c0.6-0.1,0.8,0.3,1.1,0.5c7.5,5.1,15.7,9,24.5,11.4c4.8,1.3,9.8,2.2,14.7,2.7c2.1,0.2,4.2,0.2,6.3,0.3c0.9,0.1,0.9,0,0.9-0.9
+		s0-2,0-3c0-7.2,0-14.3,0-21.5c0-0.4,0-0.9,0-1.3c1.9,0.2,3.7,0.6,5.6,0.8c1.2,0.1,2.3,0.2,3.5,0.2c0.6,0,0.8,0.2,0.8,0.8
+		c0,0.2,0,0.5,0,0.7v31c0,0.2,0,0.4,0,0.6c0,0.9,0,0.9-1,0.9c-3.2,0-6.5-0.2-9.7-0.6c-12.8-1.7-25.1-6.4-35.7-13.7
+		c-0.3-0.2-0.7-0.4-1.2-0.7v1.5c0,22.6,0,45.2,0,67.8c0.1,34.8-28.1,63.1-62.9,63.1c-1.5,0-3.1-0.1-4.6-0.2
+		c-14.5-1-28.2-6.9-38.8-16.9C89.3,237.9,89.1,237.5,88.8,237.3"/>
+	<path id="Path_4004" class="st2" d="M186.4,56.3c-0.4,0-0.9,0.1-1.3,0.1h-21.8c-1.7,0-1.7,0-1.7,1.6c0,44.5,0,88.9,0,133.4
+		c0.1,3.1-0.3,6.1-1.2,9.1c-4.7,15.3-20.8,23.9-36.1,19.2c-5.4-1.7-10.2-4.9-13.8-9.2c-0.1-0.2-0.2-0.3-0.3-0.5
+		c2.2,0.9,4.4,1.7,6.8,2.2c15.6,3.2,30.9-6.8,34.2-22.5c0.1-0.4,0.2-0.8,0.2-1.2c0.3-1.6,0.4-3.3,0.3-5c0-44.6,0-89.1,0-133.7
+		c0-2.1-0.3-1.8,1.8-1.8c10.3,0,20.5,0,30.8,0h0.7c1.1,0,1.1,0,1.1,1.1C185.9,51.5,186,53.9,186.4,56.3"/>
+	<path id="Path_4005" class="st2" d="M131.4,129.3c-6.2,0.2-12.4,1.2-18.4,3.2c-19.9,6.6-35.3,22.6-41,42.8
+		c-1.1,4.1-1.9,8.3-2.1,12.5c-1.3,17.6,4.9,34.9,17,47.7c0.1,0.1,0.2,0.3,0.3,0.4c-1.2-0.6-2.3-1.4-3.3-2.3
+		c-16.4-12.8-25.4-32.9-24.1-53.7c1.7-25,18-46.6,41.5-55c5.4-1.9,11-3.1,16.7-3.6c4.2-0.3,8.3-0.2,12.5,0.3
+		c0.6,0.1,0.9,0.2,0.9,0.8C131.4,124.8,131.4,127.1,131.4,129.3"/>
+	<path id="Path_4006" class="st1" d="M109.6,209.4c-2.5-1.2-4.8-2.8-6.7-4.7c-4.9-4.6-8-10.8-8.7-17.5c-1.8-15.8,9.6-30.1,25.4-31.9
+		c3.7-0.4,7.4-0.1,10.9,0.9c0.3,0.1,0.6,0.2,0.9,0.1c0.1-0.4,0.1-0.9,0.1-1.3c0-8.1,0-16.2,0-24.3c0-0.4,0-0.9,0.1-1.3
+		c3.1-0.1,6.2,0,9.3,0.4c0.5,0.1,0.6,0.3,0.6,0.7c0,0.2,0,0.5,0,0.7c0,10.7,0,21.4,0,32.1c0.1,0.4,0,0.8-0.2,1.2
+		c-1.4-0.3-2.8-0.7-4.2-0.9c-7.9-1.3-16,0.9-22.3,5.9c-5.6,4.3-9.4,10.7-10.5,17.7c-1.3,7.4,0.4,15,4.7,21.2
+		C109.3,208.8,109.4,209.1,109.6,209.4"/>
+	<path id="Path_4007" class="st1" d="M207.7,88c-3.1-1.9-5.9-4.1-8.4-6.7c-6.6-6.7-11.1-15.3-12.8-24.6c0-0.1,0-0.2,0-0.2
+		c2.9-0.2,5.8,0,8.7-0.1c0.5,0,0.7,0.2,0.7,0.7c0,0.2,0,0.4,0,0.6c0,8,2.1,15.8,6.2,22.6c1.4,2.5,3.1,4.8,5,7
+		C207.3,87.4,207.6,87.6,207.7,88"/>
+	<path id="Path_4008" class="st2" d="M233.5,102.9c-8.1-1.7-15.7-5.6-21.9-11.1c-1-0.8-1.8-1.7-2.6-2.7c0.3,0,0.6,0.1,0.8,0.3
+		c5,2.8,10.4,4.8,16.1,5.7c2.2,0.4,4.5,0.6,6.7,0.6c0.9,0,1,0,1,0.9C233.5,98.7,233.5,100.8,233.5,102.9"/>
+</g>
+</svg>

hhh_index/images/media/yt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>y</title><g id="圖層_2" data-name="圖層 2"><g id="圖層_1-2" data-name="圖層 1"><g id="Community"><g id="youtube"><circle id="Ellipse_9" data-name="Ellipse 9" cx="24" cy="24" r="24" style="fill:#d1d2d3"/><path id="youtube-2" d="M35.51,18.53a2.81,2.81,0,0,0-2-2c-1.78-.49-9-.49-9-.49s-7.19,0-9,.49a2.85,2.85,0,0,0-2,2A31.6,31.6,0,0,0,13,24.11a29.66,29.66,0,0,0,.49,5.57,2.79,2.79,0,0,0,2,2c1.78.46,9,.46,9,.46s7.19,0,9-.49a2.84,2.84,0,0,0,2-2A31.26,31.26,0,0,0,36,24.11,29.84,29.84,0,0,0,35.51,18.53Zm-13.37,9V20.69l6,3.42-6,3.42Z" style="fill:#fff"/></g></g></g></g></svg>

hhh_index/images/media/yt_h.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>y_h</title><g id="圖層_2" data-name="圖層 2"><g id="圖層_1-2" data-name="圖層 1"><g id="Community_hover" data-name="Community hover"><g id="youtube"><circle id="Ellipse_9" data-name="Ellipse 9" cx="24" cy="24" r="24" style="fill:red"/><path id="youtube-2" d="M35.51,18.53a2.81,2.81,0,0,0-2-2c-1.78-.49-9-.49-9-.49s-7.19,0-9,.49a2.85,2.85,0,0,0-2,2A31.6,31.6,0,0,0,13,24.11a29.66,29.66,0,0,0,.49,5.57,2.79,2.79,0,0,0,2,2c1.78.46,9,.46,9,.46s7.19,0,9-.49a2.84,2.84,0,0,0,2-2A31.26,31.26,0,0,0,36,24.11,29.84,29.84,0,0,0,35.51,18.53Zm-13.37,9V20.69l6,3.42-6,3.42Z" style="fill:#fff"/></g></g></g></g></svg>

hhh_index/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>

hhh_index/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>

hhh_index/images/menu/calculator.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 72 60" style="enable-background:new 0 0 72 60;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{enable-background:new    ;}
+	.st2{fill:#707070;}
+	.st3{fill:#ED7900;stroke:#ED7900;stroke-width:0.2;stroke-miterlimit:10;}
+	.st4{fill:#707070;stroke:#707070;stroke-width:0.2;stroke-miterlimit:10;}
+</style>
+<g id="Group_84" transform="translate(1931 -1016)">
+	<rect id="Rectangle_92" x="-1931" y="1016" class="st0" width="72" height="60"/>
+	<g class="st1">
+		<path class="st2" d="M-1914.7,1053.6c-0.4,1.3-1,2.6-1.7,3.8v11.3h-1.6v-8.9c-0.4,0.6-0.9,1.1-1.4,1.7l-0.5-1.7
+			c1.7-2,2.9-4.3,3.7-6.9L-1914.7,1053.6z M-1910.5,1056.3v-3.2h1.6v3.2h4.7v1.5h-4.7v3.2h3.7v7.7h-1.6v-0.7h-5.8v0.7h-1.6v-7.7h3.6
+			v-3.2h-4.5v-1.5H-1910.5z M-1906.8,1066.5v-3.9h-5.8v3.9H-1906.8z"/>
+		<path class="st2" d="M-1899.8,1057.1c0.5-0.6,1.1-1.3,1.5-2h-4v-1.4h5.7v1.2c-0.7,1.3-1.5,2.3-2.3,3.2c0.3,0.3,0.5,0.6,0.7,0.8
+			h2.3v1c-0.3,1.3-0.6,2.4-0.9,3.1l-1.3-0.5c0.3-0.6,0.5-1.3,0.7-2.1h-1.5v6.7c0,1-0.5,1.5-1.4,1.5h-1.6l-0.3-1.5
+			c0.5,0.1,1,0.1,1.4,0.1c0.3,0,0.4-0.2,0.4-0.6v-6.4h-2.4v-1.5h2.9c-0.6-0.7-1.4-1.5-2.2-2.3l1.2-0.7
+			C-1900.6,1056.3-1900.2,1056.7-1899.8,1057.1z M-1892.8,1056.2c0.1-0.4,0.3-0.7,0.4-1.1h-3.4v-1.4h8.5v1.4h-3.5
+			c-0.1,0.4-0.2,0.8-0.4,1.1h3.2v9.3h-2c1.1,0.7,2.1,1.4,2.9,2.1l-1,1c-0.7-0.7-1.6-1.4-2.8-2.2l0.9-0.9h-3.2l1,0.9
+			c-0.9,0.9-2,1.7-3.3,2.4l-0.9-1.1c1.3-0.6,2.3-1.3,3.1-2.1h-2v-9.3H-1892.8z M-1889.5,1058.8v-1.3h-4.2v1.3H-1889.5z
+			 M-1889.5,1061.5v-1.4h-4.2v1.4H-1889.5z M-1889.5,1062.7h-4.2v1.4h4.2V1062.7z"/>
+		<path class="st2" d="M-1877,1056.9l-1.2-0.8c0.8-1,1.4-2,1.8-3.1l1.5,0.3c-0.1,0.3-0.2,0.5-0.3,0.7h4.6v1.4h-2.5
+			c0.2,0.3,0.4,0.6,0.6,0.9l-1.3,0.5c-0.3-0.5-0.5-0.9-0.9-1.4h-1.1c-0.3,0.5-0.7,1-1,1.5h4.7v6.9h-2v0.9h3.7v1.4h-3.7v2.7h-1.6
+			v-2.7h-4.5c-0.2,0.4-0.4,0.8-0.7,1.1c-0.6,0.7-1.5,1.2-2.9,1.6l-0.8-1.3c1.2-0.3,2-0.7,2.4-1.2c0.1-0.1,0.1-0.2,0.2-0.2h-3.5v-1.4
+			h4l0-0.4v-0.5h-2.1v-6.9H-1877z M-1884.2,1057.3l-1.3-0.9c1-1.1,1.8-2.2,2.2-3.5l1.5,0.3c-0.1,0.3-0.2,0.6-0.3,0.8h3.9v1.4h-1.9
+			c0.2,0.3,0.4,0.5,0.5,0.8l-1.3,0.5c-0.2-0.4-0.5-0.9-0.8-1.3h-1.2C-1883.3,1056.1-1883.7,1056.7-1884.2,1057.3z M-1873.7,1058.8
+			v-0.7h-8.3v0.7H-1873.7z M-1873.7,1060.6v-0.7h-8.3v0.7H-1873.7z M-1873.7,1061.8h-8.3v0.8h8.3V1061.8z M-1879.9,1064.3
+			c0,0.1,0,0.2,0,0.4h4.2v-0.9h-4.2V1064.3z"/>
+	</g>
+	<g id="Group_81" transform="translate(-1900.82 1024.401)">
+		<path id="Path_158" class="st3" d="M12.2,12V7.2c0-2.2-1.7-4.2-3.9-4.5l1.1-2.2c0.1-0.1,0.1-0.3,0-0.4C9.4,0.1,9.3,0,9.2,0H3
+			C2.9,0,2.8,0.1,2.7,0.1c-0.1,0.1-0.1,0.3,0,0.4l1.2,2.2C1.6,3,0,4.9,0,7.2v6.2h0.6V7.2c0-2.1,1.6-3.7,3.7-3.7c0,0,0,0,0.1,0h3.5
+			c1,0,1.9,0.4,2.7,1.1c0.7,0.7,1.1,1.7,1.1,2.7V12H12.2z M7.6,2.7h-3l-1-2h5L7.6,2.7z"/>
+	</g>
+	<path id="Path_215" class="st3" d="M-1897.4,1029.7c0.2-0.1,0.4-0.2,0.6-0.3l-0.1-0.6c-0.3,0.1-0.5,0.1-0.7,0.3L-1897.4,1029.7z"/>
+	<g id="Group_82" transform="translate(-1905 1029.579)">
+		<path id="Path_160" class="st3" d="M5.7,3.6h0.6V2.2c0-0.6,0.3-1.3,0.7-1.7L6.6,0c-0.6,0.6-1,1.4-0.9,2.2L5.7,3.6z"/>
+		<path id="Path_161" class="st3" d="M0.9,11.7l5.8,3.2c0.7,0.4,1.4,0.5,2.2,0.5h11.3c0.2,0,0.3-0.2,0.4-0.4V8.9
+			c0-0.2-0.2-0.3-0.4-0.4h-2.6l-0.1-0.1c-0.4-0.3-0.9-0.6-1.4-0.7c-1.7-0.7-3.5-0.5-5,0.4H8.6c-0.5,0-1,0.3-1.4,0.7
+			c-0.3,0.4-0.4,1-0.3,1.5L2.7,8.3C2,8,1.3,8,0.7,8.4C0.3,8.8,0,9.3,0,9.9V10C-0.1,10.7,0.3,11.4,0.9,11.7z M17.8,9.3h2v5.5h-2V9.3z
+			 M0.6,10c0-0.4,0.2-0.8,0.5-1c0.4-0.2,0.8-0.3,1.2-0.1l5.3,2.7c0.1,0.1,0.1,0.1,0.1,0.1H13V11H8.5c-0.6,0-1-0.5-1-1s0.5-1,1-1l0,0
+			h2.7c0.1,0,0.1,0,0.1-0.1c1.3-0.9,3-1.1,4.5-0.4c0.4,0.2,0.8,0.4,1.2,0.6v5.6H8.9c-0.6,0-1.2-0.1-1.8-0.4l-5.8-3.2
+			C0.8,10.9,0.6,10.5,0.6,10z"/>
+	</g>
+	<rect id="Rectangle_93" x="-1886.5" y="1042.6" class="st4" width="0.6" height="0.6"/>
+	<path id="Path_216" class="st3" d="M-1894.4,1036.4v-0.6h0.4c0.8,0,1.4-0.6,1.4-1.4c0-0.8-0.6-1.4-1.4-1.4h-1.4
+		c-0.3,0-0.6-0.2-0.6-0.5c0,0,0-0.1,0-0.1c0-0.4,0.3-0.6,0.6-0.6c0,0,0,0,0,0h2.4v-0.7h-1.4v-0.6h-0.6v0.6h-0.4
+		c-0.8,0-1.4,0.6-1.4,1.4c0,0.8,0.6,1.4,1.4,1.4l0,0h1.4c0.3,0,0.6,0.2,0.6,0.5c0,0,0,0.1,0,0.1c0,0.4-0.3,0.6-0.6,0.6c0,0,0,0,0,0
+		h-2.4v0.6h1.4v0.6L-1894.4,1036.4L-1894.4,1036.4z"/>
+</g>
+</svg>

hhh_index/images/menu/calendar.svg

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 72 60" style="enable-background:new 0 0 72 60;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{enable-background:new    ;}
+	.st2{fill:#707070;}
+	.st3{fill:#ED7900;}
+</style>
+<g id="Group_86" transform="translate(1781 -1016)">
+	<rect id="Rectangle_90" x="-1781" y="1016" class="st0" width="72" height="60"/>
+	<g class="st1">
+		<path class="st2" d="M-1780.6,1054.9h9.8v1.8h-3.9v10.3h-2.1v-10.3h-3.8V1054.9z"/>
+		<path class="st2" d="M-1770.7,1054.9h2.2l3,9.6h0l3.1-9.6h2.2l-4.1,12.1h-2.4L-1770.7,1054.9z"/>
+	</g>
+	<g class="st1">
+		<path class="st2" d="M-1758.1,1057.6l-1.4-0.9c1-1.1,1.7-2.3,2.1-3.6l1.6,0.3c-0.1,0.3-0.2,0.6-0.3,0.9h4.2v1.4h-2.5
+			c0.4,0.6,0.7,1.1,1,1.6l-1.5,0.5c-0.3-0.7-0.7-1.5-1.2-2.2h-0.8C-1757.2,1056.4-1757.6,1057-1758.1,1057.6z M-1751.3,1067.9
+			l-1.5,0.7c-0.2-0.4-0.3-0.8-0.5-1.2c-1.4,0.4-3.1,0.8-5.1,1.2l-0.4-1.5c0.2-0.1,0.4-0.2,0.4-0.4v-8.6h6.7v6.1h-5.1v2.6
+			c1-0.2,2-0.4,2.9-0.7c-0.2-0.4-0.4-0.8-0.6-1.1l1.5-0.5C-1752.3,1065.5-1751.8,1066.7-1751.3,1067.9z M-1753.3,1059.4h-3.5v1.1
+			h3.5V1059.4z M-1756.8,1062.9h3.5v-1.1h-3.5V1062.9z M-1750.7,1057.7l-1.4-0.9c0.9-1.2,1.5-2.4,1.9-3.7l1.5,0.3
+			c-0.1,0.3-0.2,0.6-0.3,0.8h4.8v1.4h-2.9c0.4,0.6,0.7,1.1,0.9,1.6l-1.4,0.5c-0.3-0.7-0.7-1.5-1.2-2.2h-0.9
+			C-1749.8,1056.4-1750.2,1057.1-1750.7,1057.7z M-1747.8,1067.3l-0.4-1.5l1.5,0.1c0.3,0,0.4-0.2,0.4-0.4v-5.8h-2.7v9.2h-1.6V1058
+			h5.9v7.7c0,1-0.5,1.5-1.5,1.5H-1747.8z"/>
+		<path class="st2" d="M-1728.8,1068.8h-1.6v-1h-8.6v1h-1.6v-15h11.8V1068.8z M-1730.5,1057.8v-2.4h-8.6v2.4H-1730.5z
+			 M-1730.5,1061.9v-2.6h-8.6v2.6H-1730.5z M-1730.5,1066.2v-2.8h-8.6v2.8H-1730.5z"/>
+		<path class="st2" d="M-1718.6,1054.5v-1.3h1.6v1.3h6v1.5h-6v1.2h5v1.5h-5v1.3h6.4v1.5h-7.7c-0.6,0.8-1.3,1.5-2.1,2.2v3.2
+			c1.2-0.4,2.3-0.8,3.5-1.3l0.3,1.5c-1.7,0.7-3.5,1.3-5.3,1.8l-0.5-1.4c0.3-0.1,0.4-0.3,0.4-0.6v-2.1c-0.8,0.5-1.8,1-2.8,1.4
+			l-0.9-1.4c2.5-0.8,4.4-1.9,5.6-3.2h-5v-1.5h6.4v-1.3h-5v-1.5h5v-1.2h-6v-1.5H-1718.6z M-1711.1,1063.1c-0.8,0.8-1.8,1.5-2.9,2
+			c1.1,1,2.5,1.8,4.1,2.3l-1,1.4c-3-1.1-5.2-3.1-6.4-6l1.2-0.7c0.3,0.7,0.7,1.4,1.1,2c1-0.4,1.9-1.1,2.7-2.1L-1711.1,1063.1z"/>
+	</g>
+	<g id="Group_404" transform="translate(-1755 1025.361)">
+		<g id="Group_403">
+			<path id="Path_2424" class="st3" d="M16.9,8.7V3.2c0-0.9-0.8-1.7-1.8-1.6c0,0,0,0,0,0h-1.5V0.4c0-0.2-0.1-0.3-0.2-0.4
+				c0,0-0.1,0-0.1,0h-2.1c-0.2,0-0.4,0.1-0.4,0.3v1.2H6.1V0.4C6.1,0.1,5.8,0,5.6,0H3.5C3.3,0,3,0.1,3,0.3v1.2H1.7
+				C0.8,1.5,0,2.2,0,3.1c0,0,0,0,0,0.1v12.6c0,0.9,0.7,1.6,1.6,1.6c0,0,0,0,0.1,0H9c2.1,2.6,5.8,3,8.4,1c1.4-1.1,2.2-2.8,2.3-4.6
+				C19.6,11.7,18.6,9.8,16.9,8.7z M11.7,0.9h1.1v2h-1.1V0.9z M3.9,0.9h1.3v2H3.9V0.9z M0.9,3.2c0-0.4,0.3-0.8,0.8-0.8
+				c0,0,0.1,0,0.1,0H3v0.8c0,0.3,0.2,0.5,0.5,0.5h2.1c0.3,0,0.5-0.2,0.5-0.5V2.4h4.8v0.8c0,0.2,0.2,0.5,0.4,0.5h2.1
+				c0.2,0,0.3-0.2,0.3-0.5V2.4h1.5c0.5-0.1,0.9,0.3,0.9,0.7c0,0,0,0,0,0v2.7H0.9V3.2z M1.7,16.5c-0.4,0-0.8-0.3-0.8-0.7
+				c0,0,0-0.1,0-0.1v-9h15.2v1.5c-0.8-0.3-1.6-0.5-2.4-0.5c-3.3,0-6,2.7-6,6c0,1,0.2,2,0.7,2.8L1.7,16.5L1.7,16.5z M13.6,18.7
+				c-2.8,0-5.1-2.3-5.1-5.1c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1v0C18.7,16.5,16.4,18.7,13.6,18.7L13.6,18.7z"/>
+			<path id="Path_2425" class="st3" d="M15.7,13.7h-2v-2.6c0-0.2-0.2-0.4-0.4-0.4c-0.2,0-0.4,0.2-0.4,0.4v3c0,0.3,0.3,0.4,0.5,0.4
+				h2.3c0.2,0,0.4-0.2,0.4-0.4C16.1,13.9,15.9,13.7,15.7,13.7C15.7,13.7,15.7,13.7,15.7,13.7L15.7,13.7z"/>
+		</g>
+	</g>
+</g>
+</svg>

hhh_index/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>

hhh_index/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>

hhh_index/images/menu/close-btn-search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17"><defs><style>.a{fill:#fff;}.a,.b{stroke:#ee7800;}.b{fill:none;stroke-linecap:round;stroke-miterlimit:10;}</style></defs><g transform="translate(0.5 0.729)"><circle class="a" cx="8" cy="8" r="8" transform="translate(0 -0.229)"/><path class="b" d="M25.6,31.236l2.818-2.818L31.236,25.6" transform="translate(-20.59 -20.66)"/><path class="b" d="M25.6,25.6l2.818,2.818,2.818,2.818" transform="translate(-20.59 -20.66)"/></g></svg>

hhh_index/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>

hhh_index/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>

hhh_index/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>

hhh_index/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>

hhh_index/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>

hhh_index/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>

hhh_index/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>

hhh_index/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>

hhh_index/images/menu/phone.svg

@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 72 60" style="enable-background:new 0 0 72 60;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{enable-background:new    ;}
+	.st2{fill:#707070;}
+	.st3{fill:#ED7900;stroke:#ED7900;stroke-width:0.3;}
+</style>
+<g id="Group_83" transform="translate(1999 -1016)">
+	<rect id="Rectangle_94" x="-1999" y="1016" class="st0" width="72" height="60"/>
+	<g class="st1">
+		<path class="st2" d="M-1982,1061.3c-0.6,0.3-1.2,0.6-1.9,0.9v4.8c0,1.1-0.6,1.7-1.7,1.7h-1.5l-0.4-1.6c0.4,0.1,0.9,0.1,1.3,0.1
+			c0.4,0,0.6-0.2,0.6-0.6v-3.7c-0.6,0.2-1.3,0.5-2,0.7l-0.4-1.7c0.8-0.2,1.6-0.4,2.4-0.7v-3.6h-2.2v-1.5h2.2v-2.9h1.6v2.9h1.9v1.5
+			h-1.9v2.9c0.6-0.3,1.3-0.6,1.9-0.9V1061.3z M-1973,1057.9l-5.1,0.9c0.1,0.8,0.2,1.5,0.3,2.2c0.1,0.6,0.3,1.3,0.5,1.8
+			c1-1,1.9-2.2,2.7-3.6l1.4,0.7c-1,1.8-2.1,3.3-3.5,4.6c0.1,0.3,0.3,0.6,0.4,0.8c0.6,1,1.1,1.5,1.6,1.5c0.3-0.1,0.7-1,1.1-2.8
+			l1.4,0.9c-0.3,1-0.6,1.8-1,2.4c-0.4,0.8-0.9,1.2-1.4,1.2c-0.8,0-1.6-0.6-2.4-1.6c-0.3-0.4-0.6-0.9-0.9-1.5
+			c-1.1,0.8-2.3,1.4-3.6,1.9l-0.9-1.4c1.5-0.5,2.8-1.2,3.9-2c-0.2-0.6-0.4-1.2-0.6-1.8c-0.2-0.8-0.4-1.9-0.6-3l-2.1,0.4l-0.2-1.5
+			l2.2-0.4c-0.1-1.4-0.2-2.9-0.2-4.5h1.6c0,1.5,0,3,0.1,4.2l5-0.9L-1973,1057.9z M-1974.2,1055.2l-1.4,0.7c-0.5-0.8-1-1.6-1.6-2.2
+			l1.4-0.7C-1975.3,1053.7-1974.7,1054.5-1974.2,1055.2z"/>
+		<path class="st2" d="M-1967.1,1055.1h1.8v1.5h-5.4v-1.5h2.1c-0.2-0.6-0.5-1.1-0.7-1.7l1.5-0.4
+			C-1967.6,1053.8-1967.3,1054.5-1967.1,1055.1z M-1965.6,1068.5h-1.4v-0.7h-1.8v0.7h-1.5v-5.9h4.7V1068.5z M-1965.8,1057.7v1.4
+			h-4.3v-1.4H-1965.8z M-1965.8,1060v1.4h-4.3v-1.4H-1965.8z M-1967.1,1066.3v-2.4h-1.8v2.4H-1967.1z M-1962.2,1054.3v1.4h-2.8v-1.4
+			H-1962.2z M-1962.2,1058.6v1.4h-2.8v-1.4H-1962.2z M-1956.3,1068.8h-1.5v-0.9h-4.8v0.9h-1.5v-6.4h7.9V1068.8z M-1961.8,1058
+			l-0.9-1.2c0.8-1,1.4-2.3,1.7-3.7l1.4,0.2c-0.1,0.4-0.2,0.9-0.3,1.3h4.3v1.2c-0.3,1.1-0.7,2-1.1,2.7l-1.1-0.9
+			c0.3-0.4,0.5-1,0.7-1.6h-1.3c0,0.5-0.1,1-0.1,1.4c0.4,1.7,1.4,2.8,3,3.4l-0.6,1.3c-1.5-0.6-2.5-1.6-3-3c-0.6,1.4-1.7,2.3-3.2,3
+			l-0.6-1.3c1.7-0.7,2.7-1.8,3.1-3.5c0.1-0.3,0.1-0.8,0.1-1.4h-0.7C-1960.8,1056.6-1961.2,1057.4-1961.8,1058z M-1957.9,1066.4v-2.6
+			h-4.8v2.6H-1957.9z"/>
+		<path class="st2" d="M-1951.5,1055.1c-0.2-0.6-0.5-1.1-0.7-1.7l1.5-0.4c0.3,0.8,0.6,1.5,0.7,2.1h1.8v1.5h-5.5v-1.5H-1951.5z
+			 M-1951.8,1068.8h-1.5v-6.2h4.8v5.9h-1.5v-0.7h-1.8V1068.8z M-1948.7,1057.6v1.4h-4.4v-1.4H-1948.7z M-1948.7,1060v1.4h-4.4v-1.4
+			H-1948.7z M-1950,1064h-1.8v2.3h1.8V1064z M-1947.5,1059.4l-1-1.2c1.3-1.4,2.1-3.1,2.6-5.2l1.6,0.2c-0.1,0.5-0.3,1-0.4,1.5h6
+			c0,6.5-0.1,10.5-0.3,12c-0.2,1.3-1,2-2.4,2c-0.4,0-1,0-1.9-0.1l-0.4-1.5c0.8,0.1,1.5,0.1,2.1,0.1c0.7,0,1.1-0.4,1.2-1.2
+			c0.1-1,0.2-4.2,0.2-9.7h-5.1c-0.3,0.6-0.6,1.1-1,1.6h4.4v8.1h-5.1v-7.2C-1947.2,1059-1947.3,1059.2-1947.5,1059.4z
+			 M-1943.3,1061.2v-2h-2.2v2H-1943.3z M-1943.3,1062.5h-2.2v2.1h2.2V1062.5z"/>
+	</g>
+	<g id="Group_408" transform="translate(-1964.225 1024.401)">
+		<g id="Group_407" transform="translate(0)">
+			<path id="Path_2432" class="st3" d="M11.6,4.5c-0.2-0.9-0.6-1.7-1.2-2.4c-0.3-0.4-0.6-0.7-1-0.9C8.4,0.4,7.2,0,5.9,0l0,0
+				C5.6,0,5.2,0,4.8,0.1c-1.1,0.2-2.1,0.7-3,1.5C0.6,2.7,0,4.3,0,5.9c0,1,0.3,2,0.8,2.9C0.8,8.9,0.9,9.1,1,9.2l-0.9,1.7
+				c-0.2,0.3,0,0.6,0.2,0.8c0.1,0,0.2,0.1,0.3,0.1l0,0c0.1,0,0.2,0,0.3-0.1l1.9-1c0,0,0,0,0,0l0,0c0,0,0.1-0.1,0.1-0.1l0,0
+				c0,0,0-0.1,0-0.1l0,0c0,0,0-0.1,0-0.1l0,0c0,0,0-0.1-0.1-0.1l0,0c0,0,0,0-0.1,0l0,0c-0.1,0-0.1-0.1-0.2,0h0l0,0l0,0
+				c0,0-0.1,0-0.1,0l-1.8,1l1-1.8c0.1-0.1,0-0.2,0-0.3C1.5,8.9,1.4,8.7,1.3,8.5C0.9,7.7,0.6,6.8,0.6,5.9c0-1.4,0.6-2.8,1.6-3.8
+				c1-0.9,2.3-1.5,3.7-1.5l0,0c1.1,0,2.2,0.4,3.2,1.1c2.3,1.8,2.8,5.1,1,7.4C9.9,9.3,9.8,9.5,9.6,9.7c-1,0.9-2.3,1.5-3.7,1.5l0,0
+				c-0.7,0-1.4-0.1-2.1-0.4c-0.2-0.1-0.3,0-0.4,0.2c-0.1,0.2,0,0.3,0.2,0.4l0,0l0,0c0.7,0.3,1.5,0.5,2.3,0.5l0,0
+				c0.4,0,0.8,0,1.1-0.1c1.1-0.2,2.1-0.7,3-1.5c1.2-1.1,1.8-2.7,1.8-4.3C11.8,5.4,11.7,5,11.6,4.5L11.6,4.5z"/>
+		</g>
+	</g>
+	<g id="Group_410" transform="translate(-1957.351 1029.992)">
+		<g id="Group_409" transform="translate(0 0)">
+			<path id="Path_2433" class="st3" d="M0.4,0C0.2,0,0,0.1,0,0.2c0,0.2,0.1,0.3,0.2,0.4s0.3-0.1,0.4-0.2c0,0,0-0.1,0-0.1
+				C0.6,0.1,0.5,0,0.4,0z"/>
+		</g>
+	</g>
+	<g id="Group_412" transform="translate(-1959.761 1029.992)">
+		<g id="Group_411" transform="translate(0 0)">
+			<path id="Path_2434" class="st3" d="M0.4,0C0.2,0,0,0.1,0,0.2c0,0.2,0.1,0.3,0.2,0.4s0.3-0.1,0.4-0.2c0,0,0-0.1,0-0.1
+				C0.6,0.1,0.5,0,0.4,0z"/>
+		</g>
+	</g>
+	<g id="Group_414" transform="translate(-1958.555 1029.992)">
+		<g id="Group_413" transform="translate(0 0)">
+			<path id="Path_2435" class="st3" d="M0.4,0C0.2,0,0,0.1,0,0.2c0,0.2,0.1,0.3,0.2,0.4s0.3-0.1,0.4-0.2c0,0,0-0.1,0-0.1
+				C0.6,0.1,0.5,0,0.4,0z"/>
+		</g>
+	</g>
+	<g id="Group_416" transform="translate(-1973 1027.635)">
+		<g id="Group_415" transform="translate(0 0)">
+			<path id="Path_2436" class="st3" d="M17.4,12.2L17.4,12.2L17.4,12.2c0-0.1-0.1-0.2-0.2-0.2c0,0-0.1,0-0.1,0l0,0c0,0-0.1,0-0.1,0
+				c-0.1,0-0.1,0-0.2,0.1l0,0c-0.1,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0.1l0,0c0,0,0,0,0,0c0,0.2,0.1,0.5,0.1,0.7c0,1-0.4,2-1.1,2.7
+				c-0.7,0.7-1.7,1.1-2.7,1.1c-0.1,0-0.1,0-0.2,0c-3.9-0.2-7.5-2.1-9.8-5.2c-1.5-2-2.4-4.4-2.5-7c0-0.1,0-0.1,0-0.2
+				c0-2.1,1.7-3.7,3.7-3.7c0,0,0,0,0.1,0c0.2,0,0.4,0,0.6,0C6.2,0.8,7.1,1.8,7.1,3v1.6c0,0.9-0.8,1.6-1.7,1.6H5
+				c-0.2,0-0.3,0.1-0.3,0.3c0,0,0,0.1,0,0.1c0.2,0.7,0.6,1.4,1,2.1c1.2,2,3.2,3.4,5.4,4c0.2,0,0.3,0,0.4-0.2c0,0,0-0.1,0-0.1V12
+				c0-0.4,0.2-0.8,0.5-1.2c0.3-0.4,0.8-0.5,1.3-0.5h1.2c0.8,0,1.5,0.4,2,1c0.1,0.1,0.3,0.2,0.4,0.1s0.2-0.3,0.1-0.4l0,0
+				c-0.4-0.6-1-1-1.7-1.2c-0.2-0.1-0.5-0.1-0.7-0.1h-1.2c-0.7,0-1.3,0.2-1.8,0.7c-0.2,0.2-0.4,0.5-0.5,0.7c-0.1,0.3-0.2,0.5-0.2,0.8
+				V12c-2.5-0.8-4.5-2.7-5.4-5.2C6,6.8,6.6,6.6,7,6.2c0.4-0.4,0.7-1,0.7-1.6V3c0-0.7-0.3-1.4-0.7-2C6.5,0.5,5.8,0.1,5.1,0
+				C4.8,0,4.6,0,4.4,0l0,0C3.8,0,3.2,0.1,2.6,0.3C1,1,0,2.6,0,4.3c0,0.1,0,0.2,0,0.3c0.1,2.6,1.1,5.2,2.7,7.3
+				c2.4,3.2,6.2,5.2,10.2,5.4c0.1,0,0.2,0,0.2,0l0,0c1.2,0,2.3-0.5,3.1-1.3c0.8-0.8,1.3-1.9,1.3-3.1C17.5,12.7,17.5,12.4,17.4,12.2
+				L17.4,12.2z"/>
+		</g>
+	</g>
+</g>
+</svg>

hhh_index/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>

hhh_index/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>

hhh_index/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>

hhh_index/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>

hhh_index/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>