@charset "utf-8";
*{touch-action: pan-y;}
html{width: 100%; height: 100%; overflow: hidden;}
body{
    width: 100%; 
    height: 100%; 
    font: 14px/1.5 Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;
    overflow:auto; /* qwen*/
}
#main{width: 100%; height: 100%; position: relative; margin: 0 auto;}
#musicList{width: 100%; height: 100%; background: url(../imgMc/bg2.jpg) no-repeat; background-size: cover;}
#musicList .list_title{
    width: 100%;
    height: 40px;
    background: rgba(41, 171, 226, 0.6);
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    color: white;
    position: absolute;
    top: 0;
}
#musicList .list_tip{
    width: 30px;
    height: 30px;
    background: url(../imgMc/jzwxfw.png) no-repeat;
    background-size: cover;
    position: absolute;
    /* right: 25px; */
    left: 25px;
    top: 5px;
}
#musicList .list_content{width: 100%; position: absolute; top: 40px; bottom: 65px; overflow: hidden;} 
#musicList .list_content ul{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate3d(0,0,0);
}
#musicList .list_content ul li{
    width: 100%;
    height: 60px;
    background: rgb(26, 26, 26, 0.6);
    border-bottom: 1px #999999 solid;
    box-sizing: border-box;
}
#musicList .list_content ul li.active{border-left: 5px #29abe2 solid;}
#musicList .list_audio{
    width: 100%;
    height: 65px;
    background: url(../imgMc/list_audioBg.png) repeat-x;
    position: absolute;
    bottom: 0;
}
#musicList .list_audioImg{
    width: 50px;
    border-radius: 50%;
    float: left;
    margin: 7px 0 0 15px;
}
#musicList .list_audioImg.move{ animation:4s linear infinite audioImgMove; -webkit-animation:4s linear infinite audioImgMove;}
@keyframes audioImgMove{
	0%{ transform:rotate(0deg);}
	100%{ transform:rotate(360deg);}
}
@-webkit-keyframes audioImgMove{
	0%{ -webkit-transform:rotate(0deg);}
	100%{ -webkit-transform:rotate(360deg);}
}
#musicList .list_audioText{float: left;}
#musicList .list_audioBtn{
    float:right;
    width: 32px;
    height: 32px;
    background: url(../imgMc/list_audioPlay.png) no-repeat;
    background-size: cover;
    margin: 15px 15px 0 0;
    display: none;
}

#loading{width:100%;
    height:100%;
    background:black;
    position:absolute;
    left:0;
    top:0;
    z-index:20;
    overflow:hidden;
}
#loading .content1 ,
#loading .content2{
    width:30px;
    height:30px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-15px;
}
#loading .content1 div ,
#loading .content2 div{
    width:8px;
    height:8px;
    background:white;
    position:absolute;
    border-radius:50%;
    animation:2s linear infinite loadingMove;
    -webkit-animation:2s linear infinite loadingMove;
}
#loading .content1 .arc1 , #loading .content2 .arc1{ left:0; top:0;}
#loading .content1 .arc2 , #loading .content2 .arc2{ right:0; top:0;}
#loading .content1 .arc3 , #loading .content2 .arc3{ right:0; bottom:0;}
#loading .content1 .arc4 , #loading .content2 .arc4{ left:0; bottom:0;}
#loading .content2{ transform:rotate(45deg); -webkit-transform:rotate(45deg);}
@keyframes loadingMove{
	0%{ transform:scale(1);}
	50%{ transform:scale(0);}
	100%{ transform:scale(1);}
}
@-webkit-keyframes loadingMove{
	0%{ -webkit-transform:scale(1);}
	50%{ -webkit-transform:scale(0);}
	100%{ -webkit-transform:scale(1);}
}
#loading .content1 .arc1{ animation-delay:-0.1s;}
#loading .content2 .arc1{ animation-delay:-0.3s;}
#loading .content1 .arc2{ animation-delay:-0.5s;}
#loading .content2 .arc2{ animation-delay:-0.7s;}
#loading .content1 .arc3{ animation-delay:-0.9s;}
#loading .content2 .arc3{ animation-delay:-1.1s;}
#loading .content1 .arc4{ animation-delay:-1.3s;}
#loading .content2 .arc4{ animation-delay:-1.5s;}

.title{color: white; font-size: 15px; padding: 10px 0 0 20px;}
.name{color: #b3b3b3; font-size: 13px; padding: 2px 0 0 20px;}
#musicDetails{width: 100%;
    height: 100%;
    background: url(../imgMc/detailsBg2.jpg) no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background-position: bottom;
    /* overflow: hidden; */
}
#musicList .list_title{
    width: 100%;
    height: 40px;
    background: rgba(12, 79, 232, 0.6);
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    color: white;
    position: absolute;
    top: 0;
}
#musicDetails .details_name span{font-size: 12px;}
#musicDetails .details_tip{
    width:19px; height:10px;
    background:url(../imgMc/details_arrow.png) no-repeat;
    background-size:cover;
    position:absolute;
    right:30px;
    top:15px;
}
#musicDetails .details_title{
    width: 100%;
    height: 40px;
    background: rgba(41, 171, 226, 0.6);
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    color: white;
    position: absolute;
    top: 0;
}
#musicDetails .details_lyric{
    width: 100%; 
    position: absolute; 
    top: 50px; 
    bottom: 150px; 
    overflow: hidden; 
    transition:.5s; 
    -webkit-transition:.5s;
}
#musicDetails .details_lyric ul{
    width: 100%; 
    text-align: center; 
    color: rgb(179, 177, 177); 
    font-size: 14px; 
    position: absolute; 
    top: 0; left: 0; 
    transition: .5s; 
    -webkit-transition: .5s;
}
#musicDetails .details_lyric li{
    margin-top: 30px; 
    height: 20px;
    line-height: 20px;
    transition: 0.2s;
}
#musicDetails .details_lyric li.active{
    color: rgb(5, 250, 234);
    transform: scale(1.3);
}
#musicDetails .details_audio{ 
    width:100%; height:150px; 
    position:absolute; 
    bottom:0; 
    transition:.5s; 
    -webkit-transition:.5s;
}
#musicDetails .details_audioAll{ width:200px; margin:20px auto; position:relative;}
#musicDetails .details_audioPro{ width:100%; height:2px; background:white;}
#musicDetails .details_audioProUp{ 
    width:0; height:2px; 
    background:#29abe2; 
    position: absolute; 
    left: 0; top: 0;
}
#musicDetails .details_audioProBar{ 
    width:15px; 
    height:15px; 
    background:#29abe2; 
    border-radius: 50%; 
    position: absolute; 
    left: 0; 
    top: 0; 
    margin: -7px;
}
#musicDetails .details_nowTime{
    font-size: 12px; 
    color: #b3b3b3; 
    position: absolute; 
    top: -8px; 
    left: -40px;
}
#musicDetails .details_allTime{
    font-size: 12px; 
    color: #b3b3b3; 
    position: absolute; 
    top: -8px; 
    right: -40px;
}
#musicDetails .details_play{
    width:55px; 
    height:55px; 
    background:url(../imgMc/details_play.png) no-repeat; 
    background-size:cover; 
    position:absolute; 
    left:50%; 
    margin-left:-27px; 
    top:30px;
}
#musicDetails .details_prev{
    width:37px; 
    height:37px; 
    background:url(../imgMc/details_prev.png) no-repeat; 
    background-size:cover;
    position:absolute; 
    left:10px; 
    top:37px;
}
#musicDetails .details_next{
    width:37px; height:37px; 
    background:url(../imgMc/details_next.png) no-repeat; 
    background-size:cover; 
    position:absolute; 
    right:10px; 
    top:37px;
}

#musicDetails .details_message{
    width:80%; 
    position:absolute; 
    top:60px; 
    bottom:50px; 
    margin-left:9%; 
    color: #ffffff;
    transition:.5s; 
    -webkit-transition:.5s;
    z-index: 999; /*qwen*/
}
#musicDetails #username{
    margin-bottom: 15px;
    border:1px solid rgb(5, 250, 234);
}
#musicDetails .details_message textarea{  
    width:100%; 
    height:100px; 
    background:rgb(26, 26, 26, 0.2); 
    border-radius:5px; 
    color: white;
    margin-bottom: 15px;
    padding: 5px;
    border:1px solid rgb(5, 250, 234);
}
::-webkit-input-placeholder{ color:rgba(197, 188, 188, 0.8);}
::-moz-input-placeholder{ color:rgba(197, 188, 188, 0.8);}
#musicDetails .details_message input{ 
    width:100%; 
    height:50px; 
    color:white; 
    background:rgb(26, 26, 26, 0.2);
    border-radius:5px; 
    padding: 5px;
    /* border:none; */
    border:1px solid rgb(5, 250, 234);
    z-index: 9999;
}
#detailsMessageBtn{
    margin: 0 2%;
}
/* #musicDetails .details_message ul{ width:100%; font-size:12px;} */
#musicDetails .details_message ul{ width:100%;}
#musicDetails .details_message li{ 
    background:rgba(26,26,26,0.5); 
    border-radius:5px; 
    padding:10px; 
    color:white; 
    float:left; 
    clear:both; 
    margin-top:10px; 
    transition:1s; 
    -webkit-transition:1s;
}

#musicDetails .details_btn{
    width: 100%; 
    position: absolute; 
    bottom: 10px; 
    text-align: center;
}
#musicDetails .details_btn li{
    width: 7px; 
    height: 7px; 
    background: rgba(6, 245, 229, 0.6); 
    border-radius: 5px; 
    display: inline-block; 
    margin: 3px;
}
#musicDetails .details_btn li.active{width: 21px;}

/*qwen----------------*/
* {
    touch-action: pan-y;
}

/* 特别针对输入框 */
#musicDetails #username,
#musicDetails .details_message textarea,
#musicDetails .details_message input {
    touch-action: auto; /* 修改为 auto */
}