/* 글로벌/초기화 */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Pretendard','Noto Sans KR',sans-serif; color:#222; background:#fff; }
a { text-decoration:none; color:inherit; }

/* NAVBAR (클릭 문제 해결을 위해 z-index와 position: relative 추가) */
.navbar {
  position: fixed;
  top: 0; left: 0; width: 100%;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  z-index: 1000;
  transition: all 0.4s ease;
}
.navbar.scrolled {
  background: rgba(255,255,255,0.8);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.nav-container {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 10%;
}
.nav-left { display: flex; align-items: center; gap: 10px; }
.nav-logo { height: 38px; }
.nav-links {
  display: flex; gap: 30px; list-style: none;
  position: relative; /* 클릭 가능 영역을 확실히 올림 */
  z-index: 1001;     /* navbar(1000)보다 높게 설정 */
}
.nav-links a {
  color: #1e3a8a; font-weight: 600; transition: 0.3s;
  position: relative;
  z-index: 1002;
  /* 아래 두 줄 추가 */
  display: block; /* 블록 요소로 변경 */
  padding: 5px 0; /* 상하 패딩 추가로 클릭 영역 확대 */
}
.nav-links a:hover {
  color: #2563eb;
}

/* --- 메인 페이지 공통 요소 --- */

/* HERO */
.hero {
  position:relative; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff;
}
.hero-bg {
  position:absolute; width:100%; height:100%; object-fit:cover; top:0; left:0;
  z-index:-2;
}
.hero-overlay {
  position:absolute; inset:0; background:rgba(0,0,30,0.4); z-index:-1;
}
.hero-content h1 {
  font-size:3rem; font-weight:800; line-height:1.3;
}
.hero-content h1 span { color:#4da3ff; }
.hero-content p { margin-top:10px; font-size:1.1rem; opacity:0.9; }
.hero-logo { width:120px; margin-bottom:20px; }
.hero-btns { margin-top:25px; display:flex; justify-content:center; gap:15px; }
.btn-main, .btn-sub {
  padding:12px 28px; border-radius:30px; font-weight:600;
  transition:0.3s;
}
.btn-main { background:#2563eb; color:#fff; }
.btn-main:hover { background:#1e4fc7; }
.btn-sub { border:2px solid #fff; color:#fff; }
.btn-sub:hover { background:#fff; color:#2563eb; }

/* ===== ABOUT 섹션 강화 ===== */
.about-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(240,245,255,0.9));
  backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 50px;
  line-height: 1.9;
  box-shadow: 0 8px 25px rgba(0,0,0,0.05);
  text-align: justify;
}

.about-card p {
  font-size: 1.05rem;
  color: #222;
  margin-bottom: 25px;
}

.about-card .highlight {
  color: #2563eb;
  font-weight: 800;
  font-size: 1.1rem;
}

.about-quote {
  background: #f0f7ff;
  border-left: 5px solid #2563eb;
  border-radius: 10px;
  padding: 25px;
  margin: 30px 0;
  font-size: 1.1rem;
  color: #1e3a8a;
  text-align: center;
  line-height: 1.8;
  font-weight: 500;
}

.about-quote i {
  color: #2563eb;
  margin: 0 8px;
}


/* SECTION */
.section {
  padding:80px 10%; text-align:center;
}
.section h2 { font-size:2.2rem; font-weight:700; margin-bottom:10px; color:#2563eb; }
.section .subtitle { font-size:1rem; color:#666; margin-bottom:40px; }

/* SERVICES */
.card-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px;
}
/* 공통 서비스 카드 */
.service-card {
  background:#fff; border-radius:16px; box-shadow:0 6px 20px rgba(0,0,0,0.05);
  padding:30px; transition:0.3s; cursor:pointer;
}
.service-card:hover { transform:translateY(-8px); box-shadow:0 10px 25px rgba(0,0,0,0.08); }

.service-card img {
  width: 230px;
  margin-bottom: 20px;
  transition: 0.3s;
}
.service-card:hover img {
  transform: scale(1.05);
}
.service-card h3 { color:#2563eb; font-size:1.2rem; margin-bottom:10px; }
.service-card p { color:#444; font-size:0.95rem; margin-bottom:15px; }
/* =============================== */
/* INDEX - CANCO 소개 섹션 (프리미엄 정리형 스타일) */
/* =============================== */
#about {
  background: #ffffff !important; /* ✅ 완전 흰색 배경 */
  padding: 120px 10% 100px 10%;
  text-align: center;
}

#about h2 {
  color: #1e3a8a;
  font-weight: 1100;
  font-size: 2.2rem;
  margin-bottom: 15px;
}

#about .subtitle {
  color: #5a5a5a;
  font-size: 1.05rem;
  margin-bottom: 50px;
}

/* ===== ABOUT 섹션 (박스 없이 자연스럽게 표시) ===== */
.about-card {
  background: none !important;      /* 배경 제거 */
  box-shadow: none !important;      /* 그림자 제거 */
  backdrop-filter: none !important; /* 블러 제거 */
  border-radius: 0 !important;      /* 둥근 모서리 제거 */
  padding: 40px 0;                  /* 상하 여백만 남기고 좌우 정리 */
  line-height: 1.9;
  text-align: justify;
  max-width: 1000px;
  margin: 0 auto;
}

.about-card p {
  font-size: 1.08rem;
  color: #222;
  margin-bottom: 28px; /* 문단 간격 넉넉하게 */
  text-align: justify;
}

.about-card strong {
  color: #1e3a8a;
  font-weight: 700;
}


/* 인용문(about-quote) 있을 경우 */
#about .about-quote {
  background: #f9fbff;
  border-left: 5px solid #2563eb;
  border-radius: 10px;
  padding: 25px 30px;
  margin: 40px auto;
  font-size: 1.1rem;
  color: #1e3a8a;
  line-height: 1.8;
  text-align: center;
  font-weight: 500;
  max-width: 800px;
}

/* 반응형 */
@media (max-width: 768px) {
  #about .about-card {
    padding: 40px 25px;
    max-width: 95%;
  }
  #about .about-card p {
    font-size: 1rem;
    margin-bottom: 20px;
  }
}

/* =============================== */
/* INDEX 사업영역 (4개 1줄 고정 레이아웃) */
/* =============================== */
#business .service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4개 1줄 고정 */
  gap: 40px;
  justify-items: center;
  align-items: stretch;
  margin-top: 50px;
}

/* 카드 높이 통일 및 텍스트 중앙 정렬 */
#business .service-card {
  height: 100%;
  text-align: center;
  padding: 40px 30px;
}

/* 태블릿 이하에서는 2줄로 자동 전환 */
@media (max-width: 1024px) {
  #business .service-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

/* 모바일에서는 1열로 전환 */
@media (max-width: 600px) {
  #business .service-grid {
    grid-template-columns: 1fr;
  }
}
/* =============================== */
/* INDEX 사업영역 (화이트 + 연한 회색 보더) */
/* =============================== */
#business.service-section {
  background: #ffffff !important; /* 완전 흰색 배경 */
}

#business.service-section .service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  justify-items: center;
  align-items: stretch;
  margin-top: 50px;
}

#business.service-section .service-card {
  height: 100%;
  text-align: center;
  padding: 40px 30px;
  background: #fff;
  border: 1px solid #e5e7eb; /* ✅ 연한 회색 테두리 */
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03); /* ✅ 은은한 그림자 */
  transition: all 0.35s ease;
}

#business.service-section .service-card:hover {
  transform: translateY(-6px);
  border-color: #d1d5db; /* hover 시 테두리 약간 진하게 */
  box-shadow: 0 10px 22px rgba(0,0,0,0.05);
}

#business.service-section .service-card i {
  font-size: 2.8rem;
  color: #2563eb;
  margin-bottom: 15px;
  transition: 0.3s;
}

#business.service-section .service-card h3 {
  color: #1e3a8a;
  font-weight: 700;
  margin-bottom: 10px;
}

#business.service-section .service-card p {
  color: #444;
  font-size: 0.96rem;
  line-height: 1.7;
}

/* 반응형 */
@media (max-width: 1024px) {
  #business.service-section .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  #business.service-section .service-grid {
    grid-template-columns: 1fr;
  }
}


/* 공통 아이콘 카드 (i 태그 사용 시) */
.service-card i {
  display: block;
  font-size: 3.5rem; /* 아이콘 크기 통일 */
  margin: 0 auto 15px auto;
  color: #2563eb;
  transition: all 0.3s ease;
  text-shadow: 0 0 8px rgba(37,99,235,0.2);
}
.service-card:hover i {
  transform: scale(1.1);
  color: #1e4fc7;
  text-shadow: 0 0 15px rgba(37,99,235,0.5);
}

/* ABOUT 섹션 배경 */
.about { background:#f8fbff; color:#333; }

/* CONTACT */
.contact-grid { display:flex; flex-wrap:wrap; gap:40px; justify-content:center; margin-top:40px; }
.contact-info { flex:1; min-width:260px; text-align:left; }
.contact-info p { font-size:1rem; margin-bottom:12px; color:#333; }
.contact-form { flex:1; min-width:300px; display:flex; flex-direction:column; gap:12px; }
.contact-form input, .contact-form textarea {
  width:100%; padding:12px 16px; border:1px solid #ccc; border-radius:10px; font-size:0.95rem;
}
.contact-form button {
  background:#2563eb; color:#fff; padding:12px 18px; border:none; border-radius:30px;
  font-size:1rem; cursor:pointer; transition:0.3s;
}
.contact-form button:hover { background:#1e4fc7; }

/* 협력사 아이콘 섹션 */
.partner-subtitle {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1e3a8a;
  margin-top: 40px;
  margin-bottom: 20px;
  text-align: center;
}

.partner-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 40px;
}

.partner-item {
  width: 180px;
  height: 100px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
  transition: 0.3s;
  padding: 15px;
}

.partner-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

.partner-item img {
  max-width: 120px;
  max-height: 50px;
  object-fit: contain;
  opacity: 0.9;
  transition: 0.3s;
}

.partner-item:hover img {
  transform: scale(1.05);
  opacity: 1;
}

.partner-item p {
  font-size: 0.85rem;
  color: #333;
  margin-top: 8px;
}

/* 협력사 이미지 스타일 (아이콘과 이미지 둘 다 사용 시) */
.partner-item img {
  width: 100px;
  height: auto;
  opacity: 0.9;
  transition: 0.3s;
  margin-bottom: 10px;
}
.partner-item:hover img { transform: scale(1.05); opacity: 1; }

/* --- CEO 페이지 --- */
.ceo-hero-static {
  background: url('../img/ceo_banner.png') center/cover no-repeat;
  height: 55vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.ceo-hero-static .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}
.ceo-hero-static .hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 0 20px;
}
.ceo-hero-static h1 { font-size: 2.5rem; } /* h1 크기 조정 */
.ceo-hero-static h1 span {
  color: #4da3ff;
  font-weight: 800;
}
.ceo-hero-static p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
  margin-top: 10px;
}

/* CEO 메시지 카드 */
.ceo-card {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  box-shadow: 0 6px 25px rgba(0,0,0,0.05);
  padding: 40px;
  max-width: 1100px; /* 최대 폭 설정 */
  margin: 0 auto;
}
.ceo-photo-wrap { flex: 1; text-align: center; min-width: 260px; }
.ceo-photo {
  width: 260px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.ceo-message {
  flex: 2;
  min-width: 320px;
  text-align: left;
}
.ceo-message h2 {
  color: #2563eb;
  margin-bottom: 15px;
}
.ceo-message p {
  line-height: 1.8;
  margin-bottom: 10px;
  color: #333;
}
.ceo-message .signature {
  margin-top: 20px;
  font-family: 'Nanum Brush Script', cursive;
  font-size: 1.5rem;
  color: #222;
}

/* 비전 섹션 */
.ceo-vision {
  background: #f8fbff;
  text-align: center;
}
.ceo-vision p {
  font-size: 1.1rem;
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto 40px auto;
  color: #333;
}
.vision-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}
/* CEO 페이지 비전 아이템 - CEO 페이지 전용 스타일 */
.vision-item i {
  color: #2563eb;
  font-size: 3rem; /* 아이콘 크기 조정 */
}
.vision-item p {
  margin-top: 10px;
  color: #0d1b2a;
  font-weight: 600;
}

/* --- ABOUT PAGE --- */

/* HERO */
.about-hero {
  background: linear-gradient(135deg, #0b1120 0%, #1e3a8a 100%),
              url('../img/about_banner.jpg') center/cover no-repeat;
  height: 45vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  position: relative;
}
.about-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}
.about-hero .hero-content {
  position: relative;
  z-index: 1;
}
.about-hero h1 span {
  color: #4da3ff;
  font-weight: 800;
}

/* 회사소개 - CANCO 소개 (glass-card 개선 버전) */
.about-intro {
  background: #fff; /* 완전 흰색 배경 */
}

.about-intro .glass-card {
  background: none; /* ✅ 박스 배경 제거 */
  box-shadow: none; /* ✅ 그림자 제거 */
  border: none; /* ✅ 경계선 제거 */
  padding: 40px 10%;
  text-align: left;
  line-height: 1.9;
  color: #222;
  max-width: 1100px;
  margin: 0 auto;
}

.about-intro .glass-card h2 {
  color: #325091;
  text-align: center;
  font-size: 2rem;
  font-weight: 1000;
  margin-bottom: 30px;
}

.about-intro .glass-card p {
  font-size: 1.08rem;
  line-height: 1.9;
  color: #333;
  margin-bottom: 28px;
  text-align: justify;
}

/* 문단 간격을 index 스타일처럼 부드럽게 */
.about-intro .glass-card p strong {
  color: #274b99;
  font-weight: 700;
}


/* COMPANY INTRO */
.glass-card {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  padding: 40px;
  max-width: 900px;
  margin: 0 auto;
  text-align: left; /* 텍스트 정렬 추가 */
}
.glass-card h2 {
  color: #2563eb;
  margin-bottom: 15px;
  text-align: center; /* 제목만 중앙 정렬 */
}
.glass-card p {
  line-height: 1.8;
  color: #333;
}

/* HISTORY TIMELINE */
.timeline {
  max-width: 800px;
  margin: 40px auto;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  height: 100%;
  background: #2563eb;
  transform: translateX(-50%);
}
.timeline-item {
  position: relative;
  width: 50%;
  padding: 20px;
}
.timeline-item:nth-child(odd) { left: 0; text-align: right; }
.timeline-item:nth-child(even) { left: 50%; }
.timeline-item .year {
  font-weight: 800;
  color: #2563eb;
  font-size: 1.3rem;
}
.timeline-item .content {
  background: rgba(255,255,255,0.8);
  padding: 15px;
  border-radius: 10px;
  margin-top: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  text-align: left; /* 내용 정렬 추가 */
}
.timeline-item:nth-child(odd) .content { text-align: right; } /* 홀수번째 항목은 내용 오른쪽 정렬 */

/* VISION (ABOUT PAGE) */
.vision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  margin-top: 30px;
}
.vision-item {
  text-align: center;
  background: rgba(255,255,255,0.7);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  padding: 30px;
  transition: 0.3s;
}
.vision-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
.vision-item i {
  color: #2563eb;
  font-size: 3rem; /* 아이콘 크기 조정 */
  margin-bottom: 10px;
}
.vision-item h3 {
  color: #1e3a8a;
  margin-bottom: 8px;
}

/* --- 조직도: 고정형 가로 --- */
.org-fixed {
  width: 1100px; /* 고정 폭 */
  margin: 0 auto;
  position: relative;
  text-align: center;
}

/* 대표이사 */
.org-fixed .ceo {
  display: inline-block;
  background: #1e3a8a;
  color: #fff;
  font-weight: 700;
  font-size: 1.3rem;
  padding: 14px 40px;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  position: relative;
  z-index: 2;
}
/* 대표이사 아래 세로 연결선 */
.org-fixed .ceo::after {
  content: "";
  position: absolute;
  bottom: -28px;
  left: 50%;
  width: 2px;
  height: 28px;
  background: #2563eb;
  transform: translateX(-50%);
}

/* 부서 행 */
.departments {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  position: relative;
}

/* 부서 행 상단 수평 연결선 */
.departments::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 5%;
  width: 90%;
  height: 2px;
  background: #2563eb;
}

/* 부서 박스 */
.dept {
  position: relative;
}
/* 부서 위쪽 세로선 */
.dept::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 50%;
  width: 2px;
  height: 28px;
  background: #2563eb;
  transform: translateX(-50%);
}

.dept-name {
  background: #2563eb;
  color: white;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 10px;
  margin-bottom: 10px;
  display: inline-block;
  min-width: 150px;
}

.teams {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.teams span {
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.3);
  border-radius: 8px;
  padding: 6px 14px;
  color: #0d1b2a;
  font-size: 0.9rem;
  transition: 0.3s;
}
.teams span:hover {
  background: rgba(37,99,235,0.15);
  transform: scale(1.05);
}

/* 헤더 클릭 막힘 완전 방지 */
header.navbar {
  z-index: 9999 !important;
  pointer-events: auto !important;
}
/* 헤더 고정에 따른 본문 상단 여백 확보 */
body {
  padding-top: 80px; /* 헤더 높이만큼 공간 확보 */
  }

 /* =============================== */
/* 🔷 SERVICE PAGE (services.php 전용 통합 스타일) */
/* =============================== */

/* HERO: OUR SERVICES */
.service-hero {
  position: relative;
  height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color: #1e3a8a;
  overflow: hidden;
}

.service-hero .hero-overlay-light {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(6px);
  z-index: 0;
}

.service-hero .hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  text-align: center;
  margin: 0 auto;
}

.service-hero h1 {
  font-size: 3rem;
  font-weight: 800;
  color: #2563eb;
  letter-spacing: -0.5px;
}

.service-hero p {
  font-size: 1.1rem;
  color: #444;
  margin-top: 10px;
}

/* =============================== */
/* SERVICE ICON GRID (사업 영역) */
/* =============================== */
/* =============================== */
/* 서비스 섹션 전체 배경색 완전 화이트로 변경 */
/* =============================== */
.service-section {
  background: #ffffff !important;   /* ✅ 완전 흰색 고정 */
  padding: 100px 10%;
  text-align: center;
}

/* 추가로 혹시 상위 section 기본색도 재정의 */
.section {
  background: #ffffff !important;
}

/* AOS나 내부 카드 배경 영향 제거 */
.service-card-wide,
.service-card-wide.reverse {
  background: #ffffff !important;
}

/* 카드 스타일 */
.service-card {
  background: rgba(255,255,255,0.9);
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  padding: 40px 30px;
  transition: all 0.35s ease;
  cursor: pointer;
  border: 1px solid rgba(77,163,255,0.08);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(37,99,235,0.08);
  background: rgba(255,255,255,0.95);
}

/* 아이콘 */
.service-card i {
  display: block;
  font-size: 3rem;
  margin: 0 auto 18px auto;
  color: #4da3ff; /* 연한 블루 */
  font-weight: 400;
  text-shadow: 0 0 6px rgba(77,163,255,0.15);
  transition: all 0.35s ease;
  opacity: 0.9;
}

.service-card:hover i {
  color: #2563eb;
  transform: scale(1.08);
  opacity: 1;
  text-shadow: 0 0 12px rgba(37,99,235,0.25);
}

/* 제목/내용 */
.service-card h3 {
  color: #1e3a8a;
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 1.2rem;
}

.service-card p {
  color: #444;
  font-size: 0.96rem;
  line-height: 1.7;
}

/* =============================== */
/* FEATURE SECTION */
/* =============================== */
.service-feature {
  background: #ffffff;
  padding: 100px 10%;
  display: flex;
  flex-direction: column;
  gap: 100px;
  align-items: center;
  box-sizing: border-box;
}

.feature-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}

.feature-item.reverse {
  flex-direction: row-reverse;
}

.feature-text {
  flex: 1 1 450px;
  min-width: 300px;
}

.feature-text h2 {
  color: #254486;
  font-size: 1.8rem;
  margin-bottom: 15px;
  font-weight: 700;
}

.feature-text p {
  color: #333;
  line-height: 1.8;
  font-size: 1.05rem;
}

.feature-image {
  flex: 1 1 450px;
  min-width: 300px;
  text-align: center;
}

.feature-image img {
  width: 100%;
  max-width: 980px;
  border-radius: none;
  box-shadow: none;
  transition: 0.4s ease;
}

.feature-image img:hover {
  transform: scale(1.03);
}

/* =============================== */
/* CTA SECTION */
/* =============================== */
.cta-section {
  width: 100%;
  background: linear-gradient(135deg, #4da3ff, #1e3a8a);
  color: #fff;
  text-align: center;
  padding: 100px 10%;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  box-shadow: 0 -8px 25px rgba(0,0,0,0.08);
}

.cta-section h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 15px;
  line-height: 1.4;
}

.cta-section p {
  font-size: 1.05rem;
  opacity: 0.95;
  margin-bottom: 40px;
}

.cta-section .btn-main {
  background: #fff;
  color: #1e3a8a;
  padding: 14px 36px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 1.05rem;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255,255,255,0.3);
}

.cta-section .btn-main:hover {
  background: #eaf2ff;
  transform: translateY(-4px);
}

/* =============================== */
/* 반응형 */
/* =============================== */
@media (max-width: 1024px) {
  .feature-item,
  .feature-item.reverse {
    flex-direction: column;
    text-align: center;
  }
  .feature-text { text-align: center; }
  .feature-image img { max-width: 90%; }
}

@media (max-width: 768px) {
  .service-section { padding: 80px 6%; }
  .service-card { padding: 30px 20px; }
  .service-card i { font-size: 2.5rem; }
  .cta-section { padding: 80px 8%; border-top-left-radius: 30px; border-top-right-radius: 30px; }
  .cta-section h2 { font-size: 1.6rem; }
}


/* =============================== */
/* FOOTER STRUCTURE & FAMILY SITE */
/* =============================== */
footer {
  background: linear-gradient(90deg, #0a192f, #102a43);
  color: #fff;
  padding: 40px 10%;
  display: flex;
  justify-content: center;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1400px;
  align-items: center;
  gap: 20px;
}

.footer-left p {
  margin: 5px 0;
  font-size: 0.95rem;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-sns a {
  color: #fff;
  font-size: 1.4rem;
  transition: 0.3s;
}

.footer-sns a:hover {
  color: #4da3ff;
}

/* ✅ 패밀리 사이트 드롭박스 */
.family-site {
  display: flex;
  align-items: center;
  gap: 8px;
}

.family-site label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
}

.family-site select {
  background: #102a43;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: 0.3s;
}

.family-site select:hover {
  background: #173a63;
  border-color: rgba(255,255,255,0.6);
}

.family-site option {
  color: #000;
}

/* 반응형 (모바일에서 수직 정렬) */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
  }

  .footer-right {
    flex-direction: column;
    gap: 10px;
  }

  .family-site {
    justify-content: center;
  }
}


/* --- 반응형 (모바일/태블릿 통합) --- */
@media (max-width: 1100px) {
  /* 조직도 고정 폭 해제 */
  .org-fixed { width: 100%; padding: 0 5%; }
}

@media (max-width: 768px) {
  /* 공통 */
  .section { padding: 60px 5%; }
  .nav-container { padding: 10px 5%; }
  .hero-content h1 { font-size: 2.2rem; }
  .hero-content p { font-size: 1rem; }
  .section h2 { font-size: 1.8rem; }
  .section .subtitle { margin-bottom: 30px; }

  /* CEO 페이지 */
  .ceo-card { flex-direction: column; padding: 25px; gap: 30px; }
  .ceo-photo { width: 200px; }
  .ceo-message h2 { font-size: 1.5rem; }
  .ceo-message p { font-size: 0.95rem; }
  .vision-item i { font-size: 2.5rem; }
  .ceo-hero-static { height: 40vh; }
  .ceo-hero-static h1 { font-size: 2rem; }

  /* 협력사 아이콘 */
  .partner-item { width: 140px; padding: 15px 10px; }
  .partner-item p { font-size: 0.85rem; }
  .service-card i { font-size: 2.2rem !important; }

  /* HISTORY TIMELINE */
  .timeline::before { left: 20px; transform: none; }
  .timeline-item { width: 100%; padding-left: 45px; left: 0; text-align: left !important; }
  .timeline-item:nth-child(even) { left: 0; }
  .timeline-item:nth-child(odd) .content { text-align: left; }
  .timeline-item .year { position: absolute; left: 0; }

  /* FOOTER */
  footer { flex-direction: column; text-align: center; gap: 20px; }
  .footer-right a { margin: 0 8px; }

  /* 조직도 (Org-fixed) */
  .departments { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
  .departments::before { display: none; } /* 수평선 제거 */
  .org-fixed .ceo::after, .dept::before { display: none; } /* 연결선 제거 */
  .dept-name { min-width: 100px; padding: 8px 10px; font-size: 0.9rem; }
}

/* 태블릿 (768px ~ 1100px) */
@media (min-width: 769px) and (max-width: 1100px) {
  .nav-container, .section, footer { padding: 10px 5%; }
}

/* =========================== */
/* TECHNOLOGY PAGE STYLING */
/* =========================== */

/* Hero */
.tech-hero {
  background: linear-gradient(135deg,#0b1120 0%,#1e3a8a 100%);
  color: #fff;
  text-align: center;
  padding: 160px 10% 100px 10%;
  position: relative;
}
.tech-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}
.tech-hero .hero-content {
  position: relative;
  z-index: 1;
}
.tech-hero h1 {
  font-size: 3rem;
  font-weight: 800;
}
.tech-hero h1 span { color: #4da3ff; }
.tech-hero p {
  font-size: 1.1rem;
  margin-top: 10px;
  color: rgba(255,255,255,0.9);
}

/* 기술카드 */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 40px;
  margin-top: 60px;
}
.tech-card {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 40px 30px;
  box-shadow: 0 6px 25px rgba(0,0,0,0.05);
  transition: 0.4s;
  text-align: center;
}
.tech-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.tech-card i {
  font-size: 2.8rem;
  color: #4da3ff;
  opacity: 0.85;
  transition: 0.3s;
}
.tech-card:hover i {
  color: #2563eb;
  opacity: 1;
  transform: scale(1.1);
}
.tech-card h3 {
  margin-top: 15px;
  color: #273864;
  font-weight: 700;
}
.tech-card p {
  color: #333;
  font-size: 0.95rem;
  margin-top: 10px;
  line-height: 1.7;
}

/* 파트너 */
.partner-section {
  background: #f8fbff;
}
.partner-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
}
.partner-item {
  width: 160px;
  text-align: center;
  background: rgba(255,255,255,0.7);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  padding: 25px 20px;
  transition: 0.3s;
}
.partner-item img {
  width: 80px;
  opacity: 0.9;
  transition: 0.3s;
}
.partner-item:hover img { transform: scale(1.05); opacity: 1; }
.partner-item p { margin-top: 8px; font-size: 0.9rem; color:#0d1b2a; font-weight:600; }


/* =========================== */
/* 서비스페이지 글 내용 */
/* =========================== */
/* =============================== */
/* SERVICE CARD WIDE (이미지 투명 효과 없이 Glass 카드 배경만) */
/* =============================== */
/* =============================== */
/* SERVICE PAGE 전체 화이트 + 카드 테두리 제거 버전 */
/* =============================== */
/* =============================== */
/* INDEX 사업영역 (완전 Flat, 테두리/글래스/그림자 없음) */
/* =============================== */
#business.service-section {
  background: #ffffff !important; /* 전체 흰색 배경 */
}

#business.service-section .service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  justify-items: center;
  align-items: stretch;
  margin-top: 50px;
}

#business.service-section .service-card {
  background: #ffffff;       /* ✅ 완전 흰색 */
  border: none;              /* ✅ 테두리 제거 */
  box-shadow: none;          /* ✅ 그림자 제거 */
  border-radius: 0;          /* ✅ 모서리 둥근 효과 제거 */
  text-align: center;
  padding: 40px 20px;
  transition: none;          /* ✅ hover 효과 제거 */
}

#business.service-section .service-card i {
  font-size: 2.8rem;
  color: #2563eb;
  margin-bottom: 15px;
}

#business.service-section .service-card h3 {
  color: #1e3a8a;
  font-weight: 700;
  margin-bottom: 10px;
}

#business.service-section .service-card p {
  color: #444;
  font-size: 0.96rem;
  line-height: 1.7;
}

/* 반응형 유지 */
@media (max-width: 1024px) {
  #business.service-section .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  #business.service-section .service-grid {
    grid-template-columns: 1fr;
  }
}
/* =============================== */
/* 서비스 상세 카드 텍스트 + 이미지 밸런스 수정 */
/* =============================== */

.service-card-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 70px;
  background: #fff;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 80px 10%;
  margin: 0 auto;
  max-width: 1300px;
  text-align: left;
}

.service-card-wide.reverse {
  flex-direction: row-reverse;
}

/* 텍스트 영역 */
.service-card-text {
  flex: 1;
  color: #222;
  line-height: 1.8;
}

.service-card-text h3 {
  font-size: 1.8rem;          /* 🔹 제목 크기 확실히 키움 */
  font-weight: 800;
  color: #1e3a8a;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.service-card-text h3 i {
  color: #2563eb;
  font-size: 2rem;
}

.service-card-text p {
  font-size: 1.1rem;          /* 🔹 설명문도 확대 */
  color: #333;
  opacity: 0.9;
  letter-spacing: -0.2px;
  line-height: 1.9;
  margin: 0;
}

/* 이미지 영역 */
.service-card-image {
  flex: 1.1;
  text-align: center;
}

.service-card-image img {
  width: 100%;
  max-width: 1000px;
  height: auto;
  border-radius: 0;        /* ✅ 둥근 모서리 제거 */
  box-shadow: none;        /* ✅ 그림자 완전 제거 */
  transition: none;        /* ✅ hover 애니메이션 제거 */
  filter: none;            /* ✅ 블러, 투명도, 밝기 등 모든 효과 제거 */
}

.service-card-image img:hover {
  transform: scale(1.02);
}

/* 반응형 */
@media (max-width: 1024px) {
  .service-card-wide,
  .service-card-wide.reverse {
    flex-direction: column;
    text-align: center;
    padding: 60px 8%;
  }

  .service-card-text h3 {
    justify-content: center;
  }
}
