/*初始化所需的样式*/
/*初始化用的全屏元素*/

.start_container {
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.page {
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.pagelayer {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 21;
    width: 100%;
    height: 100%;
}

.pagelayer > * {
    z-index: 20;
}

.pageContainer {
    position: relative;
}

.page_element {
    position: relative;
    z-index: 22;
}
/*--------阿里妈妈字体库 start-------------*/

@font-face {
    font-family: 'iconfont';
    src: url('../font/iconfont.eot');
    /* IE9*/
    
    src: url('../font/iconfont.woff') format('woff'),
    /* chrome、firefox */
    
    url('../font/iconfont.ttf') format('truetype'),
    /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    
    url('../font/iconfont.svg#iconfont') format('svg');
    /* iOS 4.1- */
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

.icon-xia:before {
    content: "\e62e";
}

.icon-zuo:before {
    content: "\e647";
}

.icon-you:before {
    content: "\f005b";
}

.icon-shang:before {
    content: "\e62d";
}

.icon-fangxiangjiantou:before {
    content: "\e6ac";
}

.icon-huadong:before {
    content: "\e662";
}
/*--------阿里妈妈字体库 end-------------*/
/*----------ele flex定位模式START-------------*/
/*
    flex定位模式，是将容器内元素定位
    不需要js调整
    兼容性很好，绝对不会产生偏移
    响应窗口大小变化
    对整张图层的占位
*/
/*
    应用场景：
    初始的loading容器，不需要提供触控响应
*/

.ele-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}

.ele-left {
    -ms-flex-pack: flex-start;
    /*平行居左 */
    
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.ele-center {
    -ms-flex-pack: center;
    /*平行居中*/
    
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.ele-right {
    -ms-flex-pack: flex-end;
    /*平行居右 */
    
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.ele-top {
    -ms-flex-align: flex-start;
    /*垂直居上*/
    
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.ele-middle {
    -ms-flex-align: center;
    /*垂直居中*/
    
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.ele-bottom {
    -ms-flex-align: flex-end;
    /*垂直居下*/
    
    -webkit-box-align: end;
    -moz-box-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
/*----------ele flex定位模式 END-------------*/
/*------director定位 start--------*/
/*
    director定位是基于父图层的宽高
    不需要js调整
    兼容性良好，在特殊情况下可能会有少许偏移
    响应窗口大小变化
    对内容和偏移容器有占位
*/
/*
    应用场景：
    指示标控件的定位，需要对点击区域添加事件，不能用ele-flex模式定位；
*/

.director {
    z-index: 30;
    position: absolute;
    display: block;
}

.director>* {
    display: inline-block;
}

.director.dir-left {
    /*向左对齐*/
    
    left: 0;
}

.director.dir-right {
    /*向右对齐*/
    
    right: 0;
}

.director.dir-center {
    /*水平居中对齐*/
    
    left: 50%;
}

.director.dir-center>* {
    /*对布局的修正，方便居中偏移*/
    
    margin-left: -50%;
}

.director.dir-top {
    /*向上对齐*/
    
    top: 0;
}

.director.dir-bottom {
    /*向下对齐*/
    
    bottom: 0;
}

.director.dir-bottom img {
    vertical-align: middle;
}

.director.dir-bottom>* {
    /*修正定位bug*/
    
    display: block;
}

.director.dir-middle {
    /*水平居中对齐*/
    
    top: 50%;
}
/*对于垂直居中应给容器手动添加个martop负的一半量*/

.director.dir-middle>* {
    margin-top: -50%;
}

.director.dir-middle img {
    /*    vertical-align: middle;*/
}
/*------director定位 end--------*/
/*----------absolute定位 start-------------*/
/*
    absolut定位是基于父图层的xy轴定位
    只供定位点，需要js元素定位
    兼容性很好，绝对不会产生偏移
    响应窗口大小变化
    只对内容占位
*/
/*
    应用场景：
    图层元素定位，需要精确的定位，不能遮盖其他元素，能精确的绑定点击事件
*/

.abfix {
    position: absolute;
    width: 0px;
    height: 0px;
    background: red;
    /*    z-index: 22;*/
}

.abfix> * {
    position: absolute;
}

.abfix.ableft {
    left: 0;
}

.abfix.abcenter {
    left: 50%;
}

.abfix.abright {
    right: 0;
}

.abfix.abtop {
    top: 0;
}

.abfix.abmiddle {
    top: 50%;
}

.abfix.abbottom {
    bottom: 0;
}
/*----------absolute定位 end-------------*/
/*-----------indicator动画提示样式 start----------*/

.indicator {
    margin: 0 auto;
    text-align: center;
    font-size: 30px;
    color: white;
    opacity: 1;
    transition: opacity .3s ease;
    text-shadow: black 0 0 2px;
}

.indicator img {
    max-width: 28px;
}

.indicator>span {
    font-family: "iconfont" !important;
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
}

.indicator.shang >span:before {
    content: "\e62d";
}

.indicator.xia >span:before {
    content: "\e62e";
}

.indicator.zuo >span:before {
    content: "\e647";
}

.indicator.you >span:before {
    content: "\f005b";
}

.indicator.i-hide {
    opacity: 0;
}
/*向下移动*/

.shiftbottom {
    -webkit-animation: shiftbottom 1.5s ease infinite;
    animation: shiftbottom 1.5s ease infinite;
}

@-webkit-keyframes shiftbottom {
    0% {
        -webkit-transform: translate3d(0, 50%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -20%, 0);
    }
}

@keyframes shiftbottom {
    0% {
        transform: translate3d(0, 50%, 0);
    }
    100% {
        transform: translate3d(0, -20%, 0);
    }
}
/*向右移动*/

.shiftright {
    -webkit-animation: shiftright 1.5s ease infinite;
    animation: shiftright 1.5s ease infinite;
}

@-webkit-keyframes shiftright {
    0% {
        -webkit-transform: translate3d(50%, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-10%, 0, 0);
    }
}

@keyframes shiftright {
    0% {
        transform: translate3d(50%, 0, 0);
    }
    100% {
        transform: translate3d(-10%, 0, 0);
    }
}
/*向下反复移动*/

.hangbottom {
    -webkit-animation: hangbottom 2s ease infinite alternate;
    animation: hangbottom 2s ease infinite alternate;
}

@-webkit-keyframes hangbottom {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }
    50% {
        -webkit-transform: translate3d(0, -50%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 10%, 0);
    }
}

@keyframes hangbottom {
    0% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -50%, 0);
    }
    100% {
        transform: translate3d(0, 10%, 0);
    }
}
/*向右反复移动*/

.hangright {
    -webkit-animation: hangright 2s ease infinite alternate;
    animation: hangright 2s ease infinite alternate;
}

@-webkit-keyframes hangright {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }
    50% {
        -webkit-transform: translate3d(-20%, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@keyframes hangright {
    0% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(-20%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}
/*-----------indicator动画提示样式 end----------*/
/*---------Bluecircle用样式 start--------------*/

.loadingBlock {
    text-align: center;
}

.loadingpro {
    margin: 0 0 0 4px;
}

.loadingimg {
    position: relative;
    margin: 2px auto;
    width: 10px;
    height: 10px;
    opacity: 1;
    transition: opacity ease .5s;
}

.loadingimg span {
    position: absolute;
    left: 0px;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #40a8cc;
    opacity: 0;
    transition: background ease .5s;
}

.loading_title {
    font-size: 12px;
}

.loadingimg span:nth-child(1) {
    /*    -webkit-animation: loadingCircle 1s cubic-bezier(0.605, 0.325, 0.570, 0.760) 0 infinite;*/
    
    -webkit-animation: loadingCircle 1s linear 0s infinite;
    animation: loadingCircle 1s linear 0s infinite;
}

.loadingimg span:nth-child(2) {
    /*    -webkit-animation: loadingCircle 1s cubic-bezier(0.605, 0.325, 0.570, 0.760) .25s infinite;*/
    
    -webkit-animation: loadingCircle 1s linear .25s infinite;
    animation: loadingCircle 1s linear .25s infinite;
}

.loadingimg span:nth-child(3) {
    /*    -webkit-animation: loadingCircle 1s cubic-bezier(0.605, 0.325, 0.570, 0.760) .5s infinite;*/
    
    -webkit-animation: loadingCircle 1s linear .5s infinite;
    animation: loadingCircle 1s linear .5s infinite;
}

.loadingimg span:nth-child(4) {
    /*    -webkit-animation: loadingCircle 1s cubic-bezier(0.605, 0.325, 0.570, 0.760) .75s infinite;*/
    
    -webkit-animation: loadingCircle 1s linear .75s infinite;
    animation: loadingCircle 1s linear .75s infinite;
}

@-webkit-keyframes loadingCircle {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }
    30% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(20px);
    }
}

@keyframes loadingCircle {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    30% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(20px);
    }
}
/*---------Bluecircle用样式 end--------------*/
/*----------bsLoading 初始红色loading动画样式 start--------------*/

._bsloading {
    /*主容器*/
    
    text-align: center;
    font-family: 'Microsoft Yahei';
}

._bsloading.abcenter {
    /*主容器添加定位*/
    
    background: white;
    position: absolute;
    z-index: 1000;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

._bsload_hide {
    display: none;
}

._view,
._process_container {
    -webkit-transition: all ease .5s;
    transition: all ease .5s;
}
/*----------bsLoading 初始红色loading动画样式 end--------------*/