update

designer1.html

@@ -70,7 +70,7 @@
     <section class="banner">
         <div class="designer-content">
             <div class="row px-0 mx-0">
-                <div class="designer-img col-lg-6">
+                <div class="designer-img col-md-6 col-lg-6">
                     <div class="d-flex justify-content-end">
                         <img class="object1" src="./img/object1.png" alt="">
                         <img class="img-fluid img-01" src="./img/designer1/2371.png" alt="">
@@ -81,7 +81,7 @@
                         <p class="ps-1 fw-bold">Interior Design Masters</p>
                     </div>
                 </div>
-                <div class="video col-lg-6 text-center" style="background-image: url(./img/designer1/video.png);">
+                <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="work-text text-start">
                         <p class="fw-bold mb-0">三宅一秀空間創意</p>
@@ -117,13 +117,13 @@
             </div>
             <div class="protfolio-des">
                 <div class="row px-0 mx-0">
-                    <div class="col-lg-2 col-12 d-flex align-items-end">
+                    <div class="col-md-2 col-lg-2 d-flex align-items-end">
                         <h1>Portfolio</h1>
                     </div>
-                    <div class="col-lg-8 d-flex align-items-end">
+                    <div class="col-md-8 col-lg-8 d-flex align-items-end">
                         <hr class="w-100">
                     </div>
-                    <div class="col-lg-2 pe-1 d-flex justify-content-end">
+                    <div class="col-md-2 col-lg-2 pe-1 d-flex justify-content-end">
                         <div>
                             <a href="https://hhh.com.tw/designers/cases/279/1-page/new-sort/"><img width="100"
                                     class="img-fluid mb-3" src="./img/designer1/arrow-right.png" alt=""></a>
@@ -133,28 +133,28 @@
                 </div>
                 <div class="protfolio-img mt-5">
                     <div class="row px-0 mx-0">
-                        <div style="cursor: pointer;" class="col-lg-3 pe-2" data-bs-toggle="modal"
+                        <div style="cursor: pointer;" class="col-md-3 col-lg-3 pe-2" data-bs-toggle="modal"
                             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-lg-3 pe-2" data-bs-toggle="modal"
+                        <div style="cursor: pointer;" class="col-md-3 col-lg-3 pe-2" data-bs-toggle="modal"
                             data-bs-target="#exampleModal2">
                             <div
                                 style="height:450px; background: url(./img/designer1/Portfolio/11919/designer337_45_01.jpg); background-repeat: no-repeat; background-position: center; background-size:cover;">
 
                             </div>
                         </div>
-                        <div style="cursor: pointer;" class="col-lg-3 pe-2" data-bs-toggle="modal"
+                        <div style="cursor: pointer;" class="col-md-3 col-lg-3 pe-2" data-bs-toggle="modal"
                             data-bs-target="#exampleModal3">
                             <div
                                 style="height:450px; background: url(./img/designer1/Portfolio/13560/designer337_63_01.jpg); background-repeat: no-repeat; background-size:cover;">
 
                             </div>
                         </div>
-                        <div style="cursor: pointer;" class="col-lg-3" data-bs-toggle="modal"
+                        <div style="cursor: pointer;" class="col-md-3 col-lg-3" data-bs-toggle="modal"
                             data-bs-target="#exampleModal4">
                             <div
                                 style="height:450px; background: url(./img/designer1/Portfolio/5881/designer337_08_01.jpg); background-repeat: no-repeat; background-size:cover;">

designer2.html

@@ -68,7 +68,7 @@
     <section class="banner">
         <div class="designer-content" id="designer2">
             <div class="row px-0 mx-0">
-                <div class="designer-img col-lg-6">
+                <div class="designer-img col-md-6 col-lg-6">
                     <div class="d-flex justify-content-end">
                         <img class="object2" src="./img/object1.png" alt="">
                         <img class="img-fluid img-02" src="./img/designer2/238.png" alt="">
@@ -80,7 +80,7 @@
                         <p class="ps-1 fw-bold">Interior Design Masters</p>
                     </div>
                 </div>
-                <div class="video col-lg-6 text-center" style="background-image: url(./img/designer1/video.png);">
+                <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="work-text2 text-start">
                         <p class="fw-bold mb-0">采品室內設計</p>
@@ -108,13 +108,13 @@
             </div>
             <div class="protfolio-des">
                 <div class="row px-0 mx-0">
-                    <div class="col-lg-2 col-12 d-flex align-items-end">
+                    <div class="col-md-2 col-lg-2 d-flex align-items-end">
                         <h1>Portfolio</h1>
                     </div>
-                    <div class="col-lg-8 d-flex align-items-end">
+                    <div class="col-md-8 col-lg-8 d-flex align-items-end">
                         <hr class="w-100">
                     </div>
-                    <div class="col-lg-2 pe-1 d-flex justify-content-end">
+                    <div class="col-md-2 col-lg-2 pe-1 d-flex justify-content-end">
                         <div>
                             <a href="https://hhh.com.tw/designers/cases/418/1-page/new-sort/"><img width="100"
                                     class="img-fluid mb-3" src="./img/designer1/arrow-right.png" alt=""></a>
@@ -124,25 +124,25 @@
                 </div>
                 <div class="protfolio-img mt-5">
                     <div class="row px-0 mx-0">
-                        <div style="cursor: pointer;" class="col-lg-3 pe-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
+                        <div style="cursor: pointer;" class="col-md-3 col-lg-3 pe-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
                             <div
                                 style="height:450px; background: url(./img/designer2/Portfolio/11768/designer465_24_01.jpg); background-repeat: no-repeat; background-position: center; background-size:cover;">
 
                             </div>
                         </div>
-                        <div style="cursor: pointer;" class="col-lg-3 pe-2" data-bs-toggle="modal" data-bs-target="#exampleModal2">
+                        <div style="cursor: pointer;" class="col-md-3 col-lg-3 pe-2" data-bs-toggle="modal" data-bs-target="#exampleModal2">
                             <div
                                 style="height:450px; background: url(./img/designer2/Portfolio/12426/designer465_25_01.jpg); background-repeat: no-repeat; background-position: right; background-size:cover;">
 
                             </div>
                         </div>
-                        <div style="cursor: pointer;" class="col-lg-3 pe-2" data-bs-toggle="modal" data-bs-target="#exampleModal3">
+                        <div style="cursor: pointer;" class="col-md-3 col-lg-3 pe-2" data-bs-toggle="modal" data-bs-target="#exampleModal3">
                             <div
                                 style="height:450px; background: url(./img/designer2/Portfolio/13019/designer465_26_01.jpg); background-repeat: no-repeat; background-position:right; background-size:cover;">
 
                             </div>
                         </div>
-                        <div style="cursor: pointer;" class="col-lg-3" data-bs-toggle="modal" data-bs-target="#exampleModal4">
+                        <div style="cursor: pointer;" class="col-md-3 col-lg-3" data-bs-toggle="modal" data-bs-target="#exampleModal4">
                             <div
                                 style="height:450px; background: url(./img/designer2/Portfolio/13628/designer465_28_01.jpg); background-repeat: no-repeat; background-position:center; background-size:cover;">
 

designer3.html

@@ -70,7 +70,7 @@
     <section class="banner">
         <div class="designer-content" id="designer3">
             <div class="row px-0 mx-0">
-                <div class="designer-img col-lg-6">
+                <div class="designer-img col-md-6 col-lg-6">
                     <div class="d-flex justify-content-center">
                         <img class="object3" src="./img/object1.png" alt="">
                         <img class="img-fluid img-03" src="./img/designer3/239.png" alt="">
@@ -80,7 +80,7 @@
                         <p class="ps-1 fw-bold">Interior Design Masters</p>
                     </div>
                 </div>
-                <div class="video col-lg-6 text-center" style="background-image: url(./img/designer1/video.png);">
+                <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="work-text3 text-start">
                         <p class="fw-bold mb-0">恆星設計</p>
@@ -111,13 +111,13 @@
             </div>
             <div class="protfolio-des">
                 <div class="row px-0 mx-0">
-                    <div class="col-lg-2 col-12 d-flex align-items-end">
+                    <div class="col-md-2 col-lg-2 d-flex align-items-end">
                         <h1>Portfolio</h1>
                     </div>
-                    <div class="col-lg-8 d-flex align-items-end">
+                    <div class="col-md-8 col-lg-8 d-flex align-items-end">
                         <hr class="w-100">
                     </div>
-                    <div class="col-lg-2 pe-1 d-flex justify-content-end">
+                    <div class="col-md-2 col-lg-2 pe-1 d-flex justify-content-end">
                         <div>
                             <a href="https://hhh.com.tw/designers/cases/705/1-page/new-sort/"><img width="100"
                                     class="img-fluid mb-3" src="./img/designer1/arrow-right.png" alt=""></a>
@@ -127,28 +127,28 @@
                 </div>
                 <div class="protfolio-img mt-5">
                     <div class="row px-0 mx-0">
-                        <div style="cursor: pointer;" class="col-lg-3 pe-2" data-bs-toggle="modal"
+                        <div style="cursor: pointer;" class="col-md-3 col-lg-3 pe-2" data-bs-toggle="modal"
                             data-bs-target="#exampleModal">
                             <div
                                 style="height:450px; background: url(./img/designer3/Portfolio/12947/designer735_01_01.jpg); background-repeat: no-repeat; background-size:cover;">
 
                             </div>
                         </div>
-                        <div style="cursor: pointer;" class="col-lg-3 pe-2" data-bs-toggle="modal"
+                        <div style="cursor: pointer;" class="col-md-3 col-lg-3 pe-2" data-bs-toggle="modal"
                             data-bs-target="#exampleModal2">
                             <div
                                 style="height:450px; background: url(./img/designer3/Portfolio/13295/designer736_22_01.jpg); background-repeat: no-repeat; background-size:cover;">
 
                             </div>
                         </div>
-                        <div style="cursor: pointer;" class="col-lg-3 pe-2" data-bs-toggle="modal"
+                        <div style="cursor: pointer;" class="col-md-3 col-lg-3 pe-2" data-bs-toggle="modal"
                             data-bs-target="#exampleModal3">
                             <div
                                 style="height:450px; background: url(./img/designer3/Portfolio/13377/designer736_23_02.jpg); background-repeat: no-repeat; background-position: left; background-size:cover;">
 
                             </div>
                         </div>
-                        <div style="cursor: pointer;" class="col-lg-3" data-bs-toggle="modal"
+                        <div style="cursor: pointer;" class="col-md-3 col-lg-3" data-bs-toggle="modal"
                             data-bs-target="#exampleModal4">
                             <div
                                 style="height:450px; background: url(./img/designer3/Portfolio/13477/designer736_25_01.jpg); background-repeat: no-repeat; background-position: center; background-size:cover;">

designer4.html

@@ -68,7 +68,7 @@
     <section class="banner">
         <div class="designer-content">
             <div class="row px-0 mx-0">
-                <div class="designer-img col-lg-6">
+                <div class="designer-img col-md-6 col-lg-6">
                     <div class="d-flex justify-content-end">
                         <img class="object4" src="./img/object1.png" alt="">
                         <img class="img-fluid img-04" src="./img/designer4/240.png" alt="">
@@ -78,7 +78,7 @@
                         <p class="ps-1 fw-bold">Interior Design Masters</p>
                     </div>
                 </div>
-                <div class="video col-lg-6 text-center" style="background-image: url(./img/designer1/video.png);">
+                <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="work-text4 text-start">
                         <p class="fw-bold mb-0">麻石設計</p>
@@ -89,13 +89,13 @@
             <div id="hr04">
                 <hr class="mb-3">
             </div>
-            <div class="inclogo text-center">
-                <img class="180" src="./img/designer4/04logo.png" alt="">
+            <div class="inclogo text-center mt-5">
+                <img class="inclogo3" src="./img/designer4/04logo.png" alt="">
             </div>
         </div>
         <img class="img-fluid" src="./img/banner-bottom.png" alt="">
     </section>
-    <section class="sec01-int">
+    <section class="sec01-int" id="designer4-sec01">
         <div class="inclogo-m  text-center">
             <img class="inclogo3" src="./img/designer4/04logo.png" alt="">
         </div>
@@ -115,13 +115,13 @@
             <p>Life more, design less.</p>
             <div class="protfolio-des">
                 <div class="row px-0 mx-0">
-                    <div class="col-lg-2 col-12 d-flex align-items-end">
+                    <div class="col-md-2 col-lg-2 d-flex align-items-end">
                         <h1>Portfolio</h1>
                     </div>
-                    <div class="col-lg-8 d-flex align-items-end">
+                    <div class="col-md-8 col-lg-8 d-flex align-items-end">
                         <hr class="w-100">
                     </div>
-                    <div class="col-lg-2 pe-1 d-flex justify-content-end">
+                    <div class="col-md-2 col-lg-2 pe-1 d-flex justify-content-end">
                         <div>
                             <a href="https://hhh.com.tw/designers/cases/706/1-page/new-sort/"><img width="100"
                                     class="img-fluid mb-3" src="./img/designer1/arrow-right.png" alt=""></a>
@@ -131,25 +131,25 @@
                 </div>
                 <div class="protfolio-img mt-5">
                     <div class="row px-0 mx-0">
-                        <div style="cursor: pointer;" class="col-lg-3 pe-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
+                        <div style="cursor: pointer;" class="col-md-3 col-lg-3 pe-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
                             <div
                                 style="height:450px; background: url(./img/designer4/Portfolio/13006/designer737_04_02.jpg); background-repeat: no-repeat; background-position: right; background-size:cover;">
 
                             </div>
                         </div>
-                        <div style="cursor: pointer;" class="col-lg-3 pe-2" data-bs-toggle="modal" data-bs-target="#exampleModal2">
+                        <div style="cursor: pointer;" class="col-md-3 col-lg-3 pe-2" data-bs-toggle="modal" data-bs-target="#exampleModal2">
                             <div
                                 style="height:450px; background: url(./img/designer4/Portfolio/13013/designer737_06_01.jpg); background-repeat: no-repeat; background-size:cover;">
 
                             </div>
                         </div>
-                        <div style="cursor: pointer;" class="col-lg-3 pe-2" data-bs-toggle="modal" data-bs-target="#exampleModal3">
+                        <div style="cursor: pointer;" class="col-md-3 col-lg-3 pe-2" data-bs-toggle="modal" data-bs-target="#exampleModal3">
                             <div
                                 style="height:450px; background: url(./img/designer4/Portfolio/13033/designer737_07_01.jpg); background-repeat: no-repeat; background-position: center; background-size:cover;">
 
                             </div>
                         </div>
-                        <div style="cursor: pointer;" class="col-lg-3" data-bs-toggle="modal" data-bs-target="#exampleModal4">
+                        <div style="cursor: pointer;" class="col-md-3 col-lg-3" data-bs-toggle="modal" data-bs-target="#exampleModal4">
                             <div
                                 style="height:450px; background: url(./img/designer4/Portfolio/13038/designer737_08_01.jpg); background-repeat: no-repeat; background-position: center; background-size:cover;">
 

index.html

@@ -70,16 +70,16 @@
             </div>
         </div>
         <div class="social-icons d-none d-md-block">
-            <a href="https://line.me/ti/p/%40ovs4341s">
+            <a target="_blank" href="https://line.me/ti/p/%40ovs4341s">
                 <img src="./img/Icon simple-line.png" alt="幸福空間Line" class="" width="20" height="20">
             </a>
-            <a href="https://www.facebook.com/hhhfb">
+            <a target="_blank" href="https://www.facebook.com/hhhfb">
                 <img src="./img/Icon metro-facebook.png" width="20" height="20" alt="幸福空間FB">
             </a>
-            <a href="https://www.instagram.com/gorgeous_space/">
+            <a target="_blank" href="https://www.instagram.com/gorgeous_space/">
                 <img src="./img/Icon feather-instagram.png" width="20" height="20" alt="幸福空間IG">
             </a>
-            <a href="https://www.youtube.com/user/gorgeousspace">
+            <a target="_blank" href="https://www.youtube.com/user/gorgeousspace">
                 <img src="./img/Icon simple-youtube.png" width="20" height="20" alt="幸福空間YT">
             </a>
         </div>
@@ -127,11 +127,11 @@
         <section class="sec01">
             <div class="sec01-content">
                 <div class="row px-0 mx-0">
-                    <div class="sec01-h1-title col-12 col-lg-2">
+                    <div class="sec01-h1-title col-12 col-md-2 col-lg-2">
                         <img class="line31" src="./img/object/line31.png" alt="">
                         <h1>一般人的認知的豪宅</h1>
                     </div>
-                    <div class="col-12 col-lg-10">
+                    <div class="col-12 col-md-10 col-lg-10">
                         <div class="row g-4">
                             <div class="sec01-left col-6 col-lg-6">
                                 <div id="sec01-card1" class="sec01-card">
@@ -173,7 +173,8 @@
                                             <img class="sec01-img03 img-fluid" src="./img/sec01/03.png" alt="">
                                         </div>
                                         <div class="col-lg-9">
-                                            <h2 class="d-inline fw-bold pe-2">奢華傢俱</h2><span>———</span>
+                                            <h2 class="d-inline fw-bold pe-2">奢華傢俱</h2><span style="font-size: 14px;">———</span>
+                                          
                                             <div class="sec01-text">
                                                 <p>奢華的傢俱，光只是擺在空曠的市內，氣場就足以駕馭整個空間。</p>
                                             </div>
@@ -213,7 +214,7 @@
             <div class="sec02-content">
                 <div class="sec">
                     <div class="row mx-0 px-0">
-                        <div style="position: relative;" class="col-5 col-lg-6 mx-0 px-0">
+                        <div style="position: relative;" class="col-5 col-md-6 col-lg-6 mx-0 px-0">
                             <img style="position: absolute;" class="object178" src="./img/object/178.png" alt="">
                             <img style="position: absolute;" class="object188" src="./img/object/188.png" alt="">
                             <div class="test">
@@ -222,10 +223,10 @@
                                     src="./img/sec01/sec02-238.png" alt="">
                             </div>
                             <img class="sec02-img-m" src="./img/sec02/sec02-img-m.png" alt="">
-                            <img style="position:absolute; top:240px; z-index: 1; width:52vw;" src="./img/object/404.png"
+                            <img style="position:absolute; " class="object404 " src="./img/object/404.png"
                                 alt="">
                         </div>
-                        <div class="col-7 col-lg-6">
+                        <div class="col-7 col-md-6 col-lg-6">
                             <div class="sec02-right">
                                 <div class="sec02-int">
                                     <div class="title_back">
@@ -247,7 +248,7 @@
                 </div>
                 <div class="sec02-content-down">
                     <div class="row mx-0 px-0">
-                        <div class="col-lg-6">
+                        <div class="col-md-7 col-lg-6">
                             <div class="sec02-left-d sec">
                                 <div class="sec02-int">
                                     <div class="title_back">
@@ -271,7 +272,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-lg-6 d-flex align-items-end">
+                        <div class="col-md-5 col-lg-6 d-flex align-items-end">
                             <div class="sec02-right-d sec">
                                 <div class="sec02-int">
                                     <div class="title_back">
@@ -279,10 +280,11 @@
                                         <h4 class="title">類豪宅剖析</h4>
                                     </div>
                                     <div class="sec02-text test_content">
-                                        <p>前面提到豪宅設計條件，若能掌握其中關鍵美學概念，就</p>
+                                        <!-- <p>前面提到豪宅設計條件，若能掌握其中關鍵美學概念，就</p>
                                         <p>算家裡非百坪尺度，也能從格局規劃，生活需求的機能設</p>
                                         <p>計及陳設藝術的品味擺飾等，學習在一般住宅畫龍點睛地</p>
-                                        <p>打造豪宅尺度的生活空間。</p>
+                                        <p>打造豪宅尺度的生活空間。</p> -->
+                                        <p class="luxury-text">前面提到豪宅設計條件，若能掌握其中關鍵美學概念，就算家裡非百坪尺度，也能從格局規劃，生活需求的機能設計及陳設藝術的品味擺飾等，學習在一般住宅畫龍點睛地打造豪宅尺度的生活空間。</p>
                                     </div>
                                 </div>
                             </div>
@@ -394,11 +396,13 @@
                 </div>
                 <div class="sec04-designers">
                     <div class="row px-0 mx-0">
-                        <div class="col-lg-6 px-lg-2">
+                        <div class="col-12  col-lg-6 px-lg-2">
                             <img style="position: absolute;" class="object241" src="./img/object/241.png" alt="">
                             <div class="sec04-left-card" data-aos="fade-up" data-aos-duration="1000">
                                 <div style="overflow: hidden;">
-                                    <img class="img-fluid desimg01" src="./img/sec04/01.png" alt="">
+                                    <a style="text-decoration: none;" href="./designer1.html">
+                                        <img class="img-fluid desimg01" src="./img/sec04/01.png" alt="">
+                                    </a>
                                 </div>
                                 <a style="text-decoration: none;" href="./designer1.html">
                                     <div class="designer-btn rounded-pill">
@@ -417,10 +421,12 @@
                                 </a>
                             </div>
                         </div>
-                        <div class="col-lg-6 px-lg-2">
+                        <div class="col-12 col-lg-6 px-lg-2">
                             <div class="sec04-right-card" data-aos="fade-up" data-aos-duration="1000">
                                 <div style="overflow: hidden;">
-                                    <img class="img-fluid" src="./img/sec04/04.png" alt="">
+                                    <a style="text-decoration: none;" href="./designer2.html">                                  
+                                        <img class="img-fluid" src="./img/sec04/04.png" alt="">
+                                    </a>
                                 </div>
                                 <a style="text-decoration: none;" href="./designer2.html">
                                     <div class="designer-btn rounded-pill">
@@ -451,7 +457,10 @@
                         <div class="col-lg-6 px-lg-2">
                             <div class="sec04-left-card" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="50">
                                 <div style="overflow: hidden;">
-                                    <img class="img-fluid" src="./img/sec04/02.png" alt="">
+                                    <a style="text-decoration: none;" href="./designer3.html">
+                                        <img class="img-fluid" src="./img/sec04/02.png" alt="">
+                                    </a>
+
                                 </div>
                                 <a style="text-decoration: none;" href="./designer3.html">
                                     <div class="designer-btn rounded-pill">
@@ -474,7 +483,10 @@
                         <div class="col-lg-6 px-lg-2">
                             <div class="sec04-right-card" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="50">
                                 <div style="overflow: hidden;">
-                                    <img class="img-fluid" src="./img/sec04/03.png" alt="">
+                                    <a style="text-decoration: none;" href="./designer4.html">
+                                        <img class="img-fluid" src="./img/sec04/03.png" alt="">
+                                    </a>
+
                                 </div>
                                 <a style="text-decoration: none;" href="./designer4.html">
                                     <div class="designer-btn rounded-pill">

style.css

@@ -208,7 +208,7 @@ body {
 
 @media screen and (max-width: 1024px) {
   .social-icons {
-    left: 30px;
+    right: 50px;
   }
 }
 
@@ -232,6 +232,12 @@ body {
   background-size: cover;
 }
 
+@media screen and (min-width: 768px) {
+  .banner {
+    padding-top: 10vw;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .banner #scene {
     display: none;
@@ -244,6 +250,12 @@ body {
   }
 }
 
+@media screen and (min-width: 768px) {
+  .banner #banner-m {
+    display: none;
+  }
+}
+
 @media screen and (min-width: 1025px) {
   .banner #banner-m {
     display: none;
@@ -292,6 +304,12 @@ body {
   }
 }
 
+@media screen and (min-width: 768px) {
+  .banner .banner-content .banner-title #title-m {
+    display: none;
+  }
+}
+
 @media screen and (min-width: 1025px) {
   .banner .banner-content .banner-title #title-m {
     display: none;
@@ -325,6 +343,12 @@ body {
   font-size: 3.6vmin;
 }
 
+@media screen and (min-width: 768px) {
+  .banner .banner-content .banner-text-m {
+    display: none;
+  }
+}
+
 @media screen and (min-width: 1025px) {
   .banner .banner-content .banner-text-m {
     display: none;
@@ -337,6 +361,12 @@ body {
   }
 }
 
+@media screen and (min-width: 768px) {
+  .sec01-title-m {
+    display: none;
+  }
+}
+
 @media screen and (min-width: 1025px) {
   .sec01-title-m {
     display: none;
@@ -350,6 +380,13 @@ body {
   padding-bottom: 10vw;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec01 .sec01-content,
+  .sec01-int .sec01-content {
+    width: 80vw;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec01 .sec01-content,
   .sec01-int .sec01-content {
@@ -369,6 +406,13 @@ body {
   top: 15vw;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec01 .sec01-content .sec01-h1-title .line31,
+  .sec01-int .sec01-content .sec01-h1-title .line31 {
+    left: 9.5vw;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec01 .sec01-content .sec01-h1-title .line31,
   .sec01-int .sec01-content .sec01-h1-title .line31 {
@@ -410,7 +454,7 @@ body {
 @media screen and (max-width: 767px) {
   .sec01 .sec01-content h2,
   .sec01-int .sec01-content h2 {
-    font-size: 22px;
+    font-size: 5.5vmin;
   }
 }
 
@@ -446,6 +490,13 @@ body {
   }
 }
 
+@media screen and (max-width: 1024px) {
+  .sec01 .sec01-content #sec01-card1 .sec01-img01,
+  .sec01-int .sec01-content #sec01-card1 .sec01-img01 {
+    margin-bottom: 10px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec01 .sec01-content #sec01-card1 .sec01-img01,
   .sec01-int .sec01-content #sec01-card1 .sec01-img01 {
@@ -461,6 +512,13 @@ body {
   margin-top: 200px;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec01 .sec01-content #sec01-card2,
+  .sec01-int .sec01-content #sec01-card2 {
+    margin-top: 100px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec01 .sec01-content #sec01-card2,
   .sec01-int .sec01-content #sec01-card2 {
@@ -475,6 +533,13 @@ body {
   }
 }
 
+@media screen and (max-width: 1024px) {
+  .sec01 .sec01-content #sec01-card2 .sec01-img02,
+  .sec01-int .sec01-content #sec01-card2 .sec01-img02 {
+    margin-bottom: 10px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec01 .sec01-content #sec01-card2 .sec01-img02,
   .sec01-int .sec01-content #sec01-card2 .sec01-img02 {
@@ -507,6 +572,13 @@ body {
   }
 }
 
+@media screen and (max-width: 1024px) {
+  .sec01 .sec01-content #sec01-card3 .sec01-img03,
+  .sec01-int .sec01-content #sec01-card3 .sec01-img03 {
+    margin-bottom: 10px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec01 .sec01-content #sec01-card3 .sec01-img03,
   .sec01-int .sec01-content #sec01-card3 .sec01-img03 {
@@ -524,6 +596,13 @@ body {
   left: 50px;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec01 .sec01-content #sec01-card4,
+  .sec01-int .sec01-content #sec01-card4 {
+    top: 150px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec01 .sec01-content #sec01-card4,
   .sec01-int .sec01-content #sec01-card4 {
@@ -539,6 +618,13 @@ body {
   }
 }
 
+@media screen and (max-width: 1024px) {
+  .sec01 .sec01-content #sec01-card4 .sec01-img04,
+  .sec01-int .sec01-content #sec01-card4 .sec01-img04 {
+    margin-bottom: 10px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec01 .sec01-content #sec01-card4 .sec01-img04,
   .sec01-int .sec01-content #sec01-card4 .sec01-img04 {
@@ -565,6 +651,12 @@ body {
   margin-top: -210px;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec02 .sec02-content {
+    margin-top: -150px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec02 .sec02-content {
     margin-top: 0px;
@@ -577,6 +669,12 @@ body {
   }
 }
 
+@media screen and (min-width: 768px) {
+  .sec02 .sec02-content .sec02-img-m {
+    display: none;
+  }
+}
+
 @media screen and (min-width: 1025px) {
   .sec02 .sec02-content .sec02-img-m {
     display: none;
@@ -590,6 +688,12 @@ body {
   left: 4.5vw;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec02 .sec02-content .object178 {
+    width: 150px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec02 .sec02-content .object178 {
     display: none;
@@ -601,6 +705,24 @@ body {
   left: 42vw;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec02 .sec02-content .object188 {
+    width: 100px;
+  }
+}
+
+.sec02 .sec02-content .object404 {
+  top: 240px;
+  z-index: 1;
+  width: 52vw;
+}
+
+@media screen and (max-width: 1024px) {
+  .sec02 .sec02-content .object404 {
+    top: 140px;
+  }
+}
+
 .sec02 .sec02-content .sec02-right {
   margin-top: 120px;
   margin-left: 80px;
@@ -616,6 +738,12 @@ body {
   margin-top: 50px;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec02 .sec02-content .sec02-left-d {
+    margin-top: -50px;
+  }
+}
+
 .sec02 .sec02-content .sec02-right-d {
   position: relative;
   bottom: -100px;
@@ -623,6 +751,17 @@ body {
   z-index: 20;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec02 .sec02-content .sec02-right-d {
+    bottom: -200px;
+  }
+}
+
+.sec02 .sec02-content .sec02-right-d .luxury-text {
+  width: 400px;
+  line-height: 2;
+}
+
 .sec02 .sec02-content .sec02-int h3 {
   color: #707070;
   font-weight: bold;
@@ -656,12 +795,24 @@ body {
   padding-bottom: 3vw;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec02 .sec02-content .sec02-content-down {
+    margin-left: 5vmin;
+  }
+}
+
 .sec02-m {
   background: url(./img/sec02/sec02-bg.png);
   background-repeat: no-repeat;
   background-size: cover;
 }
 
+@media screen and (min-width: 768px) {
+  .sec02-m {
+    display: none;
+  }
+}
+
 @media screen and (min-width: 1025px) {
   .sec02-m {
     display: none;
@@ -765,6 +916,19 @@ body {
   z-index: 19;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec03 {
+    margin-top: -120px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .sec03 {
+    margin-top: -50px;
+    bottom: 0px;
+  }
+}
+
 .sec03 .sec03-img01 {
   position: relative;
   z-index: 3;
@@ -773,6 +937,12 @@ body {
      object-fit: cover;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec03 .sec03-img01 {
+    width: 65vw;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec03 .sec03-img01 {
     width: 70vw;
@@ -786,6 +956,12 @@ body {
   z-index: 1;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec03 .sec03-img02 {
+    top: 40px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec03 .sec03-img02 {
     top: 30px;
@@ -798,6 +974,12 @@ body {
   top: 300px;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec03 #sec03-img03-box {
+    top: 60px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec03 #sec03-img03-box {
     top: 10px;
@@ -820,13 +1002,6 @@ body {
   }
 }
 
-@media screen and (max-width: 767px) {
-  .sec03 {
-    margin-top: -50px;
-    bottom: 0px;
-  }
-}
-
 .sec04 {
   margin-top: 200px;
   background: url(./img/bg.png);
@@ -834,6 +1009,12 @@ body {
   background-size: cover;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec04 {
+    margin-top: 50px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec04 {
     margin-top: 10px;
@@ -861,6 +1042,12 @@ body {
   left: -10vw;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec04 .sec04-content .object182 {
+    width: 300px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec04 .sec04-content .object182 {
     width: 250px;
@@ -873,6 +1060,12 @@ body {
   left: 33%;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec04 .sec04-content #issue3 {
+    left: 27%;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec04 .sec04-content #issue3 {
     left: 20%;
@@ -880,9 +1073,20 @@ body {
 }
 
 .sec04 .sec04-content .sec04-bottom-box {
-  text-align: center;
-  width: 40vw;
   margin: 0 auto;
+  text-align: center;
+}
+
+@media screen and (min-width: 768px) {
+  .sec04 .sec04-content .sec04-bottom-box {
+    width: 70vw;
+  }
+}
+
+@media screen and (min-width: 1025px) {
+  .sec04 .sec04-content .sec04-bottom-box {
+    width: 40vw;
+  }
 }
 
 @media screen and (max-width: 767px) {
@@ -940,6 +1144,12 @@ body {
   margin: 0 auto;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec04 .sec04-content .sec04-int .sec04-text {
+    width: 70vw;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec04 .sec04-content .sec04-int .sec04-text {
     width: 95vw;
@@ -958,6 +1168,12 @@ body {
   top: 18vw;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec04 .sec04-content .sec04-designers .object241 {
+    display: none;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec04 .sec04-content .sec04-designers .object241 {
     display: none;
@@ -971,6 +1187,12 @@ body {
   z-index: 1;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec04 .sec04-content .sec04-designers .object242 {
+    display: none;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec04 .sec04-content .sec04-designers .object242 {
     display: none;
@@ -1110,8 +1332,16 @@ body {
   }
 }
 
-#sec04-2 {
-  margin-top: -350px;
+@media screen and (min-width: 1025px) {
+  #sec04-2 {
+    margin-top: -320px;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  #sec04-2 {
+    margin-top: -150px;
+  }
 }
 
 @media screen and (max-width: 767px) {
@@ -1120,6 +1350,12 @@ body {
   }
 }
 
+@media screen and (min-width: 768px) {
+  .gotop {
+    display: none;
+  }
+}
+
 @media screen and (min-width: 1025px) {
   .gotop {
     display: none;
@@ -1168,6 +1404,12 @@ body {
   opacity: 1 !important;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content #hr01 {
+    bottom: 17vw;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content #hr01 {
     bottom: 450px;
@@ -1228,7 +1470,7 @@ body {
 
 .designer-content #hr04 {
   position: relative;
-  bottom: 16vw;
+  bottom: 14vw;
   z-index: 3;
 }
 
@@ -1239,6 +1481,12 @@ body {
   opacity: 1 !important;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content #hr04 {
+    bottom: 12vw;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content #hr04 {
     bottom: 380px;
@@ -1279,6 +1527,12 @@ body {
   left: 18px;
 }
 
+@media screen and (min-width: 768px) {
+  .designer-content .designer-img .img-01-m {
+    display: none;
+  }
+}
+
 @media screen and (min-width: 1025px) {
   .designer-content .designer-img .img-01-m {
     display: none;
@@ -1292,6 +1546,13 @@ body {
   left: 10vw;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content .designer-img .object1 {
+    left: 8vw;
+    top: 12vw;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content .designer-img .object1 {
     top: 20vw;
@@ -1308,6 +1569,13 @@ body {
   left: 8vmin;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content .designer-img .designertext {
+    left: 1vmin;
+    top: 80px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content .designer-img .designertext {
     left: 4vmin;
@@ -1319,6 +1587,12 @@ body {
   font-size: 45px;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content .designer-img .designertext h1 {
+    font-size: 32px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content .designer-img .designertext h1 {
     font-size: 10vmin;
@@ -1345,6 +1619,13 @@ body {
   z-index: 5;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content .designer-img .designertext02 {
+    right: -1vmin;
+    top: 60px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content .designer-img .designertext02 {
     top: 70px;
@@ -1362,6 +1643,12 @@ body {
   font-size: 45px;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content .designer-img .designertext02 h1 {
+    font-size: 32px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content .designer-img .designertext02 h1 {
     font-size: 10vmin;
@@ -1386,6 +1673,13 @@ body {
   width: 35vw;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content .designer-img .img-02 {
+    margin-top: 15px;
+    right: 30px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content .designer-img .img-02 {
     display: none;
@@ -1401,6 +1695,12 @@ body {
   right: 50px;
 }
 
+@media screen and (min-width: 768px) {
+  .designer-content .designer-img .img-02-m {
+    display: none;
+  }
+}
+
 @media screen and (min-width: 1025px) {
   .designer-content .designer-img .img-02-m {
     display: none;
@@ -1420,6 +1720,14 @@ body {
   right: 4vw;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content .designer-img .object2 {
+    right: 3vw;
+    top: 8vw;
+    width: 17vw;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content .designer-img .object2 {
     width: 140px;
@@ -1442,6 +1750,13 @@ body {
   z-index: 5;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content .designer-img .designertext03 {
+    right: -1vmin;
+    top: 80px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content .designer-img .designertext03 {
     right: -5px;
@@ -1460,6 +1775,12 @@ body {
   font-size: 45px;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content .designer-img .designertext03 h1 {
+    font-size: 32px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content .designer-img .designertext03 h1 {
     font-size: 10vmin;
@@ -1490,6 +1811,13 @@ body {
   z-index: 7;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content .designer-img .img-03 {
+    right: 30px;
+    margin-top: 15px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content .designer-img .img-03 {
     width: 300px;
@@ -1511,6 +1839,12 @@ body {
   right: 4vw;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content .designer-img .object3 {
+    top: 11vw;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content .designer-img .object3 {
     width: 140px;
@@ -1534,6 +1868,13 @@ body {
   z-index: 5;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content .designer-img .designertext04 {
+    top: 150px;
+    left: 3vmin;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content .designer-img .designertext04 {
     top: 220px;
@@ -1552,6 +1893,12 @@ body {
   font-size: 45px;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content .designer-img .designertext04 h1 {
+    font-size: 32px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content .designer-img .designertext04 h1 {
     font-size: 10vmin;
@@ -1574,7 +1921,14 @@ body {
   width: 15vw;
   position: absolute;
   top: 8vw;
-  left: 7vw;
+  left: 10vw;
+}
+
+@media screen and (max-width: 1024px) {
+  .designer-content .designer-img .object4 {
+    left: 10vw;
+    top: 11vw;
+  }
 }
 
 @media screen and (max-width: 767px) {
@@ -1592,11 +1946,17 @@ body {
 }
 
 .designer-content .designer-img .img-04 {
-  width: 28vw;
+  width: 25vw;
   position: relative;
   z-index: 7;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content .designer-img .img-04 {
+    top: 2vw;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content .designer-img .img-04 {
     right: -10px;
@@ -1619,6 +1979,12 @@ body {
   margin-top: 100px;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content .video {
+    margin-top: 80px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content .video {
     background-size: cover;
@@ -1631,6 +1997,13 @@ body {
   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;
@@ -1643,6 +2016,12 @@ body {
   font-size: 20px;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content .video .work-text {
+    bottom: 5vw;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content .video .work-text {
     display: none;
@@ -1655,6 +2034,12 @@ body {
   font-size: 20px;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content .video .work-text2 {
+    bottom: 3vw;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content .video .work-text2 {
     display: none;
@@ -1667,6 +2052,12 @@ body {
   font-size: 20px;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content .video .work-text3 {
+    bottom: 3vw;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content .video .work-text3 {
     display: none;
@@ -1679,6 +2070,12 @@ body {
   font-size: 20px;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-content .video .work-text4 {
+    bottom: -1vw;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .designer-content .video .work-text4 {
     display: none;
@@ -1691,6 +2088,12 @@ body {
   }
 }
 
+@media screen and (max-width: 1024px) {
+  .inclogo-m {
+    display: none;
+  }
+}
+
 @media screen and (min-width: 1025px) {
   .inclogo-m {
     display: none;
@@ -1711,6 +2114,12 @@ body {
   width: 180px;
 }
 
+@media screen and (max-width: 1024px) {
+  .inclogo3 {
+    width: 130px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .inclogo3 {
     width: 110px;
@@ -1729,12 +2138,30 @@ body {
   margin-top: -200px;
 }
 
+@media screen and (max-width: 1024px) {
+  #designer2-sec01 {
+    margin-top: -150px;
+  }
+}
+
 @media screen and (max-width: 767px) {
   #designer2-sec01 {
     margin-top: 0px;
   }
 }
 
+@media screen and (max-width: 1024px) {
+  #designer4-sec01 {
+    margin-top: -50px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #designer4-sec01 {
+    margin-top: 0px;
+  }
+}
+
 .sec01-int {
   margin-top: -110px;
   padding-bottom: 5vw;
@@ -1757,6 +2184,13 @@ body {
   margin: 0 auto;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec01-int .sec01-content .slogan-part1 {
+    margin-top: 30px;
+    width: 50vw;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec01-int .sec01-content .slogan-part1 {
     width: 90vw;
@@ -1768,6 +2202,12 @@ body {
   margin: 0 auto;
 }
 
+@media screen and (max-width: 1024px) {
+  .sec01-int .sec01-content .slogan-part2 {
+    width: 35vw;
+  }
+}
+
 @media screen and (max-width: 767px) {
   .sec01-int .sec01-content .slogan-part2 {
     width: 90vw;
@@ -1803,6 +2243,12 @@ body {
   padding-top: 30vw;
 }
 
+@media screen and (min-width: 768px) {
+  .sec01-int .protfolio-m {
+    display: none;
+  }
+}
+
 @media screen and (min-width: 1025px) {
   .sec01-int .protfolio-m {
     display: none;
@@ -1841,6 +2287,12 @@ body {
   display: none;
 }
 
+@media screen and (max-width: 1024px) {
+  .designer-nav {
+    right: 10px;
+  }
+}
+
 .designer-nav hr {
   margin: 5px auto !important;
   background: #e2e2e2;

style.scss

@@ -21,6 +21,8 @@ $size: 50px;
 }
 body {
     background: #fbf6f3;
+
+   
 }
 .body-content{
     overflow: hidden;
@@ -165,7 +167,7 @@ body {
     display: flex;
     flex-direction: column;
     @media screen and(max-width:$table) {
-        left: 30px;
+        right: 50px;
     }
     a {
         text-decoration: none;
@@ -183,17 +185,25 @@ body {
     background: url(./img/bg.png);
     background-repeat: no-repeat;
     background-size: cover;
+    @media screen and(min-width:768px) {
+        padding-top: 10vw;
+    }
     #scene{
         @media screen and(max-width:$moblie) {
             display: none;
         }
     }
     #banner-des {
+       
         @media screen and(max-width:$moblie) {
             display: none;
         }
     }
     #banner-m {
+        // 更動
+        @media screen and(min-width:768px) {
+            display: none;
+        }
         @media screen and(min-width:$desktop) {
             display: none;
         }
@@ -221,6 +231,9 @@ body {
                 }
             }
             #title-m {
+                @media screen and(min-width:768px) {
+                    display: none;
+                }
                 @media screen and(min-width:$desktop) {
                     display: none;
                 }
@@ -245,6 +258,10 @@ body {
                 margin-bottom: 3px !important;
                 font-size: 3.6vmin;
             }
+            // 更動
+            @media screen and(min-width:768px) {
+                display: none;
+            }
             @media screen and(min-width:$desktop) {
                 display: none;
             }
@@ -257,6 +274,9 @@ body {
     }
 }
 .sec01-title-m {
+    @media screen and(min-width:768px) {
+        display: none;
+    }
     @media screen and(min-width:$desktop) {
         display: none;
     }
@@ -267,6 +287,9 @@ body {
         width: 72vw;
         margin: 0 auto;
         padding-bottom: 10vw;
+        @media screen and(max-width:$table) {
+            width: 80vw;
+        }
         @media screen and(max-width:$moblie) {
             width: 95vw;
         }
@@ -276,6 +299,9 @@ body {
                 position: absolute;
                 left: 5.5vw;
                 top: 15vw;
+                @media screen and(max-width:$table) {
+                    left: 9.5vw;
+                }
                 @media screen and(max-width:$moblie) {
                     display: none;
                 }
@@ -300,7 +326,7 @@ body {
             color: $Font-color;
             text-shadow: 0px 8px 6px #00000029;
             @media screen and(max-width:$moblie) {
-                font-size: 22px;
+                font-size: 5.5vmin;
             }
         }
         .sec01-text {
@@ -324,6 +350,9 @@ body {
                 }
             }
             .sec01-img01 {
+                @media screen and(max-width:$table) {
+                   margin-bottom: 10px;
+                }
                 @media screen and(max-width:$moblie) {
                     width: 76px;
                     object-fit: cover;
@@ -334,6 +363,9 @@ body {
         // 大理石
         #sec01-card2 {
             margin-top: 200px;
+            @media screen and(max-width:$table) {
+                margin-top: 100px;
+            }
             @media screen and(max-width:$moblie) {
                 margin-top: 100px;
             }
@@ -343,6 +375,9 @@ body {
                 }
             }
             .sec01-img02 {
+                @media screen and(max-width:$table) {
+                    margin-bottom: 10px;
+                 }
                 @media screen and(max-width:$moblie) {
                     width: 44px;
                     object-fit: cover;
@@ -355,6 +390,7 @@ body {
             position: relative;
             top: 90px;
             left: 50px;
+            
             @media screen and(max-width:$moblie) {
                 left: 0px;
                 top: 90px;
@@ -365,6 +401,9 @@ body {
                 }
             }
             .sec01-img03 {
+                @media screen and(max-width:$table) {
+                    margin-bottom: 10px;
+                 }
                 @media screen and(max-width:$moblie) {
                     width: 53px;
                     object-fit: cover;
@@ -377,6 +416,9 @@ body {
             position: relative;
             top: 250px;
             left: 50px;
+            @media screen and(max-width:$table) {
+                top: 150px;
+            }
             @media screen and(max-width:$moblie) {
                 left: 0px;
                 top: 150px;
@@ -387,6 +429,9 @@ body {
                 }
             }
             .sec01-img04 {
+                @media screen and(max-width:$table) {
+                    margin-bottom: 10px;
+                 }
                 @media screen and(max-width:$moblie) {
                     width: 36px;
                     object-fit: cover;
@@ -406,6 +451,9 @@ body {
     }
     .sec02-content {
         margin-top: -210px;
+        @media screen and(max-width:$table) {
+            margin-top: -150px;
+        }
         @media screen and(max-width:$moblie) {
             margin-top: 0px;
         }
@@ -415,6 +463,9 @@ body {
             }
         }
         .sec02-img-m {
+            @media screen and(min-width:768px) {
+                display: none;
+            }
             @media screen and(min-width:$desktop) {
                 display: none;
             }
@@ -424,6 +475,9 @@ body {
             z-index: 30;
             top: -5vw;
             left: 4.5vw;
+            @media screen and(max-width:$table) {
+                width: 150px;
+            }
             @media screen and(max-width:$moblie) {
                 display: none;
             }
@@ -431,6 +485,17 @@ body {
         .object188 {
             width: 180px;
             left: 42vw;
+            @media screen and(max-width:$table) {
+                width: 100px;
+            }
+        }
+        .object404 {
+            top:240px;
+             z-index: 1; 
+             width:52vw;
+            @media screen and(max-width:$table) {
+                top:140px;
+            }
         }
         // 世界豪宅趨勢
         .sec02-right {
@@ -443,6 +508,9 @@ body {
         // 豪宅的條件
         .sec02-left-d {
             margin-top: 50px;
+            @media screen and(max-width:$table) {
+                margin-top: -50px;
+            }
         }
         // 類豪宅剖析
         .sec02-right-d {
@@ -450,6 +518,14 @@ body {
             bottom: -100px;
             left: -15vmin;
             z-index: 20;
+            @media screen and(max-width:$table) {
+                bottom: -200px;
+            }
+            .luxury-text{
+                width: 400px;
+                line-height: 2;
+            }
+            
         }
 
         // 介紹內容
@@ -481,6 +557,9 @@ body {
         .sec02-content-down {
             margin-left: 30vmin;
             padding-bottom: 3vw;
+            @media screen and(max-width:$table) {
+                margin-left: 5vmin;
+            }
         }
     }
 }
@@ -490,7 +569,9 @@ body {
     background: url(./img/sec02/sec02-bg.png);
     background-repeat: no-repeat;
     background-size: cover;
-
+    @media screen and(min-width:768px) {
+        display: none;
+    }
     @media screen and(min-width:$desktop) {
         display: none;
     }
@@ -528,6 +609,7 @@ body {
         .sec02-left-d {
             margin-top: 50px;
             margin-bottom: 30px;
+            
         }
         // 類豪宅剖析
 
@@ -578,12 +660,21 @@ body {
     position: relative;
     bottom: -160px;
     z-index: 19;
-   
+    @media screen and(max-width:$table) {
+        margin-top: -120px;
+    }
+    @media screen and(max-width:$moblie) {
+        margin-top: -50px;
+        bottom: 0px;
+    }
     .sec03-img01 {
         position: relative;
         z-index: 3;
         width: 57vw;
         object-fit: cover;
+        @media screen and(max-width:$table) {
+            width: 65vw;
+        }
         @media screen and(max-width:$moblie) {
             width: 70vw;
         }
@@ -593,6 +684,9 @@ body {
         top: 100px;
         width: 85vw;
         z-index: 1;
+        @media screen and(max-width:$table) {
+            top: 40px;
+        }
         @media screen and(max-width:$moblie) {
            top:30px;
            width: 95vw;
@@ -601,6 +695,9 @@ body {
     #sec03-img03-box {
         position: relative;
         top: 300px;
+        @media screen and(max-width:$table) {
+            top: 60px;
+        }
         @media screen and(max-width:$moblie) {
            top:10px;
          }
@@ -618,16 +715,16 @@ body {
             display: none;
         }
     }
-    @media screen and(max-width:$moblie) {
-        margin-top: -50px;
-        bottom: 0px;
-    }
+ 
 }
 .sec04 {
     margin-top: 200px;
     background: url(./img/bg.png);
     background-repeat: no-repeat;
     background-size: cover;
+    @media screen and(max-width:$table) {
+        margin-top: 50px;
+    }
     @media screen and(max-width:$moblie) {
         margin-top: 10px;
     }
@@ -645,6 +742,9 @@ body {
             width: 450px;
             top: -7vw;
             left: -10vw;
+            @media screen and(max-width:$table) {
+                width: 300px;
+            }
             @media screen and(max-width:$moblie) {
                width: 250px;
                left:64vw;
@@ -653,14 +753,22 @@ body {
         }
         #issue3 {
             left: 33%;
+            @media screen and(max-width:$table) {
+                left: 27%;
+            }
             @media screen and(max-width:$moblie) {
                 left: 20%;
             }
         }
         .sec04-bottom-box {
-            text-align: center;
-            width: 40vw;
             margin: 0 auto;
+            text-align: center;
+            @media screen and(min-width:768px) {
+                width: 70vw;
+            }
+            @media screen and(min-width:$desktop) {
+                width: 40vw;
+            }
             @media screen and(max-width:$moblie) {
                 width: 95vw;
                 padding: 5px;
@@ -707,6 +815,9 @@ body {
                 color: $text-color;
                 width: 38vw;
                 margin: 0 auto;
+                @media screen and(max-width:$table) {
+                    width: 70vw;
+                }
                 @media screen and(max-width:$moblie) {
                     width: 95vw;
                 }
@@ -722,6 +833,9 @@ body {
                 left: -8vw;
                 z-index: 0;
                 top: 18vw;
+                @media screen and(max-width:$table) {
+                    display: none;
+                }
                 @media screen and(max-width:$moblie) {
                     display: none;
                 }
@@ -731,6 +845,9 @@ body {
                 right:-6vw;
                 top:18vw;
                 z-index: 1;
+                @media screen and(max-width:$table) {
+                    display: none;
+                }
                 @media screen and(max-width:$moblie) {
                     display: none;
                 }
@@ -828,13 +945,21 @@ body {
     }
 }
 #sec04-2 {
-    margin-top: -350px;
+    @media screen and(min-width:$desktop) {
+        margin-top: -320px;
+    }
+    @media screen and(max-width:$table) {
+        margin-top: -150px;
+     }
     @media screen and(max-width:$moblie) {
         margin-top: -90px;
     }
 }
 
 .gotop {
+    @media screen and(min-width:768px) {
+        display: none;
+     }
     @media screen and(min-width:$desktop) {
         display: none;
     }
@@ -871,6 +996,9 @@ body {
             width: 100%;
             opacity: 1 !important;
         }
+        @media screen and(max-width:$table) {
+            bottom: 17vw;
+        }
         @media screen and(max-width:$moblie) {
             bottom: 450px;
             opacity: 1;
@@ -917,7 +1045,7 @@ body {
     }
     #hr04 {
         position: relative;
-        bottom: 16vw;
+        bottom: 14vw;
         z-index: 3;
         hr {
             background-color: $Font-color;
@@ -925,6 +1053,9 @@ body {
             width: 100%;
             opacity: 1 !important;
         }
+        @media screen and(max-width:$table) {
+            bottom: 12vw;
+        }
         @media screen and(max-width:$moblie) {
             bottom: 380px;
             opacity: 1;
@@ -952,6 +1083,9 @@ body {
             position: relative;
             z-index: 5;
             left: 18px;
+            @media screen and(min-width:768px) {
+                display: none;
+            }
             @media screen and(min-width:$desktop) {
                 display: none;
             }
@@ -961,6 +1095,11 @@ body {
             position: absolute;
             top: 10vw;
             left: 10vw;
+              
+            @media screen and(max-width:$table) {
+                left: 8vw;
+                top: 12vw;
+            }
             @media screen and(max-width:$moblie) {
                 top: 20vw;
                 width: 150px;
@@ -973,12 +1112,20 @@ body {
             z-index: 5;
             top: 200px;
             left: 8vmin;
+              
+            @media screen and(max-width:$table) {
+                left: 1vmin;
+                top: 80px;
+            }
             @media screen and(max-width:$moblie) {
                 left: 4vmin;
                 top: 100px;
             }
             h1 {
                 font-size: 45px;
+                @media screen and(max-width:$table) {
+                    font-size: 32px;
+                }
                 @media screen and(max-width:$moblie) {
                     font-size: 10vmin;
                 }
@@ -998,6 +1145,10 @@ body {
             top: 100px;
             right: 5vmin;
             z-index: 5;
+            @media screen and(max-width:$table) {
+                right: -1vmin;
+                top: 60px;          
+            }
             @media screen and(max-width:$moblie) {
                 top: 70px;
                 right: 5vw;
@@ -1007,6 +1158,9 @@ body {
             }
             h1 {
                 font-size: 45px;
+                @media screen and(max-width:$table) {
+                    font-size: 32px;
+                }
                 @media screen and(max-width:$moblie) {
                     font-size: 10vmin;
                 }
@@ -1023,6 +1177,10 @@ body {
             position: relative;
             z-index: 5;
             width: 35vw;
+            @media screen and(max-width:$table) {
+                margin-top: 15px;
+                right:30px;
+            }
             @media screen and(max-width:$moblie) {
                 display: none;
             }
@@ -1033,6 +1191,9 @@ body {
             position: relative;
             z-index: 7;
             right: 50px;
+            @media screen and(min-width:768px) {
+                display: none;
+            }
             @media screen and(min-width:$desktop) {
                 display: none;
             }
@@ -1045,6 +1206,11 @@ body {
             position: absolute;
             top: 8vw;
             right: 4vw;
+            @media screen and(max-width:$table) {
+                right: 3vw;
+                top: 8vw;
+                width: 17vw;
+            }
             @media screen and(max-width:$moblie) {
                 width: 140px;
                 right: 5vw;
@@ -1062,6 +1228,10 @@ body {
             top: 100px;
             right: 2vmin;
             z-index: 5;
+            @media screen and(max-width:$table) {
+                right: -1vmin;
+                top: 80px;
+            }
             @media screen and(max-width:$moblie) {
                 right: -5px;
                 top: 90px;
@@ -1072,6 +1242,9 @@ body {
             }
             h1 {
                 font-size: 45px;
+                @media screen and(max-width:$table) {
+                    font-size: 32px;
+                }
                 @media screen and(max-width:$moblie) {
                     font-size: 10vmin;
                 }
@@ -1091,6 +1264,10 @@ body {
             width: 33vw;
             position: relative;
             z-index: 7;
+            @media screen and(max-width:$table) {
+                right:30px;
+                margin-top: 15px;
+            }
             @media screen and(max-width:$moblie) {
                 width: 300px;
                 right: 20px;
@@ -1105,6 +1282,9 @@ body {
             position: absolute;
             top: 8vw;
             right: 4vw;
+            @media screen and(max-width:$table) {
+                top: 11vw;
+            }
             @media screen and(max-width:$moblie) {
                 width: 140px;
                 right: 5vw;
@@ -1122,6 +1302,10 @@ body {
             top: 250px;
             left: 5vmin;
             z-index: 5;
+            @media screen and(max-width:$table) {
+                top: 150px;
+                left:3vmin;
+            }
             @media screen and(max-width:$moblie) {
                 top: 220px;
                 left: 40px;
@@ -1132,6 +1316,9 @@ body {
             }
             h1 {
                 font-size: 45px;
+                @media screen and(max-width:$table) {
+                    font-size: 32px;
+                }
                 @media screen and(max-width:$moblie) {
                     font-size: 10vmin;
                 }
@@ -1148,7 +1335,11 @@ body {
             width: 15vw;
             position: absolute;
             top: 8vw;
-            left: 7vw;
+            left: 10vw;
+            @media screen and(max-width:$table) {
+                left: 10vw;
+                top: 11vw;
+            }
             @media screen and(max-width:$moblie) {
                 width: 140px;
                 left: 15vw;
@@ -1159,9 +1350,12 @@ body {
             }
         }
         .img-04 {
-            width: 28vw;
+            width: 25vw;
             position: relative;
             z-index: 7;
+            @media screen and(max-width:$table) {
+                top: 2vw;
+            }
             @media screen and(max-width:$moblie) {
                 right: -10px;
                 width: 260px;
@@ -1178,6 +1372,9 @@ body {
         background-size: contain;
         background-repeat: no-repeat;
         margin-top: 100px;
+        @media screen and(max-width:$table) {
+            margin-top: 80px;
+         }
         @media screen and(max-width:$moblie) {
             background-size: cover;
             margin-top: 30px;
@@ -1185,6 +1382,10 @@ body {
         }
         .playbutton {
             margin-top: 120px;
+            @media screen and(max-width:$table) {
+                width: 50px;
+                margin-top: 70px;
+             }
             @media screen and(max-width:$moblie) {
                 margin-top: 20vw;
             }
@@ -1194,6 +1395,9 @@ body {
             position: absolute;
             bottom: 10vw;
             font-size: 20px;
+            @media screen and(max-width:$table) {
+                bottom: 5vw;
+             }
             @media screen and(max-width:$moblie) {
                 display: none;
             }
@@ -1203,6 +1407,9 @@ body {
             position: absolute;
             bottom: 10vw;
             font-size: 20px;
+            @media screen and(max-width:$table) {
+                bottom: 3vw;
+             }
             @media screen and(max-width:$moblie) {
                 display: none;
             }
@@ -1212,6 +1419,9 @@ body {
             position: absolute;
             bottom: 10vw;
             font-size: 20px;
+            @media screen and(max-width:$table) {
+                bottom: 3vw;
+             }
             @media screen and(max-width:$moblie) {
                 display: none;
             }
@@ -1221,6 +1431,9 @@ body {
             position: absolute;
             bottom: 7vw;
             font-size: 20px;
+            @media screen and(max-width:$table) {
+                bottom: -1vw;
+             }
             @media screen and(max-width:$moblie) {
                 display: none;
             }
@@ -1236,6 +1449,9 @@ body {
 
 // 手機板logo
 .inclogo-m {
+    @media screen and(max-width:$table) {
+        display: none;
+    }
     @media screen and(min-width:$desktop) {
         display: none;
     }
@@ -1249,6 +1465,9 @@ body {
 // 方形logo
 .inclogo3 {
     width: 180px;
+    @media screen and(max-width:$table) {
+        width: 130px;
+    }
     @media screen and(max-width:$moblie) {
         width: 110px;
     }
@@ -1262,6 +1481,17 @@ body {
 }
 #designer2-sec01 {
     margin-top: -200px;
+    @media screen and(max-width:$table) {
+        margin-top: -150px;
+    }
+    @media screen and(max-width:$moblie) {
+        margin-top: 0px;
+    }
+}
+#designer4-sec01{
+    @media screen and(max-width:$table) {
+        margin-top: -50px;
+    }
     @media screen and(max-width:$moblie) {
         margin-top: 0px;
     }
@@ -1269,6 +1499,7 @@ body {
 .sec01-int {
     margin-top: -110px;
     padding-bottom: 5vw;
+  
     @media screen and(max-width:$moblie) {
         margin-top: 0px;
     }
@@ -1281,6 +1512,10 @@ body {
         .slogan-part1 {
             width: 35vw;
             margin: 0 auto;
+            @media screen and(max-width:$table) {
+                margin-top: 30px;
+                width: 50vw;
+            }
             @media screen and(max-width:$moblie) {
                 width: 90vw;
             }
@@ -1288,6 +1523,9 @@ body {
         .slogan-part2 {
             width: 20vw;
             margin: 0 auto;
+            @media screen and(max-width:$table) {
+               width: 35vw;
+            }
             @media screen and(max-width:$moblie) {
                 width: 90vw;
             }
@@ -1313,6 +1551,9 @@ body {
     }
     .protfolio-m {
         padding-top: 30vw;
+        @media screen and(min-width:768px) {
+            display: none;
+        }
         @media screen and(min-width:$desktop) {
             display: none;
         }
@@ -1343,6 +1584,9 @@ body {
     z-index: 20;
     box-shadow: 0px 3px 20px #00000029;
     display: none;
+    @media screen and(max-width:$table) {
+        right: 10px;
+    }
     hr {
         margin: 5px auto !important;
         background: #e2e2e2;