/*CSS for StarPlayer Skin UI*/
@charset "utf-8";

.starplayer_script_ui { margin: 0px; width:1176px; height: 80px; background-color: black; user-select: none; position:relative; display: flex; justify-content: space-between;flex-direction: column;}

.starplayer_script_ui .control_btn{ display: flex; justify-content: space-between; }
.btn_common {
	display:block;
	cursor:pointer;
}

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

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

.seekbar_l { width:1176px; height: 6px; background : #F5F5F5; cursor: pointer;}

.seekbar_l.fullscreen { width:100%; position: absolute; bottom: 80px }

.seekbar_area { position: relative; height:100%; margin-top: -4px; margin-left: -2px; width: inherit;}

.volumebar_area {
	position:relative;
	height:4px;
	width:200px;
	z-index:2;
	background: #666;
}
.seekbar_r { position:relative; display:flex; width:500px; height:72px; align-items: center; gap: 30px; justify-content: flex-end; padding-right: 20px; }

.control_l { position:relative; width: auto; height: 72px; display: flex; gap: 30px; padding: 0 30px; align-items: center; }

.control_r {
	position:relative;
	float:right;
	height:36px;
}

.btn_seek  { position:relative; left:0px; top:-5px; width:12px; height:12px; z-index:100; background: #fff; border-radius: 20px; margin-left: -3px;}

.btn_volume  {
	position:absolute;
	left:-4px;
	top:-5px;
	width:11px;
	height:13px;
	z-index:999;
	background:url('/img/starplayer/purunet.png') no-repeat -230px -40px;
}

.btn_repeatA, .btn_repeatB {
	position:absolute;
	left:0px;
	top:-20px;
	width:5px;
	height:13px;
	transform: translate(-7px, 0px);
}

.currentbar { height: 6px; background: #F04D69; }

.current_volumebar {
	position:relative;
	height: 4px;
	background: #F5F5F5;
	z-index:2;
}

.repeatbar {
	position:relative;
	display:block;
	left:15px;
	top:0px;
	height:6px; background:#f5c850;
}

.basic_controls {
	position:absolute;
	left:0px;
	top:0px;
	display:block;
	width:214px;
	height:62px;

}

.speed_controls {
	margin:2px;
	padding:3px;
	display:block;
	width:55px;
	height:190px;
}

.speed_controls li {
	display:inline;
	list-style-type:none;
	float:left;
	margin:5px;
	padding:0;
}

.control_text_status {
	position:absolute;
	display:block;
	top:13px;
	right:291px;
	width:50px;
	height:17px;
	
}

#text_currentTime, .control_text_status{ color:#66CDBE; font-family: "Noto Sans KR"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 160%; /* 22.4px */ letter-spacing: -0.5px; }

#text_duration { color: #B3B3B3; font-family: "Noto Sans KR"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 160%; /* 22.4px */ letter-spacing: -0.5px; }

.control_text_time { width:128px; height:22px; display: flex; gap: 5px; justify-content: space-between; align-items: center;}

.btn_play { width:28px; height:28px; background:url('/img/starplayer/video_play.png') no-repeat center; }

.btn_play:hover{ background:url('/img/starplayer/video_play.png') no-repeat center; }

.btn_pause { width:29px; height:28px; background:url('/img/starplayer/video_pause.png') no-repeat center; }

.btn_backward {
	width:38px;
	height:28px;
	background:url('/img/starplayer/video_rewind.png') no-repeat center;
}

.btn_backward:hover{
	background:url('/img/starplayer/video_rewind.png') no-repeat center;
}

.btn_forward{ width:38px; height:28px; background:url('/img/starplayer/video_wind.png') no-repeat center; }

.btn_forward:hover{ background:url('/img/starplayer/video_wind.png') no-repeat center;}

.btn_repeat { width:28px; height:28px; background:url('/img/starplayer/video_repeat_off.png') no-repeat center;}

.btn_repeat:hover, .btn_repeat.active{ background:url('/img/starplayer/video_repeat.png') no-repeat center;}

.btn_fullscreen { width:28px; height:28px; background:url('/img/starplayer/video_full.png') no-repeat center;}

.btn_fullscreen.active{
	background:url('/img/starplayer/video_return.png') no-repeat center;
}

.fullscreen_controller .btn_fullscreen {
	background:url('/img/starplayer/video_return.png') no-repeat center;
}

.btn_volume_area { display: flex;flex-direction: row;gap: 10px;align-content: center;align-items: center;}

.btn_volume_popup {
	right:38px;
	width:15px;
	height:36px;
	background:url('/img/starplayer/purunet.png') no-repeat -110px -80px;
}


.btn_volume_popup:hover{
	background:url('/img/starplayer/purunet.png') no-repeat -130px -80px;
}

.btn_volume_popup.active {
	background:url('/img/starplayer/purunet.png') no-repeat -90px -80px;
}

.btn_volume_popup.active:hover {
	background:url('/img/starplayer/purunet.png') no-repeat -150px -80px;
}

.btn_mute { width:28px; height:28px; background:url('/img/starplayer/video_volume.png') no-repeat center;}
.btn_mute.on { width:28px; height:29px; background:url('/img/starplayer/video_mute.png') no-repeat center; }
.volumebar { position:relative; width: 238px; display:block!important;}
.btn_resolution{
	position:absolute;
	right:73px;
	width:36px;
	height:36px;
	background:url('/img/starplayer/purunet.png') no-repeat -40px -120px;
}

.btn_speed { width: 104px; height: 28px; display: inline-flex; align-items: center; gap: 4px;}

.btn_speed .btn_speed_minus { width: 28px; height: 28px; background:url('/img/starplayer/video_speed_minus.png') no-repeat center;}

.btn_speed > span {width: 55px; color: #B3B3B3; text-align: center; font-family: "Noto Sans KR"; font-size: 14px; font-style: normal; font-weight: 400;line-height: 160%; /* 22.4px */ letter-spacing: -0.5px;}

.btn_speed .btn_speed_plus { width: 28px; height: 28px; background:url('/img/starplayer/video_speed_plus.png') no-repeat center;}

.btn_rate{
	right:73px;
	width:36px;
	height:36px;
	background:url('/img/starplayer/purunet.png') no-repeat -40px -120px;
}

.btn_rate:hover {
	background:url('/img/starplayer/purunet.png') no-repeat -160px -160px;
}
.rate_popup {
	position:absolute;
	right:-20px;
	top:-190px;
	background:url('/img/starplayer/purunet.png') no-repeat -0px -260px;
}
.control_speed {
	position:relative;
	float:right;
	right:20px;
	top:-42px;
}

.btn_speed08{
	width:36px;
	height:13px;
	background:transparent url('/img/starplayer/purunet.png') no-repeat -0px -240px;
}

.btn_speed08:hover, .btn_speed08.active {
	background:url('/img/starplayer/purunet.png') no-repeat -40px -240px;
}

.btn_speed10{
	width:36px;
	height:13px;
	background:transparent url('/img/starplayer/purunet.png') no-repeat -210px -100px;
}

.btn_speed10:hover, .btn_speed10.active {
	background:url('/img/starplayer/purunet.png') no-repeat -160px -240px;
}

.btn_speed12{
width:36px;
	height:13px;
	background:transparent url('/img/starplayer/purunet.png') no-repeat -200px -120px;
}

.btn_speed12:hover, .btn_speed12.active {
	background:url('/img/starplayer/purunet.png') no-repeat -80px -240px;
}

.btn_speed13{
	width:36px;
	height:13px;
	background:transparent url('/img/starplayer/purunet.png') no-repeat -200px -140px;
}

.btn_speed13:hover, .btn_speed13.active {
	background:url('/img/starplayer/purunet.png') no-repeat -120px -240px;
}


.btn_speed14{
width:36px;
	height:13px;
	background:transparent url('/img/starplayer/purunet.png') no-repeat -200px -160px;
}

.btn_speed14:hover, .btn_speed14.active {
	background:url('/img/starplayer/purunet.png') no-repeat -200px -240px;
}

.btn_speed16{
width:36px;
	height:13px;
	background:transparent url('/img/starplayer/purunet.png') no-repeat -200px -180px;
}

.btn_speed16:hover, .btn_speed16.active {
	background:url('/img/starplayer/purunet.png') no-repeat -260px -0px;
}

.btn_speed18{
	width:36px;
	height:13px;
	background:transparent url('/img/starplayer/purunet.png') no-repeat -200px -200px;
}

.btn_speed18:hover, .btn_speed18.active {
	background:url('/img/starplayer/purunet.png') no-repeat -260px -20px;
}

.btn_speed20{
	width:36px;
	height:13px;
	background:transparent url('/img/starplayer/purunet.png') no-repeat -200px -220px;
}

.btn_speed20:hover, .btn_speed20.active {
	background:url('/img/starplayer/purunet.png') no-repeat -260px -40px !important;
}

.divide1{
	position:absolute;
	left:27px;
	width:1px;
	height:36px;
	background:url('/img/starplayer/purunet.png') no-repeat -230px -60px;

}

.divide2{
	position:absolute;
	left:56px;
	width:1px;
	height:36px;
	background:url('/img/starplayer/purunet.png') no-repeat -230px -60px;

}

.divide3{
	position:absolute;
	left:84px;
	width:1px;
	height:36px;
	background:url('/img/starplayer/purunet.png') no-repeat -230px -60px;

}

.divide_10px_1{
	position:absolute;
	right:187px;
	width:1px;
	top:13px;
	height:10px;
	background:url('/img/starplayer/purunet.png') no-repeat -220px -50px;

}
.divide_10px_2{
	position:absolute;
	right:120px;
	width:1px;
	top:13px;
	height:10px;
	background:url('/img/starplayer/purunet.png') no-repeat -220px -50px;

}

.divide_10px_3{
	position:absolute;
	right:63px;
	width:1px;
	top:13px;
	height:10px;
	background:url('/img/starplayer/purunet.png') no-repeat -220px -50px;

}

.divide_10px_4{
	position:absolute;
	right:30px;
	width:1px;
	top:13px;
	height:10px;
	background:url('/img/starplayer/purunet.png') no-repeat -220px -50px;

}

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

#video-container {
	position:relative;
	margin:0;
	padding:0;
	display:block;
	width:100%;
	height:100%;
}

#watermark {
	position:absolute;
	left:0px;
	top:0px;
	float:left;
	margin:0;
	padding:0;
	height:40px;
/*	text-align: left;*/
	text-transform: uppercase;
	font-weight: bold;
	font-size: 150%;
	color: #ffffff;
	opacity : 0.4;
	filter: alpha(opacity=40);
        -moz-opacity:0.4;
        -khtml-opacity: 0.4;
}