@media screen and (max-width: 751px) {
  html {
    font-size: 53.3333333333px;
  }
}

@media screen and (min-width: 751px) {
  html {
    font-size: 50px;
  }

  body {
    width: 750px;
    margin: 0 auto;
  }

  [data-dpr="1"] body {
    width: 750px;
    margin: 0 auto;
  }
}

html * {
  outline: 0;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: transparent;
}

body,
nav,
dl,
dt,
dd,
p,
h1,
h2,
h3,
h4,
ul,
ol,
li,
input,
button,
textarea,
footer {
  margin: 0;
  padding: 0;
}

body {
  font: 62.5%/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  min-width: 320px;
  overflow:hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}

img {
  vertical-align: middle;
  border: 0;
  -webkit-tap-highlight-color: transparent;
}

em,
i {
  font-style: normal;
}

img {
  max-width: 100%;
  border: 0;
}

input:focus {
  outline: 0;
}

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

ol,
ul,
li {
  list-style: none;
}

textarea {
  resize: none;
}

a {
  text-decoration: none;
  color: #333;
}

.cf:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.cf {
  min-height: 1%;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.break {
  word-break: break-all;
  word-wrap: break-word;
}

.mt10 {
  margin-top: 0.1rem !important;
}

.mt15 {
  margin-top: 0.15rem !important;
}

.mt20 {
  margin-top: 0.2rem !important;
}

.mt25 {
  margin-top: 0.25rem !important;
}

.mt30 {
  margin-top: 0.30rem !important;
}

.mt35 {
  margin-top: 0.35rem !important;
}

.mt40 {
  margin-top: 0.40rem !important;
}

.mt45 {
  margin-top: 0.45rem !important;
}

.mt50 {
  margin-top: 0.50rem !important;
}

.mt55 {
  margin-top: 0.55rem !important;
}

.mt60 {
  margin-top: 0.60rem !important;
}

.mt65 {
  margin-top: 0.65rem !important;
}

.mt70 {
  margin-top: 0.70rem !important;
}

.mt80 {
  margin-top: 0.80rem !important;
}

.mt85 {
  margin-top: 0.85rem !important;
}

.mt90 {
  margin-top: 0.90rem !important;
}

.mt95 {
  margin-top: 0.95rem !important;
}

.mt100 {
  margin-top: 1rem !important;
}

.mb10 {
  margin-bottom: 0.1rem !important;
}

.mb15 {
  margin-bottom: 0.15rem !important;
}

.mb20 {
  margin-bottom: 0.20rem !important;
}

.mb25 {
  margin-bottom: 0.25rem !important;
}

.mb30 {
  margin-bottom: 0.30rem !important;
}

.mb35 {
  margin-bottom: 0.35rem !important;
}

.mb40 {
  margin-bottom: 0.40rem !important;
}

.mb45 {
  margin-bottom: 0.45rem !important;
}

.mb50 {
  margin-bottom: 0.50rem !important;
}

.mb55 {
  margin-bottom: 0.55rem !important;
}

.mb60 {
  margin-bottom: 0.60rem !important;
}

.mb65 {
  margin-bottom: 0.65rem !important;
}

.mb70 {
  margin-bottom: 0.70rem !important;
}

.mt120 {
  margin-top: 1.2rem !important;
}

.tac {
  text-align: center !important;
}

body {
  background-color: #000;
  margin: 0 auto;
}

.box {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0 auto !important;
  overflow: hidden;
}

.btn-esc {
  width: 1.04rem;
  height: 0.44rem;
  position: absolute;
  left: 2.4rem;
  top: 0.52rem;
  background: url("../images/btn-esc.png") no-repeat 0 0;
  background-size: 100% 100%;
  font-size: 0.24rem;
  color: #b8dec3;
  text-align: center;
  line-height: 0.44rem;
}

/* .btn-st {
  width: 2.70rem;
  height: 2.70rem;
  position: absolute;
  left: 2.4rem;
  bottom: 0.52rem;
  background: url("../images/btn-st.png") no-repeat 0 0;
  background-size: 100% 100%;
} */

/* .btn-st-point {
  position: absolute;
  left: 3.32rem;
  bottom: 1.415rem;
  width: 0.88rem;
  height: 0.88rem;
  background: url("../images/btn-st-point.png") no-repeat 0 0;
  background-size: 100% 100%;
} */

.btn-l {
  width: 1.45rem;
  height: 0.85rem;
  position: absolute;
  left: 0.7rem;
  bottom: 0.98rem;
  background: url("../images/btn.png") no-repeat 0 0;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-l img {
  width: 0.38rem;
  height: 0.39rem;
}

.btn-r {
  width: 1.45rem;
  height: 0.85rem;
  position: absolute;
  left: 2.4rem;
  bottom: 0.98rem;
  background: url("../images/btn.png") no-repeat 0 0;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-r img {
  width: 0.38rem;
  height: 0.39rem;
}

.btn-u {
  width: 1.45rem;
  height: 0.85rem;
  position: absolute;
  right: 2.4rem;
  bottom: 0.98rem;
  background: url("../images/btn.png") no-repeat 0 0;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-u img {
  width: 0.38rem;
  height: 0.39rem;
}

.btn-list {
  /* position: absolute;
  right: 0rem; */
  /* bottom: 0.52rem; */
  width: 4.2rem;
}

.btn-list ul {
  /* position: absolute;
  top: 0;
  left: 0; */
  display: flex;
  flex-wrap: wrap;
}

.btn-list ul li {
  position: absolute;
  width: 1.11rem;
  height: 1.11rem;
  margin: 0.1rem 0.1rem;
  text-align: center;
  line-height: 1.11rem;
  font-size: 0.36rem;
  color: #b8dec3;
  background: url("../images/btn-rbg.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.btn-bl-list {
  /* position: absolute;
  right: 0.7rem;
  bottom: 0.52rem; */
  /* width: 2.8rem; */
}

.btn-bl-list ul {
  display: flex;
  flex-wrap: wrap;
}

.btn-bl-list ul li {
  width: 1.11rem;
  height: 1.11rem;
  margin: 0.1rem 0.1rem;
  background: url("../images/btn-rbg2.png") no-repeat 0 0;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding-top: 0.18rem;
}

.btn-bl-list ul li p {
  font-size: 0.32rem;
  color: #b8dec3;
  text-align: center;
  line-height: 0.38rem;
}

.btn-bl-list ul li span {
  display: block;
  text-align: center;
  font-size: 0.2rem;
  color: #b8dec3;
  line-height: 0.32rem;
}

.btn-bt-list {
  position: absolute;
  right: 0.7rem;
  bottom: 0.52rem;
  width: 1.4rem;
}

.btn-bt-list ul {
  display: flex;
  flex-wrap: wrap;
}

.btn-bt-list ul li {
  width: 1.11rem;
  height: 1.11rem;
  margin: 0.1rem 0.1rem;
  background: url("../images/btn-rbg2.png") no-repeat 0 0;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding-top: 0.18rem;
}

.btn-bt-list ul li p {
  font-size: 0.32rem;
  color: #b8dec3;
  text-align: center;
  line-height: 0.38rem;
}

.btn-bt-list ul li span {
  display: block;
  text-align: center;
  font-size: 0.2rem;
  color: #b8dec3;
  line-height: 0.32rem;
}

.btn-list ul li.btn-e {
  right: 0.2rem;
  bottom: 4.3rem;
}

.btn-list ul li.btn-q {
  right: 0.2rem;
  bottom: 3.1rem;
}

.btn-list ul li.btn-f {
  right: 3.8rem;
  bottom: 0.4rem;
}

.btn-list ul li.btn-c {
  right: 0.2rem;
  bottom: 0.4rem;
}

.btn-list ul li.btn-sp {
  right: 1.6rem;
  bottom: 1.2rem;
  width: 1.8rem;
  height: 1.8rem;
  line-height: 1.8rem;
  /* color: ; */
  font-size: 0.44rem;
}

.btn-list ul li.btn-ssx {
  left: 0.6rem;
  bottom: 3.1rem;
}

.btn-list ul li.btn-tab {
  left: 0.6rem;
  bottom: 4.3rem;
}


/* 摇杆和按钮样式 */

/* .front {
  background: url("../images/btn-st-point.png") no-repeat 0 0;
  background-size: cover;
  opacity: 1 !important;
}

.back {
  background: url("../images/btn-st.png") no-repeat 0 0;
  background-size: cover;
  opacity: 1 !important;
}
*/

.back {
  background: url(../images/d-pad.png) no-repeat 0 0;
  background-size: 24.3rem 2.7rem;
  opacity: 1 !important;
}

.back.right {
  background-position: -2.7rem;
}

.back.left {
  background-position: -5.4rem;
}

.back.down {
  background-position: -8.1rem;
}

.back.up {
  background-position: -10.8rem;
}

.back.right_up {
  background-position: -13.5rem;
}

.back.right_down {
  background-position: -16.2rem;
}

.back.left_down {
  background-position: -18.9rem;
}

.back.left_up {
  background-position: -21.6rem;
}

.keyboard-list {
  position: absolute; z-index: 999;
}

.btn-key {
  /* width: 1.11rem;
  height: 1.11rem;
  line-height: 1.11rem;
  font-size: 0.36rem; */
  /* background: url("../images/btn-rbg.png") no-repeat 0 0;
  background-size: 100% 100%; */
  position: fixed;
  margin: 0.1rem 0.1rem;
  text-align: center;
  color: #b8dec3;
  background: url(../images/btn_map.png) no-repeat 0 0;
  background-size: 200% 100%;
  /* background-size: 2.24rem 1.12rem; */
  background-color: transparent;
}

.btn-key.on {
  /* background-position: -1.12rem 0; */
  background-position: 100% 0;
}