.mobile-inner-header-icon{
	color: #ffffff;
	height: 50px;
	font-size:25px;
	text-align: center;
	float:right;
	width: 50px;
	position: relative;
	-webkit-transition: background 0.5s;
	-moz-transition: background 0.5s;
	-o-transition: background 0.5s;
	transition: background 0.5s; z-index:99;
}
.mobile-inner-header-icon:hover{
	cursor: pointer;
}
.mobile-inner-header-icon span{
	position: absolute;
	left: calc((100% - 25px) / 2);
	top: calc((100% - 1px) / 2);
	width: 25px;
	height: 1px;
	background-color: rgba(255,255,255,1);
}
.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); }
}



.cai_list{ width:100%; height:90vh; background-color:rgba(0,0,0,0.8); display:none; padding-top:10vh; position:fixed; top:0; overflow:hidden;}
	
	/*mnav*/
	.mnav{  width:96%; height:auto; margin:auto; border-radius:10px; overflow:hidden;}
	.mnav li{ border-bottom:1px #f2f1f1 solid; padding:0px 2%; width:96%; list-style:none;-webkit-animation-duration: 0.5s;
			animation-duration: 0.5s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
			-webkit-animation-name: resize;
			animation-name: resize;}
	.mnav li a{ width:100%; display:block; color:#fff; font-size:14px; line-height:39px; height:39px; font-weight:bold;}
	
	
	.mnav li .mnav_warp{ display: block; width:100%; height:auto; overflow:hidden; padding-bottom:10px;}
	.mnav li .mnav_warp a{ float:left; display:block; width:25%;  line-height:24px; height:24px;font-weight: normal; font-size:13px;}
	

			
		@-webkit-keyframes resize {
		from, 60%, 75%, 90%, to {
		    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		}
		  0% {
			opacity: 0;
		    -webkit-transform: scale(1.2,1.2);
		    transform: scale(1.2,1.2);
		}
		  100% {
			opacity: 1;
		    -webkit-transform: scale(1,1);
		    transform: scale(1,1);
		} 
		}

		@keyframes resize {
		from, 60%, 75%, 90%, to {
		    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		}
		  0% {
			opacity: 0;
		    -webkit-transform: scale(1.2,1.2);
		    transform: scale(1.2,1.2);
		}
		  100% {
			opacity: 1;
		    -webkit-transform: scale(1,1);
		    transform: scale(1,1);
		}
		}
	
@media screen and (max-width:1271px)and (min-width:768px){
	.mobile-inner-header-icon{ margin-top:5px;}
	.mnav li a{ width:100%; display:block; color:#fff; font-size:16px; line-height:50px; height:50px; font-weight:bold;}
	
	.mnav li .mnav_warp{ display: block; width:100%; height:auto; overflow:hidden; padding-bottom:10px;}
	.mnav li .mnav_warp a{ float:left; display:block; width:25%;  line-height:30px; height:30px;font-weight: normal; font-size:14px;}
	

	
}