隨機輪播規則新增

about/about.css

@@ -21,12 +21,18 @@ body {
 body .arrow {
   position: fixed;
   right: 30px;
-  top: 400px;
+  top: 600px;
   width: 45px;
   height: 40px;
   z-index: 10;
 }
 
+@media screen and (max-width: 767px) {
+  body .arrow {
+    top: 500px;
+  }
+}
+
 body .arrow a {
   margin: 30px 0px;
 }
@@ -272,6 +278,28 @@ body .arrow:hover {
   }
 }
 
+#banner #banner-container .banner-des-about .banner-1 .btn {
+  color: #fff;
+  width: 60px;
+  height: 40px;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+#banner #banner-container .banner-des-about .banner-1 .btn :focus {
+  outline: 0 !important;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+#banner #banner-container .banner-des-about .banner-1 .btn img {
+  width: 24px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
+          filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
+}
+
 @media screen and (max-width: 767px) {
   #banner #banner-container .banner-des-about .banner-2 img {
     display: none;
@@ -292,6 +320,28 @@ body .arrow:hover {
   background: rgba(141, 194, 31, 0.8);
 }
 
+#banner #banner-container .banner-m .bannerm-1 .btn {
+  color: #fff;
+  width: 60px;
+  height: 40px;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+#banner #banner-container .banner-m .bannerm-1 .btn :focus {
+  outline: 0 !important;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+#banner #banner-container .banner-m .bannerm-1 .btn img {
+  width: 24px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
+          filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
+}
+
 @media screen and (max-width: 767px) {
   #banner #banner-container .banner-m .bannerm-1 {
     margin: 0;
@@ -401,7 +451,7 @@ body .arrow:hover {
 
 @media screen and (max-width: 767px) {
   #banner #banner-container .tab-content .sec01 .contact {
-    padding: 10vw 18px;
+    padding: 10vw 5px;
     padding-bottom: 15vw;
   }
 }
@@ -411,6 +461,21 @@ body .arrow:hover {
   color: #fff;
 }
 
+#banner #banner-container .tab-content .sec01 .contact table th {
+  width: 100px;
+  padding: .4rem .1rem;
+}
+
+@media screen and (max-width: 350px) {
+  #banner #banner-container .tab-content .sec01 .contact table th {
+    width: 35%;
+  }
+}
+
+#banner #banner-container .tab-content .sec01 .contact table td {
+  padding: .4rem .1rem;
+}
+
 #banner #banner-container .tab-content .sec02 .col-lg-4,
 #banner #banner-container .tab-content .sec04 .col-lg-4 {
   position: relative;
@@ -781,4 +846,309 @@ body .arrow:hover {
 #footer p {
   color: #fff;
 }
+
+#modal-dialog {
+  width: 90vw;
+}
+
+#modal-dialog .modal-content {
+  width: 80vw;
+}
+
+@media screen and (max-width: 767px) {
+  #modal-dialog .modal-content {
+    width: 90vw;
+  }
+}
+
+#light-box #form-lightbox {
+  width: 70vw;
+  margin: 0 auto;
+}
+
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox {
+    width: 80vw;
+  }
+}
+
+#light-box #form-lightbox .form-title {
+  margin: 0 auto;
+  color: #5c5248;
+}
+
+#light-box #form-lightbox .form-title h1 {
+  text-align: center;
+  font-size: 32px;
+  font-weight: 900;
+}
+
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox .form-title h1 {
+    font-size: 24px;
+  }
+}
+
+@media screen and (max-width: 350px) {
+  #light-box #form-lightbox .form-title h1 {
+    font-size: 20px;
+  }
+}
+
+#light-box #form-lightbox .form-title h1 span {
+  font-size: 38px;
+}
+
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox .form-title h1 span {
+    font-size: 28px;
+  }
+}
+
+@media screen and (max-width: 350px) {
+  #light-box #form-lightbox .form-title h1 span {
+    font-size: 24px;
+  }
+}
+
+#light-box #form-lightbox .contact-text {
+  margin: 0 auto;
+}
+
+#light-box #form-lightbox .contact-text .text-p {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+@media screen and (max-width: 350px) {
+  #light-box #form-lightbox .contact-text .text-p {
+    font-size: 14px;
+  }
+}
+
+#light-box #form-lightbox .contact-form1 {
+  margin: 0 auto;
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form {
+  margin-top: 10px;
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form .col-lg-2 .divider {
+  position: relative;
+  width: 1px;
+  height: 100%;
+  border-left: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #loc,
+#light-box #form-lightbox .contact-form1 #contact-form #type,
+#light-box #form-lightbox .contact-form1 #contact-form #modal,
+#light-box #form-lightbox .contact-form1 #contact-form #budget,
+#light-box #form-lightbox .contact-form1 #contact-form #square,
+#light-box #form-lightbox .contact-form1 #contact-form #style,
+#light-box #form-lightbox .contact-form1 #contact-form #datepicker,
+#light-box #form-lightbox .contact-form1 #contact-form #email,
+#light-box #form-lightbox .contact-form1 #contact-form #name,
+#light-box #form-lightbox .contact-form1 #contact-form #phone,
+#light-box #form-lightbox .contact-form1 #contact-form #gender {
+  width: 100%;
+  height: 50px;
+  margin: 10px 0;
+  padding-left: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  padding: 10px 15px;
+  font-size: 16px;
+  border-radius: 3px;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: url(../img/icondown.webp) 95% 50% no-repeat scroll transparent;
+  background-size: 10px 10px;
+  background-color: #fff;
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #form-left {
+  margin: 0 auto;
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #form-left #rooms,
+#light-box #form-lightbox .contact-form1 #contact-form #form-left #livingroom,
+#light-box #form-lightbox .contact-form1 #contact-form #form-left #bathroom {
+  width: 28.8%;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  height: 50px;
+  margin: 15px 0;
+  padding-right: 50px;
+  padding: 10px 15px;
+  font-size: 16px;
+  border-radius: 3px;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: url(../img/icondown.webp) 85% 50% no-repeat scroll transparent;
+  background-size: 10px 10px;
+  background-color: #fff;
+}
+
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox .contact-form1 #contact-form #form-left #rooms,
+  #light-box #form-lightbox .contact-form1 #contact-form #form-left #livingroom,
+  #light-box #form-lightbox .contact-form1 #contact-form #form-left #bathroom {
+    width: 31%;
+  }
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #form-left #square,
+#light-box #form-lightbox .contact-form1 #contact-form #form-left #datepicker {
+  background: none;
+  background-color: #fff;
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #form-right {
+  margin: 0 auto;
+}
+
+@media screen and (min-width: 1025px) {
+  #light-box #form-lightbox .contact-form1 #contact-form #form-right hr {
+    display: none;
+  }
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #fb-button {
+  margin-top: 12px;
+  width: 100%;
+  height: 50px;
+  border: 1px solid #3b5998;
+  text-align: right;
+  padding-right: 60px;
+  background-size: 32px 32px;
+  border-radius: 3px;
+  background-color: #fff;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+  position: relative;
+}
+
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox .contact-form1 #contact-form #fb-button {
+    margin: 10px 0;
+  }
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #fb-button p {
+  position: absolute;
+  top: 1vw;
+  left: 12vw;
+  color: #626262;
+}
+
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox .contact-form1 #contact-form #fb-button p {
+    left: 32vw;
+    top: 3vw;
+  }
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #fb-button #line {
+  position: absolute;
+  color: #9b9b9b;
+  opacity: 0.8;
+  left: 8vw;
+  top: -0.1vw;
+}
+
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox .contact-form1 #contact-form #fb-button #line {
+    left: 20vw;
+  }
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #fb-button img {
+  position: absolute;
+  left: 50px;
+  top: 10px;
+  width: 32px;
+  height: 32px;
+  -webkit-filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
+          filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
+}
+
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox .contact-form1 #contact-form #fb-button img {
+    left: 20px;
+  }
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #fb-button:hover {
+  background-color: #2a4f91;
+  color: #fff;
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #fb-button:hover img {
+  -webkit-filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
+          filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #fb-button:hover p {
+  color: #fff;
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #fb-button:hover #line {
+  color: #fff;
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form a {
+  text-decoration: none;
+  color: #ee751b;
+  font-weight: 900;
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #email,
+#light-box #form-lightbox .contact-form1 #contact-form #name,
+#light-box #form-lightbox .contact-form1 #contact-form #phone {
+  background: none;
+  background-color: #fff;
+}
+
+#light-box #form-lightbox .btn {
+  margin: 50px auto;
+  border: none;
+  padding: 15px;
+  background: #edbc96;
+  color: #4b515e;
+  font-size: 20px;
+  width: 400px;
+  border-radius: 10px;
+}
+
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox .btn {
+    width: 100%;
+  }
+}
+
+#light-box #form-lightbox .btn:hover {
+  color: #fff;
+  background-color: #745c54;
+}
+
+#light-box #form-lightbox .form-btn {
+  text-align: center;
+  position: relative;
+  width: 70vw;
+  margin: 0 auto;
+}
+
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox .form-btn {
+    width: 80vw;
+    margin: 0 auto;
+  }
+}
+
+#light-box #form-lightbox .form-btn #phone1 {
+  position: absolute;
+  left: 500px;
+}
 /*# sourceMappingURL=about.css.map */

about/about.scss

@@ -24,11 +24,13 @@ body {
     .arrow {
         position: fixed;
         right: 30px;
-        top: 400px;
+        top: 600px;
         width: 45px;
         height: 40px;
         z-index: 10;
-
+        @media screen and(max-width:$moblie) {
+            top: 500px;
+        }
         a {
             margin: 30px 0px;
         }
@@ -213,6 +215,23 @@ body {
             @media screen and(max-width:$moblie) {
                 display: none;
             }
+            .banner-1{
+                .btn{
+                    color:#fff;
+                    width: 60px;
+                    height: 40px;
+                    box-shadow:none;
+                    :focus{
+                        outline: 0 !important;
+                        box-shadow:none;
+                    }
+                    img{
+                        width: 24px;
+                        object-fit: cover;
+                        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
+                    }
+                }
+            }
             .banner-2 {
                 img {
                     @media screen and(max-width:$moblie) {
@@ -225,13 +244,28 @@ body {
                     margin-bottom: -52px;
                 }
             }
+            
         }
-
         .banner-m {
             @media screen and(min-width:$desktop) {
                 display: none;
             }
             .bannerm-1 {
+                .btn{
+                    color:#fff;
+                    width: 60px;
+                    height: 40px;
+                    box-shadow:none;
+                    :focus{
+                        outline: 0 !important;
+                        box-shadow:none;
+                    }
+                    img{
+                        width: 24px;
+                        object-fit: cover;
+                        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
+                    }
+                }
                 @media screen and(max-width:$moblie) {
                     margin: 0;
                 }
@@ -324,13 +358,26 @@ body {
                     background-blend-mode: overlay;
                     word-break: break-all;
                     @media screen and(max-width:$moblie) {
-                        padding:10vw 18px;
+                        padding:10vw 5px;
                         padding-bottom: 15vw;
                     }
                     a {
                         text-decoration: none;
                         color: #fff;
                     }
+                    table{
+                        th{
+                            width: 100px;
+                            padding: .4rem .1rem;
+                            @media screen and(max-width:350px) {
+                                width: 35%;
+                            }
+                        }
+                        td{
+                            padding: .4rem .1rem;
+                       
+                        }
+                    }
                 }
 
             }
@@ -614,3 +661,239 @@ body {
         color: #fff;
     }
 }
+#modal-dialog{
+    width: 90vw;
+    .modal-content{
+        width: 80vw;
+        @media screen and(max-width:$moblie) {
+            width: 90vw;
+        }
+    }
+}
+#light-box{
+
+    #form-lightbox{
+        width: 70vw;
+        margin: 0 auto;
+        @media screen and(max-width:$moblie) {
+            width: 80vw;
+        }
+        .form-title {
+            margin: 0 auto;
+            color: #5c5248;
+            
+            h1 {
+                text-align: center;
+                font-size: 32px;
+                font-weight: 900;
+                @media screen and(max-width:$moblie) {
+                    font-size: 24px;
+                }
+                @media screen and(max-width:350px) {
+                    font-size: 20px;
+                }
+                span{
+                    font-size:38px;
+                    @media screen and(max-width:$moblie) {
+                        font-size:28px;
+                    }
+                    @media screen and(max-width:350px) {
+                        font-size: 24px;
+                    }
+                }
+            }
+        }
+        .contact-text {
+            margin: 0 auto;
+   
+
+            .text-p {
+                font-size: 16px;
+                font-weight: 600;
+                @media screen and(max-width:350px) {
+                    font-size: 14px;
+                }
+            }
+        }
+        .contact-form1{
+ 
+        margin: 0 auto;
+            #contact-form {
+                margin-top: 10px;
+                .col-lg-2{
+                   .divider{
+                       position: relative;
+                       width: 1px;
+                       height:100%;
+                       border-left: 1px solid rgba(0,0,0,0.12);
+                   }
+                }
+                #loc,
+                #type,
+                #modal,
+                #budget,
+                #square,
+                #style,
+                #datepicker,
+                #email,
+                #name,
+                #phone,
+                #gender {
+                    width: 100%;
+                    height: 50px;
+                    margin: 10px 0;
+                    padding-left: 10px;
+                    border: 1px solid rgba(0, 0, 0, 0.3);
+                    padding: 10px 15px;
+                    font-size: 16px;
+                    border-radius: 3px;
+                    appearance: none;
+                    background: url(../img/icondown.webp) 95% 50% no-repeat scroll transparent;
+                    background-size: 10px 10px;
+                    background-color: #fff;
+                }
+                #form-left {
+                    margin: 0 auto;
+                    #rooms,
+                    #livingroom,
+                    #bathroom {
+                        width: 28.8%;
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                        height: 50px;
+                        margin: 15px 0;
+                        padding-right: 50px;
+                        padding: 10px 15px;
+                        font-size: 16px;
+                        border-radius: 3px;
+                        appearance: none;
+                        background: url(../img/icondown.webp) 85% 50% no-repeat scroll transparent;
+                        background-size: 10px 10px;
+                        background-color: #fff;
+                        @media screen and(max-width:$moblie) {
+                            width: 31%;
+                        }
+                    }
+                    #square,
+                    #datepicker {
+                        background: none;
+                        background-color: #fff;
+                    }
+                }
+                #form-right {
+                    margin: 0 auto;
+                    hr{
+                        @media screen and(min-width:$desktop) {
+                            display: none;
+                        }
+                    }
+                }
+                #fb-button {
+                    margin-top: 12px;
+                    width: 100%;
+                    height: 50px;
+                    border: 1px solid #3b5998;
+                    text-align: right;
+                    padding-right: 60px;
+                    background-size: 32px 32px;
+                    border-radius: 3px;
+                    background-color: #fff;
+                    transition: 0.3s;
+                    position: relative;
+                    @media screen and(max-width:$moblie) {
+                        margin: 10px 0;
+                    }
+                    p {
+                        position: absolute;
+                        top:1vw;
+                        left:12vw;
+                        color: #626262;
+                        @media screen and(max-width:$moblie) {
+                            left:32vw;
+                            top:3vw;
+                        }
+                    }
+                    #line {
+                        position: absolute;
+                        color: #9b9b9b;
+                        opacity: 0.8;;
+                        left:8vw;
+                        top:-0.1vw;
+                        @media screen and(max-width:$moblie) {
+                            left:20vw;
+                        }
+                       
+                    }
+                    img {
+                        position: absolute;
+                        left: 50px;
+                        top: 10px;
+                        width: 32px;
+                        height: 32px;
+                        @media screen and(max-width:$moblie) {
+                            left: 20px;
+                        }
+                        filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
+                    }
+                    &:hover {
+                        background-color: #2a4f91;
+                        color: #fff;
+                        img {
+                            filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
+                        }
+                        p {
+                            color: #fff;
+                        }
+            
+                        #line {
+                            color: #fff;
+                        }
+                    }
+                }
+                a {
+                    text-decoration: none;
+                    color: #ee751b;
+                    font-weight: 900;
+                }
+            
+                #email,
+                #name,
+                #phone {
+                    background: none;
+                    background-color: #fff;
+                }
+            }
+        }
+        .btn {
+            margin: 50px auto;
+            border: none;
+            padding: 15px;
+            background: #edbc96;
+            color: #4b515e;
+            font-size: 20px;
+            width: 400px;
+            border-radius: 10px;
+            @media screen and(max-width:$moblie) {
+                width: 100%;
+            }
+            &:hover {
+                color: #fff;
+                background-color: #745c54;
+            }
+        }
+        
+        .form-btn {
+            text-align: center;
+            position: relative;
+            width: 70vw;
+            margin: 0 auto;
+            @media screen and(max-width:$moblie) {
+                width: 80vw;
+                margin: 0 auto;
+            }
+            #phone1 {
+                position: absolute;
+                left: 500px;
+            }
+        }
+    }
+}

about/goto2.js

@@ -98,38 +98,45 @@ $(document).ready(function () {
                         <table class="table text-white">\
                             <tbody>\
                                 <tr>\
-                                    <td class="w-75">\
-                                        <span>免付費電話／</span>  '+ msg[i].TollFreeCall + '\
+                                <th scope="row" class="">免付費電話／</th>\
+                                    <td class="">\
+                                    <a target="_blank" href="tel: '+ msg[i].TollFreeCall + '"> '+ msg[i].TollFreeCall + '</a>\
                                     </td>\
                                 </tr>\
                                 <tr>\
+                                <th scope="row" class="">電.&emsp;&emsp;&ensp;話／</th>\
                                     <td>\
-                                        <span>電話／</span>'+ msg[i].Telephone + '\
+                                       '+ msg[i].Telephone + '\
                                     </td>\
                                 </tr>\
                                 <tr>\
+                                <th scope="row" class="">地.&emsp;&emsp;&ensp;址／</th>\
                                     <td>\
-                                        <span>地址／</span>'+ msg[i].Address + '\
+                                        '+ msg[i].Address + '\
                                     </td>\
                                 </tr>\
                                 <tr>\
+                                <th scope="row" class="">傳.&emsp;&emsp;&ensp;真／</th>\
                                     <td>\
-                                        <span>傳真／</span>'+ msg[i].Fax + '\
+                                       '+ msg[i].Fax + '\
                                     </td>\
                                 </tr>\
                                 <tr>\
+                                    <th scope="row" class="">電&thinsp;子&thinsp;郵&thinsp;件／</th>\
                                     <td>\
-                                        <span>電子郵件／</span><a target="_blank" href="mailto:'+ msg[i].Email + '">' + msg[i].Email + '</a>\
+                                        <a target="_blank" href="mailto:'+ msg[i].Email + '">' + msg[i].Email + '</a>\
                                     </td>\
                                 </tr>\
                                 <tr>\
+                                <th scope="row" class="">網.&emsp;&emsp;&ensp;站／</th>\
                                     <td>\
-                                        <span>網站／</span><a target="_blank" href="'+ msg[i].Web + '">' + msg[i].Web + '</a>\
+                                        <a target="_blank" href="'+ msg[i].Web + '">' + msg[i].Web + '</a>\
                                     </td>\
                                 </tr>\
                                 <tr>\
+                                <th scope="row" class="">Facebook:</th>\
                                     <td>\
-                                        <span>Facebook:</span><a target="_blank" href="'+ msg[i].Facebook + '">' + msg[i].Facebook + '</a>\
+                                        <a target="_blank" href="'+ msg[i].Facebook + '">' + msg[i].Facebook + '</a>\
                                     </td>\
                                 </tr>\
                             </tbody>\
@@ -144,9 +151,11 @@ $(document).ready(function () {
                             </div>\
                             <div class="banner-0 col-9 text-white">\
                                 <div class="row">\
-                                    <div class="banner-1 col-9 align-self-end">\
+                                    <div class="banner-1 col-9 align-self-end pb-3">\
                                         <div style="font-weight: 900;" class="fs-2">'+ msg[i].WorkName + '</div>\
                                         <p><span class="fs-5">'+ msg[i].DesignerName + '</span>設計師</p>\
+                                        <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ msg[i].TollFreeCall + '"><img class="" src="../img/phone.png" alt=""></a>\</button>\
+                                        <button type="button" class="btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal">私訊</button>\
                                     </div>\
                                     <div class="banner-2 col-3 row justify-content-end px-0">\
                                     </div>\
@@ -161,13 +170,15 @@ $(document).ready(function () {
                             <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
                                 <img class="img-fluid" src="'+ msg[i].Designerimg + '" alt="">\
                             </div>\
-                            <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start">\
-                                <div class="banner1-1 pt-3 pb-5" style="font-weight: 900;">'+ msg[i].WorkName + '</div>\
-                                <p class="mb-0"><span class="fs-5">'+ msg[i].DesignerName + '</span>設計師</p>\
+                            <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start pb-3">\
+                                <div class="banner1-1 pt-3 pb-1" style="font-weight: 900;">'+ msg[i].WorkName + '</div>\
+                                <p class=""><span class="fs-5">'+ msg[i].DesignerName + '</span>設計師</p>\
+                                <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ msg[i].TollFreeCall + '"><img class="" src="../img/phone.png" alt=""></a>\</button>\
+                                <button type="button" class="btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal">私訊</button>\
                              </div>\
                         </div>';
 
-                        console.log(msg[i].workimg.length)
+                     
                         for (var j = 0; j < msg[i].workimg.length; j++) {
                             aboutImg += ' \
                             <div class="secimg col-lg-4 mx-0 px-0">\
@@ -227,7 +238,7 @@ $(document).ready(function () {
                         <img class="banner-img" id="img_id"  src="'+ msg[i].workimg[0].img + '" alt="">\
                        ';
                        webtitle += ' \
-                       幸福空間::: 2021 觀眾最愛設計師 | 滿足你期待回家的夢想推手|'+ msg[i].DesignerName +'設計師\
+                       幸福空間::: 2022 觀眾最愛設計師 | 滿足你期待回家的夢想推手|'+ msg[i].DesignerName +'設計師\
                       ';
 
                         $('.sec03-1').html(aboutViedeo);

about/index.html

@@ -8,7 +8,7 @@
     <meta name="description" content=":::幸福空間::: 2021 觀眾最愛設計師 | 滿足你期待回家的夢想推手">
     <meta name="keywords" content="幸福空間, 2021, 觀眾最愛, 設計師, 家, 夢想, 滿足">
     <meta property="og:description" content="幸福溫馨氛圍營造、設計創意源源不絕、機能動線超強規劃，為你創造夢想中的居家！" />
-    <meta property="og:site_name" content=":::幸福空間::: 2021 觀眾最愛設計師 | 滿足你期待回家的夢想推手" />
+    <meta property="og:site_name" content=":::幸福空間::: 2022 觀眾最愛設計師 | 滿足你期待回家的夢想推手" />
     <title id="webtitle"></title>
     
 
@@ -132,7 +132,6 @@
                             aria-controls="pills-contact" aria-selected="false">秘技分享</button>
                     </li>
                 </ul>
-           
             <div class="tab-content" id="pills-tabContent">
                 <div class="sec01 tab-pane fade show active" id="pills-home" role="tabpanel"
                     aria-labelledby="pills-home-tab">
@@ -587,6 +586,182 @@
 
         // });
     </script>
+    
+        <!-- Modal -->
+        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-xl">
+                <div class="modal-content">
+                    <div class="modal-header border-0">
+                        <h5 class="modal-title" id="exampleModalLabel"></h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div id="light-box">
+                            <div id="form-lightbox">
+                                <div class="form-title">
+                                    <h1>已經服務超過<span>14392</span>個家庭</h1>
+                                    <h1>打造夢想中的完美居家生活</h1>
+                                    <h1>即刻啟動!</h1>
+                                </div>
+                                <div class="contact-text">
+                                    <div class="text-p">請撥打全台免付費專線<span style="opacity: 0;">11</span><span id="phone1"
+                                            style="color: #ee751b; font-weight:900;"> 0800-366-086</span></div>
+                                    <div class="text-p">或填寫以下資料，專人將盡速與您聯繫</div>
+                                </div>
+                                <form class="contact-form1">
+                                    <input type="hidden" name="version" id="version" value="">
+                                    <div id="contact-form" name="myForm">
+                                        <div class="row">
+                                            <div id="form-left" class="col-lg-5">
+                                                <select name="loc" id="loc" required>
+                                                    <option value="" disabled selected="selected">地區</option>
+                                                    <option class="option">基隆市</option>
+                                                    <option class="option">台北市</option>
+                                                    <option class="option">新北市</option>
+                                                    <option class="option">桃園市</option>
+                                                    <option class="option">新竹縣</option>
+                                                    <option class="option">新竹市</option>
+                                                    <option class="option">苗栗縣</option>
+                                                    <option class="option">台中市</option>
+                                                    <option class="option">彰化縣</option>
+                                                    <option class="option">南投縣</option>
+                                                    <option class="option">雲林縣</option>
+                                                    <option class="option">嘉義縣</option>
+                                                    <option class="option">嘉義市</option>
+                                                    <option class="option">台南市</option>
+                                                    <option class="option">高雄市</option>
+                                                    <option class="option">屏東縣</option>
+                                                    <option class="option">宜蘭縣</option>
+                                                    <option class="option">花蓮縣</option>
+                                                    <option class="option">台東縣</option>
+                                                    <option class="option">澎湖縣</option>
+                                                </select>
+                                                <select name="h_class" id="type" required>
+                                                    <option value="" disabled selected="selected">房屋類型</option>
+                                                    <option class="option">預售屋</option>
+                                                    <option class="option">中古屋</option>
+                                                    <option class="option">新成屋</option>
+                                                    <option class="option">毛胚屋</option>
+                                                    <option class="option">自地自建</option>
+                                                </select>
+                                                <select name="type" id="modal" required>
+                                                    <option value="" disabled selected="selected">房屋型態</option>
+                                                    <option class="option">透天</option>
+                                                    <option class="option">電梯華廈</option>
+                                                    <option class="option">公寓</option>
+                                                    <option class="option">平房</option>
+                                                    <option class="option">民宿</option>
+                                                    <option class="option">商空</option>
+                                                    <option class="option">其他</option>
+                                                </select>
+                                                <select name="budget" id="budget" required>
+                                                    <option value="" disabled selected="selected">裝修預算</option>
+                                                    <option class="option">50~100萬</option>
+                                                    <option class="option">100~200萬</option>
+                                                    <option class="option">200~300萬</option>
+                                                    <option class="option">300萬~400萬</option>
+                                                    <option class="option">400~500萬</option>
+                                                    <option class="option">500萬以上</option>
+                                                </select>
+                                                <input name="size" type="text" id="square" placeholder="請輸入坪數" required>
+                                                <select name="bed_num" id="rooms" required style="margin-right:1.5vw">
+                                                    <option class="option" value="1">1房</option>
+                                                    <option class="option" value="2" selected>2房</option>
+                                                    <option class="option" value="3">3房</option>
+                                                    <option class="option" value="4">4房</option>
+                                                    <option class="option" value="5">5房</option>
+                                                    <option class="option" value="6">6房</option>
+                                                    <option class="option" value="7">7房</option>
+                                                    <option class="option" value="8">8房</option>
+                                                </select>
+                                                <select name="liv_num" id="livingroom" required
+                                                    style="margin-right:1.5vw">
+                                                    <option class="option" value="1">1廳</option>
+                                                    <option class="option" value="2" selected>2廳</option>
+                                                </select>
+                                                <select name="bath_num" id="bathroom" required>
+                                                    <option class="option" value="1" selected>1衛</option>
+                                                    <option class="option" value="2">2衛</option>
+                                                    <option class="option" value="3">3衛</option>
+                                                    <option class="option" value="4">4衛</option>
+                                                    <option class="option" value="5">5衛</option>
+                                                    <option class="option" value="6">6衛</option>
+                                                    <option class="option" value="7">7衛</option>
+                                                    <option class="option" value="8">8衛</option>
+                                                </select>
+                                                <select name="style" id="style" required>
+                                                    <option value="" disabled selected="selected">風格類型</option>
+                                                    <option class="option">現代風</option>
+                                                    <option class="option">鄉村風</option>
+                                                    <option class="option">古典風</option>
+                                                    <option class="option">休閒多元</option>
+                                                    <option class="option">美式風</option>
+                                                    <option class="option">奢華風</option>
+                                                    <option class="option">新古典</option>
+                                                    <option class="option">日式禪風</option>
+                                                    <option class="option">東方風</option>
+                                                    <option class="option">混搭風</option>
+                                                    <option class="option">前衛風</option>
+                                                    <option class="option">北歐風</option>
+                                                    <option class="option">工業風</option>
+                                                    <option class="option">異國風</option>
+                                                </select>
+                                                <input name="prefer_date" class="datepicker" type="text" id="datepicker"
+                                                    placeholder="預選裝修日期" required>
+                                            </div>
+                                            <div class="col-lg-2 my-1 my-md-0 divider-wrapper d-flex justify-content-center align-items-center">
+                                                <div class="divider"></div>
+                                            </div>
+                                            <div id="form-right" class="col-lg-5">
+                                                <hr>
+                                                <div id="fb_login">
+                                                    <button id="fb-button"><img src="../img/facebook.png" alt="">
+                                                        <span id="line" style=" font-size: 30px;">｜</span>
+                                                        <p>使用fb填入信箱與姓名</p>
+                                                    </button>
+                                                    <span id="FB_STATUS_2"></span>
+                                                </div>
+                                                <!-- <div id="fb_login">
+                                        <fb:login-button id="fb-button" scope="public_profile,email"
+                                            onlogin="checkLoginState();" data-button-type="continue_with" data-size="large">
+                                            使用FB填入信箱與姓名
+                                        </fb:login-button>
+                                        <div id="status"></div>
+                                    </div> -->
+
+                                                <input type="email" name="email" id="email" placeholder="請輸入信箱"
+                                                    required>
+                                                <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
+                                                <input type="text" name="phone" id="phone" placeholder="請輸入行動電話"
+                                                    pattern="09\d{2}\d{6}" required>
+                                                <select name="gender" id="gender" required>
+                                                    <option value="" disabled selected="selected">性別</option>
+                                                    <option class="option">男</option>
+                                                    <option class="option">女</option>
+                                                </select>
+                                                <div>
+
+                                                    <input type="checkbox" style="margin:30px 10px;" id="checkbox"
+                                                        checked><label for="agree" style="width: 40px;">同意</label><a
+                                                        target="https://hhh.com.tw/about/privacy_policy/"
+                                                        href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                    </div>
+                                    <div class="form-btn">
+                                        <input class="btn" style="opacity: 1;" type="submit" value="送出">
+
+                                    </div>
+                                </form>
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
 </body>
 
 </html>

designer4.json

@@ -5,6 +5,7 @@
         "WorkName": "\u6d69\u5ba4\u8a2d\u8a08",
         "DesignerName": "\u90b1\u70ab\u9054",
         "Designerimg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_278_20210308183145.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/278.jpg?v12",
         "WorkLoc": "\u5317\u5340",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u8001\u5c4b\u7ffb\u65b0,\u6a13\u4e2d\u6a13,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u9109\u6751\u98a8,\u4f11\u9592\u591a\u5143,\u7f8e\u5f0f\u98a8,\u4f4e\u8abf\u5962\u83ef,\u65b0\u53e4\u5178,\u6df7\u642d\u98a8",
@@ -457,6 +458,7 @@
         "WorkName": "\u8212\u6770\u5ba4\u5167\u88dd\u4fee\u8a2d\u8a08\u6709\u9650\u516c\u53f8",
         "DesignerName": "\u9673\u742c\u5a77",
         "Designerimg": "https://cloud.hhh.com.tw/gs/designer/designer553_00-1.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/507.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u4e2d\u5340,\u6d77\u5916\u5730\u5340",
         "WorkType": "\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u5be6\u54c1\uff0f\u6a23\u54c1\u5c4b,\u5546\u696d\u7a7a\u9593",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u9109\u6751\u98a8,\u53e4\u5178\u98a8,\u4f11\u9592\u591a\u5143,\u7f8e\u5f0f\u98a8,\u5962\u83ef\u98a8,\u65b0\u53e4\u5178,\u6771\u65b9\u98a8,\u6df7\u642d\u98a8",
@@ -654,6 +656,7 @@
         "WorkName": "\u99a5\u7bc9\u6642\u5c1a\u8a2d\u8a08",
         "DesignerName": "\u6e6f\u93ae\u5b89",
         "Designerimg": "https://cloud.hhh.com.tw/gs/designer/designer471_00_01.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/423.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u4e2d\u5340,\u5b9c\u862d\u82b1\u6771",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64,\u8001\u5c4b\u7ffb\u65b0",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u9109\u6751\u98a8,\u4f11\u9592\u591a\u5143,\u5962\u83ef\u98a8,\u65b0\u53e4\u5178,\u65e5\u5f0f\u79aa\u98a8,\u5317\u6b50\u98a8",
@@ -900,6 +903,7 @@
         "WorkName": "\u4e0a\u7bc9\u7a7a\u9593\u8a2d\u8a08",
         "DesignerName": "\u9b4f\u5b50\u6db5",
         "Designerimg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_594_20200612181442.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/594.jpg?v12",
         "WorkLoc": "\u4e2d\u5340",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u6a13\u4e2d\u6a13,\u5be6\u54c1\uff0f\u6a23\u54c1\u5c4b,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u9109\u6751\u98a8,\u53e4\u5178\u98a8,\u4f11\u9592\u591a\u5143,\u7f8e\u5f0f\u98a8,\u5962\u83ef\u98a8,\u65b0\u53e4\u5178,\u65e5\u5f0f\u79aa\u98a8,\u6771\u65b9\u98a8,\u6df7\u642d\u98a8,\u524d\u885b\u98a8,\u5317\u6b50\u98a8,\u5de5\u696d\u98a8,\u7570\u570b\u98a8",
@@ -1176,6 +1180,7 @@
         "WorkName": "\u5143\u5747\u5236\u4f5c",
         "DesignerName": "\u99ac\u6137\u541b Maggie",
         "Designerimg": "https://cloud.hhh.com.tw/gs/designer/designer411_00.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/364.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u4e2d\u5340,\u5357\u5340,\u5b9c\u862d\u82b1\u6771,\u6d77\u5916\u5730\u5340",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u6a13\u4e2d\u6a13,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u5962\u83ef\u98a8,\u65b0\u53e4\u5178,\u65e5\u5f0f\u79aa\u98a8,\u6df7\u642d\u98a8,\u5317\u6b50\u98a8",
@@ -1457,6 +1462,7 @@
         "WorkName": "\u77e5\u57df\u8a2d\u8a08\u00d7\u4e00\u5df1\u7a7a\u9593\u5236\u4f5c",
         "DesignerName": "\u5289\u555f\u5168\u3001\u9673\u97fb\u5982\u3001\u65b9\u4eba\u51f1",
         "Designerimg": "https://cloud.hhh.com.tw/gs/designer/designer546_00_180329.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/500.jpg?v12",
         "WorkLoc": "\u5317\u5340\u3001\u6843\u5712\u3001\u65b0\u7af9",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5927\u576a\u6578,\u900f\u5929\u5225\u5885,\u6a13\u4e2d\u6a13,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64,\u8001\u5c4b\u7ffb\u65b0",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u4f11\u9592\u591a\u5143,\u7f8e\u5f0f\u98a8,\u6df7\u642d\u98a8,\u5317\u6b50\u98a8,\u5de5\u696d\u98a8",
@@ -2004,6 +2010,7 @@
         "WorkName": "\u79be\u96c5\u570b\u969b\u5ba4\u5167\u88dd\u4fee\u6709\u9650\u516c\u53f8",
         "DesignerName": "\u674e\u67d4\u7469",
         "Designerimg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_651_20190510172003.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/651.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u4e2d\u5340",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u6a13\u4e2d\u6a13,\u5be6\u54c1\uff0f\u6a23\u54c1\u5c4b,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64,\u5de5\u4f5c\u7a7a\u9593,\u9910\u98f2\u7a7a\u9593,\u6c11\u5bbf\u65c5\u9928,\u516c\u5171\u7a7a\u9593,\u8001\u5c4b\u7ffb\u65b0",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u9109\u6751\u98a8,\u53e4\u5178\u98a8,\u4f11\u9592\u591a\u5143,\u7f8e\u5f0f\u98a8,\u5962\u83ef\u98a8,\u65b0\u53e4\u5178,\u6771\u65b9\u98a8,\u6df7\u642d\u98a8,\u5317\u6b50\u98a8,\u5de5\u696d\u98a8,\u7570\u570b\u98a8",
@@ -2080,6 +2087,7 @@
         "WorkName": "\u5343\u7db5\u80e4\u7a7a\u9593\u8a2d\u8a08\u6709\u9650\u516c\u53f8",
         "DesignerName": "\u674e\u5343\u60e0",
         "Designerimg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_347_20190424182147.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/374.jpg?v12",
         "WorkLoc": "\u5357\u5340\u70ba\u4e3b,\u5317\u5340,\u6d77\u5916\u5730\u5340(\u8a2d\u8a08\u59d4\u8a17)",
         "WorkType": "\u6a19\u6e96\u683c\u5c40,\u5927\u576a\u6578,\u5c0f\u576a\u6578,\u6a13\u4e2d\u6a13,\u900f\u5929,\u6bdb\u676f\u5c4b\u6574\u5408\u8a2d\u8a08,\u8001\u5c4b\u7ffb\u65b0,\u5546\u696d\u7a7a\u9593",
         "WorkStyle": "\u4f11\u9592\u591a\u5143\u3001\u8212\u9069\u4eba\u6587\u3001\u5317\u6b50\u6975\u7c21\u3001\u9109\u6751\u5c45\u5bb6\u3001\u90fd\u6703\u6975\u7c21",
@@ -2321,6 +2329,7 @@
         "WorkName": "\u5883\u5ead\u570b\u969b\u8a2d\u8a08",
         "DesignerName": "\u5468\u9756\u96c5",
         "Designerimg": "https://cloud.hhh.com.tw/gs/designer/110_designer79_00.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/23.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u4e2d\u5340,\u5357\u5340,\u5b9c\u862d\u82b1\u6771,\u5168\u7701",
         "WorkType": "\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u8001\u5c4b\u7ffb\u65b0,\u6a13\u4e2d\u6a13,\u5be6\u54c1\uff0f\u6a23\u54c1\u5c4b,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u53e4\u5178\u98a8,\u5962\u83ef\u98a8,\u65b0\u53e4\u5178,\u6df7\u642d\u98a8,\u4f11\u9592\u591a\u5143,\u7cbe\u54c1\u98ef\u5e97,\u5bae\u5ef7\u98a8,\u6771\u65b9\u98a8,\u65e5\u5f0f\u4eba\u6587",
@@ -3252,6 +3261,7 @@
         "WorkName": "\u96f2\u53f8\u570b\u969b\u8a2d\u8a08",
         "DesignerName": "\u5ed6\u7b20\u5ead \u5468\u8a00\u53e1",
         "Designerimg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_363_20191002114819.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/363.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u4e2d\u5340,\u5357\u5340,\u6d77\u5916\u5730\u5340",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u6a13\u4e2d\u6a13,\u8001\u5c4b\u7ffb\u65b0",
         "WorkStyle": "\u5317\u6b50\u7c21\u7d04,\u73fe\u4ee3\u6642\u5c1a,\u4f11\u9592\u98a8",
@@ -3483,6 +3493,7 @@
         "WorkName": "\u68e0\u79be\u8a2d\u8a08",
         "DesignerName": "\u66fe\u667a\u548c \uff5c \u68e0\u79be\u8a2d\u8a08\u5718\u968a",
         "Designerimg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_555_20210518175638.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/555.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u4e2d\u5340,\u5357\u5340",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u6a13\u4e2d\u6a13,\u5be6\u54c1\uff0f\u6a23\u54c1\u5c4b,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64,\u5de5\u4f5c\u7a7a\u9593,\u9910\u98f2\u7a7a\u9593,\u6c11\u5bbf\u65c5\u9928,\u516c\u5171\u7a7a\u9593,\u8001\u5c4b\u7ffb\u65b0",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u9109\u6751\u98a8,\u53e4\u5178\u98a8,\u4f11\u9592\u591a\u5143,\u7f8e\u5f0f\u98a8,\u5962\u83ef\u98a8,\u65b0\u53e4\u5178,\u65e5\u5f0f\u79aa\u98a8,\u6771\u65b9\u98a8,\u6df7\u642d\u98a8,\u524d\u885b\u98a8,\u5317\u6b50\u98a8,\u5de5\u696d\u98a8",
@@ -3609,6 +3620,7 @@
         "WorkName": "\u5c07\u4f5c\u7a7a\u9593\u8a2d\u8a08",
         "DesignerName": "\u5f35\u6210\u4e00",
         "Designerimg": "https://cloud.hhh.com.tw/gs/designer/designer207_00-1.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/79.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u5b9c\u862d\u82b1\u6771",
         "WorkType": "\u8001\u5c4b\u7ffb\u65b0,\u5be6\u54c1\uff0f\u6a23\u54c1\u5c4b,\u9810\u552e\u5c4b\u5ba2\u8b8a,\u683c\u5c40\u52d5\u7dda\u4e4b\u91cd\u6574\u898f\u5283(\u4e0d\u53d7\u5236\u5f0f\u683c\u5c40\u4e4b\u62d8\u9650)\u53ca\u5f9e\u5efa\u7bc9\u81f3\u5ba4\u5167\u7a7a\u9593\u4e4b\u3127\u6c23\u5475\u6210\u3002\u6ce8\u91cd\u7d50\u69cb\u5b89\u5168\u3002",
         "WorkStyle": "\u73fe\u4ee3\u7c21\u7d04,\u9109\u6751\u98a8,\u53e4\u5178\u98a8,\u4f11\u9592\u98a8,\u7f8e\u5f0f\u98a8,\u4f4e\u8abf\u5962\u83ef,\u65b0\u53e4\u5178,\u65e5\u5f0f\u79aa\u98a8,\u4e2d\u570b\u98a8,\u6df7\u642d\u98a8",
@@ -3805,6 +3817,7 @@
         "WorkName": "\u4eac\u5f69\u5ba4\u5167\u8a2d\u8a08",
         "DesignerName": "\u738b\u7acb\u5d22",
         "Designerimg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_158_20200921101118.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/158.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u4e2d\u5340,\u5357\u5340,\u5b9c\u862d\u82b1\u6771",
         "WorkType": "\u4f4f\u5b85\u7a7a\u9593\u3001\u5546\u696d\u7a7a\u9593\u3001\u8fa6\u516c\u7a7a\u9593",
         "WorkStyle": "\u6642\u5c1a\u3001\u6975\u7c21\u3001\u5317\u6b50\u3001\u65b0\u53e4\u5178",
@@ -4086,6 +4099,7 @@
         "WorkName": "YS\u6698\u6607\u570b\u969b\u5ba4\u5167\u88dd\u4fee\u5de5\u7a0b\u6709\u9650\u516c\u53f8",
         "DesignerName": "\u674e\u5b97\u80b2",
         "Designerimg": "https://cloud.hhh.com.tw/gs/designer/110_designer351_00.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/301.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u4e2d\u5340,\u5357\u5340,\u5b9c\u862d\u82b1\u6771,\u96e2\u5cf6\u5730\u5340,\u6d77\u5916\u5730\u5340",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u8001\u5c4b\u7ffb\u65b0,\u6a13\u4e2d\u6a13,\u5be6\u54c1\uff0f\u6a23\u54c1\u5c4b,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u4f11\u9592\u591a\u5143,\u7f8e\u5f0f\u98a8,\u65b0\u53e4\u5178,\u6df7\u642d\u98a8",
@@ -4267,6 +4281,7 @@
         "WorkName": "\u5141\u5ead\u5ba4\u5167\u88dd\u4fee\u8a2d\u8a08\u6709\u9650\u516c\u53f8",
         "DesignerName": "\u5f35\u821c\u6df5 \u6797\u8853\u69ae \u674e\u6674\u6c9b",
         "Designerimg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_402_20200217085534.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/402.jpg?v12",
         "WorkLoc": "\u5317\u5340",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5927\u576a\u6578,\u6a13\u4e2d\u6a13,\u8001\u5c4b\u7ffb\u65b0,\u7cfb\u7d71\u6ac3",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u9109\u6751\u98a8,\u4f11\u9592\u591a\u5143,\u6df7\u642d\u98a8",
@@ -4568,6 +4583,7 @@
         "WorkName": "\u9676\u74bd\u7a7a\u9593\u8a2d\u8a08\u4e8b\u52d9\u6240",
         "DesignerName": "\u6797\u6b23\u7487",
         "Designerimg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_131_20190619115901.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/131.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u4e2d\u5340",
         "WorkType": "\u4f4f\u5b85\u7a7a\u9593\u3001\u820a\u5c4b\u7ffb\u4fee\u3001\u5225\u5885\u7a7a\u9593\u3001\u5546\u696d\u7a7a\u9593\u3001\u8fa6\u516c\u7a7a\u9593",
         "WorkStyle": "\u5317\u6b50\u98a8\u3001\u9109\u6751\u98a8\u3001\u65b0\u53e4\u5178\u3001\u6df7\u642d\u98a8\u3001\u90fd\u6703\u6642\u5c1a",
@@ -4789,6 +4805,7 @@
         "WorkName": "\u5f35\u99a8&\u701a\u89c0\u5ba4\u5167\u8a2d\u8a08",
         "DesignerName": "\u5f35\u99a8",
         "Designerimg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_28_20200430141918.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/28.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u4e2d\u5340,\u5357\u5340,\u6d77\u5916\u5730\u5340",
         "WorkType": "\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u8001\u5c4b\u7ffb\u65b0,\u6a13\u4e2d\u6a13,\u5be6\u54c1\uff0f\u6a23\u54c1\u5c4b,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u9109\u6751\u98a8,\u53e4\u5178\u98a8,\u4f11\u9592\u591a\u5143,\u7f8e\u5f0f\u98a8,\u6df7\u642d\u98a8",
@@ -6405,6 +6422,7 @@
         "WorkName": "\u91c7\u820d\u7a7a\u9593\u8a2d\u8a08",
         "DesignerName": "\u694a\u8a69\u97fb",
         "Designerimg": "https://cloud.hhh.com.tw/gs/designer/designer175_00.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/65.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u4e2d\u5340,\u5357\u5340",
         "WorkType": "\u5546\u696d\u7a7a\u9593,\u8fa6\u516c\u7a7a\u9593,\u4f4f\u5bb6,\u516c\u8a2d\u7a7a\u9593",
         "WorkStyle": "\u90fd\u6703\u6642\u5c1a,\u73fe\u4ee3\u6975\u7c21,\u500b\u6027\u5c45\u5bb6,\u6b50\u5f0f\u65b0\u53e4\u5178",
@@ -6736,6 +6754,7 @@
         "WorkName": "\u81f3\u6587\u5ba4\u5167\u88dd\u4fee\u6709\u9650\u516c\u53f8",
         "DesignerName": "\u6bdb\u81f3\u6587",
         "Designerimg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_672_20200313101724.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/672.jpg?v12",
         "WorkLoc": "\u5317\u5340",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u6a13\u4e2d\u6a13",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u4f11\u9592\u591a\u5143,\u65b0\u53e4\u5178,\u6df7\u642d\u98a8,\u5317\u6b50\u98a8",
@@ -6897,6 +6916,7 @@
         "WorkName": "\u6728\u535a\u58eb\u5718\u968a&\u52d5\u5ff5\u5ba4\u5167\u8a2d\u8a08\u5236\u4f5c",
         "DesignerName": "\u535c\u51a0\u7a0b&\u6728\u535a\u58eb\u8a2d\u8a08\u5718\u968a",
         "Designerimg": "https://cloud.hhh.com.tw/gs/designer/designer485_00_01.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/438.jpg?v12",
         "WorkLoc": "\u4e2d\u5340",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u6a13\u4e2d\u6a13,\u5be6\u54c1\uff0f\u6a23\u54c1\u5c4b,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64,\u5de5\u4f5c\u7a7a\u9593,\u9910\u98f2\u7a7a\u9593,\u6c11\u5bbf\u65c5\u9928,\u516c\u5171\u7a7a\u9593,\u8001\u5c4b\u7ffb\u65b0",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u9109\u6751\u98a8,\u53e4\u5178\u98a8,\u4f11\u9592\u591a\u5143,\u7f8e\u5f0f\u98a8,\u5962\u83ef\u98a8,\u65b0\u53e4\u5178,\u65e5\u5f0f\u79aa\u98a8,\u6771\u65b9\u98a8,\u6df7\u642d\u98a8,\u524d\u885b\u98a8,\u5317\u6b50\u98a8,\u5de5\u696d\u98a8,\u7570\u570b\u98a8",
@@ -7133,6 +7153,7 @@
         "WorkName": "\u85dd\u8c37\u7a7a\u9593\u8a2d\u8a08",
         "DesignerName": "\u5f35\u82b7\u878d",
         "Designerimg": "https://cloud.hhh.com.tw/gs/designer/110_designer341_00.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/291.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u4e2d\u5340,\u5357\u5340,\u5b9c\u862d\u82b1\u6771,\u96e2\u5cf6\u5730\u5340,\u6d77\u5916\u5730\u5340",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u8001\u5c4b\u7ffb\u65b0,\u6a13\u4e2d\u6a13,\u5be6\u54c1\uff0f\u6a23\u54c1\u5c4b,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u9109\u6751\u98a8,\u53e4\u5178\u98a8,\u4f11\u9592\u98a8,\u7f8e\u5f0f\u98a8,\u4f4e\u8abf\u5962\u83ef,\u65b0\u53e4\u5178,\u65e5\u5f0f\u79aa\u98a8,\u4e2d\u570b\u98a8,\u6df7\u642d\u98a8",
@@ -7294,6 +7315,7 @@
         "WorkName": "\u57bc\u7a0b\u806f\u5408\u5efa\u7bc9\u5e2b\u4e8b\u52d9\u6240&\u6d6e\u898b\u6708\u8a2d\u8a08\u5de5\u7a0b\u6709\u9650\u516c\u53f8",
         "DesignerName": "\u5289\u737b\u6587",
         "Designerimg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_465_20200526093835.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/465.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u4e2d\u5340,\u5357\u5340,\u5b9c\u862d\u82b1\u6771,\u96e2\u5cf6\u5730\u5340,\u6d77\u5916\u5730\u5340",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u6a13\u4e2d\u6a13,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64,\u5de5\u4f5c\u7a7a\u9593,\u9910\u98f2\u7a7a\u9593,\u6c11\u5bbf\u65c5\u9928,\u516c\u5171\u7a7a\u9593",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u9109\u6751\u98a8,\u53e4\u5178\u98a8,\u7f8e\u5f0f\u98a8,\u65b0\u53e4\u5178,\u6df7\u642d\u98a8,\u5317\u6b50\u98a8,\u5de5\u696d\u98a8",
@@ -7455,6 +7477,7 @@
         "WorkName": "\u5ee3\u5ef6\u7a7a\u9593\u8a2d\u8a08",
         "DesignerName": "\u9673\u5049\u7acb",
         "Designerimg": "https://cloud.hhh.com.tw/gs/designer/designer484_00.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/436.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u4e2d\u5340,\u5357\u5340,\u5b9c\u862d\u82b1\u6771,\u96e2\u5cf6\u5730\u5340,\u6d77\u5916\u5730\u5340",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u6a13\u4e2d\u6a13,\u5be6\u54c1\uff0f\u6a23\u54c1\u5c4b,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u9109\u6751\u98a8,\u53e4\u5178\u98a8,\u4f11\u9592\u591a\u5143,\u7f8e\u5f0f\u98a8,\u5962\u83ef\u98a8,\u65b0\u53e4\u5178,\u65e5\u5f0f\u79aa\u98a8,\u6771\u65b9\u98a8,\u6df7\u642d\u98a8,\u524d\u885b\u98a8,\u5317\u6b50\u98a8,\u5de5\u696d\u98a8,\u7570\u570b\u98a8",
@@ -7730,6 +7753,7 @@
         "WorkName": "\u4e09\u5b85\u4e00\u79c0\u7a7a\u9593\u5275\u85dd",
         "DesignerName": "\u90c1\u7407\u7407",
         "Designerimg": "https://cloud.hhh.com.tw/gs/designer/110_designer337_00.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/279.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u4e2d\u5340",
         "WorkType": "\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u8001\u5c4b\u7ffb\u65b0,\u6a13\u4e2d\u6a13,\u5546\u696d\u7a7a\u9593",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u9109\u6751\u98a8,\u53e4\u5178\u98a8,\u7f8e\u5f0f\u98a8,\u5962\u83ef\u98a8,\u65b0\u53e4\u5178,\u6df7\u642d\u98a8,\u5317\u6b50\u98a8",
@@ -8356,6 +8380,7 @@
         "WorkName": "\u91c7\u54c1\u5ba4\u5167\u8a2d\u8a08",
         "DesignerName": "\u76e7\u6167\u73ca&\u91c7\u54c1\u8a2d\u8a08\u5718\u968a",
         "Designerimg": "https://cloud.hhh.com.tw/gs/designer/designer465_01.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/418.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u6843\u5712\u4ee5\u5317,\u5357\u5340",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u6a13\u4e2d\u6a13,\u5be6\u54c1\uff0f\u6a23\u54c1\u5c4b,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u9109\u6751\u98a8,\u53e4\u5178\u98a8,\u4f11\u9592\u591a\u5143,\u7f8e\u5f0f\u98a8,\u5962\u83ef\u98a8,\u65b0\u53e4\u5178,\u65e5\u5f0f\u79aa\u98a8,\u6771\u65b9\u98a8,\u6df7\u642d\u98a8,\u524d\u885b\u98a8,\u5317\u6b50\u98a8,\u5de5\u696d\u98a8,\u7570\u570b\u98a8",
@@ -8562,6 +8587,7 @@
         "WorkName": "\u6bd4\u6c99\u5217\u5ba4\u5167\u88dd\u4fee\u8a2d\u8a08\u6709\u9650\u516c\u53f8",
         "DesignerName": "\u5f35\u975c\u5cf0",
         "Designerimg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_33_20201215184848.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/33.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u4e2d\u5340,\u5357\u5340,\u5b9c\u862d\u82b1\u6771,\u96e2\u5cf6\u5730\u5340,\u6d77\u5916\u5730\u5340",
         "WorkType": "\u64c5\u9577\u683c\u5c40\u898f\u5283\u53ca\u91cd\u65b0\u914d\u7f6e\u3002\u5c07\u4e0d\u5b8c\u7f8e\u7684\u7578\u96f6\u7a7a\u9593\uff0c\u4fee\u98fe\u70ba\u5b8c\u7f8e\u904b\u7528\u7684\u5834\u57df\u3002",
         "WorkStyle": "\u4e3b\u8ef8\u5f0f\u7684\u8a2d\u8a08\u98a8\uff0c\u9069\u5f97\u5176\u6240\u7684\u5b89\u6392\uff0c\u8b93\u6bcf\u500b\u7a7a\u9593\u8ddf\u96a8\u4e3b\u8abf\u6563\u767c\u81ea\u6211\u8abf\u6027\u3002",
@@ -9743,6 +9769,7 @@
         "WorkName": "\u512a\u5c3c\u5ba2\u7a7a\u9593\u8a2d\u8a08\u6709\u9650\u516c\u53f8",
         "DesignerName": "\u9ec3\u4ef2\u5747",
         "Designerimg": "https://cloud.hhh.com.tw/gs/designer/designer537_00_180104.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/491.jpg?v12",
         "WorkLoc": "\u5317\u5340",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u9910\u98f2\u7a7a\u9593",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u5317\u6b50\u98a8,\u5de5\u696d\u98a8",
@@ -9964,6 +9991,7 @@
         "WorkName": "\u4e9e\u7dad\u7a7a\u9593\u8a2d\u8a08",
         "DesignerName": "\u7c21\u744b\u742a",
         "Designerimg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_385_20201012155448.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/385.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u4e2d\u5340",
         "WorkType": "\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u6a13\u4e2d\u6a13,\u5546\u696d\u7a7a\u9593,\u8001\u5c4b\u7ffb\u65b0,\u5bb6\u5177\u5bb6\u98fe\u9673\u8a2d\u5e03\u7f6e(\u8edf\u88dd\u8a2d\u8a08)",
         "WorkStyle": "\u9109\u6751\u98a8,\u4f11\u9592\u591a\u5143,\u7f8e\u5f0f\u98a8,\u6df7\u642d\u98a8",
@@ -10276,6 +10304,7 @@
         "WorkName": "\u5bcc\u9e97\u5ba4\u5167\u88dd\u4fee\u8a2d\u8a08",
         "DesignerName": "\u738b\u8a8c\u9706",
         "Designerimg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_688_20200820185032.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/688.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u5b9c\u862d\u82b1\u6771",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u6a13\u4e2d\u6a13,\u5be6\u54c1\uff0f\u6a23\u54c1\u5c4b,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u9109\u6751\u98a8,\u53e4\u5178\u98a8,\u4f11\u9592\u591a\u5143,\u7f8e\u5f0f\u98a8,\u5962\u83ef\u98a8,\u65b0\u53e4\u5178,\u65e5\u5f0f\u79aa\u98a8,\u6771\u65b9\u98a8,\u6df7\u642d\u98a8,\u524d\u885b\u98a8,\u5317\u6b50\u98a8,\u5de5\u696d\u98a8,\u7570\u570b\u98a8",
@@ -10377,6 +10406,7 @@
         "WorkName": "\u96cb\u7bc9\u7a7a\u9593\u8a2d\u8a08",
         "DesignerName": "\u5289\u5022\u59a4",
         "Designerimg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_474_20190624100935.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/474.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u4e2d\u5340",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u6a13\u4e2d\u6a13,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u9109\u6751\u98a8,\u7f8e\u5f0f\u98a8,\u5de5\u696d\u98a8",
@@ -10538,6 +10568,7 @@
         "WorkName": "\u6a59\u78a9\u5ba4\u5167\u8a2d\u8a08",
         "DesignerName": "\u80e1\u6377\u834f",
         "Designerimg": "https://cloud.hhh.com.tw/gs/designer/designer551_00.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/505.jpg?v12",
         "WorkLoc": "\u5317\u5340",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u6a13\u4e2d\u6a13,\u5be6\u54c1\uff0f\u6a23\u54c1\u5c4b,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u9109\u6751\u98a8,\u53e4\u5178\u98a8,\u4f11\u9592\u591a\u5143,\u7f8e\u5f0f\u98a8,\u5962\u83ef\u98a8,\u65b0\u53e4\u5178,\u6df7\u642d\u98a8,\u5317\u6b50\u98a8,\u5de5\u696d\u98a8",
@@ -10704,6 +10735,7 @@
         "WorkName": "\u4e30\u5f64\u8a2d\u8a08\u5de5\u7a0b\u6709\u9650\u516c\u53f8",
         "DesignerName": "\u5f35\u66f8\u6e90",
         "Designerimg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_712_20210326154147.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/712.jpg?v12",
         "WorkLoc": "\u5317\u5340",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u6a13\u4e2d\u6a13,\u5be6\u54c1\uff0f\u6a23\u54c1\u5c4b,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64,\u5de5\u4f5c\u7a7a\u9593,\u9910\u98f2\u7a7a\u9593,\u6c11\u5bbf\u65c5\u9928,\u516c\u5171\u7a7a\u9593,\u8001\u5c4b\u7ffb\u65b0",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u9109\u6751\u98a8,\u53e4\u5178\u98a8,\u4f11\u9592\u591a\u5143,\u7f8e\u5f0f\u98a8,\u5962\u83ef\u98a8,\u65b0\u53e4\u5178,\u65e5\u5f0f\u79aa\u98a8,\u6771\u65b9\u98a8,\u6df7\u642d\u98a8,\u524d\u885b\u98a8,\u5317\u6b50\u98a8,\u5de5\u696d\u98a8,\u7570\u570b\u98a8",
@@ -10759,6 +10791,7 @@
         "WorkName": "\u79be\u79be\u8a2d\u8a08",
         "DesignerName": "\u5f35\u79be\u6ea5\u3001\u8212\u7693",
         "Designerimg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_680_20200508102058.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/680.jpg?v12",
         "WorkLoc": "\u5317\u5340,\u6d77\u5916\u5730\u5340",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u6a13\u4e2d\u6a13,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u53e4\u5178\u98a8,\u65b0\u53e4\u5178,\u6771\u65b9\u98a8,\u6df7\u642d\u98a8,\u5317\u6b50\u98a8,\u96fb\u5f71\u5834\u666f\u98a8\u683c",
@@ -10845,6 +10878,7 @@
         "WorkName": "\u6046\u661f\u8a2d\u8a08",
         "DesignerName": "\u9127\u6e58\u76c8",
         "Designerimg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_705_20210118115131.jpg",
+        "Designerimg2": "https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/705.jpg?v12",
         "WorkLoc": "\u5317\u5340",
         "WorkType": "\u5c0f\u576a\u6578,\u6a19\u6e96\u683c\u5c40,\u5225\u5885,\u5927\u576a\u6578,\u6a13\u4e2d\u6a13,\u5be6\u54c1\uff0f\u6a23\u54c1\u5c4b,\u5546\u696d\u7a7a\u9593,\u6311\u9ad8\u6a13\u5c64,\u5de5\u4f5c\u7a7a\u9593,\u9910\u98f2\u7a7a\u9593,\u6c11\u5bbf\u65c5\u9928,\u516c\u5171\u7a7a\u9593,\u8001\u5c4b\u7ffb\u65b0",
         "WorkStyle": "\u73fe\u4ee3\u98a8,\u53e4\u5178\u98a8,\u4f11\u9592\u591a\u5143,\u7f8e\u5f0f\u98a8,\u5962\u83ef\u98a8,\u65b0\u53e4\u5178,\u5317\u6b50\u98a8,\u5de5\u696d\u98a8",

goto.js

@@ -55,243 +55,509 @@ console.log(28);
 //  })
 
 
-function funcTest2() {
+// function funcTest2() {
+//   $.ajax({
+//     method: "GET",
+//     url: "designer4.json",
+//     dataType: "json",
+//   })
+
+//     .done(function (msg) {
+//       var desBanner = '';
+//       var MobBanner = '';
+//       var bodyBannerDes = '';
+//       console.log(msg);
+//       var res = msg.length;
+//       console.log(res);
+//       const limit = res;
+//       var arrIndex = Math.floor(Math.random() * msg.length);
+//       console.log(arrIndex);
+//       console.log(msg[arrIndex].Designerimg);
+
+//       desBanner += ' \
+//               <div class="banner-des row vertical align-items-end px-0 mx-0">\
+//                 <div class="banner-0 col-0 order-1 col-lg-5 order-1 pe-0">\
+//                 <img class="img-fluid" src="./img/banner/bannertitle.png" alt="">\
+//                 </div>\
+//                 <div class="banner-1 col-5 order-3 col-lg-5 order-2 text-white text-end py-3">\
+//                   <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ msg[arrIndex].id + '"><div class="banner1-1" style="font-weight: 900;">' + msg[arrIndex].WorkName + '</div>\
+//                     <p><span class="fs-5">'+ msg[arrIndex].DesignerName + '</span>設計師</p>\
+//                   </a>\
+//                   <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ msg[arrIndex].TollFreeCall + '"><img class="" src="img/002-phone-call.svg" alt=""></a>\</button>\
+//               <button type="button" class="btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="img/001-blogging.svg" alt=""></button>\
+//                 </div>\
+//                 <div class="banner-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
+//                 <a class="desbutton" data-info="'+ msg[arrIndex].id + '" href="./about/index.html?id='+ msg[arrIndex].id + '"><img class="img-fluid" src="' + msg[arrIndex].Designerimg + '" alt=""></a>\
+//                 </div>\
+//             </div>';
+
+//       MobBanner += ' \
+//               <div class="banner-m row vertical align-items-end px-0 mx-0">\
+//               <div class="bannerm-0 col-12 my-5 px-0">\
+//               <img class="img-fluid" src="./img/banner/banner-mobile.png" alt="">\
+//               </div>\
+//               <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
+//               <a href="./about/index.html?id='+ msg[arrIndex].id + '"><img class="img-fluid" src="' + msg[arrIndex].Designerimg + '" alt=""></a>\
+//               </div>\
+//               <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start pb-3">\
+//               <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ msg[arrIndex].id + '">\
+//               <div class="banner1-1 pt-3 pb-4" style="font-weight: 900;">'+ msg[arrIndex].WorkName + '</div>\
+//               <p class=""><span class="fs-5">'+ msg[arrIndex].DesignerName + '</span>設計師</p>\
+//               </a>\
+//               <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ msg[arrIndex].TollFreeCall + '"><img class="" src="img/002-phone-call.svg" alt=""></a>\</button>\
+//               <button type="button" class="btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="img/001-blogging.svg" alt=""></button>\
+//               </div>\
+//             </div > ';
+
+//       bodyBannerDes += ' \
+//             <img class="banner-img img-fluid" id="img_id"  src="'+ msg[arrIndex].workimg[0].img + '" alt="">\
+//            ';
+
+
+
+//       $('.banner-des').html(desBanner);
+//       $('.banner-m').html(MobBanner);
+//       $('#bannerdes-img').html(bodyBannerDes);
+//       // var test = msg[0].newstext1;
+
+//       // $('#jsontest').append(test);
+//     });
+
+
+// }
+// window.onload = funcTest2();
+
+// window.setInterval("funcTest2()", 1000 * 8);
+
+
+// $(document).ready(function () {
+
+//   $.ajax({
+//     method: "GET",
+//     url: "designer4.json",
+//     dataType: "json",
+//   })
+
+//     .done(function (msg) {
+
+//       var DesignerContent = '';
+//       console.log(msg)
+//       for (var i = 0; i < msg.length; i++) {
+//         // new_des1.push(msg[msg.length].id);
+
+//         DesignerContent += ' \
+//               <div id="'+ msg[i].id + '" class="secimg col-4  col-lg-2 mx-0 px-0 border-0"><a  href="./about/index.html?id=' + msg[i].id + '"><img class="img-fluid"\
+//                 src="'+ msg[i].Designerimg + '"\
+//                 alt="">\
+//                 <div class="sec02-p-m p-1 mt-1 text-center">\
+//                 <p class="my-0">'+ msg[i].WorkName + '</p>\
+//                 <p>'+ msg[i].DesignerName + '</p>\
+//                 </div>\
+//                 </a>\
+//               </div>';
+
+//       }
+//       $('.sec01-designer').html(DesignerContent);
+//       // var test = msg[0].newstext1;
+
+//       // $('#jsontest').append(test);
+//     });
+
+
+
+// });
+
+
+
+function funcTest5() { 
   $.ajax({
     method: "GET",
     url: "designer4.json",
     dataType: "json",
+    async:false,
   })
-
     .done(function (msg) {
-      var desBanner = '';
-      var MobBanner = '';
-      var bodyBannerDes = '';
       console.log(msg);
-      var res = msg.length;
-      console.log(res);
-      const limit = res;
-      var arrIndex = Math.floor(Math.random() * msg.length);
-      console.log(arrIndex);
-      console.log(msg[arrIndex].Designerimg);
-
-      desBanner += ' \
-              <div class="banner-des row vertical align-items-end px-0 mx-0">\
-                <div class="banner-0 col-0 order-1 col-lg-5 order-1 pe-0">\
-                <img class="img-fluid" src="./img/banner/bannertitle.png" alt="">\
-                </div>\
-                <div class="banner-1 col-5 order-3 col-lg-5 order-2 text-white text-end py-3">\
-                  <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ msg[arrIndex].id + '"><div class="banner1-1" style="font-weight: 900;">'+ msg[arrIndex].WorkName + '</div>\
-                    <p><span class="fs-5">'+ msg[arrIndex].DesignerName + '</span>設計師</p>\
-                  </a>\
-                </div>\
-                <div class="banner-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
-                <a href="./about/index.html?id='+ msg[arrIndex].id + '"><img class="img-fluid" src="'+ msg[arrIndex].Designerimg + '" alt=""></a>\
-                </div>\
-            </div>';
-
-      MobBanner += ' \
-              <div class="banner-m row vertical align-items-end px-0 mx-0">\
-              <div class="bannerm-0 col-12 my-5 px-0">\
-              <img class="img-fluid" src="./img/banner/banner-mobile.png" alt="">\
-              </div>\
-              <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
-              <a href="./about/index.html?id='+ msg[arrIndex].id + '"><img class="img-fluid" src="' + msg[arrIndex].Designerimg + '" alt=""></a>\
-              </div>\
-              <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start py-3">\
-              <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ msg[arrIndex].id + '">\
-              <div class="banner1-1" style="font-weight: 900;">'+ msg[arrIndex].WorkName + '</div>\
-              <p><span class="fs-5">'+ msg[arrIndex].DesignerName + '</span>設計師</p>\
-              </a>\
-              </div>\
-            </div > ';
-
-      bodyBannerDes += ' \
-            <img class="banner-img img-fluid" id="img_id"  src="'+ msg[arrIndex].workimg[0].img + '" alt="">\
-           ';
-
-
-
-      $('.banner-des').html(desBanner);
-      $('.banner-m').html(MobBanner);
-      $('#bannerdes-img').html(bodyBannerDes);
-      // var test = msg[0].newstext1;
-
-      // $('#jsontest').append(test);
+      function shuffleArray(inputArray) {
+        inputArray.sort(() => Math.random() - 0.5);
+      }
+      shuffleArray(msg);
+      console.log(msg.length);
+      // temp初始化
+      for (var i = 0; i < msg.length; i++) {
+        temp[i]=msg[i].id
+      }
+      templength=temp.length;
     });
-
+    
 
 }
-window.onload = funcTest2();
-
-window.setInterval("funcTest2()",1000*8);
-
-
-// 點選該設計師，導至其對應id的參數網址
-
-$('#278').click(function () {
-  console.log(1);
-  window.location.href = `./about/index.html?id=278`;
-});
-$('#507').click(function () {
-  console.log(2);
-  window.location.href = `./about/index.html?id=507`;
-});
-
 
-$('#423').click(function () {
-  console.log(3);
-  window.location.href = `./about/index.html?id=423`;
-});
+var templength =0;
+var des1 = [];
+var des2 = [];
+var temp = [];
+var numb1=[];
+funcTest5(); 
+funcTest4();
+    
+
+function funcTest4() {
+   for (var j = 0; j < templength; j++) {
+     des1[j]=temp[j]
+  }
+  console.log(des1)
+  for (var j = 0; j < des1.length-1; j++) {
+    des2[j]=des1[j]
+  }
+  numb1[0]=des1[des1.length-1];
+  for(var j=0; j<des1.length-1;j++){
+   numb1[j+1]=des2[j];
+  }
 
-$('#594').click(function () {
-  console.log(4);
-  window.location.href = `./about/index.html?id=594`;
-});
+  for (var j = 0; j < numb1.length; j++) {
+    temp[j]=numb1[j];
+  }
+  console.log(temp);
+
+  
+  var desBanner = '';
+  var MobBanner = '';
+  var bodyBannerDes = '';
+  var DesignerContent = '';
+  for (var i = 0; i < temp.length; i++) {
+      var deslist=0; 
+      var deslist2=0;
+      deslist=get_data(temp[i]); 
+      deslist2=get_data(temp[0]);
+      DesignerContent += ' \
+            <div id="'+ deslist.id + '" class="secimg col-4  col-lg-2 mx-0 px-0 border-0"><a  href="./about/index.html?id=' + deslist.id + '"><img class="img-fluid"\
+              src="'+ deslist.Designerimg + '"\
+              alt="">\
+              <div class="sec02-p-m p-1 mt-1 text-center">\
+              <p class="my-0">'+deslist.WorkName + '</p>\
+              <p>'+ deslist.DesignerName + '</p>\
+              </div>\
+              </a>\
+            </div>';
 
-$('#364').click(function () {
-  console.log(5);
-  window.location.href = `./about/index.html?id=364`;
-});
-$('#500').click(function () {
-  console.log(6);
-  window.location.href = `./about/index.html?id=500`;
-});
+            
+            
+            
+            
+          }
+          desBanner += ' \
+          <div class="banner-des row vertical align-items-end px-0 mx-0">\
+            <div class="banner-0 col-0 order-1 col-lg-5 order-1 pe-0">\
+            <img class="img-fluid" src="./img/banner/bannertitle.png" alt="">\
+            </div>\
+            <div class="banner-1 col-5 order-3 col-lg-5 order-2 text-white text-end py-3">\
+              <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ deslist2.id + '"><div class="banner1-1" style="font-weight: 900;">' +deslist2.WorkName + '</div>\
+                <p><span class="fs-5">'+ deslist2.DesignerName + '</span>設計師</p>\
+              </a>\
+              <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ deslist2.TollFreeCall + '"><img class="" src="img/002-phone-call.svg" alt=""></a>\</button>\
+          <button type="button" class="btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="img/001-blogging.svg" alt=""></button>\
+            </div>\
+            <div class="banner-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
+            <a class="desbutton" data-info="'+ deslist2.id + '" href="./about/index.html?id='+ deslist2.id + '"><img class="img-fluid" src="' + deslist2.Designerimg + '" alt=""></a>\
+            </div>\
+        </div>';
+
+         MobBanner += ' \
+          <div class="banner-m row vertical align-items-end px-0 mx-0">\
+          <div class="bannerm-0 col-12 my-5 px-0">\
+          <img class="img-fluid" src="./img/banner/banner-mobile.png" alt="">\
+          </div>\
+          <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
+          <a href="./about/index.html?id='+ deslist2.id + '"><img class="img-fluid" src="' + deslist2.Designerimg + '" alt=""></a>\
+          </div>\
+          <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start pb-3">\
+          <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ deslist2.id + '">\
+          <div class="banner1-1 pt-3 pb-4" style="font-weight: 900;">'+ deslist2.WorkName + '</div>\
+          <p class=""><span class="fs-5">'+ deslist2.DesignerName + '</span>設計師</p>\
+          </a>\
+          <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ deslist2.TollFreeCall + '"><img class="" src="img/002-phone-call.svg" alt=""></a>\</button>\
+          <button type="button" class="btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="img/001-blogging.svg" alt=""></button>\
+          </div>\
+        </div > ';
+
+       bodyBannerDes += ' \
+        <img class="banner-img img-fluid" id="img_id"  src="'+ deslist2.workimg[0].img + '" alt="">\
+       ';
+    
+    $('.banner-des').html(desBanner);
+    $('.banner-m').html(MobBanner);
+    $('#bannerdes-img').html(bodyBannerDes);      
+    $('.sec01-designer').html(DesignerContent);
+    console.log(deslist2);
+
+  
+}
 
-$('#651').click(function () {
-  console.log(7);
-  window.location.href = `./about/index.html?id=651`;
-});
 
-$('#347').click(function () {
-  console.log(8);
-  window.location.href = `./about/index.html?id=347`;
-});
 
-$('#363').click(function () {
-  console.log(9);
-  window.location.href = `./about/index.html?id=363`;
-});
+function get_data(id) {
+  var A=[];
+  $.ajax({
+      method: "GET",
+      url: "../designer4.json",
+      dataType: "json",
+      async:false,
+  })
+      .done(function (msg) {
+          for (var i = 0; i < msg.length; i++) {
+            
+              if (msg[i].id == id) {
+                A =msg[i]
+              }
+          }
+      });
+     
+      return A
+}
 
-$('#555').click(function () {
-  console.log(10);
-  window.location.href = `./about/index.html?id=555`;
-});
 
-$('#79').click(function () {
-  console.log(11);
-  window.location.href = `./about/index.html?id=79`;
-});
-$('#158').click(function () {
-  console.log(12);
-  window.location.href = `./about/index.html?id=158`;
-});
 
-$('#301').click(function () {
-  console.log(13);
-  window.location.href = `./about/index.html?id=301`;
-});
+setInterval("funcTest4()", 1000*10);
 
-$('#402').click(function () {
-  console.log(14);
-  window.location.href = `./about/index.html?id=402`;
-});
 
-$('#131').click(function () {
-  console.log(15);
-  window.location.href = `./about/index.html?id=131`;
-});
 
-$('#28').click(function () {
-  console.log(16);
-  window.location.href = `./about/index.html?id=28`;
-});
 
-$('#65').click(function () {
-  console.log(17);
-  window.location.href = `./about/index.html?id=65`;
-});
-$('#672').click(function () {
-  console.log(9);
-  window.location.href = `./about/index.html?id=672`;
-});
-$('#438').click(function () {
-  console.log(9);
-  window.location.href = `./about/index.html?id=438`;
-});
-$('#291').click(function () {
-  console.log(9);
-  window.location.href = `./about/index.html?id=291`;
-});
-$('#465').click(function () {
-  console.log(9);
-  window.location.href = `./about/index.html?id=465`;
-});
-$('#436').click(function () {
-  console.log(9);
-  window.location.href = `./about/index.html?id=436`;
-});
-$('#279').click(function () {
-  console.log(9);
-  window.location.href = `./about/index.html?id=279`;
-});
-$('#418').click(function () {
-  console.log(9);
-  window.location.href = `./about/index.html?id=418`;
-});
-$('#385').click(function () {
-  console.log(9);
-  window.location.href = `./about/index.html?id=385`;
-});
-$('#688').click(function () {
-  console.log(9);
-  window.location.href = `./about/index.html?id=688`;
-});
-$('#474').click(function () {
-  console.log(9);
-  window.location.href = `./about/index.html?id=474`;
-});
-$('#505').click(function () {
-  console.log(9);
-  window.location.href = `./about/index.html?id=505`;
-});
-$('#712').click(function () {
-  console.log(9);
-  window.location.href = `./about/index.html?id=712`;
-});
-$('#680').click(function () {
-  console.log(9);
-  window.location.href = `./about/index.html?id=680`;
-});
-$('#705').click(function () {
-  console.log(9);
-  window.location.href = `./about/index.html?id=705`;
-});
-$('#23').click(function () {
-  console.log(9);
-  window.location.href = `./about/index.html?id=23`;
-});
 
-$('#33').click(function () {
-  console.log(9);
-  window.location.href = `./about/index.html?id=33`;
-});
+// if (msg[i].id == id) {
+//   console.log()
+// }
+// setInterval("funcTest5()", 5000);
 
-$('#491').click(function () {
-  console.log(9);
-  window.location.href = `./about/index.html?id=491`;
-});
+// 點選該設計師，導至其對應id的參數網址
 
+// $('#278').click(function () {
+//   console.log(1);
+//   window.location.href = `./about/index.html?id=278`;
+// });
+// $('#507').click(function () {
+//   console.log(2);
+//   window.location.href = `./about/index.html?id=507`;
+// });
+
+
+// $('#423').click(function () {
+//   console.log(3);
+//   window.location.href = `./about/index.html?id=423`;
+// });
+
+// $('#594').click(function () {
+//   console.log(4);
+//   window.location.href = `./about/index.html?id=594`;
+// });
+
+// $('#364').click(function () {
+//   console.log(5);
+//   window.location.href = `./about/index.html?id=364`;
+// });
+// $('#500').click(function () {
+//   console.log(6);
+//   window.location.href = `./about/index.html?id=500`;
+// });
+
+// $('#651').click(function () {
+//   console.log(7);
+//   window.location.href = `./about/index.html?id=651`;
+// });
+
+// $('#347').click(function () {
+//   console.log(8);
+//   window.location.href = `./about/index.html?id=347`;
+// });
+
+// $('#363').click(function () {
+//   console.log(9);
+//   window.location.href = `./about/index.html?id=363`;
+// });
+
+// $('#555').click(function () {
+//   console.log(10);
+//   window.location.href = `./about/index.html?id=555`;
+// });
+
+// $('#79').click(function () {
+//   console.log(11);
+//   window.location.href = `./about/index.html?id=79`;
+// });
+// $('#158').click(function () {
+//   console.log(12);
+//   window.location.href = `./about/index.html?id=158`;
+// });
+
+// $('#301').click(function () {
+//   console.log(13);
+//   window.location.href = `./about/index.html?id=301`;
+// });
+
+// $('#402').click(function () {
+//   console.log(14);
+//   window.location.href = `./about/index.html?id=402`;
+// });
+
+// $('#131').click(function () {
+//   console.log(15);
+//   window.location.href = `./about/index.html?id=131`;
+// });
+
+// $('#28').click(function () {
+//   console.log(16);
+//   window.location.href = `./about/index.html?id=28`;
+// });
+
+// $('#65').click(function () {
+//   console.log(17);
+//   window.location.href = `./about/index.html?id=65`;
+// });
+// $('#672').click(function () {
+//   console.log(9);
+//   window.location.href = `./about/index.html?id=672`;
+// });
+// $('#438').click(function () {
+//   console.log(9);
+//   window.location.href = `./about/index.html?id=438`;
+// });
+// $('#291').click(function () {
+//   console.log(9);
+//   window.location.href = `./about/index.html?id=291`;
+// });
+// $('#465').click(function () {
+//   console.log(9);
+//   window.location.href = `./about/index.html?id=465`;
+// });
+// $('#436').click(function () {
+//   console.log(9);
+//   window.location.href = `./about/index.html?id=436`;
+// });
+// $('#279').click(function () {
+//   console.log(9);
+//   window.location.href = `./about/index.html?id=279`;
+// });
+// $('#418').click(function () {
+//   console.log(9);
+//   window.location.href = `./about/index.html?id=418`;
+// });
+// $('#385').click(function () {
+//   console.log(9);
+//   window.location.href = `./about/index.html?id=385`;
+// });
+// $('#688').click(function () {
+//   console.log(9);
+//   window.location.href = `./about/index.html?id=688`;
+// });
+// $('#474').click(function () {
+//   console.log(9);
+//   window.location.href = `./about/index.html?id=474`;
+// });
+// $('#505').click(function () {
+//   console.log(9);
+//   window.location.href = `./about/index.html?id=505`;
+// });
+// $('#712').click(function () {
+//   console.log(9);
+//   window.location.href = `./about/index.html?id=712`;
+// });
+// $('#680').click(function () {
+//   console.log(9);
+//   window.location.href = `./about/index.html?id=680`;
+// });
+// $('#705').click(function () {
+//   console.log(9);
+//   window.location.href = `./about/index.html?id=705`;
+// });
+// $('#23').click(function () {
+//   console.log(9);
+//   window.location.href = `./about/index.html?id=23`;
+// });
+
+// $('#33').click(function () {
+//   console.log(9);
+//   window.location.href = `./about/index.html?id=33`;
+// });
+
+// $('#491').click(function () {
+//   console.log(9);
+//   window.location.href = `./about/index.html?id=491`;
+// });
+
+
+
+// function funcTest() {
+//   $("div.sec01-designer div").sort(function () {
+//     return Math.random() * 10 > 5 ? 1 : -1;
+//   }).each(function () {
+//     var $t = $(this),
+//       color = $t.attr("");
+//     $t.css({ backgroundColor: color }).appendTo($t.parent());
+//   });
+
+// }
+// window.setInterval("funcTest()", 1000 * 10);
+// window.onload = funcTest();
+$.fn.serializeObject = function () {
+  var o = {};
+  var a = this.serializeArray();
+  o["id"] = 0;
+  o["time_stamp"] = "";
+  $.each(a, function () {
+    if (o[this.name]) {
+      if (!o[this.name].push) {
+        o[this.name] = [o[this.name]];
+      }
+      o[this.name].push(this.value || '');
+    } else {
+      o[this.name] = this.value || '';
+    }
+  });
 
+  return o;
+};
 
-function funcTest() {
-  $("div.sec01-designer div").sort(function () {
-    return Math.random() * 10 > 5 ? 1 : -1;
-  }).each(function () {
-    var $t = $(this),
-      color = $t.attr("");
-    $t.css({ backgroundColor: color }).appendTo($t.parent());
+$(".contact-form1").submit(function (e) {
+  /*	var formRef = $('#form1').serializeArray();
+    var jsonString = JSON.stringify(formRef);*/
+  var jsonInfo = $('.contact-form1').serializeObject();
+  var jsonString = JSON.stringify(jsonInfo);
+  console.log(jsonString);
+  $.ajax({
+    type: 'POST',
+    url: 'https://go.hhh.com.tw:8002/deco_request_detail',
+    data: jsonString,
+    dataType: 'json',
+   
+    success: function (data) {
+      console.log('送出成功: ' + data);
+      if (data == 0) {
+        alert("送出成功");
+      } else if (data == 1) {
+        alert("此email已填過表單");
+      } else if (data == 2) {
+        alert("此phone已填過表單");
+      } else if (data == 3) {
+        alert("此email、phone已填過表單");
+      }
+      location.href ="./index_complete_line.html"; 
+    },
+
+    beforeSend: function () {
+      console.log('beforeSend');
+    },
+    complete: function () {
+      console.log('complete');
+
+    },
+
+    error: function (jqXHR, textStatus, errorThrown) {
+      console.log(JSON.stringify(jqXHR));
+      console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
+      console.log('送出失敗: ' + jqXHR.responseText);
+      alert("送出失敗");
+    }
   });
 
-}
-window.setInterval("funcTest()",1000*10);
-window.onload = funcTest();
+  return false;
+});

img/002-phone-call.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M267.998,61.092c0.337,0,0.665-0.002,1-0.002c48.74,0,94.412,18.844,128.686,53.118
+				c34.557,34.557,53.459,80.618,53.225,129.697c-0.052,11.045,8.859,20.042,19.905,20.095c0.033,0,0.064,0,0.097,0
+				c10.999,0,19.944-8.892,19.997-19.905c0.285-59.837-22.778-116.009-64.94-158.172C384.134,44.088,328.43,21.09,269.004,21.09
+				c-0.365,0-0.733,0.001-1.099,0.002c-11.046,0.053-19.957,9.05-19.905,20.095C248.053,52.2,256.997,61.092,267.998,61.092z"/>
+			<path d="M511.949,412.553c-0.714-19.805-8.964-38.287-23.229-52.042c-27.931-26.933-51.332-42.481-73.646-48.929
+				c-30.75-8.887-59.226-0.805-84.641,24.016c-0.038,0.037-0.077,0.075-0.115,0.113l-27.066,26.865
+				c-16.811-9.444-49.491-30.227-85.234-65.971l-2.632-2.63c-35.508-35.507-56.423-68.373-65.939-85.253l26.839-27.041
+				c0.038-0.038,0.075-0.076,0.113-0.115c24.821-25.414,32.902-53.892,24.016-84.64c-6.448-22.313-21.995-45.715-48.929-73.646
+				C137.731,9.015,119.249,0.765,99.446,0.051C79.647-0.662,60.614,6.232,45.865,19.472l-0.574,0.516
+				c-0.267,0.239-0.527,0.486-0.78,0.739c-29.36,29.358-44.75,70.46-44.508,118.861c0.41,82.22,45.599,176.249,120.879,251.528
+				c0.063,0.063,0.125,0.124,0.188,0.186c14.152,14.132,30.22,28.116,47.762,41.567c8.765,6.721,21.319,5.063,28.041-3.702
+				c6.721-8.766,5.064-21.32-3.702-28.041c-16.236-12.448-31.041-25.333-44.004-38.296c-0.062-0.062-0.124-0.124-0.187-0.185
+				C81.095,294.683,40.361,211.239,40.002,139.387c-0.186-37.276,11.027-68.389,32.431-90.014l0.153-0.138
+				c14.538-13.048,36.548-12.254,50.108,1.808c51.781,53.698,48.031,79.049,25.151,102.511l-37.074,37.353
+				c-5.814,5.858-7.433,14.686-4.075,22.226c0.941,2.114,23.709,52.427,80.414,109.132l2.632,2.629
+				c56.698,56.699,107.011,79.466,109.125,80.408c7.54,3.359,16.368,1.739,22.226-4.075l37.346-37.068
+				c23.466-22.883,48.818-26.638,102.518,25.145c14.062,13.56,14.856,35.57,1.81,50.105l-0.141,0.157
+				c-21.45,21.229-52.231,32.433-89.102,32.433c-0.303,0-0.608,0-0.912-0.002c-29.471-0.147-63.598-8.226-98.689-23.362
+				c-10.142-4.376-21.911,0.3-26.286,10.443c-4.375,10.142,0.301,21.911,10.443,26.286c40.562,17.496,79.029,26.456,114.332,26.633
+				c0.375,0.001,0.748,0.002,1.122,0.002c47.914-0.001,88.608-15.379,117.738-44.51c0.254-0.254,0.5-0.513,0.739-0.78l0.519-0.577
+				C505.766,451.385,512.663,432.357,511.949,412.553z"/>
+			<path d="M369.457,142.549c-21.453-21.454-42.043-27.147-51.939-29.884c-10.649-2.945-21.663,3.299-24.607,13.946
+				c-2.944,10.646,3.299,21.663,13.946,24.607c8.092,2.238,20.32,5.62,34.316,19.615c13.473,13.473,17.052,25.636,19.421,33.685
+				l0.289,0.979c2.574,8.697,10.538,14.329,19.169,14.329c1.88,0.001,3.792-0.267,5.686-0.828
+				c10.591-3.135,16.636-14.263,13.5-24.854l-0.271-0.918C395.882,182.744,390.14,163.232,369.457,142.549z"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

index.html

@@ -122,16 +122,14 @@
                 <div id="sec01" class="container-fluid px-0 mx-0">
                     <div class="sec01-designer row px-0 mx-0">
 
-                        <div id="705" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img class="img-fluid"
+                        <!-- <div id="705" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img class="img-fluid"
                                     src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/705.jpg?v12"
                                     alt="">
-
                                 <div class="sec02-p-m p-1 mt-1 text-center">
                                     <p class="my-0">恆星設計</p>
                                     <p>鄧湘盈</p>
                                 </div>
                             </a>
-
                         </div>
                         <div id="465" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img class="img-fluid"
                                     src="https://event.hhh.com.tw/2021-Most-Favorite-Designers/img/designer/465.jpg?v12"
@@ -431,14 +429,338 @@
                                 <p class="my-0">馥築時尚設計</p>
                                 <p>湯鎮安</p>
                             </div>
-                        </div>
+                        </div> -->
 
                     </div>
                 </div>
             </div>
         </section>
 
-        <footer id="footer" class="container-fluid" style="padding:0;margin: 0; ">
+        <!-- Modal -->
+        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-xl">
+                <div class="modal-content">
+                    <div class="modal-header border-0">
+                        <h5 class="modal-title" id="exampleModalLabel"></h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div id="light-box">
+                            <div id="form-lightbox">
+                                <div class="form-title">
+                                    <h1>已經服務超過<span>14392</span>個家庭</h1>
+                                    <h1>打造夢想中的完美居家生活</h1>
+                                    <h1>即刻啟動!</h1>
+                                </div>
+                                <div class="contact-text">
+                                    <div class="text-p">請撥打全台免付費專線<span style="opacity: 0;">11</span><span id="phone1"
+                                            style="color: #ee751b; font-weight:900;"> 0800-366-086</span></div>
+                                    <div class="text-p">或填寫以下資料，專人將盡速與您聯繫</div>
+                                </div>
+                                <form class="contact-form1">
+                                    <input type="hidden" name="version" id="version" value="">
+                                    <div id="contact-form" name="myForm">
+                                        <div class="row">
+                                            <div id="form-left" class="col-lg-5">
+                                                <select name="loc" id="loc" required>
+                                                    <option value="" disabled selected="selected">地區</option>
+                                                    <option class="option">基隆市</option>
+                                                    <option class="option">台北市</option>
+                                                    <option class="option">新北市</option>
+                                                    <option class="option">桃園市</option>
+                                                    <option class="option">新竹縣</option>
+                                                    <option class="option">新竹市</option>
+                                                    <option class="option">苗栗縣</option>
+                                                    <option class="option">台中市</option>
+                                                    <option class="option">彰化縣</option>
+                                                    <option class="option">南投縣</option>
+                                                    <option class="option">雲林縣</option>
+                                                    <option class="option">嘉義縣</option>
+                                                    <option class="option">嘉義市</option>
+                                                    <option class="option">台南市</option>
+                                                    <option class="option">高雄市</option>
+                                                    <option class="option">屏東縣</option>
+                                                    <option class="option">宜蘭縣</option>
+                                                    <option class="option">花蓮縣</option>
+                                                    <option class="option">台東縣</option>
+                                                    <option class="option">澎湖縣</option>
+                                                </select>
+                                                <select name="h_class" id="type" required>
+                                                    <option value="" disabled selected="selected">房屋類型</option>
+                                                    <option class="option">預售屋</option>
+                                                    <option class="option">中古屋</option>
+                                                    <option class="option">新成屋</option>
+                                                    <option class="option">毛胚屋</option>
+                                                    <option class="option">自地自建</option>
+                                                </select>
+                                                <select name="type" id="modal" required>
+                                                    <option value="" disabled selected="selected">房屋型態</option>
+                                                    <option class="option">透天</option>
+                                                    <option class="option">電梯華廈</option>
+                                                    <option class="option">公寓</option>
+                                                    <option class="option">平房</option>
+                                                    <option class="option">民宿</option>
+                                                    <option class="option">商空</option>
+                                                    <option class="option">其他</option>
+                                                </select>
+                                                <select name="budget" id="budget" required>
+                                                    <option value="" disabled selected="selected">裝修預算</option>
+                                                    <option class="option">50~100萬</option>
+                                                    <option class="option">100~200萬</option>
+                                                    <option class="option">200~300萬</option>
+                                                    <option class="option">300萬~400萬</option>
+                                                    <option class="option">400~500萬</option>
+                                                    <option class="option">500萬以上</option>
+                                                </select>
+                                                <input name="size" type="text" id="square" placeholder="請輸入坪數" required>
+                                                <select name="bed_num" id="rooms" required style="margin-right:1.5vw">
+                                                    <option class="option" value="1">1房</option>
+                                                    <option class="option" value="2" selected>2房</option>
+                                                    <option class="option" value="3">3房</option>
+                                                    <option class="option" value="4">4房</option>
+                                                    <option class="option" value="5">5房</option>
+                                                    <option class="option" value="6">6房</option>
+                                                    <option class="option" value="7">7房</option>
+                                                    <option class="option" value="8">8房</option>
+                                                </select>
+                                                <select name="liv_num" id="livingroom" required
+                                                    style="margin-right:1.5vw">
+                                                    <option class="option" value="1">1廳</option>
+                                                    <option class="option" value="2" selected>2廳</option>
+                                                </select>
+                                                <select name="bath_num" id="bathroom" required>
+                                                    <option class="option" value="1" selected>1衛</option>
+                                                    <option class="option" value="2">2衛</option>
+                                                    <option class="option" value="3">3衛</option>
+                                                    <option class="option" value="4">4衛</option>
+                                                    <option class="option" value="5">5衛</option>
+                                                    <option class="option" value="6">6衛</option>
+                                                    <option class="option" value="7">7衛</option>
+                                                    <option class="option" value="8">8衛</option>
+                                                </select>
+                                                <select name="style" id="style" required>
+                                                    <option value="" disabled selected="selected">風格類型</option>
+                                                    <option class="option">現代風</option>
+                                                    <option class="option">鄉村風</option>
+                                                    <option class="option">古典風</option>
+                                                    <option class="option">休閒多元</option>
+                                                    <option class="option">美式風</option>
+                                                    <option class="option">奢華風</option>
+                                                    <option class="option">新古典</option>
+                                                    <option class="option">日式禪風</option>
+                                                    <option class="option">東方風</option>
+                                                    <option class="option">混搭風</option>
+                                                    <option class="option">前衛風</option>
+                                                    <option class="option">北歐風</option>
+                                                    <option class="option">工業風</option>
+                                                    <option class="option">異國風</option>
+                                                </select>
+                                                <input name="prefer_date" class="datepicker" type="text" id="datepicker"
+                                                    placeholder="預選裝修日期" required>
+                                            </div>
+                                            <div class="col-lg-2 my-1 my-md-0 divider-wrapper d-flex justify-content-center align-items-center">
+                                                <div class="divider"></div>
+                                            </div>
+                                            <div id="form-right" class="col-lg-5">
+                                                <hr>
+                                                <div id="fb_login">
+                                                    <button id="fb-button"><img src="./img/facebook.png" alt="">
+                                                        <span id="line" style=" font-size: 30px;">｜</span>
+                                                        <p>使用fb填入信箱與姓名</p>
+                                                    </button>
+                                                    <span id="FB_STATUS_2"></span>
+                                                </div>
+                                                <!-- <div id="fb_login">
+                                        <fb:login-button id="fb-button" scope="public_profile,email"
+                                            onlogin="checkLoginState();" data-button-type="continue_with" data-size="large">
+                                            使用FB填入信箱與姓名
+                                        </fb:login-button>
+                                        <div id="status"></div>
+                                    </div> -->
+
+                                                <input type="email" name="email" id="email" placeholder="請輸入信箱"
+                                                    required>
+                                                <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
+                                                <input type="text" name="phone" id="phone" placeholder="請輸入行動電話"
+                                                    pattern="09\d{2}\d{6}" required>
+                                                <select name="gender" id="gender" required>
+                                                    <option value="" disabled selected="selected">性別</option>
+                                                    <option class="option">男</option>
+                                                    <option class="option">女</option>
+                                                </select>
+                                                <div>
+
+                                                    <input type="checkbox" style="margin:30px 10px;" id="checkbox"
+                                                        checked><label for="agree" style="width: 40px;">同意</label><a
+                                                        target="https://hhh.com.tw/about/privacy_policy/"
+                                                        href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                    </div>
+                                    <div class="form-btn">
+                                        <input class="btn" style="opacity: 1;" type="submit" value="送出">
+
+                                    </div>
+                                </form>
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- <div id="light-box">
+            <div id="form-lightbox">
+                <div class="form-title">
+                    <h1>已經服務超過<span style="font-size:38px;">14392</span>個家庭</h1>
+                    <h1>打造夢想中的完美居家生活</h1>
+                    <h1>即刻啟動!</h1>
+                </div>
+                <div class="contact-text">
+                    <div class="text-p">請撥打全台免付費專線<span style="opacity: 0;">11</span><span id="phone1"
+                            style="color: #ee751b; font-weight:900;"> 0800-366-086</span></div>
+                    <div class="text-p">或填寫以下資料，專人將盡速與您聯繫</div>
+                </div>
+                <form class="contact-form1">
+                    <input type="hidden" name="version" value="a">
+                    <div id="contact-form" name="myForm" >
+                        <div class="row">
+                            <div id="form-left" class="col-lg-6">
+                                <select name="loc" id="loc" required>
+                                    <option value="" disabled selected="selected">地區</option>
+                                    <option class="option">基隆市</option>
+                                    <option class="option">台北市</option>
+                                    <option class="option">新北市</option>
+                                    <option class="option">桃園市</option>
+                                    <option class="option">新竹縣</option>
+                                    <option class="option">新竹市</option>
+                                    <option class="option">苗栗縣</option>
+                                    <option class="option">台中市</option>
+                                    <option class="option">彰化縣</option>
+                                    <option class="option">南投縣</option>
+                                    <option class="option">雲林縣</option>
+                                    <option class="option">嘉義縣</option>
+                                    <option class="option">嘉義市</option>
+                                    <option class="option">台南市</option>
+                                    <option class="option">高雄市</option>
+                                    <option class="option">屏東縣</option>
+                                    <option class="option">宜蘭縣</option>
+                                    <option class="option">花蓮縣</option>
+                                    <option class="option">台東縣</option>
+                                    <option class="option">澎湖縣</option>
+                                </select>
+                                <select name="h_class" id="type" required>
+                                    <option value="" disabled selected="selected">房屋類型</option>
+                                    <option class="option">預售屋</option>
+                                    <option class="option">中古屋</option>
+                                    <option class="option">新成屋</option>
+                                    <option class="option">毛胚屋</option>
+                                    <option class="option">自地自建</option>
+                                </select>
+                                <select name="type" id="modal" required>
+                                    <option value="" disabled selected="selected">房屋型態</option>
+                                    <option class="option">透天</option>
+                                    <option class="option">電梯華廈</option>
+                                    <option class="option">公寓</option>
+                                    <option class="option">平房</option>
+                                    <option class="option">民宿</option>
+                                    <option class="option">商空</option>
+                                    <option class="option">其他</option>
+                                </select>
+                                <select name="budget" id="budget" required>
+                                    <option value="" disabled selected="selected">裝修預算</option>
+                                    <option class="option">50~100萬</option>
+                                    <option class="option">100~200萬</option>
+                                    <option class="option">200~300萬</option>
+                                    <option class="option">300萬~400萬</option>
+                                    <option class="option">400~500萬</option>
+                                    <option class="option">500萬以上</option>
+                                </select>
+                                <input name="size" type="text" id="square" placeholder="請輸入坪數" required>
+                                <select name="bed_num" id="rooms" required style="margin-right:1.5vw">
+                                    <option class="option" value="1">1房</option>
+                                    <option class="option" value="2" selected>2房</option>
+                                    <option class="option" value="3">3房</option>
+                                    <option class="option" value="4">4房</option>
+                                    <option class="option" value="5">5房</option>
+                                    <option class="option" value="6">6房</option>
+                                    <option class="option" value="7">7房</option>
+                                    <option class="option" value="8">8房</option>
+                                </select>
+                                <select name="liv_num" id="livingroom" required style="margin-right:1.5vw">
+                                    <option class="option" value="1">1廳</option>
+                                    <option class="option" value="2" selected>2廳</option>
+                                </select>
+                                <select name="bath_num" id="bathroom" required>
+                                    <option class="option" value="1" selected>1衛</option>
+                                    <option class="option" value="2">2衛</option>
+                                    <option class="option" value="3">3衛</option>
+                                    <option class="option" value="4">4衛</option>
+                                    <option class="option" value="5">5衛</option>
+                                    <option class="option" value="6">6衛</option>
+                                    <option class="option" value="7">7衛</option>
+                                    <option class="option" value="8">8衛</option>
+                                </select>
+                                <select name="style" id="style" required>
+                                    <option value="" disabled selected="selected">風格類型</option>
+                                    <option class="option">現代風</option>
+                                    <option class="option">鄉村風</option>
+                                    <option class="option">古典風</option>
+                                    <option class="option">休閒多元</option>
+                                    <option class="option">美式風</option>
+                                    <option class="option">奢華風</option>
+                                    <option class="option">新古典</option>
+                                    <option class="option">日式禪風</option>
+                                    <option class="option">東方風</option>
+                                    <option class="option">混搭風</option>
+                                    <option class="option">前衛風</option>
+                                    <option class="option">北歐風</option>
+                                    <option class="option">工業風</option>
+                                    <option class="option">異國風</option>
+                                </select>
+                                <input name="prefer_date" class="datepicker" type="text" id="datepicker" placeholder="預選裝修日期" required>
+                            </div>
+                            <hr>
+                            <div id="form-right" class="col-lg-6">
+                                <div id="fb_login">
+                                    <button id="fb-button"><img src="./img/facebook.png" alt="">
+                                       <span id="line" style=" font-size: 30px;">｜</span><p>使用fb填入信箱與姓名</p>
+                                    </button>
+                                    <span id="FB_STATUS_2"></span>
+                                </div>
+            
+                                <input type="email" name="email" id="email" placeholder="請輸入信箱" required>
+                                <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
+                                <input type="text" name="phone" id="phone" placeholder="請輸入行動電話" pattern="09\d{2}\d{6}" required>
+                                <select name="gender" id="gender" required>
+                                    <option value="" disabled selected="selected">性別</option>
+                                    <option class="option">男</option>
+                                    <option class="option">女</option>
+                                </select>
+                                <div>
+        
+                                    <input type="checkbox" style="margin:30px 10px;" id="checkbox" checked><label
+                                        for="agree" style="width: 40px;">同意</label><a  target="https://hhh.com.tw/about/privacy_policy/"
+                                        href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
+                                </div>
+                            </div>
+                        </div>
+        
+                    </div>
+                    <div class="form-btn">
+                        <input class="btn" style="opacity: 1;" type="submit" value="送出">
+        
+                    </div>
+                </form>
+
+            </div>
+        </div> -->
+
+
+        <footer id="footer" class="container-fluid px-0">
 
             <p>幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.<a href=""><span
                         class="px-2">|</span>聯絡我們<span class="px-2">|</span></a><a href=""> 關於本站 <span

style.css

@@ -287,7 +287,29 @@ body .arrow:hover {
 }
 
 #banner #banner-container .banner-des .banner-1 .banner1-1 {
-  font-size: 24px;
+  font-size: 22px;
+}
+
+#banner #banner-container .banner-des .banner-1 .btn {
+  color: #fff;
+  width: 60px;
+  height: 40px;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+#banner #banner-container .banner-des .banner-1 .btn :focus {
+  outline: 0 !important;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+#banner #banner-container .banner-des .banner-1 .btn img {
+  width: 24px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
+          filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
 }
 
 #banner #banner-container .banner-des .banner-2 {
@@ -321,6 +343,28 @@ body .arrow:hover {
   }
 }
 
+#banner #banner-container .banner-m .bannerm-1 .btn {
+  color: #fff;
+  width: 60px;
+  height: 40px;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+#banner #banner-container .banner-m .bannerm-1 .btn :focus {
+  outline: 0 !important;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+#banner #banner-container .banner-m .bannerm-1 .btn img {
+  width: 24px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
+          filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
+}
+
 #banner #banner-container .banner-m .bannerm-1 .banner1-1 {
   font-size: 18px;
 }
@@ -341,10 +385,22 @@ body .arrow:hover {
   -webkit-transition: 0.5s ease-in-out;
   transition: 0.5s ease-in-out;
   cursor: pointer;
+  overflow: hidden;
 }
 
 #banner #banner-container #sec01 .col-lg-2 img {
   width: 100%;
+  height: 20vw;
+  -o-object-fit: cover;
+     object-fit: cover;
+  margin-bottom: -40px;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container #sec01 .col-lg-2 img {
+    height: 40vw;
+    margin-bottom: -20px;
+  }
 }
 
 #banner #banner-container #sec01 .col-lg-2 .sec02-p-m {
@@ -395,6 +451,13 @@ body .arrow:hover {
   margin: 0 auto !important;
 }
 
+@media screen and (max-width: 767px) {
+  #footer {
+    width: 100vw;
+    padding-bottom: 30vw;
+  }
+}
+
 #footer a {
   text-decoration: none;
   color: #fff;
@@ -405,6 +468,12 @@ body .arrow:hover {
   color: #fff;
 }
 
+@media screen and (max-width: 767px) {
+  #footer p {
+    padding: 10px;
+  }
+}
+
 @-webkit-keyframes Picture {
   0% {
     -webkit-transform: scale(1.3);
@@ -448,4 +517,309 @@ body .arrow:hover {
             transform: scale(1);
   }
 }
+
+#modal-dialog {
+  width: 90vw;
+}
+
+#modal-dialog .modal-content {
+  width: 80vw;
+}
+
+@media screen and (max-width: 767px) {
+  #modal-dialog .modal-content {
+    width: 90vw;
+  }
+}
+
+#light-box #form-lightbox {
+  width: 70vw;
+  margin: 0 auto;
+}
+
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox {
+    width: 80vw;
+  }
+}
+
+#light-box #form-lightbox .form-title {
+  margin: 0 auto;
+  color: #5c5248;
+}
+
+#light-box #form-lightbox .form-title h1 {
+  text-align: center;
+  font-size: 32px;
+  font-weight: 900;
+}
+
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox .form-title h1 {
+    font-size: 24px;
+  }
+}
+
+@media screen and (max-width: 350px) {
+  #light-box #form-lightbox .form-title h1 {
+    font-size: 20px;
+  }
+}
+
+#light-box #form-lightbox .form-title h1 span {
+  font-size: 38px;
+}
+
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox .form-title h1 span {
+    font-size: 28px;
+  }
+}
+
+@media screen and (max-width: 350px) {
+  #light-box #form-lightbox .form-title h1 span {
+    font-size: 24px;
+  }
+}
+
+#light-box #form-lightbox .contact-text {
+  margin: 0 auto;
+}
+
+#light-box #form-lightbox .contact-text .text-p {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+@media screen and (max-width: 350px) {
+  #light-box #form-lightbox .contact-text .text-p {
+    font-size: 14px;
+  }
+}
+
+#light-box #form-lightbox .contact-form1 {
+  margin: 0 auto;
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form {
+  margin-top: 10px;
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form .col-lg-2 .divider {
+  position: relative;
+  width: 1px;
+  height: 100%;
+  border-left: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #loc,
+#light-box #form-lightbox .contact-form1 #contact-form #type,
+#light-box #form-lightbox .contact-form1 #contact-form #modal,
+#light-box #form-lightbox .contact-form1 #contact-form #budget,
+#light-box #form-lightbox .contact-form1 #contact-form #square,
+#light-box #form-lightbox .contact-form1 #contact-form #style,
+#light-box #form-lightbox .contact-form1 #contact-form #datepicker,
+#light-box #form-lightbox .contact-form1 #contact-form #email,
+#light-box #form-lightbox .contact-form1 #contact-form #name,
+#light-box #form-lightbox .contact-form1 #contact-form #phone,
+#light-box #form-lightbox .contact-form1 #contact-form #gender {
+  width: 100%;
+  height: 50px;
+  margin: 10px 0;
+  padding-left: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  padding: 10px 15px;
+  font-size: 16px;
+  border-radius: 3px;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: url(./img/icondown.webp) 95% 50% no-repeat scroll transparent;
+  background-size: 10px 10px;
+  background-color: #fff;
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #form-left {
+  margin: 0 auto;
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #form-left #rooms,
+#light-box #form-lightbox .contact-form1 #contact-form #form-left #livingroom,
+#light-box #form-lightbox .contact-form1 #contact-form #form-left #bathroom {
+  width: 28.8%;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  height: 50px;
+  margin: 15px 0;
+  padding-right: 50px;
+  padding: 10px 15px;
+  font-size: 16px;
+  border-radius: 3px;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: url(./img/icondown.webp) 85% 50% no-repeat scroll transparent;
+  background-size: 10px 10px;
+  background-color: #fff;
+}
+
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox .contact-form1 #contact-form #form-left #rooms,
+  #light-box #form-lightbox .contact-form1 #contact-form #form-left #livingroom,
+  #light-box #form-lightbox .contact-form1 #contact-form #form-left #bathroom {
+    width: 31%;
+  }
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #form-left #square,
+#light-box #form-lightbox .contact-form1 #contact-form #form-left #datepicker {
+  background: none;
+  background-color: #fff;
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #form-right {
+  margin: 0 auto;
+}
+
+@media screen and (min-width: 1025px) {
+  #light-box #form-lightbox .contact-form1 #contact-form #form-right hr {
+    display: none;
+  }
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #fb-button {
+  margin-top: 12px;
+  width: 100%;
+  height: 50px;
+  border: 1px solid #3b5998;
+  text-align: right;
+  padding-right: 60px;
+  background-size: 32px 32px;
+  border-radius: 3px;
+  background-color: #fff;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+  position: relative;
+}
+
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox .contact-form1 #contact-form #fb-button {
+    margin: 10px 0;
+  }
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #fb-button p {
+  position: absolute;
+  top: 1vw;
+  left: 12vw;
+  color: #626262;
+}
+
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox .contact-form1 #contact-form #fb-button p {
+    left: 32vw;
+    top: 3vw;
+  }
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #fb-button #line {
+  position: absolute;
+  color: #9b9b9b;
+  opacity: 0.8;
+  left: 8vw;
+  top: -0.1vw;
+}
+
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox .contact-form1 #contact-form #fb-button #line {
+    left: 20vw;
+  }
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #fb-button img {
+  position: absolute;
+  left: 50px;
+  top: 10px;
+  width: 32px;
+  height: 32px;
+  -webkit-filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
+          filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
+}
+
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox .contact-form1 #contact-form #fb-button img {
+    left: 20px;
+  }
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #fb-button:hover {
+  background-color: #2a4f91;
+  color: #fff;
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #fb-button:hover img {
+  -webkit-filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
+          filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #fb-button:hover p {
+  color: #fff;
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #fb-button:hover #line {
+  color: #fff;
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form a {
+  text-decoration: none;
+  color: #ee751b;
+  font-weight: 900;
+}
+
+#light-box #form-lightbox .contact-form1 #contact-form #email,
+#light-box #form-lightbox .contact-form1 #contact-form #name,
+#light-box #form-lightbox .contact-form1 #contact-form #phone {
+  background: none;
+  background-color: #fff;
+}
+
+#light-box #form-lightbox .btn {
+  margin: 50px auto;
+  border: none;
+  padding: 15px;
+  background: #edbc96;
+  color: #4b515e;
+  font-size: 20px;
+  width: 400px;
+  border-radius: 10px;
+}
+
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox .btn {
+    width: 100%;
+  }
+}
+
+#light-box #form-lightbox .btn:hover {
+  color: #fff;
+  background-color: #745c54;
+}
+
+#light-box #form-lightbox .form-btn {
+  text-align: center;
+  position: relative;
+  width: 70vw;
+  margin: 0 auto;
+}
+
+@media screen and (max-width: 767px) {
+  #light-box #form-lightbox .form-btn {
+    width: 80vw;
+    margin: 0 auto;
+  }
+}
+
+#light-box #form-lightbox .form-btn #phone1 {
+  position: absolute;
+  left: 500px;
+}
 /*# sourceMappingURL=style.css.map */

style.scss

@@ -223,7 +223,22 @@ body {
                 }
                 background: rgba(141, 194, 31, 0.8);
                 .banner1-1 {
-                    font-size: 24px;
+                    font-size: 22px;
+                }
+                .btn{
+                    color:#fff;
+                    width: 60px;
+                    height: 40px;
+                    box-shadow:none;
+                    :focus{
+                        outline: 0 !important;
+                        box-shadow:none;
+                    }
+                    img{
+                        width: 24px;
+                        object-fit: cover;
+                        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
+                    }
                 }
             }
             .banner-2 {
@@ -246,8 +261,24 @@ body {
                     margin: 0;
                 }
                 background: rgba(141, 194, 31, 0.8);
+                .btn{
+                    color:#fff;
+                    width: 60px;
+                    height: 40px;
+                    box-shadow:none;
+                    :focus{
+                        outline: 0 !important;
+                        box-shadow:none;
+                    }
+                    img{
+                        width: 24px;
+                        object-fit: cover;
+                        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
+                    }
+                }
                 .banner1-1 {
                     font-size: 18px;
+                  
                 }
             }
         }
@@ -261,8 +292,16 @@ body {
                 position: relative;
                 transition: 0.5s ease-in-out;
                 cursor: pointer;
+                overflow: hidden;
                 img {
                     width: 100%;
+                    height:20vw;
+                    object-fit: cover;
+                    margin-bottom: -40px;
+                    @media screen and(max-width:$moblie) {
+                        height:40vw;
+                        margin-bottom: -20px;
+                    }
                 }
                 .sec02-p-m {
                     color: #fff;
@@ -306,6 +345,10 @@ body {
     text-align: center;
     width: 80vw;
     margin: 0 auto !important;
+    @media screen and(max-width:$moblie) {
+        width: 100vw;
+        padding-bottom: 30vw;
+    }
 
     a {
         text-decoration: none;
@@ -314,6 +357,9 @@ body {
     p {
         padding: 15px;
         color: #fff;
+        @media screen and(max-width:$moblie) {
+            padding: 10px;
+        }
     }
 }
 
@@ -334,4 +380,239 @@ body {
         transform: scale(1);
     }
 }
+#modal-dialog{
+    width: 90vw;
+    .modal-content{
+        width: 80vw;
+        @media screen and(max-width:$moblie) {
+            width: 90vw;
+        }
+    }
+}
+#light-box{
+
+    #form-lightbox{
+        width: 70vw;
+        margin: 0 auto;
+        @media screen and(max-width:$moblie) {
+            width: 80vw;
+        }
+        .form-title {
+            margin: 0 auto;
+            color: #5c5248;
+            
+            h1 {
+                text-align: center;
+                font-size: 32px;
+                font-weight: 900;
+                @media screen and(max-width:$moblie) {
+                    font-size: 24px;
+                }
+                @media screen and(max-width:350px) {
+                    font-size: 20px;
+                }
+                span{
+                    font-size:38px;
+                    @media screen and(max-width:$moblie) {
+                        font-size:28px;
+                    }
+                    @media screen and(max-width:350px) {
+                        font-size: 24px;
+                    }
+                }
+            }
+        }
+        .contact-text {
+            margin: 0 auto;
+   
 
+            .text-p {
+                font-size: 16px;
+                font-weight: 600;
+                @media screen and(max-width:350px) {
+                    font-size: 14px;
+                }
+            }
+        }
+        .contact-form1{
+ 
+        margin: 0 auto;
+            #contact-form {
+                margin-top: 10px;
+                .col-lg-2{
+                   .divider{
+                       position: relative;
+                       width: 1px;
+                       height:100%;
+                       border-left: 1px solid rgba(0,0,0,0.12);
+                   }
+                }
+                #loc,
+                #type,
+                #modal,
+                #budget,
+                #square,
+                #style,
+                #datepicker,
+                #email,
+                #name,
+                #phone,
+                #gender {
+                    width: 100%;
+                    height: 50px;
+                    margin: 10px 0;
+                    padding-left: 10px;
+                    border: 1px solid rgba(0, 0, 0, 0.3);
+                    padding: 10px 15px;
+                    font-size: 16px;
+                    border-radius: 3px;
+                    appearance: none;
+                    background: url(./img/icondown.webp) 95% 50% no-repeat scroll transparent;
+                    background-size: 10px 10px;
+                    background-color: #fff;
+                }
+                #form-left {
+                    margin: 0 auto;
+                    #rooms,
+                    #livingroom,
+                    #bathroom {
+                        width: 28.8%;
+                        border: 1px solid rgba(0, 0, 0, 0.3);
+                        height: 50px;
+                        margin: 15px 0;
+                        padding-right: 50px;
+                        padding: 10px 15px;
+                        font-size: 16px;
+                        border-radius: 3px;
+                        appearance: none;
+                        background: url(./img/icondown.webp) 85% 50% no-repeat scroll transparent;
+                        background-size: 10px 10px;
+                        background-color: #fff;
+                        @media screen and(max-width:$moblie) {
+                            width: 31%;
+                        }
+                    }
+                    #square,
+                    #datepicker {
+                        background: none;
+                        background-color: #fff;
+                    }
+                }
+                #form-right {
+                    margin: 0 auto;
+                    hr{
+                        @media screen and(min-width:$desktop) {
+                            display: none;
+                        }
+                    }
+                }
+                #fb-button {
+                    margin-top: 12px;
+                    width: 100%;
+                    height: 50px;
+                    border: 1px solid #3b5998;
+                    text-align: right;
+                    padding-right: 60px;
+                    background-size: 32px 32px;
+                    border-radius: 3px;
+                    background-color: #fff;
+                    transition: 0.3s;
+                    position: relative;
+                    @media screen and(max-width:$moblie) {
+                        margin: 10px 0;
+                    }
+                    p {
+                        position: absolute;
+                        top:1vw;
+                        left:12vw;
+                        color: #626262;
+                        @media screen and(max-width:$moblie) {
+                            left:32vw;
+                            top:3vw;
+                        }
+                    }
+                    #line {
+                        position: absolute;
+                        color: #9b9b9b;
+                        opacity: 0.8;;
+                        left:8vw;
+                        top:-0.1vw;
+                        @media screen and(max-width:$moblie) {
+                            left:20vw;
+                        }
+                       
+                    }
+                    img {
+                        position: absolute;
+                        left: 50px;
+                        top: 10px;
+                        width: 32px;
+                        height: 32px;
+                        @media screen and(max-width:$moblie) {
+                            left: 20px;
+                        }
+                        filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
+                    }
+                    &:hover {
+                        background-color: #2a4f91;
+                        color: #fff;
+                        img {
+                            filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
+                        }
+                        p {
+                            color: #fff;
+                        }
+            
+                        #line {
+                            color: #fff;
+                        }
+                    }
+                }
+                a {
+                    text-decoration: none;
+                    color: #ee751b;
+                    font-weight: 900;
+                }
+            
+                #email,
+                #name,
+                #phone {
+                    background: none;
+                    background-color: #fff;
+                }
+            }
+        }
+        .btn {
+            margin: 50px auto;
+            border: none;
+            padding: 15px;
+            background: #edbc96;
+            color: #4b515e;
+            font-size: 20px;
+            width: 400px;
+            border-radius: 10px;
+            @media screen and(max-width:$moblie) {
+                width: 100%;
+            }
+            &:hover {
+                color: #fff;
+                background-color: #745c54;
+            }
+        }
+        
+        .form-btn {
+            text-align: center;
+            position: relative;
+            width: 70vw;
+            margin: 0 auto;
+            @media screen and(max-width:$moblie) {
+                width: 80vw;
+                margin: 0 auto;
+            }
+            #phone1 {
+                position: absolute;
+                left: 500px;
+            }
+        }
+    }
+}