diff --git a/index.html b/index.html
index fc1aee53..23ede0f6 100644
--- a/index.html
+++ b/index.html
@@ -24,8 +24,9 @@ <h1>일상의 모든 물건을<br>
     <div class="contents0">
        <img src="./image/Img_home_top.png">
     </div>
-  </div> 
 </div>
+</div>
+ 
      <!-- main 컨테이너 -->
  <div class="container1">
   <div class="contents">
@@ -34,16 +35,17 @@ <h1>일상의 모든 물건을<br>
   <div class="text-box">
     <p class="hot-item">Hot_item</p>
     <h1>
-      인기 상품을<br>
-       확인해 보세요
+      인기 상품을
+      확인해 보세요
     </h1>
     <p class="description">가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요</p>
   </div>
  </div>
     <!-- main 컨테이너 -->
-<div class="container1">
+<div class="container2">
      <div class="text-box2">
-        <h1>구매를 원하는<br> 상품을 검색하세요</h1>
+        <a class="Search">Search</a>
+        <h1>구매를 원하는 상품을 검색하세요</h1>
         <p class="description">구매하고 싶은 물품은 검색해서 쉽게 찾아보세요</p>
     </div>
     <div class="contents">
@@ -51,18 +53,18 @@ <h1>구매를 원하는<br> 상품을 검색하세요</h1>
      </div>   
 </div>
     <!-- main 컨테이너 -->
-<div class="container1">
+<div class="container3">
     <div class="contents">
         <img src="./image/Img_home_03.png">
     </div>
     <div class="text-box3">
-        <p class="register">Register</p>
+        <a class="register">Register</a>
         <h1>판매를 원하는<br>상품을 등록하세요</h1>
         <p class="description">어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요</p>
     </div>
 </div>
 
- <div class="container2">
+ <div class="container4">
       <!-- 텍스트와 사진  -->
   <div class="inner_box">
   <div text-box4>
diff --git a/sign-in.html b/sign-in.html
index bfd6ac54..6bd02c4d 100644
--- a/sign-in.html
+++ b/sign-in.html
@@ -24,13 +24,18 @@ <h1>판다마켓</h1>
           <form>
           <div class="group">
             <label for="email">이메일</label>
-            <input type="email" id="email" name="email">
+            <input type="email" id="email" name="email" placeholder="이메일을 입력해주세요."
+            class="error-input">
+            <p id="emailErr" class="errMsg">잘못된 이메일 형식입니다</p>
+            
           </div>
           <div class="group">
             <label for="password">비밀번호</label>
             <div class="password-input">
-              <input type="password" id="password" name="password">
+              <input type="password" id="password" name="password" placeholder="비밀번호를 입력해주세요.">
+        
               <img src="./image/invisible_icon.png" class="password-icon" alt="비밀번호 보기">
+              <p id="passwordErr" class="errMsg">비밀번호를 8자 이상 입력해주세요.</p>
              </div>
           </div>
             <button type="submit">로그인</button>
@@ -51,12 +56,12 @@ <h1>간편 로그인하기</h1>
           
           </div>
           <div class="footer">
-             <h1>판다마켓이 처음이신가요?</h1>
+             <p>판다마켓이 처음이신가요?</p>
              <a href="./signup.html">회원가입</a>
           </div>
           
         
     </div>
-   
+    <script src="./sign-in.js"></script>
   </body>
 </html>
diff --git a/sign-in.js b/sign-in.js
new file mode 100644
index 00000000..9b5b42d6
--- /dev/null
+++ b/sign-in.js
@@ -0,0 +1,85 @@
+/* login, signup 공통 */
+
+// 이메일 유효성 검사 함수
+function emailValidation(email) {
+  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  return emailRegex.test(email);
+}
+
+// 요소 가져오기
+const emailInput = document.getElementById("email");
+const passwordInput = document.getElementById("password");
+const emailErr = document.getElementById("emailErr");
+const passwordErr = document.getElementById("passwordErr");
+const passwordVisibility = document.getElementById("passwordVisibility");
+
+// 초기 오류 메시지 숨김
+emailErr.textContent = "";
+passwordErr.textContent = "";
+
+// 이메일 검증 
+function validateEmail() {
+  const emailValue = emailInput.value.trim();
+  if (emailValue === "") {
+      emailErr.textContent = "이메일을 입력해주세요.";
+      emailInput.classList.add("error-input");
+      emailInput.classList.remove("correct-input");
+  } else if (!emailValidation(emailValue)) {
+      emailErr.textContent = "잘못된 이메일 형식입니다.";
+      emailInput.classList.add("error-input");
+      emailInput.classList.remove("correct-input");
+  } else {
+      emailErr.textContent = "";
+      emailInput.classList.remove("error-input");
+      emailInput.classList.add("correct-input");
+  }
+  toggleButton();
+}
+
+// 비밀번호 검증
+function validatePassword() {
+  const passwordValue = passwordInput.value.trim();
+  if (passwordValue === "") {
+      passwordErr.textContent = "비밀번호를 입력해주세요.";
+      passwordInput.classList.add("error-input");
+      passwordInput.classList.remove("correct-input");
+  } else if (passwordValue.length < 8) {
+      passwordErr.textContent = "비밀번호를 8자 이상 입력해주세요.";
+      passwordInput.classList.add("error-input");
+      passwordInput.classList.remove("correct-input");
+  } else {
+      passwordErr.textContent = "";
+      passwordInput.classList.remove("error-input");
+      passwordInput.classList.add("correct-input");
+  }
+  toggleButton();
+}
+
+// 비밀번호 보이기/숨기기 기능
+function togglePasswordVisibility(input, button) {
+  if (input.type === "password") {
+      input.type = "text";
+      button.innerHTML = '<img src="/images/eye-icon.png" class="eye-icon" alt="eye-off">';
+  } else {
+      input.type = "password";
+      button.innerHTML = '<img src="/images/invisible-eye-icon.png" class="eye-icon" alt="eye-on">';
+  }
+}
+
+// 이벤트 리스너 추가
+emailInput.addEventListener("focusout", validateEmail);
+passwordInput.addEventListener("focusout", validatePassword);
+passwordVisibility.addEventListener("click", () => togglePasswordVisibility(passwordInput, passwordVisibility));
+
+// 엔터 키 입력 시 검증 함수 실행
+emailInput.addEventListener("keydown", function(event) {
+  if (event.key === "Enter") {
+    validateEmail();
+  }
+});
+
+passwordInput.addEventListener("keydown", function(event) {
+  if (event.key === "Enter") {
+    validatePassword();
+  }
+});
\ No newline at end of file
diff --git a/sign-up.js b/sign-up.js
new file mode 100644
index 00000000..bf5be7b9
--- /dev/null
+++ b/sign-up.js
@@ -0,0 +1,133 @@
+/* login, signup 공통 */
+
+// 이메일 유효성 검사 함수
+function emailValidation(email) {
+    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    return emailRegex.test(email);
+}
+
+// 요소 가져오기
+const emailInput = document.getElementById("email");
+const passwordInput = document.getElementById("password");
+const passwordRepeatInput = document.getElementById("password-repeat");
+const emailErr = document.getElementById("emailErr");
+const passwordErr = document.getElementById("passwordErr");
+const passwordCheckErr = document.getElementById("passwordCheckErr");
+const passwordVisibility = document.getElementById("passwordVisibility");
+
+let isPasswordCheckTouched = false; // 비밀번호 확인 입력 여부 추적
+
+// 초기 오류 메시지 숨김
+emailErr.style.display = "none";
+passwordErr.style.display = "none";
+passwordCheckErr.style.display = "none";
+
+// 이메일 검증
+function validateEmail() {
+    const emailValue = emailInput.value.trim();
+    if (emailValue === "") {
+        emailErr.textContent = "이메일을 입력해주세요.";
+        emailErr.style.display = "block";
+        emailInput.classList.add("error-input");
+        emailInput.classList.remove("correct-input");
+    } else if (!emailValidation(emailValue)) {
+        emailErr.textContent = "잘못된 이메일 형식입니다.";
+        emailErr.style.display = "block";
+        emailInput.classList.add("error-input");
+        emailInput.classList.remove("correct-input");
+    } else {
+        emailErr.style.display = "none";
+        emailInput.classList.remove("error-input");
+        emailInput.classList.add("correct-input");
+    }
+    toggleButton();
+}
+
+// 비밀번호 검증
+function validatePassword() {
+    const passwordValue = passwordInput.value.trim();
+    if (passwordValue === "") {
+        passwordErr.textContent = "비밀번호를 입력해주세요.";
+        passwordErr.style.display = "block";
+        passwordInput.classList.add("error-input");
+        passwordInput.classList.remove("correct-input");
+    } else if (passwordValue.length < 8) {
+        passwordErr.textContent = "비밀번호를 8자 이상 입력해주세요.";
+        passwordErr.style.display = "block";
+        passwordInput.classList.add("error-input");
+        passwordInput.classList.remove("correct-input");
+    } else {
+        passwordErr.style.display = "none";
+        passwordInput.classList.remove("error-input");
+        passwordInput.classList.add("correct-input");
+    }
+    toggleButton();
+}
+
+// 비밀번호 확인 검증
+function validatePasswordCheck() {
+    const passwordValue = passwordInput.value.trim();
+    const passwordCheckValue = passwordRepeatInput.value.trim();
+
+    if (!isPasswordCheckTouched) {
+        passwordCheckErr.style.display = "none"; // 입력 전에는 오류 문구 숨김
+        return;
+    }
+
+    if (passwordCheckValue === "") {
+        passwordCheckErr.style.display = "none"; // 비밀번호 확인 필드가 비었을 때도 오류 메시지 숨김
+    } else if (passwordValue !== passwordCheckValue) {
+        passwordCheckErr.textContent = "비밀번호가 일치하지 않습니다.";
+        passwordCheckErr.style.display = "block";
+        passwordRepeatInput.classList.add("error-input");
+    } else {
+        passwordCheckErr.style.display = "none";
+        passwordRepeatInput.classList.remove("error-input");
+    }
+    toggleButton();
+}
+
+// 비밀번호 보이기/숨기기 기능
+function togglePasswordVisibility(input, button) {
+    if (input.type === "password") {
+        input.type = "text";
+        button.innerHTML = '<img src="/images/eye-icon.png" class="eye-icon" alt="eye-off">';
+    } else {
+        input.type = "password";
+        button.innerHTML = '<img src="/images/invisible-eye-icon.png" class="eye-icon" alt="eye-on">';
+    }
+}
+
+// 회원가입 버튼 활성화
+function toggleButton() {
+    const isFormValid =
+        emailErr.style.display === "none" &&
+        passwordErr.style.display === "none" &&
+        passwordCheckErr.style.display === "none" &&
+        emailInput.value.trim() !== "" &&
+        passwordInput.value.trim() !== "" &&
+        passwordRepeatInput.value.trim() !== "";
+
+    const signupButton = document.querySelector(".signup");
+    if (isFormValid) {
+        signupButton.disabled = false;
+        signupButton.classList.add("active");
+    } else {
+        signupButton.disabled = true;
+        signupButton.classList.remove("active");
+    }
+}
+
+// 이벤트 리스너 추가
+emailInput.addEventListener("focusout", validateEmail);
+passwordInput.addEventListener("focusout", validatePassword);
+passwordRepeatInput.addEventListener("input", () => {
+    isPasswordCheckTouched = true; // 사용자가 입력 시작했음을 추적
+    validatePasswordCheck(); // 입력 시에도 검증 함수 실행
+});
+passwordRepeatInput.addEventListener("keydown", function(event) {
+    if (event.key === "Enter") {
+        validatePasswordCheck();
+    }
+});
+passwordVisibility.addEventListener("click", () => togglePasswordVisibility(passwordInput, passwordVisibility));
\ No newline at end of file
diff --git a/signup.html b/signup.html
index 249e78fe..8d1e2a83 100644
--- a/signup.html
+++ b/signup.html
@@ -24,27 +24,33 @@ <h1>판다마켓</h1>
           <form>
           <div class="group">
             <label for="email">이메일</label>
-            <input type="email" id="email" name="email">
+            <input type="email" id="email" name="email" placeholder="이메일을 입력해주세요."
+            class="error-input">
+            <p id="emailErr" class="errMsg">이메일을 입력해주세요.</p>
           </div>
           <div class="group">
             <label for="username">닉네임</label>
-            <input type="username" id="username" name="username">
+            <input type="username" id="username" name="username" placeholder="닉네임을 입력해주세요.">
+            <p id="nicknameErr" class="errMsg"></p>
           </div>
           <div class="group">
             <label for="password">비밀번호</label>
             <div class="password-input">
-            <input type="password" id="password" name="password">
+            <input type="password" id="password" name="password" placeholder="비밀번호를 입력해주세요.">
             <img src="./image/invisible_icon.png" class="password-icon" alt="비밀번호 보기">
+            <p id="passwordErr" class="errMsg">비밀번호를 8자 이상 입력해주세요.</p>
            </div>
           </div>
            <div class="group">
             <label for="password-repeat">비밀번호 확인</label>
              <div class="password-input">
-              <input id="password-repeat" name="password-repeat">
-             <img src="./image/eye_icon.png" class="password-icon" alt="비밀번호 보기">
+              <input id="password-repeat" name="password-repeat" placeholder="비밀번호를 다시 한 번 입력해주세요."
+              class="error-input">
+             <img src="./image/eye_icon.png" class="password-icon1" alt="비밀번호 보기">
+             <p id="passwordCheckErr" class="errMsg">비밀번호가 일치하지 않습니다.</p>
              </div>
           </div>
-            <button type="submit">로그인</button>
+            <button type="submit">회원가입</button>
           </form>
         </div>
           <div class="bottom">
@@ -61,12 +67,12 @@ <h1>간편 로그인하기</h1>
         </div>
           </div>
           <div class="footer">
-             <h1>판다마켓이 처음이신가요?</h1>
+             <p>이미 회원이신가요?</p>
              <a href="./sign-in.html">로그인</a>
           </div>
           
         
     </div>
-   
+    <script src='./sign-up.js'></script>
   </body>
 </html>
diff --git a/style/sign-in.css b/style/sign-in.css
index 86486798..9f7dae57 100644
--- a/style/sign-in.css
+++ b/style/sign-in.css
@@ -1,202 +1,286 @@
 
-.login-container {
-    position: absolute; 
-    width: 640px;
-    height: 618px;
-    top: 231px;
-    left: 640px;
-    gap: 40px;
-    
-    
-    
+    html {
+      font-size: 16px;
+      box-sizing: border-box;
   }
-  .title{
-    display: flex;
-    width: 396px;
-    height: 132px;
-    align-items: center;
-    justify-content: center; 
-    margin: 0 122px;
-    gap:10px;
-    margin-bottom: 40px;
-   
-    
-   
+  
+  .login-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      max-width: 40rem;
+      width:40rem;
+     margin: 14.4375rem auto;
+      height: 38.625rem;
+     /* gap:2.5rem; */
   }
-  .title img{
-    width: 103.53px;
-    height: 103.88px;
-    top: 12.98px; 
-   
-  }
-  .title h1{
-    width:266px;
-    height: 90px;
-    top:23.98px;
-    left: 125.77px;
-    font-family: ROKAF Sans;
-    font-weight: 700;
-    font-size: 66.34px;
-    line-height: 89.56px;
-    letter-spacing: 0%;
-    color:#3692FF;
- 
+  
+  
+  .title {
+      display: flex;
+      width: 24.75rem;
+      height: 8.25rem;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      margin-bottom: 1.5rem;
+      
+      
+      
   }
-  .input-form{
-    width: 640px;
-    height: 300px;
-    gap: 24px;
-    margin-top:40px;
+  
+  .title img {
+      width: 6.47rem;
+      height: 6.49rem;
+     
   }
-  .group{
-    width: 100%;
-    height: 98px;
-    margin-bottom: 16px;
-    
+  
+  .title h1 {
+      width: 16.625rem;
+      height: 6rem;
+      left: 7.86rem;
+      font-family: ROKAF Sans;
+      font-weight: 700;
+      font-size: 4.15rem;
+      line-height: 5.6rem;
+      letter-spacing: 0%;
+      color: #3692FF;
+     
   }
-  .group label{
-    width: 47px;
-    height: 26px;
-    font-family: Pretendard;
-    font-weight: 700;
-    font-size: 18px;
-    line-height: 26px;
-    letter-spacing: 0%;
-
+  
+  .input-form {
+      width: 40rem;
+      height: 18.75rem;
+      gap: 1.5rem;
+      margin-top: 2.5rem;
   }
- 
-  .group input{
-    display: block;
-    width: 632.68px;
-    height: 51.67px;
-    gap: 10px;
-    border-radius: 12px;
-    background-color: #F3F4F6;
-    border: 2px;
-    margin-top: 16px;
-    
+  
+  .group {
+      width: 100%;
+      height: 6.125rem;
+      margin-bottom: 3em;
+  }
+  
+  .group label {
+      width: 2.9375rem;
+      height: 1.625rem;
+      font-family: Pretendard;
+      font-weight: 700;
+      font-size: 1.125rem;
+      line-height: 1.625rem;
+      letter-spacing: 0%;
+  }
+  
+  .group input {
+      display: block;
+      width: 100%;
+      height: 3.5rem;
+      gap: 0.625rem;
+      border-radius: 0.75rem;
+      background-color: #F3F4F6;
+      border: 2px;
+      margin-top: 1rem;
+      text-indent: 1.5rem;
+      font-family: Pretendard;
+      font-weight: 400;
+      font-size: 1rem;
+      line-height: 1.625rem;
+      letter-spacing: 0%;
   }
+  
   .password-input {
-    position: relative; 
-    
+      position: relative;
   }
   
   .password-input input {
-    margin-right: 30px; 
-    
+      margin-right: 1.875rem;
+  }
+  .errMsg {
+    display: block;
+    color: red;
+    font-size: 1rem;
+    font-weight: 600;
   }
-  
   .password-icon {
-    position: absolute; 
-    top: 50%;
-    right: 10px;
-    transform: translateY(-50%); 
-    width: 24px; 
-    cursor: pointer;
-    
+      position: absolute;
+      top: 50%;
+      right: 0.625rem;
+      transform: translateY(-50%);
+      width: 1.5rem;
+      cursor: pointer;
   }
-  button{
-    width: 640px;
-    height: 56px;
-    gap: 10px;
-    border-radius: 40px;
-    padding:16px 124px;
+  
+  button {
+    width: 40rem;
+    height: 3.5rem;
+    gap: 0.625rem;
+    border-radius: 2.5rem;
+    padding: 1rem 7.75rem;
     background-color: #3692FF;
     color: #F3F4F6;
-    border:none;
-    margin-top: 16px;
+    border: none;
+    margin-top: 1rem;
+  }
+  
+  .bottom {
+    width: 37.25rem;
+    height: 3rem;
+    gap: 0.625rem;
+    border-radius: 0.5rem;
+    padding: 1rem 1.4375rem;
+    display: flex;
+    align-items: center;
+    background-color: #E6F2FF;
     
+}
+  
+  .input-bottom {
+      width: 37.125rem;
+      height: 2.625rem;
+      display: flex;
+      justify-content: space-between;
   }
+  
+  .bottom h1 {
+      width: 6.3125rem;
+      height: 1.625rem;
+      font-family: Pretendard;
+      font-weight: 500;
+      font-size: 1rem;
+      line-height: 1.625rem;
+      letter-spacing: 0%;
+  }
+  
+  .social {
+      align-items: center;
+      width: 6.25rem;
+      height: 2.625rem;
+      justify-content: space-between;
+      justify-content: center;
+      display: flex;
+      gap: 1rem;
+  }
+  
+  .social img {
+      width: 2.625rem;
+      height: 2.625rem;
+  }
+  
+  .footer {
+      display: flex;
+      align-items: center;
+      width: 12.3125rem;
+      height: 1.5rem;
+      gap: 0.25rem;
+      justify-content: center;
+      margin-top: 24px;
+      
+  }
+  
+  .footer p {
+      font-family: Pretendard;
+      font-weight: 500;
+      font-size: 0.875rem;
+      line-height: 1.5rem;
+      letter-spacing: 0%;
+      color: #1F2937;
+  }
+  
+  .footer a {
+      color: #3692FF;
+      font-family: Pretendard;
+      font-weight: 500;
+      font-size: 0.875rem;
+      line-height: 1.044375rem;
+      letter-spacing: 0%;
+      text-decoration: underline;
+      text-decoration-style: solid;
+      text-decoration-thickness: auto;
  
+    }
+       /* PC (1200px 이상) */
+@media screen and (min-width: 1200px) {
+  .login-container {
+    max-width: 30rem; 
+    width: 90%;
+  }
   .bottom{
-   width: 595px;
-   height: 48px;
-   gap: 10px;
-   border-radius: 8px;
-   padding:16px 23px;
-   display: flex;
-   align-items: center;
-   background-color: #E6F2FF;
-   margin-top:32px;
-   
- 
+    margin-top: 1.5rem;
   }
-  .input-bottom{
-   width: 594px;
-   height: 42px;
-   align-items: center;
-   display: flex;
-   justify-content: space-between;
-  }
-  .bottom h1{
-    width: 101px;
-    height: 26px;
-    font-family: Pretendard;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 26px;
-    letter-spacing: 0%;
+}
 
+/* 태블릿 (768px ~ 1199px) */
+@media screen and (min-width: 768px) and (max-width: 1199px) {
+  .login-container{
+    top:11.875rem;
+    margin-bottom: 1rem;
+  }
+  button{
+    background-color: #9CA3AF;
+  }
   
-   }
- 
- .social{
-   align-items: center;
-   width: 100px;
-   height: 42px;
-   justify-content: space-between;
-   justify-content: center;
-   display: flex;
-   gap:16px;
- }
- .social img{
-   width: 42px;
-   height: 42px;
+  .bottom{
+  margin-top: 1.5rem;
  }
- 
-   
-  .bottom h1{
-   width: 101px;
-   height: 26px;
-   font-family: Pretendard;
-   font-weight: 500px;
-   font-size: 16px;
-   line-height: 26px;
-   letter-spacing: 0%;
- 
+}
+
+/* 모바일 (375px ~ 767px) */
+@media screen and (min-width: 375px) and (max-width:767px) {
+  .login-container {
+      max-width: 90%; 
+      margin-top: 5rem;
   }
-  .footer{
-   display: flex;
-   align-items: center;
-   width: 197px;
-   height: 24px;
-   gap:4px;
-   margin-left:221.5px;
-   margin-top: 24px;
-   border-radius: 8px;
-  
-  }
-  .footer h1{
-   font-family: Pretendard;
-   font-weight: 500;
-   font-size: 14px;
-   line-height: 24px;
-   letter-spacing: 0%;
-   color:#1F2937
- 
+  .title {
+    width: 12.375rem;
+    height: 4.125rem;
+    margin: 0 auto; 
+}
+
+  .title h1 {
+      font-size: 2.0731rem; 
+      font-family: ROKAF Sans;
+      font-weight: 700;
+      letter-spacing: 0%;
+      vertical-align: middle;
+
   }
-  .footer a {
-   color: #3692FF;
-   font-family: Pretendard;
-   font-weight: 500px;
-   font-size: 14px;
-   line-height: 16.71px;
-   letter-spacing: 0%;
-   text-decoration: underline;
-   text-decoration-style: solid;
-   text-decoration-thickness: Auto;
- 
+  .title img{
+    width:3.235rem;
+    height: 3.2462rem;
+  }
+
+  .input-form {
+      width: 100%;
+      
+      
   }
 
-   
-   
\ No newline at end of file
+  .group input {
+      font-size: 0.9rem;
+      min-height: 3.5rem;
+  }
+  .group label{
+    font-size: 0.875rem;
+  }
+
+  button {
+      max-width:21rem ;
+      height: 3rem;
+      background-color: #9CA3AF;
+      
+  }
+
+  .bottom {
+      width: 100%;
+      font-size: 0.875rem;
+      min-height: 2.6875rem;
+      max-width: 18.125rem;
+      margin-top: 24px;
+      
+  }
+
+  .social img {
+      width: 2.625rem;
+      height: 2.625rem;
+  }
+}
\ No newline at end of file
diff --git a/style/signup.css b/style/signup.css
index f100e24e..2fba29c2 100644
--- a/style/signup.css
+++ b/style/signup.css
@@ -1,189 +1,286 @@
 
-.login-container {
-    position: absolute;
-    width: 640px;
-    height: 857px;
-    top: 60px;
-    left: 640px;
-    gap: 40px;
-    justify-content: center;
+    html {
+      font-size: 16px;
+      box-sizing: border-box;
+      
+    }
     
-  }
-  .title{
-    display: flex;
-    width: 396px;
-    height: 132px;
-    align-items: center;
-    justify-content: center; 
-    margin: 0 122px;
-    gap:10px;
-    margin-bottom: 40px;
-   
-    
-   
-  }
-  .title img{
-    width: 103.53px;
-    height: 103.88px;
-    top: 12.98px; 
-   
-  }
-  .title h1{
-    font-family: ROKAF Sans;
-    font-size: 66.34px;
-    line-height: 89.56px;
-    letter-spacing: 0%;
-    color:#3692FF;
-    
- 
-  }
-  .input-form{
-    width: 640px;
-    height: 300px;
-    gap: 24px;
-    margin-top:40px;
-  }
+    .login-container {
+      max-width: 40rem;
+      width: 90%;
+      margin: 1rem auto;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      /* left: 50%; */ 
+      top:3.75rem;
+     
+    }
+    
+    
+    .title {
+      display: flex;
+      width: 24.75rem;
+      height: 8.25rem;
+      align-items: center;
+      justify-content: center;
+      /* margin: 0 7.625rem; */
+      gap: 0.625rem;
+      margin-bottom: 1.5rem;
+      
+      
+    }
+    
+    .title img {
+      width: 6.47rem;
+      height: 6.49rem;
+    }
+    
+    .title h1 {
+      font-family: ROKAF Sans;
+      font-weight: 700;
+      font-size: 4.15rem;
+      line-height: 100%;
+      letter-spacing: 0%;
+      vertical-align: middle;
+      color: #3692FF;
+    }
+    
+    .input-form {
+      width: 100%;
+      height: 18.75rem;
+      gap: 1.5rem;
+      
+    }
+    
+    .group {
+      width: 100%;
+      height: 6.125rem;
+      gap: 10rem;
+      margin-bottom: 4em;
+    }
+    
+    .group input {
+      display: block;
+      width: 100%;
+      height: 3.5rem;
+      gap: 0.625rem;
+      border-radius: 0.75rem;
+      background-color: #F3F4F6;
+      border: 2px;
+      margin-top: 1rem;
+      font-family: Pretendard;
+      font-weight: 400;
+      font-size: 1rem;
+      line-height: 1.625rem;
+      letter-spacing: 0%;
+      color: #9CA3AF;
+      text-indent: 1.5rem;
+      
+    }
+    
+    .group label {
+      width: 2.9375rem;
+      height: 1.625rem;
+      font-family: Pretendard;
+      font-weight: 700;
+      font-size: 1.125rem;
+      line-height: 1.625rem;
+      letter-spacing: 0%;
+    }
+     .errMsg{
+      display: none;
+      display: block;
+      color: red;
+      font-size: 1rem;
+      font-weight: 600;
 
-  .group{
-    width: 100%;
-    height: 98px;
-    gap: 160px;
-    margin-bottom: 16px;
+    }
+     
+    .password-input {
+      position: relative;
+    }
     
-  }
- 
-  .group input{
-    display: block;
-    width: 632.68px;
-    height: 51.67px;
-    gap: 10px;
-    border-radius: 12px;
-    background-color: #F3F4F6;
-    border: 2px;
-    margin-top: 16px;
+    .password-input input {
+      margin-right: 1.875rem;
+    }
     
+    .password-icon {
+      position: absolute;
+      top: 50%;
+      right: 0.625rem;
+      transform: translateY(-50%);
+      width: 1.5rem;
+      cursor: pointer;
+    }
+  .password-icon1{
+    position: absolute;
+      top: 30%;
+      right: 0.625rem;
+      transform: translateY(-50%);
+      width: 1.5rem;
+      cursor: pointer;
   }
-  .group label{
-    width: 47px;
-    height: 26px;
-    font-family: Pretendard;
-    font-weight: 700;
-    font-size: 18px;
-    line-height: 26px;
-    letter-spacing: 0%;
-
+    button {
+      width: 40rem;
+      height: 3.5rem;
+      gap: 0.625rem;
+      border-radius: 2.5rem;
+      padding: 1rem 7.75rem;
+      background-color: #3692FF;
+      color: #F3F4F6;
+      border: none;
+      margin-top: .5rem;
+    }
+    
+    .bottom {
+      width: 37.25rem;
+      height: 3rem;
+      gap: 0.625rem;
+      border-radius: 0.5rem;
+      padding: 1rem 1.4375rem;
+      display: flex;
+      align-items: center;
+      background-color: #E6F2FF;
+     
+      
   }
-  .password-input {
-    position: relative; 
     
+    .input-bottom {
+      width: 37.125rem;
+      height: 2.625rem;
+      justify-content: space-between;
+      display: flex;
+      
+    }
+    
+    .bottom h1 {
+      width: 6.3125rem;
+      height: 1.625rem;
+      font-family: Pretendard;
+      font-weight: 500;
+      font-size: 1rem;
+      line-height: 1.625rem;
+      letter-spacing: 0%;
+    }
+    
+    .social {
+      display: flex;
+      align-items: center;
+      width: 6.25rem;
+      height: 2.625rem;
+      gap: 1rem;
+      justify-content: space-between;
+    }
+    
+    .social img {
+      width: 2.625rem;
+      height: 2.625rem;
+    }
+    
+    .footer {
+      display: flex;
+      align-items: center;
+      width: 12.3;
+      gap:.25rem
+    }
+    .footer p {
+      font-family: Pretendard;
+      font-weight: 500;
+      font-size: 0.875rem;
+      line-height: 1.5rem;
+      letter-spacing: 0%;
+      color: #1F2937;
   }
   
-  .password-input input {
-    margin-right: 30px; 
-  }
+  .footer a {
+      color: #3692FF;
+      font-family: Pretendard;
+      font-weight: 500;
+      font-size: 0.875rem;
+      line-height: 1.044375rem;
+      letter-spacing: 0%;
+      text-decoration: underline;
+      text-decoration-style: solid;
+      text-decoration-thickness: auto;
   
-  .password-icon {
-    position: absolute; 
-    top: 50%;
-    right: 10px;
-    transform: translateY(-50%); 
-    width: 24px; 
-    cursor: pointer;
-    
+    }
+    /* PC (1200px 이상) */
+@media screen and (min-width: 1200px) {
+  .login-container {
+    max-width: 30rem; 
+    width: 90%;
+  }
+  .bottom{
+    margin-top: 1.5rem;
   }
+}
 
+/* 태블릿 (768px ~ 1199px) */
+@media screen and (min-width: 768px) and (max-width: 1199px) {
+  .title{
+    top:3rem;
+  }
   button{
-    width: 640px;
-    height: 56px;
-    gap: 10px;
-    border-radius: 40px;
-    padding:16px 124px;
-    background-color: #3692FF;
-    color: #F3F4F6;
-    border:none;
-    margin-top:16px;
-    
-  }
- 
+    background-color: #9CA3AF;
+  }
   .bottom{
-   width: 595px;
-   height: 48px;
-   gap: 10px;
-   border-radius: 8px;
-   padding:16px 23px;
-   display: flex;
-   align-items: center;
-   background-color: #E6F2FF;
-   margin-top: 32px;
-   
- 
-  }
-  .input-bottom{
-    width: 594px;
-    height: 42px;
-    justify-content: space-between;
-    display: flex;
-  }
-  .bottom h1{
-    width: 101px;
-    height: 26px;
-    font-family: Pretendard;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 26px;
-    letter-spacing: 0%;
+  margin-top: 1.5rem;
+ }
+}
 
+/* 모바일 (375px ~ 767px) */
+@media screen and (min-width: 375px) and (max-width:767px) {
+  .login-container {
+      width: 12.375rem;
+      height: 4.125rem;
+      max-width: 90%; 
+      top:1.5rem;
+  }
   
-   }
- .social{
-   display: flex;
-   align-items: center;
-   width: 100px;
-   height: 42px;
-   gap:16px;
-   justify-content: space-between;
 
- }
- .social img{
-   width: 42px;
-   height: 42px;
- }
-   
-  
-  .footer{
-   display: flex;
-   align-items: center;
-   width: 197px;
-   height: 24px;
-   gap:4px;
-   margin-left:221.5px;
-   margin-top: 24px;
-   border-radius: 8px;
-  
+  .title h1 {
+      font-size: 2.0731rem; 
   }
-  .footer h1{
-   font-family: Pretendard;
-   font-weight: 500;
-   font-size: 14px;
-   line-height: 24px;
-   letter-spacing: 0%;
-   color:#1F2937
- 
+  .title img{
+    width:3.235rem;
+    height: 3.2462rem;
   }
-  .footer a {
-   color: #3692FF;
-   font-family: Pretendard;
-   font-weight: 500px;
-   font-size: 14px;
-   line-height: 16.71px;
-   letter-spacing: 0%;
-   text-decoration: underline;
-   text-decoration-style: solid;
 
-   text-decoration-thickness: Auto;
- 
+  .input-form {
+      width: 100%;
+      
+      
+  }
+
+  .group input {
+      font-size: 0.9rem;
+      min-height: 3.5rem;
+  }
+  .group label{
+    font-size: 0.875rem;
+  }
+
+  button {
+      max-width:21rem ;
+      height: 3rem;
+      background-color: #9CA3AF;
   }
-  
 
+  .bottom {
+      width: 21.4375rem;
+      height: 4.625rem;
+      font-size: 0.875rem;
+      min-height: 2.6875rem;
+      max-width: 18.125rem;
+      margin-top: 1rem;
+      
+      
+  }
 
-     
\ No newline at end of file
+  .social img {
+      width: 2.625rem;
+      height: 2.625rem;
+      
+  }
+}
diff --git a/style/style.css b/style/style.css
index c31c33cb..96925870 100644
--- a/style/style.css
+++ b/style/style.css
@@ -1,323 +1,785 @@
-  * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    
-  }
-  body{
-    width:1920px;
-    
-  }
-  .title {
-    position: fixed;
-    align-items: center;
-    display:flex;
-    height: 70px;
-    border-bottom: 1px solid #DFDFDF;
-    padding:9px 200px;
-    gap:10px;
-    justify-content: space-between;
-    width:100%;
-    z-index: 120;
-    background-color: #FFFFFF;
-    
-  }
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+ 
+}
+
+
+.title {
+  position: fixed;
+  align-items: center;
+  display: flex;
+  height: 4.375rem;
+  border-bottom: 0.0625rem solid #DFDFDF;
+  padding: 0.5625rem 12.5rem;
+  gap: 0.625rem;
+  justify-content: space-between;
+  width: 100%;
+  z-index: 120;
+  background-color: #FFFFFF;
+}
+
+.logo {
+  width: 9.375rem;
+  height: auto;
+}
+
+.login-button {
+  width: 8rem;
+  padding: 0.625rem 1.25rem;
+  background-color: #3692FF;
+  color: white;
+  border: none;
+  border-radius: 0.3125rem;
+  font-size: 1rem;
+  cursor: pointer;
+  white-space: nowrap;
+  
+}
+
+.container0 {
+  display: flex;
+  width: 100%;
+  height: 33.75rem;
+  top: 4.375rem;
+  justify-content: center;
+  background-color: #CFE5FF;
+  gap:0.625rem;
+  align-items: end;
   
-  .logo {
-    width: 150px;
-    height: auto;
-    margin-left:63px;
-  }
   
-  .login-button {
-    padding: 10px 20px;
-    background-color: #3692FF;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    font-size: 16px;
-    cursor: pointer;
-    margin-left: 20px;
-  }
-    
-.container0{ 
-    position: relative;
-    display:flex;
-    height:540px;
-    top:70px;
-    justify-content: space-around;
-    align-items: end;
-    background-color: #CFE5FF;
-    
 }
 
-  .inner_box0{
-  width:1110px;
-  height: 340px;
+.inner_box0 {
+  height: 21.25rem;
   display: flex;
-  align-items: center;
-  top:200px;
-  left:405px;
-  gap:7px;
+  top: 12.5rem;
+  left: 25.3125rem;
+  gap: 0.4375rem;
   
-  } 
   
-   .inner_box0 a{
-    text-decoration: none;
-   }
   
- .text-box0{
-    display: flex;
-    width:357px;
-    height:260px;
-    padding-bottom: 60px;
-    gap:32px;
- }
- .text-box0 h{
-    width: 295px;
-    height: 112px;
-    font-weight:700;
-    font-size:40px;
-    line-height: 56px;
-    letter-spacing:2%;
+}
 
+.inner_box0 a {
+  text-decoration: none;
 }
- 
-.see{
-    width:357;
-    height:56px;
-    border:1px solid;
-    border-radius: 40px;
-    background-color:#3692FF ;
-    color:#F9FAFB;
-    padding:16px 124px;
-    margin:46px 0;
-    gap:10px;
-    white-space: nowrap;
+
+.text-box0 {
+  /* width: 22.3125rem; */
+  height: 16.25rem;
+  padding-bottom: 3.75rem;
+  gap: 2rem;
 }
+
+.text-box0 h {
+  width: 18.4375rem;
+  height: 7rem;
+  font-weight: 700;
+  font-size: 2.5rem;
+  line-height: 3.5rem;
+  letter-spacing: 2%;
+}
+
+.see {
+  width: 22.3125rem;
+  height: 3.5rem;
+  border: 0.0625rem solid;
+  border-radius: 2.5rem;
+  background-color: #3692FF;
+  color: #F9FAFB;
+  padding: 1rem 7.75rem;
+  margin: 2.875rem 0;
+  gap: 0.625rem;
+  white-space: nowrap;
+}
+
 .see p {
-  width:109px;
-  height: 32px;
+  width: 6.8125rem;
+  height: 2rem;
   font-family: Pretendard;
   font-weight: 600;
-  font-size: 20px;
-  line-height: 32px;
+  font-size: 1.25rem;
+  line-height: 2rem;
   letter-spacing: 0%;
   text-align: center;
   vertical-align: middle;
-
 }
 
-.contents0 img{
-  width: 746px;
-  height: 340px;
+.contents0 img {
+  width: 46.625rem;
+  height: 21.25rem;
 }
 
-.container1{
-    display:flex;
-    width:1920px;
-    height:720px;
-    gap:10px;
-    padding:138px 466px;
-    justify-content: space-around;
-    align-items: center;   
-    background-color: #FCFCFC;
-    
-}
-.contents{
-    width:580px;
-    height:444px;
-    gap:64px;
+.container1 {
+  display: flex;
+  width: 100%;
+  height: 45rem;
+  gap: 4rem;
+  padding: 8.625rem 29.125rem;
+  justify-content: space-around;
+  align-items: center;
+  background-color: #FCFCFC;
+  justify-content: center;
 }
 
-.contents img{
-   width:580px;
-   height:444px;
-   
+.contents {
+  /* width: 36.25rem; */
+  /* height: 27.75rem; */
+  gap: 4rem;
 }
-.text-box{
-    width:298px;
-    height:238px;
-    gap:12px;
-    margin-right:24px;
 
+.contents img {
+  width: 36.25rem;
+  height: 27.75rem;
+}
 
+.text-box {
+  width: 18.625rem;
+  height: 14.875rem;
+  gap: 0.75rem;
+  margin-right: 1.5rem;
 }
-.text-box h1{
-  width:222px;
-  height: 112px;
+
+.text-box h1 {
+  width: 13.875rem;
+  height: 7rem;
   font-family: Pretendard;
   font-weight: 700;
-  font-size: 40px;
+  font-size: 2.5rem;
   line-height: 140%;
   letter-spacing: 2%;
   vertical-align: middle;
-
 }
-.hot-item{
-   font-size: 18px;
-   line-height: 26px;
-   color:#3692FF;
-   font-weight:700; 
-   margin-bottom:-12px;
+.container2{
+  display: flex;
+  width: 100%;
+  height: 45rem;
+  gap: 4rem;
+  padding: 8.625rem 29.125rem;
+  justify-content: space-around;
+  align-items: center;
+  background-color: #FCFCFC;
+  justify-content: center;
+}
+.hot-item {
+  font-size: 1.125rem;
+  line-height: 1.625rem;
+  color: #3692FF;
+  font-weight: 700;
+  margin-bottom: 0.75rem;
 }
 
-.description{
-    font-size:24px;
-    font-weight: 500;
-    line-height: 32px;
-    letter-spacing: 0%;
+.description {
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 2rem;
+  letter-spacing: 0%;
 }
 
+.text-box2 {
+  width: 19.8125rem;
+  height: 16rem;
+  padding-left: 1.5rem;
+  gap: 0.75rem;
+  text-align: right;
+}
 
+.container3{
+  display: flex;
+  width: 100%;
+  height: 45rem;
+  gap: 4rem;
+  padding: 8.625rem 29.125rem;
+  justify-content: space-around;
+  align-items: center;
+  background-color: #FCFCFC;
+  justify-content: center;
+}
+.Search{
+  color:#3692FF;
+  font-family: Pretendard;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 26px;
+  letter-spacing: 0%;
+  vertical-align: middle;
 
-.text-box2{
-    width:317px;
-    height:238px;
-    padding-left: 24px;
-    gap:12px;
-    
 }
-.text-box2 h1{
-  width: 293px;
-  height: 112px;
+
+.text-box2 h1  {
+  width: 18.3125rem;
+  height: 7rem;
   font-family: Pretendard;
   font-weight: 700;
-  font-size: 40px;
+  font-size: 2.5rem;
   line-height: 140%;
   letter-spacing: 2%;
-  text-align: right;
   vertical-align: middle;
-
 }
 
-.text-box3{
-    width:359px;
-    height:238px;
-    padding-right: 24px;
-    gap:12px;
-}
-.register{
-    font-weight: 700;
-    font-size:18px;
-    line-height: 26px;
-    color: #3692FF;
-    margin-bottom: -16px;
-    
+
+.container4 {
+  display: flex;
+  width: 100%;
+  height: 33.125rem;
+  gap: 0.625rem; 
+  padding: 8.625rem 29.125rem;
+  background-color: #CFE5FF;
+  justify-content: center;
+  
 }
 .text-box3 h1{
-  width: 293px;
-  height: 112px;
+  width: 18.3125rem;
+  height: 7rem;
   font-family: Pretendard;
   font-weight: 700;
-  font-size: 40px;
+  font-size: 2.5rem;
   line-height: 140%;
   letter-spacing: 2%;
   vertical-align: middle;
 }
-.container2{ 
-  display: flex;
-  width:1920px;
-  height:530px;
-  gap:10px;
-  padding:138px 466px;  
-  background-color:#CFE5FF;
+.register{
+  color: #3692FF;
+
 }
- 
- .inner_box{
-  display:flex;
-  justify-content: space-around;  
+
+.inner_box {
+  display: flex;
+  justify-content: space-around;
   align-items: center;
-   width:1110px;
-   height:397px;
-   top:14.3px;
-   left:405px;
-   gap:69px;
-   margin-left: -60px;
- } 
-   
-  .text-box4{
-    width:364px;
-    height:397px;
-    padding-bottom:60px;
-    gap:10px;
-   
-    
-    
-  }
-  h2{
-    width:295px;
-    height:112px;
-    font-size:39px;
-    line-height: 56px;
-    letter-spacing: 0%;
-    font-weight: 700;
-    
-  }
+  width: 69.375rem;
+  height: 24.8125rem;
+  top: 0.89375rem;
+  left: 25.3125rem;
+  gap: 4.3125rem;
+  margin-left: -3.75rem;
+}
 
-.content-bottom img{
-    width:746px;
-    height: 393px;
-    margin-right: 80px;
-    
+.text-box4 {
+  width: 22.75rem;
+  height: 24.8125rem;
+  padding-bottom: 3.75rem;
+  gap: 0.625rem;
 }
-.footer{
+
+h2 {
+  width: 18.4375rem;
+  /* height: 7rem; */
+  font-size: 2.4375rem;
+  line-height: 3.5rem;
+  letter-spacing: 0%;
+  font-weight: 700;
+}
+
+.content-bottom img {
+  width: 46.625rem;
+  height: 24.5625rem;
+  margin-right: 5rem;
+}
+
+.footer {
   display: flex;
-  width:1920px;
-  height: 160px;
-  padding:32px 400px;
-  top:3448px;
-  gap:10px;
+  width:100%;
+  height: 10rem;
+  padding: 2rem 25rem;
+  top: 215.5rem;
+  gap: 0.625rem;
   justify-content: space-between;
   background-color: #111827;
-  
+
 }
-.inner_box2{
+
+.inner_box2 {
   display: flex;
-  width: 1120px;
-  height: 20px;
+  width: 70rem;
+  height: 1.25rem;
   justify-content: space-between;
   align-items: center;
- 
-  
+
 }
-.copyright{
+
+.copyright {
   display: flex;
-  width: 112px;
+  width: 7rem;
   font-weight: 400;
-  font-size:16px;
+  font-size: 1rem;
   letter-spacing: 0%;
   color: #9CA3AF;
- 
 }
 
-.links{
-  width: 159px;
-  height: 19px;
-  gap:30px;
+.links {
+  width: 9.9375rem;
+  height: 1.1875rem;
+  gap: 1.875rem;
 }
-.links a{
+
+.links a {
   font-weight: 400;
-  font-size: 16px;
-  line-height: 19.09px;
+  font-size: 1rem;
+  line-height: 1.1931rem;
   letter-spacing: 0%;
   text-align: center;
-  color:#E5E7EB;
+  color: #E5E7EB;
   justify-content: space-between;
-  color:#E5E7EB;
   text-decoration: none;
+
 }
 
-.social_img{
+.social_img {
   display: flex;
   justify-content: space-between;
-  width: 116px;
-  height: 20px;
-  gap:12px;
+  width: 7.25rem;
+  height: 1.25rem;
+  gap: 0.75rem;
 }
-.social_img img{
-  width: 20px;
-  height: 20px;
+
+.social_img img {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+  
+/* 태블릿 반응형 스타일  */
+@media screen and (max-width: 1199px) {
+  
+    .title {
+      height: 4.375rem;
+      padding: 0.5626rem 1.5rem;
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 1px;
+      background-color: #FFFFFF;
+      padding: 0 24px;
+    }
+    .login-button {
+      width: auto;
+      padding: 0.625rem 1rem;
+      margin-left: 1rem;
+      margin-right: 0;
+    }
+    .container0 {
+      display:flex;
+      height: 771px;
+      /* width: 100%; */
+      align-items: center;
+      margin: 0 auto;
+      flex-direction: column;
+      
+     
+    }
+    .inner_box0 {
+      display: flex;
+      width: 32rem;
+      height: 8.5rem;
+      flex-direction: column;
+      align-items: center;
+      gap: 2rem;
+      white-space: nowrap;
+      margin-bottom: 250px;
+      
+      
+  
+    }
+    .text-box0{
+      margin-bottom: 40px;
+      
+    }
+  
+    .inner_box0 h1 {
+      font-family: Pretendard;
+      font-weight: 700;
+      line-height: 140%;
+      letter-spacing: 0%;
+      vertical-align: middle;
+      height: 3.5rem;
+      text-align: center;
+      margin-bottom: 1rem;
+      white-space: nowrap;
+      
+    }
+  
+    .container1{
+      display: flex;
+      /* width:43.625rem; */
+      height: 44.25rem;
+      gap:24px;
+      flex-direction: column;
+      padding:0 ;
+      margin-top: 2rem;
+      
+    }
+    
+    .text-box{
+     width:19.9375rem;
+     height: 10rem;
+     gap:24px;
+     margin-right:38%;
+    }
+ 
+    
+    .text-box h1{
+      width: 21rem;
+      font-size: 2rem;
+      height: 2.625rem;
+      margin-bottom: 1rem;
+      
+    }
+     .container2{
+      display: grid;
+      grid-template-areas:
+      "image"
+      "text";
+      /* width: 46.5rem; */
+      height: 50rem;
+      padding: 2rem 0;
+      gap:0;
+      
+      }
+     .container2 img{
+      grid-area: image;
+      width: 100%;
+      /* height: auto; */
+      height: 32rem;
+      margin:0 auto;
+      
+    }
+    
+    .text-box2 {
+      width:27rem;
+      height: 6rem;
+      gap:24px;
+      margin-left :22%;
+      align-items: center;
+      white-space: nowrap;
+      text-align: right;
+      grid-area: text;
+       
+      
+    }
+   
+    
+    
+    .text-box2 h1{
+      font-size: 2rem;
+      height: 4rem;
+    }
+    
+    .container3 {
+      flex-direction: column;
+      /* width:43.5rem; */
+      height: 44.25rem;
+      padding:0;
+      gap:0;
+    }
+    .container3 img{
+      width: 100%;
+      margin:0 auto;
+
+    }
+    .text-box3{
+      width:25.625rem;
+      height: 10rem;
+      gap:24px;
+      margin-top: 1.5rem;
+      margin-right: 25%;
+    }
+
+    
+    .description {
+      width: 100%; /* 너비 조정 */
+      font-size: 1rem; /* 폰트 크기 조정 */
+      line-height: 1.5; /* 줄 간격 조정 */
+      word-wrap: break-word; /* 긴 단어 줄바꿈 */
+    }
+    .container4{
+      display: flex;
+      flex-direction: column;
+      /* width:46.5rem; */
+      height: 42rem;
+      padding:0;
+      
+      
+    }
+    .text-box4 h2{
+      font-size: 2.5rem;
+    }
+    .container4 img{
+      width:100%;
+    }
+
+    .footer {
+      /* width: 46.5rem; */
+      height: auto;
+      padding: 2rem 1rem;
+     
+    }
+    
+    .inner_box {
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      gap: 2rem;
+      margin-left: 0;
+    }
   
 }
+    
+/* 모바일 반응형 스타일 */
+@media screen and (max-width: 767px) {
+  body{
+    text-align: center;
+  }
+  .title {
+    width: 100%;
+    height: 4.375rem;
+    padding: 0.5625rem 1rem;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px;
+    background-color: #FFFFFF;
+    
+  }
+  .login-button {
+    width: auto;
+    padding: 0.625rem 1rem;
+    margin-left: 0;
+    margin-right: 0;
+  }
+  .container0 {
+    width: 100%;
+    display:flex;
+    height: 610px;
+    /* width: 100%; */
+    align-items: center;
+    margin: 0 auto;
+    flex-direction: column;
+    gap:24px;
+    
+  }
+  
+  .container0 img{
+    width:23.4375rem;
+    height: 17rem;
+  }
+  .inner_box0 {
+    display: flex;
+    width: 32rem;
+    height: 8.5rem;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
+    white-space: nowrap;
+    
+
+  }
+  .see{
+    width: 240px;
+    height: 48px;
+    gap: 10px;
+    border-radius: 40px;
+    padding-top: 12px;
+    padding-right: 71px;
+    padding-bottom: 12px;
+    padding-left: 71px;
+    
+  }
+  .text-box0{
+    margin-bottom: 40px;
+    
+  }
+
+  .inner_box0 h1 {
+    font-family: Pretendard;
+    font-weight: 700;
+    line-height: 140%;
+    font-size: 2rem;
+    letter-spacing: 0%;
+    vertical-align: middle;
+    height: 3.5rem;
+    text-align: center;
+    margin-bottom: 1rem;
+    white-space: nowrap;
+    
+  }
+  .container0, .container1, .container2, .container3, .container4, .footer {
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+   
+  }
+  
+
+  .inner_box0 h1, .text-box h1, .text-box2 h1, .text-box3, .description, .h2 {
+    text-align: center;
+  }
+  .container1{
+    display: flex;
+    /* width:344px; */
+    height: 32rem;
+    gap:24px;
+    flex-direction: column;
+    padding:0 ;
+    
+    
+  }
+  .container1 img{
+    width:100%;
+    height: 16.1875rem;
+  }
+  
+  .text-box{
+   width:19.9375rem;
+   height: 10rem;
+   gap:24px;
+   margin-right:5%;
+   text-align: left;
+  }
+   .text-box p{
+    width: 183px;
+    text-align: left;
+   }
+  
+  .text-box h1{
+    width: 21rem;
+    font-size: 2rem;
+    height: 2.625rem;
+    margin-bottom: 1rem;
+    
+  }
+   .container2{
+    display: grid;
+    grid-template-areas:
+    "image"
+    "text";
+    
+    height: 32rem;
+    padding: 2rem 0;
+    gap:0;
+    
+    }
+   .container2 img{
+    grid-area: image;
+    width: 90%;
+    /* height: auto; */
+    height: 16rem;
+    margin:0 auto;
+    
+  }
+  
+  .text-box2 {
+    width:27rem;
+    height: 6rem;
+    gap:24px;
+    align-items: center;
+    white-space: nowrap;
+    text-align: right;
+    grid-area: text;
+    margin-left: 1px;
+    text-align: right;
+  }
+ 
+  .text-box2 p{
+    
+    text-align: right;
+    white-space: nowrap;
+  }
+  
+  .text-box2 h1{
+    width: 316px;
+    height: 34px;
+    font-size: 1.5rem;
+    font-family: Pretendard;
+    font-weight: 700;
+    letter-spacing: 2%;
+    text-align: right;
+    margin-left: 90px;
+    
+
+  }
+  
+  .container3 {
+    flex-direction: column;
+    
+    height: 32rem;
+    padding:0;
+    gap:0;
+  }
+  .container3 img{
+    width: 100%;
+    height: 16.125rem;
+    
+
+  }
+  .text-box3{
+    width:318px;
+    height: 130px;
+    gap:24px;
+    margin-top: 1.5rem;
+    /* margin-right: 6%; */
+    text-align: left;
+    margin-left: 85px;
+   
+    
+  }
+  .text-box3 h1{
+    width:315px;
+    font-size: 24px;
+    height:auto;
+  }
+
+  .text-box3 p{
+    width: 247px;
+    height: 38px;
+    text-align: left;
+    font-family: Pretendard;
+    font-weight: 500;
+    font-size: 17px;
+    line-height: 120%;
+    letter-spacing: 8%;
+    vertical-align: middle;
+
+  }
+
+  .container4{
+    display: flex;
+    flex-direction: column;
+    /* width:46.5rem; */
+    width:100%;
+    height: 42rem;
+    padding:0;
+    
+  
+  }
+  
+  .h2{
+    width:238px;
+    height: 90px;
+    font-size: 24px;
+  }
+  .container4 img{
+    width:100%;
+    margin:0 auto;
+    
+  }
+
+  .footer {
+    width: 100%;
+    height: auto;
+    padding: 2rem 1rem;
+   
+  }
+  
+  .inner_box {
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    gap: 2rem;
+    margin-left: 0;
+  }
+
 
+}
\ No newline at end of file