.b-box .audio-box {
	position:relative;
	float:left;
	overflow:hidden;
	margin-top:3px;
	margin-right:18px;
	margin-bottom:16px;
	width:284px;
	height:138px;
	background:#fff;
	box-shadow:0 0 9px rgba(0,0,0,.1);
	margin-left:5px;
	
}

.b-box .audio-box:hover {
 
	
}


.b-box .audio-box .audios {
	display:inline-block;
	width:284px;
	height:96px;
	background:#fffff
}
.b-box .audio-box .icon-bofang {
	float:left;
	display:block;
	margin-top:27px;
	margin-left:27px;
	width:51px;
	height:51px;
	background:url(/static/images/audio.png) -14px -16px no-repeat;
	cursor:pointer
}
.b-box .audio-box .icon-bofang.on {
	background-position:-85px -16px
}
.b-box .audio-box .title {
	float:left;
	display:block;
	overflow:hidden;
	margin-top:27px;
	margin-left:22px;
	width:165px;
	height:50px;
	text-align:left;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:14px;
	line-height:50px
}
.b-box .audio-box:hover .title {
	height:31px;
	line-height:19px
}
.b-box .audio-box .collect {
	float:left;
	display:none;
	margin-left:10px;
	width:29px;
	height:29px;
	border:1px solid #e5e5e5;
	border-radius:2px;
	background:url(/static/images/video.png) -12px 5px no-repeat #fff;
	cursor:pointer
}
.b-box .audio-box:hover .collect {
	display:block
}
.b-box .audio-box .c-chose {
	background:url(/static/images/video.png) -13px -37px no-repeat #fff
}
.b-box .audio-box .down {
	float:left;
	display:none;
	margin-left:23px;
	width:76px;
	height:31px;
	border-radius:2px;
	background:#007aff;
	color:#fff;
	font-size:14px;
	line-height:31px;
	cursor:pointer
}
.b-box .audio-box:hover .down {
	display:block
}
.b-box .audio-box .down:hover {
	background:#1b87fd
}
.b-box .audio-box .down i {
	display:inline-block;
	margin-right:3px;
	width:20px;
	height:30px;
	background:url(/static/images/video.png) -17px -77px no-repeat;
	vertical-align:-9px
}
.b-box .audio-box .times {
	display:inline-block;
	width:288px;
	height:30px
}
.b-box .audio-box .info {
	float:left;
	display:block;
	width:203px;
	height:100px
}
.b-box .audio-box .star-time {
	float:left;
	display:block;
	width:64px;
	height:23px;
	color:#696969;
	text-align:right;
	font-size:14px;
	line-height:23px
}
.b-box .audio-box .time-bar {
	position:relative;
	z-index:1;
	float:left;
	display:block;
	overflow:hidden;
	width:164px;
	height:24px;
	background:#bfbfbf;
	cursor:pointer
}
.b-box .audio-box .time-bar .progressBar {
	position:absolute;
	left:0;
	z-index:3;
	width:100%;
	height:100%;
	background:url(/static/images/audio.png) no-repeat -180px -30px
}
.b-box .audio-box .time-bar .move-color {
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	display:block;
	width:0;
	height:24px;
	height:100%;
	background-color:#658ae4
}
.b-box .audio-box .time-bar .timeTip {
	position:absolute;
	top:5px;
	left:0;
	z-index:3;
	width:40px;
	color:#0099e5;
	text-align:center;
	font-size:12px
}
.b-box .audio-box .end-time {
	float:left;
	display:block;
	width:40px;
	color:#696969;
	font-size:14px;
	line-height:23px
}
.middle .m-l .guangp {
	position:relative;
	display:inline-block;
	padding-top:80px;
	padding-bottom:70px;
	width:355px;
	height:321px;
	text-align:center
}
.middle .m-l .guangp .guxz {
	display:inline-block;
	width:359px;
	height:359px;
	background:url(/static/images/2.png)
}
.middle .m-l .guangp .dy {
	position:absolute;
	top:71px;
	right:-109px;
	width:85px;
	height:82px;
	background:url(/static/images/1.png) no-repeat -356px -18px
}
.middle .m-l .guangp .xy {
	position:absolute;
	top:71px;
	right:-108px;
	z-index:3;
	width:85px;
	height:85px;
	background:url(/static/images/1.png) no-repeat -450px -18px
}
.middle .m-l .guangp .gp {
	position:absolute;
	top:115px;
	right:-70px;
	width:173px;
	height:272px;
	background:url(/static/images/1.png) no-repeat -350px -138px;
	transition:all .6s ease-in-out;
	transform:rotate(-32deg);
	transform-origin:right top
}
.middle .m-l .guangp .imgs {
	transition:all .6s ease-in-out;
	transform:rotate(-32deg);
	transform-origin:right top
}
.middle .m-l .guangp .gp.skewing {
	transform:rotate(0)
}
.middle .m-l .guangp .xuanz {
	animation:circleRoate 200s;
	animation-timing-function:linear
}
.middle .m-l .audio-box {
	margin-bottom:35px;
	width:780px;
	height:100px;
	border-bottom:1px solid #c9c9c9;
	background:#fff
}
.middle .m-l .audio-box .icon-bofang {
	float:left;
	display:block;
	margin-left:40px;
	width:51px;
	height:51px;
	background:url(/static/images/audio.png) -14px -16px no-repeat;
	cursor:pointer
}
.middle .m-l .audio-box .icon-bofang.on {
	background-position:-85px -16px
}
.middle .m-l .audio-box .times {
	display:inline-block;
	width:288px;
	height:30px
}
.middle .m-l .audio-box .info {
	float:left;
	display:block;
	width:207px;
	height:100px
}
.middle .m-l .audio-box .star-time {
	float:left;
	display:block;
	margin-left:17px;
	width:59px;
	height:51px;
	color:#696969;
	text-align:center;
	font-size:20px;
	line-height:51px
}
.middle .m-l .audio-box .time-bar {
	position:relative;
	z-index:1;
	float:left;
	display:block;
	overflow:hidden;
	margin-top:5px;
	width:527px;
	height:41px;
	background:#bfbfbf;
	cursor:pointer
}
.middle .m-l .audio-box .time-bar .progressBar {
	position:absolute;
	left:0;
	z-index:3;
	width:100%;
	height:100%;
	background:url(/static/images/audio.png) no-repeat -16px -83px
}
.middle .m-l .audio-box .time-bar .move-color {
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	display:block;
	width:0;
	height:24px;
	height:100%;
	background-color:#658ae4
}
.middle .m-l .audio-box .time-bar .timeTip {
	position:absolute;
	top:5px;
	left:0;
	z-index:3;
	width:40px;
	color:#0099e5;
	text-align:center;
	font-size:12px
}
.middle .m-l .audio-box .end-time {
	float:left;
	display:block;
	width:52px;
	height:51px;
	color:#696969;
	font-size:20px;
	line-height:51px
}
@keyframes circleRoate {
	from {
	transform:rotate(0) infinite
}
to {
	transform:rotate(7600deg)
}
}.audio-width {
	height:166px!important
}
.audio-box .explain {
	display:block;
	padding:0 30px;
	background:#fff
}
.audio-box .p-title {
	display:block;
	overflow:hidden;
	width:100%;
	height:44px;
	border-bottom:1px solid #eceff1;
	color:#252525;
	text-align:left;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:13px;
	line-height:44px
}
.audio-box .coll {
	display:block;
	width:100%;
	height:44px;
	color:#838383;
	font-size:14px;
	font-family:Arial;
	line-height:44px
}
.audio-box .down-num {
	float:left;
	width:45%;
	text-align:left
}
@media screen and (max-width:1300px) {
	.b-box .audio-box {
	margin-right:13px;
	width:240px
}
.b-box .audio-box .title {
	width:115px;
	font-size:13px
}
.b-box .audio-box .info {
	width:150px
}
.b-box .audio-box .time-bar {
	width:118px
}
.middle .m-l .audio-box {
	width:650px
}
.middle .m-l .audio-box .time-bar {
	width:448px
}
.middle .m-l .audio-box .icon-bofang {
	margin-left:3px
}
.middle .m-l .audio-box .end-time {
	margin-left:11px;
	font-size:17px
}
.middle .m-l .audio-box .star-time {
	margin-left:10px;
	font-size:17px
}
}