@font-face {
  font-family: 'BinggraeⅡ';
  src: url(./font/BinggraeⅡ.otf);
}
@font-face {
  font-family: 'BinggraeⅡ_Bold';
  src: url(./font/BinggraeⅡ-Bold.otf);
}
@font-face {
  font-family: 'KoPubDotumBold';
  src: url(./font/KoPubDotumBold.ttf);
}
@font-face {
  font-family: 'KoPubDotumMedium';
  src: url(./font/KoPubDotumMedium.ttf);
}
@font-face {
  font-family: 'NanumGothic';
  src: url(./font/NanumGothic.otf);
}
@font-face {
  font-family: 'NanumGothicBold';
  src: url(./font/NanumGothicBold.otf);
}
@font-face {
  font-family: 'SCDream5';
  src: url(./font/SCDream5.otf);
}
@font-face {
  font-family: 'SCDream6';
  src: url(./font/SCDream6.otf);
}

*{
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.contentArea{
  -moz-transform-origin: top left;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  position: relative;
  width: 1280px;
  height: 767px;
  overflow: hidden;
}
.topArea{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 10;
}
.topArea > div{position: absolute;}
.topArea .lessontitle{top: 10px; left: 20px; width: 80%;}
.topArea .lessontitle > div{position: absolute;}
.topArea .lessontitle .num{
  font-family: 'BinggraeⅡ_Bold';
  font-size: 36px;
  color: #478300;
  width: 60px;
  left: -20px;
  text-align: right;
  letter-spacing: -2.5px;
}
.topArea .lessontitle .slish{
  width: 1px;
  height: 41px;
  background-color: #838383;
  margin: 0 8px;
  margin-top: 9px;
  left: 44px;
}
.topArea .lessontitle .text{
  font-family: 'BinggraeⅡ';
  font-size: 33.6px;
  color: #478300;
  font-weight:bolder;
  left: 62px;
}
.topArea .contitle{
  background: url(../img/contitle.png) no-repeat right top;
  width: 218px;
  height: 56px;
  top: 10px;
  right: 20px;
}
.topArea .subtitle{position: absolute; top: 58px; left: 72px;}
.topArea .subtitle > div{display: inline-block; vertical-align: top;}
.topArea .subtitle .label{
  border-left: #8a8c8d;
  background-color: #8a8c8d;
  width: 81px;
  font-family: 'NanumGothic';
  font-size: 19.2px;
  text-align: center;
  color: #fff;
  letter-spacing: -2.5px;
  padding: 5px 0;
}
.topArea .subtitle .text{
  font-size: 21px;
  color: #000;
  font-family: 'NanumGothicBold';
  margin: 4px 0 0 8px;
}
/* lesson css */
.lessonArea{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1280px;
  height: 720px;
}
.lessonArea .bigplay{
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85) url(../img/bigplay.png) no-repeat center;
  cursor: pointer;
}
.smallvidbg{background: url(../img/smallvidbg.png) no-repeat center top;}
.lessonArea .vid, .lessonArea .cover, .lessonArea .lenplangroup, .lessonArea .quizgroup, .lessonArea .summaryqgroup, .lessonArea .summarytgroup{width: 100%; height: 100%; position: absolute;}
.lessonArea .smallvid{
  top: 107px;
  left: 128px;
  width: 1025px;
  border-radius: 15px;
  height: auto;
}
.lessonArea .lenplangroup{background: url(../img/lenbg.png) no-repeat center top;}
.lessonArea .lenplangroup > div{position: relative; left: 0;}
.lessonArea .lenplangroup .leno{background: url(../img/leno.png) no-repeat left top; min-height: 118px; padding-left: 400px; width: 870px;}
.lessonArea .lenplangroup .lenc{background: url(../img/lenc.png) no-repeat left top; min-height: 118px; padding-left: 380px; width: 70%;}

.lessonArea .lenplangroup .leno .textgroup{position: relative; min-height: 46px; margin-bottom: 20px;}
.lessonArea .lenplangroup .leno .textgroup > div{display: inline-block; vertical-align: top;}
.lessonArea .lenplangroup .leno .textgroup .num{width: 45px; text-align: right; min-height: 46px;}
.lessonArea .lenplangroup .leno .textgroup .text{
  margin-left: 15px;
  font-size: 23.76px;
  color: #2a2a2a;
  font-family: 'KoPubDotumMedium';
  margin-top: 10px;
  width: 750px;
  height: auto;
}
.lessonArea .lenplangroup .lenc .text{
  width: 251px;
  border-radius: 10px;
  border: 2px solid #5da508;
  background-color: #fff;
  padding: 25px 0;
  font-size: 24.84px;
  color: #000000;
  font-family: 'KoPubDotumBold';
  text-align: center;
  margin-top: 10px;
  margin-left: 30px;
  display: inline-block;
  vertical-align: top;
  word-break: keep-all;
}
.lessonArea .quizgroup .intro{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/quiz/quizintrobg.png) no-repeat center;
}
.lessonArea .quizgroup .intro .start{
  width: 255px;
  height: 79px;
  background: url(../img/quiz/start.png) no-repeat center;
  position: relative;
  top: 460px;
  margin: 0 auto;
  cursor: pointer;
}
.lessonArea .quizgroup .quizarea{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.lessonArea .quizgroup .quizarea .left{width: 640px; height: 100%;}
.lessonArea .quizgroup .quizarea .right{
  width: calc(100% - 573px);
  height: 100%;
  position: absolute;
  top: 0;
  left: 573px;
  background: url(../img/quiz/qbgs.png) no-repeat left top;
}
.lessonArea .quizgroup .quizarea .righ div{
  outline: solid;
}
.lessonArea .quizgroup .quizarea .right .top{
  position: absolute;
  top: 69px;
  left: 67px;
  width: 90%;
  min-height: 100px;
}
.lessonArea .quizgroup .quizarea .right .top .qnum{
  font-family: 'SCDream6';
  font-size: 5em;
  color: #fff;
  letter-spacing: -4.5px;
  position: absolute;
  top: -10px;
  left: 10px;
  width: 150px;
  text-align: right;
}
.lessonArea .quizgroup .quizarea .right .top .qtitle{
  position: absolute;
  top: 105px;
  font-family: 'SCDream6';
  font-size: 30px;
  color: #2d2d2d;
  letter-spacing: -2.5px;
  margin-left: 60px;
  word-break: keep-all;
  width: calc(100% - 75px);
}
.lessonArea .quizgroup .quizarea .right .top .titlebol{
  width: 112px;
  height: 114px;
  position: absolute;
  top: -8px;
  left: 33px;
}
.lessonArea .quizgroup .quizarea .right .middle{position: absolute; top: 290px; left: 87px;}
.lessonArea .quizgroup .quizarea .right .middle .select{position: relative; cursor: pointer; margin-bottom: 10px;}
.lessonArea .quizgroup .quizarea .right .middle .select > div:not(.check, .qimg){display: inline-block; vertical-align: top;}
.lessonArea .quizgroup .quizarea .right .middle .select .num{
  width: 68px;
  height: 30px;
  border-radius: 15px;
  position: relative;
  margin-right: 10px;
}
.lessonArea .quizgroup .quizarea .right .middle .select .qimg{height: 140px; margin-left: 30px;}
.lessonArea .quizgroup .quizarea .right .middle .select .num.answernumh{background-color: #b4d31c; border-radius: 15px;}
.lessonArea .quizgroup .quizarea .right .middle .select .num .numobj, .lessonArea .quizgroup .quizarea .right .bottom .answernum .text{
  position: absolute;
  top: 0;
  right: 0;
  width: 21px;
  height: 21px;
  border: 2px solid #1b1b1b;
  border-radius: 50%;
  text-align: center;
  color: #2d2d2d;
  font-family: 'SCDream6';
  font-size: 1.05em;
}
.lessonArea .quizgroup .quizarea .right .middle .select .num .numobj{top: 3px; margin-right: 3px;}
.lessonArea .quizgroup .quizarea .right .middle .select .num.answernumh .numobj{background-color: #000; color: #fff;}
.lessonArea .quizgroup .quizarea .right .middle .select .num.answernumh .text{
  position: absolute;
  left: 5px;
  font-family: 'SCDream6';
  font-size: 18px;
  color: #1b1b1b;
}
.lessonArea .quizgroup .quizarea .right .middle .select .text.answertexth{color: #428a00; font-weight: bold;}
.lessonArea .quizgroup .quizarea .right .middle .select .text{font-family: 'KoPubDotumMedium'; font-size: 25px; color: #2d2d2d; margin-top: 2px;}
.lessonArea .quizgroup .quizarea .right .middle .check{
  background: url(../img/quiz/check.png) no-repeat center;
  width: 37px;
  height: 29px;
  position: absolute;
  bottom: 8px;
  left: 38px;
  display: none;
}

.lessonArea .quizgroup .quizarea .right .bottom{
  position: absolute;
  bottom: -300px;
  left: 67px;
  width: 640px;
  height: 255px;
  background-color: rgba(0, 0, 0, 0.1)
}

.lessonArea .quizgroup .quizarea .right .bottom .label{
  width: 97px;
  height: 41px;
  background-color: #5e5e5e;
  font-family: 'KoPubDotumBold';
  font-size: 25px;
  color: #fff;
  line-height: 42px;
  text-indent: 30px;
}
.lessonArea .quizgroup .quizarea .right .bottom > div{position: absolute; left: 0;}
.lessonArea .quizgroup .quizarea .right .bottom .answernum{top: 23px;}
.lessonArea .quizgroup .quizarea .right .bottom .answertext{top: 73px;}
.lessonArea .quizgroup .quizarea .right .bottom > div > div{display: inline-block; vertical-align: top;}
.lessonArea .quizgroup .quizarea .right .bottom .answernum .text{top: 8px; left: 110px;}
.lessonArea .quizgroup .quizarea .right .bottom .answertext .text{
  position: absolute;
  top: 8px;
  left: 110px;
  font-size: 25px;
  font-family: 'KoPubDotumMedium';
  width: 525px;
  word-break: keep-all;
}
.lessonArea .quizgroup .quizarea .right .bottom .answertext .text em{font-style: normal; color: #cc3300;}
.lessonArea .quizgroup .quizarea .right .hint, .lessonArea .quizgroup .quizarea .right .nextquiz, .lessonArea .quizgroup .quizarea .right .result{
  position: absolute;
  bottom: 205px;
  right: 10px;
  width: 156px;
  height: 41px;
  cursor: pointer;
  display: none;
}
.lessonArea .quizgroup .quizarea .right .hint{ display: block;}
.lessonArea .quizgroup .quizarea .right .nextquiz{display: none; background: url(../img/quiz/next.png) no-repeat center;}
.lessonArea .quizgroup .quizarea .right .hint{background: url(../img/quiz/hint.png) no-repeat center;}
.lessonArea .quizgroup .quizarea .right .result{background: url(../img/quiz/result.png) no-repeat center; bottom: 30px;}
.lessonArea .quizgroup .quizarea .right .nextquiz:hover, .lessonArea .quizgroup .quizarea .right .nextquiz:focus{background: url(../img/quiz/nexto.png) no-repeat center;}
.lessonArea .quizgroup .quizarea .right .hint:hover, .lessonArea .quizgroup .quizarea .right .hint:focus{background: url(../img/quiz/hinto.png) no-repeat center;}
.lessonArea .quizgroup .quizarea .right .result:hover, .lessonArea .quizgroup .quizarea .right .result:focus{background: url(../img/quiz/resulto.png) no-repeat center;}
.lessonArea .quizgroup .quizarea .alert{
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4) url(../img/quiz/alert.png) no-repeat 765px center;
  z-index: 10;
  opacity: 0;
}
.lessonArea .quizgroup .quizarea .hintpop{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4) url(../img/quiz/hintpopbg.png) no-repeat center;
  z-index: 10;
  display: none;
}
.lessonArea .quizgroup .quizarea .hintpop .img{
  position: absolute;
  top: 133px;
  left: 176px;
  width: 928px;
  height: 493px;
  overflow: hidden;
}
.lessonArea .quizgroup .quizarea .hintpop .close{
  width: 31px;
  height: 31px;
  position: absolute;
  top: 90px;
  right: 175px;
  background: url(../img/quiz/hintclose.png) no-repeat center;
  transition: transform .8s ease-in-out;
  cursor: pointer;
}
.lessonArea .quizgroup .quizarea .hintpop .close:hover, .lessonArea .quizgroup .quizarea .hintpop .close:focus{transform: rotate(360deg);}
.lessonArea .quizgroup .quizarea .resultpop{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4) url(../img/quiz/resultbg.png) no-repeat center;
  z-index: 10;
  display: none;
}
.lessonArea .quizgroup .quizarea .resultpop .resultanswerbol{
  position: relative;
  top: 350px;
  margin: 0 auto;
  width: 211px;
  height: 87px;
}
.lessonArea .quizgroup .quizarea .resultpop .resultanswerbol > div{
  width: 48%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
}
.lessonArea .quizgroup .quizarea .resultpop .resultanswerbol .rab_1{margin-right: 8px;}
.lessonArea .quizgroup .quizarea .resultpop .retryquiz{
  width: 156px;
  height: 41px;
  position: relative;
  top: 393px;
  margin: 0 auto;
  background: url(../img/quiz/retry.png) no-repeat center;
  cursor: pointer;
}
.lessonArea .quizgroup .quizarea .resultpop .retryquiz:hover, .lessonArea .quizgroup .quizarea .resultpop .retryquiz:focus{background: url(../img/quiz/retryo.png) no-repeat center;}
.lessonArea .summaryqgroup{
  background: url(../img/summarybg.png) no-repeat center;
}
.lessonArea .summaryqgroup .stoparea{
  position: relative;
  top: 105px;
  text-align: center;
}
.lessonArea .summaryqgroup .stoparea > div{
  display: inline-block;
  vertical-align: top;
  letter-spacing: -2px;
  width: 220px;
  padding: 4px 0;
  background-color: #659134;
  color: #fff;
  font-size: 21px;
  font-family: 'KoPubDotumBold';
  margin: 0 75px;
  border-radius: 10px;
}
.lessonArea .summaryqgroup .smiddlearea{
  position: relative;
  top: 105px;
  text-align: center;
}
.lessonArea .summaryqgroup .smiddlearea .simg{
  display: inline-block;
  vertical-align: top;
  width: 220px;
  height: 153px;
  margin: 0 75px;
  border: 1px solid rgb(232, 232, 232);
  border-radius: 10px;
  margin-top: 5px;
}
.lessonArea .summaryqgroup .sbottomarea{
  position: relative;
  top: 280px;
  text-align: center;
}
.lessonArea .summaryqgroup .sbottomarea > div{
  width: 230px;
  height: 181px;
  border: 7px solid #50603c;
  background-color: #fff;
  border-radius: 10px;
  display: inline-block;
  vertical-align: top;
  margin: 0 52px;
  font-size: 23px;
  font-family: 'KoPubDotumBold';
  color: #363636;
  text-align: left;
  padding: 10px;
  word-break: keep-all;
  letter-spacing: -2px;
}
.lessonArea .summaryqgroup .sbottomarea > div > em{
  font-style: normal;
  color: #cc3300;
}
.lessonArea .summaryqgroup .linearea{
  position: absolute;
  top: 329px;
  left: 153px;
  width: 974px;
  height: 150px;
  text-align: center;
}
.lessonArea .summaryqgroup .linearea > div{
  background-color: #363636;
  border-radius: 50%;
  border: 4px solid #9b9b9b;
  width: 24px;
  height: 24px;
  position: absolute;
  cursor: pointer;
}
.lessonArea .summaryqgroup .linearea .tObj{
  top: 0px;
}
.lessonArea .summaryqgroup .linearea .bObj{
  bottom: 0px;
}
.lessonArea .summaryqgroup > .linearea > .tObj.active, .lessonArea .summaryqgroup > .linearea > .bObj.active{
  background-color: #cc3300;
}
.lessonArea .summaryqgroup > .linearea > .tObj.noneclick, .lessonArea .summaryqgroup > .linearea > .bObj.noneclick{
  background-color: #919392;
  border: 4px solid #c6c8c7;
}
.lessonArea .summaryqgroup .linearea .tObj_1, .lessonArea .summaryqgroup .linearea .bObj_1{
  left: 100px;
}
.lessonArea .summaryqgroup .linearea .tObj_2, .lessonArea .summaryqgroup .linearea .bObj_2{
  left: 470px;
}
.lessonArea .summaryqgroup .linearea .tObj_3, .lessonArea .summaryqgroup .linearea .bObj_3{
  left: 845px;
}
.lessonArea .summaryqgroup .slineanswerbol{
  position: absolute;
  top: 309px;
  left: 157px;
}
.lessonArea .summaryqgroup .slineanswerbol > div{
  width: 67px;
  height: 74px;
  position: absolute;
  display: none;
}
.lessonArea .summaryqgroup .slineanswerbol .sab_1{left: 80px;}
.lessonArea .summaryqgroup .slineanswerbol .sab_2{left: 450px;}
.lessonArea .summaryqgroup .slineanswerbol .sab_3{left: 825px;}
.lessonArea .summaryqgroup .alert{
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4) url(../img/quiz/alert.png) no-repeat center;
  z-index: 10;
  opacity: 0;
}
.lessonArea .summaryqgroup #container{
  position: absolute;
  top: 333px;
  left: 257px;
  width: 769px;
  height: 142px;
}
.lessonArea .summaryqgroup #container svg{
  left: 240px;
  width: 100%;
  height: 100%;
}
.lessonArea .summaryqgroup #container svg{
  top: 40px;
  left: 248px;
}
.lessonArea .summaryqgroup #container svg line{
  position: absolute;
  cursor: pointer;
}
.lessonArea .summaryqgroup .showanswer{
  background: url(../img/showanswer.png) no-repeat center;
  width: 86px;
  height: 71px;
  position: absolute;
  bottom: 30px;
  right: 25px;
  cursor: pointer;
}
.lessonArea .summaryqgroup .showanswer:hover{
  background: url(../img/showanswero.png) no-repeat center;
}
.lessonArea .summaryqgroup .answrpop{
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4) url(../img/sqbg.png) no-repeat center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: none;
}
.lessonArea .summaryqgroup .answrpop > div:not(.close){
  transform: scale(0.65);
}
.lessonArea .summaryqgroup .answrpop .stoparea{
  top: 185px;
}
.lessonArea .summaryqgroup .answrpop .smiddlearea{
  top: 147px;
}
.lessonArea .summaryqgroup .answrpop .linearea{
  top: 312px;
}
.lessonArea .summaryqgroup .answrpop .sbottomarea{
  top: 197px;
}
.lessonArea .summaryqgroup .answrpop .slineanswerbol{
  top: 325px;
  left: 324px;
}
.lessonArea .summaryqgroup .answrpop #container2{
  position: absolute;
  top: 316px;
  left: 257px;
  width: 769px;
  height: 142px;
}
.lessonArea .summaryqgroup .answrpop #container2 svg{
  left: 240px;
  width: 100%;
  height: 100%;
}
.lessonArea .summaryqgroup .answrpop #container2 svg{
  top: 40px;
  left: 248px;
}
.lessonArea .summaryqgroup .answrpop #container2 svg line{
  position: absolute;
  cursor: pointer;
}
.lessonArea .summarytgroup{
  background: url(../img/stbg.png) no-repeat left top;
}
.lessonArea .summarytgroup .textarea{
  position: absolute;
  top: 100px;
  left: 540px;
  width: 700px;
  height: 600px;
}
.lessonArea .summarytgroup .textarea .packagebox{
  padding-left: 150px;
  min-height: 118px;
  margin-bottom: 10px;
}
.stguideline{
  width: 700px;
  height: 1px;
  background-color: rgb(223, 223, 223);
  margin: 30px 0;
}
.lessonArea .summarytgroup .textarea .sttitle{
  font-family: 'KoPubDotumBold';
  font-size: 30px;
  color: #5da508;
}
.lessonArea .summarytgroup .textarea .sttext{
  font-family: 'KoPubDotumMedium';
  font-size: 23px;
  color: #2a2a2a;
  background: url(../img/stblit.png) no-repeat left 11px;
  padding-left: 13px;
  margin-top: 5px;
  margin-bottom: 25px;

}

/* common bottom css */
.bottomArea{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 47px;
  background-color: #1a1919;
  text-align: center;
  z-index: 10;
}
.bottomArea > div{height: 100%; position: relative;; top: 0; display: inline-block; vertical-align: top; outline: none;}
.bottomArea > div:not(.bottomArea .logo, .bottomArea .time, .bottomArea .movepage){cursor: pointer;}
.bottomArea .logo{background: url(../img/controler/logo.png) no-repeat center; width: 133px;}
.bottomArea .map{background: url(../img/controler/map.png) no-repeat center; width: 30px; margin: 0 15px;}
.bottomArea .map .overbubble{
  position: absolute;
  width: 120px;
  height: auto;
  padding: 5px;
  background-color: #fff;
  border: 1px solid rgb(171, 171, 171);
  top: -35px;
  left: -50px;
  display: none;
}
.bottomArea .progress{
  height: 10px;
  width: 441px;
  background-color: #6a6a6a;
  border-radius: 15px;
  top: 18px;
}
.bottomArea .progress .overbubble{
  position: absolute;
  width: 140px;
  height: auto;
  padding: 5px;
  background-color: #fff;
  border: 1px solid rgb(171, 171, 171);
  top: -53px;
  left: 145px;
  display: none;
}
.bottomArea .progress .over{
  background: url(../img/controler/progressbarbg.png) no-repeat -10px top;
  width: 0%;
  height: 100%;
  background-size: 110% 100%;
  border-radius: 15px;
  float: left;
}
.bottomArea .progress .over .point{
  background: url(../img/controler/point.png) no-repeat center;
  width: 21px;
  height: 21px;
  float: right;
  margin-top: -6px;
  margin-right: -8px;
}
.bottomArea .time{
  color: #fff;
  font-family: 'NanumGothicBold';
  font-size: 14.4px;
   margin: 0 15px;
}
.bottomArea .time > div{
  letter-spacing: 0.5px;
  display: inline-block;
  vertical-align: top;
  margin-top: 16px;
}
.bottomArea .time .tottime{color: #6a6a6a; margin-left: 5px;}
.bottomArea .play{background: url(../img/controler/play.png) no-repeat center; width: 25px;}
.bottomArea .pause{background: url(../img/controler/pause.png) no-repeat center; width: 25px;}
.bottomArea .replay{background: url(../img/controler/replay.png) no-repeat center; width: 25px;}
.bottomArea .script{background: url(../img/controler/script.png) no-repeat center; width: 25px;}
.bottomArea .play .overbubble, .bottomArea .pause .overbubble, .bottomArea .replay .overbubble, .bottomArea .script .overbubble{
  position: absolute;
  width: 100px;
  height: auto;
  padding: 5px;
  background-color: #fff;
  border: 1px solid rgb(171, 171, 171);
  top: -35px;
  left: -45px;
  display: none;
}
.bottomArea .replay .overbubble{width: 120px; left: -55px;}
.bottomArea .script .overbubble{
  width: 70px;
  left: -30px;
}
.bottomArea .volumeon{background: url(../img/controler/volumeon.png) no-repeat center; width: 25px;}
.bottomArea .volumeoff{background: url(../img/controler/volumeoff.png) no-repeat 5px 15px; width: 25px;}
.bottomArea .volumeon .overbubble, .bottomArea .volumeoff .overbubble{
  position: absolute;
  width: 80px;
  height: auto;
  padding: 5px;
  background-color: #fff;
  border: 1px solid rgb(171, 171, 171);
  top: -35px;
  left: -30px;
  display: none;
}
.volumeon:hover, .volumeon:focus{background: url(../img/controler/volumeono.png) no-repeat center;}
.volumeoff:hover, .volumeoff:focus{background: url(../img/controler/volumeoffo.png) no-repeat 5px 15px;}
.bottomArea .volumebar{
  width: 80px;
  height: 8px;
  background-color: #6a6a6a;
  border-radius: 15px;
  top: 19px;
  margin: 0 5px;
}
.bottomArea .volumebar .overbubble{
  position: absolute;
  width: 110px;
  height: auto;
  padding: 5px;
  background-color: #fff;
  border: 1px solid rgb(171, 171, 171);
  top: -53px;
  left: -20px;
  display: none;
}
.bottomArea .volumebar .over{
  background-color: #fff;
  width: 0%;
  height: 100%;
  border-radius: 15px;
  float: left;
}
.bottomArea .movepage{margin-left: 10px;}
.bottomArea .movepage > div{display: inline-block; vertical-align: top; height: 100%;}
.bottomArea .movepage > div:not(.bottomArea .movepage .curp, .bottomArea .movepage .slish, .bottomArea .movepage .totp){cursor: pointer;}
.bottomArea .movepage .prev{background: url(../img/controler/prev.png) no-repeat center; width: 41px;}
.bottomArea .movepage .prev .overbubble{
  position: absolute;
  width: 90px;
  height: auto;
  padding: 5px;
  background-color: #fff;
  border: 1px solid rgb(171, 171, 171);
  top: -35px;
  left: -30px;
  display: none;
}
.bottomArea .movepage .curp{
  color: #fff;
  font-family: 'NanumGothicBold';
  font-size: 25.92px;
  margin-left: 5px;
  line-height: 49px;
}
.bottomArea .movepage .slish{
  width: 1px;
  height: 14px;
  background-color: #6a6a6a;
  margin: 0 3px;
  margin-top: 18px;
}
.bottomArea .movepage .totp{
  color: #6a6a6a;
  font-family: 'NanumGothicBold';
  font-size: 19.44px;
  line-height: 53px;
}
.bottomArea .movepage .next{background: url(../img/controler/next.png) no-repeat center; width: 41px; margin-left: 5px;}
.bottomArea .movepage .next .overbubble{
  position: absolute;
  width: 90px;
  height: auto;
  padding: 5px;
  background-color: #fff;
  border: 1px solid rgb(171, 171, 171);
  top: -35px;
  left: 100px;
  display: none;
}
.index{
  position: absolute;
  top: 300px;
  left: 0px;
  width: 49px;
  height: 114px;
  cursor: pointer;
  z-index: 11;
  background: url(../img/indexopen.png) no-repeat;
}
.indexPop{
  position: absolute;
  top: 130px;
  left: -500px;
  width: 227px;
  height: 485px;
  background-color: #1e1e1e;
  z-index: 11;
}
.indexPop .mmenu{
  font-family: 'SCDream5';
  font-size: 21px;
  color: #c6c6c6;
  text-indent: 25px;
  margin-top: 15px;
  cursor: pointer;
}
.indexPop .mmenu.active{cursor: default;}
.indexPop .mmenu.active, .indexPop .mmenu:hover, .indexPop .mmenu:focus{color: #20ae24;}
.indexPop .smenu{
  font-family: 'KoPubDotumMedium';
  font-size: 17px;
  color: #969595;
  text-indent: 30px;
  margin-top: 5px;
  cursor: pointer;
  height: 28px;
  line-height: 31px;
}
.indexPop .smenu.active{cursor: default;}
.indexPop .smenu.active, .indexPop .smenu:hover, .indexPop .smenu:focus{background: url(../img/smenuo.png) no-repeat; color: #fff; }
.indexPop .close{
  cursor: pointer;
  position: absolute;
  top: 180px;
  right: -49px;
  width: 49px;
  height: 114px;
  background: url(../img/indexclose.png) no-repeat;
}

.scriptPop{
  display: none;
  position: absolute;
  bottom: 47px;
  left: 253px;
  background: rgba(0, 0, 0, 0.85) url(../img/controler/scriptbgicon.png) no-repeat 15px 9px;
  width: 782px;
  height: 83px;
  z-index: 11;
}
.scriptPop .textarea{
  position: absolute;
  top: 35px;
  left: 20px;
  width: calc(100% - 60px);
  height: 40px;
}
.scriptPop .close{
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  background: url(../img/controler/scriptclose.png) no-repeat center;
  transition: transform .8s ease-in-out;
  cursor: pointer;
}
.scriptPop .close:hover, .scriptPop .close:focus{transform: rotate(360deg);}
.scriptPop .textarea .narrname, .scriptPop .textarea .narrtext{
  font-size: 12px;
  color: #fff;
  display: inline-block;
  vertical-align: top;
}
.scriptPop .textarea .narrtext{
  margin-left: 5px;
  word-break: keep-all;
  width: calc(100% - 60px);
  height: 34px;
  overflow: hidden;
  overflow-y: auto;
}
.mapbg{
  display: none;
  z-index: 12;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4) url(../img/mapbg.png) no-repeat center;
}
.mapbg .textgroup{
  font-family: 'SCDream6';
  font-size: 24px;
  color: #1a1919;
  position: absolute;
  top: 125px;
  left: 315px;
  width: auto;
  height: auto;
}
.mapbg .textgroup > div{display: inline-block; vertical-align: top;}
.mapbg .textgroup .alignR{margin-left: 100px;}
.mapbg .textgroup .maplessontitle{
  width: 285px;
  border-radius: 10px;
  text-indent: 30px;
  margin-bottom: 2px;
  padding: 4px 0 5px 0;
}
.mapbg .textgroup .active{
  background-color: #50603c;
  color: #fff;
}
.mapbg .close, .summaryqgroup .answrpop .close{
  position: absolute;
  top: 115px;
  right: 150px;
  width: 30px;
  height: 30px;
  background: url(../img/mappopclose.png) no-repeat center;
  transition: transform .8s ease-in-out;
  cursor: pointer;
}
.summaryqgroup .answrpop .close{
  top: 105px;
  right: 185px;
}
.mapbg .close:hover, .mapbg .close:focus, .summaryqgroup .answrpop .close:hover, .summaryqgroup .answrpop .close:focus{transform: rotate(360deg);}