@charset "utf-8";
/* CSS Document */

/*----------------------------------------------------------------------*/
/* 內頁 */

#Center {
    position: relative;
}

#Center>div {
    display: flex;
}


#Center.cont_wide>div {
    display: block;
}

@media screen and (min-width: 1440px) {
    #Center {
        padding: 0 12.5vw;
    }
}

@media screen and (max-width: 1439px) and (min-width: 1024px) {
    #Center {
        padding: 0 8vw;
    }
}

@media screen and (min-width: 1024px) {
    #Center {
        margin-top: 50px;
        margin-bottom: 80px;
    }
}

@media screen and (max-width: 1023px) {
    #Center {
        margin-top: 80px;
        margin-bottom: 50px;
    }
}

@media screen and (max-width: 1023px) and (min-width: 960px) {
    #Center {
        padding: 0 100px;
    }
}

@media screen and (max-width: 959px) {
    #Center {
        padding: 0 30px;
    }
}

/*----------------------------------------------------------------------*/
/* 左選單 */


@media screen and (min-width:1024px) {
    #ColumnLeft {
        width: calc(100% - 75% - 40px);
        margin-right: 40px;
        min-width: 230px;
    }

}

@media screen and (max-width:1023px) {
    #ColumnLeft {
        display: none;
    }

}

#LeftMenu {
    background-color: #fff;
    padding-bottom: 50px;
    border-radius: 10px;
    position: relative;
}

#LeftMenu::after {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    top: -1px;
    left: 0;
    border: 1px solid #152632;
    border-radius: 10px;
}

#LeftMenu .title span {
    display: block;
    padding: 15px 10px;
    color: #fff;
    text-align: center;
    border-radius: 10px 10px 0 0;
    background-color: var(--style1-blue-dark);
}

@media screen and (min-width:1024px) {
    #LeftMenu .title span {
        font-size: 1.25rem;
    }
}


#LeftMenu .menu_list {
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

#LeftMenu .menu_list a {
    display: block;
    padding: 10px 0;
}

#LeftMenu .menu_list a:hover,
#LeftMenu .menu_list a:focus,
#LeftMenu .menu_list li.selected>a {
    color: var(--style1-blue-dark);
}

#LeftMenu .menu_list>li {
    border-bottom: 1px solid #d6d6d6;
}

#LeftMenu .menu_list>li>a {
    line-height: 150%;
    font-size: 1.125rem;

}

#LeftMenu .menu_list ul {
    padding-bottom: 10px;
}

#LeftMenu .menu_list>li>ul {
    padding-left: 1.5em;
}

#LeftMenu .menu_list ul ul {
    padding-left: 2em;
}

#LeftMenu .menu_list ul a {
    color: #999999;
    font-size: 1rem;
}


/*----------------------------------------------------------------------*/


/*----------------------------------------------------------------------*/
/* 右選單 */

@media screen and (min-width: 1024px) {
    #ColumnCenter {
        width: 75%;
    }
}

@media screen and (max-width: 1023px) {
    #ColumnCenter {
        width:100%;
    }
}

#Center.cont_wide #ColumnCenter{
    width:100%;

}

/* 內頁元素 */
/* 內頁標題 */


#CenterHeader {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    vertical-align: middle;
    justify-content: space-between;
}

#Center.cont_wide #CenterHeader {
    margin-top: 20px ;
    flex-direction: column;
}

@media screen and (min-width: 1024px) {
    #CenterHeader {
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 1023px) {
    #CenterHeader {
        margin-top: 20px ;
        flex-direction: column;
    }
}


#CenterHeader .PageTitle {
    position: relative;
}

#Center.cont_wide #CenterHeader .PageTitle {
    margin-right:0px ;
}

@media screen and (min-width: 1024px) {
    #CenterHeader .PageTitle {
        margin-bottom: 15px;
        margin-right: 20px;
    }

}


#CenterHeader .PageTitle::after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 2px;
    background-color: var(--style1-blue-dark);
}


@media screen and (min-width: 1024px) {

    #CenterHeader .PageTitle::after {
        width:4px;
        height: 50%;
        left:0;
        bottom: 25%;
    }
}

@media screen and (max-width: 1023px) {

    #CenterHeader .PageTitle::after {
        width:50%;
        height: 4px;
        left:25%;
        bottom: 0;
    }
}

#Center.cont_wide .PageTitle::after {

    width:50%;
        height: 4px;
        left:25%;
        bottom: 0;
}


#CenterHeader .PageTitle h2 {
    position: relative;
    display: inline-block;
    color: var(--style1-blue-dark);
    font-weight: 700;
}

#Center.cont_wide #CenterHeader .PageTitle h2 {
    padding-left: 0;
}

@media screen and (min-width: 1024px) {

    #CenterHeader .PageTitle h2 {
        padding-left: 15px;
        line-height: 2em;
    }
}

@media screen and (max-width: 1023px) {

    #CenterHeader .PageTitle h2 {
        padding-bottom: 15px;
        line-height: 1.2em;
    }
}


@media screen and (min-width: 630px) {
    #CenterHeader .PageTitle h2 {
        font-size: 1.875rem;
    }
}

@media screen and (max-width: 629px) {
    #CenterHeader .PageTitle h2 {
        font-size: 1.7rem;
    }
}

#CenterHeader .PageTitle h2::after,
#CenterHeader .PageTitle h2::before {
    content: "";
    position: absolute;
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--style1-blue--);
}

#Center.cont_wide #CenterHeader .PageTitle h2::after {
    left:0;
    bottom:0;
    top:unset;
}

#Center.cont_wide #CenterHeader .PageTitle h2::before {
    right: 0;
    bottom:0;
    left:unset;
}


@media screen and (min-width: 1024px) {

    #CenterHeader .PageTitle h2::after {
        top:0;
        left:0;
    }

    #CenterHeader .PageTitle h2::before {
        bottom:0;
        left:0;
    }

}

@media screen and (max-width: 1023px) {

    #CenterHeader .PageTitle h2::after {
        left:0;
        bottom:0;
    }

    #CenterHeader .PageTitle h2::before {
        right: 0;
        bottom:0;
    }

}



/* 導覽列(麵包屑) */

#Breadcrumbs {
    position: relative;
}

@media screen and (min-width: 1024px) {
    #Breadcrumbs {
        margin-bottom: 15px;
    }
}


@media screen and (max-width: 1023px) {

    #Breadcrumbs {
        margin: 10px 0 20px 0;
    }
}


#Breadcrumbs ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#Breadcrumbs li {
    padding-right: 10px;
    margin-right: 6px;
    position: relative;
    font-size: 0.875rem;
    padding-top: 5px;
    padding-bottom: 5px;
}


#Breadcrumbs li:last-child {
    padding-right: 0;
    margin-right: 0;
}

#Breadcrumbs li:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 4px;
    height: 1px;
    background-color: #999999;
}

#Breadcrumbs li:last-child:after {
    display: none;
}

#Breadcrumbs a {
    display: inline-block;
    font-size: 0.875rem;
    line-height: 1.2em;
}

#Breadcrumbs li:not(:last-child) a {
    color: #999999;
}

#Breadcrumbs li:not(:last-child) a:hover,
#Breadcrumbs li:not(:last-child) a:focus,
#Breadcrumbs a:hover,
#Breadcrumbs a:focus {
    color: var(--style1-blue-dark);
}

/* 工具列 */

.ToolBar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: 2px solid #152632;
    position: relative;
    font-size: 0.875rem;
    margin-bottom: 30px;
}

@media screen and (min-width: 1024px) {
    .ToolBar {
        padding-bottom: 10px;
    }
}


@media screen and (max-width: 629px) {
    .ToolBar {
        margin-top: 10px;
    }

    .ToolBar>div {
        width: 100%;
    }
}

.ToolBar .colm_left,
.ToolBar .colm_right,
.ToolBar dl.font_size,
.ToolBar dl.share {
    display: flex;
    flex-wrap: wrap;
}

.ToolBar .colm_left a,
.ToolBar dl.font_size dd,
.ToolBar dl.share dd {
    margin-bottom: 10px;
}

.ToolBar .colm_left a {
    margin-right: 10px;
    padding: 0 12px 0 35px;
}


.ToolBar .colm_left a,
.ToolBar dl.font_size a,
.ToolBar dl.share a {
    background-color: #fff;
    border: 1px solid #152632;
    display: block;
    text-decoration: none;
    position: relative;
}

.ToolBar .colm_left a:hover,
.ToolBar dl.font_size a:hover,
.ToolBar dl.share a:hover,
.ToolBar .colm_left a:focus,
.ToolBar dl.font_size a:focus,
.ToolBar dl.share a:focus {
    color: #fff;
    background-color: #152632;
}

.ToolBar .colm_left a span::after,
.ToolBar dl.font_size a::after {
    content: "";
    display: block;
    position: absolute;
    background: url("../images/toolbar-icon.png") no-repeat;
    background-size: 200%;
}

.ToolBar dl{
    margin-right: 15px;
}

.ToolBar dl:last-child{
    margin-right: 0;
}

.ToolBar dl.share a::after {
    content: "";
    display: block;
    position: absolute;
    background: url("../images/share-icon.png") no-repeat;
    background-size: 200%;
}


.ToolBar .colm_left a span {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease;
}

@media screen and (min-width: 1024px) {

    .ToolBar .colm_left a span::after,
    .ToolBar dl.font_size a::after {
        width: 18px;
        height: 18px;
        top: calc(50% - 9px);
        left: calc(50% - 9px);
    }

    .ToolBar dl.share a::after {
        width: 22px;
        height: 22px;
        top: calc(50% - 11px);
        left: calc(50% - 11px);
    }

    .ToolBar .colm_left a,
    .ToolBar dl.font_size a,
    .ToolBar dl.share a {
        border-radius: 20px;
        line-height: 38px;
    }

    .ToolBar .colm_left a span,
    .ToolBar dl.font_size a,
    .ToolBar dl.share a {
        width: 40px;
        height: 40px;
    }

    .ToolBar dl.font_size,
    .ToolBar dl.share {
        line-height: 40px;
    }
}

.ToolBar .colm_left a.return span::after {
    background-position: 0 20%;
}

.ToolBar .colm_left a.return:hover span::after,
.ToolBar .colm_left a.return:focus span::after {
    background-position: right 20%;
}

.ToolBar .colm_left a.rss span::after {
    background-position: 0 40%;
}

.ToolBar .colm_left a.rss:hover span::after,
.ToolBar .colm_left a.rss:focus span::after {
    background-position: right 40%;
}

.ToolBar .colm_left a.print span::after {
    background-position: 0 0;
}

.ToolBar .colm_left a.print:hover span::after,
.ToolBar .colm_left a.print:focus span::after {
    background-position: right 0;
}

/* .ToolBar dl.font_size {
    margin-left: 15px;
} */

.ToolBar dl.font_size dd,
.ToolBar dl.share dd {
    margin-right: 8px;
}

.ToolBar dl.font_size dd:last-of-type,
.ToolBar dl.share dd:last-of-type {
    margin-right: 0;
}

.ToolBar dl.font_size a,
.ToolBar dl.share a {
    text-indent: -999px;
    overflow: hidden;
}

.ToolBar dl.font_size dd.font_small a::after {
    background-position: 0 100%;
}

.ToolBar dl.font_size dd.font_medium a::after {
    background-position: 0 80%;
}

.ToolBar dl.font_size dd.font_big a::after {
    background-position: 0 60%;
}

.ToolBar dl.font_size dd.font_small a:hover::after,
.ToolBar dl.font_size dd.font_small a:focus::after {
    background-position: right 100%;
}

.ToolBar dl.font_size dd.font_medium a:hover::after,
.ToolBar dl.font_size dd.font_medium a:focus::after {
    background-position: right 80%;
}

.ToolBar dl.font_size dd.font_big a:hover::after,
.ToolBar dl.font_size dd.font_big a:focus::after {
    background-position: right 60%;
}

.ToolBar dl.share dd.facebook a::after {
    background-position: 0 0;
}


.ToolBar dl.share dd.facebook a:hover::after,
.ToolBar dl.share dd.facebook a:focus::after {
    background-position: right 0;
}

.ToolBar dl.share dd.twitter a::after {
    background-position: 0 50%;
}


.ToolBar dl.share dd.twitter a:hover::after,
.ToolBar dl.share dd.twitter a:focus::after {
    background-position: right 50%;
}

.ToolBar dl.share dd.line a::after {
    background-position: 0 100%;
}

.ToolBar dl.share dd.line a:hover::after,
.ToolBar dl.share dd.line a:focus::after {
    background-position: right 100%;
}

@media screen and (max-width: 1023px) {

    .ToolBar .colm_left a span::after,
    .ToolBar dl.font_size a::after,
    .ToolBar dl.share a::after {
        width: 20px;
        height: 20px;
        top: calc(50% - 10px);
        left: calc(50% - 10px);
    }

    .ToolBar .colm_left a,
    .ToolBar dl.font_size a,
    .ToolBar dl.share a {
        border-radius: 23px;
    }

    .ToolBar .colm_left a span,
    .ToolBar dl.font_size a,
    .ToolBar dl.share a {
        width: 40px;
        height: 40px;
    }

    .ToolBar dl.font_size,
    .ToolBar dl.share {
        line-height: 42px;
        justify-content: flex-end;
    }

    .ToolBar .colm_left a,
    .ToolBar dl.font_size a,
    .ToolBar dl.share a {
        line-height: 43px;
    }
}

@media screen and (max-width: 630px) {

    .ToolBar dl.font_size,
    .ToolBar dl.share {
        line-height: 40px;
        justify-content: flex-start;
    }
}

@media screen and (max-width: 468px) {
    .ToolBar .colm_left {
        width: 100%;
    }

    .ToolBar .colm_right {
        width: 100%;
    }
}


/* 列表搜尋 */



.ListSearch {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 30px;
    background-color: #f8f8fd;
    padding: 20px;
}

.ListSearch .title {
    display: none;
}

.ListSearch .item {
    max-width: 100%;
    margin-bottom: 10px;
    margin-right: 20px;
}

.ListSearch .item .label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding-bottom: 5px;
}

@media screen and (max-width: 959px) {
    .ListSearch {
        padding: 12px 15px 12px 15px;
    }

    .ListSearch .item {
        margin-right: 10px;
    }

}

@media screen and (min-width: 960px) {
    .ListSearch .item input[type="text"] {
        width: 200px;
    }
}

@media screen and (max-width: 959px) {
    .ListSearch .item input[type="text"] {
        width: 150px;
        padding: 0 10px;
        font-size: 0.875rem;
    }
}

/*列表按鈕*/

.ListSearch .btn {
    margin-bottom: 10px;
}

.ListSearch .btn button {
    padding-left: 15px;
    padding-right: 35px;
    border-radius: 5px;
    line-height: 46px;
    margin-bottom: 5px;
    background-color: #152632;
    position: relative;
    transition: all 0.3s ease;
    color: #fff;
}

.ListSearch .btn button::before {
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    top: calc(50% - 12px);
    right: 10px;
    background: url("../images/search-icon.png") no-repeat 0 100%;
    background-size: 200%;
}

.ListSearch .btn button:hover {
    background-color: var(--style1-blue--);
}

/*----------------------------------------------------------------------*/

/* 單篇 */
h3.articleTitle {
    font-size: 1.75rem;
    margin-bottom: 10px;
    position: relative;
}

h3.articleTitle span {
    display: block;
    padding-bottom: 10px;
    color: var(--style1-blue--);
    line-height: 1.3em;
}

.post_info {
    margin-top: 40px;
}

.post_info span {
    display: inline-block;
    border-right: 1px solid #cccccc;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 14px;
    margin-right: 12px;
    line-height: 125%;
    color: #152632;
    font-size: 0.875rem;
}

.post_info span:last-child {
    border-right: 0;
    padding-right: 0;
    margin-right: 0;
}

.post_info.below {
    margin-top: 0;
    text-align: right;
}

.post_info span[class]::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    margin-bottom: 0.25em;
    vertical-align: middle;
    background-image: url("../images/icon_post_info.png");
    background-repeat: no-repeat;
    background-size: 100%;
}

.post_info .date::before {
    background-position: 0 0;
}

.post_info .unit::before {
    background-position: 0 100%;
}

.post_info+.editable_content {
    margin-top: 0;
}

h3.articleTitle+.post_info {
    margin-top: -10px;
}

.post_info+.post_info {
    margin-top: 0;
}

h3.title {
    margin: 15px 0 5px;
    font-size: 1.5rem;
    color: #1368a8;
}

.editable_content.content {
    margin-top: 40px;
    margin-bottom: 40px;
}

/*----------------------------------------------------------------------*/
/* 圖文列表 */
.ListPicText {
    margin-top: 30px;
}

.editable_content+.ListPicText {
    margin-top: 0;
}


.ListPicText>div {
    display: flex;
    flex-wrap: wrap;
}

.ListPicText .item {
    flex: 0 1 auto;
}


.ListPicText .item>a {
    height: 100%;
    position: relative;
}

.ListPicText .item>a::after {
    content: '';
    display: block;
    clear: both;
}

.ListPicText .item .imgBox {
    overflow: hidden;
    position: relative;
    border: 1px solid var(--dfborder);
    border-radius: 10px;
}

.ListPicText .item .imgBox .img {
    padding-bottom: 75%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: all .3s ease;
}

.ListPicText .item>a:hover .imgBox .img {
    transform: scale(1.05);
}


.ListPicText .item .cont {
    position: relative;
    border: 1px solid var(--dfborder);
    border-radius: 10px;
    margin-top: -1px;
    background-color: #ebebf8;
    transition: all .3s ease;
}

.ListPicText .item a:hover .cont {
    background-color: #ffffff;
}


.ListPicText .item .cont .date {
    color: #fff;
    font-weight: 500;
    background-color: var(--style1-blue--);
    border-radius: 5px;
    display: inline-block;
}


@media screen and (min-width:1440px) {
    .ListPicText .item .cont .date {
        font-size: 0.875rem;
    }
}

@media screen and (max-width:1439px) {
    .ListPicText .item .cont .date {
        font-size: 0.75rem;
    }
}


.ListPicText .item .cont .title {
    letter-spacing: .1em;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    white-space: normal;
    color: #152632;
    font-weight: 500;
}

.ListPicText .item a:hover .cont .title {
    color: var(--style1-blue-dark);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--style1-blue--);
    text-underline-offset: 0.3rem;
}

@media screen and (min-width:1440px) {
    .ListPicText .item .cont .title {
        -webkit-line-clamp: 3;
        height: 85px;
        font-size: 1.25rem;
        line-height: 1.4em;
        margin-bottom: 10px;
    }
}

@media screen and (max-width:1439px) {
    .ListPicText .item .cont .title {
        -webkit-line-clamp: 2;
        font-size: 1.125rem;
    }
}

@media screen and (max-width:1439px) and (min-width:630px) {
    .ListPicText .item .cont .title {
        line-height: 1.3em;
        margin-bottom: 5px;
        height: 2.7em;

    }
}

@media screen and (max-width:629px) {
    .ListPicText .item .cont .title {
        line-height: 1.5em;
        margin-bottom: 10px;
        height: 3em;
    }
}


.ListPicText .item .cont .detail p {
    color: #565e64;
    line-height: 1.7em;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    white-space: normal;
}



.ListPicText+#Pagination {
    margin-top: 20px;
}

/* list-view */
/* list-view只在640px以上有作用，639px以下一律以圖上文下顯示 */
@media screen and (min-width: 640px) {
    .ListPicText.list-view .item {
        margin-bottom: 60px;
    }

    .ListPicText.list-view .imgBox {
        float: left;
        width: 360px;
        max-width: 48%;
        margin-bottom: 10px;
    }

    .ListPicText.single.list-view.staggered .item:nth-child(2n+2) .imgBox {
        float: right;
    }

    .ListPicText.list-view .date {
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px;
    }




}

/* grid-view */
/* grid-view只在640px以上有作用，639px以下一律以圖上文下顯示 */
@media screen and (max-width:1023px) {
    .ListPicText .item .cont .date {
        position: absolute;
        top: -12px;
        padding: 5px 10px;
    }

}

@media screen and (min-width: 640px) {

    .ListPicText.grid-view .cont {
        padding-top: 25px;
        padding-bottom: 10px;
    }
}

@media screen and (min-width: 1024px) {
    .ListPicText.grid-view .item {
        margin-bottom: 5.2vw;
    }

    .ListPicText .item .cont .date {
        position: absolute;
        top: -12px;
        padding: 5px 5px;
    }
}

@media screen and (min-width: 640px) and (max-width: 1023px) {
    .ListPicText.grid-view .item {
        margin-bottom: 60px;
    }

}

/* 單欄(1024px以上) */
@media screen and (min-width: 1024px) {
    .ListPicText.single .item {
        width: 100%;
    }
}

/* list-view */


@media screen and (min-width: 640px) {

    .ListPicText.list-view.list-view .cont {
        background-color: transparent;
        border: none;
    }

    .ListPicText.list-view.list-view .item>a:hover .cont {
        background-color: transparent;
    }

    .ListPicText.list-view.single .item .cont .date,
    .ListPicText.list-view.bisection .item .cont .date,
    .ListPicText.list-view.trisection .item .cont .date,
    .ListPicText.list-view.quarters .item .cont .date {
        position: relative;
        top: 0;
        left: 0;
        margin-left: 0;
        margin-bottom: 10px;
    }

}

@media screen and (min-width: 1024px) {
    .ListPicText.single.list-view .imgBox {
        max-width: 36%;
        margin-right: 20px;
    }

    .ListPicText.single.list-view.staggered .item:nth-child(2n+2) .imgBox {
        margin-right: 0;
        margin-left: 20px;
    }

    .ListPicText.single.list-view .title {
        font-size: 1.25rem;
        height: 2.7em;
        -webkit-line-clamp: 2;
    }

    .ListPicText.single.list-view .detail p {
        font-size: 1rem;
        height: 8.2em;
        -webkit-line-clamp: 5;
    }
}

/* grid-view */
@media screen and (min-width: 1024px) {
    .ListPicText.single.grid-view .cont {
        padding-left: 15px;
        padding-right: 15px;
    }

    .ListPicText.single.grid-view .title {
        font-size: 1.25rem;
        height: 1.4em;
        -webkit-line-clamp: 1;
    }

    .ListPicText.single.grid-view .detail p {
        font-size: 1rem;
        max-height: 3.5em;
        -webkit-line-clamp: 2;
    }
}

/* 兩欄(1024px以上) */
@media screen and (min-width: 1024px) {
    .ListPicText.bisection .item {
        width: 50%;
    }


}

/* list-view */
@media screen and (min-width: 1024px) {
    .ListPicText.bisection.list-view .imgBox {
        margin-right: 15px;
    }

    /* .ListPicText.bisection.list-view .item .date {
        display: flex;
    } */
}


@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .ListPicText.bisection.list-view>div {
        margin-left: -10px;
        margin-right: -10px;
    }

    .ListPicText.bisection.list-view .item {
        padding-left: 10px;
        padding-right: 10px;
    }

    .ListPicText.bisection.list-view .title {
        font-size: 1.25rem;
        height: 4em;
        -webkit-line-clamp: 3;
    }

    .ListPicText.bisection.list-view .detail p {
        font-size: 1rem;
        height: 8.75em;
        -webkit-line-clamp: 5;
    }
}

@media screen and (min-width: 1280px) {
    .ListPicText.bisection.list-view>div {
        margin-left: -20px;
        margin-right: -20px;
    }

    .ListPicText.bisection.list-view .item {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ListPicText.bisection.list-view .title {
        font-size: 1.25rem;
        height: 2.7em;
        -webkit-line-clamp: 2;
    }

    .ListPicText.bisection.list-view .detail p {
        font-size: 1rem;
        height: 7em;
        -webkit-line-clamp: 4;
    }
}

/* grid-view */
@media screen and (min-width: 1024px) and (max-width: 1599px) {
    .ListPicText.bisection.grid-view>div {
        margin-left: -2.25vw;
        margin-right: -2.25vw;
    }

    .ListPicText.bisection.grid-view .item {
        padding-left: 2.25vw;
        padding-right: 2.25vw;
    }
}

@media screen and (min-width: 1600px) {
    .ListPicText.bisection.grid-view>div {
        margin-left: -40px;
        margin-right: -40px;
    }

    .ListPicText.bisection.grid-view .item {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .ListPicText.bisection.grid-view .cont {
        padding-left: 10px;
        padding-right: 10px;
    }

    .ListPicText.bisection.grid-view .title {
        font-size: 1.25rem;
        height: 2.7em;
        -webkit-line-clamp: 2;
    }

    .ListPicText.bisection.grid-view .detail p {
        font-size: 1rem;
        height: 7em;
        -webkit-line-clamp: 4;
    }
}

@media screen and (min-width: 1280px) {
    .ListPicText.bisection.grid-view .cont {
        padding-left: 15px;
        padding-right: 15px;
    }

    .ListPicText.bisection.grid-view .title {
        font-size: 1.25rem;
        -webkit-line-clamp: 2;
        height: 54px;
    }


    .ListPicText.bisection.grid-view .detail p {
        font-size: 1rem;
        height: 5.25em;
        -webkit-line-clamp: 3;
    }
}

/* 三欄(1024px以上) */
@media screen and (min-width: 1024px) {
    .ListPicText.trisection .item {
        width: 33.3333%;
    }

    .ListPicText.trisection.list-view .item .date {
        display: flex;
    }

}



/* list-view */
@media screen and (min-width: 1024px) {
    .ListPicText.trisection.list-view .imgBox {
        margin-right: 15px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1499px) {
    .ListPicText.trisection.list-view>div {
        margin-left: -10px;
        margin-right: -10px;
    }

    .ListPicText.trisection.list-view .item {
        padding-left: 10px;
        padding-right: 10px;
    }

    .ListPicText.trisection.list-view .title {
        font-size: 1.125rem;
        height: 4em;
        -webkit-line-clamp: 3;
    }

    .ListPicText.trisection.list-view .detail p {
        clear: both;
        font-size: 0.9375rem;
        height: 7em;
    }
}

@media screen and (min-width: 1500px) {
    .ListPicText.trisection.list-view>div {
        margin-left: -20px;
        margin-right: -20px;
    }

    .ListPicText.trisection.list-view .item {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ListPicText.trisection.list-view .title {
        font-size: 1.125rem;
        height: 5.6em;
        -webkit-line-clamp: 4;
    }

    .ListPicText.trisection.list-view .detail p {
        font-size: 0.9375rem;
        height: 8.75em;
        -webkit-line-clamp: 5
    }
}

/* grid-view */

@media screen and (min-width: 1024px) and (max-width: 1599px) {
    .ListPicText.trisection.grid-view>div {
        margin-left: -2.25vw;
        margin-right: -2.25vw;
    }

    .ListPicText.trisection.grid-view .item {
        padding-left: 2.25vw;
        padding-right: 2.25vw;
    }
}

@media screen and (min-width: 1600px) {
    .ListPicText.trisection.grid-view>div {
        margin-left: -40px;
        margin-right: -40px;
    }

    .ListPicText.trisection.grid-view .item {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .ListPicText.trisection.grid-view .cont {
        padding-left: 10px;
        padding-right: 10px;
    }

    .ListPicText.trisection.grid-view .title {
        font-size: 1.25rem;
        height: 2.7em;
        -webkit-line-clamp: 2;
    }

    .ListPicText.trisection.grid-view .detail p {
        font-size: 1rem;
        height: 8.75em;
        -webkit-line-clamp: 5;
    }
}

@media screen and (min-width: 1280px) {
    .ListPicText.trisection.grid-view .cont {
        padding-left: 15px;
        padding-right: 15px;
    }

    .ListPicText.trisection.grid-view .title a {
        font-size: 1.25rem;
        height: 3.2em;
        -webkit-line-clamp: 2;
    }

    .ListPicText.trisection.grid-view .detail p {
        font-size: 1rem;
    }
}

@media screen and (min-width: 1280px) and (max-width: 1599px) {
    .ListPicText.trisection.grid-view .detail p {
        height: 7em;
        -webkit-line-clamp: 4;
    }
}

@media screen and (min-width: 1600px) {
    .ListPicText.trisection.grid-view .detail p {
        height: 5.25em;
        -webkit-line-clamp: 3;
    }
}

/* 四欄(1024px以上) */
@media screen and (min-width: 1024px) {
    .ListPicText.quarters .item {
        width: 25%;
    }

    .ListPicText.quarters.list-view .item .date {
        display: flex;
        font-size: 0.75rem;
    }

}

/* list-view */
@media screen and (min-width:1440px) {
    .ListPicText.quarters.list-view .title {
        height: 5.6em;
        -webkit-line-clamp: 4;
    }
}

@media screen and (min-width:1024px) {
    .ListPicText.quarters.list-view .title {
        height: 5.25em;
        -webkit-line-clamp: 4;
    }
}

@media screen and (min-width: 1024px) {
    .ListPicText.quarters.list-view .imgBox {
        margin-right: 10px;
    }

    .ListPicText.quarters.list-view>div {
        margin-left: -10px;
        margin-right: -10px;
    }

    .ListPicText.quarters.list-view .item {
        padding-left: 10px;
        padding-right: 10px;
    }


    .ListPicText.quarters.list-view .detail p {
        clear: both;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .ListPicText.quarters.list-view .title {
        font-size: 1rem;
    }



    .ListPicText.quarters.list-view .detail p {
        font-size: 0.875rem;
        height: 8.75em;
        -webkit-line-clamp: 5;
    }
}

@media screen and (min-width: 1280px) {
    .ListPicText.quarters.list-view .title {
        font-size: 1.125rem;
    }

    .ListPicText.quarters.list-view .detail p {
        font-size: 0.9375rem;
        height: 7em;
        -webkit-line-clamp: 4
    }
}

/* grid-view */
@media screen and (min-width: 1024px) {
    .ListPicText.quarters.grid-view>div {
        margin-left: -10px;
        margin-right: -10px;
    }

    .ListPicText.quarters.grid-view .item {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .ListPicText.quarters.grid-view .cont {
        padding-left: 10px;
        padding-right: 10px;
    }

    .ListPicText.quarters.grid-view .title a {
        font-size: 1.25rem;
        height: 4.8em;
        -webkit-line-clamp: 3;
    }

    .ListPicText.quarters.grid-view .detail p {
        font-size: 1rem;
        height: 8.75em;
        -webkit-line-clamp: 5;
    }
}

@media screen and (min-width: 1280px) {
    .ListPicText.quarters.grid-view .cont {
        padding-left: 15px;
        padding-right: 15px;
    }

    .ListPicText.quarters.grid-view .title a {
        font-size: 1.25rem;
        height: 3.2em;
        -webkit-line-clamp: 2;
    }

    .ListPicText.quarters.grid-view .detail p {
        font-size: 1rem;
    }
}

@media screen and (min-width: 1280px) and (max-width: 1599px) {
    .ListPicText.quarters.grid-view .detail p {
        height: 7em;
        -webkit-line-clamp: 4;
    }
}

@media screen and (min-width: 1600px) {
    .ListPicText.quarters.grid-view .detail p {
        height: 5.25em;
        -webkit-line-clamp: 3;
    }
}

/* 640~1023px */
@media screen and (min-width: 640px) and (max-width: 1023px) {

    /* list-view */
    .ListPicText.list-view .imgBox {
        max-width: 36%;
    }

    /* grid-view */
    .ListPicText.grid-view>div {
        margin-left: -10px;
        margin-right: -10px;
    }

    .ListPicText.grid-view .item {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media screen and (min-width: 640px) and (max-width: 767px) {

    /* list-view 一律以單欄顯示 */
    .ListPicText.list-view .imgBox {
        margin-right: 15px;
    }

    .ListPicText.list-view.single.staggered .item:nth-child(2n+2) .imgBox {
        margin-right: 0;
        margin-left: 15px;
    }


    /* grid-view 一律以兩欄顯示 */
    .ListPicText.grid-view .item {
        width: 50%;
    }

    .ListPicText.grid-view .cont {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media screen and (min-width: 640px) and (max-width: 699px) {
    .ListPicText.grid-view .title {
        font-size: 1.125rem;
        height: 3.2em;
        -webkit-line-clamp: 2;
    }

    .ListPicText.grid-view .detail p {
        font-size: 0.9375rem;
        max-height: 8.75em;
        -webkit-line-clamp: 5;
    }
}

@media screen and (min-width: 700px) and (max-width: 767px) {
    .ListPicText.grid-view .title {
        font-size: 1.25rem;
        height: 3.2em;
        -webkit-line-clamp: 2;
    }

    .ListPicText.grid-view .detail p {
        font-size: 1rem;
        height: 7em;
        -webkit-line-clamp: 4;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {

    /* list-view 一律以單欄顯示 */
    .ListPicText.list-view .imgBox {
        margin-right: 20px;
    }

    .ListPicText.list-view.single.staggered .item:nth-child(2n+2) .imgBox {
        margin-right: 0;
        margin-left: 20px;
    }



    /* grid-view 一律以三欄顯示 */
    .ListPicText.grid-view .item {
        width: 33.3333%;
    }

    .ListPicText.grid-view .cont {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media screen and (min-width: 768px) and (max-width: 899px) {
    .ListPicText.grid-view .title {
        font-size: 1.125rem;
        height: 3.2em;
        -webkit-line-clamp: 2;
    }

    .ListPicText.grid-view .detail p {
        font-size: 0.9375rem;
        max-height: 8.75em;
        -webkit-line-clamp: 5;
    }
}

@media screen and (min-width: 900px) and (max-width: 1023px) {
    .ListPicText.grid-view .title {
        font-size: 1.25rem;
        height: 3.2em;
        -webkit-line-clamp: 2;
    }

    .ListPicText.grid-view .detail p {
        font-size: 1rem;
        height: 7em;
        -webkit-line-clamp: 4;
    }
}

/* 639px~480px時 一律以圖上文下雙欄顯示,479以下時，一律以圖上文下單欄顯示 */
@media screen and (max-width: 639px) {
    .ListPicText>div {
        margin-left: -10px;
        margin-right: -10px;
    }

    .ListPicText .item {
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 60px;
    }

    .ListPicText .cont {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
    }

    .ListPicText .tag {
        position: absolute;
        bottom: 100%;
        left: 0;
        border-radius: 0 4px 0 0;
        padding: 0 20px;
    }

    .ListPicText .btn {
        text-align: center;
    }
}

@media screen and (max-width: 540px) {
    .ListPicText .item {
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .ListPicText .title a {
        font-size: 1.25rem;
        height: 3.2em;
        -webkit-line-clamp: 2;
    }

    .ListPicText .desc {
        font-size: 1rem;
        max-height: 7em;
        -webkit-line-clamp: 4;
    }
}

@media screen and (min-width: 539px) and (max-width: 639px) {
    .ListPicText .item {
        width: 50%;
    }

    .ListPicText .title a {
        font-size: 1.25rem;
        height: 3.2em;
        -webkit-line-clamp: 2;
    }

    .ListPicText .desc {
        font-size: 1rem;
        max-height: 8.75em;
        -webkit-line-clamp: 5;
    }
}


/*----------------------------------------------------------------------*/
/* 文字列表 */
.ListTable {
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

.editable_content+.ListTable {
    margin-top: 15px;
}

.ListTable table {
    width: 100%;
}

.ListTable td.date {
    font-family: "Montserrat", sans-serif;
    color: var(--style1-blue--);
    text-align: center;
    letter-spacing: 0.05em;
}

.ListTable td.title {
    color: #152632;
    font-weight: 500;
}

.ListTable td.title a {
    display: block;
    position: relative;
    font-size: 1.25rem;
}

.ListTable td.title a:hover,
.ListTable table td.title a:focus {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--style1-blue--);
    text-underline-offset: 0.3rem;
}

.ListTable td.hash_value {
    word-break: break-all;
}

@media screen and (min-width: 1024px) {
    .ListTable table th {
        color: #152632;
        padding: 15px 25px;
        background-color: var(--style1-blue-light);
        font-weight: 500;
        white-space: nowrap;
        position: relative;
    }

    .ListTable table th.title {
        text-align: left;
    }

    /* .ListTable table th::after {
        content: "";
        position: absolute;
        display: block;
        width: 1px;
        height: 30%;
        background-color: #152632;
        top: 35%;
        right: 0;
    } */

    .ListTable table th:first-child {
        border-radius: 5px 0 0 5px;
    }

    .ListTable table th:last-child {
        border-radius: 0 5px 5px 0;
    }

    .ListTable table th:last-child::after {
        display: none;
    }

    .ListTable table td {
        padding: 20px 25px;
        line-height: 30px;
        vertical-align: middle;
    }

    .ListTable table tr:nth-child(odd) td {
        background-color: #f8f8fd;
    }

    .ListTable th.date {
        width: 160px;
    }

    .ListTable td.date {
        white-space: nowrap;
        position: relative;
    }
}

@media screen and (max-width: 1023px) {

    .ListTable table,
    .ListTable table tbody,
    .ListTable table tr,
    .ListTable table th,
    .ListTable table td {
        display: block;
    }

    .ListTable {
        /* margin-top: 30px;
        margin-bottom: 30px; */
        border: 1px solid #152632;
        border-radius: 10px;
    }

    .ListTable table tr {
        padding: 15px 20px;
        border-bottom: 1px solid #d4d4d4;
    }

    .ListTable table tr:first-child {
        position: absolute;
        left: -10000px;
        top: -10000px;
    }

    .ListTable table tr:last-child {
        border-bottom: 0;
    }

    .ListTable table tr:nth-child(odd) {
        background-color: #fafafa;
    }

    .ListTable table td {
        margin: 5px 0;
        text-align: left;
    }

    .ListTable td:before {
        font-weight: bold;
        content: attr(data-th) "：";
    }

    .ListTable td.no:before,
    .ListTable td:first-child.date:before,
    .ListTable td.cat:before,
    .ListTable td.title:before {
        content: "";
    }

    .ListTable td.date {
        display: inline-block;
        font-size: 0.9375rem;
        position: relative;
    }

    .ListTable td.date br {
        display: none;
    }

    .ListTable td.title {
        margin-top: 0;
        font-size: 1.25rem;
        line-height: 1.5em;
        position: relative;
    }
}

@media screen and (max-width: 479px) {
    .ListTable table tr {
        padding: 15px 10px;
    }

    .ListTable td.title a {
        padding-right: 0;
    }

    .ListTable td.title a::after {
        display: none;
    }
}

@media screen and (min-width: 1280px) {
    .ListTable td.title {
        font-size: 1.125rem;
    }
}

/* 頁碼 */
#Pagination {
    margin-top: 30px;
    clear: both;
}

#Pagination .pages {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

#Pagination a {
    margin: 0 5px;
    position: relative;
    text-align: center;
    padding-left: 0.1em;
    text-decoration: none;
}

#Pagination .setting {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 10px;
    line-height: 30px;
    font-size: 0.875rem;
}

#Pagination .setting select,
#Pagination .setting input[type="text"],
#Pagination .setting input[type="button"] {
    font-size: 0.875rem;
    transition: all ease 0.3s;
}

#Pagination .setting select {
    padding: 0 5px;
}

#Pagination .setting input[type="text"] {
    width: 50px;
    padding: 0 10px;
}

#Pagination .setting select,
#Pagination .setting input[type="text"] {
    background-color: #fff;
    border: 1px solid #152632;
    height: 30px;
    border-radius: 15px;
    font-family: "Montserrat", sans-serif;
    color: #555;
}

#Pagination .setting select:focus,
#Pagination .setting input[type="text"]:focus {
    background-color: var(--style1-blue-light);
    border-color: var(--style1-blue--);
    color: #152632;
}

#Pagination .setting input[type="button"] {
    padding: 0 12px;
    margin-left: 6px;
    background-color: #152632;
    height: 30px;
    line-height: 30px;
    color: #fff;
    border-radius: 15px;
}

#Pagination .setting input[type="button"]:hover,
#Pagination .setting input[type="button"]:focus {
    background-color: var(--style1-blue--);
}

@media screen and (max-width: 1023px) {
    #Pagination a {
        display: none;
        border: 1px solid #152632;
        color: #152632;
        border-radius: 20px;
        line-height: 36px;
        padding: 0 15px;
    }

    #Pagination a:hover,
    #Pagination a:focus {
        background-color: var(--style1-blue--);
        color: #fff;
    }

    #Pagination .dev-script-oper {
        display: none;
    }
}

@media screen and (max-width: 479px) {

    #Pagination a.prev,
    #Pagination a.next {
        display: inline-block;
    }
}

@media screen and (min-width: 480px) and (max-width: 1023px) {

    #Pagination a.first,
    #Pagination a.prev,
    #Pagination a.next,
    #Pagination a.last {
        display: inline-block;
    }
}

@media screen and (min-width: 1024px) {
    #Pagination a {
        width: 32px;
        height: 32px;
        line-height: 32px;
        border: 1px solid #fff;
        border-radius: 16px;
        font-family: "Montserrat", sans-serif;
        color: #999;
    }

    #Pagination a:hover,
    #Pagination a:focus {
        background-color: var(--style1-blue-light);
        color: #152632;
    }

    #Pagination a.focuz {
        border-color: var(--style1-blue--);
        color: #000;
    }

    #Pagination a.first,
    #Pagination a.last,
    #Pagination a.prev,
    #Pagination a.next {
        text-indent: -99px;
        overflow: hidden;
    }

    #Pagination a.first::before,
    #Pagination a.first::after,
    #Pagination a.last::before,
    #Pagination a.last::after,
    #Pagination a.prev::before,
    #Pagination a.next::before {
        content: "";
        position: absolute;
        top: 50%;
        margin-top: -3px;
        width: 6px;
        height: 6px;
        border-top: 1px solid #999999;
        border-left: 1px solid #999999;
    }

    #Pagination a.first::before,
    #Pagination a.first::after,
    #Pagination a.prev::before {
        transform: rotate(-45deg);
    }

    #Pagination a.last::before,
    #Pagination a.last::after,
    #Pagination a.next::before {
        transform: rotate(135deg);
    }

    #Pagination a.first::before {
        left: 12px;
    }

    #Pagination a.first::after {
        left: 16px;
    }

    #Pagination a.prev::before {
        left: 14px;
    }

    #Pagination a.last::before {
        right: 12px;
    }

    #Pagination a.last::after {
        right: 16px;
    }

    #Pagination a.next::before {
        right: 14px;
    }

    #Pagination a.first:hover::before,
    #Pagination a.first:focus::before,
    #Pagination a.first:hover::after,
    #Pagination a.first:focus::after,
    #Pagination a.last:hover::before,
    #Pagination a.last:focus::before,
    #Pagination a.last:hover::after,
    #Pagination a.last:focus::after,
    #Pagination a.prev:hover::before,
    #Pagination a.prev:focus::before,
    #Pagination a.next:hover::before,
    #Pagination a.next:focus::before {
        border-color: #000;
    }
}

/* 內頁頁碼 */
.inPagination {
    margin-top: 30px;
    margin-bottom: 20px;
    clear: both;
    color: #636363;
}

.inPagination .pages {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.inPagination a {
    margin: 0 5px;
    position: relative;
    text-align: center;
    padding-left: 0.1em;
    text-decoration: none;
}

.inPagination a {
    width: 32px;
    height: 32px;
    line-height: 32px;
    border: 1px solid #fff;
    border-radius: 16px;
    font-family: "Montserrat", sans-serif;
    color: #555;
}

.inPagination a:hover,
.inPagination a:focus {
    background-color: var(--style1-blue-light);
    color: #000;
}

.inPagination a.focuz {
    border-color: var(--style1-blue--);
    color: #000;
}

/* 上/下一篇文章 */
.prevNextLink {
    margin: 50px 0 20px;
    padding-top: 20px;
    border-top: 1px solid #dcdcdc;
    display: flex;
    flex-wrap: wrap;
}

.prevNextLink>div {
    margin: 10px 0;
}

.prevNextLink .next {
    text-align: right;
}

@media screen and (max-width: 639px) {
    .prevNextLink .prev {
        width: 100%;
    }

    .prevNextLink .next {
        width: 100%;
    }
}

@media screen and (min-width: 640px) {
    .prevNextLink .prev {
        width: 50%;
    }

    .prevNextLink .next {
        width: 50%;
    }
}

@media screen and (min-width: 640px) and (max-width: 1023px) {
    .prevNextLink .prev {
        padding-right: 20px;
    }

    .prevNextLink .next {
        padding-left: 20px;
    }
}

@media screen and (min-width: 1024px) {
    .prevNextLink .prev {
        padding-right: 50px;
    }

    .prevNextLink .next {
        padding-left: 50px;
    }
}

.prevNextLink a {
    display: block;
    border-color: #202020;
    border-style: solid;
    padding: 10px 15px;
    line-height: 1.5em;
    text-decoration: none;
    position: relative;
}

.prevNextLink .prev a {
    border-width: 0 0 0 3px;
    padding-left: 40px;
}

.prevNextLink .next a {
    border-width: 0 3px 0 0;
    padding-right: 40px;
}

.prevNextLink a:hover,
.prevNextLink a:focus {
    border-color: #00005d;
    background-color: #00005d;
}

.prevNextLink a::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: url(../images/icon_arrow.png) no-repeat 50% 40%;
    background-size: 300%;
}

.prevNextLink .prev a::after {
    left: 10px;
    transform: rotate(-180deg);
}

.prevNextLink .next a::after {
    right: 10px;
}

.prevNextLink a:hover::after,
.prevNextLink a:focus::after {
    background-position: right 40%;
}

.prevNextLink span {
    display: block;
    transition: all 0.3s ease;
}

.prevNextLink .label {
    color: #636363;
    font-size: 0.875rem;
}

.prevNextLink .title {
    margin-top: 5px;
    color: #202020;
}

.prevNextLink a:hover span,
.prevNextLink a:focus span {
    color: #fff;
}

/* Scrollable Table */
.ScrableTblOuter {
    position: relative;
}

.ScrableTbl {
    width: 100%;
    overflow-y: auto;
    _overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.ScrableTbl::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
}

.ScrableTbl::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 3px solid #fff;
    background-color: rgba(0, 0, 0, 0.3);
}

.ScrableTbl::-webkit-scrollbar-thumb:hover {
    background-color: var(--style1-blue--);
}

/* 左右方向鍵 */
.ScrableTblScrCtrl {
    margin-top: -30px;
    text-align: right;
}

.ScrableTblScrCtrl span {
    display: inline-block;
    width: 28px;
    height: 28px;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.ScrableTblScrCtrl span:hover,
.ScrableTblScrCtrl span:focus {
    background-color: #00005d;
}

.ScrableTblScrCtrl span.disabled {
    background-color: #ccc;
    cursor: default;
}

.ScrableTblScrCtrl span::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    top: 50%;
    border-top: 2px solid #666;
    border-right: 2px solid #666;
    transition: all 0.3s ease;
}

.ScrableTblScrCtrl span.scroll_left::before {
    left: 50%;
    margin: -5px 0 0 -3px;
    transform: rotate(-135deg);
}

.ScrableTblScrCtrl span.scroll_right::before {
    right: 50%;
    margin: -5px -3px 0 0;
    transform: rotate(45deg);
}

.ScrableTblScrCtrl span:hover::before,
.ScrableTblScrCtrl span:focus::before {
    border-color: #fff;
}

/*----------------------------------------------------------------------*/
/*--書單--*/
/*列表*/
.BookList::after,
.BookList .item>div::after {
    content: '';
    display: block;
    width: 100%;
    clear: both;
}

.BookList .item,
.BookList .item>div,
.BookList .img,
.BookList .img>div,
.BookList .cont {
    box-sizing: border-box;
}

.BookList {
    margin-top: 30px;
}

.editable_content+.BookList {
    margin-top: 0;
}

.BookList .item {
    margin-bottom: 40px;
}

.BookList .item>div {
    height: 100%;
    border: 1px solid #152632;
    padding: 30px 30px 25px 20px;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    background-color: #fff;
}

.BookList .no {
    position: absolute;
    top: 5px;
    right: 10px;
    color: #d9d9eb;
    font-size: 1.625rem;
    font-weight: bold;
}

.BookList .no::after {
    content: '.';
}

.BookList .img {
    float: left;
    width: 200px;
    max-width: 48%;
    padding-right: 20px;
    position: relative;
    overflow: hidden;
}

@media screen and (max-width: 479px) {
    .BookList .img {
        float: none;
        width: 240px;
        max-width: 80%;
        margin: 0 auto 20px;
        padding-right: 0;
    }
}

.BookList .img>div {
    padding-bottom: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.BookList .cont {
    overflow: hidden;
}

.BookList .book_title {
    margin-bottom: 8px;
}

.BookList .book_title a {
    display: block;
    /* padding-bottom: 8px; */
    position: relative;
    color: #152632;
    text-decoration: none;
    line-height: 1.5em;
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.BookList .book_title a:hover,
.BookList .book_title a:focus {
    color: var(--style1-blue-dark);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--style1-blue--);
    text-underline-offset: 0.5rem;
}

.book_detail_table {
    width: 100%;
    border-spacing: 5px;
    border-collapse: separate;
    table-layout: fixed;
}

.book_detail_table th,
.book_detail_table td {
    line-height: 150%;
}

.book_detail_table th {
    padding: 5px;
    background-color: var(--style1-blue-light);
    text-align: right;
    border-radius: 5px;
    font-weight: bold;
}

.book_detail_table td {
    word-break: break-all;
}

@media screen and (min-width: 1024px) {


    .book_detail_table th {
        width: 5em;
    }

    .book_detail_table td {
        padding: 5px;
    }
}

@media screen and (max-width:1023px) and (min-width: 800px) {
    .book_detail_table th {
        width: 5em;

    }
}

@media screen and (min-width: 800px) {

    .book_detail_table th,
    .book_detail_table td {
        vertical-align: top;
    }

    .book_detail_table td {
        padding: 5px;
    }
}

@media screen and (max-width: 799px) {

    .book_detail_table,
    .book_detail_table tbody,
    .book_detail_table tr,
    .book_detail_table th,
    .book_detail_table td {
        display: block;
    }

    .book_detail_table th {
        float: left;
        clear: left;
        width: 5.5em;
    }

    .book_detail_table td {
        margin-left: 5.5em;
        padding: 5px;
    }

    .book_detail_table th,
    .book_detail_table td {
        margin-bottom: 5px;
        box-sizing: border-box;
    }

}

@media screen and (max-width: 639px) {
    .BookList .item>div {
        padding: 30px 20px 25px;
    }

    .BookList .book_title a {
        font-size: 1.375rem;
    }


    .book_detail_table th,
    .book_detail_table td {
        font-size: 0.9375rem;
    }

}




/* 內頁 */

.BookCont::after {
    content: '';
    display: block;
    width: 100%;
    clear: both;
}


.BookCont .imgBox,
.BookCont .imgBox img,
.BookCont .cont {
    box-sizing: border-box;
}

.BookCont {
    margin-bottom: 60px;
}

.BookCont .item>div {
    padding: 20px 15px;
}

.BookCont .imgBox {
    float: left;
    width: 300px;
    max-width: 40%;
    position: relative;
    overflow: hidden;
}

@media screen and (min-width: 1280px) {
    .BookCont .imgBox {
        padding-right: 40px;
    }
}

@media screen and (max-width: 1279px) {
    .BookCont .imgBox {
        padding-right: 20px;
    }
}

@media screen and (max-width: 539px) {
    .BookCont .imgBox {
        float: none;
        max-width: 80%;
        margin: 0 auto 20px;
        padding-right: 0;
    }
}


.BookCont .imgBox img {
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.BookCont .cont {
    overflow: hidden;
}

.BookCont .book_title h3 {
    display: block;
    padding-bottom: 8px;
    position: relative;
    color: #152632;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--style1-blue--);
    text-underline-offset: 0.6rem;
    line-height: 1.5em;
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}



.BookCont .book_subtitle {
    margin-bottom: 15px;
    font-size: 1.125rem;
    color: #999999;
    line-height: 150%;
}


@media screen and (max-width: 639px) {
    .BookCont .book_title h3 {
        font-size: 1.5rem;
    }

    .BookCont .book_subtitle {
        font-size: 1rem;
    }
}


.BookCont .keywords li {
    display: inline-block;
    line-height: 150%;
}

.BookCont .keywords li a {
    color: var(--style1-blue-dark);
    text-decoration: underline;
}

.BookCont .keywords li a:hover {
    color: var(--style1-blue--);
}

.BookCont .keywords li::after {
    content: '、';
}

.BookCont .keywords li:last-child::after {
    content: '';
}

.BookLocation {
    position: relative;
}

.BookLocation>.title {
    display: inline-block;
    padding: 0 20px;
    margin-left: 20px;
    background-color: var(--style1-blue--);
    box-sizing: border-box;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 48px;
    letter-spacing: 0.1em;
    border-radius: 10px 10px 0 0;
}

.BookLocation>.title::before {
    display: inline-block;
    content: '';
    width: 28px;
    height: 28px;
    margin-right: 8px;
    margin-bottom: 0.25em;
    vertical-align: middle;
    background: url('../images/book-location.svg') no-repeat center center;
    background-size: cover;
}

.BookListTable {
    margin-bottom: 30px;
    background-color: #fff;
    border: 2px solid var(--style1-blue--);
    border-radius: 5px;
    box-sizing: border-box;
    position: relative;
}


.BookListTable table {
    width: 100%;
}

.BookListTable tr th {
    color: #999999;
    font-weight: 500;
}

.BookListTable td.title {
    color: var(--dfborder);
    font-weight: bold;
    font-size: 1.125rem;
    letter-spacing: 0.05em;
}

.BookListTable td.link {
    color: #999999;
    font-size: 1.125rem;
}

.BookListTable td.link a {
    color: var(--style1-blue-dark);
    word-break: break-all;
}

.BookListTable td.link a:hover,
.BookListTable td.link a:focus {
    color: var(--style1-blue--);
}


@media screen and (min-width: 1024px) {

    .BookListTable table th,
    .BookListTable table td {
        border-bottom: 1px solid #d6d6d6;
        padding-left: 20px;
        padding-right: 20px;
    }

    .BookListTable table tr:nth-child(odd) td {
        background-color: #ebebf880;
    }

    .BookListTable table th {
        padding-top: 12px;
        padding-bottom: 12px;
        white-space: nowrap;
        letter-spacing: 0.05em;
    }

    .BookListTable table td {
        padding-top: 18px;
        padding-bottom: 18px;
        line-height: 30px;
        vertical-align: top;
    }

}

@media screen and (max-width:1023px) {

    .BookListTable table,
    .BookListTable table tbody,
    .BookListTable table tr,
    .BookListTable table th,
    .BookListTable table td {
        display: block;
    }

    .BookListTable table tr:first-child {
        position: absolute;
        left: -10000px;
        top: -10000px;
    }

    .BookListTable table tr {
        padding: 15px 20px;
        border-bottom: 1px solid #d6d6d6;
    }


    .BookListTable table tr:last-child {
        border-bottom: none;
    }

    .BookListTable table tr:nth-child(odd) {
        background-color: #ebebf880;
    }


    .BookListTable table td {
        margin: 5px 0;
        text-align: left;
    }

    .BookListTable td:before {
        font-weight: 500;
        content: attr(data-th)"：";
        color: #999;
        font-size: 0.9375rem;
    }

    .BookListTable td.title {
        line-height: 150%;
        position: relative;
    }
}

@media screen and (max-width: 639px) {

    .BookListTable td.title,
    .BookListTable td.link {
        font-size: 0.9375rem;
    }
}