/*一级导航*/
.nav-main{ font-size: 16px;
	position: fixed;
	top: 0;
    left: -6rem;
	z-index: 100;
	height: 100%;
	width: 3rem;
	color: #333;
	background: #fff;transition: all 0.6s ease 0s;
}
.nav-main a{color: #333;}
.nav-box{
	position: relative;
	perspective: 200px;
	-webkit-perspective: 200px;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	height: 100%;
	z-index: 99;
}
.nav-box .nav{ height: 100vh;}
.nav-ul li a{
	display: block;
	width: 3rem;
	height: .8rem;
     line-height: .8rem;
	overflow: hidden;
	text-align: center;
	position: relative;
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
    
}
/* .nav-ul li a:before{
	content: '';
	position: absolute;
	left: -240px;
	top: 0px;
	width: 200px;
	height: 100%;
	background: #c5271d;
	z-index: 1;
	transform: skew(30deg, 0);
	-webkit-transform: skew(30deg, 0);
	-ms-transform: skew(30deg, 0);
	-moz-transform: skew(30deg, 0);
	-o-transform: skew(30deg, 0);
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
} */
.nav-ul li a:hover{background: #c5271d; color: #fff;}
/* .nav-ul li a:hover:before{left: -30px;}
.nav-ul li a:after{
	content: '';
	position: absolute;
	width: 100%;
	height: 30px;
	left: 0;
	top: 20px;
	z-index: 1;
} */
.nav-ul li a span{
	display: block;
	/* margin-top: 60px;
	perspective: ; */
	position: relative;
	z-index: 1;
}


.nav-slide{
	position: fixed;
	left: 3rem;
	top: 0;
	width: 1.8rem;
	height: 100%;
	background: #c5271d;
	transform: rotateY(120deg);
	-webkit-transform: rotateY(120deg);
	-moz-transform: rotateY(120deg);
	-o-transform: rotateY(120deg);
	-ms-transform: rotateY(120deg);
	z-index: 99;
	visibility: hidden;
	transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: all .5s;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition-timing-function: cubic-bezier(.08, .72, .71, .96);
	-webkit-transition-timing-function: cubic-bezier(.08, .72, .71, .96);
}
.nav-slide.hover{
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	z-index: 15;
	visibility: visible;
}

/*二级菜单*/
.nav-slide-o li a{
	line-height:.8rem;   
	display: block;
	  color: rgba(255, 255, 255, 0.4);
  text-align: center;
	overflow: hidden;
	 
	position: relative;
	transition: all .5s;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
}
.nav-slide-o li a:before{
	content: '';
	position: absolute;
	left: -230%;
	top: 0px;
	width: 200%;
	height: 100%;
	background: #c5271d;
	z-index: 1;
	transform: skew(30deg, 0);
	-webkit-transform: skew(30deg, 0);
	-moz-transform: skew(30deg, 0);
	-o-transform: skew(30deg, 0);
	-ms-transform: skew(30deg, 0);
	transition: all .5s;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
}
.nav-slide-o li a:hover{background: #c5271d;}
.nav-slide-o li a:hover:before{left: -60px;}
.nav-slide-o li a span{position: relative;z-index: 1;}
.nav-slide-o {display: none;}
.nav-slide-o li a:hover{ color: #fff;}
.navclose{ padding-top: 5vh; transition:all .5s; }
.tel { padding-bottom: 3vh ; text-align: center;}
.tel span{ font-size: .2rem;}
.navclose:hover img{ transform: rotate(180deg) scale(1.05);}