/* ═══════════════════════════════════════════════════════
   new_web_general.css
   校園福音團契 官網共用樣式
   
   目錄
   ──────────────────────────────────────────────────────
   [BASE]        基礎、reset、連結
   [HEADER]      固定 header / 漢堡選單
   [HERO]        頁首大圖（各頁 class）
   [LAYOUT]      全域排版容器
   [CONTENT]     內文區塊、標題、text_block
   [TAB]         Tab 切換列（sub_page / explain_choose）
   [LINK]        link_arrow 系列
   [IMG_TEXT]    img_with_text_block 系列
   [FILTER]      篩選按鈕 filter_option / filter_dropdown
   [NOTIFY]      text_notification_block
   [ABOUT]       關於我們：teams、org 組織圖
   [ACTIVITY]    活動頁：卡片、一覽表、活動詳情
   [BLOG]        部落格：列表、詳情、relation_page
   [SUPPORT]     支持我們：category_btn、奉獻、訂閱電子報
   [FELLOWSHIP]  學校團契：地圖、搜尋、tooltip、表格
   [ANNUAL]      2025 年報：圖表、書籍、比例圖示
   [POLICY]      性騷擾防治 / 個資保護
   [FOOTER]      頁尾
   [RESPONSIVE]  Media Queries
   ═══════════════════════════════════════════════════════ */


/* ── [BASE] ─────────────────────────────────────────── */

body {
    font-family: 'Taipei Sans TC', 'Microsoft JhengHei', sans-serif;
    margin: 0;
    padding: 0;
    background: #FFFEF2;
    width: 100%;
}

html {
    scroll-behavior: smooth;
}

#anchor_1,
#anchor_2,
#anchor_3 {
    scroll-margin-top: 60px;
}

a {
    text-decoration: none;
    color: #233144;
}

.a_tag_normal {
    color: #9d9d9d;
    text-decoration: underline;
    text-decoration-color: #68F73C;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.a_tag_normal:hover {
    transition: .4s;
    cursor: pointer;
    color: #68F73C;
    text-decoration-color: #9d9d9d;
}

.all_content {
    margin-top: 50px;
    overflow-x: hidden;
}

input::placeholder {
    color: #d0d0d0;
}


/* ── [HEADER] ────────────────────────────────────────── */

.header_menu_container {
    width: 90vw;
    padding: 0 5vw;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10000;
    box-shadow: 0px 4px rgba(0, 0, 0, .1);
    opacity: 1;
}

.header_menu_container.header_menu_container_main_page {
    opacity: 0;
}

.header_menu_left {
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.header_menu_right {
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}

.header_menu {
    font-size: 14px;
    color: #233144;
    font-weight: 300;
    letter-spacing: 1.2px;
    font-family: 'Taipei Sans TC', 'Microsoft JhengHei', sans-serif;
}

.header_menu:hover {
    cursor: pointer;
    border-bottom: 4px solid #68F73C;
    padding-bottom: 5px;
    transition: .4s;
    color: #9d9d9d;
    font-weight: 600;
}

.header_menu_icon {
    width: 24px;
    height: 24px;
    background: url('/images/main/logo_3.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
}

.header_menu_mobile_left_block {
    width: 26px;
    height: 26px;
}

.header_menu_mobile_conatiner {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.header_menu_mobile {
    background: #ffffff;
    padding: 0 10px;
    font-size: 14px;
    color: #233144;
    font-weight: 300;
    letter-spacing: 1.2px;
    font-family: 'Taipei Sans TC', 'Microsoft JhengHei', sans-serif;
}


/* ── [HERO] ─────────────────────────────────────────── */

.main_img_container {
    width: 100vw;
    height: 56vh;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.main_img_title_block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main_img_title_ch {
    letter-spacing: 20px;
    font-weight: 700;
    color: #ffffff;
    font-size: 45px;
    height: 65px;
    display: flex;
    position: relative;
    margin-right: -20px;
}

.main_img_title_en {
    font-weight: 300;
    color: #ffffff;
    font-size: 19px;
    display: flex;
    justify-content: space-between;
}

.main_img_title_mark {
    width: 40px;
    height: 40px;
    position: absolute;
    left: -18px;
    top: -19px;
    background: url('/images/main/r1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* 各頁 hero 背景圖 */
.main_img_support_us {
    background-image: url('/images/main/21.jpg');
}

.main_img_container_about_us {
    background-image: url('/images/main/a0016.jpg');
}

.main_img_container_about_us_history {
    background-image: url('/images/main/32.jpg');
}

.main_img_container_event_information {
    background-image: url('/images/main/41_01.jpg');
}

.main_img_container_fellowship {
    background-image: url('/images/main/51.jpg');
}

/* 年報 hero 在 annual_report_2025.css 裡另設 */


/* ── [LAYOUT] ────────────────────────────────────────── */

.full_text_content_block {
    padding: 15px 0;
}

.full_text_content_block_news {
    padding-top: 60px;
}

.text_block_container {
    margin: 50px calc(100% / 12) 0 calc(100% / 12);
}

.sub_page_main_describe {
    font-family: 'creamfont', 'Microsoft JhengHei', sans-serif;
    font-size: 16px;
    line-height: 36px;
    color: #16292E;
    text-align: center;
    width: 70%;
    min-height: 22vh;
    padding: 20px 15% 20px 15%;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* ── [CONTENT] ───────────────────────────────────────── */

.recent_ac_main_title {
    font-size: 33px;
    font-weight: 600;
    color: #233144;
    position: relative;
    margin-bottom: 28px;
    line-height: 2.2rem;
}

.recent_ac_main_title_mark {
    width: 35px;
    height: 35px;
    position: absolute;
    left: -16px;
    top: -17px;
    background: url('/images/main/r1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.recent_ac_main_title_small {
    font-size: 23px;
}

.main_title_chi {
    font-size: 28px;
}

.text_block {
    margin: 0 0 60px calc(100% / 12 * 2);
    font-size: 1rem;
    line-height: 2rem;
    letter-spacing: .3px;
    color: #233144;
}

.text_title_second {
    font-size: 1.3rem;
    margin: 15px 0 10px calc(-100% / 12);
    font-weight: 600;
    position: relative;
}

.text_title_third {
    font-weight: 600;
    font-size: 1.16rem;
    margin: 25px 0 10px 0;
}

.lower_letter_list {
    list-style-type: lower-alpha;
}

.contact_google_map {
    width: 100%;
    aspect-ratio: 4/1;
    border-radius: 25px;
    margin-top: 10px;
    margin-bottom: 10px;
    background: url('/images/main/google_map.png') center / cover;
}

.teaxt_normal_right {
    width: 100%;
    text-align: right;
}

.img_placeholder {
    width: 100%;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #555;
    font-weight: 500;
    margin: 20px 0;
    letter-spacing: 0.5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 4/2;
    opacity: .85;
}


/* ── [TAB] ───────────────────────────────────────────── */

.sub_page_main_tab_block {
    width: fit-content;
    height: 45px;
    background: #E2EF9F;
    box-shadow: 6px 6px rgba(0, 0, 0, .3);
    border-radius: 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto -20px auto;
    padding: 0 5px;
}

.explain_choose_tab_block {
    width: fit-content;
    height: 45px;
    background: #E2EF9F;
    box-shadow: 6px 6px rgba(0, 0, 0, .3);
    border-radius: 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: -20px;
    padding: 0 5px;
}

.explain_choose_text_block {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    font-size: 16px;
    color: #16292E;
    position: relative;
    height: 45px;
}

.explain_choose_text_block:hover {
    transition: .5s;
    transform: translate(-4px, -4px);
    text-shadow: 4px 4px rgba(0, 0, 0, .1);
    font-weight: 600;
    cursor: pointer;
}

.explain_choose_sign {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 20px);
    height: 6px;
    background: #68F73C;
    display: none;
}

.explain_choose_text_select {
    font-weight: 600;
}

.explain_choose_text_select:hover {
    cursor: default;
    transform: none;
    text-shadow: none;
    font-weight: 600;
}

.explain_choose_text_select .explain_choose_sign {
    display: flex;
}

.tab-content-panel {
    display: none;
    opacity: 0;
}

.tab-content-panel.active {
    display: block;
    opacity: 1;
}


/* ── [LINK] ─────────────────────────────────────────── */

.link_arrow_text_block {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 15px;
}

.link_arrow_text_block:hover {
    cursor: pointer;
}

.link_arrow_text {
    font-size: 1rem;
    color: #9d9d9d;
}

.link_arrow_sign {
    width: 50px;
    height: 12px;
    background: url('/images/main/link_green_arrow_01.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.link_arrow_text_title_second_sign {
    width: 65px;
    height: 16px;
    background: url('/images/main/green_arrow_1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.link_arrow_text_block:hover .link_arrow_text_title_second_sign {
    transition: .5s;
    width: 80px;
    height: 15px;
    background: url('/images/main/green_arrow_02.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.link_arrow_text_block_small {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 15px;
}

.link_arrow_text_block_small:hover {
    cursor: pointer;
}

.link_arrow_text_block_small:hover .link_arrow_sign {
    transition: .5s;
    width: 80px;
    height: 12px;
    background: url('/images/main/link_green_arrow_02.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.link_arrow_text_block_small:hover .link_arrow_text {
    transition: .5s;
    color: #6c6c6c;
}


/* ── [IMG_TEXT] ─────────────────────────────────────── */

.img_with_text_block_1 {
    width: 100%;
    height: 140px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    gap: 25px;
    align-items: center;
    border-radius: 25px;
    background-color: #FFFEF2;
}

.img_with_text_1 {
    background: url('/images/main/asgreen.jpg');
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    flex: 1;
    height: 100%;
}

.img_with_text_block_2 {
    width: 100%;
    height: 230px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.img_with_text_2 {
    background: url('/images/main/asaa.jpg');
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: #ffffff;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box_big {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.img_with_text_number {
    font-weight: 600;
    font-size: 32px;
    padding-bottom: 8px;
    padding-right: 5px;
}


/* ── [FILTER] ────────────────────────────────────────── */

.filter_option_btn_block {
    width: calc(100% / 12 * 10);
    margin: 0 calc(100% / 12) 25px calc(100% / 12);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.filter_option_btn {
    padding: 1px 19px;
    height: 35px;
    background: #EFF7C7;
    color: #16292E;
    box-shadow: 4px 4px rgba(0, 0, 0, .3);
    border-radius: 13px;
    font-size: 14px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.filter_option_btn_select {
    box-shadow: none;
    transform: translate(4px, 4px);
}

.filter_option_btn:hover {
    cursor: pointer;
    transition: .5s;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px rgba(0, 0, 0, .4);
    font-weight: 600;
    background-color: #E2EF9F;
}

.filter_option_btn_block_blog_detail {
    justify-content: flex-start;
    margin: 0 0 25px 0;
}

.filter_dropdown_btn_block {
    width: calc(100% / 12 * 10);
    margin: 0 calc(100% / 12) 25px calc(100% / 12);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.filter_dropdown_btn {
    padding: 1px 10px;
    width: 115px;
    height: 35px;
    background: #EFF7C7;
    color: #16292E;
    box-shadow: 4px 4px rgba(0, 0, 0, .3);
    border-radius: 13px;
    font-size: 14px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: none;
}

.filter_dropdown_btn:hover {
    cursor: pointer;
    transition: .5s;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px rgba(0, 0, 0, .4);
    font-weight: 600;
    background-color: #E2EF9F;
}

.filter_dropdown_btn_block .filter_option_btn {
    margin-left: 15px;
}

.filter_tags {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    min-height: 26px;
}

.filter-tag {
    background: #E2EF9F;
    border-radius: 10px;
    padding: 3px 12px;
    font-size: 13px;
    color: #233144;
    cursor: pointer;
    border: none;
    font-family: 'Microsoft JhengHei', sans-serif;
}

.filter-tag:hover { background: #B8EF82; }
.filter-tag.clear { background: #efefef; color: #888; }


/* ── [NOTIFY] ────────────────────────────────────────── */

.text_notification_block {
    margin: 0px calc(100% / 12 * 3);
    background: #FBF3FD;
    padding: 25px calc(100% / 24);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9%;
    border-radius: 25px;
}

.text_notification_icon {
    width: 45px;
    height: 45px;
    background: url('/images/main/icons/bell_normal_icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.text_notification_content {
    flex: 1;
    font-size: 15px;
    line-height: 30px;
}


/* ── [ABOUT] 關於我們 ────────────────────────────────── */

.teams_pic {
    aspect-ratio: 5/3;
    width: 40%;
    margin: 6px 0 20px 20px;
    float: right;
    opacity: .85;
    border-radius: 25px;
    max-width: 400px;
}

.teams_text_block {
    min-height: 265px;
}

.teams_pic_1 { background: url('/images/main/teams/總部.png') center / cover; }
.teams_pic_2 { background: url('/images/main/teams/總幹事辦公室.png') center / cover; }
.teams_pic_3 { background: url('/images/main/teams/行政部.png') center / cover; }
.teams_pic_4 { background: url('/images/main/teams/財務部.png') center / cover; }
.teams_pic_5 { background: url('/images/main/teams/人資與培育部.png') center / cover; }
.teams_pic_6 { background: url('/images/main/teams/團契本部.png') center / cover; }
.teams_pic_7 { background: url('/images/main/teams/北區大學.png') center / cover; }

.text_history_block_unit {
    width: 100%;
    padding-left: 15px;
    border-left: 1px solid #707070;
    margin-bottom: 20px;
}

/* 組織圖 */
.org-node-p {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #E4F7E5;
    color: #233144;
    border-radius: 6px;
    padding: 5px 14px;
    white-space: nowrap;
    font-size: 12.5px;
    line-height: 1.5;
}

.org-note-text { font-size: 11px; color: #aaa; margin-top: 12px; }

.org-mobile  { display: block; }
.org-desktop { display: none; }

.org-v-wrap { margin: 14px 0 4px; font-size: 12.5px; color: #233144; }

.org-v-children {
    border-left: 1.5px solid #707070;
    margin-left: 18px;
    padding-left: 14px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.org-v-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.org-v-item::before {
    content: '';
    position: absolute;
    top: 13px;
    left: -14px;
    width: 10px;
    height: 1.5px;
    background: #707070;
}

.org-v-children > .org-v-item:last-child::after {
    content: '';
    position: absolute;
    top: 14px;
    left: -16px;
    width: 2px;
    bottom: 0;
    background: #FFFEF2;
}

.org-v-label {
    padding: 2px 0;
    line-height: 1.6;
    font-size: 12.5px;
    color: #233144;
}


/* ── [ACTIVITY] 活動頁 ───────────────────────────────── */

.recent_ac_full_container {
    width: calc(100% / 12 * 10);
    margin: 110px calc(100% / 12) 0 calc(100% / 12);
}

.recent_ac_container {
    width: 100%;
    margin: 30px 0 60px 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5%;
}

.ac_full_container {
    width: 100%;
    margin: 0px 0 45px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.recent_ac_block {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #707070;
}

.recent_ac_pic {
    width: 100%;
    aspect-ratio: 5/7;
    border: 1px solid green;
    border-radius: 35px;
    box-shadow: 10px 10px rgba(0, 0, 0, .3);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 25px;
}

.recent_ac_pic:hover {
    cursor: pointer;
    transition: .5s;
    transform: translate(-7px, -7px);
    box-shadow: 17px 17px rgba(0, 0, 0, .5);
    font-weight: 600;
}

.recent_ac_pic_1 { background: url('/images/main/ac_01.png'); }
.recent_ac_pic_2 { background: url('/images/main/ac_02.png'); }
.recent_ac_pic_3 { background: url('/images/main/ac_03.png'); }

.ac_info_full_block { width: 100%; }

.ac_info_top_block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #28723F;
    margin-bottom: 7px;
}

.ac_info_date  { font-size: 12px; }
.ac_info_location { font-size: 12px; }

.ac_title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 7px;
    line-height: 25px;
}

.recent_ac_time { font-size: 12px; margin-bottom: 10px; }

.ac_qualify { font-size: 12px; line-height: 16px; }

.recent_ac_more_btn {
    width: 125px;
    height: 45px;
    background: #E2EF9F;
    color: #16292E;
    box-shadow: 6px 6px rgba(0, 0, 0, .3);
    border-radius: 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: auto;
}

.recent_ac_more_btn:hover {
    cursor: pointer;
    transition: .5s;
    transform: translate(-5px, -5px);
    box-shadow: 11px 11px rgba(0, 0, 0, .5);
    background: #B8EF82;
    font-weight: 600;
}

.text_block_container.ac_page {
    margin-top: 0px;
    margin-bottom: 60px;
}

/* 活動一覽表 */
.full_ac_list_block {
    width: calc(100% / 12 * 10);
    margin: 0 calc(100% / 12) 50px calc(100% / 12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.full_ac_list_block.hidden { display: none; }

.ac_list_item {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    padding-bottom: 15px;
    justify-content: space-between;
    border-bottom: 1px solid #28723F;
    color: #9d9d9d;
}

.ac_list_item div { line-height: 22px; }

.ac_name {
    margin: 0 15px;
    flex: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    color: #233144;
}

.ac_audience {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 2;
}

.ac_time     { flex: 1; }
.ac_location { flex: 1; text-align: right; }

.ac_list_item:hover {
    transition: .4s;
    cursor: pointer;
    color: #68F73C;
    border-bottom: 1px solid #9d9d9d;
}

.ac_list_item:hover .ac_name {
    color: #68F73C;
    transition: .4s;
}

/* 活動詳情 */
.ac_detail_img_block {
    width: 100%;
    height: 70vh;
    margin-bottom: 50px;
}

.ac_detail_img {
    width: 100%;
    height: 100%;
    background-image: url('/images/main/ac_01.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


/* ── [BLOG] 部落格 ───────────────────────────────────── */

.blog_full_container {
    width: 100%;
    margin: 40px 0 0px 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 5%;
}

.blog_block {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #707070;
    margin-bottom: 50px;
}

.blog_pic_1 { background: url('/images/main/blog_01.png'); }
.blog_pic_2 { background: url('/images/main/blog_02.png'); }
.blog_pic_3 { background: url('/images/main/blog_03.png'); }
.blog_pic_4 { background: url('/images/main/blog_04.png'); }
.blog_pic_5 { background: url('/images/main/blog_05.png'); }
.blog_pic_6 { background: url('/images/main/blog_06.png'); }

.blog_pic {
    width: 100%;
    aspect-ratio: 10/7;
    border-radius: 35px;
    box-shadow: 10px 10px rgba(0, 0, 0, .3);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 25px;
    opacity: .85;
}

.blog_pic:hover {
    cursor: pointer;
    transition: .5s;
    transform: translate(-7px, -7px);
    box-shadow: 17px 17px rgba(0, 0, 0, .5);
    font-weight: 600;
}

.blog_info_full_block { width: 100%; }

.blog_line_date_block {
    display: flex;
    justify-content: stretch;
    align-items: center;
    width: 100%;
    margin-bottom: 7px;
}

.blog_line {
    flex: 1;
    height: 1px;
    background-color: #bababa;
}

.blog_date {
    font-size: 12px;
    margin-left: 5px;
    color: #BABABA;
}

.blog_title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 7px;
    line-height: 27px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #707070;
    min-height: 48px;
}

.blog_brief_text {
    font-size: 12px;
    line-height: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #707070;
}

/* 部落格詳情 */
.blog_detail_info_block {
    font-size: 13px;
    color: #b5b5b5;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    margin-top: 40px;
}

.blog_detail_img_block {
    width: calc(100% / 12 * 10);
    margin: 40px calc(100% / 12) 0 calc(100% / 12);
    aspect-ratio: 11/3;
    background: url('/images/main/blog_detail_01.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .85;
    border-radius: 35px;
}

.blog_detail_special_part {
    width: calc(100% - 120px);
    background: #F3F8FD;
    border-radius: 35px;
    padding: 35px 60px;
    margin: 20px 0;

}

.blog_search_bar{
    position: relative;
    border-radius: 13px;
    border: 1.5px solid #b0b0b0;
    box-shadow: 4px 4px rgba(0, 0, 0, .3);
    margin-left: 10px;
}

.search_icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 17px;
    color: #aaa;
    cursor: pointer;
}

.blog_search_bar input {
    /* width: calc(100% - 50px); */
    width: 100px;
    height: 30px;
    background: none;
    background-color: transparent !important;
    border: none;
    outline: none;
    margin-left: 40px;
}

.recent_ac_more_btn{
    width: 125px;
    height: 45px;
    background: #E2EF9F;
    color: #16292E;
    box-shadow: 6px 6px rgba(0, 0, 0, .3);
    border-radius: 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: auto;
}

.text_block_container_blog{
    padding-bottom: 40px;
}

/* relation_page（關於我們 / 營會網站） */
.relation_page_block { margin-bottom: 20px; }

.relation_page_1 { background: url('/images/main/青宣.png') center / cover; }
.relation_page_2 { background: url('/images/main/大靈班.png') center / cover; }
.relation_page_3 { background: url('/images/main/全中門大.png') center / cover; }
.relation_page_4 { background: url('/images/main/校園書房.png') center / cover; }
.relation_page_5 { background: url('/images/main/ifes_s.png') center / cover; }


/* ── [SUPPORT] 支持我們 ──────────────────────────────── */

.category_btn_full_content {
    width: calc(100% / 12 * 10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 60px calc(100% / 12) 50px calc(100% / 12);
}

.category_btn {
    flex: 1;
    height: 100px;
    background: #E2EF9F;
    border-radius: 20px;
    position: relative;
    box-shadow: 8px 8px rgba(0, 0, 0, .3);
}

.category_btn:hover {
    cursor: pointer;
    transition: .5s;
    transform: translate(-6px, -6px);
    box-shadow: 14px 14px rgba(0, 0, 0, .5);
    background: #B8EF82;
    font-weight: 600;
}

.category_btn_title {
    position: absolute;
    left: 16px;
    bottom: 12px;
    font-size: 14px;
    line-height: 18px;
}

.category_btn_icon {
    position: absolute;
    top: 10px;
    right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.dedication_btn_personal    { width:28px; height:28px; background:url('/images/main/icons/Artboard – 1.png'); }
.dedication_btn_credit_card { width:28px; height:28px; background:url('/images/main/icons/Artboard – 2.png'); }
.dedication_btn_post_office { width:28px; height:28px; background:url('/images/main/icons/Artboard – 3.png'); }
.dedication_btn_bank        { width:28px; height:28px; background:url('/images/main/icons/Artboard – 4.png'); }
.dedication_btn_cash        { width:28px; height:28px; background:url('/images/main/icons/Artboard – 5.png'); }
.dedication_btn_global      { width:28px; height:28px; background:url('/images/main/icons/Artboard – 6.png'); }

/* 訂閱電子報 */
.subscribe_option_full_block {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: stretch;
}

.subscribe_option_block {
    flex: 1;
    min-width: 200px;
    background: #E4F7E5;
    border-radius: 25px;
    padding: 20px;
}

.subscribe_catygory_name {
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #ffffff;
}

.subscribe_option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 15px;
    cursor: pointer;
    transition: background 0.15s;
    margin: 5px 0;
}

.subscribe_option:hover {
    background: #E2EF9F;
    transition: .4s;
    cursor: pointer;
}

.subscribe_checkbox {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: url('/images/main/plus_sub.png') center / cover;
    box-shadow: 3px 3px rgba(0, 0, 0, .2);
    transition: all 0.15s;
}

.subscribe_checkbox.checked {
    background: url('/images/main/check_sub_re.png') center / cover;
    box-shadow: none;
}

.subscribe_label { font-size: 14px; line-height: 1.4; font-weight: 600; }
.subscribe_dept  { font-size: 12px; color: #9d9d9d; font-weight: 300; }

.subscribe_option.checked { background: #FFFEF2; }

.link_arrow_sign_subscribe {
    width: 36px;
    height: 15px;
    background: url('/images/main/arrow_005.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: auto;
}

.subscribe_input_block {
    margin: 30px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
}

.subscribe_input input {
    width: 200px;
    height: 30px;
    border-radius: 12px;
    border: 1.5px solid #b0b0b0;
    padding: 0 10px;
    background: none;
    box-shadow: 2px 2px rgba(0, 0, 0, .2);
}

.subscribe_submit_btn {
    width: 125px;
    height: 45px;
    background: #E2EF9F;
    color: #16292E;
    box-shadow: 6px 6px rgba(0, 0, 0, .3);
    border-radius: 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: auto;
    margin-top: 10px;
}

.subscribe_submit_btn:hover {
    cursor: pointer;
    transition: .5s;
    transform: translate(-5px, -5px);
    box-shadow: 11px 11px rgba(0, 0, 0, .5);
    background: #B8EF82;
    font-weight: 600;
}

.subscribe_submit_btn_group {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}

.subscribe_submit_btn_group .subscribe_submit_btn { margin: 0; }

.subscribe_query_btn { background: #fff; color: #b0b0b0; }
.subscribe_query_btn:hover { background: #f5f5f5; color: #B8EF82; }




/* ── [POLICY] 性騷擾防治 / 個資保護 ─────────────────── */

.recent_ac_main_title_article {
    line-height: 44px;
}

.article_num {
    font-size: 1rem;
    font-weight: 600;
    color: #4F9B84;
    margin: 30px 0 6px 0;
    letter-spacing: .5px;
}

.article_block {
    margin-bottom: 10px;
}

.article_block ol {
    padding-left: 1.5em;
    margin: 8px 0;
}

.article_block ol li {
    margin-bottom: 6px;
    line-height: 2rem;
}

.article_block ol ol {
    list-style-type: lower-alpha;
    margin-top: 6px;
}

.contact_info_block {
    background: #F7FBF2;
    border-radius: 20px;
    padding: 22px 28px;
    margin: 16px 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact_info_row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: #233144;
}

.contact_info_label {
    font-weight: 600;
    min-width: 90px;
    color: #4F9B84;
}

.revision_block {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e0e0d8;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.revision_item {
    font-size: 13px;
    color: #aaa;
}


/* ── [FOOTER] ────────────────────────────────────────── */

footer {
    background: #3E3E3E;
    width: auto;
    height: 300px;
    padding: 15px calc(100% / 12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer_top_block { margin-bottom: 20px; }

.footer_cef_icon {
    background: url('/images/main/footer/footer_cef_icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 180px;
    height: 60px;
}

.footer_main_block {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 66px;
}

.footer_info_block {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.footer_info_media_block {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 12px;
}

.footer_ig_icon { background: url('/images/main/footer/footer_ig.png'); }
.footer_fb_icon { background: url('/images/main/footer/footer_fb.png'); }
.footer_yt_icon { background: url('/images/main/footer/footer_yt.png'); }

.footer_info_media {
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 20px;
}

.footer_info {
    color: #CACACA;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: .4px;
    line-height: 15px;
}

.footer_info:hover {
    color: #68F73C;
    font-weight: 600;
    transition: .4s;
    cursor: pointer;
}

.footer_info_title {
    color: #CACACA;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    height: 42px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: default;
}


/* ── [RESPONSIVE] Media Queries ─────────────────────── */

@media only screen and (max-width: 1110px) {
    .main_img_title_block { width: 50%; }
}

@media only screen and (max-width: 935px) {
    .header_menu_container {
        width: 93vw;
        padding: 0 4vw;
    }
}

@media only screen and (max-width: 900px) {
    .chart_container {
        flex-direction: column;
    }

    .an_chart {
        margin-bottom: 0;
    }

    .circle_chart_block {
        flex-direction: column;
    }

    .circle_chart_block > div:last-child {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .circle_chart_block > div:last-child canvas {
        max-width: 320px;
    }
}

@media only screen and (max-width: 810px) {
    .main_img_title_block {
        width: 70%;
    }

    .header_menu_mobile_conatiner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .header_menu_mobile_center_block {
        width: 26px;
        height: 26px;
        background: url('/images/main/logo_3.png');
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .header_menu_mobile_right_block {
        width: 26px;
        height: 26px;
        background: url('/images/main/menu1.png');
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin-right: 5px;
    }

    .header_menu_left, .header_menu_right {
        display: none;
    }

    .header_menu_mobile_dropdown {
        position: fixed;
        top: 50px;
        left: 0;
        width: 100%;
        background: #ffffff;
        box-shadow: 6px 6px 0px rgba(0, 0, 0, .3);
        display: flex;
        flex-direction: column;
        min-width: unset;
        z-index: 10001;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.4s ease;
    }

    .header_menu_mobile_dropdown.open {
        max-height: 500px;
    }

    .header_menu_mobile {
        padding: 13px 20px 13px calc(100% / 12);
        font-size: 14px;
        color: #233144;
        font-weight: 300;
        letter-spacing: 1.2px;
        font-family: 'Taipei Sans TC', 'Microsoft JhengHei', sans-serif;
        border-bottom: 2px solid #ffffff;
    }

    .header_menu_mobile:first-child  { padding-top: 23px; }
    .header_menu_mobile:last-child   { padding-bottom: 23px; border-bottom: none; }

    .header_menu_mobile:hover {
        cursor: pointer;
        border-bottom: 2px solid #68F73C;
        transition: .4s;
        color: #9d9d9d;
        font-weight: 600;
    }

    .sub_page_main_describe {
        font-size: 15px;
        padding: 20px 10%;
        width: 80%;
    }

    .teams_pic {
        width: 100%;
        border-radius: 20px;
    }

    .contact_google_map {
        border-radius: 20px;
        aspect-ratio: 16/7;
    }

    .filter_option_btn_block {
        width: 100%;
        margin: 0;
    }

    .filter_option_btn_block_blog_detail {
        margin-bottom: 25px;
    }

    .relation_page_block {
        margin-bottom: 0;
    }

    .blog_block {
        width: 100%;
    }

    .fellowship_pic {
        width: 100%;
        max-width: 100%;
    }

    .sub_page_main_tab_block {
        height: auto;
        flex-direction: row;
        align-items: stretch;
        padding: 4px 8px;
        width: fit-content;
    }

    .sub_page_main_tab_block .explain_choose_text_block {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        height: auto;
        padding: 6px 15px;
        justify-content: center;
        align-items: center;
        flex-direction: column-reverse;
    }

    .sub_page_main_tab_block .explain_choose_sign {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 6px;
        height: 90%;
        left: 8px;
    }

    .anre_dot   { width: 450px; right: -50%; }
    .anre_line  { width: 300px; height: 300px; top: -35px; }
    .anre_space { width: 390px; height: 300px; }

    .book_rank_grid { grid-template-columns: repeat(3, 1fr); }
    .book_grid { grid-template-columns: repeat(4, 1fr); }
}

@media only screen and (max-width: 700px) {
    footer {
        height: auto;
        padding-top: 20px;
        padding-bottom: 30px;
    }

    .footer_main_block {
        flex-wrap: wrap;
        row-gap: 20px;
        column-gap: 45px;
        justify-content: flex-start;
    }

    .page_wrap {
        flex-direction: column;
        padding-bottom: 0;
    }

    .map_side {
        height: 500px;
        aspect-ratio: auto;
        margin-bottom: 20px;
    }

    #map-svg { height: 500px; }

    .region_name_label { font-size: 16px; margin-bottom: 10px; }
    .region_desc_label { font-size: 12px; }

    .right_side { margin: 0 5%; }

    .bottom_fade_bar { height: 55px; }

    .ac_full_container { grid-template-columns: repeat(2, 1fr); }
    .ac_list_item { font-size: 13px; }
}

@media only screen and (max-width: 600px) {
    .filter_dropdown_btn_block { margin-bottom: 20px; }
    .ac_title { font-size: 16px; line-height: 22px; }
    .recent_ac_more_btn {
        width: 100px;
        height: 40px;
        background: #E2EF9F;
        color: #16292E;
        box-shadow: 6px 6px rgba(0, 0, 0, .3);
        border-radius: 15px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: auto;
        font-size: 14px;
    }
}

@media only screen and (max-width: 500px) {
    .text_block_container { margin-top: 30px; }

    .recent_ac_main_title {
        font-size: 26px;
        margin-bottom: 20px;
    }

    .main_title_chi { font-size: 24px; }

    .recent_ac_main_title_mark {
        width: 28px;
        height: 28px;
        left: -13px;
        top: -10px;
    }

    .text_block {
        font-size: .85rem;
        line-height: 1.6rem;
        margin-bottom: 40px;
    }

    .text_title_second { font-size: 1.15rem; }
    .text_title_third  { font-size: 1rem; }

    .link_arrow_text_title_second_sign { height: 13px; width: 53px; }
    .link_arrow_text  { font-size: .85rem; }
    .link_arrow_sign  { width: 40px; height: 11px; }

    .main_img_container { height: 34vh; }

    .main_img_title_ch {
        font-size: 38px;
        letter-spacing: 12px;
        margin-right: 0;
        height: 50px;
    }

    .main_img_title_mark {
        width: 40px;
        height: 40px;
        left: -18px;
        top: -19px;
    }

    .img_with_text_block_1, .img_with_text_block_2 { gap: 14px; }

    .img_with_text_1 {
        border-radius: 20px;
        font-size: .9rem;
        writing-mode: vertical-rl;
    }

    .img_with_text_1.img_with_text_annual { writing-mode: horizontal-tb; }

    .img_with_text_2 {
        border-radius: 20px;
        font-size: .9rem;
        flex-direction: column;
    }

    .img_with_text_number { font-size: 28px; }

    .sub_page_main_tab_block { margin-bottom: -12px; }

    .sub_page_main_tab_block .explain_choose_text_block { font-size: .9rem; }

    .sub_page_main_describe {
        font-size: 13px;
        line-height: 30px;
    }

    .text_notification_block {
        width: 75%;
        margin: 0 auto;
        padding: 15px 10%;
        gap: 10px;
        border-radius: 20px;
        flex-direction: column;
    }

    .text_notification_icon { width: 38px; height: 38px; }
    .text_notification_content { font-size: .85rem; }

    .subscribe_catygory_name { font-size: .9rem; }
    .subscribe_label  { font-size: .85rem; }

    .link_arrow_sign_subscribe {
        width: 34px;
        height: 13px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .subscribe_option_block {
        padding: 15px;
        border-radius: 20px;
    }

    .subscribe_option { padding: 5px 5px; }
    .subscribe_option_full_block { gap: 15px; }
    .subscribe_input input { font-size: .85rem; }

    .subscribe_submit_btn {
        width: 90px;
        height: 37px;
        font-size: .85rem;
        border-radius: 13px;
        box-shadow: 4px 4px rgba(0, 0, 0, .3);
    }

    .filter_dropdown_btn {
        width: 100px;
        height: 34px;
        font-size: .85rem;
    }

    .filter_dropdown_btn_block { margin: 0 auto 15px auto; }

    .blog_full_container { margin: 30px 0 0 0; }

    .blog_pic {
        border-radius: 25px;
        margin-bottom: 20px;
    }

    .blog_title {
        font-size: 1rem;
        line-height: 23px;
        min-height: 25px;
    }

    .blog_block { margin-bottom: 30px; }

    .blog_detail_special_part {
        width: calc(100% - 40px);
        padding: 15px 20px;
    }

    .blog_detail_info_block {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 0;
        margin-bottom: 20px;
    }

    .ac_detail_img_block {
        width: 100vw;
        margin: 0 0 30px calc(-100vw / 12);
        aspect-ratio: 5/7;
        height: auto;
    }

    .ac_full_container { gap: 25px; }
    .ac_list_item { font-size: 12px; }

    .anre_dot   { width: 350px; }
    .anre_space { height: 270px; }

    .book_rank_grid { grid-template-columns: repeat(2, 1fr); }
    .book_grid { grid-template-columns: repeat(3, 1fr); }
}