.spaceAdventure .contentOutWrap {background-image:none !important;}


/*
    ********************************* 인트로 *********************************
*/
.spaceAdventure .gameIntro {position:relative; width:100%; height:100%; background-image:url("../images/spaceAdventure/bg_intro.png"); background-size:100% 100%;}
.spaceAdventure .studyText {
    position: absolute;
    top: 365px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 49px;
    color: #ffffff;
    font-family: Jalnan;
    white-space: nowrap;
    text-shadow: 1px 0px 0px #000084, 0px 1px 0px #000084, -1px 0px 0px #000084, 0px -1px 0px #000084, 1px 1px 0px #000084, -1px 1px 0px #000084, -1px -1px 0px #000084, 1px -1px 0px #000084,
    2px 0px 0px #000084, 0px 2px 0px #000084, -2px 0px 0px #000084, 0px -2px 0px #000084, 2px 2px 0px #000084, -2px 2px 0px #000084, -2px -2px 0px #000084, 2px -2px 0px #000084,
    3px 0px 0px #000084, 0px 3px 0px #000084, -3px 0px 0px #000084, 0px -3px 0px #000084, 3px 3px 0px #000084, -3px 3px 0px #000084, -3px -3px 0px #000084, 3px -3px 0px #000084;
}
.spaceAdventure .btnGameStart {position:absolute; left:50%; bottom:81px; transform:translateX(-50%); width:356px; height:146px; cursor:pointer; background-image: url("../images/spaceAdventure/btnStart.png");}
.spaceAdventure .btnGameStart:hover {background-image: url("../images/spaceAdventure/btnStart_over.png");}
.spaceAdventure .gameIntro .icon { position: absolute; top: 373px; left: 85px; background-repeat: no-repeat; width: 499px; height: 220px; }
.spaceAdventure .gameIntro .icon.grade3 { background-image: url("../images/spaceAdventure/introMo.png"); }
.spaceAdventure .gameIntro .icon.grade4 { background-image: url("../images/spaceAdventure/introTi.png"); }


/*
    ********************************* how to play *********************************
*/
.spaceAdventure .howToPlay {display:none; justify-content:center; align-items: center; position:absolute; top:0; left:0; width:100%; height:100%; z-index:20; background-color:rgba(0,0,0,0.8);}
.spaceAdventure .howToPlay .win {width:1310px; height:784px; background-image:url("../images/spaceAdventure/popup_start.png");}
.spaceAdventure .howToPlay .win .textCell {font-size:72px; color:#000000; font-family:PretendardB; text-align:center; margin-top:274px; margin-bottom:99px;}
.spaceAdventure .howToPlay .win .btnConfirm {width:256px; height:116px; margin:0 auto; cursor:pointer; background-image:url("../images/spaceAdventure/btnOk.png");}
.spaceAdventure .howToPlay .win .btnConfirm:hover {background-image:url("../images/spaceAdventure/btnOk_over.png");}




/*
    ********************************* 게임화면 *********************************
*/
.spaceAdventure .gamePage {display:none; width:100%; height:100%; background-image:url("../images/spaceAdventure/bg_game.png");}


/*
    *** 게임 상단 우주선과 몬스터
*/
.spaceAdventure .gamePage .monsterArea {position:relative; display:flex; align-items: center; height:220px;}

.spaceAdventure .gamePage .monsterArea .spaceship {position:absolute; top:42px; left:53px; z-index:11;}
.spaceAdventure .gamePage .monsterArea .spaceship .ship {position:relative; width:320px; height:160px; background-image:url("../images/spaceAdventure/spaceship.png");}
.spaceAdventure.grade4 .gamePage .monsterArea .spaceship .ship { background-image: url("../images/spaceAdventure/spaceship_grade4.png") }
.spaceAdventure .gamePage .monsterArea .spaceship .ship > span {position:absolute; top:80px; font-size:30px; font-family:Jalnan; opacity:0;}
.spaceAdventure .gamePage .monsterArea .spaceship .ship > span.on {top:0px; opacity:1; transition:all 0.8s ease-out;}
.spaceAdventure .gamePage .monsterArea .spaceship .ship > span.pink {left:40px; color:#F0F;}
.spaceAdventure .gamePage .monsterArea .spaceship .ship > span.green {right:80px; color:#0f0;}
.spaceAdventure .gamePage .monsterArea .spaceship .laser {display:none;}

.spaceAdventure .gamePage .monsterArea .spaceship.on .ship {background-image:url("../images/spaceAdventure/spaceship_on.png");}
.spaceAdventure.grade4 .gamePage .monsterArea .spaceship.on .ship { background-image: url("../images/spaceAdventure/spaceship_grade4_on.png") }
.spaceAdventure .gamePage .monsterArea .spaceship.on .laser {display:block; position:absolute; top:100px; left:250px; width:101px; height:14px; background-image:url("../images/spaceAdventure/laser.png");}

.spaceAdventure .gamePage .monsterArea .monsterOuter {position:relative; z-index:10; width:1400px; overflow: hidden; padding-left:435px; margin-top:20px;}
.spaceAdventure .gamePage .monsterArea .monsterWrap {display:flex; align-items: center; width:2000px;}
.spaceAdventure .gamePage .monsterArea .monsterWrap .monster {left:0; top:0;}
.spaceAdventure .gamePage .monsterArea .monsterWrap .monster:first-child {margin-left:0;}
.spaceAdventure .gamePage .monsterArea .monsterWrap .monster.pink {position:relative; width:120px; height:180px; margin-left:50px;}
.spaceAdventure .gamePage .monsterArea .monsterWrap .monster.pink:after {content:""; position:absolute; top:0; right:-26px; width:320px; height:180px; background-image:url("../images/spaceAdventure/monster_pink.png");}
.spaceAdventure .gamePage .monsterArea .monsterWrap .monster.pink.on:after {background-image:url("../images/spaceAdventure/monster_pink_on.png");}
.spaceAdventure .gamePage .monsterArea .monsterWrap .monster.green {position:relative; width:120px; height:230px; margin-left:50px;}
.spaceAdventure .gamePage .monsterArea .monsterWrap .monster.green:after {content:""; position:absolute; top:0; right:-56px; width:390px; height:230px; background-image:url("../images/spaceAdventure/monster_green.png");}
.spaceAdventure .gamePage .monsterArea .monsterWrap .monster.green.on:after {background-image:url("../images/spaceAdventure/monster_green_on.png");}

.spaceAdventure .gamePage .monsterArea .monsterWrap .monster.catch {left:-150px; top:10px; opacity:0 !important; transform:scale(0.1); transition:all 0.6s ease-out;}

.spaceAdventure .gamePage .monsterArea .gate {position:absolute; top:0; right:25px; width:310px; height:230px; background-image:url("../images/spaceAdventure/exitGate.png");}
.spaceAdventure .gamePage .monsterArea .gateHalf {position:absolute; top:0; right:25px; width:310px; height:230px; z-index:11; background-image:url("../images/spaceAdventure/exitGate_half.png");}


/*
    *** 게임화면 중간 활동영역
*/

/*게임영역 공통*/
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCellWrap {display: flex; justify-content: center; flex-wrap: wrap; gap: 16px;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell {
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 156px;
    height: 156px;
    font-size: 85px;
    color: #000000;
    font-family: Jalnan;
    z-index:1;
    border-radius:40px;
    cursor:pointer;
    background-color:rgba(57,0,124,0.6);
}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell:before {
    content: "";
    position: absolute;
    top: 2px;
    left:2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 38px;
    z-index: -1;
    box-shadow: inset 0 5px 0 rgba(255,255,255,0.4), inset 0 -5px 0 rgba(0,0,0,0.2);
}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c1:before {background-color: #FFAA00;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c2:before {background-color: #A3E00E;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c3:before {background-color: #4DB4F4;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c4:before {background-color: #B671FF;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c5:before {background-color: #3ED5E5;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c6:before {background-color: #F482F4;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c7:before {background-color: #35C93C;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c8:before {background-color: #FF8B00;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c9:before {background-color: #9F78FF;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c10:before {background-color: #FF6C6C;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c11:before {background-color: #2BBC96;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c12:before {background-color: #FFD039;}

.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c1:hover:before {background-color: #FF8000;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c2:hover:before {background-color: #7DD000;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c3:hover:before {background-color: #139AEE;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c4:hover:before {background-color: #A44EFF;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c5:hover:before {background-color: #00B1C3;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c6:hover:before {background-color: #F05FF0;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c7:hover:before {background-color: #00B008;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c8:hover:before {background-color: #FF6A00;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c9:hover:before {background-color: #935CFF;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c10:hover:before {background-color: #FF4C4C;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c11:hover:before {background-color: #009C76;}
.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.c12:hover:before {background-color: #FF9900;}

.spaceAdventure .gamePage .wordArea .wordSelectArea .alphabetCell.checked {color:transparent; pointer-events: none !important;}
.spaceAdventure .gamePage .wordArea.type1 .wordSelectArea .alphabetCell.checked:before {background-image:url("../images/spaceAdventure/blockX.png"); background-color:transparent; background-size: 100% 100%;}
.spaceAdventure .gamePage .wordArea.type2 .wordSelectArea .alphabetCell.checked:before {background-image:url("../images/spaceAdventure/blockX2.png"); background-color:transparent; bakcground-position:center; background-size: 100% 100%; }


.spaceAdventure .gamePage .wordArea .wordInputArea .wordKor {display:flex; justify-content: center; align-items: center; font-size:70px; color:#ffffff; font-family:Jalnan;}
.spaceAdventure .gamePage .wordArea .wordInputArea .blankCellArea {display:flex; justify-content: center; align-items: center; margin-top:35px;}
.spaceAdventure .gamePage .wordArea .wordInputArea .blankCellArea .blankCell {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    color: #ffffff;
    font-family: Jalnan;
    line-height:1;
    margin: 0 4px;
    cursor:pointer;
}
.spaceAdventure .gamePage .wordArea .wordInputArea .blankCellArea .blankCell.on:before {background-color:#ffffff;}
.spaceAdventure .gamePage .wordArea .wordInputArea .blankCellArea .textCell {display:flex; justify-content:center; align-items: flex-start; font-size:100px; color:#ffffff; font-family:Jalnan; line-height:1; margin:0 4px;}
.spaceAdventure .gamePage .wordArea .wordInputArea .blankCellArea .blankCell:before {content:""; position:absolute; bottom:0; left:0; width:100%; height:10px; border-radius:10px; background-color:#0049FF;}
.spaceAdventure .gamePage .wordArea .wordInputArea .blankCellArea.upper .blankCell:nth-child(1) { text-transform: uppercase; }


/*알파벳 선택유형*/
.spaceAdventure .gamePage .wordArea.type1 .wordInputArea .wordKor {height:190px;}
.spaceAdventure .gamePage .wordArea.type1 {display:flex; justify-content: space-between; align-items: center; padding:0 35px; box-sizing: border-box;}
.spaceAdventure .gamePage .wordArea.type1 .wordInputArea {width:1091px; height:550px; background-image:url("../images/spaceAdventure/wordInputBox1.png");}
.spaceAdventure .gamePage .wordArea.type1 .wordInputArea .blankCellArea .blankCell {width:122px; height:157px; font-size: 100px;}
.spaceAdventure .gamePage .wordArea.type1 .wordInputArea .blankCellArea .blankCell.small { width: 80px; }
.spaceAdventure .gamePage .wordArea.type1 .wordInputArea .blankCellArea .blankCell.spring { margin-right: 20px; }

.spaceAdventure .gamePage .wordArea.type1 .wordSelectArea {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 742px;
    height: 550px;
    background-image: url("../images/spaceAdventure/wordSelectBox1.png");
}
.spaceAdventure .gamePage .wordArea.type1 .wordInputArea .blankCellArea .textCell {height:157px;}


/*단어 선택유형*/
.spaceAdventure .gamePage .wordArea.type2 .wordInputArea .wordKor {height:126px;}
.spaceAdventure .gamePage .wordArea.type2 {display:flex; flex-direction: column; justify-content: space-between; align-items: center; height:550px;}
.spaceAdventure .gamePage .wordArea.type2 .wordInputArea {width:1850px; height:320px; background-image:url("../images/spaceAdventure/wordInputBox2.png");}
.spaceAdventure .gamePage .wordArea.type2 .wordInputArea .blankCellArea .blankCell {align-items:center; width:314px; height:130px; font-size: 75px;}
.spaceAdventure .gamePage .wordArea.type2 .wordInputArea .blankCellArea.fontS .blankCell { font-size: 65px;}
.spaceAdventure .gamePage .wordArea.type2 .wordInputArea .blankCellArea.longSentence .blankCell {width: 400px;}
.spaceAdventure .gamePage .wordArea.type2 .wordInputArea .blankCellArea.smallCell .blankCell {width: 280px;}
.spaceAdventure .gamePage .wordArea.type2 .wordInputArea .blankCellArea > div:last-child {margin-right:0;}
.spaceAdventure .gamePage .wordArea.type2 .wordSelectArea {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 1810px;
    height: 200px;
    background-image: url("../images/spaceAdventure/wordSelectBox2.png");
}
.spaceAdventure .gamePage .wordArea.type2 .wordInputArea .blankCellArea .textCell {align-items:center; height:130px; font-size: 75px; margin-right:30px;}

.spaceAdventure .gamePage .wordArea.type2 .wordSelectArea .alphabetCell {width: 340px; font-size:70px;}
.spaceAdventure .gamePage .wordArea.type2 .wordSelectArea .alphabetCellWrap.smallCell .alphabetCell {width: 280px; font-size:54px;}

.spaceAdventure .gamePage .wordArea.type2 .wordSelectArea .alphabetCellWrap.verySmallCell .alphabetCell {width: 240px; font-size:52px;}



/*
    *** 게임화면 하단 인디케이터 영역
*/
.spaceAdventure .gamePage .indicatorArea {display:flex; align-items:center; justify-content: space-between; margin-top:14px; padding-left:95px; padding-right:168px; box-sizing: border-box;}
.spaceAdventure .gamePage .indicatorArea .indicatorWrap {display:flex;}
.spaceAdventure .gamePage .indicatorArea .indicatorWrap .indicator {
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    font-size: 42px;
    color: rgba(255, 255, 255, 0.60);
    font-family:Jalnan;
    margin-right: 20px;
    background-image: url("../images/spaceAdventure/indicator.png");
}
.spaceAdventure .gamePage .indicatorArea .indicatorWrap .indicator:last-child {margin-right:0;}
/*.spaceAdventure .gamePage .indicatorArea .indicatorWrap .indicator:hover {background-image:url("../images/spaceAdventure/indicator_over.png");}*/
.spaceAdventure .gamePage .indicatorArea .indicatorWrap .indicator.act {color:#7070EF; background-image:url("../images/spaceAdventure/indicator_act.png");}
.spaceAdventure .gamePage .indicatorArea .indicatorWrap .indicator.pass {color:#565656; background-image:url("../images/spaceAdventure/indicator_pass.png");}
.spaceAdventure .gamePage .indicatorArea .indicatorWrap .indicator.correct {color:#ffffff; background-image:url("../images/spaceAdventure/indicator_correct.png");}
.spaceAdventure .gamePage .indicatorArea .indicatorWrap .indicator.correct:after {content:""; position:absolute; left:50%; top:-26px; transform:translateX(-50%); width:48px; height:40px; margin-left:5px; background-image:url("../images/spaceAdventure/checkMark.png");}


.spaceAdventure .gamePage .buttonWrap {display:flex; align-items: center; justify-content: flex-end;}
.spaceAdventure .gamePage .buttonWrap .resultToggle .btnCheckAnswer {width:274px; height:109px; cursor:pointer; background-image:url("../images/spaceAdventure/btnShowAnswer.png");}
.spaceAdventure .gamePage .buttonWrap .resultToggle .btnCheckAnswer:hover {background-image:url("../images/spaceAdventure/btnShowAnswer_over.png");}
.spaceAdventure .btnRetry {display:none; width:274px; height:109px; cursor:pointer; background-image:url("../images/spaceAdventure/btnReplay.png");}
.spaceAdventure .btnRetry:hover {background-image:url("../images/spaceAdventure/btnReplay_over.png");}
.spaceAdventure .gamePage .buttonWrap .resultToggle.on .btnCheckAnswer {display:none;}
.spaceAdventure .gamePage .buttonWrap .resultToggle.on .btnRetry {display:block;}

.spaceAdventure .gamePage .buttonWrap .btnNextWord {width:274px; height:109px; cursor:pointer; background-image:url("../images/spaceAdventure/btnNextWord.png");}
.spaceAdventure .gamePage .buttonWrap .btnNextWord:hover {background-image:url("../images/spaceAdventure/btnNextWord_over.png");}

.spaceAdventure .gamePage .buttonWrap .btnConfirm {display:none; width:274px; height:109px; cursor:pointer; background-image:url("../images/spaceAdventure/btnResult.png");}
.spaceAdventure .gamePage .buttonWrap .btnConfirm:hover {background-image:url("../images/spaceAdventure/btnResult_over.png");}

.spaceAdventure .gamePage .buttonWrap > div:first-child {margin-right:16px;}



/*
    *** 볼륨조절바
*/
.spaceAdventure .volumeWrap {position:absolute; right:38px; bottom:22px; z-index:10; cursor:pointer;}
.spaceAdventure .volumeWrap .btnVolume {width:84px; height:84px; background-image:url("../images/spaceAdventure/btnVolume.png");}
.spaceAdventure .volumeWrap .btnVolume:hover {background-image:url("../images/spaceAdventure/btnVolume_over.png");}

.spaceAdventure .volumeWrap .cl_volumeController {/*display:flex;*/ left:50%; right:auto; transform:translateX(-50%);}





/*
    ********************************* 완료화면 *********************************
*/
.spaceAdventure .completePage {display:none; position:relative; width:100%; height:100%; background-image:url("../images/spaceAdventure/bg_complete.png");}

.spaceAdventure .completePage .ship {position:absolute; top:20px; left:50%; transform:translateX(-50%); width:320px; height:160px; background-image:url("../images/spaceAdventure/spaceship.png");}
.spaceAdventure .completePage .ship.grade4 {background-image:url("../images/spaceAdventure/spaceship_grade4.png");}

.spaceAdventure .completePage .resultMo {position:absolute; top:415px; left:885px; width:150px; height:150px;}
.spaceAdventure .completePage .resultMo .mo {width:100%; height:100%;}
.spaceAdventure .completePage .resultMo .mo1 {background-image:url("../images/spaceAdventure/result_mo1.png");}
.spaceAdventure .completePage .resultMo .mo2 {background-image:url("../images/spaceAdventure/result_mo2.png");}
.spaceAdventure .completePage .resultMo .mo3 {background-image:url("../images/spaceAdventure/result_mo3.png");}

.spaceAdventure .completePage .countCell {
    position: absolute;
    top: 435px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 195px;
    height: 125px;
    font-size:70px;
    font-family:Jalnan;
    font-weight:bold;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #000F4F;
}
.spaceAdventure .completePage .countCell.pinkMonCnt {left:567px; color:#F0F;}
.spaceAdventure .completePage .countCell.greenMonCnt {left:1156px; color:#0F0;}

.spaceAdventure .completePage .btnRetry {display:block; position:absolute; bottom:96px; left:50%; transform:translateX(-50%);}