@font-face {
	font-family: 'xiaozi';
	src: url('../font/zixiao.ttf') format('opentype');
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100vw;
  height: 1.27rem;
  background: url(../images/header-bg.png) no-repeat;
  background-size: cover;
}

.header .nav {
  width: 100%;
  height: 2.6042vw;
  display: flex;
  align-items: center;
  padding-left: 8.6458vw;
}
.header .nav:after{
	display:block;
	content:'';
	width:3.65rem;
	height:.65rem;
	background:url(../images/cen.png) no-repeat center;
	background-size:cover;
	position:absolute;
	left:50%;
	margin-left:-1.825rem;
	top:0;
	z-index:2;
	pointer-events: none;
}
.header .nav li {
  flex-grow: 0;
  width: 10.4166vw;
  height: 2.6042vw;
  text-align: center;
  line-height: 2.6042vw;
  color: #999999;
  font-size: 14px;
  cursor: pointer;
  font-family: 'xiaozi';
  margin-left:-.22rem;
}
.header .nav li.active {
  background: url(../images/nav-active-bg1.png) no-repeat;
  background-size: cover;
  color: #ffffff;
}
.header .nav li:hover{
	background: url(../images/nav-active-bg1.png) no-repeat;
	background-size: cover;
	color: #ffffff;
}
.header .nav li:nth-child(5).active,.header .nav li:nth-child(6).active  {
  background: url(../images/nav-active-bg.png) no-repeat;
  background-size: cover;
}
.header .nav li:nth-child(5):hover,.header .nav li:nth-child(6):hover,.header .nav li:nth-child(7):hover,.header .nav li:nth-child(8):hover{
	background: url(../images/nav-active-bg.png) no-repeat;
	background-size: cover;
}

.header .nav li:nth-child(4) {
  margin-right: 9vw;
}

.header .nav li a {
  color: inherit;
  text-decoration: none;
}