body, html {
	height: 100%;
	margin: 0;
	padding: 0;
}

.container {
	display: flex;
	flex-direction: column;
	height: 100%;	
	background: url('../images/home-bg.png') center/cover no-repeat; 
}

.title-image {
    margin-top: 105px;
    width: 755px; /* Adjust as needed */
    height: 60px;
}

.image-row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 80px;
}

.image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 38px;
    text-decoration: none;
    
    position: relative; /* 关键：为绝对定位的弹出菜单提供参照 */
}

.top-image {
    width: 130px;
    height: 331px;
    transition: transform 0.3s ease;
    margin-bottom:130px;
}


.center-bg {
    width: 300px;
    height: 420px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    margin-bottom: 10px;
}


.center-btn {
    padding: 8px 25px;
    background-color: rgb(27, 121, 255);
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    text-decoration: none;
    margin-bottom: 55px;
	font-weight: bold;
}

a {
    text-decoration: none !important;
}
    

.bottom-image {
    width: 300px;
    height: 117px;
    margin-top: 5px;
}


#footer {
	position: fixed;
	bottom: 0;
	left: 50%;
	font-size: 14px;
	color: gray;
	transform: translateX(-50%);
	text-align: center;
   } 
.image-container-menu{
	display: flex;
    position: relative; /* 关键：为绝对定位的弹出菜单提供参照 */
}
.popup-menu {
    display: none;
    position: absolute;
    left: -135px;
    top: 50%;
    transform: translateY(-50%);
    width: 150px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    padding: 10px;
    z-index: 50;
    margin-top:50px;
    margin-right: 10px;
}

    
.popup-menu::before {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid white;
    /* 添加阴影延续效果 */
    filter: drop-shadow(2px 0 2px rgba(0,0,0,0.1));
}

/* 对话框阴影延续到三角 */
.popup-menu::after {
    content: "";
    position: absolute;
    right: -20px;
    top: 0;
    bottom: 0;
    width: 20px;
}

/* 关键修正：使用父容器:hover控制显示 */
.image-container-menu:hover .popup-menu,.cur .popup-menu{
    display: block;
    animation: fadeIn 0.3s ease;
}


@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.menu-item {
    padding: 8px 10px;
    margin: 5px 0;
    display: flex;
    align-items: center;
    color: #333;
    font-size:14px;
    text-decoration: none !important;
}

.menu-item:hover {
    background-color: #f5f5f5;
    color: #1E90FF;
}

.menu-icon {
    width: 8px;
    height: 8px;
    margin-right: 6px;
    background-size: contain;
    background-repeat: no-repeat;
}