/* --- 로딩 --- */
        :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; }
        }


/*슬라이드*/


     /* === 기본 리셋 === */
        body, html {
     
            scroll-behavior: smooth;
        }

        /* === 2단계: 히어로 섹션 구조 === */
        .welcron-hero-section {
            position: relative; width: 100%; height: 100vh;
            display: flex; align-items: center; color: #ffffff; overflow: hidden;
        }

        /* 배경 이미지 영역 */
        .welcron-hero-bg-wrapper {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
        }
        .welcron-hero-bg-item {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-size: cover; background-position: center;
            opacity: 0; transform: scale(1.05);
            transition: opacity 1.2s ease-in-out, transform 4s linear;
        }
        .welcron-hero-bg-item.active {
            opacity: 1; transform: scale(1);
        }

        /* --- 배경 이미지 설정 (인라인 스타일 대체) --- */
        /* 데스크톱 (기본) */
      
        .welcron-bg-img-1 { background-image: url('../img/Main_Sl_01.png');}
        .welcron-bg-img-2 { background-image: url('../img/Main_Sl_02.png');}
        .welcron-bg-img-3 { background-image: url('../img/Main_Sl_03.png');}
        .welcron-bg-img-4 { background-image: url('../img/Main_Sl_04.png');}

        /* 모바일 (768px 이하) - 세로형(h=1024) 이미지 등으로 교체 가능 */
        @media (max-width: 768px) {
        
        .welcron-bg-img-1 { background-image: url('../img/Main_Slm_01.png');}
        .welcron-bg-img-2 { background-image: url('../img/Main_Slm_02.png');}
        .welcron-bg-img-3 { background-image: url('../img/Main_Slm_03.png');}
        .welcron-bg-img-4 { background-image: url('../img/Main_Slm_04.png');}

        
}

        /* 딤 오버레이 */
        .welcron-hero-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
            z-index: 2;
        }


/* --- 텍스트 콘텐츠 영역 --- */
        .welcron-hero-content-group {
            position: relative; width: 100%; padding-left: 10%; box-sizing: border-box; z-index: 10;
        }

        .welcron-hero-content {
            position: absolute; top: 50%; transform: translateY(-50%);
            width: 100%; pointer-events: none; opacity: 0; visibility: hidden;
            transition: visibility 0s 0.8s;
        }
        /* 활성화된 콘텐츠 블록 */
        .welcron-hero-content.active {
            position: relative; top: auto; transform: none;
            pointer-events: auto; opacity: 1; visibility: visible;
            transition: none;
        }



  /* 모바일 (768px 이하) - 세로형(h=1024) 이미지 등으로 교체 가능 */
        @media (max-width: 768px) {
            .welcron-hero-section {height:75vh}
     
		.welcron-hero-content-group {
  position: relative;
  width: 100%;
  padding-left: 5%;
  box-sizing: border-box;
  z-index: 10;
        }
          .welcron-hero-content {
            position: absolute; top: 20%; transform: translateY(-20%);
            width: 100%; pointer-events: none; opacity: 0; visibility: hidden;
            transition: visibility 0s 0.8s;
        }
}


        /* 순차적 상승 애니메이션 아이템 (기본 대기 상태) */
        .welcron-anim-item {
            opacity: 0;
            transform: translateY(60px);
            transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
            will-change: transform, opacity;
        }

        /* 부모가 active일 때 자식 아이템들이 순서대로 상승 */
        .welcron-hero-content.active .welcron-anim-item {
            opacity: 1;
            transform: translateY(0);
        }


        /* 순차적 상승 애니메이션 아이템 */
        .welcron-anim-item {
            opacity: 0;
            transform: translateY(60px);
            transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
            will-change: transform, opacity;
        }

        .welcron-hero-content.active .welcron-anim-item {
            opacity: 1;
            transform: translateY(0);
        }

        /* 인라인 스타일을 CSS로 분리 (Staggered Delays) */
        .welcron-slider-indicator.welcron-anim-item { transition-delay: 0s; }
        .welcron-hero-subcopy.welcron-anim-item { transition-delay: 0.2s; }
        .welcron-hero-maincopy.welcron-anim-item { transition-delay: 0.4s; }
        .welcron-hero-btn-wrapper.welcron-anim-item { transition-delay: 0.6s; }

        /* 슬라이더 인디케이터 */
        .welcron-slider-indicator {
            display: flex; align-items: center; height: 30px; margin-bottom: 30px;
        }
        .welcron-slide-item-wrapper { display: flex; align-items: center; }
        .welcron-slide-num {
            transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
            letter-spacing: 2px; cursor: pointer;
            font-weight: 300; font-size: 14px; opacity: 0.5;
            margin: 0 8px; color: #ffffff;
        }
        .welcron-line-wrapper {
            width: 0px; height: 2px; background-color: rgba(255, 255, 255, 0.2);
            margin: 0; position: relative; border-radius: 2px; overflow: hidden;
            transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1), margin 0.5s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .welcron-slide-item-wrapper.active .welcron-slide-num { font-weight: 700; font-size: 20px; opacity: 1; margin: 0 5px; }
        .welcron-slide-item-wrapper.active .welcron-line-wrapper { width: 80px; margin: 0 15px; }
        .welcron-line-progress { width: 0%; height: 100%; background-color: #ffffff; }

        .welcron-hero-subcopy { font-size: 35px; margin: 0 0 10px 0; font-weight: 400; letter-spacing: -0.5px; }
        .welcron-hero-maincopy { font-size: 75px; font-weight: 700; margin: 0 0 40px 0; letter-spacing: -1.5px; }
        .welcron-hero-btn-wrapper { display: inline-block; }

        .welcron-hero-btn {
            display: inline-flex; align-items: center; padding: 16px 36px;
            border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 40px;
            color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 500;
            background-color: rgba(255, 255, 255, 0.05); backdrop-filter: blur(4px);
            transition: color 0.4s ease, border-color 0.4s ease;
            position: relative; overflow: hidden; z-index: 1;
        }
        .welcron-hero-btn::before {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-color: #ffffff; transform: translateX(-101%);
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); z-index: -1;
        }
        .welcron-hero-btn:hover { color: #000000 !important; border-color: #ffffff; }
        .welcron-hero-btn:hover::before { transform: translateX(0); }
        
        /* 버튼을 감싸는 래퍼 (스태거 애니메이션 트랜지션 충돌 방지) */
        .welcron-hero-btn-wrapper { display: inline-block; }

        /* 버튼 기본 스타일 및 구조 (position, overflow 추가) */
        .welcron-hero-btn {
            display: inline-flex; align-items: center; padding: 16px 36px;
            border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 40px;
            color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 500;
            background-color: rgba(255, 255, 255, 0.05); backdrop-filter: blur(4px);
            transition: color 0.4s ease, border-color 0.4s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        /* 버튼 호버 시 왼쪽에서 차오르는 배경 (가상 요소) */
        .welcron-hero-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            /* transform을 이용해 왼쪽 밖에 대기시킴 (성능/부드러움 최적화) */
            transform: translateX(-101%);
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            z-index: -1;
        }

        /* 버튼 호버 상태 (글씨색 확실한 반전 및 배경 슬라이드 인) */
        .welcron-hero-btn:hover { color: #000000 !important; border-color: #ffffff; }
        .welcron-hero-btn:hover::before { transform: translateX(0); }

        /* === 3단계: 플로팅 애니메이션 컴포넌트 === */
        
        /* 플로팅 버튼들을 하나로 묶어주는 부모 컨테이너 CSS */
        .welcron-floating-ui-wrapper {
            position: relative;
            z-index: 100;
        }

       
        .welcron-spinning-text-container {
            position: absolute; bottom: 30px; right: 30px;
            width: 200px; height: 200px; z-index: 19;
            transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none;
        }
        .welcron-rotating-svg { width: 100%; height: 100%; animation: welcronSpin 15s linear infinite; }
        .welcron-rotating-text { font-size: 13.5px; font-family: Arial, sans-serif; letter-spacing: 5px; fill: rgba(255, 255, 255, 0.6); }
        @keyframes welcronSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

           body.welcron-is-scrolled .welcron-spinning-text-container { opacity: 0; transform: scale(0.6) rotate(-45deg); }

        /* 비행 버튼이 돌아올 원형 중앙 앵커 */
        .welcron-fab-anchor {
            position: absolute; bottom: 106px; right: 106px; width: 48px; height: 48px;
            pointer-events: none; visibility: hidden; z-index: 10;
        }

        /* 공통 FAB 스타일 */
        .welcron-fab-base {
            width: 52px; height: 52px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            z-index: 100; cursor: pointer; text-decoration: none;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.4s ease, visibility 0.4s ease;
            right: 40px; /* 일자 정렬을 위한 우측 고정값 */box-sizing: border-box; /* 추가됨: 테두리 포함 52px로 크기 통일 */
        }
        .welcron-fab-base:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        }

        /* 비행하는 문의하기 버튼 */
        .welcron-moving-fab {
           position: fixed; 
    width: 48px; height: 48px; 
    background-color: #ffffff; color: #000000; 
    right: auto !important; /* 추가됨: left 애니메이션과 충돌 방지 */
        }
        body.welcron-is-scrolled .welcron-moving-fab {
            background-color: #4285f4; color: #ffffff;
            width: 52px; height: 52px;
            box-shadow: 0 6px 20px rgba(0, 86, 179, 0.3);
        }
        .welcron-icon-initial { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .welcron-moving-fab:hover .welcron-icon-initial { transform: scale(1.1) rotate(-5deg); }

        /* 유튜브 버튼 (수직 정렬: bottom 104px) */
        .welcron-fab-youtube {
            position: fixed;
            bottom: 104px; /* 40 (Top) + 52 (Size) + 12 (Gap) */
            background-color: #ea4335;
            color: #ffffff;
            opacity: 0; visibility: hidden;
            transform: translateY(20px);
        }
        body.welcron-is-scrolled .welcron-fab-youtube {
            opacity: 1; visibility: visible;
            transform: translateY(0);
        }
        /* 유튜브 아이콘 애니메이션 추가 */
        .welcron-fab-youtube svg {
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .welcron-fab-youtube:hover {
            box-shadow: 0 8px 25px rgba(255, 0, 0, 0.4);
        }
        .welcron-fab-youtube:hover svg {
            transform: scale(1.1) rotate(5deg);
        }

      @media (max-width: 992px) {
 .welcron-hero-subcopy { font-size: 22px; margin: 0 0 10px 0; font-weight: 400; letter-spacing: -0.5px; }
        .welcron-hero-maincopy { font-size: 45px; font-weight: 700; margin: 0 0 40px 0; letter-spacing: -1.5px; }
		.welcron-spinning-text-container {
        width: 130px; height: 130px;
        bottom: 20px; right: 20px;
    }
    .welcron-fab-anchor {
        /* 130px 박스의 정중앙 계산: (130/2) - (48/2) + 20 = 65 - 24 + 20 = 61 */
        bottom: 61px; right: 61px;
    }
    .welcron-fab-base {
        right: 20px; /* 수직 정렬 우측 여백 20px로 통일 */
    }
    .welcron-fab-top {
        bottom: 20px;
    }
    .welcron-fab-youtube {
        bottom: 84px; /* 20(Top margin) + 52(Size) + 12(Gap) */
    }
}


      @media (max-width: 325px) {
 .welcron-hero-subcopy { font-size: 18px; margin: 0 0 10px 0; font-weight: 400; letter-spacing: -0.5px; }
        .welcron-hero-maincopy { font-size: 30px; font-weight: 700; margin: 0 0 40px 0; letter-spacing: -1.5px; }
}


 /* 메인 섹션 래퍼 (배경 이미지 및 오버레이) */
        .w-dc-hero-section {
            position: relative;
            width: 100%;
            min-height: auto;
            display: flex;
            align-items: center;
            background-image: url('../img/wdc_bg.jpg'); /* 고층 빌딩 대체 이미지 */
            background-size: cover;
            background-position: center bottom;
            background-attachment: fixed;
            overflow: hidden;
            padding: 100px 20px;
        }

        /* 배경 어두운 필터 (가독성 향상) */
        .w-dc-hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(10, 20, 35, 0.4) 0%, rgba(30, 45, 60, 0.1) 100%);
            z-index: 1;
        }

        /* 콘텐츠 중앙 정렬 컨테이너 */
        .w-dc-container {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 40px;
        }

        /* ============================
           좌측 텍스트 영역
           ============================ */
        .w-dc-text-panel {
            flex: 1;
            max-width: 50%;
            position: relative;
        }

        .w-dc-sub-title {
            font-size: 0.95rem;
            letter-spacing: 0.5em; /* 자간 넓게 */
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 20px;
            text-transform: uppercase;font-weight: 800;
        }

        .w-dc-main-title {
            font-size: 3rem;
            font-weight: 600;
            line-height: 0.75;
            margin-bottom: 30px;
            word-break: keep-all;color:#fff;
        }

        .w-dc-main-title strong {
            font-weight: 900;
            display: block;
            margin-top: 10px;
        }

        .w-dc-description {
            font-size: 1.15rem;
            color: rgba(255, 255, 255, 1);
            margin-bottom: 50px;
            line-height: 1.7;font-weight: 600;
            word-break: keep-all;
        }

        /* 고스트 버튼 디자인 */
        .w-dc-btn-outline {
            display: inline-flex;
            align-items: center;
            padding: 14px 32px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 50px; /* 알약 형태 */
            color: #fff;
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            transition: all 0.3s ease;
            background-color: transparent;
            cursor: pointer;
        }

        .w-dc-btn-outline:hover {
            background-color: #fff;
            color: #111;
            border-color: #fff;
        }

        .w-dc-btn-icon {
            margin-left: 10px;
            font-size: 0.8rem;
            transition: transform 0.3s ease;
        }

        .w-dc-btn-outline:hover .w-dc-btn-icon {
            transform: translateX(5px);
        }

        /* ============================
           중앙 원형 데코레이션 (워터마크)
           ============================ */
        .w-dc-deco-watermark {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            height: 500px;
            z-index: 1;
            opacity: 0.15;
            pointer-events: none; /* 클릭 방해 금지 */
        }

        .w-dc-rotating-svg {
            width: 100%;
            height: 100%;
            animation: w-dc-spin 30s linear infinite;
        }

        .w-dc-deco-text {
            font-family: 'Noto Sans KR', sans-serif;
            font-size: 24px;
            fill: #ffffff;
            letter-spacing: 5px;
        }

        @keyframes w-dc-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* ============================
           우측 카드 영역
           ============================ */
        .w-dc-cards-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 24px; /* 카드 사이 간격 */
            max-width: 50%;
            z-index: 2;
        }

        /* 새로 추가된 우측 비디오 스타일 */
        .w-dc-promo-video {
            width: 100%;
            height: auto;
            max-height: 600px; /* 기존 카드 2개 합친 높이 정도 */
            object-fit: cover;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }

        /* 기존 카드 스타일 주석 처리
        .w-dc-service-card {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            height: 280px;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            text-decoration: none;
            display: block;
        }

        .w-dc-card-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .w-dc-service-card:hover .w-dc-card-bg {
            transform: scale(1.08); 
        }

        .w-dc-card-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, rgba(20, 20, 20, 0.95) 0%, rgba(20, 20, 20, 0.6) 50%, rgba(20, 20, 20, 0.1) 100%);
            z-index: 1;
            transition: background 0.3s ease;
        }

        .w-dc-service-card:hover .w-dc-card-overlay {
            background: linear-gradient(to right, rgba(20, 20, 20, 0.95) 0%, rgba(20, 20, 20, 0.7) 60%, rgba(20, 20, 20, 0.2) 100%);
        }

        .w-dc-card-content {
            position: relative;
            z-index: 2;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 40px;
            max-width: 80%;
        }

        .w-dc-card-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 15px;
        }

        .w-dc-card-desc {
            font-size: 0.95rem;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.6;
            word-break: keep-all;
        }

        .w-dc-bg-ad {
            background-image: url('https://images.unsplash.com/photo-1556761175-5973dc0f32d7?q=80&w=1932&auto=format&fit=crop'); 
        }

        .w-dc-bg-sales {
            background-image: url('https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?q=80&w=2000&auto=format&fit=crop'); 
        }
        */


        /* ============================
           반응형 디자인 (미디어 쿼리)
           ============================ */
        @media (max-width: 992px) {
            .w-dc-container {
                flex-direction: column; /* 세로 배치로 변경 */
                justify-content: center;
                text-align: center;
            }

            .w-dc-text-panel {
                max-width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .w-dc-deco-watermark {
                display: none; /* 모바일/태블릿에서는 워터마크 숨김 */
            }

            .w-dc-cards-panel {
                width: 100%;
                max-width: 800px;
            }

            /* 기존 모바일 카드 스타일 주석 처리
            .w-dc-card-overlay {
                background: linear-gradient(to right, rgba(20, 20, 20, 0.9) 0%, rgba(20, 20, 20, 0.7) 100%); 
            }
            .w-dc-card-content {
                max-width: 100%;
            }
            */
        }

        @media (max-width: 768px) {
            .w-dc-main-title {
                font-size: 1.75rem;
				line-height:1
            }
             /* 기존 모바일 카드 스타일 주석 처리
            .w-dc-service-card {
                height: 240px;
            }
            .w-dc-card-content {
                padding: 30px 20px;
            }
            .w-dc-card-title {
                font-size: 1.5rem;
            }
            */
        }


        /* 메인 컨테이너 레이아웃 */
        .esg-section-container {
            display: flex;
            width: 100%;
            height: 100vh; /* 화면 꽉 차게 설정 */
            min-height: 600px;
            box-sizing: border-box;
        }

        /* ----- 왼쪽 텍스트 영역 ----- */
        .esg-section-left-panel {
            flex: 4; /* 비율 4 */
            background-color: #fff;
            padding: 0 5%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            /* 배경에 희미한 빛 효과 */
            background: radial-gradient(circle at 10% 50%, rgba(240,245,255,1) 0%, rgba(255,255,255,1) 60%);
        }

        .esg-section-label {
            color: #4285f4;
            font-weight: 700;
            font-size: 16px;
            margin-bottom: 20px;
            display: block;
        }

        .esg-section-title {
            font-size: 42px;
            font-weight: 300; /* 얇은 느낌 */
            line-height: 1.3;
            color: #222;
            margin-bottom: 30px;
            word-break: keep-all; /* 한글 줄바꿈 방지 */
        }

        .esg-section-title strong {
            font-weight: 700; /* 굵은 부분 강조 */
        }

        .esg-section-desc {
            font-size: 16px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 50px;
            word-break: keep-all;
        }

        /* 버튼 스타일 */
        .esg-section-btn-group {
            display: flex;
            flex-direction: column; /* 세로 배치 */
            gap: 15px;
            width: fit-content;
        }

        .esg-section-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #4285f4;
            color: white;
            text-decoration: none;
            padding: 15px 30px;
            border-radius: 50px; /* 캡슐 모양 */
            font-size: 15px;
            font-weight: 500;
            width: 220px;
            transition: background-color 0.3s, transform 0.2s;
            box-shadow: 0 4px 6px rgba(0, 86, 179, 0.2);
        }

        .esg-section-btn:hover {
            background-color: #4285f4;
            transform: translateY(-2px);
        }

        .esg-section-btn span {
            font-size: 18px;
        }

        /* ----- 오른쪽 이미지 영역 (3단 컬럼) ----- */
        .esg-section-right-panel {
            flex: 6; /* 비율 6 */
            display: flex;
        }
		.esg-section-right-panel>div{cursor:pointer}
        .esg-section-card {
            flex: 1; /* 3개 균등 분할 */
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-end; /* 텍스트 하단 정렬 */
            padding: 40px;
            color: white;
            transition: flex 0.5s ease;
            cursor: default;
            box-sizing: border-box;
        }
        
        /* 호버 시 해당 섹션이 넓어지는 효과 */
        .esg-section-right-panel:hover .esg-section-card {
            flex: 1;
        }
        .esg-section-right-panel .esg-section-card:hover {
            flex: 1.5;
        }

        /* 배경 이미지 오버레이 (텍스트 가독성을 위해 어둡게 처리) */
        .esg-section-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 100%);
            z-index: 1;
            transition: background 0.3s;
        }
        
        .esg-section-card:hover::after {
            background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.85) 100%);
        }

        /* 각 섹션별 배경 이미지 및 식별 클래스 */
        .esg-card-env {
            background: url('../img/Esg_1.png') center/cover no-repeat;
        }
        .esg-card-social {
            background: url('../img/Esg_2.png') center/cover no-repeat;
        }
        .esg-card-gov {
             background: url('../img/Esg_3.png') center/cover no-repeat;
        }

        /* 배경의 거대한 알파벳 (E, S, G) */
        .esg-section-card::before {
            position: absolute;
            top: 5%;
            right: -20px;
            font-size: 280px;
            font-weight: 900;
            color: rgba(255, 255, 255, 0.15); /* 투명도 조절 */
            line-height: 1;
            z-index: 1;
      
            pointer-events: none;
            transition: transform 0.5s ease;
        }
        
        .esg-section-card:hover::before {
            transform: translateX(-10px) scale(1.05);
            color: rgba(255, 255, 255, 0.25);
        }

        .esg-card-env::before { content: ''; }
        .esg-card-social::before { content: ''; }
        .esg-card-gov::before { content: ''; right: -10px; }

        /* 카드 내부 텍스트 콘텐츠 */
        .esg-card-content {
            position: relative;
            z-index: 2; /* 오버레이보다 위에 */
            transform: translateY(0);
            transition: transform 0.3s ease;
        }
        
        .esg-section-card:hover .esg-card-content {
            transform: translateY(-10px);
        }

        .esg-card-title {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 5px;
            margin-top: 0;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .esg-card-eng-subtitle {
            display: block;
            font-size: 14px;
            color: #4285f4; /* 옅은 파란색 강조 */
            font-weight: 700;
            margin-bottom: 20px;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }

        .esg-card-list {
            list-style: none;
            padding-left: 5px;
            margin: 0;
            border-left: 3px solid rgba(255,255,255,0.5);
        }

        .esg-card-list li {
            font-size: 15px;
            margin-bottom: 8px;
            opacity: 0.95;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            font-weight: 500;color:#fff;
        }

        /* 반응형 처리: 모바일에서는 세로로 쌓이게 */
        @media (max-width: 1024px) {
            .esg-section-container {
                flex-direction: column;
                height: auto;
            }
            .esg-section-left-panel {
                padding: 80px 30px;
                background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            }
            .esg-section-title {
                font-size: 32px;
            }
            .esg-section-right-panel {
                flex-direction: column;
            }
            .esg-section-card {
                height: 350px; /* 모바일에서의 높이 */
                padding: 60px;
                border-bottom: 0px solid rgba(255,255,255,0);
            }
            .esg-section-card::before {
                font-size: 180px;
                top: 20px;
                right: 10px;
            }
            .esg-section-btn {
                width: 100%;
                max-width: 300px;
            }

			  /* 각 섹션별 배경 이미지 및 식별 클래스 */
        .esg-card-env {
            background: url('../img/Esg_1.png') top/cover no-repeat;
        }
        .esg-card-social {
            background: url('../img/Esg_2.png') center/cover no-repeat;
        }
        .esg-card-gov {
             background: url('../img/Esg_3.png') bottom/cover no-repeat;
        }


        }
  @media (max-width: 480px) {

 .esg-section-title {
    font-size: 25px;
  }

.esg-section-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 50px;
  word-break: keep-all;
}

.esg-card-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 5px;
  margin-top: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.esg-card-eng-subtitle {
  display: block;
  font-size: 12px;
  color: #4285f4;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

        }
 /* --- Keyframes --- */
 /* --- Keyframes --- */
        @keyframes wipe-in {
            0% { 
                -webkit-clip-path: inset(0 100% 0 0);
                clip-path: inset(0 100% 0 0); 
            }
            100% { 
                -webkit-clip-path: inset(0 0 0 0);
                clip-path: inset(0 0 0 0); 
            }
        }

        @keyframes fade-up {
            0% { opacity: 0; transform: translateY(30px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        @keyframes expand-width {
            0% { width: 0; }
            100% { width: 100%; }
        }

        /* --- Banner Area --- */
        .ir-banner {
            position: relative;
            width: 100%;
            height: 720px;
            background-image: url('../img/bottom_bg.jpg');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            
            /* 초기 상태: 안 보임 */
            -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0); 
        }

        /* 애니메이션 실행 클래스 */
        .ir-banner.active {
            animation: wipe-in 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
        }

        .ir-banner::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.25));
            z-index: 1;
        }

        /* --- Layout Container --- */
        .ir-container {
            position: relative;
            z-index: 2;
            width: 100%;
        
            padding: 0 40px;
            padding-bottom: 40px; 
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* --- Top Section --- */
        .ir-top-section {
            display: flex;
            flex-direction: row; 
            align-items: flex-start;
            padding-bottom: 130px;
            opacity: 0; 
        }

        .ir-banner.active .ir-top-section {
            animation: fade-up 0.8s ease-out 0.8s forwards;
        }

        .ir-category {
            font-size: 15px;
            font-weight: 700;
            color: #fff;
            letter-spacing: 1px;
            margin-right: 40px;
            margin-top: 15px;
            white-space: nowrap;
        }

        .ir-text-content {
            display: flex;
            flex-direction: column;
        }

        .ir-main-title {
            font-size: 50px; 
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .ir-description {
            font-size: 17px;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
        }

        /* --- Divider Line --- */
        .ir-divider-line {
            width: 0; 
            height: 1px;
            background-color: #4285f4;
            margin: 0;
            border: none;
            box-shadow: 0 0 10px rgba(0, 144, 255, 0.5);
            /* Firefox 호환성: Flex item에서 width 애니메이션이 작동하도록 설정 */
            align-self: flex-start;
			display:block !important;
        }

        .ir-banner.active .ir-divider-line {
            animation: expand-width 1.0s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards;
        }

        /* --- Bottom Section --- */
        .ir-bottom-section {
            display: flex;
            justify-content: flex-end; 
            padding-top: 50px; 
            gap: 30px; 
        }

        .ir-link-item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            color: #fff;
            width: 300px;
            transition: opacity 0.3s;
            position: relative;
            opacity: 0; 
        }

        .ir-banner.active .ir-link-item:nth-child(1) {
            animation: fade-up 0.6s ease-out 1.8s forwards;
        }

        .ir-banner.active .ir-link-item:nth-child(2) {
            animation: fade-up 0.6s ease-out 2.1s forwards;
        }

        .ir-link-item::before {
            content: '';
            position: absolute;
            top: -56px; 
            left: 0;
            width: 12px;
            height: 12px;
            background-color: #4285f4; 
            border-radius: 50%;
            box-shadow: 0 0 8px rgba(0, 144, 255, 0.8);
        }

        .ir-link-item:hover {
            opacity: 0.8 !important;
        }

        .ir-link-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .ir-link-desc {
            font-size: 15px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 1.6;
            margin-bottom: 30px;
            min-height: 48px;
        }

        .ir-link-action {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #fff;
            gap: 15px;
        }

        .ir-arrow-svg {
            width: 45px;
            height: 12px;
            fill: none;
            stroke: #fff;
            stroke-width: 1;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            overflow: visible;
        }

        .ir-link-item:hover .ir-arrow-svg {
            transform: translateX(10px);
        }

        /* --- Responsive (Mobile Fix) --- */
        @media (max-width: 1024px) {
            .ir-main-title { font-size: 42px; }
            .ir-bottom-section { gap: 40px; }
        }

        @media (max-width: 768px) {
            .ir-banner { 
                height: auto; 
                padding: 80px 0;
                -webkit-clip-path: none !important;
                clip-path: none !important; 
                animation: none !important; 
            }
            
            .ir-container { padding: 0 20px; padding-bottom: 0; }
            
            .ir-top-section { 
                flex-direction: column; 
                padding-bottom: 60px;
                opacity: 1 !important; 
                animation: none !important;
            }

            .ir-divider-line {
                width: 100% !important; 
                animation: none !important;
            }

            .ir-link-item { 
                width: 100%; 
                opacity: 1 !important; 
                animation: none !important;
            }

            .ir-category { margin-right: 0; margin-bottom: 20px; margin-top: 0; }
            
            .ir-main-title { font-size: 25px; }
            .ir-description { font-size: 15px; }

            .ir-bottom-section {
                flex-direction: column;
                align-items: flex-start;
                margin-top: 0;
                padding-top: 50px;
                gap: 50px;
            }
			.ir-link-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
}


            .ir-link-item::before { display: none; }
        }

.Last_Section{width:100%;padding:3% 0%}






   @media (max-width: 548px) {
   
.Last_Section{width:100%;padding:5% 2%}


   }


@media all and (min-width:900px) and (max-width:1410px) {

.subinfo{width:100% !important}
		 }




        /* =========================================
           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: flex-start;
            margin-bottom: 20px;display:block
        }

        .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;; }

        .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: #ea4335; }
        .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; */
  }
				 
				 
				 }






				 /*갤탭*/
/* -----------------------------------
   세로 모드 (Portrait)
   가로 너비가 924px 이하일 때 적용
----------------------------------- */
				 @media screen and (max-width: 924px) {
 
}

/* -----------------------------------
   가로 모드 (Landscape)
   가로 너비가 925px 이상 1480px 이하일 때 적용
----------------------------------- */
@media screen and (min-width: 925px) and (max-width: 1480px) {
  
}