@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
=================================================================================*/
section {
    padding: 0;
}


/* 空氣品質監測 */
.Air_Quality .leftArea .ctrlArea{
    position: absolute;
    top: 0;
    left: 0;
}


.Air_Quality .leftArea{
    width: 70%;
}
.Air_Quality .rightArea{
    width: 30%;
}
 
.Air_Quality .leftArea .ctrlArea{
    top: 0;
    left: 0;
}

.Air_Quality .tabArea{
	display: flex;
	justify-content: left;
	margin-bottom: 1rem;
}
.Air_Quality .tabArea .tabBtn{
	text-decoration: none;
	display: inline-block;
	width: 4rem;
	line-height: 1.6rem;
	color:var(--mainColor1);
	border:1px solid var(--mainColor1);
	border-radius: 50px;
	background: #fff;
	margin: 0 0.5rem;
	text-align: center;
}
    .Air_Quality .tabArea .tabBtn.select {
        color: #fff;
        background: var(--mainColor1);
    }


        .Air_Quality .tabArea .tabBtn:hover, .Air_Quality .tabArea .tabBtn.select:hover {
            font-weight: bold;
            box-shadow: var(--mainColor2) 0 0 0 1px;
            /*font-weight: bold;*/ /* font-weight 重複宣告，僅最後一行生效 (源碼修正)*/
        }
#Air_Quality .tabArea .tabBtn.select{
	color: #fff;
	background: var(--mainColor2);
}

/*svg設定*/

.mapImg_position{
    width:200%;
    top:-15%;
    left:-40%;
}

.svg_type1 .otherCounty {
    isolation: isolate;
    opacity: .6;
    fill: #fff;
}

.svg_type1 .station, .svg_type1 .county {
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.svg_type1 .station {
    stroke: #fff;
    filter: drop-shadow(2px 2px 3px rgb(0 0 0 / 0.2));
}
    .svg_type1 .county {
        stroke: #4c4c4c;
        fill: none;
    }


.svg_type2 .otherCounty {
    isolation: isolate;
    opacity: 1;
    stroke: #fff;
    fill: #b8b8b8;
}

.svg_type2 .station {
    fill: #ccc;
    stroke: #fff;
    filter: drop-shadow(2px 2px 3px rgb(0 0 0 / 0.4));
}

.svg_type2 .station, .svg_type2 .county {
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.svg_type2 .county {
    fill: #CAEEF9;
    stroke: #69AFF4;
}

.aqi_1 .station {
    fill: var(--AQI1);
}

.aqi_2 .station {
    fill: var(--AQI2);
}

.aqi_3 .station {
    fill: var(--AQI3);
}

.aqi_4 .station {
    fill: var(--AQI4);
}

.aqi_5 .station {
    fill: var(--AQI5);
}

.aqi_6 .station {
    fill: var(--AQI6);
}
.nodata .station {
    fill: #ccc;
}


/* AQI圖例 */
.ConcentrationSide {
    text-align: left;
    position: absolute;
    left: 0;
    bottom: -300px;
}

.ConcentrationBar, .ConcentrationBar.color2 {
    width: 7px;
    height: 240px;
    margin-right: 10px
}

.ConcentrationBar {
    background: linear-gradient(to top,#096,#ffde33,#f93,#c03,#609,#7e0023,#2d020e)
}

    .ConcentrationBar.color2 {
        background: linear-gradient(to top,#0d7bc0,#4bbffc,#6bdcd7,#f3d62b,#f3a439,#ea6026)
    }

.ConcentrationBar, .BarNum {
    float: left;
    display: block
}

p.BarTitle {
    font-size: 1rem;
    font-weight: 700;
    padding-bottom: 5px
}

.BarNum li {
    font-size: 1rem;
    padding-bottom: 10px;
    line-height: 30px
}

    .BarNum li:nth-last-child(1), .BarNum.PM25 li:nth-last-child(1), #bar2 .BarNum li:nth-last-child(1), #bar2 .BarNum.PM25 li:nth-last-child(1) {
        padding-right: 0
    }

    .aqiTitle.Card{
        display: block;
        text-align: center;
    }
    
    .aqiData{
        width: 50%;
        margin:1rem auto;
        border-radius: 4px;
        padding: 0.8rem;
        color: #fff;
    }

    .aqiData div , .aqiTitle.Card p{
        font-weight: bold;
    }
    .aqiTitle.Card p{
        font-size: 1.2rem;
        margin: 0;
    }
    .aqiData .num{
        font-size: 4rem;
    }
    .aqiData .txt::before{
        font-size: 1.1rem;
    }

    /* AOI顏色 */

    .aqi_1.aqiData {
        background: var(--AQI1);
    } 
    .aqi_1.aqiData .txt::before {
        content: '良好';
    }
    .aqi_2.aqiData{
        background: var(--AQI2);
    }
    .aqi_2.aqiData .txt::before{
        content: '普通';
    }    
    .aqi_3.aqiData{
        background: var(--AQI3);
    }
    .aqi_3.aqiData .txt::before{
        content: '對敏感族群不健康';
    }
    .aqi_4.aqiData{
        background: var(--AQI4);
    }
    .aqi_4.aqiData .txt::before{
        content: '對所有族群不健康';
    }
    .aqi_5.aqiData{
        background: var(--AQI5);
    }
    .aqi_5.aqiData .txt::before{
        content: '非常不健康';
    }
    .aqi_6.aqiData{
        background: var(--AQI6);
    }
    .aqi_6.aqiData .txt::before{
        content: '危害';
    }
    .nodata.aqiData{
        background: #ccc;
    }
    .nodata.aqiData .txt::before{
        content: '無資料';
    }

    /*圖例*/
.Air_Quality .ctrlArea .lenged{
    margin-top:1rem;
}
.Air_Quality .ctrlArea .lenged li {
    margin-top: 0.5rem;
}
.Air_Quality .ctrlArea .icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #ABAAAA;
    background: #fff;
    vertical-align: middle;
    margin-right: 1rem;
}
.Air_Quality .ctrlArea li:first-child .icon {
    border-radius: 50px;
}
    .Air_Quality .ctrlArea .lenged p {
        display: inline-block;
        line-height: 1rem;
        vertical-align: text-bottom;
        margin: 0;
    }
.Air_Quality .leftArea p.notice {
    font-size: 0.8rem;
    margin: 1.5rem;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
}
    .Air_Quality .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;
    }
.Air_Quality .leftArea p.notice span:first-child {
    border-radius: 50px;
    margin-right: 0;
}

    /* 監測值卡片 */
    .dataTitle {
        text-align: center;
        margin: 0 1.5rem;
        width: 5rem;
    }
    .dataTitle div{
        line-height: 2rem;
        vertical-align: middle;
    }
    .dataTitle div:first-child{
        font-size: 1.4rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
    }
    .dataTitle div:last-child{
        font-size: 1rem;
    }    
    
    .dataValue div{
        padding: 0 1.5rem 0 0.8rem ;
        text-align: right;	
    }
    .dataValue div:first-child{
        border-bottom: 1px solid var(--mainColor2);
        position: relative;
    }
    .dataValue div:first-child::before{
        content: '';
        width: 6px;
        height: 6px;
        background: var(--mainColor2);
        border-radius: 50px;
        position: absolute;
        left: -3px;
        bottom: -3px;
    }

    .single .dataValue div{
        line-height: 4.5rem;
    }

    .single .dataValue div:first-child{
        border-bottom: unset;
    }
    .single .dataValue div:first-child::before{
        display: none;
    }
    

    .dataValue div span{
        line-height: 2.25rem;
        display: inline-block;
        vertical-align: middle;
    }
    
    .dataValue div span:first-child{
        margin-right: 0.8rem;
        font-size: 1rem;
    
    }
    .dataValue div span:last-child{
        font-size: 1.8rem;
        font-weight: bold;
        width: 5rem;
    }

/*.insBox.threeDay {
    position: relative;
    width: 82%;*/ /* 依父容器寬度自適應 */
    /*padding-top: 145%;*/ /* 維持原始比例 (580/400 ≈ 1.45) */
    /*overflow: hidden;
}

    .insBox.threeDay iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
        transform-origin: top left;
    }*/

/*iframe .forecast_content .myCarousel-inner svg {
    max-width: 63.5% !important;
    width: 63.5% !important;
}*/

/*.popSci .popSciBlock {
    position: absolute;
    top: 3.7rem;
}*/

#HashtagWeather.btnArea {
    text-align: left;
}

#HashtagWeather .linkBtn {
    display: inline-block;
    border: 2px solid #6CB8EE;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    color: #6CB8EE;
    padding: .2rem 0.5rem;
    text-decoration: none;
    margin: .5rem;
}
    #HashtagWeather .linkBtn:hover {
        background-color: #6CB8EE;
        color: #FFF;
    }


span.switchBtn input[type="checkbox"] + label {
    opacity: 1;
    position: relative;
    z-index: 0;
    display: inline-block;
    margin: 0;
}
.ctrlArea a span, .switchBtn label span div {
    opacity: 0;
    position: absolute;
    z-index: -10;
}
span.switchBtn label.active {
    outline: 2px dotted var(--subColor2);
}

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

.insBox iframe {
   width:100%;
}

.insArea:first-child .insBox iframe {
    width: 80%;
}

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

@media only screen and (min-width: 76.25em) and (max-width: 86.1875em) { /*1220~1379*/
    .Air_Quality .rightArea {
        width: 40%;
    }
    .mapImg_position {
        width: 220%;
        top: -8%;
        left: -50%;
    }
}

@media only screen and (min-width: 61.0525em) and (max-width: 76.1875em) { /*977~1219*/
    .Air_Quality .leftArea {
        width: 60%;
    }
    .Air_Quality .rightArea {
        width: 40%;
    }
    .mapImg_position {
        width: 240%;
        top: -3%;
        left: -56%;
    }
    .relatedIns .linkArea .moreBtn {
        font-size: 1.4rem;
    }
}

@media only screen and (min-width: 48em) and (max-width:61em) { /*768~976*/
    .Air_Quality .rightArea, .Air_Quality .leftArea {
        width: 100%;
    }
}

@media only screen and (max-width: 47.9375em) {
    .Air_Quality .leftArea, .Air_Quality .rightArea {
        width: 100%;
    }
    .mapImg_position {
        width: 230%;
        top: 7%;
        left: -47%;
    }
    .Air_Quality .leftArea p.notice {
        margin: 1rem;
    }
    .popSci .popSciBlock{
         position: unset; 
    }
}

@media only screen and (max-width: 23.4375em) { /*375↓*/
    .mapArea {
        height: 80vh;
    }

    .Air_Quality .tabArea .tabBtn {
        width: 3.5rem;
        line-height: 1.6rem;
    }

    p.BarTitle {
        padding-bottom: 2px;
    }

    .mapImg_position {
        width: 280%;
        top: 0%;
        left: -60%;
    }

    .dataTitle {
        margin: 0 1rem;
        width: 5rem;
    }

    .dataValue div {
        padding: 0 1rem 0 0.8rem;
    }

        .dataValue div span:first-child {
            margin-right: 0.5rem;
            font-size: 0.9rem;
        }
}