add slide slick

designer1.html

@@ -68,7 +68,7 @@
         </div>
     </div>
     <section class="banner">
-        <div class="designer-content">
+        <div class="designer-content" id="designer1">
             <div class="row px-0 mx-0">
                 <div class="designer-img col-md-6 col-lg-6">
                     <div class="d-flex justify-content-end">
@@ -81,8 +81,65 @@
                         <p class="ps-1 fw-bold">Interior Design Masters</p>
                     </div>
                 </div>
-                <div class="video col-md-6 col-lg-6 text-center" style="background-image: url(./img/designer1/video.png);">
-                    <img class="playbutton" src="./img/designer1/play.png" alt="">
+                <div class="video col-md-6 col-lg-6 text-center">
+
+                    <div class="designer-bannerslider play-pc">
+
+                        <div class="deigner-slick">
+                            <div style="position: relative;">
+                                <img class="playbutton play-pc"  data-info="XlPxHa9BcKY" data-bs-toggle="modal"
+                                    data-bs-target="#yt-video" src="./img/designer1/play.png" alt="" width="80">
+                                <img class="img-fluid" src="./img/yt-video/designer1/XlPxHa9BcKY-HD.jpeg" alt="">
+                            </div>
+                        </div>
+
+                        <div class="deigner-slick">
+                            <div style="position: relative;">
+                                <div class="text-center">
+                                    <img class="playbutton play-pc"  data-info="xc6SNElGDIM" data-bs-target="#yt-video"
+                                        data-bs-toggle="modal" src="./img/designer1/play.png" alt="" width="80">
+                                </div>
+                                <img class="img-fluid" src="./img/yt-video/designer1/xc6SNElGDIM-HD.jpeg" alt="">
+                            </div>
+                        </div>
+
+                        <div class="deigner-slick">
+                            <div class="position: relative;">
+                                <img class="playbutton play-pc"  data-info="xc6SNElGDIM" data-bs-target="#yt-video"
+                                    data-bs-toggle="modal" src="./img/designer1/play.png" alt="" width="80">
+                                <img class="img-fluid" src="./img/yt-video/designer1/xc6SNElGDIM-HD.jpeg" alt="">
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="designer-bannerslider-mb play-mb">
+                        <div class="deigner-slick">
+                            <div style="position: relative;">
+                                <img class="playbutton-mb play-mb" data-slide="0" data-info="XlPxHa9BcKY" data-bs-toggle="modal"
+                                    data-bs-target="#yt-video-mb1" src="./img/designer1/play.png" alt="" width="80">
+                                <img class="img-fluid" src="./img/yt-video/designer1/XlPxHa9BcKY-HD.jpeg" alt="">
+                            </div>
+                        </div>
+
+                        <div class="deigner-slick">
+                            <div style="position: relative;">
+                                <div class="text-center">
+                                    <img class="playbutton-mb play-mb" data-slide="1" data-info="xc6SNElGDIM" data-bs-target="#yt-video-mb2"
+                                        data-bs-toggle="modal" src="./img/designer1/play.png" alt="" width="80">
+                                </div>
+                                <img class="img-fluid" src="./img/yt-video/designer1/xc6SNElGDIM-HD.jpeg" alt="">
+                            </div>
+                        </div>
+
+                        <div class="deigner-slick">
+                            <div class="position: relative;">
+                                <img class="playbutton-mb play-mb" data-slide="2" data-info="xc6SNElGDIM" data-bs-target="#yt-video-mb3"
+                                    data-bs-toggle="modal" src="./img/designer1/play.png" alt="" width="80">
+                                <img class="img-fluid" src="./img/yt-video/designer1/xc6SNElGDIM-HD.jpeg" alt="">
+                            </div>
+                        </div>
+                    </div>
+
                     <div class="work-text text-start">
                         <p class="fw-bold mb-0">三宅一秀空間創意</p>
                         <p class="fw-bold">SHOWHOUSE Interior Design</p>
@@ -137,7 +194,6 @@
                             data-bs-target="#exampleModal">
                             <div
                                 style="height:450px; background: url(./img/designer1/Portfolio/11185/designer337_38_01.jpg); background-repeat: no-repeat; background-size:cover;">
-
                             </div>
                         </div>
                         <div style="cursor: pointer;" class="col-md-3 col-lg-3 pe-2" data-bs-toggle="modal"
@@ -477,7 +533,8 @@
             </div>
         </div>
         <div style="width: 90vw; position: relative; z-index: 100;" class="gotop2 text-end">
-            <img data-gt-target="#top" data-gt-duration="500" data-gt-offset="0" style="position: absolute; bottom:10px; right:20px;" width="60" src="./img/gotop1.png" alt="">
+            <img data-gt-target="#top" data-gt-duration="500" data-gt-offset="0"
+                style="position: absolute; bottom:10px; right:20px;" width="60" src="./img/gotop1.png" alt="">
         </div>
     </section>
 
@@ -491,6 +548,110 @@
     </footer>
 
 
+    <div class="closeplay modal fade" id="yt-video" tabindex="-1" aria-labelledby="exampleModalLabel1"
+        aria-hidden="true">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content bg-transparent border-0">
+
+                <div id="video-modal" class="modal-body">
+                    <style>
+                        .embed-container {
+                            position: relative;
+                            padding-bottom: 56.25%;
+                            height: 0;
+                            overflow: hidden;
+                            max-width: 100%;
+                        }
+
+                        .embed-container iframe,
+                        .embed-container object,
+                        .embed-container embed {
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            width: 100%;
+                            height: 100%;
+                        }
+                    </style>
+                    <div class='embed-container'><iframe class='youtube-video' src='https://www.youtube.com/embed//XlPxHa9BcKY' frameborder='0' allowfullscreen
+                            height="394" allow="autoplay;"></iframe></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="closeplay modal fade modal-mb" id="yt-video-mb1" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content bg-transparent border-0">
+
+            <div id="video-modal" class="modal-body modal-box-mb">
+                <div class="designer-bannerslider2">
+                    <div class="deigner-slick">
+                        <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+                        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe class='youtube-video2' src='https://www.youtube.com/embed//XlPxHa9BcKY?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
+                    </div>
+                    <div class="deigner-slick">
+                        <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+                        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe class='youtube-video2' src='https://www.youtube.com/embed//xc6SNElGDIM?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
+                    </div>
+                    <div class="deigner-slick">
+                        <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+                        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe class='youtube-video2' src='https://www.youtube.com/embed//xc6SNElGDIM?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
+                    </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="closeplay modal fade modal-mb" id="yt-video-mb2" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content bg-transparent border-0">
+
+            <div id="video-modal" class="modal-body modal-box-mb">
+                <div class="designer-bannerslider2">
+                    <div class="deigner-slick">
+                        <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+                        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe class='youtube-video2' src='https://www.youtube.com/embed//xc6SNElGDIM?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
+                    </div>
+                    <div class="deigner-slick">
+                        <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+                        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe class='youtube-video2' src='https://www.youtube.com/embed//XlPxHa9BcKY?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
+                    </div>
+                    <div class="deigner-slick">
+                        <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+                        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe class='youtube-video2' src='https://www.youtube.com/embed//xc6SNElGDIM?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
+                    </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="closeplay modal fade modal-mb" id="yt-video-mb3" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content bg-transparent border-0">
+
+            <div id="video-modal" class="modal-body modal-box-mb">
+                <div class="designer-bannerslider2">
+                    <div class="deigner-slick">
+                        <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+                        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe class='youtube-video2' src='https://www.youtube.com/embed//xc6SNElGDIM?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
+                    </div>
+                    <div class="deigner-slick">
+                        <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+                        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe class='youtube-video2' src='https://www.youtube.com/embed//XlPxHa9BcKY?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
+                    </div>
+                    <div class="deigner-slick">
+                        <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+                        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe class='youtube-video2' src='https://www.youtube.com/embed//xc6SNElGDIM?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
+                    </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
         integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
         crossorigin="anonymous"></script>
@@ -500,8 +661,9 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
     <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+
     <script src="./goto.js"></script>
-</body>
+    
 </body>
 
 </html>

designer2.html

@@ -80,8 +80,66 @@
                         <p class="ps-1 fw-bold">Interior Design Masters</p>
                     </div>
                 </div>
-                <div class="video col-md-6 col-lg-6 text-center" style="background-image: url(./img/designer1/video.png);">
-                    <img class="playbutton" src="./img/designer1/play.png" alt="">
+                <div class="video col-md-6 col-lg-6 text-center">
+                    <div class="designer-bannerslider play-pc">
+
+                        <div class="deigner-slick">
+                            <div style="position: relative;">
+                                <img class="playbutton" data-info="2YzswkcIeq8" data-bs-toggle="modal"
+                                    data-bs-target="#yt-video" src="./img/designer1/play.png" alt="" width="80">
+                                <img class="img-fluid" src="./img/yt-video/designer2/2YzswkcIeq8-HD.jpeg"
+                                    alt="">
+                            </div>
+                        </div>
+
+                        <div class="deigner-slick">
+                            <div style="position: relative;">
+                                <div class="text-center">
+                                    <img class="playbutton" data-info="JDhBUyysHFU" data-bs-target="#yt-video" data-bs-toggle="modal" src="./img/designer1/play.png" alt=""
+                                        width="80">
+                                </div>
+                                <img class="img-fluid" src="./img/yt-video/designer2/JDhBUyysHFU-HD.jpeg"
+                                    alt="">
+                            </div>
+                        </div>
+
+                        <div class="deigner-slick">
+                            <div class="position: relative;">
+                                <img class="playbutton" data-info="u71eFjrMGrc" data-bs-target="#yt-video" data-bs-toggle="modal" src="./img/designer1/play.png" alt="" width="80">
+                                <img class="img-fluid" src="./img/yt-video/designer2/u71eFjrMGrc-HD.jpeg"
+                                    alt="">
+                            </div>
+                        </div>
+
+                    </div>
+
+                    <div class="designer-bannerslider-mb play-mb">
+                        <div class="deigner-slick">
+                            <div style="position: relative;">
+                                <img class="playbutton-mb play-mb" data-slide="0" data-info="2YzswkcIeq8" data-bs-toggle="modal"
+                                    data-bs-target="#yt-video-mb1" src="./img/designer1/play.png" alt="" width="80">
+                                <img class="img-fluid" src="./img/yt-video/designer2/2YzswkcIeq8-HD.jpeg" alt="">
+                            </div>
+                        </div>
+
+                        <div class="deigner-slick">
+                            <div style="position: relative;">
+                                <div class="text-center">
+                                    <img class="playbutton-mb play-mb" data-slide="1" data-info="JDhBUyysHFU" data-bs-target="#yt-video-mb2"
+                                        data-bs-toggle="modal" src="./img/designer1/play.png" alt="" width="80">
+                                </div>
+                                <img class="img-fluid" src="./img/yt-video/designer2/JDhBUyysHFU-HD.jpeg" alt="">
+                            </div>
+                        </div>
+
+                        <div class="deigner-slick">
+                            <div class="position: relative;">
+                                <img class="playbutton-mb play-mb" data-slide="2" data-info="u71eFjrMGrc" data-bs-target="#yt-video-mb3"
+                                    data-bs-toggle="modal" src="./img/designer1/play.png" alt="" width="80">
+                                <img class="img-fluid" src="./img/yt-video/designer2/u71eFjrMGrc-HD.jpeg" alt="">
+                            </div>
+                        </div>
+                    </div>
                     <div class="work-text2 text-start">
                         <p class="fw-bold mb-0">采品室內設計</p>
                         <p class="fw-bold">CAI-PIN INTERIOR DESIGN</p>
@@ -596,6 +654,115 @@
         <p class="mb-0">幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.</p>
     </footer>
 
+    <div class="closeplay modal fade" id="yt-video" tabindex="-1" aria-labelledby="exampleModalLabel1"
+    aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content bg-transparent border-0">
+            <div class="modal-header border-0 pb-0">
+                <h5 class="modal-title" id="exampleModalLabel"></h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+                    aria-label="Close"><img src="./img/close.svg" alt=""></button>
+            </div>
+            <div id="video-modal" class="modal-body">
+                <style>
+                    .embed-container {
+                        position: relative;
+                        padding-bottom: 56.25%;
+                        height: 0;
+                        overflow: hidden;
+                        max-width: 100%;
+                    }
+
+                    .embed-container iframe,
+                    .embed-container object,
+                    .embed-container embed {
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                    }
+                </style>
+                <div class='embed-container'><iframe class='youtube-video'
+                        src='https://www.youtube.com/embed//XfTQ2uIWWbA' frameborder='0' allowfullscreen
+                        height="394" allow="autoplay;"></iframe></div>
+            </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="closeplay modal fade modal-mb" id="yt-video-mb1" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content bg-transparent border-0">
+
+        <div id="video-modal" class="modal-body modal-box-mb">
+            <div class="designer-bannerslider2">
+                <div class="deigner-slick">
+                    <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe class='youtube-video2' src='https://www.youtube.com/embed//2YzswkcIeq8?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
+                </div>
+                <div class="deigner-slick">
+                    <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe class='youtube-video2' src='https://www.youtube.com/embed//JDhBUyysHFU?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
+                </div>
+                <div class="deigner-slick">
+                    <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe class='youtube-video2' src='https://www.youtube.com/embed//u71eFjrMGrc?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
+                </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="closeplay modal fade modal-mb" id="yt-video-mb2" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content bg-transparent border-0">
+
+        <div id="video-modal" class="modal-body modal-box-mb">
+            <div class="designer-bannerslider2">
+                <div class="deigner-slick">
+                    <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe class='youtube-video2' src='https://www.youtube.com/embed//JDhBUyysHFU?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
+                </div>
+                <div class="deigner-slick">
+                    <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe class='youtube-video2' src='https://www.youtube.com/embed//u71eFjrMGrc?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
+                </div>
+                <div class="deigner-slick">
+                    <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe class='youtube-video2' src='https://www.youtube.com/embed//2YzswkcIeq8?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
+                </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="closeplay modal fade modal-mb" id="yt-video-mb3" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content bg-transparent border-0">
+
+        <div id="video-modal" class="modal-body modal-box-mb">
+            <div class="designer-bannerslider2">
+                <div class="deigner-slick">
+                    <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe class='youtube-video2' src='https://www.youtube.com/embed//u71eFjrMGrc?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
+                </div>
+                <div class="deigner-slick">
+                    <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe class='youtube-video2' src='https://www.youtube.com/embed//2YzswkcIeq8?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
+                </div>
+                <div class="deigner-slick">
+                    <!-- <img class="img-fluid" src="./img/designer3/Portfolio/12947/designer735_01_01.jpg" alt=""> -->
+                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe class='youtube-video2' src='https://www.youtube.com/embed//JDhBUyysHFU?enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>
+                </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
 
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
         integrity="sha244-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
@@ -609,6 +776,6 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
     <script src="./goto.js"></script>
 </body>
-</body>
+
 
 </html>

designer3.html

@@ -80,8 +80,18 @@
                         <p class="ps-1 fw-bold">Interior Design Masters</p>
                     </div>
                 </div>
-                <div class="video col-md-6 col-lg-6 text-center" style="background-image: url(./img/designer1/video.png);">
-                    <img class="playbutton" src="./img/designer1/play.png" alt="">
+                <div class="video col-md-6 col-lg-6 text-center">
+                    <div class="designer-bannerslider">
+
+                        <div class="deigner-slick">
+                            <div style="position: relative;">
+                                <img class="playbutton" data-info="UfRZikvLJkc" data-bs-toggle="modal"
+                                    data-bs-target="#yt-video" src="./img/designer1/play.png" alt="" width="80">
+                                <img class="img-fluid" src="./img/yt-video/designer3/UfRZikvLJkc-HD.jpeg"
+                                    alt="">
+                            </div>
+                        </div>
+                    </div>
                     <div class="work-text3 text-start">
                         <p class="fw-bold mb-0">恆星設計</p>
                         <p class="fw-bold">STAR INTERIOR DESIGN</p>
@@ -472,6 +482,46 @@
         <p class="mb-0">幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.</p>
     </footer>
 
+    
+    <div class="closeplay modal fade" id="yt-video" tabindex="-1" aria-labelledby="exampleModalLabel1"
+    aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content bg-transparent border-0">
+            <!-- <div class="modal-header border-0 pb-0">
+                <h5 class="modal-title" id="exampleModalLabel"></h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+                    aria-label="Close"><img src="./img/close.svg" alt=""></button>
+            </div> -->
+            <div id="video-modal" class="modal-body">
+                <style>
+                    .embed-container {
+                        position: relative;
+                        padding-bottom: 56.25%;
+                        height: 0;
+                        overflow: hidden;
+                        max-width: 100%;
+                    }
+
+                    .embed-container iframe,
+                    .embed-container object,
+                    .embed-container embed {
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                    }
+                </style>
+                <div class='embed-container'><iframe class='youtube-video'
+                        src='https://www.youtube.com/embed//UfRZikvLJkc' frameborder='0' allowfullscreen
+                        height="394" allow="autoplay;"></iframe></div>
+            </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
 
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
         integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
@@ -484,6 +534,5 @@
     <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
     <script src="./goto.js"></script>
 </body>
-</body>
 
 </html>

designer4.html

@@ -66,7 +66,7 @@
         </div>
     </div>
     <section class="banner">
-        <div class="designer-content">
+        <div class="designer-content" id="designer4">
             <div class="row px-0 mx-0">
                 <div class="designer-img col-md-6 col-lg-6">
                     <div class="d-flex justify-content-end">
@@ -78,8 +78,19 @@
                         <p class="ps-1 fw-bold">Interior Design Masters</p>
                     </div>
                 </div>
-                <div class="video col-md-6 col-lg-6 text-center" style="background-image: url(./img/designer1/video.png);">
-                    <img class="playbutton" src="./img/designer1/play.png" alt="">
+                <div class="video col-md-6 col-lg-6 text-center">
+                    <div class="designer-bannerslider">
+
+                        <div class="deigner-slick">
+                            <div style="position: relative;">
+                                <img class="playbutton" data-info="hLRv7olQskM" data-bs-toggle="modal"
+                                    data-bs-target="#yt-video" src="./img/designer1/play.png" alt="" width="80">
+                                <img class="img-fluid" src="./img/yt-video/designer4/hLRv7olQskM-HD.jpeg"
+                                    alt="">
+                            </div>
+                        </div>
+
+                    </div>
                     <div class="work-text4 text-start">
                         <p class="fw-bold mb-0">麻石設計</p>
                         <p class="fw-bold">MUST DESIGNn</p>
@@ -471,6 +482,48 @@
         <p class="mb-0">幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.</p>
     </footer>
 
+    <div class="closeplay modal fade" id="yt-video" tabindex="-1" aria-labelledby="exampleModalLabel1"
+    aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content bg-transparent border-0">
+            <!-- <div class="modal-header border-0 pb-0">
+                <h5 class="modal-title" id="exampleModalLabel"></h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+                    aria-label="Close"><img src="./img/close.svg" alt=""></button>
+            </div> -->
+            <div id="video-modal" class="modal-body">
+                <style>
+                    .embed-container {
+                        position: relative;
+                        padding-bottom: 56.25%;
+                        height: 0;
+                        overflow: hidden;
+                        max-width: 100%;
+                    }
+
+                    .embed-container iframe,
+                    .embed-container object,
+                    .embed-container embed {
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                    }
+                </style>
+                <div class='embed-container'><iframe class='youtube-video'
+                        src='https://www.youtube.com/embed//hLRv7olQskM' frameborder='0' allowfullscreen
+                        height="394" allow="autoplay;"></iframe></div>
+            </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+
+
 
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
         integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
@@ -483,6 +536,6 @@
     <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
     <script src="./goto.js"></script>
 </body>
-</body>
+
 
 </html>

goto.js

@@ -2,53 +2,112 @@
 
 
 
+$('.designer-bannerslider').slick({
+  slidesToShow: 1, //預設 1 幻燈片顯示幾張
+  slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
+  arrows: true, // 預設 true 左右箭頭是否顯示
+  dots: true,
+  prevArrow: '<button type="button" class="slick-prev"><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px; transform: rotate(180deg);" src="./img/sec04/arrow-left.png" alt=""><div></button>',
+  nextArrow: '<button type="button" class="slick-next"><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png" alt=""><div></button>',
+});
+
+
+$('.designer-bannerslider-mb').slick({
+  slidesToShow: 1, //預設 1 幻燈片顯示幾張
+  slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
+  arrows: false, // 預設 true 左右箭頭是否顯示
+  dots: true,
+  prevArrow: '<button type="button" class="slick-prev"><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px; transform: rotate(180deg);" src="./img/sec04/arrow-left.png" alt=""><div></button>',
+  nextArrow: '<button type="button" class="slick-next"><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png" alt=""><div></button>',
+});
+
+
+
+
+
+
+
 $('designer-nav').hide();
 
 $(".item-down").click(function () {
   $('.designer-nav').slideToggle();
 });
 
+$(".playbutton").click(function () {
+  var videosrc = $(this).data("info");
+  $('.youtube-video').attr('src', `https://www.youtube.com/embed//${videosrc}?autoplay=1`);
+});
+
+$(".btn-close").click(function () {
+  $('.youtube-video').attr('src', ``);
+});
+
+$('#yt-video').on('hidden.bs.modal', function () {
+  $('.youtube-video').attr('src', ``);
+});
+
+$('#yt-video-mb').on('hidden.bs.modal', function () {
+  $('.youtube-video').attr('src', ``);
+});
+
+let videoId = ['XlPxHa9BcKY', 'xc6SNElGDIM', 'xc6SNElGDIM'];
 
+var index=0;
 
-$("*").each(function (index, element) {
-  // 此元素被點選後執行
-  $(this).click(function (e) {
-    // 取得被點選元素的屬性：data-gt-target
-    var target = $(this).attr("data-gt-target");
-    var duration = $(this).attr("data-gt-duration");
-    var offset = $(this).attr("data-gt-offset");
+function getSlideNNext(){
+  index++
+  if (index == videoId.length) index = 0; 
+  console.log(videoId[index]);
 
-    // JS 語法：判斷式
-    // if (條件) {程式區塊}
-    // 當條件成立，會執行程式區塊
+  
+};
 
-    // 如果 目標有資料 才會執行 { } 內的程式
-    // 避免出現 undefine (未定義 - 不存在的資料)
-    if (target) {
-      //console.log("目標：" + target);
-      //console.log("時間：" + duration);
-      //console.log("位移：" + offset);
+$(document).on("click", ".slick-next", function (event) {
+  
+  getSlideNNext();
+  $('.youtube-video2').each(function() {
+    this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
+  });
+});
 
-      // 上方位置 = 目標區塊.位移().上方位置
-      var top = $(target).offset().top;
-      //console.log("要前往元素的上方位置：" + top);
+function getSlidePrev(){
+  index--
+  if (index == -1) index = videoId.length - 1;
+  console.log(videoId[index]);
 
-      // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
-      // parseInt() 將文字轉為數字
+};
 
-      $("html").stop().animate({
-        scrollTop: top - offset
-      }, parseInt(duration));
-    }
+$(document).on("click", ".slick-prev", function (event) {
+  
+  getSlidePrev();
+  $('.youtube-video2').each(function() {
+    this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
   });
+  
 });
 
-// 避免動畫與使用者滾輪衝突
-// html 在滾動滾輪時 停止 html 所有效果
-$("html").on("mousewheel", function () {
-  $("html").stop();
+$('.designer-bannerslider2').slick({
+  slidesToShow: 1, //預設 1 幻燈片顯示幾張
+  slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
+  arrows: true, // 預設 true 左右箭頭是否顯示
+  dots: true,
+  prevArrow: '<button type="button" class="slick-prev""><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px; transform: rotate(180deg);" src="./img/sec04/arrow-left.png" alt=""><div></button>',
+  nextArrow: '<button type="button" class="slick-next"><div class="slick-arrow-slider d-flex justify-content-center align-items-center" style="width:50px; height:50px;"><img class="arrow-img" style="width: 15px;" src="./img/sec04/arrow.png" alt=""><div></button>',
+
+});
+
+$(".play-mb").click(function () {
+  // $('.modal-box-mb').css('width','100%');
+  var videosrc = $(this).data("info");
+  var slidenumber = $(this).data("slide");
+  
+  console.log(slidenumber);
+  console.log(videosrc);
+
+  $('.designer-bannerslider2').slick('slickGoTo',0);
 });
 
+
 // 手機選單彈跳視窗
 $("#menu-box2").hide();
 $("#menu-box").hide();
@@ -66,62 +125,8 @@ $(".link").click(function () {
   });
 });
 
-// 文字動畫
-const sec = document.querySelectorAll('.sec');
-console.log(sec.length);
-const title = document.querySelectorAll('.title');
-const cover = document.querySelectorAll('.cover');
-const test_content = document.querySelectorAll('.test_content');
-
-function checkSlide() {
-    console.log('pass');
-    sec.forEach((block, i) => {
-        // half way through the image
-        //const test = document.querySelector('.test');
-        const slideInAt = window.scrollY + window.innerHeight;
-        console.log(slideInAt);
-        //console.log(test.offsetTop);
-        // bottom of the image
-        const isHalfShown = slideInAt > block.offsetTop;
-        if (isHalfShown) {
-            console.log('active');
-            title[i].style.bottom = '0em';
-            //document.querySelector('.title').style.bottom = '0em';
-            test_content[i].classList.add('fadein');
-            cover[i].classList.add('slidein');
-            //test.firstElementChild.classList.add('fadein');
-
-            //test_content[i].fadeIn(1500);
-
-            // $('.test_content').fadeIn(1500);
-        }
-    })
-};
-window.addEventListener('scroll', checkSlide);
-window.addEventListener('scroll', sec03PlantImg);
-window.addEventListener('scroll', sec03BottomImg);
-
-console.log(document.querySelector('.sec03-big').offsetTop);
-
-function sec03PlantImg() {
-  const slideInAt = window.scrollY + window.innerHeight;
-  const toTop = document.querySelector('.sec03-big').offsetTop + document.querySelector('.sec03_plant').offsetTop;
-  const isHalfShown = slideInAt > toTop ;
-  console.log(toTop);
-  if (isHalfShown) {
-    document.querySelector('.sec03_plant .p_cover').classList.add('slidein');
-  }
-};
 
-function sec03BottomImg() {
-  const slideInAt = window.scrollY + window.innerHeight;
-  const toTop = document.querySelector('.sec03-big').offsetTop + document.querySelector('.sec_bottom').offsetTop + 300;
-  const isHalfShown = slideInAt > toTop ;
-  console.log(toTop);
-  if (isHalfShown) {
-    document.querySelector('.sec_bottom .b_cover').classList.add('slidein');
-  }
-};
+
 // var flagX = 0;
 // var flagXM = 0;
 
@@ -144,25 +149,3 @@ function sec03BottomImg() {
 //   $("#carousel-example-generic").carousel(direction);
 // }
 
-var scene = document.getElementById('scene');
-var parallaxInstance = new Parallax(scene);
-
-var scene1 = document.getElementById('scene1');
-var parallaxInstance = new Parallax(scene1);
-
-var scene2 = document.getElementById('scene2');
-var parallaxInstance = new Parallax(scene2);
-
-$(window).bind('scroll',function(e){
-  parallaxScroll();
- });
-
- function parallaxScroll(){
-	var scrolled = $(window).scrollTop();
-	$('.object178').css('top',(200-(scrolled*.2))+'px');
-  $('.object188').css('top',(150-(scrolled*.1))+'px');
-	$('.object177').css('top',(600-(scrolled*.25))+'px');
-	$('.object182').css('top',(400-(scrolled*.2))+'px');
-  $('.object241').css('top',(600-(scrolled*.1))+'px');
-  $('.object242').css('top',(700-(scrolled*.1))+'px');
-}

index.html

@@ -578,12 +578,7 @@
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
     <script src="./goto.js"></script>
-
-    <script>
-
-
-    </script>
-</body>
+    <script src="./index.js"></script>   
 </body>
 
 </html>

index.js

@@ -0,0 +1,119 @@
+
+$("*").each(function (index, element) {
+  // 此元素被點選後執行
+  $(this).click(function (e) {
+    // 取得被點選元素的屬性：data-gt-target
+    var target = $(this).attr("data-gt-target");
+    var duration = $(this).attr("data-gt-duration");
+    var offset = $(this).attr("data-gt-offset");
+
+    // JS 語法：判斷式
+    // if (條件) {程式區塊}
+    // 當條件成立，會執行程式區塊
+
+    // 如果 目標有資料 才會執行 { } 內的程式
+    // 避免出現 undefine (未定義 - 不存在的資料)
+    if (target) {
+      //console.log("目標：" + target);
+      //console.log("時間：" + duration);
+      //console.log("位移：" + offset);
+
+      // 上方位置 = 目標區塊.位移().上方位置
+      var top = $(target).offset().top;
+      //console.log("要前往元素的上方位置：" + top);
+
+      // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
+      // parseInt() 將文字轉為數字
+
+      $("html").stop().animate({
+        scrollTop: top - offset
+      }, parseInt(duration));
+    }
+  });
+});
+
+// 避免動畫與使用者滾輪衝突
+// html 在滾動滾輪時 停止 html 所有效果
+$("html").on("mousewheel", function () {
+  $("html").stop();
+});
+
+var scene = document.getElementById('scene');
+var parallaxInstance = new Parallax(scene);
+
+var scene1 = document.getElementById('scene1');
+var parallaxInstance = new Parallax(scene1);
+
+var scene2 = document.getElementById('scene2');
+var parallaxInstance = new Parallax(scene2);
+
+$(window).bind('scroll',function(e){
+  parallaxScroll();
+ });
+
+ function parallaxScroll(){
+	var scrolled = $(window).scrollTop();
+	$('.object178').css('top',(200-(scrolled*.2))+'px');
+  $('.object188').css('top',(150-(scrolled*.1))+'px');
+	$('.object177').css('top',(600-(scrolled*.25))+'px');
+	$('.object182').css('top',(400-(scrolled*.2))+'px');
+  $('.object241').css('top',(600-(scrolled*.1))+'px');
+  $('.object242').css('top',(700-(scrolled*.1))+'px');
+}
+
+// 文字動畫
+const sec = document.querySelectorAll('.sec');
+console.log(sec.length);
+const title = document.querySelectorAll('.title');
+const cover = document.querySelectorAll('.cover');
+const test_content = document.querySelectorAll('.test_content');
+
+function checkSlide() {
+    console.log('pass');
+    sec.forEach((block, i) => {
+        // half way through the image
+        //const test = document.querySelector('.test');
+        const slideInAt = window.scrollY + window.innerHeight;
+        console.log(slideInAt);
+        //console.log(test.offsetTop);
+        // bottom of the image
+        const isHalfShown = slideInAt > block.offsetTop;
+        if (isHalfShown) {
+            console.log('active');
+            title[i].style.bottom = '0em';
+            //document.querySelector('.title').style.bottom = '0em';
+            test_content[i].classList.add('fadein');
+            cover[i].classList.add('slidein');
+            //test.firstElementChild.classList.add('fadein');
+
+            //test_content[i].fadeIn(1500);
+
+            // $('.test_content').fadeIn(1500);
+        }
+    })
+};
+window.addEventListener('scroll', checkSlide);
+window.addEventListener('scroll', sec03PlantImg);
+window.addEventListener('scroll', sec03BottomImg);
+
+
+
+function sec03PlantImg() {
+  const slideInAt = window.scrollY + window.innerHeight;
+  const toTop = document.querySelector('.sec03-big').offsetTop + document.querySelector('.sec03_plant').offsetTop;
+  const isHalfShown = slideInAt > toTop ;
+  console.log(toTop);
+  if (isHalfShown) {
+    document.querySelector('.sec03_plant .p_cover').classList.add('slidein');
+  }
+};
+
+function sec03BottomImg() {
+  const slideInAt = window.scrollY + window.innerHeight;
+  const toTop = document.querySelector('.sec03-big').offsetTop + document.querySelector('.sec_bottom').offsetTop + 300;
+  const isHalfShown = slideInAt > toTop ;
+  console.log(toTop);
+  if (isHalfShown) {
+    document.querySelector('.sec_bottom .b_cover').classList.add('slidein');
+  }
+};

style.css

@@ -1506,7 +1506,7 @@ body {
 
 .designer-content #hr01 {
   position: relative;
-  bottom: 18vw;
+  bottom: 17vw;
   z-index: 3;
 }
 
@@ -1533,7 +1533,7 @@ body {
 
 .designer-content #hr02 {
   position: relative;
-  bottom: 18vw;
+  bottom: 16.5vw;
   z-index: 3;
 }
 
@@ -1554,7 +1554,7 @@ body {
 
 .designer-content #hr03 {
   position: relative;
-  bottom: 20vw;
+  bottom: 19vw;
   z-index: 3;
 }
 
@@ -1583,7 +1583,7 @@ body {
 
 .designer-content #hr04 {
   position: relative;
-  bottom: 14vw;
+  bottom: 12.5vw;
   z-index: 3;
 }
 
@@ -2106,23 +2106,6 @@ body {
   }
 }
 
-.designer-content .video .playbutton {
-  margin-top: 120px;
-}
-
-@media screen and (max-width: 1024px) {
-  .designer-content .video .playbutton {
-    width: 50px;
-    margin-top: 70px;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .designer-content .video .playbutton {
-    margin-top: 20vw;
-  }
-}
-
 .designer-content .video .work-text {
   position: absolute;
   bottom: 10vw;
@@ -2143,7 +2126,7 @@ body {
 
 .designer-content .video .work-text2 {
   position: absolute;
-  bottom: 10vw;
+  bottom: 9vw;
   font-size: 20px;
 }
 
@@ -2179,7 +2162,7 @@ body {
 
 .designer-content .video .work-text4 {
   position: absolute;
-  bottom: 7vw;
+  bottom: 5vw;
   font-size: 20px;
 }
 
@@ -2239,14 +2222,50 @@ body {
   }
 }
 
+#designer1 .designer-bannerslider {
+  margin-top: -30px;
+}
+
 #designer2 {
   padding-bottom: 10vw;
 }
 
+#designer2 .designer-bannerslider {
+  margin-top: -50px;
+}
+
 #designer3 {
   padding-bottom: 10vw;
 }
 
+#designer3 .designer-bannerslider {
+  margin-top: -50px;
+}
+
+@media screen and (max-width: 767px) {
+  #designer3 .designer-bannerslider {
+    margin-top: -10px;
+  }
+}
+
+#designer3 .designer-bannerslider .slick-dots {
+  display: none;
+}
+
+#designer4 .designer-bannerslider {
+  margin-top: -50px;
+}
+
+@media screen and (max-width: 767px) {
+  #designer4 .designer-bannerslider {
+    margin-top: -10px;
+  }
+}
+
+#designer4 .designer-bannerslider .slick-dots {
+  display: none;
+}
+
 #designer2-sec01 {
   margin-top: -200px;
 }
@@ -2659,4 +2678,142 @@ body {
     opacity: 1;
   }
 }
+
+.slick-prev:before, .slick-next:before {
+  display: none;
+}
+
+.slick-prev, .slick-next {
+  z-index: 100;
+}
+
+@media screen and (max-width: 767px) {
+  .slick-prev, .slick-next {
+    display: none;
+  }
+}
+
+.slick-next {
+  right: 3px;
+}
+
+.slick-dots li {
+  margin: 0px 0px;
+}
+
+.slick-dots li button:before {
+  font-size: 20px;
+  font-weight: 900;
+  top: 15px;
+  content: '○';
+  color: #555555;
+}
+
+.slick-dots li.slick-active button:before {
+  opacity: .75;
+  color: #555555;
+  content: '●';
+}
+
+.designer-bannerslider {
+  -webkit-box-shadow: 0px 20px 10px rgba(0, 0, 0, 0.2);
+          box-shadow: 0px 20px 10px rgba(0, 0, 0, 0.2);
+}
+
+.slick-arrow-slider {
+  opacity: 0.8;
+  background: #f6ded2;
+  border-radius: 50% 50% 50% 50% !important;
+}
+
+.slick-arrow-slider img {
+  -webkit-filter: invert(45%) sepia(1%) saturate(2047%) hue-rotate(329deg) brightness(95%) contrast(83%);
+          filter: invert(45%) sepia(1%) saturate(2047%) hue-rotate(329deg) brightness(95%) contrast(83%);
+}
+
+.playbutton {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  z-index: 101;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+@media screen and (max-width: 767px) {
+  .playbutton {
+    top: 10%;
+    left: 50%;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .playbutton {
+    width: 50px;
+    margin-top: 70px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .playbutton {
+    margin-top: 20vw;
+  }
+}
+
+.playbutton-mb {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  z-index: 101;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+@media screen and (max-width: 767px) {
+  .playbutton-mb {
+    top: 10%;
+    left: 50%;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .playbutton-mb {
+    width: 50px;
+    margin-top: 70px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .playbutton-mb {
+    margin-top: 20vw;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .modal-content {
+    margin-top: 50vw;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .play-pc {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 1025px) {
+  .play-mb {
+    display: none !important;
+  }
+}
+
+.modal-mb {
+  background: rgba(0, 0, 0, 0.8) !important;
+}
 /*# sourceMappingURL=style.css.map */

style.scss

@@ -1077,7 +1077,7 @@ body {
     }
     #hr01 {
         position: relative;
-        bottom: 18vw;
+        bottom: 17vw;
         z-index: 3;
         hr {
             background-color: $Font-color;
@@ -1096,7 +1096,7 @@ body {
     }
     #hr02 {
         position: relative;
-        bottom: 18vw;
+        bottom: 16.5vw;
         z-index: 3;
         hr {
             background-color: $Font-color;
@@ -1113,7 +1113,7 @@ body {
 
     #hr03 {
         position: relative;
-        bottom: 20vw;
+        bottom: 19vw;
         z-index: 3;
         hr {
             background-color: $Font-color;
@@ -1134,7 +1134,7 @@ body {
     }
     #hr04 {
         position: relative;
-        bottom: 14vw;
+        bottom: 12.5vw;
         z-index: 3;
         hr {
             background-color: $Font-color;
@@ -1469,16 +1469,20 @@ body {
             margin-top: 30px;
             height: 55vw;
         }
-        .playbutton {
-            margin-top: 120px;
-            @media screen and(max-width:$table) {
-                width: 50px;
-                margin-top: 70px;
-             }
-            @media screen and(max-width:$moblie) {
-                margin-top: 20vw;
-            }
-        }
+        // .playbutton {
+        //     position:absolute;
+        //     top:120px;
+        //     left:50%;
+        //     z-index: 101;
+        //     margin-top: 120px;
+        //     @media screen and(max-width:$table) {
+        //         width: 50px;
+        //         margin-top: 70px;
+        //      }
+        //     @media screen and(max-width:$moblie) {
+        //         margin-top: 20vw;
+        //     }
+        // }
         // 郁秀秀設計師
         .work-text {
             position: absolute;
@@ -1494,7 +1498,7 @@ body {
         // 盧慧珊設計師
         .work-text2 {
             position: absolute;
-            bottom: 10vw;
+            bottom: 9vw;
             font-size: 20px;
             @media screen and(max-width:$table) {
                 bottom: 3vw;
@@ -1518,7 +1522,7 @@ body {
         // 李宜蔓
         .work-text4 {
             position: absolute;
-            bottom: 7vw;
+            bottom: 5vw;
             font-size: 20px;
             @media screen and(max-width:$table) {
                 bottom: -1vw;
@@ -1561,12 +1565,48 @@ body {
         width: 110px;
     }
 }
+
+// 郁琇琇設計師
+#designer1 {
+    
+    .designer-bannerslider{
+        margin-top: -30px;
+    }
+}
+
 // 盧慧珊設計師
 #designer2 {
     padding-bottom: 10vw;
+
+    .designer-bannerslider{
+        margin-top: -50px;
+    }
 }
 #designer3 {
     padding-bottom: 10vw;
+    
+    .designer-bannerslider{
+        margin-top: -50px;
+        @media screen and(max-width:$moblie) {
+            margin-top: -10px;
+        }
+        .slick-dots {
+            display: none;
+        }
+    }
+
+}
+
+#designer4 {
+    .designer-bannerslider{
+        margin-top: -50px;
+        @media screen and(max-width:$moblie) {
+            margin-top: -10px;
+        }
+        .slick-dots {
+            display: none;
+        }
+    }
 }
 #designer2-sec01 {
     margin-top: -200px;
@@ -1887,3 +1927,126 @@ body {
         opacity: 1;
     }
 }
+
+
+.slick-prev:before,.slick-next:before {
+    display: none;
+
+}
+
+.slick-prev,.slick-next{
+    z-index: 100;
+    @media screen and(max-width:$moblie) {
+        display: none;
+    }
+}
+
+.slick-next{
+right:3px;
+}
+
+.slick-dots {
+    li{
+        // margin-top: 100px;
+        // 上右下左
+        margin:0px 0px ;
+        button:before{
+            font-size: 20px;
+            font-weight: 900;
+            top:15px;
+            content: '○';
+            color:#555555;
+        }
+    } 
+    li.slick-active button:before {
+        opacity: .75;
+        color: #555555;
+        content: '●';
+        
+    }
+}
+
+
+.designer-bannerslider{
+    box-shadow: 0px 20px 10px rgba(0,0,0,0.2);
+    
+
+}
+
+.slick-arrow-slider{
+  opacity: 0.8;
+    background: #f6ded2;
+    border-radius: 50% 50% 50% 50% !important;
+    img{
+        filter: invert(45%) sepia(1%) saturate(2047%) hue-rotate(329deg) brightness(95%) contrast(83%);
+    }
+    
+}
+
+.playbutton {
+    cursor: pointer;
+    position:absolute;
+    top:50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 101;
+    transition: 0.3s;
+    
+    @media screen and(max-width:$moblie) {
+        top:10%;
+        left: 50%;
+    }
+
+    @media screen and(max-width:$table) {
+        width: 50px;
+        margin-top: 70px;
+     }
+    @media screen and(max-width:$moblie) {
+        margin-top: 20vw;
+    }
+}
+
+.playbutton-mb {
+    cursor: pointer;
+    position:absolute;
+    top:50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 101;
+    transition: 0.3s;
+    
+    @media screen and(max-width:$moblie) {
+        top:10%;
+        left: 50%;
+    }
+
+    @media screen and(max-width:$table) {
+        width: 50px;
+        margin-top: 70px;
+     }
+    @media screen and(max-width:$moblie) {
+        margin-top: 20vw;
+    }
+}
+
+.modal-content{
+    @media screen and(max-width:$moblie) {
+        margin-top: 50vw;
+    }
+}
+
+.play-pc{
+    @media screen and(max-width:$moblie) {
+        display: none;
+    }
+}
+
+.play-mb{
+    @media screen and(min-width:$desktop) {
+        display: none !important;
+    }
+}
+
+.modal-mb{
+    background: rgba(0,0,0,0.8) !important; 
+}