.bg1{
	width: 983px !important;
	height: 330px !important;
	background: url(/devwebsite/assets/imgs/shouyeLB1.png) no-repeat !important;
	margin: 0  ;
	position:absolute;
	bottom:30px;
	
}
.bg1 div{
	width: 160px !important;
	height: 160px !important;
	cursor: pointer ;
}
.canvas1{
	position:absolute ;
	top:90px ;
	left: 48px ;
}
.canvas2{
	position:absolute;
	top:22px;
	left: 287px ;
}
.canvas3{
	position: absolute ;
	top:130px ;
	left: 527px ;
}
.canvas4{
	position: absolute ;
	top:80px ;
	left: 767px ;
}
.canvasplay1{
	-webkit-transform: rotateY(1440deg);
	-moz-transform: rotateY(1440deg);
	-o-transform: rotateY(1440deg);
	transform: rotateY(1440deg);
	-webkit-transition: all 2s ease-in-out 0.25s;
	-moz-transition: all 2s ease-in-out 0.25s;
	-o-transition: all 2s ease-in-out 0.25s;
	transition: all 2s ease-in-out 0.25s;
}
.canvasplay2{
	-webkit-transform: rotateY(1440deg);
	-moz-transform: rotateY(1440deg);
	-o-transform: rotateY(1440deg);
	transform: rotateY(1440deg);
	-webkit-transition: all 2s ease-in-out 0.45s;
	-moz-transition: all 2s ease-in-out 0.45s;
	-o-transition: all 2s ease-in-out 0.45s;
	transition: all 2s ease-in-out 0.45s;
}
.canvasplay3{
	-webkit-transform: rotateY(1440deg);
	-moz-transform: rotateY(1440deg);
	-o-transform: rotateY(1440deg);
	transform: rotateY(1440deg);
	-webkit-transition: all 2s ease-in-out 0.65s;
	-moz-transition: all 2s ease-in-out 0.65s;
	-o-transition: all 2s ease-in-out 0.65s;
	transition: all 2s ease-in-out 0.65s;
}
.canvasplay4{
	-webkit-transform: rotateY(1440deg);
	-moz-transform: rotateY(1440deg);
	-o-transform: rotateY(1440deg);
	transform: rotateY(1440deg);
	-webkit-transition: all 2s ease-in-out 0.95s;
	-moz-transition: all 2s ease-in-out 0.95s;
	-o-transition: all 2s ease-in-out 0.95s;
	transition: all 2s ease-in-out 0.95s;
}
.canvas1 .circle1,.canvas2 .circle1,.canvas3 .circle1,.canvas4 .circle1{
	position: absolute ;
	top:0px ;
	left: 0px ;
	display: none ;
}
.canvas1.hover .circle1{
	display: block ;
	background: url(/devwebsite/assets/imgs/img1hover1_bg.png) no-repeat;	
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	visibility: visible;
}
.canvas2.hover .circle1{
	display: block ;
	background: url(/devwebsite/assets/imgs/img2hover2_bg.png) no-repeat;	
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	visibility: visible;
}
.canvas3.hover .circle1{
	display: block ;
	background: url(/devwebsite/assets/imgs/img3hover3_bg.png) no-repeat;	
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	visibility: visible;
}
.canvas4.hover .circle1{
	display: block ;
	background: url(/devwebsite/assets/imgs/img4hover4_bg.png) no-repeat;	
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	visibility: visible;
}
.canvas1.hover .inner,.canvas2.hover .inner,.canvas3.hover .inner,.canvas4.hover .inner{
    -webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}
.canvas1 .inner,.canvas2 .inner,.canvas3 .inner,.canvas4 .inner{
    perspective: 160px ;
    transform-style: preserve-3d;
    transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}
.canvas1 .pinggu,.canvas2 .pinggu,.canvas3 .pinggu,.canvas4 .pinggu{
	position: absolute ;
	top:0px ;
	left: 0px ;
	z-index: 8 ;
}
.canvas1.hover .pinggu,.canvas2.hover .pinggu,.canvas3.hover .pinggu,.canvas4.hover .pinggu{
	display:none;
}
.shouyeLB4{
	position: absolute ;
	top:308px ;
	left: -360px ;
	z-index: 999 ;
}
.shouyeLB4play{
	left:620px ;
	transition: left 1.5s ease-in-out 0s
}
.scaleout { animation: scaleout 1.3s ease-in-out infinite; -moz-animation: scaleout 1.3s ease-in-out infinite; -webkit-animation: scaleout 1.3s ease-in-out infinite; }
@keyframes scaleout { 0% {
 transform: scale(1);
}
100% {
 opacity: 0;
 transform: scale(1.1);
}
}
@-moz-keyframes scaleout { 0% {
 -moz-transform: scale(1);
}
100% {
 opacity: 0;
 -moz-transform: scale(1.1);
}
}
@-webkit-keyframes scaleout { 0% {
 -webkit-transform: scale(1);
}
100% {
 opacity: 0;
 -webkit-transform: scale(1.1);
}
}
.bowen{
	position: absolute ;
	top:-36px ;
	left: -36px ;
	display: none ;
}
.shouyeLB4_s{
	position: absolute ;
	top:308px ;
	right: -15px ;
	display: none ;
}