@charset "utf-8";

/* utilities */
.hide, .blind{display: none !important}
.show{display: inline-block !important}
.noPointer{pointer-events: none !important}
.word_break{word-break: keep-all}
.flex{width: 100%;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-wrap: wrap;-webkit-flex-wrap: wrap;box-sizing: border-box}
.flex.row{-webkit-flex-direction: row;flex-direction: row;flex-wrap: nowrap;-webkit-flex-wrap: nowrap}
.flex.column{-webkit-flex-direction: column;flex-direction: column}
.flex.align{-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center}
.flex.around{-webkit-justify-content: space-around;justify-content: space-around}
.flex.between{-webkit-justify-content: space-between;justify-content: space-between}
.flex.row .items{-webkit-box-flex: 1;-webkit-flex: 1;flex: 1}
.cell{display: table-cell;vertical-align: middle;text-align: center}
.inlineFlex{display: inline-flex !important;align-items: center;justify-content: center}
.blockFlex{display: flex;align-items: center;justify-content: center}
.d-flex-center>img{margin-left: 0;margin-right: 0}

/* layout */
.sp-math{padding:140px 500px 0 25px}
.sp-math-static{padding: 25px 25px 127px}
.sp-math-answer{display: flex; align-items: center;justify-content: center;position: absolute;top:25px;right:25px;bottom:215px;width: 441px; padding: 40px 20px; border:3px solid #ffa700;border-radius:15px; background: #fff;}
.sp-math-answer h4{position: absolute;top:0;left:0;right:0;height: 58px; background:url("../../../../img/common/sp-math-answer.png") no-repeat 50% 0 / auto 100%;font-size:30px; line-height: 58px; text-align: center; color: #fff;}
.btn-sp-math-answer{position: absolute;bottom:-90px;left:0;width: 100%; background: #b4b4b4;border-radius:10px; font-size:40px; line-height: 72px; color:#fff;pointer-events: none}
.btn-sp-math-answer:after{content:'';position: absolute;top:-42px;left:0;width:100%;height:66px;background:url("../../../../img/common/sp-math-answer-btm.png") no-repeat 50% 0 / auto 100%;}
.btn-sp-math-answer.active{background:#31c191;pointer-events:auto}
.sp-math-problem{position: relative;height: 684px}
.sp-math-problem.full{position: absolute;top: 10px;left: 10px;right: 10px;height: 832px}
.sp-math-problem.full>.flex{height: 100%}
.sp-math-problem.inner-full{width:1306px; height:690px;}
.sp-math-problem .desc{display: flex; align-items: center;justify-content: center; position: absolute;bottom:0;left:0;width: 842px;height:167px; background:url("../../../../img/common/sp-math-problem.png") no-repeat 0 0 / 100% 100%;font-size:30px;text-align: center;}
.sp-math-problem .keyword{ display: inline-block;margin:0 10px; padding:10px 20px;background: #ff9478;color:#fff}
.sp-math-problem-content{text-align: center;}
.sp-math-answer .cnt-fomular{line-height: 124px;text-align: center}
.sp-math-problem-guide>*{ position: absolute;left:0;right:0;animation: fadeInOut 1.5s both}
.sp-math-problem-guide>*:last-child{animation-name:fadeIn}
.sp-math h3{position: absolute;top: 59px;left:0;padding: 0 20px 5px 40px;border-bottom: 2px solid #31260b; font-size:30px;line-height: 40px}
.sp-math h3>span{position: absolute;font-size: 35px;margin-left: 40px;width: 720px}
.sp-tab-wrap{position: absolute;bottom:0;left:0;right:0;margin:0; padding-top:20px; border-top:1px solid #99853b;background: #d8c88e; text-align: center;}
.sp-tab-wrap .tab,.sp-tab-wrap li{display: inline-block;float: none}
.sp-tab-wrap li{margin:0 !important; vertical-align: bottom}
.sp-tab-wrap button{ display: block;width: 140px;height: auto; background: #eadcad;border-radius:20px 20px 0 0;font-size:25px;line-height: 2; color:#a09578}
.sp-tab-wrap button:before{display: none}
.sp-tab-wrap .active{padding-bottom:15px;border-top:2px solid #ff7c00; background:#ffa700 !important;color:#fff}
.sp-tab-wrap .none{display: none}
.sp-math-content{display: flex;flex-wrap: wrap;align-items: flex-end;height: 100%;position: relative;}
.sp-math-content .sp-math-side{margin-left: 30px;flex-shrink: 0;display: flex;flex-direction: column;height: 100%;width: 400px}
.sp-math-problem.wide+.sp-math-side{display: none}
.sp-math-side.sm{width: 360px}
.sp-math-side.md{width: 400px}
.sp-math-side.lg{width: 460px}
.sp-math-side .sp-math-answer{position: relative;flex: 1;margin-bottom: 88px;top: auto;right: auto;bottom: auto;width: 100%}
.sp-math-answer.d-block{padding: 80px 20px 0}
.sp-math-content .sp-math-problem{position: relative;height: calc(100% - 80px);flex: 1}
/*.question{background: #fff8ee;border: 5px solid #eee5ca;border-radius: 15px;text-align: justify;font-size: 35px;line-height: 1.2;padding: 10px 24px;letter-spacing: 0;margin-bottom: 20px}*/
.question{text-align: justify;font-size: 35px;line-height: 1.2;padding: 10px 24px;letter-spacing: 0;margin-bottom: 20px}
.question .font-serif{line-height: 1.1}
.question.type01{display:flex; align-items:center; justify-content:center; flex-flow:column; margin:0; padding:40px 12px; font-size:35px; line-height:45px;}
.question.type01 em{font-style:normal; color:red;}
.sp-math-answer.wide{height: 594px;top: 140px;left: 25px;right: 25px;bottom: auto;width: auto;padding: 0;background: none;border: 0}
.sp-math-answer.wide .btn-sp-math-answer{left: auto;right: 0;width: 360px}
.sp-math-answer.wide .btn-sp-math-answer:before{display: none}
.sp-math-answer.wide .explanation{position: absolute;left: 0;bottom: -90px;width: auto;white-space: nowrap;min-width: 360px; }
.sp-math-answer.part2{flex-direction: column;border:0; padding : 0;background-color: transparent;}
.sp-math-answer.part2>div{display: flex;width: 100%;flex: 1; align-items: center;justify-content: center; position: relative; border:3px solid #ffa700;border-radius:15px; background: #fff;padding:20px 20px}


[class*=tab-type]{position: absolute;z-index: 20}
.tab-type{align-items: flex-end}
.tab-type button{display: block;border-radius: 10px;min-width: 110px;padding: 5px 15px;font-size: 22px;letter-spacing: -.02em;line-height: 1.1;color: #464646;background: #e0d8c8;font-weight: 400;margin: 0 1px}
.tab-type button.active{color: #fff;background: #f9764d}
.tab-type1 li+li{margin-left: 3px}
.tab-type1 li button{position:relative;width: 84px;height: 96px;min-width: 84px;font-size: 15px;color: #333;padding-top: 56px;background-color: #f8f3e3;background-position: center 12px;background-repeat: no-repeat;background-size: 49px 50px;border-radius: 12px}
.tab-type1 li button.active{background-color: #ece4c9}
.tab-type1 li button:before{display: none}

.inner-tab{position: absolute;left: 0px;bottom: 0px;width: 100%;height: 595px}
.inner-tab .tab{position: absolute;bottom: 100%;left: 8px;margin: 0 0 -1px 0;float: none}
.inner-tab .tab button{width: 122px;min-width: 0;height: 52px;background: url(../img/common/inner_tab_left.png) 0 100%/contain no-repeat;font-size: 20px;line-height: 20px;color: #a09578;padding: 12px 8px 0 0}
.inner-tab .tab button.active{background-image: url(../img/common/inner_tab_left_on.png);color: #ffffff;padding-top: 0}
.inner-tab .tab li+li{margin-left: 0px}
.inner-tab .tab button:before{display: none}
.inner-tab .inner-content{position: relative;width: 100%;height: 100%;background-color: #fffcf6;border: 2px solid #deaf56;border-radius: 8px;padding: 25px}
.inner-tab .inner-tab-content{display: none;height: 100%}
.inner-tab .inner-tab-content.active{display: block}
.inner-tab-content .bottom-explain{left: 15px;bottom: 15px;right: 15px}

/* answer */
.sp-form-control{vertical-align: top}
.sp-form-control.min{width: 143px}
.input-md .sp-form-control.min{width: 95px}
.sp-form-control input{font-family: 'Noto Serif KR',serif !important;background: #fff;font-size: 90px}
.sp-form-control input.all, .sp-form-control input.font-sans{font-family: 'Noto Sans KR', 'Malgun Gothic','맑은 고딕','Apple SD Gothic Neo',sans-serif !important;font-size: 85px}
.answered .sp-math-answer:after{content:'';position: absolute;top:0;left:0;right:0;bottom:0;background:url("../../../../img/common/answered-o.png") no-repeat 50% 50% / auto 349px;}
.answered-x .sp-math-answer:after{background-image:url("../../../../img/common/answered-x.png");background-size: auto 317px}
.sp-form-control input.on{border-color: #31c191 !important}
.sp-form-control input.on + .pencil, .is-answer-open .sp-form-control .pencil, .sp-form-control.disabled input+.pencil{display: none}
.sp-form-control.disabled{pointer-events: none}
.sp-form-control.disabled input{animation: none}
.input-xs{font-size: 35px;line-height: 48px}
.input-xs .sp-form-control input{width: 56px;height: 56px;font-size: 45px;line-height: 48px}
.input-sm{font-size: 40px;line-height: 75px}
.input-sm .sp-form-control input{width: 75px;height: 75px;font-size: 55px;line-height: 67px}
.input-sm .pencil{width: 40px;height: 45px;}
.input-md{font-size: 55px;line-height: 86px;vertical-align: top}
.input-md .sp-form-control input{height: 86px;line-height: 70px;font-size: 65px}
.explanation{position:relative;display: none;width: 100%;font-size: 38px;line-height: 1.4em;border-radius: 12px;color: #0075d9;text-align: left;vertical-align: top}
.explanation .tit{position: absolute;left: 0;top: 8px;width: 75px;height: 40px;font-size: 24px;line-height: 40px;text-align: center;color: #fff;background: #0075d9;border-radius: 20px;font-family: 'Noto Sans KR', 'Malgun Gothic','맑은 고딕','Apple SD Gothic Neo',sans-serif}
.explanation .tit.org{background: #ff7900}
.explanation .tit.static{display: block;position: static}
.explanation .tit:not(.static) + div{padding-left: 87px}
.is-answer-open .sp-form-control *{animation: none !important;cursor: default}
.sp-math-answer .sp-math-explain{background:#f7f5ee; border-radius:13px; padding:20px 15px; font-size:50px; text-align:left;}
.sp-math-answer .sp-math-explain .sp-form-control input{height:60px; font-size:50px;}
.choice-items {display: inline-block;min-width: 170px;min-height: 70px;background: #f2f2f2;border-radius: 16px;box-shadow: 0px 3px 0px #d2d2d2;font-size: 30px;line-height: 68px;cursor: pointer;color: #a5a297;text-align: center;vertical-align: top}
.is-answer-open .choice-items{pointer-events: none}
.choice-items.d-block+.choice-items.d-block{margin-top: 15px}
.choice-items.active{background: #d25c41;box-shadow: inset 0px 3px 0px rgb(0 0 0 / 10%);color: #fff;text-shadow: 0px 2px 0px rgba(210, 92, 65, 0.75);}
.choice-items.box{position: relative;background: #f8f3e3;border: 4px solid #f8f3e3;border-radius: 16px;padding: 60px 30px 30px}
.choice-items.box.active{background: #ffffff;border: 4px solid #ff9478}
.choice-items.box.gray{background: #e8e4d5;border: 4px solid #e8e4d5}
.choice-items.box.gray.active{background: #ffffff;border: 4px solid #ff9478}
.choice-items.box .sect-num{position: absolute;left: 10px;top: 10px;margin: 0px}
.quiz-complete:not(.show), .pop-open .quiz-complete{display: none !important}
.sp-math-problem td .short-answer{position: relative;width: 100%;height: 100%;min-width: 0;display: block}
.sp-math-problem td .short-answer .before{top: 0;left: 0;right: 0;bottom: 0;border-radius: 0;font-size: inherit}
.bottom-explain{position: absolute;bottom: 0;left: 0;right: 0}
.bottom-explain .inner{display: flex;padding: 10px 15px;align-items: center;justify-content: center;font-size: 30px;background: #fbedcb;border-radius: 10px}
.bottom-explain .inner:before{content: '';display: block;width: 1px;height: 50px;}
.bottom-explain .badge{background: #ffa700;border-radius: 10px;padding: 2px;width: 82px;margin-right: 15px}
.bottom-explain .badge>span{display: block;font-size: 26px;line-height: 38px;border: 2px dashed #ffbc3d;border-radius: 10px;color: #fff}
.choice-area[class*=row-cols]{display: flex;flex-wrap: wrap;margin: 0 -5px}
.choice-area.row-cols-2>.choice-items{max-width: calc(50% - 10px);margin: 0 5px 10px;min-width: 0}
.sp-math-problem .short-answer{min-width: 0;position: absolute;width: 75px;height: 75px;font-size: 45px}
.sp-form-control input[readonly]{border-color: #f3e8c4 !important}
.sect-num{background: #a9a9a9;color: #ffffff;width: 38px;height: 38px;font-size: 26px;line-height: 36px}
.choice-items.active .sect-num{background: #ff9478}
.show-answer-group input::-webkit-input-placeholder{color: #fff;font-size: 0}
.show-answer-group input::-moz-placeholder{color: #fff;font-size: 0}
.show-answer-group input:-ms-input-placeholder{color: #fff;font-size: 0}
.show-answer-group input::-ms-input-placeholder{color: #fff;font-size: 0}
.show-answer-group input::placeholder{color: #fff;font-size: 0}
.is-answer-open .show-answer-group{pointer-events: none}
.is-answer-open .show-answer-group input::-webkit-input-placeholder{color: #000;font-size: inherit}
.is-answer-open .show-answer-group input::-moz-placeholder{color: #000;font-size: inherit}
.is-answer-open .show-answer-group input:-ms-input-placeholder{color: #000;font-size: inherit}
.is-answer-open .show-answer-group input::-ms-input-placeholder{color: #000;font-size: inherit}
.is-answer-open .show-answer-group input::placeholder{color: #000;font-size: inherit}
.is-answer-open .show-answer-group input{border-color: #31c191 !important}
.sp-btn{display: inline-block;font-size: 27px;color: #fff;min-width: 116px;padding: 0 20px;height: 50px;border-radius: 8px;vertical-align: top;text-shadow: 0px 2px 0px rgba(210, 92, 65, 0.75);background: #d25c41;font-weight: 500;box-shadow: inset 0px -3px 0px 0px rgba(0, 0, 0, 0.1)}
.sp-btn.ygrn{background: #88e560;text-shadow: 0px 3px 5px rgba(136, 229, 96, 0.75)}

/* feedback */
#tempFeedBack .back{position: fixed;top: 0;left: 0;z-index: 1040;width: 100vw;height: 100vh;background-color: #000;opacity: .5}
#tempFeedBack .inner{position:absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 453px;height: 297px;font-size: 40px;line-height: 52px;padding-top: 156px;color: #fff;text-align: center;z-index: 1050;-webkit-animaition:feedBackMotion ease 0.5s; -ms-animation:feedBackMotion ease 0.5s;animation:feedBackMotion ease 0.5s}
#tempFeedBack .inner.correct{background: url(../img/common/feedback_true.png) no-repeat 0 0 / 100% auto}
#tempFeedBack .inner.wrong{background: url(../img/common/feedback_false.png) no-repeat 0 0 / 100% auto}
.feedBackClose{width: 422px;height: 120px;margin: 0 auto;line-height: 116px}

@keyframes feedBackMotion{ 0%{opacity:0; margin-bottom:-15px; } 100%{opacity:1; margin-bottom:0px; } }
@-webkit-keyframes feedBackMotion{ 0%{opacity:0; margin-bottom:-15px; } 100%{opacity:1; margin-bottom:0px; } }
@-ms-keyframes feedBackMotion{ 0%{opacity:0; margin-bottom:-15px; } 100%{opacity:1; margin-bottom:0px; } }

/* popup */
.modal-sp-math .modal-dialog{z-index:2000;width: 683px;border:0 !important}
.modal-sp-math .modal-content{justify-content: center; height:345px; background:url("../../../../img/common/sp-modal-math.png") no-repeat 0 0 / 100% auto;font-size: 40px;letter-spacing: -.05em;text-align: center; color:#563c24;padding-top: 95px}
.modal-sp-math .modal-dialog-alert{width: 671px}
.modal-sp-math .modal-dialog-alert .modal-content{background-image: url(../img/common/alert.png);font-weight: 500;padding-top: 95px}
.modal-content .icon-sp-study{margin: 20px auto 0px auto;width: 200px;height: 60px;background: #31c191;font-size: 30px;line-height: 60px;color: #fff;text-shadow: 1px 1px 1px rgb(0 0 0 / 30%);border-radius: 8px;text-indent: 0}
.modal-sp-math-body>p{line-height: 1.2;letter-spacing: -.05em}
.modal-dialog-alert .icon-modal-close{background-image: url(../img/common/feedback_close.png);top: 55px;right: 18px;background-size: 30px;position: absolute;}

/* guide */
.sp-guide-list>li{display: none;animation:fadeIn 1s both}
.sp-guide-list>li.on{display: block}
.sp-guide-list>li.end .hand, .sp-guide-list>li.end .point-wrap{display: none}
.point-wrap{position: absolute}
.point-swipe .arrow{width: 190px;height: 59px;background: url(../img/common/swipe_arrow.png) no-repeat 0 0/100% auto}
.point-swipe .arrow.top{transform: rotate(90deg)}
.point-swipe .arrow.right{transform: rotate(180deg)}
.point-swipe .top+.hand{animation: slideInUp 1s 2 backwards}
.point-swipe .right+.hand{animation: slideInLeft 1s 2 backwards}
.point-swipe .hand:before{animation: none !important}
.sp-guide{z-index: 1000}
.sp-guide button{pointer-events: none}
.sp-guide.is-end, #sp.active .sp-guide{animation: sp-guide 1s 5s both}
.sp-guide .hand, .learning-pointer{width: 92px}
.sp-guide .hand:after, .learning-pointer .hand:after{width: 88px;height: 99px;margin: 0 auto}
.sp-guide .hand.point, .learning-pointer .hand.point{padding-top: 25px}
.sp-guide .hand.point:before, .learning-pointer .hand.point:before, .learning-pointer .dot{content: '';position: absolute;width: 61px;height: 61px;position: absolute;top: 0;left: 0;background: url(../img/common/sp-hand-pointer.png) no-repeat 0 0/100% auto;animation: flash 1s 2 both}
#sp .sp-guide{position: absolute;top: 140px;left: 25px}
#sp .sp-guide.full{top: 0;left: 0;right: 0;bottom: 0}
#sp .sp-guide li{position: absolute;left: 0px;top: 0px;pointer-events: none}
#sp .sp-guide .guide-animate.active{-webkit-animation-name: fadeIn;animation-name: fadeIn;-webkit-animationduration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both}
.learning-pointer{position: absolute;display: none}
.learning-pointer .dot{position: static;top: 0;left: 0;margin-bottom: -35px}
#sp .sp-guide.static{position: static;width: 100%;height: 100%;display: flex;align-items: center;animation: none;justify-content: center}
#sp .sp-guide.static:not(.active){display: none}
#sp:not(.sp-math-static) .sp-guide.static{position: absolute;top: 25px;left: 25px;right: 25px;height: 800px;width: auto}
.t-box{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;width: 1272px;height: 178px;background-color: #fff8ee;border: 8px solid #eee5ca;border-radius: 12px;box-shadow: 0px 2px 4px rgb(0 0 0 / 10%)}
.t-box p{font-size: 40px;width: 100%;text-align: center}
.t-box p em, .em{color: #f74d32;font-style: normal}
.wrapper{width: 1235px;margin-left: auto;margin-right: auto}
.sp-guide>.wrapper{margin: 0}
.wrapper .t-box{width: 100%;height: auto;padding: 26px 0}
.sp-guide.static:not(.active) .animate__animated, .audio-set .animate__animated:not(.on){animation: none;visibility: hidden}
.sp-guide .cnt{word-break: keep-all}
/* .audio-set [data-audio], .sp-guide [data-audio]{pointer-events: none} */
.intro-modal:not(.active)+.nav{display: none}
.icon-close{z-index: 1050;background-image: url(../img/common/modal-close.png)}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
    .sp-guide .cnt{letter-spacing: -.06em;padding-left: 40px}
    .sp-guide li b{left: 15px}
}

/* 개념학습 */
.sp-form-control input[readonly], .preparing .sp-math-problem .animate__animated{animation: none}
.sp-form-control input[readonly]+.pencil{display: none}
[class*=icon-input]{position: absolute}
.icon-input{width: 193px;height: 174px;background-image: url(../img/common/box2.png)}
.icon-input2{width: 120px;height: 107px;background-image: url(../img/common/box3.png)}
.icon-input-h{width: 164px;height: 146px;background-image: url(../img/common/input_h.png)}
.icon-input-h2{width: 197px;height: 146px;background-image: url(../img/common/input_h2.png)}
.icon-input-h3{width: 112px;height: 102px;background-image: url(../img/common/input_h3.png)}
.formula-txt{margin-top: 56px;font-size: 45px;line-height: 69px;text-align: center}
.formula-txt [class*="txt-box"]{display:inline-block; position:relative; border:2px solid #fffa68; border-radius:8px; box-shadow:3px 3px 1px #e7dab2, -3px -3px 1px #e7dab2, -3px 3px 1px #e7dab2, 3px -3px 1px #e7dab2; margin:0 11px; font-size:34px;line-height: 65px; padding:0 16px; color:white;vertical-align: top}
.formula-txt [class*="txt-box"]:before{content:""; position:absolute; left:0; top:0; border-radius:8px; width:100%; height:100%;}
.formula-txt .txt-box01{background:#12aeff;border-color: transparent;box-shadow:none;text-shadow:1px 2px #0585ff}
.formula-txt .txt-box02{background:#01b48c;}
.formula-txt .txt-box03{background:#ff749b}
.formula-txt .txt-box04{background:#0585ff}

.rect-box{position: relative}
[class*=rect-box-]{position: absolute;border-radius: 10px}
.rect-box-in{right:0;bottom:0}
.rect-box-in:not(.bulk)>[class*=rect-box-]{left: 0;top: 0}
.rect-box-ver{border-left:10px solid #ff749b;height: 100%}
.rect-box-hor{border-top:10px solid #01b48c;width: 100%}
.rect-box-all{right: 0;bottom: 0;border:10px solid #ffb905;border-radius: 0}
.rect-box-in.bulk{right: auto;bottom: auto;left: 0;top: 0}
.bulk .rect-box-ver{bottom: 0;border-top: 10px solid #ff749b;border-left: 0;transform-origin: bottom left;height: auto}
.bulk .rect-box-hor{border-top-color: #0585ff;bottom: 0}
.rect-box-hei{right: 0;top: 0;border-right: 10px solid #01b48c}

.animate__fade{animation-name: fade;animation-duration: 2s;}
@keyframes fade {
    0%, 100%{opacity: 0}
    50%{opacity: 1}
}

.dbox{display: inline-block; font-size: 30px;border:2px solid #b2b2b2;border-radius: 10px;padding: 3px ; background: #fff;  box-shadow: 0px 3px 0px rgb(0 0 0 / 10%);min-width: 60px;cursor: pointer;vertical-align: top}
.dbox.dragging, .dbox.ui-draggable-disabled{box-shadow: none;color: #ccc;border-color: #ddd}
.dbox.ui-draggable-dragging{z-index: 2}
.dbox>div{ background: #f3f3f3;border-radius: 8px;padding: 5px}

/* 그리기 */
.sp-math-side .draw-controls{max-height: 265px;margin-bottom: 15px;padding-top: 70px;padding-bottom: 20px}
.draw-controls{display: flex;font-size: 24px;justify-content: center;text-align: center}
.draw-controls>div{padding: 0 10px}
.draw-controls [role="button"]{width: 129px;height: 129px;margin: 0 auto 5px;background-size: auto 100%;background-position: 50% 50%;background-repeat: no-repeat}
.btn-pencil{background-image: url(../img/common/pencil.png)}
.btn-eraser{background-image: url(../img/common/eraser.png)}
.btn-pencil.active{background-image: url(../img/common/pencil_on.png)}
.btn-eraser.active{background-image: url(../img/common/eraser_on.png)}
.icon-draw-reset{width: 70px;height: 70px;background-image: url(../img/common/draw_reset.png);margin-top: 20px}
.drawing-zone:not(.on){pointer-events: none}
.img-inline>.drawing-zone{position: absolute;top: 0;left: 0}
.explanation .list-dot>li{font-size: 22px;margin: 0;line-height: 1.4}
.btn-sp-math-answer[data-show-target].active-show{font-size: 0;height: 72px}
.btn-sp-math-answer[data-show-target].active-show:before{content: '다시하기';font-size: 40px}

/* 다각형 */
.puzzle-controls{position: absolute;padding-bottom: 12px;display: none;transform: translate(-50%, -100%);z-index: 50}
.puzzle-controls .inner{width: 80px;height: 35px;border: 2px solid #b4a8a0;border-radius: 15px;background: #fff;box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.2);display: flex;justify-content: space-around;align-items: center}
.puzzle-controls button{width: 19px;height: 19px;background-size: auto 19px}
.icon-counterclockwise{background-image: url(../img/common/counterclockwise.png)}
.icon-clockwise{background-image: url(../img/common/clockwise.png)}
.icon-horizontal{background-image: url(../img/common/horizontal.png)}
.icon-vertical{background-image: url(../img/common/vertical.png)}

/* nav 스타일 추가 */
.nav-sub-wrp{font-size: 30px;padding:0;}
.nav-sub-wrp ul{display:flex;justify-content: flex-end;}
.nav-sub-wrp ul li{position: relative;margin-right:70px;}
.nav-sub-wrp ul li:last-child{margin-right: 0;}
.nav-sub-wrp ul li:last-child::after{display: none;}
.nav-sub-wrp ul li::after{content:"";width:45px;height:41px;background: url(../img/common/sub-nav-arr.png) no-repeat 50% 50% / 100% auto;position: absolute;right:-60px;top:50%;transform: translateY(-50%);}
.nav-sub-wrp ul li button{padding:0.5em;background: #eee;border-radius: 15px;color:#a5a297;box-shadow: 0 5px 0 #cbcbcb;}
.nav-sub-wrp ul .active{background:#d25c41;color:#fff;box-shadow: 0 5px 0 #b34f37;}


/*special 내 단위*/
.ml140 {margin-left: 140px;}
.mr130 {margin-right: 130px;}
.mr135 {margin-right: 135px;}
.mr115 {margin-right: 115px;}
.mr120 {margin-right: 120px;}
.mr80 {margin-right: 80px;}