body, h1, h2, h3, h4, h5, h6, p, ul { padding: 0; margin: 0; }
body { font-family: 'Microsoft YaHei', SimHei, Calibri, Arial; }

.logo { position: absolute; /*left: 45%;*/ top: -96%; position: relative; }
	.logo h1 a { display: inline-block; color: #fff; font-size: 1em; text-decoration: none; }
	.logo div.logo-pic { position: absolute; left: 0; top: -17px; text-align: left; }
		.logo div.logo-pic img { width: 50%; height: 50%; }
span.menu { display: none; }

.top-header { margin: 2em 0; text-align: center; position: relative; }

.top-menu ul { float: right; }
	.top-menu ul li { display: inline-block; }
.top-menu { position: relative; }
	.top-menu ul li a { font-size: 1.4em; color: #000; padding: 0 1.5em; text-decoration: none; font-weight: 100; }
		.top-menu ul li a:hover { color: #3598db; }
/*.top-menu ul li:nth-child(3) { margin-right: 13em;}*/

.header { background: url(../images/banner.jpg) no-repeat 0px -127px; background-size: cover; min-height: 600px; }

.banner-info { float: right; width: 46%; margin: 10em 0 0 0em; }
	.banner-info h2 { color: #fff; font-size: 3.5em; }
	.banner-info h3 { color: #fff; font-size: 2.5em; }
	.banner-info p { color: #fff; font-size: 1.5em; line-height: 1.8em; margin-top: 2em; }

label { font-weight: normal; }

/*--service--*/
.service { padding: 5em 0; }

.icon-pic { /*float: left; width: 23%;*/ }
.icon { width: 100px; height: 100px; display: inline-block; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; margin-bottom: 1.5em; padding: 32px 0px; background: #fff; border: 2px solid #3598db; }
	.icon:hover { background: #3598db; }
.glyphicon-tree-deciduous:before, .glyphicon-phone:before, .glyphicon-sort:before, .glyphicon-random:before { color: #9F9F9F; font-size: 35px; }
.icon:hover span.glyphicon-tree-deciduous:before, .icon:hover span.glyphicon-phone:before, .icon:hover span.glyphicon-sort:before, .icon:hover span.glyphicon-random:before { color: #fff !important; }

.icon-info { /* float: left; width: 74%; margin-left: 3%;*/ }
	.icon-info h4 a { color: #3E3E3E; font-size: 1.3em; text-decoration: none; display: inline-block; }
	.icon-info p { font-size: 1em; line-height: 1.8em; color: #999; margin-top: 0.7em; }
.service-grids { margin-top: 3.5em; }
.grids2 { margin-top: 3.5em; }

/*--about--*/
.about { padding: 0; background: #eeeeee; }
.about-right h3, .service h3, .gallery h3, .blog h3, .contact h3 { color: #3598db; font-size: 2.5em; text-align: center; }
.about-right { width: 51.8%; float: left; padding: 4em; }
	.about-right h4 { font-size: 1.2em; margin-top: 1em; line-height: 1.8em; color: #9A9A9A; }
.about-left { float: left; width: 48.2%; background: url(../images/img1.jpg) no-repeat 0px -113px; min-height: 302px; background-size: cover; }

/*----*/
.blog { padding: 4em; min-height: 300px; background: url(../images/blog-bg2.jpg) no-repeat; background-size: cover; }
.blog-grids { margin: 4em auto; width: 256px; height: 256px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }
	.blog-grids img { width: inherit; height: inherit; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }

/*--contact--*/
.contact { padding: 3em 0; }

.touch-top { margin-top: 2.5em; }
.touch-right-top:nth-child(1) { margin-top: 0; }
.touch-right-top { text-align: center; margin-top: 8px; color: #999; }
	.touch-right-top p a { color: #999; }
	.touch-right-top span.add { background-position: 0px 0px; }
	.touch-right-top span.mail { background-position: -35px 0px; }
	.touch-right-top span.num { background-position: -70px 0px; }
	.touch-right-top span { background: url(../images/contact.png) no-repeat; width: 35px; height: 46px; display: block; margin: 0 auto; }
	.touch-right-top h4 { color: #999; font-size: 12px; letter-spacing: 1px; margin: 0px; }

/*----*/
.footer { text-align: center; background: #000; padding: 3em 0 1em 0; }
	.footer p { color: #fff; font-size: 1em; }
		.footer p a { color: #fff; }
.social { margin-top: 1.5em; }
	.social i { width: 27px; height: 27px; background: url('../images/social-icons.png') no-repeat 0px 0px; display: inline-block; margin: 0 5px; }

.arrow { text-align: center; padding: 2em 0 0.5em 0; }
#toTop { display: none; text-decoration: none; position: fixed; bottom: 14px; right: 3%; overflow: hidden; width: 40px; height: 40px; border: none; text-indent: 100%; background: url("../images/to-top1.png") no-repeat 0px 0px; }
#toTopHover { width: 40px; height: 40px; display: block; overflow: hidden; float: right; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); }

/*--responsive--*/
@media (max-width: 1280px) {
	.about-left { background: url(../images/img1.jpg) no-repeat 0px -77px; min-height: 332px; background-size: cover; }
}

@media (max-width: 1080px) {
	.logo { /*left: 42%;*/ }
	.banner-info { margin: 8em 0 0 0em; }
		.banner-info h2 { font-size: 3em; }
		.banner-info h3 { font-size: 2em; }
	.header { background: url(../images/banner.jpg) no-repeat 0px 0; background-size: cover; min-height: 494px; }
}

@media (max-width: 1024px) {
	.banner-info { margin: 8em 0 0 0em; }
		.banner-info h2 { font-size: 3em; }
		.banner-info h3 { font-size: 2em; }
	.header { min-height: 483px; }
	.logo { /*left: 43%;*/ }
	.about-right h4 { font-size: 1.2em; }
	.about-left { background: url(../images/img1.jpg) no-repeat 0px -2px; min-height: 364px; background-size: cover; width: 52.2%; }
	.about-right { width: 47.8%; padding: 2em; }
	.touch-left form input[type="text"]:nth-child(1) { margin-right: 19px; }
}

@media (max-width: 991px) {
	.header { min-height: 430px; }
	.banner-info h2 { font-size: 2.5em; }
	.banner-info h3 { font-size: 2em; }
	.banner-info { margin: 9em 0 0 0em; padding: 0 0px 0 79px; width: 58%; }
		.banner-info p { font-size: 0.9em; line-height: 1.6em; margin-top: 1.5em; }
		.banner-info a { padding: 0.7em 3em; font-size: 1em; margin-top: 1.5em; }
	.top-menu ul li a { padding: 0 1em; }
	.icon-pic { /*width: 25%;*/ }
	.icon-info { /*width: 72%;*/ }
		.icon-info p { font-size: 0.9em; }
	.glyphicon-phone:before, .glyphicon-thumbs-up:before, .glyphicon-picture:before, .glyphicon-user:before { font-size: 27px; }
	.icon { width: 80px; height: 80px; padding: 23px 0px; }
	.icon-info h4 a { font-size: 1.2em; }
	.galry-grids { padding: 4px; width: 33.3%; float: left; }
	.blog-grid { width: 50%; float: left; }
	.about-right p { font-size: 0.9em; margin-top: 0.7em; }
	.about-left { min-height: 341px; }
	.blog-grid h4 a { font-size: 1.2em; }
	.blog-grid p { font-size: 0.9em; }
}

@media (max-width: 800px) {
}

@media (max-width: 768px) {
	.header { background: url(../images/banner.jpg) no-repeat 0px 0; background-size: cover; min-height: 400px; }
	.banner-info h2 { font-size: 2em; }
	.banner-info h3 { font-size: 1.5em; }
	.banner-info { margin: 7em 0 0 0em; }
	.map iframe { width: 100%; min-height: 320px; }
	.about-right h3, .service h3, .gallery h3, .blog h3, .contact h3 { font-size: 2em; }
	.service { padding: 3em 0; }
	.icon-info h4 a { font-size: 1.1em; }
	.about-right h4 { font-size: 1.2em; }
	.about-right a { font-size: 0.9em; margin-top: 1em; }
	.gallery { margin: 2em 0; }
	.blog-grid h4 a { font-size: 1.1em; }
	.blog-grid span { font-size: 0.9em; }
	.middleblog-grid { text-align: left; }
	.touch-left form input[type=submit] { font-size: 13px; }
	.arrow { padding: 1em 0 0.5em 0; }
}

@media (max-width: 736px) {
	span.menu { display: block; text-align: right; cursor: pointer; position: relative; padding: 1em 0; }
	.top-menu span img { display: inline-block; }
	.top-menu { width: 100%; float: right; }
		.top-menu ul { display: none; }
			.top-menu ul li { font-size: 12px; display: inline-block; width: 100%; margin: 0; }
		.top-menu ul { margin: 0; z-index: 999; position: absolute; width: 100%; text-align: center; left: 0%; background: #fff; }
			.top-menu ul li a { padding: 0.4em 0em; display: block; font-size: 1.4em; }
	.top-header { margin: 1em 0; }
	.header { min-height: 350px; }
	.logo { /*left: 42%;*/ }
	.banner-info h2 { font-size: 1.5em; }
	.banner-info h3 { font-size: 1.2em; }

}

@media(max-width:640px) {
	span.menu { display: block; text-align: right; cursor: pointer; position: relative; padding: 1.5em 0; }
	.top-menu span img { display: inline-block; }
	.top-menu { width: 100%; float: right; }
		.top-menu ul { display: none; }
			.top-menu ul li { font-size: 12px; display: inline-block; width: 100%; margin: 0; }
		.top-menu ul { margin: 0; z-index: 999; position: absolute; width: 100%; text-align: center; left: 0%; background: #fff; }
			.top-menu ul li a { padding: 0.4em 0em; display: block; font-size: 1.4em; }
	.top-header { margin: 0em 0; }
	.header { min-height: 350px; }
	.logo { /*left: 42%;*/ top: 23px; }
	.banner-info h2 { font-size: 1.5em; }
	.banner-info h3 { font-size: 1.2em; }
	.banner-info { margin: 6em 0 0 0em; width: 54%; padding: 0 0px 0 45px; }
		.banner-info a { padding: 0.6em 3em; font-size: 0.85em; margin-top: 1em; }
	.icon-pic { /*width: 13%;*/ }
	.icon-info { /*width: 84%;*/ }
	.grids2 { margin-top: 0em; }
	.service-grids { margin-top: 2em; }
	.about-left { background: url(../images/img1.jpg) no-repeat 0px -33px; min-height: 348px; background-size: cover; width: 100%; }
	.about-right { width: 100%; padding: 0 1.5em 2em 1.5em; }
	.service { padding: 2em 0 1em 0; }
	.about { padding: 0em 0; }
	.blog-grid { width: 100%; padding: 0; margin-bottom: 2em; }
	a.blogs { font-size: 0.9em; margin-top: 0.5em; }
	.middleblog-grid { margin: 0em auto 0; }
	.touch-left form input[type="text"]:nth-child(1) { margin-right: 0; }
	.touch-left form input[type="text"] { width: 100%; }
	.map iframe { min-height: 250px; }
	.contact { padding: 2em 0; }
	.touch-left { padding: 0; }
	.touch-top { margin-top: 1.5em; }
	.touch-left form textarea { margin: 1em 0 0 0; }
	.footer p { font-size: 0.9em; }
	.footer { padding: 2em 0 1em 0; }
	.top-menu ul li:nth-child(3) { margin-right: 0; }
}

@media(max-width:480px) {
	span.menu { padding: 0.7em 0; }
	.header { background: url(../images/banner.jpg) no-repeat -75px 0px; background-size: cover; min-height: 335px; }
	.banner-info { margin: 4em 0 0 0em; width: 54%; padding: 0 0px 0 9px; }
	.logo { /*left: 42%;*/ top: 22px; }
		.logo div.logo-pic img { width: 40%; height: 40%; }
	.icon-pic { /*width: 18%;*/ }
	.icon-info { /*width: 76%;
  margin-left: 4%;*/ }
		.icon-info p { font-size: 0.85em; margin-top: 0.5em; }
		.icon-info h4 a { font-size: 1em; }
	.about-left { min-height: 283px; }
	.about-right p { font-size: 0.85em; }
	.about-right a { font-size: 0.85em; padding: 0.7em 1.5em; }
	.blog-grid p { font-size: 0.85em; line-height: 1.7em; }
	.touch-left form input[type=submit] { font-size: 12px; margin: 1em 0 0 0px; padding: 9px 27px; }
	.touch-left form input[type="text"], .touch-left form textarea { width: 100%; font-size: 0.9em; padding: 10px; }
	.touch-right-top h4 { letter-spacing: 0px; }
}

@media(max-width:414px) {
	.header { background: url(../images/banner.jpg) no-repeat -124px 0px; background-size: cover; }
	.banner-info { width: 59%; }
	.logo { /*left: 42%;*/ top: 22px; }
		.logo div.logo-pic img { width: 40%; height: 40%; }
}

@media(max-width:384px) {
	.header { background: url(../images/banner.jpg) no-repeat -158px 0px; background-size: cover; min-height: 335px; }
	.banner-info { width: 65%; }
}

@media(max-width:320px) {
	span.menu { padding: 1.2em 0; }
	.logo { /*left: 42%;*/ top: 22px; }
		.logo div.logo-pic img { width: 40%; height: 40%; }
	.header { background: url(../images/banner.jpg) no-repeat -154px 0px; background-size: cover; min-height: 276px; }
	.banner-info { margin: 3em 0 0 0em; width: 80%; padding: 0 0px 0 15px; }
		.banner-info p { font-size: 0.8em; }
		.banner-info a { padding: 0.55em 2.5em; font-size: 0.85em; margin-top: 1em; }
	.glyphicon-phone:before, .glyphicon-thumbs-up:before, .glyphicon-picture:before, .glyphicon-user:before { font-size: 20px; }
	.icon { width: 54px; height: 55px; padding: 14px 0px; }
	.icon-info h4 a { font-size: 0.9em; }
	.icon-info { width: 76%; margin-left: 6%; }
	.about-left { min-height: 204px; background: url(../images/img1.jpg) no-repeat 0px 0px; background-size: cover; }
	.about-right h3, .service h3, .gallery h3, .blog h3, .contact h3 { font-size: 1.5em; }
	.service-grids { margin-top: 1.5em; }
	.about-right { padding: 2em 1em 0 1em; }
		.about-right h4 { font-size: 1.1em; }
		.about-right a { font-size: 0.8em; padding: 0.7em 1.3em; }
	.galry-grids { padding: 0px 0 8px 0; width: 100%; }
	.gallery-info { margin-top: 1.5em; }
	.blog-grids { margin-top: 1.5em; }
	.blog-grid h4 a { font-size: 0.9em; }
	.blog-grid span { font-size: 0.83em; }
	.blog-grid p { margin-top: 0.5em; }
	.map iframe { min-height: 180px; }
	.touch-left form textarea { height: 120px; }
}