.ManualTurnableModelUnit {
    --width: 1331;
    --height: 622;
    --sizeScale: 1;
    --marginSpace: 100;
    position: relative;
    display: block;

    width: calc(1px * var(--sizeScale) * var(--width) * var(--pageContainerWidthScale));
    height: calc(1px * var(--sizeScale) * var(--height) * var(--pageContainerWidthScale));
    margin: calc(1px * var(--marginSpace) * var(--pageContainerWidthScale)) auto;
}

.ManualTurnableModelUnit::before {
    content: "";
    position: absolute;
    display: block;
    pointer-events: none;
    top: 0;
    left: 0;
    width: calc(1352 / var(--width) * 100%);
    height: calc(646 / var(--height) * 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../../../../images/historyMenu_Sub/subContentUnits/TurnableBuildingModel/模型框.png);
}

.ManualTurnableModelUnit .canvasPlacementInner {
    position: absolute;
    display: block;
    --sideSpace: 10%;
    --udSpace: 3%;
    top: var(--udSpace);
    bottom: var(--udSpace);
    left: var(--sideSpace);
    right: var(--sideSpace);
}

.ManualTurnableModelUnit .canvasPlacementInner canvas,
.ManualTurnableModelUnit .canvasPlacementInner .clickMeText,
.ManualTurnableModelUnit .canvasPlacementInner .loadingMsgText {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.ManualTurnableModelUnit .canvasPlacementInner .clickMeText,
.ManualTurnableModelUnit .canvasPlacementInner .loadingMsgText {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.ManualTurnableModelUnit .canvasPlacementInner .revealable {
    pointer-events: none;
    opacity: 0;
}

.ManualTurnableModelUnit .canvasPlacementInner .revealable.isReveal {
    pointer-events: auto;
    opacity: 1;
}

.ManualTurnableModelUnit .canvasPlacementInner canvas.revealable.isReveal {
    transition: opacity 0.5s;
}


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

@media (max-width: 650px) {
    .ManualTurnableModelUnit {
        --sizeScale: 1.2;
    }
}

/*------------For device: tablet & mobile-------------*/

.ManualTurnableModelUnit.mobileMode::before {
    background-image: url("../../../../images/historyMenu_Sub/subContentUnits/TurnableBuildingModel/_mobile/模型框mobile.png")
}

.ManualTurnableModelUnit.mobileMode .canvasPlacementInner img.slidePics {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.ManualTurnableModelUnit.mobileMode .canvasPlacementInner img.switchBtn {
    position: absolute;
    display: block;
    --margin: 10px;
    --marginActual: calc(var(--pageContainerWidthScale) * var(--margin));
    --width: 45px;
    --widthActual: calc(var(--pageContainerWidthScale) * var(--width));
    --widthMin: 25px;

    height: auto;
    width: var(--widthActual);
    min-width: var(--widthMin);
    transform: translateY(-50%);
    top:50%;
}

.ManualTurnableModelUnit.mobileMode .canvasPlacementInner img.switchBtn.prev {
    right: calc(100% + var(--marginActual));
}

.ManualTurnableModelUnit.mobileMode .canvasPlacementInner img.switchBtn.next {
    left: calc(100% + var(--marginActual));
}