@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');
}
@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: 'GmarketSansTTFBold';  font-style: normal;;
  src: local(./font/GmarketSansTTFBold);
  src: url(./font/GmarketSansTTFBold.eot);
  src: url(./font/GmarketSansTTFBold.eot?#iefix) format('embedded-opentype'),
  url(./font/GmarketSansTTFBold.woff) format('woff'),
  url(./font/GmarketSansTTFBold.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;
}
.contentsArea{
  position: absolute;
  top: 55px;
  width: 100%;
  height: calc(100% - 91px);
}
.vid{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.setPage{
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition-duration: 0.5s;
}
/* intro css */
.introBg > div:not(.contitle, .introstart){
  opacity: 0;
}
.introobjbg{
  background: url(../img/common/introObjbg.png) no-repeat center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 30%;
}
.introobj_1{
  position: absolute;
  top: 65px;
  left: 0px;
  width: 100%;
  height: 40px;
  background: url(../img/common/introObj_1.png) no-repeat center;
}
.introGroup .contitle{
  position: absolute;
  top: 150px;
  left: 250px;
  overflow: hidden;
  width: 512px;
  height: 200px;
  text-align: center;
}
.introGroup .contitle > div{
  position: relative;
  text-align: center;
  font-size: 95px;
  color: #335dc9;
  font-family: 'GmarketSansTTFBold';
  width: 100%;
  top: 0;
}
.introGroup .contitle .introobj_21{
  left: -100%;
}
.introGroup .contitle .introobj_22{
  right: -100%;
  top: -15px;
}
.introobj_3{
  position: absolute;
  top: 360px;
  left: 0px;
  width: 100%;
  height: 65px;
  background: url(../img/common/introObj_3.png) no-repeat center;
}
.introstart{
  position: relative;
  margin: 0 auto;
  top: 435px;
  background: url(../img/common/introstart.png) no-repeat center;
  width: 137px;
  height: 50px;
  display: none;
  cursor: pointer;
}
.introstart:hover{
  background: url(../img/common/introstarto.png) no-repeat center;
}
/* learninggoal css */
.lenobjbg{
  background: url(../img/common/LearningGoalobjbg.png) no-repeat center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.lenGoalbg, .lenPlanbg{
  position: absolute;
  width: 176px;
  height: 176px;
  opacity: 0;
}
.lenGoalbg{
  background: url(../img/common/lenGoal.png) no-repeat center;
  top: 102px;
  left: 66px;
}
.lenPlanbg{
  background: url(../img/common/lenPlan.png) no-repeat center;
  bottom: 102px;
  right: 66px;
}
.lenGoaltextgroup, .lenPlantextgroup{
  position: absolute;
  left: 315px;
  opacity: 0;
}
.lengoaltextlist, .lenplantextlist{
  margin-bottom: 7px;
}
.lengoaltextlist > div, .lenplantextlist > div{
  display: inline-block;
  vertical-align: top;
}
.lengoaltextlist .num, .lenplantextlist .num{
  font-size: 18px;
  font-family: 'GmarketSansTTFBold';
  color: #fff;
  background-color: #ffb954;
  border-radius: 50%;
  width: 35px;
  text-align: center;
  padding: 10px 0 5px 0;
}
.lengoaltextlist .text, .lenplantextlist .text{
  color: #191919;
  font-size: 22px;
  font-family: 'NanumBarunGothic';
  margin-top: 6px;
  margin-left: 8px;
}
/* quiz css */
.QuizGroup, .juAlert{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.juAlert{
  opacity: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.8) url(../img/common/alertRetry.png) no-repeat center;
}
.quizTop{
  position: relative;
  top: 0;
  width: auto;
  min-height: 110px;
}
.quizTop .num{
  position: absolute;
  top: 35px;
  left: 40px;
  width: 922px;
  height: 62px;
}
.quizTop .text{
  position: absolute;
  left: 110px;
  color: #191919;
  font-family: 'NanumBarunGothic';
}
.quizTop .text ins{
  color: #cc3300;
}
.quizTop .oxChkObj{
  position: absolute;
  top: 35px;
  left: 40px;
  width: 62px;
  height: 62px;
}
.qsubtitle.active{
  position: relative;
  top: 0px;
  left: 100px;
  border: 1px solid #ccc;
  padding: 7px 10px;
  width: calc(100% - 170px);
  word-break: keep-all;
  font-size: 18px;
}
.quizMiddle{
  position: relative;
  top: 10px;
  left: 100px;
  width: calc(100% - 120px);
  height: auto;
}
.quizBogi{
  margin-bottom: 10px;
  cursor: pointer;
}
.quizBogi > div{
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
}
.quizBogi .num{
  font-size: 17px;
  color: #b0b0b0;
  font-family: 'GmarketSansTTFBold';
  border: 2px solid #b0b0b0;
  border-radius: 50%;
  width: 28px;
  text-align: center;
  padding: 5px 0 3px 0;
}
.quizBogi .text{
  font-size: 20px;
  color: #191919;
  font-family: 'NanumBarunGothic';
  margin-top: 6px;
  margin-left: 8px;
}
.oxGroup{
  text-align: center;
  position: absolute;
  width: 90%;
  top: 40px;
}
.oxQuizO, .oxQuizX{
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  margin: 0 40px;
  width: 120px;
  height: 120px;
}
.oxQuizO{
  background: url(../img/common/oxQuizOBg.png) no-repeat center;
}
.oxQuizO:hover{
  background: url(../img/common/oxQuizOBgOver.png) no-repeat center;
}
.oxQuizX{
  background: url(../img/common/oxQuizXBg.png) no-repeat center;
}
.quizNextBtn{
  position: absolute;
  top: 290px;
  right: 30px;
  width: 137px;
  height: 44px;
  background: url(../img/common/nextQuizBtn.png) no-repeat center;
  cursor: pointer;
}
.quizNextBtn:hover{
  background: url(../img/common/nextQuizBtnOver.png) no-repeat center;
}
.quizBottom{
  background: url(../img/common/qbottombg.png) no-repeat center;
  width: 100%;
  height: 223px;
  bottom: -259px;
  position: absolute;
}
.quizBottom .answerNum{
  position: absolute;
  top: 20px;
  left: 90px;
  font-size: 17px;
  font-family: 'GmarketSansTTFBold';
  border: 2px solid #335dc9;
  border-radius: 50%;
  width: 28px;
  text-align: center;
  padding: 5px 0 3px 0;
  background-color: #335dc9;
  color: #fff;
}
.quizBottom .answerText{
  position: absolute;
  top: 72px;
  left: 90px;
  color: #191919;
  font-size: 20px;
  font-family: 'NanumBarunGothic';
  width: calc(100% - 110px);
  word-break: keep-all;
}
/* summary css*/
.sumobjbg{
  background: url(../img/common/sobjbg.png) no-repeat center;
  position: absolute;
  width: 144px;
  height: 100%;
  top: 40px;
  left: 30px;
}
.sumobj{
  background: url(../img/common/sobj.png) no-repeat center;
  position: absolute;
  width: 127px;
  height: 127px;
  top: 33px;
  left: 39px;
  opacity: 0;
}
.sumMiddle{
  position: absolute;
  top: 75px;
  left: 200px;
  width: 700px;
  height: 455px;
  overflow: hidden;
  overflow-y: auto;
  padding-bottom: 10px;
  opacity: 0;
}
.stitle > div{
  display: inline-block;
  vertical-align: top;
}
.stitle .blit{
  font-size: 18px;
  font-family: 'GmarketSansTTFBold';
  color: #fff;
  background-color: #ffb954;
  border-radius: 50%;
  width: 35px;
  text-align: center;
  padding: 10px 0 5px 0;
}
.stitle .text{
  color: #191919;
  font-size: 22px;
  font-family: 'NanumBarunGothic';
  margin-top: 6px;
  margin-left: 8px;
  word-break: keep-all;
  width: calc(100% - 45px);
}
.stext > div{
  display: inline-block;
  vertical-align: top;
  font-family: 'NanumBarunGothic';
  font-size: 20px;
  color: #191919;
  margin-top: 10px;
}
.stext .blit{
  margin-left: 45px;
}
.stext .text{
  margin-left: 5px;
  word-break: keep-all;
  width: calc(100% - 70px);
}
.sstext > div{
  display: inline-block;
  vertical-align: top;
  font-family: 'NanumBarunGothic';
  font-size: 20px;
  color: #191919;
  margin-top: 5px;
}
.sstext .blit{
  margin-left: 70px;
}
.sstext .text{
  margin-left: 5px;
  word-break: keep-all;
  width: calc(100% - 90px);
}
.sumPrint, .sumDown{
  opacity: 0;
  position: absolute;
  width: 38px;
  height: 38px;
  left: 120px;
  cursor: pointer;
}
.sumPrint{
  background: url(../img/common/sprint.png) no-repeat center;
  top: 465px;
}
.sumPrint:hover{
  background: url(../img/common/sprinto.png) no-repeat center;
}
.sumDown{
  background: url(../img/common/sdown.png) no-repeat center;
  top: 515px;
}
.sumDown:hover{
  background: url(../img/common/sDowno.png) no-repeat center;
}
/* outro css */
.outroLessonTitle{
  font-family: 'NanumBarunGothicBold';
  position: relative;
  top: 440px;
  width: 100%;
  text-align: center;
  color: #191919;
  opacity: 0;
}
.outroLessonTitleInCommonText{
  font-family: 'NanumBarunGothic';
  position: relative;
  top: 430px;
  width: 100%;
  text-align: center;
  font-size: 22px;
  margin-top: 10px;
  opacity: 0;
}
/* indexMenu css */
.indexMenu{
  background: url(../img/controls/menu.png) no-repeat center;
  cursor: pointer;
  width: 39px;
  height: 91px;
  position: absolute;
  top: 110px;
  right: -39px;
}
.indexMenuPop{
  background-color: #ffb954;
  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: 'GmarketSansTTFBold';
  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: #fff;
  font-size: 16px;
  background: url(../img/common/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;
  position: absolute;
  width: 100%;
  height: 800px;
}
.sum_up_img #mCSB_1_container{
  margin-top: 75px;
  margin-left: 50px;
  width: calc(100% - 70px);
  word-break: keep-all;
}
.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;
}