html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q,
blockquote {
  quotes: none;
}

q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  position: relative;
  background-position: center;
  width: 100%;
  height: 100%;
  background: url("../img/bg_mobile.png") no-repeat top left;
  background-size: cover;
  overflow-y: hidden; 
}

strong {
  font-weight: 900;
}

a,
a:link,
a:visited {
  color: #fff;
  text-decoration: none;
}

.logo {
  display: block;
  max-width: 200px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  top: 0px;
}

.couten {
  max-width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
}

.couten li {
  position: absolute;
  animation: all 3s linear;
  top: -100px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.couten li img {
  width: 140%;
  display: block;
  cursor: pointer;
  -webkit-user-drag: none;
}

.couten li input {
  display: none;
}

.mo {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: none;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.65) 80%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 80%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 80%, rgba(0, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
}

.mo .sen {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.mo .sen img {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 212px;
  margin: auto;
  vertical-align: top;
}

.mo .sen h3 {
  width: 50%;
  height: 50px;
  position: absolute;
  top: -190px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  color: #fff;
  font-size: 250%;
  font-weight: bold;
  z-index: 999;
}

.mo .sen a {
  width: 30%;
  height: 50px;
  background-color: #b80001;
  position: absolute;
  top: 140px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  line-height: 50px;
  text-decoration: none;
}

.backward {
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
  position: absolute;
  z-index: 1;
  top: 0;
}

.backward span {
  display: inline-block;
  width: 100px;
  height: 100px;
  color: #ccc;
  font-weight: bold;
  position: absolute;
  top: -250px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  line-height: 100px;
  font-size: 1000%;
}

.content-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gameset {
  padding: 15px;
  height: 55px;
  color: #fff;
  font-size: 1.2em;
  position: relative;
  z-index: 5;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
}

span.tkremain {
  position: absolute;
  bottom: 35px;
}

span.bgmusic {
  position: fixed;
  bottom: 15px;
  right: 15px;
}

.mo .sen h3.notoken {
  font-size: 1em;
}

.mo .sen span.spannt {
  font-size: 0.75em;
  margin: 5px 0 0;
  font-weight: 400;
  display: block;
}

.animation-shaking{
  animation: 2s shaking ease-out infinite;
}

@keyframes shaking {
  0% {
      transform: rotate(0deg);
      transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
  }

  10% {
      transform: rotate(-12deg);
      transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
  }

  20% {
      transform: rotate(12deg);
      transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
  }

  28% {
      transform: rotate(-10deg);
      transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
  }

  36% {
      transform: rotate(10deg);
      transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
  }

  42% {
      transform: rotate(-8deg);
      transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
  }

  48% {
      transform: rotate(8deg);
      transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
  }

  52% {
      transform: rotate(-4deg);
      transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
  }

  56% {
      transform: rotate(4deg);
      transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
  }

  60% {
      transform: rotate(0deg);
      transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
  }

  100% {
      transform: rotate(0deg);
      transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
  }
}

@media screen and (min-width: 768px) {
  .logo {
    display: block;
    max-width: 400px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 0px;
  }

  body {
    background: url("../img/bg.png") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow-y: hidden;
  }

  .mo .sen {
    width: 70%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }

  .mo .sen img {
    width: 45%;
    height: auto;
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 350px;
    margin: auto;
    vertical-align: top;
  }
  .mo .sen h3 {
    width: 50%;
    height: 50px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 190px;
    margin: auto;
    text-align: center;
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    z-index: 999;
  }
  .mo .sen a {
    width: 15%;
    height: 50px;
    background-color: #b80001;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    margin: auto;
    color: #fff;
    border-radius: 5px;
    text-align: center;
    line-height: 50px;
    font-weight: 700;
    text-decoration: none;
  }

  .gameset {
    font-size: 1.4em;
    height: 200px;
    padding: 30px;
  }

  span.tkremain {
    position: fixed;
    top: 30px;
  }

  span.bgmusic {
    position: fixed;
    top: 30px;
    right: 30px;
  }

  .mo .sen h3.notoken {
    font-size: 1.2em;
  }

  .mo .sen span.spannt {
    font-size: 0.85em;
    margin: 10px 0 0;
    font-weight: 400;
    display: block;
  }
}

.home-icon {
    width: 60px;
    position: absolute;
    z-index: 9;
    top: 1em;
    right: 1em
}

.home-icon img {
    width: 60px;
    height: auto;
}

/* @media screen and (min-width: 1680px) {
  .mo .sen a {
    bottom: 180px;
  }
  .mo .sen h3 {
    top: -30px;
  }
} */