* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

input {
    -webkit-appearance: none;
}

body {
    font-family: Helvetica,Arial,STHeiTi,"Hiragino Sans GB","Microsoft Yahei","微软雅黑",STHeiti,"华文细黑",sans-serif;
    font-size: 14px;
    color: #333;    
}

.header, .footer, .wrap-page {
    position: absolute;
    left: 0;
    right: 0;
}

.header, .footer {
    text-align: center;
    z-index: 900;
    height: 60px;
    background-color: #fff;   
    overflow:hidden; 
}

.header {
    top: 0;
    z-index:905;
    height:50px;
}

.footer {
    bottom: 0;
    z-index:900;
}

.wrap-page {
    top: 0;
    bottom: 0;   
    overflow:hidden;
}

.page {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    background-color: #fff;
    z-index: 1000;
    padding: 10px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1);
    -ms-transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    /*visibility:hidden;*/
}

.page-not-header {
    top: 50px;
    bottom: 0;
}

.page-not-footer {
    top: 0;
    bottom: 60px;
}

.page-not-header-footer {
    top: 50px;
    bottom: 60px;
    z-index: 800;
}

.page-current {
    visibility:visible;
}

.page-active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.page-left {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

.page-right {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

.page-top {
    top: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

.page-bot {
    bottom: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0,100%, 0);
}

.page-in {
    -webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1);
    -ms-transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1);
}

.page-out {
    -webkit-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1) 0.1s;
    -ms-transition: transform 400ms cubic-bezier(0.42, 0, 0.58, 1) 0.1s;
    transition: transform 400ms cubic-bezier(0.42, 0, 0.58, 1) 0.1s;
}

.floatfix:after {
    content: "";
    display: table;
    clear: both;
}

.center-translate {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/*底部模板*/
.footer-template{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
}