*{
	margin:0;
	padding:0;
}
ul{
	list-style: none;
}
a{
	text-decoration: none;
}
img{
	border:0;
}


/*-----------*/
header{
	height:600px;
	background-color: rgba(0,0,0,0.4);
	/* background: url(../img/banner.jpg) center center;
	background-size: cover; */
}
nav{
	height:40px;
	line-height: 40px;
	
	color:#fff;
}
nav .logo{
	float:left;
}
nav ul{
	float:right;
}
nav ul li{
	float:left;
}
a{
	display: block;
	margin:0 20px;
	color:#fff;
}
header a:hover{
	color:red;
}



#banner .inner{
	width: 250px;
	height: 200px;
	margin:0 auto;
	padding-top: 150px;
	text-align: center;
	color:#fff;
}

.inner h2{
	border:2px solid #fff;
	border-left:0;
	border-right:0;
	padding:10px 20px;
	letter-spacing: 8px;
	display: inline-block;
}

.inner p{
	color:#fff;
	letter-spacing: 5px;
	margin:30px 0 50px 0;
}

.inner button{
	background: red;
	padding:10px 30px;
	color:#fff;
	border:0;
	font-size: 14px;
}

.more{
	display: block;
	width: 50px;
	height: 30px;
	margin:90px auto;
	line-height: 30px;
	text-align: center;
	color: red;
}


/*--------------*/

.content .green{
	padding: 80px 0;
	background: #089db0;
	color:#fff;
	text-align: center;
} 
.wrapper{
	max-width: 1080px;
	margin:0 auto;
}
.green h3{
	margin-bottom:20px;
}
.green h4{
	border-bottom: 1px solid #fff;
	padding-bottom: 20px;
}
.green p{
	padding:20px;
}
.green .wrapper ul{
	margin: 0 auto;
	width: 400px;
	height: 100px;
}
.green .wrapper ul li{
	float:left;
	width: 80px;
	height: 80px;
	background: #0d6f7c;
	margin: 20px;
	transform:rotate(45deg);
}

/*-----------------*/
.content .grey{
	background: rgb(36,47,54);
}

.content .purple{
	background: #373259;
}

.grey .left1{
	width:45%;
	float:left;
}
.left1 img{
	width:100%;
}
.grey .right1{
	width:46%;
	float:left;
	padding:50px;
	color:#fff;
}

.article-preview:after{
	content:"";
	display: block;
	clear:both;
}

.right1 h3{
	margin-bottom: 30px;
}
.article-preview:nth-child(odd){
	background-color: rgba(36,47,54,0.5);
}

.purple{
	color:#fff;
	text-align: center;
	padding:50px;
}

.purple ul{
	width: 700px;
	margin:30px auto;
	height:1200px;
}

.purple li{
	width: 248px;
	height: 200px;
	float: left;
	/* border:1px solid #fff; */
	padding: 50px;
	/* box-sizing:border-box; */
}

.purple li p{
	font-size: 16px;
	letter-spacing: 1px;
	text-align: left;
}

.purple li:first-child{
	background: rgba(0,0,0,0.04);
}
.purple li:nth-child(2){
	background: rgba(0,0,0,0.08);
}
.purple li:nth-child(3){
	background: rgba(0,0,0,0.12);
}
.purple li:nth-child(4){
	background: rgba(0,0,0,0.16);
}
.purple li:nth-child(5){
	background: rgba(0,0,0,0.20);
}
.purple li:nth-child(6){
	background: rgba(0,0,0,0.24);
}
.purple li:nth-child(7){
	background: rgba(0,0,0,0.28);
}
.purple li:last-child{
	background: rgba(0,0,0,0.32);
}


/*-------------------*/
footer{
	background: #333;
	text-align: center;
	color:#fff;
	max-height:150px;
	padding-top:20px;
}
footer ul{
	width: 500px;
	margin:0 auto;
	height: 90px;
	text-align: center;
}
footer li{
	float:left;
	padding:20px;
}
footer .copy:before{
	content:"";
	display: block;
	clear: both;
}
footer .copy{
	padding-bottom:20px;
	font-size: 12px;
}


.main-wraper{
	background: url(../img/banner.jpg) no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
}