@charset "utf-8";



/* @서브페이지에서는 헤더 무조건 배경 하얀색 처리@ */
#header{
	background-color: #fff !important;
	border-bottom: 1px solid #ccc !important;
}




/* @검색버튼 없애기~!@ */
.btn_bo_sch{ display: none; }




/* @리스트형 게시판 공통 스타일 설정 시작@ */
#board_list{
	background-color: var(--sub-bg-color01);
	padding: 80px 0 150px;
}

	#board_list .wrapper{
		display: block;
	}

	#board_list .list_wrap{
		background-color: #fff; border-radius: 50px;

		padding: 100px 70px;
	}

	#board_list .list{
		display: flex; flex-direction: column;
		border-top: 2px solid #222;
		border-bottom: 2px solid #222;
	}


	#board_list .list li:not(:last-of-type){
		border-bottom: 1px solid #ddd;
	}

	#board_list .list .list_head{
		display: flex; gap: 35px;
		align-items: center;

		font-size: 1.125rem; font-weight: 600;

		text-align: center;

		padding: 20px 0;

	}
	
	#board_list .list .list_head .list_num{
		width: 5%;
		font-size: inherit; font-weight: inherit; color: inherit;
	}

	#board_list .list .list_head .list_check{
		width: 5%;
	}

	#board_list .list .list_head .txt_prev{
		width: 68%; 
		font-size: inherit; font-weight: inherit; color: inherit;
	}

		#board_list .list .list_head .txt_prev h4{
			font-size: inherit; font-weight: inherit; color: inherit;

			width: 100%; 
		}
	



		#board_list .list .list_head  .writter{
			width: 8%;
			font-size: inherit; font-weight: inherit;
		}

		#board_list .list .list_head  .writter span{
			font-size: inherit; font-weight: inherit;
			color: inherit;
		}

		#board_list .list .list_head  .date{
			width: 8%;
			font-size: inherit; font-weight: inherit; color: inherit;
		}




	#board_list .list .list_cont{
		font-size: 1.0625rem;

		transition: 0.3s;

	}

	#board_list .list .list_cont:hover{
		background-color: var(--sub-bg-color01);
	}


	#board_list .list .list_cont a{
		display: flex; gap: 35px;
		align-items: center;

		text-align: center;

		padding: 20px 0;
	}

	#board_list .list .list_cont .list_num{
		width: 5%; font-weight: 500;
		color: var(--point-color01);
	}

	#board_list .list .list_cont .list_check{
		width: 5%; 

	}

	#board_list .list .list_cont .txt_prev{
		width: 68%; 
		text-align: left;
	}

		#board_list .list .list_cont .txt_prev h4{

			width: 100%; 
			overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
		}

		#board_list .list .list_cont .txt_prev p{
			margin-top: 10px; line-height: 1.8;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;

			color: #999;
		}
	


		#board_list .list .list_cont  .writter{
			width: 8%;
			color: #adadad;
		}

		#board_list .list .list_cont  .writter span{
			font-size: inherit; font-weight: inherit;
			color: inherit;
		}

		#board_list .list .list_cont  .date{
			width: 8%;
			color: #adadad;
		}


	#board_list .list_pager_wrap{
		margin-top: 50px;

		display: flex; 
		justify-content: center; align-items: center;
	}

		#board_list .list_pager_wrap > a{
			display: inline-block;
			width: 9px; height: 13px;

			margin: 0 15px;
		}

			#board_list .list_pager_wrap > a i{
				display: inline-block;
				width: 100%; height: 100%;
				background: url(/img/icn_pager_arrow.png) no-repeat;
			}

		#board_list .list_pager_wrap .pager_prev{}

			#board_list .list_pager_wrap .pager_prev i{
				background-position: top left;
			}

		#board_list .list_pager_wrap .pager_next{}

			#board_list .list_pager_wrap .pager_next i{
				background-position: top right;
			}

		#board_list .list_pager_wrap .pager{
			display: flex;
		}

			#board_list .list_pager_wrap .pager li{
				width: 35px; height: 35px;

				display: flex;
				justify-content: center; align-items: center;
			}

				#board_list .list_pager_wrap .pager li a{
					font-size: 1.125rem; font-weight: 300;
					transition: 0.3s;
				}
					#board_list .list_pager_wrap .pager li:hover a{
						color: var(--point-color02);
					}



			#board_list .list_pager_wrap .pager li.active{
				background-color: var(--point-color02);
				border-radius: 50%;
			}
				 #board_list .list_pager_wrap .pager li.active a{
					font-weight: 700; color: #fff;
				 }


		#board_list .only_member_btns{
			margin-top: 70px;

			display: flex;
			justify-content: flex-end; align-items: center;
		}

			#board_list .only_member_btns li{
				margin-left: 15px;
			}

				#board_list .only_member_btns li a{
					display: flex;

					padding: 10px 20px;
					font-size: 1.125rem; font-weight: 500;

					border-radius: 10px;

					transition: 0.3s;
				}

			#board_list .only_member_btns .btn_del{}

				#board_list .only_member_btns .btn_del a{
					color: var(--point-color01);

					border: 2px solid var(--point-color01);
				}

			#board_list .only_member_btns .btn_write{}

				#board_list .only_member_btns .btn_write a{
					background-color: var(--point-color01);
					color: #fff;

					border: 2px solid var(--point-color01);
				}

				#board_list .only_member_btns .btn_write:hover a{
					background-color: #453fc7;
				}

					#board_list .only_member_btns .btn_write a i{
						font-size: inherit; color: inherit;
						padding-right: 5px;
					}




					
/* ############################################################
###############################################################
##############################################################*/

@media screen and (max-width: 1280px){
	#board_list .list .list_cont .writter span{
		 white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block; width: 100%;
	}
}

@media screen and (max-width: 912px){
	#board_list .list_wrap{
		padding: 80px 60px;
	}
}

@media screen and (max-width: 820px){
	#board_list .list .list_head{
		font-size: 1rem;
	}

	#board_list .list .list_cont{
		font-size: 0.9375rem;
	}
}


@media screen and (max-width: 768px){
	#board_list .list .list_head .list_num{
		width: 10%;
	}
	#board_list .list .list_cont .list_num{
		width: 10%;
		
	}
	#board_list .list .list_cont .list_num span{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block;
		width: 100%;
	}

	#board_list .list .list_head .txt_prev{
		width: 55%;
	}
	#board_list .list .list_cont .txt_prev{
		width: 55%;
	}

	#board_list .list .list_head .writter{
		width: 10%;
	}
	#board_list .list .list_cont .writter{
		width: 10%;
	}
	
	#board_list .list .list_cont .date{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block;
	}
}


@media screen and (max-width: 540px){
	#board_list{
		padding: 60px  0 100px;
	}

	#board_list .list_wrap {
		padding: 50px 40px;
	}

	#board_list .list .list_head{
		font-size: 0.9375rem;
	}

	#board_list .list .list_cont{
		font-size: 0.875rem;
	}

	
	#board_list .list .list_head .txt_prev {
		width: 45%;
	}
	#board_list .list .list_cont .txt_prev {
		width: 45%;
	}
}


@media screen and (max-width: 480px){
	#board_list .list_wrap {
		padding: 45px 30px;
	}
	#board_list .list .list_head{
		font-size: 0.75rem;
		padding: 15px 0;
	}
	#board_list .list .list_cont{
		font-size: 0.75rem;
	}
	#board_list .list .list_cont a{
		padding: 15px 0;
	}

	#board_list .list .list_head .list_num{
		width: 8%;
	}
	#board_list .list .list_cont .list_num{
		width: 8%;
	}

	#board_list .list .list_head .writter {
		width: 14%;
	}
	#board_list .list .list_cont .writter{
		width: 14%;
	}
	#board_list .list .list_head .txt_prev {
		width: 50%;
	}
	#board_list .list .list_cont .txt_prev {
		width: 50%;
	}

	#board_list .list .list_head .date{
		display: none;
	}
	#board_list .list .list_cont .date{
		display: none;
	}
}




@media screen and (max-width: 320px){
	#board_list{
		padding: 45px 0 80px;
	}
}