.symDeptBlockTitle {
    border: solid 1px;
    background-color: var(--bcolor);
    border-color: var(--bcolor);
    border-right-color: #FFFFFF;
    font-size: 20px;
}

.symDescBlockTitle {
    border: solid 1px;
    background-color: var(--bcolor);
    border-color: var(--bcolor);
    border-left-color: #FFFFFF;
    font-size: 20px;
}

table th {
    width: 17%;
}

table td {
    width: 83%;
}

.docBlock {
    font-size: 24px;
    color: var(--color);
    border: solid 2px var(--bdcolor);
}

@media(max-width:576px) {
    .popularIcon {
        margin: calc(15px/5);
        justify-content: center;
        display: inline-block;
        width: calc(90%/2);
        font-size: 22px;
    }

    .popularBlock {
        border-radius: 5rem !important;
    }

    .symDeptBlockTitle {
        border: solid 1px;
        background-color: var(--bcolor);
        border-color: var(--bcolor);
        font-size: 20px;
    }

    .symDescBlockTitle {
        border: solid 1px;
        background-color: var(--bcolor);
        border-color: var(--bcolor);
        font-size: 20px;
    }

    .sTopic {
        text-align: left !important;
    }

    .sbtn {
        max-width: 100%;
    }

    .Sub {
        display: block;
    }

    table thead tr {
        display: grid;
    }

    table thead th {
        width: 100%;
    }

    table thead td {
        display: none;
    }

    table tbody tr {
        display: grid;
    }

    table tbody th {
        width: 100%;
    }

    table tbody td {
        width: 100%;
    }

    table tbody td {
        display: grid;
    }

    .symSBlock {
        margin-top: 10px;
    }

    .docBlock {
    font-size: 16px;
    color: var(--color);
    border: solid 2px var(--bdcolor);
}
}

@media(min-width:576px) {
    .popularIcon {
        margin: calc(15px/5);
        justify-content: center;
        display: inline-block;
        width: calc(92%/4);
        font-size: 26px;
    }

    .popularBlock {
        border-radius: 5rem !important;
    }

    .sTopic {
        text-align: left !important;
    }

    .sbtn {
        max-width: 100%;
    }

    .Sub {
        display: none;
    }

    .symSBlock {
        margin-top: 20px;
    }
}

@media(min-width:768px) {
    .popularIcon {
        /*margin:calc(15px/5);*/
        justify-content: center;
        display: inline-block;
        width: calc(88%/6);
        font-size: 22px;
    }

    .popularBlock {
        border-radius: 5rem !important;
    }

    .sTopic {
        text-align: right !important;
    }

    .sbtn {
        max-width: 150px;
    }

    .Sub {
        display: none;
    }

    .symSBlock {
        margin-top: 20px;
    }
}

@media(min-width:992px) {
    .popularIcon {
        margin-left: calc(6px/2);
        justify-content: center;
        display: inline-block;
        width: calc(88%/6);
        font-size: 24px;
    }

    .popularBlock {
        border-radius: 15rem !important;
    }

    .sTopic {
        text-align: right !important;
    }

    .sbtn {
        max-width: 150px;
    }

    .Sub {
        display: none;
    }

    .symSBlock {
        margin-top: 20px;
    }
}

@media(min-width:1200px) {
    .popularIcon {
        margin-left: calc(6px/2);
        justify-content: center;
        display: inline-block;
        width: calc(100%/9);
        font-size: 28px;
    }

    .popularBlock {
        border-radius: 50rem !important;
    }

    .sTopic {
        text-align: right !important;
    }

    .sbtn {
        max-width: 150px;
    }

    .Sub {
        display: none;
    }

    .symSBlock {
        margin-top: 20px;
    }
}