@charset "utf-8";
.gate_container {
    position: absolute;
    top: 38px;
    bottom: 38px;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: #fcf2e5;
}

.gate_container.off {
    display: none !important
}

.gate_container .gate_ani {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.gate_container .gate_ani .gate_ani_cover {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.checkContainer:not(.word) header .checkTitle,.isActiveContainer header .title,.fishing header,.checkContainer:not(.word) main,.isActiveContainer main,.fishing main {
    visibility: hidden;
    z-index: -1
}

.checkContainer.on header .checkTitle,.isActiveContainer.on header .title,.fishing.on header,.checkContainer.on main,.isActiveContainer.on main,.fishing.on main {
    visibility: visible;
    z-index: 0
}

.gate_container .gate_title_container {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 1;

}

.gate_container .gate_title_container:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    z-index: -1
}

.gate_container .gate_title_title {
    position: absolute;
    width: 100%;
    line-height: 1;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 60px;
    font-family: YGJAL
}

.gate_container .gate_btn {
    position: absolute;
    left: 475px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 216px;
    height: 52px;
    opacity: 0;
    font-size: 23px;
    border-radius: 10px;
    background-color: #fee100;
    font-family: YGJAL;
    box-sizing: border-box;
    cursor: pointer
}

.gate_container .gate_btn:after {
    content: ">";
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%)
}

.gate_container .gate_btn.hover {
    color: #fff;
    background-color: #f77c19
}

.gate_container .gate_title_title,.gate_container .gate_btn,.gate_container .gate_text {
    -webkit-animation: opacityOne 1s cubic-bezier(0.390,0.575,0.565,1.000) .5s forwards;
    animation: opacityOne 1s cubic-bezier(0.390,0.575,0.565,1.000) .5s forwards
}

.checkContainer .gate_container .gate_title_title {
    top: 246px;
    text-shadow: 4px 0 0 #0d7140,-4px 0 0 #0d7140,0 4px 0 #0d7140,0 -4px 0 #0d7140,3px 3px #0d7140,-3px -3px 0 #0d7140,3px -3px 0 #0d7140,-3px 3px 0 #0d7140,3px 3px 5px rgba(0,0,0,0.3)
}

.checkContainer .gate_container .gate_title_container:before {
    background: url(../../contents/images/background/bg_check.png) center bottom/contain no-repeat
}

.checkContainer .gate_container .gate_btn {
    top: 327px
}

.isActiveContainer .gate_container {
    display: flex;
    align-items: center;
    justify-content: center
}

.isActiveContainer .gate_container:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../../contents/images/background/bg_isActive.png) center bottom/contain no-repeat;
    z-index: 1
}

.isActiveContainer .gate_container .gate_title_container {
    top: auto;
    display: flex;
    flex-direction: column;
    width: 660px;
    height: 500px;
    border-radius: 30px
}

.isActiveContainer .gate_container .gate_title_container:before {
    content: none
}

.isActiveContainer .gate_container .gate_title_title {
    position: static;
    margin: 50px auto 310px;
    font-size: 58px;
    text-shadow: 4px 0 0 #740092,-4px 0 0 #740092,0 4px 0 #740092,0 -4px 0 #740092,3px 3px #740092,-3px -3px 0 #740092,3px -3px 0 #740092,-3px 3px 0 #740092,3px 3px 5px rgba(0,0,0,0.3)
}

.isActiveContainer .gate_container .gate_title_title .color {
    color: #fff4ac
}

.isActiveContainer .gate_container .gate_btn {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 auto
}

.isActiveContainer .gate_container .gate_btn.hover {
    color: #000;
    background-color: #fff
}

@keyframes bottomToTop2 {
    0%,40% {
        transform: translateY(200px);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes bottomToTop2 {
    0%,40% {
        transform: translateY(200px);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

.fishing .gate_title_container .gate_title_title {
    top: 240px;
    text-shadow: #0037a3 3px 0 0,#0037a3 2.83487px .981584px 0,#0037a3 2.35766px 1.85511px 0,#0037a3 1.62091px 2.52441px 0,#0037a3 .705713px 2.91581px 0,#0037a3 -0.287171px 2.98622px 0,#0037a3 -1.24844px 2.72789px 0,#0037a3 -2.07227px 2.16926px 0,#0037a3 -2.66798px 1.37182px 0,#0037a3 -2.96998px .42336px 0,#0037a3 -2.94502px -0.571704px 0,#0037a3 -2.59586px -1.50383px 0,#0037a3 -1.96093px -2.27041px 0,#0037a3 -1.11013px -2.78704px 0,#0037a3 -0.137119px -2.99686px 0,#0037a3 .850987px -2.87677px 0,#0037a3 1.74541px -2.43999px 0,#0037a3 2.44769px -1.73459px 0,#0037a3 2.88051px -0.838247px 0
}

.fishing .gate_title_container .gate_btn {
    top: 360px
}

.fishing .gate_title_container .gate_text {
    position: absolute;
    left: 50%;
    top: 450px;
    text-align: center;
    font-size: 30px;
    opacity: 0;
    line-height: 1.3em;
    font-family: NotoB;
    padding: 15px 25px;
    background-color: rgba(255,255,255,.5);
    border-radius: 10px;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%)
}

.fishing .gate_container .fishBox {
    position: absolute;
    z-index: -1
}

.fishing .gate_container .fishBox_1 {
    top: 310px;
    left: 30px
}

.fishing .gate_container .fishBox_2 {
    top: 390px;
    left: 110px
}

.fishing .gate_container .fishBox_3 {
    top: 352px;
    left: 950px
}

.fishing .gate_container .fishBox_4 {
    top: 510px;
    left: 260px
}

.fishing .gate_container .fishBox_5 {
    top: 411px;
    left: 780px
}

.fishing .gate_container .fishBox,.fishing .gate_container .fishBox,.fishing .gate_container .fishBox {
    -webkit-animation: fishSwim_box .8s steps(4) infinite;
    -ms-animation: fishSwim_box .8s steps(4) infinite;
    animation: fishSwim_box .8s steps(4) infinite
}

.fishing .gate_container .fishBox,.fishing .gate_container .fishBox {
    -webkit-animation: fishSwim_box .7s steps(4) infinite;
    -ms-animation: fishSwim_box .7s steps(4) infinite;
    animation: fishSwim_box .7s steps(4) infinite
}

@keyframes fishSwim_box {
    0%,50%,100% {
        transform: translateY(0)
    }

    25% {
        transform: translateY(-5px)
    }

    75% {
        transform: translateY(5px)
    }
}

.fishing .gate_container .img_fish_1 {
    width: 192px;
    height: 132px;
    -webkit-animation: fish_1 .8s steps(4) infinite;
    -ms-animation: fish_1 .8s steps(4) infinite;
    animation: fish_1 .8s steps(4) infinite
}

@keyframes fish_1 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -768px 0
    }
}

@-webkit-keyframes fish_1 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -768px 0
    }
}

@-ms-keyframes fish_1 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -768px 0
    }
}



/*
    *** 레이아웃 작업 0613
*/
/* 공통 absolute */
.cl_absolute {position: absolute;}

.cl_mainContainer {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 1;

}
.cl_mainContainer:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    z-index: -1
}

/*.checkContainer .gate_container .cl_mainContainer:before {*/
/*    background: url(../../contents/images/background/bg_check_change.png) center center/cover no-repeat*/
/*}*/


.isActiveContainer .gate_container .cl_mainContainer {
    top: auto;
    display: flex;
    flex-direction: column;
    width: 660px;
    height: 500px;
    border-radius: 30px
}

.isActiveContainer .gate_container .cl_mainContainer:before {
    content: none
}

.cl_mainContainer .gate_title_title {
    position: absolute;
    width: 100%;
    line-height: 1;
    text-align: center;
    color: #5b3c17;
    opacity: 0;
    font-size: 47px;
    font-family: YGJAL
}

.cl_mainContainer .gate_sub_title {
    position: absolute;
    top: 98px;
    width: 100%;
    line-height: 1;
    text-align: center;
    color: #ae7c65;
    font-size: 26.46px;
    font-family: 'NotoB';
}

.cl_mainContainer .gate_title_title .orange {
    color: #ff5d00;
}

.checkContainer .gate_container .cl_mainContainer .gate_title_title {
    top: 33px;
    text-shadow: 4px 0 0 #fff,-4px 0 0 #fff,0 4px 0 #fff,0 -4px 0 #fff,3px 3px #fff,-3px -3px 0 #fff,3px -3px 0 #fff,-3px 3px 0 #fff,3px 3px 5px rgba(0,0,0,0.3)
}

.checkContainer .gate_container .cl_mainContainer .gate_title_container:before {
    background: url(../../contents/images/background/bg_check.png) center bottom/contain no-repeat
}


.cl_mainContainer .quizList {
    display: flex;
    top: 164px;
    left: 50%;
    max-width: 730px;
    width: 100%;
    transform: translateX(-50%);
}

.cl_mainContainer .quizList li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 206px;
    cursor:pointer;
    background: url(../../contents/images/background/bg_quiz_default.png) center bottom/contain no-repeat;
}
.cl_mainContainer .quizList li .count {
    margin-bottom: 25px;
    color: #7c4500;
    font-size: 41px;
    text-align: center;
    font-family: YGJAL;
}

.cl_mainContainer .quizList li .checked {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 44px;
    color: #fff;
    font-size: 20px;
    background: #7c4500;
    border-radius: 22px;
    cursor:pointer;
}

.cl_mainContainer .quizList li .checked .circle {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-right: 5px;
    background-color: #fff;
    border-radius: 100%;
    cursor: pointer;
}

/* active붙었을때 */
.cl_mainContainer .quizList li.active .checked  {
    background: #f263a1;
}
.cl_mainContainer .quizList li.active .checked .circle:before {
    content: url("../../contents/images/icon/icon_chk.png");
    width: 31px;
    height: 27px;
    position: absolute;
    top: -25%;
}
.cl_mainContainer .quizList li.active {
    background: url(../../contents/images/background/bg_quiz_active.png) center bottom/contain no-repeat;
}

.checkContainer .gate_container .cl_mainContainer .gate_btn {top: 400px;}
.gate_container .cl_mainContainer .gate_btn {
    position: absolute;
    left: 475px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 216px;
    height: 78px;
    opacity: 0;
    font-size: 35px;
    border-radius: 40px;
    background-color: #f263a1;
    color: #fff;
    font-family: YGJAL;
    box-sizing: border-box;
    cursor: pointer;
    box-shadow: 7px 6px 18px -6px rgba(110,110,110,0.61);
}
.gate_container .cl_mainContainer .gate_btn span {margin-right: 15px; cursor:pointer;}
.gate_container .cl_mainContainer .gate_btn:after {
    content: url("../../contents/images/icon/startArrow.png");
    width: 55px;
    height: 56px;
}

.checkContainer .gate_container .cl_mainContainer .gate_btn:hover {background-color:#C349C9;}
.checkContainer .gate_container .cl_mainContainer .gate_btn:hover:after {
    content: url("../../contents/images/icon/startArrowOver.png");
    width: 55px;
    height: 56px;
}




.gate_container .cl_mainContainer .worksheet {
    z-index: 1;
    right: 50%;
    bottom: 106px;
    transform:  translateX(50%);
}
.gate_container .cl_mainContainer .worksheet button,
.gate_container .cl_mainContainer .worksheet a {
    display: inline-block;
    width: 223px;
    height: 50px;
    background-color: #ae7c65;
    color: #fff;
    font-size: 20px;
    font-family: YGJAL;
    text-align: left;
    padding-left: 32px;
    padding-right: 25px;
    border-radius: 4px;
    cursor: pointer;
    box-sizing: border-box;
}

.gate_container .cl_mainContainer .worksheet .search {
    background: #ae7c65 url(../../contents/images/icon/icon_search.png) 15px center/22px auto no-repeat;
}
.gate_container .cl_mainContainer .worksheet .down {
    background: #ae7c65 url(../../contents/images/icon/icon_down.svg) 15px center/19px auto no-repeat;
}

.gate_container .cl_mainContainer .downloadBtn {background: none; box-sizing: border-box;}
.gate_container .cl_mainContainer .downloadBtn:before {content: none;}
.gate_container .cl_mainContainer .downloadBtn button:before, 
.gate_container .cl_mainContainer .downloadBtn a:before {
    content: attr(data-name);
    padding-left: 14px;
    display: flex;
    height: 100%;
    color: #fff;
    align-items: center;
    pointer-events: none;
}

/* 기존 애니메이션 숨김 */
.gate_container .gate_ani {display: none;}
.gate_container .gate_ani_Math {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.gate_container .gate_ani_Math .gate_ani_Math_cover {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

/* 칭찬스티커 */
header .cl_sticker {
    position: absolute;
    right:119px;
    top: 0;
    cursor: pointer;
}

header .cl_sticker img {
    display: block;
    position: absolute;
}

header .cl_sticker .last {
    display: none;
}

header .cl_sticker:hover .last {
    display: block;
}




/* 칭찬하기 팝업창 */
.cl_modalBg {
    display: none;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}
.cl_modalBg.show {
    display: block;
}
.cl_modalBg .modalInner {
    overflow: hidden;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%, -50%);
    width: 720px;
    height: 420px;
    border-radius: 10px;
    background-color: #fff;
}
.cl_modalBg .modalInner .modalTop {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    width: 35px;
    height: 32px;
    background-color: #f77c19;
    border-radius: 0 0 0 15px;
}
.cl_modalBg .modalInner .modalTop .closeBtn {
    width: 22px;
    height: 25px;
    background: url("../../contents/images/icon/icon_closeBtn.png") center/16px no-repeat;
}
.cl_modalBg .modalInner .modalBody {
    position: absolute;
    top: 43px;
    left: 50%;
    transform: translateX(-50%);
    width: 632px;
    height: 300px;
    background: url("../../contents/images/background/bg_math_board.png") center no-repeat;
}

.cl_modalBg .modalInner .modalBody .mathBoardInner {
    position: absolute;
    top: 50%;
    left: 42px;
    width: 100%;
    transform: translateY(-50%);
}

.cl_modalBg .modalInner .modalBody .mathBoardInner .mathTxt {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 52px;
    color: #fff;
    font-family: YGJAL;
    text-align: center;
}
.cl_modalBg .modalInner .modalBody .mathBoardInner .mathTxt:before {
    content: '';
    position: absolute;
    top:50%;
    left: 0;
    transform: translateY(-100%);
    width: 78px;
    height: 85px;
    background: url("../../contents/images/background/bg_math_flower.png") center no-repeat;
}

.cl_modalBg .modalInner .modalBody .mathBoardInner .mathTxt span {
    display: none;
    padding-left: 20px;
    width: 100%;
}

.cl_modalBg .modalInner .modalBody .mathBoardInner .mathTxt span.on {
    display: inline-block;
}

.cl_modalBg .modalInner  .praiseAni {
    position:absolute;
    bottom: 28px;
    right: 46px;
    width:300px;
    height:260px;
    background-image:url("../../contents/images/background/speedQuiz_done_sprite.png"); background-repeat: no-repeat;}