@charset "UTF-8";

.header__gnb-li:nth-child(5) > a, .header__mo-gnb-li:nth-child(5) > a{
	color: var(--color-primary-50);
}

.bo-banner{
	position: relative;
	padding-top: 20px;
}

.bo-banner__img{
	position: relative;
	width: 100%;
	height: 400px;
	overflow: hidden;
	border-radius: 12px;
}

.bo-banner__img>img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	object-fit:cover;
	user-select: none;
	-webkit-user-drag: none;
}

.bo-banner__txtbox{
	position: absolute;
	left: 32px;
	right: 32px;
	bottom:32px;
}

.bo-banner__sub{
	margin-bottom: 8px;
	color: var(--color-primary-50);
}

.bo-banner__tit{
	margin-bottom: 16px;
	color: var(--color-gray-00);
}

.bo-banner__txt{
	color: var(--color-gray-20);
}



.board__wrap{
	padding:20px 0 80px ;
}

.board-w__wrap, .board-v__wrap{
	padding:40px 0 80px;
	box-sizing: border-box;
	transition: padding 0.3s
}

.board__grid{
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap:40px;
	margin:40px 0;
}

.board__thumb{
	position: relative;
	width:100%;
	height: 0;
	padding-bottom: 100%;
	margin-bottom: 8px;
	border-radius: 12px;
	overflow: hidden
}

.board__thumb img{
	position: absolute;
	top:50%;
	left:50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translate(-50%,-50%);
	transition: transform 0.3s
}

.board__thumb img:hover{
	transform: translate(-50%,-50%) scale(1.1)
}

.board__thumb-none{
	position: relative;
	width:100%;
	height: 0;
	padding-bottom: 100%;
	background-color: var(--color-gray-05)
}

.board__thumb-none-txt{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	color: var(--color-gray-40)
}

.board__cate{
	margin-bottom: 4px;
	color: var(--color-primary-50);
}

.board__tit{
	max-height: calc(2.8rem * 2);
	word-break: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: 0.3s
}

.board__tit:hover{
	color: var(--color-primary-70)
}

.board__desc{
	max-height: calc(2.2rem * 2);
	word-break: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: 0.3s;
	margin-top: 12px;
	color: var(--color-gray-70)
}

.board__date{
	margin-top: 12px;
	color: var(--color-gray-70)
}

.board__data-none{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 240px
}

.board__write-wrap{
	text-align: right
}

.board__write-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding:0 24px;
	box-sizing: border-box;
	border-radius: 100px;
	background-color: var(--color-gray-90);
	color: var(--color-gray-00);
	transition: 0.3s;
}

.board__write-btn:hover{
	background-color: var(--color-gray-95);
}

.board-w__grid{
	display: flex;
	flex-direction: column;
	gap:20px;
	max-width: 720px;
	margin:0 auto
}

.board-w__form{
	display: inline-flex;
	flex-direction: column;
}

.board-w__label{
	margin-bottom: 4px
}

.board-w__label.required:after{
	content:'*';
	margin-left: 4px;
	color:var(--color-error-70)
}

.board-w__file input[type="file"]{
	line-height: 56px;
	background-color: var(--color-gray-00)
}

.board-w__file input[type="file"]::file-selector-button{
	height: 24px;
	font-size: 1.3rem;
	line-height: 1.6rem;
	text-align: center;
	margin:16px 8px 16px 0;
	float: left
}

.board-w__btn-wrap{
	display: flex;
	gap:20px;
	justify-content: center
}

.board-v{
	max-width: 720px;
	margin:0 auto
}

.board-v__tit{
	margin-bottom: 4px
}

.board-v__date{
	margin-bottom: 20px;
	padding-bottom: 20px;
	box-sizing: border-box;
	box-shadow: inset 0 -1px 0 0 var(--color-gray-10);
	color: var(--color-gray-60);
}

.board-v__content{
	margin-bottom: 40px
}

.board-v__btn-wrap{
	display: flex;
	gap:20px;
	justify-content: center
}

.board-v__btn-li{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding:0 24px;
	box-sizing: border-box;
	border-radius: 100px;
	background-color: var(--color-gray-90);
	color: var(--color-gray-00);
	transition: 0.3s;

}

.board-v__btn-li:hover{
	background-color: var(--color-gray-95);
}

.board-v__btn-m{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding:0 24px;
	box-sizing: border-box;
	border-radius: 100px;
	background-color: var(--color-gray-00);
	color: var(--color-gray-70);
	box-shadow: inset 0 0 0 1px var(--color-gray-20);
	transition: 0.3s;
}

.board-v__btn-m:hover{
	background-color: var(--color-gray-05);
}

.board-v__btn-d{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding:0 24px;
	box-sizing: border-box;
	border-radius: 100px;
	background-color: var(--color-gray-00);
	color: var(--color-gray-70);
	box-shadow: inset 0 0 0 1px var(--color-gray-20);
	transition: 0.3s;
}

.board-v__btn-d:hover{
	background-color: var(--color-gray-05);
}

.scroll-wrap{
	overflow: hidden
}


@media all and (max-width:1024px){
	.board__grid{
		gap:20px
	}
}

@media all and (max-width:768px){
	.bo-banner__img{
		height: 320px;
	}




	.board__grid{
		grid-template-columns: repeat(2,1fr)
	}
}

@media all and (max-width:500px){
	.board__grid{
		gap:20px 12px
	}
}