@charset "utf-8";
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

.clearfix:before, .clearfix:after {
	content: "";
	display: block;
	clear: both;
}

html, body {
	margin: 0;
	padding: 0;
	font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
	color: #5f5f5f;
	position: relative;
	width: 100vw;
	min-height: 100vh;
	overflow-x: hidden;
	font-size: 10px;
}

a {
	text-decoration: none;
	outline: none;
}

img, input {
	border: 0;
	max-width: 100%;
	vertical-align: middle;
	margin: 0;
	padding: 0
}

ul, li, p, h1, h2, h3, h4, h5, dl, dt, dd, button {
	margin: 0;
	padding: 0;
	list-style: none
}

.header {
	width: 100%;
	margin: 0 auto;
	position: relative;
	background: url(../img/bg.jpg) repeat;
	height: 100px;
	overflow: hidden;
}

.header .main {
	padding-top: 22px;
}

.main {
	width: 910px;
	position: relative;
	margin: 0 auto;
	z-index: 99;
}

.logo_left {
	width: 195px;
	height: 57px;
	left: 0;
}

.logo_left img {
	width: 100%;
	height: 100%;
}

.center {
	width: 100%;
	height: 190px;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	background: url(../img/center-bg.png) no-repeat;
	background-size: auto;
	padding: 30px 20px;
}

.center h3 {
	font-size: 14px;
	color: #171717;
	line-height: 30px;
}

.center p {
	font-size: 14px;
	color: #171717;
	line-height: 24px;
	padding-left: 2em;
}

.addBtn {
	display: block;
	width: 100px;
	height: 30px;
	margin: 20px auto 0;
	color: #0072C1;
	text-decoration: underline;
	cursor: pointer;
	height: 30px;
	line-height: 30px;
	background: url(../img/s_add.png) 0 0 no-repeat;
	text-decoration: none!important;
}

#app {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

#app:before {
	width: 100%;
	height: 100%;
	position: absolute;
	content: '';
	display: block;
	background: url(../img/bg-1.png) center no-repeat;
	/*animation: bgmove 6s infinite*/
}

@keyframes bgmove {
	0% {
		transform: translateX(0px)
	}
	25% {
		transform: translateX(80px)
	}
	50% {
		transform: translateX(0px)
	}
	75% {
		transform: translateX(-80px)
	}
	100% {
		transform: translateX(0px)
	}
}

#kf {
	position: fixed;
	width: 180px;
	height: 113px;
	right: 18px
}
#kf-two {
	position: fixed;
	width: 103px;
	height: 103px;
	right: 60px;
	bottom: 90px;
}
@media screen and (max-width: 750px) {
	.main {
		width: 90%;
	}
	.header {
		height: 22vw;
	}
	.logo_left {
		width: 39vw;
		height: 11.4vw;
		margin: 0 auto;
	}
	.center {
		padding: 4vw 2.6vw;
		height: 44vw;
		background: url(../img/center-bg-m.png) no-repeat;
		background-size: 100% 40vw;
	}
	.center p, .center h3 {
		font-size: 3.2vw;
		line-height: 5vw;
		padding-left: 0;
	}
	.center h3 {
		font-size: 3.4vw;
		margin-bottom: 2vw;
	}
	.addBtn {
		margin-top: 3vw;
		width: 25vw;
		height: 7.5vw;
		background-size: 100%;
	}
	#app:before {
		background: url(../img/bg-1-m.png) center no-repeat;
		background-size: 100%;
	}
	
#kf {
	width: 24vw;
	height: 15.7vw;
	right: 3vw
}
#kf-two {
	width: 14vw;
	height: 14vw;
	right: 8vw;
	bottom: 12vw;
}
}