﻿.sr-only-focusable {
    clip: auto;
    clip-path: none;
    height: auto;
    width: auto;
    margin: 0;
    overflow: visible;
}

a:focus {
    outline: 2px dashed #ff8714
}

.header_content h1 a {
    display: inline-block;
    vertical-align: middle
}

.header_content .mainmenu > li + li {
    margin-left: .25rem
}

.header_content .mainmenu > li > b {
    padding: 25px 6px
}

    .header_content .mainmenu > li > b.searchicon {
        height: 70px;
        padding-top: 22px
    }

    .header_content .mainmenu > li > b p {
        text-align: center;
        background: #6cb8ef;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        display: block
    }

        .header_content .mainmenu > li > b p img {
            width: 22px;
            height: auto;
            padding-top: 3px;
            padding-left: 3px
        }

.header_content .search {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

    .header_content .search input {
        width: 80%;
        border-radius: 100px;
        border: 1px solid #C7D9E7;
        padding: 4px
    }

    .header_content .search label {
        display: none
    }

    .header_content .search span {
        border-radius: 100px;
        width: 30px;
        height: 30px;
        text-align: center;
        background-color: #6DB8EF;
        margin-left: 5px;
        padding: 6px;
        box-sizing: border-box;
        cursor: pointer
    }

        .header_content .search span img {
            max-width: 100%;
            width: 100%
        }

.header_content .mainmenu > li > div.clp_con .wcon .keyword {
    width: 100%;
    margin-top: 10px
}

    .header_content .mainmenu > li > div.clp_con .wcon .keyword p {
        color: #fff;
        font-size: 1rem;
        text-align: left
    }

        .header_content .mainmenu > li > div.clp_con .wcon .keyword p a {
            color: #fff;
            font-size: 1rem;
            padding: 2px;
            margin-right: 10px
        }

            .header_content .mainmenu > li > div.clp_con .wcon .keyword p a:hover {
                outline: 2px dotted #ff8714
            }

@media (max-width:1200px) {
    .header_content h1 {
        width: auto
    }

        .header_content h1 a:first-child {
            width: 70px;
            height: 70px;
            overflow: hidden
        }

    .header_content nav {
        width: calc(100% - 300px)
    }
}

@media (max-width:1024px) {
    .header_content h1 {
        margin: 0 0 0 10px
    }

        .header_content h1 a:first-child {
            width: 36px;
            height: 40px
        }

        .header_content h1 img {
            width: auto;
            height: 36px;
            vertical-align: middle
        }

        .header_content h1 span {
            font-size: 1.25em
        }

    .smenu > span {
        margin: 0 5px
    }
}

.header_content {
    z-index: 995
}

    .header_content nav {
        width: auto
    }

    .header_content .mainmenu {
        z-index: 996;
        top: 56px;
        float: left;
        display: inline-block
    }

        .header_content .mainmenu .clp_xmoc .clp_btn:hover + .clp_con, .header_content .mainmenu .clp_xmoc .clp_btn:focus + .clp_con, .header_content .mainmenu .clp_xmoc:focus-within .clp_con {
            height: auto
        }

        .header_content .mainmenu > li > div.clp_con {
            z-index: 998
        }

        .header_content .mainmenu i:before {
            color: #FFF
        }

    .header_content .langChange {
        float: left;
        display: inline-block;
        line-height: 70px
    }

        .header_content .langChange select {
            height: 20px;
            font-size: 12px;
            border-radius: 50px;
            border-color: #6cb8ef
        }

            .header_content .langChange select option {
                font-size: 12px
            }

        .header_content .langChange a {
            background-color: #317baf;
            color: #FFF;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            display: inline-block
        }

            .header_content .langChange a:hover {
                background-color: #1c6497;
                font-weight: 700
            }

    .header_content .mainmenu > li {
        width: auto
    }

        .header_content .mainmenu > li > b {
            cursor: pointer;
            white-space: nowrap
        }

            .header_content .mainmenu > li > b:focus, .header_content .mainmenu > li > div.clp_con .third li a:focus {
                outline: 2px dashed #ff8714
            }

            .header_content .mainmenu > li > b.link {
                padding: 0
            }

                .header_content .mainmenu > li > b.link > a {
                    display: block;
                    padding: 25px 10px;
                    color: #107ead;
                    font-size: 16px;
                    line-height: 20px
                }

@media (max-width:1200px) {
    .header_content .mainmenu > li {
        width: auto
    }

        .header_content .mainmenu > li + li {
            margin-left: 0
        }
}

@media (max-width:1024px) {
    .header_content nav {
        float: right
    }

    #Wrap > header {
        padding-top: 62px
    }

    .header_content {
        padding: 10px 0
    }

        .header_content .langChange {
            line-height: 40px;
            margin-right: 50px
        }

        .header_content .mainmenu {
            display: none
        }

            .header_content .mainmenu > li {
                width: 100%
            }

                .header_content .mainmenu > li > b:after {
                    transform: rotate(0deg);
                    -moz-transform: rotate(0deg);
                    -webkit-transform: rotate(0deg)
                }

                .header_content .mainmenu > li.show > b:after {
                    transform: rotate(-180deg);
                    -moz-transform: rotate(-180deg);
                    -webkit-transform: rotate(-180deg)
                }

                .header_content .mainmenu > li > b.link > a {
                    color: #FFF
                }
}

@media (max-width:540px) {
    #Wrap > header {
        padding-top: 62px
    }

    .header_content .langChange {
        margin-left: 0;
        margin-right: 56px
    }
}

#QuickBtn {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 48px;
    z-index: 997
}

    #QuickBtn a {
        position: static;
        float: right;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        transition: all .5s;
        background: #555;
        text-align: center;
        line-height: 48px;
        color: #fff;
        margin: 5px 2px;
        border: 2px solid #737373;
    }

        #QuickBtn a:nth-child(2) {
            background-color: #0f466e;
            border-color: #0f466e
        }

        #QuickBtn a:nth-child(3) {
            background-color: #218187;
            border-color: #0c757c
        }

        #QuickBtn a:nth-child(4) {
            background-color: #5e458e;
            border-color: #5e458e
        }

        #QuickBtn a:nth-child(4) span {
            color: #fff;
        }

        #QuickBtn a:nth-child(5) {
            background-color: #ff8714;
            border-color: #ff8714
        }

        #QuickBtn a i {
            margin-left: 0
        }

            #QuickBtn a i:before {
                font-size: 24px;
                color: #FFF;
                line-height: 48px
            }

        #QuickBtn a:hover {
            border-color: #FFF
        }

        #QuickBtn a.QuickBtnSub {
            display: none
        }

            #QuickBtn a.QuickBtnSub.show {
                display: block;
                overflow: hidden
            }

#gotop img {
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto
}

a#gotop {
    color: #fff;
}

section.th_taiwan .tw_map .map_data .clp_con, section.th_area .tw_map .map_data .clp_con {
    width: 200px
}

@media (max-width:1024px) {
    section.th_taiwan .tw_map .map_data .clp_con, section.th_area .tw_map .map_data .clp_con {
        width: 260px
    }

    #QuickBtn {
        right: 20px;
        bottom: 20px
    }

    .article #Content .bread > div a.brick {
        display: inline-block;
        position: absolute;
        left: 0
    }
}

@media (max-width:625px) {
    #QuickBtn a {
        width: 40px;
        height: 40px;
        overflow: hidden;
        line-height: 40px
    }

        #QuickBtn a i:before {
            font-size: 20px;
            line-height: 40px
        }

        #QuickBtn a:hover {
            width: 40px;
            height: 40px;
            overflow: hidden;
            line-height: 40px
        }

            #QuickBtn a:hover i:before {
                font-size: 20px;
                line-height: 40px
            }
}

@media (max-width:375px) {
    .header_content h1 span:before {
        display: none
    }
}

.ft_tmenu .mainmenu i:before {
    color: #666
}

.smenu {
    z-index: 9999
}

#Content .bread > div a:not([href]) {
    color: #000;
    cursor: initial;
    text-decoration: none
}

#Content .bread > div a, #Content .bread > div span {
    vertical-align: baseline;
    display: inline-block;
    padding: 0 2px
}

.article_station .th_map .map {
    z-index: 960
}

.article_station .th_map .map_inform {
    z-index: 970
}

.leaflet-container.leaflet-touch-zoom {
    z-index: 962
}

.ft_info .footer_content li {
    margin: 2px 0
}

    .ft_info .footer_content li a {
        background-color: #FFFD;
        color: #006bb8;
        padding: 2px 4px;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px
    }

        .ft_info .footer_content li a i {
            margin-right: .25rem
        }

        .ft_info .footer_content li a:hover, .ft_info .footer_content li a:focus {
            color: #3d8cc6;
            font-weight: 700;
            background-color: #FFF
        }

@media (max-width:480px) {
    .ft_info .footer_content li span {
        display: block;
        margin-left: 6rem;
        width: auto
    }
}

header, footer {
    position: relative
}

.ft_info .footer_content > div .qrcode {
    float: left;
    display: block;
    padding-left: calc(100% - 360px)
}

    .ft_info .footer_content > div .qrcode p {
        color: #fff;
        font-size: 1rem;
        padding-bottom: 5px;
        padding-left: 24px
    }

    .ft_info .footer_content > div .qrcode div {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start
    }

    .ft_info .footer_content > div .qrcode figure {
        margin-right: 10px;
        width: 66px
    }

        .ft_info .footer_content > div .qrcode figure img {
            width: 56px;
            height: auto
        }

        .ft_info .footer_content > div .qrcode figure figcaption {
            color: #fff;
            font-size: .75rem;
            font-family: 'Arial Nova';
            text-align: center
        }

@media (max-width:1024px) {
    .ft_info .footer_content > div .qrcode {
        float: none;
        padding-left: 0;
        margin-bottom: 10px
    }

        .ft_info .footer_content > div .qrcode p {
            padding-left: 0
        }

        .ft_info .footer_content > div .qrcode figure img {
            width: 66px
        }
}

header a.brick, footer a.brick {
    position: absolute;
    left: 4px;
    top: 4px;
    color: #487a9d;
}

.article #Content .bread > div a.brick {
    color: #687178;
}

#Content .bread > div > a.brick:before {
    display: none
}

.alertMsg {
    display: none;
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,.75);
    z-index: 9999
}

.alertFix .alertMsg {
    display: block
}

.alertMsg .alertCont {
    width: 800px;
    min-height: 500px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -400px;
    margin-top: -250px;
    background-color: #e0f5ff;
    border-radius: 10px;
    box-shadow: 3px 3px 3px rgba(0,0,0,.5);
    padding: 10px;
    background-image: url(../images/Pic/hand.png);
    background-position: center bottom;
    background-repeat: no-repeat
}

    .alertMsg .alertCont .Center {
        text-align: center;
    }

        .alertMsg .alertCont h5, .alertMsg .alertCont .Center span {
            color: #000;
            height: 80px;
            line-height: 80px;
            font-size: 2.5rem;
            font-weight: 700;
            text-align: center
        }

    .alertMsg .alertCont .earth, .alertMsg .alertCont .cloud1, .alertMsg .alertCont .cloud2 {
        width: 360px;
        height: 360px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -180px;
        margin-top: -180px;
        background-position: center center;
        background-repeat: no-repeat
    }

    .alertMsg .alertCont .earth {
        background-image: url(../images/Pic/earth.png);
        background-size: 310px 320px;
        -webkit-animation: rotate 30s linear infinite;
        -moz-animation: rotate 30s linear infinite;
        -ms-animation: rotate 30s linear infinite;
        -o-animation: rotate 30s linear infinite;
        animation: rotate 30s linear infinite
    }

    .alertMsg .alertCont .cloud1 {
        background-image: url(../images/Pic/cloud1.png);
        background-size: 358px 329px;
        -webkit-animation: rotateC 60s linear infinite;
        -moz-animation: rotateC 60s linear infinite;
        -ms-animation: rotateC 60s linear infinite;
        -o-animation: rotateC 60s linear infinite;
        animation: rotateC 60s linear infinite
    }

    .alertMsg .alertCont .cloud2 {
        background-image: url(../images/Pic/cloud2.png);
        background-size: 300px 300px;
        -webkit-animation: rotate 75s linear infinite;
        -moz-animation: rotate 75s linear infinite;
        -ms-animation: rotate 75s linear infinite;
        -o-animation: rotate 75s linear infinite;
        animation: rotate 75s linear infinite
    }

.alertMsg p {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -390px;
    bottom: 50%;
    margin-bottom: -240px;
    width: 780px;
    background-color: rgba(255,255,255,.9);
    border-radius: 10px;
    padding: 10px;
    font-size: 1.25rem;
    line-height: 2rem;
    color: #000;
    z-index: 99999
}

@-webkit-keyframes rotate {
    0%,100% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes rotate {
    0%,100% {
        -moz-transform: rotate(0deg)
    }

    100% {
        -moz-transform: rotate(360deg)
    }
}

@-ms-keyframes rotate {
    0%,100% {
        -ms-transform: rotate(0deg)
    }

    100% {
        -ms-transform: rotate(360deg)
    }
}

@-o-keyframes rotate {
    0%,100% {
        -o-transform: rotate(0deg)
    }

    100% {
        -o-transform: rotate(360deg)
    }
}

@keyframes rotate {
    0%,100% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes rotateC {
    0%,100% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(-360deg)
    }
}

@-moz-keyframes rotateC {
    0%,100% {
        -moz-transform: rotate(0deg)
    }

    100% {
        -moz-transform: rotate(-360deg)
    }
}

@-ms-keyframes rotateC {
    0%,100% {
        -ms-transform: rotate(0deg)
    }

    100% {
        -ms-transform: rotate(-360deg)
    }
}

@-o-keyframes rotateC {
    0%,100% {
        -o-transform: rotate(0deg)
    }

    100% {
        -o-transform: rotate(-360deg)
    }
}

@keyframes rotateC {
    0%,100% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(-360deg)
    }
}

@media (max-width:960px) {
    .alertMsg .alertCont {
        width: 90vw;
        height: 80vh;
        min-height: 400px;
        margin-left: -45vw;
        margin-top: -40vh
    }

    .alertMsg p {
        width: 86vw;
        margin-left: -43vw;
        bottom: 0;
        margin-bottom: 12vh
    }
}

.article_target .tgtab .tabmenu li:focus {
    outline: 2px dashed #ff8714
}

.th_twselect .twselect a h4 {
    line-height: 2.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #14b4d0
}

section.th_area aside .info h3 {
    color: #14b4d0;
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 10px
}

    section.th_area aside .info h3 span {
        display: block;
        color: #14b4d0;
        font-size: 16px;
        line-height: 20px;
        margin: 5px 0
    }

.sharebox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 5px
}

    .sharebox span {
        margin-right: 13px
    }

        .sharebox span + span img {
            width: 40px
        }

        .sharebox span a {
            color: #fff;
        }

span.nccA {
    width: 88px;
    height: 31px
}

    span.nccA a {
        display: block;
        width: 90px
    }
