header {
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
}

header .app-close {
    position: absolute;
    right: 16px;
}

main {
    position: relative;
    inset: 0 0 0 0;
    flex-grow: 1;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/01/01_00.png);
}
.main-menu {
    position: absolute;
    inset: 0 0 0 0;
    display: flex;
    justify-content: center;
}

.main-menu .guide-button {
    position: absolute;
    top: 20px;
    right: 28px;
    width: 61px;
    height: 61px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/01/01_03.svg);
}

.popup-container {
    display: none;
    position: absolute;
    inset: 0 0 0 0;
    align-items: center;
    justify-content: center;
}

.main-menu section {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-menu .lesson-list {
    top: 178px;
    left: 28px;
    width: 192px;
    height: 504px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/01/unit/01_unit_box.svg);
}

.main-menu .lesson-button {
    width: 150px;
    height: 40px;
    position: relative;
    left: -1px;
    background-size: 100%;
    background-repeat: no-repeat;
}
.main-menu .lesson-button[data-lesson="1"] {
    margin-top: 20px;
    background-image: url(../images/01/unit/01_unit_on_01.svg);
}
.main-menu .lesson-button[data-lesson="2"] {
    margin-top: 44px;
    background-image: url(../images/01/unit/01_unit_on_02.svg);
}
.main-menu .lesson-button[data-lesson="3"] {
    margin-top: 44px;
    background-image: url(../images/01/unit/01_unit_on_03.svg);
}
.main-menu .lesson-button[data-lesson="4"] {
    margin-top: 44px;
    background-image: url(../images/01/unit/01_unit_on_04.svg);
}
.main-menu .lesson-button[data-lesson="5"] {
    margin-top: 45px;
    background-image: url(../images/01/unit/01_unit_on_05.svg);
}
.main-menu .lesson-button[data-lesson="6"] {
    margin-top: 44px;
    background-image: url(../images/01/unit/01_unit_on_06.svg);
}
.main-menu .lesson-button[data-lesson="1"].selected {
    background-image: url(../images/01/unit/01_unit_off_01.svg);
}
.main-menu .lesson-button[data-lesson="2"].selected {    
    background-image: url(../images/01/unit/01_unit_off_02.svg);
}
.main-menu .lesson-button[data-lesson="3"].selected {
    background-image: url(../images/01/unit/01_unit_off_03.svg);
}
.main-menu .lesson-button[data-lesson="4"].selected {
    background-image: url(../images/01/unit/01_unit_off_04.svg);
}
.main-menu .lesson-button[data-lesson="5"].selected {
    background-image: url(../images/01/unit/01_unit_off_05.svg);
}
.main-menu .lesson-button[data-lesson="6"].selected {
    background-image: url(../images/01/unit/01_unit_off_06.svg);
}


.main-menu .title-box {
    flex-grow: 1;
}

.main-menu .title-box::before {
    content: '';
    width: 447px;
    height: 236px;
    margin-top: 21px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/01/01_01.svg);
}

.main-menu .title-char {
    width: 300px;
    height: 330px;
    /* margin-top: 11px; */
    background-size: 6300px 330px;
    background-repeat: no-repeat;
    background-image: url(../images/01/quiz_run_main.png);
    animation: title-char-ani 0.7s steps(21) infinite;
}

@keyframes title-char-ani {
    100% {
      background-position: -6300px;
    }
}

.main-menu .quiz-start {
    width: 269px;
    height: 98px;
    /* margin-top: 36px; */
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/01/01_05.svg);
}

.main-menu .number-of-player {
    top: 208px;
    right: 29px;
    width: 343px;
    height: 446px;
}

.main-menu .number-of-player::before {
    content: '';
    width: 158px;
    height: 49px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/01/01_04.svg);
}

.lesson-list .selected {
}

.number-of-player .button-box {
    width: 343px;
    height: 367px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    position: relative;
    margin-top: auto;
}

.number-of-player .button-box button {
    width: 59px;
    height: 51px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.number-of-player .button-box .selected {
}

.in-game {
    position: absolute;
    inset: 0 0 0 0;
    display: flex;
    justify-content: center;
}

.in-game .main-menu-button {
    position: absolute;
    left: 30px;
    top: 20px;
    width: 60px;
    height: 60px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/04/04_home.svg);
}

#playground-container {
    position: absolute;
    inset: 0 0 0 0;
    display: flex;
}

#players-container {
    position: absolute;
    inset: 0 0 0 0;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
}

.quiz-container {
    position: absolute;
    width: 880px;
    height: 126px;
    top: 20px;
    display: flex;
    align-items: center;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/04/04_02.svg);
}

.quiz-container.text-image,
.quiz-container.image-image {
    height: 241px;
    background-image: url(../images/14/14_01.svg);
    align-items: flex-start;
}

.quiz-container.image {
    height: 160px;
    background-image: url(../images/16/16_01.svg);
}

.quiz-number {
    position: absolute;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #443523;
    font-size: 22px;
}

.quiz-container.text-image .quiz-number,
.quiz-container.image-image .quiz-number,
.quiz-container.image .quiz-number {
    top: 36px;
}

.quiz-container .quiz-text {
    position: relative;
    flex-grow: 1;
    display: flex;
    margin-left: 78px;
    font-size: 22px;
    color: #fff;
    height: 75px;
    background-size: contain;
    background-repeat: no-repeat;
    white-space: pre;
}

.quiz-container .quiz-text span.unit {
    font-family: SunBatangBold;
}

.quiz-container.text .quiz-text {
    align-items: center;
}

.quiz-container.text .quiz-text,
.quiz-container.image .quiz-text {
    margin-right: 40px;
}

.quiz-container.text-image .quiz-text,
.quiz-container.image-image .quiz-text {
    top: 50px;
}

.quiz-container.image-image .quiz-text {
    flex-grow: 0;
    width: 470px;
    height: 140px;
}

.quiz-container .quiz-image-bg {
    display: none;
    position: relative;
    margin: 38px 94px 0 8px;
    width: 230px;
    height: 164px;
    min-width: 230px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    /* background-color: #fff; */
    background-image: url(../images/14/14_04.svg);    
    /* border-radius: 18px; */
}

.quiz-container .quiz-image {
    position: absolute;
    inset: 8px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}

.quiz-container.text-image .quiz-image-bg,
.quiz-container.image-image .quiz-image-bg {
    display: flex;
}

.quiz-container .image-magnifier {
    position: absolute;
    top: 20px;
    right: -38px;
    width: 38px;
    height: 38px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/14/14_03.svg);
}

.show-answer {
    position: absolute;
    bottom: 25px;
    width: 160px;
    height: 58px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/04/04_05.svg);
}

.popup-container {
    display: none;
    position: absolute;
    inset: 0 0 0 0;
    align-items: center;
    justify-content: center;
}

.playground {
    position: absolute;
    inset: 0 0 0 0;
    display: flex;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/04/04_bg.png);
}

.playground .area {
    flex-grow: 1;
    margin-top: 300px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 208px 208px;
    background-repeat: no-repeat;
    background-position: center;
}

.playground .correct.area {    
    background-image: url(../images/04/04_03.svg);
}

.playground .incorrect.area {
    background-image: url(../images/04/04_04.svg);
}
.players {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-top: 268px;
}

.player-row {
    display: flex;
    justify-content: flex-start;
    position: relative;
    pointer-events: none;
}

.player {    
    position: relative;
    cursor: pointer;
    top: 0px;
    left: 0px;
    transition: top 0.5s ease-in-out, left 0.5s ease-in-out, opacity 0.5s ease-in-out;
    background-repeat: no-repeat;
    /* background-position: center; */
    pointer-events: auto;
}

.player-row .player:not(:last-child) {
    margin-right: 10px;
}

.player-row:nth-child(1) .player {
    width: 66px;
    height: 91px;
    background-size:1386px 91px;
    animation: player-ani-1 0.7s steps(21) infinite;
}
@keyframes player-ani-1 {
    100% {
      background-position: -1386px;
    }
}
.player-row:nth-child(2) .player {
    width: 69px;
    height: 94px;
    background-size:1449px 94px;
    animation: player-ani-2 0.7s steps(21) infinite;
}
@keyframes player-ani-2 {
    100% {
      background-position: -1449px;
    }
}
.player-row:nth-child(3) .player {
    width: 72px;
    height: 99px;
    background-size:1512px 99px;
    animation: player-ani-3 0.7s steps(21) infinite;
}
@keyframes player-ani-3 {
    100% {
      background-position: -1512px;
    }
}
.player-row:nth-child(4) .player {
    width: 75px;
    height: 102px;
    background-size:1575px 102px;
    animation: player-ani-4 0.7s steps(21) infinite;
}
@keyframes player-ani-4 {
    100% {
      background-position: -1575px;
    }
}
.player-row:nth-child(5) .player {
    width: 78px;
    height: 106px;
    background-size:1638px 106px;
    animation: player-ani-5 0.7s steps(21) infinite;
}
@keyframes player-ani-5 {
    100% {
      background-position: -1638px;
    }
}
.player-row:nth-child(1) {
    margin-left: 80px;
}

.player-row:nth-child(2) {
    margin-left: 108px;
    margin-top: -30px;
}

.player-row:nth-child(3) {
    margin-left: 60px;
    margin-top: -30px;
}

.player-row:nth-child(4) {
    margin-left: 90px;
    margin-top: -30px;
}

.player-row:nth-child(5) {
    margin-left: 38px;
    margin-top: -30px;
}

.player.out {
    pointer-events: none;
    /* opacity: 0.1; */
}

.player.out.left {
    left: -590px !important;
}
.player.out.right {
    left: 1244px !important;
}
.player.out.top {
    top: -640px;
}
.player.out.bottom {
    top: 450px;
}
.player.out.opacity {
    /* background-size: 0; */
    opacity: 0;
}
.wrong-answer-container {
    position: absolute;
    inset: 0 0 0 0;
    display: flex;
}

.wrong-answer-container .ani {
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
}

.wrong-answer-container .ani.O {
    transform: scaleX(-1);
}
 
/*
.wrong-answer-container::before {
    content: '';
    display: flex;
    position: absolute;
    bottom: 0;
    left: 274px;
    width: 492px;
    height: 564px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/08/08_01.png);
}
*/

.wrong-answer-container .ani.elephant {
    display: flex;
    top: 146px;
    right: 0;
    width: 1250px;
    height: 530px;
    background-size: 62500px 530px;
    background-repeat: no-repeat;
    background-image: url(../images/06/quiz_penalty_03.png);
    animation: elephant-ani 1.7s steps(50) 1;
}

.wrong-answer-container .ani.O.elephant {
    right: initial;
}

@keyframes elephant-ani {
    100% {
      background-position: -62500px;
    }
}

.wrong-answer-container .ani.lion {
    display: flex;
    top: 6px;
    left: 0px;
    width: 650px;
    height: 476px;
    background-size: 26000px 476px;
    background-repeat: no-repeat;
    background-image: url(../images/07/quiz_penalty_01.png);
    animation: lion-ani 1.3s steps(40) 1;
}

@keyframes lion-ani {
    100% {
      background-position: -26000px;
    }
}

.wrong-answer-container .ani.O.lion {
    left: initial;
    right: 6px;
}

.wrong-answer-container .ani.cheetah {
    position: absolute;
    bottom: 0;
    left: 224px;
    width: 600px;
    height: 560px;
    background-size: 27000px 560px;
    background-repeat: no-repeat;
    background-image: url(../images/08/quiz_penalty_02.png);
    animation: cheetah-ani 1.5s steps(45) 1;
}

@keyframes cheetah-ani {
    100% {
      background-position: -27000px;
    }
}

.wrong-answer-container .ani.O.cheetah {
    left: initial;
    right: 224px;
}

.wrong-answer-container .ani.earthquake {
    top: 258px;
    left: 7px;
    width: 629px;
    height: 385px;
    background-image: url(../images/09/09_01.png);
}

.wrong-answer-container .ani.O.earthquake {
    left: initial;
    right: 7px;
}
.game-result {
    position: absolute;
    inset: 0 0 0 0;
    background: radial-gradient(circle, rgba(0,0,0,0.45) 63%, rgba(0,0,0,0.7) 100%);
}

.game-result .main-menu-button {
    position: absolute;
    left: 30px;
    top: 20px;
    width: 60px;
    height: 60px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/04/04_home.svg);
}

.result-container {
    position: absolute;
    inset: 0 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    display: none;
    background-size: 100%;
    background-repeat: no-repeat;
}

.result-container.no-one {
    background-image: url(../images/12/12_00.png);
}

.result-container.no-one .no-one-text {
    width: 457px;
    height: 119px;
    margin-top: 70px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/11/11_01.svg);
}

.result-container.no-one .no-one-player {
    display: flex;
    position: absolute;
    top: 255px;
    width: 400px;
    height: 400px;
    background-repeat: no-repeat;
    background-size: 24000px 400px;
    background-image: url(../images/11/quiz_failed.png);
    animation: no-one-ani 2s steps(60) infinite;
}

@keyframes no-one-ani {
    100% {
      background-position: -24000px;
    }
}

.result-container.survival {
    background-image: url(../images/12/12_00.png);
}

.result-container.survival.all {
    background-image: url(../images/12/12_00.png);
}

.result-container .survival-ani {
    display: flex;
    position: absolute;
    background-repeat: no-repeat;
}

.result-container:not(.all) .survival-ani {
    width: 780px;
    height: 650px;
    background-size: 19500px 650px;
    background-image: url(../images/12/quiz_confetti.png);
    animation: survival-ani 0.83s steps(25) infinite;
}

.result-container.all .survival-ani {
    top: 214px;
    width: 500px;
    height: 476px;
    background-size: 25000px 476px;
    background-repeat: no-repeat;
    background-image: url(../images/13/quiz_success.png);
    animation: all-survival-ani 1.7s steps(50) infinite;
}

@keyframes survival-ani {
    100% {
      background-position: -19500px;
    }
}

@keyframes all-survival-ani {
    100% {
      background-position: -25000px;
    }
}

.result-container.survival .survival-text {
    position: relative;
    top: 70px;
    width: 231px;
    height: 59px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/12/12_02.svg);
}

/*
.no-one-text {
    position: relative;
    margin-top: 72px;
    width: 467px;
    height: 121px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/11/11_01.svg);
}

.no-one-player {
    width: 363px;
    height: 371px;
    margin-top: 92px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/11/11_02.svg);
}
*/

.result-container .survival-player-numbers {
    position: relative;
    font-size: 28px;
    color: #fff;
    font-family: OneMobilePop;
    margin-top: 162px;
}

.result-container .survival-players {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 370px;
    margin-top: 58px;
    margin-left: -38px;
}
.answer-popup-background {
    position: absolute;
    inset: 0 0 0 0;
    background-color: rgba(0, 0, 0, 0.2);
}

.answer-popup-close {
    position: absolute;
    top: -10px;
    right: -10px;
}

.answer-popup-content {
    position: absolute;
    width: 596px;
    height: 492px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/10/10_01.svg);
}

.answer-popup-content.image {
    background-image: url(../images/10/10_00.svg);
}

.answer-popup-content.image::before {
    content: '';
    position: absolute;
    margin-top: -66px;
    width: 120px;
    height: 36px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/10/10_001.svg);
}

.currect-answer {
    position: absolute;
    top: 80px;
    width: 208px;
    height: 208px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.currect-answer.O {    
    background-image: url(../images/10/10_02.svg);
}

.currect-answer.X {
    background-image: url(../images/10/10_03.svg);
}

.answer-solving {
    position: absolute;
    top: 264px;
    font-size: 22px;
    height: 50px;
    display: flex;
    color: #744110;
    align-items: center;
}

.answer-popup-content.image .answer-solving {
    top: 250px;
}

.answer-popup-content .button-box {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 44px;
}

.answer-popup-content .button-box button {
    width: 127px;
    height: 46px;
    /* box-shadow: 0px 2px 2px 2px rgba(0,0,0,0.5); */
}

.answer-popup-content .button-box button:first-child {
    margin-right: 28px;
}

.answer-popup-content .button-box .retry {
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/10/10_04.svg);
}

.answer-popup-content .button-box .next {
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/10/10_05.svg);
}
.image-popup-background {
    position: absolute;
    inset: 0 0 0 0;
    background-color: rgba(0, 0, 0, 0.2);
}

.image-popup-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 47px;
    height: 55px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/15/15_02.svg);
}

.image-popup-content {
    position: absolute;
    width: 796px;
    height: 583px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/15/15_01.svg);
    background-position: center;
    display: flex;
}

.image-popup-content .quiz-image {
    position: absolute;
    inset: 16px 9px 18px 9px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 16px;
}
.guide-popup-background {
    position: absolute;
    inset: 0 0 0 0;
    background-color: rgba(0, 0, 0, 0.2);
}

.guide-popup-close {
    position: absolute;
    top: 35px;
    right: -8px;
    width: 47px;
    height: 55px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/03/03_02.svg);
}

.guide-popup-content {
    position: absolute;
    width: 622px;
    height: 475px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/03/03_01.svg);
    display: flex;
}

.guide-popup-content::after {
    content: '';
    position: absolute;
    top: 140px;
    right: 35px;
    width: 102px;
    height: 94px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/03/03_05.svg);
}

.guide-popup-content .text-box {
    counter-reset:list-number;
    list-style:none;
    padding-inline-start: 0px;
    flex-grow: 1;
    margin: 0;
    padding: 150px 40px 0 40px;
}

.guide-popup-content .text-box li {
    counter-increment:list-number;
    display: flex;
    margin-bottom: 15px;
    align-items: center;
    font-size: 18px;
}

.guide-popup-content .text-box li::before {
    content: '';
    position: relative;
    display: flex;
    margin-right: 15px;
    width: 28px;
    height: 31px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.guide-popup-content .text-box li:nth-child(1):before {
    background-image: url(../images/03/number/03_bul_01.svg);
}
.guide-popup-content .text-box li:nth-child(2):before {
    background-image: url(../images/03/number/03_bul_02.svg);
}
.guide-popup-content .text-box li:nth-child(3):before {
    background-image: url(../images/03/number/03_bul_03.svg);
}
.guide-popup-content .text-box li:nth-child(4):before {
    background-image: url(../images/03/number/03_bul_04.svg);
}
.guide-popup-content .text-box li:nth-child(5):before {
    background-image: url(../images/03/number/03_bul_05.svg);
}
.guide-popup-content .text-box li:nth-child(6):before {
    background-image: url(../images/03/number/03_bul_06.svg);
}

.guide-popup-content .text-box li .o {
    width: 25px;
    height: 25px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/03/03_03.svg);
    margin: 0 6px;
}
.guide-popup-content .text-box li .x {
    width: 25px;
    height: 25px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/03/03_04.svg);
    margin: 0 6px;
}
.message-popup-background {
    position: absolute;
    inset: 0 0 0 0;
    background-color: rgba(0, 0, 0, 0.2);
}

.message-popup-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 47px;
    height: 55px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/02/02_02.svg);
}

.message-popup-content {
    position: absolute;
    width: 436px;
    height: 383px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/02/02_01.svg);
}

.message-popup-content h1 {
    display: flex;
    justify-content: center;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
html, body {
    position: absolute;
    inset: 0 0 0 0;
    font-family: NanumSquareRoundEB;
}

button {
    border: none;
    padding: 0;
    background-color: transparent;
    cursor: pointer;
}

#content-wrap {
    width: 1280px;
    height: 720px;
    transform-origin: 0 0;
    display: flex;
    flex-direction: column;
}

@font-face {
    font-family: NanumSquareRoundEB;
    src: url("../fonts/NanumSquareRoundEB.woff");
    font-display: swap;
}

@font-face {
    font-family: NanumSquareRoundB;
    src: url("../fonts/NanumSquareRoundB.woff");
    font-display: swap;
}

@font-face {
    font-family: OneMobilePop;
    src: url("../fonts/ONE-Mobile-POP.woff");
    font-display: swap;
}

@font-face {
    font-family: SunBatangMedium;
    src: url("../fonts/SunBatang-Medium.woff");
    font-display: swap;
}

@font-face {
    font-family: SunBatangBold;
    src: url("../fonts/SunBatang-Bold.woff");
    font-display: swap;
}

@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}