/* 全局样式 */
body {
      margin: 0;
      padding: 0;
      background: #f8f9fa;
      font-family: Arial, sans-serif;
    }
ul {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
 h1 {
          text-align: center;
          margin-bottom: 30px;
          font-size: 28px;
          color: #333;
    }
/* 数量输入框样式 */
input[type="number"] {
  width: 60px;
  padding: 5px;
  margin: 5px 0;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
}

input[type="number"]:disabled {
  background-color: #f5f7fa;
  cursor: not-allowed;
}

input[type="number"]:focus {
  border-color: #4a90e2;
  outline: none;
}

/* 输入框select样式 */
.custom-select {
  /* 基本样式 */
  padding: 5px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  appearance: none; /* 去掉默认的下拉箭头 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="#999" stroke-width="2" d="M6 9l6 6 6-6"/></svg>'); /* 自定义下拉箭头 */
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 24px 24px;
  width:35px; /* 或者根据需要调整宽度 */
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.custom-select:focus {
  /* 聚焦时的样式 */
  border-color: #409eff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
/* 输入框样式 */
.custom-input {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.custom-input:focus {
  border-color: #4a90e2;
  outline: none;
}

/* 按钮样式 */
.custom-button {
  background-color: #4a90e2;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  transition: background-color 0.3s ease;
}

.custom-button:hover {
  background-color: #3b7ddd;
}

.custom-button:active {
  background-color: #3068b8;
  transform: translateY(2px);
}

.custom-button:disabled {
  background-color: #cccccc;
  color: #ffffff;
  cursor: not-allowed;
}
.lv-button {
  background-color: #67c23a;
}

/* 链接样式 */
.alink {
  color: #3b7ddd;
  text-decoration: underline;
}
.alink:hover {
  color: #67c23a;
  text-decoration: underline;
}

/* 验证码图片样式 */
.captcha-img {
  cursor: pointer;
  width: 100px;
  height: 40px;
  margin-left: 10px;
}

/* 登录页面容器样式 */
.login-container {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 350px;
}

/* 费用设置页面容器样式 */
.set-container {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 350px;
}

.mydiv{
	border-radius: 10px;
	padding: 20px;
	margin: 30px;
	border:solid 1px #e7e7e7;
}
 .load-more { 
     display:block; margin:30px auto; padding:10px 20px; border:1px solid #007bff; background:#007bff; color:#fff; cursor:pointer; text-align:center; border-radius: 8px; }
.w {
		width: 100%;
		height: auto;
	}
	.w98{
		width: 98%;
		height: auto;
	}
	.w95{
		width: 95%;
		height: auto;
	}
	.w90{
		width: 90%;
		height: auto;
	}
	.w25{
		width: 25%;
		height: auto;
		}
	.w20{
		width: 20%;
		height: auto;
		}
	.w22{
		width: 22%;
		height: auto;
		}
	.w44{
		width: 44%;
		height: auto;
		}
	.w50{
		width: 50%;
		height: auto;
		}
	.w56{
		width: 56%;
		height: auto;
		}
	.w60{
		width: 60%;
		height: auto;
		}
	.w70{
		width: 70%;
		height: auto;
		}
	.w1200{
		width: 1200px;
		margin: 0 auto;
		overflow:hidden;
		}
	.h50{
		height: 50px;
		line-height: 50px;
	}
.bg{
	background-color: #fff;
}
.bglan{
	background-color:#c6dcfc;
	color: #409eff;
	padding: 10px;
}

.ws{
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: normal;
}
/* 文字样式 */
.r {
  color: #ff0000;
}

.grey {
  color: rgba(0, 0, 0, 0.1);
}
.grey1 {
  color: #ccc;
}
.grey2 {
  color: #c1c1c1;
}
.fs12 {
  font-size: 12px;
}
.fs14 {
  font-size: 14px;
}
.fs16 {
  font-size: 16px;
}
.fs18 {
  font-size: 18px;
}
.fs24 {
  font-size: 24px;
}
.fw500 {
  font-weight: 500;
}
.fw600 {
  font-weight: 600;
}
.fw800 {
  font-weight: 800;
}

/*文字位置*/
.tal {
	 text-align: left;
	}
.tac {
		text-align: center;
	}
.tar {
		text-align: right;
	}
/*位置样式*/

/*边距*/
	.pt5{
		padding-top:5px ;
	   }
	.p5 {
		padding: 5px;
	}
	.p10 {
		padding: 10px;
	}
	.p20 {
		padding: 20px;
	}
	.pt8{
		padding-top:8px ;
	   }
	.pt10{
		padding-top:10px ;
	   }
	.pt12{
		padding-top:12px ;
	   }
	.pt15{
		padding-top:15px ;
	   }
	.pt20{
		padding-top:20px ;
	   }
	.pt30{
		padding-top:40px ;
	   }
	.pt50{
		padding-top:50px ;
	   }
	.pt100{
		padding-top:100px ;
	   }
	.pt150{
		padding-top:150px ;
	   }
	.pt170{
		padding-top:170px ;
	   }
	.pt190{
		padding-top:190px ;
	   }
	.pt200{
		padding-top:200px ;
	   }
	.pt220{
		padding-top:220px ;
	   }
	.pl5{
	   	padding-left:5px ;
	      }
	.pl10{
	   	padding-left:10px ;
	      }
	.pl15{
	   	padding-left:15px ;
	      }
	.pl20{
		padding-left:20px ;
	   }
	.pl25{
		padding-left:25px ;
	   }
	.pl30{
		padding-left:30px ;
	   }
	.pl100{
		padding-left:100px ;
	   }
	.pr5{
	   	padding-right:5px ;
	    }
	.pr10{
	   	padding-right:10px ;
	    }
	.pr20{
	   	padding-right:20px ;
	    }
	.pr30{
	   	padding-right:30px ;
	    }
	.pl40{
	   	padding-left:40px ;
	    }
	.pr50{
	   	padding-right:50px ;
	    }
  .pr150{
	   	padding-right:150px ;
	    }
	.pb5{
	   	padding-bottom:5px ;
	    }
	.pb10{
	   	padding-bottom:10px ;
	    }
	.pb20{
	   	padding-bottom:20px ;
	    }
	.pb30{
	   	padding-bottom:30px ;
	    }
	.pb50{
	   	padding-bottom:50px ;
	    }
	.pb60{
	   	padding-bottom:60px ;
	    }
	.pb70{
	   	padding-bottom:70px ;
	    }
	.pb150{
	   	padding-bottom:150px ;
	    }
	.pb180{
		   	padding-bottom:180px ;
		    }
/* 容器样式 */
/*位置上下居中*/
.jc {
  display: flex;
  justify-content: center;
  align-items: center;
}
/*布局横排放*/
	.fr{
		display:flex;
		flex-direction: row;
	   }
	/*布局竖排放*/
	.fc{
		display:flex;
		flex-direction: column;
	   }
	 .frb{
		 /*横向布局-两端对齐*/
	 	display:flex;
	 	flex-direction: row;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	    }
	.fw{
		/*自动换行*/
		flex-wrap: wrap;
	}

/*边框修饰*/
	.x{
			/*边框*/
		border:solid 1px #e7e7e7;
	}
	.xl{border-left: solid 1px #000;}
	.xb{
		/*底线*/
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #e7e7e7;
	}
	.xb1{
		/*底线虚线*/
		border-bottom-style:dashed;
		border-bottom-width: 1px;
		border-bottom-color: #e7e7e7;
		}
	.bor{
		/*默认圆角10*/
		border-radius:10px;
			}
	.bor10{
		/*默认圆角10*/
		border-radius:10px 10px 0px 0px;
		}
	.bor5{
		/*圆角5*/
		border-radius:5px;
		}
	/* 基础样式 */
.member-container {
  font-family: Arial, sans-serif;
  max-width:100%;
  margin: 0 auto;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.member-container2000 {
  font-family: Arial, sans-serif;
  width: 3000px;
  margin: 0 auto;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* 标题样式 */
.member-header {
  padding-bottom: 10px;
  padding-top: 5px;
  border-bottom: 1px solid #eee;
}

.member-title {
  color: #333;
  font-size: 24px;
  margin: 0;
}

/* 搜索区域样式 */
.search-section {
  display: flex;
  margin-bottom: 20px;
  gap: 10px;
}

.search-input {
  flex-grow: 1;
}

/* 基础样式 */
.form-control {
  width: 100%; /* 宽度占满父容器 */
  padding: 12px 16px; /* 内边距，增加输入框的舒适感 */
  font-size: 16px; /* 字体大小 */
  color: #333; /* 字体颜色 */
  border: 1px solid #ccc; /* 边框样式 */
  border-radius: 8px; /* 圆角边框 */
  background-color: #fff; /* 背景颜色 */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* 平滑过渡效果 */
  outline: none; /* 移除默认的聚焦轮廓 */
}

/* 占位符样式 */
.form-control::placeholder {
  color: #999; /* 占位符字体颜色 */
  font-size: 14px; /* 占位符字体大小 */
  opacity: 1; /* 确保占位符在所有浏览器中都显示 */
}

/* 鼠标悬停样式 */
.form-control:hover {
  border-color: #999; /* 悬停时边框颜色 */
}

/* 聚焦样式 */
.form-control:focus {
  border-color: #f1f1f1; /* 聚焦时边框颜色 */
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* 聚焦时的阴影效果 */
}

.search-button {
  padding: 10px 20px;
  background-color: #3b7ddd;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.search-button:hover {
  background-color: #007bff;
}
/* 表格样式 */
.table {
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
}
.table-cell_flex {
  flex: 1;
  padding: 5px;
  text-align: center;
}
.table-cell {
  padding: 5px 5px;
  border-right: 1px solid #ddd;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  overflow: hidden;
  box-sizing: border-box;
  word-wrap: break-word;
  white-space: normal;
}
.table-name {
  background-color: #f1f1f1;
  text-align: center;
  border-bottom: 1px solid #ddd;
  padding: 10px;
}
.table-header {
  display: flex;
  background-color: #f2f2f2;
  font-weight: bold;
}
.table-row {
  display: flex;
  background-color: white;
  border-bottom: 1px solid #ddd;
}
.table-row:hover {
  background-color: #f9f9f9;
}
.flex1 {
  flex: 1;
}
.flex2 {
  flex: 2;
}
.flex3 {
  flex: 3;
}
.cell_10 {
  width: 10px;
}
.cell_20 {
  width: 20px;
}
.cell_35 {
  width: 35px;
}
.cell_50 {
  width: 50px;
}
.cell_70 {
  width: 70px;
}
.cell_80 {
  width: 80px;
}
.cell_100 {
  width: 100px;
}
.cell_105 {
  width: 105px;
}
.cell_120 {
  width: 120px;
}
.cell_130 {
  width: 130px;
}
.cell_150 {
  width: 150px;
}
.cell_160 {
  width: 160px;
}
.cell_180 {
  width: 180px;
}
.cell_190 {
  width: 190px;
}
.cell_200 {
  width: 200px;
}
.cell_220 {
  width: 220px;
}
.cell_270 {
  width: 270px;
}
.cell_300 {
  width: 300px;
}
.cell_400 {
  width: 400px;
}
/* 链接和按钮样式 */
.link {
  color: #2196F3;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}
.link1 {
  text-decoration: underline;
}
.link1:hover {
  text-decoration: underline;
}
/* 链接和按钮样式 */
.modyfi-button {
  padding: 5px 10px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
}

.modyfi-button:hover {
  background-color: #d32f2f;
}
.delete-button {
  padding: 5px 10px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
}

.delete-button:hover {
  background-color: #d32f2f;
}

/* 输入框样式 */
.input {
  width: 100%;
  padding: 5px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.input:focus {
  border-color: #4a90e2;
  outline: none;
}

/* 表单框样式 */
.form-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.form-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  width: 400px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
.form-content600 {
  background-color: white;
  padding: 10px;
  border-radius: 5px;
  width: 600px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
.form-content800 {
  background-color: white;
  padding: 10px;
  border-radius: 5px;
  width: 800px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
/* 链接和按钮样式 */
.submit-button {
  padding: 5px 10px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
}
.submit-button:hover {
  background-color: #d32f2f;
}
/* 密码模态框样式 */
.password-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  padding: 20px;
  padding-right:40px;;
  border-radius: 5px;
  width: 300px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
.mc {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mc1 {
  background-color: white;
  padding: 20px;
  width: 350px;
}
.modal-message {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
}

.password-input {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cancel-button {
  padding: 8px 15px;
  background-color: #f1f1f1;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.cancel-button:hover {
  background-color: #ddd;
}

.confirm-button {
  padding: 8px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.confirm-button:hover {
  background-color: #45a049;
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.pagination-info {
  color: #666;
  font-size: 14px;
}

.current-page {
  color: #FF0000;
  font-size: 16px;
  font-weight: bold;
}

.page-numbers {
  display: flex;
  gap: 5px;
}

.page-button {
  padding: 5px 10px;
  background-color: #f1f1f1;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.page-button:hover {
  background-color: #ddd;
}

.active-page {
  background-color: #4CAF50;
  color: white;
}

.active-page:hover {
  background-color: #45a049;
}
.bottomEnd{
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     background: #f2f2f2;
     text-align: center;
     padding: 10px 0;
     border-top: 1px solid #ddd;
}

/*图片上写文字*/
.imgontxt{
  /* 1. 把图塞进去 */
 background:url("../img/bs.jpg") center/cover no-repeat;
  border-radius:10px;
 
  /* 2. 让文字居中 */
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  
  /* 3. 给个高度就能看到图 */
  height:180px;          /* 可按 vh 或 px 随意调 */
  text-align:center;
  color:#fff;            /* 浅色字保证可读 */
}

/* 4. 可选：给字加阴影，防止图太花 */
.imgontxt h2,
.imgontxt p{
  text-shadow:0 2px 8px rgba(0,0,0,.6);
  margin:0;
}

/*鼠标一到图片，然后弹出文字到图片上*/
/* 1. 网格容器 */
.grid-box{
  display:grid;
  grid-template-columns:repeat(2, 1fr);   /* 一行两列 */
  gap:20px;                               /* 仅这里留缝，图外无 margin */
}

/* 1. 容器 */
.pic-popup{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  margin: 0;
  padding: 0;
  border-radius:10px;
}
.pic-popup img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s;
}
.pic-popup:hover img{
	transform:scale(1.05);
}

/* 2. 一直显示的标题 */
.pic-popup-title{
  position:absolute;
  inset:0;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff; font-size:18px;
  text-shadow:0 2px 4px rgba(0,0,0,.6);
  z-index:2;
  pointer-events:none;
}

/* 3. 悬停层：更深背景 + 高斯模糊，彻底盖住底层字 */
.pic-popup-detail{
  position:absolute;
  inset:0;
  /* 品牌蓝，75% 不透明 */
  background: rgba(0, 61, 130, .75);
  /* 渐变也行（注意加透明度） */
  /*background: linear-gradient(135deg, rgba(0,61,130,.75) 0%, rgba(0,90,180,.75) 100%);*/
  backdrop-filter:blur(2px);       /* 毛玻璃，老浏览器可忽略 */
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px 30px;
  opacity:0;
  transform:translateY(30px);
  transition:opacity .4s, transform .4s;
  z-index:3;
}
.pic-popup-detail h3{margin:0 0 10px; font-size:20px;}
.pic-popup-detail p{margin:0;}

/* 4. 悬停触发 */
.pic-popup:hover .pic-popup-detail{
  opacity:1;
  transform:translateY(0);
}
/* 平板 3 列 */
@media(min-width:768px){
  .grid-box{grid-template-columns:repeat(3,1fr);}
}
/* 大屏 4 列 */
@media(min-width:1200px){
  .grid-box{grid-template-columns:repeat(3,1fr);}
}
/* 移动端适配 */
  @media (max-width: 1200px) {
		  .w1200 {
		   width:100%;
		  }
	  }