* {
	margin: 0px auto;
	padding: 0px;
}

ul {
	list-style: none;
}

body {
	overflow-x: hidden;
	position: relative;
}

#head {
	width: 100%;
	height: 965px;
	background: url(../img/model01.png) no-repeat;
	background-size: 100% 100%;
}

#nav {
	width: 100%;
	height: 120px;
	background-color: #0D4CDA;
	position: relative;
}

#featureList {
	width: 100%;
	height: 628px;
	padding-top: 61px;
}

#reservationService {
	width: 100%;
	height: 1021px;
}

.logo {
	height: 100%;
	margin-left: 15%;
	float: left;
}

.logoImg {
	margin-top: 21px;
	float: left;
}

.corporateName {
	font-family: DOUYU;
	float: left;
	margin-top: 51px;
	margin-left: 20px;
}

#navList {
	height: 100%;
	float: right;
}

#navList div {
	height: 45px;
	font-size: 24px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #FFFFFF;
	float: left;
	margin-right: 138px;
	margin-top: 54px;
}

#navList>div {
	cursor: pointer;
}

#contactInfo {
	position: absolute;
	width: 220px;
	margin: 14px 0 0 -3% !important;
	display: none;
}

#contactInfo li {
	display: inline-block;
	width: 100%;
	min-height: 48px;
	padding: 15px 0 0 15px;
	font-size: 16px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	background-color: #1352E1;
}

#contactInfo li:nth-child(even) {
	background-color: #0C4AD4;
}

#contactInfo li:last-child {
	padding-bottom: 15px;
}

#navList div:first-child:hover #contactInfo {
	height: 300px;
}

#title {
	float: left;
	width: 50%;
	margin: 5% 0 0 15%;
}

.download {
	text-decoration: none;
	color: #FFFFFF;
}

#titleContent {
	height: 121px;
	font-size: 56px;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #FFFFFF;
	margin: 4% 0 0 0;
}

#titleIntroduce {
	height: 111px;
	font-size: 24px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 44px;
	margin: 4% 0 0 0;
}

#titleButton {
	display: inline-block;
	width: 230px;
	height: 60px;
	background: #FFFFFF;
	border-radius: 30px;
	text-align: center;
	line-height: 60px;
	font-size: 24px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #0D4CDA;
	margin: 4% 0 0 0;
}
#circular{
	width: 150px;
	height: 150px;
	border: 25px solid #0D4CDA;
	opacity: 0.77;
	border-radius: 50%;
	position: absolute;
	right: 4%;
	top: 700px;
}
#main {
	margin-top: 15px;
}

#featureList ul {
	margin-left: 15%;
}

#featureList li {
	display: inline-block;
	float: left;
	padding-right: 50px;
	width: 26%;
	height: 100%;
}

.featureImg {
	text-align: center;
}

.featureTitle {
	font-size: 33px;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #354168;
	text-align: center;
	margin: 55px 0 0 0;
}

.featureContent {
	font-size: 24px;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #333333;
	margin-top: 64px;
}

#reservationService,
#onlineService,
#personalCenter {
	width: 100%;
	height: 990px;
}

#reservationService {
	background-image: url(../img/reservationServiceBackground.png);
	background-position: center center;
	background-size: cover;
}

#reservationImg,
#onlineServiceImg,
#personalCenterImg {
	float: left;
	margin: 185px 0 0 24%;
}

#reservationServiceInfo {
	float: left;
	margin-top: 364px;
}

#onlineServiceInfo {
	float: left;
	margin: 380px 0 0 18%;
}

#onlineServiceImg {
	margin-left: 12%;
}

#personalCenterInfo {
	float: left;
	margin-top: 360px;
}

#reservationServiceTitleBox,
#onlineServiceTitleBox,
#personalCenterTitleBox {
	width: 100%;
	height: 48px;
	line-height: 48px;
	margin-left: 40%;
}

#reservationServiceTitleBox img,
#onlineServiceTitleBox img,
#personalCenterTitleBox img {
	float: left;
}

#reservationServiceTitleBox div,
#onlineServiceTitleBox div,
#personalCenterTitleBox div {
	float: left;
	display: inline-block;
	height: 100%;
	line-height: 36px;
	margin: 0 35px 0 35px;
	font-size: 40px;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #333333;
}

#reservationServiceContent,
#onlineServiceContent,
#personalCenterContent {
	width: 408px;
	height: 120px;
	font-size: 24px;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #333333;
	line-height: 48px;
	margin: 100px 0 0 30%;
}

#onlineService,
#personalCenter{
	position: relative;
}

#pageDisplay {
	width: 100%;
	height: 1002px;
	text-align: center;
	margin-top: 40px;
}

#pageDisplay span {
	font-size: 44px;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #333333;
	line-height: 48px;
}

#pageDisplayImg {
	margin-top: 116px;
	object-fit: contain;
}

#leftCircular, #rightCircular{
	position: absolute;
}

#leftCircular{
	top: 600px;
}

 #rightCircular{
	top: 900px;
	right: 0px;
}

#foot {
	width: 100%;
	height: 835px;
	background: url(../img/background02.png) no-repeat;
	background-size: 100% 100%;
}

#footLeft,
#footRight {
	width: 50%;
	height: 100%;
	float: left;
}

.footLogo {
	height: 30%;
	margin: 154px 0 0 40%;
}

.footcorporateName {
	margin-top: 110px;
}

.downloadBtn {
	width: 305px;
	height: 80px;
	border: 1px solid #FFFFFF;
	border-radius: 4px;
	margin: 31px 0 0 40%;
	display: inline-block;
}

.downloadBtn div,
.downloadBtn img {
	float: left;
}

.downloadBtn div {
	height: 80px;
	line-height: 80px;
	display: inline-block;
	font-size: 28px;
	font-family: Source Han Sans CN;
	font-weight: 500;
	color: #FFFFFF;
}

.downloadBtn img {
	margin: 11px 23px 0 22px;
}

#footRight img {
	margin: 74px 0 0 20%;
}

#filing {
	position: absolute;
	bottom: 20px;
	left: 30%;
}

#filing span {
	font-size: 14px;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	color: #FFFFFF;
}

#filing img {
	position: relative;
	top: 3px;
}

@media screen and (max-width:1440px) {

	#reservationImg,
	#personalCenterImg {
		margin-left: 18%;
	}

	#filing {
		left: 20%;
	}

	.footLogo {
		margin: 154px 0 0 30%;
	}

	.downloadBtn {
		margin: 31px 0 0 30%;
	}

	#footRight img {
		margin: 74px 0 0 10%;
	}
	
	#head{
		height: 723px;
	}
	
	#title{
		margin-top: 2%;
	}
	
	#circular{
		top:535px;
	}
}

@media screen and (max-width:1400px) {
	#onlineServiceInfo {
		margin-left: 12%;
	}

	#onlineServiceImg {
		margin-left: 15%;
	}

	#filing {
		left: 20%;
	}
	
	#head{
		height: 703px;
	}
	
	#title{
		margin-top: 2%;
	}
	
	#circular{
		top:515px;
	}
}

@media screen and (max-width:1366px) {

	#reservationImg,
	#personalCenterImg {
		margin-left: 14%;
	}

	#onlineServiceInfo {
		margin-left: 5%;
	}

	#onlineServiceImg {
		margin-left: 18%;
	}

	.logo,
	#title {
		margin-left: 10%;
	}
	
	#circular{
		right: 3%;
	}
	
	#head{
		height: 686px;
	}
	
	#title{
		margin-top: 2%;
	}
}

@media screen and (max-width:1280px) {
	#head{
		height: 643px;
	}
	
	#title{
		margin-top: 1%;
	}
	
}