palnetworks
/
pal-hom-2026
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

css

remotes/origin/main
김지은 4 weeks ago
parent
320e1b2c58
commit
5f6712d5ab
1 changed files with 239 additions and 275 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 514
      src/css/common.css

514
src/css/common.css
Unescape View File

@ -34,7 +34,7 @@ body{overflow-x:hidden;}
padding: calc(var(--header-height) + 80px) 80px 96px;
}
/* .sh4{position:relative;overflow:hidden;margin-top:calc(-1 * var(--header-height));padding:calc(var(--header-height) + 80px) 80px 96px;background:#fff;} */
.sh4-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;}
.sh4-inner{position:relative;z-index:2;max-width:1660px;margin:0 auto;}
.sh4-right{position:relative;height:100%;min-height:320px;}
.sh4-label{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(26,31,94,.38);margin-bottom:20px;opacity:0;transform:translateY(10px);animation:sh4Up .55s cubic-bezier(.16,1,.3,1) forwards;}
.sh4-title{margin:0 0 20px;font-size:clamp(40px,6vw,80px);font-weight:900;line-height:1.25;letter-spacing:-.055em;color:var(--navy);}
@ -56,7 +56,7 @@ body{overflow-x:hidden;}
/*sh4 sticky 탭 네비*/
/* .sh4-nav-wrap{position:sticky;top:var(--header-height);z-index:50;background:rgba(255,255,255,.98);backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid rgba(26,31,94,.08);box-shadow:0 1px 0 rgba(26,31,94,.06);} */
.sh4-nav-wrap{border-bottom:1px solid rgba(26,31,94,.08);box-shadow:0 1px 0 rgba(26,31,94,.06);}
.sh4-nav{max-width:1440px;margin:0 auto;display:flex;align-items:center;}
.sh4-nav{max-width:1660px;margin:0 auto;display:flex;align-items:center;}
.sh4-nav-tab{position:relative;display:inline-flex;align-items:center;height:52px;padding:0 20px;font-size:14px;font-weight:600;color:rgba(17,17,17,.38);text-decoration:none;transition:color .25s;white-space:nowrap;letter-spacing:-.01em;}
.sh4-nav-tab:hover{color:var(--navy);}
.sh4-nav-tab--active{color:var(--navy);}
@ -108,170 +108,7 @@ body{overflow-x:hidden;}
/*ab about page*/
.ab-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,31,94,.35);margin-bottom:40px;}
.ab-eyebrow--light{color:rgba(255,255,255,.3);}
.about-section-label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #8895c0; font-weight: 500; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.about-section-label::before { content: ''; display: block; width: 20px; height: 2px; background: #1e2a5e; }
.about-section-label--light { color: rgba(255,255,255,0.4); }
.about-section-label--light::before { background: rgba(255,255,255,0.4); }
.about-company-section { padding: 100px 0 160px; }
.about-company-inner { display: flex; gap: 60px; align-items: flex-start; }
.about-company-text { flex: 1; min-width: 420px; }
.about-company-heading { font-size: 42px; font-weight: 700; line-height: 1.5; color: #1a1a2e; margin-bottom: 32px; }
.about-company-heading .blue { color: #1e2a5e; }
.about-company-body { font-size: 16px; color: #555; line-height: 2.1; margin-bottom: 20px; }
.about-img-group { flex-shrink: 0; width: 42vw; max-width: 580px; display: flex; gap: 16px; align-items: flex-start; }
.about-img-main-wrap { flex: 1; overflow: hidden; height: 480px; background: #f4f5fb; will-change: transform, border-radius; }
.about-img-main-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-img-side-wrap { width: 140px; flex-shrink: 0; overflow: hidden; height: 400px; margin-top: 120px; background: #eef0f8; will-change: transform, border-radius; }
.about-img-side-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-tech-section { background: #0d1628; padding: 100px 0 120px; }
.about-stats-row { display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 72px; margin-bottom: 80px; }
.about-stat-item { flex: 1; padding-right: 40px; border-right: 1px solid rgba(255,255,255,0.08); }
.about-stat-item:last-child { border-right: none; padding-right: 0; padding-left: 40px; }
.about-stat-item:not(:first-child):not(:last-child) { padding-left: 40px; }
.about-stat-num-wrap { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 12px; }
.about-stat-num { font-size: 52px; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -0.02em; }
.about-stat-suffix { font-size: 24px; font-weight: 700; color: #378ADD; margin-bottom: 6px; }
.about-stat-label { font-size: 13px; color: rgba(255,255,255,0.45); font-weight: 400; }
.about-tech-intro { margin-bottom: 56px; }
.about-tech-heading { font-size: 40px; font-weight: 900; line-height: 1.3; color: #fff; margin-top: 16px; margin-bottom: 20px; letter-spacing: -0.02em; }
.about-tech-heading span { color: #378ADD; }
.about-tech-desc { font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.9; max-width: 560px; }
.about-tech-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.about-tech-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 28px 24px; }
.about-tech-card-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(55,138,221,0.15); display: flex; align-items: center; justify-content: center; color: #378ADD; font-size: 22px; margin-bottom: 16px; }
.about-tech-card-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 10px; line-height: 1.4; }
.about-tech-card-desc { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.8; }
.about-meaning-section { padding: 0 0 120px; border-bottom: 1px solid #f0f0f0; }
.about-meaning-title { font-size: 32px; font-weight: 700; color: #1a1a2e; margin-bottom: 36px; }
.about-meaning-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.about-meaning-card { border: 1px solid #e8eaf3; border-radius: 16px; padding: 36px 32px; position: relative; overflow: hidden; }
.about-meaning-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: #1e2a5e; }
.about-meaning-card-keyword { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: #1e2a5e; background: #eef0f8; border-radius: 4px; padding: 4px 10px; margin-bottom: 20px; }
.about-meaning-card-icon { width: 40px; height: 40px; border-radius: 8px; background: #eef0f8; display: flex; align-items: center; justify-content: center; color: #1e2a5e; font-size: 20px; margin-bottom: 14px; }
.about-meaning-card-title { font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 12px; }
.about-meaning-card-desc { font-size: 15px; color: #777; line-height: 1.9; }
.about-mission-section { padding: 100px 0 100px; border-top: 1px solid #f0f0f0; }
.about-mission-inner { display: flex; gap: 100px; align-items: flex-start; }
.about-mission-left { flex: 1; min-width: 360px; padding-top: 8px; }
.about-mission-title { font-size: 30px; font-weight: 700; color: #1a1a2e; line-height: 1.5; margin-bottom: 24px; }
.about-mission-desc { font-size: 15px; color: #555; line-height: 2.2; }
.about-mission-right { flex: 1; display: flex; flex-direction: column; gap: 0; }
.about-mission-item { display: flex; gap: 24px; align-items: flex-start; padding: 32px 0; border-bottom: 1px solid #f0f0f0; }
.about-mission-item:first-child { border-top: none; }
.about-mission-item:last-child { border-bottom: none; }
.about-mission-item-num { font-size: 13px; font-weight: 700; color: #d0d4e8; letter-spacing: 0.05em; flex-shrink: 0; padding-top: 2px; width: 28px; }
.about-mission-item-body { flex: 1; }
.about-mission-item-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.about-mission-item-title { font-size: 18px; font-weight: 700; color: #1a1a2e; }
.about-mission-item-keyword { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #1e2a5e; background: #eef0f8; border-radius: 4px; padding: 3px 8px; }
.about-mission-item-desc { font-size: 14px; color: #777; line-height: 1.8; }
.about-cert-section { padding: 100px 0 100px; border-top: 1px solid #f0f0f0; }
.about-cert-title { font-size: 32px; font-weight: 700; color: #1a1a2e; margin-bottom: 28px; }
.about-cert-patents { background: #f8f9fc; border-radius: 12px; padding: 20px 24px; margin-bottom: 48px; }
.about-cert-patents-desc { font-size: 14px; color: #666; line-height: 1.9; }
.about-cert-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.about-cert-card { border: 1px solid #e8eaf3; border-radius: 14px; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; }
.about-cert-card-icon { width: 48px; height: 48px; border-radius: 12px; background: #eef0f8; margin-bottom: 8px; }
.about-cert-card-year { font-size: 11px; font-weight: 600; color: #8895c0; letter-spacing: 0.05em; }
.about-cert-card-title { font-size: 14px; font-weight: 700; color: #1a1a2e; line-height: 1.4; }
.about-cert-card-desc { font-size: 13px; color: #888; line-height: 1.7; }
.about-cta-section { position: relative; padding: 120px 48px; text-align: center; width: 100%; overflow: hidden; background: #0d1628; }
.about-cta-bg { position: absolute; inset: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 30% 50%, rgba(55,138,221,0.35) 0%, transparent 50%), radial-gradient(ellipse at 70% 50%, rgba(99,51,180,0.3) 0%, transparent 50%); animation: about-cta-move 8s ease-in-out infinite alternate; will-change: transform; }
.about-cta-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
.about-cta-title { font-size: 42px; font-weight: 900; color: #fff; line-height: 1.3; letter-spacing: -0.02em; margin-top: 16px; margin-bottom: 24px; }
.about-cta-desc { font-size: 15px; color: rgba(255,255,255,0.5); line-height: 1.9; margin-bottom: 48px; }
.about-cta-buttons { display: flex; gap: 12px; justify-content: center; }
.about-cta-btn { display: inline-flex; align-items: center; padding: 14px 32px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.about-cta-btn--primary { background: #fff; color: #0d1628; }
.about-cta-btn--primary:hover { background: #eef0f8; }
.about-cta-btn--outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.about-cta-btn--outline:hover { border-color: #fff; background: rgba(255,255,255,0.05); }
@media (max-width: 768px) {
.about-img-side-wrap { display: none; }
.about-company-section { padding: 64px 0 80px; }
.about-meaning-section { padding: 0 0 80px; }
.about-mission-section { padding: 64px 0 64px; }
.about-cert-section { padding: 64px 0 80px; }
.about-meaning-cards { grid-template-columns: 1fr; }
.about-mission-inner { flex-direction: column; gap: 48px; }
.about-mission-left { min-width: unset; }
.about-cert-cards { grid-template-columns: 1fr 1fr; }
.about-slogan-line { font-size: 36px; }
.about-company-inner { flex-direction: column; }
.about-company-text { min-width: unset; }
.about-img-group { width: 100%; max-width: unset; }
.about-stats-row { flex-direction: column; gap: 32px; }
.about-stat-item { border-right: none; padding: 0 0 32px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.about-stat-item:last-child { border-bottom: none; padding-bottom: 0; }
.about-tech-cards { grid-template-columns: 1fr 1fr; }
.about-cta-section { padding: 80px 24px; }
.about-cta-title { font-size: 28px; }
.about-cta-buttons { flex-direction: column; align-items: center; }
}
@keyframes about-cta-move {
0% { transform: translate(0%, 0%); }
50% { transform: translate(-10%, 8%); }
100% { transform: translate(10%, -8%); }
}
/* ── Partners Page ── */
.partners-wrap {margin-top:-5rem;padding: 0 0 6rem 0; }
@ -388,84 +225,10 @@ body{overflow-x:hidden;}
.location-info-section-title { display: block; }
}
/*연혁*/
/* ── Inner Wrap (공통 max-width) ── */
.inner-wrap {max-width:1440px; margin:0 auto; padding:0 60px;}
/* ── 상단 타이틀 ── 공통 */
.ht-header {text-align:center; padding:80px 0;}
.ht-header-title {font-size:48px; font-weight:500; letter-spacing:-.04em; color:#000; line-height:1.3; margin-bottom:0;}
.ht-header-title em {display:inline-block; font-size:60px; font-style:normal;}
.ht-header-title span {color:var(--color-primary); font-weight:700;}
.ht-header-title b {font-weight:700;}
.ht-header-sub {display:inline-block; margin-top:28px; font-size:16px; letter-spacing:-.03em; color:#666; font-weight:500; line-height:1.7; font-style:normal;}
/* ── 연혁 카드 박스 ── */
.ht-card {background:#f7f8fc; border-radius:20px; padding:52px 48px 80px; margin-bottom:80px;}
/* ── Tabs ── */
.ht-tabs {display:flex; gap:16px; margin-bottom:52px;align-items:center;justify-content:center;}
.ht-tab {flex:1;max-width:400px;font-size:14px; font-weight:600; padding:9px 26px; border-radius:100px; border:1.5px solid var(--color-primary-border); background:transparent; color:#888; cursor:pointer; transition:all .25s; letter-spacing:.01em;}
.ht-tab:hover {border-color:var(--color-primary); color:var(--color-primary);}
.ht-tab.is-active {background:var(--color-primary); border-color:var(--color-primary); color:#fff;}
/* ── Panel ── */
.ht-panel {display:flex; gap:0 40px; align-items:start; width:fit-content; margin:0 auto;min-width:670px}
/* ── Sidebar ── */
.ht-sidebar {padding-top:4px;min-width:155px}
.ht-decade {font-size:52px; font-weight:800; color:#111; line-height:1; letter-spacing:-.03em;}
.ht-since { font-size:11px; font-weight:500; color:#aaa; letter-spacing:.08em; text-transform:uppercase; margin-top:8px;}
/* ── 중앙 1px 라인 ── */
.ht-line-col {position:relative; align-self:stretch; width:1px;}
.ht-line-bg {position:absolute; inset:0; background:var(--color-primary-soft-border); width:1px;}
.ht-line-fill {position:absolute; top:0; left:0; width:1px; height:100%; background:var(--color-primary);}
/* ── Content ── */
.ht-content {padding-top:0;}
/* ── Year Group ── */
.ht-group {position:relative; padding:0 0 72px 0;}
.ht-group:last-child {padding-bottom:0;}
/* ── Dot ── */
.ht-dot {position:absolute; left:-44px; top:12px; width:8px; height:8px; border-radius:50%; background:#f7f8fc; border:1.5px solid var(--color-primary-border); transition:background .35s, border-color .35s, transform .35s; z-index:1;}
.ht-dot.is-active {background:var(--color-primary); border-color:var(--color-primary); transform:scale(1.4);}
/* ── Year ── */
.ht-year {font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1; margin:0 0 18px 0;}
/* ── List ── */
.ht-list {list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
/* ── Item ── */
.ht-item {display:flex; gap:10px; align-items:baseline;}
.ht-bullet {width:3px; height:3px; border-radius:50%; background:var(--color-primary); opacity:.4; flex-shrink:0; position:relative; top:-2px;}
.ht-text {font-size:14px; color:#444; line-height:1.65; word-break:keep-all;}
/* ── Responsive ── */
@media (max-width: 900px) {
.inner-wrap {padding: 0 20px;}
.ht-header {padding: 48px 0 32px;}
.ht-header-title {font-size: 32px;}
.ht-header-title em{font-size:40px}
.ht-card {padding: 32px 20px 56px;border-radius: 12px;}
.ht-panel {flex-direction:column;gap: 0;min-width:auto}
.ht-sidebar {margin-bottom: 32px;min-width:auto;}
.ht-line-col {display: none;}
.ht-content {padding-left: 20px;border-left: 1px solid var(--color-primary-soft-border);}
.ht-dot {left: -24px;}
.ht-decade {font-size: 36px;}
.ht-year {font-size: 26px;}
}
/*연혁*/
/* ── Inner Wrap (공통 max-width) ── */
.inner-wrap {max-width:1440px; margin:0 auto; padding:0 60px;}
.inner-wrap {max-width:1660px; margin:0 auto; padding:0 60px;}
/* ── 상단 타이틀 ── 공통 */
.ht-header {text-align:center; padding:80px 0;}
@ -690,64 +453,265 @@ body{overflow-x:hidden;}
FlightControlPage — common.css 추가분
════════════════════════════════ */
.fc-eyebrow {display:block;font-size:2rem;font-weight:800;letter-spacing:-1px;text-transform:uppercase;margin-bottom:1.75rem;}
.fc-eyebrow {display:block;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--color-primary);margin-bottom:1.5rem;}
.fc-eyebrow--light {color:rgba(255,255,255,.45);}
/* ════════════════
1. 개요
════════════════ */
.fc-overview {display:flex;align-items:center;gap:4rem;padding:6rem 0 7rem;}
.fc-overview__text {flex:1;min-width:0;}
.fc-overview__desc {font-size:1rem;line-height:1.9;color:#3a3f5c;margin-top:1.2rem;}
.fc-overview__desc--sub {color:#777;font-size:.92rem;margin-top:.8rem;}
.fc-overview {position:relative;border-radius:1.25rem;overflow:hidden;margin:3rem 0 5rem;min-height:520px;display:flex;align-items:flex-end;}
.fc-overview__bg {position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;display:block;filter:brightness(.38) saturate(.6);will-change:transform;}
.fc-overview__overlay {position:absolute;inset:0;background:linear-gradient(170deg, rgba(26,31,94,.6) 0%, rgba(26,31,94,.92) 60%);pointer-events:none;}
.fc-overview__content {position:relative;z-index:1;padding:3.5rem 3.5rem 4rem;width:100%;}
/* 특징 배지 */
.fc-badges {display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem;}
.fc-badge {display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border-radius:999px;border:1px solid var(--color-primary-border);background:var(--color-primary-soft);color:var(--color-primary);font-size:.78rem;font-weight:600;transition:background .2s,border-color .2s;}
.fc-badge:hover {background:var(--color-primary);color:#fff;border-color:var(--color-primary);cursor:default;}
.fc-overview__eyebrow-wrap {display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem;}
.fc-overview__eyebrow-line {width:2px;height:1rem;background:rgba(255,255,255,.35);transform-origin:top;flex-shrink:0;}
/* 이미지 패널 */
.fc-overview__panel {flex:0 0 460px;position:relative;}
.fc-overview__panel-inner {border-radius:1.25rem;padding:2rem;}
.fc-overview__img {width:100%;border-radius:.75rem;display:block;}
.fc-overview__title {margin:.5rem 0 2.75rem;}
.fc-overview__title-inner {font-size:1.85rem;font-weight:700;line-height:1.4;color:#fff;letter-spacing:-.01em;}
.fc-overview__bottom {display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;}
.fc-overview__sub {font-size:.88rem;line-height:1.9;color:rgba(255,255,255,.5);margin:0;}
.fc-badges {display:flex;flex-wrap:wrap;gap:.45rem;align-content:flex-start;}
.fc-badge {display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .8rem;border-radius:999px;border:1px solid var(--color-primary-border);background:var(--color-primary-soft);color:var(--color-primary);font-size:.76rem;font-weight:600;transition:background .2s,color .2s,border-color .2s;cursor:default;}
.fc-badge:hover {background:var(--color-primary);color:#fff;border-color:var(--color-primary);}
.fc-badge--light {border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);}
.fc-badge--light:hover {background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3);color:#fff;}
/* ════════════════
2. 주요기능
════════════════ */
.fc-functions {padding-bottom:8rem;}
.fc-functions__grid {display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.fc-func-card {position:relative;border-radius:1rem;overflow:hidden;border:1px solid var(--color-primary-soft-border);background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.05);cursor:pointer;}
.fc-func-card__img-wrap {overflow:hidden;aspect-ratio:2/1;}
.fc-func-card__img {width:100%;height:100%;object-fit:cover;display:block;}
.fc-func-card__body {display:flex;align-items:center;gap:.75rem;padding:.85rem 1.1rem;}
.fc-func-card__num {font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--color-primary-border-strong);}
.fc-func-card__label {font-size:.85rem;font-weight:600;color:#2a2e52;line-height:1.4;}
/* 호버 오버레이 — 네이비 반전 */
.fc-func-card__overlay {position:absolute;inset:0;background:var(--color-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:1.5rem;}
.fc-func-card__overlay-num {font-size:2.5rem;font-weight:800;color:rgba(255,255,255,.2);line-height:1;}
.fc-func-card__overlay-label {font-size:.9rem;font-weight:600;color:#fff;text-align:center;line-height:1.45;}
.fc-functions {padding:0 0 8rem;}
.fc-functions__body {display:flex;gap:5rem;align-items:flex-start;}
.fc-func-list {flex:1;list-style:none;margin:0;padding:0;}
.fc-func-item {position:relative;display:flex;align-items:center;gap:2rem;padding:1.75rem 0;border-top:1px solid var(--color-primary-soft-border);overflow:hidden;cursor:default;}
.fc-func-list li:last-child {border-bottom:1px solid var(--color-primary-soft-border);}
.fc-func-item__num {font-size:.7rem;font-weight:800;letter-spacing:.1em;color:var(--color-primary-border-strong);flex-shrink:0;width:2rem;transition:color .3s;}
.fc-func-item.is-active .fc-func-item__num {color:var(--color-primary);}
.fc-func-item__label {flex:1;font-size:1.1rem;font-weight:600;color:#bbb;line-height:1.4;transition:color .3s;}
.fc-func-item.is-active .fc-func-item__label {color:#1a1f3a;}
.fc-func-item__arrow {flex-shrink:0;color:var(--color-primary);display:flex;align-items:center;}
.fc-func-item__line {position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--color-primary);transform-origin:left;will-change:transform;}
.fc-func-display {flex:0 0 340px;}
.fc-func-display__inner {position:relative;border-radius:.875rem;overflow:hidden;background:#0a0e2e;aspect-ratio:2/1;}
.fc-func-display__img {width:100%;height:100%;object-fit:cover;display:block;}
.fc-func-display__caption {position:absolute;bottom:0;left:0;right:0;padding:.85rem 1rem;background:linear-gradient(to top, rgba(10,14,46,.88) 0%, transparent 100%);display:flex;align-items:center;gap:.55rem;}
.fc-func-display__num {font-size:1rem;font-weight:800;color:var(--pink);line-height:1;}
.fc-func-display__label {font-size:.78rem;font-weight:600;color:#fff;}
/* ════════════════
반응형
════════════════ */
@media (max-width: 1024px) {
.fc-overview {
min-height: 420px;
margin: 2rem 0 4rem;
}
.fc-overview__content {
padding: 3rem 2.5rem 3.5rem;
}
.fc-overview__title-inner {
font-size: 1.5rem;
}
.fc-overview__bottom {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.fc-functions__body {
flex-direction: column;
gap: 3rem;
padding: 4rem 0 5rem;
gap: 2rem;
}
.fc-overview__panel {
.fc-func-display {
flex: none;
width: 100%;
}
.fc-functions__grid {
grid-template-columns: repeat(2, 1fr);
max-width: 500px;
}
}
@media (max-width: 640px) {
.fc-functions__grid {
grid-template-columns: 1fr;
.fc-overview {
border-radius: .875rem;
min-height: 360px;
}
.fc-overview__content {
padding: 2.5rem 1.75rem 3rem;
}
.fc-overview__title-inner {
font-size: 1.25rem;
}
.fc-func-item__label {
font-size: 1rem;
}
}
/*ab about page*/
.ab-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,31,94,.35);margin-bottom:40px;}
.ab-eyebrow--light{color:rgba(255,255,255,.3);}
.about-section-label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #8895C0; font-weight: 500; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.about-section-label::before { content: ''; display: block; width: 20px; height: 2px; background: #1E2A5E; }
.about-section-label--light { color: rgba(255,255,255,0.4); }
.about-section-label--light::before { background: rgba(255,255,255,0.4); }
.about-company-section { padding: 100px 0 160px; }
.about-company-inner { display: flex; gap: 60px; align-items: flex-start; }
.about-company-text { flex: 1; min-width: 420px; }
.about-company-heading { font-size: 42px; font-weight: 700; line-height: 1.5; color: #1A1A2E; margin-bottom: 32px; }
.about-company-heading .blue { color: #1E2A5E; }
.about-company-body { font-size: 16px; color: #555; line-height: 2.1; margin-bottom: 20px; }
.about-img-group { flex-shrink: 0; width: 42vw; max-width: 580px; display: flex; gap: 16px; align-items: flex-start; }
.about-img-main-wrap { flex: 1; overflow: hidden; height: 480px; background: #F4F5FB; will-change: transform, border-radius; }
.about-img-main-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-img-side-wrap { width: 140px; flex-shrink: 0; overflow: hidden; height: 400px; margin-top: 120px; background: #EEF0F8; will-change: transform, border-radius; }
.about-img-side-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-tech-section { background: #0D1628; padding: 100px 0 120px; }
.about-stats-row { display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 72px; margin-bottom: 80px; }
.about-stat-item { flex: 1; padding-right: 40px; border-right: 1px solid rgba(255,255,255,0.08); }
.about-stat-item:last-child { border-right: none; padding-right: 0; padding-left: 40px; }
.about-stat-item:not(:first-child):not(:last-child) { padding-left: 40px; }
.about-stat-num-wrap { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 12px; }
.about-stat-num { font-size: 52px; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -0.02em; }
.about-stat-suffix { font-size: 24px; font-weight: 700; color: #378ADD; margin-bottom: 6px; }
.about-stat-label { font-size: 13px; color: rgba(255,255,255,0.45); font-weight: 400; }
.about-tech-intro { margin-bottom: 56px; }
.about-tech-heading { font-size: 40px; font-weight: 900; line-height: 1.3; color: #fff; margin-top: 16px; margin-bottom: 20px; letter-spacing: -0.02em; }
.about-tech-heading span { color: #378ADD; }
.about-tech-desc { font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.9; max-width: 560px; }
.about-tech-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.about-tech-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 28px 24px; }
.about-tech-card-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(55,138,221,0.15); display: flex; align-items: center; justify-content: center; color: #378ADD; font-size: 22px; margin-bottom: 16px; }
.about-tech-card-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 10px; line-height: 1.4; }
.about-tech-card-desc { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.8; }
.about-meaning-section { padding: 0 0 120px; border-bottom: 1px solid #F0F0F0; }
.about-meaning-title { font-size: 32px; font-weight: 700; color: #1A1A2E; margin-bottom: 36px; }
.about-meaning-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.about-meaning-card { border: 1px solid #E8EAF3; border-radius: 16px; padding: 36px 32px; position: relative; overflow: hidden; }
.about-meaning-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: #1E2A5E; }
.about-meaning-card-keyword { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: #1E2A5E; background: #EEF0F8; border-radius: 4px; padding: 4px 10px; margin-bottom: 20px; }
.about-meaning-card-icon { width: 40px; height: 40px; border-radius: 8px; background: #EEF0F8; display: flex; align-items: center; justify-content: center; color: #1E2A5E; font-size: 20px; margin-bottom: 14px; }
.about-meaning-card-title { font-size: 18px; font-weight: 700; color: #1A1A2E; margin-bottom: 12px; }
.about-meaning-card-desc { font-size: 15px; color: #777; line-height: 1.9; }
.about-mission-section { padding: 100px 0 100px; border-top: 1px solid #F0F0F0; }
.about-mission-inner { display: flex; gap: 100px; align-items: flex-start; }
.about-mission-left { flex: 1; min-width: 360px; padding-top: 8px; }
.about-mission-title { font-size: 30px; font-weight: 700; color: #1A1A2E; line-height: 1.5; margin-bottom: 24px; }
.about-mission-desc { font-size: 15px; color: #555; line-height: 2.2; }
.about-mission-right { flex: 1; display: flex; flex-direction: column; gap: 0; }
.about-mission-item { display: flex; gap: 24px; align-items: flex-start; padding: 32px 0; border-bottom: 1px solid #F0F0F0; }
.about-mission-item:first-child { border-top: none; }
.about-mission-item:last-child { border-bottom: none; }
.about-mission-item-num { font-size: 13px; font-weight: 700; color: #D0D4E8; letter-spacing: 0.05em; flex-shrink: 0; padding-top: 2px; width: 28px; }
.about-mission-item-body { flex: 1; }
.about-mission-item-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.about-mission-item-title { font-size: 18px; font-weight: 700; color: #1A1A2E; }
.about-mission-item-keyword { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #1E2A5E; background: #EEF0F8; border-radius: 4px; padding: 3px 8px; }
.about-mission-item-desc { font-size: 14px; color: #777; line-height: 1.8; }
.about-cert-section { padding: 100px 0 100px; border-top: 1px solid #F0F0F0; }
.about-cert-title { font-size: 32px; font-weight: 700; color: #1A1A2E; margin-bottom: 28px; }
.about-cert-patents { background: #F8F9FC; border-radius: 12px; padding: 20px 24px; margin-bottom: 48px; }
.about-cert-patents-desc { font-size: 14px; color: #666; line-height: 1.9; }
.about-cert-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.about-cert-card { border: 1px solid #E8EAF3; border-radius: 14px; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; }
.about-cert-card-icon { width: 48px; height: 48px; border-radius: 12px; background: #EEF0F8; margin-bottom: 8px; }
.about-cert-card-year { font-size: 11px; font-weight: 600; color: #8895C0; letter-spacing: 0.05em; }
.about-cert-card-title { font-size: 14px; font-weight: 700; color: #1A1A2E; line-height: 1.4; }
.about-cert-card-desc { font-size: 13px; color: #888; line-height: 1.7; }
.about-cta-section { position: relative; padding: 120px 48px; text-align: center; width: 100%; overflow: hidden; background: #0D1628; }
.about-cta-bg { position: absolute; inset: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 30% 50%, rgba(55,138,221,0.35) 0%, transparent 50%), radial-gradient(ellipse at 70% 50%, rgba(99,51,180,0.3) 0%, transparent 50%); animation: about-cta-move 8s ease-in-out infinite alternate; will-change: transform; }
.about-cta-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
.about-cta-title { font-size: 42px; font-weight: 900; color: #fff; line-height: 1.3; letter-spacing: -0.02em; margin-top: 16px; margin-bottom: 24px; }
.about-cta-desc { font-size: 15px; color: rgba(255,255,255,0.5); line-height: 1.9; margin-bottom: 48px; }
.about-cta-buttons { display: flex; gap: 12px; justify-content: center; }
.about-cta-btn { display: inline-flex; align-items: center; padding: 14px 32px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.about-cta-btn--primary { background: #fff; color: #0D1628; }
.about-cta-btn--primary:hover { background: #EEF0F8; }
.about-cta-btn--outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.about-cta-btn--outline:hover { border-color: #fff; background: rgba(255,255,255,0.05); }
@media (max-width: 768px) {
  .about-img-side-wrap { display: none; }
  .about-company-section { padding: 64px 0 80px; }
  .about-meaning-section { padding: 0 0 80px; }
  .about-mission-section { padding: 64px 0 64px; }
  .about-cert-section { padding: 64px 0 80px; }
  .about-meaning-cards { grid-template-columns: 1fr; }
  .about-mission-inner { flex-direction: column; gap: 48px; }
  .about-mission-left { min-width: unset; }
  .about-cert-cards { grid-template-columns: 1fr 1fr; }
  .about-slogan-line { font-size: 36px; }
  .about-company-inner { flex-direction: column; }
  .about-company-text { min-width: unset; }
  .about-img-group { width: 100%; max-width: unset; }
  .about-stats-row { flex-direction: column; gap: 32px; }
  .about-stat-item { border-right: none; padding: 0 0 32px; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .about-stat-item:last-child { border-bottom: none; padding-bottom: 0; }
  .about-tech-cards { grid-template-columns: 1fr 1fr; }
  .about-cta-section { padding: 80px 24px; }
  .about-cta-title { font-size: 28px; }
  .about-cta-buttons { flex-direction: column; align-items: center; }
}
@keyframes about-cta-move {
  0% { transform: translate(0%, 0%); }
  50% { transform: translate(-10%, 8%); }
  100% { transform: translate(10%, -8%); }
}
Write Preview
Loading…
Cancel
Save