@charset "utf-8";

@font-face {
  font-family: 'CenturyGothicBold';
  font-style: normal;
  src: url('../fonts/CenturyGothicBold.eot'); /* IE9 Compat Modes */
  src: local('CenturyGothicBold'), local('CenturyGothicBold'),
       url('../fonts/CenturyGothicBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/CenturyGothicBold.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/CenturyGothicBold.woff') format('woff'), /* Modern Browsers */
       url('../fonts/CenturyGothicBold.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/CenturyGothicBold.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'CenturyGothic';
  font-style: normal;
  src: url('../fonts/CenturyGothic.eot'); /* IE9 Compat Modes */
  src: local('CenturyGothic'), local('CenturyGothic'),
       url('../fonts/CenturyGothic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/CenturyGothic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/CenturyGothic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/CenturyGothic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/CenturyGothic.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
.century{ font-family: 'CenturyGothicBold' !important; }
.centuryR{ font-family: 'CenturyGothic' !important; }
.quiz-content{ width: 480px; margin: 0 auto; padding-top: 60px; height: 33rem; box-sizing: border-box; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
@media (max-width: 480px) {
    .quiz-content{ height: 100vh; }
}
.quiz{ min-height: 100vh; position: relative; }
.quizWrap{ padding: 0px 50px; box-sizing: border-box; }
.quizPos{ position: relative; height: 420px; }
.pagePos{ position: relative; }
#quiz01_01 .quizArea{ border-bottom: 1px solid #d4d4d4; }
.quizArea .ex{ position: absolute; }
.quizArea .ex span{ display: inline-block; text-align: center; font-weight: 900; margin-right: 3px; position: relative; background-color: #fff;  box-sizing: border-box; }
.quizArea .ex span:after{ content: '';display: block; position: absolute;  bottom: -10px; right: -7px; z-index: -1; }
.quizArea .ex01{ top: 0px; left: 6%; }
.quizArea .ex02{ top: 19.5%; right: 6%; }
.quizArea .ex03{ top: 37%; left: 0px; }
.quizArea .ex04{ top: 57%; left: 0px; }    
.quizArea .ex05{ bottom: 6%; right: 0px; }
.quizArea .ex01 span{ width: 52px; height: 52px; line-height: 52px; border: 3px solid #b1c170; color: #9cb459; font-size: 34.5px; }
.quizArea .ex01 span:after{ width: 52px; height: 52px; background-color: #9cb459;}
.quizArea .ex02 span{ width: 47px; height: 47px; line-height: 47px;  border: 3px solid #91c7ec; color: #5aa1d1; font-size: 31.5px; }
.quizArea .ex02 span:after{ width: 47px; height: 47px; background-color: #559ecf;}
.quizArea .ex03 span{ width: 58px; height: 58px; line-height: 58px;  border: 3px solid #f3a7c2; color: #eb92b1; font-size: 39.16px; }
.quizArea .ex03 span:after{ width: 58px; height: 58px; background-color: #ee81a7;}
.quizArea .ex04 span{ width: 57px; height: 57px; line-height: 57px; border: 3px solid #83c7d6; color: #58bed4; font-size: 32.95px; }
.quizArea .ex04 span:after{ width: 57px; height: 57px; background-color: #6dc6d9;}
.quizArea .ex05 span{ width: 54px; height: 54px; line-height: 54px;  border: 3px solid #a4b6f1; color: #8198e3; font-size: 33.75px; }
.quizArea .ex05 span:after{ width: 54px; height: 54px; background-color: #8198e3;}
.timeArea{ padding-top: 45px; } 
.timeArea p { font-size: 27px; line-height: 33.75px; font-weight: 700; text-align: center; letter-spacing: -0.05em; margin-bottom: 20px; }
.timeArea p > span{ display: block; font-size: 22.5px; }
.timeArea p > span > span{ font-size: 22.5px; }

.clock{ position: absolute; top: 50%; transform: translateY(-50%); right: -18px; width: 36px; height: 41px; background: url('../images/quiz/clock.png')no-repeat; background-size: cover; z-index: 555; }
.second{ width: 100%; margin: 10px auto 0; }
.second span{ display: inline-block; font-size: 18px; color: #333; }
.sec01{ text-align: left; }
.sec02{ text-align: right; }
.quizStart{ margin-top: 25px; }
.quizStart p{ font-size: 18px; color: #333; line-height: 33.75px; letter-spacing: -0.05em; text-align: center;  }
.quizStartBtn{ width: 50%; height: 74px; line-height: 74px; border-radius: 37px; border: 10px solid #f0adc5; text-align: center; font-weight: 700;  margin: 15px auto; box-shadow: 3px 4px 10px 0px rgba(0,0,0,0.48); box-sizing: border-box; }
.quizStartBtn a{ display: block; line-height: 54px; font-size: 24px; }

.page{ font-size: 18px; }
#quiz01_01 .page{ position: absolute; bottom: 20px; right: 0; }
.quiz01_01{ background-color: rgba(255,255,255,0.72); }
.quiz01_01 .quiz-content{  background-color: #fff; }
.quiz01_01_answer .realbar{ animation: example linear 120s; -moz-animation: example linear 120s; -webkit-animation: example linear 120s; }


@media (max-width: 480px) {
    #quiz01_01.quiz{ position: relative; height: 100vh; }
    #quiz01_01.quiz .quiz-content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .quiz-content{ width: 100%; }
    .quizWrap{ width: 100%; margin: 0; padding: 0 5%; }
}
@media (max-width: 440px) {
    .quiz-content{ padding-top: 50px; }
    .quizPos{ height: 300px; }
    .quizArea .ex01{ left: 5px; }
    .quizArea .ex span{ width: 43px !important; height: 43px !important; line-height: 37px !important; font-size: 30px !important; }
    .quizArea .ex span:after{ width: 43px !important; height: 43px !important; }
    .quizArea .ex02{ right: 0px; }
    .clock{ width: 30px; height: 34px; }
    .quizStart p{ font-size: 17px; }
    .quizStartBtn{ height: 55px; line-height: 55px; border-radius: 30px; border: 6px solid #f0adc5; }
    .quizStartBtn a{ display: block; line-height: 43px; font-size: 21px; }
    .timeArea{ padding-top: 30px; } 
    .quizStart { margin-top: 10px; }
    .timeArea p > span > span{ font-size: 20px; }
}
@media (max-width: 380px) {    
    .quizPos{ height: 270px; }
    .quizArea .ex span{ width: 40px !important; height: 40px !important; line-height: 34px !important; font-size: 28px !important; }
    .quizArea .ex span:after{ width: 40px !important; height: 40px !important; }
    .timeArea p { font-size: 23px; line-height: 30px; margin-bottom: 5px; }
    .timeArea p > span{ font-size: 20px; }
     .timeArea{ padding-top: 15px; } 
    .quizStart { margin-top: 5px; }
    .quizStartBtn{ margin-top: 0px; }
    .second span{ font-size: 16px; }
    .quizStart p{ font-size: 15px; }
    .timeArea p > span > span{ font-size: 18px; }
}
@media (max-width: 320px) {    
    .quizPos{ height: 240px; }
    .quizArea .ex span{ width: 35px !important; height: 35px !important; line-height: 31px !important; font-size: 25px !important; }
    .quizArea .ex span:after{ width: 35px !important; height: 35px !important; }
    .timeArea p { font-size: 20px; line-height: 28px; margin-bottom: 5px; }
    .timeArea p > span{ font-size: 17px; }
     .timeArea{ padding-top: 10px; } 
    .quizStart { margin-top: 0px; }
    .quizStartBtn{ margin-top: 0px; }
    .second span{ font-size: 14px; }
    .quizStart p{ font-size: 13px; }

}


#quiz01_02 .timeArea p{ font-size: 30px; }
#quiz01_02 .wordInput{ padding-top: 18px; position: relative; }
.wordInput input{ width: 100%; height:  110px; line-height: 90px; line-height: 1; margin-bottom: 50px; border: 10px solid #f0adc5; box-sizing: border-box; text-align: center; font-size: 39.16px; font-weight: 900; color: #eb92b1; padding: 0 15px; outline: none; }
#quiz01_02 .page{ text-align: right; margin-bottom: 10px; }
@media (max-width: 440px) {
    #quiz01_02 .timeArea p{ font-size: 26px; }
    #quiz01_02 input{  height:  90px; line-height: 70px; }
}

.quizResult img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48% !important; }

.quiz02_01{ background-color: rgba(119,203,240,0.72); }
.quiz02_01 .quiz-content{ background: url('../images/quiz/quiz02lowBg.jpg')repeat top center; }
.quiz02_01_mid { background-color: rgba(120,158,239,0.72); }
.quiz02_01_mid .quiz-content{ background: url('../images/quiz/quiz02midBg.jpg')repeat top center; }
.quiz02_01_hig { background-color: rgba(76,112,196,0.72); }
.quiz02_01_hig .quiz-content{ background: url('../images/quiz/quiz02higBg.jpg')repeat top center; }

#quiz02 .quizArea .quizWrap{ padding: 150px 0 170px 0; text-align: center; position: relative; } 
#quiz02 .quizArea span{ display: inline-block; font-size: 88px; font-family: 'CenturyGothicBold'; font-weight: 700; text-shadow: 5px 9px 0px  rgba(23,117,160,0.37); color: #fff; }
#quiz02 .quizStartBtn{  background-color: #fff; border-color: #77cbf1; }
#quiz02 .time{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
#quiz02 .page{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
#quiz02 .quizStart{ margin-top: 68px; }
.choiceArea ul{ font-size: 0; letter-spacing: -4px; text-align: center; }
.choiceArea ul li{ display: inline-block; font-family: 'CenturyGothicBold'; font-size: 80px; height: 125px; width: calc((100% - 14px) / 2); height: 125px; line-height: 125px; margin-right: 14px; letter-spacing: 0; color: #4fa2d0; background-color: #fff; font-weight: 700; box-shadow: 3px 4px 5px 0px rgba(0,0,0,0.3); border-radius: 10px; }
.choiceArea ul li:last-child{ margin-right: 0; }
.choiceArea ul li.choice{ background-color: #b0b0b0; color: #fff !important; }

.choiceArea ul li.correct{ background-color: #5e9dfc;  color: #fff!important; }
 
.quiz02_01 .choiceArea ul li{ cursor: pointer; }

@media (max-width: 440px) {    
    #quiz02 .quizArea .quizWrap{ padding: 120px 0 100px 0; }
    #quiz02 .quizArea span{ font-size: 70px; }
    .choiceArea ul li{ font-size: 60px;  height: 110px; line-height: 110px;}
    .quiz02_01 .quiz-content{ padding-top: 0; }
}
@media (max-width: 400px) {    
    #quiz02 .quizArea .quizWrap{ padding: 90px 0 100px 0; }
    #quiz02 .quizStart { margin-top: 30px; }
}
@media (max-width: 320px) {
    #quiz02 .quizArea .quizWrap{ padding: 80px 0; }
    
}


/*디바이스에 따른 글자 크기*/
html{font-size:25px;min-width: 320px; width: 100%;margin: 0 auto; overflow-x: hidden; }
@media (min-width:480px){html{font-size:25px;}}
@media (min-width:440px) and (max-width:479px){html{font-size:23px;}}
@media (min-width:400px) and (max-width:439px){html{font-size:21px;}}
@media (min-width:361px) and (max-width:399px){html{font-size:19px;}}
@media (min-width:321px) and (max-width:360px){html{font-size:18px;}}
@media (min-width:0px) and (max-width:320px){html{font-size:17px;}}


.ct{ position: relative; min-height: 100vh;}
.ct img{ width: 100%; max-width: 100%; }
.ct-content{ width: 480px; position: absolute; top: 50%; left: 50%; padding-top: 60px; transform: translate(-50%, -50%); min-height: 33rem; box-sizing: border-box; }

@media (max-width: 480px) {
    .ct-content{ width: 100%; min-height: 100vh;}
}

/*
@media (max-width: 480px) {
    .ct-content{ top: 50%; transform: translateY(-50%); padding-top: 0; }
}
*/

.ct .choiceArea ul li{ font-size: 1rem; font-family: "NanumSquare_acR"; letter-spacing: -0.05em;  height: 5rem; line-height: 5rem; }
.selectView ul li{ cursor: pointer; }
.ct .quizWrap{ padding: 0 25px; }
.ct .quizWrap01{ padding: 0 2.4rem; }
.ct .quizArea{ position: relative; }
.quizQTop > span{ display: block; font-size: 1.28rem; line-height: 2rem; text-align: center;  font-family: "NanumSquare_acB"; word-break: keep-all;  }
.quizQTop .blank{ display: inline-block; width: 3.2rem; }
.quizQ{ margin: 1.2rem 0 0.5rem 0; font-size: 1rem; line-height: 1.6rem; letter-spacing: -0.05em; text-align: center; font-family: 'NanumSquare_acB'; word-break: keep-all; }
.quizQ span{ display: block; font-size: 1rem; }
.ct .quizStartBtn{ margin: 2.8rem auto 0; width: 50%; }
.ct .quizWrap01 .quizStartBtn{ width: 58%; }
.page, .time{ font-size: 0.72rem !important;   }

.ct .page{ position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.ct .time{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
@media (max-width: 480px) {
    .ct .quizStartBtn{ margin: 1rem auto 0; }
}
@media (max-width: 360px) {
    .ct .quizWrap{ padding: 0 15px; }
}

.ct .choiceArea ul li{ color: #333; }
.ct .resultView ul li{ width: 100%; height: auto; background-color: #5e9dfc; color: #fff; height: 6.2rem; line-height: 1.2rem; position: relative; }
.ct .resultView ul li .resultDesc{ position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); padding: 0 1rem; box-sizing: border-box; }
.ct .resultView ul li .resultDesc div{ font-size: 1rem; line-height: 1.2rem;  font-family: 'NanumSquare_acB';}
.ct .resultView ul li p{ font-size: 0.84rem; line-height: 1.2rem; font-family: 'NanumSquare_acB';}
.ct .resultView ul li p span{ display: block; font-family: 'NanumSquare_acB'; }

.ct .quizResult img{ left: 55%; top: 55%; }
.ct .quizResult .success img{ left: 50%; top: 65%; }


.ct02_01 { background-color: rgba(255,255,255,0.72); }
.ct02_01 .ct-content{ background-color: #fff; padding-top: 0; }
.ct02_01 .quizStartBtn{ border-color: #87baf9; }
.ct02_01 .quizResult img{ top: 38%; }
.ct02_01 .quizResult .success img{ left: 50%; top: 48%; }
.ct02_01 .quizQ{ margin-top: 0; }


.ct03 .quizStartBtn{ border-color: #ffdf81; background-color: #fff; }
.ct03 .wordInput input{ color: #ebb40b; }
.ct .wordInput input{ height: 4.4rem; line-height: 4.4rem; font-size: 2.4rem; border-color: #ffdf81;  outline: none; margin: 0; border-width: 0.4rem; }

.ct03_01{ background-color: rgba(255,223,129,0.72); }
.ct03_01 .ct-content{ background: url('../images/quiz/ct03_01_bg.jpg')repeat top center; }
.ct03_01 .quizQTop{ margin: 0 0 3rem; padding-top: 2.4rem; }
.ct03_01 .quizQTop span{ font-size: 1.4rem; }
.ct03_01 .quizArea .quizWrap { padding: 0 15%;  }
.ct03_01 .choiceArea { margin: 2.4rem 0 3rem; }

.ct03_01_result .choiceArea{ margin-bottom: 2rem; }
.ct03_01_result .quizStartBtn { margin-top: 0;}
.ct03_01 .resultDesc{margin-top: 0; }


@media (max-width: 380px) {
    .ct03_01 .ct-content{ padding-top: 2.4rem; }
    .ct03_01 .quizQTop{ padding-top: 30px; }
    .ct03_01 .quizResult img{ top: 40%; }
}
@media (max-width: 320px) {
    .ct03_01 .quizQTop{ margin: 0 0 3rem; }
    .ct03_01 .choiceArea { margin: 1.5rem 0 2rem; }
}

.ct03_02 { background-color: rgba(255,255,255,0.72); }
.ct03_02  .ct-content{ background-color: #fff; }
.ct03_02 .quizTop{ font-size: 0; letter-spacing: -4px; margin-bottom: 2rem; text-align: center; }
.ct03_02 .quizTop > span{ display: inline-block; width: calc((100% - 0.8rem) / 3); background: url('../images/quiz/ct03_02_wordbg.png')no-repeat; background-size: 100% auto; margin-right: 0.4rem; height: 5rem; line-height: 4.36rem; text-align: center; font-family: 'NanumSquare_acL'; vertical-align: top; }
.ct03_02 .quizTop > span > span{ position: relative; left: -0.16rem; font-size: 2rem; }
.ct03_02 .quizTop > span:last-child{ margin-right: 0; }
.ct03_02 .resultView ul li .resultDesc div{ font-size: 1.36rem; line-height: 1.5rem; }

.ct03_03 .quizTop{ margin: 1rem 0; }
.ct03_03 .wordChain{ font-size: 2.4rem; text-align: center; color: #ebb40b; }
.answerArea ul{ font-size: 0; letter-spacing: -4px; }
.answerArea ul li{ display: inline-block; width: 33.333%; padding: 0.72rem 0.4rem 0; box-sizing: border-box; }
.answerArea ul li span{ display: block; box-shadow: 3px 4px 8px 0px rgba(0,0,0,0.28); height: 4rem; line-height: 4rem; font-size: 1.68rem; font-family: 'NanumSquare_acL'; text-align: center; }
.answerArea ul li.choice span{ background-color: #b0b0b0; color: #fff !important; }
.answerArea ul li.correct span{ background-color: #5e9dfc;  color: #fff!important; }


.ct03_03 .quizTop > span > span { font-family: 'NanumSquare_acEB'; color: #ebb40b; }
.ct03_03 .quizStartBtn{ margin: 1.5rem auto 0; }
.ct03_03 .quizResult img{ top: 36%; left: 50%; }
.ct03_03 .quizResult .success  img{ top: 48%; left: 50%; }


@media (max-width: 380px) {
    .ct03_03 .ct-content{ padding-top: 2.4rem; }
    .ct03_03 .quizTop{ margin: 0.4rem 0; }
    .ct03_03 .quizQ{ margin: 0.6rem 0 0.3rem 0; }

}

.ct03_04 .quizTop{ margin-bottom: 0; }
.ct03_04 .quizQ{ margin: 0.5rem 0 1rem 0; }
.ct03_04 .quizResult img{ top: 76%; left: 57%; }
.ct03_04 .quizResult .success  img{ top: 84%; left: 50%; }
.ct03_04 .resultView{ margin-top: 1.8rem; }

.hintArea ul{ padding-left: 1.68rem; margin-top: 0.88rem; background: url('../images/quiz/hint.png')no-repeat left top; background-size: 1.2rem auto; }
.hintArea ul li span{ display: inline-block; font-size: 0.9rem; line-height: 1rem; letter-spacing: -0.05em;}
.hintArea ul li .hintTitle{ color: #6992ef; font-family: 'NanumSquare_acEB'; margin-right: 0.3rem; }
.hintArea ul li .hintDesc{ font-family: 'NanumSquare_acB';  }


@media (max-width: 380px) {
    .ct03_04 .resultView{ margin-top: 1.5rem; }
}
@media (max-width: 320px) {
    .ct03_04 .ct-content{ padding-top: 50px; }

}

.ct03_05 .quizStartBtn { border-color: #ffdf81; }

.ct04_01{ background-color: rgba(255,255,255,0.72); }
.ct04 .ct-content{ background-color: #fff; }
.ct04 .quizStartBtn { border-color: #f0adc5; background-color: #fff; }
.ct04_01 .quizWrap{ padding: 0 2rem; }
.ct04_01 .timeArea{ padding-top: 0.5rem; }
.ct04_01 .timeArea p{ margin-bottom: 0.8rem; }
.ct04_01 .timeArea p span{ font-size: 0.9rem; line-height: 1.35rem; }
.ct04_01 .quizStartBtn { margin: 0.5rem auto 0; }
.ct04_01 .quizStart{ margin-top: 0.3rem; }
.ct04_01 .realbar{ animation: example linear 20s; -moz-animation: example linear 20s; -webkit-animation: example linear 20s; }

#progressBar { width: 100%; margin: 0px auto; height: 0.8rem; background-color: #ebebeb; border-radius: 10px; }
#progressBar div { height: 0.8rem; box-sizing: border-box; position: relative; }
.realbar{ height: 0.8rem;line-height: 20px; background-color: #f0adc5;  border-radius: 0.4rem;  text-align: right; overflow: visible !important; animation: example linear 60s; width: 0%; -moz-animation: example linear 60s; -webkit-animation: example linear 60s; }
@keyframes example {
  from {width: calc(100% - 18px); }
  to {width: 0%;}
}
@-moz-keyframes example {
  from {width: calc(100% - 18px); }
  to {width: 0%;}
}

.clock{ position: absolute; top: 50%; transform: translateY(-50%); right: -18px; width: 1.44rem; height: 1.64rem; background: url('../images/quiz/clock.png')no-repeat; background-size: cover; z-index: 555; }

@media (max-width: 440px) {
    .ct04_01 .ct-content{ padding-top: 2rem; }
    .ct04_01 .quizArea .quizimg{ width: 90%; margin: 0 auto; }
}
@media (max-width: 320px) {
    .ct04_01 .quizArea .quizimg{ width: 83%; }
    .ct04_01 .quizArea .quizimg img{ width: 110%; max-width: 110%; position: relative; left: 50%; transform: translateX(-50%); }
    .ct04_01 .quizStartBtn { margin: 0 auto 0; }
    .ct04_01 .quizStart{ margin-top: 0; }
}

.ct04_01_Q{ background-color: rgba(240,175,197,0.72); }
.ct04_01_Q .ct-content{ background: url('../images/quiz/ct04_01_bg.jpg')repeat top center; }
.ct04_01_Q .quizArea{ padding-top: 4rem; }
.ct04_01_Q .quizQTop > span{ font-size: 1.44rem; color: #fff; }
.ct04_01_Q .choiceArea{ margin-top: 7rem; }
.ct04_01_Q .choiceArea ul li{ height: 6.2rem; position: relative; }
.ct04_01_Q .choiceArea ul li .choiceWrap{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
.ct04_01_Q .choiceArea ul li span{ display: block; font-size: 1rem; line-height: 1.4rem;  font-family: 'NanumSquare_acB'; }
.ct04_01_Q .quizStartBtn { margin: 2rem auto 0; }
.ct04_01_Q .quizResult .success  img{ top: 82%; left: 50%; }

@media (max-width: 440px) {
    .ct04_01_Q .choiceArea{ margin-top: 4rem; }
}

.ct04_04{ background-color: rgba(240,175,197,0.72); }
.ct04_04 .ct-content{ background: url('../images/quiz/ct04_01_bg.jpg')repeat top center; }
.ct04_04 .quizStartBtn { border-color:  #f0adc5; }
.ct04_04 .resultDesc{margin-top: 0; }
.ct04_04 .quizQTop span{ font-size: 1.44rem; color: #fff; }
.ct04_04 .quizQ{ color: #fff; }

.ct05 .quizStartBtn { border-color: #b79ceb; }
.ct05_vari3 .choiceArea ul li{ width: calc((100% - 28px) / 3); margin-right: 14px; padding: 0 0.5rem; word-break: keep-all; vertical-align: top; box-sizing: border-box; position: relative; }
.ct05_vari3 .choiceArea ul li:last-child{ margin-right: 0; }
.ct05_vari3 .choiceArea ul li span{ display: inline-block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; line-height: 1.3rem; }

.ct06_01{ background-color: rgba(173,201,95,0.72); }
.ct06_01 .ct-content{ background :url('../images/quiz/ct06_03_bg.jpg')repeat; }
.ct06 .quizStartBtn { border-color: #adc95f; background-color: #fff; margin-top: 2.8rem;}

.ct06 .quizQTop div{ font-size: 1rem; line-height: 1.6rem; letter-spacing: -0.05em; color: #fff; font-family: 'NanumSquare_acB';}  
.ct06_01 .quizQTop p{ font-size: 1.2rem; line-height: 1.6rem; letter-spacing: -0.05em; color: #fff; font-family: 'NanumSquare_acB'; word-break: keep-all; }  
.ct06 .quizQTop .quizKind{ margin-bottom: 0.7rem; }
.ct06_01 .quizQ{ color: #fff; margin: 1.5rem 0 1rem 0; } 
.ct06 .choiceArea ul li{ position: relative; }
.ct06 .choiceArea ul li .choiceWrap{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; font-size: 1rem; line-height: 1.4rem;  font-family: 'NanumSquare_acB'; padding: 0 0.5rem; box-sizing: border-box; }

.ct06_01 .quizResult img{ top: 40%; left: 55%; }
.ct06_01 .quizResult .success img{ top: 50%; left: 50%; }
.ct06_01 .resultView ul li, .ct06_03 .resultView ul li{ height: 6.2rem; }
.ct06_01 .resultView .resultDesc, .ct06_03 .resultView .resultDesc{ padding: 0 6%; box-sizing: border-box; }
.ct06_01 .resultView .resultDesc span, .ct06_03 .resultView .resultDesc span{ display: block; word-break: keep-all; font-size: 1rem; line-height: 1.3rem; letter-spacing: -0.05em; }

.ct06_01_result .quizStartBtn{  margin-top: 1.8rem; }


@media (max-width: 320px) {
    .ct06_01 .ct-content{ padding-top: 45px; }
    .ct06_01 .quizStartBtn { margin-top: 1.5rem; }

}



.ct06_03{ background-color: rgba(173,201,95,0.72); }
.ct06_03 .ct-content{ background :url('../images/quiz/ct06_03_bg.jpg')repeat; }
.ct06_03 .quizStartBtn{ margin-top: 1.8rem; }
.ct06_03 .quizQTop .quizKind{ margin-bottom: 1rem; }
.ct06_03 .quizQTop p{ line-height: 2rem; letter-spacing: -0.05em; text-align: center; color: #fff; font-family: 'NanumSquare_acB'; }
.ct06_03 .quizQTop p span{ display: block; font-size: 1.44rem; word-break: keep-all; }
.ct06_03 .quizQ{ color: #fff; margin: 1.6rem 0 2rem 0; } 
.ct06_03 .choiceArea ul li{ height: 6.2rem; }

.ct06_03 .quizResult img{ top: 40%; left: 55%; }
.ct06_03 .quizResult .success img{ top: 55%; left: 50%; }

@media (max-width: 380px) {
    .ct06_03 .ct-content{ padding-top: 45px; }
}
@media (max-width: 320px) {
    .ct06_03 .quizQTop .quizKind{ margin-bottom: 0.5rem; }
    .ct06_03 .quizQ{ margin: 1.5rem 0 2rem 0; } 
    .ct06_03 .choiceArea ul li{ height: 5rem; }
}

.ct06_03_02 .quizQTop p{ font-size: 3rem; font-family: 'NanumSquare_acEB'; }
.ct06_03_02 .quizQTop p span{ font-size: 1.3rem; font-family: 'NanumSquare_acR';  }
.ct06_03_02 .quizQ{ margin: 3rem 0 0.8rem 0; }
.ct06_03_02 .choiceArea ul li{ width: 100%;  margin-right: 0; height: 4rem; }
.ct06_03_02 .choiceArea ul li:first-child{ margin-bottom: 0.7rem; }
.ct06_03_02 .choiceArea ul li span{ display: block; font-size: 1rem; }

@media (max-width: 400px) {
    .ct06_03_02 .ct-content{ padding-top: 45px; }
}

.ct06_03_03_01{ background-color: rgba(255,255,255,0.72); }
.ct06_03_03_01 .ct-content{ background-color: #fff; }
.ct06_03_03_01 .quizTop > span{ display: inline-block; width: calc((100% - 0.72rem) / 4); background: url('../images/quiz/ct06_03_02_wordbg.png')no-repeat; background-size: 100% auto; margin-right: 0.22rem; height: 4rem; line-height: 3.4rem; text-align: center; font-family: 'NanumSquare_acL'; vertical-align: top; }
.ct06_03_03_01 .quizTop > span > span{ position: relative; left: -0.16rem; font-size: 1.92rem;font-family: 'NanumSquare_acEB'; color: #8cac34; }
.ct06_03_03_01 .quizTop > span:last-child{ margin-right: 0; }
.ct06_03_03_01 .answerArea ul li{ display: inline-block; width: 25%; padding: 0.72rem 0.2rem 0; box-sizing: border-box; }
.ct06_03_03_01 .answerArea ul li span{ height: 3.3rem; line-height: 3.3rem; }

.ct06_03_03_01 .resultView ul li { height: 4rem; }
.quizDesc{ color: #8cac34; text-align: center; font-family: 'NanumSquare_acEB'; margin-bottom: 1.8rem; }
.quizDesc span{ display: block; font-size: 1.28rem; line-height: 1.8rem; letter-spacing: -0.05em; }
.ct06_03_03_01 .quizQ{ margin: 1.7rem 0 4px 0; }
.ct06_03_03_01 .quizStartBtn{ margin-top: 4rem; }
.ct06_03_03_01 .quizResult img{ top: 42%; left: 55%; }
.ct06_03_03_01 .quizResult .success img{ top: 50%; left: 50%; }

@media (max-width: 320px) {
    .ct06_03_03_01 .ct-content{ padding-top: 2.4rem; }
    .ct06_03_03_01 .quizStartBtn{ margin-top: 4rem; }
}

.ct06_04_eng .quizQTop p span{ font-size: 1.2rem; text-align: left; word-break: keep-all; line-height: 1.6rem; }
.ct06_04_02 .quizQ { margin: 3rem 0 2rem 0; }

.pdtop{ padding-top: 2.4rem !important; }
.quizCommon{ background-color: rgba(255,255,255,0.72); }
.quizCommon .ct-content{ background-color: #fff; padding-top: 0; top: 0; transform: translate(-50%, 0); }
.quizCommon .quizWrap{ padding: 0 2rem; }

.quizCommon .quizStartBtnB{ width: 100%; border-color: #819cfa; margin: 0; }
.quizCommon .quizStartBtn{ width: 100%; border-color: #f40002; margin: 0; }
.quizCommon .quizStart { margin: 3.6rem auto 0; padding-top: 1rem;}

.quiz_daily_begin .quizStart { margin: 0 auto 2rem !important; padding-top: 0;}

@media (max-width: 400px) {
    .quizCommon .quizStart{ margin: 2rem auto 0; }
    .pdtop{ padding-top: 45px !important; }
    .quizStart{ margin: 1rem auto 0; padding-top: 0!important; }
    
}

.achieveTitle{ display: inline-block; padding-right: 1.8rem; padding-top: 0.6rem; background: url(../images/quiz/pencil.png)no-repeat right 0.1rem; background-size: 1.32rem auto; letter-spacing: -0.05em !important; }
.achieveTitle > span{ display: inline-block; background: url(../images/quiz/underline.png)repeat-x left bottom; padding-bottom: 0.2rem; } 
.achieveTitle span{  font-size: 1rem; line-height: 1.346rem;  font-family: 'NanumSquare_acB'; }
.f_blue{ color: #6a86eb;  }
progress{ width: 80%; height: 0.92rem; border-radius: 0.46rem; background-color: #ebebeb; vertical-align: middle; margin-top: 0.32rem; overflow: hidden; }
progress::-webkit-progress-bar{ height: 0.92rem; border-radius: 0.46rem; background-color: #ebebeb; }
progress::-webkit-progress-value{ border-bottom-left-radius: 0.46rem; border-top-left-radius:  0.46rem; }
progress::-moz-progress-bar{ height: 0.92rem; border-radius: 0.46rem; background-color: #ebebeb; }
progress::-moz-progress-value{ border-radius: 0.46rem; }

/* .ability_numc: 수리능력 
    .ability_math: 응용수리
    .ability_perc: 인지능력
    .ability_memo : 기억능력
    .ability_coms : 시사상식
    .ability_conc : 집중능력
*/
.ability_numc progress::-webkit-progress-value{ background-color: #77cbf1;  }
.ability_numc progress::-moz-progress-value{ background-color: #77cbf1;  }
.ability_math progress::-webkit-progress-value{  background-color: #87baf9;  }
.ability_math progress::-moz-progress-value{  background-color: #87baf9;  }
.ability_perc progress::-webkit-progress-value{  background-color: #ffda69;  }
.ability_perc progress::-moz-progress-value{  background-color: #ffda69;  }
.ability_memo progress::-webkit-progress-value{ background-color: #f0adc5;  }
.ability_memo progress::-moz-progress-value{ background-color: #f0adc5;  }
.ability_coms progress::-webkit-progress-value{ background-color: #adc95f;  }
.ability_coms progress::-moz-progress-value{ background-color: #adc95f;  }
.ability_conc progress::-webkit-progress-value{ background-color: #cc99ff;  }
.ability_conc progress::-moz-progress-value{ background-color: #cc99ff;  }
.take  progress::-webkit-progress-value{ background-color: #ffa054;  }
.take  progress::-moz-progress-value{ background-color: #ffa054;  }


.ability_numc .abilityValue, .ability_numc .correctValue .correctNum, .ability_numc .myCourseTitle, .ability_numc .charts__percent, .ability_numc .myScore, .ability_numc .charts__percent { color: #4fa2d0; }
.ability_math .abilityValue, .ability_math .correctValue .correctNum, .ability_math .myCourseTitle, .ability_math .charts__percent, .ability_math .myScore, .ability_math .charts__percent { color: #4583ce; }
.ability_perc .abilityValue, .ability_perc .correctValue .correctNum, .ability_perc .myCourseTitle, .ability_perc .charts__percent, .ability_perc .myScore, .ability_perc .charts__percent { color: #ebb40b; }
.ability_memo .abilityValue, .ability_memo .correctValue .correctNum, .ability_memo .myCourseTitle, .ability_memo .charts__percent, .ability_memo .myScore, .ability_memo .charts__percent { color: #eb92b1; }
.ability_coms .abilityValue, .ability_coms .correctValue .correctNum, .ability_coms .myCourseTitle, .ability_coms .charts__percent, .ability_coms .myScore, .ability_coms .charts__percent { color: #8cac34; }
.ability_conc .abilityValue, .ability_conc .correctValue .correctNum, .ability_conc .myCourseTitle, .ability_conc .charts__percent, .ability_conc .myScore, .ability_conc .charts__percent { color: #8763cc; }
.take  .abilityValue { color: #f5903e;  }


.abilityTitle{ margin-top: 0.64rem; font-family: 'NanumSquare_acB'; font-size: 1rem; letter-spacing: -0.05em !important; -webkit-transform: rotate(0.05deg); -moz-transform: rotate(0.05deg); -o-transform: rotate(0.05deg); transform: rotate(0.05deg); }
.abilityValue{ display: inline-block;}
.abilityValue span{ font-size: 1.08rem; font-family: 'NanumSquare_acEB';}
.achiveDesc{  margin: 0.64rem 0 2rem 0; }
.achiveDesc p{ font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.05em !important; word-break: keep-all; -webkit-transform: rotate(0.05deg); -moz-transform: rotate(0.05deg); -o-transform: rotate(0.05deg); transform: rotate(0.05deg); }


.sub_bridge .quizStart { padding-top: 1rem; }
.sub_bridge .quizStartBtn{ margin: 1rem auto 0; width: 75%; }
.sub_bridge .quizStartBtn.step1Btn{ border-color: #66ccff; }
.sub_bridge .quizStartBtn.step2Btn{ border-color: #6699ff; }
.sub_bridge .quizStartBtn.step3Btn{ border-color: #3366cc; }

@media (max-width: 440px) {
    .sub_bridge .quizStart{ margin-top: 1rem; }
}
@media (max-width: 380px) {
    .sub_bridge .quizStart { padding-top: 0.5rem; }
}

.cal{ position: relative; }
.cal img{ width: 7rem; display: block; margin: 0 auto; }
.date{ position: absolute; bottom: 0.6rem; left: 50%; transform: translateX(-50%); text-align: center; }
.year{ font-size: 0.72rem; line-height: 0.72rem;  letter-spacing: -0.025em; color: #819cfa; }
.day span{ display: inline-block; font-size: 0.84rem; letter-spacing: -0.025em; color: #819cfa; font-family: 'NanumSquare_acEB'; vertical-align: bottom; padding-bottom: 0.1rem; }
.day span.century{ font-size: 1.5rem;  color: #5b7ae6; line-height: 1.5rem; padding-bottom: 0;}

.training_title{ font-size: 1.08rem; margin-top: 0.8rem; text-align: center; font-family: 'NanumSquare_acB'; }
.training_list ul{ font-size: 0; letter-spacing: -4px; }
.training_list ul li{ display: inline-block; width: calc(50% - 0.6rem); letter-spacing: -0.05em; height: 6.5rem; border: 0.32rem solid #ffdf81; box-sizing: border-box; border-radius: 1rem; box-shadow: 3px 4px 10px 0px rgba(0,0,0,0.48); margin-top: 0.8rem; }
.training_list ul li a{ display: block; padding-top: 4.2rem; font-size: 1rem; text-align: right; padding-right: 0.8rem;  font-family: 'NanumSquare_acB';}
.training_list ul li:nth-child(even){ margin-left: 0.6rem; }
.training_list ul li:nth-child(odd){ margin-right: 0.6rem; }

.training_list ul li.training01{ background: url('../images/quiz/ability01.png')no-repeat 0.8rem 0.5rem; background-size: 2.64rem auto; }
.training_list ul li.training02{ background: url('../images/quiz/ability02.png')no-repeat 0.8rem 0.5rem; background-size: 1.88rem auto; border-color: #87d1f3; }
.training_list ul li.training03{ background: url('../images/quiz/ability03.png')no-repeat 0.8rem 0.5rem; background-size: 2.36rem auto; border-color: #f0adc5; }
.training_list ul li.training04{ background: url('../images/quiz/ability04.png')no-repeat 0.8rem 0.5rem; background-size: 2rem auto; border-color: #b79ceb; }
.training_list ul li.training05{ background: url('../images/quiz/ability05.png')no-repeat 0.8rem 0.5rem; background-size: 2.6rem auto; border-color: #a7ccfb; }
.training_list ul li.training06{ background: url('../images/quiz/ability06.png')no-repeat 0.8rem 0.5rem; background-size: 2.28rem auto; border-color: #adc95f; }


@media (max-width: 400px) {
    .training_list ul li{ height: 6rem; margin-top: 0.5rem; }
    .training_list ul li a{ padding-top: 3.8rem; }
    .sub_training_list .ct-content{ padding-top: 30px !important; }

}
.sub_daily_ending .ct-content{ padding-top: 2.4rem; }
.sub_daily_ending .quizStartBtn{ width: 57.8%; border-color: #93a6ea; margin: 0 auto; }

.result progress{ width: 100%; }
.resultTitle{ font-family: 'NanumSquare_acB';  text-align: center; font-size: 1.36rem; line-height: 1.36rem; letter-spacing: -0.05em; margin-bottom: 3rem; padding-top: 1rem; }
.resultTitle span{ font-family: 'NanumSquare_acB'; font-size: 1.36rem; line-height: 1.36rem; letter-spacing: -0.05em; display: inline-block; background: url(../images/quiz/underline.png)repeat-x left bottom; padding-bottom: 0.4rem; position: relative; }
.resultTitle span:before{ content: ''; display: block; width: 1rem; height: 0.88rem; background: url('../images/quiz/star.png')no-repeat; background-size: cover; position: absolute; top: -1rem; left: -0.5rem;  }

.result{ position: relative; }

.resultCloseBtn{ width: 0.88rem; position: absolute; top: 0.64rem; right: 0.64rem; }
.result .ability{ position: relative; }
.result .abilityValue{ position: absolute; top: -0.5rem; right: 0; }
.result .abilityValue span{ font-size: 1.64rem; line-height: 1.64rem; }
.result .abilityTitle{ font-size: 1rem; letter-spacing: -0.05em; font-family: 'NanumSquare_acB'; padding-bottom: 0.4rem; }
.correctValue{ font-size: 0.8rem; letter-spacing: -0.05em;  font-family: 'NanumSquare_acB'; margin-top: 0.5rem; }
.correctValue span{ font-size: 0.8rem; }
.result .take{ margin-top: 2rem; }
.result .resultDesc p{ font-size: 0.88rem; line-height: 1.36rem; }
.result .resultDesc{ margin-top: 1.5rem; }
.result .resultDesc span{ display: block; font-size: 0.88rem; line-height: 1.36rem; }
.result .quizStart{ margin-top: 2.6rem; }
.result .quizStartBtn{ width: 58%; margin: 0 auto; }

@media (max-width: 400px) {
    .result .quizStart{ margin-top: 1.5rem; }
    .resultTitle{ margin-bottom: 2rem; }
}

.chart .ct-content{ height: auto; }
.chart .resultTitle{ margin-bottom: 1.5rem; }
.chart .correctValue{ text-align: center; }
.MyClassroomTitle span{ font-size: 1.5rem; font-family: 'NanumSquare_acB'; }
.MyClassroom{ position: relative; }
.MyClassroom .quizStart{ margin-top: 0rem; position: absolute; bottom: 0; right: 0; }
.MyClassroom .quizStartBtn{ padding: 0 1rem; }

.victory{ font-size: 1rem; margin-top: 1rem; font-weight: 700; }
.victory a{ display: inline-block;text-align: center;font-size: 0.8rem;  margin-left: 1.2rem; border-radius: 0.6rem; height: 1.2rem; line-height: 1.2rem; box-sizing: border-box; background-color: #819cfa; color: #fff; font-weight: 400;width: 148px;}

@media (max-width: 800px) {
    .MyClassroom .quizStart{ position: relative; }
    .MyClassroom .quizStartBtn{ width: 80%; margin: 0 auto; }

}
@media (max-width: 580px) {
    .MyClassroom .quizStartBtn{ width: 100%; margin: 0 auto; }

}
@media (max-width: 400px) {
    .MyClassroom .quizStart{ margin-top: 1rem; }

}

.MyClassroom .quizStartBtn a{ font-size: 1.12rem; }
.pause{ display: inline-block; font-size: 0.72rem !important; width: 4.6rem; height: 1.2rem; line-height: calc(1.2rem - 0.24rem); box-sizing: border-box; border: 0.12rem solid #93a6ea; border-radius: 0.6rem;text-align: center; margin-left: 0.4rem; letter-spacing: -0.05em; }
.period{ margin-top: 1rem; margin-bottom: 1rem;}
.period span{ color: #20378b; font-family: 'NanumSquare_acB'; display: inline-block; vertical-align: bottom; }

.period .partPeroid span{ font-size: 1.85rem; line-height: 1.85rem; }
.period .partPeroid span + span{ font-size: 1.15rem; line-height: 1.5rem; }
.period .allPeroid span{ font-size: 1.2rem; line-height: 1.5rem; }
.period .allPeroid span + span{ font-size: 1rem; }
.correctValue{ margin-top: 0.4rem;  }

.classroom { background-color: #fff; }
.classroom h3{ font-size: 1.2rem; color: #6a86eb; border-bottom: 1px solid #ccc; padding-bottom: 0.5rem; margin-top: 3rem; }
.myCourse .quizStart{ margin: 1.3rem auto 2rem; }
.myCourse .quizStartBtn{ width: 220px; margin: 0 auto; }

.myCourse > ul > li{ padding-top: 1.8rem; width: 100%; } 
.myCourse ul{ font-size: 0; width: 100%; }
.myCourse ul li{ display: inline-block; font-size: 0; vertical-align: top; }
.myCourse ul li > span{ display: inline-block; }

.myCourse ul li progress{ width: 100%; margin-top: 0; }
.myCourse ul li .row01{ position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
.myCourse ul li .row01 a{ display: inline-block; width: 5.4rem; text-align: center;  height: 1.2rem; line-height: calc(1.2rem - 0.24rem); border: 0.12rem solid #d1d1d1; box-sizing: border-box; border-radius: 0.6rem; font-size: 0.72rem;  font-family: 'NanumSquare_acB';}
.myCourse ul li .row02{ margin-top: 0.1rem; font-size: 0; width: 100%; }
.myCourse ul li .row02 > span{ vertical-align: top; display: inline-block; }
.myCourse ul li .row02 span{ font-size: 0.72rem; line-height: 1rem;  font-family: 'NanumSquare_acB'; }
.myCourseTitle{ font-size: 1rem !important;  font-family: 'NanumSquare_acEB'; width: 3.6rem; }
.myCourseTitle span{ font-size: 1rem !important; }
.myCourseAbility{ width: calc(100% - 3.6rem - 1rem); margin-left: 1rem; position: relative; padding-right: 6.4rem; box-sizing: border-box; }
.myCourse ul li .row02 span.abilityValue span{ font-size: 0.88rem; font-family: 'NanumSquare_acEB'; }
.myCourse ul li .row02 span.partClass span{ font-size: 0.88rem; color: #666; font-family: 'NanumSquare_acEB'; line-height: 1rem; vertical-align: bottom;}
.myCourse ul li .row02 span.partClass span + span{ font-size: 0.72rem; font-family: 'NanumSquare_acB'; line-height: 1rem;}
.row02_01 { width: 15.2%; }
.row02_02 { width: 33.3%; padding-left: 0.5rem; box-sizing: border-box; }
.row02_03 { width: 19%; text-align: right; }
.row02_04 { width: 32.5%;  text-align: right; }

@media (max-width: 800px) {
    .myCourseTitle{ width: 2.48rem; }
    .myCourseAbility{ width: calc( 100% - 2.48rem); padding: 0; margin: 0; }
    .myCourseTitle span{  display: block ;}
    .myCourse ul li .row01{ position: relative; top: 0; right:0; transform: translateY(0); }

}
@media (max-width: 580px) {
    .myCourse .quizStartBtn{ width: 58%; }

}




.verticalChart { font-size: 0; }
.verticalChart canvas{ height: 148px !important; }
.verticalChart > span{ display: inline-block; vertical-align: bottom; }
.verticalChart > span:first-child{ width: 44%; }
.verticalChart > span:last-child{ width: 56%; position: relative; }
.verticalChart > span:last-child:before{ content: ''; display: block; width: 1px; height: 170px; background-color: #ccc; position: absolute; top: 0; left: 0;}  

@media (max-width: 480px) {
    .verticalChart > span:last-child:before{ height: 165px; }  
}
@media (max-width: 440px) {
    .verticalChart > span:last-child:before{ height: 162px; }  
}
@media (max-width: 399px) {
    .verticalChart > span:last-child:before{ height: 160px; }  
}
@media (max-width: 360px) {
    .verticalChart > span:last-child:before{ height: 157px; }  
}
@media (max-width: 320px) {
    .verticalChart > span:last-child:before{ height: 155px; }  
}
.verticalChart .abilityValue{position: relative; top:0; }
.verticalChart .yValue{ font-size: 0; }
.verticalChart .yValue > span{ display: inline-block; width: 50%; font-size: 1rem; text-align: center; font-family: 'NanumSquare_acB' ; }
.verticalChart .yValue span{ font-size: 1rem; vertical-align: baseline; }
.verticalChart > span:last-child .yValue span{ font-size: 0.8rem; vertical-align: baseline; }

.verticalChart > span:last-child .yValue span.century{ font-size: 1rem; position: relative; top: 3px; }
.verticalChart .averageValue{ color: #999; }
.verticalChart .averageValue span{ color: #999; }
.verticalChart .xValue{ font-size: 0; }
.verticalChart .xValue span{ display: inline-block; width: 50%; font-size: 0.736rem; text-align: center; font-family: 'NanumSquare_acB'; }

.chart .resultDesc{ margin: 2.5rem 0 2rem 0; }
.chart .quizStart{ margin: 1.3rem auto 2rem; }
.resultLevel{ text-align: center; font-size: 0.72rem; }
.resultLevel span{ font-size: 0.72rem; display: inline-block; color: #20378b; vertical-align: middle; font-family: 'NanumSquare_acEB';}
.resultLevel span.resultLevelPer{ font-size: 1.87rem; padding-left: 0.3rem; }
.resultLevel span.resultLevelPer span{ font-size: 1.87rem;  font-family: 'NanumSquare_acEB';}


/*
.verticalChart{ padding-top: 2rem; font-size: 0; text-align: center; }
.verticalChart > div{ display: inline-block; vertical-align: bottom; }
.verticalChart > div:first-child{ width: 44%; }
.verticalChart > div:last-child{ width: 56%; }

.charts--vertical{ height: 9.6rem; width: 100%; }
.charts--vertical .charts__chart { width: 21px; margin: 0 calc((99% - 42px) / 4); }
.charts--vertical .charts__chart{ background-color: #999; }
.charts--vertical .charts__chart.ability_memo{ background-color: #f0adc5; }
.charts--vertical .charts__chart.take{ background-color: #ffa054; }
.charts--vertical .charts__percent{ transform: rotate(0); top: -1rem; left: 50%; transform: translateX(-50%); color: #999;  font-family: 'NanumSquare_acB'; font-size: 0.8rem;  }
.verticalChart .xValue{ font-size: 0; }
.verticalChart .xValue span{ display: inline-block; width: 50%; font-size: 1rem; text-align: center; font-size: 0.74rem; }

*/
.charts--vertical{ height: 100px; width: 100%; font-size: 0; margin: 0.8rem 0 1rem 0; }
.charts--vertical .charts__chart { width: 3px; margin-left: calc((100% - 156px) / 104); margin-right: calc((100% - 156px) / 104); position: relative; }
.charts--vertical .charts__chart{ background-color: #a7d0e7; }
.charts--vertical .charts__chart.active{ background-color: #20378b;  }
.charts--vertical .charts__percent{ display: none; }
.times{ position: absolute; bottom: -1rem; left: 50%; transform: translateX(-50%); width: 1.25rem; color: #4fa2d0; font-size: 0.6rem;  font-family: 'NanumSquare_acEB'; display: none; letter-spacing: -0.05em;}
.times span{ font-size: 0.6rem; letter-spacing: -0.05em; }
.charts--vertical .charts__chart:first-child .times{ display: block; }
.charts--vertical .charts__chart:last-child .times{ display: block; }
.charts--vertical .charts__chart.active .times{ display: block; }


/*
#radar-chart{ position: relative; top: 0;left: 50%; transform: translateX(-50%) rotate(-30deg); }
.analysis h3{ margin-bottom: 2.6rem;  }
.raderChartArea{ position: relative; }
.raderChartLabel{ font-size: 0.8rem; font-family: 'NanumSquare_acB'; position: absolute; }
.raderChartLabel.label01{ left: 31%; top: 0.2rem; }
.raderChartLabel.label02{ right:31%; top: 0.2rem; }
.raderChartLabel.label03{ right: 18%; top: 50%; transform: translateY(-50%); }
.raderChartLabel.label04{ right: 31%; bottom: 0.2rem; }
.raderChartLabel.label05{ left:  31%; bottom: 0.2rem; }
.raderChartLabel.label06{ left: 18%; top: 50%; transform: translateY(-50%); }
@media (max-width: 800px) {
    .raderChartLabel.label03{ right: 15%; }
    .raderChartLabel.label06{ left: 15%; }
    
}
@media (max-width: 660px) {
    .classroom #radar-chart{ width: 600px!important; height: 300px!important; }
    .raderChartLabel.label01{ left: calc(50% - 5rem); }
    .raderChartLabel.label02{ right:calc(50% - 5rem); }
    .raderChartLabel.label03{ right: calc(50% - 150px - 2rem); }
    .raderChartLabel.label04{ right: calc(50% - 5rem); }
    .raderChartLabel.label05{ left:  calc(50% - 5rem); }
    .raderChartLabel.label06{ left: calc(50% - 150px - 2rem); }
}


@media (max-width: 440px) {
    .classroom #radar-chart{ width: 500px!important; height: 250px!important; }
    .raderChartLabel.label01{ left: calc(50% - 5rem); }
    .raderChartLabel.label02{ right:calc(50% - 5rem); }
    .raderChartLabel.label03{ right: calc(50% - 125px - 2rem); }
    .raderChartLabel.label04{ right: calc(50% - 5rem); }
    .raderChartLabel.label05{ left:  calc(50% - 5rem); }
    .raderChartLabel.label06{ left: calc(50% - 125px - 2rem); }
}
@media (max-width: 380px) {
    .classroom #radar-chart{ width: 460px!important; height: 230px!important; }
    .raderChartLabel.label01{ left: calc(50% - 5rem); }
    .raderChartLabel.label02{ right: calc(50% - 5rem); }
    .raderChartLabel.label03{ right: 0; }
    .raderChartLabel.label04{ right: calc(50% - 5rem); }
    .raderChartLabel.label05{ left:  calc(50% - 5rem); }
    .raderChartLabel.label06{ left: 0; }
}
*/

#radar-chart{ width: 600px !important; height: 300px!important; transform: rotate(-30deg); margin: 0 auto; }
.analysis h3{ margin-bottom: 2.6rem;  }
.raderChartArea{ position: relative; }
.raderChartLabel{ font-size: 0.8rem; font-family: 'NanumSquare_acB'; position: absolute; }
.raderChartLabel.label01{ left: calc(50% - 5rem); top: -0.2rem; }
.raderChartLabel.label02{ right:calc(50% - 5rem); top: -0.2rem; }
.raderChartLabel.label03{ right: calc(50% - 150px - 2.3rem); top: 50%; transform: translateY(-50%); }
.raderChartLabel.label04{ right: calc(50% - 5rem); bottom: -0.2rem; }
.raderChartLabel.label05{ left: calc(50% - 5rem); bottom: -0.2rem; }
.raderChartLabel.label06{ left: calc(50% - 150px - 2.3rem); top: 50%; transform: translateY(-50%); }
@media (max-width: 800px) {
    #radar-chart{ width: 500px !important; height: 250px!important; }
    .raderChartLabel.label01{ left: calc(50% - 4.5rem); top: -0.2rem; }
    .raderChartLabel.label02{ right:calc(50% - 4.5rem); top: -0.2rem; }
    .raderChartLabel.label03{ right: calc(50% - 130px - 2.3rem); top: 50%; transform: translateY(-50%); }
    .raderChartLabel.label04{ right: calc(50% - 4.5rem); bottom: -0.2rem; }
    .raderChartLabel.label05{ left: calc(50% - 4.5rem); bottom: -0.2rem; }
    .raderChartLabel.label06{ left: calc(50% - 130px - 2.3rem); top: 50%; transform: translateY(-50%); }
}
@media (max-width: 600px) {
        #radar-chart{ position: relative; left: 50%; transform: translateX(-50%) rotate(-30deg); }

}

@media (max-width: 440px) {
    #radar-chart{ width: 360px !important; height: 180px!important; }
    .raderChartLabel.label03{ right: calc(50% - 90px - 2.3rem); }
    .raderChartLabel.label06{ left: calc(50% - 90px - 2.3rem); }
    .times span{ font-size: 12px; }
}

.classroom .ct-content{ width: 1000px; }
@media (max-width: 1000px) {
    .classroom .ct-content{ width: 100%; }
}
@media (max-width: 580px) {
    .classroom .raderChartArea{ width: 100%; margin: 0 auto; }   

}


/* 20.06.10 나의 강의실 레이어추가 */
.scholarship {position: absolute; height: 100%; min-height:100%; padding: 2rem 0; margin-bottom: 2rem; overflow-y: scroll; background: none; }
.scholarshipbg{ background-color: rgba(0,0,0,0.25);position: fixed !important; }
.scholarship .modal-content{  width: 800px; margin: 0 auto; padding: 0; top: 0; transform: translateY(0); margin-bottom: 2rem; height: auto; }
.scholarshipCloseBtn{ z-index: 10; }
.h2Desc{ padding: 30px 0 0 0; font-weight: 700; position: relative; }
.h2Desc  p > span{ display: block; font-size: 1rem !important;}
.h2Desc  p span{ font-size: 1rem !important; line-height: 1.3rem!important; }

#scholarship .blueBtn{ display: inline-block !important; padding: 0 30px; border: 3px solid #6a86eb; line-height: 30px !important; font-weight: 700; font-size: 0.7rem;}
#scholarship .blueBtn.blueBtnBig{ line-height: 44px!important; height: 44px; font-size: 0.8rem; margin-top: 20px; }

.scholarship h2{ font-size: 1.2rem; }
.scholarship h3{ font-size: 0.9rem; }
.contShow .pressBlueBtn{ position: absolute; bottom:0; right: 0; }

.scholRequest{ position: absolute; top: 0px; left: 50%; transform: translateX(-50%); width: 100%; background-color: #fff; border: 15px solid #beccf7; box-sizing: border-box; z-index: 110; display: none; }
.scholRequest h2{ padding-bottom: 1rem; }
.scholRequest p{ margin: 20px 0; }
.scholRequCloseBtn{ position: absolute; top: 10px; right: 10px; width: 20px; }
.scholRequCloseBtn img{ width: 100%; }

.scholBank{ width: 20%; border: 1px solid #999; background-color: #fff; height: 44px; line-height: 44px; padding-left: 10px; }
.scholName{ width: 29%; margin-left: 1%; }
.scholNum{ width: 49%; margin-left: 1%; }
.scholRequInputBox{ font-size: 0; }

.scholWrap{ padding: 50px 40px; position: relative; }

.scholArea01{ background-color: #eee;}
.scholArea01 p > span{ position: relative; }
.scholWay{ margin-top: 30px; }
.scholWay li{ padding-bottom: 20px; }
.scholWay li:last-child{ padding-bottom: 0px; }

.scholarship p{ font-size: 0.8rem; line-height: 1rem; font-weight: 700; position: relative; word-break: keep-all; }
.scholarship p span{ font-size: 0.8rem; line-height: 1rem; }
.scholWay01{ position: relative; }
.scholWay02 p{ margin-bottom: 20px; }
.scholWay p > span{ display: block!important; }
.scholWay p span{ font-size: 0.7rem; }
.scholWay p span:not(.blueBtn){ display: inline-block; font-size: 0.7rem; font-weight: 400; padding: 10px 0 10px 0;margin-right: 20px }
.scholWay .blueBtn{ padding: 0 10px!important;}
.scholArea02{ padding-top: 20px; }
.scholArea02 table{ border: 1px solid #ccc;text-align: center; margin: 20px 0 0;}
.scholArea02 table td{ border-right: 1px solid #ccc; padding: 10px 0; font-size: 0.7rem}

.scholNotice{ margin-top: 50px; }
.scholNotice div{ margin-bottom: 10px; }
.scholNotice li{ font-size: 0.7rem; line-height: 1rem;}


@media (max-width: 800px) {
    .scholWrap{ padding: 50px 20px; }    
    .scholarship .modal-content{ margin-bottom: 0; }
    .scholRequest{ width: 100%; }
    .scholarship h2{ font-size: 24px; }
    .scholarship h3{ font-size: 20px; }
    #scholarship .blueBtn{ font-size: 16px; }
    #scholarship .blueBtn.blueBtnBig{ font-size: 20px!important; }
    .scholWay p span:not(.blueBtn){ font-size: 17px; }
    .scholarship{ padding: 0;  margin-bottom: 0 }
    .scholarship .modal-content{ width: 100%; }
    .scholarship p{ font-size: 18px; line-height: 32px; }
    .scholarship p span{ font-size: 18px; line-height: 20px; }
    .h2Desc  p > span{ line-height: 32px!important;}
    .h2Desc  p span{ font-size: 22px !important; line-height: 35px!important; }
    .scholNotice li{ font-size: 18px; line-height: 32px;}
    .scholArea02 table td{ font-size: 18px; word-break: keep-all; padding: 5px; }
    .scholRequest{ border: 10px solid #beccf7; }

}
@media (max-width: 500px) {
    .scholWrap{ padding: 50px 10px; }    
    .scholBank{ width: 40%; }
    .scholName{ width: 59%; }
    .scholNum{ width: 100%; margin-left: 0%; margin-top: 10px; }
    .scholRequest{ border: 5px solid #beccf7; }
    
}


/* 달력 공통 */
.overlay{ position: fixed;top:0px;left:0px;right:0; bottom: 0; display: none; z-index: 1; background: rgba(0,0,0,0.3);}
.scholArea01 .overlay{  background-color: transparent; }
#scholarship .scholWay01 .dateSave .blueBtn{ font-size: 0.9rem; line-height: 40px !important;height: 40px !important; }
.dateBox{ position: absolute;top:65px;left:0px; z-index: 10; display: none;background-color: #fff; border: 15px solid #beccf7; width: 50%; box-sizing: border-box;   }
.dateBox01{  border: 15px solid #beccf7; width: calc(50% - 10px); box-sizing: border-box; padding-bottom: 20px; background-color: #fff; }
.scholWay01 .contShow{ position: relative; }
.scholWay01 .dateBox{ width: 100%; }


/* 20.19.13 수정 */
#datepicker{ width: 50%; padding-bottom: 20px; }
.datepicker{ position: relative; width: 100%; }
.scholWay01 .datepicker:after{ content: ''; display: block; width: 1px; height: calc(100% - 30px); background-color: #c8c8c8; position: absolute; top: 50%; right:0; -ms-transform: translateY(-50%);-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%); }

.datepicker .ui-datepicker {background-color: #fff; }
.datepicker .ui-widget-header { border: none; box-sizing: border-box; text-align: center; margin-bottom: 20px;}
.datepicker .ui-datepicker-title{ font-size: 22px; color: #6a86eb;  }
.datepicker table{ border: none; }
.datepicker table th{ border: none; font-size: 15px; height: 35px; line-height: 35px; color: #333; background: none; padding: 0; text-align: center; width: 14.29%; }
.datepicker table td{ border: none; font-size: 15px; height: 35px; line-height: 35px; color: #333; padding: 0; box-sizing: border-box; }
.datepicker table td a{ box-sizing: border-box; }
.ui-state-active{ color: #fff !important; background-color: #6a86eb !important; }
.datepicker table td.ui-datepicker-current-day.ui-datepicker-today a{ color: #fff !important; background-color: #6a86eb !important; }
.datepicker table td.ui-datepicker-current-day.ui-state-highlight a{ color: #fff !important; background-color: #6a86eb !important; }
.datepicker table td.ui-datepicker-current-day.ui-state-highlight{  border: none !important;  }
.datepicker table td:hover a{ background-color: background: #f8f7f6;!important; }
.datepicker .ui-datepicker td span, .datepicker .ui-datepicker td a { display: block; padding: 0; text-align: center; text-decoration: none; font-size: 15px; height: 35px; line-height: 35px; color: #333; font-family: 'NanumSquare_acR' !important; }
.datepicker .ui-widget-header .ui-icon{display: none;}
.datepicker .ui-datepicker .ui-datepicker-next span{ display: none;}
.datepicker .ui-datepicker-current-day a{ background-color: #fff !important; border: 1px solid #6a86eb !important; color:#333 !important;  }
.ui-state-default, .ui-widget-content .ui-state-default{  border: none !important;  }
.ui-state-default:hover, .ui-widget-content .ui-state-default:hover{ background-color: #f8f7f6;!important; }
.ui-widget.ui-widget-content {  border: none !important;  }
.ui-datepicker .ui-datepicker-calendar .ui-state-highlight a { background: #fff; color: #333; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { background: #fff; }
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: none;
	background: #fff;
	color: #333;
}
/* 20.19.13 삭제
.datepicker .ui-state-active, .datepicker .ui-widget-content .ui-state-active, .datepicker .ui-widget-header .ui-state-active, .datepicker a.ui-button:active, .datepicker .ui-button:active, .datepicker .ui-button.ui-state-active:hover{ border: none; background: none; }
.datepicker  .ui-state-default, .datepicker  .ui-widget-content .ui-state-default, .datepicker  ui-widget-header .ui-state-default, .datepicker  .ui-button, html .datepicker  .ui-button.ui-state-disabled:hover, html .datepicker  .ui-button.ui-state-disabled:active{ border: none; background: none;}
.datepicker .ui-widget.ui-widget-content{ border: none; }
.datepicker  .ui-datepicker-today{ border:1px solid #fff; background-color: #fff; }
.datepicker  .ui-state-highlight, .datepicker .ui-widget-header .ui-state-highlight, .datepicker .ui-datepicker .ui-datepicker-calendar .ui-state-highlight a { background: #6a86eb; border:none; }
.datepicker  .ui-state-highlight a, .datepicker  .ui-widget-content .ui-state-highlight a, .datepicker .ui-widget-header .ui-state-highlight a{  } 
#datepicker01 .ui-datepicker-today{ border: none; background-color: #6a86eb !important;  }
#datepicker01 .ui-datepicker-today + td{ position: relative; }
#datepicker01 .ui-datepicker-today + td:after{ content: ''; display: block; width: 35px; height: 35px; background: url('../images/quiz/stamp.png')no-repeat; position: absolute; top: 0; left: 50% ; transform: translateX(-50%); background-size: contain; }
#datepicker01 .ui-datepicker-today a{ color: #fff; background-color: #6a86eb !important;  }
#datepicker01 .ui-state-highlight , #datepicker01 .ui-widget-header .ui-state-highlight, #datepicker01 .ui-datepicker .ui-datepicker-calendar .ui-state-highlight a { background: #fff; border:none; cursor: inherit;color: #333; }
#datepicker01 .ui-state-default, #datepicker01 .ui-widget-content .ui-state-default, #datepicker01 ui-widget-header .ui-state-default, .datepicker .ui-button, html #datepicker01 .ui-button.ui-state-disabled:hover, html #datepicker01 .ui-button.ui-state-disabled:active { background: #fff; border:none; cursor: inherit; }
#datepicker02 .ui-state-highlight , #datepicker02 .ui-widget-header .ui-state-highlight, #datepicker02 .ui-datepicker .ui-datepicker-calendar .ui-state-highlight a { background: #fff; border:none; cursor: inherit; color: #333; }
#datepicker02 .ui-state-default, #datepicker02 .ui-widget-content .ui-state-default, #datepicker02 ui-widget-header .ui-state-default, .datepicker .ui-button, html #datepicker02 .ui-button.ui-state-disabled:hover, html #datepicker02 .ui-button.ui-state-disabled:active { background: #fff; border:none; cursor: inherit; }

*/
.ui-datepicker{ width: 100%; box-sizing: border-box; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{width: 15px; height: 23.175px;top:0%; top: 10px; display: inline-block; vertical-align: top; background-size: cover !important; }
.ui-datepicker .ui-datepicker-prev{ left: 70px; background: url('../images/sub/calPrev.png')no-repeat; }
.ui-datepicker .ui-datepicker-next{ right: 70px; background: url('../images/sub/calNext.png')no-repeat; }

.dateSave{ width: 50%; font-size: 24px; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); right:0; }
.countBox{ font-size: 24px; margin: 0 auto;}
.count{ display: inline-block; height: 40px; line-height: 40px; border: 1px solid #999;  width: 150px; color: #ff6666; text-align: center; }
.dateSave h3{ color: #333; margin-bottom: 10px; }
.dateSave .blueBtn{ width: 150px; margin-top: 70px; }
@media (max-width: 800px) {
    .datepicker .ui-datepicker-title span{ font-size: 22px; }   
    .count{ font-size: 22px!important; }
    .dateBox{ top: 72px; }
}

@media (max-width: 600px) {
    .datepicker{ width: 100% !important; }
    .dateSave{ position: relative; top: 0%; transform: translateY(0%); }
    .scholWay01 .datepicker:after{ display: none; }
    .scholWay01 .datepicker:before{ content: ''; display: block; width: 90%; height: 1px; background-color: #c8c8c8; position: absolute; bottom: 0; left: 50%; -ms-transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-o-transform: translateX(-50%);transform: translateX(-50%);  }
    .dateSave{ padding: 60px 0; width: 100%; }
    .dateBox01{ width: 100%; margin-bottom: 20px}
    .dateSave h3{ margin-bottom: 30px; font-size: 24px;}
    #scholarship .scholWay01 .dateSave .blueBtn{ margin-top: 60px; }
    .dateBox{  padding-top: 40px;}
    #datepicker{ padding-bottom: 30px; }
    .dateBox01, .dateBox{ border: 10px solid #beccf7; }
}
@media (max-width: 540px) {
    .dateBox{ top: 100px; }
}
@media (max-width: 500px) {
    .h2Desc > p{ margin-bottom: 10px; }
    .contShow .pressBlueBtn{ position: relative; margin-top: 5px; }
    .dateBox01, .dateBox{ border: 5px solid #beccf7; }  
    .dateBox{ top: 140px; }
}

/* 20.06.22 수정 */
.ct03_02 .ct03_word04 > span{ width: calc((100% - 1.2rem) / 4); height: 3.5rem; line-height: 3.1rem; }

/* 20.07.01 수정 */
.ct04_04 .quizQTop{ padding: 0; margin: 0; text-align: center; }
.ct04_04 .quizQTop img{ width: 90%;  }
.ct04_04 .quizQ{ margin: 0.5rem 0 0.5rem 0}
.ct04_04 .choiceArea { margin: 1rem 0; }
.ct04_04 .quizStartBtn{ margin: 1.5rem auto 0; }

@media (max-width: 480px){
    .ct-content { height: auto; min-height: 100vh; }
}

/* 20.07.01 수정추가 */

.quiz01_01 .resultView ul li { width: 100%; height: auto; background-color: #5e9dfc; color: #fff; height: 6.2rem;
    line-height: 1.2rem; position: relative; }

.quiz01_01 .resultView ul li .resultDesc { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); padding: 0 1rem; box-sizing: border-box; font-size: 16px; }
.quiz01_01 .resultView ul li .resultDesc div{ font-size: 1rem; }


/* 20.07.04 수정 */

.ct .choiceArea li{ vertical-align: top; }
.ct .choiceArea ul li { height: 6.2rem; line-height: 1.2rem; position: relative; vertical-align: top; }

.ct .choiceArea ul li .choiceAnswer { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); padding: 0 1rem; box-sizing: border-box; font-size: 1rem; }

/* 20.07.28 수정 및 추가페이지 */
.sub_bridge .quizimg{ padding-top: 1.5rem; }
.disableBtn{ border-color: #ccc!important; }
.disableBtn a{ color: #ccc!important; border-color: #ccc!important;}

.CT02StartBtn{ border-color: #88baf9!important; }
.CT03StartBtn{ border-color: #ffdf80!important; }
.CT04StartBtn{ border-color: #efaec6!important; }
.CT05StartBtn{ border-color: #b79ceb!important; }
.CT06StartBtn{ border-color: #aec960!important; }

.training_list ul li.training01.disableBtn{ background: url('../images/quiz/dis_ability01.png')no-repeat 0.8rem 0.5rem; background-size: 2.64rem auto; }
.training_list ul li.training02.disableBtn{ background: url('../images/quiz/dis_ability02.png')no-repeat 0.8rem 0.5rem; background-size: 1.88rem auto; border-color: #87d1f3; }
.training_list ul li.training03.disableBtn{ background: url('../images/quiz/dis_ability03.png')no-repeat 0.8rem 0.5rem; background-size: 2.36rem auto; border-color: #f0adc5; }
.training_list ul li.training04.disableBtn{ background: url('../images/quiz/dis_ability04.png')no-repeat 0.8rem 0.5rem; background-size: 2rem auto; border-color: #b79ceb; }
.training_list ul li.training05.disableBtn{ background: url('../images/quiz/dis_ability05.png')no-repeat 0.8rem 0.5rem; background-size: 2.6rem auto; border-color: #a7ccfb; }
.training_list ul li.training06.disableBtn{ background: url('../images/quiz/dis_ability06.png')no-repeat 0.8rem 0.5rem; background-size: 2.28rem auto; border-color: #adc95f; }

.MyClassroom{ background-color: #ffe866; padding: 2.4rem 0 2rem;}
.MyClassroom .quizStart{ right: 2rem; bottom: 2rem; }
.MyClassroom .quizStartBtn{ background-color: #fff;  }
.analysis h3{ margin-top: 1rem!important; }
.scholWay02  table{ border: 1px solid #6a86eb; margin-top: 20px; }
.scholWay02  table th{ text-align: center; color: #fff; background-color: #b9cfff; font-size: 16px; padding: 5px 0; border-right: 1px solid #6a86eb; width: 10%; }
.scholWay02  table td{ height: 50px; border-right: 1px solid #6a86eb; text-align: center; position: relative; }
.scholWay02  table td img{ width: 80%; }
.challenge span{ display: inline-block; margin-right: 20px; font-weight: 700; }
.failStamp img{ width: 120%!important; position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; }
#stampEnd .modal-content{ width: 500px; margin: 0 auto; padding: 100px 50px; text-align: center; line-height: 1.5em; }
.sucessStamp img{ width: 40%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.relative{ position: relative!important; }

/*201015 add*/
#this-popup{display:none; background: rgba(0, 0, 0, 0.6);position: fixed;z-index: 999;width: 100%;height: 100%;top: 0;left: 0;}
#this-popup.timeChange{}
a.alarm-change{background: #819cfa;color: #fff;padding: 0 1rem;font-size: 0.8rem;margin-left: 1rem;border-radius: 0.6rem;height: 1.2rem;line-height: 1.2rem;box-sizing: border-box;width: 148px;text-align: center;}
.popup-box{background: #000;width: 380px;position: absolute;top: calc(50% - 269px);left: calc(50% - 250px);padding: 50px;color: #fff;line-height: 54px;font-size: 40px;}
.popup-box > div{width: 100%;margin: 40px 0 0;margin-left: -10px;}
.popup-box > div::after{content: "";display: block;height: 0;clear: both;visibility: hidden;}
.popup-box > div select{appearance: none;-moz-appearance: none;-webkit-appearance: none;width: calc(100% - 20px);padding: 10px 10px 10px 20px;color: #111;display: block;float: left;margin-left: 10px;background: #fff url("../images/sub/event_arr.png") no-repeat 96% center;background-size: 13px auto;font-size: 40px;}
.popup-box > p{text-align: center;margin-top: 80px;}
.popup-box > p a{width: 220px;line-height: 80px;height: 80px;background: #6a86eb;color: #fff;font-size: 40px;}
/*201015 add*/

@media (max-width: 800px){
    .MyClassroom .quizStart { position: relative; bottom:0; right: 50%; transform: translateX(50%); }
    .popup-box{width: 70%;left: 10%;padding: 10% 5%;font-size: 25px;top: 16%;line-height: 36px;}
	.popup-box > div{margin-top: 20px;}
	.popup-box > div select{font-size: 25px;}
	.popup-box > p{margin-top: 40px;}
	.popup-box > p a{width: 140px;line-height: 40px;height: 40px;font-size: 25px;}
    
}
@media (max-width: 500px){
    .scholWay02  table th{ font-size: 14px; }
    .scholWay02  table td{ height: 40px; }
}
@media (max-width: 400px){
    .scholWay02  table td{ height: 30px; }
}

.scholRequInputBox{ box-sizing: border-box; }
.scholRequInputBox input{ height: 44px;    border: 1px solid #999;
    line-height: 44px; box-sizing: border-box; padding-left: 10px; }
.scholRequInputBox input::placeholder{ font-size: 20px; }

@media (max-width: 684px){
    .scholRequInputBox input::placeholder, .scholRequInputBox input, .scholRequInputBox select{ font-size: 18px; }
}

/* 20.09.13 katalk 발송*/
.katalk .modal-content{ border: 10px solid #6a86eb; width: 500px; padding: 100px 0 60px; text-align: center; font-size: 25px; color: #6a86eb; line-height: 40px; }
.katalk .modal-content p{ font-weight: 700; }
.katalk_comfirm{ display: inline-block; padding: 0 30px; font-size: 20px;  color: #6a86eb; border: 5px solid #6a86eb; margin-top: 40px; cursor: pointer; }

@media (max-width: 768px){
    #katalk{ display: none !important; }
}

.ct-content *{ box-sizing: border-box; }
.charts--vertical{ border-bottom: 1px solid #6a86eb; }