*{
    margin: 0;
    padding: 0;
}

/*body{
    width: 100%;
    height: 100%;
}*/

.container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.bg-adaptive {
    background-size: 100% 100%;
} 

.container .page-a {
    width  : 100%;
    height : 100%;
    background-image: url("images/a/page-a-bg.png");
    position: absolute;
    z-index: 5;
}

.container .page-b {
    width  : 100%;
    height : 100%;
    background-image: url("images/b/page-b-bg.png");
    position: absolute;
    z-index: 4;
}

.page-c {
    width  : 100%;
    height : 100%;
    background-image: url("images/c/page-c-bg.png");
    position: absolute;
    z-index: 3;
}


/**
 * 页面切换
 * 镜头方法
 */
.effect-out{
    -webkit-animation: effectOut 8s ease-in-out forwards;
    -webkit-transform-origin:71% 72%;
    -moz-animation: effectOut 8s ease-in-out forwards;
    -moz-transform-origin:71% 72%;
}

.effect-in{
    z-index: 15;
    display: block;
    opacity:0;
    -webkit-transform: scale(8); 
    -webkit-animation: effectIn 5s ease-in-out forwards;
    -webkit-transform-origin:58.5% 73.5%;
    -moz-transform: scale(8); 
    -moz-animation: effectIn 5s ease-in-out forwards;
    -moz-transform-origin:58.5% 73.5%;
}
@-webkit-keyframes effectOut{
    0% { opacity:1; }
    100% { -webkit-transform: scale(20); opacity:0; }
}
@-moz-keyframes effectOut{
    0% { opacity:1; }
    100% { -moz-transform: scale(20); opacity:0; }
}

 

@-webkit-keyframes effectIn{
    100% { -webkit-transform: scale(1); opacity:1; }
}
@-moz-keyframes effectIn{
    100% { -moz-transform: scale(1); opacity:1; }    
}