/* ===== Extracted from inline <style> in index.html ===== */


        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        @font-face {
        font-family: 'Pretendard';
        font-style: normal;
        font-weight: 100;
        font-display: swap;
        src: url('/asset/fonts/Pretendard-Thin.woff') format('woff');
        }

        @font-face {
        font-family: 'Pretendard';
        font-style: normal;
        font-weight: 200;
        font-display: swap;
        src: url('/asset/fonts/Pretendard-ExtraLight.woff') format('woff');
        }

        @font-face {
        font-family: 'Pretendard';
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url('/asset/fonts/Pretendard-Light.woff') format('woff');
        }

        @font-face {
        font-family: 'Pretendard';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url('/asset/fonts/Pretendard-Regular.woff') format('woff');
        }

        @font-face {
        font-family: 'Pretendard';
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url('/asset/fonts/Pretendard-Medium.woff') format('woff');
        }
        
        @font-face {
        font-family: 'Pretendard';
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url('/asset/fonts/Pretendard-SemiBold.woff') format('woff');
        }

        @font-face {
        font-family: 'Pretendard';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url('/asset/fonts/Pretendard-Bold.woff') format('woff');
        }

        @font-face {
        font-family: 'Pretendard';
        font-style: normal;
        font-weight: 800;
        font-display: swap;
        src: url('/asset/fonts/Pretendard-ExtraBold.woff') format('woff');
        }

        @font-face {
        font-family: 'Pretendard';
        font-style: normal;
        font-weight: 900;
        font-display: swap;
        src: url('/asset/fonts/Pretendard-Black.woff') format('woff');
        }
        
        body {
            overflow-x: hidden;
            width: 100%;
            max-width: 100vw;
        }

        @media (max-width: 768px) {
            /* 전역 오버플로우 방지 */
            body {
                overflow-x: hidden;
                max-width: 100vw;
            }
        }

        /* 햄버거 메뉴 버튼 스타일 */
        .hamburger-menu {
            display: none; /* 기본적으로 햄버거 메뉴는 숨김 상태 */
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 20px;
            cursor: pointer;
            z-index: 1001;
        }

        .hamburger-menu span {
            display: block;
            height: 3px;
            width: 100%;
            background-color: #000;
            border-radius: 3px;
            transition: all 0.3s ease;
        }

        /* 모바일 메뉴 스타일 */
        .mobile-nav {
            position: fixed;
            top: 0;
            left: -100%; /* 왼쪽에서 슬라이드 인 효과를 위해 */
            width: 80%;
            height: 100vh;
            background-color: #000;
            padding: 80px 20px 20px;
            transition: left 0.3s ease;
            z-index: 1000;
            display: none; /* 기본적으로 모바일 네비게이션도 숨김 상태 */
        }

        .mobile-nav.active {
            left: 0; /* 활성화 시 화면에 표시 */
        }

        .mobile-nav ul {
            list-style: none;
            padding: 0;
        }

        .mobile-nav ul li {
            margin-bottom: 20px;
        }

        .mobile-nav ul li a {
            color: #fff;
            text-decoration: none;
            font-size: 18px;
            display: block;
            padding: 10px 0;
        }

        /* 햄버거 메뉴 활성화 시 X 모양으로 변경 */
        .hamburger-menu.active span:first-child {
            transform: rotate(45deg) translate(5px, 6px);
        }

        .hamburger-menu.active span:nth-child(2) {
            opacity: 0;
        }

        .hamburger-menu.active span:last-child {
            transform: rotate(-45deg) translate(5px, -6px);
        }

        /* 미디어 쿼리를 사용하여 모바일 모드 정의 */
        @media (max-width: 768px) {
            /* 햄버거 메뉴 버튼 표시 - 모바일에서만 표시 */
            .hamburger-menu {
                display: flex;
                margin-right: 10px;
            }
                    
            /* 기존 네비게이션 메뉴 숨김 */
            .nav-menu {
                display: none;
            }
            
            /* 모바일 네비게이션 표시 */
            .mobile-nav {
                display: block;
            }
            
            /* 모바일에서 로고와 햄버거 버튼 왼쪽으로 이동 */
            .navbar {
                padding: 1rem 1rem !important;
                width: 100%;
            }
            
            .logo {
                margin-left: -1px;
            }

            .mobile-menu-btn {
                margin-right: 20px;
            }
            
            /* 배경 이미지 변경 */
            .hero-section {
                background-image: url('/asset/img/bg-masthead.webp'); /* 웹용과 같은 이미지 사용 */
                background-position: center;
                justify-content: space-between !important;
                padding-top: 150px;
                padding-bottom: 0px;
                height: 100vh; /* 화면 높이의 100%로 설정 */
                min-height: 500px; /* 최소 높이 설정 */
                max-height: 600px; /* 최대 높이 제한 */
            }
            
            /* 히어로 섹션 내용 조정 */
            .hero-content {
                padding: 0rem;
            }
            
            .hero-text {
                font-size: 1.4rem !important;
                margin-top: -1rem;
                padding-right: 30px !important;
                left: -2px !important;
            }
        }

        /* 네비게이션 바 */
        .navbar {
            background-color: #fff;
            padding: 1rem 25%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            width: 100%;
            max-width: 100vw;
            box-sizing: border-box;
            height: 89px;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }

        .navbar .logo {
            height: 70px;
        }

        .navbar-menu {
            display: flex;
            list-style: none;
            white-space: nowrap;
            overflow-x: hidden;
            flex-wrap: nowrap;
        }

        .navbar-menu li {
            margin-left: 1.2rem;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .navbar-menu li a {
            color: #000;
            text-decoration: none;
            font-weight: 500;
            font-size: 0.95rem;
            display: inline-block;
        }

        .navbar-menu li a:hover {
            color: #5722FC;
        }

        .mobile-menu-btn {
            display: none;
            color: #fff;
            font-size: 1.5rem;
            cursor: pointer;
        }

        /* 히어로 섹션 */
        .hero-section {
            background-image: url('/asset/img/bg-masthead.webp');
            will-change: background;
            background-size: cover;
            background-position: center;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            color: #fff;
            text-align: left;
            position: relative; /* 추가 */
        }

        /* 어두운 오버레이 */
        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6); /* 어둡게 */
            z-index: 1;
        }

        /* 텍스트와 버튼이 오버레이 위로 */
        .hero-section > * {
            position: relative;
            z-index: 2;
        }

        .hero-text {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            line-height: 1.5;
            padding-left: clamp(30px, 8vw, 150px) !important;
            padding-bottom: 0.5vw;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            left: 14px;
        }

        .hero-text .thin {
            font-weight: 200; /* 또는 800, 900 */
        }

        .hero-section .btn {
            display: inline-block; /* flex 삭제, 중복 display 제거 */
            margin-right: 1rem; /* 버튼 간 간격만 */
            margin-left: 0; /* 음수/큰 값 제거 */
            margin-bottom: 8rem;
            transform: translateX(15px) !important;
        }

        .hero-section .btn:last-child {
            margin-right: 0; /* 마지막 버튼은 오른쪽 여백 없음 */
            }

        .btn {
            padding: 0.75rem 1.2rem;
            border: none;
            border-radius: 5px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            transition: all 0.3s ease;
            min-width: 160px;
        }

        @media (max-width: 768px) {
            .btn {
                min-width: 140px;
                width: 140px;
                font-size: 0.85rem;
                padding: 0.7rem 0.5rem;
            }

        @media (max-width: 768px) {
            .btn:hover {
                transform: none !important;  /* 모바일에서 hover 효과 제거 */
            }
            
            .btn:active {
                transform: scale(0.98);  /* 살짝 눌리는 효과 */
            }
            }
        }

        .btn-primary {
            background-color: #5722FC;
            color: #fff;
        }

        .btn-secondary {
            background-color: #fff;
            color: #000;
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .button-group {
            display: flex;
            gap: 1rem;
            margin-left: clamp(30px, 8vw, 150px);
            padding-bottom: 5vw;
        }

        @media (max-width: 768px) {
        .button-group {
            display: flex !important;
            flex-direction: row !important;  /* 가로 배치 */
            margin-top: auto;
            margin-left: 0 !important;
            margin-right: 0 !important;
            margin-bottom: -3rem !important;
            padding-bottom: 0;
            padding-left: 20px;
            padding-right: 20px;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;  /* 버튼 간격 */
            width: 100%;
            flex-wrap: nowrap;  /* 줄바꿈 방지 */
            transform: translateX(-15px) !important;
            }
        }

        .hero-section .btn {
            display: inline-block;
        }

        /* 섹션 공통 스타일 */
        .section {
            padding: 4rem 1.5rem;
        }

        .section-gray {
            background-color: #f5f5f5;
            padding: 4rem 1.5rem !important;
        }

        .section-black {
            background-color: #000;
            color: #fff;
            padding: 4rem 1.5rem !important;
        }

        .section-title {
        text-align: center;
        margin-bottom: 1.5rem;
        font-size: 1.2rem;
        color: #fff;
        text-transform: uppercase;
        /* 노란색 배경 상자 추가 */
        background-color: #5721FD; /* 브랜드 컬러 */
        display: inline-block; /* 텍스트 크기에 맞게 배경 상자 조정 */
        padding: 10px 20px !important;
        border-radius: 10px; /* 모서리 둥글게 */
        /* 가운데 정렬을 위한 속성 */
        display: block; /* 가운데 정렬을 위해 block으로 변경 */
        width: fit-content; /* 내용에 맞게 너비 조정 */
        margin-left: auto; /* 좌우 마진 auto로 설정하여 가운데 정렬 */
        margin-right: auto;
        }

    /* 반응형을 위한 조정 */
        @media (max-width: 768px) {
            .section-title {
                padding: 3px 10px; /* 모바일에서 더 작은 패딩 */
                font-size: 1.2rem; /* 모바일에서 더 작은 폰트 */
            }
        }

        .section-heading {
            text-align: center;
            font-size: 1.8rem;
            margin-bottom: 3rem;
            line-height: 1.5;       
        }

        /* 모바일 환경에서 줄 간격 조정 */
        @media (max-width: 768px) {
            .section-heading {
                line-height: 1.4; /* 모바일에서 더 작은 줄 간격 */
                font-size: 1.2rem; /* 선택적: 모바일에서 폰트 크기도 줄임 */
                margin-bottom: 2rem; /* 선택적: 모바일에서 아래 여백도 줄임 */
            }
        }

        /* About 섹션 */
        .about-content {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .about-text {
            text-align: center;
            max-width: 800px;
            margin-bottom: 3rem;
            font-size: 1.2rem;
            line-height: 1.6;
        }

        .about-images-container {
            width: 100%;
            overflow: hidden;
            position: relative;

            display: flex;          /* 추가 */
            justify-content: center; /* 가로 가운데 */
        }

        .about-images {
            display: flex;
            animation: scroll-left 30s linear infinite;
            width: fit-content; /* 추가 */
        }

        .about-images img {
            border-radius: 10px;
            object-fit: cover;
            margin-right: 30px;
            flex-shrink: 0;
            width: 280px;
            height: 280px;
        }

        .about-images img:nth-child(1) {
            margin-top: 100px;
        }

        .about-images img:nth-child(2) {
            margin-top: 0;
        }

        .about-images img:nth-child(3) {
            margin-top: 100px;
        }

        .about-images img:nth-child(4) {
            margin-top: 0;
        }

        .about-images img:nth-child(5) {
            margin-top: 100px;
        }

        .about-images img:nth-child(6) {
            margin-top: 0;
        }

        .about-images img:nth-child(7) {
            margin-top: 100px;
        }

        .about-images img:nth-child(8) {
            margin-top: 0;
        }

        .about-images img:nth-child(9) {
            margin-top: 100px;
        }

        .about-images img:nth-child(10) {
            margin-top: 0px;
        }

        .about-images img:nth-child(11) {
            margin-top: 100px;
        }

        .about-images img:nth-child(12) {
            margin-top: 0;
        }

        .about-images img:nth-child(13) {
            margin-top: 100px;
        }

        .about-images img:nth-child(14) {
            margin-top: 0;
        }

        .about-images img:nth-child(15) {
            margin-top: 100px;
        }

        .about-images img:nth-child(16) {
            margin-top: 0;
        }


        @keyframes scroll-left {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%); /* -100% → -50%로 변경 */
            }
        }

        /* 호버 시 정지 (선택사항) */
        .about-images:hover {
            animation-play-state: paused;
        }

        /* Service 섹션 */
        .service-container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 2rem;
        }

        .service-item {
            flex: 1;
            min-width: 250px;
            text-align: center;
        }

        .service-item img {
            width: 100%;
            max-width: 300px;
            height: auto;
            margin-bottom: 1rem;
            border-radius: 10px;
            transition: transform 0.3s ease;
        }

        @media (max-width: 768px) {
            .service-item {
                margin-left: -0.5rem;
                margin-right: -0.5rem;
                margin-bottom: 3rem;
            }
            
            .service-item img {
                max-width: 100% !important;
            }
        }

        .service-item img:hover {
            transform: translateY(-10px);
        }

        .service-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .service-description {
            color: #666;
            margin-bottom: 2rem;
        }

        /* Platform 섹션 */

        .platform-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 8rem;
        }

        .platform-images {
            min-width: 250px;
            text-align: center;
        }

        .platform-images img {
            width: 100%;
            max-width: 400px;
            height: auto;
            margin-bottom: 1rem;
            border-radius: 10px;
            transition: transform 0.3s ease;
        }

        @media (max-width: 768px) {
            
            #platform .platform-container {
                width: 100% !important;
            }
            
            #platform .platform-heading {
                width: 100% !important;
            }
            
            .platform-images img {
                max-width: 100%;
                width: 100%;
            }
        }

        .platform-images img:hover {
            transform: translateY(-10px);
        }

        /* Customer 섹션 */

        .customer-container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 2rem;
        }

        .customer-images {
            flex: 1;
            min-width: 250px;
            text-align: center;
        }

        .customer-images img {
            width: 100%;
            max-width: 905px;
            height: auto;
            margin-bottom: 1rem;
        }

        .customer-placeholder {
            width: 929px;
            max-width: 100%;
            height: auto;
            aspect-ratio: 905 / 600;
            background-color: #008cff;
            margin: 0 auto;
            border-radius: 1%;
            display: grid;
            grid-template-columns: repeat(5, 1fr); /* 5열 */
            grid-template-rows: repeat(3, 1fr); /* 3행 */
            gap: 10px; /* 이미지 간 간격 */
            padding: 20px; /* 사각형 안쪽 여백 */
            align-items: center;
            justify-items: center;
        }

        /* 모바일 대응 추가 */
        @media (max-width: 768px) {
            .customer-placeholder {
                width: 100%;
                height: auto;
                aspect-ratio: 905 / 600;
                padding: 10px;
            }
        }

            .customer-placeholder img {
            max-width: 70%;
            max-height: 70%;
            margin-top: 10px;
            object-fit: contain; /* 이미지 비율 유지 */
            transition: transform 0.3s ease;
        }

            .customer-placeholder img:hover {
            transform: translateY(-10px);
        }

        /* Program 섹션 */
        .program-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 2rem;
            margin-bottom: 1rem;
        }

        .program-category {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .program-title {
            font-weight: 600;
            margin-bottom: 1rem;
            color: #fff;
        }

        @media (max-width: 768px) {

            .program-title {
            margin-top: 1.5rem;
        }
        }

        /* 프로그램 링크 컨테이너 중앙 정렬 */
        .program-links {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            width: 100%;
        }

        .program-link {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #fff;
            text-decoration: none;
        }

        /* 이미지 크기 제한 추가 */
        .program-link img {
            width: auto;  /* 또는 고정값: 150px */
            max-width: 170px;  /* 최대 크기 제한 */
            height: auto;  /* 비율 유지 */
        }

        /* Article 섹션 - 모바일 최적화 수정 */
        .article-slider-container {
            width: 100%;
            overflow: hidden;
            position: relative;
            padding: 0 40px; /* 컨테이너 양쪽에 패딩 추가 */
        }

        .article-slider {
            display: flex;
            transition: transform 0.5s ease;
            gap: 20px; /* flex 아이템 간의 간격을 gap으로 설정 */
        }

        .article-card {
            flex: 0 0 300px;
            margin-right: 0; /* margin-right 제거하고 위의 gap 속성으로 대체 */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            overflow: hidden;
        }

        @media (max-width: 768px) {
            .article-slider {
                gap: 20px; /* 모바일에서는 간격을 줄임 */
            }
            
            .article-card {
                flex: 0 0 90% !important;
            }

            .article-slider-container {
                padding: 0 15px;
            }
        }

        .article-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .article-content {
            padding: 1.5rem;
        }

        .article-title {
            font-weight: 600;
            margin-bottom: 0.8rem;
            font-size: 1.1rem;
            line-height: 1.4;
        }

        .article-date {
            color: #666;
            font-size: 0.9rem;
        }

        .slider-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 2.5rem;
            gap: 1.5rem;
        }

        .slider-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #000;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .slider-btn:hover {
            background-color: #333;
        }

        /* 반응형 스타일 */
        @media (max-width: 1200px) {
            .article-card {
                flex: 0 0 280px;
                margin-right: 50px; /* 간격 유지 */
            }
            
            .article-content {
                padding: 1.2rem;
            }
        }

        @media (max-width: 768px) {
            /* 모바일에서는 중앙 정렬 및 전체 너비 */
            .article-slider-container {
                padding: 0 20px; /* 컨테이너 패딩 유지 */
            }
            
            .article-card {
                flex: 0 0 80%; /* 카드 너비를 80%로 조정 */
                margin-right: 30px; /* 모바일에서도 간격 유지 */
                margin-left: 0; /* 왼쪽 마진 제거 */
            }
            
            .article-content {
                padding: 1rem;
            }
            
            .article-title {
                font-size: 1rem;
            }
            
            /* 모바일에서 슬라이더 컨트롤 */
            .slider-controls {
                margin-top: 2rem;
                gap: 1rem;
            }
            
            .slider-btn {
                width: 36px;
                height: 36px;
            }
            
            .article-card img {
                height: 180px;
            }
        }

        @media (max-width: 480px) {
            .article-slider-container {
                padding: 0 15px; /* 작은 화면에서 패딩 줄임 */
            }
            
            .article-card {
                flex: 0 0 85%; /* 더 작은 화면에서 너비 조정 */
                margin-right: 25px; /* 더 작은 화면에서 간격 조정 */
            }
            
            .article-card img {
                height: 160px;
            }
        }

        /* Footer 섹션 */
        .footer {
            background-color: #000;
            color: #fff;
            padding: 3rem;
            text-align: center;
        }

        .footer-logo {
            height: 80px;
        }

        .footer-links {
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }

        .footer-links a {
            color: #fff;
            text-decoration: none;
            margin: 0 0.5rem;
        }

        .footer-contact {
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }

        .footer-info {
            margin-bottom: 1rem;
            font-size: 0.9rem;
            color: #ccc;
        }

        .footer-copyright {
            font-size: 0.8rem;
            color: #999;
        }

        @media (max-width: 768px) {
            .navbar {
                height: 60px;  /* 기존 89px에서 축소 */
                padding: 0.5rem 1rem;
            }
            
            .navbar .logo {
                height: 45px;  /* 기존 70px에서 축소 */
            }

            .navbar-menu {
                display: none;
                position: absolute;
                top: 70px;
                left: 0;
                right: 0;
                background-color: #000;
                flex-direction: column;
                align-items: center;
                padding: 1rem 0;
            }
            
            .navbar-menu.active {
                display: flex;
            }
            
            .navbar-menu li {
                margin: 1rem 0;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .hero-buttons {
                flex-direction: column;
            }
            
            .section {
                overflow-x: hidden;
                max-width: 100vw;
            }
            
            .service-container {
                flex-direction: column;
            }
            
            .program-grid {
                grid-template-columns: 1fr;
                gap: 3rem;
                padding-bottom: 0rem !important;
                max-height: 550px;
                overflow: hidden;
            }
            
            .article-card {
                flex: 0 0 100%;
            }
        }

        #privacy-policy-btn,
        #location-terms-btn {
            cursor: pointer;
            text-decoration: underline;
        }

        #privacy-policy-btn:hover,
        #location-terms-btn:hover {
            color: #5722FC;
        }

        /* 뉴트랙플러스 소개 섹션 너비 제한 */
        #about .about-container {
            max-width: 1200px;
            width: 50%; /* 네비게이션 바 너비와 동일하게 설정 */
            margin-left: auto;
            margin-right: auto;
        }

        #about .about-heading {
            max-width: 1200px;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
        }

        /* 서비스 섹션 너비 제한 */
        #service .service-container {
            max-width: 1200px;
            width: 50%; /* 네비게이션 바 너비와 동일하게 설정 */
            margin-left: auto;
            margin-right: auto;
        }

        #service .section-heading {
            max-width: 1200px;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
        }

        #platform {
            background-color: #edfcff;
        }

        /* 뉴트랙플러스 소개 섹션 너비 제한 */
        #platform .platform-container {
            max-width: 1200px;
            width: 50%; /* 네비게이션 바 너비와 동일하게 설정 */
            margin-left: auto;
            margin-right: auto;
        }

        #platform .platform-heading {
            max-width: 1200px;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
        }

        /* 고객사 소개 섹션 너비 제한 */
        #customer .customer-container {
            max-width: 1200px;
            width: 50%; /* 네비게이션 바 너비와 동일하게 설정 */
            margin-left: auto;
            margin-right: auto;
        }

        #customer .customer-heading {
            max-width: 1200px;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
        }

        #program {
            background-color: #006aff;
        }

        #program .section-title {

            color: #5721FD;
            background-color: #fff;
        }

        /* 프로그램 다운로드 섹션 너비 제한 */
        #program .program-grid {
            max-width: 1200px;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
        }

        #program .section-heading {
            max-width: 1200px;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
            color: #fff;
        }

         /* 기사 섹션 너비 제한 */
        #article .article-container {
            max-width: 1200px;
            width: 50%; /* 네비게이션 바 너비와 동일하게 설정 */
            margin-left: auto;
            margin-right: auto;
        }

        #article .article-heading {
            max-width: 1200px;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
        }

        /* footer 섹션 너비 제한 */
        #footer .footer-container {
            max-width: 1200px;
            width: 50%; /* 네비게이션 바 너비와 동일하게 설정 */
            margin-left: auto;
            margin-right: auto;
        }

        #footer .footer-heading {
            max-width: 1200px;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
        }

        @media (max-width: 768px) {
            #program .program-grid,
            #service .section-heading,
            #program .section-heading {
                width: 90%; /* 모바일에서는 90% 너비로 조정 */
            }

            #service .service-container
            {
                width: 95% !important
            }
        }


        /* 다운로드 버튼 스타일 수정 */
        #program .program-link {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            text-decoration: none;
            padding: 0.8rem 1.2rem;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            transition: all 0.3s ease;
            font-size: 1.1rem;
            width: 100%;
            max-width: 200px;
            position: relative;
            overflow: hidden; /* 중요: 컨테이너 밖으로 넘치는 내용 숨김 */
        }

        /* 아이콘 공통 스타일 설정 - 위치 고정 */
        #program .program-link .default-icon,
        #program .program-link .hover-icon {
            position: absolute;
            left: 1.2rem; /* 왼쪽 위치 고정 */
            width: 170px;
            height: 60px;
            transition: opacity 0.3s ease;
            top: 50%; /* 수직 중앙 정렬 */
            transform: translateY(-50%); /* 수직 중앙 정렬 보정 */
        }

        /* 기본 아이콘 표시 */
        #program .program-link .default-icon {
            opacity: 1;
            visibility: visible;
        }

        /* 호버 아이콘 숨김 - 정확히 동일한 위치에 배치 */
        #program .program-link .hover-icon {
            opacity: 0;
            visibility: hidden;
            /* 위치를 default-icon과 정확히 일치시킴 */
            left: 1.2rem;
            z-index: 2; /* 호버 이미지가 위에 오도록 설정 */
        }

        /* 호버 효과 - 아이콘 전환 */
        #program .program-link:hover .default-icon {
            opacity: 0;
            visibility: hidden;
        }

        #program .program-link:hover .hover-icon {
            opacity: 1;
            visibility: visible;
        }

        /* 텍스트 위치 고정 */
        #program .program-link span {
            position: relative;
            z-index: 1;
            margin-left: 70px; /* 아이콘 너비 + 여백 */
            text-align: left; /* 텍스트 왼쪽 정렬 */
        }

        @media (max-width: 768px) {
            #program .program-link .default-icon,
            #program .program-link .hover-icon {
                left: 1.5rem;
            }
            
            #program .program-link span {
                margin-left: 75px;
            }
        }

        /* CSS 추가 부분 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1050;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.7);
        }

        .modal-content {
            background-color: #fff;
            margin: 5% auto;
            padding: 20px;
            border-radius: 10px;
            width: 80%;
            max-width: 800px;
            max-height: 80vh;
            overflow-y: auto;
            position: relative;
        }

        .modal h2 {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            color: #000;
        }

        .modal-body {
            text-align: left;
            line-height: 1.6;
            color: #333;
        }

        .modal-body p {
            text-align: left;
            margin-bottom: 50px;
        }

        .modal h2 {
            text-align: left;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            color: #000;
        }

        .close-modal {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close-modal:hover {
            color: black;
        }

        .partner-form input,
        .partner-form textarea {
            width: 100%;
            padding: 0.8rem;
            margin-bottom: 1rem;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .partner-form button {
            width: 100%;
        }

        @media (max-width: 768px) {
            .modal-content {
                width: 95%;
                margin: 10% auto;
            }
        }

        /* 고객센터 섹션 CSS 추가 */
        .cs-container {
            display: flex;
            justify-content: center;
            flex-wrap: nowrap; /* 한 줄에 모든 아이템 표시 */
            gap: 2rem;
            max-width: 1200px;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
        }

        .cs-item {
            flex: 1;
            min-width: 120px;
            max-width: 200px;
            text-align: center;
            padding: 1.2rem;
            margin: 0;
            background-color: #fff;
            border-radius: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            height: 160px; /* 고정 높이 추가 */
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
        }

        @media (max-width: 768px) {
            .cs-container {
                width: 100% !important;  /* 양쪽 여백 좁힘 */
                gap: 1rem !important;  /* 박스 간격 넓힘 (1rem → 1.5rem) */
            }
            
            .cs-item {
                min-width: 100px;  /* 필요시 조정 */
                padding: 1rem;
            }
        }

        .cs-item:hover {
            transform: translateY(-10px);
        }
        
        @media (hover: hover) {
            /* 마우스가 있는 기기만 hover 효과 */
            .cs-item:hover {
                transform: translateY(-10px);
            }
        }

        @media (hover: none) {
            /* 터치 기기는 hover 효과 제거 */
            .cs-item:hover {
                transform: none;
            }
        }

        .cs-item img {
            display: block;
            width: 80px !important;
            height: 80px !important;
            margin-bottom: 1rem;
            object-fit: contain;
        }

        @media (max-width: 768px) {
            .cs-item img {
                margin-top: 6px;  /* 모바일에서는 더 적게 */
            }
        }

        .cs-title {
            margin-top: 5px;
            font-size: 1rem;
            font-weight: 600;
            color: #000;
        }

        @media (max-width: 768px) {
            .cs-title {
                margin-top: 7px;
                font-size: 0.9rem;
            }
        }

        /* 고객센터 섹션 제목 너비 제한 */
        #cs .section-heading {
            max-width: 1200px;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
        }

        /* 반응형 조정 - 고객센터 */

        @media (max-width: 768px) {
            #cs .section-heading {
                width: 90%;
            }
            
            .cs-container {
                flex-wrap: wrap; /* 모바일에서만 줄바꿈 허용 */
                gap: 1rem;
                justify-content: center;
            }
            
            .cs-item {
                flex: 0 0 calc(50% - 0.5rem); /* 모바일에서 2x2 레이아웃 */
                margin-bottom: 1rem;
                padding: 0.8rem;
                min-width: auto;
                max-width: none;
            }
            
            .cs-item:last-child {
                margin-bottom: 0;
            }
        }
    
        .section-heading .thin {
            font-weight: 400;
        }

        .section-heading .company {
            color: #5722FC;
        }

        /* ========================================
        스크롤 애니메이션 (모바일 포함)
        ========================================= */

        /* 초기 상태 - 숨김 */
        .section-heading {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        /* 애니메이션 활성화 상태 */
        .hero-text.animate,
        .section-heading.animate {
            opacity: 1;
            transform: translateY(0);
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 추가 애니메이션 옵션 */
        .fade-in-left {
            opacity: 0;
            transform: translateX(-30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .fade-in-left.animate {
            opacity: 1;
            transform: translateX(0);
        }

        .fade-in-right {
            opacity: 0;
            transform: translateX(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .fade-in-right.animate {
            opacity: 1;
            transform: translateX(0);
        }

        .fade-in-scale {
            opacity: 0;
            transform: scale(0.9);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .fade-in-scale.animate {
            opacity: 1;
            transform: scale(1);
        }

        /* 지연 시간 클래스 */
        .delay-1 { transition-delay: 0.1s; }
        .delay-2 { transition-delay: 0.2s; }
        .delay-3 { transition-delay: 0.3s; }
        .delay-4 { transition-delay: 0.4s; }

        /* ========================================
        모바일 최적화
        ========================================= */
        @media (max-width: 768px) {
            /* 모바일에서는 애니메이션 거리를 짧게 */
            .hero-text,
            .section-heading {
                transform: translateY(20px);
            }
            
            .fade-in-left {
                transform: translateX(-20px);
            }
            
            .fade-in-right {
                transform: translateX(20px);
            }
            
            /* 모바일에서는 애니메이션 속도를 약간 빠르게 */
            .hero-text,
            .section-heading,
            .fade-in-left,
            .fade-in-right,
            .fade-in-scale {
                transition-duration: 0.6s;
            }
        }

        /* 모션 감소 선호 사용자를 위한 설정 */
        @media (prefers-reduced-motion: reduce) {
            .hero-text,
            .section-heading,
            .fade-in-left,
            .fade-in-right,
            .fade-in-scale {
                animation: none;
                transition: none;
                opacity: 1;
                transform: none;
            }
        }

        /* ===== Hero align fix (desktop only) ===== */
        @media (min-width: 769px) {
        /* 네비게이션이 좌우 25% 패딩을 쓰므로 hero도 동일한 좌 여백 적용 */
        .hero-section { /* ***추가*** */
            padding-left: 25vw;
        }

        /* 내부 요소는 별도 좌측 여백 제거 → 섹션 패딩만 따르도록 */
        .hero-text { /* ***추가*** */
            padding-left: 0 !important;
            margin-left: 0 !important;
        }
        .button-group { /* ***추가*** */
            margin-left: 0 !important;
        }
        }

        /* ===== Service Title & Description Scroll Animation ===== */
        .service-title,
        .service-description {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .service-title.animate,
        .service-description.animate {
            opacity: 1;
            transform: translateY(0);
        }

        /* PC 프로그램 (모바일에서 숨김) */
        .pc-program {
            display: block;
        }

        /* 모바일 프로그램 (PC에서 숨김) */
        .mobile-program {
            display: none;
        }

        @media (max-width: 768px) {
            .pc-program {
                display: none !important;
            }
            
            .mobile-program {
                display: block !important;
            }
        }

        /* QR CODE (모바일에서 숨김) */
        .qr-code {
            display: block;
        }

        @media (max-width: 768px) {
            .qr-code {
                display: none !important;
            }
        }