@charset "utf-8";


/*課程表格*/

/*表格共同樣式*/
.table-wrapper {
    background-color: #fff6e5;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 20px;
    padding-right: 20px;
}

h2.class-title {
    font-size: 24px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    margin: 8px auto;
}

.class {
    margin-bottom: 40px;
}

.hot {
    font-size: 16px;
    animation: hotflash 0.8s infinite;
    -webkit-animation: hotflash 0.8s infinite;
    -moz-animation: hotflash 0.8s infinite;
    -o-animation: hotflash 0.8s infinite;
}

@keyframes hotflash {
    0%, 50% {
        color: inherit;
    }

    50.1%, 100% {
        color: #d32f2f;
    }
}

@-webkit-keyframes hotflash {
    0%, 50% {
        color: inherit;
    }

    50.1%, 100% {
        color: #d32f2f;
    }
}

@-moz-keyframes hotflash {
    0%, 50% {
        color: inherit;
    }

    50.1%, 100% {
        color: #d32f2f;
    }
}

@-o-keyframes hotflash {
    0%, 50% {
        color: inherit;
    }

    50.1%, 100% {
        color: #d32f2f;
    }
}



.new {
    font-size: 16px;
    animation: newflash 1.2s infinite;
    -webkit-animation: newflash 1.2s infinite;
    -moz-animation: newflash 1.2s infinite;
    -o-animation: newflash 1.2s infinite;
}

@keyframes newflash {
    0%, 50% {
        color: inherit;
    }

    50.1%, 100% {
        color: #1890ff;
    }
}

@-webkit-keyframes newflash {
    0%, 50% {
        color: inherit;
    }

    50.1%, 100% {
        color: #1890ff;
    }
}

@-moz-keyframes newflash {
    0%, 50% {
        color: inherit;
    }

    50.1%, 100% {
        color: #1890ff;
    }
}

@-o-keyframes newflash {
    0%, 50% {
        color: inherit;
    }

    50.1%, 100% {
        color: #1890ff;
    }
}

/*情境英文課,西班牙語課程*/

.class1 > table > thead > tr > th {
    background-color: #448aca;
    border-color: #448aca;
    vertical-align: middle;
}

.class1 > table > tbody > tr > td {
    border-color: #448aca;
    background-color: #fff;
    font-size: 20px;
    color: #626262;
    vertical-align: middle;
}

    .class1 > table > tbody > tr > td:first-child {
        text-align: center;
        vertical-align: middle;
        width: 19%;
    }

.free-button1 {
    display: inline-block;
    text-decoration: none;
    font-size: 24px;
    margin: 6px auto;
    background-color: #448aca;
    line-height: 48px;
    width: 200px;
    color: #ffffff;
    text-transform: uppercase;
    transition: box-shadow 0.8s, color 0.5s;
}

    .free-button1:hover {
        box-shadow: inset 200px 0px #2165a4;
    }

/* 英文會話班,韓語課程*/

.class2 > table > thead > tr > th {
    background-color: #2abcb5;
    border-color: #2abcb5;
    vertical-align: middle;
}

.class2 > table > tbody > tr > td {
    border-color: #2abcb5;
    background-color: #fff;
    font-size: 20px;
    color: #626262;
    vertical-align: middle;
}

    .class2 > table > tbody > tr > td:first-child {
        text-align: center;
        vertical-align: middle;
        width: 19%;
    }

.free-button2 {
    display: inline-block;
    text-decoration: none;
    font-size: 24px;
    margin: 6px auto;
    background-color: #2abcb5;
    line-height: 48px;
    width: 200px;
    color: #ffffff;
    text-transform: uppercase;
    transition: box-shadow 0.8s, color 0.5s;
}

    .free-button2:hover {
        box-shadow: inset 200px 0px #1F8984;
    }


/* 日語會話班,多益認證課程*/

.class3 > table > thead > tr > th {
    background-color: #fb8c00;
    border-color: #fb8c00;
    vertical-align: middle;
}

.class3 > table > tbody > tr > td {
    border-color: #fb8c00;
    background-color: #fff;
    font-size: 20px;
    color: #626262;
    vertical-align: middle;
}

    .class3 > table > tbody > tr > td:first-child {
        text-align: center;
        vertical-align: middle;
        width: 19%;
    }

.free-button3 {
    display: inline-block;
    text-decoration: none;
    font-size: 24px;
    margin: 6px auto;
    background-color: #fb8c00;
    line-height: 48px;
    width: 200px;
    color: #ffffff;
    text-transform: uppercase;
    transition: box-shadow 0.8s, color 0.5s;
}

    .free-button3:hover {
        box-shadow: inset 200px 0px #e86900;
    }

.toeic {
    color: #f06292;
}


/* 情境日語課,語言檢定認證班*/

.class4 > table > thead > tr > th {
    background-color: #f06292;
    border-color: #f06292;
    vertical-align: middle;
}

.class4 > table > tbody > tr > td {
    border-color: #f06292;
    background-color: #fff;
    font-size: 20px;
    color: #626262;
    vertical-align: middle;
}

.class4 > table > tbody > tr > td:first-child {
    text-align: center;
    vertical-align: middle;
    width: 19%;
}

.free-button4 {
    display: inline-block;
    text-decoration: none;
    font-size: 24px;
    margin: 6px auto;
    background-color: #f06292;
    line-height: 48px;
    width: 200px;
    color: #ffffff;
    text-transform: uppercase;
    transition: box-shadow 0.8s, color 0.5s;
}

    .free-button4:hover {
        box-shadow: inset 200px 0px #e13871;
    }



/*  ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 大於1679 時,顯示效果↓↓↓↓    */

@media (min-width: 1680px) {
    .BRR {
        display: none;
    }
    /*表單區*/


    .focus {
        color: #2ec7c9;
    }

    .pctable {
        display: block;
    }

    .mbtable {
        display: none;
    }
}

/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 1400 < x <1678 時,顯示效果 ↓↓↓↓  */

@media (max-width: 1679px) and (min-width: 1400px) {

    /*表單區*/


    .focus {
        color: #2ec7c9;
    }

    .pctable {
        display: block;
    }

    .mbtable {
        display: none;
    }
}

/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 1400 < x <1678 時,顯示效果 ↓↓↓↓  */

@media (max-width: 1399px) and (min-width: 960px) {

 /*表單區*/

    .focus {
        color: #2ec7c9;
    }

    .pctable {
        display: block;
    }

    .mbtable {
        display: none;
    }
}


/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 768 < x <959 時,顯示效果 ↓↓↓↓  */

@media (max-width: 959px) and (min-width: 768px) {

   /*課程表格*/
    .hot {
        display: block;
    }

    .new {
        display: block;
    }

    .pctable {
        display: block;
    }

    .mbtable {
        display: none;
    }

    .BRR {
        display: block;
    }
	
}



/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 768 < x <481 時,顯示效果 ↓↓↓↓  */

@media (max-width: 767px) and (min-width: 481px) {
    .BRR {
        display: block;
    }
	
    /*課程表格*/
    .pctable {
        display: none;
    }

    .mbtable {
        display: block;
    }
}



/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 480 < x <300 時,顯示效果 ↓↓↓↓  */

@media (max-width: 480px) and (min-width: 300px) {
	
    /*BANNER*/
    .BRR {
        display: block;
    }
	
    /*課程表格*/
    .pctable {
        display: none;
    }

    .mbtable {
        display: block;
    }

    .class1 > table > tbody > tr > td {
        font-size: 17px;
    }

    .class2 > table > tbody > tr > td {
        font-size: 17px;
    }

    .class3 > table > tbody > tr > td {
        font-size: 17px;
    }

    .class4 > table > tbody > tr > td {
        font-size: 17px;
    }

    .table-wrapper {
        background-color: #fff6e5;
        padding-top: 40px;
        padding-bottom: 50px;
        padding-left: 10px;
        padding-right: 10px;
    }
	
}



/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸小於300 時,顯示效果 ↓↓↓↓  */

@media (max-width: 300px) {
	/*BANNER*/
    .BRR {
        display: block;
    }

    /*課程表格*/
    .pctable {
        display: none;
    }

    .mbtable {
        display: block;
    }

}