.map-home { width:100%;padding:0; margin:0 auto;display:flex; flex-direction: column; gap:1rem;}
.location-info { position: absolute; left: 50%; transform: translateX(-50%);  /* 向左偏移自身一半宽度，实现真正居中 */
    width: 70%; margin:0 auto; background-color: rgba(255, 255, 255, 1); border-radius: 0 0 15px 15px; text-align: center;  /* 内部文字、链接内容居中 */
    font-size: 14px; color: #666; z-index: 10;}

.mapX { position: relative; height: 340px; width: 100%; overflow: hidden; border-radius: 5px; margin: 0 auto; background-size: 100% 100%; background-repeat: no-repeat; background-image: url('/static/images/poilist.jpg'); }
.map { width: 100%; height: 360px; background-color: transparent !important;/*transform: translate(-50%, -50%);*/ }


.demo { display: flex; width: 100%; margin: 0 auto; text-align: center; gap:10px;}
.demo input { width: 40%; height: 35px; padding: 0px 18px; }
#sushi-button {width: 25%; height: 35px; padding: 2px; margin: 0 auto; font-size: 16px; background-color: #22aa22; color: white; border: none; border-radius: 5px; cursor: pointer; }
#sushi-button:hover { background-color: #22cc22; }
#button-container { margin: 0px auto; height: auto; padding: 0; display: flex; flex-wrap: wrap; gap: 0px 15px; justify-content: center; }
#sort-button { background-color: #22aa22; color: white; width:25%; border:none; border-radius: 5px; padding:5px 10px; display:none;}
#sort-button:active { background-color: #fff; }
#sort-button:hover { background-color: #0099DD; }
#simiao-button { width: 25%; background-color: #0077FF; color: white;  padding:0 10px; border-radius: 5px; }
#simiao-button:hover { background-color: #22aa22; }
.poi-list { width: 100%; list-style-type: none; padding: 0; margin: 0 auto; display:flex; flex-direction: column; gap: 1rem; display:none; }
.poi-list li { border: 1px solid #ccc; padding: 10px; border-radius: 5px; }
/* 错误信息样式 */
.error-message { color: red; padding:0; margin:0 auto; display:none }
.message { width:100%; padding:0; margin:0 auto; text-align: center; color: green; display:none;}

#liName { font-size: 18px; font-weight: bold; color: #22aa22; }
#liId a { font-size: 14px; text-decoration: none; color: inherit; }
#liaddr {}
#liTel {}
/*  #liDistance {width:30%; border-radius: 4px;padding-top:2px;padding-bottom:2px;font-size:12px;padding-left:10px; background-color: #22aa22;color: #fff; }*/
#liDistance { font-weight: bold; color: #22aa22; }
#liNav { margin-left: auto; text-align: right; margin-top: -3px; }
#liNav a { font-size: 13px; color: inherit; text-decoration: none; }

/* district-tags 容器样式 */
.district-tags { width: 100%; height: auto; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; align-items: start; display:none;}
/* 按钮基本样式 */
.district-tags button { padding: 5px 10px; border: none; border-radius: 4px; background-color: #f0f0f0; color: #333; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; border: 1px solid #ccc; }
/* 按钮悬停样式 */
.district-tags button:hover { background-color: #22aa22; color: #fff; }
.district-tags button.active { background-color: #22aa22; color: #fff; }

/* 按钮基本样式 */
.district-tags .sortBtn { padding: 5px 10px; border: none; border-radius: 4px; background-color: #0099DD; color: #fff; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; border: 1px solid #ccc; }
/* 按钮悬停样式 */
.district-tags .sortBtn:hover { background-color: #22aa22; color: #fff; }
.district-tags .sortBtn.active { background-color: #22cc22; color: #fff; }

/*分页*/
.no-pagination { font-size: 12px; font-weight: bold; color: #22aa22; margin-left:auto; }
#pagination { display: flex; justify-content: flex-end; margin-left:auto; color: #909090; display:none;}
/* 定义按钮类的样式 */
#pagination button { color: white; padding: 3px 8px;height:26px; border: none; border-radius: 3px; cursor: pointer; background-color: #22aa22; }

.sortBtn { color: white; padding: 3px 8px; border: none; border-radius: 3px; cursor: pointer; background-color: #0099DD; }
.current-page { font-size: 12px; color: #909090; padding: 3px 8px }
.poili { margin: 3px 8px 0px 8px; color: #505050; font-size: 14px; }
/* 补充下拉内容的样式 */
.Vcity-dropdown { position: relative; display: inline-block; }
.Vcity-dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }
.Vcity-dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }
.Vcity-dropdown-content a:hover { background-color: #f1f1f1; }
.Vcity-dropdown:hover .Vcity-dropdown-content { display: block; }
.pos-area { background-color: #0077FF; width: 100%; padding:0; margin: 0 auto; height: auto; max-height: 30px; overflow: scroll; text-align: left; color: white; display:none;}
.fix { padding: 8px; font-size: small; }
.btn-area { height: 100px; }
#sushi-button, #simiao-button { margin-bottom: 10px; padding: 8px; width: 42%; border-radius: 8px; background-color: #0099DD; color: white; font-size: 14px; border: none; cursor: pointer; }
@media (max-width:768px){ .mapX{ width:100%; height:240px; } .map{height:260px; }}


 /*  #liDistance {width:30%; border-radius: 4px;padding-top:2px;padding-bottom:2px;font-size:12px;padding-left:10px; background-color: #22aa22;color: #fff; }*/