502 lines
34 KiB
HTML
502 lines
34 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html lang="ko"><head>
|
||
<meta charset="utf-8"/>
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
<title>스마트팩토리 코리아 2026 | KINTEX</title>
|
||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=Geist:wght@400;600&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
<script id="tailwind-config">
|
||
tailwind.config = {
|
||
darkMode: "class",
|
||
theme: {
|
||
extend: {
|
||
"colors": {
|
||
"secondary": "#5427e6",
|
||
"primary-fixed": "#d3e4ff",
|
||
"on-primary-fixed-variant": "#004881",
|
||
"surface-bright": "#f9f9ff",
|
||
"on-surface-variant": "#424750",
|
||
"primary-fixed-dim": "#a2c9ff",
|
||
"on-primary-fixed": "#001c38",
|
||
"secondary-container": "#6d4aff",
|
||
"on-surface": "#141b2c",
|
||
"surface-container-lowest": "#ffffff",
|
||
"error": "#ba1a1a",
|
||
"tertiary": "#003e28",
|
||
"on-tertiary-container": "#68d1a0",
|
||
"secondary-fixed-dim": "#c9bfff",
|
||
"inverse-on-surface": "#eef0ff",
|
||
"on-tertiary-fixed": "#002113",
|
||
"on-secondary-fixed": "#1b0063",
|
||
"on-secondary": "#ffffff",
|
||
"primary-container": "#004e8b",
|
||
"inverse-surface": "#293042",
|
||
"on-secondary-fixed-variant": "#4500d8",
|
||
"on-secondary-container": "#f3edff",
|
||
"error-container": "#ffdad6",
|
||
"tertiary-fixed": "#8ef7c4",
|
||
"primary": "#003765",
|
||
"tertiary-container": "#00583b",
|
||
"secondary-fixed": "#e5deff",
|
||
"error-red": "#ba1a1a",
|
||
"outline": "#727781",
|
||
"surface-container-low": "#f2f3ff",
|
||
"outline-variant": "#c2c7d1",
|
||
"background": "#faf8ff",
|
||
"surface-variant": "#dbe2fa",
|
||
"surface-tint": "#24609e",
|
||
"surface-container-highest": "#dbe2fa",
|
||
"on-tertiary-fixed-variant": "#005236",
|
||
"inverse-primary": "#a2c9ff",
|
||
"surface": "#faf8ff",
|
||
"on-background": "#141b2c",
|
||
"on-error": "#ffffff",
|
||
"tertiary-fixed-dim": "#72daa9",
|
||
"on-primary": "#ffffff",
|
||
"surface-dim": "#d3d9f1",
|
||
"surface-container": "#eaedff",
|
||
"on-primary-container": "#91c0ff",
|
||
"on-tertiary": "#ffffff",
|
||
"on-error-container": "#93000a",
|
||
"surface-container-high": "#e1e7ff",
|
||
"kintex-blue": "#0066B3"
|
||
},
|
||
"borderRadius": {
|
||
"DEFAULT": "0.125rem",
|
||
"lg": "0.25rem",
|
||
"xl": "0.5rem",
|
||
"full": "0.75rem"
|
||
},
|
||
"spacing": {
|
||
"stack-sm": "8px",
|
||
"container-padding": "24px",
|
||
"gutter": "16px",
|
||
"stack-lg": "24px",
|
||
"base": "4px",
|
||
"section-padding": "96px",
|
||
"stack-md": "16px"
|
||
},
|
||
"fontFamily": {
|
||
"title-sm": ["Inter"],
|
||
"display-lg": ["Inter"],
|
||
"body-sm": ["Inter"],
|
||
"body-base": ["Inter"],
|
||
"headline-md": ["Inter"],
|
||
"label-md": ["Geist"],
|
||
"label-xs": ["Geist"]
|
||
},
|
||
"fontSize": {
|
||
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
||
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}]
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style>
|
||
.material-symbols-outlined {
|
||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||
vertical-align: middle;
|
||
}
|
||
.glass-nav {
|
||
background: rgba(255, 255, 255, 0.8);
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
}
|
||
.sticky-tab-active {
|
||
color: #0066B3;
|
||
border-bottom: 3px solid #0066B3;
|
||
}
|
||
.sidebar-share {
|
||
position: fixed;
|
||
right: 24px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
z-index: 40;
|
||
}
|
||
.text-kintex { color: #0066B3; }
|
||
.bg-kintex { background-color: #0066B3; }
|
||
</script>
|
||
</head>
|
||
<body class="bg-surface-bright text-on-surface font-body-base">
|
||
|
||
<!-- 1. Header: TopNavBar -->
|
||
<nav class="bg-surface-bright dark:bg-inverse-surface full-width top-0 sticky z-50 border-b border-outline-variant dark:border-outline flat no shadows">
|
||
<div class="max-w-7xl mx-auto flex items-center justify-between px-container-padding h-20">
|
||
<div class="flex items-center gap-stack-lg">
|
||
<img src="https://lh3.googleusercontent.com/aida-public/AB6AXuC234fHscU3dFneFMAJkKrPbg4er8z1egYkCTw-K3B4zP2-_A00pd02D0mSldPRgOjM4wvEnh2nHYAchDlkK6V4qaP29YKpKBFYgvy8mECxLg57x6UHvCrOec-6TeyA4y1eIzUTz_oi0_UzXSq3iLA9C9l_jmM5KaYOa2WJq1pMAjbxfqo1dmfMZCDoR7OxhrPqMTUY4MLMgDSq7OAya7dNP9QxigZDMd7H_lXZzziWFdXWVHsyqFEMLAyRFBpRqOHr_DS9-SSJv5U" alt="KINTEX Logo" class="h-10 object-contain">
|
||
<div class="hidden lg:flex gap-stack-md font-title-sm text-title-sm">
|
||
<a href="#" class="text-on-surface-variant dark:text-surface-variant hover:text-primary transition-colors">Exhibitions</a>
|
||
<a href="#" class="text-on-surface-variant dark:text-surface-variant hover:text-primary transition-colors">Conventions</a>
|
||
<a href="#" class="text-on-surface-variant dark:text-surface-variant hover:text-primary transition-colors">Facilities</a>
|
||
<a href="#" class="text-on-surface-variant dark:text-surface-variant hover:text-primary transition-colors">Visitor Guide</a>
|
||
<a href="#" class="text-on-surface-variant dark:text-surface-variant hover:text-primary transition-colors">Customer Center</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-stack-md">
|
||
<div class="relative hidden md:block">
|
||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
|
||
<input type="text" placeholder="검색어를 입력하세요" class="pl-10 pr-4 py-2 rounded-full bg-surface-container-low border border-outline-variant focus:outline-none focus:ring-2 focus:ring-primary w-48 transition-all">
|
||
</div>
|
||
<div class="flex items-center text-label-md font-label-md gap-2 border border-outline-variant rounded-lg px-3 py-1.5 hover:bg-surface-container-high cursor-pointer transition-colors">
|
||
<span class="material-symbols-outlined text-[18px]">language</span>
|
||
<span>KOR</span>
|
||
</div>
|
||
<button class="bg-primary text-on-primary px-6 py-2.5 rounded-lg font-bold hover:bg-primary-container transition-all scale-95 active:scale-90">사전등록하기</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 2. Hero Section -->
|
||
<header class="relative h-[80vh] min-h-[600px] flex items-center justify-center overflow-hidden">
|
||
<div class="absolute inset-0 z-0">
|
||
<div style="background-image: url('placeholder')" data-alt="A futuristic and cinematic digital illustration of a smart factory featuring glowing blue and orange data pathways, industrial robotic arms working in sync, and holographic UI elements floating in the air. The mood is high-tech, innovative, and corporate, with sharp focus and professional lighting that highlights the AI-driven manufacturing theme. The color palette is dominated by deep blues, metallic silvers, and vibrant energy accents." class="w-full h-full bg-cover bg-center scale-105 animate-pulse-slow"></div>
|
||
<div class="absolute inset-0 bg-gradient-to-r from-on-surface/80 to-transparent"></div>
|
||
</div>
|
||
|
||
<div class="relative z-10 max-w-7xl mx-auto px-container-padding w-full">
|
||
<div class="max-w-3xl">
|
||
<div class="inline-flex items-center gap-2 bg-primary/20 backdrop-blur-md border border-primary-fixed/30 text-primary-fixed px-4 py-1.5 rounded-full mb-stack-lg">
|
||
<span class="w-2 h-2 rounded-full bg-primary-fixed animate-ping"></span>
|
||
<span class="font-label-md text-label-md uppercase tracking-widest">Global Manufacturing Expo</span>
|
||
</div>
|
||
<h1 class="text-white font-display-lg text-[64px] leading-[1.1] font-black mb-stack-md">
|
||
스마트팩토리 <br>코리아 2026
|
||
</h1>
|
||
<p class="text-surface-variant font-headline-md text-headline-md mb-stack-lg border-l-4 border-kintex pl-6">
|
||
AI 기반 제조 혁신의 미래를 만나보세요
|
||
</p>
|
||
<div class="flex flex-wrap gap-stack-md text-white mb-stack-lg">
|
||
<div class="flex items-center gap-2 bg-white/10 backdrop-blur-sm px-4 py-3 rounded-xl">
|
||
<span class="material-symbols-outlined">calendar_today</span>
|
||
<div>
|
||
<p class="text-label-xs opacity-70">일시</p>
|
||
<p class="font-bold">2026.09.05 – 09.08</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-2 bg-white/10 backdrop-blur-sm px-4 py-3 rounded-xl">
|
||
<span class="material-symbols-outlined">location_on</span>
|
||
<div>
|
||
<p class="text-label-xs opacity-70">장소</p>
|
||
<p class="font-bold">킨텍스 제2전시장 홀7</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-stack-md">
|
||
<button class="bg-kintex text-white px-10 py-4 rounded-xl font-bold text-title-sm hover:brightness-110 transition-all shadow-lg hover:shadow-kintex/20">
|
||
사전등록하기
|
||
</button>
|
||
<button class="bg-white/10 backdrop-blur-md border border-white/20 text-white px-10 py-4 rounded-xl font-bold text-title-sm hover:bg-white/20 transition-all">
|
||
브로슈어 다운로드
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 3. Sticky Tab Navigation -->
|
||
<div class="sticky top-20 z-40 glass-nav border-b border-outline-variant">
|
||
<div class="max-w-7xl mx-auto px-container-padding">
|
||
<div class="flex items-center gap-10 h-16">
|
||
<a href="#intro" class="sticky-tab-active h-full flex items-center px-2 font-bold transition-all">소개</a>
|
||
<a href="#program" class="text-on-surface-variant hover:text-kintex h-full flex items-center px-2 font-semibold transition-all">프로그램</a>
|
||
<a href="#speakers" class="text-on-surface-variant hover:text-kintex h-full flex items-center px-2 font-semibold transition-all">연사</a>
|
||
<a href="#exhibitors" class="text-on-surface-variant hover:text-kintex h-full flex items-center px-2 font-semibold transition-all">참가업체</a>
|
||
<a href="#transport" class="text-on-surface-variant hover:text-kintex h-full flex items-center px-2 font-semibold transition-all">교통</a>
|
||
<a href="#faq" class="text-on-surface-variant hover:text-kintex h-full flex items-center px-2 font-semibold transition-all">FAQ</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Social Share Buttons (Sidebar) -->
|
||
<div class="sidebar-share flex flex-col gap-stack-sm">
|
||
<button class="w-12 h-12 rounded-full bg-[#FEE500] flex items-center justify-center shadow-md hover:scale-110 transition-transform" title="카카오톡 공유">
|
||
<span class="material-symbols-outlined text-[#3C1E1E]">chat_bubble</span>
|
||
</button>
|
||
<button class="w-12 h-12 rounded-full bg-[#1877F2] flex items-center justify-center shadow-md hover:scale-110 transition-transform" title="페이스북 공유">
|
||
<span class="material-symbols-outlined text-white">facebook</span>
|
||
</button>
|
||
<button class="w-12 h-12 rounded-full bg-white flex items-center justify-center shadow-md border border-outline-variant hover:scale-110 transition-transform" title="링크 복사">
|
||
<span class="material-symbols-outlined text-on-surface">link</span>
|
||
</button>
|
||
</div>
|
||
|
||
<main class="max-w-7xl mx-auto px-container-padding py-section-padding space-y-section-padding">
|
||
|
||
<!-- 4. Rich Content (Intro) -->
|
||
<section id="intro" class="scroll-mt-40">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-gutter items-center mb-section-padding">
|
||
<div>
|
||
<h2 class="text-kintex font-display-lg text-display-lg mb-stack-lg">전시회 개요</h2>
|
||
<p class="font-body-base text-on-surface-variant leading-relaxed mb-stack-lg">
|
||
스마트팩토리 코리아 2026은 차세대 제조 기술의 집약체입니다. AI, 로보틱스, IoT, 그리고 디지털 트윈 기술이 결합된 최신 솔루션을 한자리에서 확인하십시오. 전 세계 500개 이상의 선도 기업이 참여하여 제조 공정의 효율성과 지속 가능성을 극대화하는 혁신적인 비전을 공유합니다.
|
||
</p>
|
||
<div class="grid grid-cols-2 gap-stack-md">
|
||
<div class="p-stack-lg rounded-2xl bg-surface-container-lowest border border-outline-variant border-l-4 border-l-kintex shadow-sm hover:shadow-md transition-shadow">
|
||
<span class="material-symbols-outlined text-kintex text-[32px] mb-2">precision_manufacturing</span>
|
||
<p class="text-display-lg font-black text-kintex">500+</p>
|
||
<p class="text-on-surface-variant font-label-md">참가 업체</p>
|
||
</div>
|
||
<div class="p-stack-lg rounded-2xl bg-surface-container-lowest border border-outline-variant border-l-4 border-l-secondary shadow-sm hover:shadow-md transition-shadow">
|
||
<span class="material-symbols-outlined text-secondary text-[32px] mb-2">groups</span>
|
||
<p class="text-display-lg font-black text-secondary">30,000+</p>
|
||
<p class="text-on-surface-variant font-label-md">예상 참관객</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="relative rounded-3xl overflow-hidden h-96 group shadow-xl">
|
||
<div style="background-image: url('placeholder')" data-alt="A wide-angle, professional architectural photograph of a modern, high-ceilinged exhibition hall at KINTEX. The space is filled with bright, natural light from a glass roof, showing numerous sleek technology booths and professional attendees in business attire networking. The atmosphere is professional, spacious, and sophisticated, reflecting a world-class business convention environment." class="w-full h-full bg-cover bg-center transition-transform duration-700 group-hover:scale-110"></div>
|
||
<div class="absolute bottom-0 left-0 right-0 p-stack-lg bg-gradient-to-t from-on-surface to-transparent text-white">
|
||
<div class="flex items-center gap-2">
|
||
<span class="material-symbols-outlined">straighten</span>
|
||
<p class="font-bold">22,000 sqm 규모의 압도적인 전시장</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="space-y-stack-lg">
|
||
<h3 class="text-headline-md font-headline-md text-center mb-stack-lg">주요 전시 테마</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
||
<div class="bg-surface-container-low p-stack-lg rounded-2xl border border-outline-variant text-center hover:bg-kintex hover:text-white transition-all duration-300">
|
||
<span class="material-symbols-outlined text-[48px] mb-4">smart_toy</span>
|
||
<h4 class="font-title-sm mb-2">AI & 자율 로봇</h4>
|
||
<p class="text-sm opacity-80">스스로 학습하고 판단하는 스마트 로봇 솔루션</p>
|
||
</div>
|
||
<div class="bg-surface-container-low p-stack-lg rounded-2xl border border-outline-variant text-center hover:bg-kintex hover:text-white transition-all duration-300">
|
||
<span class="material-symbols-outlined text-[48px] mb-4">cloud_sync</span>
|
||
<h4 class="font-title-sm mb-2">디지털 트윈 & IoT</h4>
|
||
<p class="text-sm opacity-80">가상 세계와 현실 제조 현장의 실시간 동기화</p>
|
||
</div>
|
||
<div class="bg-surface-container-low p-stack-lg rounded-2xl border border-outline-variant text-center hover:bg-kintex hover:text-white transition-all duration-300">
|
||
<span class="material-symbols-outlined text-[48px] mb-4">eco</span>
|
||
<h4 class="font-title-sm mb-2">탄소중립 스마트 제조</h4>
|
||
<p class="text-sm opacity-80">에너지 효율 극대화를 위한 친환경 공정 기술</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5. Session Agenda -->
|
||
<section id="program" class="scroll-mt-40">
|
||
<div class="flex items-end justify-between mb-stack-lg">
|
||
<h2 class="font-display-lg text-display-lg border-b-4 border-kintex pb-2">프로그램 일정</h2>
|
||
<div class="flex gap-2">
|
||
<button class="px-4 py-2 bg-kintex text-white rounded-lg font-bold">9월 5일 (Day 1)</button>
|
||
<button class="px-4 py-2 bg-surface-container-high text-on-surface-variant rounded-lg hover:bg-surface-variant">9월 6일 (Day 2)</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="space-y-base">
|
||
<!-- Timeline Item -->
|
||
<div class="group flex gap-stack-lg p-stack-lg rounded-2xl hover:bg-surface-container-low transition-colors items-start border-l-2 border-outline-variant hover:border-kintex">
|
||
<div class="w-32 flex-shrink-0 pt-1">
|
||
<span class="text-kintex font-bold block">10:00 - 11:30</span>
|
||
<span class="text-xs text-on-surface-variant">메인 컨퍼런스 홀</span>
|
||
</div>
|
||
<div class="flex-grow">
|
||
<div class="inline-block bg-primary-fixed text-on-primary-fixed text-[10px] font-bold px-2 py-0.5 rounded mb-2">KEYNOTE</div>
|
||
<h4 class="text-title-sm font-title-sm mb-1">제조업의 미래: AI가 이끄는 생산성 혁명</h4>
|
||
<p class="text-body-sm text-on-surface-variant">AI 글로벌 석학들이 제안하는 2030 제조 전략과 실제 구현 사례 분석</p>
|
||
</div>
|
||
<button class="flex items-center gap-1 text-kintex font-bold hover:underline">
|
||
상세보기 <span class="material-symbols-outlined text-[18px]">chevron_right</span>
|
||
</button>
|
||
</div>
|
||
<!-- Timeline Item -->
|
||
<div class="group flex gap-stack-lg p-stack-lg rounded-2xl hover:bg-surface-container-low transition-colors items-start border-l-2 border-outline-variant hover:border-kintex">
|
||
<div class="w-32 flex-shrink-0 pt-1">
|
||
<span class="text-kintex font-bold block">13:00 - 14:30</span>
|
||
<span class="text-xs text-on-surface-variant">세미나실 A</span>
|
||
</div>
|
||
<div class="flex-grow">
|
||
<div class="inline-block bg-secondary-fixed text-on-secondary-fixed text-[10px] font-bold px-2 py-0.5 rounded mb-2">TECH SESSION</div>
|
||
<h4 class="text-title-sm font-title-sm mb-1">산업용 5G와 엣지 컴퓨팅의 결합</h4>
|
||
<p class="text-body-sm text-on-surface-variant">지연 없는 데이터 전송을 통한 실시간 공정 제어 기술 시연</p>
|
||
</div>
|
||
<button class="flex items-center gap-1 text-kintex font-bold hover:underline">
|
||
상세보기 <span class="material-symbols-outlined text-[18px]">chevron_right</span>
|
||
</button>
|
||
</div>
|
||
<!-- Timeline Item -->
|
||
<div class="group flex gap-stack-lg p-stack-lg rounded-2xl hover:bg-surface-container-low transition-colors items-start border-l-2 border-outline-variant hover:border-kintex">
|
||
<div class="w-32 flex-shrink-0 pt-1">
|
||
<span class="text-kintex font-bold block">15:00 - 17:00</span>
|
||
<span class="text-xs text-on-surface-variant">비즈니스 라운지</span>
|
||
</div>
|
||
<div class="flex-grow">
|
||
<div class="inline-block bg-tertiary-fixed text-on-tertiary-fixed text-[10px] font-bold px-2 py-0.5 rounded mb-2">NETWORKING</div>
|
||
<h4 class="text-title-sm font-title-sm mb-1">Global Buyers Matching Day</h4>
|
||
<p class="text-body-sm text-on-surface-variant">해외 유망 기업과 국내 공급사 간의 1:1 비즈니스 미팅</p>
|
||
</div>
|
||
<button class="flex items-center gap-1 text-kintex font-bold hover:underline">
|
||
상세보기 <span class="material-symbols-outlined text-[18px]">chevron_right</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 6. Speaker Cards -->
|
||
<section id="speakers" class="scroll-mt-40">
|
||
<h2 class="font-display-lg text-display-lg text-center mb-section-padding">주요 연사</h2>
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-gutter">
|
||
<!-- Speaker Card -->
|
||
<div class="group">
|
||
<div class="aspect-[3/4] rounded-2xl overflow-hidden mb-stack-md relative shadow-lg">
|
||
<img src="placeholder" data-alt="A professional studio portrait of a middle-aged male executive in a sharp navy suit, looking confident and smiling slightly. He has short styled hair and glasses. The background is a clean, neutral gray gradient. The lighting is soft and professional, typical of high-end corporate headshots." class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
||
<div class="absolute inset-0 bg-kintex/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||
<button class="bg-white text-kintex p-3 rounded-full shadow-lg">
|
||
<span class="material-symbols-outlined">contact_page</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<h5 class="font-title-sm text-title-sm">김철수</h5>
|
||
<p class="text-on-surface-variant text-body-sm">AI 연구소장 | TechCorp</p>
|
||
</div>
|
||
<!-- Speaker Card -->
|
||
<div class="group">
|
||
<div class="aspect-[3/4] rounded-2xl overflow-hidden mb-stack-md relative shadow-lg">
|
||
<img src="placeholder" data-alt="A professional headshot of a female technology leader in her late 30s. She is wearing a modern white blazer over a black top. She has a warm, intelligent expression and is posed against a minimalist, bright architectural background. High-quality corporate photography style with natural skin tones and soft depth of field." class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
||
<div class="absolute inset-0 bg-kintex/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||
<button class="bg-white text-kintex p-3 rounded-full shadow-lg">
|
||
<span class="material-symbols-outlined">contact_page</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<h5 class="font-title-sm text-title-sm">이영희</h5>
|
||
<p class="text-on-surface-variant text-body-sm">CTO | Automatech</p>
|
||
</div>
|
||
<!-- Speaker Card -->
|
||
<div class="group">
|
||
<div class="aspect-[3/4] rounded-2xl overflow-hidden mb-stack-md relative shadow-lg">
|
||
<img src="placeholder" data-alt="A studio portrait of a senior male professor or researcher with a kind, experienced face. He is wearing a classic charcoal sweater and button-down shirt. The aesthetic is academic yet professional, with soft directional lighting that adds depth to the portrait. High resolution and clear detail." class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
||
<div class="absolute inset-0 bg-kintex/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||
<button class="bg-white text-kintex p-3 rounded-full shadow-lg">
|
||
<span class="material-symbols-outlined">contact_page</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<h5 class="font-title-sm text-title-sm">박지성</h5>
|
||
<p class="text-on-surface-variant text-body-sm">로봇공학 석좌교수 | Korea Univ.</p>
|
||
</div>
|
||
<!-- Speaker Card -->
|
||
<div class="group">
|
||
<div class="aspect-[3/4] rounded-2xl overflow-hidden mb-stack-md relative shadow-lg">
|
||
<img src="placeholder" data-alt="A professional corporate headshot of a younger female entrepreneur with a vibrant energy. She is wearing a dark teal business casual suit and smiling brightly. The background is a slightly blurred modern office space with clean lines and plants. Sophisticated lighting highlights her features and conveys leadership." class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
||
<div class="absolute inset-0 bg-kintex/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||
<button class="bg-white text-kintex p-3 rounded-full shadow-lg">
|
||
<span class="material-symbols-outlined">contact_page</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<h5 class="font-title-sm text-title-sm">Sarah Jenkins</h5>
|
||
<p class="text-on-surface-variant text-body-sm">Global VP | Digitron</p>
|
||
</div>
|
||
</div>
|
||
<div class="mt-stack-lg text-center">
|
||
<button class="text-kintex font-bold hover:underline flex items-center gap-2 mx-auto">
|
||
전체 연사 리스트 보기 <span class="material-symbols-outlined">arrow_downward</span>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- 8. Footer -->
|
||
<footer class="bg-inverse-surface dark:bg-on-surface text-surface-bright border-t-4 border-kintex">
|
||
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-gutter px-container-padding py-section-padding">
|
||
<div class="space-y-stack-md">
|
||
<img src="https://lh3.googleusercontent.com/aida-public/AB6AXuC234fHscU3dFneFMAJkKrPbg4er8z1egYkCTw-K3B4zP2-_A00pd02D0mSldPRgOjM4wvEnh2nHYAchDlkK6V4qaP29YKpKBFYgvy8mECxLg57x6UHvCrOec-6TeyA4y1eIzUTz_oi0_UzXSq3iLA9C9l_jmM5KaYOa2WJq1pMAjbxfqo1dmfMZCDoR7OxhrPqMTUY4MLMgDSq7OAya7dNP9QxigZDMd7H_lXZzziWFdXWVHsyqFEMLAyRFBpRqOHr_DS9-SSJv5U" alt="KINTEX Logo" class="h-10 brightness-0 invert">
|
||
<p class="font-body-base opacity-70">
|
||
대한민국 최고의 컨벤션 센터 킨텍스가 <br>미래 제조 산업의 장을 엽니다.
|
||
</p>
|
||
</div>
|
||
<div class="space-y-stack-md">
|
||
<h6 class="font-title-sm text-white">Contact Us</h6>
|
||
<ul class="space-y-2 opacity-70 text-sm">
|
||
<li>경기도 고양시 일산서구 킨텍스로 217-60</li>
|
||
<li>Tel: 031-995-8114</li>
|
||
<li>Email: exhibition@kintex.com</li>
|
||
</ul>
|
||
</div>
|
||
<div class="space-y-stack-md">
|
||
<h6 class="font-title-sm text-white">Quick Links</h6>
|
||
<ul class="space-y-2 opacity-70 text-sm">
|
||
<li><a href="#" class="hover:text-primary-fixed transition-colors">전시회 소개</a></li>
|
||
<li><a href="#" class="hover:text-primary-fixed transition-colors">부스 참가 안내</a></li>
|
||
<li><a href="#" class="hover:text-primary-fixed transition-colors">뉴스레터 구독</a></li>
|
||
<li><a href="#" class="hover:text-primary-fixed transition-colors">오시는 길</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="space-y-stack-md">
|
||
<h6 class="font-title-sm text-white">Follow Us</h6>
|
||
<div class="flex gap-stack-md">
|
||
<a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-kintex transition-colors">
|
||
<span class="material-symbols-outlined">public</span>
|
||
</a>
|
||
<a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-kintex transition-colors">
|
||
<span class="material-symbols-outlined">play_circle</span>
|
||
</a>
|
||
<a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-kintex transition-colors">
|
||
<span class="material-symbols-outlined">campaign</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="border-t border-white/10 py-6 text-center text-xs opacity-50 px-container-padding">
|
||
© 2026 KINTEX. All rights reserved. Powering the future of manufacturing. | <a href="#" class="hover:underline">Privacy Policy</a> | <a href="#" class="hover:underline">Terms of Service</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- FAB for quick registration -->
|
||
<button class="fixed bottom-8 right-8 bg-kintex text-white px-8 py-4 rounded-full font-bold shadow-2xl hover:scale-105 active:scale-95 transition-all z-50 flex items-center gap-2 group">
|
||
<span class="material-symbols-outlined group-hover:animate-bounce">app_registration</span>
|
||
사전등록 바로가기
|
||
</button>
|
||
|
||
<script>
|
||
// Simple Intersection Observer for scroll tracking on tabs
|
||
const sections = document.querySelectorAll('section');
|
||
const navLinks = document.querySelectorAll('.glass-nav a');
|
||
|
||
window.addEventListener('scroll', () => {
|
||
let current = '';
|
||
sections.forEach(section => {
|
||
const sectionTop = section.offsetTop;
|
||
const sectionHeight = section.clientHeight;
|
||
if (pageYOffset >= (sectionTop - 150)) {
|
||
current = section.getAttribute('id');
|
||
}
|
||
});
|
||
|
||
navLinks.forEach(link => {
|
||
link.classList.remove('sticky-tab-active');
|
||
link.classList.add('text-on-surface-variant');
|
||
if (link.getAttribute('href').includes(current)) {
|
||
link.classList.add('sticky-tab-active');
|
||
link.classList.remove('text-on-surface-variant');
|
||
}
|
||
});
|
||
});
|
||
|
||
// Smooth scroll
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||
behavior: 'smooth'
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html></style></head><body></body></html> |