commit

css/request.css

@@ -0,0 +1,1123 @@
+@charset "UTF-8";
+/* 裝修需求計算機 */
+/* request Start */
+.request-content {
+  background-color: #FAFAFA;
+}
+.request-content .accordion-button:not(.collapsed) {
+  font-weight: 500;
+  color: #EE751B;
+  background-color: #fff;
+}
+.request-content .accordion-button:not(.collapsed)::after {
+  filter: invert(68%) sepia(41%) saturate(6755%) hue-rotate(350deg) brightness(96%) contrast(93%);
+}
+.request-content .accordion-button:focus {
+  box-shadow: none;
+}
+.request-content .accordion-body {
+  font-size: 0.8rem;
+  line-height: 1.4rem;
+  letter-spacing: 1px;
+  font-weight: 500;
+}
+.request-content .ad-list {
+  padding: 0 50px;
+}
+@media (min-width: 767px) {
+  .request-content .ad-list {
+    position: fixed;
+    bottom: 50px;
+  }
+}
+.request-content .ad-list .img-item {
+  display: flex;
+  justify-content: center;
+  max-width: 700px;
+  margin: auto;
+}
+@media (max-width: 1200px) {
+  .request-content .ad-list .img-item {
+    max-width: 400px;
+    flex-direction: column;
+  }
+}
+.request-content .ad-list .img-item a {
+  padding-top: 15px;
+  display: inline-block;
+  border-top: 1px solid #fff;
+}
+@media (max-width: 1200px) {
+  .request-content .ad-list .img-item a {
+    border-top: none;
+  }
+}
+@media (max-width: 1200px) {
+  .request-content .ad-list .img-item a:first-child {
+    border-top: 1px solid #fff;
+  }
+}
+@media (max-width: 767px) {
+  .request-content .ad-list {
+    width: 100%;
+    padding: 0;
+    margin-top: 50px;
+  }
+}
+.request-content .ad-list p {
+  padding-bottom: 10px;
+  text-align: center;
+}
+@media (max-width: 767px) {
+  .request-content .ad-list p {
+    padding-bottom: 15px;
+    border-bottom: 1px solid #000;
+  }
+}
+.request-content .ad-list img {
+  width: 100%;
+  padding: 0 8px;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
+}
+@media (max-width: 767px) {
+  .request-content .ad-list img {
+    padding: 0;
+  }
+}
+.request-content .main {
+  width: 70%;
+  position: relative;
+}
+@media (max-width: 1400px) {
+  .request-content .main {
+    width: 60%;
+  }
+}
+@media (max-width: 1200px) {
+  .request-content .main {
+    width: 55%;
+  }
+}
+@media (max-width: 991px) {
+  .request-content .main {
+    width: 50%;
+  }
+}
+@media (max-width: 767px) {
+  .request-content .main {
+    width: 100%;
+  }
+}
+.request-content .main h2,
+.request-content .main h3 {
+  font-weight: normal;
+}
+.request-content .main .info-block {
+  height: 100%;
+  padding: 100px 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  color: #fff;
+}
+@media (max-width: 767px) {
+  .request-content .main .info-block {
+    justify-content: center;
+  }
+}
+@media (min-width: 767px) {
+  .request-content .main .info-block .headline {
+    position: fixed;
+    top: 100px;
+    padding: 0 50px;
+  }
+}
+.request-content .main .info-block h2 {
+  font-size: 70px;
+  font-weight: bold;
+}
+@media (max-width: 1200px) {
+  .request-content .main .info-block h2 {
+    font-size: 38px;
+  }
+}
+@media (max-width: 575px) {
+  .request-content .main .info-block h2 {
+    font-size: 26px;
+    line-height: 36px;
+  }
+}
+.request-content .main .info-block h3 {
+  font-size: 20px;
+  margin-top: 30px;
+  line-height: 30px;
+  letter-spacing: 1px;
+}
+@media (max-width: 767px) {
+  .request-content .main .info-block h3 {
+    font-size: 16px;
+  }
+}
+@media (max-width: 575px) {
+  .request-content .main .info-block h3 {
+    font-size: 14px;
+    line-height: 24px;
+  }
+}
+.request-content .main .img-block {
+  width: 70%;
+  height: 100%;
+  position: fixed;
+  /* 設置灰色遮罩 */
+}
+@media (max-width: 1400px) {
+  .request-content .main .img-block {
+    width: 60%;
+  }
+}
+@media (max-width: 1200px) {
+  .request-content .main .img-block {
+    width: 55%;
+  }
+}
+@media (max-width: 991px) {
+  .request-content .main .img-block {
+    width: 50%;
+  }
+}
+@media (max-width: 767px) {
+  .request-content .main .img-block {
+    width: 100%;
+    position: unset;
+  }
+}
+.request-content .main .img-block::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 99.9%;
+  height: 100%;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 0.7);
+}
+.request-content .main .img-block .img-slider {
+  width: 33.3%;
+  height: 100vh;
+  min-height: 100%;
+  overflow: hidden;
+}
+@media (max-width: 767px) {
+  .request-content .main .img-block .img-slider {
+    height: 50vh;
+  }
+}
+@media (max-width: 575px) {
+  .request-content .main .img-block .img-slider {
+    height: 40vh;
+  }
+}
+.request-content .main .img-block .img-slider .img-slider-list {
+  position: relative;
+}
+.request-content .main .img-block .img-slider .img-slider-list img {
+  width: 100%;
+  height: 330px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+@media (min-height: 1300px) {
+  .request-content .main .img-block .img-slider .img-slider-list img {
+    height: 38vh;
+  }
+}
+.request-content .main .logo {
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+.request-content .main .logo img {
+  width: 100%;
+  max-width: 300px;
+}
+.request-content .form-block {
+  padding: 2rem 2.5rem;
+  width: 30%;
+  margin-left: auto;
+  border: none;
+  background-color: #FAFAFA;
+}
+@media (max-width: 1400px) {
+  .request-content .form-block {
+    width: 40%;
+  }
+}
+@media (max-width: 1200px) {
+  .request-content .form-block {
+    width: 45%;
+  }
+}
+@media (max-width: 991px) {
+  .request-content .form-block {
+    width: 50%;
+    padding: 2rem;
+  }
+}
+@media (max-width: 767px) {
+  .request-content .form-block {
+    width: 100%;
+    padding: 2rem 4rem;
+  }
+}
+@media (max-width: 575px) {
+  .request-content .form-block {
+    width: 100%;
+    padding: 2rem;
+  }
+}
+.request-content .form-block .card {
+  border: none;
+  max-width: 365px;
+}
+@media (max-width: 767px) {
+  .request-content .form-block .card {
+    max-width: 435px;
+  }
+}
+.request-content .form-block .card .logo,
+.request-content .form-block .card .card-body {
+  background-color: #FAFAFA;
+}
+.request-content .form-block form {
+  color: #34404B;
+}
+.request-content .form-block form ::-moz-placeholder {
+  color: #d3d3d3;
+  opacity: 1;
+  /* Firefox */
+}
+.request-content .form-block form ::placeholder {
+  color: #d3d3d3;
+  opacity: 1;
+  /* Firefox */
+}
+.request-content .form-block form .invalid-feedback {
+  display: none;
+  height: 0px;
+  text-align: end;
+}
+.request-content .form-block form .submit {
+  padding: 10px;
+  background-color: #EE751B;
+  border: none;
+}
+.request-content .form-block form .type-items {
+  height: 70px;
+  padding: 5px 10px;
+  align-items: center;
+  border: 1px solid #aaaaaa;
+  border-radius: 5px;
+  transition: all 0.3s;
+}
+.request-content .form-block form .type-items:hover {
+  border-color: #ee751b;
+}
+.request-content .form-block form .type-items span {
+  width: 100px;
+}
+.request-content .form-block form .type-items span h4 {
+  margin-bottom: 0;
+  font-size: 18px;
+}
+.request-content .form-block form .type-items span p {
+  margin-bottom: 0;
+  font-size: 12px;
+  color: #ee751b;
+}
+.request-content .form-block form .type-items small {
+  max-width: 180px;
+  display: inline-block;
+  font-size: 12px;
+  color: #959595;
+}
+@media (max-width: 991px) {
+  .request-content .form-block form .type-items small {
+    max-width: 150px;
+  }
+}
+@media (max-width: 767px) {
+  .request-content .form-block form .type-items small {
+    max-width: 100%;
+  }
+}
+@media (max-width: 400px) {
+  .request-content .form-block form .type-items small {
+    max-width: 140px;
+  }
+}
+.request-content .form-block form .type-items label,
+.request-content .form-block form .type-items input {
+  cursor: pointer;
+}
+.request-content .form-block form .type-items input {
+  margin: 0 5px;
+  border: 2px solid white;
+  box-shadow: 0 0 0 1px #EE751B;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border-radius: 50%;
+  width: 12px;
+  height: 12px;
+  background-color: #fff;
+  transition: all ease-in 0.2s;
+}
+@media (max-width: 991px) {
+  .request-content .form-block form .type-items input {
+    width: 11px;
+    height: 11px;
+  }
+}
+@media (max-width: 575px) {
+  .request-content .form-block form .type-items input {
+    height: 10px;
+  }
+}
+.request-content .form-block form .type-items input:checked {
+  background-color: #EE751B;
+}
+.request-content .form-block form .disclaimer {
+  margin-top: 5px;
+  font-size: 12px;
+  text-align: center;
+}
+.request-content .form-block form .disclaimer a {
+  color: #EE751B;
+  text-decoration: underline;
+}
+.request-content .form-block form input[type=checkbox] {
+  position: relative;
+  border-color: #000;
+  cursor: pointer;
+}
+.request-content .form-block form input[type=checkbox]:focus {
+  box-shadow: unset;
+}
+.request-content .form-block form input[type=checkbox]:checked {
+  background-color: white;
+}
+.request-content .form-block form input[type=checkbox]:checked::before {
+  content: "✓";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 14px;
+  color: black;
+}
+.request-content .loading-block {
+  width: 100vw;
+  height: 100vh;
+  display: none;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  background: #fff;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 100;
+}
+.request-content .loading-block p {
+  font-size: 16px;
+  color: #EE751B;
+  letter-spacing: 4.8px;
+}
+.request-content .loading-block .spinner {
+  /* Size and position */
+  font-size: 100px;
+  /* 1em */
+  width: 1em;
+  height: 1em;
+  margin-bottom: 20px;
+  position: relative;
+  /* Styles */
+  list-style: none;
+  border-radius: 50%;
+  border: 0.01em solid rgba(150, 150, 150, 0.2);
+  /* Subtle white line circling the dots */
+}
+.request-content .loading-block .spinner li {
+  width: 0.2em;
+  height: 0.2em;
+  position: absolute;
+  border-radius: 50%;
+}
+.request-content .loading-block .spinner li:nth-child(1) {
+  background: #EE751B;
+  /* Blue */
+  top: 0;
+  left: 50%;
+  margin-left: -0.1em;
+  transform-origin: 50% 250%;
+  animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
+}
+.request-content .loading-block .spinner li:nth-child(2) {
+  background: #FF505E;
+  /* Red */
+  top: 50%;
+  right: 0;
+  margin-top: -0.1em;
+  transform-origin: -150% 50%;
+  animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
+}
+.request-content .loading-block .spinner li:nth-child(3) {
+  background: #FFCD26;
+  /* Yellow */
+  bottom: 0;
+  left: 50%;
+  margin-left: -0.1em;
+  transform-origin: 50% -150%;
+  animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
+}
+.request-content .loading-block .spinner li:nth-child(4) {
+  background: #AAD647;
+  /* Green */
+  top: 50%;
+  left: 0;
+  margin-top: -0.1em;
+  transform-origin: 250% 50%;
+  animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
+}
+@keyframes rota {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes opa {
+  12.0% {
+    opacity: 0.8;
+  }
+  19.5% {
+    opacity: 0.88;
+  }
+  37.2% {
+    opacity: 0.64;
+  }
+  40.5% {
+    opacity: 0.52;
+  }
+  52.7% {
+    opacity: 0.69;
+  }
+  60.2% {
+    opacity: 0.6;
+  }
+  66.6% {
+    opacity: 0.52;
+  }
+  70.0% {
+    opacity: 0.63;
+  }
+  79.9% {
+    opacity: 0.6;
+  }
+  84.2% {
+    opacity: 0.75;
+  }
+  91.0% {
+    opacity: 0.87;
+  }
+}
+
+.request-content .logo,
+.result-content .logo {
+  display: flex;
+  justify-content: center;
+}
+.request-content .logo img,
+.result-content .logo img {
+  width: 100%;
+  max-width: 150px;
+}
+@media (max-width: 767px) {
+  .request-content .logo img,
+  .result-content .logo img {
+    max-width: 110px;
+  }
+}
+
+.result-content {
+  padding: 20px 0 50px;
+}
+.result-content a {
+  text-decoration: none;
+}
+.result-content p {
+  margin-bottom: 0;
+}
+.result-content ul {
+  list-style: none;
+  padding: 0;
+}
+.result-content .logo {
+  margin-bottom: 25px;
+}
+.result-content .line {
+  position: relative;
+  z-index: 100;
+  padding: 25px 0;
+  border-top: 1px solid #959595;
+  border-bottom: 1px solid #959595;
+}
+@media (max-width: 767px) {
+  .result-content .line {
+    border-bottom: none;
+  }
+}
+.result-content .bg-text {
+  position: absolute;
+  font-size: 20em;
+  top: 20px;
+  left: 0;
+  color: #fff;
+}
+@media (max-width: 767px) {
+  .result-content .bg-text {
+    display: none;
+  }
+}
+.result-content .tab-list {
+  margin: 0;
+  padding: 0;
+  display: none;
+  justify-content: center;
+  position: absolute;
+  z-index: 1000;
+  top: 15px;
+  left: 0;
+  right: 0;
+}
+@media (max-width: 575px) {
+  .result-content .tab-list {
+    top: 10px;
+  }
+}
+.result-content .tab-list li {
+  margin: 0 20px;
+}
+.result-content .tab-list li a {
+  color: #959595;
+}
+.result-content .tab-list #underline {
+  position: absolute;
+  bottom: -1px;
+  left: 40px;
+  width: 40px;
+  height: 1px;
+  z-index: 1000;
+  background-color: #fff;
+  transition: width 0.3s;
+}
+.result-content .card-item {
+  position: relative;
+  width: 100%;
+  height: 550px;
+  background-image: url("../img/result-bg.png");
+  background-size: auto;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 20px;
+}
+@media (max-width: 991px) {
+  .result-content .card-item {
+    height: 690px;
+  }
+}
+@media (max-width: 575px) {
+  .result-content .card-item {
+    height: 800px;
+  }
+}
+.result-content .card-item::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 20px;
+  background-color: rgba(5, 13, 21, 0.8);
+  -webkit-backdrop-filter: blur(2px);
+          backdrop-filter: blur(2px);
+}
+.result-content .card-item .main-info {
+  height: 80%;
+  justify-content: center;
+}
+@media (max-width: 991px) {
+  .result-content .card-item .main-info {
+    align-items: center;
+    flex-direction: column;
+  }
+}
+@media (max-width: 991px) {
+  .result-content .card-item .main-info.type .chart-box {
+    top: -28%;
+  }
+}
+@media (max-width: 991px) {
+  .result-content .card-item .main-info.type .chart-text {
+    top: 18.5%;
+  }
+}
+.result-content .card-item .chart-box {
+  position: absolute;
+  z-index: 100;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+@media (max-width: 991px) {
+  .result-content .card-item .chart-box {
+    top: -30%;
+  }
+}
+.result-content .card-item .chart-box #chart {
+  width: 300px !important;
+}
+@media (max-width: 991px) {
+  .result-content .card-item .chart-box #chart {
+    width: 200px !important;
+  }
+}
+.result-content .chart-text {
+  position: absolute;
+  z-index: 100;
+  font-size: 42px;
+  font-weight: 500;
+  color: #fff;
+  text-align: center;
+}
+@media (max-width: 991px) {
+  .result-content .chart-text {
+    top: 17%;
+    font-size: 30px;
+  }
+}
+.result-content .chart-text.range {
+  display: none;
+}
+@media (max-width: 991px) {
+  .result-content .chart-text.range {
+    top: 10%;
+  }
+}
+@media (max-width: 575px) {
+  .result-content .chart-text.range {
+    top: 11.5%;
+  }
+}
+.result-content .chart-text.range .tilde {
+  position: absolute;
+  left: 50px;
+  transform: rotate(90deg);
+}
+@media (max-width: 767px) {
+  .result-content .chart-text.range .tilde {
+    left: 35px;
+  }
+}
+.result-content .price-card {
+  position: absolute;
+  z-index: 100;
+  color: #fff;
+}
+@media (max-width: 991px) {
+  .result-content .price-card {
+    top: 39%;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+@media (max-width: 575px) {
+  .result-content .price-card {
+    padding: 0 15px;
+  }
+}
+.result-content .price-card ul {
+  width: 250px;
+  max-width: 100%;
+  margin-bottom: 0;
+  padding: 15px 0 25px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 20px;
+  border-radius: 10px;
+  border: 1px solid #fff;
+}
+@media (max-width: 991px) {
+  .result-content .price-card ul {
+    width: 100%;
+    padding: 10px 0;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: space-evenly;
+  }
+}
+@media (max-width: 575px) {
+  .result-content .price-card ul {
+    max-width: 450px;
+    width: 95%;
+    margin: auto;
+    font-size: 14px;
+  }
+}
+.result-content .price-card ul li span {
+  width: 90px;
+  display: inline-block;
+  text-align: center;
+  border-bottom: 1px solid #fff;
+  font-size: 28px;
+  font-weight: 500;
+}
+@media (max-width: 575px) {
+  .result-content .price-card ul li span {
+    width: 70px;
+    font-size: 20px;
+  }
+}
+.result-content .price-card small {
+  margin-top: 20px;
+  display: block;
+  color: #B7B7B7;
+  text-align: center;
+}
+@media (max-width: 991px) {
+  .result-content .price-card small {
+    margin-top: 10px;
+  }
+}
+@media (max-width: 767px) {
+  .result-content .price-card small {
+    width: 90%;
+    text-align: end;
+  }
+}
+@media (max-width: 991px) {
+  .result-content .price-card .main {
+    max-width: 480px;
+  }
+}
+@media (max-width: 575px) {
+  .result-content .price-card .main {
+    max-width: 430px;
+  }
+}
+.result-content .price-card .partial {
+  width: 280px;
+  display: none;
+}
+@media (max-width: 991px) {
+  .result-content .price-card .partial {
+    /* Grid */
+    width: 600px;
+    max-width: 100%;
+    grid-template-columns: repeat(auto-fit, minmax(220px, max-content));
+    padding: initial;
+  }
+}
+@media (max-width: 767px) {
+  .result-content .price-card .partial {
+    width: 500px;
+    grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
+    font-size: 16px;
+  }
+}
+@media (max-width: 575px) {
+  .result-content .price-card .partial {
+    width: 350px;
+    grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
+    font-size: 14px;
+  }
+}
+.result-content .price-card .partial li {
+  display: flex;
+  align-items: end;
+  justify-content: center;
+}
+@media (max-width: 991px) {
+  .result-content .price-card .partial li {
+    padding: 0px 10px 10px;
+  }
+}
+.result-content .price-card .partial li span {
+  margin: 0 5px;
+  width: 120px;
+}
+@media (max-width: 767px) {
+  .result-content .price-card .partial li span {
+    width: 100px;
+    font-size: 24px;
+  }
+}
+.result-content .price-card .partial li p {
+  width: 80px;
+  text-align: center;
+}
+.result-content .info-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+}
+.result-content .info-item h3 {
+  font-size: 24px;
+  line-height: 32px;
+  text-align: center;
+}
+@media (max-width: 1200px) {
+  .result-content .info-item h3 {
+    font-size: 20px;
+  }
+}
+.result-content .info-item h4 {
+  font-size: 16px;
+  font-weight: 300;
+  color: #34404B;
+}
+@media (max-width: 1200px) {
+  .result-content .info-item h4 {
+    font-size: 15px;
+  }
+}
+@media (max-width: 991px) {
+  .result-content .info-item,
+  .result-content .info-item img {
+    margin-top: 25px;
+  }
+}
+.result-content .info-item img {
+  width: 100%;
+  height: 450px;
+  max-width: 330px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 0 0 50% 0;
+}
+.result-content .info-item .img-block {
+  position: relative;
+}
+.result-content .info-item .img-block a {
+  display: block;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 1000;
+}
+.result-content .info-item .img-block a img {
+  width: 150px;
+  height: 150px;
+}
+.result-content .info-item .img-block a .btn {
+  position: relative;
+  z-index: 100;
+  transition: all 0.3s;
+}
+.result-content .info-item .img-block a .btn:hover {
+  opacity: 0.9;
+}
+.result-content .info-item .img-block a .text {
+  width: 140px;
+  height: 140px;
+  position: absolute;
+  left: 5px;
+  top: 2px;
+  animation: rotate 15s linear infinite;
+}
+.result-content .info-item .img-block a .bg {
+  position: absolute;
+  left: 0px;
+  top: -3px;
+  z-index: -1;
+}
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.result-content .info-card {
+  width: 93%;
+  margin: 30px;
+  position: absolute;
+  bottom: 0;
+  background: #fff;
+  border-radius: 10px;
+}
+@media (max-width: 767px) {
+  .result-content .info-card {
+    margin: 20px;
+  }
+}
+@media (max-width: 575px) {
+  .result-content .info-card {
+    padding: 0 20px;
+  }
+}
+.result-content .info-card .row {
+  padding: 20px 0;
+}
+@media (max-width: 991px) {
+  .result-content .info-card .row {
+    padding: 0 0 15px;
+    justify-content: center;
+  }
+}
+@media (max-width: 991px) {
+  .result-content .info-card .row div:first-child {
+    width: 400px;
+  }
+}
+.result-content .info-card .row ul {
+  margin: 0;
+  padding: 0;
+}
+@media (max-width: 991px) {
+  .result-content .info-card .row ul {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.result-content .info-card .row ul li {
+  font-weight: 500;
+}
+.result-content .info-card .row .caption {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+@media (max-width: 1200px) {
+  .result-content .info-card .row .caption {
+    flex-direction: column;
+  }
+}
+@media (max-width: 991px) {
+  .result-content .info-card .row .caption {
+    width: 400px;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+.result-content .info-card .row .caption h3 {
+  font-size: 18px;
+  color: #34404B;
+  margin-bottom: 0;
+}
+.result-content .info-card .row .caption small {
+  font-size: 14px;
+  color: #EE751B;
+}
+.result-content .info-card .row .caption p {
+  max-width: 220px;
+  font-size: 14px;
+  color: #959595;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+@media (max-width: 575px) {
+  .result-content .info-card .row .caption section {
+    width: 100%;
+  }
+}
+@media (max-width: 991px) {
+  .result-content .info-card .row .border-end {
+    padding: 10px;
+    border-right: none !important;
+    border-bottom: 2px solid #dddddd;
+  }
+}
+.result-content .info-card .row .reset-btn {
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 10px;
+  background-color: #B7B7B7;
+  color: #fff;
+  transition: all 0.3s;
+}
+@media (max-width: 991px) {
+  .result-content .info-card .row .reset-btn {
+    width: 180px;
+    height: 50px;
+    margin: 15px auto 0;
+  }
+}
+.result-content .info-card .row .reset-btn:hover {
+  background-color: #959595;
+}
+@media (max-width: 767px) {
+  .result-content .style-list {
+    border-top: 1px solid #959595;
+  }
+}
+.result-content .style-list p {
+  padding: 20px;
+  margin-bottom: 0;
+  font-size: 20px;
+  font-weight: 500;
+  color: #34404B;
+  text-align: center;
+}
+.result-content .style-list a {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  border-radius: 10px;
+}
+.result-content .style-list a:hover img {
+  transform: scale(1.1);
+}
+.result-content .style-list a p {
+  padding: 5px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  font-size: 18px;
+  background: rgba(255, 255, 255, 0.75);
+}
+.result-content .style-list a img {
+  width: 100%;
+  height: 180px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 10px;
+  transition: all 0.5s;
+  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
+}
+@media (max-width: 575px) {
+  .result-content .style-list a img {
+    height: 120px;
+  }
+}
+
+/* request End *//*# sourceMappingURL=request.css.map */

css/request.scss

@@ -0,0 +1,1215 @@
+/* 裝修需求計算機 */
+/* request Start */
+
+.request-content {
+  // display: none;
+  background-color: #FAFAFA;
+
+  .accordion-button:not(.collapsed) {
+    font-weight: 500;
+    color: #EE751B;
+    background-color: #fff;
+
+    &::after {
+      filter: invert(68%) sepia(41%) saturate(6755%) hue-rotate(350deg) brightness(96%) contrast(93%);
+    }
+  }
+
+  .accordion-button:focus {
+    box-shadow: none;
+  }
+
+  .accordion-body {
+    font-size: .8rem;
+    line-height: 1.4rem;
+    letter-spacing: 1px;
+    font-weight: 500;
+  }
+
+  .ad-list {
+    padding: 0 50px;
+
+    @media (min-width: 767px) {
+      position: fixed;
+      bottom: 50px;
+    }
+
+    .img-item {
+      display: flex;
+      justify-content: center;
+      max-width: 700px;
+      margin: auto;
+
+      @media (max-width: 1200px) {
+        max-width: 400px;
+        flex-direction: column;
+      }
+
+      a {
+        padding-top: 15px;
+        display: inline-block;
+        border-top: 1px solid #fff;
+
+        @media (max-width: 1200px) {
+          border-top: none;
+        }
+
+        &:first-child {
+          @media (max-width: 1200px) {
+            border-top: 1px solid #fff;
+          }
+        }
+      }
+    }
+
+    @media (max-width: 767px) {
+      width: 100%;
+      padding: 0;
+      margin-top: 50px;
+    }
+
+    p {
+      padding-bottom: 10px;
+      text-align: center;
+
+      @media (max-width: 767px) {
+        padding-bottom: 15px;
+        border-bottom: 1px solid #000;
+      }
+    }
+
+    img {
+      width: 100%;
+      padding: 0 8px;
+      box-shadow: 0px 3px 6px #00000029;
+
+      @media (max-width: 767px) {
+        padding: 0;
+      }
+    }
+  }
+
+  .main {
+    width: 70%;
+    position: relative;
+
+    @media (max-width: 1400px) {
+      width: 60%;
+    }
+
+    @media (max-width: 1200px) {
+      width: 55%;
+    }
+
+    @media (max-width: 991px) {
+      width: 50%;
+    }
+
+    @media (max-width: 767px) {
+      width: 100%
+    }
+
+    h2,
+    h3 {
+      font-weight: normal;
+    }
+
+    .info-block {
+      height: 100%;
+      padding: 100px 50px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      position: absolute;
+      left: 0;
+      right: 0;
+      z-index: 100;
+      color: #fff;
+
+      @media (max-width: 767px) {
+        justify-content: center;
+      }
+
+      .headline {
+        @media (min-width: 767px) {
+          position: fixed;
+          top: 100px;
+          padding: 0 50px;
+        }
+      }
+
+      h2 {
+        font-size: 70px;
+        font-weight: bold;
+
+        @media (max-width: 1200px) {
+          font-size: 38px;
+        }
+
+        @media (max-width: 575px) {
+          font-size: 26px;
+          line-height: 36px;
+        }
+      }
+
+      h3 {
+        font-size: 20px;
+        margin-top: 30px;
+        line-height: 30px;
+        letter-spacing: 1px;
+
+        @media (max-width: 767px) {
+          font-size: 16px;
+        }
+
+        @media (max-width: 575px) {
+          font-size: 14px;
+          line-height: 24px;
+        }
+      }
+    }
+
+    .img-block {
+      width: 70%;
+      height: 100%;
+      position: fixed;
+      // position: relative;
+      // display: inline-block;
+
+      @media (max-width: 1400px) {
+        width: 60%;
+      }
+
+      @media (max-width: 1200px) {
+        width: 55%;
+      }
+
+      @media (max-width: 991px) {
+        width: 50%;
+      }
+
+      @media (max-width: 767px) {
+        width: 100%;
+        position: unset;
+      }
+
+      /* 設置灰色遮罩 */
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 99.9%; // img-slider 33.3% x 3
+        height: 100%;
+        z-index: 1;
+        background-color: rgba(0, 0, 0, 0.7);
+      }
+
+      .img-slider {
+        width: 33.3%;
+        height: 100vh;
+        min-height: 100%;
+        overflow: hidden;
+
+        @media (max-width: 767px) {
+          height: 50vh;
+        }
+
+        @media (max-width: 575px) {
+          height: 40vh;
+        }
+
+        .img-slider-list {
+          // height: 500px;
+          position: relative;
+
+          img {
+            width: 100%;
+            height: 330px;
+            // height: 500px;
+            object-fit: cover;
+
+            @media (min-height: 1300px) {
+              height: 38vh;
+            }
+          }
+        }
+      }
+    }
+
+    .logo {
+      display: block;
+      width: 100%;
+      text-align: center;
+
+      img {
+        width: 100%;
+        max-width: 300px;
+      }
+    }
+  }
+
+  .form-block {
+    padding: 2rem 2.5rem;
+    width: 30%;
+    margin-left: auto;
+    border: none;
+    background-color: #FAFAFA;
+
+    @media (max-width: 1400px) {
+      width: 40%;
+    }
+
+    @media (max-width: 1200px) {
+      width: 45%;
+    }
+
+    @media (max-width: 991px) {
+      width: 50%;
+      padding: 2rem;
+    }
+
+    @media (max-width: 767px) {
+      width: 100%;
+      padding: 2rem 4rem;
+    }
+
+    @media (max-width: 575px) {
+      width: 100%;
+      padding: 2rem;
+    }
+
+    .card {
+      border: none;
+      max-width: 365px;
+
+      @media (max-width: 767px) {
+        max-width: 435px;
+      }
+
+      .logo,
+      .card-body {
+        background-color: #FAFAFA;
+      }
+
+      // .logo {
+      //   display: flex;
+      //   justify-content: center;
+
+      //   img {
+      //     width: 100%;
+      //     max-width: 150px;
+      //   }
+      // }
+    }
+
+    form {
+      color: #34404B;
+
+      ::placeholder {
+        color: #d3d3d3;
+        opacity: 1;
+        /* Firefox */
+      }
+
+      .invalid-feedback {
+        display: none;
+        height: 0px;
+        text-align: end;
+      }
+
+      .submit {
+        padding: 10px;
+        background-color: #EE751B;
+        border: none;
+      }
+
+      .type-items {
+        height: 70px;
+        padding: 5px 10px;
+        align-items: center;
+        border: 1px solid #aaaaaa;
+        border-radius: 5px;
+        transition: all 0.3s;
+
+        &:hover {
+          border-color: #ee751b;
+        }
+
+        span {
+          width: 100px;
+
+          h4 {
+            margin-bottom: 0;
+            font-size: 18px;
+          }
+
+          p {
+            margin-bottom: 0;
+            font-size: 12px;
+            color: #ee751b;
+          }
+        }
+
+        small {
+          max-width: 180px;
+          display: inline-block;
+          font-size: 12px;
+          color: #959595;
+
+          @media (max-width: 991px) {
+            max-width: 150px;
+          }
+
+          @media (max-width: 767px) {
+            max-width: 100%;
+          }
+
+          @media (max-width: 400px) {
+            max-width: 140px;
+          }
+        }
+
+        label,
+        input {
+          cursor: pointer;
+        }
+
+        input {
+          margin: 0 5px;
+          border: 2px solid white;
+          box-shadow: 0 0 0 1px #EE751B;
+          appearance: none;
+          border-radius: 50%;
+          width: 12px;
+          height: 12px;
+          background-color: #fff;
+          transition: all ease-in 0.2s;
+
+          @media (max-width: 991px) {
+            width: 11px;
+            height: 11px;
+          }
+
+          @media (max-width: 575px) {
+            height: 10px;
+          }
+        }
+
+        input:checked {
+          background-color: #EE751B;
+        }
+      }
+
+      .disclaimer {
+        margin-top: 5px;
+        font-size: 12px;
+        text-align: center;
+
+        a {
+          color: #EE751B;
+          text-decoration: underline;
+        }
+      }
+
+      // 自訂 checkbox
+      input[type="checkbox"] {
+        position: relative;
+        border-color: #000;
+        cursor: pointer;
+
+        &:focus {
+          box-shadow: unset;
+        }
+
+        &:checked {
+          background-color: white;
+
+          &::before {
+            content: "\2713"; // Unicode 編碼
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 14px;
+            color: black;
+          }
+        }
+      }
+    }
+  }
+
+  // .square-footage {
+  //   position: relative;
+
+  //   p {
+  //     top: 40px;
+  //     right: 12px;
+  //     position: absolute;
+  //   }
+  // }
+
+
+
+  .loading-block {
+    width: 100vw;
+    height: 100vh;
+    display: none;
+    // display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    background: #fff;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 100;
+
+    p {
+      font-size: 16px;
+      color: #EE751B;
+      letter-spacing: 4.8px;
+    }
+
+    .spinner {
+      /* Size and position */
+      font-size: 100px;
+      /* 1em */
+      width: 1em;
+      height: 1em;
+      margin-bottom: 20px;
+      position: relative;
+      /* Styles */
+      list-style: none;
+      border-radius: 50%;
+      border: 0.01em solid rgba(150, 150, 150, 0.2);
+      /* Subtle white line circling the dots */
+
+      li {
+        width: 0.2em;
+        height: 0.2em;
+        position: absolute;
+        border-radius: 50%;
+
+        &:nth-child(1) {
+          background: #EE751B;
+          /* Blue */
+          top: 0;
+          left: 50%;
+          margin-left: -0.1em;
+          transform-origin: 50% 250%;
+          animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
+        }
+
+        &:nth-child(2) {
+          background: #FF505E;
+          /* Red */
+          top: 50%;
+          right: 0;
+          margin-top: -0.1em;
+          transform-origin: -150% 50%;
+          animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
+        }
+
+        &:nth-child(3) {
+          background: #FFCD26;
+          /* Yellow */
+          bottom: 0;
+          left: 50%;
+          margin-left: -0.1em;
+          transform-origin: 50% -150%;
+          animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
+        }
+
+        &:nth-child(4) {
+          background: #AAD647;
+          /* Green */
+          top: 50%;
+          left: 0;
+          margin-top: -0.1em;
+          transform-origin: 250% 50%;
+          animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
+        }
+      }
+    }
+  }
+
+  @keyframes rota {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes opa {
+    12.0% {
+      opacity: 0.8;
+    }
+
+    19.5% {
+      opacity: 0.88;
+    }
+
+    37.2% {
+      opacity: 0.64;
+    }
+
+    40.5% {
+      opacity: 0.52;
+    }
+
+    52.7% {
+      opacity: 0.69;
+    }
+
+    60.2% {
+      opacity: 0.6;
+    }
+
+    66.6% {
+      opacity: 0.52;
+    }
+
+    70.0% {
+      opacity: 0.63;
+    }
+
+    79.9% {
+      opacity: 0.6;
+    }
+
+    84.2% {
+      opacity: 0.75;
+    }
+
+    91.0% {
+      opacity: 0.87;
+    }
+  }
+}
+
+.request-content,
+.result-content {
+  .logo {
+    display: flex;
+    justify-content: center;
+
+    img {
+      width: 100%;
+      max-width: 150px;
+
+      @media (max-width: 767px) {
+        max-width: 110px;
+      }
+    }
+  }
+}
+
+.result-content {
+  // display: none;
+  padding: 20px 0 50px;
+
+  a {
+    text-decoration: none;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  .logo {
+    margin-bottom: 25px;
+  }
+
+  .line {
+    position: relative;
+    z-index: 100;
+    padding: 25px 0;
+    border-top: 1px solid #959595;
+    border-bottom: 1px solid #959595;
+
+    @media (max-width: 767px) {
+      border-bottom: none;
+    }
+  }
+
+  .bg-text {
+    position: absolute;
+    font-size: 20em;
+    top: 20px;
+    left: 0;
+    color: #fff;
+
+    @media (max-width: 767px) {
+      display: none;
+    }
+  }
+
+  .tab-list {
+    margin: 0;
+    padding: 0;
+    // display: flex;
+    display: none; // 只有全室裝修顯示
+    justify-content: center;
+    position: absolute;
+    z-index: 1000;
+    top: 15px;
+    left: 0;
+    right: 0;
+
+    @media (max-width: 575px) {
+      top: 10px;
+    }
+
+    li {
+      margin: 0 20px;
+
+      a {
+        color: #959595;
+        // color: #fff;
+      }
+    }
+
+    #underline {
+      position: absolute;
+      bottom: -1px;
+      left: 40px;
+      width: 40px;
+      height: 1px;
+      z-index: 1000;
+      background-color: #fff;
+      transition: width 0.3s;
+    }
+  }
+
+  .card-item {
+    position: relative;
+    width: 100%;
+    height: 550px;
+    background-image: url('../img/result-bg.png');
+    background-size: auto;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: 20px;
+
+    @media (max-width: 991px) {
+      height: 690px;
+    }
+
+    @media (max-width: 575px) {
+      height: 800px;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 20px;
+      background-color: rgba(5, 13, 21, 0.8); // 遮罩
+      backdrop-filter: blur(2px); // 模糊效果
+    }
+
+    .main-info {
+      height: 80%;
+      justify-content: center;
+
+      @media (max-width: 991px) {
+        align-items: center;
+        flex-direction: column;
+      }
+
+      &.type {
+        .chart-box {
+          @media (max-width: 991px) {
+            top: -28%;
+          }
+        }
+      }
+
+      &.type {
+        .chart-text {
+          @media (max-width: 991px) {
+            top: 18.5%;
+          }
+        }
+      }
+    }
+
+    .chart-box {
+      position: absolute;
+      z-index: 100;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      @media (max-width: 991px) {
+        top: -30%;
+      }
+
+      #chart {
+        width: 300px !important;
+
+        @media (max-width: 991px) {
+          width: 200px !important;
+        }
+      }
+    }
+  }
+
+  .chart-text {
+    position: absolute;
+    z-index: 100;
+    font-size: 42px;
+    font-weight: 500;
+    color: #fff;
+    text-align: center;
+
+    @media (max-width: 991px) {
+      top: 17%;
+      font-size: 30px;
+    }
+
+    &.range {
+      display: none;
+
+      @media (max-width: 991px) {
+        top: 10%;
+      }
+
+      @media (max-width: 575px) {
+        top: 11.5%;
+      }
+
+      .tilde {
+        position: absolute;
+        left: 50px;
+        transform: rotate(90deg);
+
+        @media (max-width: 767px) {
+          left: 35px;
+        }
+      }
+    }
+  }
+
+  .price-card {
+    position: absolute;
+    z-index: 100;
+    color: #fff;
+
+    @media (max-width: 991px) {
+      top: 39%;
+      left: 0;
+      right: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    @media (max-width: 575px) {
+      padding: 0 15px;
+    }
+
+    ul {
+      width: 250px;
+      max-width: 100%;
+      margin-bottom: 0;
+      padding: 15px 0 25px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-size: 20px;
+      border-radius: 10px;
+      border: 1px solid #fff;
+
+      @media (max-width: 991px) {
+        // max-width: 480px;
+        width: 100%;
+        padding: 10px 0;
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        justify-content: space-evenly;
+      }
+
+      @media (max-width: 575px) {
+        max-width: 450px;
+        width: 95%;
+        margin: auto;
+        font-size: 14px;
+      }
+
+      li {
+        span {
+          width: 90px;
+          display: inline-block;
+          text-align: center;
+          border-bottom: 1px solid #fff;
+          font-size: 28px;
+          font-weight: 500;
+
+          @media (max-width: 575px) {
+            width: 70px;
+            font-size: 20px;
+          }
+        }
+      }
+    }
+
+    small {
+      margin-top: 20px;
+      display: block;
+      color: #B7B7B7;
+      text-align: center;
+
+      @media (max-width: 991px) {
+        margin-top: 10px;
+      }
+
+      @media (max-width: 767px) {
+        width: 90%;
+        text-align: end;
+      }
+    }
+
+    .main {
+      @media (max-width: 991px) {
+        max-width: 480px;
+      }
+
+      @media (max-width: 575px) {
+        max-width: 430px;
+      }
+    }
+
+    .partial {
+      width: 280px;
+      display: none;
+
+      @media (max-width: 991px) {
+        /* Grid */
+        width: 600px;
+        max-width: 100%;
+        grid-template-columns: repeat(auto-fit, minmax(220px, max-content));
+        padding: initial;
+      }
+
+      @media (max-width: 767px) {
+        width: 500px;
+        grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
+        font-size: 16px;
+      }
+
+      @media (max-width: 575px) {
+        width: 350px;
+        grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
+        font-size: 14px;
+      }
+
+      li {
+        display: flex;
+        align-items: end;
+        justify-content: center;
+
+        @media (max-width: 991px) {
+          padding: 0px 10px 10px;
+        }
+
+        span {
+          margin: 0 5px;
+          width: 120px;
+
+          @media (max-width: 767px) {
+            width: 100px;
+            font-size: 24px;
+          }
+        }
+
+        p {
+          width: 80px;
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .info-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+
+    h3 {
+      font-size: 24px;
+      line-height: 32px;
+      text-align: center;
+
+      @media (max-width: 1200px) {
+        font-size: 20px;
+      }
+    }
+
+    h4 {
+      font-size: 16px;
+      font-weight: 300;
+      color: #34404B;
+
+      @media (max-width: 1200px) {
+        font-size: 15px;
+      }
+    }
+
+    &,
+    img {
+      @media (max-width: 991px) {
+        margin-top: 25px;
+      }
+    }
+
+    img {
+      width: 100%;
+      height: 450px;
+      max-width: 330px;
+      object-fit: cover;
+      border-radius: 0 0 50% 0;
+    }
+
+    .img-block {
+      position: relative;
+
+      a {
+        display: block;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        z-index: 1000;
+
+        img {
+          width: 150px;
+          height: 150px;
+        }
+
+        .btn {
+          position: relative;
+          z-index: 100;
+          transition: all .3s;
+
+          &:hover {
+            opacity: .9;
+          }
+        }
+
+        .text {
+          width: 140px;
+          height: 140px;
+          position: absolute;
+          left: 5px;
+          top: 2px;
+          animation: rotate 15s linear infinite;
+        }
+
+        .bg {
+          position: absolute;
+          left: 0px;
+          top: -3px;
+          z-index: -1;
+        }
+
+        @keyframes rotate {
+          from {
+            transform: rotate(0deg);
+          }
+
+          to {
+            transform: rotate(360deg);
+          }
+        }
+
+      }
+    }
+  }
+
+  .info-card {
+    width: 93%;
+    margin: 30px;
+    position: absolute;
+    bottom: 0;
+    background: #fff;
+    border-radius: 10px;
+
+    @media (max-width: 767px) {
+      margin: 20px;
+    }
+
+    @media (max-width: 575px) {
+      padding: 0 20px;
+    }
+
+    .row {
+      padding: 20px 0;
+
+      @media (max-width: 991px) {
+        padding: 0 0 15px;
+        justify-content: center;
+      }
+
+      div:first-child {
+        @media (max-width: 991px) {
+          width: 400px;
+        }
+      }
+
+      ul {
+        margin: 0;
+        padding: 0;
+
+        @media (max-width: 991px) {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+        }
+
+        li {
+          font-weight: 500;
+        }
+      }
+
+      .caption {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+
+        @media (max-width: 1200px) {
+          flex-direction: column;
+        }
+
+        @media (max-width: 991px) {
+          width: 400px;
+          flex-direction: row;
+          justify-content: space-between;
+        }
+
+        h3 {
+          font-size: 18px;
+          color: #34404B;
+          margin-bottom: 0;
+        }
+
+        small {
+          font-size: 14px;
+          color: #EE751B;
+        }
+
+        p {
+          max-width: 220px;
+          font-size: 14px;
+          color: #959595;
+          // 超過三行省略
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+
+        section {
+          @media (max-width: 575px) {
+            width: 100%;
+          }
+        }
+
+      }
+
+      .border-end {
+        @media (max-width: 991px) {
+          padding: 10px;
+          border-right: none !important;
+          border-bottom: 2px solid #dddddd;
+        }
+      }
+
+      .reset-btn {
+        width: 100%;
+        height: 100%;
+        border: none;
+        border-radius: 10px;
+        background-color: #B7B7B7;
+        color: #fff;
+        transition: all .3s;
+
+        @media (max-width: 991px) {
+          width: 180px;
+          height: 50px;
+          margin: 15px auto 0;
+        }
+
+        &:hover {
+          background-color: #959595;
+        }
+      }
+    }
+  }
+
+  .style-list {
+    @media (max-width: 767px) {
+      border-top: 1px solid #959595;
+    }
+
+    p {
+      padding: 20px;
+      margin-bottom: 0;
+      font-size: 20px;
+      font-weight: 500;
+      color: #34404B;
+      text-align: center;
+    }
+
+    a {
+      display: block;
+      position: relative;
+      overflow: hidden;
+      border-radius: 10px;
+
+      &:hover {
+        img {
+          transform: scale(1.1);
+        }
+      }
+
+      p {
+        padding: 5px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        font-size: 18px;
+        background: rgba(255, 255, 255, 0.75);
+      }
+
+      img {
+        width: 100%;
+        height: 180px;
+        object-fit: cover;
+        border-radius: 10px;
+        transition: all .5s;
+        box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);
+
+        @media (max-width: 575px) {
+          height: 120px;
+        }
+      }
+    }
+  }
+}
+
+/* request End */

css/style.css

@@ -0,0 +1,3445 @@
+@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;
+  width: 1300px;
+  max-width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+@media (max-width: 991px) {
+  .sec-00-bulletList {
+    bottom: 0;
+  }
+}
+.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: 70px auto 50px;
+    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 {
+    top: 5%;
+    right: 0;
+    left: -65%;
+  }
+}
+.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;
+    margin-left: -4vw;
+  }
+}
+.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;
+  margin-left: 0;
+  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;
+  }
+}
+
+.banner-content .progress {
+  width: 100% !important;
+}
+
+.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;
+  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:hover {
+  text-shadow: 1px 2px 4px rgb(188, 84, 6);
+}
+.top-card a span {
+  background-color: var(--sub-color);
+}
+.top-card .bag-btn {
+  color: var(--sub-color) !important;
+}
+.top-card .bag-btn:hover {
+  color: #fff !important;
+}
+.top-card .bag-btn:hover section img {
+  transition: all 0.5s;
+}
+.top-card .bag-btn:hover section img:last-child {
+  opacity: 1;
+}
+.top-card .bag-btn section {
+  width: 20px;
+  position: relative;
+}
+.top-card .bag-btn section img {
+  width: 15px;
+  top: -10px;
+  left: -2px;
+  position: absolute;
+}
+.top-card .bag-btn section img:first-child {
+  filter: invert(46%) sepia(79%) saturate(779%) hue-rotate(350deg) brightness(98%) contrast(91%);
+}
+.top-card .bag-btn section img:last-child {
+  opacity: 0;
+  filter: invert(100%) sepia(2%) saturate(0%) hue-rotate(21deg) brightness(107%) contrast(101%);
+}
+
+.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 {
+  width: 12vw;
+  font-size: 16px;
+  margin: 10px 0 0 10px;
+  color: #707070;
+  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;
+}
+@media (max-width: 1200px) {
+  .popular-slider .designer-item h2 {
+    width: 9vw;
+  }
+}
+@media (max-width: 991px) {
+  .popular-slider .designer-item h2 {
+    width: 22vw;
+  }
+}
+
+.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;
+  align-items: center;
+  padding: 0 20px;
+}
+@media (max-width: 991px) {
+  .search-modal .keyword-list {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+.search-modal .keyword-list span {
+  color: #fff;
+  margin-right: 10px;
+}
+.search-modal .keyword-list ul {
+  margin: 0;
+  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;
+}
+
+.mb-menu {
+  display: flex;
+  padding: 13px 0 8px;
+  position: fixed;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 1000;
+  transition: all 0.3s;
+  background-color: #fff;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
+}
+.mb-menu a {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.mb-menu a h4 {
+  margin: 5px auto 0;
+  color: #34404b;
+  font-size: 16px;
+}
+.mb-menu a img {
+  width: 20px;
+  height: 20px;
+}
+
+/* index End *//*# sourceMappingURL=style.css.map */

css/style.css.txt

@@ -0,0 +1,584 @@
+/* request Start */
+.request-content {
+  background-color: #FAFAFA;
+}
+.request-content .main {
+  position: relative;
+}
+.request-content .main h2,
+.request-content .main h3 {
+  font-weight: normal;
+}
+.request-content .main .info-block {
+  height: 100%;
+  padding: 100px 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  color: #fff;
+}
+.request-content .main .info-block h2 {
+  font-size: 78px;
+}
+.request-content .main .info-block h3 {
+  font-size: 20px;
+  margin-top: 30px;
+}
+.request-content .main .info-block .ad-list {
+  width: 100%;
+  padding: 0 100px;
+}
+.request-content .main .info-block .ad-list p {
+  padding-bottom: 10px;
+  margin-bottom: 15px !important;
+  text-align: center;
+  border-bottom: 1px solid #fff;
+}
+.request-content .main .info-block .ad-list img {
+  width: 100%;
+  padding: 0 8px;
+}
+.request-content .main .img-block {
+  position: relative;
+  display: inline-block;
+  /* 設置灰色遮罩 */
+}
+.request-content .main .img-block::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 99.9%;
+  height: 100%;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 0.7);
+}
+.request-content .main .img-block .img-slider {
+  width: 33.3%;
+  height: 100vh;
+  overflow: hidden;
+}
+.request-content .main .img-block .img-slider .img-slider-list {
+  position: relative;
+}
+.request-content .main .img-block .img-slider .img-slider-list img {
+  width: 100%;
+  height: 310px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.request-content .main .logo {
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+.request-content .main .logo img {
+  width: 100%;
+  max-width: 300px;
+}
+.request-content .form-block .card {
+  border: none;
+}
+.request-content .form-block .card .logo,
+.request-content .form-block .card .card-body {
+  background-color: #FAFAFA;
+}
+.request-content .form-block form {
+  color: #34404B;
+}
+.request-content .form-block form ::-moz-placeholder {
+  color: #d3d3d3;
+  opacity: 1;
+  /* Firefox */
+}
+.request-content .form-block form ::placeholder {
+  color: #d3d3d3;
+  opacity: 1;
+  /* Firefox */
+}
+.request-content .form-block form .invalid-feedback {
+  display: none;
+  height: 0px;
+  text-align: end;
+}
+.request-content .form-block form .submit {
+  padding: 10px;
+  background-color: #EE751B;
+  border: none;
+}
+.request-content .form-block form .type-items {
+  height: 70px;
+  padding: 5px 10px;
+  align-items: center;
+  border: 1px solid #aaaaaa;
+  border-radius: 5px;
+  transition: all 0.3s;
+}
+.request-content .form-block form .type-items:hover {
+  border-color: #ee751b;
+}
+.request-content .form-block form .type-items span {
+  width: 100px;
+}
+.request-content .form-block form .type-items span h4 {
+  margin-bottom: 0;
+  font-size: 18px;
+}
+.request-content .form-block form .type-items span p {
+  font-size: 12px;
+  color: #ee751b;
+}
+.request-content .form-block form .type-items small {
+  display: inline-block;
+  margin-left: 15px;
+  font-size: 12px;
+  color: #959595;
+}
+.request-content .form-block form .type-items label,
+.request-content .form-block form .type-items input {
+  cursor: pointer;
+}
+.request-content .form-block form .type-items input {
+  margin: 0 5px;
+  border: 2px solid white;
+  box-shadow: 0 0 0 1px #EE751B;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border-radius: 50%;
+  width: 12px;
+  height: 12px;
+  background-color: #fff;
+  transition: all ease-in 0.2s;
+}
+.request-content .form-block form .type-items input:checked {
+  background-color: #EE751B;
+}
+.request-content .form-block form .disclaimer {
+  margin-top: 5px;
+  font-size: 12px;
+  text-align: center;
+}
+.request-content .form-block form .disclaimer a {
+  color: #EE751B;
+  text-decoration: underline;
+}
+.request-content .form-block form input[type=checkbox] {
+  position: relative;
+  border-color: #000;
+  cursor: pointer;
+}
+.request-content .form-block form input[type=checkbox]:focus {
+  box-shadow: unset;
+}
+.request-content .form-block form input[type=checkbox]:checked {
+  background-color: white;
+}
+.request-content .form-block form input[type=checkbox]:checked::before {
+  content: "✓";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 14px;
+  color: black;
+}
+.request-content .loading-block {
+  width: 100vw;
+  height: 100vh;
+  display: none;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  background: #fff;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 100;
+}
+.request-content .loading-block p {
+  font-size: 16px;
+  color: #EE751B;
+  letter-spacing: 4.8px;
+}
+.request-content .loading-block .spinner {
+  /* Size and position */
+  font-size: 100px;
+  /* 1em */
+  width: 1em;
+  height: 1em;
+  margin-bottom: 20px;
+  position: relative;
+  /* Styles */
+  list-style: none;
+  border-radius: 50%;
+  border: 0.01em solid rgba(150, 150, 150, 0.2);
+  /* Subtle white line circling the dots */
+}
+.request-content .loading-block .spinner li {
+  width: 0.2em;
+  height: 0.2em;
+  position: absolute;
+  border-radius: 50%;
+}
+.request-content .loading-block .spinner li:nth-child(1) {
+  background: #EE751B;
+  /* Blue */
+  top: 0;
+  left: 50%;
+  margin-left: -0.1em;
+  transform-origin: 50% 250%;
+  animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
+}
+.request-content .loading-block .spinner li:nth-child(2) {
+  background: #FF505E;
+  /* Red */
+  top: 50%;
+  right: 0;
+  margin-top: -0.1em;
+  transform-origin: -150% 50%;
+  animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
+}
+.request-content .loading-block .spinner li:nth-child(3) {
+  background: #FFCD26;
+  /* Yellow */
+  bottom: 0;
+  left: 50%;
+  margin-left: -0.1em;
+  transform-origin: 50% -150%;
+  animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
+}
+.request-content .loading-block .spinner li:nth-child(4) {
+  background: #AAD647;
+  /* Green */
+  top: 50%;
+  left: 0;
+  margin-top: -0.1em;
+  transform-origin: 250% 50%;
+  animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
+}
+@keyframes rota {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes opa {
+  12.0% {
+    opacity: 0.8;
+  }
+  19.5% {
+    opacity: 0.88;
+  }
+  37.2% {
+    opacity: 0.64;
+  }
+  40.5% {
+    opacity: 0.52;
+  }
+  52.7% {
+    opacity: 0.69;
+  }
+  60.2% {
+    opacity: 0.6;
+  }
+  66.6% {
+    opacity: 0.52;
+  }
+  70.0% {
+    opacity: 0.63;
+  }
+  79.9% {
+    opacity: 0.6;
+  }
+  84.2% {
+    opacity: 0.75;
+  }
+  91.0% {
+    opacity: 0.87;
+  }
+}
+
+.request-content .logo,
+.result-content .logo {
+  display: flex;
+  justify-content: center;
+}
+.request-content .logo img,
+.result-content .logo img {
+  width: 100%;
+  max-width: 150px;
+}
+
+.result-content {
+  display: none;
+  padding: 20px 0 50px;
+}
+.result-content .logo {
+  margin-bottom: 25px;
+}
+.result-content .line {
+  padding: 25px 0;
+  border-top: 1px solid #959595;
+  border-bottom: 1px solid #959595;
+}
+.result-content .tab-list {
+  margin: 0;
+  padding: 0;
+  display: none;
+  justify-content: center;
+  position: absolute;
+  z-index: 1000;
+  top: 15px;
+  left: 0;
+  right: 0;
+}
+.result-content .tab-list li {
+  margin: 0 20px;
+}
+.result-content .tab-list li a {
+  color: #959595;
+}
+.result-content .tab-list #underline {
+  position: absolute;
+  bottom: -1px;
+  left: 40px;
+  width: 40px;
+  height: 1px;
+  z-index: 1000;
+  background-color: #fff;
+  transition: width 0.3s;
+}
+.result-content .card-item {
+  position: relative;
+  width: 100%;
+  height: 550px;
+  background-image: url(../images/request/result-bg.png);
+  background-size: auto;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 20px;
+}
+.result-content .card-item::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 20px;
+  background-color: rgba(5, 13, 21, 0.8);
+  -webkit-backdrop-filter: blur(2px);
+          backdrop-filter: blur(2px);
+}
+.result-content .card-item .chart-box {
+  position: absolute;
+  z-index: 100;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.result-content .card-item .chart-box #chart {
+  width: 300px !important;
+}
+.result-content .chart-text {
+  position: absolute;
+  z-index: 100;
+  font-size: 42px;
+  font-weight: 500;
+  color: #fff;
+}
+.result-content .chart-text.range {
+  display: none;
+}
+.result-content .chart-text.range .tilde {
+  position: absolute;
+  left: 50px;
+  transform: rotate(90deg);
+}
+.result-content .price-card {
+  position: absolute;
+  z-index: 100;
+  color: #fff;
+}
+.result-content .price-card ul {
+  width: 250px;
+  max-width: 100%;
+  margin-bottom: 0;
+  padding: 15px 0 25px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 20px;
+  border-radius: 10px;
+  border: 1px solid #fff;
+}
+.result-content .price-card ul li span {
+  width: 90px;
+  display: inline-block;
+  text-align: center;
+  border-bottom: 1px solid #fff;
+  font-size: 28px;
+  font-weight: 500;
+}
+.result-content .price-card small {
+  margin-top: 20px;
+  display: block;
+  color: #B7B7B7;
+  text-align: center;
+}
+.result-content .price-card .partial {
+  width: 280px;
+  display: none;
+}
+.result-content .price-card .partial li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.result-content .price-card .partial li span {
+  width: 120px;
+}
+.result-content .price-card .partial li p {
+  width: 80px;
+  text-align: center;
+}
+.result-content .info-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.result-content .info-item h3 {
+  font-size: 24px;
+  line-height: 32px;
+  text-align: center;
+}
+@media (max-width: 1200px) {
+  .result-content .info-item h3 {
+    font-size: 20px;
+  }
+}
+.result-content .info-item h4 {
+  font-size: 16px;
+  font-weight: 300;
+  color: #34404B;
+}
+@media (max-width: 1200px) {
+  .result-content .info-item h4 {
+    font-size: 15px;
+  }
+}
+.result-content .info-item img {
+  width: 100%;
+  height: 450px;
+  max-width: 330px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 0 0 50% 0;
+}
+.result-content .info-card {
+  width: 93%;
+  margin: 30px;
+  position: absolute;
+  bottom: 0;
+  background: #fff;
+  border-radius: 10px;
+}
+.result-content .info-card .row {
+  padding: 20px 0;
+}
+.result-content .info-card .row ul {
+  margin: 0;
+  padding: 0;
+}
+.result-content .info-card .row ul li {
+  font-weight: 500;
+}
+.result-content .info-card .row .caption {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+@media (max-width: 1200px) {
+  .result-content .info-card .row .caption {
+    flex-direction: column;
+  }
+}
+.result-content .info-card .row .caption h3 {
+  font-size: 18px;
+  color: #34404B;
+  margin-bottom: 0;
+}
+.result-content .info-card .row .caption small {
+  font-size: 14px;
+  color: #EE751B;
+}
+.result-content .info-card .row .caption p {
+  max-width: 220px;
+  font-size: 14px;
+  color: #959595;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+@media (max-width: 1200px) {
+  .result-content .info-card .row .caption p {
+    -webkit-line-clamp: 1;
+  }
+}
+.result-content .info-card .row .reset-btn {
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 10px;
+  background-color: #B7B7B7;
+  color: #fff;
+  transition: all 0.3s;
+}
+.result-content .info-card .row .reset-btn:hover {
+  background-color: #959595;
+}
+.result-content .style-list p {
+  text-align: center;
+  padding: 20px;
+  font-size: 20px;
+  font-weight: 500;
+  color: #34404B;
+}
+.result-content .style-list a {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  border-radius: 10px;
+}
+.result-content .style-list a:hover img {
+  transform: scale(1.1);
+}
+.result-content .style-list a p {
+  padding: 5px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  font-size: 18px;
+  background: rgba(255, 255, 255, 0.75);
+}
+.result-content .style-list a img {
+  width: 100%;
+  height: 180px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 10px;
+  transition: all 0.5s;
+  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+/* request End */

css/style.scss

@@ -0,0 +1,4197 @@
+$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: 0.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;
+    max-width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    z-index: 10;
+    background-color: rgba(0, 0, 0, 0.1);
+
+    @media (max-width: 991px) {
+      bottom: 0;
+    }
+  }
+
+  &-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: 70px auto 50px;
+      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 0.3s;
+
+      &:hover {
+        opacity: 0.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 0.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: 0.9rem;
+        transition: all 0.3s;
+
+        @media (max-width: 1200px) {
+          padding-right: 5px;
+          font-size: 14px;
+        }
+
+        @media (max-width: 991px) {
+          font-size: 15px;
+          height: 30px;
+        }
+
+        &:hover {
+          opacity: 0.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 0.3s;
+
+      &:hover {
+        opacity: 0.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 0.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) {
+      top: 5%;
+      right: 0;
+      left: -65%;
+    }
+
+    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;
+        margin-left: -4vw;
+      }
+    }
+  }
+
+  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;
+        margin-left: 0;
+        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, 0.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: 0.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: 0.6;
+      font-size: 32px;
+      transition: all 0.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;
+  }
+}
+
+.banner-content {
+  .progress {
+    width: 100% !important;
+  }
+}
+
+.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 0.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;
+        background-color: transparent !important;
+
+        span {
+          width: 225%;
+          height: 500%;
+        }
+      }
+    }
+  }
+}
+
+.top-card {
+  a {
+    &:hover {
+      text-shadow: 1px 2px 4px rgb(188 84 6);
+    }
+
+    span {
+      // background-color: #f5d2b7;
+      background-color: var(--sub-color);
+    }
+  }
+
+  .bag-btn {
+    color: var(--sub-color) !important;
+
+    &:hover {
+      color: #fff !important;
+
+      section {
+        img {
+          transition: all 0.5s;
+
+          &:last-child {
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    section {
+      width: 20px;
+      position: relative;
+
+      img {
+        width: 15px;
+        top: -10px;
+        left: -2px;
+        position: absolute;
+
+        &:first-child {
+          filter: invert(46%) sepia(79%) saturate(779%) hue-rotate(350deg) brightness(98%) contrast(91%);
+        }
+
+        &:last-child {
+          opacity: 0;
+          filter: invert(100%) sepia(2%) saturate(0%) hue-rotate(21deg) brightness(107%) contrast(101%);
+        }
+      }
+    }
+  }
+}
+
+.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, 0.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 0.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 0.5s;
+
+    &: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;
+    }
+
+    .slick-prev,
+    .slick-next {
+      &:before {
+        content: "" !important;
+      }
+
+      i {
+        opacity: 0.3;
+        transition: all 0.3s;
+
+        &: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;
+
+  &: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 0.35s cubic-bezier(0.4, 0.8, 0.74, 1) 0s, transform 0.35s cubic-bezier(0.26, 1, 0.48, 1) 0s,
+          -webkit-transform 0.35s cubic-bezier(0.26, 1, 0.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 {
+      width: 12vw;
+      font-size: 16px;
+      margin: 10px 0 0 10px;
+      color: #707070;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      line-break: after-white-space; // for safari
+      transition: all 0.2s;
+
+      @media (max-width: 1200px) {
+        width: 9vw;
+      }
+
+      @media (max-width: 991px) {
+        width: 22vw;
+      }
+    }
+  }
+}
+
+.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 0.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;
+    align-items: center;
+    padding: 0 20px;
+
+    @media (max-width: 991px) {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    span {
+      color: #fff;
+      margin-right: 10px;
+    }
+
+    ul {
+      margin: 0;
+      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 0.3s;
+    opacity: 1 !important;
+
+    &:hover {
+      opacity: 0.7 !important;
+    }
+  }
+}
+
+.mb-menu {
+  display: flex;
+  padding: 13px 0 8px;
+  position: fixed;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 1000;
+  transition: all 0.3s;
+  background-color: #fff;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
+
+  a {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    h4 {
+      margin: 5px auto 0;
+      color: #34404b;
+      font-size: 16px;
+    }
+
+    img {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+
+/* index End */

img/Ellipse 14.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128.23" height="128.23" viewBox="0 0 128.23 128.23">
+  <ellipse id="Ellipse_14" data-name="Ellipse 14" cx="54.115" cy="54.115" rx="54.115" ry="54.115" transform="translate(10 10)" fill="none" stroke="#fafafa" stroke-width="20"/>
+</svg>

img/Group 156.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120.012" height="120.012" viewBox="0 0 120.012 120.012">
+  <defs>
+    <filter id="Ellipse_9" x="0" y="0" width="120.012" height="120.012" filterUnits="userSpaceOnUse">
+      <feOffset dy="3" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feFlood flood-opacity="0.302"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g id="Group_156" data-name="Group 156" transform="translate(9 6)">
+    <g transform="matrix(1, 0, 0, 1, -9, -6)" filter="url(#Ellipse_9)">
+      <ellipse id="Ellipse_9-2" data-name="Ellipse 9" cx="41.237" cy="41.237" rx="41.237" ry="41.237" transform="translate(31.73 6) rotate(16)" fill="#ff8022"/>
+    </g>
+    <path id="Icon_feather-chevron-left" data-name="Icon feather-chevron-left" d="M16.941,33.883,0,16.941,16.941,0" transform="translate(38.365 34.327)" fill="none" stroke="#ffe0c9" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+  </g>
+</svg>

img/Group 157.svg

@@ -0,0 +1,53 @@
+<svg id="Group_157" data-name="Group 157" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120.545" height="120.638" viewBox="0 0 120.545 120.638">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_2046" data-name="Rectangle 2046" width="120.545" height="120.638" fill="#ee751b"/>
+    </clipPath>
+  </defs>
+  <g id="Group_79" data-name="Group 79" transform="translate(0)">
+    <g id="Group_78" data-name="Group 78" clip-path="url(#clip-path)">
+      <text id="_·" data-name="·" transform="matrix(0.997, 0.078, -0.078, 0.997, 60.327, 9.151)" fill="#ee751b" font-size="10" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">·</tspan></text>
+      <text id="前" transform="translate(68.069 10.444) rotate(16.567)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">前</tspan></text>
+      <text id="往" transform="translate(80.826 14.207) rotate(31.78)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">往</tspan></text>
+    </g>
+  </g>
+  <text id="了" transform="translate(92.161 21.195) rotate(46.878)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">了</tspan></text>
+  <g id="Group_81" data-name="Group 81" transform="translate(0)">
+    <g id="Group_80" data-name="Group 80" clip-path="url(#clip-path)">
+      <text id="解" transform="translate(101.292 30.896) rotate(62.009)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">解</tspan></text>
+      <text id="_" data-name=" " transform="translate(111.895 41.182) rotate(71.26)" fill="#ee751b" font-size="6" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0"> </tspan></text>
+      <text id="幸" transform="translate(108.505 45.382) rotate(80.57)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">幸</tspan></text>
+      <text id="福" transform="translate(110.714 58.511) rotate(95.596)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">福</tspan></text>
+      <text id="輕" transform="translate(109.452 71.754) rotate(110.816)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">輕</tspan></text>
+    </g>
+  </g>
+  <text id="裝" transform="translate(104.742 84.219) rotate(126.019)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">裝</tspan></text>
+  <text id="修" transform="matrix(-0.778, 0.628, -0.628, -0.778, 96.958, 94.986)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">修</tspan></text>
+  <g id="Group_83" data-name="Group 83" transform="translate(0)">
+    <g id="Group_82" data-name="Group 82" clip-path="url(#clip-path)">
+      <text id="方" transform="matrix(-0.915, 0.403, -0.403, -0.915, 86.613, 103.385)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">方</tspan></text>
+      <text id="案" transform="matrix(-0.989, 0.148, -0.148, -0.989, 74.44, 108.777)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">案</tspan></text>
+      <text id="_·-2" data-name="·" transform="translate(61.213 111.479) rotate(-176.6)" fill="#ee751b" font-size="10" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">·</tspan></text>
+      <text id="前-2" data-name="前" transform="translate(53.454 110.334) rotate(-164.546)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">前</tspan></text>
+      <text id="往-2" data-name="往" transform="matrix(-0.86, -0.51, 0.51, -0.86, 40.626, 106.82)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">往</tspan></text>
+    </g>
+  </g>
+  <text id="了-2" data-name="了" transform="translate(29.168 100.058) rotate(-134.232)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">了</tspan></text>
+  <g id="Group_85" data-name="Group 85" transform="translate(0)">
+    <g id="Group_84" data-name="Group 84" clip-path="url(#clip-path)">
+      <text id="解-2" data-name="解" transform="translate(19.857 90.541) rotate(-119.12)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">解</tspan></text>
+      <text id="_2" data-name=" " transform="translate(9.042 80.441) rotate(-109.845)" fill="#ee751b" font-size="6" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0"> </tspan></text>
+      <text id="幸-2" data-name="幸" transform="translate(12.351 76.178) rotate(-100.532)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">幸</tspan></text>
+      <text id="福-2" data-name="福" transform="translate(9.893 63.109) rotate(-85.513)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">福</tspan></text>
+      <text id="輕-2" data-name="輕" transform="matrix(0.337, -0.941, 0.941, 0.337, 10.9, 49.825)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">輕</tspan></text>
+    </g>
+  </g>
+  <text id="裝-2" data-name="裝" transform="matrix(0.572, -0.82, 0.82, 0.572, 15.358, 37.292)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">裝</tspan></text>
+  <text id="修-2" data-name="修" transform="matrix(0.766, -0.643, 0.643, 0.766, 22.959, 26.348)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">修</tspan></text>
+  <g id="Group_87" data-name="Group 87" transform="translate(0)">
+    <g id="Group_86" data-name="Group 86" clip-path="url(#clip-path)">
+      <text id="方-2" data-name="方" transform="translate(33.135 17.763) rotate(-24.854)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">方</tspan></text>
+      <text id="案-2" data-name="案" transform="translate(45.192 12.142) rotate(-9.61)" fill="#ee751b" font-size="11" font-family="TaipeiSansTCBeta-Bold, Taipei Sans TC Beta" font-weight="700"><tspan x="0" y="0">案</tspan></text>
+    </g>
+  </g>
+</svg>

index.html

@@ -0,0 +1,1268 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <!-- Google Tag Manager -->
+  <script>(function (w, d, s, l, i) {
+      w[l] = w[l] || []; w[l].push({
+        'gtm.start':
+          new Date().getTime(), event: 'gtm.js'
+      }); var f = d.getElementsByTagName(s)[0],
+        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+    })(window, document, 'script', 'dataLayer', 'GTM-W3RJHTZ');</script>
+  <!-- End Google Tag Manager -->
+
+  <!-- Google tag (gtag.js)  ga4-->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-97LXHMH1GQ"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+
+    gtag('config', 'G-97LXHMH1GQ');
+
+
+   
+
+  </script>
+  
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1" />
+  <meta http-equiv="Cache-Control" content="no-cache" />
+  <meta name="copyright" content="2021 © 幸福空間 │ All Rights Reserved." />
+  <meta name="creation-date" content="2021-08-05 12:00:04 GTM+8" />
+  <!-- <meta name="description" content="滿足您幸福空間裝修預算和裝潢預算需求的最佳方案！輸入您的裝修需求類型與坪數，立即獲得量身定制的預算方案，並享受專人幸福經紀人的洽詢服務。" /> -->
+  <meta name="description"
+    content="不知道裝潢費用怎麼抓？滿足您幸福空間裝潢預算需求的最佳方案！內建裝潢價格計算機，輸入您的裝修預算需求與坪數，立即獲得量身定制的裝潢估價 ，並享受幸福經紀人的諮詢服務。" />
+  <meta name="distribution" content="Taiwan" />
+  <meta name="keywords" content="" />
+  <meta name="revisit-after" content="1 days" />
+  <meta name="robots" content="all" />
+  <meta name="format-detection" content="telephone=no" />
+
+  <!-- <meta property="og:description" content="滿足您幸福空間裝修預算和裝潢預算需求的最佳方案！輸入您的裝修需求類型與坪數，立即獲得量身定制的預算方案，並享受專人幸福經紀人的洽詢服務。" /> -->
+  <meta property="og:description"
+    content="不知道裝潢費用怎麼抓？滿足您幸福空間裝潢預算需求的最佳方案！內建裝潢價格計算機，輸入您的裝修預算需求與坪數，立即獲得量身定制的裝潢估價 ，並享受幸福經紀人的諮詢服務。" />
+  <meta property="og:site_name" content="幸福空間" />
+  <!-- <meta property="og:title" content="幸福空間 - 裝修預算需求單" /> -->
+  <meta property="og:title" content="裝潢預算怎麼抓？2024裝修費用評估試算-幸福空間" />
+  <meta property="og:type" content="website" />
+  <meta property="og:locale" content="zh_TW" />
+
+  <!-- <title>幸福空間 - 裝修預算需求單</title> -->
+  <title>裝潢預算怎麼抓？2024裝修費用評估試算-幸福空間</title>
+
+  <link rel="icon" href="/hhh_index/images/favicon.ico" />
+  <link rel="stylesheet" href="hhh_index/css/reset.css" />
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
+    integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous" />
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
+  <!-- <link rel="stylesheet" href="css/jquery-ui.css"> -->
+  <link rel="stylesheet" type="text/css" href="hhh_index/css/slick.css" />
+  <link rel="stylesheet" type="text/css" href="hhh_index/css/slick-theme.css" />
+  <!-- <link rel="stylesheet" href="hhh_index/css/list-style.css" /> -->
+  <link rel="stylesheet" href="./css/style.css?a=ggog2" />
+  <link rel="stylesheet" href="./css/request.css?v=goggg2" />
+  <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
+
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500&display=swap" rel="stylesheet" />
+
+  <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "LocalBusiness",
+        "@id": "https://hhh.com.tw/",
+        "image": ["https://hhh.com.tw/_nuxt/img/def1b0a.svg"],
+        "name": "幸福空間股份有限公司",
+        "address": "110台北市信義區菸廠路88號五樓之6",
+        "url": "https://hhh.com.tw/",
+        "telephone": "+886-2-6617-0123"
+      }
+    </script>
+
+  <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "Organization",
+        "url": "https://hhh.com.tw/",
+        "logo": "https://hhh.com.tw/_nuxt/img/def1b0a.svg",
+        "name": "幸福空間",
+        "sameAs": [
+          "https://www.facebook.com/hhhfb/",
+          "https://page.line.me/ovs4341s",
+          "https://www.youtube.com/user/gorgeousspace",
+          "https://www.instagram.com/gorgeous_space/"
+        ],
+        "contactPoint": [
+          {
+            "@type": "ContactPoint",
+            "areaServed": "TW",
+            "telephone": "+886-2-6617-0123",
+            "contactType": "customer service",
+            "availableLanguage": "Chinese"
+          }
+        ]
+      }
+    </script>
+
+  <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        "name": "幸福空間－室內設計、裝修裝潢、居家生活、影音平台",
+        "author": "幸福空間",
+        "url": "https://hhh.com.tw/",
+        "potentialAction": {
+          "@type": "SearchAction",
+          "target": "https://hhh.com.tw/search/lists/case/{search_term_string}-keyword/",
+          "query-input": "required name=search_term_string"
+        }
+      }
+    </script>
+  <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "FAQPage",
+      "mainEntity": [{
+        "@type": "Question",
+        "name": "Q1:如何挑選優質室內設計公司?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": " 1. 室內設計公司是否為政府合法立案：可以到經濟部商業司或是內政部營建署「全國建築管理資訊系統入口網」的【室內裝修業登記查詢】網站上做查詢。
+                    2. 室內設計公司與室內設計師是否持有室內裝修證照：如室內裝修工程管理乙級執照，未有證照就進行施工是違法的行為，請務必要當心。
+                    3. 室內設計公司的專業能力與態度：洽談過程中，可透過提供圖面初步了解設計師技術與空間配置功力，並了解過往經驗與作品風格是否是自己喜歡的。"
+        }
+      }, {
+        "@type": "Question",
+        "name": "Q2:裝潢需要申請室內裝修許可嗎?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "依據「內政部營建署」所列的建築物室內裝修管理辦法第三條，室內裝修的行為包含以下幾點，但不包括壁紙、壁布、窗簾、家具、活動隔屏、地氈等之黏貼及擺設。
+                    1. 固著於建築物構造體之天花板裝修。
+                    2. 內部牆面裝修。
+                    3. 高度超過地板面1.2公尺以上，固定之隔屏裝修或兼作櫥櫃使用之隔屏裝修。
+                    4. 分間牆之變更。
+                    換句話說，只要動到天花板、牆壁、固定式隔間的室內裝修行為幾乎都要申請。一般都是委託室內設計公司或建築師事務所，向當地主管機關申請室內裝修審查。"}
+        }, {
+        "@type": "Question",
+        "name": "Q3:裝潢費用有哪些?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "一般來說，一個完整的裝修費用包含「設計費」、「工程費」及「監工費」，其中設計費取決於室內設計師個人的經歷、名氣、公司規模或是難易度，而有不同的計價方式；工程費則會因為選用的建材或是施工方法不同產生很大的價差，至於監工費部分通常為總工程款的5%～10%。"}
+        }, {
+        "@type": "Question",
+        "name": "Q4:裝潢預算配置怎麼抓?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "在評估預算時，主要可分為四大項目，包括室內設計與裝潢工程、家電設備、家具以及軟裝佈置。室內設計與裝潢工程的費用通常佔據最大比例，約占總預算的60%至65%左右。至於家電設備和家具，建議各佔預算的15%。剩餘的5%至10%則可用於軟裝家飾的採購。"}
+        }, {
+        "@type": "Question",
+        "name": "Q5:裝潢費用一坪多少?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "新成屋的裝潢報價大約在3萬至5萬元/坪之間，而中古屋的報價為6萬至8萬元/坪，老屋翻新的報價則在7萬至10萬元/坪，少數老舊房屋的報價甚至可能達到12萬元/坪。對於對裝潢品質有更高要求者，可能需要更多的預算。一般都會建議中古屋、老屋翻新要預留5~10%的預算做彈性調整。"}
+        }, {
+        "@type": "Question",
+        "name": "Q6:老屋翻新預算怎麼抓?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "基本上，老屋翻新的施工項目大致分為基礎工程、裝潢工程及裝飾工程三大項目，在分配預算時，建議使用總預算的40%施作基礎工程，30%執行裝潢工程，30%進行裝飾工程。建議在評估預算時要規劃10%~15%的追加款，以備不時之需。"}
+        }, {
+        "@type": "Question",
+        "name": "Q7:老屋翻新補助有哪些?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "政府為補助房屋修繕費用主要有三種方案：內政部「修繕住宅貸款利息補貼」及「簡易修繕住宅費用補貼」、地方政府「老屋修繕補助」。"}
+        }, {
+        "@type": "Question",
+        "name": "Q8:老屋翻新補助的申辦條件是什麼?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "內政部提供的房屋修繕住宅補助針對10年以上老屋，約在每年7～8月間開放民眾申請。根據修繕住宅貸款利息補貼或簡易修繕住宅費用補貼評點基準採「評點制度」審核，若超過名額則公開抽籤。「修繕住宅貸款利息補貼」及「簡易修繕住宅費用補貼」的申請流程、文件、項目皆相同。"}
+        }, {
+        "@type": "Question",
+        "name": "Q9:老屋翻新的補助結果哪裡查詢？",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "政府會在審查後1個月內將結果或補件通知，寄送至戶籍地址、通訊地址或修繕住宅地址，申請者需注意此3個地址的收件情形，以免錯過政府通知結果。"}
+        }, {
+        "@type": "Question",
+        "name": "Q10:預售屋客變流程有哪些?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "建議於購入預售屋後，立刻向建設公司索取建築圖(格局)、水電圖(弱電、燈光迴路、給排水、消防)等完整電子檔，並先找設計師開始進行規劃，才不會來不及因應後續的客變時間。若決定找設計師協助，客變流程大概會細分為以下幾個流程：
+            1. 向建設公司索取建築圖與水電圖電子檔
+            2. 找設計師規劃客變內容
+            3. 於建商通知可客變時，會同設計師、建設公司共同討論客變項目
+            4. 建設公司修改圖面
+            5. 討論並確認圖面
+            6. 簽名確認圖面及加減帳明細
+            7. 施工
+            8. 完工驗收（攜帶最後完整建築圖與水電圖面，與設計師、建商共同驗收）
+            9. 修改驗屋缺失
+            10. 確認驗屋缺失已修正
+            11. 三方簽名確認
+            12. 交屋
+            "}
+        }, {
+        "@type": "Question",
+        "name": "Q11:裝潢一定要請設計師嗎?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "如果你對設計和裝潢沒有太多經驗，建議找一位擁有豐富經驗和美感的室內設計師可以節省你的時間和精力，讓整個裝潢過程更加順利。
+            1.  省時省力： 室內設計師可以幫助您整合各方面需求，制定合理的設計方案，並統籌管理施工進度，讓您省心省力。
+            2.  專業施工品質： 室內設計師擁有豐富的專業知識和經驗，可以確保施工品質符合您的要求。 
+            3.  合理的裝修預算規劃： 室內設計師可以根據您的需求和預算，制定合理的設計方案和施工方案，幫助您有效控制成本。
+            小編建議與設計師溝通時，可提供具體的風格照片、案例，溝通起來更有效率喔！"}
+        }, {
+        "@type": "Question",
+        "name": "Q12:裝潢可以自己找統包商嗎?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "裝潢是一項專業性強、耗時費力的工程。如果您選擇自行承包，可能會面臨以下挑戰：
+            1.  缺乏專業知識和經驗： 室內設計涉及多個專業領域，包括櫃體結構、動線規劃、施工流程、材料選購等。如果您沒有相關知識和經驗，可能會導致施工過程中出現各種問題，從而延長工期、降低施工品質。
+            2.  難以掌控施工進度： 在自行承包的情況下，您需要親自跟進施工進度，這對於首次購屋者或繁忙的上班族來說可能是一項不小的負擔。
+            3.  無法有效控制裝修預算： 由於缺乏專業知識和經驗，您可能難以準確估算施工成本，從而導致預算超支。
+            "}
+        }, {
+        "@type": "Question",
+        "name": "Q13:廚房設計的裝修預算怎麼抓？",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "廚房設計的裝修費用受到多種因素的影響，包括廚房大小、格局改動程度、水電管線是否需要重新配置、廚具品牌、材質等。一般來說，每坪廚房設計價格在3,000至12,000元之間。
+對於常見的2至4坪廚房空間，如果格局改動不大且水電管線不需要重新配置，包含基本廚具的報價通常在10萬至15萬元之間。如果需要進行較大幅度的格局改動或重新配置水電管線，報價則會相應提高，大約在30萬至50萬元之間。"}
+        }
+      ]
+    }
+    </script>
+</head>
+
+<body style="overflow-x: hidden" id="top" class="wholeBody">
+  <!-- 表單頁面 -->
+  <div class="container-fluid request-content px-0">
+    <div class="d-block d-md-none py-3">
+      <a href="https://hhh.com.tw/" class="logo">
+        <img alt="logo" src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" />
+      </a>
+    </div>
+    <div class="d-flex flex-column flex-md-row w-100">
+      <div class="main px-0">
+        <div class="info-block">
+          <section class="headline">
+            <h2>
+              您有裝修設計需求？ <br> 想了解裝修預算方案？
+            </h2>
+            <h3>
+              填寫您的裝修需求，立即獲得裝修計算方案與幸福經紀人專人服務
+            </h3>
+          </section>
+          <!-- <section>
+            <h2>
+              幸福空間 15 週年慶 <br> 想裝修？叫幸福空間送！
+            </h2>
+            <h3>
+              填寫您的裝修需求，完成諮詢就有機會獲得免費裝修一套唷~商品價值超過37萬！ <br>
+              即日起～8/16
+            </h3>
+          </section> -->
+
+          <div class="ad-list d-none d-md-block">
+            <p>您是裝修新手？歡迎參考</p>
+            <!-- 單張廣告圖 -->
+            <!-- <div class="img-item">
+              <a href="https://hhh.style/hh07yaeye" target="_blank">
+                <img src="./img/main-ad.jpg" alt="">
+              </a>
+            </div> -->
+            <!-- 兩張廣告圖 -->
+            <div class="img-item">
+
+              <a href="https://hhh.com.tw/deco/" target="_blank" class="d-block w-100">
+                <img src="./img/p1.jpg" alt="">
+              </a>
+              <!--暫時隱藏 心動活動到2023/12/3~2023/12/30-->
+              <!-- <a href="https://promote.hhh.com.tw/hueiyeh-28403?utm_source=FB&utm_medium=GS&utm_campaign=hueiyeh#%E7%BF%BB%E7%89%8C%E9%81%8A%E6%88%B2"
+                target="_blank" class="d-block w-100">
+                <img src="./img/231229_輝葉第三波活動製作_664x180.jpg" alt="">
+              </a> -->
+
+
+              <!--         <a href="https://event.hhh.com.tw/agent/index.html" target="_blank" class="d-block w-100">
+                <img src="./img/p2.jpg" alt="">
+              </a> -->
+              <a href="https://homeinspection.leju.com.tw/?utm_source=Google&utm_medium=Keywords&utm_campaign=homeinspection&gad_source=1&gclid=CjwKCAjww_iwBhApEiwAuG6ccOw8p8Bj3fcBK_LLSEsXZzXZwdytgpDI_Tb4BQqUi-Go_NVWQS_1shoCKWgQAvD_BwE"
+                target="_blank" class="d-block w-100">
+                <img src="./img/樂居.jpg" alt="">
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <div class="d-flex img-block">
+          <div class="img-slider">
+            <div data-anime="infinite-01" data-anime-direction="up" data-anime-duration="100">
+              <div class="img-slider-list">
+                <img src="./img/banner-01.png" alt="">
+              </div>
+              <div class="img-slider-list">
+                <img src="./img/banner-02.png" alt="">
+              </div>
+              <div class="img-slider-list">
+                <img src="./img/banner-03.png" alt="">
+              </div>
+              <div class="img-slider-list">
+                <img src="./img/banner-05.png" alt="">
+              </div>
+              <div class="img-slider-list">
+                <img src="./img/banner-06.png" alt="">
+              </div>
+            </div>
+          </div>
+          <div class="img-slider">
+            <div data-anime="infinite-02" data-anime-direction="up" data-anime-duration="100">
+              <div class="img-slider-list">
+                <img src="./img/banner-04.png" alt="">
+              </div>
+              <div class="img-slider-list">
+                <img src="./img/banner-05.png" alt="">
+              </div>
+              <div class="img-slider-list">
+                <img src="./img/banner-06.png" alt="">
+              </div>
+              <div class="img-slider-list">
+                <img src="./img/banner-08.png" alt="">
+              </div>
+              <div class="img-slider-list">
+                <img src="./img/banner-09.png" alt="">
+              </div>
+            </div>
+          </div>
+          <div class="img-slider">
+            <div data-anime="infinite-03" data-anime-direction="up" data-anime-duration="100">
+              <div class="img-slider-list">
+                <img src="./img/banner-07.png" alt="">
+              </div>
+              <div class="img-slider-list">
+                <img src="./img/banner-08.png" alt="">
+              </div>
+              <div class="img-slider-list">
+                <img src="./img/banner-09.png" alt="">
+              </div>
+              <div class="img-slider-list">
+                <img src="./img/banner-02.png" alt="">
+              </div>
+              <div class="img-slider-list">
+                <img src="./img/banner-03.png" alt="">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card form-block">
+        <card-title class="d-none d-md-block">
+          <a href="https://hhh.com.tw/" class="logo">
+            <img alt="logo" src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" />
+          </a>
+        </card-title>
+        <div class="card-body">
+          <form>
+            <div class="mb-3">
+              <label for="name" class="form-label">姓名*</label>
+              <input type="text" class="form-control" id="name" placeholder="請輸入姓名">
+              <div class="name invalid-feedback">
+                請輸入姓名，不超過 10 字元
+              </div>
+            </div>
+
+            <div class="mb-3">
+              <label for="phone" class="form-label">手機*</label>
+              <input type="tel" class="form-control" id="phone" placeholder="請輸入手機號碼 0900-000-000" maxlength="12">
+              <div class="phone invalid-feedback">
+                請輸入完整手機號碼，不超過 10 字元
+              </div>
+            </div>
+
+            <div class="mb-3">
+              <label for="email" class="form-label">Email</label>
+              <input type="text" class="form-control" id="email" placeholder="請輸入 E-mail 信箱">
+              <div class="email invalid-feedback">
+                請檢查 E-mail 格式
+              </div>
+            </div>
+
+            <div class="mb-3">
+              <label for="city" class="form-label">裝修所在地*</label>
+              <select class="form-select" aria-label="select region" id="city">
+                <option value="" disabled selected>請選擇裝修所在縣市</option>
+                <option value="基隆市">基隆市</option>
+                <option value="台北市">台北市</option>
+                <option value="新北市">新北市</option>
+                <option value="桃園市">桃園市</option>
+                <option value="新竹市">新竹市</option>
+                <option value="新竹縣">新竹縣</option>
+                <option value="苗栗縣">苗栗縣</option>
+                <option value="台中市">台中市</option>
+                <option value="彰化縣">彰化縣</option>
+                <option value="南投縣">南投縣</option>
+                <option value="雲林縣">雲林縣</option>
+                <option value="嘉義市">嘉義市</option>
+                <option value="嘉義縣">嘉義縣</option>
+                <option value="台南市">台南市</option>
+                <option value="高雄市">高雄市</option>
+                <option value="屏東縣">屏東縣</option>
+                <option value="宜蘭縣">宜蘭縣</option>
+                <option value="花蓮縣">花蓮縣</option>
+                <option value="台東縣">台東縣</option>
+              </select>
+              <div class="city invalid-feedback">
+                請選擇您所要裝修地點所在縣市
+              </div>
+            </div>
+
+            <div class="mb-3 square-footage">
+              <label for="area" class="form-label">坪數*</label>
+              <input type="text" class="form-control" id="area" placeholder="請輸入室內裝修坪數">
+              <!-- <p>坪</p> -->
+              <div class="area invalid-feedback">
+                請輸入正確坪數
+              </div>
+            </div>
+
+            <div class="mb-3">
+              <label for="name" class="form-label">裝修類型*</label>
+              <div class="d-flex type-items">
+                <input type="radio" id="type_1" name="type_options">
+                <label for="type_1" class="ms-2 custom-control-label">
+                  <div class="d-flex align-items-center">
+                    <span class="d-flex flex-column">
+                      <h4 class="title">
+                        輕裝修
+                      </h4>
+                      <p>
+                        適合新成屋
+                      </p>
+                    </span>
+                    <small>
+                      不更動房間格局、含系統櫃、軟裝、地板工程等
+                    </small>
+                  </div>
+                </label>
+              </div>
+              <div class="d-flex type-items my-2">
+                <input type="radio" id="type_2" name="type_options">
+                <label for="type_2" class="ms-2 custom-control-label">
+                  <div class="d-flex align-items-center">
+                    <span class="d-flex flex-column">
+                      <h4>
+                        全室裝修
+                      </h4>
+                      <p>
+                        適合毛胚屋、<br>老屋翻新
+                      </p>
+                    </span>
+                    <small>
+                      不更動房間格局，含系統櫃、油漆、地板工程等
+                    </small>
+                  </div>
+                </label>
+              </div>
+              <div class="d-flex type-items">
+                <input type="radio" id="type_3" name="type_options">
+                <label for="type_3" class="ms-2 custom-control-label">
+                  <div class="d-flex align-items-center">
+                    <span class="d-flex flex-column">
+                      <h4>
+                        局部裝修
+                      </h4>
+                    </span>
+                    <small>
+                      只針對室內特定區域裝修，如廚房、衛浴空間等
+                    </small>
+                  </div>
+                </label>
+              </div>
+
+              <div class="type invalid-feedback">
+                請輸入正確坪數請選擇裝修類型
+              </div>
+            </div>
+
+            <div class="mb-3 pt-1 form-check d-flex justify-content-center">
+              <input class="form-check-input" type="checkbox" value="" id="marketing_consent" checked>
+              <label class="form-check-label ms-2 d-flex align-items-center" for="marketing_consent">
+                我同意收到幸福空間裝修設計訊息
+              </label>
+            </div>
+
+            <button type="submit" class="btn btn-primary w-100 submit">查看預算方案並與我聯繫</button>
+
+            <p class="disclaimer">
+              送出即表示您已閱讀並同意 <a href="https://hhh.com.tw/about/privacy_policy/" target="_blank">免責聲明與隱私使用條款</a>
+            </p>
+
+            <div class="accordion solution-accordion mt-5" id="accordionExample">
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="heading_1">
+                  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_1"
+                    aria-expanded="true" aria-controls="collapse_1" data-ga="Q1_button">
+                    Q1 如何挑選優質室內設計公司?
+                  </button>
+                </h2>
+                <div id="collapse_1" class="accordion-collapse collapse show" aria-labelledby="heading_1"
+                  data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    1. 室內設計公司是否為政府合法立案：可以到經濟部商業司或是內政部營建署「全國建築管理資訊系統入口網」的【室內裝修業登記查詢】網站上做查詢。<br>
+                    2. 室內設計公司與室內設計師是否持有室內裝修證照：如室內裝修工程管理乙級執照，未有證照就進行施工是違法的行為，請務必要當心。<br>
+                    3. 室內設計公司的專業能力與態度：洽談過程中，可透過提供圖面初步了解設計師技術與空間配置功力，並了解過往經驗與作品風格是否是自己喜歡的。<br>
+
+                  </div>
+                </div>
+              </div>
+
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="heading_2">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#collapse_2" aria-expanded="true" aria-controls="collapse_2" data-ga="Q2_button">
+                    Q2 裝潢需要申請室內裝修許可嗎?
+                  </button>
+                </h2>
+                <div id="collapse_2" class="accordion-collapse collapse" aria-labelledby="heading_2"
+                  data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    依據「內政部營建署」所列的建築物室內裝修管理辦法第三條，室內裝修的行為包含以下幾點，但不包括壁紙、壁布、窗簾、家具、活動隔屏、地氈等之黏貼及擺設。<br>
+                    1. 固著於建築物構造體之天花板裝修。<br>
+                    2. 內部牆面裝修。<br>
+                    3. 高度超過地板面1.2公尺以上，固定之隔屏裝修或兼作櫥櫃使用之隔屏裝修。<br>
+                    4. 分間牆之變更。<br>
+                    換句話說，只要動到天花板、牆壁、固定式隔間的室內裝修行為幾乎都要申請。一般都是委託室內設計公司或建築師事務所，向當地主管機關申請室內裝修審查。<br>
+                  </div>
+                </div>
+              </div>
+
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="heading_3">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#collapse_3" aria-expanded="true" aria-controls="collapse_3" data-ga="Q3_button">
+                    Q3 裝潢費用有哪些?
+                  </button>
+                </h2>
+                <div id="collapse_3" class="accordion-collapse collapse" aria-labelledby="heading_3"
+                  data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    一般來說，一個完整的裝修費用包含「設計費」、「工程費」及「監工費」，其中設計費取決於室內設計師個人的經歷、名氣、公司規模或是難易度，而有不同的計價方式；工程費則會因為選用的建材或是施工方法不同產生很大的價差，至於監工費部分通常為總工程款的5%～10%
+                  </div>
+                </div>
+              </div>
+
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="heading_4">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#collapse_4" aria-expanded="true" aria-controls="collapse_4" data-ga="Q4_button">
+                    Q4 裝潢預算配置怎麼抓?
+                  </button>
+                </h2>
+                <div id="collapse_4" class="accordion-collapse collapse" aria-labelledby="heading_4"
+                  data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    在評估預算時，主要可分為四大項目，包括室內設計與裝潢工程、家電設備、家具以及軟裝佈置。室內設計與裝潢工程的費用通常佔據最大比例，約占總預算的60%至65%左右。至於家電設備和家具，建議各佔預算的15%。剩餘的5%至10%則可用於軟裝家飾的採購。
+                  </div>
+                </div>
+              </div>
+
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="heading_5">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#collapse_5" aria-expanded="true" aria-controls="collapse_5" data-ga="Q5_button">
+                    Q5 裝潢費用一坪多少?
+                  </button>
+                </h2>
+                <div id="collapse_5" class="accordion-collapse collapse" aria-labelledby="heading_5"
+                  data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    新成屋的裝潢報價大約在3萬至5萬元/坪之間，而中古屋的報價為6萬至8萬元/坪，老屋翻新的報價則在7萬至10萬元/坪，少數老舊房屋的報價甚至可能達到12萬元/坪。對於對裝潢品質有更高要求者，可能需要更多的預算。一般都會建議中古屋、老屋翻新要預留5~10%的預算做彈性調整。
+                  </div>
+                </div>
+              </div>
+
+
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="heading_6">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#collapse_6" aria-expanded="true" aria-controls="collapse_6" data-ga="Q6_button">
+                    Q6 老屋翻新預算怎麼抓?
+                  </button>
+                </h2>
+                <div id="collapse_6" class="accordion-collapse collapse" aria-labelledby="heading_6"
+                  data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    基本上，老屋翻新的施工項目大致分為基礎工程、裝潢工程及裝飾工程三大項目，在分配預算時，建議使用總預算的40%施作基礎工程，30%執行裝潢工程，30%進行裝飾工程。建議在評估預算時要規劃10%~15%的追加款，以備不時之需。
+                  </div>
+                </div>
+              </div>
+
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="heading_7">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#collapse_7" aria-expanded="true" aria-controls="collapse_7" data-ga="Q7_button">
+                    Q7 老屋翻新補助有哪些?
+                  </button>
+                </h2>
+                <div id="collapse_7" class="accordion-collapse collapse" aria-labelledby="heading_7"
+                  data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    政府為補助房屋修繕費用主要有三種方案：內政部「修繕住宅貸款利息補貼」及「簡易修繕住宅費用補貼」、地方政府「老屋修繕補助」。
+
+                  </div>
+                </div>
+              </div>
+
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="heading_8">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#collapse_8" aria-expanded="true" aria-controls="collapse_8" data-ga="Q8_button">
+                    Q8 老屋翻新補助的申辦條件是什麼?
+                  </button>
+                </h2>
+                <div id="collapse_8" class="accordion-collapse collapse" aria-labelledby="heading_8"
+                  data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    內政部提供的房屋修繕住宅補助針對10年以上老屋，約在每年7～8月間開放民眾申請。根據修繕住宅貸款利息補貼或簡易修繕住宅費用補貼評點基準採「評點制度」審核，若超過名額則公開抽籤。「修繕住宅貸款利息補貼」及「簡易修繕住宅費用補貼」的申請流程、文件、項目皆相同。
+
+                  </div>
+                </div>
+              </div>
+
+             
+
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="heading_9">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#collapse_9" aria-expanded="true" aria-controls="collapse_9" data-ga="Q9_button">
+                    Q9 老屋翻新的補助結果哪裡查詢？
+                  </button>
+                </h2>
+                <div id="collapse_9" class="accordion-collapse collapse" aria-labelledby="heading_9"
+                  data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    政府會在審查後1個月內將結果或補件通知，寄送至戶籍地址、通訊地址或修繕住宅地址，申請者需注意此3個地址的收件情形，以免錯過政府通知結果。
+
+                  </div>
+                </div>
+              </div>
+
+
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="heading_10">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#collapse_10" aria-expanded="true" aria-controls="collapse_10" data-ga="Q10_button">
+                    Q10 預售屋客變流程有哪些?
+                  </button>
+                </h2>
+                <div id="collapse_10" class="accordion-collapse collapse" aria-labelledby="heading_10"
+                  data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    建議於購入預售屋後，立刻向建設公司索取建築圖(格局)、水電圖(弱電、燈光迴路、給排水、消防)等完整電子檔，並先找設計師開始進行規劃，才不會來不及因應後續的客變時間。若決定找設計師協助，客變流程大概會細分為以下幾個流程：<br>
+                    1. 向建設公司索取建築圖與水電圖電子檔<br>
+                    2. 找設計師規劃客變內容<br>
+                    3. 於建商通知可客變時，會同設計師、建設公司共同討論客變項目<br>
+                    4. 建設公司修改圖面<br>
+                    5. 討論並確認圖面<br>
+                    6. 簽名確認圖面及加減帳明細<br>
+                    7. 施工<br>
+                    8. 完工驗收（攜帶最後完整建築圖與水電圖面，與設計師、建商共同驗收）<br>
+                    9. 修改驗屋缺失<br>
+                    10. 確認驗屋缺失已修正<br>
+                    11. 三方簽名確認<br>
+                    12. 交屋<br>
+
+
+                  </div>
+                </div>
+              </div>
+
+
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="heading_11">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#collapse_11" aria-expanded="true" aria-controls="collapse_11" data-ga="Q11_button">
+                    Q11 裝潢一定要請設計師嗎?
+                  </button>
+                </h2>
+                <div id="collapse_11" class="accordion-collapse collapse" aria-labelledby="heading_11"
+                  data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    如果你對設計和裝潢沒有太多經驗，建議找一位擁有豐富經驗和美感的室內設計師可以節省你的時間和精力，讓整個裝潢過程更加順利。<br>
+                    1. 省時省力： 室內設計師可以幫助您整合各方面需求，制定合理的設計方案，並統籌管理施工進度，讓您省心省力。<br>
+                    2. 專業施工品質： 室內設計師擁有豐富的專業知識和經驗，可以確保施工品質符合您的要求。 <br>
+                    3. 合理的裝修預算規劃： 室內設計師可以根據您的需求和預算，制定合理的設計方案和施工方案，幫助您有效控制成本。<br>
+                    小編建議與設計師溝通時，可提供具體的風格照片、案例，溝通起來更有效率喔！<br>
+
+
+                  </div>
+                </div>
+              </div>
+
+
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="heading_12">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#collapse_12" aria-expanded="true" aria-controls="collapse_12" data-ga="Q12_button">
+                    Q12 裝潢可以自己找統包商嗎?
+                  </button>
+                </h2>
+                <div id="collapse_12" class="accordion-collapse collapse" aria-labelledby="heading_12"
+                  data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    裝潢是一項專業性強、耗時費力的工程。如果您選擇自行承包，可能會面臨以下挑戰：<br>
+                    1. 缺乏專業知識和經驗： 室內設計涉及多個專業領域，包括櫃體結構、動線規劃、施工流程、材料選購等。如果您沒有相關知識和經驗，可能會導致施工過程中出現各種問題，從而延長工期、降低施工品質。<br>
+                    2. 難以掌控施工進度： 在自行承包的情況下，您需要親自跟進施工進度，這對於首次購屋者或繁忙的上班族來說可能是一項不小的負擔。<br>
+                    3. 無法有效控制裝修預算： 由於缺乏專業知識和經驗，您可能難以準確估算施工成本，從而導致預算超支。<br>
+
+
+                  </div>
+                </div>
+              </div>
+
+
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="heading_13">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#collapse_13" aria-expanded="true" aria-controls="collapse_13" data-ga="Q13_button">
+                    Q13 廚房設計的裝修預算怎麼抓？
+                  </button>
+                </h2>
+                <div id="collapse_13" class="accordion-collapse collapse" aria-labelledby="heading_13"
+                  data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                    廚房設計的裝修費用受到多種因素的影響，包括廚房大小、格局改動程度、水電管線是否需要重新配置、廚具品牌、材質等。一般來說，每坪廚房設計價格在3,000至12,000元之間。<br>
+                    對於常見的2至4坪廚房空間，如果格局改動不大且水電管線不需要重新配置，包含基本廚具的報價通常在10萬至15萬元之間。如果需要進行較大幅度的格局改動或重新配置水電管線，報價則會相應提高，大約在30萬至50萬元之間。<br>
+
+
+
+                  </div>
+                </div>
+              </div>
+              <!-- <div class="accordion-item">
+                <h2 class="accordion-header" id="heading_8">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#collapse_8" aria-expanded="true" aria-controls="collapse_8">
+                   老屋翻新預算怎麼抓?
+                  </button>
+                </h2>
+                <div id="collapse_8" class="accordion-collapse collapse" aria-labelledby="heading_8"
+                  data-bs-parent="#accordionExample">
+                  <div class="accordion-body">
+                   基本上，老屋翻新的施工項目大致分為基礎工程、裝潢工程及裝飾工程三大項目，在分配預算時，建議使用總預算的40%施作基礎工程，30%執行裝潢工程，30%進行裝飾工程。建議在評估預算時要規劃10%~15%的追加款，以備不時之需。                 
+     </div>
+                </div>
+              </div> -->
+
+
+
+
+
+
+
+
+
+
+
+
+            </div>
+
+
+
+          </form>
+
+
+
+          <div class="ad-list d-block d-md-none">
+            <p>您是裝修新手？歡迎參考</p>
+            <!-- 單張廣告圖 -->
+            <!-- <div class="img-item">
+          <a href="https://hhh.style/hh07yaeye" target="_blank">
+            <img src="./img/main-ad.jpg" alt="">
+          </a>
+        </div> -->
+            <!-- 兩張廣告圖 -->
+            <div class="img-item">
+
+              <a href="https://hhh.com.tw/deco/" target="_blank" class="d-block w-100">
+                <img src="./img/p1.jpg?a=2" alt="">
+              </a>
+              <!-- 暫時隱藏 因為心動活動 到 12/30-->
+
+              <!--               <a href="https://promote.hhh.com.tw/hueiyeh-28403?utm_source=FB&utm_medium=GS&utm_campaign=hueiyeh#%E7%BF%BB%E7%89%8C%E9%81%8A%E6%88%B2"
+                target="_blank" class="d-block w-100">
+                <img src="./img/231229_輝葉第三波活動製作_664x180.jpg" alt="">
+              </a> -->
+
+
+              <!-- <a href="https://event.hhh.com.tw/agent/index.html" target="_blank" class="d-block w-100">
+                <img src="./img/p2.jpg" alt="">
+              </a> -->
+
+              <a href="https://homeinspection.leju.com.tw/?utm_source=Google&utm_medium=Keywords&utm_campaign=homeinspection&gad_source=1&gclid=CjwKCAjww_iwBhApEiwAuG6ccOw8p8Bj3fcBK_LLSEsXZzXZwdytgpDI_Tb4BQqUi-Go_NVWQS_1shoCKWgQAvD_BwE"
+                target="_blank" class="d-block w-100">
+                <img src="./img/樂居.jpg" alt="">
+              </a>
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+
+    <div class="loading-block">
+      <ul class="spinner">
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ul>
+      <p>您的裝修方案預算正在計算中</p>
+    </div>
+  </div>
+
+  <!-- 動態載入 -->
+  <div id="btn-box"></div>
+  <div id="footer"></div>
+
+  <!-- Google Tag Manager (noscript) -->
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W3RJHTZ" height="0" width="0"
+      style="display:none;visibility:hidden"></iframe></noscript>
+  <!-- End Google Tag Manager (noscript) -->
+  <!--
+<script>
+window.onload = function () {
+    if (screen.width < 767) {
+       
+        window.location.href = `https://m.hhh.com.tw/HHH/calculator_request/index.html`;
+    }
+}
+</script>
+-->
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
+    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+    integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
+    crossorigin="anonymous"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+  <script src="
+  https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.min.js
+  "></script>
+  <!-- <script src="./js/index.js?a=ff2"></script> -->
+  <script>
+    // 若 localStorage 已儲存表單資訊則直接填入(避免重複填單)
+    let userData = JSON.parse(localStorage.getItem('calculator_form'));
+
+    if (userData) {
+      $('#name').val(userData.name);
+      $('#phone').val(userData.phone);
+      $('#email').val(userData.email);
+      $('#city').val(userData.city);
+      $('#area').val(userData.area);
+    }
+
+    let imageHeight;
+
+    // 更新圖片高度
+    function updateImageHeight() {
+      if (window.innerHeight > 1300) {
+        // 螢幕高度高於 1300 後動態取得圖片高度 (因圖片高度由 px 改為 vh，避免出現空白)
+        imageHeight = document.querySelector('.img-slider-list img').offsetHeight;
+      } else {
+        imageHeight = 330;
+      }
+    }
+
+    updateImageHeight();
+
+    let resizeTimer;
+
+    window.addEventListener('resize', () => {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(() => {
+        updateImageHeight();
+      }, 250); // 延遲 250 毫秒後觸發
+    });
+
+    let translateUp = 0;
+    let translateDown = -imageHeight; // 起始為第二張圖片
+    const slider_1 = document.querySelector('.img-slider [data-anime="infinite-01"]');
+    const slider_2 = document.querySelector('.img-slider [data-anime="infinite-02"]');
+    const slider_3 = document.querySelector('.img-slider [data-anime="infinite-03"]');
+
+    // 圖片動畫效果(垂直輪播)
+    function animateSlider() {
+      // 調整每秒移動的距離
+      translateUp -= .5; // 圖片往上移動
+      translateDown += .5; // 圖片往下移動
+
+      slider_1.style.transform = `translate3d(0, ${translateUp}px, 0)`;
+      slider_2.style.transform = `translate3d(0, ${translateDown}px, 0)`;
+      slider_3.style.transform = `translate3d(0, ${translateUp}px, 0)`;
+
+      // 往上移動到最後一張時將第一張加至底部
+      if (translateUp <= -imageHeight) {
+        const firstImage_1 = slider_1.querySelector('.img-slider-list:first-child');
+        const firstImage_2 = slider_3.querySelector('.img-slider-list:first-child');
+        slider_1.appendChild(firstImage_1);
+        slider_3.appendChild(firstImage_2);
+        translateUp = 0;
+        slider_1.style.transform = `translate3d(0, ${translateUp}px, 0)`;
+        slider_3.style.transform = `translate3d(0, ${translateUp}px, 0)`;
+      }
+
+      // 往下移動到第一張時將最後一張加至頂部
+      if (translateDown >= 0) {
+        const lastImage = slider_2.querySelector('.img-slider-list:last-child');
+        slider_2.insertBefore(lastImage, slider_2.firstChild);
+        translateDown = -imageHeight;
+        slider_2.style.transform = `translate3d(0, ${translateDown}px, 0)`;
+      }
+
+      requestAnimationFrame(animateSlider); // 根據瀏覽器的刷新率調整動畫的執行時間
+    }
+
+    animateSlider();
+
+    let data = {
+      name: ""
+    }
+
+    // 正則表達式規則
+    //let nameRegex = /^[\u4e00-\u9fa5a-zA-Z]{1,10}$/; // 中英文字，最長 10 字元
+    let nameRegex = /^[\u4e00-\u9fa5a-zA-Z ]{1,10}$/;
+    let phoneRegex = /^09\d{2}-\d{3}-\d{3}$/; // 須符合 0900-000-000 格式
+    let emailRegex = /^(?:\s*|[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/; // email 格式
+    let areaRegex = /^(?!0$)(?!0\.0$)(?:\d{1,3}(?:\.\d{1,2})?|1000(?:\.0{1,2})?)$/; // 可包含小數點符號，不可為「0」，下限為「1」，上限為「1000」
+
+    // 驗證表單欄位
+    function validateField(inputValue, regexPattern) {
+      let pattern = new RegExp(regexPattern);
+      return pattern.test(inputValue);
+    }
+
+    // 判斷裝修類型是否有勾選，無則將 button 設為 disabled
+    // if ($('input[name="type_options"]').is(':checked')) {
+    //   $('.submit').prop('disabled', false);
+    // } else {
+    //   $('.submit').prop('disabled', true);
+    // }
+
+    $('input[name="type_options"]').on('change', function () {
+      $('.submit').prop('disabled', false);
+    });
+
+    // 取得驗證狀態後切換 CSS
+    function validateState(name, state) {
+      if (!state) {
+        if (name !== 'city') {
+          $(`#${name}`).css({ "color": "#dc3545", "border-color": "#dc3545" });
+        } else {
+          $(`#${name}`).css({ "border-color": "#dc3545" });
+        }
+        $(`.${name}.invalid-feedback`).show();
+
+      } else {
+        $(`#${name}`).css({ "color": "#000000", "border-color": "#ced4da" });
+        $(`.${name}.invalid-feedback`).hide();
+      }
+    }
+
+    // 驗證所有欄位
+    function validateAllFields(fields) {
+      let isValid = true;
+
+      fields.forEach(field => {
+        const fieldIsValid = validateField(field.value, field.regex);
+        validateState(field.id, fieldIsValid);
+        if (!fieldIsValid) {
+          isValid = false;
+        }
+      });
+
+      return isValid;
+    }
+
+    // 處理表單內容
+    $('.request-content form').submit(function (event) {
+
+      // 获取当前网址
+      let currentURL = window.location.href;
+
+      // 使用URLSearchParams对象获取查询参数
+      let urlSearchParams = new URLSearchParams(window.location.search);
+
+      let utmSource = urlSearchParams.get('utm_source');
+      if (utmSource === null) {
+        // 如果utm_source不存在，再检查gclid参数是否存在
+        var gclidValue = urlSearchParams.get('gclid');
+        if (gclidValue !== null) {
+          // 如果gclid存在，则将utmSource设为"GoogleAds"
+          utmSource = "GoogleAds";
+        } else {
+          // 如果都不存在，则utmSource设为null
+          utmSource = '';
+        }
+      }
+
+      let utmMedium = urlSearchParams.get('utm_medium') || '';
+
+      let utmCampaign = urlSearchParams.get('utm_campaign') || '';
+
+      //console.log(utmSource,utmMedium,utmCampaign);
+
+
+
+
+      event.preventDefault(); // 阻止表單默認提交行為
+
+      // 取得被選中的選項的 id 值
+      const selectedOptionId = document.querySelector('input[name="type_options"]:checked')?.id;
+
+      let name = $('#name').val(); // 姓名
+      let phone = $('#phone').val(); // 手機
+      let email = $('#email').val(); // Email
+      let city = $('#city').val(); // 裝修所在地
+      let area = $('#area').val(); // 坪數
+      let type = $('input[name="type_options"]:checked').attr('id'); // 裝修類型
+      let marketing_consent = $('#marketing_consent').is(':checked') ? '1' : '0'; // 是否同意設計訊息
+      let ca_type = '';
+
+      // 需驗證的欄位
+      const fields = [
+        { id: 'name', value: name, regex: nameRegex },
+        { id: 'phone', value: phone, regex: phoneRegex },
+        { id: 'email', value: email, regex: emailRegex },
+        { id: 'area', value: area, regex: areaRegex },
+      ];
+
+      // 檢查所有欄位是否正確
+      const allFieldsValid = validateAllFields(fields);
+
+      // 判斷裝修所在地是否選擇
+      if (!city) {
+        validateState('city', false);
+      } else {
+        validateState('city', true);
+      }
+
+      // 判斷裝修類型是否選擇
+      if (type) {
+        validateState('type', true);
+        if (type === 'type_1') {
+          ca_type = '輕裝修';
+        } else if (type === 'type_2') {
+          ca_type = '全室裝修';
+        } else {
+          ca_type = '局部裝修';
+        }
+      } else {
+        validateState('type', false);
+        return;
+      }
+
+      let data = {
+        name: name, // 姓名
+        phone: phone, // 手機
+        email: email, // Email
+        city: city, // 裝修所在地
+        area: area, // 坪數
+        ca_type: ca_type, // 裝修類型
+        marketing_consent: marketing_consent, // 是否同意設計訊息
+        source: "官網", // 來源(固定值)
+        h_class: "無",
+        utmSource: utmSource,
+        utmMedium: utmMedium,
+        utmCampaign: utmCampaign
+
+
+
+      };
+
+      console.log('data', data);
+
+      if (allFieldsValid) {
+        // 表單驗證成功
+        $(".loading-block").css({ display: "flex" }); // 開啟 loading 動畫
+        if (data.email.trim() !== "") {
+
+          send_email_customer(data);
+
+        }
+
+        send_email_sale(data);
+        insertRequest(data);
+      } else {
+        // 表單驗證失敗
+        return;
+      }
+    });
+
+    let resultData = {};
+    function send_email_sale(data) {
+      $.ajax({
+        method: "post",
+        url: "https://m3.hhh.com.tw:18670/SendMail_to_sales",
+        data: JSON.stringify(data),
+        contentType: "application/json",
+      }).done((response) => {
+
+        console.log('send to sales')
+      });
+
+    }
+    function send_email_customer(data) {
+      $.ajax({
+        method: "post",
+        url: "https://m3.hhh.com.tw:18670/SendMail_to_customer",
+        data: JSON.stringify(data),
+        contentType: "application/json",
+      }).done((response) => {
+
+        console.log('send to customer')
+      });
+
+    }
+
+
+    function insertRequest(data) {
+      $.ajax({
+        method: "post",
+        url: "https://m3.hhh.com.tw:18670/insert_calculator_request",
+        data: JSON.stringify(data),
+        contentType: "application/json",
+      }).done((response) => {
+        console.log('response', response);
+
+        dataLayer.push({
+          'event': 'Request_Send',
+          'btn_location': 'Calculator_Request_Page'
+        });
+
+        resultData = response;
+        console.log('response', response);
+        localStorage.setItem("calculator_form", JSON.stringify(data)); // 儲存表單內容
+        localStorage.setItem("calculator_result", JSON.stringify(resultData)); // 儲存運算結果
+        setTimeout(() => {
+          $(".loading-block").css({ display: "none" }); // 關閉 loading 動畫
+          window.location.href = "https://hhh.com.tw/calculator_request/result.html"; // 跳轉至結果頁面
+          // $('.result-content').show(); // 結果頁
+          // $('.request-content').hide(); // 填單頁
+          // setValue(data.ca_type);
+        }, 1000)
+      }).fail((error) => {
+        $(".loading-block").css({ display: "none" });
+        console.log('error', error);
+      });
+    }
+
+    // $('.request-content form #phone').on('input', function () {
+    //   let phoneNumber = $(this).val();
+    //   let formattedNumber = formatPhoneNumber(phoneNumber);
+    //   $(this).val(formattedNumber);
+    // });
+
+    // // 輸入號碼時自動填入分隔「-」
+    // function formatPhoneNumber(phoneNumber) {
+    //   phoneNumber = phoneNumber.replace(/-/g, ''); // 移除現有的「-」
+
+    //   // 檢查號碼長度並加入「-」
+    //   if (phoneNumber.length >= 4 && phoneNumber.length < 7) {
+    //     phoneNumber = phoneNumber.slice(0, 4) + '-' + phoneNumber.slice(4);
+    //   } else if (phoneNumber.length >= 7) {
+    //     phoneNumber = phoneNumber.slice(0, 4) + '-' + phoneNumber.slice(4, 7) + '-' + phoneNumber.slice(7);
+    //   }
+
+    //   return phoneNumber;
+    // }
+
+    $('.request-content form #phone').keyup(function () {
+      addDashes(this);
+    });
+
+    let count = true;
+
+    function addDashes(el) {
+      let val = $(el).val().replace('-', '');
+
+      if (val.length === 5) {
+        let finalVal = val.match(/.{1,4}/g).join('-');
+        $(el).val(finalVal);
+      } else if (val.length === 7 && count) {
+        $(el).val(`${$(el).val()}-`);
+      } else {
+        count = true;
+      }
+
+      if ($(el).val().charAt($(el).val().length - 1) === '-') {
+        $(el).val().replace('-', '')
+        count = false;
+      }
+    }
+
+    const typeInputs = document.querySelectorAll('[name="type_options"]');
+    // 切換裝修類型的 radio border
+    typeInputs.forEach(function (typeInput) {
+      typeInput.addEventListener('change', function (event) {
+        const typeItems = this.closest('.type-items'); // 取得當前 radio 最近的 type-items
+        const allTypeItems = document.querySelectorAll('.type-items');
+
+        if (event.target.checked) {
+          typeItems.style.borderColor = '#EE751B'; // checked 狀態切換顏色
+
+          // 將其他的 borderColor 取消
+          allTypeItems.forEach((item) => {
+            if (item !== typeItems) {
+              item.style.borderColor = '';
+            }
+          });
+        }
+      });
+    });
+
+
+
+
+  </script>
+
+  <script> //2024/05/27新增FAQ按鈕點擊GA
+    for (let i = 1; i <= 13; i++) {
+      document.querySelector(`button[data-ga="Q${i}_button"]`).addEventListener('click', function () {
+        dataLayer.push({
+          'event': `calculator_request_Q${i}_button`,
+          'btn_location': 'FixedBTN'
+        });
+      });
+    }
+  </script>
+
+<script>
+    
+
+     // 发送GA事件
+        dataLayer.push({
+            'event': 'calculator_request_PageView',
+            'page_location': 'specific_page'
+        });
+
+        // 发送Facebook Pixel事件
+        fbq('trackCustom', 'calculator_request_PageView');
+</script>>
+
+
+</body>
+
+</html>

js/index.js

@@ -0,0 +1,1400 @@
+let userAgent;
+let isSafari = false;
+let browserName;
+
+// pagination variables
+let num_per_page = 9;
+let n = 0;
+let totalPages = {
+  intro: 0,
+  video: 0,
+  columns: 0,
+  vr360: 0,
+  company: 0,
+};
+
+window.onload = function () {
+  // if(screen.width < 900) {
+  //    window.location.href = "../index_designerList_mb.html";
+  // }
+
+
+
+
+
+  
+  userAgent = navigator.userAgent;
+  detectBrowser(userAgent);
+  detectDirection();
+  // let result;
+  // $.ajax({
+  //   method: "GET",
+  //   url: "./hhh_index/json/realtime.json",
+  //   dataType: "json",
+  // }).done(function (msg) {
+  //   result = [...msg];
+  //   console.log('result', result);
+  //   renderSec00(result);
+  //   // renderBanner(result);
+  // });
+
+  $('#navbar').load('./hhh_index/template/nav-new.html', function () {
+    hhh_user_api();
+  });
+  $('#footer').load('./hhh_index/template/footer.html');
+  $('#btn-box').load('./hhh_index/template/button.html');
+};
+
+function hhh_user_api_login() {
+  window.location.href = `https://hhh.com.tw/users`;
+}
+
+let user_data = [];
+
+function hhh_user_api() {
+  $.ajax({
+    method: "post",
+    url: "https://hhh.com.tw/adapter/index?http_method=GET&api_url=/base/v1/member/index",
+    // async: false,
+    dataType: "json",
+  }).done(function (msg) {
+    user_data = msg;
+    let app_user = "";
+    console.log('hhh_user_msg', msg);
+    if (msg.status == "Success") {
+      app_user += `
+      <div class="dropdown">
+        <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" onclick="hhh_user_api_login()">
+          <div class="d-flex align-items-center">
+            <img src="${msg.data["user_avatar"]}" alt="" style="height: 32px; width: 32px;border-radius: 100px;">
+            <p class="ms-2">${msg.data["name"]}</p>
+          </div>
+        </button>
+        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+          <li><a class="dropdown-item" href="https://hhh.com.tw/users">會員專區</a></li>
+        </ul>
+      </div>`;
+    } else {
+      app_user += `
+      <a class="nav-link" href="javascript:;" onclick="hhh_user_api_login()">
+        <section class="d-flex align-items-center">
+          <img src="./hhh_index/images/icon/material-people.svg" alt="login" class="me-2" style="padding-top: 2px;" />
+          <span class="pt-1">登入</span>
+        </section>
+      </a>`;
+    }
+    $("#app_user").html(app_user);
+  }).fail(function (err) {
+    console.log('err', err);
+  });
+}
+
+function detectDirection() {
+  let height = (window.screen.width * 5) / 12;
+  $(".sec-02 .slide-item").css("height", `${height}px`);
+}
+
+function detectBrowser(agent) {
+  if (userAgent.match(/chrome|chromium|crios/i)) {
+    browserName = "chrome";
+  } else if (userAgent.match(/firefox|fxios/i)) {
+    browserName = "firefox";
+  } else if (userAgent.match(/safari/i)) {
+    browserName = "safari";
+  } else if (userAgent.match(/opr\//i)) {
+    browserName = "opera";
+  } else if (userAgent.match(/edg/i)) {
+    browserName = "edge";
+  } else {
+    browserName = "No browser detection";
+  }
+
+  if (browserName === "safari") {
+    isSafari = true;
+  }
+}
+
+// 範圍內取隨機整數(0-8)
+function getRandomInt(max) {
+  return Math.floor(Math.random() * max);
+}
+
+function renderSec00(data) {
+  let temp = data[0]["data"];
+  renderBullet(temp);
+  renderBannerStr("sec-00-slider", temp);
+  let randomInt = getRandomInt(7);
+  $(".sec-00-slider").slick({
+    dots: false,
+    infinite: true,
+    speed: 500,
+    autoplay: true,
+    autoplaySpeed: 3000,
+    slidesToScroll: 1,
+    arrows: false,
+    initialSlide: randomInt, // 起始順序
+    prevArrow:
+      '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+    nextArrow:
+      '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+  });
+  $(".sec-00-bullet").removeClass("bullet-active");
+  $(".sec-00-bullet")
+    .eq($(".slick-active").data("slick-index"))
+    .addClass("bullet-active");
+  $(".sec-00-slider").on("afterChange", function (event, slick, currentSlide) {
+    $(".sec-00-bullet").removeClass("bullet-active");
+    $(`.sec-00-bullet.item-${currentSlide}`).addClass("bullet-active");
+    // $('.sec-00-bullet').eq(currentSlide).addClass("bullet-active");
+  });
+}
+
+function renderBanner(data) {
+  let temp = data[1]["data"];
+  // renderBullet(temp);
+  // renderBannerStr("banner-slider", temp);
+
+  let str = "";
+  let img = "";
+
+  if (window.innerWidth < 767) {
+    // 手機版
+    img = "imgUrl";
+  } else {
+    // 電腦版
+    img = "Dwebp";
+  }
+
+  for (let i = 0; i < temp.length; i++) {
+    str += `
+      <a href="${temp[i]["link"]}" target="_blank">
+        <section class="info-item">
+          <span class="logo-img">
+            <img class="img-${temp[i].logo_icon} ${temp[i].logo_icon === "" ? "d-none" : ""}" src="./hhh_index/images/index/banner_logo/${temp[i].logo_icon}.png">
+          </span>
+          <section class="${temp[i].index_char_1 === "" || temp[i].index_char_2_1 === "" || temp[i].index_char_2_2 === "" ? "d-none" : ""}">
+            <h3>${temp[i].index_char_1}</h3>
+            <div>
+              <h2>${temp[i].index_char_2_1}</h2>
+              <h2>
+                ${temp[i].index_char_2_2}
+                <small>${temp[i].index_char_2_3}</small>
+              </h2>
+            </div>
+         </section>
+        </section>
+        <img class="banner-slider-${i + 1} slide-item img-fluid" src="${temp[i][`${img}`]}" data-bg="${temp[i][`${img}`]}">
+      </a>`;
+  }
+
+  $(`.banner-slider`).html(str);
+
+  let randomInt = getRandomInt(8);
+
+  // 輪播設定
+  $('.banner-slider').slick({
+    dots: true,
+    infinite: true,
+    speed: 300,
+    arrows: true,
+    autoplay: true,
+    autoplaySpeed: 4000,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    centerMode: true,
+    variableWidth: true,
+    initialSlide: randomInt, // 起始順序
+    prevArrow:
+      '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="color: white;transform: translateY(-10px);"></i></button>',
+    nextArrow:
+      '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="color: white;transform: translateY(-10px);"></i></button>',
+    responsive: [
+      {
+        breakpoint: 575,
+        settings: {
+          dots: false,
+          arrows: false,
+        }
+      }
+    ]
+  });
+
+  // On before slide change
+  $('.banner-slider').on('beforeChange', function (event, { slideCount: count }, currentSlide, nextSlide) {
+    let selectors = [nextSlide, nextSlide - count, nextSlide + count].map(n => `[data-slick-index="${n}"]`).join(', ');
+    $('.slick-now').removeClass('slick-now');
+    $(selectors).addClass('slick-now');
+  });
+
+  $('[data-slick-index="0"]').addClass('slick-now');
+}
+
+function renderBullet(data) {
+  let str = "";
+  for (let i = 0; i < data.length; i++) {
+    str += `<div class="sec-00-bullet item-${i}"></div>`;
+  }
+  $(".sec-00-bulletList").html(str);
+}
+
+function renderBannerStr(sec, data) {
+  let str = "";
+  for (let i = 0; i < data.length; i++) {
+    if (data[i]["Dwebp"]) {
+      str += `
+      <a href="${data[i]["link"]}">
+        <img class="${sec}-${i + 1} slide-item img-fluid" src="${data[i]["Dwebp"]}" data-bg="${data[i]["Dwebp"]}">
+      </a>`;
+    } else {
+      str += `
+      <a href="${data[i]["link"]}">
+        <img class="${sec}-${i + 1} slide-item img-fluid" src="${data[i]["DimgUrl"]}" data-bg="${data[i]["DimgUrl"]}">
+      </a>`;
+    }
+  }
+  $(`.${sec}`).html(str);
+}
+
+let sticky = document.querySelector(".sec-00")?.offsetHeight;
+window.addEventListener("scroll", fixedOnScroll);
+
+const navbar = document.querySelector(".navbar-main");
+
+function fixedOnScroll() {
+  if (navbar) {
+    if (window.pageYOffset >= 344) {
+      navbar.classList.add("sticky");
+    } else {
+      navbar.classList.remove("sticky");
+    }
+  }
+}
+
+$(window)
+  .scroll(function () {
+    if ($(this).scrollTop() > 800) {
+      $(".fixed-btn").fadeIn(222);
+    } else {
+      $(".fixed-btn").stop().fadeOut(222);
+    }
+  })
+  .scroll();
+
+$("#top-btn").click(function () {
+  $("html, body").animate(
+    {
+      scrollTop: 0,
+    },
+    500
+  );
+});
+
+$(".sec-00__close").click(function () {
+  $(this).css("display", "none");
+  $(".sec-00").addClass("bannerClose");
+  //$('.sec-02').css('padding-top', '53px');
+  sticky = 0;
+});
+
+document.addEventListener("lazybeforeunveil", function (e) {
+  var bg = e.target.getAttribute("data-bg");
+  if (bg) {
+    e.target.style.backgroundImage = "url(" + bg + ")";
+  }
+});
+
+function addToFavorite(cid) {
+  if (user_data.data["uid"] == undefined) {
+    Swal.fire({
+      title: "請先登入",
+      showConfirmButton: false,
+    });
+
+    $.ajax({
+      url: "https://hhh.com.tw/hhhajax/save_http_referer",
+      type: "post",
+      datatype: "json",
+      data: { http_referer: location.href },
+      success: function () {
+        location.href = "/login/index";
+      },
+    });
+  }
+
+  $.ajax({
+    url: `https://hhh.com.tw/favorite/set?type=column&id=${cid}`,
+  }).done(function (data) {
+    if (data == 1) {
+      $(".like").css("display", "block");
+      $(".like-o").css("display", "none");
+    } else {
+      $(".like").css("display", "none");
+      $(".like-o").css("display", "block");
+    }
+  });
+}
+
+function putEmail() {
+  const emailPattern =
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  if ($("#email").val() !== null && emailPattern.test($("#email").val())) {
+    $("#error").hide();
+    $("#putEmail_hidden").css("display", "block");
+    $("#add_email").text($("#email").val());
+    $("#email").val("");
+  } else {
+    $("#error").show();
+    $("#error").text("email 格式有誤");
+  }
+}
+
+$(".fm-close").click(() => {
+  $("#putEmail_hidden").css("display", "none");
+  $("#add_email").text("");
+});
+
+$("#putEmail").click(function (event) {
+  $("#putEmail_hidden").show();
+  const vm = $("#email").val();
+  const emailPattern =
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+  if (vm.length == 0) {
+    $("#error").show();
+    $("#error").text("請輸入Email");
+    $("#email").addClass("border-revise");
+    $("#button-fm").addClass("fm-btn-border");
+
+    $("#email").focus();
+    return false;
+  } else if (!emailPattern.test(vm)) {
+    $("#error").show();
+    $("#error").text("email 格式有誤");
+    $("#email").addClass("border-revise");
+    $("#button-fm").addClass("fm-btn-border");
+    $("#email").focus();
+    return false;
+    // } else if (vm.length >= 5) {
+    //     $('#error').show();
+    //     $('#error').text('最多一次轉寄 5 封');
+    //     $('#email').addClass('border-revise');
+    //     $('#button-fm').addClass('fm-btn-border');
+    //
+    //     $('#email').focus();
+    //     return false;
+  } else {
+    $("#email").removeClass("border-revise");
+    $("#button-fm").removeClass("fm-btn-border");
+    $("#error").hide();
+    $("#add_email").text($("#email").val());
+    $("#email").val("");
+  }
+});
+
+$("#doSend").click(function (event) {
+  stop = 0;
+  var emailPattern =
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  let this_url = window.location.href;
+  // 如果 uid 為空代表沒登入(由於此寄信功能需要 uid 故需要先登入)
+  if (user_data.data["uid"] == undefined) {
+    $("#error").text("請先登錄/註冊會員帳號");
+    stop = 1;
+  } else if ($("#email").val() == "") {
+    $("#error").text("收件人不得為空");
+    stop = 1;
+  } else {
+    if (!emailPattern.test($("#email").val())) {
+      $("#error").text("請以 email 格式填寫");
+      stop = 1;
+    }
+  }
+
+  if (stop == 0) {
+    $("#error").text();
+    $.ajax({
+      url: "https://hhh.com.tw/adapter/index?http_method=POST&api_url=/base/v1/member/forward",
+      type: "post",
+      datatype: "json",
+      data: {
+        data: JSON.stringify({
+          uid: user_data.data["uid"],
+          sender: user_data.data["email"],
+          recipient: $("#email").val(),
+          url: this_url,
+          subject: $("#title").val(),
+          content: $("#content").val(),
+        }),
+      },
+      success: function (result) {
+        $("#forward_modal").modal("hide");
+        Swal.fire({
+          title: "發送成功",
+          showConfirmButton: false,
+        });
+        $("#emailModal").modal("hide");
+      },
+    });
+  }
+});
+
+/* 手機版輪播進度條 */
+
+$('.banner-slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) { // 頂部輪播
+  let calc = ((nextSlide) / (slick.slideCount - 1)) * 100;
+  $('.banner-content .progress')
+    .css('background-size', calc + '% 100%')
+    .attr('aria-valuenow', calc);
+});
+
+$('.ad-slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) { // 廣告區塊
+  let calc = ((nextSlide) / (slick.slideCount - 1)) * 100;
+  $('.ad-content .progress')
+    .css('background-size', calc + '% 100%')
+    .attr('aria-valuenow', calc);
+});
+
+let optionsSliderList = document.querySelectorAll('.options-slider'); // 廣告上方列表
+for (let i = 0; i < optionsSliderList.length; i++) {
+  let count;
+  let element;
+  const progressBar = $(`.progress.item-0${i}`);
+  const progressBarLabel = $('.slider-label');
+
+  if (i === 0) {
+    count = 2;
+    element = $(`.space-slider.slider-0${i}`);
+  } else {
+    window.innerWidth < 415 ? count = 2 : count = 3;
+    element = $(`.options-slider.slider-0${i}`);
+  }
+
+  element.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
+    let calc = ((nextSlide) / (slick.slideCount - count)) * 100;
+    progressBar
+      .css('background-size', calc + '% 100%')
+      .attr('aria-valuenow', calc);
+    progressBarLabel.text(calc + '% completed');
+  });
+}
+
+let mainSliderList = document.querySelectorAll('.main-content .slider'); // 廣告下方列表
+let count;
+window.innerWidth < 415 ? count = 1 : count = 2;
+for (let i = 0; i < mainSliderList.length; i++) {
+  let element = $(`.main-content .slider.item-0${i}`);
+  const progressBar = $(`.main-content .progress.item-0${i}`);
+  const progressBarLabel = $('.main-content .slider-label');
+
+  element.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
+    let calc = ((nextSlide) / (slick.slideCount - count)) * 100;
+    progressBar
+      .css('background-size', calc + '% 100%')
+      .attr('aria-valuenow', calc);
+    progressBarLabel.text(calc + '% completed');
+  });
+}
+
+// 廣告彈跳視窗 Modal
+// (function createModal() {
+//   const newDiv = document.createElement("div");
+//   let str = `
+//     <div class="modal fade" id="adModal" tabindex="-1" aria-labelledby="adModalLabel" aria-hidden="true">
+//       <div class="modal-dialog modal-dialog-centered">
+//         <div class="modal-content">
+//           <div class="modal-header">
+//             <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+//           </div>
+//           <div class="modal-body p-0">
+//             <a href="https://hhh.com.tw/HHH_NEW/columns_detail/7088.php?utm_source=GS&utm_medium=POPUP2&utm_campaign=15thanniversary_A" target="_blank">
+//               <img src="./hhh_index/images/230215_幸福空間15週年慶_1200x800.jpg" alt="" class="img-fluid">
+//             </a>
+//           </div>
+//         </div>
+//       </div>
+//     </div>`;
+
+//   newDiv.innerHTML = str;
+//   document.body.appendChild(newDiv);
+// })();
+
+/* 判斷閒置 */
+let defaultNum = 60; // 60 秒
+let maxTime = defaultNum;
+let intervalId;
+
+let time = maxTime;
+
+$('body').on('keydown mousemove mousedown', function (e) {
+  maxTime = defaultNum; // Seconds        
+  time = maxTime; // Reset
+});
+runSetInterval();
+
+function runSetInterval() {
+  intervalId = setInterval(function () {
+    time--;
+    if (time <= 0) {
+      ShowInvalidLoginMessage();
+      clearInterval(intervalId);
+    }
+  }, 1000)
+}
+$('#adModal').on('hide.bs.modal', function () {
+  dialogTimeclose();
+  runSetInterval();
+  $('body').addClass('scrollable');
+});
+
+function dialogTimeclose() {
+  time = maxTime;
+}
+
+function ShowInvalidLoginMessage() {
+  $('#adModal').modal('show');
+}
+
+/* genjson_new 新版首頁 */
+
+let result;
+
+$.ajax({
+  method: "get",
+  url: "./hhh_index/json/data_index.json",
+  // url: "https://m3.hhh.com.tw:18689/genjson_new?filename=realtime.json",
+  dataType: "json",
+}).done((data) => {
+  result = [...data];
+  // 隱藏 loading
+  $('body').removeClass('unscrollable');
+  $('.loading-item').addClass('loading-hide');
+
+  let ad = localStorage.getItem('ad');
+  if (!ad) {
+    localStorage.setItem('ad', true);
+    $('#adModal').modal('show');
+  } else {
+    if ($('#adModal').length) {
+      $('#adModal').modal('hide');
+    }
+    $('body').addClass('scrollable');
+  }
+
+  renderSec00(result);
+  renderBanner(result);
+  renderData(result); // 廣告上方列表
+  renderEventAd(result); // 廣告輪播
+  renderTopic(); // 主題企劃
+  renderDesigner(result); // 推薦設計師
+  renderTabContent(result); // 最夯設計, 影音實錄, 專欄文章
+}).fail((error) => {
+  console.log('genjson_new error', error);
+});
+
+$.ajax({
+  method: "get",
+  url: "./hhh_index/json/index-slider.json",
+  async: false,
+  dataType: "json",
+}).done((data) => {
+  renderJsonData(data); // 依照空間尋找商品, 依照專長尋找設計師
+}).fail((error) => {
+  console.log('error', error);
+});
+
+function renderJsonData(data) {
+  data.map(e => {
+    if (e.tab === "依照空間尋找商品") {
+      let str = "";
+      for (let i = 0; i < e.data.length; i++) {
+        let item = e.data[i];
+        str += `
+        <div>
+          <section>
+            <span class="slide-img">
+              <a href="${item.url}" target="_blank">
+                <img class="slide-item img-fluid" src="${item.image}" alt="${item.name}">
+                <h3>${item.name}</h3>
+              </a>
+            </span>
+          </section>
+        </div>`
+      }
+      $(".space-slider").html(str);
+      // 輪播設定
+      $('.space-slider').slick({
+        infinite: false,
+        slidesToShow: 4,
+        slidesToScroll: 1,
+        variableWidth: false,
+        prevArrow:
+          '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+        nextArrow:
+          '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+        responsive: [
+          {
+            breakpoint: 991,
+            settings: {
+              slidesToShow: 3,
+              slidesToScroll: 1
+            }
+          },
+          {
+            breakpoint: 767,
+            settings: {
+              slidesToShow: 2,
+              slidesToScroll: 1,
+            }
+          },
+          {
+            breakpoint: 575,
+            settings: {
+              slidesToShow: 2,
+              slidesToScroll: 1,
+              variableWidth: true,
+              arrows: false,
+            }
+          }
+        ]
+      });
+    } else {
+      let str = "";
+      for (let i = 0; i < e.data.length; i++) {
+        let item = e.data[i];
+        str += `
+        <div>
+          <section>
+            <span class="slide-img">
+              <a href="${item.url}" target="_blank">
+                <img class="slide-item img-fluid" src="${item.image}" alt="${item.name}">
+                <h3>${item.name}</h3>
+              </a>
+            </span>
+          </section>
+        </div>`
+      }
+      $(".options-slider.designer").html(str);
+    }
+
+    hideSlickArrow();
+  })
+}
+
+let locationUrl = '';
+window.innerWidth > 767 ? locationUrl = "https://hhh.com.tw" : locationUrl = "https://m.hhh.com.tw";
+
+// 首頁廣告上方列表
+function renderData(data) {
+  data.map((e) => {
+    if (e._comment === "加好物商品") {
+      renderDom("slider-01", e.data);
+    } else if (e._comment === "首頁photo頁") {
+      e.data.map((list, index) => {
+        renderDom(`slider-0${index + 2}`, list.data);
+        // $(`.slider-0${index + 1}-title`).text(list.tab);
+      })
+    }
+  })
+
+  // 輪播設定
+  $('.options-slider').slick({
+    infinite: false,
+    slidesToShow: 6,
+    slidesToScroll: 6,
+    variableWidth: false,
+    prevArrow:
+      '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+    nextArrow:
+      '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+    responsive: [
+      {
+        breakpoint: 1200,
+        settings: {
+          slidesToShow: 5,
+          slidesToScroll: 5,
+        }
+      },
+      {
+        breakpoint: 991,
+        settings: {
+          slidesToShow: 4,
+          slidesToScroll: 4
+        }
+      },
+      {
+        breakpoint: 767,
+        settings: {
+          slidesToShow: 3,
+          slidesToScroll: 1,
+        }
+      },
+      {
+        breakpoint: 575,
+        settings: {
+          slidesToShow: 3,
+          slidesToScroll: 1,
+          variableWidth: true,
+          arrows: false,
+        }
+      },
+      {
+        breakpoint: 415,
+        settings: {
+          slidesToShow: 2,
+          slidesToScroll: 1,
+          variableWidth: true,
+          arrows: false,
+        }
+      }
+    ]
+  });
+
+  hideSlickArrow();
+}
+
+function renderDom(sec, data) {
+  if (sec !== "slider-01") {
+    data = data.sort((a, b) => a.order - b.order);
+    let str = "";
+    for (let i = 0; i < data.length; i++) {
+      str += `
+    <div>
+      <section>
+        <span class="slide-img">
+          <a href="${locationUrl + data[i]["url"]}" target="_blank">
+            <img class="${sec}-${i + 1} slide-item img-fluid" src="${locationUrl + data[i]["image"]}" alt="${data[i]["name"]}">
+            <h3>${data[i]["name"]}</h3>
+          </a>
+        </span>
+      </section>
+    </div>`
+    }
+    $(`.${sec}`).html(str);
+  } else {
+    data = data.sort(() => Math.random() - 0.5); // 隨機排序
+    data = data.slice(0, 12); // 取前 12 筆
+    let str = "";
+    for (let i = 0; i < data.length; i++) {
+      str += `
+      <div>
+        <section>
+          <span class="slide-img">
+            <a href="${data[i]["link"]}" target="_blank">
+              <img class="${sec}-${i + 1} slide-item img-fluid" src="${data[i]["imgUrl"]}" alt="${data[i]["title"]}">
+              <h3>
+                <strong>${data[i]["title"]}</strong>
+              </h3>
+            </a>
+          </span>
+        </section>
+      </div>`
+    }
+    $(`.${sec}`).html(str);
+  }
+
+}
+
+// let timer;
+
+// $(window).resize(function () {
+//   // 延遲縮放
+//   window.clearTimeout(timer);
+//   timer = window.setTimeout(() => {
+//     renderTopic();
+//   }, 100);
+// })
+
+// 首頁主題企劃
+function renderTopic() {
+  if (result) {
+    result.map(list => {
+      if (list._comment === "主題企劃區") {
+        let webData = [];
+        let mobileData = [];
+
+        list.data.filter(e => {
+          if (e.tab === "web") {
+            webData = e.data;
+          } else {
+            mobileData = e.data;
+          }
+        });
+
+        let arr;
+        let str = "";
+        // 固定取手機版第一筆
+        let linkHref = `https://m.hhh.com.tw${mobileData[0].link}`;
+
+        window.innerWidth > 767 ? arr = webData : arr = mobileData;
+
+        let topicLink = document.querySelector(".topic-content .more-link");
+        topicLink?.setAttribute("href", linkHref);
+
+        for (let i = 0; i < arr.length; i++) {
+          str += `
+          <div>
+            <section>
+              <span class="slide-img">
+                <a href="${locationUrl + arr[i]["link"]}" target="_blank">
+                  <div class="img-box slide-img"> <img src="${arr[i]["imgUrl"]}" alt="${arr[i]["title"]}" class="img-fluid"></div>
+                </a>
+              </span>
+              <a href="${locationUrl + arr[i]["link"]}" target="_blank">
+                <h3 class="mt-2 ellipsis-title">${arr[i]["title"]}</h3>
+              </a>
+            </section>
+          </div>`;
+        }
+
+        $('.topic-slider').html(str);
+        // 輪播設定
+        $('.topic-slider').slick({
+          infinite: false,
+          slidesToShow: 4,
+          slidesToScroll: 4,
+          variableWidth: false,
+          prevArrow:
+            '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+          nextArrow:
+            '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+          responsive: [
+            {
+              breakpoint: 991,
+              settings: {
+                slidesToShow: 2,
+                slidesToScroll: 2,
+              }
+            },
+            {
+              breakpoint: 767,
+              settings: {
+                slidesToShow: 2,
+                slidesToScroll: 1,
+                // variableWidth: true,
+                // arrows: false,
+              }
+            },
+            {
+              breakpoint: 575,
+              settings: {
+                slidesToShow: 2,
+                slidesToScroll: 1,
+                variableWidth: true,
+                arrows: false,
+              }
+            },
+            {
+              breakpoint: 415,
+              settings: {
+                slidesToShow: 1,
+                slidesToScroll: 1,
+                variableWidth: true,
+                arrows: false,
+              }
+            }
+          ]
+        });
+      }
+    });
+  }
+}
+
+// 按鈕 hover
+$(function () {
+  $('.top-card a, .center-card a')
+    .on('mouseenter', function (e) {
+      var parentOffset = $(this).offset(),
+        relX = e.pageX - parentOffset.left,
+        relY = e.pageY - parentOffset.top;
+      $(this).find('span').css({ top: relY, left: relX })
+    })
+    .on('mouseout', function (e) {
+      var parentOffset = $(this).offset(),
+        relX = e.pageX - parentOffset.left,
+        relY = e.pageY - parentOffset.top;
+      $(this).find('span').css({ top: relY, left: relX })
+    });
+});
+
+// 首頁廣告輪播
+function renderEventAd(data) {
+  data.map(list => {
+    if (list._comment === "活動頁banners區") {
+      let str = "";
+      list.data = list.data.sort(() => Math.random() - 0.5); // 隨機排序
+      for (let i = 0; i < list.data.length; i++) {
+        str += `
+        <div>
+          <a href="${list.data[i]["link"]}" target="_blank">
+            <img class="slide-item img-fluid" src="${list.data[i]["webp"]}" alt="">
+          </a>
+        </div>`
+      }
+
+      $('.ad-content .ad-slider').html(str);
+    }
+  });
+
+  // 輪播設定
+  $('.ad-content .ad-slider').slick({
+    dots: false,
+    infinite: true,
+    speed: 300,
+    arrows: true,
+    autoplay: true,
+    autoplaySpeed: 4000,
+    slidesToShow: 2,
+    slidesToScroll: 1,
+    prevArrow:
+      '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+    nextArrow:
+      '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+    responsive: [
+      {
+        breakpoint: 767,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+        }
+      },
+      {
+        breakpoint: 575,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+          arrows: false
+        }
+      }
+    ]
+  });
+}
+
+// 隨機對調前後順序(e.g. 5678 1234)
+function randomArr(ary, num = 4) {
+  // 取得隨機整數
+  let randomVal;
+  (Math.random() > 0.5) ? randomVal = 1 : randomVal = 0;
+
+  let data = [...ary]; // 深拷貝
+  let list = [];
+
+  // index < 拆分的次數
+  for (let index = 0; index < 1; index++) {
+    list.push(data.splice(num, num));
+  }
+
+  list = list.sort(() => Math.random() - 0.5); // 隨機排序
+
+  let finalData = [];
+
+  if (randomVal) {
+    finalData = data.concat(list);
+  } else {
+    finalData = list.concat(data);
+  }
+
+  return finalData.flat(Infinity) // 展開陣列
+}
+
+
+function renderDesigner(data) {
+  data.map(list => {
+    if (list._comment === "推薦設計師") {
+      let randomData = randomArr(list.data, 6);
+      let str = "";
+
+      for (let i = 0; i < randomData.length; i++) {
+        const item = randomData[i];
+
+        str += `
+        <div>
+          <section>
+            <span class="slide-img">
+              <a href="${locationUrl + item.link}" target="_blank">
+                <img class="slide-item img-fluid" src="${item.imgUrl}" alt="${item.name}｜${item.designers_name}">
+                <span class="img-border"></span>
+              </a>
+            </span>
+            <a href="${locationUrl + item.link}" target="_blank">
+              <h3 class="ellipsis-title">
+                ${item.name}
+              </h3>
+              <h3 class="name">
+                ${item.designers_name}
+                <small>設計師</small>
+              </h3>
+            </a>
+          </section>
+        </div>`;
+      }
+
+      $('.designer-slider').html(str);
+      // 輪播設定
+      $('.designer-slider').slick({
+        infinite: false,
+        slidesToShow: 6,
+        slidesToScroll: 6,
+        variableWidth: false,
+        prevArrow:
+          '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+        nextArrow:
+          '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+        responsive: [
+          {
+            breakpoint: 1200,
+            settings: {
+              slidesToShow: 4,
+              slidesToScroll: 4,
+            }
+          },
+          {
+            breakpoint: 767,
+            settings: {
+              slidesToShow: 3,
+              slidesToScroll: 3,
+            }
+          },
+          {
+            breakpoint: 575,
+            settings: {
+              slidesToShow: 2,
+              slidesToScroll: 1,
+              variableWidth: true,
+              arrows: false,
+            }
+          },
+        ]
+      });
+
+      hideSlickArrow();
+
+      $(".designer-content h3").hover(
+        function () {
+          $(this).parent().prev().children().children('.img-border').css('opacity', '1');
+        }, function () {
+          $(this).parent().prev().children().children('.img-border').css('opacity', '0');
+        }
+      );
+    }
+  });
+}
+
+function renderTabContent(data) {
+  data.map(list => {
+    if (list._comment === "tab區塊-最夯設計, 影音實錄, 專欄文章") {
+      list.data.map(item => {
+        if (item.tab === "編輯精選") {
+          let randomData = randomArr(item.data);
+          let str = "";
+          let tagList = [];
+
+          for (let i = 0; i < randomData.length; i++) {
+            const item = randomData[i];
+            str += `
+            <div>
+              <section>
+                <span class="slide-img">
+                  <a href="${locationUrl + item.link}" target="_blank">
+                    <img class="slide-item img-fluid" src="${item.imgUrl}" alt="${item.title}">
+                  </a>
+                </span>
+                <a href="${locationUrl + item.link}" target="_blank" class="title">
+                  <h3 class="mb-0 ellipsis-title">${item.title}</h3>
+                </a>
+                <div class="tab-block tag-list-${i}"></div>
+              </section>
+            </div>`;
+            tagList.push(item.ctag);
+
+          }
+
+          $('.featured-slider').html(str);
+          // 輪播設定
+          $('.featured-slider').slick({
+            infinite: false,
+            slidesToShow: 4,
+            slidesToScroll: 4,
+            variableWidth: false,
+            prevArrow:
+              '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+            nextArrow:
+              '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+            responsive: [
+              {
+                breakpoint: 991,
+                settings: {
+                  slidesToShow: 2,
+                  slidesToScroll: 2,
+                }
+              },
+              {
+                breakpoint: 767,
+                settings: {
+                  slidesToShow: 2,
+                  slidesToScroll: 2,
+                  // variableWidth: true,
+                  // arrows: false,
+                }
+              },
+              {
+                breakpoint: 575,
+                settings: {
+                  slidesToShow: 2,
+                  slidesToScroll: 2,
+                  variableWidth: true,
+                  arrows: false,
+                }
+              },
+              {
+                breakpoint: 415,
+                settings: {
+                  slidesToShow: 1,
+                  slidesToScroll: 1,
+                  variableWidth: true,
+                  arrows: false,
+                }
+              }
+            ]
+          });
+
+          hideSlickArrow();  // 判斷輪播按鈕顯示
+          randomTag(randomData, tagList, "featured-content"); // 渲染標籤
+
+        } else if (item.tab === "最夯設計") {
+          let randomData = randomArr(item.data);
+          let str = "";
+          let tagList = [];
+
+          for (let i = 0; i < randomData.length; i++) {
+            const item = randomData[i];
+            str += `
+            <div>
+              <section>
+                <span class="slide-img">
+                  <a href="${locationUrl + item.link}" target="_blank">
+                    <img class="slide-item img-fluid" src="${item.imgUrl}" alt="${item.title}">
+                  </a>
+                  <a href="${locationUrl + item.link}" target="_blank" class="designer-item">
+                    <img class="slide-item img-fluid" src="${item.img_designer}" alt="${item.title_designer}">
+                    <h2>${item.title_designer}</h2>
+                  </a>
+                  <a href="${locationUrl + item.link}" target="_blank" class="title">
+                    <h3 class="mb-0 ellipsis-title">${item.title}</h3>
+                  </a>
+                </span>
+                <div class="tab-block tag-list-${i}"></div>
+              </section>
+            </div>`;
+            tagList.push(item.ctag);
+          }
+
+          $('.popular-slider').html(str);
+          // 輪播設定
+          $('.popular-slider').slick({
+            infinite: false,
+            slidesToShow: 4,
+            slidesToScroll: 4,
+            variableWidth: false,
+            prevArrow:
+              '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+            nextArrow:
+              '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+            responsive: [
+              {
+                breakpoint: 991,
+                settings: {
+                  slidesToShow: 2,
+                  slidesToScroll: 2,
+                }
+              },
+              {
+                breakpoint: 767,
+                settings: {
+                  slidesToShow: 2,
+                  slidesToScroll: 2,
+                  // variableWidth: true,
+                  // arrows: false,
+                }
+              },
+              {
+                breakpoint: 575,
+                settings: {
+                  slidesToShow: 2,
+                  slidesToScroll: 2,
+                  variableWidth: true,
+                  arrows: false,
+                }
+              },
+              {
+                breakpoint: 415,
+                settings: {
+                  slidesToShow: 1,
+                  slidesToScroll: 1,
+                  variableWidth: true,
+                  arrows: false,
+                }
+              },
+            ]
+          });
+
+          hideSlickArrow();  // 判斷輪播按鈕顯示
+          randomTag(randomData, tagList, "popular-content"); // 渲染標籤
+
+        } else if (item.tab === "最新影音實錄") {
+          let randomData = randomArr(item.data);
+          let str = "";
+
+          for (let i = 0; i < randomData.length; i++) {
+            const item = randomData[i];
+            // <a href="javascript:;" onclick="videoSet('${item.link}','${item.description}')" data-bs-toggle="modal" data-src="${item.link}" data-bs-target="#youtubeModal">
+            //   <img class="slide-item img-fluid" src="${item.imgUrl}" alt="">
+            // </a>
+            str += `
+            <div>
+              <section>
+                <span class="slide-img">
+                  <a href="${item.link}" target="_blank">
+                    <img class="slide-item img-fluid" src="${item.imgUrl}" alt="${item.description}">
+                    <span class="play-btn">
+                      <img class="slide-item img-fluid" src="./hhh_index/images/icon/material-play-circle-outline.svg" alt="">
+                    </span>
+                  </a>
+                </span>
+                <a href="${item.link}" target="_blank" class="title">
+                  <h3 class="mb-0 mt-3 ellipsis-title">${item.description}</h3>
+                </a>
+              </section>
+            </div>`;
+          }
+
+          $('.video-slider').html(str);
+          // 輪播設定
+          $('.video-slider').slick({
+            infinite: false,
+            slidesToShow: 4,
+            slidesToScroll: 4,
+            variableWidth: false,
+            prevArrow:
+              '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+            nextArrow:
+              '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+            responsive: [
+              {
+                breakpoint: 991,
+                settings: {
+                  slidesToShow: 2,
+                  slidesToScroll: 2,
+                }
+              },
+              {
+                breakpoint: 767,
+                settings: {
+                  slidesToShow: 2,
+                  slidesToScroll: 2,
+                }
+              },
+              {
+                breakpoint: 575,
+                settings: {
+                  slidesToShow: 2,
+                  slidesToScroll: 1,
+                  variableWidth: true,
+                  arrows: false,
+                }
+              },
+              {
+                breakpoint: 415,
+                settings: {
+                  slidesToShow: 1,
+                  slidesToScroll: 1,
+                  variableWidth: true,
+                  arrows: false,
+                }
+              }
+            ]
+          });
+
+          hideSlickArrow();  // 判斷輪播按鈕顯示
+        }
+      })
+    }
+  })
+
+  // hover 事件
+  $(".main-content h3").hover(
+    function () {
+      $(this).parent().parent().addClass('img-scale');
+    }, function () {
+      $(this).parent().parent().removeClass('img-scale');
+    }
+  );
+
+  $(".main-content .slide-img").hover(
+    function () {
+      $(this).parent().parent().find('h3').css('color', '#ee751b');
+    }, function () {
+      ;
+      $(this).parent().parent().find('h3').css('color', '#727272');
+    }
+  );
+}
+
+// 參數需帶入(隨機排序清單, 標籤陣列, 外層className)
+function randomTag(randomData, tagList, content) {
+  let tagLink;
+  if (content === "featured-content") {
+    // 編輯精選
+    tagLink = "column";
+  } else {
+    // 最夯設計
+    tagLink = "case";
+  }
+
+  for (let index = 0; index < tagList.length; index++) {
+    const element = tagList[index];
+    randomData.map((e, i) => {
+      if (i === index) {
+        let list = [];
+        for (let i = 0; i < element.length; i++) {
+          const item = element[i];
+          if (item !== "") {
+            let tag = `
+            <a href=https://hhh.com.tw/search/lists/${tagLink}/${item}-keyword/" target="_blank">
+              <h4>${item}</h4>
+            </a>
+          `;
+            list.push(tag);
+          }
+
+        }
+        $(`.${content} .tag-list-${index}`).html(list);
+      }
+    })
+  }
+}
+
+function hideSlickArrow() {
+  /* 隱藏輪播 disabled 按鈕，後續改為點擊判斷 */
+  $('.slick-arrow.slick-disabled').css('display', 'none');
+  $('.slick-arrow').click(function () {
+    $('.slick-arrow').css('display', 'block');
+    $('.slick-arrow.slick-disabled').css('display', 'none');
+  });
+}
+
+// 影音實錄 Modal
+function videoSet(src, title) {
+  let url = new URL(src);
+  let id = url.searchParams.get('v');
+  $("#video").attr('src', `https://www.youtube-nocookie.com/embed/${id}`);
+  $("#youtubeModal h2").text(`${title}`);
+}
+
+// Back to top
+$(window).scroll(function () {
+  if ($(this).scrollTop()) {
+    $('.btn-box').fadeIn();
+  } else {
+    $('.btn-box').fadeOut();
+  }
+});

result.html

@@ -0,0 +1,562 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <!-- Google Tag Manager -->
+  <script>(function (w, d, s, l, i) {
+      w[l] = w[l] || []; w[l].push({
+        'gtm.start':
+          new Date().getTime(), event: 'gtm.js'
+      }); var f = d.getElementsByTagName(s)[0],
+        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+    })(window, document, 'script', 'dataLayer', 'GTM-W3RJHTZ');</script>
+  <!-- End Google Tag Manager -->
+
+  <!-- Google tag (gtag.js)  ga4-->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-97LXHMH1GQ"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+
+    gtag('config', 'G-97LXHMH1GQ');
+  </script>
+
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1" />
+  <meta http-equiv="Cache-Control" content="no-cache" />
+  <meta name="copyright" content="2021 © 幸福空間 │ All Rights Reserved." />
+  <meta name="creation-date" content="2021-08-05 12:00:04 GTM+8" />
+  <meta name="description" content="滿足您幸福空間裝修預算需求的最佳方案！輸入您的裝修需求類型與坪數，立即獲得量身定制的預算方案，並享受專人幸福經紀人的洽詢服務。" />
+  <meta name="distribution" content="Taiwan" />
+  <meta name="keywords" content="" />
+  <meta name="revisit-after" content="1 days" />
+  <meta name="robots" content="all" />
+  <meta name="format-detection" content="telephone=no" />
+
+  <meta property="og:description" content="滿足您幸福空間裝修預算需求的最佳方案！輸入您的裝修需求類型與坪數，立即獲得量身定制的預算方案，並享受專人幸福經紀人的洽詢服務。" />
+  <meta property="og:site_name" content="幸福空間" />
+  <meta property="og:title" content="幸福空間 - 裝修預算方案說明" />
+  <meta property="og:type" content="website" />
+  <meta property="og:locale" content="zh_TW" />
+
+  <title>幸福空間 - 裝修預算方案說明</title>
+
+  <link rel="icon" href="/hhh_index/images/favicon.ico" />
+  <!--<link rel="stylesheet" href="hhh_index/css/reset.css" /> -->
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
+    integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous" />
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
+  <!-- <link rel="stylesheet" href="css/jquery-ui.css"> -->
+  <!-- <link rel="stylesheet" type="text/css" href="hhh_index/css/slick.css" />
+  <link rel="stylesheet" type="text/css" href="hhh_index/css/slick-theme.css" /> -->
+  <!-- <link rel="stylesheet" href="hhh_index/css/list-style.css" /> -->
+  <link rel="stylesheet" href="./css/style.css?a=2" />
+  <link rel="stylesheet" href="./css/request.css?v=2" />
+  <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
+
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500&display=swap" rel="stylesheet" />
+
+  <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "LocalBusiness",
+        "@id": "https://hhh.com.tw/",
+        "image": ["https://hhh.com.tw/_nuxt/img/def1b0a.svg"],
+        "name": "幸福空間股份有限公司",
+        "address": "110台北市信義區菸廠路88號五樓之6",
+        "url": "https://hhh.com.tw/",
+        "telephone": "+886-2-6617-0123"
+      }
+    </script>
+
+  <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "Organization",
+        "url": "https://hhh.com.tw/",
+        "logo": "https://hhh.com.tw/_nuxt/img/def1b0a.svg",
+        "name": "幸福空間",
+        "sameAs": [
+          "https://www.facebook.com/hhhfb/",
+          "https://page.line.me/ovs4341s",
+          "https://www.youtube.com/user/gorgeousspace",
+          "https://www.instagram.com/gorgeous_space/"
+        ],
+        "contactPoint": [
+          {
+            "@type": "ContactPoint",
+            "areaServed": "TW",
+            "telephone": "+886-2-6617-0123",
+            "contactType": "customer service",
+            "availableLanguage": "Chinese"
+          }
+        ]
+      }
+    </script>
+
+  <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        "name": "幸福空間－室內設計、裝潢、居家生活、影音平台",
+        "author": "幸福空間",
+        "url": "https://hhh.com.tw/",
+        "potentialAction": {
+          "@type": "SearchAction",
+          "target": "https://hhh.com.tw/search/lists/case/{search_term_string}-keyword/",
+          "query-input": "required name=search_term_string"
+        }
+      }
+    </script>
+</head>
+
+<body style="overflow-x: hidden" id="top" class="wholeBody">
+  <!-- 結果頁面 -->
+  <div class="container-fluid" style="background: #FAFAFA;">
+    <div class="container result-content">
+      <a href="https://hhh.com.tw/" class="d-flex justify-content-center logo">
+        <img alt="logo" src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" />
+      </a>
+      <h3 class="bg-text">BudgetBudget</h3> <!-- 背景文字 -->
+      <div class="row line">
+        <div class="col-12 col-lg-8 position-relative">
+          <!-- 只有全室裝修需顯示分類 tab -->
+          <ul class="tab-list">
+            <li>
+              <a href="javascript:;" class="tab-item">簡裝</a>
+            </li>
+            <li>
+              <a href="javascript:;" class="tab-item">精裝</a>
+            </li>
+            <li>
+              <a href="javascript:;" class="tab-item">豪華</a>
+            </li>
+            <div id="underline"></div>
+          </ul>
+          <div class="card-item">
+            <div class="row main-info">
+              <div class="col-6 col-xl-5 d-flex align-items-center justify-content-center">
+                <div class="chart-box">
+                  <canvas id="chart"></canvas>
+                </div>
+                <p class="chart-text">
+                  <span id="total_value">8500</span> 萬
+                </p>
+                <p class="chart-text range">
+                  <span id="total_min">800</span> 萬 <br>
+                  <span class="tilde">～</span> <br>
+                  <span id="total_max">1500</span> 萬
+                </p>
+              </div>
+              <div class="col-5 d-flex align-items-center justify-content-center h-100">
+                <div class="price-card">
+                  <ul class="main">
+                    <li>基礎工程 <span id="basic_engineering"></span> 萬</li>
+                    <li class="d-inline d-sm-none">/</li>
+                    <li>硬體工程 <span id="hardware_engineering"></span> 萬</li>
+                    <li>軟裝家居 <span id="decorated_home"></span> 萬</li>
+                    <li class="d-inline d-sm-none">/</li>
+                    <li>家電設備 <span id="home_appliances"></span> 萬</li>
+                  </ul>
+                  <ul class="partial">
+                    <li>
+                      <p>廚房翻新</p> <span id="kitchen_renovation"></span> 萬
+                    </li>
+                    <li>
+                      <p>浴室翻新</p> <span id="bathroom_refurbishment"></span> 萬
+                    </li>
+                    <li>
+                      <p>天花板</p> <span id="ceiling"></span> 萬
+                    </li>
+                    <li>
+                      <p>門窗翻新</p> <span id="windows_and_doors"></span> 萬
+                    </li>
+                    <li>
+                      <p>地板翻新</p> <span id="floor_renewal"></span> 萬
+                    </li>
+                  </ul>
+                  <small>僅供參考，實際以設計師報價為主。</small>
+                </div>
+              </div>
+              <div class="col-12 info-card">
+                <div class="row">
+                  <div class="col-12 col-lg-3 border-end d-flex align-items-center px-md-4">
+                    <ul>
+                      <li>裝修所在地：<span id="city_val">台北市</span></li>
+                      <li>坪數：<span id="area_val">28</span> 坪</li>
+                    </ul>
+                  </div>
+                  <div class="col-12 col-lg-6 border-end caption">
+                    <section>
+                      <h3 id="ca_type">全室裝修</h3>
+                      <small id="ca_type_description">適合新成屋、<br>老屋翻新</small>
+                    </section>
+                    <p id="ca_type_content">說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容</p>
+                  </div>
+                  <div class="col-12 col-lg-3 d-flex">
+                    <button class="reset-btn">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
+                        class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
+                        <path
+                          d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
+                      </svg>
+                      重新填寫
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-12 col-lg-4 info-item">
+          <h3 class="mb-1">幸福經紀人將透過簡訊與手機 <br> 與您聯繫並確認您的裝修設計需求</h3>
+          <h4 class="ligh-text">節省 50% 時間，幸福輕裝修，實現夢想生活</h4>
+          <div class="img-block">
+            <img src="./img/result-bg.png" alt="">
+            <a href="https://hhh.com.tw/minordecor" target="_blank" class="link-img">
+              <img src="./img/Group 156.svg" alt="" class="btn">
+              <img src="./img/Group 157.svg" alt="" class="text">
+              <img src="./img/Ellipse 14.svg" alt="" class="bg">
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div class="style-list">
+        <p>您可以先看看喜歡的裝修風格</p>
+        <div class="row">
+          <div class="col-6 col-md-3">
+            <a href="https://hhh.com.tw/photos/lists/modern-style/" target="_blank">
+              <img src="https://hhh.com.tw/assets/images/photo/style/modern.jpg" alt="" class="img-fluid">
+              <p>現代風</p>
+            </a>
+          </div>
+          <div class="col-6 col-md-3">
+            <a href="https://hhh.com.tw/photos/lists/nordic-style/" target="_blank">
+              <img src="https://hhh.com.tw/assets/images/photo/style/nordic.jpg" alt="" class="img-fluid">
+              <p>北歐風</p>
+            </a>
+          </div>
+          <div class="col-6 col-md-3 mt-3 mt-md-0">
+            <a href="https://hhh.com.tw/photos/lists/american-style/" target="_blank">
+              <img src="https://hhh.com.tw/assets/images/photo/style/american.jpg" alt="" class="img-fluid">
+              <p>美式風</p>
+            </a>
+          </div>
+          <div class="col-6 col-md-3 mt-3 mt-md-0">
+            <a href="https://hhh.com.tw/photos/lists/mashup-style/" target="_blank">
+              <img src="https://hhh.com.tw/assets/images/photo/style/mashup.jpg" alt="" class="img-fluid">
+              <p>混搭風</p>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 動態載入 -->
+  <!-- <div id="btn-box"></div>
+  <div id="footer"></div> -->
+
+  <!-- Google Tag Manager (noscript) -->
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W3RJHTZ" height="0" width="0"
+      style="display:none;visibility:hidden"></iframe></noscript>
+  <!-- End Google Tag Manager (noscript) -->
+
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
+    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+    integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
+    crossorigin="anonymous"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+  <script src="
+  https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.min.js
+  "></script>
+  <!-- <script src="./js/index.js"></script> -->
+  <script>
+    let resultData = JSON.parse(localStorage.getItem('calculator_result')); // 取得運算結果
+    if (resultData) {
+      setValue(resultData.ca_type);
+    }
+
+    var tabType = ''; // 全室裝修類別
+    var totalValue = 0; // 總金額
+    var chartData = []; // 圖表數值
+    var chartLabels = [];
+    var chartCutout = null;
+
+    // 將數字四捨五入並轉成千分位表示
+    function formatNumber(number) {
+      let result = (number / 10000).toFixed(1); // 保留小數點後一位
+      result = result.toLocaleString(); // 轉成千分位
+      return result;
+    }
+
+    function setValue(type) {
+      console.log('resultData', resultData);
+      let data = resultData;
+      chartData = []; // 一開始先清空
+
+      $('#ca_type').text(data.ca_type)
+      $('#city_val').text(data.city);
+      $('#area_val').text(data.area);
+
+      if (type !== "局部裝修") {
+        if ($(window).width() > 991) {
+          // 電腦版
+          chartCutout = 100;
+        } else {
+          // 手機版
+          chartCutout = 70;
+        }
+        chartLabels = ['基礎工程', '硬體工程', '軟裝家居', '家電設備'];
+
+        $('.chart-text:first').show();
+        $('.chart-text.range').hide();
+        $('.price-card .main').show();
+        $('.price-card .partial').hide();
+      } else {
+        chartCutout = 120;
+        chartLabels = ['廚房翻新', '浴室翻新', '天花板', '門窗翻新', '地板翻新'];
+
+        $('.chart-text:first').hide();
+        $('.chart-text.range').show();
+        $('.price-card .main').hide();
+        $('.price-card .partial').css('display', 'grid');
+
+        $('#kitchen_renovation').text(data.kitchen_renovation);
+        $('#bathroom_refurbishment').text(data.bathroom_refurbishment);
+        $('#ceiling').text(data.ceiling);
+        $('#windows_and_doors').text(data.windows_and_doors);
+        $('#floor_renewal').text(data.floor_renewal);
+
+        $('#total_min').text(data.down_price);
+        $('#total_max').text(data.up_price);
+      }
+
+      if (type === "輕裝修") {
+        $('.tab-list').hide();
+        $('.link-img').show();
+        $('.img-block').show();
+        $('.ligh-text').show();
+        $('.main-info').removeClass('type');
+        $('#ca_type_description').text("適合新成屋");
+        $('#ca_type_content').text("不更動房間格局、含系統櫃、軟裝、地板工程等");
+        $('#basic_engineering').text(formatNumber(data.basic_engineering)); // 基礎工程
+        $('#hardware_engineering').text(formatNumber(data.hardware_engineering)); // 硬體工程
+        $('#decorated_home').text(formatNumber(data.decorated_home)); // 軟裝家居
+        $('#home_appliances').text(formatNumber(data.home_appliances)); // 家電設備
+
+        chartData.push(data.basic_engineering);
+        chartData.push(data.hardware_engineering);
+        chartData.push(data.decorated_home);
+        chartData.push(data.home_appliances);
+
+        totalValue = data.basic_engineering + data.hardware_engineering + data.decorated_home + data.home_appliances;
+        $('#total_value').text(formatNumber(totalValue));
+
+      } else if (type === "全室裝修") {
+        // 預設點擊簡裝
+        setTimeout(() => {
+          if (tabType === '') {
+            $('.tab-item:first').click();
+            return;
+          }
+        }, 100)
+
+        if ($(window).width() > 991) {
+          // 電腦版
+          $('.link-img').hide();
+          $('.img-block').show();
+        } else {
+          // 手機版
+          $('.img-block').hide();
+        }
+
+        $('.ligh-text').hide();
+        $('.main-info').addClass('type');
+        $('.tab-list').css('display', 'flex');
+        $('#ca_type_description').html("適合毛胚屋、<br> 老屋翻新");
+        $('#ca_type_content').text("不更動房間格局，含系統櫃、油漆、地板工程等");
+
+        if (tabType === "簡裝") {
+          updateData("type_basic", data);
+        } else if (tabType === "精裝") {
+          updateData("type_advanced", data);
+        } else if (tabType === "豪華") {
+          updateData("type_all", data);
+        }
+
+      } else if (type === "局部裝修") {
+
+        if ($(window).width() > 991) {
+          // 電腦版
+          chartCutout = 120;
+        } else {
+          // 手機版
+          chartCutout = 90;
+        }
+
+        if ($(window).width() > 991) {
+          // 電腦版
+          $('.link-img').hide();
+          $('.img-block').show();
+        } else {
+          // 手機版
+          $('.img-block').hide();
+        }
+
+        $('.tab-list').hide();
+        $('.link-img').hide();
+        $('.ligh-text').hide();
+        $('.main-info').removeClass('type');
+        $('#ca_type_description').text("");
+        $('#ca_type_content').text("只針對室內特定區域裝修，如廚房、衛浴空間等");
+
+        chartData.push(data.kitchen_renovation);
+        chartData.push(data.bathroom_refurbishment);
+        chartData.push(data.ceiling);
+        chartData.push(data.windows_and_doors);
+        chartData.push(data.floor_renewal);
+
+        // 計算總數範圍
+        let totalMin = 0;
+        let totalMax = 0;
+
+        for (let i = 0; i < chartData.length; i++) {
+          const [min, max] = chartData[i].split('-');
+          totalMin += parseInt(min);
+          totalMax += parseInt(max);
+        }
+
+        const totalRange = `${totalMin}-${totalMax}`;
+
+        // 圖表無法顯示範圍數值，需改為平均值(如局部裝修 18-28)
+        chartData = chartData.map(getAverage);
+      }
+
+      setChart(); // 繪製 chart 圖表
+    }
+
+    // 更新全室裝修數值
+    function updateData(type, data) {
+      console.log();
+      $('#basic_engineering').text(formatNumber(data[type].basic_engineering)); // 基礎工程
+      $('#hardware_engineering').text(formatNumber(data[type].hardware_engineering)); // 硬體工程
+      $('#decorated_home').text(formatNumber(data[type].decorated_home)); // 軟裝家居
+      $('#home_appliances').text(formatNumber(data[type].home_appliances)); // 家電設備
+      totalValue = data[type].basic_engineering + data[type].hardware_engineering + data[type].decorated_home + data[type].home_appliances;
+      $('#total_value').text(formatNumber(totalValue)); // 總金額
+
+      chartData.push(data[type].basic_engineering);
+      chartData.push(data[type].hardware_engineering);
+      chartData.push(data[type].decorated_home);
+      chartData.push(data[type].home_appliances);
+    }
+
+    // 將範圍轉換為平均值
+    function getAverage(range) {
+      const [min, max] = range.split('-');
+      return (parseInt(min) + parseInt(max)) / 2;
+    }
+
+    $('.tab-item').click(function () {
+      self.tabType = $(this).text();
+      setValue(resultData.ca_type);
+
+      // 下底線位移
+      $('.tab-item').addClass('active');
+      $('.tab-item').css('color', '#959595');
+      $(this).css('color', '#fff');
+      let linkOffset = $(this)[0].offsetLeft - 4;
+      $('#underline').animate({
+        left: linkOffset
+      }, 300);
+    });
+
+    // 設置下底線位置
+    function setUnderlinePosition() {
+      let activeLink = $('.tab-item.active');
+      let linkOffset = activeLink[0].offsetLeft - 4;
+      $('#underline').css('left', linkOffset);
+    }
+
+    // 監聽視窗寬度
+    $(window).resize(function () {
+      // 動態更新下底線位置
+      if (tabType !== "") {
+        setUnderlinePosition();
+      }
+    });
+
+    /* 圖表 chart.js */
+    var chart;
+    function setChart() {
+      let canvas = document.getElementById('chart'); // 獲取 <canvas> 元素
+      let ctx = canvas.getContext('2d');
+
+      // 檢查是否已經存在圖表，如果有則先銷毀
+      if (chart) {
+        chart.destroy();
+      }
+
+      chart = new Chart(ctx, { // 創建圖表
+        type: 'doughnut',
+        data: {
+          labels: chartLabels,
+          datasets: [{
+            data: chartData,
+            backgroundColor: [
+              'rgba(172, 166, 152, 1)',
+              'rgba(186, 151, 102, 1)',
+              'rgba(150, 140, 117, 1)',
+              'rgba(226, 208, 168, 1)',
+            ],
+            borderColor: [
+              'rgba(172, 166, 152, 1)',
+              'rgba(186, 151, 102, 1)',
+              'rgba(150, 140, 117, 1)',
+              'rgba(226, 208, 168, 1)',
+            ],
+            borderWidth: 1
+          }]
+        },
+        options: {
+          cutout: chartCutout, // 圖表線條寬度(數值越高越細)
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              display: false // 隱藏顏色說明
+            }
+          }
+        }
+      });
+    }
+
+
+    /* 重新填寫 */
+    $('.reset-btn').on('click', function () {
+
+
+      dataLayer.push({
+        'event': 'refill',
+        'btn_location': 'Calculator_Request_Page'
+      });
+
+      console.log('reset-btn');
+      window.location.href = "https://hhh.com.tw/calculator_request/index.html";
+    });
+  </script>
+</body>
+
+</html>