@charset "utf-8";
/* =============================================================================================
   박하나수학교실 (SUV0) - style.css
   ---------------------------------------------------------------------------------------------
   ※ 시안(2000px 캔버스, 컨텐츠 1400px) 을 픽셀 단위로 측정해서 옮긴 값입니다.
     숫자 옆 주석의 (y123) 같은 표기는 시안 이미지에서의 실제 좌표입니다.
   ※ 인코딩 : UTF-8 (이 파일만 UTF-8. asp 파일들은 EUC-KR)

   ▼ 목차 ([번호]로 검색)
     [01] 폰트 / 리셋 / 변수
     [02] HEADER  (로고 · 대메뉴 · 2차메뉴 · 관리자버튼 · 상담예약)
     [03] MAIN VISUAL  (롤링배너 2000x580)
     [04] MAIN 하단 4박스 (로그인 · 컨텐츠배너 · 공지사항 · 입시뉴스 / 각 350x280)
     [05] FOOTER
     [06] 우측 퀵배너 (100x100 x 4)
     [07] SUB  (좌측메뉴 · 타이틀 · 본문)
     [08] 서브 컨텐츠 페이지 (에디터에 넣는 본문 : 원장인사말 · 인사말 수정안1·2 · 입학안내)
   ============================================================================================= */

/* [01] ---------- Pretendard (반드시 맨 위) ---------- */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root{
    --inner:1400px;          /* 컨텐츠 폭 (x300 ~ x1700) */
    --primary:#0595f8;       /* 메인 블루 (로그인박스 · 상담예약 버튼) */
    --primary-dk:#008ef0;    /* 게시판 타이틀 */
    --navy:#172951;          /* 로그인 버튼 */
    --line:#19a7e7;          /* 헤더 하단 3px 라인 */
    --mv-h:580px;            /* ★ 메인 롤링배너 높이 (시안 y123 ~ y703) */
    --mv-bg:#2fb5fc;         /* 배너 이미지보다 화면이 넓을 때 양옆에 보이는 색 */
}

html,body{margin:0;padding:0}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",sans-serif;
     font-size:16px;font-weight:400;color:#222;line-height:1.5;-webkit-font-smoothing:antialiased;background:#fff;
     min-width:1400px;letter-spacing:0}
/* 리셋은 :where() 로 감싸 우선순위 0 → 아래 클래스 규칙이 항상 이깁니다 */
:where(#wrap) *,:where(#wrap) *::before,:where(#wrap) *::after{box-sizing:border-box}
:where(#wrap) :is(ul,ol){list-style:none;margin:0;padding:0}
:where(#wrap) :is(h1,h2,h3,h4,p,address){margin:0;padding:0;font-style:normal;font-weight:inherit;font-size:inherit}
:where(#wrap) a{color:inherit;text-decoration:none}
:where(#wrap) img{border:0;vertical-align:top}
:where(#wrap) button{font-family:inherit;cursor:pointer}
.blind{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* =============================================================================================
   [02] HEADER   높이 120 + 하단라인 3px (시안 y0 ~ y123)
   ============================================================================================= */
#header{position:relative;z-index:100;height:123px;background:#fff;border-bottom:3px solid var(--line)}
#header .head_inner{position:relative;width:var(--inner);height:120px;margin:0 auto}

/* 로고 : 통이미지 (시안 269x71 / x300 y25) */
#header .logo{position:absolute;left:0;top:25px;line-height:0}
#header .logo img{height:71px;width:auto}

/* 대메뉴 : 첫 글자 x690 ~ 마지막 글자 x1397 구간(로컬 390 ~ 1097) 안에 균등 배치
   · 메뉴 개수가 늘어나도(홈페이지관리에서 7개 등) 간격이 자동으로 좁아져 상담예약 버튼과 겹치지 않습니다.
   · 5개일 때 시안과 같은 간격(약 78px)이 됩니다.
   · 구간을 바꾸려면 left / right 두 값만 조절 */
#header .gnb{position:absolute;left:390px;right:303px;top:0;height:120px}
#header .gnb > ul{display:flex;justify-content:center;gap:76px;height:120px}   /* 메뉴 사이 간격 : gap 값 (메뉴가 늘면 줄이기) */
#header .gnb > ul > li{position:relative;height:120px}
/* 마우스가 닿는 범위는 글자 좌우로 18px 씩 넓혀 둠 (padding + 음수 margin) */
#header .gnb > ul > li > a{display:block;height:120px;padding:0 18px;margin:0 -18px;line-height:128px;
     font-size:19px;font-weight:600;color:#111;letter-spacing:-.2px;white-space:nowrap;transition:color .2s}
#header .gnb > ul > li:hover > a,
#header .gnb > ul > li > a.on{color:var(--primary)}

/* 2차메뉴 (시안에는 없음 : 마우스 오버 시에만 보이는 드롭다운) */
#header .gnb .dep2{position:absolute;left:50%;top:123px;min-width:170px;padding:14px 0;background:#fff;
     border-top:2px solid var(--primary);box-shadow:0 10px 24px rgba(0,40,90,.12);
     opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .2s,transform .2s,visibility .2s}
#header .gnb > ul > li:hover .dep2,
#header .gnb > ul > li:focus-within .dep2{opacity:1;visibility:visible;transform:translate(-50%,0)}
/* 대메뉴는 링크 없음 (2차메뉴가 있는 경우) : 손가락 커서 대신 기본 커서 */
#header .gnb > ul > li > a.dep1_nolink{cursor:default}
#header .gnb .dep2 a{display:block;padding:7px 22px;font-size:15px;font-weight:500;color:#555;line-height:1.4;white-space:nowrap;text-align:center}
#header .gnb .dep2 a:hover,#header .gnb .dep2 a.on{color:var(--primary)}

/* 상담예약 버튼 (200x60 / x1500 y33 / 라운드 10) */
#header .btn_consult{position:absolute;right:0;top:33px;width:200px;height:60px;border-radius:10px;background:var(--primary);
     color:#fff;font-size:22px;font-weight:700;letter-spacing:.5px;line-height:60px;text-align:center;transition:background .2s}
#header .btn_consult:hover{background:#0080e0}

/* 관리자 버튼 (경영관리 · 홈페이지관리 / AcamSysPermit.asp) → 상담예약 버튼 바로 위
   ※ 크기는 --sys-zoom 으로 조절 (1 = 원본) */
#header .sys_permit{--sys-zoom:1;position:absolute;right:0;top:4px;display:flex;align-items:center;zoom:var(--sys-zoom);white-space:nowrap}
#header .sys_permit table{border-collapse:collapse}
#header .sys_permit td{padding:0 0 0 3px}
#header .sys_permit img{vertical-align:middle!important;max-width:none}


/* =============================================================================================
   [03] MAIN VISUAL   2000 x 580  (시안 y123 ~ y703)
   ---------------------------------------------------------------------------------------------
   · 배너 이미지는 늘이거나 줄이지 않고 "가운데 기준"으로 놓습니다.
     화면이 이미지보다 좁으면 양옆이 잘리고, 넓으면 --mv-bg 색이 보입니다.
   · 모션 : main.asp 의 .main_visual 에 is_fade(기본) / is_slide 중 하나
   ============================================================================================= */
.main_visual{--mv-speed:.9s;position:relative;height:var(--mv-h);overflow:hidden;background:var(--mv-bg)}
.main_visual .mv_list{position:relative;height:100%}
.main_visual .mv_list > li{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden}
/* 직접 넣은 이미지(<li><img> 또는 <li><a><img>)에만 적용 — 배너관리(Jssor) 안쪽 이미지는 건드리지 않음 */
.main_visual .mv_list > li > a{display:block;height:100%}
.main_visual .mv_list > li > img,
.main_visual .mv_list > li > a > img{position:absolute;left:50%;top:0;height:var(--mv-h);width:auto;max-width:none;transform:translateX(-50%)}

/* ---------- 회사 배너관리(Main_banner.asp = Jssor 슬라이더) 사용 시 ----------
   · 롤링 / 불릿 / 마우스 드래그는 배너관리(Jssor)가 직접 합니다. (우리 script.js 롤링은 자동으로 쉼)
   · 배너관리 슬라이더는 폭(2000px)이 고정이라 화면 왼쪽에 붙으므로 가운데로 옮깁니다.
     (정확한 위치는 script.js 가 화면 폭에 맞춰 다시 계산 — 아래 calc 는 스크립트 전 기본값)
   · 좌우 화살표는 시안에 없어서 숨김, 불릿은 시안 모양(흰 원 10px)으로 */
.main_visual .mv_list > li > [id^="slider_"]{margin-left:calc(50% - 1000px)}
.main_visual [u="arrowleft"],
.main_visual [u="arrowright"]{display:none!important}
.main_visual [u="navigator"]{bottom:35px!important;z-index:5}
/* 불릿 크기 : 8px (배너관리 기본 12px → 축소. 간격은 배너관리가 16px 단위로 배치하므로 자동으로 8px) */
.main_visual [u="navigator"] div{width:8px!important;height:8px!important;border:0!important;border-radius:50%;background:rgba(255,255,255,.5)!important;opacity:1!important;filter:none!important;transition:background .3s}
.main_visual [u="navigator"] div.av{background:#fff!important}
.main_visual [u="slides"]{cursor:grab!important}
.main_visual .mv_list > li.no_tr{transition:none!important}
/* 스와이프 : 세로 스크롤은 브라우저에 맡기고 가로 드래그만 받음 / 드래그 중 글자·이미지 선택 방지 */
.main_visual{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.main_visual.dragging{cursor:grabbing}
.main_visual img{-webkit-user-drag:none;user-drag:none}

/* 모션 A : 페이드 */
.main_visual.is_fade .mv_list > li{opacity:0;z-index:1;transition:opacity var(--mv-speed) ease}
.main_visual.is_fade .mv_list > li.on{opacity:1;z-index:2}
.main_visual.is_fade .mv_list > li.out{opacity:0;z-index:1}

/* 모션 B : 우 → 좌 슬라이드 */
.main_visual.is_slide .mv_list > li{transform:translateX(100%);transition:transform var(--mv-speed) cubic-bezier(.65,0,.35,1)}
.main_visual.is_slide .mv_list > li.on{transform:translateX(0);z-index:2}
.main_visual.is_slide .mv_list > li.out{transform:translateX(-100%);z-index:1}

/* 첫 장은 스크립트 전에도 보이게 */
.main_visual .mv_list > li:first-child{opacity:1;transform:none}
.main_visual.ready .mv_list > li:first-child:not(.on){opacity:0}
.main_visual.ready.is_slide .mv_list > li:first-child:not(.on){opacity:1;transform:translateX(100%)}
.main_visual.ready.is_slide .mv_list > li:first-child.out{transform:translateX(-100%)}

/* 불릿 : 10px / 간격 8px / 하단에서 35px (시안 y659) — 개수는 JS 가 자동 생성 */
.main_visual .mv_dots{position:absolute;left:50%;bottom:35px;z-index:5;display:flex;gap:8px;transform:translateX(-50%)}
.main_visual .mv_dots button{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.5);font-size:0;transition:background .3s}
.main_visual .mv_dots button.on{background:#fff}


/* =============================================================================================
   [04] MAIN 하단 4박스   각 350 x 280  (시안 y703 ~ y983)
   ============================================================================================= */
.main_box{display:flex;width:var(--inner);height:280px;margin:0 auto}
.main_box > .mb{position:relative;width:350px;height:280px;overflow:hidden}

/* ---------- 1) Members Login ---------- */
.mb_login{background:var(--primary);padding:33px 49px 0 53px;color:#fff}
.mb_login .ml_tit{font-size:24px;font-weight:700;letter-spacing:-.8px;line-height:30px;color:#fff}
.mb_login form{margin:0}
.mb_login .ml_input{display:block;margin-top:16px}
.mb_login .ml_input input{display:block;width:248px;height:35px;margin:0 0 5px;padding:0 0 0 24px;border:1px solid #d5d5d5;border-radius:4px;
     background:#fff;font-family:inherit;font-size:14px;font-weight:400;color:#222;outline:0}
.mb_login .ml_input input::placeholder{color:#7a7a7a}
.mb_login .ml_input input:focus{border-color:var(--navy)}
.mb_login .btn_ml{display:block;width:248px;height:40px;margin-top:7px;padding:0;border:0;border-radius:3px;background:var(--navy);
     color:#fff;font-size:14px;font-weight:700;letter-spacing:-.5px;line-height:40px;text-align:center}
.mb_login .btn_ml:hover{background:#0e1c3d}
.mb_login .ml_link{display:flex;align-items:center;justify-content:center;width:248px;margin-top:16px;white-space:nowrap;font-size:14px;font-weight:500;letter-spacing:-.5px;line-height:20px}
.mb_login .ml_link a{color:#fff}
.mb_login .ml_link a:hover{text-decoration:underline}
.mb_login .ml_link .bar{display:inline-block;width:1px;height:12px;margin:0 22px;background:#fff}
/* 로그인 후 */
.mb_login .ml_user{margin-top:22px;font-size:18px;font-weight:500;line-height:26px}
.mb_login .ml_user strong{font-weight:700}
.mb_login .ml_paper{display:inline-block;margin-top:6px;font-size:14px;color:#fff;opacity:.9}
.mb_login .ml_btns{display:flex;gap:6px;margin-top:20px}
.mb_login .ml_btns a,.mb_login .ml_btns button{flex:1;height:40px;padding:0;border:0;border-radius:3px;background:var(--navy);color:#fff;
     font-size:14px;font-weight:700;line-height:40px;text-align:center}
.mb_login .ml_btns .btn_out{background:#fff;color:var(--navy)}

/* ---------- 2) 컨텐츠 배너 : 통이미지 350x280 ---------- */
.mb_banner a{display:block;height:100%}
.mb_banner img{width:350px;height:280px}

/* ---------- 3·4) 공지사항 / 입시뉴스 ---------- */
.mb_board{padding-top:36px}
.mb_notice{background:#d7eefe;padding-left:36px;padding-right:31px}
.mb_news{background:#eef9ff;padding-left:31px;padding-right:36px}
.mb_board .bd_head{position:relative;display:flex;align-items:baseline;height:34px}
.mb_board .bd_head h3{font-size:24px;font-weight:700;letter-spacing:-.5px;color:var(--primary-dk);line-height:34px}
.mb_board .bd_head .sub{margin-left:12px;font-size:15px;font-weight:500;letter-spacing:0;color:#404143}
.mb_board .bd_head .more{position:absolute;right:-5px;top:9px;width:17px;height:17px}
.mb_board .bd_head .more::before,
.mb_board .bd_head .more::after{content:"";position:absolute;left:50%;top:50%;background:#4a4a4a;transition:background .2s}
.mb_board .bd_head .more::before{width:13px;height:2px;margin:-1px 0 0 -6.5px}
.mb_board .bd_head .more::after{width:2px;height:13px;margin:-6.5px 0 0 -1px}
.mb_board .bd_head .more:hover::before,
.mb_board .bd_head .more:hover::after{background:var(--primary)}
.mb_board .bd_list{margin-top:19px}
.mb_board .bd_list li{display:flex;justify-content:space-between;align-items:center;height:32px}
.mb_board .bd_list a{display:block;overflow:hidden;max-width:205px;font-size:16px;font-weight:400;color:#555553;line-height:32px;white-space:nowrap;text-overflow:ellipsis}
.mb_board .bd_list a:hover{color:var(--primary);text-decoration:underline}
.mb_board .bd_list .ico_new{display:inline-block;margin-left:4px;font-size:11px;font-weight:700;color:#ff5a3c;vertical-align:1px}
.mb_board .bd_list .bd_date{flex:none;font-size:14px;letter-spacing:-.8px;color:#9ea6a9;line-height:32px}
.mb_board .bd_list li.empty{justify-content:center;color:#888;font-size:14px}


/* =============================================================================================
   [05] FOOTER
   ============================================================================================= */
#footer{background:#fff}
#footer .ft_top{border-bottom:1px solid #e4e4e4}
#footer .ft_top .inner{position:relative;width:var(--inner);height:150px;margin:0 auto}
#footer .ft_logo{position:absolute;left:0;top:37px;line-height:0}
#footer .ft_logo img{height:67px;width:auto}

/* 하단메뉴 : 첫 글자 x620 / 15px / #939393 */
#footer .ft_link{position:absolute;left:320px;top:61px;display:flex;gap:33px}
#footer .ft_link li:first-child{margin-right:4px}
#footer .ft_link a{font-size:15px;letter-spacing:-.2px;font-weight:400;color:#939393;line-height:20px;transition:color .2s}
#footer .ft_link a:hover{color:var(--primary)}

/* 상담문의 */
#footer .ft_call{position:absolute;right:227px;top:39px;text-align:right}
#footer .ft_call .tel_line{display:flex;align-items:center;justify-content:flex-end;height:40px}
#footer .ft_call .ico{display:block;width:25px;height:25px;margin:4px 11px 0 0;color:#252525}
#footer .ft_call .ico svg{display:block;width:25px;height:25px}
#footer .ft_call .tit{font-size:30px;font-weight:700;letter-spacing:-1px;color:#252525;line-height:40px}
#footer .ft_call .ft_num{margin-left:13px;font-size:40px;font-weight:700;letter-spacing:-3.8px;color:#0391dd;line-height:40px}
#footer .ft_call .time{display:flex;justify-content:flex-end;margin-top:10px;padding-right:10px;font-size:14px;letter-spacing:.2px;color:#292929;line-height:18px}
#footer .ft_call .time .bar{display:inline-block;width:1px;height:12px;margin:3px 9px 0;background:#555}
#footer .ft_btn{position:absolute;right:0;top:42px;width:200px;height:60px;border:1px solid #0893fa;border-radius:10px;
     color:#0893fa;font-size:22px;font-weight:700;letter-spacing:.5px;line-height:58px;text-align:center;transition:background .2s,color .2s}
#footer .ft_btn:hover{background:#0893fa;color:#fff}

#footer .ft_bottom{position:relative;width:var(--inner);margin:0 auto;padding:36px 0 110px}
#footer .ft_info{font-size:14px;letter-spacing:-.33px;color:#969696;line-height:18px}
#footer .ft_info .sl{margin:0 5px}
#footer .copy{margin-top:14px;font-size:12px;color:#989898;line-height:14px;text-transform:uppercase}
#footer .ft_sns{position:absolute;right:0;top:33px;display:flex;align-items:center;gap:20px}
#footer .ft_sns a{display:block;color:#797979;line-height:0;transition:color .2s}
#footer .ft_sns a:hover{color:var(--primary)}
#footer .ft_sns .sns_blog{font-size:19px;font-weight:800;letter-spacing:-.3px;line-height:22px;font-family:"Arial Rounded MT Bold","Pretendard Variable",Pretendard,sans-serif}
#footer .ft_sns svg{display:block}


/* =============================================================================================
   [06] 우측 퀵배너   100x100 x 4 (시안 x1751 y258)
   · 화면 폭 1902px 이상 : 시안 위치 (컨텐츠 오른쪽 끝에서 51px)
   · 그보다 좁으면 화면 오른쪽 끝에 붙습니다.
   ============================================================================================= */
.quick_banner{position:fixed;top:258px;right:max(0px, calc(50% - 851px));z-index:90;width:100px}
.quick_banner ul{list-style:none;margin:0;padding:0}
.quick_banner li{width:100px;height:100px}
.quick_banner a{display:block;width:100px;height:100px;overflow:hidden;line-height:0}
.quick_banner img{width:100px;height:100px;border:0;vertical-align:top;transition:filter .2s}
.quick_banner a:hover img{filter:brightness(1.06)}


/* =============================================================================================
   [07] SUB   좌측메뉴 240 + 간격 60 + 본문 1100  (시안 y165 ~)
   ============================================================================================= */
.sub_wrap{display:flex;align-items:flex-start;width:var(--inner);margin:42px auto 0;padding-bottom:115px}

/* 좌측메뉴 */
.lnb{flex:none;width:240px}
.lnb .lnb_tit{height:89px;background:#323232;color:#fff;font-size:26px;font-weight:700;letter-spacing:.5px;line-height:89px;text-align:center}
.lnb ul li a{display:block;height:47px;padding-left:27px;border-bottom:1px solid #e0e0e0;font-size:15px;font-weight:600;letter-spacing:-.5px;
     color:#111;line-height:46px;transition:color .2s,background .2s}
.lnb ul li:first-child a{height:57px;padding-top:10px}
.lnb ul li a:hover{color:#3072b9}
.lnb ul li a.on{background:#f7f7f7;color:#3072b9;font-weight:600}

/* 본문 */
.sub_body{flex:1;min-width:0;width:1100px;margin-left:60px}
.sub_head{position:relative;height:91px}
.sub_head h2{padding-top:10px;font-size:26px;font-weight:700;letter-spacing:0;color:#323232;line-height:36px}
.sub_head .location{position:absolute;right:0;top:27px;font-size:11px;letter-spacing:.2px;color:#979797;line-height:16px}
.sub_head .location a{color:#979797}
.sub_head .location a:hover{color:var(--primary)}
.sub_head .location .gt{margin:0 1px}
.sub_cont{min-height:500px}



/* =============================================================================================
   [08] 서브 컨텐츠 페이지   (홈페이지관리 에디터에 HTML 로 넣는 본문)
   ---------------------------------------------------------------------------------------------
   · 에디터는 <style> / <link> 를 저장하지 않으므로 페이지 스타일은 모두 여기에 둡니다.
   · 에디터는 "속이 빈 태그"를 지우므로 장식(선·따옴표·체크)은 전부 ::before / ::after 로 그립니다.
   · 본문 폭 1100px (.sub_cont)
   · 공통모듈 CSS(p / li 12px 등)를 이기도록 항상 클래스와 함께 지정합니다.
   ============================================================================================= */
.pg_wrap{--pg-blue:#0595f8;--pg-navy:#172951;--pg-line:#e3eaf2;--pg-bg:#f3f8fd;
     color:#333;font-size:17px;line-height:1.85;letter-spacing:-.3px;word-break:keep-all}
.pg_wrap *{box-sizing:border-box}
.pg_wrap p,.pg_wrap li,.pg_wrap ul,.pg_wrap ol,.pg_wrap h3,.pg_wrap h4{margin:0;padding:0;list-style:none;font-size:inherit;line-height:inherit;color:inherit}
.pg_wrap strong{font-weight:700;color:var(--pg-navy)}
.pg_eyebrow{font-size:14px!important;font-weight:700;letter-spacing:3px!important;color:var(--pg-blue)!important;line-height:1!important}
.pg_btn:link,.pg_btn:visited{display:inline-block;height:56px;padding:0 40px;border-radius:8px;background:var(--pg-blue);
     color:#fff;font-size:17px;font-weight:700;line-height:56px;text-decoration:none;transition:background .2s}
.pg_btn:hover{background:#0080e0;color:#fff}

/* ---------------- 원장인사말 ---------------- */
.pg_greet{display:flex;gap:70px;padding:20px 0 40px}
.pg_greet .gr_side{flex:none;width:360px}
.pg_greet .gr_side_in{position:sticky;top:40px;padding:48px 40px 44px;border-radius:20px;background:var(--pg-bg);overflow:hidden}
.pg_greet .gr_side_in::before{content:"\201C";position:absolute;right:26px;top:-10px;font-family:Georgia,serif;font-size:180px;line-height:1;color:rgba(5,149,248,.12)}
.pg_greet .gr_tit{position:relative;margin-top:22px;font-size:34px;font-weight:800;line-height:1.4;letter-spacing:-1.2px;color:var(--pg-navy)}
.pg_greet .gr_tit em{font-style:normal;color:var(--pg-blue)}
.pg_greet .gr_hello{position:relative;margin-top:30px;padding-top:28px;border-top:1px solid #d6e4f2;font-size:17px;line-height:1.75;color:#555}
.pg_greet .gr_hello strong{color:var(--pg-navy)}

.pg_greet .gr_body{flex:1;min-width:0;padding-top:6px}
.pg_greet .gr_body > p{margin-bottom:22px}
.pg_greet .gr_quote{position:relative;margin:4px 0 26px;padding:6px 0 6px 26px;font-size:24px;font-weight:700;line-height:1.5;letter-spacing:-.8px;color:var(--pg-blue)}
.pg_greet .gr_quote::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:2px;background:var(--pg-blue)}
.pg_greet .gr_point{margin:36px 0 36px;padding:34px 40px;border-radius:16px;background:var(--pg-navy);color:#c9d6ea}
.pg_greet .gr_point .pt_lead{font-size:16px;line-height:1.7;color:#aebcd4}
.pg_greet .gr_point .pt_main{margin-top:10px;font-size:21px;line-height:1.65;letter-spacing:-.6px;color:#fff}
.pg_greet .gr_point .pt_main strong{color:#7cc8ff}
.pg_greet .gr_voice{display:flex;gap:16px;margin:4px 0 22px}
.pg_greet .gr_voice > li{flex:1;padding:26px 28px;border:1px solid var(--pg-line);border-radius:14px;background:#fff}
.pg_greet .gr_voice .who{display:block;font-size:14px;font-weight:700;color:var(--pg-blue);line-height:1.4}
.pg_greet .gr_voice .say{display:block;margin-top:8px;font-size:19px;font-weight:700;line-height:1.5;letter-spacing:-.6px;color:var(--pg-navy)}
.pg_greet .gr_promise{margin-top:40px!important;padding-top:36px;border-top:1px solid var(--pg-line);font-size:18px!important}
.pg_greet .gr_promise strong{display:inline-block;margin-bottom:8px;font-size:26px;line-height:1.5;letter-spacing:-.8px}
.pg_greet .gr_promise strong em{font-style:normal;color:var(--pg-blue)}
.pg_greet .gr_sign{margin-top:44px;text-align:right;font-size:16px!important;color:#777}
.pg_greet .gr_sign strong{margin-left:12px;font-size:26px;font-weight:800;letter-spacing:4px;color:var(--pg-navy)}

/* ---------------- 입학안내 ---------------- */
.pg_adm{padding:20px 0 40px}
.pg_adm .ad_head{text-align:center}
.pg_adm .ad_tit{margin-top:18px;font-size:36px;font-weight:800;line-height:1.35;letter-spacing:-1.2px;color:var(--pg-navy)}
.pg_adm .ad_lead{margin-top:14px;font-size:18px;color:#666}

.pg_adm .ad_step{display:flex;gap:44px;margin-top:56px;counter-reset:none}
.pg_adm .ad_step > li{position:relative;flex:1;padding:44px 34px 40px;border:1px solid var(--pg-line);border-radius:20px;background:#fff;
     box-shadow:0 10px 30px rgba(23,41,81,.06);transition:border-color .25s,background .25s,box-shadow .25s,transform .25s}
/* 단계 사이 화살표 */
.pg_adm .ad_step > li:not(:last-child)::after{content:"";position:absolute;right:-30px;top:50%;width:14px;height:14px;margin-top:-7px;
     border-top:3px solid #b9d6f2;border-right:3px solid #b9d6f2;transform:rotate(45deg)}
/* 마우스 오버 : 라인색 + 옅은 배경색
   (li 에 class="on" 을 주면 마우스를 올리지 않아도 이 상태로 고정) */
.pg_adm .ad_step > li:hover,
.pg_adm .ad_step > li.on{border-color:var(--pg-blue);background:#f2f9ff;box-shadow:0 14px 34px rgba(5,149,248,.15);transform:translateY(-4px)}
.pg_adm .ad_step .no{display:inline-block;height:32px;padding:0 16px;border-radius:16px;background:var(--pg-bg);
     font-size:14px;font-weight:800;letter-spacing:1px;line-height:32px;color:var(--pg-blue);transition:background .25s,color .25s}
.pg_adm .ad_step > li:hover .no,
.pg_adm .ad_step > li.on .no{background:var(--pg-blue);color:#fff}

/* 아이콘 (STEP 과 타이틀 사이) : 원 없이 크게, 가운데 정렬
   · 에디터가 빈 태그를 지우므로 <div class="ico i01">&nbsp;</div> 처럼 &nbsp; 를 넣고 글자는 숨김
   · 모양은 mask(SVG), 색은 background-color */
.pg_adm .ad_step .ico{position:relative;width:100%;height:72px;margin-top:26px;background:none;
     font-size:0!important;line-height:0!important;color:transparent;overflow:hidden}
.pg_adm .ad_step .ico::before{content:"";position:absolute;left:50%;top:0;width:72px;height:72px;margin-left:-36px;background-color:var(--pg-blue);
     -webkit-mask:var(--ico) no-repeat center/contain;mask:var(--ico) no-repeat center/contain;transition:transform .25s}
.pg_adm .ad_step .i01{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4M8.8 15.2l2.2 2.2 4.2-4.4'/%3E%3C/svg%3E")}   /* 달력 + 체크 : 진단평가 예약 */
.pg_adm .ad_step .i02{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.5a8 8 0 0 1-11.7 7.1L4 20l1.4-4.4A8 8 0 1 1 20.5 11.5z'/%3E%3Cpath d='M8.5 10h7M8.5 13.5h4.5'/%3E%3C/svg%3E")}   /* 말풍선 : 결과 상담 · 학습 설계 */
.pg_adm .ad_step .i03{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.8c2.9-1.2 6-1.1 9 .9 3-2 6.1-2.1 9-.9v12.8c-2.9-1.2-6-1.1-9 .9-3-2-6.1-2.1-9-.9z'/%3E%3Cpath d='M12 6.7v13'/%3E%3C/svg%3E")}   /* 펼친 책 : 수업 시작 */
.pg_adm .ad_step > li:hover .ico::before,
.pg_adm .ad_step > li.on .ico::before{transform:scale(1.08)}

.pg_adm .ad_step .tit{display:block;margin-top:22px;font-size:23px;font-weight:800;line-height:1.4;letter-spacing:-.8px;color:var(--pg-navy)}
.pg_adm .ad_step .txt{margin-top:14px;font-size:16px;line-height:1.75;color:#555}
.pg_adm .ad_step .chk{margin-top:22px;padding-top:20px;border-top:1px dashed #d3e2f1}
.pg_adm .ad_step .chk > li{position:relative;padding-left:26px;font-size:16px;line-height:1.9;color:#333}
.pg_adm .ad_step .chk > li::before{content:"";position:absolute;left:3px;top:9px;width:6px;height:11px;
     border-right:2px solid var(--pg-blue);border-bottom:2px solid var(--pg-blue);transform:rotate(45deg)}

/* 안내박스형 (입학안내_안내박스형.html) : 단계 아래 네이비 박스 + 버튼 */
.pg_adm .ad_note{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-top:56px;padding:44px 56px;border-radius:20px;background:var(--pg-navy)}
.pg_adm .ad_note .nt_tit{font-size:24px;font-weight:800;line-height:1.5;letter-spacing:-.8px;color:#fff}
.pg_adm .ad_note .nt_tit em{font-style:normal;color:#7cc8ff}
.pg_adm .ad_note .nt_txt{margin-top:10px;font-size:16px;line-height:1.7;color:#b5c3da}
.pg_adm .ad_note .pg_btn{flex:none}

/* STEP 03 안의 안내문 + 진단평가 예약 버튼 */
.pg_adm .ad_step .note{margin-top:22px;padding-top:20px;border-top:1px dashed #d3e2f1}
.pg_adm .ad_step .note .nt_tit{font-size:17px;font-weight:700;line-height:1.6;letter-spacing:-.5px;color:var(--pg-navy)}
.pg_adm .ad_step .note .nt_tit em{font-style:normal;color:var(--pg-blue)}
.pg_adm .ad_step .note .nt_txt{margin-top:8px;font-size:16px;line-height:1.75;color:#555}
.pg_adm .ad_step .btn_wrap{margin-top:26px}
.pg_adm .ad_step .btn_wrap .pg_btn{display:block;height:54px;padding:0;text-align:center;line-height:54px;font-size:17px}


/* ---------------- 원장인사말 수정안 1 : 기존 스타일 그대로 · 좌우 분할 없이 한 페이지 ----------------
   · 기존 원장인사말(.pg_greet) 스타일을 그대로 쓰고, .gr_wide 만 추가해서
     왼쪽 박스(처음 선택보다~)를 위로 올리고 본문을 전체 폭으로 넓혔습니다. */
.pg_greet.gr_wide{display:block;padding-top:10px}
.pg_greet.gr_wide .gr_side{width:auto}
.pg_greet.gr_wide .gr_side_in{position:relative;top:auto;padding:56px 60px 50px}
/* 따옴표 대신 큰 라인 아이콘 (웃는 어른·아이 + 펼친 책) — 박스 오른쪽 아래, 따옴표와 같은 옅은 파랑
   · 사진을 넣고 싶으면 background 의 url(...) 을 사진 경로로 바꾸면 됩니다 */
.pg_greet.gr_wide .gr_side_in::before{content:"";right:56px;top:50%;bottom:auto;width:330px;height:198px;margin-top:-99px;font-size:0;
     background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 140 84' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%230595f8' stroke-opacity='.17' stroke-width='2.6'%3E%3Ccircle cx='48' cy='44' r='17'/%3E%3Cpath d='M42 41.5v2.5M54 41.5v2.5'/%3E%3Cpath d='M40.5 50.5q7.5 7 15 0'/%3E%3Cpath d='M18 98c0-24 13-37 30-37s30 13 30 37'/%3E%3Ccircle cx='96' cy='58.5' r='12.5'/%3E%3Cpath d='M91.5 56.5v2M100.5 56.5v2'/%3E%3Cpath d='M90.5 62.5q5.5 5 11 0'/%3E%3Cpath d='M74 98c0-17 9.5-27 22-27s22 10 22 27'/%3E%3Cpath d='M118 34l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3Cpath d='M20 32v8M16 36h8'/%3E%3C/g%3E%3Cpath d='M44 99c9-5 19-5 26 1 7-6 17-6 26-1V79c-9-5-19-5-26 1-7-6-17-6-26-1z' fill='%23f3f8fd' stroke='%230595f8' stroke-opacity='.17' stroke-width='2.6'/%3E%3Cpath d='M70 80v19' stroke='%230595f8' stroke-opacity='.17' stroke-width='2.6'/%3E%3C/svg%3E") no-repeat center/contain}
.pg_greet.gr_wide .gr_tit{font-size:38px}
/* 박스 안 : 가장 긴 줄(타이틀) 폭에 맞춰서 → 인사말 위 라인이 타이틀 끝까지 */
.pg_greet.gr_wide .gr_side_in{display:grid;grid-template-columns:max-content;justify-content:start}
.pg_greet.gr_wide .gr_hello{display:block;margin-top:28px;padding-top:24px}
.pg_greet.gr_wide .gr_body{padding-top:60px;font-size:18px;line-height:1.65}
.pg_greet.gr_wide .gr_body > p{margin-bottom:18px}
.pg_greet.gr_wide .gr_point{padding:38px 50px}
.pg_greet.gr_wide .gr_voice{gap:20px}
.pg_greet.gr_wide .gr_voice > li{padding:30px 34px}
.pg_greet.gr_wide .gr_voice > li{text-align:center}
.pg_greet.gr_wide .gr_voice .say{white-space:nowrap}
.pg_greet.gr_wide .gr_promise{border-top:0;padding-top:0}


/* ---------------- 원장인사말 수정안 2 : 편지형 (글 중간 실사 배너) ---------------- */
.pg_letter{padding:30px 0 50px;font-size:18px;line-height:2.05;color:#444}
.pg_letter .lt_head{padding-bottom:6px}
.pg_letter .lt_tit{margin-top:20px;font-size:36px;font-weight:700;line-height:1.45;letter-spacing:-1.2px;color:#222}
.pg_letter .lt_tit em{font-style:normal;color:var(--pg-blue)}
.pg_letter .lt_body{padding-top:48px}
.pg_letter .lt_body > p{margin-bottom:28px}
.pg_letter .lt_dear{font-size:20px!important;color:#222!important}
.pg_letter .lt_dear strong{color:#222}
.pg_letter .lt_em{font-size:21px!important;font-weight:600;color:var(--pg-blue)!important}
/* 실사 배너 : 본문 폭(1100) 가득 — 이미지 /SUV0/img/sub/greet_photo.jpg (1650x600) */
.pg_letter .lt_photo{margin:50px 0 54px!important;line-height:0!important}
.pg_letter .lt_photo img{display:block;width:100%;height:auto;border-radius:14px}
.pg_letter .lt_sign{margin-top:60px!important;text-align:right;font-size:16px!important;line-height:1.6!important;color:#777!important}
.pg_letter .lt_sign strong{margin-left:14px;font-size:28px;font-weight:700;letter-spacing:5px;color:#222}


/* =============================================================================================
   [09] 학원전경 갤러리   (에디터 본문 : 에디터소스/학원전경.html)
   ---------------------------------------------------------------------------------------------
   · 4칸 x 12줄(반 칸) 격자에 빈칸 없이 끼워 맞춤 — 칸 위치는 g01 ~ g19 클래스로 고정
       세로사진(3:4) = 1칸 x 2줄 / 긴 세로사진 = 1칸 x 3줄 / 가로사진(4:3) = 2칸 x 2줄
   · 사진은 칸에 맞춰 잘라서(cover) 보여주고, 클릭하면 원본을 레이어팝업으로 띄움 (js/script.js 맨 아래)
   · 이미지 : /SUV0/img/sub/gallery/gallery_01.jpg (원본) · gallery_01_s.jpg (목록용)
   ============================================================================================= */
.pg_gal .gal_grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(12,1fr);gap:10px;
     aspect-ratio:1100/2190;margin-top:56px!important}
.pg_gal .gal_grid > a{position:relative;display:block;min-width:0;min-height:0;overflow:hidden;border-radius:10px;background:#eef2f6;cursor:zoom-in}
.pg_gal .gal_grid > a img{display:block;width:100%!important;height:100%!important;max-width:none;object-fit:cover;transition:transform .6s ease}
.pg_gal .gal_grid > a::after{content:"";position:absolute;inset:0;background:rgba(23,41,81,0) no-repeat center/46px
     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E");
     background-size:0;transition:background-color .3s,background-size .3s}
.pg_gal .gal_grid > a:hover img{transform:scale(1.05)}
.pg_gal .gal_grid > a:hover::after{background-color:rgba(23,41,81,.35);background-size:46px}
/* 칸 위치 : 세로줄 시작 / 가로칸 시작 / 세로줄 끝 / 가로칸 끝 */
.pg_gal .g01{grid-area:1/1/3/3}  .pg_gal .g02{grid-area:1/3/4/4}  .pg_gal .g03{grid-area:1/4/3/5}
.pg_gal .g04{grid-area:3/1/5/2}  .pg_gal .g05{grid-area:3/2/5/3}  .pg_gal .g06{grid-area:3/4/5/5}
.pg_gal .g07{grid-area:4/3/7/4}  .pg_gal .g08{grid-area:5/1/7/3}  .pg_gal .g09{grid-area:5/4/7/5}
.pg_gal .g10{grid-area:7/1/9/2}  .pg_gal .g11{grid-area:7/2/9/4}  .pg_gal .g12{grid-area:7/4/9/5}
.pg_gal .g13{grid-area:9/1/11/2} .pg_gal .g14{grid-area:9/2/11/3} .pg_gal .g15{grid-area:9/3/11/5}
.pg_gal .g16{grid-area:11/1/13/2} .pg_gal .g17{grid-area:11/2/13/3} .pg_gal .g18{grid-area:11/3/13/4} .pg_gal .g19{grid-area:11/4/13/5}

/* 레이어팝업 (script.js 가 body 끝에 만들어 붙임) */
.gal_lb{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.86);
     opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;font-family:inherit}
.gal_lb.on{opacity:1;visibility:visible}
.gal_lb .lb_fig{position:relative;margin:0;max-width:calc(100vw - 220px);text-align:center}
.gal_lb .lb_img{display:block;max-width:100%;max-height:calc(100vh - 140px);margin:0 auto;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);
     transition:opacity .2s}
.gal_lb .lb_img.ld{opacity:0}
.gal_lb .lb_cap{margin-top:16px;font-size:15px;letter-spacing:-.3px;line-height:1.5;color:#dfe5ee}
.gal_lb .lb_cap b{margin-right:10px;font-weight:600;color:#7cc8ff}
.gal_lb button{position:absolute;display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;border-radius:50%;
     background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background .2s}
.gal_lb button:hover{background:rgba(255,255,255,.24)}
.gal_lb button svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gal_lb .lb_prev,.gal_lb .lb_next{top:50%;width:60px;height:60px;margin-top:-30px}
.gal_lb .lb_prev{left:40px}
.gal_lb .lb_next{right:40px}
.gal_lb .lb_close{top:28px;right:34px;width:50px;height:50px}
html.gal_lock,html.gal_lock body{overflow:hidden}
@media (max-width:768px){
  .pg_gal .gal_grid{gap:6px}
  .gal_lb .lb_fig{max-width:100vw}
  .gal_lb .lb_img{max-height:calc(100vh - 160px);border-radius:0}
  .gal_lb .lb_prev,.gal_lb .lb_next{top:auto;bottom:24px;margin-top:0;width:52px;height:52px}
  .gal_lb .lb_prev{left:calc(50% - 64px)}
  .gal_lb .lb_next{right:calc(50% - 64px)}
  .gal_lb .lb_close{top:14px;right:14px;width:44px;height:44px}
}