/**
 * LivePlayer模块
 * @file liveplayer.css
 */
.liveplayer-frame{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 4.46rem;
	overflow: hidden;
}
.liveplayer-navbar{
	background-color: rgba(0, 0, 0, .35);
	color: #fff;
	width: 100%;
	height: .54rem;
	font-size: .20rem;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
}
.liveplayer-navbar > a,
.liveplayer-navbar > a:visited,
.liveplayer-navbar > a:hover,
.liveplayer-navbar > a:active{
	text-decoration: none;
	display: block;
	width: .54rem;
	height: 100%;
	line-height: .54rem;
	text-align: center;
	font-size: .28rem;
	color: #fff;
	background-color: rgba(0, 0, 0, .45);
}
.liveplayer-navbar > a:before{
	content: "\e645";
}
.liveplayer-navbar > span{
	display: block;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	   -moz-flex: 1;
	    -ms-flex: 1;
			flex: 1;
	height: 100%;
	line-height: .54rem;
	margin-left: .04rem;
	margin: 0 .08rem;
}
.liveplayer-controlbar{
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, .35);
	color: #fff;
	width: 100%;
	height: .68rem;
	font-size: .18rem;
	z-index: 5;
}
.liveplayer-frame.live .liveplayer-controlbar{
	height: .48rem;
}
.liveplayer-frame.live .liveplayer-progressbar{
	display: none;
}
.liveplayer-progressbar{
	height: .08rem;
	width: 100%;
	background-color: rgba(255, 255, 255, .25);
	position: absolute;
	top: .08rem;
	left: 0;
}
.liveplayer-progressbar-seeked{
	height: 100%;
	background-color: rgba(0, 101, 255, 1);
	z-index: 2;
	position: absolute;
	left: 0;
	top: 0;
}
.liveplayer-progressbar-seeked-bar{
	width: .20rem;
	height: .20rem;
	border-radius: 100%;
	position: absolute;
	top: -.06rem;
	background-color: rgba(0, 101, 255, .85);
	z-index: 3;
}
.liveplayer-progressbar-buffered{
	height: 100%;
	background-color: rgba(255, 255, 255, .35);
	z-index: 1;
	position: absolute;
	left: 0;
	top: 0;
}
.liveplayer-control{
	height: .48rem;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
}
.liveplayer-control-state{
	margin-left: .12rem;
}
.liveplayer-control-state .icofont{
	display: block;
	font-style: normal;
	width: .48rem;
	height: .48rem;
	text-align: center;
	line-height: .48rem;
	font-size: .32rem;
	margin-right: .08rem;
}
.liveplayer-control-state.pause .icofont:before{
	content: "\e674";
}
.liveplayer-control-state.play .icofont:before,
.liveplayer-frame.live .liveplayer-control-state.play .icofont:before{
	content: "\e673";
}
.liveplayer-frame.vod .liveplayer-control-state.play .icofont:before,
.liveplayer-frame.audio .liveplayer-control-state.play .icofont:before{
	content: "\e675";
}

.liveplayer-rate{
	margin: 0;
	padding: 0;
	margin-left: .36rem;
	height: .28rem;
	line-height: .28rem;
	width: .64rem;
	text-align: center;
	border-radius: .06rem;
	color: #000;
	font-size: .20rem;
	background-color: rgba(255, 255, 255, .35);
}

.liveplayer-control-player{

}
.liveplayer-control-player .icofont{
	display: block;
	font-style: normal;
	width: .48rem;
	height: .48rem;
	text-align: center;
	line-height: .48rem;
	font-size: .32rem;
	margin-right: .08rem;
}
.liveplayer-control-player .liveplayer-button-volume{
	width: 1.68rem;
	height: .16rem;
	background-color: transparent;
	margin-right: .18rem;
}
.liveplayer-control-player .liveplayer-button-volume b{
	font-weight: normal;
	display: block;
	width: .48rem;
	height: .48rem;
	line-height: .48rem;
	color: #fff;
	text-align: center;
	margin-right: 0;
}
.liveplayer-control-player .liveplayer-button-volume b:before{
	content: "\e678";
	margin-right: 0;
}
.liveplayer-control-player .liveplayer-button-volume b.muted:before{
	content: "\e677";
}
.liveplayer-control-player .liveplayer-button-volume code{
	position: relative;
	display: block;
	width: 1.20rem;
	height: .04rem;
	background-color: #fff;
}
.liveplayer-control-player .liveplayer-button-volume i{
	display: block;
	position: absolute;
	left: 0%;
	top: -.06rem;
	width: .16rem;
	height: .16rem;
	border-radius: 100%;
	font-style: normal;
	background-color: rgba(0, 101, 255, .85);
}
.liveplayer-control-player .fullscreen{

}
.liveplayer-control-player .fullscreen:before{
	content: "\e670";
}
.liveplayer-control-player .fullscreen.exit:before{
	content: "\e672";
}
.liveplayer-master{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
	background-color: rgba(0, 0, 0, .75);
}
.liveplayer-master .liveplayer-media{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 1;
}
.liveplayer-master .liveplayer-visualizer{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 5;
}
.liveplayer-master-mask{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	/*background-color: transparent;*/
	background-color: rgba(0, 0, 0, .50);
}
.liveplayer-master-mask ins,
.liveplayer-master-mask sub,
.liveplayer-master-mask sup{
	background-color: transparent;
	color: #fff;
	display: block;
}
.liveplayer-frame.audio .liveplayer-master-mask{
	background-color: rgba(0, 0, 0, 0);
}
.liveplayer-frame.audio .liveplayer-master-mask ins{
	margin: 0 .48rem;
}
.liveplayer-master-mask ins:before{
	content: "\e674";
	font-size: .48rem;
	background-color: rgba(0, 0, 0, .35);
    border-radius: 100%;
    overflow: hidden;
    display: block;
    width: .72rem;
    height: .72rem;
    line-height: .76rem;
    text-align: center;
    text-indent: .08rem;
    border: 2px solid #fff;
}
.liveplayer-master-mask ins.pause:before{
	content: "\e675";
	text-indent: 0;
}
.liveplayer-master-mask sub:before,
.liveplayer-master-mask sup:before{
	content: "\e6ad";
	font-size: .28rem;
	background-color: rgba(0, 0, 0, .35);
    border-radius: 100%;
    overflow: hidden;
    display: block;
    width: .56rem;
    height: .56rem;
    line-height: .56rem;
    text-align: center;
    border: 2px solid #fff;
}
.liveplayer-master-mask sup:before{
	content: "\e6ac";
}
.liveplayer-master-mask sub.disabled,
.liveplayer-master-mask sup.disabled{
	color: #666;
	cursor: not-allowed;
}
.liveplayer-master-mask sub.disabled:before,
.liveplayer-master-mask sup.disabled:before{
	border-color: #666;
}
.liveplayer-master-mask.liveplayer-error ins{
	color: #fff;
	margin: 0 .18rem;
    text-align: center;
    line-height: 1.3;
    font-size: .32rem;
}
.liveplayer-master-mask.liveplayer-error sub,
.liveplayer-master-mask.liveplayer-error sup{
	display: none;
}
.liveplayer-master-mask.liveplayer-error ins:before,
.use-native .liveplayer-master-mask ins:before{
	content: none!important;
}
.liveplayer-master-mask.liveplayer-error ins a,
.liveplayer-master-mask.liveplayer-error ins a:visited,
.liveplayer-master-mask.liveplayer-error ins a:hover,
.liveplayer-master-mask.liveplayer-error ins a:active{
	text-decoration: none;
	color: #fff;
	margin-left: .10rem;
}

.liveplayer-frame .liveplayer-navbar,
.liveplayer-frame .liveplayer-controlbar{
	-webkit-transition: all ease .4s;
	   -moz-transition: all ease .4s;
	    -ms-transition: all ease .4s;
			transition: all ease .4s;
	-webkit-transform: translateY(0) translateZ(0);
	   -moz-transform: translateY(0) translateZ(0);
	    -ms-transform: translateY(0) translateZ(0);
			transform: translateY(0) translateZ(0);
}
.liveplayer-frame.hidebars{

}
.liveplayer-frame.hidebars .liveplayer-navbar{
	-webkit-transform: translateY(-100%) translateZ(0);
	   -moz-transform: translateY(-100%) translateZ(0);
	    -ms-transform: translateY(-100%) translateZ(0);
			transform: translateY(-100%) translateZ(0);
}
.liveplayer-frame.hidebars .liveplayer-controlbar{
	-webkit-transform: translateY(100%) translateZ(0);
	   -moz-transform: translateY(100%) translateZ(0);
	    -ms-transform: translateY(100%) translateZ(0);
			transform: translateY(100%) translateZ(0);
}
.liveplayer-frame.hidebars .liveplayer-controlbar .liveplayer-progressbar-seeked-bar{
	display: none;
}

:-webkit-full-screen .liveplayer-media,
:-moz-full-screen .liveplayer-media,
:-ms-full-screen .liveplayer-media,
:-o-full-screen .liveplayer-media,
:full-screen .liveplayer-media{
  width: 100%;
  height: 100%;
}
:-webkit-full-screen .liveplayer-visualizer,
:-moz-full-screen .liveplayer-visualizer,
:-ms-full-screen .liveplayer-visualizer,
:-o-full-screen .liveplayer-visualizer,
:full-screen .liveplayer-visualizer{
  width: 100%;
  height: 100%;
}