* {
	padding: 0;
	margin: 0;
}
body {
	font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Serif;
}

.container {
	width: 1200px;
	margin: auto;
}
.header {
	overflow: hidden;
	padding: 10px;
	border-bottom: 4px solid #06447e;
}

.logo {
	float: right;
	bottom: 0;
}

.logo img {
	width: 256px;
	margin-top: 16px;
}

.title {
	color: #06447e;
	font-size: 48px;
}

.main {
	padding: 7% 4%;
	overflow: hidden;
}

.left {
	width: 50%;
	float: left;
	margin-top: 12px;
}

.right {
	overflow: hidden;
	font-size: 20px;
	padding-left: 36px;
}

.icon,
.qrs {
	float: left;
}

ul {
	margin-top: 42px;
	list-style: none;
}

li {
	margin-bottom: 29px;
}

.left img {
	padding: 0 12px;
	width: 155px;
}
.icon img {
	width: 112px;
}
.icon {
	margin: 22px 4px 0;
}

.pack {
	overflow: hidden;
	margin-bottom: 30px;
}
.qrs img {
	cursor: pointer;
}

@media screen and (max-width: 1028px) {
	.container {
		width: 100%;
	}
	.main {
		padding: 1%;
	}
	.pack {
		margin-bottom: 1rem;
	}
	.logo {
		float: none;
		bottom: 0;
		text-align: center;
	}
	.title {
		text-align: center;
		font-size: 2rem;
	}
	.left {
		float: none;
		text-align: center;
	}
	.left img {
		width: 8rem;
	}
	.icon img {
		width: 6rem;
	}
	.left,
	.right {
		width: 100%;
	}
	.icon,
	.qrs {
		float: none;
	}
	.icon {
		margin-bottom: 1rem;
	}
	.right {
		padding: 0 5%;
		font-size: 1rem;
	}
	ul {
		margin-top: 1.5rem;
	}
	li {
		margin-bottom: 1rem;
	}
	ul a {
		font-size: 1rem;
		overflow: hidden;
		display: block;
		width: 90%;
		text-overflow: ellipsis;
	}
}
