From 28e4704c2e1ca8f6f74b2b0e6901f3c53501ba6e Mon Sep 17 00:00:00 2001
From: Dongpil Jo <ehdvlf001@knu.ac.kr>
Date: Tue, 9 Jul 2024 12:11:40 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=EC=8B=A0=EC=B2=AD=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20css=20=EC=88=98=EC=A0=95=20=EB=B0=98=EC=98=81?=
 =?UTF-8?q?=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/hackathon/HackathonPart.tsx    | 22 ++++++++++---------
 .../landing/components/hackathon/MainInfo.tsx | 22 ++++++++++++++++++-
 .../landing/components/hackathon/More.tsx     |  2 +-
 3 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/pages/landing/components/hackathon/HackathonPart.tsx b/src/pages/landing/components/hackathon/HackathonPart.tsx
index 5c17840..f9e4140 100644
--- a/src/pages/landing/components/hackathon/HackathonPart.tsx
+++ b/src/pages/landing/components/hackathon/HackathonPart.tsx
@@ -45,12 +45,9 @@ const PartButton = styled.div`
     font-size: 28px;
     font-style: normal;
 
-    width: 580px;
+    width: clamp(530px, 2vw, 580px);
     height: auto;
 
-    margin-top: 120px;
-    margin-bottom: 148px;
-
     cursor: pointer;
 
     &:hover {
@@ -58,20 +55,25 @@ const PartButton = styled.div`
     }
 
     @media (max-width: 767px) {
-        width: 520px;
+        width: 530px;
         height: 64px;
         font-size: 20px;
-        margin-top: 40px;
-        margin-bottom: clamp(255px, 2vh, 446px);
-        width: 300px;
     }
 
     @media (max-width: 360px) {
         width: 282px;
         height: 48px;
         font-size: 16px;
-        margin-top: 36px;
-        margin-bottom: 255px;
+    }
+    @media (max-width: 390px) {
+        width: 282px;
+        height: 48px;
+        font-size: 16px;
+    }
+    @media (max-width: 430px) {
+        width: 282px;
+        height: 48px;
+        font-size: 16px;
     }
 `;
 
diff --git a/src/pages/landing/components/hackathon/MainInfo.tsx b/src/pages/landing/components/hackathon/MainInfo.tsx
index ee24bdd..31528a1 100644
--- a/src/pages/landing/components/hackathon/MainInfo.tsx
+++ b/src/pages/landing/components/hackathon/MainInfo.tsx
@@ -16,7 +16,9 @@ const MainInfo = () => {
             <FirstWrapper>
                 <Container>
                     <TitleImg src={title} />
-                    <HackathonPart />
+                    <Participation>
+                        <HackathonPart />
+                    </Participation>
                 </Container>
             </FirstWrapper>
             <LineWrapper>
@@ -127,6 +129,24 @@ const Container = styled.div`
     }
 `;
 
+const Participation = styled.div`
+    display: flex;
+    justify-content: center;
+    margin-top: 120px;
+    margin-bottom: 148px;
+    width: 100%;
+
+    @media (max-width: 767px) {
+        margin-top: 40px;
+        margin-bottom: clamp(255px, 2vh, 446px);
+    }
+
+    @media (max-width: 360px) {
+        margin-top: 36px;
+        margin-bottom: 255px;
+    }
+`;
+
 const TitleImg = styled.img`
     margin-top: 302px;
     width: clamp(520px, 5wv, 926px);
diff --git a/src/pages/landing/components/hackathon/More.tsx b/src/pages/landing/components/hackathon/More.tsx
index 7547d84..0f7ed89 100644
--- a/src/pages/landing/components/hackathon/More.tsx
+++ b/src/pages/landing/components/hackathon/More.tsx
@@ -116,7 +116,7 @@ const MoreBtn = styled.div`
     line-height: 150%; /* 30px */
 
     @media (max-width: 767px) {
-        width: clamp(320px, 2vw, 523px);
+        width: clamp(290px, 3vw, 523px);
         height: 48px;
         font-size: 16px;
     }