@charset "utf-8";
/* CSS Document */
html { height: 100%; font-size:62.5%;}
* { margin: 0; padding: 0; list-style: none; font-style: normal;}
body {font-family: "微软雅黑",Tahoma, Geneva, sans-serif;  color:#333; }
img {  border: 0; display: inline-block;  max-width: 100%;}
a{text-decoration:none;color: #666;}
a:focus{color: #666;}
.clear{ clear:both; height:0; overflow:hidden;}
.flt{ float:left;}
.frt{ float:right;}

/*----------------------------------------------------------------*/

.fs12{ font-size: 12px;}
.fs15{ font-size: 15px;}
.fs16{ font-size: 1.1rem;}
.fs18{ font-size: 18px;}
.fs21{ font-size: 21px;}
.bg-zs{  overflow: hidden;}


.viewport-index{
    max-width: 640px; background: #260702;
    margin: 0 auto; 
	/* padding-bottom:20px; */
}
/*----------投放页----------*/

/*页面top*/
.bottom_box{
    width: 100%; position: fixed;   bottom:0; left:0; z-index: 1000;
}
.box_title{display: block;clear: both;  background-color: #012b4b; max-width: 640px; height: auto;  margin: 0 auto; padding-left:8px;   box-sizing: border-box; -webkit-box-sizing: border-box; overflow: hidden;}
.bottom_box .btm_icon{ float:left; width: 10.63%;margin-top:0.8rem;margin-bottom:0.8rem; display:inline-block;}
/*.bottom_box p{ color: #fff;margin:9px 0 0 6px;  text-decoration:none;}*/
.titleName{
    float:left;
    width:60.13%;
    color: #fff;
    margin: 0.8rem 0 0 10px;
    text-decoration: none;
}
.box_bj{ width:100%;background-color: #012b4b; }
.bottom_box .titleName b{ display: block; cleaR:both; width:100%;font-size:1.25em; line-height: 1.25em;}
.bottom_box .titleName span{ display: block; cleaR:both; width:100%;font-size:0.8em; line-height: 1.2rem;}
.bottom_box div .download_btn{
    float: right;
    display: block;
    width: 22.13%;
    border-radius: 4px;
    font-size: 0.8rem;
    line-height: 2.3rem;
    /* padding: 0 10px; */
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    background: #273195;
    box-shadow: 2px 2px 1px #04e5df;
    margin-top: 0.8rem;
    margin-right: 1rem;
    /*position: absolute; top:12px; right: 8px;*/
}
/*end 页面top*/


.imgBox{  width: 100%; display: block;}

.top01,.top02{ position: relative;}
.text01{ color: #fff; text-align: center; width: 100%; position: absolute; bottom: 12%; left: 0;}
.text02{  line-height: 2.3rem; width: 100%;  color: #580891; text-align: center; position: absolute; bottom: 23.5%;; left: 0; font-size:0.6rem;}
.btn01{ width: 60%; height: 4rem; position: absolute; left: 20%; bottom: 6%;}

.xtb-qp01{ position: absolute; top: 11%; left: 0%; width:23%;
    -webkit-animation: start 1.5s infinite linear;
    -moz-animation: start 1.5s infinite linear;
    animation: start 1.5s infinite linear;
}
.xtb-qp02{ position: absolute; top:35%; left:6%; width: 20%;
    -webkit-animation: start 1.5s infinite ease-in-out;
    -moz-animation: start 1.5s infinite ease-in-out;
    animation: start 1.5s infinite ease-in-out;
}
.xtb-qp03{ position: absolute; top: 8%; right: 0%; width: 24%;

    -webkit-animation: start 1.5s infinite ease-out;
    -moz-animation: start 1.5s infinite ease-out;
    animation: start 1.5s infinite ease-out;
}
.xtb-qp04{ position: absolute; top:37%; right:3%;  width:19%;
    -webkit-animation: start 1.5s infinite ease;
    -moz-animation: start 1.5s infinite ease;
    animation: start 1.5s infinite ease;
}


@-webkit-keyframes start
{
    0%{opacity:1;-webkit-transform:translate(0,-5px)}
    20%{opacity:1;-webkit-transform:translate(0,0px)}
    40%{opacity:1;-webkit-transform:translate(0,2px)}
    60%{opacity:1;-webkit-transform:translate(0,0px)}
    80%{opacity:1;-webkit-transform:translate(0,-7px)}
    100%{opacity:1;-webkit-transform:translate(0,-5px)}

}
@-moz-keyframes start
{
    0%{opacity:1;-webkit-transform:translate(0,-5px)}
    20%{opacity:1;-webkit-transform:translate(0,0px)}
    40%{opacity:1;-webkit-transform:translate(0,2px)}
    60%{opacity:1;-webkit-transform:translate(0,0px)}
    80%{opacity:1;-webkit-transform:translate(0,-7px)}
    100%{opacity:1;-webkit-transform:translate(0,-5px)}
}

@keyframes start
{
    0%{opacity:1;-webkit-transform:translate(0,-5px)}
    20%{opacity:1;-webkit-transform:translate(0,0px)}
    40%{opacity:1;-webkit-transform:translate(0,2px)}
    60%{opacity:1;-webkit-transform:translate(0,0px)}
    80%{opacity:1;-webkit-transform:translate(0,-7px)}
    100%{opacity:1;-webkit-transform:translate(0,-5px)}
}



/*banner*/
.game-xx-banner{ overflow:hidden; padding: 10px;}
.game-xx-banner .swiper-slide {
    text-align: center;
    font-size: 18px;
    width:80%;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.game-xx-banner .swiper-slide img{
    width: 100%; border-radius:4px;
}
.swiper-pagination-bullet{ display:none;}
/*end banner*/

/*图片点击放大*/
.carrousel {
    position: fixed; width:100%; height:100%;
    background-color: rgba(10, 10, 10, 0.8); top:0px; left:0;
    display: none; z-index:1000;
}
.carrousel img{ width:100%; position:absolute; top: 50%;
    left:0%;
    transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%); border-radius:0px;}
/*end 图片点击放大*/

.btn02{  width:72%; position: relative; left:14%;text-align: center; margin: 25px 0;}
.btn02 a{ background: url("../images/btn02.png") no-repeat center; height:70px; line-height:66px; font-weight: bold; width: 100%; background-size: 100% auto; color: #fff; display: inline-block;}

/*-------end 投放页---------*/


@media only screen and (max-width:1920px) {
    html {
        font-size:75%;
    }
    .btn02 a { background-size: auto 70px;}
    .text01 {

        bottom: 14%;

    }
}
@media only screen and (max-width: 435px) {
    html {
        font-size:68.8%;
    }

    .btn02 a{  background-size: 100% auto; }
    .text01 {

        bottom: 12%;

    }

}
@media only screen and (max-width: 384px) {
    html {
        font-size:68.8%;
    }
    .fs12{ font-size: 12px;}
    .fs15{ font-size: 14px;}
    .fs16{ font-size: 18px;}
    .fs18{ font-size: 17px;}
    .fs21{ font-size:20px;}

    /*.bottom_box,.bottom_box > div{  height:78px;}*/
}


@media only screen and (max-width: 360px) {
    html {
        font-size:62.5%;
    }
    .fs12{ font-size: 10px;}
    .fs15{ font-size: 13px;}
    .fs16{ font-size: 14px;}
    .fs18{ font-size: 16px;}
    .fs21{ font-size:19px;}

    .bottom_box,.bottom_box > div{  height:70px;}


}


.touf-btn a {
    color: #bebebe;
    text-decoration: none;
}
.touf-btn {
    width: 100%;
    text-align: center;
    line-height: 22px;
    padding: 0 0 20px 0;
    color: #bebebe;
}
.btn{
    position:relative;
}
.btna{
    position: absolute;
    z-index: 10;
    top: 14%;
    left: 15%;
    display: block;
    clear: both;
    width: 70%;
    height: 5rem;

}
.top7{
	position: relative;
}
.box-border{ 
	width: 75%;
	height: 24.33rem;
	border-radius:4px;
	position: absolute;
	z-index: 10;
	top: 0;
	left: 12.5%;
}
.logo_img{
	width: 38.93%;
	height: 3.8rem;
	position: absolute;
	z-index: 10;
	top: 0.5rem;
	left: 0.86rem;
}