@charset "UTF-8";

/*Noto Sans Traditional Chinese 預設-思源黑體*/
/*font-family: "Noto Sans TC", sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');

/*Montserrat 預設-英文字體*/
 /*font-family: "Montserrat",  sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/*Noto Serif Traditional Chinese 明體*/
/*font-family: "Noto Serif TC", serif;*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');

/*Noto Serif Japanese 明體*/
/*font-family: "Noto Serif JP", serif;*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

/*LXGW WenKai TC 手寫字體*/
/*font-family: "LXGW WenKai TC", cursive;*/
/*@import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC&display=swap');*/

/*Noto Serif Traditional Chinese 斜體手寫英文*/
/*font-family: "Caveat", cursive;*/
/*@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');*/

/*Baskervville 標題大字英文*/
/*font-family: "Playfair Display", serif;*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');



/*Solitreo 手寫粗體英文*/
/*font-family:'Segoe Script', sans-serif;*/
/*@import url('https://fonts.cdnfonts.com/css/segoe-script');*/
@import url('https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:wght@400;700&display=swap');

/*Permanent Marker草寫 侧標題英文*/

@import url('https://fonts.googleapis.com/css2?family=Damion&display=swap');


/* index
-------------------------------------------------
    - Import
    - root
    - text
-------------------------------------------------*/


/*-----------------------------------------------
     Import
-----------------------------------------------*/

:root {

    /* font-size */
    --fs-df: 17px;
    --fs-s5: 0.4rem;
    --fs-s4: 0.6rem;
    --fs-s3: 0.7rem;
    --fs-s2: 0.8rem;
    --fs-s1: 0.9rem;
    /* 16px */
    --fs-p: 1rem;
    --fs-h6: 1.0625rem;
    --fs-h5: 1.15rem;
    --fs-h4: 1.25rem;
    --fs-h3: 1.55rem;
    --fs-h2: 1.6rem;
    --fs-h1: 1.8rem;
    --fs-l: 2.5rem;
    --fs-xl: 2.7rem;
    --fs-2xl: 4.1rem;
    --fs-3xl: 5.3rem;
    --fs-4xl: 8rem;
    --fs-5xl: 9.4rem;


    /*font-family*/
    --font-family:  "Montserrat",'Noto Sans TC', 'PingFang TC', 'Heiti TC', 'Microsoft JhengHei', Arial, sans-serif;
    /*明體*/
    --font-family2: "Montserrat","Noto Serif JP",  "Noto Serif TC", 'Microsoft JhengHei', Arial, sans-serif;
    /*英文手寫*/
    --font-family-eng: /*'Segoe Script',*/  "Fuzzy Bubbles",   sans-serif;

    /*英文標題大字*/
    --font-family-eng2: "Cormorant Garamond", serif;

    --width:1500px;

    --text-color: rgb(74, 74, 74);
    --line-color: rgba(0, 0, 0, 0.6);
    --bg-color: rgb(255, 255, 255);

    /*black*/
    --black01: rgb(0, 0, 0);
    --black02: rgb(20, 20, 20);
    --black03: rgb(38, 38, 38);
    --black04: rgb(56, 56, 56);
    --black05: rgb(74, 74, 74);
    --black06: rgb(92, 92, 92);
    --black07: rgb(122, 122, 122);
    --black08: rgb(153, 153, 153);
    --black09: rgb(190, 190, 190);
    --black10: rgb(225, 225, 225);

    /*dark*/
    --dark01: rgba(0, 0, 0, 0.95);
    --dark02: rgba(0, 0, 0, 0.9);
    --dark03: rgba(0, 0, 0, 0.85);
    --dark04: rgba(0, 0, 0, 0.7);
    --dark05: rgba(0, 0, 0, 0.5);
    --dark06: rgba(0, 0, 0, 0.4);
    --dark07: rgba(0, 0, 0, 0.3);
    --dark08: rgba(0, 0, 0, 0.15);
    --dark09: rgba(0, 0, 0, 0.05);

    /*white*/
    --white01: rgb(255, 255, 255);
    --white02: rgb(248, 248, 248);
    --white03: rgb(240, 240, 240);
    --white04: rgb(230, 230, 230);
    --white05: rgb(220, 220, 220);
    --white06: rgb(205, 205, 205);
    --white07: rgb(190, 190, 190);
    --white08: rgb(170, 170, 170);
    --white09: rgb(150, 150, 150);
    --white10: rgb(130, 130, 130);

    /*pale*/
    --pale01: rgba(255, 255, 255, 0.9);
    --pale02: rgba(255, 255, 255, 0.8);
    --pale03: rgba(255, 255, 255, 0.7);
    --pale04: rgba(255, 255, 255, 0.6);
    --pale05: rgba(255, 255, 255, 0.5);
    --pale06: rgba(255, 255, 255, 0.4);
    --pale07: rgba(255, 255, 255, 0.3);
    --pale08: rgba(255, 255, 255, 0.2);
    --pale09: rgba(255, 255, 255, 0.1);


    /*color*/
    --purple: rgb(111, 66, 193);
    --purple2: rgb(155, 89, 182);
    --pink: rgb(214, 51, 132);
    --pink2: rgb(232, 62, 140);
    --red: rgb(122, 9, 0);
    --red2: rgb(220, 53, 69);
    --orange: rgb(236, 101, 23);
    --orange2: rgb(255, 179, 71);
    --yellow: rgb(255, 193, 7);
    --yellow2: rgb(255, 223, 0);
    --green: rgb(25, 135, 84);
    --green2: rgb(62, 180, 137);
    --blue: rgb(13, 202, 240);
    --blue2: rgb(23, 162, 184);



}



/*-----------------------------------------------
     text
-----------------------------------------------*/

html { font-size: var(--fs-df); }

h4 { font-size: var(--fs-h4); }

h5 { font-size: var(--fs-h5); }

h6 { font-size: var(--fs-p); }


section article p {
    line-height: 1.8;
    color: var(--text-color);
    font-size: var(--fs-df);
    letter-spacing: .05rem;
    font-weight: 500;

    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    overflow: hidden;
    text-overflow: ellipsis;
     min-width: 0;

}



@media screen and (max-width: 1800px) {
    :root {
        --fs-df:17px;
    }
}

@media screen and (max-width: 1600px) {
    :root {
        --fs-df: calc(17px * 0.95);
    }
}

@media screen and (max-width: 1440px) {
    :root {
        --fs-df: calc(17px * 0.94);
    }
}

@media screen and (max-width: 1280px) {
    :root {
        --fs-df: calc(17px * 0.9);
        --fs-l: 2.3rem;
        --fs-xl: 2.5rem;
        --fs-2xl: 3rem;
        --fs-3xl: 5rem;
        --fs-4xl: 7rem;
        --fs-5xl: 8rem;
    }
}

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

    :root {
        --fs-df:16px;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --fs-df: calc(16px * 0.92);
            --fs-df: calc(16px * 0.9);
        --fs-l: 2.3rem;
        --fs-xl: 2.5rem;
        --fs-2xl: 2.7rem;
        --fs-3xl: 4.4rem;
        --fs-4xl: 7rem;
        --fs-5xl: 8rem;
    }


}