@charset "utf-8";

.people { width:100%; height:auto; overflow:hidden;}
.people * { padding:0; margin:0; list-style:none; text-decoration:none;}

.people > div { overflow:hidden; position:relative; padding:10px; margin-bottom:20px;}
.people > div.people-wrap { padding-right:300px; min-height:430px;
-webkit-flex-display:flex; display: flex;
-webkit-align-items:center; align-items:center;
flex-wrap:wrap;}
.people > div.people-wrap .photo { width:370px; height:auto; overflow:hidden; position:absolute; top:0; right:0; padding:10px; z-index:2;}
.people > div.people-wrap .photo .img { display:block; width:350px; height:350px; overflow:hidden; margin-bottom:10px;
/*圓角*/
-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;
-webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.2);
-moz-box-shadow:    0px 0px 10px 0px rgba(50, 50, 50, 0.2);
box-shadow:         0px 0px 10px 0px rgba(50, 50, 50, 0.2);}
.people > div.people-wrap .photo .img + .name { display:block; width:100%; height:auto; overflow:hidden; text-align:center; font-size:16px; color:#444; line-height:24px;}
.people > div.people-wrap .photo .img + .name > strong { display:block; width:100%; height:auto; overflow:hidden; text-align:center; font-size:24px; color:brown; line-height:24px;}

.people > div.people-wrap .photo + .intro { width:100%; height:auto; overflow:hidden; padding:40px; background:#eee; margin-top:-60px; padding-right:70px;
/*圓角*/
-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}
.people > div.people-wrap .photo + .intro dl { width:50%; height:auto; overflow:hidden; float:left; padding-right:20px;}
.people > div.people-wrap .photo + .intro dl:nth-child(2n+2) { padding-right:0;}
.people > div.people-wrap .photo + .intro dl dt { color:brown; border-bottom:1px solid #ccc; padding:10px 0; margin-bottom:10px; font-weight:bold;}

.people > div.people-wrap:nth-child(2) { padding-right:0; padding-left:300px;}
.people > div.people-wrap:nth-child(2) .photo { right:auto; left:0;}
.people > div.people-wrap:nth-child(2) .photo + .intro { padding-right:40px; padding-left:70px;}

.people > div.people-list-wrap .title { text-align:center; color:brown;}
.people > div.people-list-wrap ul { width:100%; height:auto; overflow:hidden;
-webkit-flex-display:flex; display: flex;
-webkit-align-items:center; align-items:center;
-webkit-justify-content:center; justify-content:center;
flex-wrap:wrap;}

.people > div.people-list-wrap ul li { width:20%; height:auto; overflow:hidden; float:left;}
.people > div.people-list-wrap ul li.w4-1 { clear:both; margin-left:1.5%;}
.people > div.people-list-wrap ul li > span { display:block; width:100%; height:auto; overflow:hidden; text-align:center; font-size:14px; line-height:16px; margin-bottom:10px;}
.people > div.people-list-wrap ul li > span img { display:block; max-width:100%; height:auto; float:left;}
.people > div.people-list-wrap ul li > span strong { display:block; width:100%; height:auto; overflow:hidden; text-align:center; color:brown; font-size:20px; line-height:24px;}

.people > div.people-list-wrap.people-list-wrap-team ul li { width:100%; margin-bottom:20px;}

@media only screen and (min-width:0px) and (max-width:1120px) {
	.people > div.people-wrap .photo { width:250px;}
	.people > div.people-wrap .photo .img { width:230px; height:230px;}
	.people > div.people-wrap { padding-right:200px; min-height:310px;}
	.people > div.people-wrap:nth-child(2) { padding-right:0; padding-left:200px;}
	.people > div.people-wrap .photo + .intro { margin-top:0;}
	.people > div { padding:0;}
	}
@media only screen and (min-width:0px) and (max-width:768px) {
	.people > div.people-wrap .photo + .intro dl { width:100%;}
	.people > div.people-wrap .photo + .intro dl dt { border:0; margin-bottom:0;}
	.people > div.people-list-wrap ul li { width:25%; margin-bottom:10px;}
	.people > div.people-list-wrap ul li:first-child { width:100%;}
	.people > div.people-list-wrap ul li:first-child > span { max-width:25%; margin:0 auto; margin-bottom:10px;}
	.people > div.people-list-wrap.people-list-wrap-team ul li:first-child > span { max-width:100%;}
	}
@media only screen and (min-width:0px) and (max-width:600px) {
	.people > div.people-wrap,
	.people > div.people-wrap:nth-child(2) { padding:0; min-height:0; position:static;}
	.people > div.people-wrap .photo,
	.people > div.people-wrap:nth-child(2) .photo { right:auto; left:auto; width:100%; position:static;}
	.people > div.people-wrap .photo .img { width:auto; height:auto; margin:0 auto; max-width:450px; margin-bottom:20px;}
	.people > div.people-wrap .photo .img img { float:left;}
	.people > div.people-wrap .photo + .intro,
	.people > div.people-wrap:nth-child(2) .photo + .intro{ padding:20px;}
	.people > div.people-wrap .photo + .intro dl dt { padding:0; margin-bottom:10px;}
	}
@media only screen and (min-width:0px) and (max-width:512px) {
	.people > div.people-list-wrap ul li { width:33.33%;}
	.people > div.people-list-wrap ul li.w4-1 { margin-left:0;}
	.people > div.people-list-wrap ul li:first-child > span { max-width:33.33%;}
	}