 .overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 50; /* adjust this value to make sure the overlay is below the menu but above other elements */
 }
 
 .home-page{
	width:100vw;
	height:100vh;	
	background:#dcdcdc;
	background-size: cover;
	background-repeat: no-repeat;
	 background-position: center center;
	overflow: hidden; 
	z-index: 50;
	.section-top{
		
		z-index: 50;
		position: absolute;
		  top: 17vh; /* 垂直居中 */
		  left: 45vw; /* 水平居中 */
		  width: 100%; /* 元素宽度为视口宽度的 50% */
		  height: 8vh; /* 元素高度为视口高度的 50% */
		  transform: translate(-50%, -50%);
		.top-user-info{
			display: flex;
			width:50%; 
			height:60px;
			position: relative;
			margin-left:12px;
			.user-info{
				width:100%;
				height:100%; 
				background-color:#593320;
				border-radius: 15px;
				margin-left:20px;
				display: flex;
				flex-direction: row;
				z-index: 60;
				
				.header-icon{
					height:60px; 
					width:40%;
					margin-left:5px;
					display:flex;
					justify-content: center;
					align-items: center; 
					.header{
						height:50px;
						width:50px;
						border-radius: 15px;
						
					}
				}
				.header-name{
					margin-left:5px;
					width:100%;
					display: flex;
					flex-direction: column; 
					
					.name{
						font-size:14px;
						color:#FFFFFF;
						margin-left:10px;
						margin-top:5px;
						
					}
					.option{
						color:#593320;
						background-color:#E9C392;
						font-size:8px;
						margin-left:10px;
						margin-top:8px;
						padding:2px 3px;
						border-radius: 10px;
						width:80px;
						text-align: center;
					}
					
				}
			}
		
			
			.sub-menus{
				position: absolute;
		
				width:89%;
				margin-left:20px;
				background-color:#a07c5a;
				min-height:350px;
				border-radius: 10px;
				top:40px;
				padding-bottom:30px;
				
				.mt10{
					margin-top:30px;
				
				}
				.menu{
					height:30px; 
					
					width:100%; 
					
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					z-index:99;
					.icon{
						display: flex;
						width:20px;
						height:100%;
						margin-left:10px;
						justify-content: center;
						align-items: center;
						.img{
							height:16px; 
						}
					}
					.name{
						height:100%;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin-left:10px;
						color:#FFFFFF;
						font-size:13px;
						
						// font-weight: 800;
					}
				}
				.line{
					border-bottom: 1px solid #D6B6A2;
					width:100%;
					margin-top:5px;
					margin-bottom: 5px;
				}
				.menu-content{ 
					overflow: hidden; 
					.menu-items{ 
						margin-left:10px;
						.menu-item{
							 width:40%; 
							 overflow: hidden;
							 float:left; 
							 margin-top:5px;
							 margin-right: 5px; 
							 display:flex;
							 flex-direction:column;
							 justify-content: center;
							 align-items: center;
							.item{
								display:flex;
								justify-content: center;
								align-items: center;
								background:#FFEFE2;
								
								width:60px;
								height:60px;
								.img{
									width:100%;
									height:100%;
								}
							}
							.name{
								width:100%;
								text-align:center;
								font-size:12px;								
								color:#FFEFE2;
								height:30px; 
								line-height: 30px;
								overflow: hidden;
							}
						}
					}
				}
			}
		}
		.menu-top{
			width:100%;
			position: absolute;
			top:-1vh;
			display: flex;
			flex-direction: row; 
			justify-content:flex-end;
			align-items: flex-start; 
			.menu{
				height:30px;
				width:30px;
				margin-right: 10px;
				.icon{
					width:100%;
					height:100%;
				}
			}
		}
	}
	
	.section2{
		display: flex;
		position: absolute;
		  top: 37vh; /* 垂直居中 */
		  left: 50vw; /* 水平居中 */
		  width: 100%;
		  transform: translate(-50%, -45%);
		flex-direction: row;
		
		.icon{
			width:50%;
			
			overflow: hidden; 
			display: flex;
			flex-direction: column; 
			.icon-lay1{
				display: flex;
				
				flex-direction: row;
				width:100%;
				height:6vh; 
				
				margin-left:12px;
				// border:1px solid red;
				.lay-icon{
					width:27%;
					// border:1px solid red;
					display: flex;
					justify-content: center;
					align-items: flex-end; 
					
					.icon{
						width:62px;
						height:62px;
					}
					.black{
						background:#000;
						opacity: 0.4;
					}
				}
			}
			.lay-margin{
				margin-top:5vh;
			}
			.lay-margin0{
				margin-top:4.5vh;
			}
		}
		
		.windows{ 
			display: flex;
			width:40%;
			z-index: 170;
			position: relative;
			
			
		}
		
		
	}
	
	.section3{
		position: absolute;
		
		  top: 57vh; /* 垂直居中 */
		  left: 73vw; /* 水平居中 */
		  width: 50%;
		  transform: translate(-50%, -50%);
		
		display: flex;
		flex-direction: row;
		height:100px; 
		justify-content: flex-end;
		align-items: flex-end;
		position: relative;
		z-index:59;
		.tel{
			height:60px;
			width:80px;
			display: flex;
			
			margin-bottom:18px;
			margin-right: -20px;
			z-index:50;
			.img{
				height:100%;
				width:100%;
			}
		}
		.comp{
			width:110px;
			height:80px; 
			margin-bottom:5px;
			.img{
				width:100%;
				height:100%;
			}
		}
	}
	
	.section4{ 
		position: absolute;
		  top: 74vh; /* 垂直居中 */
		  left: 28vw; /* 水平居中 */
		  width: 30%;
		  transform: translate(-50%, -50%);
		  
		z-index: 49;
		height:300px;
		
		
		.user{
			
		
		}
		
	}
	
	
	
}
.tooltip {
    position: absolute;
    display: inline-block;
    
    padding: 10px;
    background-color: #FFFFFF;
	opacity: 0.7;
    color: #000;
	width: 100px;
	heigh:50px;
    border-radius: 60%;
    text-align: center;
    animation: bounce 1s infinite;
	font-size: 14px;
	font-weight: bold;
	font-family: "Comic Sans MS", cursive, sans-serif;
	
}

.tooltip::after {
    content: "";
    position: absolute;
    bottom: -13px; /* 箭头位置 */
	
    left: 40%;
    transform: translateX(-50%);
	opacity: 0.7;
    border-width: 7px;
    border-style: solid;
    border-color: #FFF transparent transparent transparent;
	
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.tip1{
	top: 7vh;
	left: 20px;
	
}
.tip2{
	top: 40vh;
	left: 60%;
	
}