@charset "utf-8";

/* search_field */
.bbs_top {
	position: relative;
	width: 100%;
	margin-bottom: 1rem;padding: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.bbs_sch {
	display: flex;
	justify-content: flex-end;align-items: center;
	gap: 0.5rem;
}
.bbs_sch input,
.bbs_sch select {
	-webkit-border-radius: 0.25rem;
	border-radius: 0.25rem;
}
.bbs_sch button.schBtn{
	width: 40px;height: 40px;
	border-color:transparent;
	background-color: #203F73;
	background-image: url('/images/jongha/common/ic_sch.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 1rem auto;
	transition: background .2s;
	text-indent: -999rem;
	-webkit-border-radius: 0.25rem;
	border-radius: 0.25rem;
}
.bbs_sch button.schBtn:hover {
	background-color: #1B8438;
}
.bbs_total {
	display: flex;
	gap: 0;	
	margin: 0;padding: 0;
}
.bbs_total p {position: relative;margin-right: 1rem;padding-right: 1rem;font-weight: 500;color: #464C53;}
.bbs_total p:first-child::before {
	display: block;
	position: absolute;
	content: '';
	top: 50%;right: 0;
	transform: translateY(-50%);
	width: 1px;
	height: 1rem;
	background-color: #ddd;
}
.bbs_total p em {color: #121212;font-weight: 600;}

/* bbs_table */
.bbs_table {
	margin-bottom:2rem;
	padding:0;
	border:0; border-top:2px solid #000;
	border-spacing:0;border-collapse:separate;
	word-break:normal;
	overflow:hidden;
}
.bbs_table thead th {
	padding: 1rem 1.5rem;
	font-weight: 600;
	color: #121212;
	background-color: #F4F5F9;
}
.bbs_table tbody td {
	padding: 1rem 1.5rem;
	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: 0.85rem;color: #fff;background-color: #146ed8;-webkit-border-radius: 2rem;border-radius: 2rem;}

/* 새글 */
.ic-new {display: inline-block;width: 2.5rem;height: 1.25rem;margin-left:0.25rem;padding: 0;font-size: 0.75rem;font-weight: 700;line-height: 1.25rem;color: #fff;text-align: center;background-color: #d81313;-webkit-border-radius: 99rem;border-radius: 99rem;vertical-align:middle;}
@media all and (max-width:768px){
	.ic-new {font-size:0.533rem;line-height:1.1rem;}
}
		
/* bbs_view */
.bbs_view {
	width: 100%;
	margin: 0;padding: 0;
	background-color: #fff;
	border-top: 2px solid #000;
}
.bbs_view .view_title {
	margin: 0;padding: 1.5rem 1.75rem;
	font-size: 1.25rem;font-weight: 600;
	color: #000;
	background-color: #F4F5F9;
	border-bottom: 1px solid #D6DFEB;
}
.bbs_view ul.view_head {
	width:100%;
	margin: 0;padding: 1rem 1.75rem;
	display: flex;
	align-items: center;gap: 1.5rem;
	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.5rem;
	font-weight: 400;
}
.bbs_view ul.view_head li::before {
	position: absolute;
	content: '';
	display: block;
	width: 1px;height: 1rem;
	top: 50%;right: -0.75rem;
	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: 8rem;
	margin-bottom: 3rem;padding: 2rem;
	border-bottom: 1px solid #D6DFEB;
} 
.bbs_view .file{
	overflow:hidden;
	padding:10px 20px;	
	border-bottom: 1px solid #D6DFEB;
}
.bbs_view .file span {display:none;}
.bbs_view .file a{
	display:inline-block;
	margin: 0; padding-left: 2rem;
	font-size: 0.95rem;font-weight: 400;
	background-image: url('/images/susang/common/icon_bbs_file.svg');
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 24px auto;
}

/* bbs_write(일반) */
.bbs_write {width:100%;border-collapse:collapse;word-break:break-all;border-spacing:0;border-top:2px solid #000}
.bbs_write th {padding:10px 10px;word-break:break-all;background:#f9f9f9;color:#000;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: 3rem 0;
	border-top: 2px solid #111;
	border-bottom: 1px solid #D6DFEB;
}
.bbs_gallery > ul{	
	margin: 0 -1.5rem;padding: 0;
	display: flex;
	flex-wrap:wrap;
	row-gap: 3rem;
}
.bbs_gallery > ul > li{
	width: calc(100% / 3);
	margin: 0;padding: 0 1.5rem; 
}
.bbs_gallery > ul > li a {
	display: block;
	height: 100%;
}
.bbs_gallery > ul > li a img{
	width: 100%;height: 100%;
	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: 1.5rem 0 0.5rem;
	padding:0;
	font-size: 1.15rem;
	font-weight: 600;	
	max-width: 80%;
	overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.bbs_gallery > ul > li a:hover strong{color: #2b58bf;}
.bbs_gallery > ul > li span.data{
	margin: 0;padding: 0;
	color: #616161;
}

/* pagination */
.pagination {
	width: 100%;
	margin: 3rem auto;padding: 0;
	text-align: center;
}
.page {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.25rem;
}
.page a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2.5rem;height: 2.5rem;
	color: #464C53;
	font-size: 0.95rem;
	text-align: center;
	background-color: #fff;
	border: 1px solid #D6DFEB;
	-webkit-border-radius: 0.25rem;
	border-radius: 0.25rem;	
	transition : 0.4s all linear;
}
.page a:hover {background-color: #eee;}
.page a.active {
	font-weight: 700;
	color: #fff;
	background-color: #424242;
	border-color: transparent;
}
.page a span{
	display: block;
	font-size: 0;
	text-indent: -999rem;
	-webkit-border-radius: 0.25rem;
	border-radius: 0.25rem;
}
.page a span::before {
	position: absolute;
	content: '';display: block;
	top: 50%;left: 50%;
	width: 0.75rem;height: 0.75rem;
	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:1023px){	
	/* search_field */
	.bbs_top {margin-bottom: 0.5rem;}
}

@media all and (max-width:768px) {
	/* search_field */	
	.bbs_top {
		margin: 1rem 0;
		padding: 1rem;
		justify-content: center;
		background-color: #F4F5F9;
		-webkit-border-radius: 0.25rem;
		border-radius: 0.25rem;		
	}
	.bbs_sch button.schBtn{
		width: 2rem;height: 2rem;
		-webkit-border-radius: 0.15rem;
		border-radius: 0.15rem;		
	}
	.bbs_sch input,
	.bbs_sch select {height: 2rem;}
	.bbs_total {display: none;}
	
	/* bbs_table */
	.bbs_table thead th,
	.bbs_table tbody td {
		padding: 0.5rem 1rem;
		font-size: 0.85rem;
	}	
		
	/* bbs_view(일반) */
	.bbs_view .view_title {
		padding: 1.25rem;
		font-size: 1rem;
	}
	.bbs_view ul.view_head {
		flex-direction: column;
		align-items: flex-start;
		padding: 0.5rem 1.25rem;
		gap: 0;
	}
	.bbs_view ul.view_head li{
		gap: 0.5rem;
		font-size:0.85rem;
	}
	.bbs_view ul.view_head li:before {display:none;}
	.bbs_view .bbs_cont {
		min-height: 5rem;
		margin-bottom: 2rem;padding: 1rem;
		font-size:0.85rem;
	} 
	.bbs_view .file{padding: 0.5rem;}
	.bbs_view .file span {display:none;}
	.bbs_view .file a{
		padding-left: 1.5rem;
		font-size: 0.85rem;
	}
	
	/* 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 {padding: 1rem 0;border-top: 0;}
	.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;
		font-size: 1rem;
	}
	.bbs_gallery > ul > li span.data{font-size:0.85rem;}

	/* pagination */
	.pagination {margin: 1rem auto;}
	.page {width: 100%;}
	.page a{
		width: 1.5rem;height: 1.5rem;
		font-size: 0.75rem;
	}
}
@media all and (max-width:480px) {
		
	/* bbs_table */
	.bbs_table tbody .subject a,
	.bbs_table tbody .subject a:hover{max-width: 10rem;}
	
	/* gallery_list */
	.bbs_gallery > ul {margin: 0;row-gap: 2rem; }
    .bbs_gallery > ul > li {padding: 0;width: 100%; }
}