@charset "utf-8";
/*=====滚屏背景=====*/
.section1 {background: #e3e3e3;}
.section2 {background: #ca2c2d;}
.section3 {background: #aaaaaa;}
.section4 {background: url("../images/service-07.jpg") no-repeat center center #e2e2e2;}
.section5 {background: url("../images/service-09.png") no-repeat center center #000;}
.section6 {background: url("../images/service-11.jpg") no-repeat center center #e0e0e0;}
.section7 {background: #ca2c2d;}

/*=====元素定位=====*/
.bg01 { position: absolute; left: 55%; bottom: 15%; width: 400px; height: 210px; margin-left: 200px; margin-bottom: 200px; background: url("../images/service-01.png") 0 0 no-repeat; transition: all 1s;  opacity: 0; margin-left: -1108px; }
.bg02 { position: absolute; bottom: -300px; left: 50%; width: 450px; height: 630px; margin-right: -225px; background: url("../images/service-02.png") no-repeat; opacity: 0; transition: all 1.3s;}
.bg03 { position: absolute; left: 50%; bottom: 50%; width: 1200px; height: 390px; margin-left: -600px; margin-bottom: -200px; background: url("../images/service-03.png") 50% 0 no-repeat; opacity: 0; transition: all 1s;}
.bg04 { position: absolute; left: 50%; bottom: 15%; z-index: 10; width: 330px; height: 52px; margin-left: -165px; background: url("../images/service-04.png") no-repeat; opacity: 0; -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); transition: all 1s;}
.bg05 { position: absolute; left: 50%; bottom: 50%; width: 1200px; height: 390px; margin-left: -600px; margin-bottom: -200px; background: url("../images/service-05.png") 50% 0 no-repeat; opacity: 0; transition: all 1s;}
.bg06 { position: absolute; left: 50%; bottom: 15%; z-index: 10; width: 330px; height: 52px; margin-left: -165px; background: url("../images/service-06.png") no-repeat; opacity: 0; -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); transition: all 1s;}
.bg07 { position: absolute; right: 50%; bottom: 50%; width: 451px; height:310px; margin-right: -480px; margin-bottom: -155px;background: url("../images/service-08.png") 50% 0 no-repeat; opacity: 0; transition: all 1s; }
.bg08 { position: absolute; right: 50%; bottom: 50%; width: 450px; height: 294px; margin-right: -500px; margin-bottom: -250px; background: url("../images/service-10.png") 50% 0 no-repeat; opacity: 0; transition: all 1s;}
.bg09 { position: absolute; left: 50%; bottom: 50%; width: 300px; height: 300px; margin-left: -500px; margin-bottom: -150px; background: url("../images/service-12.png") 50% 0 no-repeat; opacity: 0; transition: all 1s;}
.bg10 {position: absolute; top: 25%; left: 50%; width: 504px; height: 374px; margin-left: -100px; background: url("../images/service-13.png") 50% 0 no-repeat; opacity: 0; transition: all 1s;}

.bg11 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1200px;
	margin-left: -600px;
	margin-top: -235px;
}
.bg11 .row {
	margin: 25px 0;
}
.bg11 .bg11-more {
	display: inline-block;
	float: right;
	margin-top: -25px;
	padding-right: 25px;
	font-size: 18px;
	font-family: sans-serif;
	text-align: right;
	color: #fff;
}
.bg11 .bg11-more:hover {
	color: #fff;
}

/*===== CSS3过度及动画 =====*/
.active .bg01 { opacity: 1; margin-left: -608px; transition-delay: 0.7s;}
.active .bg02 { bottom: 0; opacity: 1; transition-delay: 0.7s; }
.active .bg03 { opacity: 1;transition: opacity 2s cubic-bezier(0.165, 0.84, 0.44, 1) 1s; }
.active .bg04 { opacity: 1; -webkit-transform:scale(1, 1); transform:scale(1, 1); transition-delay: .8s;}
.active .bg05 { opacity: 1;transition: opacity 2s cubic-bezier(0.165, 0.84, 0.44, 1) 1s; }
.active .bg06 { opacity: 1; -webkit-transform:scale(1, 1); transform:scale(1, 1); transition-delay: .8s;}
.active .bg07 { margin-left: 230px; opacity: 1; transition-delay: 1s;}
.active .bg08 { margin-bottom: -147px; opacity: 1; transition-delay: 0.8s;}
.active .bg09 { opacity: 1; transition-delay: 0.8s;}
.active .bg10 { opacity: 1;top: 32%; transition-delay: 0.7s;}