/*-------------COMMON & UTILS----------------*/

@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 {
    /*-------UTILS SETTINGS------------*/
    /*目的是為了契合最上面的header(非選擇標籤用header)*/
    --headerSpace: 150px;
    /*標籤用Header橫長多少*/
    --selectHeaderWidthOriginal-nonPx: 1629;
    --selectHeaderWidthOriginal: calc(var(--selectHeaderWidthOriginal-nonPx) * 1px);
    --selectHeaderWidth: calc(var(--selectHeaderWidthOriginal) * var(--pageContainerWidthScale));
    /*整個畫面橫長比例佔平常多少倍(※也有可能做整體視覺縮放倍率)*/
    --pageContainerWidthScale: 1;
    /*(使用於手機上，方便調整)整個畫面橫長比例佔平常多少倍(※也有可能做整體視覺縮放倍率)*/
    --pageScaleRef-mobile: 0.22;
    --pageScale-toMobileResize: calc(1 / var(--pageScaleRef-mobile));
    --pageContainerWidthScale-mobile: calc(var(--pageContainerWidthScale) / var(--pageScaleRef-mobile));
    /*所有字體的大小的再縮放倍率(※也有可能做整體視覺縮放倍率，少部分)*/
    /*(請注意精準控制不要讓任何字體小於12px，雖然PC chrome會自行控制，但放到手機就不一定了)*/
    --textSizeMultiplier: 1;
    /*標籤用Header跟main-visual-block交錯的高度要多少*/
    --selectHeaderIntersect-base: 160px;
    --selectHeaderIntersect: calc(var(--selectHeaderIntersect-base) * var(--pageContainerWidthScale));
    /*每個全併統一高度(除去跟上面的header相差的高度)*/
    --commonFullPackHeight: calc(100vh - var(--headerSpace));

    /*------------TEXT COMMONS--------------*/
    --standard-textsize: 22px;
    --h3-textsize: 35px;
    --h4-textsize: 27px;

    /*------------PAGE SETTINGS--------------*/
    /*強制用內鍵字型省流量(標題內文共用)*/
    /*font-family: "Context-Custom-Font", Microsoft JhengHei, sans-serif;*/
    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;

}

body.eng {
    /*English Variation*/
    letter-spacing: normal;
    /*------------TEXT COMMONS--------------*/
    /*縮放後有可能小於12px*/
    --standard-textsize: 18px;
    /*目前PC&手機統一用這個*/
    --h4-textsize: 22px !important;
    /*------------PAGE SETTINGS--------------*/
    /*因應語言上不同而更改字體(標題內文共用)*/
    font-family: Arial, Helvetica, sans-serif;
}

/*專門做給占滿整個頁面(不含header)用的*/
.fullPack {
    height: var(--commonFullPackHeight);
}

/*專門做給fullPack做sticky支援的*/
.fullPack-stickyContainer {
    --scrollHeightMultiplier: 3;
    position: relative;
    height: calc(var(--commonFullPackHeight) * var(--scrollHeightMultiplier));
    width: 100%;
}

.fullPack-stickyContainer .fullPack {
    position: sticky;
    top: var(--headerSpace);
}


/*另外一個版本，fullPack支援sticky，但會先使用zeroHeader(0高度)拖著子fullPack*/
/*可同時允許多個fullPack統一貼合*/
.fullPack-stickyContainer-zeroHeader {
    --scrollHeightMultiplier: 3;
    position: relative;
    height: calc(var(--commonFullPackHeight) * (var(--scrollHeightMultiplier) - 1));
    width: 100%;
    padding-bottom: var(--commonFullPackHeight);
}

.fullPack-stickyContainer-zeroHeader .zeroHeader {
    position: sticky;
    top: var(--headerSpace);
    width: 0;
}

.fullPack-stickyContainer-zeroHeader .zeroHeader .fullPack {
    position: absolute;
    top: 0;
}

/*專門做給側邊敘述，另一側邊放其他東西用的*/
/*適合放進main-visual-block內(其餘的還不清楚)*/

.packSplitter {
    --toLeftOffset: 0%;
    --descFlexRatio: 0.5;
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-items: center;
}

.packSplitter .descPart,
.packSplitter .otherPart {

    transform: translateX(var(--toLeftOffset));
}

.packSplitter.isParagraphGroup {
    /*額外追加的選項(主要做美化間隔用，原預設值資料)*/
    --centerPadding-orig: 5%;
    --lrPadding-columnAlign-otherOnly-orig: 3%;
    /*額外追加的選項(主要做美化間隔用，大概)*/
    --lrPadding: 8%;
    --centerPadding: var(--centerPadding-orig);
    /*(以備不時之需)改成垂直排法時，僅適用otherPart的分離縮放*/
    --lrPadding-columnAlign-otherOnly: var(--lrPadding-columnAlign-otherOnly-orig);
    /*手機額外排版專用(可再修改，僅在需要時呼叫即可)*/
    --lrPadding-mobile: 11%;
    --centerPadding-mobile: var(--centerPadding-orig);
    --lrPadding-columnAlign-otherOnly-mobile: var(--lrPadding-columnAlign-otherOnly-orig);

    width: calc(100% - var(--lrPadding) * 2);
    padding: 0 var(--lrPadding);
}

/*packSplitter 通常開啟時，不須空間縮排(僅需PC開啟才不啟用縮牌請搭配toMobileParagraphAlign)*/
.packSplitter.isParagraphGroup.pcNonParagraphGroup {
    /*額外追加的選項(主要做美化間隔用，大概)*/
    --lrPadding: 0;
    --centerPadding: 0;
    /*(以備不時之需)改成垂直排法時，僅適用otherPart的分離縮放*/
    --lrPadding-columnAlign-otherOnly: 0;
}

.packSplitter.isParagraphGroup .descPart~.otherPart,
.packSplitter.isParagraphGroup .otherPart~.descPart {
    padding-left: var(--centerPadding);
}

.packSplitter .descPart {
    flex: var(--descFlexRatio);
}

.packSplitter .descPart,
.packSplitter .otherPart {
    /*放文字用，需要置中布置*/
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.packSplitter .otherPart {
    flex: calc(1 - var(--descFlexRatio));
}

/*packSplitter 改成垂直排法*/
.packSplitter.columnAlign {
    flex-direction: column;

    width: 100%;
    padding: 0;
}

.packSplitter.columnAlign.isParagraphGroup .descPart {
    width: calc(100% - var(--lrPadding) * 2);
    padding: 0 var(--lrPadding);
}

.packSplitter.columnAlign.isParagraphGroup .otherPart {
    width: calc(100% - var(--lrPadding-columnAlign-otherOnly) * 2);
    padding: 0 var(--lrPadding-columnAlign-otherOnly);
}

.packSplitter.columnAlign.isParagraphGroup .descPart~.otherPart,
.packSplitter.columnAlign.isParagraphGroup .otherPart~.descPart {
    /*padding-left: 0px;*/
    padding-top: var(--centerPadding);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /*強制用內鍵字型省流量(標題內文共用)*/
    /*font-family: "Header-Custom-Font", Microsoft JhengHei, Arial, sans-serif;*/
    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: 1.5rem;
    margin: var(--marginSpace) 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
.extraFontSizeApplier,
body {
    font-size: calc(var(--font-size) * var(--textSizeMultiplier));
}

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

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

h1.noMarginLower,
h2.noMarginLower,
h3.noMarginLower,
h4.noMarginLower,
h5.noMarginLower,
h6.noMarginLower {
    /*只給標題向上的margin(下方的搞不好被p擁有)*/
    margin: var(--marginSpace) 0 0 0;
}

/*英文時，僅有paragraph套用左右對齊*/
body.eng .fake-p,
body.eng p {
    text-align: justify;
}

/*-------------PAGE RELATEDS----------------*/

#bodyBG {
    background-image: linear-gradient(#f1efec, #e8e6e3);
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    position: fixed;
    z-index: -1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

#pageMain {
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0%);

    width: 100%;
    min-height: calc(100% - var(--headerSpace));

    padding: 0;
    padding-top: var(--headerSpace);

    /*BG Ornaments*/
    background-image: url("../../images/historyMenu_Sub/BG/ornament1.png");
    background-position: center top;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

#select-header,
.main-visual-block,
.ripped-green-block,
.middle-art-visual-block {
    position: relative;
    display: block;
    margin: 0 auto;
    width: var(--selectHeaderWidth);
}

/*----select tag header------*/
#select-header {
    height: auto;

    background-image: url(../../images/historyMenu_Sub/selectHeader/select-header-1.png);
    background-size: 100% 100%;
    z-index: 10;
}

body.eng #select-header {
    /*English Variation*/
    background-image: url(../../images/historyMenu_Sub/selectHeader/select-header-EN-1.png);
}

#select-header.building {
    background-image: url(../../images/historyMenu_Sub/selectHeader/select-header-2.png);
}

body.eng #select-header.building {
    /*English Variation*/
    background-image: url(../../images/historyMenu_Sub/selectHeader/select-header-EN-2.png);
}

#select-header.memorialStory {
    background-image: url(../../images/historyMenu_Sub/selectHeader/select-header-3.png);
}

body.eng #select-header.memorialStory {
    /*English Variation*/
    background-image: url(../../images/historyMenu_Sub/selectHeader/select-header-EN-3.png);
}

#select-header .resizer-mobile,
#select-header .resizer {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

#select-header .resizer-mobile {
    display: none;
}

#select-header .tagLink {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 25%;
    --left: 50%;
    --left-mobile: var(--left);
    left: var(--left);
    height: 40%;
    width: 25%;
}

#select-header .socialBtns {
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    top: 50%;
    left: -5px;
    transform: translateX(-100%);
}

#select-header .socialBtns img {
    margin: 0;
    margin: 2px calc(5px * var(--pageContainerWidthScale));
    width: calc(46px * var(--textSizeMultiplier));
    max-width: 46px;
    min-width: 30px;
    height: auto;
}

#select-header .socialBtns img~img {
    margin-top: 5px;
}

#select-header+.main-visual-block {
    /*For only the first*/
    --topPadding: 0px;

    margin-top: calc(var(--selectHeaderIntersect) * -1);
    padding-top: calc(var(--selectHeaderIntersect) + var(--topPadding));

}

/*----page footer------*/
#page-footer {
    text-align: center;
    color: #fff;
    background-color: #c4a16a;
    padding: 3em;
}

.ripped-green-block.middle~#page-footer {
    background-color: #5a9374
}


/*----main visual block------*/
.main-visual-block::before {
    /*BG*/
    content: "";
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    background-image: url(../../images/historyMenu_Sub/mainVisualBlock/main-visual-block.png);
    background-position: center top;
    background-size: 100% auto;
    background-repeat: repeat-y;
}

/*帶陰影背景*/
.main-visual-block.shadowEnd {
    --overlapSpace: calc(135px * var(--pageContainerWidthScale));
    --endHeight: calc(270px * var(--pageContainerWidthScale));
    margin-bottom: calc(var(--endHeight) - var(--overlapSpace));
}

.main-visual-block.shadowEnd::after {
    content: "";
    position: absolute;
    display: block;
    background-image: url(../../images/historyMenu_Sub/mainVisualBlock/main-visual-block-shadowEnd.png);
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 100%;
    height: var(--endHeight);
    bottom: calc(var(--overlapSpace) * -1);
    left: 0;
    z-index: -1;
}

/*------Ripped green BG------*/
.ripped-green-block {
    position: relative;
    display: flex;
    flex-direction: column;
    /*uppper*/
    --bgOrigWidth: 2208;
    --bgOrigHeight: 1354;
    min-height: calc(var(--bgOrigHeight) * 1px * var(--pageContainerWidthScale));
    /*For buttom settings*/
    --bottomSpace: calc(70px * var(--pageContainerWidthScale));
    z-index: 1;
}

.ripped-green-block::before {
    /*for bg*/
    content: "";
    position: absolute;
    display: block;
    transform: translateX(-50%);
    left: 50%;

    pointer-events: none;
    background-image: url(../../images/historyMenu_Sub/rippedGreen/upper.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;

    width: calc(var(--bgOrigWidth) * 1px * var(--pageContainerWidthScale));
    height: 100%;
    z-index: -1;
}

/*-------------REVOLUTION PAGE RELATEDS----------------*/

/*ripped green block*/
.ripped-green-block.hasBottom {
    /*if has bottom method*/
    padding-bottom: var(--bottomSpace);
}

.ripped-green-block.hasBottom::before {
    --fadeoutSpace: calc(45px * var(--pageContainerWidthScale));
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000f var(--fadeoutSpace));
    -webkit-mask-size: 100% 100%;
    mask-image: linear-gradient(0deg, transparent 0%, #000f var(--fadeoutSpace));
    mask-size: 100% 100%;
}

.ripped-green-block.special {
    /*top special*/
    --bgOrigHeight: 756;
}

.ripped-green-block.special::before {
    background-image: url(../../images/historyMenu_Sub/rippedGreen/upperSpecial.png);
}

.ripped-green-block.middle {
    /*middle*/
    --bgOrigHeight: 0;
    /*避免有線條出現並穿幫*/
    margin-top: -1px;
}

.ripped-green-block.middle::before {
    background-image: url(../../images/historyMenu_Sub/rippedGreen/middle.png);
    background-repeat: repeat-y;
    background-position: center top;
}

.ripped-green-block.bottom {
    /*bottom*/
    margin-top: calc(var(--bottomSpace) * -1);
    --bgOrigHeight: 1097;
}

.ripped-green-block.bottom::before {
    background-position: center top;
    background-image: url(../../images/historyMenu_Sub/rippedGreen/lower.png);
}

/*middle art visualization*/
.middle-art-visual-block {
    position: relative;
    display: flex;
    --minHeight: 500;
    --skyVisualWidth: 500;
    --skyVisualOffset: 0;
    --groundVisualWidth: 500;
    --groundVerticalOffset: 0;
    --totalVisualOffset: 0;
    min-height: calc(var(--minHeight) * 1px * var(--pageContainerWidthScale));
}

.middle-art-visual-block .skyBG,
.middle-art-visual-block .groundBG {
    z-index: -1;
    pointer-events: none;

    position: absolute;
    display: block;
    transform: translateX(-50%);
    left: 50%;
    bottom: 0;

    --width: 0;
    width: calc(var(--width) * 1px * var(--pageContainerWidthScale));
    height: auto;
}

.middle-art-visual-block .skyBG {
    z-index: -2;
    --width: var(--skyVisualWidth);
    bottom: calc((var(--skyVisualOffset) + var(--totalVisualOffset)) * 1px * var(--pageContainerWidthScale));
}

.middle-art-visual-block .groundBG {
    --width: var(--groundVisualWidth);
    bottom: calc(var(--totalVisualOffset) * 1px * var(--pageContainerWidthScale));
    left: calc(50% + var(--groundVerticalOffset) * 1px * var(--pageContainerWidthScale));
}


.middle-art-visual-block.visualSnapUp .skyBG,
.middle-art-visual-block.visualSnapUp .groundBG {
    bottom: unset !important;
    top: 0
}

.middle-art-visual-block.visualSnapUp .skyBG {
    top: calc(var(--totalVisualOffset) * 1px * var(--pageContainerWidthScale));
}

.middle-art-visual-block.visualSnapUp .groundBG {
    top: calc((var(--totalVisualOffset) + var(--skyVisualOffset)) * 1px * var(--pageContainerWidthScale));
}

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

@media (max-width: 1750px) {
    body {
        /*整個畫面橫長比例佔平常多少倍*/
        --pageContainerWidthScale: 0.85;
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.9;
    }
}


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

@media (max-width: 1600px) {
    body {
        /*目的是為了契合最上面的header(非選擇標籤用header)*/
        --headerSpace: 130px;
        /*整個畫面橫長比例佔平常多少倍*/
        --pageContainerWidthScale: 0.65;
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.8;
    }
}

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

@media (max-width: 1200px) {
    body {
        /*目的是為了契合最上面的header(非選擇標籤用header)*/
        --headerSpace: 120px;
        /*整個畫面橫長比例佔平常多少倍*/
        --pageContainerWidthScale: 0.55;
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.65;
    }
}

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

@media (max-width: 1024px) {
    body {
        /*目的是為了契合最上面的header(非選擇標籤用header)*/
        --headerSpace: 100px;
        /*整個畫面橫長比例佔平常多少倍*/
        --pageContainerWidthScale: 0.4;
        /*所有字體的大小的再縮放倍率*/
        --textSizeMultiplier: 0.55;
    }
}

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

@media (max-width: 768px) {
    body {
        /*目的是為了契合最上面的header(非選擇標籤用header)*/
        --headerSpace: 75px;
        /*整個畫面橫長比例佔平常多少倍*/
        --pageContainerWidthScale: 0.35;
    }
}

/*-------------------small tablet & mobile (width <= 650px)------------------*/
/*通常版型會轉為側邊欄收縮或簡化的設計*/

@media (max-width: 650px) {
    body {
        /*目的是為了契合最上面的header(非選擇標籤用header)*/
        --headerSpace: 50px;
        /*整個畫面橫長比例佔平常多少倍*/
        --pageContainerWidthScale: 0.3;
        /*標籤用Header跟main-visual-block交錯的高度要多少*/
        --selectHeaderIntersect-base: calc(88px / 2 * var(--pageScale-toMobileResize));
        /*標籤用Header橫長多少*/
        --selectHeaderWidthOriginal-mobile-nonPx: calc(702 / 2);
        --selectHeaderWidthOriginal-nonPx: calc(var(--selectHeaderWidthOriginal-mobile-nonPx) * var(--pageScale-toMobileResize));

        /*------------TEXT COMMONS--------------*/
        --h3-textsize: 30px;
        --h4-textsize: 24px;
    }

    body.eng {
        /*English Variation*/

        /*標籤用Header跟main-visual-block交錯的高度要多少*/
        --selectHeaderIntersect-base: calc(72px / 2 * var(--pageScale-toMobileResize));
    }

    /*packSplitter 切換成手機模式用空間縮排*/
    .packSplitter.isParagraphGroup.toMobileParagraphAlign {
        /*額外追加的選項(主要做美化間隔用，大概)*/
        --lrPadding: var(--lrPadding-mobile);
        --centerPadding: var(--centerPadding-mobile);
        /*(以備不時之需)改成垂直排法時，僅適用otherPart的分離縮放*/
        --lrPadding-columnAlign-otherOnly: var(--lrPadding-columnAlign-otherOnly-mobile);
    }

    /*packSplitter PC開啟時，切換成手機模式不須空間縮排則用這個*/
    .packSplitter.isParagraphGroup.mobileNonParagraphGroup {
        /*額外追加的選項(主要做美化間隔用，大概)*/
        --lrPadding: 0;
        --centerPadding: 0;
        /*(以備不時之需)改成垂直排法時，僅適用otherPart的分離縮放*/
        --lrPadding-columnAlign-otherOnly: 0;
    }

    /*packSplitter 手機模式改成垂直排法*/

    .packSplitter.columnAlign-mobile {
        flex-direction: column;

        width: 100%;
        padding: 0;
    }

    .packSplitter.columnAlign-mobile.isParagraphGroup .descPart {
        width: calc(100% - var(--lrPadding) * 2);
        padding: 0 var(--lrPadding);
    }

    .packSplitter.columnAlign-mobile.isParagraphGroup .otherPart {
        width: calc(100% - var(--lrPadding-columnAlign-otherOnly) * 2);
        padding: 0 var(--lrPadding-columnAlign-otherOnly);
    }

    .packSplitter.columnAlign-mobile.isParagraphGroup .descPart~.otherPart,
    .packSplitter.columnAlign-mobile.isParagraphGroup .otherPart~.descPart {
        /*padding-left: 0px;*/
        padding-top: var(--centerPadding);
    }


    /*packSplitter 手機模式順序條相反*/
    .packSplitter.reversePartsOrder-mobile .descPart~.otherPart,
    .packSplitter.reversePartsOrder-mobile .otherPart~.descPart {
        order: -1;
    }

    /*----select tag header------*/
    #select-header {
        background-image: url(../../images/historyMenu_Sub/selectHeader/mobile/selectHeader-revolution.png);
    }

    body.eng #select-header {
        /*English Variation*/
        background-image: url(../../images/historyMenu_Sub/selectHeader/mobile/selectHeader-revolution-EN.png);
    }

    #select-header.building {
        background-image: url(../../images/historyMenu_Sub/selectHeader/mobile/selectHeader-building.png);
    }

    body.eng #select-header.building {
        /*English Variation*/
        background-image: url(../../images/historyMenu_Sub/selectHeader/mobile/selectHeader-building-EN.png);
    }

    #select-header.memorialStory {
        background-image: url(../../images/historyMenu_Sub/selectHeader/mobile/selectHeader-memorialStory.png);
    }

    body.eng #select-header.memorialStory {
        background-image: url(../../images/historyMenu_Sub/selectHeader/mobile/selectHeader-memorialStory-EN.png);
    }

    #select-header .tagLink {
        left: var(--left-mobile);
    }

    body.eng #select-header .tagLink {
        /*English Variation*/
        top: 20.5%;
        height: 33%;
    }

    #select-header .socialBtns {
        flex-direction: row;
        top: calc(var(--headerSpace) * -1);
        left: unset;
        right: 80px;
        transform: unset;
    }

    #select-header .socialBtns img {
        margin: 0;
        margin: 10px 0px;
        width: 25px;
        max-width: unset;
        min-width: unset;
        height: auto;
    }

    #select-header .socialBtns a+a {
        margin-top: 0;
        margin-left: 10px;
    }

    #select-header .resizer {
        display: none;
    }

    #select-header .resizer-mobile {
        display: block;
    }

    #select-header .resizer-mobile.eng {
        /*For English Variation*/
        display: none;
    }

    body.eng #select-header .resizer-mobile {
        /*English Variation*/
        display: none;
    }

    body.eng #select-header .resizer-mobile.eng {
        /*For English Variation*/
        display: block;
    }

    /*----main visual block------*/
    .main-visual-block::before {
        /*BG*/
        --bgWidth: calc(706 / 2);
        --lrOverlap: calc((var(--bgWidth) - var(--selectHeaderWidthOriginal-mobile-nonPx)) / var(--selectHeaderWidthOriginal-mobile-nonPx) * -50%);
        left: var(--lrOverlap);
        right: var(--lrOverlap);

        background-image: url(../../images/historyMenu_Sub/mainVisualBlock/_mobile/maonVisualBlock.png);
    }

    .main-visual-block.shadowEnd {
        --overlapSpace: calc(61px / 2 * var(--pageContainerWidthScale-mobile));
        --endHeight: calc(125px / 2 * var(--pageContainerWidthScale-mobile));
    }

    .main-visual-block.shadowEnd::after {
        background-image: url(../../images/historyMenu_Sub/mainVisualBlock/_mobile/maonVisualBlock-shadowEnd.png);
    }
}

/*-------------------mobile (width <= 550px)------------------*/

@media (max-width: 550px) {
    body {
        /*整個畫面橫長比例佔平常多少倍*/
        --pageContainerWidthScale: 0.26;
    }
}

/*-------------------mobile (width <= 450px)------------------*/

@media (max-width: 450px) {
    body {
        /*整個畫面橫長比例佔平常多少倍*/
        --pageContainerWidthScale: var(--pageScaleRef-mobile);
    }
}


/*-------------------mobile (width <= 360px)------------------*/

@media (max-width: 360px) {

    body {
        /*整個畫面橫長比例佔平常多少倍*/
        --pageContainerWidthScale: 0.18;
    }
}

/*-------------------mobile (width <= 320px)------------------*/

@media (max-width: 320px) {

    body {
        /*整個畫面橫長比例佔平常多少倍*/
        --pageContainerWidthScale: 0.15;
    }
}