/*2017 0809 xl 游戏版号 start*/

.big-til{

    padding: 60px 0 40px;

    text-align: center;

}

.big-til h3{

    position: relative;

    line-height: 1;

    color: #3b3b3b;

    font-size: 30px;

    font-weight: bold;

}

.big-til h3 span{

    vertical-align: middle;

    position: relative;

    margin: 0 5px;

}

.big-til h3 .line{

    width: 87px;

    height: 1px;

    background-color: #d2d2d2;

}

.big-til h3 .line i{

    position: absolute;

    right: 0;

    width: 3px;

    height: 3px;

    border-radius: 3px;

    background-color: #d2d2d2;

    top: -1.5px;

}

.big-til h3 .line .icon2{

    left: 0;

    right: auto;

}

.big-til p{

    color: #848484;

    font-size: 14px;

    text-transform: uppercase;

    padding-top: 10px;

}

.big-til p span{

    color: #f9a713;

}

/*什么是游戏版号 start*/

.who-need{

    padding-bottom: 60px;

    text-align: center;

}

.who-need ul{

    overflow: hidden;

}

.who-need ul li{

    float: left;

    width: 380px;

    height: 240px;

    border-radius: 3px;

    position: relative;

    overflow: hidden;

    margin-left: 20px;

    text-align: left;

}

.who-need ul li:first-child{

    margin-left: 0;

}

.who-need ul li .desc{

    padding: 20px 0 0 20px;

    width: 360px;

    height: 220px;

    color: white;

    position: relative;

    overflow: hidden;

}

.who-need ul li .desc p{

    font-size: 16px;

    line-height: 1.6;

}

.who-need ul li .desc .til{

    font-size: 24px;

    font-weight: bold;

    padding-bottom: 10px;

}

.who-need ul li .desc a{

    position: absolute;

    display: block;

    width: 133px;

    height: 38px;

    border: 1px solid white;

    line-height: 38px;

    text-align: center;

    border-radius: 3px;

    overflow: hidden;

    bottom: 28px;

}

.who-need ul li .desc a span{

    color: white;

    font-size: 16px;

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    transition: all .3s;

    position: relative;

    z-index: 1;

}

.who-need ul li .desc a i{

    width: 0;

    height: 100%;

    position: absolute;

    left: 50%;

    background-color: white;

    border-radius: 3px;

    top: 0;

    z-index: 0;

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    transition: all .3s;

}

.who-need ul li .who-need-img{

    position: absolute;

    right: -10px;

    bottom: -10px;

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    transition: all .3s;

}

.who-need ul li:hover .sky-bg a span {

    color: #1d7bd3;

}

.who-need ul li:hover .green-bg a span {

    color: #22c45b;

}

.who-need ul li:hover .orange-bg a span {

    color: #ff9000;

}

.who-need ul li:hover .desc a i{

    width: 100%;

    left: 0;

}

.who-need ul li:hover .who-need-img{

    right: 0;

    bottom: 0;

}

.btn-need{

    height: 38px;

    line-height: 38px;

    padding: 0 24px;

    color: #1d7bd3;

    font-size: 14px;

    border: 1px solid #1d7bd3;

    border-radius: 3px;

    margin-top: 40px;

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    transition: all .3s;

}

.btn-need span{

    color: #ff9000;

}

.btn-need:hover{

    color: white;

    background-color: #1d7bd3;

}



/*什么是游戏版号 end*/

/*为什么申办 start*/

.why-bid{

    width: 100%;

    min-width: 1180px;

    background: url("../images/why-bid-bg.jpg") no-repeat;

    height: 645px;

}

.why-bid .big-til h3{

    color: white;

}

.why-bid .big-til p {

    color: white;

}

.why-bid ul{

    overflow: hidden;

}

.why-bid ul li{

    float: left;

    width: 280px;

    height: 280px;

    background-color: white;

    margin-left: 20px;

    text-align: center;

    position: relative;

    overflow: hidden;

}

.why-bid ul li:first-child{

    margin-left: 0;

}

.why-bid ul li .animation-container{

    width: 600px;

    height: 600px;

    position: absolute;

    top: -600px;

    left: 50%;

    margin-left: -300px;

    -webkit-transition: all .5s ease-out;

    -moz-transition: all .5s ease-out;

    transition: all .5s ease-out;

    background:url("../images/big-circlw.png") no-repeat;

}

.why-bid ul li:hover .animation-container{

    top: -200px;

}

.why-bid ul li .show-box{

    position: relative;

    z-index: 2;

}

.why-bid ul li i{

    width: 126px;

    height: 95px;

    background: url("../images/why-bid-icon.png") no-repeat;

    margin-top: 54px;

}

.why-bid ul li .icon2{

    background-position: -126px 0;

}

.why-bid ul li .icon3{

    background-position: -252px 0;

}

.why-bid ul li .icon4{

    background-position: -378px 0;

}

.why-bid ul li .text{

    margin-top: 25px;

    color: #333;

    font-size: 18px;

    text-shadow: 0 5px rgba(20, 30, 40, 0.2);

    letter-spacing: 0.15em;

    transition: all 0.6s ease-out;

}

.why-bid ul li:hover .text{

    color: #fff;

    text-shadow: 2px 2px rgba(3, 10, 30, 0.4);

}

.why-bid .tips{

    text-align: center;

    color: white;

    font-size: 14px;

    margin-top: 40px;

}

.why-bid .tips span{

    color: #ff9000;

}

.why-bid .wechat{

    margin-top: 25px;

}

.why-bid .wechat-left{

    color: white;

    font-size: 16px;

    width: 230px;

}

.why-bid .wechat-righ{

    width: 190px;

}

/*为什么申办 end */

/*怎么申办 start*/

.how-big{

    width: 100%;

    min-width: 1180px;

}

.know-early ul{

    text-align: center;

}

.know-early ul li{

    display: inline-block;

    *display: inline;

    *zoom: 1;

    width: 455px;

    height: 485px;

    background-color: #f7f7f7;

    margin: 0 15px;

    vertical-align: top;

    position: relative;

}

.know-early ul li .top-icon{

    line-height: 110px;

}

.know-early ul li .top-til{

    line-height: 60px;

    color: white;

    font-size: 24px;

}

.know-early ul li .desc{

    padding: 25px 0 25px 15px;

    color: #565656;

    font-size: 16px;

    text-align: left;

    line-height: 2.2;

}

.know-early ul li .desc a{

    position: absolute;

    bottom: 25px;

    width: 158px;

    height: 38px;

    line-height: 38px;

    border-radius: 3px;

    border: 1px solid #ff9000;

    left: 50%;

    margin-left: -80px;

    overflow: hidden;

    text-align: center;

}

.know-early ul li .desc a span{

    position: relative;

    z-index: 1;

    color: #ff9000;

    font-size: 16px;

    -webkit-transition: all .5s;

    -moz-transition: all .5s;

    transition: all .5s;

}

.know-early ul li .desc a i{

    position: absolute;

    left: 50%;

    width: 0;

    height: 100%;

    border-radius: 3px;

    background-color: #ff9000;

    -webkit-transition: all .5s;

    -moz-transition: all .5s;

    transition: all .5s;

}

.know-early ul li:hover .desc a span{

    color: white;

}

.know-early ul li:hover .desc a i{

    width: 100%;

    left: 0;

}

.know-early .wechat{

    background-color: white;

    width: 600px;

    margin: 45px auto 0;

}

.know-early .wechat-left{

    width: 440px;

    font-size: 16px;

}

/*怎么申办 end */

/*步骤 start*/

.big-gray{

    width: 100%;

    min-width: 1180px;

    background-color: #f7f7f7;

    overflow: hidden;

}

.flow-steps{

    position: relative;

}

.flow-steps-next{

    position: absolute;

    width: 100%;

    text-align: center;

    top: 40px;

    -webkit-animation: bounce 1s infinite both;

    -moz-animation: bounce 1s infinite both;

    animation: bounce 1s infinite both

}

.flow-steps ul{

    overflow: hidden;

}

.flow-steps ul li{

    float: left;

    text-align: center;

    margin-left: 105px;

}

.flow-steps ul li:first-child{

    margin-left: 0;

}

.flow-steps ul li i{

    width: 120px;

    height: 120px;

    background: url("../images/flow-steps.png") no-repeat;

}

.flow-steps ul li p{

    color: #333;

    font-size: 20px;

    margin-top: 10px;

}

.flow-steps ul li span{

    width: 38px;

    height: 25px;

    background: url("../images/flow-steps-num.png") no-repeat;

    margin-top: 13px;

}



.flow-steps ul li .specDib {

    background: url(../images/flow-steps-num01.png) no-repeat;

}



.flow-steps ul li .icon2{

    background-position: -120px 0;

}

.flow-steps ul li .icon3{

    background-position: -240px 0;

}

.flow-steps ul li .icon4{

    background-position: -360px 0;

}

.flow-steps ul li .icon5{

    background-position: -480px 0;

}

.flow-steps ul li .num2{

    background-position: -38px 0;

}

.flow-steps ul li .num3{

    background-position: -75px 0;

}

.flow-steps ul li .num4{

    background-position: -114px 0;

}

.flow-steps ul li .num5{

    background-position: -152px 0;

}

.flow-steps ul li:hover i{

    -webkit-animation:pulse 1s ease 1 0s both;animation:pulse 1s ease 1 0s both;

}

.flow-steps .wechat{

    margin: 50px auto 45px;

}

.flow-steps .wechat-left span{

    font-weight: normal;

    font-size: 20px;

}

/*步骤 end*/

/*更多保障 start*/

.more-security ul{

    overflow: hidden;

}

.more-security ul li{

    float: left;

    position: relative;

    width: 33.333%;

    height: 215px;

    text-align: center;

    background-color: #f7f7f7;

}

.more-security ul li div{

    width: 100%;

    height: 100%;

}

.more-security ul li i{

    width: 56px;

    height: 56px;

    background: url("../images/more-security-icon.png") no-repeat;

    margin-top: 30px;

}

.more-security .specUl li i{

    background: url("../images/more-security-icon01.png") no-repeat;

}



.more-security ul li .icon2{

    background-position: -56px 0;

}

.more-security ul li .icon3{

    background-position: -112px 0;

}

.more-security ul li .icon4{

    background-position: -168px 0;

}

.more-security ul li .icon5{

    background-position: -224px 0;

}

.more-security ul li .icon6{

    background-position: -280px 0;

}

.more-security ul li p{

    color: #848484;

    font-size: 16px;

}

.more-security ul li .til{

    color: #565656;

    font-size: 22px;

    margin: 10px 0 5px;

}

.more-security ul li .sky-bg p{

    color: white;

}

.more-security ul li .sky-bg .til{

    color: white;

}

.more-security ul li a{

    display: block;

    width: 100%;

    height: 100%;

}

.more-security .wechat{

    margin-bottom: 60px;

    margin-top: 40px;

}

.more-security .wechat-left{

    color: #1d7bd3;

}

.more-security .wechat-left span{

    font-weight: normal;

    font-size: 20px;

}

/*更多保障 end  */

/*还需要 start*/

.need-more{

    width: 100%;

    min-width: 1180px;

    height: 288px;

    background: url("../images/need-more-bg.jpg") no-repeat;

}

.need-more .big-til h3{

    color:white;

}

.need-more .big-til p{

    color:white;

}

.need-more ul{

    overflow: hidden;

}

.need-more ul li{

    position: relative;

    width: 180px;

    height: 92px;

    background: url("../images/need-more-li.png") no-repeat;

    text-align: center;

    overflow: hidden;

    margin-left: 70px;

    float: left;

}

.need-more ul li:first-child{

    margin-left: 0;

}

.need-more ul li .animation-container{

    width: 600px;

    height: 600px;

    position: absolute;

    top: -600px;

    left: 50%;

    margin-left: -300px;

    -webkit-transition: all .3s ease-in;

    -moz-transition: all .3s ease-in;

    transition: all .3s ease-in;

    background:url("../images/big-circlw.png") no-repeat;

}

.need-more ul li .show-box{

    position: relative;

    z-index: 2;

}

.need-more ul li i{

    width: 39px;

    height: 35px;

    background: url("../images/need-more-icon.png") no-repeat;

    margin-top: 13px;

}

.need-more ul li .icon2{

    background-position: -39px 0;

}

.need-more ul li .icon3{

    background-position: -78px 0;

}

.need-more ul li .icon4{

    background-position: -117px 0;

}

.need-more ul li .icon5{

     background-position: -156px 0;

 }



.need-more ul li .text{

    margin-top: 5px;

    color: #333;

    font-size: 16px;

    text-shadow: 0 5px rgba(20, 30, 40, 0.2);

    letter-spacing: 0.15em;

    transition: all 0.6s ease-out;

}

.need-more ul li:hover .animation-container{

    top: -490px;



}

.need-more ul li:hover .text{

    color: #fff;

    text-shadow: 2px 2px rgba(3, 10, 30, 0.4);

}

/*还需要 start*/

/*2017 0809 xl 游戏版号 end */



/*动画 start*/

@-webkit-keyframes bounce {

    0%,

    100%,

    20%,

    50%,

    80% {

        -webkit-transform: translateX(3px);

        transform: translateX(3px)

    }

    40% {

        -webkit-transform: translateX(-5px);

        transform: translateX(-5px)

    }

    60% {

        -webkit-transform: translateX(-2px);

        transform: translateX(-2px)

    }

}

@keyframes bounce {

    0%,

    100%,

    20%,

    50%,

    80% {

        -webkit-transform: translateX(3px);

        transform: translateX(3px)

    }

    40% {

        -webkit-transform: translateX(-5px);

        transform: translateX(-5px)

    }

    60% {

        -webkit-transform: translateX(-2px);

        transform: translateX(-2px)

    }

}

@-webkit-keyframes pulse {

    from {

        -webkit-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1);

    }

    50% {

        -webkit-transform: scale3d(1.05, 1.05, 1.05);

        transform: scale3d(1.05, 1.05, 1.05);

    }

    to {

        -webkit-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1);

    }

}

@keyframes pulse {

    from {

        -webkit-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1);

    }

    50% {

        -webkit-transform: scale3d(1.05, 1.05, 1.05);

        transform: scale3d(1.05, 1.05, 1.05);

    }

    to {

        -webkit-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1);

    }

}

.pulse {

    -webkit-animation-name: pulse;

    animation-name: pulse;

}

/*动画 end */