/*CSS for StarPlayer Skin UI*/
@charset "utf-8"; .starplayer_script_ui { text-decoration: none; text-align: center; font-family: 'Roboto', sans-serif; font-size: 13px; color: #888888; display: block; } 

.btn_common { display: block; cursor: pointer; } 

.btn_common2 { display: block; cursor: pointer; } 

.top_area { position: relative; margin: 0; padding: 0; display: block; width: 100%; height: 10px; } 

.bottom_area { position: relative; margin: 0; padding: 0; display: block; width: 100%; height: 61px; } 

.seekbar_l { position: absolute; display: block; left: 10px; top: 9px; right: 10px; height: 4px; background-color: #555555; z-index:99999; } 

.seekbar_area { position: absolute; display: block; left: -3px; top: 0; right: 4px; height: 100%; } 

.volumebar_area { position: absolute; display: block; left: -3px; top: 0; right: 4px; height: 100%; } 

.seekbar_r { position: absolute; display: block; float: right; right: 0; } 

.control_l { position: relative; float: left; height: 48px; width:200px; bottom:-13px; } 

.control_r { position: relative; float: right; height: 50px; bottom:-13px; width:424px; } 

.btn_seek { position: absolute; left: 10px; top: -2px; width: 2px; height: 8px; z-index: 100; background: url("../img/hackers_new.png") no-repeat -417px -308px; } 

.btn_seek:hover { width: 12px; height: 12px; top: -3px; background: url("../img/hackers_new.png") no-repeat -417px -250px; } 
.btn_volume { position: absolute; left: 0; top: -1px; width: 14px; height: 10px; z-index: 100; } 

.btn_volume .volume_tooltip { visibility: hidden; width: 24px; height: 20px; background: url("../img/hackers_new.png") no-repeat -251px -376px; z-index: 1; display: inline-block; clear: both; position: absolute; bottom: 80%; left: -8px; text-align:center; color: black; } 

.btn_repeatA,
.btn_repeatB { position: absolute; left: 0; top: 5px; width: 8px; height: 6px; z-index: 90; background: url("../img/hackers_new.png") no-repeat -417px -282px; display: none; } 
.btn_repeatB { left:100% } 
.currentbar { position: absolute; display: block; left: -1px; top: 0; height: 4px; background-color: #40d9ff; } 

.current_volumebar { position: absolute; display: block; left: 0; top: 0; height: 4px; background-color: #40d9ff; } 

.repeatbar { position: absolute; display: block; left: -23px; right: 3px; top: 0; height: 4px; background-color: #40d9ff; } 

.control_text_status { position: absolute; display: block; top: 20px; left: 226px; width: 50px; height: 17px; } 

.control_text_time { position: absolute; display: block; text-align: left; top: 16px; left: 73px; width: 150px; height: 17px; color:#40d9ff } 

.control_text_time_ex { position: absolute; display: block; text-align: left; top: 20px; left: 73px; width: 150px; height: 17px; } 

#text_currentTime,
#text_currentTime_ex,
#text_duration,
#text_duration_ex { margin-right: 8px; } 

.btn_play { position: absolute; left: 26px; width: 21px; height: 48px; background: url("../img/hackers_new.png") no-repeat -286px -268px; } 

.btn_play:hover { background: url("../img/hackers_new.png") no-repeat -327px -268px; } 

.btn_play .play_tooltip { visibility: hidden; width: 28px; height: 20px; background: url("../img/hackers_new.png") no-repeat -324px -214px; position: absolute; z-index: 1; display: inline-block; clear: both; position: absolute; bottom: 80%; left: -20%; font-size: 10px; z-index: 0; line-height: 1.3; white-space: pre; } 

.btn_pause { position: absolute; left: 26px; width: 21px; height: 48px; background: url("../img/hackers_new.png") no-repeat -163px -268px; } 

.btn_pause:hover { background: url("../img/hackers_new.png") no-repeat -204px -268px; } 

.btn_pause .pause_tooltip { visibility: hidden; width: 48px; height: 20px; background: url("../img/hackers_new.png") no-repeat -147px -336px; position: absolute; z-index: 1; display: inline-block; clear: both; position: absolute; bottom: 80%; left: -60%; z-index: 0; } 

.btn_repeat { position: absolute; right: 182px; width: 31px; height: 48px; background: url("../img/hackers_new.png") no-repeat -324px -146px; } 


.btn_repeat:hover, .btn_repeat.active { background: url("../img/hackers_new.png") no-repeat -61px -268px; } 

.btn_repeat.active:active, .btn_repeat:active { background: url("../img/hackers_new.png") no-repeat -112px -268px; } 
.btn_repeat .repeat_tooltip { visibility: hidden; /* 이벤트가 없으면 툴팁 영역을 숨김 */
 width: 28px; /* 툴팁 영역의 넓이를 설정 */
 height: 20px; background: url("../img/hackers_new.png") no-repeat -272px -214px; z-index: 1; display: inline-block; clear: both; position: absolute; bottom: 80%; right: 0; z-index: 0; } 

.btn_fullscreen { position: absolute; right: 150px; width: 32px; height: 48px; background: url("../img/hackers_new.png") no-repeat -166px -132px; } 

.btn_fullscreen:hover { background: url("../img/hackers_new.png") no-repeat -220px -10px; } 

.btn_fullscreen:active { background: url("../img/hackers_new.png") no-repeat -220px -78px; } 

.btn_fullscreen.active { background: url("../img/hackers_new.png") no-repeat -62px -200px; } 

.btn_fullscreen.active:hover { background: url("../img/hackers_new.png") no-repeat -10px -200px; } 
.btn_fullscreen.active:active { background: url("../img/hackers_new.png") no-repeat -114px -200px; } 

.btn_fullscreen .fullscreen_tooltip { visibility: hidden; width: 47px; height: 20px; background: url("../img/hackers_new.png") no-repeat -10px -376px; z-index: 1; display: inline-block; clear: both; position: absolute; bottom: 80%; left: -20%; z-index: 0; } 

.btn_fullscreen.active .fullscreen_tooltip { visibility: hidden; width: 47px; height: 20px; background: url("../img/hackers_new.png") no-repeat -77px -376px; z-index: 1; display: inline-block; clear: both; position: absolute; bottom: 80%; left: -20%; z-index: 0; } 
.btn_fullscreen:hover .fullscreen_tooltip,
.btn_mute:hover .mute_tooltip,
.btn_mute.active:hover .mute_tooltip,
.btn_pause:hover .pause_tooltip,
.btn_play:hover .play_tooltip,
.btn_repeat:hover .repeat_tooltip,
.btn_resolution.active:hover .resolution_tooltip,
.btn_resolution:hover .resolution_tooltip,
#speed_zone:hover .speed_tooltip, #inputSkipTime:hover .skip_tooltip,
.btn_volume:hover .volume_tooltip { visibility: visible; z-index: 999999; } 


.volumeArea { position: absolute; width: 60px; height: 48px; right: 0; } 
.btn_mute { position: absolute; right: 120px; width: 32px; height: 48px; background: url("../img/hackers_new.png") no-repeat -324px -78px; } 

.btn_mute:hover { background: url("../img/hackers_new.png") no-repeat -218px -200px; } 

.btn_mute:active { background: url("../img/hackers_new.png") no-repeat -272px -10px; } 

.btn_mute.active { background: url("../img/hackers_new.png") no-repeat -272px -78px; } 

.btn_mute.active:hover { background: url("../img/hackers_new.png") no-repeat -272px -146px; } 
.btn_mute.active:active { background: url("../img/hackers_new.png") no-repeat -324px -10px; } 

.btn_mute .mute_tooltip { visibility: hidden; width: 28px; height: 20px; background: url("../img/hackers_new.png") no-repeat -203px -376px; z-index: 1; display: inline-block; clear: both; position: absolute; bottom: 80%; right: 0; z-index: 0; } 

.btn_mute.active .mute_tooltip { visibility: hidden; width: 39px; height: 20px; background: url("../img/hackers_new.png") no-repeat -144px -376px; z-index: 1; display: inline-block; clear: both; position: absolute; bottom: 80%; right: 0; z-index: 0; } 

.volumebar { position: absolute; right: 14px; top: 23px; width: 100px; height: 6px; background-color: #2d2d2d; } 

.fullscreen_controller { opacity: 0.7; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; } 

#video-container { position: relative; margin: 0; padding: 0; display: block; width: 100%; height: 100%; min-height: 550px; background:black ; } 
#video-container table tr td, #video-container table tr td p { padding-top: 60px; } 
#controller-container { margin: 0 0 0 0; /* height:61px; */ } 
#controller-container2 { margin: 0 0 0 0; width:100%; height:71px; position: absolute; left: 0; bottom: 0; background-color:#3b3b3b; } 
.watermark_text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-100%); } 
#watermark { width: 100%; position: absolute; left: 0; top: 0; float: left; margin: 0; padding: 0; height: 40px; text-transform: lowercase; /* font-weight: bold; */
 font-size: 150%; color: #ffffff; opacity: 0.3; filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; } 
#subtitle { position: absolute; display: none; left: 0; float: left; margin: 0; padding: 0; height: 60px; text-align: center; font-weight: bold; font-size: 150%; color: white; opacity: 0.9; filter: alpha(opacity=90); -moz-opacity: 0.9; -khtml-opacity: 0.9; } 
.btn_resolution { position: absolute; right: 215px; top: 0; width: 32px; height: 48px; background: url("../img/hackers_new.png") no-repeat -10px -132px; } 

.btn_resolution:hover { background: url("../img/hackers_new.png") no-repeat -62px -132px; } 

.btn_resolution:hover:active { background: url("../img/hackers_new.png") no-repeat -114px -132px; } 

.btn_resolution.active { width: 32px; height: 48px; background: url("../img/hackers_new.png") no-repeat -62px -64px; } 

.btn_resolution.active:hover:active { background: url("../img/hackers_new.png") no-repeat -166px -64px; } 

.btn_resolution.active:hover { background: url("../img/hackers_new.png") no-repeat -114px -64px; } 

.btn_resolution .resolution_tooltip { visibility: hidden; width: 45px; height: 20px; background: url("../img/hackers_new.png") no-repeat -351px -336px; z-index: 1; display: inline-block; clear: both; position: absolute; bottom: 80%; left:-5px; z-index: 0; } 

.btn_resolution.active .resolution_tooltip { visibility: hidden; width: 49px; height: 20px; background: url("../img/hackers_new.png") no-repeat -10px -336px; z-index: 1; display: inline-block; clear: both; position: absolute; bottom: 80%; left:-8px; z-index: 1; } 

.control_bookmark { position: absolute; right: 215px; top: 18px; width: 32px; height: 48px; } 

#speed_zone { position: absolute; right: 252px; width: 60px; height:12px; top: 14px; padding:3px; margin:0px; border:1px solid #555555; background-color:#555555; border-radius:3px; box-sizing: content-box; } 

#speed_zone .speed_tooltip { visibility: hidden; width: 28px; height: 20px; background: url("../img/hackers_new.png") no-repeat -220px -146px; z-index: 1; display: inline-block; clear: both; position: absolute; bottom: 120%; left: 15px; z-index: 0; } 
#speed_text { position:absolute; left: 10px; top:2px; font-family:굴림, Gulim, AppleGothic, sans-serif; font-size:12px; font-weight: bold; color:#B2B2B2; padding-top:1px; } 

.rate_text { position:absolute; left:10px; margin:0px } 
.rate_popup { position:absolute; left:0px; top:-150px; height:140px; width:65px; z-index:99999; background:white; overflow:auto; border-radius:5px; } 
.rate_popup::-webkit-scrollbar { width: 8px; margin-right:15px; } 
.rate_popup::-webkit-scrollbar-thumb { background-clip:padding-box; background:rgb(59, 59, 59); border-radius: 10px; } /* 실질적 스크롤 바 */
.rate_popup::-webkit-scrollbar-track-piece { background:#B2B2B2; border-radius: 10px; } 
.speed_controls { margin:0px; padding:1px; display:block; height:120px; width:55px; } 

.speed_controls li { display:block; list-style-type:none; padding:2px 0 2px 3px; width:50px; height:20px; } 

.speed_controls li:first-child { display:block; list-style-type:none; padding:2px 0 2px 3px; width:50px; height:20px; } 

.speed_point { position:absolute; left:46px; width:21px; height:20px; top:-1px; background:url('../img/hackers_new.png') no-repeat -417px -170px; } 

.speed_point.active { background:url('../img/hackers_new.png') no-repeat -417px -210px; } 

#inputSkipTime { position:absolute; display:block; border:0; top:14px; right:327px; width:80px; } 
#inputSkipTime .skip_tooltip { visibility: hidden; width: 48px; height: 20px; background: url("../img/hackers_new.png") no-repeat -283px -336px; z-index: 1; display: inline-block; clear: both; position: absolute; bottom: 3px; left: 18px; z-index: 0; } 
.skiptime { position:absolute; display:block; background-color: #555555; border:1px solid #555555; border:0; width:28px; height:17px; left:24px; text-decoration:none; text-align:center; font-family:굴림, Gulim, AppleGothic, sans-serif; font-size:12px; font-weight: bold; color:#B2B2B2; padding-top:2px; ime-mode:disabled } 
.btn_backward { position:absolute; right: 56px; width:24px; height:20px; background:url('../img/hackers_new.png') no-repeat -295px -376px; } 

.btn_backward:hover { background:url('../img/hackers_new.png') no-repeat -339px -376px; } 

.btn_backward:active { background:url('../img/hackers_new.png') no-repeat -417px -10px; } 

.btn_forward { position:absolute; left:56px; width:24px; height:20px; background:url('../img/hackers_new.png') no-repeat -417px -50px; } 
.btn_forward:hover { background:url('../img/hackers_new.png') no-repeat -417px -90px; } 
.btn_forward:active { background:url('../img/hackers_new.png') no-repeat -417px -130px; }