body {
    font: 16px/1
}

.clearfix:before, .clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

* html .clearfix {
    height: 1%
}

a:focus {
    outline: 2px dashed #ff8714
}

p.sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

.article * {
    font-size: 1.125rem;
    font-family: "Microsoft JhengHei";
    color: #000;
}

.article .mainCon * {
    line-height: 1.875rem
}

.article .mainCon p + p {
    margin-top: 1rem
}

.article .mainCon p.note {
    color: #397bb1;
}

    .article .mainCon p.note i {
        color: #659bc6;
    }

.article .mainCon span.alert {
    color: #e02929;
}

.article #Content .bread > div span, .article #Content .bread > div a {
    color: #616161;
    font-size: .875rem;
    height: 20px;
    line-height: 20px;
    vertical-align: baseline
}

.article #Content .bread > div a {
    color: #397984;
}

    .article #Content .bread > div a:not([href]) {
        color: #000
    }

.article h3 {
    font-size: 1.25rem;
    line-height: 1.25rem;
    font-weight: 700;
    color: #111;
    margin: 1rem 0 .5rem
}

    .article h3.title_sub {
        text-decoration: underline;
        position: relative;
        padding-left: 20px;
        margin: .5rem 0 1.625rem
    }

        .article h3.title_sub:before {
            content: '';
            display: block;
            background-color: #666;
            border-radius: 50px;
            position: absolute;
            width: 13px;
            height: 13px;
            left: 0;
            top: 9px;
            line-height: 15px
        }

.article h4 {
    color: #111;
    font-weight: 700
}

.article .article_text h5 {
    font-size: 1.25rem;
    line-height: 1.875rem;
    margin: 30px 0;
    background: #2c7cb5;
    color: #fff;
    font-weight: 700;
    padding: 5px 10px
}

    .article .article_text h5.subword {
        padding-bottom: 0
    }

    .article .article_text h5 sub {
        color: #fff
    }

.article .article_text h6 {
    font-size: 1.25rem;
    line-height: 1.25rem;
    margin-bottom: .625rem;
    margin-top: 2rem;
    font-weight: 700;
    color: #000
}

.article .hint {
    font-size: 1rem
}

.article .article_paragraph p {
    color: #666;
    font-size: 1.125rem;
    line-height: 1.875rem
}

    .article .article_paragraph p + p {
        margin-top: 1rem
    }

.article .article_text i {
    color: #7e7e7e;
    margin-right: .5rem
}

.article .article_text.remarks {
    position: relative
}

    .article .article_text.remarks h6 {
        font-weight: 400
    }

    .article .article_text.remarks ul {
        padding-bottom: 20px;
        margin-top: -10px;
        margin-left: -20px
    }

    .article .article_text.remarks li {
        text-indent: -5.5em;
        margin-left: 5.5em;
        line-height: 1.25rem
    }

        .article .article_text.remarks li::before {
            content: "．";
            font-size: 4em;
            color: #7e7e7e;
            display: inline-block;
            width: .75em;
            position: relative;
            top: .22em;
            left: 1.35em
        }

/* chart 對比度調整 */
.article .highcharts-container * {
    line-height: initial
}

.article .article_text.link ul {
    margin-left: 1em
}

.article .article_text.link li {
    text-indent: -.75em;
    margin-left: .75em
}

    .article .article_text.link li a {
        text-decoration: underline
    }

        .article .article_text.link li a:hover {
            color: #000
        }

.article .article_text.dowmloadList ul {
    padding-top: 2rem
}

    .article .article_text.dowmloadList ul li a:before {
        display: inline-block;
        border: 2px solid #CCC;
        border-radius: .25rem;
        -moz-border-radius: .25rem;
        -webkit-border-radius: .25rem;
        padding: 2px 4px;
        content: 'File';
        margin-right: .5rem;
        font-family: "Microsoft JhengHei"
    }

    .article .article_text.dowmloadList ul li a:hover {
        text-decoration: underline;
        font-weight: 700;
        color: #111
    }

.article .article_text.dowmloadList.type-zip ul li a:before {
    content: 'ZIP';
    border-color: #ff9734;
    color: #ff9734
}

.article .article_text p + p {
    margin-top: 20px
}

.article .article_phase {
    margin-top: 3rem;
    padding-top: 24px;
    border-top: 1px solid #e2e2e2
}

.fullArea {
    width: 100%;
    height: auto
}

.article .Alert {
    color: #d73c3c;
}

.mar-top-bot {
    margin: 1rem 0
}

.mar-top {
    margin-top: 3rem
}

.article_con a {
    margin: 0 .5rem;
    color: #069;
    text-decoration: underline
}

    .article_con a:hover {
        text-decoration: none;
        color: #3d8cc6
    }

.article sub, .article sup {
    line-height: 100%;
    color: inherit
}

.article a.more {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #16b4d0;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    color: #008299;
    margin: 1rem 0;
    text-decoration: none;
    font-size: 1.125rem
}

    .article a.more:hover {
        background-color: #008299;
        color: #FFF
    }

.article .rwdTips {
    color: #fb4646;
    display: none
}

.article .rwdTip i.fas:before {
    color: #fb4646
}

@media screen and (max-width:1024px) {
    .article .rwdTips {
        display: block
    }
}

.leftArea {
    float: left;
    width: 250px
}

.rightArea {
    float: left;
    width: calc(100% - 250px)
}

@media screen and (max-width:1024px) {
    .leftArea, .rightArea {
        width: 100%
    }
}

.leftArea ul.subMenu {
    padding-right: 20px
}

    .leftArea ul.subMenu li {
        margin: 10px 0;
        border: 1px solid #0e7c90;
    }

        .leftArea ul.subMenu li.on, .leftArea ul.subMenu li:hover {
            background-color: #0e7c90;
        }

        .leftArea ul.subMenu li a {
            display: block;
            width: 100%;
            padding: 10px
        }

        .leftArea ul.subMenu li.on a b {
            color: #FFF;
            font-weight: 700
        }

        .leftArea ul.subMenu li:hover a b {
            color: #FFF
        }

.newsList {
    padding: 1rem
}

    .newsList + .newsList {
        margin: 1rem 0;
        border-top: 1px dashed #CCC
    }

    .newsList .title {
        color: #333;
        font-weight: 700;
        margin-bottom: .5rem
    }

.article .mainCon .newsList .title span {
    display: inline-block;
    padding: .25rem 1rem;
    margin: 0 1rem;
    border: 1px solid #16b4d0;
    border-radius: 2rem;
    -moz-border-radius: 2rem;
    -webkit-border-radius: 2rem;
    color: #127e91;
    font-size: 1rem;
    line-height: 1.25rem
}

    .article .mainCon .newsList .title span i {
        color: #16b4d0;
        margin-right: .5rem;
        line-height: 1.25rem
    }

.newsList p {
    color: #000
}

.airNewsList {
    padding: 1rem 1rem 2rem
}

    .airNewsList + .airNewsList {
        margin: 1rem 0;
        border-top: 1px dashed #CCC
    }

    .airNewsList div {
        width: 160px;
        height: 140px;
        float: left;
        margin-right: 1rem;
        padding: .5rem 0
    }

        .airNewsList div img {
            max-width: 100%;
            max-height: 100%;
            margin: 0 auto;
            vertical-align: middle;
            overflow: hidden
        }

    .airNewsList span {
        font-size: .875rem;
        line-height: 1rem;
        color: #666
    }

    .airNewsList b {
        display: block;
        color: #333;
        font-weight: 700;
        margin-bottom: .5rem
    }

    .airNewsList p {
        color: #000
    }

    .airNewsList a.more {
        float: right;
        line-height: 1.5rem;
        margin: 0;
        cursor: pointer
    }

@media screen and (max-width:600px) {
    .airNewsList div {
        float: none;
        margin: 0 auto;
        width: 80%;
        height: auto
    }
}

.halfArea {
    width: 50%;
    float: left;
    padding: 0 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}

.widgetForecast .halfArea {
    text-align: center;
    width: 100%
}

@media screen and (max-width:1024px) {
    .halfArea {
        width: 100%
    }
}

.Ctrlmap {
    float: left;
    width: 420px;
    position: relative
}

.AQImap {
    float: left;
    width: calc(100% - 420px);
    position: relative;
    min-height: 780px
}

    .AQImap svg {
        position: absolute;
        top: 30px;
        right: 0;
        width: 578px;
        max-width: 100%;
        height: 100%
    }

.Ctrlmap .MyCalendar {
    width: 100%;
    min-height: 300px;
    border: 1px solid #6cb9f1;
    margin: 1rem 0;
    position: relative;
    padding: .75rem
}

    .Ctrlmap .MyCalendar p {
        color: #008299;
        font-weight: 700;
        font-size: 1.5rem;
        text-align: center
    }

    .Ctrlmap .MyCalendar .Calendar_left, .Ctrlmap .MyCalendar .Calendar_right {
        position: absolute;
        top: .75rem;
        background-color: #16b4d0;
        border-radius: 50%;
        width: 2rem;
        height: 2rem
    }

    .Ctrlmap .MyCalendar .Calendar_left {
        left: 1rem
    }

    .Ctrlmap .MyCalendar .Calendar_right {
        right: 1rem
    }

        .Ctrlmap .MyCalendar .Calendar_left i, .Ctrlmap .MyCalendar .Calendar_right i {
            color: #FFF;
            width: 2rem;
            text-align: center;
            line-height: 2rem
        }

            .Ctrlmap .MyCalendar .Calendar_left i:before, .Ctrlmap .MyCalendar .Calendar_right i:before {
                font-size: 1.25rem;
                color: #FFF
            }

    .Ctrlmap .MyCalendar ul.week {
        padding: .5rem 0;
        margin-top: 1rem;
        border-bottom: 1px solid #16b4d0
    }

        .Ctrlmap .MyCalendar ul.week li {
            width: 14.25%;
            float: left;
            text-align: center;
            font-size: .75rem;
            line-height: .75rem
        }

    .Ctrlmap .MyCalendar .date div {
        width: 14.25%;
        float: left;
        text-align: center;
        padding-top: 10px;
        position: relative
    }

        .Ctrlmap .MyCalendar .date div span {
            display: inline-block;
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            filter: Alpha(opacity=30);
            opacity: .3;
            transition: opacity .3s
        }

        .Ctrlmap .MyCalendar .date div.today span {
            border: 1px solid #888
        }

        .Ctrlmap .MyCalendar .date div.today span, .Ctrlmap .MyCalendar .date div:hover span {
            opacity: .9
        }

        .Ctrlmap .MyCalendar .date div a {
            display: inline-block;
            width: 2rem;
            color: #333;
            text-align: center;
            line-height: 2rem;
            position: absolute;
            left: 50%;
            margin-left: -1rem;
            font-weight: 700
        }

        .Ctrlmap .MyCalendar .date div.today a {
            color: #000
        }

@media screen and (max-width:960px) {
    .Ctrlmap, .AQImap {
        width: 100%;
        height: auto;
        min-height: 0
    }

        .AQImap svg {
            position: static;
            width: 100%;
            height: 100%
        }

        .Ctrlmap .MyCalendar .date div span {
            width: 3rem;
            height: 3rem
        }

        .Ctrlmap .MyCalendar .date div a {
            width: 3rem;
            line-height: 3rem;
            margin-left: -1.5rem;
            font-size: 1.25rem
        }
}

@media screen and (max-width:480px) {
    .Ctrlmap .MyCalendar .date div span {
        width: 2rem;
        height: 2rem
    }

    .Ctrlmap .MyCalendar .date div a {
        width: 2rem;
        line-height: 2rem;
        margin-left: -1rem;
        font-size: 1rem
    }
}

@media screen and (max-width:320px) {
    .Ctrlmap .MyCalendar .date div span {
        width: 1.75rem;
        height: 1.75rem
    }

    .Ctrlmap .MyCalendar .date div a {
        width: 1.75rem;
        line-height: 1.75rem;
        margin-left: -.875rem;
        font-size: .75rem
    }
}

.article .inputField {
    font-size: .875rem;
    margin-right: 2rem;
    float: left
}

    .article .inputField:last-child {
        margin-right: 0
    }

    .article .inputField * {
        font-size: .875rem;
        color: #000
    }

    .article .inputField label {
        display: block
    }

    .article .inputField select, .article .inputField input {
        padding: .5rem .325rem;
        min-width: 220px;
        height: 40px;
        border: 1px solid #AAA
    }

    .article .inputField a[data-modal] {
        overflow: hidden
    }
	
    .article .inputField input[readonly] {
        overflow: hidden;
        background-color: #fff;
        cursor: pointer
    }

        .article .inputField a[data-modal]:focus, .article .inputField select:focus, .article .inputField input:focus {
            outline: 2px dashed #ff9734
        }

.article .inputFieldFix {
    float: left;
    margin-top: 1.875rem
}

@media screen and (max-width:1200px) {
    .article .inputField {
        width: calc(50% - 2rem)
    }

        .article .inputField * {
            width: 100%
        }

    .article .inputFieldFix {
        width: 100%;
        text-align: center
    }

        .article .inputFieldFix.fire {
            float: left;
            width: auto
        }
}

@media screen and (max-width:720px) {
    .article .inputField {
        width: 100%;
        margin-right: 0
    }
}

.article .btn {
    padding: .325rem 1rem;
    background-color: #3d6a7b;
    color: #FFF;
    *text-decoration: none !important;
    cursor: pointer;
    text-align: center;
    zoom: 1;
    overflow: visible;
    border: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px
}

    .article .btn:hover, .article .btn:focus {
        background-color: #3d8cc6
    }

.selection .select2-selection:focus {
    outline: 2px dashed #ff9734
}

.modal .modal-cont input:focus {
    outline: 2px dashed #ff9734
}

.modal .ui-accordion .ui-accordion-header:focus {
    outline: 2px dashed #ff9734
}

@keyframes click-wave {
    0% {
        height: 40px;
        width: 40px;
        opacity: .35;
        position: relative
    }

    100% {
        height: 200px;
        width: 200px;
        margin-left: -80px;
        margin-top: -80px;
        opacity: 0
    }
}

.article .optgroup {
    font-size: 1.25em;
    margin-top: 1.875rem;
    float: left;
    margin-right: 40px
}

.article label {
    display: inline-block;
    margin-right: 20px
}

.article input[type="radio"].radio {
    vertical-align: middle
}

.article .lacation {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 40px;
    width: 40px;
    transition: all .15s ease-out 0;
    background: #cbebec;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-right: .5rem;
    outline: none
}

    .article .lacation:hover {
        background: #69ebef
    }

    .article .lacation:checked {
        background: #00C8CE
    }

        .article .lacation:checked::before {
            height: 40px;
            width: 40px;
            position: absolute;
            content: '✔';
            display: inline-block;
            font-size: 26.66667px;
            text-align: center;
            line-height: 40px
        }

        .article .lacation:checked::after {
            -webkit-animation: click-wave .65s;
            -moz-animation: click-wave .65s;
            animation: click-wave .65s;
            background: #40e0d0;
            content: '';
            display: block;
            position: relative;
            z-index: 100
        }

        .article .lacation:checked::before, .lacation:checked::after {
            color: #fff
        }

    .article .lacation.radio {
        border-radius: 50%
    }

        .article .lacation.radio::after {
            border-radius: 50%
        }

.largeBtnList {
    margin: 3rem 0
}

    .largeBtnList li {
        display: inline-block;
        margin: .5rem .5%
    }

        .largeBtnList li a {
            display: block;
            border: 1px solid #16b4d1;
            padding: 10px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            height: 80px;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            text-align: center;
            font-size: 1.125rem
        }

            .largeBtnList li a:before {
                content: "";
                width: 0;
                height: 100%;
                display: inline-block;
                vertical-align: middle
            }

            .largeBtnList li a:hover, .largeBtnList li a.clicked, .largeBtnList li a:hover sub, .largeBtnList li a.clicked sub {
                background-color: #008299;
                color: #FFF
            }

.article .MyTable .MyCaption {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: #000;
    padding: .625rem;
    background-color: #eeeced;
    border: 2px solid #FFF
}

.article .MyTable table {
    width: 100%
}

.article .MyTable .table-title {
    display: none;
    float: left;
    width: 120px
}

.article .MyTable .table-con {
    float: left;
    width: 100%
}

.article .MyTable.AQI {
    margin-top: 0;
    margin-bottom: 24px
}

.article .MyTable .FixHeight tbody tr + tr th, .article .MyTable .FixHeight tbody tr + tr td {
    height: 67px
}

.article .MyTable .FixHeight td span {
    display: block;
    height: 65px;
    padding: 0;
    line-height: 65px;
    vertical-align: middle
}

@media screen and (max-width:1200px) {
    .article .MyTable.spm .table-title {
        display: block
    }

    .article .MyTable.spm .table-con {
        width: calc(100% - 120px);
        overflow-x: scroll
    }

        .article .MyTable.spm .table-con table {
            width: 1000px
        }

            .article .MyTable.spm .table-con table th:first-child {
                display: none
            }
}

@media screen and (max-width:1024px) {
    .article .MyTable .table-title {
        display: block
    }

    .article .MyTable .table-con {
        width: calc(100% - 120px);
        overflow-x: scroll
    }

        .article .MyTable .table-con table {
            width: 978px
        }

            .article .MyTable .table-con table th:first-child {
                display: none
            }
}

.article .MyTable table caption {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: #000;
    padding: .625rem;
    background-color: #eeeced;
    border: .125rem solid #FFF
}

.article .MyTable table th {
    border: .125rem solid #FFF;
    background-color: #deefff;
    text-align: center;
    color: #000;
    font-weight: 700;
    font-size: 1rem;
    padding: .625rem
}

.article .MyTable table thead th {
    background-color: #c5e5fe;
    border: .125rem solid #FFF
}

.article .MyTable table td {
    background-color: #f0f5f9;
    border: .125rem solid #FFF;
    border-right: none;
    text-align: center;
    font-size: 1rem;
    color: #000
}

    .article .MyTable table td span {
        display: block;
        padding: .625rem;
        font-size: 1rem;
        color: #000
    }

    .article .MyTable table td ul {
        margin-left: 1.5rem
    }

        .article .MyTable table td ul li {
            font-size: 1rem;
            color: #000;
            text-align: left;
            list-style: disc
        }

.article .MyTable.spm table th {
    padding: .425rem .325rem
}

.article .MyTable.spm table tbody th {
    padding: .425rem .625rem
}

.article .MyTable.spm table td {
    padding: .425rem .525rem
}

.article .MyTable .AQIlegend {
    width: 100%
}

    .article .MyTable .AQIlegend table td {
        width: 16%;
        text-align: left
    }

        .article .MyTable .AQIlegend table td sapn {
            padding: .625rem;
            font-size: .75rem;
            text-align: left
        }

@media screen and (max-width:1024px) {
    .article .MyTable .AQIlegend {
        overflow-x: scroll
    }

        .article .MyTable .AQIlegend table {
            width: 1098px
        }
}

@media screen and (max-width:960px) {
    .article .MyTable.general {
        overflow-x: scroll
    }

        .article .MyTable.general table {
            width: 800px
        }
}

.article ul.AQIlegend {
    margin: 1.5rem 0
}

    .article ul.AQIlegend li span {
        width: 100px;
        display: inline-block;
        font-size: .875rem;
        color: #000
    }

        .article ul.AQIlegend li span img {
            width: 15px;
            height: 15px;
            display: inline-block;
            margin-right: 10px
        }

    .article ul.AQIlegend li p {
        display: inline-block;
        font-size: .875rem;
        color: #000
    }

table.MyGridView {
    width: 100%;
    margin: 1rem 0
}

    table.MyGridView caption {
        margin-top: 1.25rem;
        text-align: center;
        font-size: 1rem;
        font-weight: 700;
        color: #000;
        padding: .625rem;
        background-color: #eeeced;
        border: .125rem solid #FFF
    }

    table.MyGridView th {
        border: .125rem solid #FFF;
        background-color: #deefff;
        text-align: center;
        color: #000;
        font-weight: 700;
        font-size: 1rem;
        padding: .625rem
    }

    table.MyGridView thead th {
        background-color: #c5e5fe;
        border: .125rem solid #FFF
    }

    table.MyGridView td {
        background-color: #f0f5f9;
        border: .125rem solid #FFF;
        border-right: none;
        text-align: center;
        font-size: 1rem;
        color: #000;
        padding: 10px
    }

        table.MyGridView td span {
            display: block;
            padding: .625rem;
            font-size: 1rem;
            color: #000
        }

        table.MyGridView td a:hover {
            outline: 2px dotted #ff8714
        }

        table.MyGridView td i, .article .article_text i {
            color: #333
        }

.DustGridView tr td:nth-child(2) {
    text-align: left;
    padding: 10px 20px
}

.article .MyMap {
    position: relative;
    margin-bottom: 48px
}

    .article .MyMap .map {
        width: 100%;
        height: 600px;
        background-color: #dff0ff;
        z-index: 960
    }

    .article .MyMap .map_small {
        width: 100%;
        height: 400px;
        background-color: #dff0ff;
        z-index: 961
    }

    .article .MyMap .layer {
        position: absolute;
        left: .625rem;
        top: .625rem;
        z-index: 962;
        background-color: rgba(0,0,0,.5);
        padding: 5px .625rem
    }

        .article .MyMap .layer img {
            display: inline-block;
            vertical-align: middle;
            line-height: 2rem;
            height: 1.5rem;
            width: 1.5rem
        }

        .article .MyMap .layer .switchText {
            font-size: 1rem;
            height: 2.5rem;
            line-height: 2.5rem;
            color: #FFF;
            text-align: left;
            width: 110px;
            margin-right: 0
        }

        .article .MyMap .layer label.switchText span {
            color: #fff;
            font-size: 1rem;
            background: rgba(0, 0, 0, .65);
            border-radius: 30px;
            padding: 1px 7px;
        }

        .article .MyMap .layer .switchText.enpage {
            width: auto;
        }

.gisTools {
    position: absolute;
    right: .5rem;
    top: .5rem;
    z-index: 970
}

    .gisTools a {
        display: block;
        width: 50px;
        height: 50px;
        border-radius: 5px;
        background-color: #6cb8ef;
        border: 2px solid #FFF;
        margin: .5rem;
        text-align: center;
        line-height: 50px;
        font-size: 1.75rem;
        cursor: pointer
    }

        .gisTools a:hover {
            background-color: #3d8cc4
        }

        .gisTools a i {
            margin: 0;
            color: #f1f4f7
        }

        .gisTools a:hover i {
            color: #FFF
        }

        .gisTools a.mapBtn {
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center center
        }

            .gisTools a.mapBtn.map_1 {
                background-image: url(../images/map_1.png)
            }

                .gisTools a.mapBtn.map_1:hover {
                    background-image: url(../images/map_2.png)
                }

            .gisTools a.mapBtn.map_2 {
                background-image: url(../images/map_2.png)
            }

                .gisTools a.mapBtn.map_2:hover {
                    background-image: url(../images/map_1.png)
                }

.article .switch {
    position: relative;
    display: inline-block;
    float: right;
    width: 65px;
    height: 28px;
    right: 0;
    top: 0;
    margin-left: 10px;
    margin-right: 0;
    color: #FFF
}

    .article .switch input {
        display: none
    }

div.clearfix {
    color: #000;
}

.article .slider {
    position: absolute;
    cursor: pointer;
    top: 8px;
    left: 0;
    right: 0;
    bottom: -8px;
    background-color: #018298;
    -webkit-transition: .4s;
    transition: .4s
}

    .article .slider:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        right: 3px;
        bottom: 3px;
        background-color: #fff;
        -webkit-transition: .4s;
        transition: .4s
    }

.article input:checked + .slider {
    background-color: #CCC
}

.article input:focus + .slider {
    box-shadow: 0 0 1px #01586c
}

.article input:checked + .slider:before {
    -webkit-transform: translateX(-37px);
    -ms-transform: translateX(-37px);
    transform: translateX(-37px)
}

.article .slider.round {
    border-radius: 20px
}

    .article .slider.round:before {
        border-radius: 50%
    }

.article .sliderText {
    font-size: .875rem;
    line-height: 1.75rem;
    color: #FFF;
    float: left;
    padding-left: 12px;
    width: 65px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}

.article input:checked + .slider .sliderText {
    float: right;
    color: #000;
    text-align: right;
    padding-right: 8px
}

.article .sliderText:focus {
    outline: 2px dashed #ff9734
}

.article input:checked + .slider .sliderText:before {
    -webkit-transition: .4s;
    transition: .4s;
    -webkit-transform: translateX(-25px);
    -ms-transform: translateX(-25px);
    transform: translateX(-25px)
}

.MyChartArea {
    margin-top: 32px
}

    .MyChartArea .MyChart, .MyChart {
        width: 100%;
        height: 440px
    }

    .MyChartArea p {
        text-align: center
    }

.MyFigure {
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin-top: 1rem
}

    .MyFigure img {
        height: 360px;
        width: auto;
        max-width: 100%;
        margin: 20px auto
    }

    .MyFigure.legend {
        height: auto
    }

        .MyFigure.legend img {
            height: 3rem
        }

@media screen and (max-width:600px) {
    .MyFigure {
        height: auto
    }

        .MyFigure img {
            width: 100%;
            height: auto
        }
}

.MyPicture {
    width: 100%;
    height: auto;
    margin: 1rem 0;
    position: relative
}

    .MyPicture img {
        width: 100%;
        max-width: 650px;
        height: auto;
        margin: 0 auto
    }

    .MyPicture.full img {
        max-width: 100%
    }

    .MyPicture figcaption {
        text-align: center;
        margin: 0;
        padding-top: .5rem;
        font-size: 1rem
    }

.twoPics {
    display: block
}

    .twoPics .MyPicture {
        width: 48%;
        float: left
    }

        .twoPics .MyPicture + .MyPicture {
            margin-left: 2%;
            margin-top: 20px
        }

@media screen and (max-width:960px) {
    .twoPics .MyPicture {
        width: 100%
    }

        .twoPics .MyPicture + .MyPicture {
            margin-left: 0
        }
}

.MyLegend {
    margin: 1rem auto;
    overflow: auto
}

    .MyLegend table {
        width: 100%;
        min-width: 500px
    }

        .MyLegend table caption {
            color: #111;
            font-weight: 700
        }

        .MyLegend table tr th {
            background: #eefbff;
            border: 1px solid #ccc;
            padding: 5px;
            color: #111;
            font-size: 1rem;
            text-align: center
        }

        .MyLegend table tr td {
            border: 1px solid #ccc;
            padding: 5px;
            font-size: 1rem;
            text-align: center
        }

        .MyLegend table img {
            width: 1.5rem;
            height: 1.5rem
        }

.MyNewCarousel {
    width: 100%;
    margin: 1rem auto;
    position: relative;
    overflow: hidden
}

    .MyNewCarousel .MyNewCarouselInner {
        width: 90%;
        margin: 0 auto
    }

    .MyNewCarousel .pt_bannerList {
        width: 90%;
        margin: 0 auto
    }

    .MyNewCarousel .carousel_box {
        width: 90%;
        margin: 0 auto;
        overflow: hidden;
        text-align: center;
        position: absolute
    }

        .MyNewCarousel .carousel_box img {
            width: 100%;
            margin: 0 auto;
            vertical-align: central
        }

    .MyNewCarousel .carousel_indicator {
        text-align: center;
        z-index: 923;
        width: 90%;
        margin: 0 auto
    }

        .MyNewCarousel .carousel_indicator li {
            display: table-cell;
            width: 40px;
            height: 82px;
            text-align: center;
            vertical-align: bottom;
            position: relative;
            line-height: 1.625rem;
            background-color: #FFF
        }

            .MyNewCarousel .carousel_indicator li a {
                display: block;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background-color: #CCC;
                text-align: center;
                position: absolute;
                top: 8px;
                left: calc(50% - 7px)
            }

            .MyNewCarousel .carousel_indicator li.on {
                background-color: #FFF
            }

                .MyNewCarousel .carousel_indicator li.on a {
                    background-color: #16b4d0
                }

        .MyNewCarousel .carousel_indicator p {
            line-height: 1.625rem;
            font-size: 1rem
        }

    .MyNewCarousel a {
        width: 50px;
        position: absolute;
        top: calc(50% - 4rem);
        text-align: center;
        cursor: pointer;
        vertical-align: middle;
        padding: 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box
    }

        .MyNewCarousel a#carousel_prev {
            left: 0
        }

        .MyNewCarousel a#carousel_next {
            right: 0
        }

.article .article_text .MyNewCarousel a i {
    margin: 0
}

.MyNewCarousel a i:before {
    font-size: 36px;
    color: #DDD;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px
}

.MyNewCarousel a i:focus {
    outline: 2px dashed #ff9734
}

    .MyNewCarousel a i:hover:before, .MyNewCarousel a i:focus:before {
        display: inline-block;
        width: 50px;
        height: 50px;
        color: #FFF;
        background-color: #16b4d0;
        border-radius: 50%
    }

@media screen and (max-width:1200px) {
    .MyNewCarousel .carousel_indicator div {
        width: 42.5px
    }
}

@media screen and (max-width:1024px) {
    .MyNewCarousel .carousel_indicator p {
        display: none
    }

    .MyNewCarousel .carousel_indicator li.on p {
        display: block
    }

    .MyNewCarousel .carousel_indicator div span {
        width: 10px;
        height: 10px
    }
}

.MyCarousel {
    width: 100%;
    height: 550px;
    margin: 1rem 0;
    position: relative
}

    .MyCarousel .MyCarouselInner {
        width: 90%;
        margin: 0 auto;
        height: 500px;
        overflow: hidden
    }

    .MyCarousel .carousel_box {
        width: 100%;
        height: 500px;
        margin: 0 auto;
        overflow: hidden;
        float: left
    }

        .MyCarousel .carousel_box img {
            width: 100%;
            max-height: 500px;
            margin: 0 auto;
            vertical-align: central
        }

    .MyCarousel .carousel_indicator {
        height: 50px;
        text-align: center;
        z-index: 924;
        width: 90%;
        margin: 0 auto;
        position: absolute;
        left: 5%;
        bottom: 0
    }

        .MyCarousel .carousel_indicator div {
            display: table-cell;
            width: 40px;
            height: 82px;
            text-align: center;
            vertical-align: bottom;
            position: relative;
            line-height: 1.625rem
        }

            .MyCarousel .carousel_indicator div span {
                display: block;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background-color: #CCC;
                text-align: center;
                position: absolute;
                top: 8px;
                left: 13px
            }

            .MyCarousel .carousel_indicator div.active span {
                background-color: #16b4d0
            }

            .MyCarousel .carousel_indicator div p {
                line-height: 1.625rem;
                font-size: 1rem
            }

        .MyCarousel .carousel_indicator li {
            display: table-cell;
            width: 40px;
            height: 82px
        }

            .MyCarousel .carousel_indicator li:before {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                -moz-border-radius: 50%;
                -webkit-border-radius: 50%;
                background-color: #CCC
            }

                .MyCarousel .carousel_indicator li:before:hover, .MyCarousel .carousel_indicator li.on:before {
                    background-color: #bfe4ff
                }

    .MyCarousel a {
        width: 50px;
        position: absolute;
        top: 225px;
        text-align: center;
        cursor: pointer;
        vertical-align: middle
    }

        .MyCarousel a#carousel_prev {
            left: 0
        }

        .MyCarousel a#carousel_next {
            right: 0
        }

.article .article_text .MyCarousel a i {
    margin: 0
}

.MyCarousel a i:before {
    font-size: 36px;
    color: #DDD;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px
}

.MyCarousel a i:hover:before {
    display: inline-block;
    width: 50px;
    height: 50px;
    color: #FFF;
    background-color: #3d6a7b;
    border-radius: 50%
}

@media screen and (max-width:1200px) {
    .MyCarousel .carousel_indicator div {
        width: 42.5px
    }
}

@media screen and (max-width:1024px) {
    .MyCarousel {
        height: 324px
    }

        .MyCarousel .MyCarouselInner, .MyCarousel .carousel_box {
            height: 274px
        }

            .MyCarousel .carousel_box img {
                max-height: 274px
            }

        .MyCarousel a {
            top: 137px
        }

        .MyCarousel .carousel_indicator div p {
            display: none
        }

        .MyCarousel .carousel_indicator div.active p {
            display: block
        }

        .MyCarousel .carousel_indicator div span {
            width: 10px;
            height: 10px
        }
}

@media screen and (max-width:600px) {
    .MyCarousel {
        height: 230px
    }

        .MyCarousel .MyCarouselInner, .MyCarousel .carousel_box {
            height: 180px
        }

            .MyCarousel .carousel_box img {
                max-height: 180px
            }

        .MyCarousel a {
            top: 65px
        }
}

.MyNewsSlide.md_slideShow {
    margin: 1rem auto 0
}

.md_slideShow .pt_bannerList li figure {
    background-color: #FFF
}

.MyNewsSlide.md_slideShow .pt_bannerList img {
    max-height: 300px
}

.hashtagBtn {
    margin-top: 2rem
}

    .hashtagBtn a {
        display: inline-block;
        border: 1px solid #008299;
        border-radius: 50px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        color: #008299;
        padding: 2px 12px;
        margin: 2px
    }

        .hashtagBtn a + a {
            margin-left: 4px
        }

        .hashtagBtn a:hover {
            background-color: #008299;
            color: #FFF
        }

.MyAlbum {
    padding-top: 1rem
}

    .MyAlbum li {
        margin-bottom: 20px;
        float: left;
        width: 32.4%;
        margin-left: 1.4%
    }

        .MyAlbum li:nth-child(3n+1) {
            margin-left: 0
        }

        .MyAlbum li a figure div {
            max-height: 200px;
            overflow: hidden
        }

        .MyAlbum li a figure img {
            max-width: 100%;
            width: 100%;
            cursor: pointer
        }

        .MyAlbum li a figcaption {
            text-align: center;
            font-size: 1.125rem;
            margin-top: 10px;
            line-height: 2rem;
            color: #000
        }

@media screen and (min-width:1200px) {
    .MyAlbum li a figure img {
        min-height: 200px
    }
}

.article .mainCon .MyCalc {
    display: inline-block;
    margin: 0 .5rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    line-height: 30px;
    text-align: center;
    background-color: #f0f0f0;
    cursor: pointer
}

    .article .mainCon .MyCalc i {
        line-height: 30px;
        font-size: 20px
    }

        .article .mainCon .MyCalc i:before {
            font-size: 18px;
            color: #5e5e5e;
        }

    .article .mainCon .MyCalc:hover {
        background-color: #3d6a7b
    }

        .article .mainCon .MyCalc:hover i:before {
            color: #FFF
        }

.article .mainCon .MyCalcCont, .article .moreInfo .MyMoreInfoCont {
    position: absolute;
    right: 0;
    top: 0;
    width: 280px;
    background-color: rgba(0,0,0,.8);
    box-shadow: 1px 1px 3px rgba(0,0,0,.3);
    z-index: 940;
    border: 1px solid #CCC;
    padding: 1rem;
    border-radius: 5px
}

    .article .mainCon .MyCalcCont .MyCalcTable {
        width: 100%
    }

        .article .mainCon .MyCalcCont .MyCalcTable caption {
            color: #FFF;
            font-weight: 700;
            font-size: 1.125rem;
            padding-bottom: .5rem
        }

            .article .mainCon .MyCalcCont .MyCalcTable caption span {
                color: #fff;
                cursor: pointer;
                position: absolute;
                right: 1rem;
                top: 1rem
            }

                .article .mainCon .MyCalcCont .MyCalcTable caption span img:focus {
                    outline: 2px dashed #ff9734
                }

        .article .mainCon .MyCalcCont .MyCalcTable thead th {
            border: 1px solid #FFF;
            background-color: #c4e4fd;
            text-align: center;
            color: #333
        }

        .article .mainCon .MyCalcCont .MyCalcTable tbody td {
            text-align: center;
            background-color: #f0f5f9;
            border: 1px solid #FFF
        }

            .article .mainCon .MyCalcCont .MyCalcTable tbody td img {
                margin: 0 auto
            }

.article .moreInfo {
    margin: .5rem 0;
    position: relative;
    z-index: 941;
    float: right
}

    .article .moreInfo a {
        border-radius: 50px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border: 1px solid #008299;
        color: #008299;
        padding: 4px 8px;
        cursor: pointer
    }

        .article .moreInfo a:hover {
            background-color: #008299;
            color: #FFF
        }

    .article .moreInfo .MyMoreInfoCont {
        right: 0;
        top: 0;
        padding: 1rem;
    }

        .article .moreInfo .MyMoreInfoCont h6 {
            color: #FFF
        }

        .article .moreInfo .MyMoreInfoCont #sp_index_board {
            cursor: pointer;
            position: absolute;
            right: 1rem;
            top: 1rem
        }

            .article .moreInfo .MyMoreInfoCont #sp_index_board img:focus {
                outline: 2px dashed #ff9734
            }

        .article .moreInfo .MyMoreInfoCont .AQIlegend {
            margin: .5rem 0
        }

            .article .moreInfo .MyMoreInfoCont .AQIlegend li * {
                color: #FFF
            }

.article .dailyAQISelect {
    margin-bottom: 1.5rem
}

    .article .dailyAQISelect .inputField {
        width: calc(50% - 10px)
    }

        .article .dailyAQISelect .inputField:first-child {
            margin-right: 20px
        }

        .article .dailyAQISelect .inputField select {
            min-width: 0;
            width: 100%
        }

.article .areaAQIbox {
    display: table;
    width: 100%;
    padding: .5rem 2rem;
    border: 3px solid #CCC;
    margin-bottom: 1rem
}

    .article .areaAQIbox h6, .article .areaAQIbox p {
        width: 50%;
        display: table-cell;
        vertical-align: middle;
        color: #333;
        font-weight: 700
    }

    .article .areaAQIbox p {
        text-align: right;
        font-size: 2.25rem;
        font-weight: 400;
        line-height: 2.5rem
    }

.article .carousel {
    width: 100%;
    height: 80px;
    overflow: hidden;
    position: relative
}

    .article .carousel .carousel_inner {
        height: 80px;
        overflow: hidden;
        position: relative
    }

        .article .carousel .carousel_inner div {
            float: left;
            height: 80px;
            font-size: 1.25rem
        }

    .article .carousel .slick-arrow {
        position: absolute;
        top: 30px;
        padding: 0;
        background: none;
        box-shadow: none;
        border: 0;
        display: none;
        z-index: 920
    }

    .article .carousel .slick-prev {
        left: 2px
    }

    .article .carousel .slick-next {
        left: 126px
    }

    .article .carousel .slick-arrow i:before {
        font-size: 2.25rem;
        color: #CCC;
        cursor: pointer
    }

.article .MyForecastAlert {
    margin: 24px 0;
    padding: 3rem;
    background-color: #def0ff;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-image: url(../images/Forecast/ForecastAlert_BG.png);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat
}

    .article .MyForecastAlert h5 {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 3.125rem;
        text-align: center;
        color: #000
    }

/*3days option*/
.article .mainCon .dayopt {
    margin-left: 10px;
}

    .article .mainCon .dayopt button {
        background-color: #fff;
        border: 1px solid #76a5db;
        border-radius: 50px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        color: #4777ae;
        font-size: 1rem;
        line-height: 1.125rem;
        padding: 4px 20px;
        margin: 5px;
        transition: .3s all ease-in;
    }

        .article .mainCon .dayopt button:hover, .article .mainCon .dayopt button::marker {
            background-color: #4677af;
            color: #FFF;
            cursor: pointer;
        }

        .article .mainCon .dayopt button:focus {
            outline: 2px solid #ff9734;
        }



.article .forecastMapArea ul {
    margin: 24px 0;
    display: flex;
    align-items: end;
    align-self: center;
}

    .article .forecastMapArea ul li {
        width: 32%
    }

        .article .forecastMapArea ul li + li {
            margin-left: 2%;
        }

        .article .forecastMapArea ul li p {
            display: flex;
            flex-direction: column;
            align-items: end;
            padding-right: 30%;
            min-height: 60px;
        }

            .article .forecastMapArea ul li p span {
                color: #333;
                font-size: .95rem;
            }

        .article .forecastMapArea ul li svg {
            width: 100%;
            height: 33vw;
            max-height: 450px
        }

.article .forecastMapArea.has4days ul li {
    width: 23%;
}

@media screen and (max-width:1024px) {
    .article .forecastMapArea {
        width: 100%;
        overflow-x: scroll
    }

        .article .forecastMapArea ul {
            width: 1280px
        }

            .article .forecastMapArea ul li {
                width: 320px
            }

                .article .forecastMapArea ul li + li {
                    margin-left: 20px
                }

                .article .forecastMapArea ul li svg {
                    width: 300px;
                    height: 395px
                }
}

.MyTable {
    margin-top: 24px
}

.pa {
    fill: #F0F5F9;
    stroke: #555;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.article .stationTitle {
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 4rem;
    margin-bottom: 1.5rem
}

.stationTitle.epa {
    background-image: url(../images/AirTW_icon/EPA.png)
}

.stationTitle.epb {
    background-image: url(../images/AirTW_icon/EPB.png)
}

    .stationTitle.epb a {
        color: #487a9d;
        text-decoration: none;
        padding: 3px 26px 3px 7px;
        border: 1px solid #487a9d;
        border-radius: 20px;
        position: relative
    }

        .stationTitle.epb a:after {
            color: #487a9d;
            content: '\f061';
            font-size: 1rem;
            font-family: "Font Awesome 5 Free";
            font-weight: 800;
            position: absolute;
            top: 5px;
            right: 7px
        }

        .stationTitle.epb a:hover {
            color: #fff;
            background-color: #487a9d
        }

            .stationTitle.epb a:hover:after {
                color: #fff
            }

.stationTitle.tcc {
    background-image: url(../images/AirTW_icon/Tcc.png)
}

.stationTitle.spc {
    background-image: url(../images/AirTW_icon/Spc.png)
}

.stationTitle.fix {
    background-image: url(../images/AirTW_icon/Fix.png)
}

.stationTitle.wait {
    background-image: url(../images/AirTW_icon/Wait.png)
}

.stationTitle.traffic {
    background-image: url(../images/AirTW_icon/car.png)
}

.article .stationTitle h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #000
}

    .article .stationTitle h3 span {
        font-size: 1.125rem;
        padding: 0 .5rem;
        color: #000
    }

.AQ {
    margin: 24px 0
}

.article .AQBox {
    float: left;
    width: 32%;
    height: 92px;
    border: 1px solid #ccc;
    margin-left: 2%;
    margin-bottom: 24px;
    padding: 1rem;
    position: relative
}

    .article .AQBox:nth-child(3n+1) {
        margin-left: 0
    }

    .article .AQBox h5 {
        color: #000;
        font-size: 1.25rem;
        font-weight: 700;
        vertical-align: bottom
    }

    .article .AQBox p {
        font-size: .875rem
    }

        .article .AQBox p.num {
            position: absolute;
            right: 1.5rem;
            top: 50%;
            font-size: 2.3rem;
            height: 2.5rem;
            line-height: 2.5rem;
            color: #333;
            margin-top: -1.25rem
        }

.article .valuedw p {
    line-height: 1.25em;
    display: inline-block;
    margin-right: 20px
}

    .article .valuedw p + p {
        border-left: 3px solid #C7C7C7;
        padding-left: 20px
    }

    .article .valuedw p i {
        padding-left: .5em
    }

.SVGmap {
    width: 100%;
    height: 700px;
    margin: 0 auto;
    margin-bottom: 30px
}

    .SVGmap #name text {
        font-size: 12px
    }

    .SVGmap #Info text {
        font-size: 14px
    }

.stationTitle.season, .circle {
    float: left;
    display: block
}

.stationTitle.season {
    padding-left: .5em
}

.circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: url(../images/TaskMonitoring/Icon_pagelines.png) no-repeat center;
    background-size: 30px 39px
}

    .circle.spring {
        background-color: #BF4984
    }

    .circle.summer {
        background-color: #60AA5B
    }

    .circle.fall {
        background-color: #C28E5A
    }

    .circle.winter {
        background-color: #4981BF
    }

    .circle.year {
        background-color: #b4b4b4
    }

@media screen and (max-width:768px) {
    .SVGmap {
        width: 720px;
        max-width: 100%;
        height: 700px;
        max-height: 100vw
    }
}

.th_file ul.file_first li {
    font-weight: 700;
    color: #000
}

.th_file ul.file_first .file_second {
    margin: 0 0 1.5rem
}

.article_islandeast {
    padding-bottom: 0
}

.SysBox {
    float: left;
    width: 23%;
    margin: 0 1%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}

    .SysBox a {
        display: block;
        text-align: center
    }

        .SysBox a i {
            height: 5rem;
            margin: 2rem 0 1rem
        }

            .SysBox a i:before {
                font-size: 4rem;
                color: #aaa;
                line-height: 5rem
            }

.article .mainCon .SysBox a h5 {
    color: gray;
    font-size: 1.125rem;
    line-height: 1.5rem
}

.SysBox a:hover i {
    margin: 2rem 0 1rem;
    -webkit-animation: shake 1s;
    -moz-animation: shake 1s;
    -ms-animation: shake 1s;
    -o-animation: shake 1s;
    animation: shake 1s
}

    .SysBox a:hover i:before {
        color: #3d8cc5
    }

.article .mainCon .SysBox a:hover h5 {
    color: #115485
}

.SysBox a:focus i, .SysBox a.selected i {
    margin: 2rem 0 1rem
}

    .SysBox a:focus i:before, .SysBox a.selected i:before {
        color: #3d8cc5;
        font-size: 4.5rem
    }

.article .mainCon .SysBox a:focus h5, .article .mainCon .SysBox a.selected h5 {
    color: #115485;
    font-weight: 700
}

#hierarchyMap {
    height: 500px;
    width: 100%;
    border-radius: 5px;
    position: relative;
    margin-top: 2rem
}

    #hierarchyMap .triangle {
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -15px;
        width: 0;
        height: 0;
        border-top: 30px solid #FFF;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent
    }

    #hierarchyMap .MapPanel {
        width: 50%;
        margin: 0 auto;
        margin-top: 150px;
        background-color: rgba(255,255,255,.85);
        border: 1px solid #ddeffb;
        border-radius: 5px;
        padding: 20px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        text-align: center;
        display: none
    }

        #hierarchyMap .MapPanel h5 {
            color: #000;
            font-size: 1.125rem;
            font-weight: 700;
            line-height: 200%
        }

.hierarchyMap {
    background-image: url(../images_Index/people/map.jpg);
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #75cef0
}

@media screen and (max-width:1200px) {
    .hierarchyMap {
        background-size: auto 100%;
        background-position: center right
    }
}

.Map1 {
    background-image: url(../images/EnvMonitoring/map_1.jpg)
}

.Map2 {
    background-image: url(../images/EnvMonitoring/map_2.jpg)
}

.Map3 {
    background-image: url(../images/EnvMonitoring/map_3.jpg)
}

.Map4 {
    background-image: url(../images/EnvMonitoring/map_4.jpg)
}

@-webkit-keyframes shake {
    0% {
        -webkit-transform: rotate(0deg)
    }

    20% {
        -webkit-transform: rotate(20deg)
    }

    40% {
        -webkit-transform: rotate(-20deg)
    }

    60% {
        -webkit-transform: rotate(20deg)
    }

    80% {
        -webkit-transform: rotate(-20deg)
    }

    100% {
        -webkit-transform: rotate(0deg)
    }
}

@-moz-keyframes shake {
    0% {
        -moz-transform: rotate(0deg)
    }

    20% {
        -moz-transform: rotate(20deg)
    }

    40% {
        -moz-transform: rotate(-20deg)
    }

    60% {
        -moz-transform: rotate(20deg)
    }

    80% {
        -moz-transform: rotate(-20deg)
    }

    100% {
        -moz-transform: rotate(0deg)
    }
}

@-ms-keyframes shake {
    0% {
        -ms-transform: rotate(0deg)
    }

    20% {
        -ms-transform: rotate(20deg)
    }

    40% {
        -ms-transform: rotate(-20deg)
    }

    60% {
        -ms-transform: rotate(20deg)
    }

    80% {
        -ms-transform: rotate(-20deg)
    }

    100% {
        -ms-transform: rotate(0deg)
    }
}

@-o-keyframes shake {
    0% {
        -o-transform: rotate(0deg)
    }

    20% {
        -o-transform: rotate(20deg)
    }

    40% {
        -o-transform: rotate(-20deg)
    }

    60% {
        -o-transform: rotate(20deg)
    }

    80% {
        -o-transform: rotate(-20deg)
    }

    100% {
        -o-transform: rotate(0deg)
    }
}

@keyframes shake {
    0% {
        transform: rotate(0deg)
    }

    20% {
        transform: rotate(20deg)
    }

    40% {
        transform: rotate(-20deg)
    }

    60% {
        transform: rotate(20deg)
    }

    80% {
        transform: rotate(-20deg)
    }

    100% {
        transform: rotate(0deg)
    }
}

.Central .AQ {
    margin-bottom: 0
}

.AQBox.AQIbox {
    width: 65%;
    box-shadow: 3px 3px 5px rgba(50,95,80,.3)
}

.AQBox p.AQIcondition {
    position: absolute;
    right: 6.5rem;
    top: 67%;
    font-size: 1.25rem;
    color: #333;
    margin-top: -1.75rem !important
}

.optBox {
    padding: 30px 0;
    margin-top: 30px;
    border-top: 1px solid #EAEAEA;
    border-bottom: 1px solid #EAEAEA
}

.optBoxspm {
    margin-top: 20px
}

    .optBoxspm ul.mtg_list {
        width: 100%;
        float: unset
    }

ul.mtg_list {
    float: left;
    display: block
}

.mtg_list li {
    float: left;
    display: block;
    margin-bottom: 10px
}

    .mtg_list li + li {
        margin-left: 15px
    }

.article .mainCon .mtg_list li a, .article .mainCon section.th_area .mtg_list li a {
    -moz-transition: all .2s;
    -o-transition: all .2s;
    -webkit-transition: all .2s;
    transition: all .2s;
    border: 1px solid #16b4d0;
    display: inline-block;
    border-radius: 50px;
    padding: 4px 17px;
    height: 33px;
    line-height: 24px
}

.mtg_list li.on a, .mtg_list li:hover a {
    background-color: #107ead;
    color: #FFF
}

.mtg_list li a sub {
    -moz-transition: all .2s;
    -o-transition: all .2s;
    -webkit-transition: all .2s;
    transition: all .2s;
    vertical-align: sub;
    font-size: xx-small
}

.mtg_list li.on a sub, .mtg_list li:hover a sub {
    color: #FFF
}

.ConcentrationSide {
    text-align: left;
    position: absolute;
    right: 30%;
    top: 200px
}

.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: 1.125em;
    font-weight: 700;
    padding-bottom: 5px
}

.BarNum li {
    font-size: .875em;
    padding-bottom: 10px
}

    .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
    }

.ConcentrationMap {
    position: relative;
    min-height: 500px;
    margin-top: 10px
}

.maptopbar {
    width: 100%;
    clear: both
}

.maptime, .mapbtn {
    float: left;
    display: block;
    margin-right: 15px
}

.maptime {
    text-align: center;
    padding-left: calc(60% - 260px)
}

.article .mapbtn {
    background-color: #3d6a7b;
    color: #FFF;
    *text-decoration: none !important;
    cursor: pointer;
    text-align: center;
    zoom: 1;
    overflow: visible;
    border: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 30px;
    line-height: 1.125rem
}

    .article .mapbtn:hover {
        background-color: #3d8cc6
    }

    .article .mapbtn i:before {
        color: #FFF
    }

.article .mainCon .mapchange.btn i {
    font-size: 1.5rem
}

.imTWmark, .imTWLine, .imDensity {
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: auto 490px;
    width: 265px;
    height: 490px;
    position: absolute;
    left: 30%
}

.imTWmark {
    background-image: url(../images/ConcentrationMap/central_TW_mask.png);
    z-index: 3
}

.imTWLine {
    background-image: url(../images/ConcentrationMap/central_TW_line.png);
    z-index: 2
}

.imDensity {
    background-image: url(../images/ConcentrationMap/central_AQI_test.png);
    opacity: .8
}

.imTWmark, .imTWLine, .imDensity, .island {
    top: 40px
}

.island {
    position: absolute;
    left: 18%
}

    .island p {
        margin-top: 60px;
        margin-right: 7px
    }

.matzu, .kinmen, .penghu {
    width: 90px;
    height: 90px;
    border-radius: 15px;
    margin-bottom: 5px;
    background: #CCC
}

.matzumark, .kinmenmark, .penghumark {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto;
    border: 1px solid #ddd;
    border-radius: 15px;
    text-align: right;
    width: 90px;
    height: 90px;
    position: absolute;
    z-index: 3;
    left: 0
}

.matzumark {
    background-image: url(../images/ConcentrationMap/matzu.png)
}

.kinmenmark {
    background-image: url(../images/ConcentrationMap/kinmen.png)
}

.penghumark {
    background-image: url(../images/ConcentrationMap/penghu.png)
}

.MyPlaycontrol {
    float: right;
    width: 50%
}

    .MyPlaycontrol .ctrl, input[type="range"] {
        float: left;
        display: block;
        margin: 0 10px;
        border-radius: 15px
    }

        .MyPlaycontrol .ctrl i.fas {
            color: #16B4D0
        }

            .MyPlaycontrol .ctrl i.fas:before {
                font-size: 1.25rem;
                color: #16B4D0
            }

.ctrl.back i.fas:before, .ctrl.fast i.fas:before {
    font-size: 1.75rem
}

.ctrl.back {
    text-align: right;
    margin: 0
}

    .ctrl.back p, .ctrl.fast p {
        color: #000;
        font-size: .875rem;
        line-height: 0
    }

input[type=range] {
    -webkit-appearance: none;
    margin: 8px 0;
    width: 70%
}

    input[type=range]:focus {
        outline: none
    }

    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 14px;
        animate: .2s;
        background: #BCEBF2;
        border-radius: 15px
    }

    input[type=range]::-webkit-slider-thumb {
        box-shadow: 1px 1px 1px #fff,0 0 1px #fff;
        height: 22px;
        width: 22px;
        border-radius: 50%;
        background: #16B4D0;
        cursor: pointer;
        margin-top: -5px;
        -webkit-appearance: none
    }

    input[type=range]:focus::-webkit-slider-thumb {
        outline: 2px dashed #ff8714
    }

    input[type=range]:focus::-webkit-slider-runnable-track {
        background: #88DFEC
    }

    input[type=range]::-moz-range-track {
        width: 100%;
        height: 8px;
        animate: .2s;
        background: #BCEBF2;
        border-radius: 15px
    }

    input[type=range]::-moz-range-thumb {
        box-shadow: 1px 1px 1px #fff,0 0 1px #fff;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: #16B4D0;
        cursor: pointer
    }

    input[type=range]::-ms-track {
        width: 100%;
        height: 8px;
        cursor: pointer;
        animate: .2s;
        background: transparent;
        border-color: transparent;
        color: transparent
    }

    input[type=range]::-ms-fill-lower {
        background: #BCEBF2;
        border: .2px solid #010101;
        border-radius: 2.6px
    }

    input[type=range]::-ms-fill-upper {
        background: #3071a9;
        border: .2px solid #010101;
        border-radius: 2.6px
    }

    input[type=range]::-ms-thumb {
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: #16B4D0;
        cursor: pointer
    }

    input[type=range]:focus::-ms-fill-lower {
        background: #3071a9
    }

    input[type=range]:focus::-ms-fill-upper {
        background: #88DFEC
    }

.MyMapImage {
    width: 100%;
    min-height: 400px;
    text-align: center
}

    .MyMapImage img {
        display: unset
    }




@media screen and (max-width:1200px) {
    .MyPlaycontrol {
        width: 45%
    }

    input[type=range] {
        width: 60%
    }
}

@media screen and (max-width:960px) {
    .article .AQBox {
        width: 49%
    }

        .article .AQBox:nth-child(3n+1) {
            margin-left: 2%
        }

        .article .AQBox:nth-child(2n+1) {
            margin-left: 0
        }

    .ConcentrationSide {
        right: 13%;
        top: 160px
    }

    .imTWmark, .imTWLine, .imDensity {
        left: 40%
    }

    .island {
        left: 28%
    }
}

@media screen and (max-width:959px) {
    ul.mtg_list, .MyPlaycontrol {
        float: unset;
        width: 520px;
        margin: 0 auto
    }

    .MyPlaycontrol {
        margin-top: 20px
    }

    input[type=range] {
        width: 70%
    }

    .imTWmark, .imTWLine, .imDensity {
        left: 32%;
        background-size: auto 400px;
        height: 400px
    }

    .island {
        left: 16%
    }

    .ConcentrationSide {
        right: 20%
    }

    .BarNum li {
        font-size: .75em
    }

    p.BarTitle {
        font-size: 1em
    }
}

@media screen and (max-width:720px) {
    .article .AQBox, .article .AQBox.AQIbox {
        width: 100%;
        margin-left: 0
    }

        .article .AQBox:nth-child(3n+1) {
            margin-left: 0
        }

    ul.mtg_list, .MyPlaycontrol {
        width: 100%
    }

    .mtg_list li {
        margin-top: 10px
    }

        .mtg_list li + li {
            margin-left: 10px
        }

        .mtg_list li a {
            font-size: 1rem;
            padding: 4px 12px;
            height: 28px;
            line-height: 18px
        }

    input[type=range] {
        width: 200px
    }

    .MyMapImage img {
        width: 100%;
        height: auto
    }

    .MyPlaycontrol {
        margin-top: 20px
    }

    input[type=range] {
        width: 60%
    }

    .imTWmark, .imTWLine, .imDensity {
        left: 38%;
        top: 80px;
        background-size: auto 400px;
        height: 400px
    }

    .island {
        left: 12%;
        top: 100px
    }

    .ConcentrationSide {
        width: 100%;
        height: 40px;
        position: unset;
        margin-top: 10px
    }

    .maptime {
        text-align: left
    }

    .ConcentrationBar, p.BarTitle {
        float: left;
        display: block
    }

        .ConcentrationBar, .ConcentrationBar.color2 {
            width: 70%;
            height: 7px;
            margin-right: 0
        }

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

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

    .BarNum {
        width: 80%
    }

        .BarNum li {
            font-size: .75em;
            padding-right: 8%;
            float: left
        }

    p.BarTitle {
        font-size: .75em;
        font-weight: 700;
        padding-right: 10px;
        padding-bottom: 0
    }
}

@media screen and (max-width:599px) {
    .imTWmark, .imTWLine, .imDensity {
        left: 32%;
        top: 120px;
        background-size: auto 360px;
        height: 360px
    }

    .island {
        left: 5%;
        top: 120px
    }

    p.BarTitle {
        width: 90%
    }

    .ConcentrationBar, .ConcentrationBar.color2 {
        width: 90%
    }

    .BarNum li {
        padding-right: 10%
    }
}

@media screen and (max-width:480px) {
    .imTWmark, .imTWLine, .imDensity {
        width: 200px
    }

    .article .AQBox.AQIbox {
        height: 120px
    }

    .article .AQBox p.AQIcondition {
        position: unset;
        margin-top: 0 !important;
    }

    .article .mainCon .mtg_list li a {
        font-size: .75rem;
        padding: 4px 10px;
        height: 30px;
        line-height: 1rem;
        border-radius: 30px
    }

    .MyPlaycontrol .ctrl {
        margin: 0 5px
    }

        .MyPlaycontrol .ctrl i.fas:before {
            font-size: 1rem
        }

        .MyPlaycontrol .ctrl.back i.fas:before, .MyPlaycontrol .ctrl.fast i.fas:before {
            font-size: 1.25rem
        }

    input[type=range] {
        margin: 10px 0;
        width: 47%
    }

        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 10px
        }

        input[type=range]::-webkit-slider-thumb {
            height: 18px;
            width: 18px;
            margin-top: -5px
        }

    .matzu, .kinmen, .penghu, .matzumark, .kinmenmark, .penghumark {
        width: 70px;
        height: 70px;
        background-size: 70px;
        border-radius: 10px
    }

    .article .mainCon .island p {
        margin-top: 40px;
        margin-right: 5px;
        font-size: .75rem
    }

    .BarNum li, #bar2 .BarNum.PM25 li {
        font-size: .75em;
        padding-right: 9%;
        float: left
    }

    #bar2 .BarNum.PM25 li {
        padding-right: 10%
    }

    .BarNum.PM25 li {
        padding-right: 6%
    }
}

@media screen and (max-width:360px) {
    .article .AQIbox p.AQIcondition {
        font-size: 1rem;
        color: #666
    }

    .MyPlaycontrol .ctrl i.fas:before {
        font-size: .75rem
    }

    .MyPlaycontrol .ctrl.back i.fas:before, .MyPlaycontrol .ctrl.fast i.fas:before {
        font-size: 1rem
    }

    .ctrl.back p, .ctrl.fast p {
        font-size: .5rem
    }

    input[type=range] {
        margin: 12px 0;
        width: 55%
    }

        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 8px
        }

        input[type=range]::-webkit-slider-thumb {
            height: 14px;
            width: 14px;
            margin-top: -3px
        }

    .ConcentrationBar, .ConcentrationBar.color2 {
        width: 80%
    }

    .BarNum {
        width: 80%
    }

        .BarNum li {
            font-size: .75em;
            padding-right: 6.5%;
            float: left
        }

        .BarNum.PM25 li {
            padding-right: 4%
        }

    #bar2 .BarNum li {
        padding-right: 7%
    }

    .island {
        left: 3%
    }
}

.largeBtnList.RiverBtn li {
    width: 18.5%
}

@media screen and (max-width:1024px) {
    .largeBtnList.RiverBtn li {
        width: 31.5%;
        margin: 10px .5%
    }
}

@media screen and (max-width:600px) {
    .largeBtnList.RiverBtn li {
        width: 99%;
        margin: 5px .5%
    }
}

#RiverDust {
    position: relative;
    height: 695px
}

    #RiverDust #RiverDustMap {
        width: calc(100% - 220px);
        position: absolute;
        right: 0;
        top: 0;
    }

    #RiverDust svg#RiverDustSVG {
        position: absolute;
        right: 0;
        width: 100%;
        height: 695px
    }

        #RiverDust svg#RiverDustSVG #map {
            opacity: .6
        }

        #RiverDust svg#RiverDustSVG .RiverLine {
            fill: none;
            stroke: #0499CC;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-miterlimit: 10
        }

    #RiverDust #RiverDustMap #Info rect {
        fill: #FFF;
        stroke: #CCC;
        stroke-miterlimit: 10;
        stroke-width: 2
    }

    #RiverDust #RiverDustMap #Info text {
        font-size: 1rem
    }

        #RiverDust #RiverDustMap #Info text.title {
            font-weight: 700
        }

        #RiverDust #RiverDustMap #Info text.subTitle {
            font-size: .75rem
        }

        #RiverDust #RiverDustMap #Info text.num {
            font-size: 1.5rem
        }

    #RiverDust ul.AQIlegend {
        width: 220px
    }

    #RiverDust .mapLegend {
        position: absolute;
        left: 0;
        bottom: 0
    }

        #RiverDust .mapLegend img {
            width: 240px;
            height: 100%
        }

@media screen and (max-width:1024px) {
    #RiverDust {
        height: auto
    }

        #RiverDust #RiverDustMap {
            width: 100%;
            height: 100vw;
            height: calc(calc(100vw - 40px) * 0.915);
            position: static
        }

        #RiverDust svg#RiverDustSVG {
            height: 100vw;
            height: calc(calc(100vw - 40px) * 0.915)
        }

        #RiverDust ul.AQIlegend {
            display: none
        }

        #RiverDust .mapLegend {
            position: static;
            width: 200px
        }
}

.halfArea .inputField {
    float: none
}

    .halfArea .inputField div {
        float: left;
        width: 3.5rem;
        height: 5rem;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 3rem auto
    }

        .halfArea .inputField div.icon_RiverDust {
            background-image: url(../images/AirTW_icon/RiverDust.png)
        }

        .halfArea .inputField div.icon_EPA {
            background-image: url(../images/AirTW_icon/EPA.png)
        }

.article_phase ol {
    margin-left: 20px;
    margin-bottom: 20px
}

    .article_phase ol li {
        list-style: decimal
    }

.largeBtnList.DustBtn li {
    width: 23.5%
}

.dustPic img {
    height: 408px
}

.dustPic:nth-of-type(2) img {
    height: 400px
}

@media screen and (max-width:1024px) {
    .largeBtnList.DustBtn li {
        width: 48.5%;
        margin: 10px .5%
    }

    .dustPic img {
        height: auto !important
    }
}

@media screen and (max-width:600px) {
    .largeBtnList.DustBtn li {
        width: 99%;
        margin: 5px .5%
    }
}

.largeBtnList.BackBtn li {
    width: 32%
}

@media screen and (max-width:1024px) {
    .largeBtnList.BackBtn li {
        width: 31.5%;
        margin: 10px .5%
    }
}

@media screen and (max-width:600px) {
    .largeBtnList.BackBtn li {
        width: 99%;
        margin: 5px .5%
    }
}

.article_radar figure {
    text-align: center;
    margin: 60px 0
}

.article_radar .QueryResult figure {
    margin: 0 0 30px
}

.article_radar figure img {
    display: inline-block;
    max-width: 100%;
    max-height: 500px
}

.article_radar .MyQueryArea fieldset {
    display: inline-block;
    vertical-align: middle
}

    .article_radar .MyQueryArea fieldset + fieldset {
        margin-left: 2rem
    }

.article_radar fieldset .Legend {
    font-size: .875rem
}

.article_radar fieldset .Ctrl {
    vertical-align: middle
}

    .article_radar fieldset .Ctrl.myDate input, .article_radar fieldset .Ctrl.myDate img {
        display: inline-block
    }

    .article_radar fieldset .Ctrl.myDate img {
        vertical-align: middle;
        margin-left: .75rem;
        height: 32px;
        cursor: pointer
    }

    .article_radar fieldset .Ctrl .mtg_list li a {
        line-height: 30px;
        height: auto
    }

@media screen and (max-width:960px) {
    .article_radar fieldset .Ctrl.myDate input {
        width: 200px
    }
}

.article_radar .QueryResult {
    position: relative
}

    .article_radar .QueryResult .clp_btn {
        height: 30px;
        cursor: pointer
    }

        .article_radar .QueryResult .clp_btn i, .article_radar .QueryResult .clp_btn span {
            width: 25px;
            height: 25px;
            float: right
        }

        .article_radar .QueryResult .clp_btn i {
            display: block
        }

        .article_radar .QueryResult .clp_btn span {
            display: none
        }

        .article_radar .QueryResult .clp_btn img {
            width: 25px;
            height: 25px;
            margin-right: 20px
        }

    .article_radar .QueryResult .clp_xmoc.show .clp_btn i {
        display: none
    }

    .article_radar .QueryResult .clp_xmoc.show .clp_btn span {
        display: block;
        position: relative;
        z-index: 9;
        margin-right: .5rem
    }

    .article_radar .QueryResult .clp_con {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        padding: 2rem 1rem 1rem;
        background-color: rgba(0,0,0,.8);
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        z-index: 8
    }

    .article_radar .QueryResult .clp_xmoc.show .clp_con {
        display: block
    }

    .article_radar .QueryResult .clp_con p {
        color: #fff
    }

    .article_radar .QueryResult .clp_con img {
        width: 100%;
        margin-top: 1rem
    }

.largeBtnList.TrafficBtn li {
    width: 23.5%
}

    .largeBtnList.TrafficBtn li a {
        height: 100%
    }

        .largeBtnList.TrafficBtn li a:before {
            height: 0
        }

        .largeBtnList.TrafficBtn li a p {
            font-size: 1.5rem;
            font-weight: 700;
            height: 3rem;
            line-height: 3rem
        }

        .largeBtnList.TrafficBtn li a:hover p {
            color: #FFF
        }

@media screen and (max-width:1024px) {
    .largeBtnList.TrafficBtn li {
        width: 48.5%;
        margin: 10px .5%
    }
}

@media screen and (max-width:600px) {
    .largeBtnList.TrafficBtn li {
        width: 99%;
        margin: 5px .5%
    }
}

.smallAQ, .smallPhoto {
    width: 50%;
    float: left
}

    .smallPhoto img {
        width: 100%;
        height: auto;
        overflow: hidden;
        margin: 0 auto
    }

.article .smallAQ .AQBox {
    float: left;
    width: 48%;
    height: 4.25rem;
    border: none;
    border-bottom: 2px solid #6cb9f1;
    margin: 0 2% 1rem 0;
    padding: .25rem;
    position: relative
}

    .article .smallAQ .AQBox h5 {
        color: #000;
        font-size: 1.25rem;
        font-weight: 700;
        vertical-align: bottom;
        margin: 0;
        background: none;
        position: absolute;
        left: 0;
        top: .25rem;
        padding: 0
    }

        .article .smallAQ .AQBox h5 sub {
            color: #000
        }

    .article .smallAQ .AQBox p {
        font-size: .875rem;
        height: 2rem;
        line-height: 2rem;
        vertical-align: text-bottom;
        position: absolute;
        left: 0;
        top: 1.75rem
    }

        .article .smallAQ .AQBox p.num {
            position: absolute;
            left: auto;
            right: 1rem;
            top: 50%;
            font-size: 2.3rem;
            height: 2.5rem;
            line-height: 2.5rem;
            color: #333;
            margin-top: -1.25rem
        }

            .article .smallAQ .AQBox p.num font {
                display: block;
                width: 80px;
                font-size: .875rem;
                text-align: right;
                line-height: 1.375rem
            }

@media screen and (max-width:1024px) {
    .smallAQ, .smallPhoto {
        width: 100%
    }
}

@media screen and (max-width:600px) {
    .article .smallAQ .AQBox {
        width: 100%;
        margin: 0 0 1rem
    }
}

.traffic_article .optBox {
    border: none
}

.article_ptcmmtStation .th_data {
    padding-bottom: 0
}

    .article_ptcmmtStation .th_data table tbody td {
        padding: 5px 10px
    }

.article_ptcmmtStation table tbody td {
    padding: 5px 10px
}

.MyPediaCard h5.title_sub {
    font-size: 18px;
    font-weight: 700;
    margin: 30px 0;
    color: #000
}

.MyPediaCard p + ul {
    margin-top: 20px
}

.MyPediaCard ul li {
    display: table;
    float: left;
    width: 24%;
    margin: .5rem .5%;
    padding: .5rem;
    min-height: 124px
}

    .MyPediaCard ul li a {
        width: 100%;
        background-color: #f1f8fe;
        display: table-cell;
        vertical-align: middle;
        height: 100px;
        text-align: center;
        color: #333;
        transition: all .3s;
        position: relative;
        border: 1px solid rgba(255,255,255,.5);
        overflow: hidden;
        padding: .5rem 1rem
    }

.MyPediaCard ul:nth-of-type(2) li a {
    background-color: #f0f7f6
}

.MyPediaCard ul:nth-of-type(3) li a {
    background-color: #fff9ec
}

.MyPediaCard ul li a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 7;
    background-color: rgba(255,255,255,.15);
    transition: all .3s;
    transform: translate(35%,190%) rotate(-30deg);
    transition-timing-function: cubic-bezier(.75,0,.125,1);
    transition-delay: .2s
}

.MyPediaCard ul li a:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    background-color: rgba(255,255,255,.15);
    transition: all .3s;
    transform: translate(-35%,-190%) rotate(-30deg);
    transition-timing-function: cubic-bezier(.75,0,.125,1)
}

.MyPediaCard ul li a:hover {
    background-color: #3d8cc7;
    color: #FFF
}

.MyPediaCard ul li:nth-child(2n) a:hover {
    background-color: #14b4d0
}

.MyPediaCard ul li:nth-child(3n) a:hover {
    background-color: #776192
}

.MyPediaCard ul li a:hover::before, .MyPediaCard ul li a:hover::after {
    transform: translate(0,0)
}

@media screen and (max-width:1200px) {
    .MyPediaCard ul li {
        width: 30%
    }
}

@media screen and (max-width:960px) {
    .MyPediaCard ul li {
        width: 48%;
        margin: .5rem 1%
    }
}

@media screen and (max-width:600px) {
    .MyPediaCard ul li {
        width: 100%;
        margin: .5rem 0
    }
}

.article_islandeast2 h5 {
    margin-top: 3rem
}

.article_islandeast2 p {
    margin-top: 1.5rem
}

.article_islandeast2 .MyPicture p {
    text-align: center;
    margin: 0;
    padding-top: .5rem
}

.MySensor figure {
    width: 24%;
    float: left;
    margin: 0 .5%
}

    .MySensor figure img {
        max-width: 90%;
        border-radius: 50%;
        margin: 2rem auto
    }

    .MySensor figure figcaption {
        text-align: center
    }

        .MySensor figure figcaption h6 {
            font-size: 1.25rem;
            font-weight: 700;
            color: #000
        }

@media screen and (max-width:600px) {
    .MySensor figure {
        width: 100%
    }

        .MySensor figure + figure {
            margin-left: 0
        }

        .MySensor figure img {
            max-width: 80%
        }
}

.MySensorTable .table-title table thead tr:first-child th {
    height: 52px
}

.MySensorTable .table-con td {
    padding: .625rem
}

@media screen and (max-width:1024px) {
    .article .MyTable.MySensorTable .table-title {
        width: 150px
    }

    .article .MyTable.MySensorTable .table-con {
        width: calc(100% - 150px)
    }
}

.pagination {
    overflow: auto;
    padding: 20px 0
}

    .pagination li {
        display: inline-block;
        width: 48%;
        float: left
    }

        .pagination li + li {
            margin-left: 4%
        }

        .pagination li.text-right {
            float: right
        }

        .pagination li a {
            display: inline-block;
            color: #018298;
            font-weight: 700;
            margin: 4px
        }

            .pagination li a img {
                display: inline;
                width: 13px;
                height: auto;
                margin-right: 5px;
                vertical-align: unset
            }

        .pagination li span {
            display: block;
            font-size: .875rem
        }

.article_link h5 {
    font-size: 1.25rem;
    line-height: 1.875rem;
    margin-bottom: 30px;
    background: #6cb9f1;
    color: #fff;
    font-weight: 700;
    padding: 5px 10px
}

.article_link .myCard {
    width: 100%;
    overflow: auto
}

    .article_link .myCard .cards {
        width: 23%;
        margin-left: 2%;
        box-sizing: border-box;
        float: left;
        padding: 10px
    }

        .article_link .myCard .cards:first-child {
            margin-left: 0
        }

        .article_link .myCard .cards img {
            width: 90%;
            height: auto;
            margin: 0 auto
        }

        .article_link .myCard .cards p {
            padding-top: 10px
        }

@media screen and (max-width:1024px) {
    .pagination {
        padding-left: 0
    }

    .article_link .myCard .cards {
        width: 48%
    }

        .article_link .myCard .cards:nth-child(3) {
            margin-left: 0
        }
}

@media screen and (max-width:600px) {
    .pagination li {
        width: 45%
    }

    .article_link .myCard .cards {
        width: 100%;
        margin-left: 0
    }
}

.article_text ol {
    margin-top: 2rem
}

    .article_text ol li {
        padding-top: .5rem;
        text-indent: -1.5rem;
        margin-left: 1.5rem
    }

.article_text ul.link_clp li.clp_xmoc {
    width: 100%;
    background-color: #f0f5f9;
    margin: .25rem 0
}

.article_text ul.link_clp li b {
    display: block;
    width: 100%;
    padding: .25rem .5rem;
    cursor: pointer
}

    .article_text ul.link_clp li b:focus {
        outline: 2px dashed #ff9734
    }

.article_text ul.link_clp li div.clp_con {
    background-color: #FFF;
    padding-top: .5rem;
    padding-bottom: 1.5rem
}

    .article_text ul.link_clp li div.clp_con a {
        text-decoration: underline
    }

.article ul.accesskey {
    margin: 1rem 0
}

    .article ul.accesskey li {
        padding: .5rem 0 .5rem .5rem
    }

.article kbd {
    padding: .125rem .5rem;
    border: 2px solid #CCC;
    border-top-width: 1px;
    border-bottom-width: 3px;
    border-top-left-radius: .25rem;
    -webkit-border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    -webkit-border-top-right-radius: .25rem;
    margin: 0 .25rem;
    font-size: .875em
}

.article .sitemap .site-con {
    display: block;
    float: left;
    width: 48%
}

    .article .sitemap .site-con + .site-con {
        margin-left: 4%
    }

.article .sitemap.en .site-con, .article .sitemap.en .site-con + .site-con {
    width: 100%;
    margin-left: 0
}

.article .sitemap .site-con div {
    margin-bottom: 1rem
}

    .article .sitemap .site-con div > b {
        display: block;
        padding: .25rem .5rem;
        background-color: #0077cc;
        color: #FFF;
        font-weight: 700
    }

    .article .sitemap .site-con div > ul {
        padding-left: 1.5rem
    }

        .article .sitemap .site-con div > ul b {
            display: block;
            padding: .25rem 0;
            color: #333;
            font-weight: 700
        }

        .article .sitemap .site-con div > ul ul {
            margin-bottom: .25rem;
            padding-left: 1rem
        }

    .article .sitemap .site-con div a {
        display: inline-block;
        height: 100%;
        text-indent: -4rem;
        padding-left: 4rem
    }

    .article .sitemap .site-con div b a {
        color: #333
    }

    .article .sitemap .site-con div a:hover {
        text-decoration: underline
    }

    .article .sitemap .site-con div a:focus {
        outline: 2px dashed #ff9734
    }

@media screen and (max-width:768px) {
    .article .sitemap .site-con, .article .sitemap .site-con + .site-con {
        width: 100%;
        margin-left: 0
    }
}

.fire p + h4 {
    margin-top: 2rem
}

.fire ul.w-3 {
    margin: 1rem 0 3rem
}

    .fire ul.w-3 li {
        width: 100%;
        float: left
    }

        .fire ul.w-3 li + li {
            margin-top: 2rem
        }

        .fire ul.w-3 li figure div {
            text-align: center
        }

            .fire ul.w-3 li figure div * {
                width: 100%;
                min-height: 250px;
                margin: 0 auto
            }

        .fire ul.w-3 li figure figcaption {
            text-align: center
        }

.fire .article_link .link_clp li {
    margin: 6px 0
}

.fire .article_link .link_clp b {
    position: relative;
    background-color: #f0f5f9;
    display: block;
    padding: 4px;
    cursor: pointer
}

    .fire .article_link .link_clp b:hover {
        background-color: #dff0ff
    }

    .fire .article_link .link_clp b:focus {
        outline: 2px dashed #ff9734;
        background-color: #dff0ff
    }

.fire .article_link .link_clp p {
    font-size: 16px;
    line-height: 27px;
    padding: 15px 5px
}

@media screen and (min-width:960px) {
    .fire ul.w-3 li {
        width: 32%
    }

        .fire ul.w-3 li + li {
            padding-left: 2%
        }

        .fire ul.w-3 li div {
            height: 300px
        }

        .fire ul.w-3 li figure div * {
            width: 100%;
            max-height: 300px
        }
}

.article .widgetSetting * + h4 {
    margin-top: 1rem
}

.article .widgetSetting .inputField {
    width: 24%;
    float: left;
    margin: 0
}

    .article .widgetSetting .inputField + .inputField {
        margin-left: 1%
    }

.article .widgetSetting .clearfix:first-of-type .inputField {
    width: 49%
}

.article .widgetSetting .inputField select, .article .widgetSetting .inputField input {
    width: 100%
}

.article .widgetSetting .btn {
    margin-top: 1rem;
    width: 100%
}

    .article .widgetSetting .btn:disabled {
        background-color: #DDD;
        color: #dc3f3f
    }

.article .widgetFrame ul {
    margin-bottom: 1rem
}

    .article .widgetFrame ul li {
        list-style: decimal;
        margin-left: 1.5rem;
        padding-left: .75rem
    }

.article .widgetFrame textarea {
    width: 100%;
    height: 100px;
    resize: none
}

.halfArea iframe {
    margin: 0 auto;
    border: 1px solid #CCC;
    padding: 2px
}

@media screen and (max-width:1024px) {
    .halfArea {
        width: 50%
    }

    .article .widgetSetting .inputField {
        width: 49%
    }

        .article .widgetSetting .inputField + .inputField {
            margin-left: 0
        }

        .article .widgetSetting .inputField:nth-of-type(2n) {
            margin-left: 1%
        }
}

@media screen and (max-width:768px) {
    .halfArea, .article .widgetSetting .inputField, .article .widgetSetting .clearfix:first-of-type .inputField {
        width: 100%
    }

        .article .widgetSetting .inputField:nth-of-type(2n) {
            margin-left: 0
        }
}

.pa.green {
    fill: #009865
}

.pa.yellow {
    fill: #fffb26
}

.pa.orange {
    fill: #ff9734
}

.pa.red {
    fill: #ca0034
}

.pa.purple {
    fill: #670099
}

.pa.brown {
    fill: #7e0123
}

.article .areaAQIbox.green {
    border-color: #009865
}

    .article .areaAQIbox.green p {
        color: #008558;
    }

.article .areaAQIbox.yellow {
    border-color: #fed449
}

    .article .areaAQIbox.yellow p {
        color: #947100;
    }

.article .areaAQIbox.orange {
    border-color: #bc5b01;
}

    .article .areaAQIbox.orange p {
        color: #ff9734
    }

.article .areaAQIbox.red {
    border-color: #ca0034
}

    .article .areaAQIbox.red p {
        color: #ca0034
    }

.article .areaAQIbox.purple {
    border-color: #670099
}

    .article .areaAQIbox.purple p {
        color: #670099
    }

.article .areaAQIbox.brown {
    border-color: #7e0123
}

    .article .areaAQIbox.brown p {
        color: #7e0123
    }

#RiverDust #RiverDustMap #Info g.green rect {
    stroke: #009865
}

#RiverDust #RiverDustMap #Info g.yellow rect {
    stroke: #fed449
}

#RiverDust #RiverDustMap #Info g.orange rect {
    stroke: #ff9734
}

#RiverDust #RiverDustMap #Info g.red rect {
    stroke: #ca0034
}

#RiverDust #RiverDustMap #Info g.purple rect {
    stroke: #670099
}

#RiverDust #RiverDustMap #Info g.brown rect {
    stroke: #7e0123
}

.article .bor-left-green {
    border: none;
    border-left: .5rem solid #009865;
    background-color: #e5f4ef
}

.article .bor-left-yellow {
    border: none;
    border-left: .5rem solid #fffb26;
    background-color: #ffffea
}

.article .bor-left-orange {
    border: none;
    border-left: .5rem solid #ff9734;
    background-color: #fef4ea
}

.article .bor-left-red {
    border: none;
    border-left: .5rem solid #ca0034;
    background-color: #fae5ea
}

.article .bor-left-purple {
    border: none;
    border-left: .5rem solid #670099;
    background-color: #f0e5f5
}

.article .bor-left-brown {
    border: none;
    border-left: .5rem solid #7e0123;
    background-color: #f1e5e9
}

.article .bor-top-green {
    border-top: .5rem solid #009865;
    background-color: #e5f4ef
}

.article .bor-top-yellow {
    border-top: .5rem solid #fffb26;
    background-color: #ffffea
}

.article .bor-top-orange {
    border-top: .5rem solid #ff9734;
    background-color: #fef4ea
}

.article .bor-top-red {
    border-top: .5rem solid #ca0034;
    background-color: #fae5ea
}

.article .bor-top-purple {
    border-top: .5rem solid #670099;
    background-color: #f0e5f5
}

.article .bor-top-brown {
    border-top: .5rem solid #7e0123;
    background-color: #f1e5e9
}

/****** Dust Hualien ******/
#RiverDust.hualien {
    background-color: #f7f9f9;
    height: 695px;
}

#RiverDust #RiverDustMap.hualien {
    width: 100%;
    top: 75px;
    left: 0;
}

.boxarea {
    position: relative;
    z-index: 2;
}

.stationinfo {
    width: 300px;
    border-radius: 3px;
    position: absolute;
}

    .stationinfo:nth-child(1) {
        left: 2.25%;
        top: 28%;
    }

    .stationinfo:nth-child(2) {
        left: 10px;
        top: calc(28% + 150px);
    }

    .stationinfo:nth-child(3) {
        left: 4%;
        top: calc(28% + 300px);
    }

    .stationinfo:nth-child(4), .stationinfo:nth-child(5), .stationinfo:nth-child(6), .stationinfo:nth-child(7) {
        right: 0;
        top: 0;
    }

    .stationinfo:nth-child(4) {
        right: 10%;
        top: -40px;
    }

    .stationinfo:nth-child(5) {
        right: 5%;
        top: 110px;
    }

    .stationinfo:nth-child(6) {
        right: 1%;
        top: 260px;
    }

    .stationinfo:nth-child(7) {
        right: 4%;
        top: 410px;
    }

    .stationinfo p {
        color: #353535;
        font-size: 1.625rem;
        font-weight: bold;
        font-family: 'Microsoft JhengHei';
        padding-left: 5px;
        padding-bottom: 3px;
    }

.infobox {
    position: relative;
    padding: 7px 9px;
    height: 106px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, .8);
    border-radius: 5px;
}

.boxtitle {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

    .boxtitle p {
        font-size: 1.5rem;
        font-weight: normal;
    }

        .boxtitle p span {
            font-size: 1.125rem;
            font-weight: normal;
            font-family: Arial;
            display: block;
        }

.article .mainCon .boxtitle p + p {
    color: #515151;
    font-size: 1.125rem;
    margin-top: 0;
}

.infonum {
    position: absolute;
    bottom: 5px;
    right: 9px;
    display: flex;
    justify-content: right;
    align-items: baseline;
}

    .infonum span {
        color: #7a7a7a;
        font-family: Arial;
        font-size: 1rem;
    }

    .infonum p {
        color: #353535;
        font-size: 3.5rem;
        font-family: Arial;
        padding-right: 7px;
    }

        .infonum p.cht {
            font-family: 'Microsoft JhengHei';
            font-size: 2rem;
            color: #717171;
        }

/*** Hualien Color ***/
/* stationinfo */
.gray {
    border: 3px solid #cbcbcb;
}

.green {
    border: 3px solid #009865;
}

.yellow {
    border: 3px solid #fffb26;
}

.orange {
    border: 3px solid #ff9734;
}

.red {
    border: 3px solid #ca0034;
}

.purple {
    border: 3px solid #670099;
}

.brown {
    border: 3px solid #7e0123;
}

/* colorbar */
.article table.hualien {
    width: 450px;
    position: absolute;
    right: 3px;
    bottom: 3px;
}

    .article table.hualien td {
        line-height: .875rem;
        text-align: center;
        border-top-width: 4px;
        border-bottom: 1px dotted #CCC;
        padding-left: 3px;
    }

        .article table.hualien td span {
            font-size: .725rem;
            line-height: normal;
            font-family: 'Arial Unicode MS', Arial;
            padding: 2px;
        }

    .article table.hualien tr td:nth-child(1) {
        width: 70px;
        background-color: rgba(255, 255, 255, .6);
        text-align: right;
        padding-right: 5px;
        align-items: center;
    }

    .article table.hualien tr:nth-child(1) td:nth-child(1) {
        border-top: 4px solid #e0e1e1;
    }

    .article table.hualien tr:nth-child(2) td:nth-child(1) {
        border-bottom: none;
    }

    .article table.hualien .green {
        border: none;
        background-color: #e5f4ef
    }

    .article table.hualien .yellow {
        border: none;
        background-color: #ffffea
    }

    .article table.hualien .orange {
        border: none;
        background-color: #fef4ea
    }

    .article table.hualien .red {
        border: none;
        background-color: #fae5ea
    }

    .article table.hualien .purple {
        border: none;
        background-color: #f0e5f5
    }

    .article table.hualien .brown {
        border: none;
        background-color: #f1e5e9
    }

.icon.iconCircle {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #CCC;
    border: 1px solid #000;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    text-align: center;
    vertical-align: middle
}

.icon.green {
    background-color: #008558;
}

.icon.yellow {
    background-color: #fffb26
}

.icon.orange {
    background-color: #ff9734
}

.icon.red {
    background-color: #ca0034
}

.icon.purple {
    background-color: #670099
}

.icon.brown {
    background-color: #7e0123
}

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

@media (max-width: 75em) /*1200*/ {
    #RiverDust #RiverDustMap.hualien {
        height: 100%;
    }

        #RiverDust #RiverDustMap.hualien img {
            height: auto;
            width: 100%;
        }

    .stationinfo {
        width: 280px;
    }

        .stationinfo p {
            font-size: 1.5rem;
        }

    .infobox {
        height: 96px;
    }

    .stationinfo .boxtitle p {
        font-size: 1.25rem;
    }

    .boxtitle p span {
        font-size: 1rem;
    }

    .infonum p {
        font-size: 3rem;
    }

        .infonum p.cht {
            font-size: 1.75rem;
        }
}

@media (max-width: 64em) /*1024*/ {
    .stationinfo:nth-child(4) {
        right: 10%;
        top: 10px;
    }

    .stationinfo:nth-child(5) {
        right: 5%;
        top: 160px;
    }

    .stationinfo:nth-child(6) {
        right: 1%;
        top: 310px;
    }

    .stationinfo:nth-child(7) {
        right: 4%;
        top: 460px;
    }
}

@media (max-width: 50em) /*800*/ {
    /*    .article table.hualien tbody {
        display: flex;
    }
            .article table.hualien .green {
        border-top: 4px solid #009865;
    }
*/
    .article table.hualien td span {
        font-size: .65rem;
        padding: 0;
    }

    .article table.hualien sub {
        font-size: .5rem !important;
        line-height: 1.5rem !important;
    }

    .stationinfo:nth-child(1), .stationinfo:nth-child(2), .stationinfo:nth-child(3) {
        left: 1%;
        top: 30%;
    }

    .stationinfo:nth-child(2) {
        top: calc(28% + 155px);
    }

    .stationinfo:nth-child(3) {
        top: calc(27% + 300px);
    }

    .stationinfo:nth-child(4), .stationinfo:nth-child(5), .stationinfo:nth-child(6), .stationinfo:nth-child(7) {
        right: 1%;
    }

    .stationinfo:nth-child(4) {
        top: 70px;
    }

    .stationinfo:nth-child(5) {
        top: 210px;
    }

    .stationinfo:nth-child(6) {
        top: 350px;
    }

    .stationinfo:nth-child(7) {
        top: 490px;
    }
}

@media (max-width: 40em) /*640*/ {
    #RiverDust.hualien {
        height: auto;
    }

    .boxArea {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }

    .stationinfo {
        position: relative;
        width: 48%;
        margin: 1%;
        box-sizing: border-box
    }

        .stationinfo:nth-child(1), .stationinfo:nth-child(2), .stationinfo:nth-child(3),
        .stationinfo:nth-child(4), .stationinfo:nth-child(5), .stationinfo:nth-child(6), .stationinfo:nth-child(7) {
            left: auto;
            right: auto;
            top: auto;
        }

        .stationinfo p {
            text-shadow: 0 0 3px #fff;
        }

    .article table.hualien {
        width: 96%;
        position: relative;
        margin: 2% auto;
    }

    .infonum p.cht {
        font-size: 1.5rem;
    }

    .infonum p {
        font-size: 2.5rem;
    }
}

@media (max-width: 35em) /*560*/ {
    .stationinfo {
        width: 96%;
        margin: 2% auto;
    }

    #RiverDust.hualien .AQIlegend {
        width: 96%;
        margin: 2% auto;
        overflow-x: scroll;
    }

    .infonum p.cht {
        font-size: 1.75rem;
    }

    .infonum p {
        font-size: 2.875rem;
    }

    #RiverDust #RiverDustMap.hualien img {
        height: auto;
        width: 130%;
        transform: translateX(-7%);
    }
}


.article .icon span {
    display: inline-block;
    color: #000;
    font-size: 1rem
}

.divicon_county {
    text-align: center
}

.article tspan {
    font-size: .75rem
}

.text-right {
    text-align: right
}

.icon.iconTriangle {
    width: 40px;
    height: 28px;
    border-style: solid;
    border-width: 0 20px 28px 20px;
    border-color: transparent transparent #CCC transparent;
    position: relative
}

    .icon.iconTriangle span {
        font-size: .84rem;
        position: absolute;
        top: 6px;
        right: calc(50% - 10px)
    }

    .icon.iconTriangle.green {
        background-color: transparent;
        border-color: transparent transparent #009865 transparent
    }

    .icon.iconTriangle.yellow {
        background-color: transparent;
        border-color: transparent transparent #fffb26 transparent
    }

    .icon.iconTriangle.orange {
        background-color: transparent;
        border-color: transparent transparent #ff9734 transparent
    }

    .icon.iconTriangle.red {
        background-color: transparent;
        border-color: transparent transparent #ca0034 transparent
    }

    .icon.iconTriangle.purple {
        background-color: transparent;
        border-color: transparent transparent #670099 transparent
    }

    .icon.iconTriangle.brown {
        background-color: transparent;
        border-color: transparent transparent #7e0123 transparent
    }

.icon.iconSquare {
    text-align: center;
    vertical-align: middle;
    background-color: #CCC;
    border: 1px solid rgb(255 255 255 / .7);
    border-radius: 5px;
    display: block;
    width: 100%;
    height: 100%
}

    .icon.iconSquare.green {
        background-color: #009865
    }

    .icon.iconSquare.yellow {
        background-color: #fffb26
    }

    .icon.iconSquare.orange {
        background-color: #ff9734
    }

    .icon.iconSquare.red {
        background-color: #ca0034
    }

    .icon.iconSquare.purple {
        background-color: #670099
    }

    .icon.iconSquare.brown {
        background-color: #7e0123
    }

.icon.green span {
    color: #fff;
}

.icon.red span {
    color: #ffe0e8
}

.icon.purple span {
    color: #f8e9ff
}

.icon.brown span {
    color: #ffe5ec
}

.article h3 {
    margin: .5rem 0
}

.article h6 {
    color: #111;
    font-weight: 700
}

.article .article_text h3 {
    font-size: 1.25rem;
    line-height: 1.875rem;
    margin: 30px 0;
    background: #0479cd;
    color: #fff;
    font-weight: 700;
    padding: 5px 10px
}

.article .mainCon .SysBox a h4 {
    color: #757575;
    font-size: 1.125rem;
    line-height: 1.5rem
}

.article .mainCon .SysBox a:focus h4, .article .mainCon .SysBox a.selected h4 {
    color: #115485;
    font-weight: 700
}

.article .article_text h4 {
    font-size: 1.25rem;
    line-height: 1.875rem;
    margin: 30px 0;
    background: #447ba2;
    color: #fff;
    font-weight: 700;
    padding: 5px 10px
}

.article .MyForecastAlert h4 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 3.125rem;
    text-align: center;
    color: #000
}

.article .article_text.remarks h5 {
    font-size: 1.25rem;
    line-height: 1.25rem;
    background: none;
    margin-bottom: .625rem;
    margin-top: 2rem;
    font-weight: 400;
    color: #000
}

.article .AQBox span {
    color: #000;
    font-size: 1.25rem;
    font-weight: 700;
    vertical-align: bottom
}

.article .smallAQ .AQBox span {
    color: #000;
    font-size: 1.25rem;
    font-weight: 700;
    vertical-align: bottom;
    margin: 0;
    background: none;
    position: absolute;
    left: 0;
    top: .25rem;
    padding: 0
}

ul.mtg_list {
    margin-top: 10px
}

.article .sitemap .site-con div > b:focus, .article .sitemap .site-con div > ul b:focus {
    outline: 3px solid #333
}

.MyGridView.DustGridView td a {
    color: #3674a1;
    font-size: .85rem;
    border: 1px solid #6cb8ef;
    border-radius: 5px;
    padding: .25rem .5rem;
    transition: all .3s ease-out;
    -moz-transitiontransition: all .3s ease-out;
    -o-transitiontransition: all .3s ease-out
}

    .MyGridView.DustGridView td a i {
        color: #4a9bd6
    }

    .MyGridView.DustGridView td a:hover {
        background: #3d8cc6;
        border: 1px solid #dff0ff;
        border-radius: 5px;
        padding: .25rem .5rem
    }

        .MyGridView.DustGridView td a:hover, .MyGridView.DustGridView td a:hover i {
            color: #fff
        }

.stationTitle.spc.SIpark {
    background-image: url(../images/AirTW_icon/SIpark.png),url(../images/AirTW_icon/Spc.png);
    background-position: left center,left+54px center;
    padding-left: 7rem
}

.stationTitle.SIpark {
    background-image: url(../images/AirTW_icon/SIpark.png)
}

#Content .famous {
    border: none;
    margin-top: 10px
}

    #Content .famous .famoustitle {
        position: relative;
        padding-bottom: 70px
    }

        #Content .famous .famoustitle h2 {
            color: #2f809c;
            font-size: 2.5rem;
            font-weight: 700;
            line-height: 3rem;
            border-bottom: 1px solid #eaeaea;
            padding-bottom: 10px
        }

            #Content .famous .famoustitle h2 span {
                color: #2f809c;
                font-size: inherit;
                font-weight: 700;
                line-height: 3rem;
                display: block
            }

        #Content .famous .famoustitle .social {
            bottom: 22px;
            top: inherit;
            right: 0
        }

.celeberty {
    background-color: #E6EFF7;
    background-image: url(../images/famous/name-bg.png);
    background-repeat: no-repeat;
    background-position: center right -10px;
    background-size: cover;
    padding: 30px 0 30px 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end
}

    .celeberty img {
        max-width: 270px;
        min-width: 200px;
        height: auto;
        box-shadow: -3px 3px 6px rgba(0,0,0,.3)
    }

.personInfo {
    background: #fff;
    padding: 30px 10px 30px 20px
}

    .personInfo p {
        color: #757575;
        font-size: 1.5rem;
        font-weight: 700;
        border-left: 7px solid #69B1CC;
        padding-left: 15px
    }

.article .mainCon .personInfo p + p {
    color: #737373;
    font-size: 1.25rem;
    font-weight: 400;
    padding-top: 5px;
    margin-top: 0
}

.itroduction {
    border-left: 11px solid #D3DCDF;
    padding: 10px 0 10px 10px;
    margin: 16px auto 52px;
    position: relative
}

    .itroduction p {
        color: #757575;
        font-size: 1.25rem
    }

    .itroduction img {
        border: 5px solid #D3DCDF;
        width: 92px;
        height: auto;
        position: absolute;
        bottom: -46px;
        right: 0
    }

#Content section .article_con.famous {
    border-top: 1px dashed #6cb5cd;
    padding-top: 24px
}

    #Content section .article_con.famous p {
        margin-bottom: 1.25rem
    }

    #Content section .article_con.famous h3.title_sub {
        margin-bottom: 1rem
    }

.source {
    border: 1px dashed #E4CFBB;
    padding: 30px 20px 10px;
    margin: 1.75rem 0;
    position: relative
}

    .source sub, .source sup {
        color: #757575;
    }

#Content section .article_con.famous .source p {
    color: #757575;
    font-size: 1rem;
    margin-bottom: .25rem
}

    #Content section .article_con.famous .source p + p {
        margin-bottom: .25rem;
        margin-top: 0
    }

.source span {
    color: #b55b08;
    padding: 12px;
    background: #fff;
    position: absolute;
    left: 30px;
    top: -28px
}

/**** airprotect ****/
.airprotect ul.mtg_list {
    float: none;
}

@media (max-width:64em) {
    #Content .famous .famoustitle h2 {
        font-size: 2.25rem
    }

    #Content .famous .famoustitle .social {
        position: absolute;
        margin-bottom: 0
    }
}

@media (min-width:40.0625em) and (max-width:59.9375em) {
    .itroduction {
        background: #DBE8EC;
        border-left: none;
        padding: 16px;
        margin-top: 0
    }

        .itroduction p {
            color: #7C7C7C
        }

    .celeberty {
        display: inherit;
        padding: 30px
    }

    .personInfo {
        background: none;
        padding-left: 0;
        padding-bottom: 0
    }

        .personInfo p {
            display: inline-block;
            padding-left: 5px
        }

    .article .mainCon .personInfo p + p {
        padding-top: 0;
        border-left: none;
        padding-left: 5px
    }
}

@media (max-width:40em) {
    #Content .famous .famoustitle h2, #Content .famous .famoustitle h2 span {
        font-size: 1.875rem;
        line-height: 2.25rem
    }

    .celeberty {
        text-align: center;
        background: none;
        padding: 10px;
        display: inherit
    }

        .celeberty img {
            margin: 0 auto
        }

    .personInfo {
        padding: 20px 0 0
    }

        .personInfo p {
            border-left: none;
            display: block;
            padding-left: 0;
            padding-bottom: 5px
        }

            .personInfo p:nth-child(1) {
                color: #69B1CC;
                font-size: 1.375rem
            }

            .personInfo p + p {
                padding-top: 0
            }

    .article .mainCon .personInfo p + p, .itroduction p {
        font-size: 1.125rem
    }

    .itroduction {
        border-left-width: 5px;
        margin-top: 10px
    }
}

@media (max-width:31.25em) {
    #Content .famous .famoustitle h2, #Content .famous .famoustitle h2 span {
        font-size: 1.625rem;
        line-height: 2rem
    }
}

.pager {
    width: 100%;
    clear: both;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2.5rem 0;
    margin: 0 auto
}

    .pager .inputField {
        margin: 0 2rem;
        width: 120px
    }

        .pager .inputField label {
            color: #4f4f4f;
            height: 0
        }

        .pager .inputField select {
            min-width: 120px;
            width: 120px
        }

    .pager p:hover {
        color: #16b4d0;
        cursor: pointer
    }

@media (max-width:31.25em) {
    .pager p {
        font-size: 1rem
    }
}

h3 span, h4 span, h5 span, h6 span {
    display: none;
}

.article p#day1, .article p#day2, .article p#day3, .article p#day4 {
    color: #111;
    font-weight: 700;
}

figure .MyPicture p {
    text-align: center;
    margin: 0;
    padding-top: 0.5rem;
    font-size: 1rem;
}

/***** Air Protect *****/
.article div.stations {
    border-radius: 10px;
    background-color: #F0F5F9;
    padding: 12px;
    margin: 8px 0 5px;
}

.article .airprotect h4 {
    margin-top: 1rem;
}

.article .airprotect .AQImap {
    float: right;
}

.article .airprotect p.time {
    font-size: 1.25rem;
    line-height: 1.25rem;
    font-weight: 700;
    color: #111;
    margin: 1rem 0 .5rem;
}

.article .airprotect h3 {
    font-size: 1.125rem;
    margin: 1.875rem 0 0;
}

.article ol {
    padding-left: 24px;
}

    .article ol li {
        list-style-type: eorgian;
        padding-bottom: 10px;
    }

.article ul.rhombus li {
    margin: 5px 0 8px;
    position: relative;
}

.article ul.rhombus {
    margin: 16px 0 0 26px;
}

    .article ul.rhombus li::before {
        content: '';
        height: 10px;
        width: 10px;
        background: #94c9e2;
        display: block;
        position: absolute;
        transform: rotate(45deg);
        top: 10px;
        left: -18px;
    }

.article .airprotect .AQImap svg {
    top: 0;
}

g.pulse g {
    animation: pulse 1.7s ease-in-out infinite;
}

@-webkit-keyframes pulse {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.article_dustbgIntro > div.Intro {
    border: 1px solid #c1e3ff;
    padding: 10px 20px;
    text-align: center;
    background: #ebf7ff;
    margin-bottom: 30px;
}

    .article_dustbgIntro > div.Intro p span {
        color: #4089cd;
        font-size: 1.375rem;
        font-weight: bold;
        margin: .25rem 0;
        display: block;
    }

@media only screen and (max-width: 52.5rem) /*840*/ {
    .article_dustbgIntro > div.Intro p span {
        font-size: 1.25rem;
        display: initial;
    }
}

@media only screen and (max-width: 33.75rem) /*540*/ {
    .article_dustbgIntro > div.Intro p span {
        font-size: 1.125rem;
    }
}

/* airprotect */
#History_Title {
    -moz-transition: all .2s;
    -o-transition: all .2s;
    -webkit-transition: all .2s;
    transition: all .2s;
    background-color: #008299;
    text-align: center;
    padding: 10px 15px;
}

    #History_Title span {
        -moz-transition: all .2s;
        -o-transition: all .2s;
        -webkit-transition: all .2s;
        transition: all .2s;
        font-size: 22px;
        line-height: 30px;
        display: inline-block;
        position: relative;
        font-weight: 700;
        color: #FFF;
    }

        #History_Title span:after {
            content: '';
            display: block;
            background-image: url(../images/../images/a_white.png);
            width: 17px;
            height: 8px;
            background-repeat: no-repeat;
            position: absolute;
            top: 12px;
            right: -26px
        }


    #History_Title:hover, #History_Title.on {
        background-color: #d0f5ff;
        cursor: pointer;
    }

        #History_Title:hover span, #History_Title.on span {
            color: #00758a;
        }

            #History_Title:hover span:after, #History_Title.on span:after {
                background-image: url(../images/a_blue.png);
            }

    #History_Title:focus {
        outline: 2px dashed #ff8714;
    }

#History_0 p, #History_1 p, #History_2 p {
    padding-left: 20px;
    padding-top: 10px
}

    #History_0 p i:before, #History_1 p i:before, #History_2 p i:before {
        color: #94c9e2;
        font-size: 1rem;
    }