@charset "utf-8";

@import url(common.css);

.flex-wrap{display: flex;flex-direction: column}
.flex-wrap #hd, .flex-wrap #ct>*:not(#fcontent){flex-shrink: 0}
.flex-wrap #ct{flex: 1;display: flex;flex-direction: column}
.flex-wrap #fcontent{flex: 1 1 auto;overflow: hidden;display: flex;align-items: center}
#fcontent .book{max-height: 100%;width: 100%;overflow: hidden;align-self: flex-start}
.vertical-section>.h-fix{height: 100%;display: flex;align-items: center;justify-content: center}

.icon-pencil{width: 55px;height: 55px;background-image: url(../img/common/pencil.png)}

.bubble-bg, .mCSB_container .bubble-bg{left: 0}
.bubble-bg-wrp{position: relative;z-index: 1; padding: 30px;padding-bottom: 0}
.bubble-bg-wrp .bubble-bg{width: 100%; top: 0;height: 100%}
[class*=col]>.bubble{height: 100%;display: flex;align-items: center;justify-content: center}

.icon-korean-play{width:72px;height:72px;margin:-10px 0 0 10px; background-image:url("../img/common/icon-korean-play.png")}
.sect+.sect{margin-top: 40px}
.badge-solution{padding: 2px 15px 4px;background: #19c383; border-radius:5px; box-shadow:0 4px 0 rgba(0,0,0,.1);font-size:30px;border: 0 !important;color:#fff}
.short-answer .before{padding-top: .09em}
.label-blue-border{background: #ecfeff}

.bx-dot-answer{border: 5px solid #ff7900;padding: 20px 40px}
.bx-dot-answer.round{border-radius: 40px}
.bx-dot-answer .list-dot>li{margin: 0 0 0 .8em;padding: 0;border-bottom: 4px solid #e9e9e9}
.bx-dot-answer .list-dot>li:before{position: static;float: left;margin-left: -.8em;color: #ff7900;padding: 25px 0}
.bx-dot-answer .short-answer{margin: 0}
.bx-dot-answer .short-answer .after:not(.drop-obj){border: 0;padding: 25px 0;font-size: inherit}
.bx-dot-answer .short-answer:not(.short-answer-block){margin: -30px 0}
.bx-dot-answer .list-dot>li.border-0:before, .bx-dot-answer .list-dot>li.border-0 .after{padding: .167em 0}
.bx-dot-answer .list-dot>li.border-0:before{margin-top: -.073em}
.bx-dot-answer.basic .list-dot>li:before{color: inherit}
.bx-orange{padding:30px 60px;border-color:#ffb905;background:#fff7e3}
.bx-dot-answer.type-blue{border-color: #00b5e3}
.bx-dot-answer.type-blue .list-dot>li:before{color: #00b5e3}
.bg-answer{ background:#def2ff; padding:10px 20px; border-radius: 15px; border:5px solid #7dc6f9;}
.bg-answer .bx-answer-o{display:flex;align-items:center;justify-content:space-between;-ms-align-items:center;-ms-justify-content:space-between;margin:10px 0;padding: 15px 30px;background:#fff;border-radius:15px}
.bg-answer .bx-answer-o p{display:inline-block;width:82%; font-size:50px;}
.bx-answer-o .choice{width:150px;height:120px;border:5px solid #ddd;border-radius:15px;background:#fff;margin-top:5px;margin-left:20px;flex-shrink: 0}
.bx-answer-o .choice label{display:inline-block;width:150px;height:120px;text-align:center}
.bx-answer-o .choice > span{width:100%;height:100%;}
.bx-answer-o .choice .answer{background:url(../img/common/icon-quiz-o.png) no-repeat center center;background-size:100px auto;}
.bx-answer-o .choice .answer2{background:url(../img/common/answered-x.png) no-repeat center center;background-size:80px auto;}


.b-letter{line-height: 1.6em;background: repeating-linear-gradient(to top,#99dff9,#99dff9 3px,#fff 3px,#fff 1.6em);text-indent: .6em;}
.text-indent-0{text-indent: 0 !important}

.tb tr>*{padding: 18px 20px}
.tb tr>.short-answer{padding-top: 15px;padding-bottom: 15px}
.tb input[type=text]{margin: 0}
.tb .bx-dot-answer, .bx-dot-answer.basic{border-color: #ddd;border-radius: 15px}
.tb .bx-dot-answer .list-dot>li{font-size: 55px}
.tb .bx-dot-answer .list-dot>li:before{color: inherit}
.border-thick{border-width: 5px !important}
.tb-wrap { margin-left:-10px; margin-right:-10px;}
td.short-answer .after.text-left, td.short-answer .after.text-justify { padding-left:0;padding-right:0; }

.blackboard.v2 .title{color: #ffeeac}
.bx-m { display:inline-block; width:150px; padding: 35px;margin-top:-5px;margin-bottom: 0px; vertical-align: middle;border-width: 5px;}

.h2-num .num { font-weight: 600;}
.h2-num .section-num .num, .h2-num .sect-num { border:3px solid #ddd; line-height: 1.2em;;}
.list-dot>li.dot:before { top:10px;}


/* 무엇을 배울까요 */
.next-step, .current-step{position: relative;width: 100%}
.next-step li, .current-step li{position: absolute;font-size:35px;text-align: center;width: 262px;height: 221px;display: flex;align-items: center;justify-content: center;word-break: keep-all;cursor: pointer}
.modal .modal-next-step{height: auto;background: none;border: 0;background: transparent}
.modal-next-step .modal-content{margin: 0 auto;width: 965px;height: 545px;border: 15px solid #00bd76;padding-top: 25px}
.next-step-wrp{position: relative;font-size: 60px;text-align: center;line-height: 75px;width: 475px;height: 370px;background: url(../img/korean/step.png) no-repeat 0 0/100% auto;padding-top: 23px;display: flex;align-items: center;justify-content: center;margin: 10px auto 0}
.next-step-wrp:after{content: '';position: absolute;width: 119px;height: 151px;background: url(../img/korean/mole2.png) no-repeat 0 0/100% auto;bottom: 15px;right: -70px}
.step-badge{position: absolute;top: 0;left: 194.5px;width: 75px;line-height: 67px;text-align: center;font-size: 40px;text-align: center;color: #fff;}
.modal .slide-pn-dot .swiper-container{padding-bottom: 60px}
.swiper-control{bottom: 25px}
.modal .swiper-control{bottom: 0}
.mole{position: absolute;top: 75px;left: 100px;animation: mole 1.5s both linear}
.mole .body{display: block;width: 110px;height: 98px;background: url(../img/korean/mole.png) no-repeat 0 0/auto 98px;animation: moleBody .3s steps(2) 10}
.next-step li:not(.active){pointer-events: none}
.next-step .mole2{position: absolute;width: 90px;height: 95px;right: -50px;background: url(../img/korean/mole2_1.png) no-repeat 0 0/100% auto;bottom: 15px}
.next-step .mole2:before, .next-step .mole2:after{content: '';position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: url(../img/korean/mole2_3.png) no-repeat 0 0/100% auto}
.next-step .mole2:before{background-image: url(../img/korean/mole2_2.png)}
.next-step .active:after{content: '';position: absolute;width: 60px;height: 60px;right: 0;bottom: 15px;background: url(../img/common/icon-act.png) no-repeat 0 0/100% auto}
.next-step .active:hover:after{background-image:url(../img/common/icon-act-hover.png)}
.next-step .mole2{animation: fadeIn .3s 1.5s both}
.next-step .mole2:before{animation: moleInUp .5s 2s both}
.next-step .active:after{animation: fadeIn .5s 2.5s both}
.current-step{border-radius: 15px;box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.2)}
.current-step li{width: 298px;height: 253px;cursor: auto}
.boundary{position: absolute;top: 0;left: 0;bottom: 0;width: 405px;overflow: hidden}
.tunnel{position: absolute;width: 86px;height: 160px;background: url(../img/korean/tunnel_up.png) no-repeat 0 0/auto 100%;left: 335px;top: 105px}
.boundary:before{content: '';position: absolute;width: 86px;height: 160px;background: url(../img/korean/tunnel_bottom.png) no-repeat 0 0/auto 100%;left: 335px;top: 105px;}

@keyframes moleBody {
    from{background-position: 0 0}
    to{background-position: -220px 0}
}

@keyframes mole {
    0%{transform: translate(0,0) scale(1) rotate(-0);;}
    75%{transform: translate(230px,100px) scale(.8) rotate(-38deg)}
    100%{transform: translate(305px,100px) scale(.8) rotate(-38deg)}
}

@keyframes moleInUp {
    0%,60%,75%,90%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,10px,0);
        transform: translate3d(0,10px,0);
    }

    90% {
        -webkit-transform: translate3d(0,-1px,0);
        transform: translate3d(0,-1px,0);
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

/* 단원정리 */
.assessment-wrp .bx{font-size: 50px;margin: 20px 0}
.assessment input{ position: absolute;left: 0;z-index: -1;width: 1rem;height: 1.25rem;opacity: 0}
.assessment{display: flex;flex-direction: row-reverse; justify-content:center;}
.assessment>label{margin-left: 20px}
.assessment>label:last-child{margin-left:0;}
.assessment input+i{display: block;width: 80px;height: 80px;border-radius: 100%;background: #dedede}
.assessment input:checked+i, .assessment .active~label input+i{background: #00c3cf}
.unit-summary{margin-top: 60px;position: relative;align-items: center}
.unit-summary:before{content: '';position: absolute;width: 993px;height: 385px;background: url(../img/korean/line.png) 50% 50%/100% auto;bottom: 67px;left: 50%;margin-left: -496px}
.unit-summary .label{position: relative;width: 389px;height: 277px;text-align: justify;display: flex;align-items: center;font-size: 50px;padding: 20px;margin: 0 auto}
.unit-summary .icon-zoom{position: absolute;right: 15px;bottom: 15px}
.unit-summary:before { background:url(../img/korean/line2.png) 50% 50%/100% auto no-repeat;  width:800px; height:850px; bottom:-200px; left:58%; }
.unit-summary .label { height:240px; }
.folder .top{display: flex;justify-content: space-between;font-size: 50px;overflow: hidden;border-radius: 15px 15px 0 0;margin: 0 -3px}
.folder .top>*{margin: 0 3px;color: #fff}
.folder .label{overflow: hidden;padding: 20px;text-align: center;line-height: 50px;font-size: 50px;background: #b7b7b7;flex: 1;border-radius: 15px 15px 0 0;display: flex;flex-direction: column;z-index: 10;transform:translateX(0);color: #fff}
.folder .name{display: flex;align-items: center;padding: 0 10px 0 30px;justify-content: center;width: 370px;background: #b7b7b7;border-radius: 15px 15px 0 0}
.folder .cont{padding: 10px;background: #b7b7b7;border-radius: 0 0 15px 15px}
.folder-item{display: flex;flex-wrap: wrap;}
.folder-item+.folder-item{margin-top: -6px}
.folder-item>*{background: #fff;border: 6px solid #eee;border-radius: 15px}
.folder-item .txt{flex: 1;font-size: 40px;padding: 10px .5em;display: flex;align-items: center}
.label-eval{width: 125px;margin-left: -6px;display: flex;align-items: center;justify-content: center}
.label-eval i{display: block;width: 79px;height: 79px;background-repeat: no-repeat;background-size: 79px auto;margin: 10px 0}
.label-eval .good{background-image: url(../img/korean/1_off.png)}
.label-eval .well{background-image: url(../img/korean/2_off.png)}
.label-eval .normal{background-image: url(../img/korean/3_off.png)}
.label-eval .bad{background-image: url(../img/korean/4_off.png)}
.label-eval input:checked+.good{background-image: url(../img/korean/1.png)}
.label-eval input:checked+.well{background-image: url(../img/korean/2.png)}
.label-eval input:checked+.normal{background-image: url(../img/korean/3.png)}
.label-eval input:checked+.bad{background-image: url(../img/korean/4.png)}

/* 스페셜 */

.player{overflow: hidden; position: absolute;top:0;bottom:0;left:0;right:0;z-index: 999; }
.player-poem{height: 862px;margin-top:90px}
.player-poem .video-full{top:0;left:0; width:100%;height: auto}
.player-poem .video-full video{display: block;position: static;width: 100%}

.player-novel{height: 862px;margin-top:90px}
.player-novel .video-full{top:0;left:0; width:100%;height: auto}
.player-novel .video-full video{display: block;position: static;width: 100%}

.player-bg-wh:not(.player-mode3):after{content:'';display: block;position: absolute;top:0;bottom:0;left:0;right:0;background: rgba(255,255,255,.5)}
[class^=icon-player]{width:65px;height:65px; background-image:url("../img/common/player-ctr-1.png");vertical-align:top}
.icon-player-ctr-2{background-image:url("../img/common/player-ctr-2.png")}
.icon-player-ctr-3{background-image:url("../img/common/player-ctr-3.png")}
.icon-player-ctr-4{background-image:url("../img/common/player-ctr-4.png")}
.icon-player-ctr-5{background-image:url("../img/common/player-ctr-5.png")}
.icon-player-ctr-6{background-image:url("../img/common/player-ctr-6.png")}
.icon-player-ctr-7{background-image:url("../img/common/player-ctr-7.png")}
#player-folding{display:none;position: absolute;top:5px;right:20px; background-image:url("../img/common/player-ctr-8.png")}
[class^=icon-player].active{background-image:url("../img/common/player-ctr-1-active.png")}
.icon-player-ctr-2.active{background-image:url("../img/common/player-ctr-2-active.png")}
.icon-player-ctr-3.active{background-image:url("../img/common/player-ctr-3-active.png")}
.icon-player-ctr-4.active{background-image:url("../img/common/player-ctr-4-active.png")}
.icon-player-ctr-5.active{background-image:url("../img/common/player-ctr-5-active.png")}
.icon-player-ctr-6.active{background-image:url("../img/common/player-ctr-6-active.png")}
.icon-player-ctr-7.active{background-image:url("../img/common/player-ctr-7-active.png")}
#player-folding.active{top:17px;right:17px;background-image:url("../img/common/player-ctr-8-active.png")}
.icon-player-play{background-image:url("../img/common/player-play.png")}
.playing .icon-player-play{background-image:url("../img/common/player-pause.png")}
.icon-player-stop{background-image:url("../img/common/player-stop.png")}
.icon-player-close{position: absolute;top:15px;right:15px; width:47px;height:47px; background-image:url("../img/common/player-close.png");}
.player-top{position: absolute;top:15px;left:15px;}
.icon-player-more{width:61px;height:61px; background-image:url("../img/common/player-more.png");}
.player-cnt{position: absolute;top:80px;left:150px;right:150px;z-index:10; font-size:45px;transition:transform 1s linear; padding: 0 10px}
.player-cnt h3{font-size:50px;}
.player-cnt .author{margin-bottom: 30px;font-weight:400; font-size:24px;}
.player-cnt p{margin-bottom: 1em}
.player-cnt .active{color:#ff008a}
.player-cnt-short{left: auto;white-space: nowrap}
.player-cnt-short .author{text-align: right}
.player-ctr{display: flex;position: absolute;bottom:0px;left:0px;right:0px;z-index:20; height:95px;padding-left:30px;border-radius:px;box-shadow:0 10px 10px rgba(0,0,0,.2); background: #00bd76}
.player-ctr>*{position: relative;padding: 15px 20px 20px}
.player-bar{position: relative;width:440px;margin:0 10px; padding:22px 0 0}
.player-bar input{width: 100%;margin-top:15px; vertical-align:top}
.playbar-page{position: absolute;bottom:66px;margin-left:15px; padding:8px 10px; background: #fff;border-radius:15px;box-shadow:0 2px 6px rgba(0,0,0,.1);font-size:20px;opacity: 0;transform: translate(-50%,0);pointer-events:none;transform-origin: bottom}
.playbar-page:before{content:'';position: absolute;top:100%;left:50%;margin-left: -8px;border:8px solid; border-color:#fff transparent transparent}
.playbar-page.active{opacity:1;pointer-events: auto}
.playbar-page:hover{z-index:1; transform:translate(-50%,0) scale(1.3)}
input[type=range]{vertical-align:top;outline:0 !important;-webkit-appearance:none}
input[type=range]::-webkit-slider-runnable-track{height:20px;background:#008e38;border:0;border-radius:9em}
input[type=range]::-webkit-slider-thumb{border:0;width:36px;height:38px;margin:-8px 0;background:url("../img/common/player-playbar.png");background-size:100%;-webkit-appearance:none}
input[type=range]::-ms-track{height:20px;background:none;border-color:transparent;border-width:6px 0;border-radius:9em;color:transparent}
input[type=range]::-ms-fill-lower,input[type=range]::-ms-fill-upper{background:#008e38;border-radius:9em}
input[type=range]::-ms-thumb{width:36px;height:38px;border:0;background:url(../img/common/player-playbar.png);background-size:100%}
input[type=range]::-ms-tooltip{display:none}
.player-status{ margin-top:10px; font-size:30px;color:#6bd9b1}
#player-time{color:#fff}
#player-speed-layer{display: none;position: absolute;bottom:100%;right: -27px;margin-bottom:8px; padding:10px 20px; background: #f4f4f4;border-radius:10px;box-shadow:0 2px 2px rgba(0,0,0,.1);}
#player-speed-layer.active{display: block}
#player-speed-layer:before{ content:''; display: block;position: absolute;top:100%;left:50%;margin-left: -15px; border:15px solid;border-color:#f4f4f4 transparent transparent;}
#player-speed-layer li{padding: 5px 0; border-top:1px solid #fff;border-bottom:1px solid #dddcdc}
#player-speed-layer li:first-child{border-top:0;}
#player-speed-layer li:last-child{border-bottom:0;}
#player-speed-layer button{display: block;width:100px;border-radius: 5px; font-size:30px;line-height: 55px; color:#008e38;}
#player-speed-layer .active{background: #fff}
.player.active .player-ctr{left: auto; background:none;box-shadow:none;}
.player.active .player-ctr>div{display:none}
.player.active .icon-player-ctr-8{width: 78px;height:78px;margin:-8px; background-image:url("../img/common/player-ctr-8-active.png")}
.player-mode3 .player-cnt{display:none}
.icon-player-ctr-8{margin: 10px 0}
.player-novel .player-cnt{top: auto;bottom:160px;text-align: center}
.player-novel .player-cnt h3,.player-novel .player-cnt .author,.player-novel .player-cnt br,
.player-novel [data-mirror-toggle="player"]:not(.active){display: none}
.player-novel .player-cnt p{margin:0}
.player-novel .player-cnt .active br{display: block}

/* 문제 */
.quiz-content .section-num+.bx{margin-top: 20px}
[data-canvas] .bx.d-flex{align-items: center}
.bx>.bubble{margin: -6px -6px 0}
input:checked+.invisible{visibility: visible !important}
.short-answer .after[class*=bg]{border-color: transparent}
.choice-or.active .answer{position: relative;color: #0075d9}
.choice-or.active .answer:after{content:'';position: absolute;top:50%;left:50%;width:2em;height:2em;margin: -1em; background:url(../img/common/icon-quiz-o.png) no-repeat 0 0 / 100% auto;}

.tab-button{position: fixed}

.list-ex>li{text-align:left; margin:30px 0;}
.circle-gray{position: relative; display: inline-block; top: -0.1em; width: 50px; height: 50px; border-radius: 50%; background: #bcbcbc; font-size: 35px; line-height: 1.4em; text-align: center; color: #fff; margin-right: 15px;}

.txtbg{display: block; background: #fff; opacity: 0.5; border-radius: 10px; word-wrap:keep-all;}
.txtbgB{display: block; background: #000; opacity: 0.5; border-radius: 10px; word-wrap:keep-all;}
.short-answer.w-auto { min-width: auto;}
.sect-num.num-lc { position: absolute; top:50%; left:0%; line-height:1.3em; transform: translate(-50%,-50%); margin-top:0; border:3px solid #ddd; }
.sect-num.num-lt { position: absolute; top:0%; left:0%; line-height:1.3em; transform: translate(-50%,-50%); margin-top:0; border:3px solid #ddd; }

.ellipse-num { display: inline-block; padding:0px 25px; background-color: #00c3cf; color: #fff; border-radius: 50px; font-size: 38px;}
.drag-obj { cursor: pointer;}