@charset "utf-8";
.mobile-inner{
	width:100%;
	position:relative;
	z-index:99;
}
.mobile-inner-header{
	background-color:#222;
	width:100%;
	height:50px;
	position:absolute;
	top:0px;
	left:0px;
}
.mobile-inner-header-icon{
	color:#ffffff;
	height:50px;
	font-size:25px;
	text-align:center;
	float:right;
	width:50px;
	position:relative;
	background:url(images/bg_2.png) center center no-repeat #fb3f52;
	background-size:30px 30px;
	-webkit-transition:background 0.5s;
	-moz-transition:background 0.5s;
	-o-transition:background 0.5s;
	transition:background 0.5s;
}
.mobile-inner-header-icon:hover{
	background-color:rgba(255,255,255,0.2);
	cursor:pointer;
}
.mobile-inner-header-icon span{
	display:none;
	position:absolute;
	left:calc((100% - 25px) / 2);
	top:calc((100% - 1px) / 2);
	width:25px;
	height:3px;
	background-color:#fff;
}
.mobile-inner-header-icon span:nth-child(1){
transform:translateY(4px) rotate(0deg);
}
.mobile-inner-header-icon span:nth-child(2){
transform:translateY(-4px) rotate(0deg);
	}
.mobile-inner-header-icon-click span:nth-child(1){
	animation-duration:0.5s;
	animation-fill-mode:both;
	animation-name:clickfirst;
	}		
.mobile-inner-header-icon-click span:nth-child(2){
	animation-duration:0.5s;
	animation-fill-mode:both;
	animation-name:clicksecond;
	}
@keyframes clickfirst {
  0% {
	  transform:translateY(4px) rotate(0deg);
	  
  }

  100% {
    transform:translateY(0) rotate(45deg);
  }
}	
@keyframes clicksecond {
  0% {
	  transform:translateY(-4px) rotate(0deg);
  }

  100% {
    transform:translateY(0) rotate(-45deg);
  }
}	

.mobile-inner-header-icon-out span:nth-child(1){
	animation-duration:0.5s;
	animation-fill-mode:both;
	animation-name:outfirst;
	}		
.mobile-inner-header-icon-out span:nth-child(2){
	animation-duration:0.5s;
	animation-fill-mode:both;
	animation-name:outsecond;
	}

@keyframes outfirst {
  0% {
    transform:translateY(0) rotate(-45deg);
  }

  100% {
    transform:translateY(-4px) rotate(0deg);
  }
}	



@keyframes outsecond {
  0% {
    transform:translateY(0) rotate(45deg);
  }

  100% {
    transform:translateY(4px) rotate(0deg);
  }
}
.mobile-inner-nav{
	background-color:#333;
	width:100%;
	position:absolute;
	top:50px;
	left:0px;
	display:none;
	font-family:'microsoft yahei';
	filter: alpha(opacity=90);
	-moz-opacity: 0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
}
.mobile-inner-nav a{
	float:left;
	height:50px;
	line-height:50px;
	overflow:hidden;
	text-decoration:none;
	width:50%;
	font-size:16px;
	text-indent:20px;
	color:#fff;
	border-bottom:solid 1px #5e5e5e;
	-webkit-transition:all 0.5s;
	-moz-transition:all 0.5s;
	-o-transition:all 0.5s;
	transition:all 0.5s;
	font-weight:300;
}
.mobile-inner-nav a:hover{
	color:#fff;
	border-bottom:solid 1px #474747;
	background:#000;
}
.mobile-inner-nav a{
		-webkit-animation-duration:0.5s;
		animation-duration:0.5s;
		-webkit-animation-fill-mode:both;
		animation-fill-mode:both;
		-webkit-animation-name:returnToNormal;
		animation-name:returnToNormal;
	}
			
	@-webkit-keyframes returnToNormal {
	  0% {
	    opacity:0;
	    -webkit-transform:translate3d(0, -100%, 0);
	            transform:translate3d(0, -100%, 0);
	  }

	  100% {
	    opacity:1;
	    -webkit-transform:none;
	            transform:none;
	  }
	}

	@keyframes returnToNormal {
	  0% {
	    opacity:0;
	    -webkit-transform:translate3d(0, -100%, 0);
	            transform:translate3d(0, -100%, 0);
	  }

	  100% {
	    opacity:1;
	    -webkit-transform:none;
	            transform:none;
	  }
	}