@import url('/css/webfonts.css');

body {
    margin: 0px;
    padding: 0px;
}
a, a:visited, a:hover {
    color: inherit;
    text-decoration: none;
}



/* 黑體：大標題 1 */
.B-h1 {
    color: var(--text-color-100, #000);
    font-family: Noto Sans TC;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 50px */
    letter-spacing: 4px;
}
/* 黑體：大標題 2 */
.B-h2 {
    color: var(--text-color-100, #000);
    font-family: Noto Sans TC;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 40px */
    letter-spacing: 3.2px;
}
/* 黑體：大標題 3 */
.B-h3 {
    color: var(--text-color-100, #000);
    font-family: Noto Sans TC;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 30px */
    letter-spacing: 2.4px;
}
/* 黑體：主分類標題 */
.B-h4 {
    color: var(--text-color-100, #000);
    font-family: Noto Sans TC;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 30px */
    letter-spacing: 2.2px;
}
/* 作者簡介內文 */
.B-intro {
    color: #000;
    text-align: justify;
    font-family: Noto Sans TC;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 33px; /* 165% */
    letter-spacing: 0.6px;
}
/* 黑體：標題與書名 */
.B-title {
    color: var(--text-color-100, #000);
    font-family: Noto Sans TC;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 23.4px */
    letter-spacing: 0.18px;
}
/* 黑體：副標題 */
.B-subtitle {
    color: var(--text-color-100, #000);
    font-family: Noto Sans TC;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%; /* 18.2px */
    letter-spacing: 0.98px;
}
/* 黑體：內文文字 */
.B-content {
    color: var(--text-color-100, #000);
    font-family: Noto Sans TC;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 28.8px */
    letter-spacing: 0.18px;
}
/* 黑體：備註文字 */
.B-note {
    color: var(--text-color-100, #000);
    font-family: Noto Sans TC;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 16.8px */
}
/* 黑體：輔助文字 */
.B-assist {
    color: var(--text-color-100, #000);
    font-family: Noto Sans TC;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 14px */
}
/* 黑體：按鈕文字(大) */
.B-btn-lg {
    color: var(--text-color-100, #000);
    font-family: Noto Sans TC;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 112.5%; /* 22.5px */
}
/* 黑體：按鈕文字(中) */
.B-btn-md {
    color: var(--text-color-100, #000);
    font-family: Noto Sans TC;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;   /* 原 700*/
    line-height: 112.5%; /* 16.875px */
}
/* 黑體：按鈕文字(小) */
.B-btn-sm {
    color: var(--text-color-100, #000);
    font-family: Noto Sans TC;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 18.2px */
}


/* 宋體：大標題 1 */
.S-h1 {
    color: var(--text-color-100, #000);
    font-family: Noto Serif TC;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 50px */
    letter-spacing: 4px;
}
/* 宋體：大標題 2 */
.S-h2 {
    color: var(--text-color-100, #000);
    font-family: Noto Serif TC;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 40px */
    letter-spacing: 3.2px;
}
/* 宋體：大標題 3 */
.S-h3 {
    color: var(--text-color-100, #000);
    font-family: Noto Serif TC;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 30px */
    letter-spacing: 2.4px;
}
/* 宋體：大標題 4 */
.S-h4 {
    color: var(--text-color-100, #000);
    font-family: Noto Serif TC;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 25px */
    letter-spacing: 2px;
}
/* 宋體：大標題 5 */
.S-h5 {
    color: var(--text-color-100, #000);
    font-family: Noto Serif TC;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 20px */
    letter-spacing: 1.6px;
}
/* 宋體：備註文字 */
.S-note {
    color: var(--text-color-100, #000);
    font-family: Noto Serif TC;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 12.5px */
    letter-spacing: 1px;
}
/* 宋體：按鈕文字(大) */
.S-btn-lg {
    color: var(--text-color-100, #000);
    font-family: Noto Serif TC;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 112.5%; /* 20.25px */
    letter-spacing: 2.7px;
}
/* 宋體：按鈕文字(中) */
.S-btn-md {
    color: var(--text-color-100, #000);
    font-family: Noto Serif TC;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 112.5%; /* 19.125px */
    letter-spacing: 1.7px;
}
/* 宋體：按鈕文字(小) */
.S-btn-sm {
    color: var(--text-color-100, #000);
    font-family: Noto Serif TC;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 112.5%; /* 14.625px */
    letter-spacing: 1.3px;
}


.linking1 {
    color: var(--text-color-100, #000);
    font-family: sorts-mill-goudy;  /* OFL Sorts Mill Goudy TT */
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 125%; /* 50px */
    letter-spacing: 2px;
}
.linking2 {
    color: var(--text-color-100, #000);
    font-family: sorts-mill-goudy;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 125%; /* 40px */
    letter-spacing: 1.6px; 
}
.note {
    color: var(--text-color-100, #000);
    font-family: sorts-mill-goudy;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 125%; /* 15px */
    letter-spacing: 0.6px;
}
.btn-lg {
    color: var(--text-color-100, #000);
    font-family: sorts-mill-goudy;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 33.6px */
    letter-spacing: 1.2px;
}
.btn-md {
    color: var(--text-color-100, #000);
    font-family: sorts-mill-goudy;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 25.2px */
    letter-spacing: 0.9px;
}
.number-1 {
    color: var(--text-color-100, #000);
    font-family: Judson;
    font-size: 48px;
    font-style: italic;
    font-weight: 400;
    line-height: 125%; /* 60px */
    letter-spacing: 2.4px;
}
.number-2 {
    color: var(--text-color-100, #000);
    font-family: Judson;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%; /* 50px */
    letter-spacing: 2px;
}
.number-3 {
    color: var(--text-color-100, #000);
    font-family: Judson;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%; /* 37.5px */
}
.number-4 {
    color: var(--text-color-100, #000);
    font-family: Judson;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%; /* 25px */
    letter-spacing: 1px;
}
.number-5 {
    color: var(--text-color-100, #000);
    font-family: Judson;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%; /* 15px */
    letter-spacing: 0.6px;
}
.font-color-red {
    color: #EE0303;
}
.font-color-black {
    color:#000000;
}
.font-color-light-black {
    color: #202020;
}
.font-color-gray {
    color: #646464;
}
.font-color-light-gray {
    color: #9b9b9b;
}
.font-color-white {
    color: #FFFFFF;
}


.color-primary-tint {
    background-color: #fff0ef;
}
.color-primary-light {
    background-color: #FF7875;
}
.color-primary-default {
    background-color: #EE0303;
}
.color-primary-dark {
    background-color: #AE0301;
}
.color-primary-bg {
    background-color: #FFFFFF;
}
.color-secondary-orange_red {
    background-color: #CC9420;
}
.color-secondary-copper {
    background-color: #815703;
}
.color-secondary-pale_yellow {
    background-color: #FFEDC8;
}
.color-grey-1 {
    background-color: #000000;
}
.color-grey-2 {
    background-color: #212121;
}
.color-grey-3 {
    background-color: #424242;
}
.color-grey-4 {
    background-color: #616161;
}
.color-grey-5 {
    background-color: #757575;
}
.color-grey-6 {
    background-color: #9E9E9E;
}
.color-grey-7 {
    background-color: #BDBDBD;
}


.layout-block {
    display: block;     /* 設 DIV 為 block，以讓 margin 的 auto 值生效 */
    margin: 0 auto;     /* 設 DIV 左右 margin 值 auto，讓 DIV 水平居中 */
    width: 1140px;
}


/* icon, button */

.fb_circle_white { background-image: url('/images/common/fb_circle_white_normal.svg'); }
.fb_circle_white:hover { background-image: url('/images/common/fb_circle_white_hover.svg'); }
.ig_circle_white { background-image: url('/images/common/ig_circle_white_normal.svg'); }
.ig_circle_white:hover { background-image: url('/images/common/ig_circle_white_hover.svg'); }

.favorite_icon_red { background-image: url('/images/common/favorite_icon_red_normal.svg'); }
.favorite_icon_red:hover { background-image: url('/images/common/favorite_icon_red_hover.svg'); }
.favorite_circle_white { background-image: url('/images/common/favorite_circle_white_normal.svg'); }
.favorite_icon_fill_red { background-image: url('/images/common/favorite_icon_fill_red.svg'); }
/* .favorite_circle_white:hover { background-image: url('/images/common/favorite_icon_red_hover.svg'); } */



.cart_icon_white { background-image: url('/images/common/cart_icon_white_normal.svg'); }
.cart_icon_white:hover { background-image: url('/images/common/cart_icon_white_hover.svg'); }
.cart_icon_red { background-image: url('/images/common/cart_icon_red_normal.svg'); }
.cart_icon_red:hover { background-image: url('/images/common/cart_icon_red_hover.svg'); }
.cart_circle_gray { background-image: url('/images/common/cart_circle_gray_normal.svg'); }
.add_cart_button { background-image: url('/images/common/add_cart_button_red_normal.svg'); }
.add_cart_button:hover { background-image: url('/images/common/add_cart_button_red_hover.svg'); }

.search_icon_white { background-image: url('/images/common/search_icon_white_normal.svg'); }
.search_icon_white:hover { background-image: url('/images/common/search_icon_white_hover.svg'); }
.search_icon_red { background-image: url('/images/common/search_icon_red_normal.svg'); }
.search_icon_red:hover { background-image: url('/images/common/search_icon_red_hover.svg'); }

.voice_icon_red { background-image: url('/images/common/voice_icon_red_normal.svg'); }
.voice_icon_red:hover { background-image: url('/images/common/voice_icon_red_hover.svg'); }

.keywords_button_white { background-image: url('/images/common/keywords_button_white_normal.svg'); }
.keywords_button_white:hover { background-image: url('/images/common/keywords_button_white_hover.svg'); }
.share_circle_white { background-image: url('/images/common/share_circle_white_normal.svg'); }
.up_circle_gray { background-image: url('/images/common/up_circle_gray_normal.svg'); }
.subscriber_button_white { background-image: url('/images/common/subscriber_button_white_normal.svg'); }
.subscriber_button_white:hover { background-image: url('/images/common/subscriber_button_white_hover.svg'); }

.member_icon_white { background-image: url('/images/common/member_icon_white_normal.svg'); }
.member_icon_white:hover { background-image: url('/images/common/member_icon_white_hover.svg'); }
.member_icon_red { background-image: url('/images/common/member_icon_red_normal.svg'); }
.member_icon_red:hover { background-image: url('/images/common/member_icon_red_hover.svg'); }
.sign_member_button_white { background-image: url('/images/common/sign_member_button_white_normal.svg'); }
.sign_member_button_white:hover { background-image: url('/images/common/sign_member_button_white_hover.svg'); }


.input_text_borderless {
    border: 0px;
    outline: none;
}
.input_text_borderless:hover {
    border: 0px;
    outline: none;
}


.tags-cloud-block {
    height:18px;
    min-width:40px;
    border-color:#9b9b9b;
    border-style:solid;
    border-width:thin;
    border-radius:40px;
    padding:6px 14px 6px 14px;
    margin:0px 3px 12px 3px;
    white-space:nowrap;
    text-align:center;
}

.number_circle_red {
    width: 40px; height: 40px; background: #EE0303; border-radius: 27px; padding-right: 0px;
    text-align: center; color: #FFF; font-size: 18px; font-style: normal; font-weight: 600; line-height: 30px; letter-spacing: 1.98px; 
    display: flex; justify-content: center; align-items: center; flex-shrink: 0;
}
.number_circle_gray {
    width: 40px; height: 40px; background: #BDBDBD; border-radius: 27px; padding-right: 0px;
    text-align: center; color: #FFF; font-size: 18px; font-style: normal; font-weight: 600; line-height: 30px; letter-spacing: 1.98px; 
    display: flex; justify-content: center; align-items: center; flex-shrink: 0;
}
.number_circle_white {
    width: 40px; height: 40px; background: #FFFFFF; border-radius: 27px; padding-right: 0px;
    text-align: center; color: #000; font-size: 18px; font-style: normal; font-weight: 600; line-height: 30px; letter-spacing: 1.98px;
    display: flex; justify-content: center; align-items: center; flex-shrink: 0;
}

.full-overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);  /* 半透明黑色背景 */
    display: none;  /* 初始隱藏 */
    z-index: 99;
}
.overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color:#ffffff;
    padding: 20px;
    box-shadow: 0px 0px 0px 0px 10px rgba(0, 0, 0, 0.9);
}
.overlay-close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background-image: url('/images/common/icon-x-white_128x128.svg');
    background-size: 32px 32px;
}


/* 設置全屏的 loading 容器 */
.loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 8px solid #f3f3f3; /* 淺色外圈 */
    border-top: 8px solid #3498db; /* 深色頂圈 */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
/* 定義旋轉動畫 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.loader_text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + 25px), calc(-50% + 80px));
    min-width: 160px;
    max-width: 160px;
    text-align: center;
    font-family: "Microsoft JhengHei", sans-serif;
    font-size: 14px;
    color: white;
    /* background-color: rgba(128, 128, 128, 0.25); */
}
.loader_container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + 25px), calc(-50% + 45px));
    min-width: 180px;
    max-width: 180px;
    min-height: 120px;
    max-height: 120px;
    border-radius: 10px;
    background-color: rgba(64, 64, 64, 0.85);
}



/* List Layout */
.list-container {
    display: flex;
    flex-direction: row;
    align-items:flex-start;
    flex-wrap:wrap;
}
/* 預設情況: 左到右排列 */
.list-container:has(.list-item:nth-last-child(2):first-child) {
    justify-content: flex-start;
}
/* 項目數量大於2時: 平均排列 */
.list-container:has(.list-item:nth-last-child(3):first-child) {
    justify-content: space-between;
}