@CHARSET "UTF-8";
body,html{
	width:100%;
	height:100%;
	overflow:hidden;
}
body{
	padding:0;
	margin:0;

}
.main{
	text-align:center;
	overflow-x:hidden;
}

.page{
	width:640px;
	height:960px;
	background:#f89820;
	color:#f8f3b9;	
	text-align:center;
	position:relative;
	margin:0 auto;
	overflow:hidden;
	display:none;
}
/* page home */
.page-home{
	display:block;
} 
.head{
   height:1.6rem;
   padding-top:1.5rem;
}
.head img{
	height:100%;	 
}
.btn-wrap{
	width:100%;
	position:absolute;
	bottom: 2.6rem;
}				
.btn{
  color: #f89820;
  background: #f8f3b9;
  border-radius: 1.5rem;
  width: 6rem;
  padding: 0.3rem 0.5rem;
  margin: 0px 10px;
  font-size: 1rem;
  text-align: center;
  display: inline-block;	
}
.camera-icon{
	width: 1rem;
	vertical-align: middle;
}
.btn-tip{
	vertical-align: middle;
}
.face-box,.face-wrap{
	margin-top:1rem;
	position:relative;
	width:12rem;
	height:14rem;
    max-height: 12rem;
    max-width: 14rem;
	margin: 1rem auto;	
	
}
.face-wrap{
	margin: 0 auto;
}
.img-default{
	margin-top:6%;
	height:70%;
}
.induction,.load-tip{
	color:#f8f3b9;
	font-size:0.5rem;
	margin-top:0.5rem;
}
.wxup-tip{
  font-size: 0.5rem;
  margin-top: 0.5rem;
  color: #f12;
  text-decoration: underline;
}
/* page loading */
.page-loading{
	display:none;
}
.img-loading{
	width:3rem;
	margin-top:35%;
}
.load-tip{
	font-size:0.8rem;
}

/* page fail*/
.page-fail{
	display:none;
}
.img-fail{
	height:6rem;
	margin-top:4rem;
}
.fail-tip{
	font-size:0.8rem;
	margin-top:0.5rem;
}

/* page sucess */
.page-sucess{
	display:none;
}
.sucess-head{
	text-align: left;
	height: 2rem;
}
.sucess-head img{
	margin: 0.5rem; 
	height: 1.3rem;
} 
.sucess-tip{
	font-size:0.7rem;
}
.extend-mask{
	width:100%;
	height:1rem;
	position:absolute;
	bottom:0;
	left:0;
	background:#f89820;
	z-index:1000;
	display:none; 
}

.upload-tip{
	color:#f8f3b9;
	font-size:0.8rem; 
}
.arrow{ 
	width:1rem;
}
.cemera{	
	margin-top:0.5rem;
}
.cemera img{
	height:3rem;
}
.loading{
  width: 100%;
  position: absolute;
  top: 9rem;
  color:#f8f3b9;
  display:none;
  font-size:0.7rem;
}
.loading img{
	height:3.2rem;
}
.load-tip{
	margin-top:10px;
}

#re-upload-tip{
  color:#f8f3b9;
  display:none;
  font-size:0.8rem;
}

.animitrote{
	-webkit-animation: rote 2s ease infinite;
}
@-webkit-keyframes rote{
    0%{
    	-webkit-transform: rotate(0reg);
    }
    100%{
    	-webkit-transform:rotate(360deg);  
    }
}
/* media query */



@media (min-height: 568px){
    .face-box{
  		width: 13rem;
		height: 16rem;
        max-height: 16rem;
        max-width: 13rem;		
		margin: 2rem auto 0;
    }
	.face-wrap{
  		width: 13rem;
		height: 16rem;
        max-height: 16rem;
        max-width: 13rem;	 		
		margin: 0 auto;
	}	
}
/* media query */
@media (max-height: 567px) and (max-width: 360px) {
    .face-box{
  		width: 12rem;
		height: 15rem;
        max-height: 15rem;
        max-width: 12rem;		
		margin: 2rem auto 0;
    }
	.face-wrap{
  		width: 12rem;
		height: 15rem;
        max-height: 15rem;
        max-width: 12rem;	 		
		margin: 0 auto;
	}	
}
@media (max-height: 470px){ 
    .face-box{
  		width: 11rem;
		height: 13rem;
        max-height: 13rem;
        max-width: 11rem;		
		margin: 0.5rem auto 0;
    }
	.face-wrap{
  		width: 11rem;
		height: 13rem;
        max-height: 13rem;
        max-width: 11rem;	 		
		margin: 0 auto;
	}	
}	
.upload-tip{
	display:none;
}


.page-input{
  background: #000;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display:none;
}
.float-input{
	width: 100%;
	height: 100%;
	display: table;
}
.input-wrap{
	display: table-cell;
	vertical-align: middle;
}
input{
  height: 1.2rem;
  max-width: 90px;
  margin-left: 10px;
  border-radius: 5px;
  border: none;
  outline: none;
  text-align: center;
}

.input-lable,.age{
	font-size: 18px;
}
.input-group{
	margin: 10px auto;
}
.age-btn-wrap{
	
	width: 90%;
	margin: 0 auto;
	margin-top: 30px;
}
.age-btn{
	width: 50%;
	/*float: left;*/
    margin: 0 auto;
    background: #F89820;
    border-radius:15px ;
    color: #f8f3b9 ;
      padding: 5px 0;
}
.age-btn span{
   border: solid 1px #fff;
   padding: 5px 10px;
   border-radius: 5px;
   background: #F89820;
}

.niling-wrap{
	background: #f8f3b9 ;
	color: #f89820;
	width: 90%;
	margin: 0 auto;
	border-radius:15px ;
	padding: 20px 0 ;
	padding-top: 30px;
	position: relative;
	margin-top: -100px;
}

.out-face-box{
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
}
.img-out-loading{
	margin-left: 40%;
}

#age-cancel{
	position: absolute;
	top: 5px;
	right: 5px;
	width: 25px;
}
.sucess-btn{
	width: 50%;
	display: inline-block;
	float: left;
}