@charset "UTF-8";
* {
  font-family: 微軟正黑體; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  position: relative;
  display: inline-block;
  max-width: 1200px;
  background-color: #1f1e1d;
  left: 50%;
  right: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%); }

h1 {
  color: #8f724d;
  margin: 5px 0px 0px 30px;
  display: inline-block;
  font-size: 26px; }

a {
  display: inline-block;
  position: relative;
  font-weight: bold;
  color: #8f724d; }

p {
  display: inline-block;
  font-size: 16px;
  color: #595959;
  margin: 0px 0px;
  padding-left: 10px;
  letter-spacing: 3px;
  line-height: 28px; }

h2 {
  display: inline-block;
  color: #aa5522;
  margin: 20px 0px 0px 20px;
  font-size: 20px;
  -webkit-filter: drop-shadow(1px 1px 3px #EF9A9A);
  filter: drop-shadow(1px 1px 3px #EF9A9A); }

.chord {
  display: inline-block;
  color: #1f1e1d;
  font-weight: bold;
  padding: 0px 5px 0px 5px;
  margin: 0px;
  letter-spacing: 0px;
  font-size: 20px;
  line-height: 28px; }

.card_black {
  display: inline-block;
  position: relative;
  margin: 5px 0px;
  background-color: #1f1e1d;
  width: 98%;
  left: 50%;
  right: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 10px; }

.card {
  display: inline-block;
  position: relative;
  width: 98%;
  margin: 5px 0px;
  color: #1f1e1d;
  background-color: #f2f2f2;
  left: 50%;
  right: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 10px;
  min-height: 300px; }

.card2 {
  overflow: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  display: block;
  position: relative;
  background-color: #595959;
  border-radius: 10px 10px 0px 0px;
  max-width: 1200px; }

.card3 {
  display: block;
  position: relative;
  background-color: #595959;
  border-radius: 0px 0px 0px 0px;
  margin: 0px;
  padding: 0px;
  max-width: 1200px; }

.card4 {
  position: relative;
  display: inline-block;
  text-align: center;
  color: #8f724d;
  font-size: 14px;
  border: solid 1px #8f724d;
  border-radius: 5px;
  margin: 0px;
  padding: 1px;
  max-width: 400px; }

.inputa {
  min-width: 180px; }

.c4, .c5 {
  display: inline-block;
  letter-spacing: 2px;
  line-height: 28px; }

.red.green.c4 {
  padding-left: 0px;
  margin: 0px; }

.c4 {
  -webkit-filter: drop-shadow(3px 3px 5px #aaff55);
  filter: drop-shadow(3px 3px 5px #aaff55);
  color: #595959; }

.c5 {
  color: #8f724d;
  padding: 0px;
  margin: 2px 30px;
  float: right; }

.red {
  -webkit-filter: drop-shadow(3px 3px 5px #EF9A9A);
  filter: drop-shadow(3px 3px 5px #EF9A9A);
  color: #aa5522; }

.green {
  -webkit-filter: drop-shadow(3px 3px 5px #aaff55);
  filter: drop-shadow(3px 3px 5px #aaff55);
  color: #55aa00; }

.btn {
  color: #f2f2f2;
  border: solid 5px #1f1e1d;
  padding: 10px 10px;
  margin-bottom: 5px;
  border-radius: 10px;
  left: 50%;
  right: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 30px;
  background-color: #8f724d; }
  .btn:hover {
    border: solid 5px #f2f2f2;
    background-color: #aa5522;
    color: #f2f2f2; }

.mawp500 {
  max-width: 500px; }

.mawp550 {
  max-width: 550px; }

.mawp600 {
  max-width: 600px; }

.mawp650 {
  max-width: 650px; }

.mawp700 {
  max-width: 700px; }

.mawp750 {
  max-width: 750px; }

.mawp800 {
  max-width: 800px; }

.maw50 {
  max-width: 50%; }

.maw25 {
  max-width: 25%; }

.ss {
  margin-left: 30px; }

.img {
  position: relative;
  width: 95%; }

.mid {
  position: relative;
  left: 50%;
  right: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%); }