@charset "utf-8";
/*=========================================================
    GSF SOLUTION 
    디자인 방향
    - 배경 화이트 + 딥네이비 포인트, 무난하고 신뢰감 있는 기업 톤
    - 폰트는 Pretendard 하나로 통일 (라벨/제목 모두)
    - 큰 모니터에서도 콘텐츠 폭이 뷰포트에 비례해 넉넉히 넓어짐
    - 장식적인 요소(각진 노치, 모노스페이스 라벨 등)는 최소화
=========================================================*/

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

/****************************************************
    0. DESIGN TOKENS
****************************************************/
:root{
    /* navy scale */
    --navy-950:#081527;
    --navy-900:#0B2A56;
    --navy-800:#0F396F;
    --navy-700:#155EAE;
    --navy-600:#1E72CC;
    --navy-accent:#2C86E8;
    --navy-200:#C7DAF4;
    --navy-100:#E7F0FB;
    --navy-050:#F4F8FD;

    /* neutrals */
    --ink:#111C2D;
    --sub:#5B6B84;
    --line:#E4EAF2;
    --lineb:#78a8e7;
    --white:#FFFFFF;

    /* type */
    --f-body:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;

    /* layout — 큰 모니터일수록 콘텐츠 폭도 함께 넓어지도록 뷰포트 비례로 설정 */
    --header-h:88px;
    --header-h-scrolled:70px;
    --header-h-mobile:64px;
    --container:min(1720px, 92vw);
    --radius:16px;
    --radius-sm:12px;
    --shadow-sm:0 10px 30px rgba(11,42,86,.06);
    --shadow-md:0 24px 60px rgba(11,42,86,.12);
    --shadow-lg:0 40px 90px rgba(11,42,86,.18);
    --ease:cubic-bezier(.4,0,.2,1);

    /* 유동 타이포 스케일 — 뷰포트에 비례해 커지되, 3840px(4K/TV) 대응 상한을 넉넉히 둠 */
    --fs-3xl:clamp(36px, 2.8vw + 30px, 110px);   /* 히어로 헤드라인 */
    --fs-hero-sub:clamp(17px, .6vw + 15px, 29px);/* 히어로 서브 텍스트 */
    --fs-quote:clamp(21px, .65vw + 18px, 42px);  /* Trusted by 인용문 */
    --fs-2xl:clamp(21px, .6vw + 19px, 36px);     /* 카드/섹션 제목 */
    --fs-xl:clamp(18px, .4vw + 15px, 27px);
    --fs-lg:clamp(16px, .3vw + 14px, 21px);      /* 내비게이션, 강조 본문 */
    --fs-base:clamp(15px, .2vw + 13px, 19px);    /* 본문 */
    --fs-sm:clamp(13px, .12vw + 12px, 16px);     /* 라벨, 푸터 */
    --fs-label:clamp(12.5px, .15vw + 11.5px, 17px); /* 섹션 라벨 */
}

/****************************************************
    1. RESET / BASE
****************************************************/
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);}
html.fullpage-html,body{height:auto;}

body{
    background:var(--white);
    color:var(--ink);
    font-family:var(--f-body);
    font-size:clamp(16px, .12vw + 15.4px, 18px);
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    word-break:keep-all;
    overflow-x:hidden;
}
body.active{overflow:hidden;}

ul{list-style:none;}
img{max-width:100%;vertical-align:middle;border:0;}
a{color:inherit;text-decoration:none;transition:.3s var(--ease);}
button{cursor:pointer;font-family:inherit;border:none;background:none;}
input,textarea{font-family:inherit;outline:none;appearance:none;-webkit-appearance:none;}
i{transition:.3s var(--ease);font-style:normal;}
video{display:block;}
iframe{border:0;display:block;}

::selection{background:var(--navy-700);color:#fff;}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--navy-050);}
::-webkit-scrollbar-thumb{background:var(--navy-200);border-radius:50px;}
::-webkit-scrollbar-thumb:hover{background:var(--navy-700);}

.blind{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.clearfix:after{content:"";display:block;clear:both;}

.area-box{
    position:relative;
    width:100%;
    max-width:var(--container);
    margin:0 auto;
    padding:0 clamp(20px, 2.4vw, 56px);
}

.cm-accessibility a{
    position:absolute;left:50%;top:-80px;transform:translateX(-50%);
    z-index:2000;padding:14px 26px;background:var(--navy-950);color:#fff;
    font-size:14px;font-weight:700;border-radius:0 0 10px 10px;
    transition:top .25s var(--ease);
}
.cm-accessibility a:focus{top:0;}

/* 섹션 공용 라벨 */
#mainQuickMenu h4,
#mainValues h4,
#mainNews h4{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:46px;
    font-family:var(--f-body);
    font-size:var(--fs-label);
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--navy-700);
}
#mainQuickMenu h4:before,
#mainValues h4:before,
#mainNews h4:before{
    content:"";
    width:22px;height:3px;
    border-radius:2px;
    background:var(--navy-700);
}
#mainNews h4 + h4{margin-top:80px;}

/****************************************************
    2. HEADER — 좌/중/우 3열 그리드로 완전 대칭
****************************************************/
#header{
    position:fixed;
    left:0;top:0;
    width:100%;
    height:var(--header-h);
    z-index:999;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(228,234,242,0);
    transition:height .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
#header.active{
    height:var(--header-h-scrolled);
    background:rgba(255,255,255,.98);
    border-bottom-color:var(--line);
    box-shadow:var(--shadow-sm);
}

#headerInnerWrap{height:100%;}
#headerInner{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.logo{line-height:0;}
.logo a{display:inline-flex;align-items:center;}
.logo img{height:32px;transition:height .3s var(--ease);}
#header.active .logo img{height:27px;}

/*
  주의: nav#gnb는 마크업상 #headerInner의 자식이 아니라 #header 바로
  아래의 형제 요소입니다. 그래서 #headerInner를 grid로 만들어도 #gnb에는
  적용되지 않고, 그냥 다음 줄로 흘러내려가 버립니다(= 메뉴가 아래로 빠지는 버그).
  #header 자신이 position:fixed로 이미 위치 기준점이므로, #gnb를 여기에
  절대좌표로 중앙 정렬해서 로고/유틸과 같은 한 줄에 겹치게 배치합니다.
*/
#gnb{
    position:absolute;
    left:50%;top:0;
    transform:translateX(-50%);
    height:100%;
    display:flex;
    align-items:center;
    z-index:2;
}
#gnb > ul.area{
    display:flex;
    align-items:center;
    height:100%;
    gap:52px;
}
#gnb > ul.area > li{position:relative;height:100%;display:flex;align-items:center;}
#gnb > ul.area > li > a{
    position:relative;
    display:block;
    font-size:var(--fs-lg);
    font-weight:700;
    letter-spacing:.2px;
    color:var(--ink);
}
#gnb > ul.area > li > a:after{
    content:"";
    position:absolute;
    left:50%;bottom:-4px;
    width:0;height:2px;
    background:var(--navy-700);
    transform:translateX(-50%);
    transition:width .3s var(--ease);
}
#gnb > ul.area > li:hover > a,
#gnb > ul.area > li > a.active{color:var(--navy-700);}
#gnb > ul.area > li:hover > a:after,
#gnb > ul.area > li > a.active:after{width:100%;}

.gnb-2dep{
    position:absolute;
    left:50%;top:100%;
    transform:translateX(-50%);
    min-width:168px;
    padding:14px 0 12px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:var(--shadow-md);
    /*
      애니메이션(오프닝 트랜지션)을 완전히 없앴습니다. 이전엔 scaleY로
      커지는 도중에 마우스가 그보다 빠르게 아래로 이동하면, 아직 다 안 커진
      드롭다운 바깥으로 마우스가 빠져나가 닫혀버리는 문제가 있었습니다.
      display:none/block 으로 즉시 전환 = 열리는 순간 이미 100% 크기라서
      그런 "경주 상태"가 원천적으로 생기지 않습니다.
      대신 표시 여부는 오직 JS가 붙이는 .open 클래스로만 제어합니다
      (:hover 규칙은 제거 — 판단 기준을 하나로 통일해서 서로 충돌하지 않게 함).
    */
    display:none;
}
#gnb > ul.area > li:hover .gnb-2dep,
#gnb > ul.area > li.open .gnb-2dep{display:block;}
.gnb-2dep ul li a{
    display:block;padding:12px 22px;font-size:13.5px;font-weight:600;
    color:var(--sub);text-align:center;white-space:nowrap;
}
.gnb-2dep ul li a:hover{color:var(--navy-700);background:var(--navy-050);}

/* 우측 유틸 */
.header-util-box{display:flex;align-items:center;gap:12px;}
.header-lang-list ul{
    display:flex;align-items:center;padding:4px;
    background:var(--navy-050);border-radius:30px;
}
.header-lang-list li a{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:48px;height:30px;padding:0 12px;border-radius:26px;
    font-family:var(--f-body);font-size:12px;font-weight:700;color:var(--sub);
}
.header-lang-list li.cur a{background:var(--navy-700);color:#fff;box-shadow:0 8px 16px rgba(21,94,174,.28);}
.header-lang-list li:not(.cur) a:hover{color:var(--navy-700);}

.sitemap-line-btn{
	  /* 추가 display: none;  display:flex; */
     display:flex;
	align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:50%;
    border:1px solid var(--line);color:var(--navy-700);font-size:15px;flex-shrink:0;
}
.sitemap-line-btn:hover{background:var(--navy-700);border-color:var(--navy-700);color:#fff;}

/* 모바일 햄버거 : header가 positioning context이므로 절대좌표로 항상 우측 정렬 */
.nav-open-btn.open-btn{
    display:none;
    position:absolute;right:16px;top:0;
    height:var(--header-h-mobile);width:40px;
    align-items:center;justify-content:center;
    color:var(--navy-950);font-size:19px;
}

/****************************************************
    3. 모바일 전체화면 메뉴 (#gnbM)
    — 사이드 드로어가 아니라 풀스크린 오버레이로 확실하게
****************************************************/
.gnb-overlay-bg,
.gnb-overlay-bg-m{display:none;}

#gnbM{
    position:fixed;
    inset:0;
    width:100%;
    height:100dvh;
    z-index:1000;
    background:var(--navy-950);
    color:#fff;
    display:flex;
    flex-direction:column;
    opacity:0;
    visibility:hidden;
    transform:translateY(-12px);
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}
body.active #gnbM{opacity:1;visibility:visible;transform:translateY(0);}

.nav-open-btn.close-btn{
    position:sticky;
    top:0;left:100%;
    margin:18px 18px 0 auto;
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:50%;
    border:1px solid rgba(255,255,255,.2);
    flex-shrink:0;
}
.nav-open-btn.close-btn .line{
    position:absolute;left:50%;top:50%;width:18px;height:2px;background:#fff;transform-origin:center;
}
.nav-open-btn.close-btn .line1{transform:translate(-50%,-50%) rotate(45deg);}
.nav-open-btn.close-btn .line2{opacity:0;}
.nav-open-btn.close-btn .line3{transform:translate(-50%,-50%) rotate(-45deg);}

.gnb-navigation-wrapper{
    flex:1;
    display:flex;
    align-items:center;
    padding:10px 44px 60px;
}
.gnb-navigation-inner{width:100%;}

#navigation{display:flex;flex-direction:column;}
#navigation > li{border-bottom:1px solid rgba(255,255,255,.1);}
#navigation > li > a{
    display:block;padding:20px 2px;font-size:22px;font-weight:800;
    letter-spacing:-.3px;color:#fff;
}
#navigation > li > a:hover,
#navigation > li > a.active{color:var(--navy-200);}
#navigation .gnb-2dep{
    position:static;transform:none;opacity:1;visibility:visible;
    min-width:0;padding:0 0 18px 4px;background:transparent;border:none;box-shadow:none;
}
#navigation .gnb-2dep ul{display:flex;flex-wrap:wrap;gap:10px;}
#navigation .gnb-2dep ul li a{
    display:inline-block;padding:8px 16px;border-radius:30px;
    background:rgba(255,255,255,.07);
    font-family:var(--f-body);font-size:12.5px;font-weight:600;
    color:rgba(255,255,255,.72);text-align:left;
}
#navigation .gnb-2dep ul li a:hover{background:var(--navy-700);color:#fff;}

/****************************************************
    4. HERO / MAIN VISUAL — 영상은 밝게, 텍스트만 또렷하게
****************************************************/
#mainVisual{
    position:relative;
    height:100vh;
    height:100dvh; /* 모바일 브라우저 주소창 유무와 무관하게 실제 보이는 높이에 맞춤 */
    min-height:480px;
    background:var(--navy-950);
    overflow:hidden;
}
.background-video-wrapper{position:relative;width:100%;height:100%;overflow:hidden;}
.background-video{position:absolute;inset:0;}
.background-video #player{position:absolute;inset:0;}
#visualVideo{
    position:absolute;
    left:50%;top:50%;
    min-width:100%;min-height:100%;
    width:auto;height:auto;
    transform:translate(-50%,-50%);
    object-fit:cover;
    /* 예전보다 훨씬 밝게 — 영상 자체가 잘 보이도록 */
    filter:saturate(1.05) brightness(.92) contrast(1.02);
}
/* 좌측 텍스트 구간만 살짝 어둡게, 우측은 영상이 그대로 보이도록 */
.background-video-wrapper:before{
    content:"";
    position:absolute;inset:0;
    z-index:1;
    background:linear-gradient(100deg,
        rgba(4,12,26,.72) 0%,
        rgba(4,12,26,.46) 32%,
        rgba(4,12,26,.12) 58%,
        rgba(4,12,26,0) 74%);
}
/* 하단은 다음 섹션(화이트)으로 자연스럽게 이어지도록 페이드 */
.background-video-wrapper:after{
    content:"";
    position:absolute;left:0;right:0;bottom:0;
    height:180px;
    z-index:1;
    background:linear-gradient(180deg,rgba(4,12,26,0),rgba(4,12,26,.55));
    pointer-events:none;
}

.main-visual-txt-con{
    position:relative;
    z-index:5;
    display:flex;
    align-items:center;
    height:100%;
    padding-top:var(--header-h);
}
.main-visual-txt-inner{
/*max-width:760px;*/
max-width:70%;
color:#fff;}
.main-visual-txt1{
    display:block;
    margin-bottom:24px;
    font-size:var(--fs-3xl);
    line-height:1.2;
    font-weight:800;
    letter-spacing:-1.5px;
    text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.main-visual-txt2{
    font-size:var(--fs-hero-sub);
    line-height:1.9;
    color:rgba(255,255,255,.86);
    text-shadow:0 2px 16px rgba(0,0,0,.3);
}

/* 히어로 하단 스크롤 힌트 */
#mainVisual .background-video-wrapper .main-visual-txt-con:after{
    content:"";
}

/****************************************************
    5. MAIN QUICK MENU
****************************************************/
#mainQuickMenu{padding:140px 0 150px;background:var(--white);}
/* h4 라벨 바로 아래 들어가는 섹션 소개 문단 */
#mainQuickMenu > .area-box > p{
    max-width:760px;
    margin:-20px 0 50px;
    font-size:var(--fs-base);
    color:var(--sub);
    line-height:1.9;
}
.main-quickmenu-box ul{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
	 line-height:3.75;
}
.main-quickmenu-box li{
    position:relative;
    background:#fff;
    border:1px solid var(--lineb);
    border-radius:var(--radius);
    transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.main-quickmenu-box li:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
    border-color:var(--navy-200);
}
.main-quickmenu-box li a{display:block;padding:40px 30px 36px;}
.main-quickmenu-box i{
    display:inline-flex;align-items:center;justify-content:center;
    width:60px;height:60px;margin-bottom:24px;
    border-radius:16px;background:var(--navy-100);color:var(--navy-700);
    font-size:25px !important;
}
.main-quickmenu-box li:hover i{background:var(--navy-700);color:#fff;}
.our_tit{margin-bottom:12px;font-size:var(--fs-lg);font-weight:800;color:var(--navy-950);}
.our_txt{font-size:var(--fs-sm);color:var(--sub);line-height:1.85;white-space:pre-line;}

/****************************************************
    6. MAIN VALUES — Trusted by (경량 슬라이더)
****************************************************/
#mainValues{padding:0 0 150px;background:var(--white);}
.esg_manage{position:relative;}
.swiper-container{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
    background:var(--navy-950);
}
.swiper-wrapper{position:relative;display:block;min-height:300px;}
.swiper-slide{
    display:none;
    animation:fadeSlide .5s var(--ease);
}
.swiper-slide.active{display:block;}
@keyframes fadeSlide{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.txt_wrap{
    position:relative;
    padding:68px 64px 68px 72px;
    color:#fff;
}
.txt_wrap:before{
    content:"";
    position:absolute;
    left:0;top:68px;bottom:68px;
    width:4px;
    border-radius:3px;
    background:var(--navy-600);
}
.tit_box{position:relative;margin-bottom:20px;}
.tit_box .tit{
    display:block;font-size:var(--fs-quote);line-height:1.5;font-weight:800;
    white-space:pre-line;max-width:760px;
}
.desc{position:relative;}
.desc p{max-width:720px;font-size:var(--fs-base);color:rgba(255,255,255,.68);line-height:1.9;}
.btn_more{
    position:relative;
    display:inline-flex;align-items:center;justify-content:center;
    width:48px;height:48px;margin-top:26px;border-radius:50%;
    border:1px solid rgba(255,255,255,.25);color:#fff;
}
.btn_more:after{content:"\2192";font-size:17px;}
.btn_more:hover{background:var(--navy-700);border-color:var(--navy-700);}

.esg-dots{
    display:flex;justify-content:center;gap:9px;margin-top:22px;
}
.esg-dots button{
    width:9px;height:9px;border-radius:50%;
    background:var(--line);transition:.3s var(--ease);
}
.esg-dots button.active{width:26px;border-radius:6px;background:var(--navy-700);}

/****************************************************
    7. MAIN NEWS — Resources / Customers & Partners
****************************************************/
#mainNews{padding:0 0 150px;background:var(--white);}
.news_inner{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:36px;
    margin-bottom:110px;
}
.left_news ul{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.left_news iframe{
    width:100%;aspect-ratio:16/9;height:auto;
    border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-sm);
}
.right_news ul{display:flex;flex-direction:column;height:100%;border-top:1px solid var(--line);}
.right_news li{border-bottom:1px solid var(--line);}
.right_news li a{display:flex;align-items:center;min-height:74px;padding:0 4px;}
.news_txt{
    position:relative;padding-left:20px;font-size:var(--fs-base);font-weight:600;
    color:var(--ink);line-height:1.6;
}
.news_txt:before{
    content:"";position:absolute;left:0;top:8px;
    width:6px;height:6px;border-radius:50%;background:var(--navy-700);
}
.right_news li a:hover .news_txt{color:var(--navy-700);}

/* 파트너 로고 — 실시간 롤링 배너 (JS가 리스트를 복제해 이어붙임) */
.main-news-box{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 60px,#000 calc(100% - 60px),transparent);mask-image:linear-gradient(90deg,transparent,#000 60px,#000 calc(100% - 60px),transparent);}
.arrow-box{display:none;}
.main-news-list{
    display:flex;
    align-items:center;
    gap:64px;
    width:max-content;
    padding:22px 0;
    /* --marquee-distance는 26script.js가 이미지 로드 완료 후 실제 픽셀
       폭을 측정해서 채워줌. 아직 계산 전(스크립트 로드 전)에는 -50%로 폴백 */
    --marquee-distance:-50%;
    animation:marquee 28s linear infinite;
}
.main-news-box:hover .main-news-list{animation-play-state:paused;}
@keyframes marquee{
    from{transform:translateX(0);}
    to{transform:translateX(var(--marquee-distance));}
}
.main-news-list li{flex:0 0 auto;height:40px;display:flex;align-items:center;}
.main-news-list img{
    max-height:100%;width:auto;
    filter:grayscale(100%) opacity(.5);
    transition:filter .3s var(--ease);
}
.main-news-list li:hover img{filter:none;}

/****************************************************
    8. FOOTER
****************************************************/
#mainFooter{background:var(--navy-950);}
#footer{position:relative;color:rgba(255,255,255,.72);}

.to-top-btn{
    position:absolute;right:40px;top:-25px;
    display:flex;align-items:center;justify-content:center;
    width:50px;height:50px;border-radius:50%;
    background:var(--navy-700);color:#fff;font-size:15px;
    box-shadow:0 16px 34px rgba(21,94,174,.4);
}
.to-top-btn:hover{transform:translateY(-4px);background:var(--navy-600);}

#footerInner{padding:76px 0 44px;}
.footer-left-con{
    display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
    gap:40px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.1);
}
.foot-logo img{height:28px;filter:brightness(0) invert(1);}
.left-box{display:flex;flex-direction:column;gap:24px;}
.foot-sns-menu ul{display:flex;gap:10px;}
.foot-sns-menu a{
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:50%;
    border:1px solid rgba(255,255,255,.18);color:#fff;font-size:15px;
}
.foot-sns-menu a:hover{background:var(--navy-700);border-color:var(--navy-700);}

.right-box{max-width:540px;}
.footer-address-list .txt{font-size:var(--fs-sm);line-height:1.9;color:rgba(255,255,255,.6);}
.footer-address-list .txt b{display:block;margin-bottom:6px;font-size:var(--fs-lg);color:#fff;font-weight:700;}
.footer-address-list .txt span{display:inline-block;margin-top:8px;color:rgba(255,255,255,.48);}
.footer-address-list a{color:rgba(255,255,255,.6);}
.footer-address-list a:hover{color:#fff;}

.footer-copyright{
    padding-top:22px;font-family:var(--f-body);font-size:11.5px;
    letter-spacing:.5px;color:rgba(255,255,255,.38);
}

/****************************************************
    9. SITEMAP OVERLAY
****************************************************/
.cm-sitemap-wrapper{position:fixed;inset:0;z-index:1200;visibility:hidden;opacity:0;transition:opacity .35s var(--ease),visibility .35s;}
.cm-sitemap-wrapper.active{visibility:visible;opacity:1;}
.cm-sitemap-bg{position:absolute;inset:0;background:rgba(6,16,32,.62);backdrop-filter:blur(4px);}
.cm-sitemap-inner-con{position:relative;height:100%;display:flex;align-items:center;justify-content:center;padding:24px;}
.cm-sitemap-area-con{
    position:relative;width:100%;max-width:880px;max-height:82vh;overflow-y:auto;
    padding:52px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);
}
.cm-modal-tit-con{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:32px;padding-bottom:20px;border-bottom:2px solid var(--navy-950);
}
.cm-modal-tit{font-family:var(--f-body);font-size:22px;font-weight:700;letter-spacing:2px;color:var(--navy-950);}
.sitemap-close-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:var(--navy-950);}
.sitemap-close-btn:hover{background:var(--navy-050);}
.sitemap-wrapper-style ul li a{display:block;padding:10px 0;font-size:15px;font-weight:600;color:var(--sub);}
.sitemap-wrapper-style ul li a:hover{color:var(--navy-700);}

 
/****************************************************
    10. TECHNOLOGY — "Connected AI Ecosystem" 네트워크 다이어그램
****************************************************/
.inner{
    position:relative;
    width:100%;
    max-width:var(--container);
    margin:0 auto;
    padding:0 clamp(20px, 2.4vw, 56px);
}

#technology{padding:150px 0;background:var(--navy-050);}

.section-title{text-align:center;max-width:720px;margin:0 auto 70px;}
.section-title span{
    display:inline-flex;align-items:center;gap:10px;
    margin-bottom:18px;font-size:var(--fs-label);font-weight:800;
    letter-spacing:1.5px;text-transform:uppercase;color:var(--navy-700);
}
.section-title span:before{content:"";width:22px;height:3px;border-radius:2px;background:var(--navy-700);}
.section-title h2{font-size:var(--fs-2xl);font-weight:800;color:var(--navy-950);margin-bottom:16px;line-height:1.3;}
.section-title p{font-size:var(--fs-base);color:var(--sub);line-height:1.8;}

.network{position:relative;}
.network-wrap{
    position:relative;
    width:min(74%, 1180px);
    aspect-ratio:1/1;
    margin:0 auto;
}
/* 코어에서 각 노드 방향으로 뻗어나가는 연결선 (원형 대신 라인으로 연결) */
.network-wrap:before{
    content:"";
    position:absolute;
    left:50%;top:50%;
    width:82%;height:82%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:repeating-conic-gradient(from -90deg,
        var(--navy-200) 0deg 1.6deg,
        transparent 1.6deg 36deg);
    z-index:1;
}

.network-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;}
/* 원형 대신 둥근 사각형 배지 — 뷰포트에 비례해 계속 커짐 */
.core-circle{
    position:relative;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:clamp(150px, 13vw, 260px);
    height:clamp(150px, 13vw, 260px);
    border-radius:clamp(20px, 1.6vw, 34px);
    background:linear-gradient(155deg,var(--navy-600),var(--navy-900));
    color:#fff;
    box-shadow:0 28px 64px rgba(11,42,86,.32);
    text-align:center;
    padding:clamp(14px, 1.6vw, 26px);
}
.core-circle i{font-size:clamp(30px, 3.4vw, 50px);margin-bottom:12px;}
.core-circle h3{font-size:clamp(15px, 1.5vw, 21px);font-weight:800;letter-spacing:.3px;margin-bottom:4px;}
.core-circle small{font-size:clamp(11px, 1vw, 14px);color:rgba(255,255,255,.72);line-height:1.4;}

.node{
    position:absolute;
    transform:translate(-50%,-50%);
    display:inline-flex;align-items:center;gap:clamp(7px,.5vw,11px);
    padding:clamp(8px,.7vw,13px) clamp(16px,1.3vw,24px) clamp(8px,.7vw,13px) clamp(8px,.7vw,13px);
    background:#fff;
    border:1px solid var(--line);
    border-radius:30px;
    box-shadow:var(--shadow-sm);
    font-size:clamp(12.5px, .85vw, 16.5px);
    font-weight:700;
    color:var(--navy-950);
    white-space:nowrap;
    z-index:4;
    transition:transform .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.node a{display:inline-flex;align-items:center;gap:inherit;}
/* Font Awesome 아이콘 배지 — 각 노드 텍스트 앞에 붙는 뱃지 */
.node a:before{
    content:"\f0e7"; /* fa-solid fa-bolt */
    font-family:"Font Awesome 7 Pro";
    font-weight:900;
    flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    width:clamp(22px,1.7vw,32px);height:clamp(22px,1.7vw,32px);
    border-radius:50%;
    background:var(--navy-100);
    color:var(--navy-700);
    font-size:clamp(10px,.75vw,14px);
    transition:background .3s var(--ease),color .3s var(--ease);
}
.node:hover{
    color:var(--navy-700);
    border-color:var(--navy-200);
    box-shadow:var(--shadow-md);
    transform:translate(-50%,-50%) translateY(-3px);
}
.node:hover a:before{background:var(--navy-700);color:#fff;}
/* 10개 노드 — 코어를 중심으로 36도씩 균등 배치 */
.node01{left:50%;top:5%;}
.node02{left:78.5%;top:13.2%;}
.node03{left:94%;top:33.6%;}
.node04{left:94%;top:66.4%;}
.node05{left:78.5%;top:86.8%;}
.node06{left:50%;top:95%;}
.node07{left:21.5%;top:86.8%;}
.node08{left:6%;top:66.4%;}
.node09{left:6%;top:33.6%;}
.node10{left:21.5%;top:13.2%;}

/****************************************************
    11. GALLERY SECTION — "주요 뉴스"
    ※ 현재 HTML엔 한화비전 견본 문구/이미지 경로(path/to/imageN.jpg)가
      플레이스홀더로 남아있습니다 — 실제 뉴스 콘텐츠로 교체해주세요.
****************************************************/
.gallery-section{
    max-width:var(--container);
    margin:0 auto;
    padding:150px clamp(20px, 2.4vw, 56px) 150px;
}
.section-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    margin-bottom:34px;
}
.header-text h2{font-size:var(--fs-2xl);font-weight:800;color:var(--navy-950);margin-bottom:12px;}
.header-text p{font-size:var(--fs-base);color:var(--sub);}

/* 뉴스/비디오 탭에 따라 둘 중 하나만 표시 (26script.js가 .active 토글) */
.section-header > .btn-more{
    display:none;
    align-items:center;gap:8px;flex-shrink:0;
    font-size:var(--fs-sm);font-weight:700;color:var(--navy-700);
    padding-bottom:4px;border-bottom:1px solid var(--navy-700);
    margin-top:8px;
}
.section-header > .btn-more.active{display:inline-flex;}
.btn-more i{font-size:12px;transition:transform .3s var(--ease);}
.btn-more:hover i{transform:translateX(4px);}

/* 뉴스 / 비디오 탭 전환 버튼 */
.tab-menu { display: flex; gap: 10px; margin-bottom: 40px; }
.tab-menu li button {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 24px;
    border: 1px solid var(--line);
    border-radius: 30px;
    background: #fff;
    color: var(--sub);
    font-size: var(--fs-sm);
    font-weight: 700;
    transition: .3s var(--ease);
}

/* Font Awesome 6 Pro 로 변경 및 아이콘 지정 */
.tab-menu { display: flex; gap: 10px; margin-bottom: 40px; }
.tab-menu li button {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 24px;
    border: 1px solid var(--line);
    border-radius: 30px;
    background: #fff;
    color: var(--sub);
    font-size: var(--fs-sm);
    font-weight: 700;
    transition: .3s var(--ease);
}

/* 1. News (신문 아이콘) */
.tab-menu li:nth-child(1) button:before {
    content: "\f1ea";
    font-family: "Font Awesome 7 Pro";
    font-weight: 900; /* Solid 기준 (Regular/Light일 경우 400 또는 300) */
}

/* 2. Video (비디오 카메라 아이콘) */
.tab-menu li:nth-child(2) button:before {
    content: "\f03d";
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
}

.tab-menu li.active button {
    background: var(--navy-700);
    border-color: var(--navy-700);
    color: #fff;
    box-shadow: 0 12px 26px rgba(21,94,174,.24);
}
.tab-menu li:not(.active) button:hover { border-color: var(--navy-200); color: var(--navy-700); }

/* 뉴스 패널 / 비디오 패널 — JS가 .active 토글, 기본은 뉴스가 보임 */
/*  부러오는 썸에일 오류.     .gallery-grid{display:none;}
.gallery-grid.active{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}			 */
/* 뉴스 패널 / 비디오 패널 */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    /* display: none 대신 사용하여 iframe이 크기를 인식할 수 있도록 함 */
    visibility: hidden;
    height: 0;
    overflow: hidden;
    opacity: 0;
}

.gallery-grid.active {
    visibility: visible;
    height: auto;
    overflow: visible;
    opacity: 1;
}

.gallery-card{
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    background:#fff;
    transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.gallery-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--navy-200);}
.thumb-box{aspect-ratio:16/10;background:var(--navy-050);overflow:hidden;}
.thumb-box img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.gallery-card:hover .thumb-box img{transform:scale(1.05);}
.content-box{padding:24px 22px 26px;}
.gallery-card .title{
    font-size:var(--fs-lg);font-weight:700;color:var(--ink);line-height:1.5;margin-bottom:16px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.meta-info{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);}
.meta-info .category{color:var(--navy-700);font-weight:700;}
.meta-info .date{color:var(--sub);}

/* 비디오 패널 안의 목록 */
/* .gallery-grid > ul{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}			   */
 
.gallery-grid > ul li{
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    background:#000;
}
.gallery-grid > ul iframe{width:100%;aspect-ratio:16/9;height:auto;display:block;}

/****************************************************
    10. RESPONSIVE
****************************************************/
@media(max-width:1200px){
    .area-box{padding:0 28px;}
    #gnb > ul.area{gap:32px;}
    .main-quickmenu-box ul{grid-template-columns:repeat(2,1fr);}
    .news_inner{grid-template-columns:1fr;}
    .left_news ul{grid-template-columns:1fr 1fr;}
    .gallery-grid.active{grid-template-columns:repeat(2,1fr);}
    .gallery-grid > ul{grid-template-columns:1fr;}
}

@media(max-width:991px){
    :root{--header-h:64px;--header-h-scrolled:60px;}
    #gnb{display:none;}
    .nav-open-btn.open-btn{display:flex;}
    .header-util-box{gap:8px;}
     
	    /* 태블릿/모바일 크기에서 나타나도록 설정 .sitemap-line-btn{width:38px;height:38px;font-size:14px;} */
    .sitemap-line-btn{
        display: flex; /* 추가 */
        width:38px;
        height:38px;
        font-size:14px;
    }

    #mainVisual{height:100vh;height:100dvh;min-height:480px;}
    #mainQuickMenu{padding:100px 0;}
    #mainValues,#mainNews{padding:0 0 100px;}
    .main-quickmenu-box ul{grid-template-columns:1fr;}
    .txt_wrap{padding:44px 30px 44px 44px;}
    .txt_wrap:before{top:44px;bottom:44px;}
    .tit_box .tit{font-size:21px;}

    .left_news ul{grid-template-columns:1fr;}

    #technology{padding:100px 0;}
    .gallery-section{padding:100px clamp(20px,4vw,40px) 100px;}

    .footer-left-con{flex-direction:column;}
    .to-top-btn{right:24px;}
}

@media(max-width:640px){
    .area-box{padding:0 20px;}
    #mainQuickMenu{padding:80px 0;}
    #mainValues,#mainNews{padding:0 0 80px;}
    #mainQuickMenu h4,#mainValues h4,#mainNews h4{font-size:12px;letter-spacing:2px;}
    .main-quickmenu-box li a{padding:36px 26px;}
    .our_tit{font-size:20px;}
    #navigation > li > a{font-size:19px;}

    /* 좁은 화면에서는 원형 배치 대신 코어 아래 태그 목록으로 전환 */
    #technology{padding:80px 0;}
    .network{display:flex;flex-direction:column;align-items:center;}
    .network-wrap{
        position:static;
        max-width:420px;height:auto;aspect-ratio:auto;
        display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
        gap:12px;
    }
    .network-wrap:before{display:none;}
    .network-core{position:static;transform:none;margin-bottom:20px;flex:0 0 100%;display:flex;justify-content:center;}
    .node{position:static;transform:none;}

    .gallery-section{padding:80px 20px 80px;}
    .gallery-grid.active{grid-template-columns:1fr;}
}


/* =========================================================
   SITE MAP OVERLAY (강제 스타일 덮어쓰기)
========================================================= */

/* 1. 사이트맵 컨테이너 내부 <ul> 레이아웃 고정 */
/* =========================================================
   SITE MAP OVERLAY (최종 레이아웃 강제 교정)
========================================================= */
/* =========================================================
   폰트 어썸 활용 사이트맵 디자인
========================================================= */

/* 대메뉴 그리드 */
.sm-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 32px 24px;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---------------------------------------------------------
   1뎁스 (대메뉴 타이틀)
--------------------------------------------------------- */
.sm-depth1 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 800;
    color: var(--navy-950);
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--navy-950);
    letter-spacing: 0.5px;
}

/* 1뎁스 좌측 폰트 어썸 아이콘 (자동 생성) */
.sm-depth1::before {
    font-family: "Font Awesome 7 Pro";
    content: "\f07b"; /* 폴더 아이콘 (fa-folder) */
    font-weight: 900;
    font-size: 14px;
    color: var(--navy-700);
}

/* ---------------------------------------------------------
   2뎁스 (서브 메뉴)
--------------------------------------------------------- */
.sm-depth2 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sm-depth2 li a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sub);
    background-color: var(--navy-050, #f8fa00); /* 은은한 배경 */
    transition: all 0.25s var(--ease);
}

/* 2뎁스 내부 직접 넣은 폰트 어썸 아이콘 스타일 */
.sm-depth2 li a i {
    font-size: 13px;
    color: var(--navy-600);
    width: 16px;
    text-align: center;
    transition: color 0.25s var(--ease);
}

/* 2뎁스 우측 화살표 가상 요소 (기본 숨김) */
.sm-depth2 li a::after {
    font-family: "Font Awesome 7 Pro";
    content: "\f105"; /* 오른쪽 화살표 (fa-angle-right) */
    font-weight: 900;
    font-size: 12px;
    margin-left: auto;
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.25s var(--ease);
}

/* ---------------------------------------------------------
   HOVER 효과
--------------------------------------------------------- */
.sm-depth2 li a:hover {
    color: var(--navy-950);
    background-color: #e2e8f0;
    padding-left: 14px; /* 오른쪽으로 살짝 이동 효과 */
}

.sm-depth2 li a:hover i {
    color: var(--navy-950);
}

/* 호버 시 우측 화살표 등장 */
.sm-depth2 li a:hover::after {
    opacity: 1;
    transform: translateX(0);
    color: var(--navy-950);
}

/* 사이트맵 전용 깔끔한 디자인 */
.sitemap-final-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 32px 20px !important;
    width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sitemap-final-list > li {
    display: block !important;
}

/* 1뎁스 타이틀 */
.sitemap-final-list .dep1-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    padding-bottom: 10px !important;
    margin-bottom: 12px !important;
    border-bottom: 2px solid #1e293b !important;
    text-decoration: none !important;
}

/* 2뎁스 메뉴 */
.sitemap-final-list .dep2-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sitemap-final-list .dep2-list li a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background-color: #f8fafc !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.sitemap-final-list .dep2-list li a:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
    padding-left: 14px !important;
}

/* 기존 CSS 가상요소(::before) 액박 제거 */
#gsf-orbit-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(180deg, #f4f8fe 0%, #eef5ff 100%);
    overflow: hidden;
}

.gsf-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================
   [타이틀 복원] 원본과 동일한 중앙 정렬 + 파란색 대시라인
   ========================================= */
#gsf-orbit-section .gsf-section-title {
    text-align: center;
    margin-bottom: 40px;
}

/* 상단 서브 텍스트 (파란색 대시 — 포함) */
#gsf-orbit-section .gsf-section-title .sub-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #155eae;
    margin-bottom: 12px;
}

/* 앞쪽 파란색 대시(—) 선 구현 */
#gsf-orbit-section .gsf-section-title .sub-text::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 2px;
    background-color: #155eae;
}

/* 메인 타이틀 GSF솔루션 */
#gsf-orbit-section .gsf-section-title h2 {
    font-size: 36px;
    font-weight: 800;
    color: #0b2a56;
    margin: 0 0 14px 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

/* 하단 설명글 */
#gsf-orbit-section .gsf-section-title p {
    font-size: 16px;
    color: #64748b;
    margin: 0;
    font-weight: 500;
}


/* =========================================
   [무대 및 위성 애니메이션]
   ========================================= */
.gsf-stage {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 700px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gsf-orbit-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ring-inner {
    width: 440px;
    height: 440px;
    border: 2px dashed rgba(59, 130, 246, 0.25);
    animation: orbitRotate 35s linear infinite;
}

.ring-outer {
    width: 640px;
    height: 640px;
    border: 1px solid rgba(147, 197, 253, 0.4);
    box-shadow: 0 0 40px rgba(191, 219, 254, 0.4);
    animation: orbitRotateReverse 50s linear infinite;
}

/* 중앙 CPU 코어 */
.gsf-core-box {
    position: relative;
    width: 260px;
    height: 260px;
    z-index: 10;
}

.gsf-core-pulse {
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
    animation: corePulse 3s ease-in-out infinite alternate;
}

.gsf-core-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 15px 45px rgba(21, 94, 174, 0.12), 
                0 0 0 1px rgba(191, 219, 254, 0.8);
}

.gsf-cpu-icon {
    font-size: 54px;
    color: #1d4ed8;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 12px rgba(37, 99, 235, 0.3));
    animation: cpuPulse 2.5s ease-in-out infinite alternate;
}

.gsf-core-inner h3 {
    font-size: 24px;
    font-weight: 900;
    color: #0b2a56;
    margin: 0 0 4px;
    letter-spacing: -0.5px;
}

.gsf-core-inner span {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

/* 외곽 카드 노드 */
.gsf-card-node {
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -50%);
    animation: nodeFloat 4s ease-in-out infinite;
}

.gsf-card-node a {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid #dbeafe;
    border-radius: 50px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gsf-card-node i {
    font-size: 15px;
    color: #2563eb;
    background: #eff6ff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.gsf-card-node span {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
}

.gsf-card-node a:hover {
    transform: translateY(-6px) scale(1.06);
    background: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: 0 12px 28px rgba(29, 78, 216, 0.28);
}

.gsf-card-node a:hover i {
    background: #ffffff;
    color: #1d4ed8;
}

.gsf-card-node a:hover span {
    color: #ffffff;
}

/* 위성 파티클 */
.satellite-comet {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #3b82f6;
    border-radius: 50%;
    box-shadow: 0 0 12px #2563eb, 0 0 20px #60a5fa;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
}

/* 방향별 떨어지는 애니메이션 */
.node-01 .satellite-comet { animation: cometFallDown 2s ease-in infinite; }
.node-02 .satellite-comet { animation: cometFallLeftDown 2s ease-in infinite; }
.node-03 .satellite-comet { animation: cometFallLeft 2s ease-in infinite; }
.node-04 .satellite-comet { animation: cometFallLeftUp 2s ease-in infinite; }
.node-05 .satellite-comet { animation: cometFallLeftUp 2s ease-in infinite; }
.node-06 .satellite-comet { animation: cometFallUp 2s ease-in infinite; }
.node-07 .satellite-comet { animation: cometFallRightUp 2s ease-in infinite; }
.node-08 .satellite-comet { animation: cometFallRightUp 2s ease-in infinite; }
.node-09 .satellite-comet { animation: cometFallRight 2s ease-in infinite; }
.node-10 .satellite-comet { animation: cometFallRightDown 2s ease-in infinite; }

/* 노드 위치 및 딜레이 */
.node-01 { top: 6%;   left: 50%; animation-delay: 0.0s; }
.node-01 .satellite-comet { animation-delay: 0.0s; }

.node-02 { top: 16%;  left: 77%; animation-delay: 0.3s; }
.node-02 .satellite-comet { animation-delay: 0.3s; }

.node-03 { top: 35%;  left: 88%; animation-delay: 0.6s; }
.node-03 .satellite-comet { animation-delay: 0.6s; }

.node-04 { top: 58%;  left: 87%; animation-delay: 0.9s; }
.node-04 .satellite-comet { animation-delay: 0.9s; }

.node-05 { top: 78%;  left: 75%; animation-delay: 1.2s; }
.node-05 .satellite-comet { animation-delay: 1.2s; }

.node-06 { top: 92%;  left: 50%; animation-delay: 1.5s; }
.node-06 .satellite-comet { animation-delay: 1.5s; }

.node-07 { top: 78%;  left: 25%; animation-delay: 1.8s; }
.node-07 .satellite-comet { animation-delay: 1.8s; }

.node-08 { top: 58%;  left: 13%; animation-delay: 2.1s; }
.node-08 .satellite-comet { animation-delay: 2.1s; }

.node-09 { top: 35%;  left: 12%; animation-delay: 2.4s; }
.node-09 .satellite-comet { animation-delay: 2.4s; }

.node-10 { top: 16%;  left: 23%; animation-delay: 2.7s; }
.node-10 .satellite-comet { animation-delay: 2.7s; }

/* 키프레임 */
@keyframes cometFallDown { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, 250px) scale(0.2); opacity: 0; } }
@keyframes cometFallLeftDown { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-220px, 180px) scale(0.2); opacity: 0; } }
@keyframes cometFallLeft { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-300px, 0) scale(0.2); opacity: 0; } }
@keyframes cometFallLeftUp { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-220px, -180px) scale(0.2); opacity: 0; } }
@keyframes cometFallUp { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -250px) scale(0.2); opacity: 0; } }
@keyframes cometFallRightUp { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(220px, -180px) scale(0.2); opacity: 0; } }
@keyframes cometFallRight { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(300px, 0) scale(0.2); opacity: 0; } }
@keyframes cometFallRightDown { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(220px, 180px) scale(0.2); opacity: 0; } }

@keyframes orbitRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes orbitRotateReverse { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }
@keyframes corePulse { 0% { transform: scale(0.92); opacity: 0.6; } 100% { transform: scale(1.15); opacity: 0.9; } }
@keyframes cpuPulse { 0% { transform: scale(1); } 100% { transform: scale(1.12); } }
@keyframes nodeFloat { 0%, 100% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-10px); } }

/* 모바일 */
@media (max-width: 768px) {
    #gsf-orbit-section .gsf-section-title h2 { font-size: 28px; }
    .gsf-stage { height: auto; flex-direction: column; gap: 12px; }
    .gsf-orbit-ring, .satellite-comet { display: none; }
    .gsf-core-box { position: static; width: 220px; height: 220px; margin-bottom: 20px; }
    .gsf-card-node { position: static; transform: none; animation: none; width: 90%; }
    .gsf-card-node a { justify-content: center; }
} 


/* 화면 폭이 3000px 이상일 때 */
@media (min-width: 3000px) {
    :root {
        /* 전체 컨테이너 최대 너비를 확장 (예: 2400px 또는 원하는 크기) */
        --container: 2400px; 
    }
    
    /* 또는 .area-box만 직접 넓히고 싶은 경우 */
    .area-box {
        max-width: 2400px; /* 원하시는 최대 너비 px 입력 */
    }
 /*   .gsf-inner{
        max-width: 2000px;  
    }	   */
	 
}