2026-01-07 16:41:07 +09:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="ko">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>My Octopus 홍보 영상</title>
|
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
|
|
|
|
<style>
|
|
|
|
|
:root {
|
|
|
|
|
--brand-color: #4f46e5;
|
|
|
|
|
--glass-bg: rgba(255, 255, 255, 0.03);
|
|
|
|
|
--glass-border: rgba(255, 255, 255, 0.1);
|
|
|
|
|
--glass-blur: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
font-family: 'Noto Sans KR', sans-serif;
|
|
|
|
|
background-color: #020617;
|
|
|
|
|
color: #f8fafc;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.gradient-bg {
|
|
|
|
|
background: radial-gradient(circle at 0% 0%, #0f172a 0%, #020617 100%);
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.blob {
|
|
|
|
|
position: absolute;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
filter: blur(80px);
|
|
|
|
|
z-index: 0;
|
|
|
|
|
opacity: 0.4;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
animation: float 20s infinite alternate;
|
|
|
|
|
}
|
|
|
|
|
.blob-1 { width: 500px; height: 500px; background: #6366f1; top: -100px; right: -100px; }
|
|
|
|
|
.blob-2 { width: 400px; height: 400px; background: #db2777; bottom: 10%; left: -100px; opacity: 0.3; }
|
|
|
|
|
|
|
|
|
|
@keyframes float {
|
|
|
|
|
0% { transform: translate(0, 0) scale(1); }
|
|
|
|
|
100% { transform: translate(40px, 60px) scale(1.1); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-glass {
|
|
|
|
|
background: var(--glass-bg);
|
|
|
|
|
backdrop-filter: blur(var(--glass-blur));
|
|
|
|
|
-webkit-backdrop-filter: blur(var(--glass-blur));
|
|
|
|
|
border: 1px solid var(--glass-border);
|
|
|
|
|
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
|
|
|
|
|
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
|
|
|
|
|
}
|
|
|
|
|
.card-glass:hover {
|
|
|
|
|
transform: translateY(-8px);
|
|
|
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
|
|
|
background: rgba(255, 255, 255, 0.05);
|
|
|
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes slideUp {
|
|
|
|
|
from { opacity: 0; transform: translateY(30px); }
|
|
|
|
|
to { opacity: 1; transform: translateY(0); }
|
|
|
|
|
}
|
|
|
|
|
.animate-slide-up {
|
|
|
|
|
animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-container {
|
|
|
|
|
position: relative;
|
|
|
|
|
padding-bottom: 56.25%;
|
|
|
|
|
height: 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
border-radius: 1rem;
|
|
|
|
|
background: #000;
|
|
|
|
|
}
|
|
|
|
|
.video-container iframe {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body class="gradient-bg min-h-screen flex flex-col items-center justify-center py-20 px-4">
|
|
|
|
|
<div class="blob blob-1"></div>
|
|
|
|
|
<div class="blob blob-2"></div>
|
|
|
|
|
|
|
|
|
|
<div class="max-w-6xl w-full relative z-10">
|
|
|
|
|
<header class="text-center mb-16 animate-slide-up">
|
|
|
|
|
<h1 class="text-4xl md:text-5xl font-black mb-4 tracking-tight">
|
|
|
|
|
<span class="bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">My Octopus</span>
|
|
|
|
|
<span class="text-white opacity-90">홍보 프로젝트</span>
|
|
|
|
|
</h1>
|
|
|
|
|
<p class="text-slate-400 text-lg">혁신적인 업무 자동화의 미래를 영상으로 확인하세요.</p>
|
|
|
|
|
</header>
|
|
|
|
|
|
2026-01-07 16:46:02 +09:00
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 animate-slide-up" style="animation-delay: 0.2s;">
|
2026-01-07 16:41:07 +09:00
|
|
|
<!-- Video Card 1 -->
|
|
|
|
|
<div class="card-glass rounded-3xl p-6 flex flex-col">
|
|
|
|
|
<div class="video-container mb-6 shadow-2xl">
|
|
|
|
|
<iframe src="https://player.vimeo.com/video/1152125085?h=0&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex-1">
|
|
|
|
|
<h3 class="text-xl font-bold text-white mb-2">My Octopus 홍보 영상 1</h3>
|
|
|
|
|
<p class="text-slate-400 text-sm leading-relaxed">디지털 전환의 핵심 솔루션, My Octopus가 제시하는 업무 효율화의 새로운 기준입니다.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mt-6 pt-6 border-t border-white/5 flex items-center justify-between">
|
|
|
|
|
<span class="text-[10px] font-bold text-indigo-400 uppercase tracking-widest">Promotion Video #1</span>
|
|
|
|
|
<div class="flex gap-1">
|
|
|
|
|
<span class="w-1 h-1 rounded-full bg-indigo-500"></span>
|
|
|
|
|
<span class="w-1 h-1 rounded-full bg-indigo-500 opacity-50"></span>
|
|
|
|
|
<span class="w-1 h-1 rounded-full bg-indigo-500 opacity-25"></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Video Card 2 -->
|
|
|
|
|
<div class="card-glass rounded-3xl p-6 flex flex-col">
|
|
|
|
|
<div class="video-container mb-6 shadow-2xl">
|
|
|
|
|
<iframe src="https://player.vimeo.com/video/1152125432?h=0&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex-1">
|
|
|
|
|
<h3 class="text-xl font-bold text-white mb-2">My Octopus 홍보 영상 2</h3>
|
|
|
|
|
<p class="text-slate-400 text-sm leading-relaxed">비즈니스 프로세스의 자동화, My Octopus와 함께라면 미래는 더 가까워집니다.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mt-6 pt-6 border-t border-white/5 flex items-center justify-between">
|
|
|
|
|
<span class="text-[10px] font-bold text-purple-400 uppercase tracking-widest">Promotion Video #2</span>
|
|
|
|
|
<div class="flex gap-1">
|
|
|
|
|
<span class="w-1 h-1 rounded-full bg-purple-500"></span>
|
|
|
|
|
<span class="w-1 h-1 rounded-full bg-purple-500 opacity-50"></span>
|
|
|
|
|
<span class="w-1 h-1 rounded-full bg-purple-500 opacity-25"></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Video Card 3: 방화셔터 문어 캐릭터 -->
|
|
|
|
|
<div class="card-glass rounded-3xl p-6 flex flex-col">
|
|
|
|
|
<div class="video-container mb-6 shadow-2xl">
|
|
|
|
|
<iframe src="https://player.vimeo.com/video/1152126362?h=0&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex-1">
|
|
|
|
|
<h3 class="text-xl font-bold text-white mb-2">My Octopus 캐릭터 홍보</h3>
|
|
|
|
|
<p class="text-slate-400 text-sm leading-relaxed">친근한 문어 캐릭터와 함께하는 방화셔터 품질인정제도 안내 영상입니다.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mt-6 pt-6 border-t border-white/5 flex items-center justify-between">
|
|
|
|
|
<span class="text-[10px] font-bold text-orange-400 uppercase tracking-widest">Character Animation</span>
|
|
|
|
|
<div class="flex gap-1">
|
|
|
|
|
<span class="w-1 h-1 rounded-full bg-orange-500"></span>
|
|
|
|
|
<span class="w-1 h-1 rounded-full bg-orange-500 opacity-50"></span>
|
|
|
|
|
<span class="w-1 h-1 rounded-full bg-orange-500 opacity-25"></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Video Card 4: 문어 하단 문 출연 -->
|
|
|
|
|
<div class="card-glass rounded-3xl p-6 flex flex-col">
|
|
|
|
|
<div class="video-container mb-6 shadow-2xl">
|
|
|
|
|
<iframe src="https://player.vimeo.com/video/1152126562?h=0&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex-1">
|
|
|
|
|
<h3 class="text-xl font-bold text-white mb-2">My Octopus 브랜드 애니메이션</h3>
|
|
|
|
|
<p class="text-slate-400 text-sm leading-relaxed">문어 캐릭터와 문이 결합된 상징적인 브랜드 홍보 영상입니다.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mt-6 pt-6 border-t border-white/5 flex items-center justify-between">
|
|
|
|
|
<span class="text-[10px] font-bold text-emerald-400 uppercase tracking-widest">Identity Animation</span>
|
|
|
|
|
<div class="flex gap-1">
|
|
|
|
|
<span class="w-1 h-1 rounded-full bg-emerald-500"></span>
|
|
|
|
|
<span class="w-1 h-1 rounded-full bg-emerald-500 opacity-50"></span>
|
|
|
|
|
<span class="w-1 h-1 rounded-full bg-emerald-500 opacity-25"></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-07 16:46:02 +09:00
|
|
|
|
|
|
|
|
<!-- Video Card 5: 안경 쓴 문어 -->
|
|
|
|
|
<div class="card-glass rounded-3xl p-6 flex flex-col">
|
|
|
|
|
<div class="video-container mb-6 shadow-2xl">
|
|
|
|
|
<iframe src="https://player.vimeo.com/video/1152134596?h=0&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex-1">
|
|
|
|
|
<h3 class="text-xl font-bold text-white mb-2">My Octopus 스마트 가이드</h3>
|
|
|
|
|
<p class="text-slate-400 text-sm leading-relaxed">안경 쓴 스마트한 문어 캐릭터가 설명해주는 깊이 있는 비즈니스 가이드입니다.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mt-6 pt-6 border-t border-white/5 flex items-center justify-between">
|
|
|
|
|
<span class="text-[10px] font-bold text-rose-400 uppercase tracking-widest">Smart Octopus</span>
|
|
|
|
|
<div class="flex gap-1">
|
|
|
|
|
<span class="w-1 h-1 rounded-full bg-rose-500"></span>
|
|
|
|
|
<span class="w-1 h-1 rounded-full bg-rose-500 opacity-50"></span>
|
|
|
|
|
<span class="w-1 h-1 rounded-full bg-rose-500 opacity-25"></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-07 16:41:07 +09:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<footer class="mt-20 text-center animate-slide-up" style="animation-delay: 0.4s;">
|
|
|
|
|
<a href="../index.php" class="inline-flex items-center gap-2 px-8 py-3 bg-white/5 hover:bg-white/10 text-white rounded-2xl border border-white/10 transition-all backdrop-blur-md group">
|
|
|
|
|
<svg class="w-4 h-4 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
|
|
|
|
|
<span>메인페이지로 돌아가기</span>
|
|
|
|
|
</a>
|
|
|
|
|
</footer>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
