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

폰트 크기 수정

main
김지은 5 days ago
parent
6c0dd1ee60
commit
d5cfa81a95
4 changed files with 68 additions and 87 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. 35
      src/components/main/MainSolution.jsx
  2. 100
      src/css/common.css
  3. 8
      src/css/footer.css
  4. 12
      src/css/main.css

35
src/components/main/MainSolution.jsx
Unescape View File

@ -78,10 +78,7 @@ function FlightMockup({ animate }) {
<div className="dark-stat-grid">
{stats.map((s, i) => (
<div
key={i}
className={`dark-stat-card${i === 0 ? " dark-stat-card--total" : ""}`}
>
<div key={i} className={`dark-stat-card${i === 0 ? " dark-stat-card--total" : ""}`}>
<div className="dark-stat-card__label">{s.label}</div>
<div
className="dark-stat-card__val"
@ -139,9 +136,7 @@ function FlightMockup({ animate }) {
<span className="dark-cell dark-cell--id">{row.id}</span>
<span className="dark-cell">{row.name}</span>
<span>
<span className={`dark-badge dark-badge--${row.statusType}`}>
{row.status}
</span>
<span className={`dark-badge dark-badge--${row.statusType}`}>{row.status}</span>
</span>
<span className="dark-cell">{row.speed}</span>
<span className="dark-cell">{row.alt}</span>
@ -159,8 +154,7 @@ function IBEMockup({ animate }) {
let val = 0;
const t = setInterval(() => {
val = Math.min(val + 3000, 120000);
if (priceRef.current)
priceRef.current.textContent = val.toLocaleString() + " KRW";
if (priceRef.current) priceRef.current.textContent = val.toLocaleString() + " KRW";
if (val >= 120000) clearInterval(t);
}, 20);
@ -218,10 +212,7 @@ function IBEMockup({ animate }) {
{ dep: "12:30", arr: "14:50", price: "150,000 KRW", active: false },
{ dep: "18:20", arr: "20:40", price: "120,000 KRW", active: false },
].map((f, i) => (
<div
key={i}
className={`light-flight${f.active ? " light-flight--active" : ""}`}
>
<div key={i} className={`light-flight${f.active ? " light-flight--active" : ""}`}>
<div className="light-flight__times">
<div>
<div className="light-flight__time">{f.dep}</div>
@ -237,10 +228,7 @@ function IBEMockup({ animate }) {
</div>
</div>
<div className="light-flight__right">
<div
className="light-flight__price"
ref={f.active ? priceRef : null}
>
<div className="light-flight__price" ref={f.active ? priceRef : null}>
{f.active ? "0 KRW" : f.price}
</div>
<div className="light-flight__btn">선택</div>
@ -260,7 +248,7 @@ function MainSolution() {
const solutions = [
{
label: "비행 관리",
title: "비행상황관리\n시스템",
title: "비행상황관리 시스템",
desc: "항공기, 무인기, 선박, 차량 등 다양한 이동체의 실시간 위치와 운항 상태를 하나의 플랫폼에서 통합 모니터링합니다. 고도, 속도, 항로 이력을 정밀하게 추적하고, 이상 상황 발생 시 즉각적인 대응이 가능합니다.",
mockup: "flight",
link: "/solution/flight-control",
@ -323,10 +311,7 @@ function MainSolution() {
<br />
서비스 솔루션
</h2>
<p className="main-solution-desc">
항공 운항 관리부터 스마트 관광 예약 플랫폼, 클라우드 인프라까지
다양한 항공·모빌리티 서비스를 하나의 통합 시스템 안에서 제공합니다.
</p>
<p className="main-solution-desc">항공 운항 관리부터 스마트 관광 예약 플랫폼, 클라우드 인프라까지 다양한 항공·모빌리티 서비스를 하나의 통합 시스템 안에서 제공합니다.</p>
</div>
<div className="main-solution-grid">
@ -349,11 +334,7 @@ function MainSolution() {
</span>
))}
</h3>
{item.titleSub && (
<p className="main-solution-card-title-sub">
{item.titleSub}
</p>
)}
{item.titleSub && <p className="main-solution-card-title-sub">{item.titleSub}</p>}
<p className="main-solution-card-desc">{item.desc}</p>
</div>
<Link to={item.link} className="main-solution-card-link">

100
src/css/common.css
Unescape View File

@ -57,7 +57,7 @@ body{overflow-x:hidden;}
/* .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: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{position:relative;display:inline-flex;align-items:center;height:52px;padding:0 20px;font-size:16px;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);}
.sh4-nav-tab--active::after{content:"";position:absolute;bottom:0;left:20px;right:20px;height:2px;border-radius:999px;background:var(--grad-brand-h);}
@ -113,8 +113,8 @@ body{overflow-x:hidden;}
/* cert 인증 및 특허 */
.cert-section { padding-bottom: 80px; }
.cert-section__header { margin-bottom: 48px; }
.cert-section__title { font-size: 28px; font-weight: 700; color: #111; margin: 10px 0 12px; }
.cert-section__desc { font-size: 14px; color: #555; line-height: 1.8; }
.cert-section__title { font-size: 32px; font-weight: 700; color: #111; margin: 10px 0 12px; }
.cert-section__desc { font-size: 18px; color: #555; line-height: 1.8; }
.cert-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; list-style: none; }
.cert-grid__item { display: flex; flex-direction: column; gap: 10px; }
.cert-grid__item--wide { grid-column: span 2; }
@ -271,7 +271,7 @@ body{overflow-x:hidden;}
.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-header-sub {display:inline-block; margin-top:28px; font-size:18px; letter-spacing:-.03em; color:#666; font-weight:500; line-height:1.7; font-style:normal;}
/* ── 연혁 카드 박스 ── */
@ -385,7 +385,7 @@ body{overflow-x:hidden;}
/* ── Recruit ── */
.rc-head {padding:80px 0 40px 0}
.rc-title {font-size:32px; font-weight:800; color:#111; letter-spacing:-.02em; line-height:1.25; margin-bottom:16px;}
.rc-desc {font-size:15px; color:#666; line-height:1.7;}
.rc-desc {font-size:16px; color:#666; line-height:1.7;}
/* ── Section Title ── */
.rc-section-title {font-size:20px; font-weight:700; color:#111; letter-spacing:-.01em; margin-bottom:28px;}
@ -395,8 +395,8 @@ body{overflow-x:hidden;}
.rc-benefits-grid {display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.rc-benefit-item {background:#f7f8fc; border-radius:12px; padding:24px 20px; display:flex; flex-direction:column; gap:8px;}
.rc-benefit-icon {font-size:24px;}
.rc-benefit-title {font-size:14px; font-weight:700; color:#111;}
.rc-benefit-desc {font-size:13px; color:#666; line-height:1.5;}
.rc-benefit-title {font-size:18px; font-weight:700; color:#111;}
.rc-benefit-desc {font-size:16px; color:#666; line-height:1.5;}
/* ── Jobs ── */
.rc-jobs {padding:56px 0 100px;}
@ -407,12 +407,12 @@ body{overflow-x:hidden;}
.rc-job-part {font-size:12px; font-weight:600; color:var(--color-primary); background:var(--color-primary-soft); padding:3px 10px; border-radius:100px;}
.rc-job-type {font-size:12px; font-weight:600; color:#666; background:#f0f0f0; padding:3px 10px; border-radius:100px;}
.rc-job-title {font-size:22px; font-weight:800; color:#111; letter-spacing:-.02em;}
.rc-job-career {font-size:13px; color:#888; font-weight:500;}
.rc-job-desc {font-size:14px; color:#555; line-height:1.6;}
.rc-job-career {font-size:14px; color:#888; font-weight:500;}
.rc-job-desc {font-size:16px; color:#555; line-height:1.6;}
.rc-job-stack {display:flex; flex-wrap:wrap; gap:6px;}
.rc-job-tag {font-size:12px; font-weight:500; color:#555; background:#f5f5f5; padding:4px 10px; border-radius:6px;}
.rc-job-bottom {display:flex; align-items:center; justify-content:space-between; margin-top:4px; padding-top:16px; border-top:1px solid var(--color-primary-soft);}
.rc-job-deadline {font-size:13px; color:#aaa;}
.rc-job-deadline {font-size:14px; color:#aaa;}
.rc-job-apply {font-size:14px; font-weight:600; color:#fff; background:var(--color-primary); padding:9px 22px; border-radius:8px; text-decoration:none; transition:background .2s;}
.rc-job-apply:hover {background:var(--color-primary-hover);}
@ -468,9 +468,9 @@ body{overflow-x:hidden;}
.cs-year {font-size:12px; font-weight:600; color:#aaa; letter-spacing:.1em;}
.cs-eyebrow {font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--color-primary); opacity:.8;}
.cs-item-title {font-size:30px; font-weight:800; color:#111; letter-spacing:-.02em; line-height:1.3; margin:0;}
.cs-item-desc {font-size:14px; color:#555; line-height:1.8; word-break:keep-all;}
.cs-item-desc {font-size:16px; color:#555; line-height:1.8; word-break:keep-all;}
.cs-tags {display:flex; gap:8px; flex-wrap:wrap;}
.cs-tag {font-size:11px; font-weight:600; color:var(--color-primary); background:var(--color-primary-soft); padding:4px 12px; border-radius:100px; letter-spacing:.04em;}
.cs-tag {font-size:12px; font-weight:600; color:var(--color-primary); background:var(--color-primary-soft); padding:4px 12px; border-radius:100px; letter-spacing:.04em;}
/* ── Responsive ── */
@media (max-width: 900px) {
@ -571,7 +571,7 @@ body{overflow-x:hidden;}
.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-meaning-card-desc { font-size: 16px; 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; }
@ -580,14 +580,14 @@ body{overflow-x:hidden;}
.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-desc { font-size: 16px; 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-num { font-size: 14px; font-weight: 700; color: #d0d4e8; letter-spacing: 0.05em; flex-shrink: 0; padding-top: 2px; width: 28px; }
.about-mission-item-body { flex: 1; }
@ -597,7 +597,7 @@ body{overflow-x:hidden;}
.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-mission-item-desc { font-size: 16px; color: #777; line-height: 1.8; }
.about-cert-section { padding: 100px 0 100px; border-top: 1px solid #f0f0f0; }
@ -628,7 +628,7 @@ body{overflow-x:hidden;}
.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-desc { font-size: 16px; color: rgba(255,255,255,0.5); line-height: 1.9; margin-bottom: 48px; }
.about-cta-buttons { display: flex; gap: 12px; justify-content: center; }
@ -716,19 +716,19 @@ body{overflow-x:hidden;}
.fc-intro { display: flex; gap: 48px; align-items: center; padding: 60px 0;}
.fc-intro__left { flex: 1; }
.fc-intro__title { font-size: 2rem; font-weight: 800; color: #1a1f3a; line-height: 1.35; letter-spacing: -0.02em; margin: 16px 0 28px; }
.fc-intro__desc { font-size: 0.9rem; color: #666; line-height: 1.9; margin-bottom: 48px; }
.fc-intro__desc { font-size:16px; color: #666; line-height: 1.9; margin-bottom: 48px; }
.fc-intro__icons { display: flex; gap: 32px; }
.fc-intro__icon-item { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fc-intro__icon-item img { width: 80px; height: 80px; object-fit: contain; }
.fc-intro__icon-item span { font-size: 0.75rem; font-weight: 600; color: #888; }
.fc-intro__icon-item span { font-size:14px; font-weight: 600; color: #888; }
.fc-intro__right { flex: 0 0 52%; }
.fc-intro__monitor { width: 100%; object-fit: contain; display: block; }
.fc-highlight { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 8rem; align-items: center; padding: 60px 0;}
.fc-highlight__item { display: flex; gap: 24px; align-items: center; }
.fc-highlight__text { flex: 0 0 40%; }
.fc-highlight__title { font-size: 1.75rem; font-weight: 800; color: #1a1f3a; line-height: 1.35; letter-spacing: -0.02em; margin: 10px 0 16px; }
.fc-highlight__desc { font-size: 0.88rem; color: #666; line-height: 1.9; }
.fc-highlight__title { font-size: 28px; font-weight: 800; color: #1a1f3a; line-height: 1.35; letter-spacing: -0.02em; margin: 10px 0 16px; }
.fc-highlight__desc { font-size: 16px; color: #666; line-height: 1.9; }
.fc-highlight__img-wrap { flex: 1; }
.fc-highlight__img-wrap img { width: 100%; object-fit: contain; display: block; }
.fc-highlight__img-scene { position: relative; width: 100%; }
@ -762,9 +762,9 @@ body{overflow-x:hidden;}
.fc-domain-card__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 45%, transparent 100%); transition: background 0.4s ease; }
.fc-domain-card:hover .fc-domain-card__overlay { background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.15) 100%); }
.fc-domain-card__label { font-size: 1.125rem; font-weight: 700; color: #fff; line-height: 1.3; }
.fc-domain-card__label { font-size:18px; font-weight: 700; color: #fff; line-height: 1.3; }
.fc-domain-card__desc { font-size: .8rem; line-height: 1.65; color: rgba(255,255,255,.85); margin: .5rem 0 0; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(8px); transition: max-height 0.4s ease, opacity 0.35s ease, transform 0.35s ease; }
.fc-domain-card__desc { font-size:16px; line-height: 1.65; color: rgba(255,255,255,.85); margin: .5rem 0 0; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(8px); transition: max-height 0.4s ease, opacity 0.35s ease, transform 0.35s ease; }
.fc-domain-card:hover .fc-domain-card__desc { max-height: 6rem; opacity: 1; transform: translateY(0); }
@media (max-width: 1024px) { .fc-domains__grid { flex-wrap: wrap; height: auto; } .fc-domain-card { flex: 0 0 calc(33.33% - 1rem); aspect-ratio: 3/4; } }
@ -794,9 +794,9 @@ body{overflow-x:hidden;}
.fc-flow { padding-bottom: 10rem; }
.fc-flow__row {display:flex;align-items:flex-start;gap:0;}
.fc-flow__item {position:relative;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;padding:2rem 1rem;}
.fc-flow__step {font-size:.68rem;font-weight:800;letter-spacing:.12em;color:var(--color-primary-border-strong);}
.fc-flow__label {font-size:.92rem;font-weight:700;color:var(--color-primary);}
.fc-flow__desc {font-size:.76rem;line-height:1.65;color:#888;margin:0;}
.fc-flow__step {font-size:14px;font-weight:800;letter-spacing:.12em;color:var(--color-primary-border-strong);}
.fc-flow__label {font-size:16px;font-weight:700;color:var(--color-primary);}
.fc-flow__desc {font-size:14px;line-height:1.65;color:#888;margin:0;}
.fc-flow__arrow {position:absolute;top:2.75rem;right:-1px;width:2px;height:1.5rem;background:var(--color-primary-soft-border);transform-origin:top;}
@media (max-width: 1024px) {
@ -858,8 +858,8 @@ body{overflow-x:hidden;}
IBEPAGE — common.css 추가분
════════════════════════════════ */
.ibe-channel-section { padding: 60px 0; }
.ibe-channel__title { font-size: 2rem; font-weight: 800; color: #1a1f3a; line-height: 1.35; letter-spacing: -0.02em; margin: 12px 0 16px; }
.ibe-channel__desc { font-size: 0.9rem; color: #666; line-height: 1.9; margin-bottom: 56px; }
.ibe-channel__title { font-size: 32px; font-weight: 800; color: #1a1f3a; line-height: 1.35; letter-spacing: -0.02em; margin: 12px 0 16px; }
.ibe-channel__desc { font-size:16px; color: #666; line-height: 1.9; margin-bottom: 56px; }
.ibe-channel__diagram { position: relative; width: min(1540px, 100%); height: 430px; margin: 0 auto; display: grid; grid-template-columns: 420px 1fr 420px; align-items: center; }
.ibe-channel__svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
@ -924,9 +924,9 @@ body{overflow-x:hidden;}
.ibe-booking__circle { width: 88px; height: 88px; border-radius: 50%; background: #f8faff; display: flex; align-items: center; justify-content: center; box-shadow: 5px 5px 12px rgba(0,0,0,0.06), -5px -5px 12px #fff; margin-bottom: 20px; }
.ibe-booking__circle img { width: 48px; height: 48px; object-fit: contain; }
.ibe-booking__num { font-size: 10px; font-weight: 700; color: var(--color-primary-light); letter-spacing: 0.1em; margin-bottom: 6px; }
.ibe-booking__label { font-size: 14px; font-weight: 700; color: var(--color-primary); margin-bottom: 8px; }
.ibe-booking__desc { font-size: 12px; color: #888; line-height: 1.7; text-align: center; }
.ibe-booking__num { font-size: 12px; font-weight: 700; color: var(--color-primary-light); letter-spacing: 0.1em; margin-bottom: 6px; }
.ibe-booking__label { font-size: 16px; font-weight: 700; color: var(--color-primary); margin-bottom: 8px; }
.ibe-booking__desc { font-size: 14px; color: #888; line-height: 1.7; text-align: center; }
@media (max-width: 768px) {
.ibe-booking__flow { flex-direction: column; align-items: flex-start; gap: 0; padding-left: 16px; }
@ -957,7 +957,7 @@ body{overflow-x:hidden;}
.si_archive__right { flex:1; min-width:0; }
.si_archive__eyebrow { display:block; font-size:12px; font-weight:600; letter-spacing:.12em; color:#2563eb; text-transform:uppercase; margin-bottom:16px; }
.si_archive__title { font-size:clamp(28px,3vw,40px); font-weight:700; line-height:1.25; color:var(--color-primary); letter-spacing:-.02em; margin:0 0 20px; }
.si_archive__desc { font-size:14px; line-height:1.7; color:#555; margin:0 0 32px; }
.si_archive__desc { font-size:16px; line-height:1.7; color:#555; margin:0 0 32px; }
.si_archive__more { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#111; text-decoration:none; border-bottom:1.5px solid #111; padding-bottom:2px; width:fit-content; transition:.2s; }
.si_archive__more:hover { color:#2563eb; border-color:#2563eb; }
.si_archive__more-arrow { transition:transform .2s; }
@ -975,14 +975,14 @@ body{overflow-x:hidden;}
.si_archive__card-body-left { flex: 0 0 130px; }
.si_archive__card-num { font-size: 16px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #c026d3, #7c3aed); width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.si_archive__card-title { font-size: 16px; font-weight: 700; line-height: 1.4; color: #111; margin: 0; }
.si_archive__card-title { font-size: 18px; font-weight: 700; line-height: 1.4; color: #111; margin: 0; }
.si_archive__card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.si_archive__tag { padding: 3px 8px; border: 1px solid #d1d5db; border-radius: 999px; font-size: 10px; color: #555; background: #fff; }
.si_archive__tag { padding: 3px 8px; border: 1px solid #d1d5db; border-radius: 999px; font-size: 12px; color: #555; background: #fff; }
.si_archive__card-desc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; border-top: 1px solid #f1f1f1; padding-top: 14px; }
.si_archive__card-desc li { display: flex; flex-direction: column; gap: 6px; }
.si_archive__card-desc-icon { width: 28px; height: 28px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--color-primary); }
.si_archive__card-desc-title { font-size: 13px; font-weight: 700; color: #111; }
.si_archive__card-desc-text { font-size: 12px; line-height: 1.5; color: #888; }
.si_archive__card-desc-title { font-size: 16px; font-weight: 700; color: #111; }
.si_archive__card-desc-text { font-size: 14px; line-height: 1.5; color: #888; }
.si_archive__nav { width: 100%; margin-top: 40px; display: flex; align-items: center; gap: 16px; }
.si_archive__nav-btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #e5e7eb; background: transparent; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #111; flex-shrink: 0; transition: all .25s; }
@ -1058,7 +1058,7 @@ body{overflow-x:hidden;}
.mt-title-line { overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.mt-intro__title { font-size:clamp(28px,3vw,42px); font-weight:800; color:var(--color-primary); line-height:1.25; letter-spacing:-.03em; margin:0; }
.mt-intro__desc { font-size:.9rem; color:#666; line-height:1.9; margin:28px 0 36px; word-break:keep-all; }
.mt-intro__desc { font-size:16px; color:#666; line-height:1.9; margin:28px 0 36px; word-break:keep-all; }
.mt-intro__cta { display:inline-flex; align-items:center; gap:8px; font-size:.88rem; font-weight:700; color:var(--pink); text-decoration:none; letter-spacing:-.01em; transition:gap .25s; }
.mt-intro__cta:hover { gap:14px; }
@ -1073,7 +1073,7 @@ body{overflow-x:hidden;}
.mt-kpi__item { display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 16px; border-right:1px solid rgba(255,255,255,.1); text-align:center; }
.mt-kpi__item:last-child { border-right:none; }
.mt-kpi__value { font-size:clamp(28px,3.5vw,52px); font-weight:900; color:#fff; letter-spacing:-.04em; line-height:1; }
.mt-kpi__label { font-size:.78rem; font-weight:500; color:rgba(255,255,255,.45); line-height:1.4; }
.mt-kpi__label { font-size:14px; font-weight:500; color:rgba(255,255,255,.45); line-height:1.4; }
/* ── 5컬럼 서비스 카드 ── */
.mt-services { padding-bottom:120px; }
@ -1087,9 +1087,9 @@ body{overflow-x:hidden;}
.mt-service-card:hover .mt-service-card__img-wrap { transform:translateY(-6px) scale(1.08); }
.mt-service-card__img { width:100%; height:100%; object-fit:contain; }
.mt-service-card__num { font-size:.7rem; font-weight:800; letter-spacing:.12em; color:var(--pink); opacity:.8; }
.mt-service-card__title { font-size:1rem; font-weight:800; color:var(--color-primary); letter-spacing:-.02em; margin:0; }
.mt-service-card__desc { font-size:.78rem; color:#888; line-height:1.7; word-break:keep-all; margin:0; }
.mt-service-card__num { font-size:14px; font-weight:800; letter-spacing:.12em; color:var(--pink); opacity:.8; }
.mt-service-card__title { font-size:16px; font-weight:800; color:var(--color-primary); letter-spacing:-.02em; margin:0; }
.mt-service-card__desc { font-size:14px; color:#888; line-height:1.7; word-break:keep-all; margin:0; }
.mt-service-card__line { position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--grad-brand-h); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.22,1,.36,1); }
.mt-service-card:hover .mt-service-card__line { transform:scaleX(1); }
@ -1149,7 +1149,7 @@ body{overflow-x:hidden;}
.utm-intro__top { max-width: 560px; }
.utm-intro__title { font-size: 40px; font-weight: 700; line-height: 1.35; color: #111; margin: 12px 0 20px; word-break: keep-all; }
.utm-intro__title em { color: #1A1F5E; font-style: normal; -webkit-text-fill-color: #1A1F5E; }
.utm-intro__desc { font-size: 14px; color: #555; line-height: 1.85; word-break: keep-all; }
.utm-intro__desc { font-size: 16px; color: #555; line-height: 1.85; word-break: keep-all; }
.utm-intro__desc strong { font-weight: 600; color: #111; }
.utm-intro__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; margin-left: auto; }
.utm-intro__card { background: #fff; border-radius: 16px; padding: 28px 24px 32px; position: relative; overflow: hidden; min-height: 180px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid #EBEBEB; box-shadow: 0 4px 16px rgba(0,0,0,0.06); width: 240px; height: 240px;}
@ -1165,7 +1165,7 @@ body{overflow-x:hidden;}
.utm-what__inner { display: flex; align-items: center; justify-content: space-between; gap: 80px; min-height: 500px; }
.utm-what__left { flex: 0 0 480px; }
.utm-what__eyebrow { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #6366f1; margin-bottom: 20px; }
.utm-what__desc { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.9; max-width: 600px; margin: 0 auto; word-break: keep-all; }
.utm-what__desc { font-size: 16px; color: rgba(255,255,255,0.5); line-height: 1.9; max-width: 640px; margin: 0 auto; word-break: keep-all; }
.utm-what__body { display: grid; grid-template-columns: 220px 1fr 220px; gap: 20px; align-items: center; }
.utm-what__cards { list-style: none; display: flex; flex-direction: column; justify-content: center; gap: 25px; min-width: 220px; }
.utm-what__card { display: flex; align-items: center; justify-content: flex-start; gap: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; padding: 0 20px; height: 80px; white-space: nowrap; width: 100%; }
@ -1274,7 +1274,7 @@ body{overflow-x:hidden;}
.utm-evo__eyebrow::before { content: ''; width: 20px; height: 1.5px; background: #E8193C; }
.utm-evo__title { font-size: 36px; font-weight: 700; line-height: 1.35; color: #111; margin-bottom: 20px; word-break: keep-all; }
.utm-evo__title em { color: var(--color-primary); font-style: normal; }
.utm-evo__desc { font-size: 14px; color: #777; line-height: 1.85; margin-bottom: 32px; word-break: keep-all; }
.utm-evo__desc { font-size: 16px; color: #777; line-height: 1.85; margin-bottom: 32px; word-break: keep-all; }
.utm-evo__chip { display: inline-flex; align-items: center; gap: 8px; background: #111; color: #fff; font-size: 12px; font-weight: 600; padding: 10px 18px; border-radius: 8px; }
.utm-evo__chip-dot { width: 7px; height: 7px; border-radius: 50%; background: #E8193C; flex-shrink: 0; }
@ -1297,10 +1297,10 @@ body{overflow-x:hidden;}
.utm-evo__card-img { width: 120px; height: 120px; object-fit: contain; flex-shrink: 0; }
.utm-evo__card-body { display: flex; flex-direction: column; gap: 8px; }
.utm-evo__card-name { font-size: 15px; font-weight: 700; color: #111; }
.utm-evo__card-desc { font-size: 13px; color: #666; line-height: 1.6; }
.utm-evo__card-name { font-size: 16px; font-weight: 700; color: #111; }
.utm-evo__card-desc { font-size: 14px; color: #666; line-height: 1.6; }
.utm-evo__card-tag { display: inline-block; font-size: 11px; padding: 4px 10px; border-radius: 4px; background: #f5f5f5; color: #666; }
.utm-evo__card-tag { display: inline-block; font-size: 13px; padding: 4px 10px; border-radius: 4px; background: #f5f5f5; color: #666; }
.utm-evo__item--highlight .utm-evo__card { border: 1.5px solid var(--navy); box-shadow: 0 4px 24px rgba(26,31,94,0.1); }
.utm-evo__item--highlight .utm-evo__card-name { background: none; -webkit-text-fill-color: var(--navy); color: var(--navy); }
@ -1314,7 +1314,7 @@ body{overflow-x:hidden;}
.utm-cap .inner-wrap { display: flex; flex-direction: column; gap: 52px; }
.utm-cap__title { font-size: 40px; font-weight: 700; line-height: 1.35; color: #111; margin: 12px 0 20px; word-break: keep-all; }
.utm-cap__title em { color: var(--color-primary, #E8193C); font-style: normal; }
.utm-cap__desc { font-size: 14px; color: #555; line-height: 1.85; word-break: keep-all; }
.utm-cap__desc { font-size: 16px; color: #555; line-height: 1.85; word-break: keep-all; }
.utm-cap__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; background: #F7F8FA; border-radius: 20px; padding: 32px; }
.utm-cap__card { background: #fff; border-radius: 16px; padding: 28px 24px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; border: 1px solid #EBEBEB; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.utm-cap__card-num { position: absolute; top: 16px; right: 20px; font-size: 72px; font-weight: 700; color: rgba(0,0,0,0.05); line-height: 1; }
@ -1322,8 +1322,8 @@ body{overflow-x:hidden;}
.utm-cap__card-name { font-size: 18px; font-weight: 700; color: #111; line-height: 1.35; word-break: keep-all; display: block; }
.utm-cap__card-name::before { content: ''; display: block; width: 24px; height: 2.5px; background: var(--cap-color); border-radius: 2px; margin-bottom: 14px; }
.utm-cap__card-tags { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.utm-cap__card-tags li { font-size: 13px; color: #666; line-height: 1.5; display: flex; align-items: flex-start; gap: 8px; }
.utm-cap__card-tags li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--cap-color); flex-shrink: 0; margin-top: 6px; opacity: 0.6; }
.utm-cap__card-tags li { font-size: 15px; color: #666; line-height: 1.5; display: flex; align-items: flex-start; gap: 8px; }
.utm-cap__card-tags li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--cap-color); flex-shrink: 0; margin-top: 10px; opacity: 0.6; }
@media (max-width: 1200px) {
.utm-intro__cards { grid-template-columns: repeat(2, 1fr); }

8
src/css/footer.css
Unescape View File

@ -7,14 +7,14 @@
.footer-tagline{margin:0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.5);letter-spacing:.2px;}
.footer-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.footer-nav-group h5{margin:0 0 14px;font-size:12px;font-weight:600;color:#fff;letter-spacing:.6px;}
.footer-nav-group h5{margin:0 0 14px;font-size:15px;font-weight:600;color:#fff;letter-spacing:.6px;}
.footer-nav-group ul{list-style:none;padding:0;margin:0;}
.footer-nav-group li{margin-bottom:8px;}
.footer-nav-group a{font-size:13px;color:rgba(255,255,255,.5);text-decoration:none;transition:color .2s ease;}
.footer-nav-group a{font-size:14px;color:rgba(255,255,255,.5);text-decoration:none;transition:color .2s ease;}
.footer-nav-group a:hover{color:#fff;}
.footer-mid{padding:24px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.footer-info p{margin:0 0 4px;font-size:12px;line-height:1.8;color:rgba(255,255,255,.5);}
.footer-info p{margin:0 0 4px;font-size:14px;line-height:1.8;color:rgba(255,255,255,.5);}
.footer-info p:last-child{margin-bottom:0;}
.footer-info .strong{color:rgba(255,255,255,.85);font-weight:500;}
.footer-info .sep{display:inline-block;margin:0 10px;color:rgba(255,255,255,.2);}
@ -24,7 +24,7 @@
.footer-bot{display:flex;justify-content:space-between;align-items:center;padding-top:18px;}
.footer-copy{margin:0;font-size:12px;color:rgba(255,255,255,.35);letter-spacing:.2px;}
.footer-policy{list-style:none;padding:0;margin:0;display:flex;gap:20px;}
.footer-policy a{font-size:12px;color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s ease;}
.footer-policy a{font-size:14px;color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s ease;}
.footer-policy a:hover{color:#fff;}
@media (max-width:1024px){

12
src/css/main.css
Unescape View File

@ -122,9 +122,9 @@ body{overflow-x:hidden;}
.utm-hero__blob--2 { width: 360px; height: 360px; bottom: -80px; right: 10%; background: rgba(139,92,246,0.06); }
.utm-hero__inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; width: 100%; }
.utm-hero__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #6366F1; margin-bottom: 24px; }
.utm-hero__title { font-size: clamp(36px, 4.5vw, 64px); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; color: #0e1120; margin: 0 0 24px; word-break: keep-all; }
.utm-hero__title { font-size:50px; font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; color: #0e1120; margin: 0 0 24px; word-break: keep-all; }
.utm-hero__title em { font-style: normal; color: #1A1F5E; -webkit-text-fill-color: #1A1F5E; }
.utm-hero__desc { font-size: 16px; color: #666; line-height: 1.85; margin: 0 0 36px; word-break: keep-all; }
.utm-hero__desc { font-size: 18px; color: #666; line-height: 1.85; margin: 0 0 36px; word-break: keep-all; }
.utm-hero__chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 48px; padding: 0; }
.utm-hero__chip { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.75); border: 1px solid rgba(99,102,241,0.18); border-radius: 999px; padding: 7px 16px 7px 10px; backdrop-filter: blur(8px); }
.utm-hero__chip-num { font-size: 10px; font-weight: 700; color: #6366F1; letter-spacing: 0.5px; }
@ -298,7 +298,7 @@ body{overflow-x:hidden;}
.main-solution-head { max-width: 760px; margin-bottom: 54px; }
.main-solution-eyebrow { margin: 0 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .24em; color: #8b5cf6; opacity: 0.75; }
.main-solution-title { margin: 0; font-size: clamp(42px,5vw,76px); font-weight: 800; line-height: 1.02; letter-spacing: -.07em; color: #10142b; }
.main-solution-desc { margin: 24px 0 0; max-width: 620px; font-size: 17px; line-height: 1.8; font-weight: 500; color: rgba(16,20,43,.62); word-break: keep-all; }
.main-solution-desc { margin: 24px 0 0; max-width: 620px; font-size: 18px; line-height: 1.8; font-weight: 500; color: rgba(16,20,43,.62); word-break: keep-all; }
.main-solution-grid { display: flex; flex-direction: column; gap: 20px; }
.main-solution-card { border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 1fr 1.2fr; min-height: 320px; }
.main-solution-card--dark { background: #eef0ff; }
@ -306,8 +306,8 @@ body{overflow-x:hidden;}
.main-solution-card-left { padding: 40px; display: flex; flex-direction: column; justify-content: space-between; }
.main-solution-card-tag { display: inline-block; background: #1a1f5e; color: #fff; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; }
.main-solution-card-title { font-size: 34px; font-weight: 800; color: #10142b; letter-spacing: -.04em; margin: 0 0 12px; line-height: 1.2; }
.main-solution-card-title-sub { font-size: 12px; color: rgba(16,20,43,.35); font-weight: 500; margin: 0 0 10px; }
.main-solution-card-desc { font-size: 13px; color: rgba(16,20,43,.52); line-height: 1.75; margin: 0; }
.main-solution-card-title-sub { font-size: 14px; color: rgba(16,20,43,.35); font-weight: 500; margin: 0 0 10px; }
.main-solution-card-desc { font-size: 15px; color: rgba(16,20,43,.52); line-height: 1.75; margin: 0; }
.main-solution-card-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #10142b; background: #fff; padding: 9px 18px; border-radius: 999px; text-decoration: none; border: 1px solid rgba(26,31,94,0.1); transition: gap .2s; margin-top: 24px; width: fit-content; }
.main-solution-card-link:hover { gap: 12px; }
.main-solution-card-right { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; padding: 24px 24px 0; }
@ -508,7 +508,7 @@ body{overflow-x:hidden;}
.main-contact-form{padding:32px;border-radius:30px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);box-shadow:0 28px 80px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.16);backdrop-filter:blur(18px);}
.main-contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.main-contact-grid label{display:block;}
.main-contact-grid span{display:block;margin-bottom:8px;font-size:12px;font-weight:700;color:rgba(255,255,255,.82);}
.main-contact-grid span{display:block;margin-bottom:8px;font-size:14px;font-weight:700;color:rgba(255,255,255,.82);}
.main-contact-grid em{font-style:normal;color:#dbe3ff;}
.main-contact-grid input,.main-contact-grid textarea{width:100%;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.12);padding:14px 16px;font-size:14px;font-weight:500;color:#fff;outline:none;transition:border-color .3s ease,background .3s ease,box-shadow .3s ease;}
.main-contact-grid input::placeholder,.main-contact-grid textarea::placeholder{color:rgba(255,255,255,.38);}

Write Preview
Loading…
Cancel
Save