body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	line-height: 2;
	background-color: #333;
}


#aud {
	width:90%;
	margin: 10px 0px;
	display: inline-block;
	background-color: #F9F9F9;
	border-radius: 15px;
	text-align: center;
	position: relative;
}
#aud .ypdiv {
	display: inline-block;
	padding: 10px;
	text-align: center;
}
#aud .ypbt {
	display: block;
	margin: 6px 0px;
}
#form {
	background-color: #FFF;
	padding: 20PX 2%;
}
#plan {
	padding: 20PX 2%;
	margin: 10px 1%;
	background-color: #FFF;
	border-radius: 10px;
}
#task {
	color: #F00;
}
.del {
	padding: 5px 5px;
	position: absolute;
	right: -10px;
	top: -5px;
	background-color: #63F;
	border-radius: 15px;
}
.del a {
	color: #FFFFFF;
	text-decoration: none;
}
#divclear {
	clear: both;
}
input, select {
	padding: 10px;
	font-size: 14px;
}
a {
	font-size: 16px;
}
a:link, a:visited {
	color: #000;
	text-decoration: none;
	font-size: 16px;
}
a:hover {
	font-size: 16px;
	color: #FF0000;
	text-decoration: underline;
}
a:active {
	font-size: 16px;
	color: #0000FF;
	text-decoration: none;
}
#mp3-sj {
	background-color: #EAF5FF;
	color: #DD1C1C;
	padding: 4px 6px;
	border-radius: 6px;
}
#parent {
	margin: 15px 1%;
    background-color: #F9F9F9;	
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#twonav{background-color:#FFF; 
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-bottom:15px;
padding:20px;
color:#999;}
#twonav a{color:#999;}
.accmob{color:#999; margin-bottom:20px;}

/* 基本样式重置 */
ul,li,a {
    margin: 0;
    padding: 0;
    list-style: none; /* 移除列表的默认样式 */
    text-decoration: none; /* 移除链接的下划线 */
}
 
/* 列表容器样式 */
#navul {
    display: flex;
    flex-wrap: wrap; /* 允许子元素换行 */
    justify-content: space-between; /* 子元素之间的间距 */

}
 
/* 列表项样式 */
#navul li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48%; /* 每行两列，所以宽度设为50%减去一些间距 */
    margin-bottom: 10px; /* 列表项之间的垂直间距 */
    background-color: #f0f0f0; /* 背景色，可以根据需要调整 */
    border: 1px solid #ccc; /* 边框，可以根据需要调整颜色和样式 */
    border-radius: 4px; /* 圆角，使按钮看起来更柔和 */
    padding: 20px 20px; /* 内边距，使按钮内部的内容有足够的空间 */
    box-sizing: border-box; /* 确保内边距和边框不会增加元素的宽度 */
}
 
/* 链接样式 */
#navul a {
    color: #333; /* 链接文字颜色 */
    font-size: 16px; /* 链接文字大小 */
    width: 100%; /* 链接宽度占满列表项 */
    text-align: center; /* 文字居中 */
}
 
/* 列表项悬停效果（可选） */
#navul li:hover {
    background-color: #e0e0e0; /* 悬停时改变背景色 */
}








#left a {
	color: #FFF;
}

ul, li {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
/* 按钮样式 */  
.button {
	display: inline-block;
	padding: 5px 20px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.3s ease;
	border-radius: 4px;
	color: white;
}
/* 登录按钮 */  
.login-button {
	background-color: #4CAF50;
	color: white;
	border: none;
	color: white;
}
.login-button:hover {
	background-color: #45a049;
}
/* 注册按钮 */  
.register-button {
	background-color: #007bff;
	color: white;
	border: none;
	margin-left: 10px;
	color: white;
}
.register-button:hover {
	background-color: #0069d9;
}
/* 退出按钮 */  
.logout-button {
	background-color: #F9F9F9;
	color: #333;
	border: none;
	color: white;
}
.logout-button:hover {
	background-color: #F5F5F5;
}
.accordion {
	text-align: center;
	margin: 0;
	padding: 0px;
	line-height: 2;
	border-radius: 20px;
}
.accordion li {
	background-color: #17181b;
	margin: 0px 10px;
	padding: 10px 10px;
}
.accordion li a {
	display: block;
	text-decoration: none;
	cursor: pointer;
}
.accordion li ul {
	display: block;
	margin: 10px 0px 10px 0px;
	border-radius: 10px;
}
.accordion li ul li {
	color: #e5cf78;
	background-color: #1d1e22;
}
.accordion li:hover ul {
	display: block;
}
#list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
	grid-auto-rows: min-content;
	gap: 10px; /* 设置列之间的间距为10px */
	margin-bottom:10px;
}
#list .item {
	display: flex;
	align-items: stretch;
	justify-content: left;
line-height: 3.5;
background-color:#F1F1F1;
padding:5px;
border-radius:5px;
}






.redfont {
	color: #FF0000;
}
.textcenter {
	text-align: center;
}
.container {
	padding: 16px;
}

/*from*/
.form-container {
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	margin-bottom: 15px;
	line-height:35px;
}
h2 {
	text-align: center;
	margin-bottom: 20px;
}
.form-group {
	margin-bottom: 15px;
}
label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
}
input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea{
	width: 100%;
	padding: 10px 15px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	line-height:35px;
}

select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 25px; /* 确保文本不会被箭头覆盖 */
    background-color: transparent;
    border: 1px solid #ccc;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 4px;
	line-height:35px;
    width: 100%;
}

select .opt{ line-height:35px; height:35px;}

.radio-group, .checkbox-group {
	margin-top: 10px;
}
.radio-group label, .checkbox-group label {
	display: inline-block;
	margin-right: 10px;
}
button {
	width: 100%;
	padding: 20px 20px;
	background-color: #28a745;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	transition: background-color 0.3s;
}
button:hover {
	background-color: #218838;
}
#tips {
	text-align: center;
	margin: 10px;
	color: #F00;
}










#page{text-align:center; margin:30px 0px 15px 0px;}
#page a{border:1px solid #E6E6E6;padding:10px 15px;background-color:#EEE;font-size:14px;}
#page .dqy{padding:10px 15px;background-color:#F77B00; color:#FFFFFF;font-size:14px; font-weight:bold;}
#totalcount{font-size:14px; text-align:center;margin:15px 0px 25px 0px;}
#totalcount .num{color:#F00; font-weight:bold;}
#totalcount a{font-size:14px;}
.xsx{border-bottom:1px solid #E6E6E6;}
.redfont{color:#FF0000;}





/* 弹出层和遮罩样式 */
.overlay {
    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: 999; /* 确保它在其他内容之上 */
}
.hidden {
    display: none;
}
.popup {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}





/*aclist*/
#account-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px; /* 设置账号项之间的间距 */
	line-height: 35px;
	font-size: 14px;
}
#account-list .account-item {
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	width: 100%; /* 默认宽度为100%，即单列布局 */
}
#account-list .account-info {
	padding: 16px;
	text-align: center;
}
#account-list .account-info h3 {
	margin: 0;
	font-size: 16px;
	font-weight: bold;
}
#account-list .account-info p {
	margin: 4px 0 0;
	font-size: 14px;
	text-align: left;
	color: #888;
}
/*aclist*/
/*pages*/
#pages {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	padding: 10px 0px 10px 0px;
	width: 90%; /* 修改为百分比宽度 */
	max-width: 96%; /* 设置一个最大宽度以防止在大屏幕上过宽 */
	margin: 15px auto; /* 水平居中 */
}
#pages a {
	display: inline-block;
	position: relative;
	height: 30px;
	line-height: 30px;
	width: 25%;
	background: #fff;
	font-size: 16px;
	color: #555555;
	border: 1px solid #d8dadf;
	text-align: center;
	padding: 0 2px;
	margin: 6px 2px 0px 2px;
	color: #999;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-o-transition: all 0.15s ease;
	-ms-transition: all 0.15s ease;
	transition: all 0.15s ease;
}
#pages span {
	display: inline-block;
	position: relative;
	height: 30px;
	line-height: 30px;
	width: 25%;
	background: #fff;
	font-size: 16px;
	color: #555555;
	border: 1px solid #d8dadf;
	text-align: center;
	padding: 0 2px;
	margin: 6px 2px 0px 2px;
	color: #999;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-o-transition: all 0.15s ease;
	-ms-transition: all 0.15s ease;
	transition: all 0.15s ease;
}
#pages a.a1 {
	font-size: 14px;
	color: #F60;
}
#pages .a2 {
	font-size: 14px;
	color: #ccc;
}
/*pages*/
/*from*/
#form-container {
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	margin-bottom: 15px;
	line-height:35px;
}
#form-container h2 {
	text-align: center;
	margin-bottom: 20px;
}
#form-container.form-group {
	margin-bottom: 15px;
}
#form-container label{
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
}
#form-container input[type="text"],input[type="email"], input[type="password"],input[type="number"],textarea{
	width: 100%;
	padding: 10px 15px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	line-height:35px;
}
#form-container select{
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid #ccc;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 4px;
	line-height:35px;
    width: 100%;
}

#form-container .radio-group, .checkbox-group {
	margin-top: 10px;
}
#form-container .radio-group label, .checkbox-group label {
	display: inline-block;
	margin-right: 10px;
}
#form-container button {
	width: 100%;
	padding: 20px 20px;
	background-color: #28a745;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	transition: background-color 0.3s;
}
/*from*/
/*button*/
#downbutton{
	display: flex;
	gap: 10px;
	justify-content: center;
	width: fit-content; 
	margin: 15px auto;
	text-align: center;
	}
#downbutton .control-link{
	color:#FFF;
	padding: 5px 10px;
	font-size: 14px;
	border: none;
	border-radius: 5px;
	background-color: #007bff;
	text-decoration: none; /* 移除默认的下划线 */
	cursor: pointer;
	transition: background-color 0.3s;
}
#downbutton .green {
	background-color: #28a745;
	olor:#fff;
}
#downbutton .yellow {
	background-color: #ffc107;
	olor:#fff;
} 
#downbutton .red {
	background-color: #dc3545;
	olor:#fff;
}
#downbutton .gay {
	background-color: #F0F0F0;
	color:#333;
}
#downbutton .black {
	background-color: #333;
	color:#FFF;
}
/*button*/


/* 媒体查询，根据屏幕宽度调整列数 */
@media (min-width: 600px) {
#account-list .account-item {
	width: calc(50% - 16px); /* 两列布局，减去gap的一半 */
}
}
 @media (min-width: 900px) {
#account-list .account-item {
	width: calc(33.333% - 16px); /* 三列布局，减去gap的一半 */
}
}

 @media (max-width: 3999px) {  /*3840x2160分辨率（4K UHD）：*/
}
 @media (max-width: 2999px) {  /*2560x1600分辨率（QHD+或WQHD+）：3200x1800分辨率（WQHD或3K）*/
}
 @media (max-width: 1399px) {  /*iPad Pro: 1366px  1920x1080  1366x768分辨率（HD+）*/
}
 @media (max-width: 1299px) {  /*iPhoneX, XS, XS Max: 1125px iPhone6 Plus: 1242px*/
}
 @media (max-width: 1099px) {  /*iPad Air: 1024px iPhone11, 11 Pro Max: 1080px*/
}
 @media (max-width: 799px) {  /*iPhone6 750和iPad Mini  768px*/
}
 @media (max-width: 699px) {  /*iPhone5和iPhoneSE: 640px*/
}