body{
    background:#1f1631;
}
.background{
    width:100%;
    position: relative;
    top:0;
    z-index: 1;
}
.a_main{
    width: 100%;
    position:absolute;
    top:26%;
    z-index: 10;
}
.a_main a{
    float: left;
    display: block;
    width: 18%;
    padding: 10% 0;
    /*background: rosybrown;*/
    margin:0 3.5%;
}

.warp{
    width: 100%;
    position: relative;
    top:0;
}

.top_image{
    width:100%;
    min-height: 100px;
    position:fixed;
    top:0;
    left: 0;
    z-index: 100;
    background:url("../images/top_img.png") top no-repeat;
    -webkit-background-size:100%;
    background-size:100%;
}
.top_image a{
    display:block;
    width:22.5%;
    position:fixed;
    top:2%;
    z-index: 1000;
}
.top_image a img{
    width: 100%;
}
.google{
    right:26%;
}
.apk,.apple{
    right:3%;
}

.content{
    /*float: left;*/
    width: 100%;
    position:relative;
    text-align: center;
}
.banner{
    width: 100%;
    /*float: left;*/
    position: relative;
}

.banner_img{
    width:100%;
    position: relative;
    z-index: 5;
}
.swiper-pagination{
    position:absolute;
    z-index: 10;
    width: 22%;
    border-radius:15px;
    background-color: rgba(35, 35, 35, 0.5);
    bottom:5%;
    right: 8%;
}
.banner .swiper-pagination-bullet{
    opacity:1;
    width:15%;
    border-radius:0;
    background:url("../images/banner_btn.png") no-repeat;
    -webkit-background-size:100%;
    background-size:100%;
    padding: 5% 0;
    margin-left: 5%;
    margin-top: 3px;
}

.banner .swiper-pagination-bullet-active{
    width:15%;
    border-radius:0;
    background:url("../images/banner_current.png") no-repeat;
    -webkit-background-size:100%;
    background-size:100%;
}

.index_news{
    width:100%;
    /*float: left;*/
    background:url('../images/index_news.png') center no-repeat;
    background-size: 100% 100%;
}

.index_news iframe{
    /*transform: scale(0.6);*/

    border: none;
    /* display: block; */
    margin-top: 17%;
    margin-left: 7%;
    margin-right: 7%;
    /* margin-bottom: 9%; */
    padding-bottom: 10%;


}

.index_video{
    width: 100%;
    /*float: left;*/
    position:relative;
    /*background:url('../images/index_video.png')top center no-repeat;*/
    /*background-size:auto 100%;*/
}

.video-button{

    display: block;
    position: absolute;
    width: 14%;
    height: 20%;
    top: 40%;
    left: 43%;

}

.video_image{
    width:100%;

}


.index_role{
    float: left;
    width: 100%;
    background:url("../images/index_role_bg1.png") no-repeat;
    -webkit-background-size:100%;
    background-size:100%;
    padding:5% 0;
    margin-top: 20px;
    position: relative;
    top: 0;
}
.index_voice_btn{
    width: 33%;
    height: 16%;
    position: absolute;
    z-index: 1;

    bottom: 22%;
    left: 32%;

}

.index_video_btn{
    width: 10%;
    height: 16%;
    position: absolute;
    z-index: 1;
    top: 12%;
    right: 5%;

}

.avatar{
    float: left;
    width: 10.6%;
    text-align: center;
    margin-left:3.5%;
    background: url("../images/avatars_bg.png") 0 0 no-repeat;
    -webkit-background-size:210%;
    background-size:210%;

}
.avatar:last-child{
    padding-bottom: 8%;
}
.avatar.odd{
    margin-left: 2%;
}
.avatar img{
    width: 82%;
    margin-right:1px;
    padding-top: 8%;
}
.line{
    float: left;
    width: 11.6%;
    height:4vw;
    margin-left:2%;
    background: url("../images/line.png") center no-repeat;
    -webkit-background-size:100%;
    background-size:100%;
}
.line.odd{
    position: relative;
    left:1%;
}


.active{
    background:url("../images/avatars_bg.png") 102% 0 no-repeat;
    -webkit-background-size:210%;
    background-size:210%;
}





@media screen and (min-height:1000px)
{
    .line{
        height: 2rem;
    }

}

.valist{
    float: left;
    width: 100%;
}
.VAlist img{
    display: block;
    margin:auto;
    padding:3% 0 5%;
    width: 90%;
}

.FBshare {
    float: left;
    width: 100%;
    position:relative;

}



.footer{
    width:100%;
}
/*-----------------------------------------------=
角色图鉴
-------------------------------------------------*/
.return_btn,.return_btn img{
    width: 100%;
}
.role_nav{
    padding:15px 5%;
    background-color:#372B53;
}
.role_nav ul{
    list-style: none;
    height: 40px;
    border-bottom: 3px solid #1f1631;

}
.role_nav ul li{
    display: inline-block;
    width: 33.33%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #61537D;
    font-weight: 800;

}
.role_content{
    padding:0 5% 7%;
    background-color:#372B53;
    width: 90%;
    min-height: 300px;
}
.role_list div{
    float: left;
    width: 20%;
    min-height: 80px;
    margin:3% 2.3%;
    position: relative;

}
.role_list div img{
    width: 100%;
    position: absolute;
    bottom: 0;
}
@media screen and (min-height:1000px){
    .role_nav ul,.role_nav ul li{
        height: 80px;
    }
    .role_content{
        min-height: 600px;
    }
    .role_list div{
        height: 160px;
    }
}
/*------------------------------------------------
游戏特色&&系统介绍
-------------------------------------------------*/
.info_content{
    width:100%;
    text-align: center;
    background-color:#372B53;
    position: relative;
}
.info_content img{
    width: 100%;
}
.system_a{
    width: 80%;
    /*padding:5% 10%;*/
    /*background-color: antiquewhite;*/
    position: absolute;
    bottom: 4%;
    right: 10%;
    left: 9%;
}
.system_a a{
    display: block;
    float: left;
    width: 27%;
    height: 70px;
    margin:3%;
    /*background-color: darksalmon;*/

}
@media screen and (min-height:1000px){
    .system_a a{
        height: 140px;
    }
}


/*loading*/

.page-loading{
    width: 100%;
    height: 100%;
    position: fixed;
    background: black;
    z-index: 1000000;
}

.page-loading .seiya{
    width: 100px;
    height: 100px;
    margin: 0 auto;
    top: 37%;
    background: gray;
    position: relative;
    background: url("../images/loading.png") 0 0 no-repeat;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function:step-start;
    -webkit-animation-name: person-normal;
    -webkit-animation-duration: 800ms;
}

@-webkit-keyframes person-normal{

    0% {background-position: 0 0;}
    14.3% {background-position: -100px 0;}
    28.6% {background-position: -200px 0;}
    42.9% {background-position: -300px 0;}
    57.2% {background-position: 0 -100px;}
    71.5% {background-position: 0 -200px;}
    85.8% {background-position: -100px -100px;}
    100% {background-position: 0 0;}
}


.mask {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
    display: table;
    top: 0;
    left: 0;
}

.mask .Table-Cell {
    display: table-cell;
    vertical-align: middle;
}

.mask .Table-Cell .Center-Block {
    margin: 0 auto;
    text-align: center;
}
.Center-Block {
    position: relative;
}

.mask .Table-Cell .Center-Block .close {
    background: url('../images/box-close.png') no-repeat;
    width: 45px;
    height: 45px;
    position: absolute;
    right: 0;
    top: -47px;
    background-size: contain;
}


.video-btn {

    width: 50px;
    height: 50px;
    top: 19%;
    left: 73%;
    position: absolute;
    z-index:10;
}

.mask.popup.hide {
    display: none;
}

.video-popup {
    background: rgba(33, 33, 33, 0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    text-align: center;
    white-space: nowrap;
}

.video-ctn {
    display: inline-block;
    vertical-align: middle;
    padding: 10px 15px;
    background: #000000;
    position: relative;
    top: 30%;
}

.video-popup .video-ctn .v-control {
    width: 100%;
}


/*礼包领取dialog样式*/
input, textarea, select, button {
    position: fixed;
    top:10%;
    z-index: 10000;
    font-size: 14px;
    font-family: inherit;
}

.mask {
    background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 101;
}
.mask .Center-Block {
    left: 0;
    margin: auto;
    position: fixed;
    right: 0;
    top: 20%;
    width: 90%;
    z-index: 11;
}
.mask .Center-Block.pop_block1 .close {
    position: absolute;
    right: 0;
    top: 0;
    height: 15%;
    width: 32%;
    /*background-color:aquamarine;*/
}
.mask .Center-Block.pop_block1 {
    /*height: 159px;*/
    width: 90%;
    position: fixed;
    top:20%;

}
.mask .Center-Block.pop_block1 img {
    width: 100%;
    z-index: 111111;
}
.mask .Center-Block.pop_block1 .libao_code{
    position: absolute;
    top: 50%;
    width: 90%;
    margin-left: 7%;
    color: white;
    line-height: 27px;
    font-size: 12px;
}
.mask.hide {
    display: none;
}
.mask .Center-Block.libao {
    height: 100%;
    width: 90%;

}
.mask .Center-Block.libao img {
    width: 100%;
}
.mask .Center-Block.libao .contact {
    position: absolute;
    top: 19%;
}
.mask .Center-Block.libao .phone_type{
    position: absolute;
    top: 29%;
}
.mask .Center-Block.libao .phone_type1 {
    margin-left: -25%;
    width: 39%;
}
.mask .Center-Block.libao .phone_type2 {
    margin-left: 2%;
    width: 39%;
}
.mask .Center-Block.libao .getCodeBtn {
    position: absolute;
    top: 38%;
   width: 48%;
    left: 27%;
}

#libao{
    position: fixed;
    top:0;
    width: 100%;
    z-index: 11;
    text-align: center;
}
#libao li {
    list-style: outside none none;
    padding: 0 8%;
    width: 86%;
}
#libao li span {
    color: #5d5d5d;
    display: block;
    float: left;
    line-height: 40px;
}
#libao .select-box {
    position: relative;
    top: 43%;
    left: -3%;
    width: 33%;
    float: left;
    height: 5%;
    line-height: 40px;
    color: #fff;
    background-color: #241c36;
    border: 1px solid #af9251;
    text-align: left;
    padding: 0 8px;

}
#libao .select-box p{
    position: relative;
    z-index: 10000;
    font-size: 12px;
}
/*#libao .select-box:hover ul.select {
    display: block;
}*/
#libao .select-box::before {
    background-color: #af9251;
    color: #1c1c1c;
    content: "▼";
    display: block;
    height: 40px;
    padding: 0 5px;
    position: absolute;
    right: 0;
    top: 0;
    width: 14px;
}
#libao .select-box ul.select {
    background-color: #1c1c1c;
    margin-left: -8px;
    margin-top: 1px;
    position: absolute;
    width: 100%;
    z-index: 10000;
}
#libao .select-box ul.select .option {
    background-color: #241c36;
    border: 1px solid #af9251;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    height:40px;
    line-height:40px;
    margin: -1px 0 0 -1px;
    padding: 0;
    text-align: center;
    width: 100%;
}
#libao li .phone-num {
    position: absolute;
    top: 0;
    float: left;
    height: 37px;
    line-height: 40px;
    color: #fff;
    background-color: #241c36;
    border: 1px solid #af9251;
    left: 41%;
    width: 51%;
    font-size: 12px;
}
#libao .Center-Block .close {
    position: absolute;
    right: -1%;
    top: -2%;
    height: 15%;
    width: 32%;
    /*background-color: aquamarine;*/
}
@media screen and (max-height:320px){
    .mask .Center-Block.libao .contact {
        top: 34%;
    }
    .mask .Center-Block.libao .phone_type{

        top:54%;
    }
    .mask .Center-Block.libao .getCodeBtn {

        top:76%;

    }
}

.fb {
    position: absolute;
    top: 43%;
    left: 30%;
    /* float: left; */
}
/*.fb_share {*/
    /*position: absolute;*/
    /*top: 42%;*/
    /*left: 54%;*/
    /*width: 30%;*/
/*}*/

.fb_share {
    position: absolute;
    top: 42%;
    left: 62%;
    width: 30%;
}


/*.fb_link{*/

    /*display: block;*/
    /*width: 35%;*/
    /*height: 20%;*/
    /*padding-left: 36%;*/
/*}*/

.fb_link {
    display: block;
    position: absolute;
    width: 50%;
    top: 65%;
    left: 30%;
    height: 20px;
    /* padding-left: 36%; */
   
}


.fb_iframe_widget{
    position:absolute;
}

#fbshare{
    position:absolute;
}






.syslist_content{
    width:100%;
    text-align: center;
    background-color:#372B53;
    position: relative;
}
.syslist_content img{
    width: 100%;
}
.system_a{
    width: 80%;
    /*padding:5% 10%;*/
    /*background-color: antiquewhite;*/
    position: absolute;

}
.system_a a{
    display: block;
    float: left;
    width: 27%;
    height: 70px;
    margin:3%;
    /*background-color: darksalmon;*/

}
.info_content{
    width:90%;
    text-align: left;
    padding: 0 5%;
    background-color:rgb(55,43,83);
    position: relative;
    color:#d7cdfb;
}
.info_content .article-tittle{
    text-align: center;
    width: 100%;
    font-size:24px;
    height: 50px;
    margin-bottom: 8px;
    line-height: 50px;
    border-bottom: rgb(32,23,48) solid 1px;
    color: white;
    padding-top: 8px;
}
.info_content img{
    padding: 5px 0;
    width: 100%;
}

.info_content p{
    width: 100%;
    margin: 0 10px;
}

.info_content .t{
    color:white;
}