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" /> + 음악지도 보러가기 - - main_bottom_text - ); @@ -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;