Files

651 lines
28 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 | Vertical AI Agent for Legal Work</title>
<style vid="5">
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
:root {
--c-bg: #F3F2ED;
--c-ink: #0A1120;
--c-stone: #E6E4DF;
--c-accent: #1D4ED8;
--f-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
--border: 1px solid var(--c-ink);
--border-heavy: 2px solid var(--c-ink);
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 4rem;
--space-xl: 8rem;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: var(--c-bg);
color: var(--c-ink);
font-family: var(--f-sans);
font-size: 15px;
line-height: 1.6;
word-break: keep-all;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.02em;
}
.t-display {
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 600;
letter-spacing: -0.03em;
}
.t-h1 { font-size: clamp(2rem, 3vw, 3rem); font-weight: 600; }
.t-h2 { font-size: clamp(1.5rem, 2vw, 2rem); }
.t-h3 { font-size: 1.25rem; }
.t-body-lg { font-size: 1.125rem; line-height: 1.7; }
.t-meta {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
font-family: monospace;
}
.grid-system {
display: grid;
grid-template-columns: 80px 1fr;
border-bottom: var(--border);
position: relative;
}
.grid-gutter {
border-right: var(--border);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: var(--space-md) var(--space-xs);
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: right;
}
.grid-content {
display: flex;
flex-direction: column;
}
.container {
padding: var(--space-lg);
}
.g-wrap {
display: grid;
gap: 1px;
background-color: var(--c-ink);
border: var(--border);
}
.g-cell {
background-color: var(--c-bg);
padding: var(--space-md);
}
.g-col-2 { grid-template-columns: repeat(2, 1fr); }
.g-col-3 { grid-template-columns: repeat(3, 1fr); }
.g-col-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
.g-col-4, .g-col-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.grid-system { grid-template-columns: 1fr; }
.grid-gutter { display: none; }
.g-col-2, .g-col-3, .g-col-4 { grid-template-columns: 1fr; }
.container { padding: var(--space-md); }
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-sm) var(--space-md);
border-bottom: var(--border);
position: sticky;
top: 0;
background-color: var(--c-bg);
z-index: 100;
}
.logo {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 0.5rem;
}
.logo-mark {
width: 16px;
height: 16px;
background-color: var(--c-ink);
display: inline-block;
}
nav ul {
display: flex;
list-style: none;
gap: var(--space-md);
}
nav a {
text-decoration: none;
color: var(--c-ink);
font-weight: 500;
font-size: 0.9rem;
transition: opacity 0.2s;
}
nav a:hover { opacity: 0.5; }
.btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border: var(--border);
background: transparent;
color: var(--c-ink);
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.2s;
min-width: 200px;
}
.btn:hover {
background-color: var(--c-ink);
color: var(--c-bg);
}
.btn-solid {
background-color: var(--c-ink);
color: var(--c-bg);
}
.btn-solid:hover {
background-color: var(--c-bg);
color: var(--c-ink);
}
.badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border: var(--border);
font-size: 0.75rem;
font-weight: 600;
border-radius: 999px;
}
.hero {
min-height: 80vh;
display: flex;
flex-direction: column;
}
.hero-top {
flex: 1;
padding: var(--space-lg);
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-lg);
align-items: end;
}
.hero-tags {
border-top: var(--border);
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.hero-tag-cell {
padding: var(--space-sm) var(--space-md);
border-right: var(--border);
font-size: 0.85rem;
color: rgba(10, 17, 32, 0.7);
}
.hero-tag-cell:last-child { border-right: none; }
.card-title {
margin-bottom: var(--space-sm);
padding-bottom: var(--space-xs);
border-bottom: 1px solid rgba(10, 17, 32, 0.2);
display: flex;
justify-content: space-between;
align-items: baseline;
}
.product-panel {
background-color: var(--c-stone);
padding: var(--space-lg);
border: var(--border);
margin-top: var(--space-md);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
.tech-diagram {
width: 100%;
height: 200px;
border: var(--border);
background: repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(10, 17, 32, 0.05) 10px,
rgba(10, 17, 32, 0.05) 20px
);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.accordion-item {
border-bottom: var(--border);
}
.accordion-item:first-child { border-top: var(--border); }
.accordion-header {
padding: var(--space-md) 0;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-weight: 500;
font-size: 1.25rem;
}
.section-dark {
background-color: var(--c-ink);
color: var(--c-bg);
border-bottom: none;
}
.section-dark .grid-gutter,
.section-dark .g-wrap,
.section-dark .btn {
border-color: var(--c-bg);
}
.section-dark .g-cell {
background-color: var(--c-ink);
border: 1px solid var(--c-bg);
}
.section-dark .btn {
color: var(--c-bg);
}
.section-dark .btn:hover {
background-color: var(--c-bg);
color: var(--c-ink);
}
.sys-code {
font-family: monospace;
font-size: 10px;
opacity: 0.5;
letter-spacing: 0.1em;
display: block;
margin-bottom: var(--space-xs);
}
.corner-bracket {
position: relative;
}
.corner-bracket::before, .corner-bracket::after {
content: '';
position: absolute;
width: 8px; height: 8px;
border: 1px solid var(--c-ink);
}
.corner-bracket::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.corner-bracket::after { bottom: 0; right: 0; border-left: none; border-top: none; }
@media (max-width: 1024px) {
.hero-top { grid-template-columns: 1fr; gap: var(--space-md); }
.hero-tags { grid-template-columns: 1fr; }
.hero-tag-cell { border-right: none; border-bottom: var(--border); }
.product-panel { grid-template-columns: 1fr; }
}
</style>
</head>
<body vid="6">
<header vid="7">
<div class="logo" vid="8">
<span class="logo-mark" vid="9"></span>
Eroom AI Partners
</div>
<nav vid="10">
<ul vid="11">
<li vid="12"><a href="#" vid="13">회사 소개</a></li>
<li vid="14"><a href="#" vid="15">서비스</a></li>
<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>
</ul>
</nav>
</header>
<section class="grid-system hero" vid="22">
<div class="grid-gutter" vid="23">
<span class="t-meta" vid="24">SYS.001 // INITIALIZATION</span>
<span class="t-meta" vid="25">VER 1.0</span>
</div>
<div class="grid-content" vid="26">
<div class="hero-top" vid="27">
<div vid="28">
<span class="sys-code" vid="29">ID: VERTICAL_AGENT_LEGAL</span>
<div class="badge" style="margin-bottom: var(--space-sm);" vid="30">전문가용 Vertical AI Agent for Legal Work</div>
<h1 class="t-display" vid="31">법률 실무에 바로<br vid="32">연결되는 전문가용<br vid="33">AI Agent를 만듭니다</h1>
</div>
<div vid="34">
<p class="t-body-lg" style="margin-bottom: var(--space-md);" vid="35">
Eroom은 전문가용/기업용 지식 작업 AI Agent를 개발하고 운용하는 회사입니다. 우리는 Legal Tech를 시작으로, 전문가가 검토 후 곧바로 실무에 활용할 수 있는 실무형 AI Agent를 설계합니다.
</p>
<div style="display: flex; gap: var(--space-xs); flex-direction: column;" vid="36">
<a href="#" class="btn btn-solid" vid="37">서비스 보기 <span vid="38">→</span></a>
<a href="#" class="btn" vid="39">회사 소개 보기 <span vid="40">↓</span></a>
</div>
</div>
</div>
<div class="hero-tags" vid="41">
<div class="hero-tag-cell" vid="42">
<span class="t-meta" vid="43">PARAM_01</span><br vid="44">
Legal Tech부터 시작하는 Full Vertical AI Agent
</div>
<div class="hero-tag-cell" vid="45">
<span class="t-meta" vid="46">PARAM_02</span><br vid="47">
도메인 지식, 실무 workflow, Human-in-the-Loop를 함께 설계한 AI
</div>
<div class="hero-tag-cell" vid="48">
<span class="t-meta" vid="49">PARAM_03</span><br vid="50">
문서 자동화가 아니라 실무 진행 구조까지 포함한 에이전트
</div>
</div>
</div>
</section>
<section class="grid-system" vid="51">
<div class="grid-gutter" vid="52">
<span class="t-meta" vid="53">SEC.01 // LAST MILE PROBLEM</span>
</div>
<div class="grid-content container" vid="54">
<div style="margin-bottom: var(--space-lg); max-width: 800px;" vid="55">
<span class="sys-code" vid="56">CONTEXT: MARKET_DEFICIT</span>
<h2 class="t-h1" vid="57">범용 AI가 넘기 어려운<br vid="58">마지막 단계가 있습니다</h2>
<p class="t-body-lg" style="margin-top: var(--space-sm); color: rgba(10,17,32,0.7);" vid="59">Eroom은 전문 영역의 Last Mile Problem에 집중합니다</p>
</div>
<div class="g-wrap g-col-3" vid="60">
<div class="g-cell corner-bracket" vid="61">
<div class="card-title" vid="62">
<h3 class="t-h3" vid="63">전문 workflow 미내재화</h3>
<span class="t-meta" vid="64">ERR.01</span>
</div>
<p vid="65">전문가의 실제 업무는 단순 질의응답이 아니라 단계별 판단, 문서 검토, 자료 재구성으로 이루어집니다.</p>
</div>
<div class="g-cell corner-bracket" vid="66">
<div class="card-title" vid="67">
<h3 class="t-h3" vid="68">도메인 지식 부족</h3>
<span class="t-meta" vid="69">ERR.02</span>
</div>
<p vid="70">법률 영역은 용어 이해를 넘어 문서 구조, 쟁점 구성, 실무 관행까지 다뤄야 합니다.</p>
</div>
<div class="g-cell corner-bracket" vid="71">
<div class="card-title" vid="72">
<h3 class="t-h3" vid="73">신뢰 불충분</h3>
<span class="t-meta" vid="74">ERR.03</span>
</div>
<p vid="75">전문가가 바로 실무에 쓰기 어려운 가장 큰 이유는 결과를 검토하고 통제할 수 있는 구조가 부족하기 때문입니다.</p>
</div>
</div>
</div>
</section>
<section class="grid-system" vid="76">
<div class="grid-gutter" vid="77">
<span class="t-meta" vid="78">SEC.02 // EROOM SOLUTION</span>
</div>
<div class="grid-content container" vid="79">
<div style="margin-bottom: var(--space-lg);" vid="80">
<span class="sys-code" vid="81">ARCH: SYSTEM_DESIGN</span>
<h2 class="t-h1" vid="82">Eroom은 실무에서 신뢰할 수 있는<br vid="83">AI Agent를 설계합니다</h2>
</div>
<div class="g-wrap g-col-4" vid="84">
<div class="g-cell" vid="85">
<div class="card-title" vid="86"><h3 class="t-h3" vid="87">전문가 workflow 내재화</h3><span class="t-meta" vid="88">01</span></div>
<p style="font-size: 0.9rem;" vid="89">실제 업무 순서에 맞춘 단계형 구조로 흐름을 끊기지 않게 설계합니다.</p>
</div>
<div class="g-cell" vid="90">
<div class="card-title" vid="91"><h3 class="t-h3" vid="92">도메인 특화 설계</h3><span class="t-meta" vid="93">02</span></div>
<p style="font-size: 0.9rem;" vid="94">법률 영역의 문서 형식, 판단 기준, 업무 관행을 반영합니다.</p>
</div>
<div class="g-cell" vid="95">
<div class="card-title" vid="96"><h3 class="t-h3" vid="97">HITL 검토 구조</h3><span class="t-meta" vid="98">03</span></div>
<p style="font-size: 0.9rem;" vid="99">사용자는 각 단계에서 확인, 재실행, 의견개진을 통해 진행 방향을 통제합니다.</p>
</div>
<div class="g-cell" vid="100">
<div class="card-title" vid="101"><h3 class="t-h3" vid="102">실무 산출물 중심</h3><span class="t-meta" vid="103">04</span></div>
<p style="font-size: 0.9rem;" vid="104">중간 요약이 아닌 소장, 준비서면, 법률자문서 같은 실제 업무 결과물을 생성합니다.</p>
</div>
</div>
</div>
</section>
<section class="grid-system" vid="105">
<div class="grid-gutter" vid="106">
<span class="t-meta" vid="107">SEC.03 // PRODUCT LINEUP</span>
</div>
<div class="grid-content container" vid="108">
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-lg); flex-wrap: wrap; gap: var(--space-md);" vid="109">
<div vid="110">
<span class="sys-code" vid="111">TARGET: LEGAL_TECH</span>
<h2 class="t-h1" vid="112">Legal Tech에서 시작하는<br vid="113">Eroom의 Vertical AI Agent</h2>
</div>
<p style="max-width: 400px; font-size: 0.9rem; border-left: var(--borderHeavy); padding-left: var(--space-sm);" vid="114">
Eroom의 첫 번째 진출 영역은 Legal Tech입니다. 우리는 소송과 법률자문 업무에서 변호사가 더 빠르고 안정적으로 실무를 진행할 수 있도록 제품을 설계하고 있습니다.
</p>
</div>
<div class="product-panel" vid="115">
<div vid="116">
<span class="t-meta" style="color: var(--c-accent);" vid="117">AGENT_01 // ACTIVE</span>
<h3 class="t-h2" style="margin: var(--space-xs) 0 var(--space-md) 0;" vid="118">Liti-Agent</h3>
<p style="margin-bottom: var(--space-md); font-weight: 500;" vid="119">소송 문서 작성 AI Agent</p>
<p style="margin-bottom: var(--space-lg);" vid="120">민사소송과 형사소송 업무에서 사건 자료를 정리하고 단계별 진행을 거쳐 최종 문서 작성을 지원하는 AI Agent.</p>
<a href="#" class="btn btn-solid" vid="121">소송 서비스 보기 <span vid="122">→</span></a>
</div>
<div class="tech-diagram" vid="123">
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg" vid="124">
<rect x="20" y="20" width="80" height="80" stroke="#0A1120" stroke-width="2" vid="125"></rect>
<line x1="20" y1="40" x2="100" y2="40" stroke="#0A1120" stroke-width="2" vid="126"></line>
<line x1="20" y1="60" x2="80" y2="60" stroke="#0A1120" stroke-width="2" vid="127"></line>
<circle cx="90" cy="80" r="4" fill="#0A1120" vid="128"></circle>
</svg>
</div>
</div>
<div class="product-panel" style="background-color: transparent; border-top: none;" vid="129">
<div class="tech-diagram" style="background: transparent;" vid="130">
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg" vid="131">
<circle cx="60" cy="60" r="40" stroke="#0A1120" stroke-width="2" vid="132"></circle>
<circle cx="60" cy="60" r="20" stroke="#0A1120" stroke-width="2" stroke-dasharray="4 4" vid="133"></circle>
<path d="M60 20 L60 100 M20 60 L100 60" stroke="#0A1120" stroke-width="2" vid="134"></path>
</svg>
</div>
<div vid="135">
<span class="t-meta" style="color: var(--c-accent);" vid="136">AGENT_02 // DEPLOYING</span>
<h3 class="t-h2" style="margin: var(--space-xs) 0 var(--space-md) 0;" vid="137">Litcon-Agent</h3>
<p style="margin-bottom: var(--space-md); font-weight: 500;" vid="138">법률자문 AI Agent</p>
<p style="margin-bottom: var(--space-lg);" vid="139">의뢰서와 관련 자료를 바탕으로 리서치와 구조화를 거쳐 법률자문서 작성을 지원하는 AI Agent.</p>
<a href="#" class="btn" vid="140">자문 서비스 보기 <span vid="141">→</span></a>
</div>
</div>
<div style="margin-top: var(--space-xl); border-top: var(--borderHeavy); padding-top: var(--space-sm);" vid="142">
<span class="t-meta" vid="143">ROADMAP // FUTURE EXPANSION</span>
<p style="margin-top: var(--space-xs); font-size: 0.9rem; color: rgba(10,17,32,0.8);" vid="144">
향후 Eroom은 finance, health care, manufacturing, agriculture, robotics를 포함한 다양한 전문 산업으로 확장 가능한 AI Agent 서비스를 준비하고 있습니다.
</p>
</div>
</div>
</section>
<section class="grid-system" vid="145">
<div class="grid-gutter" vid="146">
<span class="t-meta" vid="147">SEC.04 // HITL PROTOCOL</span>
</div>
<div class="grid-content container" style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl);" vid="148">
<div vid="149">
<span class="sys-code" vid="150">MECH: TRUST_VERIFICATION</span>
<h2 class="t-h1" style="margin-bottom: var(--space-md);" vid="151">검토 가능한 구조가<br vid="152">신뢰를 만듭니다</h2>
<p class="t-body-lg" vid="153">Human-in-the-Loop 기반의 단계형 workflow를 통해 전문가가 AI의 판단을 직접 확인하고 제어할 수 있는 완벽한 통제권을 제공합니다.</p>
</div>
<div vid="154">
<div class="accordion-item" vid="155">
<div class="accordion-header" vid="156">
<span vid="157">01. 단계별 진행 상태 확인</span>
<span class="t-meta" vid="158">+</span>
</div>
</div>
<div class="accordion-item" vid="159">
<div class="accordion-header" vid="160">
<span vid="161">02. 재실행 및 의견 반영</span>
<span class="t-meta" vid="162">+</span>
</div>
</div>
<div class="accordion-item" vid="163">
<div class="accordion-header" vid="164">
<span vid="165">03. 입력/산출물 분리 관리</span>
<span class="t-meta" vid="166">+</span>
</div>
</div>
<div class="accordion-item" vid="167">
<div class="accordion-header" vid="168">
<span vid="169">04. 실무자 검토 중심 결과물</span>
<span class="t-meta" vid="170">+</span>
</div>
</div>
</div>
</div>
</section>
<section class="grid-system" vid="171">
<div class="grid-gutter" vid="172">
<span class="t-meta" vid="173">SEC.05 // CORE VALUE</span>
</div>
<div class="grid-content container" vid="174">
<div style="margin-bottom: var(--space-lg); text-align: center;" vid="175">
<h2 class="t-h1" vid="176">변호사가 더 본질적인<br vid="177">일에 집중할 수 있도록</h2>
</div>
<div class="g-wrap g-col-3" style="text-align: center;" vid="178">
<div class="g-cell" style="padding: var(--space-lg) var(--space-md);" vid="179">
<div style="width: 40px; height: 40px; border: var(--borderHeavy); margin: 0 auto var(--space-md) auto; border-radius: 50%;" vid="180"></div>
<h3 class="t-h3" style="margin-bottom: var(--space-sm);" vid="181">문서 작업 부담 완화</h3>
<p style="font-size: 0.9rem;" vid="182">자료 정리와 초안 작성에 드는 시간을 줄여 핵심 판단에 더 많은 시간을 쓸 수 있습니다.</p>
</div>
<div class="g-cell" style="padding: var(--space-lg) var(--space-md);" vid="183">
<div style="width: 40px; height: 40px; border: var(--borderHeavy); margin: 0 auto var(--space-md) auto; transform: rotate(45deg);" vid="184"></div>
<h3 class="t-h3" style="margin-bottom: var(--space-sm);" vid="185">사건 처리 속도 향상</h3>
<p style="font-size: 0.9rem;" vid="186">반복 업무를 구조화해 더 많은 사건을 더 빠르게 진행할 수 있는 기반을 제공합니다.</p>
</div>
<div class="g-cell" style="padding: var(--space-lg) var(--space-md);" vid="187">
<div style="width: 40px; height: 40px; border: var(--borderHeavy); margin: 0 auto var(--space-md) auto;" vid="188"></div>
<h3 class="t-h3" style="margin-bottom: var(--space-sm);" vid="189">업무 확장성 확보</h3>
<p style="font-size: 0.9rem;" vid="190">실무 프로세스를 정돈하고 누적해 개인 변호사와 조직 모두의 처리 역량 확장을 돕습니다.</p>
</div>
</div>
</div>
</section>
<section class="grid-system section-dark" vid="191">
<div class="grid-gutter" vid="192">
<span class="t-meta" vid="193">SEC.06 // TERMINAL</span>
</div>
<div class="grid-content" vid="194">
<div class="container" style="border-bottom: 1px solid var(--c-bg);" vid="195">
<span class="sys-code" style="color: var(--c-bg);" vid="196">SCOPE: EXPANSION</span>
<h2 class="t-h1" style="margin-bottom: var(--space-md);" vid="197">Legal Tech를 넘어<br vid="198">전문가 업무 전반으로</h2>
<div class="g-wrap g-col-4" style="margin-top: var(--space-lg);" vid="199">
<div class="g-cell t-meta" style="text-align: center;" vid="200">Legal Tech</div>
<div class="g-cell t-meta" style="text-align: center;" vid="201">Enterprise AI Agent System</div>
<div class="g-cell t-meta" style="text-align: center;" vid="202">Public Sector AI</div>
<div class="g-cell t-meta" style="text-align: center;" vid="203">Research Workflow AI</div>
</div>
</div>
<div class="container" style="padding-top: var(--space-xl); padding-bottom: var(--space-xl); text-align: center;" vid="204">
<h2 class="t-display" style="margin-bottom: var(--space-md);" vid="205">실무에 연결되는 AI Agent를<br vid="206">가장 먼저 만나보세요</h2>
<p class="t-body-lg" style="margin-bottom: var(--space-lg); max-width: 600px; margin-left: auto; margin-right: auto; opacity: 0.8;" vid="207">
Legal Tech를 시작으로, 전문가가 신뢰하고 사용할 수 있는 AI Agent 서비스를 Eroom이 만들어갑니다.
</p>
<div style="display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap;" vid="208">
<a href="#" class="btn" style="background-color: var(--c-bg); color: var(--c-ink);" vid="209">도입 문의하기 <span vid="210">→</span></a>
<a href="#" class="btn" vid="211">제품 상세 보기 <span vid="212">+</span></a>
</div>
</div>
<footer style="padding: var(--space-md); border-top: 1px solid rgba(243, 242, 237, 0.2); display: flex; justify-content: space-between; font-family: monospace; font-size: 11px; text-transform: uppercase;" vid="213">
<span vid="214">© EROOM AI PARTNERS 2024</span>
<span vid="215">SYS_STATE: ONLINE</span>
</footer>
</div>
</section>
</body></html>