/*html {
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
}*/
body {
  font-family: 'Microsoft YaHei','Helvetica Neue',Helvetica,STHeiTi,sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch
}

td {
  border-width: 1px;
  border-style: solid;
}gw

input[type=text] {
  -webkit-appearance: none
}

img {
  pointer-events: none
}

.show {
  display: block
}

.hide {
  display: none
}

.container {
  display: block;
  width: 100%;
  min-height: 100%;
  font-size: .32rem;
  background: #fff
}

.container,.footer {
  max-width: 750px;
  margin: 0 auto
}

.header {
  width: 100%;
  max-width: 750px;
  height: 1.6rem;
  border-bottom: 1px solid #3f3f3f;
  background: rgba(0,0,0,.8);
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 9;
  transform: translate(-50%,0)
}

.header .inner {
  position: relative
}

.header .btn-nav {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  position: absolute;
  left: 0;
  top: 0
}

.header .btn-nav i {
  display: block;
  width: .56rem;
  height: .56rem;
  margin: 0 auto;
  background: url(../images/btn-nav.png) no-repeat center;
  background-size: contain;
  margin-top: .52rem
}

.header .btn-nav.cur i {
  background: url(../images/btn-n-c.png) no-repeat center;
  background-size: contain
}

.header .logo {
  display: block;
  width: 2.573333rem;
  height: .746667rem;
  margin: 0 auto
}

.header .logo img {
  width: 100%;
  height: 100%;
  margin-top: .426667rem
}

.header .btn-games {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  border-left: 1px solid #3f3f3f;
  position: absolute;
  top: 0;
  right: 0
}

.header .btn-games i {
  display: block;
  width: .506667rem;
  height: .506667rem;
  margin: 0 auto;
  background: url(../images/btn-g-dw.png) no-repeat center;
  background-size: contain;
  margin-top: .546667rem
}

.header .btn-games.cur i {
  background: url(../images/btn-g-up.png) no-repeat center;
  background-size: contain
}

.header .nav {
  display: none;
  width: 3.12rem;
  position: absolute;
  left: 0;
  top: 1.6rem;
  z-index: 9;
  background: rgba(0,0,0,.8)
}

.header .nav a {
  display: block;
  width: 100%;
  height: 1.786667rem;
  border-top: 1px solid #3f3f3f;
  text-align: center;
  font-size: .426667rem;
  color: #fff;
  line-height: 1.786667rem
}

.header .nav a:first-child {
  border-top: 0
}

.header .nav .btn-login img,.header .nav .btn-personal img {
  float: left;
  display: block;
  width: .746667rem;
  height: .746667rem;
  border-radius: 50%;
  margin: .506667rem .133333rem 0 .48rem
}

.header .nav .btn-personal span {
  float: left;
  display: block;
  width: 1.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.header .drop-games {
  display: none;
  width: 100%;
  position: absolute;
  left: 0;
  top: 1.6rem;
  z-index: 9;
  background: rgba(0,0,0,.8)
}

.header .drop-games .title {
  font-size: .426667rem;
  color: #fff;
  padding: .4rem .4rem 0
}

.header .drop-games .title i {
  display: inline-block;
  width: .12rem;
  height: .426667rem;
  background: url(../images/ti.png) no-repeat center;
  background-size: contain;
  margin-right: .133333rem;
  position: relative;
  top: .08rem
}

.header .drop-games li a {
  display: block;
  width: 100%;
  height: 2.146667rem;
  margin: 0 auto;
  padding: .4rem;
  box-sizing: border-box;
  position: relative
}

.header .drop-games li .img {
  float: left;
  width: 1.346667rem;
  height: 1.346667rem;
  border-radius: .266667rem;
  overflow: hidden
}

.header .drop-games li .img img {
  width: 100%;
  height: 100%
}

.header .drop-games li .txt {
  float: left;
  padding-left: .4rem
}

.header .drop-games li .txt h3 {
  font-size: .4rem;
  color: #fff
}

.header .drop-games li .txt p {
  font-size: .373333rem;
  color: #9e9e9e
}

.header .cover {
  display: none;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,.6);
  position: fixed;
  left: 0;
  top: 1.6rem;
  z-index: 8
}

.header .cover.show {
  display: block
}

.footer {
  width: 100%;
  padding: .4rem .26rem;
  background-color: #333;
  font-size: .3rem;
  color: #7d7d7d;
  line-height: .64rem;
  position: relative;
  text-align: center
}

.footer a {
  display: inline-block;
  color: #7d7d7d
}

.footer .list {
  padding-bottom: .266667rem
}

.footer .list a {
  padding: 0 .133333rem
}

.footer .copyright {
  padding-top: .266667rem;
  font-size: .266667rem;
  line-height: 1.6;
  position: relative
}

.footer .copyright img {
  width: 2.293333rem;
  position: absolute;
  right: 0;
  bottom: .133333rem
}

.pagination {
  padding: 1.066667rem 0;
  font-size: .32rem;
  color: #8d8d8d;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center
}

.pagination .go,.pagination a {
  display: inline-block;
  min-width: .746667rem;
  height: .64rem;
  margin: 0 .106667rem;
  line-height: .64rem;
  border: 1px solid #e8e8e8;
  text-align: center;
  border-radius: .053333rem;
  font-size: .32rem;
  color: #8d8d8d;
  vertical-align: middle;
  cursor: pointer
}

.pagination .go:hover,.pagination a.current,.pagination a:hover {
  background-color: #46a6fd;
  border-color: #46a6fd;
  color: #fff
}

.pagination #firstPage,.pagination #lastPage,.pagination .firstPage,.pagination .lastPage {
  width: 1.173333rem;
  line-height: .64rem
}

.pagination #nextPage,.pagination #prePage,.pagination .nextPage,.pagination .prePage {
  position: relative;
  text-indent: -99999px
}

.pagination #nextPage::after,.pagination #prePage::after,.pagination .nextPage::after,.pagination .prePage::after {
  content: '';
  display: block;
  width: .16rem;
  height: .16rem;
  border-left: 1px solid #8d8d8d;
  border-top: 1px solid #8d8d8d;
  position: absolute;
  left: .293333rem;
  top: .213333rem
}

.pagination #prePage::after,.pagination .prePage::after {
  transform: rotate(-45deg)
}

.pagination #nextPage::after,.pagination .nextPage::after {
  left: 8px;
  transform: rotate(135deg)
}

.pagination #nextPage:hover::after,.pagination #prePage:hover::after,.pagination .nextPage:hover::after,.pagination .prePage:hover::after {
  border-left: 1px solid #fff;
  border-top: 1px solid #fff
}

.pop {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  padding-top: 1.733333rem;
  box-sizing: border-box
}

.pop .mask {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1
}

.pop .content {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%,-50%)
}

.pop-login,.pop-register {
  display: none;
  width: 80%;
  max-width: 610px;
  padding: 0 .8rem;
  margin: 0 auto;
  background-color: #fff;
  border-radius: .266667rem;
  overflow: hidden;
  position: relative;
  z-index: 2
}

.pop-register .title {
  text-align: center;
  font-size: .373333rem;
  color: #666;
  line-height: .906667rem;
  padding-top: .266667rem
}

.pop-close {
  display: block;
  width: .44rem;
  height: .32rem;
  background: url(../images/close.png) no-repeat center;
  background-size: contain;
  position: absolute;
  right: .266667rem;
  top: .266667rem;
  z-index: 3;
  cursor: pointer
}

.pop-login .login-menu {
  text-align: center;
  margin: .4rem auto .133333rem;
  border-bottom: 1px solid #e5e5e5;
  display: flex
}

.pop-login .login-menu li {
  flex: 1;
  display: inline-block;
  font-size: .373333rem;
  color: #666;
  line-height: 1.173333rem;
  cursor: pointer
}

.pop-login .login-menu li.cur {
  border-bottom: 1px solid #4c9dfb
}

.pop-login .login,.pop-register .register {
  margin-bottom: 0
}

.pop-group .group-item {
  border-bottom: 1px solid #eee;
  height: 1.28rem;
  position: relative
}

.pop-group .clear-input {
  display: none;
  width: .533333rem;
  height: 100%;
  cursor: pointer;
  background: url(../images/clear-icon.png) center right no-repeat;
  background-size: .48rem;
  position: absolute;
  right: 0;
  top: 0
}

.pop-login .captcha .clear-input {
  right: 2.4rem
}

.pop-login .sms .clear-input,.pop-register .sms .clear-input {
  right: 2.666667rem
}

.pop-group .g-input {
  float: left;
  width: 100%;
  height: 100%;
  text-indent: .8rem;
  border: none;
  background: 0 0;
  outline: 0;
  font-size: .346667rem
}

.pop-login .captcha {
  display: none
}

.pop-login .captcha .g-input {
  width: 60%
}

.pop-login .sms .g-input {
  width: 60%
}

.pop-register .sms .g-input {
  width: 50%
}

.pop-group .group-reminder-icon {
  width: .48rem;
  height: .48rem;
  position: absolute;
  left: 0;
  top: .4rem
}

.pop-group .get-captcha {
  float: right;
  width: 2.133333rem;
  height: 100%
}

.pop-group .get-captcha img {
  float: left;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer
}

.pop-group .get-sms {
  display: block;
  width: 2.266667rem;
  height: .8rem;
  background-color: #0097ff;
  outline: 0;
  border: none;
  text-align: center;
  border-radius: .066667rem;
  overflow: hidden;
  font-size: .32rem;
  color: #fff;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: .213333rem
}

.pop-group .get-sms.gray {
  background-color: #999;
  font-size: .32rem;
  color: #ccc
}

.pop-about {
  font-size: .346667rem;
  color: #6c6c6c;
  line-height: 1.173333rem
}

.pop-about input,.pop-agreement input {
  vertical-align: middle;
  position: relative
}

.pop-about a {
  color: #0097ff;
  float: right
}

.pop-agreement {
  font-size: .346667rem;
  color: #6c6c6c;
  line-height: .96rem
}

.pop-agreement a {
  color: #6c6c6c
}

.pop-bottom {
  text-align: center;
  font-size: .346667rem;
  color: #666;
  padding: .4rem 0
}

.pop-bottom a {
  color: #fd9f31
}

.pop-btn {
  display: block;
  width: 100%;
  height: 1.2rem;
  text-align: center;
  border-radius: .133333rem;
  background-color: #4c9dfb;
  font-size: .4rem;
  color: #fff;
  border: none;
  cursor: pointer
}

.pop-protocol {
  padding-bottom: .4rem;
  font-size: .346667rem;
  color: #a8a8a8;
  text-align: left
}

.pop-protocol a {
  color: #a8a8a8
}

.pop-verified .content {
  width: 80%;
  max-width: 610px;
  border-radius: .266667rem;
  background-color: #fff
}

.pop-verified .head {
  text-align: center;
  font-size: .426667rem;
  color: #333;
  line-height: 1.333333rem;
  border-top: 1px solid transparent;
  border-bottom: 1px solid #c7ced3;
  position: relative
}

.pop-verified .body {
  padding: .8rem;
  box-sizing: border-box;
  font-size: .373333rem;
  color: #666
}

.pop-verified .tips {
  margin-bottom: .266667rem
}

.pop-verified .verified-item {
  border-bottom: 1px solid #eee;
  position: relative
}

.pop-verified .verified-l {
  width: .48rem;
  position: absolute;
  left: 0;
  top: .32rem
}

.pop-verified .verified-l img {
  width: 100%;
  height: 100%;
  vertical-align: middle
}

.pop-verified .verified-r {
  width: 100%
}

.pop-verified .verified-r .ipt-inner {
  display: inline-block;
  width: 100%;
  height: 1.28rem;
  border: none;
  box-sizing: border-box;
  text-indent: .8rem;
  font-size: .373333rem;
  color: #333;
  line-height: 1.28rem
}

.pop-verified .btn-verified {
  display: block;
  width: 100%;
  height: 1.2rem;
  margin: .666667rem auto 0;
  font-size: .373333rem;
  color: #fff;
  text-align: center;
  line-height: 1.2rem;
  border-radius: .133333rem;
  background: #4c9dfb
}

.pop-verified .clear-input {
  display: none;
  width: .533333rem;
  height: 100%;
  cursor: pointer;
  background: url(../images/clear-icon.png) center right no-repeat;
  background-size: .48rem;
  position: absolute;
  right: 0;
  top: 0
}

.pop-wait .content {
  width: 80%;
  max-width: 610px;
  border-radius: .266667rem;
  background-color: #fff
}

.pop-wait .head {
  text-align: center;
  font-size: .426667rem;
  color: #333;
  line-height: 1.333333rem;
  border-top: 1px solid transparent;
  border-bottom: 1px solid #eee;
  position: relative
}

.pop-wait .body {
  padding: .8rem 0;
  box-sizing: border-box;
  font-size: .373333rem;
  color: #666;
  text-align: center
}

.pop-wait .body img {
  width: 4.133333rem;
  height: 3.6rem;
  margin-bottom: .533333rem
}

.pop-wait .btn-comfirm {
  display: block;
  width: 6.346667rem;
  height: 1.2rem;
  margin: .666667rem auto 0;
  font-size: .373333rem;
  color: #fff;
  text-align: center;
  line-height: 1.2rem;
  border-radius: .133333rem;
  background: #4c9dfb
}

.crumbs {
  width: 100%;
  height: 1.44rem;
  margin: 0 auto;
  box-shadow: 0 0 9px 1px rgba(0,0,0,.07);
  margin-bottom: .533333rem;
  position: relative
}

.crumbs .inner {
  padding: 0 .533333rem;
  font-size: .32rem;
  color: #000;
  line-height: 1.44rem
}

.crumbs .inner a {
  color: #999;
  margin-right: .266667rem;
  padding-left: .533333rem;
  background: url(../images/crumbs-icon1.png) no-repeat left center;
  background-size: .16rem .28rem
}

.crumbs .inner a:first-child {
  padding-left: 0;
  background: 0 0
}

.crumbs .inner span {
  padding-left: .533333rem;
  background: url(../images/crumbs-icon2.png) no-repeat left center;
  background-size: .16rem .28rem
}

.change-success .content {
  width: 68%;
  max-width: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%,-50%);
  border-radius: .266667rem;
  background-color: #fff;
  padding: 0 .533333rem
}

.change-success .tips {
  text-align: center;
  font-size: .426667rem;
  font-weight: 700;
  color: #666;
  padding: .8rem 0
}

.change-success .tips i {
  display: block;
  width: 2.04rem;
  height: 2.026667rem;
  margin: 0 auto;
  background: url(../images/success-icon.png) no-repeat center;
  background-size: contain;
  margin-bottom: .266667rem
}

.loading {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 1;
  transition: all 1s;
  z-index: 1000
}

.loading .spinner {
  width: 1.066667rem;
  height: 1.066667rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%)
}

.loading .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%
}

.loading .container1>div,.loading .container2>div,.loading .container3>div {
  width: .266667rem;
  height: .266667rem;
  background-color: #4b9dfb;
  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

.loading .container2 {
  transform: rotateZ(45deg)
}

.loading .container3 {
  transform: rotateZ(90deg)
}

.loading .circle1 {
  top: 0;
  left: 0
}

.loading .circle2 {
  top: 0;
  right: 0
}

.loading .circle3 {
  right: 0;
  bottom: 0
}

.loading .circle4 {
  left: 0;
  bottom: 0
}

.loading .container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s
}

.loading .container3 .circle1 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s
}

.loading .container1 .circle2 {
  -webkit-animation-delay: -.9s;
  animation-delay: -.9s
}

.loading .container2 .circle2 {
  -webkit-animation-delay: -.8s;
  animation-delay: -.8s
}

.loading .container3 .circle2 {
  -webkit-animation-delay: -.7s;
  animation-delay: -.7s
}

.loading .container1 .circle3 {
  -webkit-animation-delay: -.6s;
  animation-delay: -.6s
}

.loading .container2 .circle3 {
  -webkit-animation-delay: -.5s;
  animation-delay: -.5s
}

.loading .container3 .circle3 {
  -webkit-animation-delay: -.4s;
  animation-delay: -.4s
}

.loading .container1 .circle4 {
  -webkit-animation-delay: -.3s;
  animation-delay: -.3s
}

.loading .container2 .circle4 {
  -webkit-animation-delay: -.2s;
  animation-delay: -.2s
}

.container3 .circle4 {
  -webkit-animation-delay: -.1s;
  animation-delay: -.1s
}

@-webkit-keyframes bouncedelay {
  0%,100%,80% {
      -webkit-transform: scale(0)
  }

  40% {
      -webkit-transform: scale(1)
  }
}

@keyframes bouncedelay {
  0%,100%,80% {
      transform: scale(0);
      -webkit-transform: scale(0)
  }

  40% {
      transform: scale(1);
      -webkit-transform: scale(1)
  }
}

@-webkit-keyframes fadeInRight2 {
  0% {
      opacity: 0;
      transform: translate3d(25%,0,0)
  }

  100% {
      opacity: 1;
      transform: none
  }
}

@keyframes fadeInRight2 {
  0% {
      opacity: 0;
      transform: translate3d(25%,0,0)
  }

  100% {
      opacity: 1;
      transform: none
  }
}

.fadeInRight2 {
  -webkit-animation-name: fadeInRight2;
  animation-name: fadeInRight2
}

@-webkit-keyframes fadeInUp2 {
  0% {
      opacity: 0;
      transform: translate3d(0,25%,0)
  }

  100% {
      opacity: 1;
      transform: none
  }
}

@keyframes fadeInUp2 {
  0% {
      opacity: 0;
      transform: translate3d(0,25%,0)
  }

  100% {
      opacity: 1;
      transform: none
  }
}

.fadeInUp2 {
  -webkit-animation-name: fadeInUp2;
  animation-name: fadeInUp2
}

#shiyue2 {
  width: 1.466667rem;
  height: 1.466667rem;
  position: fixed;
  right: .533333rem;
  bottom: .533333rem;
  z-index: 6;
  background: url(../images/shiyue2.png) no-repeat center;
  background-size: contain;
  cursor: pointer;
}