﻿/*
 * author: wei
 * time: 2015-01-25
 * Techblog: http://www.cnblogs.com/aiweidong/
 * 
 */
html{overflow: hidden;}
body{margin: 0; background-color: #67ace4; font-family: "\5FAE\8F6F\96C5\9ED1"; _padding-top: 100px;}
::selection{background: none;}
::-moz-selection{background: none;}
#wrap{margin: 100px auto 0; width: 399px;}
#text{text-align: center; padding-top: 20px;}
#text strong{display: inline-block; font-size: 14px; font-weight: normal;}
#text strong *{float: left;}
#text span{width: 128px; height: 29px; background: url(../images/info.png) no-repeat;}
#text a{line-height: 14px; color: #fff; text-decoration: none; padding: 6px 14px; margin: 1px 0 0 10px; border: 1px solid #fff; border-radius: 14px;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	transition: 0.2s ease-out;
	-o-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-webkit-transition: 0.2s ease-out;
}
#text a:hover, #text a:active{background: #fff; color: #000;}
@media screen and (max-width: 414px) {
	#wrap, #wrap img, #text span{width: 200px;}
	#text span{background-position: center; margin-bottom: 16px;}
	#text a:nth-of-type(1){margin-left: 0;}
}

.animate{
	animation: 20s animate linear infinite alternate;
	-o-animation: 20s animate linear infinite alternate;
	-moz-animation: 20s animate linear infinite alternate;
	-webkit-animation: 20s animate linear infinite alternate;
}
.below, .above{position: absolute; bottom: 0; left: 0; z-index: -1; width: 100%;}
.below{height: 173px; background: url(../images/below.png) no-repeat;}
.above{height: 149px; background: url(../images/above.png) no-repeat -60px 0;
	animation-name: animate-above;
	-o-animation-name: animate-above;
	-moz-animation-name: animate-above;
	-webkit-animation-name: animate-above;
}
@keyframes animate{
	0%{background-position: 0 0;}
	10%{background-position: -10px 1px;}
	20%{background-position: -10px 3px;}
	30%{background-position: -20px 1px;}
	40%{background-position: -40px 2px;}
	50%{background-position: -60px 4px;}
	60%{background-position: -40px 2px;}
	70%{background-position: -20px 4px;}
	80%{background-position: -10px 3px;}
	90%{background-position: -10px 1px;}
	100%{background-position: 0 0;}
}
@-o-keyframes animate{
	0%{background-position: 0 0;}
	10%{background-position: -10px 1px;}
	20%{background-position: -10px 3px;}
	30%{background-position: -20px 1px;}
	40%{background-position: -40px 2px;}
	50%{background-position: -60px 4px;}
	60%{background-position: -40px 2px;}
	70%{background-position: -20px 4px;}
	80%{background-position: -10px 3px;}
	90%{background-position: -10px 1px;}
	100%{background-position: 0 0;}
}
@-moz-keyframes animate{
	0%{background-position: 0 0;}
	10%{background-position: -10px 1px;}
	20%{background-position: -10px 3px;}
	30%{background-position: -20px 1px;}
	40%{background-position: -40px 2px;}
	50%{background-position: -60px 4px;}
	60%{background-position: -40px 2px;}
	70%{background-position: -20px 4px;}
	80%{background-position: -10px 3px;}
	90%{background-position: -10px 1px;}
	100%{background-position: 0 0;}
}
@-webkit-keyframes animate{
	0%{background-position: 0 0;}
	10%{background-position: -10px 1px;}
	20%{background-position: -10px 3px;}
	30%{background-position: -20px 1px;}
	40%{background-position: -40px 2px;}
	50%{background-position: -60px 4px;}
	60%{background-position: -40px 2px;}
	70%{background-position: -20px 4px;}
	80%{background-position: -10px 3px;}
	90%{background-position: -10px 1px;}
	100%{background-position: 0 0;}
}
@keyframes animate-above{
	0%{background-position: -60px 0;}
	10%{background-position: -50px 8px;}
	20%{background-position: -35px 10px;}
	30%{background-position: -20px 10px;}
	40%{background-position: -30px 16px;}
	50%{background-position: -10px 20px;}
	60%{background-position: -20px 20px;}
	70%{background-position: -30px 12px;}
	80%{background-position: -40px 10px;}
	90%{background-position: -50px 10px;}
	100%{background-position: -60px 0;}
}
@-o-keyframes animate-above{
	0%{background-position: -60px 0;}
	10%{background-position: -50px 8px;}
	20%{background-position: -35px 10px;}
	30%{background-position: -20px 10px;}
	40%{background-position: -30px 16px;}
	50%{background-position: -10px 20px;}
	60%{background-position: -20px 20px;}
	70%{background-position: -30px 12px;}
	80%{background-position: -40px 10px;}
	90%{background-position: -50px 10px;}
	100%{background-position: -60px 0;}
}
@-moz-keyframes animate-above{
	0%{background-position: -60px 0;}
	10%{background-position: -50px 8px;}
	20%{background-position: -35px 10px;}
	30%{background-position: -20px 10px;}
	40%{background-position: -30px 16px;}
	50%{background-position: -10px 20px;}
	60%{background-position: -20px 20px;}
	70%{background-position: -30px 12px;}
	80%{background-position: -40px 10px;}
	90%{background-position: -50px 10px;}
	100%{background-position: -60px 0;}
}
@-webkit-keyframes animate-above{
	0%{background-position: -60px 0;}
	10%{background-position: -50px 8px;}
	20%{background-position: -35px 10px;}
	30%{background-position: -20px 10px;}
	40%{background-position: -30px 16px;}
	50%{background-position: -10px 20px;}
	60%{background-position: -20px 20px;}
	70%{background-position: -30px 12px;}
	80%{background-position: -40px 10px;}
	90%{background-position: -50px 10px;}
	100%{background-position: -60px 0;}
}