@charset "utf-8";
html,body{
	width: 100%;
}
a:hover{
	text-decoration: none;
}
#willesPlay{
	/*width: 1000px;
	height: 660px;*/
	/*width: 1024px;
	height: auto;*/
	margin: 0 auto;
	box-shadow: 0px 0px 0.15rem #333333;
	position: relative;
}
/*播放器头部*/

#willesPlay .playContent{
	position: relative;
	height: 100rem;
	overflow: hidden;
	background: #000;
	cursor: pointer;
}
#willesPlay .playContent .playTip{
	position: absolute;
	width: 0.6rem;
	height: 0.6rem;
	top: 50%;
	left: 50%;
	margin-left: -0.3rem;
	margin-top: -0.3rem;
	background: url(../images/button_bofang.png) no-repeat;
	background-size: 1rem 1rem;
	cursor: pointer;
}
#willesPlay .playControll{
	position: absolute;
	width: 100%;
	height: 0.48rem;
	bottom: 0;
	z-index: 1000;
	background-color: rgba(0,0,0,0.64);
	border-radius: 0px 0px 3px 3px;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
#willesPlay .fullControll{
	background:rgba(0,0,0,.5);
}
#willesPlay .fullControll .timebar span{
	color: #fff;
}
#willesPlay .playControll .playPause{
	float: left;
	width: 0.24rem;
	height: 0.26rem;
	background: url(../images/control_01.png) 0 0 no-repeat;
	background-size: 0.24rem 0.26rem;
	margin: 0.11rem 0 0.11rem 0.26rem;
	cursor: pointer;
}
#willesPlay .playControll .playIcon{
	background: url(../images/control_02.png) 0 0 no-repeat;
	background-size: 0.24rem 0.26rem;
}
/*进度条*/
#willesPlay .playControll .timebar{
float: left;
width: calc(100% - 2rem);
line-height: 0.48rem;
overflow: hidden;
margin: 0 auto;
margin: 0px 0px 0px 0.2rem;
}
#willesPlay .playControll .timebar .progress{
	float: left;
	width:60%;
	margin: 0.19rem 0.05rem;
	height: 0.1rem;
	cursor: pointer;
}
#willesPlay .playControll .timebar span{
	float: left;
	width: 18%;
	line-height: 0.48rem;
	text-align: center;
	color: #fff;
}
#willesPlay .otherControl{
	float: right;
	margin-right: 0.26rem;
	position: relative;
}

#willesPlay .otherControl span{
	display: inline-block;
	width: 0.3rem;
	height: 0.3rem;
	text-align: center;
	line-height: 0.3rem;
	vertical-align: middle;
	margin: 0.09rem  0.07rem;
	cursor: pointer;
}

#willesPlay .otherControl .volume-down{
	width: 0.26rem;
	height: 0.26rem;
	background: url(../images/volume-down.png) no-repeat;
	background-size: 0.26rem 0.26rem;
}
#willesPlay .otherControl .volume-off{
	width: 0.26rem;
	height: 0.26rem;
	background: url(../images/volume-off.png) no-repeat;
	background-size: 0.26rem 0.26rem;
}
#willesPlay .otherControl .volume-up{
	width: 0.26rem;
	height: 0.26rem;
	background: url(../images/volume-up.png) no-repeat;
	background-size: 0.26rem 0.26rem;
}
/*#willesPlay .otherControl span:nth-child(2){
	background-position: -171px 0px;
}*/
#willesPlay .otherControl span:nth-child(2){
	width: 0.26rem;
	height: 0.26rem;
	background: url(../images/fullscreen.png) no-repeat;
	background-size: 0.26rem 0.26rem;
	
}
/*音量*/
#willesPlay .otherControl .volumeBar{
	display: none;
	position: absolute;
	top: -1.1rem;
	left:0.04rem;
	width: 0.26rem;
	height: 1rem;
	background:#f1f2f2;
	border-radius: 4px;
	cursor: pointer;
}
#willesPlay .otherControl .volumeBar:after{
	content:"";
	display: block;
	position:absolute;
	bottom: -0.07rem;
	left: 0.05rem;
	width: 0;
    height: 0;
    border-left:0.08rem solid transparent;
    border-right: 0.08rem solid transparent;
    border-top: 0.08rem solid #f1f2f2;
}
#willesPlay .otherControl .volumeBar .volumewrap{
	background: #a2a7aa;
	width: 0.08rem;
	height: 0.8rem;
	position: absolute;
	bottom: 0.1rem;
	left: 0.09rem;
	border-radius: 4px;
}

#willesPlay .otherControl .volumeBar .progress{
	background: none;
}
#willesPlay .otherControl .volumeBar .progress-bar{
	position: absolute;
	bottom: 0;
	left: 0;
	border-radius: 4px;
}
video::-webkit-media-controls-enclosure {
    /*禁用播放器控制栏的样式*/
    display: none !important;
}
:-webkit-full-screen{}
.progress {
  height: 0.2rem;
  margin-bottom:0.2rem;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.progress-bar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 0.2rem;
  line-height: 0.2rem;
  color: #fff;
  text-align: center;
  background-color: #337ab7;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  -webkit-transition: width .6s ease;
       -o-transition: width .6s ease;
          transition: width .6s ease;
}
.progress-striped .progress-bar,
.progress-bar-striped {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  -webkit-background-size: 0.4rem 0.4rem;
          background-size: 0.4rem 0.4rem;
}
.progress-bar-danger {
  background-color: #F92222;
}
.progress-striped .progress-bar-danger {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}