@charset "euc-kr";
/********************************font********************************/
@font-face {
  font-family: 'NanumGothic';
  font-style: normal;
  font-weight: 400;
  src: url(NanumGothic.eot);
  src: local('NanumGothic'),
       local('NanumGothic'),
       url(NanumGothic.eot?#iefix) format('embedded-opentype'),
       url(NanumGothic.woff2) format('woff2'),
       url(NanumGothic.woff) format('woff'),
       url(NanumGothic.ttf) format('truetype');
}
@font-face {
  font-family: 'NanumGothicBold';
  font-style: bold;
  font-weight: 700;
  src: url(NanumGothicBold.eot);
  src: local('NanumGothicBold'),
       local('NanumGothicBold'),
       url(NanumGothicBold.eot?#iefix) format('embedded-opentype'),
       url(NanumGothicBold.woff2) format('woff2'),
       url(NanumGothicBold.woff) format('woff'),
       url(NanumGothicBold.ttf) format('truetype');
}

/********************************common********************************/
body{ margin: 0; font-family: 'NanumGothic', 'Malgun Gothic' , sans-serif; }
html, body{ width:100%; height:100%; }
ul, li ,a, p, dl , dt, dd, span, h1, h2, h3 {text-decoration:none; list-style:none; padding:0; margin:0; color:#303030;}
input[type="submit"], input[type="button"] {
font-family:"NanumGothic"; cursor:pointer;  margin:0; border:0; background:none;
-ms-appearance: none; -moz-appearance: none; /* Firefox */ -webkit-appearance: none; /* Safari and Chrome */
}
.bold {font-family: 'NanumGothicBold';}
.btnWrap {text-align:center; margin:0 0 20px 0;}
input.btn01 {font-size:14px; width:120px; height:35px; background-color:#aad331; font-family: 'NanumGothicBold';}
input.btn02 {font-size:14px; width:120px; height:35px; background-color:#6eb6ef; font-family: 'NanumGothicBold';}

.tcen {text-align:center;}
.tr {text-align:right;}
.tl {text-align:left;}

.txt30 {font-size:30px; font-family: 'NanumGothicBold';}
.txt24 {font-size:24px; font-family: 'NanumGothicBold';}
.txt20 {font-size:20px; font-family: 'NanumGothicBold';}
.txt18 {font-size:18px; font-family: 'NanumGothicBold';}
.txt15 {font-size:15px; font-family: 'NanumGothicBold';}
.txt14 {font-size:14px; font-family: 'NanumGothic';}

.orange {color:#ff510b;}
.blue {color:#0065e3;}
.green {color:#669900;}
.red {color:#e90c30;}
.black {color:#303030;}
.gray {color:#6b6b6b;}

/********************************content********************************/
#Wrap{width:1000px; height:735px; position:relative; background:#000; overflow:hidden;}
#Header{ width:100%; height:53px; position:absolute; z-index:1; }
#Header img{ position:absolute; width:100%; }

#Header #contentTitle{ top:5px; left:0px; display:none; }
#Header #contentSubTitle{ top:20px; left:0px; display:none; }
#Header #contentMainTitle{ right:0px; }

#Header #headerTextLeft{ margin-left:18px; margin-top:12px; }
#Header #headerTextRight1{ float:right; margin-top:11px; margin-right:10px; }
#Header #headerTextRight2{ float:right; margin-top:15px; margin-right:12px; }



/*학습종료멘트*/
.end {position:absolute; width:250px; height:100px; text-align:center; z-index:999; left:calc(50% - 125px); top:calc(50% - 100px);  line-height:100%;  background-color:#3a3b3c; font-family: 'NanumGothicBold'; box-shadow:2px 0px 10px 0px rgba(0,0,0,0.2);}
.end p {color:#fff; margin:21px 0 13px 0;}
.end input[type="button"] {background-color:#2087e4; height:30px; width:100px; color:#fff;}



/*leftMenu*/
#leftMenu{position:absolute; width:200px; height:100%; background-color:rgba(255,255,255,1); z-index:90; letter-spacing:-1px; left:0px;}
#leftMenu input[type="image"] {position:absolute; left:200px; top:calc(50% - 45px);}
#leftMenu h2.leftTitle{position:absolute; top:0; left:0; width:210px; height:110px; background:url('../images/menu/title_back.png') left top no-repeat; margin:0; font-size:19px; padding:10px 0; box-sizing:border-box; text-align:center; color:#fff; line-height:130%; font-family: 'NanumGothicBold';}
#leftMenu .menuList{width:200px; position:relative; top:74px;; left:0; box-sizing:border-box; overflow:auto; min-height:600px;}
#leftMenu .menuList > li {text-align:center; font-size:17px; font-family: 'NanumGothicBold'; padding-bottom:15px;}
#leftMenu .menuList > li > a {background-color:#babcbd; display:inline-block; width:100%; line-height:30px; margin-bottom:5px;}
#leftMenu .menuList > li > a:hover {background-color:#aad331;}
#leftMenu .menuList > li > a.on {background-color:#aad331;}
#leftMenu .menuList > li > ul > li {text-align:left; font-size:14px; font-family: 'Malgun Gothic';}
#leftMenu .menuList > li > ul > li > a {display:inline-block; width:100%; line-height:18px; box-sizing:border-box; background:url('../images/menu/bull_off.png') 4px 11px no-repeat; padding:4px 0 4px 18px;}
#leftMenu .menuList > li > ul > li:hover {background-color:#f9f9f9; box-sizing:border-box; }
#leftMenu .menuList > li > ul > li:hover > a {background:url('../images/menu/bull_on.png') 4px 11px no-repeat; color:#0b6b9f;}
#leftMenu .menuList > li > ul > li.on {background-color:#fff; box-sizing:border-box; }
#leftMenu .menuList > li > ul > li.on > a {background:url('../images/menu/bull_on.png') 4px 11px no-repeat; color:#0b6b9f;}



/*
#leftMenu{position:relative; width:200px; height:100%; background-color:#efefef; z-index:1; letter-spacing:-1px; left:0; float:left; box-shadow:2px 0px 10px 0px rgba(0,0,0,0.2);}
#leftMenu input[type="image"] {position:absolute; left:200px; top:calc(50% - 45px);}
#leftMenu h2.leftTitle{position:absolute; top:0; left:0; width:210px; height:110px; background:url('../images/menu/title_back.png') left top no-repeat; margin:0; font-size:19px; padding:10px 0; box-sizing:border-box; text-align:center; color:#fff; line-height:130%; font-family: 'NanumGothicBold';}
#leftMenu .menuList{width:200px; position:relative; top:74px;; left:0; box-sizing:border-box; overflow:auto; min-height:600px;}
#leftMenu .menuList > li {text-align:center; font-size:17px; font-family: 'NanumGothicBold'; padding-bottom:15px;}
#leftMenu .menuList > li > a {background-color:#babcbd; display:inline-block; width:100%; line-height:30px; margin-bottom:5px;}
#leftMenu .menuList > li > a:hover {background-color:#aad331;}
#leftMenu .menuList > li > a.on {background-color:#aad331;}
#leftMenu .menuList > li > ul > li {text-align:left; font-size:14px; font-family: 'Malgun Gothic';}
#leftMenu .menuList > li > ul > li > a {display:inline-block; width:100%; line-height:18px; box-sizing:border-box; background:url('../images/menu/bull_off.png') 4px 11px no-repeat; padding:4px 0 4px 18px;}
#leftMenu .menuList > li > ul > li:hover {background-color:#f9f9f9; box-sizing:border-box; }
#leftMenu .menuList > li > ul > li:hover > a {background:url('../images/menu/bull_on.png') 4px 11px no-repeat; color:#0b6b9f;}
#leftMenu .menuList > li > ul > li.on {background-color:#fff; box-sizing:border-box; }
#leftMenu .menuList > li > ul > li.on > a {background:url('../images/menu/bull_on.png') 4px 11px no-repeat; color:#0b6b9f;}
*/



/*Quiz*/
#QuizWrap #PrintTitle {display:none;}
#QuizWrap #te {float:left; height:100%; width:200px;}
#QuizWrap {position:relative; float:left; background:url('../images/interaction/interaction_bg.png') 0 0; background-size:cover; /*width:calc(100% - 200px);*/width:100%; height:100%;}
#QuizWrap #SubjectName {position:absolute; top:2%; right:0; background-color:#fff; padding:1%;  font-family: 'NanumGothicBold'; line-height:130%; box-sizing:border-box;}
#QuizWrap #SubjectName .first {border-left:2px solid #669900; color:#669900; padding-left:2px; font-size:15px; box-sizing:border-box;}
#QuizWrap #SubjectName .second {border-left:2px solid #6b6b6b; color:#6b6b6b; padding-left:2px; font-size:16px; box-sizing:border-box;}
#QuizWrap #QuizTitle {width:100%; text-align:center; padding-top:2%; font-size:15px;}
#QuizWrap #QuizTitle p {color:#148501; height:35px; line-height:35px; padding:0 10px; border:1px solid #6ac00e; display:inline-block;}
#QuizWrap #QuizInfo {width:100%; text-align:center; padding-top:2%; font-size:17px;}
#QuizWrap #QuizInfo p {color:#4f4f4f;font-family: 'NanumGothicBold'; }
	/*QuizContent*/
#QuizWrap #QuizContent {width:70%; margin:3% auto; background:url('../images/interaction/quiz_bg.png') 0 0 repeat; box-shadow:4px 4px 10px 2px rgba(0,0,0,0.3); border:1px solid #fff; padding:3%; box-sizing:border-box; min-height:370px; height:68%; overflow:auto; position:relative;}

#QuizWrap #QuizContent .QuizZone .Question {font-size:16px; line-height:40px;  font-family: 'NanumGothicBold'; display:inline-block; margin-bottom:3%; width:100%;}
#QuizWrap #QuizContent .QuizZone .Question .QuestionNum {background:url('../images/interaction/num_bg.png') 0 0 no-repeat; background-size:40px; width:40px; height:40px; display:inline-block; box-sizing:border-box; font-size:32px; text-align:center; color:#2b87da; float:left;}
#QuizWrap #QuizContent .QuizZone .Question .sript {font-size:17px; font-family: 'NanumGothicBold'; display:inline-block; float:left; line-height:20px; width:calc(100% - 40px); box-sizing:border-box; padding:12px 0 0 1%;}

#QuizWrap #QuizContent .QuizZone .SelectAnswer {margin-bottom:3%; display:inline-block; width:100%; text-align:center; position:relative;}
#QuizWrap #QuizContent .QuizZone .SelectAnswer .OX {position:relative; width:100%;}
#QuizWrap #QuizContent .QuizZone .SelectAnswer .OX li {float:left; width:50%; margin:15px 0;}
#QuizWrap #QuizContent .QuizZone .SelectAnswer .OX li input {line-height:80px; height:85px; box-sizing:border-box; text-align:center;}
#QuizWrap #QuizContent .QuizZone .SelectAnswer .OX li input.O {font-size:100px; color:#0065e3; font-family: 'NanumGothicBold'; margin-left:10%;}
#QuizWrap #QuizContent .QuizZone .SelectAnswer .OX li input.X {font-size:100px; color:#e90c30; font-family: 'NanumGothicBold'; margin-right:10%;}
#QuizWrap #QuizContent .QuizZone .SelectAnswer .OX li input.chk {/*border:2px solid #fbb640;*/ border-radius:10px; background:url('../images/interaction/chk_bg.png') center no-repeat;}
#QuizWrap #QuizContent .QuizZone .SelectAnswer .CorrectChk {position:absolute; width:100%; height:100%; top:0;}
#QuizWrap #QuizContent .QuizZone .SelectAnswer .CorrectChk  p {font-size:35px; font-family: 'NanumGothicBold'; width:70px; height:70px; margin:20px auto 0 auto; line-height:70px;}
#QuizWrap #QuizContent .QuizZone .SelectAnswer .CorrectChk  p.wrong {background:url('../images/interaction/wrong_bg.png') 0 0 no-repeat; }
#QuizWrap #QuizContent .QuizZone .SelectAnswer .CorrectChk  p.correct {background:url('../images/interaction/correct_bg.png') 0 0 no-repeat;}

#QuizWrap #QuizContent .QuizZone .Caption {width:100%; background-color:#efefef; border:1px solid #e1e1e1; box-sizing:border-box; font-size:14px; padding:2%;}
#QuizWrap #QuizContent .QuizZone .Caption li {width:100%; display:inline-block; margin-bottom:1%;}
#QuizWrap #QuizContent .QuizZone .Caption li.RightAn .RightAnT {background:url('../images/interaction/answer_bg.png') 0 0 no-repeat; width:45px; height:23px; line-height:23px; display:inline-block; color:#2b87da; font-family: 'NanumGothicBold'; text-align:center; float:left;}
#QuizWrap #QuizContent .QuizZone .Caption li.Explain .ExplainT {background:url('../images/interaction/answer_bg.png') 0 0 no-repeat; width:45px; height:23px; line-height:23px; display:inline-block; color:#319600; font-family: 'NanumGothicBold'; text-align:center; float:left;}
#QuizWrap #QuizContent .QuizZone .Caption li .script {width:calc(100% - 45px); float:left; box-sizing:border-box; padding-left:1%; line-height:150%;}

#QuizWrap #QuizContent .QuizZone .write {width:90%; margin:0 auto 3% auto; }
#QuizWrap #QuizContent .QuizZone .write textarea {width:100%; box-sizing:border-box; padding:1%; line-height:150%; height:200px; border:1px solid #c1c1c1;}
#QuizWrap #QuizContent .QuizZone .write2 textarea {width:100%; box-sizing:border-box; padding:1%; line-height:150%; height:100px; border:1px solid #c1c1c1;}

#QuizWrap .Confirm {text-align:center; margin-top:2%;}
#QuizWrap .Confirm .ConfirmBtn { font-family: 'NanumGothicBold'; color:#1478d2; border:1px solid #1478d2; width:100px; height:30px;}

#QuizWrap .NextQuiz {text-align:center; margin-top:2%;}
#QuizWrap .NextQuiz .NextQuizBtn { font-family: 'NanumGothicBold'; color:#1478d2; border-bottom:1px solid #1478d2;}

#QuizWrap .layerPopWrap {position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5);}
#QuizWrap .layerPopWrap .layerPop {position:absolute; top:10%; width:60%; left:20%; background-color:#e7f0f7; box-sizing:border-box; padding:2%; line-height:150%; box-shadow:3px 3px 8px 1px rgba(0,0,0,0.3);}
#QuizWrap .layerPopWrap .layerPop .layerPopClose {font-size:22px; float:right; background-color:#2c87da; border-radius:5px; color:#fff; box-shadow:1px 1px 0 0 rgba(0,0,0,0.2);}
#QuizWrap .layerPopWrap .layerPop .layerPopTitle {font-size:17px; font-family: 'NanumGothicBold'; color:#2a87da; padding:0 0 2px 5px;}
#QuizWrap .layerPopWrap .layerPop .layerPopCont {font-size:14px; margin-top:2%; background-color:#fff; border-radius:5px; padding:5px 10px; border:1px solid #bcd2e2;}

.continueLayer {position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5);}
.continueLayer .continuelayerPop {position:absolute; top:36%; width:29%; left:32%; background-color:#aad331; box-sizing:border-box; padding:2%; line-height:150%; box-shadow:3px 3px 8px 1px rgba(0,0,0,0.3);}
.continueLayer .continuelayerPop .continuelayerPopTitle {font-size:17px; font-family: 'NanumGothicBold'; color:#aad331; padding:0 0 2px 5px; }
.continueLayer .continuelayerPop .continuelayerPopCont {font-size:14px; margin-top:2%; background-color:#aad331;  padding:5px 10px;}
	
#QuizWrap #QuizContent .QuizZone .introTitle {font-size:35px; text-align:center; font-family:'NanumGothicBold'; color:#0065e3;}
#QuizWrap #QuizContent .QuizZone .intro {font-size:18px; text-align:center; padding:50px 0; line-height:180%; background-color:#fff; border:1px solid #e1e1e1; margin:25px 0; font-family:'NanumGothicBold'; color:#6b6562;}
	/*객관식*/
#QuizWrap #QuizContent .QuizZone .SelectAnswer .multiChk {line-height:180%; text-align:left; margin-left:25px;}
#QuizWrap #QuizContent .QuizZone .SelectAnswer .multiChk li label {cursor:pointer; margin-left:-30px;}
#QuizWrap #QuizContent .QuizZone .SelectAnswer .multiChk li input[type='radio'] {line-height:0; height:0;}
#QuizWrap #QuizContent .QuizZone .SelectAnswer .multiChk li input[type='radio']:checked + label {color:#0065e3;}
#QuizWrap #QuizContent .QuizZone .SelectAnswer .multiChk li label.correct {background-color:#9dd2fd;}

#QuizWrap #QuizContent .QuizZone .TotalTitle {font-size:35px; text-align:center; font-family:'NanumGothicBold'; color:#0065e3;}
#QuizWrap #QuizContent .QuizZone .TotalTxt {font-size:18px; text-align:center; padding:10px 0; line-height:180%; background-color:#fff; border:1px solid #e1e1e1; margin:25px 0; font-family:'NanumGothicBold'; color:#6b6562;}
#QuizWrap #QuizContent .QuizZone .TotalSum {width:100%; position:relative; margin:0 auto 3% auto; text-align:center;}
#QuizWrap #QuizContent .QuizZone .TotalSum ul {display:inline-block; width:120px; border:1px solid #e1e1e1; font-family:'NanumGothicBold'; border-radius:10px 10px 0 0;}
#QuizWrap #QuizContent .QuizZone .TotalSum ul li:first-child {background-color:#aad331; font-size:20px; color:#fff; line-height:160%; border-radius:8px 8px 0 0;}
#QuizWrap #QuizContent .QuizZone .TotalSum ul li:last-child {line-height:220%; background-color:#fff; color:#4f4f4f;}

#QuizWrap #QuizContent .QuizZone .FinishWrap {}
#QuizWrap #QuizContent .QuizZone p {line-height:160%; margin-bottom:5px;}
#QuizWrap #QuizContent .QuizZone p.Para01:before {content:'*';}
#QuizWrap #QuizContent .QuizZone p.Para01 {padding:0 20px 0 30px; text-indent:-15px; font-size:15px;}
#QuizWrap #QuizContent .QuizZone p.Para02:before {content:'- ';}
#QuizWrap #QuizContent .QuizZone p.Para02 {padding:0 20px 0 40px; text-indent:-15px; font-size:14px;}
#QuizWrap #QuizContent .QuizZone p.Para03:before {content:'- ';}
#QuizWrap #QuizContent .QuizZone p.Para03 {padding:0 0 0 15px; text-indent:-15px; font-size:14px;}
#QuizWrap #QuizContent .QuizZone p.Para04 {padding:0 20px 0 40px; text-indent:-15px; font-size:14px;}
#QuizWrap #QuizContent .QuizZone .box {border:1px solid #cecece; padding:5px;}
	/*다음페이지*/
.NextWrap {margin:30px 0 ;}
.NextWrap ul {text-align:center;}
.NextWrap ul li {display:inline-block; font-size:18px;}
.NextWrap ul li input {font-family:'NanumGothicBold'; color:#565656;}
	/*프린트버튼*/
.PrintBtn {position:absolute; top:80px; right:8%; z-index:999;}
/*Quiz 끝*/




/*자막*/
#CaptionBox{width:98%; height:45px; background-color:rgba( 0, 0, 0, 0.6 ); overflow-y:auto; position:absolute; bottom:33px; left:0px; padding:1%; line-height:150%; font-size: 15px; color: #fff;  text-align: justify; letter-spacing:-1px; z-index:2; display:none;}
#CaptionBox .caption{ display:none; }
#CaptionBox .caption .character{ display:inline-block; vertical-align:top; }
#CaptionBox .caption .explain{ display:inline-block; width:85%; }
#CaptionBtn.ProgressBtn img{ left:-18px; }





/*콘트롤바*/
#ControllBar{width:100%; height:35px; line-height:35px; position:absolute; bottom:0px; z-index:100; background:rgba(255,255,255,0.9); box-sizing:border-box; box-shadow:3px 3px 8px 2px rgba(0,0,0,0.3);}
	/*우측영역*/
#ControllBar .logo {float:left; width:150px; text-align:center; height:35px; padding:2px 0 0 0;  box-sizing:border-box;}
#ControllBar .Download {float:left; width:102px; height:44px; margin:0 8px; z-index:200;}
#ControllBar .Download a {background:url('../images/navigator/down_btn_off.png') 0 0 no-repeat; width:102px; display:inline-block; position:relative; bottom:10px; line-height:44px; text-align:center; padding:0 0 0 5px; box-sizing:border-box; color:#efefef; font-size:14px; font-weight:bold; letter-spacing:-0.5px;}
#ControllBar .Download a:hover {background:url('../images/navigator/down_btn_on.png') 0 0 no-repeat; color:#fdff37;}
#ControllBar .LearnTool {float:left;}
#ControllBar .LearnTool a {font-size:15px; font-family:'NanumGothicBold'; color:#444;}
#ControllBar .LearnTool a:hover {color:#729800;}
#ControllBar .LearnTool a:before, .LearnTool a:after {content:' l '; color:#cccccc;}
	/*가운데영역*/
#ProgressCenter {float:left; width:calc(100% - 680px); height:35px;}
#ProgressCenter #ProgressBar{width:calc(100% - 100px); height:5px; margin:15px 5px 0px 10px; position:relative; cursor:pointer; border-radius:100px; box-sizing:border-box; float:left;}
#ProgressCenter #ProgressBar #InnerBar{ width:99%; height:100%; background:#6e6e6e; margin:0 auto 0; border-radius:100px; }
#ProgressCenter #ProgressBar #InnerBar #ColorBar{ background:#99cc00; height:100%; }
#ProgressCenter #ProgressBar #InnerBar #ProgressCircle{ width:10px; height:35px; background:url('../images/navigator/loading.png') left center no-repeat; position:relative;  top:-19px; left:0px; cursor:pointer;}
#ProgressCenter #Timer{ font-size:13px; /*font-weight:bold;*/ color:#666; margin:5px 0 0 5px; /*background-color:#e1e1e1; padding:0 5px;*/ border-radius:10px; height:25px; line-height:26px; float:left;}
#ProgressCenter #Timer .Time{ float:left; }
#ProgressCenter #Timer .TimeOn{float:left;color:#7eb300;}
	/*좌측영역*/
#ContentControllBtn {float:right; position:relative;}
#ContentControllBtn .ProgressBtn{width:18px; height:35px; margin:0 5px 0px 0; position:relative; float:left;}
#ContentControllBtn .ProgressBtn img{ position:absolute; top:-30px; left:-12px; display:none; }
#ContentControllBtn #PlayBtn{ background:url('../images/navigator/play.png') left center no-repeat;; cursor:pointer; }
#ContentControllBtn #PlayBtn:hover{ background:url('../images/navigator/play_hover.png') left center no-repeat; }
#ContentControllBtn #PlayBtn.Active{ background:url('../images/navigator/stop.png') left center no-repeat; }
#ContentControllBtn #PlayBtn.Active:hover{ background:url('../images/navigator/stop_hover.png') left center no-repeat; }
#ContentControllBtn #SoundBtn{ background:url('../images/navigator/sound_on.png') left center no-repeat; cursor:pointer; }
#ContentControllBtn #SoundBtn.ProgressBtn img{ left:-16px; }
#ContentControllBtn #SpeedBtn{  left center no-repeat; cursor:pointer; width:25px;}/*background:url('../images/navigator/speed.png') left center no-repeat; cursor:pointer; width:40px; 진학수정*/
#ContentControllBtn #SpeedBtn:hover{  left center no-repeat; cursor:pointer; }/*background:url('../images/navigator/speed_hover.png') 진학수정*/
#ContentControllBtn #SpeedBtn .speedTxt {position:relative; font-size:13px; font-family:'NanumGothicBold'; letter-spacing:-0.5px; color:#666;}/*left:19px; font-size:11px; 진학수정*/
#ContentControllBtn #ReBtn{ background:url('../images/navigator/refresh.png') left center no-repeat;  cursor:pointer; }
#ContentControllBtn #ReBtn:hover{ background:url('../images/navigator/refresh_hover.png') left center no-repeat; }
#ContentControllBtn #FullscreenBtn{ background:url('../images/navigator/fullscreen.png') left center no-repeat;  cursor:pointer; }
#ContentControllBtn #FullscreenBtn:hover{ background:url('../images/navigator/fullscreen_hover.png') left center no-repeat; }
#ContentControllBtn #CaptionBtn{ background:url('../images/navigator/subtitle_off.png') left center no-repeat; cursor:pointer; }
#ContentControllBtn .pageMove {float:left; margin:0 10px 0 3px; list-style:none; line-height:33px; letter-spacing:-1.8px;}
#ContentControllBtn .pageMove .pageBtn {font-size:14px; display:inline-block; width:50px; height:22px; line-height:22px; background:url('../images/navigator/next_bg_off.png') 0 0 no-repeat; text-align:center;}
#ContentControllBtn .pageMove .pageBtn .btnWeb {color:#efefef;}
#ContentControllBtn .pageMove .pageBtn .btnMobile {display:none;}
#ContentControllBtn .pageMove .pageBtn:hover {background:url('../images/navigator/next_bg_on.png') 0 0 no-repeat;}
#ContentControllBtn .pageMove .prevBtn {text-align:left; padding:0 0 0 4px;}
#ContentControllBtn .pageMove .nowPage {font-size:20px; font-weight:bold; color:#8dbc00;}
#ContentControllBtn .pageMove .pageNavBar {font-size:14px; color:#969696;}
#ContentControllBtn .pageMove .allPage {font-size:16px; font-weight:bold; color:#8a8a8a; margin:0 5px;}
/*콘트롤바 끝*/





/*콘트롤레이어*/
#SpeedControllBar{position:absolute; height:55px; bottom:35px; z-index:150; width:100%; display:none;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}
#SpeedControllBar .ContentSpeed{position:absolute; right:180px; bottom:2px;  height:35px; line-height:35px;}
#SpeedControllBar .ContentSpeed .speed {text-align:center; float:left; width:40px; margin:0 0.5px; background:rgba(38,39,42,0.8); color:#fff; cursor:pointer;}
#SpeedControllBar .ContentSpeed .speed:hover {color:#c9ff2a;}

#VolumeControllBar{ width:40px; height:100px; line-height:50px; position:absolute; right:167px; bottom:35px; z-index:3; background:rgba(255,255,255,0.5); display:none;}
#VolumeControllBar .VolumeBar{ float:bottom; }
#ContentVolume{ width:7px; height:80px; margin:10px 17px 10px 17px; position:relative; cursor:pointer; }
#VolumeInnerBar{ width:100%; height:80px; background:#99CC00; margin:0 auto 0; border-radius:100px; }
#VolumeColorBar{ background:#333333; height:0%; }
#VolumeCircle{ width:20px; height:8px; background:url('../images/navigator/volume_circle.png'); position:absolute; top:0px; left:-6px; cursor:pointer; }

#EducationBox{position:absolute; height:55px; bottom:35px; z-index:99; width:100%; display:none;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}
#EducationBox .EducationMenu{position:absolute; left:270px; bottom:2px;  height:35px; line-height:35px;}
#EducationBox .EducationMenu .helper{text-align:center; float:left; padding:0 10px; margin:0 0.5px; background:rgba(38,39,42,0.8); font-size:13px; color:#fff; letter-spacing:-1px; font-family:'Malgun Gothic';cursor:pointer;}
#EducationBox .EducationMenu .helper a {color:#fff;}
#EducationBox .EducationMenu .helper:hover {color:#c9ff2a;}
#EducationBox .EducationMenu .helper:hover a {color:#c9ff2a;}
	/*러닝맵*/
#learningMapWrap {position:absolute; top:0; left:0; width:100%; height:100%; z-index:999; background-color:rgba(0,0,0,0.5);}
#learningMapWrap #learningMap {position:relative; width:70%; max-width:1000px; height:80%; margin:5% auto; box-sizing:border-box; padding:2%; box-shadow:3px 3px 8px 1px rgba(0,0,0,0.3); background-color:#2094ca;}
#learningMapWrap #learningMap .learningMapClose {font-size:22px; float:right; border-radius:5px; color:#fff; border:1px solid #efefef; box-shadow:1px 1px 0 0 rgba(0,0,0,0.2);}
#learningMapWrap #learningMap .layerTitle {font-size:18px; font-family:'NanumGothicBold'; color:#fff; text-align:left; border-left:5px solid #a2c9ec; padding-left:10px; line-height:28px;}
#learningMapWrap #learningMap .learnCont {position:relative; background:url('../images/navigator/learning_bg.png'); background-size:cover; width:100%; height:calc(100% - 40px); margin-top:10px; box-sizing:border-box; padding:2%; border-radius:10px;  box-shadow:1px 1px 5px 1px rgba(0,0,0,0.3);}
#learningMapWrap #learningMap .learnCont .learnTitle {font-size:23px; font-family:'NanumGothicBold'; width:30%; float:left; padding:2% 0 0 1%; box-sizing:border-box;}
#learningMapWrap #learningMap .learnCont .learnTitle .learnTitleNum {color:#4eaaff; margin-bottom:5%; font-size:30px;}
#learningMapWrap #learningMap .learnCont .learnTitle .learnTitleTxt {font-size:20px; color:#253340;}
#learningMapWrap #learningMap .learnCont .learningList {padding:2% 5%; width:70%; height:calc(100% - 6%); box-sizing:border-box; overflow:auto; float:left;}
#learningMapWrap #learningMap .learnCont .learningList li {height:30px; margin:2% 0; line-height:30px; background-color:#fff; font-size:15px; box-shadow:1px 1px 1px 0 rgba(0,0,0,0.2);  font-family:'NanumGothicBold'; color:#141f29; text-align:center;}
#learningMapWrap #learningMap .learnCont .learningList li span.num {background-color:#4eaaff; width:40px; display:inline-block; text-align:center; margin-right:10px; color:#fff; height:30px; float:left;}
	/*러닝맵끝*/
	/*러닝맵
#learningMapWrap {position:absolute; top:0; left:0; width:100%; height:100%; z-index:999; background-color:rgba(0,0,0,0.5);}
#learningMapWrap #learningMap {position:relative; width:70%; max-width:1000px; height:80%; margin:5% auto; box-sizing:border-box; padding:2%; box-shadow:3px 3px 8px 1px rgba(0,0,0,0.3);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9f9f9+0,e0e0e0+100 */
/*background: rgb(249,249,249); /* Old browsers */
/*background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6-15 */
/*background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10-25,Safari5.1-6 */
/*background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
/*}
#learningMapWrap #learningMap .learningMapClose {font-size:22px; float:right; background-color:#2c87da; border-radius:5px; color:#fff; box-shadow:1px 1px 0 0 rgba(0,0,0,0.2);}
#learningMapWrap #learningMap .layerTitle {font-size:18px; font-family:'NanumGothicBold'; color:#2c87da; text-align:left; border-left:5px solid #a2c9ec; padding-left:10px; line-height:28px;}
#learningMapWrap #learningMap .learnCont {position:relative; background-color:#626c75; width:100%; height:calc(100% - 40px); margin-top:10px; box-sizing:border-box; padding:2%; border:1px solid #dedede; border-radius:10px;}
#learningMapWrap #learningMap .learnCont .learnTitle {font-size:23px; font-family:'NanumGothicBold'; color:#ffffff; text-align:center; padding-bottom:1%;}
#learningMapWrap #learningMap .learnCont .learningList {padding:2% 13%; width:100%; height:calc(100% - 6%); box-sizing:border-box; overflow:auto;}
#learningMapWrap #learningMap .learnCont .learningList li {height:30px; margin:2% 0; line-height:30px; background-color:#fff; font-size:15px; box-shadow:1px 1px 1px 0 rgba(0,0,0,0.2);  font-family:'NanumGothicBold'; color:#141f29; text-align:center;}
#learningMapWrap #learningMap .learnCont .learningList li span.num {background-color:#4eaaff; width:40px; display:inline-block; text-align:center; margin-right:10px; color:#fff; height:30px; float:left;}
	/*러닝맵끝*/
#NextBalloon{ position:absolute; right:24px; bottom:33px; z-index:100; }
/*콘트롤레이어 끝*/




/*모바일 툴박스*/
#toolBox{ position:absolute; top:3%; right:0px;  width: 50px; display:block; background:#D75F78; text-align:center; display:none;}
#toolBox ul{ list-style:none; line-height:100%; padding:0px; }
#toolBox a{ font-size:12px; color:#fff; font-weight:bold; display:inline-block; cursor:pointer; text-decoration:none; }
#toolBox .sideText a:hover{ color:#553344; }
#toolBox .sideFunctionText a:hover{ color:#553344; }
#toolBox .sidebar{ margin:0 0px; color:#fff; font-size:36px; }


/*table*/
.T01 {width:100%; font-size:14px; text-align:center;}
.T01 thead {border-top:1px solid #2b87da;}
.T01 tbody {border-top:2px solid #2b87da;}
.T01 th {background-color:#e7f1fa;}
.T01 th p {color:#035197;}
.T01 td {border-bottom:1px solid #c8cfd5; padding:2px;}


/*기타*/
#ContentAudio{position:absolute; left:200px; }
#Contain iframe{ position:absolute; width:100%; height:100%; border: none; }
#ContentView{ width:800x; height:620px; margin-left:200px; position:relative; z-index:200; transition: all .30s ease-out; }
#ContentDisplay{ width:100%; height:100%; position:absolute; top:0px; left:0px; }
#ContentCaption{width:100%; height:55px; background-color: rgba( 0, 0, 0, 0.6 ); position:absolute; bottom:33px; left:0px; 	color:#fff; font-weight:bold; font-size:14px; padding:5px; line-height:18px; text-align:justify; letter-spacing:-1px; z-index=100px; overflow-y:auto;}
#Contents{min-width:790px; min-height:620px; width:calc(100% - 200px); height:100%; float:left; margin-left:200px; background-color:#FFBB00; position:fixed;}
#Contents img{ position:absolute; }
#Contents .fullImg{ width:95%; height: 95%; }
#MoviePlayIcon{ width:50px; height:50px; position:absolute; left:56%; top:42%; z-index:999; display:none;}
#MoviePlayBtn{ cursor:pointer; }
#LandscapeOnly{width:200px; height:200px; border-radius:200px; background:aquamarine; position:absolute; line-height:35px; text-align:center; color:#666; font-weight:bold;}
#tabMenu{width:100%; height:35px; line-height:35px; position:absolute; bottom:0px;	background:#666666; text-align:center;}
#tabMenu a{ font-size:12px; color:#fff; font-weight:bold; display:inline-block; cursor:pointer; text-decoration:none; }
#tabMenu .tabText a:hover{ color:#FF9900; }
#tabMenu .tabFunctionText a:hover{ color:#FF9900; }
#tabMenu .tabLine{ margin:0 3px; color:#fff; font-size:12px; }



/********************************mobile********************************/
/*@media screen and (max-width:800px) {*/
@media screen and (max-height:600px) {
	#Wrap{min-width:320px; width:100%; min-height:100%; background:none; background-color:#000; }
	#leftMenu {display:none;}
	/*Quiz*/
	#SubjectName {display:none;}
	#QuizWrap #te {display:none;}
	#QuizWrap #QuizInfo {font-size:14px;}
	#QuizWrap #QuizContent {width:95%; margin:2% auto; min-height:190px; height:calc(100% - 150px);}
	#QuizWrap #QuizContent .QuizZone .Question {line-height:30px;}
	#QuizWrap #QuizContent .QuizZone .Question .sript {font-size:15px; line-height:17px; padding:7px 0 0 1%;}
	#QuizWrap #QuizContent .QuizZone .Question .QuestionNum {background-size:30px; font-size:25px; height:30px; width:30px;}
	#QuizWrap #QuizContent .QuizZone .SelectAnswer .OX li input {height:65px;}
	#QuizWrap #QuizContent .QuizZone .SelectAnswer .CorrectChk p {margin:12px auto 0 auto;}

 	#CaptionBox{ bottom:32px; font-size:11px; position:fixed; height:35px;}

	#ControllBar{ height:32px; bottom:0px; background:#fff; position:fixed; }
	#ControllBar .logo {width:115px;}
	#ControllBar .logo img {width:110px;}	
	#ControllBar .Download {display:none;}
	#ControllBar .LearnTool {display:none;}
	#ControllBar #ContentControllBtn #FullscreenBtn {display:none;}
	#ProgressCenter {width:calc(100% - 400px); height:32px;}
	#ContentControllBtn .pageBtn .btnWeb {display:none;}
	#ContentControllBtn .pageBtn .btnMobile {display:block;}
	#ContentControllBtn .pageMove {float:left; list-style:none; letter-spacing:-1.8px;}
	#ContentControllBtn .pageMove .pageBtn {font-size:20px; display:inline-block; width:20px; height:22px; line-height:22px; background:none; text-align:center;}
	#ContentControllBtn .pageMove .pageBtn .btnWeb {display:none;}
	#ContentControllBtn .pageMove .pageBtn .btnMobile {display:block; color:#6a6b6c;}
	#ContentControllBtn .pageMove .pageBtn:hover {background:url('../images/navigator/next_bg_on.png') 0 0 no-repeat;}
	#ContentControllBtn .pageMove .prevBtn {padding:0 5px 0 0}
	#ContentControllBtn .pageMove .nowPage {font-size:20px; font-weight:bold; color:#8dbc00;}
	#ContentControllBtn .pageMove .pageNavBar {margin:0 0 0 3px;}
	#ContentControllBtn .pageMove .allPage {margin:0 5px;}
	#VolumeControllBar{; bottom:32px; right:110px;}
	#NextBalloon{ right:20px; bottom:32px; }
	#toolBox {display:block;}
	#ContentControllBtn .pageMove .pageBtn:hover {background:none;}
	
	.PrintBtn {display:none;}
	.continueLayer .continuelayerPop {position:absolute; top:30%; width:42%; left:32%; background-color:#aad331; box-sizing:border-box; padding:2%; line-height:150%; box-shadow:3px 3px 8px 1px rgba(0,0,0,0.3);}

	#tabMenu{ height:32px; bottom:0px; position:fixed; }
	#Contents{ height:100%; padding:0px;  }
	#ProgressBar{ width:25%; margin-left:10px;}
	#InnerBar{ width:95%; }
	#Contents .step{ top:0; width:100%; height:calc(100% - 50px); position:absolute; }
	#ContentControllBtnf {position:absolute; right:5px;}
	#MoviePlayIcon{ width:50px; height:50px; position:absolute; left:46%; top:42%; z-index:999; display:none;}
}
@media screen and (max-width:500px) {
	#QuizWrap #SubjectName {display:none;}
	#ControllBar .logo {display:none;}
	#ProgressCenter {width:calc(100% - 255px);}
}


/********************************print********************************/
@page a4sheet {size:21.0cm 29.7cm}
	.PrintArea {page: a4sheet; page-break-before: always;}

@media print{
	body {font-size:14pt;}
	#leftMenu {display:none;}
	#ControllBar {display:none;}
	.PrintBtn{display:none;}
	.NextWrap {display:none;}
	#QuizWrap {width:100%; !important;}
	#QuizWrap #QuizContent {margin:0 auto; padding:0; max-height:100%; min-height:100%; height:100%; overflow:none;}
	#QuizWrap #QuizContent .QuizZone {margin-top:20px;}
	#QuizWrap #QuizContent .QuizZone .Question {margin-bottom:10px;}
	#QuizWrap #QuizContent .QuizZone .Question .sript {font-size:17pt;}
	#QuizWrap #PrintTitle {display:block; text-align:center; margin:20px 0; font-family:'NanumGothicBold';}
	#QuizWrap #PrintTitle p:last-child {font-size:20pt; margin-top:5px;}
	#QuizTitle {display:none;}
	#QuizInfo {display:none;}
}