*{padding:0px;margin:0px;}
ul li{list-style: none;}

#audiobox{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 5%;
    right: 3%;
    border-radius: 25px;
    background: url("../images/music_on.png") no-repeat center;
    cursor: pointer;
}

.section1 { background: url(../images/1.jpg) 60%;}

.section2 { background: url(../images/2.jpg) 60%;}

.section3 { background: url(../images/3.jpg) 60%;}

.section4 { background: url(../images/4.jpg) 60%;}

.section5 { background: url(../images/5.jpg) 60%;}

#menu{position:fixed; z-index:70; list-style: none;margin:0px;padding-left:20px;
	width:200px;height:750px;background: url(../images/menu.png) no-repeat;padding-top:250px;}
.item{width:164px; height:64px;top:200px;transition:all 0.8s ease-in 0.2s; overflow: hidden;}
#menu li {width:165px;height:60px;cursor: pointer;}
#menu li.t1{background-image: url(../images/yu1.png);}
#menu li.t2{background-image: url(../images/yu2.png);}
#menu li.t3{background-image: url(../images/yu3.png);}
#menu li.t4{background-image: url(../images/yu4.png);}
#menu li.t5{background-image: url(../images/yu5.png);}
#menu li.t1.active {background-image: url(../images/yu1-on.png);}
#menu li.t2.active {background-image: url(../images/yu2-on.png);}
#menu li.t3.active {background-image: url(../images/yu3-on.png);}
#menu li.t4.active {background-image: url(../images/yu4-on.png);}
#menu li.t5.active {background-image: url(../images/yu5-on.png);}




.section {  font: 14px "Microsoft Yahei";}



/*

/*第一�?/
#pg1-2{position:absolute;bottom:0;left:0;transition:all 2s;-moz-transition:all 2s;
-webkit-transition:all 2s; -o-transition:all 2s;opacity: 0;transform:translateY(400px);z-index: 0; }
.active #pg1-2{opacity: 1;transform:translateY(0);}

#pg1-3{position: absolute;left:30%;top:25%;transition:all 2s;-moz-transition:all 2s;
-webkit-transition:all 2s; -o-transition:all 2s;opacity: 0; -moz-transform:scale(1.5);-webkit-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5);}
.active #pg1-3{opacity: 1;-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1);}

#pg1-4{position:absolute;top:0;right:0;transition:all 2s;-moz-transition:all 2s;
-webkit-transition:all 2s; -o-transition:all 2s;opacity: 0;transform:translateX(400px); z-index: 10;}
.active #pg1-4{opacity: 1;transform:translateX(0);}



/*第二�?/

/*-----*/
.box2 .list {margin-left:5%;}
/*�?��的列表页面的图片大小*/
.box2 .list img {width:300px;height:190px;}
.box2 .list ul {padding-left:200px;}
.box2 .list li {box-shadow: 5px 5px rgba(0, 0, 0, .2);float:left;width:300px;margin:10px; height:180px;background: #fff;}
/*线让图片都跑到页面下面去*/
.box2 .list li,.txt{transition: 1s; transform:translateY(1000px);}
/*每一张图片延�?/
.box2 .list li:nth-child(1){transition-delay:0.5s;}
.box2 .list li:nth-child(2){transition-delay:0.7s;}
.box2 .list li:nth-child(3){transition-delay:0.9s;}
.box2 .txt{transition-delay:1s;}
/*�?��第二页要触发*/
.box2.active .list li{transform:translateY(0);}
h3{font-family: "微软雅黑";font:5px;font-color:#000;text-align: center;line-height: 30px;}
/*文字显示*/
.box2 .txt{padding-left:280px;width:900px;color:#fff; text-align:left; clear:both;padding-top:50px;}
.box2.active .txt{transform:translateY(0);}

/*标题显示*/
.box2 .title{font-family: "微软雅黑";font-size:30px;color:#fff;padding-left:280px;padding-bottom: 30px;}




/*第三�?/
.box3 .list{margin-left:28%;width:900px;}
.box3 .list img{transition: 1s 0.5s;width:220px;height:220px;margin-right:30px;margin-bottom:15px;border:0px #fff solid;border-radius:50% ;box-shadow: 5px 5px rgba(0, 0, 0, .6);}
/*让后两张叠到左边*/
.box3 .list img:nth-child(1){ transform: translateX(-100px);}
.box3 .list img:nth-child(2){ transform: translateX(-250px);}
.box3 .list img:nth-child(3){ transform: translateX(-500px);}
.box3 .list img:nth-child(4){ transform: translateX(-150px);}
.box3 .list img:nth-child(5){ transform: translateX(-300px);}
.box3 .list img:nth-child(6){ transform: translateX(-550px);}

/*当第三页别触发，就让�?��图片归位*/
.box3.active .list img{ transform: translateX(0);/*恢复原始状�?*/}




/*第四�?/

/*-----*/
.box4 .list {margin-left:5%; position: absolute; top:150px;}
/*�?��的列表页面的图片大小*/
.box4 .list img {width:270px;height:160px;}
.box4 .list ul {padding-left:200px;}
.box4 .list li {box-shadow: 5px 5px rgba(0, 0, 0, .2);float:left;width:270px;margin:10px; padding:5px;height:280px;background: #fff;}
/*线让图片都跑到页面下面去*/
.box4 .list li,.txt{transition: 1s; transform:translateY(1000px);}
/*每一张图片延�?/
.box4 .list li:nth-child(1){transition-delay:0.5s;}
.box4 .list li:nth-child(2){transition-delay:0.7s;}
.box4 .list li:nth-child(3){transition-delay:0.9s;}
.box4 .list li:nth-child(4){transition-delay:1s;}
.box4 .list li:nth-child(5){transition-delay:1.2s;}
.box4 .list li:nth-child(6){transition-delay:1.4s;}
.box4 .txt{transition-delay:1s;}
/*�?��第二页要触发*/
.box4.active .list li{transform:translateY(0);}
h3{font-family: "微软雅黑";font:5px;font-color:#000;text-align: center;line-height: 30px;}
/*文字显示*/
.box4 .txt{padding-left:280px;width:900px;color:#fff; text-align:left; clear:both;padding-top:50px;}
.box4.active .txt{transform:translateY(0);}

/*标题显示*/
.box4 .title{font-family: "微软雅黑";font-size:30px;color:#fff;padding-left:280px;padding-bottom: 30px;}