 body {
 	margin: 0;
 	padding: 0;
 }

 #headline {
 	padding: 0.8em;
 	color: white;
 	font-family: Roboto, helvetica, arial, sans-serif;
 	background-color: black;
 	background-image: url(img/bg.jpg);
 	background-size: cover;
 }

 #headline h1 {
 	font-weight: 200;
 	font-size: 60px;
 	line-height: 1em;
 	margin-bottom: 0;
 }

 #headline h2 {
 	font-weight: 200;
 	font-size: 30px;
 	margin-top: 5px;
 }

 #headline #blurb {
 	font-weight: 200;
 	font-size: 18px;
 }

 #headline #register {
 	background-color: #39b1a4;
 	background-color: rgba(57,177, 164, 0.7);
 	padding: 1em;
 }

 #headline #register h2 {
 	font-weight: 100;
 	padding: 0;
 	margin: 0;
 }

 #headline #register label {
 	font-size: 1.2em;
 	font-weight: 200;
 	padding-top: 12px;
 	display: block;
 }

 #headline #register input {
 	width: 100%;
 	font-size: 18px;
 	font-weight: 200;
 	padding: 10px;
 	box-sizing: border-box;
 }

 #headline #register input[type=submit] {
 	background-color: hsl(8, 70%, 54%);
 	color: white;
 	margin-top: 20px;
 	padding: 10px;
 	border: none;
 	box-sizing: border-box;
 	font-size: 18px;
 }

 #section1, #section2, #section3 {
 	box-sizing: border-box;
 	padding: 20px;
 }

 #section1 h2, #section2 h2, #section3 h2  {
 	margin-top: 0;
 	font-size: 24px
 }

 #section1 {
 	background-color: white;
 	font-family: Roboto, sans-serif;
 	font-weight: 100;
 	font-size: 18px;
 }

 #section1 h2 {
 	font-weight: 300;
 	text-align: center;
 	margin-bottom: 0px;
 	margin-top: 20px;
 }

 #section1 h2 + p {
 }

 #section1 video {
 	width: 100%;
 }

 #section2 {
 	background-color: #e9e9e9;
 	font-family: Roboto, sans-serif;
 	font-weight: 100;
 	font-size: 18px;
 }

 #section2 h2 {
 	font-weight: 300;
 	text-align: center;
 	margin-bottom: 0px;
 	margin-top: 20px;
 }

 #section2 h2 + p {
 	text-align: center;
 }

 #section2 div {
 	text-align: center;
 }

 #section2 div img {
 	width: 100%
 }

 #section3 {
 	background-color: #f5f5f5;
 	font-family: Roboto, sans-serif;
 	font-weight: 100;
 	text-align: center;
 	margin: auto;
 }

 #section3 h2 {
 	font-weight: 300;
 	text-align: center;
 	margin-bottom: 0px;
 	margin-top: 20px;
 }

 #section3 h2 + p {
 	text-align: center;
 }

 #section3 figure {
 	text-align: center;
 }

 #section3 figure figcaption {
 	text-align: center;
 	font-weight: 400;
 }

 #footer {
 	font-family: Roboto, sans-serif;
 	font-weight: 300;
 	text-align: center;
 	background-color: hsl(8, 70%, 54%);
 	color: white;
 	padding-bottom: 20px;
 	padding-top: 20px;
 }

 table {
 	margin-top: 26px;
 	width: 100%;
 }
 thead {
 	font-weight: bold;
 }

 tbody {
 	text-align: center;
 }


 @media screen and (max-width: 600px) {
 	table thead {
 		display: none;
 	}

 	table td {
 		display: block;
 		position: relative;
 		padding-left: 50%;
 		padding-top: 13px;
 		padding-bottom: 13px;
 		text-align: left;
 		background: #e9e9e9;
 	}

 	table td:before {
 		content: attr(data-th) " :";
 		display: inline-block;
 		color: #000000;
 		background: #e9e9e9;
 		border-right: 2px solid transparent;
 		position: absolute;
 		top: 0;
 		left: 0;
 		bottom: 0;
 		width: 33%;
 		max-height: 100%;

 		font-size: 16px;
 		font-weight: 300;
 		padding-left: 13px;
 		padding-top: 13px;
 	}
 }

 @media screen and (min-width: 600px) {
 	#headline {
 		padding: 20px 5%;
 	}

 	.container {
 		margin: auto;
 		max-width: 800px;
 	}

 	#headline #blurb {
 		float: left; 
 		font-weight: 200;
 		width: 50%;
 		font-size: 18px;
 		box-sizing: border-box;
 		padding-right: 10px;
 	}

 	#headline br {
 		clear: both;
 	}

 	#headline #register {
 		float:right;
 		padding: 20px;
 		width: 50%;
 		box-sizing: border-box;
 		font-weight: 300;
 	}

 	#section1 #section2, #section3 {
 		box-sizing: border-box;
 		padding: 10px 20% 80px 20%;
 	}

 	#section1 h2, #section2 h2, #section3 h2  {
 		margin-top: 0;
 		font-size: 60px
 	}

 	#section1 ul {
 		box-sizing: border-box;
 		float: left;
 		width: 50%;
 		padding-right: 1em;
 	}

 	#section1 video {
 		box-sizing: border-box;
 		width: 50%;
 		float: right;
 	}

 	#section1 br {
 		clear: both;
 	}

 	#section2 div img {
 		width: 30%;
 		margin: 1%;
 		box-sizing: border-box;
 		border-radius: 50% 50%;
 		box-shadow: black 0px 0px 5px;
 	}
 }
 /*
字体
*/
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 100;
	src: local('Roboto Thin'), local('Roboto-Thin'), url(http://fonts.gstatic.com/s/roboto/v15/rB9EtQHnJI9-9iLCzVr5P_esZW2xOQ-xsNqO47m55DA.ttf) format('truetype');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Fl4y0QdOxyyTHEGMXX8kcaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/B85vmdvDILX92ray16e-1g.ttf) format('truetype');
}
