/* ── Base (구 base.css) ── */
@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);
html,body{width:100%;height:100%}
html{overflow-y:scroll;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button{margin:0;padding:0}
body,h1,h2,h3,h4,input,button{font-size:15px;color:#333333;font-weight:400;}
body{font-family:'Open Sans','Nanum Gothic','나눔고딕', dotum, '돋움', 'Apple-Gothic', sans-serif;background-color:#fff;*word-break:break-all;-ms-word-break:break-all}
img,fieldset,iframe{border:0 none}
li{list-style:none}
input,select,button{vertical-align:middle}
img{vertical-align:top}
i,em,address{font-style:normal}
label,button{cursor:pointer}
button{margin:0;padding:0;}
a{color:#222;text-decoration:none}
a:hover{color:#1e44a5;text-decoration:underline}
button *{position:relative}
button img{left:-3px;*left:auto}
option{padding-right:6px}
hr, caption{visibility:hidden; font-size:0; line-height:0; height:0}
legend{*width:0}
table{border-collapse:collapse;border-spacing:0}
input::-ms-clear{display:none}
*{box-sizing: border-box;margin:0;padding:0;}

/* Default */
::selection{background:#1e91d4;color:#ffffff}::-moz-selection{background:#1e91d4;color:#ffffff}
.cl{clear:both!important}
.fl{float:left!important}
.ac{text-align:center!important}
.al{text-align:left!important}
.bt_none{border-top:none!important}
.br_none{border-right:none!important}
.bb_none{border-bottom:none!important}
.bl_none{border-left:none!important}
.pt_0{padding-top:0!important}
.pr_0{padding-right:0!important}
.pb_0{padding-bottom:0!important}
.pl_0{padding-left:0!important}
.mt_0{margin-top:0!important}
.mr_0{margin-right:0!important}
.mr_20{margin-right:20px!important}
.mb_0{margin-bottom:0!important}
.mt_10{margin-top:10px!important}
.ml_10{margin-left:10px!important}
.ml_20{margin-left:20px!important}
.mt_20{margin-top:20px!important}
.mb_10{margin-bottom:10px!important}
.mb_20{margin-bottom:20px!important}
.ml_0{margin-left:0!important}
.italic{font-style:italic;}
.font300{font-weight:300!important}
.font300i{font-weight:300!important;font-style:italic!important}
.font400{font-weight:400!important}
.font400i{font-weight:400!important;font-style:italic!important}
.font600{font-weight:600!important}
.font600i{font-weight:600!important;font-style:italic!important}
.font700{font-weight:700!important}
.font700i{font-weight:700!important;font-style:italic!important}
.font800{font-weight:800!important}
.font800i{font-weight:800!important;font-style:italic!important}`
.color_black{color:#333333!important}

/* Common */

/* Layout */
#Wrap{width:100%;background-color:#f9f9f9;overflow:visible;position:relative}
#Header{width:100%;background:#004082;background-color:#004082;border-bottom:4px solid #960000;top:0;z-index:999;}
.Header{max-width:1240px;margin:0 auto;padding:0 15px;height:91px;display:flex;align-items:center;justify-content:space-between;}
.Header h1{margin:0;padding:0;}
.Header h1 a{display:flex;align-items:center;gap:12px;text-decoration:none;}
.Header h1 > a > span{display:flex;align-items:center;flex-shrink:0;}
.Header h1 strong{font-size:22px;font-weight:800;line-height:1.15;color:#ffffff;white-space:nowrap;}
.Header h1 .titleBox{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}
.Header h1 .titleBox em{font-size:13px;font-style:normal;font-weight:700;line-height:1.15;color:#cddcf0;white-space:nowrap;margin-top:2px;}

#Gnb{display:flex;align-items:center;}
#GnbMenu{display:flex;align-items:center;gap:0;}
#GnbMenu > li{display:inline-block;margin-left:40px;padding:2px 0;text-decoration:none}
#GnbMenu > li > a{font-size:17px;line-height:1;padding:10px 0;text-decoration:none;color:#ffffff;display:flex;align-items:center;}
#GnbMenu > li:hover > a, #GnbMenu > li.current-menu-item > a{color:#ffffff;text-decoration:none!important}
#GnbMenu li{position: relative;text-decoration:none}
ul.sub-menu{ /* level 2 */	display:none;left:0px;top:36px;padding-top:10px;position:absolute;width:270px;z-index:9999;}
ul.sub-menu ul.sub-menu{ /* level 3+ */margin-top:-1px;padding-top:0;left:149px;top:0px;}
ul.sub-menu > li > a{background-color:#ffffff;border:1px solid #dcdadb;border-top:none;display:block;font-size:15px;padding:10px 12px;}
ul.sub-menu > li > a:hover{background-color:#f3f3f3;text-decoration:none;color:#333333}
ul.sub-menu > li:first-child{border-top:3px solid #155CB5;}
ul.sub-menu ul.sub-menu > li:first-child{border-top:1px solid #444;}
ul.sub-menu > li:last-child > a{border-radius:0 0 2px 2px;}
ul.sub-menu > li > a.parent{background-image:url(/img/common/arrow.png);background-size:5px 9px;background-repeat:no-repeat;background-position:95% center;}
#GnbMenu li:hover > ul.sub-menu{display:block; /* show the submenu */}
#slideContainer {
    margin-bottom: 40px;
}
#slideContainer .swiper {
    width: 100%;
    height: 410px;          /* 슬라이드 영역 높이 */
}
#slideContainer .swiper-slide {
    width: 565px !important; /* 슬라이드 1장 너비 — 해상도에 따라 몇 장이 보일지 결정 */
    height: 100%;
    flex-shrink: 0;
}
#slideContainer .swiper-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    cursor: pointer;
}
/* 가로 막대형 페이지네이션 — swiper 외부 배치 */
#slideContainer #mainPagination {
    position: static;
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
#slideContainer .swiper-pagination-bullet {
    width: 22px;        /* 비활성: 짧은 막대 */
    height: 6px;        /* 두께 증가 */
    border-radius: 3px;
    background: #bbc;
    opacity: 1;
    margin: 0 !important;
    transition: background 0.3s, width 0.3s;
}
#slideContainer .swiper-pagination-bullet-active {
    background: #004082;
    width: 60px;        /* 활성: 긴 막대 */
}

/* ── 슬라이드 라이트박스 ── */
#slideLightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    align-items: center;
    justify-content: center;
}
#slideLightbox.is-open {
    display: flex;
}
#slideLightboxBg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.82);
}
#slideLightboxBox {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#slideLightboxImg {
    max-width: 90vw;
    max-height: 88vh;
    display: block;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
#slideLightboxClose {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: none;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 2;
}
#slideLightboxClose:hover { background: #eee; }
/* ── // 라이트박스 ── */

/* @media (max-width:1100px)
{
#Header{width:100%;}
#Header h1{width:100%;margin:0 0 0 10px}
#Header h1 strong{float:left;font-size:20px;font-weight:700;color:#1e44a5;display:inline-block}
#Header h1 span{float:left;clear:left;font-size:15px;color:#555;display:inline-block;}
#Gnb{display:none}
} */

/* Home */
#HomeContainer{width:100%;}
#HomeContents{max-width:1240px;margin:0 auto;padding:30px 30px 30px 40px;background:#ffffff;}
.homettl{font-size:20px;font-weight:700;color:#960000;position:relative}
.homettl:after{position:absolute;width:50px;height:5px;top:-5px;left:0;content:"";background-color:#960000}
.homecontentbox{width:100%;float:left}
.news_contents{width:570px;float:left;margin-right:30px}
.calendar_contents{width:570px;float:left}
.homecontent3{width:100%;display:inline-block;padding:10px 0 0 0;margin-top:12px}
.homecontent4{width:100%;background-color:#162b3c;}
.homecontent4 .apply{max-width:1240px;margin:0 auto;padding:20px 0 20px 0;overflow:hidden}
.homecontent4 .apply .ttl a{color:#ffffff;}
.homecontent4 .apply .process{width:100%}
.homecontent4 .apply .process .step123456{width:100%}
.homecontent4 .apply .process .step123456 .step1{width:20%}
.homecontent4 .apply .process .step123456 .step2{width:20%}
.homecontent4 .apply .process .step123456 .step3{width:20%}
.homecontent4 .apply .process .step123456 .step4{width:20%}
.homecontent4 .apply .process .step123456 .step5{width:20%}
.homecontent4 .apply .process .step123456 .step6{width:20%}
/* .homecontent4 .apply .process .step123{width:100%}
.homecontent4 .apply .process .step123 .step1{width:33.3%}
.homecontent4 .apply .process .step123 .step2{width:33.3%}
.homecontent4 .apply .process .step123 .step3{width:33.3%}
.homecontent4 .apply .process .step456{width:100%}
.homecontent4 .apply .process .step456 .step4{width:33.3%}
.homecontent4 .apply .process .step456 .step5{width:33.3%}
.homecontent4 .apply .process .step456 .step6{width:33.3%} */
.homecontent4 .apply h2{width:100%;color:#ffffff;font-size:25px;text-align:center;text-transform:uppercase;font-weight:700;margin-bottom:30px}
.homecontent4 .apply .process ul li{float:left;display:inline-block;width:16.6%;text-align:center;}
.homecontent4 .apply .process ul li strong{display:inline-block;text-align:center;}
.homecontent4 .apply .process ul li span{display:block;text-align:center;color:#ffffff;margin-top:10px;font-size:17px;font-weight:600;}

/* 200313_banner */
.left_banner{width:280px;float:left;margin-right:10px}
.right_banner{width:280px;float:left}
.ban_intro{border:1px solid #f2f2f2;float:left;margin-bottom: 10px;}
.ban_intro:hover{-webkit-box-shadow:0 0 8px 4px rgba(50,50,50,.2);-moz-box-shadow:0 0 8px 4px rgba(50,50,50,.2);box-shadow:0 0 8px 4px rgba(50,50,50,.2)}
.ban_intro a:hover{text-decoration:none;}
.ban_intro h3{background:#B20D11;padding:5px 10px 5px 40px;vertical-align: middle; color: #fff;line-height: 22px;position:relative;font-family:'Nanum Gothic';letter-spacing:-1px;}
.ban_intro h3:hover{text-decoration:none}
.ban_intro h3 img{top:6px; left:10px;position:absolute;}
.ban_intro h3 span{display:inline-block; float:right;font-size: 10px;line-height: 22px;color: #efefef;}
.ban_intro p{padding:9px 7px;font-size: 12px;color: #555;min-height:86px}
.ban_admission{border:1px solid #f2f2f2;float:left;margin-bottom: 10px;width:280px}
.ban_admission:hover{-webkit-box-shadow:0 0 8px 4px rgba(50,50,50,.2);-moz-box-shadow:0 0 8px 4px rgba(50,50,50,.2);box-shadow:0 0 8px 4px rgba(50,50,50,.2)}
.ban_admission a:hover{text-decoration:none}
.ban_admission h3{background:#0d7ab2;padding:5px 10px 5px 40px;vertical-align: middle; color: #fff;line-height: 22px;position:relative;font-family:'Nanum Gothic';}
.ban_admission h3:hover{text-decoration:none}
.ban_admission h3 img{top:6px; left:10px;position:absolute;}
.ban_admission h3 span{display:inline-block; float:right;font-size: 10px;line-height: 22px;color: #efefef;}
.ban_admission p{padding:10px 9px 10px 9px;font-size: 12px;min-height:86px;color: #555;}
.ban_univ{border:1px solid #f2f2f2;float:left;margin-bottom: 10px;}
.ban_univ:hover{-webkit-box-shadow:0 0 8px 4px rgba(50,50,50,.2);-moz-box-shadow:0 0 8px 4px rgba(50,50,50,.2);box-shadow:0 0 8px 4px rgba(50,50,50,.2)}
.ban_univ h3{background:#0e8c73;padding:5px 10px 5px 40px;vertical-align: middle; color: #fff;line-height: 22px;position:relative}
.ban_univ a:hover{text-decoration:none}
.ban_univ h3:hover{text-decoration:none}
.ban_univ h3 img{top:6px; left:10px;position:absolute;}
.ban_univ h3 span{display:inline-block; float:right;font-size: 10px;line-height: 22px;color: #efefef;}
.ban_univ p{padding:10px 9px 15px 9px;font-size: 12px;color: #555;min-height:86px}

.ban_goout{border:1px solid #f2f2f2;float:left;margin:0 9px 10px 0;width:110px}
.ban_goout:hover{-webkit-box-shadow:0 0 8px 4px rgba(50,50,50,.2);-moz-box-shadow:0 0 8px 4px rgba(50,50,50,.2);box-shadow:0 0 8px 4px rgba(50,50,50,.2)}
.ban_goout h3{margin: 0 0 8px 0;text-align: center;vertical-align: middle; color: #555;line-height: 22px;position:relative}
.ban_goout a:hover{text-decoration:none}
.ban_goout h3:hover{text-decoration:none}
.ban_goout .img{display:block;text-align:center;margin:8px 0 8px 0;}
.ban_goout h3 span{display:inline-block; float:right;font-size: 10px;line-height: 22px;color: #efefef;}
.ban_goout p{background:#ddd;padding:3px 9px 3px 9px;font-size: 12px;line-height: 18px;color: #555;text-align:center}

.ban_cafeteria{border:1px solid #f2f2f2;float:left;width:280px;min-height:120px}
.ban_cafeteria:hover{-webkit-box-shadow:0 0 8px 4px rgba(50,50,50,.2);-moz-box-shadow:0 0 8px 4px rgba(50,50,50,.2);box-shadow:0 0 8px 4px rgba(50,50,50,.2)}
.ban_cafeteria h3{margin: 7px 0 15px 0;text-align: center;vertical-align: middle; color: #555;line-height: 22px;position:relative}
.ban_cafeteria a:hover{text-decoration:none}
.ban_cafeteria h3:hover{text-decoration:none}
.ban_cafeteria .img{display:block;text-align:center;margin:15px 0 -1px 0;}
.ban_cafeteria h3 span{display:inline-block; float:right;font-size: 10px;line-height: 22px;color: #efefef;}
.ban_cafeteria p{background:#ddd;padding:3px 9px 3px 9px;font-size: 12px;line-height: 18px;color: #555;text-align:center}

	  
/* ── Footer ── */
footer {
  clear: both;
  width: 100%;
  background: #282a2b;
  padding: 10px 0 30px;
}
#footer {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 15px;
  font-size: 13px;
  color: #fff;
  text-align: center;
}
#footer .quick {
  font-size: 17px;
  position: relative;
  padding: 10px 0;
}
#footer .quick a {
  display: inline-block;
  padding: 12px 20px;
  color: #fff;
  text-decoration: none;
}
#footer .quick a:hover { color: #7be247; }
#footer .copyright {
  font-size: 13px;
  color: rgba(255,255,255,.75);
  line-height: 1.7;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.15);
}
#footer .copyright address {
  font-style: normal;
  margin-bottom: 4px;
}

/* ── Scroll-to-top ── */
.gotop {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  position: fixed;
  right: 20px;
  bottom: 30px;
  width: 41px;
  height: 41px;
  background-color: #777;
  border-radius: 50%;
  cursor: pointer;
  z-index: 999;
}
.gotop.is-visible {
  opacity: 1;
  visibility: visible;
}
.gotop:hover { background-color: #000; }
.gotop div {
  width: 41px;
  height: 41px;
  background: url("/img/common/top_arrow.png") no-repeat 7px 10px;
}

@media (max-width: 768px) {
  #footer .quick a { padding: 8px 14px; font-size: 15px; }
  #footer .copyright { font-size: 12px; }
}

/* 레이어팝업 스크롤 */
#hd_pops_11{overflow:auto!important;overflow-x: hidden!important;}


/* =========================
   Mobile Off-canvas GNB
   ========================= */

/* hamburger default hidden */
.mobile-menu-btn { display:none; }

/* overlay default hidden */
.mobile-nav-overlay{
  display:none;
  position:fixed;
  left:0; top:0;
  width:100%; height:100%;
  background:rgba(0,0,0,.45);
  z-index:998;
}

@media (max-width:1024px){

  #Header{
    position: fixed;   /* sticky -> fixed */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1005;
  }

  /* 헤더 높이만큼 본문 밀어주기 (현재 모바일 헤더 72px + border 감안) */
  #Wrap{
    padding-top: 76px;
  }



  /* header height 대응(기존 .Header 높이 91px 기준) */
  #Gnb{ 
    float:none;
    margin-top:0;

    position:fixed;
    top:0;
    right:0;
    width:320px;
    max-width:86vw;
    height:100vh;
    background:#004082;
    z-index:999;

    /* off-canvas */
    transform:translateX(100%);
    transition:transform .25s ease;
    padding:90px 18px 24px; /* 헤더 높이만큼 위 패딩 */
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* open state */
  body.mobile-nav-open #Gnb{
    transform:translateX(0);
  }
  body.mobile-nav-open .mobile-nav-overlay{
    display:block;
  }

  /* 기존 PC 메뉴 숨김 느낌 제거(모바일에서는 드로어로만 보이게) */
  #Gnb{ display:block; }
  #GnbMenu{ display:block; float:none; font-size:16px; }
  #GnbMenu > li{
    display:block;
    margin-left:0;
    padding:0;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  #GnbMenu > li > a{
    display:block;
    padding:14px 6px;
    color:#fff;
    font-size:16px;
    line-height:1.2;
  }

  /* sub-menu: hover 대신 클릭 토글용 */
  #GnbMenu li:hover > ul.sub-menu{ display:none; } /* hover 무력화 */
  ul.sub-menu{
    display:none;
    position:static;
    width:auto;
    padding-top:0;
    margin:0 0 10px 0;
  }
  ul.sub-menu > li > a{
    background:rgba(255,255,255,.08);
    border:none;
    color:#fff;
    padding:10px 10px 10px 16px;
    font-size:14px;
  }
  ul.sub-menu > li:first-child{ border-top:none; }
  ul.sub-menu > li > a:hover{
    background:rgba(255,255,255,.14);
    color:#fff;
  }

  /* 열려있는 li만 submenu 표시 */
  #GnbMenu li.is-sub-open > ul.sub-menu{ display:block; }

  /* body 스크롤 잠금 */
  body.mobile-nav-open{
    overflow:hidden;
    touch-action:none;
  }
}

/* 더 작은 모바일(선택) */
@media (max-width:740px){
  #Gnb{ width:300px; padding-top:84px; }
  .mobile-menu-btn{ top:22px; }
}


/* =========================
   Header Mobile Align Fix
   ========================= */
@media (max-width:1024px){

  /* 헤더를 flex로: 로고는 왼쪽, 햄버거는 오른쪽 */
  #Header .Header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 12px;     /* 기존 15px보다 조금 줄임 */
    height:72px;           /* 모바일 헤더 높이 축소(원하면 78~84로) */
  }

  /* 기존 float 제거 */
  #Header .Header h1,
  #Header .Header h1 span,
  #Header .Header h1 strong{
    float:none !important;
    clear:none !important;
    margin:0 !important;
  }

  /* 로고 링크 정렬 */
  #Header .Header h1 a{
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
  }

  /* 로고 이미지 크기 */
  #Header .Header h1 img{
    width:44px !important;  /* 기존 60 → 모바일 축소 */
    height:auto !important;
    display:block;
  }

  /* "Saint Paul Academy Daechi" 글자 크기 줄이기 */
  #Header .Header h1 strong{
    font-size:16px !important;     /* ← 여기서 체감 확 바뀜 */
    line-height:1.1 !important;
    font-weight:800;
    margin-top:0 !important;
  }

  /* 국문 서브 타이틀 모바일 축소 */
  #Header .Header h1 .titleBox em{
    font-size:11px !important;
    margin-top:1px !important;
  }

  /* 햄버거 버튼 — flex item으로 오른쪽 끝에 배치 */
  .mobile-menu-btn{
    display:flex !important;
    flex-direction:column;
    position:static;          /* absolute 해제 → flex 흐름 */
    flex-shrink:0;
    width:44px;
    height:44px;
    padding:0;
    border:0;
    background:transparent;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:1002;
  }
  .mobile-menu-btn span{
    display:block;
    width:26px;
    height:3px;
    margin:4px 0;
    background:#fff;
    border-radius:2px;
    pointer-events:none;
  }

  /* 드로어 메뉴 상단 패딩도 모바일 헤더 높이에 맞춰 줄이기 */
  #Gnb{
    padding-top:72px; /* 헤더 높이랑 동일하게 */
  }
}

/* 더 작은 폰(390 이하)에서 타이틀 한 번 더 줄이기 */
@media (max-width:390px){
  #Header .Header h1 strong{
    font-size:14px !important;
  }
  #Header .Header h1 .titleBox em{
    font-size:10px !important;
  }
}
 




/* =========================
   Responsive補完 (반응형 보완)
   ========================= */

/* ── 슬라이더 높이: 모바일에서 vw 기준으로 축소 ── */
@media (max-width:740px){
  #slideContainer .swiper { height: 56vw; }
  #slideContainer .swiper-slide { width: 90vw !important; }
}
@media (max-width:390px){
  #slideContainer .swiper { height: 62vw; }
  #slideContainer .swiper-slide { width: 96vw !important; }
}

/* ── 홈 뉴스/캘린더 float 레이아웃 → 모바일 스택 ── */
@media (max-width:740px){
  .homecontentbox { overflow: hidden; }
  .news_contents,
  .calendar_contents {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    margin-bottom: 20px;
  }
}

/* ── 배너 카드 (left/right_banner, ban_*) → 모바일 폭 100% ── */
@media (max-width:600px){
  .left_banner,
  .right_banner {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    margin-bottom: 10px;
  }
  .ban_intro,
  .ban_admission,
  .ban_univ,
  .ban_cafeteria {
    width: 100% !important;
    float: none !important;
    box-sizing: border-box;
  }
  .ban_goout {
    width: calc(50% - 10px) !important;
  }
}

/* ── 이미지 전역 안전망 ── */
img { max-width: 100%; height: auto; }
/* 슬라이드 이미지는 별도 규칙으로 덮어쓰므로 제외 */
#slideContainer .swiper-slide img { height: 100%; }

/* ── 서브페이지 콘텐츠 이미지 ── */
@media (max-width:740px){
  #subContents img { max-width: 100%; height: auto !important; }
  .president_img,
  .president_img img { max-width: 100%; height: auto !important; float: none !important; }
  .president_greeting { margin-left: 0 !important; }
}

/* ── How to Apply 단계 카드: 모바일 2열 ── */
@media (max-width:740px){
  .homecontent4 .apply .process ul li {
    width: 33.3% !important;
    margin-bottom: 12px;
  }
}
@media (max-width:480px){
  .homecontent4 .apply .process ul li {
    width: 50% !important;
  }
}