#header{margin:0 auto;width:var( calc(--base-w + 16px) );height:calc(1.5 * var(--sz-unit));background-color:var(--bgcolor)}.container{position:relative;margin:0 auto;width:734px;min-height:730px;height:100vh;background-color:var(--bgcolor)}#home_area{text-align:center;padding:var(--sz-unit) 0}#home_banner_area{display:flex;flex-direction:row;justify-content:center;margin-bottom:var(--sz-unit)}#home_feature_area{padding:var(--sz-unit)}#home_feature_area ul li{padding-bottom:calc(.4 * var(--sz-unit))}#home_game_start{display:flex;justify-content:center;color:var(--game-menu-btn-bgcolor);font-size:var(--mi-text);gap:calc(.5 * var(--sz-unit))}#home_game_start span{border-bottom:1px solid blue}#game_menu_area{padding-top:calc(2.5 * var(--sz-unit));display:flex;flex-direction:column;align-items:center}#game_menu_area ul{display:flex;flex-direction:column}#game_menu_area ul li{margin-bottom:calc(1.5 * var(--sz-unit))}.game_menu_item{display:inline-block;width:calc(7.5 * var(--sz-unit));height:calc(1.5 * var(--sz-unit));font-size:var(--mi-text);font-weight:700;background-color:var(--game-menu-btn-bgcolor);color:var(--game-menu-btn-color);text-align:center;line-height:calc(1.5 * var(--sz-unit));border-radius:10px}#nav{position:fixed;bottom:0;left:0;width:100%;box-shadow:0 -1px 5px #0003;z-index:1000}#nav ul{display:flex;list-style:none;padding:0;margin:0}#nav li{flex:1;text-align:center}#top-menu{width:calc(11 * var(--sz-unit));height:100%;margin:0 auto;background-color:var(--nav-bgcolor);display:flex;justify-content:space-evenly;align-items:center}.top-menu-item{width:calc(1.5 * var(--sz-unit));height:calc(2 * var(--sz-unit));background-color:var(--nav-menu-itemcolor)}.icon-n-text-menu{display:flex;flex-direction:column;align-items:center}#about_area{margin:0 auto;width:90%}#about_area p{line-height:1.5}#about_theory{padding:2rem 0;font-size:var(--mi-text);text-align:justify}#theory_detail p{letter-spacing:2.5}#login_area{padding-top:calc(2.5 * var(--sz-unit));display:flex;flex-direction:column;align-items:center;gap:calc(.7 * var(--sz-unit))}#login_area input{width:calc(8 * var(--sz-unit));height:calc(1.3 * var(--sz-unit));font-size:var(--sm-text);border-radius:5px}#login_area input[type=button]{background-color:var(--game-menu-btn-bgcolor);color:var(--game-menu-btn-color)}#sns_login_area{padding-top:calc(1.5 * var(--sz-unit));display:flex;flex-direction:column;align-items:center;gap:calc(.2 * var(--sz-unit))}#sns_login_area div{width:calc(6 * var(--sz-unit));height:calc(1.2 * var(--sz-unit));border:1px solid var(--ok-btn-color);text-align:center;line-height:calc(1.2 * var(--sz-unit))}#signup_area{padding-top:calc(2.5 * var(--sz-unit));display:flex;flex-direction:column;align-items:center;gap:calc(.7 * var(--sz-unit))}#signup_area input{width:calc(8 * var(--sz-unit));height:calc(1.3 * var(--sz-unit));font-size:var(--sm-text);border-radius:5px}#signup_area input[type=button]{background-color:var(--sign-btn-color);color:#222;font-weight:700}#signup_area input[type=button]:hover{background-color:var(--sign-btn-color);color:#aaa;font-weight:700}@media (max-width: 1024){.container{width:768px}}@media (max-width: 768px){.container{width:100%}}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-content{width:90%;max-width:300px;padding:30px;text-align:center;border-radius:8px;box-shadow:0 4px 15px #0003;background-color:#fff}.dialog-content h3{margin-top:0;margin-bottom:20px;color:#333}.dialog-buttons{display:flex;flex-direction:row;justify-content:space-around;gap:10px}.dialog-button{padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-size:1em;transition:background-color .2s ease}.dialog-button.cancel{background-color:#747474;color:#fff}.dialog-button.cancel:hover{background-color:#535353}.dialog-button.submit{background-color:#57c7b8;color:#fff}.dialog-button.submit:hover{background-color:#1f7e71;color:#fff}#BeginnerPage{--bp-bgcolor: #9fd0f8;--q-bgcolor: #c0e4e0;--q-border-color: #1b7c73;--sel-answer-btnbgcolor: #f0c664;--sel-answer-btn-border-color: #927634;--input-box-border-color: #212e74;--submit-btn-color: #1a297e;--submit-btn-border-color: #263691;--label-text-color: #093660;--gamelabel-lg-text: 28px;--gamelabel-mi-text: 20px;--gamelabel-sm-text: 16px}.game_container{margin:0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem}.section{display:flex;flex-direction:column;justify-content:center;gap:20px}#game_info_area{left:calc(1 * var(--sz-unit));width:calc(var(--base-w) - (2 * var(--sz-unit)));padding-top:1.5rem;height:calc(3 * var(--sz-unit));display:flex;flex-direction:column;align-items:center;color:var(--label-text-color)}#game_title{font-size:28px;color:#333;font-weight:600}#game_info-1{width:calc(var(--base-w) - (2 * var(--sz-unit)));display:flex;flex-direction:row;justify-content:space-between;font-size:var(--gamelabel-mi-text);color:#444;font-weight:600}#game_info-2{width:calc(var(--base-w) - (2 * var(--sz-unit)));padding-top:calc(.5 * var(--sz-unit));text-align:right;font-size:var(--mi-text);color:#444;font-weight:600}.question_select_area{display:flex;flex-direction:column;align-items:flex-end;gap:2.5rem}#question_area{top:calc(5.5 * var(--sz-unit));left:calc(1.5 * var(--sz-unit));width:calc(8 * var(--sz-unit));height:calc(2 * var(--sz-unit));display:flex;justify-content:space-evenly;align-items:center;background-color:var(--q-bgcolor);border:0px solid var(--q-border-color);border-radius:10px;box-shadow:0 6px 18px var(--q-border-color)}#select_answer_area{top:calc(9 * var(--sz-unit));left:calc(4 * var(--sz-unit));width:calc(5.5 * var(--sz-unit));height:calc(4.5 * var(--sz-unit));display:flex;flex-wrap:wrap;gap:calc(.5 * var(--sz-unit))}.select_answer{display:inline-block;width:calc(2.5 * var(--sz-unit));height:calc(2 * var(--sz-unit));background-color:var(--sel-answer-btnbgcolor);font-size:var(--lg-text);font-weight:700;text-align:center;line-height:calc(2 * var(--sz-unit));border:0px solid var(--sel-answer-btn-border-color);border-radius:10px;box-shadow:0 6px 18px var(--q-border-color);cursor:pointer}.question_number{font-size:var(--lg-text);font-weight:700}.question_oper{font-size:var(--lg-text);font-weight:400}#input_answer_area{top:calc(14 * var(--sz-unit));left:calc(2 * var(--sz-unit));width:calc(8 * var(--sz-unit));height:calc(2 * var(--sz-unit));display:flex;flex-wrap:nowrap;align-items:flex-end;gap:calc(.5 * var(--sz-unit))}#input_answer_box{width:calc(4.5 * var(--sz-unit));height:calc(1.1 * var(--sz-unit))}#input_answer_box input{width:96%;height:90%;font-size:var(--sm-text);text-align:right;border:0px solid var(--input-box-border-color);border-radius:5px;box-shadow:0 6px 18px var(--q-border-color)}#submit_answer{width:calc(2.5 * var(--sz-unit));height:calc(1.5 * var(--sz-unit));font-size:var(--mi-text);background-color:var(--submit-btn-color);border:0px solid var(--submit-btn-border-color);border-radius:5px;box-shadow:0 6px 18px var(--q-border-color);cursor:pointer;color:#ccc}@media (max-width: 1024){.game_container{width:768px}}@media (max-width: 768px){.game_container{width:100%}}#root{--bp-bgcolor: rgb(53, 127, 192);--q-bgcolor: #b2e9e3;--q-border-color: #11423d;--sel-answer-btnbgcolor: #FFB300;--sel-answer-btn-border-color: #927634;--input-box-border-color: #212e74;--submit-btn-color: #3c57ee;--submit-btn-border-color: #263691}.score_container{margin-top:32px}.score_cateogry{font-size:18px;margin-left:18px;margin-top:8px;margin-bottom:4px}.score_area{margin:0 auto;display:grid;width:80%;grid-template-columns:1fr 1fr 1fr;background-color:var(--q-bgcolor);border-radius:4px;padding:4px 8px 4px 4px}.score{font-size:16px;font-weight:700;padding:8px;text-align:right}.ranking_category{font-size:18px;margin-left:18px;margin-top:8px;margin-bottom:4px}.rank_area{margin:16px auto;display:grid;width:80%;grid-template-columns:1fr 3fr 2fr;background-color:var(--q-bgcolor);border-radius:4px;padding:4px}.rank{font-size:18px;font-weight:700;padding:4px}.rank_user{text-align:left}.rank_rate{text-align:right}