﻿@charset "utf-8";
/* reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td,a { margin: 0; padding: 0; text-decoration:none; }
.clearBoth { clear: both; font-size: 1px; height: 1px; line-height: 1px; }
.clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.clearfix { display: inline-block; }
.clearfix { display: block; }
.l { float: left; }
.r { float: right; }
.m { text-align: center; line-height: 45px; cursor: pointer; }
body { background: none repeat scroll 0 0 #F4F4F4; color: #737173; font: 14px/1.5 u9ED1u4F53, Microsoft YaHei, 宋体, Arial, Verdana; }
ul { list-style: none outside none; }
li:hover, li:active, li { outline: 0 none; }
header, #menu, #footer, #playwrap { position: fixed; width: 100%; left: 0; overflow: hidden; }
header { height: 35px; top: 0; z-index: 1000; background: none repeat scroll 0 0 #F4F4F4; }
.h_logo { color: #69A3D3; float: left; font-size: 20px; width: 250px; margin: 5px 0 0 10px; font-weight: 400; }
.picStyle { height: 35px; width: 35px; margin: 4px 8px 0px 3px; }
.textBox { font-size: 14px; color: #1E1E1E; margin-top: 2px; }
.textBox p { color: #787878; font-size: 12px; white-space: nowrap; }
/*control*/
#playwrap { background: -webkit-linear-gradient(left, #69A3D4 0%, #4888BE 100%); background: -moz-linear-gradient(left center, #69A3D4 0%, #4888BE 100%) repeat scroll 0 0 transparent; background: #4888BE; color: #fff; bottom: 0; font-family: Microsoft YaHei; height: 70px; text-align: center; z-index: 1000; }
#playContent { height: 70px; margin: 0 auto; width: 320px; }
#progressWrap { background: none repeat scroll 0 0 #80ADD2; height: 3px; margin: 3px 0 0 10px; width: 298px; cursor: pointer; }
#progress { background: none repeat scroll 0 0 #FFFFFF; height: 3px; width: 0; }
.img { box-shadow: 0 0 5px #333333; float: left; height: 47px; margin: 8px 0 0 15px; width: 47px; }
.img img { border: 1px solid #6DABE1; cursor: pointer; height: 45px; width: 45px; }
.info { float: left; width: 240px; }
.control { margin: 2px 0 0; text-align: left; }
.audioControl a.last { background: url("bg3.png") no-repeat scroll -5px -108px transparent; }
.audioControl a { display: inline-block; height: 30px; margin: 0 0 0 8px; width: 30px; }
.audioControl a.pause { background: url("bg3.png") no-repeat scroll -4px -75px transparent; }
.audioControl a.play { background: url("bg3.png") no-repeat scroll -4px -144px transparent; }
.audioControl a.next { background: url("bg3.png") no-repeat scroll -7px -183px transparent; }
#modeButton { background-image: url("bg3.png"); background-repeat: no-repeat; margin-left: 16px; width: 35px; }
.audioControl a.mode-default { background-position: -6px -328px; }
.audioControl a.mode-random { background-position: -6px -224px; }
.audioControl a.mode-single { background-position: -6px -292px; }
#songname { color: #FFFFFF; float: left; background: red; font-size: 14px; margin: 4px 0 0 12px; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; width: 220px; }
#timeshow { color: #FFFFFF; float: right; font-size: 14px; }
#musicTitle { float: left; margin: 3px 0 0 15px; width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
#oWindow { position: fixed; z-index: 2000; top: 50%; left: 50%; background: -moz-linear-gradient(left center, #69A3D4 0%, #4888BE 100%) repeat scroll 0 0 transparent; background: -webkit-linear-gradient(left, #69A3D4 0%, #4888BE 100%); background: #4888BE; color: #fff; padding: 13px 20px; font-size: 16px; }
#menu { height: 36px; top: 0px; z-index: 1000; background: -webkit-linear-gradient(left, #69A3D4 0%, #4888BE 100%); background: -moz-linear-gradient(left center, #69A3D4 0%, #4888BE 100%) repeat scroll 0 0 transparent; background: #4888BE; }
.menu_tagList { color: #fff; line-height: 35px; font-size: 16px; }
.menu_tagList li { text-align: center; float: left; width: 25%; box-sizing: border-box; border-right: 1px solid #4F80AB; cursor: pointer; letter-spacing: 1.2px; }
.menu_tagList li.show { background: url(hoverbg.png) 0 0 no-repeat; background-size: 100%; }
#content-list { margin: 36px 0 77px 0; }
#content-list .hide { display: none; }
#content-list .show { display: block; }
.list-1 { overflow: hidden; }
.list-1 li { height: 68px; position: relative; border-bottom: 1px solid #ccc; margin: 0 10px; overflow: hidden; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; }
.list-1 li h3 { padding: 0 40px 0 68px; height: 38px; line-height: 38px; overflow: hidden; }
.list-1 li .left { position: absolute; top: 10px; left: 10px; width: 48px; height: 48px; }
.list-1 li p { height: 30px; line-height: 24px; padding-left: 68px; }
.list-1 li p a{ color:#555555;}
.list-1 li .more { position: absolute; top: 0; right: 0; width: 48px; height: 68px; z-index: 2; }
.list-1 li .more:before { content: ''; position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-width: 5px; border-style: solid dashed dashed dashed; border-color: #B0B0B0 transparent transparent transparent; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
.list-1 li h3.frmPause { color: #DD2E31; animation: zuoyoumove 5s infinite; -webkit-animation: zuoyoumove 5s infinite; }
@keyframes zuoyoumove {
50% {
padding-left:100px;
}
100% {
padding-left:68px;
}
}
 @-webkit-keyframes zuoyoumove {
50% {
padding-left:100px;
}
100% {
padding-left:68px;
}
}
.list-more { height: 58px; line-height: 58px; text-align: center; }
.more-box { background: #222; overflow: hidden; height: 40px;  }
.more-box a { display: block; float:left; width: 20%; text-align: center;line-height: 40px; color: #E3E0E0; text-decoration:none; }
.list-type{ overflow:hidden;}
.list-type li{ height:38px; padding:10px; border-bottom:1px solid #ccc;}
.list-type li a{ padding-left:10px; color:#555; font-size:16px; line-height:38px; text-decoration:none;}
.search-box{ height:38px; background:#E3E3E3; padding:10px; position:relative;}
.search-box input{ border:1px solid #CCCCCC; width:100%;height:100%; box-sizing:border-box;}
#search-btn{ position: absolute; top:10px; right:10px; bottom:10px; width:80px; background:#318ED0; text-align:center; line-height:38px; color:#F0ECEC;}
