* {margin:0; padding:0; border:0;}
a {text-decoration:none; color:#000000;}
a:visited {text-decoration:none; color:#000000;}
a:active {text-decoration:none; color:#000000;}
a:link {text-decoration:none; color:#000000;}
ul, ol, dl {list-style: none;}
table {border-collapse: collapse;}
:focus {outline:none;}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
img {
    user-select: none;
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-tap-highlight-color : transparent;
}
body,html { width: 100%; height: 100vh; overflow: hidden;}

.pageOutWrap {position: absolute;  display: flex; align-items: center; gap: 121px; width: 920px; height: 400px; box-sizing: border-box; background: url("../images/background.png") no-repeat;background-size: contain;  overflow: hidden; transform-origin: top left;}

/*팝업*/
.alertBg {display: none; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 9999;}
.alertBg .alert { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 235px; height: 180px; background-color: #ffffff; font-size: 16px;  font-family: 'SUIT-B'; color: #232426; border-radius: 10px; }
.alertBg .alert img { width: 31px; margin-bottom: 15px;}
.alertBg .alert .closeBtn { font-size: 14px; color: #fff; padding: 8px 20px; box-sizing: border-box; background-color: #232426; margin-top: 15px;border-radius: 15px; cursor: pointer;}


/*색선택팝업*/
.colorAlert {display: none; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 9999;}
.colorAlert .alert { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 235px; height: 180px; background-color: #ffffff; font-size: 16px;  font-family: 'SUIT-B'; color: #232426; border-radius: 10px; }
.colorAlert .alert img { width: 31px; margin-bottom: 15px;}
.colorAlert .alert .closeBtn { font-size: 14px; color: #fff; padding: 8px 20px; box-sizing: border-box; background-color: #232426; margin-top: 15px;border-radius: 15px; cursor: pointer;}



/*******************rocket******************/
.rocket { position: relative; box-sizing: border-box; background: url("../images/rocket.png")no-repeat; width: 271px; height: 309px; background-size: 271px 309px; margin-top: -30px; margin-left: 41px; box-sizing: border-box; }
.rocketImg { position: absolute; bottom: 0; left: 0;}
.rocketImg img  { width: 364px; height: 59px;}
.rocket ul {display: flex; flex-wrap: wrap; width: 100%; height: 100%;}
.rocket ul li { position: absolute; cursor: pointer; display: flex; align-items: center; justify-content: center; cursor: pointer;  }
.rocket ul li .wrap:focus {outline:none;}

.rocket ul li.drop { filter: drop-shadow(-3px 3px 5px  #1e6efa); z-index: 9; }
.rocket ul li.drop .wrap { position: relative;  filter: drop-shadow(3px -1px 5px  #1e6efa); z-index: 9; }
.rocket ul li.done { /*pointer-events: none !important;*/ }
.rocket ul li:nth-child(1) { top: 17px; left: 78px; }
.rocket ul li:nth-child(2) { top: 71px; left: 58px; }
.rocket ul li:nth-child(3) { top: 71px; right: 59px; }
.rocket ul li:nth-child(4) { top: 111px; left: 106.5px; }
.rocket ul li:nth-child(5) { top: 125px; left: 50px; }
.rocket ul li:nth-child(6) { top: 125px; right: 50px; }
.rocket ul li:nth-child(7) { top: 141px; left: 2px; }
.rocket ul li:nth-child(8) { top: 181px; left: 49px; }
.rocket ul li:nth-child(9) { top: 182px; left: 106px; }
.rocket ul li:nth-child(10) { top: 181px; right: 50px; }
.rocket ul li:nth-child(11) { top: 141px; right: 1px; }
.rocket ul li:nth-child(12) { top: 216px; left: 2px; }
.rocket ul li:nth-child(13) { top: 237px; left: 51px; }
.rocket ul li:nth-child(14) { top: 245px; left: 105px; }
.rocket ul li:nth-child(15) { top: 237px; right: 52px; }
.rocket ul li:nth-child(16) { top: 216px; right:2px; }

.rocket ul li img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); vertical-align: top;}
.rocket ul li:nth-child(1) img { width: 115px; height: 53px;  }
.rocket ul li:nth-child(2) img { width: 77px; height: 53px; }
.rocket ul li:nth-child(3) img { width: 76px; height: 53px; }
.rocket ul li:nth-child(4) img { width: 58px; height: 59px; z-index: 2; }
.rocket ul li:nth-child(5) img { width: 85px; height: 55px; }
.rocket ul li:nth-child(6) img { width: 85px; height: 55px; }
.rocket ul li:nth-child(7) img { width: 52px; height: 88px; }
.rocket ul li:nth-child(8) img { width: 82px; height: 55px; }
.rocket ul li:nth-child(9) img { width: 59px; height: 62px; }
.rocket ul li:nth-child(10) img { width: 81px; height: 55px; }
.rocket ul li:nth-child(11) img { width: 53px; height: 88px; }
.rocket ul li:nth-child(12) img { width: 59px; height: 90px; }
.rocket ul li:nth-child(13) img { width: 56px; height: 68px; }
.rocket ul li:nth-child(14) img { width: 61px; height: 60px; }
.rocket ul li:nth-child(15) img { width: 54px; height: 68px; }
.rocket ul li:nth-child(16) img { width: 59px; height: 90px; }

.rocket ul li:nth-child(2) .num {left: 54%; }
.rocket ul li:nth-child(3) .num {left: 48%; }
.rocket ul li:nth-child(4) .num {top: 52%; }
.rocket ul li:nth-child(5) .num {left: 49%;}
.rocket ul li:nth-child(6) .num {left: 52%; }
.rocket ul li:nth-child(7) .num {left: 53%; top:56%;}
.rocket ul li:nth-child(8) .num {left: 51%;}
.rocket ul li:nth-child(9) .num {top: 55%; }
.rocket ul li:nth-child(10) .num {left: 52%;}
.rocket ul li:nth-child(11) .num {left: 48%; top:56%;}
.rocket ul li:nth-child(12) .num {top:51%;}
.rocket ul li:nth-child(13) .num {left: 53%;}
.rocket ul li:nth-child(15) .num {left: 46%;}
.rocket ul li:nth-child(16) .num {top: 51%;}

.rocket .num { position: absolute; z-index: 3;top: 53%;left: 50%;transform: translate(-50%, -50%); line-height: 1;}
.num {display: flex;align-items: center;justify-content: center;font-family: "SCDream5";font-size: 14px;border-radius: 50%;color: #fff;width: 28px;height: 28px;background: #00a0ff;}
.titleArea .num {width: 40px; height: 40px; font-size: 24px;}

.rocket ul li.red img { filter: invert(38%) sepia(78%) saturate(2630%) hue-rotate(351deg) brightness(94%) contrast(95%); }
.rocket ul li.orange img { filter: invert(55%) sepia(96%) saturate(2054%) hue-rotate(7deg) brightness(102%) contrast(102%); }
.rocket ul li.yellow img { filter: invert(89%) sepia(37%) saturate(3344%) hue-rotate(0deg) brightness(103%) contrast(106%);}
.rocket ul li.green img { filter: invert(59%) sepia(100%) saturate(324%) hue-rotate(36deg) brightness(94%) contrast(101%); }
.rocket ul li.skyBlue img { filter: invert(72%) sepia(58%) saturate(3785%) hue-rotate(169deg) brightness(93%) contrast(88%); }
.rocket ul li.blue img { filter: invert(36%) sepia(51%) saturate(995%) hue-rotate(169deg) brightness(95%) contrast(92%); }
.rocket ul li.purple img { filter: invert(22%) sepia(20%) saturate(5112%) hue-rotate(258deg) brightness(89%) contrast(103%); }

.rocket ul li.gray img { filter: invert(77%) sepia(4%) saturate(13%) hue-rotate(339deg) brightness(106%) contrast(93%); }


.kidImg { position: absolute; bottom: 31px; left: 318px;}
.kidImg img { width: 72px;}

    /*******************문제영역******************/
.quesArea { position: relative; width: 435px; height: 340px; }

.quesArea .default { display: flex; align-items: center; justify-content: center; flex-direction: column; background: #fff; height: 100%;  border-radius: 16px;}
.quesArea .default .text { text-align: center; font-family: 'SCDream5'; font-size: 24px; }
/*.quesArea .startButton { display: flex; align-items: center; justify-content: center; width: 152px; height: 38px; font-family: "SCDream5"; font-size: 16px; color: #232426; border-radius: 25px; background: #ffb400; cursor: pointer; }*/

.quesArea .question { position: relative; display: none; height: 300px; background: #fff;
    border-radius: 16px; padding: 20px; box-sizing: border-box; }
.quesArea .question.wrong:before { content: ''; position: absolute; top: 0; left: 0; background: url("../images/checkIcon.png")no-repeat; width: 100px; height: 65px; background-size: 100px 65px; }
.quesArea .question.correct:before { content: ''; position: absolute; top: 0; left: 0; background: url("../images/correctIcon.png")no-repeat; width: 84px; height: 77px; background-size: 84px 77px; }
.quesArea .titleArea {display: flex; gap: 11px;  margin-bottom: 3px;}
.quesArea .titleArea .title { flex: 1; font-family: "SCDream5"; font-size: 24px;}
.quesArea .bottomArea {display: flex; flex-direction: column; align-items: flex-end; padding-right:110px; box-sizing: border-box;}
.quesArea .bottomArea .ques { display: flex; align-items: center; justify-content: center; /*width: 170px;*/ height: 87px; margin-bottom: 12px; border-bottom: 3px solid #000; padding-bottom: 9px; }
.quesArea .bottomArea .ques td{ font-family: "SCDream5"; font-size: 28px; color: #232426; width: 40px; height: 50px; text-align: center; }
.quesArea .bottomArea .ques td:last-child{ text-align: right; letter-spacing: 20px; width: 120px;}
.quesArea .bottomArea .ques.short td:last-child{width: 90px;}
.quesArea .bottomArea .ques td .xText{ font-size: 24px; }
.quesArea .bottomArea .ques img {width: 100%; height: 100%; object-fit: contain;}
.quesArea .bottomArea .inputWrap {width: 160px; height: 53px; border: 2px solid #8d9299; border-radius: 8px; background: #f8f8f8; box-sizing: border-box; /*padding-left: 46px;*/ margin-right:-3px;}
.quesArea .bottomArea .inputWrap.four {width: 177px;position: relative; /*left: -4px;*/ /*padding-left: 22px;*/}
.quesArea .bottomArea .inputWrap.two {/*padding-left: 84px;*/}
.quesArea .bottomArea input {font-family: "SCDream5"; font-size: 28px; letter-spacing: 20px; background: transparent; height: 100%; width:100%; text-align:right;}
.quesArea .bottomArea .inputWrap.wrong { background: #fff4f3; border-color: #eb1807; color: #eb1807;}

/*버튼*/
.quesArea .showButton { position: absolute; bottom: -52px; right: 0; display: flex; align-items: center; justify-content: center; width: 151px; height: 38px; border: 1px solid #b0b6c0; background: #fff;
    font-family: "SCDream5"; font-size: 16px; color: #232426; border-radius: 25px; cursor: pointer; pointer-events: none; }
.quesArea .showButton.on { background: #ffb400; pointer-events: auto; }

/*답안보기 영역*/
.quesArea .ansArea { display: none; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; height: 0%;
     border: 2px solid #e0e2e6; border-radius: 16px; background: #fff; padding: 30px; box-sizing: border-box; z-index: 99;}
.quesArea .ansArea.on { display: block; animation: answerSlide 0.8s forwards; }
.quesArea .answerArea{ display: flex; gap: 20px; opacity: 0; }
.quesArea .answerArea:nth-child(1) { margin-bottom: 30px; }
.quesArea .answerArea:last-child {height: 160px; overflow-y: auto; }
.quesArea .answerArea img { width: 170px; }
.quesArea .answerTit {position: relative; top: 2px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 60px; height: 32px; border: 1px solid #1eaa58;
    font-family: "SCDream5"; color: #1eaa58; font-size: 16px; border-radius: 15px; background: #e5f4ea; margin-right: 5px;}
.quesArea .answerArea:last-child .answerTit {top: 10px; margin-right: 35px;}
.quesArea .ans { font-family: "SCDream5"; font-size: 26px; color: #232426; }

@keyframes answerSlide{
    0%{
        height: 0;
        opacity: 0;
    }
    100%{
        height: 100%;
        opacity: 1;
    }
}

/*팔레트*/
.palette {position: relative; top: -60px; display: none; align-items: center; justify-content: center; gap: 25px; width: 100%; height: 60px; background: #f3f3f3; border-radius: 16px; box-shadow: 2px 1px 1px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);}
.palette .color { position: relative; cursor: pointer; }
.palette .color.on:before { position: absolute; content: ''; top: 0; left: -2px; background: url("../images/color_on.png")no-repeat; width: 36px; height: 36px; background-size: 36px 36px; }
.palette .color img { width: 32px; }
.palette .color .spoidIcon { width: 55px; position: absolute; top: -23px; left: -1px; display: none;}
.palette .color.show .spoidIcon { display: block;}

/*포인터*/
.pointer { display: none; position: absolute; top: 75px; left: 200px; cursor: pointer; z-index: 5; animation: pointerClick 0.8s forwards infinite; }
.pointer.on { display: block; }
.pointer img { width: 45px; }

/*풀이창*/
.answerArea .solve td{ font-family: "SCDream5"; font-size: 28px; color: #232426; width: 50px; height: 50px; text-align: center; }
.answerArea .solve td:last-child{ text-align: right; letter-spacing: 20px; width: 120px;}
.question15  .answerArea .solve td:last-child{ width: 80px;}
.answerArea .solve td.xText{ font-size: 24px; }
.answerArea .solve .line{border-bottom: 3px solid #000;}
.answerArea .solve .left td{padding-right: 37px;}

.completeBalloon {display: none; position: absolute; left: 312px; bottom: 76px;}
.completeBalloon span {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 38%;
    width: 100%;
    transform: translate(-50%, -50%);
    font-family: "SCDream5";
    font-weight: 700;
    font-size: 16px;
    color: #5f4f42;
}

.completeBalloon img {zoom: 45%;}

@keyframes pointerClick {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}