#clip_list {
	background-color: #000;
}

#clip_list .cliptitle {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 480px;
	height: 25px;
	background-color: rgb(34,34,34);
}

#clip_list .cliptitle > div {
	position: absolute;
	height: 20px;
	top: 5px;
	text-align: left;
}
#clip_list .cliptitle > div:nth-of-type(1) {
	left: 15px;
	width: 20px;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("../image/icon/clipico.png");
}
#clip_list .cliptitle > div:nth-of-type(3) {
	left: 280px;
	width: 20px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("../image/icon/slot_a.png");
}
#clip_list .cliptitle > div:nth-of-type(2) {left: 40px; width: 50px;}
#clip_list .cliptitle > div:nth-of-type(4) {left: 320px; width: 80px;}
#clip_list .cliptitle > div:nth-of-type(5) {right: 5px; width: 80px; text-align: right;}

#clip_list .clipinfo {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 480px;
	height: 50px;
	background-color: rgb(34,34,34);
}
#clip_list .clipinfo > div {
	position: absolute;
	height: 20px;
	text-align: left;
}
#clip_list .clipinfo > div:nth-of-type(1) {top: 5px;left: 5px; width: 170px;}
#clip_list .clipinfo > div:nth-of-type(2) {top: 5px;left: 230px; width: 120px;}
#clip_list .clipinfo > div:nth-of-type(3) {top: 5px;right: 5px; width: 110px; text-align: right;}
#clip_list .clipinfo > div:nth-of-type(4) {top: 25px;left: 5px; width: 100px;}
#clip_list .clipinfo > div:nth-of-type(5) {top: 25px;left: 110px; width: 70px;}
#clip_list .clipinfo > div:nth-of-type(6) {top: 25px;left: 185px; width: 70px;}
#clip_list .clipinfo > div:nth-of-type(7) {top: 25px;right: 5px; width: 110px; text-align: right;}

#clip_list .cliplists {
	position: absolute;
	top: 30px;
	left: 40px;
	width: 400px;
	height: 180px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;

}

#clip_list .clipli {
	width: 100px;
	height: 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
	color: #fff;
}
#clip_list .clipli.fcs {
	background-color: rgb(255,170,0);
}
#clip_list .clipli.fcs > div:nth-of-type(2){
	color: #000;
}

#clip_list .clipli > div:nth-of-type(1) {
	width: 80px;
	height: 40px;
	border: 1px solid rgb(34,34,34);
	background-color: #111;
}
#clip_list .clipli > div:nth-of-type(1) span {
	line-height: 40px;
	text-align: center;
}
#clip_list .unplay {
	position: relative;
	top: 23px;
	left: 5px;
	width: 15px;
	height: 15px;
	background: no-repeat center;
	background-image: url("../image/icon/unplay.png");
	visibility: hidden;
}
#clip_list .unplay.on {visibility: visible;}

#clip_list .clipli .xavc {
	background-image: url("../image/view_s.png");
}

#clip_list .clipli > div:nth-of-type(2) {
	width: 80px;
	height: 16px;
}

#clip_list .center {
	visibility: hidden;
}

#clip_list .center {
	position: absolute;
	width: 319px;
	height: 186px;
	left: 161px;
	top: 42px;
	background-color: #000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}

#clip_list .clipline {
	width: 319px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
#clip_list .clipline.active {
	color: #000;
	background-color: rgb(255,170,0);
}
#clip_list .clipline p {
	width: 206px;
	height: 24px;
	text-align: left;
	line-height: 24px;
}
#clip_list .clipline .key {
	width: 18px;
	height: 24px;
}
#clip_list .clipline .sub {
	width: 26px;
	height: 24px;
}
#clip_list .clipline .ok {
	width: 26px;
	height: 24px;
}



#clip_play {
	background-color: rgb(68,68,68);
}

#clip_play .clipplay {
	position: absolute;
	width: 158px;
	height: 74px;
	background-color: #000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
#clip_play .clipplay.tocfcs {
	outline: 1px solid #fa0;
	outline-offset: -2px;
}

#clip_play .title {
	color: rgb(238,238,238);
	width: 100%;
	height: 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#clip_play .playope {
	width: 100%;
	height: 48px;
	background-position: center;
	background-repeat: no-repeat;
}
#clip_play .top.left .playope {background-image: url("../image/icon/frev_e.png");}
#clip_play .top.left.disable .playope {background-image: url("../image/icon/frev_d.png");}
#clip_play .top.center .playope {background-image: url("../image/icon/play_e.png");}
#clip_play .top.center.disable .playope {background-image: url("../image/icon/play_d.png");}
#clip_play .top.right .playope {background-image: url("../image/icon/ffwd_e.png");}
#clip_play .top.right.disable .playope {background-image: url("../image/icon/ffwd_d.png");}
#clip_play .bottom.left .playope {background-image: url("../image/icon/prev_e.png");}
#clip_play .bottom.left.disable .playope {background-image: url("../image/icon/prev_d.png");}
#clip_play .bottom.center .playope {background-image: url("../image/icon/stop_e.png");}
#clip_play .bottom.center.disable .playope {background-image: url("../image/icon/stop_d.png");}
#clip_play .bottom.right .playope {background-image: url("../image/icon/next_e.png");}
#clip_play .bottom.right.disable .playope {background-image: url("../image/icon/next_d.png");}

#clip_play .top {top:0px;}
#clip_play .bottom {top: 196px;}
#clip_play .left {left: 0px;}
#clip_play .center {left: 161px;}
#clip_play .right {left: 322px;}

#clip_play .centerbg {
	position: absolute;
	left: 0px;
	top: 74px;
	width: 480px;
	height: 122px;
	display: inline-block;
	background-color: rgb(51,51,51);
}

#clip_play .centermain {
	position: absolute;
	left: 0px;
	top: 3px;
	width: 480px;
	height: 116px;
	display: inline-block;
	background-color: rgb(34,34,34);
}


#clip_play .centermain div {
	/*background-color: #f00;*/
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#clip_play .centermain div.hide {display: none;}


#clip_play .rec {
	left: 28px;
	top: 40px;
	width: 92px;
	height: 18px;
	background-position: center;
	background-repeat: no-repeat;
}
.clip_pv .rec.p-1 {background-image: url("../image/icon/fr4.png")!important;}
.clip_pv .rec.p-2 {background-image: url("../image/icon/fr15.png")!important;;}
.clip_pv .rec.p-3 {background-image: url("../image/icon/fr24.png")!important;;}
.clip_pv .rec.p2 {background-image: url("../image/icon/ff4.png")!important;;}
.clip_pv .rec.p3 {background-image: url("../image/icon/ff15.png")!important;;}
.clip_pv .rec.p4 {background-image: url("../image/icon/ff24.png")!important;;}
.clip_pv .rec.p1 {background-image: url("../image/icon/play.png")!important;;}
.clip_pv .rec.p0 {background-image: url("../image/icon/pause.png")!important;;}


#clip_play .timecode {
	left: 4px;top: 7px;width: 192px;height: 28px;
}
#clip_play .timecode span{line-height: 28px;}

#clip_play .bat {
	left: 310px;top: 10px;width: 110px;height: 18px;
}
#clip_play .frame {
	left: 216px;top: 10px;width: 75px;height: 18px;
}
#clip_play .size {
	left: 146px;top: 56px;width: 116px;height: 18px;
}
#clip_play .clip {
	left: 232px;top: 40px;width: 198px;height: 18px;
}
#clip_play .format {
	left: 242px;top: 92px;width: 180px;height: 20px;
}

#clip_play .media {
	left: 28px;
	top: 64px;
	width: 310px;
	height: 20px;
	align-items: center;
}
#clip_play .media > div {
	position: absolute;
	left: 0px;
	width: 22px;
	height: 22px;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("../image/icon/slot_a.png");
}

#clip_play .media p:nth-of-type(1) {
	position: absolute;
	left: 50px;
	width:130px;height:20px;
	text-align: left;
	line-height: 20px;
}
#clip_play .media p:nth-of-type(2) {
	position: absolute;
	left: 250px;
	width:120px;height:20px;
	text-align: left;
	line-height: 20px;
}
#clip_play .clipinfo {
	left: 28px;
	top: 92px;
	width: 340px;
	height: 20px;
	justify-content: flex-start;
}
#clip_play .audio {
	left: 416px;top: 2px;width: 60px;height: 88px;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-image: url("../image/icon/home_audio.png");
}

#clip_view {
	background-color: #000;
}
#clip_view .clipani {
	position: absolute;
	top: 0px;
	left: 0px;
	width:480px;
	height:270px;
	overflow: hidden;
}
#clip_view.showinfo .clipani {transform: scale(0.8);}
#clip_view .recsetinfo {
	visibility: hidden;
}
#clip_view.showinfo .recsetinfo {
	visibility: visible;
}

#clip_view .vani {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 480px;
	height: 270px;
	background: no-repeat center;
	background-image: url("../image/view.png");
	transform: scale(2.0);
}