* {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;}


.pageOutWrap {position: relative; 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;  }

/*팝업*/
.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; pointer-events: none; cursor: pointer; }
.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: 71.5px; left: 59px; }
.rocket ul li:nth-child(3) { top: 71.5px; right: 59px; }
.rocket ul li:nth-child(4) { top: 111px; left: 106.5px; }
.rocket ul li:nth-child(5) { top: 125px; left: 51px; }
.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: 50px; }
.rocket ul li:nth-child(9) { top: 181px; 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: 52px; }
.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); }
.rocket ul li:nth-child(1) img { width: 115px; height: 53px;  }
.rocket ul li:nth-child(2) img { width: 76px; height: 52px; }
.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: 84px; height: 54px; }
.rocket ul li:nth-child(6) img { width: 85px; height: 54px; }
.rocket ul li:nth-child(7) img { width: 52px; height: 87px; }
.rocket ul li:nth-child(8) img { width: 81px; 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: 87px; }
.rocket ul li:nth-child(12) img { width: 59px; height: 90px; }
.rocket ul li:nth-child(13) img { width: 54px; height: 68px; }
.rocket ul li:nth-child(14) img { width: 61px; height: 60px; }
.rocket ul li:nth-child(15) img { width: 53px; height: 68px; }
.rocket ul li:nth-child(16) img { width: 59px; height: 90px; }


.rocket ul li:nth-child(5) span { margin-left: -15px; }
.rocket ul li:nth-child(6) span { margin-right: -15px; }
.rocket ul li:nth-child(7) span { margin-top: 5px; margin-left: 5px; }
.rocket ul li:nth-child(8) span { margin-left: -15px; }
.rocket ul li:nth-child(9) span { margin-top: 5px; }
.rocket ul li:nth-child(10) span { margin-right: -15px; }
.rocket ul li:nth-child(11) span { margin-top: 5px; margin-right: 5px; }
.rocket ul li:nth-child(13) span { margin-left: 5px; }
.rocket ul li:nth-child(15) span { margin-right: 5px; }

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

.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; margin-bottom: 30px; }
.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.on {  margin-top: -15px; margin-bottom: 10px; }
.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: 25px;}
.quesArea .titleArea .title { flex: 1; font-family: "SCDream5"; font-size: 24px;}
.quesArea .bottomArea {display: flex; flex-direction: column; align-items: center;}
.quesArea .bottomArea .ques { display: flex; align-items: center; justify-content: center; width: 170px; height: 87px; margin-bottom: 12px; }
.quesArea .bottomArea .ques img {width: 100%; height: 100%; object-fit: contain;}
.quesArea .bottomArea input {font-family: "SCDream5"; font-size: 28px; width: 150px; height: 53px; border: 2px solid #8d9299; border-radius: 8px; padding: 15px 0; background: #f8f8f8; box-sizing: border-box; padding-left: 45px; letter-spacing: 4px; }
.quesArea .bottomArea input.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; }
.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: 20px; }
.quesArea .answerArea img { width: 170px; }
.quesArea .answerTit { 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 .ans { font-family: "SCDream5"; font-size: 26px; color: #232426; }

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

/*팔레트*/
.palette { display: none; align-items: center; justify-content: center; gap: 25px; width: 100%; height: 60px; background: #fff; border-radius: 16px; }
.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: 31px; }

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