// autoprefixer: > 5%; last 2 Chrome versions; not ie 6-9, sourceMap: true
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "FZLanTingHei-R-GBK", STHeiti STXihei, Microsoft Yahei, Arial;
}

// ::-webkit-scrollbar {
//     width: 10px;
// }

// /* 滚动槽 */
// ::-webkit-scrollbar-track {
//     box-shadow: rgba(0, 0, 0, 0.3) 0 0 2px;
//     border-radius: 10px;
// }

// /* 滚动条滑块 */
// ::-webkit-scrollbar-thumb {
//     border-radius: 10px;
//     background: rgba(0, 0, 0, 0.1);
//     box-shadow: rgba(0, 0, 0, 0.5) 0 0 3px;
// }

// ::-webkit-scrollbar-thumb:window-inactive {
//     background: rgba(0, 0, 0, 0.2);
// }

body>[p-custom] {
    display: none;
}

[p-page] {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;

    >* {
        pointer-events: auto;
    }
}

.p_main,
.p_main>.page {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.p_main {
    overflow: hidden;
    -webkit-overflow-scrolling: touch;

    >.page {
        display: none;
        z-index: 1;
        transition: all ease .5s;

        &[active="1"] {
            display: block;
            z-index: 2;
        }

        &[active="2"] {
            display: block;
            z-index: 1;
        }
    }

    .p_ele_outer {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        transition: opacity ease .3s;
    }

    .p_ele {
        position: absolute;
        pointer-events: auto;
        // outline: #a0b dashed 1px;
    }

    .p_pic {
        >img {
            display: block;
            width: 100%;
            height: 100%;
            border: none;
            user-select: none;
        }
    }

    .p_text {
        word-break: break-all;
    }

    &[h5-mode="scroll"] {
        overflow-y: auto;

        >.page {
            display: block;
            position: relative;
            left: auto;
            top: auto;
        }
    }
}

.mainLoading {
    .p_main();
    z-index: 20;
    background-color: #fff;
}

.loading_layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;

    >img,
    >svg {
        display: block;
        animation: loading_anime linear 1s infinite;
        filter: drop-shadow(0 0 1px rgba(0, 0, 0, .2))
    }
}

@keyframes loading_anime {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes eleFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes eleFadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

// 淡入
.eleFadeIn {
    animation: eleFadeIn ease .3s;
    animation-fill-mode: forwards;
}

.eleFadeOut {
    animation: eleFadeOut ease .3s;
    animation-fill-mode: forwards;
}