@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*/

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

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

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

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

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

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





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

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

img.banner001,
img.banner002,
img.banner003,
img.banner004,
img.banner005 {
    position: absolute;
}


/*Banner*/
img.banner_big, img.banner_min {
    background-size: 100% 100%;
    animation: shrink 40s infinite alternate;
}

/*@-webkit-keyframes shrink {
    0% {
        opacity: 1;
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
    }

    1.5625% {
        opacity: 1;
    }

    23.4375% {
        opacity: 1;
    }

    26.5625% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
    }
}*/




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

.fill_lable {
    padding: 0.5% 0;
}

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

.fill_form {
    padding: 0.8% 5%;
}

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


.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: 40px;
    font-weight: bold;
    margin: 20% auto;
    background-color: #2a81ea;
    line-height: 64px;
    width: 100%;
    max-width: 460px;
    color: #ffffff;
    text-transform: uppercase;
    transition: box-shadow 0.8s, color 0.5s;
    padding: 12px;
    letter-spacing: 0.05em;
}

.go_button:hover {
    box-shadow: inset 460px 0px #1D68C4;
    color: #ffffff;
}

.fa-chevron-right {
    margin-left: 10px;
}


.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 #64b2f6;
    border-radius: 25px;
}


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

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



/*課程表格*/

/*表格共同樣式*/
.table-wrapper {
    background-color: #d6e8fd;
    padding-top: 80px;
    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 豎屏時, 頁面顯示尺寸 大於1921 時,顯示效果↓↓↓↓    */

@media (min-width: 1921px) {
    .break {
        display: none;
    }


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

    img.banner_min {
        display: none;
    }

    img.banner001 {
        display: block;
        top: 9%;
        left: 47%;
        z-index: 3;
        height: auto;
        width: 39vw;
    }

    img.banner002 {
        display: block;
        top: 59%;
        left: 48.5%;
        z-index: 3;
        height: auto;
        width: 32vw;
    }

    img.banner003 {
        display: block;
        bottom: 0;
        left: 27%;
        z-index: 4;
        height: auto;
        width: 24vw;
    }

    img.banner004 {
        display: block;
        bottom: 0;
        left: 5%;
        z-index: 5;
        height: auto;
        width: 28vw;
    }

    img.banner005 {
        display: block;
        top: 75%;
        left: 48%;
        z-index: 4;
        height: auto;
        width: 37vw;
    }



    /*表單區*/
    .fill {
        padding: 40px 10px 50px 10px;
    }

        .fill h1 {
            color: #313131;
            text-align: center;
            font-size: 36px;
            font-weight: bold;
            line-height: 60px;
            margin-bottom: 60px;
        }

    .focus {
        color: #2a81ea;
        font-size: 45px;
        font-weight: bold;
    }

    .focus2 {
        color: #13b5b1;
    }



    .pctable {
        display: block;
    }

    .mbtable {
        display: none;
    }
}

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

@media (max-width: 1920px) and (min-width: 1400px) {
    .break {
        display: none;
    }

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

    img.banner_min {
        display: none;
    }

    img.banner001 {
        display: block;
        top: 10%;
        left: 50%;
        z-index: 3;
        max-width: 720px;
        height: auto;
        width: 38vw;
    }

    img.banner002 {
        display: block;
        top: 56%;
        left: 51%;
        z-index: 3;
        max-width: 602px;
        height: auto;
        width: 32vw;
    }

    img.banner003 {
        display: block;
        bottom: 0;
        left: 29%;
        z-index: 4;
        max-width: 460px;
        height: auto;
        width: 24vw;
    }

    img.banner004 {
        display: block;
        bottom: 0;
        left: 7%;
        z-index: 5;
        max-width: 540px;
        height: auto;
        width: 29vw;
    }

    img.banner005 {
        display: block;
        top: 72%;
        left: 50.5%;
        z-index: 4;
        max-width: 576px;
        height: auto;
        width: 36vw;
    }



    /*表單區*/
    .fill {
        padding: 40px 10px 50px 10px;
    }

        .fill h1 {
            color: #313131;
            text-align: center;
            font-size: 36px;
            font-weight: bold;
            line-height: 60px;
            margin-bottom: 60px;
        }

    .focus {
        color: #2a81ea;
        font-size: 45px;
        font-weight: bold;
    }

    .focus2 {
        color: #13b5b1;
    }

    .pctable {
        display: block;
    }

    .mbtable {
        display: none;
    }
}

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

@media (max-width: 1399px) and (min-width: 992px) {
    .break {
        display: none;
    }

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

    img.banner_min {
        display: none;
    }

    img.banner001 {
        display: block;
        top: 10%;
        left: 50%;
        z-index: 3;
        max-width: 720px;
        height: auto;
        width: 39vw;
    }

    img.banner002 {
        display: block;
        top: 60%;
        left: 51%;
        z-index: 3;
        max-width: 602px;
        height: auto;
        width: 33vw;
    }

    img.banner003 {
        display: block;
        bottom: 0;
        left: 29%;
        z-index: 4;
        max-width: 460px;
        height: auto;
        width: 24vw;
    }

    img.banner004 {
        display: block;
        bottom: 0;
        left: 7%;
        z-index: 5;
        max-width: 540px;
        height: auto;
        width: 29vw;
    }

    img.banner005 {
        display: block;
        top: 75%;
        left: 50.5%;
        z-index: 4;
        max-width: 576px;
        height: auto;
        width: 37vw;
    }


    /*表單區*/
    .fill {
        padding: 30px 10px 50px 10px;
    }

        .fill h1 {
            color: #313131;
            text-align: center;
            font-size: 35px;
            font-weight: bold;
            line-height: 60px;
            margin-bottom: 60px;
        }

    .focus {
        color: #2a81ea;
        font-size: 45px;
        font-weight: bold;
    }

    .focus2 {
        color: #13b5b1;
    }

    .pctable {
        display: block;
    }

    .mbtable {
        display: none;
    }
}



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

@media (max-width: 991px) and (min-width: 768px) {
    .break {
        display: block;
    }

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

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

    img.banner_min {
        width: 100%;
        height: auto;
    }

    img.banner001 {
        display: block;
        top: 4%;
        left: 20%;
        z-index: 3;
        max-width: 720px;
        height: auto;
        width: 68vw;
    }


    img.banner002 {
        display: block;
        top: 36%;
        left: 21.5%;
        z-index: 3;
        max-width: 602px;
        height: auto;
        width: 57vw;
    }

    img.banner003 {
        display: block;
        bottom: -9%;
        left: 63%;
        z-index: 4;
        max-width: 460px;
        height: auto;
        width: 46vw;
    }

    img.banner004 {
        display: block;
        bottom: -7%;
        left: -8%;
        z-index: 4;
        max-width: 540px;
        height: auto;
        width: 51vw;
    }

    img.banner005 {
        display: block;
        top: 45%;
        left: 19%;
        z-index: 4;
        max-width: 576px;
        height: auto;
        width: 68vw;
    }



    /*表單區*/
    .fill {
        padding: 50px 10px 50px 10px;
    }

        .fill h1 {
            color: #313131;
            text-align: center;
            font-size: 36px;
            font-weight: bold;
            line-height: 50px;
            margin-bottom: 60px;
        }

    .focus {
        color: #2a81ea;
        font-size: 45px;
        font-weight: bold;
    }

    .focus2 {
        color: #13b5b1;
    }

    .fill .go_button {
        margin: 8% auto;
    }

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

    .new {
        display: block;
    }

    .pctable {
        display: block;
    }

    .mbtable {
        display: none;
    }
}



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

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

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

    img.banner_min {
        width: 100%;
        height: auto;
    }

    img.banner001 {
        display: block;
        top: 5%;
        left: 20%;
        z-index: 3;
        max-width: 720px;
        height: auto;
        width: 68vw;
    }


    img.banner002 {
        display: block;
        top: 37%;
        left: 21.5%;
        z-index: 3;
        max-width: 602px;
        height: auto;
        width: 57vw;
    }

    img.banner003 {
        display: block;
        bottom: -9%;
        left: 63%;
        z-index: 4;
        max-width: 460px;
        height: auto;
        width: 46vw;
    }

    img.banner004 {
        display: block;
        bottom: -7%;
        left: -8%;
        z-index: 4;
        max-width: 540px;
        height: auto;
        width: 51vw;
    }

    img.banner005 {
        display: block;
        top: 46%;
        left: 27%;
        z-index: 4;
        max-width: 576px;
        height: auto;
        width: 51vw;
    }


    /*表單區*/
    .fill {
        padding: 40px 10px 50px 10px;
    }

        .fill h1 {
            color: #313131;
            text-align: center;
            font-size: 30px;
            font-weight: bold;
            line-height: 45px;
            margin-bottom: 50px;
        }

    .focus {
        color: #2a81ea;
        font-size: 42px;
        font-weight: bold;
    }

    .focus2 {
        color: #13b5b1;
    }

    .fill .go_button {
        margin: 8% auto;
    }

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

    .mbtable {
        display: block;
    }
}



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

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

    .break {
        display: block;
    }

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

    img.banner_min {
        width: 100%;
        height: auto;
    }

    img.banner001 {
        display: block;
        top: 5%;
        left: 20%;
        z-index: 3;
        max-width: 720px;
        height: auto;
        width: 68vw;
    }


    img.banner002 {
        display: block;
        top: 36%;
        left: 21.5%;
        z-index: 3;
        max-width: 602px;
        height: auto;
        width: 57vw;
    }

    img.banner003 {
        display: block;
        bottom: -9%;
        left: 63%;
        z-index: 4;
        max-width: 460px;
        height: auto;
        width: 46vw;
    }

    img.banner004 {
        display: block;
        bottom: -7%;
        left: -8%;
        z-index: 4;
        max-width: 540px;
        height: auto;
        width: 51vw;
    }

    img.banner005 {
        display: block;
        top: 46%;
        left: 27%;
        z-index: 4;
        max-width: 576px;
        height: auto;
        width: 51vw;
    }



    /*表單區*/
    .fill {
        padding: 40px 10px 50px 10px;
    }

        .fill h1 {
            color: #313131;
            text-align: center;
            font-size: 23px;
            font-weight: bold;
            line-height: 40px;
            margin-bottom: 40px;
        }

    .focus {
        color: #2a81ea;
        font-size: 38px;
        font-weight: bold;
    }

    .focus2 {
        color: #13b5b1;
    }

    .fill .go_button {
        display: inline-block;
        text-decoration: none;
        font-size: 38px;
        font-weight: bold;
        margin: 8% auto;
        background-color: #2a81ea;
        line-height: 64px;
        width: 90%;
        max-width: 460px;
        color: #ffffff;
        text-transform: uppercase;
        transition: box-shadow 0.8s, color 0.5s;
        padding: 12px;
        letter-spacing: 0.05em;
    }

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



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

@media (max-width: 320px) {
    .break {
        display: block;
    }

    /*BANNER*/


    img.banner_big {
        display: none;
    }

    img.banner_min {
        width: 100%;
        height: auto;
    }

    img.banner001 {
        display: block;
        top: 4%;
        left: 20%;
        z-index: 3;
        max-width: 720px;
        height: auto;
        width: 70vw;
    }


    img.banner002 {
        display: block;
        top: 36%;
        left: 21.5%;
        z-index: 3;
        max-width: 602px;
        height: auto;
        width: 60vw;
    }

    img.banner003 {
        display: block;
        bottom: -9%;
        left: 63%;
        z-index: 4;
        max-width: 460px;
        height: auto;
        width: 46vw;
    }

    img.banner004 {
        display: block;
        bottom: -7%;
        left: -10%;
        z-index: 4;
        max-width: 540px;
        height: auto;
        width: 51vw;
    }

    img.banner005 {
        display: block;
        top: 45%;
        left: 25%;
        z-index: 4;
        max-width: 576px;
        height: auto;
        width: 55vw;
    }



    /*表單*/
    .fill {
        padding: 30px 5px 50px 5px;
    }


        .fill h1 {
            color: #313131;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            line-height: 35px;
            margin-bottom: 40px;
        }

    .focus {
        color: #2a81ea;
        font-size: 35px;
        font-weight: bold;
    }

    .focus2 {
        color: #13b5b1;
    }

    .fill .go_button {
        display: inline-block;
        text-decoration: none;
        font-size: 34px;
        font-weight: bold;
        margin: 8% auto;
        background-color: #2a81ea;
        line-height: 64px;
        width: 90%;
        max-width: 460px;
        color: #ffffff;
        text-transform: uppercase;
        transition: box-shadow 0.8s, color 0.5s;
        padding: 8px;
        letter-spacing: 0.05em;
    }

    .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) {
}