*{
    margin:0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#main{
    width: 640px;
    height: 960px;
    position: absolute;
    left:50%;
    top:0;
    margin-left:-320px;
    transform-origin: top;
    -webkit-transform-origin: top;/*改变缩放的基准点*/
}
#main{
    width: 640px;
    height: 960px;
    left: 50%;
    top: 0;
    margin-left: -320px;
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    -ms-transform-origin: top;
    -o-transform-origin: top;
    transform-origin: top;
    position: absolute;
}

#list li{
    width: 100%;
    height: 100%;
    position: absolute;
    left:0;
    top:0;
    background-size: cover;
    background-repeat:no-repeat ;
}

#list li{
    width:100%;
    height: 100%;
    left: 0;
    top: 0;
    -webkit-background-size: cover;
    background-size: cover;
    position: absolute;
}



#list li:nth-child(1){
    background-image: url(images/b.png);
}
#list li:nth-child(2){
    background-image: url(images/c.png);
}
#list li:nth-child(3){
    background-image: url(images/d.png);
}
#list li:nth-child(4){
    background-image: url(images/e.png);
}
.zIndex{
    z-index: 5;
}
.a1{
    position: absolute;
    bottom: 10%;
    font-size: 30px;
    color: #fff;
    width: 100%;
    text-align: center;

}
.a1 p:nth-child(even){
    transform: translate(500px,0);
    -webkit-transform: translate(500px,0);
}
.a1 p:nth-child(odd){
    transform: translate(-500px,0);
    -webkit-transform: translate(-500px,0);
}
#a1 p{
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    transition:1s;
    -webkit-transition:1s;
}
.a2 p{
    width: 90px;
    height: 90px;
    position: absolute;
    left:50%;
    top:50%;
    margin-left: -45px;
    margin-top: -45px;
}
.a2 p:nth-child(1){
    background: url(images/c1.png) no-repeat;
}
.a2 p:nth-child(2){
    background: url(images/c2.png) no-repeat;
}
.a2 p:nth-child(3){
    background: url(images/c3.png) no-repeat;
}

.a2 p:nth-child(4){
    background: url(images/c4.png) no-repeat;
}

.a2 p:nth-child(5){
    background: url(images/c5.png) no-repeat;
}
.a2 p:nth-child(6){
    background: url(images/c6.png) no-repeat;
}
#a2 p:nth-child(1){
    left: 50%;
    top: 30%;
}
#a2 p:nth-child(2){
    left: 20%;
    top: 40%;
}
#a2 p:nth-child(3){
    left: 80%;
    top: 40%;
}
#a2 p:nth-child(4){
    left: 20%;
    top: 60%;
}
#a2 p:nth-child(5){
    left: 80%;
    top: 60%;
}
#a2 p:nth-child(6){
    left: 50%;
    top: 70%;
}
#a2 p {
    transform:rotate(720deg);
    -webkit-transform:rotate(720deg);
    transition: 1s;
    -webkit-transition: 1s;
}
.a3{
    width: 460px;
    height: 222px;
    position: absolute;
    left:50%;
    margin-left: -230px;
    bottom: 10%;
    background: url(images/d1.png) no-repeat;
}
#a3{
    transform: rotateY(720deg);
    -webkit-transform: rotateY(720deg);
    transition: 0.5s;
    -webkit-transition: 0.5s;

}
.a4 p{
    width: 0;
    height: 0;
    border-radius: 5px;
    box-shadow: 1px 1px 10px #fff;
    word-wrap: break-word;
    overflow: hidden;
    color: #fff;
    position: absolute;
    border: 1px solid #fff;
}
.a4 p:nth-child(1){
    left: 10%;
    top:15%;
}
.a4 p:nth-child(2){
    left: 53%;
    top:18%;
}
.a4 p:nth-child(3){
    left: 46%;
    top:78%;
}
#a4 p{
    width: 200px;
    height: 100px;
    transition: 1s;
    -webkit-transition: 1s;
}