@font-face {
    font-family: 'Noto Sans TC Regular'; /* Define the custom font name */
    /* src: url('fonts/Noto_Sans_TC/NotoSansTC-Regular.otf') format('opentype'); */ /* Define where the font can be downloaded */
    src: url('fonts/Noto_Sans_TC/NotoSansTC-Regular.woff2') format('woff2'), url('fonts/Noto_Sans_TC/NotoSansTC-Regular.woff') format('woff');
    /* src: url('fonts/DynaFont/DFHeiMedium-B5_UN.woff2') format('woff2'); */
    font-display: swap; /* Define how the browser behaves during download */
}

@font-face {
    font-family: 'Noto Sans TC Light'; /* Define the custom font name */
    /* src: url('fonts/Noto_Sans_TC/NotoSansTC-Light.otf') format('opentype'); */ /* Define where the font can be downloaded */
    src: url('fonts/Noto_Sans_TC/NotoSansTC-Light.woff2') format('woff2'), url('fonts/Noto_Sans_TC/NotoSansTC-Light.woff') format('woff');
    font-display: swap; /* Define how the browser behaves during download */
}

@font-face {
    font-family: 'Noto Sans TC Thin'; /* Define the custom font name */
    /* src: url('fonts/Noto_Sans_TC/NotoSansTC-Thin.otf') format('opentype'); */ /* Define where the font can be downloaded */
    src: url('fonts/Noto_Sans_TC/NotoSansTC-Thin.woff2') format('woff2'), url('fonts/Noto_Sans_TC/NotoSansTC-Thin.woff') format('woff');
    font-display: swap; /* Define how the browser behaves during download */
}

@font-face {
    font-family: 'Noto Sans TC Bold'; /* Define the custom font name */
    /* src: url('fonts/Noto_Sans_TC/NotoSansTC-Bold.otf') format('opentype'); */ /* Define where the font can be downloaded */
    src: url('fonts/Noto_Sans_TC/NotoSansTC-Bold.woff2') format('woff2'), url('fonts/Noto_Sans_TC/NotoSansTC-Bold.woff') format('woff');
    font-display: swap; /* Define how the browser behaves during download */
}

@font-face {
    font-family: 'Noto Serif TC Bold'; /* Define the custom font name */
    /* src: url('fonts/Noto_Serif_TC/NotoSerifTC-Bold.otf') format('opentype'); */ /* Define where the font can be downloaded */
    src: url('fonts/Noto_Serif_TC/NotoSerifTC-Bold.woff2') format('woff2'), url('fonts/Noto_Serif_TC/NotoSerifTC-Bold.woff') format('woff');
    font-display: swap; /* Define how the browser behaves during download */
}

@font-face {
    font-family: 'DFYuanMedium B5'; /* Define the custom font name */
    /* src: url('fonts/Noto_Sans_TC/NotoSansTC-Regular.otf') format('opentype'); */ /* Define where the font can be downloaded */
    src: url('fonts/DynaFont/DFYuanMedium-B5.ttc');
    /* src: url('fonts/DynaFont/DFHeiMedium-B5_UN.woff2') format('woff2'); */
    font-display: swap; /* Define how the browser behaves during download */
}

@font-face {
    font-family: 'TaipeiSansTCBeta Regular'; /* Define the custom font name */
    /* src: url('fonts/Noto_Sans_TC/NotoSansTC-Regular.otf') format('opentype'); */ /* Define where the font can be downloaded */
    src: url('fonts/TaipeiSansTC/TaipeiSansTCBeta-Regular.ttf') format("truetype");
    /* src: url('fonts/DynaFont/DFHeiMedium-B5_UN.woff2') format('woff2'); */
    font-display: swap; /* Define how the browser behaves during download */
}

@font-face {
    font-family: 'TaipeiSansTCBeta Bold'; /* Define the custom font name */
    /* src: url('fonts/Noto_Sans_TC/NotoSansTC-Regular.otf') format('opentype'); */ /* Define where the font can be downloaded */
    src: url('fonts/TaipeiSansTC/TaipeiSansTCBeta-Bold.woff2') format('woff2'), url('fonts/TaipeiSansTC/TaipeiSansTCBeta-Bold.woff') format('woff'), url('fonts/TaipeiSansTC/TaipeiSansTCBeta-Bold.ttf') format("truetype");
    /* src: url('fonts/DynaFont/DFHeiMedium-B5_UN.woff2') format('woff2'); */
    font-display: swap; /* Define how the browser behaves during download */
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: "Glyphicons Halflings";
    src: url("../fonts/glyphicons-halflings-regular.eot");
    src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("../fonts/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
    font-display: swap; /* Define how the browser behaves during download */
}

/*
html {
    font-size: 14px;
}

.rwdtxt {
    font-size: 1.2rem;
    color: green;
}

@media (min-width: 600px) and (max-width: 1200px) {
    .rwdtxt {
        font-size: calc(1.2rem + (1.3-1.2) * ((100vw - 600px) / (1200 - 600)));
        color: blue;
    }
}

@media (min-width: 1200px) {
    .rwdtxt {
        font-size: 1.3rem;
        color: red;
    }
}
*/

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: "Glyphicons Halflings";
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    .alert {
    display: block;
}

.cs_Container {
    height: 50px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    
}

.cs_ItemStyle {
    font-size: 16px;
    color: blue;
    
}

.gvFoodterStyle {
    border: 1px solid #CCC;
    height: 25px;
    text-align: left;
    background-color: #5CB85C;
}

.WebFont_Noto-Sans-TC-Regular {
    font-family: 'Noto Sans TC Regular', sans-serif; /* 'Microsoft JhengHei' */
    color: black;
    /*background-color: #306E30;*/ /*#5CB85C*/
    text-align: left;
}

.WebFont_Noto-Sans-TC-Light {
    font-family: 'Noto Sans TC Light', sans-serif; /* 'Microsoft JhengHei' */
    color: black;
    /*background-color: #306E30;*/ /*#5CB85C*/
    text-align: left;
}


.WebFont_01 {
    font-family: 'Noto Sans TC Light', sans-serif; /* 'Microsoft JhengHei' */
    color: black;
    /*background-color: #306E30;*/ /*#5CB85C*/
    text-align: left;
}

.WebFont_02 {
    font-family: 'Noto Sans TC Thin', sans-serif; /* 'Microsoft JhengHei' */
    color: black;
    /*background-color: #306E30;*/ /*#5CB85C*/
    text-align: left;
}

.tblHead {
    font-family: 'Noto Sans TC Light', sans-serif; /* 'Microsoft JhengHei' */
    font-size: 28px;
    /* font-weight: normal; */
    color: white;
    /*background-color: #306E30;*/ /*#5CB85C*/
    text-align: center;
}

    .tblHead a:link {
        color: white;
        text-decoration: none;
    }

    .tblHead a:visited {
        color: yellow;
        text-decoration: none;
    }

    .tblHead a:hover {
        color: yellow;
        text-decoration: none;
    }

    .tblHead a:active {
        color: yellow;
        text-decoration: none;
    }

.tblPgr {
    font-family: 'Noto Sans TC Regular', sans-serif; /* 'Microsoft JhengHei' */
    font-size: 32px; /* 42px */
    letter-spacing: 1px;
    background-color: #0C7007;
    color: yellow;
    text-align: left;
    text-decoration: none;
}   

    .tblPgr td {
        padding-right:10px
    }

    .tblPgr a:link {
        color: white;
        text-decoration: none; /* underline */
    }

    .tblPgr a:visited {
        color: white;
        text-decoration: none; /* underline */
    }

    .tblPgr a:hover {
        color: white;
        text-decoration: none; /* underline */
    }

    .tblPgr a:active {
        color: white;
        text-decoration: underline; /* underline */
    }

.tblRow { /* footable 未展開前的 CSS */
    font-family: 'Noto Sans TC Regular', sans-serif; /* 'Microsoft JhengHei' */
    font-size: 18px; /* 22px */
    font-weight: normal;
    letter-spacing: 1px;

}

.Style_Header_Class_Green {
    background: linear-gradient(to right,#17C80D, #005500);
}

.Style_Header_Class_Blue {
    background: linear-gradient(to right,#67879C, #012034);
}

.Style_P_Color_Name_Class_Green {
    color: #0C7007;
}

.Style_P_Color_Name_Class_Blue {
    color: #155279; /* #155279 */
}

.Letter_Spacing_Class_en_US {
    letter-spacing: 1px;
}

.Letter_Spacing_Class_zh_TW {
    letter-spacing: 2px;
}

.Letter_Spacing_Class_zh_CN {
    letter-spacing: 2px;
}

/*********************************************
    The Gridview style #E2EAF2
*********************************************/
.gvStyle {
    border: 2px solid #CCC;
    
}
    /*Header 標題*/
        .gvStyle th {
            background-color: #5CB85C; /*#5D7B9D*/
            font-weight: lighter;
            
            border: 1px solid #CCC;
            height: 25px;
            text-align: center;
            word-break: break-all;
            word-wrap: normal;
        }
    /*OnMouseOver 滑鼠移過列表時, 背景色變更*/
    .gvStyle tr:hover {
        background-color: #FFF4DA;
    }

    .gvStyle td:hover {
        background-color: #FFF4DA;
    }
    /*Rows 列表顏色*/
    .gvStyle td {
        border: 1px solid #CCC;
        height: 25px;
        text-align: left;
        word-break: break-all;
        word-wrap: normal;
        
    }

    /*Change Rows 如果想要有單、雙列不同顏色替換, 在這裡更換*/
    .gvStyle .alt {
        background-color: #EFEFEF;
        border: 1px solid #CCC;
        height: 25px;
    }
    /*Page 分頁顏色*/
    .gvStyle .pgr table {
        margin-left: 10px;
        margin-right: auto;
        
    }


    .gvStyle .pgr td {
        color: #FFFF00;
        background-color: #0C7007; /*分頁顏色 #367C36*/
        border-width: 0px;
        padding: 0px 3px 0px 3px;
        text-align: left;
    }

    .gvStyle .pgr a {
        color: #666;
        text-decoration: underline;
        padding: 0px 3px 0px 3px;
        
    }

    .gvStyle .pgr a:hover {
        color: #FFFF00;
        text-decoration: none;
    }
/*******************************************/

/*  Bootstrap Menu Css - Begin  */
    .navbar-toggle {
        border: none;
        background: transparent !important;
    }

    .navbar-toggle:hover {
        background: transparent !important;
    }

    .navbar-toggle .icon-bar {
        width: 22px;
        transition: all 0.2s;
    }

    .navbar-toggle .top-bar {
        transform: rotate(45deg);
        transform-origin: 10% 10%;
    }

    .navbar-toggle .middle-bar {
        opacity: 0;
    }

    .navbar-toggle .bottom-bar {
        transform: rotate(-45deg);
        transform-origin: 10% 90%;
    }

    .navbar-toggle.collapsed .top-bar {
        transform: rotate(0);
    }

    .navbar-toggle.collapsed .middle-bar {
        opacity: 1;
    }

    .navbar-toggle.collapsed .bottom-bar {
        transform: rotate(0);
    }

/*  Bootstrap Menu Css - End  */


/*  Css 文字動畫 - Begin  */
* {
    margin: 0;
    padding: 0;
  
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #000;
}

.wavy {
    font-family: 'Noto Sans TC Regular', sans-serif; /* 'Microsoft JhengHei' */
    position: relative;
    -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, 0.2))
}

    .wavy span {
        font-family: 'Noto Sans TC Regular', sans-serif; /* 'Microsoft JhengHei' */
        position: relative;
        display: inline-block;
        color: #fff;
        font-size: 2em;
        animation: animate 1s ease-in-out infinite;
        animation-delay: calc(.1s*var(--i))
    }

@keyframes animate {
    0% {
        transform: translateY(0px)
    }

    20% {
        transform: translateY(-24px)
    }

    40%, 100% {
        transform: translateY(0px)
    }
}

/*  Css 文字動畫 - End  */

/*  Bootstrap Menu 自動隱藏 - Begin  */
.scrolled-down {
    transform: translateY(-100%);
    
    transition: all 0.3s ease-in-out;
}

.scrolled-up {
    transform: translateY(0);
    
    transition: all 0.3s ease-in-out;
}


/*  Bootstrap Menu 自動隱藏 - End  */

/*  tobiasahlin文字動畫CSS - Begin */
/*  https://tobiasahlin.com/moving-letters/ */



.ml12 {
    /* font-weight: 200; */
    /* font-size: 1.8em; */
    /* text-transform: uppercase; */
    /* letter-spacing: 0.5em; */
    font-family: 'Noto Sans TC Regular', sans-serif; /* 'Microsoft JhengHei' */
    
}

    .ml12 .letter {
        font-family: 'Noto Sans TC Regular', sans-serif; /* 'Microsoft JhengHei' */
       
        display: inline-block;
        line-height: 1em;
    }

.ml2err {
    font-family: 'TaipeiSansTCBeta Bold', sans-serif; /* 'Microsoft JhengHei' */
    font-weight: 100;
    font-size: 5.8vw;
    color: pink;
    -webkit-text-stroke: 0.15vw #000;
}

    .ml2err .letter {
        font-family: 'TaipeiSansTCBeta Bold', sans-serif; /* 'Microsoft JhengHei' */
        display: inline-block;
        line-height: 1em;
    }

.ml2 {
    font-family: 'TaipeiSansTCBeta Bold', sans-serif; /* 'Microsoft JhengHei' */
    font-weight: 100;
    font-size: 5.8vw;
    color: yellow;
    -webkit-text-stroke: 0.15vw #000;
}

    .ml2 .letter {
        font-family: 'TaipeiSansTCBeta Bold', sans-serif; /* 'Microsoft JhengHei' */
        display: inline-block;
        line-height: 1em;
    }

.ml2_01 {
    font-family: 'TaipeiSansTCBeta Bold', sans-serif; /* 'Microsoft JhengHei' */
    font-weight: 100;
    font-size: 4.0vw;
    color: white;
    -webkit-text-stroke: 0.15vw #000;
}

    .ml2_01 .letter {
        font-family: 'TaipeiSansTCBeta Bold', sans-serif; /* 'Microsoft JhengHei' */
        display: inline-block;
        line-height: 1em;
    }

.ml4 {
    font-family: 'TaipeiSansTCBeta Bold', sans-serif; /* 'Microsoft JhengHei' */
    position: relative;
    left: 0px;
    top: 0px;
    font-weight: 100;
    font-size: 4.0vw;
    color: #B9EC81;
    white-space: nowrap;
    -webkit-text-stroke: 0.15vw #000;
}

    .ml4 .letters {
        font-family: 'TaipeiSansTCBeta Bold', sans-serif; /* 'Microsoft JhengHei' */
        position: absolute;
        margin: auto;
        left: 0;
        top: 0.3em;
        right: 0;
        opacity: 0;
    }

/* tobiasahlin文字動畫CSS - End */


::-webkit-input-placeholder { /* Safari, Chrome and Opera */
    font-size: 22px;
    font-style: italic;
    color: #CCCCCC;
}

::-moz-placeholder { /* Firefox 19+ */
    font-size: 22px;
    font-style: italic;
    color: #CCCCCC;
}

:-moz-placeholder { /* Firefox 18- */
    font-size: 22px;
    font-style: italic;
    color: #CCCCCC;
}

:-ms-input-placeholder { /* IE 10+ */
    font-size: 22px;
    font-style: italic;
    color: #CCCCCC;
}

::-ms-input-placeholder { /* Edge */
    font-size: 22px;
    font-style: italic;
    color: #CCCCCC;
}

::placeholder { /* CSS Working Draft */
    font-size: 22px;
    font-style: italic;
    color: #CCCCCC;
}

/* Bootstrap Multiselect CSS - Begin */

.form-check {
    display: flex;
    align-items: center;
}

    .form-check label {
        margin-left: 10px;
        font-size: 18px;
        font-weight: 500;
    }

    .form-check .form-check-input[type=checkbox] {
        border-radius: .25em;
        height: 25px; /* 50px */
        width: 25px; /* 50px */
        visibility: hidden; /* visible , hidden */
    }

    .form-check .form-check-input[type=radio] {
        border-radius: 100%;
        height: 25px; /* 50px */
        width: 25px; /* 50px */
    }

.form-switch .form-check-input[type=checkbox] {
    border-radius: 2em;
    height: 25px; /* 50px */
    width: 50px; /* 100px */
}

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

input[type=checkbox] {
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    color: white;
    cursor: pointer;
    display: inline-block;
    border: 1px solid black;
    visibility: visible; /* visible */
    background-color: white;
    -webkit-border-radius: .25em;
    -moz-border-radius: .25em;
    border-radius: .25em;
    height: 25px; /* 50px */
    width: 25px; /* 50px */
}

    input[type=checkbox]:after {
        content: " ";
        color: white;
        background-color: white;
        /* -webkit-box-shadow: 1px 2px 3px; */
        /* -moz-box-shadow: 1px 2px 3px; */
        /* box-shadow: 1px 2px 3px; */
        border: 1px solid black;
        z-index: 0;
        display: inline-block;
        visibility: visible; /* visible */
        -webkit-border-radius: .25em;
        -moz-border-radius: .25em;
        border-radius: .25em;
        height: 25px; /* 50px */
        width: 25px; /* 50px */
    }

    input[type=checkbox]:checked:after {
        content: "✓"; /* ✓ */
        text-align: center;
        vertical-align: top;
        color: white;
        /* -webkit-box-shadow: 1px 2px 3px; */
        /* -moz-box-shadow: 1px 2px 3px; */
        /* box-shadow: 1px 2px 3px; */
        border: 1px solid black;
        visibility: visible; /* visible */
        background-color: green; /* green */
        display: flex; /* block; */
        justify-content: center;
        align-items: center;
        -webkit-border-radius: .25em;
        -moz-border-radius: .25em;
        border-radius: .25em;
        height: 25px; /* 50px */
        width: 25px; /* 50px */
    }

.checkbox_green input[type=checkbox]:checked:after {
    background-color: green; /* green */
}

.checkbox_blue input[type=checkbox]:checked:after {
    background-color: #0972CB; /* blue */
}

/* Bootstrap Multiselect CSS - End */