mingle-website/services.html
2025-09-21 22:54:14 +09:00

788 lines
39 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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="icon" type="image/x-icon" href="/mingle-logo.ico">
<link rel="shortcut icon" href="/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/mingle-logo.webp">
<!-- Canonical URL -->
<link rel="canonical" href="https://minglestudio.co.kr/services.html">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO 메타 태그 -->
<meta name="description" content="밍글 스튜디오 서비스 소개 - OptiTrack 모션캡쳐 스튜디오 대관, 시간당 22만원, 전신/페이셜 캡쳐, 실시간 스트리밍 지원">
<meta name="keywords" content="모션캡쳐 대관, OptiTrack, 스튜디오 요금, 버튜버 방송, 실시간 스트리밍">
<meta name="author" content="밍글 스튜디오">
<!-- Open Graph -->
<meta property="og:title" content="서비스 소개 - 밍글 스튜디오">
<meta property="og:description" content="28대 OptiTrack 카메라로 전신/페이셜 모션캡처, 1인 150,000원, 2인 200,000원. 스트리밍글 서비스 2,000,000원으로 8시간 풀패키지 제공">
<meta property="og:url" content="https://minglestudio.co.kr/services.html">
<meta property="og:type" content="website">
<meta property="og:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="ko_KR">
<meta property="og:site_name" content="밍글 스튜디오">
<meta property="og:image:alt" content="밍글 스튜디오 - 모션캡처 서비스 요금안내">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="서비스 소개 - 밍글 스튜디오">
<meta name="twitter:description" content="28대 OptiTrack 카메라로 전신/페이셜 모션캡처, 1인 150,000원, 2인 200,000원. 스트리밍글 서비스 2,000,000원으로 8시간 풀패키지 제공">
<meta name="twitter:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta name="twitter:site" content="@mingle_studio">
<meta name="twitter:creator" content="@mingle_studio">
<!-- 폰트 -->
<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 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/services.css">
</head>
<body>
<!-- 헤더 -->
<div id="header-placeholder"></div>
<!-- 브레드크럼 -->
<nav class="breadcrumb">
<div class="container">
<ol class="breadcrumb-list">
<li class="breadcrumb-item">
<a href="index.html" class="breadcrumb-link breadcrumb-home">🏠 홈</a>
</li>
<li class="breadcrumb-item">
<span class="breadcrumb-current">서비스 안내</span>
</li>
</ol>
</div>
</nav>
<!-- 페이지 헤더 -->
<section class="page-header">
<div class="container">
<h1>Services</h1>
<p>최첨단 모션캡쳐 시설과 전문 서비스를 제공합니다</p>
</div>
</section>
<!-- 주요 서비스 소개 -->
<section class="section">
<div class="container">
<div class="section-header">
<h2>서비스 패키지</h2>
<p>용도와 규모에 맞는 최적의 모션캡처 서비스를 제공합니다</p>
</div>
<!-- 서비스 1: 모션캡처 서비스 -->
<div class="service-package">
<div class="package-header">
<span class="package-icon">🎯</span>
<h3>서비스 1: 모션캡처 서비스</h3>
<span class="package-badge">기본형</span>
</div>
<!-- 가격 카드들 -->
<div class="pricing-cards-wrapper">
<div class="pricing-cards">
<div class="pricing-card basic">
<div class="card-header">
<span class="person-icon">👤</span>
<h4>1인 이용</h4>
</div>
<div class="price-display">
<span class="price-amount">150,000원</span>
<span class="price-unit">/시간</span>
</div>
<div class="card-features">
<ul>
<li>개인 프로젝트 최적화</li>
<li>VTuber 방송 준비</li>
<li>1인 콘텐츠 제작</li>
</ul>
</div>
</div>
<div class="pricing-card team">
<div class="card-header">
<span class="person-icon">👥</span>
<h4>2인 이용</h4>
<span class="popular-badge">인기</span>
</div>
<div class="price-display">
<span class="price-amount">200,000원</span>
<span class="price-unit">/시간</span>
</div>
<div class="card-features">
<ul>
<li>합방 콘텐츠 제작</li>
<li>상호작용 연출</li>
<li>팀 프로젝트</li>
</ul>
</div>
</div>
<div class="pricing-card extended">
<div class="card-header">
<span class="person-icon">👨‍👩‍👧‍👦</span>
<h4>추가 인원</h4>
</div>
<div class="price-display">
<span class="price-amount">+100,000원</span>
<span class="price-unit">/명/시간</span>
</div>
<div class="card-features">
<ul>
<li>최대 4인까지</li>
<li>대규모 콘텐츠</li>
<li>그룹 프로젝트</li>
</ul>
</div>
</div>
</div>
<div class="service-info">
<div class="info-card">
<span class="info-icon">⏱️</span>
<p><strong>최소 이용시간:</strong> 2시간</p>
</div>
<div class="info-card">
<span class="info-icon">👥</span>
<p><strong>최대 동시 이용:</strong> 4인</p>
</div>
</div>
</div>
<!-- 기술 사양 (컴팩트) -->
<div class="tech-specs-compact">
<h5>제공 기술 및 서비스</h5>
<div class="specs-list">
<div class="spec-tag"><span>📹</span> OptiTrack 28대 카메라</div>
<div class="spec-tag"><span>🤖</span> 실시간 아바타 녹화</div>
<div class="spec-tag"><span>👤</span> 전신/페이셜 캡처</div>
<div class="spec-tag"><span>📊</span> 실시간 모니터링</div>
<div class="spec-tag"><span>👨‍💻</span> 전문 오퍼레이터</div>
<div class="spec-tag"><span>💾</span> 모션 데이터 제공</div>
</div>
</div>
<div class="service-note">
<p><strong>참고:</strong> 아바타 리타게팅 서비스는 기본 제공되지 않으며, 후속 작업 연계 시 별도 상담을 통해 제공합니다.</p>
</div>
</div>
<!-- 결합상품 -->
<div class="service-package">
<div class="package-header">
<span class="package-icon">🎬</span>
<h3>결합상품</h3>
<span class="package-badge">특화서비스</span>
</div>
<div class="combo-services">
<div class="combo-card">
<h4>뮤직비디오/숏폼 영상 실시간 촬영</h4>
<div class="combo-pricing">
<span class="price">모션캡처와 동일 요금</span>
</div>
<div class="combo-features">
<h5>추가 요구사항</h5>
<ul>
<li>기획서 사전 협의 필수</li>
<li>캐릭터/배경/프랍 사전 협의</li>
<li>액터 섭외 필요 시: 100,000원 (1명당 시간당)</li>
</ul>
<div class="portfolio-preview">
<button class="portfolio-btn" onclick="openPortfolioPopup()">
📽️ 포트폴리오 보기
</button>
</div>
</div>
</div>
<div class="combo-card">
<h4>원격 촬영</h4>
<div class="combo-pricing">
<span class="price">모션캡처와 동일 요금</span>
</div>
<div class="combo-features">
<h5>서비스 내용</h5>
<ul>
<li>원격 실시간 촬영 지원</li>
<li>온라인 디렉션 가능</li>
<li>실시간 스트리밍 송출</li>
</ul>
<h5>추가 요금</h5>
<ul>
<li>액터 섭외비: 100,000원 (1명당 시간당)</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 서비스 2: 스트리밍글 서비스 -->
<div class="service-package featured">
<div class="package-header">
<span class="package-icon">🌟</span>
<h3>서비스 2: 스트리밍글 서비스</h3>
<span class="package-badge featured">대표상품</span>
</div>
<div class="streaming-package">
<div class="package-overview">
<div class="package-price">
<span class="price-amount">2,000,000원</span>
<span class="price-unit">/ 2인 기준</span>
</div>
<div class="package-duration">
<h4>총 8시간 패키지</h4>
<p>대관 6시간 + 촬영 준비 2시간</p>
</div>
</div>
<div class="package-features">
<div class="feature-column">
<h5>포함 혜택</h5>
<ul>
<li>1인당 1벌 캐릭터 무료 세팅</li>
<li>기존 보유 배경 중 2개 무료 세팅</li>
<li>프랍 무료 세팅 (신규 프랍 최대 6개, 보유 프랍 무제한)</li>
<li>모션캡처 서비스</li>
<li>실시간 영상 촬영</li>
<li><strong>라이브 방송 서비스</strong></li>
</ul>
</div>
<div class="feature-column">
<h5>서비스 특징</h5>
<ul>
<li>대규모 프로젝트 지원</li>
<li>복합적 촬영 환경 제공</li>
<li>실시간 스트리밍 (스트리밍글 전용)</li>
<li>전문 스태프 풀 서비스</li>
<li>최대 4인까지 확장 가능</li>
</ul>
</div>
</div>
<div class="additional-pricing">
<p><strong>1인 추가시:</strong> +500,000원 (최대 4인)</p>
</div>
<div class="portfolio-preview">
<button class="portfolio-btn" onclick="openStreamingPortfolioPopup()">
🔴 라이브 방송 포트폴리오 보기
</button>
</div>
</div>
</div>
</div>
</section>
<!-- 추가 옵션 요금 -->
<section class="section bg-light">
<div class="container">
<div class="section-header">
<h2>추가 옵션 요금</h2>
<p>모든 서비스 패키지에 공통으로 적용되는 추가 옵션입니다</p>
</div>
<div class="options-grid">
<!-- 캐릭터 세팅 -->
<div class="option-card">
<div class="option-header">
<span class="option-icon">🎨</span>
<h3>캐릭터 세팅</h3>
</div>
<div class="option-pricing">
<div class="price">
<span class="price-amount">50,000원~</span>
<span class="price-unit">/ 1인 1벌</span>
</div>
<p class="option-description">신규 캐릭터 세팅 작업</p>
</div>
</div>
<!-- 배경 세팅 -->
<div class="option-card">
<div class="option-header">
<span class="option-icon">🏞️</span>
<h3>배경 세팅</h3>
</div>
<div class="option-content">
<div class="option-item">
<h4>기존 보유 배경 사용</h4>
<div class="price">
<span class="price-amount">30,000원~</span>
<span class="price-unit">/ 1개</span>
</div>
<p class="option-note">세팅비만 부과</p>
</div>
<div class="option-item">
<h4>신규 배경 제작</h4>
<div class="price">
<span class="price-amount">100,000원~</span>
<span class="price-unit">/ 1개</span>
</div>
<p class="option-note">세팅비 + 제작비/구입비 별도<br>
밍글스튜디오 또는 의뢰자 귀속 선택 가능합니다</p>
</div>
</div>
</div>
<!-- 프랍 세팅 -->
<div class="option-card">
<div class="option-header">
<span class="option-icon">🎪</span>
<h3>프랍 세팅</h3>
</div>
<div class="option-pricing">
<div class="price">
<span class="price-amount">20,000원</span>
<span class="price-unit">/ 1개</span>
</div>
<p class="option-description">프랍 세팅 작업<br>(스트리밍글 서비스: 신규 프랍 최대 6개, 보유 프랍 무제한 무료 제공)</p>
</div>
</div>
</div>
<!-- 이용 안내사항 -->
<div class="usage-notes">
<h3>이용 안내사항</h3>
<div class="notes-grid">
<div class="note-item">
<h4>운영 시간</h4>
<p>기본 운영 시간: 10:00 ~ 22:00<br>
야간 이용 시 요금 1.5배 적용</p>
</div>
<div class="note-item">
<h4>최소 이용 시간</h4>
<p>모든 서비스 최소 2시간<br>
(스트리밍글 서비스 제외)</p>
</div>
<div class="note-item">
<h4>사전 준비 사항</h4>
<p>뮤직비디오/숏폼 촬영 시<br>
기획서 및 준비물 사전 협의 필수</p>
</div>
<div class="note-item">
<h4>후속 서비스</h4>
<p>아바타 리타게팅은 후속 작업 연계 시에만<br>
제공됩니다 (별도 상담)</p>
</div>
</div>
</div>
</div>
</section>
<!-- 서비스 이용 안내 -->
<section class="section bg-light">
<div class="container">
<div class="section-header">
<h2>서비스 이용 안내</h2>
</div>
<!-- 스튜디오 대관 절차 -->
<div class="card">
<h3>스튜디오 대관 절차</h3>
<div class="process-flow">
<div class="process-step">
<div class="step-number">1</div>
<div class="step-content">
<h4>이메일 문의</h4>
<p>예약 양식을 작성하여 문의</p>
</div>
</div>
<div class="process-arrow"></div>
<div class="process-step">
<div class="step-number">2</div>
<div class="step-content">
<h4>담당자 확인 및 협의</h4>
<p>세부사항 조율</p>
</div>
</div>
<div class="process-arrow"></div>
<div class="process-step">
<div class="step-number">3</div>
<div class="step-content">
<h4>전액 결제</h4>
<p>결제 완료</p>
</div>
</div>
<div class="process-arrow"></div>
<div class="process-step">
<div class="step-number">4</div>
<div class="step-content">
<h4>예약 확정</h4>
<p>최종 예약 완료</p>
</div>
</div>
</div>
<div class="booking-buttons">
<button id="showEmailForm" class="btn btn-primary">
<span>📧</span> 이메일 문의하기
</button>
<a href="https://m.booking.naver.com/booking/10/bizes/1468174/items/6949481" target="_blank" class="btn btn-secondary">
<span>📅</span> 네이버 예약 바로가기
</a>
</div>
<p class="booking-note">※ 네이버 플레이스를 통해 실시간 일정 확인 및 예약이 가능합니다</p>
<!-- 이메일 양식 -->
<div id="emailForm" class="email-form" style="display:none;">
<h4>이메일 문의 양식</h4>
<p>아래 양식을 복사하여 이메일로 문의해주세요:</p>
<div class="email-template">
<div class="email-field"><strong>제목:</strong> [스튜디오 대관 문의]</div>
<div class="email-field"><strong>받는 사람:</strong> minglestudio.mocap@gmail.com</div>
<div class="form-section">
<h5>1. 성함 및 소속</h5>
<p class="form-help">(개인의 경우 성함만, 기업인 경우 이용자분 성함과 소속을 함께 적어주세요)</p>
<div class="form-placeholder">[여기에 작성해주세요]</div>
</div>
<div class="form-section">
<h5>2. 연락처</h5>
<p class="form-help">(전화번호, 이메일, 디스코드 중 택1)</p>
<div class="form-placeholder">[여기에 작성해주세요]</div>
</div>
<div class="form-section">
<h5>3. 이용 인원</h5>
<p class="form-help">(1~2인 권장, 최대 4인까지 가능)</p>
<div class="form-placeholder">□ 1명 □ 2명 □ 3명 □ 4명</div>
</div>
<div class="form-section">
<h5>4. 스튜디오 사용 용도</h5>
<div class="form-placeholder">□ 녹화 □ 기타: [여기에 작성해주세요]</div>
</div>
<div class="form-section">
<h5>5. 희망 대관 날짜</h5>
<p class="form-help">※ 최소 2주 전 예약을 권장합니다</p>
<div class="form-placeholder">[여기에 작성해주세요]</div>
</div>
<div class="form-section">
<h5>6. 희망 이용 시간</h5>
<p class="form-help">※ 응답 예시) 오전 10시~ 오후 3시(5시간)</p>
<p class="form-help">※ 새벽 대관(밤 10시~익일 8시) 이용 시 내부 규정에 따른 별도 요율이 적용됩니다</p>
<div class="form-placeholder">[여기에 작성해주세요]</div>
</div>
</div>
<div class="email-send">
<a href="mailto:minglestudio.mocap@gmail.com?subject=[스튜디오 예약 문의] 밍글 스튜디오&body=안녕하세요. 밍글 스튜디오 대관 예약 문의 드립니다.%0A%0A■ 기본 정보%0A- 이용 예정일: (예: 2024년 12월 25일)%0A- 이용 시간: (예: 오후 2시 ~ 4시, 2시간)%0A- 참여 인원: 명%0A- 연락처: %0A- 이메일: %0A%0A■ 촬영 정보%0A- 촬영 목적: (예: 버튜버 방송, 게임 제작, 영상 콘텐츠 등)%0A- 예상 촬영 내용: %0A- 필요한 장비: (전신 모션캡쳐 / 페이셜 캡쳐 / 기타)%0A%0A■ 추가 요청사항%0A- 특별한 요구사항: %0A- 문의사항: %0A%0A■ 참고사항%0A- 최소 대관: 2시간 (220,000원, VAT 포함)%0A- 연장: 1시간당 110,000원%0A- 결제방법: 계좌이체 또는 현금 (카드결제 불가)%0A- 현금영수증/세금계산서 발행 가능%0A%0A빠른 시일 내에 답변 드리겠습니다.%0A감사합니다." class="btn btn-primary">
📧 이메일 바로 보내기
</a>
</div>
</div>
</div>
<!-- 예약 및 취소 규정 -->
<div class="grid grid-2">
<div class="card">
<h3>예약 안내</h3>
<ul class="info-list">
<li>스튜디오 예약은 이용 희망일로부터 최소 2주 전에 신청하시는 것을 권장합니다.</li>
<li>예약 확정 후 고객의 사정으로 인한 예약 취소 시 일정 기준에 따른 위약금이 발생합니다.</li>
</ul>
</div>
<div class="card">
<h3>방문 안내</h3>
<ul class="info-list">
<li>본 촬영 전 모션캡쳐 수트 착용 등의 준비시간이 소요되므로 촬영예정 시간 최소 30분 전에 방문 부탁드립니다. (준비시간은 이용시간에 포함되지 않습니다.)</li>
<li>안경, 귀걸이 등 반사가 잘 되는 재질의 악세사리는 촬영 시 가급적 착용을 자제하여 주시기 바랍니다.</li>
</ul>
</div>
</div>
<!-- 취소 환불 규정 -->
<div class="card">
<h3>취소 환불 규정</h3>
<div class="table-responsive">
<table class="refund-table">
<thead>
<tr>
<th>취소 시점</th>
<th>환불 비율</th>
</tr>
</thead>
<tbody>
<tr>
<td>예약일로부터 7일 전</td>
<td class="refund-100">100% 환불</td>
</tr>
<tr>
<td>예약일로부터 3일 전</td>
<td class="refund-70">70% 환불</td>
</tr>
<tr>
<td>예약일로부터 1일 전</td>
<td class="refund-50">50% 환불</td>
</tr>
<tr>
<td>당일 취소</td>
<td class="refund-0">환불 불가</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- 장비 및 시설 -->
<section class="section">
<div class="container">
<div class="section-header">
<h2>장비 및 시설</h2>
<p>업계 최고 수준의 모션캡쳐 장비와 시설을 갖추고 있습니다</p>
</div>
<div class="equipment-grid">
<div class="equipment-card">
<div class="equipment-icon">📹</div>
<h3>OptiTrack 카메라 시스템</h3>
<p>28대의 고해상도 광학식 카메라로 정밀한 모션 트래킹</p>
</div>
<div class="equipment-card">
<div class="equipment-icon">🥽</div>
<h3>모션캡쳐 수트</h3>
<p>Rokoko Glove 포함 전신 모션캡쳐 장비 완비</p>
</div>
<div class="equipment-card">
<div class="equipment-icon">💻</div>
<h3>실시간 모니터링</h3>
<p>실시간 모션 데이터 확인 및 즉시 피드백</p>
</div>
<div class="equipment-card">
<div class="equipment-icon">📊</div>
<h3>데이터 출력</h3>
<p>FBX, ANIM 포맷으로 모션 데이터 파일 제공</p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-section">
<div class="container text-center">
<h2>지금 바로 예약하세요</h2>
<p>최고의 모션캡쳐 경험을 제공해드립니다</p>
<div class="cta-buttons">
<a href="contact.html" class="btn btn-primary btn-lg">예약 문의하기</a>
<a href="gallery.html" class="btn btn-outline btn-lg">스튜디오 둘러보기</a>
</div>
</div>
</section>
<!-- 푸터 -->
<div id="footer-placeholder"></div>
<!-- 백업 푸터 (JavaScript 로드 실패 시) -->
<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.15rem;font-weight:700;letter-spacing:0.02em;">회사명: 밍글 스튜디오 | 대표: 김희진</div>
<div style="margin:0.3rem 0 0.2rem;">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 A동 B105호</div>
<div style="margin:0.3rem 0 0.2rem;">전화: 010-9288-9190 | 이메일: minglestudio.mocap@gmail.com</div>
<div style="margin:0.3rem 0 0.2rem;">사업자등록번호: 208-12-73755</div>
<div style="color:#bbb;font-size:0.98rem;margin-top:0.7rem;">© 2025 밍글 스튜디오. All rights reserved.</div>
</div>
</footer>
<!-- 포트폴리오 팝업 -->
<div id="portfolioPopup" class="portfolio-popup">
<div class="popup-overlay" onclick="closePortfolioPopup()"></div>
<div class="popup-content">
<div class="popup-header">
<h3>뮤직비디오/숏폼 포트폴리오</h3>
<button class="popup-close" onclick="closePortfolioPopup()">×</button>
</div>
<div class="popup-body">
<div class="portfolio-section">
<h4>🎵 뮤직비디오 대표작</h4>
<div class="portfolio-grid">
<div class="portfolio-item">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/jQTi8adbvaM"
title="돌림판"
allowfullscreen></iframe>
</div>
<p>머쉬베놈 - 돌림판 (CROA COVER)</p>
</div>
<div class="portfolio-item">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/nH7IdgqhugQ"
title="내 이름 맑음"
allowfullscreen></iframe>
</div>
<p>QWER - 내 이름 맑음 (CROA COVER)</p>
</div>
</div>
</div>
<div class="portfolio-section">
<h4>🎬 숏폼 챌린지</h4>
<div class="portfolio-grid shorts-grid">
<div class="portfolio-item">
<div class="video-wrapper shorts-wrapper">
<iframe src="https://www.youtube.com/embed/ZWftEFNlvVc"
title="일본 유행 챌린지"
allowfullscreen></iframe>
</div>
<p>일본에서 유행하는 챌린지</p>
</div>
<div class="portfolio-item">
<div class="video-wrapper shorts-wrapper">
<iframe src="https://www.youtube.com/embed/xZS1e465wjc"
title="Trouble 챌린지"
allowfullscreen></iframe>
</div>
<p>Trouble 챌린지</p>
</div>
<div class="portfolio-item">
<div class="video-wrapper shorts-wrapper">
<iframe src="https://www.youtube.com/embed/X3a_4GWU3V8"
title="그르르 챌린지"
allowfullscreen></iframe>
</div>
<p>그르르 챌린지</p>
</div>
</div>
</div>
</div>
<div class="popup-footer">
<a href="portfolio.html" class="btn btn-primary">전체 포트폴리오 보기</a>
</div>
</div>
</div>
<!-- 스트리밍 포트폴리오 팝업 -->
<div id="streamingPortfolioPopup" class="portfolio-popup">
<div class="popup-overlay" onclick="closeStreamingPortfolioPopup()"></div>
<div class="popup-content">
<div class="popup-header">
<h3>스트리밍글 서비스 포트폴리오</h3>
<button class="popup-close" onclick="closeStreamingPortfolioPopup()">×</button>
</div>
<div class="popup-body">
<div class="portfolio-section">
<h4>🔴 실시간 모션캡처 방송</h4>
<div class="portfolio-grid streaming-grid">
<div class="portfolio-item">
<div class="video-wrapper">
<iframe src="https://vod.sooplive.co.kr/player/159808721"
title="미르 첫 모캡 방송"
allowfullscreen></iframe>
</div>
<div class="streaming-info">
<p><strong>미르 첫 모캡 방송</strong></p>
<div class="stream-details">
<span class="platform">SOOP</span>
<span class="streamer">미르</span>
</div>
</div>
</div>
<div class="portfolio-item">
<div class="video-wrapper">
<iframe src="https://vod.sooplive.co.kr/player/159683673"
title="춤짱자매즈 모캡 합방"
allowfullscreen></iframe>
</div>
<div class="streaming-info">
<p><strong>춤짱자매즈 모캡 합방</strong></p>
<div class="stream-details">
<span class="platform">SOOP</span>
<span class="streamer">춤짱자매즈 × 호발</span>
</div>
</div>
</div>
<div class="portfolio-item">
<div class="video-wrapper">
<iframe src="https://vod.sooplive.co.kr/player/159205533"
title="크로아 링피트 치요X마늘 3D 모션캡쳐 합방"
allowfullscreen></iframe>
</div>
<div class="streaming-info">
<p><strong>[크로아] 링피트 치요X마늘 3D 모션캡쳐 합방</strong></p>
<div class="stream-details">
<span class="platform">SOOP</span>
<span class="streamer">치요 & 마늘</span>
</div>
</div>
</div>
<div class="portfolio-item">
<div class="video-wrapper">
<iframe src="https://vod.sooplive.co.kr/player/169085307"
title="크로아 링피트 치요X마늘 3D 모션캡쳐 합방"
allowfullscreen></iframe>
</div>
<div class="streaming-info">
<p><strong>[크로아] 링피트 치요X마늘 3D 모션캡쳐 합방</strong></p>
<div class="stream-details">
<span class="platform">SOOP</span>
<span class="streamer">치요 & 마늘</span>
</div>
</div>
</div>
</div>
</div>
<div class="streaming-features">
<h4>✨ 스트리밍글 서비스 특징</h4>
<div class="features-grid">
<div class="feature-item">
<span class="feature-icon">🎥</span>
<p>실시간 모션캡처 스트리밍</p>
</div>
<div class="feature-item">
<span class="feature-icon">👥</span>
<p>최대 4인 동시 방송</p>
</div>
<div class="feature-item">
<span class="feature-icon"></span>
<p>8시간 풀 패키지</p>
</div>
<div class="feature-item">
<span class="feature-icon">🎭</span>
<p>캐릭터 & 배경 세팅</p>
</div>
</div>
</div>
</div>
<div class="popup-footer">
<a href="portfolio.html#individual" class="btn btn-primary">전체 포트폴리오 보기</a>
</div>
</div>
</div>
<!-- JavaScript -->
<script src="js/common.js"></script>
<script src="js/services.js"></script>
</body>
</html>