@charset "utf-8";

/* 프론트 전용 최소 반응형 (관리자 미적용) */

.inner,
#header .header_inner {
	max-width: 1180px;
	width: 100%;
	box-sizing: border-box;
}
nav.gnb_area { max-width: 1180px; width: 100%; box-sizing: border-box; }
#footer { min-width: 0; }
img { max-width: 100%; height: auto; }
.ls-wp-container img,
img.ls-bg { max-width: none; height: auto; }
.btn_nav,
.btn_snb { display: none; }
#gnb .m-util,
#gnb form.m-search { display: none; }

#content table,
.contents table {
	max-width: 100% !important;
}
#content img,
.contents img,
#content iframe,
.contents iframe,
#content input[type="text"],
#content input[type="password"],
#content textarea,
#content select {
	max-width: 100%;
}

.hisImg {
	position: relative;
	height: 220px;
	overflow: hidden;
	margin-bottom: 24px;
}
.hisImg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hisImg__text {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px;
	font-size: 20px;
	line-height: 1.5;
	z-index: 1;
}

@media screen and (max-width: 1180px) {
	.inner,
	#header .header_inner {
		padding-left: 16px;
		padding-right: 16px;
	}
	nav.gnb_area { padding-left: 16px; padding-right: 16px; }
	.NoticeVisual {
		width: auto;
		left: 16px;
		right: 16px;
		margin-left: 0;
		background-size: cover;
	}

	.section01 .BannerArea {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}
	.section01 .BannerArea li {
		float: none;
		width: calc(50% - 6px);
		height: auto;
		margin: 0;
		aspect-ratio: 1 / 1;
		box-sizing: border-box;
	}
	.section01 .BannerArea li.last {
		width: 100%;
		aspect-ratio: auto;
		padding-bottom: 16px;
		box-sizing: border-box;
	}
	.section01 .BannerArea li.last ul {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		padding: 0 16px;
	}
	.section01 .BannerArea li.last ul li {
		float: none;
		width: calc(33.333% - 8px);
		height: 48px;
		line-height: 48px;
		margin: 0;
	}
	.section01 .BannerArea li.last ul li a {
		background-position: right 12px center;
		padding-left: 16px;
	}
	.section01 .mList {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		margin-top: 12px;
	}
	.section01 .mList li.area {
		float: none;
		width: calc(50% - 6px);
		height: auto;
		margin: 0;
		min-height: 0;
	}
	.section01 .mList li.area:first-child { margin-right: 0; }
	.section02 ul {
		display: flex;
		flex-wrap: wrap;
		float: none;
	}
	.section02 ul li {
		float: none;
		width: 33.333%;
		box-sizing: border-box;
	}
	.section02 ul li:first-child { border-left: 1px solid #ededed; }
}

@media screen and (max-width: 1024px) {
	html { overflow-x: hidden; }
	body.nav-open { overflow: hidden; }
	body.nav-open::before {
		content: "";
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .45);
		z-index: 1250;
	}

	#header {
		height: auto;
		z-index: 1300;
	}
	#header .header_inner { height: 72px; }
	#header .header_inner h1#logo a {
		top: 12px;
		width: 160px;
		height: 46px;
		background-size: contain;
	}
	#header .header_inner .glb,
	#header .header_inner .searchForm { display: none; }

	.btn_nav {
		display: block;
		position: absolute;
		top: 20px;
		right: 16px;
		z-index: 1300;
		width: 32px;
		height: 32px;
		border: 0;
		background: none;
		padding: 0;
		cursor: pointer;
	}
	.btn_nav span,
	.btn_nav span:before,
	.btn_nav span:after {
		display: block;
		position: absolute;
		left: 4px;
		width: 24px;
		height: 2px;
		background: #333;
		content: "";
	}
	.btn_nav span { top: 15px; }
	.btn_nav span:before { top: -8px; }
	.btn_nav span:after { top: 8px; }
	body.nav-open .btn_nav span { background: transparent; }
	body.nav-open .btn_nav span:before { top: 0; transform: rotate(45deg); }
	body.nav-open .btn_nav span:after { top: 0; transform: rotate(-45deg); }

	#gnb {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 72px;
		z-index: 1400;
		background: #fff;
		border-top: 1px solid #e5e5e5;
		max-height: calc(100vh - 72px);
		overflow-y: auto;
	}
	body.nav-open #gnb { display: block; }
	nav.gnb_area { width: 100%; padding: 0; }
	nav.gnb_area > ul > li {
		float: none;
		width: 100%;
		background: none;
		border-bottom: 1px solid #eee;
	}
	nav.gnb_area > ul > li > a {
		height: 48px;
		line-height: 48px;
		text-align: left;
		padding: 0 20px;
		font-size: 16px;
	}
	nav.gnb_area > ul > li > a.on,
	nav.gnb_area > ul > li > a:hover {
		border-bottom: 0;
		background: #f5f8fb;
	}
	nav.gnb_area > ul > li > div,
	nav.gnb_area > ul > li > div.in {
		display: none !important;
		position: static !important;
		width: 100% !important;
		height: auto !important;
		border: 0 !important;
		background: #fafafa;
	}
	nav.gnb_area > ul > li.open > div,
	nav.gnb_area > ul > li.open > div.in {
		display: block !important;
	}
	nav.gnb_area > ul > li > div > ul {
		height: auto;
		padding: 8px 0 12px;
	}
	nav.on .nav_bg,
	#gnb .gnb_bg { display: none !important; }

	#gnb .m-util {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		padding: 10px 16px;
		background: #155986;
		list-style: none;
	}
	#gnb .m-util li { background: none; }
	#gnb .m-util li a {
		display: block;
		color: #fff;
		font-size: 13px;
		padding: 6px 10px;
		line-height: 1.4;
	}
	#gnb form.m-search {
		display: block;
		padding: 12px 16px 16px;
		background: #f4f7fa;
	}
	#gnb form.m-search .searchForm {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		height: 40px;
		background: #fff;
		border: 1px solid #d5dee6;
		box-sizing: border-box;
	}

	.path ol {
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}
	.path ol li {
		padding: 10px 8px;
		font-size: 12px;
	}

	#aside {
		float: none;
		width: 100%;
		padding-top: 16px;
		margin-bottom: 16px;
	}
	#aside h3 {
		font-size: 20px;
		text-align: left;
		padding-bottom: 10px;
	}
	.btn_snb {
		display: block;
		width: 100%;
		height: 44px;
		margin-bottom: 8px;
		border: 1px solid #d5dee6;
		background: #fff url('../images/common/off.png') right 14px center no-repeat;
		padding: 0 40px 0 14px;
		text-align: left;
		font-size: 15px;
		cursor: pointer;
	}
	body.snb-open .btn_snb {
		background-image: url('../images/common/on.png');
		background-color: #155986;
		border-color: #155986;
		color: #fff;
	}
	#snb { display: none; }
	body.snb-open #snb { display: block; }
	#content {
		margin-left: 0;
		padding-bottom: 40px;
		min-height: 0;
	}
	#content .sub_title { height: auto; margin-bottom: 20px; padding-top: 0; }
	#content .sub_title h2 { margin: 16px 0 12px; font-size: 22px; }

	.spot {
		display: flex;
		flex-direction: column;
		height: auto;
		min-height: 0;
	}
	.spot .visual_area { order: 1; }
	.spot .NoticeVisual { order: 2; }
	.spot.sub { height: auto; }
	.spot .ls-wp-fullwidth-container,
	.spot .ls-wp-fullwidth-helper,
	.spot #layerslider,
	.spot .ls-wp-container {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 280px !important;
		min-height: 280px !important;
	}
	.spot.sub #layerslider,
	.spot.sub .ls-wp-container {
		height: 160px !important;
		min-height: 160px !important;
	}
	.spot .ls-l {
		white-space: normal !important;
		left: 5% !important;
		width: 90% !important;
		top: 50% !important;
		margin-left: 0 !important;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		text-align: center;
	}
	.visual_title,
	.f_size60 { font-size: 28px !important; }
	.f_size40 { font-size: 22px !important; }
	.f_size28 { font-size: 16px !important; }

	.NoticeVisual {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		width: 100%;
		height: auto;
		margin: 0;
		background: #155986 !important;
		background-image: none !important;
		z-index: 2;
	}
	.NoticeVisual ul {
		display: flex;
		flex-wrap: wrap;
	}
	.NoticeVisual li {
		float: none;
		width: 50%;
		box-sizing: border-box;
		padding: 12px 4%;
		height: auto;
	}
	.NoticeVisual li h3,
	.NoticeVisual li p,
	.NoticeVisual li span.more a {
		float: none;
		width: auto;
		display: block;
		line-height: 1.4;
	}
	.NoticeVisual li p span.date { float: none; display: block; margin-top: 4px; }

	.section01 { padding: 24px 0; }
	.section01 .BannerArea li,
	.section01 .BannerArea li.last,
	.section01 .mList li.area {
		aspect-ratio: auto;
	}
	.section01 .BannerArea li.mbanner {
		width: calc(50% - 6px);
		height: 200px;
		min-height: 200px;
		overflow: hidden;
	}
	.section01 .BannerArea li.mbanner .sample_image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.section01 .BannerArea li.last {
		width: 100%;
		min-height: 0;
	}
	.section01 .BannerArea li.last ul li { width: 100%; }
	.section01 .mList li.area {
		width: calc(50% - 6px);
		min-height: 0;
	}
	.section02 { padding: 40px 0; }
	.section02 ul li {
		width: 50%;
		box-sizing: border-box;
		border-left: 1px solid #ededed;
	}

	.conArea p.blueBox.left_p,
	.conArea p.blueBox.right_p,
	.blueBox,
	.grayBox {
		width: auto;
		float: none;
		box-sizing: border-box;
	}
	#content .contents_input,
	#content .contents_textarea,
	#content .contents_select {
		max-width: 100%;
		box-sizing: border-box;
	}

	.subTitBox,
	#lmcUser_login,
	div#lmcUser_login .login_box,
	div#lmcUser_login .login_box ul {
		width: 100% !important;
		box-sizing: border-box;
	}
	#lmcUser_login { padding: 20px; }
	div#lmcUser_login .login_box { position: static; }
	div#lmcUser_login .login_box span,
	div#lmcUser_login .login_box a.btnJoin,
	div#lmcUser_login .login_box a.btnIdpw {
		position: static !important;
		display: inline-block;
		margin: 8px 8px 0 0;
	}

	#content table,
	.contents table {
		width: 100% !important;
		table-layout: auto !important;
	}
	.contents {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		word-break: break-word;
	}
	#content nobr,
	.contents nobr {
		white-space: normal;
	}
	ul.tap {
		display: flex !important;
		flex-wrap: wrap;
	}
	ul.tap li,
	ul.tap li a {
		float: none;
	}

	#content table.table_tg col { display: none; }
	#content table.table_tg,
	#content table.table_tg tbody,
	#content table.table_tg tr,
	#content table.table_tg th,
	#content table.table_tg td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}
	#content table.table_tg th {
		border-bottom: 0;
		padding-bottom: 4px;
	}

	.history { margin-top: 0; }
	.history .line { display: none; }
	.history li,
	.history li:nth-child(2n) {
		float: none;
		width: auto;
		margin: 0 0 20px;
		text-align: left;
		padding: 0 0 0 20px;
		border-left: 3px solid #afbfd2;
	}
	.history li h4 { font-size: 20px !important; }
	.history li h4:after,
	.history li:nth-child(2n) h4:after { display: none; }
	.hisImg { height: 160px; }
	.hisImg__text { font-size: 16px; }
	.business {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}
	.business h3 { width: 100%; }
	.tcustomer {
		width: calc(50% - 24px);
		height: auto;
		box-sizing: border-box;
	}
	.tcustomer img {
		width: 100%;
		height: auto;
	}

	.business_box01,
	.business_box02 {
		height: auto;
		overflow: visible;
	}
	.business_box01 p,
	.business_box02 li.txt {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		margin: 12px auto !important;
	}
	.business_box01 .line01,
	.business_box01 .line02,
	.business_box02 .title01:before,
	.business_box02 .title02:before,
	.business_box02 .title03:before,
	.business_box02 .title_line01,
	.business_box02 .title_line02,
	.business_box02 .title_line03 { display: none; }

	.copyMenu { height: auto; line-height: 1.4; padding: 10px 0; }
	.copyMenu .f_menu li { display: block; margin: 0; padding: 0; background: none; line-height: 32px; }
	#footer address,
	#footer p.copy { font-size: 12px; word-break: keep-all; }
}

@media screen and (max-width: 768px) {
	.NoticeVisual ul,
	.NoticeVisual li {
		display: block;
		width: 100%;
	}
	.section01 .BannerArea li.mbanner,
	.section01 .mList li.area {
		width: 100%;
	}
	.section02 ul li { width: 100%; }
	.section02 ul li a p br { display: none; }
	.hisImg { height: 140px; }
	.tcustomer { width: calc(50% - 16px); margin: 8px; }

	.sitemap-wrap,
	.sitemap-wrap > tbody,
	.sitemap-wrap > tbody > tr,
	.sitemap-wrap > tbody > tr > td {
		display: block;
		width: 100% !important;
	}
	.sitemap-wrap col,
	.sitemap-wrap > tbody > tr > td:empty { display: none; }
	.sitemap-wrap > tbody > tr > td { margin-bottom: 16px; }
}

@media screen and (max-width: 640px) {
	#content table .head_line,
	#content table td.head_line { display: none; }
	#content table td.body_num:first-child { display: none; }
	#content .head_bold { font-size: 12px; }
	#content .body_subject { word-break: break-all; }
	.tcustomer { width: 100%; margin: 8px 0; }
}

/* ========== board_basic / board_recruit 반응형 스킨 ========== */
.board-wrap {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.board-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}
.board-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}
.board-tabs__item {
	display: inline-block;
	padding: 8px 12px;
	border: 1px solid #ddd;
	background: #f7f7f7;
	font-size: 13px;
}
.board-tabs__item.on {
	background: #3678c8;
	border-color: #2966b0;
	color: #fff;
}
.board-list {
	border-top: 2px solid #222;
}
.board-list__head,
.board-list__item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) 80px 42px 90px 50px;
	gap: 8px;
	align-items: center;
	padding: 10px 4px;
	border-bottom: 1px dotted #ccc;
	box-sizing: border-box;
}
.board-list__head {
	background: #fff;
	font-weight: bold;
	text-align: center;
	border-bottom: 1px solid #b1b1b1;
}
.board-list--no-file .board-list__head,
.board-list--no-file .board-list__item {
	grid-template-columns: 56px minmax(0, 1fr) 80px 90px 50px;
}
.board-list__item .col-subject {
	min-width: 0;
	word-break: break-word;
}
.board-list__item .col-subject img {
	vertical-align: middle;
	margin-right: 4px;
}
.board-list__item .col-num,
.board-list__item .col-name,
.board-list__item .col-file,
.board-list__item .col-date,
.board-list__item .col-hit,
.board-list__head span {
	text-align: center;
}
.board-list__item .col-subject { text-align: left; }
.board-footer {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.board-pager { text-align: center; }
.board-actions { text-align: right; }
.board-search {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
	align-items: center;
}
.board-search .tail_input { max-width: 100%; box-sizing: border-box; }

.board-view__header {
	border-top: 2px solid #222;
	border-bottom: 1px solid #b1b1b1;
	padding: 14px 10px;
	background: #f8fafd;
}
.board-view__header .view_subject {
	margin: 0 0 10px;
	font-size: 18px;
	line-height: 1.4;
	word-break: break-word;
}
.board-view__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	font-size: 13px;
}
.board-view__body {
	padding: 16px 10px;
	word-break: break-word;
	overflow-wrap: anywhere;
}
.board-view__body img { max-width: 100%; height: auto; }
.board-view__ip,
.board-view__extra,
.board-view__comment {
	padding: 8px 10px;
	border-top: 1px dotted #ccc;
}
.board-view__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 0 10px;
	border-top: 1px solid #b1b1b1;
}
.board-view__actions img { vertical-align: middle; }
.board-etc-table { width: 100%; }

.recruit-summary__top {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 12px 0;
}
.recruit-thumb img {
	width: 150px;
	max-width: 100%;
	height: auto;
	display: block;
}
.recruit-info {
	flex: 1;
	min-width: 200px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.recruit-info li { padding: 6px 0; }
.recruit-info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 16px;
}
.recruit-info-grid .label,
.recruit-info .label {
	display: inline-block;
	min-width: 72px;
	margin-right: 6px;
	color: #555;
	font-weight: bold;
}
.board-write { width: 100%; }
.board-write__table { width: 100% !important; max-width: 100%; }
.board-write__full { width: 100% !important; max-width: 100%; box-sizing: border-box; }
.board-write input[type="text"],
.board-write input[type="password"],
.board-write input[type="file"],
.board-write textarea,
.board-write select {
	max-width: 100%;
	box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
	.board-list__head { display: none; }
	.board-list__item,
	.board-list--no-file .board-list__item {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 6px 8px;
		padding: 12px 6px;
	}
	.board-list__item .col-num {
		width: 36px;
		flex: 0 0 36px;
		text-align: left;
	}
	.board-list__item .col-subject {
		flex: 1 1 calc(100% - 50px);
		min-width: 0;
	}
	.board-list__item .col-name,
	.board-list__item .col-file,
	.board-list__item .col-date,
	.board-list__item .col-hit {
		flex: 0 0 auto;
		margin: 0 8px 0 0;
		text-align: left;
		font-size: 12px;
		color: #777;
	}
	.board-list__item .col-name { margin-left: 44px; }
	.board-list__item .col-name:before { content: "작성자 "; }
	.board-list__item .col-date:before { content: "등록 "; }
	.board-list__item .col-hit:before { content: "조회 "; }
	.board-actions,
	.board-search { justify-content: center; text-align: center; }
	.recruit-info-grid { grid-template-columns: 1fr; }
	.board-view__actions { justify-content: center; }
	.board-view__actions-left,
	.board-view__actions-right {
		width: 100%;
		text-align: center;
	}
	.board-write__table,
	.board-write__table table {
		display: block;
		width: 100% !important;
	}
	.board-write__table col { display: none; }
	.board-write__table tr {
		display: block;
		margin-bottom: 8px;
	}
	.board-write__table td {
		display: block;
		width: 100% !important;
		text-align: left !important;
		padding: 4px 0 !important;
		box-sizing: border-box;
	}
}