.header_content {
    padding: 10px 0 0
}

@media (max-width:1200px) {
    .header_content h1 {
        width: calc(100% - 240px)
    }
}

@media (max-width:1024px) {
    .header_content h1 {
        margin: 0 0 10px 10px
    }

        .header_content h1 a {
            width: calc(100% - 60px)
        }

        .header_content h1 span:before {
            margin: 0;
            width: 0;
            height: 0
        }

        .header_content h1 span small {
            display: none
        }
}

@media (max-width:768px) {
    .header_content h1 {
        width: calc(100% - 100px)
    }

    .header_content .langChange {
        margin-right: 56px
    }

    .header_content .search {
        display: none
    }
}

@media (max-width:374px) {
    .header_content h1 {
        width: calc(100% - 90px);
        margin: 0 0 10px
    }
}

.header_content .LSgroup {
    float: right;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start
}

.header_content nav {
    width: 100%;
    float: none
}

.header_content .mainmenu {
    float: none;
    width: 100%
}

    .header_content .mainmenu > li {
        white-space: nowrap
    }

        .header_content .mainmenu > li + li {
            margin-left: 1%
        }

@media (max-width:1024px) {
    .header_content .mainmenu > li {
        width: 100%
    }

        .header_content .mainmenu > li + li {
            margin-left: 0
        }
}

.en .myNewsAlert header.title {
    padding: 1rem .75rem;
    width: auto
}

    .en .myNewsAlert header.title img {
        padding: 0 .5rem
    }

.en .myNewsAlert a p {
    height: 1.5rem;
    line-height: 1.75rem
}

@media (max-width:420px) {
    .en .myNewsAlert header.title {
        padding: 1rem .25rem
    }

        .en .myNewsAlert header.title h3 {
            display: none
        }

    .en .myNewsAlert a {
        padding: .5rem
    }

        .en .myNewsAlert a p {
            line-height: 1.5rem
        }

    .myNewsAlert a span, .myNewsAlert a i {
        top: 0;
        right: 0
    }
}

@media (max-width:374px) {
    .myNewsAlert a span, .myNewsAlert a i {
        top: 0;
        right: -12px
    }
}

@media (max-width:420px) {
    section.th_taiwan .tw_map > header span img, section.th_area .tw_map > header span img, .title span img {
        width: 40px;
        height: 40px
    }

    section.th_taiwan .tw_map .map_data .clp_btn i, section.th_taiwan .tw_map .map_data .clp_btn span, section.th_area .tw_map .map_data .clp_btn i, section.th_area .tw_map .map_data .clp_btn span {
        top: 20px
    }

    .MyCalc {
        margin: 0 0 0 10px
    }
}

.en section.th_taiwan .mtg_list, .en section.th_area .mtg_list {
    padding: 4px 0 4px 30px
}

    .en section.th_taiwan .mtg_list li + li, .en section.th_area .mtg_list li + li {
        margin-left: 5px
    }

.en section.th_taiwan .tw_map .map_data ul li p, .en section.th_area .tw_map .map_data ul li p {
    max-width: 150px
}

.en section.th_taiwan .ifm_tab li {
    width: 100%
}

.en section.th_taiwan .tw_map .map_data ul li span.more, .en section.th_area .tw_map .map_data ul li span.more {
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border: 1px solid #14b4d0;
    color: #14b4d0;
    padding: 4px 8px;
    width: 130px;
    text-align: center
}

    .en section.th_taiwan .tw_map .map_data ul li span.more a, .en section.th_area .tw_map .map_data ul li span.more a {
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border: none;
        padding: 0;
        line-height: 16px
    }

    .en section.th_taiwan .tw_map .map_data ul li span.more:hover, .en section.th_area .tw_map .map_data ul li span.more:hover {
        background-color: #14b4d0;
        color: #FFF
    }

.en section.th_area aside > div {
    min-height: 780px
}

.en section.th_area aside ul.allif > li > b {
    width: 100px;
    min-width: 100px
}

.en section.th_area aside ul.allif > li ul li span {
    font-size: 1.25rem;
    line-height: 30px
}

.en section.th_area .area_list li {
    display: table
}

    .en section.th_area .area_list li a {
        display: table-cell;
        vertical-align: middle;
        padding: 15px 32px 15px 5px;
        font-size: 1.125em;
    }

        .en section.th_area .area_list li a:after {
            right: 16px;
            top: 50%;
            margin-top: -3px
        }

    .en section.th_area .area_list li.on a:after, .en section.th_area .area_list li:hover a:after {
        top: 50%;
        margin-top: -3px
    }

@media (max-width:600px) {
    .en section.th_area .area_list li {
        height: 90px;
        vertical-align: middle
    }

        .en section.th_area .area_list li a {
            padding: 0 32px 0 8px
        }
}

@media (max-width:375px) {
    .en section.th_area .area_list li {
        width: 100%;
        height: 100%
    }

        .en section.th_area .area_list li:nth-child(even) {
            margin-left: 0
        }

        .en section.th_area .area_list li a {
            padding: 16px 4px
        }
}

.en section.th_taiwan .map_time, .en section.th_area .map_time {
    max-width: 700px
}

.en section.imgblock ul li.img header h3 {
    width: 350px
}

.en section.imgblock ul li.img header > div {
    width: calc(100% - 370px)
}

.en section.i_fim ul li figcaption {
    width: 100%;
    height: 60px
}

.en section.th_navigation .sby_list li div {
    max-width: 110px
}

@media (max-width:1024px) {
    .en section.i_fim ul li figcaption span {
        display: inline-block
    }
}

@media (max-width:960px) {
    .en section.i_fim ul li {
        width: 100%
    }

        .en section.i_fim ul li figcaption {
            display: inline-block
        }
}

@media (max-width:480px) {
    .en section.th_navigation .sby_list li div {
        max-width: 120px
    }
}

.article .MyTable table td span {
    height: 120px
}

.article .valuedw p:nth-last-child(1) {
    border-left: none;
    padding-left: 0
}

.ctrl.back, .ctrl.fast {
    width: 30px;
    height: 30px
}

    .ctrl.back p, .ctrl.fast p {
        line-height: 1rem
    }

.article .moreInfo .MyMoreInfoCont {
    width: 300px
}

.article .mainCon .MyCalcCont {
    width: 320px
}

.article ul.AQIlegend li {
    display: table
}

    .article ul.AQIlegend li span, .article ul.AQIlegend li p {
        display: table-cell
    }

.article_intro .mtr_list li {
    width: 100%;
    height: 150px;
    height: auto;
    padding: 1rem;
    display: table
}

    .article_intro .mtr_list li + li {
        margin-left: 0
    }

    .article_intro .mtr_list li span, .article_intro .mtr_list li div {
        display: table-cell;
        vertical-align: middle
    }

    .article_intro .mtr_list li span {
        padding-right: 1rem
    }

    .article_intro .mtr_list li h4, .article_intro .mtr_list li p {
        text-align: left
    }

@media screen and (max-width:720px) {
    .article_intro .mtr_list li {
        display: block
    }

        .article_intro .mtr_list li span, .article_intro .mtr_list li div {
            display: block;
            width: 100%
        }

    .en .article .MyTable.spm .table-con thead th {
        padding: 1.3625rem .325rem
    }
}

.en .article .mainCon .MyAlbum li {
    margin-top: .5rem
}

    .en .article .mainCon .MyAlbum li a figcaption {
        line-height: 1.5rem;
        height: 3rem
    }

.MyTwoColInput .inputField {
    width: calc(50% - 2rem)
}

    .MyTwoColInput .inputField * {
        width: 100%
    }

@media screen and (max-width:720px) {
    .MyTwoColInput .inputField {
        width: 100%
    }
}

#hierarchyMap .MapPanel {
    width: 75%
}

@media screen and (max-width:960px) {
    .SysBox {
        width: 100%;
        text-align: left
    }

        .SysBox a {
            text-align: left
        }

            .SysBox a h5 {
                display: inline-block;
                text-align: left
            }

            .SysBox a i, .SysBox a:focus i, .SysBox a.selected i, .SysBox a:hover i {
                display: inline-block;
                height: 3rem;
                text-align: center;
                margin: 0 1rem 0 0
            }

                .SysBox a:focus i:before, .SysBox a i:before, .SysBox a:focus i:before, .SysBox a.selected i:before, .SysBox a:hover i:before {
                    display: inline-block;
                    font-size: 2rem;
                    line-height: 3rem;
                    width: 2rem;
                    text-align: center
                }

    #hierarchyMap .MapPanel {
        margin-top: 100px
    }
}

@media screen and (max-width:480px) {
    #hierarchyMap .MapPanel {
        margin-top: 50px;
        width: 85%
    }
}

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

#RiverDust .mapLegend img {
    width: 300px
}

.MyFigure.dustFigure {
    height: auto
}

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

#RiverDust ul.AQIlegend {
    width: 320px
}

@media screen and (max-width:1024px) {
    .en .article .MyTable.forecast .table-title {
        width: 130px
    }

        .en .article .MyTable.forecast .table-title th {
            padding: .625rem .25rem
        }

    .en .article .MyTable.forecast .table-con {
        width: calc(100% - 130px)
    }
}

@media screen and (max-width:720px) {
    .en .largeBtnList.RiverBtn li {
        width: 48%
    }
}

@media screen and (max-width:480px) {
    .en .largeBtnList.RiverBtn li {
        width: 98%
    }
}

.en .article .smallAQ .AQBox p.num {
    font-size: 1.5rem
}

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

    .en .article .smallAQ .AQBox p.num {
        font-size: 2.3rem
    }
}

.article_rule ul li {
    list-style-type: decimal
}

.article_target .secmu li a {
    height: 110px
}

@media (max-width:980px) {
    #tg3 .tb2 table.mthead tr:nth-child(2) th {
        height: 111px
    }

    #tg4 .tb2 table.con tr:nth-child(2) td {
        height: 111px
    }

    #tg4 .tb2 table.mthead tr:nth-child(3) th {
        height: 62px
    }

    #tg4 .tb2 table.mthead tr:nth-child(4) th {
        height: 211px
    }

    #tg4 .tb2 table.mthead tr:nth-child(5) th {
        height: 291px
    }

    #tg4 .tb2 table.mthead tr:nth-child(6) th {
        height: 331px
    }
}

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

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

    .article h3.min {
        font-size: unset;
        margin: 0
    }

.article_rule h3 {
    font-size: 1.125em;
    line-height: 30px;
    font-weight: 700;
    color: #000;
    display: inline-block
}

.article_trafficbgIntro > div h3, .article_dustbgIntro > div h3 {
    line-height: 30px
}

.article_link h3 {
    color: #666
}

.article_target h3 {
    color: #fff
}

.article .mainCon .SysBox a h4 {
    font-weight: 400
}

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

.article .moreInfo .MyMoreInfoCont h5 {
    color: #FFF;
    font-weight: 700
}

    .article .moreInfo .MyMoreInfoCont h5 span {
        float: right;
        cursor: pointer;
        position: absolute;
        right: 1rem;
        top: 1rem
    }

section.th_area aside header .form .select {
    display: flex;
    align-items: center;
    width: 54%
}

    section.th_area aside header .form .select:nth-last-child(1) {
        width: 43.5%;
        padding-left: 2.5%
    }

    section.th_area aside header .form .select label {
        width: 3.75rem;
        padding-right: .25rem
    }

    section.th_area aside header .form .select:nth-last-child(1) label {
        width: 2rem
    }

    section.th_area aside header .form .select select {
        width: calc(100% - 3.75rem)
    }

    section.th_area aside header .form .select:nth-last-child(1) select {
        width: calc(100% - 2rem)
    }

    section.th_area aside header .form .select select, .img .select select {
        background-size: 20px auto
    }

@media (max-width:640px) {
    section .th_area aside header .form {
        display: flex;
        flex-direction: column
    }

        section.th_area aside header .form .select {
            width: 100%
        }

            section.th_area aside header .form .select:nth-last-child(1) {
                width: 100%;
                padding-left: 0
            }

                section.th_area aside header .form .select label, section.th_area aside header .form .select:nth-last-child(1) label {
                    text-align: right;
                    width: 4rem;
                    padding-right: .5rem
                }

                section.th_area aside header .form .select select, section.th_area aside header .form .select:nth-last-child(1) select {
                    width: calc(100% - 4rem)
                }
}

.ft_info .footer_content > div .qrcode p {
    font-size: .85rem;
    font-family: Arial;
    padding-left: 0
}

h3 span, h4 span, h5 span, h6 span {
    visibility: hidden;
}

h4#tw_time span, h4#county_time span {
    visibility: visible;
}

.en section.th_navigation .sby_list li.large div {
    max-width: 130px;
}

.en section.th_navigation .sby_list li.large p {
    font-size: 1rem;
}

.myNewsAlert a.airAlert i {
    color: #d53434;
}

.myNewsAlert a.airAlert:hover i {
    color: #b52c2c;
}