/*----event box(ripped from open call home)----*/

.event-box {
    --myPaddingLRActual: 2.5%;
    --myPadding: 0px;

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

    font-weight: bold;

    /*For the box inner*/
    --myPadding-inner: 5%;

    /*For header topic image*/
    --headerTopicSizeMultiplier: calc(2/3);
    --headerTopicWidth: 789;
    --headerTopicWidth-mobile: var(--headerTopicWidth);
    --headerTopicWidthContent: var(--headerTopicWidth);
    --headerTopicWidthActual: calc(var(--headerTopicWidthContent) * var(--textSizeMultiplier) * 1px * var(--headerTopicSizeMultiplier));
    --headerTopicHeight: 789;
    --headerTopicHeight-mobile: var(--headerTopicHeight);
    --headerTopicHeightContent: var(--headerTopicHeight);
    --headerTopicHeightActual: calc(var(--headerTopicHeightContent) * var(--textSizeMultiplier) * 1px * var(--headerTopicSizeMultiplier));
}


/*event box BG*/
/*before => top, .event-box-bg-middle => middle, after => bottom*/

.event-box {
    --bgImgWidth: 1629;
}

.event-box .event-box-bg {
    position: absolute;
    display: flex;
    flex-direction: row;
    /*For header topic offset*/
    top: calc(var(--headerTopicHeightActual) / 2);
    left: 0;
    bottom: 0;
    width: 100%;

    pointer-events: none;

}

.event-box .event-box-bg::before,
.event-box .event-box-bg::after {
    --origHeight: 100;

    content: "";

    position: absolute;
    display: block;
    left: 0;
    width: 100%;

    background-size: 100% 100%;
    background-repeat: no-repeat;
    /*Same size at 1629 * 100*/
    padding-top: calc(var(--origHeight) / var(--bgImgWidth) * 100%);
}

.event-box .event-box-bg::before {
    /*top*/
    background-image: url("../../images/openCallGallery/eventBox/eventBoxTop1.png");
    top: 0;
}

.event-box .event-box-bg::after {
    /*bottom*/
    background-image: url("../../images/openCallGallery/eventBox/eventBoxBottom.png");
    bottom: 0;
}

.event-box .event-box-bg .event-box-bg-middle {
    /*middle*/
    --udRatioMargin: 70;
    margin: calc(var(--udRatioMargin) / var(--bgImgWidth) * 100%) 0;
    flex: 1;
    width: 100%;

    background-size: 100% auto;
    background-position: top;
    background-repeat: repeat-y;
    background-image: url("../../images/openCallGallery/eventBox/eventBoxMiddle.png");
}

/*event box header topic*/

.event-box .event-header-topic {
    width: var(--headerTopicWidthActual);
    max-width: 90%;
    height: var(--headerTopicHeightActual);

    object-fit: contain;
    object-position: center center;

    position: relative;
    display: block;
    transform: translateX(-50%);
    left: 50%;
}

/*event box inner*/
.event-box .event-inner-content {
    position: relative;
    display: block;

    padding: var(--myPadding-inner) 0;
}

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

@media (max-width: 650px) {

    .event-box {
        --headerTopicSizeMultiplier: 1;
        --myPaddingLRActual: 2.5%;
        /*--mobileMargin: calc(60px * var(--textSizeMultiplier-mobile));
        --mobileMarginEnd: calc(30px * var(--textSizeMultiplier-mobile));
        margin-top: var(--mobileMargin) !important;
        margin-bottom: var(--mobileMarginEnd) !important;*/

        /*For the box inner*/
        --myPadding-inner: 5%;

        /*For header topic image*/
        --headerTopicWidthContent: var(--headerTopicWidth-mobile);
        --headerTopicHeightContent: var(--headerTopicHeight-mobile);
        --headerTopicWidthActual: calc(var(--headerTopicWidthContent) * var(--textSizeMultiplier-mobile) * 1px);
        --headerTopicHeightActual: calc(var(--headerTopicHeightContent) * var(--textSizeMultiplier-mobile) * 1px);
    }

    .event-box .event-box-bg::before {
        /*top*/
        background-image: url("../../images/openCallGallery/eventBox/_mobile/eventBoxTop1.png");
    }

    .event-box .event-box-bg::after {
        /*bottom*/
        background-image: url("../../images/openCallGallery/eventBox/_mobile/eventBoxBottom.png");
    }

    .event-box .event-box-bg .event-box-bg-middle {
        /*middle*/
        --udRatioMargin: 40;
        background-image: url("../../images/openCallGallery/eventBox/_mobile/eventBoxMiddle.png");
    }
}

/*關掉BG的方法*/

.event-box.no-bg .event-box-bg{
    display: none;
}