/***
    *** 공통
 */
.btnRetry { width: 274px; height: 109px; background-image: url("../images/airplaneRead/btnRetry.png"); background-repeat: no-repeat; cursor: pointer; }
.btnRetry:hover { background-image: url("../images/airplaneRead/btnRetry_hover.png"); }

.btnNext { width: 274px; height: 109px; background-image: url("../images/airplaneRead/btnNext.png"); background-repeat: no-repeat; cursor: pointer; }
.btnNext:hover { background-image: url("../images/airplaneRead/btnNext_hover.png"); }
.btnNext.final { background-image: url("../images/airplaneRead/btnComplete.png"); }
.btnNext.final:hover { background-image: url("../images/airplaneRead/btnComplete_hover.png"); }


/***
    *** 탭버튼
 */
.cl_readAloud { position: absolute; top: 43px; left: 53px; display: flex; align-items: center; justify-content: center; gap: 30px;
    z-index: 1; padding: 12px; box-sizing: border-box; background-color: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.3); border-radius: 50px; }
.cl_readAloud .cl_btnTab { position: relative; }
.cl_readAloud .cl_btnTab:before { content: ''; width: 16px; height: 6px; position: absolute; top: 50%; left: -24px; background-image: url("../images/airplaneRead/beforeIcon.png"); }
.cl_readAloud .cl_btnTab:nth-child(1):before { display: none; }

/***
    *** 시작페이지 ***
 */
.airplaneRead .gameIntro { position: relative; width: 100%; height: 100%; background-image: url("../images/airplaneRead/readAloudBg.png"); }

/*시작버튼*/
.airplaneRead .btnGameStart { position: absolute; bottom: 87px; left: 50%; transform: translateX(-50%); width: 304px; height: 120px; background-image: url("../images/airplaneRead/airplaneBtnStart.png"); background-repeat: no-repeat; cursor: pointer; }
.airplaneRead .btnGameStart:hover { background-image: url("../images/airplaneRead/airplaneBtnStart_hover.png"); }


/***
    *** 게임페이지 ***
 */
.airplaneRead .gamePage { display: none; position: relative; width: 100%; height: 100%; background-image: url("../images/airplaneRead/gamePageBg.png"); }
/*구름*/
.airplaneRead .gamePage .cloudWrap .cloud { position: absolute; z-index: 2; }
.airplaneRead .gamePage .cloudWrap .cloud1 { top: 83px; left: 1018px; animation: cloud1 1s infinite ease-in-out; }
.airplaneRead .gamePage .cloudWrap .cloud2 { top: 520px; left: 233px; animation: cloud2 1.1s infinite ease-in-out; }
.airplaneRead .gamePage .cloudWrap .cloud3 { top: 675px; left: 1475px; animation: cloud3 1.2s infinite ease-in-out; }

@keyframes cloud1 {
    0%{
        top: 83px;
    }
    50%{
        top: 78px;
    }
    100%{
        top: 83px;
    }
}
@keyframes cloud2 {
    0%{
        top: 520px;
    }
    50%{
        top: 525px;
    }
    100%{
        top: 520px;
    }
}
@keyframes cloud3 {
    0%{
        top: 680px;
    }
    50%{
        top: 675px;
    }
    100%{
        top: 680px;
    }
}

/*비행기*/
.airplaneRead .gamePage .airplaneWrap { position: absolute; top: 290px; left: 175px; }
.airplaneRead .gamePage .airplaneWrap.move { animation: planeMove 0.8s cubic-bezier(0.05, 0.9, 0.2, 1); }
.airplaneRead .gamePage .airplaneWrap .airplane { position: absolute; top: -11px; left: 0px; width: 542px; height: 296px; background-image: url("../images/airplaneRead/plane.png"); background-repeat: no-repeat; }
.airplaneRead .gamePage .airplaneWrap .flagLine { position: absolute; top: -2px; left: 482px; width: 229px; height: 292px; background-image: url("../images/airplaneRead/flagLine.png"); }
.airplaneRead .gamePage .airplaneWrap .flag { position: absolute; top: -7px; left: 706px; display: flex; align-items: center; justify-content: center; width: 893px; height: 294px;
    background-image: url("../images/airplaneRead/flag.png"); }
/*.airplaneRead .gamePage .airplaneWrap .flag.swing { transform-origin: left center; !*좌측을 기준으로 회전*! animation: waveFlag 1s infinite linear; }*/
.airplaneRead .gamePage .airplaneWrap .flag .word { font-size: 150px; font-family: "Jalnan"; }
/*깃발흔들리는 animation*/
/*perspective 3d 원근법활용*/
@keyframes waveFlag {
    0%{ transform: perspective(600px) rotateY(0deg); }
    25%{ transform: perspective(600px) rotateY(2deg); }
    50%{ transform: perspective(600px) rotateY(0deg); }
    75%{ transform: perspective(900px) rotateY(-2deg); }
    100%{ transform: perspective(900px) rotateY(0deg); }
}
/*오른쪽에서 날아오는 비행기 animation*/
@keyframes planeMove {

    from {
        left: 1475px;
    }
    to {
        left: 175px;
    }

}


/*녹음버튼*/
.airplaneRead .gamePage .recordMike { display: none; position: absolute; top: 705px; left: 858px; width: 208px; height: 211px; background-image: url("../images/airplaneRead/mike.png"); background-repeat: no-repeat; cursor: pointer; }
.airplaneRead .gamePage .recordMike .progressBar { position: absolute; top: 47%; left: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; width: 170px; height: 170px;
    background: conic-gradient(#FF6CF8 0deg , #b8b8b8 0deg); border-radius: 50%; }
.airplaneRead .gamePage .recordMike .mikeIcon { position: absolute; top: 47.5%; left: 50%; transform: translate(-50%,-50%); width: 150px; height: 150px;
    background-image: url("../images/airplaneRead/bt_read_mic_enb.png"); background-repeat: no-repeat; z-index: 1; }
.airplaneRead .gamePage .recordMike:hover .mikeIcon { background-image: url("../images/airplaneRead/bt_read_mic_ovr.png"); }
.airplaneRead .gamePage .textRecord { display: none; position: absolute; bottom: 87px; left: 50%; transform: translateX(-50%); }
.airplaneRead .gamePage .recordMike .mikeIcon.micStage1 { background-image: url('../images/airplaneRead/bt_read_mic_3.png'); }
.airplaneRead .gamePage .recordMike .mikeIcon.micStage2 { background-image: url('../images/airplaneRead/bt_read_mic_2.png'); }
.airplaneRead .gamePage .recordMike .mikeIcon.micStage3 { background-image: url('../images/airplaneRead/bt_read_mic_1.png'); }
.airplaneRead .gamePage .recordMike .mikeIcon.micStageEnd { background-image: url('../images/airplaneRead/bt_read_mic_enb.png'); }


/*정답체크*/
.airplaneRead .gamePage .answer { display: none; position: absolute; top: 647px; left: 50%; transform: translateX(-50%);
    cursor: pointer; border-radius: 60px; box-shadow: 0px 5px 2px 0px rgba(0, 0, 0, 0.10); border: 10px solid #fff; overflow: hidden; background-color: #fff; }
.airplaneRead .gamePage .answer:hover { border-color: #44F3E5; }
.airplaneRead .gamePage .answer img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50px; padding: 0; margin: 0; font-size: 0; }
.airplaneRead .gamePage .btnWrap { display: none; align-items: center; justify-content: center; gap: 16px; position: absolute; top: 925px; right: 124px; }


/***
    *** 완료 페이지 ***
 */
.airplaneRead .gameComplete { display: none; position: relative; width: 100%; height: 100%; background-image: url("../images/airplaneRead/completeBg.png"); background-repeat: no-repeat; }
.airplaneRead .gameComplete .btnRetry { position: absolute; bottom: 182px; left: 50%; transform: translateX(-50%); }



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