@charset "utf-8";
/*
	Last Update: 2023/9/29
	Auther: sa
*/
/*===================================================================
	page layout
===================================================================*/
.staff{
	padding-bottom: 8.5625rem;
}
.staff__inner{
	max-width: 70.625rem;
	width: 100%;
	padding: 0 1.5625rem;
	margin: 0 auto;
}
.staff__container{
	margin-top: 7.4rem;
}
.staff__container--professors{
	margin-top: 7.0625rem;
}
.staff__cards{
	display: grid;
}
.staff__cards--professor{
 grid-template-columns: repeat(3,1fr);
	gap: 3.8125rem 6%;
}
.staff__cards--professor + .staff__cards--professor{
	margin-top: 3.8125rem;
}
.staff__cards--others{
	margin-top: 4.7rem;
	grid-template-columns: repeat(4, 1fr);
	gap: 4.1rem 2.75rem;
}
.staff__card{
	width: 100%;
}
.staff__card-img{
	position: relative;
	width: 100%;
}
.staff__card-img img{
	aspect-ratio: 313.86/395.58;
	object-fit: cover;
	width: 100%;
}
.staff_card-title{
	position: absolute;
	bottom: 0;
	color: #fff;
	background-color: rgba(117,156,181, 0.91);
	width: 100%;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 0.01rem;
	padding: 0.625rem 0;
}
.staff__card-name{
	margin-top: 0.625rem;
	width: 100%;
	text-align: center;
	font-size: 1.625rem;
	color: #454545;
}
@media (max-width: 767px) {
	.staff{
		padding-bottom: 3rem;
	}
	.staff__inner{
		max-width: 37.5rem;
	}
	.staff__container{
		margin-top: 3rem;
	}
	.staff__cards--professor{
 grid-template-columns: repeat(2,1fr);
 gap: 2rem 6.7%;
	}
	.staff__cards--professor + .staff__cards--professor{
		margin-top: 3rem;
	}
	.staff__cards--others{
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem 6.7%;
	margin-top: 2.5rem;
	}
	.staff_card-title{
		font-size: 1rem;
	padding: 0.3125rem 0;
	}
	.staff__card-name{
	font-size: 1.375rem;
}
}