/* ===================================================== SHINWOO — Detail Page Stylesheet ===================================================== */ /* 폰트는 각 HTML 에서 태그로 로드 (중복 @import 제거) */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --navy: #0B1C3D; --navy-mid: #142952; --navy-light: #1E3A6E; --accent: #1B4FBF; --accent-lt: #2E66D8; --gold: #C9A84C; --white: #FFFFFF; --off-white: #F7F8FA; --gray-100: #F2F4F7; --gray-200: #E8ECF2; --gray-400: #9AA3B5; --gray-600: #5A6478; --gray-300: #D1D8E5; --gray-800: #2C3347; --text: #1A2236; --font-sans: 'Inter', 'Noto Sans KR', sans-serif; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --shadow-sm: 0 2px 12px rgba(11,28,61,.06); --shadow-md: 0 6px 28px rgba(11,28,61,.10); --shadow-lg: 0 16px 56px rgba(11,28,61,.16); --max-w: 1280px; --header-h: 100px; --transition: .3s cubic-bezier(.4,0,.2,1); } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-sans); color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { text-decoration: none; color: inherit; } ul { list-style: none; } /* ── Header (shared) ── */ .header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); z-index: 1000; transition: box-shadow .3s ease, background .3s ease; } .header.scrolled { background: rgba(255,255,255,.99); box-shadow: 0 4px 24px rgba(11,28,61,.12); } .header-inner { max-width: var(--max-w); margin: 0 auto; height: 100%; padding: 0 40px; display: flex; align-items: center; gap: 48px; } .logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; padding-left: 0; margin-right: auto; } .logo img, .logo-img { height: 42px; width: auto; max-width: 220px; display: block; object-fit: contain; object-position: left center; } .logo-mark { width: 38px; height: 38px; background: var(--navy); color: var(--white); font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .06em; display: flex; align-items: center; justify-content: center; border-radius: 8px; } .logo-mark.small { width: 30px; height: 30px; font-size: 11px; border-radius: 6px; } .logo-text { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: .04em; color: var(--navy); display: flex; flex-direction: column; line-height: 1.1; } .logo-text em { font-style: normal; font-size: 10px; letter-spacing: .14em; color: var(--gray-400); font-weight: 500; } .nav { margin-left: auto; } .nav-list { display: flex; align-items: center; gap: 36px; } .nav-has-drop { position: relative; } .nav-link { font-size: 16px; font-weight: 600; color: var(--gray-600); letter-spacing: .06em; padding: 4px 0; position: relative; transition: color var(--transition); } .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--accent); transition: width var(--transition); } .nav-link:hover { color: var(--navy); } .nav-link:hover::after { width: 100%; } .nav-drop { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-6px); background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 8px 0; min-width: 220px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } /* JS로 제어 — drop-open 클래스 방식 */ .nav-has-drop.drop-open .nav-drop { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* 상위·하위 메뉴 사이 gap 브리지 (투명 영역) */ .nav-drop::before { content: ''; position: absolute; top: -12px; left: 0; width: 100%; height: 12px; } .nav-drop li a { display: block; padding: 10px 20px; font-size: 13.5px; color: var(--gray-600); font-weight: 500; transition: background var(--transition), color var(--transition); } .nav-drop li a:hover { background: var(--off-white); color: var(--navy); } .header-cta { margin-left: 24px; padding: 10px 24px; background: var(--navy); color: var(--white); font-size: 13.5px; font-weight: 600; letter-spacing: .04em; border-radius: 40px; transition: background var(--transition), transform var(--transition); } .header-cta:hover { background: var(--accent); transform: translateY(-1px); } .hamburger { display: none; } /* ── Back Button — 화면 우측 하단 고정 ── */ .back-btn { position: fixed; bottom: 40px; right: 44px; z-index: 9999; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: transparent; border: 1.5px solid #ffffff; border-radius: 50%; color: #ffffff; text-decoration: none; transition: background var(--transition), transform var(--transition); cursor: pointer; } .back-btn svg { width: 20px; height: 20px; flex-shrink: 0; stroke: #ffffff; transition: transform var(--transition); } .back-btn:hover { background: rgba(255,255,255,.15); } .back-btn:hover svg { transform: translateX(3px); } @media (max-width: 768px) { .back-btn { bottom: 24px; right: 20px; width: 42px; height: 42px; } } /* ── Page Hero ── */ .page-hero { padding-top: var(--header-h); position: relative; overflow: visible; background-color: var(--navy); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* 배경 이미지 오버레이: 어두운 그라디언트로 텍스트 가독성 확보 */ .page-hero::before { content: ''; position: absolute; inset: 0; /* 왼쪽은 더 어둡게(텍스트 영역), 오른쪽은 살짝 투명하게(비주얼 영역) */ background: linear-gradient( 105deg, rgba(8, 18, 40, 0.82) 0%, rgba(8, 18, 40, 0.70) 45%, rgba(8, 18, 40, 0.50) 100% ); z-index: 0; } .page-hero > * { position: relative; z-index: 1; } /* ── 히어로 우측 하단 뒤로가기 화살표 ── */ .hero-back-arrow { position: absolute; bottom: 32px; right: 40px; z-index: 20; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.7); background: rgba(255,255,255,0.12); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background 0.2s, border-color 0.2s, transform 0.2s; } .hero-back-arrow:hover { background: rgba(255,255,255,0.25); border-color: #ffffff; transform: translateX(3px); } .hero-back-arrow svg { display: block; } /* 각 사업영역별 배경 이미지 */ .hero-bg-scs { background-image: url('../images/hero-scs-datacenter.jpg'); } .hero-bg-cctv { background-image: url('../images/hero-ai-cctv.jpg'); } .hero-bg-building { background-image: url('../images/hero-smart-building.jpg'); } .hero-bg-construction { background-image: url('../images/hero-construction.jpg'); } .page-hero-inner { max-width: var(--max-w); margin: 0 auto; padding: 96px 40px 96px; /* 뒤로가기 버튼 높이만큼 상단 여백 추가 */ display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .page-hero-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--gray-400); font-weight: 500; margin-bottom: 20px; } .page-hero-breadcrumb a { color: rgba(255,255,255,0.6); transition: color var(--transition); } .page-hero-breadcrumb a:hover { color: #fff; } .page-hero-breadcrumb .sep { color: rgba(255,255,255,0.3); } .page-hero-label { font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 16px; color: rgba(255,255,255,0.65); } .page-hero-title { font-family: 'Noto Sans KR', sans-serif; font-size: clamp(32px, 4vw, 52px); font-weight: 700; line-height: 1.2; color: #fff; letter-spacing: -.02em; margin-bottom: 20px; text-shadow: 0 2px 16px rgba(0,0,0,0.3); } .page-hero-desc { font-size: 16px; line-height: 1.8; color: rgba(255,255,255,0.82); margin-bottom: 36px; max-width: 480px; } .page-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { padding: 7px 16px; border: 1px solid rgba(255,255,255,0.3); border-radius: 20px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.12); backdrop-filter: blur(4px); } /* Hero right visual */ .page-hero-visual { display: flex; justify-content: center; align-items: center; } .hero-visual-block { width: 100%; max-width: 460px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 8px 40px rgba(0,0,0,0.40), 0 1px 0 rgba(255,255,255,0.1) inset; backdrop-filter: blur(16px); background: rgba(10, 20, 48, 0.55); } .hero-visual-header { padding: 16px 20px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); } .dot-r { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; } .dot-y { width: 10px; height: 10px; border-radius: 50%; background: #FEBC2E; } .dot-g { width: 10px; height: 10px; border-radius: 50%; background: #28C840; } .hero-visual-title { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.55); margin-left: 8px; letter-spacing: .06em; } .hero-visual-body { padding: 32px; background: transparent; min-height: 260px; } /* ── Divider ── */ .page-divider { height: 1px; background: var(--gray-200); } /* ── Section helpers ── */ .sec { padding: 100px 0; } .sec-white { background: var(--white); } .sec-off { background: var(--off-white); } .sec-navy { background: var(--navy); } .sec-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; } .sec-label { font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .sec-label.light { color: rgba(255,255,255,.5); } .sec-title { font-family: 'Noto Sans KR', sans-serif; font-size: clamp(26px, 3vw, 40px); font-weight: 700; line-height: 1.25; color: var(--navy); letter-spacing: -.02em; margin-bottom: 16px; } .sec-title.light { color: var(--white); } .sec-sub { font-size: 16px; line-height: 1.75; color: var(--gray-600); max-width: 580px; } /* ── Service Grid ── */ .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; } .service-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 32px 28px; transition: box-shadow var(--transition), transform var(--transition); } .service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } .service-card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .service-card-icon svg { width: 24px; height: 24px; } .service-card h4 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 10px; } .service-card p { font-size: 14px; line-height: 1.7; color: var(--gray-600); } /* ── System Diagram Area ── */ .diagram-section { padding: 100px 0; } .diagram-section .sec-inner { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; } .diagram-text { padding-top: 8px; } .diagram-text .sec-title { margin-bottom: 16px; } .diagram-body { font-size: 15px; line-height: 1.85; color: var(--gray-600); margin-bottom: 28px; } .diagram-feature-list { display: flex; flex-direction: column; gap: 12px; } .diagram-feature { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--gray-600); } .diagram-feature-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* Diagram canvas placeholder */ .diagram-canvas { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); min-height: 440px; display: flex; flex-direction: column; overflow: hidden; } .diagram-canvas-header { padding: 20px 28px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; } .diagram-canvas-header .dtitle { font-size: 13.5px; font-weight: 700; color: var(--navy); letter-spacing: .04em; } .diagram-canvas-header .dbadge { padding: 4px 12px; border-radius: 20px; background: var(--off-white); font-size: 11.5px; font-weight: 600; color: var(--gray-400); } .diagram-canvas-body { flex: 1; padding: 40px; display: flex; align-items: center; justify-content: center; background: var(--off-white); position: relative; min-height: 360px; } /* Diagram node system */ .d-flow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; width: 100%; } .d-node { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: default; } .d-node-box { width: 96px; height: 80px; border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--white); letter-spacing: .02em; text-align: center; padding: 8px; border: 2px solid transparent; box-shadow: 0 4px 16px rgba(0,0,0,.1); transition: transform .25s ease, box-shadow .25s ease; } .d-node-box:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.18); } .d-node-box svg { width: 20px; height: 20px; opacity: .9; } .d-node-label { font-size: 11px; font-weight: 600; color: var(--gray-400); letter-spacing: .04em; text-align: center; } .d-arrow { color: var(--gray-300); font-size: 22px; line-height: 1; flex-shrink: 0; display: flex; align-items: center; } .d-arrow svg { width: 20px; height: 20px; color: var(--gray-400); } /* ══════════════════════════════════════════════ 통합 인프라 구성도 — 새 4단계 스텝 레이아웃 ══════════════════════════════════════════════ */ /* 섹션 배경 재정의 (navy 배경 위에 올라옴) */ .diagram-section.sec-navy { background: var(--navy); } .diagram-section.sec-navy .sec-inner { display: flex; flex-direction: column; gap: 0; } /* 섹션 헤더 */ .diag-header { text-align: center; margin-bottom: 64px; } .diag-header .sec-title { color: var(--white); margin-bottom: 16px; } .diag-intro { font-size: 15.5px; line-height: 1.85; color: rgba(255,255,255,.55); letter-spacing: .01em; } /* 4단계 스텝 컨테이너 — 가로 나열 */ .diag-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: start; gap: 0; } /* 연결 화살표 */ .diag-connector { display: flex; align-items: flex-start; padding-top: 56px; /* 스텝 헤더 높이에 맞춤 */ opacity: .4; } /* 개별 스텝 카드 */ .diag-step { display: flex; flex-direction: column; gap: 0; } /* 스텝 헤더: 번호 + 수직 선 */ .diag-step-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 20px; } .diag-step-num { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--sc, #1B4FBF); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 4px 14px; margin-bottom: 12px; } .diag-step-line { width: 2px; height: 32px; background: var(--lc, rgba(255,255,255,.15)); margin-left: 22px; border-radius: 2px; } /* 스텝 바디 */ .diag-step-body { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 12px; transition: background .25s, border-color .25s, transform .25s; } .diag-step-body:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); transform: translateY(-4px); } /* 아이콘 박스 */ .diag-step-icon { width: 52px; height: 52px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; flex-shrink: 0; } /* 스텝 라벨 (영문 소분류) */ .diag-step-tag { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } /* 스텝 제목 */ .diag-step-title { font-family: 'Noto Sans KR', sans-serif; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--white); } /* 스텝 설명 */ .diag-step-desc { font-size: 13.5px; line-height: 1.8; color: rgba(255,255,255,.5); } /* 키워드 태그 */ .diag-step-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .diag-step-tags li { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 3px 10px; letter-spacing: .02em; } /* ── 해시태그 (구성도 스텝 하단) ── */ .diag-hashtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); } .diag-hashtags span { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: rgba(255,255,255,.28); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 3px 10px; transition: color .25s, border-color .25s; } .diag-step:hover .diag-hashtags span { color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.18); } /* ── 3열 전용 레이아웃 (diag-steps--3col) ── */ .diag-steps--3col { grid-template-columns: 1fr auto 1fr auto 1fr; } /* ── 4공종 배지 바 (digital.html 하단) ── */ .diag-trade-bar { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 52px; padding: 20px 40px; background: rgba(255,255,255,.04); border: 1px solid rgba(200,212,232,.12); border-radius: 12px; } .diag-trade-item { display: flex; align-items: center; gap: 10px; padding: 0 40px; font-family: 'Noto Sans KR', sans-serif; font-size: 14px; font-weight: 700; color: rgba(200,214,232,.7); letter-spacing: .04em; } .diag-trade-divider { width: 1px; height: 28px; background: rgba(200,214,232,.15); flex-shrink: 0; } @media (max-width: 768px) { .diag-trade-bar { flex-wrap: wrap; gap: 16px; padding: 20px 24px; } .diag-trade-item { padding: 0 16px; } .diag-trade-divider { display: none; } } /* ── 반응형: 4열(기본) → 2열(태블릿) → 1열(모바일) ── */ @media (max-width: 1100px) { /* 4단계(energy) */ .diag-steps:not(.diag-steps--3col) { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto; gap: 0 24px; } .diag-steps:not(.diag-steps--3col) .diag-connector:nth-child(2), .diag-steps:not(.diag-steps--3col) .diag-connector:nth-child(4), .diag-steps:not(.diag-steps--3col) .diag-connector:nth-child(6) { display: none; } .diag-steps:not(.diag-steps--3col) .diag-step:nth-child(1) { grid-column: 1; grid-row: 1; } .diag-steps:not(.diag-steps--3col) .diag-step:nth-child(3) { grid-column: 2; grid-row: 1; } .diag-steps:not(.diag-steps--3col) .diag-step:nth-child(5) { grid-column: 1; grid-row: 2; margin-top: 28px; } .diag-steps:not(.diag-steps--3col) .diag-step:nth-child(7) { grid-column: 2; grid-row: 2; margin-top: 28px; } /* 3단계(plant) */ .diag-steps--3col { grid-template-columns: 1fr 1fr; gap: 0 24px; } .diag-steps--3col .diag-connector { display: none; } .diag-steps--3col .diag-step:nth-child(1) { grid-column: 1; grid-row: 1; } .diag-steps--3col .diag-step:nth-child(3) { grid-column: 2; grid-row: 1; } .diag-steps--3col .diag-step:nth-child(5) { grid-column: 1; grid-row: 2; margin-top: 28px; } } @media (max-width: 640px) { .diag-steps, .diag-steps--3col { grid-template-columns: 1fr; gap: 20px; } .diag-step:nth-child(n) { grid-column: 1 !important; grid-row: auto !important; margin-top: 0 !important; } .diag-connector { display: none; } .diag-header { margin-bottom: 40px; } } /* ── Specs / Table ── */ .spec-table-wrap { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; margin-top: 52px; } .spec-table { width: 100%; border-collapse: collapse; } .spec-table th { background: var(--navy); color: var(--white); padding: 16px 24px; font-size: 13px; font-weight: 600; text-align: left; letter-spacing: .06em; } .spec-table td { padding: 18px 24px; font-size: 14.5px; color: var(--gray-600); border-bottom: 1px solid var(--gray-100); vertical-align: top; } .spec-table tr:last-child td { border-bottom: none; } .spec-table tr:nth-child(even) td { background: var(--off-white); } .spec-table td:first-child { font-weight: 600; color: var(--navy); width: 28%; } /* ── Metrics band ── */ .metrics-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--gray-200); border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; margin-top: 52px; } .metric-cell { background: var(--white); padding: 36px 28px; text-align: center; transition: background var(--transition); } .metric-cell:hover { background: var(--off-white); } .metric-val { font-family: 'Inter', sans-serif; font-size: 38px; font-weight: 800; color: var(--navy); line-height: 1; margin-bottom: 8px; } .metric-val sup { font-size: 18px; color: var(--accent); } .metric-label { font-size: 13px; color: var(--gray-400); font-weight: 500; } /* ── Case Study / Project Cards ── */ .project-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; } .proj-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); } .proj-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } .proj-card-img { height: 160px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; letter-spacing: .06em; color: rgba(255,255,255,.3); } .proj-card-body { padding: 24px; } .proj-card-category { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .proj-card h4 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.4; } .proj-card p { font-size: 13.5px; color: var(--gray-400); line-height: 1.6; } /* ══════════════════════════════════════════════ 주요 수행 프로젝트 — 4대 카테고리 레이아웃 ══════════════════════════════════════════════ */ .proj-section .sec-sub { margin-bottom: 56px; } /* 카테고리 블록 */ .proj-cat { margin-bottom: 56px; } /* 카테고리 라벨 헤더 */ .proj-cat-label { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--gray-200); } .proj-cat-num { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--accent); background: rgba(27,79,191,.08); border: 1px solid rgba(27,79,191,.2); border-radius: 20px; padding: 3px 12px; } .proj-cat-title { font-family: 'Noto Sans KR', sans-serif; font-size: 17px; font-weight: 700; color: var(--navy); letter-spacing: .02em; } .proj-cat-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-radius: 20px; padding: 3px 12px; } .proj-cat-badge.core { color: #fff; background: linear-gradient(90deg, #1B4FBF, #2E66D8); } /* ── 삼성전자 HERO 카드 ── */ .proj-hero-card { position: relative; background: linear-gradient(135deg, #0B1C3D 0%, #142952 60%, #1E3A6E 100%); border: 1px solid rgba(74,123,255,.3); border-radius: 20px; overflow: hidden; margin-bottom: 16px; box-shadow: 0 8px 40px rgba(11,28,61,.25); transition: box-shadow .3s, transform .3s; } .proj-hero-card:hover { box-shadow: 0 16px 60px rgba(11,28,61,.38); transform: translateY(-3px); } /* 좌측 강조 라인 */ .proj-hero-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #4A7BFF 0%, #2DCEA8 100%); border-radius: 4px 0 0 4px; } .proj-hero-content { display: grid; grid-template-columns: 1fr 280px; gap: 48px; padding: 44px 44px 44px 52px; align-items: center; } /* 왼쪽: 텍스트 영역 */ .proj-hero-tag { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #4A7BFF; background: rgba(74,123,255,.12); border: 1px solid rgba(74,123,255,.25); border-radius: 20px; padding: 5px 14px; margin-bottom: 20px; } .proj-hero-title { font-family: 'Noto Sans KR', sans-serif; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; line-height: 1.35; color: #fff; margin-bottom: 16px; letter-spacing: -.01em; } .proj-hero-desc { font-size: 14.5px; line-height: 1.85; color: rgba(255,255,255,.6); margin-bottom: 24px; } .proj-hero-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .proj-hero-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.5; } .proj-hero-list li svg { flex-shrink: 0; margin-top: 2px; } /* 오른쪽: 통계 그리드 */ .proj-hero-right { display: flex; align-items: center; justify-content: center; } .proj-hero-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; } .proj-hero-stat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 20px 16px; text-align: center; transition: background .2s; } .proj-hero-stat:hover { background: rgba(255,255,255,.09); } .proj-hero-stat-val { display: block; font-family: 'Inter', sans-serif; font-size: 26px; font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 8px; letter-spacing: -.02em; } .proj-hero-stat-val em { font-style: normal; font-size: 18px; font-weight: 700; color: #4A7BFF; } .proj-hero-stat-val sup { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.5); vertical-align: super; } .proj-hero-stat-label { display: block; font-size: 11px; color: rgba(255,255,255,.4); line-height: 1.5; font-weight: 500; } /* ── 서브 카드 행 (2열) ── */ .proj-sub-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .proj-sub-card { display: flex; align-items: flex-start; gap: 16px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px; padding: 24px; transition: box-shadow .25s, transform .25s, border-color .25s; } .proj-sub-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.08); transform: translateY(-3px); border-color: var(--gray-300); } .proj-sub-icon { width: 48px; height: 48px; border-radius: 12px; border: 1px solid; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .proj-sub-body { flex: 1; min-width: 0; } .proj-sub-cat { font-size: 10.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .proj-sub-body h4 { font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.4; margin-bottom: 6px; } .proj-sub-body p { font-size: 13px; color: var(--gray-400); line-height: 1.65; } /* ── 반응형 ── */ @media (max-width: 960px) { .proj-hero-content { grid-template-columns: 1fr; gap: 32px; padding: 36px 36px 36px 44px; } .proj-hero-stat-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 640px) { .proj-sub-row { grid-template-columns: 1fr; } .proj-hero-stat-grid { grid-template-columns: 1fr 1fr; } .proj-hero-content { padding: 28px 24px 28px 32px; } .proj-cat-label { flex-wrap: wrap; } } /* ───────────────────────────────────────── CTA BANNER (메인 Contact Us 스타일 통일) ───────────────────────────────────────── */ .cta-banner { background: linear-gradient(135deg, #0B1C3D 0%, #1B4FBF 55%, #0D6F9E 100%); position: relative; overflow: hidden; padding: 0; } /* 골드 글로우 (우하단) */ .cta-banner::before { content: ''; position: absolute; bottom: -120px; right: -120px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(201,168,76,.18) 0%, transparent 65%); pointer-events: none; } /* 화이트 글로우 (좌상단) */ .cta-banner::after { content: ''; position: absolute; top: -80px; left: -80px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 65%); pointer-events: none; } .cta-banner-inner { max-width: var(--max-w); margin: 0 auto; padding: 80px 40px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center; position: relative; z-index: 1; } /* 좌측 텍스트 */ .cta-text-col { display: flex; flex-direction: column; } .cta-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: rgba(0,180,255,.85); margin-bottom: 16px; } .cta-title { font-family: 'Noto Sans KR', sans-serif; font-size: clamp(22px, 2.6vw, 36px); font-weight: 700; color: var(--white); line-height: 1.35; letter-spacing: -.02em; margin-bottom: 14px; } .cta-sub { font-size: 15px; color: rgba(255,255,255,.5); line-height: 1.75; margin-bottom: 0; } /* 우측 폼 */ .cta-form { background: rgba(255,255,255,.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.13); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 14px; } .cta-form-row { display: flex; gap: 12px; } .cta-field { display: flex; flex-direction: column; gap: 6px; flex: 1; } .cta-field.full { flex: unset; width: 100%; } .cta-field label { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.42); } .cta-field label .req { color: var(--gold); margin-left: 2px; } .cta-input { height: 44px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 0 13px; font-family: 'Noto Sans KR', sans-serif; font-size: 13.5px; color: var(--white); outline: none; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); } .cta-input::placeholder { color: rgba(255,255,255,.22); } .cta-input:focus { border-color: rgba(100,160,255,.6); background: rgba(255,255,255,.1); box-shadow: 0 0 0 3px rgba(27,79,191,.22); } .cta-input.cta-textarea { height: auto; min-height: 90px; padding: 11px 13px; resize: vertical; line-height: 1.6; } .cta-input:invalid:not(:placeholder-shown) { border-color: rgba(255,80,80,.5); } /* 전송 버튼 */ .cta-submit { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 13px 32px; background: var(--gold); color: var(--navy); font-family: 'Noto Sans KR', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .05em; border: none; border-radius: 40px; cursor: pointer; transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition); } .cta-submit:hover { opacity: .88; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,168,76,.35); } .cta-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; } .cta-submit-icon { transition: transform var(--transition); } .cta-submit:hover .cta-submit-icon { transform: translateX(3px); } /* 결과 메시지 */ .cta-success { font-size: 13px; color: #5DD98A; background: rgba(26,115,64,.18); border: 1px solid rgba(26,115,64,.3); border-radius: 8px; padding: 11px 14px; } .cta-error { font-size: 13px; color: #FF8A8A; background: rgba(191,27,27,.15); border: 1px solid rgba(191,27,27,.28); border-radius: 8px; padding: 11px 14px; } .cta-error a { color: var(--gold); } /* 기업 연락처 정보 */ .cta-contact-info { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); } .cta-contact-item { display: flex; align-items: center; gap: 9px; font-size: 13px; color: rgba(255,255,255,.5); } .cta-contact-item svg { flex-shrink: 0; opacity: .65; } .cta-contact-item a { color: rgba(255,255,255,.6); text-decoration: none; transition: color var(--transition); } .cta-contact-item a:hover { color: var(--white); } /* 반응형 */ @media (max-width: 1024px) { .cta-banner-inner { grid-template-columns: 1fr; gap: 40px; padding: 64px 40px; } } @media (max-width: 768px) { .cta-banner-inner { padding: 56px 20px; gap: 36px; } .cta-form { padding: 24px 18px; } .cta-form-row { flex-direction: column; gap: 0; } .cta-submit { width: 100%; justify-content: center; } .cta-title { font-size: clamp(20px, 5.5vw, 28px); } } @media (max-width: 640px) { .cta-banner-inner { padding: 48px 16px; } .cta-form { padding: 20px 14px; border-radius: 12px; } } /* ── Footer ── */ .footer { background: var(--gray-800); } .footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 64px 40px 40px; display: grid; grid-template-columns: 1.2fr 2fr; gap: 80px; } .footer-brand .footer-logo { display: block; margin-bottom: 16px; } .footer-logo-img { height: 36px; width: auto; display: block; object-fit: contain; } .footer-brand p { font-size: 13.5px; color: rgba(255,255,255,.35); line-height: 1.6; } .footer-brand .logo-text { color: var(--white); } .footer-brand .logo-text em { color: rgba(255,255,255,.3); } .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .footer-col { display: flex; flex-direction: column; gap: 10px; } .footer-col strong { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 6px; } .footer-col a { font-size: 14px; color: rgba(255,255,255,.35); transition: color var(--transition); } .footer-col a.footer-address { font-size: 11px; white-space: normal; word-break: keep-all; overflow-wrap: break-word; } .footer-col a:hover { color: rgba(255,255,255,.75); } .footer-bottom { max-width: var(--max-w); margin: 0 auto; padding: 20px 40px 24px; border-top: 1px solid rgba(255,255,255,.07); } .footer-bottom p { font-size: 12.5px; color: rgba(255,255,255,.2); } /* ── Responsive ── */ @media (max-width: 1024px) { .diagram-section .sec-inner { grid-template-columns: 1fr; gap: 48px; } .page-hero-inner { grid-template-columns: 1fr; } .page-hero-visual { display: none; } .service-grid { grid-template-columns: repeat(2, 1fr); } .metrics-band { grid-template-columns: repeat(2, 1fr); } .project-cards { grid-template-columns: repeat(2, 1fr); } .footer-inner { grid-template-columns: 1fr; gap: 40px; } .spec-table-wrap { overflow-x: auto; } .proj-hero-content { grid-template-columns: 1fr; gap: 28px; } .proj-hero-stat-grid { grid-template-columns: repeat(4, 1fr); } .proj-sub-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { :root { --header-h: 60px; } .header-inner { padding: 0 20px; gap: 16px; } .nav, .header-cta { display: none; } .hamburger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; margin-left: auto; padding: 4px; } .hamburger span { width: 24px; height: 2px; background: var(--navy); border-radius: 2px; display: block; transition: transform .25s, opacity .25s; } /* 햄버거 active 상태 X 변환 */ .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* 모바일 네비 드롭다운 */ .nav.open { display: flex !important; flex-direction: column; position: fixed; top: var(--header-h); left: 0; right: 0; background: rgba(255,255,255,.98); backdrop-filter: blur(16px); padding: 16px 0 24px; border-bottom: 1px solid var(--gray-200); box-shadow: 0 8px 32px rgba(11,28,61,.12); z-index: 999; animation: navSlideDown .2s ease; } @keyframes navSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .nav.open .nav-list { flex-direction: column; gap: 0; align-items: stretch; padding: 0 20px; } .nav.open .nav-link { display: block; padding: 13px 0; font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--gray-100); color: var(--navy); } .nav.open .nav-has-drop .nav-drop { display: flex !important; position: static; box-shadow: none; border: none; background: var(--off-white); border-radius: 8px; padding: 8px 0; margin: 6px 0 10px; min-width: unset; } .nav.open .nav-drop li a { padding: 9px 16px; font-size: 14px; color: var(--gray-600); } .sec-inner, .cta-banner-inner { padding: 0 20px; } .sec { padding: 64px 0; } .service-grid { grid-template-columns: 1fr; gap: 16px; } .service-card { padding: 24px 20px; } .service-card h4 { font-size: 15.5px; } .metrics-band { grid-template-columns: 1fr 1fr; } .metric-cell { padding: 28px 16px; } .metric-val { font-size: 30px; } .project-cards { grid-template-columns: 1fr; } .footer-links { grid-template-columns: 1fr 1fr; } .d-flow { gap: 10px; } .d-node-box { width: 80px; height: 68px; font-size: 11px; } /* Hero Section 모바일 대응 */ .page-hero { background-position: center top; } .page-hero::before { background: linear-gradient(180deg, rgba(8,18,40,.88) 0%, rgba(8,18,40,.80) 100% ); } .page-hero-inner { grid-template-columns: 1fr; padding: 72px 20px 56px; gap: 32px; } .page-hero-visual { display: none; } .page-hero-title { font-size: clamp(26px, 7vw, 40px); } .page-hero-desc { font-size: 14.5px; margin-bottom: 24px; } .page-hero-chips { gap: 8px; } .chip { font-size: 12px; padding: 6px 13px; } /* 섹션 타이틀 */ .sec-title { font-size: clamp(22px, 5.5vw, 32px); } .sec-sub { font-size: 14.5px; } /* 프로젝트 카드 */ .proj-hero-content { grid-template-columns: 1fr; gap: 24px; padding: 28px 20px; } .proj-hero-stat-grid { grid-template-columns: 1fr 1fr; } .proj-hero-stat-val { font-size: 22px; } .proj-sub-row { grid-template-columns: 1fr; } .proj-cat-label { flex-wrap: wrap; gap: 8px; } /* 스펙 테이블 */ .spec-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .spec-table th, .spec-table td { padding: 14px 16px; font-size: 13px; } } @media (max-width: 640px) { .sec { padding: 56px 0; } .sec-inner { padding: 0 16px; } .page-hero-inner { padding: 64px 16px 48px; } /* 서비스 카드 */ .service-card { padding: 20px 16px; } .service-card h4 { font-size: 15px; } .service-card p { font-size: 13px; } /* 매트릭스 밴드 */ .metrics-band { grid-template-columns: 1fr 1fr; } .metric-val { font-size: 26px; } .metric-val sup { font-size: 14px; } .metric-label { font-size: 12px; } /* 프로젝트 카드 */ .proj-hero-stat-grid { grid-template-columns: 1fr 1fr; } .proj-hero-stat { padding: 14px 10px; } .proj-hero-stat-val { font-size: 20px; } .proj-cat-title { font-size: 15px; } .proj-sub-card { padding: 18px 14px; gap: 12px; } .proj-sub-icon { width: 40px; height: 40px; border-radius: 10px; } .proj-sub-body h4 { font-size: 14px; } .proj-sub-body p { font-size: 12.5px; } /* 푸터 */ .footer-inner { padding: 40px 16px 28px; } .footer-links { grid-template-columns: 1fr; gap: 24px; } .footer-bottom { padding: 14px 16px 18px; } .footer-bottom p { font-size: 11.5px; } /* CTA 배너 */ .cta-banner-inner { padding: 48px 16px; } .cta-form { padding: 20px 14px; border-radius: 12px; } .cta-title { font-size: clamp(20px, 6vw, 26px); } .cta-submit { width: 100%; justify-content: center; } /* Hero Section */ .page-hero-title { font-size: clamp(24px, 8vw, 36px); } .page-hero-desc { font-size: 14px; } /* 다이어그램 */ .diag-header .sec-title { font-size: clamp(20px, 6vw, 28px); } .diag-intro { font-size: 13.5px; } .diag-step-title { font-size: 14.5px; } .diag-step-desc { font-size: 12.5px; } .diag-step-body { padding: 22px 18px 20px; } /* 스펙 테이블 */ .spec-table th { font-size: 12px; padding: 12px 14px; } .spec-table td { font-size: 13px; padding: 12px 14px; } /* 헤더 CTA */ .hero-back-arrow { bottom: 20px; right: 16px; width: 42px; height: 42px; } .back-btn { bottom: 20px; right: 16px; width: 42px; height: 42px; } }