@charset "utf-8";
/* ==========================================================
   en.css — 영문 페이지 전용 보정 (중앙대학교 보안대학원)
   ----------------------------------------------------------
   · 영문 페이지에서만 로드된다 (head.sub.php 에서 G5_LANG === 'en' 일 때만).
   · 국문 CSS(reset / main / sub / nav.css)는 일절 수정하지 않고 여기에서만 덮어쓴다.
   · 모든 선택자를 html[lang="en"] 으로 감싸 우선순위를 확보한다.
   · 브레이크포인트는 이 사이트 기존 기준을 그대로 따른다
     : 1920 / 1600 / 1400 / 1200 / 1024 / 991 / 768 / 500
   ========================================================== */


/* ----------------------------------------------------------
   0. 공통 타이포
   국문용 음수 자간(letter-spacing)과 word-break:keep-all 은
   영문에서 단어가 어색하게 붙거나 잘리게 하므로 되돌린다.
   ---------------------------------------------------------- */
html[lang="en"] body,
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3,
html[lang="en"] h4, html[lang="en"] h5, html[lang="en"] h6,
html[lang="en"] p, html[lang="en"] li, html[lang="en"] dt, html[lang="en"] dd,
html[lang="en"] th, html[lang="en"] td, html[lang="en"] span, html[lang="en"] a,
html[lang="en"] label, html[lang="en"] strong, html[lang="en"] em, html[lang="en"] b {
	letter-spacing: 0;
	word-break: normal;
	overflow-wrap: break-word;
}

/* 아주 긴 단어(복합어 · URL)만 강제로 끊는다 */
html[lang="en"] .table td,
html[lang="en"] .table th,
html[lang="en"] .subj-class-list p,
html[lang="en"] .cu_list li .tit h4 {
	overflow-wrap: anywhere;
}


/* ----------------------------------------------------------
   1. 상단 GNB (#cssmenu) — 1200px 초과에서만 노출된다
   대메뉴(About / Departments / Academics / Community / Alumni)는
   국문과 길이가 비슷해 그대로 두고, 2차 메뉴만 손본다.
   국문은 고정폭(170~220px)이지만 영문 항목이 길어
   (Industrial Technology Protection · Academic Affairs Office 등)
   내용에 맞춘 자동 폭 + 한 줄 유지로 바꾼다.
   ---------------------------------------------------------- */
html[lang="en"] #cssmenu > ul { gap: 22px; padding: 0 24px; }
html[lang="en"] #cssmenu > ul > li > a { white-space: nowrap; }

html[lang="en"] #cssmenu > ul > li > ul,
html[lang="en"] #cssmenu > ul > li:nth-child(2) > ul,
html[lang="en"] #cssmenu > ul > li:nth-child(3) > ul,
html[lang="en"] #cssmenu > ul > li:nth-child(5) > ul {
	width: auto;
	min-width: 0;
	max-width: 320px;
}
/* 국문 링크의 padding-right:20px(화살표 예비 여백)을 없애야
   상자 안 좌우 여백이 ul 의 padding(17px) 하나로 통일된다 */
html[lang="en"] #cssmenu > ul > li > ul > li > a {
	font-size: 15px;
	line-height: 1.7;
	padding-right: 0;
	white-space: nowrap;
}

/* 오른쪽 끝 메뉴(Community · Alumni)의 드롭다운이 화면 밖으로 나가지 않도록 */
html[lang="en"] #cssmenu > ul > li:nth-child(4) > ul,
html[lang="en"] #cssmenu > ul > li:nth-child(5) > ul { left: auto; right: 0; transform-origin: 100% 0; }
html[lang="en"] #cssmenu > ul > li:nth-child(4):hover > ul,
html[lang="en"] #cssmenu > ul > li:nth-child(5):hover > ul { transform: rotateX(0); }

@media (max-width: 1600px) {
	html[lang="en"] #cssmenu > ul { gap: 12px; padding: 0 14px; }
	html[lang="en"] #cssmenu > ul > li > a { font-size: 16px; padding: 12px 18px; }
	html[lang="en"] #cssmenu > ul > li > ul,
	html[lang="en"] #cssmenu > ul > li:nth-child(2) > ul,
	html[lang="en"] #cssmenu > ul > li:nth-child(3) > ul,
	html[lang="en"] #cssmenu > ul > li:nth-child(5) > ul { width: auto; max-width: 300px; }
	html[lang="en"] #cssmenu > ul > li > ul > li > a { font-size: 14px; }
}
/* GNB 는 1200px 아래에서 햄버거로 바뀌므로 그 직전 구간만 한 번 더 줄인다 */
@media (max-width: 1400px) {
	html[lang="en"] #cssmenu > ul { gap: 4px; padding: 0 8px; }
	html[lang="en"] #cssmenu > ul > li > a { font-size: 15px; padding: 12px 12px; }
}


/* ----------------------------------------------------------
   2. PC 전체메뉴 (.allmenu)
   국문은 소메뉴가 한 줄에 가로로 늘어서지만, 영문 학과명은 길어
   5개가 한 줄에 들어가지 않는다. 줄바꿈을 허용하고 간격을 줄인다.
   ---------------------------------------------------------- */
html[lang="en"] .allmenu h1 > a{background: url('/images/common/logo_w_EN.svg') no-repeat;}
html[lang="en"] .allmenu .allmenuwrap .boxwrap > h2 { width: 230px; font-size: 28px;}
html[lang="en"] .allmenu .allmenuwrap .boxwrap > ul { width: calc(100% - 230px); row-gap: 14px; }
html[lang="en"] .allmenu .allmenuwrap .boxwrap > ul > li + li { margin-left: 2.6rem; }
html[lang="en"] .allmenu .allmenuwrap .boxwrap > ul > li > a { font-size: 17px; white-space: nowrap; }
html[lang="en"] .allmenu .allmenuwrap .boxwrap > ul > li + li a::before { left: -20px; }

@media (max-width: 1400px) {
	html[lang="en"] .allmenu .allmenuwrap .boxwrap > ul > li > a { font-size: 16px; }
	html[lang="en"] .allmenu .allmenuwrap .boxwrap > ul > li + li { margin-left: 2.2rem; }
	html[lang="en"] .allmenu .allmenuwrap .boxwrap > ul > li + li a::before { left: -17px; }
}
@media (max-width: 1200px) {
	html[lang="en"] .allmenu .allmenuwrap .boxwrap > h2 { width: 200px; font-size: 22px;}
	html[lang="en"] .allmenu .allmenuwrap .boxwrap > ul { width: calc(100% - 200px); }
	html[lang="en"] .allmenu .allmenuwrap .boxwrap > ul > li > a { font-size: 15px; }
	html[lang="en"] .allmenu .allmenuwrap .boxwrap > ul > li + li { margin-left: 1.8rem; }
	html[lang="en"] .allmenu .allmenuwrap .boxwrap > ul > li + li a::before { left: -14px; }
}
@media (max-width: 768px) {
	/* 768 이하는 소메뉴가 100% 폭으로 쌓이므로 줄바꿈을 허용한다 */
	html[lang="en"] .allmenu .allmenuwrap .boxwrap > h2 { width: 100%; font-size: 18px;}
	html[lang="en"] .allmenu .allmenuwrap .boxwrap > ul { width: 100%; }
	html[lang="en"] .allmenu .allmenuwrap .boxwrap > ul > li > a { font-size: 14px; white-space: normal; }
	html[lang="en"] .allmenu .allmenuwrap .boxwrap > ul > li + li { margin-left: 1.4rem; }
	html[lang="en"] .allmenu .allmenuwrap .boxwrap > ul > li + li a::before { left: -11px; }
}


/* ----------------------------------------------------------
   3. 모바일 GNB (#gnbM) — 500px 이하에서만 노출된다 (폭 260px)
   영문 소메뉴는 한 줄에 안 들어가므로 줄바꿈 + 행간을 준다.
   ---------------------------------------------------------- */
html[lang="en"] #gnbM .gnbDiv .one,
html[lang="en"] #gnbM .gnbDiv .oneOnly { padding: 14px 18px; font-size: 15px; }
html[lang="en"] #gnbM .gnbDiv .two .twoD {
	padding: 9px 8px;
	font-size: 13px;
	line-height: 1.45;
	white-space: normal;
}


/* ----------------------------------------------------------
   4. LNB (.lnb) — 서브 상단 경로 선택 바
   국문은 li 고정폭 300px + 한 줄 말줄임(ellipsis)이라
   "Industrial Technology Protection" 같은 항목이 잘린다.
   폭을 넓히고 글자를 조금 줄여 잘리지 않게 한다.
   ---------------------------------------------------------- */
html[lang="en"] .lnb .lnb-map > li { flex-basis: 360px; width: 360px; }
html[lang="en"] .lnb .lnb-map li.depth a span { font-size: 16px; padding: 0 58px 0 24px; }
html[lang="en"] .lnb .lnb-map li.depth ul li a { font-size: 15px; letter-spacing: 0; white-space: nowrap; }
html[lang="en"] .lnb .lnb-map li.depth ul.moreMenu li a { word-break: normal; }

@media (max-width: 1600px) {
	html[lang="en"] .lnb .lnb-map > li { flex-basis: 330px; width: 330px; }
	html[lang="en"] .lnb .lnb-map li.depth a span { font-size: 15px; padding: 0 52px 0 22px; }
	html[lang="en"] .lnb .lnb-map li.depth ul li a { font-size: 14px; }
}
@media (max-width: 1400px) {
	html[lang="en"] .lnb .lnb-map > li { flex-basis: 290px; width: 290px; }
	html[lang="en"] .lnb .lnb-map li.depth a span { font-size: 14px; padding: 0 44px 0 18px; }
	html[lang="en"] .lnb .lnb-map li.depth ul li a { font-size: 14px; }
}
/* 1200 이하 : li 가 flex:1 1 0 으로 화면을 반씩 나눠 갖는 바 형태.
   폭을 강제하면 바가 깨지므로 고정폭을 반드시 풀어 준다. */
@media (max-width: 1200px) {
	html[lang="en"] .lnb .lnb-map > li { flex: 1 1 0; width: 50%; }
	html[lang="en"] .lnb .lnb-map li.depth a span { font-size: 14px; padding: 0 32px 0 14px; }
	html[lang="en"] .lnb .lnb-map li.depth ul li a { font-size: 13px; }
}
@media (max-width: 768px) {
	html[lang="en"] .lnb .lnb-map li.depth a span { font-size: 13px; padding: 0 28px 0 12px; }
	html[lang="en"] .lnb .lnb-map li.depth ul li a { font-size: 12px; }
}


/* ----------------------------------------------------------
   5. 서브 비주얼 큰 제목 (#sVisual .slogan)
   ---------------------------------------------------------- */
html[lang="en"] #sVisual .slogan .big-tit { letter-spacing: 0; word-break: normal; }
html[lang="en"] #sVisual .slogan .loca ul.loc li { word-break: normal; }

@media (max-width: 768px) {
	html[lang="en"] #sVisual .slogan .big-tit { letter-spacing: 0; }
}


/* ----------------------------------------------------------
   6. 공통 탭 (.link_tab) — 학과소개 3탭
   Overview / Curriculum / Course Descriptions
   ---------------------------------------------------------- */
html[lang="en"] .link_tab a { font-size: 18px; padding: 10px 26px; white-space: nowrap; }

@media (max-width: 1200px) {
	html[lang="en"] .link_tab a { font-size: 15px; padding: 0 14px; }
}
@media (max-width: 768px) {
	/* 768 이하 : li 가 50% 폭 2열로 쌓이므로 줄바꿈을 허용한다 */
	html[lang="en"] .link_tab a { white-space: normal; font-size: 14px; line-height: 1.3; }
}
@media (max-width: 500px) {
	html[lang="en"] .link_tab a { font-size: 13px; padding: 0 8px; }
}


/* ----------------------------------------------------------
   7. 푸터
   사이트맵 5열의 영문 메뉴명이 길어 한 줄이 넘치므로
   열 최대폭을 정하고 줄바꿈을 허용한다.
   ---------------------------------------------------------- */
html[lang="en"] footer .f_top .ad_sub_wr { gap: 28px 34px; }
html[lang="en"] footer .f_top .ad_sub_wr .f_nav { max-width: 190px; }
html[lang="en"] footer .f_top .ad_sub_wr .f_nav li a { font-size: 15px; line-height: 1.4; word-break: normal; }
html[lang="en"] footer .f_top .ad_sub_L .info dl dt { flex-basis: 90px; width: 90px; word-break: normal; }
html[lang="en"] footer .f_top .ad_sub_L .info dl dd { width: calc(100% - 90px); word-break: normal; }

@media (max-width: 1600px) {
	html[lang="en"] footer .f_top .ad_sub_wr { gap: 24px 28px; }
	html[lang="en"] footer .f_top .ad_sub_wr .f_nav { max-width: 170px; }
	html[lang="en"] footer .f_top .ad_sub_wr .f_nav li a { font-size: 14px; }
	html[lang="en"] footer .f_top .ad_sub_L .info dl dt { flex-basis: 70px; width: 70px; }
	html[lang="en"] footer .f_top .ad_sub_L .info dl dd { width: calc(100% - 70px); }
}
@media (max-width: 1200px) {
	/* 1200 이하 : 주소 블록이 가로로 늘어서므로 dt/dd 고정폭을 푼다 */
	html[lang="en"] footer .f_top .ad_sub_L .info dl dt { flex: 0 0 auto; width: auto; }
	html[lang="en"] footer .f_top .ad_sub_L .info dl dd { flex: 0 1 auto; width: auto; }
	html[lang="en"] footer .f_top .ad_sub_wr .f_nav { min-width: 130px; max-width: 165px; }
}
@media (max-width: 768px) {
	html[lang="en"] footer .f_top .ad_sub_L .info dl dt { flex: 0 0 62px; width: 62px; }
	html[lang="en"] footer .f_top .ad_sub_L .info dl dd { flex: 1 1 auto; width: calc(100% - 62px); }
}
html[lang="en"] footer .f_bott ul.priv_wr li a { word-break: normal; }


/* ----------------------------------------------------------
   8. 메인 퀵메뉴 (#quick)
   2×2 그리드에 라벨이 들어가는데 영문이 길어 넘친다.
   글자를 줄이고 줄바꿈을 허용한다.
   ---------------------------------------------------------- */
html[lang="en"] #quick.active{right: 10px;}
html[lang="en"] #quick .qList{gap: 0; padding: 10px 0 10px 50px;}
html[lang="en"] #quick .qList li { padding: 6px 6px; }
html[lang="en"] #quick .qList li dl dd { line-height: 1.25; text-align: center; word-break: normal; }
html[lang="en"] #quick .qList li dl dd.txt_l { font-size: 12px; }
html[lang="en"] #quick .qList li dl dd.txt_s { font-size: 11px; }
html[lang="en"] #quick .qList li dl dt img { width: 46px; }

@media (max-width: 768px) {
	html[lang="en"] #quick .qList li dl dt img{width: 38px;}
}
@media (max-width: 500px) {
	html[lang="en"] #quick .qList{padding: 10px 0 10px 36px;}
	html[lang="en"] #quick .qList li dl dt img{width: 30px;}
	html[lang="en"] #quick .qList li dl dd.txt_l{font-size: 10px;}
}
/* ----------------------------------------------------------
   9. 본문 공통 — 표 · 교과목 카드
   국문 기준으로 잡힌 고정 자간/줄바꿈을 영문에 맞춘다.
   ---------------------------------------------------------- */
html[lang="en"] .table th,
html[lang="en"] .table td { word-break: normal; letter-spacing: 0; }

/* 교과과정 표의 과목 나열 — 영문명이 길어 한 줄에 안 들어간다 */
html[lang="en"] .subj-class-list p { line-height: 1.5; word-break: normal; }

/* 교과목 소개 카드 */
html[lang="en"] .cu_list li .tit h4 { line-height: 1.35; word-break: normal; }
html[lang="en"] .cu_list li .cont { word-break: normal; }

/* 학과소개 상단 타이틀 — 영문 정식명(Department of …)이 길다 */
html[lang="en"] #sMajor .depart_wr .left .tit .eng { line-height: 1.35; word-break: normal; }
html[lang="en"] #sMajor .depart_wr .left .tit h5 { line-height: 1.25; word-break: normal; }

/* 목록형 본문(.dott_list) */
html[lang="en"] .dott_list li p { word-break: normal; line-height: 1.6; }


/* ----------------------------------------------------------
   10. 조직도 (.org — eng1_3 비전 및 목표)
   .node 는 inline-flex 라 내용만큼 늘어난다. 영문 학과명
   (Department of Industrial Convergence Security 등)이 길어
   가로 스크롤이 과도해지므로 최대폭을 두고 줄바꿈시킨다.
   ---------------------------------------------------------- */
html[lang="en"] .org .node { max-width: 300px; font-size: 17px; padding: 26px 18px; }
html[lang="en"] .org .node.lv1 { max-width: 340px; font-size: 19px; }
html[lang="en"] .org .node.lv4 { max-width: 260px; font-size: 16px; padding: 26px 18px; }

@media (max-width: 1200px) {
	html[lang="en"] .org .node { max-width: 260px; font-size: 16px; }
	html[lang="en"] .org .node.lv1 { max-width: 300px; font-size: 17px; }
	html[lang="en"] .org .node.lv4 { max-width: 230px; font-size: 15px; }
}
@media (max-width: 768px) {
	html[lang="en"] .org .node { max-width: 230px; font-size: 15px; padding: 22px 14px; }
	html[lang="en"] .org .node.lv1 { max-width: 260px; font-size: 16px; }
	html[lang="en"] .org .node.lv4 { max-width: 210px; font-size: 14px; padding: 22px 14px; }
}


/* ----------------------------------------------------------
   11. eng1_3 상단 카드 (.plus) · 특징 카드 (.con)
   ---------------------------------------------------------- */
html[lang="en"] #sVis .plus h4 { line-height: 1.35; word-break: normal; }
html[lang="en"] #sVis .cont_box .con dt h4 { line-height: 1.35; word-break: normal; }
html[lang="en"] #sVis .serv .txt_box .tit h5 { line-height: 1.3; word-break: normal; }
html[lang="en"] #sVis .chk_list li p { word-break: normal; line-height: 1.55; }

/* ----------------------------------------------------------
   12. 메인페이지 (index)
   ---------------------------------------------------------- */
html[lang="en"] #mPart .mPart_btn .ko{font-size: 17px; text-align: left;}
@media (max-width: 1600px) {
	html[lang="en"] #mPart .mPart_item{width: 330px;}
	html[lang="en"] #mPart .mPart_item.active{width: 500px;}
	html[lang="en"] #mPart .mPart_detail h3{font-size: 22px;}
}
@media (max-width: 1200px) {
	html[lang="en"] #mPart .mPart_item{width: 100%;}
	html[lang="en"] #mPart .mPart_item.active{width: 100%;}
}
@media (max-width: 768px) {
	html[lang="en"] #mPart .mPart_btn .ko{font-size: 14px;}
	html[lang="en"] #mPart .mPart_detail h3{font-size: 16px;}
}
/* ----------------------------------------------------------
   13. 입학안내 (eng1_4)
   ---------------------------------------------------------- */
html[lang="en"] #sAdmis .pdf_down{max-width: 480px;}
html[lang="en"] #sAdmis .pdf_down a p{font-size: 20px;}

@media (max-width: 768px) {
	html[lang="en"] #sAdmis .pdf_down{max-width: 240px;}
	html[lang="en"] #sAdmis .pdf_down a p{font-weight: 500; font-size: 15px; text-align: center;}
}