/*公共样式*/
.header .layui-nav-child{ z-index:99999; top:60px; left: auto; right: 0;}
.seraph{ font-size:16px !important;}
.main_body{ min-width:320px; }
.layui-nav .layui-nav-item a{ cursor:pointer;}
.layui-nav .layui-nav-item>a{ color:rgba(255,255,255,1); max-height:60px;}
.layui-layer-tab .layui-layer-title span{ padding:0 !important;}
iframe{ position:absolute; height:100%; width:100%; border:none;}
.top_menu.layui-nav .layui-nav-child dd.layui-this a,.closeBox.layui-nav .layui-nav-child dd.layui-this a,.closeBox .layui-nav-child dd.layui-this,.top_menu .layui-nav-child dd.layui-this{ background:none; color:#333;}
.layui-nav .layui-nav-child a:hover,.layui-nav .layui-nav-child dd.layui-this a:hover{background-color:#5FB878;color:#fff;}
.layui-layout-admin .layui-body{}
/*模拟加载层图标样式*/
.layui-layer-dialog .layui-layer-content .layui-layer-ico16{ background-size:100% 100% !important; }
/*样式改变的过渡*/
.layui-body,.layui-footer,.layui-layout-admin .layui-side,.logo,.topLevelMenus li.layui-nav-item,.topLevelMenus li.layui-nav-item:hover{ transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; }
/*隐藏*/
*[mobile],.component .layui-select-title i.layui-edge{ display:none;}

/*打开页面动画*/
.layui-tab-item.layui-show{ animation:moveTop 1s; -webkit-animation:moveTop 1s; animation-fill-mode:both; -webkit-animation-fill-mode:both; position:relative; height:100%; -webkit-overflow-scrolling: touch; overflow:auto; }
@keyframes moveTop{
	0% {opacity: 0;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}
	100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
}
@-o-keyframes moveTop{
	0% {opacity: 0;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}
	100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
}
@-moz-keyframes moveTop{
	0% {opacity: 0;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}
	100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
}
@-webkit-keyframes moveTop{
	0% {opacity: 0;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}
	100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
}
/*锁屏*/
.admin-header-lock{width: 320px; height: 170px; padding: 20px; position: relative; text-align: center;}
.admin-header-lock-img{width:70px; height:70px; margin: 0 auto;}
.admin-header-lock-img img{width:70px; height:70px; border-radius: 100%; box-shadow:0 0 30px #44576b;}
.admin-header-lock-name{color: #009688;margin: 8px 0 15px 0;}
.input_btn{ overflow: hidden; margin-bottom: 10px; }
.admin-header-lock-input{width: 170px; color: #fff;background-color: #009688; float: left; margin:0 10px 0 40px; border:none;}
.admin-header-lock-input::-webkit-input-placeholder {color:#fff;}
.admin-header-lock-input::-moz-placeholder {color:#fff;}
.admin-header-lock-input:-ms-input-placeholder {color:#fff;}
.admin-header-lock-input:-moz-placeholder {color:#fff;}
#unlock{ float: left; }
#lock-box p{ color:#e60000; }
/*顶部*/
.header{ z-index:2000;}
.logo{ color: #fff; float: left; line-height:60px; font-size:20px; padding:0 25px; text-align: center; width:150px;}
.hideMenu{ float:left; width:20px; height:20px; margin-top:15px; font-size:17px; line-height:20px; text-align:center; padding:5px 5px; color:#fff; background-color:#1AA094; }
.hideMenu:hover{ color:#fff; }
.layui-nav cite{ margin-left: 5px;}
/*顶部右侧*/
.topLevelMenus{float:left;}
.topLevelMenus li.layui-nav-item:hover{ background-color:rgba(221,221,221,0.2);}
.layui-nav .layui-this:after{ bottom:-5px!important;}
.header .layui-nav-bar{top:60px !important;}
.topLevelMenus .layui-nav-item.layui-this{ background-color:rgba(0,0,0,0.5);}
.top_menu.layui-nav .layui-this:after{ width:0px; }
.top_menu .layui-nav-bar,.mobileTopLevelMenus .layui-nav-bar{background-color:rgba(0,0,0,0.7);}

/*左侧导航*/
.layui-nav{background-color: inherit !important;}
.showMenu.layui-layout-admin .layui-side{ left:-200px; }
.showMenu .layui-body,.showMenu .layui-footer{ left:0; }
/*左侧用户头像*/
.top_menu{ background-color:inherit !important; position:absolute; right:0;top:0; }
.layui-layout-admin .layui-side{ left:0; overflow:hidden;}
/*左侧导航重定义*/
.layui-nav-item.layui-nav-itemed{ background-color:#2B2E37 !important;}
.layui-nav-itemed:before{ width:5px; height:100%; background-color:#009688; position:absolute; content:''; left:0; top:0;}
.layui-nav-itemed .layui-nav-child a{ padding-left:40px;}

/*layui-body*/
.layui-body{overflow:hidden; border-top:5px solid #1AA094;border-left:2px solid #1AA094; background:#fff;}
#top_tabs_box{ padding-right:138px; height:40px; border-bottom:1px solid #e2e2e2; }
#top_tabs{ position: absolute; border-bottom:none;}
.layui-tab-title .layui-this{ background-color:#1AA094; color:#fff; }
.layui-tab-title .layui-this:after{ border:none; }
.layui-tab-title li cite{ font-style: normal; padding-left:5px; }
.clildFrame.layui-tab-content{ top:41px; position:absolute; bottom:0; width:100%; padding:0;}

.layui-layout-admin .layui-header{ background-color:#004873 !important; }
.layui-bg-black, .hideMenu{ background-color:#00639D !important; }

/*自定义*/
.skinCustom{ visibility:hidden; }
.skinCustom input{ width:48%; margin:5px 2% 5px 0; float:left; }
.orange .layui-nav-tree .layui-nav-child a,.blue .layui-nav-tree .layui-nav-child a{ color:#fff; }
.orange .top_menu.layui-nav .layui-nav-more,.blue .top_menu.layui-nav .layui-nav-more{border-color:#fff transparent transparent !important;}
.orange .top_menu.layui-nav-itemed .layui-nav-more,.orange .top_menu.layui-nav .layui-nav-mored,.blue .top_menu.layui-nav-itemed .layui-nav-more,.blue .top_menu.layui-nav .layui-nav-mored{border-color:transparent transparent #fff !important;}
/*底部*/
.footer{ text-align: center; line-height:44px;border-left: 2px solid #1AA094; z-index:999;}

.layui-side-right{position: fixed;right: -260px;top: 0;bottom: 0;z-index: 999;width: 200px;overflow-x: hidden}

/*响应式样式*/
@media screen and (max-width:1080px){
	.mobileTopLevelMenus[mobile]{display:inline-block;}
	.site-mobile .site-tree-mobile,.topLevelMenus[pc]{display:none !important;}
}
@media screen and (max-width: 720px){
	.hideMenu{ display: none !important; }
	.mobileTopLevelMenus[mobile]{ padding:0;}
	.top_menu>li[pc]{ display: none !important; }
	/*左侧导航*/
	.layui-layout-admin .layui-side{ left:-260px; }
	.site-mobile .layui-side{ left: 0; z-index:1100; }
	.site-tree-mobile {display: block!important; position: fixed; z-index: 100000; bottom: 15px; left: 15px; width:40px; height:40px; line-height:40px; border-radius: 2px; text-align: center; background-color: rgba(0,0,0,.7); color: #fff;}
	.site-mobile .site-mobile-shade { content: ''; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.8); z-index: 999;}
	.layui-body,.layui-layout-admin .layui-footer{ left:-2px; }
	.logo{display: none !important; }
	.state{position: relative !important;; left:20px !important;}
}
@media screen and (max-width:480px){
	.logo{ width:120px; font-size: 18px;}
	#userInfo>a{ padding:0 10px;}
	.mobileTopLevelMenus[mobile] li>a{ padding:0 17px 0 15px;}
	.logo,.layui-nav.top_menu{ padding:0 5px;}
	.adminName,.top_menu dd[pc]{ display: none !important; }
	*[mobile],.top_menu .layui-nav-item.showNotice[pc]{ display:inline-block !important; }
}

/*修改顶部高度*/
.header .layui-nav-child,.layui-body,.layui-layout-admin .layui-side,.header .layui-nav-bar, .layui-layout-admin .layui-side-right{ top:50px !important;}
.header .layui-nav .layui-nav-item,.header .layui-nav .layui-nav-item>a,.header,.logo{ line-height:50px !important; max-height:50px; !important;}
.mobileTopLevelMenus{ float:left;}
.hideMenu{ margin-top: 10px;}

*{margin: 0;padding: 0;}

#container {
	position: absolute;
	height: 100%;
	width: 100%;
}
#output {
	width: 100%;
	height: 100%;
}
.state{
	color: #000000;
    left: calc(50%);
	top: calc(50%);
	font-size: 18px;
}
.closeAll cite{
	font-size: 16px;
	font-weight: bold;
	color: #f74040fc !important;
}
.statusImg{
	width: 20px;
	height: 20px;
	background-size: cover !important;
	background-repeat:no-repeat;
	border:0;
}

li[devicestatus = "Start"] .statusImg{
	-webkit-animation: myfirst 3s infinite ease-in-out;
    animation: myfirst 3s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes myfirst {
    0% {
        opacity: 0.8;
        filter: alpha(opacity=50);
        -webkit-transform: scale(1.0);
		background:url('../images/alarm.Normal.png');
		background-size: cover;
    }
    50% {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: scale(1.1);
    }
    100% {
        opacity: 0.8;
        filter: alpha(opacity=50);
        -webkit-transform: scale(1.0);
		background:url('../images/alarm.Start.png');
		background-size: cover;
    }
}
@keyframes myfirst{
   0% {
        opacity: 0.8;
        filter: alpha(opacity=50);
		transform: scale(1.0);
        -webkit-transform: scale(1.0);
		background:url('../images/alarm.Normal.png');
		background-size: cover;
		background-repeat:no-repeat;
    }
    50% {
        opacity: 1;
        filter: alpha(opacity=100);
		transform: scale(1.1);
        -webkit-transform: scale(1.1);
    }
    100% {
        opacity: 0.8;
        filter: alpha(opacity=50);
		transform: scale(1.0);
        -webkit-transform: scale(1.0);
		background:url('../images/alarm.Start.png');
		background-size: cover;
    }
}


.layui-layer-content li{
	width: 100%;
	height: 45px;
	line-height: 45px;
	text-align: center;
	margin: 4px 0px;
	background: #e1e1e1;
	
}

.layui-layer-content li:hover{
	background: #efefef;
}
.mainContent {
	margin:0 auto;
	text-align:center;
	background-image:url("../images/main_bg.jpg");   
	background-size: cover;
	display: flex !important;
	display: -webkit-flex !important;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

}

.playDiv,.playNtyDiv{
	position: relative;
	display:inline-block;
	margin: 20px;
	border: 5px  white;
	border-style: inset;
	box-shadow: 5px 5px 5px #888888;
	vertical-align:middle;
}
.anim-scaleSpring{
	animation-name: scale-spring;
	-webkit-animation-name: scale-spring;
	animation-duration: .5s;
	-webkit-animation-duration: .5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
@-webkit-keyframes scale-spring {
	0%{
		opacity: .5;
		transform: scale(.5);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes scale-spring{
   0%{
		opacity: .5;
		transform: scale(.5);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
.anim-fadeout{
	animation-name: fadeout;
	-webkit-animation-name: fadeout;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
@-webkit-keyframes fadeout {
	0%{
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes fadeout{
   0%{
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.selectVideo{
	border:5px red;
	border-style: inset;
}

.videoboxDiv{
	border:1px solid white; 
	height: calc(100% - 52px);
	background: rgba(8, 8, 8, 0.8);
	position:relative;
}
.operateDiv{
	height:50px;
	line-height:50px; 
	border:1px solid white;
	bottom: 0px;
	text-align:center;
	position: absolute;
	width: 100%;
	background: rgba(0, 0, 0, 1) none repeat scroll 0 0 !important; 
	filter:alpha(opacity=20);
}
.videoboxDiv span{
	position:absolute;
	bottom: 10px;
	right: 10px;
	color: white;
	z-index:2;
}
video{
	height: 100%;
	width: 100%;
}

video::-webkit-media-controls{
    display:none !important;
}
.loading{
	position:absolute;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	margin: 0 auto;
	left: calc(50% - 100px);
	top: calc(50% - 100px);
}
.operateDiv button{
    margin: 5px 20px;
	height: 40px;
	width: 40px;
	/* background-size: 80%; */
	background-position: center;
	border: 0px;
}
.operateDiv button:active{
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;  
}
.operateDiv button:hover{
	transform: scale(1.1);
}
.talk{
	background:url("../images/mic.png") no-repeat; 
	background-size: cover;
	width: 35px !important;
	height: 35px !important;
}
.talk:hover{
	background:url("../images/mic_hover.png") no-repeat; 
	background-size: cover;
}
.talking{
	background:url("../images/mic_talking.png") !important; 
	background-size: cover !important;
}
.close{
	background:url("../images/close.png") no-repeat; 
	background-size: cover;
} 
.close:hover{
	background:url("../images/close_hover.png") no-repeat; 
	background-size: cover;
}
.unlock{
	background:url("../images/unlock.png") no-repeat; 
	background-size: cover;
}
.unlock:hover{
	background:url("../images/unlock_hover.png") no-repeat; 
	background-size: cover;
}
.li_notify{
	border-radius: 20px;
}
.li_notify:active{
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;  
}