@charset "utf-8";
body,div,p,ul,ol,li,a,span,input,h1,h2,h3,h4,h5,h6,textarea{margin: 0;padding: 0;list-style: none;font-weight: normal;}
html,body{font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;}
html{ }
body{width:100%;color: #333;font-size: 12px;background: #fff;position: relative;}
a{ text-decoration: none;color: #fff;-webkit-tap-highlight-color: transparent;}
img{ border:0;vertical-align:top;}
.fl{ float: left;}
.fr{ float: right;}
.clearfix:after{ display: block; content: ''; clear: both;}
.clearfix{ zoom: 1;}

.single_wrapper{ width: 100%;max-width: 750px;margin: 0 auto;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;}
.single_wrapper > div:last-child{ margin-bottom: 0;}

.topAppWrap{display: none;position: fixed;top:0;left:0;width:100%;height:1rem;background:rgba(0,0,0,0.7);padding:0.15rem 0.3rem;box-sizing:border-box;z-index:500;}
.blurBg{width:100%;height:4.6rem;overflow:hidden;position: absolute;top:0;left:0;z-index:-1;}
.blurBg img{width:100%;height:4.6rem;-webkit-filter:blur(30px);-moz-filter:blur(30px);filter:blur(30px);-ms-filter:blur(30px);}
.appLogoArea .logo{width:0.65rem;height:0.7rem;}
.appLogoArea .intro{padding-left:0.2rem;padding-top:0.04rem;}
.intro .title{color:#fff;font-size:0.26rem;line-height:0.35rem;}
.intro .recomTip{color:rgba(255,255,255,0.5);font-size:0.2rem;line-height:0.35rem;}
.goAppBtn{display: block;width: 1.5rem;height: 0.54rem;margin:0.07rem 0;line-height: 0.54rem;text-align: center;color: #fcba25;font-size: 0.24rem;position: relative;}
@media screen and (-webkit-min-device-pixel-ratio: 2){
    .goAppBtn:after{ content: ""; display: block; width: 200%; height: 200%; position: absolute; top: 0; left: 0; -webkit-transform: scale(0.5); -webkit-transform-origin: 0 0; -webkit-box-sizing: border-box; pointer-events: none; border: 1px solid #fcba25; border-radius: 50px; padding: 0;}
}
@media screen and (min-width: 321px) {
    .fav_item{ height:1.2rem;margin-bottom: 0.2rem;position:relative;}
    .fav_pic{ width: 1.2rem;height: 1.2rem;margin-right: 0.3rem;float:left;}
    .fav_pic img{ width:1.2rem;height:1.2rem;}
    .fav_text{ position:absolute;top:50%;left:1.5rem;-webkit-transform:translateY(-50%);transform:translateY(-50%);}

    .rec_item{ height:1.2rem;margin-bottom: 0.3rem;}
    .rec_info{ width: 4.5rem;height: 1.2rem;float:left;position:relative;}
    .midStage{ position: absolute;left:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
    .midStage .s_name{ line-height: 0.4rem;}
    .midStage .s_mark{ width: 100%;line-height: 0.4rem;}
    .rec_artist{ max-width: 2rem;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
    .rec_pic{ width: 2.1rem;height: 1.2rem;position: relative;float:left;margin-right:0.3rem;}
    .verSepline{width:1px;height:0.24rem;background:#999;margin:0.08rem 0.18rem;}
}

.song_container{ width: 100%;position: relative;}
.blur{ width: 100%;height: 8.06rem;position: relative;-webkit-transform:translate3D(0,0,0);transform:translate3D(0,0,0);filter: blur(30px);-webkit-filter:blur(30px);}
.blur_pic{ width: 100%; height: 100%;}
.blur_box{ position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: rgba(0,0,0,0.1);}
.song{ position: absolute;top: 1.4rem;width:100%;}
.song_msg{ width: 100%;}
.song_pic{ display: block;width: 4.5rem; height: 4.5rem;margin: 0 auto;position: relative;}
.song_pic img{ width: 100%; height: 100%;}
.playState{ position: absolute;top: 50%;left: 50%;-webkit-transform: translate3d(-50%,-50%,0);transform: translate3d(-50%,-50%,0);width: 1.2rem;height: 1.2rem;z-index: 10;}
.icon_play{background: url(//image.kuwo.cn/mpage/html5/2017/h5SharePage/single2017/icon_play.png) no-repeat;background-size: 100% 100%;}
.icon_pause{background: url(//image.kuwo.cn/mpage/html5/2017/h5SharePage/single2017/icon_pause1.png) no-repeat;background-size: 100% 100%;}

.lyric_msg{ display:none;width: 7.5rem;height: 5.9rem;line-height: 0.6rem;text-align: center; color: rgba(255,255,255,0.5);font-size: 0.28rem;overflow: hidden;}
.lyrics { width: 100%;height: 100%;margin: 0 auto;}
.lyrTex { width: 100%;height: 100%;margin: 0 auto;overflow: hidden;}
#llrcId { width: 100%;position: relative;padding:0 1rem;box-sizing:border-box;}
.lyric_now{ color: #fff;font-size: 0.32rem;}
.song_msg{width: 64%;margin:0 auto;overflow:hidden;}
.song_msg p {text-align: center;color: #fff;line-height:0.42rem;}
.artist,.duration{ line-height: 0.4rem;font-size: 12px;}
/*文字滚动*/
#hovertreemarquee{position:relative;padding-top:0.3rem;height:0.44rem;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;}
#hovertreemarquee div{position:absolute;top:0.3rem;left:0;width:100%;}
#hovertreemarquee div p{line-height: 0.44rem;font-size: 16px;font-weight:bold;}
#hide_songle_sname{display:none;}

.single_list{position: absolute;right:0.3rem;bottom:0.3rem;width:0.4rem;height:0.37rem;display:block;background:url(//image.kuwo.cn/mpage/html5/2017/h5SharePage/single2017/play_list_up.png) no-repeat;background-size:100% 100%;-webkit-tap-highlight-color: rgba(0,0,0,0); tap-highlight-color: rgba(0,0,0,0);z-index:105;}

.download{ width: 4.12rem; height: 0.8rem; background: #fcba25; border-radius: 0.5rem; position: absolute; bottom: -0.4rem; left: 50%; margin-left: -2.12rem;z-index:105;}
.icon_text{ position: absolute;  top: 50%;  left: 50%; width:1.76rem; margin-left:-1.08rem;margin-top:-0.18rem;padding-left: 0.44rem;  height: 0.36rem;  background: url(//image.kuwo.cn/mpage/html5/2017/h5SharePage/single2017/icon_download.png) no-repeat left center; background-size: 0.36rem 0.32rem;  line-height: 0.36rem;  font-size: 0.32rem; color: #fff;}

.song_favorite,.song_rec,.song_appbanner{ width: 100%;background: #fff;position: relative;z-index: 100;padding: 0 0.3rem;margin-bottom: 0.4rem;box-sizing: border-box;}
.song_favorite{ padding-top: 0.48rem;}
.s_title{ line-height: 0.92rem;color: #222;font-size: 0.32rem;font-weight: bold;}

.sepetateLine{width:100%;height:0.2rem;background:#f9f9f9;}

.fav_text span,.rec_info .s_name{ width: 100%;display: flex;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.s_name{ line-height: 0.44rem;color: #222;font-size: 0.32rem;}
.s_mark{ line-height: 0.36rem;color: #999;font-size: 0.24rem;}

.rec_title{ line-height: 1.04rem; color: #222;font-size: 0.32rem;font-weight: bold;}
.rec_pic{ width: 2.1rem;height: 1.2rem;position: relative;float:left;margin-right:0.3rem;}
.rec_pic img{ width: 2.1rem;height: 1.2rem;}
.rec_duration{ position: absolute;bottom: 0.1rem;right: 0.1rem;height: 0.3rem;line-height: 0.3rem;background: rgba(0,0,0,0.7);border-radius: 0.15rem;color: #fff;padding: 0 0.1rem;}
.rec_duration span{ display: block;font-size: 0.24rem;transform: scale(0.84);-webkit-transform: scale(0.84);transform-origin: center center;-webkit-transform-origin: center center;}
/*.rec_more{ width: 100%;line-height: 0.88rem;text-align: center;color: #222;font-size: 0.28rem;font-weight: bold;}*/

.appbanner_list{ padding-bottom: 0.9rem;}
.song_appbanner .s_title{ margin-bottom: 0.08rem;}
.appbanner_item{ width: 100%;height: 2.9rem;margin-bottom: 0.1rem;}
.appbanner_item img{ width: 100%;height: 100%;}
.cantOpenTipsBox {position: fixed;top:0;left:0;width: 100%;height: 100%;z-index:200;background: rgba(0,0,0,0.8);display: none}
.cantOpenTipsBox img {position: absolute;width: 3.31rem;right:0.45rem;top:0.57rem;}

.filterBg{display:none;position:absolute;top:0;bottom:0;width:100%;height:100%;overflow:hidden;background:rgba(0,0,0,0.7);z-index:600;}
.single_queue{ position: fixed;left: 0;bottom: 0;width: 100%;background: rgb(255,255,255);z-index:700;}
.single_queue h3{ width: 100%;height: 45px;line-height: 45px;font-size: 16px;text-align: center;color: #333;z-index: 200;}
.single_queue h3 span{font-size:12px;}
.queue_content{ overflow: hidden;position: relative;width: 100%;margin-top:45px;}
.single_playlist{ position: absolute;left: 0;top:0;z-index:800;width: 100%;overflow-y: auto;-webkit-overflow-scrolling : touch;overflow-scrolling : touch; }
.single_playlist li{ width:100%;color:#333;height: 45px;line-height: 45px;padding-left: 15px;box-sizing:border-box;position:relative;}
.single_playlist .single_sname{font-size:14px;}
.single_playlist .single_aname{font-size:12px;color:#666;}
.single_playlist li.playing span{ color: #1a90d7;}
.single_playlist li span{margin-right:5px;}
.single_playlist li span.playstate{display:none;width: 20px;height: 40px;background: url(//image.kuwo.cn/mpage/html5/2016/playing.png) no-repeat center center;background-size: 60%;margin-left: 5px;}
.single_wrapper.dialog-open { position: fixed; top:0;height:100%;overflow:hidden;}

#queue_title{ position: absolute;left: 0;top: 0;}
.queue_close{ width: 100%;height: 55px;line-height: 55px;text-align: center;color: #333;z-index: 200;position: absolute;left: 0;bottom: 0;font-size:0.32rem;}
.queue_close:after,.single_playlist li:after{content: ""; display: block; width: 200%; height: 200%; position: absolute; top: 0; left: 0; -webkit-transform: scale(0.5); -webkit-transform-origin: 0 0; -webkit-box-sizing: border-box; pointer-events: none; border-top: 1px solid #ebebeb;}
.hidebox{ width: 100%;height: 50px;}

.shadow{ position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.4);display: none;z-index: 800;}
.ispay{display: block;position:absolute;top:50%;left:50%;margin-left:-2.6rem;margin-top:-1.42rem;width:5.2rem;heihgt:2.85rem;background:#fff;font-size: 0.3rem;text-align: center;padding-top: 0.45rem;
    font-size:0.3rem;}
.ispay p{ line-height: 0.5rem;margin-bottom:0.26rem;color:#222;}
.ispay a{ display: block;width: 3.3rem;height:0.8rem;line-height:0.8rem;border-radius:1.6rem;background:#fcba25;margin: 0 auto 0.3rem;}
.close,.close2{ position: absolute;right: 0;top: 0;width: 0.7rem;height: 0.7rem;background: url(//image.kuwo.cn/mpage/html5/2016/close.png) no-repeat center center;background-size: 40%;}

.fmToast{display:none;width:100%;height:100%;overflow:hidden;background:rgba(0,0,0,0.5);position:fixed;top:0;left:0;z-index:501;}
.fmToast .innerContent{width:5.44rem;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:#fff;text-align:center;border-radius:0.08rem;}
.innerContent h3{color:#222;font-size:0.34rem;text-align:center;line-height:0.48rem;padding:0.4rem 0 0.22rem;}
.innerContent p{color:#666;font-size:0.3rem;line-height:0.4rem;text-align:center;padding-bottom:0.55rem;}
.innerContent a{display:block;width:100%;height:0.88rem;line-height:0.88rem;color:#007AFF;font-size:0.34rem;}
.innerContent .fmtipClose{width:0.51rem;height:0.51rem;background:url(//image.kuwo.cn/mpage/html5/2017/midautumn/toggleCloseBtn.png) no-repeat;position: absolute;top:0.3rem;right:0.3rem;background-size:100% 100%;}

@media screen and (max-width: 320px) {
    .header{ position: fixed;top: 0;left: 0;width: 100%;height: 1rem;background: rgba(0,0,0,0.25);z-index: 120;overflow: hidden;}
    .logo{ float: left;width: 16%;height: 100%;}
    .logo i{ display: block;width: 100%;height: 100%;background: url(//image.kuwo.cn/mpage/html5/2017/h5SharePage/single2017/icon_logo.png) no-repeat center center;background-size: 0.63rem 0.67rem;}
    .header_text{ float: left;width: 45%;height: 100%;}
    .header_text span{ display: block;}
    .s01{ line-height: 0.36rem;color: #fff;font-size: 0.26rem;padding-top: 0.16rem;}
    .s02{ line-height: 0.3rem;color: rgba(255,255,255,0.5);font-size: 0.24rem;transform: scale(0.9);-webkit-transform: scale(0.9);transform-origin: left center;-webkit-transform-origin:left center;}
    .header_btn{ float: right;width: 30%;height: 100%;position: relative;}
    .openapp{ position: absolute;top: 50%;left: 50%;-webkit-transform: translate3d(-50%,-50%,0);transform: translate3d(-50%,-50%,0);width: 1.5rem;height: 0.54rem;line-height: 0.54rem;text-align: center;color: #fcba25;font-size: 0.24rem;}
    .openapp:after{
        content: "";
        display: block;
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transform: scale(0.5);
        -webkit-transform-origin: 0 0;
        -webkit-box-sizing: border-box;
        pointer-events: none;
        border: 1px solid #fcba25;
        border-radius: 50px;
        padding:0;
    }
    /*.download{ position: absolute;left: 50%;bottom: -0.4rem;display:block;width: 4.1rem;height: 0.8rem;background: #fcba25;border-radius: 0.4rem;line-height: 0.8rem;text-align: center;margin-left:-2.05rem;z-index: 105;}*/
    /*.icon_download{ display: inline-block;width: 0.36rem;height: 0.32rem;background: url(//image.kuwo.cn/mpage/html5/2017/h5SharePage/single2017/icon_download.png) no-repeat;background-size: 100% 100%;margin-right: 0.1rem;}*/
    /*.icon_text{ display: inline-block;color: #fff;font-size: 0.34rem;width:1.75rem;}*/
    .fav_item{ height:1.2rem;margin-bottom: 0.2rem;position:relative;-webkit-tap-highlight-color: rgba(0,0,0,0);tap-highlight-color: rgba(0,0,0,0);}
    .fav_pic{ width: 1.2rem;height: 1.2rem;margin-right: 0.3rem;float:left;}
    .fav_pic img{ width:1.2rem;height:1.2rem;}
    .fav_text{ position:absolute;top:50%;left:1.5rem;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
    .rec_item{ display: block;margin-bottom: 0.4rem;overflow: hidden;-webkit-tap-highlight-color: rgba(0,0,0,0);tap-highlight-color: rgba(0,0,0,0);}
    .rec_item:last-child{ margin-bottom: 0;}
    .rec_info{ float: left;width: 4.2rem;height: 1.4rem;position:relative;}
    .midStage{ position: absolute;left:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
    .midStage .s_name{ line-height: 0.4rem;}
    .midStage .s_mark{ width: 100%;line-height: 0.4rem;}
    .rec_artist{ max-width: 2rem;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
    .verSepline{width:1px;height:0.24rem;background:#999;margin:0.08rem 0.18rem;}
    .rec_pic{ width: 2.1rem;height: 1.2rem;position: relative;float:left;margin-right:0.3rem;}
    .rec_pic img{ width: 2.1rem;height: 1.2rem;}
    .cantOpenTipsBox {position: fixed;top:0;left:0;width: 100%;height: 100%;z-index:200;background: rgba(0,0,0,0.8);display: none}
    .cantOpenTipsBox img {position: absolute;width: 3.31rem;right:0.45rem;top:0.57rem;}
    .queue_close:after,.single_playlist li:after{content: ""; display: block; width: 200%; height: 200%; position: absolute; top: 0; left: 0; -webkit-transform: scale(0.5); -webkit-transform-origin: 0 0; -webkit-box-sizing: border-box; pointer-events: none; border-top: 1px solid #ebebeb;}
}


@media ( min-width:750px ){
    html{ font-size: 100px !important;}
}