commit c4fc3530a8d86c4f43db4325e65b1cc0289bc6c7 Author: KINDNICK Date: Sat Jul 12 18:22:31 2025 +0900 ADD : 웹사이트 최초 패치 diff --git a/README.md b/README.md new file mode 100644 index 0000000..5545fdb --- /dev/null +++ b/README.md @@ -0,0 +1,129 @@ +# 밍글 스튜디오 웹사이트 + +밍글 스튜디오의 공식 웹사이트입니다. 창의적인 디자인 솔루션을 제공하는 디자인 스튜디오의 포트폴리오와 서비스를 소개합니다. + +## 🚀 특징 + +- **반응형 디자인**: 모든 디바이스에서 최적화된 경험 +- **모던한 UI/UX**: 세련된 디자인과 부드러운 애니메이션 +- **인터랙티브 요소**: 호버 효과, 스크롤 애니메이션, 폼 검증 +- **빠른 로딩**: 최적화된 코드로 빠른 페이지 로딩 +- **접근성**: 모든 사용자를 위한 접근성 고려 + +## 📁 프로젝트 구조 + +``` +mingle-website/ +├── index.html # 메인 HTML 파일 +├── styles.css # CSS 스타일시트 +├── script.js # JavaScript 기능 +└── README.md # 프로젝트 설명서 +``` + +## 🎨 주요 섹션 + +### 1. 히어로 섹션 +- 강력한 첫인상을 주는 그라데이션 배경 +- 명확한 브랜드 메시지 +- 행동 유도 버튼 + +### 2. 소개 섹션 +- 회사 철학과 강점 소개 +- 통계 데이터 시각화 +- 애니메이션 효과 + +### 3. 서비스 섹션 +- 4가지 주요 서비스 카드 +- 아이콘과 설명 +- 호버 효과 + +### 4. 포트폴리오 섹션 +- 프로젝트 갤러리 +- 이미지 호버 오버레이 +- 카테고리별 분류 + +### 5. 연락처 섹션 +- 연락처 정보 +- 문의 폼 +- 유효성 검사 + +## 🛠️ 기술 스택 + +- **HTML5**: 시맨틱 마크업 +- **CSS3**: Flexbox, Grid, 애니메이션 +- **JavaScript**: ES6+, DOM 조작, 이벤트 처리 +- **Font Awesome**: 아이콘 +- **Google Fonts**: Noto Sans KR + +## 🚀 시작하기 + +1. 프로젝트 클론 또는 다운로드 +2. `index.html` 파일을 웹 브라우저에서 열기 +3. 로컬 서버에서 실행 (권장) + +### 로컬 서버 실행 + +Python을 사용한 경우: +```bash +python -m http.server 8000 +``` + +Node.js를 사용한 경우: +```bash +npx serve . +``` + +## 📱 반응형 디자인 + +- **데스크톱**: 1200px 이상 +- **태블릿**: 768px - 1199px +- **모바일**: 767px 이하 + +## 🎯 주요 기능 + +### 네비게이션 +- 고정 헤더 +- 스크롤 시 배경 변화 +- 모바일 햄버거 메뉴 + +### 애니메이션 +- 스크롤 시 요소 페이드인 +- 숫자 카운팅 애니메이션 +- 호버 효과 + +### 폼 처리 +- 실시간 유효성 검사 +- 성공/오류 알림 +- 이메일 형식 검증 + +## 🔧 커스터마이징 + +### 색상 변경 +`styles.css`에서 CSS 변수를 수정하여 색상을 변경할 수 있습니다: + +```css +:root { + --primary-color: #6366f1; + --secondary-color: #8b5cf6; + --accent-color: #10b981; +} +``` + +### 콘텐츠 수정 +`index.html`에서 텍스트와 이미지를 수정하여 콘텐츠를 변경할 수 있습니다. + +## 📞 연락처 + +프로젝트에 대한 문의사항이 있으시면 연락주세요: + +- **이메일**: hello@minglestudio.com +- **전화**: 010-1234-5678 +- **주소**: 서울특별시 강남구 테헤란로 123 + +## 📄 라이선스 + +이 프로젝트는 MIT 라이선스 하에 배포됩니다. + +--- + +© 2024 밍글 스튜디오. All rights reserved. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..9680694 --- /dev/null +++ b/index.html @@ -0,0 +1,344 @@ + + + + + + 밍글 스튜디오 - 모션캡쳐 창작 스튜디오 + + + + + + + + + + + + +
+
+
+

섞임 속에서 피어나는 창조
mingle studio

+

다양한 창작자와 기술이 섞여 새로운 가치를 만들어내는 공간
2025년 7월 1일 설립

+ 회사 소개 보기 +
+
+ 밍글 스튜디오 로고 +
+
+
+ + +
+
+
+

About

+

회사명: 밍글 스튜디오 (mingle studio)  |  설립일: 2025년 7월 1일
슬로건: “섞임 속에서 피어나는 창조 – mingle studio”
(의미: 다양한 창작자와 기술이 섞여 새로운 가치를 만들어내는 공간)

+
+
+

회사 소개

+

밍글 스튜디오는 창작자와 기술, 사람과 사람 사이의 '어우러짐'을 통해 새로운 콘텐츠를 만들어가는 모션 캡쳐 기반의 창작 공간입니다.
2025년 설립 이후, 누구나 편하게 사용 가능한 스튜디오 대관 서비스를 중심으로 버추얼 콘텐츠 제작 환경을 제공합니다.

+
+
+

연혁 / 타임라인

+ + + + + + + +
날짜이벤트
2025년 7월 1일밍글 스튜디오 설립
(예정)첫 상업 프로젝트 진행
(예정)실시간 스트리밍 베타 개시
+
+
+
+ + +
+
+
+

주요 서비스

+
+
+ + + + + + + +
서비스 항목설명비고
모션캡쳐 스튜디오 대관OptiTrack 기반, 실내 전신 캡쳐 가능 / 시간당 20만원실시간 모니터링 가능
리타겟팅 서비스캡쳐 데이터의 3D 모델 애니메이션 적용 지원별도 문의 가능
실시간 스트리밍현재 준비 중이며, 사전 문의 시 진행 가능OBS, Unity 연동 지원 예정
+
+
+

대관 서비스 안내

+ + + + + + + + + +
항목내용
이용 요금시간당 200,000원 (VAT 별도)
촬영 장비OptiTrack (옵티트랙) 시스템, Rokoko Glove (로코코 장갑) 지원
공간 크기7m x 6m (※ 9m x 6m으로 증축 예정)
리타겟팅 서비스모션 데이터의 3D 모델 적용 가능 (문의 필요)
영상 촬영뮤직비디오/퍼포먼스 등 별도 견적 (사전 협의 필수)
+
+ 예약 및 문의
+ 대관/견적 문의 및 협업 요청은 아래 이메일로 연락 주세요.
+ 문의 시 사용 목적(게임/공연/영상 등)과 희망 일정, 장비 필요 여부를 함께 적어주시면 빠른 응답이 가능합니다.
+ 이메일: minglestudio.mocap@gmail.com
+ 예약 폼: (추후 추가 예정) +
+
+ 안내 사항 +
    +
  • 공간 내에서 녹음/음성 녹취는 별도 장비 필요 시 사전 협의 바랍니다.
    • +
  • 로코코 글러브는 손가락까지 세밀한 모션 수집이 가능합니다.
    • +
  • 실시간 스트리밍 연동은 현재 준비 중이며 사전 테스트 가능 여부는 별도 협의합니다.
    • +
+
+
+
+
+ + +
+
+
+

Team

+

각 분야의 전문가들이 함께 협업하며 콘텐츠 제작을 지원합니다.

+
+
+
+

김광진 (카닉)

+
TD / 테크니컬 디렉터
+
스튜디오 전체 기술 운영, 모션캡쳐 장비 관리, 음향 시스템, 엔진 프로그래밍 등
+
+
+

이승민 (야모)

+
모션캡쳐 디렉터
+
캡쳐 디렉팅, 배우 모션 클린업, 카메라 무빙, 퍼포먼스 연출 등
+
+
+

김희진 (제이제이)

+
3D 아티스트 / 운영 PM
+
배경/리소스 제작, 일정 조율, 인사 및 프로젝트 관리
+
+
+
💬 팀 소개는 추후 프로필 이미지나 SNS 링크를 추가해 확장 가능합니다.
+
+
+ + +
+
+
+

Portfolio

+

밍글 스튜디오에서 제작하거나 협업한 영상 콘텐츠는 YouTube 링크를 통해 확인하실 수 있습니다.

+
+
+ 📺 YouTube 채널 보기
+ 밍글 스튜디오 유튜브 바로가기 +
+

Long-Form

+
+
+
+
+
+

Shorts

+
+
+
+
+
+
+
+
+
+
+
+

실시간 방송 예시

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 🎬 업로드 예정 콘텐츠 예시:
+ - 리타겟팅 예시 영상
+ - 로코코 장갑 활용 시범 영상
+ - 퍼포먼스 기반 뮤직비디오 촬영 사례
+ - 실시간 스트리밍 테스트 영상 등 +
+
+
+
+ + +
+
+
+

Contact

+

예약 문의 또는 협업 제안은 언제든지 이메일로 연락주세요.

+
+
+ 이메일: minglestudio.mocap@gmail.com
+ 연락처: 010-9288-9190
+ 주소: (21330) 인천광역시 부평구 주부토로 236
+ 인천테크노밸리 A동 B105호
+
+ 오시는 길
+ - 인천 7호선 갈산역 하차 → 도보 약 7분 거리
+ - 건물 내 지하 주차 가능 (※ 2시간 무료) +
+
+
+
+ + +
+
+
+

FAQ – 자주 묻는 질문

+
+
    +
  • Q1. 스튜디오 대관은 어떻게 예약하나요?
    A. 이메일 문의 또는 예약 폼 작성 후 전달해주시면 됩니다.
    📧 minglestudio.mocap@gmail.com
    • +
  • Q2. 최소 대관 시간은 어떻게 되나요?
    A. 최소 대관은 2시간부터 가능합니다.
    • +
  • Q3. 대관은 얼마나 전에 예약해야 하나요?
    A. 최소 3~4일 전에 연락주시면 원활하게 준비가 가능합니다.
    • +
  • Q4. 현장 결제가 가능한가요?
    A. 네, 가능합니다.
    • +
  • Q5. 세금계산서 발행이 가능한가요?
    A. 네, 사업자용 세금계산서 발행 가능합니다.
    • +
  • Q6. 예약금 제도와 환불 규정이 있나요?
    A. 예약 시 총 대여 금액의 20%를 선결제하셔야 예약이 확정됩니다.

    아래는 예시 환불 규정입니다 (법적 관점에서도 일반적인 수준):
    취소 시점환불 비율
    이용일 5일 전까지100% 환불
    이용일 3~4일 전50% 환불
    이용일 2일 이내환불 불가
    • +
  • Q7. 모션 캡쳐 데이터는 어떤 형식으로 제공되나요?
    A. FBX, BHV, ANIM 포맷으로 제공되며, 문의 시 세부사항 안내해드립니다.
    • +
  • Q8. 리타겟팅도 함께 제공되나요?
    A. 기본 리타겟팅이 포함되어 있으며, 추가적인 클린업/후처리는 별도 견적 협의 후 제공됩니다.
    • +
  • Q9. 실시간 미리보기나 스트리밍이 가능한가요?
    A. 실시간 미리보기는 가능하며, 실시간 스트리밍은 지원 예정입니다.
    • +
  • Q10. 장비 사용이 익숙하지 않아도 괜찮을까요?
    A. 스튜디오에는 담당 인력이 배치되어 있어 장비 세팅 및 사용을 지원해드립니다.
    • +
  • Q11. 얼굴 캡쳐나 음성 녹음도 가능한가요?
    A. 가능합니다. 다만 예약 시 미리 요청해주셔야 하며, 별도 요금이 발생할 수 있습니다.
    • +
  • Q12. 촬영한 데이터는 언제 받을 수 있나요?
    A. 영업일 기준 1~2일 이내 전달드립니다.
    • +
  • Q13. 녹화 시간에 제한이 있나요?
    A. 녹화 시간 제한은 없으며, 대관 시간 내 자유롭게 녹화하실 수 있습니다.
    • +
  • Q14. 추가 리타겟팅이나 수정 요청이 가능한가요?
    A. 가능합니다. 다만 추가 비용이 발생할 수 있습니다.
    • +
  • Q15. 탈의실이나 휴게 공간이 있나요?
    A. 네, 탈의실과 간단한 휴게 공간이 마련되어 있습니다. 빵, 햄버거, 커피 등의 간단한 취식이 가능합니다.
    • +
  • Q16. 몇 명까지 이용 가능한가요?
    A. 촬영 인원 최대 4명, 대기 인원 포함 최대 10명까지 수용 가능합니다.
    • +
  • Q17. 촬영 시 필요한 복장이나 준비물이 있나요?
    A. 기본적으로 준비물은 없지만, 안경은 반사로 인해 캡쳐에 오류가 발생할 수 있어 렌즈 착용을 권장드립니다.
    • +
  • Q18. 외부 팀이 장비만 사용할 수도 있나요?
    A. 장비만 사용하는 경우에도 사전 협의가 필요합니다. 기술 지원 여부에 따라 사용 조건이 달라질 수 있으므로 문의 바랍니다.
    • +
  • Q19. 주차는 가능한가요?
    A. 네, 가능합니다.
    기본 2시간 무료이며, 건물 내 시설(카페 등) 이용 시 추가 2시간, 최대 4시간 무료 주차가 가능합니다.
    • +
  • Q20. 동물이나 아동도 촬영이 가능한가요?
    A. 안전 및 장비 보호를 위해 동물 및 아동 출연은 현재 불가합니다.
    • +
  • Q21. 스튜디오 내부에서 자체 촬영을 해도 되나요?
    A. 사전 문의 시 내부 촬영은 일시적으로 허용될 수 있습니다. 촬영 목적에 따라 협의가 필요합니다.
    • +
+
+
+ + + + \ No newline at end of file diff --git a/mingle logo.png b/mingle logo.png new file mode 100644 index 0000000..7119bbe Binary files /dev/null and b/mingle logo.png differ diff --git a/mingle-website.zip b/mingle-website.zip new file mode 100644 index 0000000..ac81bcb Binary files /dev/null and b/mingle-website.zip differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..bb47b81 --- /dev/null +++ b/script.js @@ -0,0 +1,246 @@ +// DOM이 로드된 후 실행 +document.addEventListener('DOMContentLoaded', function() { + + // 모바일 네비게이션 토글 + const hamburger = document.querySelector('.hamburger'); + const navMenu = document.querySelector('.nav-menu'); + + hamburger.addEventListener('click', function() { + hamburger.classList.toggle('active'); + navMenu.classList.toggle('active'); + }); + + // 네비게이션 링크 클릭 시 모바일 메뉴 닫기 + document.querySelectorAll('.nav-link').forEach(link => { + link.addEventListener('click', () => { + hamburger.classList.remove('active'); + navMenu.classList.remove('active'); + }); + }); + + // 스무스 스크롤 + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); + }); + + // 네비게이션 스크롤 효과 + window.addEventListener('scroll', function() { + const navbar = document.querySelector('.navbar'); + if (window.scrollY > 100) { + navbar.style.background = 'rgba(255, 255, 255, 0.98)'; + navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)'; + } else { + navbar.style.background = 'rgba(255, 255, 255, 0.95)'; + navbar.style.boxShadow = 'none'; + } + }); + + // 폼 제출 처리 + const contactForm = document.querySelector('.contact-form form'); + if (contactForm) { + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + + // 폼 데이터 수집 + const formData = new FormData(this); + const name = this.querySelector('input[type="text"]').value; + const email = this.querySelector('input[type="email"]').value; + const subject = this.querySelectorAll('input[type="text"]')[1].value; + const message = this.querySelector('textarea').value; + + // 간단한 유효성 검사 + if (!name || !email || !subject || !message) { + showNotification('모든 필드를 입력해주세요.', 'error'); + return; + } + + if (!isValidEmail(email)) { + showNotification('올바른 이메일 주소를 입력해주세요.', 'error'); + return; + } + + // 성공 메시지 표시 (실제로는 서버로 전송) + showNotification('메시지가 성공적으로 전송되었습니다!', 'success'); + this.reset(); + }); + } + + // 이메일 유효성 검사 함수 + function isValidEmail(email) { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailRegex.test(email); + } + + // 알림 표시 함수 + function showNotification(message, type) { + // 기존 알림 제거 + const existingNotification = document.querySelector('.notification'); + if (existingNotification) { + existingNotification.remove(); + } + + // 새 알림 생성 + const notification = document.createElement('div'); + notification.className = `notification ${type}`; + notification.textContent = message; + + // 스타일 적용 + notification.style.cssText = ` + position: fixed; + top: 20px; + right: 20px; + padding: 1rem 2rem; + border-radius: 10px; + color: white; + font-weight: 600; + z-index: 10000; + transform: translateX(100%); + transition: transform 0.3s ease; + ${type === 'success' ? 'background: #10b981;' : 'background: #ef4444;'} + `; + + document.body.appendChild(notification); + + // 애니메이션 + setTimeout(() => { + notification.style.transform = 'translateX(0)'; + }, 100); + + // 자동 제거 + setTimeout(() => { + notification.style.transform = 'translateX(100%)'; + setTimeout(() => { + notification.remove(); + }, 300); + }, 3000); + } + + // 포트폴리오 아이템 호버 효과 + const portfolioItems = document.querySelectorAll('.portfolio-item'); + portfolioItems.forEach(item => { + item.addEventListener('mouseenter', function() { + this.style.transform = 'translateY(-10px)'; + }); + + item.addEventListener('mouseleave', function() { + this.style.transform = 'translateY(0)'; + }); + }); + + // 서비스 카드 호버 효과 + const serviceCards = document.querySelectorAll('.service-card'); + serviceCards.forEach(card => { + card.addEventListener('mouseenter', function() { + this.style.transform = 'translateY(-10px)'; + }); + + card.addEventListener('mouseleave', function() { + this.style.transform = 'translateY(0)'; + }); + }); + + // 통계 숫자 애니메이션 + const statItems = document.querySelectorAll('.stat-item h3'); + const observerOptions = { + threshold: 0.5, + rootMargin: '0px 0px -100px 0px' + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const target = entry.target; + const finalValue = parseInt(target.textContent); + animateNumber(target, 0, finalValue, 2000); + observer.unobserve(target); + } + }); + }, observerOptions); + + statItems.forEach(item => { + observer.observe(item); + }); + + // 숫자 애니메이션 함수 + function animateNumber(element, start, end, duration) { + const startTime = performance.now(); + + function updateNumber(currentTime) { + const elapsed = currentTime - startTime; + const progress = Math.min(elapsed / duration, 1); + + const current = Math.floor(start + (end - start) * progress); + element.textContent = current + (element.textContent.includes('+') ? '+' : ''); + + if (progress < 1) { + requestAnimationFrame(updateNumber); + } + } + + requestAnimationFrame(updateNumber); + } + + // 스크롤 시 요소 페이드인 효과 + const fadeElements = document.querySelectorAll('.service-card, .portfolio-item, .about-text, .about-stats'); + const fadeObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }); + + fadeElements.forEach(element => { + element.style.opacity = '0'; + element.style.transform = 'translateY(30px)'; + element.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; + fadeObserver.observe(element); + }); + + // 로딩 완료 후 초기 애니메이션 + setTimeout(() => { + document.body.style.opacity = '1'; + }, 100); +}); + +// 페이지 로드 시 초기 설정 +window.addEventListener('load', function() { + // 페이지 로딩 완료 후 추가 효과 + const heroTitle = document.querySelector('.hero-title'); + const heroSubtitle = document.querySelector('.hero-subtitle'); + const heroButtons = document.querySelector('.hero-buttons'); + + if (heroTitle) { + setTimeout(() => { + heroTitle.style.opacity = '1'; + heroTitle.style.transform = 'translateY(0)'; + }, 500); + } + + if (heroSubtitle) { + setTimeout(() => { + heroSubtitle.style.opacity = '1'; + heroSubtitle.style.transform = 'translateY(0)'; + }, 700); + } + + if (heroButtons) { + setTimeout(() => { + heroButtons.style.opacity = '1'; + heroButtons.style.transform = 'translateY(0)'; + }, 900); + } +}); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..4763f98 --- /dev/null +++ b/styles.css @@ -0,0 +1,675 @@ +/* 기본 스타일 리셋 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Noto Sans KR', sans-serif; + line-height: 1.6; + color: #333; + overflow-x: hidden; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* 네비게이션 */ +.navbar { + position: fixed; + top: 0; + width: 100%; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + z-index: 1000; + padding: 1rem 0; + transition: all 0.3s ease; +} + +.nav-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.nav-logo h2 { + color: #6366f1; + font-weight: 700; + font-size: 1.5rem; +} + +.nav-menu { + display: flex; + list-style: none; + gap: 2rem; +} + +.nav-link { + text-decoration: none; + color: #333; + font-weight: 500; + transition: color 0.3s ease; + position: relative; +} + +.nav-link:hover { + color: #6366f1; +} + +.nav-link::after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: -5px; + left: 0; + background-color: #6366f1; + transition: width 0.3s ease; +} + +.nav-link:hover::after { + width: 100%; +} + +.hamburger { + display: none; + flex-direction: column; + cursor: pointer; +} + +.bar { + width: 25px; + height: 3px; + background-color: #333; + margin: 3px 0; + transition: 0.3s; +} + +/* 히어로 섹션 */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + position: relative; + overflow: hidden; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,'); + opacity: 0.3; +} + +.hero-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; + position: relative; + z-index: 2; +} + +.hero-title { + font-size: 3.5rem; + font-weight: 700; + line-height: 1.2; + margin-bottom: 1.5rem; +} + +.hero-subtitle { + font-size: 1.2rem; + margin-bottom: 2rem; + opacity: 0.9; + line-height: 1.6; +} + +.hero-buttons { + display: flex; + gap: 1rem; + flex-wrap: wrap; +} + +.btn { + padding: 1rem 2rem; + border: none; + border-radius: 50px; + font-weight: 600; + text-decoration: none; + display: inline-block; + transition: all 0.3s ease; + cursor: pointer; + font-size: 1rem; +} + +.btn-primary { + background: #6366f1; + color: white; +} + +.btn-primary:hover { + background: #4f46e5; + transform: translateY(-2px); + box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3); +} + +.btn-secondary { + background: transparent; + color: white; + border: 2px solid white; +} + +.btn-secondary:hover { + background: white; + color: #6366f1; + transform: translateY(-2px); +} + +.hero-graphic { + position: relative; + height: 400px; + display: flex; + align-items: center; + justify-content: center; +} + +.floating-element { + position: absolute; + width: 100px; + height: 100px; + background: rgba(255, 255, 255, 0.1); + border-radius: 50%; + animation: float 6s ease-in-out infinite; +} + +.floating-element:nth-child(1) { + top: 20%; + left: 20%; + animation-delay: 0s; +} + +.floating-element:nth-child(2) { + top: 60%; + right: 20%; + animation-delay: 2s; +} + +.floating-element:nth-child(3) { + bottom: 20%; + left: 50%; + animation-delay: 4s; +} + +@keyframes float { + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-20px); } +} + +/* 섹션 공통 스타일 */ +section { + padding: 5rem 0; +} + +.section-header { + text-align: center; + margin-bottom: 4rem; +} + +.section-header h2 { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1rem; + color: #333; +} + +.section-header p { + font-size: 1.1rem; + color: #666; + max-width: 600px; + margin: 0 auto; +} + +/* 소개 섹션 */ +.about { + background: #f8fafc; +} + +.about-content { + display: grid; + grid-template-columns: 2fr 1fr; + gap: 4rem; + align-items: start; +} + +.about-text h3 { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 1rem; + color: #333; +} + +.about-text p { + margin-bottom: 2rem; + color: #666; + line-height: 1.8; +} + +.strengths-list { + list-style: none; +} + +.strengths-list li { + display: flex; + align-items: center; + margin-bottom: 1rem; + padding: 1rem; + background: white; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; +} + +.strengths-list li:hover { + transform: translateX(10px); +} + +.strengths-list i { + color: #6366f1; + margin-right: 1rem; + font-size: 1.2rem; +} + +.about-stats { + display: grid; + grid-template-columns: 1fr; + gap: 2rem; +} + +.stat-item { + text-align: center; + padding: 2rem; + background: white; + border-radius: 15px; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; +} + +.stat-item:hover { + transform: translateY(-5px); +} + +.stat-item h3 { + font-size: 2.5rem; + font-weight: 700; + color: #6366f1; + margin-bottom: 0.5rem; +} + +.stat-item p { + color: #666; + font-weight: 500; +} + +/* 서비스 섹션 */ +.services-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; +} + +.service-card { + background: white; + padding: 2.5rem; + border-radius: 15px; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); + text-align: center; + transition: all 0.3s ease; + border: 1px solid #f1f5f9; +} + +.service-card:hover { + transform: translateY(-10px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); +} + +.service-icon { + width: 80px; + height: 80px; + background: linear-gradient(135deg, #6366f1, #8b5cf6); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; +} + +.service-icon i { + font-size: 2rem; + color: white; +} + +.service-card h3 { + font-size: 1.3rem; + font-weight: 600; + margin-bottom: 1rem; + color: #333; +} + +.service-card p { + color: #666; + line-height: 1.6; +} + +/* 포트폴리오 섹션 */ +.portfolio { + background: #f8fafc; +} + +.portfolio-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.portfolio-item { + position: relative; + border-radius: 15px; + overflow: hidden; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; +} + +.portfolio-item:hover { + transform: translateY(-5px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); +} + +.portfolio-image { + position: relative; + overflow: hidden; +} + +.portfolio-image img { + width: 100%; + height: 250px; + object-fit: cover; + transition: transform 0.3s ease; +} + +.portfolio-item:hover .portfolio-image img { + transform: scale(1.1); +} + +.portfolio-overlay { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); + color: white; + padding: 2rem; + transform: translateY(100%); + transition: transform 0.3s ease; +} + +.portfolio-item:hover .portfolio-overlay { + transform: translateY(0); +} + +.portfolio-overlay h3 { + font-size: 1.2rem; + font-weight: 600; + margin-bottom: 0.5rem; +} + +.portfolio-overlay p { + opacity: 0.9; +} + +/* 연락처 섹션 */ +.contact-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; +} + +.contact-info h3 { + font-size: 1.8rem; + font-weight: 600; + margin-bottom: 1rem; + color: #333; +} + +.contact-info p { + color: #666; + margin-bottom: 2rem; + line-height: 1.8; +} + +.contact-details { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.contact-item { + display: flex; + align-items: center; + gap: 1rem; +} + +.contact-item i { + width: 50px; + height: 50px; + background: #6366f1; + color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.2rem; +} + +.contact-item h4 { + font-weight: 600; + margin-bottom: 0.25rem; + color: #333; +} + +.contact-item p { + color: #666; + margin: 0; +} + +.contact-form { + background: white; + padding: 2.5rem; + border-radius: 15px; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); +} + +.form-group { + margin-bottom: 1.5rem; +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 1rem; + border: 2px solid #e2e8f0; + border-radius: 10px; + font-size: 1rem; + transition: border-color 0.3s ease; + font-family: inherit; +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: #6366f1; +} + +.form-group textarea { + resize: vertical; + min-height: 120px; +} + +/* 푸터 */ +.footer { + background: #1e293b; + color: white; + padding: 3rem 0 1rem; +} + +.footer-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-bottom: 2rem; +} + +.footer-section h3, +.footer-section h4 { + margin-bottom: 1rem; + color: white; +} + +.footer-section p { + color: #cbd5e1; + line-height: 1.6; +} + +.footer-section ul { + list-style: none; +} + +.footer-section ul li { + margin-bottom: 0.5rem; +} + +.footer-section ul li a { + color: #cbd5e1; + text-decoration: none; + transition: color 0.3s ease; +} + +.footer-section ul li a:hover { + color: #6366f1; +} + +.social-links { + display: flex; + gap: 1rem; +} + +.social-links a { + width: 40px; + height: 40px; + background: #6366f1; + color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + transition: all 0.3s ease; +} + +.social-links a:hover { + background: #4f46e5; + transform: translateY(-2px); +} + +.footer-bottom { + text-align: center; + padding-top: 2rem; + border-top: 1px solid #334155; + color: #cbd5e1; +} + +/* 반응형 디자인 */ +@media (max-width: 768px) { + .hamburger { + display: flex; + } + + .nav-menu { + position: fixed; + left: -100%; + top: 70px; + flex-direction: column; + background-color: white; + width: 100%; + text-align: center; + transition: 0.3s; + box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05); + padding: 2rem 0; + } + + .nav-menu.active { + left: 0; + } + + .hero-container { + grid-template-columns: 1fr; + text-align: center; + gap: 2rem; + } + + .hero-title { + font-size: 2.5rem; + } + + .about-content { + grid-template-columns: 1fr; + gap: 2rem; + } + + .contact-content { + grid-template-columns: 1fr; + gap: 2rem; + } + + .hero-buttons { + justify-content: center; + } + + .services-grid { + grid-template-columns: 1fr; + } + + .portfolio-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + .hero-title { + font-size: 2rem; + } + + .section-header h2 { + font-size: 2rem; + } + + .btn { + padding: 0.8rem 1.5rem; + font-size: 0.9rem; + } +} \ No newline at end of file