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

/* ----------------------------------------------------------
   0. 공통 타이포 — 국문용 음수 자간·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 {
	letter-spacing: 0;
	word-break: normal;
	overflow-wrap: break-word;
}
/* 아주 긴 단어(URL·복합어)만 강제로 끊는다 */
html[lang="en"] .is-edutable td,
html[lang="en"] .cu-table td,
html[lang="en"] .cu-chip,
html[lang="en"] .mj-tag {
	overflow-wrap: anywhere;
}

/* ----------------------------------------------------------
   1. 상단 GNB
   대메뉴명(About / Faculty / Education / Specializations / Community / Alumni)이
   국문(학과소개·교수·교육·전공영역·커뮤니티·동문회)보다 조금 길 뿐이라
   글자 크기는 국문(18px)을 그대로 두고 좌우 여백·간격만 살짝 줄인다.
   ---------------------------------------------------------- */
html[lang="en"] #cssmenu > ul { gap: 20px; padding: 0 16px; }
html[lang="en"] #cssmenu > ul > li > a { font-size: 18px; padding: 12px 16px; white-space: nowrap; }

/* 2차 메뉴(드롭다운)
   · 국문 기준 고정폭(124~220px)을 버리고 가장 긴 항목에 맞춘 자동 폭 → 항상 한 줄.
   · min-width 를 주면 항목이 짧은 메뉴(Community 등)만 상자가 남아돌아
     오른쪽 여백이 다른 메뉴와 달라지므로 0 으로 되돌린다.
   · 국문 링크의 padding-right:20px(예비 여백)도 없앤다. 그래야 상자 안 오른쪽
     여백이 ul 의 padding-right(17px) 하나로 통일되어 좌우·메뉴별로 모두 같아진다. */
html[lang="en"] #cssmenu > ul > li > ul { width: auto; min-width: 0; }
html[lang="en"] #cssmenu > ul > li > ul > li > a { font-size: 15px; line-height: 1.6; white-space: nowrap; padding-right: 0; }

@media (max-width: 1600px) {
	html[lang="en"] #cssmenu > ul { gap: 14px; padding: 0 10px; }
	html[lang="en"] #cssmenu > ul > li > a { font-size: 16px; padding: 12px 14px; }
	/* 폭은 위에서 내용에 맞춰 자동 계산되므로 구간별 고정값을 두지 않는다 */
}
/* GNB 는 1400px 아래에서 햄버거 메뉴로 바뀌므로, 그 직전 구간만 한 번 더 줄인다 */
@media (max-width: 1460px) {
	html[lang="en"] #cssmenu > ul { gap: 8px; padding: 0; }
	html[lang="en"] #cssmenu > ul > li > a { font-size: 15px; padding: 12px 10px; }
}

/* 전체메뉴(PC) · 모바일 GNB */
html[lang="en"] .allmenu h1 a {background: url("/images/common/LOGO_w_EN.png") no-repeat; font-size: 20px; line-height: 1.3; word-break: normal; }
html[lang="en"] .allmenuwrap .boxwrap h2 a { line-height: 1.25; }
html[lang="en"] .allmenuwrap .boxwrap ul li a { line-height: 1.5; word-break: normal; }
html[lang="en"] #gnbM .gnbDiv .one,
html[lang="en"] #gnbM .gnbDiv .oneOnly { line-height: 1.35; word-break: normal; }
html[lang="en"] #gnbM .gnbDiv .twoD { line-height: 1.4; word-break: normal; }

@media (max-width: 500px) {
	html[lang="en"] .allmenu h1 a { font-size: 17px; }
}

/* ----------------------------------------------------------
   2. 서브 비주얼 타이틀 · LNB
   ---------------------------------------------------------- */
html[lang="en"] #sVisual .slogan .big-tit { font-size: 38px; line-height: 1.15; letter-spacing: -.2px; }
@media (max-width: 1024px) { html[lang="en"] #sVisual .slogan .big-tit { font-size: 32px; } }
@media (max-width: 768px)  { html[lang="en"] #sVisual .slogan .big-tit { font-size: 26px; } }
@media (max-width: 500px)  { html[lang="en"] #sVisual .slogan .big-tit { font-size: 22px; } }

/* 경로(LNB) 드롭다운 — 영문 메뉴명이 길어 폭을 늘린다 */
html[lang="en"] .lnb .depth > a span { white-space: nowrap; }
html[lang="en"] .lnb .moreMenu { min-width: 260px; }
html[lang="en"] .lnb .moreMenu a { white-space: nowrap; }
@media (max-width: 768px) {
	html[lang="en"] .lnb .moreMenu { min-width: 220px; }
	html[lang="en"] .lnb .moreMenu a { white-space: normal; line-height: 1.4; }
}

/* 경로(LNB) 현재 위치 표시 — 좁은 화면에서 2차 메뉴명이 알약 밖으로 삐져나가지 않게
   말줄임표(…)로 자른다. 국문 규칙이 display:flex 라 말줄임이 먹지 않으므로
   block + line-height 로 바꿔 세로 가운데 정렬을 유지한다. (알약 높이 = 60 / 38px) */
@media (max-width: 1170px) {
	html[lang="en"] .lnb .lnb-map li.depth > a > span {
		display: block;
		line-height: 60px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
@media (max-width: 767px) {
	html[lang="en"] .lnb .lnb-map li.depth > a > span { line-height: 38px; }
}

/* ----------------------------------------------------------
   3. sub1_1 산업보안이란? (.is-)
   ---------------------------------------------------------- */
html[lang="en"] .is-tab__txt { line-height: 1.3; }
/* 단계 번호 원(01·02·03) — 영문 제목이 길어지면 flex 아이템이 줄어들며
   원이 타원으로 눌린다. 크기를 고정해 항상 정원으로 유지한다. */
html[lang="en"] .is-pane__num { flex: 0 0 40px; }
@media (max-width: 767px) { html[lang="en"] .is-pane__num { flex: 0 0 48px; } }
html[lang="en"] .is-hero__desc { line-height: 1.65; }

/* 원형 다이어그램 — 영문은 글자가 길어 폰트를 줄인다 */
html[lang="en"] .is-diagram__hub  { font-size: 17px; line-height: 1.2; }
html[lang="en"] .is-diagram__core { font-size: 13px; line-height: 1.25; padding: 6px; }
html[lang="en"] .is-diagram__sat  { font-size: 13px; line-height: 1.2; padding: 4px; }
@media (max-width: 1400px) {
	html[lang="en"] .is-diagram__hub  { font-size: 15px; }
	html[lang="en"] .is-diagram__core { font-size: 12px; }
	html[lang="en"] .is-diagram__sat  { font-size: 12px; }
}
@media (max-width: 1200px) {
	html[lang="en"] .is-diagram__core { font-size: 11px; }
	html[lang="en"] .is-diagram__sat  { font-size: 11px; }
}
@media (max-width: 980px) {
	/* 이 구간부터는 원이 아니라 블록으로 떨어지므로 크기를 되돌린다 */
	html[lang="en"] .is-diagram__hub  { font-size: 20px; }
	html[lang="en"] .is-diagram__core { font-size: 15px; }
	html[lang="en"] .is-diagram__sat  { font-size: 14px; }
}

/* 비교 태그 · 표 */
html[lang="en"] .is-diff__tag { white-space: nowrap; }
html[lang="en"] .is-edutable { min-width: 860px; }
html[lang="en"] .is-edutable th,
html[lang="en"] .is-edutable td { line-height: 1.45; }
@media (max-width: 980px) { html[lang="en"] .is-edutable { min-width: 800px; } }

/* 통계 카드 */
html[lang="en"] .is-chart__cap b { white-space: nowrap; }
html[lang="en"] .is-legend li { white-space: nowrap; }

/* ----------------------------------------------------------
   4. sub1_2 인사말 (.gr-)
   ---------------------------------------------------------- */
html[lang="en"] .gr-headline { line-height: 1.25; }
/* 모바일에서는 영문 헤드라인이 화면을 가득 채워 답답하므로 18px 로 줄인다 */
@media (max-width: 767px) { html[lang="en"] .gr-headline { font-size: 18px; line-height: 1.45; letter-spacing: 0; } }
@media (max-width: 400px) { html[lang="en"] .gr-headline { font-size: 17px; } }
html[lang="en"] .gr-lead,
html[lang="en"] .gr-reveal { line-height: 1.75; }
html[lang="en"] .gr-block__tit { line-height: 1.3; }
html[lang="en"] .gr-stat__label { line-height: 1.4; word-break: normal; }
html[lang="en"] .gr-closing__text { line-height: 1.5; }

/* ----------------------------------------------------------
   5. sub1_3 비전 (.ov- / .thero / .obj-)
   ---------------------------------------------------------- */
html[lang="en"] .ov-state { line-height: 1.35; }
html[lang="en"] .goal-legend h3 { line-height: 1.3; }
html[lang="en"] .gcard h4 { line-height: 1.3; }
html[lang="en"] .gcard .gt { line-height: 1.35; word-break: normal; }
html[lang="en"] .bases .base b { line-height: 1.3; }
html[lang="en"] .bases .base span { line-height: 1.5; }
html[lang="en"] .pitem { line-height: 1.5; word-break: normal; }
html[lang="en"] .otab { white-space: nowrap; }
/* 탭 3개가 한 줄에 들어가면 영문 라벨(Learning Environment)이 잘린다.
   모바일에서는 한 줄에 하나씩(100%) 놓아 글자가 잘리지 않게 한다. */
@media (max-width: 768px) {
	html[lang="en"] .otabs { flex-wrap: wrap; gap: 8px; }
	html[lang="en"] .otab { flex: 1 1 100%; width: 100%; min-width: 0; white-space: normal; font-size: 16px; }
}
@media (max-width: 400px) {
	html[lang="en"] .otab { font-size: 15px; padding: 13px; }
}
html[lang="en"] .otitle { line-height: 1.35; }
html[lang="en"] .obj .t { line-height: 1.5; }

/* ----------------------------------------------------------
   6. sub1_4 구성도 (.org)
   ---------------------------------------------------------- */
html[lang="en"] .org-tab { line-height: 1.3; }
html[lang="en"] .org .node { line-height: 1.3; word-break: normal; }
html[lang="en"] .org .node.lv1 { font-size: 17px; }
html[lang="en"] .org .node.lv3,
html[lang="en"] .org .node.lv4 { font-size: 14px; }

/* ----------------------------------------------------------
   7. sub1_5 오시는 길 (.loc-)
   ---------------------------------------------------------- */
html[lang="en"] .loc-table .lk { white-space: nowrap; }
html[lang="en"] .loc-table .lv { line-height: 1.6; }
html[lang="en"] .loc-card ul li { line-height: 1.55; }
html[lang="en"] .loc-link-txt { line-height: 1.3; }

/* ----------------------------------------------------------
   8. sub1_6 발전기금 (#devel)
   ---------------------------------------------------------- */
html[lang="en"] #devel .devel-hero__copy h2 { line-height: 1.3; }
html[lang="en"] #devel .devel-card h3 { line-height: 1.3; }
html[lang="en"] #devel .devel-card p { line-height: 1.6; }

/* ----------------------------------------------------------
   9. sub3_1 교육과정 (.cu-)
   ---------------------------------------------------------- */
html[lang="en"] .cu-tab__txt { line-height: 1.3; }
html[lang="en"] .cu-chip { line-height: 1.35; white-space: normal; }
html[lang="en"] .cu-matrix { min-width: 1000px; }
html[lang="en"] .cu-matrix th,
html[lang="en"] .cu-matrix td { line-height: 1.45; }
html[lang="en"] .cu-table { min-width: 1080px; }
html[lang="en"] .cu-table th,
html[lang="en"] .cu-table td { line-height: 1.45; }
html[lang="en"] .cu-td-name { word-break: normal; }
html[lang="en"] .cu-acc__label { line-height: 1.3; }
/* Year 뱃지 + 제목을 좌우로 두면 영문(특히 Interdisciplinary)에서 제목이 밀린다.
   모바일에서는 뱃지를 윗줄, 제목을 아랫줄로 분리한다. */
@media (max-width: 768px) {
	html[lang="en"] .cu-acc__label { flex-direction: column; align-items: flex-start; gap: 6px; }
	html[lang="en"] .cu-acc__label b { flex: 0 0 auto; }
}
html[lang="en"] .cu-course__name { line-height: 1.35; }
html[lang="en"] .cu-course__desc { line-height: 1.65; }
html[lang="en"] .cu-group__tit { line-height: 1.35; }
@media (max-width: 768px) {
	html[lang="en"] .cu-matrix { min-width: 860px; }
	html[lang="en"] .cu-table  { min-width: 940px; }
}

/* ----------------------------------------------------------
   10. sub4_1~4_4 전공영역 (#major .mj-)
   ---------------------------------------------------------- */
html[lang="en"] .mj-intro__title { line-height: 1.2; }
html[lang="en"] .mj-intro__lead { line-height: 1.65; }
html[lang="en"] .mj-meta dt { white-space: nowrap; }
html[lang="en"] .mj-tag { line-height: 1.35; }
html[lang="en"] .mj-about__text { line-height: 1.75; }
html[lang="en"] .mj-about__keys li { line-height: 1.4; word-break: normal; }
html[lang="en"] .mj-fcard__tit { line-height: 1.3; }
html[lang="en"] .mj-fcard__desc { line-height: 1.6; }

/* ----------------------------------------------------------
   11. 교수진 · 게시판 스킨(.lab-) 영문 보정
   ---------------------------------------------------------- */
html[lang="en"] .lab-wrap.lab-pf .pf-name { line-height: 1.25; }
html[lang="en"] .lab-wrap.lab-pf .pf-name .en { display: inline-block; margin-left: 8px; font-size: 17px; }
html[lang="en"] .lab-pf .pf-cont dd { line-height: 1.55; word-break: normal; }
html[lang="en"] .lab-pf .pf-bott dl.exper li { line-height: 1.55; }
html[lang="en"] .lab-pf .pf-bott dl.cour dd span { line-height: 1.4; }
html[lang="en"] .lab-wrap.lab-pf .pf-tab { padding: 12px 18px; font-size: 15px; }
html[lang="en"] .lab-pm-card .name { line-height: 1.25; }
html[lang="en"] .lab-pm-card .bott_list li p { line-height: 1.55; }

/* ----------------------------------------------------------
   11-2. 메인 히어로 타이틀 (#section0 .visual_txt .big)
   국문("중앙대학교" / "산업보안학과입니다")은 한 줄에 들어가지만
   영문("Chung-Ang University" / "Department of Industrial Security")은
   어느 폭에서도 한 줄에 들어가지 않는다. 고정 height + overflow-y:hidden 이라
   그대로 두면 둘째 줄이 잘리므로, 마스크 높이를 자동으로 바꾸고 글자를 조금 줄인다.
   (슬라이드업 등장 애니메이션은 그대로 동작한다)
   ---------------------------------------------------------- */
html[lang="en"] #section0 .visual_txt .big { height: auto; font-size: 52px; line-height: 1.1; }
@media (max-width: 1600px) { html[lang="en"] #section0 .visual_txt .big { height: auto; font-size: 42px; } }
@media (max-width: 1200px) { html[lang="en"] #section0 .visual_txt .big { height: auto; font-size: 34px; } }
@media (max-width: 991px)  { html[lang="en"] #section0 .visual_txt .big { height: auto; font-size: 29px; } }
@media (max-width: 768px)  { html[lang="en"] #section0 .visual_txt .big { height: auto; font-size: 24px; } }
@media (max-width: 564px)  { html[lang="en"] #section0 .visual_txt .big { height: auto; font-size: 21px; } }
@media (max-width: 500px)  { html[lang="en"] #section0 .visual_txt .big { height: auto; font-size: 19px; } }

/* ----------------------------------------------------------
   11-2b. 메인 비주얼 슬로건 구분선 (#section0 .slogan .line)
   국문은 좌측 문구가 짧아 "left:56% + max-width:623px" 절대위치 선이
   좌우 텍스트 사이에 놓였지만, 영문은 좌측 문구가 길어 선이 텍스트를 파고든다.
   → 좌·우 텍스트 사이의 남는 공간을 정확히 채우는 flex 아이템으로 바꾸고,
     5초 등장 애니메이션은 안쪽 가상요소(::after)로 그대로 유지한다.
   (선은 기존과 동일하게 768px 이하에서 숨겨진다)
   ---------------------------------------------------------- */
html[lang="en"] #section0 .slogan .line {
	position: static;
	left: auto;
	transform: none;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	max-width: none;
	height: 1px;
	background: transparent;
	margin: 0 40px 22px;
	overflow: hidden;
}
html[lang="en"] #section0 .slogan .line::after {
	content: '';
	display: block;
	width: 0;
	height: 1px;
	background: #fff;
	transition: width 5s ease;
}
html[lang="en"] #section0 .slogan.in-view .line::after { width: 100%; }
@media (max-width: 1600px) { html[lang="en"] #section0 .slogan .line { margin: 0 30px 20px; } }
@media (max-width: 1200px) { html[lang="en"] #section0 .slogan .line { margin: 0 24px 17px; } }
@media (max-width: 991px)  { html[lang="en"] #section0 .slogan .line { margin: 0 18px 14px; } }

/* ----------------------------------------------------------
   11-3. 메인 수치 — 연구비 "KRW 38 billion"
   국문은 숫자(380) + 단위(억) 두 덩어리라 74px 두 개로 충분했지만,
   영문은 통화(KRW) + 숫자(38) + 단위(billion) 세 덩어리라
   그대로 두면 줄바꿈된다. 통화·단위만 작게 하고 한 줄로 고정한다.
   ---------------------------------------------------------- */
html[lang="en"] #mNumber .num_box_wr .num_box .num_wr .num_txt--en {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 10px;
	flex-wrap: nowrap;
	white-space: nowrap;
}
html[lang="en"] #mNumber .num_box_wr .num_box .num_wr .num_txt--en h3.num { line-height: 1; }
html[lang="en"] #mNumber .num_box_wr .num_box .num_wr .num_txt--en .en-cur,
html[lang="en"] #mNumber .num_box_wr .num_box .num_wr .num_txt--en .en-unit {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
	color: #222;
}
@media (max-width: 1600px) {
	html[lang="en"] #mNumber .num_box_wr .num_box .num_wr .num_txt--en { gap: 8px; }
	html[lang="en"] #mNumber .num_box_wr .num_box .num_wr .num_txt--en .en-cur,
	html[lang="en"] #mNumber .num_box_wr .num_box .num_wr .num_txt--en .en-unit { font-size: 22px; }
}
@media (max-width: 991px) {
	html[lang="en"] #mNumber .num_box_wr .num_box .num_wr .num_txt--en { gap: 7px; }
	html[lang="en"] #mNumber .num_box_wr .num_box .num_wr .num_txt--en .en-cur,
	html[lang="en"] #mNumber .num_box_wr .num_box .num_wr .num_txt--en .en-unit { font-size: 19px; }
}
@media (max-width: 500px) {
	html[lang="en"] #mNumber .num_box_wr .num_box .num_wr .num_txt--en { gap: 5px; }
	html[lang="en"] #mNumber .num_box_wr .num_box .num_wr .num_txt--en .en-cur,
	html[lang="en"] #mNumber .num_box_wr .num_box .num_wr .num_txt--en .en-unit { font-size: 15px; }
}

/* ----------------------------------------------------------
   11-4. 메인 교수소개 카드 (#mPro)
   영문판은 국문 이름(.txt b)을 출력하지 않으므로 이름을 카드 위쪽에 붙이고
   (padding-top:0) 글자를 국문보다 작게 쓴다. 지정값 : 22px / padding-top 0.
   반응형 단계도 같은 방식(padding-top:0 유지 + 글자만 단계 축소)으로 맞춘다.
   국문 기준 : 32px → 26px(1600) → 24px(768) → 20px(400)
   영문 적용 : 22px → 20px(1600) → 18px(768) → 16px(400)
   padding-left(32/25/15px)는 국문 값을 그대로 쓴다.
   ---------------------------------------------------------- */
html[lang="en"] #mPro .pro_all .pro_list li a .txt .tit h4 { padding-top: 0; padding-bottom: 18px; font-size: 22px; }
html[lang="en"] #mPro .pro_all .pro_list li a .tag { margin-top: 16px; }
@media (max-width: 1600px) {
	html[lang="en"] #mPro .pro_all .pro_list li a .txt .tit h4 { padding-top: 0; padding-bottom: 14px; font-size: 20px; }
	html[lang="en"] #mPro .pro_all .pro_list li a .tag { margin-top: 12px; }
}
@media (max-width: 768px) {
	html[lang="en"] #mPro .pro_all .pro_list li a .txt .tit h4 { padding-top: 0; padding-bottom: 13px; font-size: 18px; }
	html[lang="en"] #mPro .pro_all .pro_list li a .tag { margin-top: 14px; }
}
@media (max-width: 400px) {
	html[lang="en"] #mPro .pro_all .pro_list li a .txt .tit h4 { padding-top: 0; padding-bottom: 12px; font-size: 16px; }
	html[lang="en"] #mPro .pro_all .pro_list li a .tag { margin-top: 8px; }
}

/* ----------------------------------------------------------
   11-5. 메인 하단 퀵메뉴 (#mQuick)
   4개 중 "Specializations" 만 길어서 좁은 폭에서 두 줄이 되어
   박스 높이가 어긋난다. 해당 구간만 글자를 줄여 한 줄로 맞춘다.
   ---------------------------------------------------------- */
@media (max-width: 991px) { html[lang="en"] #mQuick .wrap .box a h5 { font-size: 16px; } }
@media (max-width: 700px) { html[lang="en"] #mQuick .wrap .box a h5 { font-size: 14px; } }
/* 501~700px 구간은 4칸이 한 줄에 들어가 박스가 특히 좁다.
   "Specializations" 가 두 줄로 접히지 않도록 이 구간만 한 단계 더 줄인다. */
@media (max-width: 700px) and (min-width: 501px) {
	html[lang="en"] #mQuick .wrap .box a h5 { font-size: 13px; line-height: 1.25; }
}
@media (max-width: 564px) and (min-width: 501px) {
	html[lang="en"] #mQuick .wrap .box a h5 { font-size: 12px; }
}

/* ----------------------------------------------------------
   12. 푸터
   ---------------------------------------------------------- */
html[lang="en"] .footer_wr .f_info dl { align-items: baseline; }
html[lang="en"] .footer_wr .f_info dt { white-space: nowrap; }
html[lang="en"] .footer_wr .f_info dd { line-height: 1.6; word-break: normal; }
html[lang="en"] #m-link h3 { letter-spacing: 0; }
html[lang="en"] .select_footer ul li a { white-space: nowrap; }

/* ----------------------------------------------------------
   13. 공통 UI — 퀵메뉴 · 가로스크롤 안내
   ---------------------------------------------------------- */
html[lang="en"] .fixed_quick_list .quick_label { font-size: 13px; line-height: 1.25; word-break: normal; }
html[lang="en"] .hscroll-hint .hint-box { white-space: nowrap; }