@import url(font.css);
@import url(nanumgothic.css);
@import url(nanummyeongjo.css);
@import url(notosanskr.css);

/* 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;
}
html, body { height:100% }


#container{
	display:block;
	border:0px solid #ff0000;
	width:1280px;
	height:720px;
	position:absolute;
	overflow:hidden;
	background: url(../img/main/contentsBg.png) no-repeat;
}


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

/*학습지원도구 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;}


/*--------------------------------------------------------------------------------학습지원도구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);
	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;
}

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

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


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


#mobileStart{
	display:none;
	border:0px;
	text-indent: -1280em;
	background: url(../img/main/btn_start.png) no-repeat;
	width:212px;
	height:212px;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
	position: absolute;
	top:50%;
	left:50%;
	margin-top:-106px;
	margin-left:-106px;
	cursor: pointer;
	opacity: 0.8;
	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:1280px;
	height:98px;
	background-color:rgba(0,0,0,0.8);
	*background-color:none;
	*background: url(../img/main/na_bg.png);
	top:-98px;
	left:0px;
	position: absolute;
	padding:0px;
/*	border-top:2px solid #fff;*/
}
#nar_txt{
	color:#fff;
	font-family:"돋움","dotum";
/*	font-weight:500;*/
	font-size:13px;
	line-height:19px;
	display: block;
	height:70px;
	overflow-x: hidden;
	overflow-y: auto;
	width:1200px;
	/*background-color:rgba(0,0,0,0.7);*/
	padding:6px 0px 5px 15px;
	word-break:keep-all;
	text-align:left;
	margin-top:5px;
}
#speaker{
	/*background-color:#000;*/
	border-radius:6px;
	/*padding:0px 4px;*/
	color:#fff;	
	margin-right:5px;
}
#nar_close{
	display:block;
	text-indent: -1280em;
	border:0px;
	cursor: pointer;
	background: url(../img/main/btn_narClose.png) no-repeat;
	width:18px;
	height:19px;
	position: absolute;
	top:4px;
	right:3px;
}
#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(255,255,255,1);
/*	background: url(../../../img/control.png) no-repeat;*/
}


#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{
	width: 1280px;
	height:720px;
}


#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;
}
#mbImg00{
	/*
	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: none;
	position: absolute;
	top:50%;
	left:50%;
	margin-top:-30px;
	margin-left:-30px;
	
	border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #454545; /* 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;
}
.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: -1280em;	
}

#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;}

#modalPop{
	display : block;
	background:#fff;
	width:100%;
	height:100%;
}

/* 수정 */
.ctMainDiv .ctTableDiv .ctTable{
	background-color: #efefef !important;
}
html > body {
	display: flex;
	align-items: center;
	justify-content: center;
}