@charset "utf-8"; /* 헤더·푸터 공통 보정 (2026-09-28): 로그인/언어 버튼 테두리 제거, 언어 제목 지구본 아이콘·펼침 목록 테두리, 클릭 시 검정 포커스 테두리 제거. 네 언어 head.lib.php 와 recruit/head.lib.php 의 바로 앞(bootstrap 뒤)에서 불러온다. 운영은 CloudFront 가 ?v= 를 무시하므로 수정할 때는 날짜를 바꾼 새 파일명으로 복사해서 고친다. */ /* 로그인·사용자·언어 버튼의 회색 네모 테두리 제거 (펼침 목록 .lang_menu 의 테두리는 유지) */ #header .h_top .language, #header .h_top .user_menu, #header .h_top .user_menu2 {border: 0;} /* 언어 제목: 화살표 배경 대신 지구본 아이콘을 텍스트 앞에 (🌐 + 현재 페이지 언어) */ #header .h_top .language h5, #header .h_top .language.on h5 {display: flex; align-items: center; gap: 5px; padding-left: 4px; padding-right: 4px; background: none;} #header .h_top .language h5 .fa-globe {order: -1; font-size: 15px; color: #555;} #header .h_top .language {width: auto; min-width: 0; display: flex; align-items: center;} /* 펼침 목록(언어·로그아웃): 윗변까지 네 변 테두리, 너비는 들어 있는 글자 폭만큼 */ #header .h_top .language .lang_menu, #header .h_top .user_menu .lang_menu {left: 0; width: max-content !important; min-width: 0; padding: 4px 0; border: 1px solid #dfdfdf; box-sizing: border-box;} #header .h_top .language .lang_menu li, #header .h_top .user_menu .lang_menu li {width: auto;} #header .h_top .language .lang_menu li a, #header .h_top .user_menu .lang_menu li a {display: block; width: auto; padding: 0 12px; font-size: 13px; line-height: 26px; white-space: nowrap;} /* 기존 hover 굵게(font-weight)는 글자 폭이 늘어 상자가 흔들리므로, 폭이 변하지 않는 그림자 굵게로 대신한다 */ #header .h_top .language .lang_menu li:hover a, #header .h_top .user_menu .lang_menu li:hover a {font-weight: normal; text-shadow: 0 0 .5px currentColor, 0 0 .5px currentColor;} /* 클릭 시 생기는 검정 포커스 테두리 제거 — 헤더(로고·유틸 메뉴·GNB·전체메뉴 레이어)와 푸터 */ #header a:focus, #header button:focus, #header h1:focus, #header h5:focus, #header li:focus, .pc_gnb_wrap a:focus, .pc_gnb_wrap button:focus, .layer_menu a:focus, .layer_menu button:focus, #_footer a:focus, #_footer button:focus, #_footer input:focus, #_footer select:focus { outline: 0 !important; box-shadow: none !important; } /* PC(1025px 이상) 헤더 배치 (2026-09-28 확정): 높이 60px, 로고 y=7px·x=파란 GNB 시작선(#wrap 왼쪽 끝), 유틸 메뉴(검색·제품검색·로그인·언어)는 GNB 오른쪽 끝선에 오른쪽 정렬, 세로는 헤더 높이의 가운데. GNB 가 없는 recruit 헤더는 제외(#wrap:has(> .pc_gnb_wrap)). */ @media screen and (min-width: 1025px) { :root {--hu-gutter: clamp(0px, calc(50px - (100vw - 1920px) / 2), 50px);} /* 유틸 메뉴(언어 펼침 목록 포함)를 오른쪽 '문의' 패널(.contactus-main, fixed, z-index 1100, DOM 상 뒤)보다 위로 */ #header .h_top {z-index: 1101;} /* 언어·로그아웃 펼침 목록은 버튼 오른쪽 끝에 맞춘다 — 왼쪽 기준이면 화면 오른쪽 밖으로 나간다 */ #header .h_top .language .lang_menu, #header .h_top .user_menu .lang_menu {left: auto; right: 0;} /* '문의' 탭은 옛 헤더 기준(top 100px)이라 GNB 아래쪽 10px 를 덮었다 — GNB 아래선(60 + 50 = 110px)에서 시작 */ .contactus-main {top: 110px;} #wrap:has(> .pc_gnb_wrap) > #header, #wrap:has(> .pc_gnb_wrap) > #header .h_inner {height: 60px;} /* 좌우 여백: 창이 넓어 사이트(최대 1920px) 바깥에 여백이 생기면 0 — 로고가 파란 GNB 시작선에 붙는다. 창이 좁아져 GNB 가 화면 끝까지 차면 로고·유틸 메뉴가 화면 끝에 붙어 잘리므로 화면 끝에서 최소 50px 를 띄운다. */ #wrap:has(> .pc_gnb_wrap) > #header .h_inner {margin-left: var(--hu-gutter); margin-right: var(--hu-gutter);} #wrap:has(> .pc_gnb_wrap) > #header h1 {left: 0; top: 7px; bottom: auto; margin: 0;} /* 세로 가운데: .h_top·ul·li 를 헤더 높이(60px)로 늘리고 flex 가운데 정렬. 기존 li 상하 padding 10px 이 아이콘을 5px 위로 올리던 것도 없앤다 */ #wrap:has(> .pc_gnb_wrap) > #header .h_top {right: 0; top: 0; height: 60px; transform: none; display: flex; align-items: center;} #wrap:has(> .pc_gnb_wrap) > #header .h_top > ul, #wrap:has(> .pc_gnb_wrap) > #header .h_top > ul > li {height: 60px; padding-top: 0; padding-bottom: 0; align-items: center;} #wrap:has(> .pc_gnb_wrap) > #header .h_top > ul {margin: 0;} /* bootstrap 의 ul{margin-bottom:10px} 가 전체를 5px 위로 밀던 것 */ #wrap:has(> .pc_gnb_wrap) > #header .h_top .language, #wrap:has(> .pc_gnb_wrap) > #header .h_top .user_menu, #wrap:has(> .pc_gnb_wrap) > #header .h_top .user_menu2 {height: auto;} #wrap:has(> .pc_gnb_wrap) > #header .h_top > ul > li > a {display: flex; align-items: center;} #wrap:has(> .pc_gnb_wrap) > #header .h_top > ul > li:last-child {padding-right: 0;} } /* 유틸 메뉴 글자 통일: 모두 '제품 검색' 과 같은 13px·400·검정, 글꼴은 언어별 사이트 폰트(--site-font). 로그인 글자는 안에 들어 있어 아이콘 글꼴로 찍히고 있었으므로(중문에서 크기가 달라 보인 원인) 는 글자 글꼴로 되돌리고 아이콘 모양(::before)만 Font Awesome 으로 지정한다. en 의 인라인 Helvetica 도 덮는다. */ #header .h_top > ul > li a, #header .h_top .login_tit, #header .h_top .login_tit i, #header .h_top .login_tit span, #header .h_top .language h5, #header .h_top .lang_menu li a {font-family: var(--site-font, inherit) !important; font-weight: 500; font-style: normal; color: #000;} /* 500: kr/en 는 Medium, jpn/chn 은 파일이 없어 400 으로 그려진다 */ #header .h_top .login_tit i.fa::before {font-family: 'Font Awesome 6 Free'; font-weight: 900; font-style: normal; margin-right: 4px;} #header .h_top .lang_menu li a {color: #666;} #header .h_top .lang_menu li:hover a {color: #000;} /* 크기는 PC 에서만 13px 로 통일 (태블릿·모바일은 기존 크기 유지) */ @media screen and (min-width: 1025px) { #header .h_top > ul > li a, #header .h_top .login_tit, #header .h_top .login_tit i, #header .h_top .login_tit span, #header .h_top .language h5 {font-size: 13px; line-height: 1;} #header .h_top .lang_menu li a {font-size: 13px; line-height: 26px;} #header .h_top .login_tit i {margin: 0;} #header .h_top .login_tit {width: auto !important; margin: 0;} #header .h_top .language h5 {margin: 0; padding-left: 0;} #header .h_top .language h5 .fa-globe {font-size: 14px; color: #000;} /* 한국어는 한 단계 크게(14px). 한국어 헤더인지는 로그인 링크 경로(/kr/)로 판별한다 */ #header .h_top:has(a[href^="/kr/"]) > ul > li a, #header .h_top:has(a[href^="/kr/"]) .login_tit, #header .h_top:has(a[href^="/kr/"]) .login_tit i, #header .h_top:has(a[href^="/kr/"]) .language h5, #header .h_top:has(a[href^="/kr/"]) .lang_menu li a {font-size: 14px;} #header .h_top:has(a[href^="/kr/"]) .language h5 .fa-globe {font-size: 15px;} } /* 메인 히어로 슬라이드 문단:

로 나뉘던 두 덩어리를 .hu_seg 로 감싸 각각 줄 길이를 고르게 한다(애매한 짧은 끝줄 방지) */ #visual_wrap .txt_box p .hu_seg {display: block; text-wrap: balance;} #visual_wrap .txt_box p .hu_seg + .hu_seg {margin-top: 25px;} /* ───────── 태블릿·모바일 헤더 (1024px 이하, 2026-09-28) ───────── 옛 태블릿/모바일 헤더는 파란 배경에 로고가 헤더 아래로 밀리고, 유틸 메뉴가 흰 상자로 떠 있었다. PC 와 같은 모양으로 맞춘다: 흰 배경 60px(모바일 56px), 로고 왼쪽, 유틸 메뉴 + ☰ 오른쪽, 모두 세로 가운데. GNB 가 없는 recruit 헤더는 제외. */ @media screen and (max-width: 1024px) { #wrap:has(> .pc_gnb_wrap) > #header {height: 60px; background: #fff;} #wrap:has(> .pc_gnb_wrap) > #header .h_inner {height: 60px; width: auto; margin: 0 24px;} /* 로고: PC 로고(154×46)를 그대로 쓴다. 태블릿·모바일용 옛 이미지는 숨김 */ #wrap:has(> .pc_gnb_wrap) > #header h1 {left: 0; top: 7px; bottom: auto; margin: 0; line-height: 0;} #wrap:has(> .pc_gnb_wrap) > #header h1 a {display: block;} #wrap:has(> .pc_gnb_wrap) > #header h1 img.pc_img {display: block !important; width: 154px; height: 46px;} #wrap:has(> .pc_gnb_wrap) > #header h1 img.tab_img, #wrap:has(> .pc_gnb_wrap) > #header h1 img.mob_img {display: none !important;} /* 유틸 메뉴: ☰ 버튼(24px) + 간격 20px 만큼 왼쪽에서 끝난다 */ #wrap:has(> .pc_gnb_wrap) > #header .h_top {right: 44px; left: auto; top: 0; height: 60px; margin: 0; transform: none; display: flex; align-items: center; z-index: 1101;} #wrap:has(> .pc_gnb_wrap) > #header .h_top > ul {height: 60px; margin: 0; align-items: center;} #wrap:has(> .pc_gnb_wrap) > #header .h_top > ul > li {height: 60px; padding: 0; margin-right: 20px; align-items: center;} #wrap:has(> .pc_gnb_wrap) > #header .h_top > ul > li:last-child {margin-right: 0;} #wrap:has(> .pc_gnb_wrap) > #header .h_top > ul > li::after {right: -10px; height: 14px;} #wrap:has(> .pc_gnb_wrap) > #header .h_top > ul > li > a {display: flex; align-items: center;} #wrap:has(> .pc_gnb_wrap) > #header .h_top li img {width: 20px; height: auto;} #wrap:has(> .pc_gnb_wrap) > #header .h_top .language, #wrap:has(> .pc_gnb_wrap) > #header .h_top .user_menu, #wrap:has(> .pc_gnb_wrap) > #header .h_top .user_menu2 {height: auto; width: auto; min-width: 0; background: none; border: 0;} #header .h_top > ul > li a, #header .h_top .login_tit, #header .h_top .login_tit i, #header .h_top .login_tit span, #header .h_top .language h5 {font-size: 13px; line-height: 1; white-space: nowrap; margin: 0; padding: 0;} #header .h_top .login_tit {width: auto !important;} #header .h_top .language h5 .fa-globe {font-size: 14px; color: #000;} #header .h_top:has(a[href^="/kr/"]) > ul > li a, #header .h_top:has(a[href^="/kr/"]) .login_tit i, #header .h_top:has(a[href^="/kr/"]) .language h5 {font-size: 14px;} #header .h_top .language .lang_menu, #header .h_top .user_menu .lang_menu {left: auto; right: 0;} /* ☰ 버튼: 흰 배경에 맞춰 검정 선 아이콘 */ #wrap:has(> .pc_gnb_wrap) > #header .btn_wrap {right: 0; top: 0; height: 60px; display: flex; align-items: center; margin: 0; transform: none;} #wrap:has(> .pc_gnb_wrap) > #header .btn_wrap a.nav_btn {width: 24px; height: 24px; background: url('/images/gnb/menu_line-black_24px.svg') center / 24px 24px no-repeat;} /* 문의 탭: 헤더(60) + 태블릿 GNB 줄 아래 */ .contactus-main {top: 100px;} } /* 모바일(767px 이하): 헤더 56px, 로고는 A 마크(ic_abovA_32px.png), '제품 검색' 텍스트 링크는 숨김(☰ 메뉴·검색으로 대신) */ @media screen and (max-width: 767px) { #wrap:has(> .pc_gnb_wrap) > #header, #wrap:has(> .pc_gnb_wrap) > #header .h_inner, #wrap:has(> .pc_gnb_wrap) > #header .h_top, #wrap:has(> .pc_gnb_wrap) > #header .h_top > ul, #wrap:has(> .pc_gnb_wrap) > #header .h_top > ul > li, #wrap:has(> .pc_gnb_wrap) > #header .btn_wrap {height: 56px;} #wrap:has(> .pc_gnb_wrap) > #header .h_inner {margin: 0 16px;} #wrap:has(> .pc_gnb_wrap) > #header h1 {top: 12px;} #wrap:has(> .pc_gnb_wrap) > #header h1 a {width: 32px; height: 32px; background: url('/images/logo/ic_abovA_32px.png') center / 32px 32px no-repeat;} #wrap:has(> .pc_gnb_wrap) > #header h1 img.pc_img {display: none !important;} #wrap:has(> .pc_gnb_wrap) > #header .h_top {right: 40px;} #wrap:has(> .pc_gnb_wrap) > #header .h_top > ul > li {margin-right: 16px;} #wrap:has(> .pc_gnb_wrap) > #header .h_top > ul > li::after {right: -8px;} #wrap:has(> .pc_gnb_wrap) > #header .h_top > ul > li:has(a[href*="parameter_search"]) {display: none;} #header .h_top > ul > li a, #header .h_top .login_tit i, #header .h_top .login_tit span, #header .h_top .language h5, #header .h_top:has(a[href^="/kr/"]) > ul > li a, #header .h_top:has(a[href^="/kr/"]) .login_tit i, #header .h_top:has(a[href^="/kr/"]) .language h5 {font-size: 13px;} #wrap:has(> .pc_gnb_wrap) > #header .h_top li img {width: 18px;} #wrap:has(> .pc_gnb_wrap) > #header .btn_wrap a.nav_btn {width: 22px; height: 22px; background-size: 22px 22px;} } /* ───────── 푸터 (2026-09-28) ───────── */ /* PC: 정책 링크 줄과 저작권 문구가 float 로 한 줄에 붙어 나오던 것을 두 줄로 나눈다 */ #_footer .company_policy {clear: both; display: flow-root;} #_footer .foot_address {clear: both; float: none; width: 100%;} #_footer .foot_address p.copyright {float: none; margin-top: 8px;} #_footer .company_policy ul > li {margin-top: 30px;} /* 모바일: 개인정보처리방침 · 이용약관 · 저작권 문구만 남긴다 */ @media screen and (max-width: 767px) { #_footer .foot_menu, #_footer .right {display: none;} #_footer .company_policy ul > li:nth-child(n+3) {display: none;} #_footer .company_policy ul > li:nth-child(2) > span {display: none;} #_footer .company_policy ul > li {margin-top: 0; padding: 0;} #_footer .company_policy {margin-top: 0; line-height: 22px;} #_footer .foot_address p.copyright {margin-top: 6px; padding-right: 60px; line-height: 18px; word-break: keep-all; text-wrap: balance;} }