/*@charset "utf-8";*/
/*CSS Info ======================================================================
File Name: Layout.css
Editor: Sophia
CreateDate:2010/12/06
Last Editor: Sharon
LastDate: 2020/06/03
Version: 3.3
---------------------------
 Table of Contents 
    DIV XHTML
    Free Style
    jQuery
    Responsive Design
=================================================================================*/

@import "Animation.css";

/*===============================================================================
                         Main Content
=================================================================================*/
a[href=""], a[href="#!"], a[href="#"] {
    cursor: default;
}


/*----------------- baseMain -----------------*/
/*#region baseMain */
.baseMain {
}

.globalCont {
}

.globalMap,
.regionMap {
    position: relative;
    padding: 20px;
}

/* .ie11 ie10plus.modernizr.js */
html:not(.ie11) .globalMap svg,
html:not(.ie11) .regionMap svg {
    /*width: 100%;
        height: 100%;*/
}

html.ie11 .globalMap svg,
html.ie11 .regionMap svg {
    /*width: 485.648;
        height: 606.333;*/
}

*::-ms-backdrop, .globalMap svg,
*::-ms-backdrop, .regionMap svg {
    /*width: 485.648;
        height: 606.333;*/
}

    .regionMap svg circle:hover {
        cursor: pointer;
    }

.regionMap .Heilight {
    -moz-animation: HeilightPoint 5s 1s ease-out forwards infinite;
    -webkit-animation: HeilightPoint 5s 1s ease-out forwards infinite;
    animation: HeilightPoint 5s 1s ease-out forwards infinite;
    transition: all 0.5s;
}

    .regionMap .Heilight .HeilightTrans {
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        -ms-transition: all 0.3s linear;
        transition: all 0.3s linear;
    }

        .regionMap .Heilight .HeilightTrans path {
            fill: #ff800e;
            stroke: #B55600;
            stroke-width: 1px;
        }

.legend {
    background-color: #fff;
    padding: 10px;
}

    .legend dt {
        display: none;
    }

    .legend dd span {
        display: inline-block;
        width: 15px;
        height: 30px;
        background-color: #ECEBEA;
        vertical-align: middle;
        margin-right: 10px;
    }

    .legend dd p {
        display: inline;
        font-size: .875rem;
    }

.globalMap .legend {
    float: left;
    margin-right: 30px;
    margin-top: 30px;
}

.globalMap .map,
.regionMap .map {
    text-align: center;
    margin-top: 30px;
}

.datetime {
    padding-top: 20px;
    clear: both;
}

.memoTxt {
    color: #555;
    font-size: 0.9125rem;
    line-height: 1.25rem;
}

    .memoTxt b {
        font-weight: bold;
        font-size: 0.9125rem;
        line-height: 1.5rem;
    }

.globalInfo {
    margin-top: 30px;
}

    .globalInfo h4 {
        text-indent: inherit;
        margin-left: 0;
        margin-bottom: 5px;
    }

        .globalInfo h4::before {
            content: none;
        }

    .globalInfo .monitorFreq {
        border: 3px solid #707070;
        position: relative;
        padding: 20px;
        border-radius: 3px;
        background-color: #fff;
    }

        .globalInfo .monitorFreq > img {
            position: absolute;
            bottom: 0;
            left: 10px;
        }

.monitorFreq-info {
    margin-left: 145px;
}

    .monitorFreq-info p {
        font-weight: bold;
        color: #D4343F;
        font-size: 1.5rem;
    }

.globalInfo .cardWrap {
    padding: 20px;
    background-color: #E5F5FF;
    border: 3px solid #67ADD8;
    border-radius: 3px;
    box-shadow: 0 3px 8px rgba(4, 13, 35, .13);
    margin-top: 20px;
}

    .globalInfo .cardWrap h4 {
        margin-bottom: 10px;
    }

.globalInfo .gpsPositioning {
    margin-top: 20px;
}

.globalInfo .cardWrap .Extendable {
    position: relative;
}

.Extendable a.btnExtend {
    position: absolute;
    right: 10px;
    top: Calc(-1.5rem - 10px - 0.5rem);
    cursor: pointer;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    -webkit-transition: all .2s;
    transition: all .2s;
    border: 1px solid #2C7F9B;
    display: inline-block;
    border-radius: 50px;
    padding: 1px 0.75rem;
    line-height: 24px;
    color: #2C7F9B;
}

    .Extendable a.btnExtend:hover, .Extendable a.btnExtend:focus {
        text-decoration: none;
        background-color: #2C7F9B;
        color: #fff;
    }

.js .ExtendMore {
    display: none;
}

.no-js .Extendable a.btnExtend {
    display: none;
}

.dataTag {
    font-size: 1rem;
    font-weight: bold;
    overflow-y: scroll;
    max-height: 200px;
}

    .dataTag::-webkit-scrollbar {
        width: 5px;
    }

    .dataTag::-webkit-scrollbar-thumb {
        background-color: #ccc;
    }

    .dataTag li {
        float: left;
        text-align: center;
        line-height: 40px;
        margin: 0 1.5%;
        margin-bottom: 10px;
        width: 30.333%;
        background-color: #fff;
        font-size: .938rem;
    }


.rankingTitle {
    padding: 10px 20px;
    overflow: hidden;
    background-color: #fff;
    /*cursor: pointer;*/
}

    .rankingTitle dt {
        float: left;
        margin-left: 20px;
        display: block;
        line-height: 2.25rem;
    }

        .rankingTitle dt span {
            font-weight: bold;
            font-size: 1.25rem;
        }

        .rankingTitle dt h5 {
            font-weight: bold;
            display: inline;
            padding-right: 20px;
        }

    .rankingTitle dd {
        float: right;
        margin-right: 20px;
        font-family: Arial;
        font-size: 1.875rem;
        font-weight: bold;
    }

        .rankingTitle dd span {
            padding-left: 10px;
            font-size: .875rem;
        }

.rankingInfo {
    padding: 20px;
    background-color: #fff;
    margin: 5px 0 10px 0;
}

    .rankingInfo table {
        width: 100%;
        text-align: center;
    }

        .rankingInfo table caption {
            font-size: .875rem;
            padding: 0 10px;
            margin: 0 0 0.25rem 0;
        }

        .rankingInfo table th, .rankingInfo table td {
            padding: 5px;
            border: 1px solid #fff;
            background-color: #eee;
            vertical-align: middle;
            font-size: .875rem;
        }

        .rankingInfo table thead th {
            border-bottom-width: 2px;
        }

.regionCont {
    background-color: #E7F7FE;
}

.regionMap .legend {
    float: right;
    margin-top: 20px;
}

.regionMap .theDate {
    margin-bottom: 20px;
}

    .regionMap .theDate select {
        margin-right: 10px;
        appearance: none;
        -ms-appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        padding: 0 40px 0 10px;
        border-color: #2C7F9B;
        background-image: url(../../images/icon-select.png);
        background-repeat: no-repeat;
        -ms-background-position: calc(100% - 10px) center;
        background-position: calc(100% - 10px) center;
    }

        .regionMap .theDate select:focus-visible {
            outline: 5px dotted #f09819;
        }

.regionInfo {
    background-color: rgba(255, 255, 255, .7);
    box-shadow: 0 3px 8px rgba(4, 13, 35, .13);
    padding: 20px;
    margin-top: 30px;
}

    .regionInfo .InfoTitle {
        font-weight: bold;
        margin-bottom: 10px;
        font-size: 1.25rem;
        line-height: 2.18rem;
    }

        .regionInfo .InfoTitle::before {
            content: "";
            border-left: 5px solid #0191B4;
            margin-right: 5px;
            line-height: 2.18rem;
        }

.alertInfo {
    background-color: #FFF;
    box-shadow: 0 3px 8px rgba(4, 13, 35, .13);
    padding: 20px 200px 20px 20px;
    margin-top: 30px;
    border: 3px solid #499494;
    position: relative;
    min-height: 110px;
}

    .alertInfo img {
        position: absolute;
        bottom: -2px;
        right: 0.25rem;
        height: 130px;
    }

    .alertInfo p {
        font-size: 1.25rem;
        font-weight: bold;
        line-height: 150%;
    }

        .alertInfo p span {
            color: #D4343F;
            font-size: 1.5rem;
            font-weight: bold;
        }


.stationInfo {
    /*overflow: hidden;*/
}

    .stationInfo .stationTitle {
        color: #D43900;
        margin-bottom: 5px;
        display: inline-block;
    }

    .stationInfo .stationLevel,
    .stationInfo .stationGPS,
    .stationInfo .stationAdd {
        background-color: #fff;
        padding: 10px;
    }

    .stationInfo .stationLevel {
        width: 30%;
        float: left;
        margin-bottom: 10px;
        position: relative;
    }

.btnOpen, a.btnOpen {
    background-color: #E74A56;
    border-radius: 50%;
    padding: 3px;
    position: absolute;
    right: 10px;
    top: 5px;
    cursor: pointer;
}

    .btnOpen:focus-visible {
        outline: 5px dotted #f09819;
    }

    .btnOpen i {
        color: #fff;
    }

.LevelInfo {
    position: absolute;
    left: 0;
    top: 73px;
    background-color: rgba(0, 0, 0, .9);
    z-index: 9;
    padding: 20px;
    width: 350px;
    display: none;
    color: #fff;
}

    .LevelInfo p {
        line-height: 1.75rem;
    }

    .LevelInfo ul {
        margin-left: 30px;
    }

        .LevelInfo ul li {
            line-height: 1.75rem;
            font-size: .875rem;
            list-style-type: disc;
        }

.btnOpen:focus ~ .LevelInfo {
    display: block;
}

.stationInfo .stationGPS {
    position: relative;
    width: calc(100% - 40%);
    margin-bottom: 10px;
    float: right;
}

    .stationInfo .stationGPS .btnGPS {
        position: absolute;
        left: 65px;
        bottom: 35px;
        transition: top 2s;
    }

.resultWrap h4 .btnGPS {
    margin-left: 0.5em;
}

.btnGPS:hover #aniTop, .btnGPS:focus #aniTop {
    -webkit-animation: slide-top .5s both;
    animation: slide-top .5s both;
}

.stationInfo .stationAdd {
    clear: both;
}

    .stationInfo .stationAdd p > span {
        font-weight: bold;
    }

.stationImg {
    margin: 20px 0;
}

    .stationImg img {
        width: 100%;
        height: auto;
    }

.stationValue {
    clear: both;
    position: relative;
}

    .stationValue .datetime {
        padding-top: 0;
        position: absolute;
        top: 0;
        right: 0;
    }

        .stationValue .datetime p {
            line-height: 2.125rem;
            font-size: .875rem;
        }

    .stationValue .dataCards {
        overflow: hidden;
    }

.dataCards .dataCardWrap {
    background-color: #fff;
    border-radius: 3px;
    border-left: 10px solid #B3B3B3;
    box-shadow: 0 3px 3px rgba(4, 13, 35, .1);
    padding: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    margin-right: 2%;
    float: left;
}

.stationValue .dataCards .dataCardWrap {
    width: 42%;
}

    .stationValue .dataCards .dataCardWrap:nth-child(2n) {
        margin-right: 0;
    }

.dataCards .dataCardWrap dt {
    padding-bottom: 5px;
}

.dataCards .dataCardWrap .cardUnit {
    font-size: .75rem;
}

.dataCards .dataCardWrap dd {
    text-align: right;
    margin-right: 20px;
    font-family: Arial;
    font-size: 1.875rem;
    font-weight: bold;
}

    .dataCards .dataCardWrap dd span {
        float: left;
        line-height: 2.25rem;
        padding-left: 10px;
        font-size: .875rem;
        font-family: "Century Gothic","Microsoft JhengHei","Apple LiGothic Medium","PMingLiU","sans-serif","serif";
    }

.dataCardsMore {
    display: none;
}

.dataCards .cardImp {
    background-color: #F1DDF8;
    border-left-color: #9365A8;
}

.stationValue .QueryComm .Lbtn {
    display: block;
    margin-top: 20px;
    cursor: pointer;
}

.chartCont {
    padding-top: 30px;
}

    .chartCont h3 {
        margin-bottom: 30px;
    }

        .chartCont h3 .small {
            font-size: 1.25rem;
        }

    .chartCont .QueryComm .Lbtn {
        margin-top: 70px;
        width: 300px;
    }


@media only screen and (max-width: 76.1875em) {
    .globalMap .map svg,
    .regionMap .map svg {
        width: 100%;
        height: auto;
    }

    .globalInfo .monitorFreq {
        padding: 10px;
    }

        .globalInfo .monitorFreq > img {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 130px;
        }

    .monitorFreq-info {
        margin-left: 120px;
    }

    .stationInfo .stationLevel,
    .stationInfo .stationGPS {
        float: none;
        width: auto;
    }


    .stationValue .dataCards .dataCardWrap {
        margin-right: 0;
        width: auto;
        float: none;
    }

    .LevelInfo {
        min-width: calc(100% - 40px);
    }
}

@media only screen and (max-width: 61em) {
    .baseMain .columns,
    .baseCont .columns {
        width: calc( 100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media only screen and (max-width: 47.9735em) {
    .globalMap, .regionMap {
        padding: 0;
    }

        .regionMap .theDate select {
            margin-right: 5px;
            padding-right: 30px;
            font-size: .875rem;
            margin-top: 0;
        }

    .monitorFreq-info p {
        font-size: 1.375rem;
    }

    .globalMap .legend {
        margin: 0;
    }

    .chartCont .QueryComm .Lbtn {
        margin-top: 30px;
    }

        .chartCont .QueryComm .Lbtn:last-child {
            margin-top: 10px;
            margin-left: 0;
        }
}

@media only screen and (max-width: 29.9375em) {
    .baseMain h3 {
        margin: 10px 0;
    }

    .globalInfo .monitorFreq > img {
        width: 100px;
    }

    .Extendable a.btnExtend {
        right: -10px;
        top: Calc(-1.25rem - 10px - 0.5rem);
        line-height: 1.5rem;
    }

    .monitorFreq-info {
        margin-left: 90px;
    }

        .monitorFreq-info p {
            font-size: 1.25rem;
        }

    .datetime {
        font-size: .875rem;
        padding-top: 10px;
    }

    .stationValue .datetime {
        float: none;
    }

    .dataTag {
        font-size: .875rem;
    }

        .dataTag li {
            width: 30.33%;
            line-height: 24px;
        }

    .rankingTitle dt {
        margin-left: 0;
    }

        .rankingTitle dt h5 {
            padding-right: 5px;
        }

        .rankingTitle dt span {
            font-size: 1.125rem;
        }

    .rankingTitle dd {
        margin-right: 0;
        font-size: 1.625rem;
    }

        .rankingTitle dd span {
            padding-left: 5px;
        }

    .regionMap .theDate select {
        margin-bottom: 0;
        margin-top: 10px;
        width: -webkit-fill-available;
        width: -moz-fill-available;
        width: -moz-available;
        width: fill-available;
    }

    .chartCont .QueryComm .Lbtn {
        width: -webkit-fill-available;
        width: -moz-fill-available;
        width: -moz-available;
        width: fill-available;
    }

    .stationInfo .stationLevel p,
    .stationInfo .stationGPS p,
    .stationInfo .stationAdd p {
        font-size: .875rem;
    }
}

/*#endregion */

/*----------------- RiverCont -----------------*/
/*#region RiverCont */
.RiverCont {
}

    .RiverCont .globalCont {
        background: url(../../images/River/bg-section01-right.svg), url(../../images/River/bg-section01-left.svg);
        background-repeat: no-repeat;
        -ms-background-position: right bottom, left bottom;
        background-position: right bottom, left bottom;
        /*-webkit-background-size: contain;
        background-size: contain;*/
    }

        .RiverCont .globalCont .legend dd .level_1 {
            background-color: #77D0F2;
        }

        .RiverCont .globalCont .legend dd .level_2 {
            background-color: #21AAE3;
        }

        .RiverCont .globalCont .legend dd .level_3 {
            background-color: #007EB2;
        }

        .RiverCont .globalCont .legend dd .level_4 {
            background-color: #02457A;
        }

    .RiverCont .globalInfo .riverBg {
        background-image: url(../../images/River/bg-coral.png);
        background-repeat: no-repeat;
        -ms-background-position: right bottom;
        background-position: right bottom;
    }

    .RiverCont .regionCont {
        background-image: url(../../images/River/bg-section02.svg);
        background-repeat: no-repeat;
        -ms-background-position: right top;
        background-position: right top;
    }

        .RiverCont .regionCont .legend dd span {
            height: 15px;
            border-radius: 50%;
            border: 1px solid #fff;
        }

        .RiverCont .regionCont .legend dd .default {
            background-color: #fff;
            border-color: #aaa;
        }

        .RiverCont .regionCont .legend dd .level_1 {
            background-color: #eeee6a;
            border-color: #C9C94C;
        }

        .RiverCont .regionCont .legend dd .level_2 {
            background-color: #A9E79C;
            border-color: #7FB474;
        }

        .RiverCont .regionCont .legend dd .level_3 {
            background-color: #36B0A4;
            border-color: #2D857D;
        }

        .RiverCont .regionCont .legend dd .level_4 {
            background-color: #005359;
            border-color: #113639;
        }

/*----- River SVG -----*/
.svgRiver,
.svgDam {
    width: auto;
    max-width: 575px;
    height: auto;
    max-height: 510px;
}

    .svgRiver #Key_Area .polygon_1,
    .svgDam #Key_Area .polygon_1 {
        stroke: #BCBCBC !important;
        stroke-width: 2;
        fill: #fff !important;
    }

    .svgRiver #Key_Area .polygon_2,
    .svgDam #Key_Area .polygon_2 {
        fill: #ECEBEA !important;
        stroke: #ECEBEA;
        stroke-width: 3;
        stroke-linejoin: bevel;
        stroke-linecap: round;
    }

    .svgRiver #SitePoint circle,
    .svgDam #SitePoint circle {
        cursor: pointer;
        stroke-linecap: round;
        fill: #ECEBEA;
        stroke: #AAA;
        stroke-width: 1;
        stroke-linecap: round;
        stroke-linejoin: bevel;
    }

/*#endregion */

/*----------------- ReservoirCont -----------------*/
/*#region ReservoirCont */
.ReservoirCont {
}

    .ReservoirCont .globalCont {
        background-image: url(../../images/Reservoir/bg-section01-left.svg), url(../../images/Reservoir/bg-section01-right.svg);
        background-repeat: no-repeat;
        -ms-background-position: left bottom, right bottom;
        background-position: left bottom, right bottom;
    }

        .ReservoirCont .globalCont .legend dd .level_1,
        .ReservoirCont .regionCont .legend dd .level_1 {
            background-color: #BDDB84;
        }

        .ReservoirCont .globalCont .legend dd .level_2,
        .ReservoirCont .regionCont .legend dd .level_2 {
            background-color: #D3DD18;
        }

        .ReservoirCont .globalCont .legend dd .level_3,
        .ReservoirCont .regionCont .legend dd .level_3 {
            background-color: #74B24E;
        }

    .ReservoirCont .globalInfo .monitorFreq-info p::after {
        /*content: '重點水庫為每月監測一次';*/ /*＊重點水庫為每月監測一次*/ /*\4E3B\8981\9ede\6c34\5eab\70ba\6bcf\6708\76e3\6e2c\4e00\6b21*/
        color: #999;
        font-size: .875rem;
        display: block;
    }

    .ReservoirCont .globalInfo .cardWrap {
        position: relative;
    }

        .ReservoirCont .globalInfo .cardWrap .btnOpen {
            right: 25px;
            top: 27px;
        }

        .ReservoirCont .globalInfo .cardWrap .LevelInfo {
            top: 70px;
            left: inherit;
            right: 20px;
        }

    .ReservoirCont .rankingInfo h6 {
        font-weight: bold;
        color: #007095;
        line-height: 1.75rem;
    }

    .ReservoirCont .regionCont {
        background-color: #BFE6E6;
    }
/*.ReservoirCont .dataCards .cardImp dd::after {
        content: '';
        width: 30px;
        display: inline-block;
    }*/
.reservoirStorage {
    margin-top: 20px;
    padding: 20px;
    overflow: hidden;
}

    .reservoirStorage figure {
        position: relative;
        float: left;
    }

    .reservoirStorage figcaption {
        position: absolute;
        top: 63px;
        left: 90px;
        margin-top: -15px;
        margin-left: -34px;
        text-align: center;
        z-index: 19;
    }

        .reservoirStorage figcaption span {
            font-weight: bold;
            font-size: 1.5rem;
            font-family: Arial;
            color: #fff;
        }

        .reservoirStorage figcaption h6 {
            font-weight: bold;
            color: #fff;
            margin-top: 5px;
        }

    .reservoirStorage .reservoirWrap {
        width: 180px;
        height: 123px;
        position: relative;
        background-image: url(../../images/Reservoir/bg-reservoirStorage.png);
        background-repeat: no-repeat;
        background-position: center bottom;
    }

        .reservoirStorage .reservoirWrap::before {
            content: '';
            background: url(../../images/Reservoir/img-reservoirStorage.png) no-repeat;
            position: absolute;
            top: 0;
            letter-spacing: 0;
            z-index: 9;
            width: 180px;
            height: 123px;
        }

        .reservoirStorage .reservoirWrap .waterBox {
            position: absolute;
            left: 15px;
            bottom: 0;
            width: 150px;
            height: 93px;
            overflow: hidden;
        }

            .reservoirStorage .reservoirWrap .waterBox .waveShape {
                -moz-animation: waveAction 3s linear infinite;
                -webkit-animation: waveAction 3s linear infinite;
                animation: waveAction 3s linear infinite;
                transition: all 3s;
            }

    .reservoirStorage table {
        float: left;
        margin-left: 15px;
        margin-top: 10px;
    }

        .reservoirStorage table th {
            text-align: right;
            padding: 5px;
        }

        .reservoirStorage table td {
            padding: 5px;
            font-size: .875rem;
        }

@media only screen and (min-width: 76.25em) and (max-width: 86.1875em) {
    .reservoirStorage table {
        margin-left: 8px;
    }
}

@media only screen and (min-width: 61.0625em) and (max-width: 76.1875em) {
    .reservoirStorage figure,
    .reservoirStorage table {
        float: none;
    }

    .reservoirStorage figcaption {
        margin-left: 0;
        left: 0;
        right: 0;
    }

    .reservoirStorage .reservoirWrap {
        margin: 0 auto;
    }

    .reservoirStorage table {
        margin: 0 auto;
        margin-top: 20px;
    }
}

@media only screen and (max-width: 47.9735em) {
    .ReservoirCont .globalInfo .cardWrap .btnOpen {
        top: 20px;
    }

    .ReservoirCont .globalInfo .cardWrap .LevelInfo {
        left: 0;
    }

    .reservoirStorage {
        padding: 10px;
    }

        .reservoirStorage figure,
        .reservoirStorage table {
            float: none;
        }

        .reservoirStorage figcaption {
            margin-left: 0;
            left: 0;
            right: 0;
        }

        .reservoirStorage .reservoirWrap {
            margin: 0 auto;
        }

        .reservoirStorage table {
            margin: 0 auto;
            margin-top: 20px;
        }
}

/*#endregion */

/*----------------- Groundwater -----------------*/
/*#region GroundwaterCont */
.GroundwaterCont {
}

    .GroundwaterCont .globalCont {
        background-image: url(../../images/Groundwater/bg-section01.svg);
        background-repeat: no-repeat;
        -ms-background-position: right bottom;
        background-position: right bottom;
        -webkit-background-size: 100% auto;
        background-size: 100% auto;
    }

        .GroundwaterCont .globalCont .gpsPositioning h4 {
            color: #02457A;
        }

            .GroundwaterCont .globalCont .gpsPositioning h4::before {
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                content: "\f276";
                border-left: none;
                font-size: 2.5rem;
                color: #E74A56;
                margin-right: 10px;
            }

.gpsPositioningWrap {
    padding: 20px;
    background-color: #fff;
    border: 3px solid #707070;
    border-radius: 3px;
    margin-bottom: 20px;
}

    .gpsPositioningWrap h5 {
        font-weight: bold;
        line-height: 2.18rem;
        margin-bottom: 10px;
    }

    .gpsPositioningWrap input[type="text"] {
        padding-left: 10px;
        width: calc(100% - 14px);
    }

        .gpsPositioningWrap input[type="text"]:focus {
            border: 1px solid #F8D90F;
        }

    .gpsPositioningWrap .QueryComm {
        margin-top: 20px;
    }

        .gpsPositioningWrap .QueryComm .btn {
            height: 2.813rem;
            min-width: 48%;
        }

            .gpsPositioningWrap .QueryComm .btn + .btn {
                margin-left: 2.4%;
            }

.gpsPositioning-info {
    margin-top: 20px;
}

.gpsPositioning-result {
    padding: 20px;
    background-color: #f2f2f2;
    margin-bottom: 10px;
}

    .gpsPositioning-result h6 {
        font-weight: bold;
        line-height: 1.75rem;
        color: #02457A;
    }

.GroundwaterCont .globalCont .rankingWrap + .rankingWrap,
.SeasCont .globalCont .rankingWrap + .rankingWrap,
.BeachCont .globalCont .rankingWrap + .rankingWrap {
    margin-top: 10px;
}

.GroundwaterCont .regionCont {
    background-color: #BCDBEE;
    background-image: url(../../images/Groundwater/bg-section02.svg);
    background-repeat: no-repeat;
    -ms-background-position: right top;
    background-position: right top;
    -webkit-background-size: 70% auto;
    background-size: 70% auto;
}

    .GroundwaterCont .regionCont .legend dd .level_1 {
        background-color: #678FBC;
    }

    .GroundwaterCont .regionCont .legend dd .level_2 {
        background-color: #02457A;
    }

    .GroundwaterCont .regionCont .stationInfo .stationLevel {
        width: 40%;
    }

    .GroundwaterCont .regionCont .stationInfo .stationGPS {
        width: calc(100% - 50%);
    }

@media only screen and (max-width: 76.1875em) {
    .GroundwaterCont .regionCont .stationInfo .stationLevel,
    .GroundwaterCont .regionCont .stationInfo .stationGPS {
        float: none;
        width: auto;
    }
}

@media only screen and (max-width: 29.9375em) {
    .gpsPositioningWrap .QueryComm .btn {
        min-width: 44%;
    }

    .gpsPositioning-result {
        padding: 10px;
    }
}
/*#endregion */

/*----------------- OCACont(潞拢脫貌隆垄潞拢啪漏鹿虏脥卢藴脫脢陆) -----------------*/
/*#region OCACont */
.OCACont {
}

    .OCACont .globalInfo {
    }

        .OCACont .globalInfo .cardWrap {
            position: relative;
        }

            .OCACont .globalInfo .cardWrap .btnOpen {
                right: 25px;
                top: 27px;
            }

            .OCACont .globalInfo .cardWrap .LevelInfo {
                top: 70px;
                left: inherit;
                right: 20px;
            }

    .OCACont .regionCont {
        background-color: #F6F6F6;
    }

        .OCACont .regionCont .regionMap {
            margin-left: 20px;
            margin-right: 20px;
        }

        .OCACont .regionCont .regionInfo {
            background-color: transparent;
            box-shadow: none;
            margin-top: 0;
            padding-top: 0;
        }

        .OCACont .regionCont .stationImg {
            margin-top: 0;
            margin-bottom: 0;
        }

        .OCACont .regionCont .stationValue {
            padding-top: 20px;
        }

            .OCACont .regionCont .stationValue .dataCards .dataCardWrap {
                width: 27.8%;
                margin-right: 2%;
            }

                .OCACont .regionCont .stationValue .dataCards .dataCardWrap:nth-child(3n) {
                    margin-right: 0;
                }

@media only screen and (min-width: 76.25em) and (max-width: 86.1875em) {
    .OCACont .regionCont .stationValue .dataCards .dataCardWrap {
        width: 27.2%;
    }
}

@media only screen and (max-width: 76.1875em) {
    .OCACont .regionCont .stationValue .dataCards .dataCardWrap {
        float: left;
        width: 43.2%;
    }

        .OCACont .regionCont .stationValue .dataCards .dataCardWrap:nth-child(3n) {
            margin-right: 2%;
        }

        .OCACont .regionCont .stationValue .dataCards .dataCardWrap:nth-child(2n) {
            margin-right: 0;
        }
}

@media only screen and (max-width: 61em) {
    .OCACont .regionCont .stationValue .dataCards .dataCardWrap {
        float: none;
        width: calc(100% - 40px);
        margin-right: 0;
    }
}
/*#endregion */

/*----------------- SeasCont -----------------*/
/*#region SeasCont */
.SeasCont {
}

    .SeasCont .globalCont {
    }

        .SeasCont .globalCont .legend dd .level_1 {
            background-color: #003F8F;
        }

        .SeasCont .globalCont .legend dd .level_2 {
            background-color: #1598E6;
        }

    .SeasCont .progressWrap {
        padding: 10px;
    }

        .SeasCont .progressWrap h5 {
            margin-bottom: 0;
        }

    .SeasCont .globalMap figcaption {
        display: none;
    }
/*#endregion */
/*----------------- BeachCont -----------------*/
/*#region BeachCont */
.BeachCont {
}

    .BeachCont .globalMap .legend dd + dd {
        margin-top: 10px;
    }

    .BeachCont .globalInfo .monitorFreq-info p::after {
        content: "\ff0a\6bcf\5e74\0020\0036\0020\007e\0020\0038\0020\6708"; /*＊每年 6 ~ 8 月*/
        color: rgb(153, 153, 153);
        font-size: 0.875rem;
        display: block;
    }
/*#endregion */



/*----------------- baseCont -----------------*/
/*#region baseCont */
.baseCont {
}

    .baseCont h3 {
        /*text-align: center;*/
    }

    .baseCont .MyPager {
        font-size: 1rem;
        color: #535353;
    }

        .baseCont .MyPager span {
            color: #348550;
        }

    .baseCont .QueryComm .btn,
    .baseCont .QueryComm .Lbtn {
        margin-top: 30px;
    }

    .baseCont .asideMenu {
        margin-top: 20px;
    }

        .baseCont .asideMenu li + li {
            margin-top: 10px;
        }

        .baseCont .asideMenu li a {
            padding: 18px 20px;
            font-size: 1.25rem;
            display: block;
            color: #333;
            background-color: #ECEBEA;
            border-radius: 3px;
        }

            .baseCont .asideMenu li a:hover,
            .baseCont .asideMenu li a:focus,
            .baseCont .asideMenu .on {
                background-color: #348550;
                color: #fff;
                font-weight: bold;
                text-decoration: none;
            }

            .baseCont .asideMenu li a:focus-visible {
                outline: 5px dotted #f09819;
            }

    .baseCont .NewsList {
    }

        .baseCont .NewsList li {
            border-bottom: 1px dashed #ccc;
            padding: 20px;
        }

            .baseCont .NewsList li .PublishDate {
                color: #da3a00;
                font-family: Arial;
            }

            .baseCont .NewsList li .Subject {
                font-size: 1.375rem;
                display: block;
                line-height: 1.75rem;
                margin: 10px 0;
                color: #333;
                font-weight: bold;
            }

                .baseCont .NewsList li .Subject:hover,
                .baseCont .NewsList li .Subject:focus {
                    text-decoration: underline;
                }

            .baseCont .NewsList li p {
                color: #535353;
                line-height: 1.75rem;
                font-size: 1.125rem;
            }

@media only screen and (max-width: 29.9375em) {
    .baseCont h3 {
        text-align: left;
        margin-left: 20px;
        margin-right: 20px;
    }
}
/*#endregion */

/*----------------- Encyclopedia -----------------*/
/*#region Encyclopedia */
.EncyclopediaCont {
}

.articleTop {
}

.articleWrap {
    margin: 0 auto;
}

    .articleWrap .cardWrap {
        padding: 20px;
        background-color: #fff;
        border: 1px solid #A7A7A7;
        overflow: hidden;
    }

.cardWrap img {
    width: 100%;
    height: auto;
    margin-bottom: 20px
}

.cardWrap .cardInfo .articleTitle {
    font-size: 1.25rem;
    line-height: 2.1rem;
    color: #333;
    font-weight: bold;
    display: block;
}

    .cardWrap .cardInfo .articleTitle:hover,
    .cardWrap .cardInfo .articleTitle:focus {
        text-decoration: underline;
    }

.cardWrap .cardInfo p {
    line-height: 1.875rem;
    font-size: 1.125rem;
}

.articleTop .cardWrap {
    background-color: #F8FDFF;
    border-color: #0191B4;
}

    .articleTop .cardWrap img {
        float: left;
        max-width: 30%;
        margin: 0;
    }

    .articleTop .cardWrap .cardInfo {
        float: left;
        width: 65%;
        padding: 20px;
    }

.articleCont {
    background-color: #fafafa;
    padding-top: 10px;
}

    .articleCont .articleWrap .cardWrap {
        margin-bottom: 20px;
        min-height: 140px;
    }

.EncyclopediaCont .PublishDate {
    font-weight: bold;
    color: #58B378;
    font-family: Arial;
}

.EncyclopediaCont .QueryComm .Lbtn-border {
    margin-bottom: 0;
    margin-top: 10px;
    background-color: #F6F6F6;
}

    .EncyclopediaCont .QueryComm .Lbtn-border:hover,
    .EncyclopediaCont .QueryComm .Lbtn-border:focus {
        background-color: #DC143C;
    }

.PediaWrap {
}

    .PediaWrap .PageTitle {
        text-align: center;
    }

        .PediaWrap .PageTitle h2 {
            font-size: 1.625rem;
            padding-left: 0;
        }

            .PediaWrap .PageTitle h2:after {
                content: none;
            }

        .PediaWrap .PageTitle .PediaTitle {
            font-size: 2rem;
            margin: 10px 0;
        }

    .PediaWrap .PediaInfo {
        margin: 10px 75px 30px 75px;
    }

        .PediaWrap .PediaInfo li {
            display: inline-block;
            padding-right: 20px;
        }

        .PediaWrap .PediaInfo i {
            color: #aaa;
            padding-right: 10px;
        }

        .PediaWrap .PediaInfo .articlWrap {
            margin-top: 0;
            font-weight: normal;
        }

            .PediaWrap .PediaInfo .articlWrap .articlTag {
                font-weight: bold;
            }

    .PediaWrap .PediaCont {
        max-width: 1010px;
        margin: 0 auto;
    }

        .PediaWrap .PediaCont img {
            width: 100%;
            height: auto;
            margin-bottom: 20px;
        }

        .PediaWrap .PediaCont h4 {
            margin-left: 0;
            text-indent: initial;
        }

            .PediaWrap .PediaCont h4::before {
                content: none;
            }

        /*for 公式*/
        .PediaWrap .PediaCont .myFormula {
            text-align: center;
        }

            .PediaWrap .PediaCont .myFormula img {
                max-width: 600px;
                margin: 1rem auto 2rem auto;
            }

            .PediaWrap .PediaCont .myFormula figcaption {
                display: none;
            }

    .PediaWrap .Pagination {
        margin: 30px 75px;
        text-align: initial;
    }

        .PediaWrap .Pagination ul {
            overflow: hidden;
        }

            .PediaWrap .Pagination ul li {
                display: inline;
                float: left;
                width: 50%;
            }

                .PediaWrap .Pagination ul li:last-child {
                    float: right;
                }

                .PediaWrap .Pagination ul li a {
                    color: #E32A39;
                }

                    .PediaWrap .Pagination ul li a:hover,
                    .PediaWrap .Pagination ul li a:focus {
                        color: #B82A35;
                        text-decoration: underline;
                    }

                .PediaWrap .Pagination ul li i {
                    padding-right: 10px;
                }

    .PediaWrap .Reading {
        margin: 0 75px;
        background: #F6F6F6;
    }

        .PediaWrap .Reading h4 {
            font-weight: bold;
            margin-bottom: 20px;
            font-size: 1.25rem;
        }

        .PediaWrap .Reading h6 i {
            padding-right: 10px;
            color: #aaa;
        }

        .PediaWrap .Reading .itemList a {
            color: #327F4D;
        }

            .PediaWrap .Reading .itemList a:focus {
                text-decoration: underline;
            }

@media only screen and (max-width: 86.1875em) {
    .PediaWrap .PediaInfo, .PediaWrap .Pagination {
        margin-left: 0;
        margin-right: 0;
        padding: 0 20px;
    }

    .PediaWrap .Reading {
        margin: 0 20px;
    }

    .PediaWrap .PediaCont {
        max-width: initial;
        padding: 0 20px;
    }

    .articleCont .articleWrap .cardWrap {
        min-height: 220px;
    }
}

@media only screen and (max-width: 61em) {
    .articleTop .cardWrap img {
        float: none;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .articleTop .cardWrap .cardInfo {
        width: 100%;
        float: none;
        padding: 0;
    }

    .articleCont .articleWrap .cardWrap {
        min-height: auto;
    }
}

@media only screen and (max-width: 47.9735em) {
    .PediaWrap .PageTitle .PediaTitle {
        font-size: 1.875rem;
    }
}

@media only screen and (max-width: 29.9375em) {
    .PediaWrap .PageTitle h2 {
        font-size: 1.375rem;
    }

    .PediaWrap .PageTitle .PediaTitle {
        font-size: 1.625rem;
    }

    .PediaWrap .PediaInfo li {
        padding-right: 0;
        padding-bottom: 10px;
    }
}
/*#endregion */

/*----------------- UnitdataCont -----------------*/
/*#region UnitdataCont */
.UnitdataCont {
}

    .UnitdataCont .resultWrap .dataCards .dataCardWrap {
        width: 16%;
        margin-bottom: 20px;
    }

        .UnitdataCont .resultWrap .dataCards .dataCardWrap:nth-child(5n) {
            margin-right: 0;
        }

@media only screen and (max-width: 86.1875em) {
    .UnitdataCont .resultWrap .dataCards .dataCardWrap {
        width: 20%;
    }

        .UnitdataCont .resultWrap .dataCards .dataCardWrap:nth-child(4n) {
            margin-right: 0;
        }

        .UnitdataCont .resultWrap .dataCards .dataCardWrap:nth-child(5n) {
            margin-right: 2%;
        }
}

@media only screen and (max-width: 61.1875em) {
    .UnitdataCont .resultWrap .dataCards .dataCardWrap {
        width: 27%;
    }

        .UnitdataCont .resultWrap .dataCards .dataCardWrap:nth-child(3n) {
            margin-right: 0;
        }

        .UnitdataCont .resultWrap .dataCards .dataCardWrap:nth-child(4n),
        .UnitdataCont .resultWrap .dataCards .dataCardWrap:nth-child(5n) {
            margin-right: 2%;
        }
}

@media only screen and (max-width: 47.9735em) {
    .UnitdataCont .resultWrap .dataCards .dataCardWrap {
        margin-right: 0;
        width: auto;
        float: none;
    }

        .UnitdataCont .resultWrap .dataCards .dataCardWrap:nth-child(3n),
        .UnitdataCont .resultWrap .dataCards .dataCardWrap:nth-child(4n),
        .UnitdataCont .resultWrap .dataCards .dataCardWrap:nth-child(5n) {
            margin-right: 0;
        }
}
/*#endregion */
/*----------------- DataLinksCont -----------------*/
/*#region DataLinksCont */
.DataLinksCont {
}

    .DataLinksCont .ServiceCont {
        overflow: hidden;
        padding-top: 40px;
    }

.serviceWrap {
}

    .serviceWrap li {
    }

        .serviceWrap li a {
            padding: 30px 25px;
            float: left;
            width: 20%;
            text-align: center;
            background-color: #F6F6F6;
            border: 1px solid #A7A7A7;
            border-right: none;
            transition: all .2s ease-in-out;
        }

        .serviceWrap li:last-child a {
            border-right: 1px solid #A7A7A7;
        }

        .serviceWrap li p.serviceTitle {
            margin-bottom: 0;
            color: #333;
            font-size: 1.5rem;
            font-weight: bold;
            line-height: 2.5rem;
        }

        .serviceWrap li p {
            font-size: 1.125rem;
            color: #535353;
            text-align: center;
        }

        .serviceWrap li a:hover,
        .serviceWrap li a:focus {
            text-decoration: none;
            background-color: #eee;
            transition: all .2s ease-in-out;
        }

        .serviceWrap li a:focus {
            border: 2px dashed #ff800e;
            transform: translateY(-1px);
        }

@media only screen and (max-width: 76.1875em) {
    .serviceWrap li a {
        width: 19%;
        padding: 25px;
    }

    .serviceWrap li h4 {
        font-size: 1.375rem;
    }

    .serviceWrap li p {
        font-size: .875rem;
        line-height: unset;
    }
}

@media only screen and (max-width: 61em) {
    .serviceWrap li a {
        padding: 10px;
        width: 22%;
    }

    .serviceWrap li p {
        font-size: .75rem;
    }

    .serviceWrap li img {
        max-width: 50%;
    }
}

@media only screen and (max-width: 47.9735em) {
    .serviceWrap li a {
        width: 45%;
        border-right: 1px solid #A7A7A7;
    }

    .serviceWrap li:nth-child(1) a,
    .serviceWrap li:nth-child(3) a {
        border-right: none;
    }

    .serviceWrap li:nth-child(1) a,
    .serviceWrap li:nth-child(2) a {
        border-bottom: none;
    }
}

@media only screen and (max-width: 29.9735em) {
    .serviceWrap li a {
        width: 43%;
    }
}

.DataLinksCont .MonitorCon {
}

.Datatable {
    width: 80%;
    margin-bottom: 10px;
}

    .Datatable th {
        padding: 15px 10px;
        vertical-align: middle;
        text-align: right;
        /*width: 5%;*/
        font-size: 1rem;
    }

    .Datatable tr:first-child th {
        text-align: center;
    }

    .Datatable td {
        border: 1px solid #cbecd5;
        width: 6.8%;
    }

        .Datatable td.dataColor {
            color: #91D4A6;
            background-color: #91D4A6;
            text-align: center;
            vertical-align: middle;
            /*width: 6%;*/
        }

.DataLinksCont .ExistColor {
    color: #91D4A6;
}

.DataLinksCont .MonitorCon .Alert {
    margin-right: 20%;
    text-align: right;
}

@media only screen and (max-width: 76.1875em) {
    .Datatable {
        width: 100%;
    }

    .DataLinksCont .MonitorCon .Alert {
        margin-right: 0;
    }
}

@media only screen and (max-width: 61em) {
    .Datatable th {
        font-size: .875rem;
    }
}

@media only screen and (max-width: 47.9735em) {
    .scrollTable {
        overflow-x: auto;
    }

        .scrollTable .Datatable {
            white-space: nowrap;
        }

        .scrollTable::-webkit-scrollbar {
            height: 5px;
        }

        .scrollTable::-webkit-scrollbar-thumb {
            background-color: #ccc;
        }

    .DataLinksCont .MonitorCon .Alert {
        margin-top: 10PX;
        text-align: left;
    }
}

.DataLinksCont .NewDataCont {
}

    .DataLinksCont .NewDataCont .Mytable {
    }

        .DataLinksCont .NewDataCont .Mytable thead th span {
            display: block;
            font-size: .875rem;
        }

        .DataLinksCont .NewDataCont .Mytable th {
            font-size: 1rem;
            width: auto;
        }

            .DataLinksCont .NewDataCont .Mytable th.NoApprove {
                overflow: hidden;
                font-size: 0rem;
                padding: 0px;
            }

            .DataLinksCont .NewDataCont .Mytable th a {
                color: #753c09;
            }

                .DataLinksCont .NewDataCont .Mytable th a:hover {
                    color: #00517b;
                }

                .DataLinksCont .NewDataCont .Mytable th a:focus {
                    outline: 2px dashed #ed7337;
                    padding: 1px .5em;
                }

            .DataLinksCont .NewDataCont .Mytable th .Annotation {
                color: #35464e;
                font-size: .75rem;
                margin-left: 0.25em;
            }

            .DataLinksCont .NewDataCont .Mytable th.secThead {
                font-size: .875rem;
                padding: 0.5rem 5px;
            }

        .DataLinksCont .NewDataCont .Mytable tr.dataMore {
            display: none;
        }

        .DataLinksCont .NewDataCont .Mytable tr.show {
            display: table-row;
        }

        .DataLinksCont .NewDataCont .Mytable tr.dataMore td {
            padding: 0;
        }

        .DataLinksCont .NewDataCont .Mytable td {
            text-align: center;
        }

            .DataLinksCont .NewDataCont .Mytable td.Decoration {
                padding: 0;
            }

            .DataLinksCont .NewDataCont .Mytable td.NoApprove {
                font-size: 0.3125rem;
                background-color: #ed7337;
                width: 5px;
                color: #ed7337;
            }

.DataLinksCont .NoApproveColor {
    color: #ed7337;
}

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

.DataLinksCont .NewDataCont .OpenDataMore {
    cursor: pointer;
    text-align: left;
}

.DataLinksCont .NewDataCont .Mytable th[headers~=Station_Name] {
    text-align: left;
}

.DataLinksCont .NewDataCont .itemList li {
    margin-bottom: .75em;
}





.imitateTable {
    display: table;
    width: 100%;
    border: 2px solid #D7CCB7;
}

.imitateTable-tr {
    display: table-row;
}

.imitateTable-th,
.imitateTable-td {
    display: table-cell;
    text-align: center;
    font-size: .75rem;
    padding: 10px;
}

.imitateTable-th {
    background-color: #ECD5A4;
    border: 1px solid #fff;
    border-bottom-width: 2px;
    color: #000;
}

.imitateTable-tr:first-child {
    border: 1px solid #D7CCB7;
}

.imitateTable-th .cardUnit {
    display: block;
    font-size: .625rem;
}

.imitateTable-td {
    background-color: #fff;
    border: 1px solid #D7CCB7;
}

@media only screen and (min-width: 61.0625em) and (max-width: 76.1875em) {
    .DataLinksCont .NewDataCont .Mytable thead th:first-child {
        min-width: 5.5em;
    }
}

@media only screen and (max-width: 61em) {
    .DataLinksCont .NewDataCont .Mytable th,
    .DataLinksCont .NewDataCont .Mytable td {
        font-size: .875rem;
    }

    .DataLinksCont .NewDataCont .Mytable thead th:first-child {
        min-width: 5.5em;
    }
}

@media only screen and (max-width: 47.9735em) {
    .DataLinksCont .NewDataCont .Mytable {
        white-space: nowrap;
    }
}

/*.NewDataCont .smCardGroup {
                overflow: hidden;
            }
                .NewDataCont .smCardGroup .dataCardWrap {
                    border-radius: 3px;
                    float: left;
                    padding: 8px;
                    border: 1px solid #D0E6A5;
                    background-color: #E7F2D0;
                    text-align: center;
                    margin-right: .625em;
                    margin-bottom: .625em;
                    min-width: 70px;
                }
                .NewDataCont .smCardGroup .dataCardWrap dt {
                    font-size: .75rem;
                    margin-bottom: 3px;
                }
                .NewDataCont .smCardGroup .dataCardWrap dt .cardUnit {
                    font-size: .625rem;
                    display: block;
                }
                .NewDataCont .smCardGroup .dataCardWrap dd {
                    font-weight: bold;
                } */

.DataLinksCont .Theme {
    background-color: #C4E1BA;
    overflow: hidden;
}

    .DataLinksCont .Theme h3,
    .DataLinksCont .Knowhow h3 {
        margin-bottom: 30px;
    }

    .DataLinksCont .Theme li {
        float: left;
        width: calc(100% / 3);
        text-align: center;
    }

.Theme .ThemeImg {
    display: inline-block;
    background-color: #fff;
    padding: 26px 32px;
    border-radius: 50%;
    margin-bottom: 20px;
    box-shadow: 0px 3px 6px rgba(9, 28, 64, .16);
}

    .Theme .ThemeImg img {
        padding-top: 6px;
        max-width: 100%;
        height: auto;
    }

    .Theme .ThemeImg p {
        font-size: 1.25rem;
        color: #333;
        text-align: center;
        padding-top: 6px;
    }

.Theme .ThemeBtn {
}

    .Theme .ThemeBtn .Lbtn {
        box-shadow: 0px 3px 4px rgba(9, 28, 64, .16);
    }

        .Theme .ThemeBtn .Lbtn:hover {
            color: #fff;
        }

    .Theme .ThemeBtn .Lbtn-sm {
        padding-left: 8px;
        padding-right: 8px;
    }

@media only screen and (max-width: 76.1875em) {
}

@media only screen and (max-width: 61em) {
    .DataLinksCont .Theme li {
        width: 32%;
        float: none;
        display: inline-block;
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 47.9735em) {
    .DataLinksCont .Theme li {
        width: 49%;
    }
}

@media only screen and (max-width: 29.9735em) {
    .DataLinksCont .Theme h3,
    .DataLinksCont .Knowhow h3 {
        margin-top: 30px;
    }

    .DataLinksCont .Theme li {
        width: 100%;
    }
}

.DataLinksCont .Knowhow {
    text-align: center;
}

    .DataLinksCont .Knowhow ul {
        overflow: hidden;
    }

.Knowhow .KnowhowWrap {
    float: left;
    width: 25%;
}

    .Knowhow .KnowhowWrap a {
        display: inline-block;
    }

    .Knowhow .KnowhowWrap .KnowhowImg {
        display: inline-block;
        background-color: #327A4B;
        padding: 38px 33px;
        border-radius: 50%;
        margin-bottom: 20px;
        box-shadow: 0px 3px 6px rgba(9, 28, 64, .16);
        transition: all .3s ease-in-out;
    }

    .Knowhow .KnowhowWrap p {
        font-weight: bold;
        font-size: 1.375rem;
        color: #333;
    }

    .Knowhow .KnowhowWrap:hover p,
    .Knowhow .KnowhowWrap:focus p,
    .Knowhow .KnowhowWrap:focus {
        color: #da3a00;
    }

        .Knowhow .KnowhowWrap:hover .KnowhowImg,
        .Knowhow .KnowhowWrap:focus .KnowhowImg {
            box-shadow: 0 10px 10px rgba(9, 28, 64, .25);
            transition: all .3s ease-in-out;
            background-color: #27603a;
        }

@media only screen and (max-width: 47.9735em) {
    .Knowhow .KnowhowWrap {
        width: 50%;
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 29.9735em) {
    .Knowhow .KnowhowWrap {
        width: 100%;
    }
}

/*#endregion */

/*----------------- SitemapCont -----------------*/
/*#region SitemapCont */
.web-map {
    margin-top: 1rem;
}

    .web-map > li {
        margin-bottom: 1.5rem;
    }

    .web-map li .web-map-first {
        padding: 0.5rem 1rem;
        display: block;
        font-weight: 700;
        font-size: 1.25rem;
        background-color: #0079b8;
        color: #fff;
        border-radius: 0.125rem;
        border: 2px solid #0079b8;
    }

        .web-map li .web-map-first:focus {
            color: #F7CA18;
            border: 2px dashed #F7CA18;
        }

    .web-map .web-map-second {
        padding: 0.5rem 0;
    }

        .web-map .web-map-second ol {
            padding-bottom: 0;
        }

        .web-map .web-map-second li {
            margin-bottom: 0;
        }

            .web-map .web-map-second li a {
                padding: 0.5rem;
                display: block;
                font-size: 1.125rem;
                color: #333;
                border: 2px solid #FFF;
            }

                .web-map .web-map-second li a:focus {
                    border: 2px dashed #F7CA18;
                }

@media only screen and (max-width: 29.9735em) {
    .txtCont ol.web-map {
        padding-left: 0;
    }
}
/*#endregion */

/*===============================================================================
                         Error Page
=================================================================================*/
/*#region errorPage */
#Wrap.errorPage {
    background-image: url(../../images/ErrorBG.svg);
    background-size: 100vw auto;
    background-position: center top;
    background-repeat: no-repeat;
}

    #Wrap.errorPage #Header {
        background: none;
    }

#ErrorArea {
    text-align: center;
}

.ErrorCont {
    min-height: calc(100vh - 330px);
    padding: 2rem 2rem 2rem 400px;
    margin: 2rem auto;
    border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    background-color: #FFF;
    background-image: url(../../images/Error.svg);
    background-repeat: no-repeat;
    background-position: left+3rem bottom;
    background-size: auto 450px;
    box-shadow: 0 0 2rem rgba(30,30,30,0.25), 0 0 2rem rgba(30,30,30,0.25);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

    .ErrorCont p {
        font-size: 1.5rem;
    }

        .ErrorCont p.txtLarge {
            font-size: 3rem;
            font-weight: bold;
            line-height: 5rem;
            margin-bottom: 2rem;
        }

    .ErrorCont ul {
        width: 320px;
        margin: 3rem auto 0 auto;
    }

        .ErrorCont ul li {
            float: left;
            width: 50%;
        }

            .ErrorCont ul li a {
                display: block;
                padding: 25px 0;
            }

                .ErrorCont ul li a .ConnectionIcon {
                    display: inline-block;
                    padding: 24px 20px;
                    background-color: #0B8BCE;
                    border-radius: 50%;
                }

                .ErrorCont ul li a:hover .ConnectionIcon,
                .ErrorCont ul li a:focus .ConnectionIcon {
                    background-color: #E8441B;
                    -moz-transition: all .2s;
                    -o-transition: all .2s;
                    -webkit-transition: all .2s;
                    transition: all .2s;
                }

                .ErrorCont ul li a .ConnectionIcon i {
                    color: #FFF;
                }

                .ErrorCont ul li a p {
                    font-size: 1.25rem;
                    color: #333;
                    padding-top: 15px;
                }

                .ErrorCont ul li a:hover p,
                .ErrorCont ul li a:focus p {
                    text-decoration: underline;
                    font-weight: bold;
                }

@media only screen and (max-width: 76.1875em) {
    #Wrap.errorPage {
        background-size: auto 100vh;
    }
}

@media only screen and (max-width: 61em) and (min-width: 48em) {
    .ErrorCont {
        background-position: left+1.5rem bottom;
        background-size: auto 400px;
        padding: 2rem 2rem 2rem 350px;
    }
}

@media only screen and (max-width: 47.9735em) {
    #Wrap.errorPage {
        background-size: auto 100vh;
    }

    .ErrorCont {
        width: 90%;
        height: 680px;
        min-height: initial;
        background-position: center bottom;
        background-size: auto 350px;
        padding: 2rem;
    }

        .ErrorCont p.txtLarge {
            line-height: 4rem;
            margin-bottom: 1rem;
        }

        .ErrorCont ul {
            margin-top: 0;
        }
}

@media only screen and (max-width: 30em) {
    .ErrorCont {
        background-size: 320px auto;
        height: 520px;
        padding: 1rem 0 0 0;
    }

        .ErrorCont p {
            font-size: 1.125rem;
        }

            .ErrorCont p.txtLarge {
                font-size: 2.5rem;
                line-height: 3rem;
                margin-bottom: 1rem;
            }

        .ErrorCont ul {
            width: 100%;
        }
}

/*#endregion */

/*===============================================================================
                         Other
=================================================================================*/
/*----------------- kbd tag Css -----------------*/
kbd {
    border-top: 1px solid #BBB;
    border-bottom: 3px solid #BBB;
    border-left: 2px solid #BBB;
    border-right: 2px solid #BBB;
    padding: 0.125rem 0.5rem;
    border-radius: .25rem;
    -moz-border-radius: .25rem;
    -webkit-border-radius: .25rem;
    margin: 0 0.1rem;
    background-color: #fff;
    color: #515151;
}

/*----------------- Legal ol Css -----------------*/
.legalCont ol li {
    list-style-type: cjk-ideographic;
    margin-bottom: 0;
}

.legalCont .Mytable tbody tr td {
    text-align: center;
}

    .legalCont .Mytable tbody tr td:first-child {
        text-align: left;
    }

/*----------------- Google Custom Search API Css -----------------*/
.gsc-search-button-v2 {
    padding: 9px 27px !important;
    border-radius: 5px !important;
}

    .gsc-search-button-v2 > svg {
        width: 20px !important;
        height: 20px !important;
    }

.gsc-selected-option-container .gsc-selected-option {
    line-height: 27px;
}

/*----------------- 文字寬度設定 -----------------*/
.txtNarrow,
th.txtNarrow {
    width: 2%;
}

/*----------------- fileDownload Css -----------------*/
.fileDownload {
}

    .fileDownload li a {
        display: block;
        padding: 10px 20px;
        background-color: #E7F2D0;
        border-radius: 3px;
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        -o-transition: all .3s ease-out;
        transition: all .3s ease-out;
    }

        .fileDownload li a:hover {
            -webkit-box-shadow: 0 0.25rem 0.125rem 0 rgb(0 0 0 / 5%);
            box-shadow: 0 0.25rem 0.125rem 0 rgb(0 0 0 / 5%);
            text-decoration: none;
            transform: translate3d(0, -1px, 0);
        }

        .fileDownload li a:focus-visible {
            outline: 5px dotted #f09819;
        }

        .fileDownload li a i {
            margin-right: 10px;
        }

/*===============================================================================
                         Public
=================================================================================*/
/*----------------- EPA Iframe -----------------*/
.iframeWrap img {
    width: 100%;
    height: auto;
}

.secFixMenu {
    bottom: 75px;
}