body {
    /*     max-width: 768px; */
    font-family: Microsoft JhengHei, Arial, Helvetica, sans-serif;
    font-size: 1.6em;
    margin: 0 auto;
    /*padding-top: 50px;
    padding-bottom: 20px;*/
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
/*input, select, textarea {
    max-width: 280px;
}*/

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out; */
    /* -webkit-transition: .6s;
    -moz-transition: .6s;
    -o-transition: .6s;
    transition: .6s; */
}

ul {
    margin: 0;
    padding: 0;
}

    ul li {
        list-style-type: none;
    }

a, a:hover, a:active, a:focus {
    text-decoration: none;
}

header {
    width: 100%;
    height: 69px;
    background-color: #000000;
    padding-right: 1em;
    position: fixed;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

    header a {
        width: 139px;
        height: 69px;
        
        position: absolute;
        left: 0;
        top: 0;
    }

    header h2 {
        color: #ffffff;
        font-size: 1.5em;
        font-weight: bolder;
        margin: 0;
    }

.lantern_menu {
    width: 100%;
    height: 90px;
    max-width: 768px;
    background-color: #ffffff;
    position: fixed;
    top: 69px;
    left: 50%;
    -moz-transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    z-index: 5;
}

    .lantern_menu ul {
        width: 100%;
        letter-spacing: normal;
        padding: 1em;
        display: flex;
        justify-content: space-between;
    }

        .lantern_menu ul li {
            width: calc(100% / 3 - 0.5em);
        }

            .lantern_menu ul li a {
                background-color: #e6e7e8;
                color: #808285;
                font-size: 1.5em;
                font-weight: bolder;
                text-align: center;
                border-radius: 0.5em;
                padding: 0.5em 0.8em 0.5em 0.8em;
                display: block;
            }

            .lantern_menu ul li.active a {
                background-color: #ed8c35;
                color: #ffffff;
            }

            .lantern_menu ul li a:hover {
                background-color: #ed8c35;
                color: #ffffff;
            }

.lantern_content {
    width: 100%;
    max-width: 768px;
    font-weight: bolder;
    margin: 159px auto 0px auto;
    padding: 0em 1em 1em 1em;
}

/* 頁籤功能 */
.lantern_tab {
    width: 100%;
    background-color: #ffffff;
    position: sticky;
    top: 159px;
    z-index: 1;
}

    .lantern_tab > div {
        overflow: hidden;
        overflow-x: auto;
    }

    .lantern_tab ul.nav-tabs {
        margin-left: -0.5em;
        letter-spacing: normal;
        border: none;
        display: flex;
        justify-content: flex-start;
        /*overflow: hidden;
        overflow-x: auto;*/
    }

    .lantern_tab .nav-tabs > li {
        margin: 0em 0.5em;
    }

        .lantern_tab .nav-tabs > li > a {
            background: none;
            color: #808285;
            font-size: 1.25em;
            border: none;
            border-bottom: 3px solid #d1d3d4;
            border-radius: 0;
            margin-right: 0;
            padding: 0.3em 0.5em 0.1em 0.5em;
            display: block;
            white-space: nowrap;
        }

        .lantern_tab .nav-tabs > li.active > a, .lantern_tab .nav-tabs > li.active > a:hover, .lantern_tab .nav-tabs > li.active > a:focus {
            color: #000000;
            border: none;
            border-bottom: 3px solid #ed8c35;
        }

.tab-content {
    margin-bottom: 4em;
    padding: 0.5em 0em;
}

    .tab-content p img {
        width: 100%;
    }

.tabox_1 {
    position: relative;
}

.mcitab_btnbx {
    width: 100%;
    background-color: #ffffff;
    position: sticky;
    top: 159px;
    z-index: 1;
}

    .mcitab_btnbx ul {
        letter-spacing: normal;
        margin-left: -0.5em;
        display: flex;
        justify-content: flex-start;
        overflow: hidden;
        overflow-x: auto;
    }

        .mcitab_btnbx ul li {
            width: auto;
            background: none;
            margin: 0em 0.5em;
        }

            .mcitab_btnbx ul li.now_view {
                background: none;
            }

            .mcitab_btnbx ul li a {
                background: none;
                color: #808285;
                font-size: 1.25em;
                border-bottom: 3px solid #d1d3d4;
                border-radius: 0;
                padding: 0.3em 0.5em 0.1em 0.5em;
                display: block;
                white-space: nowrap;
            }

            .mcitab_btnbx ul li.now_view a {
                color: #000000;
                border-bottom: 3px solid #ed8c35;
            }

.now_view > .mcitab_detail {
    border: none;
    margin-bottom: 4em;
    padding: 0.5em 0em;
}

.lantern_list {
    border: 1px solid #ed8c35;
    border-radius: 0.75em;
    margin-bottom: 0.75em;
    padding: 0.75em;
}

.lantern_show {
    display: flex;
    flex-wrap: wrap;
}

/* 前往燈會-搭公車 */
.lantern_buslightbx_btn a.timetable {
    background-color: #ed8c35;
    color: #ffffff;
    font-size: 1em;
    padding: 5px 0.5em;
    border-radius: 0.5em;
}

.lantern_buslightbx #mcilghtbx_overlay {
    background-color: #ffffff;
    padding: 0 0px 83px 0px;
}

.lantern_buslightbx #busInfo {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.lantern_buslightbx .busTab {
    width: 100%;
    background-color: #ffffff;
    padding: 10px 20px 5px 20px;
    position: sticky;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.lantern_buslightbx #busInfo a {
    color: #ed8c35;
    font-size: 1.2em;
    text-align: center;
    border: 1px solid #ed8c35;
    border-radius: 0.5em;
    margin: 0.3em;
    padding: 0.5em;
    display: block;
}

    .lantern_buslightbx #busInfo a.active {
        background-color: #ed8c35;
        color: #ffffff;
        font-size: 1.2em;
        text-align: center;
        border: 1px solid #ed8c35;
        border-radius: 0.5em;
        margin: 0.3em;
        padding: 0.5em;
        display: block;
    }

.lantern_buslightbx #busInfo ul {
    width: 100%;
    padding: 0px 20px 0px 20px;
}

    .lantern_buslightbx #busInfo li {
        border-bottom: 1px solid #999999;
        padding: 0.5em 0em;
        /*display: flex;
        align-items: center;*/
    }

    .lantern_buslightbx #busInfo span {
        font-size: 1.1em;
        line-height: normal;
        vertical-align: middle;
        display: inline-block;
    }

        .lantern_buslightbx #busInfo span:nth-child(1) {
            background-color: #999999;
            width: 5em;
            color: #ffffff;
            text-align: center;
            margin-right: 0.3em;
            border-radius: 0.5em;
            padding: 0.2em 0.3em;
        }

        .lantern_buslightbx #busInfo span:nth-child(1).red {
            background-color: #ff0000;
        }

            .lantern_buslightbx #busInfo span:nth-child(1).green {
                background-color: #008000;
            }

        .lantern_buslightbx #busInfo span:nth-child(2) {
            color: #000000;
        }

        .lantern_buslightbx #busInfo span:nth-child(3) {
            width: 6em;
            color: #ed8c35;
            font-size: 0.8em;
            float: right;
        }


/* 前往燈會-找停車位 */
.lantern_parking {
    width: calc(100% - 70px);
}

    .lantern_parking h3 {
        font-size: 1.25em;
        font-weight: bolder;
        margin-top: 0;
    }

    .lantern_parking p {
        color: #6d6e71;
        margin-bottom: 0.25em;
    }

.lantern_sort {
    width: 100%;
    display: flex;
    align-items: center;
}

    .lantern_sort label {
        width: 100%;
        margin-bottom: 0;
        flex: 1;
        white-space: nowrap;
    }

    .lantern_sort select {
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 3px solid #ed8c35;
        margin-right: 0.5em;
        flex: 1.5;
    }

    .lantern_sort button {
        background-color: #ed8c35;
        color: #ffffff;
        line-height: normal;
        border: none;
        border-radius: 0.25em;
        margin-right: 0;
        padding: 0.3em;
        flex: 1;
    }

    .lantern_sort a {
        background-color: #ed8c35;
        color: #ffffff;
        line-height: normal;
        text-align: center;
        border-radius: 0.25em;
        padding: 0.3em;
        flex: 1;
    }

    .lantern_sort #mcilghtbx_overlay {
        padding: 0 0px 83px 0px;
    }

#thsrTrainTable {
    width: 100%;
    position: relative;
}

    #thsrTrainTable .thead {
        background-color: #000000;
        font-size: 1.25em;
        padding: 20px 20px 5px 20px;
        position: sticky;
        top: 0;
    }

        #thsrTrainTable .thead strong {
        }

    #thsrTrainTable .tbody {
        padding: 0px 20px 0px 20px;
    }

        #thsrTrainTable .tbody li {
            padding: 0.5em 0em;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            #thsrTrainTable .tbody li span {
                width: 25%;
                color: #ffffff;
                font-weight: bolder;
                text-align: center;
                line-height: normal;
                padding: 0em 0.3em;
            }

                #thsrTrainTable .tbody li span:nth-child(odd) {
                    color: #ed8c35;
                    font-size: 1.25em;
                }

#mcilghtbx_cnt img {
    max-width: 100%;
}

.lantern_follow {
    display: flex;
}

    .lantern_follow a {
        width: 70px;
        height: 70px;
        background: url(/Images/drill/lantern_arrow_g.png) no-repeat #e6e7e8 center 0.6em;
        color: #808285;
        font-size: 1.25em;
        text-align: center;
        border-radius: 0.5em;
        margin-bottom: 0.75em;
        padding-top: 1.8em;
        display: block;
    }

        .lantern_follow a:hover, .lantern_follow a:active {
            background: url(/images/drill/lantern_arrow_w.png) no-repeat #ed8c35 center 0.6em;
            color: #ffffff;
        }

.lantern_space {
    width: 100%;
    display: flex;
    justify-content: center;
}

    .lantern_space > div {
        margin: 0em 0.5em;
        display: flex;
        align-items: center;
    }

    .lantern_space .img {
        margin-right: 0.5em;
    }

    .lantern_space .number {
        font-size: 1.25em;
    }

        .lantern_space .number span {
            font-size: 1.5em;
        }

        .lantern_space .number strong.red {
            color: #ff0000;
        }

        .lantern_space .number strong.orange {
            color: #ec6941;
        }

        .lantern_space .number strong.green {
            color: #009944;
        }

    .lantern_space p {
        color: #6d6e71;
        font-size: 0.8em;
        margin: 0;
    }

        .lantern_space p strong {
            color: #000000;
            font-size: 1.5em;
        }

/* 前往燈會-主燈展演場 */
/* 前往燈會-光的遊戲場 */
.lantern_gaming {
    width: calc(100% - 70px);
    padding-right: 1em;
    display: flex;
}

.picture_box {
    width: 50%;
    background-color: #000000;
    margin-right: 1em;
    padding-bottom: 35%;
    position: relative;
}

.picture_form {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}

    .picture_form img {
        height: 100%;
        max-height: 100%;
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        right: 0;
        -webkit-transform: translate(-50%, 0%);
        -moz-transform: translate(-50%, 0%);
        -o-transform: translate(-50%, 0%);
        transform: translate(-50%, 0%);
    }

.lantern_gaming h3 {
    width: 50%;
    font-size: 1.25em;
    font-weight: bolder;
    margin: 0;
    display: flex;
    align-items: center;
}

    .lantern_gaming h3 img {
        width: 39px;
        height: 39px;
        margin-right: 0.5em;
        display: block;
    }

    .lantern_gaming h3 span {
        display: block;
    }

/* 逛燈會-主燈展演場 */
/* 逛燈會-光的遊戲場 */
.panel-default {
    border: none;
}

    .panel-default > .panel-heading {
        background-color: #ed8c35;
        border: none;
    }

.panel-title > a.accordion-toggle {
    width: 100%;
    color: #ffffff;
    font-size: 1.25em;
    display: block;
}

    .panel-title > a.accordion-toggle:before {
        content: "▲";
    }

    .panel-title > a.accordion-toggle.collapsed:before {
        content: "▼";
    }

.collapse {
    padding: 0em 0.75em 0.75em 0.75em;
}

    .collapse .lantern_show {
        padding-top: 0.75em;
    }

/* 逛燈會-看展演 */
.lantern_acting {
    width: calc(100% - 70px);
    display: flex;
    flex-wrap: wrap;
}

    .lantern_acting h3 {
        width: 100%;
        font-size: 1.25em;
        font-weight: bolder;
        margin-top: 0;
        display: flex;
        align-items: center;
    }

        .lantern_acting h3 span.timeOut {
            background-color: #ff0000;
            color: #ffffff;
            font-size: 0.75em;
            border-radius: 0.25em;
            margin-right: 0.25em;
            padding: 0.5em;
            white-space: nowrap;
        }

    .lantern_acting > div {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .lantern_acting h4 {
        width: 50%;
        font-size: 1.25em;
        font-weight: bolder;
        margin: 0;
    }

        .lantern_acting h4 span {
            width: 100%;
            margin: 0.25em 0em;
            display: block;
        }

            .lantern_acting h4 span:nth-child(2) {
                color: #808285;
                font-size: 1em
            }

/* 搭機捷 */
.lantern_tymetro {
    width: calc(100% - 70px);
    margin: 0em 0em 0.5em 0em;
    padding: 0em 1em 0em 0em;
}

    .lantern_tymetro span {
        background-color: #43bf49;
        color: #ffffff;
        border-radius: 0.25em;
        margin-right: 0.25em;
        padding: 0.5em;
        white-space: nowrap;
        display: inline-block;
    }

    .lantern_tymetro span.alot {
        background-color: #e0b605;
    }

    .lantern_tymetro .title {
        display: flex;
        align-items: center;
    }

        .lantern_tymetro .title h3 {
            font-weight: bolder;
            letter-spacing: 0.05em;
            padding-right: 0.5em;
        }

        .lantern_tymetro .title p {
            color: #808285;
            font-weight: bolder;
            margin-top: 20px;
        }

/*有些沒有包在lantern_tymetro裡面*/
p.note {
    width: 100%;
    background-color: #e6e7e8;
    color: #808285;
    font-weight: bolder;
    border-radius: 0.5em;
    padding: 0.5em 0.8em 0.5em 0.8em;
}

        p.note strong {
            text-decoration: underline;
            display: block;
        }

.timetab {
    width: 100%;
}

    .timetab .nav-tabs {
        border: none;
        display: flex;
        justify-content: space-between;
    }

        .timetab .nav-tabs > li {
            width: 100%;
            text-align: center;
            margin: 0em 0.5em 0em 0em;
        }

            .timetab .nav-tabs > li:nth-child(2) {
                width: 100%;
                text-align: center;
                margin: 0em 0em 0em 0.5em;
            }

            .timetab .nav-tabs > li > a {
                background-color: #e6e7e8;
                color: #bcbec0;
                font-size: 1.25em;
                border: none;
                border-radius: 0.5em;
                margin: 0;
                padding: 0.3em
            }

            .timetab .nav-tabs > li.active > a, .timetab .nav-tabs > li.active > a:hover, .timetab .nav-tabs > li.active > a:focus {
                background-color: #e6e7e8;
                color: #000000;
                border: none;
            }

    .timetab .tab-content {
        margin-bottom: 0em;
        padding-top: 1em;
    }

        .timetab .tab-content li {
            padding: 0.5em 0em;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .timetab .tab-content li span {
                width: 25%;
                color: #808285;
                font-weight: bolder;
                padding: 0em 0.3em;
            }

                .timetab .tab-content li span.time {
                    /*width: 100%;*/
                    color: #000000;
                    font-size: 1.25em;
                    text-align: center;
                    display: block;
                }

        .timetab .tab-content ul.align {
            display: flex;
            flex-wrap: wrap;
        }

            .timetab .tab-content ul.align li {
                width: 100%;
                flex-wrap: wrap;
                justify-content: flex-start;
            }

.lantern_tymetro.opinion {
    width: 100%;
    margin: 0em 0em 0.5em 0em;
    padding: 0em;
    display: flex;
    align-items: center;
}

    .lantern_tymetro.opinion .lantern_follow > div {
        display: flex;
    }

    .lantern_tymetro.opinion h3 {
        font-weight: bolder;
        letter-spacing: 0.05em;
        padding-right: 0.5em;
    }

    .lantern_tymetro.opinion p {
        color: #808285;
        font-weight: bolder;
        margin-top: 20px;
    }

.twoPoint {
    width: 100%;
    display: flex;
    justify-content: center;
}

    .twoPoint .lantern_follow > div {
        margin: 0em 0.5em;
    }

    .twoPoint .lantern_follow a {
        margin: auto;
    }

    .twoPoint .lantern_follow h4 {
        font-weight: bolder;
    }

footer {
    width: 100%;
    background-color: #000000;
    color: #a6a6a6;
    font-size: 1.25em;
    font-weight: bolder;
    padding: 0.5em 1em 0.5em 1em;
    position: fixed;
    bottom: 0;
}

    footer span {
        font-size: 0.8em;
    }

@media screen and (max-width: 400px) {
    header {
        justify-content: flex-end;
    }
}

@media screen and (max-width: 429px) {
    .lantern_space p strong {
        width: 100%;
        display: block;
    }
}

@media screen and (max-width: 479px) {
    .lantern_menu {
        height: 70px;
    }

    .lantern_tab {
        top: 138px;
    }

    .lantern_gaming h3 {
        width: 100%;
    }

    .lantern_content {
        margin-top: 138.5px;
    }

    .mcitab_btnbx {
        top: 138.5px;
    }

    .lantern_menu ul li a {
        font-size: 1.2em;
        padding: 5px 0.5em;
    }

    .lantern_acting h4 {
        font-size: 1em;
    }

    .timetab .nav-tabs > li > a {
        font-size: 1em;
    }
}