@charset "utf-8";
.works_img{
	width: 100%;
	display: block;
	margin-bottom: 40px;
}
.profile{
	display: flex;
	align-items: stretch;
	gap: 40px;
	padding:15px 0 40px;
	border-bottom: 1px dotted #333;
	margin-bottom: 50px;
}
.profile_head{
	width: 170px;
	flex-shrink: 0;
	border-right: 1px dotted #333;
	display: flex;
	align-items: center;
}
.profile_head h3{
	font-size: 2rem;
	letter-spacing: 2px;
	line-height: 3rem;
	margin: 0;
}
.profile_head h3::before {
	content: attr(data-slug);
	display: block;
	font-size: 1.2rem;
	letter-spacing: 1.2px;
	line-height: 1.9rem;
	font-family: var(--font_poppins);
	margin-bottom: 7px;
}
.profile_box {
	display: flex;
	align-items: center;
	gap: 30px;
}
.profile_img{
	width: 100%;
	max-width: 120px;
	border-radius: 50%;
}
.profile_name{
	font-weight: 500;
	font-size: 1.6rem;
	letter-spacing: 1.6px;
	line-height: 2.4rem;
	margin-bottom: 0;
}
.profile_department{
	font-size: 1.4rem;
	letter-spacing: 1.4px;
	line-height: 2.4rem;
	margin-bottom: 10px;
}
.profile_bio{
	font-size: 1.4rem;
	letter-spacing: 1.4px;
	line-height: 2.4rem;
	margin-bottom: 0;
}
.works_col{
	display: grid;
	grid-gap:40px;
	grid-template-columns:repeat(auto-fit, calc((100% - 40px) / 2));
	margin: 45px 0 15px;
}
.works_col h3{margin: 0 0 18px;}
.works_col p:last-of-type{margin-bottom: 0;}
.works_col.reverse .works_col_img{order: -1;}
.works_col_img img{width: 100%;}
.bg_box{
	background: #fff;
	padding: 50px 30px;
	margin-top: 55px;
}
.overview{
	max-width: 900px;
	width: 100%;
	margin: auto;
	display: flex;
}
.overview_head {
	width: 200px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
}
.overview_h3 {
	font-size: 2rem;
	letter-spacing: 2px;
	line-height: 3rem;
	margin: 0 0 20px;
}
.overview_h3::before {
	content: 'PROJECT\AOVERVIEW';
	white-space: pre;
	display: block;
	font-size: 1.2rem;
	letter-spacing: 1.2px;
	line-height: 1.9rem;
	margin-bottom: 7px;
	font-family: var(--font_poppins);
}
.row_table{margin-bottom: 0;}

@media screen and (max-width:820px){
.works_h2{margin-top: 75px;}
.profile_name{margin-bottom: 2px;}
.profile_department{
	font-size: 1.2rem;
	letter-spacing: 1.2px;
	line-height: 1.7rem;
}
.profile_bio{
	font-size: 1.2rem;
	letter-spacing: 1.2px;
	line-height: 2.04rem;
}
.bg_box{padding: 40px 30px;}
.overview_head{width: 180px;}
.row_table th{width: 150px;}
}

@media screen and (max-width:767px){
.works_img{margin-bottom: 22px;}
.profile{
	flex-direction: column;
	gap: 15px;
	margin-bottom: 45px;
	padding-bottom: 15px;
}
.profile_head{
	width: 100%;
	border-right: none;
	border-bottom: 1px dotted #333;
}
.profile_head h3{margin-bottom: 15px;}
.profile_head h3::before{margin-bottom: 5px;}
.profile_head h3 br{display: none;}
.profile_box {
	gap: 11px;
	align-items: flex-start;
}
.profile_img{max-width: 100px;}
.works_col{
	grid-gap:25px;
	grid-template-columns:1fr;
}
.works_col.reverse{margin-top: 25px;}
.bg_box{
	padding: 45px 20px 40px;
	margin-top: 50px;
}
.overview{
	width: 100%;
	flex-direction: column;
}
.overview_head {
	display: block;
	width: 100%;
	text-align: center;
}
.overview_h3 {margin: 0 0 25px;}
.overview_h3::before {
	content: attr(data-slug);
	margin-bottom: 5px;
}
.row_table th{
	width: 100px;
	padding: 14px 10px;
}
.row_table td{padding: 14px 10px 14px 20px;}
}