* { margin: 0px; padding: 0px; }
body {
	font-family: "微软雅黑"; 
}
div.screen{
	width:320px;
	height:560px;	
	overflow:hidden;
	position:absolute; 
	top:180px; 
	left:50%;
  margin-left:-160px;
	background:#31558a;
}

.list{margin-top:36px; text-align:left;}
.item{
	height:115px;.menu-splitR li:nth-of-type(3)
	margin-top:30px 0;
	padding-left:115px;
	clear:both;
}
.item .img, .item span{background:#214273; border-radius:3px;}
.item .img{float:left; width:71px; height:71px; margin-left:-93px;}
.item span{height:11px; width:180px; margin-bottom:19px; float:left;}
.item span:nth-of-type(3){width:75px; margin-botom:0;}

div.burger { height: 0.9rem;
width: 0.9rem;
position: absolute;
top: 0.2rem;
right: 0.3rem;
cursor: pointer;
}
	div.x,
	div.y,
	div.z {
		position: absolute; margin: auto;
		top: 0.2rem;
left: 0.17rem;
		background: #333333;
		border-radius:2px;
		-webkit-transition: all 200ms ease-out;
		   -moz-transition: all 200ms ease-out;
		    -ms-transition: all 200ms ease-out;
		     -o-transition: all 200ms ease-out;
		        transition: all 200ms ease-out;
	}		
	div.x, div.y, div.z {height: 0.045rem;
width: 0.52rem;}
	div.y{top: 0.4rem;}
	div.z{top: 0.6rem;}
	div.collapse{
		top:0.4rem;
		-webkit-transition: all 70ms ease-out;
		   -moz-transition: all 70ms ease-out;
		    -ms-transition: all 70ms ease-out;
		     -o-transition: all 70ms ease-out;
		        transition: all 70ms ease-out;
	}
	 
	
	div.rotate30{
		-ms-transform: rotate(30deg); 
    	-webkit-transform: rotate(30deg); 
	    transform: rotate(30deg);	
		-webkit-transition: all 50ms ease-out;
		   -moz-transition: all 50ms ease-out;
		    -ms-transition: all 50ms ease-out;
		     -o-transition: all 50ms ease-out;
		        transition: all 50ms ease-out;					
	}
	div.rotate150{
		-ms-transform: rotate(150deg); 
    	-webkit-transform: rotate(150deg); 
	    transform: rotate(150deg);	
		-webkit-transition: all 50ms ease-out;
		   -moz-transition: all 50ms ease-out;
		    -ms-transition: all 50ms ease-out;
		     -o-transition: all 50ms ease-out;
		        transition: all 50ms ease-out;					
	}
	
	div.rotate45{
		-ms-transform: rotate(45deg); 
    	-webkit-transform: rotate(45deg); 
	    transform: rotate(45deg);	
		-webkit-transition: all 100ms ease-out;
		   -moz-transition: all 100ms ease-out;
		    -ms-transition: all 100ms ease-out;
		     -o-transition: all 100ms ease-out;
		        transition: all 100ms ease-out;					
	}
	div.rotate135{
		-ms-transform: rotate(135deg); 
    	-webkit-transform: rotate(135deg); 
	    transform: rotate(135deg);	
		-webkit-transition: all 100ms ease-out;
		   -moz-transition: all 100ms ease-out;
		    -ms-transition: all 100ms ease-out;
		     -o-transition: all 100ms ease-out;
		        transition: all 100ms ease-out;					
	}

div.navbar{height:73px;background:#385e97;}

div.menu-bg{	
	
	width: 320px;
	height: 568px; 
	position:absolute;	
  top:0;
  left:0;
	background:#40435b;
	opacity:0;
	-webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);	
}
div.menu-bg.animate{
	opacity:0.9;
	-webkit-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);					
	
}
div.menu {
	width: 100%;    
}
.menu-splitL, .menu-splitR{display: none;overflow: hidden; position: fixed; top:1.28rem; width: 100%; max-width: 750px; background:rgba(248, 248, 248, 1); margin: 0 auto; left: 0; right: 0;    height: 60vh;z-index: 999;
}
.menu-splitR{left:160px;background:#F8F8F8;}
.menu-splitL li{    text-align: left !important;
    padding-left: 0.2rem;
    font-size: 0.38rem !important;
    border-bottom: 1px solid #E5E5E5;
    height: 0.7rem;}
div.menu ul li {
	list-style: none;
	width:100%;
	margin-top:0.1rem;
	margin-bottom:0.1rem;
	text-align:center;
	font-size:19px;
	-webkit-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
div.menu ul li a {
	color:#333333;    display: block;
	text-transform:uppercase;
	text-decoration:none;	
	letter-spacing:3px;	
}

section > div {
    transition: transform 1s;
    transform: translateX(0px);
}

div.menu li.animate{
	font-size:19px;
	opacity:1;
	-webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}

.menu-splitL li:nth-of-type(1){	margin-left:7rem;transition-delay: 0.12s;}
.menu-splitL li.animate:nth-of-type(1){	margin-left:0;	transition-delay: 0.0s;	}

.menu-splitL li:nth-of-type(2){	margin-left:7rem;	transition-delay: 0.09s;}
.menu-splitL li.animate:nth-of-type(2){	margin-left:0;	transition-delay: 0.05s;}

.menu-splitL li:nth-of-type(3){	margin-left:7rem;	transition-delay: 0.046s;}
.menu-splitL li.animate:nth-of-type(3){	margin-left:0;	transition-delay: 0.1s;}

.menu-splitL li:nth-of-type(4){	margin-left:7rem;transition-delay: 0.03s;}
.menu-splitL li.animate:nth-of-type(4){	margin-left:0;	transition-delay: 0.15s;}

.menu-splitL li:nth-of-type(5){	margin-left:7rem;	transition-delay: 0.0s;	}
.menu-splitL li.animate:nth-of-type(5){	margin-left:0;	transition-delay: 0.2s;	}



.menu-splitR li:nth-of-type(1){	margin-left:-201px;transition-delay: 0.12s;}
.menu-splitR li.animate:nth-of-type(1){	margin-left:-160px;	transition-delay: 0.0s;	}

.menu-splitR li:nth-of-type(2){	margin-left:-203px;	transition-delay: 0.069s;}
.menu-splitR li.animate:nth-of-type(2){	margin-left:-160px;	transition-delay: 0.05s;}

.menu-splitR li:nth-of-type(3){	margin-left:-214px;	transition-delay: 0.06s;}
.menu-splitR li.animate:nth-of-type(3){	margin-left:-160px;	transition-delay: 0.1s;}

.menu-splitR li:nth-of-type(4){	margin-left:-217px;transition-delay: 0.03s;}
.menu-splitR li.animate:nth-of-type(4){	margin-left:-160px;	transition-delay: 0.15s;}

.menu-splitR li:nth-of-type(5){	margin-left:-217px;	transition-delay: 0.0s;	}
.menu-splitR li.animate:nth-of-type(5){	margin-left:-160px;	transition-delay: 0.2s;	}