.elementor-173 .elementor-element.elementor-element-b6d1666{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS */<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>수탁과제 - 엘에스공간정보연구소</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        /* LSGIRI Projects Page Styles */
        .lsgiri-projects-wrapper * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .lsgiri-projects-wrapper {
            --lsgiri-primary: #E91E63;
            --lsgiri-primary-light: #F8BBD0;
            --lsgiri-primary-dark: #C2185B;
            --lsgiri-secondary: #1A237E;
            --lsgiri-secondary-light: #3F51B5;
            --lsgiri-gray-900: #212121;
            --lsgiri-gray-700: #616161;
            --lsgiri-gray-500: #9E9E9E;
            --lsgiri-gray-300: #E0E0E0;
            --lsgiri-gray-100: #F5F5F5;
            --lsgiri-white: #FFFFFF;
            
            font-family: 'Noto Sans KR', sans-serif;
            color: var(--lsgiri-gray-900);
            line-height: 1.7;
        }

        /* Page Hero Section */
        .lsgiri-page-hero {
            background: linear-gradient(135deg, var(--lsgiri-secondary) 0%, var(--lsgiri-secondary-light) 100%);
            padding: 120px 0 80px;
            position: relative;
            overflow: hidden;
        }

        .lsgiri-page-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px;
            pointer-events: none;
        }

        .lsgiri-hero-container {
            max-width: 1320px;
            margin: 0 auto;
            padding: 0 20px;
            position: relative;
            z-index: 1;
        }

        .lsgiri-hero-content {
            text-align: center;
            color: var(--lsgiri-white);
        }

        .lsgiri-hero-title {
            font-size: 48px;
            font-weight: 700;
            margin-bottom: 20px;
            animation: fadeInUp 0.8s ease;
        }

        .lsgiri-hero-subtitle {
            font-size: 20px;
            opacity: 0.9;
            animation: fadeInUp 0.8s ease 0.2s both;
        }

        /* Breadcrumb */
        .lsgiri-breadcrumb {
            background: var(--lsgiri-gray-100);
            padding: 20px 0;
            border-bottom: 1px solid var(--lsgiri-gray-300);
        }

        .lsgiri-breadcrumb-container {
            max-width: 1320px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .lsgiri-breadcrumb-list {
            display: flex;
            align-items: center;
            gap: 15px;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .lsgiri-breadcrumb-item {
            font-size: 14px;
            color: var(--lsgiri-gray-700);
        }

        .lsgiri-breadcrumb-item a {
            color: var(--lsgiri-gray-700);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .lsgiri-breadcrumb-item a:hover {
            color: var(--lsgiri-primary);
        }

        .lsgiri-breadcrumb-item.active {
            color: var(--lsgiri-primary);
            font-weight: 500;
        }

        .lsgiri-breadcrumb-separator {
            color: var(--lsgiri-gray-500);
        }

        /* Main Content */
        .lsgiri-projects-content {
            padding: 80px 0;
        }

        .lsgiri-content-container {
            max-width: 1320px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Filter Section */
        .lsgiri-filter-section {
            margin-bottom: 50px;
            animation: fadeInUp 0.8s ease;
        }

        .lsgiri-filter-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
            gap: 20px;
        }

        .lsgiri-filter-title {
            font-size: 28px;
            color: var(--lsgiri-secondary);
        }

        .lsgiri-search-box {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--lsgiri-white);
            border: 1px solid var(--lsgiri-gray-300);
            border-radius: 50px;
            padding: 10px 20px;
            width: 300px;
            transition: all 0.3s ease;
        }

        .lsgiri-search-box:focus-within {
            border-color: var(--lsgiri-primary);
            box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.1);
        }

        .lsgiri-search-input {
            border: none;
            outline: none;
            flex: 1;
            font-size: 15px;
            font-family: inherit;
        }

        .lsgiri-search-icon {
            color: var(--lsgiri-gray-500);
            font-size: 18px;
        }

        /* Filter Tabs */
        .lsgiri-filter-tabs {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .lsgiri-filter-btn {
            padding: 10px 25px;
            background: var(--lsgiri-white);
            border: 2px solid var(--lsgiri-gray-300);
            border-radius: 50px;
            font-size: 15px;
            font-weight: 500;
            color: var(--lsgiri-gray-700);
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .lsgiri-filter-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: var(--lsgiri-primary);
            transition: left 0.3s ease;
            z-index: -1;
        }

        .lsgiri-filter-btn:hover {
            color: var(--lsgiri-primary);
            border-color: var(--lsgiri-primary);
        }

        .lsgiri-filter-btn.active {
            background: var(--lsgiri-primary);
            color: var(--lsgiri-white);
            border-color: var(--lsgiri-primary);
        }

        .lsgiri-filter-btn.active::before {
            left: 0;
        }

        .lsgiri-filter-count {
            display: inline-block;
            background: rgba(0, 0, 0, 0.1);
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            margin-left: 5px;
        }

        .lsgiri-filter-btn.active .lsgiri-filter-count {
            background: rgba(255, 255, 255, 0.3);
        }

        /* Projects Grid */
        .lsgiri-projects-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            margin-bottom: 80px;
        }

        .lsgiri-project-card {
            background: var(--lsgiri-white);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            cursor: pointer;
            display: flex;
            flex-direction: column;
        }

        .lsgiri-project-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
        }

        .lsgiri-project-header {
            padding: 30px;
            position: relative;
            background: var(--lsgiri-gray-100);
        }

        .lsgiri-project-role {
            display: inline-block;
            background: var(--lsgiri-primary);
            color: var(--lsgiri-white);
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
        }

        .lsgiri-role-lead {
            background: var(--lsgiri-primary);
        }

        .lsgiri-role-member {
            background: var(--lsgiri-secondary);
        }

        .lsgiri-project-year {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--lsgiri-secondary);
            color: var(--lsgiri-white);
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
        }

        .lsgiri-project-field {
            display: inline-block;
            background: var(--lsgiri-white);
            color: var(--lsgiri-gray-700);
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 13px;
            margin-bottom: 15px;
        }

        .lsgiri-project-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--lsgiri-secondary);
            margin-bottom: 0;
            line-height: 1.4;
        }

        .lsgiri-project-body {
            padding: 30px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .lsgiri-project-client {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
            font-size: 15px;
            color: var(--lsgiri-gray-700);
        }

        .lsgiri-client-label {
            font-weight: 500;
            color: var(--lsgiri-gray-900);
        }

        .lsgiri-project-desc {
            font-size: 14px;
            color: var(--lsgiri-gray-700);
            line-height: 1.8;
            margin-bottom: 20px;
            flex: 1;
        }

        .lsgiri-project-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 20px;
        }

        .lsgiri-project-tag {
            background: var(--lsgiri-gray-100);
            color: var(--lsgiri-gray-700);
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
        }

        .lsgiri-project-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 20px;
            border-top: 1px solid var(--lsgiri-gray-100);
        }

        .lsgiri-project-field {
            font-size: 14px;
            font-weight: 500;
            color: var(--lsgiri-gray-700);
            padding: 4px 12px;
            background: var(--lsgiri-gray-100);
            border-radius: 15px;
        }

        .lsgiri-project-link {
            color: var(--lsgiri-primary);
            text-decoration: none;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: gap 0.3s ease;
        }

        .lsgiri-project-link:hover {
            gap: 10px;
        }

        /* Featured Project */
        .lsgiri-featured-project {
            background: linear-gradient(135deg, var(--lsgiri-secondary) 0%, var(--lsgiri-secondary-light) 100%);
            border-radius: 30px;
            padding: 60px;
            color: var(--lsgiri-white);
            margin-bottom: 80px;
            position: relative;
            overflow: hidden;
        }

        .lsgiri-featured-project::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
        }

        .lsgiri-featured-badge {
            display: inline-block;
            background: var(--lsgiri-primary);
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
        }

        .lsgiri-featured-title {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
        }

        .lsgiri-featured-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            position: relative;
            z-index: 1;
        }

        .lsgiri-featured-desc {
            font-size: 18px;
            line-height: 1.8;
            opacity: 0.9;
        }

        .lsgiri-featured-info {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .lsgiri-featured-item {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 16px;
        }

        .lsgiri-featured-icon {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Pagination */
        .lsgiri-pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-top: 60px;
        }

        .lsgiri-page-btn {
            width: 40px;
            height: 40px;
            border: 1px solid var(--lsgiri-gray-300);
            background: var(--lsgiri-white);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            color: var(--lsgiri-gray-700);
        }

        .lsgiri-page-btn:hover {
            border-color: var(--lsgiri-primary);
            color: var(--lsgiri-primary);
        }

        .lsgiri-page-btn.active {
            background: var(--lsgiri-primary);
            color: var(--lsgiri-white);
            border-color: var(--lsgiri-primary);
        }

        .lsgiri-page-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .lsgiri-projects-grid {
                grid-template-columns: 1fr;
            }

            .lsgiri-featured-content {
                grid-template-columns: 1fr;
            }

            .lsgiri-featured-project {
                padding: 40px;
            }
        }

        @media (max-width: 768px) {
            .lsgiri-hero-title {
                font-size: 36px;
            }

            .lsgiri-filter-header {
                flex-direction: column;
                align-items: stretch;
            }

            .lsgiri-search-box {
                width: 100%;
            }

            .lsgiri-filter-tabs {
                justify-content: center;
            }

            .lsgiri-featured-project {
                padding: 30px 20px;
            }

            .lsgiri-featured-title {
                font-size: 24px;
            }

            .lsgiri-pagination {
                flex-wrap: wrap;
            }
        }
    </style>
</head>
<body>
    <div class="lsgiri-projects-wrapper">
        <!-- Page Hero -->
        <section class="lsgiri-page-hero">
            <div class="lsgiri-hero-container">
                <div class="lsgiri-hero-content">
                    <h1 class="lsgiri-hero-title">수행과제</h1>
                    <p class="lsgiri-hero-subtitle">정부 및 공공기관의 정책연구와 기술개발을 수행합니다</p>
                </div>
            </div>
        </section>

        <!-- Breadcrumb -->
        <nav class="lsgiri-breadcrumb">
            <div class="lsgiri-breadcrumb-container">
                <ul class="lsgiri-breadcrumb-list">
                    <li class="lsgiri-breadcrumb-item"><a href="/">홈</a></li>
                    <li class="lsgiri-breadcrumb-separator">›</li>
                    <li class="lsgiri-breadcrumb-item"><a href="/business">주요사업</a></li>
                    <li class="lsgiri-breadcrumb-separator">›</li>
                    <li class="lsgiri-breadcrumb-item active">수행과제</li>
                </ul>
            </div>
        </nav>

        <!-- Main Content -->
        <section class="lsgiri-projects-content">
            <div class="lsgiri-content-container">
                <!-- Filter Section -->
                <div class="lsgiri-filter-section">
                    <div class="lsgiri-filter-header">
                        <h2 class="lsgiri-filter-title">수탁과제 현황</h2>
                        <div class="lsgiri-search-box">
                            <span class="lsgiri-search-icon">🔍</span>
                            <input type="text" class="lsgiri-search-input" placeholder="과제명 검색...">
                        </div>
                    </div>

                    <div class="lsgiri-filter-tabs">
                        <button class="lsgiri-filter-btn active">
                            전체
                            <span class="lsgiri-filter-count">15</span>
                        </button>
                        <button class="lsgiri-filter-btn">
                            2020년대
                            <span class="lsgiri-filter-count">3</span>
                        </button>
                        <button class="lsgiri-filter-btn">
                            2010년대
                            <span class="lsgiri-filter-count">12</span>
                        </button>
                        <button class="lsgiri-filter-btn">
                            총괄책임
                            <span class="lsgiri-filter-count">7</span>
                        </button>
                        <button class="lsgiri-filter-btn">
                            연구원
                            <span class="lsgiri-filter-count">8</span>
                        </button>
                    </div>
                </div>

                <!-- Featured Project -->
                <div class="lsgiri-featured-project" style="animation: fadeInUp 0.8s ease 0.2s both">
                    <span class="lsgiri-featured-badge">🏆 최근 수탁과제</span>
                    <h3 class="lsgiri-featured-title">공동캠퍼스 교육 연구 선순환 체계 구축 정책연구</h3>
                    <div class="lsgiri-featured-content">
                        <div class="lsgiri-featured-desc">
                            대학 간 공동캠퍼스 운영을 통한 교육과 연구의 선순환 체계를 구축하기 위한 
                            정책 방안을 연구하는 과제입니다. 지역 대학 간 협력 모델을 개발하고 
                            교육 자원의 효율적 활용 방안을 제시하여 지역 교육 혁신에 기여합니다.
                        </div>
                        <div class="lsgiri-featured-info">
                            <div class="lsgiri-featured-item">
                                <span class="lsgiri-featured-icon">🏢</span>
                                <span>발주처: 전북대학교</span>
                            </div>
                            <div class="lsgiri-featured-item">
                                <span class="lsgiri-featured-icon">📅</span>
                                <span>수행연도: 2024년</span>
                            </div>
                            <div class="lsgiri-featured-item">
                                <span class="lsgiri-featured-icon">👤</span>
                                <span>참여역할: 연구원</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Projects Grid -->
                <div class="lsgiri-projects-grid">
                    <!-- Project 1 -->
                    <div class="lsgiri-project-card" style="animation: fadeInUp 0.8s ease 0.3s both">
                        <div class="lsgiri-project-header">
                            <span class="lsgiri-project-year">2024</span>
                            <span class="lsgiri-project-role lsgiri-role-member">연구원</span>
                            <h3 class="lsgiri-project-title">공동캠퍼스 교육 연구 선순환 체계 구축 정책연구</h3>
                        </div>
                        <div class="lsgiri-project-body">
                            <div class="lsgiri-project-client">
                                <span class="lsgiri-client-label">발주처:</span>
                                <span>전북대학교</span>
                            </div>
                            <p class="lsgiri-project-desc">
                                대학 간 공동캠퍼스 운영을 통한 교육과 연구의 선순환 체계를 구축하기 위한 
                                정책 방안을 연구하여 지역 대학 간 협력 모델 개발
                            </p>
                            <div class="lsgiri-project-tags">
                                <span class="lsgiri-project-tag">#교육정책</span>
                                <span class="lsgiri-project-tag">#대학협력</span>
                                <span class="lsgiri-project-tag">#정책연구</span>
                            </div>
                            <div class="lsgiri-project-footer">
                                <span class="lsgiri-project-field">교육</span>
                                <a href="#" class="lsgiri-project-link">
                                    상세보기 →
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Project 2 -->
                    <div class="lsgiri-project-card" style="animation: fadeInUp 0.8s ease 0.4s both">
                        <div class="lsgiri-project-header">
                            <span class="lsgiri-project-year">2023</span>
                            <span class="lsgiri-project-role lsgiri-role-member">연구원</span>
                            <h3 class="lsgiri-project-title">탄소공간지도기반 계획지원 기술개발</h3>
                        </div>
                        <div class="lsgiri-project-body">
                            <div class="lsgiri-project-client">
                                <span class="lsgiri-client-label">발주처:</span>
                                <span>국토교통과학기술진흥원</span>
                            </div>
                            <p class="lsgiri-project-desc">
                                탄소배출 공간정보를 지도화하고 이를 기반으로 도시계획 및 
                                환경정책 수립을 지원하는 기술 개발
                            </p>
                            <div class="lsgiri-project-tags">
                                <span class="lsgiri-project-tag">#탄소중립</span>
                                <span class="lsgiri-project-tag">#공간지도</span>
                                <span class="lsgiri-project-tag">#기술개발</span>
                            </div>
                            <div class="lsgiri-project-footer">
                                <span class="lsgiri-project-field">환경</span>
                                <a href="#" class="lsgiri-project-link">
                                    상세보기 →
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Project 3 -->
                    <div class="lsgiri-project-card" style="animation: fadeInUp 0.8s ease 0.5s both">
                        <div class="lsgiri-project-header">
                            <span class="lsgiri-project-year">2021</span>
                            <span class="lsgiri-project-role lsgiri-role-member">연구원</span>
                            <h3 class="lsgiri-project-title">DNA+ 농업분야 드론의 적용방안 연구</h3>
                        </div>
                        <div class="lsgiri-project-body">
                            <div class="lsgiri-project-client">
                                <span class="lsgiri-client-label">발주처:</span>
                                <span>한국전자통신연구원</span>
                            </div>
                            <p class="lsgiri-project-desc">
                                데이터, 네트워크, AI를 융합한 DNA+ 기술을 농업 분야 드론에 
                                적용하여 스마트 농업 실현 방안 연구
                            </p>
                            <div class="lsgiri-project-tags">
                                <span class="lsgiri-project-tag">#드론</span>
                                <span class="lsgiri-project-tag">#스마트농업</span>
                                <span class="lsgiri-project-tag">#DNA+</span>
                            </div>
                            <div class="lsgiri-project-footer">
                                <span class="lsgiri-project-field">농생명</span>
                                <a href="#" class="lsgiri-project-link">
                                    상세보기 →
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Project 4 -->
                    <div class="lsgiri-project-card" style="animation: fadeInUp 0.8s ease 0.6s both">
                        <div class="lsgiri-project-header">
                            <span class="lsgiri-project-year">2019</span>
                            <span class="lsgiri-project-role lsgiri-role-member">연구원</span>
                            <h3 class="lsgiri-project-title">시흥스마트시티 혁신 생태계조성계획 수립 및 글로벌 협력 지원체계 구축</h3>
                        </div>
                        <div class="lsgiri-project-body">
                            <div class="lsgiri-project-client">
                                <span class="lsgiri-client-label">발주처:</span>
                                <span>국토교통과학기술진흥원</span>
                            </div>
                            <p class="lsgiri-project-desc">
                                시흥시 스마트시티 조성을 위한 혁신 생태계 구축 계획을 수립하고 
                                글로벌 협력 네트워크 구축 방안 연구
                            </p>
                            <div class="lsgiri-project-tags">
                                <span class="lsgiri-project-tag">#스마트시티</span>
                                <span class="lsgiri-project-tag">#혁신생태계</span>
                                <span class="lsgiri-project-tag">#글로벌협력</span>
                            </div>
                            <div class="lsgiri-project-footer">
                                <span class="lsgiri-project-field">국토교통</span>
                                <a href="#" class="lsgiri-project-link">
                                    상세보기 →
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Project 5 -->
                    <div class="lsgiri-project-card" style="animation: fadeInUp 0.8s ease 0.7s both">
                        <div class="lsgiri-project-header">
                            <span class="lsgiri-project-year">2016</span>
                            <span class="lsgiri-project-role lsgiri-role-lead">총괄책임</span>
                            <h3 class="lsgiri-project-title">공간정보 표준프레임워크를 활용한 클라우드 서비스 방안 연구</h3>
                        </div>
                        <div class="lsgiri-project-body">
                            <div class="lsgiri-project-client">
                                <span class="lsgiri-client-label">발주처:</span>
                                <span>국토교통부</span>
                            </div>
                            <p class="lsgiri-project-desc">
                                국가 공간정보 표준프레임워크를 클라우드 환경에서 효율적으로 
                                운영하기 위한 서비스 모델 및 기술 방안 연구
                            </p>
                            <div class="lsgiri-project-tags">
                                <span class="lsgiri-project-tag">#표준프레임워크</span>
                                <span class="lsgiri-project-tag">#클라우드</span>
                                <span class="lsgiri-project-tag">#공간정보</span>
                            </div>
                            <div class="lsgiri-project-footer">
                                <span class="lsgiri-project-field">국토교통</span>
                                <a href="#" class="lsgiri-project-link">
                                    상세보기 →
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Project 6 -->
                    <div class="lsgiri-project-card" style="animation: fadeInUp 0.8s ease 0.8s both">
                        <div class="lsgiri-project-header">
                            <span class="lsgiri-project-year">2015</span>
                            <span class="lsgiri-project-role lsgiri-role-lead">총괄책임</span>
                            <h3 class="lsgiri-project-title">한국형 공간정보시스템(KLIS) 기술기반 연구</h3>
                        </div>
                        <div class="lsgiri-project-body">
                            <div class="lsgiri-project-client">
                                <span class="lsgiri-client-label">발주처:</span>
                                <span>국토교통부</span>
                            </div>
                            <p class="lsgiri-project-desc">
                                한국형 공간정보시스템(KLIS)의 기술적 기반을 연구하고 
                                시스템 고도화 방안을 제시하는 연구
                            </p>
                            <div class="lsgiri-project-tags">
                                <span class="lsgiri-project-tag">#KLIS</span>
                                <span class="lsgiri-project-tag">#시스템개발</span>
                                <span class="lsgiri-project-tag">#기술연구</span>
                            </div>
                            <div class="lsgiri-project-footer">
                                <span class="lsgiri-project-field">국토교통</span>
                                <a href="#" class="lsgiri-project-link">
                                    상세보기 →
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- More Projects Button -->
                <div style="text-align: center; margin-top: 60px;">
                    <button class="lsgiri-cta-btn" style="background: var(--lsgiri-secondary); color: var(--lsgiri-white); padding: 15px 40px; border-radius: 50px; border: none; font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.3s ease;">
                        더 많은 수탁과제 보기
                    </button>
                </div>
            </div>
        </section>
    </div>

    <script>
        // Filter functionality
        const filterButtons = document.querySelectorAll('.lsgiri-filter-btn');
        
        filterButtons.forEach(button => {
            button.addEventListener('click', function() {
                // Remove active class from all buttons
                filterButtons.forEach(btn => btn.classList.remove('active'));
                // Add active class to clicked button
                this.classList.add('active');
                
                // Here you would add filter logic to show/hide projects
                // For demo purposes, we're just updating the UI
            });
        });

        // Search functionality
        const searchInput = document.querySelector('.lsgiri-search-input');
        
        searchInput.addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            // Add search logic here
            console.log('Searching for:', searchTerm);
        });

        // Pagination functionality
        const pageButtons = document.querySelectorAll('.lsgiri-page-btn');
        
        pageButtons.forEach(button => {
            button.addEventListener('click', function() {
                if (!this.disabled) {
                    // Remove active class from all buttons
                    pageButtons.forEach(btn => btn.classList.remove('active'));
                    // Add active class to clicked button
                    if (!this.textContent.includes('←') && !this.textContent.includes('→')) {
                        this.classList.add('active');
                    }
                    // Here you would add pagination logic
                }
            });
        });

        // Project card click
        const projectCards = document.querySelectorAll('.lsgiri-project-card');
        
        projectCards.forEach(card => {
            card.addEventListener('click', function() {
                // Navigate to project detail page
                console.log('Project clicked');
            });
        });
    </script>
</body>
</html>/* End custom CSS */