/* CSS Document */

#footerSet{
	position: absolute;
	display:block;
	width:1280px;
	height:40px;
	left:0px;
    top:0px;
}

.controlSet{
	
}

#controller{
	width:1280px;
	height:40px;
    position: absolute;
    background-color: #ffffff;
}

.controlBtn{
	cursor:pointer;
	text-indent: -1000em;
}
.controlBtn.dis{
	cursor:default;
}

#logo{
	display:block;
	background: url(../img/main/logo.png) no-repeat;
	width:150px;
	height:30px;
}

/*영상네비버튼박스 구역 start ------------------------------------------------------------------------------*/
#naviSet{
	position: absolute;
	display:block;
	width:1280px;
	height:120px;
	left:40px;
/*	background-color:rgba(256,2562,256,0.4);*/
}
#naviController{
	width:1280px;
	height:120px;
}

#navibar{
	display: block;
	width:470px;
	height: 120px;
	border: 0px;
	position: absolute;
	top:0px;left:15px;
}

.naviBtn{
	display: block;
	width:32px;
	height: 45px;
	border: 0px;
	padding:0px;
	position: absolute;
/*	background-color: #fff;*/
	background: url("../img/main/movNaviBn.png") no-repeat;
	cursor: pointer;
	z-index:10;
	bottom:7px;
}


.naviPreViewBtn{
	display: block;
	width:150px;
	height: 95px;
	box-shadow:2px 2px 5px 1px #000;
	border: 2px solid #fff;
	padding:0px;
	position: absolute;
	background-color:rgba(123,123,123,1);
	cursor: pointer;
	z-index:10;
	bottom:55px;
}

.steptxt{
	display: block;
	font-size: 30px;
	border:0px;
	height:40px;
	position: absolute;
	top:25px;
	color: #fff;
	font-family: 'Noto Sans KR';
	font-weight: 700;
	width:100%;
	text-align: center;
	background:  rgba(0,0,0,0.7);
}


/*--------------------------------------------------------------------------------영상네비버튼박스 구역 end*/


/*타임바 구역 start ------------------------------------------------------------------------------*/
/*로고*/
#logo{
	width:120px;
	height:29px;
	background:url("../img/main/logo.png") no-repeat;
	position:relative;
	top:11px;
	left:17px;
}

/*조그바*/
#jogbar{
	display: block;
	width:520px;
	height: 8px;
	border: 0px solid #012472;
    border-radius: 4px;
    background-color: #afb1b5;
	position: absolute;
	top:16px;left:225px;
/*	background: url("../img/main/controlbar_bg.png") repeat-x;*/
    cursor:pointer; 
}

#jogProgress{
	display: block;
	width:196px;
	height: 9px;
	position: absolute;
	background-color: #012472;
	left:0px;top:0px;
	border-radius:6px;
    cursor:pointer; 
}

#jogbtn{
	display: block;
	width:16px;
	height: 16px;
	cursor: pointer;
/*	background: url(../img/main/dragBtn.png) no-repeat;*/
	position: absolute;
	top:-3.5px;
	left:0px;
	opacity:1;
    background-color: #012372;
    border-radius: 10px;
}

#time{
	color:#afb1b5;
	font-size:14px;
	position: absolute;
	left:760px;top:9px;
	display:block;
	width:90px;
	font-weight:400;
	font-family: 'Roboto','Noto Sans KR'; 
	*font-family: 'Roboto','Nanum Gothic';
	-webkit-font-smoothing:antialiased; 
	-moz-font-smoothing:antialiased; 
	font-smoothing:antialiased;
    -webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */  
	
}

#time span {
    color:#012472;
    font-weight:600;
}
/*------------------------------------------------------------------------------------타임바 구역End*/

/*배속버튼 start ------------------------------------------------------------------------------*/

#speedBox{
	display:block;
	width:90px;
	height:38px;
	position: absolute;
	left:655px;
	top:0px;
}

#speedBox #speed1Btn{
	background: url(../img/main/speed1.png) no-repeat;
	border:0px;
	position:absolute;
	left:0px;
	width:35px;
	height:35px;
}
#speedBox #speed2Btn{
	background: url(../img/main/speed2.png) no-repeat;
	border:0px;
	position:absolute;
	left:40px;
	width:35px;
	height:35px;
}

#speedBox #speed1Btn:hover{	background: url(../img/main/speed1Over.png) no-repeat;}
#speedBox #speed2Btn:hover{	background: url(../img/main/speed2Over.png) no-repeat;}


/*컨트롤버튼구역 start ------------------------------------------------------------------------------*/

#contBtnBox{
	display:block;
	width:200px;
	height:40px;
	position: absolute;
	left:850px;
	top:0px;

}
#playBtn, #pauseBtn, #replayBtn{
	width:30px;
	height:40px;
	border:0px;
	top:0px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	float:left;
    margin-left: 3px;
}
 #scriptBtn {
	width:30px;
	height:40px;
	border:0px;
	top:0px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	float:left;
    margin-left: 5px;
}

#muteBtn{
	width:30px;
	height:40px;
	border:0px;
	top:0px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	float:left;
    margin-left: 8px;
}

#footer #tools{position: relative; left: 75px; bottom: -5px;}

#roadmapBtn{
	background: url(../img/main/roadmapBtn.png) no-repeat;
	width:78px;
	height:38px;
	position: absolute;
	border:0px;
	top:5px;
	left:15px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    display: none;
}
#helpBtn{
	background: url(../img/main/helpBtn.png) no-repeat;
	width:50px;
	height:38px;
	position: absolute;
	border:0px;
	top:5px;
	left:20px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    display: none;
}
#downloadBtn{
	background: url(../img/main/downloadBtn.png) no-repeat;
	width:80px;
	height:40px;
	position: absolute;
	border:0px;
	top:0px;
	left:130px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    display:block;
}
#downloadBtn:hover{
	background: url(../img/main/downloadBtnOver.png) no-repeat;
}

#dictionaryBtn{
	background: url(../img/main/dictionaryBtn.png) no-repeat;
	width:32px;
	height:32px;
	position: absolute;
	border:0px;
	top:0px;
	left:0px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    display: block;
}
#dictionaryBtn:hover{background: url(../img/main/dictionaryBtnOver.png) no-repeat;}

#manualDownloadBtn{
    background: url(../img/main/manualDownloadBtn.png) no-repeat;
	width:32px;
	height:32px;
	position: absolute;
	border:0px;
	top:0px;
	left:43px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    display: block;
}
#manualDownloadBtn:hover{background: url(../img/main/manualDownloadBtnOver.png) no-repeat;}

#bookMarkBtn{
    background: url(../img/main/bookMarkBtn.png) no-repeat;
	width:32px;
	height:32px;
	position: absolute;
	border:0px;
	top:0px;
	left:80px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    display: block;
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}
#bookMarkBtn:hover{background: url(../img/main/bookMarkBtnOver.png) no-repeat;}

/*#playBtn{background: url(../img/main/playBtn.png) no-repeat;}*/
#playBtn{background: url(../img/main/playBtn.png) no-repeat;}
#pauseBtn{background: url(../img/main/pauseBtn.png) no-repeat;}
#replayBtn{background: url(../img/main/replayBtn.png) no-repeat;}
#scriptBtn{background: url(../img/main/scriptBtn.png) no-repeat;}
#muteBtn{background: url(../img/main/muteBtn.png) no-repeat;}

/*#playBtn:hover{	background: url(../img/main/playBtnOver.png) no-repeat;}*/
#playBtn:hover{	background: url(../img/main/playBtnOver.png) no-repeat;}
#pauseBtn:hover{	background: url(../img/main/pauseBtnOver.png) no-repeat;}
#replayBtn:hover{	background: url(../img/main/replayBtnOver.png) no-repeat;}
#scriptBtn:hover{	background: url(../img/main/scriptBtnOver.png) no-repeat;}
#muteBtn:hover{	background: url(../img/main/muteBtnOver.png) no-repeat;}
#roadmapBtn:hover{	background: url(../img/main/roadmapBtnOver.png) no-repeat;}
#helpBtn:hover{	background: url(../img/main/helpBtnOver.png) no-repeat;}


#muteBtn.mute{	background: url(../img/main/muteBtn_mute.png) no-repeat;}
#muteBtn.mute:hover{	background: url(../img/main/muteBtn_muteOver.png) no-repeat;}
#scriptBtn .selected{	background: url(../img/main/scriptBtnOver.png) no-repeat;}
#playBtn.selected{	background: url(../img/main/playBtnOver.png) no-repeat;}
#pauseBtn.selected{	background: url(../img/main/pauseBtnOver.png) no-repeat;}
#roadmapBtn.selected{	background: url(../img/main/roadmapBtnOver.png) no-repeat;}
#helpBtn.selected{	background: url(../img/main/helpBtnOver.png) no-repeat;}


/*------------------------------------------------------------------------컨트롤버튼구역End*/

/* volume*/
#volJogBar{
	display: block;
	width:70px;
	height: 8px;
/*	background:url(../img/main/volProgressBg.png) repeat-x;*/
	position: absolute;
	top:16px;right:180px;
	background-color: #afb1b5;
	border-radius: 4px;
}
#volJogProgress{
	display: block;
	width:45px;
	height: 9px;
	position: absolute;
	left:0px;top:0px;
	background-color: #012472;
	border-radius:6px;
}

#volJogbtn{
	display: block;
	width: 16px;
	height: 16px;
	cursor: pointer;
	position: absolute;
	top:-4px;
	opacity:1;
    background-color: #012372;
    border-radius: 10px;
}


/*백넥버튼구역 start-------------------------------------------------------------------------*/

#paging{
	display:block;
	width:172px;
	height:40px;
	position: absolute;
	right:-10px;
	top:0px;
}

/*이전 다음버튼*/
#prevBtn{
    position: absolute;
	border:0px;
	background: url(../img/main/prevBtn.png) no-repeat;
	width:30px;
	height: 40px;
	left:0px;
	top:0px;
}

#nextBtn{
    position: absolute;
	border:0px;
	background: url(../img/main/nextBtn.png) no-repeat;
	width:30px;
	height: 40px;
	right:15px;
	top:0px;
}

#prevBtn:hover{background: url(../img/main/prevBtnOver.png) no-repeat;}
#nextBtn:hover{background: url(../img/main/nextBtnOver.png) no-repeat;}


/* page num*/

#currentNum{
	display:block;
	width:32px;
	height:22px;
	margin:0px;
	padding:0px 0 0 0;
	text-align: center;
	cursor: default;
	color:#012472;
	font-size:30px;
	line-height:20px;
	position: absolute;
	display:block;
	left:32px;
	top:10px;
	font-family: 'Roboto', 'Noto Sans KR'; 
	*font-family: 'Roboto', 'Nanum Gothic';
	*top:2px;
	font-weight: 600;
	*font-size: 30px;
	*font-weight: 700;
	*padding-top:3px;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */  
}
#pageLine{
	display:block;
	width:5px;
	height:5px;
	position: absolute;
	left:77px;
	top:18px;
	color:#afb1b5;
	font-size:30px;
	*font-size: 30px;	
	font-family:'Roboto', 'Noto Sans KR'; 
	*font-family:'Roboto', 'Nanum Gothic';	
	font-weight: 100;
	*font-weight: 100;
    -webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */ 
    border-radius: 70%;
    background-color: #afb1b5;
}
#totalNum{
	display:block;
	width:32px;
	height:22px;
	margin:0px;
	padding:0px 0 0 0;
	text-align: center;
	
	cursor: default;
	color:#afb1b5;
	font-size: 30px;
	line-height: 20px;
	position: absolute;
	display:block;
	right:48px;
	top:9px;
	font-family:'Roboto', 'Noto Sans KR'; 
	*top:2px;
	*font-family:'Roboto', 'Nanum Gothic';
	*font-size: 30px;
	font-weight: 400;
	*font-weight: 100;
	*padding-top:3px;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */  
}

/*-------------------------------------------------------------------백넥버튼구역End*/

#nextAram{
	position: absolute;
	bottom: 85px;
	width: 70px;
	right: 0px;
}

#nextBubble{
	display:none;
	
	width:70px;
	height:72px;
	
	 -webkit-transition-duration: 0.5s; /* Safari */
     transition-duration: 0.5s;
	
	position: absolute;
	top:-27px;
	right:-150px;
	border:0px;
	text-indent: -1000em;
	background-color: transparent;
	
	cursor: pointer;
    z-index: 999;
}

#nextBubble.show{
	display:block;
	background: url(../img/main/Bubble_next.png) no-repeat;
}
#nextBubble.last{
	display:block;
	background: url(../img/main/Bubble_end.png) no-repeat;
}

/*---------------------------------------------------------------------------*/
#currentNum.ie8{
	font-family: 'Nanum Gothic';
	font-weight: 700;
	padding-top:0px;
	font-size: 18px;
}
#totalNum.ie8{
	font-family: 'Nanum Gothic';
	font-weight: 700;
	padding-top:0px;
	font-size: 18px;
}
#time.ie8{
	font-family: 'Nanum Gothic';
}
#logo.ie7{
	position:relative;
	z-index:9999;
	left:0;
}

#container.isMobile{
	height:580px;
	top:0px;
	margin-top:0px;
	left:0px;
	margin-left:0px;
}

#footer.isMobile{
	height:40px;
}

#footerSet.isMobile{
	height:40px;
}
#controller.isMobile{
	height:40px;
}
#logo.isMobile{
	background: url(../img/mobile/logo.png) no-repeat;
	width:138px;
	height:40px;
	top:19px;
}
#jogbar.isMobile{
	display: block;
	width:340px;
	height:38px;
	border: 0px solid #FF0000;
	position: absolute;
	top:8px;left:138px;
	background: url("../img/mobile/progressBg.png") repeat-x;
}
#jogProgress.isMobile{
	width:340px;
	height:4px;
	background-color: #e6001f;
	left:0px;top:16px;
}

#speedBox.isMobile{
	position:absolute;
	left:600px;
	top:7px;
}

#contBtnBox.isMobile{
	position:absolute;
	left:690px;
	top:7px;	
}

#time.isMobile{
	color:#b5b5b5;
	font-size:14px;
	position: absolute;
	left:490px;top:14px;
	width:127px;
}


#playBtn.isMobile{
	position:absolute;
	background: url(../img/mobile/playBtn.png) no-repeat;
	width:38px;
	height:38px;
	left:0px;
}
#replayBtn.isMobile{
	position:absolute;
	background: url(../img/mobile/replayBtn.png) no-repeat;
	width:38px;
	height:38px;
	left:35px;
}
#scriptBtn.isMobile{
	position:absolute;
	background: url(../img/mobile/scriptBtn.png) no-repeat;
	width:38px;
	height:38px;
	left:70px;
}
#muteBtn.isMobile{
	position:absolute;
	background: url(../img/mobile/muteBtn.png) no-repeat;
	width:38px;
	height:38px;
	left:105px;
}

#playBtn.isMobile:hover{	background: url(../img/mobile/playBtnOver.png) no-repeat;}
#replayBtn.isMobile:hover{	background: url(../img/mobile/replayBtnOver.png) no-repeat;}
#scriptBtn.isMobile:hover{	background: url(../img/mobile/scriptBtnOver.png) no-repeat;}
#muteBtn.isMobile:hover{	background: url(../img/mobile/muteBtnOver.png) no-repeat;}





#muteBtn.isMobile.mute{
	background: url(../img/mobile/muteBtn_mute.png) no-repeat;
}


#playBtn.isMobile.pause{
	background: url(../img/mobile/pauseBtn.png) no-repeat;
}

#pauseBtn.isMobile{
	background: url(../img/mobile/pauseBtn.png) no-repeat;
}
#playBtn.isMobile.pause:hover{
	background: url(../img/mobile/pauseBtnOver.png) no-repeat;
}

#playBtn.isMobile:hover{	background: url(../img/mobile/playBtnOver.png) no-repeat;}

#playBtn.isMobile.pause:hover{
	background: url(../img/mobile/pauseBtnOver.png) no-repeat;
}

#volJogBar.isMobile{
	display: block;
	width:46px;
	height: 50px;
	border: 0px solid #FF0000;
	background:url(../img/mobile/volProgressBg.png) repeat-x;
	position: absolute;
	top:0px;left:780px;
}
#volJogProgress.isMobile{
	display: block;
	width:46px;
	height: 10px;
	border: 0px solid #FFFF00;
	position: absolute;
	left:0px;top:21px;
	background-color: #50b2ff;
}

#paging.isMobile{
	position: absolute;
	display:block;
	width:158px;
	height:40px;	
	right:0px;
	top:7px;
}

#prevBtn.isMobile{
	position: absolute;
	background: url(../img/mobile/prevBtn.png) no-repeat;
	width:33px;
	height:33px;
	left:0px;
}
#nextBtn.isMobile{
	position: absolute;
	background: url(../img/mobile/nextBtn.png) no-repeat;
	width:33px;
	height:33px;
	left:126px;
}
#prevBtn.isMobile:hover{background: url(../img/mobile/prevBtnOver.png) no-repeat;}
#nextBtn.isMobile:hover{background: url(../img/mobile/nextBtnOver.png) no-repeat;}


#currentNum.isMobile{
	position:absolute;
	font-size: 20px;
	line-height:33px;
	left:40px;
	top:1px;
}
#pageLine.isMobile{
	position: absolute;
	width:5px;
	height:35px;	
	left:75px;
	top:-1px;
	background: url("../img/mobile/pageLine.png") no-repeat;
}
#totalNum.isMobile{
	position: absolute;
	font-weight:normal;
	font-size: 19px;
	line-height:39px;
	left:84px;
	top:1px;
}
#volJogbtn.isMobile{
	background-image: none;
	background-color: transparent;
	top:15px;
	border:0px solid #FF0000;
}

#popClosing2{
	display: block;
	border:0px;
	background: url(../img/main/popClose2.png) no-repeat;
	width:63px;
	height: 63px;
	position: absolute;
	left:100%;
	top:16px;
	cursor: pointer;
	margin-left: -63px;
}
#popClosing2:hover{
	background: url(../img/main/popClose2Over.png) no-repeat;
}


#popClosing{
	display: block;
	border:0px;
	background: url(../img/main/popClose.png) no-repeat;
	width:112px;
	height: 30px;
	position: absolute;
	left:889px;
	top:0px;
	cursor: pointer;
}

#popClosing.isMobile{
	left:890px;
	background: url(../img/main/popClose_Mobile.png) no-repeat;
	width:112px;
	height: 50px;
}

#popClosing:hover{
	background: url(../img/main/popCloseOver.png) no-repeat;
}

#popClosing.isMobile:hover{
	background: url(../img/main/popClose_MobileOver.png) no-repeat;
}


/*----배속 설정----*/
/** 배속 선택 버튼  **/
#controller .speed {
    display: inline-block;
    height: 40px;
    cursor: default;
    top: -7px;
    left: 215px;
    position: absolute;
/*    display: none;*/
}

#controller .speed ul {
/*    border-radius: 5px;*/
/*
    padding: 0px 5px;
    height: 27px;
*/
/*    border: 1px solid #999999;*/
/*    margin-top: 5px;*/
    
    padding: 0px;
}

#controller .speed ul li {
    float: left;
    color: #333333;
}

#controller .speed .low {
    width: 20px;
    height: 20px;
    font-size: 10pt;
    color: #999999;
    line-height: 27px;
    background: url("../img/main/footer_speed_left_d.png") 50% 50% no-repeat;
    margin-right: 5px;
    margin-top: 1px;
}

#controller .speed .low:hover {
    background: url("../img/main/footer_speed_left_u.png") 50% 50% no-repeat;
    cursor: pointer;
}

#controller .speed .curRate {
    width: 60px;
    line-height: 26px;
    text-align: center;
    font-family: "Gmarket Sans";
    font-weight: 400;
    color: #999999;
    font-size: 18px;
    -webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */  
}

#controller .speed .high {
    width: 20px;
    height: 20px;
    font-size: 10pt;
    color: #999999;
    line-height: 27px;
    background: url("../img/main/footer_speed_right_d.png") 50% 50% no-repeat;
    margin-left: 5px;
    margin-top: 1px;
}

#controller .speed .high:hover {
    background: url("../img/main/footer_speed_right_u.png") 50% 50% no-repeat;
    cursor: pointer;
}

.disabled {pointer-events:none; opacity: 0.3;}

.popContainer{position: absolute; width: 200px; height: 50px; left: -45px; bottom: 5px;}


.popContainer .dictionaryPop{
    position: absolute;
    width: 98px;
    height: 45px;
    left: 12px;
    bottom: -5px;
    background: url("../img/main/dictionaryPop.png") no-repeat;
}

.popContainer .manualDownloadPop{
    position: absolute;
    width: 98px;
    height: 45px;
    left: 55px;
    bottom: -5px;
    background: url("../img/main/manualDownloadPop.png") no-repeat;
}

.popContainer .bookMarkPop{
    position: absolute;
    width: 98px;
    height: 45px;
    left: 92px;
    bottom: -5px;
    background: url("../img/main/bookMarkPopOff.png") no-repeat;
}

.popContainer .bookMarkPop.disable{
	background: url("../img/main/bookMarkPop.png") no-repeat;
}

.popContainer .hide{display: none;}

#timeMarker{
	display: none;
	position: absolute;
	left: 340px;
	bottom: 53px;
}

#timeMarker .timeMarkBtn{
	width: 22px;
	height: 32px;
	position: absolute;
	margin-left: -11px;
	cursor: pointer;
	background: url(../img/main/timeMark.png) no-repeat;
}

.timeMarkBtn.disable{
	display: none;
}