@charset "utf-8";
html{
	height: auto;
}
body{
}

.side{
	display: none;
}

#menu{
	position: fixed;
	top: 50%;
	margin-top: -60px;
	right: 15px;
	z-index: 9;
}
#menu b{
	position: absolute;
	display: block;
	height: 160px;
	top: 10px;
	right: 9px;
	border-right: 2px solid #ffd8eb;
}
#menu li{
	list-style-type: none;
	margin:10px 0;
	padding: 0;
	background: none;
}
#menu li a{
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	display: block;
	position: relative;
	text-indent: 1000em;
	background: #755955;
	border: 2px solid #ffd8eb;
	border-radius: 20px;
}
#menu li.active a{
	text-indent: -5em;
	position: relative;
	background: #ffd8eb;
}
#menu li a span{
	width: 300px;
	left: -310px;
	position: absolute;
	top: -4px;
	color: #ffd8eb;
	text-align: right;
}
#menu li a span i{
	padding: 0 3px;
	font-style: normal;
}

.section { 
	overflow:hidden;
	position: relative;
	margin: 0 auto;
	padding-top: 160px;
	background: url(../img/bg.jpg) no-repeat center;
	background-size: cover;
}
#main{
	overflow: hidden;
	padding-bottom: 50px;
}

.pageTitle{
	padding: 10px 0px;
}
.pageTitle h2{
	font-size: 30px;
	font-weight: normal;
}
.pageTitle span{
	display: block;
	margin: 15px 0 20px 0;
	width: 60px;
	height: 4px;
	background: #ffffff;
	opacity: 0.6;
}

.mainBox{
	position: relative;
	height: calc(100% - 160px);
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	color: #ffffff;
	font-size: 16px;
}
.section1 {
	text-align: center;
	font-size: 16px;
}
.section1 video{
	width: 800px;
	margin-top: 30px;
}
.section1 .mainBox{
	flex-direction: column;
}
.mainBox .pic{
	margin:  0 20px;
}
.mainBox .content{
	display: flex;
}

.faq-con{
	margin: 0 auto;
	width: 1200px;
	display: flex;
	color: #ffffff;
	font-size: 16px;
	flex-direction: column;
}
.mainBox .pic{
	margin:  0 20px;
}
.mainBox .content{
	display: flex;
}


#footer{
	position: absolute;
	bottom: 0;
}



@media screen and (max-width: 768px) {
	body{
		background: url(../img/bg.jpg) no-repeat center;
		background-attachment: fixed;
	}
	
	.side{
		display: block;
	}	
	#menu{
		display: none;
	}	
	.section { 
		overflow:hidden;
		position: relative;
		margin: 0 auto;
		padding: 60px 15px 15px 15px;
		background: none;
		background-size: cover;
	}
	#main{
		overflow: hidden;
		padding-bottom: 0px;
	}
	
	.pageTitle{
		padding: 10px 0px;
	}
	.pageTitle h2{
		font-size: 30px;
		font-weight: normal;
	}
	.pageTitle span{
		display: block;
		margin: 15px 0 20px 0;
		width: 60px;
		height: 4px;
		background: #ffffff;
		opacity: 0.6;
	}
	
	.mainBox{
		position: relative;
		height: calc(100% - 160px);
		display: block;
		justify-content: center;
		align-items: center;
		align-content: center;
		color: #ffffff;
		font-size: 16px;
	}
	.section1 {
		text-align: center;
		font-size: 16px;
	}
	.section1 video{
		width: 98%;
		margin-top: 20px;
	}
	.section1 .mainBox{
		flex-direction: column;
	}
	.section2,.section3,.section4,.section5,.section6{padding-top: 20px;
		background: none;}
	.mainBox .pic img{
		width: 100%;
	}
	.mainBox .content{
		display: flex;
	}
	
	.faq-con{
		margin: 0 auto;
		width: 1200px;
		display: flex;
		color: #ffffff;
		font-size: 16px;
		flex-direction: column;
	}
	.mainBox .pic{
		margin:  10px 0px;
	}
	.mainBox .content{
		display: block;
	}
	#footer{
		position: relative;
		bottom: 0;
		left: 0px;
		width: 100%;
	}	
}