css.css

@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
}
.head{
	background-color:  #EFD753;
	height: 7rem;
	width: 100%;
	line-height: 7rem;
	font-size: 30pt;
	font-weight: bold;
	color: white;
}
.backgroundmask{
	width: 100%;
    height: 100%;
    background-color: rgb(0,0,0,.3);
}
.logo{
	width: 51px;
	height: 51px;
}
.firstintroduction{
	height: 680px;
	width: 100%;
	background-image: url("images/banner.jpg");
	background-size: cover;
	background-position-x: center;
	background-position-y: center;
	background-color: rgb(0, 0, 0);
}
.qrcode{
	width: 160px;
	height: 160px;
	margin-left: 50px;
	margin-top: 50px;
	
}
.font-47{
	font-size: 47px;
	color: white;
	text-align: center;
	padding-top: 180px;
/*	padding-bottom: 180px;*/
}
.font-smallintroducion
{
	font-size: 12px;
	color: white;
	text-align: center;
	position: relative;
	top: 150px;
}
.usescences,.joinus{
	display: block;
	height: 500px;
	width: 100%;
}
.joinus{
	height:700px;
}
.font-27{
/*	height: 100px;*/
	padding-top: 50px;
	font-size: 47px;
	text-align: center;
	width: 100%;
	color: black;
}
.font-12{
	padding-top: 50px;
	font-size: 12px;
	text-align: center;
	width: 100%;
	color: black;
}
.usescencesintroduce{
	display: flex;
	font-size: 12px;
	justify-content: space-around;/*在元素周围留白，有点像平均分的感觉*/
	margin-top: 34px;
	width: 100%;
}
.usescencesmini{
	align-items: center;
	background-color: rgb(238,238,238);
	display: flex;
	flex-direction: column;
	font-size: 16px;
	height: 250px;
	width: 250px;
	justify-content: center;
}
.usescencesminipicture{
	display: block;
	height: 170px;
	width: 226.663px;
}
.usescencesfonts{
	margin-top: 17px;
	font-size: 16px;
	display: block;
}
.aboutusbackground{
	height: 900px;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("images/aboutUs.jpg");
	display: flex;/*弹性盒子*/
	box-sizing: border-box;
	flex-direction: column;/*将项目垂直显示*/
	background-position-x:50%;
	background-position-y:50%;
	
}
.aboutustatle,.aboutustatle2{
	margin-top: 37px;
	display: flex;
	justify-content: center;
	font-size: 27px;
}
.aboutustatle2{
	font-size: 12px;
	color: white;
}
.menber{
	align-items: center;
	display: flex;
	font-size: 12px;
	margin-top: 51px;
	margin-left: 34px;
}
.memberbox,.memberbox2{
	display: block;
	flex-basis: 0%;
	flex-shrink: 1;
	flex-grow: 3;
	height: 544px;
	justify-content: flex-start;/*justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

提示：使用 align-content 属性对齐交叉轴上的各项（垂直）。*/
}
.memberbox2{
	flex: 2;
}
.memberintroduce{
	margin-top: 17px;
	font-size: 12px;
	display:flex;
	align-items: center;
	height: 120px;
}
.memberpicture{
	height: 85px;
	width: 85px;
	border-radius: 50%;
}
.membername,.memberdetal{
	margin-left: 34px;
	display: block;
	margin-top: 5px;
	font-size: 20px;
	vertical-align: middle;/*对齐到父元素中部*/
	height: 26.4px;
	color:white;
}
.memberdetal{
	margin-top: 0px;
	font-size: 12px;
	line-height: 20px;
	height: 20px;
}
.dot{
	background-color: rgb(239, 215, 83);
	width: 17px;
	height: 17px;
	border-radius: 50%;
	display: block;
	
}
.line{
	background-color: rgb(239, 215, 83);
	width: 2px;
	height: 85px;
	display: block;
	margin-left: 8.5px;
}
.dotbox{
	display: flex;
	align-items: center;
	height: 17px;
}
.history{
	font-size: 12px;
	display: block;
	color: white;
	margin-left: 15px;
}
.joinusintorduce{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 300px;
	height: 250px;
}
.joinusbox{
	margin-top: 20px;
	height: 250px;
	width: 100%;
	display: flex;
	justify-content: space-around;
}
.arrow{
	width: 75px;
	height: 75px;
}
.joinustext,.joinustext2{
	margin-top: 10px;
	width: 320px;
	text-align: center;
	font-size: 27px;
	color:rgb(239, 215, 83);
	margin-bottom: 20px;
}
.joinustext2{
	font-size: 18px;
	color: black;
	margin-top: 0;
	margin-bottom: 0;
}
.bottom{
	font-size: 12px;
	background-color: #757170;
	height: 150px;
	width: 100%;
	text-align: center;
	color: white;
}