@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');

    * {
        margin: 0;
        padding: 0;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-family: 'Noto Sans TC', "Font Awesome 5 Free", sans-serif !important;
    }

    body {
        background-color: #364b4e !important;
    }

    a:hover {
        text-decoration: none !important;
    }

    ul,
    li {
        list-style-type: none;
        padding: 0px;
    }

    p {
        margin: 0px !important;
        padding: 0px !important;
    }


    /*--------------header---------------*/
    .container {
        padding: 2em 0em;
        max-width: 1000px;
    }

    @media all and (min-width:1200px) {
        .container {
            max-width: 1000px !important;
        }
    }

    @media all and (max-width:1200px) {
        .container {
            max-width: 1000px !important;
        }
    }

    .bg_banner {
        background: url(../img/header-1.jpg) center/cover no-repeat;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }


    .bg_banner .headerimg {
        width: 50%;
    }

    @media all and (max-width:1200px) {
        .bg_banner .headerimg {
            width: 70%;
        }
    }

    @media all and (max-width:768px) {
        .bg_banner .headerimg {
            width: 90%;
        }
    }

    /*--------------#header---------------*/

    /*-----------------------nav-------------------------------------*/
    /*固定導覽列*/
    .menu,
    .topmenu_bg {
        background-color: #364b4e;
    }

    .menu .maxline,
    #mainNav .maxline {
        max-width: 1000px;
        margin: 0 auto;
        padding: .5em !important;
    }

    .menu .nav-item {
        position: relative;
        width: -webkit-calc((100% - 0em)/4);
        width: -moz-calc((100% - 0em)/4);
        width: calc((100% - 0em)/4);
        margin: 0em;
        padding: 0 .5em;
        -webkit-transform: scale(1);
           -moz-transform: scale(1);
            -ms-transform: scale(1);
                transform: scale(1);
        text-align: center;
        font-weight: 600;
        border-right: 2px solid #fff;
        font-size: 1.5em;
    }

    .menu .nav-item:last-child {
        border-right: unset;
    }

    .menu a,
    .nav-link:focus,
    .nav-link:hover {
        padding: 0px !important;
        color: #fff;
    }

    .menu .nav-item:hover a {
        -webkit-transform: scale(0.9);
           -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
                transform: scale(0.9);
        -webkit-transition: all .15s ease-out;
        -moz-transition: all .15s ease-out;
        transition: all .15s ease-out;
        color: #fff;
        background-color: #27373a;
    }


    .hide {
        /* 隱藏 */
        display: none !important;
    }

    @media all and (max-width:1024px) {}

    @media all and (max-width:768px) {
        .menu .nav-item {
            font-size: 1.3em;
        }
    }

    @media all and (max-width:425px) {
        .menu .nav-item {
            width: -webkit-calc(70%/3);
            width: -moz-calc(70%/3);
            width: calc(70%/3);
            font-size: .9em;
        }

        .menu .nav-item:nth-child(2) {
            width: 30%;
        }
    }

    @media all and (max-width:375px) {
        .menu .nav-item {
            width: -webkit-calc(67%/3);
            width: -moz-calc(67%/3);
            width: calc(67%/3);
        }

        .menu .nav-item:nth-child(2) {
            width: 33%;
        }
    }

    /*固定導覽列*/

    /*滑動頁面上方導覽列*/

    /* 
    #mainNav .nav-pills .nav-link {
        font-size: 1em;
        font-weight: bold;
        background-color: #364b4e;
        color: #fff;
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1);
        -webkit-transition: all .15s ease-out;
        -moz-transition: all .15s ease-out;
        transition: all .15s ease-out;
    }

    #mainNav .nav-pills .nav-link:hover {
        -webkit-transform: scale(.9);
        -moz-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9);
        background-color: #27373a;
    }

    #mainNav {
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 20px;
    }

    .hide {
        display: none !important;
    }

    @media all and (max-width:768px) {
        #mainNav .nav-pills {
            font-size: 20px;
        }
    }

    @media all and (max-width:575px) {
        #mainNav .nav-pills {
            font-size: 18px;
        }

        #mainNav .nav-link {
            padding: 0;
        }
    }

    @media all and (max-width:425px) {
        #mainNav .nav-pills {
            font-size: 14px;
        }

        #mainNav .nav-pills .nav-link {
            padding: .5rem 0;
        }
    }

    @media all and (max-width:375px) {
        #mainNav .nav-pills .nav-link {
            font-size: .9em;
        }
    } */

    /*-----------------------nav-------------------------------------*/


    /*--------------------------------------title-------------------------------------------------*/
    .title1 {
        position: relative;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 auto;
    }

    .titletext {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        color: #fff;
    }

    .titletext h2 {
        font-size: 3em;
    }

    @media all and (max-width:575px) {
        .titletext h2 {
            font-size: 2em;
        }
    }

    @media all and (max-width:425px) {
        .title1 {
            width: 100%;
        }

        .titletext h2 {
            font-size: 1.5em;
        }
    }

    @media all and (max-width:375px) {
        .titletext h2 {
            font-size: 1.3em;
        }
    }

    /*--------------------------------------#title-------------------------------------------------*/

    /*--------------------------------------pt1-------------------------------------------------*/
    .pt1 {
        background-color: #fce6dd;
        overflow: hidden;
    }

    .a01box {
        width: 75%;
        margin: 0 auto;
        position: relative;
    }

    .a01box img {
        -webkit-filter: drop-shadow(4px 4px 8px rgb(82, 82, 82));
        filter: drop-shadow(4px 4px 8px rgb(82, 82, 82));
    }

    .a01-content {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 75%;
    }

    .a01-content h3 {
        text-align: center;
        font-weight: 600;
        color: #364b4e;
        font-size: 1.5em;
    }

    /*    .a01-content h3 br {
        display: none;
    } */

    .a01-content h3 span {
        font-size: 1.2em;
        font-style: italic;
        padding: 0 5px;
    }

    .a01-content p {
        font-size: 1.2em;
        margin-top: 1em !important;
    }

    .a01-content .sm {
        text-align: right;
    }

    .a01-content small {
        font-size: 90% !important;
    }

    /* --------------------- */


    .a01-bnt {
        position: relative;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 1em auto;
        text-align: center;
        font-size: 1.5em;
        background: #bc1b21;
        box-shadow: 3px 3px 10px #4c4c4c;
    }

    .a01-bnt a {
        color: #fff;
    }

    .a01-bnt a:hover {
        color: #fff;
    }

    .a01-bnt::before {
        content: '';
        background: url(../img/point.png) center/cover no-repeat;
        position: absolute;
        top: 50%;
        right: 0%;
        width: 40px;
        height: 44px;
        -webkit-animation: point 1s linear infinite;
        -moz-animation: point 1s linear infinite;
        animation: point 1s linear infinite;
    }

    @keyframes point {
        0% {
            right: 0%;
        }

        50% {
            right: 5%;
        }

        100% {
            right: 0%;
        }
    }

    .a01-bnt:hover {
        -webkit-transform: scale(.9);
        -moz-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9);
        -webkit-transition: .15s ease-in-out;
        -moz-transition: .15s ease-in-out;
        transition: .15s ease-in-out;
        box-shadow: 0px 0px 20px #bc1b21;
    }

    .a01-bnt:hover::before {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        -webkit-transition: .15s ease-in-out;
        -moz-transition: .15s ease-in-out;
        transition: .15s ease-in-out;
    }


    @media all and (max-width:768px) {
        .a01box {
            width: 90%;
        }
    }

    @media all and (max-width:576px) {}

    @media all and (max-width:425px) {
        .a01-content {
            width: 90%;
        }

        .a01-content h3 {
            font-size: 1.2em;
        }

        /* .a01-content h3 br {
            display: block;
        } */

        .a01-bnt {
            width: 80%;
        }
    }

    @media all and (max-width:375px) {}

    /* -------------------------------------------------- */

    .a02box {
        width: 80%;
        margin: 1em auto;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .a02-1 {
        width: -webkit-calc(100%/4.5);
        width: -moz-calc(100%/4.5);
        width: calc(100%/4.5);
        margin: .5em;
        padding: .5em;
    }

    .a02-1:nth-child(odd) {
        background: #fff;
    }

    .a02-1:nth-child(even) {
        background: #717871;
    }

    .a02-1 p {
        text-align: center;
        font-size: .9em;
        font-weight: 500;
    }

    .a02-1:nth-child(odd) p {
        color: #ea5226;
    }

    .a02-1:nth-child(even) p {
        color: #fff;
    }

    .a02-img {
        width: 90%;
        margin: 0 auto;
    }

    @media all and (max-width:768px) {
        .a02box {
            width: 90%;
        }
    }

    @media all and (max-width:576px) {
        .a02-1 {
            width: -webkit-calc(100%/2.5);
            width: -moz-calc(100%/2.5);
            width: calc(100%/2.5);
        }
    }

    @media all and (max-width:425px) {
        .a02box {
            width: 100%;
        }

        .a02-1 {
            width: -webkit-calc(100%/2.2);
            width: -moz-calc(100%/2.2);
            width: calc(100%/2.2);
        }
    }

    @media all and (max-width:375px) {


        .a02-1 {
            width: -webkit-calc(100%/2.3);
            width: -moz-calc(100%/2.3);
            width: calc(100%/2.3);
        }
    }

    /*--------------------------------------#pt1-------------------------------------------------*/

    /*--------------------------------------pt2-------------------------------------------------*/
    .pt2 {
        background: url(../img/bg-1.jpg) center/cover no-repeat;
        overflow: hidden;
    }

    .b01-top {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        max-width: 800px;
        margin: .5em auto;
        text-align: center;
    }

    .b01-topimg {
        width: 80%;
        margin: 0 auto;
    }

    .b01-topul {
        width: 80%;
        margin: .5em auto !important;
        font-size: 2em;
        text-align: left;
    }

    .sm {
        text-align: right;
    }

    .b01box,
    .b02box {
        width: 90%;
        margin: 1em auto;
    }

    table {
        width: 100%;
        background: #fff;
    }

    table tr,
    table td {
        border: 2px solid #c9c9c9;
    }

    table thead {
        background: #ea5226;
        color: #fff;
        text-align: center;
    }

    table tbody {
        font-size: .9em;
    }

    table td {
        padding: .5em;
    }

    .tab-ul li {
        list-style-type: decimal;
    }

    .b01box table td:nth-child(1) p {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 auto !important;
    }

    .b01box tbody tr td:nth-child(3) {
        color: #c30d23;
        text-align: center;
        font-weight: 600;
        font-size: 2em;
    }

    tbody tr td:nth-child(4) {
        text-align: center;
    }

    .b02box table thead {
        background: #7f4f21;
        color: #fff;
        text-align: center;
    }

    .b02box table td:nth-child(1) {
        text-align: center;
    }

    @media all and (max-width:768px) {
        tbody tr td:nth-child(1) {
            text-align: center;
        }

        .b01-topul {
            font-size: 1.5em;
        }
    }

    @media all and (max-width:576px) {
        .b01-top h3 {
            font-size: .9em;
        }



    }

    @media all and (max-width:425px) {
        .b01-topul {
            font-size: 1em;
        }
    }

    @media all and (max-width:375px) {
        .b01-topul li br {
            display: block;
        }
    }

    /*--------------------------------------#pt2-------------------------------------------------*/

    /*--------------------------------------pt3-------------------------------------------------*/
    .pt3 {
        background: url(../img/bg-2.png), -webkit-linear-gradient(top, rgba(214, 235, 220, 0.15) 0%, rgba(244, 167, 123, 0.15) 100%), #fff;
        background: url(../img/bg-2.png), -moz-linear-gradient(top, rgba(214, 235, 220, 0.15) 0%, rgba(244, 167, 123, 0.15) 100%), #fff;
        background: url(../img/bg-2.png), linear-gradient(to bottom, rgba(214, 235, 220, 0.15) 0%, rgba(244, 167, 123, 0.15) 100%), #fff;
        background-position: center bottom;
        background-size: contain;
        background-repeat: no-repeat;
        overflow: hidden;
    }

    /* .c01box {
        width: 80%;
        margin: 0 auto;
        padding: 1em;
        border: 2px solid #000;
        border-radius: 20px;
    }


    .c01-1 {
        width: 100%;
        padding: 1em;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: space-between;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: space-between;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        border-bottom: 2px dashed #40220f;
    }

    .c01-1:last-child {
        border-bottom: unset;
    }

    .c01-L {
        width: 50%;
    }

    .c01-R {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 auto;
    }

    .c01-R h4 {
        background: #0058aa;
        color: #fff;
        padding: 3px .5em;
        border-radius: 15px 0 0 0;
        text-align: center;
    }

    .c01-R h5 {
        text-align: center;
        color: #0058aa;
    }

    .c01-R p {
        font-weight: 500;
        font-size: 1.3em;
        text-align: center;
        line-height: 1.2em;
    }

    .c01-R p small {
        font-weight: 600;
        font-size: 70%;
    }

    .c01-p {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: .5em auto;
        text-align: center;
        color: #082e4e;
        font-size: 1.5em;
    }

    @media all and (max-width:768px) {
        .c01box {
            width: 90%;
        }
    }

    @media all and (max-width:576px) {}

    @media all and (max-width:425px) {
        .c01-p {
            font-size: 1em;
        }
    }

    @media all and (max-width:375px) {} */

    /* ------------------------------ */
    .c02box {
        width: 60%;
        margin: 0 auto;
    }

    .c02box h4 {
        position: relative;
        text-align: center;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 0em auto;
        margin-bottom: .5em;
        color: #e60012;
        font-size: 2em;
    }

    .c02box h4::before {
        content: '';
        background: url(../img/currency.png) center/cover no-repeat;
        position: absolute;
        top: 50%;
        left: -35%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 35px;
        height: 35px;
    }

    .c02box h4::after {
        content: '';
        background: url(../img/currency.png) center/cover no-repeat;
        position: absolute;
        top: 50%;
        right: -35%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 35px;
        height: 35px;
    }

    .c02-but {
        position: relative;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 0em auto;
        text-align: center;
        font-size: 1.5em;
        background: #bc1b21;
        box-shadow: 3px 3px 10px #4c4c4c;
    }

    .c02-but::before {
        content: '';
        background: url(../img/point.png) center/cover no-repeat;
        position: absolute;
        top: 50%;
        right: 0%;
        width: 40px;
        height: 44px;
        -webkit-animation: point 1s linear infinite;
        -moz-animation: point 1s linear infinite;
        animation: point 1s linear infinite;
    }

    @-webkit-keyframes point {
        0% {
            right: 0%;
        }

        50% {
            right: 5%;
        }

        100% {
            right: 0%;
        }
    }

    @-moz-keyframes point {
        0% {
            right: 0%;
        }

        50% {
            right: 5%;
        }

        100% {
            right: 0%;
        }
    }

    @keyframes point {
        0% {
            right: 0%;
        }

        50% {
            right: 5%;
        }

        100% {
            right: 0%;
        }
    }

    .c02-but:hover {
        -webkit-transform: scale(.9);
        -moz-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9);
        -webkit-transition: .15s ease-in-out;
        -moz-transition: .15s ease-in-out;
        transition: .15s ease-in-out;
        box-shadow: 0px 0px 20px #bc1b21;
    }

    .c02-but:hover::before {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        -webkit-transition: .15s ease-in-out;
        -moz-transition: .15s ease-in-out;
        transition: .15s ease-in-out;
    }

    .but-bg {
        border-right: 3px solid #fff;
        border-left: 3px solid #fff;
        margin: 0 .5em;
        background: #bc1b21;
        padding: 0 1em;
    }

    .but-bg span {
        color: #ffe200;
    }

    .c02-but a {
        color: #fff !important;
        cursor: pointer;
    }

    .c02-but a:hover {
        color: #fff;
    }

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

    @media all and (max-width:576px) {
        .c02-but {
            width: 100%;
        }
    }

    @media all and (max-width:425px) {
        .c02box {
            width: 100%;
        }

        .c02-but {
            font-size: 1.3em;
        }

        .but-bg {
            padding: 0em;
            font-size: 18px;
        }
    }

    @media all and (max-width:375px) {}

    /* ------------------------------------ */
    .c03box {
        width: 80%;
        margin: 0 auto;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: flex-start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .c03-1 {
        width: -webkit-calc(100%/3.22);
        width: -moz-calc(100%/3.22);
        width: calc(100%/3.22);
        margin: .5em;
        padding: .5em;
        background: #fff;
    }

    .c03-1 h5 {
        font-size: .9em;
        text-align: center;
        background: #da3e56;
        color: #fff;
        padding: 5px 0;
    }

    .align {
        letter-spacing: 8px;
    }

    .c03-1 p {
        position: relative;
        font-size: 2em;
        margin-left: 1.2em !important;
    }

    .c03-1 p::before {
        content: '';
        background: url(../img/cup.png) center/cover no-repeat;
        position: absolute;
        bottom: 0%;
        left: -25%;
        width: 35px;
        height: 44px;
    }

    .c03-1 p span {
        font-weight: 500;
        color: #d71718;
    }

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

        .c03-1 {
            width: -webkit-calc(100%/2.12);
            width: -moz-calc(100%/2.12);
            width: calc(100%/2.12);
        }

        .c03-1 p {
            text-align: center;
        }

        .c03-1 p::before {
            left: -17%;
        }
    }

    @media all and (max-width:576px) {
        .c03box {
            width: 100%;
        }

        .c03-1 {
            width: -webkit-calc(100%/2.2);
            width: -moz-calc(100%/2.2);
            width: calc(100%/2.2);
        }
    }

    @media all and (max-width:425px) {
        .c03-1 {
            width: -webkit-calc(100%/1);
            width: -moz-calc(100%/1);
            width: calc(100%/1);
        }

        .c03-1 p::before {
            left: 10%;
        }
    }

    @media all and (max-width:375px) {}

    /* ----------------------------- */
    .c04box {
        width: 90%;
        margin: 1em auto;
        border: 2px solid #e60012;
        border-radius: 20px;
        background: #fff;
        padding: 1em;
    }

    .c04box ul {
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: flex-start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-align-items: flex-start;
        -moz-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        padding: 0px;
    }

    .c04box ul li {
        position: relative;
        width: -webkit-calc(100%/2);
        width: -moz-calc(100%/2);
        width: calc(100%/2);
        padding-left: 3em;
    }

    .c04box ul li::before {
        content: '';
        background: url(../img/crown.png) center/cover no-repeat;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 26px;
        height: 16px;
    }

    .c04box ul li span {
        color: #e60012;
    }

    .c04box>p {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 auto !important;
        background: #e60012;
        color: #fff;
        text-align: center;
        border-radius: 20px;
        padding: 0 1em !important;
    }

    @media all and (max-width:768px) {
        .c04box ul {
            width: 60%;
            margin: 0 auto;
        }

        .c04box ul li {
            width: -webkit-calc(100%/1);
            width: -moz-calc(100%/1);
            width: calc(100%/1);
        }
    }

    @media all and (max-width:576px) {
        .c04box ul {
            width: 90%;
        }
    }

    @media all and (max-width:425px) {

        .c04box,
        .c04box ul {
            width: 100%;
        }

        .c04box ul li {
            font-size: .9em;
        }
    }

    @media all and (max-width:375px) {
        .c04box ul li {
            font-size: .8em;
        }
    }

    /* --------------------------------------- */
    .c04-top {
        position: relative;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 auto;
        color: #0058aa;
    }

    .c04-top::before {
        content: '';
        background: url(../img/good.png) center/cover no-repeat;
        position: absolute;
        top: 50%;
        right: -30%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 50px;
        height: 52px;
    }

    .c04-top::after {
        content: '';
        background: url(../img/good.png) center/cover no-repeat;
        position: absolute;
        top: 50%;
        left: -30%;
        -webkit-transform: translateY(-50%) scaleX(-1);
        -moz-transform: translateY(-50%) scaleX(-1);
        -ms-transform: translateY(-50%) scaleX(-1);
        transform: translateY(-50%) scaleX(-1);
        width: 50px;
        height: 52px;
    }

    /* ----------------------------- */
    .c05box {
        width: 90%;
        margin: 1em auto;
        border: 2px solid #0058aa;
        background: #fff;
        padding: 1em;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .c05-1 {
        width: -webkit-calc(100%/2);
        width: -moz-calc(100%/2);
        width: calc(100%/2);
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .c05-1:nth-child(1) {
        border-right: 2px solid #0058aa;
    }

    .c05-L {
        width: 35%;
        text-align: center;
        color: #0058aa;
        font-weight: 500;
    }

    .c05-R {
        width: 60%;
        margin-left: .5em;
    }

    .c05-R h5 {
        color: #0058aa;
        font-weight: 500;
    }

    .c05-R h4 {
        color: #0058aa;
    }

    .c05-R h4 small {
        color: #fff100;
        background: #0058aa;
        padding: 0 1.5em;
        margin-left: .5em;
    }

    @media all and (max-width:768px) {
        .c05-1 {
            width: -webkit-calc(100%/1);
            width: -moz-calc(100%/1);
            width: calc(100%/1);
        }

        .c05-1:nth-child(1) {
            border-right: unset;
            padding-bottom: .5em;
            border-bottom: 2px solid #0058aa;
        }

        .c05-L {
            width: 20%;
        }
    }

    @media all and (max-width:576px) {
        .c05-L {
            width: 25%;
        }

        .c05-R h5,
        .c05-R h4 {
            text-align: center;
        }
    }

    @media all and (max-width:425px) {
        .c05-L {
            width: 40%;
        }

        .c05-R {
            width: 100%;
        }
    }

    @media all and (max-width:375px) {}

    /*--------------------------------------#pt3-------------------------------------------------*/

    /*----------footerstyle----------*/
    footer {
        padding: 1em 0;
        background-color: #f6cd40;
        color: rgba(255, 255, 255, 0.6);
        text-align: center;
    }

    .contact h2 {
        font-size: 2.5em;
        color: #000;
    }

    .contact .contain {
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
    }

    .contact .contain ul {
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 2vh 0;
    }

    .contact .contain ul li {
        width: -webkit-calc(100%/7);
        width: -moz-calc(100%/7);
        width: calc(100%/7);
        background: #FFFBF5;
        border: 3px solid #36469b;
        border-radius: 15px;
        margin: 0.8vh 0.5vw;
        overflow: hidden;
    }

    .contact .contain ul li h3 {
        font-size: 1.5em;
        font-weight: 500;
        color: #386fb7;
        padding: 0.5vh 0.5vw;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        transition: 0.3s;
    }

    .contact .contain ul li a {
        text-decoration: none;
    }

    .contact .contain ul li h4 {
        font-size: 1.5em;
        font-weight: 500;
        color: #FFFFFF;
        background: #386fb7;
        padding: 0;
        margin: 0;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        transition: 0.3s;
    }

    .contact .contain ul li h4:hover {
        background: #233074;
    }

    .contact .contain ul li .campaigns h3:hover {
        background: #DBD7D8;
    }

    .contact .contain ul li>.h3sm {
        font-size: 1.4em;
    }

    .footbr {
        display: inline;
    }

    @media screen and (max-width: 768px) {
        footer {
            padding: 2em 0 6em 0;
        }

        .contact .contain ul li>.h3sm {
            font-size: 1.2em;
        }
    }

    @media screen and (max-width: 575px) {
        footer {
            padding: 3em 0 6em 0;
        }

        .contact h2 {
            font-size: 1.8em;
        }

        .contact .contain ul li {
            width: -webkit-calc(100%/4);
            width: -moz-calc(100%/4);
            width: calc(100%/4);
            border-radius: 6px;
        }

        .contact .contain ul li>.h3sm {
            font-size: 1.5em;
        }

    }

    @media screen and (max-width: 425px) {
        .contact h2 {
            font-size: 1.5em;
        }

        .contact .contain ul li {
            width: -webkit-calc(100%/3.5);
            width: -moz-calc(100%/3.5);
            width: calc(100%/3.5);
        }

        .contact .contain ul li h4 {
            font-size: 1.3em;
        }

        .contact .contain ul li>.h3sm {
            font-size: 1.3em;
        }

        .footbr {
            display: none;
        }
    }

    @media screen and (max-width: 375px) {
        .contact .contain ul li>.h3sm {
            font-size: 1.2em;
        }
    }

    /*----------end_footerstyle----------*/

    /* ---------------------FOOTER----------------- */
    .FOOTER img {
        width: 100%;
        display: block;
        margin: auto;
    }

    .FOOTER a {
        color: white;
    }

    .FOOTER a:hover {
        color: rgb(214, 214, 214);
    }

    @media all and (max-width: 575px) {
        .FOOTER {
            padding: 2em 0;
        }

        .FOOTER .container {
            padding: 0 0 3em 0 !important;
        }
    }

    @media all and (max-width: 425px) {
        .FOOTERbut {
            padding-bottom: 4em;
        }

    }

    /* ---------------------FOOTER----------------- */

    /*---------------- BAR-social_address_浮動社群連結 --------------*/
    .social-icon a {
        width: 100%;
    }

    .social-icon img {
        width: 100%;
    }

    #line_line,
    #act_act {
        padding: 0px !important;
    }

    .hide {
        /* 隱藏 */
        display: none !important;
    }

    .lineflex {
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: flex-start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .lineflex h4 {
        width: 100%;
        font-size: 2.5em;
    }

    .lineflex h3 {
        width: 100%;
        margin: .5em 0;
    }

    .linecen {
        width: 90%;
        margin: 0 auto;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: flex-start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .lineflex h3 span {
        background: #fff;
        font-weight: 600;
    }

    .lineflex .linetit1 {
        color: #108d43;
    }

    .lineflex .linetit2 {
        color: #075893;
    }

    .lineflex .linetit3 {
        color: #9a2325;
    }


    .lineflex .btn {
        width: -webkit-calc(100%/4.5);
        width: -moz-calc(100%/4.5);
        width: calc(100%/4.5);
        margin: .5em;
    }

    @media all and (max-width:768px) {
        .lineflex .btn {
            width: -webkit-calc(100%/4.2);
            width: -moz-calc(100%/4.2);
            width: calc(100%/4.2);
            margin: 0.1em;
        }

        .lineflex h3 {
            font-size: 1.2em;
        }
    }

    @media all and (max-width:576px) {
        .linecen {
            width: 100%;
        }

        .lineflex .btn {
            width: -webkit-calc(100%/3.1);
            width: -moz-calc(100%/3.1);
            width: calc(100%/3.1);
        }
    }

    @media all and (max-width:425px) {}

    @media all and (max-width:375px) {}

    /*------兩個 浮動式按鈕 LINE NEW 手機版-----------*/
    @media all and (max-width: 575px) {

        .social-icon a {
            width: 50% !important;
        }

        .social-icon a p {
            margin-bottom: 0px;
        }

        #line_line,
        #act_act {
            padding: 0em 15px 2em !important;
        }

        .act_btn {
            background-image: -webkit-linear-gradient(bottom, #dd5418 0%, #eab640 100%) !important;
            background-image: -moz-linear-gradient(bottom, #dd5418 0%, #eab640 100%) !important;
            background-image: linear-gradient(to top, #dd5418 0%, #eab640 100%) !important;
        }

        .social_btn {
            background-image: -webkit-linear-gradient(bottom, #22ac38 0%, #92fb4b 100%) !important;
            background-image: -moz-linear-gradient(bottom, #22ac38 0%, #92fb4b 100%) !important;
            background-image: linear-gradient(to top, #22ac38 0%, #92fb4b 100%) !important;
        }
    }

    @media screen and (max-width: 575px) {

        #line_line,
        #act_act {
            padding: 0em 15px 3em !important;
        }
    }

    /*------#兩個 浮動式按鈕 LINE NEW 手機版----------*/
    /*---------------- BAR-social_address_浮動社群連結 --------------*/

    /*-----------TOP按鈕------------------*/
    #goTop {
        position: fixed;
        bottom: 1em;
        right: 1em;
        width: 3em;
        height: 3em;
        padding: 0.5em;
        z-index: 999;
    }

    #goTop .fas {
        font-family: "Font Awesome 5 Free" !important;
    }

    @media all and (max-width: 575px) {
        #goTop {
            bottom: 4em;
        }
    }

    /*-----------TOP按鈕------------------*/

    /*-----------------影片幻燈片----------------- */
    .b03 {
        margin-top: 3em;
    }

    .b03box {
        width: 90%;
        margin: 0 auto;
    }

    #carousel-demo .co .cobut {
        background-color: #bc1a21 !important;
        -webkit-filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));
        filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0px;
    }

    #carousel-demo .co .cobut p {
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        text-align: center;
        height: 100%;
        line-height: 2.5em;
        width: 90%;
        border-right: 2px solid #fff;
        border-left: 2px solid #fff;
    }

    /* 
    #carousel-demo .co .cobut.active, */
    #carousel-demo .co .cobut:hover,
    #carousel-demo .co .show>.cobut {
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
        -webkit-transition: .15s;
        -moz-transition: .15s;
        transition: .15s;
    }

    .myco .co {
        position: relative;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        margin-right: 0;
        margin-left: 0;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: flex-start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .myco .co::before {
        content: '';
        position: absolute;
        bottom: -16px;
        right: -2%;
        background: url(../img/myco-1.png) center/cover no-repeat;
        width: 90px;
        height: 177px;
    }

    .myco .co li {
        width: -webkit-calc(100%/4.5);
        width: -moz-calc(100%/4.5);
        width: calc(100%/4.5);
        text-indent: unset;
        /*縮排*/
        height: unset;
        border: 0;
        opacity: 1;
    }

    @media all and (max-width:1024px) {}

    @media all and (max-width:768px) {
        .myco .co::before {
            width: 70px;
            height: 138px;
        }

        #carousel-demo .co .cobut p {
            font-size: 15px;
        }
    }

    @media all and (max-width:576px) {
        .myco .co li {
            width: -webkit-calc(100%/2.1);
            width: -moz-calc(100%/2.1);
            width: calc(100%/2.1);
        }
    }

    @media all and (max-width:425px) {
        .b03 {
            margin-top: 0em;
        }

        .b03box {
            width: 100%;
        }

        .myco .co::before {
            display: none;
        }

        .myco .co {
            -webkit-justify-content: center;
            -moz-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

        #carousel-demo .co .cobut {
            -webkit-filter: none;
            filter: none;
            margin-top: 5px;
        }

        #carousel-demo .co .cobut p {
            font-size: 17px;
        }

    }

    @media all and (max-width:375px) {
        #carousel-demo .co .cobut p {
            font-size: 15px;
        }
    }

    /*------------ YouTube嵌入 -----------------*/
    .video-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
    }

    /*padding-bottom:56.25%; 為影片高度與寬度的比例16:9計算得來，9除以16=0.5625換算高度比0.5625=56.25% */
    /*padding-top: 30px; 用於修正的高度，可用25px或30px */
    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /*------------ #YouTube嵌入 -----------------*/

    .new {
        background: -webkit-linear-gradient(left, #d0bb68 0%, #ffffff 50%, #d0bb68 100%);
        background: -moz-linear-gradient(left, #d0bb68 0%, #ffffff 50%, #d0bb68 100%);
        background: linear-gradient(to right, #d0bb68 0%, #ffffff 50%, #d0bb68 100%);
    }

    .newbox {
        position: relative;
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        padding: .5em;
    }

    .newbox::before {
        content: '';
        position: absolute;
        top: 0%;
        left: 0%;
        background: url(../img/new-4.png) center/cover no-repeat;
        width: 150px;
        height: 158px;
    }

    .newbox h3 {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 auto;
        color: #7f4f21;
    }

    .newbox h3 span {
        color: #c30d23;
    }

    .news {
        width: 80%;
        margin-left: 15%;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .new-1 {
        width: -webkit-calc(100%/3.5);
        width: -moz-calc(100%/3.5);
        width: calc(100%/3.5);
        margin: .5em;
        -webkit-filter: drop-shadow(1px 1px 0px #333);
        filter: drop-shadow(1px 1px 0px #333);
    }

    .new-1 :hover {
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
        -webkit-transition: .15s;
        -moz-transition: .15s;
        transition: .15s;
        -webkit-filter: drop-shadow(0px 0px 2px #333);
        filter: drop-shadow(0px 0px 2px #333);
    }

    @media all and (max-width:1024px) {}

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

    @media all and (max-width:576px) {}

    @media all and (max-width:425px) {
        .newbox::before {
            display: none;
        }

        .news {
            width: 100%;
            margin-left: 0px
        }

        .new-1 {
            width: -webkit-calc(100%/1.5);
            width: -moz-calc(100%/1.5);
            width: calc(100%/1.5);
        }
    }

    @media all and (max-width:375px) {}