/* reset & default & all =============================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body { background-color: #00A89E; font-size: 1rem; letter-spacing: 0.05rem; font-family: Arial,STHeiti,'Microsoft JhengHei','微軟正黑體',sans-serif; overflow: hidden; }

#container { position: relative; max-height: 100%; }

#game_set_1, #game_set_2 { width: 100%; max-height: 100%; overflow: hidden; position: relative; background-color: #00A89E; }
.bg { width: 100%; height: auto; }
#game_set_2 { display: none; }

.set_btn_area { display: flex; justify-content: center; text-align: center; position: absolute; top: 330px; left: 15%; width: 70%; height: 400px; }
.set_btn_area img { transition: all 0.2s; }
.set_btn_area img:not(.pk):hover { transform: scale(1.1); cursor: pointer; }

#game_set_1 .set_btn_area img { height: 80%; width: auto; margin: 0 15px; }
#game_set_2 .set_btn_area { flex-direction: column; width: 28%; left: 50%; transform: translateX(-50%); }
#game_set_2 .set_btn_area img { width: 100%; height: auto; margin: 5px 0; }

.back { position: absolute; left: 15px; top: 15px; width: 10%; height: auto; }
.back:hover { transform: scale(1.1); cursor: pointer; }

#closeBtn { position: absolute; right: 1%; bottom: 2%; width: 4%; height: auto; transition: all 0.2s; z-index: 9999; }
#closeBtn:hover { transform: scale(1.1); cursor: pointer; }

#bgmBtn { position: absolute; right: 1%; bottom: 12%; width: 4%; height: auto; transition: all 0.2s; }
#bgmBtn:hover { transform: scale(1.1); cursor: pointer; }

#playbgmusic { border: none; }