@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;
}
h4 {
    text-align: center;
}

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

/* 河川水質監測 */
.River_Quality .leftArea{
    width: 60%;
}
.River_Quality .rightArea{
    width: 40%;
}
 
.leftArea .ctrlArea{
    top: 0;
    right: 0;
}

/*svg設定*/
.mapImg_position {
    width: 270%;
    top: -30%;
    left: -68%;
}

#River_Quility_svg .station:hover{
    fill:#00E1CB ;
  }

  #River_Quility_svg .otherCountyGp, #River_Quility_svg .otherCounty{
    isolation: isolate;
    opacity: .4;
  }

  #River_Quility_svg .county {
    fill: #caeef9;
    stroke: #69aff4;
  }

  #River_Quility_svg .county, #River_Quility_svg .riverLine {
    stroke-linecap: round;
    stroke-width: 2px;
  }

  #River_Quility_svg .riverLine {
    fill: none;
    stroke: #eefcff;
  }

#River_Quility_svg .station {
    fill: #00cfff;
    stroke: #fff;
    stroke-width: 2px;
    filter: drop-shadow(2px 2px 3px rgb(0 0 0 / 0.4));
}

  #River_Quility_svg .station, .riverArea {
    stroke-miterlimit: 10;
  }

#River_Quility_svg .riverArea {
    fill: #00456b;
    opacity: .8;
    stroke: #caeef9;
}

  #River_Quility_svg .otherCounty {
    fill: #a0a0a0;
  }

.ctrlArea a span, .switchBtn label span div{
    opacity: 0;
    position: absolute;
    z-index: -10;
}

/* 放大設定 */
.mapImg_position.zoomIn {
    width: 170%;
}
#zoom_svg .riverLine {
    fill: none;
    stroke: #eefcff;
    stroke-width: 8px;
  }

  #zoom_svg .riverLine,#zoom_svg .County{
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #zoom_svg .riverLine, #zoom_svg .station, #zoom_svg .frame {
    stroke-miterlimit: 10;
  }

#zoom_svg .riverArea {
    fill: #00456b;
    opacity: .2;
}

  #zoom_svg .stationGp{
    display: none;
  }

#zoom_svg .station {
    fill: #00cfff;
    stroke: #fff;
    stroke-width: 2px;
    filter: drop-shadow(2px 2px 3px rgb(0 0 0 / 0.4));
}

  #zoom_svg .County {
    fill: #caeef9;
    stroke: #69aff4;
    stroke-width: 6px;
  }

  .CountyGp {
    opacity: .5;
  }

  /* 南崁溪 */
.mapImg_position.zoomIn.Nankan_svg{
    top: 9%;
    left: -55%;
}
/* 老街溪 */
.mapImg_position.zoomIn.Laojiexi_svg{
    top: -7%;
    left: -24%;
}
/* 杜子溪 */
.mapImg_position.zoomIn.DuZixi_svg{
    top: -10%;
    left: 9%;
}
/* 福興溪 */
.mapImg_position.zoomIn.Fuxing_svg{
    top: -15%;
    left: 24%;
}

.mapImg_position.zoomIn.Nankan_svg #zoom_svg #NankanArea .riverArea,
.mapImg_position.zoomIn.Laojiexi_svg #zoom_svg #LaojiexiArea .riverArea,
.mapImg_position.zoomIn.DuZixi_svg #zoom_svg #DuZixiArea .riverArea,
.mapImg_position.zoomIn.Fuxing_svg #zoom_svg #FuxingArea .riverArea{
    opacity: .8;
}

.mapImg_position.zoomIn.Nankan_svg #zoom_svg #SitePoint_Nankan.stationGp,
.mapImg_position.zoomIn.Laojiexi_svg #zoom_svg #SitePoint_Laojiexi.stationGp,
.mapImg_position.zoomIn.DuZixi_svg #zoom_svg #SitePoint_DuZixi.stationGp,
.mapImg_position.zoomIn.Fuxing_svg #zoom_svg #SitePoint_Fuxing.stationGp{
    display: block;
}

/*圖例*/
.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;
}

/*河道圖*/
/*.mapImg_position.river_svg {
    width: 300%;
    top: -25%;
    left: -75%;
}*/

#Riverway_svg .station {
    fill: #00a07a;
    stroke: #fff;
    stroke-width: 2px;
    filter: drop-shadow(2px 2px 3px rgb(0 0 0 / 0.4));
}
#Riverway_svg .riverLine {
    stroke-linecap: round;
    fill: none;
    stroke: #0070bc;
    stroke-width: 3px;
    stroke-miterlimit: 10;
    fill-rule: evenodd;
}


/*切換SVG*/
.switchArea {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 11;
}

    .switchArea input {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

        .switchArea input:focus + label {
            outline: 2px dotted var(--subColor2);
            -webkit-transition: outline 0.15s linear;
            -moz-transition: outline 0.15s linear;
            -o-transition: outline 0.15s linear;
            transition: outline 0.15s linear;
        }

    .switchArea li {
        display: inline-block;
        padding: 0.5rem 0;
    }

.mapArea .PageTitle {
    line-height: 1.6rem;
    color: var(--mainColor1);
    border: 1px solid var(--mainColor1);
    border-radius: 50px;
    background: #fff;
    margin: 0;
    text-align: center;
    padding: 0.5rem 1rem;
}

.mapArea li.switchActive .PageTitle {
    color: #fff;
    background: var(--mainColor1);
}

.mapArea .PageTitle:hover {
    box-shadow: var(--mainColor2) 0 0 0 1px;
    font-weight: bold;
    -webkit-transition: all .35s ease-out;
    -moz-transition: all .35s ease-out;
    -o-transition: all .35s ease-out;
    transition: all .35s ease-out;
}

.mapArea li.switchActive .PageTitle:hover {
    box-shadow: var(--mainColor2) 0 0 0 1px;
    font-weight: bold;
    -webkit-transition: all .35s ease-out;
    -moz-transition: all .35s ease-out;
    -o-transition: all .35s ease-out;
    transition: all .35s ease-out;
}


.no-js .mapArea .PageTitle {
    display: none;
}

.mapArea .PageTitle-no-js {
    font-size: 1.875rem;
    color: #000;
    display: none;
    font-weight: bold;
    margin-bottom: 0;
    padding-left: 2rem;
}

.no-js .mapArea .PageTitle-no-js {
    display: inline-block;
}
.switchArea .tiptxt {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}
/*    .switchArea span {
        font-size: 1.4rem;
        font-weight: bold;
        vertical-align: middle;
    }

     span.switchBtn input[type="checkbox"] + label {
         line-height: 1.8em;
         height: 1.8em;
         width: 3.5em;
         background: #00cfff;
         margin: 0 0.35rem;
     }

            span.switchBtn input[type="checkbox"] + label > span {
                width: 1.5rem;
                height: 1.5rem;
            }

             span.switchBtn input[type="checkbox"]:checked + label {
                 background: #00a07a;
             }

            span.switchBtn input[type="checkbox"]:checked + label > span {
                left: 1.7em;
            }

            .ctrlArea {
                border-radius: 10px 10px 0 0;
            }*/
/* 測站資訊 */
.stationInfo .flexBox .Card:first-child {
    width: calc(35% - 0.3rem);
    margin-right: 0.3rem;
}
.stationInfo .flexBox .Card:last-child{
    width: calc(65% - 0.3rem);
    margin-left: 0.3rem;
}
.stationInfo .Card{
    display: block;
    padding: 1rem;
}
.stationInfo .Card div:first-child{
    color: var(--mainColor1);
    font-weight: bold;
    margin-bottom: 0.5rem;
}

    /* 監測值卡片 */

    .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: 80%;
        margin: 0 auto;
    }
        .insBox iframe {
            padding: 0 4rem;
        }

span.switchBtn input[type="checkbox"] + label:focus {
    outline: 2px dotted var(--subColor2);
}

@media only screen and (min-width: 76.25em) and (max-width: 86.1875em) { /*1220~1379*/
    .insBox iframe {
        padding: 0 2rem;
    }
}

        @media only screen and (max-width: 47.9375em) {
            .River_Quality .leftArea, .River_Quality .rightArea {
                width: 100%;
            }
            .switchArea {
                top: 1rem;
                left: 1rem;
            }
            .switchArea span {
                font-size: 1.2rem;
            }
            .mapImg_position {
                width: 310%;
                top: -5%;
                left: -78%;
            }
/*                .mapImg_position.river_svg {
                    width: 310%;
                    top: -5%;
                    left: -78%;
                }*/
                .mapImg_position.zoomIn.Nankan_svg {
                    width: 200%;
                    top: 12%;
                    left: -71%;
                }
                .mapImg_position.zoomIn.Laojiexi_svg {
                    width: 200%;
                    top: 12%;
                    left: -30%;
                }
                .mapImg_position.zoomIn.DuZixi_svg {
                    width: 200%;
                    top: -12%;
                    left: 5%;
                }
                .mapImg_position.zoomIn.Fuxing_svg {
                    width: 200%;
                    top: -12%;
                    left: 24%;
                }
            .popSci .popSciBlock {
                position: unset;
            }
            .insBox iframe {
                 padding: 0 ; 
            }

            .dataTitle span:first-child {
                font-size: 1.1rem;
            }
            .dataValue {
                font-size: 2rem;
            }
            span.switchBtn input[type="checkbox"]:checked + label > span {
                left: 2em;
            }
}