#new_vgbox {
	width: 1000px;
	height: auto;
	padding-bottom: 20px;
	padding-top: 20px;
	margin: 0 auto;
	overflow: hidden;
}
#vg_banner{
	width: 1000px;
	height: 132px;
	margin-bottom: 10px;
}
#vgbox_ul li {
	float: left;
	width: 327px;
	height: 214px;
	margin-top: 0;
	margin: 0px;
	margin-left: 5px;
	margin-top: 5px;
	position: relative; -webkit-transition: all ease 0.2s;
     -moz-transition: all ease 0.2s;
       -o-transition: all ease 0.2s;
          transition: all ease 0.2s;
}
#vgbox_ul li.new_ddz{background: url(new_vg1.png?v=0225011)  top no-repeat;}
#vgbox_ul li.new_by{background: url(new_by1.png?v=0225011)  top  no-repeat;}
#vgbox_ul li.new_ky{background: url(new_ky1.png?v=0225011)  top no-repeat;}
#vgbox_ul li.new_qp{background: url(new_hfh1.png?v=0225101)  top  no-repeat;}
#vgbox_ul li.new_le{background: url(new_le1.png?v=0225011)   top no-repeat;}
#vgbox_ul li.new_fg{background: url(new_fg1.png?v=0225011)   top no-repeat;}
#vgbox_ul li.new_ai{background: url(new_ai1.png?v=0225011)  top  no-repeat;}

#vgbox_ul li.new_ddz:hover{background: url(new_vg1.png?v=0122501)  bottom no-repeat;}
#vgbox_ul li.new_by:hover{background: url(new_by1.png?v=0122501)  bottom  no-repeat;}
#vgbox_ul li.new_ky:hover{background: url(new_ky1.png?v=0212501)  bottom no-repeat;}
#vgbox_ul li.new_qp:hover{background: url(new_hfh1.png?v=0122501)  bottom  no-repeat;}
#vgbox_ul li.new_le:hover{background: url(new_le1.png?v=0122501)   bottom no-repeat;}
#vgbox_ul li.new_fg:hover{background: url(new_fg1.png?v=0122501)   bottom no-repeat;}
#vgbox_ul li.new_ai:hover{background: url(new_ai1.png?v=0212501)  bottom  no-repeat;}
#vgbox_ul li.new_jqqd{background: url(jqqd_new.jpg?v=0225101) no-repeat;}

#vgbox_ul li.new_jqqd{background: url(jqqd_new.jpg?v=0221501) no-repeat;}
#vgbox_ul li a{
	top: 175px;
	left: 218px;
	display: inline-block;
	position: absolute;
	width: 109px;
	height: 37px;
}
#vgbox_ul li a.playbtn{
	background: url(btn_play.jpg) no-repeat;
}
#vgbox_ul li a.jqqdbtn{
	background: #f00;
}
#vgbox_ul li a.tg_sw{
	left: 105px;
	background: url(btn_free.jpg) no-repeat;
}
#vgbox_ul li a.playbtn_2{
	background: url(btn_play.jpg) no-repeat;
	left: 218px;
}
#vgbox_ul li a:hover{background-position: 0 -2px;}

/*新版本棋牌CSS*/

.tg_content{
               float: left;
                position: relative; 
                width: 242px;
                height: 256px; margin-left: 8px; margin-top: 3px;
                overflow: hidden; display: inline-block;
            }
            .light{
                 cursor: pointer;
                position: absolute;
                left: -403px;
                top: 0;
                width: 242px;
                height: 232px;
                /*闪光其实是一个渐变的遮罩层*/
                background: -webkit-linear-gradient(0deg, rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,0)); /* Safari 5.1 to 6.0 */
                background: -o-linear-gradient(0deg, rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,0)); /* Opera 11.1 to 12.0 */
                background: -moz-linear-gradient(0deg, rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,0)); /* Firefox 3.6 to 15 */
                background: linear-gradient(0deg, rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0)); /* 标准语法 */
                /*把闪光遮罩层倾斜一下,效果更好*/
                transform: skew(25deg);
                -o-transform: skewx(-25deg);
                -moz-transform: skewx(-25deg);
                -webkit-transform: skewx(-25deg);
            }
            .tg_content:hover .light{
                left: 403px;
                transition:1s;
                -moz-transition:1s;
                -o-transition:1s;
                -webkit-transition:1s;; 
            }
             .tg_content:hover .dla{
                 width: 491px;
                height: 166px;
                 position: absolute;
                  top: 45px;
               background: url(mb1.png?v=112) top ;
        
            }
            .tg_content .dla a{
                width: 109px; height: 37px; display: block; margin-top: 70px; margin-left: 200px;
            }
            .tg_content:hover .dl{
                 width: 242px;
                height: 166px;
                 position: absolute;
                  top: 45px;
               background: url(mb.png?v=12) top ;
        
            }
            .tg_content .dl a{
                width: 109px; height: 37px; display: block; margin-top: 70px; margin-left: 70px;
            }
 
.tg_w4{ width: 100px; height: 90px; overflow: hidden;position:absolute;
    top:0px;
    left:0px;
}
 
/*绝对定位*/
.tg_w4 .buy-icno{
    position:absolute;
    left:20px;
    margin-right:2px;
    z-index:5;
}
/*infinite动画一直重复*/
.tg_w4 .buy-icno{
    -webkit-animation:transform 2.5s linear infinite forwards;
    -moz-animation:transform 2.5s linear infinite forwards;
    -ms-animation:transform 2.5s linear infinite forwards;
    animation:transform 2.5s linear infinite forwards;
}
 
/*4个时间段，0%到25%，从最低点到左上;25%到50%，从左上到最低点；50%到70%，从最低点到右上;70%到100%,从右上到最低点*/
@-webkit-keyframes transform { 
    0% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
    25% {transform-origin:top center;-webkit-transform:rotate(20deg);transform:rotate(20deg);}
    50% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
    75% {transform-origin:top center;-webkit-transform:rotate(-20deg);transform:rotate(-20deg);}
    100% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
@keyframes transform { 
    0% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
    25% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(20deg);transform:rotate(20deg);}
    50% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
    75% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(-20deg);transform:rotate(-20deg);}
    100% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
   
.className{
    position: absolute;top: 45px;left: 40px; 
   
    
}
/*放大缩小*/
.className img{-moz-animation:heart_beat .5s ease-in-out;-webkit-animation:heart_beat .5s ease-in-out;} 


@-moz-keyframes heart_beat{0%{-moz-transform:scale(1)}
25%{-moz-transform:scale(1.70)}
50%{-moz-transform:scale(0.9)}
75%{-moz-transform:scale(1.55)}
100%{-moz-transform:scale(1)}}
@-webkit-keyframes heart_beat{0%{-webkit-transform:scale(1)}
25%{-webkit-transform:scale(1.70)}
50%{-webkit-transform:scale(0.9)}
75%{-webkit-transform:scale(1.55)}
100%{-moz-transform:scale(1)}}
 
.classNamea{
   -webkit-animation: twinkling 5s infinite ease-in-out; position: absolute;top: 55px;left: 0px;
} 

.classNamec{
   -webkit-animation: twinkling 5s infinite ease-in-out; position: absolute;top: 55px;left: 0px;z-index: 1
} 
@-webkit-keyframes twinkling{
  0% {
    transform: translateX(0px);
  }
    50% {
    transform: translateX(30px);
  }
  100%{
    transform: translateX(0px);
  }
}
@keyframes twinkling{
  0% {
    transform: translateX(0px);
  }
    50% {
    transform: translateX(20px);
  }
  100%{
    transform: translateX(0px);
  }
 }   
   
   
 /*文字变色*/
 .masked{ width: 240px;height: 45px;top:211px; position: absolute; display: block;line-height: 45px; text-align: center;;
   /*渐变背景*/
            background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
            #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
            color: transparent; /*文字填充色为透明*/
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;          /*背景剪裁为文字，只将文字显示为背景*/
            background-size: 200% 100%;            /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
            /* 动画 */
animation: masked-animation 4s infinite linear;}
@keyframes masked-animation {
            0% {
                background-position: 0 0;   /*background-position 属性设置背景图像的起始位置。*/
            }
            100% {
                background-position: -100% 0;
            }
        }