@charset "utf-8";
/*CSS Info ======================================================================
File Name: Layout.css
Editor: Eliam
CreateDate:2023/03/20
Last Editor: Rebecca
LastDate: 2023/05/24
Version: 4.0
---------------------------
【 Table of Contents 】
	DIV XHTML頁面
	Free Style
	使用jQuery
=================================================================================*/

/*===============================================================================
                         Pages typography setting
=================================================================================*/

/*    Environment analysis setting
================================================== */

/* 環境音量監測 */
.leftArea{
    width: 50%;
}
.rightArea{
    width: 50%;
}

.leftArea .ctrlArea {
    bottom: 0;
    left: 0;
}

/*svg設定*/
.mapImg_position {
    width: 200%;
    top: -26%;
    left: -47%;
}

.station {
  fill: #007aa1;
}

.frame {
  fill: #ff4040;
}

svg .otherCounty {
  fill: #a0a0a0;
  isolation: isolate;
  opacity: .4;
}

.stName {
    font-family: MicrosoftYaHeiUI-Bold, 'Microsoft YaHei UI', sans-serif; /* 加 fallback generic family (源碼修正) */
    font-size: 1.66rem;
    font-weight: 700;
    letter-spacing: 0em;
}

.station {
    fill: #00349b;
}


/*圖例*/
.ctrlArea .lenged{
    margin-top:1rem;
}
.ctrlArea .lenged li {
    margin-top: 0.5rem;
}
.ctrlArea .icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    margin-right: 1rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.ctrlArea li:first-child .icon {
    background-image: url('../../images/rain_1.png');
}

.ctrlArea li:last-child .icon {
    background-image: url('../../images/rain_2.png');
    background-size: 1.1rem;
}
    .ctrlArea .lenged p {
        display: inline-block;
        line-height: 1rem;
        vertical-align: text-bottom;
        margin: 0;
    }
.leftArea p.notice {
    font-size: 0.8rem;
    margin: 1.5rem;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
}
    .leftArea p.notice span {
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;
        background: #ccc;
        border: 1px solid #fff;
        margin: 0 0.3rem;
        vertical-align: text-bottom;
    }
.leftArea p.notice span:first-child {
    border-radius: 50px;
    margin-right: 0;
}

    /* 監測值卡片 */
.ctrlArea h3{
    color: #fff;
    border: none;
    background: none;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 0.8rem;
    margin: 0;
    width: unset;
    min-width: unset;
    min-height: unset;
    line-height: unset;
    height: unset;
    border-radius: unset;
    appearance: auto;
}


.datdArea .gridBox {
    gap: 0.6rem;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 1rem;
}
    .datdArea .gridBox .Card{
        margin: 0;
        padding: 1rem;
        overflow: hidden;
        position: relative;
        display: block;
    }
    .datdArea h4{
        text-align: center;
    }
    .station{
        display: inline-block;
        width: 66%;
        line-height: 3rem;
        vertical-align: middle;
        font-size: 2rem;
        font-weight: bold;
    }
    
    .dataValue{
        display: inline-block;
        width: 30%;
        font-size: 2rem;
        font-weight: bold;
        text-align: center;
        padding: 0.5rem 0;
        border-radius: 4px;
        color: #fff;
        vertical-align: middle;
    }
    .dataValue::before{
        content: 'pH';
        display: block;
        font-size: 0.8rem;
        line-height: 1rem;
    }
.ordinary .dataValue, .PH_lenged .icon.ordinary {
    background: #72C100;
}

.Exceed .dataValue,.PH_lenged .icon.Exceed {
    background: #E75168;
}

.NoData .dataValue, .PH_lenged .icon.NoData {
    background: #ccc;
}

/*.pH_1 .dataValue{
    background:#E71F22 ;
}
.pH_2 .dataValue{
    background:#E56B28 ;
}
.pH_3 .dataValue{
    background:#E9842A ;
    color: var(--TextColor);
}
.pH_4 .dataValue{
    background:#EBA62B;
    color: var(--TextColor);
}
.pH_5 .dataValue{
    background:#F4C513;
    color: var(--TextColor);
}
.pH_6 .dataValue{
    background:#FEEC02;
    color: var(--TextColor);
}
.pH_7 .dataValue{
    background:#44B134 ;
}
.pH_8 .dataValue{
    background:#305C95 ;
}
.pH_9 .dataValue{
    background:#354499 ;
}*/

.PH_lenged {
    margin-bottom: 1rem;
    text-align: center;
}

    .PH_lenged li {
        margin-top: 0.5rem;
        display: inline-block;
        margin-right: 1rem;
    }

    .PH_lenged .icon {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        background: #fff;
        vertical-align: middle;
        margin-right: 0.5rem;
        border-radius: 50px;
    }

    .PH_lenged p {
        display: inline-block;
        line-height: 1rem;
        vertical-align: text-bottom;
        margin: 0;
    }


    .cls-1 {
        fill: #caeef9;
        stroke: #69aff4;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2px;
    }

  .cls-2 {
    fill: #007aa1;
  }

  .cls-3 {
    fill: #ff4040;
  }

  .cls-4 {
    fill: #3a79c2;
  }

  .cls-5 {
    fill: #a0a0a0;
    isolation: isolate;
    opacity: .4;
  }



.popSci .insBox {
    margin: 0rem auto;
}

    .popSci .insBox img {
        width:unset;
        height: 18rem;
    }

    .popSci {
        margin-right: 1rem;
    }
.relatedIns .linkArea {
    margin-top: 0;
}
.relatedIns .linkArea .moreBtn:not(:last-child) {
    margin-bottom: 1.3rem;
}

.insContent {
    margin-bottom: 0;
}


/*----------------- 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*/

}


@media only screen and (min-width: 48em) and (max-width:61em) { /*768~976*/

}

@media only screen and (max-width: 47.9735em) { /*767↓*/
    .leftArea, .rightArea {
        width: 100%;
    }

    .gridBox {
        display: block;
    }

    .datdArea .gridBox .Card:not(:last-child) {
        margin-bottom: .5rem;
    }

    .mapImg_position {
        width: 260%;
        top: -15%;
        left: -66%;
    }

    .station {
        width: 66%;
        line-height: 2.5rem;
    }
    .dataValue {
        font-size: 1.6rem;
    }
    .datdArea .gridBox .Card {
        padding: 0.8rem;
    }

    .flexBox {
        display: block;
    }

}

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

}