/*
Structure instruction：
    # [Default Css]
        - [Root Css]: :root { ... }
        - [Structure]: html, body, main, #wrap ...
        - [HtmlTag]: h1, a, ::-webkit-scrollbar ...

    # [Plugins]
        - [Plugins Modified]: Bootstrap Modals...
        - [Plugins SelfMade]: My Modals...

    # [Public Style]
        - [Simple Css]: typesetting, color ... ( Single Css )
        - [Elements]: button, checkbox, icon ... ( Simple Component )
        - [Components]: RWD_table, user_avatar ... ( Complex Components )

    # [Pages]
        - [Include Page]: header, footer
        - [Current Page]: #login, #about

    -- Author Comebuy
*/

@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;800&display=swap);

/*######### [Default Css] #########*/
    /*====== [Root Css] ======*/
    :root {
        --100vh: 100vh;
        --main-color-a: #FFDF5A;
        --main-color-b: #FFEEA6;
        --main-color-c: #FAA57E;
        --main-color-d: #99B3F0;
        --main-color-e: #2B3247;
        --neutrals-000: #fff;
        --neutrals-050: #F8FAFC;
        --neutrals-100: #f1f5f9;
        --neutrals-200: #e2e8f0;
        --neutrals-300: #cbd5e1;
        --neutrals-400: #94a3b8;
        --neutrals-500: #64748b;
        --neutrals-600: #475569;
        --neutrals-700: #334155;
        --neutrals-800: #1e293b;
        --neutrals-900: #0f172a;
        --shadow: 8px 9px 4px 0px rgba(0, 0, 0, 0.25);
        --shadow-m: 5px 5px 4px 0px rgba(0, 0, 0, 0.35);
        --headline-1: 800 54px / 120% 'Noto Sans TC';
        --headline-2: 800 42px / 120% 'Noto Sans TC';
        --headline-3: 800 36px / 125% 'Noto Sans TC';
        --headline-4: 800 30px / 130% 'Noto Sans TC';
        --headline-5: 800 24px / 130% 'Noto Sans TC';
        --headline-6: 800 20px / 135% 'Noto Sans TC';
        --paragraph-1: 600 18px / 135% 'Noto Sans TC';
        --paragraph-2: 400 16px / 130% 'Noto Sans TC';
        --small-text-1: 400 14px / 130% 'Noto Sans TC';
        --small-text-2: 400 12px / 130% 'Noto Sans TC';
        --time-countdown: 400 40px / 120% 'Bungee', sans-serif;
        --chapter: 400 30px / 120% 'Bungee', sans-serif;
        --button: 400 24px 'Baloo Paaji 2', sans-serif;
        --mobile-headline-1: 800 36px / 120% 'Noto Sans TC';
        --mobile-headline-2: 800 30px / 120% 'Noto Sans TC';
        --mobile-headline-3: 800 24px / 125% 'Noto Sans TC';
        --mobile-headline-4: 800 20px / 130% 'Noto Sans TC';
        --mobile-headline-5: 800 18px / 130% 'Noto Sans TC';
        --mobile-headline-6: 800 16px / 135% 'Noto Sans TC';
        --mobile-paragraph-1: 600 16px / 135% 'Noto Sans TC';
        --mobile-paragraph-2: 400 14px / 130% 'Noto Sans TC';
        --mobile-small-text-1: 400 12px / 130% 'Noto Sans TC';
        --mobile-small-text-2: 400 10px / 130% 'Noto Sans TC';
        --mobile-time-countdown: 400 28px / 120% 'Bungee', sans-serif;
        --mobile-chapter: 400 20px / 120% 'Bungee', sans-serif;
        --mobile-button: 400 16px 'Baloo Paaji 2', sans-serif;
        --header-height: 88px;
        --font-baloon: 'Baloo Paaji 2', sans-serif;
    }

    
    /*====== [Structure] ======*/
        html { scroll-behavior: smooth; }
        body {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-family: "Noto Sans TC", sans-serif;
            margin: 0;
            line-height: 1;
        }


    /*====== [HtmlTag] =======*/
        * { box-sizing: border-box; }
        html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
            margin: 0px;
            padding: 0px;
            border: 0px;
            font: inherit;
            vertical-align: baseline;
        }
        a { color: var(--bs-dark); text-decoration: none; }
        a:hover { color: inherit; text-decoration: none; }
        label { margin-bottom: 0; }
        button, a { all: unset; box-sizing: border-box; }
        [v-cloak] { opacity: 0 !important; }


/*######### [Plugins] #########*/
    /*====== [Plugins Modified] ======*/
        /*=== Bootstrap ===*/
    /*====== [Plugins SelfMade] ======*/
        /*=== js- ===*/



/*######### [Public Style] #########*/
    /*====== [Simple Css] ======*/
        /*=== typesetting ===*/
    /*====== [Elements] ======*/
        /*=== button ===*/
    /*====== [Components] ======*/
        /*=== rwd_table ===*/



/*######### [Pages] #########*/
    /*====== [Include Page] ======*/
        /*=== header ===*/


    /*====== [Current Page] ======*/
        /*=== index ===*/
        /* wrappers */
            .iZxcmP { position: relative; width: 100%; height: var(--100vh); height: 100dvh; overflow: hidden; }
            .EyTlj { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 10; transition: transform 0.2s ease-out; background: url(../img/page-bg.jpg) center center / cover no-repeat; overflow-y: scroll; transform: translateY(0px); pointer-events: auto; }
            .EyTlj a, .EyTlj button { cursor: pointer; }
            .enmQph { padding-top: 104px; min-height: var(--100vh); min-height: 100dvh; }
            @media screen and (max-width: 576px) {
                .enmQph { padding-bottom: 60px; padding-top: 32px; display: flex; align-items: center; }
            }

        /* 主體/標題 */
            .cPVAT { width: 708px; margin: 0px auto; display: flex; flex-direction: column; align-items: center; font: var(--paragraph-2); color: var(--neutrals-700); }
            .cPVAT .title-container { display: flex; flex-direction: column; align-items: center; font-weight: 700; gap: 12px; }
            .cPVAT h2 { font-size: 48px; font-style: normal; font-weight: 900; line-height: normal; text-align: center; }
            .fTjSKO { width: fit-content; position: relative; isolation: isolate; color: var(--main-color-a); }
            .fTjSKO span:first-child { color: currentcolor; }
            .fTjSKO span:last-child { position: absolute; z-index: -1; left: 0px; top: 0px; width: 100%; height: 100%; -webkit-text-stroke: 7px var(--neutrals-700); color: var(--neutrals-700); text-shadow: rgb(43, 50, 71) 3px 2px 0px; }
            @media screen and (max-width: 1024px) {
                .fTjSKO span:last-child { -webkit-text-stroke: 4px var(--neutrals-700); text-shadow: rgb(43, 50, 71) 2px 1px 0px; }
            }
            @media screen and (max-width: 768px) {
                .cPVAT { width: calc(600px + 10vw); }
            }
            @media screen and (max-width: 576px) {
                .cPVAT { width: 100vw; }
                .cPVAT .title-container { text-align: center; font-weight: 700; padding: 0px 32px; gap: 4px; }
                .cPVAT h2 { font-size: 32px; }
                .cPVAT p { font-size: 14px; }
            }


        /* 卡片 */
            .lhwApE { padding: 80px 90px; position: relative; }
            .gBCaNo { width: 480px; height: 300px; position: relative; }
            .gBCaNo .card:first-of-type { z-index: 99 !important; }
            .ivqpZn { background: white; width: 480px; height: 300px; border-radius: 16px; border: 4px solid var(--neutrals-700); overflow: hidden; position: absolute; padding: 82px 24px 40px; }
            .ivqpZn .category { position: absolute; top: 0px; left: 0px; width: 220px; height: 64px; font: var(--headline-6); display: flex; align-items: center; justify-content: center; border-radius: 0px 0px 16px; }
            .ivqpZn .stars { position: absolute; top: 0px; right: 0px; width: 198px; height: 40px; color: white; font-weight: 700; display: flex; justify-content: center; align-items: center; background: var(--neutrals-700); border-radius: 0px 0px 0px 16px; }
            .ivqpZn .stars span { margin-right: 8px; flex-shrink: 0; font-size: 14px; }
            .ivqpZn .stars > div { display: flex; align-items: center; justify-content: center; gap: 4px; }
            .ivqpZn .content { display: flex; align-items: center; }
            .ivqpZn .content h3 { font-weight: 700; margin-bottom: 6px; font-size: 18px; }
            .ivqpZn .content p { font-size: 14px; white-space: pre-wrap; }
            .ivqpZn .content img { --size: 178px; width: var(--size); height: var(--size); }
            @media screen and (max-width: 1024px) {
                .lhwApE { padding: 80px min( 12vw, 90px); }
            }
            @media screen and (max-width: 576px) {
                .lhwApE { width: 100vw; padding: 40px 0px 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
                .gBCaNo { width: 311px; height: 378px; margin-bottom: 40px; }
                .ivqpZn { width: 311px; height: 378px; border-radius: 20px; }
                .ivqpZn .category { width: 132px; height: 54px; font-size: 16px; font-weight: 900; border-radius: 16px 0px; }
                .ivqpZn .stars { width: 142px; height: 54px; flex-direction: column; align-items: flex-start; font-weight: 700; padding: 0px 16px; gap: 4px; }
                .ivqpZn .content { flex-direction: column; }
                .ivqpZn .content h3 { text-align: center; font-weight: 700; font-size: 16px; }
                .ivqpZn .content p { text-align: center; font-size: 14px; }
            }


        /* 卡片動畫 */
            .ivqpZn.animate-prev-in { transition: transform 0.3s ease-out; animation: 0.3s ease-out 0s 1 normal none running iQQUbp; z-index: 100 !important; transform: translateY(0px) !important; }
            .ivqpZn.animate-prev-out { transition: transform 0.3s ease-out; animation: 0.3s ease-out 0s 1 normal none running detKrp; transform: translateY(-100px) !important; }
            .ivqpZn.animate-next-in { transition: transform 0.3s ease-out; animation: 0.3s ease-out 0s 1 normal none running iQQUbp; z-index: 100 !important; transform: translateY(0px) !important; }
            .ivqpZn.animate-next-out { transition: transform 0.3s ease-out; animation: 0.3s ease-out 0s 1 normal none running detKrp; transform: translateY(100px) !important; }
            @keyframes iQQUbp {
                0% { opacity: 0; }
                100% { opacity: 1; }
            }
            @keyframes detKrp {
                0% { opacity: 1; }
                100% { opacity: 0; }
            }


        /* 左右按鈕 */
            .tIRRF { position: absolute; top: 50%; transform: translateY(-50%); color: var(--neutrals-700); left: 0px; }
            .jPKlmD { position: absolute; top: 50%; transform: translateY(-50%); color: var(--neutrals-700); right: 0px; }
            .tIRRF:disabled, .jPKlmD:disabled { color: white; pointer-events: none; opacity: 0.5; }
            .dCuSKd .mobile-control-btn { display: none; }
            @media screen and (max-width: 576px) {
                .tIRRF { display: none; width: 32px; height: 32px; transform: translate(-100%, -50%); }
                .jPKlmD { display: none; width: 32px; height: 32px; transform: translate(100%, -50%); }
                .dCuSKd .mobile-control-btn { display: block; }
            }


        /* 點點按鈕 */
            .dCuSKd { position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; }
            .dCuSKd .dots-group { display: flex; gap: 12px; justify-content: center; }
            .dCuSKd .dots-group button { --size: 14px; width: var(--size); height: var(--size); border-radius: 50%; border: 2px solid var(--neutrals-700); }
            .dCuSKd .dots-group button.active { background: var(--neutrals-700); }
            @media screen and (max-width: 576px) {
                .dCuSKd { flex-wrap: wrap; justify-content: center; position: relative; bottom: unset; left: unset; transform: unset; width: 60%; font-weight: 700; }
            }

        /* 手機版 | 桌面版 */
            @media (min-width: 577px) {
                .mobile-only { display: none !important; }
            }
            @media (max-width: 576px) {
                .desktop-only { display: none !important; }
            }


        /* 外連按鈕 */
            .cPVAT .buttons { display: flex; gap: 20px; margin-top: 32px; } 
            .cPVAT .buttons a:first-child { background: var(--main-color-a); } 
            .cPVAT .buttons a:last-child { background: white; }
            .cPVAT .buttons a { width: 256px; height: 48px; font-weight: 700; box-shadow: rgb(43, 50, 71) 5px 4px 0px 0px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 3px solid var(--neutrals-700); transition: 0.2s ease-out; }
            .cPVAT .buttons a:hover { transform: translate(5px, 4px); box-shadow: rgb(43, 50, 71) 0px 0px 0px 0px; }
            @media screen and (max-width: 576px) {
                .cPVAT .buttons { width: 100vw; padding: 0px 32px; }
                .cPVAT .buttons a { width: 100%; height: 56px; font-weight: 700; text-align: center; padding: 8px 12px; }
            }