@charset "utf-8";
div,p {
	box-sizing:border-box;
}

.memberphotoblock {
	width:100%;
	max-width:1000px;
}

.spaces {
	margin-top: 150px !important;
	opacity: 0;
}

.members {
	width:100%;
	border:2px solid #2D5791;
	transition-duration:2s;
	transition-timing-function:cubic-bezier(.22,.61,.36,1);
	border-radius:0 0 30px 0;
}
.members h3 {
	background-color:#2D5791;
	padding:15px 15px 10px;
	color:#fff;
	font-weight:bold;
	font-size:24px;
	margin:0;
	position:relative;
	overflow:hidden;
}
.members h3::before {
	content:'';
	width:30px;
	height:80px;
	transform:rotate(45deg);
	background-color:#f80;
	position:absolute;
	top:-40px;
	left:-20px;
}
.members h3 span{
	font-size:75%;
}
.members .memberinfo {
	/* height:800px; */
	padding:25px;
	/* background-color:#fff; */
	position:relative;
	overflow:hidden;
}
.members .memberinfo .circle-1,
.members .memberinfo .circle-2,
.members .memberinfo .circle-3,
.members .memberinfo .circle-4,
.members .memberinfo .circle-5 {
	position:absolute;
	border-radius:50%;
	background-color:#BFE5F5;
	opacity:0.4;
	z-index:-1;
}
.members .memberinfo .circle-1 {
	width:300px;
	height:300px;
	top:-100px;
	right:-120px;
}
.members .memberinfo .circle-2 {
	width:350px;
	height:350px;
	top:250px;
	left:-30px;
}
.members .memberinfo .circle-3 {
	width:350px;
	height:350px;
	bottom:680px;
	right:-50px;
}
.members .memberinfo .circle-4 {
	width:320px;
	height:320px;
	bottom:320px;
	left:-15px;
}
.members .memberinfo .circle-5 {
	width:400px;
	height:400px;
	bottom:-80px;
	right:-50px;
}

.members .memberinfo .photobox-01,
.members .memberinfo .photobox-02 {
	position:relative;
	display:flex;
	margin-bottom:30px;
}
.members .memberinfo .imgbox {
	width:520px;
	height:310px;
	box-shadow:2px 2px 10px #aaa;
	border:2px solid #fff;
}
.members .memberinfo .imgbox img {
	width:100%;
}
.members .memberinfo .imgbox img.srcrollimg {
	opacity:0;
	transition:1s;
}
.members .memberinfo .photobox-01 {
	justify-content:start;
}
.members .memberinfo .photobox-02 {
	justify-content:end;
}
.members .memberinfo .txtbox {
	background-color:rgba(255,255,218,0.7);
	padding:20px;
	width:60%;
	position:absolute;
	bottom:35px;
}
.members .memberinfo .photobox-01 .txtbox {
	right:0;
}
.members .memberinfo .photobox-02 .txtbox {
	left:0;
}
.members .memberinfo .txtbox p {
	font-size:125%;
}

@media screen and (max-width:820px){
	.supervisorbg {
		background-position:top left -100px;
	}

	.memberphotoblock {
		padding:0 10px;
	}
	.members .memberinfo {
		padding:15px;
	}
	.members .memberinfo .photobox-01,
	.members .memberinfo .photobox-02 {
		flex-wrap:wrap;
	}
	.members .memberinfo .imgbox {
		width:100%;
		height:auto;
	}
	.members .memberinfo .txtbox {
		position:initial;
		top:0;
		left:0;
		width:100%;
		padding:10px;
		margin-top:10px;
	}
	.members .memberinfo .txtbox p {
		font-size:14px;
		text-align:left !important;
	}

}