@charset "utf-8";

body.PLAY_MOVE_MOTION { pointer-events: none; }
body.userNone { user-select: none; }

.hide { opacity: 0; pointer-events: none; }
.fraction_page {
    font-family: "NanumSquareRoundB";
}

.act_title {
    margin-top: 60px;
    margin-left: 60px;
    color: #000;
}

.contPage {position: relative; display: none;}

.numberPage.on {display: flex;justify-content: start;align-items: center;margin-top: 167px;margin-left: 157px;gap: 29px;}
.numberPage .numBox {display: flex;gap: 58px;align-items: center; width: 327px;}
.numberPage .numBox .box {width: 123px;height: 123px;border-radius: 20px;text-align: center;display: flex;justify-content: center;align-items: center;color: #000;background-color: #f0f0f0;position: relative;font-family: "NanumSquareRoundEB";}
.numberPage .numBox .box.green {
    border: 4px solid #25ad7a;
    background: #d7faef;
    color: #007e6b;
}
.numberPage .numBox .box.pink {
    border: 4px solid #e584ef;
    background: #f9ecfa;
    color: #bd108e;
}
.numberPage .numBox .box.blue {
    border: 4px solid #42aaff;
    background: #d9eeff;
    color: #2b60cf;
}
.numberPage .numBox .box .num {font-size: 110px;width: 100%;height: 100%;display: inline-block;cursor: pointer;line-height: 128px;}

.numberPage .numBox .bunsu {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 35px;}

.numberPage .numBox .bar {width: 135%;height: 6px;background-color: #000;border-radius: 20px;}

.numberPage .sign_box { width: 150px; height: 150px; border-radius: 50%; text-align: center; background-color: #e8e8e8; margin: 0 45px; cursor: pointer; position: relative; border: 1px solid #000;}
.sign_box > span {width: 100%;height: 100%;display: inline-block;cursor: pointer;font-size: 130px;color: #000;line-height: 110px;font-family: "NanumSquareRoundEB";line-height: 156px;}

.keyPad {display: flex;gap: 14px;position: absolute;width: 317px;flex-wrap: wrap;padding: 18px;background-color: #50a7ff;border-radius: 30px;display: none;z-index: 1;left: 50%;transform: translateX(-50%);top: 130px;}
.keyPad.on { display: flex; } 
.keyPad button {width: 45px;height: 45px;text-align: center;line-height: 49px;font-size: 28px;background-color: #f0f0f0;border-radius: 15px;cursor: pointer;box-shadow: 0px 3px 0px rgb(255 255 255 / 50%);color: #000;}
.keyPad button.none { font-size: 20px; } 
.keyPad button.off { opacity: 0.3; pointer-events: none; } 

.sign_pad {display: flex;gap: 13px;width: 153px;padding: 20px;background-color: #50a7ff;border-radius: 30px;position: absolute;top: 154px;left: 50%;transform: translateX(-50%);display: none;}
.sign_pad.on {display: flex;}
.sign_pad button {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 54px;
    color: #000;
    font-size: 40px;
    background-color: #f0f0f0;
    border-radius: 50%;
    box-shadow: 0px 3px 0px rgb(255 255 255 / 50%);
    font-family: "NanumSquareRoundEB";
    }

.next_btn {
    position: absolute;
    bottom: -161px;
    right: 41px;
    width: 124px;
    height: 43px;
    font-family: "JalNan";
    font-size: 20px;
    color: #fff;
    padding-bottom: 4px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 5px;
    background: url(../images/common/button-apply-hover.png) no-repeat center / contain;
    display: none;
}
.next_btn.on {display: block;}

.stickPage.on {display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 10px;margin-top: 75px; font-family: "NanumSquareRoundEB";}

.stickPage .stick_box {width: 90%;height: 150px;display: flex;gap: 30px;flex-direction: row;position: relative;background: #dff2ff;padding: 10px 20px;box-sizing: border-box;border-radius: 20px;}
.stickPage .stick_box.bot_box {
    height: 185px;
    background: #ffe7df;
}
.stickPage .stick_box.mid_box {
    background: #dfe2ff;
}
.stickPage .stick_box .bunsu_box {padding: 0;text-align: center;display: flex;justify-content: center;align-items: center;color:#000;/* background-color:#fff; */font-size: 50px;width: 135px;height: 130px;border-radius: 30px;}
.stickPage .stick_box .bunsu_box .bunsu {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 55px;}
.stickPage .stick_box .bunsu_box .bunsu .bar {    width: 75%;
    height: 4px;
    background-color: #000;}
.stickPage .stick_box .bunsu_box .bunsu.off { display: none;}
.stickPage .stick_box .bunsu_box .natural.off { display: none;}

.stickPage .stick_box .nat_box,
.stickPage .stick_box .bunsu_stick {width: 42%;position: relative;display: grid;align-content: center;justify-items: center;background: transparent;border-radius: 20px;z-index: 0;}
.stickPage .stick_box .nat_box::before {
    content: '';
    width: 480px;
    height: 130px;
    background-color: #fff;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.stickPage .stick_box.bot_box .nat_box::before {
    height: 170px;
}
.stickPage .stick_box::before {
    content: '';
    width: 470px;
    height: 130px;
    background-color: #fff;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}
.stickPage .stick_box.bot_box::before {
    height: 170px;
}

.stickPage .natDragBox {--gap: 5px;--minus-gap: 4px;display: grid;align-items: center;align-content: center;justify-items: center;justify-content: center;grid-auto-flow: revert;grid-auto-rows: minmax(0px, 0);grid-gap: var(--gap);}

/* 흰배경색 */

/* .stickPage .stick_box.top_box::after, .stickPage .stick_box.top_box::before, .stickPage .stick_box.mid_box::after, .stickPage .stick_box.mid_box::before, .stickPage .stick_box.bot_box::after, .stickPage .stick_box.bot_box::before  {
    content: "";
    width: 42%;
    position: absolute;
    left: 161px;
    top: 0px;
    height: 150px;
    background-color: #E4E4E4;
}

.stickPage .stick_box.top_box::after, .stickPage .stick_box.mid_box::after, .stickPage .stick_box.bot_box::after { 
    left: 671px; 
    z-index: -1;
}
.stickPage .stick_box.mid_box::before, .stickPage .stick_box.mid_box::after {
    background-color: #CEBAFB; 
} */

.stickPage .stick {width: 180px;height: 45px;justify-content: center;align-items: center;font-size: 30px;color: #000;left: 133px;top: 50px;display: flex;}
.stick > span { width: 100%; height: 100%; background-color: #fff; }
.stickPage .stick.first { background-color: #dff2ff; border: 1px solid #b0defe; }
.stickPage .stick span.first:not(:last-of-type), .stickPage .stick.first span:not(:last-of-type) { border-right: 2px dashed #b0defe; }
.stickPage .stick span.first.on { background-color: #dff2ff; }
.stickPage .stick.second { background-color: #dfe2ff; border: 1px solid #a4acfd; }
.stickPage .stick span.second:not(:last-of-type), .stickPage .stick.second span:not(:last-of-type) { border-right: 2px dashed #a4acfd; }
.stickPage .stick span.second.on { background-color: #dfe2ff; }
.stickPage .stick.last { background-color: #ffe7df; border: 1px solid #ffbfaa; }
.stickPage .stick span.last:not(:last-of-type), .stickPage .stick.last span:not(:last-of-type) { border-right: 2px dashed #ffbfaa; }
.stickPage .stick span.last.on { background-color: #ffe7df; }

.natDragBox { transform: translateX(calc(var(--hundred-model-box-left) * (var(--gap) / 2))); }
.natDragBox[data-length="1"] { --hundred-model-box-left: 0; }
.natDragBox[data-length="2"] { --hundred-model-box-left: 1; }
.natDragBox[data-length="3"] { --hundred-model-box-left: 2; }
.natDragBox[data-length="4"] { --hundred-model-box-left: 3; }
.natDragBox[data-length="5"] { --hundred-model-box-left: 4; }
.natDragBox[data-length="6"] { --hundred-model-box-left: 5; }
.natDragBox[data-length="7"] { --hundred-model-box-left: 6; }
.natDragBox[data-length="8"] { --hundred-model-box-left: 7; }
.natDragBox[data-length="9"] { --hundred-model-box-left: 8; }
.natDragBox[data-length="10"] { --hundred-model-box-left: 9; }
.natDragBox[data-length="11"] { --hundred-model-box-left: 10; }
.natDragBox[data-length="12"] { --hundred-model-box-left: 11; }
.natDragBox[data-length="13"] { --hundred-model-box-left: 12; }
.natDragBox[data-length="14"] { --hundred-model-box-left: 13; }
.natDragBox[data-length="15"] { --hundred-model-box-left: 14; }
.natDragBox[data-length="16"] { --hundred-model-box-left: 15; }
.natDragBox[data-length="17"] { --hundred-model-box-left: 16; }
.natDragBox[data-length="18"] { --hundred-model-box-left: 17; }
.natDragBox[data-length="19"] { --hundred-model-box-left: 18; }
  
.natDragBox > .stick { transform: translateX(calc(var(--hundred-model-left) * var(--minus-gap))); }
.natDragBox > .stick:nth-child(1) { --hundred-model-left: 0; z-index: 19;}
.natDragBox > .stick:nth-child(2) { --hundred-model-left: 1; z-index: 18;}
.natDragBox > .stick:nth-child(3) { --hundred-model-left: 2; z-index: 17;}
.natDragBox > .stick:nth-child(4) { --hundred-model-left: 3; z-index: 16;}
.natDragBox > .stick:nth-child(5) { --hundred-model-left: 4; z-index: 15;}
.natDragBox > .stick:nth-child(6) { --hundred-model-left: 5; z-index: 14;}
.natDragBox > .stick:nth-child(7) { --hundred-model-left: 6; z-index: 13;}
.natDragBox > .stick:nth-child(8) { --hundred-model-left: 7; z-index: 12;}
.natDragBox > .stick:nth-child(9) { --hundred-model-left: 8; z-index: 11;}
.natDragBox > .stick:nth-child(10) { --hundred-model-left: 9; z-index: 10;}
.natDragBox > .stick:nth-child(11) { --hundred-model-left: 10; z-index: 9;}
.natDragBox > .stick:nth-child(12) { --hundred-model-left: 11; z-index: 8;}
.natDragBox > .stick:nth-child(13) { --hundred-model-left: 12; z-index: 7;}
.natDragBox > .stick:nth-child(14) { --hundred-model-left: 13; z-index: 6;}
.natDragBox > .stick:nth-child(15) { --hundred-model-left: 14; z-index: 5;}
.natDragBox > .stick:nth-child(16) { --hundred-model-left: 15; z-index: 4;}
.natDragBox > .stick:nth-child(17) { --hundred-model-left: 16; z-index: 3;}
.natDragBox > .stick:nth-child(18) { --hundred-model-left: 17; z-index: 2;}
.natDragBox > .stick:nth-child(19) { --hundred-model-left: 18; z-index: 1;}

/* motion */
.bot_box .bunsu_stick .stick { transition: 0.4s; opacity: 0; pointer-events: none; position: absolute;
    top: calc(50% - (45px / 2)); }
.bot_box .nat_box .natDragBox {
    transition: 0.4s;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: calc(50% - (5px * var(--hundred-model-box-left)) / 2);
    }
.bot_box .nat_box .natDragBox .stick { transition: 0.4s; }
.bot_box .nat_box .natDragBox .stick.off { opacity: 0; }
.bot_box .nat_box .natDragBox.on, .bot_box .bunsu_stick .stick.on { opacity: 1; pointer-events: auto; }
.stickPage .stick_box.bot_box .natDragBox:nth-of-type(1) { left: calc(0px + var(--hundred-model-box-left) * 3px); transform: none; }
.stickPage .stick_box.bot_box .natDragBox:nth-of-type(2) {left: calc(230px + var(--hundred-model-box-left) * 3px);transform: none;}
.stickPage .stick_box.bot_box .stick:nth-of-type(1), .stickPage .stick.completeStick { left: 20px; }
.stickPage .stick_box.bot_box .stick:nth-of-type(2) { left: 250px; }

.stickPage .stick.minusStick { top: calc(50% - (45px / 2)) }
.stickPage .stick.minusStick.finish {top: 10px;left: 508px;}
.stickPage .stick.minusFullStick { top: 10px; left: 20px; }
.stickPage .stick.minusFullStick.finish { left: calc(50% - 105px); top: calc(50% - (45px / 2)); }
.stickPage .stick.completeStick.motion1 { top: 10px; }
.stickPage .stick.completeStick.motion2 { left: -200px; top: calc(50% - (45px / 2)); }
.stickPage .stick_box.bot_box .natDragBox:nth-of-type(1).finish, .stickPage .stick_box.bot_box .natDragBox:nth-of-type(2).finish { left: calc(50% - 105px);}
.stickPage .stick_box.bot_box .stick:nth-of-type(1).finish { left: calc(50% - 105px);}

/* motion end */

.retry_btn, .goback_btn {
    width: 124px;
    height: 43px;
    font-family: "JalNan";
    font-size: 20px;
    color: #000;
    padding-bottom: 4px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 5px;
    background: url(../images/common/home.svg) no-repeat center / contain;
    text-align: center;
    cursor: pointer;
    position: absolute;
    bottom: -70px;
    right: 41px;
    display: none;
}
.retry_btn {
    color: #fff;
    background: url(../images/common/button-apply-hover.png) no-repeat center / contain;
    right: 175px;
}
.retry_btn.on, .goback_btn.on {display: block;}


.stickPage .stick_box .bunsu_box.lastBunsu {color: transparent;pointer-events: none;user-select: none;background-color: #fff;transition: 0.4s;margin-top: -2px;height: 170px;}
.stickPage .stick_box .bunsu_box.lastBunsu .bar { background-color: transparent; transition: 0.4s; }
.stickPage .stick_box .bunsu_box.lastBunsu.on {color: #000;pointer-events: auto;user-select: auto;}
.stickPage .stick_box .bunsu_box.lastBunsu.on .bar { background-color: #000; }

.dragItem { cursor: pointer; }

.symbol { position: absolute; left: 114px; color: #fff; background-color: #6034C7; width: 35px; height: 35px; border-radius: 50%; line-height: 30px; text-align: center; font-size: 35px; }
.symbol:nth-of-type(1) { top: 163px; }
.symbol:nth-of-type(2) { top: 368px }



/* 후반 추가 작업 */

/* 계산 결과 값 자연수 노출 */
.nat_box .nat_number {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 60px;
    color: #000;
    display: none;
}
.nat_box .nat_number.on {display: block;}
/* 드래드 할 수 있는 칸 제한 하기 - 해당 순서인 .dragItem에 candrag 클래스 추가 */
.canDragBox {pointer-events: none;}

.canDragBox.canDrag {pointer-events: all;} 

/* 드래그 유도 가이드 애니메이션 */
.canDragBox.canDragMotion::after {
    content:"";
    width: 40px;
    height: 55px;
    background-image: url(../images/common/94ae24cb9f1e52e2bd2e.png);
    background-size: contain;
    position: absolute;
    top: 0px;
    left: 220px;
    z-index: 99;
    animation: guide-hand 2s infinite;
    background-repeat: no-repeat;
    /* animation-fill-mode: i; */
}
.bunsu_stick .canDragBox.canDragMotion::after {
    top: 40px;
    left: 350px;
}
@keyframes guide-hand {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
        /* z-index: 2; */
    }
    50% {
        transform: translate(-5px, 30px) scale(0.95);
        opacity: 1;
        /* z-index: 2; */
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
        /* z-index: 0; */
    }
}


/* 계산 결과 값 분수 노출 */
.bunsu_stick .bunsu_number {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 60px;
    color: #000;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.bunsu_stick .bunsu_number .bar {width: 135%;height: 6px;background-color: #000;border-radius: 20px;}
.bunsu_stick .bunsu_number.on {display: flex;}


/* 박만구 글꼴 영역이슈로 위치 조절함 */
.bunsu_stick .bunsu_number .top{
    position: relative;
    top: 6px;
}
.stickPage .stick_box .bunsu_box .bunsu .top {
    position: relative;
    top: 6px;
}