@charset "UTF-8";
:root {
  /* 브랜드 컬러 — 인디고 네이비 (2026-08 변경, 이전 #1b61e2). 색 변경은 여기서만 */
  --brand:       #1E3A8A;
  --brand-dark:  #172C6B;   /* 호버·눌림 */
  --brand-tint:  #E9EDF8;   /* 연한 배경·칩 */
  --brand-hover: #D3DAF0;   /* 탭 호버 */
}
/* ==========================================================================
   autobase — 메인 (데스크톱 기준, 시안 1920px)
   ※ @media 는 이 파일에 쓰지 않는다. 반응형은 m.style.css 에만.
   ========================================================================== */

/* ── 기본 ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, ul, li { margin: 0; padding: 0; }

body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
ul { list-style: none; }
h1, h2 { font-size: inherit; font-weight: inherit; }

/* ── 공통 레이아웃 ───────────────────────────────────────────────────── */
/* 시안 컨테이너 1620px (1920 기준 좌우 여백 150px) */
.inner { width: 1620px; max-width: calc(100% - 40px); margin: 0 auto; }
/* 서브페이지 콘텐츠 컨테이너 1400px (좌우 여백 260px) */
.inner-sub { width: 1400px; max-width: calc(100% - 40px); margin: 0 auto; }

/* 섹션 간격 — 시안 전 구간 140px */
.ab, .pd, .tr, .nw, .ct, .ft { margin-top: 140px; }

/* ── 공통 타이포 / 버튼 ──────────────────────────────────────────────── */
.eyebrow {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  color: var(--brand);
}
/* 시안: 라벨 뒤 3px 원형 점 (베이스라인 정렬) */
.eyebrow::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-left: 3px;
  border-radius: 50%;
  background: var(--brand);
}

.sec-title { font-size: 48px; font-weight: 600; line-height: 1.3; }
.sec-desc  { font-size: 18px; font-weight: 400; line-height: 1.5; }

/* 버튼 — 레퍼런스 hanwharobotics `.cm-btn-wrap .cm-btn` + `.cm-fill-btn` (1rem=10px 실측)
   : 320×80 필 버튼, 파랑 채움(btn-style01), 2px 테두리 링(:before),
     호버 시 커서 위치에서 흰 원이 퍼지며(.cm-fill → ::after) 글자가 파랑으로 바뀐다.
   ::after 를 z-index:-1 로 두고 버튼 자체를 stacking context(z-index:0) 로 만들어
   흰 원이 배경 위·텍스트 아래에 오게 한다 (레퍼런스의 <em> 래핑 대체). */
.btn-line {
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 80px;
  border-radius: 40px;
  background: var(--brand);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: -0.036em;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  border: 0;                 /* <button> 에서도 동일 모양 */
  font-family: inherit;
  cursor: pointer;
  transition: color 0.5s;
}
.btn-line::before {          /* .sub-wrap .cm-fill-btn.btn-style01:before (제품 상세 적용값: 2px, 4rem) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 2px solid var(--brand);
  border-radius: 40px;
  box-sizing: border-box;
  pointer-events: none;
}
.btn-line::after {           /* .cm-fill — 커서 위치(--fx/--fy, main.js)에서 퍼지는 흰 원 */
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--fx, 50%);
  top: var(--fy, 50%);
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  transition: width 0.5s ease-out, height 0.5s ease-out;
}
.btn-line:hover { color: var(--brand); }
.btn-line:hover::after {
  width: 40vw;
  height: 40vw;
  transition: width 0.5s ease-in 0.1s, height 0.5s ease-in 0.1s;
}
.btn-line img { display: none; }   /* 레퍼런스 버튼에는 아이콘이 없다 */

/* 검정 변형 — 검정 채움 + 검정 링, 호버 시 흰 채움 + 검정 글자 */
.btn-line--black { background: #000; }
.btn-line--black::before { border-color: #000; }
.btn-line--black:hover { color: #000; }

/* 흰 변형 — 레퍼런스 btn-style03 (반투명 흰 배경 + 흰 테두리) */
.btn-line--white { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); }
.btn-line--white::before { border-color: #fff; }

/* 셰브론 — 시안 자산(6.06×10.71, 0.5px stroke 가 도형 밖으로 삐져나옴).
   음수 마진으로 레이아웃 차지 폭을 시안의 도형 크기 5×10 에 맞춘다. */
.chev, .pd__more img {
  width: 6.06px;
  height: 10.71px;
  margin: 0 -0.53px;
}

/* 슬라이더 좌우 버튼 (원형 + 셰브론 SVG — 시안 에셋 그대로) */
.nav-btn { display: block; line-height: 0; }
.nav-btn.swiper-button-disabled { opacity: .35; pointer-events: none; }

/* ── 헤더 ────────────────────────────────────────────────────────────── */
.hd { height: 100px; background: #fff; }
.hd__inner { display: flex; align-items: center; height: 100%; }
.hd__logo { flex: none; line-height: 0; }
.hd__logo img { width: 211px; height: 34px; }

/* GNB — 레퍼런스 pintel.co.kr each-menu 드롭다운 (1rem=10px 실측, --main-color → var(--brand))
   1depth 는 시안 위치(gap 68 / margin-left 272) 유지, 2depth 는 항목 아래 중앙 패널 */
.gnb { margin-left: 272px; }
.gnb__list { display: flex; gap: 68px; }
.gnb__item { position: relative; }
.gnb__item > a {
  position: relative;
  z-index: 100;
  display: block;
  line-height: 100px;          /* 헤더 높이 = 호버 영역 */
  font-size: 18px;
  font-weight: 500;
  transition: color .4s ease-in-out;
}
.gnb__item > a.is-active,
.gnb__item.on > a { color: var(--brand); }

/* 2depth 패널 — top: 헤더 100 - 20, 열릴 때 파랑 배경(:before)이 위→아래로 채워지고 항목이 순차 페이드인 */
.gnb__sub {
  position: absolute;
  top: 80px;
  left: 50%;
  z-index: 99;
  min-width: 180px;
  width: max-content;
  transform: translateX(-50%);
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: all .2s cubic-bezier(.4, 0, 1, 1);
}
.gnb__sub::before {           /* 위→아래로 채워지는 파랑 패널 (bottom 100%→0 으로 애니메이션) */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 100%;
  border-radius: 10px;
  background-color: var(--brand);
  transition: all .2s cubic-bezier(.4, 0, 1, 1);
}
.gnb__sub ul { position: relative; padding: 20px 0; }
.gnb__sub li { padding: 10px 30px; opacity: 0; transition: all 0s 0s; }
.gnb__sub li a {
  display: block;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
  opacity: .9;
  white-space: nowrap;
}
.gnb__sub li a:hover, .gnb__sub li.on a { opacity: 1; font-weight: 600; }
.gnb__sub.open { visibility: visible; opacity: 1; }
.gnb__sub.open::before { bottom: 0; }
.gnb__sub.open li { opacity: 1; transition: all .8s ease-in-out; }
.gnb__sub.open li:nth-child(1) { transition-delay: .1s; }
.gnb__sub.open li:nth-child(2) { transition-delay: .2s; }
.gnb__sub.open li:nth-child(3) { transition-delay: .3s; }
.gnb__sub.open li:nth-child(4) { transition-delay: .4s; }
.gnb__sub.open li:nth-child(5) { transition-delay: .5s; }

/* 사이트맵 버튼 — 레퍼런스 pintel .sitemap-line-btn (50×50, 점 2줄 xi-ellipsis-h ×2, active 시 ±45° 회전 → X) */
.hd__sitemap {
  position: relative;
  z-index: 100000;
  flex: none;
  width: 50px;
  height: 50px;
  margin-left: auto;
  cursor: pointer;
}
.hd__sitemap .dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 6px;
  margin: -3px 0 0 -15px;
  background: radial-gradient(circle, #000 2.6px, transparent 3.2px) 0 0 / 10px 6px repeat-x;
  transition: transform .4s ease-in-out, background .4s ease-in-out;
}
.hd__sitemap .dot:nth-child(1) { transform: translateY(-6px); }
.hd__sitemap .dot:nth-child(2) { transform: translateY(6px); }
.hd__sitemap.active .dot { background: #fff; height: 2px; margin-top: -1px; }
.hd__sitemap.active .dot:nth-child(1) { transform: translateY(0) rotate(45deg); }
.hd__sitemap.active .dot:nth-child(2) { transform: translateY(0) rotate(-45deg); }
body.sitemap-open .gnb { opacity: 0; pointer-events: none; }   /* 레퍼런스 #header.sitemap-open #gnb */

/* 전체메뉴 오버레이 — 레퍼런스 #siteMapCon06 (1rem=10px 실측) */
.sitemap {
  position: fixed;
  inset: 0;
  z-index: 9998;
  overflow-y: auto;
  overflow-x: hidden;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s, visibility .3s;
}
.sitemap__bg {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 0;
  background-color: rgba(0, 0, 0, .5);
  backdrop-filter: blur(10px);
  transition: height .6s ease;
}
.sitemap__inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100%;
  padding: 100px 0 80px;      /* 헤더 높이만큼 아래에서 시작 */
  opacity: 0;
  transition: opacity .5s ease 0s;
}
.sitemap__inner > .inner-sub { width: 100%; }
.sitemap__list { display: table; width: 100%; table-layout: fixed; margin-top: 37px; }
.sitemap__list > li {
  position: relative;
  display: table-cell;
  padding: 0 2%;
  vertical-align: top;
  text-align: center;
  opacity: 0;
  transform: translateY(50px);
  transition: all .8s ease-in-out;
}
.sitemap__list > li::before {     /* 활성 컬럼 표시 점 */
  content: "";
  position: absolute;
  top: -26px;
  left: 12%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0;
  transform: translateY(-30px);
  transition: all .4s ease-in-out;
}
.sitemap__list > li.active::before { opacity: 1; transform: translateY(0); }
.sitemap__list > li > h2 { margin-bottom: 10px; font-size: 48px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: #fff; }
.sitemap__list > li > h2 a { color: #fff; }
.sitemap__sub a {
  display: block;
  padding: .5em 0;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.075em;
  line-height: 1.3;
  color: #fff;
  transition: all .3s;
}
.sitemap__sub:hover a { opacity: .4; }
.sitemap__sub:hover a:hover { opacity: 1; }
.sitemap.is-open { visibility: visible; opacity: 1; }
.sitemap.is-open .sitemap__bg { height: 100%; }
.sitemap.is-open .sitemap__inner { opacity: 1; transition-delay: .4s; }
.sitemap.is-open .sitemap__list > li { opacity: 1; transform: translateY(0); }
.sitemap.is-open .sitemap__list > li:nth-child(2) { transition-delay: .2s; }
.sitemap.is-open .sitemap__list > li:nth-child(3) { transition-delay: .4s; }
.sitemap.is-open .sitemap__list > li:nth-child(4) { transition-delay: .6s; }
.sitemap.is-open .sitemap__list > li:nth-child(5) { transition-delay: .8s; }

/* 모바일 메뉴(드로어·오버레이·버튼) — PC 에선 숨김, m.style.css 에서 노출 */
.hd__toggle { display: none; }
.gnb-overlay { display: none; }
.gnbm { display: none; }

/* ── 서브 탭 바 (include/sub-tabs.php) — 레퍼런스 pintel .sub-tab-list-style
   (1rem=10px 실측: 48px · radius 90 · #f5f5f5 · 16px/600, 선택 시 브랜드색 + 그림자). 열 수는 --tabs-cols ── */
.tabs { margin-top: 64px; }
.tabs__inner { position: relative; }
.tabs__list { display: grid; grid-template-columns: repeat(auto-fit, 224px); gap: 20px 68px; justify-content: center; }   /* 알약 224px 고정 · 센터 정렬 (제품 탭 .pl-tabs__list 만 좌측 정렬) */
.tabs__list a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 23px;
  border-radius: 90px;
  background: #f5f5f5;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.05em;
  color: #060606;
  white-space: nowrap;
  transition: all .4s ease-in-out;
}
.tabs__list a:hover { background: var(--brand-hover); color: #333; }
.tabs__list a.is-active { position: relative; z-index: 1; background: var(--brand); box-shadow: 6px 6px 20px rgba(0, 0, 0, .16); color: #fff; }
.tab-drop { display: none; }          /* 모바일 드롭 버튼 — m.style.css 에서 노출 */

/* ── 서브페이지 상단 비주얼 (include/sub-visual.php) ─────────────────── */
.sv {
  position: relative;
  height: 650px;
  overflow: hidden;
}
.sv__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: .3;
}
.sv--plain::after { content: none; }
.sv__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
  height: 100%;
  padding-bottom: 200px;
  color: #fff;
}
.sv__title { font-size: 96px; font-weight: 600; line-height: normal; }
.sv__crumbs {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
}
.sv__crumbs a { line-height: 0; }
.sv__chev {
  width: 7.06px;
  height: 12.71px;
  background: url('../../images/icons/crumb-chevron.svg') center / contain no-repeat;
}

/* ── 히어로 ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 880px;
  margin: 0 30px;
  border-radius: 60px;
  overflow: hidden;
}
.hero__slider { height: 100%; }
.hero__slide { position: relative; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 어둡게 처리 — 시안대로 슬라이드별로 다르다.
   1번: 프레임 전체 검정 30% / 2~4번: 좌측 절반(930/1860) 좌로 갈수록 짙어지는 그라디언트 30% */
.hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .3;
}
.hero__slide--flat::after { background: #000; }
.hero__slide--left::after {
  right: 50%;
  background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, #000 100%);
}

/* 카피 블록은 세로 중앙 — 시안 2~4번(1줄/2줄 타이틀 모두)의 블록 중심이 440 */
.hero__copy {
  position: absolute;
  left: 120px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: #fff;
}
.hero__title { font-size: 64px; font-weight: 700; line-height: 1.3; }
.hero__sub { margin-top: 40px; font-size: 24px; font-weight: 500; line-height: 1.5; }

/* 페이지네이션 — 가로 센터 정렬 (시안 left 844 는 미세하게 좌측이라 센터로 통일) */
.hero .hero__dots.swiper-pagination {
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  bottom: 60px;
  z-index: 3;
  display: flex;
  gap: 8px;
  width: auto;
  --swiper-pagination-bullet-horizontal-gap: 0;
}
.hero__dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0;
  background: #fff;
  opacity: .4;
}
.hero__dots .swiper-pagination-bullet-active { background: #fff; opacity: 1; }

/* ── 회사 소개 ───────────────────────────────────────────────────────── */
/* 시안: 이미지 800 + 간격 80 + 텍스트 740 = 1620 */
.ab__inner {
  display: grid;
  grid-template-columns: 49.383% 45.679%;
  gap: 4.938%;
}
.ab__visual { height: 560px; border-radius: 30px; overflow: hidden; background: #d9d9d9; }
.ab__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 28.6% center; }

.ab__copy { padding-top: 102px; }
.ab__desc { margin-top: 24px; }
.ab__btn { margin-top: 47px; }

/* ── 제품 ────────────────────────────────────────────────────────────── */
/* 좌측 텍스트는 컨테이너 안, 카드 슬라이더는 화면 우측 끝까지 흐른다 */
.pd__row {
  display: flex;
  gap: 80px;
  padding-left: max(20px, calc((100% - 1620px) / 2));
}
.pd__head { flex: 0 0 450px; padding-top: 46px; }
.pd__desc { margin-top: 24px; }
.pd__nav { display: flex; gap: 32px; margin-top: 56px; }

.pd__slider { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.pd__slide { width: 350px; }

.pd__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 468px;
  padding-top: 92px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background: #fafafa;
  text-align: center;
}
/* 제품 이미지는 시안에서 카드마다 크기가 다르고(114~195px 높이) 세로 중심이
   카드 상단 기준 191px 로 고정 — 가장 큰 높이에 맞춘 띠 안에서 중앙 정렬한다. */
.pd__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 196px;
}
.pd__thumb img { width: auto; max-width: 100%; max-height: 100%; }
/* min-height = 2줄 — 시안에서 제품명이 2줄이어도 View More 위치는 그대로다 */
.pd__name { margin-top: 23px; min-height: 58px; font-size: 24px; font-weight: 500; line-height: normal; }
.pd__more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 29px;
  font-size: 16px;
  line-height: normal;
  color: var(--brand);
}

/* ── 교육 프로그램 ───────────────────────────────────────────────────── */
.tr { padding: 140px 0; background: #f8f8f8; }

.tr__head { display: flex; }
.tr__head-l { flex: 0 0 427px; }
.tr__head-r { flex: 0 0 723px; margin-left: 60px; padding-top: 31px; }
.tr__nav { display: flex; gap: 24px; margin-left: auto; padding-top: 37px; }

.tr__slider-wrap {
  margin-top: 40px;
  padding-left: max(20px, calc((100% - 1620px) / 2));
}
.tr__slider { overflow: hidden; }
.tr__slide { width: 390px; }

.tr__card {
  display: block;
  position: relative;
  height: 520px;
  border-radius: 24px;
  overflow: hidden;
  background: #d9d9d9;
}
.tr__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tr__card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 260px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%);
  opacity: .3;
}
.tr__txt { position: absolute; left: 40px; top: 380px; z-index: 2; width: 310px; color: #fff; }
.tr__name { display: block; font-size: 24px; font-weight: 500; line-height: normal; }
.tr__desc { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; }

/* ── 공지사항 ────────────────────────────────────────────────────────── */
/* 시안: 좌측 텍스트 열 605 + 목록 1015 = 1620 */
.nw__inner { display: flex; }
.nw__head { flex: 0 0 605px; }
.nw__sub { margin-top: 24px; }
.nw__btn { margin-top: 56px; }

.nw__list {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 27px;
  border-top: 1px solid #000;
}
/* 행 높이 77px — 시안 구분선 간격. 아래 padding 23 + 테두리 1 = 24 */
.nw__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 16px 23px;
  border-bottom: 1px solid #ddd;
}
.nw__ttl { font-size: 24px; line-height: normal; }
.nw__date { flex: none; font-size: 16px; line-height: normal; color: #999; }

/* ── 문의하기 ────────────────────────────────────────────────────────── */
.ct__box {
  display: flex;
  align-items: center;
  position: relative;
  height: 560px;
  border-radius: 40px;
  overflow: hidden;
}
.ct__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 39.5%;
}
/* 시안: 좌측 절반(810/1620)에 좌로 갈수록 짙어지는 검정 그라디언트 30% */
.ct__box::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, #000 100%);
  opacity: .3;
}
.ct__copy { position: relative; z-index: 2; padding-left: 80px; color: #fff; }
.ct__desc { margin-top: 24px; font-size: 18px; line-height: 1.5; }
.ct__btn { margin-top: 56px; }

/* ── 푸터 ────────────────────────────────────────────────────────────── */
.ft { padding: 72px 0 75px; background: #eee; }
.ft__inner { display: flex; }

.ft__logo { flex: none; }
.ft__logo img { width: 231px; height: 231px; }

.ft__info { margin-left: 75px; padding-top: 53px; font-size: 16px; color: #191919; }
.ft__info p { line-height: normal; }
.ft__info p + p { margin-top: 8px; }

.ft__right { margin-left: auto; padding-top: 126px; font-size: 16px; text-align: right; }
.ft__links { line-height: normal; color: #191919; }
.ft__copy { margin-top: 16px; line-height: normal; color: #999; }

/* 텍스트 사이 세로 구분선 (시안 1×8px) */
.bar {
  display: inline-block;
  width: 1px;
  height: 8px;
  margin: 0 8px;
  background: currentColor;
  vertical-align: middle;
}