@charset "utf-8";









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

	#board_list .wrapper{
		display: block;
	}

	#board_list ul{
		display: flex; flex-wrap: wrap;
	}

	#board_list ul .list_cont{
		width: calc( 94% / 3  );
		margin-bottom: 5%; margin-right: 3%;
	}

		#board_list ul .list_cont:nth-child(3n){
			margin-right: 0;
		}
		#board_list ul .list_cont:nth-last-child(-n+3){
			margin-bottom: 0;
		}
		

	#board_list ul .list_cont a{
		display: block;
	}

		

	#board_list ul .list_cont .thumb{
		display: block; 
		width: 100%; height: auto;
		padding-bottom: 65%;

		border-radius: 20px;

/*		background: url(/img/thumb.jpg) no-repeat;*/
		background-size: cover;
		

		position: relative;
		box-shadow: 0px 0px 15px rgb(222, 221, 248, 0.0);
		overflow: hidden;

		transition: 0.3s;
	}
		#board_list ul .list_cont:hover .thumb{
			box-shadow: 0px 0px 15px rgb(222, 221, 248, 0.9);
		}
		#board_list ul .list_cont .thumb img{
			position: absolute;
			top: 50%; left: 50%;

			transform: translate(-50%,-50%);
			width: 100%;
			transition: 0.4s;
			filter: grayscale(100%);
		}

		#board_list ul .list_cont:hover .thumb img{
			filter: grayscale(0);
		}

	#board_list ul .list_cont .txt_prev{
		margin-top: 25px;
	}

		#board_list ul .list_cont .txt_prev h4{
			font-size: 1.375rem; font-weight: 800;

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

		#board_list ul .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: var(--gray02);
		}
	
	#board_list ul .list_cont .info_box{
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

		#board_list ul .list_cont .info_box p{
			font-size: 0.9375rem;
			color: var(--gray02); 
		}

		#board_list ul .list_cont:hover .info_box .more span,
		#board_list ul .list_cont:hover .info_box .more em i{
			color: var(--blue);
		}

		#board_list ul .list_cont:hover .info_box .more em{
			border-color: var(--blue);
		}

		#board_list ul .list_cont .info_box .writter{}

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

		#board_list ul .list_cont .info_box .date{}


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

		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{}

			#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(--blue);
					color: #fff;

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

				#board_list .only_member_btns .btn_write:hover a{
					background-color: var(--blue-hover);
				}

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








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

@media screen and (max-width: 1024px){
	#board_list ul .list_cont .txt_prev h4{
		font-size: 1.25rem;

	}
	#board_list ul .list_cont .txt_prev p{
		margin-top: 7px;
	}

	#board_list ul .list_cont .info_box{
		margin-top: 15px;
	}
}


@media screen and (max-width: 912px){
	#board_list ul .list_cont{
		width: 47.5%;
		margin-right: 5%;
		margin-bottom: 7%;
	}
	#board_list ul .list_cont:nth-child(3n){
		margin-right: 5%;
	}

	#board_list ul .list_cont:nth-child(2n){
		margin-right: 0;
	}

	#board_list ul .list_cont:nth-last-child(-n+3){
		margin-bottom: 7%;
	}
	#board_list ul .list_cont:nth-last-child(-n+2){
		margin-bottom: 7%;
	}
}


@media screen and (max-width: 820px){
	
}


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



@media screen and (max-width: 480px){
	#board_list ul .list_cont .txt_prev h4{
		font-size: 1rem;
	}
	
	#board_list ul .list_cont .info_box{
		gap: 15px;
		margin-top: 10px;
	}
	#board_list ul .list_cont .info_box p{
		font-size: 0.75rem;
	}


	#board_list .only_member_btns .btn_write a{
		font-size: 0.9375rem;
	}
}



@media screen and (max-width: 375px){
	
}


@media screen and (max-width: 320px){
	#board_list{
		padding: 45px 0 80px;
	}
	#board_list ul .list_cont .txt_prev{
		margin-top: 20px;
	}
	#board_list ul .list_cont .txt_prev h4{
		font-size: 0.9375rem;
	}

	#board_list ul .list_cont .txt_prev p{
		font-size: 0.75rem;
	}


	#board_list .only_member_btns .btn_write a{
		font-size: 0.75rem;
	}
}