#common-main-content {
    background-image: url("../../images/openCallGallery/背景.png");
}

#eventResultIntro {
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.1em;
}

#eventResultIntro .warpablePart {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#eventResultHelp {
    margin: 6% 18%;
    letter-spacing: 0.05em;
}

#eventResultHelp .methodStepUnit {
    --width: 75px;
    --widthActual: calc(var(--width) * var(--textSizeMultiplier));
    text-indent: calc(var(--widthActual) * -1);
    margin-left: var(--widthActual);

    --pointHeadOffset: 24px;
    --pointHeadOffsetActual: calc(var(--pointHeadOffset) * var(--textSizeMultiplier));
}

#eventResultHelp .methodStepUnit img {
    width: var(--widthActual);
    height: auto;
    transform: translateY(var(--pointHeadOffsetActual));
}

/*-----paper Call Result Container-----*/

#paperCallResultContainer {
    /*高度作為整個螢幕高度，但也不要影響到被header的遮擋*/
    /*max-height: calc(100vh - var(--headerSpace));
    overflow-y: auto;*/
}

#paperCallResultContent {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 3%;
}

#paperCallResultContent .paperCallResultUnit {
    /*並列3個*/
    width: 30.5%;
    margin-bottom: 5%;
}

#paperCallResultHeaderLine {
    position: relative;
    display: flex;
    flex-direction: row;
    margin: 5% 0;
    
    justify-content: space-around;
}

#paperCallResultHeaderLine .headerText.pcOnly {
    --width: 350px;
    --widthActual: calc(var(--width) * var(--textSizeMultiplier));
    width: var(--widthActual);
    height: auto;
}

#paperCallResultHeaderLine .headerText.mobileOnly {
    --width: 240px;
    --widthActual: calc(var(--width) / 2);
    width: var(--widthActual);
    height: auto;
}

#paperCallResultHeaderLine .splitLine {
    flex: 1;

    --width:554px;
    --widthActual: calc(var(--width) * var(--uiSizeMultiplier));
    max-width: var(--widthActual);

    background-image: url(../../images/openCallGallery/得獎作品分隔線段-1.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center center;
}

/*-----paper Call Result Units-----*/
.paperCallResultUnit {
    position: relative;
    display: block;

    --main-color: var(--darkGreen);
    background-color: #fff;

    --shadowOffX: 4px;
    --shadowOffY: 19px;
    --shadowBlur: 15px;
    --shadowOffXActual: calc(var(--shadowOffX) * var(--uiSizeMultiplier));
    --shadowOffYActual: calc(var(--shadowOffY) * var(--uiSizeMultiplier));
    --shadowBlurActual: calc(var(--shadowBlur) * var(--uiSizeMultiplier));

    --borderSize: 3px;
    --borderSizeActual: calc(var(--borderSize) * var(--uiSizeMultiplier));

    box-shadow: var(--shadowOffXActual) var(--shadowOffYActual) var(--shadowBlurActual) #1c3b49a1;
    border: solid var(--borderSizeActual) var(--main-color);
}

.paperCallResultUnit .inner {
    position: relative;
    display: block;
    --margin: 15px;
    margin: calc(var(--margin) * var(--uiSizeMultiplier));
}

.paperCallResultUnit .inner .digiImageContainer {
    position: relative;
    display: flex;
}

.paperCallResultUnit .inner .digiImageContainer img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;

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

.paperCallResultUnit .inner .stuffDesc,
.paperCallResultUnit .inner .stuffTitle {
    --marginLR: 2%;
    margin: 0 var(--marginLR);
}

.paperCallResultUnit .inner .stuffTitle {
    margin-top: 4%;
    margin-bottom: 1%;
}

.paperCallResultUnit .inner .stuffDesc {
    margin-bottom: 20%;
}


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

@media (max-width: 1400px) {

    /*-----paper Call Result Container-----*/
    #paperCallResultContent .paperCallResultUnit {
        /*並列2個*/
        width: 45.5%;
    }
}


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

@media (max-width: 1024px) {

    /*-----paper Call Result Container-----*/
    #paperCallResultContent .paperCallResultUnit {
        /*並列1個*/
        width: 100%;
        margin-bottom: 9%;
    }

    #paperCallResultContent .paperCallResultUnit * {
        /*並列1個，但到了完全的手機size之前先將字放大些*/
        --customTextSizeScale: 1.3;
    }
}

/*-------------------small tablet & mobile (width <= 650px)------------------*/
/*在此進入手機模式*/
@media (max-width: 650px) {
    #common-main-content {
        background-image: url("../../images/openCallGallery/_mobile/背景.png");
    }

    #eventResultHelp {
        margin: 8% 5%;
        text-align: center;
    }

    #eventResultHelp .image-button.special {
        margin-left: auto;
        margin-right: auto;
    }

    #eventResultHelp .methodStepUnit {
        display: flex;
        flex-direction: column;
        text-indent: unset;
        margin: 0;
    }

    #eventResultHelp .methodStepUnit+.methodStepUnit::before {
        content: "";
        width: 15.5px;
        height: 11px;
        margin: 8px auto;

        background-image: url("../../images/openCallGallery/_mobile/下滑.png");
        background-size: 100% 100%;
    }

    #eventResultHelp .methodStepUnit img {
        margin: 0 auto;
        transform: unset;
    }

    /*-----paper Call Result Container-----*/

    #paperCallResultContent {
        margin: 0 6%;
    }

    #paperCallResultContent .paperCallResultUnit {
        margin-bottom: 12%;
    }


    /*-----paper Call Result Units-----*/
    .paperCallResultUnit {
        --shadowOffXActual: 2px;
        --shadowOffYActual: 10px;
        --shadowBlurActual: 7px;

        --borderSizeActual: 1.5px;
    }

    .paperCallResultUnit .inner {
        margin: 8px;
    }

    .paperCallResultUnit .inner .stuffDesc,
    .paperCallResultUnit .inner .stuffTitle {
        --marginLR: 3%;
    }

    .paperCallResultUnit .inner .stuffTitle {
        margin-top: 5%;
        margin-bottom: 2%;
    }

    #paperCallResultHeaderLine .splitLine {
        max-width: unset;
        background-image: url(../../images/openCallGallery/_mobile/得獎作品分隔線段-1.png);
    }
}


/*-------------------small mobile (width <= 400px)------------------*/
/*在此進入手機模式*/
@media (max-width: 400px) {
    
    #paperCallResultContent .paperCallResultUnit * {
        /*到了完全的手機size時回復原本放大比例*/
        --customTextSizeScale: 1;
    }
}