html {

    

}

* {
font-size: 12px;
	margin: 0;

	padding: 0;



	-webkit-font-smoothing: antialiased;



	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

}







h1, h2, h3, h4, b {

	font-weight: 300;

}



.img_area{ float:left; width:200px; margin-right:40px; height:200px;}




.banner {

	width: 100%;

	overflow: auto; 

	font-size: 18px;

	line-height: 24px;

	text-align: left;



	color: #000

	/*text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);	box-shadow: 0 1px 2px rgba(0,0,0,.25);*/





	background: #fff;

}

	.banner ul {

		list-style: none;

		width: 300%;

	}

	.banner ul li { height:520px;

		display: block;

		float: left;

		width: 33%;

	/*	min-height: 350px;*/



		-o-background-size: 100% 100%;

		-ms-background-size: 100% 100%;

		-moz-background-size: 100% 100%;

		-webkit-background-size: 100% 100%;

		background-size: 100% 100%;



		/*box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);*/

	}



	.banner .inner { height:520px;

		padding: 0px 0px; text-align:left; 

	}

 .banner .inner p{ padding-left:0px; color:#000; line-height:25px; font-size:14px; margin-bottom:10px; height:50px;}

	.banner h1, .banner h2 {

		font-size: 30px; height:52px;

		line-height: 52px;

		color: #000;

	}

	 .banner .inner  img{ height:388px;}

	.banner h1 a{	font-size: 30px;

  height: 52px;

  line-height: 52px;

  color: #000;}

	

	.banner h1 a:hover{

text-decoration:none;

}

	.banner .btn {

		display: inline-block;

		margin: 25px 0 0;

		padding: 9px 22px 7px;

		clear: both;



		color: #fff;

		font-size: 12px;

		font-weight: bold;

		text-transform: uppercase;

		text-decoration: none;



		border: 2px solid rgba(255,255,255,.4);

		border-radius: 5px;

	}

		.banner .btn:hover {

			background: rgba(255,255,255,.05);

		}

		.banner .btn:active {

			-webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));

			-moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));

			-ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));

			-o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));

			filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));

		}



	.banner .btn, .banner .dot {

		-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));

		-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));

		-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));

		-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));

		filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));

	}



	.banner .dots {

		position: absolute;

		left: 380px;

		right: 0;

		bottom: 20px;

		width: 100%;

	}

		.banner .dots li {

			display: inline-block;

			*display: inline;

			zoom: 1;



			width: 10px;

			height: 10px;

			line-height: 10px;

			margin: 0 4px;



			text-indent: -999em;

			*text-indent: 0;



			border: 2px solid #fff;

			border-radius: 6px;



			cursor: pointer;

			opacity: .4;



			-webkit-transition: background .5s, opacity .5s;

			-moz-transition: background .5s, opacity .5s;

			transition: background .5s, opacity .5s;

		}

			.banner .dots li.active {

				background: #fff;

				opacity: 1;

			}



	.banner .arrows {

		position: absolute;

		bottom: 20px;

		right: 20px;

		color: #fff;

	}

		.banner .arrow {

			display: inline;

			padding-left: 10px;

			cursor: pointer;

		}



.features {

	overflow: hidden;

	padding: 50px 0;



	background: #f7f7f6;

	box-shadow: inset 0 -1px 3px rgba(0,0,0,.03);

}

	.features li {

		position: relative;

		padding: 0 25px 0 40px;

		list-style: none;



		width: 25%;

		float: left;

	}

		.features li:before {

			content: '';

			position: absolute;

			left: 0;

			top: 0;



			display: block;

			width: 24px;

			height: 22px;



			background: url('img/icons.png');

		}

			.features li.browser:before { background-position: 0 -44px; }

			.features li.height:before { background-position: 0 -22px; }

			.features li.responsive:before { background-position: 0 -66px; }

	.features b {

		display: block;

		padding-bottom: 6px;

	}



.how {

	padding: 60px 0;

}

	.how h2 {

		color: #7c6853;

	}

	.how h3 {

		padding-bottom: 8px;



		color: #7b6b53;

		font-size: 20px;

		line-height: 10px;

	}

	.how li {

		position: relative;

		width: 375px;

		margin: 0 0 40px 15px;

		padding-left: 10px;

	}

	.how pre {

		position: absolute;

		left: 450px;

		top: 0;



		width: 495px;

		padding: 20px 25px;



		background: #f8f5f0;

		color: #8a785d;



		font-size: 12px;

		line-height: 18px;



		border-radius: 5px;

		box-shadow: inset 0 2px 2px rgba(180,157,125,.15), inset 0 0 1px rgba(0,0,0,.2);

	}

	.how p {

		padding-bottom: 15px;

	}









@media only screen and (min-device-width: 320px) and (max-device-width: 480px), (max-width: 900px) {

	.wrap {

		width: 90%;

	}

	#logo {

		left: 50px;

		top: 30px;

	}



	.banner h1, .banner h2 {

		font-size: 16px;

		line-height: 30px;

	}

	.banner h1, .banner h2 a { color:#000	}

	.banner ul li {

	}

	.banner .inner {

		padding-top: 0px;

		padding-bottom: 50px;

	}

	.banner p {

		font-size: 12px;

		width: 100%;

		margin: 0 auto;

	}

	pre {

		overflow: auto;

	}

	.features li {

		width: 100%;

		margin-left: 10px;

		margin-bottom: 30px;

	}

	.how li {

		width: 90%;

	}

	.how pre {

		position: static;

		width: 100%;

	}

}



@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

	.features li:before {

		background: url('img/icons@2x.png');

		background-size: 100%;

	}

}