/* --- 로딩 --- */
        :root {
      
            --accent: #d90d31;
     
        }

.Logo_Area{width:400px}
.Logo_Area img{max-width:100%;margin:0 auto}
        /* --- LOADING OVERLAY --- */
        .preloader {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: #fff;
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            color: #111;
        }
        .loading-bar {
            width: 300px;
            height: 2px;
            background: #eee;
            margin-top: 20px;
            position: relative;
            overflow: hidden;
        }
        .bar-fill {
            position: absolute;
            left: 0; top: 0;
            height: 100%;
            width: 0%;
            background: var(--accent);
        }



        @media (max-width: 900px) {
            .Logo_Area{width:300px}
			  .loading-bar {
            width: 250px;
            height: 2px;
            background: #eee;
            margin-top: 20px;
            position: relative;
            overflow: hidden;
        }


        }


        /* Gradient Classes for Preview */
        .grad-vertical {
            background: linear-gradient(to bottom, #4CAF50, #5C7FA8, #1B5E20);
        }
        .grad-diagonal {
            background: linear-gradient(135deg, #4CAF50, #5C7FA8, #1B5E20);
        }
        .grad-radial {
            background: radial-gradient(circle, #4CAF50, #5C7FA8, #1B5E20);
        }
 


/* --- 플로팅 메뉴 스타일 시작 --- */
        .quick-menu {
            position: fixed;
            right: 0;           /* 화면 오른쪽에 딱 붙임 */
            top: 50%;           /* 화면 세로 중앙 */
            transform: translateY(-50%); /* 정확한 중앙 정렬 */
            z-index: 9999;      /* 다른 요소보다 위에 오도록 설정 */
            width: 90px;        /* 메뉴 전체 너비 */
            /* 컨테이너 자체의 그림자는 제거하여 아이템과 겹치는 현상 방지 */
            /* box-shadow: -5px 5px 15px rgba(0,0,0,0.15); */
            overflow: visible;   
            display: flex;
            flex-direction: column;
            /* 전체가 하나의 덩어리처럼 보이게 필터 그림자 적용 (선택사항) */
            filter: drop-shadow(-4px 4px 10px rgba(0,0,0,0.15));
        }

        .quick-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: #fff;
            height: 90px;       /* 각 메뉴의 높이 */
            width: 90px;        /* 기본 너비 */
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
            position: relative;
            
            /* 구분선: 마지막 아이템 제외하고 적용 */
            border-bottom: 1px solid rgba(255,255,255,0.15);
            
            /* 기본적으로 둥근 모서리 제거 (직각으로 연결) */
            border-radius: 0;
            
            margin-bottom: 0; 
            right: 0; 
        }

        /* --- 모서리 라운드 처리: 왼쪽 위와 왼쪽 아래만 적용 --- */
        /* 첫 번째 아이템: 왼쪽 위만 둥글게 */
        .quick-item:first-child {
            border-top-left-radius: 12px;
        }
        /* 마지막 아이템: 왼쪽 아래만 둥글게 + 하단 라인 제거 */
        .quick-item:last-child {
            border-bottom-left-radius: 12px;
            border-bottom: none;
        }

        /* 아이콘 스타일 */
        .quick-item i, .kakao-icon {
            font-size: 28px;
            margin-bottom: 8px;
            transition: transform 0.3s ease;
        }
        
        /* 텍스트 스타일 */
        .quick-item span {
            font-size: 13px;
            font-weight: 700;
            text-align: center;
            line-height: 1.3;
            transition: opacity 0.3s ease;
        }

        /* --- 호버 효과: 왼쪽으로 툭 튀어나오기 --- */
        .quick-item:hover {
            width: 105px;             
            transform: translateX(-15px); 
            z-index: 10; 
            /* 호버 시 해당 아이템만 둥근 모서리 약간 추가하여 자연스럽게 */
            border-top-left-radius: 12px;
            border-bottom-left-radius: 12px;
            /* 호버 시 구분선 가리기 */
            border-color: transparent;
        }

        .quick-item:hover i, .quick-item:hover .kakao-icon {
            transform: scale(1.2) rotate(-5deg); 
        }

        /* 1. 전화문의 - 밝은 청록색 */
        .item-phone { background-color: #00bcd4; }
        .item-phone:hover { background-color: #00acc1; }

        /* 2. 카카오톡 - 카카오 옐로우 */
        .item-kakao {
            background-color: #FEE500;
            color: #3C1E1E; 
        }
        .item-kakao:hover { background-color: #fdd835; }

        /* 3. 견적문의 - 짙은 파란색/네이비 */
        .item-quote { background-color: #1a3c74; }
        .item-quote:hover { background-color: #132e5c; }


        /* SVG 아이콘 (카카오톡 전용) */
        .kakao-icon {
            width: 28px;
            height: 28px;
            margin-bottom: 8px;
            fill: #3C1E1E; 
        }

        /* 모바일 대응 */
        @media (max-width: 768px) {
            .quick-menu {
                width: 70px;
                /* 모바일에서는 필터 그림자 대신 일반 그림자가 성능상 유리할 수 있음 */
                filter: none;
                box-shadow: -2px 2px 8px rgba(0,0,0,0.1);
				top: 65%;
            }
            .quick-item {
                height: 70px;
                width: 70px;
            }
            
            /* 모바일 라운드 처리 유지 */
            .quick-item:first-child { border-top-left-radius: 12px; }
            .quick-item:last-child { border-bottom-left-radius: 12px; }

            .quick-item i, .kakao-icon {
                font-size: 22px;
                width: 22px;
                height: 22px;
            }
            .quick-item span { font-size: 11px; }
            
            /* 모바일 호버 효과 제거 */
            .quick-item:hover {
                width: 70px;
                transform: none;
                /* 호버 시 라운드 복귀 방지 */
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
            .quick-item:first-child:hover { border-top-left-radius: 12px; }
            .quick-item:last-child:hover { border-bottom-left-radius: 12px; }
        }




/*슬라이드*/

  /* --- 1. Design Tokens & Reset --- */
        :root {
            --lux-black: #0a0a0a;
            --lux-dark: #121212;
            --lux-accent: #d70e32; /* Industrial Orange */
            --lux-white: #ffffff;
			--lux-blue: #287d9b;
            --lux-gray: #a1a1aa;
            --lux-gray-dark: #52525b;
       
                --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
            /* [FIX] 애니메이션 작동을 위해 추가된 변수 */
            --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
        }
 /* --- 2. Layout & Header --- */
        .lux-viewport {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

      
        /* --- 3. Slider Core --- */
        .lux-stage { position: relative; width: 100%; height: 100%; }

        .lux-slide {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            opacity: 0; z-index: 1; transition: opacity 1s ease-in-out;
            pointer-events: none;
        }
        .lux-slide.is-active { opacity: 1; z-index: 10; pointer-events: auto; }

        /* Background Images (CSS Controlled) */
        .lux-bg {
            position: absolute; inset: 0;
            background-size: cover; background-position: center;
            transition: transform 6s ease-out; transform: scale(1);
        }
        .lux-slide.is-active .lux-bg { transform: scale(1); }

        /* Image Sources map to slides 1-6 */
        .lux-slide:nth-child(1) .lux-bg { background-image: url('../img/Main_Sl_1.png'); }  /* */
        .lux-slide:nth-child(2) .lux-bg { background-image: url('../img/Main_Sl_2.png'); }  
        .lux-slide:nth-child(3) .lux-bg { background-image: url('../img/Main_Sl_3.png'); } /*  */
    .lux-slide:nth-child(4) .lux-bg { background-image: url('../img/.png'); } /*  */
        .lux-slide:nth-child(5) .lux-bg { background-image: url('../img/.png'); } /*  */
        .lux-slide:nth-child(6) .lux-bg{ background-image: url('../img/.png'); } /*  */

        .lux-overlay {
            position: absolute; inset: 0;/**/
            background: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
        }

 /* --- 영상--- */
 /* HTML5 Video Styling */
        .lux-video-obj {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0; left: 0;
        }

        /* [Modified] YouTube Background CSS Hack - Fixed Size Issue */
        .lux-yt-container {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none;
        }
        
        /* [FIX] 특정 클래스가 아니라 컨테이너 안의 모든 iframe에 강제 적용하여 사이즈 문제 해결 */
        .lux-yt-container iframe {
            position: absolute;
            top: 50%; left: 50%;
            width: 100vw; 
            height: 56.25vw; /* 16:9 Aspect Ratio (100 * 9 / 16) */
            min-height: 100vh; 
            min-width: 177.77vh; /* 16:9 Aspect Ratio (100 * 16 / 9) */
            transform: translate(-50%, -50%);
            pointer-events: none; /* 클릭 차단 */
        }




 /* --- 4. Content Typography & WAVE ANIMATIONS --- */
        .lux-content {
            position: absolute; inset: 0;
            display: flex; flex-direction: column; justify-content: center;
            padding: 0 6rem; max-width: 1600px; margin: 0 auto; 
            /* [수정] z-index 상향 조정 */
            z-index: 30;
        }
        
        @media (max-width: 768px) {
            .lux-content { padding: 0 2rem 14rem 2rem; } 
        }

        /* 카테고리 텍스트 */
        .lux-category {
            font-family: 'Montserrat', sans-serif; color: var(--lux-accent);
            font-weight: 700; font-size: 0.85rem; letter-spacing: 0.25em; text-transform: uppercase;
            margin-bottom: 1rem;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }
        .lux-slide.is-active .lux-category { 
            opacity: 1; 
            transform: translateY(0); 
            transition-delay: 0.2s; 
        }

        /* 제목 래퍼 */
        .wave-text-wrapper {
 
            font-size: clamp(4rem, 1vw, 6rem);
            font-weight: 700;
            color: var(--lux-white);
            line-height: 1.1;
            margin-bottom: 0.2rem;
            display: flex;
            flex-wrap: wrap; 
            gap: 0; 
            overflow: hidden;
            /* [수정] 폰트 디센더 잘림 방지를 위한 패딩 */
            padding-bottom: 0.1em;font-family: "Play", sans-serif;
        }
        
        /* [핵심] 개별 글자 스타일 (JS가 생성함) */
        .wave-letter-unit {
            display: inline-block;
            transform: translateY(110%); /* 시작점: 아래 */
            opacity: 0;
        }

        /* 슬라이드가 활성화되면 애니메이션 시작 */
        .lux-slide.is-active .wave-letter-unit {
            /* [수정] forwards -> both로 변경하여 애니메이션 대기/종료 상태 모두 확실하게 적용 */
            animation: rise-and-bounce 1s var(--ease-bounce) both;
            animation-delay: calc(var(--i) * 0.06s + 0.1s);
        }

        @keyframes rise-and-bounce {
            0% {
                transform: translateY(110%);
                opacity: 0;
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* 그라데이션 텍스트 (Highlight) */
        .highlight .wave-letter-unit {
            /*background: linear-gradient(to right, #ffffff, #b68b3a);*/
			background: linear-gradient(to right, #ffffff, #fff);
            -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .highlight {
            display: flex;
            /* [수정] highlight 래퍼도 폰트 잘림 방지 */
            padding-bottom: 0.1em;
        }


        /* 설명 텍스트 */
        .hero-description-text {
            margin-top: 1.5rem;
            font-size: 1.85rem;
            line-height: 1.7;
            font-weight: 600;
            color: var(--lux-white);
            max-width: 100%;
            opacity: 0;
            transform: translateY(20px);
            transition: all 1s ease;
            margin-bottom: 3rem;
        }

        .lux-slide.is-active .hero-description-text {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 1.2s; 
        }
        
        @media (max-width: 768px) {
            .hero-description-text { font-size: 0.95rem; margin-bottom: 2rem; }
        }


        @media (max-width: 1024px) { .wave-text-wrapper { font-size: 3.5rem; } }
        @media (max-width: 768px) { .wave-text-wrapper { font-size: 3rem; margin-bottom: 1rem; } .hero-description-text { font-size: 1.5rem; } }
		  @media (max-width: 568px) { .wave-text-wrapper { font-size: 2.2rem; margin-bottom: 1rem; } .hero-description-text { font-size: 1rem; } }







 /* [NEW] Black Background Class */
        .lux-bg-black {
            background-color: #000 !important;
            background-image: none !important;
        }



.lux-overlay-dark { background: rgba(0,0,0,0.7) !important; }

 /* [NEW] LOGO MASKING CLASS (핵심 기능) */
        .lux-logo-mask {
            /* 로고 모양으로만 내용이 보이고 나머지는 투명해짐 */
            /* 실제 사용 시에는 url('logo.png') 처럼 본인의 로고 파일 경로를 넣으세요 */
            /* 여기서는 예시를 위해 SVG 코드를 Data URI로 변환하여 사용했습니다 (CNP TECH 로고 모양) */
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Montserrat, sans-serif' font-weight='900' font-size='80' fill='black'%3ECNP TECH%3C/text%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Montserrat, sans-serif' font-weight='900' font-size='80' fill='black'%3ECNP TECH%3C/text%3E%3C/svg%3E");
            
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            
            -webkit-mask-position: center;
            mask-position: center;
            
            -webkit-mask-size: 70% auto; /* 로고 크기 조절 */
            mask-size: 70% auto;
        }
        
        /* 모바일에서는 로고 마스크 크기 조정 */
        @media (max-width: 768px) {
            .lux-logo-mask {
                -webkit-mask-size: 90% auto;
                mask-size: 90% auto;
            }
        }


 /* [NEW] 1. Pattern Logo Mask (이미지 패턴이 입혀진 로고) */
        .lux-pattern-logo {
            width: 300px;
            height: 100px;
            margin-bottom: 1rem;
            
            /* 배경(패턴) 이미지 */
            background-image: url('https://images.unsplash.com/photo-1550684848-fac1c5b4e853?q=80&w=2070'); /* Fire */
            background-size: cover;
            background-position: center;
            
            /* 로고 모양으로 자르기 */
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Montserrat, sans-serif' font-weight='900' font-size='80' fill='black'%3ECNP TECH%3C/text%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Montserrat, sans-serif' font-weight='900' font-size='80' fill='black'%3ECNP TECH%3C/text%3E%3C/svg%3E");
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-size: contain;
            mask-size: contain;

            opacity: 0;
            transform: translateY(20px);
            transition: all 1s var(--ease-bounce);
        }
        
        .lux-slide.is-active .lux-pattern-logo {
            opacity: 1;
            transform: translateY(0);
        }

        /* [NEW] 2. Text Mask (이미지 패턴이 입혀진 텍스트) */
        .lux-massive-mask {
  
            font-weight: 900;
            font-size: 10vw; 
            line-height: 0.85;
            text-transform: uppercase;
            
            background-image: url('https://images.unsplash.com/photo-1550684848-fac1c5b4e853?q=80&w=2070');
            background-size: cover;
            background-position: center;
            
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent;
            
            opacity: 0;
            transform: scale(1.1);
            transition: all 1.5s var(--ease-bounce);
            transition-delay: 0.3s; /* 로고보다 조금 늦게 */
        }

        .lux-slide.is-active .lux-massive-mask {
            opacity: 1;
            transform: scale(1);
        }


        @media (max-width: 768px) {
        
            .lux-pattern-logo { width: 200px; height: 60px; } /* 모바일 로고 크기 조정 */
        }








        /* Glass Capsule Button */
        .lux-btn {
            position: relative; display: inline-flex; align-items: center;
            padding: 0.5rem 2.5rem 0.5rem 0.5rem; border-radius: 3rem;
            background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            transition: all 0.4s; overflow: hidden;
        }
		.Link_Btn_Lux{}
        .lux-btn::before {
            content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%;
            background-color: var(--lux-white); z-index: 0; transition: width 0.4s;
        }
        .lux-btn:hover { border-color: var(--lux-white); }
        .lux-btn:hover::before { width: 100%; }

        .lux-btn-icon {
            position: relative; width: 3rem; height: 3rem;
            background-color: rgba(255,255,255,0.1); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            margin-right: 1.2rem; z-index: 1; transition: all 0.4s;
        }
        .lux-btn:hover .lux-btn-icon { background-color: var(--lux-black); transform: scale(1.1); }

        .lux-arrow {
            font-size: 1rem; color: var(--lux-white);
            transform: rotate(-45deg); transition: transform 0.4s;
        }
        .lux-btn:hover .lux-arrow { transform: rotate(0deg); color: var(--lux-white); }

        .lux-btn-text {
            position: relative; z-index: 1; font-size: 2rem; letter-spacing: 0em;
            font-weight: 600; color: var(--lux-white); transition: color 0.4s;
        }
        .lux-btn:hover .lux-btn-text { color: var(--lux-black); }


        /* --- 5. Dock & Pagination (Layout Adjusted) --- */
        .lux-dock {
            position: absolute; bottom: 0; left: 0; width: 100%; z-index: 50;
           /* background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 30%, transparent 100%);*/
            padding: 4rem 6rem 2rem 6rem; pointer-events: none;
        }

        .lux-dock-inner {
            pointer-events: auto; display: flex; justify-content: space-between; align-items: flex-end;
            border-top: 1px solid rgba(255,255,255,0.15); padding-top: 1.5rem;
            max-width: 1600px; margin: 0 auto; gap: 2rem;
        }

        .lux-pagination { display: flex; gap: 2rem; flex-grow: 1; }

        .lux-tab { cursor: pointer; position: relative; padding-bottom: 0.8rem; flex: 1; min-width: 100px; }
        .lux-tab-idx {
            display: block; font-family: 'Montserrat', sans-serif; font-size: 0.7rem;
            font-weight: 700; color: var(--lux-gray-dark); margin-bottom: 0.3rem;
        }
        .lux-tab-label {
            display: block; font-size: 0.9rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.05em; color: var(--lux-gray); transition: color 0.3s;
        }
        .lux-progress-track {
            position: absolute; bottom: 0; left: 0; width: 100%; height: 2px;
            background-color: rgba(255,255,255,0.15);
        }
        .lux-progress-fill { height: 100%; width: 0%; background-color: var(--lux-accent); }

        /* Active State */
        .lux-tab.is-active .lux-tab-idx { color: var(--lux-white); }
        .lux-tab.is-active .lux-tab-label { color: var(--lux-accent); }
        .lux-tab:hover .lux-tab-label { color: var(--lux-white); }


        /* --- Responsive Pagination Logic --- */
        @media (max-width: 1024px) {
            .lux-pagination { gap: 1rem; }
            .lux-tab { min-width: auto; }
            .lux-dock { padding: 4rem 3rem 2rem 3rem; }
        }

        @media (max-width: 768px) {
            .lux-dock { padding: 2rem 1.5rem 1.5rem 1.5rem; }
            .lux-dock-inner { flex-direction: column-reverse; align-items: stretch; gap: 1.5rem; }
          .lux-bg{  background-position:right 25% center;}
            /* Mobile Grid: 3 per row default */
            .lux-pagination { flex-wrap: wrap; gap: 0.5rem; }
            .lux-tab { flex: 1 1 28%; margin-bottom: 0.5rem; }
            
            .lux-tab-label { font-size: 0.7rem; letter-spacing: 0; }
            .lux-tab-idx { font-size: 0.6rem; margin-bottom: 0.2rem; }
			 .lux-btn-text {
            position: relative; z-index: 1; font-size: 1.2rem; letter-spacing: 0em;
            font-weight: 600; color: var(--lux-white); transition: color 0.4s;
        }
        }

        @media (max-width: 340px) {
            /* Tiny Screens: 2 per row */
            .lux-tab { flex: 1 1 45%; }
			 .lux-btn-text {
            position: relative; z-index: 1; font-size: 0.8rem; letter-spacing: 0em;
            font-weight: 600; color: var(--lux-white); transition: color 0.4s;
        }
        }


        /* Controls */
        .lux-controls { display: flex; align-items: center; gap: 2rem; flex-shrink: 0; }
        
        @media (max-width: 768px) {
            .lux-controls { justify-content: space-between; width: 100%; }
        }

        .lux-counter {
            font-family: 'Montserrat', sans-serif; font-size: 1.25rem; font-weight: 700;
            letter-spacing: 0.2em; color: var(--lux-white);
        }
        .lux-counter span {  color: var(--lux-white); margin: 0 0.5rem; }

        .lux-arrows { display: flex; gap: 0.5rem; }
        .lux-arrow-btn {width: 3rem; 
    height: 3rem; 
    display: flex; /* Flexbox로 중앙 정렬 제어 */
    justify-content: center;
    align-items: center;
    
    border: 1px solid rgba(255,255,255,0.2); 
    color: var(--lux-white); 
    transition: all 0.3s;
    padding: 0; /* 패딩 초기화 */
	outline: none;
}
.lux-arrow-btn i {
    font-size: 1rem; 
    line-height: 1; /* 줄간격 초기화로 불필요한 여백 제거 */
    display: block; /* 블록 요소로 변경 */
}


        .lux-arrow-btn:hover { background-color: var(--lux-white); color: var(--lux-black); }
        .lux-arrow-btn.is-filled { background-color: var(--lux-accent); border-color: var(--lux-accent); }
        .lux-arrow-btn.is-filled:hover { background-color: var(--lux-white); border-color: var(--lux-white); color: var(--lux-black); }
		 .lux-arrow-btn.is-filled_2 { background-color: var(--lux-blue); border-color: var(--lux-blue); }
        .lux-arrow-btn.is-filled_2:hover { background-color: var(--lux-white); border-color: var(--lux-white); color: var(--lux-black); }
  


/*제품*/

.Last_Center{width:100%;padding:5% 5%;}



/**/   
/* 메인 섹션 컨테이너    */
    
  /* [2] 메인 섹션 */
        .k-sec-main {
            width: 100%;
            height: 100vh; 
            position: relative;
            overflow: hidden; 
            background: #f8f9fa;
            display: flex; flex-direction: column;
        }

        .k-sec-main::before {
            content: ''; position: absolute; bottom: -200px; left: -200px;
            width: 800px; height: 800px;
            background: radial-gradient(circle, rgba(52, 152, 219, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
            z-index: 0; pointer-events: none;
        }

        /* 타이틀 */
        .k-page-title {
            position: relative; z-index: 20;
             /*font-family: 'Orbitron', sans-serif;*/
            font-size: 42px; font-weight: 900; color: #222; 
            text-align: center; width: fit-content; margin: 80px auto 20px; 
            display: none !important;
        }
        .k-page-title::before {
            content: ''; position: absolute; top: -5px; left: -15px;
            width: 12px; height: 12px; background: #faad10; border-radius: 50%;
        }

        /* [3] 레이아웃 컨테이너 */
        .k-flex-container {
            display: flex; width: 100%; max-width: 1920px; margin: 0 auto;
            flex: 1; position: relative; z-index: 5;
        }

        /* === LEFT: 콘텐츠 영역 === */
        .k-left-panel {
            width: 50%; padding: 60px 0 0 10%; 
            display: flex; flex-direction: column; 
        }

        .k-content-wrapper { position: relative; width: 100%; height: 500px; }
          .k-item-title { 
       
            font-size: 38px; 
            font-weight: 800; 
            color: #111; 
            margin-bottom: 10px; 
            position: relative;
            display: inline-block;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
		.k-item-desc{; 
            font-weight: 500; 
            color: #4a4a4a; 
            margin: 20px 0;}

			.k-item-gang{; 
            font-weight: 500; 
            color: #2a2a2a; 
            margin: 40px 0 30px;}
.k-item-gang>b{color:#047a72;font-style:italic}



        .k-item-title::after {
            content: ''; position: absolute; bottom: -12px; left: 0;
            width: 60px; height: 4px;
            background: linear-gradient(90deg, #1590a3, #55adbb);
            border-radius: 2px;
        }
        .k-item-title::before {
            content: ''; position: absolute; bottom: -12px; left: 68px;
            width: 12px; height: 4px;
            background: #faad10;
            border-radius: 2px;
        }
        
        .k-content-item {
            position: absolute; top: 0; left: 0; width: 100%;
            opacity: 0; visibility: hidden; transform: translateX(-30px);
            transition: all 0.5s ease;
        }
        .k-content-item.k-active {
            opacity: 1; visibility: visible; transform: translateX(0); z-index: 10;
        }

        .k-icon-grid {
            display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 50px;
            max-width: 650px;
        }
        .k-grid-li {
            width: calc(50% - 10px); text-align: center;
            transition: transform 0.3s;
        }
		

        .k-grid-li:hover { transform: translateY(-5px); }
        
        .k-grid-li a { 
            display: block; width: 100%; height: 100%; 
            padding: 20px 10px; border-radius: 10px;
            transition: background 0.3s;

        }
	
        .k-grid-li a:hover {  }
			.One_Grid{width:100% !important}
		.One_Grid a{background:transparent;
            box-shadow: 0 0px 0px rgba(0,0,0,0.03);text-align:left;padding:0px !important }
  .One_Grid a:hover { background: transparent; }

        .k-grid-li i { font-size: 14px;margin-right:2px; color: #55adbb; ; }
        .k-grid-li img { height: 120px; margin: 0 auto 15px; }
        .k-grid-li p { font-size: 20px; font-weight: 700; color: #333; margin-bottom: 5px; }
        .k-grid-li span { font-size: 16px; color: #888; word-break: keep-all;}

        .k-desc-box h3 { /*font-family: 'Orbitron', sans-serif;*/ ; font-weight: 800; color: #333;line-height:1.55; margin-bottom: 20px; }
        .k-desc-box p { font-size: 16px; color: #666; line-height: 1.7; max-width: 550px; margin-bottom: 40px; word-break: keep-all; }
        .k-btn-more {  /*font-family: 'Orbitron', sans-serif;*/ font-size: 15px; font-weight: 600; color: #074c92; 
		border-bottom: 2px solid #074c92; padding-bottom: 5px; }


        /* === RIGHT: 비주얼 영역 === */
        .k-right-panel {
            width: 50%; height: 100%; position: relative;
        }

        /* 배경 원 */
        .k-white-circle {
            position: absolute; top: 50%; right: 30px; 
            transform: translateY(-50%); width: 550px; height: 550px;
            border-radius: 50%; background: #fff;
            box-shadow: -30px 0 60px rgba(0,0,0,0.05); z-index: 1;
        }
        .k-white-circle::after {
            content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 400px; height: 400px; border-radius: 50%; border: 1px dashed #e0e0e0;
        }

        /* 네비게이션 */
        .k-nav-list {
            position: absolute; top: 50%; right: 50px; 
            transform: translateY(-50%); z-index: 20;
            text-align: right; display: flex; flex-direction: column; gap: 40px;
        }
        .k-nav-btn {
             font-size: 18px; font-weight: 500; color: #ccc;
            cursor: pointer; transition: all 0.3s; position: relative;
            display: flex; align-items: center; justify-content: flex-end; gap: 15px;
        }
        .k-nav-btn.k-active { color: #222; font-weight: 800; font-size: 20px; }
        
        .k-progress-circle { width: 24px; height: 24px; transform: rotate(-90deg); opacity: 0; transition: opacity 0.3s; }
        .k-nav-btn.k-active .k-progress-circle { opacity: 1; }
        .k-progress-circle circle { fill: none; stroke-width: 3; }
        .k-bg-ring { stroke: #eee; }
        .k-fg-ring { stroke: #222; stroke-dasharray: 63; stroke-dashoffset: 63; }
        .k-nav-btn.k-active .k-fg-ring { animation: k-circle-fill 5s linear forwards; }

        @keyframes k-circle-fill { from { stroke-dashoffset: 63; } to { stroke-dashoffset: 0; } }


        /* 3. 수직 슬라이더 (Viewport) */
        .k-slider-viewport {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            z-index: 10; pointer-events: none; 
        }
        
        /* [개별 슬라이드 노드 - 궤도 회전 전담] */
        .k-slide-node {
            position: absolute; 
            right: 130px; top: 50%; 
            width: 350px; height: 350px; 
            margin-top: -175px; 
            display: flex; justify-content: center; align-items: center;
            
            /* Orbital Path (궤도 회전) 트랜지션 유지 */
            transition: transform 1.2s cubic-bezier(0.25, 1, 0.3, 1),
                        opacity 0.8s ease, filter 0.8s ease;
            
            pointer-events: auto; cursor: pointer;
        }
        
        /* 텔레포트 시 내부 요소까지 트랜지션 해제 */
        .k-no-transition, .k-no-transition * { transition: none !important; }

        /* --- [상태별 클래스 정의: 부모 노드의 궤도 회전] --- */
        /* 스케일(Scale)과 CD삽입(TranslateX)은 이제 자식(.k-circle-img)이 담당합니다. */
        
        .k-state-center {
            transform: rotate(0deg) translateX(-280px) rotate(0deg);
            opacity: 1; filter: grayscale(0%); z-index: 30;
        }

        .k-state-top {
            transform: rotate(100deg) translateX(-280px) rotate(-100deg);
            opacity: 0.5; filter: grayscale(100%); z-index: 10;
        }

        .k-state-bottom {
            transform: rotate(-100deg) translateX(-280px) rotate(100deg);
            opacity: 0.5; filter: grayscale(100%); z-index: 10;
        }

        .k-state-out-top {
            transform: rotate(130deg) translateX(-320px) rotate(-130deg);
            opacity: 0; z-index: 5;
        }
        
        .k-state-out-bottom {
            transform: rotate(-130deg) translateX(-320px) rotate(130deg);
            opacity: 0; z-index: 5;
        }

        /* --- [자식 요소: CD 삽입 모션 및 스케일 제어] --- */
        .k-circle-img {
            width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
            background: #fff; box-shadow: 10px 10px 30px rgba(0,0,0,0.15); border: none;
            
            /* 대기 상태의 기본 크기 */
            transform: scale(0.85) translateX(0);
            transition: transform 0.8s cubic-bezier(0.25, 1, 0.3, 1);
            will-change: transform;
        }
        .k-circle-img img { width: 100%; height: 100%; object-fit: cover; }

        /* CD 삽입 키프레임 애니메이션 */
        @keyframes k-cd-insert {
            0%   { transform: scale(0.85) translateX(0); }
            60%  { transform: scale(1.35) translateX(-60px); } /* 더 안쪽으로 쑥 들어감 */
            100% { transform: scale(1.35) translateX(0); }     /* 제자리 정착 */
        }

        /* 센터에 도착하면 안쪽 이미지에 CD 삽입 애니메이션 실행 */
        .k-state-center .k-circle-img {
            animation: k-cd-insert 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }
        
        /* 화면 밖으로 나갈 때의 크기 */
        .k-state-out-top .k-circle-img, 
        .k-state-out-bottom .k-circle-img {
            transform: scale(0.5) translateX(0);
        }


        /* [5] 모바일 전용 컨트롤러 */
        .k-mobile-controls {
            display: none; position: absolute; top: 50%; transform: translateY(-50%);
            left: 0; width: 100%; justify-content: space-between; padding: 0 20px;
            z-index: 100; pointer-events: none; 
        }
        .k-mob-btn {
            width: 50px; height: 50px; background: rgba(255,255,255,0.9);
            border-radius: 50%; display: flex; justify-content: center; align-items: center;
            font-size: 24px; color: #333; box-shadow: 0 4px 15px rgba(0,0,0,0.15);
            pointer-events: auto; cursor: pointer; border: none; transition: transform 0.2s;
        }
        .k-mob-btn:active { transform: scale(0.9); }


        /* 반응형 - 1400px 최적화 */
        @media (max-width: 1400px) {
            .k-page-title {
                margin: 20px auto 0px;
            }
            .k-sec-main {
                height: 100vh;
            }
            .k-left-panel { padding-left: 5%; }
            .k-white-circle { width: 480px; height: 480px; right: -20px; }
            .k-white-circle::after { width: 340px; height: 340px; }
            .k-nav-list { right: 60px; gap: 30px; }
            .k-nav-btn { font-size: 14px; } 
            .k-nav-btn.k-active { font-size: 15px; } 
            .k-progress-circle { width: 20px; height: 20px; }
            
            /* 1400px 기준 궤도 중심점 및 반지름 재조정 */
            .k-slide-node { 
                right: 80px; width: 280px; height: 280px; margin-top: -140px;
            }
            
            .k-state-center { transform: rotate(0deg) translateX(-200px) rotate(0deg); }
            .k-state-top { transform: rotate(100deg) translateX(-200px) rotate(-100deg); }
            .k-state-bottom { transform: rotate(-100deg) translateX(-200px) rotate(100deg); }
            .k-state-out-top { transform: rotate(130deg) translateX(-250px) rotate(-130deg); }
            .k-state-out-bottom { transform: rotate(-130deg) translateX(-250px) rotate(130deg); }

            /* 1400px용 CD 삽입 애니메이션 */
            @keyframes k-cd-insert-1400 {
                0%   { transform: scale(0.85) translateX(0); }
                60%  { transform: scale(1.3) translateX(-50px); }
                100% { transform: scale(1.3) translateX(0); }
            }
            .k-state-center .k-circle-img {
                animation: k-cd-insert-1400 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            }
			   .k-item-title {; font-size: 20px; font-weight: 800; color: #333; margin-bottom: 10px; }
			   .k-item-desc{; 
            font-weight: 500; 
            color: #4a4a4a; font-size:14px;
            margin: 20px 0;}
        
        }

        @media (max-width: 1024px) {
            .k-sec-main { height: auto; padding-bottom: 40px; }
            .k-flex-container { flex-direction: column-reverse; }
            .k-page-title { margin: 30px auto 20px; }
            .k-left-panel { width: 100%; padding: 20px 20px 60px; height: auto; }
            .k-content-wrapper { height: auto; min-height: 400px; }
            .k-content-item { position: relative; display: none; opacity: 0; visibility: visible; transform: none; }
            .k-content-item.k-active { display: block; animation: k-mobile-fade-up 0.6s ease forwards; }
            .k-icon-grid { justify-content: center; margin: 0 auto 40px; }
			.k-desc-box h3{font-size:18px}
            .k-desc-box { text-align: center; margin: 0 auto;  word-break: break-all; /* 단어 단위로 쪼개어 강제 줄바꿈 */
  word-wrap: break-word; /* IE 호환성을 위한 속성 */}
            .k-right-panel { width: 100%; height: 320px; margin-top: 0; background: #f8f9fa; }
            .k-white-circle { display: none; }
            .k-nav-list { display: none; } 
            .k-floating-bar { display: none; }
            .k-mobile-controls { display: flex; top: 50%; }
            
            /* 모바일에서는 궤도 애니메이션 강제 비활성화 (수직 정렬) */
            .k-slide-node { 
                right: auto; left: 50%; width: 280px; height: 280px; 
                margin-left: -140px; margin-top: 0; top: 50%; opacity: 0; pointer-events: none;
                transition: opacity 0.4s ease, transform 0.4s ease;
                transform: translateY(-50%); animation: none !important; 
            }
            .k-state-center { opacity: 1; transform: translate(0, -50%) !important; pointer-events: auto; z-index: 10; }
            .k-state-top, .k-state-bottom, .k-state-out-top, .k-state-out-bottom { opacity: 0; transform: translate(0, -50%) !important; }
            
            /* 모바일용 이미지 크기 처리 */
            .k-circle-img {
                transition: transform 0.4s ease;
                transform: scale(0.8);
            }
            .k-state-center .k-circle-img {
                animation: none !important;
                transform: scale(1);
            }
        }

        @keyframes k-mobile-fade-up {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }



        /* 초기화 및 기본 설정 (범용 태그 오버라이딩 방지를 위해 최소한으로 적용) */
        .elg-prod-wrapper * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
           
        }

        /* 전체 섹션 컨테이너 */
        .elg-prod-section {
            background-color: #fcfcfc;
            padding: 3rem 10rem;
            width: 100%;
        }

        /* 최대 너비 및 중앙 정렬 컨테이너 */
        .elg-prod-container {
            max-width: 100%;
            margin: 0 auto;
        }

        /* 섹션 헤더 (클래스로 직접 제어) */
        .elg-prod-section-header {
            text-align: center;
            margin-bottom: 4rem;
        }

        /* 상단 영문 라인 디자인 (Eyebrow 텍스트) */
        .elg-prod-eyebrow {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: 600;
            color: #074c92;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            margin-bottom: 1rem;
        }
        
        .elg-prod-eyebrow::before,
        .elg-prod-eyebrow::after {
            content: '';
            display: inline-block;
            width: 30px;
            height: 1px;
            background-color: #074c92;
            margin: 0 16px;
        }

        .elg-prod-main-title {
            font-size: 2rem;
            font-weight: 700;
            color: #111;
            letter-spacing: -0.02em;
            margin-bottom: 1rem;
        }

        .elg-prod-sub-title {
            font-size: 1.05rem;
            color: #666;
            font-weight: 400;
            line-height: 1.5;
            word-break: keep-all;
        }

        /* 제품 그리드 (4열 배치) */
        .elg-prod-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
        }

        /* 개별 제품 카드 */
        .elg-prod-card {
            display: flex;
            flex-direction: column;
            background: #ffffff;
            border-radius: 12px;
            overflow: hidden;
          
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            text-decoration: none; /* 전체를 링크로 쓸 경우를 대비 */
            cursor: pointer;
        }

        .elg-prod-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 5px 8px rgba(0, 0, 0, 0.08);
        }
.elg-prod-card a{display:block;width:100%}
        /* 이미지 영역 */
        .elg-prod-image-wrapper {
            position: relative;
            width: 100%;
      
            overflow: hidden;
            background-color: #f5f5f5;
        }

        .elg-prod-image {
         
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .elg-prod-card:hover .elg-prod-image {
            transform: scale(1.05); /* 마우스 호버 시 부드러운 줌 효과 */
        }

        /* 텍스트 컨텐츠 영역 (세련된 디자인의 핵심) */
        .elg-prod-text-content {
            padding: 1.5rem 1.5rem;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        /* 카테고리 (작고 세련된 느낌) */
        .elg-prod-category {
            font-size: 0.75rem;
            font-weight: 600;
            color: #074b92;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 0.25rem;
        }

        /* 제품명 */
        .elg-prod-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1a1a1a;
            line-height: 1.4;
            margin-bottom: 0.25rem;
            word-break: keep-all; /* 한국어 어절 단위로 줄바꿈 */
        }

        /* 제품 설명 */
        .elg-prod-desc {
            font-size: 0.9375rem;
            font-weight: 400;
            color: #555;
            line-height: 1.6;
            margin-bottom: 0;
            word-break: keep-all;
        }

        /* 반응형 디자인 */
        @media (max-width: 1024px) {
            .elg-prod-grid {
                grid-template-columns: repeat(4, 1fr); /* 태블릿에서는 2열 */
            }
        }

        @media (max-width: 640px) {
            .elg-prod-grid {
               grid-template-columns: repeat(2, 1fr); /* 태블릿에서는 2열 */
            }
            .elg-prod-section {
                padding: 2rem 0.5rem;
            }
        }
       
  @media (max-width: 340px) {
            .elg-prod-grid {
                grid-template-columns: 1fr; /* 모바일에서는 1열 */
            }
            .elg-prod-section {
                padding: 2rem 0.5rem;
            }
        }
   /* [메인 컨테이너] 좌우 분할 레이아웃 */
        .vision-hero-wrapper {
            display: flex;
            width: 100%;
            min-height: auto; /* 화면 전체 높이 사용 */
            background-color: #fff;
        }

        /* [좌측] 비주얼 이미지 영역 */
        .vision-visual-segment {
            flex: 1; /* 50% 비율 */
            background-image: url('../img/Vision_Img.jpg'); /* 새싹/환경 이미지 */
            background-size: cover;
            background-position: 10% center;
            background-repeat: no-repeat;
            position: relative;
        }

        /* 이미지 위에 살짝 어두운 오버레이 (텍스트 가독성 필요시 사용, 현재는 투명도 낮게 설정) */
        .vision-visual-segment::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0); 
        }

        /* [우측] 콘텐츠 텍스트 영역 */
        .vision-content-segment {
            flex: 1; /* 50% 비율 */
            display: flex;
            flex-direction: column;
            justify-content: center; /* 수직 중앙 정렬 */
            padding: 80px 100px; /* 내부 여백 */
			background: #fafafa;
        }

        /* 1. 상단 라벨 (파란색 + 선) */
        .topic-indicator-label {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 700;
            color: #074d92; /* 신뢰감을 주는 블루 */
            margin-bottom: 24px;
        }

        .topic-indicator-label::before {
            content: '';
            display: inline-block;
            width: 24px;
            height: 2px;
            background-color: #074d92;
            margin-right: 12px;
        }

        /* 2. 메인 헤드라인 */
        .strategic-headline-txt {
            font-size: 50px;
            font-weight: 700;
            color: #1a1a1a;
            line-height: 1.45;
            margin-bottom: 30px;
            letter-spacing: -0.02em;
        }

        /* 3. 서브 설명글 */
        .strategic-desc-txt {
            font-size: 1.25rem;
            color: #666;
            margin-bottom: 60px;
            line-height:1.55;
            word-break: keep-all; /* 단어 단위 줄바꿈 */
        }

        /* 4. 내비게이션 그리드 (4개 박스) */
        .insight-grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4등분 */
            gap: 15px; /* 박스 사이 간격 */
            width: 100%;
        }

        /* 개별 카드 스타일 */
        .insight-card-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            border: 1px solid #e0e0e0;
            padding: 25px 10px;
            transition: all 0.3s ease;
            cursor: pointer;
            text-align: center;
            height: 140px; /* 고정 높이 */
        }

        /* 아이콘 영역 */
        .insight-card-icon {
            width: 40px;
            height: 40px;
            margin-bottom: 15px;
            fill: #888; /* 기본 아이콘 색상 */
            transition: fill 0.3s ease;
        }

        /* 텍스트 영역 */
        .insight-card-title {
            font-size: 15px;
            font-weight: 500;
            color: #333;
            transition: color 0.3s ease;
        }

        /* [Hover 효과] 마우스 올렸을 때 */
        .insight-card-item:hover {
            border-color: #074d92;
            transform: translateY(-3px); /* 살짝 위로 떠오름 */
            box-shadow: 0 5px 15px rgba(0, 86, 179, 0.1);
        }

        .insight-card-item:hover .insight-card-icon {
            fill: #074d92; /* 아이콘 파란색으로 변경 */
        }

        .insight-card-item:hover .insight-card-title {
            color: #074d92; /* 텍스트 파란색으로 변경 */
            font-weight: 700;
        }

        /* [반응형] 태블릿 및 모바일 대응 */
        @media (max-width: 1024px) {
            .vision-content-segment {
                padding: 60px 50px;
            }
            .strategic-headline-txt {
                font-size: 36px;
            }
            .insight-grid-container {
                grid-template-columns: repeat(2, 1fr); /* 2줄로 변경 */
            }
        }

        @media (max-width: 768px) {
            .vision-hero-wrapper {
                flex-direction: column; /* 세로 배치 */
            }
            .vision-visual-segment {
                min-height: 300px;
                flex: none; /* 높이 고정 */
            }
            .vision-content-segment {
                padding: 40px 24px;
                flex: none;
            }
            .strategic-headline-txt {
                font-size: 28px;
            }
            .strategic-desc-txt {
                font-size: 15px; word-break: break-all; /* 단어 단위로 쪼개어 강제 줄바꿈 */
  word-wrap: break-word; /* IE 호환성을 위한 속성 */
            }
        }

  .text-container {
            width: 100%;
     
            text-align: center; /* 깔끔한 중앙 정렬 */
        }

        /* 상단 작은 텍스트: PARTNER FarmTner */
        .sub-header {
            font-size: 16px; /* 작은 글씨 */
            color: #074c92;
            font-weight: 700;
            letter-spacing: 1px;
            margin-bottom: 15px;
            text-transform: uppercase;
        }

        /* FarmTner 강조 색상 (상단 작은 영문) */
        .brand-name-small {
            color: #27ae60;
            margin-left: 5px;
        }

        /* 메인 타이틀: 함께하는 ~ (50px) */
        .main-title {
            font-size: 50px; /* 요청하신 50px 고정 */
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 30px;
            line-height: 1.3;
        }

        /* 하단 설명 2줄 */
        .description {
            font-size: 1.25rem;
            color: #555;
            line-height: 1.8; /* 줄 간격 넉넉하게 */
            word-break: keep-all;
        }

        /* 모바일 반응형 */
        @media (max-width: 768px) {
            .main-title {
                font-size: 28px; /* 모바일에서는 조금 작게 조정 */
            }
            .description {
                font-size: 16px;
            }
			
        }

.Last_Section{width:100%;padding:3% 5%}
        /* 모바일 반응형 */
        @media (max-width: 768px) {
           
			.Last_Section{width:100%;padding:3% 2%}
        }

        /* =========================================
           2. Footer Layout CSS Variables for Theming
           ========================================= */
        :root {
            /* Default (White Theme) Values */
            --uni-bg-color: #ffffff;
            --uni-text-main: #111827;
            --uni-text-sub: #6b7280;
            --uni-border-color: #e5e7eb;
            --uni-icon-bg: #f9fafb;
            --uni-icon-color: #6b7280;
            --uni-brand-bg: #000;
            --uni-brand-text: #fff;
        }

        /* Theme Overrides using Classes instead of Data Attributes */
        .uni-theme-dark {
            --uni-bg-color: #111111;
            --uni-text-main: #ffffff;
            --uni-text-sub: #fff;
            /* 다크 모드에서도 보더가 보이도록 어두운 회색 설정 */
            --uni-border-color: #333333; 
            --uni-icon-bg: #1f2937;
            --uni-icon-color: #9ca3af;
            --uni-brand-bg: #fff;
            --uni-brand-text: #000;
        }

        .uni-theme-gray {
            --uni-bg-color: #f3f4f6;
            --uni-text-main: #1f2937;
            --uni-text-sub: #4b5563;
            --uni-border-color: #e5e7eb;
            --uni-icon-bg: #ffffff;
            --uni-icon-color: #6b7280;
            --uni-brand-bg: #374151;
            --uni-brand-text: #fff;
        }


        /* =========================================
           3. Footer Layout Styles
           ========================================= */
        .uni-footer-wrapper {
            width: 100%;
            background-color: var(--uni-bg-color);
            border-top: 1px solid var(--uni-border-color);
            color: var(--uni-text-main);
            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
            position: relative;
            z-index: 1;
            box-shadow: none !important;
            background-image: none !important;
        }

        .uni-footer-inner {
            max-width: 100%;
            margin: 0 auto;
            padding: 20px 15px;
        }

        /* Top Section */
        .uni-footer-top {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;display:none
        }

        .uni-brand-area {
            display: flex;
            align-items: center;
            margin-bottom: 0px;
        }

        /* Logo Icon (SVG) - Replaces Lucide */
        .uni-brand-icon-svg {
            width: 32px;
            height: 32px;
            background-color: var(--uni-brand-bg);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--uni-brand-text);
            margin-right: 10px;
        }
        .uni-brand-icon-svg svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .uni-brand-img {
            height: 32px;
            width: auto;
            display: block;
            transition: filter 0.3s ease;display:none; 
        }
        /* Dark mode logo inversion - Updated selector for class */
        .uni-theme-dark .uni-brand-img {
            filter: invert(1) brightness(200%);
        }

        /* Social Icons */
        .uni-social-list { display: flex; gap: 16px;display:none; }

        .uni-social-link {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: var(--uni-icon-bg);
            color: var(--uni-icon-color);
            text-decoration: none;
            transition: all 0.2s ease;
        }

        /* Hover Effects */
        .uni-social-link:hover { color: white; }
        .uni-social-link.is-naver:hover { background-color: #03C75A; }
        .uni-social-link.is-blog:hover { background-color: #42d31a; }
        .uni-social-link.is-insta:hover { background-color: #db2777; }
        .uni-social-link.is-youtube:hover { background-color: #dc2626; }
        .uni-social-link.is-facebook:hover { background-color: #2563eb; }
        .uni-social-link.is-kakao:hover { background-color: #FEE500; color: #000; }

        /* SVG Styles - Updated for Solid Icons */
        .uni-svg-icon {
            width: 18px; /* Slightly larger for better visibility */
            height: 18px; 
            transition: all 0.2s ease;
            fill: currentColor; /* Uses text color by default */
        }
        .uni-social-link:hover .uni-svg-icon {
            fill: #fff;
        }
        /* Kakao icon needs black icon on hover usually */
        .uni-social-link.is-kakao:hover .uni-svg-icon {
            fill: #000;
        }

        /* Divider */
        .uni-divider {
            border-top: 1px solid var(--uni-border-color);
            margin: 20px 0;display:none;
        }

        /* Policy Nav */
        .uni-policy-nav {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px 32px;
            margin-bottom: 24px;
        }
        .uni-policy-link {
            font-size: 14px;
            color: var(--uni-text-main);
            text-decoration: none;
            font-weight: 700;
            transition: color 0.2s;
        }
        .uni-policy-link:hover { color: var(--uni-text-main); }
        .uni-policy-link.is-bold { font-weight: 700; color: var(--uni-text-main); }

        /* Info Area - Improved Mobile Gap */
        .uni-info-area {
            text-align: center;
            font-size: 13px;
            color: var(--uni-text-sub);
            line-height: 1.6;font-weight: 600;
            
            /* 핵심 수정: 컨테이너 자체를 flex-col로 만들고 gap을 주어 줄 사이 간격을 통일 */
            display: flex;
            flex-direction: column;
            gap: 6px; 
        }
        .uni-info-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            /* 행 내부 아이템 간격 */
            gap: 6px 4px; 
        }
        .uni-info-item { 
            margin-right: 8px; 
        }
        .uni-info-row > :last-child { margin-right: 0; }

        .uni-info-sep { 
            display: none;
            margin-right: 8px;
            color: var(--uni-border-color);
            opacity: 0.5;
        }
        /* Updated selector for class */
        .uni-theme-dark .uni-info-sep { color: #555; }

        .uni-info-area a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

        /* Bottom Area */
        .uni-footer-bottom {
            margin-top: 32px;
            padding-top: 32px;
            border-top: 1px solid var(--uni-border-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .uni-copyright {
            font-size: 13px;
            color: var(--uni-text-sub);
            opacity: 0.95;
            font-weight: 500;
        }

        /* Family Site */
        .uni-family-container { position: relative;display:none }
        .uni-family-btn {
            display: flex; align-items: center; gap: 4px;
            font-size: 12px;
            color: var(--uni-text-sub);
            background-color: transparent;
            border: 1px solid var(--uni-border-color);
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .uni-family-btn:hover { color: var(--uni-text-main); border-color: var(--uni-text-sub); }
        
        .uni-family-menu {
            position: absolute; bottom: 100%; right: 0;
            margin-bottom: 8px; width: 160px;
            background-color: var(--uni-bg-color);
            border: 1px solid var(--uni-border-color);
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
            overflow: hidden; z-index: 10;
        }
        
        .uni-family-link {
            display: block; padding: 8px 16px;
            font-size: 12px; color: var(--uni-text-sub); text-decoration: none;
        }
        .uni-family-link:hover { 
            background-color: var(--uni-border-color); 
            color: var(--uni-text-main); 
        }

        .uni-hidden { display: none !important; }

        /* Desktop */
        @media (min-width: 768px) {
            .uni-footer-inner { padding: 40px 70px; }
            .uni-footer-top { flex-direction: row; margin-bottom: 40px; }
            .uni-brand-area { margin-bottom: 0; }
            .uni-policy-nav { justify-content: flex-start; }
            .uni-info-area { text-align: left; gap: 4px; } /* 데스크탑에서는 간격 조금 줄임 */
            .uni-info-row { justify-content: flex-start; gap: 0; }
            .uni-info-sep { display: inline; }
            .uni-footer-bottom { flex-direction: row; }





        }




		/*서브페이지*/

.Sub_Left{width:100%;margin:20px 0}
.Sub_Left>dl{
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  position: relative;
  top: 0;
  z-index: 1;
  gap: 0px;}
.Sub_Left>dl>dt{width:300px;}
.Sub_Left>dl>dd{width:calc(100% - 330px);}

     @media (max-width: 1180px) {

	.Sub_Left>dl>dt{width:0px;display:none}
.Sub_Left>dl>dd{width:calc(100% - 0px);}



     }



     @media (max-width: 640px) {


.Last_Center{width:100%;padding:5% 3%;}



     }
	      @media (max-width: 320px) {
 .lux-content {
    padding: 2rem 2rem 14rem 2rem;
  }
				  .lux-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    line-height: 1.25;
  }

    .lux-desc {
    font-size: 0.85rem;
  }

 .hero-text-content h1 {
    font-size: 1.5rem;
  }

  .status-badge {
  display: inline-block;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
  backdrop-filter: blur(4px);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 600;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

 .hero-text-content p {
    font-size: 0.85rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 48px;
    word-break: keep-all;
    font-weight: 600;
  }
 .cs-hero-section {
    position: relative;
    width: 100%;
   min-height: 400px;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
		      }



			     @media (max-width: 350px) {
				 
			html {
    /* 개별 요소가 아닌 html의 기준 사이즈만 80%로 줄입니다. 
       이렇게 하면 rem을 사용한 모든 하위 요소의 폰트가 일괄적으로 예쁘게 80% 비율로 줄어듭니다. */
    font-size: 70%; /* 16px의 80% = 12.8px */
    
    /* 만약 80%가 여전히 작게 느껴진다면 명시적으로 px을 주셔도 됩니다. */
    /* font-size: 13px; */
  }
				 
				 
				 }