/* 공개 사이트 메인(E안) — 시안 parts/variant-e.html에서 이식 (2026-11-02) */ /* body#variant-e 범위. 메인 페이지는 common.css를 쓰지 않는다 */ /* ===== 셸: 최소 리셋 ===== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{margin:0;background:#fff} :root{--sinosys-logo:url("/img/logo.png");--sinosys-logo-dk:url("/img/logo-dk.png")} /* ===== E안 · 시네마틱 히어로(HD현대로보틱스 레이아웃 레퍼런스) — 모든 선택자 #variant-e 범위 ===== */ #variant-e{ --e-black:#0B0B0C;--e-ink:#111213;--e-text:#212222;--e-sub:#555758;--e-mute:#666666;--e-line:#E4E4E4;--e-bg2:#F4F4F3; --e-red:#8C0A1B;--e-red-h:#6E0815;--e-dark:#141517;--e-dsub:#C4C6C9;--e-focus:#212222; --font-head:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif; --font-body:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif; --hdr:96px;--gut:24px;--r-card:20px;--r-sm:12px; position:relative;overflow-x:clip;background:#fff;color:var(--e-text); font-family:var(--font-body);font-size:17px;line-height:1.65;word-break:keep-all;line-break:strict; -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%; } #variant-e *,#variant-e *::before,#variant-e *::after{box-sizing:border-box} #variant-e h1,#variant-e h2,#variant-e h3,#variant-e p,#variant-e ul,#variant-e ol,#variant-e dl,#variant-e dd{margin:0} #variant-e ul,#variant-e ol{list-style:none;padding:0} /* 초기화는 :where로 우선순위를 낮춘다 (공통 파일 chatbot.css의 .e-cbot-btn 등 클래스 규칙이 메인에서도 적용되게) */ :where(#variant-e) a{color:inherit;text-decoration:none} :where(#variant-e) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit} :where(#variant-e) button:disabled{cursor:default} #variant-e svg{display:block} #variant-e [hidden]{display:none!important} #variant-e :focus-visible{outline:2px solid var(--e-focus);outline-offset:3px} #variant-e [tabindex="-1"]:focus{outline:none} #variant-e [id]{scroll-margin-top:88px} #variant-e .e-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} #variant-e .e-wrap{max-width:1173px;margin:0 auto;padding:0 var(--gut)} #variant-e .e-ln{display:block} #variant-e .e-dk{--e-focus:#fff} #variant-e .e-skip{position:fixed;top:8px;left:8px;z-index:1000;background:#fff;color:#212222;padding:10px 16px;border-radius:8px;font-weight:700;transform:translateY(-160%);--e-focus:#212222} #variant-e .e-skip:focus{transform:none} /* ---- 버튼 · 링크 · 라벨 ---- */ #variant-e .e-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;border-radius:999px;font-family:var(--font-head);font-size:17px;font-weight:700;line-height:1.2;white-space:nowrap;transition:background-color .18s,color .18s,border-color .18s} #variant-e .e-btn svg{width:18px;height:18px;flex:none} #variant-e .e-btn--red{background:var(--e-red);color:#fff;border:1px solid var(--e-red)} #variant-e .e-btn--red:hover{background:var(--e-red-h);border-color:var(--e-red-h)} #variant-e .e-dk .e-btn--red,#variant-e .e-hero .e-btn--red{border-color:#fff} #variant-e .e-btn--line{border:1.5px solid #fff;color:#fff;background:rgba(0,0,0,.08)} #variant-e .e-btn--line:hover{background:rgba(255,255,255,.14)} #variant-e .e-btn--ghost{border:1.5px solid #212222;color:#212222;background:#fff} #variant-e .e-btn--ghost:hover{background:#F2F2F2} #variant-e .e-btn--sm{min-height:44px;padding:0 20px;font-size:15px} #variant-e .e-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-family:var(--font-head);font-weight:700;font-size:16px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px} #variant-e .e-link svg{width:18px;height:18px;transition:transform .18s} #variant-e .e-link:hover svg{transform:translateX(3px)} #variant-e .e-label{display:block;font-family:var(--font-head);font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--e-red)} #variant-e .e-dk .e-label{color:rgba(255,255,255,.78)} #variant-e .e-h2{margin-top:14px;font-family:var(--font-head);font-weight:800;font-size:clamp(32px,3.6vw,52px);line-height:1.22;letter-spacing:-.045em} #variant-e .e-sub{margin-top:22px;max-width:640px;font-size:clamp(17px,1.5vw,22px);line-height:1.55;color:var(--e-sub);letter-spacing:-.02em} #variant-e .e-dk .e-sub{color:var(--e-dsub)} #variant-e .e-sec{padding:140px 0} #variant-e .e-round{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;border:1.5px solid #D0D0D0;background:#fff;color:#212222;transition:border-color .18s,background-color .18s,opacity .18s} #variant-e .e-round svg{width:22px;height:22px} #variant-e .e-round:hover:not(:disabled){border-color:#212222} #variant-e .e-round:disabled{opacity:.35} #variant-e .e-dk .e-round{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)} #variant-e .e-dk .e-round:hover{background:rgba(255,255,255,.12);border-color:#fff} #variant-e .e-dots{display:flex;align-items:center;justify-content:center;gap:2px} #variant-e .e-dot{position:relative;width:24px;height:44px} #variant-e .e-dot::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:8px;background:#8A8A8A;transition:width .25s,margin .25s,background-color .25s} #variant-e .e-dot[aria-current="true"]{width:44px} #variant-e .e-dot[aria-current="true"]::before{width:32px;margin-left:-16px;background:#212222} #variant-e .e-dk .e-dot::before{background:rgba(255,255,255,.55)} #variant-e .e-dk .e-dot[aria-current="true"]::before{background:#fff} #variant-e .e-rv{transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s} #variant-e.e-js .e-rv:not(.is-in){transform:translateY(28px);opacity:.4} /* ---- 헤더 ---- */ #variant-e .e-header{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--hdr);color:#fff;background:transparent;transition:background-color .25s,color .25s,height .25s,box-shadow .25s;--e-focus:#fff} #variant-e .e-header.is-solid,#variant-e .e-header.is-menu{background:#fff;color:#212222;box-shadow:0 1px 0 #E4E4E4;--e-focus:#212222} #variant-e .e-header.is-solid{--hdr:72px} #variant-e .e-bar{position:relative;height:100%;max-width:none;padding:0 40px;display:flex;align-items:center;gap:24px} #variant-e .e-logo{display:inline-flex;align-items:center;min-height:44px;flex:none} #variant-e .e-logo-img{display:block;height:40px;aspect-ratio:4.98/1;background:var(--sinosys-logo-dk) left center/contain no-repeat} #variant-e .is-solid .e-logo-img,#variant-e .is-menu .e-logo-img{background-image:var(--sinosys-logo)} #variant-e .e-nav{flex:1;display:flex;justify-content:center} #variant-e .e-nav-list{display:flex;gap:8px} #variant-e .e-nav-btn{position:relative;display:inline-flex;align-items:center;height:48px;padding:0 20px;font-family:var(--font-head);font-size:18px;font-weight:700;letter-spacing:-.01em;transition:color .2s} #variant-e .e-nav-btn[aria-expanded="true"]{color:var(--e-red)} #variant-e .e-header:not(.is-menu):not(.is-solid) .e-nav-btn[aria-expanded="true"]{color:#fff} #variant-e .e-hdr-r{display:flex;align-items:center;gap:16px;flex:none} #variant-e .e-hdr-tel{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-family:var(--font-head);font-size:15px;font-weight:600} #variant-e .e-hdr-tel svg{width:18px;height:18px} #variant-e .e-hdr-cta{min-height:44px;padding:0 22px;font-size:15px;border-color:#fff} #variant-e .is-solid .e-hdr-cta,#variant-e .is-menu .e-hdr-cta{border-color:var(--e-red)} #variant-e .e-m-acts{display:none;margin-left:auto;gap:8px} #variant-e .e-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1.5px solid currentColor} #variant-e .e-icon-btn svg{width:22px;height:22px} #variant-e .e-icon-btn--plain{border-color:transparent} /* 메가메뉴: 중앙 흰 라운드 패널 */ #variant-e .e-mega{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:min(1200px,calc(100% - 48px));background:#fff;color:#212222;border-radius:0 0 24px 24px;box-shadow:0 30px 60px rgba(0,0,0,.22);--e-focus:#212222} /* 열 위치·너비는 JS(GNB 버튼 위치 측정)가 지정 */ #variant-e .e-mega-grid{display:flex;align-items:flex-start;gap:24px 0;padding:40px 48px 48px} #variant-e .e-mega-col{flex:none;min-width:0;padding-right:12px;word-break:keep-all} #variant-e .e-mega-h{display:block;font-family:var(--font-head);font-size:17px;font-weight:800;margin-bottom:18px} #variant-e .e-mega-col.is-cur .e-mega-h{color:var(--e-red)} #variant-e .e-mega-col a{display:block;padding:6px 0;min-height:44px} #variant-e .e-mega-col a b{display:block;font-size:15px;font-weight:600;line-height:1.4;color:#212222} #variant-e .e-mega-col a:hover b{text-decoration:underline;text-underline-offset:4px} #variant-e .e-mega-col a small{display:block;font-size:14px;line-height:1.45;color:#666;margin-top:2px} #variant-e .e-mega-card{flex:1 1 260px;min-width:240px;margin-left:24px;align-self:stretch;background:var(--e-dark);color:#fff;border-radius:16px;padding:26px;--e-focus:#fff} #variant-e .e-mega-card strong{display:block;font-family:var(--font-head);font-size:19px;line-height:1.35;margin-bottom:18px} #variant-e .e-mega-card .e-btn{width:100%;margin-bottom:16px;border-color:#fff} #variant-e .e-mega-card p{font-size:14px;line-height:1.6;color:var(--e-dsub)} /* 1280 이상은 열이 GNB 바로 아래 정렬 → 열 제목은 화면에서만 숨기고(스크린리더용 유지) 현재 열은 위쪽 붉은 선으로 표시 */ @media (min-width:1280px){ #variant-e .e-mega-col{position:relative} #variant-e .e-mega-h{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} #variant-e .e-mega-col.is-cur::before{content:"";position:absolute;left:0;top:-14px;width:28px;height:2px;background:var(--e-red)} } /* 드로어 */ #variant-e .e-drawer{position:fixed;inset:0;z-index:950;background:#fff;color:#212222;display:flex;flex-direction:column;--e-focus:#212222} #variant-e .e-dr-head{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 16px;border-bottom:1px solid #E4E4E4;flex:none} #variant-e .e-dr-head .e-logo-img{background-image:var(--sinosys-logo);height:30px} #variant-e .e-dr-body{flex:1;overflow-y:auto;padding:8px 16px 24px} #variant-e .e-dr-item{border-bottom:1px solid #E4E4E4} #variant-e .e-dr-btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;font-family:var(--font-head);font-size:18px;font-weight:700} #variant-e .e-dr-btn svg{width:20px;height:20px;transition:transform .2s} #variant-e .e-dr-btn[aria-expanded="true"] svg{transform:rotate(180deg)} #variant-e .e-dr-sub{padding:0 0 12px 4px} #variant-e .e-dr-sub a{display:flex;align-items:center;min-height:44px;font-size:16px;color:#333} #variant-e .e-dr-foot{flex:none;display:grid;gap:8px;padding:12px 16px 16px;border-top:1px solid #E4E4E4} #variant-e .e-dr-foot .e-btn{min-height:52px;width:100%;border-radius:12px} /* ---- S1 시네마틱 히어로 ---- */ #variant-e .e-hero{position:relative;display:flex;flex-direction:column;min-height:max(640px,100vh);min-height:max(640px,100svh);background:radial-gradient(ellipse at 62% 42%,#1d232c 0%,#0b0d10 55%,#050607 100%);color:#fff;overflow:hidden;isolation:isolate;--e-focus:#fff} #variant-e .e-media{position:absolute;inset:0;z-index:-1;pointer-events:none} #variant-e .e-poster{position:absolute;inset:0;width:100%;height:100%;transition:opacity 1.2s} #variant-e .e-stage{position:absolute;inset:0} #variant-e .e-stage canvas{display:block;width:100%!important;height:100%!important} #variant-e .e-hero.is-live .e-poster{opacity:0} #variant-e .e-cut{position:absolute;inset:0;background:#000;opacity:0} #variant-e .e-vig{position:absolute;inset:0;background:radial-gradient(ellipse 85% 80% at 55% 45%,transparent 50%,rgba(0,0,0,.72) 100%)} #variant-e .e-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 200px),linear-gradient(20deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 32%,rgba(0,0,0,0) 62%)} #variant-e .e-grain{position:absolute;inset:-60%;opacity:.085;background-image:url("data:image/svg+xml;utf8,");animation:ve-grain .9s steps(6) infinite} @keyframes ve-grain{0%{transform:translate(0,0)}17%{transform:translate(-4%,3%)}33%{transform:translate(3%,-5%)}50%{transform:translate(-6%,-2%)}67%{transform:translate(5%,4%)}83%{transform:translate(-2%,6%)}100%{transform:translate(0,0)}} #variant-e .e-hero.is-static .e-grain,#variant-e .e-hero.is-paused .e-grain{animation-play-state:paused} #variant-e .e-hero-body{flex:1;display:flex;align-items:flex-end;width:100%;padding-top:calc(var(--hdr) + 40px);padding-bottom:96px} #variant-e .e-hero-copy{padding-left:clamp(0px,6vw,110px);max-width:100%} #variant-e .e-kicker{display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:rgba(255,255,255,.88)} #variant-e .e-kicker::before{content:"";width:28px;height:1.5px;background:#fff} #variant-e .e-eyebrow{margin-top:18px;font-family:var(--font-head);font-size:clamp(14px,1.3vw,18px);font-weight:500;line-height:1.3;letter-spacing:.12em;text-transform:uppercase} #variant-e .e-h1{margin-top:22px;font-family:var(--font-head);font-weight:700;font-size:clamp(34px,min(4.4vw,7.4vh),66px);line-height:1.24;letter-spacing:-.035em} #variant-e .e-h1 strong{font-weight:900} #variant-e .e-hero-sub{margin-top:20px;font-size:clamp(15px,1.3vw,19px);line-height:1.6;color:rgba(255,255,255,.86);max-width:620px} #variant-e .e-hero-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:36px} #variant-e .e-play{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;color:#fff;margin-right:4px;transition:background-color .18s} #variant-e .e-play:hover{background:rgba(255,255,255,.12)} #variant-e .e-play svg{width:18px;height:18px} #variant-e .e-play .e-i-play,#variant-e .e-play[aria-pressed="true"] .e-i-pause{display:none} #variant-e .e-play[aria-pressed="true"] .e-i-play{display:block} #variant-e .e-hero.is-static .e-play,#variant-e .e-hero.is-static .e-tc,#variant-e .e-hero.is-static .e-prog{display:none} #variant-e .e-quick{position:relative;z-index:2;padding:0 0 24px} #variant-e .e-prog{position:relative;height:2px;background:rgba(255,255,255,.2);margin-bottom:22px} #variant-e .e-prog-bar{position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(0)} #variant-e .e-tc{position:absolute;right:0;bottom:calc(100% + 12px);display:flex;gap:16px;font-family:var(--font-head);font-size:12px;font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums;white-space:nowrap} #variant-e .e-tc i{font-style:normal;display:inline-flex;align-items:center;gap:8px} #variant-e .e-tc i::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:ve-blink 1.2s steps(2) infinite} #variant-e .e-hero.is-paused .e-tc i::before{animation:none;opacity:.5} @keyframes ve-blink{50%{opacity:.25}} #variant-e .e-quick .e-wrap{position:relative} #variant-e .e-scroll{position:absolute;left:50%;bottom:calc(100% + 18px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;min-width:44px;min-height:44px;font-size:12px;font-weight:600;letter-spacing:.22em;color:rgba(255,255,255,.82)} #variant-e .e-scroll span{display:block;width:1px;height:26px;background:linear-gradient(#fff,rgba(255,255,255,0));animation:ve-scroll 2s ease-in-out infinite} @keyframes ve-scroll{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} #variant-e .e-qlist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} #variant-e .e-qcard{position:relative;display:flex;flex-direction:column;height:100%;min-height:104px;padding:18px 52px 18px 22px;border-radius:14px;background:rgba(16,17,20,.62);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background-color .2s,border-color .2s} #variant-e .e-qcard:hover{background:rgba(40,42,46,.78);border-color:rgba(255,255,255,.4)} #variant-e .e-q-l{font-size:13px;font-weight:600;color:#C9CBCE;letter-spacing:.02em} #variant-e .e-q-t{margin-top:4px;font-family:var(--font-head);font-size:19px;font-weight:800;line-height:1.3;letter-spacing:-.02em} #variant-e .e-q-d{margin-top:4px;font-size:14px;line-height:1.45;color:#C9CBCE} #variant-e .e-qcard svg{position:absolute;right:18px;bottom:18px;width:22px;height:22px} /* ---- S2 신뢰 띠 ---- */ #variant-e .e-trust{padding:64px 0 72px;border-bottom:1px solid var(--e-line)} #variant-e .e-trust-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px} #variant-e .e-trust h2{font-family:var(--font-head);font-size:clamp(22px,2vw,28px);font-weight:800;letter-spacing:-.03em;line-height:1.3} #variant-e .e-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} #variant-e .e-badge{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:4px 14px;border-radius:999px;background:var(--e-bg2);font-size:14px;font-weight:600;line-height:1.4} #variant-e .e-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--e-red);flex:none} /* 고객사 한 줄 띠: 같은 목록 2벌을 -50%까지 옮겨 끊김 없이 반복. 양 끝은 흐리게 (마우스 오버 효과 없음) */ #variant-e .e-marq{margin-top:36px;overflow:hidden;border-top:1px solid var(--e-line);border-bottom:1px solid var(--e-line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} #variant-e .e-marq-track{display:flex;width:max-content;animation:ve-marq 40s linear infinite} @keyframes ve-marq{to{transform:translateX(-50%)}} #variant-e .e-logos{display:flex;flex:none} #variant-e .e-logos li{position:relative;display:flex;align-items:center;min-height:76px;padding:0 44px;font-family:var(--font-head);font-size:16px;font-weight:800;letter-spacing:-.01em;color:#666;white-space:nowrap} #variant-e .e-logos li::after{content:"";position:absolute;right:0;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#C9C9C9} /* ---- S3 SOLUTIONS 캐러셀 ---- */ #variant-e .e-car-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px} #variant-e .e-car-acts{display:flex;align-items:center;gap:12px;margin-top:36px} #variant-e .e-scard{position:relative;display:flex;flex-direction:column;height:100%;min-height:500px;border-radius:var(--r-card);overflow:hidden;background:#121417;color:#fff;--e-focus:#fff;isolation:isolate} #variant-e .e-scard:focus-visible{outline:3px solid #212222;outline-offset:-3px;box-shadow:inset 0 0 0 5px #fff} #variant-e .e-scard-art{position:relative;height:250px;flex:none;overflow:hidden} #variant-e .e-scard-art svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.7,.2,1)} #variant-e .e-scard:hover .e-scard-art svg{transform:scale(1.05)} #variant-e .e-scard-body{display:flex;flex-direction:column;flex:1;padding:26px 30px 28px;background:#121417} #variant-e .e-scard-k{font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.16em;color:#C9CBCE} #variant-e .e-scard h3{margin-top:8px;font-family:var(--font-head);font-size:24px;font-weight:800;line-height:1.3;letter-spacing:-.03em} #variant-e .e-scard p{margin-top:10px;font-size:15px;line-height:1.6;color:#C9CBCE} #variant-e .e-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px} #variant-e .e-chips li{font-size:13px;line-height:1.3;padding:5px 10px;border:1px solid rgba(255,255,255,.32);border-radius:999px;color:#E6E7E9} #variant-e .e-scard-more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:20px;font-family:var(--font-head);font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:5px} #variant-e .e-scard-more svg{width:18px;height:18px;transition:transform .18s} #variant-e .e-scard:hover .e-scard-more svg{transform:translateX(3px)} /* 솔루션 7종: 기본은 격자(모두 펼침), 넓은 데스크톱은 Why Sinosys 같은 한 줄 펼침 카드 */ #variant-e .e-sols{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:56px} #variant-e .e-sol .e-scard{min-height:0;height:100%} #variant-e .e-sol .e-scard-art{height:200px} #variant-e .e-sol-d{display:flex;flex-direction:column;flex:1} #variant-e .e-sol-s{display:none} @media (hover:hover) and (min-width:1200px){ #variant-e .e-sols{display:flex;gap:12px;height:520px} #variant-e .e-sol{flex:1 1 0;min-width:0;transition:flex-grow .7s cubic-bezier(.2,.7,.2,1)} #variant-e .e-sol .e-scard-art{height:210px} #variant-e .e-sol .e-scard-body{padding:24px 22px 26px} #variant-e .e-sol .e-scard-k{font-size:22px;font-weight:900;letter-spacing:.02em;color:#fff} /* 접힌 카드에서 글이 줄바꿈되며 흔들리지 않게 펼친 폭으로 고정하고 숨긴다 */ #variant-e .e-sol-d{width:336px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s} #variant-e .e-sol:first-child,#variant-e .e-sols .e-sol:hover,#variant-e .e-sols .e-sol:focus-within{flex-grow:3.4} #variant-e .e-sols:hover .e-sol:first-child:not(:hover),#variant-e .e-sols:focus-within .e-sol:first-child:not(:focus-within){flex-grow:1} /* 접힌 카드는 영문 약어 아래 짧은 한글 이름. 펼치면 제목이 대신한다 */ #variant-e .e-sol-s{display:block;margin-top:8px;font-size:15px;line-height:1.4;color:#C9CBCE;word-break:keep-all} #variant-e .e-sols:not(:hover):not(:focus-within) .e-sol:first-child .e-sol-s,#variant-e .e-sol:hover .e-sol-s,#variant-e .e-sol:focus-within .e-sol-s{display:none} #variant-e .e-sols:not(:hover):not(:focus-within) .e-sol:first-child .e-sol-d,#variant-e .e-sol:hover .e-sol-d,#variant-e .e-sol:focus-within .e-sol-d{opacity:1;visibility:visible;transition-delay:.25s} } /* ---- S4 OUR PRODUCTS 밴드 ---- */ #variant-e .e-prod{position:relative;background:#0E0F11;color:#fff;overflow:hidden;isolation:isolate} #variant-e .e-prod-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 60% 70% at 78% 60%,#252b33 0%,#0E0F11 70%)} #variant-e .e-prod-art{position:absolute;right:max(-60px,calc(50% - 760px));bottom:0;width:min(780px,62%);height:100%;opacity:0;transition:opacity .8s,transform 1s cubic-bezier(.2,.7,.2,1);transform:translateX(30px)} #variant-e .e-prod-art.is-on{opacity:1;transform:none} #variant-e .e-prod-art svg{width:100%;height:100%} #variant-e .e-prod-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding:132px var(--gut) 120px;min-height:680px} #variant-e .e-prod-l .e-h2{font-size:clamp(32px,3.4vw,50px)} #variant-e .e-prod-l .e-sub{font-size:17px;max-width:500px} #variant-e .e-prod-alt{margin-top:14px;font-size:15px;color:#BDBFC3} #variant-e .e-prod-nav{display:flex;align-items:center;gap:12px;margin-top:40px} #variant-e .e-prod-count{margin-left:12px;font-family:var(--font-head);font-size:15px;font-weight:600;letter-spacing:.1em;color:#D7D9DC;font-variant-numeric:tabular-nums} #variant-e .e-prod-r{align-self:center;padding:36px;border-radius:var(--r-card);background:rgba(14,15,17,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)} #variant-e .e-pslide h3{font-family:var(--font-head);font-size:clamp(28px,2.8vw,40px);font-weight:800;line-height:1.25;letter-spacing:-.035em} #variant-e .e-pslide p{margin-top:16px;font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:#E0E1E3} #variant-e .e-pslide .e-link{margin-top:20px;color:#fff} #variant-e .e-prod-cta{margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)} #variant-e .e-prod .e-dots{position:absolute;right:var(--gut);bottom:40px} @media (prefers-reduced-motion:no-preference){#variant-e .e-pslide:not([hidden]){animation:ve-in .6s cubic-bezier(.2,.7,.2,1)}} @keyframes ve-in{from{opacity:.3;transform:translateY(14px)}to{opacity:1;transform:none}} /* ---- S5 WHY SINOSYS ---- */ #variant-e .e-why-row{display:flex;gap:16px;margin-top:64px;height:420px} #variant-e .e-wcard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;flex:1 1 0;min-width:0;padding:40px;border-radius:var(--r-card);overflow:hidden;color:#fff;isolation:isolate;transition:flex-grow .7s cubic-bezier(.2,.7,.2,1)} #variant-e .e-wcard:nth-child(1){flex-grow:2;background:#15181C} #variant-e .e-wcard:nth-child(2){flex-grow:1;background:#1A1314} #variant-e .e-wcard:nth-child(3){flex-grow:1.5;background:#11161D} #variant-e .e-wcard>svg{position:absolute;inset:0;width:100%;height:100%;z-index:-1} #variant-e .e-wcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 60%)} #variant-e .e-wcard b{display:block;font-family:var(--font-head);font-size:clamp(30px,2.9vw,44px);font-weight:900;line-height:1.1;letter-spacing:-.03em} #variant-e .e-wcard h3{margin-top:14px;font-family:var(--font-head);font-size:19px;font-weight:700;line-height:1.4} #variant-e .e-wcard p{margin-top:8px;font-size:15px;line-height:1.6;color:#D2D4D7;max-width:420px} @media (hover:hover) and (min-width:1024px){ #variant-e .e-why-row:hover .e-wcard{flex-grow:1} #variant-e .e-why-row .e-wcard:hover{flex-grow:2.2} } /* ---- S6 정부지원사업 다크 배너 ---- */ #variant-e .e-gov{position:relative;background:#0B0B0C;color:#fff;overflow:hidden;isolation:isolate} #variant-e .e-gov::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 50% 60% at 22% 0%,rgba(255,255,255,.16),rgba(255,255,255,0) 70%),radial-gradient(ellipse 40% 50% at 85% 100%,rgba(255,255,255,.05),rgba(255,255,255,0) 70%)} #variant-e .e-gov-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding:150px var(--gut)} #variant-e .e-gov .e-h2{font-size:clamp(36px,4.4vw,64px);line-height:1.16} #variant-e .e-gchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px} #variant-e .e-gchips a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid rgba(255,255,255,.5);border-radius:999px;font-size:15px;font-weight:600;transition:background-color .18s,border-color .18s} #variant-e .e-gchips a:hover{background:rgba(255,255,255,.12);border-color:#fff} #variant-e .e-gov-cta{margin-top:36px} #variant-e .e-books{position:relative;height:440px;perspective:1600px} #variant-e .e-book{position:absolute;width:62%;aspect-ratio:1.38/1;border-radius:3px 6px 6px 3px;background:linear-gradient(135deg,#1C1F24,#0D0F12);box-shadow:-2px 0 0 #2A2D33,28px 40px 60px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06);overflow:hidden;padding:7% 8%;transform-style:preserve-3d} #variant-e .e-book--a{left:4%;top:4%;transform:rotateX(38deg) rotateZ(-14deg)} #variant-e .e-book--b{left:30%;top:24%;transform:rotateX(38deg) rotateZ(-14deg) translateZ(30px)} #variant-e .e-book::before{content:"";position:absolute;right:-8%;top:-10%;width:42%;height:140%;background:linear-gradient(90deg,#8C0A1B,#B0102A);transform:skewX(-38deg);opacity:.95} #variant-e .e-book::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 40%)} #variant-e .e-book i{position:relative;display:block;font-style:normal;font-family:var(--font-head);font-weight:900;letter-spacing:.06em;font-size:clamp(12px,1.1vw,16px);color:#fff} #variant-e .e-book em{position:relative;display:block;margin-top:10%;font-style:normal;font-family:var(--font-head);font-weight:800;line-height:1.15;font-size:clamp(14px,1.6vw,24px);color:#fff;max-width:62%} #variant-e .e-book small{position:absolute;left:8%;bottom:9%;font-size:clamp(8px,.7vw,10px);letter-spacing:.14em;color:#BDBFC3} #variant-e .e-book svg{position:absolute;left:8%;bottom:22%;width:46%;height:18%;opacity:.5} /* ---- S7 NEWS = 최근 프로젝트 ---- */ /* 구축 분야 나열 (누를 수 없는 배지) */ #variant-e .e-pfields{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px} #variant-e .e-pfields li{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 18px;border-radius:999px;border:1px solid #D0D0D0;background:#fff;font-family:var(--font-head);font-size:15px;font-weight:700;color:#212222} #variant-e .e-pfields li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--e-red)} #variant-e .e-proj{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:40px;align-items:start} #variant-e .e-pbig{display:block;border:1px solid var(--e-line);border-radius:var(--r-card);overflow:hidden;transition:box-shadow .2s} #variant-e .e-pbig:hover{box-shadow:0 18px 40px rgba(0,0,0,.08)} #variant-e .e-thumb{position:relative;overflow:hidden;background:#15171A} #variant-e .e-thumb svg,#variant-e .e-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s} /* 썸네일 원본 비율 유지: 앞 이미지는 잘림 없이(contain), 남는 공간은 같은 이미지를 흐리게 확대해 채운다 (_ThumbFill) */ #variant-e .e-thumb img.e-tbg{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(20px) brightness(.82) saturate(1.1);background:none;pointer-events:none} #variant-e .e-thumb img.e-tfg{position:relative;object-fit:contain;background:none} #variant-e .e-pbig .e-thumb{aspect-ratio:16/9.4} #variant-e .e-pbig:hover .e-thumb>*,#variant-e .e-pitem a:hover .e-thumb>*{transform:scale(1.04)} #variant-e .e-pbig-b{display:block;padding:30px 32px 32px} #variant-e .e-pitem-b{display:block;min-width:0} #variant-e .e-pst{display:inline-flex;gap:10px;font-size:14px;font-weight:700;color:var(--e-red)} #variant-e .e-pst span{color:#666;font-weight:600} #variant-e .e-pbig h3{margin-top:10px;font-family:var(--font-head);font-size:clamp(20px,1.8vw,24px);font-weight:700;line-height:1.45;letter-spacing:-.025em} #variant-e .e-pdate{display:block;margin-top:12px;font-size:15px;color:#666;font-variant-numeric:tabular-nums} #variant-e .e-plist li{border-bottom:1px solid var(--e-line)} #variant-e .e-plist li:first-child a{padding-top:0} #variant-e .e-pitem a{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:center;padding:22px 0} #variant-e .e-pitem .e-thumb{aspect-ratio:5/3;border-radius:var(--r-sm)} #variant-e .e-pitem h3{margin-top:6px;font-family:var(--font-head);font-size:18px;font-weight:700;line-height:1.45;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #variant-e .e-pitem a:hover h3,#variant-e .e-pbig:hover h3{text-decoration:underline;text-underline-offset:4px} #variant-e .e-pitem .e-pdate{margin-top:6px;font-size:14px} #variant-e .e-proj-more{display:flex;justify-content:flex-end;margin-top:32px} #variant-e .e-empty{padding:40px 0;color:#666} /* ---- S8 문의 밴드 ---- */ #variant-e .e-contact{padding:0 0 96px} #variant-e .e-cbox{position:relative;border-radius:28px;background:#121315;color:#fff;padding:72px 64px 56px;overflow:hidden;isolation:isolate} #variant-e .e-cbox::before{content:"";position:absolute;right:-6%;top:-40%;width:44%;height:180%;z-index:-1;background:linear-gradient(90deg,rgba(140,10,27,0),rgba(140,10,27,.5));transform:skewX(-38deg)} #variant-e .e-cbox-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:end} #variant-e .e-cbox .e-h2{font-size:clamp(28px,3vw,44px);margin-top:0} #variant-e .e-cbox-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end} #variant-e .e-cbox-mid{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:44px;padding-top:28px;border-top:1px solid rgba(255,255,255,.16)} #variant-e .e-cbox-mid>span{font-size:15px;font-weight:600;color:#D7D9DC} #variant-e .e-cchips{display:flex;flex-wrap:wrap;gap:8px} #variant-e .e-cchips a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.45);font-size:15px;font-weight:600} #variant-e .e-cchips a:hover{background:rgba(255,255,255,.12)} #variant-e .e-cinfo{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:20px;font-size:15px;color:#D7D9DC} #variant-e .e-cinfo a{color:#fff;text-decoration:underline;text-underline-offset:4px} /* ---- S9 패밀리 사이트 (보조 영역: 외곽선 버튼만, 빨간 채움 버튼은 위 견적 문의 하나) ---- */ #variant-e .e-fams{ --e-fam-ex-ov:linear-gradient(90deg,rgba(18,8,10,.94) 0%,rgba(18,8,10,.86) 48%,rgba(70,10,20,.4) 100%); --e-fam-ex-pt:#FF8A94;--e-fam-ex-txt:#E3D9DA;--e-fam-ex-badge:#FFB4BB;--e-fam-ex-badge-bg:rgba(140,10,27,.35);--e-fam-ex-badge-line:rgba(255,138,148,.6);--e-fam-ex-ink:#1A0A0D; --e-fam-oc-ov:linear-gradient(90deg,rgba(232,239,250,.97) 0%,rgba(232,239,250,.9) 50%,rgba(214,226,246,.2) 100%); --e-fam-oc-ink:#0E2350;--e-fam-oc-pt:#1D4FBF;--e-fam-oc-txt:#33415C;--e-fam-oc-badge-bg:#fff;--e-fam-oc-badge-line:#B9CDF3; --e-fam-oc-bg:#E8EFFA;--e-fam-oc-line:#CFDBEF;--e-fam-oc-shadow:0 14px 36px rgba(14,35,80,.10); --e-fam-r:var(--r-card); padding:0 0 120px } #variant-e .e-fams-head{margin-bottom:28px} #variant-e .e-fams-h2{margin-top:8px;font-family:var(--font-head);font-size:clamp(22px,2vw,28px);font-weight:800;line-height:1.3;color:var(--e-ink)} #variant-e .e-fams-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} #variant-e .e-fams-card{position:relative;display:flex;min-height:320px;border:1px solid transparent;border-radius:var(--e-fam-r);overflow:hidden;isolation:isolate} #variant-e .e-fams-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)} #variant-e .e-fams-card::before{content:"";position:absolute;inset:0;z-index:-1} #variant-e .e-fams-body{display:flex;flex-direction:column;align-items:flex-start;max-width:470px;padding:48px 48px 44px} #variant-e .e-fams-logo{display:block;width:auto;height:32px;margin-bottom:20px} #variant-e .e-fams-brand{margin-bottom:20px;font-family:var(--font-head);font-size:19px;line-height:32px} #variant-e .e-fams-badge{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:999px;border:1px solid;font-family:var(--font-head);font-size:14px;font-weight:700;letter-spacing:.04em;white-space:nowrap} #variant-e .e-fams-badge[lang="en"]{letter-spacing:.12em} #variant-e .e-fams-h3{margin-top:16px;font-family:var(--font-head);font-size:clamp(24px,2.2vw,32px);font-weight:800;line-height:1.3} #variant-e .e-fams-h3 em{font-style:normal} #variant-e .e-fams-desc{margin:14px 0 28px;font-size:16px;line-height:1.65} /* 버튼은 카드 바닥에 맞춰 두 카드의 버튼 높이를 같게 (설명 줄 수가 달라도) */ #variant-e .e-fams-btn{margin-top:auto;border:1.5px solid} #variant-e .e-fams-btn svg{transition:transform .18s} /* SINOEX: 어두운 카드 (위험지역 · 산업 안전 · 강인함) */ #variant-e .e-fams-card--ex{background:#120809;color:#fff} #variant-e .e-fams-card--ex::before{background:var(--e-fam-ex-ov)} #variant-e .e-fams-card--ex .e-fams-bg{object-position:70% 60%} #variant-e .e-fams-card--ex .e-fams-badge{color:var(--e-fam-ex-badge);background:var(--e-fam-ex-badge-bg);border-color:var(--e-fam-ex-badge-line)} #variant-e .e-fams-card--ex .e-fams-h3 em{color:var(--e-fam-ex-pt)} #variant-e .e-fams-card--ex .e-fams-desc{color:var(--e-fam-ex-txt)} #variant-e .e-fams-card--ex .e-fams-btn{border-color:#fff;color:#fff} #variant-e .e-fams-card--ex .e-fams-btn:hover{background:#fff;color:var(--e-fam-ex-ink)} /* 옥타라벨: 밝은 카드 (맞춤 제작 · 깨끗함 · 정밀함) */ /* 흰 페이지 바탕과 구분되게 연한 청색 바탕 · 테두리 · 그림자로 카드 경계를 만든다 */ #variant-e .e-fams-card--oc{--e-focus:var(--e-fam-oc-ink);background:var(--e-fam-oc-bg);color:var(--e-fam-oc-ink);border:1px solid var(--e-fam-oc-line);box-shadow:var(--e-fam-oc-shadow)} #variant-e .e-fams-card--oc::before{background:var(--e-fam-oc-ov)} #variant-e .e-fams-card--oc .e-fams-bg{object-position:center 38%} #variant-e .e-fams-card--oc .e-fams-brand b{font-weight:800} #variant-e .e-fams-card--oc .e-fams-badge{color:var(--e-fam-oc-pt);background:var(--e-fam-oc-badge-bg);border-color:var(--e-fam-oc-badge-line)} #variant-e .e-fams-card--oc .e-fams-h3 em{color:var(--e-fam-oc-pt)} #variant-e .e-fams-card--oc .e-fams-desc{color:var(--e-fam-oc-txt)} #variant-e .e-fams-card--oc .e-fams-btn{border-color:var(--e-fam-oc-ink);color:var(--e-fam-oc-ink)} #variant-e .e-fams-card--oc .e-fams-btn:hover{background:var(--e-fam-oc-ink);color:#fff} @media (hover:hover){ #variant-e .e-fams-card:hover .e-fams-bg{transform:scale(1.04)} #variant-e .e-fams-btn:hover svg{transform:translate(2px,-2px)} } /* ---- 푸터 ---- */ #variant-e .e-footer{border-top:1px solid var(--e-line);padding:64px 0 120px;font-size:14px;line-height:1.7;color:#555} #variant-e .e-f-top{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:start;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--e-line)} #variant-e .e-footer .e-logo-img{background-image:var(--sinosys-logo);height:34px} #variant-e .e-fmap{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px} #variant-e .e-fmap-h{display:block;font-family:var(--font-head);font-size:15px;font-weight:800;color:#212222;margin-bottom:10px} #variant-e .e-fmap-h a:hover{text-decoration:underline} #variant-e .e-fs-btn{display:none} #variant-e .e-fmap li a{display:inline-block;padding:3px 0;color:#555} #variant-e .e-fmap li a:hover{color:#212222;text-decoration:underline} #variant-e .e-f-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:36px} #variant-e .e-f-links{display:flex;flex-wrap:wrap;gap:4px 28px} #variant-e .e-f-links a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-head);font-size:16px;font-weight:600;color:#555} #variant-e .e-f-links a:first-child{color:#212222;font-weight:800} #variant-e .e-f-links a:hover{color:#212222;text-decoration:underline;text-underline-offset:4px} #variant-e .e-f-ext{gap:6px} #variant-e .e-f-ext svg{width:15px;height:15px} #variant-e .e-f-side{display:flex;align-items:center;gap:12px} #variant-e .e-fam{position:relative} #variant-e .e-fam-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--font-head);font-size:16px;font-weight:700;color:#212222} #variant-e .e-fam-btn i{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#212222;color:#fff;font-style:normal;transition:transform .2s} #variant-e .e-fam-btn i svg{width:14px;height:14px} #variant-e .e-fam-btn[aria-expanded="true"] i{transform:rotate(45deg)} #variant-e .e-fam-list{position:absolute;right:0;bottom:calc(100% + 8px);min-width:220px;padding:8px;background:#fff;border:1px solid #DDD;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.12);z-index:5} #variant-e .e-fam-list a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;font-weight:600;color:#212222} #variant-e .e-fam-list a:hover{background:#F2F2F2} #variant-e .e-f-info{margin-top:18px;display:grid;gap:2px} #variant-e .e-f-info p span+span::before{content:"·";margin:0 10px;color:#AAA} #variant-e .e-f-info a{color:#333;text-decoration:underline;text-underline-offset:3px} #variant-e .e-copy{margin-top:10px;color:#666} /* ---- 플로팅 ---- */ #variant-e .e-fab{position:fixed;right:16px;bottom:16px;z-index:800;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none} #variant-e .e-fab>*{pointer-events:auto} #variant-e .e-top{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#fff;color:#212222;border:1px solid #DDD;box-shadow:0 8px 24px rgba(0,0,0,.14);transition:opacity .2s,transform .2s,visibility .2s} #variant-e .e-top svg{width:22px;height:22px} #variant-e .e-float{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px 0 16px;border-radius:999px;background:var(--e-red);color:#fff;border:1px solid #fff;font-family:var(--font-head);font-weight:700;font-size:15px;box-shadow:0 10px 28px rgba(0,0,0,.28);transition:opacity .2s,transform .2s,visibility .2s,background-color .18s} #variant-e .e-float svg{width:20px;height:20px} #variant-e .e-float:hover{background:var(--e-red-h)} #variant-e .e-blog{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 14px;border-radius:999px;background:#fff;color:#212222;border:1px solid #DDD;font-family:var(--font-head);font-weight:700;font-size:15px;box-shadow:0 8px 24px rgba(0,0,0,.14);transition:background-color .2s} #variant-e .e-blog svg{width:20px;height:20px} #variant-e .e-blog:hover{background:var(--e-bg2)} #variant-e .e-top:not(.is-show),#variant-e .e-float:not(.is-show){opacity:0;visibility:hidden;transform:translateY(8px)} #variant-e .e-top:not(.is-show),#variant-e .e-float:not(.is-show){position:absolute;bottom:0;right:0} /* ---- 반응형 ---- */ @media (max-width:1279px){ #variant-e .e-hdr-tel{display:none} #variant-e .e-nav-btn{font-size:16px;padding:0 12px} #variant-e .e-bar{padding:0 24px} #variant-e .e-mega-grid{flex-wrap:wrap;padding:32px 32px 36px} #variant-e .e-mega-col{flex:1 1 0} #variant-e .e-mega-card{flex-basis:100%;margin-left:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px} #variant-e .e-mega-card strong{margin:0} #variant-e .e-mega-card .e-btn{width:auto;margin:0} } @media (max-width:1023px){ #variant-e{--hdr:60px} #variant-e .e-fams{padding-bottom:96px} #variant-e .e-fams-head{margin-bottom:24px} #variant-e .e-fams-grid{grid-template-columns:1fr} #variant-e .e-fams-card{min-height:280px} #variant-e .e-fams-body{max-width:70%;padding:40px} #variant-e .e-fams-card--ex .e-fams-bg{object-position:65% 60%} #variant-e .e-header,#variant-e .e-header.is-solid{--hdr:60px} #variant-e .e-bar{padding:0 16px} #variant-e .e-logo-img{height:30px} #variant-e .e-nav,#variant-e .e-hdr-r,#variant-e .e-mega{display:none!important} #variant-e .e-m-acts{display:flex} #variant-e .e-sec{padding:96px 0} #variant-e .e-qlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #variant-e .e-prod-in{grid-template-columns:1fr;gap:32px;padding:96px var(--gut) 112px;min-height:0} #variant-e .e-prod-art{width:90%;height:60%;opacity:0} #variant-e .e-prod-art.is-on{opacity:.55} #variant-e .e-why-row{flex-direction:column;height:auto} #variant-e .e-wcard{min-height:240px;padding:32px} #variant-e .e-gov-in{grid-template-columns:1fr;padding:104px var(--gut) 72px} #variant-e .e-books{height:340px;max-width:560px;width:100%} #variant-e .e-proj{grid-template-columns:1fr} #variant-e .e-cbox{padding:56px 40px 40px} #variant-e .e-cbox-top{grid-template-columns:1fr} #variant-e .e-cbox-btns{justify-content:flex-start} #variant-e .e-f-top{grid-template-columns:1fr} #variant-e .e-fmap{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:767px){ #variant-e{--gut:16px;font-size:16px} #variant-e .e-sec{padding:80px 0} #variant-e .e-hero-body{padding-top:calc(var(--hdr) + 24px);padding-bottom:64px} #variant-e .e-hero-copy{padding-left:0} #variant-e .e-eyebrow{margin-top:12px;font-size:13px} #variant-e .e-kicker{font-size:13px} #variant-e .e-h1{margin-top:12px;font-size:clamp(28px,8.6vw,36px);line-height:1.24} #variant-e .e-h1 .e-u{display:block} #variant-e .e-hero-sub{margin-top:12px;font-size:15px} #variant-e .e-hero-ctl{margin-top:22px;gap:8px} #variant-e .e-play{width:44px;height:44px;margin-right:0} #variant-e .e-hero-ctl .e-btn{min-height:48px;padding:0 20px;font-size:15px} #variant-e .e-quick{padding-bottom:16px} #variant-e .e-prog{margin-bottom:12px} #variant-e .e-tc{display:none} #variant-e .e-scroll{bottom:calc(100% + 6px);font-size:11px} #variant-e .e-scroll span{height:16px} #variant-e .e-qcard{min-height:76px;padding:12px 38px 12px 14px;border-radius:12px} #variant-e .e-q-l{font-size:13px} #variant-e .e-q-t{font-size:16px} #variant-e .e-q-d{display:none} #variant-e .e-qcard svg{right:12px;bottom:12px;width:18px;height:18px} #variant-e .e-trust{padding:48px 0 56px} #variant-e .e-marq{margin-top:28px} #variant-e .e-marq-track{animation-duration:30s} #variant-e .e-logos li{min-height:60px;padding:0 28px;font-size:15px} #variant-e .e-btn{min-height:48px;padding:0 22px;font-size:16px} #variant-e .e-sols{grid-template-columns:1fr;gap:12px;margin-top:36px} /* 모바일은 7개가 세로로 길어지므로 그림 · 특징 칩을 빼고 이름 · 설명 · 링크만 */ #variant-e .e-sol .e-scard-art,#variant-e .e-sol .e-chips{display:none} #variant-e .e-sol .e-scard-more{padding-top:14px} #variant-e .e-scard-body{padding:22px 22px 24px} #variant-e .e-prod-in{padding:80px var(--gut) 104px} #variant-e .e-prod-r{padding:24px} #variant-e .e-prod-art{height:46%;width:120%;right:-20%} #variant-e .e-why-row{margin-top:40px} #variant-e .e-wcard{min-height:220px;padding:28px 24px} #variant-e .e-gov-in{padding:88px var(--gut) 56px} #variant-e .e-gchips a{font-size:14px;padding:0 14px} #variant-e .e-books{height:240px} #variant-e .e-pbig-b{padding:22px 20px 24px} #variant-e .e-pitem a{grid-template-columns:110px minmax(0,1fr);gap:14px;padding:18px 0} #variant-e .e-pitem h3{font-size:16px} #variant-e .e-pitem.e-dt-only{display:none} #variant-e .e-contact{padding-bottom:56px} #variant-e .e-contact>.e-wrap{padding:0} #variant-e .e-cbox{border-radius:0;padding:56px 16px 40px} #variant-e .e-cbox-btns .e-btn{flex:1 1 100%} #variant-e .e-fams{--e-fam-r:16px;padding-bottom:64px} #variant-e .e-fams-head{margin-bottom:20px} #variant-e .e-fams-grid{gap:12px} #variant-e .e-fams-card{min-height:0} #variant-e .e-fams-body{max-width:none;padding:32px 24px 28px} #variant-e .e-fams-logo{height:28px} #variant-e .e-fams-h3{font-size:24px} #variant-e .e-fams-desc{font-size:15px} #variant-e .e-fams-card--ex .e-fams-bg{object-position:62% 65%} #variant-e .e-fams-card--ex{--e-fam-ex-ov:linear-gradient(180deg,rgba(18,8,10,.9) 0%,rgba(18,8,10,.84) 100%)} #variant-e .e-fams-card--oc .e-fams-bg{object-position:82% 40%} #variant-e .e-fams-card--oc{--e-fam-oc-ov:linear-gradient(180deg,rgba(232,239,250,.95) 0%,rgba(232,239,250,.9) 100%)} #variant-e .e-fmap{grid-template-columns:1fr;gap:0} #variant-e .e-fmap-h{display:none} #variant-e .e-fs-btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;font-family:var(--font-head);font-size:16px;font-weight:800;color:#212222;border-bottom:1px solid var(--e-line)} #variant-e .e-fs-btn svg{width:18px;height:18px;transition:transform .2s} #variant-e .e-fs-btn[aria-expanded="true"] svg{transform:rotate(180deg)} #variant-e .e-fs-col ul{display:none;padding:6px 0 10px} #variant-e .e-fs-col.is-open ul{display:block} #variant-e .e-fmap li a{display:flex;align-items:center;min-height:44px} #variant-e .e-f-info p span{display:block} #variant-e .e-f-info p span+span::before{content:none} #variant-e .e-float,#variant-e .e-blog{height:48px} #variant-e .e-top{width:48px;height:48px} } @media (prefers-reduced-motion:reduce){ #variant-e *,#variant-e *::before,#variant-e *::after{animation:none!important;transition:none!important} #variant-e.e-js .e-rv:not(.is-in){transform:none;opacity:1} /* 고객사 띠: 흐르지 않으므로 복사본을 숨기고 여러 줄로 모두 보여 준다 */ #variant-e .e-marq{-webkit-mask-image:none;mask-image:none} #variant-e .e-marq-track{width:auto} #variant-e .e-marq .e-logos{flex-wrap:wrap;justify-content:center;flex:1} #variant-e .e-marq .e-logos[aria-hidden]{display:none} }