body {
	/*background-color: #FFDAB9;	*/
	background-color: #000;
	-webkit-transition:background-color linear 5s;
	-moz-transition:background-color linear 5s;
	-o-transition:background-color linear 5s;
	-ms-transition:background-color linear 5s;
	transition:background-color linear 5s;
	overflow-x:hidden;
}
.container {
	display: none;
}
.peach {
	background-color: #FFDAB9;
	
}
.peach-after {
	-webkit-animation:peach_alive linear 8s infinite;
	-moz-animation:peach_alive linear 8s infinite;
	-o-animation:peach_alive linear 8s infinite;
	-ms-animation:peach_alive linear 8s infinite;
	animation:peach_alive linear 8s infinite;
}

@-webkit-keyframes peach_alive {
	0%{
		background-color: #FFDAB9;
	}
	25%{
		background-color: #FFE4B5;
	}
	50%{
		background-color: #FFDAB9;
	}
	75%{
		background-color: #FFEFD5;
	}
	100%{
		background-color: #FFDAB9;
	}
}
@-moz-keyframes peach_alive {
	0%{
		background-color: #FFDAB9;
	}
	25%{
		background-color: #FFE4B5;
	}
	50%{
		background-color: #FFDAB9;
	}
	75%{
		background-color: #FFEFD5;
	}
	100%{
		background-color: #FFDAB9;
	}
}

@-o-keyframes peach_alive {
	0%{
		background-color: #FFDAB9;
	}
	25%{
		background-color: #FFE4B5;
	}
	50%{
		background-color: #FFDAB9;
	}
	75%{
		background-color: #FFEFD5;
	}
	100%{
		background-color: #FFDAB9;
	}
}

@-ms-keyframes peach_alive {
	0%{
		background-color: #FFDAB9;
	}
	25%{
		background-color: #FFE4B5;
	}
	50%{
		background-color: #FFDAB9;
	}
	75%{
		background-color: #FFEFD5;
	}
	100%{
		background-color: #FFDAB9;
	}
}

@keyframes peach_alive {
	0%{
		background-color: #FFDAB9;
	}
	25%{
		background-color: #FFE4B5;
	}
	50%{
		background-color: #FFDAB9;
	}
	75%{
		background-color: #FFEFD5;
	}
	100%{
		background-color: #FFDAB9;
	}
}


.bulb {
	width: 50px;
	height: 50px;
	margin: auto;
	background-repeat: no-repeat no-repeat;
	background-position:center 0px;
	background-size: 50px 50px;
}

.bulb-holder {
	height: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 确保灯泡行始终显示6个灯泡 */
.container .row:first-child {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	margin-left: 5px;
}

.bulb-glow-yellow {
	background-image: url('bulb_yellow.png');
	-webkit-animation: bulb_glow_yellow linear 1.5s;
	-moz-animation: bulb_glow_yellow linear 1.5s;
	-o-animation: bulb_glow_yellow linear 1.5s;
	-ms-animation: bulb_glow_yellow linear 1.5s;
	animation: bulb_glow_yellow linear 1.5s;
}

@-webkit-keyframes bulb_glow_yellow {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_yellow.png');
		opacity: 1;
	}
}
@-moz-keyframes bulb_glow_yellow {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_yellow.png');
		opacity: 1;
	}
}
@-o-keyframes bulb_glow_yellow {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_yellow.png');
		opacity: 1;
	}
}
@-ms-keyframes bulb_glow_yellow {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_yellow.png');
		opacity: 1;
	}
}
@keyframes bulb_glow_yellow {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_yellow.png');
		opacity: 1;
	}
}

.bulb-glow-red {
	background-image: url('bulb_red.png');
	-webkit-animation: bulb_glow_red linear 1.5s;
	-moz-animation: bulb_glow_red linear 1.5s;
	-o-animation: bulb_glow_red linear 1.5s;
	-ms-animation: bulb_glow_red linear 1.5s;
	animation: bulb_glow_red linear 1.5s;
}

@-webkit-keyframes bulb_glow_red {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_red.png');
		opacity: 1;
	}
}
@-moz-keyframes bulb_glow_red {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_red.png');
		opacity: 1;
	}
}
@-o-keyframes bulb_glow_red {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_red.png');
		opacity: 1;
	}
}
@-ms-keyframes bulb_glow_red {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_red.png');
		opacity: 1;
	}
}
@keyframes bulb_glow_red {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_red.png');
		opacity: 1;
	}
}
.bulb-glow-blue {
	background-image: url('bulb_blue.png');
	-webkit-animation: bulb_glow_blue linear 1.5s;
	-moz-animation: bulb_glow_blue linear 1.5s;
	-o-animation: bulb_glow_blue linear 1.5s;
	-ms-animation: bulb_glow_blue linear 1.5s;
	animation: bulb_glow_blue linear 1.5s;
}

@-webkit-keyframes bulb_glow_blue {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_blue.png');
		opacity: 1;
	}
}
@-moz-keyframes bulb_glow_blue {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_blue.png');
		opacity: 1;
	}
}
@-o-keyframes bulb_glow_blue {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_blue.png');
		opacity: 1;
	}
}
@-ms-keyframes bulb_glow_blue {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_blue.png');
		opacity: 1;
	}
}
@keyframes bulb_glow_blue {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_blue.png');
		opacity: 1;
	}
}

.bulb-glow-green {
	background-image: url('bulb_green.png');
	-webkit-animation: bulb_glow_green linear 1.5s;
	-moz-animation: bulb_glow_green linear 1.5s;
	-o-animation: bulb_glow_green linear 1.5s;
	-ms-animation: bulb_glow_green linear 1.5s;
	animation: bulb_glow_green linear 1.5s;
}

@-webkit-keyframes bulb_glow_green {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_green.png');
		opacity: 1;
	}
}
@-moz-keyframes bulb_glow_green {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_green.png');
		opacity: 1;
	}
}
@-o-keyframes bulb_glow_green {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_green.png');
		opacity: 1;
	}
}
@-ms-keyframes bulb_glow_green {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_green.png');
		opacity: 1;
	}
}
@keyframes bulb_glow_green {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_green.png');
		opacity: 1;
	}
}

.bulb-glow-pink {
	background-image: url('bulb_pink.png');
	-webkit-animation: bulb_glow_pink linear 1.5s;
	-moz-animation: bulb_glow_pink linear 1.5s;
	-o-animation: bulb_glow_pink linear 1.5s;
	-ms-animation: bulb_glow_pink linear 1.5s;
	animation: bulb_glow_pink linear 1.5s;
}

@-webkit-keyframes bulb_glow_pink {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_pink.png');
		opacity: 1;
	}
}
@-moz-keyframes bulb_glow_pink {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_pink.png');
		opacity: 1;
	}
}
@-o-keyframes bulb_glow_pink {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_pink.png');
		opacity: 1;
	}
}
@-ms-keyframes bulb_glow_pink {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_pink.png');
		opacity: 1;
	}
}
@keyframes bulb_glow_pink {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_pink.png');
		opacity: 1;
	}
}

.bulb-glow-orange {
	background-image: url('bulb_orange.png');
	-webkit-animation: bulb_glow_orange linear 1.5s;
	-moz-animation: bulb_glow_orange linear 1.5s;
	-o-animation: bulb_glow_orange linear 1.5s;
	-ms-animation: bulb_glow_orange linear 1.5s;
	animation: bulb_glow_orange linear 1.5s;
}

@-webkit-keyframes bulb_glow_orange {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_orange.png');
		opacity: 1;
	}
}
@-moz-keyframes bulb_glow_orange {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_orange.png');
		opacity: 1;
	}
}
@-o-keyframes bulb_glow_orange {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_orange.png');
		opacity: 1;
	}
}
@-ms-keyframes bulb_glow_orange {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_orange.png');
		opacity: 1;
	}
}
@keyframes bulb_glow_orange {
	0%{
		background-image: url('bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('bulb_orange.png');
		opacity: 1;
	}
}


/*after music*/
.bulb-glow-yellow-after {
	background-image: url('bulb_yellow.png');
	-webkit-animation: bulb_glow_yellow_after linear 1s infinite;
	-moz-animation: bulb_glow_yellow_after linear 1s infinite;
	-o-animation: bulb_glow_yellow_after linear 1s infinite;
	-ms-animation: bulb_glow_yellow_after linear 1s infinite;
	animation: bulb_glow_yellow_after linear 1s infinite;
}

@-webkit-keyframes bulb_glow_yellow_after {
	0%{
		background-image: url('bulb_yellow.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_yellow.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_yellow.png');
		opacity: 0.6;
	}
}
@-moz-keyframes bulb_glow_yellow_after {
	0%{
		background-image: url('bulb_yellow.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_yellow.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_yellow.png');
		opacity: 0.6;
	}
}
@-o-keyframes bulb_glow_yellow_after {
	0%{
		background-image: url('bulb_yellow.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_yellow.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_yellow.png');
		opacity: 0.6;
	}
}
@-ms-keyframes bulb_glow_yellow_after {
	0%{
		background-image: url('bulb_yellow.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_yellow.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_yellow.png');
		opacity: 0.6;
	}
}
@keyframes bulb_glow_yellow_after {
	0%{
		background-image: url('bulb_yellow.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_yellow.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_yellow.png');
		opacity: 0.6;
	}
}

.bulb-glow-red-after {
	background-image: url('bulb_red.png');
	-webkit-animation: bulb_glow_red_after linear 1.2s infinite;
	-moz-animation: bulb_glow_red_after linear 1.2s infinite;
	-o-animation: bulb_glow_red_after linear 1.2s infinite;
	-ms-animation: bulb_glow_red_after linear 1.2s infinite;
	animation: bulb_glow_red_after linear 1.2s infinite;
}

@-webkit-keyframes bulb_glow_red_after {
	0%{
		background-image: url('bulb_red.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_red.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_red.png');
		opacity: 0.6;
	}
}
@-moz-keyframes bulb_glow_red_after {
	0%{
		background-image: url('bulb_red.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_red.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_red.png');
		opacity: 0.6;
	}
}
@-o-keyframes bulb_glow_red_after {
	0%{
		background-image: url('bulb_red.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_red.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_red.png');
		opacity: 0.6;
	}
}
@-ms-keyframes bulb_glow_red_after {
	0%{
		background-image: url('bulb_red.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_red.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_red.png');
		opacity: 0.6;
	}
}
@keyframes bulb_glow_red_after {
	0%{
		background-image: url('bulb_red.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_red.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_red.png');
		opacity: 0.6;
	}
}

.bulb-glow-blue-after {
	background-image: url('bulb_blue.png');
	-webkit-animation: bulb_glow_blue_after linear 1.4s infinite;
	-moz-animation: bulb_glow_blue_after linear 1.4s infinite;
	-o-animation: bulb_glow_blue_after linear 1.4s infinite;
	-ms-animation: bulb_glow_blue_after linear 1.4s infinite;
	animation: bulb_glow_blue_after linear 1.4s infinite;
}

@-webkit-keyframes bulb_glow_blue_after {
	0%{
		background-image: url('bulb_blue.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_blue.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_blue.png');
		opacity: 0.6;
	}
}
@-moz-keyframes bulb_glow_blue_after {
	0%{
		background-image: url('bulb_blue.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_blue.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_blue.png');
		opacity: 0.6;
	}
}
@-o-keyframes bulb_glow_blue_after {
	0%{
		background-image: url('bulb_blue.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_blue.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_blue.png');
		opacity: 0.6;
	}
}
@-ms-keyframes bulb_glow_blue_after {
	0%{
		background-image: url('bulb_blue.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_blue.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_blue.png');
		opacity: 0.6;
	}
}
@keyframes bulb_glow_blue_after {
	0%{
		background-image: url('bulb_blue.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_blue.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_blue.png');
		opacity: 0.6;
	}
}
.bulb-glow-green-after {
	background-image: url('bulb_green.png');
	-webkit-animation: bulb_glow_green_after linear 1.8s infinite;
	-moz-animation: bulb_glow_green_after linear 1.8s infinite;
	-o-animation: bulb_glow_green_after linear 1.8s infinite;
	-ms-animation: bulb_glow_green_after linear 1.8s infinite;
	animation: bulb_glow_green_after linear 1.8s infinite;
}

@-webkit-keyframes bulb_glow_green_after {
	0%{
		background-image: url('bulb_green.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_green.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_green.png');
		opacity: 0.6;
	}
}

@-moz-keyframes bulb_glow_green_after {
	0%{
		background-image: url('bulb_green.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_green.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_green.png');
		opacity: 0.6;
	}
}
@-o-keyframes bulb_glow_green_after {
	0%{
		background-image: url('bulb_green.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_green.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_green.png');
		opacity: 0.6;
	}
}
@-ms-keyframes bulb_glow_green_after {
	0%{
		background-image: url('bulb_green.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_green.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_green.png');
		opacity: 0.6;
	}
}
@keyframes bulb_glow_green_after {
	0%{
		background-image: url('bulb_green.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_green.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_green.png');
		opacity: 0.6;
	}
}
.bulb-glow-pink-after {
	background-image: url('bulb_pink.png');
	-webkit-animation: bulb_glow_pink_after linear 2s infinite;
	-moz-animation: bulb_glow_pink_after linear 2s infinite;
	-o-animation: bulb_glow_pink_after linear 2s infinite;
	-ms-animation: bulb_glow_pink_after linear 2s infinite;
	animation: bulb_glow_pink_after linear 2s infinite;
}

@-webkit-keyframes bulb_glow_pink_after {
	0%{
		background-image: url('bulb_pink.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_pink.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_pink.png');
		opacity: 0.6;
	}
}
@-moz-keyframes bulb_glow_pink_after {
	0%{
		background-image: url('bulb_pink.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_pink.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_pink.png');
		opacity: 0.6;
	}
}
@-o-keyframes bulb_glow_pink_after {
	0%{
		background-image: url('bulb_pink.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_pink.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_pink.png');
		opacity: 0.6;
	}
}
@-ms-keyframes bulb_glow_pink_after {
	0%{
		background-image: url('bulb_pink.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_pink.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_pink.png');
		opacity: 0.6;
	}
}
@keyframes bulb_glow_pink_after {
	0%{
		background-image: url('bulb_pink.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_pink.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_pink.png');
		opacity: 0.6;
	}
}
.bulb-glow-orange-after {
	background-image: url('bulb_orange.png');
	-webkit-animation: bulb_glow_orange_after linear 2.2s infinite;
	-moz-animation: bulb_glow_orange_after linear 2.2s infinite;
	-o-animation: bulb_glow_orange_after linear 2.2s infinite;
	-ms-animation: bulb_glow_orange_after linear 2.2s infinite;
	animation: bulb_glow_orange_after linear 2.2s infinite;
}

@-webkit-keyframes bulb_glow_orange_after {
	0%{
		background-image: url('bulb_orange.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_orange.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_orange.png');
		opacity: 0.6;
	}
}
@-moz-keyframes bulb_glow_orange_after {
	0%{
		background-image: url('bulb_orange.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_orange.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_orange.png');
		opacity: 0.6;
	}
}
@-o-keyframes bulb_glow_orange_after {
	0%{
		background-image: url('bulb_orange.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_orange.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_orange.png');
		opacity: 0.6;
	}
}
@-ms-keyframes bulb_glow_orange_after {
	0%{
		background-image: url('bulb_orange.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_orange.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_orange.png');
		opacity: 0.6;
	}
}
@keyframes bulb_glow_orange_after {
	0%{
		background-image: url('bulb_orange.png');
		opacity: 0.6;
	}
	50%{
		background-image: url('bulb_orange.png');
		opacity: 1;
	}
	100%{
		background-image: url('bulb_orange.png');
		opacity: 0.6;
	}
}
audio {
	display: none;
}

.bannar {
	max-width: 100%;
	-webkit-transform:translate(0px,-500px);
	-moz-transform:translate(0px,-500px);
	-o-transform:translate(0px,-500px);
	-ms-transform:translate(0px,-500px);
	transform:translate(0px,-500px);

}
.bannar-come {
	-webkit-animation: bannar_come linear 6s;
	-webkit-transform:translate(0px,0px);
	-moz-animation: bannar_come linear 6s;
	-moz-transform:translate(0px,0px);
	-o-animation: bannar_come linear 6s;
	-o-transform:translate(0px,0px);
	-ms-animation: bannar_come linear 6s;
	-ms-transform:translate(0px,0px);
	animation: bannar_come linear 6s;
	transform:translate(0px,0px);
}
@-webkit-keyframes bannar_come {
	0%{
		-webkit-transform:translate(0px,-1000px);
	}
	33%{
		-webkit-transform:translate(0px,0px);
		-webkit-transform:rotate(10deg);
		/*-webkit-transform:scale(1.5);*/
	}
	66% {
		-webkit-transform:translate(0px,100px);
		-webkit-transform:rotate(-10deg);
	}
	100% {
		-webkit-transform:translate(0px,0px);
	}
}
@-moz-keyframes bannar_come {
	0%{
		-moz-transform:translate(0px,-1000px);
	}
	33%{
		-moz-transform:translate(0px,0px);
		-moz-transform:rotate(10deg);
		/*-webkit-transform:scale(1.5);*/
	}
	66% {
		-moz-transform:translate(0px,100px);
		-moz-transform:rotate(-10deg);
	}
	100% {
		-moz-transform:translate(0px,0px);
	}
}
@-o-keyframes bannar_come {
	0%{
		-o-transform:translate(0px,-1000px);
	}
	33%{
		-o-transform:translate(0px,0px);
		-o-transform:rotate(10deg);
		/*-webkit-transform:scale(1.5);*/
	}
	66% {
		-o-transform:translate(0px,100px);
		-o-transform:rotate(-10deg);
	}
	100% {
		-o-transform:translate(0px,0px);
	}
}
@-ms-keyframes bannar_come {
	0%{
		-ms-transform:translate(0px,-1000px);
	}
	33%{
		-ms-transform:translate(0px,0px);
		-ms-transform:rotate(10deg);
		/*-webkit-transform:scale(1.5);*/
	}
	66% {
		-ms-transform:translate(0px,100px);
		-ms-transform:rotate(-10deg);
	}
	100% {
		-ms-transform:translate(0px,0px);
	}
}o
@keyframes bannar_come {
	0%{
		transform:translate(0px,-1000px);
	}
	33%{
		transform:translate(0px,0px);
		transform:rotate(10deg);
		/*-webkit-transform:scale(1.5);*/
	}
	66% {
		transform:translate(0px,100px);
		transform:rotate(-10deg);
	}
	100% {
		transform:translate(0px,0px);
	}
}

.balloons {
	position: fixed;
	bottom: -200px;
	opacity: 0;
	z-index: 99;
	width: 100px;
	height: 183px;
	background-repeat: no-repeat no-repeat;
	background-size: 100px 183px;
	transition: all 0.3s ease-out;
	left: -200px; /* 初始隐藏在屏幕外 */
}

/* 添加更自然的飞行动画 */
.balloon-floating {
	animation: gentle-float 4s ease-in-out infinite alternate;
}

@keyframes gentle-float {
	0% {
		transform: translateY(0px) rotate(-1deg);
	}
	50% {
		transform: translateY(-10px) rotate(1deg);
	}
	100% {
		transform: translateY(-5px) rotate(-0.5deg);
	}
}

/* 气球升起动画已移至JavaScript控制 */
.balloons h2 {
	text-transform: uppercase;
	font-family: 'Signika', sans-serif;
	font-size: 50px;
	color: #BF4136;
	text-shadow: 5px 5px 5px #FFF;
	display: none;
}
#b1,#b11 {
	background-image: url('b1.png');
}
#b2,#b22 {
	background-image: url('b2.png');
}
#b3,#b33 {
	background-image: url('b3.png');
}
#b4,#b44{
	background-image: url('b4.png');
}
#b5,#b55{
	background-image: url('b5.png');
}
#b6,#b66{
	background-image: url('b6.png');
}
#b7,#b77{
	background-image: url('b7.png');
}
.balloons-rotate-behaviour-one {
	-webkit-animation: balloons_rotate_one linear 10s infinite;
	-webkit-transform: rotate(30deg);
	-moz-animation: balloons_rotate_one linear 10s infinite;
	-moz-transform: rotate(30deg);
	-o-animation: balloons_rotate_one linear 10s infinite;
	-o-transform: rotate(30deg);
	-ms-animation: balloons_rotate_one linear 10s infinite;
	-ms-transform: rotate(30deg);
	animation: balloons_rotate_one linear 10s infinite;
	transform: rotate(30deg);
}
@-webkit-keyframes balloons_rotate_one {
	0% {
		-webkit-transform: rotate(30deg);
	}
	50% {
		-webkit-transform: rotate(-30deg);
	}
	100% {
		-webkit-transform: rotate(30deg);
	}
}
@-moz-keyframes balloons_rotate_one {
	0% {
		-moz-transform: rotate(30deg);
	}
	50% {
		-moz-transform: rotate(-30deg);
	}
	100% {
		-moz-transform: rotate(30deg);
	}
}
@-o-keyframes balloons_rotate_one {
	0% {
		-o-transform: rotate(30deg);
	}
	50% {
		-o-transform: rotate(-30deg);
	}
	100% {
		-o-transform: rotate(30deg);
	}
}
@-ms-keyframes balloons_rotate_one {
	0% {
		-ms-transform: rotate(30deg);
	}
	50% {
		-ms-transform: rotate(-30deg);
	}
	100% {
		-ms-transform: rotate(30deg);
	}
}
@keyframes balloons_rotate_one {
	0% {
		transform: rotate(30deg);
	}
	50% {
		transform: rotate(-30deg);
	}
	100% {
		transform: rotate(30deg);
	}
}
.balloons-rotate-behaviour-two {
	-webkit-animation: balloons_rotate_two linear 10s infinite;
	-webkit-transform: rotate(-20deg);
	-moz-animation: balloons_rotate_two linear 10s infinite;
	-moz-transform: rotate(-20deg);
	-o-animation: balloons_rotate_two linear 10s infinite;
	-o-transform: rotate(-20deg);
	-ms-animation: balloons_rotate_two linear 10s infinite;
	-ms-transform: rotate(-20deg);
	animation: balloons_rotate_two linear 10s infinite;
	transform: rotate(-20deg);
}
@-webkit-keyframes balloons_rotate_two {
	0% {
		-webkit-transform: rotate(-20deg);
	}
	50% {
		-webkit-transform: rotate(20deg);
	}
	100% {
		-webkit-transform: rotate(-20deg);
	}
}
@-moz-keyframes balloons_rotate_two {
	0% {
		-moz-transform: rotate(-20deg);
	}
	50% {
		-moz-transform: rotate(20deg);
	}
	100% {
		-moz-transform: rotate(-20deg);
	}
}
@-o-keyframes balloons_rotate_two {
	0% {
		-o-transform: rotate(-20deg);
	}
	50% {
		-o-transform: rotate(20deg);
	}
	100% {
		-o-transform: rotate(-20deg);
	}
}
@-ms-keyframes balloons_rotate_two {
	0% {
		-ms-transform: rotate(-20deg);
	}
	50% {
		-ms-transform: rotate(20deg);
	}
	100% {
		-ms-transform: rotate(-20deg);
	}
}
@keyframes balloons_rotate_two {
	0% {
		transform: rotate(-20deg);
	}
	50% {
		transform: rotate(20deg);
	}
	100% {
		transform: rotate(-20deg);
	}
}

.balloon-border{
	position: fixed;
	top:100%;
	opacity: 0.5;
	z-index: 9999;
}
.control-panel {
	position: fixed;
	bottom: 0;
	padding:10px 0px 10px 0px;
}
#play, #bannar_coming, #balloons_flying,#cake_fadein,#light_candle,#wish_message,#story {
	display: none;
}

/* 桌面端按钮居中 */
.navbar-fixed-bottom .row {
    margin: 0;
    display: flex;
    justify-content: center;
}

.navbar-fixed-bottom .col-md-6.col-md-offset-3 {
    margin-left: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 900px;
}

/* 桌面端按钮样式 */
.navbar-fixed-bottom .btn {
    margin: 5px;
    padding: 10px 15px;
    font-size: 14px;
}

.cake-cover {
	margin-top: 50px;
}
.message {
	margin-top: 200px;
	display: none;
}
.message p {
	font-family: 'Signika', sans-serif;
	font-size: 30px;
	text-transform: uppercase;
	color: #C4515C;
	text-shadow: 2px 2px 2px #FFF;
	display: none;
	font-weight: bold;
}

.btn-primary {
        border-color: #466baf;
        padding: 10px;
        text-transform: uppercase;
        font-family: 'Signika', sans-serif;
        font-weight: 700;
        color: #fff;
        background-color: #466baf;
}
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
        border-color: #fff;
        color: #fff;
        background-color: #466baf;
    }



    /*controlling tablet width*/
    /*@media only screen and (max-width: 720px){
    	.container {
    		-webkit-transform: scale(0.9);
    	}
    }*/

/* 移动端适配 - 缩小气球显示 */
@media screen and (max-width: 768px) {
    .balloons {
        width: 60px;
        height: 110px;
        background-size: 60px 110px;
    }
    
    .balloons h2 {
        font-size: 30px;
        text-shadow: 3px 3px 3px #FFF;
    }
    
    .balloon-border {
        height: auto;
        max-width: 100%;
    }
    
    /* 灯泡在移动端的适配 */
    .bulb {
        width: 40px;
        height: 40px;
        background-size: 40px 40px;
    }
    
    .bulb-holder {
        height: 50px;
        min-width: 0; /* 防止灯泡容器撑大 */
        flex: 1; /* 平均分配宽度 */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* 确保灯泡行不换行 */
    .container .row:first-child {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;
        margin-left: 5px;
    }
    
    .container .row:first-child .bulb-holder {
        flex: 1;
        max-width: calc(100% / 6);
        padding: 0 2px; /* 增加一点内边距防止挤压 */
    }
    
    /* 覆盖Bootstrap的col-xs-2样式，确保灯泡不换行 */
    .container .row:first-child .col-xs-2 {
        width: auto !important;
        flex: 1;
        padding: 0 3px;
    }
    
    /* 移动端优化动画性能 */
    .balloon-floating {
        animation: gentle-float-mobile 3s ease-in-out infinite alternate;
    }
    
    @keyframes gentle-float-mobile {
        0% {
            transform: translateY(0px) rotate(-0.5deg);
        }
        100% {
            transform: translateY(-8px) rotate(0.5deg);
        }
    }
    
    /* 底部按钮适配 */
    .navbar-fixed-bottom .btn {
        font-size: 14px !important;
        padding: 8px 12px !important;
        margin: 3px !important;
        min-height: 44px; /* iOS推荐的最小触控区域 */
        line-height: 1.4;
        border-radius: 6px;
    }
    
    .navbar-fixed-bottom {
        padding: 8px 0;
    }
    
        /* 按钮容器适配 */
    .navbar-fixed-bottom .row {
        margin: 0 !important;
        display: block !important;
    }

    .navbar-fixed-bottom .col-md-6 {
        padding: 0 10px !important;
        display: block !important;
        margin-left: 0 !important;
    }
}

/* 小屏幕手机适配 */
@media screen and (max-width: 480px) {
    .balloons {
        width: 50px;
        height: 92px;
        background-size: 50px 92px;
    }
    
    .balloons h2 {
        font-size: 24px;
        text-shadow: 2px 2px 2px #FFF;
    }
    
    /* 小屏幕灯泡适配 */
    .bulb {
        width: 35px;
        height: 35px;
        background-size: 35px 35px;
    }
    
    .bulb-holder {
        height: 45px;
        min-width: 0; /* 防止灯泡容器撑大 */
        flex: 1; /* 平均分配宽度 */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* 小屏幕确保灯泡行不换行 */
    .container .row:first-child {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around; /* 小屏幕用space-around保证间距 */
        width: 100%;
        padding: 0 5px; /* 小屏幕增加一点内边距 */
        margin-left: 5px;
    }
    
    .container .row:first-child .bulb-holder {
        flex: 1;
        max-width: calc(100% / 6 - 2px); /* 小屏幕稍微减少一点避免挤压 */
        padding: 0 1px; /* 小屏幕更小的内边距 */
    }
    
    /* 小屏幕覆盖Bootstrap的col-xs-2样式 */
    .container .row:first-child .col-xs-2 {
        width: auto !important;
        flex: 1;
        padding: 0 2px;
        min-width: 0;
    }
    
    /* 小屏幕按钮适配 */
    .navbar-fixed-bottom .btn {
        font-size: 12px !important;
        padding: 6px 10px !important;
        margin: 2px !important;
        min-height: 40px; /* 小屏也保证足够的触控区域 */
        line-height: 1.3;
        border-radius: 4px;
    }
    
    .col-md-offset-3 {
        margin-left: 0 !important;
    }
    
    .navbar-fixed-bottom .col-md-6 {
        width: 100% !important;
        padding: 0 8px !important;
        display: block !important;
        margin-left: 0 !important;
    }
    
    /* 超小屏幕时按钮换行优化 */
    .navbar-fixed-bottom .btn {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(50% - 6px); /* 一行最多两个按钮 */
    }
}