#clip_list {
	background-color: rgb(102,102,102);
}

#clip_list .lefttop,
#clip_list .righttop,
#clip_list .rightbottom,
#clip_list .centertop,
#clip_list .centerbottom
{
	position: absolute;
	width: 158px;
	height: 40px;
	background-color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}

#clip_list .leftmiddle {
	position: absolute;
	width: 158px;
	height: 228px;
	background-color: #000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}

#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 .lefttop {left: 0px;top: 0px;}
#clip_list .lefttop span.selected {
	color : #000;
	background-color: rgb(255,170,0);
}


#clip_list .righttop {left: 322px;top: 0px;}
#clip_list .rightbottom {left: 322px;top: 230px;}

#clip_list .centertop {left: 161px;top: 0px;}
#clip_list .centerbottom {left: 161px;top: 230px;}

#clip_list .leftmiddle {left: 0px;top: 42px;}
#clip_list .rightmiddle {left: 322px;top: 42px;}

#clip_list .arrowup {
	width: 30px;
	height: 28px;
	background-image: url('../image/icon/arrowup_d.png');
}
#clip_list .arrowup.enable {background-image: url('../image/icon/arrowup_e.png')}

#clip_list .arrowdown {
	width: 30px;
	height: 28px;
	background-image: url('../image/icon/arrowdown_d.png');
}
#clip_list .arrowdown.enable {background-image: url('../image/icon/arrowdown_e.png')}

#clip_list .leftmiddle div {
	width: 152px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#clip_list .leftmiddle p.infom {
	width: 75px;
	text-align: left;
}
#clip_list .leftmiddle p.infol {
	width: 150px;
	text-align: left;
}

#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;
	/*background: no-repeat center url(../image/icon/key.png);*/
}
/*#clip_list .clipline.active .key {background-image: url(../image/icon/key_f.png);}*/
#clip_list .clipline .sub {
	width: 26px;
	height: 24px;
	/*background: no-repeat center url(../image/icon/sb.png);*/
}
/*#clip_list .clipline.active .sub {background-image: url(../image/icon/sb_f.png);}*/
#clip_list .clipline .ok {
	width: 26px;
	height: 24px;
	/*background: no-repeat center url(../image/icon/ok.png);*/
}
/*#clip_list .clipline.active .ok {background-image: url(../image/icon/ok_f.png);}*/

#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 .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_play .rec.p-1 {background-image: url(../image/icon/fr4.png);}
#clip_play .rec.p-2 {background-image: url(../image/icon/fr15.png);}
#clip_play .rec.p-3 {background-image: url(../image/icon/fr24.png);}
#clip_play .rec.p2 {background-image: url(../image/icon/ff4.png);}
#clip_play .rec.p3 {background-image: url(../image/icon/ff15.png);}
#clip_play .rec.p4 {background-image: url(../image/icon/ff24.png);}
#clip_play .rec.p1 {background-image: url(../image/icon/play.png);}
#clip_play .rec.p0 {background-image: url(../image/icon/pause.png);}


#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: 265px;
	height: 20px;
	align-items: center;
	justify-content: flex-start;
}
#clip_play .media p:nth-of-type(1) {
	width:0px;height:20px;
	text-align: left;
	line-height: 20px;
}
#clip_play .media p:nth-of-type(2) {
	width:20px;height:20px;
	text-align: center;
	line-height: 20px;
}
#clip_play .media p:nth-of-type(3) {
	width:130px;height:20px;
	text-align: center;
	line-height: 20px;
}
#clip_play .media p:nth-of-type(4) {
	width:140px;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: 436px;top: 2px;width: 40px;height: 112px;
}
#clip_play .step {
	left: 335px;
	top: 39px;
	width: 80px;
	height: 20px;
}
#clip_play .pbar {
	top: 44px;
	left: 120px;
	width: 204px;
	height: 10px;
	outline: 2px solid #fff;
	outline-offset: -2px;
}
#clip_play .bar {
	top: 2px;
	left: 2px;
	width: 100px;
	height: 6px;
	background-color: #fff;
}