.inlineBlockSpacing {
    letter-spacing: -0.31em; *letter-spacing: normal;  *word-spacing: -0.43em;  text-rendering: optimizespeed;     
}

#mtkContainer,
#mtkContainer * { box-sizing: border-box; }

.game { position: relative; }
.game-stage { margin:0 auto; width: 1020px;letter-spacing: -0.31em; *letter-spacing: normal;  *word-spacing: -0.43em;  text-rendering: optimizespeed;    }

.game-control { display: none; position: relative; width: 100%; height: auto; font:20px/1.4 "微軟正黑體"; z-index: 100 }
.game-control-content { margin: 0 auto; padding: 20px ; max-width: 800px; height: 100%; background: url(../images/bg-game-control-content.jpg) top center repeat-x; border-radius: 20px 20px 0 0; }
.game-control-content ul {letter-spacing: -0.31em; *letter-spacing: normal;  *word-spacing: -0.43em;  text-rendering: optimizespeed;   }
.game-control-content li { display: inline-block; padding: 0 1%; width: 33.333333%; max-width: 297px; letter-spacing: normal; }
.game-control-content img { width: 100%; }
.game-control-content-button { width: 100%; height: auto; } 
.game-control-content-price { position: relative;  border-radius: 99em;  }
.game-control-content-price span { position: absolute; top: 30%; right: 40%;font:30px/30px "arial"; z-index: 3;  }

.game-control-content .game-control-content-button:hover,
.game-control-content .game-control-content-skill:hover { transform: scale(0.95); }

.game-control-content .game-control-content-skill.used { position: relative; border-radius: 99em; background: rgba(0,0,0,0.5) }
.game-control-content .game-control-content-skill.used img { opacity: 0.5 }
.game-control-content .game-control-content-skill.used::after { content: "技能已經使用過"; position: absolute; top:0; left: 0; width: 100%; height: 100%;
 font:20px/1.4 "微軟正黑體"; color: #fff; text-align: center; }


.game-stage-content { display: inline-block; margin: 0 20px; width: 300px; letter-spacing: normal; }

.game-stage-content ul { letter-spacing: -0.31em; *letter-spacing: normal;  *word-spacing: -0.43em;  text-rendering: optimizespeed;   }
.game-stage-content ul li { position: relative; display: inline-block; width: 100px; height: 100px;  }
.game-stage-content ul li > div { position: relative; width: 100%; height: 100%; }
li .road { background:#cca100; border-radius: 20px; border:1px solid #fff; }
li .road.road-color-1 { background:#e7432b;  }
li .road.road-color-2 { background:#99491a;  }


.cash1::after { content: ""; position: absolute; top:0; left: 0; width: 100%; height: 100%; z-index: 1;
 background:url(../images/item-cash1.png) center no-repeat ; background-size: 100%; }

.cash1.effact::after { -webkit-animation: cash1effact 1s  1 forwards; }
@-webkit-keyframes cash1effact {
  from { opacity: 1;}
  to { ; opacity: 0 }

}

.player { position: absolute; top:0; left: 0; margin-top:-30px; width: 100%; height: 100%; z-index: 5; transform: scale(0.9); display: none; }
.player-normal { background:url(../images/player-1-small.png);-webkit-animation: moboStand 0.6s steps(2) infinite; }
@-webkit-keyframes moboStand {
  from { background-position:0 0px; }
  to { background-position: -200px 0px; }
}
.player.moveRight {
	-webkit-animation: moveRight  0.6s infinite; 
}
@-webkit-keyframes moveRight  {
  from { transform: translateX(0); }
  to { transform: translateX(100px);  }
}

.player.moveLeft {
	-webkit-animation: moveLeft  0.6s infinite; 
}
@-webkit-keyframes moveLeft  {
  from { transform: translateX(0); }
  to { transform: translateX(-100px);  }
}

.player.moveUp {
	-webkit-animation: moveUp  0.6s infinite; 
}
@-webkit-keyframes moveUp  {
  from { transform: translateY(0); }
  to { transform: translateY(-100px);  }
}


.player.moveDown {
	-webkit-animation: moveDown  0.6s infinite; 
}
@-webkit-keyframes moveDown {
  from { transform: translateY(0); }
  to { transform: translateY(100px);  }
}


.player.in { -webkit-animation: in  0.6s infinite;  }
@-webkit-keyframes in {
  from { transform: scale(2) translateY(-100px); opacity: 0 }
  to { transform: scale(1) translateY(0px); opacity: 1 }
}


.player.skill { }
.player.skill::after { content: ""; position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: url(../images/skill-effact.png);-webkit-animation: playerSkill 1s steps(5) infinite; }
@-webkit-keyframes playerSkill {
  from { background-position:0 0px; }
  to { background-position: -500px 0px; }
}

						
.view { position: absolute; top:0; left: 0; width: 100%; height: 100%; z-index: 2;  }
.view-1 { background:url(../images/view-1.png) center no-repeat; background-size: 100%; } 
.bonus { display: none; position: absolute; top:0; left: -15px; width: 30px; height: 30px; font: bold 14px/30px "arial"; 
text-align: center; color: #fff; border-radius: 99em; background:red; z-index: 3; letter-spacing: normal;}
.bonus.show { display: block; -webkit-animation: bonus 0.6s  infinite alternate;  }
@-webkit-keyframes bonus {
  from { transform: translateY(0); }
  to { transform: translateY(10px);  }

}


.view.effact { cursor: pointer; }
.view.effact::after { content: ""; position: absolute; top:0; left: 0; width: 100%; height: 100%; border-radius: 99em; background:#fff; 
-webkit-animation: vieweffact 0.6s  infinite alternate; }
@-webkit-keyframes vieweffact {
  from { transform: scale(0); opacity: 0 }
  to { transform: scale(1.2);  opacity: 0.3}

}



.game-message { position: absolute; top:5%; left: 0; width: 100%; z-index: 101; /*display: none;*/}
.game-message-content { margin: 0 auto; max-width: 800px;    }
.game-message-content li { padding: 15px; width: 100%; height: auto; border:1px solid #fff; background:rgba(244,234,213,0.9); }
.game-message-content h3 { text-align: center;}
.game-message-content h3 p { display: inline-block; padding: 10px 20px;  font:22px/1 "arial","微軟正黑體"; text-align: center; color: #fff; border-radius: 20px; background:#206b7f; }

.game-message-content .job .job-change { padding: 50px 0 50px 0; text-align: center; letter-spacing: -0.31em; *letter-spacing: normal;  *word-spacing: -0.43em;  text-rendering: optimizespeed; 
}
.game-message-content .job .job-change span { display: inline-block; position: relative; margin: 0 1px; width: 200px; height: 200px; cursor: pointer; transition: .5s; }
.game-message-content .job .job-change .wor { background:url(../images/player-1-normal.png);   }
.game-message-content .job .job-change .wiz { background:url(../images/player-2-normal.png);   }
.game-message-content .job .job-change .arc { background:url(../images/player-3-normal.png);   }
.game-message-content .job .job-change span:hover,
.game-message-content .job .job-change span.on {-webkit-animation: jobmov 0.6s steps(2) infinite;  transform: scale(1.2);}
@-webkit-keyframes jobmov {
  from { background-position:0 0px; }
  to { background-position: -400px 0px;  }
}

.game-message-content .job .job-change span .name { position: absolute; bottom: -50px; left: 0; width: 100%; letter-spacing: normal; background:rgba(0,0,0,0.8); }
.game-message-content .job .job-change span .name p { font:20px/1.4 "arial","微軟正黑體"; text-align: center; color: #fff;}
.game-message-content .job .job-change span .name small { font:14px/1.2 "arial","微軟正黑體"; text-align: center; color: #fff; }
/*
.game-message-content .job > div.name { padding-top: 20px; text-align: center; }
.game-message-content .job > div.name > p { display: inline-block; width: 200px; height: auto;  font:20px/1.4 "arial","微軟正黑體"; text-align: center;
text-align: center; letter-spacing: normal; }
*/
.game-message .button { margin: 5px auto 10px auto; padding: 0; width: 250px; text-align: center; letter-spacing: normal; border-radius: 20px;
 text-shadow: 1px 1px 0 rgba(0,0,0,0.5); background:#e7432b; transition: .5s; box-shadow: 0 5px  rgba(0,0,0,0.3);  }
.game-message .button a { display: block; width: 100%; height: 100%;  font:16px/34px "arial","微軟正黑體"; color: #fff; }
.game-message .button:hover { transform: translateY(10px); }









.game-dice { display: none; position: absolute; top:0; left: 0; width: 100%; z-index: 11; }
.game-dice-content { margin: 0 auto; max-width: 300px; height: 300px; }
.game-dice-content-ani { display: none; width: 100%; height: 100%; background:url(../images/dice-ani.png); -webkit-animation: diceani 0.3s steps(3) infinite; }
@-webkit-keyframes diceani {
  from { background-position:0 0px; }
  to { background-position: -900px 0px; }
}
.game-dice-content-point img { width: 100%; }

.game-dice-content.arcSkill { position: relative; }
.game-dice-content.arcSkill::after { content: ""; position: absolute; top: 0; right: 0; width: 100px; height: 100px;
background:url(../images/skill-arc.png) center center; background-size: 100%;  }

.takeCard { display: none; }
.card { letter-spacing: -0.31em; *letter-spacing: normal;  *word-spacing: -0.43em;  text-rendering: optimizespeed;  }
.card-content { display: inline-block; margin: 20px 10px 0 10px; width: 150px; letter-spacing: normal; transition: .5s;  }
.card-content img { width: 100%; }
.card-content.now,
.card-content:hover { transform: scale(1.1); border:3px solid #e7432b; }

.infor { display: none; position: relative; }
.infor img { width: 100% }
.infor-text p { margin: 20px 0 0 0; font: 16px/1.6 "微軟正黑體"; color: #000; letter-spacing: 1px }
.infor-text h3 p { display: inline-block; padding: 10px 20px;  font:30px/1 "arial","微軟正黑體"; text-align: center; color: #fff; border-radius: 20px; background:#206b7f; }
.infor .infor-img { margin: 20px 0 0 0 }
.infor-close { position: absolute; top:0; right: 0; width: 40px; height: 40px; text-align: center; border-radius: 99em; border:1px solid #000; background:rgba(255,255,255,0.8); }
.infor-close a { font:14px/40px "arial","微軟正黑體"; color: #000;   }
.end-close { margin-top: 20px; text-align: center; }
.end-close a {  font:14px/40px "arial","微軟正黑體"; color: #000; }

.end { display: none; }
.end-final-text { margin: 20px 0 0 0; font: 24px/1.6 "微軟正黑體"; color: #000; text-align: center; }
.end-final-text b { font-size: 32px; font-weight: bold; }


.tree-1 { background: url(../images/tree-1.png) top center no-repeat; background-size: 100%; }
.tree-2 { background: url(../images/tree-3.png) top center no-repeat; background-size: 100%;}
.tree-3 { background: url(../images/tree-2.png) top center no-repeat; background-size: 100%;}
.gold { position: absolute; top: -30%; left: 0; width: 120%; height: 120%;
 background: url(../images/gold.png) top center no-repeat; background-size: 100%;}

@media only screen and (max-width: 1366px) {
.game-stage { transform: scale(0.75);margin: -5% auto -5% auto; }
.game-dice-content { transform: scale(0.6);}
}

@media only screen and (max-width: 1024px) {
  
	.game-stage { transform: scale(0.7);margin: -7% auto -7% auto; }
  
}

@media only screen and (max-width: 800px) {
		.game-stage { transform: scale(0.6);margin: -17% auto -17% -16%; }
    .game-dice-content { transform: scale(0.6) translateY(30%);}
}

@media only screen and (max-width: 500px) {
	.game-stage { margin-left:0;  transform: scale(1); }
	.game-stage { margin:0 auto; width: 100%}
	.game-stage-content { display: block; margin: -20% auto -50% auto; width: 100%; letter-spacing: normal; transform: scale(0.7); }
	.game-stage-content:nth-child(3) { margin-bottom: 0}
	.game-stage-content ul li { position: relative; display: inline-block; width: 33.333333vw; height: 33.333333vw;  }

  .player { height: 80%; }

  .game-control { position: fixed; bottom: 0; left: 0; width: 100%; height: auto; z-index: 120; }
.game-control-content-price span { top: 0%; right: 20%;   }
.game-control-content .game-control-content-skill.used::after {  font:14px/1.4 "微軟正黑體"; }

.game-message.fixed { position: fixed;  }
.card-content { margin: 5px 5px 0 5px;width: 120px }
.game-dice { display: none;position: fixed;  top:0; left: 0; width: 100%; z-index: 11; }

  .game-message-content .job .job-change { padding: 50px 0 50px 0; text-align: center; letter-spacing: -0.31em; *letter-spacing: normal;  *word-spacing: -0.43em;  text-rendering: optimizespeed; 
width: auto;overflow: hidden;overflow-y: hidden; overflow-x:auto;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;white-space:nowrap; 
  }

}

@media only screen and (max-width: 414px) {
.player { width: 90%; height: 74%; }
}

@media only screen and (max-width: 375px) {
.player { width: 95%; height: 80%; }
}

@media only screen and (max-width: 320px) {
.card-content { width: 90px }
.player {  height: 95%; }
}