.doc-card {
    position: relative;
    .doc-card-navigator {
        position: relative;
        z-index: 2;
        overflow: hidden;
    }
    .doc-bg {
        position: relative;
        z-index: 2;
        text-shadow: 2px 3px 5px rgba(0,0,0,.1);
    }
    .doc-title {
        position: relative;
        display: inline-block;
        padding-bottom: 20rpx;
        font-size: 34rpx;
        &::after {
            content: '';
            position: absolute;
            width: calc(100% + 20rpx);
            height: 2px;
            background-color: currentColor;
            left: 0;
            bottom: 0;
        }
    }
    .doc-name {
        position: relative;
        display: block;
        padding-top: 20rpx;
        &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 1px;
            background-color: currentColor;
            left: 0;
            top: 0;
        }
    }
    .doc-text{
        position: relative;
        z-index: 2;
        padding-right: 50px !important;
    }
    .doc-icon{
        position: absolute;
        z-index: 2;
        right: 0;
    }
    .doc-dot {
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        transition: all 0.6s cubic-bezier(.08,.82,.17,1);
        opacity: .3;
        &.doc-dot1 {
            width: 400rpx;
            height: 400rpx;
            left: 0;
            top: auto;
            right: auto;
            bottom: -300rpx;
            filter: hue-rotate(30deg)  brightness(160%);
        }
        &.doc-dot2 {
            left: -40px;
            top: auto;
            right: auto;
            bottom: -20rpx;
            width: 300rpx;
            height: 300rpx;
            filter: brightness(80%);
        }
        &.doc-dot3 {
            top: -120rpx;
            right: -120rpx;
            opacity: 0.6;
            width: 240rpx;
            height: 240rpx;
            filter: brightness(120%);
        }
    }
    .doc-bg {
        position: absolute;
        z-index: 0;
        width: calc(100% - 40rpx);
        height: 30rpx;
        bottom: -15rpx;
        left: 0;
        right: 0;
        margin: auto;
        border-radius: 10rpx;
        // filter: blur(10px);
        opacity: 0.2;
    }

    &:hover {
        .doc-dot1 {
            transform: translateX(-100rpx) translatey(-360rpx);
            filter:  hue-rotate(-30deg) brightness(80%);
        }
        .doc-dot2 {
            transform: translateX(300rpx) translatey(0px);
            filter: brightness(120%);
        }
        .doc-dot3 {
            filter: brightness(80%);
            transform: translateX(-300rpx) translatey(240rpx);
        }
    }
}