/* CSS Document */
{margin:0;padding:0;}
body{
	background-color:#000;
	color:#FFF;
	}
body {
  font-family: 'Noto Sans SC', 'Source Han Sans CN', -apple-system, BlinkMacSystemFont, 
               'Segoe UI', Roboto, 'Microsoft YaHei', sans-serif;
}


.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;
	}
.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{
	background:#FF0;
	color:#000;
	}
.shangdaohang{
	width:87%;
	height:100px;
	border:1px #000000 solid;
	margin-left:290px;

	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;
	text-align:right;
	line-height:40px;
	}
.shangdaohangyou ul{
	margin-top:-45px;
	}
.shangdaohangyou ul li a{
	color:#FFF;
	text-decoration:none;
	font-size:13px;
	}
#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%;
	height:750px;
	border:0px #FFFFFF solid;
	margin-left:290px;
	}
#mianbaoxie{
	display:block;
	font-size:16px;
	color:#FFF;
 
	}
#mianbaoxie a{
	color:#FFF;
	text-decoration:none;
	}


.zuoshipin1{
	width:59%;
	height:750px;
	border:1px #000000 solid;
	float:left;
	
	
	}
.zuoshipin2{
	width:30%;
	height:700px;
	border:1px #000000 solid;
	margin-left:62%;

	}
.zuoshipin3{
	background:#252729;	
	width:90%;
	height:640px;
	padding:30px;
	margin-top:25px;
	margin-left:-40px;
	
	}	

#shipin000{
	width:1280px;
	height:720px;
	margin-top:10px;
	margin-left:-30px;
	}
.zuoshipin h6{
	font-size:30px;
	margin-top:10px;

	}
#zuopinzuozhe{
	font-size:14px;
	margin-top:-40px;
	display:block;

	}
.zuoshipin p{
	font-size:14px;
	width:600px;
 
 
 
	 
	}
#zixun01{
	width:170px;
	height:40px;
	border:1px #FFFFFF solid;
	display:block;

	 
	line-height:40px;
	text-align:center;
	text-decoration:none;
	color:#000;
	background:#FF0;
	border-radius:20px;
	font-size:14px;
	margin-top:10px;

	}
#zixun01:hover{
	background:#FF9;
	}
.zuoshipin ul{
	width:96%;
	height:200px;
	border:1px #252729 solid;
	margin-left:-45px;
	 

	}
.zuoshipin ul li{
	width:100px;
	height:30px;
	border:1px #FFFFFF solid;
	list-style:none;
	float:left;
	border-radius:20px;
	margin-bottom:10px;
	margin-left:10px;
	text-align:center;
	line-height:30px;
	font-size:12px;
	}
.zuoshipin ul li a{
	color:#FFF;
	text-decoration:none;
	}
































.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:14px;
}

.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:-70px;
	width:100%;
	height:1500px;
	border:0px #FFFFFF solid;
	}
.suoluetushipin ul li{
	list-style:none;
	float:left;
	margin-left:15px;
	margin-bottom:15px;

	}
.suoluetushipin ul li img{
	}
#suoluetu01{
	width:500px;
	height:265px;
	}
#suoluetu02{
	width:500px;
	height:265px;
	}
#suoluetu03{
	width:148px;
	height:265px;
	}
#suoluetu04{
	width:500px;
	height:265px;
	}
#suoluetu05{
	width:390px;
	height:265px;
	}	
#suoluetu06{
	width:px;
	height:265px;
	}	
#suoluetu07{
	width:px;
	height:265px;
	}	
#suoluetu08{
	width:px;
	height:265px;
	}		
#suoluetu09{
	width:px;
	height:265px;
	}		
#suoluetu10{
	width:px;
	height:265px;
	}		
#suoluetu11{
	width:px;
	height:265px;
	}		
#suoluetu12{
	width:px;
	height:265px;
	}		
#suoluetu13{
	width:400px;
	height:265px;
	}		
#suoluetu14{
	width:px;
	height:265px;
	}
		
#suoluetu16{
	width:160px;
	height:265px;
	}	
	
	
	
	
	
	
	
	
	
	

.suoluetushipin1::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; /* 允许点击穿透 */
}	



.suoluetushipin ul li h6{
	position:absolute;
	font-size:30px;
	font-weight:400;
	width:340px;
	margin-top:-100px;
	margin-left:20px;
	font-size:16px;
	
	}
.suoluetushipin ul li p{
	font-size:14px;
	position:absolute;
	margin-top:-50px;
		margin-left:20px;
	}
.suoluetushipin ul li img{
 
	}


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

        .music-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #eee;
            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;
	}