diff --git a/src/pages/landing/components/hackathon/Detail.tsx b/src/pages/landing/components/hackathon/Detail.tsx
index eed2fc0..226684d 100644
--- a/src/pages/landing/components/hackathon/Detail.tsx
+++ b/src/pages/landing/components/hackathon/Detail.tsx
@@ -102,8 +102,7 @@ const MoreBtn = styled.div`
line-height: 150%; /* 30px */
@media (max-width: 767px) {
- /* width: clamp(360px, 3vw, 523px); */
- width: 320px;
+ width: clamp(290px, 3vw, 523px);
height: 48px;
font-size: 16px;
}
diff --git a/src/pages/landing/components/hackathon/HackathonPart.tsx b/src/pages/landing/components/hackathon/HackathonPart.tsx
index 5c17840..0c66ab7 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(520px, 2vw, 580px);
height: auto;
- margin-top: 120px;
- margin-bottom: 148px;
-
cursor: pointer;
&:hover {
@@ -61,22 +58,27 @@ const PartButton = styled.div`
width: 520px;
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;
}
`;
const Info = styled.div`
- margin: 21px 0px 20px 40px;
+ margin: 20px 0px 20px 40px;
font-weight: bold;
`;
diff --git a/src/pages/landing/components/hackathon/HackathonSponsor.tsx b/src/pages/landing/components/hackathon/HackathonSponsor.tsx
index c16106a..b955d87 100644
--- a/src/pages/landing/components/hackathon/HackathonSponsor.tsx
+++ b/src/pages/landing/components/hackathon/HackathonSponsor.tsx
@@ -14,6 +14,7 @@ import logo9 from '../../../../img/landing/sponsor/logo9.svg';
import logo10 from '../../../../img/landing/sponsor/logo10.svg';
import logo11 from '../../../../img/landing/sponsor/logo11.svg';
import logo12 from '../../../../img/landing/sponsor/logo12.svg';
+import { styled } from 'styled-components';
const SponsorInfo = () => {
SwiperCore.use([Autoplay]);
@@ -74,6 +75,7 @@ type serviceType = {
url: string;
backgroundColor?: string;
};
+
const serviceList: serviceType[] = [
{
id: 0,
diff --git a/src/pages/landing/components/hackathon/HackathonTimer.tsx b/src/pages/landing/components/hackathon/HackathonTimer.tsx
index a928636..802dea0 100644
--- a/src/pages/landing/components/hackathon/HackathonTimer.tsx
+++ b/src/pages/landing/components/hackathon/HackathonTimer.tsx
@@ -87,7 +87,6 @@ const TimerContainer = styled.div`
border-radius: 24px;
height: 240px;
max-width: 1200px;
- width: 100%;
margin-left: 10px;
margin-right: 10px;
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 = () => {
-
+
+
+
@@ -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..ada979d 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, 2vw, 523px);
height: 48px;
font-size: 16px;
}