/* CSS Document */
{margin:0;padding:0;}
body{
	background-color:#000;
	color:#FFF;
	}
body {
  font-family:思源黑体;
}

.daohang{
	width:250px;
	height:1500px;
	border:1px #171717 solid;
	background:#171717;
	position: fixed;
	}
.daohang img{
	width:150px;
	height:150px;
	margin-left:50px;
	margin-top:50px;
	margin-bottom:-11px;
	}
.daohang ul li{
	list-style:none;
	width:200px;
	height:50px;
	border:1px #FFFFFF solid;
	line-height:50px;

	margin-bottom:15px;
	border-radius:20px;
	color:#FFF;
	font-size:16px;
	
	
	}
.daohang ul li span{
	margin-left:70px;
	}
.daohang ul li span:hover{
	color:#1b97b9;
	}
	
	
.daohang ul{
	margin-left:-17px;
	}
.daohang ul a{
	text-decoration:none;
	font-size:16px;
	}
.daohang a:hover{
	background:#FFF;
	}
.daohang ul li img{
	width:30px;
	height:30px;
	margin-left:35px;
	position:absolute;
	margin-top:10px;

	}
.daohang2{
	width:200px;
	height:220px;
	background:#262626;
	border-radius:20px;
	margin-left:23px;
	}
.daohang2 h6{
	font-size:16px;
	text-align:center;
	padding:20px;

	}
.daohang2 p{
	font-size:14px;
	text-align:center;
	margin-top:-40px;
	}
.daohang2 a{
	text-decoration:none;
	color:#FFF;
	width:80px;
	height:30px;
	border:1px #FFFFFF solid;
	display:block;
	line-height:30px;
	text-align:center;
	font-size:14px;
	margin-left:55px;
	margin-top:20px;
	border-radius:20px;
	}
.daohang2 a:hover{
	color:#000;
	}
.shangdaohang{
	width:87%;
	height:100px;
	border:1px #000000 solid;
	margin-left:290px;
	position: fixed;
	z-index: 4;
	background:#000;
	}
        /* 搜索框容器 */
        .search-container {
            position: relative;
            width: 100%;
            max-width: 600px;
			margin-top:20px;
        }

        /* 搜索框样式 */
        .search-box {
            width: 400px;
            padding: 15px 20px 15px 50px;
            font-size: 16px;
            border: 2px solid #e0e0e0;
            border-radius: 30px;
            outline: none;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        /* 搜索图标 */
        .search-icon {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            font-size: 18px;
            transition: color 0.3s;
		
        }

        /* 聚焦状态 */
        .search-box:focus {
            border-color: #4285f4;
            box-shadow: 0 4px 12px rgba(66, 133, 244, 0.2);
        }

        .search-box:focus + .search-icon {
            color: #4285f4;
        }

        /* 悬停效果 */
        .search-box:hover {
            border-color: #d1d1d1;
        }

        /* 搜索按钮（可选） */
        .search-button {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            padding: 10px 20px;
            background-color: #4285f4;
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
			margin-right:150px;
        }

        .search-button:hover {
            background-color: #3367d6;
        }

        /* 响应式调整 */
        @media (max-width: 480px) {
            .search-box {
                padding-right: 15px;
            }
            .search-button {
                display: none; /* 小屏幕隐藏按钮 */
            }
        }
.shangdaohangyou{
	float:right;
	}
.shangdaohangyou ul li{
	float:left;
	list-style:none;
	width:80px;
	height:40px;
	border:1px #000000 solid;

	line-height:40px;
	margin-right:20px;
	}
.shangdaohangyou ul{
	margin-top:-45px;

	}
.shangdaohangyou ul li a{
	color:#FFF;
	text-decoration:none;
	font-size:14px;
	}
#you01{
	width:150px;
	height:40px;
	background:#FF0;
	text-align:center;
	font-size:14px;
	font-weight:700;
	border-radius:20px;
	
	}
#lianxidianhua{
	width:200px;
	font-size:14px;
	margin-right:30px;
	}

	
 
#you01:hover{
	background:#FFF;
	color:#000;
	}
.banner{
	width:87%;
	margin-left:290px;
	m
	}
.banner img{
	width:100%;
	margin-top:100px;
	height:500px;
	}
.banner h6{
	position: absolute;
	margin-left:100px;
	margin-top:-400px;
	font-size:40px;
	color:#FFF;
	width:500px;
	}


.a01{
	margin-top:-250px;
	position:absolute;
	display:block;
	width:200px;
	height:50px;
	background:#FF0;
	margin-left:100px;
	border-radius:20px;
	text-align:center;
	line-height:50px;
	text-decoration:none;
	font-weight:900;
	color:#000;
	font-size:16px;
	}
.a02{
	width:120px;
	height:50px;
	border:1px #FFFFFF solid;
	display:block;
	position:absolute;
	margin-top:-250px;
	margin-left:330px;
	border-radius:20px;
	text-align:center;
	line-height:50px;
	color:#FFF;
	text-decoration:none;
	font-weight:900;
	font-size:16px;
	
	}
.a02:hover{
	background:#FFF;
	color:#000;
	}
#tupianliebiao {
	margin-top:-200px;
	position:absolute;
	margin-left:100px;
	width:80%;
	height:150px;
	border:0px #FFFFFF solid;
	margin-left:60px;
	}
#tupianliebiao li{
	float:left;
 
	list-style:none;
 
	width:150px;
	height:100px;
	border:0px #FFFFFF solid;
	margin-right:46px;
	margin-top:30px;

	}


#tupianliebiao img{
	width:130px;
	height:auto;
	margin-top:-2px;
	}



.xiaodaohang{
	width:87%;
	float:right;
	margin-right:36px;
	}

.nav-level-1 {
    display: flex;

    padding: 0 20px;
    position: relative;
}

.nav-level-1 > li {
    list-style: none;
    position: relative;

}

.nav-level-1 > li > a {
    color: white;
    text-decoration: none;
    padding: 15px 25px;
    display: block;
    transition: 0.3s;
	font-size:16px;
}

.nav-level-1 > li > a:hover {
	color:#1b97b9;

}

/* 二级导航 */
.nav-level-2 {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;

    width: max-content;
    padding: 10px;
 
}

.nav-level-2.active {
    display: flex;
    gap: 15px;

}

.nav-level-2 li {
    list-style: none;
 	width:100px;
	height:30px;
	background:#2b2b2b;
	border-radius:10px;
	text-align:center;
	font-size:12px;
	line-height:30px;
}

.nav-level-2 a {
    color: #ddd;
    text-decoration: none;
    padding: 8px 12px;
    white-space: nowrap;
    transition: 0.3s;
}

.nav-level-2 a:hover {
    color: #fff;
    
}

/* 内容区域 */
.content {
    padding: 20px;
    margin-top: 10px;
 
    min-height: 300px;
	height:100%;
	border:0px #FFFFFF solid; 
}

.page {
    display: none;
}

.page.active {
    display: block;
    animation: fadeIn 0.3s;
 
}

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

#page1 audio{
	margin-left:400px;
	margin-top:400px;
	}



.suoluetushipin{
	
	}
.suoluetushipin ul{
	margin-left:-10px;
	width:100%;
	height:auto;
	border:0px #FFFFFF solid;
	}
.suoluetushipin ul li{
	width:500px;
	height:250px;
	border:1px #FFFFFF solid;
	list-style:none;
	float:left;
	margin-right:20px;
	margin-bottom:20px;

	}
.suoluetushipin ul li img{
	width:500px;
	height:250px;
 
 

	
	}
.suoluetushipin ul li a{
	text-decoration:none;
	color:#FFF;
 
	
	}
.suoluetushipin ul li h6{
	font-size:20px;
	margin-top:-60px;
	margin-left:30px;
	font-weight:400;
 
	}	

.suoluetushipin ul li img::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90%; /* 控制阴影高度 */
  background: linear-gradient(
    to top, 
    rgba(0, 0, 0, 0.6) 0%,   /* 底部阴影颜色 */
    rgba(0, 0, 0, 0) 100%   /* 向上渐隐 */
  );
  pointer-events: none; /* 允许点击穿透 */
}	

	
	
	
	






  .music-list {
            width: 96%;
			
            font-family: Arial, sans-serif;
        }

        .music-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #666;
            transition: background 0.3s;
			height:80px;
        }

        .music-item:hover {
            background: #262626;
        }

        .thumbnail img {
			margin-right:10px;
			margin-left:10px;
         
        }

        .play-btn {
            width: 30px;
            height: 30px;
            margin-right: 20px;
            cursor: pointer;
        }

        .song-info {
            flex: 1;
            min-width: 200px;
            margin-right: 20px;
        }

        .song-title {
            font-weight: bold;
            margin-bottom: 3px;
        }

        .song-artist {
            color: #FFF;
            font-size: 12px;
        }

        .duration {
            width: 70%;
            text-align: center;
            color: #FFF;
			font-size:12px;
        }

        .waveform {
            flex: 2;
            height: 30px;
            margin: 0 20px;
            background: linear-gradient(to bottom, #eee, #ddd);
            border-radius: 3px;
            position: relative;
            overflow: hidden;
        }

        .waveform::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                #4CAF50 0%, #4CAF50 30%,
                transparent 30%, transparent 100%);
            animation: waveform 2s infinite linear;
        }

        @keyframes waveform {
            0% { background-position: -100% 0; }
            100% { background-position: 200% 0; }
        }

        .share-btn {
            width: 100px;
            height: 30px;
			border:0px #FFFFFF solid;
            cursor: pointer;
            background: none;
			font-size:12px;
			color:#FFF;
        }

        .progress-container {
            width: 100%;
            height: 3px;
            background: #ddd;
            margin-top: 5px;
        }

        .progress-bar {
            height: 100%;
            background: #4CAF50;
            width: 0%;
            transition: width 0.1s;
        }
	 .fenxiang{
		 color:#FFF;
		 }

/*搜索框样式*/
#sousuo1{
	width:400px;
	height:50px;
	margin-top:30px;
	border-radius:20px;
	}
#sousuo2{
	width:60px;
	height:40px;
	}