@charset "UTF-8";

/*  첫 화면 컨텐츠 스타일  */
.idx_title {
	font-size: 20px;
}
.white:hover {
	border:1px solid red;
}

.main_top {
	width: 1300px;
	height: 174px;
	background: url("/img/m_images/main_img.webp?v=3");
}
.main_top_ch {
	vertical-align: middle;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 50%;
}

.main_bottom {
	width: 1300px;
	height: 274px;
}
.main_bottom_title {
	padding: 20px;
	text-align: center;
}
.main_bottom_title h2 { font-size: 28px; line-height: 1.4; margin-top: 10px; font-weight: bold; }

.main_bottom_contents {
	text-align: center;
	}
.main_bottom_contents h3 { font-size: 16px; font-style: italic; margin-top: 0; margin-bottom: 10px; font-weight: bold; color: #FF8224; }

.middle {
  position: absolute; left: 50%; top: 50%; 
  transform: translate(-50%, -50%); text-align: center;
}

/* 게시판 상단 박스 이미지 */
.board-top {
	width:100%;
	padding: 5px 5px 5px 5px;
}
.board-top-image {
	max-width:100%;
	height: auto;
}
/* 게시판 상단 박스 컨텐츠 */
.list-top-box { padding: 10px; border-radius: 5px; margin-bottom: 10px; }

.list-top-box .top-title { padding: 0 15px; width: 100%; }
.list-top-box .top-title h2 { font-size: 28px; line-height: 1.4; margin-top: 10px; font-weight: bold; }

.list-top-box .top-contents { padding: 0 15px 15px 15px; display: inline-block; width: 100%; }
.list-top-box .top-contents h3 { font-size: 16px; font-style: italic; margin-top: 0; margin-bottom: 10px; }
.list-top-box .top-contents p { font-size: 14px; text-align: justify; }

.list-top-box .top-contents-img { display: inline-block; padding-right: 20px; }
.list-top-box .top-contents-img { float: left; display: inline-block; padding-right: 20px; }

.list-top-box .yellow { color: #FFBB00; }
.list-top-box .red { color: #DB0000; }
.list-top-box .sky { color: #00D8FF; }
.list-top-box .org { color: #FF8224; }
.list-top-box .blue { color: #96adfc; }
.list-top-box .green { color: #a8f29a; }

.bottom-box { padding: 10px; border-radius: 5px; }

.bottom-box .bottom-contents { padding: 0 15px 15px 15px; display: inline-block; }
.bottom-box .bottom-contents h3 { font-size: 18px; padding-bottom: 10px; font-style: italic; }
.bottom-box .bottom-contents p { font-size: 14px; text-align: justify; }

.bottom-box .bottom-contents img { float: left; display: inline-block; padding-right: 20px; }
.bottom-box .bottom-contents .f-right { float: right; }
.bottom-box .bottom-contents .f-right img { display: inline-block; padding-left: 20px; padding-right: 0px; }

.bottom-box .yellow { color: #FFBB00; }
.bottom-box .red { color: #DB0000; }
.bottom-box .sky { color: #00D8FF; }
.bottom-box .org { color: #FF8224; }
.bottom-box .blue { color: #96adfc; }
.bottom-box .green { color: #a8f29a; }

@media all and (max-width: 768px) {
	.list-top-box .top-title h2 { text-align: center; margin: 0 auto; margin-top: 15px; font-size: 20px; line-height: 1.2; font-weight: bold; }
	.list-top-box .top-contents h3 { text-align: center; margin: 0 auto; padding: 20px 0 10px 0; font-size: 16px; font-style: italic; }
	.list-top-box .top-contents { padding: 0; }
	.list-top-box .top-contents img { width: 100%; display: block; padding-right: 0; padding-bottom: 10px; }
	.list-top-box .top-contents p { font-size: 14px; padding: 0 5px; }

	.bottom-box .bottom-title h2 { text-align: center; margin: 0 auto; margin-top: 15px; font-size: 20px; line-height: 1.2; font-weight: bold; }
	.bottom-box .bottom-contents h3 { text-align: center; margin: 0 auto; padding: 20px 0 20px 0; font-size: 16px; font-style: italic; }
	.bottom-box .bottom-contents { padding: 0; }
	.bottom-box .bottom-contents img { width: 100%; display: block; padding-right: 0; padding-bottom: 10px; }
	.bottom-box .bottom-contents .f-right { float: left; width: 100%; }
	.bottom-box .bottom-contents .f-right img { width: 100%; display: block; padding-left: 0; padding-bottom: 10px; }
	.bottom-box .bottom-contents p { font-size: 14px; padding: 0 5px; }
}