@charset "utf-8";

#bo_list {position:relative;max-width:1440px;margin:auto;}
#bo_list:after {display:block;clear:both;content:"";}

/* 목록 */
#timeline {position:relative;}
#timeline:before {
		content:"";display:block;position:absolute;left:50%;top:0;
		width:1px;height:100%;
		background:#c3ced9;
	}
#timeline:after {
	content:"";display:table;
	width:100%;
	clear:both;
}
.timeline-item {position:relative;margin-bottom:30px;}
.timeline-item:before, .timeline-item:after {content:'';display:block;clear:both;width:100%;}
.timeline-icon {
		position:absolute;left:50%;top:25px;
		width:10px;height:10px;margin-left:-5px;
		border-radius:50%;
		text-align:center;
		background:#c3ced9;
		overflow:hidden;
	}
.timeline-content {
		width:47%;padding:1rem;
		border:1px solid #dfdfdf;border-radius:5px;
		background:#f9f9f9;
		transition:all .3s ease;
	}
.timeline-content h2 {
		margin-bottom:20px;padding:10px 0 10px;
		border-bottom:1px dashed #dfdfdf;
		font-family:var(--ff-GMB);font-size:1.4em;font-weight:normal;color:#333;
		text-align:right;
	}
.timeline-content.right {float:right;}
.timeline-content .wrap {
		position:relative;
		margin-top:10px;padding:0 10px 0 25px;
	}
.timeline-content .wrap::before {
		content:'■';
		position:absolute;left:5px;top:0;
		font-size:.8em;color:#3cb035;
	}
.timeline-content .wrap a.m_btn {display:inline-block;vertical-align:middle;}
.timeline-content .wrap a.m_btn:before {content:"\f055";font-family:var(--ff-FA);font-size:20px;color:#666;}
.timeline-content .wrap a.m_btn:hover:before {color:#3cb035;}
.timeline-content .wrap .month {
		display:inline-block;
		width:60px;
		font-size:.88em;color:#999;line-height:1.3em;
	}
.timeline-content .wrap .cont {font-size:1.15em;line-height:1.5em;}
.bo_btn_bt {margin-bottom:80px;}

/* 쓰기 */
#bo_w {position:relative;max-width:1024px;margin:auto;}
.bo_w_form {margin-bottom:40px;border-top:1px solid #eee;}
.bo_w_form li {position:relative;padding:10px;border-bottom:1px solid #eee;}
.bo_w_form li.bo_w_option label {margin-right:10px;cursor:pointer;}


@media all and (max-width:1024px) {
	#timeline:before, #timeline:after, .timeline-icon {display:none;}
	.timeline-content, .timeline-content.right {width:100%;float:none;}
	.timeline-item {position:relative;margin-bottom:10px;}
}
@media (max-width:768px) {
	#lnb div.lnb {width:100%;}
	.timeline-content h2 {font-size:1.2em;}
	.timeline-content .wrap {font-size:.88em;}
	.timeline-content .wrap .month {display:block;}
}