@charset "utf-8";[data-sprite-btn] {
    cursor:pointer
}

.contentsBox.right .basicSlider_tabs>li{word-break:break-all;}
figure {
    position:relative
}

figure img {
    vertical-align:top
}

.imgBgContainer {
    position:relative;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    box-sizing:border-box
}

.canvasContainer {
    cursor:pointer
}

#wrap header .title[data-together]{padding-left:80px;}
#wrap header .title[data-together="talk"]::before{
    content:"";
    display:block;
    transform:translateY(-13px);
    width:70px;
    height:67px;
    background:url(../../contents/images/icon/title-blt-new-1.png) no-repeat 0 0 / contain;
}
#wrap header .title[data-together="play"]::before{
    transform:translateY(-6px);
    width:70px;
    height:55px;
    background:url(../../contents/images/icon/title-blt-new-2.png) no-repeat 0 0 / contain;
}
#wrap header .title[data-together="make"]::before{
    transform:translateY(-4px);
    width:70px;
    height:46px;
    background:url(../../contents/images/icon/title-blt-new-3.png) no-repeat 0 0 / contain;
}
#wrap header .title[data-together="active"]::before{
    transform:translateY(-4px);
    width:70px;
    height:46px;
    background:url(../../contents/images/icon/title-blt-new-7.png) no-repeat 0 0 / contain;
}

h2  .toggleBlank.circle{transform:translate(0, 12px);}
header .title img[src*="equalIcon"],
h2 img[src*="equalIcon"] {
    height:11px;
    vertical-align:middle;
    margin:-7px 0 0 0
}

header .title img[src*="inequalIcon"],h2 img[src*="inequalIcon"] {
    height:40px
}

.study_guide {
    position: absolute;
    height: 30px;
    line-height: 30px;
    color: #787272;
    font-size: 18px;
    font-family: NotoB;
    vertical-align: top;
    padding: 0 26px 0 44px;
    border-radius: 30px;
    background: #f4f4f4 url(../../contents/images/icon/icon_info.png) 21px center/16px auto no-repeat;
    box-sizing: border-box
}
h2 .colorBox{
    padding:5px 14px;
    line-height:1 !important;
    box-sizing:border-box;
    max-height:-21px;
    display:inline-block;
}
h2 .study_guide{
    bottom:-40px !important;top:auto !important;right:0 !important;left:auto !important;
}
.study_guide em {
    color:#232323
}

.guide_container {
    position:relative;
    height:30px;
    margin-bottom:10px
}

.guide_container .study_guide {
    position:static;
    float:right
}

.listenContainer {
    position:absolute;
    display:inline-flex;
    top:20px;
    left:20px;
    height:30px;
    z-index:1
}

.listenContainer>li {
    padding:0 22px 0 38px;
    height:100%;
    color:#fff;
    font-size:15px;
    line-height:31px;
    text-align:center;
    font-family:YGJAL;
    border-radius:10px;
    vertical-align:top;
    background-size:auto 22px;
    background-color:#ffb100;
    background-position:9px 4px;
    background-repeat:no-repeat;
    box-sizing:border-box;
    cursor:pointer
}

.listenContainer>li:not(:last-of-type) {
    margin-right:8px
}

.listenContainer .songBtn,.listenContainer .rhythmBtn {
    background-image:url(../../contents/images/icon/icon_musicNote.svg)
}

.listenContainer .changeBtn {
    background-image:url('../../contents/images/icon/icon_musicNote_note.svg')
}

.listenContainer>li.hover,.listenContainer>li.on {
    background-color:#f60
}

.mediaContainer .listenContainer {
    top:-530px
}

.blockSpan {
    display:block;
    margin-bottom:10px;
    position:relative;
    width:337px
}

.blockSpan .qBox:first-child {
    margin-left:114px
}

.docDownBtn {
    position:absolute;
    display:inline-block;
    height:39px;
    padding:0 16px 0 42px;
    color:#fff;
    font-size:15px;
    font-family:YGJAL;
    line-height:39px;
    border-radius:30px;
    background:#f77c19 url(../../contents/images/icon/icon_down.svg) 13px center/20px auto no-repeat;
    box-sizing:border-box;
    z-index:1
}

.docDownBtn.hover {
    background-color:#666
}

.click-Mouse-Btn,.click-finger-Btn {
    position:absolute;
    box-sizing:border-box;
    cursor:pointer
}

.click-Mouse-Btn {
    width:50px;
    height:50px;
    border-radius:50%;
    background:#f60 url(../images/icon/icon_click.svg) center top/23px no-repeat
}

.click-Mouse-Btn.hover {
    background-color:#666
}

.click-finger-Btn {
    width:51px;
    height:70px;
    background:url("../images/icon/icon_click_finger.png") center/contain no-repeat
}

.click-finger-Btn.hover {
    transform:scale(0.92)
}

.click-Mouse-Btn.inline,.click-finger-Btn.inline {
    vertical-align:top
}

.playDataList>li {
    display:flex;
    align-items:flex-start;
    flex-wrap:wrap
}

.playDataList>li:not(:last-of-type) {
    margin-bottom:30px
}

.playDataList dl {
    position:relative;
    display:flex
}

.playDataList dl dt {
    position:relative;
    min-width:186px;
    height:46px;
    color:#fff;
    flex-shrink:0;
    font-size:24px;
    padding:0 0 0 38px;
    text-align:center;
    line-height:46px;
    font-family:YGJAL;
    align-self:flex-start;
    border-radius:8px 30px 30px 8px;
    background-color:#ffbc47;
    box-sizing:border-box
}

.playDataList dl dd {
    position:relative
}

.playDataList dl dt:before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:50px;
    height:100%;
    margin-right:10px;
    border-radius:8px 30px 30px 8px;
    background:#ff8c40 url(../images/icon/icon_toy.svg) center/30px no-repeat
}

.playDataList .row {
    flex-direction:row;
    justify-content:space-between;
    width:49%
}

.playDataList .row.full {
    width:100%
}

.playDataList .row dt {
    margin-right:15px
}

.playDataList .row dd {
    width:100%
}

.playDataList .column {
    width:100%;
    flex-direction:column
}

.playDataList .column:before,.playDataList .column:after {
    content:'';
    position:absolute;
    background-color:#ffbc47
}

.playDataList .column:before {
    top:23px;
    height:2px;
    width:100%
}

.playDataList .column:after {
    top:18px;
    right:0;
    width:12px;
    height:12px;
    border-radius:50%
}

.playDataList .column dt {
    margin-bottom:20px
}

.playDataList .contentsList .contentsList {
    margin-top:4px
}

.supply_guide,.pages_guide {
    position:absolute;
    padding:0 14px 0 36px;
    height:32px;
    font-size:17px;
    line-height:32px;
    color:#787272;
    text-align:center;
    font-family:YGJAL;
    background-color:#f4f4f4;
    border-radius:0 10px 0 0;
    box-sizing:border-box;
    vertical-align:top
}

.supply_guide:before,.pages_guide:before {
    content:'';
    position:absolute
}

.supply_guide:before {
    bottom:0;
    left:-4px;
    width:27px;
    height:38px;
    background:url(../images/icon/icon_pencil_case.svg) center bottom/contain no-repeat
}

.pages_guide:before {
    top:0;
    left:0;
    width:25px;
    height:35px;
    background:url(../images/icon/icon_bookmark.svg) center top/contain no-repeat
}

.supply_guide.inline,.pages_guide.inline {
    position:relative;
    display:inline-block;
    margin:14px 0 0 5px;
}

.supply_guide.right,.pages_guide.right {
    position:relative;
    float:right
}

header .title .supply_guide.inline,header .title .pages_guide.inline {
    margin:0 0 0 5px
}

.icon_arrow {
    display:inline-block;
    width:31px;
    height:28px;
    background:url(../../contents/images/icon/icon_arrow.svg) center/contain no-repeat
}

.icon_arrow.big {
    width:51px;
    height:45px
}

.icon_arrow.shrink,.contentsList .icon_arrow {
    flex-shrink:0
}

.icon_arrow.shrink {
    margin:0 10px 0 0
}

.contentsList .icon_arrow {
    margin:8px 10px 0 0
}

.contentsList.inList .icon_arrow+* {
    width:100%
}

.contentsList .icon_arrow.big {
    margin:-2px 10px 0 0;
    vertical-align:top
}

.contentsList .icon_arrow.mt {
    margin-top:14px
}

.icon_arrow.dash {
    background:url(../../contents/images/icon/icon_arrow_dash.svg) center/contain no-repeat
}

.icon_arrow.left {
    transform:rotate(180deg)
}

.icon_arrow.top {
    transform:rotate(270deg)
}

.icon_arrow.bottom {
    transform:rotate(90deg)
}

.icon_bogi {
    position:relative;
    display:inline-block;
    width:60px;
    height:32px;
    text-align:center;
    border-radius:10px 0;
    background-color:#f6e7d4;
    box-sizing:border-box
}

.icon_bogi:after {
    display:block;
    content:'보기';
    color:#8e795e;
    font-size:18px;
    font-family:YGJAL;
    line-height:32px
}
h2 .card-num{
    height:40px;
    display:inline-block;
    transform:translate(0,4px);
}
h2 .icon_bogi,h3 .icon_bogi {
    height:42px;
    margin:10px 0 0 0;
    border-radius:10px;
    vertical-align:top;
    padding:3px 10px;
    width:auto;
}

h2 .icon_bogi:after,h3 .icon_bogi:after {
    font-size:26px;
    line-height:36px
}
/* 아이콘 색깔 레드 추가 */
h2 .icon_o_red {
    margin:3px 0 0 0;
}

h2 .icon_o_red {
    vertical-align:top;
}
.icon_o_red {
    width:36px;
    height:36px;
    background-image:url(../images/icon/icon_O_red.png);
}
.icon_o_red2 {
    width:40px;
    height:40px;
    background-image:url('../images/icon/icon_O_red2.png');
    display:inline-block;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    margin-bottom:-5px;
}
h2 .supply_guide.titleRight {
    position:absolute;
    bottom:0;
    right:0;
    letter-spacing:0;
}

.bogiContainer {
    position:relative;
    margin:0 auto;
    min-width:230px;
    padding:4px;
    background-color:#f6e7d4;
    border-radius:15px;
    box-sizing:border-box
}

.bogiContainer .icon_bogi {
    position:absolute;
    top:0;
    left:0
}

.bogiContainer .inner {
    box-sizing:border-box;
    width:100%;
    background:#fff;
    border-radius:15px;
    padding:30px 20px;
    pointer-events:auto
}

.bogiContainer .inner.blue {
    color:#fff;
    background-color:#1886cd
}

.bogiContainer .inner .bogiCard {
    width:330px;
    height:95px;
    color:#fff;
    line-height:95px;
    text-align:center;
    box-sizing:border-box
}

.bogiContainer .bogiCard.character {
    border:1px solid #b8b8b8;
    text-align:center;
    background:#d5d5d5 url(../../contents/images/icon/icon_character.png) center/68px 75px no-repeat
}

.bogiContainer .bogiCard.blue {
    border-right:2px solid #36afe2;
    border-top:2px solid #36afe2;
    box-shadow:0 0 2px #309dcb;
    background-color:#1b8aba
}

.animal {
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center
}

.animal.bee.heart {
    background-image:url("../images/animal/svg_bee_heart.svg")
}

.animal.bee.star {
    background-image:url("../images/animal/svg_bee_star.svg")
}

.animal.bee.write {
    background-image:url("../images/animal/svg_bee_writing.svg")
}

.animal.cat.front {
    background-image:url("../images/animal/svg_cat_front.svg")
}

.animal.cat.hello {
    background-image:url("../images/animal/svg_cat_hello.svg")
}

.animal.doggy {
    background-image:url("../images/animal/svg_doggy.svg")
}

.arrowLine {
    position:absolute;
    text-align:center
}

.arrowLine.sky {
    border:3px solid #00b0f0
}

.arrowLine.red {
    border:3px solid red
}

.arrowLine:after {
    content:'';
    position:absolute;
    width:0;
    height:0;
    border-style:solid;
    border-width:10px 6px
}

.arrowLine.btb {
    border-bottom:0
}

.arrowLine.btb:after {
    border-style:solid;
    border-width:10px 6px
}

.arrowLine.btb.sky:after {
    border-color:#00b0f0 transparent transparent transparent
}

.arrowLine.btb.red:after {
    border-color:#f00 transparent transparent transparent
}

.arrowLine.tbt {
    border-top:0
}

.arrowLine.tbt.sky:after {
    border-color:transparent transparent #00b0f0 transparent
}

.arrowLine.tbt.red:after {
    border-color:transparent transparent #e94d40 transparent
}

.arrowLine.arrow {
    position:relative;
    display:inline-block;
    transform-origin:center;
    -webkit-transform-origin:center
}

.arrowLine.arrow.left {
    transform:rotateY(-180deg)
}

.arrowLine.arrow.top {
    transform:rotate(-90deg)
}

.arrowLine.arrow.bottom {
    transform:rotate(90deg)
}

.arrowLine.arrow.top,.arrowLine.arrow.bottom {
    transform-origin:left top;
    -webkit-transform-origin:left top
}

.arrowLine.arrow:before {
    content:'';
    position:absolute;
    top:50%;
    left:0;
    width:calc(100% - 16px);
    border-width:5px 0 0 0;
    border-style:solid;
    transform:translateY(-50%)
}

.arrowLine.arrow.dash:before {
    width:calc(100% - 18px);
    border-style:dashed
}

.arrowLine.arrow:after {
    border-width:10px 18px;
    top:50%;
    right:-18px;
    transform:translateY(-50%)
}

.arrowLine.arrow.pink:before {
    border-color:#f6a1ae
}

.arrowLine.arrow.blue:before {
    border-color:#508abd
}

.arrowLine.arrow.purple:before {
    border-color:#cabfe0
}

.arrowLine.arrow.orange:before {
    border-color:#fccd89
}

.arrowLine.arrow.green:before {
    border-color:#cee492
}

.arrowLine.arrow.lightRed:before {
    border-color:#e94d40
}

.arrowLine.arrow.pink:after {
    border-color:transparent transparent transparent #f6a1ae
}

.arrowLine.arrow.blue:after {
    border-color:transparent transparent transparent #508abd
}

.arrowLine.arrow.purple:after {
    border-color:transparent transparent transparent #cabfe0
}

.arrowLine.arrow.orange:after {
    border-color:transparent transparent transparent #fccd89
}

.arrowLine.arrow.green:after {
    border-color:transparent transparent transparent #cee492
}

.arrowLine.arrow.lightRed:after {
    border-color:transparent transparent transparent #e94d40
}

.speaker_icon {
    position:absolute;
    width:70px;
    height:70px;
    background:#e7e7e7 url(../images/icon/icon_speaker.svg) 11px center /45px auto no-repeat;
    border-radius:50%
}

.speaker_icon.on,.speaker_icon.hover {
    background:#f6e7d4 url(../images/icon/icon_speaker_on.svg) 11px center /45px auto no-repeat
}

.faceIcon {
    width:100px;
    height:100px;
    cursor:pointer
}

.faceIcon_good {
    background:url(../images/icon/icon_fave_good.png) center/auto 80% no-repeat
}

.faceIcon_good.on {
    background:url(../images/icon/icon_fave_good_on.png) center/auto 80% no-repeat
}

.faceIcon_soso {
    background:url(../images/icon/icon_fave_soso.png) center/auto 80% no-repeat
}

.faceIcon_soso.on {
    background:url(../images/icon/icon_fave_soso_on.png) center/auto 80% no-repeat
}

.faceIcon_bad {
    background:url(../images/icon/icon_fave_bad.png) center/auto 80% no-repeat
}

.faceIcon_bad.on {
    background:url(../images/icon/icon_fave_bad_on.png) center/auto 80% no-repeat
}

.flex-wrap {
    display:flex;
    align-items:flex-start;
}
.flex-wrap[data-wrap="true"]{
    flex-wrap:wrap;
}
.flex-item {
    flex:1;
}

.popup_contents .resetBtn,
.popup_contents .dapCheckBtn,
.popup_contents .examViewBtn,
.popup_contents .writeBtn,
.popup_contents .downloadBtn {
    bottom:0;
}

.downloadBtn{
    background:#ff5e00 url(../../contents/images/icon/icon_down.svg) 15px center/22px auto no-repeat;
    position:absolute;
    height:50px;
    color:#fff ;
    font-size:20px;
    font-family:YGJAL;
    text-align:left;
    padding-left:32px;
    padding-right:25px;
    border-radius:25px;
    cursor:pointer;
    box-sizing:border-box;
    z-index:1;
    bottom:10px;
}

.downloadBtn:before{
    content:attr(data-name);
    padding-left:14px;
    display:flex;
    height:100%;
    color:#fff ;
    align-items:center;
    pointer-events:none;
}

.bunsuWrap { font-size:inherit}
.bunsuWrap.mb-10 { margin-bottom:-10px}
.bunsuWrap.mb-20 { margin-bottom:-20px}
.bunsuWrap.mb-30 { margin-bottom:-30px}
.bunsuWrap.inline { display:inline-block}
.bunsuWrap ul {
    display:inline-block;
    vertical-align:middle;
    padding:0 2px;
    text-align:center;
    font-size:inherit;
    line-height:1.1em;
}
.bunsuWrap ul > li { min-width:0.8em}
.bunsuWrap ul > li:first-of-type {
    border-bottom:1px solid #000;
}
.bunsuWrap ul > li:first-of-type + li {
    border-top:1px solid #000;
}
.contentsTitle .bunsuWrap ul > li:first-of-type {
    border-bottom:3px solid #fff;
}
/* .bunsuWrap.blueT ul > li:first-of-type + li{border-top-width:0;} */
.bunsuWrap.blueT ul > li:first-of-type + li,
.answer .bunsuWrap ul > li:first-of-type + li,
.answer .bunsuWrap ul > li:first-of-type ,
.answer .bunsuWrap ul > li:first-of-type + li,
.bunsuWrap.blueT ul > li:first-of-type,
.qBox .bunsuWrap ul > li:first-of-type {border-color:#006ee6
!important}

.bunsuWrap ul > li:first-of-type .toggle{transform:translate(0,-1px);}
.bunsuWrap ul > li:first-of-type + li .toggle{transform:translate(0, 1px);}
.bunsuWrap.inner ul{transform:translate(0,-1px);}

.showObj { cursor:pointer}

.afterDisplay .afterDisplay-item{display:block;}
.afterDisplay .answerMode-item{display:none;}

.afterDisplay.answerMode .afterDisplay-item{display:none;}
.afterDisplay.answerMode .answerMode-item{display:block;}

/* guide area */
guide{display:block;}
guide{
    width:100%;height:100%;position:absolute;top:0;left:0;
    z-index:2000;
    border:2px dashed rgb(255, 69, 0);
    box-sizing:border-box;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:rgba(255,69,0,0.02);
    pointer-events:none;
    opacity:0.5;
}
guide::after{content:"";display:block;position:absolute;top:0;left:calc(50% - 1px);width:1px;border-left:2px dashed rgb(255, 69, 0);height:100%;}
guide::before{content:"";display:block;position:absolute;top:calc(50% - 1px);;left:0;width:100%;border-top:2px dashed rgb(255, 69, 0);height:1px;}

/* title */
#wrap header .title {text-align:justify;}
#wrap header .title.active {
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
}
#wrap header .title.active .bullet.number {
    margin-top:7px;
    margin-right:10px;
}
#wrap header .title .titleInline{display:inline-block;width:95%;}
#wrap header .title .bullet.number{margin-top:3px;}

.ico_precheck_new {
    display:flex;
    align-items:center;
    justify-content:center;
    top:1px;
    left:0;
    width:100px;
    height:60px;
    padding:0;
    padding-left:4px;
    color:#FFF;
    font-size:0.7em;
    font-family:YGJAL;
    letter-spacing:6px;
    box-sizing:border-box;
    background:url(../images/icon/preCheck_icon.svg) 0 center / auto 100% no-repeat;
    margin-right:10px;
    transform:translate(0, -2px);
}
.ico_precheck_new.n1{background-position:0 center;}
.ico_precheck_new.n2{background-position:-100px center;}
.ico_precheck_new.n3{background-position:-200px center;}
.ico_precheck_new.n4{background-position:-300px center;}
.ico_precheck_new.n5{background-position:-400px center;}
.ico_precheck_new.n6{background-position:-500px center;}

.mathCalcContainer .answerBox .answer{font-size:60px !important}

#wrap header .title.chukchuk.n1:before{background-image:url(../images/icon/act_quiz_icon_01.png);}
#wrap header .title.chukchuk.n2:before{background-image:url(../images/icon/act_quiz_icon_02.png);}
#wrap header .title.chukchuk.n3:before{background-image:url(../images/icon/act_quiz_icon_03.png);}
#wrap header .title.chukchuk.n4:before{background-image:url(../images/icon/act_quiz_icon_04.png);}
#wrap header .title.chukchuk.n5:before{background-image:url(../images/icon/act_quiz_icon_05.png);}
#wrap header .title.chukchuk.n6:before{background-image:url(../images/icon/act_quiz_icon_06.png);}

#wrap header .title.chukchuk.with.n1:before{background-image:url(../images/icon/act_quiz_icon_with_01.png);}
#wrap header .title.chukchuk.with.n2:before{background-image:url(../images/icon/act_quiz_icon_with_02.png);}
#wrap header .title.chukchuk.with.n3:before{background-image:url(../images/icon/act_quiz_icon_with_03.png);}
#wrap header .title.chukchuk.with.n4:before{background-image:url(../images/icon/act_quiz_icon_with_04.png);}
#wrap header .title.chukchuk.with.n5:before{background-image:url(../images/icon/act_quiz_icon_with_05.png);}
#wrap header .title.chukchuk.with.n6:before{background-image:url(../images/icon/act_quiz_icon_with_06.png);}

/* 한번더 */
.type-playmore > .contentsBox .contentsBox,
.type-oncemore > .contentsBox .contentsBox{
    padding:0;
}
.type-playmore > .contentsBox,
.type-oncemore > .contentsBox {
    padding:80px 0 0;
}
.type-playmore .basicSlider_tabs,
.type-oncemore .basicSlider_tabs {
    position:absolute;
    top:0;
    left:0;
    right:auto;
    height:80px;
    align-items:flex-start;
}
.type-playmore .basicSlider_tabs li,
.type-oncemore .basicSlider_tabs li{
    margin:0;
    padding:0;
    background-color:transparent;
    cursor:pointer;
}
.type-playmore .basicSlider_tabs li:not(.on),
.type-oncemore .basicSlider_tabs li:not(.on){
    filter:grayscale(100%);
    opacity:0.5;
}
.type-playmore .basicSlider_tabs li + li,
.type-oncemore .basicSlider_tabs li + li {
    margin-left:20px;
}
.type-playmore.popup_contents .basicSlider_tabs .box,
.type-oncemore.popup_contents .basicSlider_tabs .box {
    margin:0;
}
section.flex-wrap {
    padding:0 30px 80px 30px;
}
.flex-wrap {
    display:flex;
    width:100%;
}
.flex-warp img {
    display:block;
}
.flex-wrap.type-col{
    flex-direction:column;
}
.flex-wrap.type-col .bullet.number{
    transform:translate(0,11px);
}
.flex-wrap.type-row{
    flex-direction:row;
}
.flex-wrap.center{
    justify-content:center;
}
.flex-wrap.middle{
    align-items:center;
}
.flex-wrap.bottom{
    align-items:flex-end;
}
.type-linebox-b.colorBox{
    line-height:52px !important;
}
.type-linebox-b{
    position:relative;
    text-align:center;
}
.type-linebox-b::before{
    content:"";
    display:block;
    width:1px;
    height:60px;
    border-left:4px dashed #ccc;
    position:absolute;
    bottom:-60px;
    left:50%;
}


.sky .type-linebox-b::before{border-color:#d4f3f6;}
.pink .type-linebox-b::before{border-color:#ffece2;}
.green .type-linebox-b::before{border-color:#e7f6d4;}
.type-linebox-b .lineBox{
    position:absolute;
    bottom:-120px;
    left:0;
    width:100%;
    display:flex;
    justify-content:center;
    color:#000;
    font-family:NotoM;
    font-weight:500;
}
.type-linebox-b .lineBox > *{display:block;}
.toggle .type-linebox-b .lineBox{
    bottom:-96px
}


.type-linebox-t{
    position:relative;
    text-align:center;
}
.type-linebox-t::before{
    content:"";
    display:block;
    width:1px;
    height:60px;
    border-left:4px dashed #ccc;
    position:absolute;
    left:50%;
    top:-60px;
    bottom:auto;
}
.sky .type-linebox-t::before{border-color:#c1e8ec;}
.pink .type-linebox-t::before{border-color:#ffece2;}
.type-linebox-t .lineBox{
    position:absolute;
    bottom:-120px;
    left:0;
    width:100%;
    display:flex;
    justify-content:center;
    color:#000;
    font-family:NotoM;
    font-weight:500;
}
.type-linebox-t .lineBox > *{display:block;}
.toggle .type-linebox-t .lineBox{
    top:-96px;
    bottom:auto;
}



.dotList>li>div{width:100%;flex:1;padding-right:10px}

.math-calc-side{
    position:relative;
}
.math-calc-side .flex-wrap{justify-content:space-between;width:100%;flex:1;align-items:center;height:50px;}
.math-calc-side .n1{margin:0 10px 0;letter-spacing:-8px;}
.icon_arrow.ani.complete{animation:none;}
.icon_arrow.ani {
    margin:0 20px;
    animation-name:arrow_move;
    animation-duration:.7s;
    animation-delay:0;
    animation-iteration-count:infinite;
    animation-timing-function:ease-out;
    animation-direction:reverse;
}
@keyframes arrow_move {
    0% {transform:translate(0,0);}
    50% {transform:translate(10px,0);}
    100% {transform:translate(0,0);}
}
.toggle-answer{opacity:0}
.toggle-answer.on{opacity:1;transition:opacity .2s ease-in}
.math_calc_table .lineDotted.line_0{left:0;}
.math_calc_table .lineDotted.line_1{left:50px;}
.math_calc_table .lineDotted.line_2{left:100px;}
.math_calc_table .lineDotted.line_3{left:150px;}
.math_calc_table .lineDotted.line_4{left:200px;}
.solve .math_calc_table .lineDotted.line_0{left:0;}
.solve .math_calc_table .lineDotted.line_1{left:45px;}
.solve .math_calc_table .lineDotted.line_2{left:90px;}
.solve .math_calc_table .lineDotted.line_3{left:135px;}
.solve .math_calc_table .lineDotted.line_4{left:180px;}
.math_calc_table.class3 .toggle{
    height:64px !important;
}
.math_calc_table.class3 .sup .toggle{
    height:50px !important;
    min-height:50px !important;
}
.math_calc_table.class3 .sup .toggle .answer {top:4px !important}
.toggle{min-height:64px !important;display:inline-flex;align-items:center}
.toggle .answer {padding-top:7px}
.toggle.type-col{flex-direction:column;}
.math_calc_table.class3 .rowLine {
    top:1px !important;
    height:3px;
}
.math_calc_table.class3 .toggle.colorBox .answer{
    top:5px;
}
.math_calc_table.class3 > table .toggle .answer{
    padding:0;
    top:12px !important;
}
.math_calc_table.class3 td .toggle{
    margin-top:0;
}
.math_calc_table.class3 .bullet.number{
    position:absolute;
    left:-50px;
    top:0;
}
.math_calc_table.class3 td .colorBox{
    display:block;
    padding:0 ;
    text-align:center;
    line-height:1;
    width:100%;
    margin:0 ;
}
.math_calc_table.class3 .txt{
    position:absolute;left:calc(100% + 4px);top:6px;   white-space:nowrap;color:#000;
}
.math_calc_table.division table{margin-left:-5px}
.math_calc_table.division td:first-child{padding-right:5px !important;width:55px;min-width:55px;}
.math_calc_table.division .rowLine2::before{
    content:"";
    /* font-size:40px;*/
    position:absolute;
    top:0px;
    left:-3px;
    /* color:#000;
    transform:scaleY(1.4);
    font-family:NotoM;*/
    width:12px;
    height:53px;
    background:url(../images/math/divide.png) no-repeat 0 -1px;
    background-size:auto 100%;
}
.solve .math_calc_table.division .rowLine2::before{height:46px;}
.math_calc_table.class3.division .rowLine{
    width:calc(100% + 10px);
    left:-5px;
    top:2px;
}
.math_calc_table.class3.division .rowLine2{
    position:absolute;
    width:calc(100% + 10px);
    left:-5px;
    top:2px;
    height:3px;
    background-color:#000;
}
.contentsBox.board .math_calc_table.division .rowLine::before{color:#fff;}
.contentsBox.board .math_calc_table.division .rowLine{background-color:#fff;}
.contentsBox.board .math_calc_table.division .rowLine2::before{color:#fff;}
.contentsBox.board .math_calc_table.division .rowLine2{background-color:#fff;}
.contentsBox.board .math_calc_table.division .rowLine2::before{background:url(../images/math/divide_w.png) no-repeat 0 -1px;}
.contentsBox.board .bunsuWrap ul > li:first-of-type,
.contentsBox.board .bunsuWrap ul > li:first-of-type + li {
    border-color:#fff;
}
.contentsBox.board .yellow .bunsuWrap ul > li:first-of-type,
.contentsBox.board .yellow .bunsuWrap ul > li:first-of-type + li {
    border-color:#e85045;
}
.toggle.tg4{width:160px ;justify-content:center;}
.toggle.tg3{width:120px ;justify-content:center;}
.toggle.tg2{width:80px ;justify-content:center;}
.toggle{padding:0;}
.toggle .answer {
    padding:5px 15px 7px;
    display:flex;
    align-items:center;
    text-align:left;
    justify-content:center;
   font-weight:normal !important;
}
.toggle.noicon::after,
.complete:not([data-quiz="toggle"]) .click-finger-Btn{display:none;}
.toggle .click-finger-Btn {
    left:50%;
    transform:translate(-50%, 0);
    top:6px;
}
.contentsBox.type-full{
    padding:0;
}
.answer{font-size:45px !important}
*{box-sizing:border-box;}
.greenT{color:green}
.contentsBox section{padding:0}
.flex-item  section{padding:0 0 0 20px;height:auto;}
section.flex-wrap.middle{padding-bottom:80px;}
.word-keep{word-break:keep-all;}
.suhi section.flex-wrap.middle{padding-bottom:100px;}
.question-tbl-4{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
}
.question-tbl-4 > .flex-wrap > .flex-wrap{
    justify-content:center;
    align-items:center;
}
.question-tbl-4 > .flex-wrap {
    justify-content:center;
    align-items:center;
}
.question-tbl-4 > .flex-wrap + .flex-wrap {
    margin-top:70px;
}

.pointContainer .contentsBox{padding:44px 46px 0;}

.txt .bullet.number{transform:translate(0,4px);}

.check-tit.type-row{flex-direction:row;justify-content:center;width:auto;}
.check-tit.type-row >.flex-wrap{width:auto;align-items:center;}
.check-tit{flex-direction:column;align-self:center;}
.check-tit .flex-wrap{align-items:center;}
.check-tit .colorBox.check{display:inline-block;margin-top:3px;align-self:flex-start;}

.colorBox.purple{
    color:#000
}
.ta-l{text-align:left !important;}
.ta-r{text-align:right !important;}
.ta-c{text-align:center !important;}
.ta-j{text-align:justify !important;}
.oxContainer{position:relative;}
.oxContainer .icon_tri,
.oxContainer .icon_o,
.oxContainer .icon_x{position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;width:50px;height:50px;}
.icon_o_red{
    display:inline-block;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
}

.solve .popup_contents .blankBox{
    min-width:40px!important;
    max-width:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    transform:translate(0, 4px);
    font-size:35px;
    line-height:36px;
}
.solve .popup_contents .flex-wrap.middle .blankBox{transform:translate(0,0);}
.popup_pages .solve .toggle.circle.complete {
    width:40px;height:40px;min-width:40px;min-height:40px !important;margin:0 10px;transform:translate(0, 3px);
}
.popup_pages .solve .toggle.circle.complete img{
 width:50%;
}

.ta-c{text-align:center !important;}
.ta-l{text-align:left !important;}
.ta-r{text-align:right !important;}

.iframe-wrap{position:relative;width:100%;height:100%}
.iframe-wrap .iframe-item{width:1280px;height:720px;position:absolute;top:50%;left:0;;
transform:scale(0.914) translate(0, -50%);transform-origin:0 0;}
.pop_page_iframe .popup_contents{padding:0 !important;}
.pop_page_iframe .popup_closeBtn{z-index:10001;}

.noevent{pointer-events:none;}

.jc-start{justify-content:flex-start !important;}
.jc-end{justify-content:flex-end !important;}

.tableContainer table thead tr:first-of-type>:first-child{border-radius:10px 0 0 0;}
.tableContainer table thead tr:first-of-type>:last-child{border-radius: 0 10px 0 0 ;}
.tableContainer table thead + tbody tr:first-of-type>:last-child,
.tableContainer table thead + tbody tr:first-of-type>:first-child{border-radius:0 0 0 0;}
.tableContainer table thead + tbody tr:last-of-type>:last-child{border-radius:0 0 10px 0;}
.tableContainer table thead + tbody tr:last-of-type>:first-child{border-radius:0 0 0 10px;}
/* .tableContainer table tbody tr th{border-top:2px solid #fff !important;} */
.tableContainer.brown table thead + tbody tr:first-of-type th {
    border-top:2px solid #efe8e0;
}
.tableContainer.green table thead + tbody th{background-color:#c6e1d9 !important}
.tableContainer.brown table thead + tbody th{background-color:#ddc9b1 !important}
.tableContainer td .toggle:not(.circle){background-color:transparent;}
.tableContainer th .toggle:not(.circle){background-color:transparent;}

.lineBox{position:relative;}
.lineBox .icon_bogi{position:absolute;top:-20px;left:50%;height:36px;border-radius:10px;transform:translate(-50%, 0);}
.lineBox .icon_bogi::after{font-size:21px;line-height:36px;}

.math_calc_table.class3 .bullet.number {
    left:6px;
    top:4px
}

.solve .popup_contents .bullet.number{
    transform:translate(0,4px);
}
.line-arrow.pink .line-inner,
.line-arrow.pink::before,
.line-arrow.pink::after,
.line-arrow.pink .line-inner::before,
.line-arrow.pink{
    border-color:pink !important;
}

.line-arrow.green .line-inner,
.line-arrow.green::before,
.line-arrow.green::after,
.line-arrow.green .line-inner::before,
.line-arrow.green{
    border-color:green !important;
}
.line-arrow.orange::after{
    border-color:#f60;
}
.line-arrow.orange{
    border-color:#f60 !important;
}
.line-arrow{
    position:absolute;
}
.line-inner::before,
.line-arrow::after{
    content:"";
    width:20px;
    height:20px;
    border:4px solid #006ee6;
    border-right:0;
    border-bottom:0;
    position:absolute;
}

.line-arrow.tri{border-top:4px solid #000;}
.line-arrow.tri::after{border-color: #d7dea3;
    width: 0;
    height: 0;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    border-left: 10px solid #000;
    border-right: 10px solid transparent;
    bottom: auto;
    top: -12px;
    left: calc(100% - 8px);
    transform: rotate(0deg);
    right: auto;
}
.line-arrow.brt{border:4px solid #006ee6;border-top:0;}
.line-arrow.brt::after{top:3px;right:-14px;transform:rotate(45deg);}

.line-arrow.trb{border:4px solid #006ee6;border-bottom:0;}
.line-arrow.trb::after{bottom:3px;right:-14px;transform:rotate(225deg);}

.line-arrow.brt2{border:4px solid #006ee6;border-top:0;border-right:0;}
.line-arrow.brt2::after{top:3px;right:-14px;transform:rotate(45deg);}
.line-arrow.brt2::before{top:3px;left:-14px;transform:rotate(45deg);}
.line-arrow.brt2 .line-inner{position:absolute;right:0;width:0;height:50px;border-right:4px solid #006ee6;bottom:0;}
.line-arrow.brt2.both::after{display:none;}
.line-arrow.brt2 .line-inner::before{top:0;left: -10px;transform:rotate(45deg);}

.line-arrow.trb2{border:4px solid #006ee6;border-bottom:0;border-right:0;}
.line-arrow.trb2::after{right:-14px;bottom:1px;transform:rotate(225deg);}
.line-arrow.trb2::before{bottom:3px;left:-14px;transform:rotate(225deg);}
.line-arrow.trb2.both::after{display:none;}
.line-arrow.trb2 .line-inner{position:absolute;right:0;width:0;height:50px;border-right:4px solid #006ee6;top:0}
.line-arrow.both.trb2 .line-inner::before{bottom:0;left: -10px;transform:rotate(225deg);}

.line-arrow.tr{border:4px solid #006ee6;border-bottom:0;border-right:0;}
.line-arrow.tr::after{top:-14px;right:3px;transform:rotate(135deg);}


.line-arrow.rt{border:4px solid #006ee6;border-top:0;border-left:0;}
.line-arrow.rt::after{top:3px;right:-14px;transform:rotate(45deg);}

.line-arrow.rb{border:4px solid #006ee6;border-bottom:0;border-left:0;}
.line-arrow.rb::after{bottom: 3px;right:-14px;transform:rotate(-135deg);}

.line-arrow.rbl{border:4px solid #006ee6;border-left:0;}
.line-arrow.rbl::after{bottom:-14px;left:3px;transform:rotate(-45deg);}


.line-arrow.lb{border:4px solid #006ee6;border-bottom:0;border-right:0;}
.line-arrow.lb::after{bottom: 3px;left:-14px;transform:rotate(-135deg);}

.line-arrow.lbr{border:4px solid #006ee6;border-right:0;}
.line-arrow.lbr::after{bottom: -14px;right:3px;transform:rotate(45deg);}

.line-arrow.br{border:4px solid #006ee6;border-top:0;border-right:0;}
.line-arrow.br::after{bottom:-14px;right:3px;transform:rotate(135deg);}

.line-arrow.bl{border:4px solid #006ee6;border-top:0;border-left:0;}
.line-arrow.bl::after{bottom:-14px;left:3px;transform:rotate(-45deg);}

.line-arrow.r,
.line-arrow.l{border:4px solid #006ee6;border-bottom:0;border-right:0;border-left:0;}
.line-arrow.l::after{top:-14px;left:0;transform:rotate(-45deg);}
.line-arrow.r::after{top:-14px;right:0;transform:rotate(135deg);}
.line-arrow.b{border:4px solid #006ee6;border-bottom:0;border-top:0;border-left:0;}
.line-arrow.b::after{bottom:0;right:-14px;transform:rotate(225deg);}

.line-arrow.both::before{
    content:"";
    width:20px;
    height:20px;
    border:4px solid #006ee6;
    border-right:0;
    border-bottom:0;
    position:absolute;
}
.line-arrow.both.tr::before{bottom:0;left: -14px;transform:rotate(225deg);}
.line-arrow.both.br::before{top:0;left: -14px;transform:rotate(45deg);}

.line-arrow.no-arrow::before,
.line-arrow.no-arrow::after{ display:none !important;}
.line-arrow .num-round{position:absolute;bottom:-20px;left:50%;margin-left:-20px;line-height:1;}
.line-arrow .txt-b{position:absolute;bottom:-60px;left:50%;transform:translate(-50%, 0);}


.line-wrap{position:relative;}
.num-round{    font-size:22px;line-height:1.5em;font-family:YGJAL;color:#ffb655;border:4px solid #ffb655;border-radius:50%;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background-color:#fff;}

.hidden-box.on{opacity:1;pointer-events:initial;transition:opacity .2s ease-in;visibility:visible;}
.hidden-box{opacity:0;pointer-events:none;visibility:hidden;}

.icon_arrow.eff.complete{
    animation:none;
}
.icon_arrow.eff {
    animation-name:arrow;
    animation-duration:.7s;
    animation-delay:0;
    animation-iteration-count:infinite;
    animation-timing-function:ease-out;
    animation-direction:reverse;
}
@keyframes arrow {
    0% {transform:translate(0,0);}
    50% {transform:translate(10px,0);}
    100% {transform:translate(0,0);}
}

.toggle.colorBox{line-height:52px !important;}
td .toggle.colorBox{line-height:36px !important;}

/* .math_calc_table.class3 .toggle{
    height:54px !important;
    line-height:47px;
} */

.oxContainer.lineBox.green.hover{border-color:#cee492;}
.oxContainer.lineBox.brown.hover{border-color:#ae7c65;}
.oxContainer.lineBox.purple.hover{border-color:#cabfe0;}
.oxContainer.lineBox.orange.hover{border-color:#fccd89;}
.oxContainer.lineBox.sky.hover{border-color:#c1e8ec;}
.oxContainer.lineBox.yellow.hover{border-color:#f4e8bd;}
.oxContainer.lineBox.beige.hover{border-color:#efcfa6;}
.oxContainer.lineBox.pink.hover{border-color:#ffdecc;}
.oxContainer.lineBox.deeppink.hover{border-color:#f7c1c9;}

.txt-df{font-family:NotoM !important;color:#000 !important;font-weight:400 !important;}

.mathCalcContainer .horizon input{text-align:center;}

.toggle.lineBox.green.hover{border-color:#cee492;}
.toggle.lineBox.brown.hover{border-color:#ae7c65;}
.toggle.lineBox.purple.hover{border-color:#cabfe0;}
.toggle.lineBox.orange.hover{border-color:#fccd89;}
.toggle.lineBox.sky.hover{border-color:#c1e8ec;}
.toggle.lineBox.yellow.hover{border-color:#f4e8bd;}
.toggle.lineBox.beige.hover{border-color:#efcfa6;}
.toggle.lineBox.pink.hover{border-color:#ffdecc;}
.toggle.lineBox.deeppink.hover{border-color:#f7c1c9;}

[role="button"] *,
[role="button"]{cursor:pointer;}

.popup_container{z-index:10;}


.oxContainer .icon_o,
.oxContainer .icon_x {z-index:3;}

tbody.hide.on{display:table-row-group;opacity:1;}
.line-tr.blue .rowLine{background-color:#006ee6;}

.ls-0h{letter-spacing:-0.5px !important;}
.ls-1{letter-spacing:-1px !important;}
.ls-1h{letter-spacing:-1.5px !important;}
.ls-2{letter-spacing:-2px !important;}
.ls-2h{letter-spacing:-2.5px !important;}
.ls-3{letter-spacing:-3px !important;}
.ls-4{letter-spacing:-4px !important;}
.ls-1p{letter-spacing:1px !important;}
.ls-2p{letter-spacing:2px !important;}
.ls-3p{letter-spacing:3px !important;}
.tit-box{
    position:relative;
    display:inline-block;
    height:40px;
}
.tit-box > *{position:absolute;top:50%;transform:translate(0, -50%);}
.txt-box{
    position:relative;
    display:inline-block;
    height:40px;
    vertical-align:middle;
}
body .txt-box .icon_arrow.big{margin-top:-5px}
.txt-box > *{position:absolute;top:50%;transform:translate(0, -50%);margin-top:-5px;}
/*
.bunsu-1{width:33px;margin:24px 0;}
.bunsu-2{width:48px;margin:24px 0;}
.bunsu-3{width:63px;margin:24px 0;}
.bunsu-1 > *,
.bunsu-2 > *,
.bunsu-3 > *{margin-top:3px;}
.bunsu-1-q1 > *{margin-top:3px;}

.txt-box.bunsu-1,
.txt-box.bunsu-2,
.txt-box.bunsu-3,
.txt-box.bunsu-1-q1{transform:translate(0, -5px);}

.dotList .bunsu-1 > *,
.dotList .bunsu-2 > *,
.dotList .bunsu-3 > *{margin-top:-2px;}

.title.active .bunsu-1 > *,
.title.active .bunsu-2 > *,
.title.active .bunsu-3 > *{margin-top:-3px;}
*/

/* h2 > span .bunsu-1 > *,
h2 > span .bunsu-2 > *,
h2 > span .bunsu-3 > *{margin-top:-3px;} */

.dotList>li.bs-t:before{margin-top:34px;}

.flex-wrap > [class*="bunsu-"]{margin-right:4px}

.solve .bunsu-1-q1{width:32px;margin:18px 0;}
.solve .bunsu-1{width:30px;margin:18px 0;transform:translate(0,0);}
.solve .bunsu-2{width:41px;margin:18px 0;transform:translate(0,0);}
/* .solve .bunsu-1 > *,
.solve .bunsu-2 > *,
.solve .bunsu-3 > *{margin-top:-2px;} */
.solve .dotList>li.bs-t:before{margin-top:29px;}

.bunsu-1-q1{width:56px;margin:55px 0;}

.bunsu-2{width:48px;margin:24px 0;}
.bunsu-3{width:63px;margin:24px 0;}

.oxContainer {cursor:pointer;}
.oxContainer .icon.icon_o,
.oxContainer .icon.icon_x{z-index:3 !important;}

.textBookBtn.popupOn {z-index:11;}
.textBookBtn.invisible{opacity:0 !important;z-index:-1 !important;}

.moveButtonContainer{width:auto;left:50%;transform:translate(-50%,0);}

.sp-ar{justify-content:space-around !important;}


.active.txt .icon:before {
    content:'활동';
    color:#ff6200;
    padding-right:8px;
    text-shadow:#fff 3px 0 0, #fff 2.83487px 0.981584px 0, #fff 2.35766px 1.85511px 0, #fff 1.62091px 2.52441px 0, #fff 0.705713px 2.91581px 0, #fff -0.287171px 2.98622px 0, #fff -1.24844px 2.72789px 0, #fff -2.07227px 2.16926px 0, #fff -2.66798px 1.37182px 0, #fff -2.96998px 0.42336px 0, #fff -2.94502px -0.571704px 0, #fff -2.59586px -1.50383px 0, #fff -1.96093px -2.27041px 0, #fff -1.11013px -2.78704px 0, #fff -0.137119px -2.99686px 0, #fff 0.850987px -2.87677px 0, #fff 1.74541px -2.43999px 0, #fff 2.44769px -1.73459px 0, #fff 2.88051px -0.838247px 0;
}
.active.txt{display:inline-block;}
.active.txt .icon{
    position:relative;
    white-space:nowrap;
    display:inline-flex;
    font-size:35px;
    font-family:YGJAL;
}
.active.txt .icon:after {
   content:attr(data-n);
    color:#ff9e01;
    padding-right:3px;
    text-shadow:#fff 3px 0 0, #fff 2.83487px 0.981584px 0, #fff 2.35766px 1.85511px 0, #fff 1.62091px 2.52441px 0, #fff 0.705713px 2.91581px 0, #fff -0.287171px 2.98622px 0, #fff -1.24844px 2.72789px 0, #fff -2.07227px 2.16926px 0, #fff -2.66798px 1.37182px 0, #fff -2.96998px 0.42336px 0, #fff -2.94502px -0.571704px 0, #fff -2.59586px -1.50383px 0, #fff -1.96093px -2.27041px 0, #fff -1.11013px -2.78704px 0, #fff -0.137119px -2.99686px 0, #fff 0.850987px -2.87677px 0, #fff 1.74541px -2.43999px 0, #fff 2.44769px -1.73459px 0, #fff 2.88051px -0.838247px 0;
}

.graph-answer{position:absolute;top:335px;left:460px;width:auto;}
.graph-group{position:absolute;top:-20px;left:210px;width:520px;}
.graph-group .tit{width:100%;}
.graph-group .tit .colorBox{padding-top:6px;line-height:1;width:auto;padding-bottom:9px;}
.graph-group .tableContainer{width:100%;}
.graph-group .tableContainer .col1{width:150px;}
.graph-group .tableContainer td{height:auto;text-align:left;padding-left:20px;}
.graph-group .tableContainer th{height:auto;}
.graph-group .tableContainer td img{height:40px;display:inline-block;vertical-align:middle !important;line-height:1;font-size:0;}
table.legend{position:absolute;bottom:10px;right:-160px;width:auto;}
table.legend .col1{width:50px;}
table.legend td:first-child{text-align:center;}
table.legend .m img{height:40px;}
table.legend .s img{height:30px;}

#wrap header .title.chukchuk.with.n1:before{background-image:url(../images/icon/act_quiz_icon_with_01.png)}
#wrap header .title.chukchuk.with.n2:before{background-image:url(../images/icon/act_quiz_icon_with_02.png)}
#wrap header .title.chukchuk.with.n3:before{background-image:url(../images/icon/act_quiz_icon_with_03.png)}
#wrap header .title.chukchuk.with.n4:before{background-image:url(../images/icon/act_quiz_icon_with_04.png)}
#wrap header .title.chukchuk.with.n5:before{background-image:url(../images/icon/act_quiz_icon_with_05.png)}
#wrap header .title.chukchuk.with.n6:before{background-image:url(../images/icon/act_quiz_icon_with_06.png)}
#wrap .w-auto.math_calc_table.class3 > table .unit-kg td {padding-bottom:10px !important;}

.complete .js-dragLineObj{width:0;height:0;}

body .lineBox,
body .colorBox{padding:3px 12px 4px}
body .colorBox{line-height:1.3em !important;}
body .colorBox.brown {
    color:#000;
}

#wrap .ico_precheck_new {
    display:flex;
    align-items:center;
    justify-content:center;
    top:1px;
    left:0;
    width:88px;
    height:57px;
    padding:9px 0 0;
    padding-left:0px;
    color:#FFF;
    font-size:0.7em;
    font-family:YGJAL;
    letter-spacing:6px;
    box-sizing:border-box;
    background:url(../images/preCheck_icon_lesson01.svg) 0 center / auto 100% no-repeat;
    margin-right:10px;
    transform:translate(0, -6px);
    text-indent:-2px;
}
#wrap .ico_precheck_new.n1{background:url(../images/preCheck_icon_lesson01.svg) 0 center / auto 100% no-repeat;}
#wrap .ico_precheck_new.n2{background:url(../images/preCheck_icon_lesson02.svg) 0 center / auto 100% no-repeat;}
#wrap .ico_precheck_new.n3{background:url(../images/preCheck_icon_lesson03.svg) 0 center / auto 100% no-repeat;}
#wrap .ico_precheck_new.n4{background:url(../images/preCheck_icon_lesson04.svg) 0 center / auto 100% no-repeat;}
#wrap .ico_precheck_new.n5{background:url(../images/preCheck_icon_lesson05.svg) 0 center / auto 100% no-repeat;}
#wrap .ico_precheck_new.n6{background:url(../images/preCheck_icon_lesson06.svg) 0 center / auto 100% no-repeat;}

h2 .dodbogi,
.title .dodbogi{position:relative;display:inline-block;vertical-align:middle;transform:translate(0,-4px);}
.dodbogi {
	position:absolute;
	width:auto;
	padding:10px 20px 10px 38px;
	line-height:1;
	font-family:YGJAL;
	font-size:14px;
	white-space:nowrap;
	color:#fff;
	text-align:center;
	background-image:url('../../contents/images/icon_dodbogi.png');
	background-repeat:no-repeat;
	background-size:18px;
	background-position:12px 8px;
	background-color:#ffbc47;
	border-radius:18px;

}
.dodbogi:hover {
	background-color:#ff8c40;
}
#wrap header .title.chukchuk:before{font-size:28px !important;text-align:center;padding:21px 0 0 !important}
#wrap header .title.chukchuk.n1:before{background-image:url(../images/act_quiz_icon_001.png) !important;}
#wrap header .title.chukchuk.n2:before{background-image:url(../images/act_quiz_icon_002.png) !important;}
#wrap header .title.chukchuk.n3:before{background-image:url(../images/act_quiz_icon_003.png) !important;}
#wrap header .title.chukchuk.n4:before{background-image:url(../images/act_quiz_icon_004.png) !important;}
#wrap header .title.chukchuk.n5:before{background-image:url(../images/act_quiz_icon_005.png) !important;}
#wrap header .title.chukchuk.n6:before{background-image:url(../images/act_quiz_icon_006.png) !important;}

.popup_pages .min h2{padding:15px 50px}
.blueT .bunsuWrap ul > li:first-of-type{border-color:#006ee6 !important}
.blueT .bunsuWrap ul > li:first-of-type + li{border-color:#006ee6 !important}
.popup_contents.gap{padding-top:60px !important}
.balloon.gap{padding-top:20px !important}
.balloon.none{display: none !important}
.toggle.f{width:100%;}
.toggle.f .answer{width:100%;justify-content:center}

.cha_btn2 {
    display:inline-block;
    width:93px;
    height:69px;
    background:url(../images/cha_ico_tip_btn.png) no-repeat center center/contain;
    position:absolute;
    cursor:pointer;
}
.cha_btn2:hover {
    background:url(../images/cha_ico_tip_btn_over.png) no-repeat center center/contain;
}
.popup_pages .min h2.blue{background-color:#006ee6 !important;}

.brackets-big{transform:scaleY(1.6);font-family:Noto;}

.del{position:absolute;width:50px;display:none;}
.del::before{content:"";display:block;position:absolute;width:100%;border-top:5px solid #EC0987;transform:rotate(-45deg);}
.del span{display:block;font-size:30px;position:absolute;color:#EC0987}

[data-line="bunsu"].givenLine{position:relative;border:0}
[data-line="bunsu"].givenLine::after{content:"";display:block;position:absolute;bottom:-18px;width:100%;left:0;border-bottom:3px solid #ff5e00;}
[data-line="bunsu"].getLine{position:relative;border:0}
[data-line="bunsu"].getLine::after{content:"";display:block;position:absolute;bottom:-18px;width:100%;left:0;border-bottom:3px solid #0096e0;}

.p--04 {position:relative;top:3px !important;}
.p-02 {position:relative;top:-4px !important;}
.p-04 {position:relative;top:-5px !important;}
.p-10{position:relative;top:-11px !important}

#wrap header .title.active.bs{margin:23px 0 2px}

.m-sup {font-size:24px;position:relative;top:-8px}
.material .m-sup {font-size:12px;top:-11px}
.suhi header h1 .sub-text .m-sup {font-size:11px;top:-6px}
th .m-sup,
.lineBox .m-sup,
.textAlignC .m-sup,
.flex-item .m-sup,
.tableContainer .m-sup,
.toggle .m-sup,
.quiz-content .m-sup {top:-16px;display:inline-block;margin-bottom:-12px}
header .title .m-sup,
h2 .m-sup {top:-16px}
.solve .m-sup {top:-14px;font-size:20px}

#wrap header .title.active.promise .icon:before {
    content:'약속';
}

#wrap header .title.active.promise .icon:after {
    content:'하기';
    margin-left: 0;
}

/* 
.alert_popup{display:none !important;}
 */

.induceLight {
    position:absolute;
    top:0;
    left:0;
    width:74px;
    height:74px;
    pointer-events:none;
  }
  .induceLight.hide {
    display:none;
  }

  .induceLight:before,
  .induceLight:after {
    content:'';
    opacity:0;
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    width:14px;
    height:14px;
    border-radius:50%;
    background-color:yellow;
    transform:translate(-50%, -50%);
  }
.induceLight:before {
animation:setOpacity .8s ease-in-out infinite;
}
.induceLight:after {
animation:setOpacity .8s .3s ease-in-out infinite;
}

@keyframes setOpacity {
from { opacity:.8}
80% {
    opacity:0;
    width:100%;
    height:100%;
}
100% {
    opacity:0;
    width:100%;
    height:100%;
}
}
@-o-keyframes setOpacity {
from { opacity:.8}
80% {
    opacity:0;
    width:100%;
    height:100%;
}
100% {
    opacity:0;
    width:100%;
    height:100%;
}
}
@-ms-keyframes setOpacity {
from { opacity:.8}
80% {
    opacity:0;
    width:100%;
    height:100%;
}
100% {
    opacity:0;
    width:100%;
    height:100%;
}
}
@-webkit-keyframes setOpacity {
from { opacity:.8}
80% {
    opacity:0;
    width:100%;
    height:100%;
}
100% {
    opacity:0;
    width:100%;
    height:100%;
}
}


.popBtn.textInBtn.search {
    padding-left:44px;
    background-repeat:no-repeat;
    background-position:8px 5px;
    background-size:27px;
    background-image:url(../images/icon/icon_search.png)
}

#wrap header .title.active .icon {
    position:relative;
    white-space:nowrap;
    transform:translate(0,0);
}

section.gap-l{padding-left:25px}



/* 23년 5학년 전용 스타일 */
._rel{position:relative;}
._abs{position:absolute;top:0;left:0;}
/* 정렬:middle */
._vam{display:inline-block;vertical-align:middle;}
._vami{display:inline;vertical-align:middle;}
._vab{vertical-align:bottom;}
._vat{vertical-align:top;}
/* 손가락 */
._fng{top:calc(50% - 24px);left:calc(50% - 20px);}
._fng.complete{display:none;}
/* 식답 */
.flexListContainer > ._qa,
.flex-wrap > ._qa{margin:0 30px;}
._qa{display:table;margin:0 auto;}
._qa > li{display:table-row;}
._qa > li > div{display:table-cell;padding:0 0 15px;vertical-align:top;}
._qa > li:last-child > div{padding-bottom:0;}
._qa > li > div:nth-child(1){width:auto;text-align:right;}
._qa > li > div:nth-child(2){width:auto;text-align:left;}
._qa .colorBox.check{display:inline-block;margin-top:3px;line-height:37px !important;white-space:nowrap;}
._qa > li > div > *{vertical-align:top;}
._qa.-mid .colorBox.check{margin-top:0;}
._qa.-mid > li > div,
._qa.-mid > li > div > *,
._qa > li.-mid > div,
._qa > li.-mid > div > *{vertical-align:middle;}
/* 타이틀 내 분수 사용 */
.bullet.circleDot._mt{margin-top:0.475em;}
._bunsuInH2{margin-bottom:-3px !important;}
._bunsuInDotTitle{position:relative;top:-17px;}
/* 분수 상하 맞춤 */
._bts{display:inline-block;padding-top:6px;padding-bottom:6px;}/* 분모, 분자값 안에 토글만큼 패딩:ex. <li><span class="_bts">1</span></li> */
._bts1{position:relative;top:-6px;}/* 분수의 분자값에 토글 있으면 */
._bts2{position:relative;top:7px;}/* 분수의 분모값에 토글 있으면 */
/* 마진 */
.mt_140{margin-top:140px !important;}
.mt_150{margin-top:150px !important;}
.mt_160{margin-top:160px !important;}
.mt_170{margin-top:170px !important;}
.mt_180{margin-top:180px !important;}
.mt_190{margin-top:190px !important;}
.mt_200{margin-top:200px !important;}
.mt_210{margin-top:210px !important;}
.mt_220{margin-top:220px !important;}
.mt_220{margin-top:220px !important;}
/* 대발문 버튼 깜빡거림 */
.textBookBtn.info:not(.popupOn){animation:none;}
._jegop{position:relative;top:-12px;font-size:24px;}
/* 레터추가 */
._breakall{word-break:break-all;}
._circle-line,
._circle-fill{display:inline-block;width:34px;height:34px;border:5px solid transparent;background:transparent;border-radius:50%;vertical-align:-2px;}
._circle-line{border:5px solid #006ee6;}
._circle-fill{background:#006ee6;}
._circle-line.red{border:5px solid #e94d40;}
._circle-fill.red{background:#e94d40;}
._circle-line.pink{border:5px solid #eb008b;}
._circle-fill.pink{background:#eb008b;}
.solve ._circle-line,
.solve ._circle-fill{vertical-align:-4px;}
/* 컬러밑줄 */
._underline{box-shadow:inset 0 -7px 0 -1px;}
._underline.deeppink{box-shadow:inset 0 -7px 0 -1px #f7c1c9;}
._underline.sky{box-shadow:inset 0 -7px 0 -1px #c1e8ec;}
._underline.purple{box-shadow:inset 0 -7px 0 -1px #cabfe0;}
._underline.green{box-shadow:inset 0 -7px 0 -1px #cee492;}
/* 타이틀 보기 */
header > .title .icon_bogi{height:36px;margin:-8px 0 0 0;vertical-align:top;border:2px solid #8e795e;border-radius:30px;background-color:#fcf7f4;vertical-align:middle;}
header > .title .icon_bogi:after{font-size:21px;line-height:34px;}
.popup_pages ._tempClose:hover{background-image:url("../images/button/btn_close_orange.svg")}
.flexListContainer._inline{display:inline-flex;}
/* 분수 관련 */
._sup,
._sub{display:flex;align-items:center;justify-content:center;position:absolute;left:50%;width:100%;height:100%;padding:0 2px !important;font-size:25px !important;font-weight:700;letter-spacing:0;transform:translate(-50%, 0);}
._sup.answer,
._sub.answer{font-size:25px !important;}
._sup{top:-38px;}
._sub{bottom:-38px;}
._sup._x2{top:-58px;z-index:1;}
._sub._x2{bottom:-60px;z-index:1;}
._del{position:absolute;top:50%;left:50%;width:calc(100% + 8px);min-width:42px;max-width:52px;height:0;border-top:4px solid #e94d40;transform-origin:0 0;transform:rotate(-45deg) translateX(-50%);}
.answer ._del,
._del.answer{border-top:4px solid #006ee6;}
.solve ._sup{top:-34px;}
.solve ._sub{bottom:-34px;}
.toggle + ._del{margin-top:-4px;}
._del._deg3{max-width:64px;transform:rotate(-24deg) translateX(-50%);}
._del._deg4{max-width:78px;transform:rotate(-24deg) translateX(-50%);}
._del._deg5{max-width:104px;transform:rotate(-15deg) translateX(-50%);}
._bracket{display:inline-block;padding:0 2px;font-weight:400;font-family:"notoL";vertical-align:middle;transform:scale(2, 2) translateY(-3px);}
.answer ._bracket{transform:scale(2.3, 2) translateY(-3px);}
._sup .toggle,
._sub .toggle{min-height:auto !important;line-height:1;}
._sup .toggle .answer,
._sub .toggle .answer{justify-content:center;width:100%;font-size:25px !important;}
._sup .toggle:after,
._sub .toggle:after{width:36px;height:36px;line-height:30px;}
._mt6{margin-top:6px;}
._mt13{margin-top:13px;}
._mt22{margin-top:22px;}

.math_calc_table.class3 .dot-point{position:absolute;bottom:3px;right:-4px;width:6px;height:6px;background-color:#000;display:block;border-radius:50%;z-index:2;margin:0;}
.math_calc_table.class3 .answer .dot-point{background-color:#006ee6;right:60px;bottom:3px;}
.math_calc_table.class3 .answer .dot-point.-place2{right:110px;}

.math_calc_table.class3 tr td {
    width:50px;height:50px;min-width:50px;min-height:50px;padding:1px !important;
}
.math_calc_table .toggle{
    display:block;
    width:100%;
    padding:6px 14px;
    line-height:1;
    background-size:50px;
    /* height:50px;*/
    position:relative;
}
.math_calc_table.class3 .toggle{
    height:calc(100% - 3px) !important;
    min-height:auto !important;
    margin-top:2px;
}
.math_calc_table.class3 .toggle .answer{
    position:absolute;
    right:-15px;
    letter-spacing:27.5px !important;
    text-align:right !important;
    top:2px;
}
.math_calc_table.class3 > table .toggle .answer{
    padding:0;
    top:4px !important;
    line-height:1;
}
[contenteditable]{pointer-events:none;outline:0;}

.compare-wrap{
    display:flex;
    gap:10px;
}
.compare-wrap .txt{position:relative;}
.compare-wrap .txt [data-toggle-target]{position:absolute;opacity:0;}
.compare-wrap .txt [data-toggle-target].on{ opacity:1;}

[data-quiz="dragLine"].complete .drag-line::after{
    content:"";
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10;
}
.drag-line{
    position:relative;
    width:100%;
    margin:0 auto;
    display:flex;
    height:100%;
}
.drag-line-group{position:absolute;display:flex;justify-content:center;align-items:center;}
.drag-line-item{position:relative;}

.drag-line .dragLineArea{width:60px;height:60px;position:absolute;}
.drag-line .dragLineArea::after{width:18px;height:18px;border-radius:50px;border:4px solid #999;background-color:#555;    box-sizing:border-box;}
.drag-line .dragLineArea.sky::after {background-color:#43a6ff;border-color:#66c0ff;}
.drag-line .dragLineArea.pink::after {background-color:#ff6284;border-color:#ff98ae;}
.drag-line .dragLineArea.purple::after {background-color:#9a6ced;border-color:#d1b0ed;}

/* .drag-line .dragLineObj{width:18px;height:18px;border-radius:50px;border:4px solid #999;background-color:#555;    box-sizing:border-box;}
.drag-line .dragLineObj.sky {background-color:#43a6ff;border-color:#66c0ff;}
.drag-line .dragLineObj.pink {background-color:#ff6284;border-color:#ff98ae;}
.drag-line .dragLineObj.purple {background-color:#9a6ced;border-color:#d1b0ed;} */


.js-dragLineArea.right,
.js-dragLineObj.right{left:auto;right:0;top:50%;transform:translate(-20px, -50%);}

.btnProblem{position:relative;display:inline-block;background-color:#ff617c;color:#fff;width:58px;height:44px;border-radius:10px;justify-content:flex-start;align-items:center;font-size:16px;line-height:1.2;padding:4px 0 0 10px;margin-right:30px;transform:translate(0,-3px);
font-family:YGJAL;}
.btnProblem::after{
    content:"";
    display:block;
    width:48px;
    height:40px;
    position:absolute;
    right:-35px;
    top:5px;
    background:url(../../../common/contents/images/icon/button_helper_v1.png) no-repeat 0 0 / contain;
}


.click-finger-wrap{position:relative;width:100%;display:flex;justify-content:flex-start;align-items:flex-end;gap:10px;}
[data-icon] icon{display:flex;width:50px;height:50px;position:relative;opacity:0;justify-content:center;align-items:center;}
[data-icon] icon-s{display:flex;width:50px;height:50px;position:relative;opacity:0;justify-content:center;align-items:center;}
[data-icon="circle"] icon{border-radius:50%;border:2px solid #006ee6}
[data-icon="circle"] icon::after{content:"";display:block;width:30px;height:30px;border-radius:50%;border:2px solid #006ee6;}
[data-icon="circle"] icon-s{border-radius:50%;border:0;}
[data-icon="circle"] icon-s::after{content:"";display:block;width:30px;height:30px;border-radius:50%;border:2px solid #006ee6;}

[data-icon].on icon,
[data-icon].on icon-s{opacity:1;}
.click-finger-wrap .click-finger-Btn{position:absolute;top:50%;left:50%;transform:translate(-505, -50%);margin:-22px 0 0 -21px;z-index:10;}
.click-finger-Btn.complete{display:none;}
.click-finger-wrap > img{width:block;}
.click-finger-img{position:absolute;top:0;left:0;width:100%;opacity:0;z-index:1;} 
[data-toggle-target].on .click-finger-img{opacity:1;}
.colorBox.title{margin:0 auto;width:fit-content;display:flex;justify-content:center;}

.table-legend{display:flex;justify-content:center;gap:20px;align-items:flex-end;}
.table-legend-item{display:flex;flex-direction:column;gap:20px;flex-shrink:0}
.table-legend-item li{display:flex;align-items:center;gap:10px;}
.table-legend-item icon-s,
.table-legend-item icon{opacity:1 !important;display:inline-flex;}
.popup_container .image.pop_problem,
.checkContainer .popup_container .image.pop_problem {
    font-size:45px;
}
.popup_container .image,
.checkContainer .popup_container .image{
    padding:20px;
    font-size:40px;
}
.popup_container .image.pink,
.checkContainer .popup_container .image.pink{border:3px solid #ffc4c9;}
.popup_container .image.orange,
.checkContainer .popup_container .image.orange{border:3px solid #ffbc47;}

tr.ta-c td{text-align:center;}
.ta-c{text-align:center;}

.check-tit{display:flex;flex-direction:column;gap:10px;}
.check-tit .colorBox.check{min-height:64px;min-width:64px;display:flex;justify-content:center;align-items:center;line-height:1;padding:2px 14px 0;margin:0;}
.check-tit .flex-wrap{gap:10px;}

.checkContainer h2 .icon_x_title,
.checkContainer h2 .icon_o_title{transform:translate(0, 5px);}

.toggle.tr{background-color:transparent;}

.numcard {position:relative;}
.numcard img{display:block;width:100%;}
.numcard::after{ content:attr(data-n);font-size:40px;display:flex;position:absolute;top:0;left:0;width:100%;height:100%;justify-content:center;align-items:center;z-index:2;}

.flex-center {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:10px;
}
.flex-center.row{flex-direction:row;}

.popup_container .min .popup_contents{font-size:40px;}


.innerBox{position:relative;width:100%;}
.suhi textarea.answerMode, 
.suhi input.answerMode {
    font-size:45px;
    font-weight:bold;
    color:#006ee6;
}
.noteText .txt{ padding:0 20px;}
.noteText {
	position:relative;
	display:block;
	width:100%;
	height:380px;
	padding:20px 52px 0px 20px;
	background:url('../../../common/contents/images/textarea_note_top.png') left top no-repeat;
	box-sizing:border-box;
	margin:0 auto;
}
.noteText::before {
	position:absolute;
	right:0px;
	top:0;
	display:block;
	content:'';
	width:50%;
	height:380px;
	background:url('../../../common/contents/images/textarea_note_top.png') right top no-repeat;
	box-sizing:border-box;
}
.noteText .textLine {
    position:relative;
    z-index:0;
    width:100%;
	height:370px;
	padding:0px 20px;
    line-height:60px;
	background:none;
	background-attachment:local;
	background-image:linear-gradient(to right, white 0px, transparent 0px), linear-gradient(to left, white 0px, transparent 0px), repeating-linear-gradient(white, white 59px, #ccc 59px, #ccc 60px, white 60px)
}
.noteText .textLine:-ms-input-placeholder {color:#c7c7c7 !important;}
.noteText-bottom {
	position:absolute;
	left:0px;
	bottom:-80px;
	display:block;
	width:50%;
	height:80px;
	background:url('../../../common/contents/images/textarea_note_bottom.png') left top no-repeat;
	box-sizing:border-box;
    z-index:0;
}
.noteText-bottom::before{
    content:"";
    position:absolute;
    bottom:25px;

    left:90%;
    width:20%;
    border:5px solid #b4e1ff;
}
.noteText-bottom:after {
    content:"";
	position:absolute;
	left:100%;
	bottom:0;
	display:block;
	width:100%;
	height:80px;
	background:url('../../../common/contents/images/textarea_note_bottom.png') right top no-repeat;
	box-sizing:border-box;
}

.noteText .text-exam{
    display:none;
    position:absolute;
    z-index:2;
    line-height:60px;
}
.noteText .answerMode ~.text-exam{display:flex;}
.noteText .text-exam .exam{transform:translate(0,6px);}

.balloonBox[data-is="balloon"] .popBtn.speech[data-play="on"][data-toggle="false"],
.balloonBox[data-is="balloon"] .popBtn.speech.on[data-toggle="false"]{opacity: 0; pointer-events: none;} 

.balloonBox {height: 50px;}
.balloonBox .popBtn.speech[data-play="on"][data-toggle="true"],
.balloonBox .popBtn.speech.on[data-toggle="true"]{opacity: 1; pointer-events: auto;}
.balloonBox .balloon{opacity:0;display:none;cursor: pointer;}
.balloonBox .balloon *{cursor: pointer;}
.balloonBox[data-state="on"] .balloon{opacity:1;display:block;cursor: pointer;}
.balloonBox[data-state="on"][data-is="balloon"] .speech {display: none;}

/***활동방법 탭인탭***/
.howtoBox .title-box {
    position:relative;
    margin-bottom:10px;
    width:100%;
    height:59px;
    background:url(../../../common/contents/images/howto_title_bg.png) no-repeat;
    background-size:contain;
    pointer-events:none;
}
.howtoBox .title-box .title {
    position:absolute;
    left:89px;
    top:11px;
    font-family:YGJAL;
    font-size:30px;
    color:#fff;
}
.howtoBox .pic-box {
    position:relative;
    border:5px solid #fdf3e7;
    background:#fdf3e7;
    border-radius:15px;
    overflow:hidden;
    width:100%;
    height:416px;
}
.howtoBox .bullet {
    position:absolute;
    left:5px;
    top:5px;
}

.howtoBox .pic-box .image-box {
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.howtoBox .pic-box .image {
    width:100%;
    height:295px;
    background:url(../../../proto_km/images/proto_km_223/proto_km_223.png) no-repeat;
    background-size:contain;
}
.howtoBox .pic-box .text-box {
    width:100%;
    height:110px;
    padding:0 25px;
    background-color:#fdf3e7;
    text-align:justify;
    display:flex;
    justify-content:center;
    align-items:center;
}

.how-to-box.line3 .pic-box .image {height:248px !important;}
.how-to-box.line3 .pic-box .text-box {height:auto;}

.howtoBoxLine2 .pic-box {height:371px;}
.howtoBoxLine2 .pic-box .image { height:254px;}
.howtoBoxLine2 .how-to-box.line3 .pic-box .image {height:197px !important;}


/***놀이방법***/
.how-to-box .title-box {
    position:relative;
    margin-bottom:10px;
    width:100%;
    height:75px;
    background:url(../../../common/contents/images/howto_title_bg.png) no-repeat;
    background-size:contain;
    pointer-events:none;
}

.how-to-box .title-box .title {
    position:absolute;
    left:89px;
    top:11px;
    font-family:YGJAL;
    font-size:30px;
    color:#fff;
}

.how-to-play li { display:flex;align-items:center;margin-bottom:30px}
.how-to-play li .text { line-height:1.2}
.how-to-play li .bullet { margin-top:8px;margin-right:20px}



/***그룹스피치***/
.group-speech { position: relative; margin: 0 auto; top: 40px; }
.group-speech .char-box { position: absolute; }
.group-speech-01 { width: 1100px; height: 500px; background: url("../../../common/contents/images/groupSpeech/group_speech_bg_01.png")no-repeat; background-size: contain; }
.group-speech-02 { width: 1100px; height: 500px; background: url("../../../common/contents/images/groupSpeech/group_speech_bg_03.png")no-repeat; background-size: contain; }
.group-speech-03 { width: 1100px; height: 500px; background: url("../../../common/contents/images/groupSpeech/group_speech_bg_04.png")no-repeat; background-size: contain; }
.group-speech-04 { width: 1100px; height: 500px; background: url("../../../common/contents/images/groupSpeech/group_speech_bg_02.png")no-repeat; background-size: contain; }

.group-speech .char-image { position: relative; }
.group-speech .char-image:before { position: absolute; top: -15px; right: 0px; content: ''; background: url("../../../common/contents/images/button/btn_speech_balloon_left1.png")no-repeat;  width: 64px; height: 64px; }
.group-speech .char-image.left:before { position: absolute; right: auto; left: -30px; content: ''; background: url("../../../common/contents/images/button/btn_speech_balloon_right1.png")no-repeat; width: 64px; height: 64px; }
.group-speech .char-image:hover:before { background: url("../../../common/contents/images/button/btn_speech_balloon_left1_hover.png")no-repeat; }
.group-speech .char-image.left:hover:before { background: url("../../../common/contents/images/button/btn_speech_balloon_right1_hover.png")no-repeat; }
.group-speech .char-image.beforeNon:before { display: none; }

/*캐릭터이미지*/
.group-speech .char-box-01 .char-image {width: 210px; height: 320px; background: url("../../../common/contents/images/groupSpeech/char_01.png")no-repeat; background-size: contain; cursor: pointer; }
.group-speech .char-box-01 .char-image:hover {width: 210px; height: 320px; background: url("../../../common/contents/images/groupSpeech/char_01_over.png")no-repeat; background-size: contain;}
.group-speech .char-box-02 .char-image {width: 210px; height: 320px; background: url("../../../common/contents/images/groupSpeech/char_02.png")no-repeat; background-size: contain; cursor: pointer; }
.group-speech .char-box-02 .char-image:hover {width: 210px; height: 320px; background: url("../../../common/contents/images/groupSpeech/char_02_over.png")no-repeat; background-size: contain; }

.group-speech .char-box-01_1 .char-image {width: 210px; height: 320px; background: url("../../../common/contents/images/character/char_06.png")no-repeat; background-size: contain; cursor: pointer; }
.group-speech .char-box-02_1 .char-image {width: 210px; height: 320px; background: url("../../../common/contents/images/character/char_03.png")no-repeat; background-size: contain; cursor: pointer; }

.group-speech .char-box-03 .char-image {width: 210px; height: 320px; background: url("../../../common/contents/images/groupSpeech/char_07.png")no-repeat; background-size: contain; cursor: pointer; }
.group-speech .char-box-03 .char-image:hover {width: 210px; height: 320px; background: url("../../../common/contents/images/groupSpeech/char_07_over.png")no-repeat; background-size: contain; }
.group-speech .char-box-04 .char-image {width: 210px; height: 320px; background: url("../../../common/contents/images/groupSpeech/char_08.png")no-repeat; background-size: contain; cursor: pointer; }
.group-speech .char-box-04 .char-image:hover {width: 210px; height: 320px; background: url("../../../common/contents/images/groupSpeech/char_08_over.png")no-repeat; background-size: contain; }
.group-speech .char-box-05 .char-image {width: 210px; height: 320px; background: url("../../../common/contents/images/groupSpeech/char_09.png")no-repeat; background-size: contain; cursor: pointer; }
.group-speech .char-box-05 .char-image:hover {width: 210px; height: 320px; background: url("../../../common/contents/images/groupSpeech/char_09_over.png")no-repeat; background-size: contain; }

.group-speech .char-box-03_1 .char-image {width: 210px; height: 320px; background: url("../../../common/contents/images/character/char_05.png")no-repeat; background-size: contain; cursor: pointer; }
.group-speech .char-box-04_1 .char-image {width: 210px; height: 320px; background: url("../../../common/contents/images/character/char_08.png")no-repeat; background-size: contain; cursor: pointer; }
.group-speech .char-box-05_1 .char-image {width: 210px; height: 320px; background: url("../../../common/contents/images/character/char_01.png")no-repeat; background-size: contain; cursor: pointer; }

.group-speech .char-box-06 .char-image { width: 180px; height: 300px; background: url("../../../common/contents/images/groupSpeech/char_10.png")no-repeat; background-size: contain; cursor: pointer; }
.group-speech .char-box-06 .char-image:hover { width: 180px; height: 300px; background: url("../../../common/contents/images/groupSpeech/char_10_over.png")no-repeat; background-size: contain; }
.group-speech .char-box-07 .char-image { width: 180px; height: 300px; background: url("../../../common/contents/images/groupSpeech/char_11.png")no-repeat; background-size: contain; cursor: pointer; }
.group-speech .char-box-07 .char-image:hover { width: 180px; height: 300px; background: url("../../../common/contents/images/groupSpeech/char_11_over.png")no-repeat; background-size: contain; }
.group-speech .char-box-08 .char-image { width: 200px; height: 320px; background: url("../../../common/contents/images/groupSpeech/char_12.png")no-repeat; background-size: contain; cursor: pointer; }
.group-speech .char-box-08 .char-image:hover { width: 200px; height: 320px; background: url("../../../common/contents/images/groupSpeech/char_12_over.png")no-repeat; background-size: contain; }
.group-speech .char-box-09 .char-image { width: 180px; height: 300px; background: url("../../../common/contents/images/groupSpeech/char_13.png")no-repeat; background-size: contain; cursor: pointer; }
.group-speech .char-box-09 .char-image:hover { width: 180px; height: 300px; background: url("../../../common/contents/images/groupSpeech/char_13_over.png")no-repeat; background-size: contain; }

.group-speech .char-box-10 .char-image { width: 180px; height: 300px; background: url("../../../common/contents/images/groupSpeech/char_03.png")no-repeat; background-size: contain; cursor: pointer; }
.group-speech .char-box-10 .char-image:hover { width: 180px; height: 300px; background: url("../../../common/contents/images/groupSpeech/char_03_over.png")no-repeat; background-size: contain; }
.group-speech .char-box-11 .char-image { width: 180px; height: 300px; background: url("../../../common/contents/images/groupSpeech/char_04.png")no-repeat; background-size: contain; cursor: pointer; }
.group-speech .char-box-11 .char-image:hover { width: 180px; height: 300px; background: url("../../../common/contents/images/groupSpeech/char_04_over.png")no-repeat; background-size: contain; }
.group-speech .char-box-12 .char-image { width: 200px; height: 320px; background: url("../../../common/contents/images/groupSpeech/char_05.png")no-repeat; background-size: contain; cursor: pointer; }
.group-speech .char-box-12 .char-image:hover { width: 200px; height: 320px; background: url("../../../common/contents/images/groupSpeech/char_05_over.png")no-repeat; background-size: contain; }
.group-speech .char-box-13 .char-image { width: 200px; height: 300px; background: url("../../../common/contents/images/groupSpeech/char_06.png")no-repeat; background-size: contain; cursor: pointer; }
.group-speech .char-box-13 .char-image:hover { width: 200px; height: 300px; background: url("../../../common/contents/images/groupSpeech/char_06_over.png")no-repeat; background-size: contain; }

/*캐릭터위치*/
.group-speech .char-box-01 { top: 150px; left: 330px; }
.group-speech .char-box-02 { top: 150px; left: 560px; }
.group-speech .char-box-01_1 { top: 150px; left: 330px; }
.group-speech .char-box-02_1 { top: 150px; left: 560px; }

.group-speech .char-box-03 { top: 120px; left: 270px; }
.group-speech .char-box-04 { top: 100px; left: 450px; }
.group-speech .char-box-05 { top: 180px; left: 750px; }
.group-speech .char-box-03_1 { top: 150px; left: 170px; }
.group-speech .char-box-04_1 { top: 150px; left: 450px; }
.group-speech .char-box-05_1 { top: 150px; left: 750px; }



.group-speech .char-box-06 { top: 115px; left: 170px; }
.group-speech .char-box-07 { top: 80px; left: 340px; }
.group-speech .char-box-08 { top: 90px; left: 530px; }
.group-speech .char-box-09 { top: 100px; left: 740px; }

.group-speech .char-box-10 { top: 185px; left: 185px; }
.group-speech .char-box-11 { top: 160px; left: 365px; }
.group-speech .char-box-12 { top: 170px; left: 550px; }
.group-speech .char-box-13 { top: 190px; left: 755px; }

.group-speech-01 .char-box-01 .char-image {width:210px;height:320px;background:url("../../../common/contents/images/groupSpeech/char_01.png")no-repeat;background-size:contain;cursor:pointer}
.group-speech-01 .char-box-01 .char-image:hover {width:210px;height:320px;background:url("../../../common/contents/images/groupSpeech/char_01_over.png")no-repeat;background-size:contain}
 

/*close버튼*/
.close-speech-button {
    position:absolute;
    right:-28px;
    top:2px;
    width:23px;
    height:23px;
    background:url(../../../common/contents/images/button/close_speech_button.png) no-repeat;
    background-size:contain;
    cursor:pointer;
}
.char-box[data-toggle="true"] .char-image::before{display:none;}
.char-box[data-toggle="true"] .balloon{display:flex;}
.char-box .balloon{display:none;justify-content:center;}

.char-img{
    width:280px;
    height:300px;
    background:url(../../contents/images/character/boy_1.png) no-repeat 50% 100% / contain;
}
.char-img[data-boy="1"]{background-image:url(../../contents/images/character/boy_1.png);background-size:205px;}
.char-img[data-boy="2"]{background-image:url(../../contents/images/character/boy_2.png);}
.char-img[data-boy="3"]{background-image:url(../../contents/images/character/boy_3.png);}
.char-img[data-boy="4"]{background-image:url(../../contents/images/character/boy_4.png);}

.char-img[data-girl="1"]{background-image:url(../../contents/images/character/girl_1.png);background-size:205px;}
.char-img[data-girl="2"]{background-image:url(../../contents/images/character/girl_2.png);}
.char-img[data-girl="3"]{background-image:url(../../contents/images/character/girl_3.png);}
.char-img[data-girl="4"]{background-image:url(../../contents/images/character/girl_4.png);}
.char-img .balloon{position:absolute;top:0;left:0;}


/*풀애니*/
.mediaContainer.fullAni .mediaSubContainer {position:relative;}
.mediaContainer.fullAni .screenPlayBtn {
    width:auto;
    height:auto;
    border-radius:0;
    background:none;
    background-color:#f6e7d4;
    box-shadow:none;
    cursor:pointer;
}
.mediaContainer.fullAni .screenPlayBtn:hover {background:none;background-color:#f6e7d4;}
.mediaContainer.fullAni .mediaSubContainer:before {
    content:'';
    position:absolute;
    top:-64px;
    left:0;
    width:100%;
    height:99px;
    background:url(../images/background/bg_video_title.png) no-repeat;
    background-size:40%;
}
.mediaContainer.fullAni .subTitle {
    display:flex;
    position:absolute;
    top:-79px;
    left:-16px;
    background-color:#ecd8bf;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    padding:30px 10px 0 10px;
    padding-top:30px;
}
.mediaContainer.fullAni .subTitle::before {
    content:'';
    display:block;
    width:178px;
    height:33px;
    background:url(../images/background/bg_video_title.png) no-repeat;
    background-size:contain;
}
.mediaContainer.fullAni .subTitle::after {
    content:"";
    display:block;
    width:30px;
    height:30px;
    border-radius:50%;
    background:#f60 url(../images/icon/icon_play.svg) 10px center/12px no-repeat;
    box-shadow:0 3px 4px rgba(0,0,0,0.2);
    z-index:2;
}
.mediaContainer.fullAni .mediaSubContainer:before {display:none;}

/*대발문 풀애니*/
.aniContainer .basicSlider_slides .video {height:100%;}
.aniContainer .contentsBox {padding:0;}
.mediaContainer h2 {display:block;margin-bottom:0;}
.mediaContainer.fullAni h2 {cursor:pointer;}
.aniContainer .basicSlider_slides .aniContainer .video {position:static;}
.aniContainer .mediaContainer.video video {top:0;width:100%;height:100%;}

/*대발문 풀애니 2*/

.mediaContainer.hunmin .screenPlayBtn {position:absolute;bottom:-52px;left:50%;transform:translateX(-50%);}


.squareClick{display:flex;gap:10px;align-items:center;justify-content:center;}
.squareClick > .colorBox{min-width:80px;text-align:center;}
.squareClick_2{display:flex;gap:10px;flex-direction:column;}
.squareClick_wrap > .colorBox{text-align:center;min-width:200px}
.squareClick_btn{display:flex;background-color:pink;}
.squareClick_btn > div{width:80px;height:80px;border:3px solid #000;margin-left:-3px;background-color:#fff;}
.squareClick_wrap {display:flex;gap:10px}

.squareClick_btn[data-type="fill"][data-check="1"] [data-n="1"],
.squareClick_btn[data-type="fill"][data-check="2"] [data-n="1"],
.squareClick_btn[data-type="fill"][data-check="2"] [data-n="2"],
.squareClick_btn[data-type="fill"][data-check="3"] [data-n="1"],
.squareClick_btn[data-type="fill"][data-check="3"] [data-n="2"],
.squareClick_btn[data-type="fill"][data-check="3"] [data-n="3"],
.squareClick_btn[data-type="fill"][data-check="4"] [data-n="1"],
.squareClick_btn[data-type="fill"][data-check="4"] [data-n="2"],
.squareClick_btn[data-type="fill"][data-check="4"] [data-n="3"],
.squareClick_btn[data-type="fill"][data-check="4"] [data-n="4"],
.squareClick_btn[data-type="fill"][data-check="5"] [data-n="1"],
.squareClick_btn[data-type="fill"][data-check="5"] [data-n="2"],
.squareClick_btn[data-type="fill"][data-check="5"] [data-n="3"],
.squareClick_btn[data-type="fill"][data-check="5"] [data-n="4"],
.squareClick_btn[data-type="fill"][data-check="5"] [data-n="5"],
.squareClick_btn[data-type="fill"][data-check="6"] [data-n="1"],
.squareClick_btn[data-type="fill"][data-check="6"] [data-n="2"],
.squareClick_btn[data-type="fill"][data-check="6"] [data-n="3"],
.squareClick_btn[data-type="fill"][data-check="6"] [data-n="4"],
.squareClick_btn[data-type="fill"][data-check="6"] [data-n="5"],
.squareClick_btn[data-type="fill"][data-check="6"] [data-n="6"],
.squareClick_btn[data-type="fill"][data-check="7"] [data-n="1"],
.squareClick_btn[data-type="fill"][data-check="7"] [data-n="2"],
.squareClick_btn[data-type="fill"][data-check="7"] [data-n="3"],
.squareClick_btn[data-type="fill"][data-check="7"] [data-n="4"],
.squareClick_btn[data-type="fill"][data-check="7"] [data-n="5"],
.squareClick_btn[data-type="fill"][data-check="7"] [data-n="6"],
.squareClick_btn[data-type="fill"][data-check="7"] [data-n="7"],
.squareClick_btn[data-type="fill"][data-check="8"] [data-n="1"],
.squareClick_btn[data-type="fill"][data-check="8"] [data-n="2"],
.squareClick_btn[data-type="fill"][data-check="8"] [data-n="3"],
.squareClick_btn[data-type="fill"][data-check="8"] [data-n="4"],
.squareClick_btn[data-type="fill"][data-check="8"] [data-n="5"],
.squareClick_btn[data-type="fill"][data-check="8"] [data-n="6"],
.squareClick_btn[data-type="fill"][data-check="8"] [data-n="7"],
.squareClick_btn[data-type="fill"][data-check="8"] [data-n="8"],
.squareClick_btn[data-type="fill"][data-check="9"] [data-n="1"],
.squareClick_btn[data-type="fill"][data-check="9"] [data-n="2"],
.squareClick_btn[data-type="fill"][data-check="9"] [data-n="3"],
.squareClick_btn[data-type="fill"][data-check="9"] [data-n="4"],
.squareClick_btn[data-type="fill"][data-check="9"] [data-n="5"],
.squareClick_btn[data-type="fill"][data-check="9"] [data-n="6"],
.squareClick_btn[data-type="fill"][data-check="9"] [data-n="7"],
.squareClick_btn[data-type="fill"][data-check="9"] [data-n="8"],
.squareClick_btn[data-type="fill"][data-check="9"] [data-n="9"]{background-color:transparent !important;}

.squareClick_btn[data-check="1"] [data-n="1"],
.squareClick_btn[data-check="2"] [data-n="2"],
.squareClick_btn[data-check="3"] [data-n="3"],
.squareClick_btn[data-check="4"] [data-n="4"],
.squareClick_btn[data-check="5"] [data-n="5"],
.squareClick_btn[data-check="6"] [data-n="6"],
.squareClick_btn[data-check="7"] [data-n="7"],
.squareClick_btn[data-check="8"] [data-n="8"],
.squareClick_btn[data-check="9"] [data-n="9"]{background-color:transparent 
!important;}


.squareClick_btn[data-disabled="true"] > div{pointer-events:none;}
.complete[data-page-num] .squareClick_btn{cursor:default !important;}
.complete[data-page-num] .squareClick_btn:not([data-disabled="true"]) > div{background-color:#fff !important;pointer-events:none;cursor:default !important;}
.squareClick .squareClick_wrap .squareClick_btn > div.on{background-color:transparent !important;}


.img-line{
    position:relative;
    margin:0 auto;
}
.img-line img{
    display:block;
    width:100%;
    position:absolute;
    top:0;left:0;
    opacity:0;
    pointer-events: none;
}
.img-line .bg{
    position:relative;
    display:block;
    z-index:0;
    opacity:1;
}

.img-line.on img{
    animation-name:imglineStep;
    animation-duration:.3s;
    animation-iteration-count:1;
    animation-timing-function:ease-out;
    animation-fill-mode:forwards;
}
.img-line.on .bg{
     animation-name:none;
}
.img-line.on img:nth-child(2) {animation-delay:0;}
.img-line.on img:nth-child(3) {animation-delay:0.2s;}
.img-line.on img:nth-child(4) {animation-delay:0.4s;}
.img-line.on img:nth-child(5) {animation-delay:0.6s;}
.img-line.on img:nth-child(6) {animation-delay:0.8s;}
.img-line.on img:nth-child(7) {animation-delay:1s;}
.img-line.on img:nth-child(8) {animation-delay:1.2s;}
.img-line.on img:nth-child(9) {animation-delay:1.4s;}
.img-line.on img:nth-child(10) {animation-delay:1.6s;}
.img-line.on img:nth-child(11) {animation-delay:1.8s;}
.img-line.on img:nth-child(12) {animation-delay:2s;}  
.img-line.on img:nth-child(13) {animation-delay:2.2s;} 
.img-line.on img:nth-child(14) {animation-delay:2.4s;}
.img-line.on img:nth-child(15) {animation-delay:2.6s;}
.img-line.on img:nth-child(16) {animation-delay:2.8s;}
.img-line.on img:nth-child(17) {animation-delay:3s;}  
.img-line.on img:nth-child(18) {animation-delay:3.2s;} 
.img-line.on img:nth-child(19) {animation-delay:3.4s;}
.img-line.on img:nth-child(20) {animation-delay:3.6s;}
.img-line.on img:nth-child(21) {animation-delay:3.8s;}
.img-line.on img:nth-child(22) {animation-delay:4s;}  
.img-line.on img:nth-child(23) {animation-delay:4.2s;} 
.img-line.on img:nth-child(24) {animation-delay:4.4s;}
.img-line.on img:nth-child(25) {animation-delay:4.6s;}
.img-line.on img:nth-child(26) {animation-delay:4.8s;}
.img-line.on img:nth-child(27) {animation-delay:5s;}
.img-line.on img:nth-child(28) {animation-delay:5.2s;}
.img-line.on img:nth-child(29) {animation-delay:5.4s;}
.img-line.on img:nth-child(30) {animation-delay:5.6s;}

.img-step{
    position:relative;
    margin:0 auto;
}
.img-step > *{
    opacity:0;
}
.img-step.on > *{
    animation-name:imglineStep;
    animation-duration:.9s;
    animation-iteration-count:1;
    animation-timing-function:ease-out;
    animation-fill-mode:forwards;
}
.img-step.on > *:nth-child(1){
    opacity: 1;
    animation-name:none;
}
.img-step.on > *:nth-child(2) {animation-delay:0;}
.img-step.on > *:nth-child(3) {animation-delay:0.4s;}
.img-step.on > *:nth-child(4) {animation-delay:0.8s;}
.img-step.on > *:nth-child(5) {animation-delay:1.2s;}
.img-step.on > *:nth-child(6) {animation-delay:1.6s;}
.img-step.on > *:nth-child(7) {animation-delay:2s;}
.img-step.on > *:nth-child(8) {animation-delay:2.4s;}
.img-step.on > *:nth-child(9) {animation-delay:2.8s;}
.img-step.on > *:nth-child(11) {animation-delay:3.2s;}
.img-step.on > *:nth-child(12) {animation-delay:3.6s;}
.img-step.on > *:nth-child(13) {animation-delay:4s;}
.img-step.on > *:nth-child(14) {animation-delay:4.4s;}
.img-step.on > *:nth-child(15) {animation-delay:4.8s;}
.img-step.on > *:nth-child(16) {animation-delay:5.2s;}
@keyframes imglineStep {
    0% {opacity:0;}
    100% {opacity:1;}
}
header ._link-off,
header a._link{display:inline-block;width:68px;height:40px;position:relative;pointer-events:auto;}
header ._link-off img,
header ._link img{width:68px;position:absolute;top:-14px;left:0}
header button._link{display:inline-block;width:68px;height:40px;position:relative;pointer-events:auto; transform: translateY(2px); cursor: pointer;}

._link img{width:68px;position:absolute;top:-14px;left:0}
button._link{display:inline-block;width:68px;height:40px;position:relative;pointer-events:auto; transform: translateY(-20px); cursor: pointer;min-width:68px}
button._link img{min-width: 68px; height: auto;}

.numBoxG {
    position:absolute;
    top:115px;
    left:-50px;
    width:380px;
    height:auto;
}
.numBoxG .arrow {
    position:absolute;
    top:0;left:0;
}
.numBoxG .arrow_1 {
    background:url(../images/common/number_arrow.png) no-repeat;
    width:52px;
    height:76px;
    background-size:35px auto;
    top:113px;
    left:110px;
    transform:rotateZ(16deg);
}
.numBoxG .arrow_2 {
    background:url(../images/common/number_arrow2.png) no-repeat;
    width:52px;
    height:76px;
    background-size:35px auto;
    top:113px;
    left:110px;
    background-size:contain;
}
.numBoxG .arrow_3 {
    background:url(../images/common/number_arrow3.png) no-repeat;
    width: 73px;
    height:76px;
    background-size:35px auto;
    top: 101px;
    left: 145px;
    background-size:contain;
}
.numBoxG .arrow_4 {
    background:url(../images/common/number_arrow4.png) no-repeat;
    width: 142px;
    height:76px;
    background-size:35px auto;
    top:113px;
    left: 98px;
    background-size:contain;
}
.numBoxG .arrow_5 {
    background:url(../images/common/number_arrow5.png) no-repeat;
    width: 219px;
    height: 105px;
    background-size:35px auto;
    top: 106px;
    left: 100px;
    background-size:contain;
}


.numBoxG .numcheck{
    position:absolute;
    left:0;
}

.numBoxG .numBox {cursor:default;}
.numBoxG .numImg {
    position:absolute;
    top:-52px;
    left:-49px;
    width:430px;
    z-index:10;
}
.numBoxG .numImg.num_0{
    background:url(../images/num/num_0/num_0_0.png) no-repeat 161px 177px;
    background-size:111px auto;
}
.ui-imgsprite{pointer-events: none;}
.ui-imgsprite-btn.on{display:none;}
.ui-imgsprite-btn{position:absolute;top:190px;left:150px;z-index:20;}
.numBoxG .circleNum {
    position:absolute;
    font-size:40px;
    font-weight:bold;
    top:110px;
    left:60px;
}
.number-write{position:absolute;display:flex;top:220px;left:230px;gap:40px}
.number-write-item{position:relative;width:160px;}
.number-write img{display:block;width:100%;}
.number-write img.on{position:absolute;top:0;left:0;opacity:0;}

[data-quiz].complete img.on{ opacity:1;}

.number-write-item::before{
    content:"";
    display:block;
    position:absolute;
    bottom:-20px;
    left:10%;
    width:80%;
    height:10px;
    background-color:#9fa0a0;
}
.number-write-item .arrow_1{position:absolute;top:0;left:20px;
    background:url(../images/common/number_arrow.png) no-repeat;
    width:52px;
    height:76px;
    background-size:35px auto;
    transform:rotateZ(16deg);
}
.number-write-item .arrow_2{position:absolute;top:0;left:20px;
    background:url(../images/common/number_arrow2.png) no-repeat;
    width:52px;
    height:76px;
    background-size:contain;
}
.number-write-item .arrow_3{
    position:absolute;
    top:0;
    left: 29px;
    background:url(../images/common/number_arrow3.png) no-repeat;
    width: 52px;
    height: 36px;
    background-size:contain;
}
.number-write-item .arrow_4{
    position:absolute;
    top: 8px;
    left: 10px;
    background:url(../images/common/number_arrow4.png) no-repeat;
    width: 83px;
    height:76px;
    background-size:contain;
}
.number-write-item .arrow_5{
    position:absolute;
    top: 3px;
    left: 14px;
    background:url(../images/common/number_arrow5.png) no-repeat;
    width: 74px;
    height:76px;
    background-size:contain;
}
.number-write-item .circleNum{position:absolute;top:0;left:-30px;
font-size:40px;
    font-weight:bold;
}


/***self-check***/
.example-box {display:flex;justify-content:space-between;}
.example-box .study_guide {position:static;}
.example-box .exampleIcoWrap {display:flex;}
.example-box .exampleIcoWrap .example {
    position:relative;
    margin:0 3px;
    padding:6px 10px 6px 5px;
    background-color:#F3EEE8;
    border-radius:30px;
    font-family:NotoB;
    font-size:16px;
    color:#6B615A;
    display:flex;
    justify-content:center;
    align-items:center;
}
.example-box .example::before {
    content:"";
    display:block;
    position:relative;
    top:0;
    width:24px;
    height:24px;
    margin-right:5px;
}
.example-box .example.ico-01::before {
    background:url(../images/selfcheck/ico_03_new.png) no-repeat;
    background-size:contain;
}
.example-box .example.ico-02::before {
    background:url(../images/selfcheck/ico_02_new.png) no-repeat;
    background-size:contain;
}
.example-box .example.ico-03::before {
    background:url(../images/selfcheck/ico_01_new.png) no-repeat;
    background-size:contain;
}
.example-box .example.ico-04::before {
    background:url(../images/selfcheck/ico_04.png) no-repeat;
    background-size:contain;
}
.example-box .example.ico-05::before {
    background:url(../images/selfcheck/ico_05.png) no-repeat;
    background-size:contain;
}
.check-box {
    display:flex;
    justify-content:flex-end;
    align-items:center;
}
.check-box > div {
    margin-left:8px;
}
.check-box .wrap {
    width:83px;
    height:83px;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    cursor:pointer;
}
.check-box .wrap .button-oIcon {
    width:83px;
    height:83px;
    background:url(../images/selfcheck/button_self_02.png) no-repeat;
    background-size:83px 249px;
    background-position:0 0;
}
.check-box .wrap.on .button-oIcon {
    background-position:0px -166px !important;
}
.check-box .wrap:hover .button-oIcon,
.check-box .wrap.over .button-oIcon {
    background-position:0 -83px;
}

.check-box .wrap .button-xIcon {
    width:83px;
    height:83px;
    background:url(../images/selfcheck/button_self_04.png) no-repeat;
    background-size:83px 249px;
    background-position:0 0;
}
.check-box .wrap.on .button-xIcon {
    background-position:0px -166px !important;
}
.check-box .wrap:hover .button-xIcon,
.check-box .wrap.over .button-xIcon {
    background-position:0 -83px;
}
.icon-box {display:flex;align-items:center;}
.icon-box .wrap {cursor:pointer;margin-right:8px;}
.icon-box .wrap:last-child {margin-right:0;}

.icon-box .wrap .button-smile.icon1 {
    width:83px;
    height:83px;
    background:url(../images/selfcheck/button_smile_001.png) no-repeat;
    background-size:83px 249px;
    background-position:0 0;
}
.icon-box .wrap.on .button-smile.icon1 {
    background-position:0px -166px !important;
}
.icon-box .wrap:hover .button-smile.icon1,
.icon-box .wrap.over .button-smile.icon1 {
    background-position:0 -83px;
}
.icon-box .wrap .button-smile.icon2 {
    width:83px;
    height:83px;
    background:url(../images/selfcheck/button_smile_002.png) no-repeat;
    background-size:83px 249px;
    background-position:0 0;
}
.icon-box .wrap.on .button-smile.icon2 {
    background-position:0px -166px !important;
}
.icon-box .wrap:hover .button-smile.icon2,
.icon-box .wrap.over .button-smile.icon2 {
    background-position:0 -83px;
}

.icon-box .wrap .button-smile.icon3 {
    width:83px;
    height:83px;
    background:url(../images/selfcheck/button_smile_003.png) no-repeat;
    background-size:83px 249px;
    background-position:0 0;
}
.icon-box .wrap.on .button-smile.icon3 {
    background-position:0px -166px !important;
}
.icon-box .wrap:hover .button-smile.icon3,
.icon-box .wrap.over .button-smile.icon3 {
    background-position:0 -83px;
}

.self-check .checkWrap {
    width:100%;
    padding:10px 15px 10px 25px;
    margin-bottom:10px;
    background-color:#F3EEE8;
    border-radius:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.icon_box { display:flex;align-items:center}
.icon_box img { width:70px;height:70px}
.toggle-pointtable th img{height: 140px;}
.toggle-pointtable .point td{width: 90px; height: 90px; cursor: pointer; padding: 0;}
.toggle-pointtable .point td .img{position: relative; width: 80px; margin: 0 auto;}
.toggle-pointtable .point td .img img{width: 100%; display: block;}
.toggle-pointtable .point td .img img + img{position: absolute; top:0; left:0; opacity: 0;}

.toggle-pointtable [data-check="1"] [data-n="1"] .img img + img,
.toggle-pointtable [data-check="2"] [data-n="1"] .img img + img,
.toggle-pointtable [data-check="2"] [data-n="2"] .img img + img,
.toggle-pointtable [data-check="3"] [data-n="1"] .img img + img,
.toggle-pointtable [data-check="3"] [data-n="2"] .img img + img,
.toggle-pointtable [data-check="3"] [data-n="3"] .img img + img,
.toggle-pointtable [data-check="4"] [data-n="1"] .img img + img,
.toggle-pointtable [data-check="4"] [data-n="2"] .img img + img,
.toggle-pointtable [data-check="4"] [data-n="3"] .img img + img,
.toggle-pointtable [data-check="4"] [data-n="4"] .img img + img,
.toggle-pointtable [data-check="5"] [data-n="1"] .img img + img,
.toggle-pointtable [data-check="5"] [data-n="2"] .img img + img,
.toggle-pointtable [data-check="5"] [data-n="3"] .img img + img,
.toggle-pointtable [data-check="5"] [data-n="4"] .img img + img,
.toggle-pointtable [data-check="5"] [data-n="5"] .img img + img,
.toggle-pointtable [data-check="6"] [data-n="1"] .img img + img,
.toggle-pointtable [data-check="6"] [data-n="2"] .img img + img,
.toggle-pointtable [data-check="6"] [data-n="3"] .img img + img,
.toggle-pointtable [data-check="6"] [data-n="4"] .img img + img,
.toggle-pointtable [data-check="6"] [data-n="5"] .img img + img,
.toggle-pointtable [data-check="6"] [data-n="6"] .img img + img,
.toggle-pointtable [data-check="7"] [data-n="1"] .img img + img,
.toggle-pointtable [data-check="7"] [data-n="2"] .img img + img,
.toggle-pointtable [data-check="7"] [data-n="3"] .img img + img,
.toggle-pointtable [data-check="7"] [data-n="4"] .img img + img,
.toggle-pointtable [data-check="7"] [data-n="5"] .img img + img,
.toggle-pointtable [data-check="7"] [data-n="6"] .img img + img,
.toggle-pointtable [data-check="7"] [data-n="7"] .img img + img,
.toggle-pointtable [data-check="8"] [data-n="1"] .img img + img,
.toggle-pointtable [data-check="8"] [data-n="2"] .img img + img,
.toggle-pointtable [data-check="8"] [data-n="3"] .img img + img,
.toggle-pointtable [data-check="8"] [data-n="4"] .img img + img,
.toggle-pointtable [data-check="8"] [data-n="5"] .img img + img,
.toggle-pointtable [data-check="8"] [data-n="6"] .img img + img,
.toggle-pointtable [data-check="8"] [data-n="7"] .img img + img,
.toggle-pointtable [data-check="8"] [data-n="8"] .img img + img,
.toggle-pointtable [data-check="9"] [data-n="1"] .img img + img,
.toggle-pointtable [data-check="9"] [data-n="2"] .img img + img,
.toggle-pointtable [data-check="9"] [data-n="3"] .img img + img,
.toggle-pointtable [data-check="9"] [data-n="4"] .img img + img,
.toggle-pointtable [data-check="9"] [data-n="5"] .img img + img,
.toggle-pointtable [data-check="9"] [data-n="6"] .img img + img,
.toggle-pointtable [data-check="9"] [data-n="7"] .img img + img,
.toggle-pointtable [data-check="9"] [data-n="8"] .img img + img,
.toggle-pointtable [data-check="9"] [data-n="9"] .img img + img,
.toggle-pointtable [data-check="10"] [data-n="1"] .img img + img,
.toggle-pointtable [data-check="10"] [data-n="2"] .img img + img,
.toggle-pointtable [data-check="10"] [data-n="3"] .img img + img,
.toggle-pointtable [data-check="10"] [data-n="4"] .img img + img,
.toggle-pointtable [data-check="10"] [data-n="5"] .img img + img,
.toggle-pointtable [data-check="10"] [data-n="6"] .img img + img,
.toggle-pointtable [data-check="10"] [data-n="7"] .img img + img,
.toggle-pointtable [data-check="10"] [data-n="8"] .img img + img,
.toggle-pointtable [data-check="10"] [data-n="9"] .img img + img,
.toggle-pointtable [data-check="10"] [data-n="10"] .img img + img {opacity: 1;}


.toggle-pointtable .point.color-01 [data-check="1"] [data-n="1"],
.toggle-pointtable .point.color-01 [data-check="2"] [data-n="1"],
.toggle-pointtable .point.color-01 [data-check="2"] [data-n="2"],
.toggle-pointtable .point.color-01 [data-check="3"] [data-n="1"],
.toggle-pointtable .point.color-01 [data-check="3"] [data-n="2"],
.toggle-pointtable .point.color-01 [data-check="3"] [data-n="3"],
.toggle-pointtable .point.color-01 [data-check="4"] [data-n="1"],
.toggle-pointtable .point.color-01 [data-check="4"] [data-n="2"],
.toggle-pointtable .point.color-01 [data-check="4"] [data-n="3"],
.toggle-pointtable .point.color-01 [data-check="4"] [data-n="4"],
.toggle-pointtable .point.color-01 [data-check="5"] [data-n="1"],
.toggle-pointtable .point.color-01 [data-check="5"] [data-n="2"],
.toggle-pointtable .point.color-01 [data-check="5"] [data-n="3"],
.toggle-pointtable .point.color-01 [data-check="5"] [data-n="4"],
.toggle-pointtable .point.color-01 [data-check="5"] [data-n="5"],
.toggle-pointtable .point.color-01 [data-check="6"] [data-n="1"],
.toggle-pointtable .point.color-01 [data-check="6"] [data-n="2"],
.toggle-pointtable .point.color-01 [data-check="6"] [data-n="3"],
.toggle-pointtable .point.color-01 [data-check="6"] [data-n="4"],
.toggle-pointtable .point.color-01 [data-check="6"] [data-n="5"],
.toggle-pointtable .point.color-01 [data-check="6"] [data-n="6"],
.toggle-pointtable .point.color-01 [data-check="7"] [data-n="1"],
.toggle-pointtable .point.color-01 [data-check="7"] [data-n="2"],
.toggle-pointtable .point.color-01 [data-check="7"] [data-n="3"],
.toggle-pointtable .point.color-01 [data-check="7"] [data-n="4"],
.toggle-pointtable .point.color-01 [data-check="7"] [data-n="5"],
.toggle-pointtable .point.color-01 [data-check="7"] [data-n="6"],
.toggle-pointtable .point.color-01 [data-check="7"] [data-n="7"],
.toggle-pointtable .point.color-01 [data-check="8"] [data-n="1"],
.toggle-pointtable .point.color-01 [data-check="8"] [data-n="2"],
.toggle-pointtable .point.color-01 [data-check="8"] [data-n="3"],
.toggle-pointtable .point.color-01 [data-check="8"] [data-n="4"],
.toggle-pointtable .point.color-01 [data-check="8"] [data-n="5"],
.toggle-pointtable .point.color-01 [data-check="8"] [data-n="6"],
.toggle-pointtable .point.color-01 [data-check="8"] [data-n="7"],
.toggle-pointtable .point.color-01 [data-check="8"] [data-n="8"],
.toggle-pointtable .point.color-01 [data-check="9"] [data-n="1"],
.toggle-pointtable .point.color-01 [data-check="9"] [data-n="2"],
.toggle-pointtable .point.color-01 [data-check="9"] [data-n="3"],
.toggle-pointtable .point.color-01 [data-check="9"] [data-n="4"],
.toggle-pointtable .point.color-01 [data-check="9"] [data-n="5"],
.toggle-pointtable .point.color-01 [data-check="9"] [data-n="6"],
.toggle-pointtable .point.color-01 [data-check="9"] [data-n="7"],
.toggle-pointtable .point.color-01 [data-check="9"] [data-n="8"],
.toggle-pointtable .point.color-01 [data-check="9"] [data-n="9"],
.toggle-pointtable .point.color-01 [data-check="10"] [data-n="1"],
.toggle-pointtable .point.color-01 [data-check="10"] [data-n="2"],
.toggle-pointtable .point.color-01 [data-check="10"] [data-n="3"],
.toggle-pointtable .point.color-01 [data-check="10"] [data-n="4"],
.toggle-pointtable .point.color-01 [data-check="10"] [data-n="5"],
.toggle-pointtable .point.color-01 [data-check="10"] [data-n="6"],
.toggle-pointtable .point.color-01 [data-check="10"] [data-n="7"],
.toggle-pointtable .point.color-01 [data-check="10"] [data-n="8"],
.toggle-pointtable .point.color-01 [data-check="10"] [data-n="9"], 
.toggle-pointtable .point.color-01 [data-check="10"] [data-n="10"] 
{background-color: #B4647C;}
.toggle-pointtable .point.color-02 [data-check="1"] [data-n="1"],
.toggle-pointtable .point.color-02 [data-check="2"] [data-n="1"],
.toggle-pointtable .point.color-02 [data-check="2"] [data-n="2"],
.toggle-pointtable .point.color-02 [data-check="3"] [data-n="1"],
.toggle-pointtable .point.color-02 [data-check="3"] [data-n="2"],
.toggle-pointtable .point.color-02 [data-check="3"] [data-n="3"],
.toggle-pointtable .point.color-02 [data-check="4"] [data-n="1"],
.toggle-pointtable .point.color-02 [data-check="4"] [data-n="2"],
.toggle-pointtable .point.color-02 [data-check="4"] [data-n="3"],
.toggle-pointtable .point.color-02 [data-check="4"] [data-n="4"],
.toggle-pointtable .point.color-02 [data-check="5"] [data-n="1"],
.toggle-pointtable .point.color-02 [data-check="5"] [data-n="2"],
.toggle-pointtable .point.color-02 [data-check="5"] [data-n="3"],
.toggle-pointtable .point.color-02 [data-check="5"] [data-n="4"],
.toggle-pointtable .point.color-02 [data-check="5"] [data-n="5"],
.toggle-pointtable .point.color-02 [data-check="6"] [data-n="1"],
.toggle-pointtable .point.color-02 [data-check="6"] [data-n="2"],
.toggle-pointtable .point.color-02 [data-check="6"] [data-n="3"],
.toggle-pointtable .point.color-02 [data-check="6"] [data-n="4"],
.toggle-pointtable .point.color-02 [data-check="6"] [data-n="5"],
.toggle-pointtable .point.color-02 [data-check="6"] [data-n="6"],
.toggle-pointtable .point.color-02 [data-check="7"] [data-n="1"],
.toggle-pointtable .point.color-02 [data-check="7"] [data-n="2"],
.toggle-pointtable .point.color-02 [data-check="7"] [data-n="3"],
.toggle-pointtable .point.color-02 [data-check="7"] [data-n="4"],
.toggle-pointtable .point.color-02 [data-check="7"] [data-n="5"],
.toggle-pointtable .point.color-02 [data-check="7"] [data-n="6"],
.toggle-pointtable .point.color-02 [data-check="7"] [data-n="7"],
.toggle-pointtable .point.color-02 [data-check="8"] [data-n="1"],
.toggle-pointtable .point.color-02 [data-check="8"] [data-n="2"],
.toggle-pointtable .point.color-02 [data-check="8"] [data-n="3"],
.toggle-pointtable .point.color-02 [data-check="8"] [data-n="4"],
.toggle-pointtable .point.color-02 [data-check="8"] [data-n="5"],
.toggle-pointtable .point.color-02 [data-check="8"] [data-n="6"],
.toggle-pointtable .point.color-02 [data-check="8"] [data-n="7"],
.toggle-pointtable .point.color-02 [data-check="8"] [data-n="8"],
.toggle-pointtable .point.color-02 [data-check="9"] [data-n="1"],
.toggle-pointtable .point.color-02 [data-check="9"] [data-n="2"],
.toggle-pointtable .point.color-02 [data-check="9"] [data-n="3"],
.toggle-pointtable .point.color-02 [data-check="9"] [data-n="4"],
.toggle-pointtable .point.color-02 [data-check="9"] [data-n="5"],
.toggle-pointtable .point.color-02 [data-check="9"] [data-n="6"],
.toggle-pointtable .point.color-02 [data-check="9"] [data-n="7"],
.toggle-pointtable .point.color-02 [data-check="9"] [data-n="8"],
.toggle-pointtable .point.color-02 [data-check="9"] [data-n="9"],
.toggle-pointtable .point.color-02 [data-check="10"] [data-n="1"],
.toggle-pointtable .point.color-02 [data-check="10"] [data-n="2"],
.toggle-pointtable .point.color-02 [data-check="10"] [data-n="3"],
.toggle-pointtable .point.color-02 [data-check="10"] [data-n="4"],
.toggle-pointtable .point.color-02 [data-check="10"] [data-n="5"],
.toggle-pointtable .point.color-02 [data-check="10"] [data-n="6"],
.toggle-pointtable .point.color-02 [data-check="10"] [data-n="7"],
.toggle-pointtable .point.color-02 [data-check="10"] [data-n="8"],
.toggle-pointtable .point.color-02 [data-check="10"] [data-n="9"], 
.toggle-pointtable .point.color-02 [data-check="10"] [data-n="10"] 
{background-color: #A67058;}
.toggle-pointtable .point.color-03 [data-check="1"] [data-n="1"],
.toggle-pointtable .point.color-03 [data-check="2"] [data-n="1"],
.toggle-pointtable .point.color-03 [data-check="2"] [data-n="2"],
.toggle-pointtable .point.color-03 [data-check="3"] [data-n="1"],
.toggle-pointtable .point.color-03 [data-check="3"] [data-n="2"],
.toggle-pointtable .point.color-03 [data-check="3"] [data-n="3"],
.toggle-pointtable .point.color-03 [data-check="4"] [data-n="1"],
.toggle-pointtable .point.color-03 [data-check="4"] [data-n="2"],
.toggle-pointtable .point.color-03 [data-check="4"] [data-n="3"],
.toggle-pointtable .point.color-03 [data-check="4"] [data-n="4"],
.toggle-pointtable .point.color-03 [data-check="5"] [data-n="1"],
.toggle-pointtable .point.color-03 [data-check="5"] [data-n="2"],
.toggle-pointtable .point.color-03 [data-check="5"] [data-n="3"],
.toggle-pointtable .point.color-03 [data-check="5"] [data-n="4"],
.toggle-pointtable .point.color-03 [data-check="5"] [data-n="5"],
.toggle-pointtable .point.color-03 [data-check="6"] [data-n="1"],
.toggle-pointtable .point.color-03 [data-check="6"] [data-n="2"],
.toggle-pointtable .point.color-03 [data-check="6"] [data-n="3"],
.toggle-pointtable .point.color-03 [data-check="6"] [data-n="4"],
.toggle-pointtable .point.color-03 [data-check="6"] [data-n="5"],
.toggle-pointtable .point.color-03 [data-check="6"] [data-n="6"],
.toggle-pointtable .point.color-03 [data-check="7"] [data-n="1"],
.toggle-pointtable .point.color-03 [data-check="7"] [data-n="2"],
.toggle-pointtable .point.color-03 [data-check="7"] [data-n="3"],
.toggle-pointtable .point.color-03 [data-check="7"] [data-n="4"],
.toggle-pointtable .point.color-03 [data-check="7"] [data-n="5"],
.toggle-pointtable .point.color-03 [data-check="7"] [data-n="6"],
.toggle-pointtable .point.color-03 [data-check="7"] [data-n="7"],
.toggle-pointtable .point.color-03 [data-check="8"] [data-n="1"],
.toggle-pointtable .point.color-03 [data-check="8"] [data-n="2"],
.toggle-pointtable .point.color-03 [data-check="8"] [data-n="3"],
.toggle-pointtable .point.color-03 [data-check="8"] [data-n="4"],
.toggle-pointtable .point.color-03 [data-check="8"] [data-n="5"],
.toggle-pointtable .point.color-03 [data-check="8"] [data-n="6"],
.toggle-pointtable .point.color-03 [data-check="8"] [data-n="7"],
.toggle-pointtable .point.color-03 [data-check="8"] [data-n="8"],
.toggle-pointtable .point.color-03 [data-check="9"] [data-n="1"],
.toggle-pointtable .point.color-03 [data-check="9"] [data-n="2"],
.toggle-pointtable .point.color-03 [data-check="9"] [data-n="3"],
.toggle-pointtable .point.color-03 [data-check="9"] [data-n="4"],
.toggle-pointtable .point.color-03 [data-check="9"] [data-n="5"],
.toggle-pointtable .point.color-03 [data-check="9"] [data-n="6"],
.toggle-pointtable .point.color-03 [data-check="9"] [data-n="7"],
.toggle-pointtable .point.color-03 [data-check="9"] [data-n="8"],
.toggle-pointtable .point.color-03 [data-check="9"] [data-n="9"],
.toggle-pointtable .point.color-03 [data-check="10"] [data-n="1"],
.toggle-pointtable .point.color-03 [data-check="10"] [data-n="2"],
.toggle-pointtable .point.color-03 [data-check="10"] [data-n="3"],
.toggle-pointtable .point.color-03 [data-check="10"] [data-n="4"],
.toggle-pointtable .point.color-03 [data-check="10"] [data-n="5"],
.toggle-pointtable .point.color-03 [data-check="10"] [data-n="6"],
.toggle-pointtable .point.color-03 [data-check="10"] [data-n="7"],
.toggle-pointtable .point.color-03 [data-check="10"] [data-n="8"],
.toggle-pointtable .point.color-03 [data-check="10"] [data-n="9"],
.toggle-pointtable .point.color-03 [data-check="10"] [data-n="10"] {background-color: #7e6a8b;}
.toggle-pointtable .point.color-04 [data-check="1"] [data-n="1"],
.toggle-pointtable .point.color-04 [data-check="2"] [data-n="1"],
.toggle-pointtable .point.color-04 [data-check="2"] [data-n="2"],
.toggle-pointtable .point.color-04 [data-check="3"] [data-n="1"],
.toggle-pointtable .point.color-04 [data-check="3"] [data-n="2"],
.toggle-pointtable .point.color-04 [data-check="3"] [data-n="3"],
.toggle-pointtable .point.color-04 [data-check="4"] [data-n="1"],
.toggle-pointtable .point.color-04 [data-check="4"] [data-n="2"],
.toggle-pointtable .point.color-04 [data-check="4"] [data-n="3"],
.toggle-pointtable .point.color-04 [data-check="4"] [data-n="4"],
.toggle-pointtable .point.color-04 [data-check="5"] [data-n="1"],
.toggle-pointtable .point.color-04 [data-check="5"] [data-n="2"],
.toggle-pointtable .point.color-04 [data-check="5"] [data-n="3"],
.toggle-pointtable .point.color-04 [data-check="5"] [data-n="4"],
.toggle-pointtable .point.color-04 [data-check="5"] [data-n="5"],
.toggle-pointtable .point.color-04 [data-check="6"] [data-n="1"],
.toggle-pointtable .point.color-04 [data-check="6"] [data-n="2"],
.toggle-pointtable .point.color-04 [data-check="6"] [data-n="3"],
.toggle-pointtable .point.color-04 [data-check="6"] [data-n="4"],
.toggle-pointtable .point.color-04 [data-check="6"] [data-n="5"],
.toggle-pointtable .point.color-04 [data-check="6"] [data-n="6"],
.toggle-pointtable .point.color-04 [data-check="7"] [data-n="1"],
.toggle-pointtable .point.color-04 [data-check="7"] [data-n="2"],
.toggle-pointtable .point.color-04 [data-check="7"] [data-n="3"],
.toggle-pointtable .point.color-04 [data-check="7"] [data-n="4"],
.toggle-pointtable .point.color-04 [data-check="7"] [data-n="5"],
.toggle-pointtable .point.color-04 [data-check="7"] [data-n="6"],
.toggle-pointtable .point.color-04 [data-check="7"] [data-n="7"],
.toggle-pointtable .point.color-04 [data-check="8"] [data-n="1"],
.toggle-pointtable .point.color-04 [data-check="8"] [data-n="2"],
.toggle-pointtable .point.color-04 [data-check="8"] [data-n="3"],
.toggle-pointtable .point.color-04 [data-check="8"] [data-n="4"],
.toggle-pointtable .point.color-04 [data-check="8"] [data-n="5"],
.toggle-pointtable .point.color-04 [data-check="8"] [data-n="6"],
.toggle-pointtable .point.color-04 [data-check="8"] [data-n="7"],
.toggle-pointtable .point.color-04 [data-check="8"] [data-n="8"],
.toggle-pointtable .point.color-04 [data-check="9"] [data-n="1"],
.toggle-pointtable .point.color-04 [data-check="9"] [data-n="2"],
.toggle-pointtable .point.color-04 [data-check="9"] [data-n="3"],
.toggle-pointtable .point.color-04 [data-check="9"] [data-n="4"],
.toggle-pointtable .point.color-04 [data-check="9"] [data-n="5"],
.toggle-pointtable .point.color-04 [data-check="9"] [data-n="6"],
.toggle-pointtable .point.color-04 [data-check="9"] [data-n="7"],
.toggle-pointtable .point.color-04 [data-check="9"] [data-n="8"],
.toggle-pointtable .point.color-04 [data-check="9"] [data-n="9"],
.toggle-pointtable .point.color-04 [data-check="10"] [data-n="1"],
.toggle-pointtable .point.color-04 [data-check="10"] [data-n="2"],
.toggle-pointtable .point.color-04 [data-check="10"] [data-n="3"],
.toggle-pointtable .point.color-04 [data-check="10"] [data-n="4"],
.toggle-pointtable .point.color-04 [data-check="10"] [data-n="5"],
.toggle-pointtable .point.color-04 [data-check="10"] [data-n="6"],
.toggle-pointtable .point.color-04 [data-check="10"] [data-n="7"],
.toggle-pointtable .point.color-04 [data-check="10"] [data-n="8"],
.toggle-pointtable .point.color-04 [data-check="10"] [data-n="9"],
.toggle-pointtable .point.color-04 [data-check="10"] [data-n="10"]  {background-color: #6C8540;}

.toggle-pointtable [data-check="1"] [data-n="1"]::after,
.toggle-pointtable [data-check="2"] [data-n="1"]::after,
.toggle-pointtable [data-check="2"] [data-n="2"]::after,
.toggle-pointtable [data-check="3"] [data-n="1"]::after,
.toggle-pointtable [data-check="3"] [data-n="2"]::after,
.toggle-pointtable [data-check="3"] [data-n="3"]::after,
.toggle-pointtable [data-check="4"] [data-n="1"]::after,
.toggle-pointtable [data-check="4"] [data-n="2"]::after,
.toggle-pointtable [data-check="4"] [data-n="3"]::after,
.toggle-pointtable [data-check="4"] [data-n="4"]::after,
.toggle-pointtable [data-check="5"] [data-n="1"]::after,
.toggle-pointtable [data-check="5"] [data-n="2"]::after,
.toggle-pointtable [data-check="5"] [data-n="3"]::after,
.toggle-pointtable [data-check="5"] [data-n="4"]::after,
.toggle-pointtable [data-check="5"] [data-n="5"]::after,
.toggle-pointtable [data-check="6"] [data-n="1"]::after,
.toggle-pointtable [data-check="6"] [data-n="2"]::after,
.toggle-pointtable [data-check="6"] [data-n="3"]::after,
.toggle-pointtable [data-check="6"] [data-n="4"]::after,
.toggle-pointtable [data-check="6"] [data-n="5"]::after,
.toggle-pointtable [data-check="6"] [data-n="6"]::after,
.toggle-pointtable [data-check="7"] [data-n="1"]::after,
.toggle-pointtable [data-check="7"] [data-n="2"]::after,
.toggle-pointtable [data-check="7"] [data-n="3"]::after,
.toggle-pointtable [data-check="7"] [data-n="4"]::after,
.toggle-pointtable [data-check="7"] [data-n="5"]::after,
.toggle-pointtable [data-check="7"] [data-n="6"]::after,
.toggle-pointtable [data-check="7"] [data-n="7"]::after,
.toggle-pointtable [data-check="8"] [data-n="1"]::after,
.toggle-pointtable [data-check="8"] [data-n="2"]::after,
.toggle-pointtable [data-check="8"] [data-n="3"]::after,
.toggle-pointtable [data-check="8"] [data-n="4"]::after,
.toggle-pointtable [data-check="8"] [data-n="5"]::after,
.toggle-pointtable [data-check="8"] [data-n="6"]::after,
.toggle-pointtable [data-check="8"] [data-n="7"]::after,
.toggle-pointtable [data-check="8"] [data-n="8"]::after,
.toggle-pointtable [data-check="9"] [data-n="1"]::after,
.toggle-pointtable [data-check="9"] [data-n="2"]::after,
.toggle-pointtable [data-check="9"] [data-n="3"]::after,
.toggle-pointtable [data-check="9"] [data-n="4"]::after,
.toggle-pointtable [data-check="9"] [data-n="5"]::after,
.toggle-pointtable [data-check="9"] [data-n="6"]::after,
.toggle-pointtable [data-check="9"] [data-n="7"]::after,
.toggle-pointtable [data-check="9"] [data-n="8"]::after,
.toggle-pointtable [data-check="9"] [data-n="9"]::after,
.toggle-pointtable [data-check="10"] [data-n="1"]::after,
.toggle-pointtable [data-check="10"] [data-n="2"]::after,
.toggle-pointtable [data-check="10"] [data-n="3"]::after,
.toggle-pointtable [data-check="10"] [data-n="4"]::after,
.toggle-pointtable [data-check="10"] [data-n="5"]::after,
.toggle-pointtable [data-check="10"] [data-n="6"]::after,
.toggle-pointtable [data-check="10"] [data-n="7"]::after,
.toggle-pointtable [data-check="10"] [data-n="8"]::after,
.toggle-pointtable [data-check="10"] [data-n="9"]::after,
.toggle-pointtable [data-check="10"] [data-n="10"]::after {color:#006ee6; font-weight: 700;}
.toggle-pointtable[data-type="num"] td::after{color:#d7d7d7;}
.toggle-pointtable[data-type="num"] td{background: transparent !important;}
.toggle-pointtable[data-type="num"] td::after{content:""; width: 100%; text-align: center; display: block;}
.toggle-pointtable[data-type="num"] td[data-n="1"]::after{content:"10"}
.toggle-pointtable[data-type="num"] td[data-n="2"]::after{content:"20"}
.toggle-pointtable[data-type="num"] td[data-n="3"]::after{content:"30"}
.toggle-pointtable[data-type="num"] td[data-n="4"]::after{content:"40"}
.toggle-pointtable[data-type="num"] td[data-n="5"]::after{content:"50"}
.toggle-pointtable[data-type="num"] td[data-n="6"]::after{content:"60"}
.toggle-pointtable[data-type="num"] td[data-n="7"]::after{content:"70"}
.toggle-pointtable[data-type="num"] td[data-n="8"]::after{content:"80"}
.toggle-pointtable[data-type="num"] td[data-n="9"]::after{content:"90"}
.toggle-pointtable[data-type="num"] td[data-n="10"]::after{content:"100"}

[data-row="4"] .table-box.color-03{border-radius: 0;}
[data-row="4"] .table-box.color-04,
[data-row="4"] .table-box.color-04::before{
    border-radius: 20px;border-top-left-radius: 0; border-top-right-radius: 0;}

[data-row="3"] .table-box.color-02{border-radius: 0;}
[data-row="3"] .table-box.color-03::before,
[data-row="3"] .table-box.color-03{
    border-radius: 20px;
    border-top-left-radius: 0;border-top-right-radius: 0;}
[data-row="3"] .table-box.color-03::before{border-top-left-radius: 0; border-top-right-radius: 0;}

.toggle-pointtable .table-box.color-02{border-radius: 0;}
.toggle-pointtable .table-box.color-02::before,
.toggle-pointtable .table-box.color-03::before{border-radius: 0;}
.toggle-pointtable .table-box.color-01::before,
.toggle-pointtable .table-box.color-01{border-bottom-left-radius: 0; border-bottom-right-radius: 0;}


.toggle-pointtable .table-box.end,
.toggle-pointtable .table-box.end::before{
    border-radius: 20px;border-top-left-radius: 0; border-top-right-radius: 0;}
.toggle-pointtable .table-box tbody th{letter-spacing: -1px; padding: 0;}
.toggle-pointtable .table-box + .table-box {margin-top: -2px;}


/*링크버튼*/
.linkBtn {
    position: absolute;
    display: inline-block;
    height: 39px;
    padding: 0 16px 0 42px;
    color: #fff !important;
    font-size: 20px;
    font-family: YGJAL;
    line-height: 39px;
    border-radius: 30px;
    background: #2da708 url(../../contents/images/icon/icon_blank.png) 13px center/20px auto no-repeat;
    background-size: 17px;
    box-sizing: border-box;
    z-index: 1;
}
.linkBtn:hover {background-color: #248309}
.linkBtn span { cursor: pointer; }

/*미리보기버튼*/
.previewBtn {
    position: absolute;
    display: inline-block;
    height: 39px;
    padding: 0 16px 0 42px;
    color: #fff !important;
    font-size: 20px;
    font-family: YGJAL;
    line-height: 39px;
    border-radius: 30px;
    background: #bf4d00 url(../../contents/images/icon/icon_preview_w.png) 13px center/20px auto no-repeat;
    background-size: 24px;
    background-position-x: 10px;
    box-sizing: border-box;
    z-index: 1;
}
.previewBtn:hover {background-color: #7e3000;}
.previewBtn span { cursor: pointer; }

.ton[data-iframe="true"] .popup_contents,
[data-iframe="true"] .popup_contents {padding: 0 0 !important;}
.ton[data-iframe="true"] iframe,
[data-iframe="true"] iframe{width: 1365px !important;height: 768px !important;}
.page-iframe[data-iframe="true"] iframe {width: 1365px !important;height: 687px !important;}
.card-s{
    position: relative;
    width:56px;
    height: 70px;
    background: url(../../contents/images/common/card-bg-0.png) no-repeat 50% 0 / 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-s[data-n="0"]{background-image: url(../../contents/images/common/card-bg-0.png);}
.card-s[data-n="1"]{background-image: url(../../contents/images/common/card-bg-1.png);}
.card-s[data-n="2"]{background-image: url(../../contents/images/common/card-bg-2.png);}
.card-s[data-n="3"]{background-image: url(../../contents/images/common/card-bg-3.png);}
.card-s[data-n="4"]{background-image: url(../../contents/images/common/card-bg-4.png);}
.card-s[data-n="5"]{background-image: url(../../contents/images/common/card-bg-5.png);}
.card-s[data-n="6"]{background-image: url(../../contents/images/common/card-bg-6.png);}
.card-s[data-n="7"]{background-image: url(../../contents/images/common/card-bg-7.png);}
.card-s[data-n="8"]{background-image: url(../../contents/images/common/card-bg-8.png);}
.card-s[data-n="9"]{background-image: url(../../contents/images/common/card-bg-9.png);}

.squareBox {width:280px;display: flex;justify-content: center;align-items: center;gap:50px 0;flex-wrap: wrap;position: relative;}
.squareBox .lineBox{position: relative;top:0;left:0;width: 100px;height: 100px;padding: 0;display: flex;justify-content: center;align-items: center;}
.squareBox .toggle{width: 100%; height: 100%; background-color: transparent;}
.squareBox .answer{width: 100%;justify-content: center; white-space: nowrap;}
.squareBox .group_s{width: 100%; display: flex;justify-content:space-between;}
.squareBox.to2 .line-arrow{width: 70px;transform-origin: 0 0;top: 97px;left: 144px;}
.squareBox.to2 .line-arrow.a1{transform: rotate(45deg);  left: 54px;}
.squareBox.to2 .line-arrow.a2{transform: rotate(135deg);width: 75px;left: 234px;}
.squareBox.to1 .line-arrow{width: 70px;transform-origin: 0 0;top: 97px;left: 144px; }
.squareBox.to1 .line-arrow.a1{transform: rotate(45deg); width: 67px; }
.squareBox.to1 .line-arrow.a2{transform: rotate(135deg); }

.squareBox .lineBox.green{border-color: #cbe28c;}
.squareBox .colorBox.green{background: linear-gradient(#e8f1ce 50%, #d9e8ae 50% 70%,#e8f1ce 100%); border-color: #cbe28c;}
.squareBox .colorBox.sky{background: linear-gradient(#f2fbfc 50%, #d2ecef 50% 70%,#f2fbfc 100%);}
.squareBox .pink ~ .line-arrow{border-color: #ffc4c9;}
.squareBox .pink ~ .line-arrow::after{border-left-color: #ffc4c9;}
.squareBox .green ~ .line-arrow{border-color: #cbe28c;}
.squareBox .green ~ .line-arrow::after{border-left-color: #cbe28c;}
.squareBox .sky ~ .line-arrow{border-color: #a8d6f6;}
.squareBox .sky ~ .line-arrow::after{border-left-color: #a8d6f6;}
.squareBox.small {width: 200px; gap: 30px 0;}
.squareBox.small .lineBox{width: 80px; height: 80px;}
.squareBox.small.to2 .line-arrow {top:77px; width: 40px;}
.squareBox.small.to2 .line-arrow.a2{left: 154px;width: 40px;top: 80px;}
.squareBox.small.to1 .line-arrow.a1 {top:77px; width: 38px;left: 110px;}
.squareBox.small.to1 .line-arrow.a2{left: 94px;width: 40px;top: 80px;}

.squareBox.free{width: auto; gap:100px 0}
.squareBox.free .lineBox{width: auto; height: auto; display: flex; flex-direction: column; padding: 10px; justify-content: center; align-items: flex-start;}
.squareBox.free.to1 .line-arrow{top:100%;transform-origin:0 0}
.squareBox.free .sky .line-arrow{border-top-color:#a8d6f6 }
.squareBox.free .sky .line-arrow::after{border-left-color:#a8d6f6}
.squareBox.free.to1 .line-arrow{width: 140px;}
.squareBox.free.to1 .line-arrow.a1{width: 136px;}
.squareBox.free.to1 .line-arrow {left:50%; margin-top: 2px;}
.squareBox.free .group_s {width: 100%;display: flex;justify-content: center;gap: 20px;}
.squareBox.free .green .line-arrow{border-top-color:#cbe28c }
.squareBox.free .green .line-arrow::after{border-left-color:#cbe28c}
.squareBox.free .lineBox.center{align-items: center;}

linearrow{
    display: block; width: 40px; height: 40px; position: relative;
    &::after{
        content: "";
        display: block;
        position: absolute;
        border-color: #000;
        width: 0;
        height: 0;
        border-bottom: 10px solid transparent;
        border-top: 10px solid transparent;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        bottom: auto;
        top: -12px;
        left: calc(100% - 8px);
        transform: rotate(0deg);
        right: auto;
        transform-origin: 0 0;
    }
}

linearrow[data-line="l-t-h"]{
    border-bottom:4px solid #000;
    border-left:4px solid #000;
    &::after{
        left: -11px;
        top: -14px;
        border-bottom: 10px solid #000;
    }
}
linearrow[data-color="red"] {
    border-color: red;
    &::after{ border-bottom-color: red;}
}


[data-complex] {
    [data-quiz="toggle"] {
        position: relative;
        z-index: 2;
    }
    [data-quiz="dragLine"] {
        position: relative;
        z-index: 0;
    }
    [data-answer-btn] {
        opacity: 0;
        pointer-events: none;
    }
    [data-complex-btn] {
        z-index: 2;
    }
    [data-quiz].complete + [data-quiz].complete + [data-complex-btn] {
        color: #fff;
        background-color: #9d00c4;
        &::before{
            padding-left: 8px;
            content: "정답 가리기";
        }
    }
}
[data-complete="true"] {
    [data-complex-btn] {
        color: #fff;
        background-color: #9d00c4;
        &::before{
            padding-left: 8px;
            content: "정답 가리기";
        }
    }
}

.js-dragObj {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    transform-origin: 50% 100%;
}
.js-dragObj:active::after,
.js-dragObj:hover::after{content: ""; position: absolute; width: 100%; height: 100%;  pointer-events: none; z-index: 2; opacity: 0.5; border-radius: 4px;}
.js-dragObj img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: visible;
    pointer-events: none;
}
.js-dragObj:active .btn-rotate,
.js-dragObj:hover .btn-rotate{
    opacity: 1;
    pointer-events: initial;
}
.btn-rotate{
    opacity: 1;
    pointer-events: initial;
    position: absolute;
    z-index: 1;
    /* transform: translate(15px, 15px); */
    transform-origin: 50% 50%;
    bottom:0;
    right: -30px;
    width: 30px;
    height: 30px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border:2px solid #ff5404;
    background-color: #fd631b;
    background-position: 50% 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ffffff'%3E%3Cpath d='M522-80v-82q34-5 66.5-18t61.5-34l56 58q-42 32-88 51.5T522-80Zm-80 0Q304-98 213-199.5T122-438q0-75 28.5-140.5t77-114q48.5-48.5 114-77T482-798h6l-62-62 56-58 160 160-160 160-56-56 64-64h-8q-117 0-198.5 81.5T202-438q0 104 68 182.5T442-162v82Zm322-134-58-56q21-29 34-61.5t18-66.5h82q-5 50-24.5 96T764-214Zm76-264h-82q-5-34-18-66.5T706-606l58-56q32 39 51 86t25 98Z'/%3E%3C/svg%3E");
}


/*돋보기버튼*/
h2 .dodbogi,
.title .dodbogi{position: relative; display: inline-block; vertical-align: middle; transform: translate(0,-4px);}
.dodbogi {
	position: absolute;
	width: auto;
    height: 39px;
    padding: 0 16px 0 42px;
	line-height: 39px;
	font-family: YGJAL;
	font-size: 20px;
	white-space: nowrap;
	color: #fff;
	text-align: center;
	background-image: url('../../contents/images/icon_dodbogi.png');
	background-repeat: no-repeat;
	background-size: 18px;
	background-position: 12px 10px;
	background-color: #ffbc47;
	border-radius: 18px;
}
.dodbogi:hover {
	background-color: #ff8c40;
}
.docDownBtn {
    position: absolute;
    display: inline-block;
    height: 39px;
    padding: 0 16px 0 42px;
    color: #fff !important;
    font-size: 20px;
    font-family: YGJAL;
    line-height: 39px;
    border-radius: 30px;
    background: #ff6600 url(../../contents/images/icon/icon_down.svg) 13px center/20px auto no-repeat;
    box-sizing: border-box;
    z-index: 1
}

.docDownBtn.hover {
    background-color: #ff8800
}
/*링크버튼*/
.linkBtn {
    position: absolute;
    display: inline-block;
    height: 39px;
    padding: 0 16px 0 42px;
    color: #fff !important;
    font-size: 20px;
    font-family: YGJAL;
    line-height: 39px;
    border-radius: 30px;
    background: #2da708 url(../../contents/images/icon/icon_blank.png) 13px center/20px auto no-repeat;
    background-size: 17px;
    box-sizing: border-box;
    z-index: 1;
}
.linkBtn:hover {background-color: #248309}
.linkBtn span { cursor: pointer; }

/*미리보기버튼*/
.previewBtn {
    position: absolute;
    display: inline-block;
    height: 39px;
    padding: 0 16px 0 42px;
    color: #fff !important;
    font-size: 20px;
    font-family: YGJAL;
    line-height: 39px;
    border-radius: 30px;
    background: #bf4d00 url(../../contents/images/icon/icon_preview_w.png) 13px center/20px auto no-repeat;
    background-size: 24px;
    background-position-x: 10px;
    box-sizing: border-box;
    z-index: 1;
}
.previewBtn:hover {background-color: #7e3000;}
.previewBtn span { cursor: pointer; }

.equal_txt{
    display: inline-block;
    position: relative;
    width:40px;height: 40px;
}
.toggle.circle .equal_txt:after {
    width: 100%;
    height: 40px;
    transform: translate(0, 0);
}
.equal_txt:after {
    content: "";
    display: block;
    position: absolute;
    width: 45px;
    height: 45px;
    transform: translateY(1px);
}
.equal_txt[data-shape="circle"]{
    min-width: 64px;
    min-height: 64px;
    border:4px solid #006ee6;
}
.equal_txt[data-shape="circle"]:after {
    border:4px solid #006ee6;
    border-radius: 50%;
    background-size: 80% !important;
}
.equal_txt[data-txt="<"]:after {
    background: url(../images/math/inequalIcon.png) no-repeat 50% 50% / contain;
}
.equal_txt[data-txt=">"]:after {
    background: url(../images/math/inequalIcon_2.png) no-repeat 50% 50% / contain;
}

.equal_txt[data-txt=">"][data-color="red"]:after {
    background: url(../images/math/inequalIcon_2_red.png) no-repeat 50% 50% / contain;
}
.equal_txt[data-txt="<"][data-color="red"]:after {
    background: url(../images/math/inequalIcon_red.png) no-repeat 50% 50% / contain;
}
.equal_txt[data-txt=">"][data-color="red2"]:after {
    background: url(../images/math/inequalIcon_2_red2.png) no-repeat 50% 50% / contain;
}
.equal_txt[data-txt="<"][data-color="red2"]:after {
    background: url(../images/math/inequalIcon_red2.png) no-repeat 50% 50% / contain;
}
.equal_txt[data-txt=">"][data-color="blue"]:after {
    background: url(../images/math/inequalIcon_2_blue.png) no-repeat 50% 50% / contain;
}
.equal_txt[data-txt="<"][data-color="blue"]:after {
    background: url(../images/math/inequalIcon_blue.png) no-repeat 50% 50% / contain;
}
.equal_txt[data-txt=">"][data-color="white"]:after {
    background: url(../images/math/inequalIcon_2_w.png) no-repeat 50% 50% / contain;
}
.equal_txt[data-txt="<"][data-color="white"]:after {
    background: url(../images/math/inequalIcon_w.png) no-repeat 50% 50% / contain;
}

.equal_txt[data-txt="<="]:after {
    background: url(../images/math/inequalIcon_3.png) no-repeat 50% 50% / contain;
}
.equal_txt[data-txt=">="]:after {
    background: url(../images/math/inequalIcon_4.png) no-repeat 50% 50% / contain;
}
.equal_txt[data-txt="<-"]:after {
    background: url(../images/math/inequalIcon_5.png) no-repeat 50% 50% / contain;
}
.equal_txt[data-txt=">-"]:after {
    background: url(../images/math/inequalIcon_6.png) no-repeat 50% 50% / contain;
}

.equal_txt[data-txt="<="][data-color="blue"]:after {
    background: url(../images/math/inequalIcon_3_blue.png) no-repeat 50% 50% / contain;
}
.equal_txt[data-txt=">="][data-color="blue"]:after {
    background: url(../images/math/inequalIcon_4_blue.png) no-repeat 50% 50% / contain;
}
.equal_txt[data-txt="<-"][data-color="blue"]:after {
    background: url(../images/math/inequalIcon_5_blue.png) no-repeat 50% 50% / contain;
}
.equal_txt[data-txt=">-"][data-color="blue"]:after {
    background: url(../images/math/inequalIcon_6_blue.png) no-repeat 50% 50% / contain;
}

.equal_txt[data-txt="="]:after {
    background: url(../images/math/equalIcon.png) no-repeat 50% 50% / contain;
}
.equal_txt[data-txt="="][data-color="blue"]:after {
    background: url(../images/math/equalIcon_blue.png) no-repeat 50% 50% / contain;
}
.equal_txt[data-txt="="][data-color="red"]:after {
    background: url(../images/math/equalIcon_red.png) no-repeat 50% 50% / contain;
}
.equal_txt[data-txt="="][data-color="white"]:after {
    background: url(../images/math/equalIcon_w.png) no-repeat 50% 50% / contain;
}
.popup_container .equal_txt:after {
    content: "";
    display: block;
    position: absolute;
    width:35px;
    height: 35px;
    transform: translate(2px, 7px);
}

/*함께 듣기*/
.listenBtn {
    width: 180px;
    height: 50px;
    z-index: 1;
    display: inline-block;
}
.listenBtn.l {
    background: url("../images/button/button_audio_together.png") no-repeat;
    background-size: contain;
    width: 548px;
    height: 150px;
}
.listenBtn.l:hover {background: url("../images/button/button_audio_together_over.png") no-repeat;}
.listenBtn.m {
    background: url("../images/button/button_audio_together_m.png") no-repeat;
    background-size: contain;
    width: 358px;
    height: 100px;
}
.listenBtn.m:hover {background: url("../images/button/button_audio_together_m_over.png") no-repeat;}
.listenBtn.s {
    background: url("../images/button/button_audio_together_s.png") no-repeat;
    background-size: contain;
    width: 180px;
    height: 50px;
}
.listenBtn.s:hover {background: url("../images/button/button_audio_together_s_over.png") no-repeat;}
.listenBtn.bottom {position: absolute; left: 0px; bottom: 20px;}


/*나레이션*/
.main.song > .header, .main.narration > .header {
    position: relative;
    width: 930px;
    height: 105px;
    margin: 0 auto;
    border-radius: 0 0 70px 70px;
    background-color: #FE6600;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
}
.main.song > .header .title, .main.narration > .header .title {
    font-family: YGJAL;
    font-size: 55px;
    color: #fff;
    text-align: center;
    padding: 0;
}
.main.song > .content, .main.narration > .content {
    position: relative;
    top: -38px;
    width: 1300px;
    height: calc(100% - 67px);
    margin: 0 auto;
    padding: 0;
    border-radius: 40px 40px 0 0;
    background-color: #fff;
}
.narration .text-box .text:not(:last-child), .song .text-box .text:not(:last-child) {
    margin-bottom: 30px;
}
.narration .text-box .text.on { font-family: NotoB; color: #FE6600; }
.narration .text-box .group, .song .text-box .group {
    position: absolute;
    left: 0;
    top: 40px;
    height: 490px;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
}
.narration .text-box .group:first-child, .song .text-box .group:first-child {
    display: flex;
}

.narration .text-box .group .imgWrap {flex: 1;}
.narration.img .text-box .group .imgWrap {flex: none; height: 460px;}
.narration .text-box .group .imgWrap img {width: 100%;}
.narration.img .text-box .group .imgWrap img {height: 100%; border-radius: 16px;}
.narration .text-box, .song .text-box {
    /*position: absolute;*/
    /*left: 0;*/
    /*top: 40px;*/
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 50px;
    /* border: 1px solid red; */
}
.scene-button-box {
    position: absolute;
    left: 0;
    bottom: 50px;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.scene-button-box .button {
    /*width: 80px;*/
    height: 34px;
    margin: 0 5px;
    background-color: #D5C3AB;
    border-radius: 80px;
    font-family: YGJAL;
    font-size: 20px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 0 15px;
}
.scene-button-box .button:hover, .scene-button-box .button.on {
    background-color: #AE7C65;
}


.tbl-base[data-color="green"] th,
.tbl-base[data-color="green"] td {
    border:4px solid #d7dea3;
    padding: 10px;
    text-align: center;
}
.tbl-base[data-color="green"] th{
    background-color: #f8f8ed;
}

.tbl-base[data-color="purple"] th,
.tbl-base[data-color="purple"] td {
    border:4px solid #cabee0;
    padding: 10px;
    text-align: center;
}
.tbl-base[data-color="purple"] th{
    background-color: #efe8f1;
}

.tbl-base[data-color="orange"] th,
.tbl-base[data-color="orange"] td {
    border:4px solid #ffd89e;
    padding: 10px;
    text-align: center;
}
.tbl-base[data-color="orange"] th{
    background-color: #fef0db;
}

.basicSlider_slides > li{pointer-events: none;}
.basicSlider_slides > li.on{pointer-events:visible;}

.js-dragObj .btn-rotate{opacity: 0 !important;}
.js-dragObj.dragObjComplete .btn-rotate:active,
.js-dragObj.dragObjComplete .btn-rotate:focus,
.js-dragObj.dragObjComplete .btn-rotate:hover,
.js-dragObj.dragObjComplete:hover .btn-rotate{opacity: 1 !important;}
.js-dropDap img{ width: 100%;}
.js-dropDap {position: absolute;top: 30px;left: 280px;width: 340px;}
.js-dropDap .exam{position: absolute; top:0; left:0;}
.js-dropArea.complete .dragObjComplete{display: none;}



[data-drag-limit="1"] .js-dragObj ~ .js-dragObj{display: none !important;}
[data-drag-limit="2"] .js-dragObj + .js-dragObj ~ .js-dragObj{display: none !important;}

.img-a{pointer-events:none}