@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css");
@import url("../font/nanumsquareround.min.css");
@font-face {font-family: 'S-CoreDream-4Regular';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'S-CoreDream-5Medium';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'S-CoreDream-6Bold';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face { font-family: 'Eoe_Zno_L'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/Eoe_Zno_L.woff') format('woff'); font-weight: normal; font-style: normal; }	
@font-face {font-family: 'Eoe_Zno_B';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/Eoe_Zno_B.woff') format('woff');font-weight: normal;font-style: normal;
}
            


            


/*@font-face { font-family: 'NanumSquareRound'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff'); font-weight: normal; font-style: normal; } */
 /* CSS Document */

body{
	padding:0px;
	margin:0px;
	background-attachment:fixed;
	overflow:auto;
	font-family: 'NanumSquareRound';
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	font-smoothing:antialiased;
	background-color: #747474;
	font-weight:400;


}
html, body { height:100%;}

div, span, a, ul, li, dt, dd{
	  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently*/
}


html.isMobile, body.isMobile {
	width:1000px;
	height:625px;
}

#container{
	display:block;
	border:0px solid #fff;
	width:1000px;
	height:625px;
	position:absolute;

	top:50%;
	left:50%;
	margin-left:-500.1px;
	margin-top:-312.5px; /* 배경 전체 창 위치 */

	background-image:url(../image/bg/bg.jpg);
	background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
	

}







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

#orientBlock{
	display: none;
	z-index:-99999;

	width:100%;
	height: calc(100% - 40px);
	position: absolute;
	top:0px;
	left:0px;
	border:0px solid #FF0000;
}

#orientBlock.on{
	display: block;
	z-index:9;

	/*background-size: cover;*/

}



#orientBlock.sub_intro{
	z-index: 999;
	display: block;
	opacity: 0.4;
	width:1000px;height: 710px;
	background-image: url("../../temp/sub_intro.jpg");
}
#orientBlock.sub_ox{
	z-index: 999;
	display: block;
	opacity: 0.4;
	width:1000px;height: 710px;
	background-image: url("../../tmp/ox.jpg");
}
#orientBlock.sub_ot{
	z-index: 999;
	display: block;
	opacity: 0.4;
	width:1000px;height: 710px;
	background-image: url("../../temp/sub_ot.jpg");
}
#orientBlock.sub_goal{
	z-index: 999;
	display: block;
	opacity: 0.4;
	width:1000px;height: 710px;
	background-image: url("../../tmp/goal.jpg");
}
#orientBlock.sub_think{
	z-index: 999;
	display: block;
	opacity: 0.4;
	width:1000px;height: 710px;
	background-image: url("../../temp/sub_think.jpg");
}
#orientBlock.sub_quiz{
	z-index: 999;
	display: block;
	opacity: 0.4;
	width:1000px;height: 710px;
	background-image: url("../../tmp/quiz.jpg");
}
#orientBlock.sub_quiz_result{
	z-index: 999;
	display: block;
	opacity: 0.4;
	width:1000px;height: 710px;
	background-image: url("../../tmp/quiz_result.jpg");
}
#orientBlock.sub_summary{
	z-index: 999;
	display: block;
	opacity: 0.4;
	width:1000px;height: 710px;
	background-image: url("../../temp/sub_summary.jpg");
}
#orientBlock.sub_study{
	z-index: 999;
	display: block;
	opacity: 0.4;
	width:1000px;height: 710px;
	background-image: url("../../temp/sub_study.jpg");
}
#orientBlock.sub_outro{
	z-index: 999;
	display: block;
	opacity: 0.4;
	width:1000px;height: 710px;
	background-image: url("../../temp/sub_outro.jpg");
}
#orientBlock.sub_outro2{
	z-index: 999;
	display: block;
	opacity: 0.4;
	width:1000px;height: 710px;
	background-image: url("../../temp/sub_outro2.jpg");
}

#orientImg{
	display: none;;
	background: none;
	position: absolute;
	width:650px;
	height: 320px;
	top:50%;
	left:50%;
	margin-top:-350px;
	margin-left: -325px;
	border:0px solid #FF00FF;
}



#navi{
	display:block;
	position: absolute;
	z-index:10;

}

/* 상단*/
#top{
	position: relative;
	display:block;
	width:100%;
	height:35px;
	float: left;
}

.chapDiv{
	display:block;
	width:1000px;
	height:125px;
	float:left;
	background-repeat: no-repeat;
	/*position: absolute;*/
	top:0px;
	text-indent: -1000em;
}
#course{
	display:block;
	position: absolute;
	top:25px;
	right:28px;
	color:#fff;
	width:180px;height: 46px;
	background-image: url("../image/chap/course.png");
	background-repeat: no-repeat;
	z-index: 9;
}

#_chapter{
	display:block;
	position: absolute;
	top:0px;
	left:0%;
	width:1000px;
	height: 101px;
	background-repeat: no-repeat;
	z-index: 8;
	background-image: url("../image/chap/chap_bg.png");
}


._isChapNumber{
	color:#fff;
	font-size:30px;
	font-weight: 600;
	position: absolute;
	text-align: center;
	top:19px;left:19px;
	font-family: 'S-CoreDream-6Bold';
}
._isChapName{
	color:#3e7488;
	font-size:22px;
	font-weight: 600;
	position: absolute;
	text-align: left;
	top:30px;left:93px;
	letter-spacing: 0.3px;
	font-family: "Eoe_Zno_L";
}


#contents{
	display:block;
	width: 1000px;
	height:595px; /* 배경 보여주는 범위 */
	position:absolute;
	top:0px;
	left:0%;
	margin-top:-0px;
	margin-left:-0px;
	border:0px solid #FF0000;
	overflow: hidden;
}
#contents.isMobile{
}


#contents.intro{

}
#contents.ot{
	background-image:url(../image/bg/ot.jpg);
}
#contents.ox{
	background-image:url("../image/bg/ox.jpg");
}
#contents.goal{
	background-image:url(../image/bg/goal.jpg);
}
#contents.study{
	background-image:url(../image/bg/study.jpg);
}
#contents.opinion{
	background-image:url(../image/bg/opinion.jpg);
}
#contents.quiz{
	background-image:url(../image/bg/quiz.jpg);
}
#contents.summary{
	background-image:url(../image/bg/summary.jpg);
}
#contents.outro{
	background-image:url(../image/bg/09_outro.jpg);
}

/*#contents.bg1{background:url(../image/bg/bg1.png) no-repeat;}
#contents.bg2{background:url(../image/bg/bg2.png) no-repeat;}
#contents.bg3{background:url(../image/bg/bg3.png) no-repeat;}
#contents.bg4{background:url(../image/bg/bg4.png) no-repeat;}
*/

#videoPlayer{
	position: absolute;
	display: none;
	background-color:rgba(255,255,255,0.0);
	width: 720px;
	height:406px;
	top:142px;  /* 플레이어 위치 */
	left:144px;
	margin-left:-0px;
	margin-top:-0px;
	border:0px solid #FF0000;

}

#videoPlayer.study{
	top:142px;
	left:144px;
}

#videoPlayer.hideBG{
	background-color:transparent;
}

#videoPlayer.isMobile{
}
#videoPlayer.isMobile.hideBG{
	background-color:transparent;
}


#videoPlayer::cue {
    background-color: transparent;
    color: #FF0000;
    font-size: 32px;
}

#videoPlayer.block{
	display: block;
	background-image: url("../image/mobile/poster.png");
	background-size:cover;
	width: 100%;
	height: 100%;
	top:0;left:0;

}
#contentsBlock{
	position: absolute;
	display: none;
	background-image: url("../image/mobile/poster.png");
	background-size:cover;
	width: 100%;
	height: 100%;
	top:0;left:0;
	z-index: 99977;
}
#contentsBlock.block{
	display: block;
	background-image: url("../image/mobile/poster.png");
}


#htmlContents{
	display: none;
	background-color:rgba(255,255,255,0.0);
	width:100%;
	height: 595px;
	top:0%;
	left:0%;
	position: absolute;
	margin-left:-0px;
	margin-top:-0px;
}

#htmlContents.isMobile{
}

#loadHTMLContents{
	display: none;
	width:100%;
	height: 595px;
}
#loadHTMLContents.isMobile{
}
.autoView{
	display:none;

}
#isLoadFrame{
	width:1000px;
	height: 595px;
	border:0;
}
#isLoadFrame.isMobile{
}
#myVideo{
	position: absolute;
	width:720px;
	height: 406px;
}

#myVideo.isMobile{
}

#btn_skip{
	display:block;
	border:1px;
	text-indent: -1000em;
	background: url(../image/main/btn_skip.png) no-repeat;
	width:177px;
	height: 81px;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
	position: absolute;
	top:100%;
	left:100%;
	cursor: pointer;
	margin-top:-95px;
	margin-left:-185px;
}
#btn_skip.isMobile{
	-webkit-transition-duration: 0.0s; /* Safari */
    transition-duration: 0.0s;
	top:100%;
	left:100%;
	margin-top:-95px;
	margin-left:-185px;

}
#btn_skip.isMobile:hover{
	/*transform-origin: center center;*/
	background: url(../image/main/btn_skip_over.png) no-repeat;
}

#btn_OutroView{
	display:block;
	border:0px;
	text-indent: -1000em;
	background: url(../image/outro/outro_view.png) no-repeat;

	width:245px;
	height: 63px;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
	position: absolute;
	top:100%;
	left:100%;
	margin-top:-80px;
	margin-left:-260px;
	cursor: pointer;
	opacity: 1;
}
#btn_OutroView:hover{
	/*margin-left:-5px;*/
	background: url(../image/outro/outro_view_over.png) no-repeat;
}
#btn_SumView{
	display:block;
	border:0px;
	text-indent: -1000em;
	background: url(../image/outro/sum_view.png) no-repeat;

	width:245px;
	height: 63px;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
	position: absolute;
	top:100%;
	left:100%;
	margin-top:-80px;
	margin-left:-260px;
	cursor: pointer;
	opacity: 1;
}

#btn_OutroView.isMobile{
	-webkit-transition-duration: 0.0s; /* Safari */
    transition-duration: 0.0s;
	top:100%;
	left:100%;
	margin-top:-70px;
	margin-left:-250px;
	width:196px;
	height: 50px;
	background-size:cover;
}
#btn_OutroView.isMobile:hover{
	/*margin-left:-5px;*/
	background: url(../image/outro/outro_view_over.png) no-repeat;
	width:196px;
	height: 50px;
}

#btn_SumView.isMobile{
	-webkit-transition-duration: 0.0s; /* Safari */
    transition-duration: 0.0s;
	top:100%;
	left:100%;
	margin-top:-70px;
	margin-left:-250px;
	width:196px;
	height: 50px;
	background-size:cover;
}

#btn_SumView:hover{
	/*margin-left:-5px;*/
	background: url(../image/outro/sum_view_over.png) no-repeat;
}
#btn_SumView.isMobile:hover{
	/*margin-left:-5px;*/
	background: url(../image/outro/sum_view_over.png) no-repeat;
	width:196px;
	height: 50px;
}
#OT1{
	opacity: 1;
	display: block;
	-webkit-transition-duration: 1.2s; /* Safari */
    transition-duration: 1.2s;
	opacity: 1;
}
#OT1.hide{
	opacity: 0;
	display: none;
	-webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
}

#OT2{
	opacity: 1;
	display: block;
	-webkit-transition-duration: 1.2s; /* Safari */
    transition-duration: 1.2s;
	opacity: 1;
}
#OT2.hide{
	opacity: 0;
	display: none;
	-webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
}

#btn_skip:hover{
	/*transform-origin: center center;*/

	background: url(../image/main/btn_skip_over.png) no-repeat;
}

#mobileStart{
	display:none;
	border:0px;
	text-indent: -1000em;
	background-image: url(../image/main/btn_start.png);
	background-repeat: no-repeat;
	width:200px;
	height: 200px;
	position: absolute;
	top:50%;
	left:50%;
	margin-top:-150px;
	margin-left:-100px;
	cursor: pointer;
	z-index: 99999;
	border:0px solid #FF0000;
}
#mobileStart:hover{
	background-image: url(../image/main/btn_start_over.png);
	background-repeat:  no-repeat;
}


#narration{
	display:none;
	width:100%;
	height: 80px;
	background-image: none;
	top:-80px;
	position: absolute;
	padding:0px 0 0px 0px;
	background-color: rgba(0,0,0,0.6)
}

#nar_txt{
	color:#fff;
	font-weight: 400;
	font-size:15px;
	line-height: 23px;
	display: block;
	height:60px;
	margin-top:5px;
	margin-left:10px;
	overflow-x: hidden;
	overflow-y: auto;
	width:calc(100% - 40px);

	padding:7px;
	letter-spacing: -0.5px;
	word-break: keep-all;
	text-align: left;

	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	font-smoothing:antialiased;
}
#nar_close{
	display:none;
	text-indent: -1000em;
	border:0px;
	cursor: pointer;
	background: url(../image/narration/Btn_NaClose.png) no-repeat;
	width:32px;
	height: 32px;
	position: absolute;
	top:5px;
	left:925px;
}

#footer{
	display:block;
	width:1000px;
	height:30px;
	position:absolute;
	top:calc(100% - 30px);
	left:0px;
	margin-top:0px;
	background-color:transparent;
	background-image: url("../image/controller/controller_b.png");
	z-index:9;
}
#footerSet{
	position: absolute;
	display:block;
	width:100%;
	height:30px;
	left:0;
	top:0px;
	background-color: transparent;
	background-image: none;
	background-repeat:no-repeat;
}



#asideLoad{
	display:none;
	position: absolute;
	left:0%;
	top:0%;
	width:100%;
	height: 100%;
	z-index:9999;
}
#asideLoad.isMobile{
	display:none;
	position: absolute;
	left:0%;
	top:0%;
	width:100%;
	height: 100%;
	z-index:9999;
	background-color:rgba(0,0,0,0.8);
}
#asideLoad.end{
}
#asideLoad.start{
	/*left:50%;
	top:50%;
	width: 2%;
	height: 2%;
	display: none;
	*/
}
#asideFrame{
	width:100%;
	height: 100%;
	border: 0;
}

.inConUnit{
	margin:10px 0 0 10px;
}

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







#isQuizBlock{
	display: none;
	background: url(../image/mobile/poster.png) no-repeat;
	width:640px;
	height: 360px;
	position: absolute;
	top:50%;
	left:50%;
	margin-top:-122px;
	margin-left: -320px;
}





.mob_close {
    width: 40px;
    height: 87px;
    position: absolute;
    top: 0px;
    right: -60px;
    background: #2d2f3b;
    display: none;
    padding: 18px 10px;
    text-align: center;
    font-size: 16px;
    color: #c3ceff;
    line-height: 1.2;
    cursor: pointer;
	background: none;
	text-indent: -1000em;

}

#quiz_start_btn{
	display: none;
	width: 172px;height: 53px;
	background-image: none;
	position: absolute;
	top:470px;left:414px;
	text-indent: -10000em;
}

#quiz_start_btn:hover{
	background-image: none;
}

#summary_pop_btn{
	display: none;
	width: 53px;height: 53px;
	background-image: url("../image/summary/btn_pop.png");
	position: absolute;
	top:537px;left:294px;
	text-indent: -10000em;
}
#summary_pop_btn:hover{
	background-image: url("../image/summary/btn_pop_over.png");
}


#mobileLoading{
	width:100%;
	height: 100%;
	border:0px solid #FF0000;
	position: absolute;
	display: none;
	top:0px;
	left: 0px;
	background-color: #fff;
	z-index: 9999999;
}
#mbImg{
	display: block;
	position: absolute;
	top:50%;
	left:50%;
	margin-top:-30px;
	margin-left:-30px;

	border: 16px solid #f1f1f1; /* Light grey */
    border-top: 16px solid #000; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;

}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#bckImg{
	display: none;
	background: url(../image/mobile/bkLoading.png) no-repeat;
	width:400px;
	height: 150px;
	position: absolute;
	top:50%;
	left:50%;
	margin-top:-75px;
	margin-left:-200px;
	overflow: hidden;
}


#inPop_teacher{
	display: block;
	background-image: url("../image/page/pop_teacher.png");
	background-repeat: no-repeat;
	border:0px;
	width:83px;height: 31px;
	cursor: pointer;
	text-indent: -10000em;
	position: absolute;
	left:20px;top:475px;
}
#inPop_teacher:hover{
	background-image: url("../image/page/pop_teacher_u.png");
}

#inPop_down{
	display: block;
	background-image: url("../image/page/pop_down.png");
	background-repeat: no-repeat;
	border:0px;
	width:115px;height: 31px;
	cursor: pointer;
	text-indent: -10000em;
	position: absolute;
	left:110px;top:475px;
}
#inPop_down:hover{
	background-image: url("../image/page/pop_down_u.png");
}




._pageContainer{
	display: block;
	width:1000px;
	height: 625px;
	position: absolute;
	top:0px;
	left:0px;
	background-color: transparent;
	padding:0;margin:0;
	background-repeat: no-repeat;
}
#conSubject{
	position: absolute;
	top:75px;left:92px;
	font-size: 15px;
	font-weight: 700;
	color: #8d6a55;
	word-spacing: -0.5px;
	letter-spacing: -0.5px;
	font-family: 'NanumSquareRound';
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	font-smoothing:antialiased;
	
}
#conSubject > ._subTitle{
	display: inline-block;
	color:#fff;
	font-family: 'NanumSquareRound';
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	font-smoothing:antialiased;
	font-size:17px;
	width:100px;
}
#conSubject > ._st{
	display: inline-block;
	color:#3e7488;
	font-size:17px;
}

#conSubject > ._sDot{
	display: inline-block;
	width:37px;height: 15px;
	background-image: url("../image/main/sub_dot.png");
	background-image: none;
	background-repeat: no-repeat;
}
#conSubject > ._subTxt{
	display: inline-block;
	font-family: 'NanumSquareRound';
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	font-smoothing:antialiased;
	color:#3e7488;
}


#alertPop{
	display:none;
	width:1000px;
	height: 625px;
	position: absolute;
	top:0px;
	left:0px;
	z-index: 999;
}
#alertPop.chk_think{
	background: url("../image/think/pop_chk.png") no-repeat;
}
#alertPop.save_think{
	background: url("../image/think/pop_save.png") no-repeat;
}
#alertPop.re_quiz{
	background: url("../image/quiz/alert_rere_tj.png") no-repeat;
}
#alertPop.chk_quiz{
	background: url("../image/quiz/alert_rere_tj.png") no-repeat;
}


#printDiv{
	display: block;
	z-index: -999999999;
}
#_prtFrame{
	width:0;
	height: 0;
}