@charset "utf-8";
/*
	Last Update: 2023/10/1
	Auther: sa
*/
/*===================================================================
	page layout
===================================================================*/
.history{
	position: relative;
	background: url(../image/history/history__bg.jpg) no-repeat center center /cover;
	z-index: 0;
	padding-bottom: 10rem;
	overflow: hidden;
}
.history::before{
position: absolute;
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background-color:rgba(6, 16, 36, 0.77);
}
.history__title-wrap {
	position: relative;
	gap: 0.875rem;
	align-items: center;
	line-height: 1;
	font-size: 1rem;
	text-align: center;
	color: #fff;
	padding-top: 9.375rem;
}
.history__title-wrap::before {
	position: absolute;
	content: "history";
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
	font-size: 10rem;
	color: #CADEE9;
	opacity: 0.08;
	font-weight: 400;
	top: -1.25rem;
left: 50%;
transform: translateX(-50%);
	letter-spacing: 0.9rem;
	white-space: nowrap;
}
.history__title-en {
	margin-top: 9.375rem;
	font-size: 2.5rem;
	text-transform: uppercase;
	letter-spacing: 0.21875rem;
	font-weight: 400;
}
.history__title-wrap::after {
	position: absolute;
	content: "";
	width: 1.25rem;
	height: 1px;
	background-color: #acacac;
	left: 50%;
	transform: translateX(-50%);
	bottom: -1.25rem;
}
.history__overview{
	margin-top: 3.125rem;
}
.history__main-img{
	margin-top: 2.5rem;
	width: 100%;
}
.history__main-img img{
	aspect-ratio: 1194/704;
	object-fit: cover;
	width: 100%;
}
.history__text{
margin-top: 2.1875rem;
color: #fff;
font-size: 1.0625rem;
line-height: 2.0588235;
letter-spacing: 0.01em;
}
.history__classroom{
	margin-top: 5.3125rem;
}
.history__table{
	width: 100%;
	margin-top: 3.125rem;
	color: #fff;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 1.375rem;
}
.history__table tbody{
	display: grid;
	grid-template-columns: repeat(2,1fr);
}
.history__table,
.history__table tr{
	border: 1px solid #fff;
}
.history__table tr{
	padding: 1.25rem 2.9375rem;
}
.history__table td{
	padding-left: 2.5rem;
}
.history__cards{
	margin-top: 3.4375rem;
}
.history-card__lists{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 2.50625rem 3.6%;
}
.history-card__item{
	padding: 2.1875rem 7%;
	border: 1px solid #fff;
	color: #fff;
}
.history-card__head{
	display: flex;
	align-items: center;
	gap: 1.4375rem;
}
.history-card__img{
	max-width: 8.248125rem;
	width: 100%;
}
.history-card__img img{
	aspect-ratio: 132/133;
	object-fit: cover;
	width: 100%;
}
.history-card__era{
	display: flex;
	align-items: center;
	font-size: 1.0625rem;
}
.history-card__era span{
	font-size: 2.375rem;
	letter-spacing: 0.1em;
	margin-right: 1.75rem;
}
.history-card__name{
	font-size: 1.5rem;
	letter-spacing: 0.01em;
	margin-top: 0.6875rem;
}
.history-card__text{
	margin-top: 2.1875rem;
	font-size: 1.0625rem;
	line-height: 2.058823rem;
	letter-spacing: 0.01em;
}
@media (max-width: 575px){
	.history-card__head{
		gap: 1rem;
	}
	.history-card__era{
		font-size: 0.875rem;
	}
	.history-card__era span{
		font-size: 1.375rem;
		margin-right: 1rem;
	}
	.history-card__name{
		font-size: 1.2rem;
	}
	.history-card__img{
		max-width: 6rem;
	}
}
@media (max-width: 767px) {
	.history{
		padding-bottom: 6rem;
	}
	.history__title-wrap{
		padding-top: 6rem;
	}
	.history__title-wrap::before {
		font-size: 5rem;
		top:0;
	}
	.history__table{
		font-size: 1.125rem;
	}
	.history__table tr{
		padding: 0.5rem;
	}
	.history__table td{
		padding-left: 1rem;
	}
}
@media (max-width: 991px){
	.history__table{
		max-width: 37.5rem;
		margin-left: auto;
		margin-right: auto;
	}
	.history__table tbody{
		grid-template-columns: repeat(1,1fr);
	}
	.history__cards{
		max-width: 37.5rem;
		margin-left: auto;
		margin-right: auto;
	}
	.history-card__lists{
		display: grid;
		grid-template-columns: repeat(1,1fr);
		gap: 2.50625rem 3.6%;
	}
}