@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: 260%;
    top: -34%;
    left: -68%;
}

.outer{
    fill: #fff;
}
.stNormal .station {
    fill: #0063a0;
}
.stRoad .station {
    fill: #008927;
}
 /*svg文字設定*/
/*.stName{
    display:none;
}*/
.st0 {
    letter-spacing: .1em;
}

.st0, .st1 {
    font-size: 0.88rem;
}

.st1 {
    letter-spacing: 0em;
}

.st4, .st5 {
    font-family: MicrosoftYaHeiUI-Bold, 'Microsoft YaHei UI';
    font-weight: 700;
}

.st4, .st6 {
    font-size: 1.13rem;
    letter-spacing: 0em;
}

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



/*圖例*/
.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/sound_2.png');
}
.ctrlArea li:last-child .icon {
    background-image: url('../../images/sound_1.png');
    background-size: 1.2rem;
}
    .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;
}

    .tabArea {
        display: flex;
        justify-content: center;
        margin-bottom: 1rem;
    }

    .tabArea .tabBtn{
        text-decoration: none;
        display: inline-block;
        width: 6rem;
        line-height: 1.6rem;
        color:var(--mainColor2);
        border:1px solid var(--mainColor2);
        border-radius: 50px;
        background: #fff;
        margin: 0 0.5rem;
        text-align: center;
    }
        .tabArea .tabBtn:hover, .tabArea .tabBtn.select:hover {
            font-weight: bold;
            box-shadow: var(--mainColor2) 0 0 0 1px;
            /*font-weight: bold;*/ /* font-weight: bold 重複宣告，僅最後一行生效 */
        }
    .tabArea .tabBtn.select{
        color: #fff;
        background: var(--mainColor2);
    }


    .datdArea .gridBox {
        gap: 0.6rem;
        grid-template-columns: repeat(2, 1fr);
    }
    .datdArea .gridBox .Card{
        margin: 0;
        padding: 1rem 0;
        overflow: hidden;
        position: relative;
        display: block;
    }
.Card .station {
    display: inline-block;
    width: 70%;
    line-height: 3rem;
    vertical-align: top;
}
    
        .Card .station > div{
            display:flex;
        }
        .Card .station .town {
            background: var(--mainColor1);
            color: #fff;
            line-height: 1.2rem;
            font-size: 0.9rem;
            padding: 0 0.5rem;
            width: 3rem;
        }
        .Card .station .stationName {
            font-size: 1.1rem;
            font-weight: bold;
            margin: 1rem 0.5rem 0 1rem;
        }
        .Card .station .date {
            display: inline-block;
            font-size:0.9rem;
            color: var(--TextColor);
            font-weight:bold;
            margin:0 0.3rem
        }


.dataValue {
    display: inline-block;
    width: 23%;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    padding: 0.5rem 0;
    border-radius: 4px;
    margin-right: 1rem;
    color: #fff;
    vertical-align: top;
}
    .dataValue::after {
        content: 'Leq';
        display: block;
        font-size: 0.7rem;
        line-height: 1rem;
    }
.ordinary .dataValue, .volume_lenged .icon.ordinary {
    background: #3680C9;
}
.Exceed .dataValue, .volume_lenged .icon.Exceed {
    background: #EB9E2B;
    color: #413939;
}
.NoData .dataValue, .volume_lenged .icon.NoData {
    background: #ccc;
}

/*/*.leve1_1 .dataValue{
    background:#46944C ;
}
.leve1_2 .dataValue{
    background:#6AB951 ;
}
.leve1_3 .dataValue{
    background:#AFD776 ;
    color: var(--TextColor);
}
.leve1_4 .dataValue{
    background:#D3E578;
    color: var(--TextColor);
}
.leve1_5 .dataValue{
    background:#F6EB93 ;
    color: var(--TextColor);
}
.leve1_6 .dataValue{
    background:#F5D06E ;
    color: var(--TextColor);
}
.leve1_7 .dataValue{
    background:#EDA767 ;
}
.leve1_8 .dataValue{
    background:#EB8034 ;
}
.leve1_9 .dataValue{
    background:#E75168 ;
}
.leve1_10 .dataValue{
    background:#D53537 ;
}
.leve1_11 .dataValue{
    background:#AB2B31 ;
}
.leve1_12 .dataValue{
    background:#842232 ;
}
.leve1_13 .dataValue{
    background:#511A2E ;
}*/

.volume_lenged {
    margin: 0.5rem 0;
    text-align: center;
}

    .volume_lenged ul{
        margin-bottom:0.5rem;
    }

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

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

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

        .volume_lenged p.notice {
            font-size: 0.9rem;

        }
            .volume_lenged p.notice a {
                color: #007780;
                text-decoration: underline;
            }

                .volume_lenged p.notice a:hover {
                    font-weight: bold;
                }




                .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{
        width: 80%;
        margin: 1rem auto;
    }

.popSci{
  margin-right: 1rem;
}


/*----------------- RWD -----------------*/

@media only screen and (min-width: 76.25em) and (max-width: 86.1875em) { /*1220~1379*/

    .mapImg_position {
        top: -20%;
    }
    .dataValue {
        width: 21%;
        margin-right: 0.5rem;
    }
}
@media only screen and (max-width: 47.9375em) {
    /*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%;
    }
}