/* ========================================================================================== */

/* ==                                                                                      == */

/* ==                                  ALL Page CSS Start                                  == */

/* ==                                                                                      == */

/* ========================================================================================== */

/* ========================================== */

/* ==            Default Start             == */

/* ========================================== */

@charset "UTF-8";
@import url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20181008175000/https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url('https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20181008175000/https://fonts.googleapis.com/css?family=Vollkorn:400,400i,600,600i,700,700i,900,900i&display=swap');

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word
}

*:before,
*:after {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word
}

.modal-dialog {
    z-index: 20
}

html {
    font-size: 1.25em;
    font-style: normal;
    word-wrap: break-word;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    position: relative;
    font-size: 0.9375em
}

body {
    font-family: 'Vollkorn', 'Noto Sans TC', serif, Arial, 'Apple LiGothic Medium', 'Microsoft JhengHei', 'SimHei';
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: #fff;
    font-weight: 500;
    color: #333
}

header {
    position: fixed;
    background: #fff;
    z-index: 9;
    width: 100%;
    left: 0;
    top: 0;
    border-radius: 0;
    border: none;
}

.ac-section {
    position: relative;
    padding: 3em 0;
}

.ac-section.ac-section_first {
    padding-top: 85px;
    padding-bottom: 0;
}

.ac-section.ac-section_last {
    padding-bottom: 0;
}

.ac-other .ac-section.ac-section_first {
    padding-top: 168px;
}

@media (max-width: 1199.98px) {
    .ac-section.ac-section_first {
        padding-top: 70px;
    }

    .ac-other .ac-section.ac-section_first {
        padding-top: 70px;
    }
}

@media (max-width:575.98px) {
    .ac-section.ac-section_first {
        padding-top: 85px;
    }
}

t {
    width: 100%;
    max-width: 100%
}

a {
    cursor: pointer
}

a:hover,
a:focus {
    text-decoration: blink
}

input:focus,
textarea:focus {
    box-shadow: none;
    outline: 0
}

input:focus,
textarea:focus {
    box-shadow: none;
    outline: 0
}

ol,
ul {
    list-style: none;
    margin-bottom: 0
}

.ac-pagination_area.ac-pagination_right .pagination {
    justify-content: flex-end;
}

.ac-pagination_area .page-item:first-child a.page-link {
    border: solid 0px transparent;
}

.ac-pagination_area .page-item a.page-link {
    border: solid 0px transparent;
    color: #9b9b9b;
}

.ac-pagination_area .page-item.page-item_active a.page-link {
    color: #000000;
}

.ac-pagination_area .page-item.page-item_next a {
    border: solid 0px transparent;
}

.ac-pagination_area .page-item.page-item_pagination a span,
.ac-pagination_area .page-item.page-item_next a span {
    position: relative;
    width: 20px;
    height: 20px;
    color: transparent;
}

.ac-pagination_area .page-item.page-item_pagination a span::before,
.ac-pagination_area .page-item.page-item_next a span::before {
    font-family: "FontAwesome";
    vertical-align: middle;
    position: absolute;
    font-size: 1em;
    color: #9b9b9b;
}

.ac-pagination_area .page-item.page-item_pagination a span::before {
    content: "\f0d9";
}

.ac-pagination_area .page-item.page-item_next a span::before {
    content: "\f0da";
}

.ac-area_none {
    text-align: center;
    font-size: 1.25em;
    color: #9b9b9b;
    padding: 20px 0;
}

.ac-article-info li {
    font-size: 0.9375em;
    display: inline-block;
    color: #9b9b9b;
    margin-right: 15px;
    margin-top: 20px;
}

/* ========================================== */

/* ==            Default  End              == */

/* ========================================== */

/* ========================================== */

/* ==            Back Top Start            == */

/* ========================================== */

#back-top {
    position: fixed;
    font-size: 1.0625em;
    color: #fff;
    bottom: 30px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: rgb(0, 0, 0);
    z-index: 15;
    text-align: center;
    padding: 7px;
    border-radius: 50%;
    opacity: 0.7
}

#back-top:hover,
#back-top:focus {
    opacity: 1
}

#back-top:active {
    background: none
}

#back-top {
    text-decoration: none
}

.topup {
    bottom: 5px
}

#back-top i {
    display: block
}

@media screen and (max-width:480px) {
    #back-top {
        right: 10px
    }
}

/* ========================================== */

/* ==            Back Top  End             == */

/* ========================================== */

/* ========================================== */

/* ==            side show  start             == */

/* ========================================== */
.icon_show_fix {
    display: flex;
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 6;
    flex-direction: column;
}

.icon_show {
    margin-bottom: 5px;
}
.icon_show:focus,.icon_show:hover {border:1px solid #007bff}

.icon_show img {
    width: 60px;
    height: 60px;
}

@media screen and (max-width:480px) {
    .icon_show_fix {
        right: 10px;
    }
}

/* ========================================== */

/* ==            side show  End             == */

/* ========================================== */

.ac-breadcrumbs-area {
    margin-top: 10px;
}

.ac-breadcrumbs a {
    position: relative;
    font-size: 0.75em;
    color: #9b9b9b;
    margin-right: 15px;
}

.ac-breadcrumbs a::after {
    font-family: "FontAwesome";
    content: "\f105";
    vertical-align: middle;
    position: absolute;
    right: -12px;
    top: -2px;
}

.ac-breadcrumbs a:last-child::after {
    content: ""
}

.ac-btn-right .ac-btn-area {
    justify-content: flex-end;
}

.ac-faketab_area {
    margin-bottom: 20px;
}

.ac-faketab_area ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
}

.ac-faketab_area ul li {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    padding-right: 10px;
}

.ac-faketab_area ul li a {
    font-size: 0.9375em;
    font-weight: bold;
    text-align: center;
    color: #21404f;
    background-color: #e6e6e6;
    padding: 12px 20px;
    display: block;
    margin: 5px 0;
}

.ac-faketab_area ul li:hover a,
.ac-faketab_area ul li:focus a {
    opacity: .8;
}

.ac-faketab_area ul li.faketab_active a {
    color: #21404f;
    background-color: #a1d2ea;
}

.ac-faketab_text {
    font-size: 1.25em;
    color: #4a4a4a;
}

.show_inner_area {
    display: flex;
    justify-content: space-between;
}

/* ========================================================================================== */

/* ==                                                                                      == */

/* ==                                  ALL Page CSS  End                                   == */

/* ==                                                                                      == */

/* ========================================================================================== */

/* ========================================================================================== */

/* ==                                                                                      == */

/* ==                                   Header CSS Start                                   == */

/* ==                                                                                      == */

/* ========================================================================================== */

.header_top_area {
    background: #345f98 url("https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20181008175000/https://dwsiot.epa.gov.tw/assets/images/navbar-bg.svg")center center no-repeat;
    background-size: cover
}

.header_nav_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: 70px;
}

.logo_area {
    position: relative
}

.logo_img {
    color: #fff;
    /* font-size: 0.9375em; */
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

.logo_img h1 {
    margin: 0;
}

.logo_img .logo_img_web {
    display: flex;
    flex-direction: column;
}

.logo_img .logo_img_web img {
    max-width: 140px;
    width: 100%;
    margin-bottom: 3px;
    margin-right: 10px;
    height: auto;
}

.logo_img .logo_img_title img {
    max-width: 140px;
    width: 100%;
    margin-bottom: 3px;
    height: auto;
}

/* .logo_img_title {
    font-size: 1.25em
} */

/* @media (min-width:1200px) {
    .logo_img_mobile {
        display: none
    }
} */

@media (max-width:1199.98px) {
    /* .logo_img_web {
        display: none
    }

    .logo_img_mobile {
        margin-right: 7px
    } */

    .logo_img {
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }

    .header_nav_area {
        display: flex;
        justify-content: flex-start;
    }
}


@media (max-width:575.98px) {
    .logo_img {
        justify-content: flex-start;
        height: 35px;
    }

    .logo_img .logo_img_web img,
    .logo_img .logo_img_title img {
        max-width: 120px;
    }

}

/* ========================================== */

/* ==           nav burger Start           == */

/* ========================================== */

@media screen and (min-width:1200px) {
    .header_nav_mobile {
        position: relative;
    }

    .header_nav_mobile ul {
        margin-bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .header_nav_mobile ul li {
        order: 1
    }

    .header_nav_mobile ul li a {
        color: #fff;
        font-size: 0.75em;
        padding: 7px 7px;
        position: relative
    }

    .header_nav_mobile ul li a::before {
        content: "";
        position: absolute;
        background: rgba(255, 255, 255, .9);
        height: 12px;
        left: 0;
        top: calc(100% / 2 - 6px);
        width: 1px
    }

    .header_nav_mobile ul li a span {
        vertical-align: middle
    }

    .header_nav_mobile ul li.nav_link_web_hide {
        display: none
    }
}

@media screen and (max-width:1199.98px) {
    .header_nav_mobile {
        display: inline-block;
        position: absolute;
        right: 0;
    }

    body.body_overflow {
        overflow: hidden
    }

    .burger_icon {
        width: 50px;
        height: 50px;
        position: relative;
        top: 50%;
        right: 0;
        border-radius: 4px;
        z-index: 100;
        transform: translate(100%, 0);
    }

    .burger_icon span {
        position: relative;
        margin-top: 9px;
        margin-bottom: 9px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -15px;
        margin-top: -1.5px
    }

    .burger_icon span,
    .burger_icon span::before,
    .burger_icon span::after {
        display: block;
        width: 30px;
        height: 3px;
        background-color: #fff;
        outline: 1px solid transparent;
        -webkit-transition-property: background-color, -webkit-transform;
        -moz-transition-property: background-color, -moz-transform;
        -o-transition-property: background-color, -o-transform;
        transition-property: background-color, transform;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-duration: 0.3s
    }

    .burger_icon span::before,
    .burger_icon span::after {
        position: absolute;
        content: ""
    }

    .burger_icon span::before {
        top: -9px
    }

    .burger_icon span::after {
        top: 9px
    }

    .burger_icon.clicked span {
        background-color: transparent
    }

    .burger_icon.clicked span::before {
        -webkit-transform: translateY(9px) rotate(45deg);
        -moz-transform: translateY(9px) rotate(45deg);
        -ms-transform: translateY(9px) rotate(45deg);
        -o-transform: translateY(9px) rotate(45deg);
        transform: translateY(9px) rotate(45deg)
    }

    .burger_icon.clicked span::after {
        -webkit-transform: translateY(-9px) rotate(-45deg);
        -moz-transform: translateY(-9px) rotate(-45deg);
        -ms-transform: translateY(-9px) rotate(-45deg);
        -o-transform: translateY(-9px) rotate(-45deg);
        transform: translateY(-9px) rotate(-45deg)
    }

    .burger_icon.clicked span:before,
    .burger_icon.clicked span:after {
        background-color: #4a4a4a
    }

    .burger_icon:hover {
        cursor: pointer
    }

    nav.nav_burger {
        background-color: #f6f6f6;
        position: fixed;
        z-index: 99;
        top: 0;
        right: 0;
        height: 100%;
        max-width: 445px;
        width: 100%;
        padding: 100px 40px 60px 40px;
        overflow-y: auto;
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
        -webkit-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
        -moz-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
        -o-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
        transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86)
    }

    nav.nav_burger.show {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px)
    }

    nav.nav_burger.show ul.main li {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
        opacity: 1;
        width: 100%
    }

    nav.nav_burger.show ul.main li:nth-child(1) {
        transition-delay: 0.06s
    }

    nav.nav_burger.show ul.main li:nth-child(2) {
        transition-delay: 0.12s
    }

    nav.nav_burger.show ul.main li:nth-child(3) {
        transition-delay: 0.18s
    }

    nav.nav_burger.show ul.main li:nth-child(4) {
        transition-delay: 0.24s
    }

    nav.nav_burger.show ul.main li:nth-child(5) {
        transition-delay: 0.30s
    }

    nav.nav_burger.show ul.main li:nth-child(6) {
        transition-delay: 0.36s
    }

    nav.nav_burger.show ul.main li:nth-child(7) {
        transition-delay: 0.42s
    }

    nav.nav_burger.show ul.main li:nth-child(8) {
        transition-delay: 0.48s
    }

    nav.nav_burger.show ul.main li:nth-child(9) {
        transition-delay: 0.54s
    }

    nav.nav_burger.show ul.main li:nth-child(10) {
        transition-delay: 0.60s
    }

    nav.nav_burger.show ul.main li:nth-child(11) {
        transition-delay: 0.66s
    }

    nav.nav_burger.show ul.main li:nth-child(12) {
        transition-delay: 0.72s
    }

    nav.nav_burger.show ul.main li:nth-child(13) {
        transition-delay: 0.78s
    }

    nav.nav_burger.show ul.main li:nth-child(14) {
        transition-delay: 0.84s
    }

    nav.nav_burger.show ul.main li:nth-child(15) {
        transition-delay: 0.90s
    }

    nav.nav_burger.show ul.main li:nth-child(16) {
        transition-delay: 0.96s
    }

    nav.nav_burger.show ul.main li:nth-child(17) {
        transition-delay: 1.02s
    }

    nav.nav_burger.show .nav_search {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
        transition-delay: .85s
    }

    nav.nav_burger ul.main li {
        margin-bottom: 20px;
        -webkit-transform: translateX(40px);
        -moz-transform: translateX(40px);
        -ms-transform: translateX(40px);
        -o-transform: translateX(40px);
        transform: translateX(40px);
        opacity: 0;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease
    }

    nav.nav_burger ul.main li:last-of-type {
        margin-bottom: 0
    }

    nav.nav_burger ul.main li a {
        color: #4a4a4a;
        font-family: "Raleway", sans-serif;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 0.9375em;
        display: block;
        letter-spacing: 5px;
        font-weight: 600;
        padding: 0 0 3px;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease
    }

    nav.nav_burger ul.main li a span {
        color: #4a4a4a;
        vertical-align: middle;
        font-size: 0.9375em
    }

    nav.nav_burger ul.main li a:hover {
        color: rgba(74, 74, 74, .8)
    }

    nav.nav_burger .about {
        margin-top: 40px;
        -webkit-transform: translateY(30px);
        -moz-transform: translateY(30px);
        -ms-transform: translateY(30px);
        -o-transform: translateY(30px);
        transform: translateY(30px);
        opacity: 0;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease
    }

    nav.nav_burger .about p {
        color: #ffffff;
        font-family: "Spectral", serif;
        font-size: 1.05rem;
        letter-spacing: 0.5px;
        line-height: 170%
    }

    nav.nav_burger .social {
        margin-top: 40px;
        position: relative;
        padding-bottom: 30px;
        -webkit-transform: translateY(30px);
        -moz-transform: translateY(30px);
        -ms-transform: translateY(30px);
        -o-transform: translateY(30px);
        transform: translateY(30px);
        opacity: 0;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease
    }

    nav.nav_burger .social:after {
        content: "";
        width: 230px;
        height: 2px;
        background-color: #b7ac7f;
        position: absolute;
        bottom: 0;
        left: 0
    }

    nav.nav_burger .social a {
        display: inline-block;
        width: 30px;
        height: 30px;
        margin-right: 25px
    }

    nav.nav_burger .social a:last-of-type {
        margin-right: 0
    }

    nav.nav_burger .social a:hover svg path,
    nav.nav_burger .social a:hover svg circle {
        fill: #b7ac7f
    }

    nav.nav_burger .social a svg {
        width: 100%;
        height: 100%
    }

    nav.nav_burger .social a svg path,
    nav.nav_burger .social a svg circle {
        fill: #ffffff;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease
    }

    nav.nav_burger ul.sub {
        list-style-type: none;
        margin-top: 40px;
        -webkit-transform: translateY(30px);
        -moz-transform: translateY(30px);
        -ms-transform: translateY(30px);
        -o-transform: translateY(30px);
        transform: translateY(30px);
        opacity: 0;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease
    }

    nav.nav_burger ul.sub li {
        margin-bottom: 10px
    }

    nav.nav_burger ul.sub li:last-of-type {
        margin-bottom: 0
    }

    nav.nav_burger ul.sub li a {
        color: #ffffff;
        font-family: "Raleway", sans-serif;
        letter-spacing: 1px;
        font-size: 0.9rem;
        text-decoration: none;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease
    }

    nav.nav_burger ul.sub li a:hover {
        color: #b7ac7f
    }

    .nav_overlay {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 98;
        width: 100%;
        height: 100%;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        background-color: #000;
        opacity: 0;
        visibility: hidden
    }

    .nav_overlay.show {
        opacity: 0.5;
        visibility: visible
    }
}

@media screen and (max-width:1023px) {
    .burger_icon {
        transform: translate(80%, 0);
    }
}

@media screen and (max-width:991px) {
    .burger_icon {
        transform: translate(100%, 0);
    }
}

@media screen and (max-width:800px) {
    .burger_icon {
        transform: translate(0, 0);
    }
}

@media screen and (max-width:767px) {
    nav.nav_burger {
        padding: 100px 35px 60px 35px
    }

    nav.nav_burger ul.main li a {
        font-size: 0.9375em;
        letter-spacing: 3px
    }
}

@media (max-width:575.98px) {

    .burger_icon span,
    .burger_icon span::before,
    .burger_icon span::after {
        width: 25px;
        height: 3px
    }

    .burger_icon {
        width: 35px;
        height: 35px;
        right: 30px;
    }

    .burger_icon span::after {
        top: 7px
    }

    .burger_icon span::before {
        top: -7px
    }

    .burger_icon.clicked span::before {
        -webkit-transform: translateY(7px) rotate(45deg);
        -moz-transform: translateY(7px) rotate(45deg);
        -ms-transform: translateY(7px) rotate(45deg);
        -o-transform: translateY(7px) rotate(45deg);
        transform: translateY(7px) rotate(45deg)
    }

    .burger_icon.clicked span::after {
        -webkit-transform: translateY(-7px) rotate(-45deg);
        -moz-transform: translateY(-7px) rotate(-45deg);
        -ms-transform: translateY(-7px) rotate(-45deg);
        -o-transform: translateY(-7px) rotate(-45deg);
        transform: translateY(-7px) rotate(-45deg)
    }

    .header_nav_mobile {
        position: relative;
    }
}

@media (max-width:499.98px) {
    .burger_icon {
        /* top: 5px; */
        transform: initial;
    }
}

/* ========================================== */

/* ==           nav burger  End            == */

/* ========================================== */

/*============================== nav mobile start ==============================*/

.side_wrap ul .side_link {
    display: block;
    font-size: 1em;
    position: relative;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.side_wrap ul ul.side_submenu {
    cursor: pointer;
    background: transparent;
    font-size: 0.875em;
    padding: 0;
    margin-top: 5px;
}

.side_wrap ul ul.side_submenu li {
    margin: 0;
}

.side_wrap ul ul.side_submenu li a {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 6px;
    padding-left: 22px;
    font-size: 0.875em !important;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.side_wrap ul ul.side_submenu li a:hover {
    background: #a1d2ea;
    color: #29548a;
}

/*============================== nav mobile end ==============================*/

.ac-search-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.searchTerm {
    border-right: none;
    -ms-flex: 0 0 calc(100% - 36px);
    flex: 0 0 calc(100% - 36px);
    max-width: calc(100% - 36px);
    height: 32px;
    border-radius: 8px 0 0 8px;
    outline: none;
    color: #fff;
    border: 0;
    padding: 5px 14px;
    font-size: 0.875em;
    background-color: #264672;
    box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5)
}

.searchTerm:focus {
    border: 1px solid #ffffff;
}

.ac-search-bar ::-webkit-input-placeholder,
.ac-search-bar :-ms-input-placeholder,
.ac-search-bar ::placeholder {
    color: #fff
}

.ac-search-bar::-webkit-input-placeholder,
.ac-search-bar input.searchTerm::-moz-placeholder,
.ac-search-bar:-ms-input-placeholder {
    color: #fff
}

.searchTerm:focus {
    color: #fff
}

.searchButton {
    -ms-flex: 0 0 36px;
    flex: 0 0 36px;
    max-width: 36px;
    height: 32px;
    border: 0;
    text-align: center;
    color: #fff;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    font-size: 1.25em;
    background-color: #18345a
}
.searchButton:focus,.searchButton:hover{border:1px solid #ffffff}

@media (max-width:1199.98px) {
    .ac-search-bar {
        padding-right: 40px;
    }
}

@media (max-width:1023px) {
    .ac-search-bar {
        padding-right: 50px
    }
}

@media (max-width:575.98px) {
    .logo_area {
        padding-right: 0;
        -ms-flex: 0 0 95%;
        flex: 0 0 95%;
        max-width: 95%
    }

    .ac-search-bar {
        padding-right: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

.nav-web {
    background-color: #4A76B0;
}

.nav-web ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
}

.nav-web ul li {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    text-align: center;
}

.nav-web ul li img {
    width: 50px;
    margin: 0 auto 8px;
    display: block;
}

.nav-web ul li a {
    font-size: 1em;
    font-weight: 500;
    text-align: center;
    color: #fff;
}

.nav-web ul li {
    font-size: 1em;
    font-weight: 500;
    text-align: center;
    color: #fff;
    padding: 8px 15px;
    display: block;
    cursor: pointer;
}

.nav-web ul li .dropdown-item {
    color: initial !important;
}

.nav-web ul li:hover,
.nav-web ul li:focus {
    background: #345F98;
}

.nav-web ul li .header_navweb_active {
    background: #a1d2ea;
}

@media (min-width:1200px) {
    .header_nav_mobile ul li.nav_mobile {
        display: none;
    }
}

@media (max-width:1199.98px) {
    .nav-web {
        display: none;
    }

    nav.nav_burger ul.main li {
        margin-bottom: 5px;
    }

    nav.nav_burger ul.main li.nav_mobile {
        margin-bottom: 10px;
        margin-top: 10px;
    }

    nav.nav_burger ul.main li a {
        font-size: 0.75em;
        font-weight: normal;
        color: #9b9b9b;
    }

    nav.nav_burger ul.main li.nav_mobile a {
        font-size: 1em;
        font-weight: bold;
        color: #4a4a4a;
    }
}

/* ========================================================================================== */

/* ==                                                                                      == */

/* ==                                   Header CSS  End                                    == */

/* ==                                                                                      == */

/* ========================================================================================== */

/* ========================================================================================== */

/* ==                                                                                      == */

/* ==                                   Index CSS Start                                    == */

/* ==                                                                                      == */

/* ========================================================================================== */

.ac-index .ac-section.ac-section_first {
    padding-top: 0px;
}

.ac-index header {
    /* display: none; */
    display: block;
    position: relative;
}

.ac-index header.header_show {
    display: block;
    position: fixed;
}

@media (max-width: 1199.98px) {
    .ac-index .ac-section.ac-section_first {
        padding-top: 0px;
    }
}

@media (max-width: 767.98px) {
    .ac-index header {
        display: block;
    }
}

.area_title {
    position: relative;
    font-size: 2.1875em;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.71;
    letter-spacing: normal;
    text-align: center;
    margin-bottom: 50px;
}

.area_title.area_title_blue {
    color: #29548a;
}

.area_title.area_title_white {
    color: #fff;
}

.area_title.pagetitle {
    font-size: 1.5625em;
    font-weight: bold;
    color: #000000;
    text-align: left;
    margin-bottom: 0;
}

.area_title:before {
    content: "";
    background: #f0b031;
    width: 50px;
    height: 5px;
    left: calc(100% / 2 - 25px);
    right: 0;
    bottom: -5px;
    position: absolute;
}

.area_title.pagetitle:before {
    background: transparent;
    width: 0px;
    height: 0px;
}

.owl-nav .owl-prev {
    left: 0px;
}

.owl-nav .owl-next {
    right: 0px;
}

.owl-nav {
    margin: 0;
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background: #f0b031;
    color: #FFF;
    text-decoration: none;
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
    font-size: 1.375em;
    margin: 0;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.2);
    background: #ffffff;
    top: calc(100% / 2 - 27px);
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 56px;
    position: absolute;
    color: #8b8b8b;
    border-radius: 50%;
}

.ac-carousel-news .owl-nav .owl-prev {
    left: -25px;
}

.ac-carousel-news .owl-nav .owl-next {
    right: -25px;
}

.ac-indexarea-media .owl-nav .owl-prev {
    left: -25px;
}

.ac-indexarea-media .owl-nav .owl-next {
    right: -25px;
}

.ac-indexarea-link .owl-nav .owl-prev {
    left: -60px;
}

.ac-indexarea-link .owl-nav .owl-next {
    right: -60px;
}

.ac-activityphoto-area .owl-nav .owl-prev {
    left: -40px;
}

.ac-activityphoto-area .owl-nav .owl-next {
    right: -40px;
}

@media (max-width: 1280px) {
    .ac-indexarea-link .owl-nav .owl-prev {
        left: -3%;
    }

    .ac-indexarea-link .owl-nav .owl-next {
        right: -3%;
    }
}

@media (max-width: 767.98px) {
    .ac-carousel-news .owl-nav .owl-prev {
        left: -5px;
    }

    .ac-carousel-news .owl-nav .owl-next {
        right: -5px;
    }

    .ac-indexarea-link .owl-nav .owl-prev {
        left: -5px;
    }

    .ac-indexarea-link .owl-nav .owl-next {
        right: -5px;
    }

    .ac-indexarea-media .owl-nav .owl-prev {
        left: -5px;
    }

    .ac-indexarea-media .owl-nav .owl-next {
        right: -5px;
    }

    .ac-activityphoto-area .owl-nav .owl-prev {
        left: -5px;
    }

    .ac-activityphoto-area .owl-nav .owl-next {
        right: -5px;
    }
}

@media (max-width: 575.98px) {
    .area_title {
        margin-bottom: 30px;
    }
}

@media (max-width: 479.98px) {

    .owl-carousel .owl-nav button.owl-next,
    .owl-carousel .owl-nav button.owl-prev,
    .owl-carousel button.owl-dot {
        font-size: 1em;
        width: 45px;
        height: 45px;
        line-height: 45px;
    }
}

/* ========================================== */

/* ==          Index Area1 Start           == */

/* ========================================== */

.index_content {
    padding-top: 168px;
}

.index_banner_top_logo {
    width: 100%;
    max-width: 243px;
    margin-bottom: 80px
}

.index_banner_top_title {
    font-size: 3.125em;
    font-weight: bold;
    color: #ffffff;
    position: relative
}

.index_banner_top_title:before {
    content: "";
    background: #f0b031;
    width: 85px;
    height: 7px;
    position: absolute;
    bottom: -20px
}

.index_banner_bottom_area {
    position: relative;
    z-index: 1;
    padding-bottom: 0
}

.index_banner_bottom_area::before {
    content: "";
    position: absolute;
    background-color: rgba(81, 143, 194, .1);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    z-index: -1
}

.index_banner_bottom_area::after {
    content: "";
    position: absolute;
    background: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20181008175000/https://dwsiot.epa.gov.tw/assets/images/photo-index-iconblock.jpg)center bottom no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    z-index: -2
}

nav.banner_nav_area {
    position: relative;
}

nav.banner_nav_area ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start
}

nav.banner_nav_area ul li {
    text-align: center;
    width: 222px;
    margin-top: -30px;
    margin-bottom: 60px
}

.banner_nav_item {
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px auto
}

.banner_nav_item img {
    width: 60px;
    text-align: center
}

.banner_nav_item_name {
    color: #fff;
    display: inline-block;
    margin-top: 10px
}

@media (max-width:1199.98px) {
    .index_content {
        padding-top: 70px;
    }
}

@media (min-width:768px) and (max-width:991.98px) {
    nav.banner_nav_area ul li {
        -ms-flex: 0 0 calc(100%/5);
        flex: 0 0 calc(100%/5);
        max-width: calc(100%/5)
    }
}

@media (max-width:767.98px) {
    .index_banner_bottom_area {
        display: none
    }
}

/* ========================================== */

/* ==          Index Area1  End            == */

/* ========================================== */

/* ========================================== */

/* ==          Index Area2 Start           == */

/* ========================================== */

.ac-carousel-news {
    position: relative
}

.ac-carousel-news-item {
    width: 100%;
    max-width: 250px;
    margin: 0 auto
}

.owl-carousel .owl-item .ac-carousel-news-item img {
    width: 250px;
    height: 181px;
    object-fit: cover;
    margin: 0 auto;
    margin-bottom: 20px
}

.ac-carousel-news-item h3 {
    font-size: 1.25em;
    font-weight: bold;
    color: #273b54;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 52px
}

.ac-carousel-news-item p {
    font-size: 1.0625em;
    color: #4f4f4f;
    line-height: 1.47;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height: 70px;
}

@media (min-width:992px) and (max-width:1199.98px) {
    .ac-carousel-news-item {
        max-width: 200px
    }

    .owl-carousel .owl-item .ac-carousel-news-item img {
        width: 200px;
        height: 145px
    }
}

@media (min-width:768px) and (max-width:991.98px) {
    .ac-carousel-news-item {
        max-width: 200px
    }

    .owl-carousel .owl-item .ac-carousel-news-item img {
        width: 200px;
        height: 145px
    }
}

@media (max-width:767.98px) {
    .ac-carousel-news-item {
        max-width: 220px
    }

    .owl-carousel .owl-item .ac-carousel-news-item img {
        width: 220px;
        height: 159px
    }
}

/* ========================================== */

/* ==          Index Area2  End            == */

/* ========================================== */

/* ========================================== */

/* ==          Index Area3 Start           == */

/* ========================================== */

.container_fluid {
    max-width: 1400px
}

.ac-indexarea-map-bg {
    background-color: #eff8fe;
    padding: 80px 0;
    display: inline-block;
    width: 100%;
}

.ac-indexarea-map {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /*align-items: flex-end;*/
}

.ac-indexarea-map-info {
    -ms-flex: 0 0 460px;
    flex: 0 0 460px;
    max-width: 460px
}

.ac-indexarea-map-mapimage {
    padding-left: 5rem;
    -ms-flex: 0 0 calc(100% - 460px);
    flex: 0 0 calc(100% - 460px);
    max-width: calc(100% - 460px);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ac-indexarea-map-mapimage .map_size {
    position: relative;
    width: 100%;
}

.ac-indexarea-map_time {
    text-align: center;
    margin-bottom: 10px;
}

.ac-indexarea-map_time h4 {
    font-family: "Times New Roman";
    margin: 0;
}

.ac-indexarea-map-mapimage img {
    width: 100%;
    max-width: 100%;
    height: auto
}

.ac-indexarea-map-item {
    border-radius: 16px;
    box-shadow: 0 8px 15px 0 rgba(175, 175, 175, 0.5);
    background-color: #ffffff;
    padding: 20px;
    margin-bottom: 25px
}

.ac-indexarea-map-item.ac-indexarea-map-item-tw h3 {
    font-size: 1.5625em;
    text-align: center;
    color: #29548a;
    margin-bottom: 5px
}

.ac-indexarea-map-item.ac-indexarea-map-item-location h4 {
    font-size: 1.5625em;
    text-align: center;
    color: #51abbe;
    margin-bottom: 30px
}

.ac-indexarea-map-item.ac-indexarea-map-item-location h4 i {
    color: #d0021b;
    margin-right: 7px
}

.ac-indexarea-map-item-tw ul {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.ac-indexarea-map-item-tw ul li {
    background: #29548a;
    border-radius: 55px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 20px;
    height: 100px;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
}

.ac-indexarea-map-item-tw ul li .map-item-tw-image {
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    border-radius: 50%;
    -ms-flex: 0 0 100px;
    flex: 0 0 100px;
    max-width: 100px;
    height: 100px;
    border: solid 1px #FFF;
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

.ac-indexarea-map-item-tw ul li .map-item-tw-image img {
    width: 90px
}

.ac-indexarea-map-item-tw ul li .map-item-tw-info {
    -ms-flex: 0 0 calc(100% - 100px);
    flex: 0 0 calc(100% - 100px);
    max-width: calc(100% - 100px);
    color: #fff;
    padding-left: 40px;
    padding-right: 25px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
    width: calc(100% - 100px)
}

.ac-indexarea-map-item-tw ul li .map-item-tw-info>div>span {
    color: #d5dbe4;
    margin-bottom: 0;
    font-size: 1.25em
}

.ac-indexarea-map-item-tw ul li .map-item-tw-info>div>h4 {
    margin-bottom: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.ac-indexarea-map-item-tw ul li .map-item-tw-info>div>h4 span {
    font-size: 2.1875em
}

.ac-indexarea-map-item-tw ul li .map-item-tw-info>div>h4 span+span {
    font-weight: 300;
    color: #d5dbe4;
    -ms-flex: 0 0 30px;
    flex: 0 0 30px;
    max-width: 30px;
    font-size: 1.25em
}

.ac-indexarea-map-item-tw ul li .map-item-tw-info>div>h4 span.total {
    font-family: "Times New Roman";
    letter-spacing: 3px;
    margin-right: 6px;
}

.map-item-down .map-item-tw-info::before,
.map-item-up .map-item-tw-info::before {
    font-family: "FontAwesome";
    vertical-align: middle;
    position: absolute;
    font-size: 1.25em;
    bottom: 15px;
    left: 10px
}

.map-item-down .map-item-tw-info::before {
    content: "\f063";
    color: #b6e462
}

.map-item-up .map-item-tw-info::before {
    content: "\f062";
    color: #ef8376
}

.ac-indexarea-map-item-location ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.ac-indexarea-map-item-location ul li {
    margin-bottom: 10px;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: calc(50% - 10px);
    margin-right: 5px;
    margin-left: 5px
}

.map-item-location-info {
    border-radius: 16px;
    background-color: #eff8fe;
    padding: 10px 15px
}

.map-item-location-info>p {
    font-size: 1.125em;
    color: #a4afbd;
    margin-bottom: 5px
}

.map-item-location-info>h3 {
    border-radius: 55px;
    background-color: #29548a;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 0
}

.map-item-location-info>h3 span {
    font-size: 2.1875em;
    color: #ffffff;
    -ms-flex: 0 0 calc(100% - 40px);
    flex: 0 0 calc(100% - 40px);
    max-width: calc(100% - 40px)
}

.map-item-location-info>h3 span+span {
    font-size: 1.25em;
    -ms-flex: 0 0 40px;
    flex: 0 0 40px;
    max-width: 40px;
    text-align: right;
    color: #d5dbe4;
    font-weight: 300
}

@media (min-width:992px) and (max-width:1199.98px) {
    .ac-indexarea-map-mapimage {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0
    }

    .ac-indexarea-map-info .ac-indexarea-map-item+.ac-indexarea-map-item {
        margin-right: 0;
        margin-left: 22px
    }
}

@media(max-width: 1199.98px) {
    .ac-indexarea-map-item {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .ac-indexarea-map-info .ac-indexarea-map-item {
        padding: 15px 40px
    }
}

@media (min-width:768px) and (max-width:991.98px) {
    .ac-indexarea-map-mapimage {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
    }
}

@media (max-width:1199.98px) {
    .ac-indexarea-map-info {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0 auto;
    }
}

@media (max-width:767px) {
    .ac-indexarea-map-mapimage {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        margin: 0 auto;
    }

    .ac-indexarea-map-info {
        margin: 0 auto;
    }
}

@media (max-width:560px) {
    .ac-indexarea-map-info {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .ac-indexarea-map-mapimage {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
    }

    .ac-indexarea-map-mapimage .map_size {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-bottom: 3rem
    }

    .ac-indexarea-map-bg {
        padding-bottom: 30px
    }

    .ac-indexarea-map-item-tw ul {
        max-width: 100%
    }

    .ac-indexarea-map-item-tw ul li .map-item-tw-image {
        -ms-flex: 0 0 75px;
        flex: 0 0 75px;
        max-width: 75px;
        height: 75px;
    }

    .ac-indexarea-map-item-tw ul li .map-item-tw-info {
        -ms-flex: 0 0 calc(100% - 75px);
        flex: 0 0 calc(100% - 75px);
        max-width: calc(100% - 75px);
        padding-left: 30px;
        padding-right: 10px;
    }

    .ac-indexarea-map-item-tw ul li .map-item-tw-image img {
        width: 100%;
    }

    .ac-indexarea-map-item-tw ul li .map-item-tw-info>div>p {
        font-size: 0.9375em;
        margin: 0;
    }

    .ac-indexarea-map-item-tw ul li .map-item-tw-info>div>h4 span {
        font-size: 1.875em;
    }

    .ac-indexarea-map-item-tw ul li .map-item-tw-info>div>h4 span+span {
        font-size: 0.9375em;
    }

    .map-item-down .map-item-tw-info::before,
    .map-item-up .map-item-tw-info::before {
        font-size: 1.125em;
        left: 5px;
    }

    .ac-indexarea-map-item-tw ul li {
        height: 73px;
    }

    .ac-indexarea-map-item.ac-indexarea-map-item-tw h4 {
        font-size: 1.125em;
    }

    .ac-indexarea-map-item.ac-indexarea-map-item-location h4 {
        font-size: 1.125em;
    }

    .map-item-location-info>p {
        font-size: 0.8125em;
    }

    .map-item-location-info>h3 span {
        font-size: 1.875em;
    }

    .map-item-location-info>h3 span+span {
        font-size: 0.8125em;
    }
}

@media (max-width:575.98px) {
    .ac-indexarea-map-item-location ul li {
        margin-bottom: 10px;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-right: 0;
        margin-left: 0
    }

    .ac-btn-right .ac-btn-area {
        justify-content: center;
    }
}

@media(max-width:460px) {
    .ac-indexarea-map-item-tw ul li .map-item-tw-image {
        -ms-flex: 0 0 75px;
        flex: 0 0 63px;
        max-width: 63px;
        height: 63px;
        margin: 5px;
    }

    .ac-indexarea-map-item-tw ul li .map-item-tw-info>div>h3 span {
        font-size: 1.3125em;
    }

    .ac-indexarea-map-info .ac-indexarea-map-item {
        padding: 22px 22px
    }
}

@media (max-width: 360px) {
    .ac-indexarea-map-item-tw ul li .map-item-tw-info>div>span {
        font-size: 0.9375em
    }
}

/* ========================================== */

/* ==          Index Area3  End            == */

/* ========================================== */

/* ========================================== */

/* ==          Index Area4 Start           == */

/* ========================================== */

.ac-indexarea-media-bg {
    background: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20181008175000/https://dwsiot.epa.gov.tw/assets/images/photo-index-videobg.jpg)center center no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
    margin-bottom: 100px
}

.ac-indexarea-media-bg-mask {
    background-color: rgba(21, 30, 45, 0.4);
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0
}

.ac-indexarea-media-bg-content {
    position: relative;
    z-index: 3
}

.ac-indexarea-media {
    position: relative
}

.ac-carousel-media-item {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end
}

.ac-indexarea-media .ac-carousel-media-item {
    max-width: 275px;
    min-height: 425px;
    margin: 0 auto
}
.ac-indexarea-media .ac-carousel-media-link:focus .ac-carousel-media-item,
.ac-indexarea-media .ac-carousel-media-link:hover .ac-carousel-media-item{border: 2px solid #007bff;}

.ac-carousel-media-item:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: linear-gradient(to top, rgba(21, 30, 45, 0.8), rgba(21, 30, 45, 0))
}

.inner_media_item.ac-carousel-media-item:before {
    display: none
}

.ac-carousel-media-item>div {
    position: absolute;
    z-index: 2;
    padding: 15px 35px;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%
}

.ac-carousel-media-title {
    font-size: 1.3125em;
    line-height: 1.24;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 50px
}

.ac-carousel-media-item::after {
    content: ""
}

.ac-carousel-media-item:hover::after {
    font-family: "FontAwesome";
    content: "\f04b";
    vertical-align: middle;
    position: absolute;
    font-size: 1.375em;
    margin: 0;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.2);
    background: #ffffff;
    width: 55px;
    height: 55px;
    text-align: center;
    line-height: 55px;
    color: #8b8b8b;
    border-radius: 50%;
    left: calc(100% / 2 - 27px);
    top: calc(100% / 2 - 27px)
}

.ac-carousel-media-view {
    font-size: 0.8125em;
    font-weight: bold;
    color: #ffffff;
    text-align: right
}

.ac-carousel-media-view span {
    display: inline-block;
    position: relative;
    padding-left: 20px
}

.ac-carousel-media-view span::before {
    font-family: "FontAwesome";
    content: "\f06e";
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 13px
}

@media (min-width:992px) and (max-width:1199.98px) {
    .ac-indexarea-media .ac-carousel-media-item {
        max-width: 200px;
        min-height: 309px
    }

    .ac-carousel-media-item>div {
        padding: 15px 15px
    }
}

@media (min-width:768px) and (max-width:991.98px) {
    .ac-indexarea-media .ac-carousel-media-item {
        max-width: 200px;
        min-height: 309px
    }

    .ac-carousel-media-item>div {
        padding: 15px
    }
}

@media (max-width:767.98px) {
    .ac-indexarea-media .ac-carousel-media-item {
        max-width: 200px;
        min-height: 309px
    }

    .ac-carousel-media-item>div {
        padding: 15px 20px
    }
}

/* ========================================== */

/* ==          Index Area4  End            == */

/* ========================================== */

/* ========================================== */

/* ==          Index Area5 Start           == */

/* ========================================== */

.ac-indexarea-link {
    background: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20181008175000/https://dwsiot.epa.gov.tw/assets/images/photo-index-bottom.jpg)center center no-repeat;
    background-size: cover;
    position: relative;
    padding: 50px 0 95px
}

.indexarea-link-area {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.indexarea-link {
    margin-bottom: 5px;
}

/* .img_wrap_area {
    position: relative;
}

.img_wrap_area .img_wrap {
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
    z-index: 1;
}

.img_wrap_area:hover .img_wrap {
    background-color: rgba(255, 255, 255, 0.8);
}

.img_wrap_area .img_wrap_name {
    width: 100%;
    font-size: 1.3125em;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    position: absolute;
    top: 50%;
    z-index: 1;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 0px 0px 4px #000;
}

.img_wrap_area:hover .img_wrap_name {
    color: #29548a;
    text-shadow: none;
} */

/* ========================================== */

/* ==          Index Area5  End            == */

/* ========================================== */

/* ========================================== */

/* ==          Related Links  start           == */

/* ========================================== */

.column_list {
    width: 100%;
    display: inline-block;
    display: flex;
}

.column_list div {
    position: relative;
}

.column_list div figure img {
    -webkit-box-shadow: 0px 3px 10px #ccc;
    -moz-box-shadow: 0px 3px 10px #ccc;
    box-shadow: 0px 3px 10px #ccc;
}

.column_list div span {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #444;
    font-size: 1.4em;
    text-decoration: none;
    text-align: center;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    opacity: 0;
}

.column_list figure {
    margin: 0;
    padding-bottom: 25px;
}

.column_list figure:hover+span {
    opacity: 1;
    transform: translate(0, 100%);
    bottom: 20px;
}

/* ========================================== */

/* ==          Related Links  End            == */

/* ========================================== */


/* ========================================================================================== */

/* ==                                                                                      == */

/* ==                                   Index CSS  End                                     == */

/* ==                                                                                      == */

/* ========================================================================================== */

/* ========================================================================================== */

/* ==                                                                                      == */

/* ==                                     Map CSS Start                                    == */

/* ==                                                                                      == */

/* ========================================================================================== */

.ac-other.ac-map .ac-section {
    padding-top: 130px;
    padding-bottom: 0;
}

.ac-mappage-area {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    min-height: 900px;
}

.ac-mappage-info {
    -ms-flex: 0 0 505px;
    flex: 0 0 505px;
    max-width: 505px;
    background-color: #ffffff;
    padding: 25px 35px 40px;
}

.ac-mappage-map {
    -ms-flex: 0 0 calc(100% - 505px);
    flex: 0 0 calc(100% - 505px);
    max-width: calc(100% - 505px);
    margin-bottom: 50px;
}

.ac-mappage-map iframe {
    width: 100%;
    height: 100%;
}

.ac-mappage-info .ac-indexarea-map-item-location,
.ac-mappage-info .ac-indexarea-map-item-location.ac-indexarea-map-item-locationinfo {
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    padding: 0 0;
    margin-bottom: 0;
}

.ac-mappage-info .ac-indexarea-map-item-location {
    padding-bottom: 30px;
    border-bottom: solid 1px #979797;
    margin-bottom: 30px;
}

.ac-mappage-info .ac-indexarea-map-item-location.ac-indexarea-map-item-locationinfo {
    padding-bottom: 0px;
    border-bottom: solid 0px transparent;
    margin-bottom: 0px;
}

.ac-indexarea-map-item-locationinfo ul {
    border-radius: 16px;
    background-color: #eff8fe;
    padding: 20px 25px;
}

.ac-indexarea-map-item-locationinfo ul li {
    margin-bottom: 10px;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
}

.map-item-location-locationinfo {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.map-item-location-locationinfo>div {
    font-size: 1.125em;
    color: #a4afbd;
    -ms-flex: 0 0 120px;
    flex: 0 0 120px;
    max-width: 120px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-right: 10px;
}

.map-item-location-locationinfo>div+div {
    color: #a4afbd;
    -ms-flex: 0 0 calc(100% - 120px);
    flex: 0 0 calc(100% - 120px);
    max-width: calc(100% - 120px);
    border-radius: 16px;
    background-color: #fff;
    padding: 10px 20px;
}

.map-item-location-locationinfo.map-item-location-locationinfo_ice>div+div {
    color: #4a90e2;
}

.map-item-location-locationinfo.map-item-location-locationinfo_hot>div+div {
    color: #d0021b;
}

@media (max-width: 575.98px) {
    .ac-mappage-map {
        flex: 100%;
        max-width: 100%;
        height: 500px;
        margin-bottom: 50px;
    }

    .map-item-location-locationinfo>div {
        -ms-flex: 0 0 90px;
        flex: 0 0 90px;
        max-width: 90px;
    }

    .map-item-location-locationinfo>div+div {
        -ms-flex: 0 0 calc(100% - 90px);
        flex: 0 0 calc(100% - 90px);
        max-width: calc(100% - 90px);
    }
}

@media (max-width: 479.98px) {
    .map-item-location-locationinfo>div {
        font-size: 0.9375em;
    }
}

@media (max-width: 379.98px) {
    .map-item-location-locationinfo>div {
        -ms-flex: 0 0 60px;
        flex: 0 0 60px;
        max-width: 60px;
    }

    .map-item-location-locationinfo>div+div {
        -ms-flex: 0 0 calc(100% - 60px);
        flex: 0 0 calc(100% - 60px);
        max-width: calc(100% - 60px);
    }
}

.ac-taiwan-area img {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    display: block;
}

.tooltipster-sidetip .tooltipster-content {
    padding: 1rem !important;
}

.tooltipster-grow.tooltipster-show {
    width: 320px !important;
    max-width: 100% !important;
    height: auto !important;
    z-index: 1 !important;
}

.tooltipster-content h4 {
    color: #388DBC;
    margin: 0;
}

.tooltipster-content .modal-dialog {
    margin: 0 !important;
}

.tooltipster-content .modal-content {
    border: 1px solid #e9ecef;
}

.tooltipstered {
    cursor: pointer;
}

@media (max-width:575px) {
    .tooltipster-sidetip.tooltipster-shadow.tooltipster-top .tooltipster-arrow-border {
        display: none
    }

    .tooltipster-grow.tooltipster-show {
        padding: 15px;
        left: 50% !important;
        transform: translate(-50%, 0) !important;
    }
}

/* ========================================================================================== */

/* ==                                                                                      == */

/* ==                                     Map CSS  End                                     == */

/* ==                                                                                      == */

/* ========================================================================================== */

/* ========================================================================================== */

/* ==                                                                                      == */

/* ==                                WaterActivity CSS Start                               == */

/* ==                                                                                      == */

/* ========================================================================================== */

.wateractivity-banner-area {
    background: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20181008175000/https://dwsiot.epa.gov.tw/assets/images/photo-pagetltle-special-bg.jpg)center center no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
    padding: 65px 0 40px;
}

.wateractivity-banner-mask {
    position: absolute;
    width: 100%;
    height: calc(100% - 35px);
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 35px;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.2) 23%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.2) 23%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.2) 23%, rgba(255, 255, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
}

.wateractivity-banner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background-color: rgba(255, 255, 255, 0.5);
    position: relative;
    z-index: 3;
    padding: 25px 35px;
}

.wateractivity-banner_title h1 {
    -ms-flex: 0 0 245px;
    flex: 0 0 245px;
    max-width: 245px;
    font-size: 1.5625em;
    font-weight: bold;
    line-height: 2.52;
    color: #000000;
}

.wateractivity-banner_nav {
    -ms-flex: 0 0 calc(100% - 245px);
    flex: 0 0 calc(100% - 245px);
    max-width: calc(100% - 245px);
    width: calc(100% - 245px);
}

.wateractivity-banner_nav ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between
}

.wateractivity-banner_nav ul li {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

.wateractivity-banner_nav ul li a .banner_nav_item_name {
    font-size: 1.25em;
    font-weight: 500;
    text-align: center;
    color: #29548a;
    display: block;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .wateractivity-banner_title {
        -ms-flex: 0 0 200px;
        flex: 0 0 200px;
        max-width: 200px;
    }

    .wateractivity-banner_nav {
        -ms-flex: 0 0 calc(100% - 200px);
        flex: 0 0 calc(100% - 200px);
        max-width: calc(100% - 200px);
    }

    .banner_nav_item {
        width: 65px;
        height: 65px;
    }

    .banner_nav_item img {
        width: 45px;
    }

    .wateractivity-banner_nav ul li a .banner_nav_item_name {
        font-size: 1em;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .wateractivity-banner_title {
        -ms-flex: 0 0 200px;
        flex: 0 0 200px;
        max-width: 200px;
    }

    .wateractivity-banner_nav {
        -ms-flex: 0 0 calc(100% - 200px);
        flex: 0 0 calc(100% - 200px);
        max-width: calc(100% - 200px);
    }

    .wateractivity-banner {
        padding: 15px 15px;
    }

    .banner_nav_item {
        width: 60px;
        height: 60px;
    }

    .banner_nav_item img {
        width: 40px;
    }

    .wateractivity-banner_nav ul li a .banner_nav_item_name {
        font-size: 0.875em;
    }
}

@media (max-width: 767.98px) {
    .wateractivity-banner_title {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .wateractivity-banner_nav {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .wateractivity-banner {
        padding: 15px 15px;
    }

    .banner_nav_item {
        width: 60px;
        height: 60px;
    }

    .banner_nav_item img {
        width: 40px;
    }

    .wateractivity-banner_nav ul li a .banner_nav_item_name {
        font-size: 0.875em;
    }

    .wateractivity-banner_nav ul li {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575.98px) {
    .wateractivity-banner-mask {
        margin-top: 0;
        height: 100%;
    }

    .wateractivity-banner-area {
        padding: 15px 0 16px;
    }
}

@media (max-width: 379.98px) {
    .wateractivity-banner_nav ul li {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.wateractivity_video_list ul li {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 15px;
}

.wateractivity_video_list .ac-carousel-media-item {
    max-width: 100%;
    /* min-height: 310px; */
    margin: 0 auto;
    justify-content: flex-start;
}

/* .activityphoto_photo_list ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.activityphoto_photo_list ul li {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.activityphoto_photo_list ul li img {
    width: 100%;
    padding: 5px;
}

@media (max-width: 991.98px) {
    .activityphoto_photo_list ul li {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
} */

@media (max-width: 1199.98px) {
    .wateractivity_video_list ul li {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 479.98px) {
    /* .activityphoto_photo_list ul li {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    } */

    .wateractivity_video_list ul li {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.activity_photos_area {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.activity_photos_area .gallery_item {
    display: inline-block;
    -ms-flex: 0 0 33.333%;
    flex: 0 0 33.333%;
    max-width: 33.333%;
    margin-bottom: 0.5rem;
    padding: 4px;
}

.activity_photos_area .gallery_item img {
    width: 100%;
}

@media (max-width: 991.98px) {
    .activity_photos_area .gallery_item {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 479.98px) {
    .activity_photos_area .gallery_item {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ========================================================================================== */

/* ==                                                                                      == */

/* ==                                WaterActivity CSS  End                                == */

/* ==                                                                                      == */

/* ========================================================================================== */

/* ========================================================================================== */

/* ==                                                                                      == */

/* ==                                  Other Page CSS Start                                == */

/* ==                                                                                      == */

/* ========================================================================================== */

.other-banner-area {
    background: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20181008175000/https://dwsiot.epa.gov.tw/assets/images/photo-pagetltle-basic-bg.jpg)center center no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
    padding: 42px 0 42px;
}

.other-banner_title h1 {
    font-size: 1.875em;
    font-weight: bold;
    line-height: 2.1;
    color: #000000;
}

/* ========================================================================================== */

/* ==                                                                                      == */

/* ==                                  Other Page CSS  End                                 == */

/* ==                                                                                      == */

/* ========================================================================================== */

/* ========================================================================================== */

/* ==                                                                                      == */

/* ==                                   Footer CSS Start                                   == */

/* ==                                                                                      == */

/* ========================================================================================== */

.footer {
    background-color: #e6f1e3;
    padding: 16px 0;
    color: #244d05;
    width: 100%;
    display: inline-block;
    float: left;
    clear: both;
}

.footer_title {
    float: left;
    width: 100%;
    display: inline-block
}

.footer_copy {
    float: left;
    width: 100%;
    display: inline-block;
    padding: 20px 15px 0px;
    margin-top: 15px;
    border-top: 2px solid #fff;
    text-align: center;
}

.footer_title p {
    font-size: 1em;
    margin-bottom: 5px;
    line-height: 1.5;
    font-weight: 600
}

.footer_copy p {
    font-size: 1em;
    margin: 15px 0 0 0;
    line-height: 1.5;
    font-weight: 600;
    text-align: center
}

.adress_info,
.adress_other {
    float: left;
    width: 50%;
    display: inline-block
}

.adress_info span,
.adress_other span {
    font-size: 0.875em;
    line-height: 1.5;
}

.adress_info .add,
.adress_info .tel,
.adress_info .ann {
    display: inline-block;
    width: 100%;
    float: left;
    text-align: left
}

.adress_info .ann a {
    color: #CC0000
}

.adress_other .date,
.adress_other .num,
.adress_other .email {
    display: inline-block;
    width: 100%;
    float: right;
    text-align: right
}

.copy_1 {
    margin-right: 5px
}

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

    .adress_info,
    .adress_other {
        width: 100%;
        margin-bottom: 10px
    }

    .adress_other .date,
    .adress_other .num,
    .adress_other .email {
        float: left;
        text-align: left
    }

    .copy_1,
    .copy_2 {
        float: left;
        display: inline-block;
        width: 100%;
        margin-right: 0
    }
}

@media screen and (max-width:767px) {
    .footer_copy p {
        font-size: 0.875em
    }
}

@media screen and (max-width:480px) {
    .footer {
        padding: 16px 0
    }

    .adress_info span,
    .adress_other span {
        font-size: 0.75em
    }

    .footer_copy p {
        font-size: 0.75em
    }

    .footer_copy {
        margin-top: 10px
    }
}

/* ========================================================================================== */

/* ==                                                                                      == */

/* ==                                   Footer CSS  End                                    == */

/* ==                                                                                      == */

/* ========================================================================================== */

/* ============================== 關鍵字 start ============================== */
.side_wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.main_pc_style {
    max-width: 600px;
    width: 100%;
}

@media screen and (max-width: 1199px) {
    .main_pc_style {
        max-width: initial;
        width: auto;
    }
}

.keyword_seach_area {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.keyword_tag_pc_style {
    width: 100%;
}

.tag_style strong {
    color: #fff;
}

.tag_mobile_style {
    display: none;
}

.keyword_tag_list {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

.keyword_tag_list .keyword_style {
    padding: 4px 6px 0;
    margin: 3px 8px 0 0;
    background-color: #fff;
    display: inline-block;
    color: #345F98;
    font-size: 0.95em;
    border-radius: 20px;
    cursor: pointer;
}
.keyword_tag_list .keyword_style:focus,.keyword_tag_list .keyword_style:hover{
    border: 1px solid #00EEFF;
}

.keyword_tag_style strong {
    color: #fff;
    margin-right: 10px;
}

.keyword_overflow {
    overflow: hidden;
    width: 500px;
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
}

.keyword_tag_mobile_area {
    display: none
}


@media screen and (max-width:1199px) {
    .keyword_tag_list .keyword_style {
        background-color: #345F98;
        color: #fff;
    }

    .keyword_tag_mobile_area {
        display: inline;
        margin-bottom: 10px;
    }

    .keyword_tag_mobile_area .keyword_tag_style strong {
        color: #4a4a4a;
        margin-right: 10px;
    }

    .keyword_tag_mobile_area .keyword_tag_list {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .keyword_tag_mobile_area .keyword_overflow {
        overflow: initial;
        width: initial;
        display: inline-block;
        white-space: initial;
    }
}

@media screen and (max-width: 1199px) {
    .keyword_tag_pc_area {
        display: none
    }
}

@media screen and (max-width: 991px) {
    .tag_style {
        display: inline-block;
        margin-bottom: 10px;
    }

    .keyword_tag_style strong {
        color: #4a4a4a;
    }
}

.owl-carousel.owl-drag .owl-item a:focus .ac-carousel-news-item,.owl-carousel.owl-drag .owl-item a:hover .ac-carousel-news-item{border: 1px solid #007bff;}

.ac-btn.ac-btn_color_yellow{background-color:#4A76B0}
/* ============================== 關鍵字 end ============================== */





/*
     FILE ARCHIVED ON 17:50:00 十月 8, 2018 AND RETRIEVED FROM THE
     AN OPENWAYBACK INSTANCE ON 11:22:09 五月 23, 2026.
     JAVASCRIPT APPENDED BY OPENWAYBACK, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/