@charset "utf-8";


/* CSS Document */

body {
    background-repeat: repeat;
    font-family: "微軟正黑體", sans-serif;
    position: relative;
}



/* 這是設定所有放大縮小的物件是使用移動方式變化 */

* {
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;
}

.NO {
    display: none;
}



/* wow進場後額外繼續輪播的動畫 */

.myAni {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

    .myAni.infinite {
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

    .myAni.hinge {
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
    }

    .myAni.infinite.pulse {
        /*animation-delay: 2s;*/
        -webkit-animation-name: pulse !important;
        animation-name: pulse !important;
    }



/*表頭表尾 請勿------------------------------------砍*/

.top,
.footer {
    line-height: 0px;
    width: 100%;
}

.top,
.footer {
    z-index: 99;
    position: relative;
}

.width1280 {
    max-width: 1280px;
    min-width: 280px;
    height: auto;
    margin: 0 auto;
}



/*BANNER*/

.wrapper {
    margin: 0 !important;
    padding-top: 65px;
}

.banner {
    position: relative;
    overflow: hidden;
}

img.banner001 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

img.banner002 {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

img.banner003 {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

img.banner004 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

img.banner005 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

img.banner006 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

img.banner007 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

img.banner008 {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

img.banner009 {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}



.fill {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

img.banner001,
img.banner002,
img.banner003,
img.banner004,
img.banner005,
img.banner006,
img.banner007,
img.banner008,
img.banner009 {
    -webkit-animation-duration: 1.5s;
    /* Chrome, Safari, Opera */
    animation-duration: 1.5s;
}

img.banner001,
img.banner002,
img.banner003,
img.banner004,
img.banner005,
img.banner006,
img.banner007,
img.banner008,
img.banner009 {
    position: absolute;
}


/*Banner*/
img.banner_big, img.banner_min {
    background-size: 100% 100%;
}


/*表單區*/
.fill {
    position: relative;
    z-index: 10;
    text-align: center;
    background-color: #f7f7f8;
    padding: 60px 15px 100px 15px;
}

.fill_lable {
    padding: 0% 2%;
}

    .fill_lable img {
        width: 100%;
        max-width: 454px;
    }

.fill_form {
    padding: 0.8% 5%;
}

.fill h3 {
    color: #005caf;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    margin: 1.5% auto;
}

.fill p {
    color: #535353;
    text-align: center;
    font-size: 28px;
    margin-bottom: 2%;
}

.glyphicon {
    font-size: 30px;
    margin-left: 5px;
    color: #ffe329;
}

.fill .share {
    display: block;
    width: 280px;
    margin: 0 auto;
}

    .fill .share ul li {
        float: left;
        list-style: none;
        padding-left: 12px;
    }

.fill #sBut {
    display: block;
    max-width: 400px;
    height: auto;
    min-width: 280px;
    margin: 0 auto;
    width: 100%
}

.fill .go_button {
    display: inline-block;
    text-decoration: none;
    font-size: 30px;
    font-weight: bold;
    margin: 10px 10px;
    background-color: #f9681b;
    line-height: 64px;
    width: 250px;
    color: #ffffff;
    text-transform: uppercase;
    transition: box-shadow 0.8s, color 0.5s;
}

.go_button:hover {
    box-shadow: inset 250px 0px #d24300;
}




.fill .statement {
    color: #535353;
    font-size: 16px;
}

    .fill .statement a {
        color: #626262;
    }

        .fill .statement a:hover {
            color: #64b2f6;
        }

.fill .form-control {
    width: 92%;
    margin: 3px auto;
    display: block;
    width: 100%;
    height: 50px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 4px solid #f9681b;
    border-radius: 25px;
}


.option {
    font-size: 18px;
    line-height: 40px;
    /* text-align: center; */
}

.padl5 {
    margin-left: 8px;
    margin-right: 8px;
}


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

/*表格共同樣式*/
.table-wrapper {
    background-color: #ffd9c6;
    padding-top: 3%;
    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: #fb8c00;
}


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

.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 豎屏時, 頁面顯示尺寸 大於1680 時,顯示效果↓↓↓↓    */

@media (min-width: 1680px) {
    .BRR {
        display: none;
    }


    /*BANNER*/
    img.banner_big {
        width: 100%;
        height: auto;
    }


    img.banner_min {
        display: none;
    }



    img.banner001 {
        display: block;
        top: 3%;
        left: 8%;
        z-index: 3;
        /*max-width: 980px;*/
        height: auto;
        width: 51vw;
    }

    img.banner002 {
        display: block;
        top: 43%;
        left: 23.5%;
        z-index: 3;
        /*max-width: 430px;*/
        height: auto;
        width: 22vw;
    }


    img.banner003 {
        display: block;
        bottom: 0%;
        left: 57%;
        z-index: 5;
        /* max-width: 760px; */
        height: auto;
        width: 40vw;
    }

    img.banner004 {
        display: block;
        top: 2%;
        left: 8%;
        z-index: 6;
        /* max-width: 105px; */
        height: auto;
        width: 5.5vw;
    }

    img.banner005 {
        display: block;
        top: 47%;
        left: 5%;
        z-index: 3;
        /* max-width: 144px; */
        height: auto;
        width: 7vw;
    }

    img.banner006 {
        display: block;
        top: 2%;
        left: 54.5%;
        z-index: 3;
        /* max-width: 144px; */
        height: auto;
        width: 7vw;
    }

    img.banner007 {
        display: block;
        top: 17%;
        left: 59%;
        z-index: 3;
        /* max-width: 105px; */
        height: auto;
        width: 6vw;
    }

    img.banner008 {
        display: block;
        top: 72%;
        left: 35%;
        z-index: 3;
        /* max-width: 390px; */
        height: auto;
        width: 20vw;
    }

    img.banner009 {
        display: block;
        top: 72%;
        left: 14%;
        z-index: 3;
        /* max-width: 390px; */
        height: auto;
        width: 20vw;
    }



    /*表單區*/
    .fill {
        position: relative;
        z-index: 10;
        text-align: center;
        padding: 40px 10px 50px 10px;
        background-color: #ededed;
    }

        .fill h1 {
            color: #f9681b;
            text-align: center;
            line-height: 44px;
            padding: 10px;
            font-weight: bold;
            max-width: 800px;
            text-align: center;
            margin: 15px auto 60px auto;
            font-size: 46px;
            border-radius: 40px;
        }

    .focus {
        color: #2ec7c9;
    }

    .pctable {
        display: block;
    }

    .mbtable {
        display: none;
    }
}

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

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

    /*BANNER*/
    img.banner_big {
        width: 100%;
        max-width: 1920px;
        min-width: 730px;
        height: auto;
    }


    img.banner_min {
        display: none;
    }


    img.banner001 {
        display: block;
        top: 3%;
        left: 8%;
        z-index: 3;
        max-width: 980px;
        height: auto;
        width: 51vw;
    }

    img.banner002 {
        display: block;
        top: 43%;
        left: 23.5%;
        z-index: 3;
        max-width: 430px;
        height: auto;
        width: 22vw;
    }


    img.banner003 {
        display: block;
        bottom: 0%;
        left: 57%;
        z-index: 5;
        max-width: 760px;
        height: auto;
        width: 40vw;
    }

    img.banner004 {
        display: block;
        top: 2%;
        left: 8%;
        z-index: 6;
        max-width: 105px;
        height: auto;
        width: 5.5vw;
    }

    img.banner005 {
        display: block;
        top: 47%;
        left: 5%;
        z-index: 3;
        max-width: 144px;
        height: auto;
        width: 7vw;
    }

    img.banner006 {
        display: block;
        top: 2%;
        left: 54.5%;
        z-index: 3;
        max-width: 144px;
        height: auto;
        width: 7vw;
    }

    img.banner007 {
        display: block;
        top: 17%;
        left: 59%;
        z-index: 3;
        max-width: 105px;
        height: auto;
        width: 6vw;
    }

    img.banner008 {
        display: block;
        top: 72%;
        left: 35%;
        z-index: 3;
        max-width: 390px;
        height: auto;
        width: 20vw;
    }

    img.banner009 {
        display: block;
        top: 72%;
        left: 14%;
        z-index: 3;
        max-width: 390px;
        height: auto;
        width: 20vw;
    }


    /*表單區*/
    .fill {
        position: relative;
        z-index: 10;
        text-align: center;
        padding: 40px 10px 50px 10px;
        background-color: #ededed;
    }

        .fill h1 {
            color: #f9681b;
            text-align: center;
            line-height: 44px;
            padding: 10px;
            font-weight: bold;
            max-width: 800px;
            text-align: center;
            margin: 15px auto 60px auto;
            font-size: 46px;
            border-radius: 40px;
        }

    .focus {
        color: #2ec7c9;
    }

    .pctable {
        display: block;
    }

    .mbtable {
        display: none;
    }
}

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

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


    /*BANNER*/
    img.banner_big {
        width: 100%;
        max-width: 1920px;
        min-width: 730px;
        height: auto;
    }


    img.banner_min {
        display: none;
    }


    img.banner001 {
        display: block;
        top: 2%;
        left: 8%;
        z-index: 3;
        max-width: 980px;
        height: auto;
        width: 51vw;
    }

    img.banner002 {
        display: block;
        top: 43%;
        left: 23.5%;
        z-index: 3;
        max-width: 430px;
        height: auto;
        width: 22vw;
    }


    img.banner003 {
        display: block;
        bottom: 0%;
        left: 58%;
        z-index: 5;
        max-width: 760px;
        height: auto;
        width: 39vw;
    }

    img.banner004 {
        display: block;
        top: 1%;
        left: 8%;
        z-index: 6;
        max-width: 105px;
        height: auto;
        width: 5.5vw;
    }

    img.banner005 {
        display: block;
        top: 47%;
        left: 5%;
        z-index: 3;
        max-width: 144px;
        height: auto;
        width: 7vw;
    }

    img.banner006 {
        display: block;
        top: 2%;
        left: 55.5%;
        z-index: 3;
        max-width: 144px;
        height: auto;
        width: 7vw;
    }

    img.banner007 {
        display: block;
        top: 17%;
        left: 59.5%;
        z-index: 3;
        max-width: 105px;
        height: auto;
        width: 6vw;
    }

    img.banner008 {
        display: block;
        top: 72%;
        left: 35%;
        z-index: 3;
        max-width: 390px;
        height: auto;
        width: 20vw;
    }

    img.banner009 {
        display: block;
        top: 72%;
        left: 14%;
        z-index: 3;
        max-width: 390px;
        height: auto;
        width: 20vw;
    }



    /*表單區*/
    .fill {
        position: relative;
        z-index: 10;
        text-align: center;
        padding: 30px 10px 50px 10px;
        background-color: #ededed;
    }

        .fill h1 {
            color: #f9681b;
            text-align: center;
            line-height: 44px;
            padding: 10px;
            font-weight: bold;
            max-width: 800px;
            text-align: center;
            margin: 15px auto 60px auto;
            font-size: 46px;
            border-radius: 40px;
        }

    .focus {
        color: #2ec7c9;
    }

    .pctable {
        display: block;
    }

    .mbtable {
        display: none;
    }
}


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

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


    /*BANNER*/
    img.banner_big {
        display: none;
    }

    img.banner_min {
        width: 100%;
        max-width: 960px;
        height: auto;
    }


    img.banner001 {
        display: block;
        top: 3.5%;
        left: 9.5%;
        z-index: 3;
        max-width: 980px;
        height: auto;
        width: 79vw;
    }

    img.banner002 {
        display: block;
        top: 33.5%;
        left: 34.5%;
        z-index: 3;
        max-width: 430px;
        height: auto;
        width: 34vw;
    }


    img.banner003 {
        display: block;
        bottom: -6%;
        left: 40%;
        z-index: 5;
        max-width: 760px;
        height: auto;
        width: 60vw;
    }


    img.banner004 {
        display: block;
        top: 1%;
        left: 16%;
        z-index: 6;
        max-width: 105px;
        height: auto;
        width: 7.5vw;
    }

    img.banner005 {
        display: block;
        top: 38%;
        left: 6%;
        z-index: 3;
        max-width: 144px;
        height: auto;
        width: 11vw;
    }

    img.banner006 {
        display: block;
        top: 2%;
        left: 83%;
        z-index: 3;
        max-width: 144px;
        height: auto;
        width: 10vw;
    }

    img.banner007 {
        display: block;
        top: 13%;
        left: 91%;
        z-index: 3;
        max-width: 105px;
        height: auto;
        width: 8.5vw;
    }

    img.banner008 {
        display: block;
        top: 64%;
        left: 5%;
        z-index: 3;
        max-width: 390px;
        height: auto;
        width: 34vw;
    }

    img.banner009 {
        display: block;
        top: 53%;
        left: 5%;
        z-index: 3;
        max-width: 390px;
        height: auto;
        width: 34vw;
    }


    /*表單區*/
    .fill {
        position: relative;
        z-index: 10;
        text-align: center;
        padding: 20px 10px 50px 10px;
        background-color: #ededed;
    }

        .fill h1 {
            color: #f9681b;
            text-align: center;
            line-height: 44px;
            padding: 10px;
            font-weight: bold;
            max-width: 800px;
            text-align: center;
            margin: 15px auto 40px auto;
            font-size: 42px;
            border-radius: 40px;
        }

    .focus {
        color: #2ec7c9;
    }

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

    .new {
        display: block;
    }

    .BRR {
        display: block;
    }
    .mbtable {
        display: block;
    }
    .pctable {
        display: none;
    }



}



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

@media (max-width: 767px) and (min-width: 481px) {
    .BRR {
        display: block;
    }

    /*BANNER*/
    img.banner_big {
        display: none;
    }

    img.banner_min {
        width: 100%;
        max-width: 960px;
        height: auto;
    }


    img.banner001 {
        display: block;
        top: 3.5%;
        left: 9.5%;
        z-index: 3;
        max-width: 980px;
        height: auto;
        width: 79vw;
    }

    img.banner002 {
        display: block;
        top: 33.5%;
        left: 34.5%;
        z-index: 3;
        max-width: 430px;
        height: auto;
        width: 34vw;
    }


    img.banner003 {
        display: block;
        bottom: -6%;
        left: 40%;
        z-index: 5;
        max-width: 760px;
        height: auto;
        width: 60vw;
    }


    img.banner004 {
        display: block;
        top: 1%;
        left: 16%;
        z-index: 6;
        max-width: 105px;
        height: auto;
        width: 7.5vw;
    }

    img.banner005 {
        display: block;
        top: 38%;
        left: 6%;
        z-index: 3;
        max-width: 144px;
        height: auto;
        width: 11vw;
    }

    img.banner006 {
        display: block;
        top: 2%;
        left: 83%;
        z-index: 3;
        max-width: 144px;
        height: auto;
        width: 10vw;
    }

    img.banner007 {
        display: block;
        top: 13%;
        left: 91%;
        z-index: 3;
        max-width: 105px;
        height: auto;
        width: 8.5vw;
    }

    img.banner008 {
        display: block;
        top: 64%;
        left: 5%;
        z-index: 3;
        max-width: 390px;
        height: auto;
        width: 34vw;
    }

    img.banner009 {
        display: block;
        top: 53%;
        left: 5%;
        z-index: 3;
        max-width: 390px;
        height: auto;
        width: 34vw;
    }


    /*表單區*/
    .fill {
        position: relative;
        z-index: 10;
        text-align: center;
        padding: 20px 10px 50px 10px;
        background-color: #ededed;
    }

        .fill h1 {
            color: #f9681b;
            text-align: center;
            line-height: 44px;
            padding: 10px;
            font-weight: bold;
            max-width: 800px;
            text-align: center;
            margin: 15px auto 20px auto;
            font-size: 32px;
            border-radius: 40px;
        }

    .focus {
        color: #2ec7c9;
    }

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

    .mbtable {
        display: block;
    }
}



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

@media (max-width: 480px) and (min-width: 300px) {

    .BRR {
        display: block;
    }

    /*BANNER*/
    img.banner_big {
        display: none;
    }

    img.banner_min {
        width: 100%;
        max-width: 960px;
        height: auto;
    }


    img.banner001 {
        display: block;
        top: 3.5%;
        left: 9.5%;
        z-index: 3;
        max-width: 980px;
        height: auto;
        width: 79vw;
    }

    img.banner002 {
        display: block;
        top: 33.5%;
        left: 34.5%;
        z-index: 3;
        max-width: 430px;
        height: auto;
        width: 34vw;
    }


    img.banner003 {
        display: block;
        bottom: -6%;
        left: 40%;
        z-index: 5;
        max-width: 760px;
        height: auto;
        width: 60vw;
    }


    img.banner004 {
        display: block;
        top: 1%;
        left: 16%;
        z-index: 6;
        max-width: 105px;
        height: auto;
        width: 7.5vw;
    }

    img.banner005 {
        display: block;
        top: 38%;
        left: 6%;
        z-index: 3;
        max-width: 144px;
        height: auto;
        width: 11vw;
    }

    img.banner006 {
        display: block;
        top: 2%;
        left: 83%;
        z-index: 3;
        max-width: 144px;
        height: auto;
        width: 10vw;
    }

    img.banner007 {
        display: block;
        top: 13%;
        left: 91%;
        z-index: 3;
        max-width: 105px;
        height: auto;
        width: 8.5vw;
    }

    img.banner008 {
        display: block;
        top: 64%;
        left: 5%;
        z-index: 3;
        max-width: 390px;
        height: auto;
        width: 34vw;
    }

    img.banner009 {
        display: block;
        top: 53%;
        left: 5%;
        z-index: 3;
        max-width: 390px;
        height: auto;
        width: 34vw;
    }


    /*表單區*/
    .fill {
        position: relative;
        z-index: 10;
        text-align: center;
        padding: 10px 10px 50px 10px;
        background-color: #ededed;
    }

        .fill h1 {
            color: #f9681b;
            text-align: center;
            line-height: 44px;
            padding: 10px 5px 10px 5px;
            font-weight: bold;
            max-width: 800px;
            text-align: center;
            margin: 15px auto 20px auto;
            font-size: 34px;
            border-radius: 40px;
        }

    .focus {
        color: #2ec7c9;
    }

    /*課程表格*/
    .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: #ffd9c6;
        padding-left: 10px;
        padding-right: 10px;
    }
}



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

@media (max-width: 300px) {

    /*BANNER*/
    img.banner_big {
        display: none;
    }

    img.banner_min {
        width: 100%;
        max-width: 960px;
        height: auto;
    }


    img.banner001 {
        display: block;
        top: 3.5%;
        left: 9.5%;
        z-index: 3;
        max-width: 980px;
        height: auto;
        width: 79vw;
    }

    img.banner002 {
        display: block;
        top: 33.5%;
        left: 34.5%;
        z-index: 3;
        max-width: 430px;
        height: auto;
        width: 34vw;
    }


    img.banner003 {
        display: block;
        bottom: -6%;
        left: 40%;
        z-index: 5;
        max-width: 760px;
        height: auto;
        width: 60vw;
    }


    img.banner004 {
        display: block;
        top: 1%;
        left: 16%;
        z-index: 6;
        max-width: 105px;
        height: auto;
        width: 7.5vw;
    }

    img.banner005 {
        display: block;
        top: 38%;
        left: 6%;
        z-index: 3;
        max-width: 144px;
        height: auto;
        width: 11vw;
    }

    img.banner006 {
        display: block;
        top: 2%;
        left: 83%;
        z-index: 3;
        max-width: 144px;
        height: auto;
        width: 10vw;
    }

    img.banner007 {
        display: block;
        top: 13%;
        left: 91%;
        z-index: 3;
        max-width: 105px;
        height: auto;
        width: 8.5vw;
    }

    img.banner008 {
        display: block;
        top: 64%;
        left: 5%;
        z-index: 3;
        max-width: 390px;
        height: auto;
        width: 34vw;
    }

    img.banner009 {
        display: block;
        top: 53%;
        left: 5%;
        z-index: 3;
        max-width: 390px;
        height: auto;
        width: 34vw;
    }

    /*表單*/
    .fill {
        position: relative;
        z-index: 10;
        text-align: center;
        padding: 10px 8px 50px 8px;
        background-color: #ededed;
    }

        .fill h1 {
            color: #f9681b;
            text-align: center;
            line-height: 44px;
            padding: 10px 5px 10px 5px;
            font-weight: bold;
            max-width: 800px;
            text-align: center;
            margin: 15px auto 20px auto;
            font-size: 30px;
            border-radius: 40px;
        }

    .option {
        margin-top: 10px;
        line-height: 30px;
    }


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

    .mbtable {
        display: block;
    }


    /*手機板的FOOTER------別刪除*/
    .FOOTER_frame {
        height: 450px;
    }
}







/*========================================================*/

@media only screen and (max-width: 1280px) {
}



/*↓↓↓↓ *螢幕尺寸【大於於】768時頁面顯示效果 ↓↓↓↓ */

@media (max-width: 768px) {
}



/*↓↓↓↓  螢幕尺寸【大於】481時頁面顯示效果  ↓↓↓↓ */

@media (min-width: 481px) {
}




/*↓↓↓↓  螢幕尺寸【小於】480時頁面顯示效果  ↓↓↓↓ */

@media (max-width: 480px) {
}



/*↓↓↓↓ 螢幕尺寸【大於】1024時頁面顯示效果  ↓↓↓↓ */

@media (min-width:1024px) {
}



/*  ↓↓↓↓ 螢幕尺寸【小於】1024時頁面顯示效果    ↓↓↓↓ */

@media (max-width: 1023px) {
}

@media only screen and (max-width: 1280px) {
}