/* @charset "utf-8";

@import url(../../../common/css/reset.css);
@import url(../../../common/fonts/fonts.css);
@import url(../../../common/css/animate.css);
@import url(../../../common/css/scrollBar.css);
@import url(../../../common/css/jquery.mCustomScrollbar.css); */

/* 기본, 과목 공통 기능, 과목 개별 기능, 기타 */

/* =========================================================================================
 * 기본
 * ====================================================================================== */
/* ---------------------------------------
 * *
 * --------------------------------------- */
* {
    box-sizing: border-box;
    font-family: "KoPubDotum";
    /* color: #000; */
    image-rendering: -webkit-optimize-contrast;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* -webkit-transform: translateZ(0) scale(1, 1) translate3d(0,0,0);
    transform: translateZ(0) scale(1, 1) translate3d(0,0,0); */
    -webkit-tap-highlight-color: transparent;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
}

*:focus {
    outline: none;
}



:root {

    --line1-vdo-width: 1223px;
    --line1-vdo-height: 752px;
    --line1-vdo-top: 211px;


    --vdo-width: 1113px;
    --vdo-height: 692px;
    --vdo-top: 300px;

    --color-blue: #d9eef9;
    --color-gray: #eaeaea;


    --small-click: scale(0.7) !important;
}

/* i */
i {
    font-style: normal;
    text-align: center;
    font-size: 40px;
}

i.off {
    display: none;
}

/* ---------------------------------------
 * screen
 * --------------------------------------- */
html {
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
    overflow: auto;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    /* background: rgba(0, 0, 0, 0); */
    overflow: hidden !important;
    background: #fff;
}

/* container */
#container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position: center;
    position: relative;
    background-size: 100%;
    visibility: hidden;
    background: none;
    /* background: url('../images/bg2.png') no-repeat; */
}

#container.intro {
    /* background: url('../images/bg1.png') no-repeat; */
    background-position: center;
}

/* wrap */
#wrap {
    width: 1920px;
    height: 1020px;
    position: absolute;
    background-position: center;
    /* visibility: hidden; */
    top: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* background-color: rgba(0, 0, 0, 1) !important; */
    /* overflow: visible; */
    /* overflow: hidden; */

    /* 최초에 감춤 */
    visibility: hidden;
    overflow: visible;
}

#wrap.intro {
    /* background: url('../images/bg1.png') no-repeat; */
    background-position: center;
}

#wrap [overflow-type="visible"] {
    /* overflow: visible !important; */
}

/* ---------------------------------------
 * contents
 * --------------------------------------- */
.contentsWrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.contents {
    display: none;
    width: 100%;
    height: 100%;
    overflow: visible;
    /* overflow: hidden; */
}

/* optionPage */
.contents.clickPage {
    width: 100%;
    height: 100%;
    position: relative;
}

/* ---------------------------------------
 * setContent(상단 contents 전환 버튼)
 * --------------------------------------- */
.setContent {
    position: absolute;
    top: 27px;
    right: 50px;
}

.setContent li {
    float: left;
    position: relative;
    width: 80px;
    height: 80px;
    cursor: pointer;
    margin-right: 8px;
}

.setContent li.on {
    pointer-events: none;
}

.setContent li:last-child {
    margin-right: 0px;
}

.setContent::after {
    content: '';
    display: block;
    clear: both;
}

/* ---------------------------------------
 * btns
 * --------------------------------------- */
button {
    backface-visibility: hidden;
    overflow: visible;
    cursor: pointer;
    outline: none;
    outline: 0;
    background: 0 0;
    border: none;
}

/* ansbtn */
/* 확인하기 */
.ansbtn {
    background: url('../images/clickitem/ansbtn.png') 0 0 no-repeat;
    width: 258px;
    height: 78px;
    position: absolute;
    top: 925px;
    left: 1641px;
    cursor: pointer;
}

.ansbtn2 {
    background: url('../images/clickitem/ansbtn2.png') 0 0 no-repeat;
    width: 244px;
    height: 74px;
    position: absolute;
    top: 913px;
    left: 1630px;
    cursor: pointer;
}

/* 다시하기 */
.ansbtn.re {
    background: url('../images/clickitem/rebtn.png') 0 0 no-repeat;
}

.popup .ansbtn {
    top: 884px;
    left: 1587px;
}

/* 예시보기 */
.exbtn {
    background: url('../images/clickitem/btn_openEx.png') 0 0 no-repeat;
    width: 176px;
    height: 63px;
    position: absolute;
    top: 924px;
    left: 1433px;
    cursor: pointer;
}

.exWrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    z-index: 99999;
}

.exWrap .close {
    width: 55px;
    height: 58px;
    position: absolute;
    top: 43px;
    right: 56px;
    cursor: pointer;
}

/* =========================================================================================
 * 과목 공통 기능
 * ====================================================================================== */
/* ---------------------------------------
 * pageingContents
 * --------------------------------------- */
/* pageWrap, pages, page */
.pageWrap,
.pageWrap .pages,
.pageWrap .page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* overflow: hidden; */
}

.pageWrap {
    overflow: hidden;
}

/* page */
.pageWrap .page {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

.pageWrap .page:nth-child(1) {
    display: block;
}

/* pages transition move */
.pageWrap.moving .pages {
    overflow: visible;
}

.pageWrap.moving .page {
    display: block !important;
}

.pageWrap.moving.x {
    width: 1920px;
}

.pageWrap.moving.x .pages {
    transition: left 0.2s ease-in-out;
}

.pageWrap.moving.y .pages {
    transition: top 0.2s ease-in-out;
}

/* .pageWrap.moving.direct .pages {
    transition-duration: 0s;
} */

/* navigation */
.pageWrap .navigation {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.pageWrap .prev {
    /* background: url('../images/naviitem/btn.png') no-repeat; */
    background: none;
    /* transform: rotate(180deg); */
    width: 56px;
    height: 140px;
    position: absolute;
    top: 436px;
    left: 0px;
    cursor: pointer;
    /* 클릭영역 확대 */
    /* transform: scaleX(1.2) scaleY(1.5);
    transform-origin: left; */
}

.pageWrap .next {
    /* background: url('../images/naviitem/btn.png') no-repeat; */
    background: none;
    /* transform: rotate(0deg); */
    width: 56px;
    height: 140px;
    position: absolute;
    top: 436px;
    right: 0px;
    cursor: pointer;
    /* 클릭영역 확대 */
    /* transform: scaleX(1.2) scaleY(1.5);
    transform-origin: right; */
}

.pageWrap .prev.dis {
    /* background: url('../images/naviitem/btn_dis.png') no-repeat;
    transform: rotate(0deg);
    cursor: auto; */
}

.pageWrap .next.dis {
    /* background: url('../images/naviitem/btn_dis.png') no-repeat;
    transform: rotate(180deg);
    cursor: auto; */
}

.pageWrap .next.dis,
.pageWrap .prev.dis {
    display: none;
    background: none;
    /* pointer-events: none; */
}

/* pageing */
.pageWrap .pageing {
    /* background: #5fcbd6 url('../images/naviitem/navi.png') center no-repeat; */
    height: 42px;
    position: absolute;
    top: 971px;
    left: 50%;
    transform: translateX(-50%);
    cursor: auto;
    border-radius: 21px;
    opacity: 0;
}

.pageWrap .pageing:before {
    /* content: '';
    display: block;
    background: url('../images/naviitem/navi.png') left no-repeat;
    position: absolute;
    width: 35px;
    height: 55px;
    left: -34px; */
}

.pageWrap .pageing:after {
    /* content: '';
    display: block;
    background: url('../images/naviitem/navi.png') right no-repeat;
    position: absolute;
    width: 35px;
    height: 55px;
    right: -34px; */
}

.pageWrap .pageing:before,
.pageWrap .pageing:after {
    display: none;
}

.pageWrap .pageing .dot {
    width: 32px;
    height: 36px;
    border-radius: 10px;
    /* background: #fff; */
    /* margin: 15px 16px; */
    float: left;
    margin-left: 0;
    cursor: pointer;
}

.pageWrap .pageing .dot.on {
    background: #fbb03b;
    cursor: auto;
}

.pageWrap .pageing .dot:first-child {
    margin-left: 25px;
    margin-right: 14px;
}

.pageWrap .pageing .dot:last-child {
    margin-right: 29px;
}

.pageWrap .pageing .dot .text {
    display: none;
}

.pageWrap .prev,
.pageWrap .next,
.pageWrap .pageing,
.pageWrap .pageing .dot,
.pageWrap .pageing .dot.on {
    /* background: none; */
}

/* popup 내부 */
.popup.pageWrap .prev,
.popup .pageWrap .prev {
    height: 100px;
    left: 66px;
    top: 492px;
}

.popup.pageWrap .next,
.popup .pageWrap .next {
    height: 100px;
    right: 65px;
    top: 492px;
}

.popup.pageWrap .pageing,
.popup .pageWrap .pageing {
    top: 923px;
}



/* btnTab */
.btnTabWrap {
    position: absolute;
    top: 177px;
    right: 130px;
}

.btnTabWrap .btnTab {
    float: left;
    position: relative;
    width: 80px;
    height: 80px;
    cursor: pointer;
    margin-right: 8px;
}

.btnTabWrap .btnTab.on {
    pointer-events: none;
}

.btnTabWrap .btnTab:last-child {
    margin-right: 0px;
}

.btnTabWrap .btnTab .text {
    display: none;
}

.btnTabWrap::after {
    content: '';
    display: block;
    clear: both;
}

/* ---------------------------------------
 * pop & popup
 * --------------------------------------- */
/* btns */
.btnPop,
.btnPopup {
    width: 64px;
    height: 64px;
    position: absolute;
    cursor: pointer;
    /* z-index: 10; */
}

.btnPop.dis,
.btnPopup.dis {
    display: none !important;
}

.btnPop.on,
.btnPopup.on {}

/* pop */
.pop {
    width: 200px;
    height: 200px;
    position: absolute;
    display: none;
    z-index: 11;
}

.popup {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 12;
}

/*  */
.pop .close {
    position: absolute;
    top: 15px;
    right: 19px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    border-radius: 50%;
}

.popup .close {
    position: absolute;
    top: 36px;
    right: 134px;
    width: 70px;
    height: 70px;
    cursor: pointer;
    border-radius: 50%;
}

/* dragPop */
.pop[data-type="dragPop"] {
    cursor: pointer;
}

.pop[data-type="dragPop"] .close {
    top: 67px;
    right: 36px;
    width: 70px;
    height: 70px;
}

/* ---------------------------------------
 * clickContent
 * --------------------------------------- */
.clickContent {}

.clickContent .clickItemWrap {
    position: absolute;
    top: 0px;
    left: 0px;
}

/* clickItem */
.clickContent .clickItem {
    width: 200px;
    height: 200px;
    cursor: pointer;
    border-radius: 20px;
    background-color: #fff;
    position: absolute;
    opacity: 1;
}

.clickContent .clickItem.on {
    opacity: 0;
}

.clickContent .clickItem:before {
    display: block;
    content: '';
    width: 116px;
    height: 122px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-49%, -47%);
    background: url('../images/clickitem/clickitem.png') center center no-repeat;
}

/* sequence */
.clickContent.sequence .clickItem.on {
    pointer-events: none;
}

.clickContent.sequence .clickItem:not(.act) {
    pointer-events: none;
}

.clickContent.sequence .clickItem:not(.act):before {
    content: none;
}

.clickContent.sequence .clickGuide:not(.act) {
    display: none;
    pointer-events: none;
}

/* guide */
.clickGuide {
    background: url('../images/clickitem/clickitem.png') 0 0 no-repeat;
    left: 0px;
    top: 0px;
    position: absolute;
    width: 73px;
    height: 76px;
    /* border-radius: 18px; */
    /* background-color: #e6e6e4; */
    pointer-events: none;
}


/* checkbox */
.clickContent.checkbox .clickItem {
    background: url('../images/clickitem/check_off.png') 0 0 no-repeat;
    width: 50px;
    height: 51px;
    opacity: 1 !important;
    border-radius: 10px;
    background-color: transparent;
}

.clickContent.checkbox .clickItem.on {
    background: url('../images/clickitem/check.png') 0 0 no-repeat;
}

.clickContent.checkbox .clickItem:after {
    content: '';
    position: absolute;
    display: none;
    left: 80px;
    top: 50%;
    transform: translateY(-50%);
}

.clickContent.checkbox .clickItem:before {
    content: '';
    position: absolute;
    display: block;
    background: none;
    width: auto;
    height: 90px;
    left: 66px;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
}

/* OX */
/* .clickContent.ox .clickItem {
    opacity: 1 !important;
    width: 312px;
    height: 322px;
    position: absolute;
}

.clickContent.ox .clickItem::before {
    content: none !important;
}

.clickContent.ox .clickItem:nth */

/* cho */
/* .clickContent.cho .clickItem {
    opacity: 1 !important;
}

.clickContent.cho .clickItem.on::before,
.clickContent.cho .clickItem.cho::before {
    content: none;
}

.clickContent.cho .clickItem.on::before,
.clickContent.cho .clickItem.cho::before {
    content: none;
}

.clickContent.cho .chobtn {
    width: 258px;
    height: 78px;
    background: url('../images/clickitem/choBtn.png') 0 0 no-repeat;
    position: absolute;
    left: 1369px;
    top: 924px;
    cursor: pointer;
}

.clickContent.cho .chobtn.off {
    background: url('../images/clickitem/choBtn_off.png') 0 0 no-repeat;
} */

/* ansbtn */
/* .clickContent .ansbtn {}

.clickContent.checkbox .ansbtn {
    display: none;
}

.popup .clickContent .ansbtn {
    top: 914px;
    left: 1657px;
} */

/* ---------------------------------------
 * 줌
 * --------------------------------------- */
/* zoomWrap */
.zoomWrap {
    width: 1596px;
    height: 949px;
    position: absolute;
    top: 49px;
    left: 173px;
}

/* zoombtn */
.zoomWrap .zoombtn {
    width: 91px;
    height: 301px;
    position: absolute;
    top: 39px;
    left: -105px;
    z-index: 9999;
    background: transparent;
}

.zoomWrap .zoombtn div {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 77px;
    left: 0px;
}

.zoomWrap .zoombtn .btn.plus {
    top: 0px;
    cursor: pointer;
}

.zoomWrap .zoombtn .btn.minus {
    top: 156px;
    cursor: pointer;
}

.zoomWrap .zoombtn .text {
    top: 97px;
    left: 14px;
    width: 58px;
    height: 40px;
    border-radius: 6px;
    line-height: 42px;
    font-size: 18px;
    color: #000;
    user-select: none;
}

/* zoombox */
.zoomWrap .zoombox {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.zoomWrap .zoombox .zoomImg {
    width: 100%;
    height: 100%;
    transform: scale(1.0) translate(0px, 0px);
    transition: transform 0.2s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    user-select: none;
}

/* ---------------------------------------
 * 오디오
 * --------------------------------------- */
audio {
    display: none;
}

/* ---------------------------------------
 * 비디오
 * --------------------------------------- */
* {
    -webkit-tap-highlight-color: transparent;
}

button {
    border: 0;
}

.videoFrame * {
    font-weight: normal;
    text-align: left;
    font-size: 0;
    line-height: 1;
}

.videoFrame {
    position: absolute;
    z-index: 3;
    width: 1164px;
    height: 722px;
    display: block;
    top: 159px;
    left: 50%;
    transform: translateX(-50%);
}

.videoFrame .vdo-wrap video {
    width: 100%;
    position: absolute;
}

.videoFrame .vdo-wrap .play {
    /*    background: url(images/video/playbtn_big.png) 0 0 no-repeat;*/
    background: url(../images/video/playbtn_big.png) 0 0 no-repeat;
    /*
    width: 164px;
    height: 164px;
*/
    width: 140px;
    height: 140px;
    position: absolute;
    /*
    top: calc(50% - 122px);
    left: calc(50% - 82px);
*/
    top: calc(50% - 102px);
    left: calc(50% - 72px);
    cursor: pointer;
    z-index: 2;
}

.videoFrame .vdo-wrap .videoend {
    /*background:url(../images/video/videoend.png) 0 0 no-repeat;
    width:193px;
    height:155px;
    position:absolute;
    bottom:130px;
    right: 40px;
    cursor:pointer;*/
}


.videoFrame .control-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 67px;
    z-index: 1;
    background: #707578;
}

.videoFrame .control-wrap>* {
    position: absolute;
}

.videoFrame .control-wrap .p-con {
    top: 3px;
    left: 19px;
}

.videoFrame .control-wrap .p-con button {
    position: relative;
    top: 0;
    left: 0;
    width: 62px;
    height: 62px;
    ;
    cursor: pointer;
}

.videoFrame .control-wrap .p-con .play {
    background: url(../images/video/play_btn.png) 0 0 no-repeat;
    background-size: 100%;
}

.videoFrame .control-wrap .p-con .pause {
    background: url(../images/video/pause.png) 0 0 no-repeat;
    background-size: 100%;
    width: 45px;
    height: 52px;
    display: none;
    top: 2px;
    left: 7px;
}

.videoFrame .control-wrap .stop {
    top: 9px;
    left: 95px;
    background: url(../images/video/stop.png) 0 0 no-repeat;
    background-size: 100%;
    width: 49px;
    height: 50px;
    cursor: pointer;
}

.videoFrame .control-wrap .stop:before {
    /* content: ''; */
    display: block;
    height: 66px;
    border-left: 1px solid #00002D;
    border-right: 1px solid #fff;
    position: absolute;
    top: -14px;
    left: -27px;
    opacity: 0.2;
}

.videoFrame .control-wrap .c-con {
    left: 177px;
    top: 12px;
    width: calc(100% - 646px);
}

.videoFrame .control-wrap .c-con:before {
    content: '';
    display: block;
    height: 51px;
    border-left: 1px solid #00002D;
    border-right: 1px solid #fff;
    position: absolute;
    top: -4px;
    left: -14px;
    opacity: 0.2;
}

.videoFrame .control-wrap .c-con .progress {
    position: absolute;
    top: 19px;
    left: 19px;
    width: calc(100% - 120px);
    height: 5px;
    background-color: #5C5E5E;
    cursor: pointer;
    border-radius: 25px;
}

.videoFrame .control-wrap.novtt .c-con .progress {
    width: 390px;
}


.videoFrame .control-wrap .c-con .progress span {
    height: 100%;
    background: #CDB7F7;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 25px;
}

.videoFrame .control-wrap .c-con .progress span:before {
    display: block;
    content: '';
    position: absolute;
    width: 55px;
    height: 55px;
    /*    background: url(images/video/jog.png) 0 0 no-repeat;*/
    background: url(../images/video/jog.png) 0 0 no-repeat;
    top: -25px;
    right: -31px;
}

.videoFrame .control-wrap .c-con .time {
    position: absolute;
    top: 14px;
    right: -20px;
    width: 97px;
}

.videoFrame .control-wrap.novtt .c-con .time {
    left: 610px;
}

.videoFrame .control-wrap .c-con .time .currentTime {
    color: #FFE674;
    font-size: 15px;
    float: left;
    font-weight: bold;
}

.videoFrame .control-wrap .c-con .time .totalTime {
    color: #fff;
    font-size: 15px;
    float: right;
    font-weight: bold;
}

.videoFrame .control-wrap .c-con .time .totalTime:before {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    left: 47px;
    width: 2px;
    height: 15px;
    background: #fff;
}

.videoFrame .control-wrap .s-con {
    top: 5px;
    right: 238px;
}

.videoFrame .s-con:before {
    content: '';
    display: block;
    height: 51px;
    border-left: 1px solid #00002D;
    border-right: 1px solid #fff;
    position: absolute;
    top: 4px;
    left: -3px;
    opacity: 0.2;
}

.videoFrame .control-wrap.novtt .s-con {
    left: 830px;
}

.videoFrame .control-wrap .s-con .s_icon {
    /*    background:url(images/video/sound.png) 0 0 no-repeat;*/
    background: url(../images/video/sound.png) 0 0 no-repeat;
    width: 62px;
    height: 62px;
    position: relative;
    background-size: 100%;
    cursor: pointer;
}

.videoFrame .control-wrap .s-con .s_icon.mute {
    /* width: 38px; */
    /* height: 31px; */
    /* margin-top: 0px; */
    background: url(../images/video/mute.png) 0 0 no-repeat;
    background-size: 100%;
}

.videoFrame .control-wrap .s-con .sound {
    position: absolute;
    top: 26px;
    left: 69px;
    width: 116px;
    height: 5px;
    background-color: #5C5E5E;
    cursor: pointer;
    border-radius: 25px;
}

.videoFrame .control-wrap .s-con .sound span {
    width: 50%;
    height: 100%;
    background: #CDB7F7;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 25px;
}

.videoFrame .control-wrap .s-con .sound span:before {
    display: block;
    content: '';
    position: absolute;
    width: 31px;
    height: 62px;
    background: url(../images/video/s_jog.png) 0 0 no-repeat;
    top: -25px;
    right: -20px;
    background-size: 100%;
}

.videoFrame .control-wrap .script {
    top: 20px;
    left: 826px;
    width: 100px;
    height: 33px;
    cursor: pointer;
    border: 3px solid #fff;
    box-sizing: content-box;
    border-radius: 5px;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-indent: 30px;
    display: none;
}

.videoFrame .control-wrap .f-con {
    top: 6px;
    right: 15px;
}

.videoFrame .control-wrap .f-con:before {
    content: '';
    display: block;
    height: 51px;
    border-left: 2px solid #00002D;
    border-right: 2px solid #fff;
    position: absolute;
    top: 2px;
    left: -20px;
    opacity: 0.2;
}

.videoFrame .control-wrap .f_icon {
    width: 61px;
    height: 62px;
    background: url(../images/video/full.png) 0 0 no-repeat;
    background-size: 100%;
}

.videoFrame .control-wrap .f_icon.on {
    width: 68px;
    height: 68px;
    background: url(../images/video/full_on.png) 0 0 no-repeat;
    margin-top: -5px;
}

.videoFrame .control-wrap .f_icon.close {
    width: 28px;
    height: 28px;
    background: url(../images/video/close.png) 0 0 no-repeat;
}

.videoFrame .control-wrap .script .icon {
    background: url(../images/video/script.png) -8px -8px no-repeat;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 2px;
    left: 5px;
}

/*0626 수정*/
.videoFrame {
    /*background: #fff;*/
}

.videoFrame .control-wrap .script-wrap {
    width: 1280px;
    height: 54px;
    position: absolute;
    bottom: 80px;
    left: 0;
    line-height: 54px;
}

/*배속 추가*/

.videoFrame .r-con {
    top: 17px;
    right: 403px;
    display: block;
}

.videoFrame .r-con:before {
    content: '';
    display: block;
    height: 51px;
    border-left: 1px solid #00002D;
    border-right: 1px solid #FFF;
    position: absolute;
    top: -7px;
    left: -21px;
    opacity: 0.2;
}

.videoFrame .r-con .r-btn {
    width: 79px;
    height: 30px;
    cursor: pointer;
    box-sizing: content-box;
    border-radius: 20px;
    color: #4D4D4D;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    line-height: 32px;
    background: #CDB7F7;
    position: absolute;
    text-indent: 33px;
}

.videoFrame .r-con .r-btn:before {
    position: absolute;
    content: '';
    display: block;
    width: 24px;
    height: 26px;
    background: url(../images/video/rate_item.png) center center no-repeat;
    top: 3px;
    left: 3px;
}

.videoFrame .r-con .r-box {
    position: absolute;
    top: -274px;
    left: -21px;
    width: 128px;
    height: 254px;
    background: url(../images/video/ratebg.png) center center no-repeat;
    padding: 11px 15px;
    display: none;
    z-index: 2;
}

.videoFrame .r-con .r-box:before {
    content: '배속 선택';
    display: block;
    clear: both;
    position: absolute;
    color: #fff;
    font-size: 23px;
    width: 98px;
    text-align: center;
}

.videoFrame .r-box div {
    width: 86px;
    height: 27px;
    cursor: pointer;
    box-sizing: content-box;
    border-radius: 20px;
    color: #333;
    font-size: 22px;
    font-weight: bold;
    text-align: left;
    line-height: 30px;
    background: #cbcbcb;
    position: relative;
    text-indent: 36px;
    margin-top: 10px;
    margin-left: 2px;
}

.videoFrame .r-box div:before {
    position: absolute;
    content: '';
    display: block;
    width: 24px;
    height: 26px;
    background: url(../images/video/rate_item.png) center center no-repeat;
    top: 1px;
    left: 2px;
}

.videoFrame .r-box div.on {
    background: #CDB7F7;
}

.videoFrame .r-box div:first-child {
    margin-left: 4;
    margin-top: 37px;
}


:fullscreen {
    width: 100% !important;
    height: 100% !important;
    background: none !important;
}

:-webkit-full-screen {
    width: 100% !important;
    height: 100% !important;
    background: none !important;
}

:-ms-fullscreen {
    width: 100% !important;
    height: 100% !important;
    background: none !important;
}

:-ms-fullscreen.videoFrame {
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
}

:fullscreen.videoFrame {
    width: 100%;
    height: 100% !important;
    position: relative;
}

:-webkit-full-screen.videoFrame {
    width: 100%;
    height: 100% !important;
    position: relative;
}

:-ms-fullscreen.videoFrame {
    width: 100%;
    height: 100% !important;
    position: relative;
}

:fullscreen.videoFrame video {
    height: 100% !important;
    /*height: calc(100% - 76px) !important;*/
}

:-webkit-full-screen.videoFrame video {
    height: 100% !important;
    /*height: calc(100% - 76px) !important;*/
}

:-ms-fullscreen.videoFrame video {
    height: 100% !important;
    /*height: calc(100% - 76px) !important;*/
}

.videoFrame .control-wrap .c-con {
    left: 247px;
    top: 12px;
    width: calc(100% - 716px);
}

.videoFrame .control-wrap .replay {
    top: 1px;
    left: 155px;
    background: url(../images/video/role.png) 0 0 no-repeat;
    background-size: 100%;
    width: 62px;
    height: 68px;
    cursor: pointer;
}

.videoFrame .control-wrap .replay.on {
    background: url(../images/video/role_on.png) 0 0 no-repeat;
    background-size: 100%;
}

.videoFrame .control-wrap .replay:before {
    /* content: ''; */
    display: block;
    height: 66px;
    border-left: 1px solid #00002D;
    border-right: 1px solid #fff;
    position: absolute;
    top: -14px;
    left: -20px;
    opacity: 0.2;
}

.videoFrame .r-con .r-box {
    position: absolute;
    top: -289px;
    left: -18px;
    width: 120px;
    height: 273px;
    background: #727581;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 11px 15px;
}

.videoFrame .r-con .r-box:before {
    content: '배속 선택';
    display: block;
    clear: both;
    position: absolute;
    color: #fff;
    font-size: 22px;
    width: 94px;
    padding-bottom: 6px;
    text-align: center;
}

.videoFrame .r-con .r-box:after {
    content: '';
    display: block;
    width: 88px;
    border-top: 1px solid #00002D;
    border-bottom: 1px solid #FFF;
    position: absolute;
    top: 37px;
    left: 18px;
    opacity: 0.2;
}

.markerbox {
    width: calc(100% - 140px);
    position: absolute;
}

.markerbox .marker {
    background: url(../images/video/marker.png) 0 0 no-repeat;
    position: absolute;
    /*    background: blue;*/
    width: 16px;
    height: 15px;
    top: -10px;
    margin-left: 30px;
    cursor: pointer;
}

.videoFrame.fullvideo .replay,
.videoFrame.fullvideo .time,
.videoFrame.fullvideo .r-con,
.videoFrame.fullvideo .s-con {
    display: none;
}

.videoFrame.fullvideo .c-con {
    left: 177px;
    top: 12px;
    width: calc(100% - 156px);
}

/* 탭 */
.videoFrame:not(.adomode) .tabbox {
    position: absolute;
    top: 55px;
    left: 0;
}

.videoFrame:not(.adomode) .tabbox .tab {
    font-family: 'KoPubDotumB';
    background: #999999;
    font-size: 38px;
    border-bottom-left-radius: 40px;
    border-top-left-radius: 40px;
    margin-top: 20px;
    cursor: pointer;
    position: relative;
    color: #fff;
    width: 255px;
    padding-left: 35px;
    padding-right: 60px;
    padding-top: 14px;
    padding-bottom: 12px;
    line-height: 52px;
    min-height: 76px;
}

.videoFrame:not(.adomode) .tabbox .tab {
    position: absolute;
    right: 0;
}

.videoFrame:not(.adomode) .tabbox .tab:nth-child(1) {
    top: 0;
}

.videoFrame:not(.adomode) .tabbox .tab:nth-child(2) {
    top: 100px;
}

.videoFrame:not(.adomode) .tabbox .tab:nth-child(3) {
    top: 200px;
}

.videoFrame:not(.adomode) .tabbox .tab:nth-child(4) {
    top: 300px;
}

.videoFrame:not(.adomode) .tabbox .tab:nth-child(5) {
    top: 400px;
}

.videoFrame:not(.adomode) .tabbox .tab.on {
    background: #01b0cd;
    width: 275px;
}

.videoFrame:not(.adomode) .tabbox .tab .rolemode {
    background: url(../images/video/role.png) 0 0 no-repeat;
    background-size: 100%;
    width: 62px;
    height: 62px;
    cursor: pointer;
    top: 10px;
    right: 0;
    position: absolute;
}

.videoFrame:not(.adomode) .tabbox .tab .rolemode.on {
    background: url(../images/video/role_on_old.png) 0 0 no-repeat;
    width: 76px;
    background-size: 100%;
}

/* adomode */
.videoFrame.adomode {
    width: 780px;
    height: 40px;
    top: 499px;
    left: 970px;
}

.videoFrame.adomode .vdo-wrap .play {
    display: none !important;
}

.videoFrame.adomode video {
    display: none;
}

.videoFrame.adomode .control-wrap .s-con {
    right: 120px;
}

.videoFrame.adomode .s-con:before {
    left: -14px;
}

.videoFrame.adomode .control-wrap .c-con {
    width: calc(100% - 439px);
}

.videoFrame.adomode .control-wrap .s-con .sound {
    width: 90px;
}

.videoFrame.adomode .control-wrap .f-con {
    display: none;
}

.videoFrame.adomode .control-wrap .r-con {
    display: none;
}

/* 탭 */
.videoFrame.adomode .tabbox {
    position: absolute;
    top: -27px;
    left: -5px;
    width: 1600px;
}

.videoFrame.adomode .tabbox .tab {
    margin-bottom: 36px;
    letter-spacing: -0.3px;
    font-size: 50px;
    text-align: justify;
    font-family: 'NotoSerifKr-Bold';
    pointer-events: none;
}

.videoFrame.adomode .tabbox .tab:first-child {
    margin-left: 104px;
}

.videoFrame.adomode .tabbox .tab .btn {
    display: none;
}

.videoFrame.adomode .tabbox .tab.on {
    color: #ff3300;
}

.videoFrame.adomode .tabbox .tab .rolemode {
    background: url(../images/video/role.png) 0 0 no-repeat;
    background-size: 100%;
    width: 45px;
    height: 33px;
    cursor: pointer;
    top: 25px;
    left: 170px;
    position: absolute;
}

.videoFrame.adomode .tabbox .tab .rolemode.on {
    background: url(../images/video/role_on.png) 0 0 no-repeat;
    background-size: 100%;
}

/* adomode - simple */
.videoFrame.adomode.simple {
    width: 151px;
    height: 40px;
    top: 499px;
    left: 970px;
}

.videoFrame.adomode.simple .control-wrap .replay,
.videoFrame.adomode.simple .control-wrap .c-con,
.videoFrame.adomode.simple .control-wrap .progress,
.videoFrame.adomode.simple .control-wrap .time,
.videoFrame.adomode.simple .control-wrap .btn script,
.videoFrame.adomode.simple .control-wrap .r-con,
.videoFrame.adomode.simple .control-wrap .s-con,
.videoFrame.adomode.simple .control-wrap .f-con {
    display: none;
}

/* adomode - speaker */
.videoFrame.adomode.speaker {
    width: 151px;
    height: 40px;
    top: 499px;
    left: 970px;
}

.videoFrame.adomode.speaker .control-wrap .replay,
.videoFrame.adomode.speaker .control-wrap .c-con,
.videoFrame.adomode.speaker .control-wrap .progress,
.videoFrame.adomode.speaker .control-wrap .time,
.videoFrame.adomode.speaker .control-wrap .btn script,
.videoFrame.adomode.speaker .control-wrap .r-con,
.videoFrame.adomode.speaker .control-wrap .s-con,
.videoFrame.adomode.speaker .control-wrap .f-con {
    display: none;
}

.videoFrame.adomode.speaker .control-wrap {
    background: transparent;
    width: 80px;
    height: 80px;
}

.videoFrame.adomode.speaker .control-wrap .p-con {
    left: 0;
    top: 0;
}

.videoFrame.adomode.speaker .control-wrap .p-con .pause {
    display: none !important;
}

.videoFrame.adomode.speaker .control-wrap .p-con .play {
    width: 80px;
    height: 80px;
    background: url(../images/audio/btnSound_stop.png) 0 0 no-repeat;
    top: 0;
    left: 0;
}

.videoFrame.adomode.speaker .control-wrap .stop {
    width: 80px;
    height: 80px;
    background: url(../images/audio/btnSound_play.png) 0 0 no-repeat;
    top: 0;
    left: 0;
}

.videoFrame.adomode.speaker .control-wrap .stop::before {
    content: none;
}

/* 팝업 */
.popup .videoFrame {
    top: 149px;
    left: 50%;
    transform: translateX(-50%) scale(1);
}

/* 인라인 비디오 */
.inVideo {
    cursor: pointer;
    position: absolute;
    width: 689px;
    height: 623px;
    border: 3px solid #cfd3db;
    top: 247px;
    left: 207px;
    overflow: hidden;
}

.inVideo.on {
    background: transparent;
}

/*  */
.btnVideo {
    width: 73px;
    height: 76px;
    background: url(../images/video/btnVideo.png) 0 0 no-repeat;
    position: absolute;
    bottom: 191px;
    right: 456px;
}

/*  */
.inVideo>.bg {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: translate(0, 0) scale(1);
}

.inVideo.on .bg {
    background: #000 !important;
}

/*  */
.inVideo .videoFrame .vdo-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.inVideo :-webkit-full-screen.videoFrame .vdo-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.inVideo :fullscreen.videoFrame .vdo-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/*  */
.inVideo .videoFrame .vdo-wrap video {
    top: 50%;
    transform: translateY(-50%);
}

.inVideo :-webkit-full-screen.videoFrame .vdo-wrap video {
    top: 50%;
    transform: translateY(-50%);
}

.inVideo :fullscreen.videoFrame .vdo-wrap video {
    top: 50%;
    transform: translateY(-50%);
}

/*  */
.inVideo .videoFrame .vdo-wrap .play {
    top: 50%;
    transform: translateY(-50%);
}

.inVideo :fullscreen.videoFrame .vdo-wrap .play {
    top: 50%;
    transform: translateY(-50%);
}

.inVideo :-webkit-full-screen.videoFrame .vdo-wrap .play {
    top: 50%;
    transform: translateY(-50%);
}

/*  */
.inVideo .videoFrame.fullvideo {
    transform: translate(-50%, -50%) scale(0.535);
    top: 50%;
    left: 50%;
    height: 100%;
    z-index: auto;
    display: none !important;
}

.inVideo.on .videoFrame.fullvideo {
    display: block !important;
}

/** 2024-09-25 16:30:43 - JGY */
/* 지문 1줄 */
.videoFrame.line1 {
    width: 1080px;
    height: 674px;
    top: 250px;
    left: 420px;
    transform: scale(1.189);
}

.videoFrame.line1_2 {
    width: 1080px;
    height: 674px;
    top: 261px;
    left: 419px;
    transform: scale(1.130);
}

/* 지문 1줄 + 작은 지문 1줄 */
.videoFrame.line2 {
    width: 1080px;
    height: 674px;
    top: 298px;
    left: 419px;
    transform: scale(1.045);
}

/* 지문 2줄 + 작은 지문 1줄 */
.videoFrame.line3 {
    width: 1080px;
    height: 674px;
    top: 338px;
    left: 419px;
    transform: scale(0.92);
}

/* ---------------------------------------
 * 글쓰기
 * --------------------------------------- */
/* textarea */
textarea {
    resize: none;
    background: transparent;
    outline: none;
    overflow-y: auto;
    color: #333;
    font-family: 'NanumGothicB' !important;
    font-size: 17px;
    overflow-x: hidden;
}

textarea::-webkit-input-placeholder {
    color: #ccc;
}

textarea:-ms-input-placeholder {
    color: #ccc;
}

textarea::placeholder {
    color: #ccc;
}

/* input */
input[type=text]::-ms-clear {
    display: none;
}

input:focus {
    outline: none;
}

input[disabled="true"] {
    -webkit-text-fill-color: blue;
    color: blue !important;
    opacity: 1;
}

/* textContents */
.textContent {
    position: absolute;
    left: 0px;
    top: 0px;
}

/* textWrap */
.textContent .textWrap {
    position: absolute;
    left: 490px;
    top: 410px;
    width: 950px;
    height: 200px;
}

.textContent .textWrap textarea {
    height: 100%;
    width: 100%;
    position: absolute;
    /* padding: 0 55px; */
    background: transparent;
    border: none;
    resize: none;
    font-family: 'HUFace16' !important;
    font-weight: 400;
    font-size: 70px;
    text-align: left;
    line-height: 88px;
    line-height: 1;
    color: #000;
}

.textContent .textWrap .exWrap {
    /* background: url('../images/09/ex.png') 238px 132px no-repeat; */
    width: 110%;
    height: 140%;
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
}

.textContent .textWrap .exWrap .closeBtn {
    background: url('../images/textitem/exClose.png') 0 0 no-repeat;
    width: 55px;
    height: 58px;
    position: absolute;
    top: -37px;
    right: 56px;
    cursor: pointer;
}

.textContent .textWrap .placeholder {
    background: url('../images/textitem/textarea_placeholder.png') 23px -5px no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
}

.textContent .exbtn {
    background: url('../images/clickitem/btn_openEx.png') 0 0 no-repeat;
    width: 240px;
    height: 78px;
    position: absolute;
    top: 927px;
    left: 1654px;
    cursor: pointer;
    z-index: 12;
}

.textContent .exbtn.re {
    background: url('../images/clickitem/rebtn.png') 0 0 no-repeat;
    /* pointer-events: auto !important; */
}

.textContent .exbtn.re {
    /*  background: url('../images/clickitem/replay.png') 0 0 no-repeat; */
}

/* inputWrap */
.textContent .inputWrap {
    position: absolute;
    left: 490px;
    top: 550px;
    width: 950px;
    height: 160px;
}

.textContent .inputWrap input {
    height: 100%;
    width: 100%;
    position: absolute;
    padding: 0 55px;
    font-size: 88px;
    line-height: 88px;
    line-height: 1;
    color: #000;
    background: transparent;
    resize: none;
    border: none;
}

.textContent .inputWrap .exWrap {
    /* background: url('../images/09/ex.png') 238px 132px no-repeat; */
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
}

.textContent .inputWrap .exWrap .closeBtn {
    background: url('../images/inputItem/exClose.png') 0 0 no-repeat;
    width: 55px;
    height: 58px;
    position: absolute;
    top: 44px;
    right: 62px;
    cursor: pointer;
}

.textContent .inputWrap .placeholder {
    background: url('../images/inputItem/input_placeholder_pen.png') 2px 4px no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
}

/* ---------------------------------------
 * 캐릭터 음원
 * --------------------------------------- */
/* aniWrap */
.aniWrap {
    position: relative;
}

/* aniItem */
.aniWrap .aniItem {
    position: absolute;
    cursor: pointer;
}

/*  */
.aniWrap .aniItem .char {
    width: 100%;
    height: 100%;
    position: absolute;
}

/*  */
.aniWrap .aniItem .item {
    position: absolute;
    pointer-events: none;
    display: block !important;
    opacity: 0;
}

.aniWrap .aniItem.ing .item {
    opacity: 1;
}

/* motion */
.aniWrap .aniItem .motionWrap .cover {
    display: block;
}

.aniWrap .aniItem .motionWrap.on .cover {
    display: none;
}

.aniWrap .aniItem .motionWrap .motion {
    display: none;
}

.aniWrap .aniItem .motionWrap.on .motion {
    display: block;
}

/* soundBtn */
.aniWrap .soundBtn {
    position: absolute;
    width: 228px;
    height: 78px;
    top: 905px;
    left: 1635px;
    cursor: pointer;
    background: url('../images/clickitem/soundbtn.png') no-repeat;
}

.aniWrap .soundBtn.re {
    background: url('../images/clickitem/replay.png') no-repeat;
}

/* ---------------------------------------
 * 슬라이드 컨텐츠
 * --------------------------------------- */
.slideWrap {
    width: auto;
    position: absolute;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.slideWrap .slide {
    position: absolute;
    pointer-events: auto;
    background: #999;
}

.slideWrap .slide .slideBtn {
    width: auto;
    height: auto;
    position: absolute;
    cursor: pointer;
    background: #666;
}

.slideWrap.top .slide .slideBtn {
    bottom: 0;
}

.slideWrap.bottom .slide .slideBtn {
    top: 0;
}

.slideWrap.left .slide .slideBtn {
    right: 0;
}

.slideWrap.right .slide .slideBtn {
    left: 0;
}

/* ---------------------------------------
 * stamp
 * --------------------------------------- */
.stampWrap {
    position: absolute;
    top: 0;
    left: 0;
}

.stampWrap .stamp {
    width: 800px;
    height: 1000px;
    background: url('../images/motion/stamp_800_22.png') no-repeat;
    animation: stampAni 2s steps(25);
    position: absolute;
    top: -40px;
    left: 1453px;
}

.stampWrap .item {
    width: 390px;
    height: 390px;
    position: absolute;
    top: 574px;
    left: 1476px;
    display: none;
}

.stampWrap .item.st1 {
    background: url('../images/motion/stamp01.png') center center no-repeat;
}

.stampWrap .item.st2 {
    background: url('../images/motion/stamp02.png') center center no-repeat;
}

.stampWrap .item.st3 {
    background: url('../images/motion/stamp03.png') center center no-repeat;
}

.stampWrap .item.st4 {
    background: url('../images/motion/stamp04.png') center center no-repeat;
}

.stampWrap .item.st5 {
    background: url('../images/motion/stamp05.png') center center no-repeat;
}

.stampWrap .item.st6 {
    background: url('../images/motion/stamp06.png') center center no-repeat;
}

.stampWrap .item.st7 {
    background: url('../images/motion/stamp07.png') center center no-repeat;
}

.stampWrap .item.st8 {
    background: url('../images/motion/stamp08.png') center center no-repeat;
}

@keyframes stampAni {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -20000px;
    }
}

@keyframes bounce2 {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }


    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.bounce2 {
    animation-name: bounce2;
    -webkit-animation-name: bounce2;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}

/* ---------------------------------------
 * 함께읽기
 * --------------------------------------- */
.toReadWrap {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    pointer-events: none;
}

.btnToRead {
    position: absolute;
    width: 354px;
    height: 105px;
    top: 890px;
    right: 96px;
    cursor: pointer;
    /* background: #333; */
    pointer-events: auto;
}

.btnToRead.on {
    background: #fff;
    pointer-events: none !important;
}

.toRead {
    position: absolute;
    background: url('../images/motion/toRead1.png') no-repeat;
    width: 800px;
    height: 634px;
    top: 47.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.toRead.motion {
    animation: toReadAni1 4s steps(46);
    animation-fill-mode: both;
    animation-delay: 1s;
    transform: rotate(0.001deg) translate(-50%, -50%);
}

@keyframes toReadAni1 {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -36800px;
    }
}

/* ---------------------------------------
 * 링크 버튼
 * --------------------------------------- */
.linkContent {
    position: relative;
    left: 0px;
    top: 0px;
}

.linkContent .linkItem {
    width: 1770px;
    height: 270px;
    position: absolute;
    left: 79px;
    top: 300px;
}

.linkContent .linkItem .linkArea {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    cursor: pointer;
}

.linkContent .linkItem .linkBtn {
    background: url(../images/fingeritem/iconfinger_motion.png) 0 0 no-repeat;
    width: 180px;
    height: 200px;
    position: absolute;
    left: 1036px;
    top: 182px;
    cursor: pointer;
    opacity: 1;
    animation: iconFlash 1.5s steps(75) infinite;
    animation-fill-mode: both;
    transform: rotate(0.001deg) translate(-50%, -50%) scale(0.8);
    /* animation: none; */
}

@keyframes iconFlash {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -13500px;
    }
}


/* -------------------------------------------------------------------------------------- */
/* =========================================================================================
 * 과목 개별 기능
 * ====================================================================================== */
/* ---------------------------------------
 * 손가락 아이콘 모션
 * --------------------------------------- */
.fingerAni {
    width: 180px;
    height: 200px;
    background: url(../images/fingeritem/iconfinger_dot_motion.png) 0 0 no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 2;
    animation: fingerAni 1.5s steps(75) infinite;
    animation-fill-mode: both;
    transform: rotate(0.001deg) translate(-50%, -50%);
}

@keyframes fingerAni {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -13500px;
    }
}

/* ---------------------------------------
 * 순차 체크리스트
 * --------------------------------------- */
.starContent {
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}

.starContent .starGroup {
    position: absolute;
}

.starContent .starGroup::after {
    content: '';
    display: block;
    clear: both;
}

.starContent .starGroup .star {
    background: url('../images/clickitem/star.png') 0 0 no-repeat;
    width: 68px;
    height: 68px;
    position: relative;
    float: left;
    margin-right: 32px;
    cursor: pointer;
}

.starContent .starGroup .star:last-child {
    margin-right: 0px;
}

.starContent .starGroup .star.on {
    background: url('../images/clickitem/star1_on.png') 0 0 no-repeat;
}

.starContent .starGroup .star:nth-child(2).on {
    background: url('../images/clickitem/star2_on.png') 0 0 no-repeat;
}

.starContent .starGroup .star:nth-child(3).on {
    background: url('../images/clickitem/star3_on.png') 0 0 no-repeat;
}

/* ---------------------------------------
 * 국어
 * --------------------------------------- */
/* sub */
#wrap.kor .sub {
    position: absolute;
    top: 222px;
    left: 162px;
    font-family: 'cookie';
    font-size: 120px;
    font-weight: bold;
    text-align: center;
    width: 278px;
}

#wrap.kor .subNum {
    position: absolute;
    font-size: 100px !important;
    margin-top: 16px;
    width: 100%;
}

#wrap.kor .sub>span {
    width: 82px;
    height: 82px;
    display: inline-block;
    background: #FAB838;
    font-size: 68px;
    color: #fff;
    font-family: 'cookie';
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    line-height: 85px;
    vertical-align: top;
    margin-top: 25px;
}

/* colorPicker */
#wrap.kor .colorPicker {
    position: absolute;
    top: 806px;
    left: 975px;
    width: 886px;
    height: 196px;
    background: url(../images/colorPicker/colorPicker.png) no-repeat;
}

#wrap.kor .colorPicker ul {
    position: absolute;
    top: 109px;
    left: 210px;
}

#wrap.kor .colorPicker li {
    float: left;
    margin-left: 25px;
    width: 83px;
    height: 35px;
    border-radius: 12px;
    cursor: pointer;
    /*    border: 1px solid red;*/

}

#wrap.kor .colorPicker li.on {
    border: 4px solid #e2023f;
}

/* setContent */
#wrap.kor .setContent {
    position: absolute;
    top: 92px;
    right: 59px;
}

#wrap.kor .setContent li {
    float: left;
    position: relative;
    width: 90px;
    height: 77px;
    cursor: pointer;
    margin-right: 8px;
}


/* 이야기 읽기 */
#wrap.kor .videoFrame.readChart .tabbox {
    top: -5px;
    left: 257px;
    border: 3px solid #7AC8F5;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    display: none;
}

#wrap.kor .videoFrame.readChart .tab {
    margin: 0;
    padding: 0;
    text-align: center;
    border-radius: 0px;
    border: none;
    color: #626262;
    width: 219px;
    background: #fff;
    padding-top: 29px;
    font-size: 29px;
    line-height: 0;
    min-height: 55px;
    /* border: 1px solid red; */
}

#wrap.kor .videoFrame.readChart .tab .rolemode {
    display: none !important;
}

#wrap.kor .videoFrame.readChart .tab.on {
    background: #ADECCD;
}

#wrap.kor .videoFrame.readChart .textbox {
    width: 221px;
    height: 46px;
    background: url(../images/video/arrow.png) 172px -3px no-repeat;
    position: absolute;
    top: -57px;
    left: 260px;
    text-align: center;
    color: #000;
    font-size: 29px;
    padding-top: 9px;
    cursor: pointer;
    text-indent: -40px;
    border-radius: 10px;
    /* border: 1px solid red;*/
}

#wrap.kor .videoFrame.readChart .textbox.on {
    background: url(../images/video/arrow_on.png) 172px -3px no-repeat;
}

/* ---------------------------------------
 * 수학
 * --------------------------------------- */
/* triangletool */
.triangletool {
    width: 148px;
    height: 117px;
    background: url(../images/toolitem/triangle_tool_off.png) 0 0 no-repeat;
    position: absolute;
    /* top: 271px;
    right: 59px; */
    top: 165px;
    right: 0;
    cursor: pointer;
}

.triangletool.on {
    width: auto;
    height: 119px;
    background: url('../images/toolitem/triangle_tool_on.png') 0 0 no-repeat;
    position: absolute;
    top: 271px;
    right: 59px;
    cursor: auto;
    padding-left: 55px;
    padding-right: 25px;
}

.triangletool.tools.on {
    width: auto;
    height: 119px;
    background: url('../images/toolitem/tools_on.png') left top no-repeat;
    position: absolute;
    /* top: 271px; */
    top: 165px;
    right: 0px;
    cursor: auto;
    padding-left: 55px;
    padding-right: 25px;
}

.triangletool div {
    float: left;
    margin-top: 10px;
    margin-left: 10px;
}

.triangletool.on .close {
    display: block;
    width: 46px;
    height: 118px;
    position: absolute;
    top: -10px;
    left: -10px;
    pointer-events: all;
    cursor: pointer;
}

.triangletool.on .triangle1 {
    width: 100px;
    height: 100px;
    cursor: pointer;
    background: #fff url('../images/toolitem/ja1.png') center center no-repeat;
    background-size: 100%;
}

.triangletool.on .triangle1.on {
    background: #fff url('../images/toolitem/dot3.png') center center no-repeat;
}

.triangletool.on .triangle2 {
    width: 170px;
    height: 100px;
    cursor: pointer;
    background: #fff url('../images/toolitem/ja2.png') center center no-repeat;
    background-size: 100%;
}

.triangletool.on .triangle2.on {
    background: #fff url('../images/toolitem/dot4.png') center center no-repeat;
}

.triangletool.on .angle {
    width: 161px;
    height: 100px;
    cursor: pointer;
    background: #fff url('../images/toolitem/angle.png') center center no-repeat;
    background-size: 100%;
}

.triangletool.on .angle.on {
    background: #fff url('../images/toolitem/dot5.png') center center no-repeat;
}

.triangletool.on .ja {
    width: 163px;
    height: 100px;
    cursor: pointer;
    background: #fff url('../images/toolitem/ja5.png') center center no-repeat;
    background-size: 100%;
}

.triangletool.on .ja.on {
    background: #fff url('../images/toolitem/dot2.png') center center no-repeat;
}

.triangletool.on .cir {
    width: 77px;
    height: 77px;
    cursor: pointer;
    background: #fff url('../images/toolitem/cirs.png') center center no-repeat;
    background-size: 100%;
    margin-top: 20px;
    margin-left: 15px;

}

.triangletool.on .cir.on {
    background: #fff url('../images/toolitem/cirs_on.png') center center no-repeat;
}

/* effBtn */
#wrap.math .effBtn {
    width: 227px;
    height: 59px;
    background: url(../images/clickitem/effect_on.png) 0 0 no-repeat;
    position: absolute;
    cursor: pointer;
    bottom: 24px;
    right: 50px;
}

#wrap.math .effBtn.on {
    background: url(../images/clickitem/effect_off.png) 0 0 no-repeat;
}

/* math_I */
#wrap.math .math_t {
    width: 244px;
    height: 74px;
    position: absolute;
    top: 914px;
    left: 1612px;
    /* background: url(../images/clickitem/math_I.png) 0 0 no-repeat; */
    cursor: pointer;
}

/* stampWrap */
#wrap.math .stampWrap {
    top: -650px;
    left: -20px;
}

/* pop */
#wrap.math .btnPop[data-type="vivasam"] {
    width: 276px;
    height: 276px;
    background: url(../images/clickitem/vivasam.png) 0 0 no-repeat;
    top: 750px;
    left: 1480px;
    animation: vivasam 1.5s infinite both;
}

#wrap.math .btnPop[data-type="vivasam"].stop {
    animation: none;
}

#wrap.math .pop[data-type="vivasam"] .close {
    width: 70px;
    height: 70px;
    top: -2px;
    right: 0px;
}

@keyframes vivasam {
    0% {
        transform: rotate(15deg);
    }

    50% {
        transform: rotate(-15deg);
    }

    100% {
        transform: rotate(15deg);
    }
}



/* ---------------------------------------
 * 체육
 * --------------------------------------- */

#wrap.phy a.active_page {
    width: 220px;
    display: inline-block;
    /* outline: 1px solid red; */
    height: 73px;
    position: absolute;
    top: 813px;
    left: 1320px;
    z-index: 10;
}

/*effBtn*/
#wrap.phy .effBtn {
    background: url('../images/clickitem/btnEff_on.png') center bottom no-repeat;
    width: 112px;
    height: 113px;
    position: absolute;
    top: 795px;
    left: 1550px;
    cursor: pointer;
}

#wrap.phy .effBtn.on {
    background: url('../images/clickitem/btnEff_off.png') center bottom no-repeat;
}

#wrap.phy .contents.Warming_up_videopage .videoFrame {
    width: var(--line1-vdo-width);
    height: var(--line1-vdo-height);
    top: var(--line1-vdo-top);
}


/* clickItem */
#wrap.phy .clickContent .clickItem:before {
    display: block;
    content: '';
    width: 154px;
    height: 154px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url('../images/clickitem/clickitem.png') center center no-repeat;
    background-size: 100%;
}

/* 확인하기 */
#wrap.phy .ansbtn {
    width: 240px;
    height: 78px;
    position: absolute;
    top: 927px;
    left: 1654px;
    image-rendering: -webkit-optimize-contrast;
    /* chrome(비표준) */
    background: url(../images/clickitem/allbtn.png) 0 0 no-repeat;
}


#wrap.phy .ansbtn.com {
    background: url(../images/clickitem/combtn.png) 0 0 no-repeat;
}

#wrap.phy .ansbtn.ans {
    background: url(../images/clickitem/ansbtn.png) 0 0 no-repeat;
}


#wrap.phy.quiz .ansbtn {
    background: url(../images/clickitem/ansbtn.png) 0 0 no-repeat;
}

#wrap.phy .ansbtn.re {
    background: url(../images/clickitem/rebtn.png) 0 0 no-repeat;
}

#wrap.phy.quiz .ansbtn.re {
    background: url(../images/clickitem/rebtn.png) 0 0 no-repeat;
}

/* three_char bear_rabbit_squirell */

.contents.three_char .connItem {
    display: block !important;
    position: absolute;
    left: 113px;
    top: 598px;
    width: 450px;
    height: 430px;
    background: url(../images/char/three_char_squirrel.png) center no-repeat;
}

.contents.three_char .connItem.active {
    background: url(../images/char/three_char_squirrel_on.png) center no-repeat;
    left: 145px;
    top: 604px;
}

.contents.three_char .connItem2 {
    left: 721px;
    background: url(../images/char/three_char_rabbit.png) center no-repeat;
    top: 606px;
}

.contents.three_char .connItem2.active {
    background: url(../images/char/three_char_rabbit_on.png) center no-repeat;
    left: 709px;
    /* top: 604px; */
}

.contents.three_char .connItem3 {
    left: 1347px;
    background: url(../images/char/three_char_bear.png) center no-repeat;
    top: 610px;
}

.contents.three_char .connItem3.active {
    background: url(../images/char/three_char_bear_on.png) center no-repeat;
    left: 1337px;
    top: 615px;
}



.contents.three_char.rabbit .connItem {
    left: 721px;
    background: url(../images/char/three_char_rabbit.png) center no-repeat;
    top: 606px;
}

.contents.three_char.rabbit .connItem.active {
    background: url(../images/char/three_char_rabbit_on.png) center no-repeat;
    left: 709px;
    /* top: 604px; */
}





/* popup 내부 */
#wrap.phy .popup .pageWrap .prev,
#wrap.phy .popup .pageWrap .prev {
    width: 78px;
    height: 150px;
    left: 65px;
    top: 434px;
}

#wrap.phy .popup .pageWrap .next,
#wrap.phy .popup .pageWrap .next {
    width: 78px;
    height: 150px;
    top: 434px;
    right: 65px;
}

/* Toread */
#wrap.phy .btnToRead {
    position: absolute;
    width: 384px;
    height: 118px;
    top: 837px;
    right: 76px;
    cursor: pointer;
    pointer-events: auto;
    /* background: url(../images/clickitem/readBtn.png) 0 0 no-repeat; */
}

#wrap.phy .btnToRead.on {
    /* background: none; */
    background: #fff;
}

#wrap.phy .toRead {
    position: absolute;
    background: url('../images/motion/toRead3.png') no-repeat;
    width: 1334px;
    height: 800px;
    top: 51.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

#wrap.phy .toRead.motion {
    animation: toReadAni2 4s steps(38);
    animation-fill-mode: both;
    animation-delay: 1s;
    transform: rotate(0.001deg) translate(-50%, -50%);
}

@keyframes toReadAni2 {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -50692px;
    }
}

/*setContent*/
#wrap.phy .setContent {
    top: 121px;
    right: 50px;
}

#wrap.phy .setContent li {
    width: 105px;
    height: 53px;
    margin-right: 6px;
}

#wrap.phy .setContent li::marker {
    display: none !important;
}

/*navigation*/
#wrap.phy .pageWrap .prev,
#wrap.phy .pageWrap .next {
    width: 72px;
    top: 441px;
}

#wrap.phy .pageWrap .pageing {
    top: 959px;
}

#wrap.phy .pageWrap .pageing .dot {
    width: 35px;
    margin-top: 10px;
    margin-right: 18px;
}

#wrap.phy .pageWrap .pageing .dot:first-child {
    margin-left: 18px;
}

/* outro needs*/
#wrap.phy .btnPop.needs {
    background: url(../images/outro/pop_dis.png) center no-repeat;
    width: 431px;
    height: 236px;
    top: 454px;
    left: 1444px;
}

#wrap.phy .btnPop.needs.on {
    display: none;
}

#wrap.phy .btnPop.needs::after {
    content: "";
    position: absolute;
    width: 186px;
    height: 316px;
    top: 241px;
    left: 141px;
    background: url(../images/outro/needsBtn.png) 0 0 no-repeat;
}

#wrap.phy .pop[data-type="needs"] .close::after {
    content: "";
    position: fixed;
    background: url(../images/outro/needsBtn_on.png) 0 0 no-repeat;
    width: 214px;
    height: 316px;
    top: 686px;
    left: 1587px;
}

/* =========================================================================================
 * 기타
 * ====================================================================================== */
/* ---------------------------------------
 * tester
 * --------------------------------------- */
.tt {
    position: absolute;
    width: 100%;
    height: 100%;
    /* display: none; */
    opacity: 0.5;
    pointer-events: none;
    background-position-x: 0px !important;
    background-position-y: 0px !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    z-index: 9999;
}

.setContent li,
.btnPop,
.btnPopup,
.objWrap .obj,
.textWrap,
.textWrap .textarea,
.clickContent .clickItem,
.colorPicker ul>li,
.pageWrap .prev,
.pageWrap .next,
.pageWrap .pageing,
.pageWrap .pageing .dot,
.pageWrap .closeBtn,
.btnToRead,
.placeholder,
.exWrap,
.exWrap .closeBtn,
button,
input,
textarea,
.sliding,
.test,
.btn,
.linkContent .linkItem .linkArea,
.linkContent .linkItem .linkBtn,
.introPage .startBtn,
.dragScroll .jog,
.scrollbox,
.scrollbox .scrollpage,
.dropArea .dropItem,
.dragArea .dragItem,
.pop .closeBtn,
.popup .closeBtn,
.pop .close,
.popup .close,
.hwalbtn,
.tabWrap .btnTab {
    /* background-color: rgba(0, 0, 0, 0.5) !important; */
    /* background-color: rgba(255, 0, 255, 0.5) !important; */
    /* background-color: rgba(255, 237, 96, 0.5) !important; */
    /* background-color: rgba(129, 193, 71, 0.5) !important; */
    /* background-color: rgba(10, 55, 17, 0.5) !important; */
    /* outline: 1px solid red; */
}

/* ---------------------------------------
 * custom
 * --------------------------------------- */
/* position */
.posr {
    position: relative;
}

.posa {
    position: absolute;
}

/* display */
.blk {
    display: block !important;
}

.none {
    display: none !important;
}

/* tir */
.tir {
    text-indent: 0px;
    position: absolute;
    top: 0px;
}

.tir.off {
    text-indent: -9999px;
    position: absolute;
    top: -999px;
}

/* clear */
.clear:after {
    content: '';
    clear: both;
    display: block;
}

/* event */
.dis,
.evtN,
.aEvtN,
.aEvtN * {
    pointer-events: none !important;
}

/* align */
.center {
    text-align: center;
}

/* radius */
.circle {
    border-radius: 50%;
}














.testWrap {
    left: 0px;
    top: 0px;
    position: absolute;
    pointer-events: none;
    z-index: 999;
}

.testWrap ul {
    left: 0px;
    top: 0px;
    position: absolute;
    width: 230px;
    background-color: rgba(153, 154, 156, 0.7);
}

.testWrap li {
    position: relative;
    margin: 0px 0px 5px 0px;
    width: 220px;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 0, 0, 1);
    color: rgba(255, 255, 0, 1.0);
    font-size: 16px;
    font-weight: 900;
    text-align: left;
    line-height: 20px;
    font-family: 'goyang' !important;
    letter-spacing: 0.02em;
}

.testWrap li.start {
    color: rgba(252, 83, 18, 1.0);
    margin-bottom: 20px;
}

.testWrap.waypoint {
    left: 1600px;
}

.testWrap li.title {
    color: rgba(255, 255, 255, 1);
    border: none;
}

.testWrap li.page01 {
    color: rgba(252, 255, 0, 1.0);
}

.testWrap li.page02 {
    color: rgba(186, 252, 18, 1.0);
}

.testWrap li.page03 {
    color: rgba(18, 187, 252, 1.0);
}

#wrap .btnTest {
    top: auto;
    bottom: 0px;
    z-index: 999;
}


/* videoFrame hls */
.levelbuttons {
    display: none;
}

.hls .levelbuttons {
    position: absolute;
    top: 8px;
    right: 65px;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    background: #6f7278;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 120px;
}

.hls .levelbuttons button {
    width: 94px;
    height: 28px;
    cursor: pointer;
    box-sizing: content-box;
    border-radius: 20px;
    color: #4D4D4D;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    background: rgb(203, 203, 203);
    position: relative;
    /* margin-top: 10px; */
    margin-top: 12px;
    margin-left: 2px;
    display: none;
    white-space: nowrap;
}

.hls .levelbuttons button.on {
    background: #CDB7F7;
    /* background: #47BFC6; */
    display: block;
    font-size: 18px;
}

.hls .levelbuttons button span {
    color: #666;
    font-size: 14px;
    font-weight: bold;
}

.hls .levelbuttons.open {
    top: -196px;
    padding-top: 14px;
}

.hls .levelbuttons.open div {
    font-size: 22px;
    color: #fff;
    letter-spacing: -1px;
}

.hls .levelbuttons.open button {
    display: block;
}

.hls.videoFrame .control-wrap .p-con {
    left: 10px;
}

.hls.videoFrame .control-wrap .stop {
    left: 85px;
}

.hls.videoFrame .control-wrap .replay {
    left: 145px;
}

.hls.videoFrame .control-wrap .c-con {
    left: 210px;
    width: calc(100% - 720px);
}

.hls.videoFrame .control-wrap .c-con:before {
    left: -4px;
    display: none;
}

.hls.videoFrame .r-con {
    right: 470px;
}

.hls.videoFrame .r-con:before {
    left: -10px;
    display: none;
}

.hls.videoFrame .control-wrap .s-con {
    right: 320px;
}

.hls.videoFrame .control-wrap .s-con::before {
    display: none;
}

.hls.videoFrame .control-wrap .f-con {
    right: 5px;
}

.hls.videoFrame .control-wrap .f-con:before {
    border: 0;
}