/*三角形动画*/
.sanjiaox{
	width:30px;
	height:30px;
	margin-left:20px ;
	margin-top: 20%;
	animation:sanjiaox 15s linear 0s infinite normal;
	-moz-animation:sanjiaox 15s linear 0s infinite normal;
	-webkit-animation:sanjiaox 15s linear 0s infinite normal;
	-o-animation:sanjiaox 15s linear 0s infinite normal;
}
@keyframes sanjiaox
{
0%   {transform: rotate(0deg);}
25%  {transform: rotate(90deg);}
50%  {transform: rotate(180deg);}
75%  {transform: rotate(270deg);}
100% {transform: rotate(360deg);}
}
/*三角形动画结束*/
/*右边动画*/
.animat_top{
	height:38%;
}
.sanjiaox1{
	width:150px;
	height:150px;
	position: relative;
	margin-top: 20%;
	animation:sanjiaox1 20s linear 0s infinite normal;
	-moz-animation:sanjiaox1 20s linear 0s infinite normal;
	-webkit-animation:sanjiaox1 20s linear 0s infinite normal;
	-o-animation:sanjiaox1 20s linear 0s infinite normal;
}
@keyframes sanjiaox1
{
0%   {left:0;margin-top:10%;}
25%  {left:15%;margin-top:15%}
50%  {left:30%;margin-top:20%}
75%  {left:15%;margin-top:15%}
100% {left:0;margin-top:10%}
}
/*右边动画结束*/
/*中间动画*/
.square{
	height:21%;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
}
.done{
-webkit-transition-property:all;
-webkit-transition-duration:3;
-webkit-transition-delay:0;
-webkit-transition-timing-function:ease;
}
.square_left{
	margin-bottom: -47px;
	width:80px;
	height:80px;
	animation:square_left 15s linear 0s infinite alternate;
	-moz-animation:square_left 15s linear 0s infinite alternate;
	-webkit-animation:square_left 15s linear 0s infinite alternate;
	-o-animation:square_left 15s linear 0s infinite alternate;
}
@keyframes square_left
{
0%   {transform:scale(1)}
25%  {transform:scale(1.3)}
50%  {transform:scale(1.5)}
75%  {transform:scale(1.3)}
100% {transform:scale(1)}
}
@-moz-keyframes square_left{ /* Firefox */
0%   {transform:scale(1)}
25%  {transform:scale(0.7)}
50%  {transform:scale(0.4)}
75%  {transform:scale(0.7)}
100% {transform:scale(1)}
}
@-o-keyframes square_left{ /* Firefox */
0%   {transform:scale(1)}
25%  {transform:scale(0.7)}
50%  {transform:scale(0.4)}
75%  {transform:scale(0.7)}
100% {transform:scale(1)}
}
@-webkit-keyframes  square_left{ /* Firefox */
0%   {transform:scale(1)}
25%  {transform:scale(0.7)}
50%  {transform:scale(0.4)}
75%  {transform:scale(0.7)}
100% {transform:scale(1)}
}
.square_right{
	position: relative;
	width:150px;
	height:150px;
	margin-bottom: 11px;
	animation:square_right 15s linear 0s infinite alternate;
	-moz-animation:square_right 15s linear 0s infinite alternate;
	-webkit-animation:square_right 15s linear 0s infinite alternate;
	-o-animation:square_right 15s linear 0s infinite alternate;
}
@keyframes square_right
{
0%   {transform:scale(1)}
25%  {transform:scale(0.7)}
50%  {transform:scale(0.5)}
75%  {transform:scale(0.7)}
100% {transform:scale(1)}
}

@-moz-keyframes square_right{ /* Firefox */
0%   {transform:scale(1)}
25%  {transform:scale(1.3)}
50%  {transform:scale(1.5)}
75%  {transform:scale(1.3)}
100% {transform:scale(1)}
}
@-o-keyframes square_right{ /* Firefox */
0%   {transform:scale(1)}
25%  {transform:scale(1.3)}
50%  {transform:scale(1.5)}
75%  {transform:scale(1.3)}
100% {transform:scale(1)}
}
@-webkit-keyframes square_right{ /* Firefox */
0%   {transform:scale(1)}
25%  {transform:scale(1.3)}
50%  {transform:scale(1.5)}
75%  {transform:scale(1.3)}
100% {transform:scale(1)}
}

@media screen and (max-width: 768px){
	.square_right{
		width:60px;
		height:60px;
		margin-bottom: -12px;
	}
	.square_left{
		width:30px;
		height:30px;
		margin-bottom: -29px;
	}
	.sanjiaox1{
	width:60px;
	height:60px;
	position: relative;
	margin-top: 20%;
	}
}