@media (max-width: 414px) {
  html {
    font-size: 18px;
  }
}
@media (max-width: 375px) {
  html {
    font-size: 16px;
  }
}
@media (max-width: 320px) {
  html {
    font-size: 15px;
  }
}
@keyframes shake {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  39% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  40% {
    transform: scale(1.1) rotate(10deg);
    -webkit-transform: scale(1.1) rotate(10deg);
  }
  60% {
    transform: scale(1.1) rotate(0deg);
    -webkit-transform: scale(1.1) rotate(0deg);
  }
  80% {
    transform: scale(1.1) rotate(-10deg);
    -webkit-transform: scale(1.1) rotate(-10deg);
  }
  100% {
    transform: scale(1.1) rotate(0deg);
    -webkit-transform: scale(1.1) rotate(0deg);
  }
}
@keyframes scaleout {
  0% {
    transform: scale(1);
    -webkit-filter: brightness(200%);
    -webkit-transform: scale(1);
  }
  100% {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    opacity: 0;
  }
}
body,html {
  background: #222a31;
}
::selection{background: transparent;}
a:active{background: transparent;}
a:visited{background: transparent;}
a:hover{background: transparent;}
a:link{background: transparent;}
a{-webkit-tap-highlight-color: transparent;}
input,select{-webkit-appearance:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.top-back{
  width: 100%;background: #000;color: #fff;position: relative;z-index: 66;
}
.top-back span{display: inline-block;line-height: 10vw;width: 20vw;text-align: center;font-size: 2rem;}
.top-back p{font-size: 0.8rem;display: inline-block;vertical-align: 1vw;}
.app {
  font-size: 0.9em;
}
.app #topBanner {
  position: absolute;
  display: block;
  width: 100%;
  height: auto;
  max-height: 180px;
  top: 0;
  left: 0;
  z-index: 0;
  -webkit-filter: blur(40px);
  filter: blur(40px);
  opacity: .8;
}
.app .start-play {
  color: #fff;
  font-size: 0.78rem;
  padding: 3.5% 6%;
  border-radius: 50px;
  background: linear-gradient(to right, #ff5b02, #ff4702);
  background: -webkit-linear-gradient(left, #ff7300, #ff3c04);
}
.app .user-top {
  padding: 2.8% 4.3%;
  overflow: hidden;
  position: relative;
}
.app .user-top .avatar {
  width: 9.5%;
  /*height: 9.5vw;*/
  border-radius: 100%;
  overflow: hidden;
  background: #ffffff;
  float: left;
  font-size: 0.8rem;
  text-align: center;
}
.app .user-top .avatar span {
  display: block;
  transform: scale(0.8);
  width: 130%;
  /*line-height: 9.5vw;*/
  margin-left: -15%;
  padding: 24% 0 25%;
}
.app .user-top .avatar img {
  display: block;
  width: 100%;
}
.app .user-top .uname {
  float: left;padding: 2%; margin-left: 1%;color: #fff;max-width: 18%;
  overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
.gold {
  min-width: 5%;
  /*height: 5.5vw;*/
  float: left;
  margin: 2% 0 0 1%;
  padding: 0.1% 1% 0.1% 6.5%;
  border-radius: 5vw;
  background: #2f3640 url("../img/gold1.png") no-repeat;
  background-size: auto 100%;
  /*line-height: 6vw;*/
  color: #ff9000;
}
.app .user-top .widget {
  width: 36%;
  /*height: 9vw;*/
  float: right;
}
.app .user-top .widget i {
  width: 5%;
  height: 70%;
  background: url('../img/phone.png') no-repeat;
  background-size: auto 100%;
  display: block;
  float: left;
  margin: 2% 0 0;
  animation: shake 0.8s linear infinite alternate;
}
.app .user-top .widget a {
  display: block;
  float: left;
  width: 72%;
  /*height: 5vw;*/
  text-align: center;
  background: -webkit-linear-gradient(left, #ff5b02, #ff4702);
  background: linear-gradient(to right, #ff5b02, #ff4702);
  border-radius: 9vw;
  padding: 2% 0 3%;
  /*line-height: 5vw;*/
  color: #fff;
  margin: 13% 0 0 23%;
  font-size: 0.78rem;
}
.app .user-top .widget em{
  display: block;
  width: 22%;
  padding-top: 22%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  margin: 3% 0 0 11%;
  float: right;
}
.app .user-top .widget .share{
  background-image: url("../img/a8.png");
}
.app .user-top .widget .kefu{
  background-image: url("../img/a7.png");
}
.app .user-top .widget .down{
  background-image: url("../img/a6.png");
}
.app .user-top .widget .focus{
  background-image: url("../img/a5.png");
}
.app .user-top .widget .serch-icon{
  background-image: url("../img/sousuo.png");
}


.app .banner {
  width: 100%;
  margin-bottom: 3%;
  overflow: hidden;
}
.app .banner .swiper-slide {
  background-position: center;
  background-size: 100% auto;
  width: 90%;
  height: 100%;
}
.app .banner .swiper-slide img {
  display: block;
  width: 100%;
  border-radius: 3px;
}
.app .main-taps {
  margin: 3% 9%;
  text-align: justify;
  font-size: 0;
}
.main-taps:after {width: 100%;height: 0;display: inline-block;overflow: hidden;content: ' ';vertical-align:top}
.app .main-taps a {
  display: inline-block;
  width: 10%;
  padding: 10% 0 0;
  text-align: center;
  color: #fff;
  font-size: 0.7rem;
}
.app .main-taps .a1 {
  background: url(../img/a1.png) no-repeat;
  background-size: 100% auto;
}
.app .main-taps .a2 {
  background: url(../img/a2.png) no-repeat;
  background-size: 100% auto;
}
.app .main-taps .a3 {
  background: url(../img/a3.png) no-repeat;
  background-size: 100% auto;
}
.app .main-taps .a4 {
  background: url(../img/a4.png) no-repeat;
  background-size: 100% auto;
}
.app .main-show {
  width: 96%;
  margin: auto;
  background: url("../img/radial.jpg") no-repeat center;
  background-size: 100% 100%;
  font-size: 0.7rem;
  color: #606368;
  position: relative;
}
.app .main-show .light{
  position: absolute;
  font-size: 3rem;
  top: 45%;
  right: 2%;
  transform: translateY(-50%);
  color: #464b52;
}
.app .main-show .import {
  width: 100%;
  margin: auto;
  overflow: hidden;
}
.app .main-show .import .my-list {
  width: 82%;
  float: left;
  overflow: hidden;
  transform: translateY(3px);
}
.app .main-show .import span {
  width: 6%;
  writing-mode: vertical-lr;
  display: block;
  float: left;
  padding: 4% 1.5% 4% 4%;
  transform: scale(0.95);
  text-align: center;
}
.app .main-show .import a {
  display: block;
  float: left;
  width: 20%;
  max-width: 47px;
  margin: 2% 4% 1% 2%;
}
.app .main-show .import p{
  color: #fff;
  width: 180%;
  /*line-height: 3vw;*/
  font-size: 0.77rem;
  transform: scale(0.8);
  margin-left: -40%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .main-show .import a img {
  width: 100%;
}
.app .side-nav-list {
  display: flex;
  background: #2b343f;
  padding: 5% 5% 2%;
  justify-content: space-around;
  border-bottom: 1px solid #393c48;
  font-size: 0.78rem;
}
.app .fiexd{
  position: fixed;
  width: 90%;
  z-index: 9999;
  top: 0;
  left: 0;
  box-shadow: 0 0 20px #000;
  background: #242b32;
}

.app .side-nav-list a {
  color: #606368;
  display: block;
  width: 17vw;
  text-align: center;
}
.app .side-nav-list .on {
  color: #ff5900;
}
.app .show-p {
  position: relative;
  min-height: 53px;
  padding: 11% 0 0 3%;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}
.app .show-p .boo{
  display: inline-block;width: 40%;position: relative;
  margin-left: 6px;
}
.app .show-p .boo .only-play{
  top: 84%;
}

.app .show-p .all-game{
  margin: 3% auto 0;
  width: 90%;
  overflow: hidden;
}
.app .show-p .all-game p{
  display: block;
  float: left;
  width: 20%;
  font-size: 0.75rem;
  color: #fff;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.app .show-p .all-game p img{
  cursor: pointer;
  width: 75%;
  display: block;
  margin: 0 auto 2%;
}
.app .show-p .all-game p a{
  display: block;
  width: 60%;
  margin: 9% auto 0;
}
.app .show-p .swiper-slide{
  display: block;
  border-radius: 5px;
  width: 43%;
  margin-right: 3%;
  position: relative;
  overflow: hidden;
}
.app .show-p .tu{
  display: block;

}
.app .show-p img {
  width: 100%;
  border-radius: 8px;
}
.app .show-p .only-play {
  position: absolute;
  top: 45%;
  right: 7%;
  padding: 3% 9.1%;
}
.app .newgame{
  margin: 3% 0 0;
}
.app .newgametop{
  overflow: hidden;
  position: relative;
  margin: 0 auto 3%;
  width: 91%;
  border-radius: 6px;
}
.app .newgametop img{
  width: 100%;
  display: block;
}
.app .newgametop .start-play{
  position: absolute;
  bottom: 5px;
  right: 6px;
  padding: 1.2% 3.2%;
}
.app .newgamesmor{
  overflow: hidden;
  width: 98%;
  margin: auto;
}
.app .newgamesmor .si-smor{
  float: left;
  width: 16.1%;
  margin-left: 3%;
  overflow: hidden;
  text-align: center;
}

.app .newgamesmor .si-smor img{
  width: 100%;
  display: block;
}
.app .newgamesmor .si-smor span{
  font-size: 0.75rem;
  color: #f86a51;
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 6% 0;
}
.app .newgamesmor .si-smor .start-play{
  width: 87%;
  padding: 7% 0;
  display: block;
  margin: auto;
}


.app .ser-tabs {
  display: flex;
  margin: 3% 0 0;
  padding: 4% 5% 1%;
  background: #2a333e;
  border-bottom: 1px solid #393c48;
  font-size: 0.78rem;
  justify-content: center;
}
.app .ser-tabs a {
  color: #606368;
  display: block;
  width: 17%;
  text-align: center;
  margin: 0 4% 0;
  padding: 0 1%;
}
.app .ser-tabs a:after{
content: "";
width: 100%;
height: 3px;
background: transparent;
display: block;
border-radius: 3px;
transform: translateY(6px);
-webkit-transform: translateY(6px);
}
.app .ser-tabs .on{
  color: #f4503f;
}

.app .ser-tabs .in{
  /*border-bottom: 2px solid #dc5002;*/
  color: #f4503f;
}
.app .ser-tabs .in:after{
  /*border-bottom: 2px solid #dc5002;*/
  background: #f4503f;
}
.app .ser-box {
  min-height: 50px;
  padding: 0 0 2.5%;
  background: #2a333e;
  overflow: hidden;
}
.app .single {
  overflow: hidden;
  margin-left: 4.5%;
  margin-top: 2.5%;
}
.app .single li {
  float: left;
}
.app .single .l1 {
  width: 14%;
  /*height: 14vw;*/
}
.app .single .l1 img {
  width: 100%;
  /*height: 100%;*/
}
.app .single .l2 {
  margin: 1% 0 0 2.5%;
  color: #fff;
  width: 34%;
}
.app .single .l2 .title {
  font-size: 0.9rem;
  margin-bottom: 1.5%;
}
.app .single .l2 .det {
  color: #606368;
  font-size: 0.7rem;
  transform: scale(0.95);
  margin-left: -3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .single .l3 {
  transform: scale(0.9);
  color: #606368;
  font-size: 0.7rem;
  margin-left: -1%;
  width: 29%;
  padding: 6% 0 0;
}
.app .single .l4{
  width: 15%;
  padding-top: 4%;
  text-align: center;
}
.app .single .l4 a{display: block;padding: 8% 0;width: 96%;margin: auto;}

.app .foot {
  width: 90%;
  text-align: justify;
  position: fixed;
  bottom: 0;
  padding: 0 5% 1%;
  margin: 0;
  z-index: 999;
  background: linear-gradient(to top, #10253d, rgba(0, 0, 0, 0));
  background: -webkit-linear-gradient(bottom, #10253d, rgba(0, 0, 0, 0));
  font-size: 0;
}
.app .foot a {
  display: inline-block;
  padding: 8% 0 0;
  width: 18%;
  text-align: center;
  color: #fff;
  font-size: 0.75rem;
  background-size: 49%;
  background-repeat: no-repeat;
  background-position: center top;
}
.app .foot .a1 {
  background: url(../img/a1.png) no-repeat;
  background-size: 100% auto;
}
.app .foot .a2 {
  background: url(../img/a2.png) no-repeat;
  background-size: 100% auto;
}
.app .foot .a3 {
  background: url(../img/a3.png) no-repeat;
  background-size: 100% auto;
}
.app .foot .a4 {
  background: url(../img/a4.png) no-repeat;
  background-size: 100% auto;
}

.app .foot a span {
  display: block;
  transform: scale(0.78);
}
.app .foot .nav-tab-1 {
  background-image: url("../img/new1.png");
  padding: 7% 0 0;
  background-size: 53%;
}
.app .foot .nav-tab-2 {
  background-image: url("../img/new2.png");
    padding: 7% 0 0;
  background-size: 42%;
}
.app .foot .nav-tab-3 {
  background-image: url("../img/new3.png");
  background-size: 46%;
}
.app .foot .nav-tab-4 {
  background-image: url("../img/new4.png");
  background-size: 44%;
}
.app .foot .nav-tab-5 {
  background-image: url("../img/new5.png");
  background-size: 44%;
}
.app .subject{background: #2a333e;margin: 3% auto 0;padding-bottom: 3%;}
.app .subject p{width: 18%;margin: auto;padding: 3% 0;color: #5f646f;position: relative;text-align: center;}
.app .subject p:after{
  content:"";
  display: block;
  height: 1px;
  background: #40464f;width: 110%;
  position: absolute;
  right: -120%;top: 50%;
}
.app .subject p:before{
  content:"";
  display: block;
  height: 1px;
  background: #40464f;width: 110%;
  position: absolute;
  left: -120%;top: 50%;
}
.app .subject .subject-img{}
.app .subject .subject-img .swiper-slide{width: 55%;margin: 0 0 0 5%;}
.app .subject .subject-img img{width: 100%;}

.app .subject ul{padding: 0 3%;}
.app .subject ul li{overflow: hidden;color: #5f646f;padding: 0 0 1%}
.app .news ul li:before{
  content: attr(data-text);
  width: 10%;display: block;float: left;
  border-radius: 3px;
  text-align: center;color: red;
  font-size: 12px;
  transform: scale(0.8);
}
.app .news ul .col_0:before{
  color: #ffb12f;border: 1px solid #ffb12f;
}
.app .news ul .col_1:before{
  color: #3cc779;border: 1px solid #3cc779;
}
.app .news ul .col_2:before{
  color: #ee89f8;border: 1px solid #ee89f8;
}
.app .news ul .col_3:before{
  color: #88a2f3;border: 1px solid #88a2f3;
}
.app .subject ul li a{display: block;float: left;color: #fff;width: 65%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 0.85rem;}
.app .subject ul li span{display: block;float: right;transform: scale(0.75)}

.app .subject .phone{color: #fff;font-size: 0.85rem;text-align: center}
.app .subject .phone span{display: block;transform: scale(0.65);margin: 2% 0;color: #999;}
.app .baoyou{
  background: #2b343f;padding-bottom: 3%;
}
.app .boot-game{overflow: hidden;background: #2a333e;margin-bottom: 16%;}
.app .boot-game .single {
  overflow: hidden;
  margin-left: 4.5%;
  margin-bottom: 2.5%;
  margin-top: 0;
}

.mark-1,.mark-2,.mark-img{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  text-align: center;
  display: none;
}
.mark-img{
  background: rgba(0, 0, 0, 0.55);
}
.mark-img img{
    display: block;
  margin: 10% auto 0;
  width: 80%;
  border-radius: 5px;
}
@-webkit-keyframes slit {
  0%{transform: rotateY(87deg) scale(0.5);}
  50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
  100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
}
@keyframes slit {
  0%{transform: rotateY(87deg) scale(0.5);}
  50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
  100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
}
/*@-webkit-keyframes slit2 {*/
  /*0%{transform: rotateX(0deg)}*/
  /*70% { transform: rotateX(53deg) translateZ(10px);animation-timing-function: ease-in;opacity: 1;}*/
  /*100% {transform: rotateX(53deg) translateY(-320px) scale(0.3); opacity: 0; }*/
/*}*/
/*@keyframes slit2 {*/
  /*0%{transform: rotateX(0deg)}*/
  /*70% { transform: rotateX(53deg) translateZ(10px);animation-timing-function: ease-in;opacity: 1;}*/
  /*100% {transform: rotateX(53deg) translateY(-320px) scale(0.3); opacity: 0; }*/
/*}*/

.mark-1 .bo-1 {
  width: 45%;
  margin: 55% auto 0;
  color: #c2c2c2;
  text-align: center;
  background: rgba(0, 0, 0, 0.62);
  border-radius: 15px;
  padding: 2% 0 7%;
}
.mark-1 .bo-1 .err {
  color: red;
  font-size: 4rem;
}
.mark-2{
  -webkit-perspective: 800px;
  perspective: 800px;
  background: rgba(0, 0, 0, 0.51);
}
.mark-2 .recent{
  width: 80%;
  margin: 58% auto 0;
  padding: 3%;

  /*background: rgba(0, 0, 0, 0.62);*/
  background: rgba(255, 255, 255, 0.76);
  transform-origin: bottom;
  border-radius: 5px;
  /*transform: translateZ(-3000px) rotateY(80deg);*/
  /*transform: rotateX(53deg) translateZ(10px);*/
  /*transform: translateZ(120px) rotateY(87deg) scale(0.5);*/
  position: relative;
}
.mark-2 .dd{overflow: hidden;height: 100%;}
.mark-2 .moveto{
  animation: slit .7s forwards ease-out;
}
.mark-2 .moveout{
  animation: slit2 .7s ease forwards;
}
.mark-2 .close-x{
  position: absolute;
  width: 20px;
  height: 20px;
  line-height: 21px;
  border: 1px solid #fff;
  font-size: 2rem;
  border-radius: 50%;
  top: -20%;
  right: 0;
  color: #fff;
  text-indent: 0;
}
.mark-2 a{
  margin: 2.5% auto 0;
  display: block;
  width: 25%;
  color: #fff;
  font-size: 0.78rem;
  padding: 1% 0;
  border-radius: 50px;
  background: linear-gradient(to right, #ff5b02, #ff4702);
  background: -webkit-linear-gradient(left, #ff7300, #ff3c04);
}

.mark-2 .recent img{width: 45px;height: 45px;}
.mark-2 .recent p{font-size: 0.77rem;padding: 1%;}

.mark-2 .daojishi{
  position: absolute;
  bottom: 2%;
  right: 2%;
  font-size: 12px;
}

.adlogin {
  max-width: 345px;
  width: 79%;
  margin: auto;
  background: #fff;
  border-radius: 5px;
  text-align: center;
  color: #000;
  position: fixed;
  top: 150px;
  z-index: 6;
  left: 50%;
  margin-left: -172.5px;
}
.adlogin .adbg,
.adlogin .real-login,
.adlogin .real-reg {
  position: relative;
  width: 86%;
  padding: 2% 7% 0;
}
.adlogin .head {
  border-bottom: 0.5px solid rgba(105, 105, 105, 0.63);
  padding: 3.5% 0;
  letter-spacing: 2px;
}
.adlogin .inp-1 {
  background: #c4c2c1 url("http://www.xy.com/h5platform/img/lo-1.png") no-repeat 5% center;
  background-size: auto 55%;
}
.adlogin .inp-2 {
  background: #c4c2c1 url("http://www.xy.com/h5platform/img/lo-2.png") no-repeat 5% center;
  background-size: auto 55%;
}
.adlogin .oncelogin {
  background: #ff6202;
  letter-spacing: 2px;
}
.adlogin .regi {
  background: #3d98ee;
}
.adlogin .lo-return,
.adlogin .zc-retu {
  width: 25%;
  margin: 4% auto 0;
  font-size: 0.8rem;
  padding: 2.5% 0;
}
.adlogin .other-login {
  padding-bottom: 2%;
}
.adlogin .other {
  font-size: 0.8rem;
  width: 32.5%;
  margin: 0 auto;
  padding: 3% 0;
  color: #000000;
  position: relative;
}
.adlogin .other:before {
  content: "";
  display: block;
  height: 1px;
  background: #696969;
  width: 76%;
  position: absolute;
  left: -76%;
  top: 50%;
}
.adlogin .other:after {
  content: "";
  display: block;
  height: 1px;
  background: #696969;
  width: 76%;
  position: absolute;
  right: -76%;
  top: 50%;
}
.adlogin .oth-icon {
  width: 46%;
  margin: 0 auto;
  text-align: justify;
  text-align-last: justify;
}
.adlogin .oth-icon li {
  text-align: center;
  color: #000;
  cursor: pointer;
  display: inline-block;
  width: 35%;
  text-align-last: center;
}
.adlogin .oth-icon span {
  font-size: 0.8rem;
  transform: scale(0.82);
  display: block;
  text-align: center;
}
.adlogin .oth-icon a {
  display: block;
  width: 51px;
  height: 51px;
  margin: 0 auto;
  border-radius: 50%;
}
.adlogin .oth-icon .sina {
  background: #000 url("http://www.xy.com/h5platform/img/sina.png") no-repeat center;
  background-size: 50%;
}
.adlogin .oth-icon .qq {
  background: #000 url("http://www.xy.com/h5platform/img/qq.png") no-repeat center;
  background-size: 45%;
}
.adlogin .oth-icon .a-login {
  background: #000 url("../img/a-icon.png") no-repeat 2.7vw -4vw;
  background-size: 115%;
}
.adlogin input{display: block;width: 76%;margin: 5.5% 0;border-radius: 5px;padding: 4.5% 10% 4.5% 14%;}
.adlogin a{-webkit-tap-highlight-color: transparent;color: #fff;display: block;border-radius: 5px;margin-top: 4%;padding: 3% 0;}