@charset "utf-8";

/* 레이아웃 */
* { margin:0;padding:0;}
.beatcontainer { height: 76px; background: url(../img/skin3_bg.png) repeat-x 0 0;}

.#video-controls { width: 100%; table-layout: fixed; border-collapse: separate; }
.left_area {width: 175px; height: 76px; margin-top:0px; float: none; display: table-cell; vertical-align: top;}
.right_area { left:0px; height: 76px; margin-top:0px; float: none; display: table-cell; } 

.bottom_area {width: 100%; display: table;  table-layout: fixed; border-collapse: separate; height: 15px;}
.bottom_left {padding-right:13px;   padding-left:10px;  width: 100%; float: none;  display: table-cell; }
.bottom_right { width: 120px;  float: none; display: table-cell; margin-right: 25px;}

.top_area {width: 100%; height: 45px;}
.control_left {position: relative; width: 300px; height: 45px; padding-top: 10px; float: left;}
.control_right {position: relative; width: 440px; height: 45px; padding-top: 15px; float: right;}


.btn_center  {position: relative; width: 120px; float: left;}
/* 플레이버튼 */
.play_control {width: 175px; float: left; margin-top: 5px;}
.btn_com {display: block; cursor: pointer; border: 0; background: transparent; outline: 0;padding:0px;}
.btn_play {position: absolute; left: 19px; margin-top: 5px; width: 41px; height: 34px; background: url(../img/skin3.png) no-repeat -1px -1px;}
.btn_play:hover {background: url(../img/skin3.png) no-repeat -83px -1px;}
.btn_pause {position: absolute; left: 19px; margin-top: 5px; width: 41px; height: 34px; background: url(../img/skin3.png) no-repeat -1px -36px;}
.btn_pause:hover {background: url(../img/skin3.png) no-repeat -83px -36px;}
.btn_rewind {position: absolute; left: 60px; margin-top: 5px; width: 40px; height: 34px; background: url(../img/skin3.png) no-repeat -1px -71px;}
.btn_rewind:hover {background: url(../img/skin3.png) no-repeat -81px -71px;}
.btn_forward {position: absolute; left: 100px; margin-top: 5px; width: 40px; height: 34px; background: url(../img/skin3.png) no-repeat -1px -106px;}
.btn_forward:hover {background: url(../img/skin3.png) no-repeat -81px -106px;}

/* 플레이시간 */
.time_control {position: absolute; display: block; width: 100px; left: 154px; top:42px; color: #969696;}
.play_time {font: 11px sans-serif;}

/* 배속버튼 */
.btn_speed {}
.btn_speed1 {width: 26px; height:22px; float: left; background: url(../img/skin3.png) no-repeat -125px -2px;}
.btn_speed1:hover {background: url(../img/skin3.png) no-repeat -151px -2px;}
.btn_speed1_over {background: url(../img/skin3.png) no-repeat -151px -2px;}
.btn_speed2 {width: 26px; height:22px; float: left; background: url(../img/skin3.png) no-repeat -125px -30px;}
.btn_speed2:hover {background: url(../img/skin3.png) no-repeat -151px -30px;}
.btn_speed2_over {background: url(../img/skin3.png) no-repeat  -151px -30px;}
.btn_speed3 {width: 26px; height:22px; float: left; background: url(../img/skin3.png) no-repeat -125px -58px;}
.btn_speed3:hover {background: url(../img/skin3.png) no-repeat -151px -58px;}
.btn_speed3_over {background: url(../img/skin3.png) no-repeat -151px -58px;}
.btn_speed4 {width: 26px; height:22px; float: left; background: url(../img/skin3.png) no-repeat -125px -86px;}
.btn_speed4:hover {background: url(../img/skin3.png) no-repeat -151px -86px;}
.btn_speed4_over {background: url(../img/skin3.png) no-repeat -151px -86px;}
.btn_speed5 {width: 26px; height:22px; float: left; background: url(../img/skin3.png) no-repeat -125px -114px;}
.btn_speed5:hover {background: url(../img/skin3.png) no-repeat -151px -114px;}
.btn_speed5_over {background: url(../img/skin3.png) no-repeat -151px -114px;}
.btn_speed6 {width: 26px; height:22px; float: left; background: url(../img/skin3.png) no-repeat -1px -142px;}
.btn_speed6:hover {background: url(../img/skin3.png) no-repeat -27px -142px;}
.btn_speed6_over {background: url(../img/skin3.png) no-repeat -27px -142px;}
.btn_speed7 {width: 26px; height:22px; float: left; background: url(../img/skin3.png) no-repeat -54px -142px;}
.btn_speed7:hover {background: url(../img/skin3.png) no-repeat -80px -142px;}
.btn_speed7_over {background: url(../img/skin3.png) no-repeat -80px -142px;}


/* 구간반복, 풀스크린 */
.btn_right {margin-left: 7px;}
.btn_repeat {width: 16px; height:12px; float: left; background: url(../img/skin3.png) no-repeat -153px -154px; margin-top: 6px;  margin-left: 12px;}
.btn_repeat_s {width: 16px; height:12px; float: left; background: url(../img/skin3.png) no-repeat -185px -154px; margin-top: 6px;  margin-left: 12px;}
.btn_repeat_e {width: 16px; height:12px; float: left; background: url(../img/skin3.png) no-repeat -169px -154px; margin-top: 6px;  margin-left: 12px;}
.btn_repeat:hover {background: url(../img/skin3.png) no-repeat  -169px -154px;}

.repeat_dot {width: 2px; height: 7px; background: #ffff00; float: left; position: absolute; margin: 6px 0 0 3px;}
.repeat_s {position:relative; left:0; display:none; z-index:19;}
.repeat_e {position:relative; left:0; display:none; z-index:19;}
.btn_fullscreen {width: 15px; height:13px; float: left; background: url(../img/skin3.png) no-repeat -107px -154px; margin-top:7px; margin-left: 20px;}
.btn_fullscreen:hover {background: url(../img/skin3.png) no-repeat -122px -154px;}

/* 북마크 */
.btn_bookmark {width: 14px; height:15px; float: left; background: url(../img/skin3.png) no-repeat -184px -112px; margin-top:6px; margin-left:10px; }
.btn_bookmark:hover {background: url(../img/skin3.png) no-repeat -184px -97px;}
.mark1 {width: 13px; height: 14px; background: url(../img/skin.png) no-repeat -480px -144px; float: left;}
.del_icon {width: 12px; height: 12px; background: url(../img/skin.png) no-repeat -494px -144px; float: right; margin: -18px 3px; cursor: pointer;}
.del_icon:hover {background: url(../img/skin.png) no-repeat -506px -144px;}
.bookmark { float:left; z-index:30; opacity: 0.5; margin: 10px 0 0 10px; width: 85px; background: #000; height: 20px; border-radius: 3px;}
.bookmark:hover {opacity: 1.0;}
.mark_time {font-size: 12px; color: #eaeaea; margin: 2px; float: left;}
.btn_mark {margin: 2px 5px;}
.book_bar { position: absolute; z-index:60; height: 30px; overflow: hidden;} 

/* 2017-01-19 추가 */
#bookmark_box { position: relative;left:0px; }
.bookmark_box { position: relative; z-index:60; height: 30px; width:670px; overflow: hidden; float:left;} 
.bookmark_left { float:left; width:20px; cursor: pointer;}
.bookmark_right{ float:left; width:20px; cursor: pointer;}
#bookmark_left { display:none; }
#bookmark_right{ display:none; }

.book_r {margin-top:10px; margin-right:20px; width: 19px; height:19px; float: left; background: url(../img/skin.png) no-repeat -555px -119px;}
.book_r:hover {background: url(../img/skin.png) no-repeat -555px -139px;}
.book_l {margin-top:10px; margin-left:7px; width: 19px; height:19px; float: left; background: url(../img/skin.png) no-repeat -534px -119px;}
.book_l:hover {background: url(../img/skin.png) no-repeat -534px -139px;}

.key{float:right;  width: 14px; height:16px; margin-right:10px;  margin-top:-3px;  background: url(../img/skin.png) no-repeat -582px -122px;}
/* 2017-01-19 추가 */

/* mute */
.btn_mute {width: 18px; height: 17px; background: url(../img/skin3.png) no-repeat -164px -167px; margin-top:4px;  margin-left:16px; float: left;}
.btn_unmute {background: url(../img/skin3.png) no-repeat -182px -167px;}
.btn_mute:hover {background: url(../img/skin3.png) no-repeat -182px -167px;}


/* 워터마크 */
#wmark { position: relative;left:0px;top:0px;color:#FFF;display:none; font-size: 20px; opacity: 0.5;}
.info_bar { position: absolute; left:0px; top:0px; z-index:30;  }

/* 비디오 */
 
#video-controls {
	position: relative;
	width: 100%;
	height: 76px;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 1.0;
    filter: alpha(opacity=100);
	margin-top: -4px;

	-webkit-transition: opacity 1.3s ease-in-out;
	-moz-transition: opacity 1.3s ease-in-out;
	-ms-transition: opacity 1.3s ease-in-out;
    -o-transition: opacity 1.3s ease-in-out;
	transition: opacity 1.3s ease-in-out;
	background: url(../img/skin3_bg.png);
	background-repeat: repeat-x;
} 

#video-container:hover #video-controls {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
  zoom: 1;
  filter: alpha(opacity=100);
  opacity: 1;
}

#seek_bar {
    width: 98%;
	margin-left: 10px;
	float: left;
	height: 9px;
}
 
#volume_bar {
    width: 120px;
	float: right;
	margin-right: 10px;
	margin-top: 10px;
	height: 9px;
}
 
video {
    width:100%;
    height:100%;	
} 

/* slider */
.ui-widget.ui-widget-content {border: 0; height: 5px; cursor: pointer; top: 3px;}
.ui-widget-content {background: #4a4a4a;}
.ui-corner-all {border-radius: 1px; }
.ui-widget-header {background: #f68704;}
.ui-slider .ui-slider-handle {width: 23px; height:12px; background: url(../img/skin3.png) no-repeat -108px -141px; border: 0;}
.ui-slider .ui-slider-handle:hover, .ui-slider .ui-slider-handle:active {background: url(../img/skin3.png) no-repeat -130px -141px;}
.ui-slider-horizontal .ui-slider-handle {margin-left: -10px;  }
#seeking_wrap {z-index:9; height: 15px;margin-top: 4px; margin-left:5px;  margin-right:5px; }
#volume_wrap {z-index:9; height: 15px;margin-top: 7px; margin-left:16px;}
#seeking_wrap_back{z-index:0;height: 25px; cursor: pointer; margin-top: -2px; }
#volume_wrap_back {z-index:0;height: 25px; cursor: pointer; margin-top: -4px; }
/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0){
	#seek_bar, #volume_bar {margin-top:0; background: transparent;}
}
/* FF */
@-moz-document url-prefix() {
	#seek_bar, #volume_bar {margin-top:-3px; height: 15px;}
	#video-controls {margin-top: -5px;}
}
/* Edge */
@supports (-ms-ime-align:auto) {
  #seek_bar, #volume_bar {margin-top:0; height: 10px;} 
}

 /* loading */
#curtainTop{ position:relative;top:50%;left:0;}
#curtainTop #curtain { position:relative; top:0; right:0; bottom:0; left:0; background-color:#fff; z-index:999; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter:alpha(opacity=50); -khtml-opacity:0.5; -moz-opacity:0.5; opacity:0.5; }
#curtainTop #loading { position:relative; margin:auto 0; color:#000000;  z-index:9999; }