$baseFontSize:      75px !default;
$dangerColor: 		#FF704F !default;
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

@mixin element($name) {
    @at-root #{&}-#{$name} {
        @content;
    }
}
.zcm_loading{
    @include element('loadingImg'){
        margin: 0 auto;
        padding: pxToRem(50px);
        text-align: center;
        span{
            display: inline-block;
            margin-left: pxToRem(10px);
            width: pxToRem(10px);
            height: pxToRem(10px);
            border-radius: pxToRem(10px);
            background: #d8d8d8;	
        }
        @for $i from 1 through 3{
            span:nth-child(#{$i}){
                animation: zcm_loading_twinkle 1200ms ease-in-out infinite;
                animation-delay: 400ms * $i;
            }
        }
    }
    @include element('error-container'){
        position: fixed;
        z-index: 100;
        top:0;
        right: 0;
        bottom:0;
        left: 0;
        background:#F2F3F6;
    }
    @include element('error-center'){
        color: #2A2F36;
        text-align: center;
        line-height: pxToRem(45px);
        font-size: pxToRem(32px);
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
    }
    @include element('error-cat'){
        width: pxToRem(310px);
        height: pxToRem(310px);
        position: relative;
        background: url("//img.58cdn.com.cn/crop/zcmact/brand/image/delete_sorrycat.png") 0 0 no-repeat;
        background-size: 100%; 
        margin: 0 auto pxToRem(50px);
    }
}

@keyframes zcm_loading_twinkle{
    0%,100%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
}