/* 게임 관련 스타일 */

body {
    font-family: 'S-CoreDream-3Light', sans-serif; /* 'CookieRun-Regular' */
    color: #333;
    background: url(./images/top-bar.png) 0 0/contain no-repeat #fff;
    font-size: 1.5rem;
    overflow: hidden;
}


.bottoms {width:60%;position: absolute;bottom: 2rem;}
@media screen and (orientation: portrait) {/* 세로 모드일 때 */
    .bottoms {width:calc(100% - 30vw);}
}
.bottoms .btn {display:inline-block;padding:.5rem 1.8rem;border-radius: 15px;font-size: 5vh;}
.bottoms .btn {user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;}
@media screen and (orientation: portrait) {/* 세로 모드일 때 */
    .bottoms .btn {font-size: 5vw;}
}
.bottoms .btn.left {float:left;}
.bottoms .btn.right {float:right;}
/* .bottoms::after {clear:both;content: " ";display: block;margin-bottom: 2rem;} */




.scene{width:100vw;height:100vh;overflow: hidden;    display:flex;justify-content: normal;align-items: center;flex-direction: column;    /*min-width: 178vh;*/}
.scene  {font-size: 5vh;/*font-size:1.5rem*/}
@media screen and (orientation: portrait) {/* 세로 모드일 때 */
    .scene {font-size: 6vw;word-break: auto-phrase;text-align: center;}
}
.scene .contents {max-height: 100vh;height:100%;/*max-width: 800px;*/margin: 0 auto;width: 100%;           display:flex;justify-content: normal;align-items: center;flex-direction: column;padding-top: 15px;}
.scene .contents .intro {display:flex;justify-content: center;align-items: center;flex-direction: column;height: calc(100% - 80px);}
@media screen and (orientation: portrait) {/* 세로 모드일 때 */
    .scene .contents .intro {margin-bottom: 10vh;margin-top: 10vh;}
}
.scene .contents .intro .title {display:flex;justify-content: center;align-items: center;flex-direction: column;/*width:80%;*/width: 70vh;/*max-width:800px;*/}
@media screen and (orientation: portrait) {/* 세로 모드일 때 */
    .scene .contents .intro .title {width: 70%;margin: 0 auto;}
}
.scene .contents .intro .title img {width:100%}
.scene .contents .intro p {margin-bottom: 2vh;font-size: 6vh;    margin-top: 6vh;}
@media screen and (orientation: portrait) {/* 세로 모드일 때 */
    .scene .contents .intro p {font-size: 3.6vh;}
}

/* .scene .contents {max-width: 800px;margin: 0 auto;width: 100%;} */
.scene .contents .game {display: flex;justify-content: center;align-items: center;flex-direction: column; width: 100%;/*margin-top: -8rem;*/height: calc(100% - 80px);}
.scene .contents .game header {/*font-size: 1rem;*/display:flex;justify-content: center;align-items: center;flex-direction:row;background:none;color: #007B6D; width: 100%;/*margin-bottom: 2rem;*/    margin-bottom: 1vh;font-size: 5vh;}
.scene .contents .game header.portrait {flex-direction: column; display:none;}
.scene .contents .game header.portrait .score_board {display: flex;flex-direction: row;justify-content: center;align-items: center;}
.scene .contents .game header.portrait .score_board > *:first-child {margin-right: 10vh;}
@media screen and (orientation: portrait) {/* 세로 모드일 때 */
    .scene .contents .game {margin-top: 0rem;}
    .scene .contents .game header.portrait {display:flex;margin-bottom: 5vh;}
    .scene .contents .game header.landscape {display:none;}
    .scene .contents .game header.portrait .score_board > *:first-child {margin-right: 5vw;}
}


.scene .contents .game header>* {flex-grow: 1;}
.scene .contents .game header .explain {color:black;background-color:#EDEDED;border-radius: 1rem; /*padding: 1rem;*/margin:0;    font-size: 6vh;padding: 1vh;}
@media screen and (orientation: portrait) {/* 세로 모드일 때 */
    .scene .contents .game header .explain {font-size: 6.3vw;margin-bottom: 2vh;}
}
.scene .contents .game .container {    width: 100%;}
@media screen and (orientation: portrait) {/* 세로 모드일 때 */
    .scene .contents .game .container {margin-bottom: 8vh;}
}
.scene .contents .game .container .question {font-size: 10vh;text-align: center;word-break: auto-phrase;}
.scene .contents .game .container .question * {font-size: 10vh;}
.scene .contents .game .container .question small {font-size: 6vh;}
.scene .contents .game .container .split-bar {margin: 5vh auto;border-bottom: 4px solid #B2B2B2;width: 80%;}
.scene .contents .game .container .answer {display: flex;justify-content: space-evenly;align-items: center;flex-direction: row;}
.scene .contents .game .container .answer>* {display: flex;justify-content: center;align-items: center;flex-direction: column;font-size: 7vh;padding: 0 1rem;text-align: center;}
@media screen and (orientation: portrait) {/* 세로 모드일 때 */
    .scene .contents .game .container .answer>* {font-size: 6vw;}
}
.scene .contents .game .container img.checkbox { width: 12vh; }
.scene .contents .game .container img.checkbox.checked {background: url(./images/checkbox-on.png) 0 0 / contain no-repeat; }

@media screen and (orientation: portrait) {/* 세로 모드일 때 */
    .scene .contents .game .container .question {font-size: 7vw;width: 80%;
        margin: 0 auto;}
    .scene .contents .game .container .question * {font-size: 7vw;}
    .scene .contents .game .container .question br {display:none;}
    .scene .contents .game .container .question small {font-size: 5vw;}
    .scene .contents .game .container img.checkbox { width: 4rem; }
}