.container{
    width: 100%;
    display: block;
    overflow: hidden;
}
/*banner*/
.swiper-container {
  width: 100%;
  height: 9.04rem;
  text-align: center;
  position: relative;
}
.swiper-slide {
    text-align: center;
    background: #fff;
}
.swiper-container img{
    width: 100%;
    display: block;
}
.swiper-container .swiper-pagination{
    position: absolute;
    z-index: 20;
    bottom: .4rem;
    text-align: right;
}
.swiper-container .swiper-pagination .swiper-pagination-bullet{
    display: inline-block;
    width: .2rem;
    height: .2rem;
    border-radius: 100%;
    margin: 0;
    margin-right: .21rem;
    opacity: 0.8;
    cursor: pointer;
}
/* .swiper-container .swiper-pagination .swiper-pagination-bullet:nth-of-type(3){
    margin-right: .53rem;
} */
.swiper-pagination-bullet{
    background: #555;
}
.swiper-pagination-bullet-active{
    background: #f08200;
}
/*tab*/
.tab{
    width: 100%;
    background: #f08200;
    display: block;
}
.tab ul{
    width: 100%;
    height: 1.86rem;
    display: block;
}
.tab li{
    width: 25%;
    height: 1.86rem;
    float: left;
}
.tab a{
    width: 1.86rem;
    height: 1.86rem;
    display: block;
    float: left;
}
.tab .tab-s-link{
    width: 3.25rem;
    height: 3.75rem;
    text-decoration: none;
}
.tab .phone-game{
    background: url(../images/tab.jpg) center no-repeat;
    background-position: 0 0;
    background-size: 7.52rem;
}
.tab .cur .phone-game{
    background: url(../images/tab_hover.jpg) center no-repeat;
    background-position: 0 0;
    background-size: 7.52rem;
}
.tab .big-game{
    background: url(../images/tab.jpg) center no-repeat;
    background-position: -1.86rem  0;
    background-size: 7.52rem;
}
.tab .cur .big-game{
    background: url(../images/tab_hover.jpg) center no-repeat;
    background-position: -1.86rem  0;
    background-size: 7.52rem;
}
.tab .tv-game{
    background: url(../images/tab.jpg) center no-repeat;
    background-position: -3.72rem 0;
    background-size: 7.52rem;
}
.tab .cur .tv-game{
    background: url(../images/tab_hover.jpg) center no-repeat;
    background-position: -3.72rem 0;
    background-size: 7.52rem;
}
.tab .page-game{
    background: url(../images/tab.jpg) center no-repeat;
    background-position: -5.58rem 0;
    background-size: 7.52rem;
}
.tab .cur .page-game{
    background: url(../images/tab_hover.jpg) center no-repeat;
    background-position: -5.58rem 0;
    background-size: 7.52rem;
}
.tab-wrap{
    width: 100%;
    display: block;
}
.tab-list{
    padding:0.4rem;
    background: #f4f3f3;
    display: block;
    overflow: hidden;
    display: none;
    padding-bottom: 0;
}
.tab-show{
    display: block;
}
.tab-box{
    width: 3.25rem;
    height: 4.6rem;
    display: none;
    border: 1px solid #e5e5e5;
    float: left;
    margin-bottom: 0.18rem;
    background: #fff;
}
.tab-list .tab-box-show{
    display: block;
}
.tab-show .tab-box,.tab-box-s{
    animation-name:change;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-time-function: ease-in;
}
.tab-show .tab-box:nth-child(even),.tab-box-s:nth-child(even){
    animation-name:changeR;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-time-function: ease-in;
}
.tab-box:nth-child(even){
    float: right;
}
.tab-box img{
    width: 3.25rem;
    height: 2.85rem;
    display: block;
}
.tab-box-s{
    width: 3.25rem;
    height: 3.75rem;
    display: none;
    border: 1px solid #e5e5e5;
    float: left;
    margin-bottom: 0.18rem;
    background: #fff;
}
.tab-box-s:nth-child(even){
    float: right;
}
.tab-box-s img{
    width: 3.25rem;
    height: 2.85rem;
    display: block;
}
.box-lang{
    width: 100%;
    height: 0.88rem;
    padding-left: 0.26rem;
}
.box-lang p{
    display: block;
}
.box-lang .name{
    color: #000;
    font: bold 0.3rem/0.3rem "微软雅黑";
    padding-top: 0.14rem;
    padding-bottom: 0.1rem;
}
.box-lang .desc{
    color: #999;
    font:0.24rem/0.24rem "微软雅黑";
}
.btn-box{
    width: 100%;
    border-top: 1px solid #e5e5e5;
}
.btn-box a{
    display: block;
    width: 50%;
    height: 0.86rem;
    line-height: 0.86rem;
    text-align: center;
    text-decoration: none;
    font: 0.3rem/0.86rem "微软雅黑";
}
.btn-box .home{
    color: #333;
    border-right: 1px solid #e5e5e5;
    margin-left: -1px;
}
.btn-box .down{
    color: #f08200;
}
.tab .more{
    width: 100%;
    height: 0.4rem;
    color: #666;
    display: block;
    text-align: center;
    text-decoration: none;
    font: 0.3rem/0.4rem "微软雅黑";
    padding-bottom: 0.4rem;
}
.tab .more img{
    width: 0.22rem;
    padding-left: 0.2rem;
}
/*热门活动*/
.title{
    color: #000;
    font: bold 0.4rem/0.4rem "微软雅黑";
    padding-top: 0.5rem;
    padding-bottom: 0.32rem;
    padding-left: 0.42rem;
}
.act-img{
    width: 100%;
    height: 1.95rem;
    padding-bottom: 0.46rem;
}
.act-img a{
    width: 50%;
    height: 1.95rem;
    display: block;
    float: left;
}
.act-img img{
    width: 100%;
    display: block;
}
.news-ul{
    display: block;
    padding-bottom: 0.46rem;
    border-bottom: 1px solid #ddd;
}
.news-ul li{
    display: block;
    padding: 0 0.45rem 0 0.4rem;
    width: 6.65rem;
}
.news-ul li a{
    color: #333;
    height: 0.8rem;
    font: 0.3rem/0.8rem "微软雅黑";
    text-decoration: none;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    width: 5.75rem;
    padding-right: 0.9rem
}
.news-ul li span{
    float: right;
    position: absolute;
    right: 0;
}
/*辅助工具*/
.tool{
    display: block;
    overflow: hidden;
}
.tool-box{
    display: block;
    overflow: hidden;
    padding-bottom: 0.5rem;
}
.tool .tool-list{
    width: 25%;
    float: left;
    text-align: center;
}
.tool .tool-list a{
    color: #333;
    display: block;
    text-decoration: none;
}
.tool .tool-list img{
    width: 1.22rem;
    height: 1.22rem;
    display: block;
    margin: 0 auto;
}
.tool .tool-list p{
    padding-top: 0.16rem;
    font: 0.24rem/0.24rem "微软雅黑";
}
.tool-img{
    display: block;
    height: 2.49rem;
}
.tool-img a{
    width: 50%;
    float: left;
}
.tool-img img{
    width: 100%;
    height: 2.49rem;
    display: block;
}
.back-top{
    width: 100%;
    height: 1.5rem;
    color: #666;
    display: block;
    text-align: center;
    text-decoration: none;
    font: 0.3rem/1.5rem "微软雅黑";
}
.back-top img{
    width: 0.22rem;
    padding-left: 0.2rem;
}
/*loading*/
.mask-spinner{
    background: #000;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .8;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
}
.spinner {
    margin: 100px auto;
    width: 50px;
    height: 60px;
    text-align: center;
    font-size: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1000;
    margin-left: -25px;
    margin-top: -30px;
}
 
.spinner > div {
  background-color: #f08200;
  height: 100%;
  width: 6px;
  display: inline-block;
   
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
 
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
  20% { -webkit-transform: scaleY(1.0) }
}
 
@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}


/*切换动画*/
@keyframes change{
    from{
        transform: translateX(-400px);
    }
    to{
        transform: translateX(0);
    }
}
@keyframes changeR{
    from{
        transform: translateX(400px);
    }
    to{
        transform: translateX(0);
    }
}