@require 'mixin'
@require 'font'
@require 'common'

/* 首页 */
html {
	background: #333;
}
body {
	width: 90%;
	min-width: 990px;
	margin: 0 auto;
}
.wrapper {
	width: 60%;
	margin: 0 auto;
}

#nav {
	clearfix();
	height: 48px;
	padding: 0 25px;
	border-bottom: 1px solid #0F85C3;
	background: #1D8FBE;
	ul {
		clearfix();
		float: left;
		li {
			float: left;
		}
	}
	li a {
		display: inline-block;
		padding: _ 14px;
		font-size: 25px;
		color: #F1F6F9;
		line-height: 48px;
		height: 48px;
		box-sizing: border-box;
		text-shadow: 2px 2px 3px gray;
		&:hover {
			background: #4FA4C7;
			border-bottom: 4px solid rgb(116, 208, 255);
		}
	}
	.search {
		float: right;
		line-height: 48px;
		input[type="text"] {
			border: none;
			padding: 7px 14px;
			color: rgb(158, 158, 158);
			width: 20rem;
			font-size: 1rem;
			background: rgb(230, 237, 240);
			&:focus {
				background: #f9f9f9;
				padding: 7px 38px;
				transition: all 0.3s;
			}
		}
		button[type="submit"] {
			background: #EBF0F2;
			border: none;
			padding: 7px 14px;
			color: rgb(121, 121, 121);
			cursor: pointer;
			&:hover {
				background: #F9F9F9;
				padding: 7px 22px;
				transition: all 0.3s;
			}
		}
	}
}
#banner {
	background: #4fa4c7;
	h1 {
		padding: 10rem _ 5rem _;
		font-size: 9rem;
		color: rgb(210, 236, 247);
		text-align: center;
		letter-spacing: 1.8rem;
		text-shadow: 2px 2px 3px gray;
		animateExt(bounceInDown, 1s);
	}
	.contact {
		width: 90%;
		margin: 0 auto;
		clearfix();
		li {
			float: left;
			width: 33%;
			padding-bottom: 2rem;
			text-align: center;
		}
		a {
			font-size: 10rem;
			line-height: 13rem;
			color: rgb(210, 236, 247);
			&:hover {
				font-size: 13rem;
			}
		}
	}
}

#spectial {
	height: 8rem;
	background: rgb(240, 238, 238);
	.wrapper {
		position: relative;
	}
	.spec-title {
		position: absolute;
		left: 0;
		top: -3rem;
		width: 107px;
		height: 73px;
		background: url(../img/sprite.png) 0 -483px no-repeat;
	}
	ol {
		padding-left: 2rem;
	}
	li {
		display: inline-block;
		width: 32%;
		text-align: center;
		a {
			display: inline-block;
			width: 100%;
			line-height: 8rem;
			box-sizing: border-box;
			transition: background 0.2s;
			&:hover {
				background: #FAFAFA;
			}
		}
		span {
			color: rgb(133, 230, 46);
			font-size: 3.8rem;
			vertical-align: middle;
		}
		div {
			display: inline-block;
			width: 60%;
			color: black;
			font-size: 1.2rem;
		}
	}
	li:nth-child(2) {
		border-right: 1px solid #DDD;
		border-left: 1px solid #DDD;
	}
}
#information {
	clearfix();
	padding: 3.5rem _ _;
	background: #f7e45a;
	.wrapper {
		clearfix();
		width: 80%;
	}
	.ad {
		clearfix();
		float: left;
		width: 320px;
		img {
			box-shadow: 2px 2px 5px #9D9D9D;
			height: 200px;
			width: 320px;
			-webkit-transition: box-shadow 0.3s;
			-o-transition: box-shadow 0.3s;
			transition: box-shadow 0.3s;
			&:hover {
				-webkit-box-shadow: 0px 0px 20px #525252;
				box-shadow: 0px 0px 20px #525252;
			}
		}
		img:first-child {
			margin-bottom: 2rem;
		}
	}
	.tab-info {
		margin-left: 360px;
		border: 1px solid rgba(210, 210, 210, 0.59);
	}
	.tab-title {
		display: -webkit-flex;
		display: flex;
		width: 100%;
		box-shadow: 2px 0px 0px #B8B4B4;
	}
	.tab-title li {
		-webkit-flex:1; 
		flex:1;
		&:nth-child(2) {
			border-right: 2px solid rgba(236, 236, 236, 0.57);
			border-left: 2px solid rgba(236, 236, 236, 0.57);
		}
	}
	.tab-title a {
		display: block;
		font-size: 1.5rem;
		color: rgb(97, 97, 97);
		background: rgba(80, 210, 249, 0.6);
		text-align: center;
		line-height: 3.2rem;
		-webkit-transition: background .2s;
		-o-transition: background .2s;
		transition: background .2s;
	}
	.tab-title .selected {
		background: rgba(205,205,205,0.34);
		text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9);
		color: rgba(52, 52, 52, 0.81);
	}
	.tab-list {
		padding: 1rem 2rem;
		background: rgba(205,205,205,0.34);
		box-shadow: 1px 1px 1px #9d9d9d;
		a {
			line-height: 2.7rem;
			color: #565656;
			font-size: 1.2rem;
			letter-spacing: .1rem;
			-webkit-transition: text-shadow .3s;
			-o-transition: text-shadow .3s;
			transition: text-shadow .3s;
			&:hover {
				color: #fff;
				text-shadow:0 0 2px rgba(161, 161, 161, 0.49);
			}
		}
		span {
			float:right;
			line-height: 2.7rem;
			color: #797979;
			font-size: 1.2rem;
		}
	}
	.slider-news {
		margin: 0 auto;
		text-align: center;
		margin-top: 4rem;
		img {
			box-shadow: 0px 0px 5px #9D9D9D;
		}
	}
}
#recommend {
	background: #88db43;
	&:before {
		content: "";
		display: block;
		height: 155px;
		background-size: 100%;
		background: url("../img/bg_separation.png") no-repeat;
	}
}
#article {
	background: #4fa4c7;
	color: white;
	padding: 7rem _;
	letter-spacing: 0.15rem;
	.title {
		font-size: 2rem;
		text-align: center;
		text-shadow: 2px 2px 6px #797979;
	}
	.notes {
		padding: 1rem _ 2rem;
		text-align: center;
		span {
			padding: _ 3rem;
		}
	}
	.summary {
		text-indent: 2rem;
		background: rgba(205, 205, 205, 0.34);
		padding: 1.5rem 2rem;
		margin: _ _ 2rem;
		line-height: 1.8rem;
	}
	article {
		background: rgba(205, 205, 205, 0.34);
		padding: 1.5rem 2rem;
		p{
			padding: 0.4rem _;
			line-height: 1.8rem;
			text-indent: 2rem;
			text-shadow: 2px 2px 6px #797979;
		}
	}
}
.rec-post:before {
	background: url("../img/bg_separation_post.png") no-repeat !important;
}



/* 列表页 */
#list {
	background: #4fa4c7;
	color: #fff;
	padding-top: 7rem;
	padding-bottom: 7rem;
	letter-spacing: .15rem;
	span {
		padding: 0 10px;
		color: rgb(224, 224, 224);
	}
	li {
		padding-left: 8rem;
		overflow: hidden;
		height: 50px;
		line-height: 50px;
	}
	a {
		height: 50px;
		overflow: hidden;
		-webkit-transition: all 0.2s;
		-o-transition: all 0.2s;
		transition: all 0.2s;
		&:hover {
			text-shadow: 1px 1px 1px #4E4E4E;
		}
	}
}

#footer {
	background: #4b5262;
	color: white;
	.wrapper {
		position: relative;
		padding: 10px 35px 5px;
	}
	a {
		color: white;
	}
}
.followWx {
	position: absolute;
	right: 1.5rem;
	top: 1.4rem;
}
.links {
	clearfix();
	h2 {
		font-weight: bold;
		font-size: 1.2rem;
		line-height: 2.5rem;
	}
	ul {
		clearfix();
		li {
			float: left;
			margin: _ 20px _ _;
			line-height: 2.5rem;
		}
	}
}
.copyright {
	p {
		line-height: 2.5rem;
	}
}


/* keyframe */
bounceInDown()