@charset "utf-8";

@media screen and (max-width:900px) {
	.header {
		display: none
	}

	#vd {
		opacity: .5
	}

	.btn {
		backdrop-filter: unset
	}

	.la,.lb,.li {
		display: block!important
	}

	.lb {
		width: 22px!important;
		height: 22px!important;
		margin: 0 8px!important;
		padding: 0!important
	}
	.li {
		width: 22px!important;
		height: 22px!important;
		margin: 0 8px!important;
		padding: 0!important
	}
	.lw {
		width: 22px!important;
		height: 22px!important;
		margin: 0 8px!important;
		padding: 0!important
	}

	.sheet-title-bar {
	    top: unset;
	    position: unset;
	    text-align: left;
	    line-height: 28px;
	    height: 28px;
	}

	.login-btn {
		padding: 2px 2px!important;
		border-radius: 4px!important;
		margin: 0 2px!important;
		display: inline-block!important;
		float: unset!important;
		background: rgba(235,235,235,.05)
	}

	.custom {
		padding: 0 8px!important;
		width: max-content!important;
		background: rgba(255,255,255,.05)!important;
		height: 18px!important;
		border-radius: 4px!important
	}

	.center {
		top: 0;
		bottom: 80px
	}

	.fotinfo {
		display: none
	}

	.fu1 {
		display: none
	}

	.btn[data-action=player] {
		display: flex
	}

	.btn-bar {
		height: 35px;
		right: 0;
		z-index: 999
	}

	.btn-box {
		background-color: rgba(255,255,255,.1);
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		backdrop-filter: blur(12px)
	}

	.active {
		background: rgba(255,255,255,.2)!important
	}

	.gdid {
		color: #fff;
		font-size: 12px;
		text-align: center;
		line-height: 35px;
		float: left;
		margin-left: -5px;
		width: 20%
	}

	.btn {
		margin: 0;
		padding: 0;
		width: 50%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		float: left;
		border: none;
		text-align: center;
		color: #fff;
		border-radius: 0;
		background: unset
	}

	.login-btn {
		background: unset
	}

	.btn:hover {
		border: none;
		color: #fff
	}

	.btn-box .active:after {
		content: '';
		display: block;
		margin-top: -3px;
		border-radius: 0
	}

	.uidbutton:hover {
		border: 0!important
	}

	.data-box {
		top: 60px
	}

	#sheet {
		top: 6px
	}

	.data-area {
		top: 34px
	}

	.data-area {
		right: 0
	}

	.list-menu {
		display: none!important
	}

	.sheetlistname {
		margin-top: -55px
	}

	.music-name-cult {
		padding-right: 0!important
	}

	.music-album {
		margin-right: 30px
	}

	.list-mobile-menu {
	    position: absolute;
	    display: block;
	    width: 16px;
	    height: 30px;
	    background-image: url(c.svg);
	    background-position: center;
	    background-repeat: no-repeat;
	    background-size: contain;
	    right: 0;
	    top: 50%;
	    filter: brightness(1.2);
	    transform: translateY(-50%);
	    z-index: 2;
	}

	.list-head {
		max-width: calc(100% - 20px)
	}

	.con-btn {
		width: 120px
	}

	.progress {
		width: auto;
		margin-left: 134px;
		margin-right: 20px;
		height: 100%;
		position: relative
	}

	.vol {
		display: none
	}

	.player {
		display: none;
		width: 100%
	}

	.lyric-name {
		margin-top: 220px;
	}

	.song-name {
		font-size: 18px;
	}

	.full-player .song-name {
		font-size: 0px !important;
	}

	.artist-name {
		font-size: 12px;
	}

	.full-player .artist-name {
		font-size: 16px;
	}

	.cover {
		width: 100px;
		height: 180px;
		margin-top: 45px
	}

	.player-brand {
		width: 100%;
	}

	.brand-name2 {
		font-size: 14px;
		letter-spacing: 1px;
		white-space: nowrap;
	}

	.mc {
		width: 100%;
		height: 100%;
		margin-top: 0
	}

	.mc:after {
		width: 170%;
		height: 170%
	}

	.music-cover {
		width: 120px;
		height: 120px;
		border: 0px solid rgba(255,255,255,.1)
	}

	.full-player .music-cover {
		width: 150px;
		height: 150px;
		margin-top: 30px
	}

	.full-player .lyric-name {
		margin-top: 20px;
		font-size:18px !important;
		z-index: 2;
	}

	.lyric {
		top: 310px;
		padding: 10px 0
	}

	#lyric .lplaying {
		font-size: 16px!important;
		letter-spacing: 0!important
	}

	#lyric>li {
		line-height: 2;
		font-size: 16px
	}

	.full-player #lyric .lplaying {
		font-size: clamp(18px, 6vw, 36px) !important;
	}
	.full-player .lplaying .tlyric {
		font-size: clamp(16px, 4vw, 28px) !important;
	}

	/* 移动端全屏歌词 - 隐藏封面，居中显示 */
	.full-player {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 20px !important;
		gap: 20px !important;
	}

	.full-player .cover {
		display: none !important;
	}

	.full-player .lyric {
		flex: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		text-align: center !important;
	}

	.full-player .lyric-info {
		text-align: center !important;
		margin-bottom: 20px !important;
	}

	.full-player .lyric-song-name {
		font-size: 24px !important;
	}

	.full-player .lyric-artist-name {
		font-size: 14px !important;
	}

	.full-player #lyric > li {
		text-align: center !important;
	}

	.full-player .lyric-active,
	.full-player #lyric-full,
	.full-player .tran,
	.full-player #music-info {
		z-index: 100 !important;
	}

	.full-player .lplaying>.tlyric {
		letter-spacing: 0
	}

	#lyric>li .tlyric {
	}

	.sheet-item {
		width: calc(100% / 10 - 16px)
	}

	.st-panel {
		width: 94vw;
		max-height: 78vh;
		border-radius: 14px;
	}

	.st-body {
		max-height: calc(78vh - 56px);
	}

	.st-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.st-btn {
		padding: 7px 12px;
		font-size: 12px;
	}

	.st-pills {
		gap: 5px;
	}

	.st-pill {
		padding: 4px 10px;
		font-size: 11px;
	}

	.st-eq-vrange {
		display: none;
	}
	.st-eq-track {
		height: 80px;
		width: 22px;
	}

	.st-eq-hz {
		font-size: 8px;
	}

	.st-eq-db {
		font-size: 9px;
	}

	.st-key-row {
		gap: 8px;
	}

	.st-key-btn {
		width: 26px;
		height: 26px;
	}

	.footer {
		bottom: 0
	}

	.btn-bar,.container,.data-area,.footer .container,.player {
		background: unset;
		border-radius: 0
	}

	.active:before {
		background: rgba(255,255,255,.3);
		backdrop-filter: blur(2px)
	}
}

@media screen and (max-width:700px) {
	.sheetlistname {
	}

	.listname {
		margin: 0 4px;
		width: 180px;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis
	}

	.sheetplay {
		margin: 0 5px
	}

	.sheet-item {
		width: calc(100% / 7 - 16px)
	}
}

@media screen and (max-width:600px) {
	.sheet-item {
		width: calc(100% / 6 - 16px)
	}

	.lyric-name {
		font-size: 18px;
		line-height: 1.5;
	}
	.artist-name {
		font-size: 16px;
		opacity: 0.5;
	}
	.full-player .artist-name {
		font-size: 48px;
		opacity: 0.1;
		position: relative;
		top: 0px;
	}

	#search-area {
		padding: 25px 8px
	}

	.layui-layer {
		width: 350px
	}
}

@media screen and (max-width:620px) {
	.music-album {
		display: none
	}

	.auth-name {
		width: 32%;
        padding-right:22px;
		box-sizing: border-box
	}

	.music-name {
		margin-right: 32%
	}

	.linkbutton {
		display: none
	}

	body,html {
		background-color: #000
	}
}

@media screen and (max-width:540px) {
	.sheet-item {
		width: calc(100% / 6 - 10px);
		margin: 5px 5px
	}

	.data-box {
		left: 5px;
		right: 5px
	}

	.sheet-name {
		max-width: 100%
	}

	.footer {
		height: 80px
	}

	.footer .container {
		display: flex;
		flex-direction: column-reverse
	}

	.con-btn,.progress {
		height: 50px;
		width: 100%
	}

	.con-btn {
		margin: 0;        
        margin-bottom: 6px;
		width: 100%;
		transform: scale(.9);
	}

	.progress {
		height: 30px;
		margin: 0
	}

	.progress-box {
		height: 30px;
		top: 0;
		right: 50px;
		margin: 0 10px
	}

	.btn-order {
		right: -5px
	}
	.btn-prev{
		left:20%;
	}
    .btn-next {
		right:20%;
	}
	.btn-play {
		left:49%;
		transform: translateX(0%);
	}
	.vol {
		display: block;
		width: 20%;
		height: 50px;
		position: absolute;
		transform: scale(.9);
		left:-20px;
        margin-bottom: 6px;
	}
    .volume {
	    display:none;	
	}
	.mkpgb-ttime,.mkpgb-ztime {
		margin-top: 7px;
        font-size:12px;
	}

	.list-head {
		max-width: calc(100% - 12px)
	}
}

@media screen and (max-width:350px) {
	.sheet-item {
		width: 50%
	}
}