* {
  margin : 0;
  padding: 0;
  border : none;
}

html,
body {
  margin    : 0;
  height    : 100%;
  position  : relative;
 /* background: url(/static/images/bg-img1.png) center center / cover no-repeat fixed;*/
}

input {
  outline: none;
}

.text_center,
.text-center {
  text-align: center;
}

.text-green {
  color: #40c9cc;
}

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

i {
  font-style: normal;
}

li {
  list-style: none;
}

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

.common_fixed_box {
  position  : fixed;
  left      : 0;
  right     : 0;
  width     : 100%;
  max-width : 800px;
  bottom    : 0;
  background: #fff;
  margin    : auto;
  box-sizing: border-box;
}

/*弹出页面*/
.common_dialog_page {
  position  : fixed;
  width     : 100%;
  top       : 0;
  left      : 0;
  bottom    : 0;
  right     : 0;
  background: #f7f6f9;
  z-index   : 100;
}

.common_dialog_body {
  width     : 100%;
  margin    : auto;
  max-width : 800px;
  height    : 100%;
  overflow-y: auto;
}

/*padding*/
.p_t_10 {
  padding-top: 10px;
}

.p_b_10 {
  padding-bottom: 10px;
}

.p_l_15 {
  padding-left: 15px;
}

.p_r_15 {
  padding-right: 15px;
}

/*flex*/
.flex_box {
  display: flex;
  display: -webkit-flex;
}

.flex_box.center {
  justify-content: center;
}

.flex_1 {
  flex: 1;
}

/*btn*/
.btn {
  display        : inline-block;
  text-align     : center;
  border         : 1px solid initial;
  outline        : none;
  text-decoration: none;
}

.btn.large {
  display    : block;
  height     : 40px;
  font-size  : 16px;
  line-height: 40px;
}

.btn.main {
  background  : #504cfb;
  color       : #fff;
  border-color: initial;
}

.btn.radius {
  border-radius: 2em;
}

/*弹窗页面头部*/
.common_header {
  position     : fixed;
  z-index      : 2;
  top          : 0;
  width        : 100%;
  max-width    : 800px;
  height       : 50px;
  line-height  : 50px;
  background   : #fff;
  text-align   : center;
  border-bottom: 1px solid #eee;
}

.common_header .right_box {
  position   : absolute;
  right      : 0;
  top        : 0;
  color      : #666;
  padding    : 0 15px;
  line-height: 50px;
  font-weight: 500;
  font-size  : 16px;
}

.common_header .icon_back {
  position       : absolute;
  left           : 0;
  height         : 50px;
  width          : 50px;
  background     : url(../images/28/icon_back.png) no-repeat center center;
  background-size: 9px auto;
}

/*表单*/
.common_radio,
.common_gouxuan {
  display: none;
}

.common_radio+.radio_style,
.common_gouxuan+.gouxuan_style {
  border        : 2px solid #e4e4e4;
  width         : 16px;
  height        : 16px;
  border-radius : 50%;
  position      : relative;
  display       : inline-block;
  box-sizing    : border-box;
  vertical-align: middle;
  margin-top    : 6px;
}

.common_radio:checked+.radio_style {
  border-color: #5f69fa;
}

.common_radio:checked+.radio_style:after {
  position        : absolute;
  content         : "";
  width           : 70%;
  height          : 70%;
  left            : 50%;
  top             : 50%;
  transform       : translate(-50%, -50%);
  background-color: #5f69fa;
  display         : block;
  border-radius   : 50%;
}

.common_gouxuan:checked+.gouxuan_style {
  content        : "";
  background     : url(../images/28/icon_gouxuan_act.png) no-repeat center;
  background-size: 100% 100%;
  border         : none;
}

.common_radio:checked+.radio_style {
  border-color: #5f69fa;
}

/*子帐号*/
#account {
  max-width       : 330px;
  width           : 80%;
  margin          : 0 auto;
  background-color: #fff;
  position        : fixed;
  left            : 50%;
  top             : 50%;
  transform       : translate(-50%, -50%);
  border-radius   : 10px;
  padding         : 14px 0;
}

header {
  line-height    : 37px;
  border-bottom  : 1px solid rgba(238, 238, 238, 1);
  text-align     : center;
  font-size      : 12px;
  max-width      : 640px;
  margin         : 0 auto;
  display        : flex;
  justify-content: space-between;
  padding        : 0 14px 14px;
}

header .back-div {
  position: absolute;
  width   : 50px;
  height  : 50px;
}

header .back-div .back {
  position         : absolute;
  top              : 15px;
  left             : 18px;
  width            : 11px;
  height           : 20px;
  background-size  : 100%;
  background-image : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAA7CAYAAAAaa4isAAAEZElEQVRYR72ZW8tVVRSGny+1sjKtjCgk+hfVhRcqUkpZplFKhkUnD5UnQjyUmnmRSlpZERQiKIVWlEQHRUQjoW66NVSoNNAKyoo8lMoTY8pkuT732nuvteeV7G87xzvfMcY7DruP3p4BwO3A08AzwNG+HtofCNwFbACuBz4A5vcSwJ3AG8AtgHZPAdt7AUDaRwIfA1cH42eB34GZTQO4FJgYtF+XuftXYDGwsWkAGl8PjAjaxSD1jwFbgRNNAfDeW4EvgSEZ7X8D0yMA//+4CQDSfg/wTmZcW8eAJdIOnE7uqBuA900G1gA3Zz6X9ieB94F/8tSvG8BtBdqTzwW1vUxz6gJwebz8TeCqzNARYCGwBTjTFAAV7hHgReCGzMhJ4NEIOP9deupgYEL4VhbS0eB4YFcrqe8GgAYfAKR9cJZqPwPPBe2t7Hechqaa+fwSMDyz8qfyGiLTL+11ZIFRnfI8sajBeyMLSgOujiCU6oeAV4HkcwvLj8Bc4KOWnBe+0E4MaFAxWQYMy+75BZgV1U7Baeu0A0CfvwZcmUm4tNtkGO2VaW83Bnz5gxHtOe2H4+WlCleVhlYM6PMngJUFhfspfP5JXliqGm2HgceBl4GhGe2WVGnfC/zXidEqAC4D7gPeLUS7tD8M7O7WcPr/ZS4wyGYDywGBpHMgWmmbjK5f3h8AG0iNW1hSJ+N3/wLGAfvqNO7FOQO+VpF5vUD7D6H539RFe1kMWMNnxMtz2vcDc4AvABWv9iMDg8K3SyPakxFpt9TuqZv2IgM2DU4s6eW+1JJqqn1X+5NLaoETinmejh2rQ8Pqpo2nIHRIcHi4IgzKgEpnyf22aRDGgD2do7JVLk+9E4AD5VdNx4CPVHyc2Z/P2is//x54tuksSCxb6aYB6wruOBTy+3UT7ihK8SWhhKuClWRTd4wJJaxVD8pqgcEo7bojb7UPBrgddcZEf/2AmnA/8FbGhC9Xli3RO+tyR6uGRJEyJpTq9N2UHfYDHbVhZbWgvwfpgqeAFYUUtS+wan4K/NsNG60Y8G5BTI1W3HT16A6zQxCfNw0g3W+pfrugE7pjdGRHRziqMJAuNjAt2S8U5oKjEZgycX7zURVNOwC80y7ZnnBtITtMUfsGY6Kt0y6AdLkz4OZMMf3cIWVsdMuVQXQKwCbGFHVeyKfjP2IF57xQaUzrFEDKjinZuJayw0F1AbCtCg3dAPB+a8fd4Y48RY/H54rVRU+3ALw87YhcVrgFT8eYUD8MzEZ3RMkdlvJXClXUzmpR01uy9GLdoSi5pEirOhXTxaSp6+8DF5w6XJBfKggD04b2xuwP1gt7Tzelquf5UzcAL1Yx3Z75y0i+tOzJrji9zBlzFPBhYVuuTijn76UvNsFAzrBM2E+4QU22dIebVX8vONk0AN3hesfsuCZD5i8mZsempgFoU9m+I1Ix//HiN9c8vQCQHq5iuta9KfvV7LNeApCJSeGOa0Mv5vUSQJJt5wt3jvOdws8BLkbZjfLjB/wAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
}

header img {
  width         : 37px;
  height        : 37px;
  background    : #D8D8D8;
  border-radius : 8px 8px 8px 8px;
  vertical-align: middle;
  overflow      : hidden;
}

header .title_l {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

header .title_r {
  color: #504CFB;
}

.add-account {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  margin         : 10px 14px 14px;
}

.add-account .add {
  width            : 25px;
  height           : 25px;
  background-image : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAEAElEQVRoQ92aTYhbVRSAvzPJi9NaRKS6EKrF/vmzULSCLhTqH+imhVJsrdqNzEzSYVzpwqIbqwtdWOo0ycxKqq1iKeiqqNWiGwVFdGHRqa1VwYVOhwqlDu8mOfJeJtNJJ+bdm7yXMe9uc3LO+e69591zzz1CTEMLy1ZBZRPKRpANoKuBlcCVgAAXgGmQs6A/IXwD2RNS/Of3OFwIDHQ8dGjwBgYquxDZDtzaoaKTqL5HJntQDsz+2qGOcKachw57tzPAHmArMOCsoPUfasBRarwiE+Z7V51OIDrCdYj3GvD03HZxtWcjr8BB1DwvZf60+UMgYw2i+dw20EngalvlXcqdBxmSkn/ERk8kiG4jx0pvH5C3UZiATJlp86wcwW+nuy2IFliB5o6CPpKAgw4q5WPE3yrF8MvXcvwniA6xnKx3HOVeB4vJiQpfUjEPySQXWxlpCTK3nY4BDyTnWQealU85Zx5rtc1ag+S9Yiwxcc0q2DkBN90DZ76CQ8Mw0/X5V5aSWRSvi0C0kHs8PKDiGGPH4OYHL2ma+hz2Pdy9ZpUdUvabfGwC0dHl11M1P8T2id1/AbK5S47XqjC6rHsQOE/Gu03GL/7RUNYMkvcOAU/EYSnUUWzxxSwsAOvO0GEpmZ2LQHS3dye1IJGzPyQj/UgWRBlgoxww3zad7DqS/QCRzZHOuQgkCwKqH0q5smUeRHcP3kiteibGBLCOmzQI1Mhk1sr47C9hjGghuweVvS6TbSWbPAiIvCxF/6U6SN47Cdxi5ZyLUC9AYEpKZoOENzut/Obin7Vsb0CAzBrRvLcLeMvaORfBXoEIz4gWvDdRRl38s5btHci4aD73UWJpeu9APgm21s/AGutZdhHsFQicDkD+Bq5q618ji113f3Pu5ALlKlvx4dQXthnzuQAkuOy3H5dnsVHycf5ulzH7diBvzMAVK+J0z15XsDJjkbZDkOit9f9fkRm7YA9i5MlJWHtf72Kkauox8k5wq4w8r4NgT8vnNz0HYmpSlJQkjSlI409Jyazv/4sVsldK/ot1kJHB1Uj1dN9fdeswKSg+zMXJXcDXfV8OmoPp/wJdCJKWkmk9VnLbEX3XPj1tI7lUReyGS5r3SsBI1zCNZLPxrGCXALY3K0xI0Szyrb8eeuAzps2j1g894RZLw9Pb/BZLw2PoPEzwPH2ttx9luOuY6USBMMFfZqyr5+mFdpekYUBlWMr++zb8kQ0DTTD1Fo7XgadizQCaPQ2qOm+j5rlEWjiagAreHSgvJNJUI7wqRfOdzSoslHFakcuVL2hz2tHxs4TwIzU9vCRtTq1mK4TKVDcBdyOsR2k0njWKUvXGM+EsylSYoFYzJ2RyNrJEYrM6/wLlXaVr2os+zgAAAABJRU5ErkJggg==);
  background-size  : 100%;
  background-repeat: no-repeat;
}

.add-account .text {
  margin   : 0 6px;
  font-size: 16px;
  color    : #ff6905;
}

.add-account .question {
  width            : 15px;
  height           : 15px;
  background-image : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABG9JREFUWEfNV11oHFUU/s5M3GBW0wStJEGhrSJGsIKFanywgqE1rQ/ig7VFFNFkZrNsqChGRezmQUpEU0iyu3N3+6CCtj7pg1po89I8WAMqmIgR0aoozJI+JI0GzLgzR85yt25NsjOdinjfduece7/7nZ/7HULENTo6em1ra2sfEfUCuJOItgLYpN0vMPOPAL5i5qnl5eWTw8PDv0XZmsKMlFI3M/NLRHQAQEuYvf6+wswniOiIZVk/NPLZEMDY2NjVLS0tI0R0CMBVsgkz/wLgYwBnTdP8zvO8C/J/IpHY5Pv+rQB6AOwjopv0oX8COOq67uFsNvvHekDWBZDP57eZpvkhgDv0wdNE9JrrulPZbDZodKNsNmt0dHTsBiCs3adt53zff3hwcPDcP33XAMjn89tN05wCsBnAIjOnbds+HpH6S8wcxzlARDkA7cy8wMwPpFKpr+uNLgGgb/6ZPnze87x9mUxGkiv2mpiY2JpIJD4BcJuACIKgp56JiwAk5slkckbTPr+6urpraGjofOyT6xzHx8c3Nzc3TwsIAHOu6+6s5cRFAEqpUQAvCO2e5+0Iu7lSShLzGX3OMcuyJOE2XJqJLyQcAF63LGtYjKsApNQAzEu2M/PBKDFXSj0H4A194vOWZb0ZxpbOifcACNhuKdEqAMdxjhHR08w8bdv2rrCNNOgsgMPadsSyLPkduhzHOaOrQ1jrJ+lwbW1tZd1k9liWdSp0FwC5XO4a0zSrAHzfH0mn079H8XMc50EiOglgZWlpqZMcx9lPRCekyZTL5S1hdR7lkEY20ic6Ozt/BnBjEAT7BUCRiPqZ2bFtOxXlgEKhcD8Rvaw75CqAV2zb/jyKrw6fA8Bi5pIAmCGincz8pG3b70TZRClVqqsAcanGM4qvzrkniOhtADOklJJav94wjJ7+/n5pQqFrcnLyukQisZeZHwewm5nfsm37qVBHbVAqle4JguAsgPMCQChMeJ7Xnclkvo26iabyKIBDlwsgl8t1NzU1fQPA+18AWJDefzkhqLGklIrFgOM4PUT0aTUEcZLwXwDwdxLGKcMrBaCUqpYhgCIVi8VHmfn9OI0oTgjqGxER7Y/diuNWQbFY7GNm0QcrlUqlI/ZjFBfAmsdINsrlcrfouoz8HGsA8hzLsxypEyqlDgJ4V57jSqVyezqd/n6NIGFm0YF3pVKpn8KaUqlU2uH7/phhGK8ODAycaWRfKBS2ENGXRLRWkIjjfyjJZl3XvXuNJNOUijKSBnGDKKQgCPZGYSLs5oZhyPsvelCa3r31w8pGsvy0gJBwALgiWS4ppmlf8DyvN5PJzNUDXncw0Rrxg/rBBMCRcrl8KkywSJ13dXXtCYLgxbrBZBbAI+uNaQ1Hs2QyKTrv2dpoBuBXZv6oNpoFQbAktzEMo602mhHRQ6J29C3jjWb1FEmJmqYpt3kMQDKsMvT3FQDHK5XKqJRaI5/Q6bjmLOK1vb29LwiCXiLaDmBb/XgO4BwzzxqGMbW4uBh5PP8LwZhzzzyfSycAAAAASUVORK5CYII=);
  background-size  : 100%;
  background-repeat: no-repeat;
  display          : inline-block;
}

.account-list {
  overflow: hidden;
  margin  : 0 14px;
}

.account-item {
  box-sizing      : border-box;
  width           : 100%;
  height          : 50px;
  padding         : 0 10px;
  background-color: #F1F1FF;
  border          : 1px solid #B3B2FE;
  border-radius   : 5px;
}

.account-item div {
  display    : inline-block;
  line-height: 50px;
  font-size  : 0;
}

.account-item .change-name {
  font-size: 15px;
  color    : rgba(255, 105, 5, 1);
}

.account-item .name {
  font-size: 15px;
  color    : rgba(51, 51, 51, 1);
}

.account-item .name-div {
  font-size: 15px;
  color    : rgba(51, 51, 51, 1);
  display  : inline-flex;
  width    : 33%;
}

.account-item .name-span {
  font-size    : 15px;
  color        : rgba(51, 51, 51, 1);
  width        : 100%;
  white-space  : nowrap;
  text-overflow: ellipsis;
  overflow     : hidden;
  display      : inline-block;
  background   : transparent;
}

.account-item .into {
  float          : right;
  font-size      : 15px;
  color          : #504CFB;
  margin-top     : 15px;
  text-decoration: none;
}

.account-item .into i {
  display          : inline-block;
  width            : 10px;
  height           : 10px;
  margin-left      : 6px;
  background-size  : 100%;
  background-repeat: no-repeat;
  transform        : rotate(45deg);
  border-right     : 1px solid;
  border-top       : 1px solid;
}

.modal {
  position        : fixed;
  top             : 0;
  left            : 0;
  width           : 100%;
  height          : 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal .content {
  position        : absolute;
  top             : 0;
  right           : 0;
  bottom          : 0;
  left            : 0;
  margin          : auto;
  background-color: rgba(255, 255, 255, 1);
  border-radius   : 5px;
  overflow        : hidden;
}

.modal .content .title {
  height     : 55px;
  line-height: 55px;
  text-align : center;
  border-bottom: 1px solid #dbdbdb;
  font-size: 21px;
  color    : #000;
  text-align: center;
}

.popup1 {
  display: none;
}

.popup1 .content {
  max-width: 330px;
  width    : 80%;
  height   : 230px;
}

.popup1 .popup_close {
  width   : 30px;
  float   : left;
  padding : 10px;
  position: absolute;
  left    : 0;
}

.popup1 .content .text {
  padding  : 21px 14px 15px;
  font-size: 15px;
  text-align: center;
}

.popup1 .content input {
  box-sizing   : border-box;
  display      : block;
  width        : calc(100% - 28px);
  height       : 40px;
  margin-left  : 14px;
  padding      : 0 14px;
  line-height  : 40px;
  border       : 1px solid rgba(220, 220, 220, 1);
  font-size    : 15px;
  border-radius: 5px;
}

.popup1 .content .button {
  display    : flex;
  width      : 100%;
  /* height  : 36px; */
  margin-top : 20px;
  line-height: 36px;
  align-items: center;
  padding    : 0 20px 22px;
  box-sizing : border-box;
}

.popup1 .content .button div {
  box-sizing   : border-box;
  display      : inline-block;
  width        : 40%;
  text-align   : center;
  border-radius: 4px;
  font-size    : 0;
}

.popup1 .content .button button {
  box-sizing      : border-box;
  display         : inline-block;
  width           : 40%;
  text-align      : center;
  font-size       : 0;
  line-height     : 36px;
  background-color: #514BFC;
  border-radius   : 18px;
}

.popup1 .content .button .left {
  font-size    : 16px;
  background   : #fff;
  color        : #514BFC;
  margin-left  : 3%;
  margin-right : 7%;
  border-radius: 18px;
  border       : 1px solid #514BFC;
}

.popup1 .content .button .right {
  font-size  : 16px;
  color      : #fff;
  margin-left: 7%;
}

.popup2 {
  display: none;
}

.popup2 .content {
  width : 300px;
  height: 292px;
}

.popup2 .content .text {
  margin-top : 10px;
  padding    : 0 17px;
  line-height: 21px;
  font-size  : 15px;
}

.popup2 .content .button {
  height       : 40px;
  margin-top   : 20px;
  line-height  : 40px;
  text-align   : center;
  color        : #fff;
  background   : #504CFB;
  margin-left  : 17px;
  margin-right : 17px;
  border-radius: 4px;
}

.float_icon {
  position: absolute;
  top     : 30%;
  z-index : 10000;
  right   : 0;
}

#icon_left {
  width           : 40px;
  height          : 40px;
  position        : absolute;
  background      : url(../../../images/gameicon.png) no-repeat center center;
  background-size : auto 100%;
  right           : 0px;
  border-radius   : 50%;
  background-color: #099cda;
}

.float_icon.horizontal #icon_left span {
  position         : absolute;
  width            : 100%;
  height           : 100%;
  top              : 0;
  left             : 0;
  background       : url(../../../images/gameicon.png) no-repeat center center/100%;
  border-radius    : 50%;
  background-color : #099cda;
  -webkit-transform: rotateZ(90deg);
  -moz-transform   : rotateZ(90deg);
  -ms-transform    : rotateZ(90deg);
  -o-transform     : rotateZ(90deg);
  transform        : rotateZ(90deg);
}

.mask {
  display   : none;
  width     : 100%;
  height    : 100%;
  background: #000;
  position  : fixed;
  left      : 0;
  top       : 0;
  opacity   : 0.6;
  cursor    : pointer;
  z-index   : 99;
}

.float_page {
  width     : 88%;
  max-width : 640px;
  position  : fixed;
  top       : 0;
  bottom    : 0;
  left      : -100%;
  background: #f5f5f5;
  z-index   : 500;
}

.float_page.horizontal {
  width: 45%;
}

.side_btn {
  left    : 100%;
  position: absolute;
  /* width:13.6%; */
  width   : 10.6%;

  top            : 50%;
  transform      : translateY(-50%);
  background-size: 100% auto;
  border-radius  : 0 8px 8px 0;
  overflow       : hidden;
}

.side_btn .btn {
  width          : 100%;
  padding        : 7px 0;
  text-align     : center;
  display        : block;
  color          : #fff;
  background     : #504cfb;
  font-size      : 12px;
  border-bottom  : 1px solid #fff;
  text-decoration: none;
}

.side_btn .btn:last-child {
  border-bottom: none;
}

.side_btn .btn img {
  width        : 20px;
  display      : block;
  margin       : auto;
  margin-bottom: 3px;
}

.float_close img {
  transform: rotateY(180deg);
}

.float_close .close_button {
  width          : 30px;
  height         : 92.5px;
  background     : url(../images/closed.png) no-repeat center;
  background-size: cover;
  cursor         : pointer;
  z-index        : 99;
  position       : absolute;
  left           : 0;
  top            : 50%;
  margin-top     : -46px;
}

.float_close .news_button {
  width                     : 30px;
  padding                   : 6px 0;
  height                    : 50px;
  position                  : absolute;
  left                      : 0;
  top                       : 50%;
  margin-top                : -108.5px;
  z-index                   : 99;
  background                : #fff;
  text-align                : center;
  cursor                    : pointer;
  line-height               : 25px;
  color                     : #00b3fe;
  border-top-right-radius   : 2px;
  border-bottom-right-radius: 2px;
}

.float_close .news_button em {
  display      : none;
  position     : absolute;
  right        : -5px;
  top          : 8px;
  width        : 10px;
  height       : 10px;
  background   : #f00;
  border-radius: 50%;
}

/*游戏*/
#gameIframe {
  padding         : 0;
  margin          : 0 auto;
  background-color: #fff;
  height          : 100%;
  /* max-width    : 600px; */
}

/*加载页面*/
.loading-game {
  position  : absolute;
  left      : 0;
  top       : 0;
  width     : 100%;
  height    : 100%;
  background: #fff;
  text-align: center;
  z-index   : 2;
  display   : table;
}

.loading-message {
  position       : absolute;
  left           : 50%;
  top            : 5%;
  transform      : translate(-50%, 0);
  z-index        : 3;
  margin         : 0 auto 3%;
  padding        : 5px 12px;
  display        : -webkit-flex;
  display        : flex;
  align-items    : center;
  justify-content: center;
  border-radius  : 0.5em;
  background     : #eee;
  animation      : loading-message 1s linear 1;
  transition     : 0.3s all ease;
  min-width      : 215px;
}

@keyframes loading-message {
  0% {
    opacity  : 0;
    transform: translate(-50%, -0.5rem);
  }

  30% {
    opacity  : 0.8;
    transform: translate(-50%, 0);
  }
}

.loading-message .cover {
  width   : 15%;
  overflow: hidden;
  display : block;
}

.loading-message .cover img {
  width        : 100%;
  border-radius: 50%;
}

.loading-message .name {
  font-size    : 13px;
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
  margin-left  : 10px;
  color        : #666;
  flex         : 88;
}

.loading-message .name em {
  color: #d21519;
}

.loading-game-logo {
  max-width: 95px;
  width    : 100%;
}

.loading-game .tablecell {
  top     : 21%;
  position: absolute;
  left    : 0;
  right   : 0;
}

.loading-text {
  font-size : 16px;
  animation : loading 1s linear infinite;
  margin-top: 25%;
}

.loading-game .loading_logo {
  width    : 100%;
  max-width: 250px;
  position : absolute;
  left     : 50%;
  transform: translateX(-50%);
  top      : 78%;
}

@keyframes loading {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

/*支付页面*/
.new_pay_page {
  position  : fixed;
  width     : 100%;
  top       : 0;
  left      : 0;
  bottom    : 0;
  right     : 0;
  background: #f7f6f9;
  z-index   : 100;
}

.new_pay_page .pay_body {
  width     : 100%;
  margin    : auto;
  max-width : 800px;
  height    : 100%;
  overflow-y: auto;
}

.pay_page_title {
  color    : #999;
  padding  : 15px 0;
  font-size: 14px;
}

.pay_page_panel {
  background-color: #fff;
  border-radius   : 15px;
  padding         : 0 20px;
}

.pay_page_line {
  display        : flex;
  justify-content: space-between;
  border-bottom  : 1px solid #ededed;
  padding        : 13px 0;
}

.pay_page_line:last-child {
  border-bottom: none;
}

.pay_page_line .item_logo {
  display       : inline-block;
  width         : 35px;
  height        : 35px;
  vertical-align: middle;
  margin-right  : 8px;
}

.color_money {
  color: #fe6602;
}

.logo_alipay {
  background     : url(../images/28/alipay.png) no-repeat center;
  background-size: 100%;
}

.logo_wxpay_h5,
.logo_wxpay {
  background     : url(../images/28/weixin.png) no-repeat center;
  background-size: 100%;
}

.pay-box .content {
  padding          : 10px 20px;
  z-index          : 10002;
  background       : #fff;
  width            : 80%;
  max-width        : 320px;
  left             : 50%;
  top              : 50%;
  position         : fixed;
  -o-transform     : translate(-50%, -50%);
  -moz-transform   : translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform        : translate(-50%, -50%);
  border-radius    : 0.85rem;
}

.pay-box .pay-head {
  position     : relative;
  padding      : 1.7rem 0;
  border-radius: 0.35rem 0.35rem 0 0;
  font-size    : 22px;
  text-align   : center;
  box-sizing   : border-box;
  color        : #3cd3d7;
  left         : 0;
  top          : 0;
  right        : 0;
}

.pay-box .box-close,
.pay-box .pay-qrcode-close {
  position     : absolute;
  right        : -2.1rem;
  top          : -0.8rem;
  color        : #fff;
  background   : #3cd3d7;
  font-size    : 20px;
  width        : 25px;
  height       : 25px;
  text-align   : center;
  line-height  : 21px;
  border-radius: 50%;
  font-size    : 1.4rem;
  cursor       : pointer;
  display      : inline-block;
}

.pay-qrcode .qrcode {
  text-align: center;
}

.pay-qrcode .qrcode img {
  width: 200px;
}

.pay-qrcode .tip {
  text-align    : center;
  padding-bottom: 8px;
}

.pay-box .zf_middle_icon {
  width  : 75px;
  height : 75px;
  margin : 42px auto;
  display: block;
}

.pay-box .account-btn {
  width: 40%;
  margin: 5px 5%;
  text-align: center;
  color: #999999;
  font-size: .7rem;
  white-space: nowrap;
  border-radius: 1.1rem;
  line-height: 2.2rem;
  border: 1px solid;
  background: #fff;
}

.pay-box .pay-btn {
  width: 40%;
  margin: 5px 5%;
  text-align: center;
  background: #504CFB;
  color: #fff;
  font-size: .7rem;
  white-space: nowrap;
  border-radius: 1.1rem;
  line-height: 2.2rem;
}

.icon-account {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAq5JREFUWEfFlj1oFFEUhc992YUoUWxErCwkiCJplPiDFjYBRYMKFlpIVnbmzbpgkbiFlfb+FDHZnTurRBQUFDQqqIWFhTZqFUQULVRECGjjuioY5sqEjCTrbN7MbJY8GBjmnnvO9+bnvSEs8qBFzkdiAM/zjonINgAbAPQAmBSRCSJ6p5S6aFnW5ySTSgTAzHcB9M8T8BXAca31rbgQsQGYWeKaAtBaay+OPhYAMzMAO45hqPF9f0ehUHhm6jECVCqVM0qp0yajxrqIvK3VaptKpVJ9vl4jgOu6t4noQFKAQE9EvbZtv2gJgJnfA1ibBsD3/VyhULjSKkANQFcaACIq2bZ9rlWA4EXanhJgj23bD1sFqALIpwHo6OjozufzwSNsOowvYaVSGVBKjSUFIKIntm3vMvUZAQIDz/PGRGTAZNZQX6O1/mTqiQUQmDDzHQD7TYYz9Z1a66dxtLEBAjPXdQ8S0WUAK5qYX6rX6ycGBwd/xQmfXiviCkNduVzuyWQyW0RkPRGtE5FvAN4AeK21Hk/qlxggaYBJbwQYHh5e2dnZ2SciGwFsBtALYHkT4+8AngN4SUSviOixZVmTqT9DZtYAhgB0m2bSpP6RiEay2exILpf7HaWJvAPVanWV7/tXAfSlDG5sm1BKnbIs60FjIRKAmW8COLRA4aHNB6XU1sZH8h+A53knReTsAoeHdte01kdne88BYObVAL60KXzaVkT6Hce5H2bMAfA8b6+I/Cu2A0REhhzHuRAJkPb3KwmoiJQdxylGAjDzPQD7khim0D7SWu+OBHBd9zoRHU5hGrtFRG44jnMkEmB0dLQrk8kEv2BtG1NTU8uKxeKPSIDwIjMHq1+w9S6ZOZbOOg+uZZsQ/gEQ7ITh8XPW+bjW+nyshaht048wNm5G7Yb5C9Ts1yHdPoavAAAAAElFTkSuQmCC);
  display: inline-block;
  width: 1rem;
  height: 1rem;
  position: absolute;
  left: 1rem;
  top: 1rem;
  background-size: 100% auto;
}

.icon-safe {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAshJREFUWEftlj1oFFEUhc+dXSysNukCdoKNIBgiQbFIQCP4V4hOE2LjMm9mo4IgFhJxhShYKBjB2fdYRKOYFJomiI1iSCPxB2xEwVSClhoQG5N5V17I6sSd312DTbbcd+85H3fvO/sI//lD7fjX6/XOxcXF04VCYc5xnCetaLUEIKXsZeZTRDQYMp0nojHHcW7mAckFoJQaZGYXwO4Ek+/MfKdYLI6Vy+X5NJhUADNmrXWFmYcAbEkTDJ8z80PLsm4n/TyxAEqpHQCM6RAzl/IYR9TOArgnhKj/fdYEIKU8wMzHichu0zSq/cMKyJXGYRQAr4HxKkmtdb/neTPmy3WA9Qms1QRsrfVWy7IuRi30Wi+h3dHRMbWwsDDJzEdbAfgBYGNTYBAtXxtm7ku4piY7HgOYBHAork5r3et53su4a/gGQHcUgOM4/VLKqwDORYjbQRA8LRaLE8y8LylLgiDorFQq3yIBlFL3mTn8L/dbS2t9yfO8qpTyFgAvZGJbljWrtZ4A0J8SZJ+FEJtik9D3/Wrc8pimBoRS6q6JbABm7HMAjPmuDCn6TAixJxZAKWX+fMaThEKTOMbMb4noAYCeDOamRAkhRCxArVbrIaJXaWIGAsCMZVk3AGxLqw+du0IIGQuwjPhnvDl000uJ6F2pVOq2bftnIoDv+32WZT1Pl8xdcVYIcS3cFfsgkVI+AnAkt0V8w6dCobC9XC5/zQSglDrIzNP/CqCxuE35kmQgpTwJINcrN0Zv1eZnmkCjSEp5GcD5NiYxLYQ4HNef+ipeuRV1Zj7RAsTrIAgGGrEb1Z8JwDRKKa8DOJMDYmppaWlkeHj4fVJPZgAjUqvV9hPRCICdsSMl+sLMo0IIPwtsLgAjWK1WN3R1dRmIC00bTTSutR51XfdjFnNTkxsgtJybiWiv1noAgHnvT7uu+yKrcWIS5hVpp/4XjqxEMGZBtxMAAAAASUVORK5CYII=);
  display: inline-block;
  width: 1rem;
  height: 1rem;
  position: absolute;
  left: 1rem;
  top: 1rem;
  background-size: 100% auto;
}

/*优惠券*/
.voucher_list {}

.voucher_list .voucher_item {
  margin-bottom: 20px;
}

.voucher_list .item_content {
  position     : relative;
  display      : block;
  min-height   : 106px;
  padding      : 11px 40px 11px 110px;
  box-sizing   : border-box;
  background   : #fff;
  border-radius: 10px;
  overflow     : hidden;
}

.voucher_list .item_content .l_box {
  position       : absolute;
  display        : flex;
  flex-direction : column;
  justify-content: center;
  padding        : 0 10px;
  box-sizing     : border-box;
  width          : 100px;
  left           : 0;
  top            : 0;
  bottom         : 0;
  background     : url(../images/28/yhq_bg.png) no-repeat center;
  background-size: 100% 100%;
  color          : #fff;
}

.voucher_list .item_content .l_box h2 {
  font-size: 22px;
  display  : inline-block;
}

.voucher_list .item_content .l_box .icon_money {
  font-size: ;
}

.voucher_list .item_content .l_box small {
  font-size: 12px;
}

.voucher_list .item_content .r_box {
  display        : flex;
  flex-direction : column;
  justify-content: center;
  min-height     : 84px;
}

.voucher_list .item_content .r_box p {
  padding-bottom: 10px;
  color         : #000;
  font-size     : 16px;
}

.voucher_list .item_content .r_box .color_gray {
  color    : #999;
  font-size: 12px;
}

.voucher_list .item_content .e_box {
  position  : absolute;
  right     : 11px;
  text-align: right;
  top       : 50%;
  transform : translateY(-50%);
}

.voucher_list .item_content.fail {
  -webkit-filter: grayscale(100%);
  -moz-filter   : grayscale(100%);
  -ms-filter    : grayscale(100%);
  -o-filter     : grayscale(100%);
  filter        : grayscale(100%);
  filter        : url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  filter        : progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

.voucher_list .item_content.fail .e_box {
  display: none;
}

.voucher_fixed_btn {
  width    : 60%;
  left     : 0;
  right    : 0;
  bottom   : 40px;
  margin   : auto;
  position : fixed;
  max-width: 450px;
}

/*弹窗*/
.icon_img {
  background     : url(../images/icons.png) no-repeat;
  background-size: 801px 107px;
  width          : 40px;
  height         : 40px;
  display        : block;
  margin         : 0 auto;
}

.close_icon {
  height             : 16px;
  width              : 16px;
  background-position: -15px 0;
}

.bottom_bg {
  position        : absolute;
  background-color: #fff;
  width           : 100%;
  height          : 100%;
  z-index         : -1;
  overflow        : hidden;
}

.pop_pos {
  position  : fixed;
  top       : 0;
  left      : 0;
  width     : 100%;
  height    : 100%;
  z-index   : 9999;
  background: rgba(0, 0, 0, 0.5);
}

.pop_box {
  position     : relative;
  width        : 90%;
  margin       : 0 auto;
  border-radius: 10px;
  max-width    : 640px;
  margin-top   : 10%;
}

.close_pop {
  position        : absolute;
  right           : 0;
  top             : -13px;
  background-color: #fff;
  border-radius   : 50%;
  display         : block;
  width           : 30px;
  height          : 30px;
  z-index         : 99;
}

.play-title {
  text-align   : center;
  line-height  : 26px;
  color        : #000;
  padding      : 15px;
  border-bottom: 1px solid #f3f3f3;
}

.play-more {
  clear        : both;
  margin-top   : 10px;
  /*height     :80px;*/
  border-bottom: 1px solid #f3f3f3;
}

.play-more ul {}

.play-more ul li {
  float     : left;
  padding   : 0 5px;
  /*height  : 22px;*/
  width     : 25%;
  text-align: center;
  box-sizing: border-box;
}

.shareBtnBox {
  font-size : 0;
  text-align: center;
}

.shareBtnBox .listitem {
  float     : left;
  width     : 33.333%;
  padding   : 10px;
  box-sizing: border-box;
  text-align: center;
}

.shareBtnBox .listitem img {
  max-width: 60px;
  width    : 100%;
  display  : block;
  margin   : auto;
}

.shareBtnBox .listitem:nth-child(1),
.shareBtnBox .listitem:nth-child(2),
.shareBtnBox .listitem:nth-child(3) {
  display: inline-block;
  float  : none;
}

@media (max-width: 450px) {
  .shareBtnBox .listitem img {
    max-width: 50px;
  }
}

#banner_2_0 {
  font-size: 25px;
  position : fixed;
  bottom   : 0;
  left     : 50%;
  transform: translateX(-50%);
  width    : 100%;
  z-index  : 1;
  max-width: 600px;
}