@charset "utf-8";

header{position:absolute; top:0; width:100%; min-width:320px; height:80px; background-color:#FFF; z-index:99;}
header .top_align{display:grid; grid-template-columns: 1fr auto 1fr; justify-content:space-between; align-items:center; height: 100%; padding:0 60px;}
header .top_logo{width:140px; height:35px; background:url(../images/common/top_logo_on.png) no-repeat center; background-size:100% auto;}
header .top_logo a{display:block; width:100%; height:100%;}
header .nav_btn, header .nav_close{display:none;}
header .top_util{display:flex; justify-content:flex-end; align-items:center; gap:32px;}
header .top_util .lang a{display:block; line-height:30px; font-size:14px; font-weight:500; color:#185aea;}
header .top_util .family_btn a{display:block; width:150px; height:40px; border-radius:20px; background:linear-gradient(45deg, #00acee 20%, #185aea 80%); text-align: center;}
header .top_util .family_btn p{display:inline-block; line-height:40px; padding-right:25px; background:url(../images/common/family_btn.png) no-repeat right center; background-size:14px; color:#FFF; font-size:16px; font-weight:500;}
header .top_util .family_con{position:fixed; top:0; right:-200%; display:block; width:340px; height:100%;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;}
header .top_util .family_con .family_top{position:relative; width:100%; height:80px; background:linear-gradient(45deg, #00acee 20%, #185aea 80%); z-index:99;}
header .top_util .family_con .family_top p{line-height:80px; padding-left:40px; font-size:20px; color:#FFF; font-weight:500;}
header .top_util .family_con .family_top .close_btn{position:absolute; width:22px; height:22px; top:28px; right:40px;}
header .top_util .family_con .family_top .close_btn a{display:block; width:100%; height:100%; background:url(../images/common/m_nav_close.png) no-repeat center; background-size:100% auto;}
header .top_util .family_con .family_li{position:relative; width:100%; background-color:#FFF; z-index:99;}
header .top_util .family_con .family_li li{padding:20px 40px; border:1px solid #ddd;}
header .top_util .family_con .family_li li a{display:block; width:100%; background:url(../images/main/go_btn.png) no-repeat right center; background-size:14px;}
header .top_util .family_con:after{content:''; position:fixed; width:100%; height:100%; top:0; right:-100%; background-color:#000; opacity:0;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;}
header .top_util .family_con.on{right:0; opacity:1; z-index:100;}
header .top_util .family_con.on:after{opacity:0.7; right:0;}
.gnb .gnb_wrap{display:flex; justify-content: center; align-items: center; gap: 56px;}
.gnb .menu{position:relative;}
.gnb .menu .menu_link{display:block; font-size:18px; font-weight:500; color:#303030; cursor:pointer;letter-spacing: -0.02em;}
.gnb .menu.on .menu_link{color:#1d4ed8;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:0.3s;
	-webkit-transition-duration:0.3s;}
.gnb .menu .menu_arrow{position:relative; padding-right: 20px;}
.gnb .menu .menu_arrow::after{content:''; position:absolute; top:50%; right:0; display:block; width:10px; height:6px; transform:translateY(-50%); background:url(../images/common/mn_arrow.png) no-repeat center; background-size:100% auto;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:0.3s;
	-webkit-transition-duration:0.3s;}
.gnb .menu.on .menu_arrow::after{background:url(../images/common/mn_arrow_on.png) no-repeat center; background-size:100% auto; transform:translateY(-50%) rotate(180deg);}
.gnb .sub_menu{display:none; position:absolute; left:50%; top:32px; transform:translateX(-50%); width:max-content; background-color:#FFF; border:1px solid #e5e5e5; border-radius:8px; box-shadow:16px 16px 24px rgba(0,0,0,0.05);}
.gnb .sub_menu li{
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:0.3s;
	-webkit-transition-duration:0.3s;}
.gnb .sub_menu li dl dt{font-size:16px; font-weight:400; color:#303030;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:0.3s;
	-webkit-transition-duration:0.3s;}
.gnb .sub_menu li dl dd{font-size:14px; color:#64748b; line-height:1.4;}
.gnb .business_sub{padding:16px;}
.gnb .business_sub > ul{display:flex; flex-direction:column; gap:16px;}

.gnb .business_sub li > a{display:flex; align-items:center; gap:16px; padding:8px 16px;}
.gnb .business_sub li .icon{display:flex; justify-content:center; align-items:center; width:32px; height:32px; border-radius:5px;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:0.3s;
	-webkit-transition-duration:0.3s;}
.gnb .business_sub li:nth-child(1) .icon{background:url(../images/common/b_ic01.png) no-repeat center #dbeafe; background-size:18px;}
.gnb .business_sub li:nth-child(2) .icon{background:url(../images/common/b_ic02.png) no-repeat center #e0e7ff; background-size:18px;}
.gnb .business_sub li:nth-child(3) .icon{background:url(../images/common/b_ic03.png) no-repeat center #f3e8ff; background-size:18px;}
.gnb .business_sub li:nth-child(4) .icon{background:url(../images/common/b_ic04.png) no-repeat center #dcfced; background-size:18px;}
.gnb .product_sub{padding:24px 32px;}
.gnb .product_sub .product_sub_wrap{display:flex; gap: 40px; align-items: flex-start;}
.gnb .product_sub .left, .gnb .product_sub .right{display:flex; flex-direction:column; gap:16px;}
.gnb .product_sub .wrap:first-child{border-bottom:1px solid #e5e5e5; padding-bottom:16px;}
.gnb .product_sub .wrap > p{margin-bottom:8px; font-weight:600; color:#64748b;}
.gnb .product_sub .wrap ul{display:flex; flex-direction:column; gap:8px;}
.gnb .product_sub .wrap ul li{display:flex; justify-content:space-between; gap:32px;}
.gnb .product_sub .wrap ul li .out_link{display:block; width:24px; height:24px; background:url(../images/common/link_ic.png) no-repeat center; background-size:12px;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:0.3s;
	-webkit-transition-duration:0.3s;}
@media (hover: hover) {
.gnb .menu .menu_link:hover{color:#1d4ed8;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:0.3s;
	-webkit-transition-duration:0.3s;}
.gnb .menu .menu_arrow:hover::after{background:url(../images/common/mn_arrow_on.png) no-repeat center; background-size:100% auto; transform:translateY(-50%) rotate(180deg);}
.gnb .business_sub li:hover{background-color:#f3f6f9;}
.gnb .product_sub li dl:hover dt{color:#185aea;}
.gnb .product_sub .wrap ul li .out_link:hover{background:url(../images/common/link_ic_on.png) no-repeat center; background-size:12px;}

/* 1. 첫 번째 아이콘 (Blue) */
.gnb .business_sub li:nth-child(1):hover .icon { 
	background: url(../images/common/b_ic01.png) no-repeat center #dbeafe !important; 
	background-size: 32px !important; /* 확대된 아이콘 크기 유지 */
}

/* 2. 두 번째 아이콘 (Indigo) */
.gnb .business_sub li:nth-child(2):hover .icon { 
	background: url(../images/common/b_ic02.png) no-repeat center #e0e7ff !important; 
	background-size: 32px !important; 
}

/* 3. 세 번째 아이콘 (Purple) */
.gnb .business_sub li:nth-child(3):hover .icon { 
	background: url(../images/common/b_ic03.png) no-repeat center #f3e8ff !important; 
	background-size: 32px !important; 
}

/* 4. 네 번째 아이콘 (Mint) */
.gnb .business_sub li:nth-child(4):hover .icon { 
	background: url(../images/common/b_ic04.png) no-repeat center #dcfced !important; 
	background-size: 32px !important; 
}

/*
.gnb .business_sub li:nth-child(1):hover .icon{background:url(../images/common/b_ic01_w.png) no-repeat center #185aea; background-size:18px;}
.gnb .business_sub li:nth-child(2):hover .icon{background:url(../images/common/b_ic02_w.png) no-repeat center #4f46e5; background-size:18px;}
.gnb .business_sub li:nth-child(3):hover .icon{background:url(../images/common/b_ic03_w.png) no-repeat center #9333ea; background-size:18px;}
.gnb .business_sub li:nth-child(4):hover .icon{background:url(../images/common/b_ic04_w.png) no-repeat center #16a369; background-size:18px;}
*/
}

/* =======================================================
   [모바일/태블릿] 1399px 이하 디자인 전면 개편
   - Blue 테마, 투명도 적용, 우측 슬라이드, 아코디언 동작 해결
   ======================================================= */
   @media screen and (max-width:1399px){
    header{height:60px; overflow: visible;} /* overflow hidden 해제 */
    header .top_align{position:relative; padding:0 3%; grid-template-columns:calc(100% - 78px) 1fr 1fr; gap: 16px;}
    header .top_logo{width:120px; height:30px;}
    header .top_util .lang a{width:20px;}
    header .top_util .family_btn{display:none;}
    
    /* 햄버거 버튼 */
    header .nav_btn{display: block; width:26px; height:18px; background:url(../images/common/m_nav_btn.webp) no-repeat; background-size:100% auto; cursor: pointer;}
    
    /* 닫기 버튼 (White로 변경) */
    header .nav_close{display:block; width:22px; height:22px; background:url(../images/common/m_nav_close.webp) no-repeat; background-size:100% auto; margin-bottom:40px; filter: brightness(0) invert(1); cursor: pointer;}
    
    .gnb .family_btn{display:none;}

    /* [요청3 & 4] 모바일 메뉴 컨테이너 (Blue Theme & Glass) */
    .gnb{
        position:fixed; 
        top:0; 
        right:0; /* 오른쪽 정렬 */
        left: auto; /* 기존 left 0 해제 */
        width: 85%; /* 화면의 85%만 차지 (왼쪽 배경 보임) */
        max-width: 400px; /* 너무 넓어지지 않게 제한 */
        height:100vh; 
        transform:translateX(100%); /* 평소에는 오른쪽으로 숨김 */
        
        /* 배경: 블루 + 투명도 + 블러 */
        background-color: rgba(24, 90, 234, 0.75); 
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        
        padding:20px 24px; 
        box-sizing:border-box;
        z-index: 9999;
        
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -10px 0 30px rgba(0,0,0,0.2);
    }
    
    /* 메뉴 열림 상태 */
    .gnb.on{
        transform:translateX(0);
        overflow-y: auto;
    }

    /* [요청3] 왼쪽 여백에 어두운 오버레이 추가 */
    .gnb.on::before {
        content: '';
        position: fixed;
        top: 0;
        right: 100%; /* 메뉴의 왼쪽 */
        width: 100vw; /* 화면 전체 너비만큼 뻗어나감 */
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4); /* 반투명 검정 */
        backdrop-filter: blur(2px);
    }

    .gnb .gnb_wrap{flex-direction:column; align-items:flex-end; gap:0; margin:0;}
    .gnb .menu{width:100%;}
    
    /* [요청4] 1차 메뉴 폰트 (White) */
    .gnb .menu .menu_link{
        font-size:18px; 
        font-weight:700; 
        line-height:56px; 
        color: #fff !important; /* 흰색 강제 */
        border-bottom:1px solid rgba(255, 255, 255, 0.2); /* 은은한 구분선 */
    }
    
    /* 화살표 아이콘 (White로 반전) */
    .gnb .menu .menu_arrow::after{
        width:14px; height:14px;
        filter: brightness(0) invert(1); 
        opacity: 0.8;
    }
    
    /* 열렸을 때 화살표 회전 */
    .gnb .menu.on .menu_arrow::after {
        transform: translateY(-50%) rotate(180deg);
    }

    /* [요청2] 2차 메뉴 동작 해결 (아코디언) */
    .gnb .sub_menu{
        display:none; /* 평소엔 숨김 */
        position:static; 
        transform:none; 
        border:none; 
        box-shadow:none; 
        width:100%;
        
        /* 2차 메뉴 배경 (약간 더 어두운 블루/투명) */
        background-color: rgba(0, 0, 0, 0.1); 
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 10px;
    }
    
    /* 메뉴가 켜지면(.on) 서브메뉴 보임 */
    .gnb .menu.on .sub_menu {
        display: block !important;
    }

    /* 2차 메뉴 텍스트 (White) */
    .gnb .sub_menu li dl dt{
        font-size:16px; 
        color: #fff !important; 
        margin-bottom: 4px;
    }
    .gnb .sub_menu li dl dd{
        font-size:13px; 
        color: rgba(255, 255, 255, 0.7) !important; /* 약간 흐린 흰색 */
        margin-top: 0;
        margin-bottom: 16px;
    }

	/* =========================================
       [모바일] Product 메뉴 3단 아코디언 & Business 스타일
       ========================================= */

    /* 1. Business 메뉴 간소화 (아이콘 숨김) */
    /* 
    .gnb .business_sub li .icon { display: none; } 
    .gnb .business_sub li > a { padding: 0; } 
    */

    /* =========================================
       [모바일 수정] Business 메뉴 스타일 통일 (Product와 동일하게)
       - 배경 반전(깜빡임) 제거, 텍스트 왼쪽 정렬, 구분선 추가
       ========================================= */

    /* Business 컨테이너 패딩 및 정렬 */
    .gnb .business_sub {
        padding: 0 16px !important; /* Product와 좌우 여백 통일 */
        background: none !important; /* 배경색 제거 */
    }
    .gnb .business_sub > ul {
        gap: 0 !important; /* 간격 초기화 (border로 구분) */
        padding: 10px 0 !important;
    }

    /* 리스트 아이템 스타일 (Product의 li와 동일하게) */
    .gnb .business_sub li {
        width: 100% !important;
        background: transparent !important; /* [핵심] 터치 시 배경 하얗게 변하는 반전 제거 */
        border-bottom: 1px solid rgba(255,255,255,0.1) !important; /* 은은한 구분선 */
        padding: 16px 0 !important;
        margin: 0 !important;
        border-radius: 0 !important; /* 둥근 모서리 제거 */
    }
    .gnb .business_sub li:last-child {
        border-bottom: none !important;
    }

    /* 호버/액티브 시에도 배경 투명 유지 (반전 방지) */
    .gnb .business_sub li:hover,
    .gnb .business_sub li:active {
        background-color: transparent !important;
    }
    
    /* 아이콘 숨김 (재확인) */
    .gnb .business_sub li .icon { display: none !important; }

    /* 링크 및 텍스트 정렬 (왼쪽 정렬) */
    .gnb .business_sub li > a {
        padding: 0 !important;
        flex-direction: column !important; /* 세로 배치 */
        align-items: flex-start !important; /* 왼쪽 정렬 */
        text-align: left !important;
        width: 100% !important;
    }

    /*  텍스트 색상 (White Theme) */
    /* 제목 */
    .gnb .business_sub li dl dt {
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        margin-bottom: 6px !important;
        justify-content: flex-start !important; /* Flex 정렬 해제 */
        text-align: left !important;
    }
    /* 설명글 */
    .gnb .business_sub li dl dd {
        color: rgba(255, 255, 255, 0.7) !important; /* Product 설명글과 동일한 반투명 흰색 */
        font-size: 13px !important;
        line-height: 1.4 !important;
        text-align: left !important;
        margin: 0 !important;
        word-break: keep-all !important;
    }

    /* 2. Product 메뉴 컨테이너 레이아웃 재설정 */
    .gnb .product_sub { 
        padding: 10px 16px !important; 
    }
    
    /* 기존 flex 스타일 해제 (세로 배치) */
    .gnb .product_sub .product_sub_wrap { display: block !important; }
    .gnb .product_sub .left, 
    .gnb .product_sub .right { display: contents !important; }

    /* 3. 카테고리(Wrap) 스타일 - 구분선 추가 */
    .gnb .product_sub .wrap {
        border-bottom: 1px solid rgba(255,255,255,0.1); /* 은은한 구분선 */
        padding-bottom: 0 !important; 
        margin-bottom: 0 !important;
    }
    .gnb .product_sub .wrap:first-child { border-bottom: 1px solid rgba(255,255,255,0.1) !important; padding-bottom: 0 !important; }
    .gnb .product_sub .wrap:last-child { border-bottom: none; }

    /* 4. 카테고리 제목 (클릭 버튼 역할) */
    .gnb .product_sub .wrap > p {
        position: relative;
        display: block;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #a5f3fc !important; /* 밝은 하늘색 */
        margin-bottom: 0 !important;
        padding: 15px 0; /* 터치하기 편하게 영역 확보 */
        cursor: pointer;
    }

    /* 5. 화살표 아이콘 추가 (제목 우측) */
    .gnb .product_sub .wrap > p::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        width: 12px;
        height: 12px;
        background: url(../images/common/mn_arrow.png) no-repeat center;
        background-size: 100% auto;
        transform: translateY(-50%);
        filter: brightness(0) invert(1); /* 흰색으로 반전 */
        opacity: 0.6;
        transition: transform 0.3s;
    }

    /* 클릭해서 열렸을 때(.on) 화살표 회전 */
    .gnb .product_sub .wrap > p.on::after {
        transform: translateY(-50%) rotate(180deg);
        opacity: 1;
    }

    /* 6. 상세 메뉴 리스트 (ul) - 초기 상태는 숨김(display: none) */
    .gnb .product_sub .wrap ul {
        display: none; /* [핵심] JS로 클릭 시 slideDown 됨 */
        background-color: rgba(0, 0, 0, 0.15); /* 깊이감을 주는 어두운 배경 */
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        flex-direction: column;
        gap: 16px !important;
    }
    
    /* 7. 상세 메뉴 아이템 스타일 */
    .gnb .product_sub .wrap ul li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        padding-bottom: 12px;
    }
    .gnb .product_sub .wrap ul li:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    .gnb .product_sub .wrap ul li dl dt {
        font-size: 15px !important;
        color: #fff !important;
    }
    .gnb .product_sub .wrap ul li dl dd {
        font-size: 13px !important;
        color: rgba(255,255,255,0.6) !important;
        margin-top: 2px;
    }
    
    /* 아웃링크 아이콘 (White) */
    .gnb .product_sub .wrap ul li .out_link {
        filter: brightness(0) invert(1);
        opacity: 0.7;
    }

}


/* 640px 이상 해상도 */
@media screen and (min-width:640px){
}

/* 860px 이상 해상도 */
@media screen and (min-width:860px){
}

/* 1200px 이상 해상도 */
@media screen and (min-width:1200px){
}


/* =======================================================
   풀와이드 메가 메뉴 최종 완성형 (Premium Glass & UI 개선)
   ======================================================= */
   @media screen and (min-width: 1400px) {

    /* [공통] 상위 엘리먼트 기준점 해제 */
    .top_align .gnb, 
    .gnb .gnb_wrap, 
    .gnb .menu {
      position: static !important; 
    }
  
    /* [요청1 해결] 메가 메뉴 컨테이너: 프리미엄 글래스 효과 */
    .gnb .sub_menu {
      position: absolute !important;
      top: 80px !important;
      left: 0 !important;
      width: 100% !important; 
      transform: none !important; 
      max-width: none !important;      
      border-radius: 0 !important; 
      border: none !important;
      
      /* [핵심] 투명도 0.8로 상향 + 블러 30px로 강화 (더 투명하지만 더 잘 보임) */
      background-color: rgba(255, 255, 255, 0.96) !important;
      backdrop-filter: blur(12px) !important; 
      -webkit-backdrop-filter: blur(12px) !important;
      
      /* 하단 경계선을 아주 은은한 흰색으로 처리하여 유리 질감 강조 */
      border-bottom: 1px solid rgba(229, 231, 235, 0.8) !important;
      
      padding: 50px 0 !important;
      box-shadow: 0 15px 40px rgba(0,0,0,0.06) !important; 
    }
  
    /* =========================================
       [요청2 수정] 아웃링크 아이콘 (이미지 방식 복원 + 크기확대 + 호버효과)
       ========================================= */
    
    /* 1. 기본 상태 */
    .gnb .product_sub .wrap ul li .out_link {
        display: block !important;
        width: 32px !important;  /* 클릭 영역 확대 (기존 24px -> 32px) */
        height: 32px !important;
        
        /* 기존 회색 아이콘 이미지 복원 */
        background: url(../images/common/link_ic.png) no-repeat center !important;
        background-size: 18px !important; /* 아이콘 크기 확대 (기존 12px -> 18px) */
        
        /* 이전 CSS 드로잉 속성 초기화 */
        border: 1px solid transparent !important; 
        border-radius: 50% !important; /* 마우스 오버 시 원형 배경을 위해 */
        
        opacity: 0.4 !important; /* 평소에는 은은하게 처리 (너무 튀지 않도록) */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* 부드러운 애니메이션 */
    }

    /* 2. CSS로 그렸던 가상요소(화살표) 숨김 처리 */
    .gnb .product_sub .wrap ul li .out_link::after {
        display: none !important;
    }

    /* 3. 마우스 오버(Hover) 시 효과 */
    .gnb .product_sub .wrap ul li .out_link:hover {
        /* 파란색 아이콘 이미지로 교체 (이미 서버에 있는 파일 활용) */
        background: url(../images/common/link_ic_on.png) no-repeat center !important;
        background-size: 18px !important; /* 호버 시에도 커진 크기 유지 */
        
        background-color: #eff6ff !important; /* 배경에 아주 연한 파란색 원형 추가 */
        opacity: 1 !important; /* 선명하게 변경 */
        transform: scale(1.15) !important; /* 아이콘이 톡 튀어오르는 느낌 */
        box-shadow: 0 4px 12px rgba(29, 78, 216, 0.15) !important; /* 파란색 그림자 효과 */
    }

    /* =========================================
       [기존 유지] 폰트, 정렬, 레이아웃 스타일
       ========================================= */
    .gnb .sub_menu li dl dt,
    .gnb .product_sub .wrap ul li dl dt {
        font-size: 20px !important; 
        font-weight: 700 !important;
        color: #111 !important;
        min-height: 58px !important; 
        display: flex !important;
        align-items: center !important; 
        border-bottom: 2px solid rgba(0,0,0,0.06) !important; 
        padding-bottom: 15px !important;
        margin-bottom: 15px !important;
    }

    .gnb .sub_menu li dl dd,
    .gnb .product_sub .wrap ul li dl dd {
        font-size: 16px !important; 
        color: #334155 !important; /* 투명 배경 위 가독성을 위해 글자색 미세하게 조정 */
        line-height: 1.6 !important;
        word-break: keep-all !important; 
    }

    /* BUSINESS 스타일 */
    .gnb .business_sub li .icon {
        width: 64px !important;   
        height: 64px !important;
        border-radius: 16px !important;
        background-size: 32px !important; 
        margin-bottom: 20px !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
        background-color: #f8fafc !important; /* 아이콘 배경을 살짝 밝게 */
    }

    .gnb .business_sub > ul {
      flex-direction: row !important; 
      justify-content: center !important;
      align-items: flex-start !important; 
      gap: 50px !important; 
    }
    
    .gnb .business_sub li > a {
      flex-direction: column !important; 
      text-align: center !important;
      align-items: center !important;
      width: 260px !important; 
    }
    
    .gnb .business_sub li dl dt {
        justify-content: center !important;
        text-align: center !important;
    }

    /* PRODUCT 스타일 */
    .gnb .product_sub .left,
    .gnb .product_sub .right {
        display: contents !important; 
    }

    .gnb .product_sub .product_sub_wrap {
      display: flex !important;
      flex-direction: row !important;
      justify-content: center !important;
      gap: 50px !important; 
      max-width: 1400px !important;
      margin: 0 auto !important;
    }

    .gnb .product_sub .wrap {
        width: 260px !important; 
        border-bottom: none !important; 
        padding-bottom: 0 !important;
    }
    
    .gnb .product_sub .wrap > p {
        font-size: 18px !important;
        font-weight: 800 !important;
        color: #2563eb !important; /* 조금 더 선명한 파랑 */
        margin-bottom: 20px !important;
        /*text-transform: uppercase;*/
        letter-spacing: 0.05em;
    }

    .gnb .product_sub .wrap ul {
        gap: 24px !important; 
    }
    
    .gnb .product_sub .wrap ul li dl dt {
        justify-content: flex-start !important;
        text-align: left !important;
        min-height: auto !important; 
        min-height: 40px !important; 
    }
    
    .gnb .product_sub .wrap ul li dl dd {
        margin-top: 5px !important;
    }

	/* =========================================
       [추가 요청] Product 메뉴 아이템 호버 효과 (Business와 통일)
       ========================================= */
    
    /* 1. 리스트 아이템(li)에 여백과 둥근 모서리 추가 (배경색이 찼을 때를 대비) */
    .gnb .product_sub .wrap ul li {
        padding: 12px 16px !important; /* 내부 여백 확보 */
        border-radius: 12px !important; /* Business 메뉴와 유사한 둥근 모서리 */
        transition: all 0.2s ease !important; /* 부드러운 색상 전환 */
        margin: 0 -16px !important; /* 패딩만큼 좌우로 넓혀서 기존 정렬 유지 */
    }

    /* 2. 마우스 오버 시 배경색 변경 (Business와 동일한 연한 회색/블루) */
    .gnb .product_sub .wrap ul li:hover {
        background-color: #f3f6f9 !important; 
    }

    /* 3. 마우스 오버 시 타이틀(Product Title) 색상 파란색 강조 */
    .gnb .product_sub .wrap ul li:hover dl dt {
        color: #1d4ed8 !important; 
    }

    /* 4. 마우스 오버 시 설명글(Description) 색상 진하게 변경 */
    .gnb .product_sub .wrap ul li:hover dl dd {
        color: #334155 !important;
    }	
}

/* =========================================
   [스마트 헤더 최종] 고정 및 애니메이션 효과 
   (PC/모바일 공통 적용 - 파일 맨 아래 위치)
   ========================================= */
   
/* 1. 헤더 기본 속성을 고정(fixed)으로 변경 */
body header.top_nav {
    position: fixed !important; 
    top: 0 !important;
    width: 100% !important;
    /* 부드러운 애니메이션 효과 (내려오고 올라가는 속도 최적화) */
    transition: top 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, background-color 0.3s ease !important; 
    z-index: 9999 !important; 
}

/* 2. 아래로 스크롤 시 헤더 숨김 (화면 위로 100px 밀어냄) */
body header.top_nav.nav_up {
    top: -100px !important; 
}

/* 3. 위로 스크롤 시 헤더 다시 나타남 */
body header.top_nav.nav_down {
    top: 0 !important;
}

/* 4. 스크롤이 최상단에서 조금이라도 내려왔을 때 예쁜 그림자 및 블러 효과 추가 */
body header.top_nav.nav_fixed {
    background-color: rgba(255, 255, 255, 0.98) !important; 
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

/* 5. [모바일 치명적 오류 방어] 
   모바일 햄버거 메뉴가 열려있을 때는 무조건 화면 상단 고정 및 투명화.
   이 코드가 없으면 메뉴를 열어둔 채 스크롤 시 닫기(X) 버튼이 도망갑니다. */
body header.top_nav.menu_open {
    top: 0 !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}