414a91ef64
- en/ja/zh index.html에 contact.css, contact.js 추가 - 온라인 문의폼 + 개인정보 모달 임베드 - FAQ 바로가기에 온라인 문의하기 버튼 추가 - CTA 섹션 오시는 길 → 카카오톡 오픈채팅 카드로 교체 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1092 lines
70 KiB
HTML
1092 lines
70 KiB
HTML
<!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">
|
||
<link rel="apple-touch-icon" href="/images/logo/mingle-logo.webp">
|
||
<link rel="apple-touch-icon-precomposed" href="/images/logo/mingle-logo.webp">
|
||
|
||
<!-- Canonical URL -->
|
||
<link rel="canonical" href="https://minglestudio.co.kr/ja/">
|
||
|
||
<!-- Theme Color -->
|
||
<meta name="theme-color" content="#ff8800">
|
||
<meta name="msapplication-TileColor" content="#ff8800">
|
||
|
||
<!-- DNS Prefetch (성능 최적화) -->
|
||
<link rel="dns-prefetch" href="//hangeul.pstatic.net">
|
||
<link rel="dns-prefetch" href="//cdn.jsdelivr.net">
|
||
<link rel="dns-prefetch" href="//www.youtube.com">
|
||
|
||
<!-- Preload 중요 리소스 -->
|
||
<link rel="preload" href="/css/common.css" as="style">
|
||
<link rel="preload" href="/css/main.css" as="style">
|
||
|
||
<!-- Security Headers (기본 설정) -->
|
||
<meta http-equiv="X-Content-Type-Options" content="nosniff">
|
||
<meta http-equiv="X-Frame-Options" content="DENY">
|
||
<meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin">
|
||
|
||
<!-- SEO 메타 태그 -->
|
||
<meta name="description" content="最先端OptiTrackシステムと専門機材を備えたモーションキャプチャースタジオ。仁川テクノバレーでバーチャルコンテンツの新たな可能性を体験してください。">
|
||
<meta name="keywords" content="모션캡쳐, 스튜디오 대관, OptiTrack, 모션캡처, 3D 애니메이션, 버추얼 콘텐츠, 인천 스튜디오, 모션캡쳐 대관, 3D 캐릭터 애니메이션, 버튜버, VTuber">
|
||
<meta name="author" content="밍글 스튜디오">
|
||
<meta name="robots" content="index, follow">
|
||
|
||
<!-- Open Graph -->
|
||
<meta property="og:title" content="Mingle Studio - モーションキャプチャー制作スタジオ">
|
||
<meta property="og:description" content="最先端OptiTrackシステムと専門機材を備えたモーションキャプチャースタジオ">
|
||
<meta property="og:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
|
||
<meta property="og:url" content="https://minglestudio.co.kr">
|
||
<meta property="og:type" content="website">
|
||
<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="밍글 스튜디오">
|
||
|
||
<!-- Twitter Card -->
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="밍글 스튜디오 - 모션캡쳐 창작 스튜디오">
|
||
<meta name="twitter:description" content="최첨단 OptiTrack 시스템과 전문 장비를 갖춘 모션캡쳐 스튜디오">
|
||
<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">
|
||
|
||
<!-- Pinterest -->
|
||
<meta name="pinterest-rich-pin" content="true">
|
||
<meta property="article:author" content="밍글 스튜디오">
|
||
|
||
<!-- WhatsApp / OG 이미지 대체 텍스트 -->
|
||
<meta property="og:image:alt" content="밍글 스튜디오 로고 - 인천 모션캡쳐 전문 스튜디오">
|
||
|
||
<!-- Microsoft Teams -->
|
||
<meta name="msapplication-TileImage" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
|
||
|
||
<!-- Kakao (카카오톡) -->
|
||
<meta property="kakao:title" content="밍글 스튜디오 - 모션캡쳐 창작 스튜디오">
|
||
<meta property="kakao:description" content="최첨단 OptiTrack 시스템과 전문 장비를 갖춘 모션캡쳐 스튜디오">
|
||
<meta property="kakao:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
|
||
|
||
<!-- 네이버 검색 최적화 -->
|
||
<meta name="subject" content="모션캡쳐 스튜디오 대관 서비스">
|
||
<meta name="title" content="인천 모션캡쳐 전문 스튜디오 밍글 - OptiTrack 전신 페이셜 캡쳐 대관">
|
||
|
||
<!-- 구조화된 데이터 (통합) -->
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "LocalBusiness",
|
||
"name": "밍글 스튜디오",
|
||
"alternateName": ["MINGLE STUDIO", "밍글스튜디오"],
|
||
"description": "인천 모션캡쳐 전문 스튜디오 - OptiTrack 30대 카메라 시스템, 전신/페이셜 모션캡쳐 서비스",
|
||
"url": "https://minglestudio.co.kr",
|
||
"telephone": "+82-10-9288-9190",
|
||
"email": "help@minglestudio.co.kr",
|
||
"foundingDate": "2025-07",
|
||
"address": {
|
||
"@type": "PostalAddress",
|
||
"streetAddress": "주부토로 236, 인천테크노밸리 U1센터 A동 B105호",
|
||
"addressLocality": "부평구",
|
||
"addressRegion": "인천광역시",
|
||
"postalCode": "21330",
|
||
"addressCountry": "KR"
|
||
},
|
||
"geo": {
|
||
"@type": "GeoCoordinates",
|
||
"latitude": 37.5073,
|
||
"longitude": 126.7450
|
||
},
|
||
"openingHours": "Mo-Su 09:00-22:00",
|
||
"priceRange": "₩₩₩",
|
||
"contactPoint": {
|
||
"@type": "ContactPoint",
|
||
"telephone": "+82-10-9288-9190",
|
||
"email": "help@minglestudio.co.kr",
|
||
"contactType": "customer service",
|
||
"availableLanguage": "Korean"
|
||
},
|
||
"hasOfferCatalog": {
|
||
"@type": "OfferCatalog",
|
||
"name": "모션캡쳐 서비스",
|
||
"itemListElement": [
|
||
{
|
||
"@type": "Offer",
|
||
"itemOffered": {
|
||
"@type": "Service",
|
||
"name": "모션캡쳐 스튜디오 대관",
|
||
"description": "OptiTrack 30대 카메라 시스템, 8m x 7m x 2.6m 공간"
|
||
},
|
||
"price": "200000",
|
||
"priceCurrency": "KRW",
|
||
"priceSpecification": {
|
||
"@type": "UnitPriceSpecification",
|
||
"price": "200000",
|
||
"priceCurrency": "KRW",
|
||
"unitCode": "HUR",
|
||
"unitText": "시간"
|
||
}
|
||
}
|
||
]
|
||
},
|
||
"areaServed": {
|
||
"@type": "Country",
|
||
"name": "대한민국"
|
||
},
|
||
"knowsAbout": [
|
||
"모션캡쳐",
|
||
"OptiTrack",
|
||
"버튜버",
|
||
"VTuber",
|
||
"3D 애니메이션",
|
||
"실시간 스트리밍",
|
||
"페이셜 캡쳐",
|
||
"게임 개발",
|
||
"버추얼 콘텐츠"
|
||
],
|
||
"sameAs": [
|
||
"https://www.youtube.com/@mingle_studio",
|
||
"https://x.com/minglestudio"
|
||
]
|
||
}
|
||
</script>
|
||
|
||
<!-- 폰트 -->
|
||
<link rel="preconnect" href="https://hangeul.pstatic.net" crossorigin="">
|
||
<link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
|
||
|
||
<!-- Icons -->
|
||
<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/main.css">
|
||
<link rel="stylesheet" href="/css/contact.css">
|
||
<link rel="stylesheet" href="/css/popup.css?v=2">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/">
|
||
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/">
|
||
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/">
|
||
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/">
|
||
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/">
|
||
</head>
|
||
<body>
|
||
<a href="#main-content" class="skip-to-content" data-i18n="common.skipToContent">本文へスキップ</a>
|
||
<!-- 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) -->
|
||
|
||
<!-- 요금제 변경 안내 팝업 -->
|
||
<div class="popup-overlay" id="mainPopup" role="dialog" aria-label="요금제 변경 안내 팝업">
|
||
<div class="popup-container">
|
||
<button class="popup-close-x" id="popupCloseX" aria-label="팝업 닫기">×</button>
|
||
|
||
<div class="popup-header">
|
||
<h2 class="popup-title"><i class="fa-solid fa-bullhorn" aria-hidden="true"></i> <span data-i18n="index.popup.title">料金プラン変更のお知らせ</span></h2>
|
||
<p class="popup-subtitle" data-i18n="index.popup.subtitle">2026年3月より適用されました</p>
|
||
<div class="popup-badge" data-i18n="index.popup.badge">施行中</div>
|
||
</div>
|
||
|
||
<div class="popup-body">
|
||
<div class="popup-section">
|
||
<h3 class="popup-section-title" data-i18n="index.popup.mainChanges">主な変更点</h3>
|
||
|
||
<div class="change-card">
|
||
<div class="change-card-header">
|
||
<span class="change-card-title"><i class="fa-solid fa-clock-rotate-left" aria-hidden="true"></i> <span data-i18n="index.popup.discountEnd">割引イベント終了</span></span>
|
||
<span class="change-badge badge-end">종료</span>
|
||
</div>
|
||
<p class="change-description" data-i18n-html="index.popup.discountEndDesc">オープン記念20%割引イベントが<strong>2月28日</strong>をもって終了し、現在は通常料金が適用されています。</p>
|
||
</div>
|
||
|
||
<div class="change-card">
|
||
<div class="change-card-header">
|
||
<span class="change-card-title"><i class="fa-solid fa-plus-circle" aria-hidden="true"></i> <span data-i18n="index.popup.streaming4h">ストリーミングル4時間サービス新設</span></span>
|
||
<span class="change-badge badge-new">NEW</span>
|
||
</div>
|
||
<div class="change-price">
|
||
<span class="change-price-amount">1,400,000원</span>
|
||
<span class="change-price-unit">/ 4시간 패키지</span>
|
||
</div>
|
||
<p class="change-description" data-i18n="index.popup.streaming4hDesc">既存のストリーミングルサービス（6時間）と同じ特典を4時間パッケージでご利用いただけます。</p>
|
||
</div>
|
||
|
||
<div class="change-card">
|
||
<div class="change-card-header">
|
||
<span class="change-card-title"><i class="fa-solid fa-user-plus" aria-hidden="true"></i> <span data-i18n="index.popup.referral">紹介制度オープン</span></span>
|
||
<span class="change-badge badge-new">NEW</span>
|
||
</div>
|
||
<p class="change-description" data-i18n-html="index.popup.referralDesc">お友達をご紹介いただくと、紹介した方・紹介された方の両方に<strong>20%割引券</strong>を差し上げます。（1回限り、他割引との併用不可）</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="popup-notice">
|
||
<p data-i18n="index.popup.notice">※ 変更された料金はサービスページに反映されています</p>
|
||
</div>
|
||
|
||
<div class="popup-info">
|
||
<div class="info-item">
|
||
<div class="info-label" data-i18n="index.popup.effectiveDate">適用時期</div>
|
||
<div class="info-value" data-i18n="index.popup.effectiveDateValue">2026年3月〜</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label" data-i18n="index.popup.inquiryEmail">お問い合わせメール</div>
|
||
<div class="info-value">help@minglestudio.co.kr</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="popup-cta" id="popupCtaBtn" data-i18n="index.popup.ctaBtn">現在のサービス料金を見る →</button>
|
||
</div>
|
||
|
||
<div class="popup-footer">
|
||
<div class="popup-checkbox">
|
||
<input type="checkbox" id="dontShowToday">
|
||
<label for="dontShowToday" data-i18n="index.popup.dontShowToday">今日は表示しない</label>
|
||
</div>
|
||
<button class="popup-close-btn" id="popupCloseBtn" data-i18n="index.popup.close">閉じる</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 헤더 -->
|
||
<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&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">
|
||
<!-- Hero 섹션 -->
|
||
<section class="hero-section">
|
||
<div class="hero-bg">
|
||
<div class="video-bg">
|
||
<iframe id="youtube-bg" title="밍글 스튜디오 모션캡쳐 플레이리스트" src="https://www.youtube-nocookie.com/embed/videoseries?list=PL7KThQBBudfi08mUmnrEJRtpMAWHVvMqO&autoplay=1&mute=1&loop=1&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&playsinline=1&enablejsapi=1&playlist=PL7KThQBBudfi08mUmnrEJRtpMAWHVvMqO" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="">
|
||
</iframe>
|
||
</div>
|
||
</div>
|
||
<div class="hero-content-centered">
|
||
<div class="hero-logo-area">
|
||
<div class="hero-floating-elements" aria-hidden="true">
|
||
<!-- 모캡 마커 (빛나는 점) -->
|
||
<span class="float-marker" style="--x:-90px;--y:-70px;--delay:0s;--dur:4s"></span>
|
||
<span class="float-marker" style="--x:85px;--y:-55px;--delay:0.6s;--dur:3.5s"></span>
|
||
<span class="float-marker" style="--x:-60px;--y:65px;--delay:1.2s;--dur:4.5s"></span>
|
||
<span class="float-marker" style="--x:75px;--y:50px;--delay:0.3s;--dur:3.8s"></span>
|
||
<span class="float-marker small" style="--x:-110px;--y:10px;--delay:0.8s;--dur:5s"></span>
|
||
<span class="float-marker small" style="--x:105px;--y:-15px;--delay:1.5s;--dur:4.2s"></span>
|
||
<!-- 카메라 아이콘 -->
|
||
<span class="float-camera" style="--x:-120px;--y:-40px;--delay:0.4s;--dur:5s"><i class="fa-solid fa-camera"></i></span>
|
||
<span class="float-camera" style="--x:115px;--y:30px;--delay:1s;--dur:4.5s"><i class="fa-solid fa-video"></i></span>
|
||
<span class="float-camera" style="--x:-30px;--y:80px;--delay:1.8s;--dur:5.5s"><i class="fa-solid fa-clapperboard"></i></span>
|
||
</div>
|
||
<img src="/images/logo/mingle-logo.webp" alt="밍글 스튜디오 로고" class="hero-logo">
|
||
<div class="logo-glow"></div>
|
||
</div>
|
||
<h1 class="hero-title">
|
||
<span data-i18n="index.hero.title">Mingle Studio</span><br>
|
||
<span class="hero-subtitle gradient-text" data-i18n="index.hero.subtitle">MINGLE STUDIO</span>
|
||
</h1>
|
||
<p class="hero-description" data-i18n-html="index.hero.description">技術と創造力、情熱が一つに混ざり合い<br>新しい価値が生まれる空間</p>
|
||
<div class="hero-buttons">
|
||
<a href="/ja/about" class="btn btn-primary" data-i18n="index.hero.btnAbout">会社紹介を見る</a>
|
||
<a href="/ja/contact" class="btn btn-outline" data-i18n="index.hero.btnContact">ご予約・お問い合わせ</a>
|
||
</div>
|
||
|
||
<!-- 스펙 카운터 -->
|
||
<div class="hero-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-number"><span class="counter" data-target="30">0</span><span class="spec-unit">대</span></span>
|
||
<span class="spec-label" data-i18n="index.hero.specCamera">OptiTrack カメラ</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-number">8<span class="spec-unit">m</span> × 7<span class="spec-unit">m</span></span>
|
||
<span class="spec-label" data-i18n="index.hero.specSpace">キャプチャー空間</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-number"><span class="counter" data-target="20">0</span><span class="spec-unit" data-i18n="index.hero.specPriceUnit">USD</span></span>
|
||
<span class="spec-label" data-i18n="index.hero.specPrice">1時間あたりレンタル料</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-scroll-indicator">
|
||
<span>Scroll</span>
|
||
<div class="scroll-arrow"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 통합 스티키 섹션: Features + Services + Studio -->
|
||
<section class="sticky-showcase">
|
||
<div class="sticky-showcase-container">
|
||
<!-- 왼쪽: 고정 이미지 패널 -->
|
||
<div class="showcase-sticky">
|
||
<div class="showcase-image-wrapper">
|
||
<!-- Step 1: YouTube 영상 -->
|
||
<div class="showcase-media active" data-step="1">
|
||
<iframe src="https://www.youtube-nocookie.com/embed/rM9GEe0tb_I?autoplay=1&mute=1&loop=1&playlist=rM9GEe0tb_I&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&playsinline=1" title="모션캡쳐 워크플로우 영상" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="" class="showcase-video"></iframe>
|
||
</div>
|
||
<!-- Step 2: 이미지 페이드 루프 -->
|
||
<div class="showcase-media" data-step="2">
|
||
<div class="showcase-fade-loop" data-interval="3000">
|
||
<img src="/images/studio/넓은 모션 캡쳐 공간 002.webp" alt="넓은 모션캡쳐 공간" class="fade-loop-img active">
|
||
<img src="/images/studio/모션캡쳐 공간 001.webp" alt="모션캡쳐 공간 1" class="fade-loop-img">
|
||
<img src="/images/studio/모션캡쳐 공간 002.webp" alt="모션캡쳐 공간 2" class="fade-loop-img">
|
||
<img src="/images/studio/모션캡쳐 공간 003.webp" alt="모션캡쳐 공간 3" class="fade-loop-img">
|
||
<img src="/images/studio/모션캡쳐 공간 004.webp" alt="모션캡쳐 공간 4" class="fade-loop-img">
|
||
</div>
|
||
</div>
|
||
<!-- Step 3: YouTube 영상 -->
|
||
<div class="showcase-media" data-step="3">
|
||
<iframe src="https://www.youtube-nocookie.com/embed/YO7-z_JxSjY?autoplay=1&mute=1&loop=1&playlist=YO7-z_JxSjY&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&playsinline=1" title="모션캡쳐 결과물 영상" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="" class="showcase-video"></iframe>
|
||
</div>
|
||
<!-- Step 4: 이미지 페이드 루프 -->
|
||
<div class="showcase-media" data-step="4">
|
||
<div class="showcase-fade-loop" data-interval="3000">
|
||
<img src="/images/studio/오퍼레이팅 공간 강조.webp" alt="오퍼레이팅 공간" class="fade-loop-img active">
|
||
<img src="/images/studio/스튜디오와 연결된 파우더룸.webp" alt="스튜디오와 연결된 파우더룸" class="fade-loop-img">
|
||
<img src="/images/studio/탈의실 내부 공간.webp" alt="탈의실 내부 공간" class="fade-loop-img">
|
||
</div>
|
||
</div>
|
||
<div class="showcase-image-overlay"></div>
|
||
<div class="showcase-dots">
|
||
<span class="showcase-dot active" data-step="1"></span>
|
||
<span class="showcase-dot" data-step="2"></span>
|
||
<span class="showcase-dot" data-step="3"></span>
|
||
<span class="showcase-dot" data-step="4"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 오른쪽: 스크롤 콘텐츠 -->
|
||
<div class="showcase-scroll">
|
||
<!-- Step 1: 핵심 장비 -->
|
||
<div class="showcase-step active" data-step="1">
|
||
<div class="showcase-mobile-media">
|
||
<iframe src="https://www.youtube-nocookie.com/embed/rM9GEe0tb_I?autoplay=1&mute=1&loop=1&playlist=rM9GEe0tb_I&controls=0&playsinline=1" title="모션캡쳐 워크플로우 영상" allow="autoplay; encrypted-media" allowfullscreen="" loading="lazy"></iframe>
|
||
</div>
|
||
<div class="showcase-step-label" data-i18n="index.showcase.step1.label">Equipment</div>
|
||
<h2 class="showcase-step-title" data-i18n="index.showcase.step1.title">最先端モーションキャプチャーシステム</h2>
|
||
<p class="showcase-step-desc" data-i18n="index.showcase.step1.desc">OptiTrack光学式カメラ、Rokokoグローブ、ARKitフェイシャルキャプチャーまで — 全身から指先、表情まで精密にトラッキングします。</p>
|
||
<div class="showcase-features">
|
||
<div class="showcase-feature-item">
|
||
<span class="showcase-feature-icon"><i class="fa-solid fa-clapperboard" aria-hidden="true"></i></span>
|
||
<div>
|
||
<strong data-i18n="index.showcase.step1.feature1Title">OptiTrack カメラ 30台</strong>
|
||
<span data-i18n="index.showcase.step1.feature1Desc">サブミリメートル精度の光学式モーショントラッキング</span>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-feature-item">
|
||
<span class="showcase-feature-icon"><i class="fa-solid fa-hand" aria-hidden="true"></i></span>
|
||
<div>
|
||
<strong data-i18n="index.showcase.step1.feature2Title">Rokoko グローブ 5台</strong>
|
||
<span data-i18n="index.showcase.step1.feature2Desc">指の関節まで精密なハンドキャプチャー</span>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-feature-item">
|
||
<span class="showcase-feature-icon"><i class="fa-solid fa-mobile-screen" aria-hidden="true"></i></span>
|
||
<div>
|
||
<strong data-i18n="index.showcase.step1.feature3Title">ARKit フェイシャルキャプチャー (iPhone 5台)</strong>
|
||
<span data-i18n="index.showcase.step1.feature3Desc">iPhone基盤の高精度表情キャプチャー</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Step 2: 공간 -->
|
||
<div class="showcase-step" data-step="2">
|
||
<div class="showcase-mobile-media">
|
||
<img src="/images/studio/넓은 모션 캡쳐 공간 002.webp" alt="넓은 모션캡쳐 공간" loading="lazy">
|
||
</div>
|
||
<div class="showcase-step-label" data-i18n="index.showcase.step2.label">Space</div>
|
||
<h2 class="showcase-step-title" data-i18n="index.showcase.step2.title">広く最適化されたキャプチャー空間</h2>
|
||
<p class="showcase-step-desc" data-i18n="index.showcase.step2.desc">8m x 7m x 2.6m規模の専用キャプチャーボリュームで自由な動きが可能です。</p>
|
||
<div class="showcase-features">
|
||
<div class="showcase-feature-item">
|
||
<span class="showcase-feature-icon"><i class="fa-solid fa-ruler-combined" aria-hidden="true"></i></span>
|
||
<div>
|
||
<strong data-i18n="index.showcase.step2.feature1Title">8m × 7m × 2.6m</strong>
|
||
<span data-i18n="index.showcase.step2.feature1Desc">広々とした専用キャプチャーボリューム</span>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-feature-item">
|
||
<span class="showcase-feature-icon"><i class="fa-solid fa-gamepad" aria-hidden="true"></i></span>
|
||
<div>
|
||
<strong data-i18n="index.showcase.step2.feature2Title">リアルタイムストリーミング</strong>
|
||
<span data-i18n="index.showcase.step2.feature2Desc">ストリーミングルサービスでライブ配信</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Step 3: 서비스 -->
|
||
<div class="showcase-step" data-step="3">
|
||
<div class="showcase-mobile-media">
|
||
<iframe src="https://www.youtube-nocookie.com/embed/YO7-z_JxSjY?autoplay=1&mute=1&loop=1&playlist=YO7-z_JxSjY&controls=0&playsinline=1" title="모션캡쳐 결과물 영상" allow="autoplay; encrypted-media" allowfullscreen="" loading="lazy"></iframe>
|
||
</div>
|
||
<div class="showcase-step-label" data-i18n="index.showcase.step3.label">Services</div>
|
||
<h2 class="showcase-step-title" data-i18n="index.showcase.step3.title">主な活用分野</h2>
|
||
<p class="showcase-step-desc" data-i18n="index.showcase.step3.desc">多様なクリエイティブプロジェクトを専門オペレーターがサポートします。</p>
|
||
<div class="showcase-services-grid">
|
||
<div class="showcase-service">
|
||
<span><i class="fa-solid fa-masks-theater" aria-hidden="true"></i></span>
|
||
<strong data-i18n="index.showcase.step3.virtual">バーチャルコンテンツ</strong>
|
||
<span class="showcase-service-sub" data-i18n="index.showcase.step3.virtualSub">VTuber、バーチャルアイドル</span>
|
||
</div>
|
||
<div class="showcase-service">
|
||
<span><i class="fa-solid fa-gamepad" aria-hidden="true"></i></span>
|
||
<strong data-i18n="index.showcase.step3.game">ゲーム開発</strong>
|
||
<span class="showcase-service-sub" data-i18n="index.showcase.step3.gameSub">キャラクターアニメーション</span>
|
||
</div>
|
||
<div class="showcase-service">
|
||
<span><i class="fa-solid fa-film" aria-hidden="true"></i></span>
|
||
<strong data-i18n="index.showcase.step3.video">映像制作</strong>
|
||
<span class="showcase-service-sub" data-i18n="index.showcase.step3.videoSub">VFX、バーチャルプロダクション</span>
|
||
</div>
|
||
<div class="showcase-service">
|
||
<span><i class="fa-solid fa-vr-cardboard" aria-hidden="true"></i></span>
|
||
<strong data-i18n="index.showcase.step3.metaverse">メタバース</strong>
|
||
<span class="showcase-service-sub" data-i18n="index.showcase.step3.metaverseSub">3Dアバターコンテンツ</span>
|
||
</div>
|
||
</div>
|
||
<a href="/ja/services" class="btn btn-secondary showcase-btn" data-i18n="index.showcase.step3.btnServices">全サービスを見る</a>
|
||
</div>
|
||
|
||
<!-- Step 4: 스튜디오 -->
|
||
<div class="showcase-step" data-step="4">
|
||
<div class="showcase-mobile-media">
|
||
<img src="/images/studio/오퍼레이팅 공간 강조.webp" alt="오퍼레이팅 공간" loading="lazy">
|
||
</div>
|
||
<div class="showcase-step-label" data-i18n="index.showcase.step4.label">Studio</div>
|
||
<h2 class="showcase-step-title" data-i18n="index.showcase.step4.title">スタジオ空間</h2>
|
||
<p class="showcase-step-desc" data-i18n="index.showcase.step4.desc">メインキャプチャー空間からコントロールルーム、プライベートルームまで全ての環境が整っています。専門的な技術サポートと共に最適なキャプチャー体験を提供します。</p>
|
||
<div class="showcase-features">
|
||
<div class="showcase-feature-item">
|
||
<span class="showcase-feature-icon"><i class="fa-solid fa-screwdriver-wrench" aria-hidden="true"></i></span>
|
||
<div>
|
||
<strong data-i18n="index.showcase.step4.feature1Title">専門技術サポート</strong>
|
||
<span data-i18n="index.showcase.step4.feature1Desc">熟練オペレーターによるリアルタイムサポート</span>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-feature-item">
|
||
<span class="showcase-feature-icon"><i class="fa-solid fa-lock" aria-hidden="true"></i></span>
|
||
<div>
|
||
<strong data-i18n="index.showcase.step4.feature2Title">プライベート環境</strong>
|
||
<span data-i18n="index.showcase.step4.feature2Desc">独立した空間で集中作業</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href="/ja/gallery" class="btn btn-primary showcase-btn" data-i18n="index.showcase.step4.btnGallery">ギャラリーを見る</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 포트폴리오 미리보기 -->
|
||
<section class="portfolio-preview section bg-light">
|
||
<div class="container">
|
||
<div class="section-header reveal" data-reveal="up">
|
||
<h2 data-i18n="index.portfolio.title">ポートフォリオ</h2>
|
||
<p data-i18n="index.portfolio.desc">Mingle Studioで制作・協業したモーションキャプチャーコンテンツ</p>
|
||
</div>
|
||
|
||
<!-- 탭 버튼 -->
|
||
<div class="portfolio-tab-nav reveal" data-reveal="up" data-delay="100">
|
||
<button class="portfolio-tab-btn active" data-portfolio-tab="creator" data-i18n="index.portfolio.tabCreator">個人クリエイター</button>
|
||
<button class="portfolio-tab-btn" data-portfolio-tab="corporate" data-i18n="index.portfolio.tabCorporate">企業プロジェクト</button>
|
||
<button class="portfolio-tab-btn" data-portfolio-tab="shorts" data-i18n="index.portfolio.tabShorts">Shorts</button>
|
||
</div>
|
||
|
||
<!-- 개인 크리에이터 탭 -->
|
||
<div class="portfolio-tab-panel active" id="portfolio-creator">
|
||
<div class="portfolio-grid-v2 stagger-children">
|
||
<div class="portfolio-card reveal" data-reveal="up">
|
||
<div class="portfolio-video">
|
||
<iframe data-src="https://www.youtube.com/embed/jQTi8adbvaM" title="머쉬베놈 - 돌림판 CROA COVER" allowfullscreen="" loading="lazy"></iframe>
|
||
</div>
|
||
<div class="portfolio-card-info">
|
||
<h3>머쉬베놈 - 돌림판 🍓 CROA COVER</h3>
|
||
<div class="portfolio-tags">
|
||
<span class="portfolio-tag">커버</span>
|
||
<span class="portfolio-tag">CROA</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-card reveal" data-reveal="up">
|
||
<div class="portfolio-video">
|
||
<iframe data-src="https://www.youtube.com/embed/FecqTyUU6y0" title="QWER - 가짜아이돌 COVER BY VENY" allowfullscreen="" loading="lazy"></iframe>
|
||
</div>
|
||
<div class="portfolio-card-info">
|
||
<h3>QWER - 가짜아이돌 COVER BY VENY</h3>
|
||
<div class="portfolio-tags">
|
||
<span class="portfolio-tag">커버</span>
|
||
<span class="portfolio-tag">VENY</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-card reveal" data-reveal="up">
|
||
<div class="portfolio-video">
|
||
<iframe data-src="https://www.youtube.com/embed/ryliwrc0Yms" title="aesoopa 에숲파 Black Mamba MV" allowfullscreen="" loading="lazy"></iframe>
|
||
</div>
|
||
<div class="portfolio-card-info">
|
||
<h3>에숲파 'Black Mamba' MV</h3>
|
||
<div class="portfolio-tags">
|
||
<span class="portfolio-tag">MV</span>
|
||
<span class="portfolio-tag">에숲파</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 기업 프로젝트 탭 -->
|
||
<div class="portfolio-tab-panel" id="portfolio-corporate">
|
||
<div class="portfolio-grid-v2">
|
||
<div class="portfolio-card">
|
||
<div class="portfolio-video">
|
||
<iframe data-src="https://www.youtube.com/embed/OUdsyxPzS14" title="아이시아(IXIA) 꼭꼭 숨어라 MV" allowfullscreen="" loading="lazy"></iframe>
|
||
</div>
|
||
<div class="portfolio-card-info">
|
||
<h3>아이시아(IXIA) '꼭꼭 숨어라' MV</h3>
|
||
<div class="portfolio-tags">
|
||
<span class="portfolio-tag accent">기업</span>
|
||
<span class="portfolio-tag">뮤직비디오</span>
|
||
<span class="portfolio-tag">IXIA</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-card">
|
||
<div class="portfolio-video">
|
||
<iframe data-src="https://www.youtube.com/embed/KNABwaYmuA8" title="IXIA 데뷔 라이브 쇼케이스" allowfullscreen="" loading="lazy"></iframe>
|
||
</div>
|
||
<div class="portfolio-card-info">
|
||
<h3>IXIA 데뷔 라이브 쇼케이스</h3>
|
||
<div class="portfolio-tags">
|
||
<span class="portfolio-tag accent">기업</span>
|
||
<span class="portfolio-tag">라이브</span>
|
||
<span class="portfolio-tag">쇼케이스</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-card">
|
||
<div class="portfolio-video">
|
||
<iframe data-src="https://www.youtube.com/embed/FXnH-43NpFM?start=1725" title="IXIA 라이브룸" allowfullscreen="" loading="lazy"></iframe>
|
||
</div>
|
||
<div class="portfolio-card-info">
|
||
<h3>IXIA 라이브룸</h3>
|
||
<div class="portfolio-tags">
|
||
<span class="portfolio-tag accent">기업</span>
|
||
<span class="portfolio-tag">라이브</span>
|
||
<span class="portfolio-tag">IXIA</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Shorts 탭 -->
|
||
<div class="portfolio-tab-panel" id="portfolio-shorts">
|
||
<div class="portfolio-shorts-grid">
|
||
<div class="portfolio-card shorts">
|
||
<div class="portfolio-video shorts-video">
|
||
<iframe data-src="https://www.youtube.com/embed/OmpqKhMrb-U" title="STARGAZERS CHALLENGE" allowfullscreen="" loading="lazy"></iframe>
|
||
</div>
|
||
<div class="portfolio-card-info">
|
||
<h3>💕 STARGAZERS CHALLENGE</h3>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-card shorts">
|
||
<div class="portfolio-video shorts-video">
|
||
<iframe data-src="https://www.youtube.com/embed/hKwGjPfULFI" title="ELEVATE 챌린지" allowfullscreen="" loading="lazy"></iframe>
|
||
</div>
|
||
<div class="portfolio-card-info">
|
||
<h3>🤎 ELEVATE 챌린지</h3>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-card shorts">
|
||
<div class="portfolio-video shorts-video">
|
||
<iframe data-src="https://www.youtube.com/embed/ZWftEFNlvVc" title="일본 유행 챌린지" allowfullscreen="" loading="lazy"></iframe>
|
||
</div>
|
||
<div class="portfolio-card-info">
|
||
<h3>🍓 일본 유행 챌린지</h3>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-card shorts">
|
||
<div class="portfolio-video shorts-video">
|
||
<iframe data-src="https://www.youtube.com/embed/6tsYJ0z2q4s" title="바라밤 챌린지" allowfullscreen="" loading="lazy"></iframe>
|
||
</div>
|
||
<div class="portfolio-card-info">
|
||
<h3>💙 바라밤 챌린지</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mt-4 reveal" data-reveal="up">
|
||
<a href="/ja/portfolio" class="btn btn-secondary" data-i18n="index.portfolio.btnMore">全ポートフォリオを見る →</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 파트너 스트리머 -->
|
||
<section class="partner-streamer-section section">
|
||
<div class="container">
|
||
<div class="section-header reveal" data-reveal="fade">
|
||
<h2 data-i18n="index.partner.title">パートナーストリーマー</h2>
|
||
<p data-i18n="index.partner.desc">Mingle Studioと共にコンテンツを作るクリエイター</p>
|
||
</div>
|
||
|
||
<div class="streamer-grid stagger-children">
|
||
<div class="streamer-card reveal" data-reveal="zoom">
|
||
<div class="streamer-avatar">
|
||
<img src="/images/partners streamer/밍글 파트너 스트리머 구슬요.webp" alt="구슬요 프로필" loading="lazy">
|
||
</div>
|
||
<h3>구슬요</h3>
|
||
<p class="streamer-handle">@beadyo97</p>
|
||
<p class="streamer-desc" data-i18n="index.partner.streamer1.desc">グスルヨ！おしゃべり、歌、ゲーム、VRChatなど多彩なコンテンツを配信するバーチャルストリーマー</p>
|
||
<div class="streamer-tags">
|
||
<span class="streamer-tag">VTuber</span>
|
||
<span class="streamer-tag" data-i18n="index.partner.streamer1.tagSong">歌</span>
|
||
<span class="streamer-tag" data-i18n="index.partner.streamer1.tagGame">ゲーム</span>
|
||
<span class="streamer-tag">VRChat</span>
|
||
</div>
|
||
<div class="streamer-links">
|
||
<a href="https://ch.sooplive.co.kr/beadyo97" target="_blank" rel="noopener">SOOP</a>
|
||
<a href="https://www.youtube.com/@beadyo97" target="_blank" rel="noopener">YouTube</a>
|
||
<a href="https://www.instagram.com/bead.yo" target="_blank" rel="noopener">Instagram</a>
|
||
<a href="https://x.com/beadyo97" target="_blank" rel="noopener">X</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 방문 크리에이터 사인 -->
|
||
<section class="creator-signs-section section">
|
||
<div class="container">
|
||
<div class="section-header reveal" data-reveal="fade">
|
||
<h2 data-i18n="index.creatorSigns.title">来訪クリエイター</h2>
|
||
<p data-i18n="index.creatorSigns.desc">Mingle Studioを訪れたクリエイターたちのサイン</p>
|
||
</div>
|
||
|
||
<div class="signs-marquee">
|
||
<div class="signs-marquee-track">
|
||
<!-- 원본 10개 -->
|
||
<div class="sign-item"><img src="/images/sign/김마늘.jpg" alt="김마늘 사인"><span class="sign-name">김마늘</span></div>
|
||
<div class="sign-item"><img src="/images/sign/만타.jpg" alt="만타 사인"><span class="sign-name">만타</span></div>
|
||
<div class="sign-item"><img src="/images/sign/문모모.jpg" alt="문모모 사인"><span class="sign-name">문모모</span></div>
|
||
<div class="sign-item"><img src="/images/sign/베니.jpg" alt="베니 사인"><span class="sign-name">베니</span></div>
|
||
<div class="sign-item"><img src="/images/sign/시에.jpg" alt="시에 사인"><span class="sign-name">시에</span></div>
|
||
<div class="sign-item"><img src="/images/sign/요나카.jpg" alt="요나카 사인"><span class="sign-name">요나카</span></div>
|
||
<div class="sign-item"><img src="/images/sign/이무지.jpg" alt="이무지 사인"><span class="sign-name">이무지</span></div>
|
||
<div class="sign-item"><img src="/images/sign/지한이또.jpg" alt="지한이또 사인"><span class="sign-name">지한이또</span></div>
|
||
<div class="sign-item"><img src="/images/sign/최또.jpg" alt="최또 사인"><span class="sign-name">최또</span></div>
|
||
<div class="sign-item"><img src="/images/sign/치요.jpg" alt="치요 사인"><span class="sign-name">치요</span></div>
|
||
<!-- 복제 1 -->
|
||
<div class="sign-item"><img src="/images/sign/김마늘.jpg" alt="김마늘 사인"><span class="sign-name">김마늘</span></div>
|
||
<div class="sign-item"><img src="/images/sign/만타.jpg" alt="만타 사인"><span class="sign-name">만타</span></div>
|
||
<div class="sign-item"><img src="/images/sign/문모모.jpg" alt="문모모 사인"><span class="sign-name">문모모</span></div>
|
||
<div class="sign-item"><img src="/images/sign/베니.jpg" alt="베니 사인"><span class="sign-name">베니</span></div>
|
||
<div class="sign-item"><img src="/images/sign/시에.jpg" alt="시에 사인"><span class="sign-name">시에</span></div>
|
||
<div class="sign-item"><img src="/images/sign/요나카.jpg" alt="요나카 사인"><span class="sign-name">요나카</span></div>
|
||
<div class="sign-item"><img src="/images/sign/이무지.jpg" alt="이무지 사인"><span class="sign-name">이무지</span></div>
|
||
<div class="sign-item"><img src="/images/sign/지한이또.jpg" alt="지한이또 사인"><span class="sign-name">지한이또</span></div>
|
||
<div class="sign-item"><img src="/images/sign/최또.jpg" alt="최또 사인"><span class="sign-name">최또</span></div>
|
||
<div class="sign-item"><img src="/images/sign/치요.jpg" alt="치요 사인"><span class="sign-name">치요</span></div>
|
||
<!-- 복제 2 -->
|
||
<div class="sign-item"><img src="/images/sign/김마늘.jpg" alt="김마늘 사인"><span class="sign-name">김마늘</span></div>
|
||
<div class="sign-item"><img src="/images/sign/만타.jpg" alt="만타 사인"><span class="sign-name">만타</span></div>
|
||
<div class="sign-item"><img src="/images/sign/문모모.jpg" alt="문모모 사인"><span class="sign-name">문모모</span></div>
|
||
<div class="sign-item"><img src="/images/sign/베니.jpg" alt="베니 사인"><span class="sign-name">베니</span></div>
|
||
<div class="sign-item"><img src="/images/sign/시에.jpg" alt="시에 사인"><span class="sign-name">시에</span></div>
|
||
<div class="sign-item"><img src="/images/sign/요나카.jpg" alt="요나카 사인"><span class="sign-name">요나카</span></div>
|
||
<div class="sign-item"><img src="/images/sign/이무지.jpg" alt="이무지 사인"><span class="sign-name">이무지</span></div>
|
||
<div class="sign-item"><img src="/images/sign/지한이또.jpg" alt="지한이또 사인"><span class="sign-name">지한이또</span></div>
|
||
<div class="sign-item"><img src="/images/sign/최또.jpg" alt="최또 사인"><span class="sign-name">최또</span></div>
|
||
<div class="sign-item"><img src="/images/sign/치요.jpg" alt="치요 사인"><span class="sign-name">치요</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 기업 클라이언트 섹션 -->
|
||
<section class="partners-section section">
|
||
<div class="container">
|
||
<div class="section-header reveal" data-reveal="up">
|
||
<h2 data-i18n="index.clients.title">クライアント</h2>
|
||
<p data-i18n="index.clients.desc">様々な分野の企業と共に革新的なモーションキャプチャーコンテンツを制作しています</p>
|
||
</div>
|
||
|
||
<!-- 클라이언트 로고 마키 -->
|
||
<div class="partners-marquee">
|
||
<div class="partners-marquee-track">
|
||
<div class="partner-logo-item"><img src="/images/partners/메가메타.jpg" alt="메가메타 - 밍글 스튜디오 클라이언트" class="partner-logo"></div>
|
||
<div class="partner-logo-item"><img src="/images/partners/(주)세광종합기술단.png" alt="(주)세광종합기술단 - 밍글 스튜디오 클라이언트" class="partner-logo"></div>
|
||
<!-- 무한 루프용 복제 -->
|
||
<div class="partner-logo-item"><img src="/images/partners/메가메타.jpg" alt="메가메타" class="partner-logo"></div>
|
||
<div class="partner-logo-item"><img src="/images/partners/(주)세광종합기술단.png" alt="(주)세광종합기술단" class="partner-logo"></div>
|
||
<div class="partner-logo-item"><img src="/images/partners/메가메타.jpg" alt="메가메타" class="partner-logo"></div>
|
||
<div class="partner-logo-item"><img src="/images/partners/(주)세광종합기술단.png" alt="(주)세광종합기술단" class="partner-logo"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- FAQ 바로가기 -->
|
||
<section class="faq-shortcut section">
|
||
<div class="container">
|
||
<div class="faq-shortcut-inner reveal" data-reveal="up">
|
||
<div class="faq-shortcut-content">
|
||
<span class="faq-shortcut-label" data-i18n="index.faqShortcut.label">FAQ</span>
|
||
<h2 class="faq-shortcut-title" data-i18n="index.faqShortcut.title">初めてで不安ですか？</h2>
|
||
<p class="faq-shortcut-desc" data-i18n="index.faqShortcut.desc">モーションキャプチャーが初めてでも大丈夫です。予約から撮影までよくある質問をまとめました。</p>
|
||
</div>
|
||
<div class="faq-shortcut-actions">
|
||
<a href="/ja/qna" class="btn btn-primary btn-lg" data-i18n="index.faqShortcut.btnFaq">よくある質問を見る</a>
|
||
<a href="#inline-contact" class="btn btn-outline btn-lg" data-i18n="index.faqShortcut.btnOnline"><i class="fa-solid fa-paper-plane" style="margin-right:6px"></i>オンラインお問い合わせ</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 온라인 문의 폼 (메인 페이지 임베드) -->
|
||
<section class="section" id="inline-contact">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 data-i18n="contact.form.title">オンラインお問い合わせ</h2>
|
||
<p data-i18n="contact.form.desc">以下のフォームにご記入いただければ、迅速にご返答いたします</p>
|
||
</div>
|
||
|
||
<div class="contact-form-wrapper">
|
||
<form id="contactForm" class="contact-form" novalidate>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="name" data-i18n="contact.form.name">お名前 <span class="required">*</span></label>
|
||
<input type="text" id="name" name="name" required placeholder="山田太郎" data-i18n-placeholder="contact.form.namePlaceholder">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="email" data-i18n="contact.form.email">メール <span class="required">*</span></label>
|
||
<input type="email" id="email" name="email" required placeholder="example@email.com">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="phone" data-i18n="contact.form.phone">電話番号</label>
|
||
<input type="tel" id="phone" name="phone" placeholder="010-0000-0000">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="service" data-i18n="contact.form.service">お問い合わせ種類 <span class="required">*</span></label>
|
||
<select id="service" name="service" required>
|
||
<option value="" data-i18n="contact.form.serviceDefault">選択してください</option>
|
||
<option value="studio_rental" data-i18n="contact.form.serviceRental">スタジオレンタル</option>
|
||
<option value="motion_recording" data-i18n="contact.form.serviceMotion">モーション録画</option>
|
||
<option value="music_video" data-i18n="contact.form.serviceMV">ミュージックビデオ制作</option>
|
||
<option value="partnership" data-i18n="contact.form.servicePartner">提携・協力</option>
|
||
<option value="other" data-i18n="contact.form.serviceOther">その他</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="message" data-i18n="contact.form.message">お問い合わせ内容 <span class="required">*</span></label>
|
||
<textarea id="message" name="message" required rows="5" placeholder="プロジェクト内容、ご希望のスケジュールなどをご自由にご記入ください" data-i18n-placeholder="contact.form.messagePlaceholder"></textarea>
|
||
<p class="field-hint" data-i18n="contact.form.sensitiveWarning">※ マイナンバーや口座番号などの機密個人情報を入力しないでください。</p>
|
||
</div>
|
||
|
||
<div class="checkbox-group">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="privacyConsent" name="privacyConsent" required>
|
||
<span class="checkmark"></span>
|
||
<span data-i18n="contact.form.privacyAgree">個人情報の収集および利用に同意します。（必須）</span>
|
||
</label>
|
||
<a href="javascript:void(0)" class="privacy-link" onclick="openPrivacyModal()" data-i18n="contact.form.privacyView">個人情報処理方針を見る</a>
|
||
</div>
|
||
|
||
<div class="privacy-summary">
|
||
<ul>
|
||
<li data-i18n="contact.form.privacyPurpose">収集目的：お問い合わせの受付および回答</li>
|
||
<li data-i18n="contact.form.privacyItems">収集項目：氏名、メール、電話番号、お問い合わせ内容</li>
|
||
<li data-i18n="contact.form.privacyPeriod">保有期間：7日後に自動削除</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="form-submit">
|
||
<button type="submit" id="submitBtn" class="btn btn-primary btn-lg btn-submit-disabled" disabled data-i18n="contact.form.submit">お問い合わせを送信</button>
|
||
<button type="reset" class="btn btn-outline btn-lg" data-i18n="contact.form.reset">リセット</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 개인정보처리방침 모달 -->
|
||
<div id="privacyModal" class="modal" onclick="if(event.target===this)closePrivacyModal()" role="dialog" aria-modal="true" aria-labelledby="privacyModalTitle">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3 id="privacyModalTitle">個人情報の収集および利用に関する同意書</h3>
|
||
<button class="modal-close" onclick="closePrivacyModal()" aria-label="閉じる">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>ミングルスタジオ（以下「会社」）は、「個人情報保護法」に基づき、お客様の個人情報を保護するために以下のとおり同意を求めます。</p>
|
||
<h4>1. 収集および利用の目的</h4>
|
||
<ul><li>お問い合わせの受付および回答</li><li>サービス相談および見積もり案内</li><li>お問い合わせ処理結果の通知</li></ul>
|
||
<h4>2. 収集する項目</h4>
|
||
<ul><li><strong>必須項目：</strong>氏名、メールアドレス、お問い合わせ種類、お問い合わせ内容</li><li><strong>任意項目：</strong>電話番号</li></ul>
|
||
<h4>3. 保有および利用期間</h4>
|
||
<p>収集された個人情報は<strong>お問い合わせ日から7日間</strong>保有し、その後自動的に削除されます。</p>
|
||
<h4>4. 削除手順および方法</h4>
|
||
<ul><li>保有期間が経過した個人情報は自動削除システムにより速やかに削除されます。</li><li>電子ファイル形式の情報は復元不可能な方法で完全に削除します。</li></ul>
|
||
<h4>5. 第三者提供および海外移転</h4>
|
||
<p>会社は原則として個人情報を第三者に提供しません。ただし、お問い合わせ処理のため、以下のとおり海外に移転されます。</p>
|
||
<ul><li><strong>移転先：</strong>アメリカ / Discord Inc.</li><li><strong>方法：</strong>専用API経由でリアルタイム送信</li><li><strong>項目：</strong>氏名、メール、電話番号（任意）、お問い合わせ種類、内容</li><li><strong>目的：</strong>Discordを利用した迅速なお問い合わせ対応</li><li><strong>保有期間：</strong>送信後7日間保管後、自動削除</li></ul>
|
||
<h4>6. 情報主体の権利</h4>
|
||
<ul><li>個人情報の閲覧請求</li><li>訂正請求</li><li>削除請求</li><li>処理停止請求</li></ul>
|
||
<h4>7. 安全性確保措置</h4>
|
||
<ul><li>データ暗号化（HTTPS/TLS）</li><li>アクセス権限の制限</li><li>自動削除システム（7日後削除）</li></ul>
|
||
<h4>8. 同意拒否の権利</h4>
|
||
<p>同意を拒否する権利があります。ただし、必須項目への同意を拒否された場合、お問い合わせサービスのご利用が制限されます。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
function openPrivacyModal() {
|
||
var m = document.getElementById('privacyModal');
|
||
if (!m) return;
|
||
m.classList.add('active');
|
||
m.style.display = 'flex';
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
function closePrivacyModal() {
|
||
var m = document.getElementById('privacyModal');
|
||
if (!m) return;
|
||
m.classList.remove('active');
|
||
m.style.display = '';
|
||
document.body.style.overflow = '';
|
||
}
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
var cb = document.getElementById('privacyConsent');
|
||
var btn = document.getElementById('submitBtn');
|
||
if (cb && btn) {
|
||
cb.addEventListener('change', function() {
|
||
btn.disabled = !cb.checked;
|
||
btn.classList.toggle('btn-submit-disabled', !cb.checked);
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<!-- CTA 섹션 -->
|
||
<section class="cta-section">
|
||
<div class="cta-bg"></div>
|
||
<div class="container text-center">
|
||
<div class="cta-label reveal" data-reveal="fade" data-i18n="index.cta.label">Get Started</div>
|
||
<h2 class="cta-title reveal" data-reveal="fade" data-delay="100" data-i18n-html="index.cta.title">あなたのアイデアを、<br>動きで形にします</h2>
|
||
<p class="cta-description reveal" data-reveal="up" data-delay="200" data-i18n="index.cta.desc">プロのモーションキャプチャースタジオで、クリエイティブの新たな可能性を体験してください</p>
|
||
<div class="cta-buttons reveal" data-reveal="up" data-delay="300">
|
||
<a href="/ja/contact" class="btn btn-primary btn-lg" data-i18n="index.cta.btnReserve">ご予約・お問い合わせ</a>
|
||
<a href="https://m.booking.naver.com/booking/10/bizes/1468174/items/6949481" target="_blank" class="btn btn-outline btn-lg" data-i18n="index.cta.btnNaver">Naver予約</a>
|
||
</div>
|
||
|
||
<div class="contact-info-quick reveal" data-reveal="up" data-delay="400">
|
||
<div class="info-quick-item">
|
||
<span class="info-quick-icon"><i class="fa-solid fa-envelope" aria-hidden="true"></i></span>
|
||
<div>
|
||
<span class="info-quick-label" data-i18n="index.cta.infoReservation">ご予約</span>
|
||
<span class="info-quick-value">help@minglestudio.co.kr</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-quick-item">
|
||
<span class="info-quick-icon"><i class="fa-solid fa-briefcase" aria-hidden="true"></i></span>
|
||
<div>
|
||
<span class="info-quick-label" data-i18n="index.cta.infoBusiness">ビジネス</span>
|
||
<span class="info-quick-value">minglestudio@minglestudio.co.kr</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-quick-item">
|
||
<span class="info-quick-icon"><i class="fa-brands fa-discord" aria-hidden="true"></i></span>
|
||
<div>
|
||
<span class="info-quick-label" data-i18n="index.cta.infoDiscord">Discord</span>
|
||
<a href="https://discord.com/users/1402264505110495354" target="_blank" class="info-quick-value">minglestudio_mocap</a>
|
||
</div>
|
||
</div>
|
||
<div class="info-quick-item">
|
||
<span class="info-quick-icon"><i class="fa-solid fa-comment" aria-hidden="true"></i></span>
|
||
<div>
|
||
<span class="info-quick-label" data-i18n="index.cta.infoKakao">KakaoTalk</span>
|
||
<a href="https://open.kakao.com/o/sXOK0Iji" target="_blank" rel="noopener noreferrer" class="info-quick-value" data-i18n="index.cta.infoKakaoDesc">オープンチャット相談</a>
|
||
</div>
|
||
</div>
|
||
</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> minglestudio@minglestudio.co.kr</a></li>
|
||
<li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> help@minglestudio.co.kr</a></li>
|
||
<li><a href="https://discord.com/users/1402264505110495354" target="_blank"><i class="fa-brands fa-discord" aria-hidden="true"></i> minglestudio_mocap</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>
|
||
|
||
<!-- JavaScript -->
|
||
<script src="/js/i18n.js"></script>
|
||
<script src="/js/common.js"></script>
|
||
<script src="/js/contact.js"></script>
|
||
<script src="/js/main.js"></script>
|
||
<script src="/js/popup.js"></script>
|
||
|
||
</body></html> |