/*@font-face {
	font-family: HT;
	src: url(../images/year/HT.woff);
}*/

@font-face {
	font-family: FZ;
	src: url(http://7s1r1c.com1.z0.glb.clouddn.com/t_FZQuSJW.woff);
}

body {
	font-family: "Helvetica Neue", Helvetica, "Microsoft YaHei", 微软雅黑, arial, sans-serif;
	font-size: 15px;
}

.loading-box {
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	font-family: FZ;
	font-weight: bold;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	/*-webkit-transition: opacity .4s;
	-moz-transition: opacity .4s;
	transition: opacity .4s;*/
}

.word {
	position: absolute;
	top: 190px;
	left: 50%;
	text-align: center;
	font-family: FZ;
	color: rgba(209, 22, 25, 1);
	font-size: 3.5em;
	font-weight: bolder;
}

.year {
	position: absolute;
	top: 130px;
	left: 50%;
	text-align: center;
	font-family: FZ;
	color: rgba(209, 22, 25, 1);
	font-size: 3.5em;
	font-weight: bolder;
}

.word,
.year {
	width: 100%;
	text-shadow: 0 1px hsl(0, 0%, 85%), 0 2px hsl(0, 0%, 80%), 0 3px hsl(0, 0%, 75%), 0 4px hsl(0, 0%, 70%), 0 5px hsl(0, 0%, 65%), 0 6px hsl(0, 0%, 60%), 0 5px 10px black;
	white-space: nowrap;
	opacity: 0;
	-webkit-transform: translate(-50%, 0) scale(0);
	-moz-transform: translate(-50%, 0) scale(0);
	transform: translate(-50%, 0) scale(0);
	-webkit-transition: all .3s ease .2s;
	-moz-transition: all .3s ease .2s;
	transition: all .3s ease .2s;
}

.loading-box .loading-num {
	padding: 10px;
}

.circleloading {
	position: relative;
	width: 100px;
	height: 100px;
	text-align: center;
	overflow: hidden;
}

.circleloading img {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 80px;
	height: 80px;
	z-index: 10;
}

.circleloading,
.circleloading img,
.left,
.right {
	border-radius: 50%;
}

.left,
.right {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	clip: rect(0, 50px, 100px, 0);
	background: #fff;
}

.left {
	z-index: 7;
	background: rgba(214, 8, 0, 1);
}

.right {
	z-index: 8;
}

.canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

canvas {
	position: absolute;
	top: 0;
	left: 0;
}

.shake {
	-webkit-animation: shake .5s linear infinite;
	animation: shake .5s linear infinite;
	-webkit-transform-origin: 25% 90%;
	transform-origin: 25% 90%;
}

@keyframes shake {
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(5deg);
	}
	100% {
		transform: rotate(0)
	}
}

.meihua {
	position: absolute;
	top: 10px;
	left: 0;
	opacity: 1;
	width: 60%;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.fuzi {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: translate(0, -100px);
	transform: translate(0, -100px);
	-webkit-transition: all 8s;
	transition: all 8s;
}

.swing {
	-webkit-animation: swing 7s ease 0s infinite both;
	-moz-animation: swing 7s ease 0s infinite both;
	animation: swing 7s ease 0s infinite both;
	-webkit-transform-origin: 50% 90%;
	-moz-transform-origin: 50% 90%;
	transform-origin: 50% 90%;
}

@keyframes swing {
	20% {
		-webkit-transform: translate(-50%, 0) rotate3d(0, 0, 1, 15deg);
		transform: translate(-50%, 0) rotate3d(0, 0, 1, 15deg)
	}
	40% {
		-webkit-transform: translate(-50%, 0) rotate3d(0, 0, 1, -10deg);
		transform: translate(-50%, 0) rotate3d(0, 0, 1, -10deg)
	}
	60% {
		-webkit-transform: translate(-50%, 0) rotate3d(0, 0, 1, 10deg);
		transform: translate(-50%, 0) rotate3d(0, 0, 1, 10deg)
	}
	80% {
		-webkit-transform: translate(-50%, 0) rotate3d(0, 0, 1, -10deg);
		transform: translate(-50%, 0) rotate3d(0, 0, 1, 10deg)
	}
	100% {
		-webkit-transform: translate(-50%, 0) rotate3d(0, 0, 1, 0deg);
		transform: translate(-50%, 0) rotate3d(0, 0, 1, 0deg)
	}
}

@-webkit-keyframes swing {
	20% {
		-webkit-transform: translate(-50%, 0) rotate3d(0, 0, 1, 15deg);
		transform: translate(-50%, 0) rotate3d(0, 0, 1, 15deg)
	}
	40% {
		-webkit-transform: translate(-50%, 0) rotate3d(0, 0, 1, -10deg);
		transform: translate(-50%, 0) rotate3d(0, 0, 1, -10deg)
	}
	60% {
		-webkit-transform: translate(-50%, 0) rotate3d(0, 0, 1, 10deg);
		transform: translate(-50%, 0) rotate3d(0, 0, 1, 10deg)
	}
	80% {
		-webkit-transform: translate(-50%, 0) rotate3d(0, 0, 1, -10deg);
		transform: translate(-50%, 0) rotate3d(0, 0, 1, 10deg)
	}
	100% {
		-webkit-transform: translate(-50%, 0) rotate3d(0, 0, 1, 0deg);
		transform: translate(-50%, 0) rotate3d(0, 0, 1, 0deg)
	}
}


.chi {
	position: absolute;
	top: 280px;
	left: 50%;
	width: 55%;
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

.pre1,.pre2{
	background-color:rgba(209,22,25,1);
}

.word2{
	position:absolute;
	top:30px;
	left:50%;
	width:100%;
	text-align: center;
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

.letters{
	display:inline-block;
	position:relative;
	width:50px;
	height:50px;
	color:rgb(231, 15, 32);
	font-size:20px;
	line-height:52px;
	margin-right:10px;
}
.letters img:first-child{
	width:50px;
	position:absolute;
	top:0;
	left:0;
}
.letters img:nth-child(2){
	width:20px;
	margin-top:20px;
}
.fu2{
	position:absolute;
	bottom:-50px;
	left:50%;
	width:260px;
	height:267px;
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}
.heci{
	position:absolute;
	top:120px;
	left:50%;
	width:180px;
	line-height:27px;
	font-size:18px;
	text-align: center;
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

.chi1,
.chi2{
	position:absolute;
	bottom:0;
	width:30%;
}
.chi1{
	
	left:10px;
}
.chi2{
	right:10px;
}