/*reset*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
q:before, q:after { content: ''; }
abbr, acronym { border: 0; font-variant: normal; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
input:focus, textarea:focus, select:focus { outline: none; }
select, input { vertical-align: middle; }
legend { color: #000; }
.clean:before, .clean:after, .clearfix:before, .clearfix:after { content: ""; display: table; }
.clean:after, .clearfix:after { clear: both; }
.clean, .clearfix { zoom: 1; }
.clear { clear: both; }
.fl { float: left; }
.fr { float: right; }
.break { word-wrap: break-word; width: inherit; }
.linkhidden { text-indent: -9999em; overflow: hidden; }
.hidden { display: none; }
a{ text-decoration:none;}
/*reset*/


.navContent .menu{ width:600px; height:100px; background:#F00;}

.navContent li .menu{ float:left; margin-left:200px;}
.navContent li .menu dd a{ width:100px; height:20px; float:left; display:block; line-height:20px;}
.navContent li .menu dd a:hover{ background:#F00;}





/*主要样式*/
.subNavBox{width:15%;border:solid 1px #e5e3da; float:left;}
.subNav{border-bottom:solid 1px #e5e3da;cursor:pointer;font-weight:bold;font-size:14px;color:#999;line-height:28px;padding-left:10px;background:url(../images/jiantou1.jpg) no-repeat;background-position:95% 50%}
.subNav:hover{color:#277fc2;}
.currentDd{color:#277fc2}
.currentDt{background-image:url(../images/jiantou.jpg);}
.navContent{display: none;border-bottom:solid 1px #e5e3da;}
.navContent li a{display:block;width:100%;heighr:28px;text-align:center;font-size:14px;line-height:28px;color:#333}
.navContent li a:hover{color:#fff;background-color:#277fc2}





/*弹出开始*/

*{ margin:0; padding:0; list-style:none;}
#lanrenzhijia{ width:230px; height:300px;margin:10px auto; padding-right:12px; overflow:hidden; overflow:auto; }
#lanrenzhijia .qq-client-list{color:#999; font-size:12px; line-height:220%; text-align:left; text-indent:2em;}


/* qq-client */
.qq-client{position:fixed;left:0px;top:50%;margin-top:-80px;z-index:1000;}
.qq-client a{width:50px;height:240px;text-align:center;border:#ebebeb solid 1px; padding:0px 0px;line-height:40px;display:block;}
.qq-client-content{z-index:1000;position:fixed;right:-250px;top:25%;border:#ebebeb solid 1px;width:260px;display:none;background:#ffffff;}
.qq-client-content h1{font-size:14px;width:90%;margin:0px auto;text-align:center;height:50px;line-height:50px;border-bottom:#ebebeb solid 1px;position:relative;}
.qq-client-content h1 span{font-size:12px;font-weight:normal;position:absolute;left:233px;top:-20px;cursor:pointer;background:#ffffff;border:#ebebeb solid 1px;width:40px;height:40px;line-height:40px;border-radius:20px;text-align:center;}
.qq-client-list{background:#ffffff;}
.client-list{overflow:hidden;line-height:40px;width:90%;margin:0px auto;border-bottom:dashed 1px #ebebeb;}
.client-list a{display:block;}
.client-list a:hover{color:red;}
.client-list span{float:left;}
.client-list label{float:left;width:180px;text-align:right;padding-right:10px;}
/*reset*/

.navContent li{ border-bottom:1px solid #eee;}
.navContent .menu{ width:600px; height:100px; background:#F00;}

.navContent li .menu{ float:left; margin-left:200px;}
.navContent li .menu dd a{ width:100px; height:20px; float:left; display:block; line-height:20px;}
.navContent li .menu dd a:hover{ background:#F00;}





/*主要样式*/


.subNav:hover{color:#277fc2;}
.currentDd{color:#277fc2}

.navContent{display: none;border-bottom:solid 1px #e5e3da;}

.navContent li a:hover{color:#fff;background-color:#277fc2}


/*播放器开始*/
.left {
  float: left;
}

.right {
  float: right;
}

.clear {
  clear: both;
}



#player {
  width: 500px;
  height: 130px;
  padding: 25px;
  margin: 50px auto 30px;
  left:-200%;
  position:absolute;
  background:#3792ef;background:rgba(160, 208, 239, 0.6) none repeat scroll 0 0 !important;/*实现FF背景透明，文字不透明*/
filter:Alpha(opacity=60); background:#fff;/*实现IE背景透明*/}

#player .cover {
  background: rgba(0, 0, 0, 0.5);
 
  position: absolute;
  top: 25px;
  left: 25px;
  overflow: hidden;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  width: 130px;
  height: 130px;
  -moz-box-shadow: 0 2px 10px black;
  -webkit-box-shadow: 0 2px 10px black;
  -o-box-shadow: 0 2px 10px black;
}
#player .cover img {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  width: 130px;
  height: 130px;
}
#player .ctrl {
  margin-left: 155px;
  text-shadow: 0 1px 2px #fff;
  line-height: 16px;
}
#player .ctrl .tag strong, #player .ctrl .tag span {
  display: block;
  text-overflow: ellipsis;
   color:#09F;
}
#player .ctrl .tag span {
  font-size: 12px;
  margin-top: 5px;
  color: #666;
}
#player .ctrl .icon {
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  opacity: 0.6;
  cursor: pointer;
  width: 24px;
  height: 24px;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
#player .ctrl .icon:hover, #player .ctrl .icon.enable {
  opacity: 1;
}
#player .ctrl .icon:active {
  opacity: 0.3;
}
#player .ctrl .control {
  margin-top: 10px;
  height: 25px;
}
#player .ctrl .control .rewind {
  background-image: url(../images/rewind.png);
}
#player .ctrl .control .playback {
  background-image: url(../images/play.png);
}
#player .ctrl .control .playback.playing {
  background-image: url(../images/pause.png);
}
#player .ctrl .control .fastforward {
  background-image: url(../images/fastforward.png);
}
#player .ctrl .control .volume .mute {
  background-image: url(../images/volume.png);
}
#player .ctrl .control .volume .mute.enable {
  background-image: url(../images/mute.png);
}
#player .ctrl .control .volume .slider {
  margin-top: 11px;
  margin-left: 10px;
  width: 100px;
}
#player .ctrl .progress {
  margin-top: 10px;
}
#player .ctrl .progress .timer {
  font-size: 12px;
  color: #ccc;
  margin-top: 8px;
}
#player .ctrl .progress .repeat, #player .ctrl .progress .shuffle {
  background-position: center bottom;
}
#player .ctrl .progress .repeat {
  background-image: url(../images/repeat.png);
}
#player .ctrl .progress .repeat.once, #player .ctrl .progress .repeat.all {
  opacity: 1;
}
#player .ctrl .progress .repeat.once {
  position: relative;
}
#player .ctrl .progress .repeat.once:before {
  content: "1";
  position: absolute;
  top: 3px;
  right: -2px;
  font-size: 8px;
}
#player .ctrl .progress .shuffle {
  background-image: url(../images/shuffle.png);
}

.slider {
  background: rgba(0, 0, 0, 0.3);
  height: 5px;
  position: relative;
  cursor: pointer;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
  -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
}
.slider:hover a, .slider.enable a {
  opacity: 1;
}
.slider a {
  background: #fff;
  margin-left: -2.5px;
  position: absolute;
  opacity: 0;
  width: 5px;
  height: 5px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  -khtml-border-radius: 50%;
  border-radius: 50%;
  -moz-transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.slider .loaded, .slider .pace {
  position: absolute;
  height: 100%;
  opacity: 0.7;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}
.slider .loaded {
  background: rgba(255, 255, 255, 0.1);
}
.slider .pace {
  background: #00f6ff;
}

#playlist {
  background: rgba(0, 0, 0, 0.5);
  width: 470px;
  margin: 0 auto 50px;
  padding: 10px 15px;
  list-style: none;
  position: relative;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
#playlist li {
  color: #aaa;
  font-size: 12px;
  line-height: 2;
  padding-left: 25px;
  cursor: pointer;
  text-overflow: ellipsis;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
#playlist li:hover {
  color: #fff;
}
#playlist li.playing {
  background: url(../images/playing.png) no-repeat 0 center;
  color: #fff;
  font-weight: bold;
}

/*播放器结束*/


@media (max-width:2500px){
	.qq-client{ display:none;}
	.qq-client-content{ display:none;}
	
	
	
	}
@media (max-width:900px){
	.menu-103{ display:none;}
	
	}
	@media (max-width:900px){
	.qq-client{ display:block;}
	.qq-client-content{ display:bblock;}
	.subNavBox{width:200px;border:solid 1px #e5e3da;}
	.navContent li a{display:block;width:200px;heighr:28px;text-align:center;font-size:14px;line-height:28px;color:#333}
	
	}