*{
	margin:0;
	padding:0;
	font-family:"微软雅黑";
	font-size:14px;
}
li{
	list-style:none;
}
.box{
	width:440px;
	height:282px;
	position:relative;
	top:100px;
}
.san_l{
	position:absolute;
	top:198px;
	left:141px;
	border-right:108px solid transparent;
	border-bottom:33px solid #221c1c;
	border-left:74px solid transparent;
	transform:rotate(-124deg);
	animation:san_l 3s;
}
@keyframes san_l{
	0%{
		top:34px;
		left:67px;
		transform:rotate(-106deg);
	}33%{
		top:198px;
		left:67px;
		transform:rotate(-106deg);
	}66%{
		top:198px;
		left:67px;
		transform:rotate(-124deg);
	}100%{
		top:198px;
		left:141px;
		transform:rotate(-124deg);
	}
}
.san_r{
	position:absolute;
	top:198px;
	left:277px;
	border-right:74px solid transparent;
	border-bottom:33px solid #221c1c;
	border-left:108px solid transparent;
	transform:rotate(124deg);
	animation:san_r 3s;
}
@keyframes san_r{
	0%{
		top:34px;
		left:351px;
		transform:rotate(106deg);
	}33%{
		top:198px;
		left:351px;
		transform:rotate(106deg);
	}66%{
		top:198px;
		left:351px;
		transform:rotate(124deg);
	}100%{
		top:198px;
		left:277px;
		transform:rotate(124deg);
	}
}
.face{
	position:absolute;
	top:132px;
	left:200px;
	border-style:solid;
	border-color:#221c1c transparent transparent transparent;
	border-width:150px 100px 0 100px;
}
.tou{
	width:120px;
	position:absolute;
	top:17px;
	left:190px;
	border-style:solid;
	border-color:#221c1c transparent transparent transparent;
	border-width:115px 50px 100px 50px;
}
.fa_l{
	position:absolute;
	top:3px;
	left:-4px;
	border-right:90px solid transparent;
	border-bottom:230px solid transparent;
	border-top:80px solid #221c1c;
	border-left:160px solid transparent;
	transform:rotate(47deg)
}
.fa_r{
	position:absolute;
	top:3px;
	left:354px;
	border-right:160px solid transparent;
	border-bottom:230px solid transparent;
	border-top:80px solid #221c1c;
	border-left:90px solid transparent;
	transform:rotate(-47deg)
}
.logo{
	position:absolute;
	top:-10px;
	left:258px;
	width:34px;
	border-top:80px solid white;
	border-left:26px solid transparent;
	border-right:26px solid transparent;
	z-index:10;
}
.diam01{
	position:absolute;
	top:-88px;
	left:-3px;
	border-top:35px solid #221c1c;
	border-left:0 solid transparent;
	border-right:20px solid transparent;
	transform:rotate(180deg);
	animation:diam01 0.75s;
}
@keyframes diam01{
	from{
		top:0;
		opacity:0;
	}to{
		top:-88px;
		opacity:1;
	}
}
.diam02{
	position:absolute;
	top:-52px;
	left:18px;
	border-top:35px solid #221c1c;
	border-left:0 solid transparent;
	border-right:20px solid transparent;
	animation:diam02 1.5s;
}
@keyframes diam02{
	from{
		left:52px;
		opacity:0;
	}to{
		left:18px;
		opacity:1;
	}
}
.diam03{
	position:absolute;
	top:-52px;
	left:-3px;
	border-bottom:35px solid #221c1c;
	border-left:0 solid transparent;
	border-right:20px solid transparent;
	transform:rotate(180deg);
	animation:diam03 1.25s;
}
@keyframes diam03{
	from{
		left:-38px;
		opacity:0;
	}to{
		left:-3px;
		opacity:1;
	}
}
.diam04{
	position:absolute;
	top:-88px;
	left:18px;
	border-bottom:35px solid #221c1c;
	border-left:0 solid transparent;
	border-right:20px solid transparent;
	animation:diam04 1s;
}
@keyframes diam04{
	from{
		top:-155px;
		opacity:0;
	}to{
		top:-88px;
		opacity:1;
	}
}
.pearl{
	width:6px;
	height:6px;
	position:absolute;
	top:-57px;
	left:14px;
	border-radius:50%;
	background:#c33c3c;
	border:1px solid #4befff;
	animation:pearl 1s infinite;
}
@keyframes pearl{
	0%{
		opacity:0;
	}100%{
		opacity:1;
	}
}
.eye_l{
	width:38px;
	height:20px;
	position:absolute;
	top:90px;
	left:228px;
	background:#4befff;
	box-shadow:rgba(255,255,255,0.4) 0 0 15px,rgba(76,190,255,0.95) 0 0 10px;
	transform:skew(35deg)rotate(18deg);
	/*animation:shake 3s;*/
}
@keyframes shake{
	0%{
		transform:translate(-30px,-30px)rotate(30deg);
		opacity:0;
	}25%{
		transform:translate(-25px,-25px)rotate(25deg);
		opacity:0.5;
	}50%{
		transform:translate(-20px,-20px)rotate(20deg);
		opacity:1;
	}75%{
		transform:translate(-10px,-10px)rotate(10deg);
		opacity:0;
	}100%{
		transform:translate(0,0)rotate();
		opacity:0.8;
	}
}
.eye_r{
	width:38px;
	height:20px;
	position:absolute;
	top:90px;
	left:334px;
	background:#4befff;
	box-shadow:rgba(255,255,255,0.4) 0 0 10px,rgba(76,190,255,0.95) 0 0 10px;
	transform:skew(-35deg)rotate(-18deg);
	/*animation:shak 3s;*/
}
@keyframes shak{
	0%{
		transform:translate(30px,-30px)rotate(-30deg);
		opacity:0;
	}25%{
		transform:translate(25px,-25px)rotate(-25deg);
		opacity:0.5;
	}50%{
		transform:translate(20px,-20px)rotate(-20deg);
		opacity:1;
	}75%{
		transform:translate(10px,-10px)rotate(-10deg);
		opacity:0;
	}100%{
		transform:translate(0,0)rotate();
		opacity:0.8;
	}
}
.mask_l{
	position:absolute;
	left:218px;
	top:152px;
	border-top:120px solid white;
	border-right:0 solid transparent;
	border-left:80px solid transparent;
}
.mask_r{
	position:absolute;
	left:302px;
	top:152px;
	border-top:120px solid white;
	border-right:80px solid transparent;
	border-left:0 solid transparent;
}
.mask_l li,.mask_r li{
	position:absolute;
	height:5px;
	background:#221c1c;
}
.g_1{
	top:-112px;
	left:-70px;
	width:74px;
	transform:skew(35deg);
	animation:mask_l1 3s;
}
@keyframes mask_l1{
	0%{
		left:0;
	}100%{
		left:-70px;
	}
}
.g_r1{
	top:-112px;
	left:-4px;
	width:74px;
	transform:skew(-35deg);
	animation:mask_r1 3s;
}
@keyframes mask_r1{
	0%{
		width:0;
	}100%{
		width:74px;
	}
}
.g_2{
	top:-100px;
	left:-62px;
	width:64px;
	transform:skew(32deg);
	animation:mask_l2 3s;
}
@keyframes mask_l2{
	0%{
		left:0;
	}100%{
		left:-62px;
	}
}
.g_r2{
	top:-100px;
	left:-2px;
	width:64px;
	transform:skew(-32deg);
	animation:mask_r2 3s;
}
@keyframes mask_r2{
	0%{
		width:0;
	}100%{
		width:64px;
	}
}
.g_3{
	top:-88px;
	left:-54px;
	width:56px;
	transform:skew(32deg);
	animation:mask_l3 3s;
}
@keyframes mask_l3{
	0%{
		left:0;
	}100%{
		left:-54px;
	}
}
.g_r3{
	top:-88px;
	left:-2px;
	width:56px;
	transform:skew(-32deg);
	animation:mask_r3 3s;
}
@keyframes mask_r3{
	0%{
		width:0;
	}100%{
		width:56px;
	}
}
.g_4{
	top:-76px;
	left:-46px;
	width:48px;
	transform:skew(32deg);
	animation:mask_l4 3s;
}
@keyframes mask_l4{
	0%{
		left:0;
	}100%{
		left:-46px;
	}
}
.g_r4{
	top:-76px;
	left:-2px;
	width:48px;
	transform:skew(-32deg);
	animation:mask_r4 3s;
}
@keyframes mask_r4{
	0%{
		width:0;
	}100%{
		width:48px;
	}
}
.g_5{
	top:-64px;
	left:-38px;
	width:40px;
	transform:skew(32deg);
	animation:mask_l5 3s;
}
@keyframes mask_l5{
	0%{
		left:0;
	}100%{
		left:-38px;
	}
}
.g_r5{
	top:-64px;
	left:-2px;
	width:40px;
	transform:skew(-32deg);
	animation:mask_r5 3s;
}
@keyframes mask_r5{
	0%{
		width:0;
	}100%{
		width:40px;
	}
}
.g_6{
	top:-52px;
	left:-30px;
	width:32px;
	transform:skew(32deg);
	animation:mask_l6 3s;
}
@keyframes mask_l6{
	0%{
		left:0;
	}100%{
		left:-30px;
	}
}
.g_r6{
	top:-52px;
	left:-2px;
	width:32px;
	transform:skew(-32deg);
	animation:mask_r6 3s;
}
@keyframes mask_r6{
	0%{
		width:0;
	}100%{
		width:32px;
	}
}
.g_7{
	top:-40px;
	left:-22px;
	width:24px;
	transform:skew(32deg);
	animation:mask_l7 3s;
}
@keyframes mask_l7{
	0%{
		left:0;
	}100%{
		left:-22px;
	}
}
.g_r7{
	top:-40px;
	left:-2px;
	width:24px;
	transform:skew(-32deg);
	animation:mask_r7 3s;
}
@keyframes mask_r7{
	0%{
		width:0;
	}100%{
		width:24px;
	}
}
.g_8{
	top:-28px;
	left:-14px;
	width:16px;
	transform:skew(32deg);
	animation:mask_l8 3s;
}
@keyframes mask_l8{
	0%{
		left:0;
	}100%{
		left:-14px;
	}
}
.g_r8{
	top:-28px;
	left:-2px;
	width:16px;
	transform:skew(-32deg);
	animation:mask_r8 3s;
}
@keyframes mask_r8{
	0%{
		width:0;
	}100%{
		width:16px;
	}
}
.g_9{
	top:-16px;
	left:-6px;
	width:8px;
	transform:skew(32deg);
	animation:mask_l9 3s;
}
@keyframes mask_l9{
	0%{
		left:0;
	}100%{
		left:-6px;
	}
}
.g_r9{
	top:-16px;
	left:-2px;
	width:8px;
	transform:skew(-32deg);
	animation:mask_r9 3s;
}
@keyframes mask_r9{
	0%{
		width:0;
	}100%{
		width:8px;
	}
}
.box2{
	height:100px;
	position:fixed;
	top:0;
	z-index:100;
}
.box2 input{
	margin-top:2px;
}
.box2 div{
	float:left;
	margin-right:5px;
}