.zam-app-flex {
  /**flex布局**/
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.zam-app-alignCenter {
  /**flex布局 水平居中**/
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.zam-app-justifyCenter {
  /**flex布局 垂直居中**/
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.zam-app-justifyspacearound {
  justify-content: space-around;
  -webkit-justify-content: space-around;
  -ms-flex-pack: space-around;
}

.zam-app-justifyspacebetween {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.zam-app-directionColumn {
  /**flex布局 子元素垂直排列**/
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.zam-app-directionColumnReverse {
  /**flex布局 子元素垂直排列**/
  -webkit-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

.zam-app-flex-alignCenter {
  /**flex布局 + 水平居中**/
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.zam-app-flex-alignflexend {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.zam-app-justifyflexend {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.zam-app-flex-justifyCenter {
  /**flex布局 + 垂直居中**/
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.zam-app-flex-ajCenter {
  /**flex布局 + 水平垂直并且子元素竖排居中**/
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.zam-app-flex-ajCenter2 {
  /**flex布局 + 水平垂直居中**/
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.zam-app-flex-wrap {
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html,
body,
ul,
li,
p,
div,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
p {
  padding: 0;
  margin: 0;
}

li {
  list-style: none
}

a {
  text-decoration: 0;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

.display-none {
  display: none !important
}

.display-block {
  display: block !important
}

.limitbox {
  white-space: nowrap;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
}

.zam-layer-loading {
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.zam-layer-loading .layui-layer-content {
  color: #fff
}

.zam-layer-loading .layui-layer-ico16 {
  background-image: url("../../js/layer/theme/default/loading-1.gif");
  background-size: cover;
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background-color: transparent;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.pc-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pcbgBox {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  pointer-events: none;
  background: #000;
  overflow: hidden;
}

.main-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.videoBg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.full-main {
  width: 100%;
  height: 800px;
  overflow: hidden;
  position: relative;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.main-box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
}

.header {
  width: 100%;
  height: 90px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2
}

.headerLogo {
  flex: 2;
  height: 100%;
}

.headerLogo img {
  width: auto;
  height: 70px;
}

.headerTitle {
  flex: 6;
  height: 90px;
  position: relative;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
}

.headerTitle .title-item {
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #fff;
  font-size: 30px;
  position: relative;
  right: 0;
  top: 0;
}

.headerTips {
  flex: 2;
}

.joinPeople {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  font-size: 24px;
  color: #fff;
}

.joinPeople span {
  display: inline-block;
  margin-right: 10px;
  font-size: 42px;
}

.normal-box {
  width: 100%;
  height: 620px;
  padding: 20px 0 30px;
  position: relative;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #Fff;
  font-size: 18px;
  pointer-events: none;
}

.chrometips {
  width: 100%;
  background: #fff8d4;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

.inner-chrometips {
  width: 910px;
  margin: 0 auto;
  padding: 20px 0;
  background: url(../images/warning.png) 0px 20px no-repeat;
  color: #837955;
  font-size: 14px;
}

.chrm-word1 {
  padding-left: 90px;
  padding-top: 5px;
}

.chrm-word2 {
  padding-left: 90px;
  padding-top: 10px;
}

.chrm-word2 a {
  display: inline-block;
  width: 26px;
  height: 26px;
  padding-left: 30px;
  background: url(../images/official/icons.png) 5px -90px no-repeat;
  color: #837955;
}

.btntips-close {
  position: absolute;
  right: 10px;
  top: 10px;
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #000;
  font-size: 30px;
  z-index: 101;
  text-decoration: none;
}

.right-qrbox {
  position: absolute !important;
  top: 100px;
  cursor: move;
  width: 260px;
  height: 260px;
  border-radius: 3px;
  padding: 20px 15px 2px;
  z-index: 2;
}

.right-qrimg img {
  display: block;
  width: 100%;
  height: 100%;
}

.right-qrdes {
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 0 0 5px 0;
  font-size: 22px !important;
  font-weight: bolder;
  letter-spacing: 1px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.right-qrdes p {
  margin-bottom: 0;
}

.btn-Blue {
  background-color: #74C0FF
}

.btn-Green {
  background-color: #82D769
}

.btn-Pink {
  background-color: rgb(246, 117, 117);
}

.btn-sBlue {
  background-color: #ABBEEC
}

.emptybox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 20px;
  color: #fff;
  z-index: 2;
}

.emptybox img {
  width: 100px;
  height: 100px;
  margin-bottom: 20px
}

.errorbox img {
  width: 200px;
  margin-bottom: 40px
}

.errorbox p {
  font-size: 20px;
}

/*游戏开始倒计时*/
.webstartdjs {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: rgba(0, 0, 0, .6);
}

.webstartdjs .webstartdjsBox {
  width: 500px;
  height: 500px
}

.webstartdjsBox .startdjsani {
  color: #fff604;
  font-size: 300px;
  font-weight: bold;
}

/**游戏时间倒计时**/
.webgamedjs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.webgamedjs .gamedjsani {
  color: rgba(255, 255, 255, 0.3);
  font-size: 400px;
  font-weight: bold;
}

/*操控opacity*/
.opacity-hide {
  opacity: 0
}

.opacity-show {
  opacity: 1
}

/*提示非谷歌*/
.broswer-tip {
  width: 100%;
  height: 60px;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  border-bottom: 1px solid gray;
  z-index: 20;
  color: #fff;
}

.broswer-tip i {
  font-size: 12px;
}

.broswer-tip .mxc-infofill {
  margin-right: 2px;
}

.broswer-tip .close-broswer-tip {
  position: absolute;
  right: 10px;
  top: 18px;
  cursor: pointer;
}

.broswer-tip p {
  font-size: 12px;
}

.broswer-tip .downgoogle {
  margin-left: 10px;
  font-size: 12px;
  cursor: pointer;
}

.broswer-tip .downgoogle img {
  width: 12px;
  height: 12px;
  margin-right: 3px;
}

.broswer-tip .downgoogle span {
  color: red;
}

/*暂未使用 点击开始按钮后不可重复再点开始 防止一联多点*/
.start-btn.stopclick,
.tug-start.stopclick {
  pointer-events: none;
}

.offlinebox {
  position: absolute;
  left: 10px;
  bottom: 80px;
  z-index: 999;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background-image: url(data:image/png;base64,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);
  background-position: center center;
  background-size: 50px 38px;
  background-color: rgba(0, 0, 0, 0.6);
  background-repeat: no-repeat;
  animation: showoffline 1s linear infinite;
  -webkit-animation: showoffline 1s linear infinite;
  display: none;
}

@keyframes showoffline {
  0% {
    opacity: 0
  }

  50% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-webkit-keyframes showoffline {
  0% {
    opacity: 0
  }

  50% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

.nopubtip {
  position: absolute;
  bottom: 12%;
  left: 2%;
  width: 168px;
  height: 168px;
  transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  background-image: url(../../images/sys/nopub.png);
  background-size: 100% 100%;
}