@charset "utf-8";
/* =====================================================
   인사말 — company/css/greeting.css
   Next-Aerospace 스타일 인터랙티브 레이아웃
   ===================================================== */

/* ──────────────────────────────────────────────
   공통 / 페이지 베이스
   ────────────────────────────────────────────── */
.page-greeting {padding-bottom:0; position:relative; overflow:hidden;}
.page-greeting .w1400 {position:relative;}

/* 섹션 진입 라벨 공통 */
.page-greeting .sec-label {display:inline-flex; align-items:center; gap:10px; font-size:var(--fs14); font-weight:600; color:var(--c_base1); letter-spacing:0.3em; text-transform:uppercase;}
.page-greeting .sec-label::before {content:""; display:inline-block; width:32px; height:1px; background:var(--c_base1);}

/* ============================================
   섹션 1: 인사말 본문 (.greeting-msg)
   ============================================ */
.greeting-msg {padding:140px 0 160px; background:#fff; position:relative;}
.greeting-msg::before {content:""; position:absolute; right:0; top:0; width:55%; height:380px; background:linear-gradient(180deg, rgba(241,247,244,0.5) 0%, transparent 100%); z-index:0;}
.greeting-msg::after {content:"GREETING"; position:absolute; left:-30px; bottom:60px; font-size:var(--fs200); font-weight:900; color:rgba(14,111,184,0.04); letter-spacing:-0.05em; line-height:1; pointer-events:none; z-index:0;}
.greeting-msg-inner {position:relative; z-index:1; display:grid; grid-template-columns:1fr 480px; gap:90px; align-items:center;}

.greeting-msg-txt {padding-right:10px;}
/* .greeting-msg-txt .sub-tit {display:inline-block; font-size:var(--fs14); font-weight:700; color:var(--c_base1); letter-spacing:0.3em; text-transform:uppercase; padding:8px 18px; border:1px solid var(--c_base1); border-radius:50px; margin-bottom:30px;} */
.greeting-msg-txt .main-tit {font-size:var(--fs48); font-weight:700; color:#000; line-height:1.3; letter-spacing:-0.025em; margin-bottom:42px;}
.greeting-msg-txt .main-tit br + {display:block;}

.greeting-msg-txt .lead {position:relative; padding:24px 28px; margin-bottom:30px; font-size:var(--fs18); font-weight:500; color:var(--c_base1); line-height:1.85; background:var(--bg1); border-left:4px solid var(--c_base1); border-radius:0 12px 12px 0;}
.greeting-msg-txt .lead::before {content:"\201C"; position:absolute; right:18px; top:8px; font-size:var(--fs60); line-height:1; color:var(--c_base1); opacity:0.25; font-family:Georgia, serif;}

.greeting-msg-txt .body-txt {font-size:var(--fs16); color:#555; line-height:1.95; margin-bottom:20px;}
.greeting-msg-txt .body-txt + .body-txt {margin-top:0;}

.greeting-msg-txt .sign {margin-top:42px; padding-top:24px; border-top:2px solid var(--c_base1); font-size:var(--fs18); color:#666; text-align:right;}
.greeting-msg-txt .sign strong {color:var(--c_base1); font-weight:800; font-size:var(--fs22); margin-left:10px; letter-spacing:0.05em;}

.greeting-msg-img {position:relative; aspect-ratio:4/5; border-radius:0 80px 0 80px; overflow:hidden; box-shadow:0 40px 80px rgba(11,46,74,0.18); transform:translateZ(0);}
.greeting-msg-img::before {content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(11,46,74,0.4) 100%); z-index:2; pointer-events:none;}
.greeting-msg-img::after {content:""; position:absolute; right:-30px; bottom:-30px; width:200px; height:200px; border:4px solid var(--c_base2); border-radius:0 60px 0 60px; z-index:-1;}
.greeting-msg-img img {width:100%; height:100%; object-fit:cover; transition:transform 1.5s cubic-bezier(0.16,1,0.3,1);}
.greeting-msg-img:hover img {transform:scale(1.06);}

/* ============================================
   섹션 2: 기업정신 — 수평 3-카드 인포그래픽
   ============================================ */
.greeting-spirit {position:relative; padding:140px 0 160px; background:linear-gradient(180deg, #ffffff 0%, var(--bg1) 100%); overflow:hidden;}
.greeting-spirit::before {content:""; position:absolute; top:80px; right:-160px; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle, rgba(43,168,74,0.08) 0%, transparent 65%); pointer-events:none;}
.greeting-spirit::after {content:""; position:absolute; bottom:-180px; left:-180px; width:540px; height:540px; border-radius:50%; background:radial-gradient(circle, rgba(14,111,184,0.07) 0%, transparent 65%); pointer-events:none;}

.spirit-head {position:relative; z-index:1; text-align:center; margin-bottom:70px;}
.spirit-head .spirit-label {display:inline-flex; align-items:center; gap:12px; font-size:var(--fs14); font-weight:600; color:var(--c_base2); letter-spacing:0.3em; text-transform:uppercase; margin-bottom:18px;}
.spirit-head .spirit-label::before,
.spirit-head .spirit-label::after {content:""; display:inline-block; width:36px; height:1px; background:var(--c_base2);}
.spirit-head .spirit-tit {font-size:var(--fs48); font-weight:700; color:#000; letter-spacing:-0.02em; line-height:1.25; margin-bottom:24px;}
.spirit-head .spirit-tit em {position:relative; font-style:normal; color:var(--c_base1); display:inline-block;}
.spirit-head .spirit-tit em::after {content:""; position:absolute; left:0; right:0; bottom:6px; height:10px; background:rgba(43,168,74,0.18); z-index:-1; border-radius:4px;}
.spirit-head .spirit-sub {font-size:var(--fs17); color:#555; line-height:1.9; max-width:820px; margin:0 auto;}
.spirit-head .spirit-sub strong {color:var(--c_base2); font-weight:700;}

.spirit-cards {position:relative; z-index:1; display:grid; grid-template-columns:repeat(3, 1fr); gap:50px;}

.spirit-card {position:relative; padding:56px 40px 44px; background:#fff; border:1px solid var(--border1); border-radius:24px; box-shadow:0 10px 30px rgba(11,46,74,0.04); overflow:hidden; transition:transform 0.6s cubic-bezier(0.16,1,0.3,1), box-shadow 0.6s, border-color 0.4s;}
.spirit-card::before {content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:linear-gradient(90deg, var(--c_base1), var(--c_base2)); transform:scaleX(0); transform-origin:left center; transition:transform 0.7s cubic-bezier(0.16,1,0.3,1);}
.spirit-card::after {content:""; position:absolute; right:-80px; bottom:-80px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(14,111,184,0.06) 0%, transparent 70%); opacity:0; transition:opacity 0.6s; pointer-events:none;}

.spirit-card-num {position:absolute; top:32px; right:36px; font-size:var(--fs48); font-weight:900; color:transparent; -webkit-text-stroke:1.5px rgba(14,111,184,0.18); text-stroke:1.5px rgba(14,111,184,0.18); line-height:1; letter-spacing:-0.03em; transition:color 0.5s, -webkit-text-stroke-color 0.5s;}

.spirit-card-icon {position:relative; width:72px; height:72px; display:flex; align-items:center; justify-content:center; border-radius:18px; margin-bottom:36px; transition:transform 0.6s cubic-bezier(0.16,1,0.3,1), background 0.5s;}
.spirit-card-icon svg {width:38px; height:38px; transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);}
.spirit-icon-human {background:linear-gradient(135deg, #FDECEA, #FBC9C4); color:#C0392B;}
.spirit-icon-tech  {background:linear-gradient(135deg, #F4ECFB, #DCC8EF); color:#7D3C98;}
.spirit-icon-trust {background:linear-gradient(135deg, #E8F7EE, #BFE9CE); color:#1E8449;}

.spirit-card-tag {font-size:var(--fs13); font-weight:600; color:var(--c_base1); letter-spacing:0.25em; text-transform:uppercase; margin-bottom:10px;}
.spirit-card-tit {font-size:var(--fs36); font-weight:800; color:#000; letter-spacing:-0.02em; line-height:1.2; margin-bottom:20px;}
.spirit-card-line {width:36px; height:3px; background:var(--c_base1); margin-bottom:22px; transition:width 0.6s cubic-bezier(0.16,1,0.3,1);}
.spirit-card-desc {font-size:var(--fs16); color:#666; line-height:1.85;}

.spirit-card-arrow {position:relative; z-index:2; margin-top:36px; width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--bg1); color:var(--c_base1); transition:background 0.4s, color 0.4s, transform 0.5s;}
.spirit-card-arrow svg {width:22px; height:22px; transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);}

/* hover 인터랙션 */
.spirit-card:hover {transform:translateY(-14px); box-shadow:0 30px 60px rgba(11,46,74,0.14); border-color:transparent;}
.spirit-card:hover::before {transform:scaleX(1);}
.spirit-card:hover::after {opacity:1;}
.spirit-card:hover .spirit-card-num {color:var(--c_base1); -webkit-text-stroke-color:var(--c_base1);}
.spirit-card:hover .spirit-card-icon {transform:scale(1.08) rotate(-4deg);}
.spirit-card:hover .spirit-card-icon svg {transform:scale(1.1);}
.spirit-card:hover .spirit-card-line {width:64px;}
.spirit-card:hover .spirit-card-tit {color:var(--c_base1);}
.spirit-card:hover .spirit-card-arrow {background:var(--c_base1); color:#fff; transform:rotate(-12deg);}
.spirit-card:hover .spirit-card-arrow svg {transform:translateX(3px);}

/* ============================================
   섹션 3: 핵심 사업 키워드 (.greeting-keywords)
   ============================================ */
.greeting-keywords {position:relative; padding:140px 0 160px; background:url(/images/company/img_greeting_02.WEBP)center /cover no-repeat; overflow:hidden;}
.greeting-keywords::before {content:""; position:absolute; left:0; top:0; width:100% ; height:100%; background:rgba(0,0,0,.2);}
/* .greeting-keywords::after {content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size:60px 60px; pointer-events:none; opacity:0.6;} */

.greeting-keywords .kw-head {position:relative; z-index:2; text-align:center; margin-bottom:70px;}
.greeting-keywords .kw-copy {font-size:var(--fs40); font-weight:800; color:#fff; line-height:1.4; letter-spacing:-0.02em; margin-bottom:28px;}
/* .greeting-keywords .kw-copy em {position:relative; font-style:normal; color:#fff; background:linear-gradient(120deg, var(--c_base2), var(--c_base4)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; padding:0 4px;} */
.greeting-keywords .kw-sub {font-size:var(--fs16); color:rgba(255,255,255,0.8); line-height:1.9;}
.greeting-keywords .kw-thanks {margin-top:24px; font-size:var(--fs20); font-weight:700; color:#fff; letter-spacing:0.05em;}

.greeting-keywords .kw-cards {position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:60px;}
.greeting-keywords .kw-card {position:relative; display:block; padding:42px 32px 32px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.15); border-radius:18px; backdrop-filter:blur(8px); text-decoration:none; overflow:hidden; transition:all 0.5s cubic-bezier(0.16,1,0.3,1);}
.greeting-keywords .kw-card::before {content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--c_base3); transform:scaleX(0); transform-origin:left center; transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);}
.greeting-keywords .kw-card::after {content:""; position:absolute; right:-50%; top:-50%; width:200%; height:200%; background:radial-gradient(circle, rgba(91,194,231,0.15) 0%, transparent 50%); opacity:0; transition:opacity 0.6s;}
.greeting-keywords .kw-card:hover {transform:translateY(-10px); background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.35);}
.greeting-keywords .kw-card:hover::before {transform:scaleX(1);}
.greeting-keywords .kw-card:hover::after {opacity:1;}
.greeting-keywords .kw-card:hover .kw-card-arrow {transform:translateX(8px);}
/* .greeting-keywords .kw-card:hover .kw-card-tit {color:var(--c_base4);} */

.greeting-keywords .kw-card-eng {position:relative; z-index:2; display:block; font-size:var(--fs13); font-weight:600; color:var(--c_base3); letter-spacing:0.2em; text-transform:uppercase; margin-bottom:18px;}
.greeting-keywords .kw-card-tit {position:relative; z-index:2; display:block; font-size:var(--fs22); font-weight:800; color:#fff; line-height:1.35; letter-spacing:-0.01em; transition:color 0.4s;}
.greeting-keywords .kw-card-arrow {position:relative; z-index:2; display:block; margin-top:36px; font-size:var(--fs24); font-weight:300; color:rgba(255,255,255,0.6); transition:transform 0.4s, color 0.4s;}

.greeting-keywords .kw-sign {position:relative; z-index:2; text-align:center; font-size:var(--fs18); color:rgba(255,255,255,0.7); letter-spacing:0.05em;}
.greeting-keywords .kw-sign strong {color:#fff; font-weight:800; margin-left:8px;}

/* ─────────────────────────────────────────────────────────────
   태블릿 (~1199px)
   ───────────────────────────────────────────────────────────── */
@media screen and (max-width: 1199px) {
	
	/* 섹션 1 */
	.greeting-msg {padding:80px 0 100px;}
	.greeting-msg-inner {display:flex; flex-direction:column-reverse; gap:40px;}
	.greeting-msg-txt .sub-tit {display:inline-block;padding:7px 16px; border-radius:50px; margin-bottom:22px;}
	.greeting-msg-txt .main-tit {margin-bottom:30px;}
	.greeting-msg-txt .lead {position:relative; padding:20px 22px; margin-bottom:24px; }
	.greeting-msg-txt .body-txt {color:#555; line-height:1.9; margin-bottom:16px;}
	.greeting-msg-txt .sign {margin-top:32px; padding-top:20px;  text-align:right;}
	.greeting-msg-txt .sign strong {margin-left:8px;}
	.greeting-msg-img {position:relative; aspect-ratio:16/10; border-radius:0 40px 0 40px; overflow:hidden; box-shadow:0 24px 50px rgba(11,46,74,0.18);}
	/* .greeting-msg-img img {width:100%; height:100%; object-fit:cover;} */

	/* 섹션 2 */
	.greeting-spirit {padding:80px 0 90px; }
	.spirit-head {text-align:center; margin-bottom:40px;}
	.spirit-head .spirit-label {text-transform:uppercase; margin-bottom:14px;}
	.spirit-head .spirit-label::before,
	.spirit-head .spirit-label::after {}
	.spirit-head .spirit-tit {line-height:1.3; margin-bottom:18px;}

	.spirit-cards {display:grid; grid-template-columns:1fr; gap:16px;}
	.spirit-card {position:relative; padding:36px 28px 30px;overflow:hidden;}
	.spirit-card::before {content:""; position:absolute; left:0; top:0; width:100%; height:3px; }
	.spirit-card-num {position:absolute; top:24px; right:28px; font-size:var(--fs36); font-weight:900; color:transparent; -webkit-text-stroke:1.2px rgba(14,111,184,0.18); line-height:1;}
	.spirit-card-icon {width:60px; height:60px; display:flex; align-items:center; justify-content:center; border-radius:14px; margin-bottom:22px;}
	.spirit-card-icon svg {width:30px; height:30px;}
	.spirit-card-tag { text-transform:uppercase; margin-bottom:8px;}
	.spirit-card-tit {margin-bottom:14px;}
	.spirit-card-line {width:30px; height:2px; margin-bottom:16px;}
	.spirit-card-desc {}
	.spirit-card-arrow {margin-top:24px; width:42px; height:42px; display:flex; align-items:center; justify-content:center;}
	.spirit-card-arrow svg {width:20px; height:20px;}

	/* 섹션 3 */
	.greeting-keywords {position:relative; padding:80px 40px; background:url(/images/company/img_greeting_02.WEBP)center /cover no-repeat; overflow:hidden;}
	.greeting-keywords::before {content:""; position:absolute; inset:0; background:rgba(0,0,0,.2);}
	
	.greeting-keywords .kw-head {position:relative; z-index:2; text-align:center; margin-bottom:40px;}
	.greeting-keywords .kw-copy {margin-bottom:20px;}
	.greeting-keywords .kw-sub {}
	.greeting-keywords .kw-thanks {margin-top:18px;}

	.greeting-keywords .kw-cards {position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:40px;}
	.greeting-keywords .kw-card {position:relative; display:block; padding:30px 24px 24px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.15); border-radius:14px; text-decoration:none;}
	.greeting-keywords .kw-card-eng {margin-bottom:12px;}
	.greeting-keywords .kw-card-tit {}
	.greeting-keywords .kw-card-arrow {display:block; margin-top:24px; font-weight:300;}
	.greeting-keywords .kw-sign {}
	.greeting-keywords .kw-sign strong {margin-left:6px;}

}

/* ─────────────────────────────────────────────────────────────
   모바일 (~767px)
   ───────────────────────────────────────────────────────────── */
@media screen and (max-width: 767px) {
	.greeting-msg {padding:50px 0 60px;}
	.greeting-msg-inner {gap:28px;}
	.greeting-msg-txt .main-tit {margin-bottom:22px;}
	.greeting-msg-txt .lead {padding:16px 18px;}
	.greeting-msg-img {aspect-ratio:4/3; border-radius:0 24px 0 24px;}

	.greeting-spirit {padding:50px 0 60px;}
	.spirit-head {margin-bottom:28px;}
	.spirit-card {padding:28px 22px 24px; border-radius:14px;}
	.spirit-card-num {top:18px; right:22px;}
	.spirit-card-icon {width:54px; height:54px; margin-bottom:18px;}
	.spirit-card-icon svg {width:26px; height:26px;}
	.spirit-card-tit {margin-bottom:12px;}
	.spirit-card-desc {}
	.spirit-card-arrow {margin-top:20px; width:38px; height:38px;}

	.greeting-keywords {padding:50px 0 60px;}
	.greeting-keywords .kw-copy {margin-bottom:16px;}
	.greeting-keywords .kw-sub {}
	.greeting-keywords .kw-cards {grid-template-columns:1fr; gap:12px; margin-bottom:32px;}
	.greeting-keywords .kw-card {padding:24px 20px 20px;}
	.greeting-keywords .kw-card-arrow {margin-top:18px;}
}

/* ─────────────────────────────────────────────────────────────
   Keyframes — 인터랙티브 애니메이션
   ───────────────────────────────────────────────────────────── */
@keyframes spirit-rotate {
	from {transform:rotate(0deg);}
	to   {transform:rotate(360deg);}
}

@keyframes spirit-pulse {
	0%, 100% {transform:translate(-50%,-50%) scale(1);}
	50%      {transform:translate(-50%,-50%) scale(1.04);}
}

@keyframes spirit-ripple {
	0%   {transform:scale(1); opacity:0.3;}
	100% {transform:scale(1.35); opacity:0;}
}

/* 모션 감도 낮은 사용자 — 애니메이션 정지 */
@media (prefers-reduced-motion: reduce) {
	.spirit-diagram .ring-wrap::before,
	.spirit-diagram .ring-center,
	.spirit-diagram .ring-center::before,
	.spirit-diagram .ring-center::after {animation:none !important;}
}