* 
{
	margin:0; 
	padding:0;
	border:0;
	list-style:none;
}

html,body {height: 100%; width:100%; font-size:62.5%; }
body 
{
	display : -webkit-box;
	display: -moz-box;
	display: -o-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -o-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	      
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
   		   
	font-size:1.4rem;	
}

header 
{
	-webkit-box-flex: 1 1 auto;
	-moz-box-flex: 1 1 auto;
	-o-box-flex: 1 1 auto;
	box-flex: 1 1 auto;
	-webkit-flex: 1 1 auto;
	-moz-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	-o-flex: 1 1 auto;
	flex: 1 1 auto;
	 
	height:4rem;
	line-height:4rem;
	min-height:4rem;
	max-height:4rem;
	
	color:#fff;
    border-bottom:1px solid #d4d4d8;
    background-color: #333;    
}

footer 
{
	-webkit-box-flex: 1 1 auto;
	-moz-box-flex: 1 1 auto;
	-o-box-flex: 1 1 auto;
	box-flex: 1 1 auto;
	-webkit-flex: 1 1 auto;
	-moz-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	-o-flex: 1 1 auto;
	flex: 1 1 auto;
	 
	height:4rem;
	line-height:4rem;
	min-height:4rem;
	max-height:4rem;
	
	background:#fff;
	border-top:1px solid #bfbfbf;    
}

section
{
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-o-box-flex: 1;
	box-flex: 1;
	-webkit-flex: 1;
	-moz-flex: 1;
	-ms-flex: 1;
	-o-flex: 1;
	flex: 1;
		
	overflow:auto;
	clear:both;
	-webkit-overflow-scrolling:touch;
}

.clear
{
	clear:both;
	display:none;
}

.modal
{	
	width: 100%;  
    height: 100%;         
    position:absolute;    
    background: rgba(0,0,0,.8); 
    z-index:100; 
    display: none;        
}

.modal .box
{
	width:20rem;
	height:6rem;	
	border:1px solid black;
	background: #eee;
	margin: auto;  
	position : absolute;  
	top: 0; left: 0; bottom: 0; right: 0;

	padding: 1rem;
	-moz-border-radius: 0.5rem;
	-webkit-border-radius: 0.5rem;
	border-radius: 0.5rem;
	-moz-box-shadow: 0 0 1rem rgba(0,0,0,.4);
	-webkit-box-shadow: 0 0 1rem rgba(0,0,0,.4);
	-box-shadow: 0 0 1rem rgba(0,0,0,.4);
}
            
.modal .box .title
{	
	height:2rem;	
	line-height:2rem;
	float:left;
	font-weight:bold;
	display:block;	
}

.modal .box .close
{	
	height:2rem;	
	line-height:2rem;
	float:right;
	font-weight:bold;
	color: #aaa;
	cursor: pointer;
	display:block;	
	font-size:1.8rem;
}

.modal .box .content
{
	clear:both;	
	text-align:center;
	line-height:1.8rem;	
}

.modal .box .content img
{
	float:left;
	margin:0.06rem;
	cursor: pointer;
}

.modal .box .content span
{
	float:left;
	width:4rem;
	margin:0.2rem;
	border:1px solid #808080;
	padding:0.2rem;
	color:#808080; 
	display:block;	
	border-radius:0.4rem;
	cursor: pointer;
	font-size:1.2rem;
	overflow:hidden;	
}
.modal .box .content span input
{
	display:block;
	float:left;
	margin-top:0.2rem;	  
}

.modal .box .content .clear
{
	font-weight:bold; 
	clear:both; 
	text-align:left; 
	display:block; 
	width:100%;
}