html,
body {
    font: 14px/22px normal Arial;
    font-family: "Microsoft JhengHei", "微軟正黑體", Arial, Helvetica, sans-serif !important;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
h7 {
    font-family: "Microsoft JhengHei", "微軟正黑體", Arial, Helvetica, sans-serif !important;
}

.highscore-separator {
    padding-top: 2%;
}

.highscore-title a {
    color: #333333;
    margin-bottom: 5px;
    font-weight: bold;
    text-decoration: none;
    font-size: 80%;

}

.highscore-tags {
    font-size: 80%;
    color: #b4b5bb;
    letter-spacing: normal;
}

.highscore-tags>span {
    color: #b4b5bb;
}

.highscore-content {
    font-size: 14px;
    line-height: 25px;
    color: #85868c;
}

.highscore-box {
    background-color: #f7f7f7;
    width: 98%;
    height: 30em;
}

.highscore-subbox {
    width: 90%;
    padding: 5% 3% 0 3%;
}


/* ----------------------------------category/common --------------------------------------------*/
.category-wrap {

    padding-bottom: 4% !important;
    background: #ffffff;
    background-position: center;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    border-bottom: 5px solid rgba(51, 51, 51, 0.11);
}

.category-heading {
    padding-top: 11% !important;
    color: #333333;
    text-transform: uppercase;
    font-size: 220% !important;
    text-align: center;
    font-weight: 500;
}

@media only screen and (max-width: 769px) {
    .category-wrap {

        padding-bottom: 7% !important;
        background: #ffffff;
        background-position: center;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        border-bottom: 5px solid rgba(51, 51, 51, 0.11);
    }

    .category-heading {
        padding-top: 9% !important;
        text-transform: uppercase;
        font-size: 180% !important;
        text-align: center;
        font-weight: 500;
    }
}

@media all and (max-width: 480px) {
    .category-wrap {

        padding-bottom: 4% !important;
        background: #ffffff;
        background-position: center;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        border-bottom: 5px solid rgba(51, 51, 51, 0.11);
    }

    .category-heading {
        padding-top: 15% !important;
        color: #333333;
        text-transform: uppercase;
        font-size: 150% !important;
        text-align: center;
        font-weight: 500;
    }
}

@media all and (max-width: 320px) {
    .category-wrap {

        padding-bottom: 4% !important;
        background: #ffffff;
        background-position: center;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        border-bottom: 5px solid rgba(51, 51, 51, 0.11);
    }

    .category-heading {
        padding-top: 15% !important;
        color: #333333;
        text-transform: uppercase;
        font-size: 120% !important;
        text-align: center;
        font-weight: 500;
    }
}

@media all and (max-width: 280px) {
    .category-wrap {

        padding-bottom: 4% !important;
        background: #ffffff;
        background-position: center;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        border-bottom: 5px solid rgba(51, 51, 51, 0.11);
    }

    .category-heading {
        padding-top: 15% !important;
        color: #333333;
        text-transform: uppercase;
        font-size: 100% !important;
        text-align: center;
        font-weight: 500;
    }
}

@media all and (max-width: 240px) {
    .category-wrap {

        padding-bottom: 4% !important;
        background: #ffffff;
        background-position: center;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        border-bottom: 5px solid rgba(51, 51, 51, 0.11);
    }

    .category-heading {
        padding-top: 15% !important;
        color: #333333;
        text-transform: uppercase;
        font-size: 90% !important;
        text-align: center;
        font-weight: 500;
    }
}