頁面修正

about/about.css

@@ -197,6 +197,26 @@ body .arrow:hover {
   position: relative;
 }
 
+#banner .banner-filter {
+  position: absolute;
+  z-index: -1;
+}
+
+#banner .banner-filter .bannerfilter {
+  width: 100vw;
+  -o-object-fit: cover;
+     object-fit: cover;
+  height: 50vw;
+  -webkit-animation-delay: 0.1s;
+          animation-delay: 0.1s;
+}
+
+@media screen and (max-width: 767px) {
+  #banner .banner-filter .bannerfilter {
+    height: 80vh;
+  }
+}
+
 #banner #about-title {
   position: absolute;
   right: 50px;
@@ -211,13 +231,13 @@ body .arrow:hover {
 
 #banner #bannerdes-img {
   position: absolute;
-  z-index: -1;
+  z-index: -2;
   opacity: 1;
 }
 
 #banner #bannerdes-img .banner-img {
   width: 100vw;
-  height: 70vh;
+  height: 50vw;
   -o-object-fit: cover;
      object-fit: cover;
 }

about/about.scss

@@ -163,6 +163,20 @@ body {
 }
 #banner {
     position: relative;
+    .banner-filter {
+        position: absolute;
+        z-index:-1;
+        .bannerfilter{
+            width: 100vw;
+            object-fit: cover;
+            height: 50vw;
+            animation-delay:0.1s;
+            @media screen and(max-width:$moblie) {
+                height: 80vh;
+            }
+        }
+       
+    }
     #about-title {
         position: absolute;
         right: 50px;
@@ -173,11 +187,11 @@ body {
     }
     #bannerdes-img {
         position: absolute;
-        z-index: -1;
+        z-index: -2;
         opacity: 1;
         .banner-img {
             width: 100vw;
-            height: 70vh;
+            height: 50vw;
             object-fit: cover;
             @media screen and(max-width:$moblie) {
                 height: 80vh;

about/goto2.js

@@ -37,7 +37,7 @@ $(document).ready(function () {
                         aboutContent += ' \
                 <div class="row px-0 mx-0">\
                     <div class="condition col-12 col-lg-4 bg-white">\
-                        <h1 class="fs-3"><span style="color:#8DC21F" class="fw-bold fs-2">|</span>接案條件 condition</h1>\
+                        <h1 class="fs-3 pb-3"><span style="color:#8DC21F" class="fw-bold fs-2">|</span>接案條件 condition</h1>\
                         <table class="table">\
                             <tbody>\
                                 <tr>\
@@ -81,7 +81,7 @@ $(document).ready(function () {
                     </div >\
                     <div style="background: url(../img/about/sec01/idea.webp);  background-size: cover; background-repeat: no-repeat;"\
                         class="idea col-12 col-lg-4 text-white">\
-                        <h1 class="fs-3"><span style="color:#8DC21F" class="fw-bold fs-2">|</span>設計理念 idea</h1>\
+                        <h1 class="fs-3 pb-3"><span style="color:#8DC21F" class="fw-bold fs-2">|</span>設計理念 idea</h1>\
                         <table class="table table-borderless text-white">\
                         <tbody>\
                             <tr>\
@@ -94,7 +94,7 @@ $(document).ready(function () {
                     </div>\
                     <div style="background: url(../img/about/sec01/contact.webp);  background-size: cover;  background-repeat: no-repeat;"\
                         class="contact col-12 col-lg-4 text-white">\
-                        <h1 class="fs-3"><span style="color:#8DC21F" class="fw-bold fs-2">|</span>聯絡設計師 contact</h1>\
+                        <h1 class="fs-3 pb-3"><span style="color:#8DC21F" class="fw-bold fs-2">|</span>聯絡設計師 contact</h1>\
                         <table class="table text-white">\
                             <tbody>\
                                 <tr>\
@@ -183,7 +183,7 @@ $(document).ready(function () {
                        
                             if (msg[i].workVideo[j]==undefined) {
                                 aboutViedeo += ' \
-                                <div id="sec05" class="sec05-row row align-items-center h-100 w-100" style=" background: rgba(0, 0, 0, 0.8);text-align: center;">\
+                                <div id="sec05" class="sec05-row row align-items-center h-100 mx-0 w-100 px-0" style=" background: rgba(0, 0, 0, 0.8);text-align: center;">\
                                 <div style="padding:20vw 0px">\
                                     <h1 class="align-self-center" style="color:#86B81D;">Stay tuned !</h1>\
                                     <p class="align-self-center" style="color:#fff;  letter-spacing: 5px;">...敬請期待...</p>\
@@ -204,7 +204,7 @@ $(document).ready(function () {
                         var j =0;
                         if (msg[i].workMethod[j]==undefined) {
                             aboutMethod += ' \
-                            <div id="sec05" class="sec05-row row align-items-center h-100 mx-0 w-100" style=" background: rgba(0, 0, 0, 0.8);text-align: center;">\
+                            <div id="sec05" class="sec05-row row align-items-center h-100 mx-0 w-100 px-0" style=" background: rgba(0, 0, 0, 0.8);text-align: center;">\
                             <div style="padding:20vw 0px">\
                                 <h1 class="align-self-center" style="color:#86B81D;">Stay tuned !</h1>\
                                 <p class="align-self-center" style="color:#fff;  letter-spacing: 5px;">...敬請期待...</p>\

about/index.html

@@ -76,9 +76,12 @@
         </div>
     </section>
     <section id="banner">
+        <div class="banner-filter">
+            <img class="bannerfilter" src="../img/banner/filter.png" alt="">
+        </div>
         <a id="about-title" href="../index.html"><img  style="width:300px" src="../img/banner/bannertitle.png" alt=""></a>
         <div id="bannerdes-img" style="width: 100vw;">
-            <a href="../index.html"><img src="../img/about/banner/title.png" alt=""></a>
+            <!-- <a href="../index.html"><img src="../img/about/banner/title.png" alt=""></a> -->
             <!-- <img class="banner-img" style="width: 100vw;" src="./img/banner/banner-m.png" alt=""> -->
         </div>
         <div id="banner-container" class="container-fluid px-0">

index.html

@@ -70,8 +70,9 @@
                             alt=""></a>
                 </div>
                 <div class="nav-1">
-                    <a target="_blank" href="https://www.addtoany.com/ext/wechat/share/#url=https%3A%2F%2Fevent.hhh.com.tw%2F2021-Most-Favorite-Designers%2Findex.php&title="> <img src="./img/nav-bottom/Icon simple-wechat.png"
-                            alt=""></a>
+                    <a target="_blank"
+                        href="https://www.addtoany.com/ext/wechat/share/#url=https%3A%2F%2Fevent.hhh.com.tw%2F2021-Most-Favorite-Designers%2Findex.php&title=">
+                        <img src="./img/nav-bottom/Icon simple-wechat.png" alt=""></a>
                 </div>
                 <div style="display: none;" class="col-0">
                     <a target="_blank" href="https://hhh.com.tw/"> <img src="./img/nav/logo-main-1-1.webp" alt=""></a>
@@ -81,11 +82,15 @@
 
         </section>
         <section id="banner">
-          
+            <div class="banner-filter">
+                <img class="bannerfilter" src="./img/banner/filter.png" alt="">
+            </div>
             <div id="bannerdes-img" style="width: 100vw;">
-                <!-- <img class="banner-img" style="width: 100vw;" src="./img/banner/banner-m.png" alt=""> -->
+
             </div>
 
+
+
             <div id="banner-container" class="container-fluid px-0">
                 <!-- 電腦版 -->
                 <div class="banner-des row vertical align-items-end px-0 mx-0">
@@ -100,7 +105,7 @@
                         <img class="img-fluid" src="./img/banner/28.png" alt="">
                     </div> -->
                 </div>
-             
+
                 <!-- 手機板 -->
                 <div class="banner-m row vertical align-items-end px-0 mx-0">
                     <!-- <div class="bannerm-1 col-7">
@@ -117,7 +122,7 @@
                 <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="">
 
@@ -128,7 +133,7 @@
                             </a>
 
                         </div>
-                        <div id="465" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <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"
                                     alt="">
                             </a>
@@ -138,7 +143,7 @@
                                 <p>劉獻文</p>
                             </div>
                         </div>
-                        <div id="33" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="33" 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/33.jpg?v12"
                                     alt="">
                             </a>
@@ -147,7 +152,7 @@
                                 <p>張靜峰</p>
                             </div>
                         </div>
-                        <div id="688" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="688" 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/688.jpg?v12"
                                     alt="">
                             </a>
@@ -156,7 +161,7 @@
                                 <p>王誌霆</p>
                             </div>
                         </div>
-                        <div id="278" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="278" 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/278.jpg?v12"
                                     alt="">
                             </a>
@@ -165,7 +170,7 @@
                                 <p>邱炫達</p>
                             </div>
                         </div>
-                        <div id="385" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="385" 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/385.jpg?v12"
                                     alt="">
                             </a>
@@ -174,7 +179,7 @@
                                 <p>簡瑋琪</p>
                             </div>
                         </div>
-                        <div id="505" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="505" 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/505.jpg?v12"
                                     alt="">
                             </a>
@@ -183,7 +188,7 @@
                                 <p>胡捷荏</p>
                             </div>
                         </div>
-                        <div id="555" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="555" 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/555.jpg?v12"
                                     alt="">
                             </a>
@@ -192,7 +197,7 @@
                                 <p>曾智和</p>
                             </div>
                         </div>
-                        <div id="651" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="651" 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/651.jpg?v12"
                                     alt="">
                             </a>
@@ -201,7 +206,7 @@
                                 <p>李柔瑩</p>
                             </div>
                         </div>
-                        <div id="291" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="291" 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/291.jpg?v12"
                                     alt="">
                             </a>
@@ -210,7 +215,7 @@
                                 <p>張芷融</p>
                             </div>
                         </div>
-                        <div id="491" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="491" 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/491.jpg?v12"
                                     alt="">
                             </a>
@@ -219,7 +224,7 @@
                                 <p>黃仲均</p>
                             </div>
                         </div>
-                        <div id="301" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="301" 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/301.jpg?v12"
                                     alt="">
                             </a>
@@ -228,7 +233,7 @@
                                 <p>李宗育</p>
                             </div>
                         </div>
-                        <div id="347" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="347" 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/347.jpg?v12"
                                     alt="">
                             </a>
@@ -237,7 +242,7 @@
                                 <p>李千惠</p>
                             </div>
                         </div>
-                        <div id="363" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="363" 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/363.jpg?v12"
                                     alt="">
                             </a>
@@ -246,7 +251,7 @@
                                 <p>廖笠庭 周言叡</p>
                             </div>
                         </div>
-                        <div id="438" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="438" 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/438.jpg?v12"
                                     alt="">
                             </a>
@@ -256,7 +261,7 @@
                                 <p>卜冠程&木博士設計團隊</p>
                             </div>
                         </div>
-                        <div  id="65" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img class="img-fluid"
+                        <div id="65" 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/65.jpg?v12"
                                     alt="">
                             </a>
@@ -265,7 +270,7 @@
                                 <p>楊詩韻</p>
                             </div>
                         </div>
-                        <div id="474" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="474" 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/474.jpg?v12"
                                     alt="">
                             </a>
@@ -274,7 +279,7 @@
                                 <p>劉倢妤</p>
                             </div>
                         </div>
-                        <div id="436" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="436" 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/436.jpg?v12"
                                     alt="">
                             </a>
@@ -283,7 +288,7 @@
                                 <p>陳偉立</p>
                             </div>
                         </div>
-                        <div id="158" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="158" 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/158.jpg?v12"
                                     alt="">
                             </a>
@@ -292,7 +297,7 @@
                                 <p>王立崢</p>
                             </div>
                         </div>
-                        <div id="507" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="507" 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/507.jpg?v12"
                                     alt="">
                             </a>
@@ -301,7 +306,7 @@
                                 <p>陳琬婷</p>
                             </div>
                         </div>
-                        <div id="23" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="23" 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/23.jpg?v12"
                                     alt="">
                             </a>
@@ -310,7 +315,7 @@
                                 <p>周靖雅</p>
                             </div>
                         </div>
-                        <div id="712"  class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img class="img-fluid"
+                        <div id="712" 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/712.jpg?v12"
                                     alt="">
                             </a>
@@ -319,7 +324,7 @@
                                 <p>張書源</p>
                             </div>
                         </div>
-                        <div id="279" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="279" 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/279.jpg?v12"
                                     alt="">
                             </a>
@@ -328,7 +333,7 @@
                                 <p>郁琇琇</p>
                             </div>
                         </div>
-                        <div id="402" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="402" 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/402.jpg?v12"
                                     alt="">
                             </a>
@@ -337,7 +342,7 @@
                                 <p>張舜淵 林術榮 李晴沛</p>
                             </div>
                         </div>
-                        <div id="28" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="28" 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/28.jpg?v12"
                                     alt="">
                             </a>
@@ -346,7 +351,7 @@
                                 <p>張馨</p>
                             </div>
                         </div>
-                        <div id="79" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="79" 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/79.jpg?v12"
                                     alt="">
                             </a>
@@ -355,7 +360,7 @@
                                 <p>張成一</p>
                             </div>
                         </div>
-                        <div  id="131" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img class="img-fluid"
+                        <div id="131" 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/131.jpg?v12"
                                     alt="">
                             </a>
@@ -364,7 +369,7 @@
                                 <p>林欣璇</p>
                             </div>
                         </div>
-                        <div id="594" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="594" 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/594.jpg?v12"
                                     alt="">
                             </a>
@@ -373,7 +378,7 @@
                                 <p>魏子涵</p>
                             </div>
                         </div>
-                        <div  id="672" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img class="img-fluid"
+                        <div id="672" 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/672.jpg?v12"
                                     alt="">
                             </a>
@@ -382,7 +387,7 @@
                                 <p>毛至文</p>
                             </div>
                         </div>
-                        <div id="680" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="680" 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/680.jpg?v12"
                                     alt="">
                             </a>
@@ -391,7 +396,7 @@
                                 <p>張禾溥、舒皓</p>
                             </div>
                         </div>
-                        <div id="500" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="500" 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/500.jpg?v12"
                                     alt="">
                             </a>
@@ -400,7 +405,7 @@
                                 <p>劉啟全、陳韻如、方人凱</p>
                             </div>
                         </div>
-                        <div id="418" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="418" 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/418.jpg?v12"
                                     alt="">
                             </a>
@@ -409,7 +414,7 @@
                                 <p>盧慧珊&采品設計團隊</p>
                             </div>
                         </div>
-                        <div id="364" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="364" 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/364.jpg?v12"
                                     alt="">
                             </a>
@@ -418,7 +423,7 @@
                                 <p>馬愷君 Maggie</p>
                             </div>
                         </div>
-                        <div id="423" class="secimg card col-4  col-lg-2 mx-0 px-0 border-0"><a><img  class="img-fluid"
+                        <div id="423" 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/423.jpg?v12"
                                     alt="">
                             </a>

style.css

@@ -204,9 +204,33 @@ body .arrow:hover {
   position: relative;
 }
 
-#banner #bannerdes-img {
+#banner .banner-filter {
   position: absolute;
   z-index: -1;
+}
+
+#banner .banner-filter .bannerfilter {
+  width: 100vw;
+  -o-object-fit: cover;
+     object-fit: cover;
+  height: 50vw;
+  -webkit-animation-name: Picture2;
+          animation-name: Picture2;
+  -webkit-animation-duration: 1s;
+          animation-duration: 1s;
+  -webkit-animation-delay: 0.1s;
+          animation-delay: 0.1s;
+}
+
+@media screen and (max-width: 767px) {
+  #banner .banner-filter .bannerfilter {
+    height: 80vh;
+  }
+}
+
+#banner #bannerdes-img {
+  position: absolute;
+  z-index: -2;
   opacity: 1;
 }
 
@@ -405,19 +429,23 @@ body .arrow:hover {
 
 @-webkit-keyframes Picture2 {
   0% {
-    opacity: 0.5;
+    -webkit-transform: scale(1.3);
+            transform: scale(1.3);
   }
   100% {
-    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
   }
 }
 
 @keyframes Picture2 {
   0% {
-    opacity: 0.5;
+    -webkit-transform: scale(1.3);
+            transform: scale(1.3);
   }
   100% {
-    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
   }
 }
 /*# sourceMappingURL=style.css.map */

style.scss

@@ -167,9 +167,25 @@ body {
 }
 #banner {
     position: relative;
+    .banner-filter {
+        position: absolute;
+        z-index:-1;
+        .bannerfilter{
+            width: 100vw;
+            object-fit: cover;
+            height: 50vw;
+            animation-name:Picture2;
+            animation-duration: 1s;
+            animation-delay:0.1s;
+            @media screen and(max-width:$moblie) {
+                height: 80vh;
+            }
+        }
+       
+    }
     #bannerdes-img {
         position: absolute;
-        z-index: -1;
+        z-index: -2;
         opacity: 1;
         .banner-img {
             width: 100vw;
@@ -177,6 +193,7 @@ body {
             height: 50vw;
             animation-name: Picture;
             animation-duration: 1s;
+            
             @media screen and(max-width:$moblie) {
                 height: 80vh;
             }
@@ -196,6 +213,7 @@ body {
         }
         // 電腦版
         .banner-des {
+           
             @media screen and(max-width:$moblie) {
                 display: none;
             }
@@ -208,16 +226,14 @@ body {
                     font-size: 24px;
                 }
             }
-            .banner-2{
+            .banner-2 {
                 overflow: hidden;
-                img{
+                img {
                     margin-bottom: -30px;
                     object-fit: cover;
                     width: 100%;
-               
                 }
             }
-
         }
         // 手機板
         .banner-m {
@@ -245,7 +261,7 @@ body {
                 position: relative;
                 transition: 0.5s ease-in-out;
                 cursor: pointer;
-                img{
+                img {
                     width: 100%;
                 }
                 .sec02-p-m {
@@ -254,7 +270,7 @@ body {
                     font-size: 14px;
                     font-weight: 900;
                     transition: 0.5s;
-                   
+
                     @media screen and(max-width:$moblie) {
                         display: none;
                     }
@@ -312,9 +328,10 @@ body {
 
 @keyframes Picture2 {
     0% {
-       opacity: 0.5;
+        transform: scale(1.3);
     }
     100% {
-       opacity: 1;
+        transform: scale(1);
     }
 }
+