diff --git "a/image/\355\214\220\353\213\244\354\226\274\352\265\264.png" b/image/logo.png
similarity index 100%
rename from "image/\355\214\220\353\213\244\354\226\274\352\265\264.png"
rename to image/logo.png
diff --git "a/image/\355\214\220\353\213\244\353\247\210\354\274\223.png" b/image/typography.png
similarity index 100%
rename from "image/\355\214\220\353\213\244\353\247\210\354\274\223.png"
rename to image/typography.png
diff --git a/index.html b/index.html
index 9305074d..4d09b996 100644
--- a/index.html
+++ b/index.html
@@ -17,10 +17,10 @@
             <header>
                 <a class="logo" href="index.html">
                     <div class="logo-image">
-                        <img src="image/판다얼굴.png">
+                        <img src="image/logo.png">
                     </div>
                     <div class="logo-text">
-                        <img src="image/판다마켓.png">
+                        <img src="image/typography.png">
                     </div>
                 </a>
                     <a class="login-button button" href="login.html">
@@ -35,8 +35,8 @@
                     <div class="top-banner">
                         <div class="top-banner-text">
                             <p>
-                                일상의 모든 물건을<br>
-                                거래해 보세요
+                                일상의 모든 물건을
+                                <span>거래해 보세요</span>
                             </p>
                             <a class="find-items-button button" href="items.html">
                                     구경하러 가기
@@ -59,8 +59,8 @@
                                 Hot item
                             </p>
                             <h2>
-                                인기 상품을<br>
-                                확인해 보세요
+                                인기 상품을
+                                <span>확인해 보세요</span>
                             </h2>
                             <h3>
                                 가장 HOT한 중고거래 물품을<br>
@@ -77,8 +77,8 @@ <h3>
                                 Search
                             </p>
                             <h2>
-                                구매를 원하는<br>
-                                상품을 검색하세요
+                                구매를 원하는
+                                <span>상품을 검색하세요</span> 
                             </h2>
                             <h3>
                                 구매하고 싶은 물품을 검색해서<br>
@@ -102,8 +102,8 @@ <h3>
                                 Register
                             </p>
                             <h2>
-                                판매를 원하는<br>
-                                상품을 등록하세요
+                                판매를 원하는
+                                <span>상품을 등록하세요</span>
                             </h2>
                             <h3>
                                 어떤 물건이든 판매하고 싶은 상품을<br>
diff --git a/login-Signup.css b/login-Signup.css
new file mode 100644
index 00000000..232ac8b8
--- /dev/null
+++ b/login-Signup.css
@@ -0,0 +1,237 @@
+* {
+    box-sizing: border-box;
+}
+
+@media (min-width: 375px) {
+
+    /* 버튼 관련 */
+    .buttons {
+        width: 100%;
+        height: 56px;
+        border-radius: 40px;
+        background-color: #9CA3AF;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        color: #F3F4F6;
+        margin-bottom: 24px;
+        font-size: 20px;
+        font-weight: 600;
+        border: 0px;
+    }
+
+    /* 전체적인 틀 */
+    body {
+        font-family: "Pretendard Variable", Pretendard, sans-serif;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    container {
+        margin-top: 80px;
+        width: 100%;
+        max-width: 400px;
+        height: auto;
+        margin-right: 16px;
+        margin-left: 16px;
+    }
+
+    /* 로고관련 */
+    #logo > a {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 11px;
+        margin-bottom: 24px;
+    }
+
+    #logo img:first-child {
+        width: 52px;
+    }
+
+    #logo img:last-child {
+        width: 133px;
+    }
+
+    /* 폼테그 관련 */
+    form {
+        display: flex;
+        flex-direction: column;
+        color: #1F2937;
+        font-size: 18px;
+        font-weight: 700;
+    }
+
+    form > label {
+        margin-bottom: 8px;
+    }
+
+    form > input {
+        width: 100%;
+        height: 56px;
+        border: 0;
+        background-color: #F3F4F6;
+        border-radius: 12px;
+        margin-bottom: 16px;
+    }
+
+    input::placeholder {
+        font-size: 16px;
+        padding: 24px;
+    }
+
+    /* sns 로그인 관련 */
+    .sns-login {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        background-color: #E6F2FF;
+        padding: 16px 23px;
+        border-radius: 8px;
+        margin-bottom: 24px;
+        font-size: 16px;
+        font-weight: 500;
+    }
+
+    .sns-login-image {
+        display: flex;
+        flex-direction: row;
+        gap: 16px;
+    }
+
+    .sns-login-image img {
+        width: 42px;
+        height: 42px;
+    }
+
+    /* footer 관련 */
+    .footer {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+    }
+
+    .footer p {
+        margin: 0px;
+    }
+
+    .footer a {
+        color: #3692FF;
+    }
+}
+ 
+@media (min-width: 768px) {
+/* 버튼 관련 */
+    .buttons {
+        width: 100%;
+        height: 56px;
+        border-radius: 40px;
+        background-color: #9CA3AF;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        color: #F3F4F6;
+        margin-bottom: 24px;
+        font-size: 20px;
+        font-weight: 600;
+        border: 0px;
+    }
+
+    /* 전체적인 틀 */
+    body {
+        font-family: "Pretendard Variable", Pretendard, sans-serif;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    container {
+        margin-top: 231px;
+        width: 640px;
+        height: auto;
+    }
+
+    /* 로고관련 */
+    #logo > a {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 22px;
+        margin-bottom: 40px;
+    }
+
+    /* 폼테그 관련 */
+    form {
+        display: flex;
+        flex-direction: column;
+        color: #1F2937;
+        font-size: 18px;
+        font-weight: 700;
+    }
+
+    form > label {
+        margin-bottom: 16px;
+    }
+
+    form > input {
+        width: 100%;
+        height: 56px;
+        border: 0;
+        background-color: #F3F4F6;
+        border-radius: 12px;
+        margin-bottom: 24px;
+    }
+
+    input::placeholder {
+        font-size: 16px;
+        padding: 24px;
+    }
+
+    /* sns 로그인 관련 */
+    .sns-login {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        background-color: #E6F2FF;
+        padding: 16px 23px;
+        border-radius: 8px;
+        margin-bottom: 24px;
+        font-size: 16px;
+        font-weight: 500;
+    }
+
+    .sns-login-image {
+        display: flex;
+        flex-direction: row;
+        gap: 16px;
+    }
+
+    .sns-login-image img {
+        width: 42px;
+        height: 42px;
+    }
+
+    /* footer 관련 */
+    .footer {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+    }
+
+    .footer a {
+        color: #3692FF;
+    }
+}
\ No newline at end of file
diff --git a/login.css b/login.css
index c371d161..8729e38d 100644
--- a/login.css
+++ b/login.css
@@ -16,6 +16,7 @@
     margin-bottom: 24px;
     font-size: 20px;
     font-weight: 600;
+    border: 0px;
 }
 
 /* 전체적인 틀 */
@@ -52,7 +53,7 @@ form {
     font-weight: 700;
 }
 
-form > lable {
+form > label {
     margin-bottom: 16px;
 }
 
@@ -106,17 +107,4 @@ input::placeholder {
 
 .footer a {
     color: #3692FF;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
+}
\ No newline at end of file
diff --git a/login.html b/login.html
index e3bc352a..8647b794 100644
--- a/login.html
+++ b/login.html
@@ -4,25 +4,25 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
-    <link rel="stylesheet" href="login.css">
-    <title>Document</title>
+    <link rel="stylesheet" href="login-Signup.css">
+    <title>판다마켓 - 로그인</title>
 </head>
 <body>
     <container>
         <div id="logo">
             <a href="index.html">
-                <img src="./image/판다얼굴.png">
-                <img src="./image/판다마켓.png">
+                <img src="./image/logo.png" alt="판다마켓 로고">
+                <img src="./image/typography.png" alt="판다마켓 로고 텍스트">
             </a>    
         </div>
         <form>
-            <lable>이메일</lable>
-            <input type="email" name="user-email" placeholder="이메일을 입력해주세요">
-            <lable>비밀번호</lable>
-            <input type="password" name="user-password" placeholder="비밀번호를 입력해주세요">
-            <div class="login-button">
+            <label for="email">이메일</label>
+            <input type="email" id="email" name="user-email" placeholder="이메일을 입력해주세요">
+            <label for="password">비밀번호</label>
+            <input type="password" id="password" name="user-password" placeholder="비밀번호를 입력해주세요">
+            <button type="submit" class="login-button buttons">
                 로그인
-            </div>
+            </button>
         </form>
         <div class="sns-login">
             <p>간편 로그인하기</p>
diff --git a/signup.css b/signup.css
index 58b02fe2..fdda34f7 100644
--- a/signup.css
+++ b/signup.css
@@ -16,6 +16,7 @@
     margin-bottom: 24px;
     font-size: 20px;
     font-weight: 600;
+    border: 0px;
 }
 
 /* 전체적인 틀 */
@@ -52,7 +53,7 @@ form {
     font-weight: 700;
 }
 
-form > lable {
+form > label {
     margin-bottom: 16px;
 }
 
diff --git a/signup.html b/signup.html
index 3845e09d..3aaeaab2 100644
--- a/signup.html
+++ b/signup.html
@@ -4,29 +4,29 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
-    <link rel="stylesheet" href="./signup.css">
-    <title>Document</title>
+    <link rel="stylesheet" href="./login-Signup.css">
+    <title>판다마켓 - 회원가입</title>
 </head>
 <body>
     <container>
         <div id="logo">
             <a href="index.html">
-                <img src="./image/판다얼굴.png" alt="판다마켓 로고">
-                <img src="./image/판다마켓.png" alt="판다마켓">
+                <img src="./image/logo.png" alt="판다마켓 로고">
+                <img src="./image/typography.png" alt="판다마켓 로고 텍스트">
             </a>
         </div>
         <form>
-            <lable>이메일</lable>
-            <input type="email" name="user-email" placeholder="이메일을 입력해주세요">
-            <lable>닉네임</lable>
-            <input type="text" name="user-nickname" placeholder="닉네임을 입력해주세요">
-            <lable>비밀번호</lable>
-            <input type="password" name="user-password" placeholder="비밀번호를 입력해주세요">
-            <lable>비밀번호 확인</lable>
-            <input type="password" name="user-password-check" placeholder="비밀번호를 학인해주세요">
-            <div class="sign-up-button">
+            <label for="email">이메일</label>
+            <input type="email" id="email" name="user-email" placeholder="이메일을 입력해주세요">
+            <label for="nickname">닉네임</label>
+            <input type="text" id="nickname" name="user-nickname" placeholder="닉네임을 입력해주세요">
+            <label for="password">비밀번호</label>
+            <input type="password" id="password" name="user-password" placeholder="비밀번호를 입력해주세요">
+            <label for="passwordCheck">비밀번호 확인</label>
+            <input type="password" id="passwordCheck" name="user-password-check" placeholder="비밀번호를 학인주세요">
+            <button type="submit" class="sign-up-button buttons">
                 회원가입
-            </div>
+            </button>
         </form>
         <div class="sns-login">
             <p>간편 로그인하기</p>
diff --git a/style.css b/style.css
index 1d3e8a3d..474730f3 100644
--- a/style.css
+++ b/style.css
@@ -3,324 +3,1074 @@
 * {
     box-sizing: border-box;
 }
+/* ============================== 반응형 375 부터 Mobile 사이즈 ================================= */
 
-body {
-    font-family: "Pretendard Variable", Pretendard, sans-serif;
-    /* width: 1920px; */
-    /* text-align: center; */
-}
-
-/* 버튼 관련 */
-.button {
-    background-color: #3692FF;
-    color: #F3F4F6;
-    font-weight: 600;
-    cursor: pointer;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;   
-    align-items: center;
-    text-decoration: none;
-}
-
-.login-button {
-    width: 128px;
-    height: 48px;
-    font-size: 16px;
-    border-radius: 8px;
-}
-
-.find-items-button {
-    width: 357px;
-    height: 56px;
-    font-size: 20px;
-    border-radius: 40px;
-}
-
-/* header */
-
-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    width: 1120px;
-    height: 51px;
-    margin: 9.5px 200px;
-}
-
-.header-wrapper {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    position: fixed;
-    width: 100%;
-    background-color: white;
-}
-
-.logo {
-    display: flex;
-    flex-direction: row;
-    justify-content: left;
-    align-items: center;
-    gap: 8.6px;
-}
-
-.logo-image img {
-    width: 40px;
-    height: 40px;
-}
-
-.logo-text img {
-    width: 103px;
-    height: auto;
-}
-
-
-/* main */
-.main-wrapper {
-    padding-top: 70px;
-}
-
-/* top-banner */
-section.top-banner {
-    width: 100%;
-    height: 540px;
-    background-color: #CFE5FF;
-    display: flex;
-    justify-content: center;
-}
-
-section.top-banner > .top-banner {
-    display: flex;
-    flex-direction: row;
-    margin-top: 200px;
-}
+@media (min-width: 375px) {
+    body {
+        font-family: "Pretendard Variable", Pretendard, sans-serif;
+        width: 100%;
+        /* text-align: center; */
+    }
+    
+    /* 버튼 관련 */
+    
+    .button {
+        background-color: #3692FF;
+        color: #F3F4F6;
+        font-weight: 600;
+        cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;   
+        align-items: center;
+        text-decoration: none;
+    }
+    
+    .login-button {
+        width: 128px;
+        height: 48px;
+        font-size: 16px;
+        border-radius: 8px;
+    }
+    
+    .find-items-button {
+        width: 240px;
+        height: 56px;
+        font-size: 20px;
+        border-radius: 40px;
+    }
+    
+    /* header */
+    
+    header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100%;
+        height: 51px;
+        margin: 9.5px 16px;
+    }
+    
+    .header-wrapper {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        position: fixed;
+        width: 100%;
+        background-color: white;
+    }
+    
+    .logo {
+        display: flex;
+        flex-direction: row;
+        justify-content: left;
+        align-items: center;
+        gap: 0px;
+    }
+    
+    .logo-image img {
+        width: 40px;
+        height: 40px;
+        display: none;
+    }
+    
+    .logo-text img {
+        width: 103px;
+        height: auto;
+    }
+    
+    /* main */
+    
+    .main-wrapper {
+        padding-top: 70px;
+    }
 
-.top-banner-text {
-    display: flex;
-    flex-direction: column;
-    gap: 32px;
-    color: #374151;
-    font-size: 40px;
-    font-weight: 700;
-    line-height: 56px;
-}
+    
+    /* top-banner */
+    
+    section.top-banner {
+        width: 100%;
+        height: 771px;
+        background-color: #CFE5FF;
+        display: flex;
+        justify-content: center;
+    }
+    
+    section.top-banner > .top-banner {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 84px;
+    }
+    
+    .top-banner-text {
+        display: flex;
+        flex-direction: column;
+        gap: 32px;
+        color: #374151;
+        font-size: 40px;
+        font-weight: 700;
+        line-height: 56px;
+        align-items: center;
+    }
 
-.top-banner-image img {
-    width: 746px;
-    height: 340px;
-}
+    .top-banner-text span {
+        display: block;
+        text-align: center;
+    }
+    
+    .top-banner-image img {
+        width: 100%;
+        height: auto;
+        display: block
+    }
+    
+    /* hot-item */
+    
+    section.hot-item {
+        width: 100%;
+        height: 417px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        margin-top: 52px;
+        margin-bottom: 40px;
+    }
+    section.hot-item > .hot-item {
+        width: 344px;
+        height: 417px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: left;
+        gap: 24px;
+        background-color: #FCFCFC;
+        border-radius: 12px;
+        overflow: hidden;
+    }
 
-/* hot-item */
+    .hot-item-text > p {
+        color: #3692FF;
+        font-size: 16px;
+        font-weight: 700;
+        padding-left: 8px;
+    }
+    .hot-item-text > h2 {
+        color: #374151;
+        font-size: 24px;
+        font-weight: 700;
+        line-height: 32px;
+        margin: 8px auto 16px;
+        padding-left: 8px;
+    }
+    .hot-item-text > h3 {
+        color: #374151;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 26px;
+        padding-left: 8px;
+    }
+    
+    /* search */
+    
+    section.Search {
+        width: 100%;
+        height: 417px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 40px;
+    }
+    section.Search > .Search {
+        width: 344px;
+        height: 417px;
+        display: flex;
+        flex-direction: column-reverse;
+        justify-content: center;
+        align-items: end;
+        gap: 24px;
+        background-color: #FCFCFC;
+        border-radius: 12px;
+        overflow: hidden;
+    }
+    .search-text > p {
+        color: #3692FF;
+        font-size: 16px;
+        font-weight: 700;
+        text-align: right;
+        padding-right: 8px;
+    }
+    .search-text > h2 {
+        color: #374151;
+        font-size: 24px;
+        font-weight: 700;
+        line-height: 32px;
+        text-align: right;
+        margin: 8px auto 16px;
+        padding-right: 8px;
+    }
+    .search-text > h3 {
+        color: #374151;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 26px;
+        text-align: right;
+        padding-right: 8px;
+    }
+    
+    /* register */
+    
+    section.Register {
+        width: 100%;
+        height: 417px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 83px;
+    }
+    section.Register > .Register {
+        width: 344px;
+        height: 417px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: left;
+        gap: 24px;
+        background-color: #FCFCFC;
+        border-radius: 12px;
+        overflow: hidden;
+    }
+    .register-text > p {
+        color: #3692FF;
+        font-size: 16px;
+        font-weight: 700;
+        padding-left: 8px;
+    }
+    .register-text > h2 {
+        color: #374151;
+        font-size: 24px;
+        font-weight: 700;
+        line-height: 32px;
+        margin: 8px auto 16px;
+        padding-left: 8px;
+    }
+    .register-text > h3 {
+        color: #374151;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 26px;
+        padding-left: 8px;
+    }
+    
+    .hot-item-image img, .search-image img, .register-image img {
+        width: 344px;
+        height: 259px;
+        display: block;
+    }
+    
+    /* bottom-banner */
+    
+    section.bottom-banner {
+        width: 100%;
+        height: 540px;
+        background-color: #CFE5FF;
+        display: flex;
+        justify-content: center;
+    }
+    
+    section.bottom-banner > .bottom-banner {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        padding-top: 121px
+    }
+    
+    .bottom-banner-text {
+        width: 296px;
+        height: 172px;
+        color: #374151;
+        font-size: 40px;
+        font-weight: 700;
+        line-height: 56px;
+        text-align: center;
+        }
+    
+    .bottom-banner-image img {
+        width: 375px;
+        height: auto;
+        display: block;
+    }
+    
+    /* footer */
+    
+    .footer-wrapper {
+        background-color: #111827;
+        width: 100%;
+        height: 160px;
+        font-size: 16px;
+        font-weight: 400;
+        padding-top: 32px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+    }
+    
+    .footer-box {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 60px;
+        margin: 10px;
+    }
+    
+    .footer-left {
+        color: #9CA3AF;
+        order: 1;
+    }
 
-section.hot-item {
-    width: 100%;
-    height: 720px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-}
-section.hot-item > .hot-item {
-    width: 988px;
-    height: 444px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: 64px;
-    background-color: #FCFCFC;
-    border-radius: 12px;
-    overflow: hidden;
-}
-.hot-item-text > p {
-    color: #3692FF;
-    font-size: 18px;
-    font-weight: 700;
-}
-.hot-item-text > h2 {
-    color: #374151;
-    font-size: 40px;
-    font-weight: 700;
-    line-height: 56px;
-}
-.hot-item-text > h3 {
-    color: #374151;
-    font-size: 24px;
-    font-weight: 500;
-    line-height: 32px;
-}
-/* search */
-section.Search {
-    width: 100%;
-    height: 720px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-}
-section.Search > .Search {
-    width: 988px;
-    height: 444px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: 64px;
-    background-color:#FCFCFC;
-    border-radius: 12px;
-    overflow: hidden;
-}
-.search-text > p {
-    color: #3692FF;
-    font-size: 18px;
-    font-weight: 700;
-}
-.search-text > h2 {
-    color: #374151;
-    font-size: 40px;
-    font-weight: 700;
-    line-height: 56px;
-}
-.search-text > h3 {
-    color: #374151;
-    font-size: 24px;
-    font-weight: 500;
-    line-height: 32px;
-}
-/* register */
-section.Register {
-    width: 100%;
-    height: 720px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-}
-section.Register > .Register {
-    width: 988px;
-    height: 444px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: 64px;
-    background-color:#FCFCFC;
-    border-radius: 12px;
-    overflow: hidden;
-}
-.register-text > p {
-    color: #3692FF;
-    font-size: 18px;
-    font-weight: 700;
-}
-.register-text > h2 {
-    color: #374151;
-    font-size: 40px;
-    font-weight: 700;
-    line-height: 56px;
-}
-.register-text > h3 {
-    color: #374151;
-    font-size: 24px;
-    font-weight: 500;
-    line-height: 32px;
-}
+    .footer-mid {
+        display: flex;
+        flex-direction: row;
+        gap: 30px;
+        color: #E5E7EB;
+        text-decoration: none;
+        cursor: pointer;
+        a:visited {
+            color: #E5E7EB;
+        }
 
-.hot-item-image img, .search-image img, .register-image img {
-    width: 579px;
-    height: 444px;
-    display: block;
+    }
+    
+    .footer-mid > a {
+        text-decoration: none;
+        color: blue;
+    }
+    
+    .footer-right-sns {
+        display: flex;
+        flex-direction: row;
+        list-style-type: none;
+    }
+    
+    .footer-right-sns > li {
+        margin-right: 12px;
+        cursor: pointer;
+    }
+    
+    .footer-right-sns img {
+        width: 20px;
+    }
 }
 
+/* ============================== 반응형 768 부터 tablet 사이즈 ================================= */
+@media (min-width: 768px) {
+    body {
+        font-family: "Pretendard Variable", Pretendard, sans-serif;
+        /* width: 1920px; */
+        /* text-align: center; */
+    }
 
+    container {
+        display: flex;
+        justify-content: center;
+    }
+    
+    /* 버튼 관련 */
+    
+    .button {
+        background-color: #3692FF;
+        color: #F3F4F6;
+        font-weight: 600;
+        cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;   
+        align-items: center;
+        text-decoration: none;
+    }
+    
+    .login-button {
+        width: 128px;
+        height: 48px;
+        font-size: 16px;
+        border-radius: 8px;
+    }
+    
+    .find-items-button {
+        width: 357px;
+        height: 56px;
+        font-size: 18px;
+        border-radius: 40px;
+    }
+    
+    /* header */
+    
+    header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 1120px;
+        height: 51px;
+        margin: 9.5px 24px;
+    }
+    
+    .header-wrapper {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        position: fixed;
+        width: 100%;
+        background-color: white;
+    }
+    
+    .logo {
+        display: flex;
+        flex-direction: row;
+        justify-content: left;
+        align-items: center;
+        gap: 8.6px;
+    }
+    
+    .logo-image img {
+        width: 40px;
+        height: 40px;
+        display: block;
+    }
+    
+    .logo-text img {
+        width: 103px;
+        height: auto;
+    }
+    
+    /* main */
+    
+    .main-wrapper {
+        padding-top: 70px;
+    }
 
-/* bottom-banner */
-section.bottom-banner {
-    width: 100%;
-    height: 540px;
-    background-color: #CFE5FF;
-    display: flex;
-    justify-content: center;
-}
-
-section.bottom-banner > .bottom-banner {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 69px;
-    margin-top: 143px;
-}
+    
+    /* top-banner */
+    
+    section.top-banner {
+        width: 100%;
+        height: 771px;
+        background-color: #CFE5FF;
+        display: flex;
+        justify-content: center;
+    }
+    
+    section.top-banner > .top-banner {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 84px;
+    }
+    
+    .top-banner-text {
+        display: flex;
+        flex-direction: column;
+        gap: 32px;
+        color: #374151;
+        font-size: 40px;
+        font-weight: 700;
+        line-height: 56px;
+        align-items: center;
+    }
 
-.bottom-banner-text {
-    width: 296px;
-    height: 172px;
-    color: #374151;
-    font-size: 40px;
-    font-weight: 700;
-    line-height: 56px;
-}
+    .top-banner-text span {
+        display: inline;
+    }
+    
+    .top-banner-image img {
+        width: 746px;
+        height: 340px;
+        display: block
+    }
+    
+    /* hot-item */
+    
+    section.hot-item {
+        width: 100%;
+        height: 720px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        margin-top: 24px;
+        margin-bottom: 52px;
+    }
+    section.hot-item > .hot-item {
+        width: 696px;
+        height: 708px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: left;
+        gap: 24px;
+        background-color: #FCFCFC;
+        border-radius: 12px;
+        overflow: hidden;
+    }
 
-.bottom-banner-image img {
-    width: 746px;
-    height: 397px;
-    display: block;
+    .hot-item-text > p {
+        color: #3692FF;
+        font-size: 18px;
+        font-weight: 700;
+    }
+    .hot-item-text > h2 {
+        color: #374151;
+        font-size: 32px;
+        font-weight: 700;
+        line-height: 42px;
+        margin: 16px auto 24px;
+    }
+    .hot-item-text > h3 {
+        color: #374151;
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 26px;
+    }
+    
+    /* search */
+    
+    section.Search {
+        width: 100%;
+        height: 720px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 52px;
+    }
+    section.Search > .Search {
+        width: 696px;
+        height: 708px;
+        display: flex;
+        flex-direction: column-reverse;
+        justify-content: center;
+        align-items: end;
+        gap: 24px;
+        background-color: #FCFCFC;
+        border-radius: 12px;
+        overflow: hidden;
+    }
+    .search-text > p {
+        color: #3692FF;
+        font-size: 18px;
+        font-weight: 700;
+        text-align: right;
+    }
+    .search-text > h2 {
+        color: #374151;
+        font-size: 32px;
+        font-weight: 700;
+        line-height: 42px;
+        text-align: right;
+        margin: 16px auto 24px;
+    }
+    .search-text > h3 {
+        color: #374151;
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 26px;
+        text-align: right;
+    }
+    
+    /* register */
+    
+    section.Register {
+        width: 100%;
+        height: 720px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 56px;
+    }
+    section.Register > .Register {
+        width: 696px;
+        height: 708px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: left;
+        gap: 24px;
+        background-color: #FCFCFC;
+        border-radius: 12px;
+        overflow: hidden;
+    }
+    .register-text > p {
+        color: #3692FF;
+        font-size: 18px;
+        font-weight: 700;
+    }
+    .register-text > h2 {
+        color: #374151;
+        font-size: 32px;
+        font-weight: 700;
+        line-height: 42px;
+        margin: 16px auto 24px;
+    }
+    .register-text > h3 {
+        color: #374151;
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 26px;
+    }
+    
+    .hot-item-image img, .search-image img, .register-image img {
+        width: 696px;
+        height: 524px;
+        display: block;
+    }
+    
+    /* bottom-banner */
+    
+    section.bottom-banner {
+        width: 100%;
+        height: 927px;
+        background-color: #CFE5FF;
+        display: flex;
+        justify-content: center;
+    }
+    
+    section.bottom-banner > .bottom-banner {
+        padding-top: 201px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 217px;        
+    }
+    
+    .bottom-banner-text {
+        width: 296px;
+        height: 172px;
+        color: #374151;
+        font-size: 40px;
+        font-weight: 700;
+        line-height: 56px;
+        text-align: center;
+        }
+    
+    .bottom-banner-image img {
+        width: 746px;
+        height: 397px;
+        display: block;
+    }
+    
+    /* footer */
+    
+    .footer-wrapper {
+        background-color: #111827;
+        width: 100%;
+        height: 160px;
+        font-size: 16px;
+        font-weight: 400;
+        padding-top: 32px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+    }
+    
+    .footer-box {
+        width: 100%;
+        height: 20px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+    
+    .footer-left {
+        color: #9CA3AF;
+        width: 112px;
+    }
+    
+    .footer-mid {
+        display: flex;
+        flex-direction: row;
+        width: 181px;
+        gap: 30px;
+        color: #E5E7EB;
+        text-decoration: none;
+        cursor: pointer;
+        a:visited {
+            color: #E5E7EB;
+        }
+    }
+    
+    .footer-mid > a {
+        text-decoration: none;
+        color: blue;
+    }
+    
+    .footer-right-sns {
+        display: flex;
+        flex-direction: row;
+        list-style-type: none;
+    }
+    
+    .footer-right-sns > li {
+        margin-right: 12px;
+        cursor: pointer;
+    }
+    
+    .footer-right-sns img {
+        width: 20px;
+    }
 }
 
-/* footer */
+/* ============================== 반응형 1200 부터 pc 사이즈 ================================= */
+@media (min-width: 1200px) {
+    body {
+        font-family: "Pretendard Variable", Pretendard, sans-serif;
+        /* width: 1920px; */
+        /* text-align: center; */
+    }
 
-.footer-wrapper {
-    background-color: #111827;
-    width: 100%;
-    height: 160px;
-    font-size: 16px;
-    font-weight: 400;
-    padding-top: 32px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-}
+    container {
+        display: flex;
+        justify-content: center;
+    }
+    
+    /* 버튼 관련 */
+    
+    .button {
+        background-color: #3692FF;
+        color: #F3F4F6;
+        font-weight: 600;
+        cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;   
+        align-items: center;
+        text-decoration: none;
+    }
+    
+    .login-button {
+        width: 128px;
+        height: 48px;
+        font-size: 16px;
+        border-radius: 8px;
+    }
+    
+    .find-items-button {
+        width: 357px;
+        height: 56px;
+        font-size: 20px;
+        border-radius: 40px;
+    }
+    
+    /* header */
+    
+    header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100%;
+        height: 51px;
+        margin: 9.5px 200px;
+    }
+    
+    .header-wrapper {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        position: fixed;
+        width: 100%;
+        background-color: white;
+    }
+    
+    .logo {
+        display: flex;
+        flex-direction: row;
+        justify-content: left;
+        align-items: center;
+        gap: 8.6px;
+    }
+    
+    .logo-image img {
+        width: 40px;
+        height: 40px;
+    }
+    
+    .logo-text img {
+        width: 103px;
+        height: auto;
+    }
+    
+    /* main */
+    
+    .main-wrapper {
+        padding-top: 70px;
+    }
+    
+    /* top-banner */
+    
+    section.top-banner {
+        width: 100%;
+        height: 540px;
+        background-color: #CFE5FF;
+        display: flex;
+        justify-content: center;
+    }
+    
+    section.top-banner > .top-banner {
+        display: flex;
+        flex-direction: row;
+        margin-top: 200px;
+    }
+    
+    .top-banner-text {
+        display: flex;
+        flex-direction: column;
+        gap: 32px;
+        color: #374151;
+        font-size: 40px;
+        font-weight: 700;
+        line-height: 56px;
+    }
 
-.footer-box {
-    width: 1120px;
-    height: 20px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-}
+    .top-banner-text span {
+        display: block;
+    }
+    
+    .top-banner-image img {
+        width: 746px;
+        height: 340px;
+    }
+    
+    /* hot-item */
+    
+    section.hot-item {
+        width: 100%;
+        height: 720px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+    }
+    section.hot-item > .hot-item {
+        width: 988px;
+        height: 444px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 64px;
+        background-color: #FCFCFC;
+        border-radius: 12px;
+        overflow: hidden;
+    }
+    .hot-item-text > p {
+        color: #3692FF;
+        font-size: 18px;
+        font-weight: 700;
+    }
+    .hot-item-text > h2 {
+        color: #374151;
+        font-size: 40px;
+        font-weight: 700;
+        line-height: 56px;
+    }
+    .hot-item-text > h3 {
+        color: #374151;
+        font-size: 24px;
+        font-weight: 500;
+        line-height: 32px;
+    }
 
-.footer-left {
-    color: #9CA3AF;
-}
+    .hot-item-text span {
+        display: block;
+    }
+    
+    /* search */
+    
+    section.Search {
+        width: 100%;
+        height: 720px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+    }
+    section.Search > .Search {
+        width: 988px;
+        height: 444px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 64px;
+        background-color:#FCFCFC;
+        border-radius: 12px;
+        overflow: hidden;
+    }
+    .search-text > p {
+        color: #3692FF;
+        font-size: 18px;
+        font-weight: 700;
+    }
+    .search-text > h2 {
+        color: #374151;
+        font-size: 40px;
+        font-weight: 700;
+        line-height: 56px;
+    }
+    .search-text > h3 {
+        color: #374151;
+        font-size: 24px;
+        font-weight: 500;
+        line-height: 32px;
+    }
+    
+    /* register */
+    
+    section.Register {
+        width: 100%;
+        height: 720px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+    }
+    section.Register > .Register {
+        width: 988px;
+        height: 444px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 64px;
+        background-color:#FCFCFC;
+        border-radius: 12px;
+        overflow: hidden;
+    }
+    .register-text > p {
+        color: #3692FF;
+        font-size: 18px;
+        font-weight: 700;
+    }
+    .register-text > h2 {
+        color: #374151;
+        font-size: 40px;
+        font-weight: 700;
+        line-height: 56px;
+    }
+    .register-text > h3 {
+        color: #374151;
+        font-size: 24px;
+        font-weight: 500;
+        line-height: 32px;
+    }
+    
+    .register-text span {
+        display: block;
+    }
 
-.footer-mid {
-    display: flex;
-    flex-direction: row;
-    gap: 30px;
-    color: #E5E7EB;
-    text-decoration: none;
-    cursor: pointer;
-    a:visited {
+    .hot-item-image img, .search-image img, .register-image img {
+        width: 579px;
+        height: 444px;
+        display: block;
+    }
+    
+    /* bottom-banner */
+    
+    section.bottom-banner {
+        width: 100%;
+        height: 540px;
+        background-color: #CFE5FF;
+        display: flex;
+        justify-content: center;
+    }
+    
+    section.bottom-banner > .bottom-banner {
+        display: flex;
+        flex-direction: row;
+        align-items: end;
+        gap: 69px;
+    }
+    
+    .bottom-banner-text {
+        width: 296px;
+        height: 172px;
+        color: #374151;
+        font-size: 40px;
+        font-weight: 700;
+        line-height: 56px;
+        margin-bottom: 112px;
+    }
+    
+    .bottom-banner-image img {
+        width: 746px;
+        height: 397px;
+        display: block;
+    }
+    
+    /* footer */
+    
+    .footer-wrapper {
+        background-color: #111827;
+        width: 100%;
+        height: 160px;
+        font-size: 16px;
+        font-weight: 400;
+        padding-top: 32px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+    }
+    
+    .footer-box {
+        width: 1120px;
+        height: 20px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+    
+    .footer-left {
+        color: #9CA3AF;
+    }
+    
+    .footer-mid {
+        display: flex;
+        flex-direction: row;
+        gap: 30px;
         color: #E5E7EB;
+        text-decoration: none;
+        cursor: pointer;
+        a:visited {
+            color: #E5E7EB;
+        }
+    }
+    
+    .footer-mid > a {
+        text-decoration: none;
+        color: blue;
+    }
+    
+    .footer-right-sns {
+        display: flex;
+        flex-direction: row;
+        list-style-type: none;
+    }
+    
+    .footer-right-sns > li {
+        margin-right: 12px;
+        cursor: pointer;
+    }
+    
+    .footer-right-sns img {
+        width: 20px;
     }
-}
-
-.footer-mid > a {
-    text-decoration: none;
-}
-
-.footer-right-sns {
-    display: flex;
-    flex-direction: row;
-    list-style-type: none;
-}
-
-.footer-right-sns > li {
-    margin-right: 12px;
-    cursor: pointer;
-}
-
-.footer-right-sns img {
-    width: 20px;
 }
\ No newline at end of file