html,
body {
    font-size: 1em !important;
    font-family: "Roboto", "Microsoft JhengHei", "微軟正黑體", sans-serif !important;
    font-weight: normal !important;
}

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

.hr-sect2 {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: rgba(0, 0, 0, 0.35);
    margin: 8px 0px;
}

.hr-sect2::before,
.hr-sect2::after {
    content: "";
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.35);
    height: 1px;
    font-size: 0px;
    line-height: 0px;
    margin: 0px 8px;
}

.grammar-title {
    display: block;
    font-size: 140%;
    margin-top: 10%;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.5;
    text-align: left;
    padding: 5% 0 0 15%;
}

.grammar-second-title {
    display: block;
    font-size: 140%;
    font-weight: 900;
    color: #0080c9;
    line-height: 1.5;
    text-align: left;
    padding: 0% 0 0 15%;
}

.grammar-custom {
    padding-top: 10% !important;
    padding-bottom: 15% !important;
    background: #5e5e5e url(../images/grammar_ad_2.jpg);
    background-position: center;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .grammar-contactus-title {
        color: #ffffff;
        text-align: left;
        font-weight: 900;
        font-size: 150% !important;
    }

    .grammar-custom {
        padding-top: 3% !important;
        padding-bottom: 7% !important;
        background: #5e5e5e url(../images/grammar_ad_2.jpg);
        background-position: center;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }
}

@media (min-width: 481px) and (max-width: 767px) {

    .grammar-custom {
        padding-top: 4% !important;
        padding-bottom: 9% !important;
        background: #5e5e5e url(../images/grammar_ad_2.jpg);
        background-position: center;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }

    .grammar-title {
        display: block;
        font-size: 100%;
        margin-top: 10%;
        font-weight: 900;
        color: #ffffff;
        line-height: 1.5;
        text-align: left;
        padding: 5% 0 0 15%;
    }

    .grammar-second-title {
        display: block;
        font-size: 100%;
        font-weight: 900;
        color: #0080c9;
        line-height: 1.5;
        text-align: left;
        padding: 0% 0 0 15%;
    }
}

@media (min-width: 320px) and (max-width: 480px) {
    .grammar-title {
        display: block;
        font-size: 140%;
        margin-block-start: 0.83em !important;
        margin-block-end: 0.83em !important;
        font-weight: 900;
        color: #ffffff;
        line-height: 1;
        text-align: left;
        padding: 1% 0 0 10% !important;
    }

    .grammar-second-title {
        display: block;
        font-size: 120%;
        margin-block-start: 0.83em !important;
        margin-block-end: 0.83em !important;
        font-weight: 900;
        color: #0080c9;
        line-height: 1;
        text-align: left;
        padding: 0% 0 0 10% !important;
    }

    .grammar-custom {
        padding-top: 10% !important;
        padding-bottom: 15% !important;
        background: #5e5e5e url(../images/grammar_ad_2.jpg);
        background-position: center;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }
}

@media all and (max-width: 280px) {
    .grammar-title {
        display: block;
        font-size: 105%;
        margin-block-start: 2em !important;
        margin-block-end: 2em !important;
        font-weight: 900;
        color: #ffffff;
        line-height: 1;
        text-align: left;
        padding: 5% 0 0 10%;
    }

    .grammar-second-title {
        display: block;
        font-size: 105%;
        margin-block-start: 2em !important;
        margin-block-end: 2em !important;
        font-weight: 900;
        color: #0080c9;
        line-height: 1;
        text-align: left;
        padding: 0% 0 0 10%;
    }

    .grammar-custom {
        padding-top: 15% !important;
        padding-bottom: 15% !important;
        background: #5e5e5e url(../images/grammar_ad_2.jpg);
        background-position: center;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }
}

/* ----------------------------------coursefeatures--------------------------------------------*/
.grammar-separator {
    padding-top: 5%;
}

.grammar-course-features {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    background-color: #f4f4f4 !important;
}

.grammar-features-heading {
    color: #0080c9;
    text-align: center;
    font-size: 350%;
    font-weight: 900;
}

.grammar-features {
    border-style: solid;
    border-radius: 10px;
    border-color: rgb(221, 153, 51);
    padding: 3%;
    transition: all 700ms ease 0s;
    margin: 15px;
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    color: #000000;
    text-align: center;
    font-weight: 900;
    font-size: 170%;
    display: block;
    line-height: 1.5;

}

.grammar-features-font {
    color: #000000;
    text-align: center;
    font-weight: 900;
    font-size: 120%;
}

.grammar-btn-icon {
    vertical-align: top;
    line-height: 2;
    color: #ffffff;
    font-size: 1.5em;
}

.grammar_box_border {
    padding: 1%;
}

.grammar-content {
    line-height: 1.5;
    font-size: 200%;
    color: #000;
    line-height: 1.5;
}

@media all and (max-width: 480px) {
    .grammar-btn-icon {
        vertical-align: top;
        line-height: 2;
        font-size: 1em;
        color: #ffffff;
        font-size: 1.5em;
    }

    .grammar-content {
        line-height: 1.5;
        font-size: 180%;
        color: #000;
        line-height: 1.5;
    }

    .grammar-features-heading {
        color: #0080c9;
        text-align: center;
        font-size: 300% !important;
        font-weight: 900;
    }
}

@media all and (max-width: 240px) {
    #coursehour {
        width: 170px;
        word-break: normal;
    }

    .c_hour {
        padding-left: 30px;
    }


}

/* ---------------------------------------------------coursegoal-------------------------------------------------------------- */
.coursegoal {
    background-color: #0080c9;
    padding: 3% 0% 3% 0;
}

.coursegoal-heading {
    color: #ffffff;
    text-align: left;
    font-weight: bolder;
    font-size: 240%;
    line-height: 2;
}

.coursegoal-paragraph {
    color: #ffffff;
    font-size: 130%;
    line-height: 2;
}

/* ----------------------------------recommendation--------------------------------------------*/
.grammar-gap {
    margin-top: -5%;
    margin-left: 15%;
}

.grammar-separator {
    padding-top: 5%;
}

.grammar_sep_line {
    border-bottom: 1px solid #EBEBEB;
}

.grammar-heading {
    padding-left: 2%;
    color: #333;
    font-size: 250%;
    font-weight: bolder;
}

.grammar-thumbs-up {
    padding-top: 2%;
    font-weight: bold;
    font-size: 2em;
    color: #0080c9;
}

.grammar-rec_membername {
    color: #000000;
    text-align: left;
    font-weight: 900;
}

.grammar-rec-heading {
    color: #1e73be;
    text-align: left;
    font-weight: 900;
}

.grammar-rec_content {
    color: #000000;
    text-align: left;
    font-size: 120%;
    line-height: 2;
}

@media all and (max-width: 600px) {
    .grammar-rec-image {
        width: 50% !important;

    }
}

@media all and (max-width: 480px) {
    .grammar-rec-image {
        width: 60% !important;

    }

    .grammar-heading {
        padding-left: 2%;
        color: #333;
        font-size: 150% !important;
        font-weight: bolder;
    }
}

/* ----------------------------------contactus--------------------------------------------*/
.grammar-contactus {
    background-color: #0080c9;
    padding: 20px;
}

.grammar-contactus-title {
    color: #ffffff;
    text-align: left;
    font-weight: 900;
    font-size: 180% !important;
}

.grammar-contactus_content {
    color: #fff;
    text-align: left;
    font-size: 110%;
    line-height: 2;
}

.grammar-contactus-ubtn {
    width: 90%;
    min-height: 35px;
    background: #dd9933;
    color: #ffffff;
}

.grammar-contactus-caption {
    font-weight: normal;
    color: #ffffff;
    padding-top: 5%;
}

.grammar-contactus-caption a {
    font-weight: normal;
    color: #ffffff;
    padding-top: 5%;
}