* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-style: normal;
}

body {
    font-family: "Microsoft YaHei", "SimSun";
    font-size: 14px;
    color: #000;
}

a {
    text-decoration: none;
    color: #21242c
}

a:hover {
    text-decoration: none;
    color: #21242c;
}

.page-content {
    width: 1200px;
    margin: 0 auto;
    position: relative
}

.game-banner{
    background: url(../images/game/banner.jpg) no-repeat top center;
    background-size: cover;
    height: 400px;
}
.game-banner .info{
    padding: 70px 0 0 0;
}
.game-banner .info h2{
    font-size: 40px;
    color: #fff;
    padding-bottom: 25px;
}
.game-banner .info p{
    font-size: 18px;
    color: #fff;
    line-height:36px;
    background: url(../images/game/arrow.png) no-repeat left center;
    background-size: 14px 15px;
    padding-left:25px;

}
.nav-box{
    height: 110px;
    background: #fff;
    border-right: 10px;
    box-shadow:  0 5px 20px rgba(0,0,0,.05);
    margin-top: -55px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px 0 0;
}
.nav-box .left{
    display: flex;
}
.nav-box .left .item{
    text-align: center;
    padding: 0 40px;
    position: relative;
}
.nav-box .left .item h3{
    font-size: 30px;
    color: #ff4a00;
}
.nav-box .left .item h3 span{
    font-size: 18px;
    font-weight: normal;
}
.nav-box .left .item p{
    font-size: 16px;
    color: #666;
    padding-top: 5px;
}
.nav-box .left .item::after {
    content: '/';
    position: absolute;
    right: -6px;
    top: 50%;
    color: #ff4a00;
    vertical-align: middle;
    font-size: 24px;
    transform: translate(0, -50%);
}
.nav-box .left .item:last-child::after {
    content: '';
}
.nav-box .right .btn a{
    display: block;
    background: #ff4a00;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    width: 140px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 40px;
}
.page-title{
    text-align: center;
    padding:80px 0 50px;
}
.page-title h3{
    font-size: 30px;
    color: #333;
}
.page-title h3 span{
    color: #1c7bec;
}
.page-title p{
    color: #666;
    font-size: 18px;
    padding-top: 10px;
}
.game-a{
    background: url(../images/game/bg1.jpg) no-repeat bottom center;
    padding-bottom:80px;
}
.game-a .hd{
    text-align: center;
}
.game-a .hd ul{
    text-align: center;
    display: flex;
    justify-content: center;
}
.game-a .hd ul li{
    width: 300px;
    height: 100px;
    border-radius: 20px;
    text-align: center;
    border:#eee solid 1px;
    margin: 0 15px;
    cursor: pointer;
    position: relative;
}
.game-a .hd ul li h3{
    font-size: 18px;
    color: #333;
    padding: 25px 0 10px;
}
.game-a .hd ul li p{
    font-size: 14px;
    color: #333;
}
.game-a .hd ul li.on{
    background: linear-gradient(90deg, #2e6cf2, #865dff);
}
.game-a .hd ul li.on h3,.game-a .hd ul li.on p{
    color: #fff;
}
.game-a .hd ul li.on:after{
    content:"";
    display:inline-block;
    position:absolute;
    left:50%;
    bottom:-10px;
    margin-left:-10px;
    width:0;
    height:0;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:10px solid #5665f8
}

.game-a .bd{
    margin-top: 40px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0,0,0,.05);
    text-align: center;
    padding: 25px 0;
}
.game-a .bd img{
    vertical-align: baseline;
}
.game-a .btn{
    text-align: center;
    margin-top:50px;
}
.game-a .btn a{
    background: linear-gradient(180deg, #fe8778, #ffaa69);
    border-radius: 50px;
    font-size: 20px;
    padding: 20px 50px;
    color: #fff;
    font-weight: bold;
    display: inline-block;
}

.game-b {
    background: url(../images/game/bg2.jpg) no-repeat center;
    height:450px ;
}
.game-b .box{
    display: flex;
    justify-content: space-around;
    padding: 0 50px;
}
.game-b .box .item{
    text-align: center;
    color: #fff;
    width: 258px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.2));
}
.game-b .box .item h3{
    font-size:24px;
    padding: 25px 0 15px;
}
.game-b .box .item p{
    font-size: 16px;
    line-height: 26px;
    padding: 0 20px 20px;
}
.game-b .btn{
    text-align: center;
    margin-top: 30px;
}
.game-b .btn a{
    display: inline-block;
    border:#6db6ff solid 1px;
    border-radius: 30px;
    padding: 15px 30px;
    font-size: 20px;
    color: #ffeb65;
}
.game-b .btn a:hover{
    background: #6db6ff;
}

.game-c {
    padding-bottom: 80px;
}
.game-c .box{
    display: flex;
}
.game-c .box .item{
    width: 25%;
    text-align: center;
    position: relative;
}
.game-c .box .item h3{
    font-size:20px;
    padding: 25px 0 15px;
}
.game-c .box .item p{
    font-size: 14px;
    line-height: 24px;
    color: #333;
    padding: 0 30px;
    text-align: left;
}
.game-c .icon-right{
    position: absolute;
    right: -7px;
    top:48px
}

.game-d{
    padding-bottom: 80px;
    background: url(../images/game/bg3.jpg) no-repeat bottom center;
}
.game-d .img{
    position: absolute;
    width: 362px;
    height: 357px;
    left: 50%;
    margin-left: -181px;
    top:215px
}
.game-d .box{
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.game-d .box .item{
    width: 50%;
    text-align: right;
    margin-bottom: 20px;
}
.game-d .box .item h3{
    width: 380px;
    font-size:20px;
    padding: 15px 0;
    color: #1c7bec;
}
.game-d .box .item p{
    font-size: 14px;
    line-height: 24px;
    color: #666;
    width: 380px;
}
.game-d .box .item:nth-child(2),.game-d .box .item:nth-child(4),.game-d .box .item:nth-child(6){
    text-align: left;
}


.game-e .box{
    display: flex;
    justify-content:space-around;
}
.game-e .box .item{
    background:url(../images/game/card1.png) no-repeat;
    width:290px;
    height: 200px;
    padding: 25px;
    color: #fff;
    box-sizing: border-box;
}
.game-e .box .item:nth-child(2){
    background:url(../images/game/card2.png) no-repeat;
}
.game-e .box .item:nth-child(3){
    background:url(../images/game/card3.png) no-repeat;
}
.game-e .box .item:nth-child(4){
    background:url(../images/game/card4.png) no-repeat;
}
.game-e .box .item h3{
    font-size: 18px;
    padding:45px 0 15px;
}
.game-e .box .item p{
    font-size: 14px;
    line-height: 24px;
    text-align: left;
}

.game-f{
    background: #fff;
    padding-bottom: 80px;
    margin-top: 60px;
}
.game-f .table{
    background: #fff;
    border:#333 solid 1px;
    border-radius: 5px;
    width: 100%;
    
    border-collapse: collapse;
}
.game-f .table th{
    padding:20px;
    border:#333 solid 1px;
    font-size: 18px;
}
.game-f .table td{
    padding:15px 20px;
    border:#333 solid 1px;
    line-height:24px;
}
.game-f .table .t1{
    width: 200px;
    text-align: center;
    font-size: 18px;
    line-height: 30px;
}
.game-f .table .t2{
    width: 200px;
    text-align: center;
}


.game-j{
    background:url(../images/game/bg4.jpg) no-repeat top center;
    padding-bottom: 80px;
    overflow: hidden;
}
.game-j .box{
    background: rgba(254,133,79,.5);
    overflow: hidden;
    border-radius:15px;
}
.game-j .left{
    width: 500px;
    float: left;
}
.game-j .left ul{
    padding: 40px;
    color: #fff;
}
.game-j .left ul li{
    width: calc(50% - 1px);
    float: left;
    text-align: center;
    height:150px;
    font-size: 18px;
    border-right: rgba(255,255,255,.3) solid 1px;
    border-bottom: rgba(255,255,255,.3) solid 1px;
}
.game-j .left ul li:nth-child(2),.game-j .left ul li:nth-child(4){
    border-right: none;
}
.game-j .left ul li:nth-child(3),.game-j .left ul li:nth-child(4){
    border-bottom: none;
}
.game-j .left ul li h3{
    font-size: 36px;
    padding: 30px 0 10px;
}
.game-j .right{
    background: #fff;
    border-radius:15px;
    overflow: hidden;
    width: 700px;
    float: right;
}
.game-j .right .t{
    height: 70px;
    line-height: 70px;
    text-align: center;
    background: #ffead6;
    font-size: 26px;
    color: #fd6449;
    text-align: center;
    font-weight: bold;
}
.game-j .right ul li{
    display: flex;
    line-height: 50px;
}
.game-j .right ul li .t1{
    width:120px;
    padding-left: 30px;
}
.game-j .right ul li .t2{
    width: 200px;
}
.game-j .right ul li .t3{
    width: 210px;
}
.game-j .right ul li .t4{
    width: 140px;
    text-align: center;
    color: #fd6449;
}
.game-j .right ul li .b{
    font-weight: bold;
    font-size: 16px;
}

@media screen and (max-width: 1000px) {
    .game-content {
        width: 1200px;
        margin: 0 auto;
        display: table;
        overflow: hidden;
    }
    .game-banner,.game-a,.game-b,.game-c,.game-d,.game-j{
        width: 1200px;
        margin: 0 auto;
        display: table;
        overflow: hidden;
    }
}