body {
    width: 100%;
    height: auto;
    font-family: 微軟正黑體;
    margin: 0;
    padding-top: 4px
}

.title {
    background-image: url(../images/airtw.png);
    background-size: 46px 46px;
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 56px
}

    .title h1 {
        color: #000;
        font-weight: 700;
        font-size: 1.25rem;
        line-height: 1.25rem;
        margin: 0
    }

    .title p {
        font-size: .875rem;
        color: #666;
        margin: 0;
        height: 1rem;
        line-height: 1rem
    }

.MyAQIbox {
    background-color: #CCC;
    width: 100%;
    margin: .5rem 0;
    position: relative;
    overflow: hidden
}

    .MyAQIbox:after {
        content: "";
        display: block;
        clear: both
    }

    .MyAQIbox div {
        float: left;
        padding: .5rem;
        font-size: 2.25rem;
        font-weight: 700;
        color: #333;
        vertical-align: middle;
        display: inline;
        width: calc(100% - 6rem)
    }

        .MyAQIbox div#AQI {
            width: 4rem;
            padding: .75rem 0 0
        }

    .MyAQIbox h2, .MyAQIbox span {
        display: block;
        float: left;
        margin: 0;
        vertical-align: text-bottom
    }

    .MyAQIbox h2 {
        font-size: 1.25rem;
        font-weight: 700;
        color: #000;
        width: 50px;
        height: 2rem;
        line-height: 2rem
    }

    .MyAQIbox span {
        font-size: .875rem;
        font-weight: 400;
        color: #888;
        width: calc(100% - 50px);
        height: 1.5rem;
        line-height: 1.5rem;
        padding-top: .5rem
    }

    .MyAQIbox p {
        font-size: 1rem;
        font-weight: 700;
        color: #000;
        margin: 0;
        float: left
    }

a.AQalert {
    border: none;
    width: 3.5rem;
    height: 24px;
    background-color: #00d7d4;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    position: absolute;
    top: -1.875rem;
    right: -1rem;
    padding-top: 1.625rem;
    text-align: center;
    color: #FFF
}

    a.AQalert i {
        position: absolute;
        top: 1.875rem;
        right: .5rem;
    }

        a.AQalert i:before {
            font-size: 1rem;
        }

    a.AQalert:hover {
        box-shadow: 1px 1px 2px rgba(0,0,0,.5);
        cursor: pointer
    }

.MyAQIbox.green {
    border-left-color: #009865;
    background-color: #e5f4ef
}

.MyAQIbox.yellow {
    border-left-color: #fffb26;
    background-color: #ffffea
}

.MyAQIbox.orange {
    border-left-color: #ff9734;
    background-color: #fef4ea
}

.MyAQIbox.red {
    border-left-color: #ca0034;
    background-color: #fae5ea
}

.MyAQIbox.purple {
    border-left-color: #670099;
    background-color: #f0e5f5
}

.MyAQIbox.brown {
    border-left-color: #7e0123;
    background-color: #f1e5e9
}

.MyAQIbox .AQsuggest {
    display: block;
    text-align: right;
    width: 100%;
    height: 2.25rem;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    float: left;
    padding: 2px .5rem;
    margin: 0;
    background-color: #555
}

    .MyAQIbox .AQsuggest li {
        display: inline-block;
        width: 2rem;
        height: 2rem;
        list-style: none;
        background-size: 2rem auto;
        background-repeat: no-repeat;
        background-position: center center
    }

        .MyAQIbox .AQsuggest li:nth-of-type(1) {
            background-image: url(../images/suggest/01.png)
        }

        .MyAQIbox .AQsuggest li:nth-of-type(2) {
            background-image: url(../images/suggest/02.png)
        }

        .MyAQIbox .AQsuggest li:nth-of-type(3) {
            background-image: url(../images/suggest/03.png)
        }

        .MyAQIbox .AQsuggest li:nth-of-type(4) {
            background-image: url(../images/suggest/04.png)
        }

.MyAQIbox.green .AQsuggest {
    background-color: #009865
}

    .MyAQIbox.green .AQsuggest li:nth-of-type(1) {
        background-image: url(../images/suggest/01.png)
    }

    .MyAQIbox.green .AQsuggest li:nth-of-type(2) {
        background-image: url(../images/suggest/02.png)
    }

    .MyAQIbox.green .AQsuggest li:nth-of-type(3) {
        background-image: url(../images/suggest/03.png)
    }

    .MyAQIbox.green .AQsuggest li:nth-of-type(4) {
        background-image: url(../images/suggest/04.png)
    }

.MyAQIbox.yellow .AQsuggest {
    background-color: gold
}

    .MyAQIbox.yellow .AQsuggest li:nth-of-type(1) {
        background-image: url(../images/suggest/01.png)
    }

    .MyAQIbox.yellow .AQsuggest li:nth-of-type(2) {
        background-image: url(../images/suggest/02.png)
    }

    .MyAQIbox.yellow .AQsuggest li:nth-of-type(3) {
        background-image: url(../images/suggest/03.png)
    }

    .MyAQIbox.yellow .AQsuggest li:nth-of-type(4) {
        background-image: url(../images/suggest/04.png)
    }

.MyAQIbox.orange .AQsuggest {
    background-color: #ff9734
}

    .MyAQIbox.orange .AQsuggest li:nth-of-type(1) {
        background-image: url(../images/suggest/05.png)
    }

    .MyAQIbox.orange .AQsuggest li:nth-of-type(2) {
        background-image: url(../images/suggest/06.png)
    }

    .MyAQIbox.orange .AQsuggest li:nth-of-type(3) {
        background-image: url(../images/suggest/07.png)
    }

    .MyAQIbox.orange .AQsuggest li:nth-of-type(4) {
        background-image: url(../images/suggest/08.png)
    }

.MyAQIbox.red .AQsuggest {
    background-color: #ca0034
}

    .MyAQIbox.red .AQsuggest li:nth-of-type(1) {
        background-image: url(../images/suggest/05.png)
    }

    .MyAQIbox.red .AQsuggest li:nth-of-type(2) {
        background-image: url(../images/suggest/06.png)
    }

    .MyAQIbox.red .AQsuggest li:nth-of-type(3) {
        background-image: url(../images/suggest/07.png)
    }

    .MyAQIbox.red .AQsuggest li:nth-of-type(4) {
        background-image: url(../images/suggest/08.png)
    }

.MyAQIbox.purple .AQsuggest {
    background-color: #670099
}

    .MyAQIbox.purple .AQsuggest li:nth-of-type(1) {
        background-image: url(../images/suggest/09.png)
    }

    .MyAQIbox.purple .AQsuggest li:nth-of-type(2) {
        background-image: url(../images/suggest/10.png)
    }

    .MyAQIbox.purple .AQsuggest li:nth-of-type(3) {
        background-image: url(../images/suggest/11.png)
    }

    .MyAQIbox.purple .AQsuggest li:nth-of-type(4) {
        background-image: url(../images/suggest/12.png)
    }

.MyAQIbox.brown .AQsuggest {
    background-color: #7e0123
}

    .MyAQIbox.brown .AQsuggest li:nth-of-type(1) {
        background-image: url(../images/suggest/09.png)
    }

    .MyAQIbox.brown .AQsuggest li:nth-of-type(2) {
        background-image: url(../images/suggest/10.png)
    }

    .MyAQIbox.brown .AQsuggest li:nth-of-type(3) {
        background-image: url(../images/suggest/11.png)
    }

    .MyAQIbox.brown .AQsuggest li:nth-of-type(4) {
        background-image: url(../images/suggest/12.png)
    }

.MyItem:after {
    content: "";
    display: block;
    clear: both
}

.MyItem .item {
    float: left;
    width: 49%;
    margin-bottom: .5rem;
    border: 1px solid #CCC;
    padding: .25rem;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}

    .MyItem .item:nth-child(2n) {
        margin-left: 4px
    }

    .MyItem .item h3 {
        font-size: 1rem;
        font-weight: 700;
        color: #000;
        margin: 0;
        padding: 0
    }

    .MyItem .item span {
        float: right
    }

    .MyItem .item p {
        font-size: 8px;
        font-weight: 400;
        color: #888;
        margin: 0
    }

p.gray {
    font-size: .75rem;
    color: #888;
    padding: 0;
    margin: 0
}

.linkBtn {
    float: right;
    border: 2px solid #6CB8EE;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    color: #6CB8EE;
    padding: 2px 20px;
    text-decoration: none;
    margin: .5rem
}

    .linkBtn:hover {
        background-color: #6CB8EE;
        color: #FFF
    }

#AQalertCont {
    position: fixed;
    left: 0;
    top: 0;
    padding: 2.25rem 1rem 1rem;
    background-color: rgba(0,0,0,.85);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    z-index: 98;
    display: none
}

    #AQalertCont p {
        color: #FFF;
        line-height: 150%;
        margin: 0
    }

    #AQalertCont a#AQalertBtn {
        position: fixed;
        right: 4px;
        top: 4px;
        border: none;
        padding: 0;
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0
    }

        #AQalertCont a#AQalertBtn i:before {
            font-size: 1.5rem
        }

        #AQalertCont a#AQalertBtn:hover {
            background-color: transparent;
            cursor: pointer
        }

@media screen and (max-width:300px) {
    .title {
        background-size: 32px 32px;
        padding-left: 36px
    }

    .MyAQIbox div {
        padding: .5rem .25rem
    }

    .MyAQIbox h2 {
        width: auto
    }

    .MyAQIbox span {
        width: auto;
        font-size: .5rem
    }

    .MyItem .item {
        width: 100%
    }

        .MyItem .item:nth-child(2n) {
            margin-left: 0
        }
}

.widgetForecast .halfArea {
    width: 100%
}

.forecast_content .myCarousel-inner {
    text-align: center
}

    .forecast_content .myCarousel-inner h4 {
        text-align: left
    }

    .forecast_content .myCarousel-inner span {
        display: block;
        margin-block-start: 1.33em;
        margin-block-end: 1.33em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
        unicode-bidi: isolate;
        text-align:left;
    }

    .forecast_content .myCarousel-inner svg {
        max-width: 80%;
        height: auto
    }

.myCarousel-inner .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -40px
}

    .myCarousel-inner .owl-nav button.owl-prev, .myCarousel-inner .owl-nav button.owl-next {
        border-radius: 50%;
        height: 40px;
        width: 40px;
        position: absolute
    }

    .myCarousel-inner .owl-nav button.owl-prev {
        left: 0
    }

    .myCarousel-inner .owl-nav button.owl-next {
        right: 0
    }

    .myCarousel-inner .owl-nav [class*=owl-]:hover {
        background-color: #16b4d0
    }

        .myCarousel-inner .owl-nav [class*=owl-]:hover i::before {
            color: #fff
        }

    .myCarousel-inner .owl-nav button i {
        width: 20px
    }

        .myCarousel-inner .owl-nav button i::before {
            color: #ddd;
            font-size: 1.25rem
        }

.myCarousel-inner .owl-dots .owl-dot.active span, .myCarousel-inner .owl-dots .owl-dot:hover span {
    background-color: #16b4d0
}

.title {
    position: relative;
    padding-left: 50px;
    margin-left: 7px;
}

    .title h1 {
        margin: 7px 0;
    }

    .title p#time {
        padding-bottom: 5px;
    }

.modal-openbtn img {
    width: 20px;
    height: auto;
    position: absolute;
    left: 176px;
    bottom: 5px;
}

a span {
    display: none;
}