#wrap{position: relative; overflow: clip;}
.w_custom{position: relative; width: calc(100% - 60px); max-width: 1400px; margin-inline: auto;}
#wrap [class*="swiper-button"]::after{display: none;}
main{padding-block: var(--row-gap80) var(--row-gap140);}
main:has(.full-sec){width: 100%; max-width: 100%;}
main:has(.pt-dn){padding-top: 0;}
main:has(.pb-dn){padding-bottom: 0;}
main:not(.main){font-family: var(--font-type02);}
.link{position: absolute;inset: 0;z-index: 3;}
br.for_t{display:none;}
html::-webkit-scrollbar { width: 6px; height: 6px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: var(--point-color01); border-radius: 3px; }
html::-webkit-scrollbar-thumb:hover { background: var(--point-color02); }

@media (max-width:1400px) {
    br.for_pc{display:none;}
}
@media (max-width:1023px) {
    br.for_pct{display:none;}
    br.for_t{display:block;}
}
@media (max-width:860px) {
    .w_custom{width: calc(100% - 30px);}
}


/*─────────────────────────────────────────────────────────
    Base / Layout
─────────────────────────────────────────────────────────*/

/* 화면에서 숨기되 스크린리더에는 노출 (접근성) */
.blind{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;}

/* 스크롤 시 콘텐츠 노출 효과 (아래에서 서서히 등장) */
.reveal{opacity:0; transform:translateY(36px); transition:opacity .8s cubic-bezier(.22,.9,.3,1), transform .8s cubic-bezier(.22,.9,.3,1);}
.reveal.in-view{opacity:1; transform:none;}
/* 카드 그리드는 순차 등장 */
.biz-grid .reveal:nth-child(2),.news-grid .reveal:nth-child(2){transition-delay:.1s;}
.biz-grid .reveal:nth-child(3),.news-grid .reveal:nth-child(3){transition-delay:.2s;}
.biz-grid .reveal:nth-child(4),.news-grid .reveal:nth-child(4){transition-delay:.3s;}
@media (prefers-reduced-motion:reduce){
    .reveal{opacity:1; transform:none; transition:none;}
}

/* skip navigation */
.skip-nav a{position:absolute; left:50%; top:0; translate:-50% -120%; z-index:9999; display:inline-block; padding:10px 24px; background:var(--primary); color:#fff; font-weight:700; transition:translate .2s;}
.skip-nav a:focus{translate:-50% 0;}

/*─────────────────────────────────────────────────────────
    공통 버튼 (직각 · 700 대비)
─────────────────────────────────────────────────────────*/
.btn{display:inline-flex;align-items:center;gap: clamp(8px, 1.2vw, 12px);padding: clamp(12px, 2.1vw, 16px) clamp(25px, 3vw, 30px);font-weight: 600;font-size: var(--text-18);letter-spacing:.3px;transition:all 0.4s;}
.btn svg{width: clamp(18px, 2.3vw ,21px);aspect-ratio: auto 1;stroke:currentColor;fill:none;stroke-width:2;transition:transform .25s;}
.btn.primary{background:var(--gradient); color:#fff;}
.btn.ghost{background:#fff; color:#111; box-shadow:inset 0 0 0 1.5px var(--gray-300);}


    @media (hover:hover) and (pointer: fine) {
        .btn:hover{box-shadow:0 12px 26px rgba(0,0,0,.18);}
        .btn:hover svg{transform:translateX(4px);}
    }

/* 공통 섹션 헤드 */
.sec-head{margin-bottom:60px;}
.sec-head.mb0{margin-bottom:0;}
.sec-head .kicker{display:inline-flex;align-items:center;font-size: var(--text-18);font-weight:500;color:var(--primary);letter-spacing:0;margin-bottom: var(--row-gap20);}
.sec-head h2{font-size: var(--text-50);font-weight:700;letter-spacing:-1.5px;line-height:1.18;color:var(--ink);}
.sec-head h2 em{font-style:normal; background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.sec-head p{font-size:16px; color:var(--gray-700); max-width:600px; margin-top:18px; line-height:1.8;}

/*─────────────────────────────────────────────────────────
    Header / GNB
─────────────────────────────────────────────────────────*/
#header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--gray-200);transition:box-shadow .25s;height: var(--header-h);}
#header.on{box-shadow:0 4px 20px rgba(0,0,0,.06);}
/* 상단(헤더)은 화면 100% 폭에서 좌우 여백 100px */
#header .w_custom{max-width: 1720px;display:flex;align-items:center;height: 100%;justify-content:space-between;}
/* 로고 + 주메뉴를 왼쪽으로 묶고, 로고와 메뉴 사이 여백 80px */
.header-left{display:flex;align-items:center;gap: clamp(30px, 4.2vw, 80px);height: 100%;}
#header .logo{z-index:2;height: 100%;}
#header .logo a{display: flex;height:100%;align-items: center;padding-block: 15px;}
#header .logo img{height: 36px;}
#header nav{height: 100%;}
#header .gnb{display:flex;gap:0;height: 100%;}
#header .gnb>li{position:static;height: 100%;}
#header .gnb>li>a,
#header .gnb>li>.gnb-title{display:flex;align-items:center;height: 100%;padding: 0 clamp(15px, 1.7vw, 32px);font-weight:600;font-size: clamp(15px, 1.2vw, 18px);color: var(--black-color01);letter-spacing:-.3px;white-space:nowrap;transition:color .2s;position:relative;}
/* 1차메뉴는 링크가 아닌 카테고리 라벨 (하위 메가메뉴만 링크) */
#header .gnb>li>.gnb-title{cursor:default;}
/* 오버 시 하단 포인트컬러 라인이 가운데에서 양옆으로 확장 (kossa 스타일) */

@media (hover:hover) and (pointer: fine) {
    #header .gnb>li>a::after,
    #header .gnb>li>.gnb-title::after{content:''; position:absolute; left:50%; bottom:0; width:0; height:3px; background:var(--primary); transition:width .35s ease; transform:translateX(-50%);}
    #header .gnb>li:hover>a::after,
    #header .gnb>li:focus-within>a::after,
    #header .gnb>li:hover>.gnb-title::after{width:100%;}
    #header .gnb>li:hover>a,
    #header .gnb>li:focus-within>a,
    #header .gnb>li:hover>.gnb-title{color:var(--primary);}
}

/* 풀와이드 메가 드롭다운 패널 (kossa 스타일) — 왼쪽 1차메뉴 + 오른쪽 하위메뉴 */
/* 오버 시 고정되는 공통 흰색 배경 — 1차메뉴 위에 마우스가 있는 동안 계속 유지되어 메뉴 이동 시 깜빡이지 않음 */
#header .w_custom::after{content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); width:100vw; height:140px; background:#fff; border-top:1px solid var(--gray-200); box-shadow:0 22px 34px rgba(0,0,0,.07); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease, visibility .25s ease; z-index:49;}
@media (hover:hover) and (pointer: fine) {
#header .w_custom:has(.gnb>li:hover)::after{opacity:1; visibility:visible;}
}

.mega{position:absolute; top:100%; left:50%; width:100vw; height:140px; transform:translateX(-50%); background:transparent; padding:20px 100px 20px 500px; display:flex; flex-wrap:wrap; align-content:center; justify-content:flex-start; gap:12px; opacity:0; visibility:hidden; transition:opacity 0s, visibility 0s; z-index:50;}
/* 왼쪽 1차메뉴 라벨: 상단 회사소개 메뉴 위치(≈324px)에 맞춤 */
.mega::before{content:attr(data-title); position:absolute; left:324px; top:0; bottom:0; width:150px; display:flex; align-items:center; font-size:26px; font-weight:600; color:#111; letter-spacing:-.5px;}

.mega li{position:relative;}
.mega li a{position:relative; display:inline-flex; align-items:center; padding:13px 24px; font-size:15px; color:var(--gray-700); font-weight:500; letter-spacing:-.2px; white-space:nowrap; box-shadow:inset 0 0 0 1px var(--gray-200); overflow:hidden; z-index:1; transition:color .3s;}
.mega li a::before{content:''; position:absolute; inset:0; left:0; width:0; background:var(--primary); z-index:-1; clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%); transition:width .35s ease;}
.mega li a:focus{color:#fff; box-shadow:inset 0 0 0 1px var(--primary);}
.mega li a:focus::before{width:calc(100% + 16px);}
@media (hover:hover) and (pointer: fine) {
    .mega li a:hover{color:#fff; box-shadow:inset 0 0 0 1px var(--primary);}
    .mega li a:hover::before{width:calc(100% + 16px);}
    .gnb>li:hover .mega,
    .gnb>li:focus-within .mega{opacity:1; visibility:visible;}
    .gnb:has(>li:hover) > li:not(:hover) .mega{opacity:0; visibility:hidden;}
}

.h-actions{display:flex; align-items:center; gap:10px;}
.h-actions button{display: flex;align-items: center;justify-content: center;inline-size: clamp(26px, 4.6vw, 44px);aspect-ratio: auto 1;}
/* 우측 아이콘 왼쪽의 유틸 텍스트 메뉴 (윤리경영 / FAMILY SITE / 고객지원) */
.util-menu{display:flex;align-items:center;gap: 0 clamp(15px, 1.7vw, 32px);margin-right:12px;}
.util-menu a{font-size:14px; font-weight:600; color:var(--gray-500); letter-spacing:-.2px; white-space:nowrap; transition:color .15s;}
@media (hover:hover) and (pointer: fine) {
    .util-menu a:hover{color:var(--primary);}
}
/* FAMILY SITE 셀렉트박스 */
.family-select{appearance:none; -webkit-appearance:none; -moz-appearance:none; font-size:14px; font-weight:600; color:var(--gray-700); background-color:transparent; border:1px solid var(--gray-300); padding:8px 34px 8px 14px; font-family:inherit; cursor:pointer; letter-spacing:-.2px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%236b6b6b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:calc(100% - 13px) center; background-size:11px 7px; transition:border-color .15s;}
.family-select::-ms-expand{display:none;}
@media (hover:hover) and (pointer: fine) {
    .family-select:hover{border-color:var(--primary);}
}
.family-select:focus,.family-select:focus-visible{outline:none; border-color:var(--primary);}

/* 언어 선택 드롭다운 */
.lang-select{position:relative;}
.lang-select .icon-btn[aria-expanded="true"]{background:var(--gray-100); color:var(--primary);}
.lang-list{position:absolute;top:calc(100% + 8px);left:50%;width: max-content;min-width: clamp(70px, 10vw, 88px);background:#fff;border:1px solid var(--gray-200);box-shadow:0 12px 28px rgba(0,0,0,.1);padding:6px 0;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(8px);transition:opacity .2s ease, visibility .2s ease, transform .2s ease;z-index:60;}

.lang-list li + li{border-top:1px solid var(--gray-100);}
.lang-list a{display:block;padding: clamp(7px, 1.5vw, 10px) clamp(15px, 2vw, 20px);font-size:13px;font-weight:700;color:var(--gray-700);letter-spacing:.5px;text-align:center;transition:all .15s;}
.icon-btn{border-radius:50%;color:#111;transition:all .2s;}
.lang-select:has(.langToggle.on) .lang-list{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
@media (hover:hover) and (pointer: fine) {
    .lang-list a:hover{background:var(--gray-50); color:var(--primary);}
    .icon-btn:hover{background:var(--gray-100); color:var(--primary);}
}
.icon-btn svg{width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:1.8;}
.mobile-toggle{display:none; width:42px; height:42px; align-items:center; justify-content:center; flex-direction:column; gap:5px;}
.mobile-toggle span{width:22px; height:2px; background:#111; transition:all .2s;}

/* 전체메뉴 오버레이 */
.allmenu{position:fixed; inset:0; background:#fff; z-index:200; opacity:0; visibility:hidden; transition:all .3s; overflow-x:hidden; overflow-y:auto;}
.allmenu.open{opacity:1; visibility:visible;}
.allmenu-head{display:flex;justify-content:space-between;align-items:center;height: var(--header-h);max-width: 1720px;}
.allmenu-head .logo{height: 100%;}
.allmenu-head .logo a{display:flex;align-items: center;height: 100%;padding-block: 15px;}
.allmenu-head .logo img{height:36px;}
.allmenu-close{width: clamp(26px, 4.4vw, 42px);aspect-ratio: auto 1;display:grid;place-items:center;border-radius:50%;transition:all .2s;}
@media (hover:hover) and (pointer: fine) {
    .allmenu-close:hover{background:var(--gray-100); transform:rotate(90deg);}
}
.allmenu .h-actions{display: none;}
.allmenu-body{padding-block: 70px 90px;max-width: 1720px;}
.allmenu-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:32px 24px;}
.allmenu-col h2{position:relative; font-size:20px; font-weight:800; color:#111; margin-bottom:22px; padding-bottom:16px; letter-spacing:-.4px; border-bottom:1px solid var(--gray-200);}
.allmenu-col h2::after{content:''; position:absolute; left:0; bottom:-1px; width:40px; height:2px; background:var(--gradient);}
.allmenu-col ul li a{display:flex; align-items:center; padding:9px 0; font-size:17px; color:var(--gray-700); font-weight:500; letter-spacing:-.2px; transition:color .18s ease, padding .18s ease;}
.allmenu-col ul li.deep{margin-left:10px; margin-block:2px;}
/* 3차 메뉴: 라인 대신 점(dot)으로 표시 */
.allmenu-col ul li.deep a{gap:8px; font-size:14.5px; color:var(--gray-500); padding:5px 0;}
.allmenu-col ul li.deep a::before{content:''; width:4px; height:4px; border-radius:50%; background:var(--gray-400); flex-shrink:0;}
@media (hover:hover) and (pointer: fine) {
    .allmenu-col ul li a:hover{color:var(--primary); padding-left:8px;}
    .allmenu-col ul li.deep a:hover{color:var(--primary);}
    .allmenu-col ul li.deep a:hover::before{background:var(--primary);}
}





/*─────────────────────────────────────────────────────────
    메인 비주얼 (Hero) — Swiper 기반
─────────────────────────────────────────────────────────*/
.hero{position:relative;width:100%;overflow:hidden;background:#0a0a0a;color:#fff;}
.hero .swiper-wrapper{height:100%;}
.hero .swiper-slide{position:relative;overflow:hidden;height: calc(100vh - var(--header-h));min-height: 520px;}
/* 슬라이드 배경 이미지 (.thumb) */
.hero .thumb{position:absolute;inset:0;overflow: hidden;}
.hero .thumb::before{position: absolute;content:'';inset: 0;background: linear-gradient(180deg,rgba(10,10,10,.6) 0%,rgba(10,10,10,.55) 45%,rgba(10,10,10,.74) 100%);z-index: 1;}
.hero .thumb div{width:100%; height:100%;}
.hero .thumb :where(img, video){width:100%; height:100%; object-fit:cover;}
.hero .thumb .for_m{display:none;}
    .hero [data-swiper-slide-index="0"] .thumb::before{opacity: 0;}
/* 슬라이드 내부 텍스트 */
.hero-inner{position:relative; z-index:3; height:100%; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; text-align:left;}
.hero-content{transform:translateY(-40px);}
.hero .hero-tag{display:block; line-height:1; font-size:20px; font-weight:600; color:#fff; letter-spacing:1.5px; margin:0 0 30px;}
.hero h2{font-size:clamp(36px,3.7vw,54px); font-weight:800; line-height:1.25; letter-spacing:-2px; margin-bottom:34px; color:#fff;}
.hero h2 em{font-style:normal;}
.hero p{font-size:18px; color:rgba(255,255,255,.85); line-height:1.7; margin:0 0 60px;}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap;}
    .hero [data-swiper-slide-index="0"] .hero-tag{color: rgba(10,10,10,.72);}
    .hero [data-swiper-slide-index="0"] h2{color: var(--ink);}
    .hero [data-swiper-slide-index="0"] p{color: rgba(10,10,10,.72)}
/* 슬라이드 전환 시 텍스트 순차 등장 */
.hero .swiper-slide-active .hero-tag{animation:heroReveal 1s cubic-bezier(.22,.9,.3,1) .05s backwards;}
.hero .swiper-slide-active h2{animation:heroReveal 1s cubic-bezier(.22,.9,.3,1) .15s backwards;}
.hero .swiper-slide-active .hero-content > p{animation:heroReveal 1s cubic-bezier(.22,.9,.3,1) .38s backwards;}
.hero .swiper-slide-active .hero-cta{animation:heroReveal 1s cubic-bezier(.22,.9,.3,1) .55s backwards;}
@keyframes heroReveal{from{opacity:0; transform:translateY(34px);} to{opacity:1; transform:translateY(0);}}
/* 활성 슬라이드 배경 켄번즈 줌 */
.hero .swiper-slide-active .thumb img{animation:heroZoom 6.5s ease forwards;}
@keyframes heroZoom{from{transform:scale(1.04)}to{transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){
    .hero .swiper-slide-active .hero-tag,
    .hero .swiper-slide-active h2,
    .hero .swiper-slide-active .hero-content > p,
    .hero .swiper-slide-active .hero-cta{animation:none;}
    .hero .swiper-slide-active .thumb img{animation:none;}
}
.hero .btn.ghost{background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);}
.hero-cta .btn{min-width:200px; justify-content:center;}
.hero [data-swiper-slide-index="0"] .btn.ghost{color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(10, 10, 10, .4);}
@media (hover:hover) and (pointer: fine) {
    .hero .btn.primary:hover{filter:brightness(1.06); box-shadow:0 14px 30px rgba(232,52,28,.42);}
    .hero .btn.ghost:hover{background:#fff; color:#111; box-shadow:inset 0 0 0 1.5px #fff, 0 12px 26px rgba(0,0,0,.22);}
    .hero [data-swiper-slide-index="0"] .btn.ghost:hover{background: var(--ink); color: var(--point-white); box-shadow: inset 0 0 0 1.5px rgba(10,10,10,.4);}
}
/* 마우스 롤 스크롤 아이콘 */
.hero-scroll{position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px; color:rgba(255,255,255,.7); font-size:10px; font-weight:800; letter-spacing:3px;}
.hero-scroll .mouse{position:relative; width:26px; height:42px; border:2px solid rgba(255,255,255,.7); border-radius:20px;}
.hero-scroll .mouse::after{content:''; position:absolute; left:50%; top:8px; width:4px; height:8px; background:#fff; border-radius:2px; transform:translateX(-50%); animation:mouseWheel 1.6s ease-in-out infinite;}
@keyframes mouseWheel{0%{opacity:0; transform:translate(-50%,0)}30%{opacity:1}70%{opacity:1; transform:translate(-50%,12px)}100%{opacity:0; transform:translate(-50%,12px)}}
    .hero:has([data-swiper-slide-index="0"].swiper-slide-active) .hero-scroll .mouse{border-color: rgba(10,10,10,.55);}
    .hero:has([data-swiper-slide-index="0"].swiper-slide-active) .hero-scroll .mouse::after{background: var(--ink);}


/*─────────────────────────────────────────────────────────
    사업영역 (3 cards)
─────────────────────────────────────────────────────────*/
.biz{padding:120px 0; background:#fff;}
/* 사업영역 콘텐츠 폭 1300px (기본 .wrap은 패딩 때문에 1236px) */
.biz-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:60px; flex-wrap:wrap; gap:24px;}
/* 전체보기 버튼 공통 (사업영역·최신소식 통일) */
.more-link{display:inline-flex;align-items:center;gap:10px;font-size: var(--text-16);font-weight:700;color: var(--black-color01);transition:color .25s, gap .25s;}
.more-link::after{content:'+'; font-size:18px; font-weight:400; line-height:1;}
@media (hover:hover) and (pointer: fine) {
    .more-link:hover{color:var(--primary); gap:16px;}
}
.biz-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.biz-card{position:relative; background:#f5f5f5; overflow:hidden; display:flex; flex-direction:column;}
.biz-card .ph{position:relative; aspect-ratio:4/3; overflow:hidden; background:#f5f5f5;}
.biz-card .ph img{position:relative;width:100%;height:100%;object-fit:contain;padding: clamp(25px,3.6vw,36px);transition:transform .7s cubic-bezier(.22,.9,.3,1);}
.biz-card .info{padding: clamp(25px, 3vw, 30px);padding-bottom: clamp(50px,8.8vw, 88px);display:flex;flex-direction:column;flex:1;background:#f5f5f5;}
/* 오버 시 상단에 포인트컬러 2px 라인 노출 */
.biz-card::after{content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gradient); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; z-index:3;}
@media (hover:hover) and (pointer: fine) {
    .biz-card:hover .ph img{transform:scale(1.07);}
    .biz-card:hover::after{transform:scaleX(1);}
}
.biz-card .cat{font-size: var(--text-14);font-weight:800;color:var(--gray-500);letter-spacing:0;margin-bottom: clamp(10px, 1.2vw ,12px);}
.biz-card h3{font-size: var(--text-30);font-weight:800;color:#111;letter-spacing:-.6px;line-height:1.25;margin-bottom:20px;}
.biz-card .desc{font-size: var(--text-18);color:var(--gray-700);line-height:1.65;margin-bottom: clamp(18px, 2.2vw, 22px);}
.biz-card .tag-list{display:flex; flex-wrap:wrap; gap:8px;}
.biz-card .tag-list span{font-size: var(--text-16);color:var(--gray-700);font-weight:400;padding: clamp(4px, 1.1vw, 6px) clamp(10px, 1.2vw, 12px);background: var(--point-white);}
/* 자세히 보기 → 오른쪽 하단 정사각형 버튼 (텍스트 미노출) */
/* 자세히 보기 버튼: 평소 숨김, 카드 오버 시 노출 */
.biz-card .more{position:absolute;right:0;bottom:0;inline-size: clamp(40px, 5.8vw, 56px);aspect-ratio: auto 1;display:grid;place-items:center;background:var(--gradient);color:#fff;opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .3s ease;}
.biz-card .more svg{width: clamp(16px, 2.3vw, 21px);aspect-ratio: auto 1;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .25s;}
@media (hover:hover) and (pointer: fine) {
    .biz-card:hover .more{opacity:1; transform:translateY(0);}
    .biz-card:hover .more svg{transform:translateX(3px);}
}


/*─────────────────────────────────────────────────────────
    회사소개 (숫자 카운팅) — 다크 밴드
─────────────────────────────────────────────────────────*/
.about{padding:120px 0; background:var(--ink); color:#fff; position:relative; overflow:hidden; width: 100%; max-width: 1745px;}
.about-media{position:absolute; inset:0;  overflow: hidden;}
.about-media img{width:100%; height:100%; object-fit:cover; opacity:.86;}
.about-media::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,10,10,.52) 0%,rgba(10,10,10,.08) 100%);}
.about::before{content:''; position:absolute; right:-160px; top:50%; transform:translateY(-50%); width:560px; height:560px; background:radial-gradient(circle,rgba(232,52,28,.2) 0%,transparent 62%); pointer-events:none; z-index:0;}
.about-slim{position:relative; z-index:1; display:flex; flex-direction:column; gap:76px;}
.about-left{display:flex; flex-direction:column; align-items:flex-start;}
/* 설명 텍스트(왼쪽, 폭 제한) + 자세히 보기 버튼(오른쪽 끝, 텍스트 하단에 정렬) */
.about-lead-row{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; width:100%;}
.about-left .about-lead-row .lead{margin-bottom:0;}
.about-lead-row .btn.primary{flex-shrink:0;}
.about-left .kicker{display:inline-flex;align-items:center;font-size: var(--text-18);font-weight:500;color:#fff;letter-spacing:0;margin-bottom: var(--row-gap20);}
.about-left h2{font-size: var(--text-50);font-weight:700;letter-spacing:-1.5px;line-height:1.18;margin-bottom:24px;}
.about-left .lead{font-size: var(--text-18);color:rgba(255,255,255,.78);line-height:1.85;margin-bottom: clamp(20px, 3.8vw, 38px);}
.about-meta{display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid rgba(255,255,255,.35);}
.about-meta .meta-item{padding:32px 24px 0; border-right:1px solid rgba(255,255,255,.14);}
.about-meta .meta-item:first-child{padding-left:0;}
.about-meta .meta-item:last-child{padding-right:0; border-right:none;}
.about-meta .meta-item b{display:block;font-size: var(--text-50);font-weight:600;color:#fff;letter-spacing:-1.5px;line-height:1.1;margin-bottom:10px;}
/* 설립·노하우·네트워크 숫자 + KOSDAQ 동일 크기 */
.about-meta .meta-item b:has([data-count]){font-size: var(--text-50);}
.about-meta .meta-item [data-count]{display:inline-block;font-size: var(--text-50);line-height:1;color:#fff;}
.about-meta .meta-item b i{font-style:normal; color:#fff; font-size:26px; vertical-align:super; margin-left:2px;}
.about-meta .meta-item span{font-size: var(--text-17);color:#cfcfcf;font-weight:600;}

/*─────────────────────────────────────────────────────────
    공지사항 (뉴스 4개)
─────────────────────────────────────────────────────────*/
.news{padding:120px 0; background:#fff;}
.news-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:60px; flex-wrap:wrap; gap:20px;}
.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.news-grid:has(.bl-empty){grid-template-columns:repeat(1,1fr);}
.news-item{position:relative;background:#fff;border:1px solid var(--gray-200);padding: clamp(25px, 3.4vw, 34px) clamp(25px, 3vw, 30px) clamp(39px, 6.8vw, 68px);display:flex;flex-direction:column;overflow:hidden;transition:border-color .3s;}
.news-item > a{display:flex; flex-direction:column; flex:1;}
.news-item .tag-mini{display:inline-block;align-self:flex-start;padding:4px 12px;background:rgba(232,52,28,.08);color:var(--primary);font-size: var(--text-13);font-weight:800;letter-spacing:.5px;margin-bottom: clamp(15px, 2vw, 20px);}
.news-item h4{font-size: var(--text-20);font-weight:700;color:#111;letter-spacing:-.3px;line-height:1.5;transition:color .2s;white-space:normal;overflow:hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
/* 날짜는 카드 하단에 배치 */
.news-item .date{margin-top: clamp(20px, 2.4vw, 24px);font-size: var(--text-15);font-weight:400;color:var(--gray-500);}
/* 화살표: 오버 시 우측 하단 사각 버튼 (사업영역과 동일) */
.news-item .arr{position:absolute;right:0;bottom:0;width: clamp(36px, 5.8vw, 56px);aspect-ratio: auto 1;display:grid;place-items:center;background:var(--gradient);color:#fff;opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .3s ease;}
.news-item .arr svg{width: clamp(18px, 2.3vw, 21px);aspect-ratio: auto 1;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .25s;}
@media (hover:hover) and (pointer: fine) {
    .news-item:hover{border-color:var(--primary);}
    .news-item:hover h4{color:var(--primary);}
    .news-item:hover .arr{opacity:1; transform:translateY(0);}
    .news-item:hover .arr svg{transform:translateX(3px);}
}



/*─────────────────────────────────────────────────────────
    ESG 배너 및 주가정보
─────────────────────────────────────────────────────────*/
.invest{padding:120px 0; background:#eee;}
.invest-grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:30px;}
.invest-grid > *{min-width:0;}
.stock-info,.invest-grid .stock-price,.stock-card .ir-links{min-width:0;}
.invest-grid .stock-price{flex-wrap:wrap;}
.stock-card .src{word-break:keep-all; overflow-wrap:anywhere;}

/* ESG 배너 */
.bands{display:flex; flex-direction:column; gap:20px;}
.band{position:relative;flex:1;overflow:hidden;padding: clamp(34px, 4.8vw, 48px) clamp(25px, 4.4vw, 44px);background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;min-height: clamp(200px, 28vw ,280px);transition:box-shadow .35s;}
.band-media{position:absolute; inset:0; z-index:0; overflow: hidden;}
.band-media img{width:100%; height:100%; object-fit:cover; opacity:1; transition:transform .5s, opacity .35s;}
.band-media::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,10,.12) 0%,rgba(10,10,10,.5) 100%);}
@media (hover:hover) and (pointer: fine) {
    .band:hover .band-media img{transform:scale(1.06); opacity:1;}
}
.band > .band-num,
.band > div{position:relative; z-index:1;}
.band::before{content:''; position:absolute; right:-80px; bottom:-80px; width:280px; height:280px; background:radial-gradient(circle,rgba(255,122,26,.16) 0%,transparent 62%); transition:opacity .35s; z-index:0;}
.band-num{font-size:80px; font-weight:900; font-style:italic; color:rgba(255,255,255,.12); line-height:1; letter-spacing:-3px;}
/* 다른 섹션 타이틀의 .kicker 라벨과 동일한 스타일로 통일 */
.band-tag{display:inline-flex;align-items:center;color:#fff;font-weight:500;font-size: var(--text-18);letter-spacing:0;margin-bottom: clamp(12px, 2vw, 20px);}
.band h3{font-size: var(--text-50);font-weight:700;letter-spacing:-1px;margin-bottom: clamp(12px, 1.6vw, 16px);line-height:1.15;}
.band p{font-size: var(--text-20);color:rgba(255,255,255,.8);margin-bottom: clamp(26px, 4.8vw, 48px);line-height:1.6;}
/* ESG 배너 내용 왼쪽 정렬 */
.band > div{text-align:left;}
/* 네모박스 버튼 */
.band-cta{display:inline-flex;align-items:center;gap:12px;padding: clamp(12px,2vw,15px) clamp(20px, 3vw, 30px);border:1.5px solid rgba(255,255,255,.5);font-size: var(--text-18);font-weight:700;color:#fff;margin-top:auto;transition:background .25s, color .25s, border-color .25s;}
.band-cta .circle{width:21px; height:21px; background:transparent; border-radius:0; display:grid; place-items:center;}
.band-cta .circle svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .3s;}
@media (hover:hover) and (pointer: fine) {
    .band:hover .band-cta{background:#fff; color:#111; border-color:#fff;}
    .band:hover .band-cta .circle svg{transform:translateX(3px);}
}

/* 주가정보 카드 */
.stock-card{background:#fff; border:1px solid var(--gray-200); padding:40px; display:flex; flex-direction:column;}
.stock-card .ch{display:flex; justify-content:space-between; align-items:center; padding-bottom:20px; border-bottom:2px solid #111; margin-bottom:20px;}
.stock-card .ch h3{font-size:26px; font-weight:800; color:#111; letter-spacing:-.6px;}
.stock-card .ch .code{font-size:12px; font-weight:800; color:var(--gray-500); letter-spacing:1.5px; padding:4px 10px; border:1px solid var(--gray-300);}
.invest-grid .stock-price{display:flex;align-items: center;gap:14px;margin-top:10px;margin-bottom:34px;}
.invest-grid .stock-price .pv{font-size: var(--text-46);font-weight:800;color:#111;letter-spacing:-2px;line-height:1;}
.invest-grid .stock-price .pv .w{font-size: var(--text-19);color:var(--gray-500);font-weight:700;margin-left:2px;}
.invest-grid .stock-price .chg{display:inline-flex;align-items:center;gap:5px;font-size: var(--text-15);font-weight:800;color:var(--primary);}
.invest-grid .stock-price .chg.down{color:#1e6dd8;}
.stock-info{display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; padding:32px 0 20px; border-top:1px solid var(--gray-200); margin-bottom:24px;}
.stock-info .l{font-size: var(--text-15);color:var(--gray-500);font-weight:600;}
.stock-info .v{font-size: var(--text-16);color:#111;font-weight:700;text-align:right;letter-spacing:-.3px;}
.stock-card .ir-links{display:flex; flex-direction:column; gap:14px; margin-top:auto;}
.stock-card .ir-links a{display:flex;justify-content:space-between;align-items:center;padding: clamp(14px, 2.1vw, 16px) clamp(15px, 2vw, 20px);background:var(--gray-100);font-size: var(--text-16);font-weight:700;color:#111;transition:all .2s;}
.stock-card .ir-links a::after{content:'→'; font-weight:600; color:var(--gray-500);}
@media (hover:hover) and (pointer: fine) {
    .stock-card .ir-links a:hover{background:var(--gradient); color:#fff; padding-left:22px;}
    .stock-card .ir-links a:hover::after{color:#fff; transform:translateX(3px);}
}
.stock-card .src{margin-top:14px; font-size:10px; color:var(--gray-400); text-align:right;}

/*─────────────────────────────────────────────────────────
    긴 배너 (CTA) — 풀블리드 다크 이미지
─────────────────────────────────────────────────────────*/
/* 배너를 감싸는 홀더: 위쪽 절반은 회색(주가정보 배경 연장), 아래쪽 절반은 흰색 */
.cta-hold{position:relative;margin-bottom: var(--row-gap100);background:#fff;}
.cta-hold::before{content:''; position:absolute; top:0; left:0; right:0; height:50%; background:#eee;}
/* 배너 배경은 화면 전체에서 좌우 100px 여백만 두고 꽉 차게. 내부 텍스트는 콘텐츠(.wrap 1300) 기준 정렬 */
.cta{position:relative;z-index:1;max-width: 1754px;width: 100%;overflow:hidden;background:var(--ink);color:#fff;}
.cta-media{position:absolute; inset:0; z-index:0;}
.cta-media img{width:100%; height:100%; object-fit:cover; opacity:.6;}
.cta-overlay{position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(10,10,10,.7) 0%,rgba(10,10,10,.34) 100%);}
/* .wrap(1300 중앙)로 텍스트를 콘텐츠에 맞추고 상하 여백 100px */
.cta-inner{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;padding-block:100px;}
.cta h2{font-size: var(--text-46);font-weight:700;letter-spacing:-1.4px;line-height:1.4;}
.cta h2 em{font-style:normal; background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.cta p{font-size: var(--text-20);color:rgba(255,255,255,.78);margin-top:16px;line-height:1.7;}


/*─────────────────────────────────────────────────────────
    Footer
─────────────────────────────────────────────────────────*/
.footer{background:#0f0f0f;color:#888;padding-top: clamp(50px, 8vw, 80px);}
.footer-top{display:grid;grid-template-columns:1fr 220px;gap: 40px 60px;padding-bottom: clamp(35px, 5.6vw, 56px);border-bottom:1px solid #222;}
/* 로고를 두 겹으로: 왼쪽 'Mirae'는 흰색, 오른쪽 빨강 박스는 원본색 그대로 (상단 로고와 동일) */
.f-logo{position:relative;display:inline-block;width:127px;aspect-ratio: auto 3.73;}
.f-logo a{position:absolute;top:0;left:0;height:34px;width: 100%;}
.f-logo a:nth-child(1){filter:brightness(0) invert(1); clip-path:inset(0 35% 0 0);}
.f-logo a:nth-child(2){clip-path:inset(0 0 0 73%);}
/* 로고 + 정보: 푸터 제일 하단으로 이동 */
.footer-brand{display:flex;gap:20px 72px;flex-wrap:wrap;padding:36px 0;border-bottom:1px solid #222;align-items: center;}
.footer-brand .f-logo{flex-shrink:0;}
.footer-brand .f-info{display:flex; flex-direction:column; gap:8px; margin-top:0; font-size:15px; line-height:1.7; color:#888;}
.footer-brand .f-info-line{display:flex; flex-wrap:wrap; gap:4px 28px;}
.footer-brand .f-info-line p{display:flex;}
.footer-brand .f-info b{color:#ddd;font-weight:400;margin-right:6px;flex-shrink: 0;}
.f-menu{display:grid; grid-template-columns:repeat(6,1fr); gap:24px;}
.f-menu .f-heading{font-size:16px; font-weight:800; color:#fff; margin-bottom:18px; letter-spacing:.3px;}
.f-menu li a{font-size:16px; color:#888; display:block; padding:5px 0; transition:color .2s;}
@media (hover:hover) and (pointer: fine) {
    .f-menu li a:hover{color:var(--accent);}
}
.f-family .f-heading{font-size:14px; font-weight:800; color:#fff; margin-bottom:18px;}
.f-select{appearance:none;width:100%;background-color:#1a1a1a;border:1px solid #2a2a2a;color:#aaa;padding-block: clamp(11px, 2vw, 14px);padding-inline: 16px 40px;font-size: var(--text-16);font-family:inherit;cursor:pointer;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:calc(100% - 16px) center;background-size:12px 8px;}
.f-select::-ms-expand{display:none;}
/* FAMILY SITE 선택 시 빨간 아웃라인 제거 (대신 밝은 테두리로 포커스 표시) */
.f-select:focus,
.f-select:focus-visible{outline:none; border-color:#888;}
.f-sns{display:flex; gap:8px; margin-top:18px;}
.f-sns a{width: clamp(40px, 5vw, 48px);aspect-ratio: auto 1;display:grid;place-items:center;background:#1a1a1a;border-radius:50%;color:#888;transition:all .2s;}
@media (hover:hover) and (pointer: fine) {
    .f-sns a:hover{background:var(--primary); color:#fff;}
}
.f-sns svg{width:20px; height:20px; fill:currentColor;}
/* 네이버 로고는 24x24 전체를 채우는 마크라 상대적으로 커 보여 축소 */
.f-sns a.sns-naver svg{width:15px; height:15px;}
.footer-bot{display:flex;justify-content:space-between;align-items:center;padding-block: clamp(20px, 2.8vw, 28px);font-size: var(--text-15);color:#888;flex-wrap:wrap;gap: 16px 12px;}
.footer-bot .links{display:flex;gap: clamp(25px, 3.8vw, 38px);flex-wrap: wrap;}
.footer-bot .links a{transition:color .2s;}
@media (hover:hover) and (pointer: fine) {
    .footer-bot .links a:hover{color:#fff;}
}
.footer-bot .links b{color:#fff; font-weight:600;}
.footer-bot .designed-by{margin-left:14px; color:#777;}

/*─────────────────────────────────────────────────────────
    Side FAB
─────────────────────────────────────────────────────────*/
.side-fab{position:fixed;right: clamp(15px, 2.4vw, 24px);bottom: clamp(20px, 3.2vw, 32px);z-index:90;display:flex;flex-direction:column;gap:0;}
.side-fab a,.side-fab button{display:flex;flex-direction:column;align-items:center;justify-content:center;width: clamp(40px, 6vw, 60px);height: clamp(40px, 6vw, 60px);background:#fff;border:1px solid var(--gray-200);border-radius:50%;color:#111;box-shadow:0 10px 30px rgba(0,0,0,.08);transition: all 0.4s;text-align:center;}
.side-fab .contact{background:var(--gradient); color:#fff; border-color:transparent;}
@media (hover:hover) and (pointer: fine) {
    .side-fab a:hover,.side-fab button:hover{background:var(--gradient); color:#fff; transform:translateY(-2px); border-color:transparent;}
    .side-fab .contact:hover{filter:brightness(1.08);}
    .side-fab .top:hover{background:#111; color:#fff; border-color:#111;}
}
.side-fab svg{width: clamp(20px, 2.6vw, 26px);aspect-ratio: auto 1;stroke:currentColor;fill:none;stroke-width:1.8;}
/* 문의(말풍선) 아이콘은 채워진 형태 */
.side-fab .contact svg{fill:currentColor; stroke:none;}
/* TOP 버튼: 처음엔 숨겨져(문의하기가 하단 차지), 스크롤 시 아래에서 위로 밀고 올라옴 */
.side-fab .top{margin-top: clamp(5px, 1.2vw, 12px);transform:translateY(0);}
    body:not(:has(#header.on)) .side-fab .top{height:0;margin-top:0;opacity:0;visibility:hidden;overflow:hidden;transform:translateY(24px);transition:all .35s cubic-bezier(.22,.9,.3,1);}
.side-fab .top svg{stroke-width:2.2;}

/*─────────────────────────────────────────────────────────
    Responsive
─────────────────────────────────────────────────────────*/
@media (max-width:1200px) {
    #header .gnb{display: none;}
}
@media (max-width:1180px){
    .gnb>li>a{padding:0 18px; font-size:14.5px;}
    .allmenu-grid{grid-template-columns:repeat(4,1fr);}
    .biz-grid{grid-template-columns:repeat(2,1fr);}
    .news-grid{grid-template-columns:repeat(2,1fr);}
    .about-slim{gap:50px;}
}
/* 모바일: PC 이미지 숨기고 모바일 이미지 노출 */
@media (max-width:600px){
    .hero .thumb .for_pc{display:none;}
    .hero .thumb .for_m{display:block;}
}
@media (max-width:900px){
    .header .wrap{padding-inline:20px;}
    .header-inner::after{content:none;}
    .gnb,.util-menu,.lang-select,.h-actions .icon-btn:not(.menu-toggle){display:none;}
    .mobile-toggle{display:none;}
    .header-inner{height:64px;}
    .hero .swiper-slide{height:auto; padding:88px 0 72px; min-height:560px;}
    .hero-content{max-width:100%;}
    /* 모바일에서는 메인 비주얼 CTA 버튼을 노출하지 않는다 */
    .hero-cta{display:none;}
    .hero p{margin-bottom:0;}
    .hero-scroll{display:none;}
    /* 헤드 + 전체보기 버튼을 세로로 쌓아 넘침 방지 */
    .biz-head,.news-head{flex-direction:column; align-items:flex-start; gap:24px; margin-bottom:40px;}
    .news-grid{grid-template-columns:1fr;}
    /* 모바일: 사업영역은 가로 슬라이드(스와이프)로 노출 */
    .biz-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;scroll-padding-left:20px;touch-action:pan-x pan-y;width: calc(100% + 60px);margin-left: -30px;padding-inline: 30px;}
    .biz-grid::-webkit-scrollbar{display:none;}
    .biz-grid > .biz-card{flex:0 0 82%; scroll-snap-align:center;}
    .biz-grid > .biz-card.reveal{opacity:1; transform:none;}
    .about-slim{gap:44px;}
    .about-meta{grid-template-columns:repeat(2,1fr);}
    .about-meta .meta-item{padding:24px 16px; border-bottom:1px solid rgba(255,255,255,.14);}
    .about-meta .meta-item:first-child{padding-left:0;}
    .about-meta .meta-item:nth-child(2n){border-right:none; padding-right:0;}
    .about-meta .meta-item:nth-child(odd){padding-left:0;}
    .about-meta .meta-item:nth-last-child(-n+2){border-bottom:none;}
    /* 숫자 축소 (모바일 넘침 방지) */
    .about-meta .meta-item b,
    .about-meta .meta-item b:has([data-count]),
    .invest-grid{grid-template-columns:minmax(0,1fr);}
    .stock-card{padding:28px 22px;}
    .invest-grid .stock-price{flex-wrap:wrap; gap:8px 12px;}
    .cta-inner{flex-direction:column; align-items:flex-start; padding-block:60px;}
    .footer-top{grid-template-columns:1fr;}
    /* 모바일: 푸터 메뉴 숨김 */
    .f-menu{display:none;}
    /* 모바일 전체메뉴: 헤더(로고/닫기)를 본문 콘텐츠 좌우 끝에 정렬 */
    /* 모바일 전체메뉴: 1차 메뉴 + 우측 화살표 아코디언 (탭하면 2차 메뉴 노출) */
    .allmenu .h-actions{display: flex;justify-content: flex-end;flex-wrap: wrap;}
    .allmenu :is(.util-menu, .lang-select){display: flex;flex-wrap: wrap;}
    .allmenu .h-actions .icon-btn:not(.menu-toggle){display: flex;}
    .allmenu-body{padding-block: 16px 60px;}
    .allmenu-grid{grid-template-columns:1fr; gap:0;}
    .allmenu-col{border-bottom:1px solid var(--gray-200);}
    .allmenu-col h2{display:flex; align-items:center; justify-content:space-between; margin:0; padding:18px 2px; border-bottom:none; cursor:pointer; font-size:18px;}
    .allmenu-col h2::after{content:''; position:static; left:auto; bottom:auto; width:9px; height:9px; background:none; border-right:2px solid var(--gray-500); border-bottom:2px solid var(--gray-500); transform:rotate(45deg); transition:transform .25s; margin-top:-4px;}
    .allmenu-col.open h2::after{transform:rotate(-135deg); margin-top:4px;}
    .allmenu-col ul{display:none; padding:2px 2px 18px;}
    .allmenu-col.open ul{display:block;}
    .biz,.about,.news,.invest{padding:80px 0;}
    /* 모바일: 메인 슬라이드 버튼 축소 + 가운데 정렬 */
    /* 모바일: 하단 링크 위, 카피라이트(ALL RIGHTS RESERVED)를 아래로 */
    .footer-bot{flex-direction:column-reverse;align-items:flex-start;}
    /* 모바일: Designed by DESIGNART 문구를 카피라이트 아래로 */
    .footer-bot .designed-by{display:block; margin-left:0; margin-top:6px;}
    .hero-cta{justify-content:center; align-items:center; gap:10px;}
    .hero-cta .btn{min-width:0; flex:1 1 auto; max-width:180px; padding:13px 16px; font-size:15px;}
    /* 모바일: 회사소개 설명 텍스트 100% + 버튼 왼쪽 정렬 */
    .about-lead-row{flex-direction:column; align-items:flex-start; gap:22px;}
}


/*─────────────────────────────────────────────────────────
    Sub
─────────────────────────────────────────────────────────*/
    /* 비주얼 */
        .sub-visual{position: relative;min-height: clamp(400px, 60vw, 600px);padding-block: clamp(100px, 19.4vw, 194px) clamp(55px, 8.5vw, 80px);display: flex;flex-direction: column;font-family: var(--font-type02);gap: 30px; overflow: hidden;}
            .sub-visual::before{position: absolute; content:''; inset:0; background: url('/images/sv_thumb.jpg') no-repeat center / cover; scale: 1.1;}
            body:has(.gnb > li:nth-child(2).on) .sub-visual::before{background-image: url('/images/sv_product.jpg');}
            body:has(.gnb > li:nth-child(3).on) .sub-visual::before{background-image: url('/images/sv_invest.jpg');}
            body:has(.gnb > li:nth-child(4).on) .sub-visual::before{background-image: url('/images/sv_cyber.jpg');}
            body:has(.gnb > li:nth-child(5).on) .sub-visual::before{background-image: url('/images/sv_recruit.jpg');}
            body:has(.gnb > li:nth-child(6).on) .sub-visual::before{background-image: url('/images/sv_esg.jpg');}
            .sub-visual.on::before{scale: 1; transition: all 3s 0.2s;}

        .sub-visual .cont{margin-bottom: clamp(40px, 4.8vw, 48px);display: flex;flex-direction: column;justify-content: space-between;flex-grow: 1; opacity: 0; translate: clamp(50px, 7vw, 70px);}
            .sub-visual.on .cont{opacity: 1; transition: all 1.2s 0.2s; translate: 0;}
        .sub-visual .title{color: var(--point-white);display: grid;gap: var(--row-gap20);}
        .sub-visual .title h2{font-size: var(--text-20);font-weight: 500;line-height: 1.4;}
        .sub-visual .title h3{font-size: var(--text-60);font-weight: 500;line-height: 1.4;letter-spacing: -0.03em;}
        .sub-visual .nav-desc{display: flex;align-items: center;flex-wrap: wrap;color: var(--point-white);opacity: 0.8; gap: 8px 0;}
        .sub-visual .nav-desc:not(:has(dd)){display: none;}
        .sub-visual .nav-desc :where(dt, dd){display: flex;align-items: center;flex-wrap: wrap;gap: 4px 0;}
        .sub-visual .nav-desc :where(dt, dd):not(:last-child)::after{display: inline-flex;content:'';width: clamp(3px, 0.6vw, 4px);aspect-ratio: auto 1;background: rgb(255 255 255 / 30%);border-radius: 100%;margin-inline: clamp(13px, 2vw, 20px);}
        .sub-visual .nav-desc dt a{width: clamp(15px, 2vw, 18px);}
        .sub-visual .nav-desc dd{font-size: var(--text-18);font-weight: 300;line-height: 1.4;}
        .sub-visual .nav-desc dd:last-child{font-weight:500;}
        .sec-cate{position: absolute;left: 0;bottom: 0;width: 100%;background: rgb(0 0 0 / 60%);z-index: 2;}
        .sec-cate .w_custom{display: flex;width: 100%;}
            .sec-cate .w_custom {-ms-overflow-style: none;scrollbar-width: none;}
            .sec-cate .w_custom::-webkit-scrollbar {display: none;}
        .sec-cate a{display: flex;align-items: center;justify-content: center;text-align: center;width: 100%;min-height: clamp(55px, 8.5vw, 80px);font-size: var(--text-20);font-weight: 400;color: var(--point-white);letter-spacing: 0;transition: all 0.4s;padding: 10px;}
        .sec-cate a.on{background: var(--point-white);color: var(--point-color01);-webkit-text-stroke: 0.5px var(--point-color01);}

            @media (hover:hover) and (pointer: fine) {
                .sec-cate a:not(.on):hover{background: var(--point-white); color: var(--point-color01);}
            }

        @media (max-width:1200px) {
            .sec-cate .w_custom{overflow: hidden; overflow-x: auto;}
            .sec-cate a{flex-shrink: 0;width: auto;min-width: clamp(120px, 21vw, 200px);padding-inline: 30px;}
        }

    /* page-title */
        .page-title{position: relative;text-align: center;display: flex;flex-direction: column;gap: var(--row-gap20);text-wrap: balance;}
            .page-title.hd{margin-bottom: var(--row-gap60);}
            .page-title.hd-m{margin-bottom: var(--row-gap40);}
            .page-title.hd-xm{margin-bottom: var(--row-gap80);}
            .page-title.hd-l{margin-bottom: var(--row-gap100);}
            .page-title.left{text-align: left;}
        .page-title h2{font-size: var(--text-50);font-weight: 600;color: var(--black-color00);line-height: 1.4;letter-spacing: -0.03em;}
        .page-title h2 em{color: var(--point-color01);}
        .page-title h3{font-size: var(--text-32);font-weight: 400;color: var(--black-color02);line-height: 1.4;letter-spacing: -0.03em;}
        .page-title h3 em{font-weight: 700;color: var(--point-color01);}
            .page-title h3.line{border-top: 1px solid var(--border-color02);margin-top: var(--row-gap20);padding-top: var(--row-gap60);}
        .page-title p{font-size: var(--text-20);color: var(--black-color05);line-height: 1.4;letter-spacing: -0.03em;}

    /* sec-title */
        .sec-title{position: relative; margin-bottom: var(--row-gap20);}
            .sec-title.btwn{display: flex;align-items: flex-end;justify-content: space-between;flex-wrap: wrap;gap: clamp(10px, 1.5vw, 15px) 30px;}
            .sec-title.hd-l{margin-bottom: var(--row-gap40);}
        .sec-title h3{font-size: var(--text-36);font-weight: 500;color: var(--black-color01);line-height: 1.4;font-family: var(--font-type01);letter-spacing: -0.03em;}
        .sec-title h4{position: relative;font-size: var(--text-30);font-weight: 600;color: var(--black-color01);line-height: 1.4;letter-spacing: -0.03em;}
        .sec-title h4.bullet{display: flex;align-items: baseline;gap: clamp(10px, 1.4vw, 12px);}
        .sec-title h4.bullet::before{display:inline-flex;content:'';width: clamp(6px, 1vw, 8px);aspect-ratio: auto 1;flex-shrink: 0;background: var(--point-color01);translate: 0 clamp(-7px, -0.9vw, -4px);}
        .sec-title h4:has(small){display: flex;align-items: baseline;gap: clamp(15px, 2vw, 20px);flex-wrap: wrap;}
        .sec-title h4.bullet em{display: flex;align-items: center;gap: clamp(15px, 2vw, 20px);flex-wrap: wrap;}
        .sec-title h4.bullet small{font-size: var(--text-18);font-weight: 400;color: var(--black-color08);}
        .sec-title h4 small{font-size: var(--text-20);font-weight: 500;color: var(--black-color03);font-family: var(--font-type01);}
            .sec-title h4 + p.sm{margin-top: var(--row-gap20);}
        .sec-title h6{position: relative;font-size: var(--text-22);font-weight: 500;color: var(--black-color01);line-height: 1.4;letter-spacing: -0.03em;font-family: var(--font-type01);}
        .sec-title h6.bullet{display: flex;align-items: baseline;gap: clamp(10px, 1.4vw, 12px);}
        .sec-title h6.bullet::before{display:inline-flex;content:'';width: clamp(6px, 1vw, 8px);aspect-ratio: auto 1;flex-shrink: 0;background: var(--point-color01);translate: 0 clamp(-4px, -0.6vw, -2px);}
        .sec-title p{font-size: var(--text-20);color: var(--black-color08);letter-spacing: -0.03em;}
        .sec-title p.sm{font-size: var(--text-18); color: var(--black-color04); line-height: 1.6;}

    /* overview-meta */
        .overview-meta{position: relative;display: grid;gap: var(--row-gap60);}
        .overview-meta .bnr-desc{position: relative;min-height: clamp(320px, 46vw, 460px);display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;padding: var(--row-gap120) 20px;}
        .overview-meta .bnr-desc dt{position: absolute;inset: 0;overflow: hidden;}
        .overview-meta .bnr-desc dt img{width:100%;height: 100%;object-fit: cover;}
        .overview-meta .bnr-desc dd{position: relative;font-size: var(--text-40);font-weight: 500;color: var(--point-white);line-height: 1.4;}
        .overview-meta .title{position: relative;}
        .overview-meta .title h3{font-size: var(--text-32);font-weight: 600;color: var(--black-color01);line-height: 1.3;letter-spacing: -0.03em;}
        .overview-meta .exp{display: grid;gap: var(--row-gap20);}
        .overview-meta .exp::before{display: flex;content:'';background: linear-gradient(90deg,rgba(232, 52, 28, 1) clamp(50px, 10vw, 100px), rgba(221, 221, 221, 1) clamp(50px, 10vw, 100px));width: 100%;height: 2px;margin-block: var(--row-gap50) var(--row-gap20);}
        .overview-meta .exp p{font-size: var(--text-20);color: var(--black-color03);line-height: 1.8;letter-spacing: -0.03em;}
        .overview-meta .exp p strong{font-weight: 600;}
        .overview-meta .exp p em{font-weight: 600;color: var(--point-color01);}

    /* greetings-meta */
        .greetings-meta{padding-top: clamp(30px, 6vw, 60px);display: flex;gap: var(--row-gap35) clamp(50px, 5.21vw, 100px);}
        .greetings-meta .info{width: min(580px, 42%);flex-shrink: 0;display: flex;flex-direction: column;gap: var(--row-gap45);}
        .greetings-meta .thumb{position: relative;}
        .greetings-meta .thumb::before{position: absolute;content:'';width: clamp(70px, 14vw, 140px);aspect-ratio: auto 1;background: var(--gradient-01);top: clamp(-60px, -6vw, -30px);left: clamp(-60px, -6vw, -30px);}
        .greetings-meta .thumb img{position: relative;}
        .greetings-meta .sign{display: flex;align-items: center;flex-wrap: wrap;gap: 10px 20px;}
        .greetings-meta .sign dt{font-size: var(--text-18);font-weight: 500;color: var(--black-color04);}
        .greetings-meta .sign dd{font-size: var(--text-40);font-weight: 600;color: var(--black-color01);display: flex;align-items: center;flex-wrap: wrap;gap: clamp(10px, 1.5vw, 15px);}
        .greetings-meta .sign-img{display: inline-flex;max-width: clamp(100px, 18vw, 170px);}
        .greetings-meta .cont{display: flex;flex-direction: column;gap: var(--row-gap40);}
        .greetings-meta .title{position: relative; display: grid;gap: var(--row-gap10);}
        .greetings-meta .title.bg{padding-block: var(--row-gap50);}
        .greetings-meta .title.bg::before{position: absolute;content: '';width: 150vw;height: 100%;background: var(--gray-bg01);z-index: -1;top: 0;left: -100px;}
        .greetings-meta .title h3{font-size: var(--text-32);font-weight: 400;color: var(--black-color00);line-height: 1.4;letter-spacing: -0.03em;}
        .greetings-meta .title h3 em{font-weight: 700; color: var(--point-color01);}
        .greetings-meta .title h4{font-size: var(--text-24);font-weight: 600;color: var(--black-color02);letter-spacing: -0.03em;}
        .greetings-meta .title h4 + p{margin-top: var(--row-gap10);}
        .greetings-meta .title p{font-size: var(--text-16);line-height: 1.8;color: var(--black-color05);letter-spacing: -0.03em;}
        .greetings-meta .title p strong{font-weight: inherit;color: var(--black-color02);line-height: 1.6;display: inline-block;}

        @media (max-width:1023px) {
            .greetings-meta{flex-wrap: wrap;}
            .greetings-meta .info{width: auto;flex-shrink: unset;}
        }

    
    /* bullet-list */
        .bullet-list{position: relative;width: 100%;display: flex;flex-direction: column;gap: clamp(13px, 2.2vw, 22px);}
        .bullet-list > li{position: relative;font-size: var(--text-20);color: var(--black-color05);line-height: 1.4;display: flex;align-items: baseline;gap: var(--row-gap10);letter-spacing: -0.03em;}
        .bullet-list > li::before{display: inline-flex;content:'';width: 3px;aspect-ratio: auto 1;border-radius: 100%;background: currentColor;flex-shrink: 0;translate: 0 clamp(-4px, -0.8vw, -6px);}
        .bullet-list > li em{display: contents; font-weight: 600; color: var(--point-color01);}

            .bullet-list.type02{gap: var(--row-gap10);}
            .bullet-list.type02 > li{font-size: var(--text-18); line-height: 1.66; color: var(--black-color05);}

    /* history-meta */
        body:has(.his-tab) #header{position: relative; inset: auto;}
        .his-tab{position: sticky;top:0;z-index: 3;background: var(--point-white); margin-bottom: var(--row-gap60);}
        .his-tab .w_custom{display: flex;}
        .his-tab .w_custom::before{position:absolute;content:'';inset: 0;border: 1px solid var(--border-color01);pointer-events: none;}
        .his-tab a{position: relative;display: flex;align-items: center;justify-content: center;text-align: center;font-size: var(--text-22);font-weight: 500;color: var(--black-color06);width: 100%;min-height: clamp(60px, 7.5vw, 70px);box-shadow: inset 1px 1px 0 var(--border-color01);transition: all 0.4s;padding: 10px;line-height: 1.4;}
            .his-tab a::before{position: absolute;content:'';inset: 0;border: 2px solid var(--point-color01);opacity: 0;pointer-events: none;}
            .his-tab a.on{color: var(--point-color01);}
            .his-tab a.on::before{opacity: 1;}
        .history-meta{position: relative;}
        .history-meta section{position: relative;display: flex;align-items: flex-start;gap: var(--row-gap70) clamp(70px, 6.25vw, 120px); transition: all 0.4s;}
            .history-meta section:not(.on){opacity: 0; height: 0; overflow: hidden;}
        .history-meta .info{position: sticky;top: clamp(90px, 12.1dvh, 110px);width: min(580px, 42%);flex-shrink: 0;display: flex;flex-direction: column;gap: var(--row-gap40);}
        .history-meta .title{display: grid;gap: clamp(10px, 2.2dvh, 20px);}
        .history-meta .title h2{font-size: var(--text-20);font-weight: 500;color: var(--black-color05);font-family: var(--font-type01);letter-spacing: -0.03em;}
        .history-meta .title h3{font-size: var(--text-60);font-weight: 600;line-height: 1.3;font-family: var(--font-type01);letter-spacing: -0.03em;background: var(--gradient-01);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
        .history-meta .title h3 + h4{margin-top: var(--row-gap10);}
        .history-meta .title h4{font-size: var(--text-22);font-weight: 600;color: var(--black-color03);letter-spacing: -0.03em;}
        .history-meta .title p{font-size: var(--text-18);color: var(--black-color05);letter-spacing: -0.03em;}
        .history-meta .thumb{position: relative;overflow: hidden;width: fit-content;}
        .history-meta .thumb img{width: 100%; height: 100%; object-fit: cover;}
        .history-meta .exp{position: relative;width: 100%;}
        .history-meta .item-desc{position: relative;padding-left: clamp(70px, 4.7vw, 89px);display: grid;gap: clamp(15px, 2.7vw, 27px);padding-bottom: clamp(35px, 5vw, 50px);}
            .history-meta .item-desc:last-child{padding-bottom:0;}
            .history-meta .item-desc::before{position: absolute;content:'';width: clamp(7px, 0.9vw, 9px);aspect-ratio: auto 1;border-radius: 100%;background: var(--black-color08);top: clamp(11px, 1.6vw, 16px);left: 0;z-index: 1;transition: all 0.4s;}
            .history-meta .item-desc.on::before{background: var(--point-color01);}
            .history-meta .item-desc.on:not(:has(~ .on))::before{box-shadow: 0 0 0 clamp(5px, 0.6vw, 6px) rgb(232 52 28 / 20%);}
        .history-meta .item-desc dt{font-size: var(--text-32);font-weight: 500;color: var(--black-color00);line-height: 1.4;font-family: var(--font-type01);}
        .history-meta .item-desc dd{font-size: var(--text-20);color: var(--black-color05);line-height: 1.4;}
        .history-meta .item-desc .line{position: absolute;top: clamp(16px, 2vw, 20px);left: clamp(3px, 0.4vw, 4px);width: 1px;height: 100%;background: var(--border-color04);}
        .history-meta .item-desc .line span{position: absolute;top:0;left:0;width: 100%;background: var(--point-color01);}
        .history-meta .item-desc:last-child .line{display: none;}

            @media (hover:hover) and (pointer: fine) {
                .his-tab a:not(.on):hover{color: var(--point-color01);}
            }

            @media (min-width:1024px) {
                .history-meta .info{gap: clamp(20px, 4.4dvh, 40px);}
                .history-meta .title{gap: clamp(10px, 2.2dvh, 20px);}
                .history-meta .title h2{font-size: clamp(14px, 2.2dvh, 20px);}
                .history-meta .title h4{font-size: clamp(15px, 2.45dvh, 22px);}
                .history-meta .title p{font-size: clamp(13px, 2dvh, 18px);}
                .history-meta .thumb{height: clamp(200px, 44dvh, 400px);}
            }

        @media (max-width:1023px) {
            .history-meta section{flex-wrap: wrap;}
            .history-meta .info{position: relative; inset: auto; width: 100%; flex-shrink: unset;}
            .history-meta .item-desc{padding-left: clamp(35px, 7vw, 70px);}
        }

    /* manage-diagram */
        .manage-diagram{position: relative;width: fit-content;margin-inline: auto; margin-bottom: 376px;}
        .manage-diagram .circle{position: relative;width: 740px;width: clamp(500px, 38.6vw, 740px);aspect-ratio: auto 1.154;background: url('/images/management01.png') no-repeat center / cover;display: flex;align-items: center;justify-content: center;text-align: center;}
        .manage-diagram .circle-desc{position: relative;width: 43%;aspect-ratio: auto 1;translate: 0 -6.3%;display: flex;align-items: center;justify-content: center;flex-direction: column;gap: var(--row-gap10);}
        .manage-diagram .circle-desc dt{font-size: var(--text-20);color: var(--black-color05);font-family: var(--font-type01);}
        .manage-diagram .circle-desc dd{font-size: var(--text-30);font-size: clamp(22px, 1.6vw, 30px);font-weight: 600;color: var(--black-color02);line-height: 1.4;letter-spacing: -0.03em;}
        .manage-diagram .circle-desc dd em{color: var(--point-color01);}
        .manage-diagram .item-list > li{position: absolute;top: -2%;right: 99%;text-align: right;width: max-content;}
        .manage-diagram .item-list .icon{display: none;}
        .manage-diagram .info-desc{display: grid;gap: clamp(10px, 1.7vw, 17px);}
        .manage-diagram .info-desc dt{font-size: var(--text-30);font-weight: 600;color: var(--black-color01);display: grid;gap: clamp(8px, 1.2vw, 12px);letter-spacing: -0.03em;}
        .manage-diagram .info-desc dt em{font-size: var(--text-20);color: var(--point-color01);}
        .manage-diagram .info-desc dd{font-size: var(--text-20);color: var(--black-color05);letter-spacing: -0.03em;transition: all 0.4s;text-wrap: balance;}

            .manage-diagram .item-list > li:nth-child(2){right: auto;left: 98%;text-align: left;}
            .manage-diagram .item-list > li:nth-child(3){top: 56.5%;right: 105%;}
            .manage-diagram .item-list > li:nth-child(4){top: 56.5%;right: auto;left: 104%;text-align: left;}
            .manage-diagram .item-list > li:nth-child(5){top: calc(100% + 20px);right: 50%;translate: 50%;text-align: center;}

            @media (min-width:1024px) {
                .manage-diagram .info-desc :is(dt em, dd){font-size: clamp(16px, 1.1vw, 20px);}
                .manage-diagram .circle-desc dt{font-size: clamp(16px, 1.1vw, 20px);}
                .manage-diagram :is(.info-desc dt, .circle-desc dd){font-size: clamp(22px, 1.6vw, 30px);}
                .manage-diagram .info-desc dd{opacity: 0;}
                .manage-diagram .info-desc:hover dd{opacity: 1;}
            }

        @media (max-width:1023px) {
            .manage-diagram{width: 100%;display: grid;gap: var(--row-gap100); margin-bottom: var(--row-gap140);}
            .manage-diagram .circle{background: none;width: min(300px, 80%);aspect-ratio: auto 1;background: var(--gray-bg06);border-radius: 100%;margin-inline: auto;}
            .manage-diagram .circle::before{position: absolute;content:'';width: 120%;aspect-ratio: auto 1;border: 1px dashed var(--point-color01);border-radius: 100%;}
            .manage-diagram .circle-desc{width: calc(100% - clamp(30px, 4.5vw, 40px));height: calc(100% - clamp(30px, 4.5vw, 40px));background: var(--point-white);border-radius: inherit;translate: 0;box-shadow: var(--shadow-02);}
            .manage-diagram .item-list{display: grid;grid: auto / repeat(2, 1fr);gap: var(--row-gap60) 20px;}
            .manage-diagram .item-list > li{position: relative;inset: auto !important;text-align: left !important;translate: 0 !important;width: auto;display: flex;align-items: flex-start;gap: clamp(25px, 4vw, 40px);}
            .manage-diagram .item-list .icon{display: flex;align-items: center;justify-content: center;inline-size: clamp(70px, 12vw ,120px);aspect-ratio: auto 1;background: var(--point-color06);padding: 15px;flex-shrink: 0;}

            .manage-diagram .item-list > li:nth-child(2) .icon{background: var(--point-color07);}
            .manage-diagram .item-list > li:nth-child(3) .icon{background: var(--point-color08);}
            .manage-diagram .item-list > li:nth-child(4) .icon{background: var(--point-color01);}
            .manage-diagram .item-list > li:nth-child(5) .icon{background: var(--point-color09);}
        }
        @media (max-width:860px) {
            .manage-diagram .item-list{grid: auto / repeat(1, 1fr);}
            .manage-diagram .info-desc dd br{display: none;}
        }

    /* manage-info */
        .manage-info{display: grid;gap: var(--row-gap60);}
        .manage-info .thumb{position: relative;}
        .manage-info .title{display: grid;gap: 10px;text-align: center;text-wrap: balance;}
        .manage-info .title h3{font-size: var(--text-30);font-weight: 300;color: var(--black-color00);line-height: 1.4;letter-spacing: -0.03em;}
        .manage-info .title h3 em{font-weight:500;color: var(--point-color01);}
        .manage-info .title h3 + p{margin-top: var(--row-gap20);}
        .manage-info .title p{font-size: var(--text-20);color: var(--black-color05);line-height: 1.8;letter-spacing: -0.03em;}

    /* 파트너사 */
        .partners .bnr-list{display: grid;grid: auto / repeat(5, 1fr);gap: var(--col-gap20);}
        .partners .bnr-list > li{position: relative;display: flex;align-items: center;justify-content: center;overflow: hidden;background: var(--point-white);aspect-ratio: auto 2.2;}
        .partners .bnr-list > li::before{position:absolute;content:'';inset: 0;border: 1px solid var(--border-color01); pointer-events: none}

        @media (max-width:1023px) {
            .partners .bnr-list{grid: auto / repeat(4, 1fr);}
        }
        @media (max-width:640px) {
            .partners .bnr-list{grid: auto / repeat(3, 1fr);}
        }
        @media (max-width:479px) {
            .partners .bnr-list{grid: auto / repeat(2, 1fr);}
        }

    /* tab-nav */
        .tab-nav{display: flex;justify-content: center;box-shadow: var(--shadow-03);width: fit-content;margin-inline: auto;margin-bottom: var(--row-gap80);}
        .tab-nav::before{position: absolute;content:'';inset: 0;border: 1px solid var(--border-color01);pointer-events: none;z-index: 1;}
        .tab-nav a{position: relative;display: flex;align-items: center;justify-content: center;text-align: center;font-size: var(--text-20);color: var(--black-color05);font-family: var(--font-type01);line-height: 1.4;min-width: clamp(150px, 25vw, 240px);min-height: clamp(56px, 7.1vw, 66px);padding: 10px 15px;background: var(--point-white);box-shadow: inset 1px 1px var(--border-color01);transition: all 0.4s;}
        .tab-nav a.on{background: var(--point-color02);color: var(--point-white);box-shadow: inset 1px 1px var(--point-color02);z-index: 2;}

            /* over */
            @media (hover:hover) and (pointer: fine) {
                .tab-nav a:not(.on):hover{background: var(--point-color02);color: var(--point-white);box-shadow: inset -1px -1px var(--point-color02), inset 0px 1px var(--point-color02); z-index: 1;}
            }

        @media (max-width:640px) {
            .tab-nav{width: 100%;flex-wrap: wrap;}
            .tab-nav a{width: 100%;}
        }

    /* ate-title */
        .ate-title{position: relative;text-align: center;text-wrap: balance;display: grid;gap: var(--row-gap30); margin-bottom: var(--row-gap70);}
        .ate-title h3{font-size: var(--text-32);font-weight: 400;color: var(--black-color02);line-height: 1.4;letter-spacing: -0.03em;}
        .ate-title h3 em{color: var(--point-color01);font-weight: 700;}
        .ate-title p{font-size: var(--text-20);color: var(--black-color06);line-height: 1.4;letter-spacing: -0.03em;}

    /* ate-meta */
        .ate-meta{position: relative;width: fit-content;margin-inline: auto;}
        .ate-meta .map{position: relative;}
        .ate-meta .anchor-list > li{position: absolute;top: 35.4%;right: 18%;width: clamp(6px, 1vw, 14px);aspect-ratio: auto 1;cursor: pointer;background: var(--black-color05);border-radius: 100%;transition: all 0.4s;}
        .ate-meta .anchor-list > li::before{position:absolute;content:'';width: clamp(18px, 4.2vw ,80px);aspect-ratio: auto 1;border-radius: inherit;background: var(--black-color08);opacity: 0.2;top: 50%;left: 50%;translate: -50% -50%;transition: inherit;}
        .ate-meta .anchor-list span{position: absolute;top: 50%;right: calc(100% + clamp(15px, 3vw, 55px));translate: 0 -50%;width: max-content;text-align: right;font-size: clamp(11px, 1.3vw, 20px);font-weight: 600;color: var(--black-color05);font-family: var(--font-type01);letter-spacing: 0;}
        .ate-meta .anchor-list > li.on{background: var(--point-color01);z-index: 1;}
        .ate-meta .anchor-list > li.on::before{background: inherit;}
        .ate-meta .anchor-list > li.on span{color: var(--point-color01);}

            .ate-meta .anchor-list > li.japan{position: absolute;top: 29.5%;right: 11.5%;}
            .ate-meta .anchor-list > li.japan span{right: auto;left: calc(100% + clamp(15px, 3vw, 55px));}
            .ate-meta .anchor-list > li.vietnam{top: 45%;right: 21%;}
            .ate-meta .anchor-list > li.africa{top: 56%;right: 48%;}
            .ate-meta .anchor-list > li.asia{top: 56%;right: 17%;}
            .ate-meta .anchor-list > li.asia span{right: auto;left: calc(100% + clamp(15px, 3vw, 55px));}
            .ate-meta .anchor-list > li.north{top: 28%;right: 85%;}
            .ate-meta .anchor-list > li.north span{right: auto;left: calc(100% + clamp(15px, 3vw, 55px));}
            .ate-meta .anchor-list > li.europe{top: 21%;right: 49.5%;}
            .ate-meta .anchor-list > li.south{top: 68.5%;right: 75%;}
            .ate-meta .anchor-list > li.south span{inset: auto;top: calc(100% + clamp(10px, 2.61vw, 50px));left: 50%;translate: -50%;}

            /* over */
            @media (hover:hover) and (pointer: fine) {
                .ate-meta .anchor-list > li:not(.on):hover{background: var(--point-color01);z-index: 2;}
                .ate-meta .anchor-list > li:not(.on):hover::before{background: inherit;}
            }

        @media (max-width:640px) {
            .ate-meta .anchor-list > li.asia span{inset: auto; top: calc(100% + clamp(10px, 2.61vw, 50px));left: 50%;translate: -50%;}
            .ate-meta .anchor-list > li.japan span{inset: auto; bottom: calc(100% + clamp(15px, 3vw, 55px));left: 50%;translate: -50%;}
            .ate-meta .anchor-list > li.north span{inset: auto; top: calc(100% + clamp(10px, 2.61vw, 50px));left: 50%;translate: -50%;}
        }

    /* ate-items */
        .ate-items{position: relative;margin-top: var(--row-gap60);}
        .ate-items section{position: relative;display: grid;gap: var(--row-gap30); transition: all 0.4s;}
        .ate-items section:not(.on){opacity: 0; height: 0; overflow: hidden; translate: 0 50px;}
        .ate-items .title{position: relative;}
        .ate-items .title h3{font-size: var(--text-36);font-weight: 500;color: var(--black-color02);line-height: 1.4;font-family: var(--font-type02);letter-spacing: 0;}
        .ate-items .cont-list{position: relative;border-top: 1px solid var(--black-color00);}
        .ate-items .cont-list > li{position: relative;padding: clamp(25px, 6vw, 60px) clamp(15px, 3vw, 30px);border-bottom: 1px solid var(--border-color01);display: flex;gap: var(--row-gap50) clamp(50px, 4.2vw, 80px);}
        .ate-items .info{position: relative;width: 100%;display: flex;flex-direction: column;gap: var(--row-gap40);}
        .ate-items .info-desc{display: grid;gap: var(--row-gap20);}
        .ate-items .info-desc dt{font-size: var(--text-20);color: var(--point-color01);font-family: var(--font-type02);}
        .ate-items .info-desc dd{font-size: var(--text-28);font-weight: 600;color: var(--black-color02);font-family: var(--font-type02);line-height: 1.4;}
        .ate-items .bullet-list > li{gap: clamp(10px, 2.2vw, 22px);}
        .ate-items .bullet-list > li::before{width: clamp(3px, 0.6vw, 6px);background: var(--black-color10);}
        .ate-items .bullet-list .desc{display: flex;align-items: baseline;gap: 15px;}
        .ate-items .bullet-list .desc dt{font-size: var(--text-22);font-weight: 500;color: var(--black-color02);min-width: clamp(65px, 12vw, 110px);flex-shrink: 0;}
        .ate-items .bullet-list .desc dd{width: 100%;}
        .ate-items .import{position: relative;width: 55%;min-height: clamp(300px, 40vw, 400px);flex-shrink: 0;}
        .ate-items .import iframe{width: 100%; height: 100%;}

        @media (max-width:1023px) {
            .ate-items .cont-list > li{flex-wrap: wrap;}
            .ate-items .import{width: 100%; flex-shrink: unset;}
        }

    /* loca-meta */
        .loca-meta{position: relative;box-shadow: inset 0 0 0 1px var(--border-color01);}
        .loca-meta .import{width: 100%;height: clamp(300px, 60vw, 600px);overflow: hidden;}
        .loca-meta .import iframe{width: 100%;height: 100%;}
        .loca-meta .info{padding: clamp(30px, 4vw, 40px) clamp(30px, 8vw, 80px);display: flex;align-items: center;gap: var(--row-gap40) 50px;}
        .loca-meta .title{width: min(400px, 34%);flex-shrink: 0;}
        .loca-meta .title h4{position: relative;font-size: var(--text-30);font-weight: 600;color: var(--black-color01);line-height: 1.4;letter-spacing: -0.03em;}
        .loca-meta .cont{position: relative;display: flex;flex-direction: column;gap: clamp(15px, 2vw, 20px);}
        .loca-meta .desc{position: relative;display: flex;align-items: baseline;gap: clamp(20px, 2.4vw, 20px);}
        .loca-meta .desc dt{position: relative;font-size: var(--text-18);font-weight: 500;color: var(--black-color02);letter-spacing: -0.03em;display: flex;align-items: baseline;gap: clamp(15px, 2vw, 20px);flex-shrink: 0;}
        .loca-meta .desc dt i{display: flex;align-items: center;justify-content: center;inline-size: clamp(26px, 4.2vw, 40px);aspect-ratio: auto 1;padding: clamp(7px, 1.2vw, 10px);background: var(--black-color02);flex-shrink: 0;}
        .loca-meta .desc dd{font-size: var(--text-18);color: var(--black-color05);width: 100%;}

        @media (max-width:1023px) {
            .loca-meta .info{flex-wrap: wrap;}
            .loca-meta .title{width: 100%; flex-shrink: unset;}
        }

     /* btn-wrap */
        .btn-wrap{display: flex; flex-wrap: wrap; justify-content: center; flex-wrap: wrap; gap: clamp(10px, 2vw, 20px); margin-top: var(--row-gap60);}
        .btn-wrap :where(button, a){display: flex;align-items: center;justify-content: center;text-align: center;font-size: var(--text-18);font-weight: 400;color: var(--point-white);background: var(--point-color01);border: 1px solid var(--point-color01);padding: 10px 25px;min-width: clamp(165px, 29vw, 280px);min-height: clamp(50px, 6.5vw ,60px);line-height: 1.2;transition: all 0.4s;}
        .btn-wrap :where(button, a).bk{border-color: var(--black-color03);background: var(--point-white);font-weight: 500;color: var(--black-color03);}
        .btn-wrap :where(button, a).dwn{gap: clamp(15px, 2vw, 20px);}
        .btn-wrap :where(button, a).dwn::after{display: inline-flex;content:'';width: clamp(15px, 2.4vw, 22px);aspect-ratio: auto 1;background: url('/images/dwn_i.svg') no-repeat center / 100% auto;transition: inherit;}

        @media (hover:hover) and (pointer: fine) {
            .btn-wrap :where(button, a):hover{background: var(--point-color02); border-color: var(--point-color02);}
            .btn-wrap :where(button, a).bk:hover{background: var(--black-color03); border-color: var(--black-color03); color: var(--point-white);}
            .btn-wrap :where(button, a).dwn:hover::after{filter: var(--filter-white);}
        }

    /* 인풋 */
        :where([type="text"], [type="password"], [type="email"], [type="tel"]){height: clamp(40px, 6vw, 44px);border: 0;border-bottom: 1px solid var(--black-color01);font-size: var(--text-16);font-weight: 400;color: var(--black-color01);border-radius: 0;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
        :where([type="text"], [type="password"], [type="email"], [type="tel"])::placeholder{color: rgb(17 17 17 / 60%);}

        textarea{width: 100%;border: 1px solid var(--black-color01);height: 150px;font-size: var(--text-16);font-weight: 400;color: var(--black-color01);padding: clamp(12px, 2vw, 15px) clamp(15px, 2vw, 20px);line-height: 1.6; resize: none;}
        textarea::placeholder{color: rgb(17 17 17 / 60%);}

        label{cursor: pointer;}

        label:has([type="checkbox"]){display: flex;width: fit-content;align-items: flex-start;gap: 10px;font-size: var(--text-16);font-weight: 500;color: var(--black-color01);line-height: 20px;}
        [type="checkbox"]{appearance: none;cursor: pointer;width: 20px;height: 20px;flex-shrink: 0;border: 1px solid var(--black-color00);display: flex;align-items: center;justify-content: center;}
        [type="checkbox"]::before{display: inline-flex;content:'';width: 10px;aspect-ratio: auto 1.25;background: url('/images/chk_i.svg') no-repeat center / 100% auto;opacity: 0.4;}
        [type="checkbox"]:checked{background: var(--point-color01);border-color: var(--point-color01);}
        [type="checkbox"]:checked::before{opacity: 1;filter: var(--filter-white);}


    /* 검색 */
        .search-from{display: flex;align-items: center;justify-content: center;flex-wrap: wrap;gap: 15px;margin-bottom: var(--row-gap60);}
        .search-from .keywords-box{width: 100%;display: flex;justify-content: center;align-items: center;gap: 10px;}
        .search-from .inp-box{position: relative;width: min(461px, 100%);}
        .search-from [type="text"]{width: 100%;height: clamp(45px, 6.5vw, 60px);padding-right: clamp(30px, 4.5vw, 40px);}
        .search-from button{position: absolute;top: 0;right: 0;width: clamp(25px, 4.5vw, 40px);height: 100%;background: url('/images/search_i.svg') no-repeat right center / clamp(16px, 2.2vw, 20px) auto;font-size: 0;}

    /* 페이징 */
        .pagination{display: flex;align-items: center;justify-content: center;text-align: center;flex-wrap: wrap;margin-top: var(--row-gap60);gap: clamp(8px, 1vw, 10px);}
        .pagination li{font-size: var(--text-16);color: var(--black-color08);}
        .pagination a{display: flex;align-items: center;justify-content: center;min-width: clamp(30px, 4.2vw, 40px);min-height: clamp(30px, 4.2vw, 40px);padding: 4px;}
        .pagination a.arw{font-size: 0;background: url('/images/pagination_last.svg') no-repeat center / auto clamp(8px, 1.2vw, 10px);padding: 0;border: 1px solid var(--border-color01);}
        .pagination a:is(.prev, .next){background-image: url('/images/pagination_prev.svg');}
        .pagination a.prev{margin-right: clamp(5px, 1vw, 10px);}
        .pagination a.next{margin-left: clamp(5px, 1vw, 10px);}
        .pagination a.first{margin-right:-5px;}
        .pagination a.last{margin-left:-5px;}
        .pagination a.disabled{display: none;}
        .pagination a.on{font-weight: 500;color: var(--point-white);background: var(--point-color01);}
        .pagination a.scale{scale: -1 -1;}

    /* 상세 */
        .board-view{position:relative;}
        .board-view .title-desc{border-top: 1px solid var(--black-color01);border-bottom: 1px solid var(--border-color01);text-align: center;padding-block: clamp(25px, 3.5vw, 35px);display: grid;gap: clamp(20px, 3vw, 30px);}
        .board-view .title-desc dt{display: grid;gap: var(--row-gap15);font-size: var(--text-30);font-weight: 500;color: var(--black-color01);}
        .board-view .title-desc dt i{display: flex;align-items: center;justify-content: center;width: fit-content;margin-inline: auto;font-size: var(--text-17);font-weight: 600;color: var(--point-color02);line-height: 1.2;border: 1px solid var(--point-color02);padding: clamp(3px, 0.8vw, 6px) clamp(10px, 2vw, 20px);}
        .board-view .title-desc dt small{font-size: var(--text-20);font-weight: 400;color: var(--black-color06);}
		.board-view .title-desc dd{font-size: var(--text-16);color: var(--black-color08);}
		.board-view .v-cont{font-size: var(--text-16);font-weight: 400;color: var(--black-color03);padding-block: var(--row-gap50);line-height: 1.7;border-bottom: 1px solid var(--border-color01);min-height: 200px;}

    /* write-form */
        .prefix-list{display: flex; margin-bottom: var(--row-gap60);}
        .prefix-list label{width: 100%;min-height: clamp(42px, 7vw, 50px);display: flex;align-items: center;justify-content: center;text-align: center;font-size: var(--text-18);font-weight: 500;color: var(--point-color02);border: 1px solid var(--point-color02);padding: 10px 15px;transition: all 0.4s;}
        .prefix-list label + label{margin-left:-1px;}
        .prefix-list label:has(:checked){background: var(--point-color02);color: var(--point-white);}
        .prefix-list [type="radio"]{appearance: none;}
        .write-form{position: relative;display: flex;flex-wrap: wrap;gap: clamp(20px, 3vw, 30px) var(--col-gap20);}
        .write-form .desc{width: calc(100% / 2 - var(--col-gap20) / 2);display: flex;flex-direction: column;gap: var(--row-gap10);}
        .write-form .desc:has(textarea, .db-captcha-img){width:100%;}
        .write-form .desc dt{font-size: var(--text-16);font-weight: 500;color: var(--black-color01);}
        .write-form .desc dd{appearance: none;}
        .write-form :where([type="text"], [type="password"], [type="email"], [type="tel"]){width:100%;}
        .captcha-box{display: flex;gap: var(--row-gap10) clamp(15px, 2vw, 20px);align-items: center;border-bottom: 1px solid var(--black-color01);padding-bottom: 8px;}
        .captcha-box .controller{display: flex;flex-shrink: 0;gap: 5px;align-items: center;}
        .captcha-box .controller img{cursor: pointer;}
        .captcha-box .controller button{position: relative;background: var(--point-white) url('/images/refresh.svg') no-repeat center;inline-size: 38px;aspect-ratio: auto 1;border: 1px solid var(--border-color01);}
        .captcha-box [type="text"]{border-bottom: 0;}

        @media (max-width:479px) {
            .write-form .desc{width:100%;}
        }
        @media (max-width:360px) {
            .captcha-box{flex-wrap: wrap;padding-bottom: 0;}
        }

    /* ci-info */
        .ci-info{position: relative;}
        .ci-info .thumb{position: relative;background-color:var(--point-white);background-image: linear-gradient(to right, rgb(221 221 221 / 20%) 1px, transparent 1px), linear-gradient(to bottom, rgb(221 221 221 / 20%) 1px, transparent 1px);background-size: clamp(12px, 2vw, 15px) clamp(12px, 2vw, 15px);border: 1px solid var(--border-color01);display: flex;align-items: center;justify-content: center;min-height: clamp(250px, 36vw, 360px);padding: 50px;}

    /* ci-provision */
        .ci-provision{position: relative;border-top: 1px solid var(--black-color00);display: grid;gap: clamp(0px, 2vw, 20px);}
        .ci-provision > li{position: relative;display: flex;align-items: flex-start;gap: var(--row-gap50);padding-block: var(--row-gap80);}
            .ci-provision > li + li{border-top: 1px solid var(--border-color01);}
        .ci-provision .title-desc{position: sticky;width: 100%;top: 150px;display: flex;flex-direction: column;gap: var(--row-gap10);}
        .ci-provision .title-desc dt{position: relative;font-size: var(--text-20);font-weight: 500;color: var(--point-color01);line-height: 1.5;}
        .ci-provision .title-desc dd{position: relative;font-size: var(--text-40);font-weight: 600;color: var(--black-color02);line-height: 1.4;letter-spacing: -0.03em;}
        .ci-provision .cont{width: min(940px, 70%);flex-shrink: 0;display: flex;flex-direction: column;gap: clamp(20px, 4vw, 40px);}
        .ci-provision .logo-grid{position: relative;background-color:var(--point-white);background-image:linear-gradient(to right, rgb(221 221 221 / 20%) 1px, transparent 1px), linear-gradient(to bottom, rgb(221 221 221 / 20%) 1px, transparent 1px);background-size: clamp(12px, 2vw, 15px) clamp(12px, 2vw, 15px);border: 1px solid var(--border-color01);display: flex;align-items: center;justify-content: center;min-height: clamp(250px, 38vw, 380px);padding: 50px 80px;}
        .ci-provision .exp-title{position: relative;display: grid;gap: var(--row-gap10);}
        .ci-provision .exp-title p{font-size: var(--text-18);color: var(--black-color04);letter-spacing: -0.03em;}
        .ci-provision .color-desc{display: grid;gap: var(--row-gap20);}
        .ci-provision .color-desc dt{font-size: var(--text-20);font-weight: 600;color: var(--black-color02);line-height: 1.2;font-family: var(--font-type01);}
        .ci-provision .color-desc dd{display: flex;gap: var(--col-gap20);}
        .ci-provision .color-desc dd em{width: 100%;min-height: clamp(90px, 10.5vw, 100px);padding: clamp(15px, 2vw, 20px);display: flex;flex-direction: column;justify-content: flex-end;}
        .ci-provision .color-desc dd span{position: relative;font-size: var(--text-18);color: var(--point-white);line-height: 1.6;font-family: var(--font-type01);}
        .ci-provision .sig-items{display: grid;grid: auto / repeat(2, 1fr);gap: var(--col-gap20);text-align: center;}
        .ci-provision .sig-items .desc{position: relative;border: 1px solid var(--border-color01);}
        .ci-provision .sig-items .desc dt{display: flex;align-items: center;justify-content: center;height: clamp(180px, 28vw, 280px);padding: 12px;}
        .ci-provision .sig-items .desc dd{position: relative;font-size: var(--text-20);font-weight: 600;color: var(--black-color04);background: var(--gray-bg01);border-top: 1px solid var(--border-color01);padding: 15px 15px;}
        .ci-provision .logo_proh{position: relative;display: grid;grid: auto / repeat(3, 1fr);gap: var(--row-gap40) var(--col-gap20);}
        .ci-provision .logo_proh .desc{position: relative;text-align: center;display: grid;gap: var(--row-gap10);}
        .ci-provision .logo_proh .desc dt{position: relative;display: flex;align-items: center;justify-content: center;height: clamp(80px, 12.5vw, 120px);padding: 15px;border: 1px solid var(--border-color01);background: var(--point-white);}
        .ci-provision .logo_proh .desc dd{position: relative;font-size: var(--text-20);color: var(--black-color04);letter-spacing: -0.03em;}


        @media (max-width:1023px) {
            .ci-provision > li{flex-wrap: wrap;}
            .ci-provision .cont{width: 100%; flex-shrink: unset;}
            .ci-provision .title-desc{position: relative; inset: auto;}
        }
        @media (max-width:640px) {
            .ci-provision .color-desc dd{display: grid; grid: auto / repeat(2, 1fr);}
            .ci-provision .sig-items{grid: auto / repeat(1, 1fr);}
            .ci-provision .logo_proh{grid: auto / repeat(2, 1fr);}
        }

    /* 인증현황 */
        .cert-grid{display: grid;grid: auto / repeat(2, 1fr);gap: var(--col-gap40);align-items: start;}
        .cert-thumb{overflow: hidden;}
        .cert-thumb img{width: 100%; height: 100%; object-fit: cover;}
        .cert-table{position: relative; width: 100%; text-align: center; table-layout: fixed;}
        .cert-table::before{position: absolute; content:''; inset: 0; border: 1px solid var(--border-color01); pointer-events: none;}
        .cert-table :where(th, td){box-shadow: inset 1px 1px var(--border-color01);padding: clamp(12px, 2.1vw, 16px) clamp(15px, 2vw, 20px);}
        .cert-table thead th{font-size: var(--text-18);font-weight: 600;color: var(--black-color00);background: var(--gray-bg01);}
        .cert-table tbody :where(th, td){font-size: var(--text-18);font-weight: 400;color: var(--black-color05);background: var(--point-white);}
        .cert-table tbody :where(th, td).left{text-align: left;padding-inline: clamp(15px, 2vw, 20px);}
        .cert-table tbody th{color: var(--black-color01);font-size: var(--text-17);font-weight: 500;}
        .cert-table tbody td{font-family: var(--font-type01);}
        .cert-table tbody td strong{font-weight: 600;color: var(--black-color00);}
        .cert-table tbody td strong.sell{color: var(--point-color11);}
        .cert-table tbody td strong.buy{color: var(--point-color14);}
        .cert-table tbody td em{font-weight: 500;color: var(--point-color01);}
        .cert-table tbody td.sell{background: var(--point-color12); color: var(--point-color11);}
        .cert-table tbody td.buy{background: var(--point-color13); color: var(--point-color14);}

            .cert-table.sm :where(th, td){padding: clamp(10px, 1.7vw, 12px) 10px;}
            .cert-table.sm thead th{font-size: var(--text-16);}
            .cert-table.sm tbody :where(th, td){font-size: var(--text-15);}
            .cert-table.no-head tbody th{background: var(--gray-bg01);}

        @media (max-width:860px) {
            .cert-grid{grid: auto / repeat(1, 1fr);}
        }
        @media (max-width:640px) {
            .cert-scr{overflow: hidden; overflow-x: auto; width: calc(100% + 30px); margin-left: -15px; padding-left: 15px; display: flex;}
            .cert-scr::after{display: inline-flex; content: ''; width: 15px; flex-shrink: 0;}
            .cert-scr .cert-table{min-width: 640px;}
        }

    /* 인증서 */
        .cert-list{display: flex;flex-direction: column;gap: clamp(15px, 2.5vw, 25px);}
        .cert-list > li{display: flex;align-items: center;gap: var(--row-gap35) clamp(30px, 5vw, 50px);border: 1px solid var(--border-color01);background: var(--point-white);padding: clamp(25px, 5vw, 50px);}
        .cert-list .thumb{position: relative;flex-shrink: 0;width: clamp(180px, 22vw, 240px);display: flex;align-items: center;justify-content: center;padding: clamp(10px, 2vw, 15px);background: var(--border-color01);}
        .cert-list .thumb::before{position: absolute;content:'';inset: 0;background: var(--border-color03);clip-path: polygon(100% -5px, 0 100%, 100% 100%);}
        .cert-list .thumb img{position: relative;}
        .cert-list .cont{flex: 1;display: flex;flex-direction: column;justify-content: center;gap: var(--row-gap25);}
        .cert-list .desc{display: flex;align-items: baseline;flex-direction: column;gap: var(--row-gap10);}
        .cert-list .desc dt{font-size: var(--text-22);font-weight: 500;color: var(--black-color00);display: flex;align-items: baseline;gap: clamp(10px, 1.4vw, 12px);}
        .cert-list .desc dt::before{display: inline-flex;content:'';width: clamp(4px, 0.8vw, 6px);aspect-ratio: auto 1;background: var(--gradient);flex-shrink: 0;border-radius: 100%;translate: 0 -80%;}
        .cert-list .desc dd{font-size: var(--text-18);color: var(--black-color06);line-height: 1.6;}
        .cert-list .desc dd strong{font-weight: 500; color: var(--black-color01);}

        @media (max-width:640px){
            .cert-list > li{flex-direction: column;align-items: flex-start;}
            .cert-list .thumb{width: auto;max-width: 70%;margin-inline: auto;}
        }

    /* fina-table */
        .fina-table{position: relative; width: 100%;text-align: center; table-layout: fixed;}
        .fina-table::before{position: absolute;content: '';inset: 0;border: 1px solid var(--border-color01);pointer-events: none;z-index: 1;}
        .fina-table thead th{position: relative;font-size: var(--text-18);font-weight: 500;color: var(--point-white);background: var(--black-color03);padding: clamp(13px, 2vw, 15px) 5px;box-shadow: inset 1px 0 rgb(255 255 255 / 30%);z-index: 2;}
        .fina-table tbody :where(th, td){font-size: var(--text-16);font-weight: 400;color: var(--black-color06);padding: clamp(13px, 2.1vw, 16px) 5px;box-shadow: inset 1px 1px var(--border-color01);background: var(--point-white);}
        .fina-table tbody :where(th, td).left{text-align:left; padding-inline: clamp(15px, 2vw, 20px);}
        .fina-table tbody th{background: var(--gray-bg01);font-weight: 500;color: var(--black-color03);}
        .fina-table tbody td{font-family: var(--font-type01);}
        .fina-table tbody tr.total :where(th, td){background: var(--point-color10);color: var(--black-color00);}
    /* stock-infor */
        .stock-infor{position: relative;border: 1px solid var(--black-color00);padding: clamp(35px, 5vw, 50px) clamp(25px, 6vw, 60px);display: flex;align-items: center;gap: clamp(30px, 5vw, 50px) 30px;}
        .stock-infor .price-desc{position: relative;width: 100%;text-align: center;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;gap: clamp(15px, 2vw, 20px) clamp(20px, 4vw, 40px);}
        .stock-infor .price-desc dt{font-size: var(--text-30);font-weight: 500;color: var(--black-color07);letter-spacing: -0.03em;display: flex;align-items: center;gap: clamp(10px, 2vw, 20px);}
        .stock-infor .price-desc dt strong{position: relative;font-size: var(--text-70);font-weight: 600;color: var(--black-color00);line-height: 1.1;letter-spacing: -0.03em;font-family: var(--font-type01);}
        .stock-infor .price-desc dd{font-size: var(--text-22);font-weight: 500;color: var(--black-color07);font-family: var(--font-type01);}
        .stock-infor .price-desc dd.up{color: var(--point-color01);}
        .stock-infor .price-desc dd.down{color: var(--point-color11);}
        .stock-infor .item-list{display: grid;grid: auto / repeat(4, 1fr);width: min(660px, 55%);flex-shrink: 0;text-align: center;}
        .stock-infor .item-desc{position: relative;}
        .stock-infor .item-desc dt{font-size: var(--text-18);font-weight: 500;color: var(--black-color01);}
        .stock-infor .item-desc dd{position: relative;font-size: var(--text-20);font-weight: 400;color: var(--black-color05);font-family: var(--font-type01);border-top: 1px solid var(--border-color01);margin-top: clamp(12px, 1.5vw, 15px);padding-top: clamp(12px, 1.5vw, 15px);}
        .stock-infor .item-desc.up dd{color: var(--point-color01);}
        .stock-infor .item-desc.down dd{color: var(--point-color11);}

        @media (max-width:1023px) {
            .stock-infor{flex-wrap: wrap;}
            .stock-infor .item-list{width: 100%; flex-shrink: unset;}
        }
    /* depth-nav */
        .depth-nav{position: relative;display: grid;grid: auto / repeat(5, 1fr); margin-bottom: var(--row-gap100);}
        .depth-nav a{position: relative;display: flex;align-items: center;justify-content: center;text-align: center;font-size: var(--text-19);color: var(--black-color05);font-family: var(--font-type01);padding: clamp(16px, 2.5vw, 20px) clamp(5px, 1vw, 10px);background: var(--point-white);border: 1px solid var(--border-color01);transition: all 0.4s;}
        .depth-nav a{margin: 0 -1px -1px 0;}
        .depth-nav a.on{background: var(--point-color07);border-color: var(--point-color07);color: var(--point-white);z-index: 1;}

            /* over */
            @media (hover:hover) and (pointer: fine) {
                .depth-nav a:not(.on):hover{border-color: var(--point-color07);color: var(--point-color07);z-index: 1;}
            }

        @media (max-width:1200px) {
            .depth-nav{grid: auto / repeat(4, 1fr);}
        }
        @media (max-width:860px) {
            .depth-nav{grid: auto / repeat(3, 1fr);}
        }
        @media (max-width:640px) {
            .depth-nav{grid: auto / repeat(2, 1fr);}
        }

    /* product-list */
        .product-list{position: relative;display: grid;gap: var(--row-gap100);}
        .product-list > li{position: relative;display: flex;align-items: flex-start;gap: var(--row-gap40) clamp(50px, 3.7vw, 70px);}
        .product-list .thumb{position: sticky;top: 130px;width: min(600px, 45%);flex-shrink: 0;display: flex;align-items: center;justify-content: center;min-height: clamp(300px, 40vw, 400px);}
        .product-list .thumb::before{position:absolute;content:'';inset: 0;border: 1px solid var(--border-color01);pointer-events: none;}
        .product-list .info{position: relative;width: 100%;display: flex;flex-direction: column;gap: var(--row-gap50);}
        .product-list .desc{display: grid;gap: var(--row-gap30);}
        .product-list .desc dt{font-size: var(--text-44);font-weight: 600;color: var(--black-color01);font-family: var(--font-type01);letter-spacing: -0.03em;line-height: 1.3;}
        .product-list .desc dd{position: relative;padding: clamp(20px, 3vw, 30px) clamp(15px,2vw, 20px);border-top: 1px solid var(--black-color00);border-bottom: 1px solid var(--border-color01);font-size: var(--text-16);color: var(--black-color06);line-height: 1.8;}
        .product-list .cont{position: relative; font-size: var(--text-16); color: var(--black-color06); line-height: 1.6;}

        @media (max-width:1023px) {
            .product-list > li{flex-wrap: wrap;}
            .product-list .thumb{position: relative;inset: auto;width: 100%;flex-shrink: unset;}
        }

    /* Family Site */
        .fs-list{display: flex; flex-direction: column; gap: clamp(40px, 6vw, 60px);}

        /* 회사 카드 */
        .fs-company{position: relative;background: var(--point-white);border: 1px solid var(--border-color01);overflow: hidden;}
        .fs-header{display: flex; align-items: center; gap: clamp(16px, 2.5vw, 24px); padding: clamp(20px, 3vw, 32px) clamp(24px, 3.5vw, 40px); background: linear-gradient(135deg, #f8f9fb 0%, #eef1f6 100%); border-bottom: 1px solid var(--border-color01);}
        .fs-ci{flex-shrink: 0;width: clamp(80px, 10vw, 120px);height: clamp(50px, 6vw, 70px);display: flex;align-items: center;justify-content: center;background: #fff;border: 1px solid var(--border-color01);padding: 8px 12px;}
        .fs-ci img{max-width: 100%; max-height: 100%; object-fit: contain;}
        .fs-title{display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;}
        .fs-title h3{font-size: var(--text-24); font-weight: 700; color: var(--black-color00); letter-spacing: -0.5px;}
        .fs-en{font-size: var(--text-14); font-weight: 400; color: var(--black-color06); letter-spacing: 0;}

        /* 상장 뱃지 */
        .fs-stock{display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-14); font-weight: 700; color: var(--black-color02); letter-spacing: 0.5px;}
        .fs-badge{display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 800; color: #fff; letter-spacing: 0.5px;}
        .fs-badge.kospi{background: #1a56db;}
        .fs-badge.kosdaq{background: #e8341c;}

        /* 본문 */
        .fs-body{padding: clamp(25px ,4vw, 40px);}
        .fs-section{margin-bottom: var(--row-gap60);}
        .fs-section:last-child{margin-bottom: 0;}
        .fs-section h4{font-size: var(--text-20);font-weight: 700;color: var(--black-color01);margin-bottom: var(--row-gap20);padding-bottom: 10px;border-bottom: 2px solid var(--black-color01);}

        /* 기업정보 리스트 */
        .fs-info{display: flex;flex-direction: column;gap: var(--row-gap15);}
        .fs-info li{display: flex;gap: 8px;font-size: var(--text-16);color: var(--black-color03);line-height: 1.6;}
        .fs-info li > span{flex-shrink: 0; min-width: clamp(80px, 10vw, 110px); font-weight: 600; color: var(--black-color01);}
        .fs-info li a{color: var(--point-color01);text-decoration: underline;text-underline-offset: 3px;text-decoration-skip-ink: none;}

        /* 주요사업 리스트 */
        .fs-biz{display: flex; flex-direction: column; gap: 16px;}
        .fs-biz > li{font-size: var(--text-18);font-weight: 600;color: var(--black-color01);line-height: 1.6;padding-left: 18px;position: relative;}
        .fs-biz > li::before{content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: var(--point-color01); border-radius: 50%;}
        .fs-biz-sub{margin-top: 8px; display: flex; flex-direction: column; gap: 4px;}
        .fs-biz-sub > li{font-size: var(--text-15);font-weight: 400;color: var(--black-color04);line-height: 1.7;padding-left: 12px;position: relative;}
        .fs-biz-sub > li::before{content: '-'; position: absolute; left: 0; color: var(--black-color06);}

        /* 이미지 리스트 */
        .fs-img-list{display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; list-style: none; padding-left: 0;}
        .fs-img-list > li{display: flex;flex-direction: column;align-items: center;gap: var(--row-gap10);font-size: var(--text-15);font-weight: 500;color: var(--black-color04);text-align: center;}
        .fs-img-list li img{width: clamp(80px, 14vw, 140px);height: clamp(80px, 14vw, 140px);object-fit: cover;border: 1px solid var(--border-color01);}
        .fs-img-list.product li img{width: clamp(100px, 16vw, 180px);height: clamp(80px, 10vw, 120px);object-fit: contain;}
        .fs-img-list.poster li img{width: clamp(80px, 10vw, 120px); height: clamp(110px, 15vw, 170px); object-fit: cover; border-radius: 4px;}

        /* 제품 그리드 */
        .fs-products-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 20px;margin-bottom: var(--row-gap20);}
        .fs-products-grid strong{display: block;font-size: var(--text-15);font-weight: 700;color: var(--black-color01);margin-bottom: var(--row-gap10);}
        .fs-products-grid ul{display: flex;flex-direction: column;gap: var(--row-gap10);}
        .fs-products-grid ul li{font-size: var(--text-15);color: var(--black-color04);padding-left: 12px;position: relative;}
        .fs-products-grid ul li::before{content: '·'; position: absolute; left: 2px; font-weight: 700;}
        .fs-etc{font-size: var(--text-14); color: var(--black-color04); margin-bottom: 10px;}

        /* 자회사 영역 */
        .fs-sub{margin-top: clamp(24px, 3vw, 32px);padding: clamp(25px, 3.5vw, 35px);background: #f8f9fb;border: 1px solid var(--border-color01);}
        .fs-sub-header{display: flex; align-items: center; gap: clamp(12px, 2vw, 20px); margin-bottom: clamp(16px, 2vw, 24px); padding-bottom: clamp(12px, 1.5vw, 16px); border-bottom: 1px solid var(--border-color01);}
        .fs-sub-header .fs-ci{width: clamp(60px, 8vw, 90px); height: clamp(40px, 5vw, 55px);}
        .fs-sub-header .fs-title h5{font-size: var(--text-20); font-weight: 700; color: var(--black-color01);}
        .fs-sub .fs-section h4{font-size: var(--text-16); border-bottom-width: 1px;}

        @media (max-width:767px) {
            .fs-header{flex-direction: column; align-items: flex-start; gap: 12px;}
            .fs-ci{width: 100px; height: 50px;}
            .fs-info li{flex-direction: column; gap: 2px;}
            .fs-info li > span{min-width: auto;}
            .fs-img-list li img{width: 80px; height: 80px;}
            .fs-img-list.product li img{width: 100px; height: 80px;}
            .fs-img-list.poster li img{width: 70px; height: 100px;}
            .fs-products-grid{grid-template-columns: 1fr;}
        }

    /* chk-list */
        .chk-list{position: relative;width: 100%;display: flex;flex-direction: column;gap: 7px;}
        .chk-list > li{position: relative;display: flex;align-items: baseline;gap: var(--row-gap10);font-size: var(--text-17);font-weight: 400;color: var(--black-color05);line-height: 1.6;letter-spacing: -0.03em;}
        .chk-list > li::before{display: inline-flex;content: '';width: clamp(17px, 2.4vw, 22px);aspect-ratio: auto 1;background: var(--point-color01) url('/images/chk_i02.svg') no-repeat center / clamp(9px, 1.4vw, 12px) auto;border-radius: 100%;translate: 0 clamp(4px, 0.7vw, 5px);flex-shrink: 0;} 
        .chk-list .split-desc{display: flex;flex-direction: column;gap: 4px;width: 100%;}
        .chk-list .split-desc dt{font-size: var(--text-18);font-weight: 600;color: var(--black-color03);}
        .chk-list.pt01 > li::before{background-color: var(--point-color26);}
        .chk-list.pt02 > li::before{background-color: var(--point-color07);}
        .chk-list.pt03 > li::before{background-color: var(--point-color27);}

    /* hashtag-list */
        .hashtag-list{position: relative;display: flex;flex-wrap: wrap;justify-content: center;gap: 10px;}
        .hashtag-list > li{position: relative;font-size: var(--text-17);font-weight: 400;color: var(--black-color00);line-height: 1.2;padding: 7px 12px;background: var(--gray-bg01);border-radius: var(--radius-06);}

    /* growth-list */
        .growth-list{display: grid;grid: auto / repeat(3, 1fr);gap: var(--col-gap40);}
        .growth-list > li{position: relative;box-shadow: inset 0 0 0 1px var(--border-color01);border-radius: var(--radius-30);padding: clamp(30px, 4vw, 40px) clamp(25px, 3vw, 30px);display: flex;flex-direction: column;gap: clamp(18px, 3vw, 30px); background: var(--point-white);}
            .growth-list > li::before{position: absolute; content: ''; width: var(--col-gap40); height: 1px; background: var(--black-color10); top:50%; left:100%; margin-top: -0.5px;}
            .growth-list > li:last-child::before{display: none;}
        .growth-list .icon{display: flex;align-items: center;justify-content: center;inline-size: clamp(60px, 8.2vw, 80px);aspect-ratio: auto 1;background: var(--point-color15);border-radius: var(--radius-10);padding: 13px;margin-inline: auto; overflow: hidden;}
        .growth-list .desc{text-align: center;display: grid;gap: var(--row-gap20);text-wrap: balance;}
        .growth-list .desc dt{font-size: var(--text-28);font-weight: 700;color: var(--black-color02);line-height: 1.2;display: grid;gap: var(--row-gap10);}
        .growth-list .desc dt em{position: relative;font-size: var(--text-18);font-weight: 400;color: var(--point-color01);line-height: 1.4;font-family: var(--font-type01);}
        .growth-list .desc dd{position: relative;font-size: var(--text-18);color: var(--black-color03);line-height: 1.6;}
        .growth-list .chk-list{border-top: 1px solid var(--border-color03);padding-top: clamp(18px, 3vw, 30px);}
        .growth-list .hashtag-list{margin-top: clamp(-10px, -1vw, 0px);padding-inline: 10px;}

            .growth-list > li.pt01{box-shadow: inset 0 0 0 2px var(--point-color01), var(--shadow-03);}
            .growth-list > li.pt01 .icon{background: var(--point-color07);}


            .growth-list.type02 .desc dt{font-size: var(--text-22);font-weight: 600;gap: clamp(12px, 1.6vw, 16px);}
            .growth-list.type02 .desc dt strong{font-weight: inherit;font-size: var(--text-30);color: var(--point-color07);}
            .growth-list.type02 .desc dt em{color: var(--point-color07);}
            .growth-list.type02 .desc dd{font-size: var(--text-20);}

        @media (max-width:1023px) {
            .growth-list{grid: auto / repeat(2, 1fr);}
            .growth-list > li:nth-child(2n)::before{opacity: 0;}
        }
        @media (max-width:640px) {
            .growth-list{grid: auto / repeat(1, 1fr);}
            .growth-list > li::before{width: 1px;height: var(--col-gap40);top: 100%;left: 50%;margin: 0 0 0 -0.5px;}
            .growth-list > li:nth-child(2n)::before{opacity: 1;}
        }

    /* track-step */
        .track-step{display: grid;grid: auto / repeat(5, 1fr);gap: clamp(34px, 2.65vw, 50px);}
        .track-step > li{position: relative;border: clamp(3px, 0.6vw, 4px) solid var(--point-color16);border-radius: var(--radius-20);padding: 16px;display: flex;flex-direction: column;gap: clamp(12px, 1.6vw, 16px);text-align: center;font-size: var(--text-16);color: var(--black-color08);line-height: 1.6;}
            .track-step > li:nth-child(2){border-color: var(--point-color17);}
            .track-step > li:nth-child(3){border-color: var(--point-color18);}
            .track-step > li:nth-child(4){border-color: var(--point-color19);}
            .track-step > li:last-child{border-color: var(--point-color01);}
            .track-step > li::before{position: absolute;content:'';width: clamp(12px, 1vw, 18px);aspect-ratio: auto 1;border: 2px solid var(--black-color10);top: 50%;left: calc(100% + clamp(34px, 2.65vw, 50px) / 2);translate: -50% -50%;clip-path: var(--clip-poly02);rotate: -45deg;border-radius: 2px;}
            .track-step > li:last-child::before{display: none;}
        .track-step .star{display: flex;align-items: center;justify-content: center;height: clamp(36px, 5.5vw, 50px);}
        .track-step .rank-item{display: grid;gap: 10px;}
        .track-step .rank-desc{display: flex;align-items: center;justify-content: space-between;gap: 10px;background: var(--gray-bg01);border-radius: var(--radius-10);padding: clamp(7px, 1.4vw, 9px) 11px;}
        .track-step .rank-desc:nth-child(2n){background: var(--point-color15);}
        .track-step .rank-desc dt{font-size: var(--text-17);color: var(--black-color04);text-align: left;}
        .track-step .rank-desc dd{font-size: var(--text-18);font-weight: 500;color: var(--black-color00);text-align: right;}
        .track-step .execu-desc{display: grid;gap: var(--row-gap10);}
        .track-step .execu-desc dt{font-size: var(--text-24);font-weight: 600;color: var(--black-color00);line-height: 1.5;}
        .track-step .execu-desc dd{font-size: var(--text-16);color: var(--black-color05);line-height: 1.6;}

            .track-step.type02 > li{border-color: var(--point-color20);padding-block: clamp(20px, 3vw, 30px);}
            .track-step.type02 > li:nth-child(2){border-color: var(--point-color21);}
            .track-step.type02 > li:nth-child(3){border-color: var(--point-color22);}
            .track-step.type02 > li:nth-child(4){border-color: var(--point-color23);}
            .track-step.type02 > li:nth-child(5){border-color: var(--point-color24);}
            .track-step.type02 > li:last-child{border-color: var(--point-color01);}

            @media (min-width:1201px) {
                .track-step.type02{grid: auto / repeat(6, 1fr);gap: 34px;}
                .track-step.type02 > li::before{left: calc(100% + 34px / 2 - 2px);}
            }

        @media (max-width:1200px) {
            .track-step{grid: auto / repeat(3, 1fr);}
            .track-step > li:nth-child(3n)::before{opacity: 0;}
        }
        @media (max-width:640px) {
            .track-step{grid: auto / repeat(2, 1fr);}
            .track-step > li:nth-child(3n)::before{opacity: 1;}
            .track-step > li:nth-child(2n)::before{opacity: 0;}
        }
        @media (max-width:479px) {
            .track-step{grid: auto / repeat(1, 1fr);}
            .track-step > li::before{top: calc(100% + clamp(34px, 2.65vw, 50px) / 2);left: 50%;rotate: 45deg;}
            .track-step > li:nth-child(2n)::before{opacity: 1;}
        }

    /* talent-diagram */
        .talent-diagram{position: relative;width: fit-content;margin-inline: auto;margin-block: 106px clamp(70px, 16.2vw, 162px);}
        .talent-diagram .circle{position: relative;width: clamp(380px, 24.5vw, 461px);aspect-ratio: auto 1;margin-inline: auto;background: url('/images/talent_diagram.svg') no-repeat center / 100% auto;display: flex;align-items: center;justify-content: center;}
        .talent-diagram .circle-desc{position: relative;width: min(220px, 50%);height: min(220px, 50%);display: flex;align-items: center;justify-content: center;flex-direction: column;gap: var(--row-gap10);text-align: center;background: var(--point-white);border-radius: 100%;padding: 15px;line-height: 1.4;}
        .talent-diagram .circle-desc::before{position: absolute;content:'';width: calc(100% + clamp(30px, 4.5vw, 40px));height: calc(100% + clamp(30px, 4.5vw, 40px));background: var(--gradient-01);z-index: -1;border-radius: inherit;}
        .talent-diagram .circle-desc dt{font-size: var(--text-17);font-weight: 500;color: var(--black-color06);}
        .talent-diagram .circle-desc dd{font-size: var(--text-22);font-weight: 700;color: var(--black-color03);}
        .talent-diagram .item-list > li{position: absolute;top: -8%;left: 63%;display: flex;align-items: flex-start;width: max-content;gap: clamp(20px, 1.6vw, 30px);}
        .talent-diagram .icon-desc{position: relative;width: clamp(110px, 7.35vw, 140px);aspect-ratio: auto 1;border-radius: 100%;background: var(--black-color02);display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;color: var(--point-white);gap: var(--row-gap10);flex-shrink: 0;overflow: hidden;}
        .talent-diagram .icon-desc dt{position: relative;max-width: clamp(36px, 2.6vw, 4.1px);margin-inline: auto;}
        .talent-diagram .icon-desc dd{font-size: clamp(16px, 1.5vw, 18px);font-weight: 500;line-height: 1.3;letter-spacing: 0;}
        .talent-diagram .exp-desc{display: flex;flex-direction: column;gap: var(--row-gap10);translate: 0 -8px;}
        .talent-diagram .exp-desc dt{font-size: clamp(20px, 1.3vw, 24px);font-weight: 600;color: var(--black-color03);line-height: 1.4;letter-spacing: -0.03em;}
        .talent-diagram .exp-desc dd{font-size: clamp(14px, 1vw, 16px);color: var(--black-color07);line-height: 1.56;letter-spacing: -0.03em;}

            .talent-diagram .item-list > li:nth-child(2){position: absolute;top: 40%;left: -81%;flex-direction: row-reverse;text-align: right;align-items: center;}
            .talent-diagram .item-list > li:nth-child(2) .icon-desc{background: var(--point-color07);}
            .talent-diagram .item-list > li:nth-child(2) .exp-desc{translate: 0;}
            .talent-diagram .item-list > li:nth-child(3){top: 75%;left: 60%;align-items: center;}
            .talent-diagram .item-list > li:nth-child(3) .icon-desc{background: var(--point-color01);}
            .talent-diagram .item-list > li:nth-child(3) .exp-desc{translate: 0 50px;}

        @media (max-width:1023px) {
            .talent-diagram{width:100%;margin-top: 0;display: grid;gap: var(--row-gap50);}
            .talent-diagram .circle{background: none;border: 2px dashed var(--black-color10);border-radius: 100%;width: clamp(260px, 43vw, 420px);}
            .talent-diagram .circle-desc{position: relative;width: min(250px, 70%);height: min(250px, 70%);}
            .talent-diagram .item-list{position: relative;display: grid;gap: var(--row-gap30);}
            .talent-diagram .item-list > li{position: relative !important;inset: auto !important;width: 100%;text-align: left !important;flex-direction: row !important;align-items: center !important;}
            .talent-diagram .icon-desc{position: relative;width: clamp(115px, 15vw, 140px);}
            .talent-diagram .icon-desc dt{position: relative;max-width: clamp(30px, 4.6vw, 4.1px);}
            .talent-diagram .icon-desc dd{font-size: var(--text-18);}
            .talent-diagram .exp-desc{translate: 0 !important;}
            .talent-diagram .exp-desc dt{font-size: var(--text-24);}
            .talent-diagram .exp-desc dd{font-size: var(--text-16);}
        }

    /* roadmap-step */
        .roadmap-step{position: relative;counter-reset: roadmap;display: grid;grid: auto / repeat(4, 1fr);gap: var(--col-gap30);}
        .roadmap-step > li{position: relative;box-shadow: inset 0 0 0 1px var(--border-color01);border-radius: var(--radius-30);background: var(--point-white);padding: clamp(30px, 2.1vw, 40px);display: flex;flex-direction: column;gap: clamp(18px, 3vw, 30px);}
        .roadmap-step > li::before{content: counter(roadmap, decimal-leading-zero);counter-increment: roadmap;position: absolute;top: 30px;right: 30px;font-size: var(--text-28);font-weight: 700;line-height: 1.2;color: var(--border-color02);}
        .roadmap-step > li::after{position: absolute;content:'';width: var(--col-gap30);height: 1px;top: 45%;left: 100%;background: var(--border-color04);}
            .roadmap-step > li:last-child::after{display: none;}
        .roadmap-step .icon{position: relative;display: flex;align-items: center;justify-content: center;inline-size: clamp(55px, 7.2vw, 70px);aspect-ratio: auto 1;padding: 8px;overflow: hidden;background: var(--point-color15);border-radius: var(--radius-10);}
        .roadmap-step .desc{display: grid;gap: var(--row-gap10);}
        .roadmap-step .desc dt{font-size: var(--text-26);font-weight: 600;color: var(--black-color02);line-height: 1.2;}
        .roadmap-step .desc dd{position: relative;font-size: var(--text-18);color: var(--black-color06);line-height: 1.4;font-family: var(--font-type01);letter-spacing: 0;}
        .roadmap-step .chk-list{padding-top: clamp(18px, 3vw, 30px); border-top: 1px solid var(--border-color03);}

        @media (max-width:1200px) {
            .roadmap-step{grid: auto / repeat(2, 1fr);}
            .roadmap-step > li:nth-child(2n)::after{opacity: 0;}
        }
        @media (max-width:640px) {
            .roadmap-step{grid: auto / repeat(1, 1fr);}
            .roadmap-step > li::after{opacity: 1;top: 100%;left: 50%;width: 1px;height: var(--col-gap30);margin-left: -0.5px;}
            .roadmap-step > li:nth-child(2n)::after{opacity: 1;}
        }
        
    /* bgon-txt */
        .bgon-txt{position: relative;padding: var(--row-gap100) clamp(30px, 8vw, 80px);min-height: clamp(300px, 40vw, 400px);display: flex;flex-direction: column;justify-content: center;}
        .bgon-txt .thumb{position: absolute;inset: 0;overflow: hidden;}
        .bgon-txt .thumb img{width: 100%;height: 100%;object-fit: cover;}
        .bgon-txt .title{position: relative;filter: var(--filter-white);display: flex;flex-direction: column;gap: var(--row-gap20);}
        .bgon-txt .title h3{font-size: var(--text-20);font-weight: 400;line-height: 1.4;letter-spacing: -0.03em;}
        .bgon-txt .title h4{font-size: var(--text-36);font-weight: 600;line-height: 1.4;letter-spacing: -0.03em;}
        .bgon-txt .title h5{font-size: var(--text-18);font-weight: 500;line-height: 1.6;letter-spacing: -0.03em;}

    /* benefits-meta */
        .benefits-meta{display: flex;gap: var(--col-gap40);}
        .benefits-meta .item-list{display: flex;flex-direction: column;gap: var(--col-gap20); width: 100%;}
        .benefits-meta .item-list > li{position: relative;padding: clamp(25px, 3vw, 30px);box-shadow: inset 0 0 0 1px var(--border-color01);background: var(--point-white);display: flex;align-items: center;gap:clamp(20px, 3vw, 30px) clamp(20px, 4vw, 40px);flex-grow: 1;}
        .benefits-meta .item-list .icon{position: relative;display: flex;align-items: center;justify-content: center;aspect-ratio: auto 1;inline-size: clamp(55px, 9.2vw, 90px);overflow: hidden;background: var(--gray-bg01);flex-shrink: 0;padding: 10px;}
        .benefits-meta .item-list .desc{display: flex;flex-direction: column;gap: 8px;}
        .benefits-meta .item-list .desc dt{font-size: var(--text-24);font-weight: 500;color: var(--black-color03);line-height: 1.4;}
        .benefits-meta .item-list .desc dd{font-size: var(--text-17);color: var(--black-color06);line-height: 1.64;}
        .benefits-meta .thumb{position: relative;width: min(670px, 48%);flex-shrink: 0;overflow: hidden;}
        .benefits-meta .thumb img{width: 100%;height: 100%;object-fit: cover;}

            .benefits-meta.type02{flex-direction: column-reverse;}
            .benefits-meta.type02 .thumb{width: 100%; flex-shrink: unset;}
            .benefits-meta.type02 .item-list{display: grid;grid: auto / repeat(3, 1fr);}
            .benefits-meta.type02 .item-list > li{align-items: flex-start;flex-direction: column;}

        @media (max-width:1023px) {
            .benefits-meta{flex-wrap: wrap;}
            .benefits-meta .thumb{flex-shrink: unset;width: 100%;}
        }
        @media (max-width:860px) {
            .benefits-meta.type02 .item-list{grid: auto / repeat(2, 1fr);}
        }
        @media (max-width:479px) {
            .benefits-meta.type02 .item-list{grid: auto / repeat(1, 1fr);}
        }
        @media (max-width:360px) {
            .benefits-meta .item-list > li{flex-wrap: wrap;}
        }

    /* ifsupport-meta */
        .ifsupport-meta{position: relative; padding-block: var(--row-gap150);}
        .ifsupport-meta .bg{position: absolute;inset: 0;overflow: hidden;}
        .ifsupport-meta .bg img{width: 100%;height: 100%;object-fit: cover;}

        .ifcard-list{display: grid;grid: auto / repeat(4, 1fr);gap: var(--col-gap20);}
        .ifcard-list > li{position: relative;background: var(--point-white);padding: clamp(25px, 3vw, 30px);text-align: center;display: flex;flex-direction: column;gap: var(--row-gap20);}
        .ifcard-list .icon{display: flex;align-items: center;justify-content: center;height: clamp(65px, 9.2vw, 90px);}
        .ifcard-list .desc{display: grid;gap: var(--row-gap20);text-wrap: balance;}
        .ifcard-list .desc dt{position: relative;font-size: var(--text-24);font-weight: 500;color: var(--black-color03);line-height: 1.4;}
        .ifcard-list .desc dd{position: relative;font-size: var(--text-17);color: var(--black-color06);line-height: 1.64;}

        @media (max-width:1023px) {
            .ifcard-list{grid: auto / repeat(2, 1fr);}
        }
        @media (max-width:479px) {
            .ifcard-list{grid: auto / repeat(1, 1fr);}
        }

    /* commu-list */
        .commu-list{display: grid;grid: auto / repeat(2, 1fr);gap:var(--row-gap60) var(--col-gap40);}
        .commu-list > li{position: relative;display: flex;flex-direction: column;gap: var(--row-gap30);}
        .commu-list .thumb{display: block;aspect-ratio: auto 1.88;overflow: hidden;}
        .commu-list .thumb img{width: 100%;height: 100%;object-fit: cover;}
        .commu-list .desc{display: grid;gap: var(--row-gap10);}
        .commu-list .desc dt{position: relative;font-size: var(--text-24);font-weight: 600;color: var(--black-color03);line-height: 1.4;letter-spacing: -0.03em;}
        .commu-list .desc dd{position: relative;font-size: var(--text-18);color: var(--black-color06);line-height: 1.4;letter-spacing: -0.03em;}
        
        @media (max-width:767px) {
            .commu-list{grid: auto / repeat(1, 1fr);}
        }

    /* culture-step */
        .culture-step{counter-reset: culture-step;display: grid;grid: auto / repeat(4, 1fr);}
        .culture-step > li{position: relative;text-align: center;inline-size: 100%;padding: clamp(20px, 4vw, 30px);aspect-ratio: auto 1;border-top: 1px dashed var(--point-color25);border-radius: 100%;}
            .culture-step > li::before{position: absolute;content:'';width: clamp(11px, 1.4vw, 12px);aspect-ratio: auto 1.4;background: var(--black-color03);clip-path: var(--clip-poly01);top: 50%;left: 100%;translate: -50% -50%;}
            .culture-step > li:last-child::before{display: none;}
        .culture-step .cont{position: relative;inline-size: 100%;aspect-ratio: auto 1;border-radius: 100%;background: var(--point-white);border: 10px solid var(--point-color01);display: flex;align-items: center;justify-content: center;flex-direction: column;gap: var(--row-gap10);font-size: clamp(21px, 1.4vw, 26px);font-weight: 600;color: var(--black-color03);line-height: 1.4;padding: 20px;}
        .culture-step .cont::before{content: counter(culture-step, decimal-leading-zero);counter-increment: culture-step;font-size: var(--text-17);font-weight: 400;color: var(--black-color07);}

            .culture-step > li:nth-child(2n)::before{scale: -1 -1;}
            .culture-step > li:nth-child(2n){border: 0;border-bottom: 1px dashed var(--point-color25);}
            .culture-step > li:nth-child(2n) .cont{border-color: var(--point-color07);}

        @media (max-width:1023px) {
            .culture-step{grid: auto / repeat(2, 1fr);}
            .culture-step > li:nth-child(2n)::before{opacity: 0;}
            .culture-step .cont{font-size: var(--text-26);}
        }
        @media (max-width:479px) {
            .culture-step{grid: auto / repeat(1, 1fr);}
            .culture-step > li{inline-size: 260px;margin-inline: auto;border: 0;border-right: 1px dashed var(--point-color25);}
            .culture-step > li:nth-child(2n){border: 0;border-left: 1px dashed var(--point-color25);}
            .culture-step > li::before{top:100%;left: 50%;}
            .culture-step > li:nth-child(2n)::before{opacity: 1;}
            .culture-step .cont{font-size: var(--text-26);}
        }

    /* culture-items */
        .culture-items{border-top: 1px solid var(--black-color00); counter-reset: culture-items;}
        .culture-items > li{position: relative;padding-block: clamp(30px, 6vw, 60px);border-bottom: 1px solid var(--border-color01);display: flex;align-items: center;gap: var(--row-gap35) 50px;}
        .culture-items .desc{position: relative;width: 100%;display: flex;flex-direction: column;gap: var(--row-gap30);}
        .culture-items .desc dt{position: relative;font-size: var(--text-40);font-weight: 600;color: var(--black-color02);line-height: 1.4;letter-spacing: -0.03em;display: grid;gap: var(--row-gap10);}
        .culture-items .desc dt::before{content: counter(culture-items, decimal-leading-zero);counter-increment: culture-items;font-size: var(--text-30);font-weight: 500;color: var(--border-color01);font-family: var(--font-type01);line-height: 1.25;}
        .culture-items .desc dd{font-size: var(--text-22);color: var(--black-color05);line-height: 1.6;letter-spacing: -0.03em;}
        .culture-items .cultureSwiper{width: min(970px, 70%);flex-shrink: 0;}
        .cultureSwiper{position: relative;overflow: hidden;}
        .cultureSwiper .swiper-slide{position: relative;height: auto; overflow:hidden;}
        .cultureSwiper .swiper-slide img{width:100%; height:100%; object-fit:cover;}
        .cultureSwiper .swiper-arw{position: absolute;top: 50%;left: clamp(15px, 2.5vw, 25px);translate: 0 -50%;width: clamp(25px, 4.2vw, 40px);aspect-ratio: auto 1;z-index: 3;}
        .cultureSwiper .swiper-arw::before{position: absolute;content:'';width: 70%;aspect-ratio: auto 1;border: 2px solid var(--border-color04);border-color: var(--point-color10);clip-path: var(--clip-poly02);top: 50%;left: 50%;translate: -50% -50%;rotate: 135deg;border-radius: 2px;}
        .cultureSwiper .swiper-arw.next{scale: -1 -1;left: auto;right: clamp(15px, 2.5vw, 25px);}

        @media (max-width:1023px) {
            .culture-items > li{flex-wrap: wrap;}
            .culture-items .desc{text-wrap: balance;}
            .culture-items .cultureSwiper{width: 100%; flex-shrink: unset;}
        }

    /* ethic-desc */
        .ethic-desc{position: relative;min-height: clamp(180px, 30vw, 300px);display: flex;align-items: center;justify-content: center;text-align: center;flex-direction: column;padding: var(--row-gap100) 30px;}
        .ethic-desc dt{position: absolute;inset: 0;overflow: hidden;}
        .ethic-desc dt img{width: 100%;height: 100%;object-fit: cover;}
        .ethic-desc dd{position: relative;filter: var(--filter-white);font-size: var(--text-40);font-weight: 600;line-height: 1.4;letter-spacing: -0.03em;}

    /* code-ethics */
        .code-ethics{box-shadow: inset 0 0 0 clamp(4px, 0.8vw, 6px) var(--border-color01);padding: clamp(35px, 8vw, 80px);display: grid;gap: clamp(10px, 2vw, 20px);}
        .code-ethics .item-list{position: relative;}
        .code-ethics .desc{display: flex;align-items: flex-start;gap: clamp(15px, 4vw, 40px);padding-bottom: var(--row-gap60);}
        .code-ethics .desc + .desc{padding-top: var(--row-gap60);border-top: 1px solid var(--border-color01);}
        .code-ethics .desc dt{position: relative;font-size: var(--text-30);font-weight: 600;color: var(--black-color00);line-height: 1.4;width: clamp(120px, 18vw, 220px);flex-shrink: 0;}
        .code-ethics .desc dd{font-size: var(--text-20);color: var(--black-color04);line-height: 1.8;width: 100%;letter-spacing: -0.03em;}
        .code-ethics .desc dd em{color: var(--point-color01);font-weight: 600;}
        .code-ethics .logo{position: relative;max-width: clamp(120px, 15vw, 160px);margin-inline: auto;}

        @media (max-width:640px) {
            .code-ethics .desc{flex-wrap: wrap;}
            .code-ethics .desc dt{width: 100%; flex-shrink: unset;}
        }

    /* spirit-step */
        .spirit-step{position: relative; counter-reset: spirit-step; display: grid; gap: var(--row-gap100);}
        .spirit-step > li{position: relative;display: flex;gap: var(--row-gap40) clamp(50px, 4.2vw, 80px);}
            .spirit-step > li:nth-child(2n){flex-direction: row-reverse;}
        .spirit-step .thumb{position: relative;display: block;width: min(680px, 49%);flex-shrink: 0;overflow: hidden;}
        .spirit-step .thumb img{width: 100%;height: 100%;object-fit: cover;}
        .spirit-step .desc{width: 100%;display: flex;flex-direction: column;justify-content: center;gap: var(--row-gap20);padding-block: 20px;}
        .spirit-step .desc dt{font-size: var(--text-40);font-weight: 600;color: var(--black-color02);line-height: 1.4;letter-spacing: -0.03em;display: grid;gap: var(--row-gap10);}
        .spirit-step .desc dt::before{content: counter(spirit-step, decimal-leading-zero);counter-increment: spirit-step;color: var(--border-color01);line-height: 1.25;font-family: var(--font-type01);}
            .spirit-step .desc dt + dd{margin-top: clamp(5px, 1vw, 10px);padding-top: clamp(10px, 2vw, 20px);border-top: 1px solid var(--border-color01);}
        .spirit-step .desc dd{font-size: var(--text-18);color: var(--black-color05);line-height: 1.6;letter-spacing: -0.03em;}

        @media (max-width:1023px) {
            .spirit-step > li{flex-wrap: wrap;}
            .spirit-step .thumb{width: auto; flex-shrink: unset;}
            .spirit-step .desc{padding-block: 0;}
        }

    /* ethical-circle */
        .ethical-circle{display: flex;}
        .ethical-circle > li{position: relative;text-align: center;border: 1px solid var(--border-color01);border-radius: 100%;aspect-ratio: auto 1;inline-size: 100%;padding: clamp(18px, 1.85vw, 35px);overflow: hidden;margin-right: clamp(-20px, -1.2vw, -10px);}
        .ethical-circle span{position: relative;display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;background: var(--point-color01);border-radius: inherit;font-size: clamp(20px, 2vw, 28px);font-weight: 600;color: var(--point-white);line-height: 1.4;padding: 10px;}
        .ethical-circle > li:nth-child(2n) span{background: var(--point-color07);}

        @media (max-width:1023px) {
            .ethical-circle{flex-wrap: wrap;}
            .ethical-circle > li{inline-size: calc(100%  / 3 + 7px);margin: 0 -10px -10px 0;}
            .ethical-circle span{font-size: var(--text-28);}
        }
        @media (max-width:479px) {
            .ethical-circle > li{inline-size: calc(100%  / 2 + 5px);}
        }

    /* ethical-step */
        .ethical-step{counter-reset: ethical-step;border-top: 1px solid var(--black-color00);}
        .ethical-step > li{position: relative;display: flex;align-items: flex-start;padding-block: var(--row-gap60);border-bottom: 1px solid var(--border-color01);gap: var(--row-gap30) var(--row-gap50);}
        .ethical-step .title{position: relative;width: 25%;flex-shrink: 0;display: flex;flex-direction: column;gap: var(--row-gap15);}
        .ethical-step .title::before{content: counter(ethical-step, decimal-leading-zero);counter-increment: ethical-step;font-size: var(--text-20);font-weight: 500;color: var(--point-color01);line-height: 1.5;}
        .ethical-step .title h3{font-size: var(--text-30);font-weight: 500;color: var(--black-color00);line-height: 1.4;letter-spacing: -0.03em;}
        .ethical-step .cont{position: relative;width: 100%;display: flex;flex-direction: column;gap: var(--row-gap30);}
        .ethical-step .desc{display: grid;gap: var(--row-gap10);}
        .ethical-step .desc dt{font-size: var(--text-20);font-weight: 600;color: var(--black-color03);line-height: 1.4;letter-spacing: -0.03em;}
        .ethical-step .desc dd{font-size: var(--text-18);color: var(--black-color05);line-height: 1.6;letter-spacing: -0.03em;}

        @media (max-width:1023px) {
            .ethical-step > li{flex-wrap: wrap;}
            .ethical-step .title{width: 100%; flex-shrink: 0;}
        }

    /* ethics-step */
        .ethics-step{counter-reset: ethics-step;display: grid;gap: clamp(15px, 2vw, 20px);}
        .ethics-step > li{position: relative;box-shadow: inset 0 0 0 1px var(--border-color01);padding: clamp(25px, 4vw, 40px);}
        .ethics-step .desc{position: relative;display: grid;gap: var(--row-gap30);}
        .ethics-step .desc dt{position: relative;display: flex;align-items: center;gap: clamp(12px, 1.6vw, 16px);font-size: var(--text-30);font-weight: 500;color: var(--black-color00);line-height: 1.4;}
        .ethics-step .desc dt::before{content: counter(ethics-step, decimal-leading-zero);counter-increment: ethics-step;display: inline-flex;align-items: center;justify-content: center;min-width: clamp(34px, 3.8vw, 36px);min-height: clamp(34px, 3.8vw, 36px);background: var(--black-color00);font-size: var(--text-18);font-weight: 600;color: var(--point-white);letter-spacing: 0;padding: 5px;flex-shrink: 0;line-height: 1.2;}
        .ethics-step .desc dd{position: relative;}
        .ethics-step .inr-step{counter-reset: inr-step;display: flex;gap: 10px;}
        .ethics-step .inr-step > li{position: relative;width: 100%;font-size: var(--text-18);color: var(--black-color03);background: var(--gray-bg01);padding: 11px clamp(15px, 2vw, 20px);display: flex;align-items: baseline;gap: 4px;}
        .ethics-step .inr-step > li::before{content: counter(inr-step) '. ';counter-increment: inr-step;flex-shrink: 0;}

        @media (max-width:1300px) {
            .ethics-step .inr-step{display: grid; grid: auto / repeat(3, 1fr);}
        }
        @media (max-width:640px) {
            .ethics-step .inr-step{grid: auto / repeat(2, 1fr);}
        }
        @media (max-width:479px) {
            .ethics-step .inr-step{grid: auto / repeat(1, 1fr);}
        }

    /* enviro-pillars */
        .enviro-pillars{position: relative;}
        .enviro-pillars .circle{position: relative;inline-size: min(500px, 100%);aspect-ratio: auto 1;border-radius: 100%;margin-inline: auto;display: flex;align-items: center;justify-content: center;background: url('/images/environment03.svg') no-repeat center / 100% auto;}
        .enviro-pillars .circle-desc{position: relative;text-align: center;width: min(280px, 80%);aspect-ratio: auto 1;border-radius: inherit;background: var(--point-white);display: flex;align-items: center;justify-content: center;flex-direction: column;gap: var(--row-gap10);box-shadow: var(--shadow-03);}
        .enviro-pillars .circle-desc::before{position: absolute;content: '';width: 125%;aspect-ratio: auto 1;border-radius: inherit;background: var(--gray-bg01);z-index: -1;top: 50%;left: 50%;translate: -50% -50%;}
        .enviro-pillars .circle-desc dt{position: relative;font-size: var(--text-30);font-weight: 600;color: var(--black-color01);line-height: 1.4;letter-spacing: -0.03em;}
        .enviro-pillars .circle-desc dd{position: relative;font-size: var(--text-22);color: var(--black-color07);line-height: 1.2;font-family: var(--font-type01);letter-spacing: -0.03em;}

    /* enviro-list */
        .enviro-list{display: grid; grid: auto / repeat(3, 1fr); gap: var(--col-gap40);}
        .enviro-list > li{position: relative;box-shadow: inset 0 0 0 1px var(--border-color01);border-radius: var(--radius-30);padding: clamp(25px, 4vw, 40px);display: flex;flex-direction: column;gap: clamp(15px, 2vw, 20px);}
        .enviro-list .icon{display: flex;align-items: center;justify-content: center;inline-size: clamp(55px, 8.2vw, 80px);aspect-ratio: auto 1;border-radius: 100%;background: var(--point-color26);padding: 12px;overflow: hidden;}
        .enviro-list .desc{display: grid;gap: var(--row-gap20);}
        .enviro-list .desc dt{position: relative;font-size: var(--text-30);font-weight: 600;color: var(--black-color01);line-height: 1.4;display: grid;gap: var(--row-gap10);letter-spacing: -0.03em;}
        .enviro-list .desc dt em{font-size: var(--text-18);font-weight: 400;color: var(--point-color26);font-family: var(--font-type01);letter-spacing: 0;}
        .enviro-list .desc dd{font-size: var(--text-17);color: var(--black-color06);line-height: 1.5;letter-spacing: -0.03em;}
        .enviro-list .chk-list{padding-top: clamp(15px, 2vw, 20px);border-top: 1px solid var(--border-color03);}

            .enviro-list > li:nth-child(2) .icon{background: var(--point-color07);}
            .enviro-list > li:nth-child(2) .desc dt em{color: var(--point-color07);}
            .enviro-list > li:nth-child(3) .icon{background: var(--point-color27);}
            .enviro-list > li:nth-child(3) .desc dt em{color: var(--point-color27);}

        @media (max-width:1023px) {
            .enviro-list{grid: auto / repeat(2, 1fr);}
        }
        @media (max-width:640px) {
            .enviro-list{grid: auto / repeat(1, 1fr);}
        }

    /* direction-list */
        .direction-list{display: grid;grid: auto / repeat(3, 1fr);gap: clamp(55px, 4.5vw, 85px);}
        .direction-list > li{position: relative;}
        .direction-list .info{position: relative;text-align: center;border: 2px solid var(--point-color07);border-radius: 200px;padding: 25px 35px;min-height: clamp(200px, 26.5vw, 260px);display: flex;flex-direction: column;align-items: center;justify-content: center;gap: clamp(15px, 2vw, 20px);}
        .direction-list .info::before{position: absolute;content:'';width: clamp(31px, 2.4vw, 45px);aspect-ratio: auto 1;background: var(--border-color03) url('/images/plus_i.svg') no-repeat center / clamp(12px, 1.6vw, 14px);border-radius: 100%;top: 50%;left: calc(100% + clamp(55px, 4.5vw, 85px) / 2 + 3px);translate: calc(-50% - 0.5px) calc(-50% - 0.5px);}
        .direction-list > li:last-child .info::before{display: none;}
        .direction-list .icon{display: flex;align-items: center;justify-content: center;width: clamp(50px, 7.2vw, 70px);}
        .direction-list .desc{display: grid;gap: var(--row-gap10);}
        .direction-list .desc dt{position: relative;font-size: var(--text-26);font-weight: 600;color: var(--black-color03);line-height: 1.4;}
        .direction-list .desc dd{position: relative;font-size: var(--text-18);color: var(--black-color03);opacity: 0.5;font-family: var(--font-type01);letter-spacing: 0;}
        .direction-list .exp{position: relative; box-shadow: inset 0 0 0 1px var(--border-color01);margin-top: var(--row-gap60);border-radius: var(--radius-30);padding: clamp(25px, 3vw, 30px);font-size: var(--text-17);color: var(--black-color03);display: grid;gap: clamp(15px, 2vw, 20px);}
        .direction-list .exp::before{position: absolute;content:'';height: var(--row-gap60);left: 50%;bottom: 100%;margin-left: -0.5px;border-left: 1px dashed var(--black-color08);}
        .direction-list .chk-list{padding-top: clamp(15px, 2vw, 20px);border-top: 1px solid var(--border-color03);}

        @media (max-width:1023px) {
            .direction-list{grid: auto / repeat(2, 1fr);}
            .direction-list > li:nth-child(2n) .info::before{opacity: 0;}
        }
        @media (max-width:640px) {
            .direction-list{grid: auto / repeat(1, 1fr);}
            .direction-list > li .info{position: static;}
            .direction-list > li:nth-child(2n) .info::before{opacity: 1;}
            .direction-list > li .info::before{top: calc(100% + clamp(55px, 4.5vw, 85px) / 2);left: 50%;}
        }

    /* gover-list */
        .gover-meta{display: flex;align-items: flex-start;gap:0 var(--row-gap50);}
        .gover-meta .page-title{width: min(370px, 30%);flex-shrink: 0;position: sticky;top: 140px;}
        .gover-list{position: relative; counter-reset: gover-list; width: 100%;}
        .gover-list > li{position: relative;}
        .gover-list > li + li{margin-top: var(--row-gap100); padding-top: var(--row-gap100); border-top: 1px solid var(--border-color01);}
        .gover-list .cont{position: relative;display: flex;flex-direction: column;gap: var(--row-gap40);}
        .gover-list .thumb img{min-height: 180px;object-fit: cover;}
        .gover-list .title{display: grid;gap: var(--row-gap20);}
        .gover-list .title h3{font-size: var(--text-20);font-weight: 500;color: var(--point-color07);line-height: 1.2;}
        .gover-list .title h3::before{content: counter(gover-list, decimal-leading-zero) '. ';  counter-increment: gover-list;}
        .gover-list .title h4{font-size: var(--text-40);font-weight: 600;line-height: 1.4;letter-spacing: -0.03em;}
        .gover-list .title h5{font-size: var(--text-20);font-weight: 400;color: var(--black-color03);letter-spacing: -0.03em;}
        .gover-list .bullet-list{gap: clamp(15px, 2vw, 20px);}
        .gover-list .bullet-list > li{background: var(--gray-bg01);padding: clamp(20px, 2.4vw, 24px) clamp(25px, 3vw, 30px);font-size: var(--text-18);color: var(--black-color04);}

        @media (max-width:1023px) {
            .gover-meta{flex-wrap: wrap;}
            .gover-meta .page-title{position: relative; inset: auto; width: 100%; flex-shrink: unset;}
        }

    /* organi-meta */
        .organi-meta{position: relative;}
        .organi-meta::before{position: absolute;content: '';background: url('/images/organization.png') no-repeat center / cover;width: clamp(340px, 103vw, 1037px);aspect-ratio: auto 1;top: 0;left: 50%;translate: -50%;}
        .organi-meta .council-box{position: relative;background: var(--gradient-01);width: clamp(180px, 25.5vw, 250px);margin-inline: auto;border-radius: 100%;aspect-ratio: auto 1;padding: clamp(15px, 2vw, 20px);overflow: hidden;}
        .organi-meta .council{position: relative;inline-size: 100%;border-radius: 100%;margin-inline: auto;aspect-ratio: auto 1;display: flex;align-items: center;justify-content: center;text-align: center;background: var(--point-white);box-shadow: var(--shadow-04);}
        .organi-meta .council h4{font-size: var(--text-38);font-weight: 700;color: var(--black-color01);letter-spacing: -0.03em;}
        .organi-meta .ceo-desc{position: relative;background: var(--point-color01);border-radius: 100px;width: clamp(220px, 28vw, 275px);margin-inline: auto;text-align: center;padding: clamp(23px, 3.6vw, 36px) 20px;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 9px;margin-top: var(--row-gap80);color: var(--point-white);}
        .organi-meta .ceo-desc::before{position: absolute;content:'';width: 1px;height: calc(100% + var(--row-gap70) + var(--row-gap100));background: var(--black-color10);z-index: -1;top: clamp(-100px, -10vw, -70px);left: 50%;margin-left: -0.5px;}
        .organi-meta .ceo-desc dt{font-size: var(--text-28);font-weight: 600;letter-spacing: -0.03em;line-height: 1.2;}
        .organi-meta .ceo-desc dd{font-size: var(--text-22);font-weight: 400;letter-spacing: -0.03em;line-height: 1.2;}
        .organi-meta .item-list{position: relative;display: grid;grid: auto / repeat(5, 1fr);padding-top: var(--row-gap100);margin-top: var(--row-gap70);gap: 50px var(--col-gap30);}
        .organi-meta .item-list > li{position: relative;box-shadow: inset 0 0 0 2px var(--point-color07);border-radius: 100px;padding: 15px 20px;text-align: center;font-size: var(--text-22);font-weight: 500;color: var(--point-color07);display: flex;flex-direction: column;justify-content: center;background: var(--point-white);}
        .organi-meta .item-list > li::before{position: absolute;content:'';width: 1px;height: calc(var(--row-gap100) -  clamp(15px, 2vw, 20px));background: var(--black-color10);left: 50%;bottom: calc(100% + clamp(15px, 2vw, 20px));margin-left: -0.5px;}
        .organi-meta .item-list > li::after{position: absolute;content:'';width: calc(100% + var(--col-gap30));height: 1px;background: var(--black-color10);left: 50%;top: clamp(-100px, -10vw, -70px);}
        .organi-meta .item-list > li:last-child::after{display: none;}
        .organi-meta .item-list em{display: grid;}
        .organi-meta .item-list em::before{position: absolute;content:'';width: clamp(7px, 1.1vw, 9px);aspect-ratio: auto 1;border-radius: 100%;background: var(--point-color07);left: 50%;bottom: calc(100% + clamp(15px, 2vw, 20px));translate: -50%;}
        .organi-meta .item-list small{position: relative;font-size: 80%;font-weight: 400;color: var(--black-color06);}

        @media (max-width:1023px) {
            .organi-meta .item-list{grid: auto / repeat(3, 1fr);}
            .organi-meta .item-list > li:nth-child(n+4)::before{height: calc(50px - clamp(15px, 2vw, 20px));}
            .organi-meta .item-list > li:nth-child(n+3)::after{display: none;}
        }
        @media (max-width:479px) {
            .organi-meta .item-list{grid: auto / repeat(2, 1fr);}
            .organi-meta .item-list > li:nth-child(n+3)::before{height: calc(50px - clamp(15px, 2vw, 20px));}
            .organi-meta .item-list > li:nth-child(n+2)::after{display: none;}
        }

/* Hide empty Spec headings on product group pages (2026-08-27) */
.product-list .cont:has(> div[data-aos]:empty) > .sec-title { display: none; }

/* phase1-260828 */
#header .logo a,.allmenu-head .logo a,.footer .f-logo{gap:12px;}
#header .logo .loa-group,.allmenu-head .logo .loa-group{width:auto;height:29px;object-fit:contain;}
.footer .f-logo .loa-group{width:auto;height:29px;object-fit:contain;}
.mirae-cert-integrated{min-width:900px;}
.culture-step>li,.culture-items>li,.growth-list>li,.code-ethics li{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;}
.culture-step>li:hover,.culture-items>li:hover,.growth-list>li:hover,.code-ethics li:hover{transform:translateY(-8px);box-shadow:0 18px 36px rgba(0,0,0,.10);}
.cultureSwiper .swiper-slide>img{width:100%;height:100%;object-fit:cover;display:block;}


/* phase1-review-260828 */
.manage-diagram .info-desc dt{font-weight:700;}
.track-step>li,.benefits-meta .item-list>li,.ifcard-list>li,.commu-list>li,
.enviro-list>li,.direction-list>li,.gover-list>li{
    transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease,background-color .35s ease;
}
.track-step>li:hover,.benefits-meta .item-list>li:hover,.ifcard-list>li:hover,.commu-list>li:hover,
.enviro-list>li:hover,.direction-list>li:hover,.gover-list>li:hover{
    transform:translateY(-8px);
    box-shadow:inset 0 0 0 2px var(--point-color01),0 18px 36px rgba(0,0,0,.10);
}
.benefits-meta .item-list>li .icon,.ifcard-list>li .icon{
    transition:background-color .35s ease,filter .35s ease,transform .35s ease;
}
.benefits-meta .item-list>li:hover .icon,.ifcard-list>li:hover .icon{
    background:var(--point-color01);
    transform:scale(1.06);
}
.benefits-meta .item-list>li:hover .icon img,.ifcard-list>li:hover .icon img{filter:brightness(0) invert(1);}
.ethics-download{display:inline-flex;align-items:center;justify-content:center;margin-top:24px;padding:14px 26px;border:1px solid var(--point-color01);background:var(--point-color01);color:#fff;font-size:var(--text-17);font-weight:600;transition:background .25s ease,color .25s ease;}
.ethics-download:hover{background:#fff;color:var(--point-color01);}

@media (min-width:1025px){
    .talent-diagram .item-list>li{outline:none;cursor:default;}
}

/* 260829: talent and benefits hover focus border */
@media (hover:hover) and (pointer:fine){
  .benefits-meta .item-list > li,.ifcard-list > li{transition:box-shadow .25s ease,transform .25s ease;}
  .benefits-meta .item-list > li:hover,.ifcard-list > li:hover{box-shadow:inset 0 0 0 2px var(--point-color01);transform:translateY(-4px);z-index:1;}
  .talent-diagram .item-list > li .icon-desc{transition:box-shadow .25s ease,transform .25s ease;}
  .talent-diagram .item-list > li:hover .icon-desc{box-shadow:0 0 0 2px var(--point-color01);transform:scale(1.035);}
}
.talent-diagram .item-list > li:focus-visible .icon-desc{outline:2px solid var(--point-color01);outline-offset:4px;}

/* 260829: management statement weight */
.manage-info .title h3{font-weight:500;}

/* 260829 motion refinement — Korean HR / ESG pages */
@media (hover:hover) and (pointer:fine){
  /* Personnel: match the supplied card interaction without changing layout. */
  .growth-list>li,.growth-list>li[data-aos][data-aos]{transition:transform .38s cubic-bezier(.22,.8,.28,1),box-shadow .38s ease;}
  .growth-list>li:hover{transform:translateY(-7px);box-shadow:inset 0 0 0 2px var(--point-color01),0 18px 34px rgba(19,24,31,.12);z-index:1;}
  .growth-list>li:hover .icon{background:var(--point-color01);transform:scale(1.06);}
  .growth-list>li:hover .icon img{filter:brightness(0) invert(1);}
  .growth-list .icon{transition:background-color .3s ease,transform .3s ease;}
  .growth-list .icon img{transition:filter .3s ease;}

  /* Talent pillars keep their titles visible; detail copy opens only on the selected circle. */
  .talent-diagram .item-list>li .icon-desc{transition:transform .3s ease,box-shadow .3s ease;}
  .talent-diagram .item-list>li:hover .icon-desc,.talent-diagram .item-list>li:focus .icon-desc{transform:scale(1.04);box-shadow:0 0 0 3px rgba(239,51,34,.24);}
  .talent-diagram .item-list>li .exp-desc{pointer-events:none;}

  /* LIFE SUPPORT: keep icons natural and use the card edge as the interaction cue. */
  .ifcard-list>li:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 2px var(--point-color01),0 16px 30px rgba(19,24,31,.12);}
  .ifcard-list>li:hover .icon{background:transparent;transform:none;}
  .ifcard-list>li:hover .icon img{filter:none;}

  /* ACTIVE CULTURE: photo zoom and text accent, without the tight red frame. */
  .commu-list>li,.commu-list>li[data-aos][data-aos]{overflow:hidden;transition:transform .35s ease;}
  .commu-list>li:hover{transform:translateY(-6px);box-shadow:0 16px 30px rgba(19,24,31,.10);}
  .commu-list>li .thumb{overflow:hidden;}
  .commu-list>li .thumb img{transition:transform .55s cubic-bezier(.22,.8,.28,1),filter .55s ease;}
  .commu-list>li:hover .thumb img{transform:scale(1.055);filter:saturate(1.06);}
  .commu-list>li:hover .desc{padding-inline:18px;padding-bottom:18px;}
  .commu-list>li .desc{transition:padding .35s ease;}
  .commu-list>li:hover .desc dt{color:var(--point-color01);}

  /* ESG Social: a quiet elevation of the whole information unit, no hard outline. */
  .direction-list>li:hover{transform:none;box-shadow:none;}
  .direction-list .info{transition:transform .35s ease,background-color .35s ease,box-shadow .35s ease,border-color .35s ease;}
  .direction-list>li:hover .info{transform:translateY(-7px);background:#fff8f6;border-color:var(--point-color01);box-shadow:0 16px 30px rgba(19,24,31,.10);}
  .direction-list .icon{transition:transform .35s ease;}
  .direction-list>li:hover .icon{transform:scale(1.08);}

  /* ESG Governance is scroll-only: deliberately cancel every hover affordance. */
  .gover-list>li,.gover-list>li:hover{transform:none;box-shadow:none;}
}

/* Card groups reveal one by one after their section enters the viewport. */
@keyframes miraeCardRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.roadmap-step[data-aos].aos-animate>li{animation:miraeCardRise .7s cubic-bezier(.22,.8,.28,1) both;}
.roadmap-step[data-aos].aos-animate>li:nth-child(2){animation-delay:.15s;}
.roadmap-step[data-aos].aos-animate>li:nth-child(3){animation-delay:.30s;}
.roadmap-step[data-aos].aos-animate>li:nth-child(4){animation-delay:.45s;}

/* The container no longer masks its own child-card sequence. */
.benefits-meta[data-aos][data-aos],.ifsupport-meta [data-aos][data-aos].ifcard-list{transform:none;opacity:1;}
.benefits-meta .item-list>li[data-aos][data-aos],.ifcard-list>li[data-aos][data-aos],.culture-step>li[data-aos][data-aos]{transition-duration:.72s;}
.benefits-meta .item-list>li:nth-child(2)[data-aos][data-aos],.ifcard-list>li:nth-child(2)[data-aos][data-aos],.culture-step>li:nth-child(2)[data-aos][data-aos]{transition-delay:.15s;}
.benefits-meta .item-list>li:nth-child(3)[data-aos][data-aos],.ifcard-list>li:nth-child(3)[data-aos][data-aos],.culture-step>li:nth-child(3)[data-aos][data-aos]{transition-delay:.30s;}
.benefits-meta .item-list>li:nth-child(4)[data-aos][data-aos],.ifcard-list>li:nth-child(4)[data-aos][data-aos],.culture-step>li:nth-child(4)[data-aos][data-aos]{transition-delay:.45s;}
.benefits-meta .item-list>li:nth-child(5)[data-aos][data-aos]{transition-delay:.60s;}

/* ENGAGEMENT image rows: refined image motion rather than a card-border effect. */
.culture-items>li,.culture-items>li[data-aos][data-aos]{transition:background-color .35s ease,box-shadow .35s ease;}
.culture-items>li:hover{transform:none;box-shadow:none;background:rgba(255,255,255,.65);}
.culture-items .cultureSwiper{transition:transform .45s cubic-bezier(.22,.8,.28,1),box-shadow .45s ease;}
.culture-items>li:hover .cultureSwiper{transform:translateX(-8px);box-shadow:0 18px 34px rgba(19,24,31,.14);}
.culture-items .swiper-slide img{transition:transform .65s cubic-bezier(.22,.8,.28,1),filter .65s ease;}
.culture-items>li:hover .swiper-slide-active img{transform:scale(1.045);filter:saturate(1.05) contrast(1.02);}

@media (prefers-reduced-motion:reduce){
  .roadmap-step[data-aos].aos-animate>li{animation:none;}
  .benefits-meta .item-list>li[data-aos][data-aos],.ifcard-list>li[data-aos][data-aos],.culture-step>li[data-aos][data-aos]{transition-duration:0s;transition-delay:0s;}
}


/* ================= 260829-2 모션 피드백 반영 (민준) =================
   대상: 인사제도 조직/직책 체계, 인재육성 원형도식·성장로드맵, ESG경영 기본정신
   ================================================================= */

/* [1] 인사제도 > 조직 운영 및 직책 체계
       - 팀원 카드: 호버 시 아이콘 색반전(흰색화) 제거, 아이콘은 원래 색 유지
       - 팀장 카드(.pt01): 기본 그림자(--shadow-03)가 호버에서 사라져 '덜컥'이던 것 → 기본 그림자 유지 위에 부양감만 추가 */
/* [2] 인재육성 > 원형 도식: 타이틀(dt)은 항상 노출, 설명(dd)만 호버 시 노출 */
@media (min-width:1025px){
  /* 이 규칙이 .exp-desc 를 항상 보이게 하므로 위쪽 초기 규칙(opacity:0…)은 죽은 코드였다.
     전환 시간만 그 규칙에서 오고 있었으므로 여기로 옮겨 유지한다. */
  .talent-diagram .item-list>li .exp-desc{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .3s ease,visibility .3s ease;}
  .talent-diagram .item-list>li .exp-desc dt{opacity:1;visibility:visible;}
  .talent-diagram .item-list>li .exp-desc dd{opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .38s ease,transform .38s ease,visibility .38s ease;}
  .talent-diagram .item-list>li:hover .exp-desc dd,
  .talent-diagram .item-list>li:focus .exp-desc dd,
  .talent-diagram .item-list>li:focus-within .exp-desc dd{opacity:1;visibility:visible;transform:translateY(0);}
}

/* [3] 인재육성 > 성장 로드맵: 호버 효과 신설 + 등장을 더 느리고 부드럽게(동동동) */
@media (hover:hover) and (pointer:fine){
  .roadmap-step>li{transition:transform .4s cubic-bezier(.22,.8,.28,1),box-shadow .4s ease;}
  .roadmap-step>li:hover{transform:translateY(-8px);box-shadow:inset 0 0 0 2px var(--point-color01),0 18px 34px rgba(19,24,31,.12);z-index:1;}
  .roadmap-step .icon{transition:background-color .35s ease,transform .35s ease;}
  .roadmap-step .icon img{transition:filter .35s ease;}
  .roadmap-step>li:hover .icon{background:var(--point-color01);transform:scale(1.08);}
  .roadmap-step>li:hover .icon img{filter:brightness(0) invert(1);}
}
/* 진입 타이밍: 카드의 data-aos-delay 120/240/360은 AOS의 50ms 스텝 규칙에 없어서
   실제 계산값이 0s로 떨어져 4장이 동시에 튀어나왔다(실측). CSS로 직접 지정한다. */
.roadmap-step>li[data-aos][data-aos]{transition-duration:1s;transition-timing-function:cubic-bezier(.16,.84,.32,1);}
.roadmap-step>li:nth-child(2)[data-aos][data-aos]{transition-delay:.2s;}
.roadmap-step>li:nth-child(3)[data-aos][data-aos]{transition-delay:.4s;}
.roadmap-step>li:nth-child(4)[data-aos][data-aos]{transition-delay:.6s;}

/* [4] ESG경영 > 기본정신: 떠오르며 이미지와 글이 좌우에서 가운데로 합쳐지는 진입 */
@media (min-width:768px){
  .spirit-step{overflow:clip;}
  .spirit-step>li.aos-init .thumb{opacity:0;transform:translateX(-44px);transition:opacity .95s cubic-bezier(.22,.8,.28,1),transform .95s cubic-bezier(.22,.8,.28,1);}
  .spirit-step>li.aos-init .desc{opacity:0;transform:translateX(44px);transition:opacity .95s cubic-bezier(.22,.8,.28,1) .08s,transform .95s cubic-bezier(.22,.8,.28,1) .08s;}
  .spirit-step>li.aos-init:nth-child(2n) .thumb{transform:translateX(44px);}
  .spirit-step>li.aos-init:nth-child(2n) .desc{transform:translateX(-44px);}
  .spirit-step>li.aos-init.aos-animate .thumb,
  .spirit-step>li.aos-init.aos-animate .desc{opacity:1;transform:translateX(0);}
}

@media (prefers-reduced-motion:reduce){
  .roadmap-step>li[data-aos][data-aos]{transition-duration:0s;transition-delay:0s;}
  .talent-diagram .item-list>li .exp-desc dd{transition:none;}
  .spirit-step>li.aos-init .thumb,.spirit-step>li.aos-init .desc{opacity:1;transform:none;transition:none;}
}


/* ================= 260831 김소영 과장 피드백 (민준) =================
   1) GNB·푸터 로고 좌우 정렬  2) 푸터 패밀리사이트를 ESG 옆으로 + SNS 원형 삭제
   3) 인사제도 직책체계 카드 호버 아이콘 반전(인사철학과 동일)
   ================================================================= */

/* 1) 헤더 로고: LOA 그룹 로고와 미래산업 로고가 세로로 쌓이던 것 → 좌우 정렬 */
#header .logo,
.allmenu-head .logo{display:flex;align-items:center;gap:12px;}
#header .logo>a,
.allmenu-head .logo>a{padding-block:0;}

/* 2) 푸터 로고: 구 2분할 마크업용 absolute+clip-path 잔재로 두 로고가 겹치던 것 정정.
      워드마크는 흰색, M 심볼은 원색 유지(기존 디자인 의도 그대로). */
.footer .f-logo{position:relative;display:flex;align-items:center;gap:12px;width:auto;aspect-ratio:auto;}
.footer .f-logo>a{position:relative;top:auto;left:auto;display:block;width:auto;height:34px;clip-path:none;filter:none;}
.footer .f-logo>a img{display:block;height:34px;width:auto;filter:brightness(0) invert(1);}
.footer .f-logo>a::after{content:"";position:absolute;inset:0;background:url("/uploads/logo/logo_1783900994.svg") no-repeat center/contain;clip-path:inset(0 0 0 73%);}

/* 3) 푸터 패밀리사이트: ESG 바로 옆 7번째 칼럼으로 정렬 + 링크 없는 빈 메뉴칼럼 숨김 */
@media (min-width:901px){
  .footer-top{grid-template-columns:repeat(7,1fr);column-gap:24px;}
  .f-menu{display:contents;}
  .f-menu>div:not(:has(ul)){display:none;}
  .f-family .f-heading{font-size:16px;}
  .f-family .f-select{width:100%;}
}


/* =================================================================
   2026-08-31 (2차) 푸터 정비 — 민준
   1) 패밀리사이트 셀렉트박스 제거 → 모바일에서 내용이 없어진 footer-top 숨김
      (모바일은 .f-menu 자체를 숨기므로 빈 여백+구분선만 남는다)
   2) 푸터 LOA 로고 제거에 따른 잔여 규칙 무력화
   ================================================================= */
@media (max-width:900px){
  .footer-top{display:none;}
}
.footer .f-logo .loa-group{display:none;}

/* ================================================================
   부정부패신고센터 : 좌 안내 · 우 신고폼 2단 배치
   기존 사이트 mirae.co.kr/ko/sub/sub8_1.asp 의 배치(.info-section | .form-section)를 준용.
   마크업은 CMS 템플릿이라 손대지 않고 CSS 그리드로만 좌우를 나눈다.
   (DOM 순서 = 제목 → 신고폼 → 신고안내, 화면 순서 = 제목 / 안내 | 폼)
   260901
   ================================================================ */
    main.reporting > [data-board-slug="reporting"]{
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: clamp(30px, 4.5vw, 70px);
        row-gap: var(--row-gap40);
        align-items: start;
    }
    main.reporting > [data-board-slug="reporting"] > .page-title{grid-column: 1 / -1; grid-row: 1;}
    main.reporting > [data-board-slug="reporting"] > .reporting-info{grid-column: 1; grid-row: 2;}
    main.reporting > [data-board-slug="reporting"] > form{grid-column: 2; grid-row: 2;}

    /* 폼이 반폭 컬럼에 들어가므로 입력칸 2단 배치를 1단으로 되돌린다 */
    main.reporting .write-form{gap: var(--row-gap30);}
    main.reporting .write-form .desc{width: 100%;}

    /* 두 컬럼의 머리글 — 기존 사이트의 .section-title 대응.
       폼 쪽 제목은 마크업이 없어 ::before 로 넣고, 언어별로 문구를 바꾼다. */
    /* 안내 블록은 CMS 본문에서 온 순수 마크업이라 브라우저 기본 여백이 살아 있다 — 먼저 정리 */
    main.reporting .reporting-info :where(h3, h4, p, ul, ol, dl, dd){margin: 0;}
    main.reporting .reporting-info :where(ul, ol){padding-left: 0; list-style: none;}

    main.reporting .reporting-head,
    main.reporting > [data-board-slug="reporting"] > form::before{
        display: block;
        font-size: var(--text-30);
        font-weight: 600;
        color: var(--black-color00);
        line-height: 1.4;
        letter-spacing: -0.03em;
        margin-bottom: var(--row-gap20);
    }
    main.reporting > [data-board-slug="reporting"] > form::before{content: var(--reporting-form-title, "신고서 작성");}
    html[lang="en"] main.reporting > [data-board-slug="reporting"] > form::before{content: "Report Form";}
    html[lang="zh"] main.reporting > [data-board-slug="reporting"] > form::before{content: "举报书填写";}

    /* ---- 좌측 안내 : 기존 사이트의 .info-box 카드 준용 ---- */
    main.reporting .reporting-info{display: flex; flex-direction: column; gap: var(--row-gap30);}
    main.reporting .reporting-sec{
        background: var(--point-white);
        border: 1px solid var(--border-color04);
        border-radius: 10px;
        padding: clamp(20px, 2.6vw, 28px);
        box-shadow: 0 5px 10px rgb(0 0 0 / 8%);
    }
    main.reporting .reporting-sec h4{
        font-size: var(--text-22);
        font-weight: 600;
        color: var(--black-color02);
        line-height: 1.4;
        letter-spacing: -0.03em;
        padding-bottom: 8px;
        margin-bottom: clamp(12px, 1.6vw, 16px);
        border-bottom: 2px solid var(--point-color01);
    }
    main.reporting .reporting-sec .bullet-list{gap: 0;}
    main.reporting .reporting-sec .bullet-list > li{
        font-size: var(--text-17);
        color: var(--black-color05);
        line-height: 1.55;
        padding-block: clamp(7px, 1vw, 9px);
        border-bottom: 1px solid var(--border-color03);
        gap: clamp(8px, 1.2vw, 10px);
    }
    main.reporting .reporting-sec .bullet-list > li:last-child{border-bottom: 0; padding-bottom: 0;}
    main.reporting .reporting-sec .bullet-list > li::before{
        content: '✓';
        width: auto;
        aspect-ratio: auto;
        border-radius: 0;
        background: none;
        color: var(--point-color01);
        font-weight: 700;
        translate: 0 0;
    }
    /* 중첩 목록(신고서 작성시 유의사항 안쪽 항목)은 점으로 */
    main.reporting .reporting-sec .bullet-list .bullet-list{margin-top: 8px; gap: 0;}
    main.reporting .reporting-sec .bullet-list .bullet-list > li{
        font-size: var(--text-16);
        color: var(--black-color08);
        border-bottom: 0;
        padding-block: 4px;
    }
    main.reporting .reporting-sec .bullet-list .bullet-list > li::before{
        content: '';
        width: 3px;
        aspect-ratio: auto 1;
        border-radius: 100%;
        background: currentColor;
        translate: 0 -4px;
    }
    main.reporting .reporting-sec .bullet-list > li > div{display: grid; gap: 0;}

    /* 신고내용 처리 절차 — 기존 사이트의 번호 원형 마커 준용 */
    main.reporting .reporting-sec:has(.reporting-dl){counter-reset: reporting-step;}
    main.reporting .reporting-dl{
        position: relative;
        display: grid;
        gap: 4px;
        padding-left: 30px;
        padding-block: clamp(8px, 1.1vw, 10px);
        border-bottom: 1px solid var(--border-color03);
    }
    main.reporting .reporting-dl:last-child{border-bottom: 0; padding-bottom: 0;}
    main.reporting .reporting-dl dt{
        position: relative;
        font-size: var(--text-18);
        font-weight: 600;
        color: var(--black-color03);
        line-height: 1.4;
        letter-spacing: -0.03em;
    }
    main.reporting .reporting-dl dt::before{
        counter-increment: reporting-step;
        content: counter(reporting-step);
        position: absolute;
        left: -30px;
        top: 0.1em;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 100%;
        background: var(--black-color08);
        color: var(--point-white);
        font-size: 12px;
        font-weight: 700;
    }
    main.reporting .reporting-dl dd{
        font-size: var(--text-16);
        color: var(--black-color07);
        line-height: 1.6;
        letter-spacing: -0.03em;
    }
    main.reporting .reporting-dl dd small{font-size: var(--text-15); color: var(--black-color09);}

    /* 기타 신고방법 — 기존 사이트의 .contact-info 짙은 박스 */
    main.reporting .reporting-contact{
        background: var(--black-color11);
        border-color: var(--black-color11);
        box-shadow: none;
    }
    main.reporting .reporting-contact h4{color: var(--point-white); border-bottom-color: rgb(255 255 255 / 45%);}
    main.reporting .reporting-contact p{font-size: var(--text-17); color: var(--point-white); line-height: 1.6; letter-spacing: -0.03em;}
    main.reporting .reporting-contact p strong{
        display: inline-flex;
        margin-right: 8px;
        padding: 2px 10px;
        border-radius: 3px;
        background: rgb(255 255 255 / 15%);
        font-weight: 500;
    }

    /* ---- 태블릿·모바일 : 1단으로 쌓되 기존 사이트와 같은 순서(안내 → 폼) ---- */
    @media (max-width:1023px) {
        main.reporting > [data-board-slug="reporting"]{grid-template-columns: minmax(0, 1fr);}
        main.reporting > [data-board-slug="reporting"] > .reporting-info{grid-column: 1; grid-row: 2;}
        main.reporting > [data-board-slug="reporting"] > form{grid-column: 1; grid-row: 3;}
    }

/* --- 5) 신고센터 : 선택 항목(select)에 테두리, 필수/선택 표시 --- */
main.reporting .write-form select{
    width:100%;
    height:44px;
    padding:0 42px 0 16px;
    border:1px solid #111;
    background-color:#fff;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    font-size:16px;color:#111;font-family:inherit;
    cursor:pointer;
}
main.reporting .write-form select::-ms-expand{display:none;}
main.reporting .write-form select:focus{border-color:#e8341c;}
.write-form .bf-req{margin-left:4px;color:#e8341c;font-weight:600;}
.write-form .bf-opt{margin-left:6px;color:#888;font-size:0.85em;font-weight:400;}

/* ============================================================================
   일반 게시판 목록 (news / exhibition / posting — board_type "normal")
   기준 디자인 : hanamicron.com/bbs/list.do
   ----------------------------------------------------------------------------
   · 마크업은 카드 그리드(ul.news-grid > li.news-item > a > .tag-mini + h4 + .date)
     그대로 두고 CSS 로만 한 줄 목록으로 바꾼다.
   · 번호와 전체 건수는 DOM 에 없으므로 CSS counter 로 그린다.
     counter 는 자식(li)에서 증가하므로 합계 숫자는 반드시 ::after 여야 한다
     (::before 에 쓰면 증가 전 값인 0 이 찍힌다).
   · [data-board-type="normal"] 스코프는 카드형 기본 규칙(.news-grid / .news-item …)
     보다 선택자 특정도가 높고 파일 뒤쪽에 오므로 !important 없이 그대로 이긴다.
   · 260901 정리 : 260831 목록화 · 260901 하나마이크론 정렬 · 260901-B2 미세조정
     세 블록이 서로 덮어쓰던 것을 최종 상태 하나로 합쳤다(렌더 결과 동일).
   ============================================================================ */

/* --- 목록 틀 : 머리글 없이 상단 두꺼운 선만 --- */
[data-board-type="normal"] .news-grid{
    position:relative;
    display:block;
    margin-top:20px;
    border-top:2px solid var(--black-color00);
    counter-reset:mirae-board-row mirae-board-total;
}

/* --- 목록 위 "전체 N건" : 라벨(::before) + 숫자(::after), 숫자만 굵게 --- */
[data-board-type="normal"] .news-grid::before,
[data-board-type="normal"] .news-grid::after{
    position:absolute;
    top:-56px;
    display:block;
    font-size:15px;
    line-height:22px;
    letter-spacing:-0.04em;
}
[data-board-type="normal"] .news-grid::before{
    content:"전체";
    left:0;
    color:var(--black-color02);
    font-weight:300;
}
[data-board-type="normal"] .news-grid::after{
    content:counter(mirae-board-total) "건";
    left:33px;
    color:var(--black-color00);
    font-weight:500;
}
html[lang="en"] [data-board-type="normal"] .news-grid::before{content:"Total";}
html[lang="en"] [data-board-type="normal"] .news-grid::after{content:counter(mirae-board-total) " posts"; left:37px;}
html[lang="zh"] [data-board-type="normal"] .news-grid::before{content:"共";}
html[lang="zh"] [data-board-type="normal"] .news-grid::after{content:counter(mirae-board-total) " 条"; left:22px;}

/* --- 행 : 카드 스타일 해제 + 하나마이크론 여백 --- */
[data-board-type="normal"] .news-item{
    position:static;
    display:block;
    min-height:0;
    padding:0;
    overflow:visible;
    background:transparent;
    border:0;
    border-bottom:1px solid #e1e1e1;
    counter-increment:mirae-board-row mirae-board-total;
    transition:none;
}
[data-board-type="normal"] .news-item > a{
    display:grid;
    grid-template-columns:6.8% minmax(0,1fr) 160px;
    align-items:center;
    gap:0;
    min-height:0;
    padding:30px 0;
}
[data-board-type="normal"] .news-item > a::before{
    content:counter(mirae-board-row);
    text-align:center;
    color:var(--black-color00);
    font-family:var(--font-type01);
    font-size:15px;
    font-weight:400;
    letter-spacing:0;
}
[data-board-type="normal"] .news-item h4{
    display:block;
    min-width:0;
    margin:0;
    color:var(--black-color00);
    font-size:24px;
    font-weight:500;
    line-height:28px;
    letter-spacing:-0.02em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
[data-board-type="normal"] .news-item .date{
    display:block;
    margin:0;
    color:var(--black-color06);
    font-size:15px;
    font-weight:300;
    line-height:18px;
    text-align:center;
    letter-spacing:-0.04em;
}
/* 카드형 전용 요소는 목록형에서 쓰지 않는다 */
[data-board-type="normal"] .news-item .tag-mini,
[data-board-type="normal"] .news-item .arr{display:none;}

@media (hover:hover) and (pointer:fine){
    [data-board-type="normal"] .news-item > a:hover h4{text-decoration:underline;}
}

/* --- 검색창 : 테두리 있는 박스형 --- */
[data-board-type="normal"] .search-from{justify-content:flex-end; margin-bottom:0;}
[data-board-type="normal"] .search-from .inp-box{
    box-sizing:border-box;
    width:min(400px,100%);
    height:55px;
    border:1px solid var(--border-color01);
}
[data-board-type="normal"] .search-from [type="text"]{
    height:100%;
    padding:0 50px 0 20px;
    border:0;
    color:var(--black-color06);
    font-size:15px;
    font-weight:300;
}
[data-board-type="normal"] .search-from [type="text"]::placeholder{color:var(--black-color06);}
[data-board-type="normal"] .search-from button{width:50px; height:100%; right:20px;}

/* --- 모바일 : 검색창이 전폭이 되므로 건수 라벨을 목록 위로 띄운다 --- */
@media (max-width:767px){
    [data-board-type="normal"] .news-grid{margin-top:40px;}
    [data-board-type="normal"] .news-grid::before,
    [data-board-type="normal"] .news-grid::after{top:-32px; font-size:13px;}
    [data-board-type="normal"] .news-grid::after{left:28px;}
    html[lang="en"] [data-board-type="normal"] .news-grid::after{left:32px;}
    html[lang="zh"] [data-board-type="normal"] .news-grid::after{left:19px;}
    [data-board-type="normal"] .news-item > a{grid-template-columns:44px minmax(0,1fr) 78px; padding:18px 0;}
    [data-board-type="normal"] .news-item h4{font-size:17px; line-height:24px;}
    [data-board-type="normal"] .news-item .date{font-size:12px;}
    [data-board-type="normal"] .search-from .inp-box{width:100%; height:46px;}
    [data-board-type="normal"] .search-from [type="text"]{padding:0 44px 0 14px;}
}

/* ============================================================================
   인사제도 > 조직 운영 및 직책 체계 (.growth-list.type02) · 승진 트랙 (.track-step)
   ----------------------------------------------------------------------------
   · 팀원·팀장(.pt01)·본부장 세 장은 기본 상태가 완전히 같고, 마우스를 올린 카드만
     강조된다. 팀장 아이콘 선 색(#F8711B)이 박스에 묻히지 않도록 아이콘 박스는
     팀원·본부장과 같은 연한 살구색(--point-color15)을 쓴다.
   · .growth-list.type02 스코프가 기본 규칙(.growth-list > li.pt01 …)보다 특정도가
     높아 !important 없이 이긴다.
   · 260901 정리 : 260829-2 · 260831 · 260901 네 블록으로 흩어져 서로 덮어쓰던 것을
     최종 상태 하나로 합쳤다(렌더 결과 동일).
   ============================================================================ */

.growth-list.type02 > li.pt01{box-shadow:inset 0 0 0 1px var(--border-color01);}
.growth-list.type02 > li.pt01 .icon{background:var(--point-color15);}

@media (hover:hover) and (pointer:fine){
    /* AOS 는 [data-aos][data-aos] 로 특정도를 올려 transition 을 선점한다.
       진입이 끝난 뒤의 호버 전환은 같은 기법으로 특정도를 맞춰 되찾는다. */
    .growth-list.type02 > li,
    .growth-list.type02 > li[data-aos][data-aos]{transition:transform .42s cubic-bezier(.22,.8,.28,1), box-shadow .42s ease;}
    .growth-list.type02 > li:hover{
        transform:translateY(-6px);
        box-shadow:inset 0 0 0 2px var(--point-color01), 0 16px 30px rgba(19,24,31,.10);
        z-index:1;
    }
    .growth-list.type02 > li:hover .icon{background:var(--point-color01); transform:scale(1.06);}
    .growth-list.type02 > li:hover .icon img{filter:brightness(0) invert(1);}

    /* 승진 트랙 : 호버 시 4px 테두리 자체를 강조색으로 (inset 라인을 겹치면 선이 2줄로 보인다) */
    .track-step > li:hover,
    .track-step.type02 > li:hover{border-color:var(--point-color01); box-shadow:0 18px 34px rgba(19,24,31,.12);}
}

/* mirae-product-merged-desc-260903 : 설명+Spec 통합 표기 카드 — 소개 문단과 사양 목록 사이 한 줄 간격 */
.desc dd.pf-merged p + ul{margin-top: 1em;}

/* mirae-product-merged-desc-260904 : 설명+Spec 통합 카드 — 사양 줄 앞 '·', 소제목 여백, 적용분야 하위 목록 */
.desc dd.pf-merged > ul > li::before{content: "· ";}
.desc dd.pf-merged ul ul{margin: .25em 0 0; padding-left: .9em;}
.desc dd.pf-merged ul ul > li::before{content: none;}
.desc dd.pf-merged .pf-sub{margin-top: 1.1em;}

/* 제품 통합 설명 - ( ) 부연설명 줄은 점 없음 (2026-09-04) */
.desc dd.pf-merged > ul > li.pf-nd::before{content: none;}

/* MAI Series 공통 소개 — 개별 카드에서 그룹 제목 아래로 이동 (2026-09-04) */
.pf-mai-intro{margin:-16px 0 40px;}
.pf-mai-intro > ul{margin:0; padding:0; list-style:none;}
.pf-mai-intro > ul > li::before{content:"· ";}
@media (max-width:767px){.pf-mai-intro{margin:-8px 0 28px;}}

/* 260909: ESG Social — capsule and detail box react to hover together (customer request) */
@media (hover:hover) and (pointer:fine){
  .direction-list .exp{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease,background-color .35s ease;}
  .direction-list>li:hover .exp{transform:translateY(-7px);box-shadow:inset 0 0 0 1px var(--point-color01),0 16px 30px rgba(19,24,31,.10);}
}

/* 260909: Location — building photo above each map (customer request) */
.loca-meta .loca-photo{width:100%;overflow:hidden;line-height:0;aspect-ratio:auto;height:clamp(200px,42vw,600px);}
.loca-meta .loca-photo img{width:100%;height:100%;object-fit:cover;display:block;}

/* 260909-location-photo-ratio */
.loca-photo{width:100%;aspect-ratio:16/9;overflow:hidden;}
.loca-photo img{display:block;width:100%;height:100%;object-fit:cover;}

/* 260909-familysite-photo-ratio : 계열사 사진을 기존 홈페이지처럼 원본 비율로 표시 */
.fs-img-list li img{width:auto;height:auto;max-height:190px;max-width:100%;object-fit:contain}
.fs-img-list.product li img{width:auto;height:auto;max-height:170px;max-width:100%;object-fit:contain}
.fs-img-list:not(.product):not(.poster) li:only-child img{max-height:340px}

/* 통합검색 → 제품 목록 앵커 이동 시 sticky 헤더에 가려지지 않게 (260909) */
.product-list > li{scroll-margin-top:calc(var(--header-h) + 24px)}

/* 통합검색 결과의 게시판 리스트는 게시판 목록용 "전체 N건" 라벨을 그리지 않는다 — 섹션 제목과 겹침 (260909) */
html[lang] .sr-group[data-board-type] .news-grid::before,
html[lang] .sr-group[data-board-type] .news-grid::after{content:none}

/* 통합검색에서 넘어온 제품을 목록에서 잠시 강조 (260909) */
html[lang] .product-list > li:target{outline:2px solid var(--point-color01);outline-offset:10px}

/* 통합검색 섹션별 "더보기" — 상위 4건 외 나머지는 목록 페이지에서 이어 본다 (260909) */
.sr-more{display:flex;justify-content:center;margin-top:clamp(20px, 2.5vw, 32px)}
.sr-more a{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border:1px solid var(--gray-200);border-radius:999px;font-size:clamp(14px, 1.1vw, 16px);color:var(--black-color02);transition:border-color .25s, color .25s}
.sr-more a:hover{border-color:var(--point-color01);color:var(--point-color01)}