diff --git a/src/assets/introduce/main_bottom.svg b/src/assets/introduce/main_bottom.svg
index 0efd6b2..6d1f65b 100644
--- a/src/assets/introduce/main_bottom.svg
+++ b/src/assets/introduce/main_bottom.svg
@@ -1,13 +1,18 @@
diff --git a/src/pages/IntroducePage/Main.jsx b/src/pages/IntroducePage/Main.jsx
index 2cfa7eb..44c3beb 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"
/>
+ 음악지도 보러가기
-
-
-
>
);
@@ -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;