@font-face {
  font-family: 'godoMaum';  font-style: normal;;
  src: local('./font/godoMaum');
  src: url('./font/godoMaum.eot');
  src: url('./font/godoMaum.eot?#iefix') format('embedded-opentype'),
  url('./font/godoMaum.woff') format('woff'),
  url('./font/godoMaum.ttf') format('truetype');
  
}
@font-face {
  font-family: 'NanumBarunGothic';  font-style: normal;;
  src: local('./font/NanumBarunGothic');
  src: url('./font/NanumBarunGothic.eot');
  src: url('./font/NanumBarunGothic.eot?#iefix') format('embedded-opentype'),
  url('./font/NanumBarunGothic.woff') format('woff'),
  url('./font/NanumBarunGothic.ttf') format('truetype');
}
@font-face {
  font-family: 'NanumBarunGothicBold';  font-style: normal;;
  src: local('./font/NanumBarunGothicBold');
  src: url('./font/NanumBarunGothicBold.eot');
  src: url('./font/NanumBarunGothicBold.eot?#iefix') format('embedded-opentype'),
  url('./font/NanumBarunGothicBold.woff') format('woff'),
  url('./font/NanumBarunGothicBold.ttf') format('truetype');
}
@font-face {
  font-family: 'NanumBarunGothicLight';  font-style: normal;;
  src: local('./font/NanumBarunGothicLight');
  src: url('./font/NanumBarunGothicLight.eot');
  src: url('./font/NanumBarunGothicLight.eot?#iefix') format('embedded-opentype'),
  url('./font/NanumBarunGothicLight.woff') format('woff'),
  url('./font/NanumBarunGothicLight.ttf') format('truetype');
}

html, body {
  height:100%;
  overflow:hidden;
  margin:0;
  padding:0;
}
body, div, span, p{
  font-family: 'NanumBarunGothic';
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}
.contentsAllArea{
  background-color: #fff;
  overflow: hidden;
  -moz-transform-origin: top left;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  position: relative;
}
.topArea, .bottomArea{
  z-index: 10;
}
.vid{
  position: absolute;
  top: 63px;
  left: 0;
  width: 1012px;
  height: 570px;
}
.setPage{
  position: absolute;
  top: 63px;
  left: 0;
  width: 100%;
  height: 570px;
}
.pageTitleBg{
  position: absolute;
  top: 20px;
  left: 60px;
  background: url(../img/common/pageTitleBg.png) no-repeat left top;
  color: #383838;
  font-size: 20px;
  padding-left: 24px;
  height: 21px;
  line-height: 22px;
  opacity: 0;

}
/* Intro css */
.introGroup{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.introObj_1{
  position: absolute;
  background: url(../img/common/introObj_1.png) no-repeat center;
  background-size: 100% 100%;
  width: 354px;
  height: 54px;
  top: 170px;
  left: 105px;
  opacity: 0;
}
.contitle{
  position: absolute;
  top: 260px;
  left: 0px;
  width: 100%;
  opacity: 0;
}
.contitleText{
  font-family: 'godoMaum';
  font-size: 130px;
  color: #494949;
  line-height: 60px;
  text-align: left;
  letter-spacing: -1px;
  padding-left: 85px;
}
.contitleTextSub{
  text-align: left;
  font-size: 30px;
  letter-spacing: 0px;
}
/* learningGoal css*/
.learningMain{
  position: absolute;
  left: 0;
  background: rgba(255, 255, 255, 0.8);
  width: 586px;
}
.lenPlan, .lenGoal{
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 496px;
  margin: 0 auto;
  top: 100px;
  left: 140px;
  opacity: 0;
  letter-spacing: -0.8px;
}
.lenGoalTitle{
  background: url(../img/common/lenGoal.png) no-repeat left top;
  width:114px;
  height: 35px;
}
.lenPlanTitle{
  background: url(../img/common/lenPlan.png) no-repeat left top;
  width:119px;
  height: 35px;
}
.lenPlanTextGroup, .lenGoalTextGroup{
  padding: 20px;
  padding-left: 0;
}
.lenPlanTextGroup div, .lenGoalTextGroup div{
  display: inline-block;
  vertical-align: top;
}
.lenPlanTextGroup .lenPlanTextText, .lenGoalTextGroup .lenGoalTextText{
  width: 93%;
  color: #2f2f2f;
  margin-bottom: 10px;
  font-family: 'NanumBarunGothic';
  font-size: 20px;
}
.lenGoalTextText{
  background: url(../img/common/lenPlanBlit.png) no-repeat left 8px;
  padding-left: 12px;
}
.lenGoalTextNum{
  color: #ff8b01;
  margin-right: 5px;
  font-family: 'NanumBarunGothic';
  font-size: 20px;
}
.lessonDown{
  width: 200px;
  height: 45px;
  position: absolute;
  bottom: 60px;
  right: 30px;
  background-color: #5b998f;
  font-family: 'NanumBarunGothic';
  font-size: 20px;
  text-align: center;
  line-height: 45px;
  color: #fff;
  border-radius: 15px;
  opacity: 0;
  cursor: pointer;
  display: none;
}
.lessonDown:hover{
  background-color: #2b4844;
}
/* quiz css */
.QuizIntroGroup{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.quizIntroBg{
  background: url(../img/common/quizIntroBg.png) no-repeat center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -668px;
  left: 0px;
  opacity: 0;
}
.quizIntroObj_1{
  width: 100%;
  text-align: center;
  position: absolute;
}
.quizIntroObj_1 div{
  display: inline-block;
  margin-top: 200px;
  opacity: 0;
  vertical-align: middle;
}
.obj_Q{
  background: url(../img/common/q.png) no-repeat center;
  width: 76px;
  height: 99px;
  margin-right: 19px;
}
.obj_U{
  background: url(../img/common/u.png) no-repeat center;
  width: 69px;
  height: 91px;
  margin-right: 22px;
}
.obj_I{
  background: url(../img/common/i.png) no-repeat center;
  width: 19px;
  height: 100px;
  margin-right: 13px;
}
.obj_Z{
  background: url(../img/common/z.png) no-repeat center;
  width: 80px;
  height: 107px;
}

.quizIntroObj_2{
  font-family: 'NanumBarunGothic';
  color: #4a4a4a;
  font-size: 23px;
  width: 100%;
  height: 60px;
  text-align: center;
  position: absolute;
  top: 300px;
  opacity: 0;
}
.quizIntroStartBtn{
  position: relative;
  top: 390px;
  margin: 0 auto;
  background: url(../img/common/quizStartBtn.png) no-repeat center;
  width: 117px;
  height: 45px;
  cursor: pointer;
  opacity: 0;
}
.quizIntroStartBtn:hover{
  background: url(../img/common/quizStartBtnOver.png) no-repeat center;
}
.QuizGroup{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
}
.quizTop{
  position: relative;
  padding: 15px 20px 0 70px;
  font-size: 22px;
  color: #4e4d4d;

  width: 780px;
  min-height: 40px;
  top: 50px;
  left: 75px;
  letter-spacing: -0.2px;
  border-bottom: 2px solid #ffb500;
}
.quizTop .jimunInBogi{
  margin-top: 10px;
  font-size: 20px;
}
.quizTitle{
  font-size: 23px;
  margin-left: -20px;
  padding: 9px 0 8px 20px;
  font-family: 'NanumBarunGothicBold';
  color: #4D4C4C;
  letter-spacing: -0.5px;
  word-break: keep-all;
}
.quizTitle ins{
  color: #4D4C4C;
}
.quizTitleNum{
  width: 50px;
  height: 26px;
  position: absolute;
  top: 22px;
  left: 5px;
}
.oxChkObj{
  position: absolute;
  top: -11px;
  left: -23px;
  width: 91px;
  height: 92px;
}
.quizMiddle{
  position: relative;
  top: 80px;
  margin-left: 110px;
  width: calc(100% - 110px);
}
.bogiGroup{
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 66px);
}
.quizBogi{
  cursor: pointer;
  width: 100%;
}
.quizBogiText{
  vertical-align: top;
  font-size: 20px;
  margin-top: 5px;
  margin-bottom: 10px;
  height: auto;
  cursor: pointer;
  position: relative;
  min-height: 24px;
  color: #4D4C4C;
  display: inline-block;
  font-family: 'NanumBarunGothic';
  width: calc(100% - 45px);
  word-break: keep-all;
}
.quizBogiNum{
  cursor: pointer;
  vertical-align: top;
  margin: 2px 10px 0 5px;
  font-size: 19px;
  color: #fff;
  display: inline-block;
  background-color: #B1B1B1;
  padding: 3px 8px 1px 8px;
  border-radius: 19px;
}
.answerSelect{
  background: url(../img/common/answerSelect.png) no-repeat center;
  width: 26px;
  height: 26px;
  position: absolute;
  top: -11px;
  left: -35px;
  z-index: -1;
  opacity: 0;
}
.oxGroup{
  margin-top: 20px;
  margin-left: 210px;
}
.oxQuizO, .oxQuizX{
  width: 121px;
  height: 121px;
  display: inline-block;
  margin: 0 30px;
  cursor: pointer;
}
.oxQuizO{
  background: url(../img/common/oxQuizOBg.png) no-repeat center;
}
.oxQuizX{
  background: url(../img/common/oxQuizXBg.png) no-repeat center;
}
.answerChkBtn{
  margin: 0 auto;
  background: url(../img/common/answerBtn.png) no-repeat center;
  width: 81px;
  height: 31px;
  cursor: pointer;
}

.quizBottom{
  position: absolute;
  left: 0;
  top: 600px;
  width: 100%;
  height: 189px;
  background-color: #ffe199;
  font-size: 25px;
  color: #fff;
}
.quizNextBtn{
  width: 92px;
  height: 45px;
  position: absolute;
  top: 325px;
  left: 838px;
  cursor: pointer;
  background-color: #fbbd2a;
  border-radius: 45px;
  padding-left: 20px;
  color: #fff;
  line-height: 45px;
  font-family: 'NanumBarunGothic';
  font-size: 20px;
}
.quizNextBtn:hover{
  background-color: #825b02;
}
.answerNumBox{
  width: 164px;
  height: 146px;
  color: #fff;
  position: absolute;
  top: -15px;
  left: 0px;
  text-align: center;
  line-height: 86px;
  background-color: #ffb500;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.answerNumTit{
  font-size: 21px;
  height: 50px;
}
.answerNum{
  font-size: 50px;
  font-weight: bold;
}
.answerTextBox{
  position: absolute;
  top: 10px;
  left: 175px;
  color: #474747;
  font-size: 20px;
  width: 805px;
  height: auto;
  border-radius: 5px;
  padding: 10px;
}
.answerTextTit, .answerText{
  float: left;
}
.answerTextTit{
  border-right: 1px solid #4e4d4d;
  padding-right: 5px;
}
.answerText{
  font-size: 20px;
  padding-left: 10px;
  width: calc(100% - 60px);
  word-break: keep-all;
}

.juAlert{
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6) url(../img/common/alertRetry.png) no-repeat center;
  position: absolute;
  text-align: center;
  z-index: -1;
  opacity: 0;
}
.resultPop{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: -1;
  opacity: 0;
}
.resultGroup{
  width: 663px;
  height: 435px;
  background-color: #fff;
  border: 5px solid #feb400;
  position: relative;
  margin: 0 auto;
  margin-top: 65px;
}
.resultTitle{
  background-color: #feb400;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  width: 158px;
  height: 53px;
  font-size: 30px;
  font-family: 'NanumBarunGothic';
  position: absolute;
  top: 0;
  left: 251px;
  text-align: center;
  line-height: 50px;
  color: #fff;
}
.resultText{
  position: absolute;
  top: 80px;
  left: 121px;
}
.resultText, .rt_1{
  font-family: 'NanumBarunGothic';
  font-size: 25px;
  color: #4A4A4A;
  margin-bottom: 5px;
}
.resultText, .rt_2{
  font-family: 'NanumBarunGothic';
  font-size: 30px;
  color: #4A4A4A;
}
.resultText, .rt_2 em{
  color: #FF9600;
  font-style: normal;
  text-align: center;
}
.resultOXC{
  position: absolute;
  top: 170px;
  width: 100%;
  text-align: center;
}
.resultOXCInObj{
  display: inline-block;
  vertical-align: top;
  width: 158px;
  height: 158px;
  background-color: #F8F8F8;
  position: relative;
  color: #F99163;
  font-size: 60px;

  text-align: center;
  line-height: 162px;
  margin: 3px 12px;
}
.roxc{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.resultRetryBtn{
  width: 116px;
  height: 45px;
  position: absolute;
  cursor: pointer;
  background-color: #feb400;
  border-radius: 25px;
  color: #fff;
  line-height: 45px;
  font-family: 'NanumBarunGothic';
  font-size: 20px;
  bottom: 30px;
  right: 270px;
  text-align: center;
}
.resultRetryBtn:hover{
  background-color: #825b02;
}
.closeResultPopBtn{
  font-family: 'NanumBarunGothic';
  font-size: 25px;
  color: #feb400;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.closeResultPopBtn:hover{
  color: #825B02;
}
/* summary css*/
.summaryGroup{
  position: absolute;
  top: 75px;
  left: 110px;
  width: calc(100% - 150px);
  height: 470px;
  overflow: hidden;
  overflow-y: auto;
  opacity: 0;
  background-color: rgba(255, 255, 255, 0.8);
}
.sumTop{
  width: 203px;
  height: 53px;
  background-color: #609C92;

  font-size: 30px;
  color: #fff;
  text-align: center;
  position: absolute;
  top: 20px;
  left: -10px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  line-height: 55px;
}
.summaryGroup .sumTextGroup{ 
  float: left;
  vertical-align: top;
  clear: both;
  width: 100%;
  margin-bottom: 15px;
}
.sumTitle, .sumTextF, .sumTextS{
  font-size: 20px;
  font-weight: 500;
}
.sumTitle > div, .sumTextF > div, .sumTextS > div{
  display: inline-block;
  vertical-align: top;
}
.sumTitle .blit{
  font-weight: 700;
  color: #5e5e5e;
  margin-right: 10px;
  font-size: 18px;
}
.sumTitle .text{
  color: #1f1f1f;
  width: calc(100% - 30px);
  word-break: keep-all;
}
.sumTextF{ margin: 10px 0 0 29px; }
.sumTextF .blit{
  width: 10px;
  height: 12px;
}
.sumTextF .text{
  color: #1f1f1f;
  width: calc(100% - 30px);
  word-break: keep-all;
  margin-left: 10px;
}
.sumTextS{
  margin: 10px 0 10px 52px;
}
.sumTextS .text{
  color: #1f1f1f;
  width: calc(100% - 30px);
  word-break: keep-all;
  margin-left: 10px;
}
.insML25{ margin-left: 25px; }
.insML47{ margin-left: 47px; }
.sumBottom{
  position: absolute;
  bottom: 15px;
  left: 170px;
}
.sumBottom div{
  display: inline-block;
}
.sumPrevBtn{
  cursor: pointer;
  background: url(../img/common/sumPrevBtn.png) no-repeat right center;
  width: 69px;
  height: 25px;
}
.sumPageNum{
  margin: 0 15px;
  margin-top: 3px;
  font-size: 20px;
  vertical-align: top;
  color: #333;
}
.sumPageNum em{
  font-style: normal;
  color: #333;
}
.sumNextBtn{
  cursor: pointer;
  background: url(../img/common/sumNextBtn.png) no-repeat left center;
  width: 69px;
  height: 25px;
}
.sumPrint, .sumDown{
  background-color: #01a89e;
  width: 90px;
  height: 28px;
  display: inline-block;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  color: #fff;
  text-align: center;
  line-height: 30px;
  border-radius: 28px;
}
.sumPrint{
  top: 25px;
  right: 150px;
}
.sumDown{
  top: 25px;
  right: 55px;
}
/* outro css */
.outroGroup{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.outroBg{
  position: absolute;
  background: url(../img/common/introObj_1.png) no-repeat center;
  background-size: 100% 100%;
  width: 354px;
  height: 54px;
  top: 80px;
  left: 105px;
  opacity: 0;
}
.outroContitle{
  font-family: 'godoMaum';
  font-size: 130px;
  color: #494949;
  position: absolute;
  top: 160px;
  left: 0px;
  width: 100%;
  line-height: 60px;
  text-align: center;
  letter-spacing: -1px;
  opacity: 0;
}
.outroLessonTitle{
  position: absolute;
  top: 310px;
  left: 125px;
  color: #494949;
  font-size: 22px;
  font-family: 'NanumBarunGothicBold';
  opacity: 0;
}
.outroLessonTitleInCommonText{
  margin-top: 35px;
  color: #494949;
  font-family: 'NanumBarunGothic';
  font-size: 30px;
  margin-left: 20px;
  opacity: 0;
}
/* indexMenu css */
.indexMenu{
  background: url(../img/controls/menu.png) no-repeat center;
  cursor: pointer;
  width: 33px;
  height: 91px;
  position: absolute;
  top: 110px;
  right: -33px;
}
.indexMenuPop{
  background-color: #2f2f2f;
  width: 210px;
  position: absolute;
  left: -225px;
  top: 175px;
  padding: 5px 15px 15px 0;
  z-index: 2;
}
.indexPopClose{
  position: absolute;
  top: 8px;
  right: 10px;
  cursor: pointer;
  color: #fff;
  font-size: 17px;
}
.indexPopClose:hover{
  color: #ff7779;
}
.indexMenuPop .mMenu{
  font-family: 'NanumBarunGothicBold';
  padding-top: 3px;
  position: relative;
  margin: 10px 0 5px 0;
  color: #fff;
  font-size: 20px;
  padding: 3px 35px 7px 0;
  border-bottom: 1px solid;
  margin-left: 20px;
}
.indexMenuPop .subMenu{
  cursor: pointer;
  margin-left: 30px;
  padding-top: 2px;
}
.subMenu{
  font-family: 'NanumBarunGothicBold';
  color: #bfbfbf;
  font-size: 16px;
  background: url(../img/index/indexSubBlit.png) no-repeat left center;
  margin-left: 30px;
  padding-left: 15px;
  background-size: 10px;
  margin-top: 7px;
}
.scriptPop{
  width: 836px;
  height: 64px;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  left: 80px;
  bottom: 38px;
  border-radius: 15px;
  color: #fff;
  padding: 10px 15px;
  z-index: -1;
  opacity: 0;
}

.sum_up_img{
  top: 100px;
  left: 1200px !important;
  position: absolute;
  width: 210mm;
  min-height: 297mm;
}
.sum_up_img #mCSB_1_container{
  margin-top: 90px;
  margin-left: 35px;
  width: calc(100% - 55px);
  word-break: keep-all;
}
.sum_up_img .sumTitle .blit{padding-bottom: 10px;}
.sum_up_img #mCSB_1_container .sumTextGroup{ margin-bottom: 30px; }
.mPrevBtn, .mNextBtn{
  position: absolute;
  top: 0;
  margin-top: 294px;
  z-index: -1;
  opacity: 0;
  cursor: pointer;
}
.mPrevBtn{
  left: 0;
  background: url(../img/controls/mPrevBtn.png) no-repeat center;
  width: 61px;
  height: 92px;
}
.mNextBtn{
  right: 0;
  background: url(../img/controls/mNextBtn.png) no-repeat center;
  width: 61px;
  height: 92px;
}