@charset "utf-8";
/* ============================================================================
   en.css — 영문 페이지 전용 보정 CSS
   ----------------------------------------------------------------------------
   · head.sub.php 에서 G5_LANG === 'en' 일 때만 로드된다.
   · 모든 선택자를 html[lang="en"] 으로 한정하므로 국문 페이지에는 전혀 영향이 없다.
   · 국문 CSS(reset / main / sub / nav.css)는 한 줄도 고치지 않는다.
   · 여기 있는 규칙은 "영문 텍스트가 길어져서 깨지는 곳"만 보정한다.
     레이아웃 구조(배치·순서·컬럼 수)는 국문과 동일하게 유지한다.
   · 브레이크포인트는 국문과 동일 : 1600 / 1400 / 1200 / 1024 / 768 / 500
   · reset.css 에 전역 box-sizing:border-box 가 없으므로
     width:100% + padding 을 쓸 때는 반드시 box-sizing 을 함께 적는다.
   ============================================================================ */

/* ============================================================================
   00. 공통 — 한글용 자간 축소 해제
   국문 CSS 의 letter-spacing:-.5px 는 한글 가독성용이라 영문에서는 글자가 붙어 보인다.
   ============================================================================ */
html[lang="en"] .is-tab__txt,
html[lang="en"] .nam-tab__txt,
html[lang="en"] .is-diagram__hub,
html[lang="en"] .gr-headline,
html[lang="en"] .nam-major__ko,
html[lang="en"] .lnb .lnb-map li.depth a span,
html[lang="en"] .lnb .lnb-map li.depth ul li a { letter-spacing: 0; }


/* ============================================================================
   01. 상단 GNB (#cssmenu)
   대메뉴 : About / Faculty / Education / Research / Community / Alumni
   소메뉴 : "What is Convergence Security?" 처럼 길어 고정폭 드롭다운을 넘친다.
   → 드롭다운 폭을 내용에 맞추고(nowrap) 국문의 고정폭 지정을 해제한다.
   ============================================================================ */
html[lang="en"] #cssmenu > ul > li > ul,
html[lang="en"] #cssmenu > ul > li.menu01 > ul,
html[lang="en"] #cssmenu > ul > li.menu02 > ul,
html[lang="en"] #cssmenu > ul > li.menu03 > ul,
html[lang="en"] #cssmenu > ul > li.menu04 > ul,
html[lang="en"] #cssmenu > ul > li.menu05 > ul,
html[lang="en"] #cssmenu > ul > li.menu06 > ul { width: auto; min-width: 190px; max-width: 320px; }
html[lang="en"] #cssmenu > ul > li > ul > li > a { white-space: nowrap; }

/* 마지막 두 메뉴의 드롭다운이 화면 오른쪽으로 넘치지 않도록 오른쪽 기준으로 편다 */
html[lang="en"] #cssmenu > ul > li.menu05 > ul,
html[lang="en"] #cssmenu > ul > li.menu06 > ul { left: auto; right: 0; transform-origin: 100% 0; }


/* ============================================================================
   02. 전체메뉴(allmenu) — 소메뉴가 가로 나열이라 영문에서 한 줄을 넘친다
   ============================================================================ */
html[lang="en"] .allmenu h1 > a{background: url('/images/main/logo_w_EN.png') 0% 0% / contain no-repeat;}
html[lang="en"] .allmenu .allmenuwrap .boxwrap > ul { display: flex; flex-wrap: wrap; row-gap: 6px; }
html[lang="en"] .allmenu .allmenuwrap .boxwrap > ul > li > a { white-space: nowrap; }


/* ============================================================================
   03. 서브 LNB (#location .lnb)
   .lnb-map > li 가 300px 고정이고 span 은 padding 0 30% 0 30px 라 실제 글자폭이 좁다.
   영문은 두 줄까지 자연스럽게 떨어지도록 글자와 여백만 줄인다. (구조 변경 없음)
   ============================================================================ */
html[lang="en"] .lnb .lnb-map li.depth a span { font-size: 16px; padding: 0 22% 0 24px; }
html[lang="en"] .lnb .lnb-map li.depth ul li a { font-size: 15px; padding: 7px 24px; }


/* ============================================================================
   04. 메인 비주얼 학과버튼 (#visual .vMore_btn)
   국문 6~7자 → 영문 "Industrial Security Management" (30자) 라 22px 로는 넘친다.
   ============================================================================ */
html[lang="en"] #visual .vMore_btn li a { font-size: 19px; line-height: 1.25; }
html[lang="en"] #visual .vMore_btn li a span { font-size: 14px; margin-top: 6px; }


/* ============================================================================
   05. 퀵메뉴 (#quick .qList) — "Academic Information" / "Online Certificates"
   ============================================================================ */
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;}
}

/* ============================================================================
   06. eng1_1 — What is Convergence Security?
   ============================================================================ */
/* 탭 라벨이 국문보다 3~4배 길다 */
html[lang="en"] .is-tab__txt { font-size: 17px; line-height: 1.3; }

/* 비교표 태그(Information Security / Physical Security / Convergence Security) */
html[lang="en"] .is-diff__tag { flex: 0 0 190px; font-size: 16px; letter-spacing: 0; line-height: 1.3; }

/* 원형 다이어그램 — 원 크기는 그대로 두고 글자만 줄여 원 안에 들어가게 한다.
   sub.css 와 인라인 style 이 섞여 있어 !important 가 필요하다. */
html[lang="en"] .is-diagram__hub  { font-size: 17px !important; line-height: 1.25; }
html[lang="en"] .is-diagram__core { font-size: 12px; line-height: 1.2; padding: 0 6px; }
html[lang="en"] .is-diagram__sat  { font-size: 12px; line-height: 1.15; padding: 0 6px; }

/* 도넛 차트 안 문구 */
html[lang="en"] .is-donut__txt b { font-size: 24px; }
html[lang="en"] .is-donut__txt span { font-size: 14px; }
html[lang="en"] .is-legend li { font-size: 15px; }


/* ============================================================================
   07. eng1_2 — About the Department
   ============================================================================ */
html[lang="en"] .gr-eyebrow { letter-spacing: 0; }
html[lang="en"] .gr-headline { line-height: 1.25; }
html[lang="en"] .tl-card__tit { font-size: 21px; line-height: 1.35; }
html[lang="en"] .gr-sign { line-height: 1.5; }


/* ============================================================================
   08. eng3_1_a/_b/_c — About the Department (Education)
   ============================================================================ */
/* 세부 전공 탭 : "Industrial Security Management" 가 94px 높이 안에서 두 줄로 떨어진다 */
html[lang="en"] .nam-tab { height: auto; min-height: 94px; padding: 14px 12px; }
html[lang="en"] .nam-tab__txt { font-size: 18px; line-height: 1.3; }

/* 전공 제목 50px → 영문은 두 줄로 길어져 넘치므로 축소 */
html[lang="en"] .nam-major__ko { font-size: 38px; line-height: 1.2; }
html[lang="en"] .nam-major__en { font-size: 32px; }
html[lang="en"] .nam-major__kw li { font-size: 15px; }

/* 학과구성도 : 영문 학과명이 길어 노드 폭을 넘친다 */
html[lang="en"] .nam-org__node,
html[lang="en"] .nam-org__leaf { font-size: 15px; line-height: 1.35; }
html[lang="en"] .nam-org__leaf .sub { font-size: 12px; line-height: 1.3; }


/* ============================================================================
   09. eng3_2 — Curriculum
   교과목명이 국문보다 2~3배 길어 표가 눌린다. 최소폭을 키우고 글자를 줄인다.
   (가로 스크롤 안내 오버레이는 tail.php 스크립트가 그대로 처리한다)
   ============================================================================ */
html[lang="en"] .nam-table { min-width: 900px; }
html[lang="en"] .nam-table th,
html[lang="en"] .nam-table td { letter-spacing: 0; }
html[lang="en"] .nam-course-list li,
html[lang="en"] .nam-common-list li { font-size: 15px; line-height: 1.5; }
html[lang="en"] .nam-credit-table { min-width: 760px; }
html[lang="en"] .nam-credit-table .credit-desc { font-size: 12px; line-height: 1.35; }


/* ============================================================================
   10. eng3_4 — Admissions
   ============================================================================ */
html[lang="en"] .nam-admission-table { min-width: 820px; }
html[lang="en"] .nam-contact-name { font-size: 19px; line-height: 1.35; }


/* ============================================================================
   11. eng4_1 — Research Areas & Labs
   ============================================================================ */
html[lang="en"] .rlab-card__name { line-height: 1.25; }
html[lang="en"] .rlab-card__prof { line-height: 1.4; }
html[lang="en"] .rlab-card__tags li { font-size: 13px; }


/* ============================================================================
   12. eng4_2 — International Exchange
   ============================================================================ */
html[lang="en"] .partner-name { line-height: 1.35; }


/* ============================================================================
   13. 푸터 — 영문 주소가 길어 한 줄을 넘친다
   ============================================================================ */
html[lang="en"] footer .info dl dd { line-height: 1.5; }
html[lang="en"] footer .select_footer ul li a { white-space: nowrap; }


/* ============================================================================
   ▣ 반응형 보정 (국문과 동일한 브레이크포인트)
   ============================================================================ */

/* ============================== max-width : 1600 ============================== */
@media (max-width: 1820px) {
	html[lang="en"] #cssmenu > ul{gap: 0;}
	html[lang="en"] #cssmenu > ul > li > a{font-size: 15px;}
}

@media (max-width: 1600px) {
	html[lang="en"] #cssmenu > ul > li > ul,
	html[lang="en"] #cssmenu > ul > li.menu02 > ul,
	html[lang="en"] #cssmenu > ul > li.menu03 > ul { width: auto; min-width: 180px; }

	html[lang="en"] #visual .vMore_btn li a { font-size: 18px; }
	html[lang="en"] .nam-major__ko { font-size: 32px; }
	html[lang="en"] .nam-major__en { font-size: 26px; }
	html[lang="en"] .is-tab__txt { font-size: 16px; }
}

/* ============================== max-width : 1400 ============================== */
@media (max-width: 1400px) {
	/* 대메뉴 6개가 영문으로 길어져 로고·우측 유틸과 부딪히는 구간 */
	html[lang="en"] #cssmenu > ul { gap: 6px; padding: 0 10px; }
	html[lang="en"] #cssmenu > ul > li > a { font-size: 15px; padding: 12px 12px; }
	html[lang="en"] #cssmenu > ul > li > ul { min-width: 170px; }
	html[lang="en"] #cssmenu > ul > li > ul > li > a { font-size: 14px; }

	html[lang="en"] .lnb .lnb-map li.depth a span { font-size: 15px; padding: 0 20% 0 20px; }
	html[lang="en"] .is-diff__tag { flex: 0 0 170px; font-size: 15px; }
	html[lang="en"] .nam-tab__txt { font-size: 16px; }
	html[lang="en"] .tl-card__tit { font-size: 19px; }
}

/* ============================== max-width : 1200 ============================== */
/* 1200 이하는 상단 GNB 가 숨고 전체메뉴(햄버거)로 바뀌므로 GNB 보정은 불필요 */
@media (max-width: 1200px) {
	html[lang="en"] .allmenu .allmenuwrap .boxwrap > ul > li > a { font-size: 16px; }

	html[lang="en"] #visual .vMore_btn li a { font-size: 17px; }
	html[lang="en"] #visual .vMore_btn li a span { font-size: 13px; }

	html[lang="en"] .nam-major__ko { font-size: 28px; }
	html[lang="en"] .nam-major__en { font-size: 22px; }
	html[lang="en"] .is-diagram__hub  { font-size: 16px !important; }
	html[lang="en"] .is-diagram__core { font-size: 11px; }
	html[lang="en"] .is-diagram__sat  { font-size: 11px; }
}

/* ============================== max-width : 1024 ============================== */
@media (max-width: 1024px) {
	html[lang="en"] .is-tab__txt { font-size: 15px; }
	html[lang="en"] .is-diff__tag { flex: 0 0 150px; font-size: 14px; }
	html[lang="en"] .nam-tab__txt { font-size: 15px; }
	html[lang="en"] .nam-major__ko { font-size: 24px; }
	html[lang="en"] .nam-major__en { font-size: 19px; }
	html[lang="en"] .tl-card__tit { font-size: 18px; }
	html[lang="en"] .nam-org__node,
	html[lang="en"] .nam-org__leaf { font-size: 14px; }
}

/* ============================== max-width : 768 ============================== */
@media (max-width: 768px) {
	html[lang="en"] #visual .vText{bottom: 125px;}
	html[lang="en"] #visual .vMore_btn li{height: 90px;}
	html[lang="en"] #visual .vMore_btn li a { font-size: 14px; line-height: 1.2; }
	/* 이 폭부터 비교표가 세로로 쌓이므로 태그는 폭을 풀고 좌우 여백만 준다 */
	html[lang="en"] .is-diff__tag { flex: none; min-width: 160px; padding: 6px 16px; font-size: 14px; }

	html[lang="en"] .is-tab__txt { font-size: 14px; }
	html[lang="en"] .nam-tab__txt { font-size: 14px; }
	html[lang="en"] .nam-major__ko { font-size: 22px; }
	html[lang="en"] .nam-major__en { font-size: 17px; }
	html[lang="en"] .tl-card__tit { font-size: 17px; }
	html[lang="en"] .rlab-card__tags li { font-size: 12px; }

	/* 모바일 GNB 언어전환 버튼 */
	html[lang="en"] #gnbM .mUtil .mUtil-lang { font-size: 13px; padding: 5px 12px; }
}

/* ============================== max-width : 500 ============================== */
@media (max-width: 500px) {
	/* 학과버튼 : 72px 높이 안에 아이콘 + 두 줄 제목 + 보조문구가 모두 들어가야 한다 */
	html[lang="en"] #visual .vText .vMain_txt h1{font-size: 18px;}
	html[lang="en"] #visual .vMore_btn li a span { font-size: 11px; margin-top: 2px; }

	/* LNB 2차 라벨 : "What is Convergence Security?" 가 70px 높이를 넘지 않게 */
	html[lang="en"] .lnb .lnb-map li.depth a span { font-size: 13px; line-height: 1.25; padding: 0 18% 0 16px; }

	html[lang="en"] .is-tab__txt { font-size: 13px; }
	html[lang="en"] .nam-tab__txt { font-size: 13px; }
	html[lang="en"] .is-diff__tag { min-width: 140px; font-size: 13px; }
	html[lang="en"] .nam-major__ko { font-size: 20px; }
	html[lang="en"] .nam-major__en { font-size: 15px; }
	html[lang="en"] .is-diagram__hub  { font-size: 13px !important; }
	html[lang="en"] .is-diagram__core { font-size: 10px; }
	html[lang="en"] .is-diagram__sat  { font-size: 10px; }
	html[lang="en"] .nam-org__node,
	html[lang="en"] .nam-org__leaf { font-size: 13px; }
	html[lang="en"] .nam-contact-name { font-size: 17px; }

	html[lang="en"] .gr-closing__text,
	html[lang="en"] .gr-sign strong,
	html[lang="en"] .gr-sign{font-size: 15px;font-weight: 400;}
	html[lang="en"] .gr-sign{margin-right: 20px;}
	html[lang="en"] .gr-closing{padding: 20px;}

	html[lang="en"] .gr-headline{font-size: 18px;}
}

/* ============================== max-width : 430 ==============================
   국문 사이트의 최저 브레이크포인트는 500 이지만, 실제 휴대폰 폭(360~430)에서는
   영문 문장이 한 단계 더 길어져 학과버튼·LNB 라벨이 고정 높이를 넘는다.
   국문에서는 넘치지 않는 구간이라 영문에서만 한 단계 더 줄인다.
   ============================================================================ */
@media (max-width: 430px) {
	html[lang="en"] #visual .vMore_btn li a { font-size: 12px; line-height: 1.2; }
	html[lang="en"] #visual .vMore_btn li a span { font-size: 10px; margin-top: 1px; }
	html[lang="en"] .lnb .lnb-map li.depth a span { font-size: 12px; line-height: 1.2; padding: 0 14% 0 12px; }
}

/* ============================== max-width : 414 ============================== */
@media (max-width: 414px) {
	html[lang="en"] .lnb .lnb-map li.depth a span { font-size: 11px; padding: 0 12% 0 10px; }
}