💄 Style: 모바일 반응형 랜딩 메인페이지 수정

src/components/Box/Box.jsx

@@ -15,13 +15,28 @@ const boxStyle = css`
   gap: 10px;
   padding: 0 20px;
   box-sizing: border-box;
+
+  @media (max-width: 768px) {
+    width: 170px; /* 작은 화면에서 박스 크기 줄이기 */
+    height: 170px;
+    padding: 0 15px; /* 패딩 조정 */
+  }
 `;
 
 const imageStyle = css`
   flex: 0 1 auto;
   display: flex;
   flex-direction: row-reverse;
   gap: 5px;
+
+  img {
+    width: 60px; /* 기본 이미지 크기 */
+    height: auto;
+
+    @media (max-width: 768px) {
+      width: 30px; /* 작은 화면에서 이미지 크기 줄이기 */
+    }
+  }
 `;
 
 const titleStyle = css`
@@ -33,6 +48,11 @@ const titleStyle = css`
   line-height: normal;
   letter-spacing: -1.56px;
   padding-top: 10px;
+
+  @media (max-width: 768px) {
+    font-size: 18px; /* 작은 화면에서 제목 크기 줄이기 */
+    padding-top: 5px;
+  }
 `;
 
 const contentStyle = css`
@@ -45,6 +65,12 @@ const contentStyle = css`
   letter-spacing: -1.17px;
   padding-top: 5px;
   padding-bottom: 10px;
+
+  @media (max-width: 768px) {
+    font-size: 12px; /* 작은 화면에서 내용 크기 줄이기 */
+    padding-top: 3px;
+    padding-bottom: 5px;
+  }
 `;
 
 const Box = ({ images, title, content }) => {

src/pages/Home/BetatestBanner/BetatestStyle.js

@@ -28,16 +28,16 @@ export const containerStyle = css`
 
 export const title = css`
     color: white;
-  font-family: 'Pretendard-Bold';
-  font-size: 30px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 2.4rem;
-  letter-spacing: -1.6px;
-  text-align: center;
+    font-family: 'Pretendard-Bold';
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 2.4rem;
+    letter-spacing: 0px;
+    text-align: center;
 
     @media (max-width: 768px) {
-        font-size: 22px;
+        font-size: 20px;
     }
 
 `;
@@ -75,8 +75,8 @@ export const buttonStyle = css`
     border: none;
     border-radius: 5px;
     cursor: pointer;
-    transition: background-color 0.3s;
-    font-family: 'Pretendard-Bold';
+    transition: background-color 0.3s; 
+    font-family: 'Pretendard';
 
     &:hover {
         background-color: #dd4526;

src/pages/Home/Feature.jsx

@@ -20,13 +20,13 @@ const containerStyle = css`
 
   @media (max-width: 768px) {
     h1 {
-      font-size: 24px;
+      font-size: 22px;
     }
     p {
-      font-size: 15px;
+      font-size: 14px;
     }
     img {
-      width: 70%;
+      width: 90%;
     }
   }
 `;

src/pages/Home/Feature2.jsx

@@ -21,7 +21,7 @@ const containerStyle = css`
   @media (max-width: 768px) {
     padding: 4rem 1rem;
     p {
-      font-size: 24px;
+      font-size: 15px;
     }
     img {
       width: 90%;

src/pages/Home/Fy.jsx

@@ -16,13 +16,13 @@ const containerStyle = css`
     flex-direction: column;
     padding: 2rem 1rem;
     h1 {
-      font-size: 24px;
+      font-size: 22px;
     }
     p {
-      font-size: 16px;
+      font-size: 14px;
     }
     img {
-      width: 50%;
+      width: 40%;
     }
   }
 `;

src/pages/Home/Intro.jsx

@@ -20,13 +20,13 @@ const containerStyle = css`
   @media (max-width: 768px) {
     padding: 4rem 1rem;
     h1 {
-      font-size: 30px;
+      font-size: 20px;
     }
     p {
-      font-size: 20px;
+      font-size: 15px;
     }
     img {
-      width: 100%;
+      width: 90%;
     }
   }
 `;
@@ -68,13 +68,19 @@ const sectionStyle = css`
 const textStyle = css`
   color: black;
   font-family: 'Pretendard-Medium';
-  font-size: 18px;
+  font-size: 18px; 
   font-weight: 400;
   line-height: 24px;
   letter-spacing: -1.4px;
   margin-bottom: 40px;
+
+  @media (max-width: 768px) {
+    font-size: 13px !important;
+    margin-top: 20px;
+  }
 `;
 
+
 const Feature = () => {
   return (
     <motion.div

src/pages/Home/JoinForm/JoinFormStyles.js

@@ -33,6 +33,10 @@ export const titleStyle = css`
   margin-bottom: 20px;
   text-align: center;
   line-height: 1.5;
+
+  @media (max-width: 768px) {
+        font-size: 1.1rem;
+    }
 `;
 
 export const spanStyle = css`
@@ -46,6 +50,10 @@ export const spanStyle = css`
   .highlight {
     color: var(--key, #f1502f);
   }
+
+  @media (max-width: 768px) {
+        font-size: 1.1rem;
+    }
 `;
 
 export const boldtitle = css`
@@ -69,6 +77,10 @@ export const formTitleStyle = css`
   font-weight: bold;
   padding-bottom: 20px;
   text-align: center;
+
+  @media (max-width: 768px) {
+        font-size: 18px;
+    }
 `;
 
 export const formRowStyle = css`
@@ -85,6 +97,10 @@ export const labelStyle = css`
   padding-left: 30px;
   width: 80px;
   text-align: left;
+
+  @media (max-width: 768px) {
+        font-size: 14px;
+  }
 `;
 
 export const inputStyle = css`
@@ -103,6 +119,10 @@ export const inputStyle = css`
   &:focus {
     border-bottom-color: #f1502f;
   }
+
+  @media (max-width: 768px) {
+        font-size: 14px;
+  }
 `;
 
 export const errorStyle = css`
@@ -126,11 +146,14 @@ export const buttonStyle = css`
   border-radius: 5px;
   cursor: pointer;
   transition: background-color 0.3s;
-  font-family: 'Pretendard-Bold';
+  font-family: 'Pretendard';
 
   &:hover {
     background-color: #dd4526;
   }
+  @media (max-width: 768px) {
+        font-size: 14px;
+  }
 `;
 
 export const modalOverlayStyle = css`

src/pages/Home/Main/MainStyle.js

@@ -37,7 +37,7 @@ export const mainStyle = css`
       font-size: 34px;
     }
     p {
-      font-size: 24px;
+      font-size: 13px;
     }
   }
 `;
@@ -91,6 +91,7 @@ export const rnbStyle = css`
 
   @media (max-width: 768px) {
     margin-top: 50px;
+    margin-left: 80px;
   }
 `;