@charset "utf-8";

/* 사자성어 */

#game{position:relative; width:  100%;
  height: 100%;}
#gameCanvas{position:absolute;}

#wrap #game #timer{width: 40px;height: 40px;top: 30px;left: 20px;position:absolute;z-index: 5;border-radius: 50%;border: 3px solid #152c74;line-height: 40px;background-color: #fff;}
#wrap #game #timer em{color:#152c75;font-size: 24px;font-weight: 800;text-align: center; display: block;width: 100%;height: 100%;box-sizing: border-box;}

#wrap #game #bar{width: 40%;height: 22px;top: 39px;left:60px;background-color: #152c75;overflow: hidden;border: 3px solid #152c75;border-radius: 0 15px 15px 0;z-index: 4;}
#wrap #game #bar span{border-radius: 0 15px 15px 0; display: block;width: 100%;height:100%;top:0px;left: 0%; background-image: url('https://dbins2.speedgabia.com/jjansun/images/game_timer_gauge.png'); background-size: contain; background-repeat: repeat-x; overflow: hidden;position: absolute;}

#wrap #game #score{top: 20px;right: 20px;font-weight: bold;z-index: 10;text-align: center;}
#wrap #game #score span{font-size:17px; color:#484848; display: block;}
#wrap #game #score em{font-size: 27px; width:85px; padding:3px 0px; letter-spacing:2px; line-height:30px; border-radius:30px; text-shadow: -2px 0 #456c19, 0 2px #456c19, 2px 0 #456c19, 0 -2px #456c19; color:#e9fc47; background-color: #86d3de; display: block; }

#wrap #quizNum{font-size:18px; top:-28px; width:100%; font-weight:600; text-align: center; color:#ffffff; letter-spacing: 1px;}

#wrap #questionWrap{width: 78%;top: 20%;left: 11%;}
#wrap #questionWrap dt{margin-bottom:6%;}
#wrap #questionWrap dd{width: 86%; margin:0 auto;}
#wrap #questionWrap dd img{border-radius: 24px;  box-sizing: border-box;   overflow: visible; border: 4px solid transparent;}

@media (min-width: 600px){
  #wrap #questionWrap{width: 60%; left:20%;}
  #wrap #questionWrap dd{width:80%;}
  #wrap #questionWrap dd img{border-radius: 28px;}
}