@font-face {
	font-family: 'xiaozi';
	src: url('../font/zixiao.ttf') format('opentype');
}
html,body{
	width:100%;
	height:100%;
	overflow:hidden;
}
.main-container{
	transition: transform 0.4s;
}
.main-container.active {
    transform: translateY(var(--footer-height));
}
.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;
}

.isLogin {
	height:.52rem;
	position:absolute;
	right:0;
	top:0;
	display:flex;
	display:-webkit-flex;
	align-items:center;
}
.isLogin .before_denglu{
	display:none;
	width:.23rem;
	height:.24rem;
	margin-right:.76rem;
	cursor:pointer;
}
.isLogin .before_denglu.active{
	display:block;
}
.isLogin .after_denglu{
	display:none;
	font-size:.16rem;
	font-family:'xiaozi';
	color:#fff;
	line-height:.52rem;
	margin-right:.2rem;
}
.isLogin .after_denglu.active{
	display:block;
}
.isLogin .after_denglu .logout{
	margin-left:.05rem;
	cursor:pointer;
	color:#ff6a13;
}
:root{
	--footer-height:-2.1rem;
}
.footer.active{
	transform: translateY(var(--footer-height));
}
.footer{
	width:100%;
	height:2.1rem;
	background:#0e0e0e;
	overflow:hidden;
	transition:all .4s;
	-webkit-transition:all .4s;
}
.footer p{
	font-size:.14rem;
	color:#bebebe;
	text-align:center;
	line-height:.34rem;
}
.footer p:nth-child(1){
	margin:.4rem auto .16rem;
}
.footer p a{
	color:#bebebe;
	text-decoration:none;
}