@charset "utf-8";
* {
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
}
body {
	width: 100%;
	height: 100%;
}
/* 网站建设 */
.web-index-cp {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../images/web-index-bg-1.png) top center no-repeat;
	z-index: 1;
}
.web-index-cp {
	-webkit-animation: flipLeft 0.5s ease-out;
	-moz-animation: flipLeft 0.5s ease-out;
	-ms-animation: flipLeft 0.5s ease-out;
	-o-animation: flipLeft 0.5s ease-out;
	animation: flipLeft 0.5s ease-out;
	opacity: 1 !important;
	visibility: visible !important;
}
.web-index-dz {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../images/web-index-bg-2.png) top center no-repeat;
	z-index: 2;
}
.web-index-dz {
	-webkit-animation: flipRight 0.5s ease-out;
	-moz-animation: flipRight 0.5s ease-out;
	-ms-animation: flipRight 0.5s ease-out;
	-o-animation: flipRight 0.5s ease-out;
	animation: flipRight 0.5s ease-out;
	opacity: 1 !important;
	visibility: visible !important;
}
/* 头部 */
.header {
	position: absolute;
	width: 75rem;
	height: 5rem;
	left: 50%;
	right: 50%;
	margin-left: -37.5rem;
	z-index: 3;
}
.header .logo {
	display: inline;
	float: left;
	width: 17.0625rem;
	height: 5rem;
	background: url(../images/logo-web.png) left center no-repeat;
}
.header .nav {
	display: inline;
	float: right;
	width: auto;
	height: 5rem;
	font: 1rem/5rem "Microsoft Yahei", "Arial";
	color: #FFFFFF;
}
.header .nav a {
	color: #FFFFFF;
}
.header .nav span {
	height: 5rem;
	font: italic 1.125rem/5rem "Arial";
	color: #FFFFFF;
}
/* 手机-头部 */
.top {
	width: 100%;
	height: auto;
	text-align: left;
	position: fixed;
	top: 0;
	left: 0;
	background: #FFFFFF;
	border-bottom: 1px solid #e9e9e9;
	z-index: 1080;
	padding: 15px 30px;
}
/* 手机-头部logo */
.top .logo {
	display: inline;
	float: left;
	width: auto;
	height: 36px;
	text-align: center;
}
.top .logo img {
	width: auto;
	height: 100%;
}
.top i {
	line-height: 36px;
	font-size: 18px;
}
/* 手机-头部导航 */
.top #navbar-header {
	font: 14px/36px "Microsoft Yahei", "Arial";
	color: #000000;
	margin-top: 15px;
}
.top #navbar-header li {
	display: block;
	width: 130px;
	height: 48px;
	font: 16px/32px "Microsoft Yahei", "Arial";
	color: #000000;
	text-align: center;
	overflow: hidden;
	margin: 0 auto;
}
.top #navbar-header li a {
	display: block;
	width: 130px;
	height: 32px;
	font: 16px/32px "Microsoft Yahei", "Arial";
	color: #000000;
	margin: 8px 0;
}
.top #navbar-header li a:hover {
	display: block;
	background: #3377ff;
	color: #FFFFFF;
	border-radius: 16px;
	text-decoration: none;
}
.top #navbar-header li .active {
	display: block;
	background: #3377ff;
	color: #FFFFFF;
	border-radius: 16px;
	text-decoration: none;
}
.web-left {
	position: absolute;
	top: 50%;
	bottom: 50%;
	right: 50%;
	width: 37.5rem;
	height: 15.375rem;
	margin-top: -3.75rem;
	z-index: 4;
}
.web-right {
	position: absolute;
	top: 50%;
	bottom: 50%;
	left: 50%;
	width: 37.5rem;
	height: 15.375rem;
	margin-top: -3.75rem;
	z-index: 5;
}
.web-text-1 {
	width: 100%;
	height: 65px;
	background: url(../images/web-index-text-1.png) left top no-repeat;
}
.web-text-2 {
	width: 100%;
	height: 33px;
	margin: 50px 0;
	background: url(../images/web-index-text-2.png) left top no-repeat;
}
.web-text-3 {
	width: 100%;
	height: 65px;
	background: url(../images/web-index-text-3.png) right top no-repeat;
}
.web-text-4 {
	width: 100%;
	height: 33px;
	margin: 50px 0;
	background: url(../images/web-index-text-4.png) right top no-repeat;
}
.web-text-1, .web-text-2, .web-text-3, .web-text-4 {
	-webkit-animation: flipTop 1.5s ease-out;
	-moz-animation: flipTop 1.5s ease-out;
	-ms-animation: flipTop 1.5s ease-out;
	-o-animation: flipTop 1.5s ease-out;
	animation: flipTop 1.5s ease-out;
	opacity: 1 !important;
	visibility: visible !important;
}
.btn-web-left {
	border: 1px solid #0279f0;
	border-radius: 4px;
	position: absolute;
	height: 3rem;
	font: 1rem/2.125rem "Microsoft Yahei", "Arial";
	color: #0279f0;
}
.btn-web-left:hover {
	border: 1px solid #0279f0;
	border-radius: 4px;
	position: absolute;
	height: 3rem;
	font: 1rem/2.125rem "Microsoft Yahei", "Arial";
	color: #FFFFFF;
	background: #0279f0;
}
.btn-web-right {
	border: 1px solid #FFFFFF;
	border-radius: 4px;
	position: absolute;
	height: 3rem;
	font: 1rem/2.125rem "Microsoft Yahei", "Arial";
	color: #FFFFFF;
}
.btn-web-right:hover {
	border: 1px solid #0279f0;
	border-radius: 4px;
	position: absolute;
	height: 3rem;
	font: 1rem/2.125rem "Microsoft Yahei", "Arial";
	color: #0279f0;
	background: #FFFFFF;
}
.btn-web-left, .btn-web-right {
	-webkit-animation: flipBottom 1.5s ease-out;
	-moz-animation: flipBottom 1.5s ease-out;
	-ms-animation: flipBottom 1.5s ease-out;
	-o-animation: flipBottom 1.5s ease-out;
	animation: flipBottom 1.5s ease-out;
	opacity: 1 !important;
	visibility: visible !important;
}
.section1 {
	background: url(../images/web-index-bg-1.png) top left no-repeat;
}
.section2 {
	background: url(../images/web-index-bg-2.png) top right no-repeat;
}
.section1 .web-text-1 {
	width: 100%;
	height: auto;
	background: none;
	text-align: center;
}
.section1 .web-text-1 img {
	width: 100%;
	max-width: 596px;
	height: auto;
}
.section1 .web-text-2 {
	width: 100%;
	height: auto;
	background: none;
	margin: 30px 0;
	text-align: center;
}
.section1 .web-text-2 img {
	width: 100%;
	max-width: 508px;
	height: auto;
}
.section2 .web-text-3 {
	width: 100%;
	height: auto;
	background: none;
	text-align: center;
}
.section2 .web-text-3 img {
	width: 100%;
	max-width: 423px;
	height: auto;
}
.section2 .web-text-4 {
	width: 100%;
	height: auto;
	background: none;
	margin: 30px 0;
	text-align: center;
}
.section2 .web-text-4 img {
	width: 100%;
	max-width: 565px;
	height: auto;
}
.section2 .web-text-3.active, .section2 .web-text-4.active {
	-webkit-animation: flipTop 1.5s ease-out;
	-moz-animation: flipTop 1.5s ease-out;
	-ms-animation: flipTop 1.5s ease-out;
	-o-animation: flipTop 1.5s ease-out;
	animation: flipTop 1.5s ease-out;
	opacity: 1 !important;
	visibility: visible !important;
}
.section2 .btn-web-right-.active {
	-webkit-animation: flipBottom 1.5s ease-out;
	-moz-animation: flipBottom 1.5s ease-out;
	-ms-animation: flipBottom 1.5s ease-out;
	-o-animation: flipBottom 1.5s ease-out;
	animation: flipBottom 1.5s ease-out;
	opacity: 1 !important;
	visibility: visible !important;
}
.footer {
	position: absolute;
	bottom: 20px;
	width: 100%;
	height: 5rem;
	margin: 0 auto;
	font: 1rem/2.5rem "Microsoft Yahei", "Arial";
	text-align: right;
	color: #FFFFFF;
	z-index: 6;
}
.footer .copyright {
	display: inline;
	float: left;
	height: 5rem;
	font: 0.875rem/2.5rem "Microsoft Yahei", "Arial";
	text-align: right;
	color: #FFFFFF;
	margin-right: 20px;
	overflow: hidden;
}
.footer .copyright a {
	color: #FFFFFF;
}
.footer .qc {
	display: inline;
	float: left;
	width: 5rem;
	height: 5rem;
}
.footer .qc img {
	width: 5rem;
	height: 5rem;
}
#tj {
	display: none;
}