h3, h4, h5 {
        font-weight: normal;
    }

    .root {
        overflow: hidden;
    }

    .top_img {
        width: 100%;
        height: 100vh;
        position: relative;
        min-height: 520px;
        overflow: hidden;
        z-index: 1;
    }

        .top_img .bg_list {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            -webkit-transform: rotate(.1deg);
            -ms-transform: rotate(.1deg);
            transform: rotate(.1deg);
            position: fixed;
        }

            .top_img .bg_list .bg_0 {
                background-image: url('../../img/bk.png');
                /*background-image: url('A/EN/Asset/img/bk.png');*/
            }

    @media (max-width:767.99px) {
        .top_img .bg_list .bg_0 {
            background-image: url('../../img/bk_m.png');            
        }
    }



    .top_img .bg_list .top_bg {
        background-position: 50%;
        background-size: cover;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        -webkit-animation: a 10s linear;
        animation: a 10s linear;
        will-change: transform;
    }

    .top_img .wrap {
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 1;
    }

    @media (max-width:767.98px) {
        .mg-40 {
            margin: 20px 0;
        }

        .mg-20 {
            margin: 10px 0;
        }
    }

    @media (min-width:767.99px) {
        .mg-40 {
            margin: 40px 0;
        }

        .mg-20 {
            margin: 20px 0;
        }
    }


    .top_img .essay {
        position: absolute;
        top: 25%;
        left: 20%;
        width: 530px;
    }

    @media (max-width:767.99px) {
        .top_img .essay {
            top: 4%;
            left: 0%;
            width: 100%;
        }
    }


    .top_img .essay h1 {
        font-weight: bold;
    }

    .top_img .essay .content {
        padding: 50px 0 0px;
        color: #000000;
        font-size: 20px;
        line-height: 40px;
    }


    @media (max-width:767.99px) {
        .top_img .essay .content {
            text-align: center;
            padding: 35px 0 15px;
        }

            .top_img .essay .content h2 {
                font-size: 21px;
            }

            .top_img .essay .content h3 {
                padding-top: 8px;
                font-size: 15px;                
            }
    }
@media (min-width:767.99px) {
    .top_img .essay .content h3 {
        line-height:1.5;
    }
}


    .top_img .essay .download {
        width: 40%;
    }

    @media (max-width:767.99px) {
        .sys-donwload-wrap {
            text-align: center;
        }

        .download {
            width: 50%;
        }
    }

    .otherDownloadwrap {
        padding-top: 20px;
    }

    @media (max-width:576px) {
        .otherDownloadwrap {
            padding-top: 10px;
        }
    }



    .otherDownload {
        text-decoration: underline;
        color: #2471ba;
    }





    /*步驟教學-如何連接*/
    .wrapper {
        position: relative;
        z-index: 1;
        padding: 110px 0 110px;
        background-position: 50%;
        background-size: auto;
    }


    @media (max-width:767.99px) {
        .wrapper {
            padding: 40px 0 40px;
        }
    }


    .connect-wrapper {
        background-color: #f6f3ed;
        background-attachment: fixed;
        display: flex;
    }


    .connect-wrapper, body {
        background-color: #f6f3ed;
        height: 100vh;
    }

    .desktop .step {
        background-size: cover;
    }


    .connect {
        width: 1140px;
        margin: auto;
    }

    @media (max-width:576px) {
        .connect {
            width: 85%;
        }
    }

    @media (min-width: 576.1px) and (max-width:767.99px) {
        .connect {
            width: 80%;
        }
    }

    @media (min-width: 769px) and (max-width: 991.99px) {

        .connect {
            width: 100%;
        }
    }

    .connect .step-container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 500px;
    }


    @media (max-width:767.99px) {
        .connect .step-container {
            height: 100vh;
            flex-wrap: unset;
        }
    }



    .connect .col {
        /*30%*/
        flex: 1 1 25%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        width: 30%;
        margin: 0px 10px;
    }

    @media (max-width:767.99px) {
        .connect .col {
            flex: 0 0 0%;
            width: 100%;
            margin: 15px 0px;
        }
    }

    @media (min-width: 769px) and (max-width: 991.99px) {
        .connect .col {
            width: 32%;
        }
    }

    .connect .text-top {
        align-items: flex-start;
    }

    .connect .border-top {
        border-top: 5px solid #d4e1be;
    }

    @media (max-width:767.99px) {
        .connect .border-top {
            border-top: unset;
            border-left: 5px solid #d4e1be;
        }
    }

    .connect .col.main {
        flex: 1 1 100%;
        width: 50%;
        font-size: 90px;
        justify-content: center;
    }


    @media (max-width:767.99px) {
        .connect .col.main {
            flex: 0 0 0%;
            margin: 0px 10%;
            width: 80%;
        }
    }

    @media (min-width: 769px) and (max-width: 991.99px) {
        .connect .col.main {
            width: 55%;
            justify-content: unset;
        }
    }



    .connect .step-container .item {
        width: 30%;
    }

    @media (max-width:767.99px) {
        .connect .step-container .item {
            width: 20%;
        }
    }

    @media (min-width: 769px) and (max-width: 991.99px) {
        .connect .step-container .item {
            width: 35%;
        }
    }


    .connect .step-container .item h1 {
        color: grey;
        font-size: 60px;
    }

    @media (max-width:576px) {
        .connect .step-container .item h1 {
            font-size: 40px;
        }
    }

    @media (min-width: 576.1px) and (max-width:767.99px) {
        .connect .step-container .item h1 {
            font-size: 50px;
        }
    }


    @media (min-width: 769px) and (max-width: 991.99px) {
        .connect .step-container .item h1 {
            font-size: 50px;
        }
    }


    .connect .step-container .item-txt {
        width: 70%;
    }

    @media (min-width: 768px) and (max-width: 991.99px) {
        .connect .step-container .item-txt {
            width: 80%;
        }

            .connect .step-container .item-txt h3 {
                font-size: 20px;
            }
    }

    .connect .col img {
        width: 50%;
    }


    @media (max-width:767.99px) {
        .connect .col img {
            width: 100%;
            padding-top: 35px;
        }
    }



    .ins-wrapper {
        background-color: #fff;
        display: flex;
    }

    @media (max-width:767.99px) {
        .swiper-ins-item .ins-wrapper {
            padding: 0 0;
        }
    }

    .ins-wrapper .ins-caption {
        width: 900px;
        margin: auto;
    }



    @media (max-width:576px) {
        .ins-wrapper .ins-caption {
            width: 95%;
        }
    }

    @media(min-width: 576.1px) and (max-width:767.99px) {
        .ins-wrapper .ins-caption {
            width: 85%;
        }
    }

    @media (min-width: 769px) and (max-width: 991.99px) {
        .ins-wrapper .ins-caption {
            width: 100%;
        }
    }


    .ins-wrapper .ins-caption-container {
        display: flex;
        align-items: flex-start;
        padding: 2% 0 0 7%;
        text-align: left;
    }

    @media (max-width:767.99px) {
        .ins-wrapper .ins-caption-container {
            padding: 2% 0 0 0%;
        }
    }

    @media (min-width: 768px) and (max-width: 991.99px) {
        .ins-wrapper .ins-caption-container {
            padding: 2% 0 0 7%;
        }
    }


    .ins-wrapper .ins-caption-container img {
        width: 5%;
    }

    .ins-wrapper .ins-caption-container .item {
        width: 300px;
        margin: 0 10px;
    }

    @media (max-width:767.99px) {
        .ins-wrapper .ins-caption h1 {
            font-size: 30px;
        }

        .ins-wrapper .ins-caption h2 {
            font-size: 15px;
        }

        .ins-wrapper .ins-caption-container .item h3 {
            font-size: 15px;
        }
    }


    .ins-wrapper .ins {
        display: flex;
        margin: auto;
        width: 1140px;
        position: relative;
    }

    @media (min-width: 769px) and (max-width: 991.99px) {
        .ins-wrapper .ins {
            width: 95%;
        }
    }


    .ins-wrapper .item {
        width: 50%;
    }

    @media (max-width:767.99px) {
        .ins-wrapper .item {
            width: 90%;
        }
    }

    .ins-wrapper img {
        width: 100%;
    }

    /*.pic-730 img {
        width: 730px;
    }*/

    @media (min-width: 820px) and (max-width:1000px) {
        .pic-730 img {
            width: 100%;
        }
    }

    .ins-wrapper .ins-2 {
        width: 55%;
    }

    .ins-wrapper .tab {
        color: white;
        position: absolute;
        width: 15%;
    }

    @media (max-width:767.99px) {
        .ins-wrapper .tab {
            width: 35%;
        }
    }

    .ins-wrapper .tab-right {
        bottom: 10%;
        right: 42%;
    }

    @media (max-width:576px) {
        .ins-wrapper .tab-right {
            bottom: 32%;
            right: 0%;
        }
    }


    @media (min-width: 576.1px) and (max-width:767.99px) {
        .ins-wrapper .tab-right {
            bottom: 28%;
            right: 0%;
        }
    }



    .ins-wrapper .tab-left {
        bottom: 10%;
        left: 42%;
    }



    .ins-wrapper .txt {
        padding: 20px 40px;
        /*使文字置中*/
        display: flex;
        flex-direction: column;
        justify-content: center;
    }


    @media (max-width:576px) {
        .ins-wrapper .txt {
            padding: 20px 0px;
        }

            .ins-wrapper .txt h3 {
                font-size: 14px;
            }
    }

    @media (min-width: 576.1px) and (max-width:767.99px) {
        .ins-wrapper .txt {
            padding: 20px 0px;
        }
    }

    @media (min-width: 769px) and (max-width: 991.99px) {
        .ins-wrapper .txt {
            padding: 20px 10px;
        }
    }



    .product-wrapper {
        background-color: #f6f3ed;
    }

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


    .product-wrapper .product-caption {
        width: 900px;
        margin: auto;
    }


    @media (max-width:767.99px) {

        .product-wrapper .product-caption {
            width: 100%;
        }
    }

    .product-wrapper .product-container {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

        .product-wrapper .product-container img {
            padding: 20px;
            width: 85%;
        }

    @media (max-width:767.99px) {

        .product-wrapper .product-container img {
            width: 80%;
        }
    }

    .product-wrapper .product-container .item a {
        color: #000000;
    }

        .product-wrapper .product-container .item a:hover {
            text-decoration: underline;
        }

    @media (max-width:767.99px) {

        .product-wrapper .product-container h3 {
            font-size: 14px;
        }
    }
/*20221209 upd start*/
.product-wrapper .on-desk {
    width: 55%;
    margin: auto;
}

.product-wrapper .swiper-slide {
    background-color: #f6f3ed;
}

.product-wrapper .swiper-button-next, .swiper-container-rtl .pro-swiper-button-prev {
    right: -45px;
    top: 48%;
}

.product-wrapper .swiper-button-prev, swiper-container-rtl .swiper-button-next {
    left: -50px;
    top: 48%;
}

@media (max-width:767.99px) {
    .product-wrapper .swiper-button-next, .swiper-container-rtl .pro-swiper-button-prev {
        right: 0px;
        top: 48%;
    }

    .product-wrapper .swiper-button-prev, .swiper-container-rtl .pro-swiper-button-next {
        left: 0px;
        top: 48%;
    }
}
/*20221209 upd end*/


    /*立即下載*/
    .download-wrapper {
        background-color: #fff;
    }


        .download-wrapper .download-container {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 2% 0;
        }

            .download-wrapper .download-container .item img {
                width: 75%;
            }

    .download-container .download {
        width: 70%;
    }


    @media (max-width:767.99px) {
        .download-wrapper .download-caption h1 {
            padding: 10px;
        }

        .download-wrapper .download-caption h3 {
            font-size: 14px;
        }
    }
    /*突發狀況處理*/
    .warning-wrapper {
        background-color: #f6f3ed;
    }

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

    .warning-wrapper .warning-caption {
        width: 900px;
        margin: auto;
    }

    @media (max-width:576px) {
        .warning-wrapper .warning-caption {
            width: 90%;
        }

            .warning-wrapper .warning-caption h3 {
                font-size: 14px;
            }
    }


    @media (min-width: 576.1px) and (max-width:767.99px) {
        .warning-wrapper .warning-caption {
            width: 90%;
        }
    }

    @media (min-width: 769px) and (max-width: 991.99px) {
        .warning-wrapper .warning-caption {
            width: 90%;
        }
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        flex-direction: column;
        /*padding-top: 5%;*/
    }



.pd-r-10 {
    padding-right: 10%;
}

.pd-l-10 {
    padding-left: 10%;
}