@charset "utf-8";
/* CSS Document */

.ListSearch {
    margin: 50px 120px 0;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    /*display: none; visibility: hidden;*/
}

#PageListContainer {
    padding: 0 120px 300px;
}

/*
.list {
    padding: 0 120px 280px;
}
*/
.list .item {
    width: calc(50% - 10px);
    margin: 10px 3px;
}

/*.editable_content div.district p  { padding:15px 30px 15px ; margin:0; vertical-align:middle; }*/

/*----------------------------------------------------------------------*/
/* Key visual */

#KeyVisual .bxSlider_list li img {
    width: 100%;
    object-fit: cover;
    /*min-height: 900px;*/
}

/* 修改Key visual圖片載入時Slider高度過高問題 */
#KeyVisual .bxSlider_list {
    position: relative;
    background:
        /*#fff*/
        url(../images/cover_wide.jpg) top center fixed no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
}

/*----------------------------------------------------------------------*/
/* 首頁 */

#Header > div {
    padding: 0px 20px 0px 60px;
}

#Footer {
    padding: 40px 0 35px;
}

#Footer .editable_content {
    padding: 0 120px;
}

.IndexCustom.IndexBlock {
    padding: 75px 0 0;
}

.IndexCarousel .col_cont {
    width: 100%;
}

.IndexCarousel .col_list {
    width: 100%;
}

.IndexBlock.IndexCarousel > div {
    background: rgb(133, 113, 90);
    background: -moz-linear-gradient(0deg, rgba(133, 113, 90, 0.5984529554009104) 0%, rgba(0, 0, 0, 0.5984529554009104) 100%);
    background: -webkit-linear-gradient(0deg, rgba(133, 113, 90, 0.5984529554009104) 0%, rgba(0, 0, 0, 0.5984529554009104) 100%);
    background: linear-gradient(0deg, rgba(133, 113, 90, 0.5984529554009104) 0%, rgba(0, 0, 0, 0.5984529554009104) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#85715a", endColorstr="#000000", GradientType=1);
}

.IndexCustom {
    /*position: relative;*/
    background-position: center top -10px;
    background-size: 140% auto, contain; 
    /*margin: 0 auto;
    padding: 0;*/
}


/*----------------------------------------------------------------------*/
/* 内頁 */

body {
    background: #000
        /*url(../images/index_bg.jpg) repeat*/
    ;
}

#Wrap {
    background-image: url(../images/bg1.jpg), url(../images/bg2.png), url(../images/bg3.jpg);
    background-repeat: no-repeat, no-repeat, repeat;
    background-position: top -150px center, bottom 240px center, top 0px left 0px;
    background-size: auto, auto, auto;
}

.paper {
    padding: 0px 120px 300px;
    /*padding:0px 30px 100px; background:#152042 url(../images/bg_wide.png) no-repeat 50% 100%; border:1px solid #e5e3e1;*/
}

.paper #Pagination {
    margin-bottom: 25px;
}

.editable_content {
    /*padding: 0px 120px;*/
}

.article_title {
    width: calc(100% - 120px);
}

#colorbox_thum a {
    width: calc(50% - 10px);
    margin: 10px 5px;
}

/*
#content-title h4 {
    margin: -40px auto 4px;
}

#content-word {
    margin: 0 40px;
}
*/

#ch2_collect01-pic {
    top: 50px;
}

#ch2_collect02-pic {
    top: 50px;
}

#ch2_collect03-pic {
    top: 50px;
}

#ch2_collect04-pic {
    top: 50px;
}

#ch2_collect05-pic {
    top: 50px;
}

#ch2_collect06-pic {
    top: 50px;
}

#ch2_collect07-pic {
    top: 50px;
}

#ch2_collect08-pic {
    top: 50px;
}

#ch2_collect09-pic {
    top: 50px;
}

#ch2_collect10-pic {
    top: 50px;
}

#ch2_collect11-pic {
    top: 50px;
}

#ch2_collect12-pic {
    top: 50px;
}

#ch2_collect13-pic {
    top: 50px;
}

#ch3_collect-profile {
    bottom: 60px;
    right: 60px;
}

#index-all {
    margin: 0 auto 40px;
    padding: 40px 120px 0;
}

#speaker-inline {
    width: calc(50% - 20px);
}

#history-inline {
    text-align: center;
}

#history-title {
    width: 200px;
}

#history-word {
    width: calc(640px - 10px);
    border-top: 1.2px solid #7a7877;
    border-left: 0;
    padding: 10px 0;
}

#detail-chword {
    width: calc(100% - 10px);
    padding: 10px 0;
}

#detail-enword {
    width: calc(100% - 10px);
    border-left: 0;
    border-top: 1.2px solid #7a7877;
    padding: 10px 0;
}

/* 内頁元素 */
#Breadcrumbs {
    bottom: 0px;
    right: 120px;
    margin-bottom: -15px;
    /*margin-right: -10px;
    bottom:-45px; display:none;*/
}

.ToolBar {
    margin: 20px 60px 20px 60px;
}

.ToolBar .colm_left {
    /*float:left;*/
    display: none;
}

.ToolBar dl.font_size {
    float: left;
    /*padding-right:20px;*/
}

.ToolBar dl.share {
    float: right;
}

#Footer div {
    /*max-width: 1280px;*/
    margin: 0 auto;
}

#Footer .editable_content_index {
    padding: 0 120px;
}

#Footer .copyright {
    padding: 0 120px;
}

/* 標題 */
h2 {
    margin: 150px auto 100px;
}

.PageTitle .searchBox {
    margin-top: 13px;
}

.PageTitle .searchBox > div {
    width: 100%;
}

.PageTitle .searchBox.pro_search > div {
    width: 49%;
    margin-left: 2%;
}

.PageTitle .searchBox.pro_search > div:first-child {
    margin-left: 0px;
}

/* 分類下拉 */
.CatTitle .cat_select {
    margin-top: 10px;
}

/* 列表搜尋 */

/* 頁碼 */
#Pagination {
    /*margin-top:0;*/
    padding: 20px 0px 0px;
}

#Pagination a {
    margin: 0 5px;
    display: none;
}

#Pagination a.first,
#Pagination a.prev,
#Pagination a.next,
#Pagination a.last,
#Pagination .current {
    display: inline-block;
}

#Pagination .setting {
    display: none;
}

/* colorbox */
#colorbox_thum a {
    /*width: 135px;
    margin: 10px;*/
}

/* 延伸閱讀 */
.related_articles .item {
    width: 48%;
    margin-left: 4%;
    padding: 0px;
}

.related_articles .item:nth-child(2n+1) {
    margin-left: 0;
}

.related_articles .item .title a {
    font-size: 112.5%;
}

@media screen and (max-width: 767px) {
    .related_articles .item .img img {
        height: 160px;
    }
}

@media screen and (min-width: 768px) {
    .related_articles .item .img img {
        height: 200px;
    }
}

/*----------------------------------------------------------------------*/
/* 圖文列表樣式 */
@media screen and (max-width: 699px) {

    /*.list .item { width:48%; }*/
    .list {
        overflow: hidden;
        margin: 0px 60px 0px;
        text-align: center;
        /*padding: 0 0 100px 0;*/
    }
}

#Event .list .item {
    width: 80%;
}

#News .list .item {
    width: 80%;
}

/*----------------------------------------------------------------------*/
/* 常設展列表 */
.le_list .dep {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

/*----------------------------------------------------------------------*/
/* 當期特展列表 */
.ce_list .textBox {
    padding: 12px 12px 12px 90px;
}

.ce_list .no {
    font-size: 3em;
    left: 15px;
    top: 16px;
}

.ce_list .more {
    display: none;
}

/* 展覽回顧列表 */
.ce_list.review .title a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.ce_list.review .item {
    float: left;
    margin-left: 4%;
    width: 48%;
}

.ce_list.review .item:nth-child(2n+1) {
    margin-left: 0;
}

.ce_list.review .textBox {
    padding: 12px;
}

/*----------------------------------------------------------------------*/
/* 按鈕 */
.BtnCommon.large div[class] a,
.BtnCommon.large div[class] input {
    padding-left: 45px;
    padding-right: 20px;
}

.BtnCommon.large div[class] span:before {
    left: 20px;
}

.BtnCommon.mid div[class] span:before {
    left: 20px;
}

.articleComment .BtnCommon.mid div[class] a,
.articleComment .BtnCommon.mid div[class] input {
    padding-left: 35px;
    padding-right: 10px;
}

.articleComment .BtnCommon.mid div[class] span:before {
    left: 10px;
}

/*----------------------------------------------------------------------*/
/* 表單 */
.FormTable > tbody > tr > th,
.FormTable > tbody > tr > td {
    vertical-align: top;
}

.FormTable > tbody > tr > th {
    width: 125px;
    padding: 15px 15px 15px 0;
    text-align: right;
}

.FormTable > tbody > tr > th:empty::after {
    display: none;
}

.FormTable > tbody > tr > td {
    padding: 10px 0 4px;
}

.FormTable.lectureForm > tbody > tr > th {
    padding: 18px 15px 18px 0;
}

.FormTable.lectureForm > tbody > tr > td {
    padding: 14px 15px 7px 0;
}

/* 表單元件 */
.FormElmt .input_group > div {
    display: inline-block;
    white-space: nowrap;
    margin-right: 12px;
}

.FormElmt input + input,
.FormElmt input + select,
.FormElmt select + input,
.FormElmt select + select {
    margin-left: 4px;
}

.input_table li {
    width: 33.33%;
}

/*----------------------------------------------------------------------*/
/* 文字列表 */
.ListTable,
.ListTable tbody,
.ListTable tr,
.ListTable th,
.ListTable td {
    display: block;
}

.ListTable {
    margin: 10px 60px;
    background: none;
}

.ListTable tr:nth-child(odd) {
    /*background: #fff;*/
}

.ListTable tr:first-child {
    position: absolute;
    left: -10000px;
    top: -10000px;
}

.ListTable tr {
    margin-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
    padding: 5px 0;
    /*background: #fff;*/
    text-align: left;
}

.ListTable tr td {
    margin: 10px;
    padding: 0;
}

.ListTable tr td:before {
    font-weight: bold;
    content: attr(data-th)"：";
    /*font-family: "Microsoft JhengHei", "微軟正黑體", "Microsoft YaHei", "微软雅黑";*/
}

.ListTable td.no:before,
.ListTable td.title:before,
.ListTable td.date:before,
.ListTable td.btn:before,
.ListTable td.edit:before,
.ListTable td.kind:before {
    content: "";
}

.ListTable td.no {
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #555;
    background: #f9dca3;
    text-shadow: 1px 1px 1px #fff;
    position: absolute;
    left: 5px;
    top: 10px;
    margin: 0;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.ListTable td.title {
    font-size: 1.25em;
}

.ListTable td.date {
    color: #888;
    font-size: 0.9375em;
    line-height: 100%;
}

.ListTable td.btn {
    text-align: right;
}

.ListTable td.btn input {
    padding: 8px 14px;
}

.ListTable td.edit {
    padding: 3px 0;
}

.ListTable td.kind {
    background: #746c4f;
    color: #fff;
    display: inline-block;
    padding: 2px 8px;
    margin: 2px 10px 0;
    font-size: 0.875em;
}

.table_st1 {
    border-top: 1px dashed #d1d1d1;
}

.table_st1 tr {
    border-bottom: 1px dashed #d1d1d1;
}

.table_st2 {
    border-top: 1px solid #c2c2c2;
}

.table_st2 tr {
    border-bottom: 1px solid #c2c2c2;
}

/*----------------------------------------------------------------------*/
/* 內頁-成功案例-列表樣式 */
.list_st1.list .item {
    width: 48.75%;
    margin-left: 2.5%;
    padding: 0 0 15px 0;
}

.list_st1.list .item:nth-child(2n+1) {
    margin-left: 0px;
}

.list_st1.list .item .cont {
    padding-top: 5px;
}

.list_st1.list .item .cont .desc {
    color: #2e2e2e;
    font-size: 14px;
}

.list_st1.list .item .cont .title a {
    white-space: nowrap;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ff4c11;
}

.list_st1.list .item .cont .btn {
    padding-top: 15px;
}

/*----------------------------------------------------------------------*/
/* 列表樣式_無效果 */
.list_st2.list .item {
    width: 48.75%;
    margin-left: 2.5%;
    padding: 0 0 15px 0;
}

.list_st2.list .item:nth-child(2n+1) {
    margin-left: 0px;
}

.list_st2.list .item .cont .title a {
    line-height: 30px;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list_st2.list .item .cont .btn {
    padding: 0px;
}

/*----------------------------------------------------------------------*/
/* 提醒視窗 */
.alert_box > div {
    max-height: 90%;
    margin: 20px;
}

.alert_box .close {
    position: fixed;
    top: 25px;
    right: 25px;
}

.location_indo > div {
    display: table-cell;
    vertical-align: middle;
}

.location_indo .left {
    padding-right: 15px;
}

.location_indo .right {
    padding-left: 15px;
}

/*----------------------------------------------------------------------*/
/* 登入 */
.LoginBox .colm_left {
    float: left;
    width: 50%;
    padding-right: 20px;
    border-right: 1px solid #e5e5e5;
    box-sizing: border-box;
}

.LoginBox .colm_right {
    float: right;
    width: 50%;
    padding-left: 20px;
    box-sizing: border-box;
}

/*----------------------------------------------------------------------*/
/* 熱門講座_列表 */
.lectureIngList.list .item {
    width: 48%;
    margin-left: 0;
    margin-right: 0;
}

.lectureIngList.list .item:nth-child(2n) {
    margin-left: 4%;
}

.lectureIngList .item .textBox .desc {
    padding: 10px 0px 15px;
}

.lectureIngList .item .textBox .desc .tl {
    position: relative;
}

.lectureIngList .item .textBox .desc li {
    padding-left: 0px;
    padding-bottom: 10px;
}

/*----------------------------------------------------------------------*/
/* 投票 */
.vote_list {
    margin: 0.625em 0.625em 0;
}

.voteBox_R {
    padding: 0.625em 0.625em 0;
}

/*----------------------------------------------------------------------*/
/* 典藏文物 */
@media screen and (min-width:

    /*768*/
    1000px) {
    .proBox .imgBox {
        /*float:left;*/
        width: 100%;
        margin: 0 auto;
    }

    .proBox .textBox {
        /*float:right;*/
        width: 100%;
        margin: 0 auto;
    }
}

@media screen and (max-width:

    /*767*/
    799px) {
    .proBox .imgBox {
        width: 100%;
        margin: 0 auto;
    }

    .proBox .textBox {
        /*float:right;*/
        width: 100%;
        margin: 0 auto;
    }
}

/* 禮品 */
.memBox .back {
    display: none;
}

.memBox .proBox .textBox {
    padding-right: 20px;
    padding-top: 20px;
}

.pro_arrow {
    position: absolute;
    top: 50%;
    margin-top: -20px;
}

/*----------------------------------------------------------------------*/
/* 季刊列表 */
.MgzList .item {
    width: 31.3333%;
    margin-left: 3%;
}

.MgzList .item:nth-child(3n+1) {
    margin-left: 0;
}

.MgzList .item .periods {
    font-size: 2.375em;
    bottom: -4px;
}

@media screen and (max-width: 767px) {
    .MgzList .item {
        padding-bottom: 40px;
    }

    .MgzList .item .periods {
        font-size: 1.625em;
        bottom: -3px;
    }
}

/*----------------------------------------------------------------------*/
/* 大事記 */
.MemorabiliaListWrap {
    padding-top: 72px;
    padding-bottom: 80px;
}

.MemorabiliaList .row {
    margin-top: 80px;
}

.MemorabiliaList .year {
    width: 100%;
}

.MemorabiliaList .year > div {
    width: 200px;
    margin: 0 auto;
}

@media screen and (max-width: 719px) {
    .MemorabiliaList .item {
        max-width: 500px;
        margin: 60px auto 0;
    }

    .MemorabiliaList .img .tag {
        width: 100%;
        margin-top: -15px;
        text-align: center;
    }

    .MemorabiliaList .img .tag span {
        display: inline-block;
        padding: 0 20px;
        line-height: 30px;
    }

    .MemorabiliaList .item.domestic .img .tag span {
        background-color: #c0991f;
    }

    .MemorabiliaList .item.oversea .img .tag span {
        background-color: #746c4f;
    }

    .MemorabiliaList .img .tag span::before,
    .MemorabiliaList .item .img .tag span::after {
        display: inline-block;
        transform: rotate(-70deg);
        vertical-align: middle;
    }

    .MemorabiliaList .img .tag span::before {
        margin-right: 5px;
    }

    .MemorabiliaList .img .tag span::after {
        margin-left: 5px;
    }
}

@media screen and (min-width: 720px) {
    .MemorabiliaList .year {
        margin-bottom: 40px;
        z-index: 99;
    }

    .MemorabiliaList .item {
        position: relative;
    }

    .MemorabiliaList .item::before {
        content: '';
        display: block;
        position: absolute;
        bottom: 100%;
        left: 50%;
        width: 1px;
        height: 68px;
    }

    .MemorabiliaList .item.domestic::before {
        background-color: #c0991f;
    }

    .MemorabiliaList .item.oversea::before {
        background-color: #746c4f;
    }

    .MemorabiliaList .item::after {
        content: '';
        display: block;
        position: absolute;
        top: -68px;
        width: 200px;
        height: 1px;
    }

    .MemorabiliaList .item.domestic::after {
        left: 50%;
        background-color: #c0991f;
    }

    .MemorabiliaList .item.oversea::after {
        right: 50%;
        background-color: #746c4f;
    }

    .MemorabiliaList .img .tag {
        width: 30px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        -ms-display: flex;
        -ms-align-items: center;
        -ms-justify-content: center;
    }

    .MemorabiliaList .item.domestic .img .tag {
        left: 100%;
        background-color: #c0991f;
    }

    .MemorabiliaList .item.oversea .img .tag {
        right: 100%;
        background-color: #746c4f;
    }

    .MemorabiliaList .img .tag span::before,
    .MemorabiliaList .item .img .tag span::after {
        display: block;
        position: absolute;
        left: 50%;
        margin-left: -8px;
        transform: rotate(-20deg);
    }

    .MemorabiliaList .img .tag span::before {
        top: -10px;
    }

    .MemorabiliaList .img .tag span::after {
        bottom: -10px;
    }
}

@media screen and (min-width: 720px) and (max-width: 799px) {
    .MemorabiliaList .item {
        width: 42%;
    }

    .MemorabiliaList .cont {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media screen and (min-width: 800px) {
    .MemorabiliaList .item {
        width: 40%;
    }
}
