Spaces:

krevas
/

aimember

Running

File size: 55,797 Bytes

177620d

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>아이멤버(Aimember) - 롯데이노베이트의 기업용 AI 플랫폼</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
        
        body {
            font-family: 'Noto Sans KR', sans-serif;
            scroll-behavior: smooth;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, rgba(218, 41, 28, 0.9) 0%, rgba(183, 28, 28, 0.9) 100%), url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .ai-voice-demo {
            background: linear-gradient(135deg, rgba(254, 242, 242, 0.9) 0%, rgba(254, 226, 226, 0.9) 100%), url('https://images.unsplash.com/photo-1607705703571-c5a8695f18f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
        }
        
        .security-badge {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.05);
                opacity: 0.8;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
        
        .floating {
            animation: floating 6s ease-in-out infinite;
        }
        
        @keyframes floating {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }
        
        /* Custom color classes */
        .text-primary {
            color: rgb(218, 41, 28);
        }
        
        .bg-primary {
            background-color: rgb(218, 41, 28);
        }
        
        .hover\:bg-primary:hover {
            background-color: rgb(183, 28, 28);
        }
        
        .border-primary {
            border-color: rgb(218, 41, 28);
        }
        
        .bg-primary-light {
            background-color: rgba(218, 41, 28, 0.1);
        }
        
        .security-image {
            background: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
            min-height: 400px;
            border-radius: 12px;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .industries-bg {
            background: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
        }
        
        .testimonials-bg {
            background: linear-gradient(135deg, rgba(249, 250, 251, 0.9) 0%, rgba(243, 244, 246, 0.9) 100%), url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
        }
    </style>
</head>
<body class="bg-white">
    <!-- Navigation -->
    <nav class="bg-white shadow-lg sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <img class="h-8 w-auto" src="https://lotteinnovate.com/favicon.ico" alt="Aimember Logo">
                        <span class="ml-2 text-xl font-bold text-primary">Aimember</span>
                    </div>
                </div>
                <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
                    <a href="#features" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">주요 기능</a>
                    <a href="#technology" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">AI 기술</a>
                    <a href="#security" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">보안</a>
                    <a href="#industries" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">활용 분야</a>
                    <a href="#contact" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">문의하기</a>
                </div>
                <div class="-mr-2 flex items-center md:hidden">
                    <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
                        <span class="sr-only">메뉴 열기</span>
                        <i class="fas fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Mobile menu -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="#features" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">주요 기능</a>
                <a href="#technology" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">AI 기술</a>
                <a href="#security" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">보안</a>
                <a href="#industries" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">활용 분야</a>
                <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">문의하기</a>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <div class="gradient-bg text-white">
        <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-extrabold tracking-tight mb-6">
                        기업을 위한 <span class="text-red-200">차세대 AI 플랫폼</span>
                    </h1>
                    <p class="text-xl mb-8">
                        롯데이노베이트의 아이멤버는 기업의 업무 효율성과 보안을 혁신적으로 개선하는 생성형 AI 서비스입니다.
                    </p>
                    <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
                        <a href="#contact" class="bg-white text-primary hover:bg-gray-100 px-6 py-3 rounded-md text-lg font-semibold text-center">
                            무료 상담 신청
                        </a>
                        <a href="#features" class="bg-red-700 hover:bg-red-800 px-6 py-3 rounded-md text-lg font-semibold text-center">
                            기능 살펴보기
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Section -->
    <div class="bg-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
                <div>
                    <div class="text-4xl font-bold text-primary">50+</div>
                    <div class="text-gray-600 mt-2">롯데 계열사</div>
                </div>
                <div>
                    <div class="text-4xl font-bold text-primary">2X</div>
                    <div class="text-gray-600 mt-2">빠른 회의록 생성</div>
                </div>
                <div>
                    <div class="text-4xl font-bold text-primary">100%</div>
                    <div class="text-gray-600 mt-2">내부망 보안</div>
                </div>
                <div>
                    <div class="text-4xl font-bold text-primary">5+</div>
                    <div class="text-gray-600 mt-2">지원 언어</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Features Section -->
    <div id="features" class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
                    업무 혁신을 위한 아이멤버의 주요 기능
                </h2>
                <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto">
                    아이멤버는 다양한 업무 시나리오에 최적화된 기능으로 기업의 생산성을 극대화합니다.
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
                    <div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-file-alt text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">AI 보고서 생성</h3>
                    <p class="text-gray-600">
                        주제 입력만으로 자동 정보 탐색, 문서 초안 작성, 목차 및 표지 이미지 생성까지 지원하여 문서 작성 시간을 획기적으로 단축합니다.
                    </p>
                </div>
                
                <!-- Feature 2 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
                    <div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-users text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">회의록 자동 생성</h3>
                    <p class="text-gray-600">
                        회의 내용 요약과 후속 과제 제시, 화자 인식 기능으로 다수 참석자 구분이 가능하며 처리 속도가 기존 대비 2배 빨라졌습니다.
                    </p>
                </div>
                
                <!-- Feature 3 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
                    <div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-robot text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">나만의 음성 AI</h3>
                    <p class="text-gray-600">
                        사용자 목소리 학습을 통해 맞춤형 음성 생성이 가능하며, 한국어, 영어, 일본어 등 다국어 음성 합성을 지원합니다.
                    </p>
                </div>
                
                <!-- Feature 4 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
                    <div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-search text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">DART 정보 검색</h3>
                    <p class="text-gray-600">
                        DART 전자공시시스템 정보를 자동으로 검색하여 금융 분석과 기업 정보 조회를 간편하게 처리합니다.
                    </p>
                </div>
                
                <!-- Feature 5 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
                    <div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-file-powerpoint text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">PPT 메이커</h3>
                    <p class="text-gray-600">
                        보고서 내용을 기반으로 전문적인 프레젠테이션을 자동 생성하여 업무 효율을 극대화합니다.
                    </p>
                </div>
                
                <!-- Feature 6 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
                    <div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-code text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">코드 생성</h3>
                    <p class="text-gray-600">
                        개발 업무를 지원하는 코드 생성 기능으로 소프트웨어 개발 생산성을 높입니다.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Technology Section -->
    <div id="technology" class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:grid lg:grid-cols-12 lg:gap-8">
                <div class="lg:col-span-5">
                    <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
                        아이멤버의 혁신적인 AI 기술
                    </h2>
                    <p class="mt-3 text-lg text-gray-600">
                        롯데이노베이트가 자체 개발한 최첨단 AI 기술로 기업의 업무 방식을 혁신합니다.
                    </p>
                    
                    <div class="mt-8 space-y-6">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
                                    <i class="fas fa-brain"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-medium text-gray-900">'두뇌풀가동' 추론 기능</h3>
                                <p class="mt-2 text-gray-600">
                                    단계별 문제 해결 과정을 독백 형식으로 제시하여 더 정확하고 신뢰성 있는 답변을 제공합니다. 환각(hallucination) 현상을 줄이고 논리적 문제 해결에 탁월합니다.
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
                                    <i class="fas fa-eye"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-medium text-gray-900">멀티모달 지원</h3>
                                <p class="mt-2 text-gray-600">
                                    웹 검색, 파일 및 URL 기반 답변, DART 검색, OCR, 음성 인식, 이미지 생성 등 다양한 데이터 입력을 처리할 수 있는 다중 모달리티 기술을 적용했습니다.
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
                                    <i class="fas fa-microphone"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-medium text-gray-900">고급 음성 처리</h3>
                                <p class="mt-2 text-gray-600">
                                    화자 인식과 다국어 음성 합성 기술로 자연스러운 음성 인터페이스를 구현하여 업무 효율을 높입니다.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-12 lg:mt-0 lg:col-span-7">
                    <div class="bg-gray-100 rounded-xl p-6">
                        <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                            <div class="flex items-center mb-3">
                                <div class="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-white font-bold">U</div>
                                <span class="ml-2 font-medium">사용자</span>
                            </div>
                            <p class="text-gray-800">올해 2분기 우리 회사 매출 현황과 경쟁사 비교 분석 보고서를 작성해줘</p>
                        </div>
                        
                        <div class="bg-primary-light rounded-lg shadow-md p-4">
                            <div class="flex items-center mb-3">
                                <div class="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-white">
                                    <i class="fas fa-robot"></i>
                                </div>
                                <span class="ml-2 font-medium">아이멤버</span>
                            </div>
                            <div class="text-gray-800">
                                <p class="mb-2">[두뇌풀가동 모드 활성화] 보고서 작성을 시작하겠습니다. 단계별로 생각 과정을 공유드립니다:</p>
                                <ol class="list-decimal pl-5 space-y-2">
                                    <li>DART 시스템에서 우리 회사 2분기 공시 자료 검색 중...</li>
                                    <li>경쟁사 3곳(삼성, LG, SK)의 최근 실적 자료 수집 완료</li>
                                    <li>시장 점유율 비교를 위한 통계 데이터 분석 진행</li>
                                    <li>보고서 초안 작성 시작 (목차: 개요, 매출 분석, 경쟁사 비교, 시사점)</li>
                                    <li>시각화 자료(차트) 3개 생성 완료</li>
                                </ol>
                                <p class="mt-3 font-medium">보고서 초안이 완성되었습니다. 추가로 필요한 내용이 있으신가요?</p>
                            </div>
                        </div>
                        
                        <div class="mt-6 flex justify-center">
                            <button class="flex items-center text-primary">
                                <i class="fas fa-volume-up mr-2"></i>
                                음성으로 듣기
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- AI Voice Demo -->
    <div class="ai-voice-demo py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
                    나만의 음성 AI 체험하기
                </h2>
                <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto">
                    5분만에 여러분의 목소리로 AI를 학습시켜 보세요.
                </p>
            </div>
            
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="md:flex">
                    <div class="md:w-1/2 p-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">음성 학습 프로세스</h3>
                        <ol class="list-decimal pl-5 space-y-3 text-gray-700">
                            <li>5분 분량의 음성 녹음 (일반 대화 또는 문서 읽기)</li>
                            <li>AI 모델이 음성 특징 분석 (약 30분 소요)</li>
                            <li>학습 완료 후 즉시 사용 가능</li>
                            <li>언제든지 추가 학습으로 품질 향상 가능</li>
                        </ol>
                        
                        <div class="mt-8">
                            <button id="recordButton" class="bg-primary hover:bg-red-800 text-white px-6 py-3 rounded-full font-medium flex items-center">
                                <i class="fas fa-microphone mr-2"></i>
                                음성 녹음 시작
                            </button>
                            <div id="recordingStatus" class="mt-2 text-sm text-gray-500 hidden">
                                <i class="fas fa-circle text-primary animate-pulse mr-1"></i>
                                녹음 중... 00:05 / 05:00
                            </div>
                        </div>
                    </div>
                    
                    <div class="md:w-1/2 bg-gray-50 p-8 flex flex-col items-center justify-center">
                        <div class="w-full max-w-md">
                            <div class="bg-white p-6 rounded-lg shadow-md mb-6">
                                <div class="flex items-center mb-4">
                                    <div class="h-10 w-10 rounded-full bg-primary flex items-center justify-center text-white">
                                        <i class="fas fa-robot"></i>
                                    </div>
                                    <div class="ml-3">
                                        <div class="font-medium">AI 음성 결과</div>
                                        <div class="text-xs text-gray-500">사용자 음성 기반</div>
                                    </div>
                                </div>
                                <div id="voiceOutput" class="text-gray-700">
                                    녹음된 음성을 분석하여 이곳에 결과가 표시됩니다. 녹음 버튼을 눌러 5분 분량의 음성을 녹음해주세요.
                                </div>
                            </div>
                            
                            <div class="flex justify-center space-x-4">
                                <button class="bg-primary hover:bg-red-800 text-white px-4 py-2 rounded-full">
                                    <i class="fas fa-play mr-1"></i> 재생
                                </button>
                                <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-full">
                                    <i class="fas fa-download mr-1"></i> 저장
                                </button>
                                <button class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-full">
                                    <i class="fas fa-share-alt mr-1"></i> 공유
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Security Section -->
    <div id="security" class="py-16 bg-gray-900 text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:grid lg:grid-cols-12 lg:gap-8">
                <div class="lg:col-span-7">
                    <div class="security-image relative">
                        <div class="security-badge absolute -top-5 -left-5 bg-primary text-white px-4 py-2 rounded-full font-bold shadow-lg">
                            <i class="fas fa-shield-alt mr-1"></i> 보안 인증
                        </div>
                    </div>
                </div>
                
                <div class="mt-12 lg:mt-0 lg:col-span-5">
                    <h2 class="text-3xl font-extrabold sm:text-4xl">
                        기업 데이터를 위한 철통 보안
                    </h2>
                    <p class="mt-3 text-lg text-gray-300">
                        아이멤버는 기업의 민감한 데이터를 안전하게 보호하기 위해 다양한 보안 기술을 적용했습니다.
                    </p>
                    
                    <div class="mt-8 space-y-6">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-gray-800 text-red-400">
                                    <i class="fas fa-lock"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-medium">프라이빗 AI 서비스</h3>
                                <p class="mt-2 text-gray-300">
                                    기업 내부망에 AI를 구축하고 자체 보안 알고리즘을 적용해 민감한 데이터의 외부 유출을 원천 차단합니다.
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-gray-800 text-red-400">
                                    <i class="fas fa-eraser"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-medium">자동 데이터 삭제</h3>
                                <p class="mt-2 text-gray-300">
                                    음성 데이터를 자동 삭제하는 알고리즘으로 정보 유출 위험을 최소화합니다.
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-gray-800 text-red-400">
                                    <i class="fas fa-user-shield"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-medium">접근 제어 시스템</h3>
                                <p class="mt-2 text-gray-300">
                                    역할 기반 접근 제어(RBAC)로 사용자별 권한을 세분화하여 관리합니다.
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-gray-800 text-red-400">
                                    <i class="fas fa-fingerprint"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-medium">엔드투엔드 암호화</h3>
                                <p class="mt-2 text-gray-300">
                                    모든 데이터 전송 과정에서 강력한 암호화 기술을 적용하여 보안을 강화합니다.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Industries Section -->
    <div id="industries" class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
                    아이멤버의 활용 분야
                </h2>
                <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto">
                    다양한 산업 분야에서 아이멤버가 비즈니스 혁신을 주도하고 있습니다.
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Industry 1 -->
                <div class="bg-primary-light rounded-xl overflow-hidden shadow-md">
                    <div class="h-40 bg-primary flex items-center justify-center">
                        <i class="fas fa-store text-white text-5xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-gray-900 mb-3">유통/소매</h3>
                        <ul class="text-gray-600 space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-check text-primary mt-1 mr-2"></i>
                                <span>고객 문의 자동 응대</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-primary mt-1 mr-2"></i>
                                <span>판매 데이터 분석</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-primary mt-1 mr-2"></i>
                                <span>재고 관리 최적화</span>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <!-- Industry 2 -->
                <div class="bg-green-50 rounded-xl overflow-hidden shadow-md">
                    <div class="h-40 bg-green-600 flex items-center justify-center">
                        <i class="fas fa-university text-white text-5xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-gray-900 mb-3">금융/보험</h3>
                        <ul class="text-gray-600 space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>금융 상품 분석</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>리스크 관리</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>규정 준수 검토</span>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <!-- Industry 3 -->
                <div class="bg-yellow-50 rounded-xl overflow-hidden shadow-md">
                    <div class="h-40 bg-yellow-500 flex items-center justify-center">
                        <i class="fas fa-utensils text-white text-5xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-gray-900 mb-3">식품/호텔</h3>
                        <ul class="text-gray-600 space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
                                <span>메뉴 개발 지원</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
                                <span>고객 피드백 분석</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i>
                                <span>이벤트 기획 지원</span>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <!-- Industry 4 -->
                <div class="bg-purple-50 rounded-xl overflow-hidden shadow-md">
                    <div class="h-40 bg-purple-600 flex items-center justify-center">
                        <i class="fas fa-industry text-white text-5xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-gray-900 mb-3">제조/화학</h3>
                        <ul class="text-gray-600 space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
                                <span>공정 최적화 분석</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
                                <span>품질 관리 보고서</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
                                <span>안전 규정 준수</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="mt-16 text-center">
                <p class="text-lg text-gray-600">
                    아이멤버는 SaaS(클라우드 기반 서비스형 소프트웨어) 형태로도 제공되어 모든 산업 분야에서 활용 가능합니다.
                </p>
                <div class="mt-6">
                    <a href="#contact" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-red-800">
                        맞춤형 솔루션 문의
                        <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Testimonials -->
    <div class="testimonials-bg py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
                    아이멤버를 사용하는 기업들의 이야기
                </h2>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Testimonial 1 -->
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="h-12 w-12 rounded-full bg-primary-light flex items-center justify-center text-primary font-bold">L</div>
                        <div class="ml-4">
                            <div class="font-medium">롯데백화점</div>
                            <div class="text-sm text-gray-500">고객서비스팀</div>
                        </div>
                    </div>
                    <p class="text-gray-600 italic">
                        "아이멤버의 AI 챗봇을 도입한 후 고객 문의 처리 시간이 60% 단축되었습니다. 특히 음성 인식 정확도가 뛰어나 콜센터 업무 효율이 크게 개선되었습니다."
                    </p>
                    <div class="mt-4 flex text-yellow-400">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>
                
                <!-- Testimonial 2 -->
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="h-12 w-12 rounded-full bg-primary-light flex items-center justify-center text-primary font-bold">C</div>
                        <div class="ml-4">
                            <div class="font-medium">롯데케미칼</div>
                            <div class="text-sm text-gray-500">연구개발본부</div>
                        </div>
                    </div>
                    <p class="text-gray-600 italic">
                        "연구 보고서 작성을 위해 아이멤버를 활용하고 있습니다. 복잡한 화학 데이터 분석과 보고서 초안 작성이 자동화되어 연구원들의 생산성이 크게 향상되었습니다."
                    </p>
                    <div class="mt-4 flex text-yellow-400">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
                
                <!-- Testimonial 3 -->
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="h-12 w-12 rounded-full bg-primary-light flex items-center justify-center text-primary font-bold">H</div>
                        <div class="ml-4">
                            <div class="font-medium">롯데호텔</div>
                            <div class="text-sm text-gray-500">마케팅팀</div>
                        </div>
                    </div>
                    <p class="text-gray-600 italic">
                        "아이멤버의 다국어 음성 합성 기능으로 다양한 언어의 홍보 콘텐츠를 빠르게 제작할 수 있게 되었습니다. 특히 맞춤형 음성 AI가 고객 반응이 매우 좋습니다."
                    </p>
                    <div class="mt-4 flex text-yellow-400">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- CTA Section -->
    <div class="gradient-bg py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
                지금 바로 아이멤버를 경험해보세요
            </h2>
            <p class="mt-4 max-w-2xl text-xl text-red-200 mx-auto">
                기업의 업무 방식을 혁신할 아이멤버의 강력한 기능을 확인하실 수 있습니다.
            </p>
            <div class="mt-8 flex justify-center space-x-4">
                <a href="#contact" class="bg-white text-primary hover:bg-gray-100 px-6 py-3 rounded-md text-lg font-semibold">
                    데모 신청하기
                </a>
                <a href="#" class="bg-red-700 hover:bg-red-800 text-white px-6 py-3 rounded-md text-lg font-semibold">
                    <i class="fas fa-play-circle mr-2"></i> 소개 영상 보기
                </a>
            </div>
        </div>
    </div>

    <!-- Contact Section -->
    <div id="contact" class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:grid lg:grid-cols-2 lg:gap-8">
                <div class="mb-12 lg:mb-0">
                    <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
                        아이멤버에 대해 궁금하신가요?
                    </h2>
                    <p class="mt-4 text-lg text-gray-600">
                        전문 컨설턴트가 귀사의 비즈니스에 최적화된 AI 솔루션을 제안해 드립니다.
                    </p>
                    
                    <div class="mt-8">
                        <div class="flex items-start mb-6">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary-light text-primary">
                                    <i class="fas fa-phone-alt"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-medium text-gray-900">전화 문의</h3>
                                <p class="mt-2 text-gray-600">
                                    02-2626-4000(평일 09:00~18:00)
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex items-start mb-6">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary-light text-primary">
                                    <i class="fas fa-envelope"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-medium text-gray-900">이메일 문의</h3>
                                <p class="mt-2 text-gray-600">
                                    aimember@lotte.net
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary-light text-primary">
                                    <i class="fas fa-map-marker-alt"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-medium text-gray-900">오시는 길</h3>
                                <p class="mt-2 text-gray-600">
                                    서울특별시 금천구 가산디지털2로 179
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <div class="bg-white shadow-lg rounded-lg p-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">무료 상담 신청</h3>
                        <form id="contactForm">
                            <div class="mb-4">
                                <label for="name" class="block text-sm font-medium text-gray-700 mb-1">이름</label>
                                <input type="text" id="name" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
                            </div>
                            <div class="mb-4">
                                <label for="company" class="block text-sm font-medium text-gray-700 mb-1">회사명</label>
                                <input type="text" id="company" name="company" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
                            </div>
                            <div class="mb-4">
                                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">이메일</label>
                                <input type="email" id="email" name="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
                            </div>
                            <div class="mb-4">
                                <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">전화번호</label>
                                <input type="tel" id="phone" name="phone" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
                            </div>
                            <div class="mb-6">
                                <label for="message" class="block text-sm font-medium text-gray-700 mb-1">문의 내용</label>
                                <textarea id="message" name="message" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"></textarea>
                            </div>
                            <button type="submit" class="w-full bg-primary hover:bg-red-800 text-white py-3 px-4 rounded-md font-medium">
                                상담 신청하기
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white pt-12 pb-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">아이멤버</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-300 hover:text-white">소개</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white">기능</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white">가격</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white">고객사례</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">리소스</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-300 hover:text-white">블로그</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white">도움말</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white">API 문서</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white">다운로드</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">회사</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-300 hover:text-white">롯데이노베이트</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white">채용</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white">파트너</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white">연락처</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">소셜 미디어</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-300 hover:text-white">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="text-gray-300 hover:text-white">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-300 hover:text-white">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        <a href="#" class="text-gray-300 hover:text-white">
                            <i class="fab fa-youtube"></i>
                        </a>
                    </div>
                    
                    <div class="mt-6">
                        <h4 class="text-sm font-medium text-gray-400 mb-2">뉴스레터 구독</h4>
                        <div class="flex">
                            <input type="email" placeholder="이메일 주소" class="px-3 py-2 bg-gray-800 text-white rounded-l-md focus:outline-none w-full">
                            <button class="bg-primary hover:bg-red-800 px-4 py-2 rounded-r-md">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
                <div class="mt-4 md:mt-0 text-sm text-gray-400">
                    Copyright© LOTTE INNOVATE COMPANY. All rights Reserved.
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Mobile menu toggle
        document.getElementById('mobile-menu-button').addEventListener('click', function() {
            const menu = document.getElementById('mobile-menu');
            menu.classList.toggle('hidden');
        });

        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth'
                    });
                    
                    // Close mobile menu if open
                    const mobileMenu = document.getElementById('mobile-menu');
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });

        // Voice recording demo
        document.getElementById('recordButton').addEventListener('click', function() {
            const recordingStatus = document.getElementById('recordingStatus');
            const voiceOutput = document.getElementById('voiceOutput');
            
            this.classList.remove('bg-primary', 'hover:bg-red-800');
            this.classList.add('bg-gray-500', 'hover:bg-gray-600');
            this.innerHTML = '<i class="fas fa-stop mr-2"></i> 녹음 중지';
            
            recordingStatus.classList.remove('hidden');
            
            // Simulate recording
            let seconds = 0;
            const timer = setInterval(() => {
                seconds++;
                const minutes = Math.floor(seconds / 60);
                const secs = seconds % 60;
                recordingStatus.innerHTML = `<i class="fas fa-circle text-primary animate-pulse mr-1"></i> 녹음 중... ${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')} / 05:00`;
                
                if (seconds >= 5) {
                    clearInterval(timer);
                    this.classList.remove('bg-gray-500', 'hover:bg-gray-600');
                    this.classList.add('bg-primary', 'hover:bg-red-800');
                    this.innerHTML = '<i class="fas fa-microphone mr-2"></i> 음성 녹음 시작';
                    recordingStatus.classList.add('hidden');
                    
                    // Show result
                    voiceOutput.innerHTML = "안녕하세요. 아이멤버 음성 AI입니다. 이 음성은 사용자님의 목소리 패턴을 기반으로 생성되었습니다. 아이멤버는 기업의 업무 효율성을 높이기 위해 다양한 기능을 제공하고 있습니다. 문의 사항이 있으시면 언제든지 연락주세요.";
                }
            }, 1000);
            
            // Change back to record button when clicked again
            const originalText = this.innerHTML;
            this.addEventListener('click', function handler(e) {
                if (seconds < 5) {
                    e.preventDefault();
                    clearInterval(timer);
                    this.classList.remove('bg-gray-500', 'hover:bg-gray-600');
                    this.classList.add('bg-primary', 'hover:bg-red-800');
                    this.innerHTML = '<i class="fas fa-microphone mr-2"></i> 음성 녹음 시작';
                    recordingStatus.classList.add('hidden');
                    this.removeEventListener('click', handler);
                }
            }, {once: true});
        });

        // Form submission
        document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('상담 신청이 완료되었습니다. 전문 상담사가 빠른 시일 내에 연락드리겠습니다.');
            this.reset();
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=krevas/aimember" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>