@charset "utf-8";
/* Native Neat English - custom responsive theme */

:root{
  --nn2-orange:#ff6000;
  --nn2-orange-d:#e05400;
  --nn2-ink:#222;
  --nn2-gray:#666;
  --nn2-line:#e5e5e5;
  --nn2-bg:#f6f7f9;
  --nn2-wrap:1200px;
}

/* ---- basic 기본 CSS 오버라이드(반응형 필수) ---- */
/* default.css: #hd,#wrapper,#ft{min-width:1200px}, #container{float:left;width:930px} 를 무력화 */
#hd, #ft, #wrapper, #container_wr, #container{ min-width:0 !important; }
#wrapper{ width:auto; }
#container_wr{ width:100%; background:#fff; }
#container{ float:none; width:auto; max-width:none; margin:0; min-height:0; }
#aside{ display:none; }
img{ max-width:100%; height:auto; }

/* ---- 공통 ---- */
#hd, #ft{ margin:0; }
.nn2-wrap{ max-width:var(--nn2-wrap); margin:0 auto; padding:0 20px; box-sizing:border-box; }
body.nn2-noscroll{ overflow:hidden; }
#container_wr.is-index, #container.is-index{ width:100%; max-width:none; margin:0; padding:0; background:none; border:0; }
#container_wr{ background:#fff; }
.nn2-content{ padding:28px 20px 60px; min-height:400px; }
.nn2-location{ font-size:13px; color:#999; margin-bottom:18px; }
.nn2-btn{ display:inline-block; padding:13px 26px; border-radius:6px; font-weight:700; font-size:15px;
  text-decoration:none; text-align:center; transition:.15s; cursor:pointer; border:0; line-height:1.2; }
.nn2-btn-primary{ background:var(--nn2-orange); color:#fff; }
.nn2-btn-primary:hover{ background:var(--nn2-orange-d); color:#fff; }
.nn2-btn-ghost{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.85); }
.nn2-btn-ghost:hover{ background:#fff; color:var(--nn2-orange); }
.nn2-btn-white{ background:#fff; color:var(--nn2-orange); }
.nn2-btn-lg{ padding:16px 40px; font-size:17px; }

/* ---- 상단 유틸바 ---- */
.nn2-topbar{ background:#2b2f36; color:#c9ccd1; font-size:13px; }
.nn2-topbar .nn2-wrap{ display:flex; justify-content:space-between; align-items:center; height:38px; }
.nn2-top-left strong{ color:#fff; }
.nn2-top-right{ display:flex; gap:18px; margin:0; padding:0; list-style:none; }
.nn2-top-right a{ color:#c9ccd1; text-decoration:none; }
.nn2-top-right a:hover{ color:#fff; }
.nn2-top-right .nn2-hi{ color:var(--nn2-orange); font-weight:700; }

/* ---- 헤더 ---- */
header#hd{ position:sticky; top:0; z-index:900; background:#fff; box-shadow:0 1px 0 var(--nn2-line); }
.nn2-header-inner{ display:flex; align-items:center; height:82px; transition:height .2s; }
header#hd.nn2-shrink .nn2-header-inner{ height:64px; }
.nn2-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; }
.nn2-logo-flag{ height:34px; width:auto; display:block; }
.nn2-logo-text{ font-size:22px; font-weight:800; color:var(--nn2-ink); letter-spacing:-.3px; }
.nn2-logo-text b{ color:var(--nn2-orange); }

/* GNB */
.nn2-gnb{ flex:1 1 auto; }
.nn2-gnb-list{ display:flex; justify-content:center; gap:6px; margin:0; padding:0; list-style:none; }
.nn2-gnb-item{ position:relative; }
.nn2-gnb-item>a{ display:block; padding:0 18px; line-height:82px; font-size:16px; font-weight:700;
  color:var(--nn2-ink); text-decoration:none; transition:.15s; }
header#hd.nn2-shrink .nn2-gnb-item>a{ line-height:64px; }
.nn2-gnb-item:hover>a{ color:var(--nn2-orange); }
.nn2-sub{ position:absolute; top:100%; left:50%; transform:translateX(-50%);
  min-width:180px; background:#fff; border:1px solid var(--nn2-line); border-top:3px solid var(--nn2-orange);
  box-shadow:0 10px 24px rgba(0,0,0,.10); padding:8px 0; opacity:0; visibility:hidden; transition:.15s; }
.nn2-gnb-item:hover .nn2-sub{ opacity:1; visibility:visible; }
.nn2-sub ul{ margin:0; padding:0; list-style:none; }
.nn2-sub a{ display:block; padding:9px 20px; font-size:14px; color:#444; text-decoration:none; white-space:nowrap; }
.nn2-sub a:hover{ background:var(--nn2-bg); color:var(--nn2-orange); }

.nn2-header-right{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.nn2-apply-btn{ background:var(--nn2-orange); color:#fff; text-decoration:none; font-weight:700;
  padding:11px 20px; border-radius:6px; font-size:15px; white-space:nowrap; }
.nn2-apply-btn:hover{ background:var(--nn2-orange-d); }
.nn2-menu-toggle{ display:none; width:44px; height:44px; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; }
.nn2-menu-toggle span{ display:block; height:2px; background:var(--nn2-ink); border-radius:2px; }
.nn2-search-hidden{ position:absolute; left:-9999px; }

/* ---- 모바일 슬라이드 메뉴 ---- */
.nn2-mmenu{ position:fixed; top:0; right:-320px; width:300px; max-width:85%; height:100%; background:#fff;
  z-index:1200; box-shadow:-4px 0 20px rgba(0,0,0,.15); transition:right .25s; overflow-y:auto; }
.nn2-mmenu.on{ right:0; }
.nn2-mmenu-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px;
  border-bottom:1px solid var(--nn2-line); }
.nn2-mmenu-close{ background:none; border:0; font-size:30px; line-height:1; color:#888; cursor:pointer; }
.nn2-mmenu-list{ list-style:none; margin:0; padding:6px 0 40px; }
.nn2-mmenu-list>li{ border-bottom:1px solid #f0f0f0; }
.nn2-mm-top{ display:block; padding:15px 20px; font-size:16px; font-weight:700; color:var(--nn2-ink); text-decoration:none; }
.nn2-mm-top.open{ color:var(--nn2-orange); }
.nn2-mm-sub{ list-style:none; margin:0; padding:0 0 8px; background:var(--nn2-bg); display:none; }
.nn2-mm-sub a{ display:block; padding:11px 30px; font-size:14px; color:#555; text-decoration:none; }
.nn2-mm-apply{ display:block; margin:16px 20px; padding:14px; text-align:center; background:var(--nn2-orange);
  color:#fff !important; border-radius:6px; font-weight:700; }
.nn2-mmenu-dim{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1100; opacity:0; visibility:hidden; transition:.25s; }
.nn2-mmenu-dim.on{ opacity:1; visibility:visible; }

/* ---- 히어로 ---- */
.nn2-hero{ background:linear-gradient(120deg,#ff7a1a 0%,#ff6000 60%,#e94e00 100%); color:#fff; overflow:hidden; }
.nn2-hero-inner{ display:flex; align-items:center; gap:40px; padding:56px 20px; }
.nn2-hero-text{ flex:1 1 50%; }
.nn2-hero-badge{ display:inline-block; background:rgba(255,255,255,.18); padding:6px 14px; border-radius:20px;
  font-size:14px; font-weight:600; margin:0 0 16px; }
.nn2-hero-title{ font-size:44px; line-height:1.2; font-weight:800; margin:0 0 16px; }
.nn2-hero-title b{ font-weight:800; }
.nn2-hero-sub{ font-size:18px; line-height:1.6; opacity:.95; margin:0 0 28px; }
.nn2-hero-btns{ display:flex; gap:12px; flex-wrap:wrap; }
.nn2-hero-visual{ flex:1 1 46%; text-align:center; }
.nn2-hero-visual img{ max-width:100%; height:auto; border-radius:12px; box-shadow:0 20px 40px rgba(0,0,0,.18); background:#fff; }

/* ---- 섹션 공통 ---- */
.nn2-section{ padding:64px 0; }
.nn2-features{ background:var(--nn2-bg); }
.nn2-sec-head{ text-align:center; margin-bottom:40px; }
.nn2-sec-title{ font-size:30px; font-weight:800; color:var(--nn2-ink); margin:0 0 10px; }
.nn2-sec-desc{ font-size:16px; color:var(--nn2-gray); margin:0; }

/* 과정 그리드 */
.nn2-course-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; list-style:none; margin:0; padding:0; }
.nn2-course-card{ background:#fff; border:1px solid var(--nn2-line); border-radius:12px; padding:26px 22px; transition:.18s; }
.nn2-course-card:hover{ border-color:var(--nn2-orange); box-shadow:0 12px 26px rgba(255,96,0,.12); transform:translateY(-3px); }
.nn2-course-no{ display:inline-block; font-size:14px; font-weight:800; color:#fff; background:var(--nn2-orange);
  width:34px; height:34px; line-height:34px; text-align:center; border-radius:8px; margin-bottom:14px; }
.nn2-course-title{ font-size:19px; font-weight:800; color:var(--nn2-ink); margin:0 0 4px; }
.nn2-course-en{ font-size:12px; color:#aaa; letter-spacing:.5px; text-transform:uppercase; margin:0 0 10px; }
.nn2-course-desc{ font-size:14px; color:var(--nn2-gray); margin:0; line-height:1.5; }
.nn2-course-cta{ background:linear-gradient(135deg,#ff7a1a,#e94e00); color:#fff; display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start; gap:16px; border:0; }
.nn2-course-cta h3{ font-size:20px; font-weight:800; margin:0; line-height:1.35; }

/* 특징 그리드 */
.nn2-feature-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; list-style:none; margin:0; padding:0; }
.nn2-feature-card{ background:#fff; border-radius:12px; padding:30px 18px; text-align:center; box-shadow:0 4px 14px rgba(0,0,0,.05); }
.nn2-feature-ico{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%;
  background:#fff2e8; color:var(--nn2-orange); font-size:26px; margin-bottom:16px; }
.nn2-feature-card h3{ font-size:16px; font-weight:800; color:var(--nn2-ink); margin:0 0 8px; }
.nn2-feature-card p{ font-size:13px; color:var(--nn2-gray); margin:0; line-height:1.5; }

/* 최신글 */
.nn2-latest-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.nn2-latest-head{ display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid var(--nn2-ink);
  padding-bottom:10px; margin-bottom:8px; }
.nn2-latest-head h3{ font-size:19px; font-weight:800; margin:0; color:var(--nn2-ink); }
.nn2-latest-head a{ font-size:13px; color:#999; text-decoration:none; }
.nn2-latest-head a:hover{ color:var(--nn2-orange); }
.nn2-latest-col .latest{ border:0; }

/* CTA 밴드 */
.nn2-cta{ background:#2b2f36; color:#fff; }
.nn2-cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:44px 20px; flex-wrap:wrap; }
.nn2-cta h2{ font-size:26px; font-weight:800; margin:0 0 6px; }
.nn2-cta p{ font-size:16px; color:#c9ccd1; margin:0; }

/* ---- 푸터 ---- */
footer#ft{ background:#22262c; color:#9aa0a8; }
.nn2-footer-inner{ display:flex; flex-wrap:wrap; gap:30px; padding:44px 20px; align-items:flex-start; }
.nn2-foot-brand{ flex:1 1 240px; }
.nn2-foot-logo{ height:40px; width:auto; margin-bottom:14px; }
.nn2-foot-desc{ font-size:14px; color:#9aa0a8; margin:0; }
.nn2-foot-links{ flex:1 1 200px; display:flex; flex-wrap:wrap; gap:14px 22px; align-content:flex-start; }
.nn2-foot-links a{ color:#c9ccd1; text-decoration:none; font-size:14px; font-weight:600; }
.nn2-foot-links a:hover{ color:var(--nn2-orange); }
.nn2-foot-info{ flex:1 1 320px; }
.nn2-foot-info p{ font-size:13px; line-height:1.8; color:#8a9098; margin:0 0 10px; }
.nn2-foot-copy{ font-size:12px; color:#6b7079 !important; }
.nn2-top-btn{ position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%; border:0;
  background:var(--nn2-orange); color:#fff; font-size:16px; cursor:pointer; z-index:800; box-shadow:0 6px 16px rgba(0,0,0,.2); }

/* ============ 반응형 ============ */
@media (max-width:1024px){
  .nn2-hero-title{ font-size:36px; }
  .nn2-course-grid{ grid-template-columns:repeat(3,1fr); }
  .nn2-feature-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:820px){
  .nn2-gnb, .nn2-apply-btn{ display:none; }
  .nn2-menu-toggle{ display:flex; }
  .nn2-header-inner{ height:64px; justify-content:space-between; }
  header#hd.nn2-shrink .nn2-header-inner{ height:64px; }
  .nn2-latest-grid{ grid-template-columns:1fr; gap:34px; }
  .nn2-hero-inner{ flex-direction:column; text-align:center; padding:44px 20px; }
  .nn2-hero-btns{ justify-content:center; }
  .nn2-hero-visual{ order:-1; }
}
@media (max-width:600px){
  .nn2-topbar .nn2-top-left{ display:none; }
  .nn2-topbar .nn2-wrap{ justify-content:center; }
  .nn2-hero-title{ font-size:30px; }
  .nn2-hero-sub{ font-size:16px; }
  .nn2-section{ padding:44px 0; }
  .nn2-sec-title{ font-size:24px; }
  .nn2-course-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .nn2-feature-grid{ grid-template-columns:repeat(2,1fr); }
  .nn2-course-card{ padding:20px 16px; }
  .nn2-cta-inner{ flex-direction:column; text-align:center; }
}
@media (max-width:400px){
  .nn2-course-grid{ grid-template-columns:1fr; }
  .nn2-feature-grid{ grid-template-columns:1fr; }
  .nn2-logo-text{ font-size:18px; }
}