@charset "utf-8";

.bg{ width: 100%; height: 100%;  background:#030303 url(../images/wsbg.webp) no-repeat center top; background-size: 100vw 55vh; left: 0; position: fixed; top: 0; z-index:1; filter: blur(35px);}


.songs ul{ margin:0 -10px;}
.songs ul li{ width:12.5%; padding:0 10px; margin-bottom: 40px;}
.songs ul li dl{ padding-bottom:100%; border-radius:5px;}
.songs ul li h3{ font-size: 15px; color:#fff; font-family: Roboto, Noto Naskh Arabic UI, Arial, sans-serif; font-weight: 500; margin-top: 15px;}
.songs ul li p{ height:36px; font-size: 14px; line-height: 18px; color:rgba(255, 255, 255, 0.7); overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 5px;}

.songslist{margin-bottom: 30px;}
.songslist .biaoti{ border-bottom:#222 solid 1px; margin-bottom: 10px;}
.songslist ul.biaoti li .n{ font-size: 14px;}
.songslist ul.biaoti li .d{ font-size: 14px;}
.songslist ul li a{ font-size: 14px; color:#fff; padding:8px 12px; border-radius:6px; display:flex; align-items:center;}
.songslist ul li a:hover{ background:#111;}
.songslist ul li .n{ width:30px; font-size: 12px;  color:#aaa; font-family: Roboto, Noto Naskh Arabic UI, Arial, sans-serif;font-weight:700; }
.songslist ul li .pic{ width:38px;}
.songslist ul li .pic dl{ padding-bottom:100%; border-radius:5px;}
.songslist ul li .con{ width:calc(100% - 68px); display:flex;}
.songslist ul li .t{ width:50%; padding-left:10px; display:flex; align-items:center;}
.songslist ul li .t h3{ font-size: 14px; font-weight: normal; margin-right: 20px;}
.songslist ul li .t span { font-size: 9px; color: #fb3839; line-height: 1; border: #7b262b solid 1px; border-radius: 4px; padding: 2px 3px; margin-right: 3px; white-space: nowrap; }
.songslist ul li .t span.bz{ border:#7b5c2d solid 1px; color:#bd8f37;}
.songslist ul li .s{ font-size: 13px; }
.songslist ul li .d{ width:68px; margin-left: auto; font-size: 12px; color:#aaa;}

.songView{ padding-top: 20px; margin-bottom: 35px;}
.songView .pic{ width:260px;}
.songView .pic dl{ padding-bottom:100%; border-radius:10px;}
.songView .con{ width:calc(100% - 260px); padding-left: 70px;}
.songView .con .tit{ margin-bottom: 15px;}
.songView .con .tit h1{ font-size: 30px; line-height:1.2;}
.songView .con .txt { font-size: 14px; color:#fff;}
.songView .con .txt a{ color:#fff;}
.songView .con .txt a:hover{ text-decoration: underline;}
.songView .con .btnBox{ margin-top: 30px; font-family: HarmonyOS_Regular, sans-serif !important; }
.songView .con .btnBox a{ background: #d60017; color: #fff;  border-radius: 20px; padding: 0 22px; line-height:36px; font-size: 13px; display: inline-block; margin-right: 10px; transition: all 0.4s ease;}
.songView .con .btnBox a:hover{ background: #cb0016;}
.songView .con .btnBox .audition{ display: flex; align-items: center; font-size: 12px; background:rgba(255,255,255,0.3);  padding: 0 5px; color: #fff; line-height:24px;  border-radius: 40px; cursor: pointer; transition: all 0.4s ease; }
.songView .con .btnBox .audition:hover{  background: #cb0016;}
.songView .con .btnBox .audition svg{ margin-right: 5px;}

/* 弹出框 */
.tccBox{width: 100%;height: 100%; position: fixed;top: 0;left: 0;z-index: 999999; display: none;}
.tccBox .black{position: absolute;left: 0;top: 0;width: 100%;height: 100%; background-color: rgba(0, 0, 0, .8); backdrop-filter: blur(3px);}
.tccBox .BoxCon{padding: 20px;position: absolute;left:50%;top:50%;box-sizing:border-box;transform: translate(-50%,-50%); z-index: 11; color: #999;}
.tccBox .BoxCon .off{ width: 20px; height: 20px; background:url(../images/off.png) no-repeat center; background-size: contain; position: absolute; top: 50px; right:50px;  cursor: pointer;}
.tccBox .BoxCon .con{ width: 420px; background-color: #f88a43;
    background-image: -webkit-gradient(linear, left top, right top, from(#f88a43), to(#151ae2));
    background-image: -webkit-linear-gradient(top, #f88a43, #151ae2);
    background-image: -o-linear-gradient(bottom, #f88a43 0, #151ae2 100%);
    background-image: linear-gradient(90deg, #f88a43, #151ae2);
    transition: all .3s; border-radius: 30px; padding:50px;}
.tccBox .BoxCon .con .picPlay{ position: relative;}
.tccBox .BoxCon .con .musicCover{ width: 260px; height: 260px; border-radius: 260px; margin: 0 auto; overflow: hidden; background: -webkit-linear-gradient(80deg, #270404 30%, #753d47);
    box-shadow: 0 0 4px 0 #000; position: relative;}
.tccBox .BoxCon .con .musicCover img{ border-radius: 160px; padding: 10px;}
/* .tccBox .BoxCon .con .musicCover::after{ content: ""; width:30px; height:30px; background: #0d1f18; border:#393d53 solid 8px; border-radius: 50px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 11;} */
.tccBox .BoxCon .con #playPause{ width: 70px; height: 70px; border-radius: 50px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 111; cursor: pointer;}
.tccBox .BoxCon .con .icon-play{ background:rgba(0, 0, 0, .8) url(../images/play.png) no-repeat 18px center; background-size: 36px;}
.tccBox .BoxCon .con .icon-pause{ background:rgba(0, 0, 0, .8) url(../images/pause.png) no-repeat center; background-size: 34px;}
.tccBox .BoxCon .con .musicTitle{ text-align: center; color: #fff; font-size: 14px; margin: 20px;}

/* 进度条样式 */
.a-progress { width: 100%; color: #fff; background-color: transparent; border-radius: 10px; margin-bottom: 10px; font-size: 12px;}
.pgs-total { width: 100%; height: 16px; background-color: transparent; border-radius: 10px; position: relative; margin: 0 10px; }
.a-progress .pgs-total:after { content: ''; position: absolute; left: 0; right: 0; top: 7px; bottom: 7px; background-color: #bbbbbb; border-radius: 10px; z-index: 1; }
.a-progress .pgs-total .pgs-play:before { content: ''; position: absolute; top: 7px; bottom: 7px; left: 0; right: 0; background-color: #42b680; border-radius: 10px; z-index: 2;}
.a-progress .pgs-total .pgs-play { height: 100%; position: relative; border-radius: 10px;}
.a-progress .pgs-total .pgs-play:after{ content:""; width:10px; height:10px; background: #f5d253; border-radius:10px; position: absolute; right:-5px; top:3px; z-index:11;}

.musicCover { animation: rotateAni 10s infinite linear; animation-play-state: paused; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; }

@keyframes openEye {
    0%,50% {
        opacity: 1;
    }
    51% {
        opacity: 0;
    }
    52%,55% {
        opacity: 1;
    }
    56% {
        opacity: 0;
    }
    57% ,100%{
        opacity: 1;
    }
}

@keyframes smileEye {
    0%,50% {
        opacity: 0;
    }
    51% {
        opacity: 1;
    }
    52%,55% {
        opacity: 0;
    }
    56% {
        opacity: 1;
    }
    57% ,100%{
        opacity: 0;
    }
}

@keyframes rotateAni {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@media (max-width: 1700px) {

}

@media (max-width: 1600px) {
    
    
    
}

@media (max-width: 1520px) {

}

@media (max-width: 1500px) {

}

@media (max-width: 1442px) {
    
    .songs ul li { width: 16.666%; margin-bottom: 28px;}
    .songView .pic { width: 238px;}
    .songView .con { width: calc(100% - 238px);}
    
}

@media (max-width: 1370px) {

}

@media (max-width: 1300px) {

}

@media (max-width: 1200px) {
    .songs ul li { width: 25%;}
    .songView .pic { width: 180px;}
    .songView .con { width: calc(100% - 180px); padding-left: 30px;}
    .songView .con .tit h1{ font-size: 24px;}
}

@media screen and (max-width:750px){
    .songs ul{ margin:0 -6px;}
    .songs ul li { width: 33.33%; padding:0 6px; margin-bottom: 15px;}
    .songs ul li h3{ font-size: 14px;  margin-top: 10px;}
    .songs ul li p{ height: 30px; line-height: 15px; font-size: 12px; margin-top: 5px;}
    
    .songslist .biaoti li .s{ display:none;}
    .songslist ul li a{ padding:6px 0;}
    .songslist ul li a:hover { background: none;}
    .songslist ul li .pic{ width:50px;}
    .songslist ul li .con{ display:block; width: calc(100% - 50px);}
    .songslist ul li .t{ width:100%;}
    .songslist ul li .t h3{ margin-right: 10px;}
    .songslist ul li .s{ padding-left:10px; font-size: 12px; color:#888;}
    .songslist ul li .d{ display:none;}
    
    .songView{ display: block; padding-top: 0;}
    .songView .pic{ margin:0 auto 20px;}
    .songView .con { width: 100%; padding-left: 0; text-align: center;}
    .songView .con .txt{ font-size: 12px;}
    .songView .con .tit h1{ font-size: 18px;}
    .songView .con .btnBox{ flex-wrap:wrap;}
    .songView .con .btnBox a{ width:100%; margin-bottom: 6px; margin-right: 0;}
    .songView .con .btnBox .audition{ width:100%; justify-content:center;}

}