From 15ea10ae448eb1d22633407300255a6932152359 Mon Sep 17 00:00:00 2001
From: YoungseoChoi23 <dudtj9326@ewhain.net>
Date: Thu, 22 Aug 2024 00:14:04 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20:=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=EC=82=AC=ED=95=AD=20=EB=B3=B5=EA=B5=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/IntroducePage/Main.jsx | 42 +++++++++-----------------------
 1 file changed, 11 insertions(+), 31 deletions(-)

diff --git a/src/pages/IntroducePage/Main.jsx b/src/pages/IntroducePage/Main.jsx
index 5c6afbf..d9f3692 100644
--- a/src/pages/IntroducePage/Main.jsx
+++ b/src/pages/IntroducePage/Main.jsx
@@ -27,8 +27,14 @@ 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>
     </>
   );
@@ -43,41 +49,26 @@ const BackgroundWrapper = styled.div`
   z-index: 0;
 `;
 const Wrapper = styled.div`
-  min-width: 1536px;
+  min-width: 1920px;
   position: relative;
   z-index: 1;
 `;
 const Center = styled.div`
-  position: absolute;
+  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 (max-width: 768px) {
-      width: 340.578px;
-      height: 153.846px;
-    }
   }
 `;
 const BottomText = styled.div`
@@ -85,19 +76,8 @@ const BottomText = styled.div`
   left: 50%;
   bottom: 80px;
   transform: translateX(-50%);
-  z-index: 3;
-  color: var(--light_black, #232323);
-  text-align: center;
-  font-size: 32px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 40px; /* 125% */
+  z-index: 2;
   cursor: pointer;
-  @media (max-width: 768px) {
-    postiion: absolute;
-    bottom: 20px;
-    font-size: 16px;
-  }
 `;
 
 export default Main;