.pattern_01:after {
    position: absolute;
    top: 130px;
    right: -150px;
    content: '';
    width: 125px;
    height: 235px;
    background: url('../images/pattern_level.png') center no-repeat;
    background-size: contain;
    z-index: 999;
}

.pattern_02:after {
    position: absolute;
    top: 140px;
    left: -160px;
    content: '';
    width: 180px;
    height: 275px;
    background: url('../images/pattern_feature.png') center no-repeat;
    background-size: contain;
    z-index: 999;
}

.pattern_03:before {
    position: absolute;
    top: -50px;
    right: -140px;
    content: '';
    width: 185px;
    height: 207.5px;
    background: url('../images/pattern_point.png') center no-repeat;
    background-size: contain;
    z-index: 999;
}

.pattern_03:after {
    position: absolute;
    top: calc( 50% - 50px );
    left: -220px;
    content: '';
    width: 233.5px;
    height: 444px;
    background: url('../images/pattern_step.png') center no-repeat;
    background-size: contain;
    z-index: 999;
}

.pattern_04:after {
    position: absolute;
    top: calc( 50% - 50px );
    right: -165px;
    content: '';
    width: 173.5px;
    height: 310px;
    background: url('../images/pattern_witness.png') center no-repeat;
    background-size: contain;
    z-index: 999;
}





@media screen and (max-width: 1024px) {
    .pattern_01:after {
        top: 104px;
        right: -120px;
        width: 100px;
        height: 188px;
    }
    
    .pattern_02:after {
        top: 122px;
        left: -128px;
        width: 141px;
        height: 220px;
    }
    
    .pattern_03:before {
        top: -40px;
        right: -112px;
        width: 148px;
        height: 167px;
    }
    
    .pattern_03:after {
        top: calc( 50% - 40px );
        left: -176px;
        width: 186.8px;
        height: 355.2px;
    }
    
    .pattern_04:after {
        top: calc( 50% - 40px );
        right: -132px;
        width: 138.8px;
        height: 248px;
    }
    
}