@charset "utf-8";
/*CSS Info ======================================================================
File Name: Layout.css
Editor: Sophia
CreateDate:2010/12/06
Last Editor: Sophia
LastDate: 2015/04/02
Version: 3.1
---------------------------
【 Table of Contents 】
	DIV XHTML頁面
	Free Style
	使用jQuery
    Responsive Design
=================================================================================*/

/*===============================================================================
                         以下是內頁版面設定
=================================================================================*/

#Wrap {
}

/*-----------------Header-----------------*/
/*#mainMenu {
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4CD5B1), color-stop(1, #3CA88C) );
    background: -moz-linear-gradient( center top, #4CD5B1 5%, #3CA88C 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#40B0B3', endColorstr='#3CA88C');
    background-color: #3CA88C;
}*/
/*-----------------Content-----------------*/
#Content {
}

ul#myTools li:nth-child(4) a:focus {
    background-color: var(--BlueDark1);
    color: #fff;
}

.linkBtn {
    display: block;
    width: 150px;
    font-size: 0.9rem;
    line-height: 26px;
    border-radius: 0.3rem;
    border: 1px solid #066C7A;
    color: #066C7A;
    background: rgba(255,255,255,0.8);
    text-align: center;
}

    .linkBtn:hover {
        color: #05A3B8;
        border: 1px solid #05A3B8;
        background: rgba(255,255,255,1);
    }


.infoSummary .accontBox {
    border: 2px solid var(--BlueLight1);
    border-radius: 50px;
    height: 50px;
    width: 50px;
    position: absolute;
    top: 0;
    right: 0;
}

.infoSummary .accontBox {
    border: 4px solid var(--BlueLight1);
    background: #fff;
    color: var(--BlueDark1);
    border-radius: 50px;
    height: 80px;
    width: 80px;
    position: absolute;
    top: .3rem;
    right: 0.8rem;
    text-align: center;
}

    .infoSummary .accontBox .scope {
        font-size: 0.8rem;
        margin: 1.2rem 0 0.3rem 0;
        font-weight: bold;
    }

    .infoSummary .accontBox .count span {
        font-size: 1.5rem;
        font-weight: bold;
    }

/* Card共用 */
.cardTitle {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.cardContent {
    text-align: left;
    margin-bottom: 0.5rem;
}

.infoCard .cardContent .txt {
    line-height: 1.4rem;
    letter-spacing: 0.05rem;
}

.infoCard {
    /*    padding: 0.8rem 1rem;
    background-size: 100% auto;*/
}

    .infoCard:after {
        content: " ";
        display: block;
        height: 100%;
        width: 10px;
        position: absolute;
        top: 0;
        left: 0;
    }

.aqiFixedBox {
    margin: 0 0.8rem;
    padding: 0.8rem;
    border-radius: 10px;
    background: rgba(255,255,255,1);
    box-shadow: 0px 2px 10px #00000033;
    width: 160px;
    position: absolute;
    top: 100px;
}

    .aqiFixedBox h2 span {
        display: block;
        text-align: center;
        color: var(--TextColor);
    }

        .aqiFixedBox h2 span:first-child {
            font-size: 1rem;
            margin-bottom: 0.3rem;
        }

        .aqiFixedBox h2 span:nth-child(2) {
            font-size: .75rem;
            margin-bottom: 0.3rem;
        }

        .aqiFixedBox h2 span:last-child {
            font-size: 1.4rem;
            font-weight: bold;
        }

    .aqiFixedBox .aqiData {
        text-align: center;
        width: 100%;
    }

/*AQI色票*/
.aqi_1 {
    color: var(--AQI1);
}

.aqi_2 {
    color: var(--AQI2);
}

.aqi_3 {
    color: var(--AQI3);
}

.aqi_4 {
    color: var(--AQI4);
}

.aqi_5 {
    color: var(--AQI5);
}

.aqi_6 {
    color: var(--AQI6);
}

.aqi_1 .levelTxt, #airStation .aqi_1.infoCard:after, .aqiSummary.aqi_1 .aqiTitle {
    background: var(--AQI1);
}

.aqi_2 .levelTxt, #airStation .aqi_2.infoCard:after, .aqiSummary.aqi_2 .aqiTitle {
    background: var(--AQI2);
}

.aqi_3 .levelTxt, #airStation .aqi_3.infoCard:after, .aqiSummary.aqi_3 .aqiTitle {
    background: var(--AQI3);
}

.aqi_4 .levelTxt, #airStation .aqi_4.infoCard:after, .aqiSummary.aqi_4 .aqiTitle {
    background: var(--AQI4);
}

.aqi_5 .levelTxt, #airStation .aqi_5.infoCard:after, .aqiSummary.aqi_5 .aqiTitle {
    background: var(--AQI5);
}

.aqi_6 .levelTxt, #airStation .aqi_6.infoCard:after, .aqiSummary.aqi_6 .aqiTitle {
    background: var(--AQI6);
}


.aqiSummary.aqi_1 {
    border: 2px solid var(--AQI1);
}

.aqiSummary.aqi_2 {
    border: 2px solid var(--AQI2);
}

.aqiSummary.aqi_3 {
    border: 2px solid var(--AQI3);
}

.aqiSummary.aqi_4 {
    border: 2px solid var(--AQI4);
}

.aqiSummary.aqi_5 {
    border: 2px solid var(--AQI5);
}

.aqiSummary.aqi_6 {
    border: 2px solid var(--AQI6);
}


/*資訊Menu頁 GreenLifeMenu*/

#GreenLifeMenu.scrollArea {
    height: calc(var(--vh, 1vh) * 100 - 143.2px);
}

#GreenLifeMenu .infoCard {
    background-color: #EEFCFF;
}

    #GreenLifeMenu .infoCard:nth-child(1) {
        background-image: url(../../images/greenlife/greenlife4_img.png);
    }

    #GreenLifeMenu .infoCard:nth-child(2) {
        background-image: url(../../images/greenlife/greenlife7_img.png);
    }

.infoCard .cardTag {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 10px;
}

    .infoCard .cardTag .tag {
        width: 24px;
        height: 24px;
        margin-right: 5px;
        display: block;
        background-repeat: no-repeat;
        background-size: contain;
    }

        .infoCard .cardTag .tag.tag_chair {
            background-image: url(../../images/greenlife/tag_chair.svg);
        }

        .infoCard .cardTag .tag.tag_toilet {
            background-image: url(../../images/greenlife/tag_toilet.svg);
        }

        .infoCard .cardTag .tag.tag_cool {
            background-image: url(../../images/greenlife/tag_cool.svg);
        }

        .infoCard .cardTag .tag.tag_water {
            background-image: url(../../images/greenlife/tag_water.svg);
        }

        .infoCard .cardTag .tag.tag_acc {
            background-image: url(../../images/greenlife/tag_acc.svg);
        }

#GreenLifeMenu .cardContent {
    display: flex;
    min-height: 8rem;
}

    #GreenLifeMenu .cardContent .leftBox {
        width: 40%;
    }

    #GreenLifeMenu .cardContent .rightBox {
        width: 60%;
    }

    #GreenLifeMenu .cardContent .count span {
        font-size: 3rem;
        font-weight: bold;
    }

.aqiData {
    text-align: left;
    width: 51%;
}

    .aqiData .aqiNum {
        font-size: 3rem;
        font-weight: bold;
        margin: 0.5rem 0;
    }

    .aqiData .levelTxt {
        text-align: center;
        font-weight: bold;
        border-radius: 50px;
        color: #fff;
        padding: 0.2rem 0.6rem;
    }

#ecoRestaurant .infoCard, #ecoPlace .infoCard {
    cursor: pointer;
}
/*環保餐廳 ecoRestaurant*/
#ecoRestaurant .infoCard {
    background-image: url(../../images/greenlife/outerplace.png);
}

#ecoRestaurant .select.infoCard:after {
    background: var(--GreenLight1)
}

.ecoData.scrollArea {
    height: calc(var(--vh, 1vh) * 100 - 189.6px);
    padding: 0.8rem 1rem 1rem;
}

.ecoData .cardContent {
    margin-bottom: 0.8rem;
}

    .ecoData .cardContent .txt {
        display: flex;
        margin-bottom: 0.3rem;
    }

.ecoData .FCB .cardContent .txt a {
    color: #E7BE72;
}

    .ecoData .FCB .cardContent .txt a:hover {
        color: #AF833C;
    }

.ecoData .cardContent .txt a {
    text-decoration: underline;
}

.ecoData .cardContent .txt i {
    width: 6%;
    margin-right: 0.3rem;
    text-align: center;
    box-sizing: border-box;
    line-height: 1.4rem;
}

.ecoData .cardContent .txt span {
    width: 90%;
    display: inline-block;
    line-height: 1.4rem;
}

.ecoData .cardContent .txt.Time span {
    font-size: .875rem;
    line-height: 1.25rem;
}


/*環教場所*/
#ecoPlace .infoCard {
    background-image: url(../../images/greenlife/innerplace.png);
}

#ecoPlace .select.infoCard:after {
    background: #E7BE72;
}

#ecoPlace .infoCard.FCB {
    background-image: url(../../images/greenlife/ecoPlace_FCB.png);
    background-color: #025A41;
}

#ecoPlace .FCB .cardTitle, #ecoPlace .FCB .txt i, #ecoPlace .FCB .txt span {
    color: #fff;
}

/*測站資訊*/
#airStation .scrollArea {
    height: calc(var(--vh, 1vh) * 100 - 278px);
}

#airStation .infoCard:last-child {
    margin-bottom: 0;
}

.aqiSummary {
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    margin-bottom: 1rem;
}

    .aqiSummary .metrics, .aqiSummary .metrics span {
        font-size: 1.2rem;
        font-weight: bold;
        margin-bottom: 1rem;
        color: var(--TextColor);
    }

    .aqiSummary .aqiTitle {
        color: #fff;
        padding: 0.5rem;
        font-size: 1.4rem;
    }

    .aqiSummary .aqiNum {
        font-size: 3rem;
        font-weight: bold;
        margin: 1rem;
    }

    .aqiSummary .levelTxt {
        color: #fff;
        margin: 1rem auto;
        border-radius: 50px;
        width: 60%;
        line-height: 2rem;
    }

#airStation .infoCard.metricsAQI i {
    position: absolute;
    top: 0.5rem;
    font-size: 1.4rem;
    color: inherit
}

#airStation .cardContent {
    display: flex;
    text-align: center;
    margin: 0;
    color: var(--TextColor);
}

#airStation .leftBox, #airStation .rightBox {
    width: 50%;
}

#airStation .leftBox {
    border-right: 1px solid var(--TextColor);
}

    #airStation .leftBox div:first-child {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 0.8rem;
    }

#airStation .rightBox div:last-child {
    margin-top: 0.8rem;
}

    #airStation .rightBox div:last-child span {
        font-size: 2rem;
        font-weight: bold;
    }

.infoSummary .scope {
    font-size: .875rem;
}

    .infoSummary .scope .count {
        font-size: 1.5rem;
        font-weight: bold;
        color: var(--BlueDark1);
        vertical-align: sub;
    }

    .infoSummary .scope span:first-child {
        padding-left: 10px;
    }

/*戶外遮蔭與降溫設施 outdoor*/
#outdoor .infoCard {
    background-image: url(../../images/greenlife/outdoor.png);
}

#outdoor .select.infoCard:after {
    background: var(--GreenLight1)
}

/*室內涼爽點 indoor*/
#indoor .infoCard {
    background-image: url(../../images/greenlife/indoor.png);
}

#indoor .select.infoCard:after {
    background: var(--BlueLight1)
}


@media only screen and (min-width: 1220px) and (max-width: 1379px) {
    #GreenLifeMenu.scrollArea {
        height: calc(var(--vh, 1vh) * 100 - 127.2px);
    }

    .ecoData.scrollArea {
        height: calc(var(--vh, 1vh) * 100 - 173.6px);
    }

    #airStation .scrollArea {
        height: calc(var(--vh, 1vh) * 100 - 264px);
    }
}

@media only screen and (min-width: 977px) and (max-width: 1219px) {
}

@media only screen and (min-width: 768px) and (max-width:976px) {

    .myInfo.full #ecoRestaurant .infoSummary, .myInfo.full #ecoPlace .infoSummary {
        display: block;
    }

    .myInfo #ecoRestaurant .infoSummary, .myInfo #ecoPlace .infoSummary {
        display: none;
    }

    /*資訊Menu頁 GreenLifeMenu*/
    .myInfo.full #GreenLifeMenu.scrollArea {
        height: calc(var(--vh, 1vh) * 100 - 139.6px);
    }

    .myInfo #GreenLifeMenu.scrollArea {
        height: calc(var(--vh, 1vh) * 48 - 139.6px);
    }

    .aqiData {
        text-align: left;
        width: 51%;
    }

        .aqiData .aqiNum {
            font-size: 3rem;
            font-weight: bold;
            margin: 0.5rem 0;
        }

        .aqiData .levelTxt {
            text-align: center;
            font-weight: bold;
            border-radius: 50px;
            color: #fff;
            padding: 0.2rem 0.6rem;
        }

    /*環保餐廳 ecoRestaurant*/
    /*環教場所*/

    .myInfo.full .ecoData.scrollArea {
        height: calc(var(--vh, 1vh) * 100 - 182.8px);
    }

    .myInfo .ecoData.scrollArea {
        height: calc(var(--vh, 1vh) * 48 - 182.8px);
    }

    /*測站資訊*/
    .myInfo #airStation {
        height: calc(var(--vh, 1vh) * 40 - 140px);
        overflow: auto;
    }

    .myInfo.full #airStation {
        height: unset;
        overflow: unset;
    }

        .myInfo.full #airStation .infoSummary {
            /*box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);*/
        }

    .myInfo #airStation .infoSummary {
        box-shadow: unset;
    }

    .myInfo.full #airStation .scrollArea {
        height: calc(var(--vh, 1vh) * 100 - 275px);
        overflow: auto;
    }

    .myInfo #airStation .scrollArea {
        height: auto;
        overflow: unset;
    }
}

@media only screen and (max-width: 767px) {

    .aqiFixedBox {
        float: left;
        width: unset;
        margin: 0 0.5rem;
        padding: 0 1rem;
        border-radius: 50px;
        margin-bottom: 0.8rem;
        top: auto;
    }

        /*            .aqiFixedBox h2 span {
                display: block;
                text-align: center;
                color: var(--TextColor);
            }*/

        .aqiFixedBox h2 {
            display: inline-block;
            margin-bottom: 0;
            vertical-align: top;
        }

            .aqiFixedBox h2 span {
                display: inline-block;
                text-align: left;
                font-size: 1.2rem;
                line-height: 2rem;
                margin-bottom: -4px;
                vertical-align: top;
            }

                .aqiFixedBox h2 span:first-child {
                    margin-bottom: 0;
                    /*margin-right: 0.5rem;*/
                }

                .aqiFixedBox h2 span:nth-child(2) {
                    margin-bottom: 0;
                }

        .aqiFixedBox .aqIcon {
            display: inline-block;
            height: 1rem;
            width: 1rem;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 1.2rem;
            margin-bottom: -4px;
            vertical-align: sub;
            margin-right: 3px;
            border-radius: 50px;
        }


        .aqiFixedBox.aqi_1 .aqIcon {
            background-image: url(../../images/greenlife/aqicon_1.svg);
        }

        .aqiFixedBox.aqi_2 .aqIcon {
            background-image: url(../../images/greenlife/aqicon_2.svg);
        }

        .aqiFixedBox.aqi_3 .aqIcon {
            background-image: url(../../images/greenlife/aqicon_3.svg);
        }

        .aqiFixedBox.aqi_4 .aqIcon {
            background-image: url(../../images/greenlife/aqicon_4.svg);
        }

        .aqiFixedBox.aqi_5 .aqIcon {
            background-image: url(../../images/greenlife/aqicon_5.svg);
        }

        .aqiFixedBox.aqi_6 .aqIcon {
            background-image: url(../../images/greenlife/aqicon_6.svg);
        }

        .aqiFixedBox .aqiData {
            display: inline;
        }

            .aqiFixedBox .aqiData .levelTxt {
                display: none;
            }

    .infoCard {
        margin: 0 0 0.8rem 0;
    }

    .myInfo.full #ecoRestaurant .infoSummary, .myInfo.full #ecoPlace .infoSummary {
        display: block;
    }

    .myInfo #ecoRestaurant .infoSummary, .myInfo #ecoPlace .infoSummary {
        display: none;
    }

    .infoSummary .accontBox {
        border: 4px solid var(--BlueLight1);
        background: #fff;
        color: var(--BlueLight1);
        border-radius: 50px;
        height: 80px;
        width: 80px;
        position: absolute;
        top: .3rem;
        right: 0.8rem;
        text-align: center;
    }

        /*            .infoSummary .accontBox .scope {
                font-size: 0.5rem;
                margin: 1rem 0 0.5rem 0;
                font-weight: bold;
            }*/

        .infoSummary .accontBox .count span {
            font-size: 1.5rem;
            font-weight: bold;
        }

    /* ---------綠色生活 GreenLife--------- */
    /*資訊Menu頁 GreenLifeMenu*/
    .myInfo.full #GreenLifeMenu.scrollArea {
        height: calc(var(--vh, 1vh) * 100 - 139.6px);
    }

    .myInfo #GreenLifeMenu.scrollArea {
        height: calc(var(--vh, 1vh) * 48 - 139.6px);
    }

    .aqiData {
        text-align: left;
        width: 51%;
    }

        .aqiData .aqiNum {
            font-size: 3rem;
            font-weight: bold;
            margin: 0.5rem 0;
        }

        .aqiData .levelTxt {
            text-align: center;
            font-weight: bold;
            border-radius: 50px;
            color: #fff;
            padding: 0.2rem 0.6rem;
        }

    /*環保餐廳 ecoRestaurant*/
    /*環教場所*/

    .myInfo.full .ecoData.scrollArea {
        height: calc(var(--vh, 1vh) * 100 - 182.8px);
    }

    .myInfo .ecoData.scrollArea {
        height: calc(var(--vh, 1vh) * 48 - 182.8px);
    }

    /*測站資訊*/
    .myInfo #airStation {
        height: calc(var(--vh, 1vh) * 40 - 140px);
        overflow: auto;
    }

    .myInfo.full #airStation {
        height: unset;
        overflow: unset;
    }

        .myInfo.full #airStation .infoSummary {
            /*box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);*/
        }

    .myInfo #airStation .infoSummary {
        box-shadow: unset;
    }

    .myInfo.full #airStation .scrollArea {
        height: calc(var(--vh, 1vh) * 100 - 275px);
        overflow: auto;
    }

    .myInfo #airStation .scrollArea {
        height: auto;
        overflow: unset;
    }
}

@media only screen and (max-width: 533px) {

    /*環教場所*/
    /*.myInfo.full .ecoData.scrollArea {
        height: calc(var(--vh, 1vh) * 100 - 269.4px);
    }

    .myInfo .ecoData.scrollArea {
        height: calc(var(--vh, 1vh) * 55 - 269.4px);
    }*/
}

@media only screen and (max-width: 443px) {

    /*環教場所*/
    /*.myInfo.full .ecoData.scrollArea {
        height: calc(var(--vh, 1vh) * 100 - 247px);
    }

    .myInfo .ecoData.scrollArea {
        height: calc(var(--vh, 1vh) * 55 - 247px);
    }*/
}

@media only screen and (max-width: 370px) {

    /*.infoSummary .accontBox {
        width: 70px;
        height: 70px;
    }

        .infoSummary .accontBox .scope {
            font-size: 0.7rem;
        }

        .infoSummary .accontBox .count span {
            font-size: 1.25rem;
        }*/
}

@media only screen and (max-width: 360px) {

    /*.aqiFixedBox {
        width: calc(100% - 16px);
        box-sizing: border-box;
    }*/

    /*環教場所*/
    /*.myInfo.full .ecoData.scrollArea {
        height: calc(var(--vh, 1vh) * 100 - 241.2px);
    }

    .myInfo .ecoData.scrollArea {
        height: calc(var(--vh, 1vh) * 55 - 241.2px);
    }*/
}

/* ---------圖例--------- */

.hintArea {
    min-width: 375px;
    max-width: 375px;
    width: fit-content;
    padding: 10px;
    border-radius: 0.6rem;
    background-color: rgba(255, 255, 255, .9);
    text-align: left;
    position: absolute;
    /*top: 0;*/
    top: 200px;
    /*right: 58px;*/
    left: 0.8rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
    box-sizing: border-box;
    display: none;
}

.hintArea.show {
    display: block;
}

    .hintArea .close {
        top: 0.5rem;
    }

    .hintArea > ul > li {
        font-size: 1rem;
        font-weight: bold;
        color: var(--BlueDark1);
        margin-bottom: 5px;
    }

    .hintArea > ul > li:last-child {
        margin-bottom: 0;
    }

    .hintArea ul li li {
        font-size: 1rem;
        font-weight: normal;
        color: var(--TextColor);
    }

.hintBlock {
    margin-top: 10px;
}

    .hintBlock ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

        .hintBlock ul li {
            margin-bottom: 5px;
        }

            .hintBlock ul li::after {
                content: '|';
                display: inline-block;
                margin-right: 10px;
                margin-left: 5px;
            }

            .hintBlock ul li:last-child::after {
                display: none;
            }

    .hintBlock.mapHint ul li img {
        width: 26px;
        height: 26px;
    }

    .hintBlock.mapHint ul li span {
        line-height: 1.5rem;
    }

.hintArea ul li .legendBar {
    display: block;
    margin-top: 10px;
}

    .hintArea ul li .legendBar img {
        width: 100%;
    }


@media only screen and (max-width: 767px) {

    ul#myTools {
        position: relative;
        top: initial;
        right: initial;
    }

    ul#myTools li {
        position: unset;
    }

    .hintArea {
        min-width: 300px;
        max-width: 375px;
        /*top: 42px;*/
        top: auto;
        /*right: 50%;*/
        left: 50%;
        transform: translate(-50%);
    }

        .hintArea > ul > li {
            font-size: .875rem;
        }

        .hintArea ul li li {
            font-size: .875rem;
        }

    .hintBlock.mapHint ul li img {
        width: 22px;
        height: 22px;
    }

    .hintBlock.mapHint ul li span {
        line-height: 1.25rem;
    }

    .hintBlock.cardHint ul li img {
        width: 16px;
        height: 16px;
    }
}