anxiao_web/rtc/css/moveDeviceVideoTwo.css

html,body{
	width:100%;
	height:100%;
	background:#000;
	overflow: hidden;
	
}
#video{
	float:left;
	width:100%;
	height:720px;
	position: absolute;
	background-image:url("../walkBgVideo.png");
	background-repeat:no-repeat;
	background-size:100% 100%;
	z-index:100;
}
#agora_local,
.player{
	width:100%;
	height:100%;
}
#local-player{
	width:150px;
	height:100px;
	position:absolute;
	right:0;
	top:0;
	z-index: 9999999;
	background-color:#000;
}

#video>p{
	width:360px;
	height:120px;
	color:#fff;
	font-size:32px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-180px;
	margin-top:-100px;	
}
#video>p:hover{
	cursor: pointer;
}
#video>p>span{
	display: block;
	width:100%;
	height:45px;
	line-height:45px;
}
#video>p>img{
	display:block;
	width:60px;
	height:60px;
	margin:8px 120px;
}

.videoNav{
	position:absolute;
	width:100%;
	height:40px;
	line-height:40px;
	bottom:0px;
	left:0;
	background:#000;
	z-index:9999999;
}
.videoNav>p{
	float:left;
	height:40px;
	line-height:40px;
	margin-right:10px;
}
.videoNav>p>img{
	height:24px;
	padding:3px 5px;
	border-radius: 3px;
	border:1px solid #ccc;
}
.videoNav>p>img:last-child{
	margin-right:10px;
	padding:2px;
}

.videoNav>p:last-child{
	margin-left:5px;
}

.videoNav>p>img:first-child{
	margin-left:5px;
}
.videoNav>p:last-child>img{
	border:0;
	padding:0;
	margin-top:-2px;
}
.videoNav>p:last-child>span{
	color:#fff;
}
.layui-slider{
	float:left;
	width:70px;
	margin-top:18px;
}
.layui-slider-bar{
	background-color:#1296DB !important;
}
.layui-slider-wrap-btn{
	vertical-align: baseline;
}
.canvasImg{
	display: none;
	position: absolute;
	width: 100%;
	height:100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000000;
	background: rgba(0, 0, 0, 0.44);
}
.canvasImgBox{
	position: absolute;
	width:90%;
	height:66%;
	background: #000;
	left:5%;
	top:5%;
	font-size: 14px;
	border-radius:0 0 8px 8px;
	box-sizing: border-box;
	border:2px solid #fff;
}
canvas{
	width:100%;
	height:100%;
}
.canvasImgBox>p{
	height:40px;
}
.canvasImgBox>p{
	text-align: center;
}
.canvasImgBox>p>a,
.canvasImgBox>p>button{
	padding: 8px 24px;
    height: 36px;
    background: #229CDC;
    color: #fff;
    border: 0;
    margin-right: 5px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    
}
.canvasImgBox>p>a{
	padding:10px 24px;
}
.inTheVideo{
	width:100px;
	height:40px;
	z-index:99999999;
	right:10px;
	top:10px;
	position:absolute;
	line-height:40px;
	color:#000;
	font-size:20px;
	animation:mymove 6s infinite;
	display:none;
	background:#fff;
	padding:0px 10px;
	border-radius: 6px;
	
}
.inTheVideo>img{
	width:22px;
	height:22px;
	float:left;
	margin:9px 5px;
}

@keyframes mymove
{
	0%   {opacity:0;}
	25%  {opacity:0.5;}
	50%  {opacity:1;}
	75%  {opacity:0.5;}
	100%  {opacity:0;}
}


.videoTitle{
	position:absolute;
	z-index:9999999999999999999;
	background:#ccc;
	width:300px;
	height:140px;
	left:50%;
	top:50%;
	margin-top:-70px;
	margin-left:-150px;
	font-size:14px;
	border-radius:4px;
	border:1px solid #fff;
	display:none;
}

.videoTitle>p{
	text-align:center;
}
.videoTitle>p:nth-child(1){
	border-radius:4px 4px 0 0;
	height:30px;
	line-height:30px;
	text-align: center;
	background:#ccc;
	font-size:16px;
	font-weight: bold;
	border-bottom:1px solid #fff;
}

.videoTitle>p:nth-child(2){
	height:50px;
	line-height:50px;
}

.videoTitle>p:nth-child(3)>button{
	height:32px;
	line-height:28px;
	padding:0 12px;
	color:#000;
	border:0;
	font-size:14px;
	margin-right:5px;
}
	

.videoInfo{
	display:none;
	width:100%;
	z-index:99999999;
	left:0px;
	bottom:0px;
	position:absolute;
	color:#fff;
	font-size:14px;
	background:#000;
	opacity:0.6;
}

.videoInfo>p{
	float:left;
	height:36px;
	line-height:36px;
	margin-left:10px;
}