@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300;400;500;600;700;900&family=Noto+Sans+KR:wght@200;300;400;500;600;700;900&family=Noto+Sans+SC:wght@200;300;400;500;600;700;900&family=Noto+Sans+TC:wght@200;300;400;500;600;700;900&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

* {
    font-family: 'Noto Sans', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', Sans !important;
}

/* 底色 */
body {
    background-color: #FCEFE5;
}

/* 所有圖片設定 */
img {
    width: 100%;
    vertical-align: bottom;
}

/* 所有連結裝飾消失 */
a {
    text-decoration: none;
}

/* 各段h2 */
.bookall_title {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    position: relative;
    /* padding-left: 20px; */
}

.sectiontitle {
    color: #333333;
    font-size: 48px;
    font-style: normal;
    font-weight: 800;
    line-height: 72px;
    /* 150% */
    text-transform: capitalize;
    word-break: break-all;
    flex-grow: 1;
}

/* 各段描述 */
.sectionintro {
    margin-bottom: 16px;
}

/* 如果想讓裡面的文字也變色 */
.sectiondescribe span.specialcode {
    color: #d81010;
    font-weight: bold;
    font-size: 26px;
}

.sectiondescribe {
    color: #333333;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    text-transform: capitalize;
}

.sectiondescribe.ps {
    font-size: 20px;
    color: #5c5c5c;
}

@media screen and (min-width:480px) {
    .sectiondescribe {
        font-size: 24px;
    }
}


.btngroup {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-grow: 1;
}

.bookall_title a {
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    text-align: center;
}

@media screen and (min-width:480px) {
    .btngroup {
        flex-grow: 0;
        flex-wrap: nowrap;
    }

    .bookall_title a {
        flex-grow: 0;
    }
}

.bookall_title a.morebtnbgc {
    background-color: #e79600;
    color: #fff;
    border: 1px solid #ddd;
    transition: 0.3s;
    cursor: pointer;
}

.bookall_title a.morebtnbgc:hover {
    background-color: #ab500f;
}

.bookall_title a.morebtn {
    border: 1px solid #ddd;
    color: #e79600;
    background-color: #fff;
    transition: 0.3s;
    cursor: pointer;
}

.bookall_title a.morebtn:hover {
    background-color: #f2f2f2;
}

@media screen and (min-width:768px) {
    .bookall_title {
        padding-left: 20px;
    }

    .bookall_title::before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 16px solid #e79600;
        left: 0;
    }
}

/* wrap部分置中 */
.wrap {
    width: 90%;
    margin: auto;
    max-width: 1200px;
}

.container {
    padding: 80px 0 40px;
}

.pc {
    display: none;
}

@media screen and (min-width:480px) {
    .pc {
        display: block;
    }

    .mobile {
        display: none;
    }
}

/* 單獨連結卡片 */
.linkcard_area {
    margin-top: 40px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.linkcard_area .linkcard {
    display: block;
    width: 100%;
    max-width: 764px;
    padding: 16px;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #DDD;
    transition: 0.3s;
}

.linkcard_area .linkcard:not(:first-child) {
    margin-top: 8px;
}

.linkcard_area .linkcard p {
    text-align: start;
    text-align: left;
    color: #333333;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 150% */
}

.linkcard_area .linkcard span {
    display: block;
    text-align: end;
    color: #e79600;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 150% */
}

.linkcard_area .linkcard:hover {
    background-color: #F4EBE2;
}

@media screen and (min-width:1024px) {
    .linkcard_area {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .linkcard_area .linkcard {
        width: calc((100% - 8px) / 2);
    }

    .linkcard_area .linkcard:not(:first-child) {
        margin-top: 0px;
    }
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 半透明黑色背景 */
    z-index: 999;
    /* 確保在 .activity-rules 下面 */
}

.activity-rules {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
    width: 90%;
    height: 70%;
    max-width: 1200px;
}

@media screen and (min-width:768px) {
    .activity-rules {
        padding: 40px;
    }
}

.activity-rules .content-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.activity-rules .scroll-content {
    overflow-y: auto;
    width: 100%;
    height: 90%;
    max-height: 500px;
    box-sizing: border-box;
}

/* 原始滾動條設定保留並依參考優化 */
.activity-rules .scroll-content::-webkit-scrollbar {
    width: 8px;
    background-color: #DDD; /* 參考文獻：確保容器有背景色 */
}

.activity-rules .scroll-content::-webkit-scrollbar-thumb {
    background-color: #e79600;
    border-radius: 4px;
}

.activity-rules .scroll-content::-webkit-scrollbar-track {
    background-color: #DDD;
}

.activity-rules .scroll-content h2 {
    color: #333;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 150% */
    margin-bottom: 4px;
    border-bottom: 1px solid #DDDDDD;
    padding-bottom: 4px;
}

.activity-rules .scroll-content h2:not(:first-child) {
    margin-top: 24px;
}

.activity-rules .scroll-content ol {
    list-style: decimal;
    padding-left: 1.5em
}

.activity-rules .scroll-content ol.streetactivity .streetactivityli:not(:last-child) {
    margin-bottom: 16px;
}

/* 第二層有序選單 */
.activity-rules .scroll-content ol .secondol {
    list-style: lower-roman;
}

/* 第三層有序選單 */
.activity-rules .scroll-content ol ol .thirdol {
    list-style: disc
}

.activity-rules .scroll-content ol li .highlight {
    color: #e79600;
}
.activity-rules .scroll-content ol li a {
    color: #976301;
    text-decoration: underline;
}
.activity-rules .scroll-content ol li h3.highlight {
    font-size: 20px;
    color: #000;
}

.activity-rules .scroll-content .sectitle {
    color: #e79600;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 150% */
    margin-top: 8px;
}

.activity-rules .scroll-content ol>li {
    color: #333;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    margin-bottom: 16px;
    /* 150% */
}

.activity-rules .close-button-container {
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    background: #FFF;
    width: 100%;
}

.activity-rules .close-button-container span {
    display: block;
    width: 100%;
    text-align: center;
    border-radius: 999px;
    border: 1px solid #DDD;
    background: #FFF;
    color: var(--unnamed, #333);
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 150% */
    padding: 8px 16px;
    transition: 0.3s;
    cursor: pointer;
}

.activity-rules .close-button-container span:hover {
    background-color: #f2f2f2;
}

.activity-rules .scroll-content ol li a.linelink {
    color: #0CC755;
}

.linelink:hover {
    color: #04a140;
}

/* Header */
header {
    background-color: #fff;
    padding: 16px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}

header .wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

header .wrap .logo {
    width: 140px;
}

@media screen and (min-width:768px) {
    header .wrap .logo {
        width: 180px;
    }
}

header .wrap .popupbtn {
    border-radius: 999px;
    border: 1px solid #DDD;
    padding: 8px 16px;
    display: inline-block;
    color: #e79600;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    /* 150% */
    transition: 0.3s;
    cursor: pointer;
}

header .wrap .popupbtn:hover {
    background-color: #f2f2f2;
}

/* banner */
.banner {
    background-color: #FCEFE5;
}

/* Tab */
/* 書展類別區域 */
.tab {
    margin-bottom: 24px;
}

/* 書展類別分類區域 */
.tab_area {
    display: flex;
    overflow: scroll;
}

/* 原始設定 */
.tab_area::-webkit-scrollbar {
    width: 100%;
    height: 8px;
    background-color: #DDD;
}
.tab_area::-webkit-scrollbar-thumb {
    background-color: #e4920d;
}
.tab_area::-webkit-scrollbar-track {
    background-color: #DDD;
}

/* 書展類別分類按鈕 */
.tab_area a {
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
    flex-wrap: nowrap;
    color: #333333;
    background-color: #FCEFE5;
    padding: 20px 20px;
    box-sizing: border-box;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 150% */
    transition: 0.3s;
    border: 1px solid #DDDDDD;
    flex-grow: 1;
    text-align: center;
    justify-content: center;
}

@media screen and (min-width:1024px) {
    .tab_area a {
        font-size: 28px;
        line-height: 42px;
        /* 150% */
        text-transform: capitalize;
    }
}

.tab_area a:hover {
    background-color: #F4EBE2;
}

.tab_area a.active:hover {
    background-color: #e79600;
    border: 1px solid #e79600;
    font-weight: 600;
}

/* 書展類別分類按鈕點選效果 */
.tab_area>.active {
    color: #fff;
    position: relative;
    background-color: #e79600;
    font-weight: 600;
}

/* tab fix屬性 */
.tab-fixed {
    position: fixed;
    top: 80px;
    right: 0;
    bottom: none;
    left: 0;
    z-index: 998;
}

.tab.tab-fixed .tab_area a {
    padding: 8px 8px;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
    /* 150% */
    font-weight: 600;
}


@media screen and (min-width:1024px) {
    .tab.tab-fixed .tab_area a {
        padding: 12px 16px;
        font-size: 24px;
        line-height: 36px;
        /* 150% */
    }
}

/* 書架區域 */
.purebookpack .bookall_area {
    margin-top: 40px;
    position: relative;
}

/* Owl Carousel 自訂樣式 */
.purebookpack .bookall_area.owl-carousel {
    display: block !important;
}

.purebookpack .bookall_area .owl-stage-outer {
    overflow: hidden;
}

.purebookpack .bookall_area .card {
    display: block;
    transition: 0.3s;
    box-sizing: border-box;
    height: 100%;
}

.purebookpack .bookall_area .card .pic {
    padding: 16px;
    box-sizing: border-box;
    transition: 0.3s;
}

.purebookpack .bookall_area .card:hover .pic {
    background-color: #F4EBE2;
}

.purebookpack .bookall_area .card .txt {
    width: 100%;
}

.purebookpack .bookall_area .card .txt span {
    display: block;
    color: #333333;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    transition: 0.3s;
    padding: 0 12px;
    box-sizing: border-box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.purebookpack .bookall_area .card:hover .txt span {
    color: #e79600;
}

/* Owl Carousel 引導點樣式 */
.purebookpack .bookall_area .owl-dots,
.recommand .box .owl-dots {
    text-align: center;
    margin-top: 24px;
}

.purebookpack .bookall_area .custom-dots,
.recommand .box .custom-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.purebookpack .bookall_area .custom-dot,
.recommand .box .custom-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ddd;
    transition: all 0.3s ease;
    cursor: pointer;
}

.purebookpack .bookall_area .custom-dot:hover,
.recommand .box .custom-dot:hover {
    background-color: #bbb;
}

.purebookpack .bookall_area .custom-dot.active,
.recommand .box .custom-dot.active {
    background-color: #e79600;
    width: 24px;
    border-radius: 6px;
}

/* 一整包書樣式 */
.bookcardpack {
    background-color: #F4EBE2;
}

.bookcardpack .wrap .bookall_area .card {
    width: 100%;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 16px;
    box-sizing: border-box;
    margin-top: 40px;
}

.bookcardpack .wrap .bookall_area .card .cardtitle {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.bookcardpack .wrap .bookall_area .card .cardtitle .titledescribe p {
    color: #333333;
    text-overflow: ellipsis;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 42px;
    /* 150% */
    transition: 0.3s;
}

.bookcardpack .wrap .bookall_area .card .cardtitle .titledescribe span {
    color: #333333;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 150% */
    transition: 0.3s;
}

.bookcardpack .wrap .bookall_area .card .cardtitle:hover .titledescribe p,
.bookcardpack .wrap .bookall_area .card .cardtitle:hover .titledescribe span {
    color: #e79600;
}

.bookcardpack .wrap .bookall_area .card .cardtitle span {
    color: #e79600;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
    /* 150% */
}

.bookcardpack .wrap .bookall_area .card .cardinfo {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.bookcardpack .wrap .bookall_area .card .cardinfo a {
    width: calc((100% - 16px) / 2);
}

.bookcardpack .wrap .bookall_area .card .cardinfo a .pic {
    transition: 0.3s;
    padding: 12px;
    box-sizing: border-box;
}

.bookcardpack .wrap .bookall_area .card .cardinfo a:hover .pic {
    background-color: #F4EBE2;
}

.bookcardpack .wrap .bookall_area .card .cardinfo a span {
    color: #333333;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: 0.3s;
    padding: 0 12px;
    box-sizing: border-box;
}

.bookcardpack .wrap .bookall_area .card .cardinfo a:hover span {
    color: #e79600;
}

@media screen and (min-width:1024px) {
    .bookcardpack .wrap .bookall_area {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
    }

    .bookcardpack .wrap .bookall_area .card {
        width: calc((100% - 40px) / 2);
        margin-top: 0px;
    }

    .bookcardpack .wrap .bookall_area .card .cardinfo a .pic img {
        max-width: 360px;
    }
}

/* 純文字樣式 */
.publisharea .boxbtnwrap {
    display: flex;
    overflow: auto;
    gap: 4px;
    padding-bottom: 8px;
}

/* 原始設定 */
.publisharea .boxbtnwrap::-webkit-scrollbar {
    width: 100%;
    height: 8px;
    background-color: #DDD;
}
.publisharea .boxbtnwrap::-webkit-scrollbar-thumb {
    background-color: #e79600;
}
.publisharea .boxbtnwrap::-webkit-scrollbar-track {
    background-color: #DDD;
}

.publisharea .boxbtnwrap li {
    width: fit-content;
    padding: 8px 16px;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 150% */
    white-space: nowrap;
    text-align: center;
    border-radius: 999px;
    border: 1px solid #DDD;
    cursor: pointer;
}

.publisharea .boxbtnwrap li.active {
    background-color: #e79600;
    color: #fff;
    border: none;
}

.publishshelf {
    display: none;
}

.publishshelf.active {
    display: flex;
    flex-wrap: wrap;
    margin-top: 16px;
    position: relative;
}

.publishshelf.active a {
    width: calc(100% / 2);
    padding: 16px 8px;
    border: 1px solid #DDD;
    transition: 0.3s;
    box-sizing: border-box;
    text-align: center;
}

.publishshelf.active a:hover {
    background-color: #F4EBE2;
    transform: scale(1.05);
}

.publishshelf.active a span {
    color: #333333;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
}

@media screen and (min-width:480px) {
    .publishshelf.oddbook.active a {
        width: calc(100% / 3);
    }

    .publishshelf.evenbook.active a {
        width: calc(100% / 4);
    }
}

/* footer */
footer {
    background-color: #f1f1f1;
}

footer .wrap {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 48px;
    padding: 32px 0 48px;
    box-sizing: border-box;
}

footer .item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

footer .item span {
    color: var(--black);
    display: inline-block;
    font-size: 28px;
    font-weight: 700;
    line-height: 100%;
    margin-bottom: 12px;
    white-space: nowrap;
    text-align: center;
    width: 100%;
}


footer .item .content,
footer .item.social ul {
    display: flex;
    gap: 12px;
}

footer .item.social ul li .pic {
    aspect-ratio: 1/1;
    max-width: 60px;
}

@media screen and (min-width: 768px) {
    footer .wrap {
        display: flex;
        justify-content: space-between;
    }

    footer .item {
        display: initial;
    }

    footer .item span {
        text-align: left;
    }
}

/* 底下虛線 */
.bookall {
    border: 1px dashed #cfcfcf;
}

.recommand .box {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.recommand .box a .txt {
    width: 100%;
}

.recommand .box a .txt p {
    color: #333333;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    transition: 0.3s;
    padding: 0 12px;
    box-sizing: border-box;
    word-wrap: break-word;
    width: 100%;
    white-space: normal;
}

.recommand .box a:hover .txt p {
    color: #e79600;
}

@media screen and (min-width: 576px) {
    .recommand .box {
        display: flex;
        flex-wrap: wrap ;
        justify-content: space-between;
        flex-direction: row;
        gap: 8px;
    }

    .recommand .box a {
        display: flex;
        flex-direction: column;
        min-width: 0;
        /* max-width: calc(100% / 3); */
    }

    .recommand .box a .pic img {
        width: 100%;
        display: block;
    }
}

#books-content5 .bookall_title a {
    background-color: #06c755;
}

/* ========================================= */
/* 參考 iT 邦幫忙文章後的跨瀏覽器修正方案 */
/* ========================================= */

/* 利用 @supports 確保 Safari 優先使用 webkit 系列 */
@supports selector(::-webkit-scrollbar) {
    /* 選定所有需要自定義滾動條的區塊 */
    .activity-rules .scroll-content,
    .tab_area,
    .purebookpack .bookall_area,
    .publisharea .boxbtnwrap {
        /* 1. 核心：Safari 必須有 background-color 在容器或 scrollbar 上才能觸發 */
        background-color: inherit; 
    }

    /* 2. 核心：寬度必須明確定義 */
    .activity-rules .scroll-content::-webkit-scrollbar,
    .tab_area::-webkit-scrollbar,
    .purebookpack .bookall_area::-webkit-scrollbar,
    .publisharea .boxbtnwrap::-webkit-scrollbar {
        display: block;
        width: 8px !important;
        height: 8px !important;
        background-color: #DDDDDD; /* 軌道背景色 */
    }

    /* 3. 滑塊樣式 */
    .activity-rules .scroll-content::-webkit-scrollbar-thumb,
    .tab_area::-webkit-scrollbar-thumb,
    .purebookpack .bookall_area::-webkit-scrollbar-thumb,
    .publisharea .boxbtnwrap::-webkit-scrollbar-thumb {
        background-color: #e79600; /* 您原本的橘色 */
        border-radius: 10px;
    }

    /* 4. 針對 tab_area 特殊處理，確保水平捲動條出現 */
    .tab_area::-webkit-scrollbar-thumb {
        background-color: #e4920d;
    }
}

/* Firefox 專用 (文章推薦的相容寫法) */
@supports (scrollbar-color: auto) {
    .activity-rules .scroll-content,
    .tab_area,
    .purebookpack .bookall_area,
    .publisharea .boxbtnwrap {
        scrollbar-color: #e79600 #DDDDDD;
        scrollbar-width: thin;
    }
}