.hc-analysis-os-vue {
    background: url(~ass/images/bj.png) no-repeat;
    background-size: cover;
    color: #fff;
    .body {
        position: relative;
        .title {
            letter-spacing: 1px;
            text-shadow: 0 0 7px rgba(52, 255, 204, .1);
            background: linear-gradient(180deg, #fff 30%, #8bc0f8);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .row {
            position: relative;
            .col {
                position: relative;
                cursor: pointer;
                flex-direction: column;
                background: url(~ass/images/section.png) no-repeat;
                background-size: contain;
                .text {
                    letter-spacing: 1px;
                    text-shadow: 0 0 7px rgba(52, 255, 204, .1);
                    background: linear-gradient(180deg, #fff 10%, #99c7f6);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
                &:hover {
                    background: url(~ass/images/section_hover.png) no-repeat;
                    background-size: contain;
                    .text {
                        background: linear-gradient(180deg,#fff 10%,#7cfaaa);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }
                }
            }
            .col + .col {
                margin-left: 50px;
            }
        }
    }
}
