@charset "utf-8";

html, body { width:100%; height:100%; }

/* 일반 플레이어 */
#player_normal { width:100%; height:100%; }
#player_normal #playerLeft { float:left; width:300px; height:100%; padding:0 15px; background:#383b49; }
#player_normal #playerRight { float:right; width:calc(100% - 300px); height:100%; background:#45485a; z-index:1; overflow-y:auto; }

#player_normal #playerLeft.on { position:absolute; left:0; top:0; width:300px; border-right:1px solid #333; display:block; z-index:2; transition:0.3s; display:block; }



			/* 왼쪽 */
#player_normal #playerLeft h1 { position:relative; height:70px; padding-top:15px; font-family:pgovb; font-size:110%; }
#player_normal #playerLeft h1 span { position:relative; height:40px; line-height:40px; padding-left:47px; background:url(/images/egovframework/com/svc/common/mark.png) no-repeat 0px 0px; background-size:40px; color:#fff; display:inline-block;  }
#player_normal #playerLeft h1 .abtnClose { position:absolute; right:5px; top:25px;                 display:none;  }
#player_normal #playerLeft h1 .abtnClose.on { display:block; }

#player_normal #playerLeft .playerLeftBody { }

#player_normal #playerLeft dl { width:100%; overflow:hidden; }
#player_normal #playerLeft dt { position:relative; width:100%; height:40px; line-height:38px; background:#2b3d93; margin-top:5px; }
#player_normal #playerLeft dt:first-child { margin-top:0px; }

#player_normal #playerLeft dt a { width:100%; height:40px; line-height:38px; padding:0 15px 0 15px; color:#f4f4f4; font-family:pgovb; font-size:110%; }
#player_normal #playerLeft dt a i { position:relative; top:1px; color:#ffcb07; width:25px; }

#player_normal #playerLeft dt a::before { content:''; position:absolute; right:10px; top:15px; width:19px; height:10px; background:url(/caster/images/playerLeft_blt.gif) no-repeat; transition:0.3s; }
#player_normal #playerLeft dt a.on::before { transform:rotate(-180deg); }
#player_normal #playerLeft dd a:before { content:'- '; position:absolute; left:0; top:0px; }


#player_normal #playerLeft dd { padding:15px 10px; background:#565864; margin-bottom:20px; }
#player_normal #playerLeft dd ul li { width:100%; display:block; margin-bottom:5px; }
#player_normal #playerLeft dd ul li a:link,
#player_normal #playerLeft dd ul li a:visited { position:relative; padding-left:10px; color:#eaeaea; line-height:1.4; font-size:95%; } 
#player_normal #playerLeft dd ul li a:active,
#player_normal #playerLeft dd ul li a:focus,
#player_normal #playerLeft dd ul li a:hover { color:#fff; }
#player_normal #playerLeft dd ul li a.select { width:100%; padding:5px 5px 5px 15px; border-radius:5px; background:#424451; color:#fff; }
#player_normal #playerLeft dd ul li a.select:before { content:'- '; position:absolute; left:5px; top:5px; }
#player_normal #playerLeft dd ul li a.select:after { content:'▶'; position:relative; top:-1px;  padding-left:5px; color:#ffcb07; font-size:80%; text-decoration:none; }

		/* 오른쪽 */
		/* 오른쪽 */

			/* 제목바 */
#player_normal #playerRight .topbar { position:relative; width:calc(100% - 30px); height:40px; line-height:40px; padding:0 20px; border-radius:5px; background:#303342; box-shadow:inset 0px 0px 6px rgba(0,0,0,0.2); margin:15px auto 0;  }
#player_normal #playerRight .topbar .abtn_sideBtn { display:none; }
#player_normal #playerRight .topbar h1 { width:calc(100% - 75px); color:#fff; font-family:pgovb; font-size:130%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display:inline-block;  }
#player_normal #playerRight .topbar .btnClose:link,
#player_normal #playerRight .topbar .btnClose:visited { position:absolute; right:20px; top:10px; transition:0.3s;}
#player_normal #playerRight .topbar .btnClose:active,
#player_normal #playerRight .topbar .btnClose:focus,
#player_normal #playerRight .topbar .btnClose:hover { transform:rotateY(180deg);}


			/* 오른쪽 레이아웃 */
#player_normal #playerRight #playerRightBody { position:relative; width:100%; height:calc(100% - 60px); padding:15px; overflow:hidden; }


			/* 영상 */
#player_normal #playerRight #playerRightBody .vod { position:relative; float:left; width:calc(55% - 7px); height:calc(100% - 341px); background:#333; margin:0 7px 15px 0; }
/*#player_normal #playerRight #playerRightBody .vod .video-container { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; }
#player_normal #playerRight #playerRightBody .vod .video-container video { position:absolute; top:0; left:0; width:100%; height:100%; }*/
#player_normal #playerRight #playerRightBody .vod .video-container { width:100%; height:100%; }
#player_normal #playerRight #playerRightBody .vod .video-container video { width:100%; height:100%; }
.video-js { width:100%; height:100%; }




			/* 발언자 정보 */
#player_normal #playerRight #playerRightBody .speaker { position:relative; float:left; width:calc(45% - 7px); height:168px; padding:40px 3px 0px 15px; background:#fff url(/caster/images/speaker_mark.png) no-repeat 50% 50%; margin:0 0 15px 7px; }
#player_normal #playerRight #playerRightBody .speaker h1 { position:absolute; left:0; top:0; width:140px; height:34px; line-height:36px; background:#22b24b; color:#fff; font-family:pgovb; font-size:110%; text-align:center; }
#player_normal #playerRight #playerRightBody .speaker dl { display:none; margin-top:10px; font-size:95%;}
#player_normal #playerRight #playerRightBody .speaker dl dt { float:left; width:100px;}
#player_normal #playerRight #playerRightBody .speaker dl dt img { width:80px; height:103px; border:1px solid #ddd; }
#player_normal #playerRight #playerRightBody .speaker dl dd {margin-left:100px; width:calc(100% - 100px); padding-left:10px; background:url(/caster/images/blt_gray.gif) no-repeat 0 10px; }


#player_normal #playerRight #playerRightBody .speaker dl dd i { font-style:normal; font-size:90%; letter-spacing:-1px; }

#player_normal #playerRight #playerRightBody .speaker dl dd.first { }
#player_normal #playerRight #playerRightBody .speaker dl dd.first span { padding-left:10px; background:url(/caster/images/blt_gray.gif) no-repeat 0 10px;  display:inline-block; margin-left:15px; }
#player_normal #playerRight #playerRightBody .speaker dl dd.btn { padding-left:0; background:none; margin-top:10px; }


#player_normal #playerRight #playerRightBody .speaker dl dd.btn { margin-top:10px; }
#player_normal #playerRight #playerRightBody .speaker dl dd.btn a:link,
#player_normal #playerRight #playerRightBody .speaker dl dd.btn a:visited { width:auto; height:26px; line-height:21px; padding:0 20px; border:1px solid #113d8e; color:#113d8e; font-size:95%; display:inline-block; transition:0.3s; }
#player_normal #playerRight #playerRightBody .speaker dl dd.btn a:active,
#player_normal #playerRight #playerRightBody .speaker dl dd.btn a:focus,
#player_normal #playerRight #playerRightBody .speaker dl dd.btn a:hover { background:#113d8e; color:#fff; }

#player_normal #playerRight #playerRightBody .speaker ul.sns { position:absolute; right:15px; top:4px; width:auto; }
#player_normal #playerRight #playerRightBody .speaker .sns li { float:left; margin-left:3px; display:none;}
#player_normal #playerRight #playerRightBody .speaker .sns li a img { width:25px; height:25px; }



			/* 회의진행순서 */
#player_normal #playerRight #playerRightBody .order { position:absolute; right:15px; top:198px; bottom:356px; float:left; width:calc(45% - 21px); padding:40px 15px 15px 15px; background:#fff; }
#player_normal #playerRight #playerRightBody .order h1 {position:absolute; left:0; top:0; width:140px; height:34px; line-height:36px; background:#22b24b; color:#fff; font-family:pgovb; font-size:110%; text-align:center; }
#player_normal #playerRight #playerRightBody .order div { height:/*200px*/calc(100% - 10px); overflow:auto; margin-top:10px; }
#player_normal #playerRight #playerRightBody .order ul { }
#player_normal #playerRight #playerRightBody .order ul li { width:100%; padding:3px 0; display:flex; flex-wrap:nowrap; justify-content:space-between; border-bottom:1px solid #eee;  }

#player_normal #playerRight #playerRightBody .order ul li .icon { width:70px; height:26px; line-height:26px; border-radius:3px; color:#fff; font-size:90%; text-align:center; margin-right:10px; }

#player_normal #playerRight #playerRightBody .order ul li .iconA { background:#254b8e; } /* 안건 */
#player_normal #playerRight #playerRightBody .order ul li .iconE { background:#495976; } /* 제안설명 */
#player_normal #playerRight #playerRightBody .order ul li .iconN { background:#666;  } /* 공무원 */
#player_normal #playerRight #playerRightBody .order ul li .iconM { background:#43ba65; } /* 의원발언 */
#player_normal #playerRight #playerRightBody .order ul li .iconO { background:#565b9e; } /* 개회사 */
#player_normal #playerRight #playerRightBody .order ul li .iconP { background:#06c; } /* 심사보고 */
#player_normal #playerRight #playerRightBody .order ul li .iconQ { background:#387443;  } /* 질문답변 */
#player_normal #playerRight #playerRightBody .order ul li .iconC { background:#888;  } /* 회의진행 */
#player_normal #playerRight #playerRightBody .order ul li .iconS { background:#638acf; } /* 5분발언 */



#player_normal #playerRight #playerRightBody .order ul li a:link,
#player_normal #playerRight #playerRightBody .order ul li a:visited { width:calc(100% - 160px); color:#333; }
#player_normal #playerRight #playerRightBody .order ul li a:active,
#player_normal #playerRight #playerRightBody .order ul li a:focus,
#player_normal #playerRight #playerRightBody .order ul li a:hover { color:#113d8e; }
#player_normal #playerRight #playerRightBody .order ul li a.select { color:#0b57d0 }
#player_normal #playerRight #playerRightBody .order ul li a b { font-weight:normal; }
#player_normal #playerRight #playerRightBody .order ul li a.select b { background:url(/caster/images/order_underline.gif) repeat-x 0 bottom; }

#player_normal #playerRight #playerRightBody .order ul li i { width:90px; padding-right:10px; color:#888; font-style:normal; text-align:right; }


			/* 회의록보기 */
#player_normal #playerRight #playerRightBody .vodMinutes { position:absolute; left:15px; right:15px; bottom:10px; width:calc(100% - 30px); height:331px;  padding:40px 15px 15px 15px; background:#fff; margin:0;}
#player_normal #playerRight #playerRightBody .vodMinutes h1 { position:absolute; left:0; top:0; width:140px; height:34px; line-height:36px; background:#22b24b; color:#fff; font-family:pgovb; font-size:110%; text-align:center; }
#player_normal #playerRight #playerRightBody .vodMinutes .vocMintesTxt { width:100%; height:calc(100% - 10px); overflow:auto; margin-top:10px; }

#player_normal #playerRight #playerRightBody .vodMinutes .vocMintesTxt div {padding:2px; 0}
#player_normal #playerRight #playerRightBody .vodMinutes .vocMintesTxt div a { color:#888;}
#player_normal #playerRight #playerRightBody .vodMinutes .vocMintesTxt div a.select { color:#000;}



@media (max-width:1220px){
	#player_normal #playerRight #playerRightBody .speaker dl dd.first span { margin-left:25px; }
}


@media (max-width:1200px){
	#player_normal #playerRight #playerRightBody .vod { height:calc(100% - 311px); }
	#player_normal #playerRight #playerRightBody .speaker { height:193px; }
	#player_normal #playerRight #playerRightBody .speaker dl dd.first span { display:block; margin-left:-10px; }
	#player_normal #playerRight #playerRightBody .order { top:223px; bottom:326px; }
	#player_normal #playerRight #playerRightBody .vodMinutes { height:301px; }
}



@media (max-width:1024px){
	#player_normal #playerLeft { display:none; width:0px; }
	#player_normal #playerLeft.on { position:fixed; display:block; }
	#player_normal #playerRight { width:100%; overflow:auto; }
	#player_normal #playerLeft.on ~ #playerRight { }

	#player_normal #playerRight .topbar .abtn_sideBtn { position:relative; top:-7px; display:inline-block; margin:0 10px 0 0; }


	#player_normal #playerRight #playerRightBody .vod { height:calc(100% - 281px); }
	#player_normal #playerRight #playerRightBody .order { bottom:296px; }
	#player_normal #playerRight #playerRightBody .vodMinutes { height:271px; }

	#player_normal #playerRight #playerRightBody .speaker dl dd.first span { display:block; margin-left:-10px; }


	#player_normal #playerRight #playerRightBody .speaker ul.sns { }
}



@media (max-width:768px){
	#player_normal #playerRight { height:auto; overflow:auto; }
	#player_normal #playerRight .topbar { padding:0 10px; }

	#player_normal #playerRight .topbar .abtn_sideBtn { top:-7px; margin:0 5px 0 0; }

	#player_normal #playerRight .topbar h1 { font-size:105%; }

	#player_normal #playerRight .topbar .btnClose:link,
	#player_normal #playerRight .topbar .btnClose:visited { right:5px; }

	#player_normal #playerRight #playerRightBody .vod { width:100%; height:300px; margin:0 0 15px 0; }
	#player_normal #playerRight #playerRightBody .speaker { width:100%; height:auto; padding:40px 15px 45px 15px; margin:0 0 15px 0px; }
	#player_normal #playerRight #playerRightBody .speaker dl dd.first span { display:block; margin-left:-10px; }

	#player_normal #playerRight #playerRightBody .order { position:relative; right:auto; top:auto; bottom:auto; width:100%; height:250px; margin:0 0 15px 0px; }

	#player_normal #playerRight #playerRightBody .vodMinutes { position:relative; left:0px; right:0px; bottom:0px; width:100%; height:300px; }

}



/* width */
::-webkit-scrollbar {
  width: 10px;
  border-radius:8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius:8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}




.video-js .vjs-current-time { display: block; }
.video-js .vjs-time-divider { display: block; }
.video-js .vjs-duration { display: block; }
.video-js .vjs-remaining-time { display: none; }


.video-js .vjs-time-control {color:#fff; font-size:120%; line-height:2.5em;padding-left:0.5em; padding-right:0.5em; min-width:0;}
.video-js .vjs-play-progress {background-color: #28d056;  /*#ee0000 lightseagreen*/}