414a91ef64
- en/ja/zh index.html에 contact.css, contact.js 추가 - 온라인 문의폼 + 개인정보 모달 임베드 - FAQ 바로가기에 온라인 문의하기 버튼 추가 - CTA 섹션 오시는 길 → 카카오톡 오픈채팅 카드로 교체 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1092 lines
68 KiB
HTML
1092 lines
68 KiB
HTML
<!DOCTYPE html><html lang="en"><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 - Motion Capture Creative 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/en/">
|
||
|
||
<!-- 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="A professional motion capture studio equipped with cutting-edge OptiTrack systems and specialized equipment. Experience new possibilities in virtual content creation at Incheon Techno Valley.">
|
||
<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 - Motion Capture Creative Studio">
|
||
<meta property="og:description" content="A professional motion capture studio equipped with cutting-edge OptiTrack systems and specialized equipment">
|
||
<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">Skip to content</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">Pricing Update Notice</span></h2>
|
||
<p class="popup-subtitle" data-i18n="index.popup.subtitle">Effective from March 2026</p>
|
||
<div class="popup-badge" data-i18n="index.popup.badge">In Effect</div>
|
||
</div>
|
||
|
||
<div class="popup-body">
|
||
<div class="popup-section">
|
||
<h3 class="popup-section-title" data-i18n="index.popup.mainChanges">Key Changes</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">Discount Event Ended</span></span>
|
||
<span class="change-badge badge-end">종료</span>
|
||
</div>
|
||
<p class="change-description" data-i18n-html="index.popup.discountEndDesc">The grand opening 20% discount event ended on <strong>February 28</strong>, and standard pricing is now in effect.</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">New Streamingle 4-Hour Package</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">Enjoy the same benefits as the existing Streamingle service (6 hours) in a 4-hour package.</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">Referral Program Launched</span></span>
|
||
<span class="change-badge badge-new">NEW</span>
|
||
</div>
|
||
<p class="change-description" data-i18n-html="index.popup.referralDesc">Refer a friend and both the referrer and the referred receive a <strong>20% discount coupon</strong>. (One-time use, cannot be combined with other offers)</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="popup-notice">
|
||
<p data-i18n="index.popup.notice">※ Updated pricing has been reflected on the Services page</p>
|
||
</div>
|
||
|
||
<div class="popup-info">
|
||
<div class="info-item">
|
||
<div class="info-label" data-i18n="index.popup.effectiveDate">Effective Date</div>
|
||
<div class="info-value" data-i18n="index.popup.effectiveDateValue">March 2026 ~</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label" data-i18n="index.popup.inquiryEmail">Inquiry Email</div>
|
||
<div class="info-value">help@minglestudio.co.kr</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="popup-cta" id="popupCtaBtn" data-i18n="index.popup.ctaBtn">View Current Pricing →</button>
|
||
</div>
|
||
|
||
<div class="popup-footer">
|
||
<div class="popup-checkbox">
|
||
<input type="checkbox" id="dontShowToday">
|
||
<label for="dontShowToday" data-i18n="index.popup.dontShowToday">Don't show again today</label>
|
||
</div>
|
||
<button class="popup-close-btn" id="popupCloseBtn" data-i18n="index.popup.close">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 헤더 -->
|
||
<div id="header-placeholder">
|
||
<!-- 공통 헤더 컴포넌트 -->
|
||
<nav class="navbar" aria-label="메인 내비게이션">
|
||
<div class="nav-container">
|
||
<div class="nav-logo">
|
||
<a href="/en/">
|
||
<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="/en/about" class="nav-link" data-i18n="header.nav.about">About</a></li>
|
||
<li><a href="/en/services" class="nav-link" data-i18n="header.nav.services">Services</a></li>
|
||
<li><a href="/en/portfolio" class="nav-link" data-i18n="header.nav.portfolio">Portfolio</a></li>
|
||
<li><a href="/en/gallery" class="nav-link" data-i18n="header.nav.gallery">Gallery</a></li>
|
||
|
||
<li><a href="/en/contact" class="nav-link" data-i18n="header.nav.contact">Contact</a></li>
|
||
<li><a href="/en/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="Select language" 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">A space where technology, creativity, and passion blend together<br>to create something new</p>
|
||
<div class="hero-buttons">
|
||
<a href="/en/about" class="btn btn-primary" data-i18n="index.hero.btnAbout">About Us</a>
|
||
<a href="/en/contact" class="btn btn-outline" data-i18n="index.hero.btnContact">Book Now</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 Cameras</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">Capture Space</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">Hourly Rental</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">Cutting-Edge Motion Capture System</h2>
|
||
<p class="showcase-step-desc" data-i18n="index.showcase.step1.desc">From OptiTrack optical cameras and Rokoko gloves to ARKit facial capture — we precisely track full-body movement, fingertips, and facial expressions.</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">30 OptiTrack Cameras</strong>
|
||
<span data-i18n="index.showcase.step1.feature1Desc">Sub-millimeter optical motion tracking</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">5 Rokoko Gloves</strong>
|
||
<span data-i18n="index.showcase.step1.feature2Desc">Precise hand capture down to individual finger joints</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 Facial Capture (5 iPhones)</strong>
|
||
<span data-i18n="index.showcase.step1.feature3Desc">iPhone-based high-precision facial capture</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">Spacious, Optimized Capture Area</h2>
|
||
<p class="showcase-step-desc" data-i18n="index.showcase.step2.desc">Our dedicated 8m x 7m x 2.6m capture volume allows for unrestricted movement.</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">Spacious dedicated capture volume</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">Live Streaming</strong>
|
||
<span data-i18n="index.showcase.step2.feature2Desc">Live broadcasting via Streamingle service</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">Key Application Areas</h2>
|
||
<p class="showcase-step-desc" data-i18n="index.showcase.step3.desc">Our professional operators support a wide range of creative projects.</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">Virtual Content</strong>
|
||
<span class="showcase-service-sub" data-i18n="index.showcase.step3.virtualSub">VTuber, Virtual Idols</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">Game Development</strong>
|
||
<span class="showcase-service-sub" data-i18n="index.showcase.step3.gameSub">Character Animation</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">Video Production</strong>
|
||
<span class="showcase-service-sub" data-i18n="index.showcase.step3.videoSub">VFX, Virtual Production</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">Metaverse</strong>
|
||
<span class="showcase-service-sub" data-i18n="index.showcase.step3.metaverseSub">3D Avatar Content</span>
|
||
</div>
|
||
</div>
|
||
<a href="/en/services" class="btn btn-secondary showcase-btn" data-i18n="index.showcase.step3.btnServices">View All Services</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">Studio Spaces</h2>
|
||
<p class="showcase-step-desc" data-i18n="index.showcase.step4.desc">From the main capture area to the control room and private rooms, everything is fully equipped. We provide the optimal capture experience with professional technical support.</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">Professional Tech Support</strong>
|
||
<span data-i18n="index.showcase.step4.feature1Desc">Real-time assistance from experienced operators</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">Private Environment</strong>
|
||
<span data-i18n="index.showcase.step4.feature2Desc">Focused work in a dedicated private space</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href="/en/gallery" class="btn btn-primary showcase-btn" data-i18n="index.showcase.step4.btnGallery">View Gallery</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">Portfolio</h2>
|
||
<p data-i18n="index.portfolio.desc">Motion capture content produced and collaborated on at 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">Individual Creators</button>
|
||
<button class="portfolio-tab-btn" data-portfolio-tab="corporate" data-i18n="index.portfolio.tabCorporate">Corporate Projects</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="/en/portfolio" class="btn btn-secondary" data-i18n="index.portfolio.btnMore">View Full Portfolio →</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">Partner Streamers</h2>
|
||
<p data-i18n="index.partner.desc">Creators making content with 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">Guseulyo! A virtual streamer featuring diverse content including chatting, singing, gaming, VRChat, and more</p>
|
||
<div class="streamer-tags">
|
||
<span class="streamer-tag">VTuber</span>
|
||
<span class="streamer-tag" data-i18n="index.partner.streamer1.tagSong">Singing</span>
|
||
<span class="streamer-tag" data-i18n="index.partner.streamer1.tagGame">Gaming</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">Visiting Creators</h2>
|
||
<p data-i18n="index.creatorSigns.desc">Signatures from creators who visited 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">Clients</h2>
|
||
<p data-i18n="index.clients.desc">We create innovative motion capture content with companies across various industries</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">New to Motion Capture?</h2>
|
||
<p class="faq-shortcut-desc" data-i18n="index.faqShortcut.desc">No worries if it's your first time. We've organized frequently asked questions from booking to filming.</p>
|
||
</div>
|
||
<div class="faq-shortcut-actions">
|
||
<a href="/en/qna" class="btn btn-primary btn-lg" data-i18n="index.faqShortcut.btnFaq">View FAQ</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>Online Inquiry</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 온라인 문의 폼 (메인 페이지 임베드) -->
|
||
<section class="section" id="inline-contact">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 data-i18n="contact.form.title">Online Inquiry</h2>
|
||
<p data-i18n="contact.form.desc">Fill out the form below and we'll get back to you promptly</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">Name <span class="required">*</span></label>
|
||
<input type="text" id="name" name="name" required placeholder="John Doe" data-i18n-placeholder="contact.form.namePlaceholder">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="email" data-i18n="contact.form.email">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">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">Inquiry Type <span class="required">*</span></label>
|
||
<select id="service" name="service" required>
|
||
<option value="" data-i18n="contact.form.serviceDefault">Please select</option>
|
||
<option value="studio_rental" data-i18n="contact.form.serviceRental">Studio Rental</option>
|
||
<option value="motion_recording" data-i18n="contact.form.serviceMotion">Motion Recording</option>
|
||
<option value="music_video" data-i18n="contact.form.serviceMV">Music Video Production</option>
|
||
<option value="partnership" data-i18n="contact.form.servicePartner">Partnership</option>
|
||
<option value="other" data-i18n="contact.form.serviceOther">Other</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="message" data-i18n="contact.form.message">Message <span class="required">*</span></label>
|
||
<textarea id="message" name="message" required rows="5" placeholder="Please describe your project, preferred schedule, etc." data-i18n-placeholder="contact.form.messagePlaceholder"></textarea>
|
||
<p class="field-hint" data-i18n="contact.form.sensitiveWarning">※ Please do not enter sensitive personal information such as ID numbers or bank account numbers.</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">I agree to the collection and use of personal information. (Required)</span>
|
||
</label>
|
||
<a href="javascript:void(0)" class="privacy-link" onclick="openPrivacyModal()" data-i18n="contact.form.privacyView">View Privacy Policy</a>
|
||
</div>
|
||
|
||
<div class="privacy-summary">
|
||
<ul>
|
||
<li data-i18n="contact.form.privacyPurpose">Purpose: Inquiry reception and response</li>
|
||
<li data-i18n="contact.form.privacyItems">Items: Name, email, phone number, inquiry details</li>
|
||
<li data-i18n="contact.form.privacyPeriod">Retention: Auto-deleted after 7 days</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">Send Inquiry</button>
|
||
<button type="reset" class="btn btn-outline btn-lg" data-i18n="contact.form.reset">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">Consent for Collection and Use of Personal Information</h3>
|
||
<button class="modal-close" onclick="closePrivacyModal()" aria-label="Close">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>Mingle Studio ("Company") seeks your consent for the collection and use of personal information in accordance with the Personal Information Protection Act.</p>
|
||
<h4>1. Purpose of Collection and Use</h4>
|
||
<ul><li>Receiving and responding to customer inquiries</li><li>Service consultation and quotation</li><li>Notification of inquiry processing results</li></ul>
|
||
<h4>2. Items Collected</h4>
|
||
<ul><li><strong>Required:</strong> Name, email, inquiry type, message</li><li><strong>Optional:</strong> Phone number</li></ul>
|
||
<h4>3. Retention Period</h4>
|
||
<p>Collected personal information is retained for <strong>7 days from the date of inquiry</strong> and automatically deleted thereafter.</p>
|
||
<h4>4. Destruction Procedure</h4>
|
||
<ul><li>Personal information past the retention period is promptly destroyed by the automatic deletion system.</li><li>Electronic files are completely deleted so they cannot be recovered.</li></ul>
|
||
<h4>5. Third-Party Provision and Overseas Transfer</h4>
|
||
<p>The Company does not provide personal information to third parties in principle. However, for inquiry processing, information may be transferred overseas as follows:</p>
|
||
<ul><li><strong>Country/Recipient:</strong> USA / Discord Inc.</li><li><strong>Method:</strong> Real-time transmission via dedicated API</li><li><strong>Items:</strong> Name, email, phone (optional), inquiry type, message</li><li><strong>Purpose:</strong> Prompt inquiry handling via Discord</li><li><strong>Retention:</strong> 7 days after transmission, then auto-deleted</li></ul>
|
||
<h4>6. Rights of Data Subjects</h4>
|
||
<ul><li>Right to access personal information</li><li>Right to correction</li><li>Right to deletion</li><li>Right to suspend processing</li></ul>
|
||
<h4>7. Safety Measures</h4>
|
||
<ul><li>Data encryption (HTTPS/TLS)</li><li>Access restriction (authorized personnel only)</li><li>Automatic deletion system (7-day retention)</li></ul>
|
||
<h4>8. Right to Refuse Consent</h4>
|
||
<p>You have the right to refuse consent. However, refusal of required items will restrict use of the inquiry service.</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">Your Ideas,<br>Brought to Life Through Motion</h2>
|
||
<p class="cta-description reveal" data-reveal="up" data-delay="200" data-i18n="index.cta.desc">Experience new creative possibilities at our professional motion capture studio</p>
|
||
<div class="cta-buttons reveal" data-reveal="up" data-delay="300">
|
||
<a href="/en/contact" class="btn btn-primary btn-lg" data-i18n="index.cta.btnReserve">Book Now</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 Booking</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">Reservations</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">Business</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">Open Chat Consultation</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">Company Info</h3>
|
||
<ul class="footer-list">
|
||
<li><strong data-i18n="footer.companyName">Mingle Studio</strong></li>
|
||
<li data-i18n="footer.ceo">CEO: 김희진</li>
|
||
<li data-i18n="footer.businessNumber">Business Registration No.: 208-12-73755</li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-section">
|
||
<h3 class="footer-heading" data-i18n="footer.contact">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">Business Inquiry</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">Reservation Inquiry</span></a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-section">
|
||
<h3 class="footer-heading" data-i18n="footer.directions">Directions</h3>
|
||
<ul class="footer-list">
|
||
<li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> <span data-i18n="footer.address">236, Jubuto-ro, Bupyeong-gu, Incheon</span></li>
|
||
<li data-i18n="footer.addressDetail">Incheon Techno Valley U1 Center, Bldg. A, Room 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> |