/***
 *** MAIN STRUCTURE CSS Document
 ***
 ***
 *** - CSS RESET
 *** - GLOBAL SETUP
 *** - MAIN STRUCTRUE
 *** - FONT TYPE
 *** - TEMPLATE MAIN COMPONENT
 *** - -- HEADER
 *** - -- FE-HEADER
 *** - -- CONTAINTER
 *** - -- TABLE
 *** - -- INPUT UI
 *** - -- FOOTER
 ***
 ***/

/***
 *** BEGIN CSS RESET
 ***/

/***
 *** BEGIN GLOBAL SETUP
 ***/

/*@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);*/
@import url(https://fonts.googleapis.com/css2?family=Inter&display=swap);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@import url(https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined);

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;

    line-height: 1.5; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -moz-tab-size: 4; /* 3 */
    -o-tab-size: 4;
     tab-size: 4; /* 3 */
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
    font-feature-settings: normal; /* 5 */
    font-variation-settings: normal; /* 6 */
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: #FFF;
    font-family: Noto Sans TC, Microsoft JhengHei, Apple LiGothic, Arial, Helvetica, sans-serif;
    margin: 0 auto;
    padding: 0;
}

a:link, a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.cursor-pointer{
  cursor: pointer;
}

/***
 *** BEGIN MAIN STRUCTURE
 ***/

#wraper {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

/*#header {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    background: #FFF;
    margin: 0 auto;
    padding: 0;
    border-bottom: #BBB 1px solid;
    box-shadow: 0 1px 6px #999;
}*/

#container {
    position: relative;
    width: 100%;
    text-align: center;
    margin: 6% auto 0;
}

#footer {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
}

.content-position-01 {
    clear: both;
    width: 960px;
    overflow: hidden;
    margin: 0 auto;
}


/***
 *** FONT TYPE
 ***/


/***
 *** BEGIN TEMPLATE MAIN COMPONENT
 ***/

/*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER ***/
#header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 99%;
    margin: 0;
    padding: 0.5%;
    border-bottom: #BBB 1px solid;
    box-shadow: 0 1px 6px #999;
}
    #header > #logo-area {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 50%;
        overflow: hidden;
        color: #6C6969;
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: 0.05rem;
        margin: 0 0 0 0.65%;
        padding: 0;
    }
        #header > #logo-area img {
            width: 25%;
            margin: 0.5% 1.15% 0.5% 0;
            vertical-align: middle;
        }
    #header > #sub-func-area {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        width: 30%;
        overflow: hidden;
        color: #333;
        font-size: 0.875em;
        letter-spacing: 1px;
        text-align: right;
        padding-right: 1%;
    }
        #header > #sub-func-area > .user-info {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 33%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
            #header > #sub-func-area > .user-info > .user-sys-role {
                display: inline-block;
                overflow: hidden;
                background: #FC0;
                color: #333;
                font-size: 0.75em;
                letter-spacing: 1px;
                text-align: right;
                margin: -2% 3% 0 1.5%;
                padding: 1% 3.5%;
                border: #CCC 1px solid;
                border-radius: 6px;
                vertical-align: middle;
            }
            #header > #sub-func-area > .user-info .icon-arrow {
                float: right;
                width: 6%;
                overflow: hidden;
                margin: 0 0 0 4.5%;
                padding: 0 0 5%;
                vertical-align: middle;
                -webkit-transition: -webkit-transform .8s ease-in-out;
                transition: transform .8s ease-in-out;
            }
                #header > #sub-func-area > .user-info .icon-arrow img {
                    width: 100%;
                }
            #header > #sub-func-area > .user-info .icon-arrow-switch {
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
            }

        #header > #sub-func-area > .user-setting-menu {
            position: absolute;
            display: none;
            z-index: 999;
            top: 42px;
            right: 3.55%;
            width: 12%;
            overflow: hidden;
            background: #E8E8E8;
            margin: 0;
            padding: 0;
            border-right: #BBB 1px solid;
            border-bottom: #BBB 1px solid;
            border-left: #BBB 1px solid;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            box-shadow: 0 1px 8px #CCC
        }
            #header > #sub-func-area > .user-setting-menu ul {
                margin: 0;
                padding: 0;
            }
            #header > #sub-func-area > .user-setting-menu li {
                width: 100%;
                text-align: center;
                margin: 0;
                padding: 3.6% 0;
                border-bottom: #CCC 1px solid;

                a:link, a:visited, a:hover {
                    color: rgb(18, 36, 15);
                }
            }
                #header > #sub-func-area > .user-setting-menu li:last-child {
                    border-bottom: none;
                }
        #header > #sub-func-area > .btn-sys-setting {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 6%;
            overflow: hidden;
            margin: 0 2%;
            padding: 1% 0 0;

            a:link, a:visited, a:hover {
                color: #333;
            }
        }
        #header > #sub-func-area > .btn-logout {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 14.5%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
            #header > #sub-func-area > .btn-logout a .material-icons {
                color: #494949;
                font-size: 1.5rem !important;
                vertical-align: middle;
            }
        .btn-alert {
            position: relative;
            float: right;
            display: inline-block;
            /*width: 1.5%;
            overflow: hidden;*/
            margin: 0 0 0 0.85%;
            padding: 1.5% 0 1% 1%;
            border-left: #BBB 1px solid;
        }
            .btn-alert .div-alert-count {
                position: absolute;
                top: 27%;
                right: -27%;
                width: 1.5rem;
                height: 1.2rem;
                color: #FFF;
                font-size: 0.75rem;
                font-weight: 700;
                text-align: center;
                padding: 3.5% 0;
                border: #FFF 2px solid;
                border-radius: 99em;
            }

            .btn-alert .material-icons {
                color: #459985;
                font-size: 2rem !important;
                vertical-align: middle;
            }

        .sys-notification-list {
            position: absolute;
            display: none;
            z-index: 999;
            top: 100%;
            right: 3.45%;
            width: 15%;
            overflow: hidden;
            background: #E8E8E8;
            margin: 0;
            padding: 0;
            border-right: #BBB 1px solid;
            border-bottom: #BBB 1px solid;
            border-left: #BBB 1px solid;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            box-shadow: 0 1px 8px #CCC
        }

            .sys-notification-list ul {
                margin: 0;
                padding: 0 0 5%;
            }

                .sys-notification-list li {
                    overflow: hidden;
                    margin: 0;
                    padding: 6% 0 0 6%;
                }

                    .sys-notification-list li::marker {
                        display: none;
                    }

                    .sys-notification-list li:hover {
                        background: #FFF;
                    }

                    .sys-notification-list li a:hover {
                        text-decoration: none;
                    }

                    .sys-notification-list li.li-sys-n-item {
                        padding-bottom: 6%;
                        border-bottom: 1px #CCC solid;
                    }
                        .sys-notification-list li.li-sys-n-item a {
                            display: inline-block;
                            float: left;
                        }

                    .sys-notification-list .sys-n-time {
                        display: block;
                        color: #666;
                        font-size: 0.75rem;
                        margin: 0 0 1.25%;
                        padding: 0;
                    }
                    .sys-notification-list .sys-n-mark-as-read {
                        float: right;
                        width: 8%;
                        overflow: hidden;
                        background: #F1F1F1;
                        margin: 5% 5% 0 0;
                        padding: 1.75%;
                        border: #CCC 1px solid;
                        border-radius: 6px;
                    }
                        .sys-notification-list .sys-n-mark-as-read:hover {
                            background: #6ecbb5;
                            color: #FFF;
                        }


.main-nav {
    position: relative;
    z-index: 1005;
    top: 0;
    left: 0;
}

.mobile-menu-btn {
    display: none;
}

.mobile-menu-btn img {
    width: 100%;
}

#logo {
    float: left;
    display: inline-block;
    width: 16.15%;
    margin: 1.5% 0;
}

#logo img {
    width: 100%;
}

#nav_buttons {
    position: relative;
    z-index: 999;
    float: right;
    width: 55%;
    overflow: hidden;
    margin: 2.7% 0 0;
    padding: 0;
}

#nav_buttons ul {
    clear: both;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#nav_buttons li {
    float: right;
    width: auto;
    text-align: left;
    color: #DFD6A7;
    font-size: 1em;
    letter-spacing: 1px;
    margin: 0;
    padding: 0 2.75%;
}

#nav_buttons li a:link, #nav_buttons li a:visited, #nav_buttons li a:hover {
    color: #DFD6A7;
}

#member-area {
    position: relative;
    z-index: 999;
    float: right;
    width: 12.5%;
    overflow: hidden;
    background: #214C47;
    text-align: center;
    margin: 2.75% 0 0 1.25%;
    padding: 0.3% 0;
    border-radius: 2px;
    transition: background 0.3s linear;
}

#member-area:hover {
    background: #51BCBC;
}

#member-area ul {
    clear: both;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#member-area li {
    display: inline-block;
    width: auto;
    color: #DFD6A7;
    font-size: 0.813em;
    letter-spacing: 1px;
    margin: 0;
    padding: 0 2%;
}

#member-area li a:link, #member-area li a:visited {
    color: #DFD6A7;
}

#member-area li a:hover {
    color: #FFF;
    text-decoration: none;
}

.sub-menu-products {
    position: absolute !important;
    z-index: 900;
    top: 57.58px;
    left: 0;
    display: none;
    width: 100%;
    overflow: hidden;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#9d9d9e+0,c7c7c8+50,9d9d9e+100 */
    background: rgb(157, 157, 158); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(157, 157, 158, 1) 0%, rgba(199, 199, 200, 1) 50%, rgba(157, 157, 158, 1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(157, 157, 158, 1) 0%, rgba(199, 199, 200, 1) 50%, rgba(157, 157, 158, 1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(157, 157, 158, 1) 0%, rgba(199, 199, 200, 1) 50%, rgba(157, 157, 158, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9d9d9e', endColorstr='#9d9d9e', GradientType=0); /* IE6-9 */
    margin: 0 auto;
    padding: 0;
    border-bottom: #31867E 3px solid;
    box-shadow: 0 3px 12px RGBA(0, 0, 0, 0.75);
}

.sub-menu-products ul {
    width: 88%;
    overflow: hidden;
    padding: 0 12% 0 0;
}

.sub-menu-products li {
    float: right;
    display: inline-block;
    width: 21%;
    overflow: hidden;
    text-align: center;
    margin: 0;
    padding: 3% 0 2% 0;
    border-left: #9D9D9E 1px solid;
    border-right: #DBDBDC 1px solid;
}

.sub-menu-products li:hover {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#9d9d9e+0,dbdbe5+50,9d9d9e+100 */
    background: rgb(157, 157, 158); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(157, 157, 158, 1) 0%, rgba(219, 219, 229, 1) 50%, rgba(157, 157, 158, 1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(157, 157, 158, 1) 0%, rgba(219, 219, 229, 1) 50%, rgba(157, 157, 158, 1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(157, 157, 158, 1) 0%, rgba(219, 219, 229, 1) 50%, rgba(157, 157, 158, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9d9d9e', endColorstr='#9d9d9e', GradientType=0); /* IE6-9 */
}

.sub-menu-products li img.product-photo-roomie-sh1 {
    width: 58%;
}

.sub-menu-products li img.product-photo-roomie-ht1 {
    width: 72%;
}

.sub-menu-products li .text-prod-sku {
    width: 100%;
    color: #1C4D49;
    font-size: 1em;
    font-weight: 500;
    text-align: center;
    margin: 6% 0 0;
}


/*** BEGIN TEMPLATE MAIN COMPONENT -- MAIN MENU FOR MOBILE DEVICES ***/
#main-nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 16%;
    overflow: hidden;
    background: #FFF;
    margin: 1.5% 0 0;
    padding: 0;
    border-radius: 12px;
    box-shadow: #CCC 1px 1px 6px;
}
    #main-nav hr {
        width: 83%;
        display: block;
        margin: 3% auto 0;
        border-top: #26554a 1px solid;
        border-right: none;
        border-bottom: none;
        border-left: none;
    }
    #main-nav ul {
        width: 100%;
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
    }
        #main-nav li {
            list-style: none;
        }
            #main-nav li.li-mo {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                overflow: hidden;
                background: #7FB870;
                color: #E8E8E8;
                font-size: 1rem;
                font-weight: 700;
                letter-spacing: 2px;
                margin: 0 auto;
                padding: 3.6% 0 2.65%;
            }
                #main-nav li.li-mo:hover {
                    background: #45948F;
                    color: #DFD6A7;
                }
                #main-nav li.li-mo a:link, #main-nav li.li-mo a:visited, #main-nav li.li-mo a:hover {
                    color: #E8E8E8;
                }
    #main-nav .icon-arrow {
        /*float: right;
        display: inline-block;*/
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        width: 6%;
        overflow: hidden;
        margin: 0 2% 0 0;
        padding: 0;
        transform-origin: 50% 38%;   /*水平位置 垂直位置*/
        -webkit-transition: -webkit-transform .8s ease-in-out;
        transition: transform .8s ease-in-out;
    }
        #main-nav .icon-arrow img {
            width: 100%;
        }

    #main-nav .icon-arrow-switch {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    #main-nav .div-menu-sub {
        clear: both;
        /*display: none;*/
        width: 100%;
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
    }
        #main-nav .div-menu-sub ul {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            width: 100%;
            overflow: hidden;
            margin: 0 auto;
            padding: 0;
        }
    #main-nav li.li-mo-sub {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        overflow: hidden;
        background-color: #FFF;
        color: #494949;
        font-size: 0.875rem;
        text-align: center;
        margin: 0 auto;
        padding: 12% 0;
    }
        #main-nav li.li-mo-sub a:link, #main-nav li.li-mo-sub a:visited {
            width: 100%;
            color: #494949;
            padding: 1% 0;
            text-decoration: none;
        }
        #main-nav li.li-mo-sub a:hover {
            color: #025d36;
        }
    #main-nav li.li-selected {
        background-color: #E7F4E4;
        color: #FFF !important;
    }

/*** BEGIN TEMPLATE MAIN COMPONENT -- FE-HEADER ***/
#fe-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0;
}
    #fe-header > #logo-area {
        width: 11.5%;

        img {
            width: 100%;
        }
    }
    #fe-header > .feh-sub-func {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-start;
        align-items: center;
        width: 50%;
    }
        #fe-header > .feh-sub-func .sub-func-items {
            color: #494949;
            font-size: 1rem;
            margin: 0 3% 0 0;
            
            a:link, a:visited, a:hover {
                color: #494949;
                font-weight: 500;
                letter-spacing: 0.1rem;
            }
        }

/*** BEGIN TEMPLATE MAIN COMPONENT -- CONTAINER ***/
.breadcrumb {
    clear: both;
    width: 98.5%;
    overflow: hidden;
    background: #FFF;
    color: #333;
    font-size: 1em;
    letter-spacing: 1px;
    text-align: right;
    margin: 1% auto 0;
    padding: 1.15% 1.5% 0.85% 0;
    border-bottom: #DDD 1px solid;
}
    .breadcrumb a:link, .breadcrumb a:visited, .breadcrumb a:hover {
        color: #459985;
        font-weight: 700;
        letter-spacing: 0.1rem;
    }
    .breadcrumb a:hover {
        text-decoration: underline;
    }
.breadcrumb-with-menu-show {
    float: right;
    width: 73.5%;
}
.sub-fuction-area {
    width: 75.7%;
    overflow: hidden;
    background: #FFF;
    color: #333;
    font-size: 0.875em;
    margin: 1.75% auto 0;
    padding: 1%;
    border: #BBB 1px solid;
    border-radius: 9px;
}
    .sfa-with-menu-show {
        float: right;
        width: 74.35%;
        margin: 1.75% 1.5% 0 0;
    }
    .sub-fuction-area > .sfa-data-total-rows {
        display: inline-block;
        width: 35%;
        overflow: hidden;
    }
    .sub-fuction-area > .sfa-data-total-rows-beside-filter {
        display: inline-block;
        width: 12%;
        overflow: hidden;
        padding-left: 2.25%;
        border-left: 1px solid #333;
        vertical-align: middle;
    }
    .sub-fuction-area > .sfa-data-filter-ui {
        display: inline-block;
        width: 30%;
        overflow: hidden;
        vertical-align: middle;
    }
    .sub-fuction-area > .sfa-data-total-rows-beside-filter {
        display: inline-block;
        width: 12%;
        overflow: hidden;
        padding-left: 2.25%;
        border-left: 1px solid #333;
        vertical-align: middle;
    }
    .sub-fuction-area > .sfa-data-filter-ui {
        display: inline-block;
        width: 30%;
        overflow: hidden;
        vertical-align: middle;
    }
    .sub-fuction-area > .sub-function {
        display: inline-block;
        width: 35%;
        overflow: hidden;
    }
    .sub-fuction-area a:link, .sub-fuction-area a:visited, .sub-fuction-area a:hover {
        color: #333;
    }
.related-function {
    width: 86%;
    overflow: hidden;
    font-size: 0.813em;
    letter-spacing: 2px;
    text-align: left;
    margin: 0 auto;
    padding: 0 1%;
}
    .related-function a:link, .related-function a:visited {
        color: #333;
        text-decoration: none;
    }
    .related-function a:hover {
        color: #31867E;
        text-decoration: underline;
    }
    .related-function .sub-func-seperator {
        margin: 0 1%;
        vertical-align: middle;
    }
.page-title {
    color: #31867e;
    font-size: 1.8em;
    font-weight: 500;
    margin: 6% auto 4.6%;
    padding: 0 0 1.3%;
    border-bottom: #DCDCDD 1px solid;
}
    .page-title .seperator-01 {
        color: #DDD;
        font-size: 0.875em;
        font-weight: 100;
        vertical-align: text-top;
    }
.notice-info {
    color: #349B96;
    letter-spacing: 1px;
    line-height: 180%;
    margin-top: 2.5%;
}
.main-ui-area {
    float: none;
    display: block;
    width: 78%;
    /*overflow: hidden;*/
    margin: 1.15% auto;
    padding: 0;
}
    .main-ui-area > .main-ui-area-flex-inner-frame {
        display: flex;
    }
.main-ui-area-with-menu-show {
    float: right;
    width: 76.8%;
    margin: 1.15% 1.5% 1.85% 0;
}
.data-total-rows {
    width: 97.35%;
    overflow: hidden;
    background: #FFF;
    color: #333;
    font-size: 0.875em;
    margin: 0 auto 1.5%;
    padding: 1.25%;
    border: #999 1px solid;
    border-radius: 9px;
}
.pager {
    clear: both;
    width: 100%;
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
    padding: 0 0 3%;
}
    .pager-with-menu-show {
        float: right;
        width: 76.8%;
        margin: 0 1.5% 3% 0;
    }
    .pager ul {
        clear: both;
        width: 100%;
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
    }
    .pager li {
        display: inline-block;
        overflow: hidden;
        font-size: 0.813em;
        margin: 0 1% 0 0;
        padding: 0.5%;
        border: #CCC 1px solid;
        border-radius: 6px;
        list-style: none;
    }
    .pager li a:link, .pager li a:visited, .pager li a:hover {
        color: #333;
        text-decoration: none;
    }
    .pager li:hover {
        background: #F6F6F6;
        box-shadow: 1px 1px 6px #CCC;
    }
    .pager li.page-num {
        width: 2%;
        background: #FFF;
    }
    .pager li.page-switch {
        width: 5%;
        background: #FFF;
    }
    .pager li.page-deco-dot {
        width: 2%;
        margin: 0 0 0 -1%;
        padding: 0;
        border: none;
    }
.on-page {
    background: #31867E !important;
    color: #FFF !important;
}
    .on-page a:link, .on-page a:visited, .on-page a:hover {
        color: #FFF !important;
    }


/*** BEGIN TEMPLATE MAIN COMPONENT -- TABLE ***/
table.func_content {
    width: 100%;
    border-collapse: collapse;
}
    /*table.func_content tr:not( .tr_func_content_bg_blue ):hover {
        background: #F3F3F3;
    }*/
    tr.tr_func_content_bg_blue {
        background-color: #CEDDEE;
        font-size: 12px;
        color: #394363;
    }
    tr.tr_func_content_bg_light_blue {
        background-color: #E4EFFA;
        font-size: 12px;
        color: #394363;
    }
    td.td_func_content_column_title {
        background: #2c6255;
        color: #FFF;
        font-size: 0.875rem;
        font-weight: bold;
        letter-spacing: 0.15rem;
        padding: 0.75% 1%;
        border: #2c6255 1px solid;
    }
    td.td_func_content_breadcrumb {
        text-align: right;
        color: #394363;
        padding: 3px 6px 6px 3px;
    }
    td.td_func_content_content_title {
        width: 16%;
        text-align: right;
        color: #394363;
        padding: 5px;
        border: #999 1px solid;
    }
    td.td_func_content_content {
        background: #FFF;
        color: #000;
        font-size: 0.875rem;
        padding: 0.75% 1%;
        /*border: #BBB 1px solid;*/
        border-bottom: #BBB 1px dotted;
    }
        td.td_func_content_content a:link, td.td_func_content_content a:visited {
            color: #333333;
            text-decoration: none;
        }
        td.td_func_content_content a:hover {
            color: #333333;
            text-decoration: underline;
        }
        td.td_func_content_content a.sys-notify-text-link.visited {
            color: #999;
            text-decoration: none;
        }
        td.td_func_content_content a.sys-notify-text-link:hover {
            color: #459985;
            text-decoration: underline;
        }
        td.td_func_content_content .div-uploaded-pic {
            float: left;
            display: inline-block;
            width: 25%;
            height: 100px;
            overflow: hidden;
            margin: 1% 2% 2% 1%;
            padding: 0;
        }
            td.td_func_content_content .div-uploaded-pic img {
                width: 100%;
            }
        td.td_func_content_content .fpui-client-name {
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: 0.15rem;
        }
        td.td_func_content_content > p label {
            margin-right: 1.25%;
        }
        .file_list_ui {
            width: 85%;
            overflow: hidden;
            background: #FAFAF8;
            margin: 0.5% 0 1.5%;
            padding: 1.5% 0 1.5% 1.5%;
            border: #CCC 1px dotted;
            border-radius: 3px;
        }
            .file_list_ui img {
                width: 100%;
            }
        .file_upload_ui {
            width: 34.85%;
            overflow: hidden;
            background: #FAFAF8;
            margin: 1.75% 0 1.5%;
            padding: 1.15% 0 1.15% 1.15%;
            border: #AAA 1px dotted;
            border-radius: 3px;
        }
            .file_upload_ui input {
                width: 42%;
                overflow: hidden;
                font-size: 0.875em;
                letter-spacing: 1px;
                text-align: center;
                margin: 0 2.5%;
                padding: 1.5% 0;
                border: #CCC 1px solid;
                border-radius: 3px;
            }
        .btn_upload_photo {
            width: 92%;
            overflow: hidden;
            font-size: 0.875em;
            letter-spacing: 1px;
            margin: 0 0 0.75% 0;
            padding: 1.5% 0 1.5% 1.5%;
            border: #D8D8D8 1px dotted;
            border-radius: 3px;
        }
        .notice-info {
            color: #349B96;
            font-size: 0.813rem;
            letter-spacing: 1px;
            line-height: 180%;
            margin: 4.5% 0 6%;
        }
        .photo-list-01 {
            width: 92%;
            height: 100px;
            overflow: hidden;
            margin: 0 auto;
            padding: 0;
        }
            .photo-list-01 img {
                width: 100%;
            }
        .blog-invisible {
            text-decoration: line-through;
        }

tr.tr-jsr-title {
    background: #31867E;
    color: #FFF;
    font-size: 0.813em;
}

tr.tr-jsr-content {
    font-size: 0.813em;
}
    tr.tr-jsr-content:hover {
        background: #F6F6F6;
    }
td.td-jsr {
    overflow: hidden;
    font-weight: 400;
    margin: 0;
    padding: 1%;
    border: #D6D6D6 1px dotted;
}
    td.td-jsr a:link, td.td-jsr a:visited {
        color: #333;
    }
    td.td-jsr a:hover {
        color: #31867E;
    }
tr.tr-docs {
    font-size: 0.813em;
}
td.td-docs-content {
    overflow: hidden;
    margin: 0;
    padding: 1% 0 6%;
    border-left: #D6D6D6 1px dotted;
}
td.td-func-content-title-v {
    width: 16%;
    background: #2c6255;
    color: #FFF !important;
    font-size: 0.875rem;
    font-weight: bold;
    letter-spacing: 0.05rem;
    text-align: right;
    padding: 0 1% 0 0;
    border: #444 1px solid;
}


/*** BEGIN TEMPLATE MAIN COMPONENT -- INPUT UI ***/
.input-ui-text-01 {
    width: 65%;
    font-size: 0.875em;
    color: #333;
    margin: 0;
    padding: 1%;
    border: #CCC 1px solid;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2) inset;
}
    .input-ui-text-01:focus {
        box-shadow: 0 0 3px #4cbfbf;
    }
.input-ui-text-02 {
    display: block;
    width: 90%;
    font-size: 1em;
    color: #333;
    margin: 0 auto 6%;
    padding: 2% 3%;
    border: #dcdcdd 1px solid;
    border-radius: 6px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2) inset;
}
    .input-ui-text-02:focus {
        box-shadow: 0 0 3px #4cbfbf;
    }
.input-ui-textarea-01 {
    display: block;
    width: 90%;
    font-size: 1em;
    color: #333;
    margin: 0;
    padding: 2% 3%;
    border: #ccc 1px solid;
    border-radius: 6px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2) inset;
}
    .input-ui-textarea-01:focus {
        box-shadow: 0 0 3px #4cbfbf;
    }
.input-ui-btn-01 {
    display: block;
    width: 13%;
    background: #6ecbb6;
    color: #000;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.25rem;
    margin: 1.25% auto;
    padding: 0.75% 0;
    border: none;
    border-radius: 6px;
}
.input-ui-btn-02 {
    width: 6%;
    overflow: hidden;
    background: #45948F;
    color: #FFF;
    font-size: 0.875em;
    letter-spacing: 2px;
    margin: 0 0 0 3% !important;
    padding: 1.5% 0;
    border: none;
    border-radius: 6px;
    transition: background 0.23s linear;
}
    .input-ui-btn-02:hover {
        background: #2c6255;
        box-shadow: 1px 1px 6px #CCC;
    }
.input-ui-btn-03 {
    width: 30%;
    overflow: hidden;
    background: #45948F;
    color: #FFF;
    font-size: 0.875em;
    letter-spacing: 2px;
    margin: 0 0 0 3% !important;
    padding: 1.15% 0;
    border: none;
    border-radius: 6px;
    transition: background 0.23s linear;
}
    .input-ui-btn-03:hover {
        background: #2c6255;
        box-shadow: 1px 1px 6px #CCC;
    }
.input-ui-select-01 {
    color: #333;
    font-size: 0.875em;
    padding: 1%;
    border: none;
    border: #CCC 1px solid;
    border-radius: 3px;
    box-shadow: 1px 1px 6px #CCC;
}
.input-ui-select-02 {
    background: #FFF;
    color: #333;
    font-size: 0.875em;
    padding: 1.5%;
    border: #E8E8E8 1px solid;
    border-radius: 3px;
    box-shadow: 1px 1px 3px #CCC;
}
.input-ui-select-03 {
    background: #FFF;
    color: #333;
    font-size: 0.875em;
    margin: 0 0.25% 0 0.75%;
    padding: 0.9%;
    border: #CCC 1px solid;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2) inset;
}

/*** BEGIN TEMPLATE MAIN COMPONENT -- FE-FOOTER ***/
#fe-footer {
    /* position: fixed; z-index: 9999; bottom: 0; */ /* REMOVED for flexbox sticky footer */
    flex-shrink: 0; /* 防止 footer 在 flex 容器中被壓縮 */
    width: 100%;
    font-size: 1rem;
    text-align: center;
    margin: 0 auto;
    padding: 1% 0 2%; /* 調整 padding */
}

/*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER ***/
#footer .footer-info-block {
    clear: both;
    width: 100%;
    overflow: hidden;
    background: #000;
    color: #DFD6A7;
}
    #footer .footer-info-block a:link, #footer .footer-info-block a:visited, #footer .footer-info-block a:hover {
        color: #DFD6A7;
    }
#footer .footer-copyright-block {
    clear: both;
    width: 100%;
    overflow: hidden;
    background: #FFF;
    color: #333;
    font-size: 0.875em;
    text-align: center;
    margin: 0 auto;
    padding: 2.6% 0;
}
#footer-logo {
    float: left;
    display: inline-block;
    width: 16.15%;
    margin: 2.8% 0 0;
}
    #footer-logo img {
        width: 100%;
    }
#footer-nav-links {
    position: relative;
    z-index: 999;
    float: right;
    width: 63%;
    overflow: hidden;
    margin: 3.1% 0;
    padding: 0;
}
    #footer-nav-links ul {
        clear: both;
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    #footer-nav-links li {
        float: right;
        width: auto;
        text-align: left;
        color: #DFD6A7;
        letter-spacing: 1px;
        margin: 0;
        padding: 0 4.75%;
    }
        #footer-nav-links li a:link, #footer-nav-links li a:visited, #footer-nav-links li a:hover {
            color: #DFD6A7;
        }
    #footer-nav-links li dt {
        font-size: 1em;
        font-weight: 500;
        margin-bottom: 6%;
    }
    #footer-nav-links li dd {
        font-size: 0.813em;
        font-weight: 300;
        margin-bottom: 3%;
    }