@import url(font.css);
/*@import url("http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700");*/

/* CSS Document */

body{
	display: none;
	padding:0px;
	margin:0px;
 	background-repeat:no-repeat; 
	overflow:hidden;
	font-family: 'Noto Sans KR'; 
	*font-family: 'Nanum Gothic'; 
	-webkit-font-smoothing:antialiased; 
	-moz-font-smoothing:antialiased; 
	font-smoothing:antialiased;
	background-color:#efefef;
	display:flex;align-items:center;justify-content:center;
}
html,body {width:100%; height:100%; overflow:hidden; margin:0; padding:0;}

#container{position:relative;width:1280px;height:760px;overflow:hidden;}


/* 상단*/
#top{
	display:block;
	width:1280px;
	float: left;
	z-index:99;
	position: absolute;
	top:0px;
}

/*
#chapDiv{
	display:block;
	width:359px;
	width:1280px;
	height:35px;
	background: url(../img/main/chasi_01.png) no-repeat;
	float:left;
}
*/

/*상단 과정명*/
#course{
	display:block;
	position: absolute;
	width:1280px;
	height:80px;
	right:0px;
	top:0px;
/*	background: url(../img/main/course.png) no-repeat;*/
    text-indent: -1000em;
}

/*상단 차시명*/
#chapName{
	display:block;
    position: absolute;
	width:1280px;
	height:70px;
    top: 0px;
    left: 0px;
}

#closeBtn{
    display: block;
    position: absolute;
    width: 36px;
    height: 36px;
    top: 5px;
    right: 5px;
    background: url(../img/main/close.png) no-repeat;
    cursor: pointer;
    z-index: 999;
}
#closeBtn:hover {
    background: url(../img/main/closeOver.png) no-repeat;
}

/*학습지원도구 start ------------------------------------------------------------------------------*/

#supportBox{
	display:block;
	width:40px;
	position: absolute;
	right:0px;
	top:50px;
}

/*매뉴얼*/
#menuBtn{
	width:35px;
	height:32px;
	border:0px;
	float:left;

	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	background: url(../img/main/bn_menu.png) no-repeat;
	margin-bottom:15px;
}
#menuBtn:hover{	background: url(../img/main/bn_menuover.png) no-repeat; width:96px; height:32px; margin-left:-60px;}

/*마이크로러닝*/
#microBtn{
	width:35px;
	height:32px;
	border:0px;
	float:left;

	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	background: url(../img/main/bn_mic.png) no-repeat;
	margin-bottom:15px;
}
#microBtn:hover{	background: url(../img/main/bn_micover.png) no-repeat; width:138px; height:32px; margin-left:-101px;}

/*용어사전*/
#dicBtn{
	width:35px;
	height:32px;
	border:0px;
	float:left;

	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	background: url(../img/main/bn_dic.png) no-repeat;
	margin-bottom:15px;
}
#dicBtn:hover{	background: url(../img/main/bn_dicover.png) no-repeat; width:109px; height:32px; margin-left:-71px;}

/*다운로드*/
#downBtn{
	width:35px;
	height:32px;
	border:0px;
	float:left;

	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	background: url(../img/main/bn_down.png) no-repeat;
}
#downBtn:hover{	background: url(../img/main/bn_downover.png) no-repeat; width:109px; height:32px; margin-left:-72px;}

/*--------------------------------------------------------------------------------학습지원도구End*/

/*본문*/
#contents{
	display:block;
	width:1280px;
	height:720px;
	top:0px; left:0px;
	border:0px solid #FF0000;
	position:absolute;

}

#videoPlayer{
	display: block;
/*	background-color:rgba(255,255,255,1);*/
    background-color:#25201b;
	width:1280px;
	height:720px;
	top:0px;
	left:0px;
	position:absolute;
}

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

#myVideo{
	width:1280px;
	height:720px;
    transform: scale(1);
}

#btn_skip{
	display:none;
	width: 60px;
	height:60px;
	position: absolute;
	bottom:50px;
	right:10px;
	background: url(../img/main/skipBtn.png) no-repeat;
}

#btn_skip:hover{
	background: url(../img/main/skipBtnOver.png) no-repeat;
    cursor: pointer;
}


/*현장영상네비박스*/
#movNaviBox{
	display:block;
	position: absolute;
	width:100%;
	height:120px;
	bottom:0px;
	left:0px;
	/*background-color:transparent;*/

}

#mobileStart{
	display:none;
	border:0px;
	text-indent: -1000em;
	background: url(../img/main/btn_start.png) no-repeat;
	width:1280px;
	height: 760px;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
	position: absolute;
	top:0px;
	left:0px;
	cursor: pointer;
	opacity: 1;
	z-index: 9999;
}
#mobileStart:hover{
/*	transform:matrix(1.1,0,0,1.1,0,0);*/
	opacity: 1;
	background: url(../img/main/btn_start_over.png) no-repeat;
}


#narration{
	display:none;
	width:1000px;
	height:112px;
	background-color:rgba(46,47,62,0.8);
	*background-color:none;
	*background: url(../img/main/na_bg.png);
	top:-114px;
	left:140px;
	position: absolute;
	padding:0px;
	border-top:2px solid #fff;
}
#nar_txt{
	color:#fff;
	font-family:'Noto Sans KR','Nanum Gothic'; 
	font-weight:500;
	font-size:14px;
	line-height:21px;
	display: block;
	height:100px;
	overflow-x: hidden;
	overflow-y: auto;
	width:990px;
	background-color:rgba(0,0,0,0.7);
	padding:6px 5px 6px 5px;
	word-break:keep-all;
	text-align:left;
}
#speaker{
	background-color:#000;
	border-radius:6px;
	padding:0px 4px;
	color:#77cf00;	
	margin-right:5px;
}
#nar_close{
	display:block;
	text-indent: -1000em;
	border:0px;
	cursor: pointer;
	background: url(../img/main/btn_narClose.png) no-repeat;
	width:25px;
	height:25px;
	position: absolute;
	top:-2px;
	right:-25px;
}
#nar_close:hover{
	background: url(../img/main/btn_narCloseOver.png) no-repeat;
}


#footer{
	display:block;
	position: absolute;
	width:1280px;
	height:40px;
	bottom:0px;
	left:0px;
/*	background-color:rgba(37,37,37,1);*/
/*    background-color: #25201b;*/
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}


#htmlContents{
	display:none;
	width: 1280px;
	height:720px;
	position: absolute;
	top:0px;
	left: 0px;
	background-color: rgba(0,0,0,0);
}


#mvEndContents{
	display:none;
	width: 1280px;
	height:720px;
	position: absolute;

}


#loadActFrame{
	position: absolute;
	width: 1280px;
	height:760px;
}


#loadQuizFrame{
	width: 1280px;
	height:720px;
}



/* Styles specific to this particular page */
.scroll-pane
{
	width: 100%;
	height: 200px;
	overflow: auto;
}
.horizontal-only
{
	height: auto;
	max-height: 200px;
}


#swfDiv{
	display: none;
	width:1280px;
	height: 540px;
}


/*-----------------------------------*/
body.ie8{
	font-family: 'Nanum Gothic'; 
}

.chapDiv.ie8{
	font-family: 'Nanum Gothic';
	font-weight: 700;
	padding:5px 10px 3px 20px;
}
#narration.ie8{
	background-color:none;
	background: url(../img/main/na_bg.png);
}

#mobileLoading{
	width:100%;
	height: 100%;
	border:0px solid #FF0000;
	position: absolute;
	display: none;
	top:0px;
	left: 0px;
	background: url(../img/main/loading_bg.png);
	z-index: 9999999;
}
#mbImg{
	/*
	display: block;
	background: url(../img/main/loading_img.png) no-repeat;
	width:166px;
	height: 40px;
	position: absolute;
	top:50%;
	left:50%;
	margin-top:-84px;
	margin-left:-84px;
	
	-webkit-animation: loadingAni 2s 0s infinite linear alternate;
	-moz-animation: loadingAni 2s 0s infinite linear alternate;
	-ms-animation: loadingAni 2s 0s infinite linear alternate;
	-o-animation: loadingAni 2s 0s infinite linear alternate;
	animation: loadingAni 2s 0s infinite linear alternate;
	*/
	display: block;
	position: absolute;
	top:50%;
	left:50%;
	margin-top:-30px;
	margin-left:-30px;
	
	border: 16px solid #fec23c; /* Light grey */
    border-top: 16px solid #e82c2c; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}
/*
#mbImg{
	display: block;
	background: url(../img/main/loading_8.gif) no-repeat;
	width:74px;
	height: 74px;
	position: absolute;
	top:50%;
	left:50%;
	margin-top:-37px;
	margin-left:-37px;
}
*/
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes loadingAni {

	from {
		height: 40px;
	}

	to {
		height: 0px;
	}
}


.chap_ex2 {
	 font-family: Serif;
	 font-weight:600;
	 font-size:21px;
}
.chap_ex22 {
	 font-family: Serif;
	 font-weight:600;
	 font-size:16px;
}


.popBtn{
	position:absolute;
}
.modal{width:1280px; height:720px;  position:absolute; top:-45px; left:-40px ; margin:0;}
.popImg{width:1280px; height:720px;  position:absolute; top:0px; left:0px ; margin:0;}
.close_btn{position:absolute; background-image:url("../img/popbtn/popCloseBn.png"); width:35px; height:35px;}

.tabBtn{
	display: block;
	width:36px;
	height:57px;
	float:left;
	padding:0;

	-webkit-transition-duration: 0.2s; /* Safari */
     transition-duration: 0.2s;
	
	border:0px solid #FF0000;;
	cursor: pointer;
	text-indent: -1000em;	
}

#prevBn{background:url(../img/popbtn/prev.png) no-repeat; position:absolute; top:380px; left:60px;}
#nextBn{background:url(../img/popbtn/next.png) no-repeat; position:absolute; top:380px; left:919px;}

/*
.numSet{width:70px; height:30px; position:absolute; bottom:49px; left:480px; font-family:'Noto Sans KR'; font-weight:500; font-size:22px;}
#curNum, #cutline, #toNum{float:left; width:30px; height:30px; text-align:center;}
#cutline{width:10px;}
#curNum{color:#666;}
#toNum{color:#333;}
*/
.black{width:100%; height:100%; background-color:rgba(0,0,0,0.8); position:absolute; top:0; left:0; display:none;}

@-webkit-keyframes blink{
  0% {opacity: 0;}
    50%{opacity: 1;}
  100% {opacity: 0;}
}

@-moz-keyframes blink{
  0% {opacity: 0;}
    50%{opacity: 1;}
  100% {opacity: 0;}
}

@keyframes blink{
  0% {opacity: 0;}
    50%{opacity: 1;}
  100% {opacity: 0;}
}