/*@charset "utf-8";*/
/*CSS Info ======================================================================
File Name: EN.css
Editor: Shell
Last Editor: Sophia
LastDate: 2020/07/24
Version: 1.0
【 Table of Contents 】
    Base on 中文版，僅針對英文版面細節調整
=================================================================================*/

/*===============================================================================
                                     Master
=================================================================================*/
/*----------------------Header----------------------*/
.bannerWrp {
    flex-wrap: wrap;
    justify-content: flex-start
}

.TopNav {
    margin-left: auto;
}

.SearchArea .SearchBox.on {
    justify-content: flex-start;
    flex-direction: row;
}

    .SearchArea .SearchBox.on label {
        margin: 0;
    }

.SearchArea input[type="search"] {
    width: 200px;
}

@media only screen and (max-width: 47.9735em) {
    #Banner h1 {
        font-size: 1em;
    }
}
/*----------------------NAV----------------------*/
.SearchArea button#btnSearch {
    width: 60px;
}
/*----------------------Footer----------------------*/
.FooterMenu nav.Menu > ul > li {
    width: 32%;
}

@media only screen and (min-width: 48em) and (max-width:61em) {
    .FooterMenu nav.Menu > ul > li {
        width: 48%;
    }
}

@media only screen and (max-width: 47.9735em) {
    .FooterMenu nav.Menu > ul > li {
        width: 100%;
    }
}
/*===============================================================================
                                     內頁
=================================================================================*/
.stationInfo .stationLevel {
    width: 35%;
}

.stationInfo .stationGPS {
    width: calc(100% - 45%);
}


    .stationInfo .stationGPS .btnGPS {
        right: 16px;
        left: auto;
    }

.chartCont .QueryComm .Lbtn {
    width: 460px;
}

.reservoirStorage {
    padding: 15px;
}

    .reservoirStorage figcaption {
        left: 65px;
    }

    .reservoirStorage table th {
        font-size: .875rem;
    }

@media only screen and (max-width: 86.1875em) {
    .chartCont .QueryComm .Lbtn + .Lbtn {
        margin-top: 1.5em
    }

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

    .stationValue .datetime {
        float: none;
    }
}

@media only screen and (max-width: 47.9735em) {
    .PageTitle h2 {
        overflow: hidden;
    }

    .chartCont .QueryComm .Lbtn {
        width: inherit;
    }

    .reservoirStorage figcaption {
        left: 0;
    }
}

.LevelInfo p, .LevelInfo ul li {
    text-align: justify;
    text-justify: inter-ideograph;
}

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

.MyQueryArea fieldset .Legend {
    width: 7rem;
}

.UnitdataCont .MyQueryArea fieldset .Legend {
    width: 12rem;
}

/*----------------------水庫----------------------*/
.ReservoirCont .globalInfo .monitorFreq-info p::after {
    /*content: '\ff0aMain reservoirs are monitored every month';*/ /*重點水庫為每月間次一次*/
}

.ReservoirCont .globalCont .rankingWrap + .rankingWrap {
    margin-top: 10px;
}

/*----------------------海灘----------------------*/
.BeachCont .globalInfo .monitorFreq-info p::after { /*每年6~8月*/
    content: '\ff0aJune to August every year';
}


/*===============================================================================
                                    小百科
=================================================================================*/
.articleCont .articleWrap .cardWrap {
    min-height: 175px;
}

.cardWrap .cardInfo .articleTitle {
    font-size: 1.25rem;
    line-height: 2rem;
    margin: 0.25em 0;
}

@media only screen and (max-width: 86.1875em) {
    .articleCont .articleWrap .cardWrap {
        min-height: 280px;
    }
}

@media only screen and (max-width: 61em) {
    .articleCont .articleWrap .cardWrap {
        min-height: auto;
    }
}

/*===============================================================================
                                    錯誤頁
=================================================================================*/
.ErrorCont {
    background-position: left+1rem bottom;
}

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