mingle-website/ja/services.html
68893236+KINDNICK@users.noreply.github.com 30cd06e9d6 feat: setup i18n build script and SEO optimizations
2026-03-01 14:56:52 +09:00

1067 lines
68 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="ja"><head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PPTNN6WD');</script>
<!-- End Google Tag Manager -->
<!-- Google tag (gtag.js) -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-R0PBYHVQBS"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-R0PBYHVQBS');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サービス紹介 - Mingle Studio</title>
<!-- 파비콘 -->
<link rel="icon" type="image/x-icon" href="/images/logo/mingle-logo.ico">
<link rel="shortcut icon" href="/images/logo/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/images/logo/mingle-logo.webp">
<!-- Canonical URL -->
<link rel="canonical" href="https://minglestudio.co.kr/ja/services.html">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO 메타 태그 -->
<meta name="description" content="Mingle Studioのサービス紹介 - OptiTrackモーションキャプチャースタジオレンタル、2名$150〜/時間、全身/フェイシャルキャプチャー、モーション録画専門">
<meta name="keywords" content="모션캡쳐 대관, OptiTrack, 스튜디오 요금, 모션 녹화, 모션캡쳐 스튜디오">
<meta name="author" content="밍글 스튜디오">
<!-- Open Graph -->
<meta property="og:title" content="サービス紹介 - Mingle Studio">
<meta property="og:description" content="OptiTrackモーションキャプチャースタジオレンタルサービス。全身/フェイシャルキャプチャー専門">
<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/images/logo/mingle-OG.png">
<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="30대 OptiTrack 카메라로 전신/페이셜 모션캡처, 2인 200,000원~/시간. 스트리밍글 서비스 4시간 1,400,000원 / 6시간 2,000,000원 풀패키지 제공">
<meta name="twitter:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<meta name="twitter:site" content="@mingle_studio">
<meta name="twitter:creator" content="@mingle_studio">
<!-- 폰트 -->
<link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.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">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/services.html">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/services.html">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/services.html">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/services.html">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/services.html">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PPTNN6WD"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<a href="#main-content" class="skip-to-content" data-i18n="common.skipToContent">本文へスキップ</a>
<!-- 헤더 -->
<div id="header-placeholder">
<!-- 공통 헤더 컴포넌트 -->
<nav class="navbar" aria-label="메인 내비게이션">
<div class="nav-container">
<div class="nav-logo">
<a href="/ja/">
<img src="/images/logo/mingle-logo.webp" alt="밍글 스튜디오 로고">
<span data-i18n="header.studioName">Mingle Studio</span>
</a>
</div>
<ul id="nav-menu" class="nav-menu">
<li><a href="/ja/about" class="nav-link" data-i18n="header.nav.about">About</a></li>
<li><a href="/ja/services" class="nav-link" data-i18n="header.nav.services">Services</a></li>
<li><a href="/ja/portfolio" class="nav-link" data-i18n="header.nav.portfolio">Portfolio</a></li>
<li><a href="/ja/gallery" class="nav-link" data-i18n="header.nav.gallery">Gallery</a></li>
<li><a href="/ja/contact" class="nav-link" data-i18n="header.nav.contact">Contact</a></li>
<li><a href="/ja/qna" class="nav-link" data-i18n="header.nav.qna">Q&amp;A</a></li>
</ul>
<div class="nav-actions">
<div class="lang-switcher">
<button class="lang-btn" aria-label="言語選択" data-i18n-aria="header.langSelect">
<span class="lang-current">KO</span>
<svg class="lang-chevron" viewBox="0 0 10 6" width="10" height="6" aria-hidden="true">
<path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<ul class="lang-dropdown">
<li><button data-lang="ko">🇰🇷 한국어</button></li>
<li><button data-lang="en">🇺🇸 English</button></li>
<li><button data-lang="zh">🇨🇳 中文</button></li>
<li><button data-lang="ja">🇯🇵 日本語</button></li>
</ul>
</div>
<button class="theme-toggle" id="themeToggle" aria-label="다크 모드 전환" title="다크/라이트 모드 전환">
<div class="theme-toggle-thumb">
<svg class="theme-toggle-icon theme-toggle-icon--sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
<svg class="theme-toggle-icon theme-toggle-icon--moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</div>
</button>
</div>
<button class="hamburger" aria-label="메뉴 열기" aria-expanded="false" aria-controls="nav-menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
</div>
<main id="main-content">
<!-- 페이지 헤더 -->
<section class="page-header">
<div class="container">
<h1 data-i18n="services.pageHeader.title">Services</h1>
<p data-i18n="services.pageHeader.desc">最先端モーションキャプチャー施設と専門サービスを提供します</p>
</div>
</section>
<!-- 주요 서비스 소개 -->
<section class="section">
<div class="container">
<div class="section-header">
<h2 data-i18n="services.packages.title">サービスパッケージ</h2>
<p data-i18n="services.packages.desc">用途と規模に合った最適なモーションキャプチャー録画サービスを提供します</p>
<p class="vat-notice-inline" data-i18n="services.packages.vatNotice">※ 全ての料金は消費税別です</p>
</div>
<!-- 서비스 1: 모션캡처 녹화 서비스 -->
<div class="service-package">
<div class="package-header">
<span class="package-icon"><i class="fa-solid fa-bullseye" aria-hidden="true"></i></span>
<h3 data-i18n="services.service1.title">サービス1モーションキャプチャー録画サービス</h3>
<span class="package-badge" data-i18n="services.service1.badge">ベーシック</span>
</div>
<!-- 가격 카드들 -->
<div class="pricing-cards-wrapper">
<div class="pricing-cards stagger-children">
<div class="pricing-card team reveal" data-reveal="up">
<div class="card-header">
<span class="person-icon"><i class="fa-solid fa-user-group" aria-hidden="true"></i></span>
<h4 data-i18n="services.service1.team">2名利用</h4>
<span class="popular-badge" data-i18n="services.service1.teamPopular">人気</span>
</div>
<div class="price-display">
<span class="price-amount" data-i18n="services.service1.teamPrice">$150</span>
<span class="price-unit" data-i18n="services.service1.teamUnit">/時間</span>
</div>
<div class="card-features">
<ul>
<li data-i18n="services.service1.teamFeature1">2名同時モーション録画</li>
<li data-i18n="services.service1.teamFeature2">キャラクター間インタラクション収録</li>
<li data-i18n="services.service1.teamFeature3">チームプロジェクト協業</li>
</ul>
</div>
</div>
<div class="pricing-card extended reveal" data-reveal="up">
<div class="card-header">
<span class="person-icon"><i class="fa-solid fa-people-group" aria-hidden="true"></i></span>
<h4 data-i18n="services.service1.additional">追加人数</h4>
</div>
<div class="price-display">
<span class="price-amount" data-i18n="services.service1.additionalPrice">+$75</span>
<span class="price-unit" data-i18n="services.service1.additionalUnit">/名/時間</span>
</div>
<div class="card-features">
<ul>
<li data-i18n="services.service1.additionalFeature1">最大5名同時録画</li>
<li data-i18n="services.service1.additionalFeature2">多人数モーションキャプチャー</li>
<li data-i18n="services.service1.additionalFeature3">グループ振付・演技収録</li>
</ul>
</div>
</div>
</div>
<div class="service-info">
<div class="info-card">
<span class="info-icon"><i class="fa-solid fa-users" aria-hidden="true"></i></span>
<p data-i18n-html="services.service1.minPerson">最小利用人数2名</p>
</div>
<div class="info-card">
<span class="info-icon"><i class="fa-solid fa-clock" aria-hidden="true"></i></span>
<p data-i18n-html="services.service1.minTime">最小利用時間2時間</p>
</div>
<div class="info-card">
<span class="info-icon"><i class="fa-solid fa-users" aria-hidden="true"></i></span>
<p data-i18n-html="services.service1.maxPerson">最大同時利用5名</p>
</div>
</div>
</div>
<!-- 기술 사양 (컴팩트) -->
<div class="tech-specs-compact">
<h5 data-i18n="services.service1.techTitle">提供技術およびサービス</h5>
<div class="specs-list">
<div class="spec-tag"><span><i class="fa-solid fa-video" aria-hidden="true"></i></span> <span data-i18n="services.service1.tech1">OptiTrack 30台カメラ</span></div>
<div class="spec-tag"><span><i class="fa-solid fa-robot" aria-hidden="true"></i></span> <span data-i18n="services.service1.tech2">リアルタイムアバター録画</span></div>
<div class="spec-tag"><span><i class="fa-solid fa-user" aria-hidden="true"></i></span> <span data-i18n="services.service1.tech3">全身/フェイシャルキャプチャー</span></div>
<div class="spec-tag"><span><i class="fa-solid fa-chart-bar" aria-hidden="true"></i></span> <span data-i18n="services.service1.tech4">リアルタイムモニタリング</span></div>
<div class="spec-tag"><span><i class="fa-solid fa-user-gear" aria-hidden="true"></i></span> <span data-i18n="services.service1.tech5">専門オペレーター</span></div>
<div class="spec-tag"><span><i class="fa-solid fa-floppy-disk" aria-hidden="true"></i></span> <span data-i18n="services.service1.tech6">モーションデータ提供</span></div>
</div>
</div>
<div class="service-note">
<p data-i18n-html="services.service1.note">アバターリターゲティングサービスは基本提供に含まれておらず、後続作業連携時に別途ご相談にて提供いたします。</p>
</div>
</div>
<!-- 결합상품 -->
<div class="service-package">
<div class="package-header">
<span class="package-icon"><i class="fa-solid fa-clapperboard" aria-hidden="true"></i></span>
<h3 data-i18n="services.combo.title">セットプラン</h3>
<span class="package-badge" data-i18n="services.combo.badge">特化サービス</span>
</div>
<div class="combo-services">
<div class="combo-card">
<h4 data-i18n="services.combo.mvTitle">ミュージックビデオ/ショートフォーム映像リアルタイム撮影</h4>
<div class="combo-pricing">
<span class="price" data-i18n="services.combo.mvPrice">モーションキャプチャーと同一料金</span>
</div>
<div class="combo-features">
<h5 data-i18n="services.combo.mvReqTitle">追加要件</h5>
<ul>
<li data-i18n="services.combo.mvReq1">企画書の事前協議必須</li>
<li data-i18n="services.combo.mvReq2">キャラクター/背景/プロップの事前協議</li>
<li data-i18n="services.combo.mvReq3">アクター手配が必要な場合:$751名あたり1時間あたり</li>
</ul>
<div class="portfolio-preview">
<button class="portfolio-btn" onclick="openPortfolioPopup()">
<i class="fa-solid fa-film" aria-hidden="true"></i> <span data-i18n="services.combo.mvPortfolio">ポートフォリオを見る</span>
</button>
</div>
</div>
</div>
<div class="combo-card">
<h4 data-i18n="services.combo.remoteTitle">リモート撮影</h4>
<div class="combo-pricing">
<span class="price" data-i18n="services.combo.remotePrice">モーションキャプチャーと同一料金</span>
</div>
<div class="combo-features">
<h5 data-i18n="services.combo.remoteServiceTitle">サービス内容</h5>
<ul>
<li data-i18n="services.combo.remoteService1">リモートリアルタイム撮影対応</li>
<li data-i18n="services.combo.remoteService2">オンラインディレクション可能</li>
<li data-i18n="services.combo.remoteService3">リアルタイムストリーミング配信</li>
</ul>
<h5 data-i18n="services.combo.remoteExtraTitle">追加料金</h5>
<ul>
<li data-i18n="services.combo.remoteExtra1">アクター手配費:$751名あたり1時間あたり</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 서비스 2: 스트리밍글 서비스 -->
<div class="service-package featured">
<div class="package-header">
<span class="package-icon"><i class="fa-solid fa-star" aria-hidden="true"></i></span>
<h3 data-i18n="services.service2.title">サービス2ストリーミングルサービス</h3>
<span class="package-badge featured" data-i18n="services.service2.badge">代表サービス</span>
</div>
<!-- 스트리밍글 패키지 선택 -->
<div class="pricing-cards-wrapper">
<div class="pricing-cards stagger-children">
<div class="pricing-card team reveal" data-reveal="up">
<div class="card-header">
<span class="person-icon"><i class="fa-solid fa-clock" aria-hidden="true"></i></span>
<h4 data-i18n="services.service2.pkg4h">4時間パッケージ</h4>
<span class="popular-badge" data-i18n="services.service2.pkg4hBadge">NEW</span>
</div>
<div class="price-display">
<span class="price-amount" data-i18n="services.service2.pkg4hPrice">$1,100</span>
<span class="price-unit" data-i18n="services.service2.pkg4hUnit">/ 1〜5名利用</span>
</div>
<div class="card-features">
<ul>
<li data-i18n="services.service2.pkg4hFeature1">合計4時間利用</li>
<li data-i18n="services.service2.pkg4hFeature2">レンタル2時間 + 撮影準備2時間</li>
<li data-i18n="services.service2.pkg4hFeature3">6時間パッケージと同じ特典</li>
</ul>
</div>
</div>
<div class="pricing-card extended reveal" data-reveal="up">
<div class="card-header">
<span class="person-icon"><i class="fa-solid fa-clock" aria-hidden="true"></i></span>
<h4 data-i18n="services.service2.pkg6h">6時間パッケージ</h4>
</div>
<div class="price-display">
<span class="price-amount" data-i18n="services.service2.pkg6hPrice">$1,500</span>
<span class="price-unit" data-i18n="services.service2.pkg6hUnit">/ 1〜5名利用</span>
</div>
<div class="card-features">
<ul>
<li data-i18n="services.service2.pkg6hFeature1">合計6時間利用</li>
<li data-i18n="services.service2.pkg6hFeature2">レンタル4時間 + 撮影準備2時間</li>
<li data-i18n="services.service2.pkg6hFeature3">大規模プロジェクトに最適</li>
</ul>
</div>
</div>
</div>
</div>
<div class="streaming-package">
<p class="streaming-common-label"><i class="fa-solid fa-circle-info" aria-hidden="true"></i> <span data-i18n="services.service2.commonLabel">以下の特典は4時間・6時間パッケージ共通です</span></p>
<div class="package-features">
<div class="feature-column">
<h5 data-i18n="services.service2.benefitsTitle">共通特典</h5>
<ul>
<li data-i18n="services.service2.benefit1">1名につきキャラクター1体の無料セッティング</li>
<li data-i18n="services.service2.benefit2">既存保有背景から2つ無料セッティング</li>
<li data-i18n="services.service2.benefit3">プロップ無料セッティング新規プロップ最大6個、保有プロップ無制限</li>
<li data-i18n="services.service2.benefit4">モーションキャプチャー録画サービス</li>
<li data-i18n="services.service2.benefit5">リアルタイム映像撮影</li>
<li data-i18n="services.service2.benefit6">ライブ配信サービス</li>
</ul>
</div>
<div class="feature-column">
<h5 data-i18n="services.service2.featuresTitle">サービスの特徴</h5>
<ul>
<li data-i18n="services.service2.feature1">大規模プロジェクト対応</li>
<li data-i18n="services.service2.feature2">複合的な撮影環境の提供</li>
<li data-i18n="services.service2.feature3">リアルタイムストリーミング(ストリーミングル専用)</li>
<li data-i18n="services.service2.feature4">専門スタッフフルサービス</li>
<li data-i18n="services.service2.feature5">1〜5名自由に選択可能</li>
</ul>
</div>
</div>
<div class="portfolio-preview">
<button class="portfolio-btn" onclick="openStreamingPortfolioPopup()">
<i class="fa-solid fa-circle" style="color: #ff0000" aria-hidden="true"></i> <span data-i18n="services.service2.livePortfolio">ライブ配信ポートフォリオを見る</span>
</button>
</div>
</div>
</div>
<!-- 서비스 3: 뮤직비디오 제작 서비스 -->
<div class="service-package mv-production">
<div class="package-header">
<span class="package-icon"><i class="fa-solid fa-clapperboard" aria-hidden="true"></i></span>
<h3 data-i18n="services.service3.title">サービス3ミュージックビデオ制作サービス</h3>
<span class="package-badge" data-i18n="services.service3.badge">プレミアム</span>
</div>
<div class="mv-intro">
<p data-i18n="services.service3.intro">企画から納品まで、プロフェッショナルなミュージックビデオ制作の全工程をサポートします。</p>
<div class="mv-price-summary">
<span class="price-range" data-i18n="services.service3.priceRange">総予想費用:$1,500〜$3,000</span>
<span class="price-note" data-i18n="services.service3.priceNote1">※ 上記費用は概算であり、プロジェクトの規模や要件により見積もりが変更される場合があります。</span>
<span class="price-note" data-i18n="services.service3.priceNote2">※ 背景制作の範囲、ストーリーボード作家費用、アバター/プロップの数、演出の難易度により変動します。</span>
</div>
</div>
<!-- 제작 프로세스 -->
<div class="mv-process">
<h4 data-i18n="services.service3.processTitle">制作プロセス7ステップ</h4>
<div class="process-steps">
<div class="mv-step">
<div class="step-icon">1</div>
<div class="step-details">
<h5 data-i18n="services.service3.step1Title">企画相談(無料)</h5>
<p data-i18n="services.service3.step1Desc">ミュージックビデオ制作の開始段階として、コンセプトと雰囲気を整理します。</p>
<p class="detail-note" data-i18n="services.service3.step1Note">※ 方向性が明確であるほど、その後の制作がスムーズに進みます。</p>
</div>
</div>
<div class="mv-step">
<div class="step-icon">2</div>
<div class="step-details">
<h5 data-i18n="services.service3.step2Title">背景制作</h5>
<p data-i18n="services.service3.step2Desc">著作権の帰属先に応じてオプションを選択できます。</p>
<div class="pricing-options">
<div class="pricing-option">
<span class="option-type" data-i18n="services.service3.step2Opt1Type">保有背景の使用</span>
<span class="option-price" data-i18n="services.service3.step2Opt1Price">$25/個</span>
<span class="option-note" data-i18n="services.service3.step2Opt1Note">著作権:会社帰属</span>
</div>
<div class="pricing-option">
<span class="option-type" data-i18n="services.service3.step2Opt2Type">新規制作(会社帰属)</span>
<span class="option-price" data-i18n="services.service3.step2Opt2Price">$80/個</span>
<span class="option-note" data-i18n="services.service3.step2Opt2Note">著作権:会社帰属(大型または特殊背景は制限される場合があります)</span>
</div>
<div class="pricing-option">
<span class="option-type" data-i18n="services.service3.step2Opt3Type">新規制作(クライアント帰属)</span>
<span class="option-price" data-i18n="services.service3.step2Opt3Price">$150〜$700/個</span>
<span class="option-note" data-i18n="services.service3.step2Opt3Note">著作権:クライアント所有(規模とディテールにより変動)</span>
</div>
</div>
<div class="process-note">
<p><i class="fa-solid fa-thumbtack" aria-hidden="true"></i> <span data-i18n="services.service3.step2ProcessNote">Unityビルドで納品され、カメラ視点の確認が可能</span></p>
</div>
</div>
</div>
<div class="mv-step">
<div class="step-icon">3</div>
<div class="step-details">
<h5 data-i18n="services.service3.step3Title">ストーリーボード作成</h5>
<div class="step-pricing">
<span class="price-amount" data-i18n="services.service3.step3Price">$75〜</span>
</div>
<p data-i18n="services.service3.step3Desc">外部の専門ライターがミュージックビデオの流れを具体化します。</p>
<p class="detail-note" data-i18n="services.service3.step3Note">※ お客様と共有し、演出やカメラカットを事前に確認・承認</p>
</div>
</div>
<div class="mv-step">
<div class="step-icon">4</div>
<div class="step-details">
<h5 data-i18n="services.service3.step4Title">アバターセッティング及びプロップ制作</h5>
<div class="step-pricing">
<span class="price-label" data-i18n="services.service3.step4AvatarLabel">アバターセッティング:</span>
<span class="price-amount" data-i18n="services.service3.step4AvatarPrice">$40/個</span>
</div>
<div class="step-pricing">
<span class="price-label" data-i18n="services.service3.step4PropLabel">ストーリー進行用プロップ:</span>
<span class="price-amount" data-i18n="services.service3.step4PropPrice">$15/個</span>
</div>
<p data-i18n="services.service3.step4Desc">アバターをミュージックビデオ環境に合わせて最適化します。</p>
<p class="detail-note" data-i18n="services.service3.step4Note">※ アバターの修正および最適化作業が可能</p>
</div>
</div>
<div class="mv-step">
<div class="step-icon">5</div>
<div class="step-details">
<h5 data-i18n="services.service3.step5Title">モーションキャプチャー</h5>
<div class="mv-mocap-pricing">
<h6 data-i18n="services.service3.step5StudioLabel">モーションキャプチャースタジオレンタル費用</h6>
<div class="step-pricing">
<span class="price-label" data-i18n="services.service3.step5Solo">1名利用</span>
<span class="price-amount" data-i18n="services.service3.step5SoloPrice">$110/時間</span>
</div>
<div class="step-pricing">
<span class="price-label" data-i18n="services.service3.step5Duo">2名利用</span>
<span class="price-amount" data-i18n="services.service3.step5DuoPrice">$150/時間</span>
</div>
<div class="step-pricing">
<span class="price-label" data-i18n="services.service3.step5Extra">追加人数:</span>
<span class="price-amount" data-i18n="services.service3.step5ExtraPrice">+$75/名/時間</span>
<span class="price-note" data-i18n="services.service3.step5ExtraNote">最大5名まで</span>
</div>
</div>
<div class="mv-mocap-pricing">
<h6 data-i18n="services.service3.step5ActorLabel">アクター手配費用</h6>
<div class="step-pricing">
<span class="price-label" data-i18n="services.service3.step5Actor">アクター手配:</span>
<span class="price-amount" data-i18n="services.service3.step5ActorPrice">$75/名/時間</span>
</div>
</div>
<p data-i18n="services.service3.step5Desc">ストーリーボードを基にモーションを録画します。</p>
<p class="detail-note" data-i18n="services.service3.step5Note1">※ 撮影期間1〜2日所要</p>
<p class="detail-note" data-i18n="services.service3.step5Note2">※ 最小利用2時間</p>
</div>
</div>
<div class="mv-step">
<div class="step-icon">6</div>
<div class="step-details">
<h5 data-i18n="services.service3.step6Title">ルック開発 &amp; 演出</h5>
<div class="step-pricing">
<span class="price-amount" data-i18n="services.service3.step6Price">$360〜</span>
</div>
<p data-i18n="services.service3.step6Desc">Unityでポストプロセシング、アートワーク、カメラワーキングなどを行います。</p>
<p class="detail-note" data-i18n="services.service3.step6Note">※ 演出の複雑さとクオリティにより変動</p>
</div>
</div>
<div class="mv-step">
<div class="step-icon">7</div>
<div class="step-details">
<h5 data-i18n="services.service3.step7Title">最終フィードバック &amp; 納品</h5>
<p data-i18n="services.service3.step7Desc">完成した映像をお客様のフィードバックを反映し修正して最終納品します。</p>
<p class="detail-note" data-i18n="services.service3.step7Note">※ 納品形式mp4/mov等</p>
</div>
</div>
</div>
</div>
<div class="service-note">
<p data-i18n-html="services.service3.processNote">企画相談(無料)→ 全体見積もり提示 → 見積もり承認後に制作開始ステップ2〜7を順次進行</p>
</div>
</div>
</div>
</section>
<!-- 추가 옵션 요금 -->
<section class="section bg-light">
<div class="container">
<div class="section-header">
<h2 data-i18n="services.options.title">追加オプション料金</h2>
<p data-i18n="services.options.desc">全てのサービスパッケージに共通で適用される追加オプションです</p>
</div>
<div class="vat-notice-header">
<p><em data-i18n="services.options.vatNote">*消費税別</em></p>
</div>
<div class="options-grid stagger-children">
<!-- 캐릭터 세팅 -->
<div class="option-card reveal" data-reveal="up">
<div class="option-header">
<span class="option-icon"><i class="fa-solid fa-palette" aria-hidden="true"></i></span>
<h3 data-i18n="services.options.charSetup">キャラクターセッティング</h3>
</div>
<div class="option-pricing">
<div class="price">
<span class="price-amount" data-i18n="services.options.charPrice">$40〜</span>
<span class="price-unit" data-i18n="services.options.charUnit">/ 1名1体</span>
</div>
<p class="option-description" data-i18n="services.options.charDesc">新規キャラクターセッティング作業</p>
</div>
</div>
<!-- 배경 세팅 -->
<div class="option-card reveal" data-reveal="up">
<div class="option-header">
<span class="option-icon"><i class="fa-solid fa-mountain-sun" aria-hidden="true"></i></span>
<h3 data-i18n="services.options.bgSetup">背景セッティング</h3>
</div>
<div class="option-content">
<div class="option-item">
<h4 data-i18n="services.options.bgExisting">既存保有背景の使用</h4>
<div class="price">
<span class="price-amount" data-i18n="services.options.bgExistingPrice">$25〜</span>
<span class="price-unit" data-i18n="services.options.bgExistingUnit">/ 1個</span>
</div>
<p class="option-note" data-i18n="services.options.bgExistingNote">セッティング費のみ</p>
</div>
<div class="option-item">
<h4 data-i18n="services.options.bgNew">新規背景制作</h4>
<div class="price">
<span class="price-amount" data-i18n="services.options.bgNewPrice">$80〜</span>
<span class="price-unit" data-i18n="services.options.bgNewUnit">/ 1個</span>
</div>
<p class="option-note" data-i18n-html="services.options.bgNewNote">セッティング費 + 制作費/購入費別途
Mingle Studioまたは依頼者帰属を選択可能です</p>
</div>
</div>
</div>
<!-- 프랍 세팅 -->
<div class="option-card reveal" data-reveal="up">
<div class="option-header">
<span class="option-icon"><i class="fa-solid fa-masks-theater" aria-hidden="true"></i></span>
<h3 data-i18n="services.options.propSetup">プロップセッティング</h3>
</div>
<div class="option-pricing">
<div class="price">
<span class="price-amount" data-i18n="services.options.propPrice">$15</span>
<span class="price-unit" data-i18n="services.options.propUnit">/ 1個</span>
</div>
<p class="option-description" data-i18n-html="services.options.propDesc">プロップセッティング作業
ストリーミングルサービス新規プロップ最大6個、保有プロップ無制限無料提供</p>
</div>
</div>
</div>
<!-- 이용 안내사항 -->
<div class="usage-notes">
<h3 data-i18n="services.usage.title">ご利用案内</h3>
<div class="notes-grid">
<div class="note-item">
<h4 data-i18n="services.usage.hours">営業時間</h4>
<p data-i18n-html="services.usage.hoursDesc">基本営業時間10:00〜22:00
夜間利用時は料金1.5倍適用</p>
</div>
<div class="note-item">
<h4 data-i18n="services.usage.minTime">最小利用時間</h4>
<p data-i18n-html="services.usage.minTimeDesc">全サービス最低2時間
(ストリーミングルサービスを除く)</p>
</div>
<div class="note-item">
<h4 data-i18n="services.usage.preparation">事前準備事項</h4>
<p data-i18n-html="services.usage.preparationDesc">ミュージックビデオ/ショートフォーム撮影時
企画書および準備物の事前協議必須</p>
</div>
<div class="note-item">
<h4 data-i18n="services.usage.followUp">後続サービス</h4>
<p data-i18n-html="services.usage.followUpDesc">アバターリターゲティングは後続作業連携時にのみ
提供されます(別途ご相談)</p>
</div>
</div>
</div>
</div>
</section>
<!-- 서비스 이용 안내 -->
<section class="section bg-light">
<div class="container">
<div class="section-header">
<h2 data-i18n="services.guide.title">サービスご利用案内</h2>
</div>
<!-- 스튜디오 대관 절차 -->
<div class="card card--flat reveal" data-reveal="fade">
<h3 data-i18n="services.guide.processTitle">スタジオレンタル手続き</h3>
<div class="process-flow">
<div class="process-step">
<div class="step-number">1</div>
<div class="step-content">
<h4 data-i18n="services.guide.step1">メールお問い合わせ</h4>
<p data-i18n="services.guide.step1Desc">予約フォームを記入してお問い合わせ</p>
</div>
</div>
<div class="process-arrow"></div>
<div class="process-step">
<div class="step-number">2</div>
<div class="step-content">
<h4 data-i18n="services.guide.step2">担当者確認および協議</h4>
<p data-i18n="services.guide.step2Desc">詳細事項の調整</p>
</div>
</div>
<div class="process-arrow"></div>
<div class="process-step">
<div class="step-number">3</div>
<div class="step-content">
<h4 data-i18n="services.guide.step3">全額お支払い</h4>
<p data-i18n="services.guide.step3Desc">お支払い完了</p>
</div>
</div>
<div class="process-arrow"></div>
<div class="process-step">
<div class="step-number">4</div>
<div class="step-content">
<h4 data-i18n="services.guide.step4">予約確定</h4>
<p data-i18n="services.guide.step4Desc">最終予約完了</p>
</div>
</div>
</div>
<div class="booking-buttons">
<button id="showEmailForm" class="btn btn-primary">
<span><i class="fa-solid fa-envelope" aria-hidden="true"></i></span> <span data-i18n="services.guide.btnEmail">メールでお問い合わせ</span>
</button>
<a href="https://m.booking.naver.com/booking/10/bizes/1468174/items/6949481" target="_blank" class="btn btn-secondary">
<span><i class="fa-solid fa-calendar" aria-hidden="true"></i></span> <span data-i18n="services.guide.btnNaver">Naver予約へ</span>
</a>
</div>
<p class="booking-note" data-i18n="services.guide.naverNote">※ Naverプレイスでリアルタイムのスケジュール確認および予約が可能です</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> help@minglestudio.co.kr</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인 권장, 최대 5인까지 가능)</p>
<div class="form-placeholder">□ 1명 □ 2명 □ 3명 □ 4명 □ 5명</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:help@minglestudio.co.kr?subject=[스튜디오 예약 문의] 밍글 스튜디오&amp;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시간 (2인 200,000원~/시간, VAT 별도)%0A- 인원 추가: 추가 인원 +100,000원~/명/시간%0A- 결제방법: 계좌이체 또는 현금 (카드결제 불가)%0A- 현금영수증/세금계산서 발행 가능%0A%0A빠른 시일 내에 답변 드리겠습니다.%0A감사합니다." class="btn btn-primary">
<i class="fa-solid fa-envelope" aria-hidden="true"></i> 이메일 바로 보내기
</a>
</div>
</div>
</div>
<!-- 예약 및 취소 규정 -->
<div class="grid grid-2">
<div class="card card--flat reveal" data-reveal="fade">
<h3 data-i18n="services.policy.reservationTitle">予約案内</h3>
<ul class="info-list">
<li data-i18n="services.policy.reservation1">スタジオの予約はご利用希望日の少なくとも2週間前までにお申し込みいただくことをお勧めします。</li>
<li data-i18n="services.policy.reservation2">予約確定後、お客様のご都合による予約キャンセルの場合、規定に基づくキャンセル料が発生します。</li>
</ul>
</div>
<div class="card card--flat reveal" data-reveal="fade">
<h3 data-i18n="services.policy.visitTitle">ご来場案内</h3>
<ul class="info-list">
<li data-i18n="services.policy.visit1">撮影前にモーションキャプチャースーツの着用等の準備が必要なため、撮影予定時刻の最低30分前にお越しください。準備時間は利用時間に含まれません。</li>
<li data-i18n="services.policy.visit2">撮影時はメガネやイヤリングなど反射しやすい素材のアクセサリーの着用はできるだけお控えください。</li>
</ul>
</div>
</div>
<!-- 취소 환불 규정 -->
<div class="card card--flat reveal" data-reveal="fade">
<h3 data-i18n="services.policy.refundTitle">キャンセル・返金規定</h3>
<div class="table-responsive">
<table class="refund-table">
<thead>
<tr>
<th scope="col" data-i18n="services.policy.refundColTime">キャンセル時期</th>
<th scope="col" data-i18n="services.policy.refundColRate">返金率</th>
</tr>
</thead>
<tbody>
<tr>
<td data-i18n="services.policy.refund7days">予約日の7日前</td>
<td class="refund-100" data-i18n="services.policy.refund100">100%返金</td>
</tr>
<tr>
<td data-i18n="services.policy.refund3days">予約日の3日前</td>
<td class="refund-70" data-i18n="services.policy.refund70">70%返金</td>
</tr>
<tr>
<td data-i18n="services.policy.refund1day">予約日の1日前</td>
<td class="refund-50" data-i18n="services.policy.refund50">50%返金</td>
</tr>
<tr>
<td data-i18n="services.policy.refundSameDay">当日キャンセル</td>
<td class="refund-0" data-i18n="services.policy.refundNone">返金不可</td>
</tr>
</tbody>
</table>
</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>
</main>
<!-- 푸터 -->
<div id="footer-placeholder">
<!-- 공통 푸터 컴포넌트 -->
<footer class="site-footer">
<div class="container">
<div class="footer-grid">
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.companyInfo">会社情報</h3>
<ul class="footer-list">
<li><strong data-i18n="footer.companyName">Mingle Studio</strong></li>
<li data-i18n="footer.ceo">代表: 김희진</li>
<li data-i18n="footer.businessNumber">事業者登録番号: 208-12-73755</li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.contact">お問い合わせ</h3>
<ul class="footer-list">
<li><a href="tel:+82-10-9288-9190"><i class="fa-solid fa-phone" aria-hidden="true"></i> 010-9288-9190</a></li>
<li><a href="mailto:minglestudio@minglestudio.co.kr"><i class="fa-solid fa-briefcase" aria-hidden="true"></i> <span data-i18n="footer.businessInquiry">ビジネスお問い合わせ</span></a></li>
<li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> <span data-i18n="footer.reservationInquiry">ご予約お問い合わせ</span></a></li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.directions">アクセス</h3>
<ul class="footer-list">
<li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> <span data-i18n="footer.address">仁川広域市富平区主夫吐路236</span></li>
<li data-i18n="footer.addressDetail">仁川テクバレーU1センター A棟 B105号</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p data-i18n="footer.copyright">© 2025 Mingle Studio. All rights reserved.</p>
</div>
</div>
</footer>
</div>
<!-- 백업 푸터 (JavaScript 로드 실패 시) -->
<footer class="site-footer" id="backupFooter">
<div class="container">
<div class="footer-grid">
<div class="footer-section">
<h3 class="footer-heading">회사 정보</h3>
<ul class="footer-list">
<li><strong>밍글 스튜디오</strong></li>
<li>대표: 김희진</li>
<li>사업자등록번호: 208-12-73755</li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading">연락처</h3>
<ul class="footer-list">
<li><a href="tel:+82-10-9288-9190"><i class="fa-solid fa-phone" aria-hidden="true"></i> 010-9288-9190</a></li>
<li><a href="mailto:minglestudio@minglestudio.co.kr"><i class="fa-solid fa-briefcase" aria-hidden="true"></i> 비즈니스 문의</a></li>
<li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> 예약 문의</a></li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading">오시는 길</h3>
<ul class="footer-list">
<li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> 인천광역시 부평구 주부토로 236</li>
<li>인천테크노밸리 U1센터 A동 B105호</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 밍글 스튜디오. All rights reserved.</p>
</div>
</div>
</footer>
<!-- 포트폴리오 팝업 -->
<div id="portfolioPopup" class="portfolio-popup" role="dialog" aria-label="뮤직비디오/숏폼 포트폴리오">
<div class="popup-overlay" onclick="closePortfolioPopup()"></div>
<div class="popup-content">
<div class="popup-header">
<h3>뮤직비디오/숏폼 포트폴리오</h3>
<button class="popup-close" onclick="closePortfolioPopup()" aria-label="팝업 닫기">×</button>
</div>
<div class="popup-body">
<div class="portfolio-section">
<h4><i class="fa-solid fa-music" aria-hidden="true"></i> 뮤직비디오 대표작</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><i class="fa-solid fa-clapperboard" aria-hidden="true"></i> 숏폼 챌린지</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" role="dialog" aria-label="스트리밍글 서비스 포트폴리오">
<div class="popup-overlay" onclick="closeStreamingPortfolioPopup()"></div>
<div class="popup-content">
<div class="popup-header">
<h3>스트리밍글 서비스 포트폴리오</h3>
<button class="popup-close" onclick="closeStreamingPortfolioPopup()" aria-label="팝업 닫기">×</button>
</div>
<div class="popup-body">
<div class="portfolio-section">
<h4><i class="fa-solid fa-circle" style="color: #ff0000" aria-hidden="true"></i> 실시간 모션캡처 방송</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">치요 &amp; 마늘</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">치요 &amp; 마늘</span>
</div>
</div>
</div>
<div class="portfolio-item chzzk-item">
<div class="video-wrapper">
<div class="chzzk-thumbnail">
<img src="https://livecloud-thumb.akamaized.net/chzzk/kr/live-rewind-image/record/45386630/represent/thumbnail/image_14810881_720_0.jpg" alt="이무지 탄생일 방송 썸네일" class="thumbnail-img">
<div class="thumbnail-overlay">
<div class="chzzk-logo">치지직</div>
<div class="chzzk-center-logo">
<img src="Logo icon/chzzk Icon.png" alt="치지직 로고" class="chzzk-logo-img">
</div>
</div>
<a href="https://naver.me/5dA2JoP5" target="_blank" class="thumbnail-link"></a>
</div>
</div>
<div class="streaming-info">
<p><strong>이무지 탄생일 ! 🧸💛</strong></p>
<div class="stream-details">
<span class="platform">치지직</span>
<span class="streamer">이무지</span>
</div>
</div>
</div>
</div>
</div>
<div class="streaming-features">
<h4><i class="fa-solid fa-sparkles" aria-hidden="true"></i> 스트리밍글 서비스 특징</h4>
<div class="features-grid">
<div class="feature-item">
<span class="feature-icon"><i class="fa-solid fa-video" aria-hidden="true"></i></span>
<p>실시간 모션캡처 스트리밍</p>
</div>
<div class="feature-item">
<span class="feature-icon"><i class="fa-solid fa-users" aria-hidden="true"></i></span>
<p>최대 5인 동시 방송</p>
</div>
<div class="feature-item">
<span class="feature-icon"><i class="fa-solid fa-clock" aria-hidden="true"></i></span>
<p>6시간 풀 패키지</p>
</div>
<div class="feature-item">
<span class="feature-icon"><i class="fa-solid fa-masks-theater" aria-hidden="true"></i></span>
<p>캐릭터 &amp; 배경 세팅</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/i18n.js"></script>
<script src="/js/common.js"></script>
<script src="/js/services.js"></script>
</body></html>