.bg(@img, @repeat:no-repeat, @left:0, @top:0) {
	background-image: url("../imgs/@{img}");
	background-repeat: @repeat;
	background-position: @left @top;
}

.size(@width, @height) {
	width: @width;
	height: @height;
}

.animation (@name, @delay) {
	-webkit-animation-name: @name;
	-webkit-animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	-webkit-animation-delay: @delay;
}

h1{
	font-size: 4rem;
	font-family: arial,helvetica;
	color: #fff;
	margin:0;
	padding:0;
}

.section{
	text-align:center;
}

.section0,
.section1,
.section2,
.section3{
	background-size: cover;
	overflow: hidden;
}

//section0
.instro-bg {
	width: 100%;
	padding: 10px 0;
	background: rgba(0, 0, 0, 0.5);
}

.ball-cover {
	position: absolute;
	top: 50%;
    left: 50%;
    margin-left: -109px;
    margin-top: -362px;
}

.ball {
	min-width: 283px;
	min-height: 316px;
}

.guide {
	position: absolute;
	left: 50%;
	bottom: 20px;
	.size(105px, 100px);
	margin-left: -70px;
	.bg("guide.png");
	background-size: 100%;
	-webkit-transform: rotate(221deg);
	overflow: hidden;

	a {
		display: block;
		.size(105px, 100px);
		overflow: hidden;
	}
}

.me {
	.size(200px, 200px);
	border: 2px solid #fff;
	border-radius: 50%;
	.bg("me.png", no-repeat, 0, -13px);
	background-size: 100%;
}

.teach {
	font-size: 2.5em;
	color: #fff;
}

.super-women {
	font-size: 1.5em;
	color: #fff;
}

//section1
.guide-one {
	position: absolute;
	left: 50%;
	bottom: 0;
	.size(105px, 100px);
	margin-left: -55px;

	a {
		position: absolute;
		left: 50%;
		bottom: 20px;
		display: block;
		.size(105px, 100px);
		margin-left: -55px;
		.bg("guide.png");
		background-size: 100%;
		-webkit-transform: rotate(221deg);
		overflow: hidden;
	}
}

.total {
	margin: 0 20px;
	padding-right: 10px;
	padding-bottom: 10px;
	text-align: left;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.5);
	-webkit-transform: skew(0deg);

	li {
		padding: 10px 0 10px 20px;
		line-height: 1.3;
		font-size: 2.5em;
		color: #fff;
		opacity: 1;
	}

	li:nth-child(1) {
		list-style: none;
		text-align: center;
	}
}

//section3
.guide-two {
	position: absolute;
	left: 50%;
	bottom: 0;
	.size(105px, 100px);
	margin-left: -55px;

	a {
		position: absolute;
		left: 50%;
		bottom: 20px;
		display: block;
		.size(105px, 100px);
		margin-left: -55px;
		.bg("guide.png");
		background-size: 100%;
		overflow: hidden;
	}
}


.active {
	overflow: hidden;

	.ball-cover {
		-webkit-animation: ball-act 3s linear 1 alternate;
	}

	.ball {
		-webkit-animation: ball 1s linear infinite alternate;
	}

	.guide {
		-webkit-animation: guide 1s linear infinite alternate;
	}

	.delay1 {
		.animation(showFont, 4s);
	}

	.delay2 {
		.animation(showFont, 4.5s);
	}

	.super-women {
		.animation(showFont, 5s);
	}

	.guide-one {
		-webkit-animation: guideOne 3s ease-in 1 alternate;

		a {
			-webkit-animation: guide 1s linear infinite alternate;
		}
	}

	.total {
		.animation(background, 4s);

		li:nth-child(1) {
			.animation(scaleFont, 4.5s);
		}

		li:nth-child(2) {
			.animation(showFont, 5.5s);
		}

		li:nth-child(3) {
			.animation(showFont, 6s);
		}

		li:nth-child(4) {
			.animation(showFont, 6.5s);
		}

		li:nth-child(5) {
			.animation(showFont, 7s);
		}

		li:nth-child(6) {
			.animation(showFont, 7.5s);
		}

		li:nth-child(7) {
			.animation(showFont, 8s);
		}

		li:nth-child(8) {
			.animation(showFont, 8.5s);
		}

	}

	.guide-two {
		-webkit-animation: guideOne 4s ease-in 1 alternate;

		a {
			-webkit-animation: last-guide 4s linear 1;
		}
	}
		
}

//animation
@-webkit-keyframes guide {
	from {
		bottom: 100px;
	}
	to {
		bottom: 20px;
	}
}

@-webkit-keyframes last-guide {
	from {
		-webkit-transform: rotate(221deg);
	}
	to {
		-webkit-transform: rotate(0deg);
	}
}

//气球
@-webkit-keyframes ball-act {
	0%{  
		margin-top: -500px;
		left: 0;  
	}
    48.5%{  
    	margin-top: -400px;
    	left: 40%;  
    }
    51.5%{  
    	margin-top: -400px;
    	left: 40%;  
    }
    100%{  
    	margin-top: -362px;
    	left: 50%;  
    }
}

@-webkit-keyframes ball{
    0%{  
    	-webkit-transform: rotate(-7deg);  
    }
    100%{  
    	-webkit-transform: rotate(5deg);  
    }
}

@-webkit-keyframes guideOne {
	from {
		bottom: 100%;
	}
	to {
		bottom: 0%;
	}
}

@-webkit-keyframes scaleFont {
	from {
		opacity: 0;
		-webkit-transform: scale(.5);
	}
	to {
		opacity: 1;
		-webkit-transform: scale(1);
	}
}

@-webkit-keyframes background {
	from {
		-webkit-transform: skew(20deg);
		background: rgba(0, 0, 0, 0);
	}
	to {
		-webkit-transform: skew(0deg);
		background: rgba(0, 0, 0, 0.5);
	}
}

@-webkit-keyframes showFont {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}