@charset "utf-8";
/*CSS Info ======================================================================
File Name: Grid.css
Create Editor: Eliam
Create Date: 2023/03/15
Last Editor: Rebecca
Last Date: 2024/05/14
Version： 4.0
---------------------------
【 風格 】
    施工機具管理 - 橘黃綠色系
	jQuery JavaScript Library v1.12.4
【 Table of Contents 】
	MyGridView	100%寬度
	MyGridView2	自訂寬度
		MyHead
		MyRow
		MyAlt
		MyPager
		MyOver
	MyTable  單欄樣式
		Alt
		Over
	MyQueryArea	MyTable 單欄樣式
	btn 置中   三樣式應用
	修正jQuery UI
=================================================================================*/

/*===============================================================================
                           Globel 移植  General Setting
=================================================================================*/
/*#region General Setting */
.Clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.Disappear {
    display: none;
}

.Show {
    display: block;
}

select:focus {
    outline: 2px dotted #F9BF75;
}

/*----------------- 文字顏色標註設定 -----------------*/
.Note { /*灰色*/
    font-size: .875rem;
    color: #999;
}

.deepBg .Note /*灰色*/ {
    color: #DADFE1;
}

.Alert { /*紅色*/
    color: #E05F62;
    font-size: .875rem;
}

.deepBg .Alert /*淺綠色*/ {
    color: #98fb98;
}

.Near {
    color: #FF9933;
    font-size: .875rem;
}

/*----------------- 文字格式設定-----------------*/
.smallWords {
    font-size: small;
}

.AddHeight {
    line-height: 1.5em;
}

/*----------------- 文字靠齊設定 -----------------*/
.txtLeft {
    text-align: left;
}

.txtCeter {
    text-align: center;
}

.txtRight {
    text-align: right;
}

/*----------------- 圖片靠齊設定 -----------------*/
.imgMiddle {
    vertical-align: middle;
}

/*----------------- 指標 -----------------*/
.clickable {
    cursor: pointer;
}

.unclickable {
    cursor: default;
}

/*----------------- 必填 -----------------*/
.required::after {
    content: '*';
    color: #E05F62;
}



/*===============================================================================
                           General style 
=================================================================================*/

.Des {
    color: #C0B7B2;
    font-size: 1rem;
}

span.Alert {
    color: #E05F62;
    padding-left: .25rem;
}

.required::after {
    content: "*";
    color: #E05F62;
    position: absolute;
}

.AddGap {
    margin: 0.5em 0;
}

    .AddGap span {
        line-height: 46px;
    }

/**** Form general ****/
table {
    color: #303030;
    font-size: 1.125rem;
}

    table p {
        padding: .125rem 0;
    }

    table th, table td {
        vertical-align: middle;
    }

td span {
    margin-left: 3rem;
}

td img {
    vertical-align: middle;
}

td i {
    font-size: 1.4rem;
    padding: 0;
    vertical-align: middle;
}

select, input[type=radio], input[type=checkbox], input[type=text] {
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
}

.MyQueryArea caption, .MyGridView caption {
    color: #303030;
    font-size: 1.375rem;
    position: absolute;
    top: -2.25rem;
    left: 1rem;
}

.MyQueryArea td span {
    margin-left: 0;
}

/**** 選頁樣式 ****/
.MyPager {
    color: #303030;
    font-size: 1rem;
    text-align: right;
    background: none;
    margin-top: 2px;
    padding: 5px;
}

    .MyPager .Alert {
        color: #E05F62;
    }


/*===============================================================================
                           Grid View 或列表表格設定 
=================================================================================*/
.GridViewCont {
    width: 100%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.MyGridView {
    width: 100%;
    text-align: center;
    position: relative;
    background-color: #ffffff;
}

    .MyGridView caption {
        /*top: -2rem;*/
    }

    .MyGridView tr:hover {
        background-color: #E0F1EE;
        /*cursor: pointer;*/
        cursor: initial;
    }

    .MyGridView th, .MyGridView td {
        vertical-align: middle;
        padding: .75rem;
    }

    .MyGridView tbody th, .MyGridView th {
        color: #ffffff;
        font-size: 1.25rem;
        min-width: 5rem;
        background-color: #5D8E9F;
    }

    .MyGridView tbody td, .MyGridView td {
        color: #303030;
        border-bottom: 1px solid #E0F1EE;
    }

    .MyGridView tr:nth-last-child(1) td {
        border-bottom: none;
    }

    .MyGridView th a {
        color: #E0F1EE;
    }

        .MyGridView th a:hover {
            color: #F9F9F9;
        }

    .MyGridView td a, .Mytable td a {
        color: #5D8E9F;
        position: relative;
        transition: all .2s ease-in;
    }

        .MyGridView td a::before, .Mytable td a:before {
            content: "";
            height: 1px;
            width: 100%;
            background-color: #F9BF75;
            position: absolute;
            left: calc(50% - 50%);
            bottom: -.125rem;
            transition: all .2s ease-in;
        }

        .MyGridView td a:hover, .Mytable td a:hover {
            color: #5D8E9F;
            font-weight: bold;
        }

            .MyGridView td a:hover::before, .Mytable td a:hover::before {
                width: 110%;
                left: calc(50% - 55%);
                background-color: #F9BF75;
            }

    .MyGridView .MyOver, .MyGridView .MyAlt {
        background-color: transparent;
    }

    .MyGridView td.multiline span {
        margin: 0.5rem 0;
    }


/*===============================================================================
                           FontView、DetailVeiw套用 
=================================================================================*/
.Mytable {
    background-color: #F9F9F9;
    width: 100%;
    border-top: none;
    margin-bottom: 1rem;
    position: relative;
}

    /* .Mytable.normal {
        background-color: #F9F9F9;
        border: 1px solid #5D8E9F;
    } */

    .Mytable caption {
        color: #ffffff;
        font-size: 1.125rem;
        font-weight: bold;
        background: #5D8E9F;
        padding: .75rem 0;
    }

    .Mytable th, .Mytable td {
        vertical-align: text-top;
        padding: .75rem .25rem;
        vertical-align: middle;
    }

    .Mytable th, .Mytable thead th, .Mytable tbody th {
        color: #303030;
        width: 15%;
        padding-right: 1.25rem;
        text-align: right;
        position: relative;
    }

    /* .Mytable.normal th {
        color: #303030;
    } */

    .Mytable td {
        text-align: left;
    }




/**** 表單分組元件 ***/
.MyFieldset {
    border: 2px dotted #5D8E9F;
    padding: 1.25rem;
    box-sizing: border-box;
    position: relative;
}

    .MyFieldset.middle {
        width: 75%;
    }

    .MyFieldset.large {
        width: 100%;
    }

    .MyFieldset table th {
        /*width: 25%;*/
        width: 20%;
        text-align: right;
    }

    .MyFieldset table td {
        text-align: left;
    }

    .MyFieldset legend {
        color: #5D8E9F;
        /*color: #AFCBBF;*/
        /*font-size: 1.25rem;*/
        font-size: 1.75rem;
        font-weight: bold;
        position: absolute;
        top: -1rem;
        left: 3rem;
        background-color: #fff;
        padding: 0 .5rem;
    }

    .MyFieldset table {
        background-color: #F9F9F9;
        width: 100%;
    }

        .MyFieldset table th, .MyFieldset table td {
            padding: .75rem .5rem;
        }

        .MyFieldset table th {
            /*color: #487F86;*/
        }


@media only screen and (max-width: 1023px) {
    .MyFieldset {
        width: 100%;
    }
}

/*===============================================================================
                           查詢區域 套用 
=================================================================================*/
.MyQueryArea {
    width: 100%;
    box-sizing: border-box;
    border: none;
    background-color: #F9F9F9;
    border-radius: 20px;
    padding: 25px .5rem;
    position: relative;
}

    .MyQueryArea caption {
        left: 0;
    }

    .MyQueryArea th, .MyQueryArea td {
        padding: .5rem 0;
        width: auto;
        vertical-align: middle;
        font-size: 1.125rem;
    }

    .MyQueryArea th {
        text-align: right;
        vertical-align: top;
        width: 30%;
        padding-top: 1rem;
        padding-right: 1rem;
        font-weight: bold;
    }

        .MyQueryArea th.delGap {
            padding-top: .75rem;
        }

    .MyQueryArea td {
        text-align: left;
        width: 37%;
    }

    .MyQueryArea table th label {
        font-weight: bold;
        margin: 0;
    }

/*===============================================================================
                           選項區
=================================================================================*/
.Card {
    margin-bottom: 30px;
}

    .Card p {
        color: #303030;
        font-size: 1.25rem;
        line-height: 2rem;
        padding-left: .5rem;
    }

    .Card .cardCont {
        background: #F9F9F9;
        border: 1px solid #5D8E9F;
        border-radius: 3px;
        padding: 1rem 1.25rem;
        margin-top: .5rem;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-content: space-around;
        align-items: center;
    }

        .Card .cardCont div {
            width: 32%;
            margin: .25rem 0;
        }

            .Card .cardCont div input[type=radio] ~ label,
            .Card .cardCont div input[type=checkbox] ~ label {
                color: #303030;
            }

                .Card .cardCont div input[type=radio] ~ label > span,
                .Card .cardCont div input[type=checkbox] ~ label > span {
                    color: #E05F62;
                    line-height: normal;
                    padding-left: .25rem;
                }

            .Card .cardCont div > input[type=checkbox] {
                /*background: #5D8E9F;*/
            }

                .Card .cardCont div > input[type=checkbox]:hover,
                .Card .cardCont div > input[type=checkbox]:checked {
                    background: #5D8E9F;
                }

                    .Card .cardCont div > input[type=checkbox]:checked:before {
                        color: #FFFFFF;
                    }

    .Card .link {
        margin: 40px 0 20px;
    }

    .Card a {
        color: #fff;
        font-size: 1.25rem;
        background-color: #73C5C5;
        border: 1px solid #fff;
        border-radius: 50px;
        padding: 10px 40px;
        margin-right: 40px;
    }

        .Card a:hover {
            color: #70B5B5;
            background-color: #fff;
            border: 1px solid #9CDEDE;
            box-shadow: 0 2px 5px rgba(135, 226, 233, 0.4);
        }

    .Card .cardCont.inspect {
        border-top: 3px solid #F6EDE6;
        border-bottom: 1px solid #F6EDE6;
        border-left: none;
        border-right: none;
        border-radius: 0;
    }

        .Card .cardCont.inspect label {
            color: #B08D80;
            font-size: 1.125rem;
            width: 19%;
            border-radius: 5px;
            border: 2px dashed #F1DBD0;
            background-color: rgba(255, 255, 255, .8);
            padding: .75rem 1rem;
            margin: .75% 1%;
        }

            .Card .cardCont.inspect label.mark {
                background: #FAEEE6;
                border: 1px solid #F1DBD0;
            }

            .Card .cardCont.inspect label span {
                color: #EC9F81;
                padding-left: .25rem;
                line-height: normal;
            }

            .Card .cardCont.inspect label > input[type=radio] {
                border: 2px solid #EFCCBA;
                background: rgba(255, 255, 255, 0);
                width: 16px;
                height: 16px;
                bottom: 2px;
            }

                .Card .cardCont.inspect label > input[type=radio]:hover,
                .Card .cardCont.inspect label > input[type=radio]:checked {
                    background: #EC9F81;
                    border: 2px solid #EC9F81;
                }

                    .Card .cardCont.inspect label > input[type=radio]:checked:before {
                        background: #EC9F81;
                        top: 2px;
                        left: 2px;
                    }

/*===============================================================================
                           button、input
=================================================================================*/

.btn {
    font-family: "\5FAE\8EDF\6B63\9ED1\9AD4", Arial;
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none !important;
    background-color: #5D8E9F;
    border: 2px solid #CBDFE0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: .625rem 2.625rem;
    margin: 0 .25rem;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    display: inline-block;
    cursor: pointer;
}

    .btn:hover, .btn:focus {
        color: #303030;
        background-color: #ffffff;
        border: 2px solid #5D8E9F;
        box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
    }


/* -------個別設定------- */
.CommandArea.return {
    margin: 2px 0 20px 0;
}

.btn.back {
    line-height: initial;
    background-color: #C0B7B2;
    border: 2px solid #C0B7B2;
}

    .btn.back:hover, .btn.back:focus {
        border: 2px solid #C0B7B2;
        background-color: #fff;
    }

.search_condition section {
    margin-top: 0;
}

.search_condition .MyQueryArea {
    width: 100%;
    box-sizing: border-box;
}

    .search_condition .MyQueryArea table {
        width: 100%;
    }

        .search_condition .MyQueryArea table tr {
            display: flex;
            align-items: center;
        }

        .search_condition .MyQueryArea table th {
            width: 40%;
            vertical-align: middle;
            padding-top: 0.5rem;
        }

        .search_condition .MyQueryArea table td {
            width: 70%;
        }

            .search_condition .MyQueryArea table td input[type="text"] {
                width: 262px;
            }

        .search_condition .MyQueryArea table .onecol th {
            width: 10%;
            vertical-align: middle;
            padding-top: 0.5rem;
        }

        .search_condition .MyQueryArea table .onecol td {
            width: 90%;
        }

            .search_condition .MyQueryArea table .onecol td input[type="text"] {
                width: 500px;
            }

        .search_condition .MyQueryArea table td select {
            margin: 0;
        }

        .search_condition .MyQueryArea table .onecol td label.item::after {
            content: ' ';
            display: inline-block;
            background-size: auto;
            background-repeat: no-repeat;
            width: 28px;
            height: 28px;
            vertical-align: middle;
            padding-bottom: 2px;
            padding-left: 5px;
        }

        .search_condition .MyQueryArea table .onecol td label.item_1::after {
            content: ' ';
            background-image: url(../../../wwwroot/images/master/item_1.png);
        }

        .search_condition .MyQueryArea table .onecol td label.item_2::after {
            content: ' ';
            background-image: url(../../../wwwroot/images/master/item_2.png);
        }

        .search_condition .MyQueryArea table .onecol td label.item_3::after {
            content: ' ';
            background-image: url(../../../wwwroot/images/master/item_3.png);
        }

        .search_condition .MyQueryArea table .onecol td label.item_4::after {
            content: ' ';
            background-image: url(../../../wwwroot/images/master/item_4.png);
        }

    .search_condition .MyQueryArea .CommandArea {
        margin: 0;
        margin-top: 30px;
        min-height: initial;
    }

        .search_condition .MyQueryArea .CommandArea .btn {
            margin: 0 1.25rem;
        }

            .search_condition .MyQueryArea .CommandArea .btn.back2 {
                background-color: #ffffff;
                border: 2px solid #C0B7B2;
                color: #262626;
            }

                .search_condition .MyQueryArea .CommandArea .btn.back2:hover, .search_condition .MyQueryArea .CommandArea .btn.back2:focus {
                    border: 2px solid #C0B7B2;
                    box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
                }

.MyPager.searchPage {
    margin-bottom: 15px;
}

.MyPager select {
    width: 90px;
    min-width: initial;
    margin: 0 12px;
    color: #5D8E9F;
    border-radius: 0;
    background-image: linear-gradient(45deg, transparent 50%, #5D8E9F 50%), linear-gradient(135deg, #5D8E9F 50%, transparent 50%);
    background-position: calc(100% - 16px) calc(.75em + 2px), calc(100% - 10px) calc(.75em + 2px), calc(100% - 2.15em) 0.3em;
}

.MyGridView.searchPage {
}

    .MyGridView.searchPage th, .MyGridView.searchPage td {
        padding: 1.25rem .5rem;
        font-size: 1.125rem;
    }

    .MyGridView.searchPage:last-child td:last-child {
        text-align: left;
    }

    .MyGridView.searchPage td.data_category a::before {
        content: '';
        display: none;
    }

    .MyGridView.searchPage td img {
        padding: 0 7.5px;
    }

.Mytable.details {
    border-radius: 20px;
    padding: 30px 40px;
    box-sizing: border-box;
}

    .Mytable.details th, .Mytable.details td {
        border-bottom: 1px dotted #cccccc;
    }

    .Mytable.details tr:last-child th, .Mytable.details tr:last-child td {
        border-bottom: none;
    }

    .Mytable.details th {
        width: 18%;
        padding-right: 1.15rem;
        padding-left: 1rem;
        padding-top: 0.5rem;
        background-color: #cccccc61;
        text-align: right;
    }

    .Mytable.details td {
        padding-left: 10px;
        text-align: left;
    }

/*MyGridView.details td:last-child {
            text-align: center;
        }*/

.MyGridView.searchPage.details td a.file {
    width: 17.5px;
    height: 20px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: auto;
    margin: 0 5px;
}

    .MyGridView.searchPage.details td a.file::before {
        content: '';
        display: none;
    }

.MyGridView.searchPage.details td a.file_pdf {
    background-image: url(../../../wwwroot/images/master/file_pdf.png);
}

.MyGridView.searchPage.details td a.file_zip {
    background-image: url(../../../wwwroot/images/master/file_zip.png);
}

.MyGridView.searchPage.details_4 td:last-child {
    text-align: left;
}



/*----------------- RWD -----------------*/
@media only screen and (min-width: 768px) and (max-width: 1366px) {
    select {
        min-width: 9rem;
    }
}

@media only screen and (max-width: 47.9375em) {
    section {
        margin: 2.5rem 0rem 0rem 0rem;
    }

    .MyQueryArea th, .MyQueryArea td {
        font-size: 1rem;
    }

    .MyQueryArea {
        padding-left: 1rem;
    }

        .MyQueryArea table tr, .Mytable.details tr {
            display: grid;
        }

        .MyQueryArea table th, .MyQueryArea table .onecol th {
            width: 100%;
            text-align: left;
            padding: 0 0 10px 0;
        }

        .MyQueryArea table td, .MyQueryArea table .onecol td {
            width: 100%;
            padding: 0 0 20px 0;
        }

            .MyQueryArea table td input[type="text"] {
                font-size: 0.875rem;
            }

            .MyQueryArea table .onecol td input[type="text"] {
                width: 262px;
            }

        .MyQueryArea.punish_search table .onecol td label.item::after {
            content: '';
            display: none;
        }

        .MyQueryArea table .space {
            display: none;
        }

        .MyQueryArea table td label {
            font-size: 1rem;
        }

        .MyQueryArea .CommandArea {
            margin-top: 10px;
        }

            .MyQueryArea .CommandArea .btn {
                font-size: 1rem;
            }

    .Mytable.details th {
        padding-top: 20px;
        padding-bottom: 10px;
        padding: 20px 0 10px 0;
        width: fit-content;
        background-color: transparent;
        text-align: left;
        border-bottom: none;
    }

    .Mytable.details tr:first-child th {
        padding-top: 0;
    }

    .Mytable.details td {
        padding: 0;
        width: 100%;
        border-bottom: none;
    }

    p.note {
        font-size: 0.875rem;
    }

    .GridViewCont {
        overflow-x: auto;
    }

    .MyGridView.searchPage th.data_category {
        min-width: 6rem;
    }

    .MyGridView.searchPage td, .MyGridView.searchPage td p {
        font-size: 1rem;
    }

        .MyGridView.searchPage td:last-child {
            text-align: center;
        }

    .Mytable.details_4 td:last-child {
        text-align: left;
    }

    .MyGroupControls.pageBtnArea label {
        display: table;
    }

    .btn.back {
        font-size: 1rem;
    }

    .MyPager.searchPage {
        text-align: left;
    }
}

/* 密集排列設定 small interval */

table.thin {
    font-size: 1rem;
}

.MyGridView.thin {
    width: 100%;
    text-align: center;
    position: relative;
    background-color: #ffffff;
}

    .MyGridView.thin th, .MyGridView.thin td {
        font-size: 1rem;
        padding: .5rem;
        max-width: 10rem;
    }

.Mytable.thin th {
    padding: .25rem;
    padding-right: 1rem;
    max-width: 12%;
}

.Mytable.thin td {
    padding: .25rem;
}


/* 凍結表格 */
.freeze > div {
    height: 400px;
    overflow-y: auto;
}

.freeze h3 {
    font-weight: normal;
    color: #262626;
    font-size: 1.375rem;
    margin-left: 1rem;
    padding-bottom: 0.5rem;
}

.freeze tr th {
    position: sticky;
    top: 0;
}

/*----------------- 2412現地 -----------------*/

.btn.btn_oval {
    font-size: .875rem;
    font-weight: bold;
    color: #ffffff;
    padding: 4px 15px;
    border-radius: 100px;
    background-color: #AF9212;
    border: 2px solid #AF9212;
}

    .btn.btn_oval:hover, .btn.btn_oval:focus {
        background-color: #A58D24;
        border: 2px solid #A58D24;
        color: #ffffff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
    }

.CommandArea {
    text-align: center;
    margin: 20px 0;
}

    .CommandArea .btn {
        color: #fff;
        font-size: 1.125rem;
        border: 2px solid #CBDFE0;
        border-radius: 5px;
        background-color: #5D8E9F;
        padding: .5rem 2.625rem;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }

        .CommandArea .btn:hover, .CommandArea .btn:focus {
            color: #303030;
            border: 2px solid #5D8E9F;
            background-color: #ffffff;
            box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
        }

/* 場址導覽 */

.cont_left .MyQueryArea {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
}

    .cont_left .MyQueryArea table select {
        min-width: 160px;
        padding: 8px 10px;
        border: 1px solid #5D8E9F;
        border-radius: 5px;
        background-color: #ffffff;
        background-image: linear-gradient(45deg, transparent 50%, #5D8E9F 50%), linear-gradient(135deg, #5D8E9F 50%, transparent 50%), linear-gradient(to right, #5D8E9F, #5D8E9F);
        background-position: calc(100% - 16px) calc(.75em + 2px), calc(100% - 10px) calc(.75em + 2px), calc(100% - 2.15em) 0.3em;
        background-repeat: no-repeat;
        background-size: 6px 6px, 6px 6px, 1px 1.5em;
    }

.cont_siteGuide .cont_left .MyQueryArea .CommandArea {
    margin-top: 15px;
    margin-bottom: 0;
}

.cont_siteGuide .cont_right .MyGridView {
    box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
    border-radius: 5px;
    height: 533px;
    overflow: auto;
}

    .cont_siteGuide .cont_right .MyGridView table {
        width: 100%;
    }

        .cont_siteGuide .cont_right .MyGridView table tr.pin_select {
            background-color: #F1EBCB;
        }

        .cont_siteGuide .cont_right .MyGridView table th {
            font-size: 1.125rem;
            padding: 15px 8px;
            position: sticky;
            top: 0;
            z-index: 10;
        }

            .cont_siteGuide .cont_right .MyGridView table th:first-child {
                border-radius: 5px 0 0 0;
            }

            .cont_siteGuide .cont_right .MyGridView table th:last-child {
                border-radius: 0 5px 0 0;
            }

        .cont_siteGuide .cont_right .MyGridView table td {
            font-size: 1rem;
            line-height: 1.25rem;
            padding: 15px 8px;
        }

            .cont_siteGuide .cont_right .MyGridView table td:nth-child(2) {
                text-align: left;
            }

.cont_siteGuide .MyGridView td a::before, .cont_siteGuide .Mytable td a:before {
    display: none;
}

.cont_siteGuide .MyGridView::-webkit-scrollbar {
    height: 8px;
}

/* 場址導覽詳細頁 */

.cont_siteIntro .cont_right .cont_project .MyGridView table {
    width: 100%;
    border: 2px solid #5D8E9F;
}

.cont_siteIntro .cont_right .MyGridView tr:hover {
    background-color: transparent;
}

.cont_siteIntro .cont_right .MyGridView th {
    width: 20%;
    background-color: #CBDFE0;
    color: #303030;
    font-size: 1.125rem;
    line-height: 1.5rem;
    text-align: right;
    padding: 8px 12px;
    border-bottom: 2px dotted #83B9BD;
}

.cont_siteIntro .cont_right .MyGridView td {
    color: #303030;
    font-size: 1.125rem;
    line-height: 1.75rem;
    text-align: left;
    padding: 8px 12px;
    border-bottom: 2px dotted #83B9BD;
}

    .cont_siteIntro .cont_right .MyGridView td dl dt {
        font-weight: bold;
        font-size: 1.25rem;
    }

        .cont_siteIntro .cont_right .MyGridView td dl dt::before {
            content: '';
            width: 8px;
            height: 3px;
            display: inline-block;
            background-color: #83B9BD;
            margin-right: 5px;
            vertical-align: middle;
        }

.btn.btn_switchCont {
    color: #707070;
    background-color: #F1EBCB;
    border: 2px solid #F1EBCB;
    padding: 7px 10px;
}

    /*.cont_siteIntro .cont_right .cont_environment .btn_switchCont {
    color: #707070;
    background-color: #F1EBCB;
    border: 2px solid #F1EBCB;
    padding: 7px 10px;
}*/

    .btn.btn_switchCont:hover, .btn.btn_switchCont:active {
        color: #303030;
        border: 2px solid #AF9212;
    }

    .btn.btn_switchCont:focus, .btn.btn_switchCont.mark {
        color: #ffffff;
        border: 2px solid #AF9212;
        background-color: #AF9212;
    }

/*.cont_siteIntro .cont_right .cont_environment .btn_switchCont:hover, .cont_siteIntro .cont_right .cont_environment .btn_switchCont:active {
        color: #303030;
        border: 2px solid #D9C157;
    }

    .cont_siteIntro .cont_right .cont_environment .btn_switchCont:focus {
        color: #ffffff;
        border: 2px solid #D9C157;
        background-color: #D9C157;
    }*/

.cont_siteIntro .cont_right .cont_environment .MyGridView {
    margin-top: 40px;
    margin-bottom: 10px;
}

    .cont_siteIntro .cont_right .cont_environment .MyGridView table {
        border: 2px solid #5D8E9F;
        position: relative;
        margin-bottom: 50px;
    }

        .cont_siteIntro .cont_right .cont_environment .MyGridView table:last-child {
            margin-bottom: 0;
        }

    .cont_siteIntro .cont_right .cont_environment .MyGridView caption {
        font-size: 1.125rem;
        font-weight: bold;
        top: -30px;
        left: 0;
    }

        .cont_siteIntro .cont_right .cont_environment .MyGridView caption::before {
            content: '';
            width: 8px;
            height: 3px;
            display: inline-block;
            background-color: #83B9BD;
            margin-right: 5px;
            vertical-align: middle;
        }

    .cont_siteIntro .cont_right .cont_environment .MyGridView tr:first-child td {
        border-bottom: none;
    }

    .cont_siteIntro .cont_right .cont_environment .MyGridView th {
        background-color: #5D8E9F;
        color: #ffffff;
        text-align: center;
        border-bottom: 1px solid #CBDFE0;
    }

    .cont_siteIntro .cont_right .cont_environment .MyGridView td {
        text-align: center;
    }

/* 水質淨化教室 */

.cont_class .MyQueryArea {
    display: flex;
    align-items: center;
    padding: 20px 40px;
    border-radius: 5px;
    background-color: #FAF6F4;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
    margin-bottom: 40px;
}

    .cont_class .MyQueryArea table {
        margin-right: 60px;
    }

        .cont_class .MyQueryArea table th {
            vertical-align: middle;
            padding-top: .5rem;
        }

/*select2樣式*/
.select2-selection.select2-selection--single:focus {
    outline: 2px dotted #F9BF75;
}

.select2-container--default:focus, .select2-container--focus:focus {
    outline: 2px dotted #F9BF75;
}

.select2-container--default .select2-selection--single {
    min-width: 250px;
    height: 40px !important;
    padding: 8px 10px;
    border: 1px solid #E99177 !important;
    background-color: transparent;
    border-radius: 5px !important;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 1.25rem !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 6px !important;
    }

.cont_class .MyQueryArea .CommandArea {
    margin: 0;
}

    .cont_class .MyQueryArea .CommandArea .btn.btn_class {
        padding: 10px 20px;
        border: 2px solid #EEBFB1;
        background-color: #DB7456;
    }

        .cont_class .MyQueryArea .CommandArea .btn.btn_class:hover, .cont_class .MyQueryArea .CommandArea .btn.btn_class:active {
            border: 2px solid #DB7456;
            background-color: #ffffff;
            color: #303030;
        }

        .cont_class .MyQueryArea .CommandArea .btn.btn_class:focus {
            border: 2px solid #DB7456;
            background-color: #ffffff;
            color: #303030;
            outline: 2px dotted #F9BF75;
        }

            .cont_class .card_class .cont_article table {
                border: 2px solid #5D8E9F;
            }

    .cont_class .card_class .cont_article table tr:first-child th {
        background-color: #5D8E9F;
        color: #ffffff;
        padding: 10px;
        border-bottom: none;
    }

    .cont_class .card_class .cont_article table th {
        background-color: #CBDFE0;
        padding: 8px 10px;
        text-align: left;
        border-bottom: 2px dotted #A2C2CD;
    }

    .cont_class .card_class .cont_article table td {
        padding: 8px 10px;
        text-align: center;
        border-bottom: 2px dotted #A2C2CD;
    }

    .cont_class .card_class .cont_article table tr:last-child th, .cont_class .card_class .cont_article table tr:last-child td {
        border-bottom: none;
    }

input[type=radio], input[type=checkbox] {
    background: #ffffff;
    border: 1px solid #5D8E9F;
    outline: none;
    width: 18px;
    height: 18px;
    margin-bottom: 3.5px;
    position: relative;
    transition: all .3s ease-in-out;
    box-sizing: border-box;
}

input[type=radio] {
    border-radius: 50%;
    padding: 0 3px;
}

input[type=checkbox] {
    border-radius: 2px;
}

input[type=radio]:hover, input[type=radio]:checked, input[type=radio]:focus {
    background: #5D8E9F;
    border: 1px solid #5D8E9F;
    /*transform: scale(1.2);*/
    cursor: pointer;
}

    input[type=radio]:checked:before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #FFFFFF;
        position: absolute;
        top: 4px;
        left: 4px;
    }

input[type=checkbox]:hover, input[type=checkbox]:checked, input[type=checkbox]:focus {
    background: #5D8E9F;
    cursor: pointer;
    border: 1px solid #5D8E9F;
}

    input[type=checkbox]:checked:before {
        content: '\f00c';
        color: #FFFFFF;
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: .75rem;
        text-align: center;
        position: absolute;
        top: 2px;
        left: 3px;
    }

input[type=radio] ~ label, input[type=checkbox] ~ label {
    color: #303030;
    font-size: 1.125rem;
    line-height: 1.125rem;
    vertical-align: middle;
    padding: 0 2px;
    margin: 0;
    margin-right: 1rem;
}

input[type=checkbox] ~ label {
    line-height: 1.625rem;
}

/* radio頁籤樣式 */

.MyGroupControls.pageBtnArea input[type=radio]:checked + label, .MyGroupControls.pageBtnArea label:hover {
    color: #FFF;
    background-color: #5D8E9F;
}

.MyGroupControls.pageBtnArea label:focus {
    outline: 2px dotted #F9BF75;
}

.MyGroupControls input {
    position: absolute;
    left: -999px;
}

.MyGroupControls label {
    font-size: 1rem;
    display: inline-block;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0;
    transition: all .35s ease-out;
}

    .MyGroupControls label:last-child {
        margin-right: 0;
    }

.MyGroupControls.pageBtnArea {
    font-size: 0;
    display: inline-block;
    vertical-align: middle;
}

    .MyGroupControls.pageBtnArea label {
        font-size: 1.25rem;
        font-weight: bold;
        border: 1px solid #7ABDE2;
        padding: 12px 40px;
        margin: 0 2px 2px 0;
    }

    .MyGroupControls.pageBtnArea label {
        -webkit-border-top-left-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        -moz-border-radius-topleft: 10px;
        -moz-border-radius-topright: 10px;
        border-top-left-radius: 10px;
        border-top-left-radius: 10px;
    }

        .MyGroupControls.pageBtnArea label:hover, .MyGroupControls.pageBtnArea label:focus {
            -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,.14);
            box-shadow: 0 1px 4px 0 rgba(0,0,0,.14);
        }

    /*------換顏色---------*/
    .MyGroupControls.pageBtnArea label {
        color: #707070;
        border-color: #D1E6EB;
        background-color: #D1E6EB;
    }

        .MyGroupControls.pageBtnArea label:hover, .MyGroupControls.pageBtnArea label:focus {
            background-color: #ffffff;
            color: #303030;
            border-color: #5D8E9F;
            box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
        }

    .MyGroupControls.pageBtnArea input[type=radio]:checked + label {
        background-color: #5D8E9F;
        color: #ffffff;
        border-color: #5D8E9F;
    }

    .MyGroupControls.pageBtnArea input[type=radio]:disabled + label {
        background-color: #F9F9F9;
        color: #C0B7B2;
        border-color: #F9F9F9;
    }

    .MyGroupControls.pageBtnArea input[type=radio]:focus + label {
        outline: 2px dotted #F9BF75;
    }

/*----------------- scrollbar style -----------------*/

.MyGridView::-webkit-scrollbar {
    width: 8px;
}

.scrollArea::-webkit-scrollbar {
    height: 8px;
}

.MyGridView::-webkit-scrollbar-track, .scrollArea::-webkit-scrollbar-track {
    background: #C0B7B2;
    border-radius: 15px;
}

/* Handle */
.MyGridView::-webkit-scrollbar-thumb, .scrollArea::-webkit-scrollbar-thumb {
    background: #5D8E9F;
    border-radius: 20px;
    border-color: #5D8E9F;
}

    /* Handle on hover */
    .MyGridView::-webkit-scrollbar-thumb:hover, .scrollArea::-webkit-scrollbar-thumb:hover {
        background: #5D8E9F;
    }

/*----------------- 無障礙 -----------------*/

.ddl_city {
    width: 1px;
    height: 1px;
    border: 0;
    clip: rect(0, 0, 0, 0);
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

/*-----------------RWD-----------------*/
@media only screen and (min-width: 76.25em) and (max-width: 86.1875em) { /*1220~1379*/
}

@media only screen and (min-width: 61.0525em) and (max-width: 76.1875em) { /*977~1219*/
    .cont_siteGuide .cont_left .MyQueryArea tr {
        display: grid;
    }

    .cont_siteGuide .cont_left .MyQueryArea th {
        width: 100%;
        text-align: left;
    }

    .cont_siteGuide .cont_left .MyQueryArea td {
        width: 100%;
    }
}

@media only screen and (min-width: 48em) and (max-width:61em) { /*768~976*/
    .cont_class .MyQueryArea table {
        margin-right: 30px;
    }

    .select2-container--default {
        max-width: 300px;
    }

    .cont_siteGuide .cont_left .MyQueryArea th, .cont_siteGuide .cont_left .MyQueryArea td {
        width: 25%;
    }
}

@media only screen and (max-width: 47.9735em) { /*767↓*/
    .cont_class .MyQueryArea table {
        width: 100%;
    }

    .cont_class .MyQueryArea {
        display: block;
    }

    .select2-container--default {
        width: 100% !important;
    }

    .MyGroupControls.pageBtnArea {
        display: flex;
    }
}

@media only screen and (max-width: 43.75em) { /*700↓*/

}

@media only screen and (max-width: 31.25em) { /*500↓*/
    .cont_class .card_class .cont_article table th {
        font-size: 1rem;
    }

    .cont_class .card_class .cont_article table td {
        font-size: 1rem;
    }

    .cont_siteIntro .cont_right .cont_environment .MyGridView {
        overflow-x: scroll;
        padding-bottom: 5px;
    }

        .cont_siteIntro .cont_right .cont_environment .MyGridView::-webkit-scrollbar {
            height: 8px;
        }

        .cont_siteIntro .cont_right .cont_environment .MyGridView th, .cont_siteIntro .cont_right .cont_environment .MyGridView td {
            font-size: 1rem;
            padding: 6px;
        }

    .cont_siteIntro .cont_right .MyGridView th {
        padding: 8px;
    }
}