@charset "utf-8";

#ui-bottom{position:absolute; left:0px; top:566px; width:1120px; height:64px; z-index:1200;}   /* top = 630 - height */
#controlbarBlind{position:absolute; top:0px; left:0px; width:1120px; height:64px; display:none;}

/* 하단 컨트롤바 */
#bottom{position:absolute; left:0px; width:960px; height:64px;}
#bottom #bottombg{position:absolute; left:0px; width:1120px; height:64px; background-image:url(../img/ui-img/bottomBg.png); pointer-events:none; display:none;}

#ui-next{display:none;}
#ui-prev{display:none;}

/* index 버튼 */
.indexBtn {position:absolute; left:0px; top:-415px; z-index:5000; cursor:pointer;}
.indexBtn #menu_on a, .indexBtn #menu_off a{display:block; width:31px; height:31px; text-indent:-9999px; cursor:pointer; background:url(../img/index-img/indexbtn.png) no-repeat;}
.indexBtn #menu_on a{position:absolute; top:128px; background-position:0px 0px}
.indexBtn #menu_on a:hover{background:url(../img/index-img/indexbtn.png)}
.indexBtn #menu_off a{background-position:0px -50px;}
.indexBtn #menu_off a:hover{background-position:-100px -50px}

/* 타임바 */
#bottom div, #bottom li{margin:0px}
#bottom #timeControl, #bottom #timeControl div{position:absolute}
#bottom #timeControl{left:25px; top:10px; z-index:9990;}


/* 신세계 requests 반복 호출 건으로 수정 업데이트 _ shahn */
#bottom #timeControl #positionT{top:-5px; width:13px; height:13px; background:url(../img/ui-img/controlbar_btn.png) top no-repeat; background-position:0px 0px; z-index:1000; display:none;}	
#bottom #timeControl .progress{position:absolute; left:0px; top:0px; width:1063px; height:7px; color:#a3a0a2; background: #a3a0a2;}
#bottom #timeControl #seekBtn{top:-14px; left:0px; width:1063px; max-width:1063px; height:30px; cursor:pointer; z-index:999; background-color:#0F0; opacity:0;}
#bottom #timeControl .seekBar{top:0px; left:0px; width:1063px; height:7px; background: #ffffff;}
/* 신세계 requests 반복 호출 건으로 수정 업데이트 _ shahn */


/*모바일 타임바용 아래 bg 부분*/
#bottom #timeControl .seekBarBg{display:none;}
.timeLastLine{position:absolute; left:685px; top:0px; width:1px; height:28px; background:url(../img/ui-img/ui_controll.png) top no-repeat; background-position:-1100px 0px; display:none;}

/* 시간 표시 */
#bottom .timer{position:absolute; left:525px; top:35px; font-family:'NanumSquareEB'; font-size:11px; /* 현재 시간 색깔 */ color:#ffffff; pointer-events:none; transform:rotate(-0.03deg);}
#bottom .timerBar{position:absolute; left:560px; top:38px; width:2px; height:5px; background:url(../img/ui-img/ui_controll.png) top no-repeat; background-position:-850px 0px; z-index:10000; pointer-events:none;}
#bottom .timertotal{position:absolute; left:563px; top:35px; font-family:'NanumSquareEB'; font-size:11px; color:#ffffff; /*opacity:0.5;*/ pointer-events:none; transform:rotate(-0.03deg);}

/***** 재생 관련 버튼 *****/
#bottom #mediaControl{position:absolute; left:20px; top:5px;}
#bottom #mediaControl, #bottom #mediaControl div{float:left;}
#bottom #mediaControl a{display:block; width:0px; height:0px; text-indent:-9999px; cursor:pointer;}

/* play, pause 버튼 */
#bottom #mediaControl .playBtn a, #bottom #mediaControl .pauseBtn a{position:absolute; left:0px; top:21px; width:20px; height:24px; background:url(../img/ui-img/ui_controll.png) top no-repeat;}
#bottom #mediaControl .playBtn a{background-position:0px 0px}
#bottom #mediaControl .playBtn a:hover{background-position:0px -50px}
#bottom #mediaControl .pauseBtn a{background-position:-50px 0px}
#bottom #mediaControl .pauseBtn a:hover{background-position:-50px -50px}

/* replay 버튼 */
#bottom #mediaControl .replayBtn a{position:absolute; left:30px; top:21px; width:26px; height:27px; background:url(../img/ui-img/ui_controll.png) top no-repeat; background-position:-100px 0px}
#bottom #mediaControl .replayBtn a:hover{background-position:-100px -50px}

/* 배속 버튼 가리개 */
#bottom .dropBlind1{position:absolute; left:1010px; top:88px; width:69px; height:28px; background-color:#fff; opacity:0;}
/* 배속 버튼 */
#bottom .vod-speedOn a, #bottom .vod-speedOff a{position:absolute; left:905px; top:26px; width:40px; height:28px; text-indent:-9999px; background:url(../img/ui-img/ui_controll.png) top no-repeat; color:#ffffff; text-decoration:none;}
#bottom .vod-speedOn a{background-position:-950px -1px;}
#bottom .vod-speedOn a:hover{background-position:-950px -51px; /* 마우스 올렸을 때 색깔 */ color:#ffffff;}
#bottom .vod-speedOff a{background-position:-950px -1px;}
#bottom .vod-speedOff a:hover{background-position:-950px -51px; /* 마우스 올렸을 때 색깔 */ color:#ffffff;}
#bottom .vod-speed{position:absolute; left:5px; top:7px; width:20px; text-align:right; font-family:'NanumBarunGothic'; font-size:9px; opacity:0.5;}
#bottom .vod-speedOn a:hover .vod-speed, #bottom .vod-speedOff a:hover .vod-speed{opacity:1;}

#speedBtnAll{position:absolute; left:895px; top:-204px; width:50px; height:251px; background:url(../img/ui-img/speedBg.png);} /* 볼륨 버튼에 -5 */
#speedBtnAll ul{position:absolute; left:-10px; top:10px; margin:0; padding:0;}
#speedBtnAll ul li a{display:block; width:69px; height:18px; color:#ffffff; font-family:'NanumBarunGothic'; font-size:11px; text-align:center; text-decoration:none; opacity:0.5}
#speedBtnAll ul li a:hover, #speedBtnAll ul li a.selected{ /* 마우스 올렸을 때 색깔 */ color:#ffffff; opacity:1;}

/* 스크립트 버튼 */
#bottom #mediaControl .scriptBtn a{position:absolute; left:65px; top:21px; width:26px; height:22px; background:url(../img/ui-img/ui_controll.png) top no-repeat; background-position:-150px 0px; /*display:none;*/}
#bottom #mediaControl .scriptBtn a:hover, #bottom #mediaControl .scriptBtn a.selected{background-position:-150px -50px; /*display:none;*/}

/* 다운로드 버튼 */
#bottom #userControl .downBtn a{position:absolute; left:865px; top:30px; width:30px; height:30px; text-indent:-9999px; background:url(../img/ui-img/ui_controll.png) top no-repeat; background-position:-150px -100px;}
#bottom #userControl .downBtn a:hover{background-position:-150px -150px}

/* 사운드 버튼 */
#bottom #mediaControl .soundOn a{position:absolute; left:103px; top:21px; width:27px; height:23px; background:url(../img/ui-img/ui_controll.png) top no-repeat; background-position:-200px 0px}
#bottom #mediaControl .soundOn a:hover, #bottom #mediaControl .soundOn a:focus{background-position:-200px -50px}
#bottom #mediaControl .soundOff a{position:absolute; left:103px; top:21px; width:27px; height:23px; background:url(../img/ui-img/ui_controll.png) top no-repeat; background-position:-250px 0px}
#bottom #mediaControl .soundOff a:hover, #bottom #mediaControl .soundOff a:focus{background-position:-250px -50px}

/* 볼륨바 */
#bottom #volumeBar{position:absolute; left:133px; top:16px; overflow:hidden; width:100px; height:30px; display:none;} /* 볼륨 버튼에 -5 */
#bottom #volumControl{position:absolute; left:0px; top:10px; width:35px; height:80px; /*background:url(../img/ui-img/ui_controll.png) top no-repeat; background-position:-650px 0px*/}
#bottom #volumControl div{position:absolute}
#bottom #volumControl #positionV{top:1px; left:0px; width:11px; height:11px; background:url(../img/ui-img/ui_controll.png) no-repeat; background-position:-800px 0px; z-index:1000; cursor:pointer;}
#bottom #volumControl .progress{left:0px; top:0px; width:60px; height:10px; background:url(../img/ui-img/ui_controll.png) no-repeat; background-position:-700px 0px;}
#bottom #volumControl .seekBtn{left:0px; top:0px; width:60px; height:10px; color:#00F;}
#bottom #volumControl .seekBar{left:0px; top:0px; width:60px; height:10px; background:url(../img/ui-img/ui_controll.png) no-repeat; background-position:-700px -50px;} /*노랑*/

/***** 부가메뉴 *****/
#bottom #userControl{position:absolute; left:0px; top:0px; width:88px;}	
#bottom #userControl, #bottom #userControl div{float:left}


/* 러닝맵 */
#bottom #userControl .mapBtn a{position:absolute; left:360px; top:16px; width:30px; height:25px; text-indent:-9999px; background:url(../img/ui-img/ui_controll.png) top no-repeat; background-position:-1150px 0px;}
#bottom #userControl .mapBtn a:hover{background-position:-1150px -50px}


/* 러닝맵 */
#bottom #userControl .helpBtn a{display:none; position:absolute; left:360px; top:19px; width:25px; height:30px; text-indent:-9999px; background:url(../img/ui-img/ui_controll.png) top no-repeat; background-position:-350px 0px}
#bottom #userControl .helpBtn a:hover{background-position:-350px -50px}

/* 전체화면 버튼 가리개 */
#bottom .dropBlind3{position:absolute; left:358px; top:7px; width:24px; height:22px; background-color:#fff; opacity:0}
/* 전체화면 */
#bottom #fullScreenOn a{display:block; position:absolute; left:358px; top:20px; width:24px; height:28px; cursor:pointer; text-indent:-9999px; background:url(../img/ui-img/ui_controll.png) top no-repeat; background-position:-300px 0px;}
#bottom #fullScreenOn a:hover{background-position:-300px -50px}
#bottom #fullScreenOff a{display:block; position:absolute; left:358px; top:20px; width:24px; height:28px; cursor:pointer; text-indent:-9999px; background:url(../img/ui-img/ui_controll.png) top no-repeat; background-position:-300px 0px;}
#bottom #fullScreenOff a:hover{background-position:-300px -50px}


/* BGM 버튼 가리개 */
#bottom .dropBlind4{position:absolute; left:900px; top:0px; width:45px; height:35px; background-color:#fff; opacity:0}
/***** BGM *****/
#bottom #userControl .BgmBtnOn a{position:absolute; left:900px; top:11px; width:40px; height:20px; text-indent:-9999px; background:url(../img/ui-img/ui_controll.png) top no-repeat; background-position:-50px -100px}
#bottom #userControl .BgmBtnOn a:hover{background-position:-50px -150px}

#bottom #userControl .BgmBtnOff a{position:absolute; left:900px; top:11px; width:40px; height:20px; text-indent:-9999px; background:url(../img/ui-img/ui_controll.png) top no-repeat; background-position:-100px -100px}
#bottom #userControl .BgmBtnOff a:hover{background-position:-100px -150px}

/* 컨트롤바 잠금 */
#bottom #controllock{position:absolute; /*display:none;*/}
#bottom #controllock .controllockon a{position:absolute; left:960px; top:25px; width:22px; height:24px; text-indent:-9999px; background:url(../img/ui-img/ui_controll.png) top no-repeat; background-position:-455px 0px}
#bottom #controllock .controllockon a:hover{background-position:-455px -50px}
#bottom #controllock .controllockoff a{position:absolute; left:960px; top:25px; width:22px; height:24px; text-indent:-9999px; background:url(../img/ui-img/ui_controll.png) top no-repeat; background-position:-405px 0px}
#bottom #controllock .controllockoff a:hover{background-position:-405px -50px}

/***** 페이지 관련 *****/
#bottom .pageControl{position:absolute; left:170px; top:22px;}
#bottom .pageControl, .pageControl div{float:left}
#bottom .pageControl a{display:block; width:19px; height:35px; text-indent:-9999px; cursor:pointer;}
/* 이전 / 다음페이지 버튼 */
#bottom .pageControl .prevBtn{position:absolute; left:820px; top:5px; z-index:100}
#bottom .pageControl .prevBtn a{background:url(../img/ui-img/ui_controll.png) top no-repeat; background-position:-500px 0px}
#bottom .pageControl .prevBtn a:hover{background-position:-500px -50px}
#bottom .pageControl .nextBtn{position:absolute; left:901px; top:5px; z-index:100}
#bottom .pageControl .nextBtn a{background:url(../img/ui-img/ui_controll.png) top no-repeat; background-position:-600px 0px}
#bottom .pageControl .nextBtn a:hover, #bottom .pageControl .nextBtn a.selected{background-position:-600px -50px}

/* 페이지 번호 표시 */
#bottom .pageNum{position:absolute; left:847px; top:9px;color:#ffffff; font-family:'NanumSquareEB'; font-size:12px; transform:rotate(-0.03deg);}
#bottom .pageBar{position:absolute; left:870px; top:11px; width:1.5px; height:10px; text-indent:-9999px; background:url(../img/ui-img/ui_controll.png) top no-repeat; background-position:-550px -0px;}
#bottom .totalPageNum{position:absolute; left:880px; top:9px; color:#ffffff; font-family:'NanumSquareEB'; font-size:12px; transform:rotate(-0.03deg);}

/* 넥스트 풍선 */
#bottom .nextBalloon a{position:absolute; left:1024px; top:-25px; width:70px; height:35px; text-indent:-9999px; background-image:url(../img/ui-img/nextBalloon.png); background-position:0px 0px; opacity:0;}
#bottom .nextBalloon a:hover{background-position:0px -60px;}
#bottom .nextBalloon a.selected{background-position:-180px 0px;}
#bottom .nextBalloon a.selected:hover{background-position:-180px -60px;}

/* 이전 / 다음페이지 버튼 */
#ui-next{position:absolute; right:0px; top:0px; width:120px; height:193px; z-index:1300;}
#ui-prev{position:absolute; left:0px; top:0px; width:120px; height:193px; z-index:1300;}
#prevBtn a{position:absolute; left:0px; top:0px; z-index:1400; width:52px; height:85px; display:block; cursor:pointer; text-indent:-9999px; background:url(../img/ui-img/prevBtn.png) top no-repeat;}
#nextBtn a{position:absolute; left:0px; top:0px; z-index:1400; width:52px; height:85px; display:block; cursor:pointer; text-indent:-9999px; background:url(../img/ui-img/nextBtn.png) top no-repeat;}
#nextBtn a:hover, #nextBtn a.selected{background-position:0px -85px;}

#bottomLeft, #bottomRight{position:absolute; left:0px; top:0px; width:0px; height:30px; background-color:#020305; z-index:1201;}