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

.Air_Quality .leftArea .ctrlArea{
    position: absolute;
    top: 0;
    left: 0;
    margin: 1.5rem;
}


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

/* 地下水質監測 */
.Gwater_Quality .leftArea{
    width: 60%;
}
.Gwater_Quality .rightArea{
    width: 40%;
}
 
.leftArea .ctrlArea{
    top: 0;
    right: 0;
}

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

.station {
  fill: #007aa1;
}

/*圖例*/
.ctrlArea .lenged{
    margin-top:1rem;
}
.ctrlArea .lenged li {
    margin-top: 0.5rem;
}
.ctrlArea .icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #ABAAAA;
    background: #fff;
    vertical-align: middle;
    margin-right: 1rem;
}
.ctrlArea li:first-child .icon {
    border-radius: 50px;
}
    .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;
}

    /* 監測值卡片 */

    .datdArea .gridBox {
        gap: 0.6rem;
        grid-template-columns: repeat(2, 1fr);
    }
    .datdArea .gridBox .Card{
        margin: 0;
        display: block;
        padding: 1rem;
        overflow: hidden;
    }
    .dataTitle {
        text-align: left;
        margin-bottom: 0.5rem;
    }
    .dataTitle span:first-child{
        font-size: 1.4rem;
        font-weight: bold;
    }
    .dataTitle span:last-child{
        font-size: 0.8rem;
    }    
    
    .dataValue{
        font-size: 2.6rem;
        font-weight: bold;
        text-align: right;	
    }


.popSci .insBox {
    /*width: 80rem;*/
    margin: 0 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;
}

@media only screen and (max-width: 47.9375em) {
    .Gwater_Quality .leftArea, .Gwater_Quality .rightArea {
        width: 100%;
    }
    .flexBox {
        display: block;
    }

    .datdArea .gridBox {
        grid-template-columns: repeat(1, 1fr);
    }
    .mapImg_position {
        width: 260%;
        top: -15%;
        left: -66%;
    }
}