867 lines
32 KiB
HTML
867 lines
32 KiB
HTML
<html lang="ko" vid="0"><head vid="1">
|
|
<meta charset="UTF-8" vid="2">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" vid="3">
|
|
<title vid="4">Eroom AI Partners | Legal Tech Vertical AI Agent</title>
|
|
|
|
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" vid="5">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" vid="6">
|
|
<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" vid="7">
|
|
<link rel="stylesheet" as="style" crossorigin="" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" vid="8">
|
|
|
|
<style vid="9">
|
|
: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%);
|
|
|
|
--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;
|
|
}
|
|
|
|
|
|
*, *::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;
|
|
}
|
|
|
|
|
|
.t-mono {
|
|
font-family: var(--font-mono);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.font-serif { font-family: var(--font-sans); }
|
|
.text-accent { color: var(--accent); }
|
|
.text-secondary { color: var(--text-secondary); }
|
|
|
|
.label {
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
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; }
|
|
|
|
|
|
.container {
|
|
max-width: var(--container);
|
|
margin: 0 auto;
|
|
padding: 0 var(--space-lg);
|
|
}
|
|
|
|
section {
|
|
padding: var(--space-2xl) 0;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.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: 0.85rem;
|
|
color: var(--text-muted);
|
|
border-bottom: 1px solid var(--border);
|
|
padding-bottom: var(--space-sm);
|
|
width: 100%;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--brand-gradient);
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.index {
|
|
font-variant-numeric: tabular-nums;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
|
|
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;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: var(--space-lg);
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
|
|
.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);
|
|
background-color: transparent;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
|
|
.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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.hero h1 {
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.1rem;
|
|
color: var(--text-secondary);
|
|
max-width: 600px;
|
|
margin-bottom: var(--space-lg);
|
|
}
|
|
|
|
.hero-cta {
|
|
display: flex;
|
|
gap: var(--space-md);
|
|
margin-bottom: var(--space-xl);
|
|
}
|
|
|
|
.tags-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
|
|
.grid-3 {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: var(--space-lg);
|
|
}
|
|
|
|
.grid-2 {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
|
gap: var(--space-lg);
|
|
}
|
|
|
|
.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);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.card-number {
|
|
font-family: var(--font-sans);
|
|
font-size: 2rem;
|
|
color: var(--border);
|
|
margin-bottom: auto;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.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);
|
|
font-family: var(--font-serif);
|
|
}
|
|
|
|
.card p {
|
|
font-size: 0.95rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
|
|
.product-card {
|
|
position: relative;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
aspect-ratio: 4/3;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
padding: var(--space-lg);
|
|
border: 1px solid var(--border);
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.product-img {
|
|
position: absolute;
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
object-fit: cover;
|
|
z-index: 0;
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.product-card:hover .product-img {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.product-overlay {
|
|
position: absolute;
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
background: linear-gradient(to top, rgba(20,20,20,0.95) 0%, rgba(20,20,20,0.5) 50%, rgba(20,20,20,0.1) 100%);
|
|
z-index: 1;
|
|
}
|
|
|
|
.product-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.product-content h3 {
|
|
font-family: var(--font-serif);
|
|
font-size: 1.75rem;
|
|
margin-bottom: var(--space-xs);
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.product-content p {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
font-size: 0.95rem;
|
|
margin-bottom: var(--space-md);
|
|
max-width: 90%;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.product-content .label {
|
|
color: #FFFFFF !important;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.product-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-top: 1px solid rgba(255,255,255,0.2);
|
|
padding-top: var(--space-md);
|
|
margin-top: var(--space-md);
|
|
}
|
|
|
|
.product-meta .text-accent {
|
|
color: #FFB3D9 !important;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.product-meta a:hover.text-accent {
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
|
|
.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-md) 0;
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
|
|
.workflow-step:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.step-icon {
|
|
flex-shrink: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--border);
|
|
background: var(--bg-surface);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.step-content h4 {
|
|
font-size: 1.1rem;
|
|
margin-bottom: 6px;
|
|
font-family: var(--font-serif);
|
|
}
|
|
|
|
.step-content p {
|
|
font-size: 0.95rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
|
|
.data-table {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
margin-top: var(--space-lg);
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
|
|
}
|
|
|
|
.data-cell {
|
|
padding: var(--space-lg);
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
background: var(--bg-surface-elevated);
|
|
}
|
|
|
|
.data-cell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.data-label {
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.data-value {
|
|
font-family: var(--font-serif);
|
|
font-size: 1.25rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
|
|
.footer-cta {
|
|
text-align: center;
|
|
padding: var(--space-2xl) 0;
|
|
border-top: 1px solid var(--border);
|
|
background: var(--bg-surface);
|
|
}
|
|
|
|
.footer-cta h2 {
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.footer-cta p {
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-lg);
|
|
max-width: 500px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
.nav-links { display: none; }
|
|
h1 { font-size: 2.2rem; }
|
|
.hero-cta { flex-direction: column; }
|
|
.data-table { grid-template-columns: 1fr; }
|
|
.data-cell { border-right: none; border-bottom: 1px solid var(--border); }
|
|
.grid-3, .grid-2 { gap: var(--space-md); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body vid="10">
|
|
|
|
<nav vid="11">
|
|
<div class="container nav-inner" vid="12">
|
|
<div class="logo" vid="13">
|
|
<span class="dot" vid="14"></span>
|
|
Eroom
|
|
</div>
|
|
<ul class="nav-links" vid="15">
|
|
<li vid="16"><a href="#" vid="17">회사 소개</a></li>
|
|
<li vid="18"><a href="#" vid="19">서비스</a></li>
|
|
<li vid="20"><a href="#" vid="21">제품 소개</a></li>
|
|
<li vid="22"><a href="#" vid="23">도입 문의</a></li>
|
|
<li vid="24"><a href="#" class="nav-login" vid="25">로그인</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<main vid="26">
|
|
|
|
<section class="hero container" vid="27">
|
|
<div class="hero-content" vid="28">
|
|
<div class="eyebrow" vid="29">
|
|
<span class="dot" vid="30"></span>
|
|
전문가용 Vertical AI Agent for Legal Work
|
|
</div>
|
|
<h1 class="font-serif" vid="31">법률 실무에 바로 연결되는<br vid="32">전문가용 AI Agent를 만듭니다</h1>
|
|
<p vid="33">Eroom은 전문가용/기업용 지식 작업 AI Agent를 개발하고 운용하는 회사입니다. 우리는 Legal Tech를 시작으로, 전문가가 검토 후 곧바로 실무에 활용할 수 있는 실무형 AI Agent를 설계합니다.</p>
|
|
|
|
<div class="hero-cta" vid="34">
|
|
<a href="#" class="btn btn-primary" vid="35">서비스 보기</a>
|
|
<a href="#" class="btn btn-secondary" vid="36">회사 소개 보기</a>
|
|
</div>
|
|
|
|
<div class="tags-container" vid="37">
|
|
<span class="tag" vid="38">Legal Tech부터 시작하는 Full Vertical AI Agent</span>
|
|
<span class="tag" vid="39">도메인 지식, 실무 workflow, Human-in-the-Loop를 함께 설계한 AI</span>
|
|
<span class="tag" vid="40">문서 자동화가 아니라 실무 진행 구조까지 포함한 에이전트</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="container" vid="41">
|
|
<div class="section-header" vid="42">
|
|
<div class="section-indicator" vid="43">
|
|
<span class="index" vid="44">01</span>
|
|
<span vid="45">Problem Definition</span>
|
|
<span style="flex-grow: 1;" vid="46"></span>
|
|
<span class="dot" vid="47"></span>
|
|
</div>
|
|
<h2 class="font-serif" vid="48">범용 AI가 넘기 어려운<br vid="49">마지막 단계가 있습니다</h2>
|
|
<p class="text-secondary" vid="50">Eroom은 전문 영역의 Last Mile Problem에 집중합니다.</p>
|
|
</div>
|
|
|
|
<div class="grid-3" vid="51">
|
|
<div class="card" vid="52">
|
|
<span class="card-number" vid="53">01</span>
|
|
<div vid="54">
|
|
<h3 class="card-title" vid="55">전문 workflow 미내재화</h3>
|
|
<p vid="56">전문가의 실제 업무는 단순 질의응답이 아니라 단계별 판단, 문서 검토, 자료 재구성으로 이루어집니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card" vid="57">
|
|
<span class="card-number" vid="58">02</span>
|
|
<div vid="59">
|
|
<h3 class="card-title" vid="60">도메인 지식 부족</h3>
|
|
<p vid="61">법률 영역은 용어 이해를 넘어 문서 구조, 쟁점 구성, 실무 관행까지 다뤄야 합니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card" vid="62">
|
|
<span class="card-number" vid="63">03</span>
|
|
<div vid="64">
|
|
<h3 class="card-title" vid="65">신뢰 불충분</h3>
|
|
<p vid="66">전문가가 바로 실무에 쓰기 어려운 가장 큰 이유는 결과를 검토하고 통제할 수 있는 구조가 부족하기 때문입니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="container" vid="67">
|
|
<div class="section-header" vid="68">
|
|
<div class="section-indicator" vid="69">
|
|
<span class="index" vid="70">02</span>
|
|
<span vid="71">Core Solution</span>
|
|
<span style="flex-grow: 1;" vid="72"></span>
|
|
<span class="dot" vid="73"></span>
|
|
</div>
|
|
<h2 class="font-serif" vid="74">Eroom은 실무에서 신뢰할 수 있는<br vid="75">AI Agent를 설계합니다</h2>
|
|
</div>
|
|
|
|
<div class="grid-2" vid="76">
|
|
<div class="card" vid="77">
|
|
<h3 class="card-title" vid="78">전문가 workflow 내재화</h3>
|
|
<p vid="79">실제 업무 순서에 맞춘 단계형 구조로 흐름을 끊기지 않게 설계합니다.</p>
|
|
</div>
|
|
<div class="card" vid="80">
|
|
<h3 class="card-title" vid="81">도메인 특화 설계</h3>
|
|
<p vid="82">법률 영역의 문서 형식, 판단 기준, 업무 관행을 반영합니다.</p>
|
|
</div>
|
|
<div class="card" vid="83">
|
|
<h3 class="card-title" vid="84">HITL 검토 구조</h3>
|
|
<p vid="85">사용자는 각 단계에서 확인, 재실행, 의견개진을 통해 진행 방향을 통제합니다.</p>
|
|
</div>
|
|
<div class="card" vid="86">
|
|
<h3 class="card-title" vid="87">실무 산출물 중심</h3>
|
|
<p vid="88">중간 요약이 아닌 소장, 준비서면, 법률자문서 같은 실제 업무 결과물을 생성합니다.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="container" vid="89">
|
|
<div class="section-header" vid="90">
|
|
<div class="section-indicator" vid="91">
|
|
<span class="index" vid="92">03</span>
|
|
<span vid="93">Product Suite</span>
|
|
<span style="flex-grow: 1;" vid="94"></span>
|
|
<span class="dot" vid="95"></span>
|
|
</div>
|
|
<h2 class="font-serif" vid="96">Legal Tech에서 시작하는<br vid="97">Eroom의 Vertical AI Agent</h2>
|
|
<p class="text-secondary" style="max-width: 600px;" vid="98">Eroom의 첫 번째 진출 영역은 Legal Tech입니다. 우리는 소송과 법률자문 업무에서 변호사가 더 빠르고 안정적으로 실무를 진행할 수 있도록 제품을 설계하고 있습니다.</p>
|
|
</div>
|
|
|
|
<div class="grid-2" vid="99">
|
|
|
|
<div class="product-card" vid="100">
|
|
<img src="https://images.unsplash.com/photo-1589829085413-56de8ae18c73?auto=format&fit=crop&q=80&w=1200" alt="Litigation Architecture" class="product-img" vid="101">
|
|
<div class="product-overlay" vid="102"></div>
|
|
<div class="product-content" vid="103">
|
|
<span class="label" style="color: var(--text-primary); margin-bottom: 8px; display: inline-block;" vid="104">Liti-Agent</span>
|
|
<h3 vid="105">소송 문서 작성 AI Agent</h3>
|
|
<p vid="106">민사소송과 형사소송 업무에서 사건 자료를 정리하고 단계별 진행을 거쳐 최종 문서 작성을 지원하는 AI Agent.</p>
|
|
<div class="product-meta" vid="107">
|
|
<a href="#" class="text-accent" style="font-size: 0.9rem; font-weight: 500;" vid="108">소송 서비스 보기 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="product-card" vid="109">
|
|
<img src="https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&q=80&w=1200" alt="Legal Advisory Network" class="product-img" vid="110">
|
|
<div class="product-overlay" vid="111"></div>
|
|
<div class="product-content" vid="112">
|
|
<span class="label" style="color: var(--text-primary); margin-bottom: 8px; display: inline-block;" vid="113">Litcon-Agent</span>
|
|
<h3 vid="114">법률자문 AI Agent</h3>
|
|
<p vid="115">의뢰서와 관련 자료를 바탕으로 리서치와 구조화를 거쳐 법률자문서 작성을 지원하는 AI Agent.</p>
|
|
<div class="product-meta" vid="116">
|
|
<a href="#" class="text-accent" style="font-size: 0.9rem; font-weight: 500;" vid="117">자문 서비스 보기 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="data-table" vid="118">
|
|
<div class="data-cell" vid="119">
|
|
<span class="data-label" vid="120">Future Expansion</span>
|
|
<span class="data-value" vid="121">Finance</span>
|
|
</div>
|
|
<div class="data-cell" vid="122">
|
|
<span class="data-label" vid="123">Future Expansion</span>
|
|
<span class="data-value" vid="124">Health Care</span>
|
|
</div>
|
|
<div class="data-cell" vid="125">
|
|
<span class="data-label" vid="126">Future Expansion</span>
|
|
<span class="data-value" vid="127">Manufacturing</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-secondary" style="font-size: 0.85rem; margin-top: var(--space-md); text-align: right;" vid="128">
|
|
향후 Eroom은 agriculture, robotics를 포함한 다양한 전문 산업으로 확장 가능한 AI Agent 서비스를 준비하고 있습니다.
|
|
</p>
|
|
</section>
|
|
|
|
|
|
<section class="container" vid="129">
|
|
<div class="section-header" vid="130">
|
|
<div class="section-indicator" vid="131">
|
|
<span class="index" vid="132">04</span>
|
|
<span vid="133">Human in the Loop</span>
|
|
<span style="flex-grow: 1;" vid="134"></span>
|
|
<span class="dot" vid="135"></span>
|
|
</div>
|
|
<h2 class="font-serif" vid="136">검토 가능한 구조가 신뢰를 만듭니다</h2>
|
|
<p class="text-secondary" vid="137">Human-in-the-Loop 기반의 단계형 workflow를 통해 전문가가 직접 통제합니다.</p>
|
|
</div>
|
|
|
|
<div class="workflow-container" vid="138">
|
|
<div class="workflow-step" vid="139">
|
|
<div class="step-icon" vid="140">1</div>
|
|
<div class="step-content" vid="141">
|
|
<h4 vid="142">투명한 진행 상태</h4>
|
|
<p vid="143">단계별 진행 상태를 실시간으로 확인할 수 있습니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="workflow-step" vid="144">
|
|
<div class="step-icon" vid="145">2</div>
|
|
<div class="step-content" vid="146">
|
|
<h4 vid="147">통제권 확보</h4>
|
|
<p vid="148">각 단계에서 재실행과 전문가의 의견 반영이 가능합니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="workflow-step" vid="149">
|
|
<div class="step-icon" vid="150">3</div>
|
|
<div class="step-content" vid="151">
|
|
<h4 vid="152">데이터 분리 관리</h4>
|
|
<p vid="153">입력 문서와 중간 산출물, 최종 산출물을 명확히 분리해 관리합니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="workflow-step" vid="154">
|
|
<div class="step-icon" vid="155">4</div>
|
|
<div class="step-content" vid="156">
|
|
<h4 vid="157">결과 중심 설계</h4>
|
|
<p vid="158">실무자가 즉시 검토하고 활용할 수 있는 실무 산출물 중심으로 작업합니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="container" vid="159">
|
|
<div class="section-header" vid="160">
|
|
<div class="section-indicator" vid="161">
|
|
<span class="index" vid="162">05</span>
|
|
<span vid="163">Value Proposition</span>
|
|
<span style="flex-grow: 1;" vid="164"></span>
|
|
<span class="dot" vid="165"></span>
|
|
</div>
|
|
<h2 class="font-serif" vid="166">변호사가 더 본질적인 일에<br vid="167">집중할 수 있도록</h2>
|
|
</div>
|
|
|
|
<div class="grid-3" vid="168">
|
|
<div class="card" style="border-top: 3px solid var(--accent);" vid="169">
|
|
<h3 class="card-title" style="border-bottom: none;" vid="170">문서 작업 부담 완화</h3>
|
|
<p vid="171">자료 정리와 초안 작성에 드는 시간을 줄여 핵심 판단에 더 많은 시간을 쓸 수 있습니다.</p>
|
|
</div>
|
|
<div class="card" vid="172">
|
|
<h3 class="card-title" style="border-bottom: none;" vid="173">사건 처리 속도 향상</h3>
|
|
<p vid="174">반복 업무를 구조화해 더 많은 사건을 더 빠르게 진행할 수 있는 기반을 제공합니다.</p>
|
|
</div>
|
|
<div class="card" vid="175">
|
|
<h3 class="card-title" style="border-bottom: none;" vid="176">업무 확장성 확보</h3>
|
|
<p vid="177">실무 프로세스를 정돈하고 누적해 개인 변호사와 조직 모두의 처리 역량 확장을 돕습니다.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="container" style="border-top: 1px solid var(--border); margin-top: var(--space-2xl);" vid="178">
|
|
<div class="section-header" vid="179">
|
|
<div class="section-indicator" vid="180">
|
|
<span class="index" vid="181">06</span>
|
|
<span vid="182">Vision</span>
|
|
<span style="flex-grow: 1;" vid="183"></span>
|
|
<span class="dot" vid="184"></span>
|
|
</div>
|
|
<h2 class="font-serif" vid="185">Legal Tech를 넘어<br vid="186">전문가 업무 전반으로</h2>
|
|
</div>
|
|
|
|
<div style="display: flex; flex-wrap: wrap; gap: var(--space-md);" vid="187">
|
|
<span class="tag" style="font-size: 1rem; padding: 10px 20px; border-radius: 30px;" vid="188">Legal Tech</span>
|
|
<span class="tag" style="font-size: 1rem; padding: 10px 20px; border-radius: 30px;" vid="189">Enterprise AI Agent System</span>
|
|
<span class="tag" style="font-size: 1rem; padding: 10px 20px; border-radius: 30px;" vid="190">Public Sector AI</span>
|
|
<span class="tag" style="font-size: 1rem; padding: 10px 20px; border-radius: 30px;" vid="191">Research Workflow AI</span>
|
|
<span class="tag" style="font-size: 1rem; padding: 10px 20px; border-radius: 30px;" vid="192">Industry-Specific SaaS</span>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="footer-cta" vid="193">
|
|
<div class="container" vid="194">
|
|
<h2 class="font-serif" vid="195">실무에 연결되는 AI Agent를<br vid="196">가장 먼저 만나보세요</h2>
|
|
<p vid="197">Legal Tech를 시작으로, 전문가가 신뢰하고 사용할 수 있는 AI Agent 서비스를 Eroom이 만들어갑니다.</p>
|
|
<div style="display: flex; gap: var(--space-md); justify-content: center; margin-top: var(--space-lg);" vid="198">
|
|
<a href="#" class="btn btn-primary" vid="199">도입 문의하기</a>
|
|
<a href="#" class="btn btn-secondary" style="background: white;" vid="200">제품 상세 보기</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
|
|
</body></html> |