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));