@charset "utf-8";
/* ============================================================
   xdom v2 — Wide Layout (wd) 전용 CSS
   기존 main.css/colorset CSS의 고정 너비 & absolute position을
   전부 재정의하여 Flexbox 기반 가변 레이아웃으로 전환
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   컨테이너
══════════════════════════════════════════════════════════════ */
.wd-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
	width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   탑바 — .top_gnb .top_box 고정 너비 해제
══════════════════════════════════════════════════════════════ */
.wd-topbar { width: 100%; }

.wd-topbar .top_gnb { width: 100% !important; }
.wd-topbar .top_box {
	width: 100% !important;
	max-width: none !important;
	padding: 3px 0 0 0 !important;
	box-sizing: border-box;
}
.wd-topbar .top_gnb .gnb {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	height: 21px;
}
.wd-topbar .top_gnb .gnb p {
	float: none !important;
	width: auto !important;
	flex-shrink: 0;
}
.wd-topbar .top_gnb .gnb ul.fRight {
	float: none !important;
	display: flex !important;
	align-items: center;
	gap: 0;
}

/* ══════════════════════════════════════════════════════════════
   헤더 — position:absolute 일괄 해제, Flexbox 적용
══════════════════════════════════════════════════════════════ */
.wd-header { width: 100%; }

/* headerWrap: 고정 width/height 해제 → Flex container */
.wd-header .headerWrap {
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	min-height: 80px;
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 0 !important;
	box-sizing: border-box;
	position: relative !important;
}

/* 로고 */
.wd-header .headerWrap h1 {
	position: static !important;
	left: auto !important;
	top: auto !important;
	flex-shrink: 0;
	margin: 0 !important;
}
/* 서브 로고 */
.wd-header .headerWrap .sub {
	position: static !important;
	left: auto !important;
	top: auto !important;
	flex-shrink: 0;
}
.wd-header .headerWrap .sub h1 {
	position: static !important;
	left: auto !important;
	top: auto !important;
}
/* 검색창 */
.wd-header .gSearch {
	position: static !important;
	top: auto !important;
	left: auto !important;
	flex: 1;
	min-width: 180px;
	max-width: 460px;
}
.wd-header .gSearch .inputText {
	width: 100% !important;
	box-sizing: border-box;
}
/* 헤더 광고 */
.wd-header .head_ad_1 {
	position: static !important;
	top: auto !important; left: auto !important;
	width: auto !important;
	flex-shrink: 0;
}
.wd-header .head_ad_2 {
	position: static !important;
	width: 100% !important;
	flex-basis: 100%;
	order: 10;
}
.wd-header .head_ad_3 {
	position: static !important;
	top: auto !important; right: auto !important;
	width: auto !important;
	flex-shrink: 0;
	margin-left: auto;
}
/* 언어 선택 */
.wd-header .select_language {
	position: static !important;
	top: auto !important; right: auto !important;
	width: auto !important;
	flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   네비게이션 메뉴바 — 고정 너비/absolute 해제
══════════════════════════════════════════════════════════════ */
.wd-nav { width: 100%; }

/* main_menu 컨테이너: 고정 width/height 해제 */
.wd-nav .main_menu {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	height: auto !important;
	min-height: 36px;
	position: relative !important;
	display: flex !important;
	align-items: center;
	box-sizing: border-box;
	/* 배경 이미지: 980px 원본 → 전체 너비로 늘림 */
	background-size: 100% 100% !important;
}

/* GNB (기본/롤오버): absolute 해제, 내부는 float 그대로 유지 (lavaLamp 호환) */
.wd-nav .main_menu .gnb,
.wd-nav .main_menu .roll_gnb {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	overflow: visible !important;
	/* display: flex 제거 — float:left li들을 lavaLamp가 정상 계산하도록 유지 */
	display: block !important;
	flex-shrink: 0;
	height: 36px !important;
}
/* clearfix: float된 li들이 부모 높이에 반영되도록 */
.wd-nav .main_menu .gnb::after,
.wd-nav .main_menu .roll_gnb::after {
	content: '';
	display: table;
	clear: both;
}
.wd-nav .main_menu .gnb li,
.wd-nav .main_menu .roll_gnb li {
	height: 36px !important;
}

/* 2차 메뉴 (기본): absolute 유지, main_menu 기준 */
.wd-nav .main_menu .gnb2 {
	position: absolute !important;
	left: 8px !important;
	top: 36px !important;
	z-index: 11;
}
/* 2차 메뉴 (롤오버) */
.wd-nav .main_menu .roll_gnbSub {
	position: absolute !important;
	left: 8px !important;
	top: 36px !important;
	z-index: 11;
}

/* 드롭다운 메뉴: 전체 너비 사용 */
.wd-nav .main_menu #drop_gnb {
	position: static !important;
	display: flex;
	align-items: center;
	flex: 1;
	padding-left: 8px;
}
.wd-nav .main_menu #drop_gnb > ul {
	display: flex !important;
	align-items: center;
	padding: 0;
	margin: 0;
}

/* 메뉴바 우측 검색 */
.wd-nav .main_menu .isSearch {
	position: static !important;
	top: auto !important; right: auto !important;
	margin-left: auto;
	display: flex;
	align-items: center;
}
.wd-nav .main_menu .isSearch .inputText {
	width: auto !important;
}

/* 메뉴바 광고 */
.wd-nav .main_menu .head_ad_4 {
	position: static !important;
	left: auto !important; top: auto !important;
	width: auto !important;
	display: flex;
	align-items: center;
}
.wd-nav .main_menu .head_ad_5 {
	position: static !important;
	top: auto !important; right: auto !important;
	width: auto !important;
	margin-left: auto;
	display: flex;
	align-items: center;
}

/* ══════════════════════════════════════════════════════════════
   본문 (content_Body) — float → Flexbox
══════════════════════════════════════════════════════════════ */
.wd-body { width: 100%; padding: 8px 0; }

.wd-body .content_Body {
	width: 100% !important;
	max-width: none !important;
	display: flex !important;
	align-items: flex-start;
	gap: 0;
	position: relative;
	margin: 0 !important;
	padding-bottom: 0 !important;
	box-sizing: border-box;
	/* float 해제 */
	clear: none !important;
}
.wd-body .content_Body::after { content: none !important; }

.wd-body .content_Body_top,
.wd-body .content_Body_bottom {
	width: 100% !important;
	float: none !important;
	flex-basis: 100%;
}

/* 사이드바 (columnMenu): float 해제 */
.wd-body .columnMenu {
	position: static !important;
	float: none !important;
	width: 210px !important;
	flex-shrink: 0;
	order: 1;
}

/* 메인 콘텐츠 (columnContent): float 해제 */
.wd-body .columnContent {
	float: none !important;
	width: auto !important;
	flex: 1 !important;
	min-width: 0;
	order: 2;
	overflow: hidden;
}

/* 우측 서브 사이드 (3단 contentSide) */
.wd-body .contentSide {
	float: none !important;
	flex-shrink: 0;
	width: 220px !important;
	order: 3;
}

/* 2단-좌: 사이드가 우측 */
.wd-layout-2d .columnMenu { order: 3; }
.wd-layout-2d .columnContent { order: 1; }

/* 1단: 콘텐츠 전체 너비 */
.wd-layout-1 .columnContent {
	width: 100% !important;
	flex-basis: 100%;
}

/* ══════════════════════════════════════════════════════════════
   서비스맵 / 사이트맵
══════════════════════════════════════════════════════════════ */
.wd-servicemap #service_wrap { width: 100% !important; max-width: none !important; }
.wd-servicemap #sitemap,
.wd-servicemap #sitemap2 { width: 100% !important; max-width: none !important; }

/* ══════════════════════════════════════════════════════════════
   푸터
══════════════════════════════════════════════════════════════ */
.wd-footer { width: 100%; }
.wd-footer #footer { width: 100% !important; max-width: none !important; }

/* ══════════════════════════════════════════════════════════════
   반응형
══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 1100px) {
	.wd-container { padding: 0 16px; }
}
@media screen and (max-width: 900px) {
	.wd-body .content_Body { flex-wrap: wrap !important; }
	.wd-body .columnMenu  { width: 100% !important; order: 2; }
	.wd-body .columnContent { width: 100% !important; order: 1; }
	.wd-body .contentSide   { width: 100% !important; order: 3; }
	.wd-header .headerWrap  { gap: 8px; }
	.wd-header .gSearch     { max-width: 100%; }
}
@media screen and (max-width: 640px) {
	.wd-container { padding: 0 10px; }
	.wd-topbar .top_gnb .gnb { flex-wrap: wrap; height: auto; }
	.wd-nav .main_menu .gnb,
	.wd-nav .main_menu .roll_gnb { flex-wrap: wrap; padding-left: 4px; }
	.wd-nav .main_menu .gnb li a span,
	.wd-nav .main_menu .roll_gnb li a span { padding: 8px 5px !important; }
}