html,body { margin: 0; padding: 0}
ul, li{list-style:none; margin:0px}
img{border:0px}
#bottom {width:1024px; margin:auto; position:relative; top:0px;}

/*index메뉴 버튼 스타일*/
.indexBtn {position:absolute;	left:0px; top:0px; cursor:pointer}
.indexBtn #menu_on a, .indexBtn #menu_off a {
	display: block;
	width:190px; height:55px;
	text-indent: -9999px;
	cursor:pointer;
}
.indexBtn #menu_on a	{background: url(../../img/ui-img/menuBtn.png) no-repeat; background-position: 0px 0px}
.indexBtn #menu_on a:hover, .indexBtn #menu_on a:focus	{background-position: -190px 0px}
.indexBtn #menu_off a	{background: url(../../img/ui-img/menuBtn.png) no-repeat; background-position: 0px -55px}
.indexBtn #menu_off a:hover, .indexBtn #menu_off a:focus	{background-position: -190px -55px}

#bottom .backwardBtn {position:absolute;left:390px; top:3px}
#bottom .forwardBtn {position:absolute;left:440px; top:3px}
#bottom .backwardBtn a {background:url(../../img/ui-img/ui_controll.png) top no-repeat; background-position: -674px 0px}
#bottom .forwardBtn a {background:url(../../img/ui-img/ui_controll.png) top no-repeat; background-position: -725px 0px}
#bottom .backwardBtn a, #bottom .forwardBtn a {display: block; width:50px; height:40px; cursor:pointer; /*text-indent: -9999px;*/}
#bottom .backwardBtn a:hover {background-position: -674px -39px}
#bottom .forwardBtn a:hover {background-position: -725px -39px}
#bottom .backwardBtn a span, #bottom .forwardBtn a span{display:inline-block; margin-top:11px; width:100%; text-align:center; font-size:9pt; color:#333}

/*timeControl*/
#bottom div, #bottom li {margin:0px}
#timeControl, #timeControl div {position: absolute}
#timeControl {top: -10px;	left: 0px; width:100%;}

#timeControl .position {width: 1px; height: 10px; background:url(../../img/ui-img/ui_controll.png) no-repeat;}
#timeControl .progress {top:0px; width: 100%; height: 10px; background: #666; /*background-position: -120px -80px*/}
#timeControl .seekBtn  {top:0px; width: 100%; /*max-width: 1066px;*/ height: 10px; cursor:pointer; /*background: red;*/}
#timeControl .seekBar  {top:0px; width:1px; /*max-width: 1066px;*/ height: 10px; background: #e5e5e5; /*#64b4ff;*/}

#bottom #volumControl {position: absolute; top: 20px; left: 753px;}
#bottom #volumControl div {position: absolute;}
#bottom #volumControl .position {top:3px; width: 1px; height: 10px; background:url(../../img/ui-img/ui_controll.png) no-repeat;}
#bottom #volumControl .progress {top:2px; width: 50px; height: 10px; background: #666; cursor:pointer;}
#bottom #volumControl .seekBtn  {top:-5px; width: 50px; height: 10px; cursor:pointer; /*background: red;*/}
#bottom #volumControl .seekBar  {top:0px; width: 50px; height: 10px; background: #64b4ff;}

#bottom2 .seekMarker {position: absolute; bottom:12px; width:100%}
#bottom2 .seekMarker .pos{
	position:absolute; left:0px; top:2px;
	width: 0px; height: 0px;
	border-top: 10px solid #f2ac16;
	border-bottom: 10px solid none;
	border-right: 8px solid transparent;
	border-left: 8px solid  transparent;
	margin-left:-7px;
	cursor:pointer;
}

#bottom2 .seekMarker .text{
	position: absolute; left:0px; bottom:-2px; height:19px;
	background:#f2ac16;font-size:13pt; color:#000000;text-align:left; padding:2px 6px;
	margin-left:-7px;
	cursor:pointer; display:none;
}

/*timer*/
#bottom .timer {
	position:absolute;
	width:119px; height:55px;
	background:url(../../img/ui-img/timer_bg.png) no-repeat;
	left: 405px; top:0px;
	font-family:"굴림",arial, Geneva, sans-serif;
	font-size:16px;	color:#fff; text-align:center; padding-top:18px;
	cursor:default;
}

/*mediaControl*/
#bottom #mediaControl {	
	position: absolute;
	/*left:365px; top:3px;*/
}
#bottom #mediaControl, #bottom #mediaControl div {float:left;}
#bottom #mediaControl a{
	display: block;
	width: 110px;
	height: 55px;
	text-indent: -9999px;
	cursor:pointer;
}

#bottom .infoBtn a	{
	position: absolute; left:120px; top:3px;
	display: block;	width: 35px; height: 35px; text-indent: -9999px; cursor:pointer;
	background:url(../../img/ui-img/ui-info.png) top no-repeat; background-position: 0px 0px;
}
#bottom .infoBtn a:hover, #bottom .infoBtn a:focus {background-position: 0px -35px}

#bottom #mediaControl .playBtn	{position:absolute; left:525px; display:none;}
#bottom #mediaControl .pauseBtn	{position:absolute; left:525px; }
#bottom #mediaControl .replayBtn{position:absolute; left:580px; }
#bottom #mediaControl .scriptOn	{position:absolute; left:635px; }
#bottom #mediaControl .scriptOff{position:absolute; left:635px; }
#bottom #mediaControl .soundOn	{position:absolute; left:690px; }
#bottom #mediaControl .soundOff	{position:absolute; left:690px; }
#bottom #mediaControl .stopBtn{position:absolute; left:580px; }

#bottom #mediaControl .playBtn a	{background:url(../../img/ui-img/ui_controll.png) top no-repeat; background-position: -1px 0px; width:55px; height:55px;}
#bottom #mediaControl .pauseBtn a	{background:url(../../img/ui-img/ui_controll.png) top no-repeat;background-position: -78px 0px; width:55px; height:55px;}
#bottom #mediaControl .replayBtn a	{background:url(../../img/ui-img/ui_controll.png) top no-repeat;background-position: -1030px 0px; width:55px; height:55px;}
#bottom #mediaControl .soundOn a	{background:url(../../img/ui-img/ui_controll.png) top no-repeat;background-position: -315px 0px; width:55px; height:55px;}
#bottom #mediaControl .soundOff a	{background:url(../../img/ui-img/ui_controll.png) top no-repeat;background-position: -199px 0px; width:55px; height:55px;}
#bottom #mediaControl .stopBtn a	{background:url(../../img/ui-img/ui_controll.png) top no-repeat;background-position: -1030px 0px; width:55px; height:55px;}

#bottom #mediaControl .playBtn a:hover, #bottom #mediaControl .playBtn a:focus {background-position: -1px -55px}
#bottom #mediaControl .pauseBtn a:hover, #bottom #mediaControl .pauseBtn a:focus {background-position: -78px -55px}
#bottom #mediaControl .replayBtn a:hover, #bottom #mediaControl .replayBtn a:focus {background-position: -1030px -55px}
#bottom #mediaControl .soundOn a:hover, #bottom #mediaControl .soundOn a:focus {background-position: -315px -55px; }
#bottom #mediaControl .soundOff a:hover, #bottom #mediaControl .soundOff a:focus {background-position: -199px -55px; }
#bottom #mediaControl .stopBtn a:hover, #bottom #mediaControl .stopBtn a:focus {background-position: -1030px -55px}

#bottom #mediaControl .scriptOn a	{background: url(../../img/ui-img/ui_controll.png) top no-repeat;background-position: -538px 0px; width:55px; height:55px;}
#bottom #mediaControl .scriptBtn a:hover, #bottom #mediaControl .scriptBtn a.selected {background-position: -538px -55px}
#bottom #mediaControl .scriptOn a.disabled:hover{background-position: -538px 0px}
#bottom #mediaControl .scriptOff a	{background: url(../../img/ui-img/ui_controll.png) top no-repeat;background-position: -542px 0px; width:55px; height:55px;}
#bottom #mediaControl .scriptOff a:hover {background-position: -542px -55px}

/*fullScreen*/
#bottom #mediaControl .fullScreen {position:absolute; left:200px; top:0px; z-index:100}
#bottom #mediaControl .fullScreen a {background: url(../../img/ui-img/ui_controll.png) top no-repeat;background-position: -200px 0px}
#bottom #mediaControl .fullScreen a:hover {background-position: -200px -37px}

/*userControl*/
#bottom #userControl {position:absolute; left:200px; top:0px; /*width:135px; background: url(../../img/ui-img/ui_userBg.png) top no-repeat;*/}
#bottom #userControl, #bottom #userControl div {float:left}

#bottom #userControl .helpBtn{/*margin-left:210px*/}
#bottom #userControl a{
	display: block;
	width: 68px;
	height: 40px;
	text-indent: -9999px;
	cursor:pointer;
	margin:0 0px;
}

#bottom #userControl .helpBtn a		{background: url(../../img/ui-img/userControl.png) top no-repeat;background-position: 0px 0px}
#bottom #userControl .mapBtn a		{background: url(../../img/ui-img/userControl.png) top no-repeat;background-position: -68px 0px;}
#bottom #userControl .noteBtn a		{background: url(../../img/ui-img/userControl.png) top no-repeat;background-position: -142px 0px}
#bottom #userControl .postBtn a		{background: url(../../img/ui-img/userControl.png) top no-repeat;background-position: -180px 0px}

#bottom #userControl .resourceBtn a	{background: url(../../img/ui-img/ui_controll.png) top no-repeat;background-position: -592px 0px}
#bottom #userControl .scriptBtn a	{background: url(../../img/ui-img/ui_controll.png) top no-repeat;background-position: -320px 0px}
#bottom #userControl .searchBtn a	{background: url(../../img/ui-img/ui_controll.png) top no-repeat;background-position: -350px 0px}
#bottom #userControl .dicBtn a		{background: url(../../img/ui-img/ui_controll.png) top no-repeat;background-position: -593px 0px}
#bottom #userControl .signOn a		{background: url(../../img/ui-img/ui_controll.png) top no-repeat;background-position: -350px 0px}
#bottom #userControl .signOff a		{background: url(../../img/ui-img/ui_controll.png) top no-repeat;background-position: -380px 0px}

#bottom #userControl .helpBtn a:hover {background-position: 0px -42px}
#bottom #userControl .mapBtn a:hover {background-position: -68px -42px}
#bottom #userControl .noteBtn a:hover {background-position: -142px -42px}
#bottom #userControl .postBtn a:hover {background-position: -180px -42px}

#bottom #userControl .resourceBtn a:hover {background-position: -290px -40px}
#bottom #userControl .scriptBtn a:hover, #bottom #userControl .scriptBtn a.selected{background-position: -320px -40px}
#bottom #userControl .scriptBtn a.disabled:hover{background-position: -320px 0px}
#bottom #userControl .searchBtn a:hover {background-position: -350px -40px}
#bottom #userControl .dicBtn a:hover {background-position: -593px -40px}

#bottom #userControl .signOn a:hover	{background-position: -350px -40px}
#bottom #userControl .signOff a:hover	{ackground-position: -380px -40px}

/*searchBox*/
#searchDIV {position:absolute; bottom:80px;left:610px}
#searchDIV .textArea {background:url(img/ui-img/memo.png) ; width:366px; height:217px;}
#searchDIV .textArea input{ padding-left:105px; padding-top:20px;}
#searchDIV .closeBtn {position:absolute; left:202px; bottom:15px}

/*pageControl*/
#bottom .pageControl {position:absolute; left:815px; top:0px}
#bottom .pageControl, .pageControl div {float:left}
#bottom .pageControl .prevBtn{position:absolute; left:0px; z-index:300}
#bottom .pageControl .pageNum{position:absolute; left:45px;}
#bottom .pageControl .nextBtn{position:absolute; left:110px; z-index:100}

#bottom .pageControl a{
	display: block;
	width: 60px;
	height: 55px;
	text-indent: -9999px;
	cursor:pointer;
}

#bottom .pageControl .prevBtn a{background: url(../../img/ui-img/ui_controll.png) top no-repeat; background-position: -854px 0px}
#bottom .pageControl .nextBtn a{background: url(../../img/ui-img/ui_controll.png) top no-repeat; background-position: -960px 0px}
#bottom .pageControl .prevBtn a:hover, #bottom .pageControl .prevBtn a:focus {background-position: -854px -55px}
#bottom .pageControl .nextBtn a:hover, #bottom .pageControl .nextBtn a:focus {background-position: -960px -55px}
#bottom .prevBtn a.disabled {opacity: 0;	cursor: default;}
#bottom .nextBtn a.disabled {opacity: 0;	cursor: default;}

#bottom .pageNum {
	width: 80px;
	text-align:center;
	padding: 19px 0 0 0;
	color:#fff;
	font-family:"NanumG",arial, Geneva, sans-serif;
	font-size:20px;
	/*font-weight:bold*/
}

/* 중앙 back,next 버튼 */
#bottom .pageControl2 .prevBtn{position:absolute; left:0px; bottom:300px; z-index:100}
#bottom .pageControl2 .nextBtn{position:absolute; left:964px; bottom:300px; z-index:100}

#bottom .pageControl2 a{
	display: block;
	width: 60px;
	height: 42px;
	text-indent: -9999px;
	cursor:pointer;
}

#bottom .pageControl2 .prevBtn a{background: url(../../img/ui-img/ui_controll.png) top no-repeat; background-position: -121px -92px}
#bottom .pageControl2 .nextBtn a{background: url(../../img/ui-img/ui_controll.png) top no-repeat; background-position: -166px -92px}
#bottom .pageControl2 .prevBtn a:hover, #bottom .pageControl2 .prevBtn a:focus {background-position: -121px -137px}
#bottom .pageControl2 .nextBtn a:hover, #bottom .pageControl2 .nextBtn a:focus {background-position: -166px -137px}
/*
#bottom .pageControl2 .prevBtn a.disabled {opacity: 0.3;	cursor: default; background-position: -121px -92px}
#bottom .pageControl2 .nextBtn a.disabled {opacity: 0.3;	cursor: default; background-position: -166px -92px}*/
/*------------------------*/

#bottom .videoBtn {
	background:url(../../img/page/btn_video2.png) no-repeat; 
	display:block; width:208px; height:65px; 
	text-indent: -9999px; cursor:pointer; 
	position:absolute;
	z-index:200;
}
#bottom .videoBtn:hover {background-position:0px -65px;}

#bottom .drop-menu {position: absolute;	left:195px; top:0px; display: block;}
#bottom .vod-speed {
	width:43px;	height:55px;
	background: url(../../img/ui-img/ui_controll.png) no-repeat; background-position: -651px 0px;
}
#bottom .sub-menu {	position:absolute;	width:160px; height:55px; left:43px; bottom:0px; /*outline:1px solid red;*/}
#bottom .sub-menu li {float:left;}
#bottom .sub-menu li a{width:40px; height:55px; display:block; text-indent: -9999px; }
#bottom .sub-menu .speed_08 a{background: url(../../img/ui-img/ui_controll.png) top no-repeat; background-position: -694px 0px}
#bottom .sub-menu .speed_10 a{background: url(../../img/ui-img/ui_controll.png) top no-repeat; background-position: -734px 0px}
#bottom .sub-menu .speed_12 a{background: url(../../img/ui-img/ui_controll.png) top no-repeat; background-position: -774px 0px}
#bottom .sub-menu .speed_15 a{background: url(../../img/ui-img/ui_controll.png) top no-repeat; background-position: -814px 0px}
#bottom .sub-menu .speed_08 a:hover, #bottom .sub-menu .speed_08 a.selected {background-position: -694px -55px;}
#bottom .sub-menu .speed_10 a:hover,#bottom .sub-menu .speed_10 a.selected {background-position: -734px -55px;}
#bottom .sub-menu .speed_12 a:hover,#bottom .sub-menu .speed_12 a.selected {background-position: -774px -55px;}
#bottom .sub-menu .speed_15 a:hover,#bottom .sub-menu .speed_15 a.selected {background-position: -814px -55px;}
#bottom2 {position: absolute; width:100%; height:100%;}
.nextBalloon {position: absolute;left: 820px;top:-40px;	cursor: pointer; display: none}

#scriptUI {
	position:absolute; left:0px; bottom:65px; display:block; text-align:center; background:#2a2a2a; height:50px; width:100%;
}
#scriptUI .text p {position:relative; top:6px; white-space:nowrap; display:inline-block; line-height:120%; font-size:17pt; padding:6px; overflow-x:hidden; overflow-y: hidden; color:#e6e6e6; cursor:default;}

/*------ UI 숨기기 버튼 ------*/
#ui_lock {position:absolute; left:0px;}
#ui_lock a {width:40px; height:40px;display: block; text-indent: -9999px; cursor:pointer}
#ui_lock .show a {background: url(../../img/ui-img/ui_lock.png) top no-repeat; background-position: -40px 0px;}
#ui_lock .hide a {background: url(../../img/ui-img/ui_lock.png) top no-repeat; background-position: 0px 0px;}
#ui_lock .show a:hover{background-position: -40px -40px}
#ui_lock .hide a:hover{background-position: 0px -40px}
#ui_lock .hide {display:none;}

/*--------------------------- mobile skin ---------------------------*/
#mobile_start_btn {
	position:absolute; left:0px; top:0px;
	width: 100%; height: 100%;
	background:url(../../img/etc/bg-black-opa45.png) repeat;
	margin: 0 auto;
	display: none;
	z-index:1100;
}

#mobile_start_btn span {
	position:relative; top:50%;
	margin: auto; margin-top:-150px;
	width:200px; height:200px; display:block;
	/*text-indent: -9999px;*/
	/*background:url(../../img/ui-img/player1.png) repeat; background-position: 0px 0px;*/
}
/*
#mobile_skin1 { width:100%; position:absolute; left:0px; top:0px; display:none; z-index:3000;}
#mobile_skin1 #timeControl {position: absolute; top:0px; margin:0px 0px; width:100%;}
#mobile_skin1 #timeControl .position {position: absolute; width: 59px; height: 59px; ㅌz-index: 1000; top:-16px}
#mobile_skin1 #timeControl .progress {position: absolute; top:0px; width: 1000px; height: 40px;}
#mobile_skin1 #timeControl .seekBtn {position: absolute; top:0px; width: 1000px; max-width: 1000px; cursor:pointer; background:#333; height:100%;}
#mobile_skin1 #timeControl .seekBar {position: absolute; top:0px; width: 0px; background:#1caad5; height:100%; cursor:pointer}

#mobile_skin1 #mobile_mediaControl {position: absolute;	left:425px; top:160px}
#mobile_skin1 #mobile_mediaControl, #mobile_skin1 #mobile_mediaControl div {float:left}
#mobile_skin1 #mobile_mediaControl a{display: block; width: 160px; height: 160px; text-indent: -9999px; cursor:pointer}

#mobile_skin1 #mobile_mediaControl .playBtn a	{background:url(../../img/ui-img/ui_mobileSkin1.png) no-repeat; background-position: 0px 0px}
#mobile_skin1 #mobile_mediaControl .pauseBtn a	{background:url(../../img/ui-img/ui_mobileSkin1.png) no-repeat;background-position: -160px 0px}


#mobile_skin1 #mobile_pageControl {position:absolute; left:0px; top:0px; z-index:100; width:100%}
#mobile_skin1 #mobile_pageControl .prevBtn{position:absolute; left:10px; top:0px}
#mobile_skin1 #mobile_pageControl .nextBtn{position:absolute; right:10px; top:0px}

#mobile_skin1 #mobile_pageControl div a{display: block;	width: 70px; height: 120px;	text-indent: -9999px;	cursor:pointer}
#mobile_skin1 #mobile_pageControl .prevBtn a{background: url(../../img/ui-img/ui_mobileSkin2.png) top no-repeat; background-position: -120px -0px}
#mobile_skin1 #mobile_pageControl .nextBtn a{background: url(../../img/ui-img/ui_mobileSkin2.png) top no-repeat; background-position: -190px 0px}
*/
/*--------------------------- mobile skin2 ---------------------------*/
/*
#mobile_skin2 {width:100%; position:relative; z-index: 2000; opacity: 0.2; display:none}
#mobile_skin2 .mobile_roundBox {
	position: relative; margin:0 auto; background-color: rgba(0,0,0,0.6);
	top:10px;
	width:610px; height:68px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
#mobile_skin2 #timeControl3 {position: absolute; top:0px; margin-left:30px; margin-top:23px}
#mobile_skin2 #timeControl3 .position {position: absolute; width: 59px; height: 59px; background:url(../../img/ui-img/mobile_timePos.png); z-index: 1000; top:-18px}
#mobile_skin2 #timeControl3 .progress {position: absolute; top:0px; width: 480px; height: 15px; background:#626262; border:2px solid #a1a1a1}
#mobile_skin2 #timeControl3 .seekBtn {position: absolute; top:0px; width: 480px; max-width: 500px; height: 15px; cursor:pointer}
#mobile_skin2 #timeControl3 .seekBar {position: absolute; top:0px; width: 0px; height: 15px; background:#cdcdcd; cursor:pointer}

#mobile_skin2 #mobile_mediaControl2 {position: absolute;	left:540px; top:5px}
#mobile_skin2 #mobile_mediaControl2, #mobile_skin2 #mobile_mediaControl2 div {float:left}
#mobile_skin2 #mobile_mediaControl2 a{display: block; width: 60px; height: 60px; text-indent: -9999px; cursor:pointer}

#mobile_skin2 #mobile_mediaControl2 .playBtn a	{background:url(../../img/ui-img/ui_mobileSkin2.png) no-repeat; background-position: 0px 0px}
#mobile_skin2 #mobile_mediaControl2 .pauseBtn a	{background:url(../../img/ui-img/ui_mobileSkin2.png) no-repeat;background-position: -60px 0px}

#mobile_skin2 #mobile_mediaControl2 .playBtn a:hover, #mobile_mediaControl2 .playBtn a:focus {background-position: 0px 0px}
#mobile_skin2 #mobile_mediaControl2 .pauseBtn a:hover ,#mobile_mediaControl2 .pauseBtn a:focus {background-position: -60px 0px}


#mobile_skin2 #mobile_pageControl2 {position:absolute; left:0px; top:255px; z-index:100; width:100%}
#mobile_skin2 #mobile_pageControl2 .prevBtn{position:absolute; left:20px; top:0px}
#mobile_skin2 #mobile_pageControl2 .nextBtn{position:absolute; right:20px; top:0px}

#mobile_skin2 #mobile_pageControl2 div a{display: block;	width: 70px; height: 120px;	text-indent: -9999px;	cursor:pointer}
#mobile_skin2 #mobile_pageControl2 .prevBtn a{background: url(../../img/ui-img/ui_mobileSkin2.png) top no-repeat; background-position: -120px -0px}
#mobile_skin2 #mobile_pageControl2 .nextBtn a{background: url(../../img/ui-img/ui_mobileSkin2.png) top no-repeat; background-position: -190px 0px}
*/