/*----------Event-box Ornaments (PC only)---------*/
.event-box .box-ornament {
    --widthScalePercent: 21%;
    --lrOverlaySpace: 20%;
    --lrOverlaySpaceActual: calc(var(--lrOverlaySpace) * -1);
    --udOverlaySpace: 100%;
    --udOverlaySpaceActual: var(--udOverlaySpace);

    position: absolute;
    display: block;
    width: var(--widthScalePercent);
    height: auto;

    z-index: 1;

    pointer-events: none;

    /*positioning*/
    left: 100%;
    bottom: 100%;
    transform: translate(var(--lrOverlaySpaceActual), var(--udOverlaySpaceActual));
}

.event-box .box-ornament.left {
    left: unset;
    right: 100%;
    --lrOverlaySpaceActual: var(--lrOverlaySpace);
}

.event-box .box-ornament.bottom {
    bottom: unset;
    top: 100%;
    --udOverlaySpaceActual: calc(var(--udOverlaySpace) * -1);
}

/*footer ornament*/
#footer-ornament {
    --offsetSpace: 10%;
    --widthScalePercent: 40%;
    --heightSpace-mobile: 40%;

    position: relative;
    display: flex;
    flex-direction: row;

    width: 100%;
}

#footer-ornament::before {
    content: "";
    flex: 1;
}

#footer-ornament img {
    /*Image PC only*/
    position: relative;
    display: block;
    width: calc(var(--widthScalePercent));
    height: auto;

    pointer-events: none;

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

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

@media (max-width: 650px) {

    /*----------Event-box Ornaments (PC only)---------*/
    .event-box .box-ornament {
        display: none;
    }
    
    /*footer ornament*/
    #footer-ornament{
        /*For mobile, auto add height itself*/
        margin-top: var(--heightSpace-mobile);
    }

    #footer-ornament img{
        /*Image PC only*/
        display: none;
    }
}