﻿/* AB模版网 做最好的织梦整站模板下载网站 */
/* 网址：Www.AdminBuy.Cn */
/* 图标大全：Sc.AdminBuy.Cn 专业建站素材网站 */
/* QQ：9490489 */
@-webkit-keyframes piston {
 0% {
margin-top: 0;
}
 50% {
margin-top: 80px;
}
 100% {
margin-top: 0;
}
}
@keyframes piston {
 0% {
margin-top: 0;
}
 50% {
margin-top: 80px;
}
 100% {
margin-top: 0;
}
}
@-webkit-keyframes arm {
 0% {
-webkit-transform: rotate(0);
}
 25% {
-webkit-transform: rotate(-18deg);
}
 50% {
-webkit-transform: rotate(0);
}
 75% {
-webkit-transform: rotate(18deg);
}
 100% {
-webkit-transform: rotate(0);
}
}
@keyframes arm {
 0% {
transform: rotate(0);
}
 25% {
transform: rotate(-18deg);
}
 50% {
transform: rotate(0);
}
 75% {
transform: rotate(18deg);
}
 100% {
transform: rotate(0);
}
}
.loadingEffect {
	text-align: center;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99999;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, coral, tomato);
	-webkit-transition: all 1s linear 0s;
	-moz-transition: all 1s linear 0s;
	-ms-transition: all 1s linear 0s;
	transition: all 1s linear 0s;
	opacity: 1;
	filter: Alpha(opacity=100);
}
.loadingEffect.hideCss {
	opacity: 0;
	filter: Alpha(opacity=0);
}
#robot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 540px;
	height: 250px;
	margin-top: -125px;
	margin-left: -270px;
	font-family: 'Oswald', sans-serif;
	font-size: 30px;
	font-weight: 700;
	color: #444;
	text-shadow: 0px -1px 1px rgba(0,0,0,.7), 0px 1px 1px rgba(255,255,255,.4);
}
@media screen and (max-width: 700px) {
#robot {
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	transform: scale(0.7);
}
}
@media screen and (max-width: 480px) {
#robot {
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-ms-transform: scale(0.6);
	transform: scale(0.6);
}
}
@media screen and (max-width: 360px) {
#robot {
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
}
}
.piston {
	float: left;
	margin-right: 10px;
	position: relative;
	width: 100px;
	height: 250px;
	background: rgba(0,0,0,.1);
	border-radius: 10px 10px 50px 50px;
	box-shadow: 0 -4px 0 rgba(0,0,0,.2), 0 4px 0 rgba(255,255,255,.2);
}
.piston:last-child {
	margin: 0;
}
.piston .block {
	position: relative;
	width: 100px;
	height: 60px;
	line-height: 60px;
	background: #555;
	border-radius: 10px;
	-webkit-animation: piston 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
	animation: piston 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
	box-shadow: inset 0 -4px 0 rgba(0,0,0,.2), inset 0 4px 0 rgba(255,255,255,.2);
}
.piston:nth-child(1) .block {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
.piston:nth-child(2) .block {
	-webkit-animation-delay: .1s;
	animation-delay: .1s;
}
.piston:nth-child(3) .block {
	-webkit-animation-delay: .2s;
	animation-delay: .2s;
}
.piston:nth-child(4) .block {
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
}
.piston:nth-child(5) .block {
	-webkit-animation-delay: .4s;
	animation-delay: .4s;
}
.piston .arm {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -10px;
	width: 20px;
	height: 150px;
	background: #555;
	border-radius: 10px;
	box-shadow: inset 0 -22px 0 rgba(0,0,0,.2);
	z-index: -1;
	-webkit-transform-origin: center 10px;
	-webkit-animation: arm 1.2s linear infinite;
	-webkit-animation-delay: inherit;
	transform-origin: center 10px;
	animation: arm 1.2s linear infinite;
	animation-delay: inherit;
}
.piston .arm:before, .piston .arm:after {
	content: '';
	position: absolute;
	right: 0;
	left: 0;
	height: 16px;
	background: #eee;
	border-radius: 50%;
	margin: 2px;
}
.piston .arm:before {
	top: 0;
}
.piston .arm:after {
	bottom: 0;
}
.piston .rotator {
	position: absolute;
	bottom: 0;
	width: 100px;
	height: 100px;
	border-radius: 10px;
	border-radius: 50%;
	border: 20px solid rgba(0,0,0,.1);
	box-sizing: border-box;
	z-index: -1;
}
