﻿body {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    background-position: top;
    overflow-y: scroll;
    font-family: "微軟正黑體";
}

ul, h1, h2, h3 { /* 取消ul預設的內縮及樣式 */
    margin: 0;
    padding: 0;
    list-style: none;
}
/*超連結樣式*/
a:link, a:visited {
    text-decoration: none;
    font-weight: bold;
}

a:hover, a:active {
    color: #980019;
    text-decoration: underline;
}

/* 跳到主要區塊#C */
.jump-only {
    float: left;
    background-color: #2e7f53;
    position: absolute;
    padding: 0.5rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    margin-top: 0;
    z-index: 99;
}
/**/
.jump-only-focusable:active,
.jump-only-focusable:focus {
    display: inline-block;
    color: yellow;
    position: static;
    width: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    margin-bottom: 0.5rem;
    margin-left: 0.1rem;
    z-index: 99;
}

a:focus { /*TAB文字*/
    outline: 2px solid #903;
}

.accordion {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-bottom: 0.5rem;
}

.middleL {
    text-align: center;
    margin: auto;
}

/*按鈕舊版*/
.chmenu, .omenu {
    display: inline-block;
    margin: 0.5rem;
    border: #b7ddb3 solid;
    border-radius: 3rem;
    font-size: 1.2rem;
    padding: 0.7rem 0.8rem;
    color: #ffffff;
}

.omenu {
    background: #e2f4e1;
}

    .omenu a {
        color: #055c2f;
    }

.middleL .chmenu {
    background: #2e7f53;
}

.chmenu a {
    color: #fff;
}

.middleL > ul > li a {
    text-align: center;
}

address a:focus {
    outline: 2px solid #ffffff;
}

input:focus, .DDList:focus, input[checkbox]:focus, textarea:focus {
    background-color: #fff5bd;
    outline: 2px solid #903;
}

header {
    background: url('../images/Templates/banace.png') no-repeat center;
    min-height: 379px;
}

footer {
    background: #006934;
    text-align: center;
    padding: 0.8rem 0;
}

    footer > ul {
        list-style-type: none;
    }

        footer > ul > li {
            display: inline-block;
            color: #faf9d6;
            font-weight: bold;
            letter-spacing: 2px;
            margin: 0.2rem 0;
        }

            footer > ul > li a:link, footer > ul > li a:visited {
                text-decoration: none;
                color: #faf9d6;
                font-weight: bold;
            }

            footer > ul > li a:hover {
                text-decoration: underline;
            }

            footer > ul > li a:focus {
                outline: 2px #faf9d6 solid;
            }

    footer > address > div {
        line-height: 1.5rem;
        font-style: normal;
        color: #FFF;
        text-align: center;
        font-weight: bold;
    }

        footer > address > div > span {
            display: inline-block;
            margin-right: 1rem;
        }

@media screen and (min-width:875px) {
    .search {
        border: 1px solid #000;
        display: inline-block;
        margin: 0.3rem 0;
        /*width: 3rem;
        height: 2rem;*/
        border: 0;
        line-height: 0;
        text-align: center;
        vertical-align: middle;
    }

        .search > a {
            background-color: #a52e28;
            display: inline-block;
            padding: 0.1rem 0.6rem;
            border-radius: 1.2rem;
        }

            .search > a:focus {
                outline: 2px solid #000;
            }

    .Logo {
        margin-left: 20vw;
    }

        .Logo > h1 > a:focus {
            outline: none;
        }

            .Logo > h1 > a:focus > img {
                outline: 2px solid #000;
                vertical-align: middle;
                max-width: 50%;
            }
    /* ~~ 上方menu~~ */
    .header_menu {
        text-align: center;
        width: 80%;
        margin: auto;
        margin-top: 5rem;
    }

    .header_menup {
        text-align: right;
        right: 0;
        width: 78%;
        margin: auto;
    }

    .p11 {
        vertical-align: middle;
    }

        .p11 > a {
            background: #a52e28;
            color: #FFF;
            padding: 0.3rem 0.7rem;
            border-radius: 1.5rem;
        }

            .p11 > a:focus {
                outline: 2px solid #000;
            }

    .header_menu > ul {
        padding: 0.2rem 1rem;
        background-color: #006934;
        border-radius: 1rem;
        display: inline-block;
    }

        .header_menu > ul > li {
            display: inline-block;
            width: 120px;
            vertical-align: middle;
            text-align: center;
        }

            .header_menu > ul > li > a:link, .header_menu > ul > li > a:visited {
                display: inline-block;
                font-size: 1.2rem;
                color: white;
                display: block;
                vertical-align: middle;
            }

            .header_menu > ul > li > a:focus {
                outline: 2px solid #ffffff;
            }

    /* ~~ 手機上方menu~~ */
    nav {
        display: none;
    }

    section {
        min-height: 500px;
    }

    .container {
        max-width: 1180px;
        margin: 0 auto;
        padding-bottom: 5rem;
    }

    .Top_L {
        color: #3e3a39;
    }

    /*內文中間*/
    .middleC {
        min-height: 500px;
    }

    /*.Title_L {
        background: url(../images/Templates/Items_R.png) no-repeat left top;
    }

        .Title_L > h2 {
            font-size: 1.9rem;
            font-weight: bold;
            color: #512564;
            margin-left: 3rem;
            line-height: 2rem;
        }*/
    /*展開／收合底*/
    .flip {
        display: block;
        text-align: center;
        font-size: 1.2rem;
        background-image: url('../images/Templates/flip.png');
        min-height: 167px;
        position: relative;
    }

    #opnemenu_area > a {
        position: absolute;
        top: 4.5rem;
    }

    .flip a:focus {
        outline: 2px solid #635e5d;
        color: #FFFFFF;
    }

    .mark {
        background-color: #f5fff3;
        text-align: center;
    }

    div .paneD {
        width: 50%;
        margin: auto;
    }

        div .paneD > div.DD {
            width: 8rem;
            line-height: 1.8rem;
            vertical-align: top;
            display: inline-block;
            margin: 0.5rem;
        }

            div .paneD > div.DD > a:link, div .paneD > div.DD > a:visited {
                color: #635e5d;
                font-weight: bolder;
                font-size: 1.1rem;
                letter-spacing: 0.1rem;
            }

            div .paneD > div.DD > a:focus {
                outline: 2px solid #635e5d;
            }

    div.spanD {
        line-height: 1.8rem;
        color: #456968;
        font-weight: bold;
        font-size: 1.25rem;
        letter-spacing: 0.2rem;
        margin-bottom: 0.2rem;
        border-bottom: #57A0A5 0.15rem solid;
    }
}

@media screen and (max-width:874px) {
    .mark, .flip, .header_menu, .container_Top {
        display: none;
    }

    header {
        background: url('../images/Templates/banace_RWD.png') no-repeat center;
        min-height: 182px;
        text-align: center;
    }

    .Logo {
        padding-top: 1.5rem;
    }

        .Logo > h1 > a:focus > img {
            max-width: 80%;
        }

    /* ~~ 手機上方menu~~ */
    /*.S_header_menu {*/ /* 手機選單 */
        /*display: block;
        width: 100%;
        text-align: right;
        z-index: 3;
    }

    .S_menu > div > a:focus {
        outline: none;
    }

        .S_menu > div > a:focus > .nav-mobile-button {
            outline: 2px solid #ffffff;
        }*/

/*    .R_menu {
        width: 100%;
        font-weight: bold;
        text-align: right;
        background: #2e7f53;
        line-height: 5px;
        padding-bottom: 3px;
        border-top: 0.1rem solid #E2D2C2;
        border-bottom: 0.2rem solid white;
    }
*/
  /*  .nav-mobile-button {
        display: inline-block;
        position: relative;
        background-color: transparent;
        background-image: none;
        border: #002425;
        padding: 5px 10px 5px 5px;
        width: 1.4rem;
    }

        .nav-mobile-button .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            overflow: hidden;
        }

        .nav-mobile-button .icon-bar {
            display: inline-block;
            width: 1.6rem;
            height: 0.3rem;
            margin-right: -2px;
            background: #FFF;
        }

    .accordion {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }*/
/*
    .link {
        background: #DCEDC8;
        font-size: 1.2rem;
        font-weight: bold;
        text-align: left;
        letter-spacing: 0.1rem;
        padding: 0.5rem;
        padding-left: 1rem;
        border-bottom: 1px solid #c9b1d0;
    }

        .link a {
            color: #413c3c;
        }

        .link > .search input[type=text] {
            font-size: 1rem;
            padding: 0.3rem;
            vertical-align: middle;
            margin: 0;
            line-height: 1.2rem;
        }

        .link > .search {
            padding: 0;
            font-size: 0;
            display: inline-block;
        }

            .link > .search > a {
                margin-left: -0.5rem;
            }

                .link > .search > a img {
                    vertical-align: middle;
                    padding: 0.1rem 0.4rem;
                    background: #635e5d;
                }

        .link > .AdvanceSearch {
            display: inline-block;
            margin-top: 0.5rem;
        }

    .link1 a {
        display: block;
    }

        .link1 a:focus {
            outline: none;
        }

            .link1 a:focus > span {
                outline: 2px solid #000000;
            }*/
 
/*
    .link span.arrow {
        position: absolute;
        right: 10px;
        margin-top: 0.1rem;
        width: 10px;
        height: 10px;
        border-top: 3px solid #000000;
        border-left: 3px solid #000000;
        transform: rotate(-137deg);
    }*/
/*
    .submenu {
        background: #FFF8E1;
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

        .submenu > li > a {
            color: #333333;
            display: block;
        }

            .submenu > li > a:focus {
                outline: none;
            }

                .submenu > li > a:focus > span {
                    outline: 2px solid #000000;
                }

        .submenu li {
            border-bottom: 1px solid #cccccc;
            font-size: 1rem;
            font-weight: bold;
            letter-spacing: 2px;
            padding: 0.5rem;
            padding-left: 2.2rem;
            text-align: left;
        }*/

    /*手機選單*/
    .SMenu {
        display: block;
        background: #2e7f53;
        height: 1.8rem;
        width: 100%;
        padding: 0.2rem 0;
        text-align: right;

    }

    .BarText {
        display: inline-block;
        color: #ffffff;
        font-size: 1.2rem;
        font-weight: bold;
        vertical-align: text-top;
    }

    .SMenu > a > div {
        display: inline-block;
        width: 2rem;
        line-height: 0.3rem;
        margin-right: 1rem;
        vertical-align: top;
    }

    .SMenu > a {
        display: inline-block;
        margin: 0;
        padding: 0;
        text-decoration: none;
    }

    .IconBar {
        background: #ffffff;
        display: inline-block;
        width: 1.3rem;
        height: 0.2rem;
        margin: auto;
    }
    /*手機選單內容*/
    .RMenu {
        display: block;
        background: #DCEDC8; /*#F8C3CD */
        padding-top: 1rem;
    }

    .RMSearch {
        margin-bottom: 0.2rem;
        text-align:center;
    }
        .RMSearch input[type=text]{
            vertical-align: middle;
        font-size:1.1rem;
        line-height:1.8rem;
        margin:0;
        }
        .RMSearch .Search {
            vertical-align: middle;
            padding:0rem 0.5rem;
            margin-left:-0.3rem;
            background: #635e5d;

        }
    .Search .Imgdiv {
        margin: 0;
        padding: 0;
        vertical-align:bottom;
        max-height:100%;
    }
    .RMSearch > a {
        display: inline-block;
        vertical-align: middle;
    }
        .ListItem {
            background: #FFF8E1;
        }

    .RMenu li {
        list-style-type: none;
        line-height: 2rem;
        text-align: left;
        border-top: 1px dotted #393939;
    }

    .RMenu > ul > li {
        margin: 0;
    }

    .RMenu a {
        text-decoration: none;
        color: #393939;
        font-size: 1.2rem;
        font-weight: bold;
        padding-left: 0.5rem;
    }

    .ListViewS, .ListView {
        padding: 0.2rem;
    }

     /*   .ListViewS:hover, .ListView:hover {
            background: #FFD0EC; 
        }*/

        .ListViewS a, .ListView a {
            display: inline-block;
        }

    .ListItem a {
        display: block;
        padding-left: 1.1rem;
    }
        .ListItem a:focus {
            outline:none;
        }
        .ListItem a:focus > span {
            outline: 2px solid #2e7f53;
        }
    .ListViewS {
        position: relative;
    }
    /*手機選單內容-下拉按鈕*/
    .Arrow {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-bottom: 5px #393939 solid;
        border-left: 5px #393939 solid;
        transform: rotate(-45deg);
        position: absolute;
        margin-top: 0.3rem;
        right: 10px;
    }

    /*.Title_L {
        background: url(../images/Templates/Items_R.png) no-repeat left top;
    }

        .Title_L > h2 {
            font-size: 1.9rem;
            font-weight: bold;
            color: #512564;
            margin-left: 3rem;
            line-height: 2rem;
        }*/

    .matter_path {
        margin-top: 0.5rem;
        margin-left: 0.5rem;
    }

    .middleC {
        width: 100%;
        min-height: 500px;
    }

    .useless {
        min-height: 167px;
        background-image: url('../images/Templates/flip.png');
    }
}
