@charset "utf-8";
.loading,
.loadingicon,
.loadingtxt {
	position: absolute
}
.loading,
.page {
	overflow: hidden
}
* {
	margin: 0;
	padding: 0
}
body,
html {
	width: 100%;
	height: 100%
}
body {
	font-family: heiti
}
a {
	text-decoration: none
}
li {
	list-style: none
}
img {
	border: 0;
	display: block;
	vertical-align: top
}
input,
select,
textarea {
	width: 56%;
	font-size: 1em;
	outline: 0;
	border: none;
	background: 0 0
}
button,
input[type=button],
input[type=file],
input[type=submit] {
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none
}
.loading {
	width: 100%;
	height: 100%;
	background: #bc3636;;
	z-index: 999
}
.loadingicon {
	background: url(../img/loading.gif) center no-repeat;
	width: 100%;
    height: 100%;
}
.loadingtxt {
	font-size: 24px;
	color: white;
	text-align: center;
	top: 47%;
	left: 50%;
	margin-left: -313px;
	width: 640px
}
.main,
.page {
	width: 100%;
	height: 100%
}
.main {
	background: #F5F5F5
}
.page {
	position: relative;
	perspective: 1000px;
	box-shadow: 0 0 200px #333
}
#arrow,
#myCanvas,
#s1,
#tishi,
.cover,
.puff {
	position: absolute
}
@-webkit-keyframes start {
	0%, 30% {
		opacity: 0;
		-webkit-transform: translate(0, 10px)
	}
	60% {
		opacity: 1;
		-webkit-transform: translate(0, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(0, -8px)
	}
}
@-moz-keyframes start {
	0%, 30% {
		opacity: 0;
		-moz-transform: translate(0, 10px)
	}
	60% {
		opacity: 1;
		-moz-transform: translate(0, 0)
	}
	100% {
		opacity: 0;
		-moz-transform: translate(0, -8px)
	}
}
@keyframes start {
	0%, 30% {
		opacity: 0;
		transform: translate(0, 10px)
	}
	60% {
		opacity: 1;
		transform: translate(0, 0)
	}
	100% {
		opacity: 0;
		transform: translate(0, -8px)
	}
}
#arrow {
	z-index: 999;
	-webkit-animation: start 1.5s infinite ease-in-out
}
video::-webkit-media-controls {
	display: none!important
}
.hide {
	display: none
}
.puff {
	    display: block;
    width: 10%;
    top: 79%;
    left: 57%;
}
.jieguo,
.p1,
.p2 {
	width: 100%;
	height: 100%
}
.p1 {
	background: url(../img/1/1.jpg) left top no-repeat;
	background-size: 100% 100%
}
.p2 {
	background: url(../img/1.png) left top no-repeat;
	background-size: 100% 100%
}
.jieguo {
	
}
#tishi {
	left: 38%;
	top: 61%;
	width: 26%;
	z-index: 99;
	line-height: 2.2em;
	text-align: center;
	background: #c1272d;
	border-radius: 50em;
	color: #fff
}
#myCanvas,
#s1 {
	width: 80%;
	left: 10%;
	top: 7%
}
@keyframes rotate-frame {
	0% {
		transform: rotateY(0)
	}
	100% {
		transform: rotateY(-180deg)
	}
}
@-webkit-keyframes rotate-frame {
	0% {
		-webkit-transform: rotateY(0)
	}
	100% {
		-webkit-transform: rotateY(-180deg)
	}
}
/*!*perpective属性非常重要，缺少这个属性就没有透视效果了！*!*/

.p1-bg {
	width: 100%;
	height: 100%;
	background: #fff
}
.cover {
	transform-origin: 0 0 0;
	animation: rotate-frame 3s;
	-webkit-animation: rotate-frame 3s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}
.music {
	position: fixed;
    right: 9px;
    top: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: url(../img/music.png) no-repeat;
    display: block;
    background-size: 100% 100%;
    z-index: 99;
}

.rota {
	-webkit-animation: anima 1.5s linear infinite;
}

@-webkit-keyframes anima {
	0% {
		-webkit-transform: rotateZ(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}
.save {
	position: absolute;width: 6%; left: 29%;bottom: 5%;
	-webkit-animation: save 1s infinite;
	opacity: 1;
}
@-webkit-keyframes save {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}