.container-hot-game{
    width: 270px;
    height: 248px;
    position:relative;
    overflow: hidden;
    cursor:pointer;
    float:left;
    background:url(../images/bg.jpg) repeat-x;
    font-size:12px;
    margin:0px 0px 0px 10px;

}
.box-img{
    width: 500px;
    text-align: center;
    position: absolute;
    left: 50%;
    margin-left: -250px;
    -webkit-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
    z-index:1;
}
.box-img-bg{
    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
         -o-transform: scaleX(0);
            transform: scaleX(0);
    opacity: 0;
    top:-70px;
    filter:alpha(opacity=0);
}
.box-img-ren{
    opacity: 0;
    top:-70px;
    filter:alpha(opacity=0);
}
.box-img-info{
    bottom:-30px;
    -webkit-transform: translateX(-500px);
        -ms-transform: translateX(-500px);
         -o-transform: translateX(-500px);
            transform: translateX(-500px);
    filter:alpha(opacity=0);
}
.container-hot-game.mouseover{
    overflow: visible;
}
.container-hot-game.mouseover .box-img-bg{
    -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
         -o-transform: scaleX(1);
            transform: scaleX(1);
    opacity: 1;
}
.container-hot-game.mouseover .box-img-ren{
    opacity: 1;
}
.container-hot-game.mouseover .box-img-info{
    -webkit-transform: translateX(0px);
        -ms-transform: translateX(0px);
         -o-transform: translateX(0px);
            transform: translateX(0px);
    filter:alpha(opacity=100);
}
.container-hot-game .btn{
/*     background: url(../images/btn.png) no-repeat center; */
    display: block;
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 99px;
    height: 22px;
    text-align: center;
    line-height: 22px;
    color: #fff;
    margin-left: -48px;
    font-size: 14px;
}
.container-hot-game .btn-hover{
    background: url(../images/hover-tip.png) no-repeat;
    position: absolute;
    left: 50%;
    bottom: 30px;
    width: 19px;
    height: 12px;
    margin-left: -9px;
    display: none;
}
.container-hot-game.mouseover .btn-hover{
    display:block;
}
.hot-game-name {
    display: block;
    width: 100%;
    position: relative;
    bottom: -11px;
    text-align: center;
    font: bold 16px/25px "Microsoft Yahei",Arial;
}
.txt-info{
    margin:2px 5px;
    width:270px;
}
#container-ranklist-games{
    background: url(../images/bg-ranklist.jpg) no-repeat 0px -5px;
    width: 226px;
    height: 325px;
    float: left;
    position:relative;
    margin:0px 2px 0px 0px;
}
#container-ranklist-games .header{
    height: 25px;
    line-height: 25px;
    text-align: center;
}
.box-img-mask{
    width:270px;
    height:180px;
    position:absolute;
    left:0px;
    top:0px;
    bottom:0px;
    right:0px;
    opacity: 0.1;
    filter:alpha(opacity=10);
    z-index:3;
    background:#fff;

}
