/*-------------COMMON----------------*/

/*以下兩個Font不使用*/
@font-face {
    font-family: "Context-Custom-Font";
    src: url(../../fonts/historyMenu_Sub/ADOBEFANHEITISTD-BOLD.ttf);
}

@font-face {
    font-family: "Header-Custom-Font";
    src: url(../../fonts/historyMenu_Sub/GenSekiGothicTW-Bold.ttf);
}


body {
    /*所有字體的大小的再縮放倍率(※也有可能做整體視覺縮放倍率，少部分)*/
    /*(請注意精準控制不要讓任何字體小於12px，雖然PC chrome會自行控制，但放到手機就不一定了)*/
    --textSizeMultiplier: 1;
    /*可隨寬度縮放的UI寬度比*/
    --uiSizeMultiplier: 1;

    /*------------TEXT COMMONS--------------*/
    --standard-textsize-nopx: 35;
    --standard-textsize: calc(var(--standard-textsize-nopx) * 1px);
    --h2-textsize: 55px;
    --h3-textsize: 45px;
    --h4-textsize: 40px;
    --footer-textsize: 22px;

    /*------------PAGE SETTINGS--------------*/
    font-family: Microsoft JhengHei, Arial, Helvetica, sans-serif;
    overflow-y: auto;
    overflow-x: hidden;
    --font-size: var(--standard-textsize);
    line-height: 1.4;
    letter-spacing: 0.1em;

    /*------------COLOR SETTINGS--------------*/
    --darkGreen: #489465;
    --darkerGreen: #46665a;

    /*正式內容寬度(innerContent)佔最大可顯示寬度(content)多少*/
    --actualContentWidth: 90%;
    /*手機平板時的寬度*/
    --actualContentWidth-mobile: 92%;
    /*作為避免跟Header遮擋的空檔空間大小*/
    --headerSpace: 150px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /*font-weight: bold;*/
    margin: 0;
    line-height: 1.2;
}

body.eng h4,
body.eng h5,
body.eng h6 {
    font-weight: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
.fake-p,
p {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    --marginSpace: 1em;
    margin: var(--marginSpace) 0;
}

body,
* {
    /*追加可自訂義字型再縮放大小乘積*/
    --customTextSizeScale: 1;
    font-size: calc(var(--font-size) * var(--textSizeMultiplier) * var(--customTextSizeScale));
}

h2 {
    --font-size: var(--h2-textsize);
}

h3 {
    --font-size: var(--h3-textsize);
}

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

.red {
    color: #f00;
}

/*RWD版型決定顯示狀態*/
.mobileOnly {
    display: none !important;
    pointer-events: none !important;
}

/*-------------REGULERS----------------*/

/*-----UPPER THAN MAIN-----*/
#common-main-content {
    /*強迫拉伸至螢幕高度，儘管內容過少，也要避免右鍵選單呼叫*/
    position: absolute;
    height: auto;
    min-height: 100%;
}

/*----main------*/
main {
    width: 100%;
    min-height: 100%;

    display: flex !important;
    flex-direction: column !important;

    pointer-events: auto;
}

/*----content------*/
main content,
main content .innerContent {
    flex: 1;
    display: flex;
    flex-direction: column;

    max-width: 1920px;
    width: 100%;
    align-self: center;
}

#common-main-content,
main content {
    /*background-color: rgba(0, 255, 255, 0.461);*/
    /*For background*/
    /*0329:common-main-content跟裏頭的content都可以追加背景圖了*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}

main content .innerContent {
    width: var(--actualContentWidth);
    --paddingUD: 50px;
    --paddingUDActual: calc(var(--paddingUD) * var(--textSizeMultiplier));
    padding: var(--paddingUDActual) 0;
    /*background-color: rgba(255, 0, 187, 0.461)*/
}

/*----Space before page footer------*/
main content #main-sbpf {
    flex: 1;
    /*background-color: rgba(143, 188, 143, 0.461);*/
}

/*----page footer(沒有使用)------*/
main #page-footer {
    font-family: Microsoft JhengHei, Arial, Helvetica, sans-serif;
    --font-size: var(--footer-textsize);

    text-align: center;
    color: #fff;
    background-color: #c4a16a;
    padding: 3em;

    /*所有字體的大小的再縮放倍率*/
    --textSizeMultiplier: 1;
}

/*-------------UTILS----------------*/

/*----box content sample------*/
.box-content {
    --main-color: var(--darkGreen);

    --myMargin: calc(40px * var(--textSizeMultiplier));
    margin: var(--myMargin) 0;

    --myPadding: 30px;
    --myPaddingActual: calc(var(--myPadding) * var(--uiSizeMultiplier));
    --myPaddingLR: 80px;
    --myPaddingLRActual: calc(var(--myPaddingLR) * var(--uiSizeMultiplier));
    padding: var(--myPaddingActual) var(--myPaddingLRActual);

    color: var(--main-color);
}

.box-content.darker-color,
.box-content .darker-color {
    color: var(--darkerGreen);
}

/*----For smaller text format-----*/

.smaller-text-container {
    /*所有字體的大小的再縮放倍率*/
    --textSizeMultiplier: 1;
}

.smaller-text-container h1,
.smaller-text-container h2,
.smaller-text-container h3,
.smaller-text-container h4,
.smaller-text-container h5,
.smaller-text-container h6,
.smaller-text-container .fake-p,
.smaller-text-container p {
    margin: 0;
}

.smaller-text-container * {
    letter-spacing: 0;
    --font-size: 1.125rem;
}

.smaller-text-container h4 {
    --font-size: 1.5rem;
}


/*----For sightly smaller text format-----*/

.sightly-smaller-text-container {
    /*所有字體的大小的再縮放倍率*/
    --textSizeMultiplier: 1;
    /*------------TEXT COMMONS--------------*/
    --h4-textsize: 24px;
    --h3-textsize: 28px;
}

.sightly-smaller-text-container h1,
.sightly-smaller-text-container h2,
.sightly-smaller-text-container h3,
.sightly-smaller-text-container h4,
.sightly-smaller-text-container h5,
.sightly-smaller-text-container h6,
.sightly-smaller-text-container .fake-p,
.sightly-smaller-text-container p {
    margin: 0;
}

.sightly-smaller-text-container,
.sightly-smaller-text-container * {
    letter-spacing: 0;
    --font-size: 1.2rem;
    line-height: 1.2;
    letter-spacing: 0.05em;
}

.sightly-smaller-text-container h4,
.sightly-smaller-text-container .h4-like {
    --font-size: var(--h4-textsize);
}

.sightly-smaller-text-container h3,
.sightly-smaller-text-container .h3-like {
    --font-size: var(--h3-textsize) !important;
}

.sightly-smaller-text-container .stuffTitle{
    --font-size: var(--h3-textsize) !important;
}


/*----Button image-----*/
.image-button {
    /*for customize*/
    --width: 100;
    --height: 100;
    --sizeMultiplier: 1;
    --sizeMultiplier-mobile: var(--sizeMultiplier);
    /*for auto*/
    position: relative;
    display: block;
    --sizeMultiplierActial: var(--sizeMultiplier);
    --widthActual: calc(var(--width) * var(--textSizeMultiplier) * 1px * var(--sizeMultiplierActial));
    --heightActual: calc(var(--height) * var(--textSizeMultiplier) * 1px * var(--sizeMultiplierActial));
    width: var(--widthActual);
    height: var(--heightActual);
    background-color: unset;
    border: unset;
    padding: 0;
    cursor: pointer;
}

.image-button:disabled,
.image-button[disabled] {
    cursor: inherit;
}

.image-button img {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    pointer-events: none;
}

.image-button img.enable {
    display: inherit;
}

.image-button img.disable {
    display: none;
}

.image-button:disabled img.enable,
.image-button[disabled] img.enable {
    display: none;
}

.image-button:disabled img.disable,
.image-button[disabled] img.disable {
    display: inherit;
}


/*----Button image special-----*/
.image-button.special {
    --picWidth: 200;
    --picHeight: 200;
    --btnOffsetX: 50;
    --btnOffsetY: 50;

    --spaceBottom: calc(var(--picWidth) - var(--btnOffsetX) - var(--width));
    --spaceRight: calc(var(--picHeight) - var(--btnOffsetY) - var(--height));

    /*margin-top: calc(var(--btnOffsetY) * var(--textSizeMultiplier) * 1px);*/
    /*margin-bottom: calc(var(--spaceBottom) * var(--textSizeMultiplier) * 1px);*/
    /*margin-left: calc(var(--btnOffsetX) * var(--textSizeMultiplier) * 1px);*/
    /*margin-right: calc(var(--spaceRight) * var(--textSizeMultiplier) * 1px);*/
}

.image-button.special img {
    width: calc(var(--picWidth) / var(--width) * 100%);
    height: calc(var(--picHeight) / var(--height) * 100%);
    left: calc(var(--btnOffsetX) / var(--width) * -100%);
    top: calc(var(--btnOffsetY) / var(--height) * -100%);
}


/*----Button image lineup-----*/
.image-button-lineup {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

/*------------------pc (width <= 1750px)-----------------*/

@media (max-width: 1750px) {
    body {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.9;
        /*可隨寬度縮放的UI寬度比*/
        --uiSizeMultiplier: calc(1750/1920);
    }

    main #page-footer {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.9;
    }

    .smaller-text-container {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.9;
    }


    .sightly-smaller-text-container {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.9;
    }
}


/*------------------pc (width <= 1600px)-----------------*/

@media (max-width: 1600px) {
    body {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.8;
        /*可隨寬度縮放的UI寬度比*/
        --uiSizeMultiplier: calc(1600/1920);
        /*作為避免跟Header遮擋的空檔空間大小*/
        --headerSpace: 130px;
    }

    main #page-footer {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.8;
    }

    .smaller-text-container {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.8;
    }

    .sightly-smaller-text-container {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.8;
    }
}

/*------------------tablet big (width <= 1200px)-----------------*/

@media (max-width: 1200px) {
    body {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.625;
        /*可隨寬度縮放的UI寬度比*/
        --uiSizeMultiplier: calc(1200/1920);
        /*作為避免跟Header遮擋的空檔空間大小*/
        --headerSpace: 120px;
    }

    main #page-footer {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.65;
    }

    .smaller-text-container {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.65;
    }

    .sightly-smaller-text-container {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.65;
    }
}

/*------------------tablet (width <= 1024px)-----------------*/

@media (max-width: 1024px) {
    body {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.533;
        /*可隨寬度縮放的UI寬度比*/
        --uiSizeMultiplier: calc(1024/1920);
        /*作為避免跟Header遮擋的空檔空間大小*/
        --headerSpace: 100px;
    }

    main #page-footer {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.55;
    }

    .smaller-text-container {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.6;
    }

    .sightly-smaller-text-container {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.6;
    }
}


/*------------------tablet (width <= 768px)-----------------*/

@media (max-width: 768px) {
    body {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.4;
        /*可隨寬度縮放的UI寬度比*/
        --uiSizeMultiplier: calc(768/1920);
        /*作為避免跟Header遮擋的空檔空間大小*/
        --headerSpace: 75px;
    }

    .smaller-text-container {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.55;
    }

    .sightly-smaller-text-container {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.55;
    }
}


/*-------------------small tablet & mobile (width <= 650px)------------------*/
/*在此進入手機模式*/

@media (max-width: 650px) {

    body {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.33;
        /*可隨寬度縮放的UI寬度比*/
        --uiSizeMultiplier: calc(650/1920);
        /*所有字體的大小的再縮放倍率(給手機模式再縮放的解決方案)*/
        --textSizeMultiplier-mobile: calc(var(--textSizeMultiplier) / 0.33);
        /*寬度強制轉為手機版*/
        --actualContentWidth: var(--actualContentWidth-mobile) !important;
    }

    /*RWD版型決定顯示狀態*/
    .pcOnly {
        display: none !important;
        pointer-events: none !important;
    }

    .mobileOnly {
        display: inherit !important;
        pointer-events: inherit !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .fake-p,
    p {
        --marginSpace: 0.65em;
    }

    .smaller-text-container {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.5;
    }

    .sightly-smaller-text-container {
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.5;
    }

    /*----box content sample------*/
    .box-content {
        --myPadding: 10px;
        --myPaddingLR: 40px;
    }

    /*----Button image-----*/
    .image-button {
        --sizeMultiplierActial: var(--sizeMultiplier-mobile);
    }
}