/* ===== Design Tokens ===== */
:root{
  --bg:#0b0b0d; --bg-alt:#0f1115;
  --text:#eaeaf0; --muted:#9aa0b3; --line:#2a2d36;
  --brand1:#5dc6ff;      /* 헤럴드 H 하늘색 톤 참고 */
  --brand2:#d4af37;      /* 골드 */
  --accent:#78dfcd;      /* 채널톡 강조용 파란계열 */
  --max:1280px; --header-h:64px;
  --light:#f7f9fc; --light-text:#0e1116; --light-muted:#5b6170; --light-line:#e5e8ef;
}

/* ===== Typography Base ===== */
:root{
  /* 전역 글꼴(노토 산스 KR 고정) */
  --font-sans: "Noto Sans KR","Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Apple SD Gothic Neo","Malgun Gothic","Helvetica Neue",Arial,sans-serif;

  /* 본문 기본 */
  --text-base: 16px;
  --leading-base: 1.6;
}

/* 제목 계층(선택) */
h1,h2,h3,h4,h5,h6{ font-family: var(--font-sans); margin:0 0 .5em; line-height:1.25; }
h1{ font-weight:800; font-size:clamp(2rem, 2.5vw + 1rem, 2.75rem); }
h2{ font-weight:700; font-size:clamp(1.5rem, 2vw + .75rem, 2rem); }
h3{ font-weight:700; font-size:1.5rem; }
h4{ font-weight:600; font-size:1.25rem; }
h5{ font-weight:600; font-size:1.125rem; }
h6{ font-weight:500; font-size:1rem; }
strong,b{ font-weight:700; }

/* 굵기 유틸 */
.fw-regular{   font-weight:400; } /* Regular   */
.fw-medium{    font-weight:500; } /* Medium    */
.fw-semibold{  font-weight:700; } /* Semibold→KR은 600이 없어 700 매핑 */
.fw-bold{      font-weight:700; } /* Bold      */
.fw-extrabold{ font-weight:900; } /* Extrabold→KR은 800이 없어 900 매핑 */

/* 크기 유틸(선택) */
.text-xs{  font-size:12px; }
.text-sm{  font-size:14px; }
.text-base{font-size:16px; }
.text-lg{  font-size:18px; }
.text-xl{  font-size:20px; }
.text-22{  font-size:22px; }
.text-2xl{ font-size:24px; }
.text-3xl{ font-size:30px; }
.text-32{  font-size:32px;}
.text-4xl{ font-size:36px; }
.text-48{ font-size:48px; }


/* ===== Reset / Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:var(--font-sans);
    font-size:var(--text-base);
    line-height:var(--leading-base);
    background:var(--bg); color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}
a{color:inherit}

/* ===== Layout ===== */
.container{max-width:var(--max); margin-inline:auto; padding:0 20px}
.section{padding:120px 0; background:var(--bg)}
.section--alt{background:var(--bg-alt)}
.section--light{ --light:var(--);background:var(--light); color:var(--light-text); }
.section--light .muted{ color:var(--light-muted); }
.section--light .title-md{ color:var(--light-text); }
.section--photo{
  position:relative; isolation:isolate; background:transparent;
}
.section--photo::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.65) 0%, rgba(255,255,255,.25) 40%, rgba(0,0,0,.35) 100%),
    var(--bg-url, none);
  background-size:cover; background-position:center; filter:saturate(1.05) contrast(1.02);
  z-index:0;
}
.section--photo > *{ position:relative; z-index:1; }
.section--cta{background:linear-gradient(90deg,var(--brand1),var(--brand2)); color:#171717; text-align:center}
.cta__inner{max-width:760px; margin-inline:auto}
.cta__actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ===== Typography ===== */
.title-xl{font-size:40px; line-height:1.2; margin:0 0 16px; letter-spacing:-.01em}
.title-md{line-height:1.25; margin:0 0 16px; color: #B92E2C;}
.subtitle{opacity:.95; margin:0 0 20px;}
.subtitle2{opacity:.95; margin:0 0 1px;}
.lead{color:var(--muted); margin:0 0 32px}
.ta-center{ text-align:center; }
.muted{ color:var(--muted); }

/* ===== Grid ===== */
.grid{display:grid; gap:20px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1200px){ .grid--4{ grid-template-columns:repeat(2,1fr)} }
@media (max-width:960px){ .grid--2,.grid--3{grid-template-columns:1fr} }
@media (max-width:640px){ .grid--4{ grid-template-columns:1fr } }

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; left:0; right:0;
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  z-index:200;
}
.header__inner{
  width:min(1280px, 94%);
  margin:0 auto;
  height:64px;
  display:flex; justify-content:space-between; align-items:center;
}
.header__brand img{
  width:157px;   /* 너비 고정 */
  height:35px;   /* 높이 고정 */
  object-fit:contain;  /* 원본 비율 왜곡 방지 */
  display:block;
}

/* gnb */
.gnb{
  display:flex; align-items:center; gap:18px; 
  font-weight:500;
  font-size: 14px;
}
.gnb a{
  color:#111; text-decoration:none; padding:8px 10px;
  border-radius:6px; transition: background .2s;
}

.kor-font15 {
  font-size: 15px !important;
}

.gnb a:hover{ background:#f3f4f6; }
.gnb a.is-active{
  background:#f3f4f6; font-weight:700;
}
.gnb .btn-kakao{
  background:#facc15; color:#111; font-weight:700;
  padding:8px 14px; border-radius:8px;
  transition:background .2s;
}
.gnb .btn-kakao:hover{ background:#fbbf24; }

/* ===== Card ===== */
.card{
  background:#ffffff0a; border:1px solid var(--line); border-radius:14px; padding:20px;
  transition:transform .2s ease, background .2s ease
}
.card:hover{transform:translateY(-2px); background:#ffffff12}
.card__title{margin:0 0 8px; font-size:18px;}
.card__body{margin:0; color:var(--muted)}
.card--light{
  background:#fff; color:var(--light-text);
  border:1px solid var(--light-line);
}
.cards-raise .card{ transition:transform .25s ease, box-shadow .25s ease }
.cards-raise .card:hover{ transform: translateY(-6px); box-shadow:0 12px 28px rgba(0,0,0,.18) }

/* ===== Lists ===== */
.bullet{margin:0; padding-left:18px; color:var(--muted)}
.numbered{margin:0; padding-left:20px; color:var(--muted)}

/* ===== Form (기존 유지) ===== */
.form .form__row{display:flex; flex-direction:column; gap:6px; margin:14px 0}
.form fieldset{border:0; padding:0; margin:0}
.form .legend{font-weight:800; margin:12px 0 8px}
input,select,textarea{
  background:#0d0f14; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:12px 12px;
}
input::placeholder,textarea::placeholder{color:#8c90a1}
.form .hint{color:#9aa0b3; font-size:12px; margin:8px 0 0}
.form .note{color:#c9cddd; font-size:14px; background:#ffffff0a; border:1px solid var(--line); border-radius:10px; padding:10px 12px}

/* ===== Buttons ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; text-decoration:none; border-radius:12px; padding:12px 16px; border:1px solid transparent; cursor:pointer}
.btn--sm{padding:8px 12px; font-size:14px}
.btn--lg{padding:14px 18px; font-size:16px}
.btn--primary{background:#171717; color:var(--brand2); border-color:#000000}
.btn--primary:hover{background:#0e0e0e}
.btn--ghost{background:transparent; color:var(--text); border-color:#ffffff2a}
.btn--ghost:hover{background:#ffffff12}
.btn--kakao{background:#fee500; color:#111; border-color:#111}
.btn--kakao:hover{filter:brightness(.95)}
.btn--ghost-light{ background:transparent; color:var(--light-text); border:1px solid var(--light-line); }
.btn--ghost-light:hover{ background:#f2f4f8; }
.btn--accent{ background:var(--accent); color:#06223a; border-color:#0591e5; }
.btn--accent:hover{ filter:brightness(.95); }

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--line); background:#0f1115; padding:24px 0; color:#aeb2bf}
.site-footer a{color:#c7cbda; text-decoration:none; margin-right:12px}
.site-footer a:hover{color:#fff}
.footer__affil{ margin-top:12px; display:flex; align-items:center; gap:10px; color:#c7cbda; }
.footer__affil .hmark{ padding:4px 8px; border:1px dashed #ffffff3a; border-radius:6px; font-size:12px }

/* ===== Accessibility ===== */
.skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip:focus{left:16px; top:16px; width:auto; height:auto; padding:10px 12px; background:#000; color:#fff; border-radius:10px}
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease}
.reveal.show{opacity:1; transform:none}
[id]{scroll-margin-top:84px}
/* ===== Hero Section ===== */
.hero-slide{
  position:relative; color:#fff; text-align:center;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  min-height: calc(100vh - 64px);
  padding:0 20px;
}
.hero-slide h1{
  font-size: clamp(32px, 3vw, 42px);
  font-weight:800;
  margin-bottom:14px;
}
.hero-slide h2{
  font-size: clamp(22px, 2vw, 28px);
  font-weight:600;
  margin-bottom:12px;
}
.hero-slide p{
  font-size:16px; opacity:.9; margin-bottom:24px;
}
.hero-slide .hero-logo{
  display:block; margin:0 auto 18px;
  width:min(420px, 80%); height:auto;
}
.hero-slide .hero-btns{
  display:flex; gap:12px; justify-content:center;
}

.hero-slide .hero-btns a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px; border-radius:999px;
  font-weight:700; text-decoration:none;
  font-size:15px;
  transition: all .2s;
}
.hero-slide .btn-reserve{
  background:#fff; color:#111; border:2px solid #0ea5e9;
}
.hero-slide .btn-reserve:hover{ background:#0ea5e9; color:#fff; }
.hero-slide .btn-why{
  background:#0ea5e9; color:#fff;
}
.hero-slide .btn-why:hover{ background:#0284c7; }

/* ===== Hero Slider ===== */
.section--hero{ padding:0; }
.hero--slider .slider{ position:relative; width:100%; height:calc(100vh - var(--header-h)); min-height:620px; overflow:hidden; background:#0b0b0d; }
@media (max-width:640px){ .hero--slider .slider{ min-height:540px; } }
.slides{ display:flex; height:100%; transition:transform .7s ease; will-change:transform; }
.slide{ position:relative; flex:0 0 100%; height:100%; isolation:isolate; }
.slide__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.06) contrast(1.03); }
.slide::after{
  content:""; position:absolute; inset:0;
  /* 기존보다 밝은 오버레이 */
  background:linear-gradient(180deg,rgba(255,255,255,.35) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.55) 100%);
  z-index:0;
}
.slide__inner{ position:relative; z-index:1; height:100%; display:flex; align-items:center; }
.slide__text{ max-width:920px; }
.text-brand{ color:var(--brand1); }
.slider__nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#00000055; color:#fff; border:1px solid #ffffff2a; cursor:pointer; z-index:2; }
.slider__nav:hover{ background:#00000088 } .slider__nav.prev{ left:16px } .slider__nav.next{ right:16px }
.dots{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:flex; gap:10px; z-index:2; }
.dot{ width:10px; height:10px; border-radius:50%; background:#ffffff70; border:1px solid #ffffff99; cursor:pointer; }
.dot.is-active{ background:var(--brand1); border-color:var(--brand1); }

/* 이미지 타이틀/버튼 크기 */
.hero__title-img{ width: 252px;  height:26px; margin: 20px 0 0; }
.hero__title-img2{ width: 379px;  height:40px; margin: 20px 0 0; }
.hero__title-img3{ width: 505px;  height:53px; margin: 0 0 20px; }
.hero__title-img4{ width: 505px;  height:53px; margin: 20px 0 20px; }
.about__title-logo-img1{width: 350px; height: 40px; margin: 20px 0 0;}
.about__title-logo-img2{width: 252px; height: 26px; margin: 0 0 0;}
.about__title-logo-img3{width: 379px; height: 40px; margin: 0 0 40px;}
.hero__cta-img{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.hero__cta-img img{ height:48px; width:auto; display:block; }
@media (max-width:640px){
  .hero__cta-img img{ height:44px; }
}

/* 헤더 우측 카카오 버튼 정렬 (필요시) */
.header__kakao{ display:inline-flex; align-items:center; margin-left:12px; }


/* ===== Lined Sections & helpers ===== */
.section--lined{ border-top:2px solid #1a1a1a; border-bottom:2px solid #1a1a1a; }
.mt-12{ margin-top:12px; }

/* ===== Reviews Marquee ===== */
.marquee{
  --show: 4; --h: 320px; --gap: 16px;
  position: relative; overflow: hidden; border-radius: 16px;
  background: #ffffff; border:1px solid var(--light-line);
}
.marquee__track{ display:flex; gap:var(--gap); width:max-content; animation:marquee-left 35s linear infinite; will-change:transform; }
.marquee:hover .marquee__track{ animation-play-state: paused; }
.marquee__item{
  flex:0 0 calc((100vw - var(--gap) * (var(--show) - 1) - 40px) / var(--show));
  max-width:460px; height:var(--h);
  border-radius:12px; border:1px solid var(--light-line); background:#f8fafc;
  display:grid; place-items:center;
}
.marquee__item img{ width:100%; height:100%; object-fit:contain; border-radius:12px; }
.marquee::before,.marquee::after{ content:""; position:absolute; top:0; bottom:0; width:80px; pointer-events:none; }
.marquee::before{ left:0; background:linear-gradient(90deg, var(--light) 0%, transparent 100%); }
.marquee::after { right:0; background:linear-gradient(-90deg, var(--light) 0%, transparent 100%); }
@keyframes marquee-left{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee[data-dir="right"] .marquee__track{ transform:translateX(-50%); animation-name:marquee-right; }
@keyframes marquee-right{ from{transform:translateX(-50%)} to{transform:translateX(0)} }
@media (min-width:1440px){ .marquee{ --show: 5; --h: 340px; } }
@media (max-width:1200px){ .marquee{ --show: 3; --h: 300px; } }
@media (max-width:768px) { .marquee{ --show: 2; --h: 260px; } }
@media (max-width:480px) { .marquee{ --show: 1.4; --h: 220px; } }

/* ===== Office ===== */
.card--office .addr{ line-height:1.7; }
.card--office .phone{ font-size:12px; }
.office .mapbox{
  margin-top:12px; height:240px; border:1px dashed var(--light-line);
  border-radius:12px; display:grid; place-items:center; background:#ffffff0d;
}
.section--light .office .mapbox{ border-color:#cfd6e6; background:#f5f7fb; }
.img-placeholder{ font-size:14px; color:#7b869a; }

/* ===== Sticky Bottom Bar ===== */
.sticky-bar{
  position:sticky; bottom:0; z-index:1001;
  background:rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border-top:1px solid var(--light-line); padding:12px 0;
}
.sticky-bar__inner{ display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
@media (prefers-color-scheme: dark){
  .sticky-bar{ background:rgba(15,17,21,.9); border-top:1px solid #2a2d36; }
  .btn--ghost-light{ color:#eaeaf0; border-color:#2a2d36; }
}

/* ===== Floating Kakao (기존 사용 X, 고정바로 대체) ===== */
/* .floating-kakao{ display:none; } */

/* ===== Accessibility reveal already defined above ===== */

/* ===== Section 2: Early Study Program ===== */
.section--early {
  position: relative;
  padding: 80px 0;
  background:
    linear-gradient(rgba(232,236,242,.9), rgba(232,236,242,.9)),
    var(--bg) center/cover no-repeat;
  text-align: center;
}
.ex-subtitle{opacity:.95; margin:0 0 20px; color: #803130;}


.early-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
  margin-top: 32px;
}
@media (max-width: 960px) {
  .early-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .early-grid { grid-template-columns: 1fr; }
}

.early-card {
  background: #ffffff;
  border: 1px solid #EDA340;
  border-radius: 12px;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.early-icon { max-width: 100px; height: auto; margin-bottom: 12px; }
.early-title { margin-bottom: 6px; color:#B92E2C; }
.early-desc { margin-bottom: 12px; color:#666666; height: 45px; }
.early-btn {
  display: inline-block;
  padding: 10px 20px;
  background: #CE5D5F;
  color: #fff;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s;
}
.early-btn:hover {   
  background:#803130; color:#fff; transform:translateY(-1px);
 }

/* ===== Aside Floating Menu ===== */
.aside-nav{
  position: fixed;
  top: 22%;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 100;
}

/* 검은 배경 스택 (메뉴 5개만 포함) */
.aside-stack{
  background: #880C24;
  border-radius: 28px;
  padding: 14px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* 각 아이템 */
.aside-item img{ width: 60px; height: auto; display: block; }
.aside-item{ opacity:.95; transition: transform .15s ease, opacity .15s ease; }
.aside-item:hover{ transform: translateY(-2px); opacity:1; }

/* 아이템 사이 구분 라인 (이미지 아래 실선) */
.aside-item + .aside-item{ position: relative; }
.aside-item + .aside-item::before{
  content:"";
  position:absolute; left:10%; right:10%; top:-6px; height:2px;
  background: rgba(255,255,255,.12);
}

/* TOP 버튼은 분리(검은 배경 밖) */
.top-btn img{ width: 60px; height:auto; display:block; }
.top-btn{ filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); transition: transform .15s ease; }
.top-btn:hover{ transform: translateY(-2px); }

/* 반응형 */
@media (max-width: 1024px){
  .aside-nav{ right: 12px; }
  .aside-item img{ width: 54px; }
  .top-btn img{ width: 50px; }
}
@media (max-width: 640px){
  .aside-nav{ top: auto; bottom: 20px; right: 10px; gap:10px; }
}

/* ===== Aside: Consultation Hours badge (Notice와 TOP 사이) ===== */
.aside-hours{
  display:flex; justify-content:center; align-items:center;
  /* 스택과 TOP 사이 간격 */
  margin-top: 8px; 
  margin-bottom: 6px;

  /* 배지 배경/형태 (원본 이미지가 둥글면 아래 3줄은 생략 가능) */
  background: #880C24;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  padding: 6px 8px;
}

.aside-hours img{
  width: 180px;      /* aside 시안 기준 자연스러운 폭 */
  height: auto;
  display:block;
}

/* 반응형 보정 */
@media (max-width: 1024px){
  .aside-hours img{ width: 184px; }
}
@media (max-width: 640px){
  .aside-hours{ margin: 6px 0; }
  .aside-hours img{ width: 168px; }
}

/* ===== Aside kr ===== */
.aside-hours-kr{
  display:flex; justify-content:center; align-items:center;
  /* 스택과 TOP 사이 간격 */
  margin-top: 8px; 
  margin-bottom: 6px;

  /* 배지 배경/형태 (원본 이미지가 둥글면 아래 3줄은 생략 가능) */
  background: #880C24;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  padding: 6px 8px;
}

.aside-hours-kr img{
  width: 130px;      /* aside 시안 기준 자연스러운 폭 */
  height: auto;
  display:block;
}

/* 반응형 보정 */
@media (max-width: 1024px){
  .aside-hours-kr img{ width: 184px; }
}
@media (max-width: 640px){
  .aside-hours{ margin: 6px 0; }
  .aside-hours-kr img{ width: 168px; }
}
/* aside kr 끝*/

/* ===== Section 3: 상담 예약 CTA ===== */
.cta3-section{
  background:#803130; /* 필요시 이미지/그라데이션으로 교체 가능 */
  color:#fff;
  padding:72px 0;
  text-align:center;
}
.cta3-inner{ width:min(960px, 92%); margin:0 auto; }

.cta3-logo{
  display:block; margin:0 auto 32px;
  width:379px; height:40px;
}

.cta3-heading{
  font-size:clamp(20px, 2.2vw, 28px);
  font-weight:800;
  margin:8px 0 8px;
}
.cta3-desc{
  font-size:clamp(14px, 1.25vw, 18px);
  opacity:.95; margin:0 auto 22px;
}

.cta3-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 28px;
  border:2px solid #fff; border-radius:999px;
  color:#fff; text-decoration:none; font-weight:700;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.cta3-btn:hover{
  background:#fff; color:#0b0b0d; transform:translateY(-1px);
}

/* ===== Section 4: REAL EXPERIENCES (1194px centered + seamless loop) ===== */
.stories-section{ background:#fff; padding:80px 0; text-align:center; }
.stories-heading{ color:#CE5D5F; line-height:1.3; margin-bottom:12px; }
.stories-sub{ margin-bottom:8px; color: #444444; }
/* 텍스트 뒤 배경 띠 */
.text-band{
  display:inline-block; max-width: 1194px; width: auto;
  background: #803130;              /* 파란 띠 색 */
  color: #fff;
  padding: 6px 14px;                /* 텍스트 주변 여백 */
  border: 2px solid #EDA340;        /* 밝은 파란 테두리 */
  border-radius: 6px;
  line-height: 1.4;
  box-decoration-break: clone;      /* 줄바꿈 시 띠가 끊기지 않게 */
  -webkit-box-decoration-break: clone;
}

/* 중앙정렬(문단 자체는 이미 중앙이므로 너비를 적당히 제한하고 싶다면) */

.stories-desc{
  margin-bottom: 32px;
}

.stories-viewport{
  width:1194px; max-width:92vw;
  margin:0 auto;
  overflow:hidden;
  position:relative;
}
.stories-track{
  display:flex; gap:20px;
  will-change: transform;
}
/* 카드 폭은 이미지 자체 폭을 따르지만, 필요 시 고정 가능 */
.story-card{ flex:0 0 auto; border-radius:12px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.1); background:#f5f5f5; }
.story-card img{ display:block; width:225px; height:225px; } /* 샘플 이미지 크기에 맞춤 */

/* 애니메이션: JS가 --loop(픽셀), --duration(s)를 채워줌 */
.stories-track.is-animating{
  animation: marquee var(--duration, 40s) linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--loop, 0px))); }
}

/* 호버 시 일시정지 */
.stories-viewport:hover .stories-track{ animation-play-state: paused; }

/* ===== Section 5: OFFICE ===== */
.office-section{
  background:#f4f6f9;
  padding:72px 0;
}
.office__inner{
  width:min(1280px, 92%);
  margin:0 auto;
}
.office__heading{
  text-align:center;
  color:#803130;
  letter-spacing:.5px;
  margin-bottom:28px;
}

.office__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:28px;
}
@media (max-width: 960px){
  .office__grid{ grid-template-columns: 1fr; }
}

.office-card{
  background:#fff;
  border:2px solid #EDA340;           /* 파란 라운드 보더 */
  border-radius:16px;
  padding:22px;
  display:flex; flex-direction:column; gap:16px;
}
.office-card__title{
  color:#B92E2C;
  margin:0 0 6px;
}
.office-card__meta{
  color:#803130; line-height:1.5; margin:0;
}
.office-card__map{
  border:2px solid #c75d5e;           /* 지도 영역 보더 */
  border-radius:12px;
  overflow:hidden;
  background:#eaf6ff;
}
.office-card__map img,
.office-card__map iframe{
  display:block; width:100%;
  aspect-ratio: 16/9;                  /* 비율 유지 */
  height:auto;                         /* iframe은 aspect-ratio가 height 계산 */
  border:0;
}
.office-card__desc{
  color:#444444; margin:0;
}

/* ===== Footer ===== */
.site-footer{
  background:#4B3C37; /* 이미지와 유사한 딥블루 */
  color:#cfd8e3;
  padding: 36px 0;
}
.footer__inner{
  width:min(1280px, 92%);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.4fr .8fr;
  gap: 40px;
  align-items:start;
}
@media (max-width: 900px){
  .footer__inner{ grid-template-columns: 1fr; gap:24px; }
}

.footer__brand img{
  display:block;
  height:40px; /* 필요 시 24~32px 사이 조절 */
  width:280px;
  margin-bottom:12px;
}

.footer__links{
  display:flex; align-items:center; flex-wrap:wrap;
  gap: 10px; margin: 6px 0 10px;
}
.footer__links a{
  color:#e5edf7; text-decoration:none; font-weight:500;
}
.footer__links a:hover{ text-decoration:underline; }
.footer__links .sep{ opacity:.5; }

.footer__copy{
  margin: 6px 0 0;
  color:#a7b4c8;
  line-height:1.6;
  font-size: 0.95rem;
}

/* 오른쪽 */
.footer__title{
  color:#ffffff; font-size:1.05rem; font-weight:800; margin:0 0 10px;
}
.footer__hours{
  list-style:none; padding:0; margin:0;
  color:#cfd8e3; opacity:.9;
}
.footer__hours li{ line-height:1.8; }

/* =========================
   About Page (scoped)
   ========================= */
[data-page="about"] {
  --about-blue-900: #0d3b9f;
  --about-blue-800: #1f58c4;
  --about-blue-700: #2a6fe5;
  --about-blue-100: #e9f1ff;
  --about-blue-050: #f5f9ff;
  --about-sky-100: #eaf4ff;
  --about-text: #0e1b2a;
  --about-muted: #5a6a85;
  --about-card-bg: #ffffff;
  --about-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  --about-radius-lg: 16px;
  --about-radius-md: 12px;
  --about-radius-sm: 10px;
}

[data-page="about"] .page-about .accent { color: var(--about-blue-700); }

[data-page="about"] .about-section-title{
  margin: 0 0 20px; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--about-text);
}

/* ① Hero */
[data-page="about"] .about-hero{
  padding: 80px 0 48px;
  background: #803130;
  color: #fff;
}
[data-page="about"] .about-hero__inner{ max-width: var(--max, 1200px); margin: 0 auto; }
[data-page="about"] .about-hero__title{
  margin: 0 0 12px; font-size: 34px; font-weight: 900; letter-spacing: -0.02em;
}
[data-page="about"] .about-hero__subtitle{
  margin: 0 0 12px; font-size: 18px; font-weight: 700; opacity: 0.95;
}
[data-page="about"] .about-hero__desc{
  margin: 0; line-height: 1.7; opacity: 0.95;
}

/* ② Reasons (보드 + 카드) */
[data-page="about"] .about-reasons{
  padding: 48px 0 64px;
  background:
    linear-gradient(180deg, #ffffff 0, #ffffff 30%, var(--about-blue-050) 30%, var(--about-blue-050) 100%);
}
[data-page="about"] .about-board{
  background: var(--about-card-bg);
  border-radius: var(--about-radius-lg);
  box-shadow: var(--about-shadow);
  padding: 28px;
  margin-top: 12px;
}
[data-page="about"] .reason-card{
  border: 1px solid #e6ecf5;
  border-radius: var(--about-radius-md);
  padding: 18px 16px;
  background: #fff;
  display: grid;
  gap: 6px;
}
[data-page="about"] .reason-card + .reason-card{ margin-top: 14px; }

/* 데스크톱에서 2x2 그리드 */
@media (min-width: 960px){
  [data-page="about"] .about-board{
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  }
  [data-page="about"] .reason-card{ margin: 0; }
}
[data-page="about"] .reason-card__title{
  font-size: 17px; font-weight: 800; color: var(--about-text);
}
[data-page="about"] .reason-card__desc{
  font-size: 14px; color: var(--about-muted); line-height: 1.6;
}

/* ③ Returnee */
[data-page="about"] .about-returnee{ background:#fff; padding: 56px 0 64px; }
[data-page="about"] .about-badge{
  display: inline-block;
  padding: 8px 14px;
  margin-bottom: 8px;
  font-size: 13px; font-weight: 800;
  color: var(--about-blue-800);
  background: var(--about-sky-100);
  border-radius: 999px;
}
[data-page="about"] .about-grid{
  display: grid; gap: 16px; margin-top: 16px;
}
@media (min-width: 960px){
  [data-page="about"] .about-grid{ grid-template-columns: 1fr 1fr; }
}
[data-page="about"] .about-box{
  background: #fff; border: 1px solid #e6ecf5;
  border-radius: var(--about-radius-md);
  padding: 18px 16px;
}
[data-page="about"] .about-box__title{
  margin: 0 0 10px; font-size: 16px; font-weight: 800; color: var(--about-text);
}
[data-page="about"] .about-box__desc{
  margin: 0; font-size: 14px; color: var(--about-muted); line-height: 1.7;
}

/* ④ CTA */
[data-page="about"] .about-cta{
  background: #F1E6DE;
  color: #fff; padding: 60px 0 72px;
}
[data-page="about"] .about-cta__inner{ text-align: center; max-width: 880px; margin: 0 auto; }
[data-page="about"] .about-cta__title{ margin:0 0 8px; font-size: 28px; font-weight: 900; }
[data-page="about"] .about-cta__desc{  opacity: .95; }
[data-page="about"] .about-btn{
  display:inline-block; padding: 12px 22px; border-radius: 999px;
  font-weight: 800; font-size: 14px; text-decoration: none;
}
[data-page="about"] .about-btn--primary{
  color:#0e1b2a; background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
[data-page="about"] .about-btn--primary:focus,
[data-page="about"] .about-btn--primary:hover{ transform: translateY(-1px); }

/* 진입 페이드(옵저버 전용) */
[data-page="about"] .js-observe{ opacity:0; transform: translateY(18px); transition: all .6s ease; }
[data-page="about"] .js-observe.is-in{ opacity:1; transform:none; }

/* =========================
   Consult Page (scoped)
   ========================= */
[data-page="consult"] .consult-hero{
  background: linear-gradient(180deg,#233b75,#1b2f5f);
  color:#fff;
  padding: 48px 0 56px;
}
[data-page="consult"] .consult-hero__brand{margin:0 0 6px}
[data-page="consult"] .consult-hero__title{
  margin:0; font-size:28px; font-weight:900; letter-spacing:-.02em;
}
[data-page="consult"] .consult-hero__subtitle{
  margin:4px 0 0; font-size:14px; opacity:.9;
}

/* Card */
[data-page="consult"] .section--form{background:#eef3fa;padding:32px 0 72px}
[data-page="consult"] .consult-card{
  background:#fff; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.12);
  max-width:760px; margin: -36px auto 0; padding:18px 18px 20px; border:1px solid #e6ecf5;
}
@media (min-width:768px){
  [data-page="consult"] .consult-card{padding:22px}
}
[data-page="consult"] .consult-card__header{
  border:1px dashed #c5d7ff; border-radius:10px; padding:12px 14px; background:#f6f9ff; margin-bottom:14px;
}
[data-page="consult"] .consult-card__title{margin:0;font-size:16px;font-weight:900;color:#173a8b;display:flex;align-items:center;gap:8px}
[data-page="consult"] .consult-card__hours{font-weight:600;color:#5572b8;margin-left:8px}
[data-page="consult"] .consult-card__notice{margin:8px 0 0;font-size:13px;color:#234}
[data-page="consult"] .form-grid{display:grid;gap:14px}

/* Inputs */
[data-page="consult"] .form-label{display:block;font-size:14px;font-weight:800;margin-bottom:6px;color:#0e1b2a}
[data-page="consult"] .input,
[data-page="consult"] .select,
[data-page="consult"] .textarea{
  width:100%; border:1px solid #ccd7ea; background:#fff; border-radius:10px;
  padding:12px 14px; font-size:14px; color:#0e1b2a; outline:none;
}
[data-page="consult"] .input:focus,
[data-page="consult"] .select:focus,
[data-page="consult"] .textarea:focus{border-color:#2a6fe5; box-shadow:0 0 0 3px rgba(42,111,229,.15)}
[data-page="consult"] .select-wrap{position:relative}
[data-page="consult"] .field-hint{margin:6px 0 0; font-size:12px; color:#5a6a85}
[data-page="consult"] .field-help{margin:4px 0 0; font-size:12px; color:#2a6fe5}
[data-page="consult"] .muted{color:#6a7a95;font-weight:600}

/* Choices */
[data-page="consult"] .choice-row{display:flex;gap:16px}
[data-page="consult"] .choice-grid{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:560px){
  [data-page="consult"] .choice-grid{grid-template-columns:repeat(2,1fr)}
}
[data-page="consult"] .choice{display:inline-flex;align-items:center;gap:8px;font-size:14px}
[data-page="consult"] .choice input[type="checkbox"],
[data-page="consult"] .choice input[type="radio"]{width:18px;height:18px}

/* Counter & agree */
[data-page="consult"] .char-counter{margin-top:6px;text-align:right;font-size:12px;color:#6a7a95}
[data-page="consult"] .form-field--agree{display:flex;align-items:center;gap:10px}

/* Actions */
[data-page="consult"] .form-actions{display:flex;gap:10px;margin-top:10px}
[data-page="consult"] .btn{
  display:inline-flex;justify-content:center;align-items:center;
  padding:12px 16px;border-radius:12px;border:1px solid transparent;
  font-weight:800;font-size:14px;text-decoration:none;min-width:160px;
}
[data-page="consult"] .btn--primary{background:#2a6fe5;color:#fff}
[data-page="consult"] .btn--primary:hover{filter:brightness(.98)}
[data-page="consult"] .btn--kakao{background:#fee500;color:#111}
[data-page="consult"] .btn--kakao:hover{filter:brightness(.98)}
[data-page="consult"] .btn--ghost{background:#fff;border-color:#d7dfef;color:#334}

/* ===== study-canada 전용 ===== */
.adv-cards { padding: 20px; margin-top: 20px; }
.adv-cards.card--elev { box-shadow: 0 12px 24px rgba(0,0,0,.12); }
.adv-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
@media (min-width: 960px){ .adv-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 1200px){ .adv-grid{ grid-template-columns: repeat(3,minmax(0,1fr)); } }
.adv-card h3{ margin:0 0 6px; font-weight:700; }
.adv-card .bullet{ margin:6px 0 0 16px; }

.geo{ display:grid; grid-template-columns: 1fr; gap:16px; align-items:start; }
@media (min-width: 1024px){ .geo{ grid-template-columns: 2fr 1fr; } }
.geo__map img{ width:100%; height:auto; display:block; border-radius:8px; }
.geo__legend .legend{ list-style:none; padding:0; margin:8px 0 0; }
.geo__legend .legend li{ display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--line,#e7eaf0); }
.num{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#3165ff; color:#fff; font-size:12px; font-weight:700; }
.muted{ color: var(--muted,#6b7280); }
.mt-8{ margin-top:8px } .mt-20{ margin-top:20px } .mt-24{ margin-top:24px }
.ta-center{ text-align:center }
.card--elev{ background:#fff; border-radius:12px; }

.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table--contrast thead th{ background:#edf2ff; }
.table--contrast th, .table--contrast td{ border:1px solid #e5e7eb; padding:12px; text-align:center; }
.w-20{ width:20% }

/* =========================================
   [ADD] Language Switch (Header Right)
========================================= */
.lang-switch{ position:relative; margin-left:12px; }
.lang-switch__btn{
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 12px; border-radius:8px;
  background:#fff; color:#333; border:1px solid var(--light-line);
  font-weight:600; cursor:pointer;
}
.lang-switch__btn:hover{ filter:brightness(0hero__title-img.97); }
.lang-switch__list{
  position:absolute; top:38px; right:0; min-width:80px;
  background:#fff; border:1px solid var(--light-line); border-radius:8px;
  box-shadow:0 8px 18px rgba(0,0,0,.08); list-style:none; margin:0; padding:6px;
  display:none; z-index:30;
}
.lang-switch__list li{ margin:0; }
.lang-switch__list button{
  width:100%; text-align:left; padding:8px 10px; border-radius:6px; border:0; background:transparent; cursor:pointer;
  font-weight:600; color:#333;
}
.lang-switch__list button:hover{ background:#f5f7fb; }
.lang-switch.is-open .lang-switch__list{ display:block; }

/* =========================================
   [ADD] Hero CTA Buttons
   - size: 240×48 / pill
   - 색상 변수만 바꾸면 전체 스타일 유지
========================================= */
:root{
  --hero-btn-fill: #cd5656;        /* 채워진 버튼 배경 (빨강 톤) */
  --hero-btn-fill-hover: #b94c4c;  /* hover */
  --hero-btn-text: #ffffff;        /* 채워진 버튼 텍스트 */
  --hero-btn-border: #cd5656;      /* 아웃라인 테두리/텍스트 */
  --hero-btn-soft: #ffecec;        /* 아웃라인 배경(연한 핑크) */
}

.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }

.btn-hero{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:240px; height:48px; padding:0 18px;
  border-radius:9999px; font-weight:700; font-size:16px;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  text-decoration:none;
}

/* Filled */
.btn-hero--primary{
  background:var(--hero-btn-fill); color:var(--hero-btn-text); border:1.5px solid var(--hero-btn-fill);
  box-shadow:0 2px 0 rgba(0,0,0,.06);
}
.btn-hero--primary:hover{
  background:var(--hero-btn-fill-hover); border-color:var(--hero-btn-fill-hover); transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(205,86,86,.25);
}

/* Outline + soft background */
.btn-hero--outline{
  background:var(--hero-btn-soft); color:var(--hero-btn-border); border:1.5px solid var(--hero-btn-border);
}
.btn-hero--outline:hover{
  filter:brightness(0.98); transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(205,86,86,.15);
}

/* ============================
   Section 5: OFFICE (size down)
   - 총 너비: 720 x 395 (2카드)
   - 카드: 340 x 395
   - 지도: 308 x 168
============================ */
#section-office .office__grid{
  width:720px; max-width:100%;
  margin:0 auto;
  display:flex; gap:40px; align-items:stretch;
}

#section-office .office-card{
  width:340px; height:395px;
  padding:16px;
  background:#fff;
  border: 1px solid #EDA340;
  border-radius:16px;
  display:flex; flex-direction:column; gap:12px;
  overflow:hidden;
}

/* 헤더(제목/메타) 간격만 정리 */
#section-office .office-card__head{ display:flex; flex-direction:column; gap:6px; }

/* 지도 박스: 카드 패딩(16*2=32) 고려 → 내용폭 308px */
#section-office .office-card__map{
  width:100%; height:168px;
  border-radius:12px; overflow:hidden; background:#fff;
}
#section-office .office-card__map img,
#section-office .office-card__map iframe{
  width:100%; height:100%;
  display:block; border:0; object-fit:cover;
}

/* 설명 문단은 남는 공간에 자연스럽게 배치 */
#section-office .office-card__desc{ margin-top:auto; }

/* 모바일 스택(선택) */
@media (max-width: 768px){
  #section-office .office__grid{ width:100%; flex-direction:column; gap:16px; }
  #section-office .office-card{ width:100%; height:auto; }
  #section-office .office-card__map{ height:168px; }
}

/* ========== ABOUT page ========== */
.about-page .container{ max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* ① Intro Hero */
.about-hero{
  background:#8c3b37; /* 버건디 톤(캡처 참고) */
  color:#fff;
  padding: 64px 0 88px;
  position: relative;
}
.about-hero__title{
  text-align:center; font-weight:800;
  font-size: clamp(28px, 2.8vw + 8px, 40px);
  margin:0 0 10px;
}
.about-hero__desc{
  text-align:center; opacity:.95;
}
.br-lg{ display:none; }
@media (min-width: 992px){ .br-lg{ display:inline; } }

/* ② Why HERALD (white card on top) */
.about-why{ background:#F8F3EC; padding: 60px 0 100px; } /* 연한 베이지 배경 */
.about-why__card{
  background:#fff; border-radius:16px; padding:28px;
  box-shadow: 0 18px 36px rgba(0,0,0,.12);
}
.about-why__title{
  text-align:center; color:#8c3b37; font-weight:800; margin:4px 0 6px;
  font-size: clamp(20px, 2vw + 6px, 28px);
}
.about-why__lead{
  text-align:center; color:#444444; margin:0 0 22px;
}
.about-why__grid{
  display:grid; grid-template-columns: 1fr; gap:14px;
}
@media (min-width: 860px){
  .about-why__grid{ grid-template-columns: 1fr 1fr; gap:16px; }
}
.why-item{
  background:#F8F3EC; border:1px solid #e9ded7; border-radius:12px;
  padding:16px; min-height:112px;
  display:flex; flex-direction:column; gap:10px;
}
.why-item__badge{
  display:inline-block; align-self:flex-start;
  background:#cf6a6a; color:#fff; border-radius:999px;
  padding:6px 12px;
}
.why-item__body{ color:#444444; }

/* ③ Returnee */
.about-returnee{ background:#ffffff; padding:60px 0; }
.returnee__title{
  text-align:center; background:#8c3b37; color:#fff; width:fit-content;
  display:block; padding:8px 16px; 
  margin:0 auto 10px;
}
.returnee__sub{
  text-align:center;  color:#803130; margin:0 0 20px;
}
.returnee__grid{
  display:grid; grid-template-columns: 1fr; gap:16px; max-width: 980px; margin:0 auto;
}
@media (min-width: 860px){
  .returnee__grid{ grid-template-columns: 1fr 1fr; }
}
.returnee-card{
  background:#fff; border:1px solid #e9ded7; border-radius:12px; padding:16px;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
.returnee-card__badge{
  width:190px; height:41px; text-align:center;display:inline-block; background:#CE5D5F; color:#fff; border-radius:999px;
  padding:6px 12px;  
}
.returnee-card__badge2{
  width:190px; height:41px; text-align:center;display:inline-block; background:#CE5D5F; color:#fff; border-radius:999px;
  padding:6px 12px;  
}
.returnee-card__body{ color:#473d3d;}

/* ④ CTA */
.about-cta{
  background:#e6ddd6; /* 연한 베이지/그레이 믹스 */
  padding:56px 0 80px; color:#433a3a;
}
.about-cta__inner{ text-align:center; }
.about-cta__title{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; color:#8c3b37; margin:0 0 8px;
  font-size: clamp(20px, 2vw + 6px, 26px);
}
.about-cta__lead{ margin: 4px 0 8px; color: #803130;}
.about-cta__desc{ opacity:.9; margin:0 0 32px; color:#4B3C37;}

/* 버튼은 기존 .btn-hero 사용(없다면 아래 유지) */
.btn-hero{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:240px; height:48px; padding:0 18px; border-radius:9999px;
  font-weight:700; font-size:16px; text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-hero--primary{
  background:#8c3b37; color:#fff; border:1.5px solid #8c3b37; box-shadow:0 2px 0 rgba(0,0,0,.06);
}
.btn-hero--primary:hover{
  background:#7b332f; border-color:#7b332f; transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(140,59,55,.25);
}

/* ===== CONSULT (캡처 매칭) ===== */
:root{ --overlap: 80px; }  /* 카드가 배너에 걸리는 정도(필요시 56~80px 사이로 조절) */

html[data-page="consult"], body[data-page="consult"]{ background:#efe6e0; }

/* Hero */
.consult-hero{
  position:relative;
  height: 360px;
  background-color:#8c3b37;
  background-image:url("./assets/img/consult-bg.png");
  background-size:cover; background-position:center; background-repeat:no-repeat;
  color:#fff;
  padding: 64px 0 140px; /* 하단 크게 → 폼과 경계 맞닿음 */
}
.consult-page .container{ max-width: 1100px; margin:0 auto; padding:0 20px; }
.consult-hero__inner{ text-align:center; }
.consult-hero__brand{ display:inline-flex; align-items:center; gap:12px; }
.consult-hero__logo{ width:40px; height:40px; object-fit:contain; }
.consult-hero__title{ margin:0; font-weight:800; font-size: clamp(26px, 2.6vw + 6px, 40px); }
.consult-hero__sub{ margin:10px 0 0; font-weight:700; opacity:.95; font-size:15px; }

/* Form section – 경계 오버랩 */
.consult-form-section{ margin-top: calc(-1 * var(--overlap)); }
.form-card{
  max-width: 920px; margin:0 auto;
  background:#fff; color:#101012;
  border:1px solid #e6e9ef;
  border-radius:12px;
  padding:22px 22px 26px;
  box-shadow:0 22px 44px rgba(0,0,0,.22);
}

/* 헤더/상단 알림 */
.form-card__head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.form-card__title{ margin:0;  color:#CE5D5F; display:flex; align-items:center; gap:6px; }
.form-card__title .ico{ font-size:18px; }
.form-card__meta{ margin:0;  color:#999999; }
.form-card__notice{
  margin:8px 0 12px; padding:10px 12px;
  background:#F8F3EC; color:#B92E2C; border:1px solid #F8F3EC;
}

/* 1열 폼 */
.form-grid{ display:grid; grid-template-columns: 1fr; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field .label, .field > label{  color:#333333; }

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select{
  width:100%; height:44px; padding:0 12px;
  border:1px solid #dfe3ea; border-radius:10px; background:#fff; font-size:15px;
}
.field textarea{
  width:100%; min-height:140px; padding:12px;
  border:1px solid #dfe3ea; border-radius:10px; background:#fff; font-size:15px; resize:vertical;
}
.select-wrap{ position:relative; }
.field .help{ margin:2px 0 0; font-size:12px; color:#8a93a2; }
.field .help.warn{ color:#b24b4b; }
.field .muted{ color:#b24b4b; font-style:normal; font-weight:700; }

.choice-row{ display:flex; flex-wrap:wrap; gap:14px; }
.choice{ display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.choice input{ width:16px; height:16px; }
.char{ text-align:right; font-size:12px; color:#8a93a2; }

/* 동의/방침 */
.agree-row{ align-items:center; gap:10px; }
.check{ display:inline-flex; align-items:center; gap:8px; }
.btn-policy{
  margin-left:auto; height:34px; padding:0 12px; border-radius:8px; cursor:pointer;
  background:#f2f4f8; color:#333; border:1px solid #e5e8ef;
}

/* 액션(좌 레드 / 우 옐로우) */
.form-actions{ display:flex; gap:12px; margin-top:16px; }
.btn-submit{
  flex:1; height:48px; border-radius:999px; border:1.5px solid #c24c4c;
  background:#c24c4c; color:#fff; font-weight:800; font-size:16px; cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.06); transition:.15s;
}
.btn-submit:hover{ background:#b24444; border-color:#b24444; transform:translateY(-1px); box-shadow:0 12px 22px rgba(194,76,76,.22); }
.form-actions .btn-kakao{
  flex:1; height:48px; border-radius:999px; line-height:48px; text-align:center; text-decoration:none;
  border:1.5px solid #f0c53f; background:#ffd23f; color:#2c2412; font-weight:800; font-size:16px;
  transition:.15s;
}
.form-actions .btn-kakao:hover{ background:#f2c942; border-color:#e4bc2f; transform:translateY(-1px); box-shadow:0 12px 22px rgba(242,201,66,.22); }

/* 모바일 */
@media (max-width: 640px){
  :root{ --overlap: 56px; }
  .consult-hero{ padding:56px 0 120px; }
  .form-card{ max-width: 94vw; padding:18px; }
}

/* === 상담예약: 카드가 배너 위에 올라오게 (오버라이드) === */
:root{ --consult-overlap: 120px; }  /* 카드가 배너에 걸리는 양(필요시 56~88px로 조절) */

/* 1) 배너(1번)는 아래 레이어 */
.consult-hero{
  position: relative;
  z-index: 0;           /* 배너 아래 */
  overflow: visible;    /* 경계에 걸친 카드가 보이도록 */
}
/* 배너에 ::before/::after 오버레이가 있다면 뒤로 */
.consult-hero::before,
.consult-hero::after{ z-index: 0 !important; }

/* 2) 신청서 섹션(2번)과 카드 자체를 위 레이어 + 경계 오버랩 */
.consult-form-section{
  position: relative;
  margin-top: calc(-1 * var(--consult-overlap));  /* 배너와 겹치기 */
  z-index: 2;                                     /* 배너보다 위 */
}
.form-card{
  position: relative;
  z-index: 3;                /* 카드가 최상단(그림자도 보이게) */
  box-shadow: 0 22px 44px rgba(0,0,0,.22);
}

/*! 여기서부터 새롭게 추가 25.09.30  */

/* Todo : why-canada.html의 css 내역*/
p {
  margin: unset;
}

button {
  cursor: pointer;
}

ul {
  margin-block: unset;
}

.why-canada-main {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.why-canada-main .section1 {
  display: flex;
  flex-direction: column;
  position: relative;
}

.why-canada-main .section1 .banner-bg {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url('/assets/img/banner_img.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 360px;
}

.why-canada-main .section1 .banner-bg strong {
  color: #FFF;
  text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.25);
  font-family: "Noto Sans";
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 126px;
}

.why-canada-main .section1 .banner-bg p {
  text-align: center;
  color: #FFF;
  text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.25);
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-transform: uppercase;  
  margin-top: 16px;
}

.why-canada-main .section1 .canada-advantage-bg {
  background-color:#F8F3EC;
  height: 800px;
}

.why-canada-main .section1 .canada-advantage-table {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 48px 56px;
  background-color: #FFF;
  border-radius: 16px;
  box-shadow: 2px 2px 25px 0 rgba(45, 43, 64, 0.50);
  width: 100%;
  max-width: 1192px;
  left: 50%;
  transform: translateX(-50%);
  top: 290px;
}

.why-canada-main .section1 .canada-advantage-table strong {
  color: #4B3C37;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 24px;
  font-weight: 900;
  line-height: 24px;
  text-transform: uppercase;
}

.why-canada-main .section1 .canada-advantage-table .advantage-contents {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.why-canada-main .section1 .canada-advantage-table .advantage-contents .adv-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  gap: 8px;
  /* flex: 1 0 0; */
  border-radius: 8px;
  border: 1px solid var#CCC;
  background: #FFF;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 528px;
}

.why-canada-main .section1 .canada-advantage-table .advantage-contents .adv-box strong {
  color: #CE5D5F;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
}

.why-canada-main .section1 .canada-advantage-table .advantage-contents .adv-box p {
  color: #444;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}

.why-canada-main .section1 .canada-advantage-table .go-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  border-radius: 99px;
  padding: 0 32px;
  background-color: #803130;
  color: #F5F5F5;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  border: unset;
}

.why-canada-main .section2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: #fff;
  gap: 16px;
  padding: 56px 0;
}

.why-canada-main .section2 .Vancouver_abroad {
  display: flex;
  flex-direction: column;
}

.why-canada-main .section2 .Vancouver_abroad strong {
  color: #803130;
  text-align: left;
  font-family: "Noto Sans";
  font-size: 24px;
  font-weight: 900;
  line-height: 24px;
  text-transform: uppercase;
}

.why-canada-main .section2 .Vancouver_abroad p {
  color: #333;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
}

.why-canada-main .section2 .Vancouver_abroad p strong {
  color: #333;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 800;
}

.why-canada-main .section2 .map-contents {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.why-canada-main .section2 .map-contents .map-img {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 16px;
  border: 1px solid #DDD;
  background-color: #FFF;
  padding: 16px;
  gap: 16px;
  align-self: stretch;
}

.why-canada-main .section2 .map-contents .map-img .map-text {
  color: #999;
  font-family: "Noto Sans";
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
}

.why-canada-main .section2 .map-contents .edu-spot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 16px;
  flex: 1 0 0;
  border-radius: 8px;
  padding: 32px 16px;
  border: 1px solid #DDD;
  background-color: #FFF;
}

.why-canada-main .section2 .map-contents .edu-spot .edu-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.why-canada-main .section2 .map-contents .edu-spot .edu-title img {
  width: 24px;
  height: 24px;
}

.why-canada-main .section2 .map-contents .edu-spot .edu-title span {
  color: #CE5D5F;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 20px;
  font-weight: 800;
  line-height: normal;
}

.why-canada-main .section2 .map-contents .edu-spot .edu-contents {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.why-canada-main .section2 .map-contents .edu-spot .edu-contents .edu-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.why-canada-main .section2 .map-contents .edu-spot .edu-contents .edu-box img {
  width: 24px;
  height: 24px;
}

.why-canada-main .section2 .map-contents .edu-spot .edu-contents .edu-box span {
  color: #803130;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 600;
  line-height: 20px
}

.why-canada-main .section2 .map-contents .edu-spot .edu-contents .big-map {
  display: flex;
  padding: 4px 10px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 99px;
  border: 1px solid #CCC;
  background-color: #F6F6F6;
  color: #999;
  font-family: "Noto Sans";
  font-size: 10px;
  font-weight: 600;
  line-height: 12.5px;
}

.why-canada-main .section2 .detail-contents {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
} 

.why-canada-main .section2 .detail-contents .detail-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 286px;
}

.why-canada-main .section2 .detail-contents .detail-box .detail-title {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 8px 16px;
  gap: 16px;
  border-radius: 8px 8px 0 0;
  background-color: #F1E6DE;
  border: 1px solid #F1E6DE; 
}

.why-canada-main .section2 .detail-contents .detail-box .detail-title img {
  width: 24px;
  height: 24px;
}

.why-canada-main .section2 .detail-contents .detail-box .detail-title span {
  color: #CE5D5F;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.why-canada-main .section2 .detail-contents .detail-box ul {
  display: flex;
  padding-block: 16px;
  padding-left: 30px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-radius: 0 0 8px 8px;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  border-left: 1px solid #CCC;
  background-color: #FFF;
  min-height: 116px;
}

.why-canada-main .section2 .detail-contents .detail-box ul li {
  color: #333;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  align-self: stretch;
  list-style-type: disc;
  /* max-width: 520px; */
}

.why-canada-main .section2 .detail-contents .detail-box ul li span {
  padding-left: 1px;
}

.why-canada-main .section3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: #F8F3EC;
  padding-block: 64px;
}

.why-canada-main .section3 .compare-school {
  display: flex;
  flex-direction: column;
}

.why-canada-main .section3 .compare-school .compare-title {
  color: #4B3C37;
  font-family: "Noto Sans";
  font-size: 22px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.why-canada-main .section3 .compare-school .compare-title strong {
  color: #CE5D5F;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 22px;
  font-weight: 900;
  line-height: 22px;
  text-transform: uppercase;
}

.why-canada-main .section3 .compare-school .compare-sub-title {
  color: #333;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
}

.why-canada-main .section3 .compare-table {
  border-collapse: collapse; 
  text-align: center;
  width: 100%; 
  background-color: #fff;
  border-color: #CFCFCF;
}

.why-canada-main .section3 .compare-table thead tr {
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: -0.32px;
}

.why-canada-main .section3 .compare-table thead tr th {
  padding-block: 17px;
}

.why-canada-main .section3 .compare-table thead tr .white-bg {
  background-color: #fff;
  color: #803130;
}

.why-canada-main .section3 .compare-table thead tr .light-red-bg {
  border-right: 1px solid #FFF;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 100%), rgba(136, 12, 36, 0.70);
}

.why-canada-main .section3 .compare-table thead tr .red-bg {
  border-left: 1px solid #FFF;
  background-color:#CE5D5F;
}

.why-canada-main .section3 .compare-table tbody tr td {
  padding-block: 19px;
  color: #444;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.32px;
}

.why-canada-main .section4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-block: 72px;
  background-image: url('/assets/img/herald_bg.png');
}

.why-canada-main .section4 .reservation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.why-canada-main .section4 .reservation img {
  width: 505px;
  height: 53px;
}

.why-canada-main .section4 .reservation .suggestion-text {
  text-align: center;
}

.why-canada-main .section4 .reservation .suggestion-text strong {
  color: #FFF;
  font-family: "Noto Sans";
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  text-transform: uppercase;
}

.why-canada-main .section4 .reservation .suggestion-text p {
  color: #FFF;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
  margin-top: 8px;
}

.why-canada-main .section4 .reservation .reservation-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 48px;
  border-radius: 999px;
  border: 2px solid #F5F5F5;
  background-color: transparent;
  color: #F5F5F5;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
}

.opacity {
  opacity: 0.8;
}

.font-black {
  color: #000;
}

.font-blue {
  color: #006FFF;
}

.max-1192 {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1192px;
}

.margin-t16 {
  margin-top: 16px;
}

.margin-t24 {
  margin-top: 24px;
}

.margin-t32 {
  margin-top: 32px;
}

/* 입력값(타이핑한 글자) 색상 + 커서색 */
.form-card input,
.form-card select,
.form-card textarea{
  color:#1b1f27;          /* 더 진하게 */
  caret-color:#8c3b37;    /* 커서 색(선택) */
  font-weight:500;        /* 필요 시 가독성↑ */
}

/* 플레이스홀더 색상(예) 홍길동 …) */
.form-card input::placeholder,
.form-card textarea::placeholder{
  color:#9aa0b3;          /* 연한 회색 */
  opacity:1;              /* 일부 브라우저 기본 반투명 무력화 */
}

/* 포커스(클릭했을 때) 테두리/글로우로 가독성↑ */
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus{
  outline:none;
  border-color:#c24c4c;                    /* 붉은 테두리 */
  box-shadow:0 0 0 3px rgba(194,76,76,.12);/* 은은한 하이라이트 */
}

/* 비활성화 상태 가독성 */
.form-card input[disabled],
.form-card select[disabled],
.form-card textarea[disabled]{
  color:#7a7f87;
  background:#f5f7fa;
}

.early-abroad-main {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.early-abroad-main .e-section0 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url('/assets/img/e_banner.png');
  width: 100%;
  height: 360px;
}

.early-abroad-main .e-section0 .with-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.early-abroad-main .e-section0 .with-title strong {
  color: #FFF;
  text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.25);
  font-family: "Noto Sans";
  font-size: 32px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.early-abroad-main .e-section0 .with-title p {
  color: #FFF;
  text-align: center;
  text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.25);
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  text-transform: uppercase;
  margin-top: 16px
}

.early-abroad-main .e-section1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: #F7F7F7;
  padding-block: 64px;
}

.early-abroad-main .e-section1 .case-title {
  color: #CE5D5F;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 22px;
  font-weight: 900;
  line-height: 22px;
  text-transform: uppercase;
}

.early-abroad-main .e-section1 .case-contents {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
}

.early-abroad-main .e-section1 .case-contents .case-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #fff;
  border-radius: 8px;
  width: 100%;
}

.early-abroad-main .e-section1 .case-contents .case-box ul {
  flex: 1;
  padding-block: 24px;
}

.early-abroad-main .e-section1 .case-contents .case-box ul li {
  color: #333;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  list-style-type: disc;
}

.early-abroad-main .e-section1 .case-contents .case-box .half-bg {
  flex: 1;
  background-color: #CE5D5F;
  padding: 24px;
  border-radius: 8px;
}

.early-abroad-main .e-section1 .case-contents .case-box .half-bg p {
  color: #FFF;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}

.early-abroad-main .e-section2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding-block: 80px;
  width: 100%;
  background: #F8F3EC;
}

.early-abroad-main .e-section2 .sequence-box {
  border-radius: 24px;
  background: #FFF;
  box-shadow: 2px 4px 10px 0 rgba(0, 0, 0, 0.25);
  display: flex;
  width: 1280px;
  padding: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.early-abroad-main .e-section2 .sequence-box .sequence-title {
  background: #4B3C37;
  color: #F8F3EC;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 22px;
  font-weight: 900;
  line-height: 22px;
  text-transform: uppercase;
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
}

.early-abroad-main .e-section2 .sequence-box .sequence-contents {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 40px;
  gap: 16px;
}

.arrow-down {
  display: flex;
  width: 32px;
}

.first-arrow {
  justify-self: flex-end;
  margin-right: 170px;
}

.second-arrow {
  margin-left: 120px;
}

.early-abroad-main .e-section2 .sequence-box .sequence-contents .box-block {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 16px;
}

.early-abroad-main .e-section2 .sequence-box .sequence-contents .box-block .box-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  max-width: 360px;
  border-left: 10px solid #803130;
  background: #F8F3EC;
  box-shadow: 2px 4px 10px 0 rgba(0, 0, 0, 0.25);
  padding: 16px 18px;
}

.early-abroad-main .e-section2 .sequence-box .sequence-contents .box-block .box-item img {
  width: 64px;
  height: 64px;
  margin-right: 16px;
}

.early-abroad-main .e-section2 .sequence-box .sequence-contents .box-block .box-item .box-text {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.early-abroad-main .e-section2 .sequence-box .sequence-contents .box-block .box-item .box-text strong {
  color: #803130;
  font-family: "Noto Sans";
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  text-transform: uppercase;
  background-color: unset;
}

.early-abroad-main .e-section2 .sequence-box .sequence-contents .box-block .box-item .box-text p {
  color: #4B3C37;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
}

.early-abroad-main .e-section3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding-block: 72px;
  width: 100%;
  background: #4B3C37;
}

.early-abroad-main .e-section3 .uhak-title {
  align-self: center;
  width: 394px;
  height: 46px;
}

.early-abroad-main .e-section3 .service-package {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 12px;
}

.early-abroad-main .e-section3 .service-package strong {
  color: #F8F3EC;
  font-family: "Noto Sans";
  font-size: 20px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.2px;
}

.early-abroad-main .e-section3 .service-package .row {
  display: flex;
  flex-direction: row;
  gap: 24px;
  width: 100%;
  margin-top: 24px;
}

.early-abroad-main .e-section3 .service-package .row .service-item {
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #FFF;
}

.early-abroad-main .e-section3 .service-package .row .service-item strong {
  color: #4B3C37;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 800;
  line-height: 21px;
  letter-spacing: -0.32px;
  padding-block: 17px;
}

.early-abroad-main .e-section3 .service-package .row .service-item p {
 color: #545454;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: 35px;
  letter-spacing: -0.32px; 
  text-align: center;
  padding-block: 24px;
  padding-inline: 12px;
  flex-wrap: nowrap;
}

.early-abroad-main .e-section3 .service-package .row .service-item-short {
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  background: #FFF;
}

.early-abroad-main .e-section3 .service-package .row .service-item-short strong {
  color: #4B3C37;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 800;
  line-height: 21px;
  letter-spacing: -0.32px;
  padding-block: 17px;
}

.early-abroad-main .e-section3 .service-package .row .service-item-short p {
  color: #545454;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: 35px;
  letter-spacing: -0.32px; 
  text-align: center;
  padding-block: 24px;
  padding-inline: 12px;
  flex-wrap: nowrap;
}

.early-abroad-main .e-section3 .service-package .s-notice {
  color: #EEE;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-align: left;
  letter-spacing: -0.16px;
  width: 100%;
  margin-top: 24px;
}

.font-white {
  color: #fff !important;
}

.text-left {
  text-align: left !important;
}

.flex1 {
  flex: 1;
}

.flex2 {
  flex: 2.5;
}

.flex3 {
  flex: 3;
}

.flex4 {
  flex: 4;
}

.s-color1 {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.80) 100%), #4B3C37;
}

.s-color2 {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.50) 100%), #4B3C37;
}

.s-color3 {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.30) 100%), #4B3C37;
}

.s-color4 {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.10) 100%), #4B3C37;
}

.early-abroad-main .e-section4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding-block: 104px;
  width: 100%;
  background-color: #fff;
}

.early-abroad-main .e-section4 .free-edu {
  display: flex;
  flex-direction: column;
}

.early-abroad-main .e-section4 .free-edu strong {
  color: #803130;
  font-family: "Noto Sans";
  font-size: 22px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.22px;
}

.early-abroad-main .e-section4 .free-edu p {
  color: #000;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.16px;
  margin-top: 16px;
}

.early-abroad-main .e-section4 .total-layout {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  margin-top: 24px;
}

.early-abroad-main .e-section4 .total-layout .item-1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 8px;
  border: 1px solid #CCC;
  background-color: #F8F3EC;
  padding: 16px;
  gap: 16px;
  align-self: stretch;
}

.early-abroad-main .e-section4 .total-layout .item-1 .i-title {
  border-radius: 99px;
  background-color: #CE5D5F;
  display: flex;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
}

.early-abroad-main .e-section4 .total-layout .item-1 ul li {
  color: #444;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-transform: uppercase;
}

.early-abroad-main .e-section4 .total-layout .two-item-layout {
  display: flex;
  flex-direction: row;
  gap: 26px;
}

.early-abroad-main .e-section4 .total-layout .two-item-layout .item-2 {
  flex: 1.5;
  display: flex;
  width: 648px;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border-radius: 8px;
  border: 1px solid #CCC;
  background: #F8F3EC;
}

.early-abroad-main .e-section4 .total-layout .two-item-layout .item-2 .i-title {
  border-radius: 99px;
  background: #CE5D5F;
  display: flex;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
}

.early-abroad-main .e-section4 .total-layout .two-item-layout .item-2 ul li {
  
  color: var(--444444, #444);
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
  text-transform: uppercase;
}

.early-abroad-main .e-section4 .total-layout .two-item-layout .item-2 ul li span {
  display: inline-flex;
}

.early-abroad-main .e-section4 .total-layout .two-item-layout .item-3 {
  flex: 1.22;
  display: flex;
  width: 648px;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border-radius: 8px;
  border: 1px solid #CCC;
  background: #F8F3EC;
}

.early-abroad-main .e-section4 .total-layout .two-item-layout .item-3 .i-title {
  border-radius: 99px;
  background: #CE5D5F;
  display: flex;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
}

.early-abroad-main .e-section4 .total-layout .two-item-layout .item-3 p {
  color: #444;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-transform: uppercase;
}

.early-abroad-main .e-section4 .study-cost {
  border-radius: 8px;
  border: 1px solid #CCC;
  background: #F8F3EC;
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  margin-top: 32px;
}

.early-abroad-main .e-section4 .study-cost .cost-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.early-abroad-main .e-section4 .study-cost .cost-title p {
  border-radius: 99px;
  background: #CE5D5F;
  display: flex;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
}

.early-abroad-main .e-section4 .study-cost .cost-title span {
  color: #4B3C37;
  font-family: "Noto Sans";
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}

.early-abroad-main .e-section4 .study-cost .cost-table {
  border-collapse: collapse; 
  width: 100%;
}

.early-abroad-main .e-section4 .study-cost .cost-table thead {
  background-color: rgba(136, 12, 36, 0.70);
  border: #CFCFCF; 
  color: white;
}

.early-abroad-main .e-section4 .study-cost .cost-table thead tr th {
  padding-block: 8px;
  color: #FFF;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: -0.32px;
}

.early-abroad-main .e-section4 .study-cost .cost-table tbody {
  border: #CFCFCF;
}

.early-abroad-main .e-section4 .study-cost .cost-table tbody tr td {
  padding-block: 8px;
  color: #545454;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.32px;
  text-align: center;
}

.early-abroad-main .e-section5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding-block: 72px;
  width: 100%;
  background-color: #F8F3EC;
}

.early-abroad-main .e-section5 .catholic-school {
  display: flex;
  flex-direction: column;
}

.early-abroad-main .e-section5 .catholic-school .catholic-title {
  color: #803130;
  font-family: "Noto Sans";
  font-size: 22px;
  font-weight: 900;
  line-height: 22px;
  text-transform: uppercase;
}

.early-abroad-main .e-section5 .catholic-school p {
  color: #333;
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  text-transform: uppercase;
  margin-top: 16px;
}

.early-abroad-main .e-section5 .catholic-contents {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 48px;
}

.early-abroad-main .e-section5 .catholic-contents p {
  color: #803130;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 900;
  line-height: 16px;
  text-transform: uppercase;
}

.early-abroad-main .e-section5 .catholic-contents p span {
  color: #777;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
  margin-left: 8px;
}

.early-abroad-main .e-section5 .catholic-contents .catholic-table {
  border-collapse: collapse; width: 100%;
  margin-top: 16px;
}

.early-abroad-main .e-section5 .catholic-contents .catholic-table thead {
  background-color: #CE5D5F;
  color: #fff;
}

.early-abroad-main .e-section5 .catholic-contents .catholic-table thead tr th {
  padding-block: 9px;
  color: #FFF;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: -0.32px;
  border: 1px solid #CE5D5F;
}

.early-abroad-main .e-section5 .catholic-contents .catholic-table tbody {
  background-color: #fff;
}

.early-abroad-main .e-section5 .catholic-contents .catholic-table tbody tr td {
  color: #545454;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.32px;
  text-align: center;
  padding-block: 13px;
  border: 1px solid #CFCFCF;
}

.early-abroad-main .e-section5 .christian-contents {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 48px;
}

.early-abroad-main .e-section5 .christian-contents p {
  color: #803130;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 900;
  line-height: 16px;
  text-transform: uppercase;
}

.early-abroad-main .e-section5 .christian-contents p span {
  color: #777;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
  margin-left: 8px;
}

.early-abroad-main .e-section5 .christian-contents .christian-table {
  border-collapse: collapse; width: 100%;
  margin-top: 16px;
}

.early-abroad-main .e-section5 .christian-contents .christian-table thead {
  background-color: rgba(136, 12, 36, 0.70);
  color: #fff;
}

.early-abroad-main .e-section5 .christian-contents .christian-table thead tr th {
  padding-block: 9px;
  color: #FFF;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: -0.32px;
  border: transparent;
}

.early-abroad-main .e-section5 .christian-contents .christian-table tbody {
  background-color: #fff;
}

.early-abroad-main .e-section5 .christian-contents .christian-table tbody tr td {
  color: #545454;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.32px;
  text-align: center;
  padding-block: 13px;
  border: 1px solid #CFCFCF;
}

.early-abroad-main .e-section5 .sub-text {
  color:#888;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
  margin-top: 16px;
}

.early-abroad-main .e-section6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding-block: 83px;
  width: 100%;
}

.early-abroad-main .e-section6 .management-abroad {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.early-abroad-main .e-section6 .management-abroad .abroad-title {
  color: #803130;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 22px;
  font-weight: 900;
  line-height: 22px;
  text-transform: uppercase;
  text-align: left;
}

.early-abroad-main .e-section6 .management-abroad .abroad-text {
  color: #333;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-transform: uppercase;
  margin-top: 16px;
}

.early-abroad-main .e-section6 .part1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 61px;
}

.early-abroad-main .e-section6 .part1 .difference-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.early-abroad-main .e-section6 .part1 .difference-title img {
  width: 362px;
  height: 38px;
}

.early-abroad-main .e-section6 .part1 .difference-title p {
  color: #CE5D5F;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 18px;
  font-weight: 900;
  line-height: 18px;
  text-transform: uppercase;
  margin-top: 8px;
}

.early-abroad-main .e-section6 .part1 .difference-contents {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 93px;
}

.early-abroad-main .e-section6 .part1 .difference-contents .differ-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 280px;
  border-radius: 16px;
  border: 2px solid #F1E6DE;
  background-color: #F8F3EC;
  position: relative;
  padding: 67px 40px 21px;
}

.early-abroad-main .e-section6 .part1 .difference-contents .differ-item img {
  position: absolute;
  width: 120px;
  height: 120px;
  top: -60px;
}

.early-abroad-main .e-section6 .part1 .difference-contents .differ-item strong {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 128px;
  height: 32px;
  padding: 4px 12px;
  background: #803130;
  color: #FFF;
  font-family: "Noto Sans";
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.early-abroad-main .e-section6 .part1 .difference-contents .differ-item p {
  color: #803130;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin-top: 8px;
  text-transform: uppercase;
  word-break: keep-all;
}

.early-abroad-main .e-section6 .part2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 85px;
}

.early-abroad-main .e-section6 .part2 .program-title {
  color: #CE5D5F;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 18px;
  font-weight: 900;
  line-height: 24px;
  text-transform: uppercase;
}

.early-abroad-main .e-section6 .part2 .program-range {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 24px;
}

.early-abroad-main .e-section6 .part2 .program-range .program-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 360px;
}

.early-abroad-main .e-section6 .part2 .program-range .program-item .item-title {
  background-color: #B92E2C;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: 40px;
  padding: 4px 12px;
  color: #FFF;
  font-family: "Noto Sans";
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.early-abroad-main .e-section6 .part2 .program-range .program-item img {
  width: 360px;
  height: 200px; 
}

.early-abroad-main .e-section6 .part2 .program-range .program-item p {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: 8px;
  line-height: 21px;
  color: #4B3C37;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  border: 1px solid #CCC;
  background-color: #FFF;
  padding: 24px 0;
  text-align: center;
  height: 160px;
}

.early-abroad-main .e-section6 .part2 .program-range .program-item p .font-red {
  color: #ce5d5f;
}

.e-plus {
  width: 40px;
  height: 40px;
}

.early-abroad-main .e-section7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #F8F3EC;
  padding-block: 80px;
  width: 100%;
}

.early-abroad-main .e-section7 .faq-title {
  color: #803130;
  text-align: center;
  /* font-family: 'Pretendard'; */
  font-size: 24px;
  font-weight: 800;
  line-height: normal;
}

.early-abroad-main .e-section7 .faq-contents {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #fff;
  margin-top: 16px;
}

.early-abroad-main .e-section7 .faq-contents .faq-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.early-abroad-main .e-section7 .faq-contents .faq-item .faq-question {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: unset;
  border: unset;
  border-top: 1px solid #DDD;
  width: 100%;
  padding: 16px;
}

.early-abroad-main .e-section7 .faq-contents .faq-item .faq-question .question-text {
  color: #555;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.early-abroad-main .e-section7 .faq-contents .faq-item .faq-question .font-red {
  color: #B92E2C;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.early-abroad-main .e-section7 .faq-contents .faq-item .faq-question .arrow-img {
  background-image: url('/assets/img/e_down_btn.svg');
  background-repeat: no-repeat;
  background-size: contain;
  width: 24px;
  height: 24px;
}

.early-abroad-main .e-section7 .faq-contents .faq-item .faq-question .arrow-img.active {
  background-image: url('/assets/img/e_up_btn.svg');
  background-repeat: no-repeat;
  background-size: contain;
  width: 24px;
  height: 24px;
}

.early-abroad-main .e-section7 .faq-contents .faq-item .faq-answer {
  width: 100%;
}

.early-abroad-main .e-section7 .faq-contents .faq-item .faq-answer {
  color: #666;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  padding: 8px 16px;
  align-self: stretch;
  border-top: 1px solid #DDD;
  background: #F5F5F5;
}

.border-bottom {
  border-bottom: 1px solid #ddd;
}


.eng-font14 {
  font-size: 14px !important;
}

.eng-padding-inline14 {
  padding-inline: 14px !important;
  height: 45px !important;
}

.eng-height194 {
  min-height: 194px !important;
}

.eng-height925 {
  height: 925px !important;
}

.eng-width220 {
  width: 220px !important;
}

/* 하단 배경(세번째 이미지) 영역 */
.ready-bottom{
  position: relative; isolation: isolate;
  /* 섹션 자체 높이 */
  min-height: 240px;
}
.ready-bottom__bg{
  position: absolute; inset: 0; z-index: 0;
  background-image: url("../img/ready-bottom-bg.png"); /* 세번째 첨부이미지 */
  background-size: cover; background-position: center;
  filter: none; /* 필요 시 밝기 보정 */
}
/* 로고 + 버튼 오버레이 */
.ready-bottom__overlay{
  position: relative; z-index: 1;
  max-width: 1064px; margin: 0 auto; padding: 36px 16px 52px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.ready-bottom__logo{
  height: 38px; width: auto; display: block;
}
/* Kakao 버튼 스타일(프로젝트에 .btn가 있으면 최소 오버라이드만) */
.btn--kakao{
  background: #FEE500; color: #111; font-weight: 700;
  padding: 12px 20px; border-radius: 999px; display: inline-block;
  box-shadow: 0 2px 0 rgba(0,0,0,.1);
}
.btn--kakao:hover{ filter: brightness(0.98); }

/* 접근성용 스크린리더 텍스트 */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.ready-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 150px;
  background-color: #F8F3EC;
}

.ready-hero .ready-hero__banner {
  width: 655px;
  /* height: 399px; */
  margin-top: 50px;
}

.ready-contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  margin-top: 16px;
}

.ready-contents .ready-hero__text {
  color: #4B3C37;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 22px;
  font-weight: 700;
  line-height: 22px;
  text-transform: uppercase;
}

.ready-contents .ready-hero__btn {
  display: flex;
  width: 240px;
  height: 48px;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  background: #CE5D5F;
  border: unset;
  color: #F5F5F5;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
}

.brown-text-box {
  width: 190px !important;
  /* height: 60px !important; */
  text-align: center;
  font-size: 14px !important;
}

.eng-program-box {
  height: 240px !important;
  padding: 24px 8px !important;
}

/* ===== GNB dropdown ===== */
.gnb{ position: relative; }
.gnb__list{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.gnb__list > li{ position:relative; }
.gnb__list > li > a{ display:block; padding:16px 6px; }

.has-sub > a{ position:relative; }
.has-sub > a::after{
  content:""; display:inline-block; width:6px; height:6px; margin-left:6px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
}

/* submenu */
.gnb__list .sub{
  position:absolute; top:100%; left:0; min-width:240px;
  background:#fff; color:#4a4a4a; list-style:none; margin:0; padding:12px 0;
  border-radius:8px; box-shadow:0 8px 24px rgba(16,24,40,.12);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.18s ease;
  z-index: 50;
}
.gnb__list .sub li a{
  display:block; padding:10px 18px; white-space:nowrap;
}
.gnb__list .sub li a:hover{ background:#f7f7f9; color:#7b2d5b; } /* 포인트 컬러는 브랜드 톤에 맞게 */

.gnb__list > li:hover > .sub,
.gnb__list > li:focus-within > .sub{
  opacity:1; visibility:visible; transform:translateY(0);
}

/* language switch */
.gnb__list .lang-switch{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.gnb__list .lang-switch .sep{ opacity:.4; }

/* ===== Mobile ===== */
.nav-toggle{
  display:none; margin-left:8px; border:1px solid #e1e1e6; background:#fff;
  padding:8px 12px; border-radius:8px;
}
@media (max-width: 1024px){
  .nav-toggle{ display:inline-block; }
  .gnb__list{
    position:absolute; top:var(--header-h,64px); left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:#fff; color:#222; border-top:1px solid #eee;
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .gnb__list.is-open{ max-height:70vh; overflow:auto; }

  .gnb__list > li > a{ padding:14px 18px; width:100%; }
  .gnb__list .lang-switch{ margin:8px 12px 12px auto; }

  /* mobile submenu (accordion) */
  .gnb__list .sub{
    position:static; box-shadow:none; border-radius:0; background:#fafafa;
    width:100%; padding:0; transform:none; opacity:1; visibility:visible; display:none;
  }
  .gnb__list .sub li a{ padding:12px 24px; }
  .gnb__list .has-sub.open > .sub{ display:block; }
  .has-sub > a::after{ transform:rotate(45deg); margin-left:10px; }
  .has-sub.open > a::after{ transform:rotate(-135deg); }
}