From e0acd38d025bd330140811641527b54ceebbf8de Mon Sep 17 00:00:00 2001
From: KINDNICK <68893236+KINDNICK@users.noreply.github.com>
Date: Fri, 3 Oct 2025 13:27:38 +0900
Subject: [PATCH] =?UTF-8?q?Fix=20:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=98=81=EC=83=81=20=EB=82=98?=
 =?UTF-8?q?=EC=98=A4=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/main.css | 63 ++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 54 insertions(+), 9 deletions(-)

diff --git a/css/main.css b/css/main.css
index f991588..162f0a2 100644
--- a/css/main.css
+++ b/css/main.css
@@ -38,13 +38,38 @@
 
 .video-bg iframe {
     position: absolute;
-    top: 0;
-    left: 0;
+    top: 50%;
+    left: 50%;
     width: 100%;
     height: 100%;
-    transform: none;
+    transform: translate(-50%, -50%);
     pointer-events: none;
-    object-fit: cover;
+}
+
+/* PC: 가로 기준으로 맞춤 (좌우 꽉 채우기) */
+@media (min-width: 768px) {
+    .video-bg iframe {
+        width: 100%;
+        height: 56.25vw; /* 16:9 비율 */
+        min-height: 100%;
+    }
+}
+
+/* 모바일: 세로 기준으로 맞춤 (상하 꽉 채우기) */
+@media (max-width: 767px) {
+    .hero-bg {
+        height: 120vh;
+    }
+
+    .video-bg {
+        height: 120vh;
+    }
+
+    .video-bg iframe {
+        width: 213.33vh; /* 120vh * 16/9 */
+        height: 120vh;
+        min-width: 100%;
+    }
 }
 
 /* 영상 위에 오버레이 */
@@ -934,27 +959,47 @@
 }
 
 @media (max-width: 768px) {
+    .hero-section {
+        min-height: 120vh;
+        padding: var(--spacing-2xl) var(--spacing-md);
+    }
+
+    .hero-content {
+        gap: var(--spacing-lg);
+    }
+
     .hero-title {
         font-size: 2rem;
     }
-    
+
     .hero-subtitle {
-        font-size: 1.8rem;
+        font-size: 1.6rem;
     }
-    
+
     .hero-description {
         font-size: 1rem;
+        line-height: 1.7;
     }
-    
+
     .hero-buttons {
         justify-content: center;
+        flex-wrap: wrap;
+        gap: var(--spacing-md);
     }
-    
+
     .hero-specs {
         flex-direction: column;
         align-items: center;
         gap: var(--spacing-md);
     }
+
+    .hero-logo {
+        max-width: 240px;
+    }
+
+    .hero-image {
+        margin-bottom: var(--spacing-lg);
+    }
     
     .services-carousel {
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));