@charset "utf-8";
/* Normalize.css, START */
body,dl,dd,ul,ol,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:0;padding:0;}
a{text-decoration:none; }
html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none; }
body{line-height:1.5; font-size:16px;  }
img{border:0 none;width:auto;max-width:100%;vertical-align:top; height:auto;}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
font-size:0.2rem ;

}
.mui-input-range input[type='range']::-webkit-slider-thumb{  
     background-color: #59493F;
	   
} 
.share .mui-popup-text{
height:auto;
width:auto;

}


.share .mui-popup-text canvas{
margin:5px;
margin-top:50px;
}
a{
font-size:0.2rem ;
 color:#000;
}

a:hover{

 color:#333;
}

.selector{position:absolute;left:0.2rem;width:auto;height:auto;z-index:11;display:block;top:30%;

margin-top:-1.2rem;}
.selector li{width:auto;height:auto;margin:5px; display:block;}
.selector img{
width:0.65rem;
height:0.65rem;
min-width:40px;
min-height:40px;
max-height: 100%;

}
.selector #box6 span{

display:none;
position:absolute;
font-size:0.45rem;
color:#990000;
font-weight:bold;
border-radius: 0.65rem;
width:0.65rem;
height:0.65rem;
background-color:#FFFFFF
}


.mui-btn{
font-size:0.25rem;
	padding: 10px;

}
.dressing-room .mui-popover-bottom {
				height: 1.5rem;	
				width:2rem;
			}
#topPopover {
				
				width:1.2rem;
				height: 3.5rem;	
				background-color:#FFFFFF;
				}	
	#topPopover .mui-table-view{
	background-color:#FBFDFC;
	}	
	#topPopover .mui-table-view span{
	display:block;
	
	color:#666;
	margin-top:-5px;
	}	
	
	#bottomPopover {
				
				width:5.5rem;
				height:6.5rem;	
				
				}	
				#bottomPopover .tips{
				background-color:#FBFEF5;
				padding:5px;
font-size:0.25rem;
font-weight:bold;
color:#000;
				}		
				#middlePopover {
				
				width:1.2rem;
				height: 5.0rem;	
			
				
				}	
				#middlePopover img {
				min-width:0.6rem;
				min-height:0.6rem;
				margin:0px;
				padding:0px;
				
				}
				
.product span.mui-icon {
				font-size: 0.2rem;
		
			}
.product .vm {
				
	
			}		
			
#topPopover .title{
font-weight:bold;
color:#000000;
}	



.mui-slider{
z-index:99;
background-color:#FFFFFF;
height:100%;
display:none;
top:0;
position:absolute;
}

.mui-content-closeempty
{
position:fixed;
right:0px;
top:0px;
z-index:99;
}

.mui-content-zoomout
{
position:absolute;
left:50%;
bottom:80px;

z-index:99;
display:none;
}

 .mui-slider-group .mui-slider-item img{
  max-height: 90%;
  height: auto;
  border: none;
  width: auto;/* ie8 */
  max-height:90%;
}


			.mui-content-padded a {
				margin: 0px;
				width: 0.8rem;
				height: 0.8rem;
				 line-height:0.8rem;
				display: inline-block;
				text-align: center;
				background-color: #fff;
				border: 1px solid #ddd;
				border-radius: 0.8rem;
				background-clip: padding-box;
			}
			
	
.mui-content-padded a .mui-icon {
				
				font-size: 0.38rem;
			}
		.mui-content-paddeds a .mui-icon {
				
				font-size: 0.38rem;
			}	
		
			.mui-spinner,
			.mui-spinner-white {
				margin-top:0.15rem;
			}
			.active .mui-spinner-indicator {
				background: #007AFF;
			}
	
			
/* Normalize.css, END */

ul, ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
}


/**/
.clear {*zoom:1}
.clear:after {display: table; content: " "; clear: both;}


/* display */

.zoom{*zoom:1;}

/* position */

/* text-align */
.align-left {text-align: left !important;}
.align-center {text-align: center !important;}
.align-right {text-align: right !important;}
.align-justify{text-align:justify}




			   .picture-container {
			display:none;
        }	
		
		.myvideo{
		width: 100%;
				height: 100%;
				overflow:auto;
				z-index:99;
			position: absolute;
			top:0;
			display:none;
			background-color:#000;
		}
		.myvideo video{
		width: 100%;
				height: 100%;

		}
		.myvideo .down{
		position:absolute;
		z-index:99
		}
		.ailt{
			width: 100%;
				height: 100%;
				overflow:auto;
				z-index:99;
		
			top:0;
			
			
			
		}
		.ailt .mui-btn{
		width:90%;
		
		align:center;
		margin:auto;
		margin-top:0.3rem;
		}
		.ailt img{
		width:100%;
		height:auto;
		
		}
		.ailt .tips{
		
			margin-top:0.5rem;
			margin-bottom:0.5rem;
			font-weight:bold;
			font-size:0.26rem;
color:#FFFFFF;
			}
		.clipbg{
				width: 100%;
				height: 100%;
				overflow:auto;
				z-index:99;
			position: absolute;
			top:0;
			display:none;
			background-color:#330033;
						background-position:bottom right;
			background-size:cover;
			}
	  video ,canvas{
    position: absolute;
	left:0px;
	top:0px;

  }	


			 #video {
		 
transform: scale(1.0,1.0)rotateY(180deg);
			 -webkit-transform:scale(1,1.0)rotateY(180deg);
	filter:brightness(1.0);
	-webkit-filter:brightness(1.0);	
	
			}
	

			.clipbg .tips{
			margin-top:0.3rem;
			margin-bottom:2.0rem;
			font-weight:bold;
			font-size:0.26rem;
color:#FFFFFF;
			}

			
			.clipbg .video{	
		background-color:#33003;
position: relative;	
			margin:auto;
			
width:240px;
height:320px;
zoom:1;
transform: scale(1.5,1.5);
			 -webkit-transform:scale(1.5,1.5);
display:none;
			}
	.clipbg .cameragif{
			background-color:#000;
			padding:5px;
			position: relative;	
			border-radius:0.2rem; 
			width:3rem;
			height:auto;
			margin:auto;

			}
			.clipbg .cameragif img{
			width:100%;
			height:100%;
		
			}		
			
			.clipbg .txt{
			font-size:20px;
			
			background-color:#330066;
			border-radius:35px; 
			margin:auto;
			width:35px;
			heihgt:35px;
			line-height:35px;
			color:#ffffff;
			position: absolute;
margin-top:25px;
left:100px;
z-index:100;
			}
			.clipbg .video .mask{
			position:absolute;
			z-index:99;
width:100%;
height:100%;
			}	
			.clipbg .video .maskgif{
			position:absolute;
			z-index:90;
width:100%;
height:100%;
margin-top:0px;
			}
.clipbg .video .maskgif img{
width:100%;
height:100%;
}
			.clipbg .gallery{
				position: relative;
			font-size:0.26rem;
font-weight:bold;
color:#fff;
				z-index:100;
				margin-top:1.5rem;
			}
		


			.clipbg .camera{
				position: relative;
				
				z-index:100;
			}
			.clipbg .reload{
				position: relative;
				
				z-index:100;
			}
			
			.clipbg  #takePicture{
z-index:100;
position: relative;
display:none;
			}			
			
			
			.close{
			position:fixed;
			z-index:10;
			top:0.3rem;
			right:0.2rem;
			
			}
			
		
			.back{
			position:fixed;
			z-index:10;
			top:0.3rem;
			left:0.2rem;
			}

			.clipbg .gallery input{
				width: 100%;
				height: 100%;
				position: absolute;
				left:0;
				top:0;
				z-index: 11;
				filter:alpha(opacity=0);  
			  -moz-opacity:0;  
			  -khtml-opacity: 0;  
			  opacity: 0; 
			}
			.clipbg .camera input{
				width: 100%;
				height: 100%;
				position: absolute;
				left:0;
				top:0;
				z-index: 11;
				filter:alpha(opacity=0);  
			  -moz-opacity:0;  
			  -khtml-opacity: 0;  
			  opacity: 0; 
			}
			.sidebar .camera input{
				width: 100%;
				height: 100%;
				position: absolute;
				left:0;
				top:0;
				z-index: 11;
				filter:alpha(opacity=0);  
			  -moz-opacity:0;  
			  -khtml-opacity: 0;  
			  opacity: 0; 
			}


.wrapper{
		/*background-color:white;*/
		width:100%;
		/*opacity:0.5;*/
	}

.zoompage .mui-zoom-scroller img{
max-width: 100%;
  height: auto;
  width: auto;/* ie8 */
  -webkit-user-drag: none;
        }

.zoompage div.pinch-zoom {
     z-index:0;
	 margin: auto; 
	 width:auto;
	 max-width:100%;
}

.zoompage {
z-index:99;
 display:none;
 background-color:#FFFFFF; 
 position: absolute;
 width:100%;
 height:100%;
top:0;
overflow-y:auto;
}

.logo{
position:absolute;
z-index:10;
top:10px;
left:10px;

border-radius:0.1rem; 
width:0.6rem;
height:0.6rem;
padding:10px;
}
.logo img{
  width: 0.5rem;
  height: auto;/* ie8 */
   max-width: 100%;
}


.exit{
position:fixed;
z-index:10;
top:10px;
right:10px;
}

.exit img{
  width: 0.6rem;
  height: auto;/* ie8 */
   max-width: 100%;
}



.weima{
z-index:99;
position:absolute;
left:0.1rem;
top:0.0rem;
display:none;

width:130px;
height:250px;
background-image:url(../images/weimabg.png);
}

.vip{
z-index:99;
position:absolute;


width:80px;
height:80px;
margin:5px;
border-radius:10px; 
background-color:#56341B;
overflow:hidden;
right:5px;
}

.weima #code{
width:110px;
height:110px;
position:relative;
left:10px;
top:90px;
 z-index:1;
padding:5px;

background-color:#FFFFFF;
}




/*----------------mui.showLoading---------------*/
.mui-show-loading {
    position: fixed;
    padding: 5px;
    width: 120px;
    min-height: 120px;
    top: 45%;
    left: 50%;
    margin-left: -60px;
    background: rgba(0, 0, 0, 0.6);
    text-align: center;
    border-radius: 10px;
    color: #FFFFFF;
    visibility: hidden;
    margin: 0;
    z-index: 2000;

    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    opacity: 0;
    -webkit-transform: scale(0.9) translate(-50%, -50%);
    transform: scale(0.9) translate(-50%, -50%);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.mui-show-loading.loading-visible {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
}
.mui-show-loading .mui-spinner{
    margin-top: 24px;
    width: 36px;
    height: 36px;
}
.mui-show-loading .text {
    line-height: 1.6;
    font-family: -apple-system-font,"Helvetica Neue",sans-serif;
    font-size: 14px;
    margin: 10px 0 0;
    color: #fff;
}

.mui-show-loading-mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.mui-show-loading-mask-hidden{
    display: none !important;
}

	.timer {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 0.4rem;
            color: white;
            text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            display: none;
        }
			 h5{
		        padding-top: 15px;
				padding-bottom:15px;
		    }
		
		    
			 .camera-section {
            margin:auto;
			width:95%;
			 overflow:hidden;	
			
        }
         .camera-overlay {
              margin:auto;
           
            
           
        }
		
		.camera-section .gallery input{
				width: 100%;
				height: 100%;
				position: absolute;
				left:0;
				top:0;
				z-index: 11;
				filter:alpha(opacity=0);  
			  -moz-opacity:0;  
			  -khtml-opacity: 0;  
			  opacity: 0; 
			}
		.camera-section .mui-btn-primary{
		position:relative;
		
		display:block;
		z-index:9;
		width:100%;
		margin:auto;
		margin-top:-200px;
		}
		.camera-section .gallery{
		position:relative;
		
		margin:auto;
		margin-top:-200px;
		width:100%;
		z-index:9;
		}
		.camera-feed img {
		z-index:9;
		position:relative;
		width:180px;
		height:240px;
		top:30px;
            }
			
			
        .camera-container {
          z-index:1; 
         
		  width:240px;
		  overflow:hidden;
		 
		  margin:auto;
		  height:320px;
		 
 			zoom:2.5;
			position:relative;
		left:50%;
		top:-70px;
		margin-left:-120px;
			display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
        }
		
		.mui-button-row{
			position:relative;
			width:100%;
			
			display:none;
			
			z-index:99;
			}
			.mui-button-row button{
			width:90%;
			z-index:99;
			margin:auto;
			position:relative;
			top:-300px;
			
			}
			.mui-button-row p{
			z-index:99;
			position:relative;
			color:#FFFFFF;
			top:-600px;
			font-size:0.3rem;
			font-weight:bold;
			}
			.mui-button-row .mask{
			width:100%;
			height:100%;
			 background: rgba(0,0, 0, 0.6);
			z-index:9;
			position:fixed;
			top:0;
			overflow:hidden;
			  border-radius: 10px;
			
			}
	 .measurement-grid {
         
  width: 33.333%; /* 每列宽度为容器的三分之一 */
  margin-right: 10px; /
        }	
			
 .glass-card {
            background: rgba(255, 255, 255, 0.8);
            
          
            border-radius: 10px;
           
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
           margin:auto;
		   padding:10px;
			
			top:0;
			width:95%;
			height:100%;
			z-index:9;
			margin-bottom:10px;
        }
		
	#clipArea {
    margin: 10px;
    user-select: none;
    overflow: hidden;
    position: relative;
    height: 540px;
	
}
#clipBtn {
    margin-top:10px;
}

.correct:before {
    content: '\2714';
    color: #ffffff;
    float: right;
    font-size: 1rem;

}
.incorrect:before {
    content: '\2716';
    color: #cccccc;
    float: left;
    font-size: 1rem;
}