@charset "utf-8";
/* 彩票新页 */

.cp_content {
	width: 1000px; height: 492px ;; margin:0 auto; background: url(images/bg.png)
}
.tgc_content{
	position: relative;
	width: 442px;
	height: 216px; padding-top: 20px;
	overflow: hidden; display: inline-block;  float: left;
}
.tgc_light{
	cursor: pointer;
	position: absolute;
	left: -463px;
	top: 0;
	width: 412px;
	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);
}
.tgc_content:hover .tgc_light{
	left: 503px;
	transition:1s;
	-moz-transition:1s;
	-o-transition:1s;
	-webkit-transition:1s;;
}
.tgc_content:hover .tgc_dl{
	width: 417px;
	height: 179px;
	position: absolute;
	top: 50px;
	background: url(images/mb.png) top ;

}
.tgc_content .tgc_dl a{
	width: 109px; height: 37px; display: block; margin-top: 70px; margin-left: 170px;
}

.tgc_w4{ width: 100px; height: 90px; overflow: hidden;position:absolute;
	top:0px;
	left:10px;
}

/*绝对定位*/
.tgc_w4 .buy-icno{
	position:absolute;
	left:20px;
	margin-right:2px;
	z-index:5;
}
/*infinite动画一直重复*/
.tgc_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);}
}

@-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)}}

.cp_role{
	-webkit-animation: twinkling 5s infinite ease-in-out; position: absolute;top: 0px;left: 0px;
}

.cp_tag{
	-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:141px;left: 0px; position: absolute; display: block;line-height: 45px; text-align: center;font-size: 22px;font-weight: bold;
	/*渐变背景*/
	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;
	}
}