/*需配備fullPack & packSplitter*/
.slidePicPackContainer{
    /*完全不動*/
    --scrollHeightMultiplier: 1;
}

.slidePicPackContainer .zeroHeader {
    width: 100%;
}

.slidePicPackContainer .zeroHeader.mainPart .fullPack.packSplitter.slidePicPack {
    /*Split to two object, one for desc, two for pic slides performance*/
    --descFlexRatio: 0.55;
    --lrPadding: 3.5%;
    --centerPadding: 0%;
}

/*pic*/

.slidePicPackContainer .zeroHeader.mainPart .fullPack .otherPart{
    position: relative;
}

.slidePicPackContainer .zeroHeader.mainPart .fullPack .otherPart .otherPartContainer{
    padding: 0 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}


/*desc*/

.slidePicPackContainer .zeroHeader.mainPart .fullPack .descPart .descScroller {
    --padding: 6%;
    /*padding: 0 var(--padding);*/
    position: relative;
    left: var(--padding);
    width: calc(100% - var(--padding) * 2);
    max-height: 100%;
    overflow-y: auto;
}

.slidePicPackContainer .zeroHeader.mainPart .fullPack .descPart .descContainer {
    padding: 0 6%;
}

.slidePicPackContainer .zeroHeader.mainPart .fullPack .descPart .descContainer h3,
.slidePicPackContainer .zeroHeader.mainPart .fullPack .descPart .descContainer .wordContent,
.slidePicPackContainer .zeroHeader.mainPart .fullPack .descPart .descContainer .others {
    padding: 0 3%;
}

.slidePicPackContainer .zeroHeader.mainPart .fullPack .descPart .horizontal-line {
    --margin-side: calc(45px * var(--pageContainerWidthScale));
    margin: var(--margin-side) 0;
}

/*BG ornament*/
.slidePicPackContainer .zeroHeader.BGPart {
    z-index: -1;
}

/*ornament - sun dawn*/
.slidePicPackContainer .zeroHeader.BGPart .fullPack {
    width: 100%;
}

.slidePicPackContainer .zeroHeader.BGPart .sunDawnAnimate {
    --sunHeight: 768;
    --sunHeightActual: calc(var(--sunHeight) * 1px * var(--pageContainerWidthScale));
    --sunWidth: 813;
    --sunWidthActual: calc(var(--sunWidth) * 1px * var(--pageContainerWidthScale));

    position: absolute;
    display: block;
    top: 50%;
    left: calc(var(--sunWidthActual) * 0.25);
    transform: translateY(-50%);

    width: calc(var(--sunWidthActual) * 0.6);
    max-width: calc(100% - var(--sunWidthActual) * 0.75);
    height: calc(var(--sunHeightActual) * 1.2);
    max-height: 100%;

    --widthAnimProgress: 0;
    --heightAnimProgress: 0;
}

.slidePicPackContainer .zeroHeader.BGPart .sunDawnAnimate::before {
    /*sun visual*/
    content: "";
    position: absolute;
    display: block;

    transform: translate(-50%, -50%);
    top: calc(var(--heightAnimProgress) * 100%);
    left: calc(var(--widthAnimProgress) * 100%);

    width: var(--sunWidthActual);
    height: var(--sunHeightActual);

    background-image: url(../../../images/historyMenu_Sub/subContentUnits/SlidePicPack/sunDawn.png);
    background-size: 100% 100%;
}

/*-----For mobile-----*/
/*手機專用，只包括Desc部分跟本體是分離的*/
.packSplitter.slidePicPack-mobileOnlyDesc {
    --descFlexRatio: 1;
    display: none;
}

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

@media (max-width: 650px) {

    /*本體在手機模式反過來關掉Desc*/
    .slidePicPackContainer .zeroHeader.mainPart .fullPack.packSplitter.slidePicPack {
        --lrPadding: 0%;
        --descFlexRatio: 0;
        --lrPadding: 3%;
    }

    .slidePicPackContainer .zeroHeader.mainPart .fullPack.packSplitter.slidePicPack .descPart {
        display: none;
    }

    /*-----For mobile-----*/
    /*手機專用，只包括Desc部分跟本體是分離的*/
    .packSplitter.slidePicPack-mobileOnlyDesc {
        display: block;
    }

    .packSplitter.slidePicPack-mobileOnlyDesc .descContainer h3,
    .packSplitter.slidePicPack-mobileOnlyDesc .descContainer .wordContent,
    .packSplitter.slidePicPack-mobileOnlyDesc .descContainer .others {
        padding: 0 4%;
    }
}