body {
            
            overflow-x: hidden;
            word-break: keep-all;

            font-family: 'Noto Sans KR', sans-serif; background-color: #030712; color: white; overflow-x: hidden; }
            ::-webkit-scrollbar { width: 8px; }
            ::-webkit-scrollbar-track { background: #0f172a; }
            ::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 4px; }
            @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } }
            @keyframes float-delayed { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }
            .animate-float { animation: float 6s ease-in-out infinite; }
            .animate-float-delayed { animation: float-delayed 7s ease-in-out infinite; animation-delay: 1s; }
            .blend-screen { mix-blend-mode: screen; }
            .tech-grid {
                position: absolute; inset: 0; opacity: 0.8;
                background-size: 50px 50px;
                background-image: linear-gradient(to right, rgba(125, 172, 247, 0.05) 1px, transparent 1px),
                                linear-gradient(to bottom, rgba(136, 181, 252, 0.05) 1px, transparent 1px);
                mask-image: radial-gradient(circle at center, rgb(84, 84, 181) 40%, transparent 100%);
                 .typing-cursor::after { content: '|'; animation: blink 1s step-end infinite; }
                @keyframes blink { 50% { opacity: 0; } }
                .glow-text { text-shadow: 0 0 20px rgba(59, 130, 246, 0.5); }
                .glow-box { box-shadow: 0 0 30px rgba(137, 171, 242, 0.15); }
                
        }
        .glass-nav { position: fixed; width: 100%; z-index: 40; transition: all 0.3s ease; transition-duration: 300ms;  background-color: rgba(45, 59, 120, 0.1); /* Semi-transparent white */ backdrop-filter: blur(10px); /* The "glass" blur */ border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
        .nav_bg {max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; padding-left: 1.5rem; padding-right: 1.5rem; padding-left: 2rem; padding-right: 2rem; }
        .nav_align{display: flex; justify-content: space-between; align-items: center; height: 5rem;}
        .nav_wrap {display: flex; align-items: center;  gap: 0.5rem; cursor: pointer;}
        .nav_logo {color: #0000; font-size: 1.25rem; line-height: 1; letter-spacing: -0.05em; color: #0f172a; font-weight: 700; }
        .nav_name { font-size: 10px !important; /* text-[10px] */  font-weight: bold; /* font-bold (usually maps to 700) */  color: #64748b !important; /* text-slate-500 */  letter-spacing: 0.1em; /* tracking-widest */}
        .nav_con {display: none; align-items: center;        }
        .nav_con a { font-weight: 600; color: #475569;} 
        .nav_con a:hover { color: #3182ce;}
        .que{ padding-left: 1.25rem; /* px-5 */  padding-right: 1.25rem; /* px-5 */  padding-top: 0.625rem; /* py-2.5 */  padding-bottom: 0.625rem; /* py-2.5 */  background-color: #2563eb; /* bg-blue-600 (approximate hex value) */  color: #ffffff !important; /* text-white */  border-radius: 0.5rem; /* rounded-lg (approximate value) */}
        .shadow-lg {  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);}

        
        .main_con { width: 100%; display: flex; position: relative; z-index: 20; padding: 5rem 6px 0; text-align: center; text-align: left; flex-direction: column; flex-direction: row; align-items: center; height: 100%;}
        .main_conbox {width: 100%; margin-top: 1.5rem;  
          @media (min-width: 768px) { width: 66.666667%; }
        
        }
        .main_con_cxc {font-size: 16px; line-height: 25px; color: #cbd5e1; margin-bottom: 40px; line-height: 1.625; max-width: 42rem;}
      

        .main_con_copy { display: none;}
        @media (min-width: 640px) {
        .main_con_copy {
            display: block; /* Visible as a block on screens >= 640px */
        }
        }

        .con-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem; /* 8px */
        padding-left: 0.75rem; /* 12px */
        padding-right: 0.75rem; /* 12px */
        padding-top: 0.25rem; /* 4px */
        padding-bottom: 0.25rem; /* 4px */
        border-radius: 9999px;
        border: 1px solid rgba(6, 182, 212, 0.3); /* cyan-500/30 */
        background-color: rgba(8, 51, 68, 0.3); /* cyan-950/30 */
        backdrop-filter: blur(4px); /* backdrop-blur-sm */
        .tit { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background-color: #22d3ee; }
                .element {
                        font-size: 0.75rem; /* text-xs: 12px */
                        font-weight: 600;  
                        color: #22d3ee;  
                        letter-spacing: 0.05em; /* tracking-wider */
                        text-transform: uppercase; /* uppercase */
                        }
        }
        .con_txt {
            font-size: 48px; line-height: 45px; font-weight: 900; color: #ffffff; line-height: 1.25; margin-bottom: 7rem; /* 80px */
        }

        .container-style {
            max-width: 80rem; /* max-w-7xl */
            margin-left: auto; /* mx-auto */
            margin-right: auto; /* mx-auto */
            padding-left: 1rem; /* px-4 */
            padding-right: 1rem; /* px-4 */
            }

            /* Styles for small screens and up (sm:px-6) */
            @media (min-width: 640px) {
            .container-style {
                padding-left: 1.5rem;
                padding-right: 1.5rem;
            }
            }

            /* Styles for large screens and up (lg:px-8) */
            @media (min-width: 1024px) {
            .container-style {
                padding-left: 2rem;
                padding-right: 2rem;
            }
            }

        .container-class {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 4rem; /* Equivalent to gap-16 (1rem = 16px, so 16*16 = 256px) */
            }

            /* Styles for large screens and up (typically 1024px, as per Tailwind's default config) */
            @media (min-width: 1024px) {
                .container-class {
                    flex-direction: row;
                }
            }
            .container-element {
                position: relative;
                border-radius: 1rem; /* Equivalent to rounded-2xl in default config */
                overflow: hidden;
                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Equivalent to shadow-2xl in default config */
            
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    
                }
            }
        


        .main_bg {position: relative; width: 100%; height: 60vh; overflow: hidden; flex: auto; align-items: center;  justify-content: center; }
        .glass-nav {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }


        /* 그라데이션 오버레이 */
        .overlay {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: linear-gradient(to top, rgba(30, 58, 138, 0.4), transparent);
        }

        /* 텍스트 컨텐츠 위치 */
        .text-content {
            position: absolute;
            bottom: 1.5rem; /* bottom-6 */
            left: 1.5rem;   /* left-6 */
            color: #ffffff;
        }

        /* 텍스트 스타일 */
        .title {
            font-size: 1.875rem; /* text-3xl */
            line-height: 2.25rem;
            font-weight: 900;    /* font-black */
            margin-bottom: 0.25rem; /* mb-1 */
        }

        .subtitle {
            font-size: 0.875rem; /* text-sm */
            font-weight: 500;    /* font-medium */
            opacity: 0.9;        /* opacity-90 */
        }
        /* 컨테이너 및 레이아웃 */
        .about-container {
            width: 100%;
        }
        @media (min-width: 1024px) {
            .about-container { width: 50%; } /* lg:w-1/2 */
        }

        /* 제목 스타일 */
        .sub-title {
            color: #2563eb; /* text-blue-600 */
            font-weight: 700;
            letter-spacing: 0.1em; /* tracking-widest */
            font-size: 0.875rem; /* text-sm */
            margin-bottom: 0.5rem; /* mb-2 */
        }

        .main-title {
            font-size: 2.25rem; /* text-4xl */
            font-weight: 900; /* font-black */
            color: #0f172a; /* text-slate-900 */
            margin-bottom: 1.5rem; /* mb-6 */
            line-height: 1.25; /* leading-tight */
        }

        /* 텍스트 그라데이션 (커스텀 클래스 대응) */
        .text-gradient {
            background: linear-gradient(to right, #2563eb, #9333ea); /* 예시 색상 */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* 본문 스타일 */
        .description {
            color: #475569; /* text-slate-600 */
            line-height: 1.625; /* leading-relaxed */
        }
        .mb-6 { margin-bottom: 1.5rem; }
        .mb-8 { margin-bottom: 2rem; }

        /* 그리드 시스템 (하단 4개 박스) */
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr)); /* grid-cols-2 */
            gap: 1rem; /* gap-4 */
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 0.75rem; /* gap-3 */
            background-color: #f8fafc; /* bg-slate-50 */
            padding: 0.75rem; /* p-3 */
            border-radius: 0.5rem; /* rounded-lg */
        }

        .feature-icon {
            color: #2563eb; /* text-blue-600 */
        }

        .feature-text {
            font-weight: 700;
            color: #334155; /* text-slate-700 */
            font-size: 0.875rem; /* text-sm */
        }

        

        /* 제목 영역 */
        .header-center {
            text-align: center;
            max-width: 48rem; /* max-w-3xl */
            margin: 0 auto 4rem auto; /* mb-16 */
        }

        .section-title {
            font-size: 1.875rem; /* text-3xl */
            font-weight: 900; /* font-black */
            color: #0f172a; /* text-slate-900 */
            margin-bottom: 1rem;
        }

        .section-desc {
            color: #475569; /* text-slate-600 */
        }

        /* 그리드 레이아웃 */
        .services-grid {
            display: grid;
            gap: 1.5rem; /* gap-6 */
            grid-template-columns: 1fr; /* 기본 모바일 1열 */
        }

        @media (min-width: 768px) {
            .services-grid { grid-template-columns: repeat(2, 1fr); } /* md:grid-cols-2 */
        }
        @media (min-width: 1024px) {
            .services-grid { grid-template-columns: repeat(4, 1fr); } /* lg:grid-cols-4 */
        }

        /* 서비스 카드 공통 스타일 */
        .service-card {
            background-color: #ffffff;
            padding: 2rem; /* p-8 */
            border-radius: 1rem; /* rounded-2xl */
            border: 1px solid #f1f5f9; /* border-slate-100 */
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
            transition: all 0.3s ease; /* transition-all */
        }

        /* 카드 Hover 효과 */
        .service-card:hover {
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); /* shadow-xl */
            transform: translateY(-0.5rem); /* hover:-translate-y-2 */
        }

        /* 아이콘 박스 기본 */
        .icon-box {
            width: 3rem;
            height: 3rem;
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            transition: background-color 0.3s, color 0.3s;
        }

        /* 카드별 아이콘 색상 (Hover 포함) */
        .service-card:hover .icon-box { color: #ffffff !important; }

        .bg-blue { background-color: #eff6ff; color: #2563eb; }
        .service-card:hover .bg-blue { background-color: #2563eb; }

        .bg-indigo { background-color: #eef2ff; color: #4f46e5; }
        .service-card:hover .bg-indigo { background-color: #4f46e5; }

        .bg-teal { background-color: #f0fdfa; color: #0d9488; }
        .service-card:hover .bg-teal { background-color: #0d9488; }

        .bg-purple { background-color: #faf5ff; color: #9333ea; }
        .service-card:hover .bg-purple { background-color: #9333ea; }

        /* 텍스트 스타일 */
        .card-title { font-size: 1.125rem; font-weight: 700; color: #0f172a; margin-bottom: 0.75rem; }
        .card-desc { color: #64748b; font-size: 0.875rem; line-height: 1.625; margin-bottom: 1rem; }
        .card-list { list-style: none; padding: 0; color: #64748b; font-size: 0.75rem; }
        .card-list li { margin-bottom: 0.25rem; }


        .material-icon {  font-family: 'Material Symbols Outlined'; /* The core font */  font-size: 3rem; /* Equivalent to text-4xl (4 * 16px = 64px) */  color: #2563eb; /* Tailwind's blue-600 */  font-weight: 400; /* Default weight, adjust as needed (e.g., 700 for bolder) */  font-variation-settings:    'FILL' 0, /* 0=outlined, 1=filled */    'wght' 400, /* Weight: 100-700 */    'GRAD' 0, /* Grade: -50 to 200 */    'opsz' 24; /* Optical Size: 20-48 */}
        .m_scale {position: absolute; inset: 0; z-index: 0; transform: scale(1.1);}
        .m_bg {position: absolute; inset: 0; background-image: linear-gradient(to bottom, #19133b24, #1b0e3847, #1f2135d9);}
        /*near-gradient(to bottom, #19133b24, #1b0e3847, #1f2135d9) linear-gradient(to bottom, #19133b80, #1b0e3866, #1f2135);*/
        .m_image{width: 100%; height: 70vh; object-fit: cover; opacity: 80;}

        .text-gradient {
            background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-overlay {
            background: linear-gradient(to right, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.8) 60%, rgba(15, 23, 42, 0.4) 100%);
        }

        .card-hover {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .client-box {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 70px;
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 0.5rem;
            font-weight: 700;
            color: #475569;
            transition: all 0.2s;
            text-align: center;
            padding: 0 1rem;
        }
        
        .client-box:hover {
            background-color: #fff;
            border-color: #3b82f6;
            color: #2563eb;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }

        /* Download Overlay */
        #download-overlay {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.95);
            z-index: 9999;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
        }
        
        .loader {
            width: 48px;
            height: 48px;
            border: 5px solid #FFF;
            border-bottom-color: #3b82f6;
            border-radius: 50%;
            display: inline-block;
            animation: rotation 1s linear infinite;
            margin-bottom: 1rem;
        }

        @keyframes rotation {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 상단 여백 및 텍스트 정렬 */
        .section-wrapper {
            margin-bottom: 5rem; /* mb-20 */
        }

        .text-center {
            text-align: center;
        }

        .mb-12 {
            margin-bottom: 3rem;
        }

        /* 상단 소제목 (Our Clients) */
        .category-label {
            color: #2563eb; /* text-blue-600 */
            font-weight: 700;
            letter-spacing: 0.1em; /* tracking-widest */
            font-size: 0.75rem; /* text-xs */
            text-transform: uppercase;
        }

        .section-title {
            font-size: 1.875rem; /* text-3xl */
            font-weight: 900;
            color: #0f172a; /* text-slate-900 */
            margin-top: 0.5rem;
        }

        /* 부문별 제목 스타일 (금융, 제조 등) */
        .group-title {
            font-size: 1.125rem; /* text-lg */
            font-weight: 700;
            color: #1e293b; /* text-slate-800 */
            margin-bottom: 1.5rem;
            padding-left: 0.75rem;
            border-left: 4px solid;
        }

        .border-blue { border-color: #3b82f6; } /* border-blue-500 */
        .border-indigo { border-color: #6366f1; } /* border-indigo-500 */

        /* 레이아웃 그리드 시스템 */
        .main-grid {
            display: grid;
            grid-template-columns: 1fr; /* 모바일 전용 */
            gap: 3rem; /* gap-12 */
        }

        @media (min-width: 768px) {
            .main-grid { grid-template-columns: repeat(2, 1fr); } /* md:grid-cols-2 */
        }

        .logo-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* grid-cols-3 */
            gap: 0.75rem; /* gap-3 */
        }

        /* 개별 고객사 로고 박스 */
        .client-box {
            background-color: #ffffff;
            border: 1px solid #e2e8f0; /* slate-200 수준 */
            border-radius: 0.5rem;
            height: 80px; /* 로고 박스 높이 고정 */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem;
            font-size: 0.75rem; /* 텍스트로 된 고객사명 대비 */
            font-weight: 500;
            color: #475569;
            text-align: center;
        }

        .client-box img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain; /* 이미지 비율 유지 */
            
            /* opacity: 0.7;
            transition: all 0.3s ease; */
        }

        .client-box:hover img {
            filter: grayscale(0%);
            opacity: 1;
        }

        /* 상단 텍스트 영역 */
        .partners-header {
            text-align: center;
            margin-bottom: 2.5rem; /* mb-10 */
        }

        .partners-sub {
            color: #64748b; /* text-slate-500 */
            font-weight: 700;
            letter-spacing: 0.1em; /* tracking-widest */
            font-size: 0.75rem; /* text-xs */
            text-transform: uppercase;
        }

        .partners-title {
            font-size: 1.5rem; /* text-2xl */
            font-weight: 900;
            color: #0f172a; /* text-slate-900 */
            margin-top: 0.5rem; /* mt-2 */
        }

        /* 협력사 리스트 컨테이너 */
        .partners-flex-container {
            display: flex;
            flex-wrap: wrap; /* flex-wrap */
            justify-content: center; /* justify-content-center */
            gap: 1rem; /* gap-4 */
            max-width: 78rem; /* max-w-4xl */
            margin: 0 auto;
        }

        /* 개별 협력사 박스 */
        .partner-box {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ffffff;
            border: 1px solid #cbd5e1; /* border-slate-300 */
            border-radius: 0.5rem;
            height: 60px; /* 적절한 높이 설정 */
            
            /* 너비 설정 (반응형) */
            width: 128px; /* w-32 (기본) */
            
            color: #334155;
            font-weight: 700;
            font-size: 0.875rem;
            transition: all 0.2s ease;
        }

        @media (min-width: 768px) {
            .partner-box {
                width: 160px; /* md:w-40 */
            }
        }

        /* 마우스 호버 효과 (선택 사항) */
        .partner-box:hover {
            border-color: #2563eb;
            color: #2563eb;
            background-color: #f8fafc;
        }


        /* 전체 섹션 컨테이너 (중앙 정렬 및 최대 너비) */
        .container-center {
            max-width: 80rem; /* max-w-7xl (1280px) */
            margin-left: auto;
            margin-right: auto;
            padding-left: 1rem; /* px-4 */
            padding-right: 1rem;
        }

        /* 반응형 패딩 조절 */
        @media (min-width: 640px) { .container-center { padding-left: 1.5rem; padding-right: 1.5rem; } } /* sm:px-6 */
        @media (min-width: 1024px) { .container-center { padding-left: 2rem; padding-right: 2rem; } }   /* lg:px-8 */

        /* 2컬럼 그리드 레이아웃 */
        .contact-layout-grid {
            display: grid;
            grid-template-columns: 1fr; /* 기본 1열 */
            gap: 4rem; /* gap-16 */
        }

        @media (min-width: 1024px) {
            .contact-layout-grid {
                grid-template-columns: repeat(2, 1fr); /* lg:grid-cols-2 */
            }
        }

        /* 텍스트 정렬 및 간격 */
        .flex-column-center {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* 상단 소제목 (CONTACT US) */
        .text-accent {
            color: #2563eb; /* text-blue-600 */
            font-weight: 700;
            letter-spacing: 0.1em; /* tracking-widest */
            font-size: 0.875rem; /* text-sm */
            margin-bottom: 0.5rem; /* mb-2 */
        }

        /* 메인 제목 (프로젝트 문의하기) */
        .text-main-title {
            font-size: 2.25rem; /* text-4xl */
            font-weight: 900; /* font-black */
            color: #0f172a; /* text-slate-900 */
            margin-bottom: 2rem; /* mb-8 */
        }

        /* 본문 설명 */
        .text-description {
            color: #475569; /* text-slate-600 */
            font-size: 1.125rem; /* text-lg */
            margin-bottom: 2.5rem; /* mb-10 */
            line-height: 1.625; /* leading-relaxed */
        }

        /* 카드들을 감싸는 컨테이너 */
        .info-list-container {
            display: flex;
            flex-direction: column;
            gap: 1.5rem; /* space-y-6 대응 (24px) */
        }

        /* 개별 카드 스타일 */
        .info-card {
            display: flex;
            align-items: flex-start; /* 아이콘을 위쪽에 정렬 */
            gap: 1.25rem; /* gap-5 (20px) */
            padding: 1.5rem; /* p-6 (24px) */
            background-color: #ffffff; /* bg-white */
            border-radius: 0.75rem; /* rounded-xl (12px) */
            border: 1px solid #f1f5f9; /* border-slate-100 */
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
        }

        /* 아이콘 배경 원형 박스 */
        .icon-circle {
            background-color: #eff6ff; /* bg-blue-50 */
            padding: 0.75rem; /* p-3 (12px) */
            border-radius: 9999px; /* rounded-full */
            color: #2563eb; /* text-blue-600 */
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0; /* 아이콘 크기 고정 */
        }

        /* 텍스트 스타일 */
        .info-card h4 {
            font-weight: 700; /* font-bold */
            color: #0f172a; /* text-slate-900 */
            font-size: 1.125rem; /* text-lg (18px) */
            margin-bottom: 0.25rem; /* mb-1 (4px) */
        }

        .info-card p, 
        .info-card a {
            color: #475569; /* text-slate-600 */
            text-decoration: none;
        }

        /* 이메일 링크 호버 효과 */
        .email-link {
            font-weight: 500;
            transition: color 0.2s;
        }

        .email-link:hover {
            color: #2563eb; /* hover:text-blue-600 */
        }

        /* 하단 작은 안내 문구 */
        .note-text {
            font-size: 0.75rem; /* text-xs (12px) */
            color: #94a3b8; /* text-slate-400 */
            margin-top: 0.5rem; /* mt-2 (8px) */
        }

        .map-frame {
            /* 높이 설정 */
            height: 500px;
            
            /* 배경 및 테두리 */
            background-color: #ffffff; /* bg-white */
            border: 1px solid #e2e8f0; /* border-slate-200 */
            border-radius: 1rem;       /* rounded-2xl (16px) */
            
            /* 그림자 효과 (shadow-lg) */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
                        0 4px 6px -2px rgba(0, 0, 0, 0.05);
            
            /* 내부 요소 제어 */
            overflow: hidden; /* 자식 요소(지도)가 모서리를 넘지 않게 함 */
            position: relative; /* 내부 절대 위치 요소 기준점 */
        }

/*map*/
    .fixed{position:fixed}
    .absolute{position:absolute}
    .relative{position:relative}
    .inset-0{inset:0px}
    .bottom-6{bottom:1.5rem}
    .bottom-8{bottom:2rem}
    .left-6{left:1.5rem}
    .right-8{right:2rem}
    .z-10{z-index:10}
    .z-40{z-index:40}
    .z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}
    .mb-1{margin-bottom:0.25rem}.mb-10{margin-bottom:2.5rem}
    .mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:0.5rem}
    .mb-20{margin-bottom:5rem}.mb-3{margin-bottom:0.75rem}
    .mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-2{margin-top:0.5rem}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-12{height:3rem}.h-2{height:0.5rem}.h-20{height:5rem}.h-\[500px\]{height:500px}.h-full{height:100%}.h-screen{height:80vh}.w-12{width:3rem}.w-2{width:0.5rem}.w-32{width:8rem}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-12{gap:3rem}.gap-16{gap:4rem}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.space-x-8 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.25rem * var(--tw-space-y-reverse))}.space-y-6 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.scroll-smooth{scroll-behavior:smooth}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-xl{border-radius:0.75rem}.border{border-width:1px}.border-l-4{border-left-width:4px}.border-blue-400\/30{border-color:rgb(96 165 250 / 0.3)}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.border-indigo-500{--tw-border-opacity:1;border-color:rgb(99 102 241 / var(--tw-border-opacity, 1))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249 / var(--tw-border-opacity, 1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240 / var(--tw-border-opacity, 1))}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225 / var(--tw-border-opacity, 1))}.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250 / var(--tw-bg-opacity, 1))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.bg-blue-500\/20{background-color:rgb(59 130 246 / 0.2)}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.bg-purple-50{--tw-bg-opacity:1;background-color:rgb(250 245 255 / var(--tw-bg-opacity, 1))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.bg-teal-50{--tw-bg-opacity:1;background-color:rgb(240 253 250 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top, var(--tw-gradient-stops))}.from-blue-400{--tw-gradient-from:#60a5fa var(--tw-gradient-from-position);--tw-gradient-to:rgb(96 165 250 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-blue-900\/40{--tw-gradient-from:rgb(30 58 138 / 0.4) var(--tw-gradient-from-position);--tw-gradient-to:rgb(30 58 138 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-indigo-300{--tw-gradient-to:#a5b4fc var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.object-cover{object-fit:cover}.p-3{padding:0.75rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-3{padding-left:0.75rem}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-\[10px\]{font-size:10px}.text-lg{font-size:1.125rem;line-height:1.75rem}
    .text-sm{font-size:0.875rem;line-height:1.25rem}
    .text-xl{font-size:1.25rem;line-height:1.75rem}
    .text-xs{font-size:0.75rem;line-height:1rem}
    .font-black{font-weight:900}
    .font-bold{font-weight:700}
    .font-light{font-weight:300}
    .font-medium{font-weight:500}
    .uppercase{text-transform:uppercase}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}
    .leading-tight{line-height:1.25}.tracking-tighter{letter-spacing:-0.05em}
    .tracking-wider{letter-spacing:0.05em}.tracking-widest{letter-spacing:0.1em}
    .text-blue-200{--tw-text-opacity:1;color:rgb(191 219 254 / var(--tw-text-opacity, 1))}
    .text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}
    .text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}
    .text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))} 
    .text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234 / var(--tw-text-opacity, 1))}
    .text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}
    .text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}
    .text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}
    .text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}
    .text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}
    .text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}
    .text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}
    .text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136 / var(--tw-text-opacity, 1))}
    .text-transparent{color:transparent}
    .text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}
    .opacity-90{opacity:0.9}
     .shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-blue-500\/30{--tw-shadow-color:rgb(59 130 246 / 0.3);--tw-shadow:var(--tw-shadow-colored)}.shadow-blue-600\/30{--tw-shadow-color:rgb(37 99 235 / 0.3);--tw-shadow:var(--tw-shadow-colored)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.hover\:-translate-y-2:hover{--tw-translate-y:-0.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))}.hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.active\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes bounce{0%, 100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,0.2,1)}}.group:hover .group-hover\:animate-bounce{animation:bounce 1s infinite}.group:hover .group-hover\:bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.group:hover .group-hover\:bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.group:hover .group-hover\:bg-purple-600{--tw-bg-opacity:1;background-color:rgb(147 51 234 / var(--tw-bg-opacity, 1))}.group:hover .group-hover\:bg-teal-600{--tw-bg-opacity:1;background-color:rgb(13 148 136 / var(--tw-bg-opacity, 1))}.group:hover .group-hover\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width: 768px){.md\:mb-0{margin-bottom:0px}.md\:flex{display:flex}.md\:w-40{width:10rem}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:flex-row{flex-direction:row}.md\:text-right{text-align:right}.md\:text-7xl{font-size:4.5rem;line-height:1}}@media (min-width: 1024px){.lg\:w-1\/2{width:50%}.lg\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.lg\:flex-row{flex-direction:row}.lg\:px-8{padding-left:2rem;padding-right:2rem}}
    
     /* 푸터 전체 배경 및 여백 */
    .footer-main {
        background-color: #0f172a; /* bg-slate-900 */
        color: #ffffff; /* text-white */
        padding: 3rem 0; /* py-12 */
    }

    /* 내부 컨테이너 */
    .footer-container {
        max-width: 80rem; /* max-w-7xl */
        margin: 0 auto;
        padding: 0 1rem; /* px-4 */
    }

    @media (min-width: 640px) { .footer-container { padding-left: 1.5rem; padding-right: 1.5rem; } } /* sm:px-6 */
    @media (min-width: 1024px) { .footer-container { padding-left: 2rem; padding-right: 2rem; } }   /* lg:px-8 */

    /* 레이아웃 제어 (Flexbox) */
    .footer-content {
        display: flex;
        flex-direction: column; /* 기본 모바일: 세로 정렬 */
        justify-content: space-between;
        align-items: center;
    }

    @media (min-width: 768px) {
        .footer-content {
            flex-direction: row; /* md:flex-row (가로 정렬) */
        }
    }

    /* 로고 영역 */
    .footer-logo {
        display: flex;
        align-items: center;
        gap: 0.5rem; /* gap-2 */
        margin-bottom: 1rem; /* mb-4 */
    }

    @media (min-width: 768px) {
        .footer-logo {
            margin-bottom: 0; /* md:mb-0 */
        }
    }

    .logo-icon {
        font-size: 1.875rem; /* text-3xl */
        color: #3b82f6; /* text-blue-500 */
    }

    .logo-text-group {
        display: flex;
        flex-direction: column;
    }

    .logo-name {
        font-weight: 900; /* font-black */
        font-size: 1.25rem; /* text-xl */
    }

    .logo-subname {
        font-size: 0.75rem; /* text-xs */
        color: #64748b; /* text-slate-500 */
    }

    /* 하단 정보 텍스트 */
    .footer-info {
        color: #94a3b8; /* text-slate-400 */
        font-size: 0.875rem; /* text-sm */
        text-align: center;
    }

    @media (min-width: 768px) {
        .footer-info {
            text-align: right; /* md:text-right */
        }
    }

    .footer-info p {
        margin-bottom: 0.25rem; /* mb-1 */
    }