@charset "UTF-8";

.content__banner-wrap{
	width:100%;	
	background:url(bg.png) no-repeat center/cover;
}

.content__banner{
	padding:160px 0;
}

.content__banner-tit{
	text-align: center;
	color:var(--color-gray-00);
	user-select: none
}

.content__snb-wrap{
	position: relative;
	width:100%;
	box-shadow: inset 0 -2px 0 -1px var(--color-gray-10);
	z-index: 1
}

.content__snb{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
}

.content__snb-item{
	display: flex;
}

.content__snb-li a{
	display: inline-flex;
	align-items: center;
	padding:0 40px;
	height: 80px;
	box-sizing: border-box;
	color:var(--color-gray-70);
	transition: 0.3s;
	user-select: none
}

.content__snb-li.active a{
	position: relative;
	color:var(--color-gray-90)
}

.content__snb-li a:hover{
	color:var(--color-primary-60)
}

.content__snb-li.active a::after{
	content: '';
	position: absolute;
	left: 50%;
	bottom:2px;
	transform: translateX(-50%);
	width: 100%;
	height: 6px;
	border-radius: 10px;
	background-color:var(--color-primary-70) 
}

/**/
.board-write{
	margin: 120px auto
}

.board-write__wrap{
	max-width: 1080px;
	display: flex;
	flex-direction: column;
	row-gap:40px;
}
.board-write__label, .board-write__file-label, .board-write__link-label{
	display: block;
	margin-bottom: 8px
}

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

.board-write__deadline-label-sub{
	display: block;
	color: var(--color-gray-60);
	margin: 4px 0 0 4px
}

.board-write__btn{
	display: flex;
	justify-content: center;
	column-gap: 20px;
	margin-top: 40px
}

.board-write__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-write__file input[type="file"]{
	line-height: 56px
}

.board-write__file-del{
	margin-top: 12px;
}

.board-write__file-del span{
	color: var(--color-gray-40)
}

.board-write__file-del input[type="checkbox"] + label{
	padding-left: 28px;
	line-height: 24px;	
	height: 24px
}


/**/
.board-view{}

.board-view__title{
	margin-bottom: 12px
}

.board-view__user{
	display: flex;
	align-items: center;
	column-gap: 12px;
	margin-bottom: 20px;
	color:var(--color-gray-60)
}

.board-view__name{}

.board-view__line{
	width: 1px;
	height: 12px;
	background-color: var(--color-gray-20)}

.board-view__date{}

.board-view__content{
	padding:40px 0;
	border-top:1px solid var(--color-gray-20)
}

.board-view__content>p>span{
	all: unset
}

.board-view__content p b{
	font-weight: 700
}

.board-view__content p i{
	font-style: italic
}

.board-view__content p s{
	text-decoration: line-through
}

.board-view__content p u{
	text-decoration: underline
}

.board-view__contentt p a{
	text-decoration: underline
}

.board-view__link{
	margin:0 0 20px 4px
}

.board-view__link-a a{
	transition: 0.3s;
	word-break: break-all
}

.board-view__link-a a:hover{
	color: var(--color-primary-70)
}

.board-view__file{
	display: grid;
	grid-template-columns: 120px 1fr;
	padding:20px;
	box-sizing: border-box;
	border-top:1px solid var(--color-gray-20);
	background-color: var(--color-gray-05)
}

.board-view__file-data{
	display: flex;
	flex-direction: column;
	row-gap:8px
}

.board-view__file-data a{
	transition: 0.3s
}

.board-view__file-data a:hover{
	color: var(--color-primary-70)
}

.board-view__file-label{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding:0 12px;
	background-color: var(--color-gray-20);
	color: var(--color-gray-60);
	border-radius: 4px;
	margin-left: 12px
}

.board-view__edit{
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 20px;
	margin-top: 60px
}


/**/
.board__content{
	margin:120px auto
}

.board-common__top{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px
}

.board-common__data span{
	color:var(--color-primary-70)
}

.board-common__search{
	position: relative;
	max-width: 400px;
	width: 100%;
}

.board-common__search .btn_submit{
	position: absolute;
	top:50%;
	right: 12px;
	transform: translateY(-50%);
	background: url(../../../img/ico_search.svg) no-repeat center;
	width: 24px;
	height: 24px;
	cursor: pointer;
}

.board-list__table{

}

.board-list__table a{
	display: block
}

.board-list__tr{
	display: grid;
	align-items: center;
	height: 56px;
	text-align: center
}

.board-list__table-top{
	box-shadow: inset 0px 3px 0px -1px var(--color-gray-80);
	background-clip: padding-box
}

.board-list__th{}

.board-list__table-content{
	box-shadow: inset 0px 2px 0px -1px var(--color-gray-10);
	transition: 0.3s
}

.board-list__table-content:hover{
	background-color: var(--color-gray-05);
}

.board-list__td{
	color:var(--color-gray-70)
}

.board-list__td-con{
	text-align: left;
	word-break: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	color: var(--color-gray-90)
}

.board-common__empty{
	position: relative;
	width:100%;
	height: 300px
}

.board-common__empty-txt{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%)
}

.board-common__write a{
	float:right;
	margin-top: 20px
}

.board-common__none-write{
	display: block;
	height: 36px
}

.board-common__page{
	display: flex;
	align-items: center;
	justify-content: center
}

.board-common__page .pg{
	display: flex;
	column-gap: 12px;
	user-select: none
}

.pg_page, .pg_current{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width:44px;
	height:44px;
	border-radius: 100px;
}

.pg_page{
	background-color: var(--color-gray-00);
	transition: 0.3s
}

.pg_current{
	background-color: var(--color-primary-70);
	color: var(--color-gray-00)
}

.pg_page:hover{
	background-color: var(--color-gray-10)
}

.pg_prev{
	width:44px;
	height: 44px;
	background: url(../../../img/ico-prev.svg) no-repeat center;
}

.pg_next{
	width:44px;
	height: 44px;
	background: url(../../../img/ico-next.svg) no-repeat center;
}


/**/
.board-cate-off__tr{
	grid-template-columns: 100px 1fr 200px
}


.board-cate-on__tr{
	grid-template-columns: 100px 200px 1fr 200px
}



.content__banner-wrap,
.board-common__edit{
	opacity: 0;
	transition:1s ease
}

.content__snb-wrap,
.board-common__top,
.board-list,
.board-common__empty,
.board-view{
	opacity: 0;
	transform:translateY(80px);
	transition:1s ease
}

.content__snb-mo-tit.mo-only{
	display: none
}

@media all and (max-width:1024px) {
	.content__snb-li a{
		padding:0 20px;
	}
}

@media all and (max-width:768px) {

	.content__snb-mo-tit.mo-only{
		display: flex;
	}

	.content__snb-wrap{
		box-shadow: none
	}

	.content__snb-item{
		flex-direction: column;
		width: 100%;
		align-items: center;
		background-color: var(--color-gray-00);
		border-radius: 4px;
		overflow: hidden;
		box-shadow: inset 0 0 0 1px var(--color-gray-10);
		position: absolute;
		top:72px;
		left: 0;
		z-index: 10;
		display: none
	}

	.content__snb-li{
		width: 100%
	}

	.content__snb-li a{
		justify-content: center;
		width: 100%
	}

	.content__snb-li.active a::after{
		display: none
	}

	.content__snb-li a{
		height: 48px;
		color:var(--color-gray-90)
	}

	.content__snb-li a:hover{
		background-color: var(--color-gray-05)
	}

	.content__snb-mo-tit{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin:4px 0;
		height: 56px;
		box-shadow: inset 0 0 0 1px var(--color-gray-10);
		border-radius: 8px;
		background: url(../../../img/ico_select_close.svg) no-repeat center right 16px;
		cursor: pointer;
		z-index: 10;
		user-select: none
	}

	.content__snb-mo-tit.snb-open{
		background: url(../../../img/ico_select_open.svg) no-repeat center right 16px
	}

	.content__snb-bg{
		width: 100%;
		height: 100vh;
		background-color: transparent;
		position: fixed;
		top: 0;
		left: 0;
	}

	.board__content{
		margin:64px auto
	}

	.board-common__top{
		display: block
	}

	.board-common__search{
		margin-top: 12px;
			max-width: 100%
	}


	.board-cate-off__tr{
		grid-template-columns: 80px 1fr 120px
	}


	.board-cate-on__tr{
		grid-template-columns: 120px 1fr 120px
	}

	:where(.board-cate-on__tr) div:first-child{
		display: none
	}

	.board-list__td-con{
		padding-left: 12px;
		box-sizing: border-box
	}
}