@charset "utf-8";
/* ============================================================
   로템SRS — rotem-5-builder.css
   옛 디딤 스킨(rotem-1~4)을 빌더2 화면 구조에 맞추는 덮어쓰기.
   · 빌더 custom.css(에코젠 템플릿) 규칙 중 충돌하는 것을 되돌림
   · 헤더 메뉴: 빌더 {{MENU_TOP}}(ul.db-menu)에 옛 .hd_lnb 디자인
   · 전체메뉴(aside): {{MENU_ASIDE}} 를 custom.js 가 옛 slidemenu 구조로 바꿈 (화면 밖이라 깜빡임 없음)
   · 서브 상단: {{SUB_MENU}} 는 숨김(현재 위치 정보로만 사용) → custom.js 가 옛 .navi_wrap 마크업을 만듦
   · 본문: <main id="container" class="w_custom"> = 옛 #contents_wrap + #contents_box
   불러오는 순서: reset → custom → rotem-1 … rotem-5 (이 파일이 마지막)
   ============================================================ */

/*───────────────────────────────────────────────────────────
	변수 — 헤더 높이 (옛 skin.css #header height 와 같은 단계)
───────────────────────────────────────────────────────────*/
:root{--rt-hd-h:80px;}
@media only screen and (max-width:1023px){:root{--rt-hd-h:76px;}}
@media only screen and (max-width:960px){:root{--rt-hd-h:72px;}}
@media only screen and (max-width:767px){:root{--rt-hd-h:68px;}}
@media only screen and (max-width:640px){:root{--rt-hd-h:64px;}}
@media only screen and (max-width:414px){:root{--rt-hd-h:60px;}}

/*───────────────────────────────────────────────────────────
	body · #wrap — custom.css 의 body(Noto Sans·1.7·padding-top) 되돌림
───────────────────────────────────────────────────────────*/
html body{padding-top:0;font-family:var(--font-type01);line-height:1.4;color:var(--black-color03);letter-spacing:-0.2px;}
/* 헤더(#header)는 fixed — 옛 스크립트가 #container 에 주던 위 여백을 #wrap 에 CSS 로 줌 */
body #wrap{padding:var(--rt-hd-h) 0 0;overflow:clip;height:auto;flex:1 0 auto;}
/* 빌더 breadcrumb — 옛 서브 경로바(.navi_wrap)가 대신함 */
#wrap .bc-breadcrumb{display:none;}
/* 언어별 글자 — 한·영 공용으로 쓰는 본문에서 필요할 때 (class="rt-l-ko" / "rt-l-en") */
html[lang="en"] .rt-l-ko, html:not([lang="en"]) .rt-l-en{display:none !important;}

/*───────────────────────────────────────────────────────────
	본문 영역 — <main id="container" class="w_custom"> (서브 페이지·게시판 공통)
	옛 #contents_wrap(1240px) + #contents_box(padding 110px 0 7.2%) 를 합친 것
	페이지 본문 형식: <div class="rt-scope"><div class="sub_hd_title" data-aos="fade-up"><h2>제목</h2></div>
	                  <div id="content" class="clear"><div class="sub_content">…</div></div></div>
───────────────────────────────────────────────────────────*/
#wrap #container.w_custom{width:100%;max-width:1240px;margin:0 auto;padding:110px 0 7.2%;box-sizing:border-box;text-align:left;}
#wrap #container.w_custom > .rt-scope > .sub_hd_title{padding-top:60px;}
@media only screen and (max-width:1287px){
	#wrap #container.w_custom{max-width:none;padding-left:15px;padding-right:15px;}
}
@media only screen and (max-width:1023px){
	#wrap #container.w_custom{padding-top:4.8%;padding-bottom:6.4%;}
	#wrap #container.w_custom > .rt-scope > .sub_hd_title{padding-top:7%;}
}
@media only screen and (max-width:860px){
	#wrap #container.w_custom{padding-top:4.2%;padding-bottom:6.4%;}
}
@media only screen and (max-width:640px){
	#wrap #container.w_custom{padding-bottom:10.4%;}
	#wrap #container.w_custom > .rt-scope > .sub_hd_title{padding-top:14%;}
}
@media only screen and (max-width:479px){
	#wrap #container.w_custom{padding-bottom:12%;}
}
@media only screen and (max-width:320px){
	#wrap #container.w_custom{padding-left:10px;padding-right:10px;}
}

/*───────────────────────────────────────────────────────────
	게시판 (5단계) — 빌더 게시판 디자인 그대로. 로템 색(#ad0003)은 reset.css 변수(--point-color01)로 적용됨
───────────────────────────────────────────────────────────*/
/* 본문 제목은 custom.js 가 옛 .sub_hd_title(.rt-auto-title)로 넣으므로 빌더 제목(h1.bl-title)은 숨김 */
#wrap #container > .rt-auto-title ~ .bl-page > .bl-title{display:none;}
/* 뉴스 : 요약(summary)은 목록 카드·메인 News 카드용 — 보기 화면 제목 아래에서는 본문 첫머리와 겹쳐 숨김 */
#wrap .view_wrap[data-board-slug="notice"] .bbs_view .view_tit .summary{display:none;}
/* 썸네일 없는 글 : '이미지 없음' 글자 대신 로고 */
#wrap .sub_gallery li .thumb .bl-gallery-img--empty{font-size:0;background:#eef1f5 url(/images/rotem/skin/logo.png) no-repeat center/40% auto;}
/* 첨부가 여러 개인 옛 글 (custom.js 가 본문 밖 빌더 첨부칸으로 꺼냄) */
#wrap .bbs_view .extra_editor_wrap > div.extra_cont{display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
/* 채용공고 접수기간 (옛 .bbs_view_recruit — custom.js 가 본문의 .rt-period 를 꺼내 만듦) */
#wrap .bbs_view .rt-recruit-period{display:flex;align-items:center;margin:var(--row-gap30) 0 0;padding:clamp(12px,2.2vw,22px) 0;border-radius:var(--radius-10);background:var(--gray-bg01);}
#wrap .bbs_view .rt-recruit-period dt{width:clamp(100px,15vw,180px);flex-shrink:0;text-align:center;font-size:var(--text-18);font-weight:500;color:var(--black-color03);}
#wrap .bbs_view .rt-recruit-period dd{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin:0;padding-inline:var(--row-gap60) clamp(12px,3vw,30px);font-size:var(--text-18);color:var(--black-color06);}
#wrap .bbs_view .rt-recruit-period dd:before{content:"";position:absolute;left:0;top:50%;translate:0 -50%;width:1px;height:clamp(8px,1vw,12px);background:var(--border-color01);}
#wrap .bbs_view .rt-recruit-period em{display:inline-flex;align-items:center;padding:6px 12px;border-radius:var(--radius-06);background:var(--point-color01);color:#fff;font-size:var(--text-15);font-style:normal;font-weight:600;line-height:1;}
#wrap .bbs_view .rt-recruit-period em.end{background:#b8b8b8;}

/*───────────────────────────────────────────────────────────
	헤더 메뉴 — {{MENU_TOP}} (ul.db-menu > li.db-menu-has-sub > a + ul.db-submenu)
	옛 #header .hd_lnb / .hd_lnb_dep2 디자인. custom.css 의 flex·남색 드롭다운·!important 색 되돌림
───────────────────────────────────────────────────────────*/
#header .db-menu{display:inline-block;width:100%;height:auto;margin:0 auto;padding:0 0 0 30px;line-height:36px;font-size:0;text-align:center;vertical-align:top;list-style:none;box-sizing:border-box;position:relative;z-index:10;gap:0;}
#header .db-menu > li{display:inline-block;height:auto;padding:0 50px;margin:0;line-height:2em;font-size:18px;font-weight:300;color:#333;text-align:center;vertical-align:middle;box-sizing:border-box;position:relative;z-index:5;transition:all .2s;font-family:var(--font-type03);}
#header .db-menu > li > a{display:inline-block;height:auto;padding:0;margin:0;line-height:2em;font-size:18px;font-weight:300;color:#333 !important;white-space:nowrap;font-family:inherit;vertical-align:middle;box-sizing:border-box;position:relative;z-index:5;transition:all .2s;}
#header .db-menu > li:hover > a, #header .db-menu > li.on > a{color:#ad0003 !important;}
#header .db-menu > li > a::after{content:"";display:inline-block;width:0;height:2px;background:#ad0003;position:absolute;left:0;bottom:0;transition:.5s;}
#header .db-menu > li:hover > a::after, #header .db-menu > li.on > a::after{width:100%;}
#header .db-menu .db-submenu{display:block;width:155px;min-width:0;height:0;overflow:hidden;position:absolute;left:50%;top:100%;transform:translateX(-50%);margin:0;padding:0;list-style:none;background:#fff;border-radius:0;box-shadow:none;clip-path:none;opacity:1;visibility:visible;z-index:55;transition:all .5s;}
#header .db-menu > li:hover > .db-submenu{height:auto;overflow:visible;}
#header .db-menu .db-submenu::before{display:none;content:none;}
#header .db-menu .db-submenu::after{content:"";display:inline-block;width:100%;left:0;top:30px;height:calc(100% - 30px);position:absolute;background:none;box-shadow:1px 6px 5px rgba(0,0,0,0);transition:all .5s;z-index:-1;}
#header .db-menu > li:hover > .db-submenu::after{box-shadow:1px 6px 5px rgba(0,0,0,.1);}
#header .db-menu .db-submenu > li{display:block;padding:4px 10px;margin:0;font-size:14px;font-weight:400;line-height:1.4em;color:#666;text-align:center;font-family:var(--font-type03);}
#header .db-menu .db-submenu > li:first-child{padding-top:20px;}
#header .db-menu .db-submenu > li:last-child{padding-bottom:20px;}
#header .db-menu .db-submenu > li > a, #header .db-menu .db-submenu > li > a:hover{display:inline-block;width:100%;margin:0;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit !important;background:none;transition:none;}
#header .db-menu .db-submenu .db-submenu{display:none;}
@media only screen and (max-width:1400px){
	#header .db-menu{padding-left:20px;}
	#header .db-menu > li{padding:0 40px;}
}
@media only screen and (max-width:1287px){
	#header .db-menu{line-height:34px;padding-left:16px;}
	#header .db-menu > li, #header .db-menu > li > a{font-size:17px;}
	#header .db-menu > li{padding:0 32px;}
	#header .db-menu .db-submenu::after{top:31px;height:calc(100% - 31px);}
}
@media only screen and (max-width:1100px){
	#header .db-menu{padding-left:18px;}
	#header .db-menu > li{padding:0 24px;}
	#header .db-menu .db-submenu::after{top:26px;height:calc(100% - 26px);}
}
@media only screen and (max-width:960px){
	#header .db-menu > li{padding:0 18px;}
}
@media only screen and (max-width:860px){
	#header .db-menu{display:none;}
}

/*───────────────────────────────────────────────────────────
	서브 상단 — {{SUB_MENU}}(.ecz-lnb)는 현재 위치 정보로만 쓰고 숨김.
	custom.js 가 옛 마크업(.navi_wrap > .nav_box > ul > li > dl.navi_step)을 만들어 rotem-3-sub.css 디자인 그대로 표시
───────────────────────────────────────────────────────────*/
#wrap .sub_hd_wrap .ecz-lnb{display:none !important;}
/* 첫 화면(WRAP_CLASS 빈 값)에는 서브 상단(비주얼·경로바)을 쓰지 않음 */
#wrap[data-rt-page=""] > .sub_hd_wrap{display:none;}
#wrap .sub_hd_wrap .sub_visual .img_sub_bg{background-color:#2b2b2b;}
#wrap .sub_hd_wrap .sub_visual .img_sub_bg.bg_company{background-image:url('/images/rotem/sub/visual_company.jpg');}
#wrap .sub_hd_wrap .sub_visual .img_sub_bg.bg_business{background-image:url('/images/rotem/sub/visual_business.jpg');}
#wrap .sub_hd_wrap .sub_visual .img_sub_bg.bg_board{background-image:url('/images/rotem/sub/visual_board.jpg');}
#wrap .sub_hd_wrap .sub_visual .img_sub_bg.bg_employment{background-image:url('/images/rotem/sub/visual_employment.jpg');}
#wrap .sub_hd_wrap .sub_visual .img_sub_bg.bg_service{background-image:url('/images/rotem/sub/visual_service.jpg');}
/* 경로바 칸 글자가 길면 말줄임 (칸 폭은 옛 디자인 200px 그대로) */
#wrap .sub_hd_wrap .nav_box ul li > dl > dt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 경로바 칸이 비어 있는 동안(스크립트 실행 전) 높이 유지 */
#wrap .sub_hd_wrap .navi_wrap .nav_box > ul{overflow:visible;}

/*───────────────────────────────────────────────────────────
	푸터
───────────────────────────────────────────────────────────*/
#wrap #footer{position:relative;z-index:1;}
#wrap #footer a{text-decoration:none;}

/* ── 4단계 메인 : 사업장 지도(Leaflet) 팝업 ── */
.rt-main .main_map .leaflet-container{font-family:inherit;z-index:1}
.rt-main .rt-map-pop strong{display:block;font-size:15px;margin-bottom:4px;white-space:pre-line}
.rt-main .rt-map-pop p{margin:0 0 6px;color:#555}
.rt-main .rt-map-pop .rt-map-ico img{height:28px;margin-right:4px}
.rt-main .rt-map-pop a{display:inline-block;margin-top:6px;color:#002c5f;text-decoration:underline}
/* 지도 바탕(바다)·범례·묶음 원 — 빌더 CSP 로 바깥 타일을 못 써서 사이트 안 세계지도(world_50m.json) 사용 */
.rt-main .main_map .leaflet-container{background:#e8eef4}
.rt-main .main_map .main_map_info{z-index:2}
.rt-main .rt-map-pop .rt-map-ico img{display:inline-block;vertical-align:top}
.rt-main .rt-map-pop p.sub{color:#333}
.rt-main .rt-map-cluster{background:url(/images/rotem/map/map_circle_s.png) no-repeat center/100% 100%;color:#fff;font:bold 11px/30px Arial,sans-serif;text-align:center}
.rt-main .rt-map-cluster-m{background-image:url(/images/rotem/map/map_circle_m.png);line-height:45px}
.rt-main .rt-map-cluster-l{background-image:url(/images/rotem/map/map_circle_l.png);line-height:60px}
.rt-main .rt-map-cluster span{display:block}
.rt-main .main_news .board_li .thumb:empty{background:#eef1f5 url(/images/rotem/skin/logo.png) no-repeat center/40% auto}