@charset "utf-8";

/* search_field */
.bbs_top {
	position: relative;
	width: 100%;
	margin-bottom: 2rem;padding: 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.bbs_sch fieldset {
	display: flex;
	justify-content: flex-end;align-items: center;
	gap: 0.4rem;
}
.bbs_sch select {border-color: #ccc;}
.bbs_sch button.schBtn{
	width: 40px;height: 40px;
	border-color:transparent;
	background-color: #2e5cb2;
	background-image: url('/images/jongha/common/ic_sch.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 1.6rem auto;
	border-radius: 0.2rem;
	transition: background .2s;
	text-indent: -999rem;
}
.bbs_sch button.schBtn:hover {
	background-color: #256EF4;
}
.bbs_total {
	display: flex;
	gap: 0;	
	margin: 0;padding: 0;
}
.bbs_total p {
	position: relative;
	margin-right: 1.2rem;
	padding-right: 1.2rem;
	font-size:  clamp(1.3rem, 1.4vw, 1.5rem);
	color: #464C53;
}
.bbs_total p:first-child::before {
	display: block;
	position: absolute;
	content: '';
	top: 50%;right: 0;
	transform: translateY(-50%);
	width: 1px;
	height: 1.6rem;
	background-color: #ddd;
}
.bbs_total p em {color: #121212;font-weight: 600;}

/* bbs_table */
.bbs_table {
	margin-bottom: 2rem;
	padding: 0;
	font-size:  clamp(1.4rem, 1.5vw, 1.6rem);
	line-height: 1.5;
	border:0; border-top:2px solid #111;
	border-spacing:0;border-collapse:separate;
	word-break:normal;
	overflow:hidden;
}
.bbs_table thead th {
	padding: 1.6rem;
	font-weight: 600;
	color: #111;
	background-color: #EEF2F7;
	border-bottom:1px solid #D6DFEB;
}
.bbs_table tbody td {
	padding: 1.6rem 2rem;
	font-weight: 400;
	color: #464C53;
	border-bottom:1px solid #D6DFEB;
	text-align:center;
	background-color: #fff;
}
.bbs_table tbody .subject {text-align: left;}
.bbs_table tbody .subject a,
.bbs_table tbody .subject a:hover{
	display: inline-block;
	position: relative;	
	max-width: 80%;
	overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
	vertical-align: middle;
}
.bbs_table tbody tr:hover,
.bbs_table tbody tr:focus,
.bbs_table tbody tr.notice_line {background-color: #F7F8FA;}
.notice {display: inline-block;padding:0 1rem;height:28px;font-size: 1.4rem;color: #fff;background-color: #146ed8;border-radius: 2rem;-webkit-border-radius: 2rem;}

/* 새글 */
.ic-new {display: inline-block;width: 2.5rem;height: 1.25rem;margin-left:0.25rem;padding: 0;font-size: clamp(1.3rem, 1.5vw, 1.5rem);font-weight: 700;line-height: 1.5;color: #fff;text-align: center;background-color: #d81313;border-radius: 99rem;-webkit-border-radius: 99rem;vertical-align:middle;}
 
/* bbs_view */
.bbs_view {
	width: 100%;
	margin: 0;padding: 0;
	font-size: clamp(1.4rem, 1.5vw, 1.6rem);
	background-color: #fff;
	border-top: 2px solid #111;
}
.bbs_view .view_title {
	margin: 0;padding: 2rem;
	font-size: clamp(1.6rem, 1.6vw, 1.8rem);font-weight: 600;
	line-height: 1.5;
	color: #111;
	background-color: #F4F5F9;
	border-bottom: 1px solid #D6DFEB;
}
.bbs_view ul.view_head {
	width:100%;
	margin: 0;padding:  2rem;
	display: flex;
	align-items: center;gap: 2rem;
	background: #fff;
	border-bottom: 1px solid #D6DFEB;
	overflow: hidden;
}
.bbs_view ul.view_head li{
	position: relative;
	margin: 0;padding: 0;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-size:  clamp(1.3rem, 1.4vw, 1.5rem);
	font-weight: 400;
}
.bbs_view ul.view_head li::before {
	position: absolute;
	content: '';
	display: block;
	width: 1px;height: 1.6rem;
	top: 50%;right: -1rem;
	transform: translateY(-50%); 
	background-color: #D6DFEB;
}
.bbs_view ul.view_head li:last-child::before {display:none;}
.bbs_view ul.view_head li span{
	position: relative;
	display: block;
	margin: 0; padding: 0;
	color:#000;
}
.bbs_view ul.view_head li span::after {
	content:':';
	display:inline-block;
	margin-left: 0.5rem;padding: 0;
}
.bbs_view .bbs_cont {
	min-height: 40rem;
	margin-bottom: 3rem;padding: 4rem 2rem;
	border-bottom: 1px solid #D6DFEB;
} 
.bbs_view .file{
	overflow:hidden;
	padding: 2rem;	
	border-bottom: 1px solid #D6DFEB;
}
.bbs_view .file span {display:none;}
.bbs_view .file a{
	display:inline-block;
	margin: 0; padding-left: 2.8rem;
	font-size:  clamp(1.3rem, 1.4vw, 1.5rem);font-weight: 400;
	line-height: 1.5;
	background-image: url('/images/susang/common/icon_bbs_file.svg');
	background-position: 0 center;
	background-repeat: no-repeat;
	background-size: 2.4rem auto;
}

/* bbs_write(일반) */
.bbs_write {width:100%;border-collapse:collapse;word-break:break-all;border-spacing:0;border-top:2px solid #111}
.bbs_write th {padding:10px 10px;word-break:break-all;background:#f9f9f9;color:#111;font-weight:500;border-bottom:1px solid #ccc;letter-spacing:-0.05em;}
.bbs_write td {padding:10px 10px;border-bottom:1px solid #ccc;}
.bbs_write textarea {resize:vertical;min-height:180px;height:180px;border:1px solid #ccc;outline:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box; box-sizing:border-box}
.bbs_write input[type=text] {height:32px;line-height:32px;}
.bbs_write select {height:32px;line-height:32px;}

/* gallery_list */
.bbs_gallery {
	margin: 0;padding: clamp(3.2rem, 3.6vw, 4rem) 0;
	border-top: 2px solid #111;
	border-bottom:1px solid #D6DFEB;
}
.bbs_gallery > ul{	
	margin: 0 -1.6rem;padding: 0;
	display: flex;
	flex-wrap:wrap;
	row-gap: 4rem;
}
.bbs_gallery > ul > li{
	width: calc(100% / 3);
	margin: 0;padding: 0 1.6rem;
}
.bbs_gallery > ul > li a {
	display: block;
	width: 100%; height: 100%;
}
.bbs_gallery > ul > li a img{
	width: 100%;height: auto;
	object-fit: cover;
	object-position: center;
	transition: all 0.2s;
}
.bbs_gallery > ul > li:hover a img{transform: scale(1.05);}
.bbs_gallery > ul > li span.thumb {
	position: relative;
	display: block;
	width: 100%; 
	aspect-ratio: 333 / 200;/* 비율 */
	background: #F4F5F6 url('/images/susang/main/m_thumb.jpg') center center no-repeat;
	background-size: cover;
	overflow: hidden;
}
.bbs_gallery > ul > li a strong{
	display: block;
	margin: 2rem 0 0.8rem;
	padding:0;
	font-size: clamp(1.6rem, 1.6vw, 1.8rem);
	font-weight: 600;
	line-height: 1.5;
	max-width: 80%;
	overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.bbs_gallery > ul > li span.data{
	margin: 0;padding: 0;
	font-size:  clamp(1.3rem, 1.4vw, 1.5rem);
	color: #888;
}

/* pagination */
.pagination {
	width: 100%;
	margin: 4rem auto;padding: 0;
	text-align: center;
}
.page {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.4rem;
}
.page a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3.6rem;height: 3.6rem;
	color: #464C53;
	font-size:  clamp(1.3rem, 1.4vw, 1.5rem);
	text-align: center;
	background-color: #fff;
	border-radius: 0.2rem;
	transition : 0.4s all linear;
}
.page a:hover {background-color: #F7F8FC;}
.page a.active {
	font-weight: 700;
	color: #fff;
	background-color: #204ea8;
}
.page a span{
	display: block;
	width: 3.6rem;height: 3.6rem;
	font-size: 0;
	text-indent: -999rem;
	border: 1px solid #D6DFEB;
	border-radius: 0.2rem;
}
.page a span::before {
	position: absolute;
	content: '';display: block;
	top: 50%;left: 50%;
	width: 1.2rem;height: 1.2rem;
	transform: translateY(-50%) translateX(-50%);
	background-position: center center;
	background-repeat: no-repeat;
}
.page a.first span::before{background-image: url('/images/susang/common/icon_page_first.svg');}
.page a.prev span::before {background-image: url('/images/susang/common/icon_page_prev.svg');}
.page a.next span::before {background-image: url('/images/susang/common/icon_page_next.svg');}
.page a.last span::before {background-image: url('/images/susang/common/icon_page_last.svg');}

.bbs_more a{display:block;width:150px;margin:1.5em auto;padding:0.75em 0;text-align:center;color:#fff;border:1px solid rgba(0,0,0,0.2);background:#40569f url(../images/common/bbs_more.gif) 90% 48% no-repeat;transform:all .5s ease;transition:background .3s;}
.bbs_more a:hover,
.bbs_more a:active,
.bbs_more a:focus {background-color:#2d88db;}

@media all and (max-width:1199px){
	/* bbs_table */
	.bbs_table tbody .subject a,.bbs_table tbody .subject a:hover{max-width:300px;}
	
	/* gallery_list */	
	.bbs_gallery > ul {
		margin: 0 -1.25rem;
		row-gap: 3rem;
	}
    .bbs_gallery > ul > li {padding: 0 1.25rem; }
}

@media all and (max-width:768px) {
	/* search_field */	
	.bbs_top {
		margin: 1.6rem 0;
		padding: 2rem;
		justify-content: center;
		background-color: #F4F5F9;
		border-radius: 0.6rem;
	}
	.bbs_sch button.schBtn{
		width: 2.8rem;height: 2.8rem;
		background-size: 1.4rem auto;
	}
	.bbs_sch input,
	.bbs_sch select {height: 2.8rem;}
	.bbs_total {display: none;}
	
	/* bbs_table */
	.bbs_table thead th,
	.bbs_table tbody td {
		padding: 1.2rem 1.6rem ;
	}	
	.bbs_table tbody .subject a,
	.bbs_table tbody .subject a:hover{max-width: 20rem;}
		
	/* bbs_view(일반) */
	.bbs_view .view_title {
		padding: 1.6rem;
	}
	.bbs_view ul.view_head {
		flex-direction: column;
		align-items: flex-start;
		padding: 1.2rem;
		gap: 0;
	}
	.bbs_view ul.view_head li{
		gap: 0.8rem;
	}
	.bbs_view ul.view_head li:before {display:none;}
	.bbs_view .bbs_cont {
		min-height: 20rem;
		margin-bottom: 2rem;padding: 3.2rem 1.6rem;
	} 
	.bbs_view .file{padding: 1.2rem;}
	.bbs_view .file span {display:none;}
	.bbs_view .file a{
		padding-left: 2.8rem;		
		background-size: 2.4rem auto;
	}
	
	/* bbs_write(일반) */
	.bbs_write th {padding: 5px 0;width:120px;font-size:14px;}
	.bbs_write td {padding: 5px 0;}
	.bbs_write input[type=text] {height:26px;line-height:26px;}
	
	/* gallery_list */
	.bbs_gallery > ul {
		margin: 0 -1rem;
		row-gap: 2.5rem;
	}
    .bbs_gallery > ul > li {
    	padding: 0 1rem;
		width: calc(100% / 2);
	}
	.bbs_gallery > ul > li a strong{
		margin: 1rem 0 0.25rem;
	}

	/* pagination */
	.pagination {margin: 3rem auto;}
	.page {width: 100%;gap: 0.2rem;}
	.page a,
	.page a span{width: 2.4rem;height: 2.4rem;}
}
@media all and (max-width:480px) {
		
	/* bbs_table */
	.bbs_table thead th,
	.bbs_table tbody td {
		padding: 0.8rem 1.2rem ;
	}
	.bbs_table tbody .subject a,
	.bbs_table tbody .subject a:hover{max-width: 12rem;}
	
	/* gallery_list */
	.bbs_gallery > ul {margin: 0;row-gap: 2rem; }
    .bbs_gallery > ul > li {padding: 0;width: 100%; }
}

/* 달력_css */
#calendar_month {
	position: relative;
	margin-bottom: 3.2rem;
}
#calendar_month .month {
	display: flex;
	justify-content: center;
	align-items: center;
}
#calendar_month .month li.to_month {
	padding: 0 2rem;
	font-size: clamp(2.4rem, 1.7vw, 3rem);
}
#calendar_month .month li a {display:block;}
	.month_select {
		position: absolute;top: 0;right: 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 0.4rem;
	}
	.month_select label {position: absolute;left: -9999px;}
	.month_select select {height: 4rem;vertical-align: bottom;border: 1px solid #ccc;}
	.month_select span {
		display: inline-block;
		height: 4rem;
		padding-right: 1.2rem;
		line-height: 1.5;
		color: #888;
		border: 1px solid #ddd;
		border-left: 0;
		vertical-align: bottom;
	}
	.month_select input.btn{
		width: 40px;height: 40px;
		border-color:transparent;
		background-color: #2e5cb2;
		background-image: url('/images/jongha/common/ic_sch.svg');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 1.6rem auto;
		border-radius: 0.2rem;
		transition: background .2s;
		text-indent: -999rem;
	}
	.month_select input.btn:hover {background-color: #256EF4;}

#calendar {width:auto;margin:0;padding:0;}
#calendar table {
	position:relative;
	width:100%;
	font-size:  clamp(1.4rem, 1.5vw, 1.6rem);
	line-height: 1.5;
	border-top: 2px solid #111;
	border-spacing:0;border-collapse:separate;
}
#calendar table thead th {
	position: relative;
	padding: 1.6rem;
	font-weight: 600;
	color: #111;
	background-color: #EEF2F7;
	border: 1px solid #D6DFEB;
	border-left: 0;border-top: 0;
}
#calendar table thead th::before {
	position: absolute;
	content:'';
	bottom: 0;left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
#calendar table tbody td {
	position: relative;
	padding: 0.8rem;
	vertical-align: top;
	border: 1px solid #D6DFEB;
	border-top: 0;border-left: 0;
}
#calendar table thead th:first-child,
#calendar table tbody td:first-child  {border-left: 1px solid #D6DFEB;}
#calendar table tbody td span.day {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 3.2rem;height: 3.2rem;
	font-size: clamp(1.3rem, 1.4vw, 1.5rem);
}
#calendar table tbody td.today {background-color: #F7F8FC;}
#calendar table tbody td.today span.day {
	background-color: #394955;
	border-radius: 99rem;
	color: #FFF;
}
#calendar table tbody td span.day_name {
	display: block;
	position: absolute;
	top: 0;right: 0.4rem;
	font-size:  clamp(1.3rem, 1.4vw, 1.5rem);
	color: #888;
	text-align: right;
}
#calendar table tbody td span.holiday {display: block;color: #d1222f;}
#calendar .sun {color: #d1222f;}
#calendar .sat {color: #2b58bf;}
#calendar .schedule {min-height: 15rem;}

	/* 달력 안에 내용과 버튼 */
	ul.result_list {margin-top: 0.8rem;}
	ul.result_list li{margin-bottom: 0.4rem;}
	ul.result_list li a{
		display: block;
		padding-left: 2rem;
		font-size:  clamp(1.3rem, 1.4vw, 1.5rem);
		background: url('/images/dcsc/common/calendar_btn_popup.png') 0 0 no-repeat;
	}
	ul.result_list li a:hover{color:#26a979;}
	ul.result_list li a strong {font-weight: 500;}
	ul.result_list li.btn_more a strong{color:#26a979;}
	a.btn_request{
		display: inline-block;
		padding: 0.4rem 1.6rem;
		font-size: 1.3rem;
		color: #fff;
		border-radius: 60px 60px;
		background: #333;
	}
	/* 정보 */
	p.warn{margin-top: 2rem;}
	p.warn span.btn_request{
		display: inline-block;
		padding:0 1.2rem;
		font-size: 1.2rem;
		color: #fff;
		border-radius: 60px 60px;
		background: #333;
	}


/* 달력팝업_open width:430px*/
#detail_wrap{
	position: relative;
	width: 100%;height: 100%;
	background-color: #F7F8FC;
}
#detail_wrap div.tit{
	padding: 0.4rem 1.2rem 2rem 1.6rem;
	background: linear-gradient(45deg,rgba(36, 78, 162, 1) 0%, rgba(208, 48, 60, 1) 100%);
}
#detail_wrap div.tit p#detail_position{
	margin-bottom: 0.4rem;
	font-size: 1.3rem;
	color: #fff;
	text-align: right;
	opacity: 0.7;
}
#detail_wrap div.tit h1{
	display: block;
	font-size: clamp(2rem, 2.2vw, 2.4rem);
	color: #fff;
}
#detail_wrap div.cont{
	padding: 1.2rem;
	height: 40rem;
	overflow-y: auto;
	overflow-x: hidden;
}
#detail_wrap div.cont dl.d_box{
	width: 100%;
	margin-bottom: 1.2rem;
	padding: 2rem;
	background-color: #fff;
	border: 1px solid #D6DFEB;
	border-radius: 0.6rem;
	clear: both;
}
div.cont dl.d_box dt{
	margin-bottom: 1.2rem;
	padding-bottom: 1.2rem;
	font-size: clamp(1.4rem, 1.5vw, 1.6rem);
	line-height: 1.5;
	border-bottom: 1px solid #D6DFEB;
}
div.cont dl.d_box dt strong{
	display: block;
	font-size: clamp(1.6rem, 1.7vw, 1.8rem);
}
div.cont dl.d_box dt span{
	display:block;
	color: #2b58bf;
}
div.cont dl.d_box dd ul.d_list{padding-left: 0.4rem;}
div.cont dl.d_box dd ul.d_list li{
	padding-left: 1.2rem;
	font-size: clamp(1.4rem, 1.5vw, 1.6rem);
	line-height: 1.5;
	color: #666;
	background: url('/images/dcsc/common/list03_icon.gif') 0 center no-repeat;
}

#detail_wrap div.cont .d_input {border-top: 2px solid #333;}
#detail_wrap div.cont .d_input table {font-size: clamp(1.2rem, 1.3vw, 1.4rem);}
#detail_wrap div.cont .d_input table th {padding: 1.2rem 0.4rem;border-bottom: 1px solid #D6DFEB;border-right: 1px solid #D6DFEB;background: #f9f9f9; }
#detail_wrap div.cont .d_input table td {padding: 0.4rem;border-bottom: 1px solid #D6DFEB;background: #fff;}
#detail_wrap div.cont .d_input table td input.input {height: 2.1rem;}
#detail_wrap div.cont .d_input table td textarea {width:100%;}
#detail_wrap div.cont .d_input ul.input_info {margin: 1.6rem 0;}
#detail_wrap div.cont .d_input ul.input_info li {padding-left: 1.2rem;background:url('/images/dcsc/common/list01_icon.gif') 0 9px no-repeat; font-size:0.8rem;}
#detail_wrap a.d_close {display: block;margin: 1.2rem;padding: 0.8rem;font-size: clamp(1.4rem, 1.5vw, 1.6rem);color: #fff;text-align: center;background-color: #333;border-radius: 0.4rem;}
 
 
@media all and (max-width:1023px){	
	/* 달력_css */
	#calendar_month {margin-bottom: 1.6rem;}
	#calendar_month .month {margin-bottom: 1.6rem;}
	#calendar_month .month li.to_month {display: block;padding: 0 0.4rem;text-align: center;}
	#calendar_month .month img {transform:scale(0.8);}
		.month_select {position:relative;top:auto;right:0;bottom:0;width:100%;display:flex;justify-content:center;}	
		.month_select select.sel {height:35px;padding:0 25px 0 5px}
		.month_select input.btn {width:35px;height:35px;line-height:35px;}
	
	#calendar {border:0;}
	#calendar table col {display:block;}
	#calendar table thead th,
	#calendar table tbody td  {border-left: 1px solid #D6DFEB;}
	#calendar table tbody td {
		display: block;
		width: 100%;
		min-height: 3.2rem;
	}
	#calendar table tbody td:before {height:96%;}
	#calendar table tbody td span.day {margin-bottom: 0.2rem;}
	#calendar table tbody td .schedule {min-height:5rem;}
	#calendar::before,
	#calendar table thead,
	#calendar table tbody td.none,
	#calendar table tbody td .schedule br {display:none;}
	
	/* 달력 안에 내용과 버튼 */
	ul.result_list li a{padding-left: 2.4rem;}		
}