video {display:block; position:relative; left:0px; top:0px;}

.mp4-controlbar {display:block; position:relative; left:0px; top:0px; width:960px; height:39px; background: url("../images/video/bg.jpg") repeat-x; }
.progress-bar {display:block; position:absolute; left:0px; top:0px; width:0px; height:9px; background: url("../images/video/tracker.png") repeat-x; }
.time-bar   {display:block; position:relative; left:0px; top:0px; width:100%; height:9px; cursor:pointer;}
.progress-point {display:block; position:absolute; left:0px; top:-4px; width:17px; height:17px; background: url("../images/video/cursor.png") no-repeat; cursor: pointer;}
.button-wrap  {display:block; position:relative; left:0px; top:0px; width:100%; height:30px;}
.times-wrap   {display:block; border:solid 0px #FF0000; position:absolute; left:142px; top:16px; width:90px; height:15px; text-align: left; color: rgb(255, 255, 255); font-family: sans-serif; font-size: 11px;}




.button-wrap .play-button       {display:block; position:absolute; left: 9px; top: 0px; width: 32px; height: 25px; background: url("../images/video/buttons.png") no-repeat 0px 0px; cursor: pointer;}
.button-wrap .play-button:active    {background-position: -97px 0px;}
.button-wrap .play-button.pause     {background-position: -33px 0px;}
.button-wrap .play-button.pause:active  {background-position: -66px 0px;}

/*.button-wrap .script-button       {display:block; position:absolute; left: 44px; top: 7px; width: 22px; height: 20px; background: url("../images/video/btn_script.png") no-repeat 0px 0px; cursor: pointer;}
.button-wrap .script-button:hover     {display:block; background: url("../images/video/btn_script_on.png") no-repeat}
.button-wrap .script-button.active    {display:block; background: url("../images/video/btn_script_active.png") no-repeat}
.button-wrap .script-button.active:hover   {display:block; background: url("../images/video/btn_script_active_on.png") no-repeat}*/

.button-wrap .script-button       {display:block; position:absolute; left: 34px; top: 2px; width: 32px; height: 25px; background: url("../images/script/btn_script.png") no-repeat 0px 0px; cursor: pointer;}
.button-wrap .script-button:hover     {display:block; background: url("../images/script/btn_script_on.png") no-repeat}
.button-wrap .script-button.active    {display:block; background: url("../images/script/btn_script_active.png") no-repeat}
.button-wrap .script-button.active:hover   {display:block; background: url("../images/script/btn_script_active_on.png") no-repeat}

.button-wrap .mute-button     {display:block; position:absolute; right:142px; top: 0px; width: 32px; height: 25px; background: url("../images/video/buttons.png") no-repeat 0px -30px; cursor: pointer;}
.button-wrap .mute-button:active  {background-position: -96px -30px;}
.button-wrap .mute-button.off   {background-position: -64px -30px;}
.button-wrap .mute-button.off:active{background-position: -32px -30px;}

.button-wrap .volume-wrap {display:block; position:absolute; top:0px; width:83px; height:30px; right:59px; background: url("../images/video/sound-slider.png") no-repeat;}
.button-wrap .volume-wrap .volume-progress-bar  {display:block; position:absolute; left:0px; top:0px; width:40px; height:30px; background: url("../images/video/sound-active.png") no-repeat;}
.button-wrap .volume-wrap .volume-bar     {display:block; position:absolute; left:3px; top:11px; width:77px; height:7px; cursor:pointer;}
.button-wrap .volume-wrap .volume-pointer   {display:block; position:absolute; left:36px; top: 7px; width: 17px; height: 17px; background: url("../images/video/sound-cursor.png") no-repeat; cursor: pointer;}


.button-wrap .rate-button   {display:block; position:absolute; right: 27px; top: 0px; width: 32px; height: 25px; background: url("../images/video/buttons.png") no-repeat 0px -120px; cursor: pointer;}
.button-wrap .rate-button.x1  {background-position:0px -120px;}
.button-wrap .rate-button.x12 {background-position:-96px -120px;}
.button-wrap .rate-button.x15 {background-position:-160px -120px;}



.button-wrap .full-button   {display:block; position:absolute; right:5px; top:0px; width:32px; height:25px; background: url("../images/video/buttons.png") no-repeat 0px -90px; cursor: pointer;}
.button-wrap .full-button:active{background-position: -33px -90px;}


.times-wrap .times-current  {display:inline-block; position:relative; margin: 0px 2px 0px 0px;}
.times-wrap .times-devide {display:inline-block; position:relative; padding:0 3px;}
.times-wrap .times-total  {display:inline-block; position:relative; margin: 0px 0px 0px 2px;}

.player-wrap {
  background: rgb(0, 0, 0); margin: 0px; padding: 0px; width: 980px; height: 552px;
}
.wmv-controller {
  background: url("../images/video/bg.jpg") repeat-x left top; margin: 0px; padding: 0px; width: 100%; height: 39px; position: relative;
}
.progress-wrap {
  width: 100%; height: 9px; position: relative;
}

.progress-pointer {
  background: url("../images/video/cursor.png") no-repeat; left: 0px; top: -4px; width: 17px; height: 17px; position: absolute; cursor: pointer;
}
.pause.play-button {
  background-position: -33px 0px;
}
.pause.play-button:active {
  background-position: -66px 0px;
}
.rate-button {
  background: url("../images/video/buttons.png") no-repeat 0px -120px; top: 0px; width: 32px; height: 30px; right: 97px; position: absolute; cursor: pointer;
}
.x1.rate-button {
  background-position: 0px -120px;
}
.x08.rate-button {
  background-position: -260px -120px;
}
.x15.rate-button {
  background-position: -32px -120px;
}
.x20.rate-button {
  background-position: -190px -120px;
}


.full-button:active {
  background-position: -33px -90px;
}
.times-wrap {
  left: 72px; top: 16px; width: 90px; height: 15px; text-align: left; color: rgb(255, 255, 255); font-family: sans-serif; font-size: 11px; position: absolute;
}
.times-wrap .times-current {
  margin: 0px 2px 0px 0px;
}
.times-wrap .times-total {
  margin: 0px 0px 0px 2px;
}
.mute-button {
  background: url("../images/video/buttons.png") no-repeat 0px -30px; top: 0px; width: 32px; height: 30px; right: 152px; position: absolute; cursor: pointer;
}
.mute-button:active {
  background-position: -96px -30px;
}
.off.mute-button {
  background-position: -64px -30px;
}
.off.mute-button:active {
  background-position: -32px -30px;
}
.volume-wrap {
  background: url("../images/video/sound-slider.png") no-repeat; top: 0px; width: 83px; height: 30px; right: 69px; position: absolute; cursor: pointer;
}
.volume-bar {
  background: url("../images/video/sound-active.png") no-repeat; left: 0px; top: 0px; width: 45px; height: 30px; position: absolute;
}
.volume-pointer {
  background: url("../images/video/sound-cursor.png") no-repeat; left: 36px; top: 7px; width: 17px; height: 17px; position: absolute; z-index: 300; cursor: pointer;
}
.marker {
  top: 0px; width: 4px; height: 9px; position: absolute; z-index: 290; cursor: pointer; background-color: rgb(227, 191, 64);
}



/*자막*/
#narration{
	
	position: absolute;
	top: -100px;
	left: 20px;
	font-size:15px;
	width: 862px;
	height: 100px;
	padding:15px 0 0 20px;
	display:none;
	background: url(../images/video/navbg.png) no-repeat;
	
}
#narration_flash{
	
	position: absolute;
	top: 500px;
	left: 20px;
	font-size:15px;
	width: 862px;
	height: 20px;
	padding:15px 0 0 20px;
	display:none;
	/*background: url(../images/video/navbg.png) no-repeat;*/
	
}

#nar_txt{
	
	font-size: 12px;
	line-height:160%;
	border: 0px solid #333;
	overflow: auto;
	color: #FFFFFF;
	height:70px;
	width:830px;
	overflow:auto;
	
}


#startMvBtn{
	position: absolute;
	top: 191px;
	left: 388px;
	background: url(../images/start_btn.png) no-repeat;
	width: 120px;
	height: 120px;
	cursor: pointer;
	z-index: 9999;
	display:none;
}


#nar_lang{
	display:block;
	position:absolute;
	top: -25px;
	left: 10px;
	background:url(../images/script/sbtnbg.png) no-repeat;
	
	width:90px;
	height:25px;
	padding:6px 0 0 9px;
	display:none;
	
}

#nar_btn_kr{
	display:block;
	background:url(../images/script/script_koera_off.png) no-repeat;
	width:20px;
	height:13px;
	float:left;
	margin:0 5px 0 0 ;
}


#nar_btn_vt{
	display:block;
	background:url(../images/script/script_Vietnam_off.png) no-repeat;
	width:20px;
	height:13px;
	float:left;
	margin:0 5px 0 0 ;
}

#nar_btn_usa{
	display:block;
	background:url(../images/script/script_USA_off.png) no-repeat;
	width:20px;
	height:13px;
	float:left;
	margin:0 7px 0 0 ;
}

#nar_btn_kr.active{
	background:url(../images/script/script_koera_on.png) no-repeat;
}
#nar_btn_vt.active{
	background:url(../images/script/script_Vietnam_on.png) no-repeat;
}
#nar_btn_usa.active{
	background:url(../images/script/script_USA_on.png) no-repeat;
}


#marking{
	position:absolute;
	top:460px;
	left:0px;	
	width:896px;
	float:left;
}

.mvMark{
	display:block;
	width:13px;
	height:18px;
	background:url(../images/video/mark.png) no-repeat;	
	position:absolute;
	margin:25px 0 0 20px;
}

.mvMarkTxt{
	
	display:block;
	position:absolute;
	text-decoration:none;
	background-color:#FECC32;
	padding:3px;
	color:#000;
}

video::-webkit-media-text-track-display {
  font-size: .7em;
  position: absolute;
  text-align: left;
  background-color: rgba(1, 1, 1, .8);
}

video::cue {
  color: #fff;
  width: 100%;
  background: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    top: -130px;
    left: 40px;
    height: 90px;
    z-index: 100;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a i {
  padding-right: .5em;
  visibility: hidden;
}

.dropdown-content a i.active {
  visibility: visible;
}

.dropdown-content a:not(:last-child) {
  border-bottom: 1px solid #ccc;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}

#cc_icon {
  position: absolute;
  top: -25px;
  left: -5px;
  padding-left: 7px;
  width: 90px;
  height: 25px;
  display: block;
  padding-top: 6px;
  background: url(../images/script/sbtnbg.png) no-repeat;
}

#cc_icon a.icon {
  width: 20px;
  height: 13px;
  display: block;
  float: left;
  cursor: pointer;
  margin-right: 1px;
  margin-left: 3px;
  text-indent: -9999em;
  outline: none;
}

#cc_icon .kr { background: url(../images/script/script_kr_off.png) no-repeat; }
#cc_icon .en { background: url(../images/script/script_en_off.png) no-repeat; }
#cc_icon .vt { background: url(../images/script/script_vt_off.png) no-repeat }
#cc_icon .kr:hover, #cc_icon .kr.active { background: url(../images/script/script_kr_on.png) no-repeat; }
#cc_icon .en:hover, #cc_icon .en.active { background: url(../images/script/script_en_on.png) no-repeat; }
#cc_icon .vt:hover, #cc_icon .vt.active { background: url(../images/script/script_vt_on.png) no-repeat }