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

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

.webp .pt_bannerList-6 {
    background-image: url(../images/slide_6.webp)
}

.no-webp .pt_bannerList-6 {
    background-image: url(../images/slide_6.png)
}

.webp .pt_bannerList-9 {
    background-image: url(../images/slide_9.webp)
}

.no-webp .pt_bannerList-9 {
    background-image: url(../images/slide_9.png)
}

.webp .pt_bannerList-10 {
    background-image: url(../images/slide_10.webp)
}

.no-webp .pt_bannerList-10 {
    background-image: url(../images/slide_10.png)
}

[tabindex]:focus {
    border: 2px dotted #ffa148;
    outline: 0
}

.item_air > a {
    display: block
}

.sby_list li {
    width: 18%
}

    .sby_list li + li {
        margin-left: 2%
    }

    .sby_list li figure {
        width: 140px;
        height: 140px
    }

    .sby_list li div {
        width: 100%;
        height: 3em;
        display: table
    }

        .sby_list li div p {
            display: table-cell;
            vertical-align: middle;
            text-align: center
        }

@media (max-width:1280px) {
    .sby_list li figure {
        height: 120px;
        width: 120px
    }
}

@media (max-width:960px) {
    .sby_list li {
        width: 32%;
        text-align: center
    }

        .sby_list li + li {
            margin-left: 2%
        }

        .sby_list li:nth-child(4) {
            margin-left: 0
        }
}

@media (max-width:720px) {
    .sby_list li:last-child figure span {
        width: 40px
    }
}

@media (max-width:600px) {
    .sby_list {
        padding: 22px 60px 0
    }

        .sby_list li figure {
            width: 120px;
            height: 120px
        }

        .sby_list li p {
            font-size: 1em
        }
}

@media (max-width:480px) {
    .sby_list li {
        width: 48%;
        margin: 0 1%
    }

        .sby_list li + li, .sby_list li:nth-child(4) {
            margin: 0 1%
        }

        .sby_list li figure {
            width: 80px;
            height: 80px
        }
}

.th_info > div.main-w > header {
    text-align: center;
    margin-bottom: 24px
}

.th_info > div > header:before, .th_info > div > header:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden
}

.th_info > div > header:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.th_info > div > header div, .th_info > div > header a {
    display: inline-block;
    padding: 21px 0;
    background-image: url(../images/banner_air.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100px;
    vertical-align: top;
    float: left
}

.th_info > div > header span {
    vertical-align: middle;
    display: inline-block
}

.th_info > div > header p {
    vertical-align: text-top;
    display: inline-block;
    font-size: 1.375em;
    line-height: 1.14em;
    font-weight: 700;
    color: #333
}

.th_info > div > header a.alertStart, .th_info > div > header a.alertClose {
    display: none;
    background-image: none;
    margin-left: 1%;
    background-position: right bottom;
    background-size: 100% auto
}

.th_info > div > header a.alertStart {
    background-color: #ffc8c8;
    background-image: url(../images/alertOpen.png);
    padding: 8px 0
}

.th_info > div > header a.alertClose {
    background-color: #d3f1c7;
    background-image: url(../images/alertClose.png);
    padding: 8px 0
}

    .th_info > div > header a.alertStart span, .th_info > div > header a.alertClose span {
        padding: .5rem;
        background-color: #FFF;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        max-width: 14rem
    }

.th_info > div > header.hasStart a, .th_info > div > header.hasClose a, .th_info > div > header.hasStart div, .th_info > div > header.hasClose div {
    width: 49%;
    display: inline-block
}

.th_info > div > header.hasStart.hasClose a, .th_info > div > header.hasStart.hasClose div {
    width: 49%
}

    .th_info > div > header.hasStart.hasClose a.alertStart, .th_info > div > header.hasStart.hasClose a.alertClose {
        width: 24%
    }

.th_info > div > header.hasStart a.alertStart p, .th_info > div > header.hasClose a.alertClose p {
    display: block
}

@media (max-width:1024px) {
    .th_info > div > header.hasStart.hasClose a, .th_info > div > header.hasStart.hasClose div {
        width: 100%;
        margin-left: 0
    }

        .th_info > div > header.hasStart.hasClose a.alertStart, .th_info > div > header.hasStart.hasClose a.alertClose {
            width: 49%;
            margin-top: 1rem
        }

        .th_info > div > header.hasStart.hasClose a.alertClose {
            margin-left: 2%
        }
}

@media (max-width:600px) {
    .th_info > div > header.hasStart.hasClose a.alertStart, .th_info > div > header.hasStart.hasClose a.alertClose {
        width: 100%;
        margin-left: 0
    }
}

.th_aircontrol {
    padding-top: 35px
}

    .th_aircontrol > div {
        margin-bottom: 35px
    }

    .th_aircontrol .title {
        text-align: left
    }

        .th_aircontrol .title h3 {
            display: inline
        }

            .th_aircontrol .title h3::before {
                content: none
            }

        .th_aircontrol .title a {
            display: inline-block
        }

.Mytable {
    width: 100%;
    font-size: 1.125rem
}

    .Mytable th {
        font-weight: 700;
        color: #666;
        padding: 0 10px;
        line-height: 2em;
        text-align: center;
        vertical-align: middle
    }

    .Mytable thead th.point {
        background-color: #F9F8E7
    }

    .Mytable td {
        text-align: center;
        padding: 0 10px;
        vertical-align: middle;
        line-height: 2em;
        border: 2px solid #fff
    }

        .Mytable td.date {
            font-weight: 700
        }

        .Mytable td.control-star {
            background-color: #e84c3d
        }

            .Mytable td.control-star::before {
                content: '\f071';
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                padding-right: 10px;
                color: #ffde33;
                font-size: 1rem
            }

        .Mytable td.control-remove {
            background-color: #4e8b07
        }

        .Mytable td.control-normal {
            background-color: #ddd
        }

.th_strain {
    background-image: url(../images/bg_03.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    text-align: center;
    padding: 65px 0;
    max-width: 2000px;
    margin: 0 auto
}

    .th_strain .w-field > li .MyArea {
        background-color: #fff;
        padding: 35px 20px 30px;
        position: relative;
        z-index: 0
    }

        .th_strain .w-field > li .MyArea::before {
            bottom: 0;
            width: 92%;
            left: 4%;
            height: 10px;
            box-shadow: 0 10px 10px rgb(31 31 31 / 40%)
        }

        .th_strain .w-field > li .MyArea::before, .th_strain .w-field > li .MyArea::after {
            content: '';
            position: absolute;
            z-index: -1
        }

        .th_strain .w-field > li .MyArea::after {
            display: block;
            width: 100%;
            height: 100%;
            background: #fff;
            left: 0;
            top: 0
        }

    .th_strain .title-group {
        text-align: left;
        position: relative;
        margin-bottom: 25px
    }

        .th_strain .title-group h4 {
            font-size: 1.25rem;
            font-weight: 700;
            display: inline-block;
            margin-bottom: 10px
        }

        .th_strain .title-group > a {
            display: inline-block;
            vertical-align: bottom;
            margin-bottom: 10px
        }

        .th_strain .title-group p {
            color: #666;
            font-size: .875rem
        }

    .th_strain .tab_more {
        position: absolute;
        top: 0;
        right: 0
    }

        .th_strain .tab_more a {
            border-radius: 50px;
            border: 1px solid #666;
            display: inline-block;
            padding: 4px 9px;
            color: #666
        }

            .th_strain .tab_more a:hover, .th_strain .tab_more a:focus {
                background-color: #666;
                color: #FFF
            }

    .th_strain .w-field > li.leftArea {
        width: 40%;
        margin-bottom: 30px
    }

h4.new_forecast {
    position: relative
}

.new_forecast::after {
    content: '';
    background-image: url(../images/newVideo.png);
    position: absolute;
    top: 2px;
    margin-left: 10px;
    background-repeat: no-repeat;
    width: 50px;
    height: 21px
}

.svgMap {
    position: relative;
    overflow: hidden
}

    .svgMap svg {
        float: right;
        width: 260px;
        height: auto
    }

        .svgMap svg path.block {
            fill: #555;
            stroke: #111;
            stroke-width: 1px
        }

        .svgMap svg path.flag {
            stroke: #FFF;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-miterlimit: 10;
            display: none
        }

        .svgMap svg text {
            fill: #CCC;
            font-size: 1rem;
            font-family: "微軟正黑體",Arial
        }

        .svgMap svg g.emgFlag path.flag {
            display: block;
            fill: #8ecdff
        }

        .svgMap svg g.alertFlag path.flag {
            display: block;
            fill: #0058ad
        }

        .svgMap svg g.level_1 path.block {
            fill: #fd7b05
        }

        .svgMap svg g.level_2 path.block {
            fill: #e00024
        }

        .svgMap svg g.level_3 path.block {
            fill: #7f35b3
        }

        .svgMap svg g.level_4 path.block, .svgMap svg g.level_5 path.block {
            fill: #653a1b
        }

        .svgMap svg g.level_1 text, .svgMap svg g.level_2 text, .svgMap svg g.level_3 text, .svgMap svg g.level_4 text, .svgMap svg g.level_5 text {
            fill: #FFF;
            font-weight: 700
        }

.MapLegend {
    position: absolute;
    bottom: 25px;
    left: 10px;
    color: #CCC;
    font-size: .75rem
}

    .MapLegend ul li {
        padding-top: 10px;
        text-align: left
    }

        .MapLegend ul li img {
            width: 20px;
            height: 20px;
            margin-right: 2px;
            display: inline;
            vertical-align: middle
        }

        .MapLegend ul li span {
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-right: 6px;
            border-radius: 1px;
            border: 1px solid #FFF;
            vertical-align: bottom
        }

            .MapLegend ul li span.emgLevel1 {
                background-color: #fd7b05
            }

            .MapLegend ul li span.emgLevel2 {
                background-color: #e00024
            }

            .MapLegend ul li span.emgLevel3 {
                background-color: #7f35b3
            }

            .MapLegend ul li span.emgLevel4 {
                background-color: #653a1b
            }

.th_strain .w-field > li.rightArea {
    width: 59%
}

.rightArea > .MyArea + .MyArea {
    margin-top: 15px
}

.card-group {
    margin-bottom: 10px
}

    .card-group .MyCard {
        border: 5px solid #47aaed;
        background-color: #fff;
        color: #333;
        text-align: left;
        padding: 10px;
        display: block;
        float: left;
        width: 31.3%;
        box-shadow: 3px 3px 8px rgb(8 4 41 / 15%);
        height: 100px;
        overflow: hidden
    }

    .card-group .MyCard {
        margin-left: 2%
    }

        .card-group .MyCard:first-child {
            margin-left: 0
        }

        .card-group .MyCard img {
            display: inline-block;
            padding-right: 10px;
            vertical-align: top;
            float: left
        }

        .card-group .MyCard dt {
            font-size: .875rem;
            padding-bottom: 10px;
            line-height: 1.875rem
        }

        .card-group .MyCard dl.card-spec dt {
            line-height: 1rem
        }

        .card-group .MyCard dd {
            font-size: 2rem;
            font-weight: 700;
            text-align: right
        }

            .card-group .MyCard dd span {
                font-size: .75rem;
                padding-left: 5px;
                font-weight: 400
            }

.MySwiper  .MyCard {      
margin-left: 0;
}

.owl-carousel {
    height: 100px
}

    .owl-carousel .item {
        width: 201px;
        box-sizing: border-box
    }

    .owl-carousel .owl-item img {
        width: auto
    }

.owl-theme .owl-dots button.active {
    width: inherit;
    height: inherit
}

.rightArea .title::after {
    content: '(\50c5\8a08\7b97\5df2\586b\5831\8cc7\6599)';
    font-family: "Century Gothic","Microsoft JhengHei","Apple LiGothic Medium","PMingLiU","sans-serif","serif";
    font-size: .875rem;
    font-weight: 400;
    padding-left: 5px
}

.rightArea .tpaq-info .title::after {
    content: '(\50c5\8a08\7b97\5df2\5b8c\6210\964d\8f09\8cc7\6599)'
}

.power-plant {
    text-align: left;
    margin-bottom: 25px
}

    .power-plant li {
        display: inline-block;
        font-size: .875rem;
        font-weight: 700;
        background-color: #59c4f7;
        padding: 5px 16px;
        border-radius: 3px
    }

        .power-plant li + li {
            margin-left: 5px
        }

        .power-plant li:first-child {
            background: none;
            padding: 0;
            padding-right: 5px
        }

        .power-plant li h5 {
            font-size: 1rem
        }

.tpaq-info .card-group .MyCard {
    height: 125px;
    width: 22.75%
}

    .tpaq-info .card-group .MyCard:first-child {
        border-color: #f93
    }

.tpaq-info .card-info dt {
    font-size: .875rem;
    font-weight: 700;
    line-height: 1rem
}

.tpaq-info .card-info dd.state, .tpaq-info .card-info dd.state i {
    color: #e84c3d !important;
    font-size: .75rem;
    text-align: left;
    padding-bottom: 5px
}

    .tpaq-info .card-info dd.state i {
        padding-left: 5px
    }

    .tpaq-info .card-info dd.state .fa-long-arrow-alt-down::before {
        color: #e84c3d !important
    }

.tpaq-info .card-info dd p {
    font-size: .75rem;
    padding-top: 5px
}

@media (max-width:980px) {
    .th_strain .w-field > li.leftArea, .th_strain .w-field > li.rightArea {
        width: 100%
    }

    .svgMap svg {
        float: none
    }

    .owl-carousel {
        height: 115px
    }

        .owl-carousel .item {
            width: 245px
        }
}

@media (max-width:680px) {
    .MapLegend {
        position: static
    }

    .owl-carousel .item {
        width: 220px
    }

    .svgMap svg {
        float: right
    }
}

@media (min-width:375px) and (max-width:679px) {
    .Mytable {
        font-size: .875rem
    }

        .Mytable td.control-star::before {
            font-size: .875rem;
            padding-right: 3px
        }

    .th_strain .tab_more {
        position: static;
        margin-top: 10px
    }

    .owl-carousel .item {
        width: 95%
    }

    .tpaq-info .card-group .MyCard {
        width: 49%
    }

        .tpaq-info .card-group .MyCard:nth-child(3) {
            margin-left: 0
        }

        .tpaq-info .card-group .MyCard:nth-child(3), .tpaq-info .card-group .MyCard:nth-child(4) {
            margin-top: 2%
        }
}

.th_info .first_news .news_img {
    width: 45%;
    margin-right: 10px;
    text-align: center
}

    .th_info .first_news .news_img img {
        max-height: 160px;
        width: auto;
        display: inline
    }

.tabs > li .tab_content {
    display: none
}

.md_page ul li div.news_info {
    width: calc(55% - 10px)
}

    .md_page ul li div.news_info span {
        width: 100%;
        padding: 10px 0
    }

    .md_page ul li div.news_info .dot {
        width: 100%
    }

        .md_page ul li div.news_info .dot p {
            font-weight: 700;
            font-size: 1.25rem;
            line-height: 1.875rem;
            -webkit-line-clamp: 2;
            height: 60px
        }

.md_page span.sort {
    width: 12%;
    font-weight: 700
}

    .md_page span.sort::after {
        content: '-';
        color: #666
    }

.md_page ul li div {
    width: 68%
}

.th_item .w-field > li {
    height: 350px
}

    .th_item .w-field > li.item_Fbinfo {
        padding: 0;
        margin-left: 0
    }

    .th_item .w-field > li a:focus img {
        outline: 2px dotted #ffa148
    }

    .th_item .w-field > li a img {
        width: auto;
        height: 100%;
        max-height: 220px;
        margin: 0 auto
    }

.video_wrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    cursor: pointer
}

    .video_wrap iframe, .video_wrap object, .video_wrap embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    .video_wrap:hover .btnPlay {
        background-color: rgba(0,0,0,.25)
    }

    .video_wrap .btnPlay {
        width: 100%;
        height: 100%;
        background-image: url(../images/btnPlay.png);
        background-repeat: no-repeat;
        background-position: center center;
        position: absolute;
        left: 0;
        top: 0
    }

    .video_wrap img {
        width: 100%;
        margin-top: -47px
    }

.itme_info .tab_more {
    margin-top: 5px;
    text-align: right
}

    .itme_info .tab_more a {
        border-radius: 50px;
        border: 1px solid #666;
        display: inline-block;
        padding: 4px 9px;
        color: #666
    }

        .itme_info .tab_more a:hover, .itme_info .tab_more a:focus {
            background-color: #666;
            color: #FFF
        }

.theme_ad {
    height: 320px;
    max-width: 570px
}

    .theme_ad .pt_btnList {
        bottom: 25px
    }

    .theme_ad .pt_bannerList > li {
        background-size: 100% auto
    }

@media (max-width:1200px) {
    .md_page ul li div.news_info .dot p {
        font-size: 1.125rem
    }
}

@media (max-width:980px) {
    .th_info .first_news .news_img {
        width: 45%
    }

    .md_page ul li div.news_info {
        width: calc(55% - 10px)
    }

    .footer_top {
        padding-top: 40px
    }
}

figcaption {
    height: inherit;
    width: inherit;
    overflow: unset
}

/*===============================================================================
                          2411 調整 for Yeats
=================================================================================*/
/*----------------- 意見回饋小幫手 -----------------*/

#QuickBtn {
    display: inline-block;
}

#QuickBtn a.QuickBtnSub.show {
    display: block;
}