909 lines
47 KiB
HTML
909 lines
47 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Eroom AI Partners | Legal AI Agent Service</title>
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Noto+Serif+KR:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
|
|
|
<style>
|
|
/* ══════════════════════════════════════
|
|
Design Tokens — synced with V2
|
|
══════════════════════════════════════ */
|
|
:root {
|
|
--bg-base: #FFFFFF;
|
|
--bg-surface: #F8F9FA;
|
|
--bg-surface-elevated: #FFFFFF;
|
|
|
|
--text-primary: #1A1A1A;
|
|
--text-secondary: #555555;
|
|
--text-muted: #888888;
|
|
|
|
--accent: #C52C75;
|
|
--accent-hover: #A3205E;
|
|
|
|
--border: #E5E7EB;
|
|
--border-light: #F3F4F6;
|
|
|
|
--brand-gradient: linear-gradient(135deg, #2E3759 0%, #C52C75 100%);
|
|
--navy: #2E3759;
|
|
|
|
--font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
|
|
--font-mono: 'Space Mono', monospace;
|
|
|
|
--space-xs: 4px;
|
|
--space-sm: 8px;
|
|
--space-md: 16px;
|
|
--space-lg: 32px;
|
|
--space-xl: 64px;
|
|
--space-2xl: 120px;
|
|
|
|
--container: 1200px;
|
|
}
|
|
|
|
/* ── Reset ── */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
background-color: var(--bg-base);
|
|
color: var(--text-primary);
|
|
font-family: var(--font-sans);
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
word-break: keep-all;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
a { color: inherit; text-decoration: none; transition: color 0.2s ease, opacity 0.2s ease; }
|
|
a:hover { color: var(--accent); }
|
|
ul { list-style: none; }
|
|
|
|
/* ── Typography ── */
|
|
h1, h2, h3, h4 { line-height: 1.3; font-weight: 500; color: var(--text-primary); }
|
|
h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.02em; }
|
|
h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -0.01em; }
|
|
h3 { font-size: 1.25rem; }
|
|
|
|
.text-accent { color: var(--accent); }
|
|
.text-secondary { color: var(--text-secondary); }
|
|
|
|
/* ── Layout ── */
|
|
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-lg); }
|
|
section { padding: var(--space-2xl) 0; position: relative; }
|
|
|
|
.section-white { background-color: #FFFFFF; }
|
|
.section-tinted { background-color: #F7F5F8; }
|
|
.section-navy { background-color: var(--navy); }
|
|
|
|
/* ── Section Header ── */
|
|
.section-header {
|
|
display: flex; flex-direction: column; gap: var(--space-md);
|
|
margin-bottom: var(--space-xl); max-width: 800px;
|
|
}
|
|
.section-indicator {
|
|
display: flex; align-items: center; gap: var(--space-md);
|
|
font-family: var(--font-sans); font-size: 1.275rem; color: var(--text-muted);
|
|
border-bottom: 1px solid var(--border); padding-bottom: var(--space-md);
|
|
width: 100%; text-transform: uppercase; letter-spacing: 0.05em;
|
|
}
|
|
.dot {
|
|
width: 12px; height: 12px; background: var(--brand-gradient);
|
|
border-radius: 50%; display: inline-block;
|
|
}
|
|
.index { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-secondary); }
|
|
|
|
/* ── Nav ── */
|
|
nav {
|
|
position: fixed; top: 0; width: 100%;
|
|
background: rgba(255,255,255,0.9); backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px); z-index: 100;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.nav-inner {
|
|
display: flex; justify-content: space-between; align-items: center; height: 72px;
|
|
}
|
|
.logo {
|
|
font-family: var(--font-sans); font-size: 1.5rem; font-weight: 500;
|
|
letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px;
|
|
}
|
|
.nav-links {
|
|
display: flex; gap: var(--space-lg); font-size: 0.85rem;
|
|
font-weight: 500; color: var(--text-secondary); align-items: center;
|
|
}
|
|
.nav-links a:hover { color: var(--text-primary); }
|
|
.nav-login { color: var(--text-primary); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
|
|
.nav-login:hover { color: var(--accent); }
|
|
|
|
/* ── Buttons ── */
|
|
.btn {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
padding: 12px 28px; font-size: 0.9rem; font-weight: 500;
|
|
border-radius: 4px; transition: all 0.3s ease; cursor: pointer;
|
|
border: 1px solid transparent; letter-spacing: 0.02em;
|
|
}
|
|
.btn-primary {
|
|
background: var(--brand-gradient); color: white;
|
|
box-shadow: 0 4px 14px 0 rgba(197,44,117,0.2);
|
|
}
|
|
.btn-primary:hover {
|
|
color: white; opacity: 0.9;
|
|
box-shadow: 0 6px 20px 0 rgba(197,44,117,0.3);
|
|
transform: translateY(-1px);
|
|
}
|
|
.btn-secondary {
|
|
background-color: transparent; color: var(--text-primary);
|
|
border-color: var(--border);
|
|
}
|
|
.btn-secondary:hover {
|
|
background-color: var(--bg-surface); border-color: var(--text-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
.btn-outline-white {
|
|
background: transparent; color: #FFFFFF;
|
|
border: 1px solid rgba(255,255,255,0.4);
|
|
}
|
|
.btn-outline-white:hover {
|
|
background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7);
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/* ── Tags ── */
|
|
.tag {
|
|
font-size: 0.75rem; color: var(--text-secondary);
|
|
background: var(--bg-surface); padding: 6px 16px; border-radius: 4px;
|
|
border: 1px solid var(--border); transition: all 0.2s ease;
|
|
}
|
|
.tag:hover { border-color: var(--text-muted); color: var(--text-primary); }
|
|
.eyebrow {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
background: var(--bg-surface); border: 1px solid var(--border);
|
|
padding: 6px 16px; border-radius: 30px; font-size: 0.8rem;
|
|
font-weight: 500; color: var(--text-primary);
|
|
margin-bottom: var(--space-lg); box-shadow: 0 2px 4px rgba(0,0,0,0.02);
|
|
}
|
|
|
|
/* ── Grid ── */
|
|
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: var(--space-lg); }
|
|
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); }
|
|
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-lg); }
|
|
|
|
/* ── Cards ── */
|
|
.card {
|
|
background-color: var(--bg-surface-elevated); border: 1px solid var(--border);
|
|
padding: var(--space-lg); border-radius: 8px;
|
|
display: flex; flex-direction: column; gap: var(--space-md);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02), 0 2px 4px -1px rgba(0,0,0,0.02);
|
|
}
|
|
.card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.03);
|
|
}
|
|
.card-icon {
|
|
width: 48px; height: 48px; border-radius: 10px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 1.3rem; flex-shrink: 0;
|
|
}
|
|
.card-title {
|
|
font-size: 1.25rem; color: var(--text-primary);
|
|
border-bottom: 1px solid var(--border-light);
|
|
padding-bottom: var(--space-sm); margin-bottom: var(--space-sm);
|
|
}
|
|
.card p { font-size: 0.95rem; color: var(--text-secondary); }
|
|
|
|
/* ── Hero ── */
|
|
.hero {
|
|
min-height: 100vh; display: flex; align-items: center;
|
|
padding-top: 72px; position: relative; overflow: hidden;
|
|
}
|
|
.hero::before {
|
|
content: ''; position: absolute;
|
|
top: 0; right: 0; bottom: 0; left: 0;
|
|
background-image:
|
|
linear-gradient(var(--border-light) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--border-light) 1px, transparent 1px);
|
|
background-size: 64px 64px; opacity: 0.8;
|
|
mask-image: radial-gradient(circle at 50% 50%, black, transparent 70%);
|
|
-webkit-mask-image: radial-gradient(circle at 50% 50%, black, transparent 70%);
|
|
z-index: 0; pointer-events: none;
|
|
}
|
|
.hero-content { position: relative; z-index: 1; max-width: 900px; }
|
|
.hero h1 { margin-bottom: var(--space-md); }
|
|
.hero p { font-size: 1.1rem; color: var(--text-secondary); max-width: 640px; margin-bottom: var(--space-lg); }
|
|
.hero-cta { display: flex; gap: var(--space-md); margin-bottom: var(--space-xl); }
|
|
|
|
/* ── Workflow Steps ── */
|
|
.workflow-container {
|
|
background: var(--bg-surface-elevated); border: 1px solid var(--border);
|
|
border-radius: 8px; padding: var(--space-xl);
|
|
box-shadow: 0 4px 20px -5px rgba(0,0,0,0.03);
|
|
}
|
|
.workflow-step {
|
|
display: flex; gap: var(--space-lg);
|
|
padding: var(--space-lg) 0;
|
|
border-bottom: 1px solid var(--border-light);
|
|
align-items: flex-start;
|
|
}
|
|
.workflow-step:first-child { padding-top: 0; }
|
|
.workflow-step:last-child { border-bottom: none; padding-bottom: 0; }
|
|
|
|
.step-number {
|
|
flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
|
|
background: var(--brand-gradient); color: #FFFFFF;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 0.9rem; font-weight: 600;
|
|
}
|
|
.step-content h4 { font-size: 1.1rem; margin-bottom: 6px; }
|
|
.step-content p { font-size: 0.95rem; color: var(--text-secondary); }
|
|
|
|
/* ── User Cards (Service Target) ── */
|
|
.user-card {
|
|
background: var(--bg-surface-elevated); border: 1px solid var(--border);
|
|
border-radius: 8px; padding: var(--space-lg);
|
|
display: flex; flex-direction: column; gap: var(--space-md);
|
|
transition: all 0.3s ease; position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.user-card::before {
|
|
content: ''; position: absolute; top: 0; left: 0; right: 0;
|
|
height: 3px; background: var(--brand-gradient);
|
|
transform: scaleX(0); transform-origin: left;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.user-card:hover::before { transform: scaleX(1); }
|
|
.user-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05);
|
|
}
|
|
.user-card-icon {
|
|
width: 52px; height: 52px; border-radius: 12px;
|
|
background: linear-gradient(135deg, rgba(46,55,89,0.08) 0%, rgba(197,44,117,0.08) 100%);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 1.5rem;
|
|
}
|
|
.user-card h3 { font-size: 1.15rem; color: var(--text-primary); }
|
|
.user-card p { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.6; }
|
|
|
|
/* ── Feature Cards ── */
|
|
.feature-card {
|
|
background: var(--bg-surface-elevated); border: 1px solid var(--border);
|
|
border-radius: 8px; padding: var(--space-lg);
|
|
display: flex; gap: var(--space-md); align-items: flex-start;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.feature-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 20px -4px rgba(0,0,0,0.06);
|
|
}
|
|
.feature-num {
|
|
flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px;
|
|
background: linear-gradient(135deg, rgba(46,55,89,0.06) 0%, rgba(197,44,117,0.06) 100%);
|
|
border: 1px solid var(--border);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 0.8rem; font-weight: 700; color: var(--accent);
|
|
}
|
|
.feature-text h3 { font-size: 1.1rem; margin-bottom: 6px; }
|
|
.feature-text p { font-size: 0.92rem; color: var(--text-secondary); }
|
|
|
|
/* ── Product Selection Cards ── */
|
|
.product-select-grid {
|
|
display: grid; grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--space-lg);
|
|
}
|
|
.product-select-card {
|
|
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
|
|
border-radius: 8px; padding: var(--space-lg);
|
|
display: flex; flex-direction: column; gap: var(--space-md);
|
|
transition: all 0.3s ease; cursor: pointer;
|
|
}
|
|
.product-select-card:hover {
|
|
background: rgba(255,255,255,0.08);
|
|
border-color: rgba(255,255,255,0.25);
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
|
|
}
|
|
.product-select-card .product-label {
|
|
font-size: 0.75rem; text-transform: uppercase;
|
|
letter-spacing: 0.08em; color: rgba(255,255,255,0.5); font-weight: 600;
|
|
}
|
|
.product-select-card h3 { color: #FFFFFF; font-size: 1.2rem; }
|
|
.product-select-card p { color: rgba(255,255,255,0.7); font-size: 0.9rem; }
|
|
.product-select-card .product-cta {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
color: #FFB3D9; font-size: 0.88rem; font-weight: 500;
|
|
margin-top: auto; transition: color 0.2s ease;
|
|
}
|
|
.product-select-card:hover .product-cta { color: #FFFFFF; }
|
|
|
|
/* ── Trust Section (Navy overrides) ── */
|
|
.section-navy h1, .section-navy h2, .section-navy h3, .section-navy h4 { color: #FFFFFF; }
|
|
.section-navy p { color: rgba(255,255,255,0.75); }
|
|
.section-navy .section-indicator {
|
|
color: rgba(255,255,255,0.5);
|
|
border-bottom-color: rgba(255,255,255,0.15);
|
|
}
|
|
.section-navy .index { color: rgba(255,255,255,0.7); }
|
|
.section-navy .text-secondary { color: rgba(255,255,255,0.65) !important; }
|
|
|
|
/* ── Trust Cards on white ── */
|
|
.trust-card {
|
|
background: var(--bg-surface-elevated); border: 1px solid var(--border);
|
|
border-radius: 8px; padding: var(--space-lg);
|
|
display: flex; flex-direction: column; gap: var(--space-sm);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.trust-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 20px -4px rgba(0,0,0,0.06);
|
|
}
|
|
.trust-card-accent {
|
|
width: 40px; height: 4px; border-radius: 2px;
|
|
background: var(--brand-gradient); margin-bottom: var(--space-sm);
|
|
}
|
|
.trust-card h3 { font-size: 1.1rem; }
|
|
.trust-card p { font-size: 0.92rem; color: var(--text-secondary); }
|
|
|
|
/* ── Workspace Preview (Mockup) ── */
|
|
.workspace-preview {
|
|
background: #1a1d2e; border-radius: 12px; overflow: hidden;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
box-shadow: 0 25px 60px -12px rgba(0,0,0,0.35);
|
|
}
|
|
.workspace-titlebar {
|
|
display: flex; align-items: center; gap: 8px;
|
|
padding: 12px 16px; background: rgba(255,255,255,0.05);
|
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
.workspace-dot { width: 10px; height: 10px; border-radius: 50%; }
|
|
.workspace-dot.red { background: #FF5F57; }
|
|
.workspace-dot.yellow { background: #FEBC2E; }
|
|
.workspace-dot.green { background: #28C840; }
|
|
.workspace-titlebar span {
|
|
margin-left: auto; font-size: 0.72rem;
|
|
color: rgba(255,255,255,0.4); font-family: var(--font-sans);
|
|
}
|
|
.workspace-body { display: flex; min-height: 340px; }
|
|
|
|
.workspace-sidebar {
|
|
width: 180px; flex-shrink: 0;
|
|
border-right: 1px solid rgba(255,255,255,0.06);
|
|
padding: 16px 0;
|
|
}
|
|
.ws-sidebar-item {
|
|
padding: 8px 16px; font-size: 0.75rem;
|
|
color: rgba(255,255,255,0.45); cursor: default;
|
|
transition: all 0.15s ease; border-left: 2px solid transparent;
|
|
}
|
|
.ws-sidebar-item.active {
|
|
color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.04);
|
|
border-left-color: var(--accent);
|
|
}
|
|
|
|
.workspace-main { flex: 1; padding: 20px; }
|
|
.ws-grid {
|
|
display: grid; grid-template-columns: repeat(2, 1fr);
|
|
gap: 12px;
|
|
}
|
|
.ws-room {
|
|
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 6px; padding: 16px; text-align: center;
|
|
font-size: 0.8rem; color: rgba(255,255,255,0.6);
|
|
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.ws-room:hover {
|
|
background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15);
|
|
}
|
|
.ws-room-icon { font-size: 1.1rem; opacity: 0.5; }
|
|
.ws-header-bar {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
}
|
|
.ws-header-bar h4 {
|
|
font-size: 0.85rem; color: rgba(255,255,255,0.8); font-weight: 500;
|
|
}
|
|
|
|
/* ── Footer CTA ── */
|
|
.footer-cta {
|
|
text-align: center; padding: var(--space-2xl) 0;
|
|
background: var(--brand-gradient) !important;
|
|
}
|
|
.footer-cta h2 { color: #FFFFFF; margin-bottom: var(--space-md); }
|
|
.footer-cta p {
|
|
color: rgba(255,255,255,0.8) !important;
|
|
margin-bottom: var(--space-lg); max-width: 500px;
|
|
margin-left: auto; margin-right: auto; font-size: 1.1rem;
|
|
}
|
|
.footer-cta .btn-secondary {
|
|
border-color: #FFFFFF !important; color: #2E3759 !important;
|
|
background: #FFFFFF !important;
|
|
}
|
|
.footer-cta .btn-secondary:hover {
|
|
background: rgba(255,255,255,0.88) !important; color: #2E3759 !important;
|
|
}
|
|
|
|
/* ── Responsive ── */
|
|
@media (max-width: 768px) {
|
|
.nav-links { display: none; }
|
|
h1 { font-size: 2.2rem; }
|
|
.hero-cta { flex-direction: column; }
|
|
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
|
|
.product-select-grid { grid-template-columns: 1fr; }
|
|
.workspace-sidebar { display: none; }
|
|
.ws-grid { grid-template-columns: 1fr; }
|
|
section { padding: 80px 0; }
|
|
}
|
|
|
|
/* ── Animations ── */
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(24px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-in {
|
|
opacity: 0; animation: fadeInUp 0.6s ease forwards;
|
|
}
|
|
.delay-1 { animation-delay: 0.1s; }
|
|
.delay-2 { animation-delay: 0.2s; }
|
|
.delay-3 { animation-delay: 0.3s; }
|
|
.delay-4 { animation-delay: 0.4s; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ════════════ NAV ════════════ -->
|
|
<nav>
|
|
<div class="container nav-inner">
|
|
<a href="Eroom_Web_Design_v2.html" class="logo">
|
|
<img src="Eroom_AI_Partners_logo_transparent.svg" alt="Eroom AI Partners" style="height: 32px; width: auto;">
|
|
</a>
|
|
<ul class="nav-links">
|
|
<li><a href="Eroom_Web_Design_v2.html">회사 홈</a></li>
|
|
<li><a href="#features">핵심 기능</a></li>
|
|
<li><a href="#workflow">서비스 진행</a></li>
|
|
<li><a href="#products">제품 선택</a></li>
|
|
<li><a href="#contact">도입 문의</a></li>
|
|
<li><a href="#" class="nav-login">로그인</a></li>
|
|
<li><a href="#" class="btn btn-primary" style="padding: 8px 16px; font-size: 0.85rem;">서비스 시작하기</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<main>
|
|
|
|
<!-- ════════════ HERO ════════════ -->
|
|
<section class="hero section-white">
|
|
<div class="container">
|
|
<div class="hero-content">
|
|
<div class="eyebrow animate-in">
|
|
<span class="dot"></span>
|
|
Legal AI Agent Service
|
|
</div>
|
|
<h1 class="animate-in delay-1">소송과 자문 업무를 위한<br>실무형 Legal AI Agent</h1>
|
|
<p class="animate-in delay-2">사건 자료와 의뢰 문서를 업로드하면, Eroom의 Legal AI Agent가 단계별 workflow에 맞춰 작업을 준비하고 진행합니다. 사용자는 각 단계에서 검토하고, 재실행하고, 의견을 반영하며 결과를 완성할 수 있습니다.</p>
|
|
<div class="hero-cta animate-in delay-3">
|
|
<a href="#" class="btn btn-primary">서비스 시작하기</a>
|
|
<a href="#" class="btn btn-secondary">데모 보기</a>
|
|
</div>
|
|
<div style="display: flex; flex-wrap: wrap; gap: var(--space-sm);" class="animate-in delay-4">
|
|
<span class="tag">Human-in-the-Loop</span>
|
|
<span class="tag">Expert Workflow</span>
|
|
<span class="tag">Domain-Specific AI</span>
|
|
<span class="tag">검토 가능한 실무형 결과</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ════════════ 대상 사용자 ════════════ -->
|
|
<section class="section-tinted">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<div class="section-indicator">
|
|
<span class="index">01</span>
|
|
<span>대상 사용자</span>
|
|
<span style="flex-grow:1;"></span>
|
|
<span class="dot"></span>
|
|
</div>
|
|
<h2>이런 사용자를 위해 설계했습니다</h2>
|
|
</div>
|
|
|
|
<div class="grid-3">
|
|
<div class="user-card">
|
|
<div class="user-card-icon">
|
|
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#2E3759" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
|
</div>
|
|
<h3>개업 변호사</h3>
|
|
<p>제한된 시간과 인력 안에서 더 많은 사건을 효율적으로 처리하고 싶은 변호사</p>
|
|
</div>
|
|
<div class="user-card">
|
|
<div class="user-card-icon">
|
|
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#2E3759" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
|
</div>
|
|
<h3>로펌 실무팀</h3>
|
|
<p>반복적인 문서 작업과 자료 정리를 표준화하고 싶은 조직</p>
|
|
</div>
|
|
<div class="user-card">
|
|
<div class="user-card-icon">
|
|
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#2E3759" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
|
|
</div>
|
|
<h3>향후 기업 법무팀</h3>
|
|
<p>검토 가능한 구조로 법률 업무 지원 체계를 갖추고 싶은 팀</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ════════════ 핵심 기능 ════════════ -->
|
|
<section class="section-white" id="features">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<div class="section-indicator">
|
|
<span class="index">02</span>
|
|
<span>핵심 기능</span>
|
|
<span style="flex-grow:1;"></span>
|
|
<span class="dot"></span>
|
|
</div>
|
|
<h2>문서 생성 이전에,<br>실무 진행 구조부터 설계했습니다</h2>
|
|
</div>
|
|
|
|
<div class="grid-2">
|
|
<div class="feature-card">
|
|
<div class="feature-num">01</div>
|
|
<div class="feature-text">
|
|
<h3>문서 업로드와 자동 준비</h3>
|
|
<p>고객상담문서, 증거문서, 의뢰서 등 업무 자료를 업로드하면 에이전트가 작업 준비 상태를 구성합니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-num">02</div>
|
|
<div class="feature-text">
|
|
<h3>단계별 진행</h3>
|
|
<p>업무를 한 번에 끝내지 않고, 각 단계에서 상태와 결과를 확인하며 다음 단계로 진행합니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-num">03</div>
|
|
<div class="feature-text">
|
|
<h3>HITL 기반 통제</h3>
|
|
<p>사용자는 <strong>확인</strong>, <strong>재실행</strong>, <strong>의견개진</strong>으로 진행 방향을 조정할 수 있습니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-num">04</div>
|
|
<div class="feature-text">
|
|
<h3>실무 산출물 생성</h3>
|
|
<p>소장, 준비서면, 법률자문서 등 실제 업무에 필요한 결과물 생성을 목표로 합니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ════════════ 서비스 진행 방식 (Workflow) ════════════ -->
|
|
<section class="section-tinted" id="workflow">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<div class="section-indicator">
|
|
<span class="index">03</span>
|
|
<span>서비스 진행 방식</span>
|
|
<span style="flex-grow:1;"></span>
|
|
<span class="dot"></span>
|
|
</div>
|
|
<h2>6단계 workflow로 실무 문서를 완성합니다</h2>
|
|
<p class="text-secondary">각 단계마다 사용자의 확인과 개입이 가능한 Human-in-the-Loop 구조입니다.</p>
|
|
</div>
|
|
|
|
<div class="workflow-container">
|
|
<div class="workflow-step">
|
|
<div class="step-number">01</div>
|
|
<div class="step-content">
|
|
<h4>업무 유형 선택</h4>
|
|
<p>민사소송 원고대리, 민사소송 피고대리, 형사소송 피고대리, 법률자문 중 현재 업무에 맞는 유형을 선택합니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="workflow-step">
|
|
<div class="step-number">02</div>
|
|
<div class="step-content">
|
|
<h4>문서 업로드</h4>
|
|
<p>고객상담문서, 증거문서, 의뢰서, 참고자료를 업로드합니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="workflow-step">
|
|
<div class="step-number">03</div>
|
|
<div class="step-content">
|
|
<h4>에이전트 준비 완료</h4>
|
|
<p>에이전트가 자료를 정리하고 작업을 시작할 수 있는 상태가 되면 진행 신호를 제공합니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="workflow-step">
|
|
<div class="step-number">04</div>
|
|
<div class="step-content">
|
|
<h4>단계별 실행</h4>
|
|
<p>사건 개요 파악, 쟁점 정리, 구조 설계, 초안 작성 등 각 단계별 결과를 순차적으로 확인합니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="workflow-step">
|
|
<div class="step-number">05</div>
|
|
<div class="step-content">
|
|
<h4>HITL 선택</h4>
|
|
<p>각 단계에서 <strong>확인</strong>, <strong>재실행</strong>, <strong>의견개진</strong> 중 하나를 선택해 다음 진행 방향을 조정합니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="workflow-step">
|
|
<div class="step-number">06</div>
|
|
<div class="step-content">
|
|
<h4>최종 문서 생성</h4>
|
|
<p>누적된 검토와 반영을 바탕으로 최종 소장, 준비서면, 법률자문서를 생성합니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ════════════ 워크스페이스 미리보기 ════════════ -->
|
|
<section class="section-white">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<div class="section-indicator">
|
|
<span class="index">04</span>
|
|
<span>작업 공간(Workspace)</span>
|
|
<span style="flex-grow:1;"></span>
|
|
<span class="dot"></span>
|
|
</div>
|
|
<h2>변호사의 실무 환경에 맞춘<br>작업 공간을 제공합니다</h2>
|
|
<p class="text-secondary">사건별 작업실을 생성하고, 문서를 업로드하면 에이전트가 작업 준비를 시작합니다.</p>
|
|
</div>
|
|
|
|
<!-- Workspace Mockup -->
|
|
<div class="workspace-preview">
|
|
<div class="workspace-titlebar">
|
|
<div class="workspace-dot red"></div>
|
|
<div class="workspace-dot yellow"></div>
|
|
<div class="workspace-dot green"></div>
|
|
<span>Eroom Legal AI Agent — 김변호사의 작업 공간</span>
|
|
</div>
|
|
<div class="workspace-body">
|
|
<div class="workspace-sidebar">
|
|
<div class="ws-sidebar-item active">모든 작업실</div>
|
|
<div class="ws-sidebar-item">중요 작업실</div>
|
|
<div class="ws-sidebar-item">공유 작업실</div>
|
|
<div class="ws-sidebar-item">최근 작업실</div>
|
|
<div class="ws-sidebar-item">종류별 작업실</div>
|
|
<div class="ws-sidebar-item" style="margin-top: 16px; color: var(--accent); font-weight: 500;">+ 신규 작업실 생성</div>
|
|
</div>
|
|
<div class="workspace-main">
|
|
<div class="ws-header-bar">
|
|
<h4>⚖ 김변호사의 작업 공간</h4>
|
|
</div>
|
|
<div class="ws-grid">
|
|
<div class="ws-room">
|
|
<span class="ws-room-icon">⚖</span>
|
|
작업실 - 01
|
|
</div>
|
|
<div class="ws-room">
|
|
<span class="ws-room-icon">⚖</span>
|
|
작업실 - 02
|
|
</div>
|
|
<div class="ws-room">
|
|
<span class="ws-room-icon">⚖</span>
|
|
작업실 - 03
|
|
</div>
|
|
<div class="ws-room">
|
|
<span class="ws-room-icon">⚖</span>
|
|
작업실 - 04
|
|
</div>
|
|
<div class="ws-room">
|
|
<span class="ws-room-icon">⚖</span>
|
|
작업실 - 05
|
|
</div>
|
|
<div class="ws-room">
|
|
<span class="ws-room-icon">⚖</span>
|
|
작업실 - 06
|
|
</div>
|
|
<div class="ws-room">
|
|
<span class="ws-room-icon">⚖</span>
|
|
작업실 - 07
|
|
</div>
|
|
<div class="ws-room">
|
|
<span class="ws-room-icon">⚖</span>
|
|
작업실 - 08
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Microcopy: upload & workspace labels -->
|
|
<div style="display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg);">
|
|
<span class="tag">고객상담문서 폴더</span>
|
|
<span class="tag">증거문서 폴더</span>
|
|
<span class="tag">고객 의뢰서</span>
|
|
<span class="tag">참고자료 폴더</span>
|
|
<span class="tag">에이전트 생성 결과물</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ════════════ 제품 선택 (Navy) ════════════ -->
|
|
<section class="section-navy" id="products">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<div class="section-indicator">
|
|
<span class="index">05</span>
|
|
<span>제품 선택</span>
|
|
<span style="flex-grow:1;"></span>
|
|
<span class="dot"></span>
|
|
</div>
|
|
<h2>사건과 자문 업무에 맞는<br>Legal AI Agent를 선택하세요</h2>
|
|
</div>
|
|
|
|
<div class="product-select-grid">
|
|
<div class="product-select-card">
|
|
<span class="product-label">Liti-Agent</span>
|
|
<h3>민사소송 원고대리</h3>
|
|
<p>원고 측 소송 자료를 구조화하고, 단계별 검토를 거쳐 소장 작성까지 지원하는 AI Agent</p>
|
|
<span class="product-cta">원고대리 시작하기 →</span>
|
|
</div>
|
|
<div class="product-select-card">
|
|
<span class="product-label">Liti-Agent</span>
|
|
<h3>민사소송 피고대리</h3>
|
|
<p>피고 측 방어 논리와 대응 문서 작성을 단계적으로 지원하는 소송 AI Agent</p>
|
|
<span class="product-cta">피고대리 시작하기 →</span>
|
|
</div>
|
|
<div class="product-select-card">
|
|
<span class="product-label">Liti-Agent</span>
|
|
<h3>형사소송 피고대리</h3>
|
|
<p>형사사건 자료를 구조화하고, 피고 측 실무 진행을 단계적으로 지원하는 AI Agent</p>
|
|
<span class="product-cta">형사 피고대리 시작하기 →</span>
|
|
</div>
|
|
<div class="product-select-card">
|
|
<span class="product-label">Litcon-Agent</span>
|
|
<h3>법률자문</h3>
|
|
<p>의뢰서와 관련 자료를 바탕으로 리서치와 구조화를 진행해 법률자문서 작성을 지원하는 AI Agent</p>
|
|
<span class="product-cta">법률자문 시작하기 →</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ════════════ 신뢰 요소 ════════════ -->
|
|
<section class="section-tinted">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<div class="section-indicator">
|
|
<span class="index">06</span>
|
|
<span>신뢰 요소</span>
|
|
<span style="flex-grow:1;"></span>
|
|
<span class="dot"></span>
|
|
</div>
|
|
<h2>왜 이 서비스가 실무에 더 가깝습니까</h2>
|
|
</div>
|
|
|
|
<div class="grid-3">
|
|
<div class="trust-card">
|
|
<div class="trust-card-accent"></div>
|
|
<h3>도메인에 맞춘 구조</h3>
|
|
<p>법률 업무의 실제 흐름에 맞춘 단계를 전제로 설계했습니다.</p>
|
|
</div>
|
|
<div class="trust-card">
|
|
<div class="trust-card-accent"></div>
|
|
<h3>사용자 개입이 가능한 진행</h3>
|
|
<p>모든 단계를 자동으로 고정하지 않고, 변호사가 흐름을 직접 조정할 수 있습니다.</p>
|
|
</div>
|
|
<div class="trust-card">
|
|
<div class="trust-card-accent"></div>
|
|
<h3>문서 중심 결과</h3>
|
|
<p>대화형 답변이 아니라 실무 문서 생성을 목표로 작동합니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ════════════ Agent 작업실 미리보기 ════════════ -->
|
|
<section class="section-white">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<div class="section-indicator">
|
|
<span class="index">07</span>
|
|
<span>작업실 화면</span>
|
|
<span style="flex-grow:1;"></span>
|
|
<span class="dot"></span>
|
|
</div>
|
|
<h2>에이전트가 단계별로 작업을 진행하는<br>작업실 환경을 미리 확인하세요</h2>
|
|
</div>
|
|
|
|
<!-- Workspace Room Mockup -->
|
|
<div class="workspace-preview">
|
|
<div class="workspace-titlebar">
|
|
<div class="workspace-dot red"></div>
|
|
<div class="workspace-dot yellow"></div>
|
|
<div class="workspace-dot green"></div>
|
|
<span>Liti-Agent 민사소송 원고대리 — 작업실 07</span>
|
|
</div>
|
|
<div class="workspace-body">
|
|
<!-- Left: Document Panel -->
|
|
<div class="workspace-sidebar" style="width: 200px; padding: 16px;">
|
|
<div style="margin-bottom: 16px;">
|
|
<div style="font-size: 0.7rem; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;">업로드 문서</div>
|
|
<div style="padding: 8px 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; font-size: 0.75rem; color: rgba(255,255,255,0.6); margin-bottom: 6px;">📁 고객상담문서 폴더</div>
|
|
<div style="padding: 8px 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; font-size: 0.75rem; color: rgba(255,255,255,0.6);">📁 증거문서 폴더</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-size: 0.7rem; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 12px;">에이전트 생성 결과물</div>
|
|
<div style="padding: 6px 10px; font-size: 0.73rem; color: var(--accent); font-weight: 500;">● 1단계 결과물</div>
|
|
<div style="padding: 6px 10px; font-size: 0.73rem; color: rgba(255,255,255,0.4);">○ 2단계 결과물</div>
|
|
<div style="padding: 6px 10px; font-size: 0.73rem; color: rgba(255,255,255,0.4);">○ 3단계 결과물</div>
|
|
<div style="padding: 6px 10px; font-size: 0.73rem; color: rgba(255,255,255,0.4);">○ 4단계 결과물</div>
|
|
<div style="padding: 6px 10px; font-size: 0.73rem; color: rgba(255,255,255,0.4);">○ 5단계 결과물</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Main Work Area -->
|
|
<div class="workspace-main" style="padding: 20px 24px;">
|
|
<!-- Top bar: step + progress -->
|
|
<div style="display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08);">
|
|
<div style="background: var(--brand-gradient); color: #fff; padding: 4px 14px; border-radius: 4px; font-size: 0.78rem; font-weight: 600; white-space: nowrap;">1단계 — 사건개요 파악</div>
|
|
<div style="flex: 1; display: flex; align-items: center; gap: 10px;">
|
|
<span style="font-size: 0.72rem; color: rgba(255,255,255,0.4); white-space: nowrap;">진행률</span>
|
|
<div style="flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden;">
|
|
<div style="width: 35%; height: 100%; background: var(--brand-gradient); border-radius: 3px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status message -->
|
|
<div style="background: rgba(197,44,117,0.08); border: 1px solid rgba(197,44,117,0.15); border-radius: 6px; padding: 14px 18px; margin-bottom: 20px;">
|
|
<p style="color: rgba(255,255,255,0.8) !important; font-size: 0.85rem; margin: 0;">현재 사건개요 파악 작업을 진행하고 있습니다.</p>
|
|
</div>
|
|
|
|
<!-- Content area placeholder -->
|
|
<div style="border: 1px dashed rgba(255,255,255,0.1); border-radius: 6px; padding: 40px; text-align: center; margin-bottom: 20px;">
|
|
<p style="color: rgba(255,255,255,0.3) !important; font-size: 0.85rem; margin: 0;">에이전트가 사건 자료를 분석하고 있습니다…</p>
|
|
</div>
|
|
|
|
<!-- HITL action buttons -->
|
|
<div style="display: flex; gap: 10px; justify-content: flex-end;">
|
|
<div style="padding: 8px 18px; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; font-size: 0.8rem; color: rgba(255,255,255,0.5); cursor: default;">재실행</div>
|
|
<div style="padding: 8px 18px; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; font-size: 0.8rem; color: rgba(255,255,255,0.5); cursor: default;">의견 개진</div>
|
|
<div style="padding: 8px 18px; background: var(--brand-gradient); border-radius: 4px; font-size: 0.8rem; color: #FFFFFF; font-weight: 500; cursor: default;">확인하고 다음 단계 진행</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-secondary" style="font-size: 0.85rem; margin-top: var(--space-md); text-align: center;">
|
|
* 위 화면은 서비스 작업실의 구조를 보여주는 미리보기입니다. 실제 서비스 화면은 상이할 수 있습니다.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ════════════ CTA ════════════ -->
|
|
<section class="footer-cta" id="contact">
|
|
<div class="container">
|
|
<h2>사건과 자문 업무에 맞는<br>Legal AI Agent를 선택하세요</h2>
|
|
<p>Eroom의 Legal AI Agent로 실무 문서 작성의 새로운 기준을 경험하세요.</p>
|
|
<div style="display: flex; gap: var(--space-md); justify-content: center; margin-top: var(--space-lg);">
|
|
<a href="#" class="btn btn-primary" style="background: #FFFFFF; color: var(--navy); box-shadow: 0 4px 14px rgba(0,0,0,0.15);">업무 유형 선택하기</a>
|
|
<a href="#" class="btn btn-secondary">문의하기</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
</body>
|
|
</html>
|