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;
}
.toeic-separator {
    padding-top:2%;
}
.toeic-title {
    display: block;
    font-size: 380%;
    font-weight: bold;
    color: #ffffff;
    text-align: left;
}

.toeic-custom {
    padding-top: 3%!important;
    padding-bottom:8% !important;
    background: #5e5e5e url(../images/kv_toeic.jpg);
    background-position: center;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
.abouttoeic-content {
    font-size: 100%!important;
    color: #85868c;
    line-height:2.5;
}
@media (min-width: 1281px) and (max-width: 1440px) {
.toeic-title {
    display: block;
    font-size: 300%!important;
    font-weight: bold!important;
    color: #ffffff;
    text-align: left;
}
.toeic-custom {
    padding-top: 7%!important;
    padding-bottom:9% !important;
    background: #5e5e5e url(../images/kv_toeic.jpg);
    background-position: center;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
}
@media (min-width: 1025px) and (max-width: 1280px){
.toeic-title {
    display: block;
    font-size: 270%!important;
    font-weight: bold!important;
    color: #ffffff;
    text-align: left;
}

.toeic-custom {
    padding-top: 5%!important;
    padding-bottom:10% !important;
    background: #5e5e5e url(../images/kv_toeic.jpg);
    background-position: center;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
}
@media (min-width: 768px) and (max-width: 1024px)  {
    .toeic-custom {
        padding-top: 6%!important;
        padding-bottom: 10% !important;
        background: #5e5e5e url(../images/kv_toeic.jpg);
        background-position: center;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }
    .toeic-title {
        display: block;
        font-size: 220%!important;
        font-weight: bold!important;
        color: #ffffff;
        text-align: left;
    }
}

@media (min-width: 481px) and (max-width: 767px){
    .toeic-custom {
        padding-top: 8%!important;
        padding-bottom: 18% !important;
        background: #5e5e5e url(../images/kv_toeic.jpg);
        background-position: center;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }
    .toeic-title {
        display: block;
        font-size: 270%!important;
        font-weight: bold!important;
        color: #ffffff;
        text-align: left;
    }
    .toeic-subtitle {
        font-size: 130%!important;
    }
}
@media (min-width: 281px) and (max-width: 480px){
    .toeic-custom {
        padding-top:8%!important;
        padding-bottom: 18% !important;
        background: #5e5e5e url(../images/kv_toeic.jpg);
        background-position: center;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }
    .toeic-title {
        display: block;
        font-size: 190%!important;
        font-weight: bold!important;
        color: #ffffff;
        text-align: left;
    }
    .toeic-subtitle {
        font-size: 130%!important;
    }
}

@media all and (max-width: 280px){
    .toeic-custom {
        padding-top: 18%!important;
        padding-bottom: 18% !important;
        background: #5e5e5e url(../images/kv_toeic.jpg);
        background-position: center;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }
    .toeic-title {
        display: block;
        font-size: 150%!important;
        font-weight: bold!important;
        color: #ffffff;
        text-align: left;
    }
    h1 {
        font-size:95%!important;
    }
    .toeic-subtitle {
        font-size: 130%!important;
    }
}

@media all and (max-width: 240px){
    .toeic-custom {
        padding-top: 10%!important;
        padding-bottom: 18% !important;
        background: #5e5e5e url(../images/kv_toeic.jpg);
        background-position: center;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }
    .toeic-title {
        display: block;
        font-size: 130%!important;
        font-weight: bold!important;
        color: #ffffff;
        text-align: left;
    }
    h1 {
        font-size:95%!important;
    }
    .toeic-img {
        width: 80% !important;  
    }
    .toeic-subtitle {
        font-size: 130%!important;
    }
}



/* ----------------------------------abouttoeic --------------------------------------------*/

.toeic-separator {
    padding-top:5%;
}
.toeic-course-gap {
    margin-top:-50%;
    margin-left:15%;
}
.toeic-sep-line {
    border-top:1px solid #EBEBEB;
}
.toeic-content {
    line-height: 2.5;
    font-size: 1.5em;
    color: #000;
}
.toeic-heading {
    padding-left:2%;
    color: #333333;
    font-size:175%!important;
    font-weight:bolder;
    text-align: left;
}
.abouttoeic-img {
    vertical-align:middle;
}
.abouttoeic-info {
    padding-top:5%;
    font-size:2em;
    color:#0080c9;
}
.toeic-pencilsquare {
    padding-top:5%;
    font-size:2em;
    color:#0080c9;
}
@media all and (max-width: 480px){
    .abouttoeic-sign {
        padding-top:15%;
        font-size:1.5em;
        color:#0080c9;
    }
    .toeic-edit {
        padding-top:15%;
        font-size:1.5em;
        color:#0080c9;
    }
}
    @media all and (max-width: 240px) {
    .toeic-heading {
        padding-left:2%;
        color: #333333;
        font-size:130%!important;
        font-weight:bolder;
        text-align: left;
    }
}



/* ----------------------------------toeicquizformat--------------------------------------------*/
.toeic-quiz-pencil {
    padding-top:5%;
    font-size:2em;
    color:#0080c9;
}
.toeic-quiz-format {
    font-weight:normal;
    color:#ffffff;
    padding-top:5%;
}
.toeic-quiz-table:hover {
    -webkit-box-shadow: 0 0 7px rgba(167,167,167,.5);
    box-shadow: 0 0 7px rgba(167,167,167,.5);
}
.toeic-quiz-table {
    font-size: 13px;
    text-align: center;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    width: 100%;
    height:520px;
    float: left;
    display: table;
    background: #fff;
    color: #777;
    border: 1px solid #efefef;
}
.toeic-quiz-heading {
    width: 100%;
    float: left;
    background: #2867b6;
    top:0;
    padding-bottom:15%;
}
.toeic-quizformat-bodyblock {
    margin-top:20%;
    margin-bottom: 0.5%;
    font-size: 17px;
}
.toeic-quizformat-body {
    font-size: 16px;
    width: 6em;
    height: 6em;
    border: 2px solid #f0f0f0;
    -webkit-border-radius: 500%;
    border-radius: 500%;
    margin: 0 auto!important;
    position: relative;
    background: #fff;
    color: #777;
    -webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
    -o-box-shadow: 0 5px 20px #ddd inset,0 3px 0 #999 inset;
    -ms-box-shadow: 0 5px 20px #ddd inset,0 3px 0 #999 inset;
    box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
}
.toeic-quiz-features {
    padding: 7% 7% 7% 7%;
    list-style: none;
    line-height:2;
    font-size:110%;
}
.toeic-quizformat-headphones {
    color:#f07430;
    font-size:2em;;
}
.toeic-quizformat-book {
    color:#ee6277;
    font-size:2em;
}

/* ---------------------------------------------------toeiccourse-------------------------------------------------------------- */
.toeic-course-separator {
    padding-top:2%;
}

/* ---------------------------------------------------toeicoutline-------------------------------------------------------------- */
.toeic-outline-gap {
    margin-top:-5%;
    margin-left:15%;
}
.toeic-outline-content{
    padding: 5% 10% 5% 0;
}
.toeic-outline-box {
    background:#0080c9;
    color:#ffffff;
    height:80px;
}
.toeic-outline-font {
    font-weight:normal;
    color:#ffffff;
    line-height:80px;
    text-align: center;
}
.toeic-teachingstyles {
    font-weight:normal;
    color:#ffffff;
    line-height:80px;
    text-align: center;
}
.toeic-outline-features ul li {
    border-bottom: 1px dashed #999;
    margin-left: 30px;
    margin-right: 30px;
    text-align: left;
    list-style: none;
    padding-top:2%;
    padding-bottom:2%;
}
.toeic-outline-table {
    background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f0f0f0));
    background: -webkit-linear-gradient(#fff,#f0f0f0);
    background: linear-gradient(#fff,#f0f0f0);
    color: #6f6f6f;
    font-weight:900;
    line-height:2;
} 
.toeic-outline-separator {
    padding-top:2em
}   

.toeic-icon {
    display: inline-block;
    font-size: 32px;
    height: 2em;
    width: 2em;
    text-align: center;
    line-height: 2em;
    -moz-box-sizing: content-box!important;
    -webkit-box-sizing: content-box!important;
    box-sizing: content-box!important;
    color:#ffffff;
    background: #0080c9;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.toeic-flag {
    font-size:2em;
    color:#0080c9;
}

.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.1);
	height: 1px;
	font-size: 0px;
	line-height: 0px;
	margin: 0px 8px;
}