頁面新增

index.html

@@ -134,7 +134,8 @@
     <section id="light-box" class="container-fluid">
         <img class="close" src="./img/course-box/close.png" alt="">
         <div class="light-box1">
-           <img src="./img/lightbox.webp" alt="">
+           <img class="light-box" src="./img/lightbox.webp" alt="">
+           <img class="light-box-m" src="./img/lighbox-m.png" alt="">
         </div>
     </section>
     <!-- 困擾 -->

style.css

@@ -270,8 +270,8 @@ body #btn-a #mobile-btn:hover {
 
 @media screen and (max-width: 767px) {
   #light-box .close {
-    right: 5vw;
-    top: 50vw;
+    right: 1vw;
+    top: 33vw;
   }
 }
 
@@ -279,14 +279,24 @@ body #btn-a #mobile-btn:hover {
   text-align: center;
 }
 
-#light-box .light-box1 img {
+#light-box .light-box1 .light-box {
   width: 60vw;
 }
 
 @media screen and (max-width: 767px) {
-  #light-box .light-box1 img {
-    padding-top: 40vw;
-    width: 90vw;
+  #light-box .light-box1 .light-box {
+    display: none;
+  }
+}
+
+#light-box .light-box1 .light-box-m {
+  padding-top: 30vw;
+  width: 90vw;
+}
+
+@media screen and (min-width: 1025px) {
+  #light-box .light-box1 .light-box-m {
+    display: none;
   }
 }
 

style.scss

@@ -217,19 +217,26 @@ body {
         right: 22vw;
         top: 5vw;
         @media screen and(max-width:$moblie) {
-            right: 5vw;
-            top: 50vw;;
+            right: 1vw;
+            top: 33vw;;
         }
     }
     .light-box1{
         text-align: center;
-        img{
-     
+        .light-box{
             width: 60vw;
             @media screen and(max-width:$moblie) {
-                padding-top: 40vw;
-                width: 90vw;
+               display: none;
             }
+
+        }
+
+        .light-box-m{
+            padding-top: 30vw;
+            width: 90vw;
+            @media screen and(min-width:$desktop) {
+                display: none;
+             }
         }
     }
 }