html, body { margin: 0; padding: 0; }
#superContainer { height: 100%; position: relative; }
.section { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

#menu { position: fixed; right: 20px; top: 40%; z-index: 10; list-style-type: none; }
#menu li { width: 90px; height: 27px; margin-top: 7px; overflow: hidden;}
#menu a { display: block; height: 27px; padding-right: 30px; line-height: 27px; background: url(../images/dot.png) right -34px no-repeat; color: #000; text-align: right; text-decoration: none; overflow: hidden;}
#menu span { display: block; width: 60px; height: 27px; font-size: 12px; text-indent: 200px; opacity: 0.6; filter:alpha(opacity=60); overflow: hidden;}
#menu a:hover span { text-indent: 0;}
#menu .active a { background-position: right 0;}

.section { position: relative; overflow: hidden;}
.section .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.middle { position: relative; width: 1000px; height: 100%; margin-left: auto; margin-right: auto;}

.section1 { background: url(../images/bg1.jpg) 0 50%;}
.left1 { position: absolute; left: -200%; top: 50%; width: 562px; height: 375px; margin: -280px 0 0 -50px; background-image: url(../images/bg_1_1.png);}
.right1 { position: absolute; left: 200%; top: 50%; width: 560px; height: 100px; margin: 140px 0 0 -260px; text-align: center;}
.right1 p{font-size: 14px; color: #666;}
.right1 p b{ font-size: 18px;}}

.section2 { background: url(../images/bg2.jpg) 0 50% ;}
.bg2-1 { background: url(../images/bg2.jpg) 50% 50%}
.left2 { position: absolute; left: -200%; top: 50%; width: 440px; height: 558px; margin: -160px 0 0 -280px; text-align: center; font-family: "微软雅黑";}
.left2 h3{ font-size: 30px; color: #ffa000;}
.left2 p{font-size: 14px; color: #666;}
.right2 { position: absolute; left: 200%; top: 50%; width: 590px; height: 610px;margin-left: -100px; margin-top: -330px; background-image: url(../images/bg2-1.png);}

.section3 { background: url(../images/bg3.jpg) 0 50%;}
.left3 { position: absolute; left: -200%; top: 30%; width: 386px; height: 220px; margin: -60px 0 0 -170px; background: url(../images/bg3_1.png) 50% 50% no-repeat;}
.right3 { position: absolute; left: 200%; top: 50%; width: 800px; height: 620px; margin: -315px 0 0 -300px; background-image: url(../images/bg3_2.png);}

.section4 {}
.left4 { position: absolute; left: -200%; top: 50%; width:830px; height:510px; margin: -310px 0 0 -180px; background: url(../images/bg4_1.png) 50% 50% no-repeat;}


/* 动画 */
.left { transition: all 1.5s;}
.right { transition: all 1.5s;}
.active .left, .ltie10 .left { left: 260px;}
.active .right, .ltie10 .right { left: 50%;}
.godown span { -webkit-animation: fade 3s infinite linear; animation: fade 3s infinite linear;}
@-webkit-keyframes fade {
	0% { opacity: 1;}
	50% { opacity: 0.3;}
	100% { opacity: 1;}
}
@keyframes fade {
	0% { opacity: 1;}
	50% { opacity: 0.3;}
	100% { opacity: 1;}
}


.qtcode { position: absolute; right: 20px; bottom: 20px; z-index: 4; width: 361px; height: 69px; background-image: url(../images/qtcode.png);}
.godown { *display: none; position: absolute; left: 50%; bottom: 20px; z-index: 100; width: 50px; height: 53px; margin-left: -25px;}
.godown span { display: block; width: 50px; height: 53px; background-image: url(../images/godown.png);}