﻿html,
body,
* {
	margin: 0;
	list-style: none;
	box-sizing: border-box;
	font-family: "Microsoft YaHei";
}
img,
input,
button{
	border:0;
}
a:link,
a:visited {
	text-decoration: none;
}

header {
	width: 100%;
	background: #05358e;
	height: 120px;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99;
}

header>.header {
	width: 1170px;
	margin: 0 auto;
}

header>.header>.logo {
	width: 220px;
	height: 120px;
	float: left;
}

header>.header>.logo>img {
	width: 86%;
	height: 100%;
}

.nav {
	width: 755px;
	height: 100px;
	float: left;
}
.nav>img{
	display: none;
}
.nav>ul {
	height: 100%;
	width: 100%;
}

.nav>ul>li {
	display: block;
	padding: 0 18px;
	width: 110px;
	height: 100%;
	text-align: center;
	float: left;
}

.nav>ul>li:nth-child(1) {
	width: 95px;
}

.nav>ul>li:hover {

	background-color: rgba(6,110,205,.2);
}

.nav>ul>li:hover>a {
	border-bottom: 4px solid #ed741b;
}

.nav>ul>li a {
	color: #fff;
	display: block;
	width: 101%;
	height: 100%;
	line-height: 120px;
	font-size: 18px;
	text-decoration: none;
}

.nav>ul>li ul {
	display: none;
}

.nav>ul>li:hover>a+ul {
	/*鼠标划过一级菜单的时候二级菜单显示*/
	display: block;
}

.nav>ul>li>ul {
	width: 320px;
	height: auto;
	background: #fff;
	border-radius: 3px;
	position: relative;
	top: 0px;
	left: -18px;
	z-index: 999;
}

.nav>ul>li>ul>li,
.nav>ul>li>ul>li>ul>li,
.nav>ul>li>ul>li>ul>li>ul>li {
	display: block;
	width: 320px;
	height: 60px;
	padding: 0 10px;
	text-align: center;
}

.nav>ul>li>ul>li>a,
.nav>ul>li>ul>li>ul>li>a,
.nav>ul>li>ul>li>ul>li>ul>li>a {
	width: 300px;
	line-height: 60px;
	color: #333;
	border-bottom: 1px solid #eee;
}

.nav>ul>li:nth-child(2)>ul {
	width: 120px;
}
.nav>ul>li:nth-child(2)>ul>li {
	width: 120px;
}
.nav>ul>li:nth-child(2)>ul>li>a {
	width: 100px;
}

.nav>ul>li>ul>li:last-child>a,
.nav>ul>li>ul>li>ul>li:last-child>a {
	border: 0px;
}

.nav>ul>li>ul>li:hover>a,
.nav>ul>li>ul>li>ul>li:hover>a,
.nav>ul>li>ul>li>ul>li>ul>li:hover>a {
	/*与用户的交互不能少*/
	color: #0d78d8;
}

.nav>ul>li>ul>li:hover>a+ul {
	/*鼠标划过二级菜单的时候对应的三级菜单显示*/
	display: block;
}

.nav>ul>li>ul>li>ul {
	background: #fff;
	width: 260px;
	height: auto;
	border: 1px solid #eee;
	border-radius: 3px;
	position: relative;
	top: -60px;
	left: 110%;
	z-index: 999;
}

.nav>ul>li>ul>li>ul>li:hover ul {
	display: block;
}

.nav>ul>li>ul>li>ul>li>ul {
	background: #fff;
	width: 260px;
	height: auto;
	border: 1px solid #eee;
	border-radius: 3px;
	position: relative;
	top: -60px;
	left: 108%;
	z-index: 99;
}

.header>ol {
	width: 195px;
	float: left;
	height: 120px;
	padding-top: 40px;
	display: flex;
}

.header>ol>li {
	flex: 1;
	height: 40px;
	position: relative;
}

.header>ol>li>div {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	float: right;
	background: #ec2b2e;
	text-align: center;
	padding-top: 9px;
	cursor: pointer;
}
.header>ol>li>p{
	display: none;
	width:120px;
	height:120px;
	position: absolute;
	top:50px;
	left: 0px;
}
.header>ol>li>p>img{
	float: left;
}
.header>ol>li>div:hover +p{
	display: block;
}
.header>ol>li:nth-child(3)>div {
	background: #01bb02;
}

.header>ol>li:nth-child(1)>img {
	display: block;
	margin-top: 5px;
	margin-left: 15px;
	cursor: pointer;
}

#search {
	width: 320px;
	height: 42px;
	border: 1px solid #ee741b;
	position: absolute;
	top: 98px;
	right: 350px;
	border-radius: 5px;
	padding-left: 20px;
	line-height: 42px;
	color: #333;
	font-size: 16px;
	outline: none;
	display: none;
	z-index: 99;
}

#search::-webkit-input-placeholder {
	color: #333
}

#search::-ms-input-placeholder {
	color: #333
}

.activee {
	border-bottom: 4px solid #ed741b;
}
.active-color:link,.active-color:visited{
	color:#0d78d8
}
footer {
	width: 100%;
	height: 300px;
	background: #333;
	position: relative;
	z-index: 2;
}

.footer {
	/*width: 1170px;
	height: 240px;
	margin: 0 auto;*/
}

.footer>ul {
	width: 600px;
	float: left;
	padding-top: 42px;
}

.footer>ul>li {
	float: left;
	width: 118px;
}

.footer>ul>li>a:link,
.footer>ul>li>a:visited {
	color: #fff;
	font-size: 16px;
}

.footer>ol {
	padding-top: 42px;
	float: right;
	width: 570px;
}

.footer>ol>li {
	float: right;
	width: 160px;
	text-align: center;
}

.footer>ol>li:nth-child(2) {
	margin-right: 60px;
}

.footer>ol>li>p {
	width:auto;
	height: 60px;
	line-height: 60px;
	color: #fff;
	text-align: center;
	font-size: 16px;
}

footer>p {
	width: 100%;
	height: 60px;
	color: #fff;
	text-align: center;
	border-top: 1px solid #fff;
	line-height: 60px;
	font-size: 14px;
}
.banner{
	width:100%;
	margin-top:120px;
	height:500px;
	position: relative;
}
.banner>img{
	display: block;
	width:100%;
	height:500px;
}
.banner>h3{
	width:100%;
	height:100px;
	color:#fff;
	font-size:60px;
	text-align: center;
	position: absolute;
	top:150px;
	font-weight: normal;
}
.banner>p{
	height:75px;
	width:658px;
	text-align: center;
	padding:0 25px;
	background:rgba(0,0,0,.4);
	border-radius:5px;
	position: absolute;
	top:255px;
	font-size:38px;
	line-height:75px;
	color:#fff;
	left: calc(50% - 340px);
}
.caption{
	width:100%;
	height:60px;
	border-bottom: 1px solid #eaeaea;
}
.caption>p{
	width:1170px;
	margin:0 auto;
	height:60px;
	line-height:60px;
	color:#999;
	font-size:16px;
	text-align: left;
}
.caption>p>span{
	color:#3082d8;
}
.noborder{
	border: 0;
}
aside{
	width:48px;
	height:auto;
	position: fixed;
	right: 20px;
	bottom:50px;
	z-index: 99;
}
aside>div{
	width:48px;
	height:48px;
	text-align: center;
	padding-top: 11.5px;
	background:#c3c3c3;
	margin-top:16px;
}
aside>div>a>img{
	display: block;
	width:25px;
	height:25px;
	margin: 0 auto;
}
aside>div:nth-child(3){
	margin-top:16px;
	background:#1077d6;
	cursor: pointer;
}
aside>div:nth-child(3)>img{
	width:25px;
	height:25px;
	display: block;
	margin:0 auto;
}

@media only screen and (min-width: 100px) and (max-width: 640px) {
	html{
		font-size:13.333vw;
	}
	*{
		margin: 0;
		padding:0;
		list-style: none;
	}
	img,
	input,
	button{
		border:0;
	}
	aside,canvas{
		display: none;
	}
	header{
		width:7.5rem;
		height:1rem;
		position: fixed;
		left: 0;
		top:0;
	}
	header>.header{
		width:100%;
		height:1rem;
		position: relative;
	}
	header>.header>.logo{
		width:3.2rem;
		height:1rem;
		margin: 0 auto;
		float: none;
	}
	header>.header>.logo>img{
		width:3.2rem;
		height:1rem;
		float: left;
	}
	header>.header>.nav{
		width:1rem;
		height:1rem;
		position: absolute;
		right:0;
		top:0;
	}
	header>.header>.nav>img{
		display: block;
		width:0.5rem;
		height:0.5rem;
		margin:0.25rem auto;
	}
	header>.header>.nav>ul{
		display: none;
		height:auto;
		width:1.5rem;
		position: absolute;
		right:0;
		background:#1077d6;
	}
	header>.header>.nav>ul>li{
		width:1.5rem;
		height:1rem;
		padding:0;
	}
	header>.header>.nav>ul>li>a{
		width:1.5rem;
		height:1rem;
		line-height:1rem;
		font-size:0.22rem;
	}
	header>.header>.nav>ul>li>a.activee{
		border: 0;
		color:#000;
		font-size:0.22rem;
	}
	header>.header>.nav>ul>li>ul{
		display: none;
		height:auto;
		width:2.5rem;
		position: absolute;
		left:-2.5rem;
		top:1rem;
		background:#1077d6;
	}
	header>.header>.nav>ul>li>ul>li{
		width:2.5rem;
		height:1rem;
		padding:0;
	}
	header>.header>.nav>ul>li>ul>li>a{
		color:#fff;
		width:2.5rem;
		height:1rem;
		line-height:1rem;
		font-size:0.22rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.activee{
		border: 0;
	}
    header>.header>ol{
		width:1rem;
		height:1rem;
		position: absolute;
		left: 0;
		top:0;
		padding: 0;
	}	
	header>.header>ol>li{
		display: none;
	}
	header>.header>ol>li:nth-child(1){
		display: block;
		width:100%;
		height:100%;
	}
	header>.header>ol>li:nth-child(1)>img{
		width:0.5rem;
		height:0.5rem;
		margin:0.25rem auto;
	}
	footer{
		width:7.5rem;
		height:0.6rem;
	}
	footer>.footer{
		display: none;
	}
	footer>p{
		width:100%;
		height:0.6rem;
		line-height:0.6rem;
		font-size:0.24rem;
	}
	.banner{
		width:7.5rem;
		height:5rem;
		margin-top:1rem;
	}
	.banner>img{
		width:7.5rem;
		height:5rem;
	}
	.banner>h3{
		width:7.5rem;
		height:1rem;
		top:1.5rem;
		text-align: center;
		font-size:0.46rem;
	}
	.banner>p{
		width:6.58rem;
		height:0.75rem;
		line-height:0.75rem;
		font-size:0.34rem;
		top:2.55rem;
		left: calc(50% - 3.28rem);
	}
	.caption{
		width:7.5rem;
		height:0.8rem;
		line-height:0.8rem;
	}
	.caption>p{
		width:7.5rem;
		font-size:0.26rem;
		height:0.8rem;
		line-height:0.8rem;
	}
	.pagination-container{
		width:100%;
		
	}
	.pagination{
		margin:0.2rem 0;
	}
	.pagination>li>a, .pagination>li>span{
		padding:0.06rem 0.12rem;
		border: 0.02rem solid #ddd;
		font-size:0.24rem;
	}
}