#Screen { margin-top: 20px; text-align: center; }

#Screen .left-div { display: inline-block; }

#Screen .left-div .scr-item { display: inline-block; position: relative; height: 45px; }

#Screen .left-div .scr-item > h1 { border: 1px solid #e6e6e6; padding: 9px 27px 9px 31px; border-radius: 18px; font-size: 16px; color: #333; margin-right: 20px; cursor: pointer; }

#Screen .left-div .scr-item > h1::after { content: ''; display: inline-block; width: 10px; height: 6px; background-size: 100% 100%; background-image: url("/style/yinxiao/images/btn_xiala@2x.png"); margin-left: 8px; vertical-align: middle; margin-bottom: 2px; }

#Screen .left-div .scr-item > p { border: 1px solid #e6e6e6; padding: 9px 27px 9px 31px; border-radius: 18px; font-size: 16px; color: #333; margin-right: 20px; cursor: pointer; }

#Screen .left-div .scr-item > p::after { content: ''; display: inline-block; width: 10px; height: 6px; background-size: 100% 100%; background-image: url("/style/yinxiao/images/btn_xiala@2x.png"); margin-left: 8px; vertical-align: middle; margin-bottom: 2px; }

#Screen .left-div .scr-item .scr-item-div { box-shadow: 0px 4px 7px 3px rgba(0, 0, 0, 0.1); position: absolute; width: 980px; display: none; background-color: #fff; z-index: 10; top: 45px; left: 50%; transform: translateX(-50%); overflow-y: auto; max-height: 500px; z-index: 110; }

#Screen .left-div .scr-item .scr-item-div p { line-height: 50px; border-bottom: 1px solid #f5f5f5; width: 120px; font-size: 15px; cursor: pointer; color: #333333; float: left; height: 50px;overflow: hidden;}

#Screen .left-div .scr-item .scr-item-div p:hover { color: #f7682d; }

#Screen .left-div .scr-item .scr-item-div p.on { color: #f7682d; }

#Screen .left-div .scr-item .time-item-div { position: absolute; width: 210px; background-color: #fff; z-index: 10; top: 45px; display: none; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1); }

#Screen .left-div .scr-item .time-item-div .time-item-top { padding-top: 20px; }

#Screen .left-div .scr-item .time-item-div .time-item-top input { width: 56px; height: 20px; border: 1px solid #e6e6e6; padding-left: 5px; font-size: 14px; }

#Screen .left-div .scr-item .time-item-div .time-item-top span { margin-right: 5px; margin-left: 5px; }

#Screen .left-div .scr-item .time-item-div p { text-align: center; height: 25px; cursor: pointer; width: 70px; line-height: 25px; background: linear-gradient(90deg, #63a2ff 0%, #347ce8 100%); margin: 0 auto; color: white; border-radius: 5px; margin-top: 10px; margin-bottom: 10px; }

#Screen .left-div .scr-item:hover > p { border: 1px solid #007fff; background: rgba(0, 127, 255, 0.05); color: #007fff; }

#Screen .left-div .scr-item:hover > p::after { background-image: url("/style/yinxiao/images/btn_xiala_blue@2x.png"); }

#Screen .left-div .scr-item:hover .scr-item-div { display: block; }

#Screen .left-div .scr-item:hover .time-item-div { display: block; }

#Screen .left-div .scr-item.active > p { border: 1px solid #666666; }

#Screen .left-div .scr-item:last-child > h1 { margin-right: 0; }

#Screen .left-div .scr-item:last-child > p { margin-right: 0; }

#Screen .right-div { display: inline-block; vertical-align: top; margin-left: 20px; }

#Screen .right-div::before { content: ''; width: 1px; height: 30px; background-color: #e6e6e6; display: inline-block; margin-bottom: 3px; vertical-align: bottom; margin-right: 20px; }

#Screen .right-div .business { display: inline-block; cursor: pointer; width: 128px; text-align: left; height: 36px; vertical-align: top; border: 1px solid #dfbe86; border-radius: 6px; background-color: rgba(223, 190, 134, 0.15); font-size: 16px; color: #dfbe86; line-height: 34px; }

#Screen .right-div .business::before { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e651"; font-size: 22px; margin-right: 3px; padding-left: 15px; color: #dfbe86; vertical-align: inherit; }
#Screen .right-div  .zbsyyx{
  display: inline-block;
  height: 36px;
  line-height: 36px;
  background-color: #007fff;
  color:white;
  font-size: 16px;
  margin-left: 12px;
  border-radius: 6px;
  padding: 0 12px;
}

#Screen .scr-item.active > h1 { border: 1px solid #666666; }

#Screen .right-div > .business:hover, #Screen .right-div > .business.active { color: white; background-color: #dfbe86; }

#Screen .right-div > .business:hover::before, #Screen .right-div > .business.active::before { color: white; }

#AudioList { margin-top: 15px; min-height: 280px; }

#AudioList .audio-item { height: 80px; border-bottom: 1px solid #f0f0f0; width: 100%; }

#AudioList .audio-item:last-child { border-bottom: none; }

#AudioList .audio-item > div { float: left; }

#AudioList .audio-item .audio-head { width: 400px; overflow: hidden; margin-top: 15px; }

#AudioList .audio-item .audio-head > div { float: left; }

#AudioList .audio-item .audio-head .head-btn { width: 50px; height: 50px; border-radius: 50%; background-image: url(../images/img_gray@2x.png); background-size: 100% 100%; cursor: pointer; }

#AudioList .audio-item .audio-head .head-btn img { width: 18px; height: auto; margin-top: 13px; margin-left: 18px; }

#AudioList .audio-item .audio-head .head-btn .suspend-img { display: none; margin-left: 16px; }

#AudioList .audio-item .audio-head .head-btn .loding-img { display: none; width: 30px; height: 30px; margin-top: 10px; margin-left: 10px; animation: rotate 2s linear infinite; }

#AudioList .audio-item .audio-head .head-btn:not(.playing):hover { background-image: url(../images/img_orange@2x.png); }

#AudioList .audio-item .audio-head .head-btn.playing { background-image: url(../images/img_orange@2x.png); }

#AudioList .audio-item .audio-head .head-btn.playing .ing-img { display: none; }

#AudioList .audio-item .audio-head .head-btn.playing .suspend-img { display: block; }

#AudioList .audio-item .audio-head .head-btn.loading { background-image: url(../images/img_orange@2x.png); }

#AudioList .audio-item .audio-head .head-btn.loading .ing-img { display: none; }

#AudioList .audio-item .audio-head .head-btn.loading .suspend-img { display: none; }

#AudioList .audio-item .audio-head .head-btn.loading .loding-img { display: block; }

#AudioList .audio-item .audio-head .right-head { margin-left: 19px; width: 322px; overflow: hidden; }

#AudioList .audio-item .audio-head .right-head .name { font-size: 14px; color: #333333; font-weight: 600; margin-bottom: 11px; margin-top: 4px; max-width: 485px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

#AudioList .audio-item .audio-head .right-head .audio-class a { font-size: 14px; color: #007fff; margin-right: 7px; }

#AudioList .audio-item .audio-head .right-head .audio-class a::after { content: ''; margin-left: 7px; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background-color: #000; vertical-align: middle; }

#AudioList .audio-item .audio-head .right-head .audio-class a:hover { color: #f7682d; }

#AudioList .audio-item .audio-head .right-head .audio-class a:last-child::after { width: 0px; height: 0px; }

#AudioList .audio-item .audio-progress { margin-left: 51px; width: 425px; height: 30px; position: relative; background-color: #333333; margin-top: 26px; }

#AudioList .audio-item .audio-progress .loadpro { width: 425px; height: 30px; position: absolute; top: 0; left: 0; }

#AudioList .audio-item .audio-progress .pace { height: 30px; position: absolute; top: 0; left: 0; background-color: #357ce8; }

#AudioList .audio-item .audio-progress .bj { width: 425px; height: 30px; position: absolute; top: 0; background-image: url("../images/img_yinxiao.png"); background-size: 100% 100%; background-repeat: no-repeat; left: 0; cursor: pointer; }

#AudioList .audio-item .audio-time { margin-left: 109px; }

#AudioList .audio-item .audio-time p { font-size: 16px; color: #333; padding-top: 32px; }

#AudioList .audio-item .audio-operation { float: right; }

#AudioList .audio-item .audio-operation p { font-size: 16px; color: #333333; cursor: pointer; }

#AudioList .audio-item .audio-operation p:hover { color: #f7682d; }

#AudioList .audio-item .audio-operation p:hover a { color: #f7682d; }

#AudioList .audio-item .audio-operation p:hover.free-download::before { background-image: url("/style/yinxiao/images/btn_download_h@2x.png"); }

#AudioList .audio-item .audio-operation p:hover.pay-download::before { background-image: url("/style/yinxiao/images/btn_gouwuche_h@2x.png"); }

#AudioList .audio-item .audio-operation p.free-download { display: none; padding-top: 29px; }

#AudioList .audio-item .audio-operation p.free-download::before { content: ''; display: inline-block; margin-right: 5px; width: 16px; height: 20px; background-image: url("/style/yinxiao/images/btn_download_n@2x.png"); vertical-align: middle; background-size: 100% 100%; margin-bottom: 2px; background-repeat: no-repeat; }

#AudioList .audio-item .audio-operation p.pay-download { padding-top: 28px; }

#AudioList .audio-item .audio-operation p.pay-download::before { content: ''; margin-right: 1px; display: inline-block; width: 22px; height: 20px; background-image: url("/style/yinxiao/images/btn_gouwuche_n@2x.png"); vertical-align: middle; background-size: 100% 100%; margin-bottom: 3px; }

#AudioList .audio-item .audio-operation.free .free-download { display: block; }

#AudioList .audio-item .audio-operation.free .pay-download { display: none; }

#HotCollection { margin-top: 30px; }

#HotCollection .hot-head p { font-size: 18px; color: #333; padding-left: 6px; }

#HotCollection .hot-cont { margin-top: 19px; }

#HotCollection .hot-cont .item { float: left; width: 224px; height: 126px; position: relative; margin-right: 20px; margin-bottom: 24px; cursor: pointer; }

#HotCollection .hot-cont .item:last-child { margin-right: 0; }

#HotCollection .hot-cont .item img { width: 100%; height: 100%; }

#HotCollection .hot-cont .item p { width: 100%; height: 30px; line-height: 30px; position: absolute; bottom: 0; text-align: center; color: white; background-color: rgba(0, 0, 0, 0.2); }

#HotCollection .hot-cont .item div { position: absolute; top: 0; left: 0; display: none; width: 100%; height: 100%; background: #357ce8; opacity: 0.4; }

#HotCollection .hot-cont .item:hover div { display: block; }

#Search-Tip { margin-top: 21px; }

#Search-Tip .container { text-align: center; }

#Search-Tip .container p { font-size: 24px; color: #999; }

#Search-Tip .container p span { color: #333333; font-size: 24px; }

#NoAudioList { margin-top: 87px; margin-bottom: 117px; display: none; }

#NoAudioList .container { text-align: center; }

#NoAudioList .container img { width: 242px; height: 280px; }

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