@charset "utf-8"; /* ========================================================= (주)에스케이피 SKP — 공통 스타일 브랜드: var(--ac) (SKP 블루) / 다크 베이스 ========================================================= */ /* ===== 웹폰트 (프로젝트 내장 — 방문자 PC 설치 여부와 무관하게 같게 보인다) ===== Pretendard, SIL Open Font License 1.1 두 파일뿐이라 font-weight 를 범위로 선언한다. 400~550 → Medium, 551~900 → Bold 이렇게 하면 CSS 의 600/700/800/900 이 브라우저의 가짜 굵게(faux bold) 없이 자동으로 Bold 파일에 매칭된다. 문구를 크게 바꾼 뒤에는 python _tools/build_font.py 로 다시 서브셋한다. */ @font-face{ font-family:"Pretendard"; src:url("../font/pretendard-medium.woff2") format("woff2"); font-weight:400 550; font-style:normal; font-display:swap; } @font-face{ font-family:"Pretendard"; src:url("../font/pretendard-bold.woff2") format("woff2"); font-weight:551 900; font-style:normal; font-display:swap; } :root{ /* ── 액센트 ─────────────────────────────────────────────── 기본값 = SKP 로고 블루. slope.html 은 으로 같은 자리에 그린을 넣는다. 색 참조는 전부 이 토큰을 거치므로 페이지에 속성 하나만 붙이면 액센트가 통째로 바뀐다. 대비는 다크 배경(#0A121C) 기준으로 실측한 값을 적어 둔다. */ --ac:#009CDD; /* 다크배경 6.09:1 */ --ac-l:#3FBDF0; /* 다크배경 8.73:1 — 강조 텍스트 */ --ac-d:#0077AB; /* 흰 글씨 4.97:1 */ --ac-dd:#005E88; /* 흰 글씨 7.10:1 — hover */ --ac-on:#04212E; /* 채운 면 위 글자 — #009CDD 대비 5.37:1 */ --ac-rgb:0,156,221; /* 투명도 있는 파생색용 */ --ac-ph:#5CC8F2; /* 사진 위에서 쓰는 밝은 액센트 */ --ac-ph-soft:#9FE6FF; --scrim:rgba(10,18,28,.48); /* 글자는 지키되 배경 사진의 형체가 보이는 막 */ --scrim-op:.84; /* 다크 모드 배경 사진 노출 */ --lime:#6FC72E; /* 사면방재 그린 — slope.html 의 --ac 와 같은 값. 게이트웨이 좌측 칸이 사면 페이지와 같은 색이어야 넘어가기 전에 어느 쪽인지 색으로 먼저 읽힌다. */ --bg:#0A121C; --bg2:#0F1B28; --bg3:#16242F; --line:rgba(255,255,255,.12); --txt:#EAF1F8; --mut:#93A5B8; --mut2:#8496A8; /* 4.15:1 → 5.9:1 (WCAG AA 통과) */ --max:1280px; --ease:cubic-bezier(.22,.7,.28,1); /* 아래는 라이트 테마에서 값만 바뀐다 (구조·간격은 동일) */ --txt2:#C0D2E2; /* 보조 본문 */ --surf:#16242F; /* 카드 면 */ --surf-hi:#1B2C3A; /* 카드 hover 면 */ --chip:rgba(255,255,255,.06); /* 칩 · 태그 면 */ --line2:rgba(255,255,255,.24); /* 진한 구분선 */ --ac-soft:#8FE0FF; /* 옅은 배지 글자 */ --tint:rgba(var(--ac-rgb),.14); /* 파랑 옅은 면 */ --tint-b:rgba(var(--ac-rgb),.42); /* 파랑 옅은 테두리 */ --hd-bg:rgba(10,18,28,.9); /* 스크롤 후 헤더 배경 */ --sb-thumb:#2b3d4e; /* 스크롤바 */ --grain:.035; --grain-blend:overlay; --shadow:0 10px 24px rgba(0,0,0,.3); } /* ========================================================= 사면방재 = 그린 액센트 (slope.html 의 ) --------------------------------------------------------- 드론(블루)과 사면(그린)을 색으로 갈라 놓는다. 드론 문의로 들어온 사람이 사면 페이지와 같은 색을 보면 두 사업이 한 덩어리로 읽히기 때문이다. 지강산업 그린(#34a853, 색상 146°)과는 색상 자체가 다르다(94°) — 노란기가 있다. 대비는 다크 배경(#0A121C) 기준 실측값. ========================================================= */ html[data-accent="green"]{ --ac:#6FC72E; /* 다크배경 8.86:1 */ --ac-l:#96E05C; /* 강조 텍스트 */ --ac-d:#457F1C; /* 흰 글씨 4.88:1 */ --ac-dd:#35630F; /* 흰 글씨 hover */ --ac-on:#0B2405; /* 채운 면 위 글자 — #6FC72E 대비 8.0:1 */ --ac-soft:#C2F095; /* 옅은 배지 글자 */ --ac-rgb:111,199,46; --ac-ph:#A8E97A; /* 사진 위에서 쓰는 밝은 그린 */ --ac-ph-soft:#C9F6A2; } html[data-accent="green"][data-theme="light"]{ --ac-l:#3D7A11; /* 흰 배경에서 밝은 그린은 안 읽힌다 — 5.26:1 로 내린다 */ --ac-soft:#35630F; } /* ===== 라이트 테마 ===== 이미지 위에 얹히는 오버레이(히어로 · 게이트웨이 · CTA · 카드 캡션)는 라이트에서도 어둡게 유지한다. 사진 위 흰 글자는 그래야 읽힌다. */ html[data-theme="light"]{ --bg:#FFFFFF; --bg2:#F3F7FA; --bg3:#FFFFFF; --surf:#FFFFFF; --surf-hi:#F1F7FB; --line:rgba(12,38,58,.13); --line2:rgba(12,38,58,.22); --chip:rgba(12,38,58,.05); --txt:#11212D; --txt2:#3B4D5D; --mut:#586A79; --mut2:#76848F; --ac-l:#0072A8; --ac-soft:#005E88; --tint:rgba(var(--ac-rgb),.09); --tint-b:rgba(var(--ac-rgb),.32); --hd-bg:rgba(255,255,255,.92); --sb-thumb:#c3d0da; --grain:.02; --grain-blend:multiply; --shadow:0 8px 18px rgba(20,45,65,.09); --scrim:rgba(243,247,250,.62); --scrim-op:.7; } /* ========================================================= 사진 위 영역은 테마와 무관하게 밝은 글자를 쓴다. 라이트 테마에서 --txt 가 어두워지면 배너 글씨가 사진에 묻히기 때문에, 해당 영역 안에서만 토큰을 다크 값으로 되돌린다. ========================================================= */ .visual, .shero, .gate__head, .gate__body, .cta, .card__img, .slide figcaption, .trio figcaption, .sync__visual{ color:var(--txt); /* 지역 토큰으로 색을 다시 계산 — 이게 없으면 body 색이 그대로 상속된다 */ --txt:#EAF1F8; --txt2:#C4D4E2; --mut:#A9BCCC; --mut2:#9AACBB; --ac-l:var(--ac-ph); --ac-soft:var(--ac-ph-soft); --line:rgba(255,255,255,.14); --line2:rgba(255,255,255,.26); --chip:rgba(255,255,255,.08); } /* 게이트웨이 하단 회사정보 바는 사진 밖이므로 테마 값을 그대로 쓴다 */ .gate__foot{ --txt:initial; --txt2:initial; --mut:initial; --mut2:initial; --ac-l:initial; --line:initial; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;max-width:100%;overflow-x:clip} body{ background:var(--bg); color:var(--txt); font-family:"Pretendard","Noto Sans KR","Malgun Gothic","맑은 고딕",-apple-system,sans-serif; font-size:16px; line-height:1.7; letter-spacing:-.02em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; max-width:100%;overflow-x:clip; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} ul,ol{list-style:none} ::selection{background:var(--ac);color:#fff} /* 스크롤바 */ ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:0} ::-webkit-scrollbar-thumb:hover{background:var(--ac-d)} .wrap{width:min(100% - 48px,var(--max));margin-inline:auto} /* ===== 헤더 ===== */ .hd{ position:fixed;inset:0 0 auto 0;z-index:200; display:flex;align-items:center;justify-content:space-between; gap:clamp(16px,3vw,44px);padding:0 clamp(24px,4vw,58px);height:120px; transition:background .28s var(--ease),border-color .28s; border-bottom:1px solid transparent; } .hd__right{display:flex;align-items:center;gap:10px} .hd__cta--m{display:none} /* 모바일 서랍용 — 데스크톱에서는 숨김 */ /* 네비를 화면 정중앙에 둔다. 로고·우측 묶음 폭이 서로 달라도 position:absolute + left:50% 로 두면 그 차이와 무관하게 항상 진짜 가운데다. .hd 가 이미 fixed 라 포함블록이 잡혀 있어 top:50%/translate 로 세로도 같이 맞춘다. */ .hd__nav{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display:flex;align-items:center;gap:4px; } .hd__item{position:relative} .hd__top{ position:relative;display:block;padding:17px 26px;font-size:20px;font-weight:750; color:var(--txt2);border-radius:2px;white-space:nowrap; transition:color .18s,background .18s; } .hd__item:hover .hd__top,.hd__item:focus-within .hd__top{background:var(--chip)} /* 위에 올리면 다크에서는 흰색, 라이트에서는 거의 검정 — 뚜렷한 대비로 반응한다 */ :root:not([data-theme="light"]) .hd__item:hover .hd__top, :root:not([data-theme="light"]) .hd__item:focus-within .hd__top{color:#fff} html[data-theme="light"] .hd__item:hover .hd__top, html[data-theme="light"] .hd__item:focus-within .hd__top{color:#0A121C} .hd__top.on{color:var(--ac-l)} .hd__top.on::after{content:"";position:absolute;left:18px;right:18px;bottom:2px;height:2px;background:var(--ac);border-radius:2px} /* 드롭다운 — 하위 페이지 섹션으로 바로 이동 */ .hd__drop{ position:absolute;left:50%;top:calc(100% + 28px);transform:translate(-50%,8px); min-width:238px;padding:6px 0;margin-top:0; background:#0D1823; border:1px solid rgba(255,255,255,.12);border-radius:0;box-shadow:0 14px 30px rgba(0,0,0,.3); display:flex;flex-direction:column;gap:0; opacity:0;pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease); } .hd__item:hover .hd__drop,.hd__item:focus-within .hd__drop{ opacity:1;pointer-events:auto;transform:translate(-50%,0); } .hd__drop::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:29px} .hd__drop::after{display:none} .hd__drop a{padding:13px 18px;font-size:14.5px;font-weight:650;color:#F3F7FA;border-radius:0;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.08)} .hd__drop a:last-child{border-bottom:0} .hd__drop a:hover,.hd__drop a:focus-visible{background:rgba(var(--ac-rgb),.16);color:var(--ac-ph)} /* 브라이트 모드에서는 밝은 면과 진한 글자로 반전한다. */ html[data-theme="light"] .hd__drop{ background:#fff;border-color:rgba(10,18,28,.14); box-shadow:0 14px 30px rgba(18,38,52,.14); } html[data-theme="light"] .hd__drop a{color:#263745} html[data-theme="light"] .hd__drop a{border-bottom-color:rgba(10,18,28,.09)} html[data-theme="light"] .hd__drop a:hover, html[data-theme="light"] .hd__drop a:focus-visible{background:rgba(var(--ac-rgb),.1);color:var(--ac-l)} /* 상단 사업 메뉴는 현재 페이지와 무관하게 사업 고유색으로 구분한다. */ @media (min-width:901px){ /* transform이 있으면 fixed 서브메뉴의 기준이 화면이 아니라 nav가 된다. */ .hd__nav{ left:0;right:0;top:0;height:120px;transform:none; justify-content:center;gap:28px;pointer-events:none; } .hd__item{pointer-events:auto} /* 데스크톱: 작은 팝업 대신 헤더 전체 폭의 기업형 서브메뉴 바 */ .hd__drop{ position:fixed;left:0;right:0;top:120px;width:100vw;min-width:0; padding:34px clamp(24px,4vw,58px) 38px;transform:translateY(-12px); flex-direction:row;align-items:center;justify-content:center;gap:0; border-left:0;border-right:0;box-shadow:0 14px 28px rgba(0,0,0,.18); } .hd__item:hover .hd__drop,.hd__item:focus-within .hd__drop{transform:translateY(0)} .hd__drop::before{display:block;height:31px} .hd__drop a{ min-width:170px;padding:18px 26px;text-align:left;font-size:17px; border-bottom:0;border-right:1px solid rgba(255,255,255,.1); } .hd__drop a:last-child{border-right:0} html[data-theme="light"] .hd__drop a{border-right-color:rgba(10,18,28,.1)} .hd__item:nth-child(1) .hd__drop{ background:linear-gradient(90deg,rgba(7,18,11,.92),rgba(12,30,17,.84),rgba(7,18,11,.92)),url("../img/bg_dropdown_slope.png") center 52%/cover no-repeat; border-color:rgba(111,199,46,.34);border-top:3px solid #6FC72E; } .hd__item:nth-child(1) .hd__drop a:hover, .hd__item:nth-child(1) .hd__drop a:focus-visible{background:rgba(111,199,46,.18);color:#A8E97A} .hd__item:nth-child(2) .hd__drop{ background:linear-gradient(90deg,rgba(5,18,28,.92),rgba(7,29,43,.82),rgba(5,18,28,.92)),url("../img/bg_dropdown_drone.png") center 54%/cover no-repeat; border-color:rgba(0,156,221,.34);border-top:3px solid #009CDD; } .hd__item:nth-child(2) .hd__drop a:hover, .hd__item:nth-child(2) .hd__drop a:focus-visible{background:rgba(0,156,221,.18);color:#5CC8F2} html[data-theme="light"] .hd__item:nth-child(1) .hd__drop{ background:linear-gradient(90deg,rgba(250,253,248,.91),rgba(247,252,243,.84),rgba(250,253,248,.91)),url("../img/bg_dropdown_slope.png") center 52%/cover no-repeat; border-color:rgba(69,127,28,.25);border-top-color:#6FC72E; } html[data-theme="light"] .hd__item:nth-child(1) .hd__drop a:hover, html[data-theme="light"] .hd__item:nth-child(1) .hd__drop a:focus-visible{background:rgba(111,199,46,.13);color:#3D7A11} html[data-theme="light"] .hd__item:nth-child(2) .hd__drop{ background:linear-gradient(90deg,rgba(249,252,254,.92),rgba(242,249,253,.84),rgba(249,252,254,.92)),url("../img/bg_dropdown_drone.png") center 54%/cover no-repeat; border-color:rgba(0,119,171,.24);border-top-color:#009CDD; } html[data-theme="light"] .hd__item:nth-child(2) .hd__drop a:hover, html[data-theme="light"] .hd__item:nth-child(2) .hd__drop a:focus-visible{background:rgba(0,156,221,.12);color:#0077AB} .hd__drop>a:not(.hd__drop-cta){display:flex;min-height:96px;flex-direction:column;justify-content:center;gap:10px} .hd__drop>a:not(.hd__drop-cta)::after{display:block;font-size:12px;font-weight:500;line-height:1.5;color:#9DB0BF;white-space:nowrap} .hd__item:nth-child(1) .hd__drop>a:nth-child(1)::after{content:"생산 · 설치 · 연구 · 개발"} .hd__item:nth-child(1) .hd__drop>a:nth-child(2)::after{content:"제품군 · 적용 분야"} .hd__item:nth-child(1) .hd__drop>a:nth-child(3)::after{content:"통합 업무 체계"} .hd__item:nth-child(2) .hd__drop>a:nth-child(1)::after{content:"측량 · 점검 · 촬영"} .hd__item:nth-child(2) .hd__drop>a:nth-child(2)::after{content:"건설 · 시설물 · 산업"} .hd__item:nth-child(2) .hd__drop>a:nth-child(3)::after{content:"공간정보 구축 · 결과물"} .hd__item:nth-child(2) .hd__drop>a:nth-child(4)::after{content:"등록 자격 · 운영 기반"} html[data-theme="light"] .hd__drop>a:not(.hd__drop-cta)::after{color:#6B7E8C} .hd__drop-info{display:flex;min-width:230px;min-height:96px;padding:4px 30px;flex-direction:column;justify-content:center;border-left:1px solid rgba(255,255,255,.16)} .hd__drop-info span{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--ac-l)} .hd__drop-info b{margin-top:9px;font-size:19px;color:#F3F7FA;font-variant-numeric:tabular-nums} .hd__drop-info small{margin-top:6px;font-size:13px;color:#B8C6D1} html[data-theme="light"] .hd__drop-info{border-left-color:rgba(10,18,28,.12)} html[data-theme="light"] .hd__drop-info b{color:#172A38} html[data-theme="light"] .hd__drop-info small{color:#64798A} .hd__drop .hd__drop-cta{display:grid;place-items:center;min-width:168px;min-height:72px;margin-left:28px;border:0;font-weight:800;text-align:center} .hd__item .hd__drop .hd__drop-cta, html[data-theme="light"] .hd__item .hd__drop .hd__drop-cta{background:var(--ac);color:var(--ac-on)} .hd__item .hd__drop .hd__drop-cta:hover, html[data-theme="light"] .hd__item .hd__drop .hd__drop-cta:hover{background:var(--ac-l);color:var(--ac-on)} html[data-accent="green"] .hd__item .hd__drop .hd__drop-cta{background:#6FC72E;color:#0B2405} html[data-accent="green"] .hd__item .hd__drop .hd__drop-cta:hover{background:#96E05C;color:#0B2405} } /* 단일 메가메뉴 — 어느 상단 사업 메뉴에 올려도 두 사업 전체가 함께 열린다. */ .hd__mega{opacity:0;pointer-events:none} @media (min-width:901px){ .hd__mega{ position:fixed;left:0;right:0;top:120px;z-index:205; background:rgba(7,15,23,.97);border-top:1px solid var(--ac);border-bottom:1px solid rgba(255,255,255,.13); box-shadow:0 22px 48px rgba(0,0,0,.35);transform:translateY(-14px); transition:opacity .2s var(--ease),transform .24s var(--ease); } .hd__mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:32px} .hd__nav:hover .hd__mega,.hd__nav:focus-within .hd__mega{opacity:1;pointer-events:auto;transform:none} .hd__mega-in{width:min(1280px,calc(100% - 64px));margin:auto;padding:42px 0 46px;display:grid;grid-template-columns:1fr 1fr .78fr;gap:clamp(42px,5vw,78px)} .hd__mega-group{padding:30px 32px 32px;border-top:3px solid;background-size:cover;background-position:center;min-height:292px} .hd__mega-group--slope{border-color:#6FC72E;background-image:linear-gradient(110deg,rgba(8,22,12,.79),rgba(8,22,12,.91)),url("../img/bg_dropdown_slope.png")} .hd__mega-group--drone{border-color:#009CDD;background-image:linear-gradient(110deg,rgba(6,21,31,.77),rgba(6,21,31,.9)),url("../img/bg_dropdown_drone.png")} .hd__mega-title{display:flex;align-items:center;min-height:54px;padding:0 0 22px;border-bottom:1px solid rgba(255,255,255,.2)} .hd__mega-title small{font-size:10.5px;font-weight:800;letter-spacing:.2em;color:#9FB0BE} .hd__mega-group--slope .hd__mega-title small{color:#A8E97A} .hd__mega-group--drone .hd__mega-title small{color:#5CC8F2} .hd__mega-title strong{font-size:22px;color:#F3F7FA;letter-spacing:-.03em} .hd__mega-links{display:flex;flex-direction:column;position:relative;margin-top:18px;padding-left:17px;border-left:1px solid rgba(255,255,255,.18)} .hd__mega-links::before{display:none} .hd__mega-links a{position:relative;padding:9px 20px 9px 0;font-size:16px;color:#D7E1E9;border-bottom:1px solid rgba(255,255,255,.09);transition:padding .2s,color .2s} .hd__mega-links a::after{content:"\2192";position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:15px;color:#718493;transition:transform .2s,color .2s} .hd__mega-links a:hover{padding-left:6px} .hd__mega-links a:hover::after{transform:translate(3px,-50%);color:currentColor} .hd__mega-group--slope .hd__mega-links::before{color:#A8E97A} .hd__mega-group--drone .hd__mega-links::before{color:#5CC8F2} .hd__mega-group--slope .hd__mega-links a:hover{color:#A8E97A} .hd__mega-group--drone .hd__mega-links a:hover{color:#5CC8F2} .hd__mega-contact{display:grid;grid-template-columns:minmax(190px,1fr) 146px;grid-template-rows:auto auto auto 1fr;column-gap:26px;align-content:center;padding:28px 30px;border:1px solid rgba(var(--ac-rgb),.3);background:linear-gradient(120deg,rgba(var(--ac-rgb),.14),rgba(var(--ac-rgb),.035));box-shadow:inset 3px 0 0 var(--ac)} .hd__mega-contact>span{grid-column:1;font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--ac-l)} .hd__mega-contact>strong{grid-column:1;margin-top:10px;font-size:21px;color:#F3F7FA;font-variant-numeric:tabular-nums;white-space:nowrap} .hd__mega-contact>small{grid-column:1;margin-top:5px;font-size:14px;color:#B6C5D0} .hd__mega-contact p{grid-column:1;margin-top:14px;font-size:13px;line-height:1.65;color:#91A3B1} .hd__mega-contact>a{grid-column:2;grid-row:1/5;align-self:center;display:grid;place-items:center;min-height:64px;background:var(--ac);color:var(--ac-on);font-size:16px;font-weight:800} .hd__mega-contact>a:hover{background:var(--ac-l)} html[data-accent="green"] .hd__mega-contact>a{background:#6FC72E;color:#0B2405} html[data-accent="green"] .hd__mega-contact>a:hover{background:#96E05C} html[data-theme="light"] .hd__mega{background:rgba(250,252,253,.98);border-bottom-color:rgba(10,18,28,.14)} html[data-theme="light"] .hd__mega-contact{border-color:rgba(var(--ac-rgb),.25);background:linear-gradient(120deg,rgba(var(--ac-rgb),.1),rgba(255,255,255,.72))} html[data-theme="light"] .hd__mega-contact>strong{color:#172A38} html[data-theme="light"] .hd__mega-contact>small{color:#5F7485} html[data-theme="light"] .hd__mega-contact p{color:#6B7E8C} } @media (min-width:901px) and (max-width:1449px){ .hd__mega-contact{display:flex;flex-direction:column;justify-content:center;padding:28px 24px;box-shadow:inset 3px 0 0 var(--ac)} .hd__mega-contact>strong{margin-top:10px;font-size:19px;white-space:normal} .hd__mega-contact>small{margin-top:5px} .hd__mega-contact p{margin-top:14px} .hd__mega-contact>a{display:grid;width:100%;min-height:54px;margin-top:18px} } @media (min-width:1450px){ .hd__nav{gap:clamp(54px,5vw,88px)} .hd__item{width:365px;text-align:center} .hd__mega-in{ position:relative;width:calc(100% - 64px);max-width:none; grid-template-columns:repeat(2,minmax(320px,365px)); justify-content:center;gap:clamp(54px,5vw,88px); } .hd__mega-contact{ position:absolute;right:0;top:42px;bottom:46px;width:clamp(370px,24vw,440px); } } .hd.solid{background:var(--hd-bg);backdrop-filter:blur(14px);height:120px;border-bottom-color:var(--line)} .hd__logo{display:flex;align-items:center;gap:14px} .hd__logo{position:relative;z-index:230;pointer-events:auto} .hd__logo img{height:52px;width:auto} .hd__logo b{font-size:23px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;line-height:1.25} .hd__logo span{font-size:12px;color:var(--mut);letter-spacing:.14em;display:block;font-weight:600;margin-top:1px} /* 이동 링크(.hd__top·.hd__drop a) 자체 규칙은 위 드롭다운 블록에 있다. 여기서는 문의하기 버튼만 정의한다 — 데스크톱 고정 버튼과 모바일 서랍 버튼 둘 다 이 클래스를 쓴다. */ .hd__cta{ padding:15px 28px;border-radius:2px;background:var(--ac);color:var(--ac-on); font-size:16px;font-weight:750;transition:background .2s,transform .2s; } .hd__nav a.hd__cta{color:var(--ac-on)} /* 브랜드 블루 위 진한 남색 — 5.37:1 */ .hd__cta:hover{background:var(--ac-l);transform:translateY(-1px)} .hd__burger{display:none;width:42px;height:42px;position:relative} .hd__burger i{position:absolute;left:11px;right:11px;height:2px;background:var(--txt);border-radius:2px;transition:.3s var(--ease)} .hd__burger i:nth-child(1){top:15px} .hd__burger i:nth-child(2){top:21px} .hd__burger i:nth-child(3){top:27px} .hd__burger.on i:nth-child(1){top:21px;transform:rotate(45deg)} .hd__burger.on i:nth-child(2){opacity:0} .hd__burger.on i:nth-child(3){top:21px;transform:rotate(-45deg)} @media (max-width:900px){ .hd{height:70px;gap:12px} .hd.solid{height:66px} .hd__logo img{height:34px} .hd__logo b{font-size:17px} .hd__logo span{font-size:10.5px;letter-spacing:.1em} .hd__burger{display:block} .hd__cta--d{display:none} /* 좁은 화면에서는 서랍 안 CTA 만 쓴다 */ .hd__cta--m{display:none} .hd__nav{ position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;gap:0; background:var(--hd-bg);backdrop-filter:blur(16px);padding:10px 20px 24px; border-bottom:1px solid var(--line); transform:translateY(-14px);opacity:0;pointer-events:none;transition:.3s var(--ease); } .hd__nav.open{transform:none;opacity:1;pointer-events:auto} .hd__nav .hd__cta{text-align:center;margin-top:12px} /* 좁은 화면에서는 호버 팝업이 아니라 펼쳐진 목록으로 보여준다 — 터치에는 호버가 없다 */ .hd__item{position:static;margin-bottom:2px} .hd__top{padding:14px 8px;font-size:17px} .hd__top.on::after{display:none} .hd__drop{ position:static;opacity:1;pointer-events:auto;transform:none; min-width:0;margin:0 0 8px;padding:0 0 0 16px; background:none;border:none;box-shadow:none; } .hd__drop::after{display:none} .hd__drop a{padding:10px 8px;font-size:14.5px;color:var(--mut)} .hd__drop a:hover{background:var(--chip);color:var(--txt)} .hd__drop .hd__drop-cta{display:none} .hd__drop-info{display:none} .hd__item{display:none} .hd__mega{position:static;opacity:1;pointer-events:auto;transform:none} .hd__mega-in{display:grid;grid-template-columns:1fr;gap:14px} .hd__mega-group{padding:22px 20px;border-top:3px solid var(--line);background:var(--surf)} .hd__mega-group--slope{border-top-color:#6FC72E} .hd__mega-group--drone{border-top-color:#009CDD} .hd__mega-title{display:flex;flex-direction:column;gap:4px;padding-bottom:13px;border-bottom:1px solid var(--line)} .hd__mega-title small{font-size:10px;letter-spacing:.16em;color:var(--mut)} .hd__mega-title strong{font-size:19px;color:var(--txt)} .hd__mega-links{display:flex;flex-direction:column;padding-top:6px} .hd__mega-links a{padding:10px 0;color:var(--mut);font-size:14.5px} .hd__mega-contact{display:flex;flex-direction:column;padding:22px 20px;border:1px solid var(--line);background:var(--surf);box-shadow:none} .hd__mega-contact>span{font-size:10px;letter-spacing:.18em;color:var(--ac-l)} .hd__mega-contact>strong{margin-top:8px;color:var(--txt)} .hd__mega-contact>small,.hd__mega-contact p{margin-top:6px;color:var(--mut);font-size:12px;line-height:1.6} .hd__mega-contact>a{margin-top:14px;padding:12px;text-align:center;background:var(--ac);color:var(--ac-on);font-weight:800} } @media (max-width:420px){ .hd__logo span{display:none} /* 아주 좁으면 영문 태그라인을 접는다 */ } /* ===== 공통 섹션 ===== */ .sec{padding:clamp(70px,9vw,130px) 0;position:relative} .sec--alt{background:var(--bg2)} .eyebrow{ display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:800; letter-spacing:.2em;color:var(--ac-l);text-transform:uppercase;margin-bottom:16px; } .eyebrow::before{content:"";width:26px;height:2px;background:var(--ac);border-radius:2px} .h2{font-size:clamp(28px,4vw,46px);font-weight:800;line-height:1.28;letter-spacing:-.035em;max-width:32ch} .h2 em{font-style:normal;color:var(--ac-l)} .lead{margin-top:18px;font-size:clamp(15px,1.5vw,18px);color:var(--mut);line-height:1.85;max-width:64ch} .h2,.lead,.shero h1,.shero p,.visual h1,.visual__h,.visual__desc,.pane__ko,.pane__desc{ word-break:keep-all;overflow-wrap:normal } .sec__head{margin-bottom:clamp(38px,5vw,62px)} /* 사면방재 페이지 — 생산·설치·연구·개발을 회사 업무 흐름으로 보여준다. */ .slope-index{background:var(--bg2);border-bottom:1px solid var(--line)} .slope-index__grid{display:grid;grid-template-columns:repeat(4,1fr)} .slope-index a{padding:28px clamp(20px,2.5vw,38px);border-left:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:0 16px;transition:.25s var(--ease)} .slope-index a:last-child{border-right:1px solid var(--line)} .slope-index b{grid-row:1/3;color:var(--ac-l);font-size:12px;letter-spacing:.12em} .slope-index span{font-size:12px;color:var(--mut)} .slope-index strong{font-size:19px;color:var(--txt);margin-top:2px} .slope-index a:hover{background:var(--surf-hi);transform:translateY(-2px)} .slope-flow{display:flex;flex-direction:column;border-top:1px solid var(--line)} .slope-flow__item{display:grid;grid-template-columns:1.15fr .85fr;min-height:440px;border-bottom:1px solid var(--line);scroll-margin-top:110px} .slope-flow__item:nth-child(even) .slope-flow__img{order:2} .slope-flow__img{overflow:hidden;min-height:360px} .slope-flow__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .slope-flow__item:hover .slope-flow__img img{transform:scale(1.035)} .slope-flow__copy{padding:clamp(34px,5vw,72px);display:flex;flex-direction:column;justify-content:center;background:var(--surf)} .slope-flow__copy>b,.slope-products article>b{font-size:11px;letter-spacing:.18em;color:var(--ac-l)} .slope-flow__copy h3{margin-top:10px;font-size:clamp(28px,3.6vw,44px);line-height:1.2} .slope-flow__copy p{margin-top:18px;color:var(--mut);line-height:1.85;word-break:keep-all} .slope-flow__copy ul{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px} .slope-flow__copy li{padding:6px 12px;border:1px solid var(--line);color:var(--txt2);font-size:13px} .slope-products{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .slope-products article{border:1px solid var(--line);background:var(--surf);padding-bottom:26px} .slope-products article>div{aspect-ratio:4/3;overflow:hidden;margin-bottom:22px} .slope-products img{width:100%;height:100%;object-fit:cover;transition:.7s var(--ease)} .slope-products article:hover img{transform:scale(1.05)} .slope-products article>b,.slope-products h3,.slope-products p{display:block;margin-left:24px;margin-right:24px} .slope-products h3{font-size:24px;margin-top:8px}.slope-products p{color:var(--mut);margin-top:8px;word-break:keep-all} .slope-process__list{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .slope-process__list li{padding:28px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:180px} .slope-process__list li:last-child{border-right:0}.slope-process__list b{font-size:12px;color:var(--ac-l)} .slope-process__list strong{font-size:19px;margin-top:22px}.slope-process__list span{font-size:13.5px;color:var(--mut);margin-top:8px;word-break:keep-all} @media(max-width:900px){.slope-index__grid{grid-template-columns:repeat(2,1fr)}.slope-flow__item{grid-template-columns:1fr}.slope-flow__item:nth-child(even) .slope-flow__img{order:0}.slope-products{grid-template-columns:1fr}.slope-process__list{grid-template-columns:1fr}.slope-process__list li{min-height:0;border-right:0;border-bottom:1px solid var(--line)}.slope-process__list li:last-child{border-bottom:0}} @media(max-width:520px){.slope-index__grid{grid-template-columns:1fr}.slope-index a,.slope-index a:last-child{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.slope-flow__copy{padding:28px 22px}.slope-flow__img{min-height:280px}} /* 설명 목록 대신 현장 이미지로 역량을 소개하는 공통 비주얼 */ .intro-visuals{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px)} .intro-visuals article{position:relative;min-height:clamp(360px,43vw,560px);overflow:hidden;background:#0A121C} .intro-visuals article:nth-child(2){transform:translateY(clamp(18px,2.4vw,34px))} .intro-visuals img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s var(--ease)} .intro-visuals article::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,12,19,.08) 28%,rgba(5,12,19,.9) 100%)} .intro-visuals article::before{content:"";position:absolute;z-index:3;left:0;right:0;bottom:0;height:3px;transform:scaleX(.28);transform-origin:left;transition:transform .5s var(--ease)} .intro-visuals--slope article::before{background:#6FC72E} .intro-visuals--drone article::before{background:#009CDD} .intro-visuals article:hover img{transform:scale(1.045)} .intro-visuals article:hover::before{transform:scaleX(1)} .intro-visuals article>div{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:clamp(24px,3vw,40px);color:#F2F7FC} .intro-visuals b{font-size:11px;letter-spacing:.17em;color:var(--ac-ph)} .intro-visuals--slope b{color:#A8E97A} .intro-visuals--drone b{color:#5CC8F2} .intro-visuals h3{margin-top:9px;font-size:clamp(24px,2.5vw,34px);line-height:1.2;letter-spacing:-.035em} .intro-visuals span{display:block;margin-top:11px;font-size:13.5px;color:#C4D4E2;word-break:keep-all} @media(max-width:760px){ .intro-visuals{grid-template-columns:1fr} .intro-visuals article,.intro-visuals article:nth-child(2){min-height:360px;transform:none} } /* 드론 페이지 상단 — 등록 사업범위인 측량·점검·촬영을 첫 화면에서 바로 구분한다. */ .drone-scope{background:var(--bg2);border-bottom:1px solid var(--line)} .drone-scope__grid{display:grid;grid-template-columns:repeat(3,1fr)} .drone-scope__item{position:relative;padding:clamp(28px,3.5vw,48px);border-left:1px solid var(--line);transition:.25s var(--ease)} .drone-scope__item:last-child{border-right:1px solid var(--line)} .drone-scope__item b{font-size:11px;letter-spacing:.18em;color:var(--ac-l)} .drone-scope__item h2{margin-top:6px;font-size:clamp(25px,3vw,38px);line-height:1.2} .drone-scope__item p{margin-top:12px;color:var(--mut);font-size:14.5px;word-break:keep-all} .drone-scope__item span{display:inline-block;margin-top:18px;font-size:13px;font-weight:700;color:var(--txt2)} .drone-scope__item:hover{background:var(--surf-hi);transform:translateY(-3px)} .drone-scope__item:hover span{color:var(--ac-l)} @media(max-width:720px){ .drone-scope__grid{grid-template-columns:1fr} .drone-scope__item,.drone-scope__item:last-child{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px} } /* 슬로건형 제목을 뺀 자리 — "기술소개" "사업분야 적용" 처럼 담백한 이름만 놓는다. 부제·리드문 없이 제목 하나만 있을 때 여백과 크기를 그만큼 줄인다. */ .h2--plain{font-size:clamp(22px,2.6vw,30px);max-width:none} .hs__head--plain{margin-bottom:clamp(20px,2.6vh,32px);grid-template-columns:1fr} .hs .h2--plain{font-size:clamp(32px,3.2vw,44px);color:#F4F8FB} .hs .hs__head--plain{margin-bottom:clamp(40px,5vh,62px)} .hs .hs__head--plain .h2 em{color:var(--ac-l)} /* 스크롤 등장 — JS가 켜진 경우에만 숨김(JS 실패 시 콘텐츠가 사라지지 않도록) */ html.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)} html.js [data-reveal].in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html.js [data-reveal]{opacity:1;transform:none;transition:none} } /* ===== 버튼 ===== */ .btn{ display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:2px; font-size:15px;font-weight:700;transition:.25s var(--ease); } .btn--fill{background:var(--ac);color:var(--ac-on)} .btn--fill:hover{background:var(--ac-l);transform:translateY(-2px)} .btn--line{border:1px solid var(--line2);color:var(--txt)} .btn--line:hover{border-color:var(--ac);background:rgba(var(--ac-rgb),.14)} .btn i{font-style:normal;transition:transform .25s var(--ease)} .btn:hover i{transform:translateX(4px)} /* ========================================================= MAIN — 1) 풀스크린 비주얼 ========================================================= */ .snap{height:auto;overflow:visible} .snap>section{scroll-snap-align:none;scroll-snap-stop:normal} body.locked{overflow-y:auto} /* PC 메인은 휠 입력마다 스크립트가 한 섹션씩 전환한다. */ @media(min-width:901px){ html[data-page="home"]{scroll-snap-type:none;scroll-behavior:auto} html[data-page="home"] .snap>.visual, html[data-page="home"] .snap>.gate{height:100dvh;min-height:600px;scroll-snap-align:none;scroll-snap-stop:normal} } /* 모바일은 브라우저 주소창 높이가 계속 변하므로 내부 100vh 스크롤을 쓰지 않는다. */ @media(max-width:900px){ body.locked{overflow-y:auto} .snap{height:auto;overflow:visible;scroll-snap-type:none;scroll-behavior:auto} .snap>section{scroll-snap-align:none;scroll-snap-stop:normal} .visual{height:100svh;min-height:560px} } .visual{position:relative;height:100vh;min-height:600px;overflow:hidden;background:#000} .visual__stage{position:absolute;inset:0} .visual__item{ position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease); } .visual__item.on{opacity:1} .visual__item img,.visual__item video{width:100%;height:100%;object-fit:cover} .visual__item.on img{animation:kb 9s var(--ease) forwards} @keyframes kb{from{transform:scale(1.0)}to{transform:scale(1.1)}} .visual::after{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background: linear-gradient(180deg,rgba(10,18,28,.72) 0%,rgba(10,18,28,.18) 34%,rgba(10,18,28,.5) 72%,rgba(10,18,28,.92) 100%), linear-gradient(90deg,rgba(7,15,24,.86) 0%,rgba(7,15,24,.52) 38%,transparent 72%); } /* 사면 스캔라인 장식 */ .visual__grid{ position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.16; background-image:linear-gradient(rgba(var(--ac-rgb),.6) 1px,transparent 1px), linear-gradient(90deg,rgba(var(--ac-rgb),.6) 1px,transparent 1px); background-size:72px 72px; mask-image:radial-gradient(ellipse 70% 60% at 70% 45%,#000 10%,transparent 72%); -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 45%,#000 10%,transparent 72%); } /* 메인 비주얼 전용 커서 레이더. 콘텐츠 조작을 막지 않는 장식 레이어다. */ .visual__radar{ --radar-x:68%;--radar-y:44%;--radar-rgb:var(--ac-rgb); position:fixed;inset:0;z-index:7;pointer-events:none;opacity:0; transition:opacity .3s ease; background: radial-gradient(circle 5px at var(--radar-x) var(--radar-y),rgba(255,255,255,.95) 0 1px,rgba(var(--radar-rgb),.92) 2px,transparent 5px), radial-gradient(circle 56px at var(--radar-x) var(--radar-y),transparent 53px,rgba(var(--radar-rgb),.78) 54px,transparent 56px), radial-gradient(circle 110px at var(--radar-x) var(--radar-y),transparent 107px,rgba(var(--radar-rgb),.43) 108px,transparent 110px), linear-gradient(90deg,transparent calc(var(--radar-x) - 84px),rgba(var(--radar-rgb),.22) var(--radar-x),transparent calc(var(--radar-x) + 84px)), linear-gradient(transparent calc(var(--radar-y) - 84px),rgba(var(--radar-rgb),.22) var(--radar-y),transparent calc(var(--radar-y) + 84px)); -webkit-mask-image:radial-gradient(circle 145px at var(--radar-x) var(--radar-y),#000 0 70%,transparent 100%); mask-image:radial-gradient(circle 145px at var(--radar-x) var(--radar-y),#000 0 70%,transparent 100%); } .visual__radar.is-active{opacity:.86} .visual__radar i{ position:absolute;left:var(--radar-x);top:var(--radar-y);width:220px;height:220px; transform:translate(-50%,-50%);border-radius:50%;overflow:hidden; } .visual__radar i::before{ content:"";position:absolute;inset:0;border-radius:50%; background:conic-gradient(from 0deg,transparent 0 305deg,rgba(var(--radar-rgb),.05) 318deg,rgba(var(--radar-rgb),.68) 357deg,transparent 360deg); animation:radarSweep 2.35s linear infinite; } @keyframes radarSweep{to{transform:rotate(360deg)}} .visual__inner{ position:relative;z-index:6;height:100%;display:flex;flex-direction:column;justify-content:flex-end; width:min(100% - 96px,var(--max));margin-inline:auto;padding-bottom:clamp(36px,5.5vh,64px); } .visual__copy{max-width:850px;margin-bottom:auto;margin-top:auto;padding-top:96px} .visual__tag{ display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:2px; background:rgba(var(--ac-rgb),.16);border:1px solid rgba(var(--ac-rgb),.42); font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--ac-soft);margin-bottom:22px; } .visual__tag b{width:6px;height:6px;border-radius:2px;background:var(--ac-l);animation:blink 1.8s infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}} .visual h1,.visual__h{ font-size:clamp(42px,6.4vw,82px);font-weight:900;line-height:1.08;letter-spacing:-.052em; color:#F2F7FC;text-shadow:0 8px 40px rgba(0,0,0,.6); } .visual h1 em,.visual__h em{font-style:normal;color:var(--ac-l)} .visual__desc{margin-top:22px;font-size:clamp(15px,1.7vw,20px);color:#C8D8E6;line-height:1.75;font-weight:500;text-shadow:0 2px 18px rgba(0,0,0,.6)} /* 슬라이드 카피는 같은 자리에 겹쳐 쌓고, 활성 항목만 노출 */ .visual__stack{display:grid} .visual__txt{grid-area:1/1;opacity:0;transform:translateY(24px);transition:.85s var(--ease);pointer-events:none} .visual__txt.on{opacity:1;transform:none;pointer-events:auto} .visual__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap} .thumbs{display:flex;gap:12px} .thumb{ position:relative;width:clamp(84px,10vw,130px);aspect-ratio:16/10;border-radius:2px;overflow:hidden; opacity:.5;transition:.35s var(--ease);border:1px solid rgba(255,255,255,.2); } .thumb img{width:100%;height:100%;object-fit:cover} .thumb span{ position:absolute;left:9px;bottom:7px;font-size:11.5px;font-weight:700;letter-spacing:.02em; text-shadow:0 1px 6px #000; } .thumb:hover{opacity:.85;transform:translateY(-3px)} .thumb.on{opacity:1;border-color:var(--ac);} .thumb.on::after{content:"";position:absolute;left:0;bottom:0;height:3px;background:var(--ac);animation:bar 6s linear forwards} @keyframes bar{from{width:0}to{width:100%}} .scrollhint{display:flex;flex-direction:column;align-items:center;gap:9px;margin-right:78px;font-size:11px;letter-spacing:.22em;color:var(--mut);font-weight:700} .scrollhint i{display:block;width:1px;height:44px;background:linear-gradient(var(--ac),transparent);position:relative;overflow:hidden} .scrollhint i::after{content:"";position:absolute;top:-44px;left:0;width:1px;height:44px;background:#fff;animation:down 1.8s var(--ease) infinite} @keyframes down{to{top:44px}} .visual__rail{ position:absolute;z-index:8;right:clamp(22px,3vw,52px);top:50%;transform:translateY(-42%); display:flex;flex-direction:column;align-items:center;color:#fff;font-variant-numeric:tabular-nums; } .visual__rail strong{font-size:18px;font-weight:800;color:var(--ac-l)} .visual__rail>span{margin-top:10px;font-size:11px;color:rgba(255,255,255,.58);letter-spacing:.12em} .visual__railbar{width:1px;height:116px;margin-top:12px;background:rgba(255,255,255,.25);position:relative;overflow:hidden} .visual__railbar i{position:absolute;inset:0;background:var(--ac-l);transform:scaleY(0);transform-origin:top} .visual__arrows{display:flex;gap:8px;margin-top:22px} .visual__arrows button{ width:38px;height:38px;border:1px solid rgba(255,255,255,.35);border-radius:50%; display:grid;place-items:center;color:#fff;font-size:16px;transition:.25s var(--ease) } .visual__arrows button:hover{background:var(--ac);border-color:var(--ac);transform:translateY(-2px)} @media (max-width:760px){ .visual{height:100svh;min-height:560px} .visual__inner{width:calc(100% - 40px);padding-bottom:30px} .visual__copy{padding-top:78px} .visual__bottom{flex-direction:column;align-items:flex-start;gap:18px} .thumbs{width:100%;overflow-x:auto;padding-bottom:4px} .thumb{flex:0 0 auto;width:104px} .scrollhint{display:none} .visual__rail{display:none} .visual__radar{display:none} } /* ========================================================= MAIN — 2) 사업분야 2분할 게이트웨이 ========================================================= */ .gate{position:relative;height:100vh;min-height:620px;display:flex;flex-direction:column;background:var(--bg)} /* 게이트웨이 상단 어둠막 — 왼쪽 사진(식생)이 밝아서 흰 로고와 네비가 묻힌다. 헤더가 사진 위에 떠 있는 구조이므로 사진 자체를 어둡게 하지 않고 위쪽만 덮는다. */ .gate::before{ content:"";position:absolute;left:0;right:0;top:0;height:clamp(190px,26vh,300px);z-index:16; background:linear-gradient(180deg,rgba(6,13,21,.82) 0%,rgba(6,13,21,.46) 48%,transparent 100%); pointer-events:none; } .gate__head{ position:absolute;top:0;left:0;right:0;z-index:20;padding:clamp(88px,12vh,120px) 0 0; text-align:center;pointer-events:none; } .gate__head p{font-size:12px;font-weight:800;letter-spacing:.24em;color:var(--ac-l)} .gate__head h2{margin-top:10px;font-size:clamp(20px,2.6vw,30px);font-weight:800;letter-spacing:-.035em;color:#F2F7FC;text-shadow:0 4px 22px rgba(0,0,0,.7)} .gate__head h2 em{font-style:normal;color:var(--ac-l)} .gate__body{flex:1;display:flex;position:relative;overflow:hidden} .gate__body::after{ content:"";position:absolute;z-index:7;top:18%;bottom:8%;left:var(--gate-split,50%);width:1px;pointer-events:none; background:linear-gradient(transparent,rgba(255,255,255,.42) 22%,rgba(255,255,255,.42) 78%,transparent); transition:left .6s var(--ease) } .pane{ position:relative;flex:1;overflow:hidden;display:flex;align-items:flex-end; transition:flex-grow .6s var(--ease); } .pane__bg{position:absolute;inset:0;transition:transform .9s var(--ease),filter .6s var(--ease)} .pane__bg img{width:100%;height:100%;object-fit:cover} .pane::before{ content:"";position:absolute;inset:0;z-index:2;transition:background .6s var(--ease); background:linear-gradient(180deg,rgba(10,18,28,.82) 0%,rgba(10,18,28,.5) 40%,rgba(8,15,23,.93) 100%); } .pane--slope::before,.pane--drone::before{background:linear-gradient(180deg,rgba(7,16,24,.82) 0%,rgba(7,16,24,.38) 38%,rgba(5,13,20,.94) 100%)} .pane::after{ content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:6; transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease); } .pane--slope::after{background:var(--lime)} .pane--drone::after{background:var(--ac)} .pane:hover::after{transform:scaleX(1)} .pane__in{ position:relative;z-index:5;width:100%;padding:clamp(30px,4vw,58px); padding-bottom:clamp(38px,6vh,72px); } .pane__in::before{content:"";display:block;width:46px;height:3px;margin-bottom:22px;background:var(--ac)} .pane--slope .pane__in::before{background:var(--lime)} .pane__no{ position:absolute;right:clamp(20px,3vw,44px);top:clamp(96px,13vh,150px); font-size:clamp(56px,7vw,104px);font-weight:900;line-height:1; letter-spacing:-.06em;color:#fff;opacity:.13; font-variant-numeric:tabular-nums;pointer-events:none; transition:opacity .5s var(--ease),color .5s var(--ease); } .pane:hover .pane__no{opacity:.28} .pane--slope:hover .pane__no{color:var(--lime)} .pane--drone:hover .pane__no{color:var(--ac-l)} .pane__en{margin-top:16px;font-size:clamp(11px,1.1vw,13px);font-weight:800;letter-spacing:.26em;color:var(--ac-l)} .pane--slope .pane__en{color:var(--lime)} .pane__ko{margin-top:8px;font-size:clamp(28px,4.2vw,54px);font-weight:900;letter-spacing:-.045em;line-height:1.14;color:#F2F7FC;text-shadow:0 6px 30px rgba(0,0,0,.65)} .pane__desc{margin-top:14px;font-size:clamp(14px,1.35vw,17px);color:#C4D4E2;max-width:44ch;line-height:1.75} .pane__chips{ display:flex;flex-wrap:wrap;gap:8px;margin-top:22px; max-height:0;opacity:0;overflow:hidden;transition:max-height .55s var(--ease),opacity .45s var(--ease),margin .45s; } .pane__chips li{ padding:8px 15px;border-radius:2px;font-size:13.5px;font-weight:600; border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.07);backdrop-filter:blur(6px); } .pane__go{ display:inline-flex;align-items:center;gap:12px;margin-top:26px; font-size:15px;font-weight:800;letter-spacing:-.01em;color:#F2F7FC; } .pane__go i{ font-style:normal;display:grid;place-items:center;width:40px;height:40px; border-radius:50%; /* 예외 — 방향을 가리키는 화살표는 원이 자연스럽다 */ border:1px solid rgba(255,255,255,.4);transition:.3s var(--ease); } .pane:hover{flex-grow:1.5} .pane:hover .pane__bg{transform:scale(1.07)} .pane:hover::before{background:linear-gradient(180deg,rgba(7,16,24,.72) 0%,rgba(7,16,24,.22) 38%,rgba(5,13,20,.9) 100%)} .pane:hover .pane__chips{max-height:130px;opacity:1} .pane--drone:hover .pane__go i{background:var(--ac);border-color:var(--ac);transform:translateX(4px)} .pane--slope:hover .pane__go i{background:var(--lime);border-color:var(--lime);color:var(--ac-on);transform:translateX(4px)} /* 가운데 로고 — 두 칸이 한 회사라는 표시. 앞서 두 번 틀렸다. 사각형 배지로 만들면 검은 덩어리가 두 사진을 갈라놓고, 세로 구분선을 그으면 흐릿한 줄이 사진 위에 남는다. 둘 다 없앤다. 대신 로고 뒤에 원형 어둠막만 깐다 — 바깥을 완전히 투명하게 빼서 테두리가 생기지 않는다. 왼쪽 사진(식생)이 밝아 흰 로고가 묻히므로 어둠막 자체는 필요하다. */ .gate__mid{ /* 45% — 정확한 가운데에 두면 아래 SLOPE PROTECTION / DRONE TECHNOLOGY 라벨과 70px 도 안 떨어져 붙어 보인다. 살짝 올려 두 칸의 빈 띠 가운데에 맞춘다. */ display:grid;position:absolute;left:var(--gate-split,50%);top:45%;z-index:16;pointer-events:none; transform:translate(-50%,-50%); width:clamp(230px,24vw,360px);aspect-ratio:1.55; place-items:center; transition:left .6s var(--ease); background:radial-gradient(ellipse at 50% 50%, rgba(6,13,21,.66) 0%, rgba(6,13,21,.46) 28%, rgba(6,13,21,.2) 52%, rgba(6,13,21,.06) 68%, rgba(6,13,21,0) 86%); } .gate__mid img{ display:block;width:clamp(80px,8.6vw,112px);height:auto; filter:drop-shadow(0 3px 14px rgba(0,0,0,.82)); } .gate__foot{ position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; padding:18px clamp(20px,4vw,52px);border-top:1px solid var(--line);background:var(--bg); font-size:13px;color:var(--mut2);line-height:1.7; } .gate__foot b{color:var(--mut);font-weight:700} .gate__foot .sep{margin:0 8px;opacity:.4} @media (max-width:900px){ .gate{height:auto;min-height:100vh} .gate__head{position:static;padding:96px 20px 24px;text-align:left} .gate__body{flex-direction:column} .gate__body::after{display:none} .pane{min-height:44vh} .pane:hover{flex-grow:1} .pane__chips{max-height:130px;opacity:1} .gate__mid{display:none} } @media (hover:none), (pointer:coarse){ .pane:hover{flex-grow:1} .pane:hover .pane__bg{transform:none} .pane:hover::before{background:linear-gradient(180deg,rgba(7,16,24,.82) 0%,rgba(7,16,24,.38) 38%,rgba(5,13,20,.94) 100%)} .pane:hover::after{transform:scaleX(0)} .pane:hover .pane__no{opacity:.13;color:#fff} .pane:hover .pane__go i{background:transparent;border-color:rgba(255,255,255,.4);color:inherit;transform:none} } /* ========================================================= 서브페이지 공통 — 히어로 ========================================================= */ .shero{position:relative;min-height:clamp(440px,64vh,620px);display:flex;align-items:flex-end;overflow:hidden} .shero__bg{position:absolute;inset:0} .shero__bg img{width:100%;height:100%;object-fit:cover;animation:kb2 14s var(--ease) forwards} @keyframes kb2{from{transform:scale(1.12)}to{transform:scale(1)}} .shero::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(10,18,28,.86) 0%,rgba(10,18,28,.34) 45%,rgba(10,18,28,.96) 100%); } .shero__in{position:relative;z-index:3;width:min(100% - 48px,var(--max));margin-inline:auto;padding:0 0 clamp(46px,7vh,80px)} .crumb{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--mut);margin-bottom:20px} .crumb a:hover{color:var(--ac-l)} .crumb i{font-style:normal;opacity:.5} .shero h1{font-size:clamp(32px,5.4vw,62px);font-weight:900;letter-spacing:-.045em;line-height:1.16;color:#F2F7FC} .shero h1 em{font-style:normal;color:var(--ac-l)} .shero__en{font-size:clamp(11px,1.2vw,13px);font-weight:800;letter-spacing:.28em;color:var(--ac-l);margin-bottom:14px} .shero p{margin-top:18px;font-size:clamp(15px,1.6vw,19px);color:#C4D4E2;max-width:60ch;line-height:1.8} /* ===== 지표 카운터 ===== */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden} .stats div{background:var(--surf);padding:clamp(24px,3vw,38px) 20px;text-align:center} .stats b{display:block;font-size:clamp(30px,4.2vw,52px);font-weight:900;color:var(--ac-l); letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} .stats b sup{font-size:.45em;font-weight:800;margin-left:2px;vertical-align:super;color:var(--mut)} .stats span{display:block;margin-top:8px;font-size:14px;color:var(--mut);font-weight:600} @media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}} /* ===== 카드 그리드 ===== */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)} @media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.cards{grid-template-columns:1fr}} .card{ position:relative;border-radius:2px;overflow:hidden;background:var(--surf); border:1px solid var(--line);transition:.4s var(--ease); } .card__img{position:relative;aspect-ratio:16/10;overflow:hidden} .card__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .card__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,20,30,.9))} .card__no{position:absolute;left:16px;top:14px;z-index:3;font-size:11.5px;font-weight:800;letter-spacing:.18em;color:rgba(255,255,255,.6)} .card__body{padding:20px 22px 24px} .card h3{font-size:19px;font-weight:800;letter-spacing:-.03em} .card h3 span{display:block;font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--ac-l);margin-bottom:6px} .card p{margin-top:10px;font-size:15px;color:var(--mut);line-height:1.75} .card__keys{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px} .card__keys li{font-size:12.5px;font-weight:600;color:var(--txt2);padding:4px 10px;border-radius:2px;background:var(--chip);border:1px solid var(--line)} .card:hover{transform:translateY(-6px);border-color:rgba(var(--ac-rgb),.5);box-shadow:var(--shadow)} .card:hover .card__img img{transform:scale(1.07)} /* ===== 탭 (혁신제품 / 드론 서비스) ===== */ .tabs{display:grid;grid-template-columns:300px 1fr;gap:clamp(20px,3vw,46px);align-items:start} @media (max-width:940px){.tabs{grid-template-columns:1fr}} .tabs__nav{display:flex;flex-direction:column;gap:6px;position:sticky;top:96px} @media (max-width:940px){ .tabs__nav{position:static;flex-direction:row;overflow-x:auto;padding-bottom:6px;gap:8px} .tabs__nav button{flex:0 0 auto;white-space:nowrap} } .tabs__nav button{ display:flex;align-items:center;gap:12px;text-align:left;padding:15px 18px;border-radius:2px; font-size:15px;font-weight:700;color:var(--mut);border:1px solid transparent;transition:.28s var(--ease); } .tabs__nav button em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--mut2);letter-spacing:.06em} .tabs__nav button:hover{color:var(--txt);background:var(--chip)} .tabs__nav button.on{background:var(--tint);border-color:rgba(var(--ac-rgb),.45);color:var(--txt)} .tabs__nav button.on em{color:var(--ac-l)} .tabs__panel{display:none} .tabs__panel.on{display:block;animation:fadeUp .55s var(--ease)} @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .panel{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,2.6vw,38px);align-items:center} @media (max-width:820px){.panel{grid-template-columns:1fr}} .panel__img{border-radius:2px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/11} .panel__img img{width:100%;height:100%;object-fit:cover} .panel__badge{ display:inline-block;padding:6px 13px;border-radius:2px;font-size:11.5px;font-weight:800;letter-spacing:.05em; background:var(--tint);color:var(--ac-soft);border:1px solid var(--tint-b);margin-bottom:14px; } .panel h3{font-size:clamp(22px,2.6vw,31px);font-weight:800;letter-spacing:-.035em;line-height:1.3} .panel>div>p{margin-top:16px;font-size:15.5px;color:var(--mut);line-height:1.85} .panel__list{margin-top:20px;display:flex;flex-direction:column;gap:10px} .panel__list li{position:relative;padding-left:22px;font-size:15px;color:var(--txt2);line-height:1.75} .panel__list li::before{content:"";position:absolute;left:2px;top:10px;width:7px;height:7px;border-radius:2px;background:var(--ac);transform:rotate(45deg)} .panel__meta{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 26px;font-size:12.5px;color:var(--mut2)} .panel__meta b{color:var(--ac-l);font-weight:700} /* ===== 프로세스 / 워크플로우 스텝 ===== */ .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} @media (max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.steps{grid-template-columns:1fr}} .step{ text-align:left;padding:24px 20px 26px;border-radius:2px;border:1px solid var(--line); background:var(--surf);transition:.35s var(--ease);position:relative;overflow:hidden; } .step::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--ac);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)} .step b{display:block;font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--ac-l)} .step h4{margin-top:12px;font-size:17.5px;font-weight:800;letter-spacing:-.03em} .step p{margin-top:10px;font-size:14.4px;color:var(--mut);line-height:1.72; max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--ease),opacity .35s,margin .35s} .step.on,.step:hover{background:var(--surf-hi);border-color:rgba(var(--ac-rgb),.45)} .step.on::after{transform:scaleX(1)} .step.on p{max-height:220px;opacity:1} /* ===== 3분할 특징 ===== */ .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)} @media (max-width:900px){.trio{grid-template-columns:1fr}} .trio figure{position:relative;border-radius:2px;overflow:hidden;min-height:340px;display:flex;align-items:flex-end;border:1px solid var(--line)} .trio figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .trio figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,18,28,.25) 0%,rgba(8,15,24,.94) 78%)} .trio figcaption{position:relative;z-index:3;padding:26px 24px 28px} .trio figcaption b{font-size:11.5px;font-weight:800;letter-spacing:.2em;color:var(--ac-l)} .trio figcaption h4{margin-top:10px;font-size:21px;font-weight:800;letter-spacing:-.03em;color:#F2F7FC} .trio figcaption p{margin-top:10px;font-size:14.8px;color:#C0D0DE;line-height:1.75} .trio figcaption .lic__spec{display:block;margin-top:10px;font-size:11.5px;color:#8CA0B2;letter-spacing:.01em} /* 장비 카드를 더 크게 — 카탈로그 컷 한 장이 아니라 현장 스케일로 보이게 */ .trio--big figure{min-height:420px} @media (max-width:900px){.trio--big figure{min-height:300px}} .trio figure:hover img{transform:scale(1.07)} /* ===== 슬라이더(갤러리) ===== */ .slider{position:relative} .slider__track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;cursor:grab} .slider__track::-webkit-scrollbar{height:6px} .slider__track.drag{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none} .slide{flex:0 0 clamp(260px,32%,420px);scroll-snap-align:start;border-radius:2px;overflow:hidden;position:relative;border:1px solid var(--line)} .slide img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s var(--ease);pointer-events:none} .slide figcaption{ position:absolute;left:0;right:0;bottom:0;padding:34px 18px 15px;font-size:14px;font-weight:600;color:#F2F7FC; background:linear-gradient(transparent,rgba(6,13,21,.92)); } .slide figcaption small{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--ac-l);margin-bottom:3px} .slide:hover img{transform:scale(1.06)} .slider__ctrl{display:flex;gap:10px;justify-content:flex-end;margin-top:18px} .slider__ctrl button{ width:46px;height:46px;border-radius:50%; /* 예외 — 이동 컨트롤 */ border:1px solid var(--line);display:grid;place-items:center; font-size:18px;color:var(--mut);transition:.25s var(--ease); } .slider__ctrl button:hover{background:var(--ac);border-color:var(--ac);color:#fff} /* ===== Before/After 비교 ===== */ .compare{position:relative;border-radius:2px;overflow:hidden;border:1px solid var(--line);user-select:none;touch-action:none;aspect-ratio:16/8} .compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .compare__top{clip-path:inset(0 50% 0 0)} .compare__bar{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--ac);cursor:ew-resize;z-index:5} .compare__bar::after{ content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:48px;height:48px;border-radius:999px;background-color:var(--ac); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 7 3 12l5 5M3 12h18M16 7l5 5-5 5' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position:center;background-repeat:no-repeat;background-size:29px 29px; box-shadow:0 6px 18px rgba(0,0,0,.28); } .compare__lb{ position:absolute;top:16px;z-index:4;padding:6px 14px;border-radius:2px;font-size:11.5px;font-weight:800; letter-spacing:.12em;background:rgba(6,13,21,.8);border:1px solid var(--line);backdrop-filter:blur(6px); } .compare__lb--l{left:16px} .compare__lb--r{right:16px} /* ===== 산출물/체크 리스트 ===== */ .grid2{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} @media (max-width:900px){.grid2{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.grid2{grid-template-columns:1fr}} .tile{padding:24px 22px;border-radius:2px;border:1px solid var(--line);background:var(--surf);transition:.3s var(--ease)} .tile b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.16em;color:var(--ac-l)} .tile h4{margin-top:11px;font-size:17px;font-weight:800;letter-spacing:-.03em} .tile p{margin-top:9px;font-size:14.5px;color:var(--mut);line-height:1.72} .tile:hover{border-color:rgba(var(--ac-rgb),.45);background:var(--surf-hi);transform:translateY(-2px)} /* ===== 드론 × 사면방재 연계 밴드 ===== */ .sync{ position:relative;border-radius:2px;overflow:hidden;border:1px solid rgba(var(--ac-rgb),.32); background:linear-gradient(150deg,var(--tint) 0%,rgba(var(--ac-rgb),.03) 42%,var(--surf) 100%),var(--surf); } .sync__in{display:grid;grid-template-columns:.92fr 1.08fr;gap:0} @media (max-width:940px){.sync__in{grid-template-columns:1fr}} .sync__visual{position:relative;min-height:420px;overflow:hidden} .sync__visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .sync__visual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,18,28,.35),rgba(22,36,47,.85))} @media (max-width:940px){ .sync__visual{min-height:260px} .sync__visual::after{background:linear-gradient(180deg,rgba(10,18,28,.3),rgba(22,36,47,.9))} } .sync__visual .sync__cap{ position:absolute;left:22px;bottom:20px;z-index:3;font-size:12.5px;font-weight:700;color:#BFD6E6; padding:8px 14px;border-radius:2px;background:rgba(6,13,21,.72);border:1px solid var(--line);backdrop-filter:blur(6px); } .sync__body{padding:clamp(28px,3.4vw,48px)} .sync__body h3{font-size:clamp(21px,2.6vw,31px);font-weight:900;letter-spacing:-.04em;line-height:1.32} .sync__body h3 em{font-style:normal;color:var(--ac-l)} .sync__body>p{margin-top:14px;font-size:15px;color:var(--mut);line-height:1.82} .sync__list{margin-top:26px;display:flex;flex-direction:column;gap:2px} .sync__list li{ display:grid;grid-template-columns:44px 1fr;gap:14px;padding:16px 0; border-top:1px solid var(--line); } .sync__list li:last-child{border-bottom:1px solid var(--line)} .sync__list b{ display:grid;place-items:center;width:34px;height:34px;border-radius:2px;font-size:12.5px;font-weight:900; background:var(--tint);border:1px solid var(--tint-b);color:var(--ac-soft); } .sync__list h4{font-size:16.5px;font-weight:800;letter-spacing:-.03em} .sync__list p{margin-top:6px;font-size:14px;color:var(--mut);line-height:1.72} .sync__note{ margin-top:24px;padding:16px 20px;border-radius:2px;font-size:14.5px;line-height:1.72;color:#CBDCEA; background:var(--tint);border-left:3px solid var(--ac); } .sync__note b{color:var(--ac-l);font-weight:800} .sync__foot{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap} /* ===== 비교표 ===== */ .vs{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(12px,2vw,26px);align-items:stretch} @media (max-width:820px){.vs{grid-template-columns:1fr}} .vs__col{padding:clamp(24px,3vw,36px);border-radius:2px;border:1px solid var(--line);background:var(--surf)} .vs__col--on{border-color:rgba(var(--ac-rgb),.55);background:linear-gradient(160deg,rgba(var(--ac-rgb),.14),rgba(var(--ac-rgb),.03))} .vs__col h4{font-size:19px;font-weight:800;letter-spacing:-.03em;margin-bottom:16px} .vs__col h4 span{display:block;font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--mut2);margin-bottom:6px} .vs__col--on h4 span{color:var(--ac-l)} .vs__col li{position:relative;padding:10px 0 10px 24px;font-size:15px;color:var(--mut);border-bottom:1px dashed var(--line)} .vs__col li:last-child{border-bottom:0} .vs__col li::before{content:"—";position:absolute;left:0;color:var(--mut2)} .vs__col--on li{color:var(--txt2)} .vs__col--on li::before{content:"✓";color:var(--ac-l);font-weight:800} .vs__mid{display:grid;place-items:center;font-size:13px;font-weight:900;letter-spacing:.1em;color:var(--mut2)} /* ===== CTA ===== */ .cta{position:relative;overflow:hidden;border-radius:2px;border:1px solid var(--line)} .cta__bg{position:absolute;inset:0} .cta__bg img{width:100%;height:100%;object-fit:cover} .cta::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,16,26,.95) 20%,rgba(8,16,26,.6) 70%,rgba(var(--ac-rgb),.3))} .cta__in{position:relative;z-index:3;padding:clamp(38px,5vw,68px);display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap} .cta h3{font-size:clamp(22px,3.2vw,36px);font-weight:900;letter-spacing:-.04em;line-height:1.32;color:#F2F7FC} .cta h3 em{font-style:normal;color:var(--ac-l)} .cta p{margin-top:12px;font-size:15px;color:var(--mut)} .cta__btns{display:flex;gap:12px;flex-wrap:wrap} /* ===== 푸터 ===== */ .ft{background:var(--bg2);border-top:1px solid var(--line);padding:clamp(44px,5vw,68px) 0 34px} .ft__top{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;padding-bottom:30px;border-bottom:1px solid var(--line)} .ft__logo img{height:34px;margin-bottom:14px} .ft__logo p{font-size:13.5px;color:var(--mut2);line-height:1.8} .ft__cols{display:flex;gap:clamp(30px,6vw,80px);flex-wrap:wrap} .ft__col h5{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--ac-l);margin-bottom:14px} .ft__col li{font-size:13.8px;color:var(--mut);padding:4px 0} .ft__col a:hover{color:#fff} .ft__bot{padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.3px;color:var(--mut2)} .ft__bot .ph{color:var(--mut)} /* 안내 문구(시안 표기) */ .ft__draft{ width:100%;margin-top:14px;font-size:11.5px;font-weight:700;letter-spacing:.04em; padding:8px 13px;border-radius:2px;background:rgba(255,193,7,.12);border:1px solid rgba(255,193,7,.34); color:#FFD97A; } /* ========================================================= 접근성 · 웹 관례 보강 (2026-08-18) ========================================================= */ /* 키보드 포커스 — 다크 배경에서 기본 outline 이 안 보여 명시적으로 지정 */ :focus-visible{ outline:3px solid var(--ac-l); outline-offset:3px; border-radius:2px; } .pane:focus-visible{outline-offset:-8px;border-radius:0} .thumb:focus-visible,.step:focus-visible{outline-offset:2px} /* 본문 건너뛰기 링크 — 키보드/스크린리더 사용자용. 포커스될 때만 보인다 */ .skip{ position:fixed;left:14px;top:-60px;z-index:400; padding:11px 20px;border-radius:0; background:var(--ac);color:var(--ac-on);font-size:14px;font-weight:700; transition:top .2s var(--ease); } .skip:focus{top:0} /* 히어로 자동전환 정지 버튼 — WCAG 2.2.2 (5초 이상 자동 움직임엔 정지 수단 필요) */ .visual__pause{ flex:0 0 auto;width:42px;height:42px;border-radius:50%; /* 예외 — 재생/정지 컨트롤 */ display:grid;place-items:center;font-size:13px; border:1px solid rgba(255,255,255,.28);background:rgba(10,18,28,.5); backdrop-filter:blur(6px);color:#fff;transition:.25s var(--ease); } .visual__pause:hover{background:var(--ac);border-color:var(--ac)} .thumbs{align-items:center} /* 모션 최소화 설정 존중 — 켄번즈 줌·히어로 줌 정지 */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .snap{scroll-behavior:auto} .visual__item.on img{animation:none} .shero__bg img{animation:none} .visual__txt{transition:none} .thumb.on::after{animation:none;width:100%} .visual__tag b{animation:none} .scrollhint i::after{animation:none} .visual__radar i::before{animation:none} } /* ========================================================= 비주얼 강화 (2026-08-18) ========================================================= */ /* ── 1. 필름 그레인 ──────────────────────────────────────── 단색 다크 배경은 넓은 면적에서 밋밋해 보인다. 아주 옅은 노이즈를 전체에 덮어 인쇄물 같은 질감을 준다. SVG 를 data URI 로 넣어 외부 파일·CDN 의존이 없다. */ body::after{ content:"";position:fixed;inset:0;z-index:9999;pointer-events:none; opacity:var(--grain);mix-blend-mode:var(--grain-blend); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── 2. 스크롤 진행 바 ──────────────────────────────────── */ .progress{ position:fixed;left:0;top:0;height:3px;z-index:300;width:0; background:linear-gradient(90deg,var(--ac),var(--ac-l)); transition:width .12s linear; } /* ── 3. 히어로 카피 — 마스크 등장 ────────────────────────── .on 이 붙는 순간 아래에서 위로 밀려 올라오며 나타난다. 제목 → 설명 순으로 시차를 둔다. */ .visual__txt h1,.visual__txt .visual__h,.visual__txt .visual__desc{ clip-path:inset(0 0 105% 0); transform:translateY(28px); } .visual__txt.on h1,.visual__txt.on .visual__h{ animation:lineUp .9s var(--ease) .05s forwards; } .visual__txt.on .visual__desc{ animation:lineUp .9s var(--ease) .28s forwards; } @keyframes lineUp{ from{clip-path:inset(0 0 105% 0);transform:translateY(28px)} to {clip-path:inset(-25% -12% -25% -2%);transform:translateY(0)} } /* ── 4. 커서 스포트라이트 ────────────────────────────────── 마우스 위치를 --mx/--my 로 받아 그 지점만 밝힌다. JS 가 좌표를 넘기지 못하면 아무 일도 일어나지 않는다(안전). */ [data-spot]{position:relative;isolation:isolate} [data-spot]::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; opacity:0;transition:opacity .35s var(--ease);border-radius:inherit; background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(var(--ac-rgb),.16),transparent 62%); } [data-spot]:hover::before{opacity:1} .card>*,.tile>*,.step>*,.vs__col>*{position:relative;z-index:2} /* ── 5. 섹션 경계 발광 라인 ──────────────────────────────── 배경색만 번갈아 바꾸면 경계가 흐리다. 얇은 그라디언트 선으로 끊어준다. */ .sec--alt{position:relative} .sec--alt::before,.sec--alt::after{ content:"";position:absolute;left:0;right:0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(var(--ac-rgb),.42) 22%,rgba(var(--ac-rgb),.42) 78%,transparent); } .sec--alt::before{top:0} .sec--alt::after{bottom:0} /* ── 6. 이미지 페이드인 ──────────────────────────────────── .js 가 붙었을 때만 숨긴다 — JS 실패 시 이미지가 사라지지 않는다. */ html.js img[data-fade]{opacity:0;transition:opacity .7s var(--ease)} html.js img[data-fade].shown{opacity:1} /* ── 7. 카드 · 타일 마감 다듬기 ────────────────────────────*/ .card{box-shadow:0 1px 0 rgba(255,255,255,.04) inset} .card:hover{transform:translateY(-3px)} .card__img::before{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(120deg,rgba(var(--ac-rgb),0) 40%,rgba(var(--ac-rgb),.18)); opacity:0;transition:opacity .5s var(--ease); } .card:hover .card__img::before{opacity:1} /* 탭 활성 항목에 좌측 인디케이터 */ .tabs__nav button{position:relative;overflow:hidden} .tabs__nav button::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--ac);transform:scaleY(0);transform-origin:center; transition:transform .35s var(--ease); } .tabs__nav button.on::before{transform:scaleY(1)} @media (prefers-reduced-motion:reduce){ .visual__txt h1,.visual__txt .visual__h,.visual__txt .visual__desc{clip-path:none;transform:none} .visual__txt.on h1,.visual__txt.on .visual__h,.visual__txt.on .visual__desc{animation:none} html.js img[data-fade]{opacity:1;transition:none} .progress{transition:none} } /* ========================================================= 역량 카드 — "무엇을 할 수 있나" / "어디에 쓰이나" 아이콘 + 제목 + 설명 + 체크 항목 4개 구조 ========================================================= */ .caps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)} @media (max-width:1000px){.caps{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.caps{grid-template-columns:1fr}} .cap{ position:relative;padding:clamp(24px,2.4vw,32px);border-radius:2px; background:var(--surf);border:1px solid var(--line); transition:transform .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease); display:flex;flex-direction:column; } .cap:hover{transform:translateY(-3px);border-color:rgba(var(--ac-rgb),.5);background:var(--surf-hi)} .cap__ico{ width:50px;height:50px;border-radius:2px;display:grid;place-items:center;margin-bottom:20px; background:var(--tint);border:1px solid var(--tint-b);color:var(--ac-l); transition:.35s var(--ease); } .cap:hover .cap__ico{background:var(--ac-d);border-color:var(--ac-d);color:#fff} .cap__ico svg{width:24px;height:24px} .cap h3{font-size:19px;font-weight:800;letter-spacing:-.03em;line-height:1.35} .cap h3 small{ display:block;font-size:11px;font-weight:800;letter-spacing:.16em; color:var(--ac-l);margin-bottom:7px; } .cap>p{margin-top:11px;font-size:14.6px;color:var(--mut);line-height:1.75} /* 체크 항목 */ .chk{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px} .chk li{position:relative;padding-left:24px;font-size:13.8px;color:var(--txt2);line-height:1.6} .chk li::before{ content:"";position:absolute;left:2px;top:5px;width:11px;height:7px; border-left:2px solid var(--ac-l);border-bottom:2px solid var(--ac-l); transform:rotate(-45deg); } /* 적용 분야 — 이미지가 있는 카드 (.card 재사용 + 체크 항목) */ .card .chk{margin-top:15px;padding-top:14px} .card .chk li{font-size:13.2px} /* 기본 원리 2분할 */ .duo{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px)} @media (max-width:820px){.duo{grid-template-columns:1fr}} .duo .cap__ico{margin-bottom:16px} /* 프로세스 2트랙 */ .track+.track{margin-top:clamp(34px,4vw,52px)} .track__head{ display:flex;align-items:center;gap:12px;margin-bottom:18px; font-size:15px;font-weight:800;letter-spacing:-.02em; } .track__head span{ padding:5px 13px;border-radius:2px;font-size:11.5px;font-weight:800;letter-spacing:.12em; background:var(--tint);border:1px solid var(--tint-b);color:var(--ac-soft); } /* 등록 자격 카드 */ .lic{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,22px)} @media (max-width:820px){.lic{grid-template-columns:1fr}} .lic__item{ padding:clamp(24px,2.6vw,34px);border-radius:2px;border:1px solid rgba(var(--ac-rgb),.32); background:linear-gradient(158deg,var(--tint),rgba(var(--ac-rgb),.02) 55%,var(--surf)); } .lic__item b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.18em;color:var(--ac-l)} .lic__item h4{margin-top:11px;font-size:20px;font-weight:800;letter-spacing:-.03em} .lic__no{ display:inline-block;margin-top:13px;padding:7px 14px;border-radius:2px; font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums; background:var(--chip);border:1px solid var(--line);color:var(--txt); } .lic__item p{margin-top:14px;font-size:14px;color:var(--mut);line-height:1.72} .lic--docs{align-items:stretch} .lic__doc{display:grid;grid-template-columns:minmax(150px,.72fr) 1fr;min-height:340px;overflow:hidden;border:1px solid var(--line);background:var(--surf);transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)} .lic__doc:hover{transform:translateY(-4px);border-color:rgba(var(--ac-rgb),.55);box-shadow:var(--shadow)} .lic__paper{padding:18px;background:#E8EDF1;overflow:hidden} .lic__paper img{width:100%;height:100%;object-fit:cover;object-position:top center;box-shadow:0 8px 22px rgba(10,18,28,.18)} .lic__caption{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,3vw,38px)} .lic__caption b{font-size:11px;letter-spacing:.17em;color:var(--ac-l)} .lic__caption h4{margin-top:10px;font-size:clamp(19px,2vw,25px);line-height:1.35;word-break:keep-all} .lic__caption span{margin-top:16px;font-size:13px;color:var(--mut)} @media(max-width:560px){.lic__doc{grid-template-columns:1fr}.lic__paper{height:300px}.lic__caption{min-height:170px}} /* 실제 등록증 — 왼쪽 정보, 오른쪽 금색 프레임 문서 이미지 */ .license-showcase{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px)} .license-row{display:grid;grid-template-columns:.92fr 1.08fr;min-height:360px;border:1px solid var(--line);background:var(--surf);overflow:hidden} .license-row__copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,2.6vw,36px)} .license-row__copy>b{font-size:11px;letter-spacing:.19em;color:var(--ac-l)} .license-row__copy h3{margin-top:10px;font-size:clamp(20px,1.8vw,27px);line-height:1.3;letter-spacing:-.035em;word-break:keep-all} .license-row__copy strong{margin-top:14px;font-size:13.5px;color:var(--txt2);font-variant-numeric:tabular-nums} .license-row__copy p{margin-top:10px;font-size:14px;color:var(--mut);line-height:1.6;word-break:keep-all} .license-row__copy ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px} .license-row__copy li{padding:6px 10px;border:1px solid rgba(var(--ac-rgb),.36);background:var(--tint);font-size:11.5px;color:var(--ac-soft)} .license-row__paper{position:relative;margin:20px 20px 20px 0;padding:10px;background:#F5F0E4;border:2px solid #B99650;box-shadow:inset 0 0 0 4px #E1C98F,0 12px 26px rgba(5,13,20,.2);overflow:hidden} .license-row__paper::before{content:"";position:absolute;inset:7px;border:1px solid rgba(126,88,28,.45);pointer-events:none;z-index:1} .license-row__paper img{display:block;width:100%;height:100%;object-fit:contain;object-position:top center;background:#fff} @media(max-width:1000px){ .license-showcase{grid-template-columns:1fr} .license-row{grid-template-columns:1fr 1fr;min-height:340px} .license-row__copy{padding:30px 26px} .license-row__paper{margin:20px} } /* ===== 비즈니스 문의 동선 ===== */ @media (min-width:901px){ .hd__mega-group--slope{background-image:linear-gradient(110deg,rgba(7,19,10,.72),rgba(7,19,10,.9)),url("../img/bg_dropdown_slope_v2.png");background-position:center;background-size:cover} .hd__mega-group--drone{background-image:linear-gradient(110deg,rgba(5,17,27,.68),rgba(5,17,27,.9)),url("../img/bg_dropdown_drone_v2.png");background-position:42% center;background-size:cover} .hd__mega-links::before{display:none} .hd__mega-links{margin-top:15px;padding-top:3px} .hd__mega-contact{grid-template-columns:minmax(205px,1fr) 138px;grid-template-rows:auto auto 1fr;gap:0 24px;align-content:center;padding:25px 28px} .hd__mega-contact>span{grid-column:1;grid-row:1} .hd__mega-contact>strong{grid-column:1;grid-row:2;margin-top:6px;font-size:24px} .hd__contact-list{grid-column:1;grid-row:3;display:grid;gap:7px;margin-top:14px} .hd__contact-list>a,.hd__contact-list>div{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:10px;min-width:0;color:inherit} .hd__contact-list span{display:flex;align-items:baseline;gap:8px;min-width:0} .hd__contact-list small{flex:none;font-size:10px;font-weight:800;letter-spacing:.08em;color:#8498A8} .hd__contact-list b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:650;color:#D8E3EA;white-space:nowrap} .contact-ico{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(var(--ac-rgb),.38);background:rgba(var(--ac-rgb),.11);color:var(--ac-l);font-style:normal} .contact-ico::before{font-size:14px;line-height:1} .contact-ico--tel::before{content:"☎"}.contact-ico--mail::before{content:"✉"}.contact-ico--pin::before{content:"⌖"} .hd__mega-contact>a.hd__contact-cta{grid-column:2;grid-row:1/4;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:0;margin:0;text-align:center} .hd__contact-cta i{font-size:22px;font-style:normal;transition:transform .2s} .hd__contact-cta:hover i{transform:translateX(4px)} html[data-theme="light"] .hd__contact-list b{color:#263A48} html[data-theme="light"] .hd__contact-list small{color:#6A7E8D} } .quick-contact{position:fixed;right:88px;bottom:24px;z-index:151;display:grid;grid-template-columns:auto 24px;grid-template-rows:auto auto;align-items:center;column-gap:22px;min-width:176px;padding:14px 18px;border:1px solid rgba(var(--ac-rgb),.5);background:var(--ac);color:var(--ac-on);box-shadow:0 12px 32px rgba(0,0,0,.28);transition:transform .2s,background .2s} .quick-contact span{grid-column:1;font-size:9px;font-weight:900;letter-spacing:.16em;opacity:.72} .quick-contact b{grid-column:1;font-size:16px;line-height:1.2} .quick-contact i{grid-column:2;grid-row:1/3;font-size:22px;font-style:normal;transition:transform .2s} .quick-contact:hover{transform:translateY(-3px);background:var(--ac-l)} .quick-contact:hover i{transform:translateX(3px)} html[data-accent="green"] .quick-contact{background:#6FC72E;color:#0B2405;border-color:#8DDB53} html[data-accent="green"] .quick-contact:hover{background:#96E05C} .ft__contact{min-width:290px;padding:20px 22px;border-left:3px solid var(--ac);background:rgba(var(--ac-rgb),.07)} .ft__contact h5{color:var(--ac-l)} .ft__contact ul{display:grid;gap:8px;margin-top:14px} .ft__contact li{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:10px} .ft__contact li i{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(var(--ac-rgb),.3);color:var(--ac-l);font-style:normal} .ft__contact li a,.ft__contact li span{color:var(--txt2);white-space:nowrap} .ft__contact li a:hover{color:var(--ac-l)} .contact-ico--pin::before,.ft__contact li:last-child i::before{content:"" !important;display:block;width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.5 8 4.5l8 3 5-2v14l-5 2-8-3-5 2v-14Z M8 4.5v14 M16 7.5v14' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.5 8 4.5l8 3 5-2v14l-5 2-8-3-5 2v-14Z M8 4.5v14 M16 7.5v14' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat} .ft__contact li:last-child i{font-size:0} @media (max-width:1449px) and (min-width:901px){ .hd__mega-contact>span,.hd__mega-contact>strong,.hd__contact-list,.hd__mega-contact>a.hd__contact-cta{width:100%} .hd__contact-list{margin-top:14px} .hd__mega-contact>a.hd__contact-cta{min-height:52px;margin-top:18px;flex-direction:row} } @media (max-width:900px){ .hd__mega-links::before{display:none} .hd__contact-list{display:grid;gap:9px;margin-top:14px} .hd__contact-list>a,.hd__contact-list>div{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:10px;color:var(--txt)} .hd__contact-list span{display:flex;flex-direction:column;gap:1px} .hd__contact-list small{font-size:10px;color:var(--mut)} .hd__contact-list b{font-size:12px;color:var(--txt)} .contact-ico{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);font-style:normal;color:var(--ac-l)} .contact-ico--tel::before{content:"☎"}.contact-ico--mail::before{content:"✉"}.contact-ico--pin::before{content:"⌖"} .quick-contact{right:14px;bottom:78px;min-width:154px;padding:12px 15px} } @media(max-width:560px){.license-row{grid-template-columns:1fr}.license-row__paper{height:380px;margin:0 18px 22px}} /* ========================================================= 우측 하단 도크 — 테마 스위치 + TOP --------------------------------------------------------- 주의: 이 두 컨트롤은 "모서리 2px" 규칙의 예외다. · 토글은 알약 형태 + 원형 손잡이가 "밀어서 바뀐다"는 신호다. 각지게 만들면 스위치로 읽히지 않는다. 형태가 곧 기능 표시다. · 보조 컨트롤은 채운 색을 쓰지 않는다. 파란 덩어리는 버튼이 아니라 색 블록으로 보인다. 테두리 + 반투명 면으로 두고 hover 에서만 강조한다. ========================================================= */ .dock{ position:fixed;right:24px;bottom:24px;z-index:150; display:flex;flex-direction:column;align-items:center;gap:12px; } /* ── 테마 스위치 ─────────────────────────────── */ .tsw{ position:relative;width:56px;height:30px;flex:0 0 auto; border-radius:999px; /* 예외 — 스위치 형태 */ border:1px solid var(--line2); background:rgba(10,18,28,.55); backdrop-filter:blur(8px); cursor:pointer;transition:border-color .2s var(--ease); } html[data-theme="light"] .tsw{background:rgba(255,255,255,.7)} .tsw:hover{border-color:var(--ac)} .tsw:focus-visible{outline:2px solid var(--ac-l);outline-offset:3px} /* 양 끝 아이콘 — 눌렀을 때 어떻게 되는지 알려주는 표시 */ .tsw svg{ position:absolute;top:50%;transform:translateY(-50%); width:13px;height:13px;pointer-events:none; color:var(--mut2);transition:color .2s var(--ease); } .tsw .ico-sun{left:8px} .tsw .ico-moon{right:8px} /* 손잡이 — 원형. 현재 상태 쪽에 놓인다 */ .tsw::after{ content:"";position:absolute;top:3px;left:3px; width:22px;height:22px;border-radius:50%; background:#EAF1F8; box-shadow:0 1px 3px rgba(0,0,0,.35); transform:translateX(26px); /* 다크 = 오른쪽(달) */ transition:transform .26s var(--ease),background .2s var(--ease); } html[data-theme="light"] .tsw::after{ transform:translateX(0); /* 라이트 = 왼쪽(해) */ background:#0A2A3D; } /* 손잡이에 덮이지 않는 쪽 아이콘만 또렷하게 */ .tsw .ico-sun{color:var(--mut2)} .tsw .ico-moon{color:var(--mut2)} html[data-theme="light"] .tsw:hover .ico-moon{color:var(--ac)} .tsw:hover .ico-sun{color:var(--ac-l)} /* ── TOP 버튼 ────────────────────────────────── */ .top{ position:static;width:38px;height:38px; border-radius:2px;border:1px solid var(--line2); background:rgba(10,18,28,.55);backdrop-filter:blur(8px); color:var(--txt);display:grid;place-items:center;font-size:15px; opacity:0;pointer-events:none;transform:translateY(8px); transition:opacity .28s var(--ease),transform .28s var(--ease), border-color .2s var(--ease),background .2s var(--ease); } html[data-theme="light"] .top{background:rgba(255,255,255,.7)} .top.on{opacity:1;pointer-events:auto;transform:none} .top:hover{border-color:var(--ac);color:var(--ac-l);background:rgba(var(--ac-rgb),.12)} @media (max-width:760px){ .dock{right:14px;bottom:14px;gap:9px} .tsw{width:50px;height:27px} .tsw::after{width:19px;height:19px;transform:translateX(23px)} html[data-theme="light"] .tsw::after{transform:translateX(0)} .top{width:34px;height:34px} } /* 라이트 테마에서 이미지 위 텍스트는 그대로 두고, 본문 영역만 밝게 */ html[data-theme="light"] body{background:var(--bg)} html[data-theme="light"] .hd:not(.solid) .hd__logo b, html[data-theme="light"] .hd:not(.solid) .hd__top, html[data-theme="light"] .hd:not(.solid) .theme{color:#fff} html[data-theme="light"] .hd:not(.solid) .hd__logo span{color:rgba(255,255,255,.75)} html[data-theme="light"] .hd:not(.solid) .hd__burger i{background:#fff} html[data-theme="light"] .hd:not(.solid) .theme{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.12)} /* 라이트 테마: 흰 배경 위 로고는 반대로 어두워야 한다 → 반전 */ html[data-theme="light"] .hd.solid .hd__logo img, html[data-theme="light"] .ft__logo img{filter:invert(1) hue-rotate(180deg) saturate(1.4) brightness(.75)} /* 라이트 테마 표 · 지표 테두리 보정 */ html[data-theme="light"] .stats{background:var(--line)} html[data-theme="light"] .sec--alt::before, html[data-theme="light"] .sec--alt::after{ background:linear-gradient(90deg,transparent,rgba(var(--ac-rgb),.3) 22%,rgba(var(--ac-rgb),.3) 78%,transparent); } /* 역량 카드 — 우상단에 큰 번호. 카드 면을 줄이고 타이포로 위계를 만든다 */ .cap{overflow:hidden} .cap__num{ position:absolute;right:16px;top:8px;z-index:1; font-size:clamp(46px,4.6vw,68px);font-weight:900;line-height:1; letter-spacing:-.06em;color:var(--txt);opacity:.07; font-variant-numeric:tabular-nums;pointer-events:none; } .cap:hover .cap__num{opacity:.13;color:var(--ac)} .cap>*{position:relative;z-index:2} /* 카드 상단에 얇은 강조선 — 배경 면 대신 선으로 구분 */ .cap::after{ content:"";position:absolute;left:0;top:0;height:2px;width:100%; background:var(--ac);transform:scaleX(0);transform-origin:left; transition:transform .4s var(--ease);z-index:3; } .cap:hover::after{transform:scaleX(1)} /* ========================================================= 분야 훑기 — 가로 고정 스크롤 (pinned horizontal) --------------------------------------------------------- 세로 스크롤을 가로 이동으로 바꾼다. 분야를 다 훑으면 고정이 풀리고 다음 섹션으로 내려간다. 훑기(사진 + 분야명)와 무게(설명 + 체크)를 한 곳에 합친 것. position:sticky 기반이라 스크롤을 가로채지 않는다 — 위로 되돌리면 그대로 되감긴다. 높이 규칙: 무대(.hs__stage)는 정확히 100vh 다. 넘치면 sticky 로 고정이 안 되므로 카드가 남은 높이를 채우고(height:100%), 사진이 그 안에서 38% 를 쓴다. 화면이 아주 낮으면 체크 목록부터 감춘다. ========================================================= */ .hs{position:relative;background:var(--bg2)} .hs__track{position:relative} /* 높이는 JS 가 내용 폭에 맞춰 정한다 */ .hs__stage{ position:sticky;top:0;height:100vh;overflow:hidden; display:flex;flex-direction:column;isolation:isolate; padding:clamp(78px,9.5vh,116px) 0 clamp(22px,3.4vh,46px); } .hs__stage::before{ content:"";position:absolute;inset:0;z-index:-2; background:url("../img/gen_drone_services_bg_v1.png") center 34%/cover no-repeat; opacity:.52;transform:scale(1.025); } .hs__stage::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(8,20,31,.64),rgba(8,20,31,.46) 42%,rgba(8,20,31,.78)); } /* 머리 — 왼쪽 제목 / 오른쪽 설명 2단. 세로 높이를 아끼려고 나눴다 */ .hs__head{ flex:0 0 auto;width:min(100% - 48px,var(--max));margin:0 auto clamp(18px,2.6vh,32px); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(20px,3vw,56px);align-items:end; } .hs__head .h2{max-width:none;margin-top:6px} .hs__head .lead{margin-top:0;font-size:14.6px;line-height:1.78} @media (max-width:1024px){ .hs__head{grid-template-columns:1fr;align-items:start;gap:12px} } .hs__row{ flex:1 1 auto;min-height:0; display:flex;align-items:stretch;gap:clamp(14px,1.6vw,24px); padding-inline:max(24px,calc((100vw - var(--max)) / 2)); will-change:transform; } .hcard{ flex:0 0 clamp(262px,24vw,376px);height:100%; display:flex;flex-direction:column;overflow:hidden; background:var(--surf);border:1px solid var(--line); transition:border-color .35s var(--ease); } .hcard:hover{border-color:rgba(var(--ac-rgb),.5)} /* 사진이 카드 높이의 절반 이상을 쓴다. 설명을 한 줄로 줄인 뒤로는 38% 로 두면 본문에 250px 짜리 빈 공간이 생겼다. */ .hcard__img{position:relative;flex:0 0 56%;min-height:140px;overflow:hidden} .hcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .hcard:hover .hcard__img img{transform:scale(1.06)} .hcard__img::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(6,14,22,.1) 0%,rgba(6,14,22,.78) 100%); } .hcard__num{ position:absolute;left:15px;bottom:8px;z-index:2; font-size:clamp(40px,3.8vw,62px);font-weight:900;line-height:1;letter-spacing:-.06em; color:#fff;opacity:.92;font-variant-numeric:tabular-nums; } .hcard__en{ position:absolute;right:15px;bottom:14px;z-index:2;max-width:58%;text-align:right; font-size:10px;font-weight:800;letter-spacing:.15em;color:#C6DCEB; } .hcard__body{ flex:1 1 auto;min-height:0;overflow:hidden; padding:clamp(15px,1.5vw,24px);display:flex;flex-direction:column; } .hcard h3{font-size:clamp(16.5px,1.25vw,19px);font-weight:800;letter-spacing:-.03em;line-height:1.34} .hcard p{margin-top:9px;font-size:13.6px;color:var(--mut);line-height:1.68} .hcard .card__keys{margin-top:auto;padding-top:14px} .hcard .card__keys li{font-size:12px;padding:3px 9px} /* 진행 표시 — 몇 개 남았는지 보이게 */ .hs__foot{ flex:0 0 auto;width:min(100% - 48px,var(--max));margin:clamp(16px,2.4vh,30px) auto 0; display:flex;align-items:center;gap:16px; font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--mut2); } .hs__rail{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden} .hs__bar{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ac)} .hs__hint{white-space:nowrap} /* 낮은 화면 — 체크 목록부터 접는다. 무대가 100vh 를 넘으면 고정이 깨진다 */ @media (max-height:700px){ .hcard .card__keys{display:none} } @media (max-height:640px){ .hs__head .lead{display:none} } /* 좁은 화면에서도 세로 스크롤에 맞춰 카드가 가로로 이동한다. */ @media (max-width:820px){ .hs__stage{position:sticky;top:0;height:100dvh;overflow:hidden;padding:72px 0 22px} .hs__row{ flex:1 1 auto;min-height:0;overflow:visible;scroll-snap-type:none;padding-bottom:0; } .hcard{flex:0 0 78vw;height:100%;scroll-snap-align:none} .hcard__img{flex:0 0 54%;aspect-ratio:auto} .hcard .card__keys{display:flex} .hs__foot{display:flex;width:calc(100% - 40px);margin-top:14px;gap:10px} .hs__foot .hs__hint:last-child{display:none} } @media (prefers-reduced-motion:reduce){ .hs__track{height:auto !important} .hs__stage{position:static;height:auto;overflow:visible} .hs__row{transform:none !important;flex:none;overflow-x:auto} .hcard{flex:0 0 min(78vw,376px);height:auto} .hcard__img{flex:none;aspect-ratio:4/3} .hcard .card__keys{display:flex} } /* ========================================================= 배경 사진 섹션 (.sec--photo) --------------------------------------------------------- 단색 칸만으로는 톤이 안 산다. 다만 사진을 그림으로 쓰면 카드·표·체크목록이 사진 위에 얹혀 글이 안 읽힌다. 그래서 사진을 질감으로만 쓴다 — 불투명도를 낮추고 테마 배경색 막을 덮어, 색과 결만 남기고 형체는 지운다. 적용 대상은 `.sec--alt`(한 칸 걸러 밝은 칸) 뿐이다. 그래야 기존 리듬이 유지된다. 제외: 사진 격자(PORTFOLIO), 카드가 이미 사진인 훑기 섹션 — 사진 위 사진은 뭉갠다. ========================================================= */ .sec--photo{position:relative;overflow:hidden} .sec--photo>.wrap{position:relative;z-index:2} .sec__bg{position:absolute;inset:0;z-index:0;pointer-events:none} .sec__bg img{width:100%;height:100%;object-fit:cover;opacity:var(--scrim-op);filter:saturate(.92) contrast(1.06)} .sec__bg::after{ content:"";position:absolute;inset:0; /* 위아래 끝을 배경색으로 녹여 앞뒤 섹션과 경계가 지지 않게 한다 */ background: linear-gradient(180deg,var(--bg2) 0%,transparent 10%,transparent 90%,var(--bg2) 100%), var(--scrim); } html[data-theme="light"] .sec__bg img{filter:saturate(.82) contrast(1.04)} /* 모션 최소화 — 배경 사진은 정보가 아니므로 통째로 뺀다 */ @media (prefers-reduced-motion:reduce){ .sec__bg img{opacity:calc(var(--scrim-op) * .6)} } /* 원리 카드 — 체크 문장을 칩으로 바꿨다. 읽는 양을 줄이고 신호만 남긴다. */ .cap .card__keys{margin-top:16px} /* 라이트 테마에서도 메가메뉴는 사진이 살아나는 짙은 기업형 패널로 유지한다. */ @media (min-width:901px){ html[data-theme="light"] .hd__mega{background:rgba(7,15,23,.98);border-top-color:var(--ac);border-bottom-color:rgba(255,255,255,.14);box-shadow:0 22px 48px rgba(10,24,35,.26)} html[data-theme="light"] .hd__mega-title strong{color:#F3F7FA} html[data-theme="light"] .hd__mega-title{border-bottom-color:rgba(255,255,255,.2)} html[data-theme="light"] .hd__mega-links{border-left-color:rgba(255,255,255,.18)} html[data-theme="light"] .hd__mega-links a{color:#D7E1E9;border-bottom-color:rgba(255,255,255,.09)} html[data-theme="light"] .hd__mega-contact{border-color:rgba(var(--ac-rgb),.32);background:linear-gradient(120deg,rgba(var(--ac-rgb),.17),rgba(9,19,28,.88));box-shadow:inset 3px 0 0 var(--ac)} html[data-theme="light"] .hd__mega-contact>strong{color:#F3F7FA} html[data-theme="light"] .hd__contact-list b{color:#D8E3EA} html[data-theme="light"] .hd__contact-list small{color:#8498A8} } /* 사면방재 섹션 사진은 고정 배경이 아니라 각 구역 안에서만 사용한다. */ .slope-company .sec__bg img{object-position:center 46%} .slope-process .sec__bg img{object-position:center 58%} /* 드론 상세 첫 진입 — 설명 카드 대신 현장 사진 위에서 서비스를 고른다. */ .drone-scope{position:relative;isolation:isolate;min-height:clamp(300px,36vw,470px);overflow:hidden;background:#07131D} .drone-scope__bg{position:absolute;inset:0;z-index:-2} .drone-scope__bg img{width:100%;height:100%;object-fit:cover;object-position:center 50%} .drone-scope::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(28,20,11,.66),rgba(32,24,14,.17) 51%,rgba(22,18,12,.42))} .drone-scope__grid{min-height:inherit;align-items:stretch} .drone-scope__item{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(34px,4.4vw,66px);border-left:1px solid rgba(255,255,255,.18);color:#F3F7FA;background:rgba(5,17,27,.12);transition:background .35s var(--ease),padding .35s var(--ease)} .drone-scope__item:last-child{border-right:1px solid rgba(255,255,255,.18)} .drone-scope__item b{color:#5CC8F2} .drone-scope__item h2{font-size:clamp(36px,5vw,68px);color:#F3F7FA} .drone-scope__item span{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.22);color:#D4E0E8;font-size:14px} .drone-scope__item span i{font-size:22px;font-style:normal;transition:transform .25s} .drone-scope__item:hover{padding-bottom:clamp(42px,5.2vw,78px);background:rgba(0,156,221,.18);transform:none} .drone-scope__item:hover span{color:#FFF} .drone-scope__item:hover span i{transform:translateX(5px)} html[data-theme="light"] .drone-scope__item{color:#F3F7FA;background:rgba(5,17,27,.1)} html[data-theme="light"] .drone-scope__item:hover{background:rgba(0,123,177,.22)} @media(max-width:720px){ .drone-scope{min-height:540px} .drone-scope__grid{grid-template-columns:1fr;padding:0} .drone-scope__item,.drone-scope__item:last-child{min-height:180px;padding:24px;border-right:0;border-bottom:1px solid rgba(255,255,255,.18)} .drone-scope__item h2{font-size:34px} .drone-scope__item:hover{padding:28px 24px} } /* 라이트 모드 메가메뉴가 열릴 때 헤더까지 한 장의 다크 패널로 이어진다. */ @media (min-width:901px){ .hd__logo img{transition:filter .22s var(--ease)} .hd__logo b,.hd__logo span{transition:color .22s var(--ease)} html[data-theme="light"] .hd:has(.hd__nav:hover), html[data-theme="light"] .hd:has(.hd__nav:focus-within){background:rgba(7,15,23,.98);border-bottom-color:rgba(255,255,255,.12);box-shadow:none} html[data-theme="light"] .hd:has(.hd__nav:hover) .hd__logo img, html[data-theme="light"] .hd:has(.hd__nav:focus-within) .hd__logo img{filter:brightness(0) invert(1)} html[data-theme="light"] .hd:has(.hd__nav:hover) .hd__logo b, html[data-theme="light"] .hd:has(.hd__nav:focus-within) .hd__logo b{color:#F3F7FA} html[data-theme="light"] .hd:has(.hd__nav:hover) .hd__logo span, html[data-theme="light"] .hd:has(.hd__nav:focus-within) .hd__logo span{color:#95A7B5} html[data-theme="light"] .hd:has(.hd__nav:hover) .hd__top, html[data-theme="light"] .hd:has(.hd__nav:focus-within) .hd__top{color:#DCE5EB} html[data-theme="light"] .hd:has(.hd__nav:hover) .hd__item:hover .hd__top, html[data-theme="light"] .hd:has(.hd__nav:focus-within) .hd__item:focus-within .hd__top{color:#FFF;background:rgba(255,255,255,.08)} } /* 사면방재 × 드론 — 두 사업이 실제로 만나는 차별화 구간 */ .slope-drone{position:relative;min-height:clamp(620px,72vh,820px);display:flex;align-items:center;overflow:hidden;color:#F3F7FA;background:#07130D} .slope-drone__bg{position:absolute;inset:0} .slope-drone__bg img{width:100%;height:100%;object-fit:cover;object-position:center top} .slope-drone::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,15,9,.94) 0%,rgba(5,15,9,.72) 42%,rgba(5,15,9,.26) 68%,rgba(5,15,9,.62) 100%)} .slope-drone__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(300px,.9fr) minmax(390px,1fr);gap:clamp(60px,8vw,130px);align-items:end;padding-block:clamp(76px,9vw,130px)} .slope-drone__head>span{font-size:11px;font-weight:900;letter-spacing:.2em;color:#A8E97A} .slope-drone__head h2{margin-top:16px;font-size:clamp(36px,5vw,64px);line-height:1.16;letter-spacing:-.045em} .slope-drone__head h2 em{font-style:normal;color:#A8E97A} .slope-drone__head p{max-width:38ch;margin-top:20px;font-size:16px;line-height:1.75;color:#C5D4CA;word-break:keep-all} .slope-drone__head a{display:inline-flex;align-items:center;gap:26px;margin-top:30px;padding:15px 18px;border:1px solid rgba(168,233,122,.55);font-size:14px;font-weight:800;color:#F3F7FA} .slope-drone__head a i{font-size:19px;font-style:normal;transition:transform .2s} .slope-drone__head a:hover{background:#6FC72E;border-color:#6FC72E;color:#0B2405} .slope-drone__head a:hover i{transform:translateX(4px)} .slope-drone__list{border-top:1px solid rgba(255,255,255,.3)} .slope-drone__list article{display:grid;grid-template-columns:54px 1fr;gap:20px;align-items:center;padding:25px 4px;border-bottom:1px solid rgba(255,255,255,.22);backdrop-filter:blur(2px)} .slope-drone__list article>b{font-size:12px;letter-spacing:.12em;color:#A8E97A} .slope-drone__list h3{font-size:23px;letter-spacing:-.03em} .slope-drone__list p{margin-top:5px;font-size:13.5px;color:#B9C9BF;word-break:keep-all} @media(max-width:820px){ .slope-drone{min-height:760px;align-items:flex-end} .slope-drone::after{background:linear-gradient(180deg,rgba(5,15,9,.25),rgba(5,15,9,.9) 48%,rgba(5,15,9,.98))} .slope-drone__in{grid-template-columns:1fr;gap:42px;padding-block:72px 54px} .slope-drone__list article{padding:20px 2px} } /* 메가메뉴 문의 패널 — 정보는 넓게, 행동 버튼은 중간 크기로 */ @media (min-width:1450px){ .hd__nav{left:0;right:clamp(430px,28vw,500px);justify-content:stretch;gap:0} .hd__item{width:auto;flex:1;text-align:center} .hd__mega-in{width:100%;max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr) clamp(430px,28vw,500px);justify-content:stretch;gap:0} .hd__mega-contact{position:static;width:auto;min-height:330px;grid-template-columns:minmax(250px,1fr) 128px;column-gap:24px} .hd__mega-contact>a.hd__contact-cta{align-self:center;width:128px;height:82px;min-height:82px;justify-self:end;gap:5px} .hd__contact-cta i{font-size:18px} } /* 메가메뉴는 카드가 떠 있는 팝업이 아니라 헤더에서 이어지는 한 장의 패널로 보이게 한다. */ @media (min-width:901px){ .hd__mega{overflow:hidden} .hd__mega-in{padding-top:0;padding-bottom:0;align-items:stretch} .hd__mega-group{min-height:330px;padding-top:36px;padding-bottom:36px} .hd__mega-contact{min-height:330px;border-top:0;border-bottom:0} } /* 지강산업의 헤드셋형 문의 버튼을 자체 SVG로 구현한다. */ .quick-contact{right:24px;bottom:126px;display:grid;place-items:center;width:62px;height:62px;min-width:0;padding:0;border-radius:50%;overflow:visible} .quick-contact svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .quick-contact span{position:absolute;right:calc(100% + 12px);top:50%;grid-column:auto;transform:translate(8px,-50%);width:max-content;padding:9px 12px;border:1px solid var(--line);background:var(--bg2);color:var(--txt);box-shadow:0 8px 20px rgba(0,0,0,.2);font-size:12px;font-weight:800;letter-spacing:0;line-height:1;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s} .quick-contact:hover span,.quick-contact:focus-visible span{opacity:1;transform:translate(0,-50%)} .quick-contact:hover{transform:translateY(-2px)} @media(max-width:760px){ .quick-contact{right:14px;bottom:112px;width:54px;height:54px;min-width:0;padding:0} .quick-contact svg{width:24px;height:24px} } /* 문의 행동 버튼 — 단순 직사각형 대신 앱 아이콘 형태 */ @media (min-width:901px){ .hd__mega-contact>a.hd__contact-cta{ width:104px;height:104px;min-height:104px;justify-self:end;align-self:center; flex-direction:column;gap:9px;border:1px solid rgba(255,255,255,.2);border-radius:22px; background:linear-gradient(145deg,var(--ac-l),var(--ac)); box-shadow:0 14px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.22); font-size:13px;transition:transform .22s var(--ease),box-shadow .22s,filter .22s; } .hd__mega-contact>a.hd__contact-cta::before{ content:"";display:block;width:30px;height:30px;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 14v-2a8 8 0 0116 0v2M4 14a2 2 0 012-2h1v7H6a2 2 0 01-2-2v-3Zm16 0a2 2 0 00-2-2h-1v7h1a2 2 0 002-2v-3ZM17 19c0 1.1-.9 2-2 2h-3' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 14v-2a8 8 0 0116 0v2M4 14a2 2 0 012-2h1v7H6a2 2 0 01-2-2v-3Zm16 0a2 2 0 00-2-2h-1v7h1a2 2 0 002-2v-3ZM17 19c0 1.1-.9 2-2 2h-3' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } .hd__mega-contact>a.hd__contact-cta i{display:none} .hd__mega-contact>a.hd__contact-cta:hover{transform:translateY(-4px);filter:brightness(1.08);box-shadow:0 18px 34px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.25)} html[data-accent="green"] .hd__mega-contact>a.hd__contact-cta{background:linear-gradient(145deg,#96E05C,#6FC72E);color:#0B2405} } .quick-contact{border-radius:18px;background:linear-gradient(145deg,var(--ac-l),var(--ac));box-shadow:0 12px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.24)} html[data-accent="green"] .quick-contact{background:linear-gradient(145deg,#96E05C,#6FC72E)} /* 우측 문의 카드 — 페이지 이동 없이 현재 화면 위에서 연락처를 확인한다. */ .contact-pop{position:fixed;right:24px;bottom:126px;z-index:410;width:min(370px,calc(100vw - 32px));padding:32px 28px 26px;border:1px solid rgba(var(--ac-rgb),.46);border-radius:24px;background:linear-gradient(145deg,rgba(var(--ac-rgb),.97),rgba(7,18,27,.98) 72%);color:#F3F7FA;box-shadow:0 24px 64px rgba(0,0,0,.42);opacity:0;pointer-events:none;transform:scale(.168);transform-origin:bottom right;transition:opacity .18s,transform .38s cubic-bezier(.2,.9,.3,1.16),border-radius .32s} .contact-pop.open{opacity:1;pointer-events:auto;transform:none;border-radius:24px} .contact-pop::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 100% 0,rgba(255,255,255,.12),transparent 46%)} .contact-pop::after{content:"";position:absolute;right:15px;bottom:15px;width:30px;height:30px;background:#FFF;opacity:1;transition:opacity .1s .14s;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 14v-2a8 8 0 0116 0v2M4 14a2 2 0 012-2h1v7H6a2 2 0 01-2-2v-3Zm16 0a2 2 0 00-2-2h-1v7h1a2 2 0 002-2v-3ZM17 19c0 1.1-.9 2-2 2h-3' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 14v-2a8 8 0 0116 0v2M4 14a2 2 0 012-2h1v7H6a2 2 0 01-2-2v-3Zm16 0a2 2 0 00-2-2h-1v7h1a2 2 0 002-2v-3ZM17 19c0 1.1-.9 2-2 2h-3' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat} .contact-pop.open::after{opacity:0;transition-delay:0s} .contact-pop>*{position:relative;z-index:1;opacity:0;transition:opacity .14s} .contact-pop.open>*{opacity:1;transition-delay:.2s} .contact-pop__close{position:absolute;top:15px;right:15px;z-index:2;width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.12);color:#FFF;font-size:22px;line-height:1} .contact-pop__close:hover{background:rgba(255,255,255,.22)} .contact-pop__eyebrow{display:block;padding-right:42px;font-size:10px;font-weight:900;letter-spacing:.2em;color:var(--ac-ph)} .contact-pop h2{margin-top:10px;font-size:29px;letter-spacing:-.04em} .contact-pop>p{margin-top:9px;font-size:13px;line-height:1.65;color:#B9CAD5;word-break:keep-all} .contact-pop__list{display:grid;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16)} .contact-pop__list>a,.contact-pop__list>div{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:13px;color:#FFF} .contact-pop__ico{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.13);color:#FFF;font-style:normal} .contact-pop__ico::before{font-size:17px}.contact-pop__ico--tel::before{content:"☎"}.contact-pop__ico--mail::before{content:"✉"} .contact-pop__ico--map::before{content:"";display:block;width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.5 8 4.5l8 3 5-2v14l-5 2-8-3-5 2v-14Z M8 4.5v14 M16 7.5v14' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.5 8 4.5l8 3 5-2v14l-5 2-8-3-5 2v-14Z M8 4.5v14 M16 7.5v14' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat} .contact-pop__list span{display:flex;flex-direction:column;gap:2px;min-width:0} .contact-pop__list small{font-size:10px;color:#AABCC8}.contact-pop__list b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .contact-pop__business{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px} .contact-pop__business a{padding:11px;text-align:center;border:1px solid rgba(255,255,255,.2);border-radius:10px;color:#FFF;font-size:12px;font-weight:800} .contact-pop__business a:hover{background:rgba(255,255,255,.14)} html[data-accent="green"] .contact-pop{background:linear-gradient(145deg,rgba(74,139,25,.98),rgba(7,21,12,.98) 74%);border-color:rgba(150,224,92,.52)} @media(max-width:760px){ .contact-pop{right:14px;bottom:112px;width:min(330px,calc(100vw - 28px));padding:28px 22px 22px;border-radius:20px;transform:scale(.164)} } /* 전체 폭을 조금 걷어내 카드 사이에 다시 호흡을 준다. */ @media (min-width:1450px){ .hd__nav{left:48px;right:calc(clamp(430px,28vw,500px) + 62px)} .hd__mega-in{width:calc(100% - 96px);grid-template-columns:minmax(0,1fr) minmax(0,1fr) clamp(460px,27vw,490px);gap:14px} } /* 드롭다운 안 문의 버튼은 기존 직사각형 CTA를 유지한다. */ @media (min-width:901px){ .hd__mega-contact>a.hd__contact-cta{ width:128px;height:82px;min-height:82px;border:0;border-radius:2px; flex-direction:column;gap:7px;background:var(--ac);box-shadow:none;font-size:14px; } .hd__mega-contact>a.hd__contact-cta::before{display:none} .hd__mega-contact>a.hd__contact-cta i{display:block;font-size:19px} .hd__mega-contact>a.hd__contact-cta:hover{transform:translateY(-2px);background:var(--ac-l);filter:none;box-shadow:0 10px 22px rgba(0,0,0,.2)} html[data-accent="green"] .hd__mega-contact>a.hd__contact-cta{background:#6FC72E;color:#0B2405} html[data-accent="green"] .hd__mega-contact>a.hd__contact-cta:hover{background:#96E05C} } /* 문의 아이콘과 확장 카드 사이의 모핑 연결 */ .quick-contact{transition:opacity .14s .1s,transform .22s,background .2s} .quick-contact.is-open{opacity:0;pointer-events:none;transform:scale(.9);transition-delay:0s} .contact-pop::after{right:89px;bottom:89px;width:180px;height:180px} /* 헤드셋 버튼은 도크 중심축에 맞추고 아이콘은 항상 흰색으로 표시한다. */ .quick-contact{right:21px;color:#FFF !important} .quick-contact svg{stroke:#FFF;transform:translate(-1px,-1px)} @media(max-width:760px){.quick-contact{right:12px}} /* 넓은 화면에서도 사업 패널이 과도하게 늘어나지 않도록 최대 폭을 제한한다. */ @media (min-width:1450px){ .hd__nav{left:max(48px,calc((100vw - 1520px)/2));right:max(448px,calc((100vw - 1520px)/2 + 432px))} .hd__mega-in{width:calc(100% - 96px);grid-template-columns:minmax(360px,560px) minmax(360px,560px) 400px;justify-content:space-between;gap:16px} .hd__mega-contact{grid-template-columns:minmax(200px,1fr) 110px;column-gap:14px;padding:22px 20px} } @media (min-width:901px){ .hd__mega-group,.hd__mega-contact{min-height:300px} .hd__mega-group{padding:30px 28px} .hd__mega-contact>a.hd__contact-cta{width:110px;height:72px;min-height:72px} } /* 고정 문의 앱 아이콘 — 스위치와 같은 폭, 헤드셋은 광학 중앙 정렬 */ .quick-contact{right:24px;width:56px;height:56px;bottom:120px;border-radius:16px;grid-template-columns:1fr;grid-template-rows:1fr} .quick-contact svg{grid-column:1;grid-row:1;width:28px;height:28px;transform:translateX(1px)} .contact-pop{bottom:120px;transform:scale(.151)} .contact-pop::after{right:99px;bottom:99px;width:159px;height:159px} .contact-pop.closing{pointer-events:none;animation:contactPopClose .42s cubic-bezier(.4,0,.2,1) both} .quick-contact.returning{animation:contactIconReturn .44s cubic-bezier(.2,.9,.3,1.25) both} @keyframes contactPopClose{ 0%{opacity:1;transform:scale(1)} 32%{opacity:1;transform:scale(1.025)} 100%{opacity:0;transform:scale(.151)} } @keyframes contactIconReturn{ 0%,58%{opacity:0;transform:scale(.78)} 82%{opacity:1;transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @media(max-width:760px){ .quick-contact{right:14px;bottom:106px;width:50px;height:50px;border-radius:14px} .quick-contact svg{width:25px;height:25px;transform:translateX(1px)} .contact-pop{right:14px;bottom:106px;transform:scale(.152)} } /* 드론 분야 카드는 명사형 한 줄에 맞춰 본문 빈 공간을 줄인다. */ @media(min-width:821px){ .hs__stage{ justify-content:center; padding:clamp(128px,14vh,156px) 0 clamp(28px,4vh,44px); } .hs__row{flex:0 0 auto;align-items:flex-start} .hcard{height:auto} .hcard__img{flex:none;height:clamp(300px,42vh,410px)} .hcard__body{flex:none;min-height:142px;padding:18px 20px 20px} .hcard p{margin-top:7px;line-height:1.55} .hcard .card__keys{margin-top:16px;padding-top:0} .hs__foot{margin-top:clamp(18px,2.2vh,26px)} } /* 초광폭 화면: 두 사업은 화면 중앙에 한 묶음, 문의는 우측 끝에 독립 배치 */ @media(min-width:1920px){ .hd__nav{left:calc(50% - 530px);right:calc(50% - 530px);gap:60px} .hd__item{flex:1;width:auto} .hd__mega-in{ position:relative;width:calc(100% - 56px);max-width:none; grid-template-columns:repeat(2,minmax(400px,500px)); justify-content:center;gap:60px; } .hd__mega-contact{ position:absolute;right:0;top:0;bottom:0;width:400px;min-height:300px; grid-template-columns:minmax(200px,1fr) 110px;column-gap:14px; } } /* 노트북·맥북 중간 폭: 로고, 사업 메뉴, 문의 버튼이 서로 침범하지 않도록 분리 */ @media(min-width:901px) and (max-width:1599px){ .hd{padding-inline:28px} .hd__logo{position:relative;z-index:230;flex:0 0 auto;max-width:250px} .hd__logo img{height:46px} .hd__logo b{font-size:20px} .hd__logo span{font-size:10px;letter-spacing:.11em} .hd__nav{ left:clamp(270px,22vw,320px); right:clamp(132px,13vw,190px); gap:12px;justify-content:center; } .hd__item{flex:1 1 0;width:auto;max-width:330px} .hd__top{font-size:18px;padding-inline:18px} .hd__right{position:relative;z-index:2} } @supports not (overflow:clip){ html,body{overflow-x:hidden} } /* 상단 메뉴에서 메가메뉴로 이동할 때 투명 구간에서도 hover를 유지한다. */ @media(min-width:901px){ .hd__nav{pointer-events:auto} .hd__mega::before{height:52px;pointer-events:auto} .hd__mega{transition:opacity .2s var(--ease),transform .24s var(--ease),visibility 0s linear .16s;visibility:hidden} .hd__nav:hover .hd__mega,.hd__nav:focus-within .hd__mega{visibility:visible;transition-delay:0s} } /* 상단 사업 탭과 하단 사업 패널을 하나의 연속된 면으로 연결한다. */ @media(min-width:901px){ .hd__nav{align-items:stretch} .hd__item{height:120px} .hd__top{ display:flex;height:100%;align-items:center;justify-content:center; padding:0 26px;border-radius:0; transition:color .2s,background .25s,filter .25s; } .hd__top.on::after{ left:0;right:0;bottom:0;height:3px;border-radius:0; } .hd__item:hover .hd__top, .hd__item:focus-within .hd__top{ background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(var(--ac-rgb),.09)); filter:brightness(1.14); } .hd__mega{ border-top:0;transform:none; } .hd__mega::before{height:1px} .hd__mega-in{border-top:0} .hd__mega-group{ background-position:center center; transition:background-size 1.15s cubic-bezier(.2,.65,.25,1),filter .75s ease; background-size:100% 100%,100% 100%; } .hd__mega-group:hover, .hd__mega-group:focus-within{ background-position:center center; background-size:100% 100%,103% 103%; filter:brightness(1.07); } } /* 문의 패널은 우측 외곽 여백 없이 화면 끝까지 이어진다. */ @media(min-width:1450px) and (max-width:1919px){ .hd__mega-contact{margin-right:-48px} } @media(min-width:1920px){ .hd__mega-contact{ right:-28px; width:428px; border-right:0; } } @media(min-width:901px) and (max-width:1599px){ .hd__top{padding-inline:18px} } /* 모바일 메가메뉴 — 긴 카드 대신 화면 안에 정돈되는 사업 메뉴 패널 */ @media(max-width:900px){ .hd__nav{ inset:66px 0 0 0;height:calc(100dvh - 66px);padding:12px 16px 22px; overflow-y:auto;overscroll-behavior:contain;background:rgba(8,18,27,.98); } .hd__mega-in{display:grid;grid-template-columns:1fr;gap:10px;width:100%;padding:0} .hd__mega-group{ min-height:0;padding:16px 18px 14px;border:1px solid rgba(255,255,255,.1); border-top-width:3px;background:rgba(255,255,255,.035) !important; } .hd__mega-title{min-height:0;padding:0 0 11px;border-bottom:1px solid rgba(255,255,255,.14)} .hd__mega-title strong{font-size:18px;color:#F2F7FC} .hd__mega-links{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px; margin-top:8px;padding:0;border-left:0; } .hd__mega-links a{ padding:9px 18px 9px 0;border-bottom:1px solid rgba(255,255,255,.08); color:#B7C6D2;font-size:13.5px;white-space:nowrap; } .hd__mega-links a::after{right:0;font-size:12px} .hd__mega-contact{ display:grid;grid-template-columns:minmax(150px,.65fr) minmax(0,1.35fr) 112px; align-items:center;gap:14px;min-height:0;padding:16px 18px; border:1px solid rgba(var(--ac-rgb),.28);background:rgba(var(--ac-rgb),.08); } .hd__mega-contact>span{grid-column:1;font-size:9px} .hd__mega-contact>strong{grid-column:1;margin-top:2px;font-size:17px;color:#F2F7FC} .hd__contact-list{grid-column:2;grid-row:1/3;gap:5px;margin:0} .hd__contact-list>a,.hd__contact-list>div{grid-template-columns:25px 1fr;gap:7px} .hd__contact-list .contact-ico{width:25px;height:25px} .hd__contact-list small{font-size:9px} .hd__contact-list b{font-size:11px} .hd__mega-contact>a.hd__contact-cta{ grid-column:3;grid-row:1/3;display:grid;place-items:center;width:112px;min-height:54px; margin:0;padding:10px;background:var(--ac);color:var(--ac-on);font-size:13px;font-weight:800; } } @media(max-width:600px){ .hd__nav{padding-inline:10px} .hd__mega-links{grid-template-columns:1fr} .hd__mega-contact{grid-template-columns:1fr 92px} .hd__mega-contact>span,.hd__mega-contact>strong{grid-column:1} .hd__contact-list{grid-column:1/3;grid-row:auto;margin-top:8px} .hd__mega-contact>a.hd__contact-cta{grid-column:2;grid-row:1/3;width:92px} } /* 맥북·소형 노트북처럼 세로가 짧은 데스크톱 화면의 메가메뉴 압축 */ @media(min-width:901px) and (max-height:820px){ .hd__mega{background:rgba(7,15,23,.995)} .hd__mega-group,.hd__mega-contact{min-height:248px} .hd__mega-group{padding:21px 25px 20px} .hd__mega-title{min-height:42px;padding-bottom:14px} .hd__mega-title strong{font-size:20px} .hd__mega-links{margin-top:10px} .hd__mega-links a{padding-block:6px;font-size:14px} .hd__mega-contact{padding-block:18px} .hd__mega-contact>strong{font-size:21px} .hd__contact-list{margin-top:13px;gap:7px} .hd__mega-contact>a.hd__contact-cta{height:66px;min-height:66px} } /* 문의 정보 아이콘 — 문자 기호 대신 색상이 유지되는 일러스트형 픽토그램 */ .contact-ico{ display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:9px; font-style:normal;box-shadow:inset 0 0 0 1px currentColor; } .contact-ico::before{ content:"" !important;display:block;width:18px;height:18px;background:currentColor; -webkit-mask-position:center;mask-position:center; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:contain;mask-size:contain; } .contact-ico--tel{color:#86DE45;background:rgba(134,222,69,.12)} .contact-ico--tel::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.5 3 3.9 5.4 6.9 6.9l2.3-2.3c.3-.3.8-.4 1.2-.2 1.3.5 2.6.8 4 .9.5 0 .9.4.9.9v3.6c0 .5-.4.9-.9.9C10.5 21.5 2.5 13.5 2.5 3c0-.5.4-.9.9-.9H7c.5 0 .9.4.9.9.1 1.4.4 2.7.9 4 .1.4 0 .9-.3 1.2l-1.9 2.6Z' fill='black'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.5 3 3.9 5.4 6.9 6.9l2.3-2.3c.3-.3.8-.4 1.2-.2 1.3.5 2.6.8 4 .9.5 0 .9.4.9.9v3.6c0 .5-.4.9-.9.9C10.5 21.5 2.5 13.5 2.5 3c0-.5.4-.9.9-.9H7c.5 0 .9.4.9.9.1 1.4.4 2.7.9 4 .1.4 0 .9-.3 1.2l-1.9 2.6Z' fill='black'/%3E%3C/svg%3E"); } .contact-ico--mail{color:#45BDEA;background:rgba(69,189,234,.12)} .contact-ico--mail::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2 9 6 9-6H3Zm18 10V9.4l-8.45 5.63a1 1 0 0 1-1.1 0L3 9.4V17h18Z' fill='black'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2 9 6 9-6H3Zm18 10V9.4l-8.45 5.63a1 1 0 0 1-1.1 0L3 9.4V17h18Z' fill='black'/%3E%3C/svg%3E"); } .contact-ico--pin{color:#F2B84B;background:rgba(242,184,75,.12)} .contact-ico--pin::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a8 8 0 0 0-8 8c0 5.7 8 14 8 14s8-8.3 8-14a8 8 0 0 0-8-8Zm0 11.5A3.5 3.5 0 1 1 12 5a3.5 3.5 0 0 1 0 7.5Z' fill='black'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a8 8 0 0 0-8 8c0 5.7 8 14 8 14s8-8.3 8-14a8 8 0 0 0-8-8Zm0 11.5A3.5 3.5 0 1 1 12 5a3.5 3.5 0 0 1 0 7.5Z' fill='black'/%3E%3C/svg%3E"); } @media(max-width:900px){ .hd__contact-list .contact-ico{width:30px;height:30px;border-radius:8px} .hd__contact-list .contact-ico::before{width:16px;height:16px} } /* 맥북 데스크톱 폭: 상단 두 탭과 펼쳐지는 두 사업 메뉴의 열을 정확히 맞춘다. */ @media(min-width:1050px){ .hd{ --mac-menu-left:clamp(250px,19vw,300px); --mac-contact-width:clamp(350px,24vw,460px); } .hd__nav{ left:var(--mac-menu-left);right:var(--mac-contact-width); gap:0;justify-content:stretch; } .hd__item{width:auto;max-width:none;flex:1 1 50%} .hd__mega-in{ width:100%;max-width:none;padding:0; grid-template-columns:var(--mac-menu-left) minmax(0,1fr) minmax(0,1fr) var(--mac-contact-width); gap:0;justify-content:stretch; } .hd__mega-group--slope{grid-column:2} .hd__mega-group--drone{grid-column:3} .hd__mega-contact{ grid-column:4;position:static;width:auto;margin-right:0; border-right:0; } } @media(min-width:1600px){ .hd{ --mac-menu-left:500px; --mac-contact-width:500px; } } /* 푸터 문의 아이콘도 드롭다운과 동일한 컬러 SVG 체계로 통일 */ .ft__contact li i{ display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:9px; font-size:0;box-shadow:inset 0 0 0 1px currentColor; } .ft__contact li i::before{ content:"" !important;display:block;width:18px;height:18px;background:currentColor; -webkit-mask-position:center;mask-position:center; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:contain;mask-size:contain; } .ft__contact li:nth-child(1) i{color:#86DE45;background:rgba(134,222,69,.12)} .ft__contact li:nth-child(1) i::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.5 3 3.9 5.4 6.9 6.9l2.3-2.3c.3-.3.8-.4 1.2-.2 1.3.5 2.6.8 4 .9.5 0 .9.4.9.9v3.6c0 .5-.4.9-.9.9C10.5 21.5 2.5 13.5 2.5 3c0-.5.4-.9.9-.9H7c.5 0 .9.4.9.9.1 1.4.4 2.7.9 4 .1.4 0 .9-.3 1.2l-1.9 2.6Z' fill='black'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.5 3 3.9 5.4 6.9 6.9l2.3-2.3c.3-.3.8-.4 1.2-.2 1.3.5 2.6.8 4 .9.5 0 .9.4.9.9v3.6c0 .5-.4.9-.9.9C10.5 21.5 2.5 13.5 2.5 3c0-.5.4-.9.9-.9H7c.5 0 .9.4.9.9.1 1.4.4 2.7.9 4 .1.4 0 .9-.3 1.2l-1.9 2.6Z' fill='black'/%3E%3C/svg%3E"); } .ft__contact li:nth-child(2) i{color:#45BDEA;background:rgba(69,189,234,.12)} .ft__contact li:nth-child(2) i::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2 9 6 9-6H3Zm18 10V9.4l-8.45 5.63a1 1 0 0 1-1.1 0L3 9.4V17h18Z' fill='black'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2 9 6 9-6H3Zm18 10V9.4l-8.45 5.63a1 1 0 0 1-1.1 0L3 9.4V17h18Z' fill='black'/%3E%3C/svg%3E"); } .ft__contact li:nth-child(3) i{color:#F2B84B;background:rgba(242,184,75,.12)} .ft__contact li:nth-child(3) i::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a8 8 0 0 0-8 8c0 5.7 8 14 8 14s8-8.3 8-14a8 8 0 0 0-8-8Zm0 11.5A3.5 3.5 0 1 1 12 5a3.5 3.5 0 0 1 0 7.5Z' fill='black'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a8 8 0 0 0-8 8c0 5.7 8 14 8 14s8-8.3 8-14a8 8 0 0 0-8-8Zm0 11.5A3.5 3.5 0 1 1 12 5a3.5 3.5 0 0 1 0 7.5Z' fill='black'/%3E%3C/svg%3E"); } .ft__contact li{grid-template-columns:34px 1fr} /* 연락처 색상은 아이콘 종류가 아니라 현재 사업분야의 강조색을 따른다. */ .contact-ico--tel,.contact-ico--mail,.contact-ico--pin, .ft__contact li:nth-child(1) i,.ft__contact li:nth-child(2) i,.ft__contact li:nth-child(3) i{ color:var(--ac-l);background:rgba(var(--ac-rgb),.12); } /* 우측 하단 문의 카드도 이모지 대신 동일한 SVG 아이콘 사용 */ .contact-pop__ico{color:#FFF;font-size:0} .contact-pop__ico::before{ content:"" !important;display:block;width:19px;height:19px;background:currentColor; -webkit-mask-position:center;mask-position:center; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:contain;mask-size:contain; } .contact-pop__ico--tel::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.5 3 3.9 5.4 6.9 6.9l2.3-2.3c.3-.3.8-.4 1.2-.2 1.3.5 2.6.8 4 .9.5 0 .9.4.9.9v3.6c0 .5-.4.9-.9.9C10.5 21.5 2.5 13.5 2.5 3c0-.5.4-.9.9-.9H7c.5 0 .9.4.9.9.1 1.4.4 2.7.9 4 .1.4 0 .9-.3 1.2l-1.9 2.6Z' fill='black'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.5 3 3.9 5.4 6.9 6.9l2.3-2.3c.3-.3.8-.4 1.2-.2 1.3.5 2.6.8 4 .9.5 0 .9.4.9.9v3.6c0 .5-.4.9-.9.9C10.5 21.5 2.5 13.5 2.5 3c0-.5.4-.9.9-.9H7c.5 0 .9.4.9.9.1 1.4.4 2.7.9 4 .1.4 0 .9-.3 1.2l-1.9 2.6Z' fill='black'/%3E%3C/svg%3E"); } .contact-pop__ico--mail::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2 9 6 9-6H3Zm18 10V9.4l-8.45 5.63a1 1 0 0 1-1.1 0L3 9.4V17h18Z' fill='black'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2 9 6 9-6H3Zm18 10V9.4l-8.45 5.63a1 1 0 0 1-1.1 0L3 9.4V17h18Z' fill='black'/%3E%3C/svg%3E"); } .contact-pop__ico--map::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a8 8 0 0 0-8 8c0 5.7 8 14 8 14s8-8.3 8-14a8 8 0 0 0-8-8Zm0 11.5A3.5 3.5 0 1 1 12 5a3.5 3.5 0 0 1 0 7.5Z' fill='black'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a8 8 0 0 0-8 8c0 5.7 8 14 8 14s8-8.3 8-14a8 8 0 0 0-8-8Zm0 11.5A3.5 3.5 0 1 1 12 5a3.5 3.5 0 0 1 0 7.5Z' fill='black'/%3E%3C/svg%3E"); } .ft__contact li{display:block} .ft__contact-link{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:10px;color:var(--txt2)} .ft__contact-link:hover{color:var(--ac-l)} .ft__contact-link span{white-space:nowrap} /* 연락처 픽토그램 중앙 정렬 */ .contact-ico,.ft__contact li i,.contact-pop__ico{line-height:0} .contact-ico::before,.ft__contact li i::before,.contact-pop__ico::before{transform:none} .contact-icon--single{display:block;padding:0;background:none!important;box-shadow:none!important;border:0!important} .contact-icon--single::before{display:none!important} .contact-icon--single svg{display:block;width:100%;height:100%;overflow:visible;fill:currentColor} .contact-pop__ico.contact-icon--single{width:38px;height:38px;color:var(--ac-l)} /* 플로팅 문의 버튼 — 타일과 헤드셋을 하나의 SVG 좌표계로 고정 */ .quick-contact{background:transparent!important;border:0!important;box-shadow:none!important} .quick-contact svg.quick-contact__single-icon{display:block;width:100%;height:100%;overflow:visible;fill:none;filter:drop-shadow(0 12px 14px rgba(0,0,0,.28));transition:filter .28s,transform .28s var(--ease)} .quick-contact__tile{fill:var(--ac);stroke:var(--ac-l);stroke-width:1.5} .quick-contact__headset,.quick-contact__mic{fill:none;stroke:#fff;stroke-width:2.35;stroke-linecap:round;stroke-linejoin:round} .quick-contact__mic{stroke-width:2.5} .quick-contact__mic-dot{fill:#fff;stroke:none} html[data-accent="green"] .quick-contact__tile{fill:#6FC72E;stroke:#96E05C} .quick-contact:hover svg.quick-contact__single-icon{transform:scale(1.035);filter:brightness(1.08) drop-shadow(0 14px 16px rgba(0,0,0,.3))} @media(max-width:760px){.quick-contact svg.quick-contact__single-icon{width:100%;height:100%}} /* 모바일 메가메뉴에서도 두 사업의 대표 사진을 분명하게 표시 */ @media(max-width:900px){ .hd__mega-group--slope{ background-image:linear-gradient(100deg,rgba(6,18,9,.70),rgba(6,18,9,.84)),url("../img/bg_dropdown_slope_v2.png")!important; background-position:center 46%!important;background-size:cover!important; } .hd__mega-group--drone{ background-image:linear-gradient(100deg,rgba(4,16,25,.62),rgba(4,16,25,.82)),url("../img/bg_dropdown_drone_v2.png")!important; background-position:42% center!important;background-size:cover!important; } } /* 모바일 메인 사업 카드 — 키워드는 우측 상단, 이동 행동은 하단에 분리 */ @media(max-width:900px){ .gate__body .pane{align-items:stretch;min-height:44svh} .gate__body .pane__in{ min-height:44svh;padding:26px 20px 24px;display:flex;flex-direction:column;justify-content:flex-end; } .gate__body .pane__chips{ position:absolute;top:20px;right:16px;width:min(50%,210px);max-height:none;margin:0; display:flex;justify-content:flex-end;align-content:flex-start;gap:5px;overflow:visible; } .gate__body .pane__chips li{ padding:4px 7px;border-color:rgba(255,255,255,.3);background:rgba(5,14,21,.5); font-size:9px;line-height:1.25;white-space:nowrap;backdrop-filter:blur(5px); } .gate__body .pane__in::before{margin-bottom:12px} .gate__body .pane__en{margin-top:0;font-size:10px} .gate__body .pane__ko{font-size:34px} .gate__body .pane__desc{max-width:92%;margin-top:10px;font-size:13px;line-height:1.55} .gate__body .pane__go{margin-top:15px;font-size:13px} .gate__body .pane__go i{width:36px;height:36px;animation:mobile-card-arrow 2.4s ease-in-out infinite} .gate__body .pane::after{transform:scaleX(1);animation:mobile-card-line 2.8s ease-in-out infinite} .gate__body .pane:active .pane__bg{transform:scale(1.025)} } @keyframes mobile-card-arrow{ 0%,58%,100%{transform:translateX(0);box-shadow:0 0 0 0 rgba(255,255,255,0)} 72%{transform:translateX(5px);box-shadow:0 0 0 5px rgba(255,255,255,.08)} 84%{transform:translateX(0)} } @keyframes mobile-card-line{0%,100%{opacity:.48}50%{opacity:1}} @media(prefers-reduced-motion:reduce){ .gate__body .pane__go i,.gate__body .pane::after{animation:none} }