Fix : 모바일 페이지 영상 나오는 버그 해결

css/main.css

@@ -38,13 +38,38 @@
 
 .video-bg iframe {
     position: absolute;
-    top: 0;
+    top: 50%;
-    left: 0;
+    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));