/* for debug */
/*p {background-color: #f00;}*/

/* camera view */
.camview {
	position: absolute;
	left: 0;
	top: 0;
	width: 480px;
	height: 270px;
}
.camview .view {
	position: absolute;
	left: 0;
	top: 0;
	width: 480px;
	height: 270px;
}

.camview .view.showinfo {transform: scale(0.8);}
.camview .view.nonrec .viewimg {display: none;}

/*viewimg*/
.viewimg {
	position: absolute;
	left: 0;
	top: 0;
	width: 480px;
	height: 270px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.viewimg > div {
	width: 480px;
	height: 270px;
	background: no-repeat center url("../image/view.png");
	transform-origin: center;
	transform: scale(1.0);
}
.viewimg.im43 > div {width: 360px;}
.viewimg.im169 > div {width: 480px;}

.viewimg.im169.r13 > div {transform: scale(1.0,0.77);}
.viewimg.im169.r15 > div {transform: scale(1.0,0.67);}
.viewimg.im169.r18 > div {transform: scale(1.3,0.79);}
.viewimg.im169.r20 > div {transform: scale(1.3,0.71);}
.viewimg.im43.r13 > div {transform: scale(1.3,1.0);}
.viewimg.im43.r15 > div {transform: scale(1.333,0.893);}
.viewimg.im43.r18 > div {transform: scale(1.73,0.81);}
.viewimg.im43.r20 > div {transform: scale(1.73,0.728);}


/* marker */
.camview .marker{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 483px;
	height: 273px;
}
.camview .mframe,
.camview .mcenter,
.camview .mc_item
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 483px;
	height: 273px;
	visibility: hidden;
}
.camview .marker {display: none}
.camview .marker.on {display: block;}

.camview .marker.white > div > div {border-color: rgba(255,255,255,0.6)}
.camview .marker.yellow > div > div {border-color: rgba(255,255,0,0.6)}
.camview .marker.cyan > div > div {border-color: rgba(0,174,239,0.6)}
.camview .marker.green > div > div {border-color: rgba(0,255,0,0.6)}
.camview .marker.magenta > div > div {border-color: rgba(255,0,255,0.6)}
.camview .marker.red > div > div {border-color: rgba(255,0,0,0.6)}
.camview .marker.blue > div > div {border-color: rgba(0,0,255,0.6)}
.camview .marker > div > div {border-style: solid;}

.camview .mframe,
.camview .mcenter
{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
}
.camview .mframe > div {
	width: 160px;
	height: 90px;
}
.camview .mframe > div:nth-of-type(4),
.camview .mframe > div:nth-of-type(5),
.camview .mframe > div:nth-of-type(6){
	border-left-width: 1px;
	border-right-width: 1px;
}
.camview .mframe > div:nth-of-type(2),
.camview .mframe > div:nth-of-type(5),
.camview .mframe > div:nth-of-type(8){
	border-top-width: 1px;
	border-bottom-width: 1px;
}

.camview .mframe.on {visibility: visible;}

.camview .mcenter > div:nth-of-type(1),
.camview .mcenter > div:nth-of-type(2),
.camview .mcenter > div:nth-of-type(11),
.camview .mcenter > div:nth-of-type(12)
{
	width: 230px;
	height: 135px;
}
.camview .mcenter > div:nth-of-type(3),
.camview .mcenter > div:nth-of-type(6),
.camview .mcenter > div:nth-of-type(7),
.camview .mcenter > div:nth-of-type(10)
{
	width: 10px;
	height: 125px;
}
.camview .mcenter > div:nth-of-type(4),
.camview .mcenter > div:nth-of-type(5),
.camview .mcenter > div:nth-of-type(8),
.camview .mcenter > div:nth-of-type(9)
{
	width: 10px;
	height: 10px;
}

.camview .cross > div:nth-of-type(1),
.camview .cross > div:nth-of-type(11){
	border-bottom-width: 1px;
}
.camview .cross > div:nth-of-type(3),
.camview .cross > div:nth-of-type(6){
	border-right-width: 1px;
}
.camview .cross.cm > div:nth-of-type(4){
	border-right-width: 1px;
	border-bottom-width: 1px;
}
.camview .cross.cm > div:nth-of-type(5){
	border-right-width: 1px;
}
.camview .cross.cm > div:nth-of-type(8){
	border-bottom-width: 1px;
}
.camview .mcenter.on {visibility: visible;}

.camview .mc_item
{
	position: absolute;
	top: 110px;
	left: 215px;
	width: 52px;
	height: 52px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
}
.camview .mc_item > div:nth-of-type(1),
.camview .mc_item > div:nth-of-type(2),
.camview .mc_item > div:nth-of-type(11),
.camview .mc_item > div:nth-of-type(12)
{
	width: 15px;
	height: 25px;
}
.camview .mc_item > div:nth-of-type(3),
.camview .mc_item > div:nth-of-type(6),
.camview .mc_item > div:nth-of-type(7),
.camview .mc_item > div:nth-of-type(10)
{
	width: 10px;
	height: 15px;
}
.camview .mc_item > div:nth-of-type(4),
.camview .mc_item > div:nth-of-type(5),
.camview .mc_item > div:nth-of-type(8),
.camview .mc_item > div:nth-of-type(9)
{
	width: 10px;
	height: 10px;
}
.camview .mc_item.on {visibility: visible;}


.camview .info {
	position: absolute;
	top: 5px;
	left: 0px;
	width: 480px;
	height: 20px;
	display: none;
}
.camview .info.showinfo {display: block;}
.camview .info > div {
	position: absolute;
	top: 0px;
	height: 20px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
}
.camview .info > div:nth-of-type(1){
	left: 220px;
	width: 120px;
}

.camview .slotico {
	width: 20px;
	height: 20px;
	background: no-repeat center;
	background-size: contain;
	background-image: none;
}
.camview .slotico.a {background-image: url('../image/icon/slot_a.png');}
.camview .slotico.b {background-image: url('../image/icon/slot_b.png');}
.camview .slotico.n {
	background-image: url('../image/icon/slot_n.png');
	animation: slotblink 1.0s infinite;
}

.camview .info > div:nth-of-type(1) div:nth-of-type(2){
	width: 40px;
	height: 20px;
}
.camview .info > div:nth-of-type(2){
	right: 5px;
	width: 80px;
	justify-content: flex-end;
}

.screen {
	position: relative;
	display: none;
	left: 0;
	top: 0;
	width: 480px;
	height: 270px;

	color: rgb(238,238,238);
}
.screenabs {
	position: relative;
	display: none;
	left: 0;
	top: 0;
	width: 480px;
	height: 270px;
}
.screen.screenDisable{
	-webkit-filter: grayscale(50%);
	-moz-filter: grayscale(50%);
	-o-filter: grayscale(50%);
	-ms-filter: grayscale(50%);
	filter: grayscale(50%);
}
.screen.screenDisableHome{
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
}


.screen.notimplement{
	/*filter: grayscale(100%);*/
	filter: brightness(30%);
}

.screen p {
	margin: 0;
	padding: 0;
	border: 0;
}


/* font size */
.f10 {font-size: 10px;}
.f12 {font-size: 12px;}
.f14 {font-size: 14px;}
.f16 {font-size: 16px;}
.f18 {font-size: 18px;}
.f20 {font-size: 20px;}
.f28 {font-size: 16px;}
.f30 {font-size: 17px;}
.f32 {font-size: 18px;}
.f36 {font-size: 20px;}
.f40 {font-size: 23px;}
.f42 {font-size: 24px;}
.f50 {font-size: 28px;}
.f72 {font-size: 40px;}
.f78 {font-size: 44px;}

/* text color */
.tc-w {color: #eee;}
.tc-y {color: #fa0;}
.tc-r {color: #e01;}
.tc-g {color: #888;}
.tc-d {color: #aaa;}
.tc-b {color: #000;}
.tc-gr {color: #0d0;}

/* text shadow */
.ts-b {text-shadow: 1px 1px 2px #000;}

/* background color */
.bc-y {background-color: #fa0;}
.bc-b {background-color: #000;}
.bc-w {background-color: #eee;}
.bc-g {background-color: #888;}

/* weight */
.tw-6 {font-weight: 600;}

/* text vertical align */
.tva-top {align-items: flex-start !important;}
.tva-cnt {align-items: center !important;}
.tva-btm {align-items: flex-end !important;}
.tva-bln {align-items: baseline !important;}

.ta-l {text-align: left;}
.ta-r {text-align: right;}
.ta-c {text-align: center;}

.txs {-webkit-text-stroke:1px rgba(0,0,0,0.15);}

.va-ttop {vertical-align: text-top;}
.va-tbtm {vertical-align: text-bottom;}
.va-top {vertical-align: top;}
.va-btm {vertical-align: bottom;}
.va-mdl {vertical-align: middle;}

.dnone {display: none;}
.dnoneip {display: none !important;}
.vhide {visibility: hidden;}

.pd3 {padding: 0 3px;}
.pd5 {padding: 0 5px;}
.pd10 {padding: 0 10px;}
.pdl10 {padding-left: 10px;}
.pdl30 {padding-left: 30px;}
.pdt20 {padding-top: 20px;}

span.slot {padding: 0 1px;}

.popscreen .conts{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 480px;
	height: 270px;
	display: flex;

	align-items: center;
	justify-content: center;
}

.popscreen .message {
	/*position: absolute;*/
	width: 400px;
	height: 140px;
	background-color: #000;
	border: 2px solid #333;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-around;
}
.popscreen .message span {
	padding: 0 15px;
	line-height: 20px;
}

.popscreen .message div {
	height: 30px;
	width: 390px;
	display: none;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}
.popscreen .message div.active {display: flex;}

.popscreen .message div > div {
	height: 30px;
	width: 100px;
	line-height: 30px;
	border: 1px solid #888;
	color: #fff;
	background-color: #333;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.popscreen .message div > div.fcs {
	color: #000;
	background-color: #fa0;
}
.popscreen .message div > div.nouse {display: none;}
#notimplement .mes {
	width: 100%;
	height: 40%;
	background-color: rgba(255,255,255,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
}

.rec.stby span:nth-of-type(1) {display: none;}
.rec.stby span:nth-of-type(3) {display: none;}
.rec.cache span:nth-of-type(2) {display: none;}
.rec span {line-height: 28px;vertical-align: bottom;}


.toc {
	cursor: pointer;
}
.toc.nouse {
	cursor: auto;
}


/* popscreen2 */
#popscreen2 .conts {
	flex-direction: column;
}
#popscreen2 .mes {
	width: 300px;
	height: 60px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	padding: 0 10px;
	background-color: #666;
}
#popscreen2 .exp {
	width: 300px;
	height: 80px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	padding: 0 10px;
	background-color: #333;
}
#popscreen2 .exp > span {display: block;}
#popscreen2 .exp.noimpl > span{display: none;}
#popscreen2 .exp > div {
	display: none;
	width: 100%;
	height: 60px;
	background-color: rgba(255, 255, 255, 0.7);
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
#popscreen2 .exp.noimpl > div {
	display: flex;
}