/* === Intro ===*/

.body.team {
	background-color: #f7f7f7;
}

.team-banner {
	width: 100%;
	height: calc((100vw - 768px) * 247 / 1032 + 203px); /* 450 -> 203 @1800 -> 768*/
	background-image: url(../images/team_banner.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	display:  flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	padding-top: calc((100vw - 768px) * 110 / 1032 + 90px); /* 200 -> 90 @1800 -> 768*/
	padding-left: calc((100vw - 768px) * 192 / 1032 + 158px); /* 350 -> 158 @1800 -> 768*/
}	
.tm-title, .team-banner .tm-desc {
	color: #ffffff;
}
.tm-row {
	width: calc((100vw - 768px) * 605 / 1032 + 495px); /* 1100 -> 495 @1800 -> 768*/
}
.tm-type {
	font-family: RobotoCondLight;
	font-size: calc((100vw - 768px) * 25 / 1032 + 20px); /* 45 ->20 @1800 -> 768*/
	line-height: calc((100vw - 768px) * 26 / 1032 + 14px); /* 47->21 @1800 -> 768*/
	color: #191919;
	margin-bottom: calc((100vw - 768px) * 27 / 1032 + 23px); /* 50 ->23 @1800 -> 768*/
}
.tm-desc {
	color: #666666;
	margin-top: 0px;
	margin-bottom: calc((100vw - 768px) * 44 / 1032 + 36px); /* 80 ->36 @1800 -> 768*/
	text-align: justify;
}
.tm-list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	row-gap: calc((100vw - 768px) * 27 / 1032 + 23px); /* 50 ->23 @1800 -> 768*/
}
.tm-list:not(:last-child) {
	margin-bottom: calc((100vw - 768px) * 44 / 1032 + 66px); /* 80 ->36 @1800 -> 768*/
}
.tm-box {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: calc((100vw - 768px) * 27 / 1032 + 23px); /* 50 ->23 @1800 -> 768*/
}
.tm-img {
	width: calc((100vw - 768px) * 137 / 1032 + 113px); /* 250 ->113 @1800 -> 768*/
	height: auto;
}
.tm-txt {
	width: calc((100vw - 768px) * 522 / 1032 + 425px); /* 950 ->425 @1800 -> 768*/
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.tm-name {
	font-family: RobotoCondBold;
	font-size: calc((100vw - 768px) * 12 / 1032 + 10px); /* 22 ->10 @1800 -> 768*/
	line-height: calc((100vw - 768px) * 15 / 1032 + 13px); /* 28->13 @1800 -> 768*/
	color: #e6b245;
}
.tm-job {
	font-family: RobotoLight;
	font-size: calc((100vw - 768px) * 10 / 1032 + 9px); /* 19 ->9 @1800 -> 768*/
	line-height: calc((100vw - 768px) * 15 / 1032 + 12px); /* 27->12 @1800 -> 768*/
	color: #191919;
	margin-top: calc((100vw - 768px) * 3 / 1032 + 3px); /* 6 ->3 @1800 -> 768*/
	margin-bottom: calc((100vw - 768px) * 5 / 1032 + 5px); /* 10 ->5 @1800 -> 768*/
}
.tm-bio {
	font-family: RobotoLight;
	font-size: calc((100vw - 768px) * 8 / 1032 + 8px); /* 16 ->8 @1800 -> 768*/
	line-height: calc((100vw - 768px) * 13 / 1032 + 13px); /* 26->13 @1800 -> 768*/
	color: #666666;
}
.tm-bio-sm {
	ont-size: calc((100vw - 768px) * 8 / 1032 + 6px); /* 14 ->6 @1800 -> 768*/
	line-height: calc((100vw - 768px) * 13 / 1032 + 11px); /* 24->11 @1800 -> 768*/
}
.tm-bio > span > div {
	margin-left: calc((100vw - 768px) * 9 / 1032 + 7px); /* 16 ->7 @1800 -> 768*/
}
.tm-bio > span > div:before {
	content: "◆";
	font-size: calc((100vw - 768px) * 6 / 1032 + 6px); /* 12 ->6 @1800 -> 768*/
	color: #e6b245;
	margin-left: calc((100vw - 768px) * -9 / 1032 + -7px); /* -16 ->-7 @1800 -> 768*/
	margin-right: calc((100vw - 768px) * 3 / 1032 + 2px); /* 5 ->2 @1800 -> 768*/
}


/*###### RESPONSIVE ######*/

@media only screen and (max-width: 768px) {
	
	.team-banner {
		height: calc((100vw - 425px) * 54 / 343 + 216px); /* 270-> 216 @768 -> 425*/
		padding: calc((100vw - 425px) * 10 / 343 + 40px); /* 50 -> 40 @768 -> 425*/
		padding-top: calc((100vw - 425px) * 24 / 343 + 96px); /* 120 -> 96 @768 -> 425*/
		align-items: center;
	}	
	.tm-row {
		width: 80%
	}
	.tm-type {
		font-size: calc((100vw - 425px) * 5 / 343 + 22px); /* 27 ->22 @768 -> 425*/
		line-height: calc((100vw - 425px) * 6 / 343 + 22px); /* 28->22 @768 -> 425*/
		margin-bottom: calc((100vw - 425px) * 6 / 343 + 24px); /* 30 ->24 @768 -> 425*/
	}
	.tm-list {
		row-gap: calc((100vw - 425px) * 10 / 343 + 40px);; /* 50 ->40 @768 -> 425*/
	}
	.tm-list:not(:last-child) {
		margin-bottom: calc((100vw - 425px) * 10 / 343 + 38px); /* 48 ->38 @768 -> 425*/
	}
	.tm-box {
		column-gap: calc((100vw - 425px) * 6 / 343 + 24px); /* 30 ->24 @768 -> 425*/
	}
	.tm-img {
		width: 25%;
	}
	.tm-txt {
		width: 68%;
	}
	.tm-name {
		font-size: 13px;
		line-height: 17px;
	}
	.tm-job {
		font-size: 11px;
		line-height: 16px;
		margin-top: 4px;
		margin-bottom: 6px;
	}
	.tm-bio, .tm-bio-sm  {
		font-size: 10px;
		line-height: 15px;
	}
	.tm-bio > div {
		margin-left: 10px;
	}
	.tm-bio > div:before {
		font-size: 7px;
		margin-left: -10px;
		margin-right: 3px;
	}
		
}
@media only screen and (max-width: 550px) {
	.tm-img {
		width: 50%;
	}
	.tm-list:not(:last-child) {
		row-gap: 25px;
	}
	.tm-box {
		flex-direction: column;
		row-gap: 20px;
	}
	.tm-txt {
		width: 100%;
	}
}