@charset "utf-8";

.wu-loading-svg {
    stroke: #fff;
    fill: #fff;
    vertical-align: middle;
    display: inline-block;
    width: 30px;
    height: 30px
}

.wu-mask-transparent {
    position: fixed;
    z-index: 199;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    opacity: 0
}

.wu-mask-black {
    background-color: rgba(0,0,0,.6);
    -webkit-transition: all .4s;
    transition: all .4s
}

.wu-toast {
    opacity: 0;
    transition: transform .4s;
    -webkit-transition: -webkit-transform .4s linear;
    position: relative;
    z-index: 899;

}

.bg-white {
    background-color: #fff;
    opacity: 1
}

.wu-toast-box {
    max-width: 370px;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 199;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    background: rgba(17,17,17,.8);
    text-align: center;
    border-radius: 5px;
    color: #fff;
    padding: 10px 16px;
    font-size: 36px;
    -webkit-transform: translate(-50%,-50%) scale(.8);
    transform: translate(-50%,-50%) scale(.8);
    -webkit-transition: all .4s;
    transition: all .4s
}

.wu-toast-box-transparent {
    background-color: transparent
}

.wu-toast-box .wu-icon {
    font-size: 36px
}

.wu-toast-box .wu-toast-content {
    color: #fff;
    padding: 0 2px
}

.wu-loading {
    display: inline-block;
    width: 68px;
    height: 68px;
    background-image:
            url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=);animation: weuiLoading 1s steps(12,end) infinite;
    background-size: 100%;
    background-position: center
}

.icon-loading {
    -webkit-animation: weuiLoading 1s steps(12,end) infinite;
    animation: weuiLoading 1s steps(12,end) infinite
}

@-webkit-keyframes weuiLoading {
    0% {
        transform: rotate3d(0,0,1,0deg)
    }

    100% {
        transform: rotate3d(0,0,1,360deg)
    }
}

@keyframes weuiLoading {
    0% {
        transform: rotate3d(0,0,1,0deg)
    }

    100% {
        transform: rotate3d(0,0,1,360deg)
    }
}

.wu-message {
    width: 100%;
    line-height: 36px;
    position: fixed;
    top: -36px;
    left: 0;
    z-index: 9;
    background: rgba(17,17,17,.9);
    text-align: center;
    color: #fff;
    font-size: 14px;
    transition: all .4s;
    -webkit-transition: all .4s
}

.wu-dialog {
    opacity: 0;
    -webkit-transition: all .4s;
    transition: all .4s;
    position: relative;
    z-index: 999
}

.dialog-content {
    width: 480px;
    height: 260px;
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: #fff;
    z-index: 999;
    text-align: center;
    border-radius: 4px;
    overflow: hidden;
    -webkit-transform: translate(-50%,-50%) scale(.8);
    transform: translate(-50%,-50%) scale(.8);
    -webkit-transition: all .4s;
    transition: all .4s
}

.dialog-content .dialog-title {
    padding: 16px 16px 0;
    font-size: 32px
}

.dialog-content .dialog-body {
    padding: 40px 25px 25px;
    position: relative
}

.dialog-content .dialog-text {
    font-size: 38px;
    color: #666
}

.dialog-content .dialog-input {
    padding: 0 10px;
    margin-top: 6px
}

.dialog-content .dialog-input input {
    width: 100%;
    height: 100%;
    font-size: 28px;
    border: 1px solid #dedede;
    border-radius: 4px;
    padding: 4px 6px
}

.dialog-content .dialog-foot {
    display: -webkit-flex;
    display: flex;
    position: relative
}

.dialog-content .dialog-foot:after {
    position: absolute;
    z-index: 15;
    right: 0;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    background-color: #ddd
}

.dialog-content .wu-btn {
    -webkit-flex: 1;
    flex: 1;
    display: block;
    line-height: 80px;
    font-size: 32px;
    font-weight: 100;
    color: #999;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    padding: 0 10px
}

.dialog-content .dialog-btn-confirm {
    color: #de3a3a
}

.dialog-content .wu-btn:after {
    position: absolute;
    z-index: 15;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    display: block;
    width: 1px;
    height: 100%;
    content: '';
    -webkit-transform: scaleX(.5);
    transform: scaleX(.5);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    background-color: #ddd
}

.wu-actionsheet {
    position: relative;
    z-index: 998;
    -webkit-transition: all .4s;
    transition: all .4s
}

.wu-actionsheet-main {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #fafafa;
    font-size: 32px;
    text-align: center;
    -webkit-transform: translate(0,100%);
    transform: translate(0,100%);
    -webkit-transition: all .4s;
    transition: all .4s
}

.wu-actionsheet-cell,.wu-actionsheet-title,.wu-actionsheet-cancel {
    background-color: #fff;
    padding: 12px 0
}

.wu-actionsheet-title {
    padding: 20px 0;
    color: #999;
    font-size: 14px
}

.wu-actionsheet-cell {
    text-align: center;
    position: relative
}

.wu-actionsheet-cell:before {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background-color: #e6e6e6;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.wu-actionsheet-cancel {
    margin-top: 5px
}

.wu-animate-in .wu-actionsheet-main {
    -webkit-transform: translate(0,0);
    transform: translate(0,0)
}

.start-box-refresh {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    background-color: #fff;
    color: #999;
    z-index: 199
}

.start-box-refresh .start-box-icon {
    margin-bottom: 50px
}

.start-box-refresh .wu-icon {
    font-size: 50px
}

.wu-animate-fade-in {
    opacity: 1;
    -webkit-animation: fadeIn .3s ease;
    animation: fadeIn .3s ease
}

.wu-animate-in,.wu-animate-in .wu-mask-black {
    opacity: 1
}

.wu-animate-in .dialog-content,.wu-animate-in .wu-toast-box {
    opacity: 1;
    -webkit-transform: translate(-50%,-50%) scale(1);
    transform: translate(-50%,-50%) scale(1)
}

.wu-animate-fade-out {
    opacity: 0;
    -webkit-transform: scale(.8);
    transform: scale(.8)
}

.wu-animate-out .wu-mask-black {
    opacity: 0
}

.wu-animate-out .wu-actionsheet-main {
    -webkit-transform: translate(0,100%);
    transform: translate(0,100%)
}

.wu-animate-out .dialog-content,.wu-animate-out .wu-toast-box {
    opacity: 0;
    -webkit-transform: translate(-50%,-50%) scale(.8);
    transform: translate(-50%,-50%) scale(.8)
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(.8)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(.8)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.wu-btn-hover {
    background-color: rgba(200,200,200,.2)
}