xiaoben-as2-php/css/english_writing/sass/WritingGuide.scss

.pdf {
    // B5 176mm*250mm
    max-width: 156mm;
    margin: 0 auto;
    padding: 0 10mm;
    font-family: 'Times New Roman', 'SimSun' !important;
    font-size: 12pt !important;
    zoom: 0.74;
}

img {
    max-width: 100%;
    vertical-align: middle;
}

.avoid-paper {
    page-break-inside: avoid !important;
}

.bg-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.header {
    height: 20mm;
    line-height: 10mm;
    font-family: 'Microsoft YaHei';
    font-weight: bold;
    text-align: center;
    margin-bottom: 2mm;

    .header-top {
        height: 10mm;
        background-color: #003b86;

        h1 {
            font-size: 16pt;
            color: #FFF;
        }
    }

    .header-bottom {
        height: 10mm;
        display: -webkit-flex;
        display: flex;
        font-size: 15pt;

        .step {
            width: 52mm;
            background-color: #7dc1e6;
        }

        .name {
            -webkit-flex: auto;
            flex: auto;
            background-color: #dff2fc;
        }
    }
}

.content {
    .section {

        .section-label {
            width: 30mm;
            height: 9mm;
            display: inline-block;
            font-size: 12pt;
            color: #fff;
            font-weight: bold;
            line-height: 9.5mm;
            text-align: center;
            padding-right: 1mm;
            margin: 4mm 0;
            position: relative;

            .section-labe-icon {
                width: 9mm;
                position: absolute;
                top: -1mm;
                right: -5mm;
            }
        }

        .section-content {

            .topic {
                margin-bottom: 4mm;

                .topic-label {
                    height: 8mm;
                    display: inline-block;
                    font-size: 12pt;
                    color: #fff;
                    font-weight: bold;
                    line-height: 8.5mm;
                    text-align: center;
                    background-color: #003b86;
                    border-radius: 4mm;
                    padding-left: 9mm;
                    padding-right: 3mm;
                    margin-bottom: 4mm;
                    position: relative;

                    .topic-labe-icon {
                        width: 9mm;
                        position: absolute;
                        top: 0.4mm;
                        left: 1mm;
                    }
                }

                .topic-content {
                    .unit {
                        margin-bottom: 3mm;

                        .unit-label {
                            display: inline-block;
                            height: 7mm;
                            font-size: 12pt;
                            line-height: 6.5mm;
                            color: #003b86;
                            font-weight: bold;
                            box-sizing: border-box;
                            border-radius: 4mm;
                            border: 0.5mm solid #003b86;
                            padding: 0 3mm 0 9mm;
                            position: relative;
                            margin-top: 2mm;
                            margin-bottom: 4mm;

                            .unit-labe-icon {
                                width: 9mm;
                                position: absolute;
                                top: -3mm;
                                left: -0.5mm;
                            }
                        }

                        .unit-content {}
                    }

                    .unit.sentence {
                        .article {
                            p {
                                span {
                                    line-height: 6mm !important;
                                }
                            }
                        }
                    }

                }
            }

        }

    }

    .article {
        text-align: justify;
        line-height: 5.5mm !important;
        font-size: 12pt !important;

        p {
            font-family: 'Times New Roman', 'SimSun' !important;
            line-height: 5.5mm !important;
            font-size: 12pt !important;
            text-align: justify;

            span {
                font-family: 'Times New Roman', 'SimSun' !important;
                line-height: 5.5mm !important;
                font-size: 12pt !important;
                text-align: justify;
            }
        }
    }
}