.#{$prefix}blank-page {
    //padding: 70px 0;
    max-width: 700px;
    margin: 20px auto 0;
    overflow: initial;
    position: relative;
    top: 19%;

    .#{$prefix}media__left {
        padding-right: 20px;
    }

    .#{$prefix}media__body {
        max-height: 500px;
    }

    .#{$prefix}h4 {
        font-size: var(--fz-h4);
        font-weight: 400;
        margin-bottom: 16px;
        color: var(--text-color);
    }

    .#{$prefix}list {
        margin-bottom: 20px;
    }
}

.#{$prefix}blank-page__media {
    position: relative;
    width: 180px;
    height: 180px;

    img {
        width: 180px;
        vertical-align: top;
    }
}

.#{$prefix}blank-page__media-bg {
    width: 180px;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom:0;
}

.#{$prefix}blank-page__media-gif {
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom:0;
    display: inline-block;
    -webkit-animation: img-anim 1s ease-in-out alternate infinite;
}

@-webkit-keyframes img-anim {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(0, -8px, 0);
    }
}

.#{$prefix}blank-page__step {
    margin-bottom: 20px;

    .item {
        font-size: var(--fz-default);
        display: inline-block;
        margin-right: 10px;
        color: var(--text-label-color);
    }

    .num {
        display: inline-block;
        width: 18px;
        height: 18px;
        line-height: 16px;
        text-align: center;
        box-sizing: border-box;
        border: 1px solid var(--text-label-color);
        border-radius: 100%;
        vertical-align: 0;
        margin-right: 5px;
    }
}

.#{$prefix}blank-page__op{
  font-size: 0;
  margin-bottom:20px;

  .#{$prefix}btn{
    margin-right: 8px;
  }
  .#{$prefix}link-external{
      margin-right: 8px;
  }
}


/* 默认报错 default-error*/
.#{$prefix}blank-page.default-error .#{$prefix}blank-page__media-bg{
     background-image: url(//imgcache.qq.com/open_proj/proj_qcloud_v2/tea-style/dist/assets/image/black-pages/default-error-bg.png);              /* 背景/投影 */
}
.#{$prefix}blank-page.default-error .#{$prefix}blank-page__media-gif{
     background-image: url(//imgcache.qq.com/open_proj/proj_qcloud_v2/tea-style/dist/assets/image/black-pages/default-error-open.gif);            /* 展开动画 */
}
/* 默认开通 default-open*/
.#{$prefix}blank-page.default-open .#{$prefix}blank-page__media-bg{
     background-image: url(//imgcache.qq.com/open_proj/proj_qcloud_v2/tea-style/dist/assets/image/black-pages/default-open-bg.png);              /* 背景/投影 */
}
.#{$prefix}blank-page.default-open .#{$prefix}blank-page__media-gif{
     background-image: url(//imgcache.qq.com/open_proj/proj_qcloud_v2/tea-style/dist/assets/image/black-pages/default-open-open.gif);            /* 展开动画 */
}
/* 默认欠费 default-arrears*/
.#{$prefix}blank-page.default-arrears .#{$prefix}blank-page__media-bg{
     background-image: url(//imgcache.qq.com/open_proj/proj_qcloud_v2/tea-style/dist/assets/image/black-pages/default-arrears-bg.png);              /* 背景/投影 */
}
.#{$prefix}blank-page.default-arrears .#{$prefix}blank-page__media-gif{
     background-image: url(//imgcache.qq.com/open_proj/proj_qcloud_v2/tea-style/dist/assets/image/black-pages/default-arrears-open.gif);            /* 展开动画 */
}

/* 默认 权限 default-permission*/
.#{$prefix}blank-page.default-permission .#{$prefix}blank-page__media-bg{
     background-image: url(//imgcache.qq.com/open_proj/proj_qcloud_v2/tea-style/dist/assets/image/black-pages/default-permission-bg.png);              /* 背景/投影 */
}
.#{$prefix}blank-page.default-permission .#{$prefix}blank-page__media-gif{
     background-image: url(//imgcache.qq.com/open_proj/proj_qcloud_v2/tea-style/dist/assets/image/black-pages/default-permission-open.gif);            /* 展开动画 */
}