From eda6def0791abb28f25fd69d999f6716f029e40a Mon Sep 17 00:00:00 2001
From: YoungseoChoi23 <dudtj9326@ewhain.net>
Date: Thu, 22 Aug 2024 02:48:27 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Style=20:=20=EB=A9=94=EC=9D=B8?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=98=EC=9D=91=ED=98=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/introduce/main_bottom.svg | 13 ++++++---
 src/pages/IntroducePage/Main.jsx     | 40 +++++++++++++++++++++-------
 2 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/assets/introduce/main_bottom.svg b/src/assets/introduce/main_bottom.svg
index 0efd6b23..6d1f65bd 100644
--- a/src/assets/introduce/main_bottom.svg
+++ b/src/assets/introduce/main_bottom.svg
@@ -1,13 +1,18 @@
 <svg width="901" height="470" viewBox="0 0 901 470" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_b_2963_5078)">
+<g clip-path="url(#clip0_839_6020)">
+<g filter="url(#filter0_b_839_6020)">
 <path d="M782.801 317.52C820.682 265.24 816.127 191.615 769.135 144.611C718.307 93.7692 636.79 92.3303 584.283 140.534V133.819C584.283 59.9548 524.345 0 450.5 0C376.655 0 316.717 59.9548 316.717 133.819V140.534C264.21 92.5702 182.693 93.7692 131.865 144.611C84.6336 191.855 80.0782 265.24 118.199 317.52C51.7871 325.195 0 381.792 0 450.38C0 524.244 59.9388 584.199 133.783 584.199H140.497L132.105 592.593C79.8385 644.873 79.8385 729.529 132.105 781.81C183.173 832.891 265.649 834.091 317.915 784.688C326.547 850.158 382.649 901 450.5 901C518.351 901 574.453 850.398 583.085 784.688C635.591 833.851 717.827 832.891 768.895 781.81C821.162 729.529 821.162 644.873 768.895 592.593L760.504 584.199H767.217C841.061 584.199 901 524.244 901 450.38C900.76 381.792 849.213 325.195 782.801 317.52Z" fill="#24EE81"/>
 </g>
+</g>
 <defs>
-<filter id="filter0_b_2963_5078" x="-4" y="-4" width="909" height="909" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_b_839_6020" x="-4" y="-4" width="909" height="909" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>
-<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2963_5078"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2963_5078" result="shape"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_839_6020"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_839_6020" result="shape"/>
 </filter>
+<clipPath id="clip0_839_6020">
+<rect width="901" height="470" fill="white"/>
+</clipPath>
 </defs>
 </svg>
diff --git a/src/pages/IntroducePage/Main.jsx b/src/pages/IntroducePage/Main.jsx
index 2cfa7eb0..44c3bebe 100644
--- a/src/pages/IntroducePage/Main.jsx
+++ b/src/pages/IntroducePage/Main.jsx
@@ -27,14 +27,8 @@ const Main = () => {
             src={main_bottom}
             alt="main_bottom"
           />
+          <BottomText>음악지도 보러가기</BottomText>
         </Bottom>
-        <BottomText>
-          <img
-            onClick={handleGotoHomepage}
-            src={main_bottom_text}
-            alt="main_bottom_text"
-          />
-        </BottomText>
       </Wrapper>
     </>
   );
@@ -49,6 +43,7 @@ const BackgroundWrapper = styled.div`
   z-index: 0;
 `;
 const Wrapper = styled.div`
+  min-width: 1000px;
   position: relative;
   z-index: 1;
 `;
@@ -56,18 +51,34 @@ const Center = styled.div`
   position: fixed;
   left: 50%;
   z-index: 1;
-  top: 85px;
   transform: translateX(-50%);
+  @media (min-width: 1024px) {
+    img {
+      width: 100%; /*1024px보다 클 때 width 100%*/
+    }
+  }
+  @media (max-width: 1024px) {
+    img {
+      width: 100%; /*1024px보다 작을 때 width 10%*/
+    }
+  }
 `;
 const Bottom = styled.div`
+  position: relative;
   img {
     width: 810.9px;
     height: 366.3px;
     position: fixed;
     left: 50%;
     bottom: 0px;
+    z-index: 2;
     transform: translateX(-50%);
     cursor: pointer;
+    @media (min-width: 1024px) {
+      width: 100%; /*1024px보다 클 때 width 100%*/
+    }
+    @media (max-width: 1024px) {
+    }
   }
 `;
 const BottomText = styled.div`
@@ -75,8 +86,19 @@ const BottomText = styled.div`
   left: 50%;
   bottom: 80px;
   transform: translateX(-50%);
-  z-index: 2;
+  z-index: 3;
+  color: var(--light_black, #232323);
+  text-align: center;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 40px; /* 125% */
   cursor: pointer;
+  @media (max-width: 768px) {
+    postiion: absolute;
+    bottom: 80px;
+  }
+  white-space: nowrap;
 `;
 
 export default Main;