@charset "utf-8";

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

/* ==========================================================================
   인성영재캠프 – Main Landing
   1. Tokens
   2. Reset & Base
   3. Common (inner / section head / button / blind)
   4. Header & GNB
   5. Hero
   6. Video
   7. Core Strengths
   8. Grade
   9. Camp Experience (slider)
   10. Real Stories
   11. Growth Diagram
   12. Record Banner
   13. Footer
   14. Top Button
   15. Motion
   ==========================================================================
   PC 전용 레이아웃. 최소 폭(--min-w) 미만에서는 가로 스크롤로 대응한다.
   ========================================================================== */

/* ------------------------------ 1. Tokens ------------------------------ */
:root {
  --green: #058C53;
  --green-dark: #008a42;
  --green-deep: #00753a;
  --gold: #f5c453;
  --navy: #1e3350;
  --teal: #2aa2b7;
  --orange: #FF6B2F;

  --text: #000000;
  --text-sub: #454545;
  --text-sub-light: #666666;
  --text-mute: #8b9298;
  --line: #e8eaec;

  --bg: #ffffff;
  --bg-soft: rgba(255,255,255,0.9);
  --bg-mint: #F4F9F8;

  --peach: #fdf0e7;
  --mint: #edf6ef;
  --sky: #edf2fb;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  --shadow-card: 0 4px 20px rgba(24, 36, 30, .06);
  --shadow-float: 0 10px 40px rgba(24, 36, 30, .12);

  --header-h: 78px;
  --inner: 1200px;
  --min-w: 1280px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --hero-cycle: 20s;         /* 히어로 배경 한 바퀴 = 노출 5s × 4장 */
  --btn-arrow-cycle: 1s;   /* 신청 버튼 화살표 한 바퀴 */
  --reveal-dur: .7s;         /* 스크롤 등장(아래→위) 시간 */
  --reveal-wipe-dur: .9s;    /* 스크롤 등장(왼쪽→오른쪽 펼침) 시간 */
  --growth-spin: 60s;        /* 성장 다이어그램 두 원이 한 바퀴 도는 시간 */
}

/* --------------------------- 2. Reset & Base --------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body,
h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

body {
  min-width: var(--min-w);
  font-family: 'Pretendard', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  word-break: keep-all;
  overflow-wrap: break-word;
  letter-spacing: -.02em;
}

img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }

a { color: inherit; text-decoration: none; }

button {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

address, em { font-style: normal; }

svg { display: block; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* ------------------------------ 3. Common ------------------------------ */
.blind {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.inner {
  width: 100%;
  max-width: var(--inner);
  margin: 0 auto;
  padding: 0 20px;
}

/* 고정 헤더에 제목이 가리지 않도록 앵커 착지 위치 보정 */
section[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

.sec-head { text-align: center; }

.sec-head__label {
  font-size: 22px;
  font-weight: 700;
  color: var(--green);
}

.sec-head__title {
  margin-top: 12px;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.3;
}

.sec-head__desc {
  margin-top: 12px;
  font-size: 19px;
  font-weight: 500;
  color: var(--text-sub);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 70px;
  padding: 0 38px;
  font-size: 19px;
  font-weight: 600;
  border-radius: 999px;
  transition: background-color .2s, color .2s, transform .2s, box-shadow .2s;
}

.btn.sm {
  padding: 0 30px;
  height: 50px;
  font-size: 17px;
}

.btn--primary {
  color: #fff;
  background: var(--green);
  box-shadow: 0 6px 20px rgba(0, 160, 77, .3);
}

.btn--ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .06);
  font-weight: 600;
  cursor: default;
}

/* --------------------------- 4. Header & GNB --------------------------- */
.header {
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  width: 100%;
  min-width: var(--min-w);   /* 가로 스크롤 시 본문과 함께 밀리도록 */
  height: var(--header-h);
  background-color: var(--bg-soft);
  backdrop-filter:blur(14px);
  border-bottom: 6px solid var(--green);
  transition: background-color .25s, box-shadow .25s;
}
.header.is-fixed {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--inner);
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.header__logo img {
  display: block;
  width: auto;
  height: 45px;
}

.gnb__list {
  display: flex;
  align-items: center;
  gap: 42px;
}

.gnb__link {
  position: relative;
  display: block;
  padding: 6px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  transition: color .2s;
}
.gnb__link:hover,
.gnb__link.active { color: var(--green); }
.gnb__link:hover::after,
.gnb__link.active::after { width: 100%; }

/* -------------------------------- 5. Hero ------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 800px;
  padding: calc(var(--header-h) + 60px) 0 90px;
  overflow: hidden;
  color: #fff;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

/* 배경 슬라이드
   한 장의 노출 = 5s, 4장 → 한 바퀴 20s.
   네 장 모두 같은 20s 키프레임을 쓰고 animation-delay 로 위상만 어긋낸다.
   → 타이머가 없으니 오차가 누적되지 않고, 탭을 다시 열어도 어긋나지 않는다.
   장수를 바꿀 때: --hero-cycle 과 nth-child 지연값을 함께 고칠 것. */
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  animation: heroSlide var(--hero-cycle) linear infinite;
}
/* 지연값 = (순번-1) × 5s - 1s, 양수가 되면 한 바퀴(20s)를 빼서 음수로 적는다.
   (2번째 → 4s - 20s = -16s, 3번째 → 9s - 20s = -11s, 4번째 → 14s - 20s = -6s)
   -1s 만큼 미리 감아 두어 로딩 직후 1번째 장이 페이드인 없이 바로 보인다. */
.hero__bg img:nth-child(1) { animation-delay:  -1s; }
.hero__bg img:nth-child(2) { animation-delay: -16s; }
.hero__bg img:nth-child(3) { animation-delay: -11s; }
.hero__bg img:nth-child(4) { animation-delay:  -6s; }

@keyframes heroSlide {
  /*   0% 등장 시작(확대 상태) →  5% 페이드인 완료 → 25% 노출 끝 → 30% 페이드아웃 완료
       scale 은 0%~30% 구간에서 한 번에 보간되므로 등장부터 퇴장까지 끊기지 않고 줄어든다.
       30% 이후는 opacity 0 이라 확대 상태로 되돌려도 보이지 않는다. */
  0%   { opacity: 0; scale: 1.14; }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; scale: 1; }
  60%  { scale: 1.14; }
  100% { opacity: 0; scale: 1.14; }
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(20, 14, 10, .78) 0%,
    rgba(20, 14, 10, .58) 38%,
    rgba(20, 14, 10, .16) 62%,
    rgba(20, 14, 10, .05) 100%);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--inner);
  margin: 0 auto;
  padding: 0 20px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 24px;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.hero__badge img { width: 112px; }

.hero__title {
  margin-top: 20px;
  margin-left: -10px;
}

.hero__desc {
  margin-top: 28px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.85;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.hero__btns {
  display: flex;
  align-items: center;
  gap: 19px;
  margin-top: 45px;
}

/* 신청 버튼 화살표: 왼쪽 → 오른쪽으로 흐르는 동작을 반복.
   양 끝에서 opacity 를 0 으로 떨어뜨려 제자리로 되돌아가는 구간을 감춘다.
   되돌아오는 움직임이 보이면 '오른쪽으로 흐른다'가 아니라 '까딱거린다'로 읽힌다.
   transform 이 아니라 translate 개별 속성을 쓰는 이유는 이 프로젝트의 다른 모션과 동일하다. */
.hero__btns .btn--primary svg {
  animation: btnArrow var(--btn-arrow-cycle) linear infinite;
}

@keyframes btnArrow {
  0%   { translate: -2px 0; }
  50%  { translate:  4px 0; }
  100% { translate: -2px 0; }
}

/* ------------------------------- 6. Video ------------------------------- */
.video {
  position: relative;
  padding: 83px 0 50px;
  overflow: hidden;
}

.video__deco {
  position: absolute;
  top: 340px;
  left: 50%;
  transform: translateX(-620px);
  width: 265px;
  height: 265px;
  background-color: #FDF2E3;
  border-radius: 50%;
}

.video__frame {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
}
.video__thumb {
  width: 100%; height: 100%;
  object-fit: cover;
}
.video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

.video__play {
  position: absolute;
  top: 50%; left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px; height: 88px;
  padding-left: 6px;
  background: rgba(255, 255, 255, .92);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform .25s var(--ease), background-color .25s;
}
.video__play:hover {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.08);
}

/* --------------------------- 7. Core Strengths -------------------------- */
.core {
  position: relative;
  padding: 40px 0 110px;
  overflow: hidden;
}

.core__deco {
  position: absolute;
  top: 130px;
  left: 50%;
  transform: translateX(390px);
}

.core__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 25px;
  margin-top: 40px;
}

.core-card {
  padding: 40px 20px 34px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.core-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px; height: 78px;
  margin: 0 auto;
  border-radius: 50%;
}
.core-card__icon img { width: 100%; }
.core-card__icon--orange { background: linear-gradient(140deg, #ff8352, #f4602c); }
.core-card__icon--yellow { background: linear-gradient(140deg, #ffd782, #f3b53f); }
.core-card__icon--green  { background: linear-gradient(140deg, #a8d3c5, #7fbaa8); }
.core-card__icon--blue   { background: linear-gradient(140deg, #8fb7ef, #6d9ce3); }
.core-card__icon--purple { background: linear-gradient(140deg, #c39cf0, #a97ce6); }

.core-card__title {
  margin-top: 20px;
  font-size: 24px;
  font-weight: 700;
}

.core-card__desc {
  margin-top: 10px;
  font-size: 19px;
  font-weight: 500;
  color: var(--text-sub-light);
  line-height: 1.4;
}

/* ------------------------------- 8. Grade ------------------------------- */
.grade {
  padding: 80px 0;
  background: var(--bg-mint);
}

.grade__wrap {
  position: relative;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 60px;
  align-items: center;
  padding-right: 150px;
}

.grade__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.35;
}

.grade__desc {
  margin-top: 12px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-sub);
}

.grade__list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 17px;
}

.grade-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 22px 0 24px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 2px 12px #E4D8CB;
}

.grade-item__no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  border-radius: 50%;
}
.grade-item__no--teal { background: var(--teal); }
.grade-item__no--navy { background: var(--navy); }

.grade-item strong {
  font-size: 18px;
  font-weight: 700;
}

.grade__slogan {
  margin-top: 34px;
  padding: 12px 0;
  font-size: 21px;
  font-weight: 700;
  text-align: center;
  color: #1C8877;
  background: #DFEFEC;
}

.grade__mascot {
  position: absolute;
  right: 30px; bottom: -45px;
  width: 220px;
}

/* ------------------- 9. Camp Experience (full-bleed slider) ------------- */
.exp {
  position: relative;
  padding: 100px 0 110px;
  overflow: hidden;
}

.exp__deco {
  position: absolute;
  pointer-events: none;
}

.exp__deco.exp__deco--star {
  left: 50%;
  transform: translateX(260px);
}

.exp__deco.exp__deco--dots {
  top: 600px;
  left: 50%;
  transform: translateX(-500px);
}

/* Swiper 로 동작한다(초기화는 main.js).
   좌측으로 천천히 계속 흐르는 마퀴이므로 화살표·스냅·네이티브 스크롤은 쓰지 않는다.
   카드 간격은 CSS gap 이 아니라 Swiper 의 spaceBetween 으로 준다.
   gap 을 쓰면 Swiper 가 계산한 이동량과 실제 위치가 어긋난다. */
.exp-slider {
  position: relative;
  margin-top: 56px;
  /* 등속으로 흘러야 하므로 기본 ease 를 linear 로 바꾼다(Swiper 가 제공하는 변수) */
  --swiper-wrapper-transition-timing-function: linear;
}

.exp-card {
  position: relative;
  width: 560px;
  height: auto;
  aspect-ratio: 380 / 286;
  overflow: hidden;
}
.exp-card img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.exp-card::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent);
}

.exp-card__text {
  position: absolute;
  left: 0; right: 0; bottom: 26px;
  z-index: 1;
  padding: 0 20px;
  text-align: center;
  color: #fff;
}
.exp-card__text h3 {
  font-size: 29px;
  font-weight: 700;
}
.exp-card__text p {
  margin-top: 3px;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, .88);
}

/* ---------------------------- 10. Real Stories -------------------------- */
.stories { padding: 100px 0 110px; }

.stories__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 54px;
}

.story-card {
  position: relative;
  height: 354px;
  padding: 34px 32px 40px;
  overflow: hidden;
  border-radius: var(--radius);
}
.story-card--peach { background: var(--peach); }
.story-card--mint  { background: var(--mint); }
.story-card--blue  { background: var(--sky); }

.story-card__who {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 21px;
  font-weight: 700;
}
.story-card--peach .story-card__who { color: #FF7A45; }
.story-card--mint  .story-card__who { color: #58B19B; }
.story-card--blue  .story-card__who { color: #738BC0; }

.story-card__mark {
  
}

.story-card__title {
  margin-top: 16px;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.4;
}

.story-card__desc {
  position: relative;
  z-index: 1;
  width: 66%;
  margin-top: 18px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-sub-light);
}

.story-card__photo {
  position: absolute;
  right: -20px; bottom: 0;
  width: 60%;
  max-width: 200px;
}

/* -------------------------- 11. Growth Diagram -------------------------- */
.growth {
  position: relative;
  padding: 90px 0 70px;
  background:
    radial-gradient(120% 90% at 0% 0%, #f8798a 0%, rgba(248, 121, 138, 0) 55%),
    radial-gradient(110% 80% at 100% 0%, #f6d36a 0%, rgba(246, 211, 106, 0) 58%),
    radial-gradient(110% 90% at 0% 100%, #9a7fd6 0%, rgba(154, 127, 214, 0) 55%),
    radial-gradient(120% 100% at 100% 100%, #2fb6b0 0%, rgba(47, 182, 176, 0) 60%),
    linear-gradient(120deg, #f28f7a 0%, #f4c96a 35%, #7fc7a8 68%, #3aa6c2 100%);
}

.growth__diagram {
  position: relative;
  max-width: 976px;
  margin: 0 auto;
  aspect-ratio: 976 / 933;
  z-index: 2;
}

.growth__diagram::before,
.growth__diagram::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

/* 두 원을 서로 반대 방향으로 천천히 돌린다.
   키프레임 안에 translate(-50%, -50%) 를 반드시 함께 써야 한다.
   rotate 개별 속성으로 하면 위의 중앙 정렬 translate 까지 회전 대상이 되어
   원이 제자리에서 돌지 않고 반경 500px 쯤 되는 궤도를 그리며 돌아버린다.
   → 중앙 정렬 값을 바꿀 때는 아래 키프레임 4곳도 같이 고칠 것. */
.growth__diagram::before {
  width: 717px;
  height: 723px;
  background-image: url("/images/main/growth_diagram_circle_02.png");
  animation: growthSpinCcw var(--growth-spin) linear infinite;
}

.growth__diagram::after {
  width: 627px;
  height: 627px;
  background-image: url("/images/main/growth_diagram_circle_01.png");
  animation: growthSpinCw var(--growth-spin) linear infinite;
}

/* 왼쪽(반시계) */
@keyframes growthSpinCcw {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}
/* 오른쪽(시계) */
@keyframes growthSpinCw {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.growth__center {
  position: absolute;
  top: 50%; left: 50%;
  width: 620px;
  text-align: center;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.growth__logo { width: 152px; }

.growth__title {
  margin-top: 10px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--green-deep);
  letter-spacing: -.04em;
}

.growth__desc {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .18);
}

.growth-item {
  position: relative;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 300px;              /* 300 / 1100 */
  aspect-ratio: 1 / 1;
  padding: 0 26px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 14px 40px rgba(60, 40, 30, .18);
  z-index: 1;
  border: 10px solid transparent;
  border-radius: 50%;

  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(331deg, #fff, rgba(255,255,255,.2)) border-box;

  background-clip: padding-box, border-box;
  background-origin: border-box;
  z-index: 2;
}
.growth-item--01 { top: 0;  left: 340px; }
.growth-item--02 { top: 26%; left: 0; }
.growth-item--03 { top: 26%; right: 0; }
.growth-item--04 { bottom: 0; left: 150px; }
.growth-item--05 { bottom: 0; right: 150px; }

.growth-item__no {
  position: absolute;
  top: -2px; left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  background: var(--orange);
  border: 4px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.growth-item__img {
  width: 138px;
  margin-bottom: 5px;
}

.growth-item__title {
  font-size: 25px;
  font-weight: 800;
}

.growth-item__desc {
  margin-top: 5px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-sub-light);
}

/* --------------------------- 12. Record Banner -------------------------- */
.record {
  max-width: 914px;
  margin: 70px auto 0;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
}
.record img { width: 100%; display: block; }

/* ------------------------------- 13. Footer ----------------------------- */
.footer {
  padding: 40px 0 70px;
  background: #f6f7f5;
  color: var(--text-sub);
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 50px;
  align-items: start;
}

.footer-org {
  position: relative;
  display: flex;
  gap: 52px;
  align-items: flex-start;
}
.footer-org + .footer-org { margin-top: 34px; }

.footer-org__logo {
  flex: 0 0 auto;
  width: 208px;
  margin-top: 2px;
}
.footer-org::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 238px;
  width: 1px;
  height: 55px;
  background: #d3d7d5;
}

.footer-org__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
}
.footer-org__links li { position: relative; padding-right: 17px; }
.footer-org__links li::after {
  content: '';
  position: absolute;
  top: 50%; right: 0;
  width: 1px; height: 12px;
  background: #d3d7d5;
  transform: translateY(-50%);
}
.footer-org__links li:last-child { padding-right: 0; }
.footer-org__links li:last-child::after { display: none; }
.footer-org__links a {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  transition: color .2s;
}
.footer-org__links a:hover { color: var(--green); }

.footer-org__addr {
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-size: 15px;
}
.footer-org__addr img {

}
.footer-org__addr span {
  font-weight: 500;
}

.footer-org__copy {
  margin-top: 9px;
  font-size: 12px;
  color: #888;
}

.contact-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 37px;
  width: 350px;
  padding: 27px 30px;
  background: #FDFAF8;
  border: 2px solid #FBE9E1;
  border-radius: 20px;
}
.contact-box__icon {
  position: relative;
}
.contact-box__icon::after {
  content: "";
  position: absolute;
  top: 10px;
  right: -14px;
  width: 1px;
  height: 51px;
  background-color: #D9D9D9;
}

.contact-box__body { margin-top: 14px; }
.contact-box__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: -25px;
  padding-top: 15px;
  width: 100%;
  font-size: 16px;
  color: #676F78;
  border-top: 1px solid #FBE9E1;
}
.contact-box__label {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-sub);
}
.contact-box__tel {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: var(--orange);
}

.contact-box__site {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 18px;
  font-size: 14px;
  border-top: 1px solid #f0e3d5;
  transition: color .2s;
}
.contact-box__site:hover { color: var(--orange); }

.footer__sns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-top: 45px;
}

.sns-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 68px;
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  background: #fff;
  border: 1px solid #D9D9D9;
  border-radius: 10px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.sns-btn:hover {
  border-color: var(--green);
}
.sns-btn img { width: auto; max-height: 32px; }

.footer__sns li:first-of-type .sns-btn img { max-height: 40px; }

/* ----------------------------- 14. Top Button --------------------------- */
.top-btn {
  position: fixed;
  right: 30px; bottom: 30px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  color: #fff;
  background: var(--green);
  border-radius: 50%;
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s, visibility .25s, transform .25s, background-color .2s;
}
.top-btn.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.top-btn:hover { background: var(--green-dark); }

/* ------------------------------- 15. Motion ----------------------------- */
/* transform 이 아닌 translate 개별 속성을 쓴다.
   transform 을 쓰면 .growth__center 의 중앙 정렬(translate(-50%,-50%))과
   .core-card:hover 의 들어올림이 덮여서 깨진다. */
[data-reveal] {
  opacity: 0;
  /* 기본 방향은 아래 → 위. 첫 값이 가로, 둘째 값이 세로다.
     '15px 0' 처럼 첫 자리에 쓰면 오른쪽에서 들어오는 동작이 되니 주의.
     가로로 넣고 싶으면 이 규칙을 고치지 말고 data-reveal="from-right" 를 쓸 것
     (이 규칙은 hero 와 core 가 함께 쓴다). */
  translate: 0 15px;
  transition: opacity var(--reveal-dur) var(--ease), translate var(--reveal-dur) var(--ease);
}
[data-reveal].is-in {
  opacity: 1;
  translate: none;
}

/* 오른쪽에서 왼쪽으로 미끄러져 들어오는 변형: data-reveal="from-right"
   시작 위치만 가로로 바꾼다. 페이드와 .is-in 복귀는 위 두 규칙을 그대로 쓴다.
   [data-reveal] 과 특이도가 같으므로 뒤에 와야 translate 를 덮는다. */
[data-reveal="from-right"] {
  translate: 60px 0;
}

/* 왼쪽 → 오른쪽으로 펼쳐지는 변형: data-reveal="wipe"
   clip-path 로 오른쪽을 덮어두고 걷어낸다. 글자가 늘어나지 않고 레이아웃도 밀리지 않는다.
   (scaleX 는 텍스트를 가로로 찌그러뜨리고, width 는 줄바꿈을 바꾼다)

   주의 — 자를 대상은 '자식'이다. clip-path 를 건 요소는 자기 자신의
   IntersectionObserver 교차 면적이 0 이 되어 threshold(0.12) 를 영구히 못 넘긴다.
   그래서 속성은 감시용 래퍼에 두고, 실제 클립은 그 안쪽에 적용한다.

   위의 [data-reveal] 과 특이도가 같으므로 반드시 뒤에 와야 덮어쓴다. */
[data-reveal="wipe"] {
  opacity: 1;          /* 래퍼는 기본 등장(페이드·상승)을 쓰지 않는다 */
  translate: none;
}
[data-reveal="wipe"] > * {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--reveal-wipe-dur) var(--ease);
}
[data-reveal="wipe"].is-in > * {
  clip-path: inset(0 0 0 0);
}

/* 마스코트는 슬로건이 다 펼쳐진 뒤에 올라온다.
   지연을 --reveal-wipe-dur 로 묶어 두면 펼침 속도를 바꿀 때 등장 시점이 자동으로 따라온다.
   [data-reveal] 의 transition 단축 속성이 delay 를 0 으로 되돌리므로
   특이도를 한 단계 높여(클래스 + 속성) 나중에 덮이지 않게 한다. */
.grade__mascot[data-reveal] {
  transition-delay: calc(var(--reveal-wipe-dur) - 0.3s);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* .swiper-wrapper 는 제외한다. Swiper 가 transition-duration 을 인라인으로 넣는데
     * 의 !important 는 인라인보다 우선하므로, 빼두지 않으면 마퀴가 흐르지 않고 튄다.
     :not() 때문에 이 규칙의 특이도가 (0,1,0) 이 되지만
     아래 두 규칙은 그보다 구체적이거나 뒤에 오므로 그대로 이긴다. */
  *:not(.swiper-wrapper), *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  /* 등장 모션도 유지한다. 이 줄 없이 두면 위의 .01ms 때문에 숨은 상태에서
     나타난 상태로 즉시 점프해 '아래에서 위로' 가 보이지 않는다. */
  [data-reveal] { transition-duration: var(--reveal-dur) !important; }
  /* 펼침은 래퍼가 아니라 자식이 움직인다 */
  [data-reveal="wipe"] > * { transition-duration: var(--reveal-wipe-dur) !important; }

  /* 메인 배너는 이 설정에서도 그대로 동작시킨다(전환 + 확대/축소).
     위의 *  규칙이 걸어 둔 .01ms 만 원래 주기로 되돌리면 된다.
     ! important 끼리 경합하면 선택자가 구체적인 쪽이 이기므로 * 보다 이 규칙이 우선한다. */
  .hero__bg img { animation-duration: var(--hero-cycle) !important; }

  /* 화살표도 마찬가지. 그냥 두면 .01ms 로 끝프레임(opacity:0)에 멈춰 아이콘이 사라진다. */
  .hero__btns .btn--primary svg { animation-duration: var(--btn-arrow-cycle) !important; }

  /* 성장 다이어그램의 두 원도 계속 돈다.
     위 규칙이 *::before / *::after 까지 잡으므로 예외를 명시해야 한다. */
  .growth__diagram::before,
  .growth__diagram::after { animation-duration: var(--growth-spin) !important; }
}




/************************ 기존 스타일 ****************************/

/* Container */
#container{clear:both;width:1020px;position:relative;padding-top:80px;margin:0 auto;z-index:5}

/* 캠프일정 */
.sub_02 h2{width:1020px;height:170px;background:url(/images/h2_sub_02.jpg) center 73px no-repeat;text-indent:-9999px}
.sub_02 .top_reg{width:1020px;height:60px;background:#5b6d84;}
.sub_02 .top_reg h3 {font-size:21px;color:#fff;text-align:center;font-weight:bold; line-height:55px;}
.sub_02 .top_reg img{width:107px;height:37px;display:inline-block;margin-left:10px;position:relative;top:12px}
.sub_02 .type_07{width:1020px;margin:20px 0;border-top:1px solid #ccc}
.sub_02 .type_07 th{width:165px;height:69px;padding:0 0 0 54px;background:#f2f2f2 url(/images/icon_grey.gif) 33px center no-repeat;font-size:15px;color:#666;text-align:left;border-bottom:1px solid #dfdfdf;border-right:1px solid #ccc;vertical-align:middle;font-weight:bold}
.sub_02 .type_07 td{width:754px;padding-left:26px;color:#4a4a4a;border-bottom:1px solid #dfdfdf;vertical-align:middle;position:relative;line-height:20px}
.sub_02 .type_07 td span{color:#C00;font-size:15px;font-weight:bold}
.sub_02 .type_07 td b{color:#4a4a4a;font-size:15px;font-weight:bold}
.sub_02 .type_07 td .detail{padding:15px 0;font-size:15px}
.sub_02 .type_07 td ul{padding:15px 0}
.sub_02 .type_07 td ul li{font-size:15px}
.sub_02 .type_07 td input{vertical-align:top}
.sub_02 .type_07 td .map{position:absolute;top:16px;right:20px}
.btn_right{text-align:right;position:relative}
.btn_right input{margin-left:6px}
.sub_02 .type_08{width:1020px;margin:16px 0 42px 0;overflow:hidden}
.sub_02 .type_08 .title{border:1px solid #cccccc;border-left:none;border-right:none;height:49px; vertical-align:middle;background:#f7f7f7;overflow:hidden}
.sub_02 .type_08 .title b{float:left;display:inline-block;text-align:center;vertical-align:middle;height:36px;padding-top:13px;font-size:15px;color:#666}
.sub_02 .type_08 ul{width:1020px;}
.sub_02 .type_08 ul li{width:1020px;height:55px; border-bottom:1px solid #e5e5e5; padding:0}
.sub_02 .type_08 ul li a{display:block;width:1020px;height:100%;}
.sub_02 .type_08 ul li a:hover{background:#fff9c4}
.sub_02 .type_08 ul li span{text-align:center;font-size:15px;color:#666;vertical-align:middle; display:inline-block}
.sub_02 .type_08 ul li span b{font-size:15px;color:#2a8ce9;}
.sub_02 .type_08 ul li .empty {width:1px; height:100%}
.sub_02 .type_08 ul li .no{width:52px}
.sub_02 .type_08 ul li .place{width:172px;}
.sub_02 .type_08 ul li .time{width:275px;}
.sub_02 .type_08 ul li .check{width:70px}
.sub_02 .type_08 ul li .gold{width:70px}
.sub_02 .type_08 ul li .endday{width:195px}
.sub_02 .type_08 ul li .reg{width:130px;}
.sub_02 .type_08 ul li img {vertical-align:middle; margin-left:8px}
.sub_02 .top_tab{position:relative;text-align:right;border-top:3px solid #5b6d84;vertical-align:top;padding-top:15px}
.sub_02 .top_tab select{width:167px;padding:5px;margin-right:25px;vertical-align:top;position:relative;*top:5px;border:1px solid #b9b9b9}
.sub_02 .top_tab b{color:#666;font-size:13px;vertical-align:top;margin-right:10px;position:relative;top:5px}
.sub_02 .top_tab .date_start{width:66px;height:28px;border:1px solid #b9b9b9;background:#FFF url(/images/bg_start.gif) 0 0 no-repeat;padding:0 10px;line-height:28px;font-size:13px;color:#666}
.sub_02 .top_tab .date_end{width:66px;height:28px;border:1px solid #b9b9b9;background:#FFF url(/images/bg_end.gif) 0 0 no-repeat;padding:0 10px;line-height:28px;font-size:13px;color:#666}
.sub_02 .top_tab .txt{height:28px; width:80px; border:1px solid #cecece;font-size:15px;color:#666;padding:0 10px;line-height:28px}
.sub_02 .top_tab em{display:inline-block;width:6px;height:2px;background:#FFF url(/images/bg_line.gif) center 0 no-repeat;padding:0 4px;*margin-right:3px;vertical-align:top;position:relative;top:13px}
.sub_02 .top_tab .srch{width:77px;height:31px;display:inline-block;vertical-align:top;margin-left:10px}
.paging{text-align:center;clear:both}
.paging input{width:29px;height:27px;display:inline-block;vertical-align:top}
.paging a{width:27px;height:25px;text-align:center;display:inline-block;border:1px solid #fff;color:#2a8ce9;font-size:15px;margin:0 4px;vertical-align:top}
.paging .on{border:1px solid #e6e6e6;background:#f2f2f2}

/* 신청서약서 */
.sub_top{clear:both;width:1020px;height:170px;background:#FFF url(/images/bg_subtop.jpg) 0 38px no-repeat}
.sub_03 h2{width:1020px;height:170px;background:url(/images/h2_sub_03.jpg) center 73px no-repeat;text-indent:-9999px}
.sub_03 .older{width:1020px;overflow:hidden;height:60px;background:url(/images/bg_order.jpg) 0 0 no-repeat}
.sub_03 .older li{float:left;height:60px;color:#fff;font-size:21px;width:333px;text-align:center;line-height:58px;letter-spacing:-1px}
.sub_03 .older_print{width:980px;overflow:hidden;height:40px;background:#5b6d84;color:#fff;font-size:18px; margin-bottom:10px;padding-left:20px; padding-top:8px; font-weight:bold;}

.sub_03 .older2{width:1020px;overflow:hidden;height:60px;background:url(/images/bg_order_2step.jpg) 0 0 no-repeat}
.sub_03 .older2 li{float:left;height:60px;color:#fff;font-size:21px;width:333px;text-align:center;line-height:58px;letter-spacing:-1px}

.type_01{width:1000px}
.type_01 th{width:976px;background:#f2f2f2;color:#666;font-size:15px;text-align:left;border-top:1px solid #ccc;border-bottom:1px solid #dfdfdf;height:49px;vertical-align:middle;padding-left:24px}
.type_01 td{font-size:15px;border-bottom:1px solid #e5e5e5;color:#666;vertical-align:middle;padding:15px 0;letter-spacing:-1px}
.type_01 .chk{text-align:center;width:66px}
.type_01 .chk input{width:17px;height:17px;cursor:pointer}
.type_01 td span{color:#2a8ce9;font-weight:bold;font-size:15px}
.btn_center{width:1020px;text-align:center}
.btn_search{width:77px;height:31px;display:inline-block;background:url(/images/btn_search.gif) 0 0 no-repeat;border:none;text-indent:-9999px;clear:both;cursor:pointer;vertical-align:top}
.sub_03 .chk_alert_01{color:#666;font-size:12px;margin:30px 0 10px 0}
.sub_03 .chk_alert_01 strong{font-size:25px;color:#3e5168;letter-spacing:-1px;padding-right:23px}
.sub_03 .chk_alert_01 span{color:#666;font-size:12px;margin:0 0 10px 0;background:url(/images/icon_red.gif) 0 6px no-repeat;display:inline-block;padding-left:13px;position:relative;*top:10px}
.sub_03 .chk_alert_02{width:975px;height:53px;font-size:15px;color:#666;border:1px solid #f3d44b;background:#fff3bd;padding:12px 0 0 23px;font-weight:bold;margin:0 0 12px 0}
.sub_03 table{margin-bottom:40px}
.type_02{width:1020px;border-top:1px solid #}
.type_02 th{background:#f2f2f2;height:49px;font-size:14px;color:#666;width:145px;vertical-align:middle;border-right:1px solid #dfdfdf;border-bottom:1px solid #ccc;text-align:left;padding-left:25px}
.type_02 td{border-bottom:1px solid #ccc}
.type_02 .inp_01{width:249px;text-align:center;vertical-align:middle}
.type_02 .inp_01 input{width:196px;height:28px;border:1px solid #b9b9b9;line-height:28px;padding:0 10px}
.type_02 .inp_02{vertical-align:middle;width:px}
.type_02 .inp_02 input{width:17px;height:17px;vertical-align:top}
.type_02 .inp_02 label{font-size:15px;color:#555;vertical-align:middle;cursor:pointer}
.type_02 .first th{border-bottom:1px solid #dfdfdf;border-top:1px solid #ccc}
.type_02 .first td{border-bottom:1px solid #dfdfdf;border-top:1px solid #ccc}
.sub_03 .sub_bot{font-size:15px;color:#666;font-weight:bold;margin:0}
.sub_03 .chk_agree{margin-bottom:45px}
.sub_03 .chk_agree li{margin-bottom:10px}
.sub_03 .chk_agree label{font-size:15px;color:#666;font-weight:bold}
.sub_03 .chk_agree a{color:#2a8ce9;text-decoration:underline;font-size:15px;margin-left:8px;font-weight:bold}
.sub_03 .chk_agree label input{width:17px;height:17px;vertical-align:top;margin-right:11px}
.type_04{width:1020px;border-top:1px solid #ccc;margin-bottom:30px !important}
.type_04 th{vertical-align:middle;background:#f2f2f2;border-bottom:1px solid #dfdfdf;height:49px;color:#666;font-size:15px}
.type_04 td{width:768px;padding-left:13px;vertical-align:middle;border-bottom:1px solid #dfdfdf;color:#666;font-size:15px}
.type_04 td select{padding:4px 4px 5px 4px;font-size:15px;color:#666;border:1px solid #cecece;margin-right:5px}
.type_04 .top_th{width:219px;background:#f2f2f2 url(/images/icon_red.gif) 64px 23px no-repeat;border-right:1px solid #ccc}
.type_04 .red{width:105px;padding-left:24px;border-left:1px solid #dfdfdf;border-right:1px solid #ccc;text-align:left;background:#f2f2f2 url(/images/icon_red.gif) 12px center no-repeat}
.type_04 .red_02{width:105px;padding-left:24px;border-left:1px solid #dfdfdf;border-right:1px solid #ccc;text-align:left;background:#f2f2f2 url(/images/icon_red.gif) 12px 27px no-repeat}
.type_04 .red_none{width:105px;padding-left:24px;border-left:1px solid #dfdfdf;border-right:1px solid #ccc;text-align:left;background:#f2f2f2}
.type_04 .txt{height:28px;border:1px solid #cecece;font-size:15px;color:#666;padding:0 10px;line-height:28px}
.type_04 label{font-size:15px;cursor:pointer;position:relative;*top:-5px}
.type_04 label input{width:18px;height:18px;vertical-align:middle;position:relative;top:-2px;*top:0}
.type_04 span{color:#999;position:relative;*top:-7px}
.type_04 em{display:inline-block;width:6px;height:2px;background:#FFF url(/images/bg_line.gif) center 0 no-repeat;vertical-align:middle;padding:0 3px;position:relative;*top:-3px}
.type_04 textarea{vertical-align:middle;border:1px solid #cecece;padding:10px;color:#666}
.type_04 p{color:#999}
.type_04 b{color:#2a8ce9;font-size:15px}
.type_04 strong{font-size:15px;font-weight:normal}
.type_04 .last ul .alert{color:#ff2929}
.type_04 .last ul li{color:#999;font-size:12px;margin-bottom:6px}
.type_04 div{padding:4px 0 4px 70px;position:relative}
.type_04 div p{font-size:15px;position:absolute;top:7px;left:0;color:#666}
.type_04 .bdb_bold{border-bottom:1px solid #ccc}
.type_04 .red_bank{color:#C00}
.type_05{width:1020px;border-top:1px solid #ccc;margin:12px 0 27px 0 !important}
.type_05 th{vertical-align:middle;background:#f2f2f2;border-bottom:1px solid #dfdfdf;height:49px;color:#666;font-size:15px;border-right:1px solid #dfdfdf}
.type_05 td{border-right:1px solid #dfdfdf;border-bottom:1px solid #ccc;height:49px;text-align:center;vertical-align:middle}
.type_05 td input{width:140px;height:28px;padding:0 10px;line-height:28px;color:#666;border:1px solid #cecece}
.type_05 .bdr_n{border-right:none}
.reg_end{width:998px;height:315px;border:1px solid #f3d44b;background:#fff7d5;text-align:center}
.reg_end b{display:inline-block;font-size:30px;color:#494e54;letter-spacing:-3px;padding:25px 0 0 0;height:65px;border-bottom:1px solid #d9cd97}
.reg_end p{font-size:15px;color:#666;font-weight:bold;line-height:30px;padding-top:25px;height:105px}
.type_06{width:1020px;margin-top:12px}
.type_06 th{font-size:15px;color:#666;background:#f2f2f2;font-weight:bold;border-top:1px solid #ccc;border-bottom:1px solid #dfdfdf;text-align:left;padding-left:25px;width:975px;height:49px;vertical-align:middle}
.type_06 td{font-size:15px;color:#666;border-bottom:1px solid #dfdfdf;text-align:left;padding-left:25px;width:975px;height:49px;vertical-align:middle}
.type_06 td b{font-size:15px}
.type_06 .red{color:#ff2929}
.type_06 .blue{color:#2a8ce9}
.type_06 ul{padding:19px 0 14px 0}
.type_06 ul li{margin-bottom:5px}

/* 캠프소식 */
.sub_04 h2{width:1020px;height:170px;background:url(/images/h2_sub_04.jpg) center 73px no-repeat;text-indent:-9999px}
.sub_04 .top_tab{text-align:right;border-top:3px solid #5b6d84;vertical-align:top;padding-top:15px;border-bottom:1px solid #ccc;height:46px}
.sub_04 .top_tab .txt{width:166px;height:28px;border:1px solid #ccc;padding:0 10px;line-height:28px;margin-right:10px}
.sub_04 .top_tab input{vertical-align:top}
.sub_04 .list{width:1020px;border-bottom:1px solid #ccc;overflow:hidden;padding-bottom:10px;margin:15px 0 43px 0}
.sub_04 .list li{float:left;width:240px;height:229px;margin:0 13px 10px 0}
.sub_04 .list li a{display:block;width:238px;height:229px;border:1px solid #ccc;cursor:pointer}
.sub_04 .list li a .img{width:238px;height:158px; border-bottom:1px solid #ccc;text-align:center;vertical-align:middle; position:relative; }
.sub_04 .list li a .img img {margin:auto; position:absolute; TOP:0; left:0; right:0; bottom:0; }
.sub_04 .list li a .title{text-align:center;font-size:15px;color:#666;height:38px;border-bottom:1px solid #e5e5e5;line-height:38px;font-weight:bold}
.sub_04 .list li a:hover .title{color:#2a8ce9}
.sub_04 .list li a div{position:relative;text-align:right;color:#999;height:29px;line-height:29px;padding-right:8px;width:230px}
.sub_04 .list li a div span{position:absolute;top:0;left:11px;text-align:left;line-height:29px;display:inline-block}
.sub_04 .list .mr_none{margin-right:0}
.sub_04 .list .img_none{background:url(/images/no_img.jpg) 0 0 no-repeat}
.sub_04 .type_view{border-top:3px solid #5b6d84;width:1020px;margin-bottom:17px}
.sub_04 .type_view th{border-bottom:1px solid #ccc;background:#f2f2f2;height:49px;text-align:left;vertical-align:middle;font-size:15px;color:#666;padding-left:25px;width:975px}
.sub_04 .type_view th b{font-size:15px}
.sub_04 .type_view .top_info{border-bottom:1px solid #ccc;padding-left:22px;width:978px;color:#666;height:34px;vertical-align:middle;position:relative}
.sub_04 .type_view .top_info a{color:#2a8ce9;text-decoration:underline}
.sub_04 .type_view .top_info span{position:absolute;top:8px;right:25px}
.sub_04 .type_view .top_info span b{display:inline-block;padding-left:35px;font-weight:normal}
.sub_04 .type_view .content{border-bottom:1px solid #ccc;padding:50px 20px;font-size:15px;color:#666;line-height:28px;min-height:450px}
.btn_right span{position:absolute;top:0;left:0}

/* 로그인 */
.sub_05 h2{width:1020px;height:170px;background:url(/images/h2_sub_05.jpg) center 73px no-repeat;text-indent:-9999px}
.sub_05 .top_tab {text-align:center;border-top:3px solid #5b6d84;padding-top:100px;}
.sub_05 .top_tab input.bgrey {border:1px solid #bbb;padding:14px 0 14px 15px;font-size:14px;vertical-align:middle;color:#9ca8b2;margin-right:5px;}
.sub_05 .top_tab input.txtbg {background:url(/Images/pw_txtbg.gif) no-repeat 15px 12px; border:1px solid #bbb;padding:14px 0 14px 15px;font-size:14px;vertical-align:middle;margin-right: 8px;}
.sub_05 .top_tab .login_btn {vertical-align:middle;}

/* 약관 팝업 */
.popup_wrap {border:5px solid #465389; background:#f0f0f0}
.popup_wrap .title {font-size:22px; color:#fff; height:37px; background:#465389; padding:13px 0 0 20px; position: relative;}
.popup_wrap .title .close {position:absolute; top:20px; right:25px;}
.popup_wrap .script {border:1px solid #d1d1d1; margin:20px; background:#fff; padding:20px; font-size:12px; overflow-x:hidden; overflow-y:scroll;}
.popup_wrap .script2 {
  padding: 25px;
  font-family: "dotum", sans-serif;
  background: #fff;
}
.popup_wrap .script2 .inner-wrap {
	width: 427px;
  margin: 0 auto;
  letter-spacing: -0.7px;
}
.popup_wrap .script2 .inner-wrap h3 {
  margin-top: 1px;
  margin-bottom: 13px;
  font-size: 13px;
}
.popup_wrap .script2 .inner-wrap p {
  margin-bottom: 5px;
  font-size: 14px;
}
.popup_wrap .script2 .inner-wrap p a {
  font-weight: bold;
  color: #2a8ce9;
  text-decoration: underline;
}
.popup_wrap .script2 .inner-wrap table {
  margin-top: 16px;
  border: 1px solid #ccc;
}
.popup_wrap .script2 .inner-wrap table tr th {
  width: 122px;
  padding-left: 24px;
  font-size: 15px;
  font-weight: normal;
  text-align: left;
  background: #f2f2f2;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #dfdfdf;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.popup_wrap .script2 .inner-wrap table tr td {
  padding: 11px 13px;
  font-size: 0;
  border-bottom: 1px solid #dfdfdf;
}
.popup_wrap .script2 .inner-wrap table tr td input[type="text"],
.popup_wrap .script2 .inner-wrap table tr td select {
  width: 176px;
  height: 30px;
  padding: 0 10px;
  font-size: 14px;
  border-left: 1px solid #b9b9b9;
  border-top: 1px solid #b9b9b9;
  border-right: 1px solid #cecece;
  border-bottom: 1px solid #cecece;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
}
.popup_wrap .script2 .inner-wrap table tr:last-of-type th,
.popup_wrap .script2 .inner-wrap table tr:last-of-type td {
  border-bottom: 0;
}
.popup_wrap .script2 .inner-wrap table tr td.phone {
  font-size: 14px;
  color: #aeaeae;
}
.popup_wrap .script2 .inner-wrap table tr td.phone input[type="text"] {
  width: 79px;
}
.popup_wrap .script2 .inner-wrap table tr td.phone select {
  width: 79px;
  padding-right: 0;
}
.popup_wrap .script2 .inner-wrap table tr td a img {
  margin-left: 11px;
  vertical-align: bottom;
}
.popup_wrap .script2 .inner-wrap .btn-wrap {
  margin-top: 24px;
	text-align: center;
}

.tbl_type,.tbl_type th,.tbl_type td{border:0}
.tbl_type{width:100%;border-bottom:2px solid #dcdcdc;font-family:'돋움',dotum;font-size:12px;text-align:center;border-collapse:collapse}
.tbl_type caption{display:none}
.tbl_type tfoot{background-color:#f5f7f9;font-weight:bold}
.tbl_type th{padding:7px 0 4px;border-top:2px solid #dcdcdc;border-right:1px solid #dcdcdc;border-left:1px solid #dcdcdc;background-color:#f5f7f9;color:#666;font-family:'돋움',dotum;font-size:12px;font-weight:bold}
.tbl_type td{padding:6px 0 4px;border:1px solid #e5e5e5;color:#4c4c4c}
.tbl_type td a{color:#0096ff; text-decoration:underline;}

.sub_02 .top_tab .desc {position:absolute; left:0; bottom:0; font-weight:bold}
.sub_02 .top_tab .desc .sblue {color:#387ddb}
.sub_02 .top_tab .desc .sred {color:#f34e4e}

.btn_apply{
  margin: 30px 0 55px 0;
  text-align: center;
}