@charset "utf-8";

// css3 动画
@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }
    @keyframes #{$name} {
        @content;
    }
}
@include keyframes(rotate) {
	100% {
		@include transform(rotate(360deg));
	}
}
@include keyframes(rotate2) {
	100% {
		@include transform(rotate(-360deg));
	}
}



.page-order .cesuan-banner{
	height: 4.14rem;
	.icon-wrap{
		height: 100%;
		position: relative;
		top: -0.6rem;
	}
	.icon5{
		top: 0.75rem;
	}
}


.cesuan-banner{
	background-size: 100% auto;
	overflow: hidden;
	.icon{
		position: absolute;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.icon1,
	.icon2,
	.icon3{
		width: 4rem;
		height: 4rem;
		background-image: url(../skin_img/banner/icon.png);
		background-position: center center;
		background-size: 4rem 4rem;
		left: 50%;
		top: 50%;
		animation: rotate 13s linear infinite;
		margin: -2.9rem 0 0 -2rem;
		border-radius: 50%;
	}
	.icon2{
		width: 2.8rem;
		height: 2.8rem;
		margin: -2.3rem 0 0 -1.4rem;
		animation-name: rotate2;
	}
	.icon3{
		width: 1.8rem;
		height: 1.8rem;
		margin: -1.8rem 0 0 -0.9rem;
	}
	.icon4{
		width: 7.5rem;
		height: 4.94rem;
		background-image: url(../skin_img/banner/person.png);
	}
	.icon5{
		width: 7.5rem;
		height: 1.56rem;
		background-image: url(../skin_img/banner/text.png);
		top: 0.4rem;
	}
	.text{
		position: absolute;
		bottom: 0;
		width: 100%;
		background: url(../skin_img/banner/cover.png) no-repeat center bottom;
		background-size: 100% auto;
		text-align: center;
		line-height: 1.12rem;
		color: #b50300;
	}
}