@charset "UTF-8";
/* ===================================
   ATIS-APP.MIN.CSS - ATIS 應用樣式
   生成時間: 2026-01-10
   包含檔案:
   - css/subsys/atis/reset.css (920行，已移除 @import)
   - css/subsys/atis/style.css (1289行)
   - css/subsys/atis/dds.common.css (521行)
   - css/subsys/atis/atis.css (906行)
   - css/subsys/atis/dds.region.css (4477行)
   =================================== */

/* ============ Z-INDEX 規範 ============ */
:root {
    --z-base: 1;
    --z-header: 100;
    --z-dropdown: 1000;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-tooltip: 1060;
    --z-map-controls: 2000;
    --z-map-markers: 2010;
    --z-lightbox: 9000;
    --z-video-player: 9999;
}

/* ============ 標題字體大小調整 ============ */
/* 全部降低一級 */
h1,
.h1 {
    font-size: 2rem !important; /* 原 h2 大小 (32px) */
}

h2,
.h2 {
    font-size: 1.5rem !important; /* 原 h4 大小 (24px) */
}

h3,
.h3 {
    font-size: 1.25rem !important; /* 原 h5 大小 (20px) */
}

h4,
.h4 {
    font-size: 1rem !important; /* 原 h6 大小 (16px) */
}

h5,
.h5 {
    font-size: 0.875rem !important; /* 14px */
}

h6,
.h6 {
    font-size: 0.75rem !important; /* 12px */
}

/* ============ 佈局修正 ============ */
/* 修正 .container 覆蓋地圖的問題 */
main .container {
    position: static !important;
    z-index: var(--z-base);
    clear: both;
    display: block;
}

/* 確保地圖區域正確顯示 */
main > .row {
    position: relative;
}

/* ============ Theme Tab 樣式 ============ */
#themeTab .nav-tabs {
    border-bottom: none;
}

#themeTab .nav-tabs .nav-item {
    margin-bottom: 0;
}

#themeTab .nav-tabs .nav-link {
    border: 1px solid #ccc;
    border-radius: 0;
    background-color: #ccc;
    color: #fff;
    /* padding: 10px 15px; */
    transition: all 0.3s ease;
}

#themeTab .nav-tabs .nav-link:hover {
    background-color: #999;
    color: #fff;
}

#themeTab .nav-tabs .nav-link.active {
    background-color: #fff !important;
    color: #000 !important;
    border-bottom-color: #fff;
}

/* Toggle 按鈕特殊樣式 */
#themeTab .nav-tabs .toggle-btn .nav-link {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000;
}

#themeTab .nav-tabs .toggle-btn .nav-link:hover {
    background-color: #333 !important;
}

/* Tab content 樣式 */
#themeTab .tab-content {
    background-color: #fff;
    padding: 15px;
    border: 1px solid #ccc;
    border-top: none;
}

/* ============ reset.css (移除 @import 後) ============ */
/*通用*/
* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    -o-background-clip: padding-box;
    background-clip: padding-box;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: inherit;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    font-size: 100%;
    font-family: Verdana, Geneva, sans-serif, 微軟正黑體;
    line-height: 1.5em;
    margin: 0px;
    padding: 0px;
}
html,
body,
.wrapper {
    min-height: 100%;
    width: 100%;
}
.wrapper {
    position: relative;
    height: 100vh;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
th {
    font-weight: normal;
}
.right {
    float: right;
}
.left {
    float: left;
}
.both {
    clear: both;
}
.center {
    text-align: center;
}
.L1 li,
.L2 li,
.L3 li,
.L4 li,
.L5 li,
.L6 li,
.L7 li,
.L8 li,
.L9 li,
.L10 li {
    float: left;
    padding: 10px;
}
.L1 label,
.L2 label,
.L3 label,
.L4 label,
.L5 label,
.L6 label,
.L7 label,
.L8 label,
.L9 label,
.L10 label {
    float: left;
    padding: 10px;
    display: block;
}
.L1 li,
.L1 td,
.L1 th,
.L1 label {
    width: 100%;
}
.L2 li,
.L2 td,
.L2 th,
.L2 label {
    width: 50%;
}
.L3 li,
.L3 td,
.L3 th,
.L3 label {
    width: 33%;
}
.L4 li,
.L4 td,
.L4 th,
.L4 label {
    width: 25%;
}
.L5 li,
.L5 td,
.L5 th,
.L5 label {
    width: 20%;
}
.L6 li,
.L6 td,
.L6 th,
.L6 label {
    width: 16.66%;
}
.L7 li,
.L7 td,
.L7 th,
.L7 label {
    width: 14.2%;
}
.L8 li,
.L8 td,
.L8 th,
.L8 label {
    width: 12.5%;
}
.L9 li,
.L9 td,
.L9 th,
.L9 label {
    width: 11.11%;
}
.L10 li,
.L10 td,
.L10 th,
.L10 label {
    width: 10%;
}
.w1 {
    width: 10%;
}
.w2 {
    width: 20%;
}
.w3 {
    width: 30%;
}
.w4 {
    width: 40%;
}
.w5 {
    width: 50%;
}
.w6 {
    width: 60%;
}
.w7 {
    width: 70%;
}
.w8 {
    width: 80%;
}
.w9 {
    width: 90%;
}
.w10 {
    width: 100%;
}
.w15 {
    width: 15%;
}
.w25 {
    width: 25%;
}
.w35 {
    width: 35%;
}
.w45 {
    width: 45%;
}
.w55 {
    width: 55%;
}
.w65 {
    width: 65%;
}
.w75 {
    width: 75%;
}
.w85 {
    width: 85%;
}
.w95 {
    width: 95%;
}
.page {
    padding: 5px;
    width: 100%;
    position: fixed;
    bottom: 0px;
    text-align: center;
}
.page ul li {
    background-color: #fff;
    height: 5px;
    width: 5px;
    border-radius: 10px;
    margin: 2px;
    float: left;
}
.page ul {
    margin: auto;
    width: 100px;
}
.page ul .active {
}
input,
select {
    /*font-size: 150%;*/
    margin: 2px;
}
input[type="text"],
textarea,
input[type="Password"],
select {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
.btn,
.btns a {
    background-color: #f60;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
}
.btnRed {
    background-color: #f30;
}
.btnYellow {
    background-color: #f90;
}
.btnBlue {
    background-color: #09f;
}
.btnGreen {
    background-color: #090;
}
.btnGray {
    background-color: #666;
}
.btnBlack {
    background-color: #000;
}
input[type="reset"] {
    background-color: #999;
}
img.left {
    margin-right: 10px;
    margin-bottom: 10px;
}
img.right {
    margin-left: 10px;
    margin-bottom: 10px;
}
img.center {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}
th,
td {
    padding: 5px;
}
.padding {
    padding: 20px;
}
a {
    text-decoration: none;
}
.note,
.date {
    font-size: 90%;
    color: #999;
}
.deskTop {
    display: inline-block;
}
.mobile {
    display: none;
}
.mb10 {
    margin-bottom: 10px;
}
.mb20 {
    margin-bottom: 20px;
}
.mb30 {
    margin-bottom: 30px;
}
.mb40 {
    margin-bottom: 40px;
}
.mb50 {
    margin-bottom: 50px;
}
.mb60 {
    margin-bottom: 60px;
}
.mb70 {
    margin-bottom: 70px;
}
.mb80 {
    margin-bottom: 80px;
}
.mb90 {
    margin-bottom: 90px;
}
.mb100 {
    margin-bottom: 100px;
}
.mt10 {
    margin-top: 10px;
}
.mt20 {
    margin-top: 20px;
}
.mt30 {
    margin-top: 30px;
}
.mt40 {
    margin-top: 40px;
}
.mt50 {
    margin-top: 50px;
}
.mt60 {
    margin-top: 60px;
}
.mt70 {
    margin-top: 70px;
}
.mt80 {
    margin-top: 80px;
}
.mt90 {
    margin-top: 90px;
}
.mt100 {
    margin-top: 100px;
}
.ml10 {
    margin-left: 10px;
}
.ml20 {
    margin-left: 20px;
}
.ml30 {
    margin-left: 30px;
}
.ml40 {
    margin-left: 40px;
}
.ml50 {
    margin-left: 50px;
}
.ml60 {
    margin-left: 60px;
}
.ml70 {
    margin-left: 70px;
}
.ml80 {
    margin-left: 80px;
}
.ml90 {
    margin-left: 90px;
}
.ml100 {
    margin-left: 100px;
}
.mr10 {
    margin-right: 10px;
}
.mr20 {
    margin-right: 20px;
}
.mr30 {
    margin-right: 30px;
}
.mr40 {
    margin-right: 40px;
}
.mr50 {
    margin-right: 50px;
}
.mr60 {
    margin-right: 60px;
}
.mr70 {
    margin-right: 70px;
}
.mr80 {
    margin-right: 80px;
}
.mr90 {
    margin-right: 90px;
}
.mr100 {
    margin-right: 100px;
}
.mb-10 {
    margin-bottom: -10px;
}
.mb-20 {
    margin-bottom: -20px;
}
.mb-30 {
    margin-bottom: -30px;
}
.mb-40 {
    margin-bottom: -40px;
}
.mb-50 {
    margin-bottom: -50px;
}
.mb-60 {
    margin-bottom: -60px;
}
.mb-70 {
    margin-bottom: -70px;
}
.mb-80 {
    margin-bottom: -80px;
}
.mb-90 {
    margin-bottom: -90px;
}
.mb-100 {
    margin-bottom: -100px;
}
.mt-10 {
    margin-top: -10px;
}
.mt-20 {
    margin-top: -20px;
}
.mt-30 {
    margin-top: -30px;
}
.mt-40 {
    margin-top: -40px;
}
.mt-50 {
    margin-top: -50px;
}
.mt-60 {
    margin-top: -60px;
}
.mt-70 {
    margin-top: -70px;
}
.mt-80 {
    margin-top: -80px;
}
.mt-90 {
    margin-top: -90px;
}
.mt-100 {
    margin-top: -100px;
}
.ml-10 {
    margin-left: -10px;
}
.ml-20 {
    margin-left: -20px;
}
.ml-30 {
    margin-left: -30px;
}
.ml-40 {
    margin-left: -40px;
}
.ml-50 {
    margin-left: -50px;
}
.ml-60 {
    margin-left: -60px;
}
.ml-70 {
    margin-left: -70px;
}
.ml-80 {
    margin-left: -80px;
}
.ml-90 {
    margin-left: -90px;
}
.ml-100 {
    margin-left: -100px;
}
.mr-10 {
    margin-right: -10px;
}
.mr-20 {
    margin-right: -20px;
}
.mr-30 {
    margin-right: -30px;
}
.mr-40 {
    margin-right: -40px;
}
.mr-50 {
    margin-right: -50px;
}
.mr-60 {
    margin-right: -60px;
}
.mr-70 {
    margin-right: -70px;
}
.mr-80 {
    margin-right: -80px;
}
.mr-90 {
    margin-right: -90px;
}
.mr-100 {
    margin-right: -100px;
}
.padding50 {
    padding: 50px;
}
.padding40 {
    padding: 40px;
}
.padding30 {
    padding: 30px;
}
.padding20 {
    padding: 20px;
}
.padding15 {
    padding: 15px;
}
.padding10 {
    padding: 10px;
}
.padding5 {
    padding: 5px;
}
.noBorder {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
.info {
    font-size: 85%;
}
.inline {
    display: inline;
}
.noPadding {
    padding: 0px;
}
.txtL {
    text-align: left;
}
.txtR {
    text-align: right;
}
.txtRed {
    color: #f00;
}
.txtWhite {
    color: #fff;
}
.txtBlue {
    color: #09f;
}
.txtGreen {
    color: #0c0;
}
.txtGray {
    color: #999;
}
.txtBlack {
    color: #000;
}
.btnRed {
    background-color: #f00;
    color: #fff;
}
.btnWhite {
    background-color: #fff;
    color: #999;
}
.btnBlue {
    background-color: #09f;
    color: #fff;
}
.btnGreen {
    background-color: #0c0;
    color: #fff;
}
.btnGray {
    background-color: #999;
    color: #fff;
}
.btnBlack {
    background-color: #000;
    color: #fff;
}
.btns .btnRed {
    background-color: #f00;
    color: #fff;
}
.btns .btnWhite {
    background-color: #fff;
    color: #999;
}
.btns .btnBlue {
    background-color: #09f;
    color: #fff;
}
.btns .btnGreen {
    background-color: #0c0;
    color: #fff;
}
.btns .btnGray {
    background-color: #999;
    color: #fff;
}
.btns .btnBlack {
    background-color: #000;
    color: #fff;
}
.txt50 {
    font-size: 50%;
}
.txt60 {
    font-size: 60%;
}
.txt70 {
    font-size: 70%;
}
.txt80 {
    font-size: 80%;
}
.txt90 {
    font-size: 90%;
}
.txt100 {
    font-size: 100%;
}
.txt110 {
    font-size: 110%;
}
.txt120 {
    font-size: 120%;
}
.txt130 {
    font-size: 130%;
}
.txt140 {
    font-size: 140%;
}
.txt150 {
    font-size: 150%;
}
.txt160 {
    font-size: 160%;
}
.txt170 {
    font-size: 170%;
}
.txt180 {
    font-size: 180%;
}
.txt190 {
    font-size: 190%;
}
.txt200 {
    font-size: 200%;
}
.txt210 {
    font-size: 210%;
}
.txt220 {
    font-size: 220%;
}
.txt230 {
    font-size: 230%;
}
.txt240 {
    font-size: 240%;
}
.txt250 {
    font-size: 250%;
}
.none {
    display: none;
}
.pages {
    width: 90%;
}
.pages a {
    margin-right: 10px;
    margin-left: 10px;
}
.pages a:hover,
.pages a.active {
    color: #96bc33;
}
.pages a .fa {
    margin-right: 5px;
    margin-left: 5px;
}

@media screen and (max-width: 700px) {
    .deskTop {
        display: none;
    }
    .mobile {
        display: block;
    }
}
a[href*="updog"] {
    display: none !important;
}

/* hr分隔線樣式 */

hr.style01 {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
}

/* 透明漸變 - color - transparent */

hr.style02 {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

/* 雙線 */

hr.style03 {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;
}

/* 單線陰影 */

hr.style04 {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}

/* 雲朵状 */

hr.style05 {
    border: 0;
    height: 0; /* Firefox... */
    box-shadow: 0 0 10px 1px black;
}
hr.style05:after {
    /* Not really supposed to work, but does */
    content: "\00a0"; /* Prevent margin collapse */
}

/* 内嵌 */

hr.style06 {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* 暈状 */

hr.style07 {
    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}
hr.style07:before {
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    border-radius: 20px;
}

/* 文字插入式 */

hr.style08 {
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}
hr.style08:after {
    content: "請輸入文字";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

/*五等分法*/
@media (min-width: 576px) {
    .col-sm-2-5 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@charset "UTF-8";

.logo {
    background-repeat: no-repeat;
    background-size: contain;
    height: 70px;
    background-position: center;
}

header {
    color: #fff;
    position: fixed;
    z-index: var(--z-header); /* 原值: 1 */
    width: 100%;
    background-color: #06202f;
}

.w-270 {
    width: 270px;
    text-align: center;
}

.w-30 {
    width: 30px;
}
.marquee {
    background-color: #ffb61b78;
    color: #333;
    padding: 5px 10px 0px 10px;
    border-radius: 0px 0px 5px 5px;
    font-size: 100%;
    display: flex;
}

marquee {
    width: calc(100% - 320px);
    color: #f1e4e4;
}

.marquee i {
    vertical-align: super;
}

.nav-pills > li > a {
    color: #fff;
    position: relative;
    display: block;
    padding: 10px 15px;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus,
.nav > li > a:hover,
.nav > li > a:focus,
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
    color: #08212f;
    background-color: #ffb61b;
    border-radius: 0px;
}

.dropdown-menu {
    background-color: #ffb61b;
    border: none;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.dropdown-menu > li > a {
    display: block;
    padding: 5px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}
nav {
    margin: 20px 0 0 0;
    float: left;
    font-size: 120%;
    display: flex;
    align-items: center;
}

header a {
    color: #fff;
}

header a:hover,
header a.active {
    color: #ffb61b;
}

#weatherCity {
    margin: 9px 9px 0px 21px;
}

.weather i {
    font-size: 330%;
}

h4,
.h4 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.25em;
}

.weather_div {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.25em;
}

.weather .ui-accordion-content i {
    font-size: 300%;
    float: right;
}

.weather h4 i,
.weather .ui-accordion-content h4 i {
    font-size: 20%;
    vertical-align: text-top;
}

.weather .temperature i,
.weather .ui-accordion-content div i {
    font-size: 20%;
    vertical-align: text-top;
}

.language i {
    font-size: 150%;
    margin: 0px 5px;
    vertical-align: bottom;
}

.language {
    margin: 15px 0 0 20px;
}

.title01,
.title02,
.title03 {
    color: #fff;
    font-size: 130%;
    text-align: center;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 40px 0;
    background-color: #000;
}

main {
    padding: 95px 0 0 0;
}

main a {
    color: #000;
}

.block {
    background-color: #fff;
    border-radius: 10px;
    margin: 15px 0;
}

.block ul {
    list-style: disc;
    margin: 30px 0 0 30px;
}

.block li {
    float: left;
    width: 33.33%;
}

footer {
    color: #fff;
    padding: 40px;
    line-height: 2;
}

body {
    background-color: #08202f;
    font-family: "Microsoft JhengHei";
    font-size: 14px; /* 調整為 Bootstrap 3 的預設大小 */
    font-weight: normal; /* 調整為正常粗細 */
}

.map {
    width: 100%;
    position: relative;
}

.btns {
    position: absolute;
    width: 160px;
    right: 20px;
    top: 20px;
    background-color: rgba(255, 182, 17, 0.5);
    background-color: #ffb61a63;
    padding: 15px;
    border-radius: 10px;
}

.btns a {
    background-color: #fff;
    color: #000;
    padding: 10px 0 10px 50px;
    width: 95%;
    display: block;
    margin: 5px;
    text-align: left;
    background-position: 7px center;
    background-repeat: no-repeat;
    background-size: 20%;
}

.btns a:nth-child(1) {
    background-image: url(../images/btn01.png);
}

.btns a:nth-child(2) {
    background-image: url(../images/btn02.png);
}

.btns a:nth-child(3) {
    background-image: url(../images/btn03.png);
}

.btns a:nth-child(4) {
    background-image: url(../images/btn04.png);
}

.btns a:nth-child(5) {
    background-image: url(../images/btn05.png);
}

.btns a:nth-child(6) {
    background-image: url(../images/btn06.png);
}

.btns a:nth-child(7) {
    background-image: url(../images/btn07.png);
}

.btns a:hover,
.btns a.active {
    background-color: rgba(0, 0, 0, 0.7);
    background-color: #07202f9c;
    color: #fff;
}

.ui-corner-all {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

.map .ui-tabs {
    position: absolute;
    padding: 0;
    border-radius: 0px;
}

.ui-widget-content {
    border: none;
    background: #fff;
}

.ui-tabs .ui-tabs-nav {
    border: none;
    background: #07202f;
}

.ui-tabs .ui-tabs-nav li {
    width: 30%;
    border: none;
    background: #ccc;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    background: #fff;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    color: #000;
    width: 100%;
    text-align: center;
    font-size: 120%;
    font-weight: normal;
}

.sort1,
.sort2,
.sort3,
.sort4,
.sort5 {
    padding: 7px 10px;
    border-radius: 20px;
    color: #fff;
}

.sort1 {
    background-color: #38a6a6;
}

.sort2 {
    background-color: #ff7600;
}

.sort3 {
    background-color: red;
}

.sort4 {
    background-color: deeppink;
}

.sort5 {
    background-color: dodgerblue;
}

.ui-tabs .ui-tabs-panel ul li .right a,
.popup .block li .right a,
.info div .right a {
    color: #707070;
    padding: 7px;
    font-size: 110%;
}

a.both {
    display: block;
    text-decoration: underline;
}

.ui-tabs .ui-tabs-panel ul li,
.popup .block li {
    padding: 10px 0;
    border-bottom: 1px solid #cdcdcd;
    float: left;
    width: 100%;
}

.ui-tabs .ui-tabs-panel {
    height: 950px;
    overflow-x: hidden;
    overflow-y: auto;
}

.ui-tabs .ui-tabs-panel ul li .right a:hover,
.popup .block li .right a:hover {
    color: #ffb61a;
}

td,
th {
    padding: 5px;
}

.ui-widget-content a.txtBlue {
    color: #09f;
}

.popup {
    width: 100%;
    height: 100%;
    background-color: #000000b3;
    position: fixed;
    z-index: 1;
}

.popup .block {
    position: fixed;
    height: auto;
    margin: 10% 25%;
    width: 50%;
}

.popup .block h2 a {
    color: #fff;
    font-size: 100%;
}

.popup .block li {
    width: 100%;
}

.popup .block ul {
    list-style: none;
    margin: 30px;
}

.note,
.date {
    font-size: 100%;
    color: #38a6a6;
    padding: 5px 0 0 7px;
    float: left;
}

h1 {
    /* color: #c01111; */
    /* clear: both; */
    /* font-size: 200%; */
}

.popup img {
    float: left;
    margin: 0 14px 15px 0;
}

.content {
    clear: both;
    line-height: 2;
    padding: 20px 0 0 0;
}

.popup center img {
    margin: 0;
    float: inherit;
}

.ui-accordion .ui-accordion-icons {
    padding-left: 0;
}

.ui-accordion .ui-accordion-header {
    margin-top: 0;
    padding: 0;
    min-height: 0;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
.ui-accordion .ui-accordion-header {
    border: none;
    background: transparent;
    color: #fff;
}

.ui-accordion .ui-accordion-content {
    background: #07202f;
    padding: 10px;
    color: #fff;
}

.weather {
    position: relative;
    z-index: 99;
}

.weather .ui-accordion {
    position: absolute;
    right: 0;
    width: 140px;
}

.weather ul li {
    border-bottom: 1px solid #ffffff59;
    padding: 10px 0;
    float: left;
    width: 100%;
}

.weather ul {
    float: left;
}

.info {
    position: absolute;
    width: 100%;
    font-size: 100%;
}

.info div {
    width: 15%;
    position: absolute;
    background-color: #fff;
    padding: 5px;
    border: 5px solid #fff;
    box-shadow: 2px 2px 5px #00000047;
    border-radius: 10px;
}

.info .cctv {
    border-color: #ffb6b6;
}

.info .cctv div,
.info .cctv th {
    background-color: #ffb6b6;
}

.info div {
    background-color: #feb6b6;
    color: #fff;
    margin: -5px -5px -5px -5px;
    padding: 5px;
}

.info div div a i {
    font-size: 150%;
    color: #fff;
}

.info .vd {
    border-color: #70beeb;
}

.info .vd div {
    background-color: #70beeb;
}

.info .vd th {
    background-color: #70beeb;
}

.info table {
    background-color: #eee;
    margin: 12px 10px 12px 0;
    width: 100%;
}

.info div th,
.info div td {
    border: 1px solid #fff;
}

.info .cms {
    border-color: #58e37e;
    border: 6px solid #58e37e;
}

.info .cms div,
.info .cms th {
    background-color: #58e37e;
}

.info .parking {
    border-color: #c37bed;
    width: 45%;
}

.info .parking div,
.info .parking th {
    background-color: #c37bed;
}

.info .parking table th {
    color: #000;
}

.txtL {
    background-color: transparent !important;
    color: #000 !important;
}

.txtRed {
    color: #f00 !important;
}

.info .youbike {
    border-color: #f5ab49;
}

.info .youbike div,
.info .youbike th {
    background-color: #f5ab49;
}

.info .youbike table tr {
    color: #000;
}

.info .parking button {
    float: right;
}

.info .alert {
    border-color: red;
    border: 6px solid red;
}

.info .alert div,
.info .alert th {
    background-color: red;
}

.info .load {
    border-color: #778899;
    background: #778899;
}

.info .load div {
    background-color: #778899;
    font-weight: 900;
}

.info .load h3 {
    font-weight: bold;
}

.info .loading {
    border-color: orange;
}

.info .loading div,
.info .loading th {
    background-color: orange;
}

.weather ul li:last-child {
    border-bottom: none;
}

.info .construction {
    border-color: #ff6f26;
    width: 20%;
}

.info .construction div,
.info .construction th {
    background-color: #ff6f26;
}

.info .news01 {
    border-color: #38a6a6;
    width: 100%;
}

.info .news01 div,
.info .news01 th {
    background-color: #38a6a6;
}

.info .news02 {
    border-color: #fe7600;
    width: 20%;
}

.info .news02 div,
.info .news02 th {
    background-color: #fe7600;
}

.info .news03 {
    border-color: #fe0100;
    width: 20%;
}

.info .news03 div,
.info .news03 th {
    background-color: #fe0100;
}

.info .news04 {
    border-color: #ff1393;
    width: 20%;
}

.info .news04 div,
.info .news04 th {
    background-color: #ff1393;
}

.info .news05 {
    border-color: #1d90ff;
    width: 20%;
}

.info .news05 div,
.info .news05 th {
    background-color: #1d90ff;
}

.info .parking th {
    width: 70px;
}

.info .map-info-name {
    font-size: medium;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 310px;
}
.btns button {
    border: none;
    background-color: transparent;
    font-size: 180%;
    text-shadow: 1px 1px 0px #fff;
    position: absolute;
    right: 0;
}

.page404 {
    background-image: url(../images/404.png);
    background-color: #fff;
    background-position: center;
    height: 600px;
}

.bar {
    width: 15%;
    height: 15px;
    float: left;
    border-radius: 10px;
    margin: 0 10px 0 0;
}

.red {
    background-color: red;
}

.yellow {
    background-color: #ffc107;
}

.green {
    background-color: #4caf50;
}

.info div div {
    width: auto;
    position: unset;
    background-color: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/*主題地圖*/
body,
header {
    background-position: center bottom;
    background-repeat-x: repeat;
    background-size: 80%;
}

body.style01 header,
body.style01,
body.style01 .ui-tabs .ui-tabs-nav,
.style01 #Accordion2.ui-accordion .ui-accordion-header .ui-accordion-header-icon.ui-icon-triangle-1-e {
    background-color: #000;
}

body.style01 header {
    background-image: url(../images/mapStyle/1_1.png);
}

body.style01 {
    background-image: url(../images/mapStyle/1_2.png);
}

body.style01 .marquee,
body.style01 .nav .open > a,
body.style01 .dropdown-menu,
body.style01 .nav-pills > li > a:hover {
    background-color: #efd860;
}

body.style01 .btns {
    background-color: #efd86082;
    background: rgba(0, 0, 0, 0.7);
    /*70%黑色*/
}

body.style02 header,
body.style02,
body.style02 .ui-tabs .ui-tabs-nav,
.style02 #Accordion2.ui-accordion .ui-accordion-header .ui-accordion-header-icon.ui-icon-triangle-1-e {
    background-color: #841414;
}

body.style02 header {
    background-image: url(../images/mapStyle/2_1.png);
}

body.style02 {
    background-image: url(../images/mapStyle/2_2.png);
}

body.style02 .marquee,
body.style02 .nav .open > a,
body.style02 .dropdown-menu,
body.style02 .nav-pills > li > a:hover {
    background-color: #e94f5e;
}

body.style02 .btns {
    background-color: #e94e5e78;
}

body.style03 header,
body.style03,
body.style03 .ui-tabs .ui-tabs-nav,
.style03 #Accordion2.ui-accordion .ui-accordion-header .ui-accordion-header-icon.ui-icon-triangle-1-e {
    background-color: #9f2846;
}

body.style03 header {
    background-image: url(../images/mapStyle/3_1.png);
}

body.style03 {
    background-image: url(../images/mapStyle/3_2.png);
}

body.style03 .marquee,
body.style03 .nav .open > a,
body.style03 .dropdown-menu,
body.style03 .nav-pills > li > a:hover {
    background-color: #ffdbdb;
}

body.style03 .btns {
    background-color: #e94e5e78;
}

body.style04 header,
body.style04,
body.style04 .ui-tabs .ui-tabs-nav,
.style04 #Accordion2.ui-accordion .ui-accordion-header .ui-accordion-header-icon.ui-icon-triangle-1-e {
    background-color: #2c353a;
}

body.style04 header {
    background-image: url(../images/mapStyle/4_1.png);
}

body.style04 {
    background-image: url(../images/mapStyle/4_2.png);
}

body.style04 .marquee,
body.style04 .nav .open > a,
body.style04 .dropdown-menu,
body.style04 .nav-pills > li > a:hover {
    background-color: #f9b233;
}

body.style04 .btns {
    background-color: #e94e5e78;
}

body.style05 header,
body.style05,
body.style05 .ui-tabs .ui-tabs-nav,
.style05 #Accordion2.ui-accordion .ui-accordion-header .ui-accordion-header-icon.ui-icon-triangle-1-e {
    background-color: #e07e70;
}

body.style05 header {
    background-image: url(../images/mapStyle/5_1.png);
}

body.style05 {
    background-image: url(../images/mapStyle/5_2.png);
}

body.style05 .marquee,
body.style05 .nav .open > a,
body.style05 .dropdown-menu,
body.style05 .nav-pills > li > a:hover {
    background-color: #57c6d2;
}

body.style05 .btns {
    background-color: #e07e6f78;
}

body.style06 header,
body.style06,
body.style06 .ui-tabs .ui-tabs-nav,
.style06 #Accordion2.ui-accordion .ui-accordion-header .ui-accordion-header-icon.ui-icon-triangle-1-e {
    background-color: #2c353a;
}

body.style06 header {
    background-image: url(../images/mapStyle/6_1.png);
    background-position: top;
}

body.style06 {
    background-image: url(../images/mapStyle/6_2.png);
}

body.style06 .marquee,
body.style06 .nav .open > a,
body.style06 .dropdown-menu,
body.style06 .nav-pills > li > a:hover {
    background-color: #008dd2;
}

body.style06 .btns {
    background-color: #038cd259;
}

body.style07 header,
body.style07,
body.style07 .ui-tabs .ui-tabs-nav,
.style07 #Accordion2.ui-accordion .ui-accordion-header .ui-accordion-header-icon.ui-icon-triangle-1-e {
    background-color: #114b8f;
}

body.style07 header {
    background-image: url(../images/mapStyle/7_1.png);
}

body.style07 {
    background-image: url(../images/mapStyle/7_2.png);
}

body.style07 .marquee,
body.style07 .nav .open > a,
body.style07 .dropdown-menu,
body.style07 .nav-pills > li > a:hover {
    background-color: #a9cbf4;
}

body.style07 .btns {
    background-color: #a9cbf4ab;
}

body.style08 header,
body.style08,
body.style08 .ui-tabs .ui-tabs-nav,
.style08 #Accordion2.ui-accordion .ui-accordion-header .ui-accordion-header-icon.ui-icon-triangle-1-e {
    background-color: #5ea89f;
}

body.style08 header {
    background-image: url(../images/mapStyle/8_1.png);
}

body.style08 {
    background-image: url(../images/mapStyle/8_2.png);
}

body.style08 .marquee,
body.style08 .nav .open > a,
body.style08 .dropdown-menu,
body.style08 .nav-pills > li > a:hover {
    background-color: #d1f2e5;
}

body.style08 .btns {
    background-color: #d2f2e5c2;
}

body.style09 header,
body.style09,
body.style09 .ui-tabs .ui-tabs-nav,
.style09 #Accordion2.ui-accordion .ui-accordion-header .ui-accordion-header-icon.ui-icon-triangle-1-e {
    background-color: #013054;
}

body.style09 header {
    background-image: url(../images/mapStyle/9_1.png);
}

body.style09 {
    background-image: url(../images/mapStyle/9_2.png);
}

body.style09 .marquee,
body.style09 .nav .open > a,
body.style09 .dropdown-menu,
body.style09 .nav-pills > li > a:hover {
    background-color: #c9a241;
}

body.style09 .btns {
    background-color: #c9a2409c;
}

body.style10 header,
body.style10,
body.style10 .ui-tabs .ui-tabs-nav,
.style10 #Accordion2.ui-accordion .ui-accordion-header .ui-accordion-header-icon.ui-icon-triangle-1-e {
    background-color: #2e3192;
}

body.style10 header {
    background-image: url(../images/mapStyle/10_1.png);
}

body.style10 {
    background-image: url(../images/mapStyle/10_2.png);
}

body.style10 .marquee,
body.style10 .nav .open > a,
body.style10 .dropdown-menu,
body.style10 .nav-pills > li > a:hover {
    background-color: #ff0019;
}

body.style10 .btns {
    background-color: #fe001961;
}

body.style11 header,
body.style11,
body.style11 .ui-tabs .ui-tabs-nav,
.style11 #Accordion2.ui-accordion .ui-accordion-header .ui-accordion-header-icon.ui-icon-triangle-1-e {
    background-image: -webkit-linear-gradient(270deg, rgba(5, 37, 60, 1) 0%, rgba(65, 87, 109, 1) 100%);
    background-image: -moz-linear-gradient(270deg, rgba(5, 37, 60, 1) 0%, rgba(65, 87, 109, 1) 100%);
    background-image: -o-linear-gradient(270deg, rgba(5, 37, 60, 1) 0%, rgba(65, 87, 109, 1) 100%);
    background-image: linear-gradient(180deg, rgba(5, 37, 60, 1) 0%, rgba(65, 87, 109, 1) 100%);
}

body.style11 header {
    background-image: url(../images/mapStyle/11_1.png);
}

body.style11 {
    background-image: url(../images/mapStyle/11_2.png);
}

body.style11 .marquee,
body.style11 .nav .open > a,
body.style11 .dropdown-menu,
body.style11 .nav-pills > li > a:hover {
    background-color: #ffb61b;
}

body.style11 .btns {
    background-color: #ffb61a69;
}

body.style12 header,
body.style12,
body.style12 .ui-tabs .ui-tabs-nav,
.style12 #Accordion2.ui-accordion .ui-accordion-header .ui-accordion-header-icon.ui-icon-triangle-1-e {
    background-color: #08202f;
}

body.style12 header {
    background-image: url(../images/mapStyle/12_1.png);
}

body.style12 {
    background-image: url(../images/mapStyle/12_2.png);
}

body.style12 .marquee,
body.style12 .nav .open > a,
body.style12 .dropdown-menu,
body.style12 .nav-pills > li > a:hover {
    background-color: #ffffff;
}

body.style12 .btns {
    background-color: #07202f91;
}

.weather .ui-icon {
    display: none;
}

.txtL {
    font-size: 250%;
    font-weight: bold;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: 0.5em 0em;
}

/*主題地圖選單*/
#Accordion2 {
    position: absolute;
    z-index: 1;
}

#Accordion2.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
    background-image: url(../images/arrowL.png);
    width: 25px;
    height: 25px;
    top: 10px;
    z-index: 1;
    margin-top: 0;
    left: auto;
    right: 0;
    background-position: center center;
    background-size: contain;
}

#Accordion2.ui-accordion .ui-accordion-header .ui-accordion-header-icon.ui-icon-triangle-1-e {
    background-image: url(../images/arrowR.png);
    background-color: #2c353a;
    z-index: 99;
    left: 0;
    top: 0;
    border-radius: 0 0 10px 0;
    width: 35px;
    height: 35px;
    background-size: 35%;
}

#Accordion2.ui-accordion .ui-accordion-content {
    padding: 0;
}

.ui-accordion .ui-accordion-content {
    background: transparent;
}

.poptxt {
    overflow: hidden;
}

.twrap {
    overflow: hidden;
}

.tleft {
    float: left;
    width: auto;
    box-sizing: border-box;
    width: 55%;
    border-right: 1px solid #707070;
}

.twrap h6 {
    text-align: center;
    font-size: 1.0625em;
}

.tright {
    float: right;
    width: 40%;
    box-sizing: border-box;
}

.twrap h6 {
    text-align: center;
    font-size: 1.0625em;
}

.about-img {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 20px;
}
#marquee {
    display: block;
    width: 96%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
#marquee_text {
    position: absolute;
    top: -5px;
    left: 100%;
    line-height: 30px;
    display: block;
    word-break: keep-all;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    z-index: -1;
    width: 200%;
}

a:focus,
input[type="text"]:focus,
button:focus,
select:focus,
.page-link.active:focus,
.page-link:first-child:focus,
.page-link:last-child:focus {
    border: 2px dashed #da7b19;
    box-sizing: border-box;
}

.white--text {
    color: #fff !important;
    caret-color: #fff !important;
}

.accessKeyU {
    color: #08202f;
    position: absolute;
}

a:focus {
    border: 2px dashed #da7b19;
    color: #da7b19;
}

.pa-2 {
    padding: 8px !important;
}

.ann-modal-body {
    max-height: 55vh;
}

#announceResultTable .odd {
    background-color: rgba(0, 0, 0, 0.05);
}

.map-info-content {
    font-family: MyCustomFont, "Noto Sans TC", Microsoft JhengHei, 微軟正黑體 !important;
}

.cmsWrapper canvas {
    margin: 0;
    padding: 0 2px;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 95%;
}

#DDS {
    width: 100%;
    height: 100%;
    min-width: 400px;
    min-height: 300px;
}

#toolMenu {
    position: absolute;
    left: 8px;
    top: 220px;
    z-index: var(--z-map-controls); /* 原值: 9999 */
    height: 0;
}

#toolMenu > .btn-group,
#toolMenu > .btn-group-vertical {
    opacity: 0.9;
    border-radius: 4px;
    box-shadow: 4px 4px 3px -2px rgba(20%, 20%, 40%, 0.5);
    cursor: pointer;
}

#toolMenu > .btn-group:hover,
#toolMenu > .btn-group-vertical:hover {
    opacity: 1;
}

#toolMenu .btn {
    background: white;
    padding: 6px 10px 3px 10px;
    box-shadow: 0 0;
}

#toolMenu .btn:focus,
#toolMenu .btn:active {
    outline: 0;
    box-shadow: 0 0;
}

#toolMenu .btn i {
    font-size: 1.25em;
    padding: 0;
}

#toolMenu .hasmenu {
    cursor: default;
}
.toolMenu {
    position: absolute;
    left: -800px;
    font-size: 0.875em;
    border-radius: 4px;
    box-shadow: 4px 4px 3px -2px rgba(20%, 20%, 40%, 0.5);
}
.toolMenu li {
    white-space: nowrap;
}

#mapMenu {
    z-index: 1;
}

#mapMenu .parkinglotIcon {
    background-image: url(../images/atis/mapIcon/parking.png) !important;
    background-size: contain;
    width: 32px;
    height: 32px;
    top: 30% !important;
}

#mapMenu .roadsideIcon {
    background-image: url(../images/atis/mapIcon/roadParking.svg) !important;
    background-size: contain;
    width: 32px;
    height: 32px;
    top: 30% !important;
}

#mapMenu .vdIcon {
    background-image: url(../images/atis/mapIcon/vd.png) !important;
    background-size: contain;
    width: 32px;
    height: 32px;
    top: 30% !important;
}

#mapMenu .cctvIcon {
    background-image: url(../images/atis/mapIcon/cctv.png) !important;
    background-size: contain;
    width: 32px;
    height: 32px;
    top: 30% !important;
}

#mapMenu .opendataCctvIcon {
    background-image: url(../images/atis/mapIcon/cctv.png) !important;
    background-size: contain;
    width: 24px;
    height: 24px;
    top: 40% !important;
}

#mapMenu .cmsIcon {
    background-image: url(../images/atis/mapIcon/cms.png) !important;
    background-size: contain;
    width: 32px;
    height: 32px;
    top: 30% !important;
}
#mapMenu .sigIcon {
    background-image: url(../images/atis/mapIcon/sig.png) !important;
    background-size: contain;
    width: 24px;
    height: 24px;
    top: 40% !important;
}

#mapMenu .rdIcon {
    background-image: url(../images/atis/mapIcon/rd.png) !important;
    background-size: contain;
    width: 24px;
    height: 24px;
    top: 40% !important;
}

#mapMenu .indtIcon {
    background-image: url(../images/atis/mapIcon/indt-r.svg) !important;
    background-size: contain;
    width: 24px;
    height: 24px;
    top: 40% !important;
}

#mapMenu .constrIcon {
    background-image: url(../images/atis/mapIcon/constr.png) !important;
    background-size: contain;
    width: 24px;
    height: 24px;
    left: 10px;
    top: 40% !important;
}

#mapMenu .moeIcon {
    background-image: url(../images/atis/mapIcon/moe.png) !important;
    width: 24px;
    height: 24px;
    top: 40% !important;
}

#mapMenu .gMoeIcon {
    background-image: url(../images/atis/mapIcon/gMoe.png) !important;
    background-size: contain;
    width: 24px;
    height: 24px;
    top: 40% !important;
}

#mapMenu .aviIcon {
    background-image: url(../images/atis/mapIcon/avi.svg) !important;
    width: 24px;
    height: 24px;
    top: 40% !important;
}

#mapMenu .googlemoeIcon {
    background-image: url(../images/atis/mapIcon/google.png) !important;
    background-size: contain;
    width: 32px;
    height: 32px;
    top: 30% !important;
}

#mapMenu .ubikeIcon {
    background-image: url(../images/atis/mapIcon/bike.png) !important;
    background-size: contain;
    width: 32px;
    height: 32px;
    top: 30% !important;
}

#mapMenu .busIcon {
    background-image: url(../images/atis/mapIcon/bus.png) !important;
    background-size: contain;
    width: 32px;
    height: 32px;
    top: 40% !important;
}

#mapMenu input {
    width: 161px;
    height: 49px;
    display: none;
}

#editModeMsg {
    position: absolute;
    /* 	right: 15px; */
    /* 	top: 15px; */
    left: 8px;
    top: 220px;
    z-index: var(--z-modal); /* 原值: 99999 */
    padding: 4px;
    font-size: 0.875em;
    font-weight: bold;
    color: #ffffff;
    background: #e7656d;
    border-radius: 4px;
    box-shadow: 4px 4px 3px -2px rgba(20%, 20%, 40%, 0.5);
    display: none;
}

#drawingMenu {
    position: absolute;
    left: 20px;
    top: 249px;
    z-index: var(--z-map-controls); /* 原值: 9999 */
    height: 0;
    display: none;
}
#drawingMenu > .btn-group,
#drawingMenu > .btn-group-vertical {
    opacity: 1;
    border-radius: 4px;
    box-shadow: 4px 4px 3px -2px rgba(20%, 20%, 40%, 0.5);
    cursor: pointer;
}

#drawingMenu > .btn-group:hover,
#drawingMenu > .btn-group-vertical:hover {
    opacity: 1;
}

#drawingMenu .btn {
    color: #e7656d;
    background: white;
    /* 	color: white; */
    /* 	background: #E7656D; */
    padding: 6px 10px 3px 10px;
    box-shadow: 0 0;
}

#drawingMenu .btn:focus,
#drawingMenu .btn:active {
    outline: 0;
    box-shadow: 0 0;
}

#drawingMenu .btn i {
    font-size: 1.25em;
    padding: 0;
}

.marker {
    cursor: pointer;
}

.tooltip-info-close {
    cursor: pointer;
    position: relative;
    left: 90%;
    top: -5px;
}

.colorPicker {
    float: left;
    width: 30px;
    height: 30px;
    margin: 5px;
    box-shadow: 1px 1px 2px #000000;
}

.contextMenu {
    position: absolute;
    z-index: var(--z-modal); /* 原值: 99999 */
    background: white;
    border: solid 1px gray;
    padding: 4px;
}

.contextMenu > div {
    cursor: pointer;
}

.contextMenu > div + div {
    margin-top: 2px;
}

table.dataTable.cell-border tbody tr:last-child td {
    border-bottom: 1px solid #dddddd;
}

div.dataTables_scrollHeadInner {
    padding-left: 0;
}

.chkdTr {
    background-color: #9bd2ff;
}

.flashIcon {
    -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
    -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
    -ms-animation: blink normal 2s infinite ease-in-out; /* IE */
    animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}

.alarmIcon {
    -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
    -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
    -ms-animation: blink normal 2s infinite ease-in-out; /* IE */
    animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}

/* Firefox old*/
@-moz-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}
/* IE */
@-ms-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}
/* Opera and prob css3 final iteration */
@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}

.brightness {
    -webkit-filter: brightness(0.5);
    -moz-filter: brightness(0.5);
    -o-filter: brightness(0.5);
    -ms-filter: brightness(0.5);
    filter: brightness(0.5);
}

.circle {
    position: absolute;
    left: -6px;
    top: -6px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid #3399cc;
    cursor: pointer;
}

@keyframes pulse {
    0% {
        -moz-transform: scale(0);
        opacity: 0;
    }
    25% {
        -moz-transform: scale(0);
        opacity: 0.1;
    }
    50% {
        -moz-transform: scale(0.1);
        opacity: 0.3;
    }
    75% {
        -moz-transform: scale(0.5);
        opacity: 0.5;
    }
    100% {
        -moz-transform: scale(1);
        opacity: 0;
    }
}

.tabWrapper {
    height: 100%;
}

.tabWrapper .nav-tabs {
    border-bottom: 0;
}

.tabWrapper .nav-tabs li {
    margin-bottom: -2px;
}

.tabWrapper .nav > li > a {
    padding: 6px 15px;
}

.tabWrapper .tab-content {
    border: 1px solid lightgray;
    padding: 2px;
}

.tabWrapper .updateTime {
    position: absolute;
    right: 12px;
    top: 15px;
    font-size: 0.875em;
}

.colpick {
    z-index: var(--z-video-player); /* 原值: 9999999 */
}

.menuItem {
    list-style: none;
    margin: 0px;
    padding-left: 3px;
    padding-right: 3px;
    font-size: 1.0625em;
    color: #333333;
    cursor: pointer;
}

.contextMenu {
    position: fixed;
    border: 1px solid #b2b2b2;
    width: 90px;
    background: #f9f9f9;
    border-radius: 2px;
}

.menuItem > li {
    padding-left: 3px;
}

.menuItem :hover {
    color: white;
    background: #284570;
    border-radius: 1px;
}

/* SlickGrid */
.slick-header-column {
    text-align: center;
}

.slick-cell {
    text-align: center;
}

/* common */
.textcenter {
    text-align: center;
}

.textleft {
    text-align: left;
}

.floatleft {
    float: left;
}

.clearfloat {
    clear: both;
}

.hide {
    display: none;
}

.red {
    color: red;
}

.blue {
    color: blue;
}

.green {
    color: green;
}
@charset "UTF-8";
/* marker flash*/
.marker-effect {
    width: 64px;
    height: 64px;
    position: absolute;
    top: 0;
    display: block;
    background: rgba(255, 5, 37, 0.6);
    border-radius: 50%;
    opacity: 0;
    animation: pulsate 1200ms ease-out infinite;
    left: -14px;
    top: -9px;
}

@keyframes pulsate {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

/* marker flash end*/
/* modal */
.modal-header {
    color: #fff;
    background-color: #08202f;
}

.modal {
    top: 2%;
}

.modal-header h2,
.modal-ann-title {
    display: flex;
    justify-content: center;
    align-items: center;
    /* font-size: 2rem; */
    width: 100%;
    font-weight: bold;
    font-family: Microsoft JhengHei;
    color: #fff;
}

.modal-ann-title button {
    color: #fff;
    background-color: #08202f;
    border: 0px;
}

#contentAnn .modal-body {
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    width: 100%;
    border-style: none;
    resize: none;
    outline: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    max-height: 80vh;
}

#mapDesc li {
    padding: 10px 0;
    float: left;
    width: 100%;
    height: 60px;
}

/* The Close Button */
.modal-header .close {
    color: white;
    float: right;
    font-size: 1.75em;
    font-weight: bold;
}

.modal-header h2 a {
    color: #fff;
    font-size: 100%;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
}

.padding li {
    padding: 10px 0;
    border-bottom: 1px solid #cdcdcd;
    float: left;
}

.modal-body tr td .right a {
    color: #707070;
    padding: 7px;
    font-size: 110%;
    cursor: pointer;
}

.modal-body .row {
    width: 100%;
}

/* modal end */
/* btns ���蕭嚙� */
.btns label {
    padding: 10px 0 10px 30px;
    display: block;
    margin: 5px;
    text-align: left;
    font-weight: bold;
}

.btns div:hover,
.btns a.active {
    background-color: #07202f9c;
    color: #fff;
}

.btns label.ui-button.ui-widget.ui-state-default.ui-button-text-icon-primary.ui-state-active {
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}

.btns button {
    border: none;
    /* background-color: transparent; */
    font-size: 150%;
    text-shadow: 1px 1px 0px #fff;
    position: absolute;
    right: 0;
    background: #ff000000;
}

/* btns end */

.tooltip {
    position: absolute;
    width: 145px;
    padding: 5px;
    border: 1px solid gray;
    background-color: #fff;
    color: black;
    z-index: var(--z-modal); /* 原值: 99999 */
}

.map-tooltip {
    position: absolute;
    z-index: var(--z-modal); /* 原值: 99999 */
    background: #fff;
    padding: 10px 10px 10px 10px;
    overflow: hidden;
    position: absolute;
    border: solid 1px gray;
    white-space: nowrap;
    will-change: transform;
}

.map-tooltip > div + div {
    margin-top: 4px;
}

.map-info-content {
    /* padding: 5px; */
    /* box-shadow: 2px 2px 5px #00000047; */
    border-radius: 10px;
    min-width: 225px;
    white-space: nowrap;
}

.info span {
    padding: 1px;
}

.vdClickInfo {
    width: 250px;
    padding-bottom: 10px;
}

.map-info-content .cmsClickInfo .carousel-inner {
    min-width: 150px;
    max-width: 100%;
    white-space: normal;
}

.cmsClickInfo .carousel-caption {
    word-wrap: break-word;
}

/** marquee **/
#marquee a {
    color: #eee;
    text-decoration: underline;
}

#weatherLoc li a {
    color: #ffffff;
    text-decoration: underline;
}

.ui-accordion .ui-accordion-content {
    background: #07202f;
    padding: 10px;
    color: #fff;
    height: 80vh;
    width: 170px;
}

.weather .ui-accordion {
    position: absolute;
    right: 0;
    width: 180px;
}
.logo {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.title01 {
    background-image: url(../images/atis/title01.png);
}
.title02 {
    background-image: url(../images/atis/title02.png);
}
.title03 {
    background-image: url(../images/atis/title03.png);
}
body.style01 header {
    background-image: url(../images/headerBG.png);
}
body.style01 {
    background-image: url(../images/footerBG.png);
    background-position: center bottom;
}
.page404 {
    background-image: url(../images/atis/404.png);
    background-color: #fff;
    background-position: center;
    height: 600px;
}
.map {
    width: 100%;
    position: relative;
    /* Ensure map container has height */
    height: 100% !important;
    /* min-height: 600px;  */
}
#Accordion2 {
    transition: all 0.3s ease;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border-right: 1px solid #ccc;
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    height: auto !important;
    /* Maintain width from col-md-3 or set explicit */
    width: 25%;
    min-width: 320px; /* Ensure readable on mobile */
    max-width: 100%;
}

@media (max-width: 768px) {
    #Accordion2 {
        width: 100%; /* Full width on mobile */
    }
}

#Accordion2.collapsed {
    width: 0px !important;
    min-width: 0 !important;
    flex: none; /* Reset flex */
    overflow: visible !important; /* Allow toggle button to stick out */
    border: none; /* Hide border when collapsed */
}

/* Hide all normal tabs when collapsed */
#Accordion2.collapsed .nav-tabs > li {
    display: none;
}
/* Show toggle button offset to the right */
#Accordion2.collapsed .nav-tabs > li.toggle-btn {
    display: block !important;
    width: 40px !important; /* Fixed width for the button */
    position: absolute;
    top: 0;
    left: 100%; /* Stick out to the right */
    z-index: 20; /* Ensure above map */
    background: #000; /* Ensure visibility */
}

#Accordion2.collapsed .sidebar-content,
#Accordion2.collapsed .tab-content {
    display: none;
}

#Accordion2.collapsed .nav-tabs > li:not(.toggle-btn) {
    display: none;
}

#Accordion2.collapsed .nav-tabs > li.toggle-btn {
    width: 100%;
}

.sidebar-header {
    /* Obsolete - removed from HTML */
    display: none;
}

.sidebar-content {
    /* Obsolete wrapper style, tabs handle layout now */
}

/* Retain arrow icons if needed, but we use FontAwesome in jsp now */

.info {
    position: inherit;
    width: 100%;
    font-size: 100%;
    min-width: 200px;
}
.info div {
    width: 100%;
    position: inherit;
    background-color: #fff;
    padding: 5px;
    border: 5px solid #fff;
    box-shadow: 2px 2px 5px #00000047;
    border-radius: 10px;
}
.info .parking {
    border-color: #c37bed;
    width: 100%;
    border: 6px solid #c37bed;
}

.info .construction {
    border-color: #ff6f26;
    width: 100%;
    border: 6px solid #ff6f26;
}

.info .youbike {
    border-color: #f5ab49;
    width: 100%;
    border: 6px solid #f5ab49;
}

.info .cms {
    border-color: #58e37e;
    width: 100%;
    border: 6px solid #58e37e;
}

.info .cctv {
    border-color: #ffb6b6;
    width: 100%;
    margin: auto;
    border: 6px solid #ffb6b6;
}

.info .news02 {
    border-color: #fe7600;
    width: 100%;
    border: 6px solid #fe7600;
}

.info .news03 {
    border-color: #fe0100;
    width: 100%;
    border: 6px solid #fe0100;
}
.info .news03 div {
    width: 300px;
    font-size: 1.7em;
}
.info .news04 {
    border-color: #ff1393;
    width: 100%;
    border: 6px solid #fe0100;
}
.info .news05 {
    border-color: #1d90ff;
    width: 100%;
}
/* Ensure height propagates for scrolling */
#themeTab,
.tab-content {
    height: 100%;
}

.ui-tabs .ui-tabs-panel {
    height: 75vh;
    overflow-x: hidden;
    overflow-y: auto;
}
.tab-content .tab-pane {
    /* Height is sidebar height minus tab header (approx 42px) */
    height: calc(100% - 42px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 15px;
    background: #fff;
    border: none;
}

/* Adapted from style.css for Bootstrap Tabs */
.nav-tabs {
    border: none;
    background: #07202f;
}
.nav-tabs > li {
    width: 30%;
    border: none;
    background: #ccc;
    margin-bottom: 0;
}
.nav-tabs > li.toggle-btn {
    width: 10%;
    background: #000;
}
.nav-tabs > li.toggle-btn a {
    color: #fff;
    padding: 10px 0; /* Align with other tabs */
}
.nav-tabs > li.toggle-btn a:hover {
    background: #333;
}
.nav-tabs > li > a {
    color: #000;
    width: 100%;
    text-align: center;
    font-size: 120%;
    font-weight: bold;
    border-radius: 0;
    margin-right: 0;
    border: none;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
    color: #000;
    background: #fff;
    border: none;
    cursor: default;
}

.nav-tabs > li > a:focus,
.nav-tabs > li.active > a:focus {
    border: 2px dashed #da7b19 !important;
    outline: none;
}

/* List Item Styles inside Tabs */
.tab-content .tab-pane ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tab-content .tab-pane ul li {
    padding: 5px 0;
    border-bottom: 1px solid #cdcdcd;
    float: left;
    width: 100%;
}
.tab-content .tab-pane ul li a {
    color: #707070;
    padding: 7px;
    font-size: 110%;
    text-decoration: none;
    display: block;
}
.tab-content .tab-pane ul li a:hover {
    color: #ffb61a;
}

header {
    z-index: 2;
}
.pointer {
    cursor: pointer;
}
.busStyle {
    border: 1px solid #dadce0;
    text-align: center;
    border-radius: 6px;
    height: 24px;
    padding: 2px 0;
    box-sizing: border-box;
    font-family: Roboto, "Noto Sans TC", Arial, sans-serif;
    padding: 3px 8px 2px;
    margin: 2px;
}
.info div div.busStyle {
    border: 1px solid #dadce0;
    text-align: center;
    border-radius: 6px;
    height: 24px;
    padding: 2px 0;
    box-sizing: border-box;
    font-family: Roboto, "Noto Sans TC", Arial, sans-serif;
    padding: 3px 8px 2px;
    margin: 5px;
    background: white;
    float: left !important;
}
.info div div.busTime {
    border: 1px solid #dadce0;
    text-align: center;
    border-radius: 43px;
    padding: 2px 0;
    box-sizing: border-box;
    padding: 3px 8px 2px;
    margin: 2px;
    background: #ecedf7;
    float: right !important;
    font-size: 0.9em;
    color: #4169e1;
    font-family: "Verdana, Geneva, sans-serif, 微軟正黑體;";
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.info div .busTable td {
    border: none;
    border-bottom: 1px solid #fff;
}

.info div div.busFont {
    font-size: 1rem;
    float: right !important;
    background-color: #eee;
    color: #000;
}

#mapCanvas {
    position: relative !important;
    width: 100%;
    height: 80vh;
    top: 0;
    left: 0;
}

#map-mobile-Infowindow h2 {
    margin-left: 5%;
}

#map-mobile-Infowindow .map-mobile-footer {
    background-color: #08202f;
}

#map-mobile-Infowindow .map-mobile-footer .btn {
    font-size: 1.5em;
}

#map-mobile-Infowindow .info div div.busStyle {
    height: 35px;
    font-size: 1.4em;
}
#map-mobile-Infowindow .info div div.busTime {
    height: 38px;
    font-size: 0.8em;
}

#map-mobile-cctv-Infowindow h2 {
    margin-left: 5%;
}

#map-mobile-cctv-Infowindow .modal-mobile-body {
    padding: 0px;
}

#map-mobile-cctv-Infowindow .map-mobile-footer {
    background-color: #08202f;
}

#map-mobile-cctv-Infowindow .map-mobile-footer .btn {
    font-size: 1.5em;
}

#map-mobile-cctv-Infowindow .ubikeClickInfo {
    background-color: #f5ab49;
}

#map-mobile-cctv-Infowindow .parkingLotClickInfo {
    background-color: #c37bed;
}

#map-mobile-cctv-Infowindow .cctvClickInfo {
    background-color: #ffb6b6;
}

#map-mobile-cctv-Infowindow .cmsClickInfo {
    max-width: 100%;
    background-color: #58e37e;
}

#map-mobile-cctv-Infowindow .info div div.busStyle {
    height: 35px;
    font-size: 1.4em;
}

#map-mobile-cctv-Infowindow .info div div.busTime {
    height: 38px;
    font-size: 0.8em;
}

.key_hlight {
    background: #128534;
    padding: 5px;
    min-width: 105px;
    text-align: center;
    color: #fff;
}

.pd-5 {
    display: flex;
    align-items: center;
    padding: 5px;
    font-weight: bold;
    flex-wrap: wrap;
}

.pd-5 a {
    color: #000;
}

.c-accesskey {
    position: absolute;
    left: 10px;
}

.link_desc {
    font-size: 2rem;
    color: #fff;
    font-weight: 800;
}
.site-map-ul {
    display: flex;
    flex-wrap: wrap;
}

.site-map-ul li {
    padding: 10px 25px;
    border-radius: 5px;
    border: 1px solid #00bcd2;
    margin: 5px 0;
    line-height: 2.2em;
    text-align: center;
    margin: 5px;
}

.site-map-ul li a {
    color: #000;
}

.twrap.mapDesc {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.bar {
    width: 35%;
}

.roadSide1 {
    background: #556b2f;
}

.roadSide2 {
    background: #ff0000;
}

.roadSide3 {
    background: #8b7b8b;
}

.roadSide4 {
    background: #ffbf00;
}

.roadSide5 {
    background: #ff7f00;
}

.roadSide6 {
    background: #000;
}

.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
    padding: 0.4em 1em 0.4em 1.4em;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Custom CSS Spinner */
.ui-button .ui-icon.custom-map-loader {
    background-image: none !important; /* Remove jQuery UI Sprite */
    width: 25px !important;
    height: 25px !important;
    margin-top: -11px !important;
    margin-left: 5px !important;

    border: 2px solid #ccc;
    border-top: 2px solid #007bff; /* Primary Blue */
    border-radius: 50%;

    animation: spin 0.8s linear infinite;
    opacity: 1 !important; /* Force visibility */
}

/* Ensure it stays visible when disabled */
.ui-state-disabled .ui-icon.custom-map-loader {
    opacity: 1 !important;
    filter: none !important;
}

/* Override parent opacity (the button itself) when loading */
.ui-button.ui-state-disabled.loading-active {
    opacity: 1 !important;
}

@media (max-width: 767px) {
    #map-mobile-Infowindow .modal-mobile-body {
        padding: 10px;
    }

    #mapMenu.btns {
        width: 45px;
    }

    #mapMenu.btns span {
        text-indent: -9999px;
    }

    marquee {
        width: calc(100% - 30px);
    }

    .logo {
        height: 50px;
    }

    .btns {
        right: 0.5px;
        top: 50px;
    }

    .btns label {
        padding: 5px 0 5px 30px;
        display: block;
        margin: 1px;
        text-align: left;
    }

    #DDS {
        padding: 0px 10px 0px 10px;
    }

    #mapCanvas {
        height: 70vh;
    }

    #Accordion2 {
        z-index: 2;
    }
    .map-tooltip {
        display: none;
    }

    .modal-body > p > img {
        width: 70%;
    }

    .tleft {
        box-sizing: border-box;
        width: 100%;
        border-right: 0px solid #707070;
    }

    .tright {
        box-sizing: border-box;
        width: 100%;
    }

    .info div {
        box-shadow: none;
    }

    .info .parking {
        border-color: #c37bed;
        width: 100%;
        border: 0px solid #c37bed;
        text-align: center;
    }

    .info .parking .txtL {
        padding: 15px;
        text-align: center;
    }

    .info .construction {
        border-color: #ff6f26;
        width: 100%;
        border: 0px solid #ff6f26;
        text-align: center;
    }

    .info .youbike {
        border-color: #f5ab49;
        width: 100%;
        border: 0px solid #f5ab49;
        text-align: center;
    }

    .info .youbike .txtL {
        padding: 15px;
        text-align: center;
    }

    .info .cms {
        border-color: #58e37e;
        width: 100%;
        border: 0px solid #58e37e;
        text-align: center;
    }

    .info .cctv {
        border-color: #ffb6b6;
        width: 100%;
        margin: auto;
        border: 0px solid #ffb6b6;
        text-align: center;
    }

    .info .news01 {
        border-color: #38a6a6;
        width: 100%;
        border: 0px solid #38a6a6;
        text-align: center;
    }

    .info .news02 {
        border-color: #fe7600;
        width: 100%;
        border: 0px solid #fe7600;
        text-align: center;
    }

    .info .news03 {
        border-color: #fe0100;
        width: 100%;
        border: 0px solid #fe0100;
        text-align: center;
    }

    .info div {
        color: #000;
    }

    .bus {
        max-height: 55vh;
        overflow: auto;
    }
    .modal-lg{
        width: 100vw !important;
    }
}
.display-flex {
    display: inline-flex;
}

.etagClickInfo {
    width: 300px;
    padding-bottom: 10px;
}

.vdClickInfo th,
.parkingLotClickInfo th,
.rdClickInfo th {
    color: whitesmoke;
}

.vdClickInfo th {
    /* 	background-color: #09c847; */
    /* 	color: whitesmoke; */
}

.vdClickInfo td {
    border-bottom: solid 1px gray;
}



.ui-dialog .ui-dialog-content {
    padding: 10px;
}

.tooltip {
    position: absolute;
    width: 145px;
    padding: 5px;
    border: 1px solid gray;
    background-color: #fff;
    color: black;
    z-index: var(--z-modal); /* 原值: 99999 */
}

.map-info-window {
    overflow: hidden;
    position: absolute;
    min-height: 30px;
    min-width: 30px;
    font-size: 0.813rem;
    padding: 10px;
}

/** 施工資訊的內容太長要換行 */
.map-info-content .constrClickInfo td {
    min-width: 150px;
    max-width: 300px;
    white-space: normal;
}
.constrClickInfo td {
    word-wrap: break-word;
}

/** cms的內容太長要換行 */
/* .map-info-content .cmsClickInfo .carousel-inner: Duplicate rule removed */
    max-width: 100%;
    white-space: normal;
}
.cmsClickInfo .carousel-caption {
    word-wrap: break-word;
}
.cmsClickInfo {
    max-width: 250px;
}

.eventClickInfo {
    max-height: 376px;
    overflow-y: auto;
    padding: 0 24px 10px 0;
}

.map-info-close {
    float: right;
    cursor: pointer;
    margin: 1px 22px 10px 5px;
    width: 15px;
    height: 15px;
}

.map-tooltip {
    position: absolute;
    z-index: var(--z-modal); /* 原值: 99999 */
    background: #fff;
    padding: 10px 10px 10px 10px;
    overflow: hidden;
    position: absolute;
    border: solid 1px gray;
    white-space: nowrap;
    will-change: transform;
}

.map-tooltip > div + div {
    margin-top: 4px;
}

hr.updateTime {
    margin-top: 10px;
    margin-bottom: 10px;
}

.infoWindowLoading {
    min-width: 100px;
}

.cmsTextCenter {
    text-align: center;
    line-height: 85px;
}

.title-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mainValue {
    font-size: 1.25rem;
}

/*去除左右按鈕的陰影*/
.carousel-control {
    background-image: none !important;
    filter: none !important;
}
/*滑入顯示控制鈕*/
.carousel .carousel-control,
.carousel-indicators {
    opacity: 0;
    /* Firefox */
    -moz-transition-property: opacity;
    -moz-transition-duration: 0.2s;
    -moz-transition-delay: 0.2s;
    /* WebKit */
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-delay: 0.2s;
    /* Opera */
    -o-transition-property: opacity;
    -o-transition-duration: 0.2s;
    -o-transition-delay: 0.2s;
    transition-property: opacity;
    transition-duration: 0.2s;
    transition-delay: 0.2s;
}

.carousel:hover .carousel-control,
.carousel:hover .carousel-indicators {
    opacity: 1;
}

.carousel:hover .carousel-indicators li {
    opacity: 1;
    border: 1px solid #b4acac;
}
/* .carousel-control.left{ */
/* /* 	background-image: linear-gradient(to right, rgba(136, 134, 134, 0.5) 0%, rgba(0, 0, 0, .0001) 100%);!important; */
*/
/* 	background: transparent !important; */
/* } */
/* .carousel-control.right { */
/* /* 	background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(136, 134, 134, 0.5) 100%); */ */
/* 	background: transparent !important; */
/* } */
.carousel-indicators li {
    border: 1px solid #b4acac;
}
.cms-background {
    width: 100%;
    height: 100%;
}
#myCarousel .msg {
    margin: auto 0;
}
.carousel-caption {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0);
    top: 6%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding-top: 0px;
    padding-bottom: 0px;
}

.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
    color: #878787;
}
.carousel-indicators .active {
    background-color: #878787;
}

.logo-box{
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    .logo {
        background-image: url(../images/logoMobile.png);
        height: 50px;
    }

    .language {
        margin: 0;
        position: fixed;
        width: 80px;
        right: 5px;
        top: 15px;
    }

    nav {
        margin: 0;
    }

    .nav > li > a {
        padding: 10px;
    }

    .info div {
        width: 100%;
    }

    header {
        padding: 0 15px;
    }

    .btns {
        width: 70px;
    }

    .btns a {
        text-indent: -9999px;
        background-size: 55%;
        padding: 10px;
        width: 90%;
        background-position: center;
    }

    body,
    header {
        background-size: contain;
    }

    .popup .block {
        margin: 20% 5%;
        width: 90%;
    }

    .title01,
    .title02,
    .title03 {
        padding: 15px 0;
        background-size: cover;
    }

    .block ul {
        margin: 10px;
    }

    .popup img {
        max-width: 100%;
    }

    .marquee {
        border-radius: 0;
        margin: 0 -15px;
    }

    .marquee .right {
        display: none;
    }

    main {
        padding: 115px 0 0 0;
    }

    .block li {
        width: 50%;
    }

    .cmsClickInfo {
        max-width: none !important;
    }
}