@charset "utf-8";
/* *******************************************************
 * filename : language.css
 * description : 영문 CSS
 * date : 2020-11-24
******************************************************** */

/* ******************  Layout.css ********************** */
html[lang="en"]{}

/* -------- 본문 폰트 --------
 * Pretendard 를 최우선으로 둔다. 폰트 자체는 dtd.php 가 부르는
 * jsDelivr dynamic-subset CSS 가 @font-face 로 선언한다.
 *
 * html[lang="en"] 을 붙이는 이유
 *   layout.css 8행이 같은 선택자로 폰트를 지정하는데, 이 파일은 그보다
 *   뒤에 로드되지만 layout_responsive / content_responsive / common/*.css
 *   가 다시 뒤에 온다. 명시도를 올려 두면 로드 순서와 무관하게 유지된다.
 *
 * 뒤의 사슬은 layout.css 8행과 같게 남긴다. CDN 이 죽거나 해당 글자가
 * 서브셋에 없을 때 지금과 같은 모습으로 떨어지게 하기 위한 것이다.
 */
html[lang="en"] body,
html[lang="en"] table, html[lang="en"] th, html[lang="en"] td,
html[lang="en"] button, html[lang="en"] select,
html[lang="en"] input, html[lang="en"] textarea {
	font-family:'Pretendard', 'NEXON Lv2 Gothic', "나눔고딕", NanumGothic, "Nanum Gothic", "돋움", Dotum, Arial, sans-serif;
}

/* -------- Header :: GNB(PC) 대메뉴 폭 --------
 * layout.css 115~118행이 국문에 맞춰 잡혀 있다.
 *
 *   #gnb > ul > li      { width:204px; word-break:keep-all; }
 *   #gnb > ul > li > a  { padding:0 50px; font-size:19px; line-height:100px; }
 *
 * <a> 는 display:block 인데 width 지정이 없다. 그러면 폭이 auto 라 칸을
 * 채우고 남는 자리가 글자 몫이 된다. 곧 204 - 100 = 104px 뿐이다.
 * (이 사이트는 box-sizing 이 border-box 가 아니다. default.css 138~146행의
 *  border-box 는 input·select·textarea 에만 걸린다. 다만 width 가 auto 인
 *  블록에서는 box-sizing 과 무관하게 이 계산이 성립한다.)
 * 국문 대메뉴는 4글자(약 76px)라 들어가지만
 * "Business Areas"·"Customer Center" 는 넘쳐 공백에서 줄이 바뀐다.
 * height 와 line-height 가 100px 로 고정이라 둘째 줄이 아래 영역으로
 * 삐져나온다.
 *
 * 폭을 글자에 맞추고 좌우 여백을 40px 로 줄인다. 이것은 이 디자인이
 * layout_responsive.css 32~33행에서 좁은 화면에 이미 쓰는 값이다.
 * 새로 만든 것이 아니라 그 처리를 영문에서는 폭과 무관하게 쓰는 것이다.
 *
 */
html[lang="en"] #gnb > ul > li{width:auto;}
html[lang="en"] #gnb > ul > li > a{padding:0 40px; white-space:nowrap;}

/* -------- Header :: GNB(PC) 하위 목록 --------
 * .gnb-2dep 는 left:0 절대배치에 width:100%(=칸 폭)다. 한때 이것을
 * width:auto 로 바꿔 글자에 맞춰 늘렸더니, 오른쪽으로 자라 옆 칸을 덮었다.
 * total-menu 모드라 네 목록이 동시에 보이기 때문이다. 실제로 Products 의
 * 목록이 Customer Center 자리를 79px 침범했다.
 *
 * 칸을 넓혀 담는 방법은 쓸 수 없다. 접지 않으려면 대메뉴 합계가 878px
 * (넓은 화면)·736px(좁은 화면) 필요한데, KOR 과 안 겹치려면 554px 이하여야
 * 한다. 두 조건이 양립하지 않는다.
 *
 * 그래서 칸 폭으로 되돌리고 그 안에서 접는다.
 *   word-break:keep-all  낱말 안에서 쪼개지 않는다. 없으면 Surveilla/nce
 *                        처럼 끊긴다.
 *   padding 15 -> 8px    글자 자리를 좌우로 14px 번다.
 *   line-height 1.35     두 줄이 되어도 답답하지 않게.
 *
 * 제품 목록은 cs_goods 에서 만들어지고 이름이 길어 접히는 것이 남는다.
 * 긴 이름 다섯을 줄이는 것은 따로 다룬다.
 */
html[lang="en"] #gnb.total-menu > ul > li .gnb-2dep{width:100%;}
html[lang="en"] #gnb.total-menu > ul > li .gnb-2dep ul li a{
	white-space:normal;
	word-break:keep-all;
	line-height:1.35;
	padding:10px 8px;
}

/* -------- Header :: GNB(PC) 좁은 화면에서의 여백 --------
 * #gnb 는 화면 전체 폭에 가운데 정렬이고(layout.css 114행),
 * 우측 유틸(KOR|ENG|JPN, 검색, 사이트맵)은 right:45px 절대배치다
 * (layout.css 53행). 그래서 화면이 좁아지면 가운데 메뉴의 오른쪽 끝이
 * KOR 쪽으로 다가간다.
 *
 * 설계는 1366px 에서 둘을 함께 줄여 이 문제를 넘긴다. 국문은 대메뉴가
 * 624px 이라 1024px(모바일 전환)까지 겨우 버틴다 — 그 지점의 틈이 -5px
 * 이니 사실상 닿기 직전에 모바일로 바뀌는 셈이다.
 *
 * 영문은 대메뉴가 742px 이라 그 처리만으로는 모자라 1153px 에서 겹친다.
 * 여기서 한 번 더 줄인다.
 *
 *            대메뉴폭  틈@1366  틈@1200  틈@1024  겹침시작
 *   지금        742      106       24      -64     1153px
 *   이 규칙     554      201      118      +30      965px
 *
 * 겹침이 모바일 전환점(1024px) 아래로 내려가고, 1200px 에서 118px 여유가
 * 남아 붙어 보이지 않는다. 1024px 에서도 국문보다 넉넉하다.
 *
 * 글자를 17px 로 줄이고 여백을 22px 로 잡은 것은, 여백만 줄이면 항목
 * 사이가 34px 까지 좁아져 오히려 답답해지기 때문이다. 글자를 조금 줄이면
 * 사이가 44px 로 남는다.
 */
@media all and ( max-width: 1366px ){
	html[lang="en"] #gnb > ul > li > a{padding:0 22px; font-size:17px;}
}

/* -------- 본문 글자 --------
 * 국문과 영문의 CSS 가 완전히 같은데(17px, 행간 2.11, 자간 -0.35px, 상자
 * 1200px) 영문만 작아 보인다. 재어 보니 원인이 둘이었다.
 *
 * 1) 문자 체계
 *    한글은 글자가 em 상자를 거의 채워 17px 이면 실제로 17px 로 보인다.
 *    영문 소문자는 x-height 만 쓰므로 같은 17px 이 9px 남짓으로 보인다.
 *    글꼴 탓이 아니다 — Pretendard 의 x-height(53)는 폴백(51)이나
 *    Arial(52)보다 오히려 크다. 크기로 메우는 수밖에 없다.
 *
 * 2) 줄 길이
 *    .area 가 1200px 이라(layout.css 17행) 국문은 한 줄 72자로 알맞지만
 *    영문은 141자가 된다. 권장은 45~75자다. 줄이 길면 눈이 다음 줄
 *    첫머리를 못 찾아 글자가 더 작고 흩어져 보인다.
 *
 * 자간을 0으로 되돌리는 것은 음수 자간이 한글 조판 관행이기 때문이다.
 * 라틴 글자는 디자이너가 좌우 여백을 이미 잡아 두어 조이면 뭉갠다.
 * 행간을 줄이는 것은 넓은 행간이 작은 글자를 더 흩어 보이게 해서다.
 *
 * .cm-txt 는 감싸는 곳이 모두 text-align:center 라(content.css 77·87행)
 * max-width 만 주면 왼쪽으로 쏠린다. margin 을 auto 로 함께 준다.
 * .ceo-con-txt 는 정렬 지정이 없어 왼쪽 정렬이라 그럴 일이 없다.
 */
html[lang="en"] .cm-txt{
	font-size:19px;
	line-height:1.85em;
	letter-spacing:normal;
	max-width:900px;
	margin-left:auto;
	margin-right:auto;
}
html[lang="en"] .ceo-con-txt{
	font-size:19px;
	line-height:1.8;
	letter-spacing:normal;
	max-width:900px;
}

/* -------- Company :: CEO 인사말 두 칸 사이 --------
 * content.css 208·210행이 제목 칸 450px, 본문 칸 calc(100% - 450px) 로
 * 두 칸을 **맞붙여** 놓는다. 사이 여백이 0px 이다.
 *
 * 국문은 제목이 짧아 오른쪽에 자연스러운 여백이 남아 가려져 있었다.
 * 영문은 재어 보니 이렇다.
 *
 *   문단 2  가장 긴 줄 301.8px   남은 여백 148.2px
 *   문단 3  가장 긴 줄 422.5px   남은 여백  27.5px
 *   문단 4  가장 긴 줄 445.6px   남은 여백   4.4px
 *
 * 문단 4 는 제목 첫 줄과 본문 첫 줄이 같은 높이에서 맞닿아
 * "…goes on growing through we ask for your support…" 처럼 한 문장으로
 * 읽힌다.
 *
 * width 는 450px 그대로 두고 padding-right 만 더한다.
 *
 * 이 사이트는 box-sizing 이 border-box 가 아니다. default.css 138~146행의
 * border-box 는 input·select·textarea 에만 걸린다. h5·p 는 기본값
 * content-box 이므로 width 는 **글자 자리**를 뜻한다. 그래서
 *
 *   width:450px + padding-right:60px  ->  바깥 510px, 글자 450px
 *
 * 가 되어 글자 자리가 그대로다. 곧 **줄바꿈이 하나도 바뀌지 않는다.**
 * 본문 칸은 그만큼 줄여야 두 칸의 합이 100% 로 맞는다. 안 그러면 넘쳐서
 * float:right 인 본문이 아래로 떨어진다.
 */
html[lang="en"] .ceo-intro-box .intro-txt-box h5{padding-right:60px;}
html[lang="en"] .ceo-intro-box .intro-txt-box > p{width:calc(100% - 510px);}

/* ******************  Main.css ********************** */


/* ******************  Content.css ********************** */
/* -------- Company :: CEO인사말 -------- */
@media all and (max-width:800px){
	/* html[lang="en"] 사용하면 css우선순위가 높아집니다. */
}