.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#tourarea {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100vw;
    width: 100%;
    z-index: 999;
    background: rgba(0, 0, 0, 0.7);
}

    #tourarea .pic {
        position: absolute;
        top:0;
        left: 50%;
        transform: translate(-50%, -5%);
        max-width: 90vw;
        z-index: 1000;
    }

    #tourarea img {
        z-index:1001;
    }

#tourarea_close {
    position: absolute;
    top: 2%;
    right: -40%;
    width: 40px;
    height: 40px;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
}

    #tourarea_close::before {
        content: "";
        position: absolute;
        width: 80%;
        height: 3px;
        background-color: #fff;
        transform: rotate(45deg);
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }

    #tourarea_close::after {
        content: "";
        position: absolute;
        width: 80%;
        height: 3px;
        background-color: #fff;
        transform: rotate(-45deg);
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }

.showtour {
    display: block !important;
}

.overflowhidden {
    overflow: hidden;
}

.overflowx {
    overflow-x: hidden;
}

.tourModal {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-54%, -5%);
    z-index: 1002;
}

.showDesktopOnly {
    display: block !important;
}

.showMobileOnly {
    display: none !important;
}

@media (max-width: 1229.98px) {
    #tourarea .pic {
        position: absolute;
      
        top: 0;
        left: 50%;
        transform: translate(-55%, -5%);
        width: 100%;
        z-index: 999;
    }
     #tourarea img {
        width:110%;
    }

    .tourModal {
        transform: translate(-43%, -5%);
    }
}


@media (max-width: 991.98px) {
    .showDesktopOnly {
        display: none !important;
    }
    .showMobileOnly {
        display: block !important;
    }
}



/*首頁 修正 便民服務  全民防災缺角*/

@media (min-width: 1229.98px) {
    .container-fluid .services ul {
    margin-left: -56px;
}
}
@media (min-width: 991.98px) {
    .container-fluid .services ul {
    margin-left: -96px;
}
}