ADD : 웹사이트 최초 패치
This commit is contained in:
commit
c4fc3530a8
129
README.md
Normal file
129
README.md
Normal file
@ -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.
|
||||
344
index.html
Normal file
344
index.html
Normal file
@ -0,0 +1,344 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>밍글 스튜디오 - 모션캡쳐 창작 스튜디오</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
<style>
|
||||
body { font-family: 'Pretendard', 'Noto Sans KR', sans-serif; background: #f8fafc; color: #222; }
|
||||
.section { padding: 5rem 0; }
|
||||
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
|
||||
.section-header { text-align: center; margin-bottom: 3rem; }
|
||||
.section-header h2 { font-size: 2.5rem; font-weight: 700; color: #222; }
|
||||
.section-header p { color: #666; font-size: 1.1rem; }
|
||||
.card { background: #fff; border-radius: 18px; box-shadow: 0 4px 24px rgba(0,0,0,0.06); padding: 2rem; margin-bottom: 2rem; }
|
||||
.btn { display: inline-block; padding: 0.7rem 1.7rem; border-radius: 30px; font-weight: 600; text-decoration: none; transition: 0.2s; }
|
||||
.btn-primary { background: #ff8800; color: #fff; }
|
||||
.btn-primary:hover { background: #ff6600; }
|
||||
.btn-secondary { background: #fff; color: #ff8800; border: 2px solid #ff8800; }
|
||||
.btn-secondary:hover { background: #ff8800; color: #fff; }
|
||||
.highlight { color: #ff8800; font-weight: 700; }
|
||||
.table { width: 100%; border-collapse: collapse; background: #fff; margin-bottom: 1.5rem; }
|
||||
.table th, .table td { border: 1px solid #e5e7eb; padding: 0.9rem 0.7rem; text-align: left; }
|
||||
.table th { background: #f3f4f6; font-weight: 600; }
|
||||
.table tr:nth-child(even) { background: #fafafa; }
|
||||
.flex { display: flex; gap: 2rem; flex-wrap: wrap; }
|
||||
.flex-col { flex-direction: column; }
|
||||
.team-card { flex: 1 1 250px; min-width: 220px; background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); padding: 1.5rem; margin-bottom: 1.5rem; }
|
||||
.team-card h4 { margin: 0.5rem 0 0.2rem; font-size: 1.1rem; }
|
||||
.team-card .role { color: #ff8800; font-weight: 600; font-size: 1rem; }
|
||||
.team-card .desc { color: #555; font-size: 0.98rem; }
|
||||
.faq-list { margin: 0; padding: 0; list-style: none; }
|
||||
.faq-list li { margin-bottom: 1.5rem; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); padding: 1.2rem 1.5rem; }
|
||||
.faq-q { font-weight: 600; color: #222; }
|
||||
.faq-a { color: #666; margin-top: 0.3rem; }
|
||||
.portfolio-links a { display: block; margin-bottom: 0.5rem; color: #2563eb; text-decoration: underline; }
|
||||
|
||||
/* 네비게이션 메뉴 스타일 개선 */
|
||||
.navbar { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.03); }
|
||||
.nav-menu { display: flex; gap: 2.2rem; list-style: none; margin: 0; padding: 0; }
|
||||
.nav-menu li { display: flex; align-items: center; }
|
||||
.nav-menu a {
|
||||
color: #ff8800;
|
||||
font-weight: 600;
|
||||
font-size: 1.08rem;
|
||||
text-decoration: none;
|
||||
padding: 0.4rem 0.7rem;
|
||||
border-radius: 8px;
|
||||
transition: background 0.18s, color 0.18s;
|
||||
}
|
||||
.nav-menu a:hover, .nav-menu a:focus {
|
||||
background: #fff3e0;
|
||||
color: #d35400;
|
||||
}
|
||||
|
||||
/* 포트폴리오 유튜브 임베드 그리드 개선 */
|
||||
.youtube-embed-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
.youtube-embed-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 16px rgba(0,0,0,0.07);
|
||||
padding: 1.2rem 1.2rem 1.5rem 1.2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.youtube-embed-card .youtube-embed {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
|
||||
}
|
||||
.youtube-embed-card .yt-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.7rem;
|
||||
color: #222;
|
||||
font-size: 1.08rem;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.youtube-embed-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 800px) { .flex { flex-direction: column; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="nav-logo" style="display:flex;align-items:center;gap:0.7rem;">
|
||||
<img src="mingle logo.png" alt="밍글 스튜디오 로고" style="height:38px;width:auto;display:inline-block;vertical-align:middle;">
|
||||
<span style="font-size:1.3rem;font-weight:700;color:#ff8800;letter-spacing:0.01em;">밍글 스튜디오</span>
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#services">Services</a></li>
|
||||
<li><a href="#team">Team</a></li>
|
||||
<li><a href="#portfolio">Portfolio</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li><a href="#faq">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="section" style="background:linear-gradient(120deg,#fff7ed 60%,#ffe0b2 100%);padding-top:7rem;">
|
||||
<div class="container flex" style="align-items:center;">
|
||||
<div style="flex:1;min-width:260px;">
|
||||
<h1 style="font-size:2.7rem;font-weight:800;line-height:1.2;">섞임 속에서 피어나는 창조<br><span class="highlight">mingle studio</span></h1>
|
||||
<p style="margin:1.2rem 0 2rem;color:#555;font-size:1.15rem;">다양한 창작자와 기술이 섞여 새로운 가치를 만들어내는 공간<br><span style="color:#ff8800;font-weight:600;">2025년 7월 1일 설립</span></p>
|
||||
<a href="#about" class="btn btn-primary">회사 소개 보기</a>
|
||||
</div>
|
||||
<div style="flex:1;min-width:220px;text-align:center;">
|
||||
<img src="mingle logo.png" alt="밍글 스튜디오 로고" style="max-width:260px;width:90%;">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About -->
|
||||
<section id="about" class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>About</h2>
|
||||
<p><b>회사명:</b> 밍글 스튜디오 (mingle studio) | <b>설립일:</b> 2025년 7월 1일<br><b>슬로건:</b> “섞임 속에서 피어나는 창조 – mingle studio”<br><span style="font-size:0.95em;color:#888;">(의미: 다양한 창작자와 기술이 섞여 새로운 가치를 만들어내는 공간)</span></p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3 style="margin-bottom:0.7rem;">회사 소개</h3>
|
||||
<p>밍글 스튜디오는 창작자와 기술, 사람과 사람 사이의 '어우러짐'을 통해 새로운 콘텐츠를 만들어가는 모션 캡쳐 기반의 창작 공간입니다.<br>2025년 설립 이후, 누구나 편하게 사용 가능한 스튜디오 대관 서비스를 중심으로 버추얼 콘텐츠 제작 환경을 제공합니다.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3 style="margin-bottom:0.7rem;">연혁 / 타임라인</h3>
|
||||
<table class="table">
|
||||
<thead><tr><th>날짜</th><th>이벤트</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>2025년 7월 1일</td><td>밍글 스튜디오 설립</td></tr>
|
||||
<tr><td>(예정)</td><td>첫 상업 프로젝트 진행</td></tr>
|
||||
<tr><td>(예정)</td><td>실시간 스트리밍 베타 개시</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services -->
|
||||
<section id="services" class="section" style="background:#fff;">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>주요 서비스</h2>
|
||||
</div>
|
||||
<div class="card">
|
||||
<table class="table">
|
||||
<thead><tr><th>서비스 항목</th><th>설명</th><th>비고</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><b>모션캡쳐 스튜디오 대관</b></td><td>OptiTrack 기반, 실내 전신 캡쳐 가능 / 시간당 20만원</td><td>실시간 모니터링 가능</td></tr>
|
||||
<tr><td><b>리타겟팅 서비스</b></td><td>캡쳐 데이터의 3D 모델 애니메이션 적용 지원</td><td>별도 문의 가능</td></tr>
|
||||
<tr><td><b>실시간 스트리밍</b></td><td>현재 준비 중이며, 사전 문의 시 진행 가능</td><td>OBS, Unity 연동 지원 예정</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3 style="margin-bottom:0.7rem;">대관 서비스 안내</h3>
|
||||
<table class="table">
|
||||
<thead><tr><th>항목</th><th>내용</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><b>이용 요금</b></td><td>시간당 <b>200,000원 (VAT 별도)</b></td></tr>
|
||||
<tr><td><b>촬영 장비</b></td><td>OptiTrack (옵티트랙) 시스템, Rokoko Glove (로코코 장갑) 지원</td></tr>
|
||||
<tr><td><b>공간 크기</b></td><td>7m x 6m (※ 9m x 6m으로 증축 예정)</td></tr>
|
||||
<tr><td><b>리타겟팅 서비스</b></td><td>모션 데이터의 3D 모델 적용 가능 (문의 필요)</td></tr>
|
||||
<tr><td><b>영상 촬영</b></td><td>뮤직비디오/퍼포먼스 등 별도 견적 (사전 협의 필수)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="margin-top:1.2rem;">
|
||||
<b>예약 및 문의</b><br>
|
||||
대관/견적 문의 및 협업 요청은 아래 이메일로 연락 주세요.<br>
|
||||
문의 시 사용 목적(게임/공연/영상 등)과 희망 일정, 장비 필요 여부를 함께 적어주시면 빠른 응답이 가능합니다.<br>
|
||||
<span style="color:#ff8800;font-weight:600;">이메일: minglestudio.mocap@gmail.com</span><br>
|
||||
<span style="color:#888;">예약 폼: (추후 추가 예정)</span>
|
||||
</div>
|
||||
<div style="margin-top:1.2rem;">
|
||||
<b>안내 사항</b>
|
||||
<ul style="margin:0.5rem 0 0 1.2rem; color:#666;">
|
||||
<li>공간 내에서 녹음/음성 녹취는 별도 장비 필요 시 사전 협의 바랍니다.</li>
|
||||
<li>로코코 글러브는 손가락까지 세밀한 모션 수집이 가능합니다.</li>
|
||||
<li>실시간 스트리밍 연동은 현재 준비 중이며 사전 테스트 가능 여부는 별도 협의합니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Team -->
|
||||
<section id="team" class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Team</h2>
|
||||
<p>각 분야의 전문가들이 함께 협업하며 콘텐츠 제작을 지원합니다.</p>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="team-card">
|
||||
<h4>김광진 (카닉)</h4>
|
||||
<div class="role">TD / 테크니컬 디렉터</div>
|
||||
<div class="desc">스튜디오 전체 기술 운영, 모션캡쳐 장비 관리, 음향 시스템, 엔진 프로그래밍 등</div>
|
||||
</div>
|
||||
<div class="team-card">
|
||||
<h4>이승민 (야모)</h4>
|
||||
<div class="role">모션캡쳐 디렉터</div>
|
||||
<div class="desc">캡쳐 디렉팅, 배우 모션 클린업, 카메라 무빙, 퍼포먼스 연출 등</div>
|
||||
</div>
|
||||
<div class="team-card">
|
||||
<h4>김희진 (제이제이)</h4>
|
||||
<div class="role">3D 아티스트 / 운영 PM</div>
|
||||
<div class="desc">배경/리소스 제작, 일정 조율, 인사 및 프로젝트 관리</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="color:#888;font-size:0.98rem;margin-top:1.2rem;">💬 팀 소개는 추후 프로필 이미지나 SNS 링크를 추가해 확장 가능합니다.</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Portfolio -->
|
||||
<section id="portfolio" class="section" style="background:#fff;">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Portfolio</h2>
|
||||
<p>밍글 스튜디오에서 제작하거나 협업한 영상 콘텐츠는 YouTube 링크를 통해 확인하실 수 있습니다.</p>
|
||||
</div>
|
||||
<div class="card portfolio-links">
|
||||
<b>📺 YouTube 채널 보기</b><br>
|
||||
<a href="https://www.youtube.com/@mingle_studio" target="_blank">밍글 스튜디오 유튜브 바로가기</a>
|
||||
<div style="margin-top:2.2rem;"></div>
|
||||
<div class="section-header" style="margin-bottom:1.2rem;"><h3 style="color:#ff8800;">Long-Form</h3></div>
|
||||
<div class="youtube-embed-grid">
|
||||
<div class="youtube-embed-card">
|
||||
<div class="youtube-embed"><iframe width="100%" height="220" src="https://www.youtube.com/embed/FecqTyUU6y0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-header" style="margin:2.5rem 0 1.2rem 0;"><h3 style="color:#ff8800;">Shorts</h3></div>
|
||||
<div class="youtube-embed-grid">
|
||||
<div class="youtube-embed-card">
|
||||
<div class="youtube-embed"><iframe width="100%" height="400" src="https://www.youtube.com/embed/OmpqKhMrb-U" title="YouTube Shorts" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
|
||||
</div>
|
||||
<div class="youtube-embed-card">
|
||||
<div class="youtube-embed"><iframe width="100%" height="400" src="https://www.youtube.com/embed/hKwGjPfULFI" title="YouTube Shorts" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
|
||||
</div>
|
||||
<div class="youtube-embed-card">
|
||||
<div class="youtube-embed"><iframe width="100%" height="400" src="https://www.youtube.com/embed/_blWj7UQtRc" title="YouTube Shorts" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-header" style="margin:2.5rem 0 1.2rem 0;"><h3 style="color:#ff8800;">실시간 방송 예시</h3></div>
|
||||
<div class="youtube-embed-grid">
|
||||
<div class="youtube-embed-card">
|
||||
<div class="youtube-embed"><iframe width="100%" height="220" src="https://vod.sooplive.co.kr/player/159808721" title="미르 첫 모캡 방송" frameborder="0" allowfullscreen></iframe></div>
|
||||
</div>
|
||||
<div class="youtube-embed-card">
|
||||
<div class="youtube-embed"><iframe width="100%" height="220" src="https://vod.sooplive.co.kr/player/159683673" title="250510 춤짱자매즈 모캡 합방 (w. 호발)" frameborder="0" allowfullscreen></iframe></div>
|
||||
</div>
|
||||
<div class="youtube-embed-card">
|
||||
<div class="youtube-embed"><iframe width="100%" height="220" src="https://vod.sooplive.co.kr/player/159205533" title="크로아) 치요 X 마늘 3D 모션 캡쳐 합방" frameborder="0" allowfullscreen></iframe></div>
|
||||
</div>
|
||||
<div class="youtube-embed-card">
|
||||
<div class="youtube-embed"><iframe width="100%" height="220" src="https://vod.sooplive.co.kr/player/159299033" title="뉴걸의 첫 모캡방송! 춤 못 추면 댄스방송 하면 안 되나요?" frameborder="0" allowfullscreen></iframe></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:1.2rem;color:#888;">
|
||||
🎬 업로드 예정 콘텐츠 예시:<br>
|
||||
- 리타겟팅 예시 영상<br>
|
||||
- 로코코 장갑 활용 시범 영상<br>
|
||||
- 퍼포먼스 기반 뮤직비디오 촬영 사례<br>
|
||||
- 실시간 스트리밍 테스트 영상 등
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact -->
|
||||
<section id="contact" class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Contact</h2>
|
||||
<p>예약 문의 또는 협업 제안은 언제든지 이메일로 연락주세요.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<b>이메일</b>: minglestudio.mocap@gmail.com<br>
|
||||
<b>연락처</b>: 010-9288-9190<br>
|
||||
<b>주소</b>: (21330) 인천광역시 부평구 주부토로 236<br>
|
||||
<b>인천테크노밸리 A동 B105호</b><br>
|
||||
<div style="margin-top:1.2rem;">
|
||||
<b>오시는 길</b><br>
|
||||
- 인천 7호선 <b>갈산역</b> 하차 → 도보 약 7분 거리<br>
|
||||
- 건물 내 지하 주차 가능 (※ 2시간 무료)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section id="faq" class="section" style="background:#fff;">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>FAQ – 자주 묻는 질문</h2>
|
||||
</div>
|
||||
<ul class="faq-list">
|
||||
<li><div class="faq-q">Q1. 스튜디오 대관은 어떻게 예약하나요?</div><div class="faq-a">A. 이메일 문의 또는 예약 폼 작성 후 전달해주시면 됩니다.<br>📧 minglestudio.mocap@gmail.com</div></li>
|
||||
<li><div class="faq-q">Q2. 최소 대관 시간은 어떻게 되나요?</div><div class="faq-a">A. 최소 대관은 2시간부터 가능합니다.</div></li>
|
||||
<li><div class="faq-q">Q3. 대관은 얼마나 전에 예약해야 하나요?</div><div class="faq-a">A. 최소 3~4일 전에 연락주시면 원활하게 준비가 가능합니다.</div></li>
|
||||
<li><div class="faq-q">Q4. 현장 결제가 가능한가요?</div><div class="faq-a">A. 네, 가능합니다.</div></li>
|
||||
<li><div class="faq-q">Q5. 세금계산서 발행이 가능한가요?</div><div class="faq-a">A. 네, 사업자용 세금계산서 발행 가능합니다.</div></li>
|
||||
<li><div class="faq-q">Q6. 예약금 제도와 환불 규정이 있나요?</div><div class="faq-a">A. 예약 시 총 대여 금액의 20%를 선결제하셔야 예약이 확정됩니다.<br><br>아래는 예시 환불 규정입니다 (법적 관점에서도 일반적인 수준):<br><table class="table"><thead><tr><th>취소 시점</th><th>환불 비율</th></tr></thead><tbody><tr><td>이용일 5일 전까지</td><td>100% 환불</td></tr><tr><td>이용일 3~4일 전</td><td>50% 환불</td></tr><tr><td>이용일 2일 이내</td><td>환불 불가</td></tr></tbody></table></div></li>
|
||||
<li><div class="faq-q">Q7. 모션 캡쳐 데이터는 어떤 형식으로 제공되나요?</div><div class="faq-a">A. FBX, BHV, ANIM 포맷으로 제공되며, 문의 시 세부사항 안내해드립니다.</div></li>
|
||||
<li><div class="faq-q">Q8. 리타겟팅도 함께 제공되나요?</div><div class="faq-a">A. 기본 리타겟팅이 포함되어 있으며, 추가적인 클린업/후처리는 별도 견적 협의 후 제공됩니다.</div></li>
|
||||
<li><div class="faq-q">Q9. 실시간 미리보기나 스트리밍이 가능한가요?</div><div class="faq-a">A. 실시간 미리보기는 가능하며, 실시간 스트리밍은 지원 예정입니다.</div></li>
|
||||
<li><div class="faq-q">Q10. 장비 사용이 익숙하지 않아도 괜찮을까요?</div><div class="faq-a">A. 스튜디오에는 담당 인력이 배치되어 있어 장비 세팅 및 사용을 지원해드립니다.</div></li>
|
||||
<li><div class="faq-q">Q11. 얼굴 캡쳐나 음성 녹음도 가능한가요?</div><div class="faq-a">A. 가능합니다. 다만 예약 시 미리 요청해주셔야 하며, 별도 요금이 발생할 수 있습니다.</div></li>
|
||||
<li><div class="faq-q">Q12. 촬영한 데이터는 언제 받을 수 있나요?</div><div class="faq-a">A. 영업일 기준 1~2일 이내 전달드립니다.</div></li>
|
||||
<li><div class="faq-q">Q13. 녹화 시간에 제한이 있나요?</div><div class="faq-a">A. 녹화 시간 제한은 없으며, 대관 시간 내 자유롭게 녹화하실 수 있습니다.</div></li>
|
||||
<li><div class="faq-q">Q14. 추가 리타겟팅이나 수정 요청이 가능한가요?</div><div class="faq-a">A. 가능합니다. 다만 추가 비용이 발생할 수 있습니다.</div></li>
|
||||
<li><div class="faq-q">Q15. 탈의실이나 휴게 공간이 있나요?</div><div class="faq-a">A. 네, 탈의실과 간단한 휴게 공간이 마련되어 있습니다. 빵, 햄버거, 커피 등의 간단한 취식이 가능합니다.</div></li>
|
||||
<li><div class="faq-q">Q16. 몇 명까지 이용 가능한가요?</div><div class="faq-a">A. 촬영 인원 최대 4명, 대기 인원 포함 최대 10명까지 수용 가능합니다.</div></li>
|
||||
<li><div class="faq-q">Q17. 촬영 시 필요한 복장이나 준비물이 있나요?</div><div class="faq-a">A. 기본적으로 준비물은 없지만, 안경은 반사로 인해 캡쳐에 오류가 발생할 수 있어 렌즈 착용을 권장드립니다.</div></li>
|
||||
<li><div class="faq-q">Q18. 외부 팀이 장비만 사용할 수도 있나요?</div><div class="faq-a">A. 장비만 사용하는 경우에도 사전 협의가 필요합니다. 기술 지원 여부에 따라 사용 조건이 달라질 수 있으므로 문의 바랍니다.</div></li>
|
||||
<li><div class="faq-q">Q19. 주차는 가능한가요?</div><div class="faq-a">A. 네, 가능합니다.<br>기본 2시간 무료이며, 건물 내 시설(카페 등) 이용 시 추가 2시간, <b>최대 4시간 무료</b> 주차가 가능합니다.</div></li>
|
||||
<li><div class="faq-q">Q20. 동물이나 아동도 촬영이 가능한가요?</div><div class="faq-a">A. 안전 및 장비 보호를 위해 동물 및 아동 출연은 현재 불가합니다.</div></li>
|
||||
<li><div class="faq-q">Q21. 스튜디오 내부에서 자체 촬영을 해도 되나요?</div><div class="faq-a">A. 사전 문의 시 내부 촬영은 일시적으로 허용될 수 있습니다. 촬영 목적에 따라 협의가 필요합니다.</div></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="section" style="background:#222;color:#fff;padding:2.5rem 0 1.2rem;">
|
||||
<div class="container" style="text-align:center;">
|
||||
<div style="font-size:1.2rem;font-weight:700;letter-spacing:0.02em;">밍글 스튜디오 mingle studio</div>
|
||||
<div style="margin:0.7rem 0 0.2rem;color:#ff8800;font-weight:600;">섞임 속에서 피어나는 창조</div>
|
||||
<div style="color:#bbb;font-size:0.98rem;">© 2025 밍글 스튜디오. All rights reserved.</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
BIN
mingle logo.png
Normal file
BIN
mingle logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
BIN
mingle-website.zip
Normal file
BIN
mingle-website.zip
Normal file
Binary file not shown.
246
script.js
Normal file
246
script.js
Normal file
@ -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);
|
||||
}
|
||||
});
|
||||
675
styles.css
Normal file
675
styles.css
Normal file
@ -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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
|
||||
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;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user