@font-face{ font-family: "AvenirLTStd-Light"; src: url('../fonts/AvenirLTStd-Light.otf')}	
@font-face{ font-family: "AvenirLTStd-Medium"; src: url('../fonts/AvenirLTStd-Medium.otf')}
@font-face{ font-family: "AvenirLTStd-Black"; src: url('../fonts/AvenirLTStd-Black.otf')}
*{ margin:0; padding:0;}
html{ width: 100%;}
img{ display:block; border:none; }
ul>li{ list-style:none} 
a{ text-decoration: none; }
a,span,i,small,b{ display:inline-block}
h1,h2,h3,h4,h5,h6,b{  font-weight: normal;}
strong{ font-weight: 700px }
iframe{ width:100%; margin: 0 auto; border: none;}
p{ text-align: justify;}
audio{ display:none}
input,button{ appearance: none; }
button{ border: none; }
body{ font-size: 14px; color: #555555; font-family: "AvenirLTStd-Light","PingFangSC-Light","Microsoft YaHei",Helvetica,sans-serif; }
::-webkit-scrollbar {  width: 8px;  background-color: #fff;  }
::-webkit-scrollbar-thumb { width: 8px; background-color: #d8d8d8; border-radius: 16px; }  

.mac .bolder{ font-family: "AvenirLTStd-Medium","PingFangSC-Medium","Microsoft YaHei",Helvetica,sans-serif; }
.windows .bolder{ font-weight: bolder; font-family: "AvenirLTStd-Medium","Microsoft YaHei",Helvetica,sans-serif; }
.fc000{ color: #000 }
.fcfff{ color: #fff }
.fc999{ color: #999 }
.fc777{ color: #777 }
.fc555{ color: #555 }
.active{ color: #FE5521 }
.fcmaj{ color: #FE5521} /*背景颜色*/
.fl{ float: left; }
.fr{ float: right; }
.goto{ cursor: pointer; }
.mb60{ margin-bottom: 60px }
.mt60{ margin-top: 60px }
.mt120{ margin-top: 120px }
.ml60{ margin-left: 60px; }
.hide{ display: none }
.hidden{ visibility: hidden; }
.head{ height: 120px; width: 100%; overflow: hidden; }
.head>.wrapper{ margin-top: 36px; }
.wrapper{ width: 1060px; overflow: hidden; position: relative; margin: 0 auto; box-sizing: border-box; }
.logo{ width: 238px; height: 48px; float: left; background: url(../img/wa/logo.svg) center no-repeat;  }
.nav{ height: 48px; width: 624px; overflow: hidden; float: right; position: relative; }
.nav>li{ float: left;  height: 48px; line-height: 48px; font-size: 18px; width: 72px; text-align: center; padding: 0 16px; cursor: pointer; transition: font-size .1s ease-out; }
.nav>li>i{ color: #FE5521; height: 48px; line-height: 48px; width: 72px; text-align: center;}
.nav>li.active{ font-size: 22px }
.nav_line{ position: absolute; bottom: 0; height: 4px; width: 72px; border-left: 16px solid #fff; border-left: 16px solid #fff; background-color: #FE5521; left: -104px; }

/* banner */
.banner{ height: 480px; position: relative; overflow: hidden; border-radius: 18px; z-index: 1; }
.swiper-wrapper{ position: relative; height: 100%; width: 100%; z-index: 1; display: flex; transition-property: transform;  }
.swiper-slide{ position: relative; height: 100%; flex-shrink: 0; cursor: pointer; background-position: center; }
.swiper-pagination{ position: absolute; z-index: 10; }
.swiper-container-horizontal>.swiper-pagination-bullets{ bottom: 24px; left: 24px;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ margin: 0 4px; }
.swiper-pagination-bullet{ width: 8px; height: 8px; border-radius: 100%; display: inline-block; background: #fff }
.swiper-pagination-bullet-active{ opacity: 1; background:#ff6346; }
.swiper-button-prev,.swiper-button-next{ height: 44px; width: 44px; background: rgba(0,0,0,.6); border-radius: 100%; cursor: pointer; position: absolute; z-index: 20; top: 50%; margin-top: -22px; opacity: 0; transition: opacity .3s ease-in }
.swiper-button-prev>i,.swiper-button-next>i{ height: 44px; width: 44px; text-align: center; line-height: 44px; font-size: 16px; color: #fff; transition: color .3s ease-out; box-sizing: border-box; }
.swiper-button-prev>i{ padding-right: 2px }
.swiper-button-next>i{ padding-left: 2px }
.swiper-button-prev>i:hover,.swiper-button-next>i:hover{ color: #FE5521 }
.swiper-button-prev{ left: 36px; }
.swiper-button-next{ right: 36px; }
.banner:hover .swiper-button-prev,.banner:hover .swiper-button-next{ opacity: 1 }
/* banner */

.main{ padding-bottom: 72px; min-height: 600px }
.homebox{ margin-top: 72px; margin-bottom: 72px; clear: both; }
.homebox>header{ margin-bottom: 36px; height: 52px; overflow: hidden;}
.hometitle{ height: 52px; float: left; width: 123px;  background-image: url(../img/wa/titlebg.png); background-repeat: no-repeat; background-size: cover; }
.hometitle.recomartist{ background-position: 0 0 }
.hometitle.vollist{ background-position: 0 -312px }
.hometitle.tplist{ background-position: 0 -156px }
.hometitle.recommusic{ background-position: 0 -104px }
.hometitle.columns{ background-position: 0 -208px }
.hometitle.hotmusic{ background-position: 0 -364px }
.hometitle.albums{ background-position: 0 -52px }
.hometitle.timeline{ background-position: 0 -416px }
.hometitle.hotcommit{ background-position: 0 -468px }
.hometitle.photo{ background-position: 0 -572px }
.hometitle.video{ background-position: 0 -520px }
.hometitle.new{ background-position: 0 -624px }

.homemore{ height: 52px;  float: right; overflow: hidden; cursor: pointer; }
.homemore>a,.homemore>i{ float: left; height: 24px; line-height: 24px; margin-top: 14px;}
.homemore>a{ letter-spacing: 4px; color: #555555; font-size: 14px;  }
.homemore>i{ width: 16px; text-align: right; font-size: 12px; color: #FE5521 }
.homebtn{ height: 48px; overflow: hidden; border-radius: 48px; color: #fff; float: left;  padding: 0 17px; cursor: pointer; }
.homebtn>i{ height: 48px; text-align: center; width: 32px; line-height: 48px }
.homebtn>a{ height: 48px; line-height: 48px; padding-right: 10px; font-size: 16px }
.homebtn.nowplay{ background-color: #FE5521 }
.homebtn.addlist{ background-color: #ff6346 }
.homebox>ul{ overflow: hidden; }
.homebox>section{ height: 378px; }
.alist{ overflow: hidden; }
.alist>li{ width: 180px; box-sizing: border-box; margin-right: 40px; float: left; margin-bottom: 36px; color: #555 }
.alist>li:hover h1{ color: #FE5521 }
.alist.list5>li:nth-child(5n){ margin-right: 0 }
.alist.list4>li:nth-child(4n){ margin-right: 0 }
.alistimg{ position: relative; border-radius: 12px; overflow: hidden; cursor: pointer; z-index: 1}
.alistimg>img{ width: 100%; transition: transform .4s ease-out; border-radius: 12px }
.alistimg>i{ position: absolute; top: 50%; left: 50%; color: #fff; width: 50px; height: 50px; text-align: center; line-height: 50px; z-index: 1; margin: -25px 0 0 -25px; font-size: 12px; opacity: 0; transition: opacity .3s, font-size .3s ease-out  }
.alistimg:after{ content:""; position: absolute; top: 0; left: 0; z-index: 0; background-color: rgba(0,0,0,.4); width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease-out; border-radius: 12px; overflow: hidden;}
.alistimg:hover>i{opacity: 1; font-size: 40px }
.alistimg:hover>img{ transform: scale(1.1); }
.alistimg:hover:after{ opacity: 1 }
.alistinfo{ margin-top: 16px }
.alistinfo>h1{ height: 26px; line-height: 26px; margin-bottom: 3px; font-size: 20px; text-align: center; letter-spacing: 2px; transition: color .3s ease-out; cursor: pointer;}
.alistinfo>h2{ height: 20px; line-height: 20px; overflow: hidden; font-size: 18px; text-align: center; letter-spacing: 1px }
.alistinfo>h2>a{ height: 20px; color: #999; margin: 0 6px; font-size: 14px; vertical-align: middle; }
.blist{ overflow: hidden; }
.blist>li{ overflow: hidden; position: relative; cursor: pointer; color: #555}
.blist>li:hover h1{ color: #FE5521 }
.blistimg{ float: left; width: 620px; height: 378px; border-radius: 12px; overflow: hidden; position: relative;  z-index: 1}
.blistimg>img{ width: 100%; transition: transform .4s ease-out; border-radius: 12px }
.blistimg>i{ position: absolute; top: 50%; left: 50%; color: #fff; width: 120px; height: 120px; text-align: center; line-height: 120px; z-index: 1; margin: -60px 0 0 -60px; font-size: 12px; opacity: 0; transition: opacity .3s, font-size .3s ease-out  }
.blistimg:after{ content:""; position: absolute; top: 0; left: 0; z-index: 0; background-color: rgba(0,0,0,.4); width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease-out }
.blistimg:hover>i{opacity: 1; font-size: 60px }
.blistimg:hover>img{ transform: scale(1.1); }
.blistimg:hover:after{ opacity: 1 }
.blistinfo{ float: right; width: 400px; height: 378px;  }
.blistinfo>section{ padding: 0 54px; width: 400px; box-sizing: border-box; position: relative; }
.blistinfo>section:before{ content:""; position: absolute; height: 27px; width: 31px; background:url(../img/wa/sdesc.svg) no-repeat left top; background-size: 27px; left: 0; top: 0; }
.blistinfo>section:after{ content:""; position: absolute; height: 27px; width: 31px; background:url(../img/wa/edesc.svg) no-repeat right top; background-size: 27px; right: 0; bottom: 0;  }
.blistinfo>section>h1{ line-height: 28px; font-size: 20px; letter-spacing: 2px; margin-left: -2px; transition: color .3s ease-out }
.blistinfo>section>h2{ height: 20px; line-height: 20px; font-size: 14px; letter-spacing: 2px; margin-left: -2px; margin-top: 8px }
.blistinfo>section>p{ letter-spacing: 2px; font-size: 14px; line-height: 28px; max-height: 278px; overflow: hidden; margin: 20px 0 0 -2px; padding-bottom: 20px; box-sizing: border-box; }
.volindex{ width: 400px; height: 22px; overflow: hidden; position: absolute; right: 0; bottom: 0 }
.volindex>li{ font-size: 16px; color: #d8d8d8; letter-spacing: 4px; cursor: pointer; height: 22px; line-height: 22px }
.volindex>li:hover{ color: #FE5521 }
.docindex{ width: 400px; height: 110px; overflow: hidden; position: absolute; right: 0; bottom: 0 }
.docindex>li{ cursor: pointer; position: relative; width: 180px; height: 110px; background-color: #ccc; border-radius: 8px; overflow: hidden;  z-index: 1}
.docindex>li>img{ width: 100%; transition: transform .4s ease-out; border-radius: 8px }
.docindex>li>i{ position: absolute; top: 50%; left: 50%; color: #fff; width: 50px; height: 50px; text-align: center; line-height: 50px; z-index: 1; margin: -25px 0 0 -25px; font-size: 12px; opacity: 0; transition: opacity .6s, font-size .3s ease-out  }
.docindex>li:after{ content:""; position: absolute; top: 0; left: 0; z-index: 0; background-color: rgba(0,0,0,.6); width: 100%; height: 100%;  }
.docindex_title{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; text-align: center; transition: opacity .6s ease-out }
.docindex_title>h2{ margin-top: 34px; height: 20px; line-height: 20px; color: #dedede; font-size: 12px }
.docindex_title>h1{ height: 22px; line-height: 22px; font-size: 16px; letter-spacing: 1px; color: #fff; }
.docindex>li:hover>i{opacity: 1; font-size: 24px }
.docindex>li:hover>img{ transform: scale(1.1); }
.docindex>li:hover>.docindex_title{ opacity: 0 }

.clist{ overflow: hidden; }
.clist>li{ height: 220px; margin-bottom: 48px; overflow: hidden; position: relative; cursor: pointer; color: #555}
.clist>li:hover h1{ color: #FE5521 }
.clistimg{ width: 220px; height: 220px; float: left; margin-right: 60px; border-radius: 8px; overflow: hidden; position: relative;  z-index: 1}
.clistimg>img{ width: 100%; transition: transform .4s ease-out; border-radius: 8px }
.clistimg>i{ position: absolute; top: 50%; left: 50%; color: #fff; width: 50px; height: 50px; text-align: center; line-height: 50px; z-index: 1; margin: -25px 0 0 -25px; font-size: 12px; opacity: 0; transition: opacity .3s, font-size .3s ease-out  }
.clistimg:after{ content:""; position: absolute; top: 0; left: 0; z-index: 0; background-color: rgba(0,0,0,.4); width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease-out }
.clistimg:hover>i{opacity: 1; font-size: 40px }
.clistimg:hover>img{ transform: scale(1.1); }
.clistimg:hover:after{ opacity: 1 }
.clistinfo{ height: 220px; overflow: hidden; width: 780px; float: left; }
.clistinfo>h1{ height: 40px; line-height: 40px; font-size: 26px; letter-spacing: 4px; transition: color .3s ease-out }
.clistinfo>h2{ height: 25px; line-height: 25px; font-size: 16px; margin: 4px 0; letter-spacing: 4px}
.clistinfo>h3{ height: 20px; line-height: 20px; font-size: 14px; letter-spacing: 2px }
.clistinfo>p{ height: 88px; margin-top: 18px; line-height: 22px; font-size: 14px; letter-spacing: 1px }
.dlist{ overflow: hidden; }
.dlist>li{ width: 500px; margin-bottom: 48px; overflow: hidden; position: relative; float: left; height: 498px; cursor: pointer; color: #555; border-radius: 8px; transition: background-color .3s ease-out }

.dlist>li:hover h1{ color: #FE5521 }
.dlist>li:nth-child(odd){ margin-right: 50px }
.dlistimg{ width: 500px; height: 304px; border-radius: 8px; margin-bottom: 24px; overflow: hidden; position: relative;  z-index: 1}
.dlistimg>img{ width: 100%; transition: transform .4s ease-out; border-radius: 8px }
.dlistimg>i{ position: absolute; top: 50%; left: 50%; color: #fff; width: 120px; height: 120px; text-align: center; line-height: 120px; z-index: 1; margin: -60px 0 0 -60px; font-size: 12px; opacity: 0; transition: opacity .3s, font-size .3s ease-out  }
.dlistimg:after{ content:""; position: absolute; top: 0; left: 0; z-index: 0; background-color: rgba(0,0,0,.4); width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease-out }
.dlistimg:hover>i{opacity: 1; font-size: 60px }
.dlistimg:hover>img{ transform: scale(1.1); }
.dlistimg:hover:after{ opacity: 1 }
.dlistinfo{ overflow: hidden; width: 100%; float: left; }
.dlistinfo>h1{ height: 40px; line-height: 40px; font-size: 26px; letter-spacing: 2px; transition: color .3s ease-out }
.dlistinfo>h2{ height: 25px; line-height: 25px; font-size: 16px; margin: 4px 0; letter-spacing: 4px}
.dlistinfo>p{ margin-top: 24px; line-height: 22px; font-size: 14px; letter-spacing: 1px }
.elist{ overflow: hidden; margin: 10px 0 0 0  }
.elist>li{ height: 60px; overflow: hidden; margin-bottom: 24px; cursor: pointer;  z-index: 1}
.elist>li>img{ width: 60px; height: 60px; float: left; margin-right: 60px; border-radius: 4px }
.elist>li>i{ height: 60px; width: 40px; line-height: 60px; float: right; text-align: center; font-size: 36px; transition: color .3s ease-out }
.elist>li>h1{ float: left; height: 60px; line-height: 60px; font-size: 22px; color: #555; width: 350px; margin-right: 20px; letter-spacing: 1px; transition: color .3s ease-out }
.elist>li>h2{ float: left; height: 60px; line-height: 60px; font-size: 18px; color: #999; width: 220px; margin-right: 20px; letter-spacing: 1px; transition: color .3s ease-out}
.elist>li>h2>i{ height: 60px; line-height: 60px; color: #bdbdbd; font-size: 14px; margin-right: 10px; width: 24px; text-align: center; }
.elist>li>h2>a{ height: 60px; line-height: 60px; color: #999; font-size: 18px; }
.elist>li>time{ float: left; height: 60px; line-height: 60px; font-size: 18px; color: #999; width: 70px; letter-spacing: 1px}
.elist>li>span{ width: 80px; height: 60px; line-height: 60px; font-size: 20px; float: left; letter-spacing: 2px }
.elist>li:hover>h1,.elist>li:hover>h2,.elist>li:hover>i{ color: #FE5521}
.elist>li>i.icon-iplay{ background: url('../img/danqu.png')no-repeat center;}
.elist>li:hover>i.icon-iplay{ background: url('../img/xuanzhong.png')no-repeat center;}
.elist>li.cur>h1,.elist>li.cur>h2,.elist>li.cur>i{ color: #FE5521}
.flist{ overflow: hidden; width: 100%}
.flist>li{ margin-bottom: 42px; color: #555; cursor: pointer; }
.flist>li>img{ width: 100%; border-radius: 8px; margin-bottom: 12px; }
.flist>li>h1{font-size: 18px; line-height: 25px; letter-spacing: 1px; margin-bottom: 12px; transition: color .3s ease-out }
.flist>li>p{font-size: 12px; line-height: 18px; letter-spacing: 1px }
.flist>li:hover h1{ color: #FE5521 }
.ilist>li{ height: 60px; overflow: hidden; margin-bottom: 24px; cursor: pointer; }
.ilist>li>span{ width: 60px; height: 60px; line-height: 60px; font-size: 20px; float: left; letter-spacing: 2px }
.ilist>li>img{ width: 60px; height: 60px; float: left; margin-right: 36px; border-radius: 8px }
.ilist>li>section{ float: left; height: 60px; width: 740px; overflow: hidden; position: relative;color: #555; }
.ilist>li>section>h1{ height: 30px; line-height: 30px; font-size: 18px; position: absolute; left: 0; top: 0; transition: color .3s ease-out }
.ilist>li>section>h2{ height: 30px; line-height: 30px; font-size: 14px; color: #999; position: absolute; left: 0; bottom: 0 }
.ilist>li>i{ height: 60px; width: 60px; line-height: 60px; float: right; text-align: center; font-size: 36px; transition: color .3s ease-out }
.ilist>li:hover h1,.ilist>li:hover>i{ color: #FE5521}

.glist{ overflow: hidden; width: 100% }
.glist>li{ border-radius: 12px; background-color: #f8f8f8; padding: 36px; box-sizing: border-box; margin-bottom: 36px }
.glist>li>p{ font-size: 16px; letter-spacing: 1px; line-height: 25px }
.glist>li>footer{ margin-top: 8px; height: 36px; overflow: hidden; margin-top: 16px }
.glist>li>footer>time{ float: right; font-size: 14px; letter-spacing: 2px; color: #999; height: 36px; line-height: 36px; }
.commit_user{ float: left; overflow: hidden; height: 36px }
.commit_user>span{ width: 44px; height: 36px; line-height: 36px; color: #999; float: left; font-size: 14px; letter-spacing: 2px;}
.commit_user>img{ height: 36px; width: 36px; border-radius: 100%; float: left; margin-right: 12px  }
.commit_user>a{ height: 36px; line-height: 36px; color: #FE5521; float: left; font-size: 14px; letter-spacing: 1px; }
.res_commit_desc{ font-size: 16px; line-height: 26px; color: #999; background: #e8e8e8; border-radius: 8px; padding: 24px 40px; margin: 18px 0; letter-spacing: 1px; }

.morebox{ text-align: center; width: 400px; height: 28px; line-height: 28px; color: #FE5521; letter-spacing: 4px; padding: 10px 0; cursor: pointer; font-size: 16px; margin: 10px auto 0 auto  }
.listdata{ height: 30px; position: absolute; right: 0; bottom: 0; overflow: hidden;  }
.listdata>li{ float: left; height: 30px; line-height: 30px; overflow: hidden; font-size: 12px }
.listdata>li>i{ margin-right: 6px; color: #bdbdbd; width: 18px; text-align: center; float: left; transition: color .3s ease-out }
.listdata>li>a{ color: #999; float: left; }
.listdata>li>a.listen{ width: 54px }
.listdata>li>a.view{ width: 54px }
.listdata>li>a.comment{ width: 40px }
.listdata>li>a.time{ width: 90px }
.listdata>li>i.share{ width: 32px; text-align: center; cursor: pointer; }
.listdata>li>i.share:hover{ color: #FE5521 }
.listdata>li>i,.listdata>li>a{ height: 30px; line-height: 30px; }
.artist_list{ float: left; width: 840px }
.tag_list{ float: left; width: 220px; min-height: 600px; }
.tag_list>li{ height: 20px; font-size: 14px; margin-bottom: 24px; overflow: hidden; color: #3c3e4a; transition: color .3s ease-out; cursor: pointer; }
.tag_list>li>i{ opacity: 0; transition: opacity .3s ease-out; margin-left: 16px; font-size: 10px; color: #FE5521 }
.tag_list>li>a,.tag_list>li>i{ height: 20px; line-height: 20px; }
.tag_list>li:hover,.tag_list>li.cur{ color: #FE5521 }
.tag_list>li:hover>i,.tag_list>li.cur>i{ opacity: 1 }

.foot{ height: 330px; background-color: #FE5521; width: 100%; text-align: center; }
.foot_nav{ height: 20px; overflow: hidden; width: 680px; margin: 48px auto 0 auto }
.foot_nav>li{ font-size: 14px; color: #fff; letter-spacing: 14px; height: 20px; line-height: 20px; float: left; margin: 0 20px; box-sizing: border-box; width: 130px; text-align: center;cursor: pointer; }
.foot_download{ margin: 42px auto 0 auto; width:348px; overflow: hidden;}
.foot_download>li{ width: 150px; transition: background-color .3s ease-out; cursor: pointer; margin: 0 12px; height: 54px; float: left; cursor: pointer; border-radius: 4px }
.foot_download>li>img{ width: 100%; }
.foot_download>li:hover{ background-color: #FE5521 }
.copyright_box{ height: 17px; line-height: 17px; font-size: 12px; letter-spacing: 2px; color: #fff; width: 460px; margin: 35px auto 0 auto; text-align: center; }
.audio{ height: 90px; width: 100%; position: fixed; bottom: -100px; left: 0; box-shadow: 0 -1px 10px rgba(177, 163, 163, 0.23); background-color: #fff; padding: 9px 0; box-sizing: border-box; z-index: 31; transition: bottom .2s ease-out }
.audio.open{ bottom: 0; }
.audio_btn_group{ height: 72px;}
.audio_btn_group>i{ float: left; height: 40px; width: 40px; line-height: 40px; text-align: center; margin-top: 16px; font-size: 20px; cursor: pointer; }
.audio_btn_group>i.audio_play_btn{ margin-left: 25px; margin-right: 25px; font-size: 30px }
.audio_btn_group>i.audio_play_list{ margin-left: 32px }
.audio_info{ width: 680px; margin-left: 48px; float: left; overflow: hidden; position: relative; }
.audio_info>img{ height: 72px; width: 72px; float: left; border-radius: 4px; user-select: none; }
.audio_info>div{ position: absolute; left: 96px; width: 584px; }
.audio_info_box{ height: 20px; top: 15px;  }
.audio_info_bar{ bottom: 18px; height: 1px; cursor: pointer; background-color: #d8d8d8; user-select: none;}
.audio_info_box>span{ height: 20px; line-height: 20px; vertical-align: middle;}
.audio_info_pro{ width: 0; height: 1px; position: relative; transition: width .2s ease; background-color: #FE5521; }
.audio_info_com{ height: 9px; width: 9px; border-radius: 50%; background-color: #FE5521; position: absolute; top: -4px; right: -4px; cursor: pointer; }
.audio_fold{ background-color: #e5e5e5; position: absolute; left: 0; top: 0; cursor: pointer; }
.audio_fold>i{ width: 60px; height: 90px; text-align: center; line-height: 90px; color: #fff; font-size: 12px; transition: background-color .3s ease-out }
.audio_fold>i:hover{ background-color: #FE5521 }
.audio_playlist_box{ width: 480px; background-color: #fff; z-index: 30; height: 468px; position: fixed; bottom: -480px; right: 0; box-shadow: 0 -1px 10px rgba(177, 163, 163, 0.23); transition: bottom .3s ease-out }
.audio_playlist_box.open{ bottom: 90px }
.audio_playlist_title{ height: 68px; overflow: hidden; padding: 0 36px; box-sizing: border-box; }
.audio_playlist_title>h1{ height: 68px; line-height: 68px; float: left; color: #555; font-size: 20px }
.audio_playlist_title>span{ height: 68px; overflow: hidden; float: right; margin-left: 40px; cursor: pointer; color: #999; transition: color .3s ease-out}
.audio_playlist_title>span:hover{ color: #FE5521 }
.audio_playlist_title>span>a{ height: 68px; line-height: 68px; float: left; margin-right: 8px }
.audio_playlist_title>span>i{ height: 68px; line-height: 68px; float: left; font-size: 18px; }
.audio_playlist_list{ height: 400px; width: 480px; position: relative; overflow: hidden; z-index: 10  }
.audio_list{ width: 458px; position: absolute; top: 0; left: 22px; }
.audio_list>p{ text-align: center; padding: 180px 0; color: #999; letter-spacing: 2px }
.audio_list>li{ height: 36px; width: 458px; color: #999; transition: background-color .2s linear; cursor: pointer; }
.audio_list>li>h1,.audio_list>li>h2,.audio_list>li>i{ height: 36px; line-height: 36px; float: left; }
.audio_list>li>h1{ width: 260px; overflow: hidden; padding:0 18px; box-sizing: border-box; font-size: 14px; letter-spacing: 1px }
.audio_list>li>h2{ width: 148px; overflow: hidden; padding:0 15px; box-sizing: border-box; font-size: 14px; letter-spacing: 1px }
.audio_list>li>i{ width: 36px; font-size: 12px;  }
.audio_list>li.cur{ background-color: #FE5521; color: #fff }
.audio_list>li:hover{ background-color: #FE5521; color: #fff }
.audio_list>li.cur>i{ display: none }
.audio_plug{ height: 90px; width: 60px; background-color: #e5e5e5; border-top-right-radius: 60px; border-top-left-radius: 60px; position: fixed; bottom: 0; left: 0; z-index: 30; cursor: pointer; transition: background-color .3s ease-out }
.audio_plug:hover{ background-color: #FE5521 }
.audio_plug>img{ width: 48px; height: 48px; border-radius: 100%; margin: 6px; }
.audio_plug>i{ width: 60px; text-align: center; line-height: 24px; height: 30px; font-size:10px; color:#fff; }
.download_mbox{ background-color: #FE5521; z-index: 100; width: 100%; height: 100%; position: fixed; left: 0; bottom: 0; display: none;  }
.download_code{ position: absolute; left: 50%; margin-left: -300px; width: 600px; overflow: hidden; }
.download_code>img{ width: 300px; height: 320px; margin: 0 auto }
.download_code>p{ font-size: 20px; height: 40px; line-height: 40px; margin-top: 10px; letter-spacing: 4px; width: 600px; color: #fff; text-align: center; }

/* nprogress */
.la-ball-clip-rotate,.la-ball-clip-rotate>div{position:relative;box-sizing:border-box}
.la-ball-clip-rotate{display:block;font-size:0;color:#FE5521}
.la-ball-clip-rotate.la-dark{color:#FE5521}
.la-ball-clip-rotate>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}
.la-ball-clip-rotate{width:32px;height:32px}
.la-ball-clip-rotate>div{width:32px;height:32px;background:0 0;border-width:2px;border-bottom-color:transparent;border-radius:100%;animation:ball-clip-rotate .75s linear infinite}
.la-ball-clip-rotate.la-sm{width:16px;height:16px}
.la-ball-clip-rotate.la-sm>div{width:16px;height:16px;border-width:1px}
.la-ball-clip-rotate.la-2x{width:64px;height:64px}
.la-ball-clip-rotate.la-2x>div{width:64px;height:64px;border-width:4px}
.la-ball-clip-rotate.la-3x{width:96px;height:96px}
.la-ball-clip-rotate.la-3x>div{width:96px;height:96px;border-width:6px}
@keyframes ball-clip-rotate{0%{transform:rotate(0)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
#nprogress{pointer-events:none}
#nprogress .bar{background:#FE5521;position:fixed;z-index:18;top:0;left:0;width:100%;height:4px}
#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #FE5521,0 0 5px #FE5521;opacity:1;transform:rotate(3deg) translate(0,-4px)}
#nprogress .spinner{display:none;position:fixed;z-index:20;top:35px;right:20px}
#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:solid 1px transparent;border-top-color:#FE5521;border-left-color:#FE5521;border-radius:50%;animation:nprogress-spinner .4s linear infinite}
.nprogress-custom-parent{overflow:hidden;position:relative}
.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}
@keyframes nprogress-spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* scrollbar */
.ps-container .ps-scrollbar-x-rail{position:absolute;bottom:3px;height:8px;border-radius:4px;opacity:0;filter:alpha(opacity=0);transition:background-color .2s linear,opacity .2s linear}
.ps-container.hover .ps-scrollbar-x-rail,.ps-container:hover .ps-scrollbar-x-rail{opacity:.6;filter:alpha(opacity=60)}
.ps-container .ps-scrollbar-x-rail.hover,.ps-container .ps-scrollbar-x-rail:hover{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}
.ps-container .ps-scrollbar-x-rail.in-scrolling{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}
.ps-container .ps-scrollbar-y-rail{position:absolute;left:8px;width:6px;border-radius:6px;opacity:0;filter:alpha(opacity=0);transition:background-color .2s linear,opacity .2s linear}
.ps-container.hover .ps-scrollbar-y-rail,.ps-container:hover .ps-scrollbar-y-rail{opacity:.6;filter:alpha(opacity=60)}
.ps-container .ps-scrollbar-y-rail.hover,.ps-container .ps-scrollbar-y-rail:hover{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}
.ps-container .ps-scrollbar-y-rail.in-scrolling{background-color:#d8d8d8;opacity:.9;filter:alpha(opacity=90)}
.ps-container .ps-scrollbar-x{position:absolute;bottom:0;height:8px;background-color:#aaa;border-radius:4px;transition:background-color .2s linear}
.ps-container.ie6 .ps-scrollbar-x{font-size:0}
.ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x,.ps-container .ps-scrollbar-x-rail:hover .ps-scrollbar-x{background-color:#999}
.ps-container .ps-scrollbar-y{position:absolute;right:0;width:6px;background-color:#d8d8d8;border-radius:6px;transition:background-color .2s linear}
.ps-container.ie6 .ps-scrollbar-y{font-size:0}
.ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y,.ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y{background-color:#999}
.ps-container.ie .ps-scrollbar-x,.ps-container.ie .ps-scrollbar-y{visibility:hidden}
.ps-container.ie.hover .ps-scrollbar-x,.ps-container.ie.hover .ps-scrollbar-y,.ps-container.ie:hover .ps-scrollbar-x,.ps-container.ie:hover .ps-scrollbar-y{visibility:visible}

/* pager */
.pager_box{ margin: 12px 0; height: 36px; position: relative; opacity: 0; visibility: hidden; transition: opacity .3,visibility .3s ease-out }
.pager_box.open{ opacity: 1; visibility: visible; }
.pager_btn{ overflow: hidden; height: 36px; position: absolute; top: 0; font-size: 18px; color: #3c3e4a; cursor: pointer; }
.pager_btn>i,.pager_btn>a{ height: 36px; line-height: 36px; float: left; }
.pager_btn>i{ font-size: 12px; color: #FE5521; width: 14px}
.pager_prev_btn{ left: 0 }
.pager_next_btn{ right: 0 }
.pager_prev_btn>i{ margin-right: 12px }
.pager_next_btn>i{ margin-left: 12px }
.pager_list{ width: 460px; margin: 0 auto; height: 36px; text-align: center; }
.pager_list>li{ height: 36px; line-height: 36px; width: 36px; border-radius: 100%; text-align: center; cursor: pointer; transition: background-color .3s, color .3s ease-out; font-size: 18px; margin: 0 5px; display: inline-block; }
.pager_list>li.goto:hover,.pager_list>li.cur{ background-color: #FE5521; color: #fff }
.pager_btn.disabled,.pager_btn.disabled>i{ color: #999 }

.artist_info_box{ margin: 35px 0 35px 0 }
.artist_info_box>img{ height: 260px; width: 260px; border-radius: 100%; margin-right: 60px; float: left; }
.artist_info{ float: left; width: 740px; color: #555; letter-spacing: 2px }
.artist_info>h1{ width: 520px; line-height: 58px; font-size: 42px; margin-top: 10px }
.tag_box{ height: 24px; margin: 20px 0; overflow: hidden; }
.tag_box>li{ width: 60px; height: 24px; float: left; margin-right: 10px }
.tag_box>li>img{ width: 60px; }
.tag_box>li.tag48{ background: url(../img/tag/tag48.png) no-repeat center; background-size: cover  } /* 世界音乐 */
.tag_box>li.tag47{ background: url(../img/tag/tag47.png) no-repeat center; background-size: cover } /* 古典 */ 
.tag_box>li.tag46{ background: url(../img/tag/tag46.png) no-repeat center; background-size: cover } /* 原声 */ 
.tag_box>li.tag45{ background: url(../img/tag/tag45.png) no-repeat center; background-size: cover } /* 迷幻 */ 
.tag_box>li.tag44{ background: url(../img/tag/tag44.png) no-repeat center; background-size: cover } /* 电子 */
.tag_box>li.tag43{ background: url(../img/tag/tag43.png) no-repeat center; background-size: cover } /* 暗潮 */  
.tag_box>li.tag42{ background: url(../img/tag/tag42.png) no-repeat center; background-size: cover } /* 雷鬼 */ 
.tag_box>li.tag41{ background: url(../img/tag/tag41.png) no-repeat center; background-size: cover } /* 布鲁斯 */
.tag_box>li.tag40{ background: url(../img/tag/tag40.png) no-repeat center; background-size: cover } /* 爵士 */
.tag_box>li.tag39{ background: url(../img/tag/tag39.png) no-repeat center; background-size: cover } /* 英伦 */
.tag_box>li.tag38{ background: url(../img/tag/tag38.png) no-repeat center; background-size: cover } /* 说唱 */
.tag_box>li.tag37{ background: url(../img/tag/tag37.png) no-repeat center; background-size: cover } /* 后摇 */
.tag_box>li.tag36{ background: url(../img/tag/tag36.png) no-repeat center; background-size: cover } /* 朋克 */  
.tag_box>li.tag35{ background: url(../img/tag/tag35.png) no-repeat center; background-size: cover } /* 金属 */
.tag_box>li.tag33{ background: url(../img/tag/tag33.png) no-repeat center; background-size: cover } /* 另类 */
.tag_box>li.tag32{ background: url(../img/tag/tag32.png) no-repeat center; background-size: cover } /* 情绪摇滚 */
.tag_box>li.tag31{ background: url(../img/tag/tag31.png) no-repeat center; background-size: cover } /* 流行 */
.tag_box>li.tag30{ background: url(../img/tag/tag30.png) no-repeat center; background-size: cover } /* 民谣 */
.tag_box>li.tag23{ background: url(../img/tag/tag23.png) no-repeat center; background-size: cover } /* 摇滚 */ 
.tag_box>li.tag53{ background: url(../img/tag/tag53.png) no-repeat center; background-size: cover } /* 器乐 */
.artist_info>p{ line-height: 32px; font-size: 18px; max-height: 96px; overflow: hidden; }
.artist_info>a{ font-size: 16px; cursor: pointer; height: 32px; line-height: 32px }

.music_info{ width: 580px; float: left; margin:36px 60px 0 0; color: #555 }
.music_info>h1{ height: 40px; line-height: 40px; font-size: 28px; letter-spacing: 1px}
.music_info>h2{ height: 26px; line-height: 26px; font-size: 18px; margin: 4px 0 12px 0; color: #FE5521}
.music_desc{ margin-top: 36px; margin-bottom: 48px; font-size: 16px; letter-spacing: 1px; text-align: justify; line-height: 32px; }
.music_side{ width: 420px; height: 420px; float: left;  }

.music_side>section{ margin-top: 36px }
.article_info{ width: 720px; float: left; margin:36px 60px 0 0; }
.article_info>img{ width: 720px; height: 451px; border-radius: 8px }
.article_info>h1{ line-height: 40px; font-size: 28px; letter-spacing: 1px; margin: 48px 0 24px 0 }
.article_side{ width: 260px; float: left; margin-top: 36px;  }
.article_side>h1{ height: 36px; line-height: 36px; font-size: 24px; letter-spacing: 1px; margin-bottom: 24px }
.author{ color: #555; font-size: 16px; line-height: 24px; height: 24px; letter-spacing: 1px }
.vol_cover{ width: 1060px; height: 480px; border-radius: 12px; position: relative; overflow: hidden; }
.vol_cover>img{ position: absolute; top: 50%; left: 0; height: 646px; width: 1060px; margin-top: -323px }
.vol_info{ margin-top: 40px }
.vol_info>h1{ line-height: 40px; font-size: 32px; color: #555; letter-spacing: 1px }
.vol_info>h2{ height: 40px; line-height: 40px; letter-spacing: 4px; color: #999; font-size: 18px }
.vol_info>p{ margin-top: 24px; font-size: 18px; line-height: 32px; letter-spacing: 1px; color: #555}

.app_box{ width: 1060px; height: 600px; margin-bottom: 72px; background-color: #000; border-radius: 12px; position: relative;}
.app_ww{ background: url(../img/wa/wwbg.png) no-repeat center;  }
.app_yy{ background: url(../img/wa/yybg.png) no-repeat center; }
.app_tv{ background: url(../img/wa/tvbg.png) no-repeat center; }
.app_box>h1{ position: absolute; top: 60px; left: 60px; letter-spacing: 8px; height: 60px; line-height: 60px; font-size: 38px; }
.app_box>h2{ position: absolute; top: 120px; left: 60px; letter-spacing: 5px; height: 24px; line-height: 24px; font-size: 20px }
.app_box>p{ position: absolute; top: 260px; left: 50px; font-size: 14px;line-height: 30px; letter-spacing: 2px }
.app_box>ul{ position: absolute; bottom: 60px; left: 60px; overflow: hidden; height: 44px; }
.app_box>ul>li{ float: left; margin-right: 16px; height: 44px; width: 120px; cursor: pointer; }
.app_box>ul>li>img{ width: 100% }
.about_desc{ margin: 72px 0; font-size: 16px; line-height: 28px; color: #555; letter-spacing: 1px; text-align: justify; }
.about_address{ height: 600px; width: 1060px; border-radius: 24px; position: relative; overflow: hidden; }
.about_address>img{ width: 100%; }
.about_address>section{ height: 600px; width: 400px; position: absolute; left: 0; top: 0; z-index: 1; background: #FE5521; opacity: .8 }
.about_info{ position: absolute; top:237px; left:60px; width: 280px; height: 130px; z-index: 2; color: #fff }
.about_info>h1{ height: 40px; line-height: 40px; letter-spacing: 1px; font-size: 24px; }
.about_info>p{ font-size: 14px; line-height: 26px; letter-spacing: 1px; }
.about_hello{ position: absolute; height: 114px; width: 250px; bottom: 222px; right: 216px; background: url(../img/wa/hello1.png) no-repeat center; background-size: cover; cursor: pointer; }
.about_hello>img{ width: 100%; opacity: 0; transition: opacity .3s ease-in-out; display: block; }
.about_hello>img:hover{ opacity: 1 }
.about_media{ overflow: hidden; margin: 96px 0 60px 0; text-align: center; }
.about_media>li{ float: left; width: 33.33333%; text-align: center; }
.about_media>li>img{ display: block; width: 120px; height: 120px; margin: 0 auto; }
.about_media>li>h1{ font-size: 20px; margin: 20px auto 15px auto; color: #555 }
.about_media>li>p{ font-size: 14px; color: #3c3e4a; text-align: center;  }
.album_cover{ width: 300px; height: 300px; float: left; position: relative;  border-radius: 8px; overflow: hidden; margin-top: 24px }
.album_cover>img{ width: 300px; }
.album_cover>span{ position: absolute; height: 24px; line-height: 24px; text-align: center; width: 24px; right: 12px; top: 12px; background-color: rgba(0,0,0,.6); color: #fff; border-radius: 100%; overflow: hidden; cursor: pointer; transition: background-color .3s ease-in-out; }
.album_cover>span:hover{ background-color:#FE5521; }
.album_cover>span>img{ width: 5.5px; height: 15.5px; margin: 3px auto }
.albums_info{ float: left; margin: 24px 0 0 60px; position: relative; width: 700px }
.albums_info>h1{ height: 40px; line-height: 40px; letter-spacing: 2px; font-size: 30px; color: #555 }
.albums_info>span{ height: 30px; line-height: 30px; margin-bottom: 10px; font-size: 16px; color: #555; display: block; letter-spacing: 1px }
.albums_info>section{ margin-top: 38px; height: 48px; display: block; }
.album_desc_box{ position: absolute; height: 240px; width: 460px; left: 0; top: 0; border-radius: 8px; box-sizing: border-box; padding: 22px 12px 22px 22px; box-shadow: 0 -1px 10px rgba(177, 163, 163, 0.3); background-color: #fff; opacity: 0; visibility: hidden; transition:opacity .3s, visibility .3s ease-out  }
.album_desc_box.open{ opacity: 1; visibility: visible; }
.album_desc_box>h1{ font-size: 22px; color: #555; letter-spacing: 2px; margin-bottom: 12px}
.album_desc{ position: relative; height: 150px; overflow-y: scroll; }
.album_desc>p{ font-size: 16px; line-height: 30px; text-align: justify; position: absolute; padding-right: 10px }
.playlist_user{ height: 36px; line-height: 26px; margin: 14px 0 30px 0; overflow: hidden;  }
.playlist_user>img{ float: left; height: 36px; width: 36px; border-radius: 72px; margin-right: 12px }
.playlist_user>a{ height: 36px; line-height: 36px; color: #FE5521; font-size: 16px; letter-spacing: 1px }
.playlist_info>p{ line-height: 32px; font-size: 18px; max-height: 64px; overflow: hidden; }
.playlist_info>a{ font-size: 16px; cursor: pointer; height: 32px; line-height: 32px; color: #FE5521; }

.hlist>li{ margin-bottom: 36px; overflow: hidden; position: relative; cursor: pointer; }
.hlist_user{ height: 36px; overflow: hidden; }
.hlist_user>time{ float: right; font-size: 14px; height: 36px; line-height: 36px; color: #999; letter-spacing: 2px }
.hlist_user>img{ float: left;  height: 36px; width: 36px; border-radius: 72px; margin-right: 12px }
.hlist_user>a{ float: left; font-size: 14px; height: 36px; line-height: 36px; letter-spacing: 1px }
.hlist>li>p{ margin: 12px 0; height: 26px; line-height: 26px; font-size: 16px; color: #555; letter-spacing: 2px }
.source_box{ height: 180px; width: 1060px; overflow: hidden; position: relative; border-radius: 12px; background-size: 100%; cursor: pointer; }
.source_box>img{ position: absolute; top: 50%; left: 50%; width: 1060px; margin: -323px 0 0 -530px; transition: transform .6s ease-out }
.source_box:hover>img{ transform: scale(1.1); }
.source_box_mask{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 3; background: #000; opacity: .6; border-radius: 12px }
.source_box>i{ position: absolute; top: 38px; left: 50%; margin-left: -30px; height: 60px; width: 60px; text-align: center; line-height: 60px; font-size: 36px; color: #fff; z-index: 6; }
.source_box>h1{  position: absolute; bottom: 50px; left: 50%; margin-left: -450px; width: 900px; color: #fff; font-size: 18px; text-align: center; z-index: 6; letter-spacing: 2px }
/*.source_box>img{ width: 180px; height: 180px; float: left; }
.source_info{ float: left; position: relative; width: 880px; height: 180px; overflow: hidden; }
.source_info>time{ height: 180px; position: absolute; line-height: 180px; top: 0; right: 36px; color: #888; font-size: 16px;  }
.source_info>span{ position: absolute; left: 36px }
.source_info>.tag_box{ position: absolute; left: 36px; top: 64px }
.source_info>.songname{ height: 40px; line-height: 40px; font-size: 24px; letter-spacing: 2px; top: 24px; color: #555 }
.source_info>.singer{ bottom: 24px; letter-spacing: 2px; font-size: 18px; color: #555 }
.source_info>.albumname{ height: 40px; line-height: 40px; font-size: 24px; letter-spacing: 2px; top: 70px; color: #555  }
.source_info>.type{ height: 28px; line-height: 28px; font-size: 18px; top: 30px; color: #6f83ed; letter-spacing: 2px }
.source_info>.desc{ width: 600px; font-size: 16px; letter-spacing: 1px; line-height: 28px; max-height: 60px; overflow: hidden; display: block; bottom: 20px }*/
.source_photo{ overflow: hidden; column-gap:8px; border-radius: 12px }
.source_photo>li{ height: 180px; }

.video_box{ position: fixed; top: 50%; left: 50%; box-shadow: 0 -1px 4px rgba(177, 163, 163, 0.3); background-color: #f5f5f5; width: 640px; margin: -195px 0 0 -320px; display: block; overflow: hidden;  opacity: 0; visibility: hidden; transition:opacity .3s, visibility .3s ease-out; z-index: 20  }
.video_box.open{ opacity: 1; visibility: visible; }

.photo_box{ overflow: hidden; position: relative; height: 116px; margin: 48px 0  }
.photo_info{ float: left; color: #555; }
.photo_info>h1{ height: 84px; line-height: 84px; font-size: 56px; letter-spacing: 1px }
.photo_info>h2{ height: 32px; line-height: 32px; font-size: 18px; letter-spacing: 1px }
.photo_author{ position: absolute; right: 0; bottom: 0; height: 48px; }
.photo_author>img{ float: left; margin-right: 24px; height: 48px; width: 48px; border-radius: 96px; }
.photo_author>ul{ float: left; font-size: 16px; text-align: right; }
.photo_author>ul>li{ height: 24px; line-height: 24px; }

.jlist{ column-count:4; column-gap: 60px; margin-bottom: 60px }
.jlist>div{ margin: 0 0 36px 0; background: #ccc; border-radius: 8px; overflow: hidden; }
.jlist>div>img{ width: 330px }

.gotop{ position: fixed; bottom: 100px; height: 60px; width: 60px; right: 30px; border-radius: 100%; opacity: 0; visibility: hidden; transition: background-color .3s, opacity .3s,visibility .3s ease-out; cursor: pointer; background-color: rgba(0,0,0,.9);}
.gotop>i{ height: 60px; width: 60px; font-size: 24px; line-height: 60px; text-align: center; color: #fff;}
.gotop.open{ opacity: 1; visibility: visible; }
.gotop:hover{ background-color: rgba(111,131,237,.9); }

.loader{ height: 40px; width: 40px; margin: 200px auto; display: block; }
.toast_box{ height: 60px; width: 600px; position: fixed; left: 50%; top: 50%; margin: -30px 0 0 -300px; text-align: center; z-index: 20; }
.toast{ height: 60px; overflow: hidden; border-radius: 8px; background-color: rgba(0,0,0,.9); text-align:center; color: #fff; animation: fadein .3s ease-out backwards; padding: 0 24px; display: inline-block;}
.toast.done{ background-color: rgba(111,131,237,.9); }
.toast.error{ background-color: rgba(255,99,70,.9); }
@keyframes fadein{ 0%{opacity:0; } 100%{opacity:1; } }
.toast>a{ font-size: 16px; height: 60px; vertical-align: middle; line-height: 60px; letter-spacing: 1px }
.toast>img{ height: 20px; width: 20px; margin: 0 6px 0 0; display: inline-block; vertical-align: middle; }


.re_audio_box{ border-radius: 12px; background-color: #F5F5F5; overflow: hidden; height: 120px; margin: 24px 0; position: relative;  }
.re_audio_box>img{ height: 120px; width: 120px; float: left; }
.re_audio_box>ul{ padding: 24px 0; float: left; width: calc(100% - 260px); margin-left: 36px; color: #555 }
.re_audio_box>i{ position: absolute; width: 48px; height: 48px; top: 36px; left: 36px; background: url(../../../up.wawa.fm/3,cfae712d0330.jpg) no-repeat center; background-size: 48px; cursor: pointer;  }
.re_audio_box>i.play{ background: url(../../../up.wawa.fm/3,cfae712d0330.jpg) no-repeat center; background-size: 72px;   }
.re_audio_box>i.pause{ background: url(../../../up.wawa.fm/7,cfb0af172fec.jpg) no-repeat center; background-size: 72px;  }
.re_audio_box>a{ position: absolute; width: 48px; height: 48px; top: 36px; left: 36px; z-index: 11; opacity: .4; background-color: #000; border-radius: 48px }
.re_audio_box>ul>li:nth-child(1){ font-weight: bolder; font-family: "AvenirLTStd-Medium","Microsoft YaHei","PingFangSC-Medium",Helvetica,sans-serif; font-size: 16px; height: 18px; line-height: 18px; margin-top: 12px; letter-spacing: 1px }
.re_audio_box>ul>li:nth-child(2){ font-size: 14px; height: 16px; line-height: 16px; margin-top: 14px; letter-spacing: 1px }
.re_audio_box>time{ height: 120px; float: right; margin-right: 18px; line-height: 120px; color: #999; font-size: 14px }


.tip{position:fixed;top:100px;left:200px;padding:0 25px;height:64px;border-radius:6px;background-color:#fff;box-shadow:0 0 7px rgba(177,163,163,.4); animation: fadeinL .3s ease-out backwards; z-index: 30}
.tip:before{position:absolute;top:21px;z-index:3;width:0;height:0;border:10px solid transparent;content:'';}
.tip:after{position:absolute;top:19px;z-index:-1;width:0;height:0;border:12px solid transparent;content:'';filter:blur(1px)}
.tip.lefttip:before{ border-left-color:#fff; right:-19px;}
.tip.lefttip:after{ border-left-color:rgba(177,163,163,.23); right:-24px;}
.tip.righttip:before{ border-right-color:#fff; left: -19px }
.tip.righttip:after{ border-right-color:rgba(177,163,163,.23); left: -24px }
.tip>label{float:left;height:64px;color:#555;font-size:16px;line-height:64px}
.tip>a{float:left;margin-top:14px;margin-left:20px;width:38px;height:38px;cursor:pointer}
.tip>a.wechat{background:url(../../../up.wawa.fm/21,e40b39a55602.jpg) no-repeat center;background-size:cover}
.tip>a.weibo{background:url(../../../up.wawa.fm/18,e40a2a692807.jpg) no-repeat center;background-size:cover}
.tip>a.qqzone{background:url(../../../up.wawa.fm/21,e5bf9020a29b.jpg) no-repeat center;background-size:cover}
@keyframes fadeinL{ 0%{opacity:0; margin-left: 10px } 100%{opacity:1; margin-left: 0 } }

.code_box{ position: fixed; width: 100%; height: 100%; background-color: rgba(225,225,255,0.7); top: 0; left: 0; display: none; z-index: 30 }
.code_info{ height: 500px; width: 360px; height: 400px; box-sizing: border-box; padding: 30px; position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -180px; overflow: hidden; border-radius: 8px; background: #fff; box-shadow:0 0 7px rgba(177,163,163,.4); }
.code_info>div{ width: 280px; height: 280px; margin: 10px }
.code_info>p{ width: 300px; font-size: 16px; margin-top: 28px; height: 20px; text-align: center; line-height: 20px; letter-spacing: 1px }

.adimg{ width: 1060px; background-color: #fff; margin-bottom: 72px; border-radius: 12px; overflow: hidden; position: relative; }
.adimg>a{ background: url(../img/wa/artisttitle.svg) no-repeat center; position: absolute; top: 38px; right: 40px; width: 200px; background-size: cover; height: 40px; cursor: pointer;  }
.adimg>a:hover{  }
.contact_box{ margin-top: 60px; }
.contact_box>h1{ height: 28px; line-height: 28px; font-size: 20px; margin-bottom: 20px; letter-spacing: 2px }
.contact_box>p{ font-size: 16px; line-height: 30px; letter-spacing: 1px }