/* Popup Banner Styles */
.bgPopup {
    position  : fixed;
    top       : 0;
    left      : 0;
    width     : 100vw;
    height    : 100vh;
    background: #000;
    opacity   : 0.7;
    z-index   : 999;
    transition: all 0.4s ease-out;
}

.bgPopup.hide {
    opacity       : 0;
    visibility    : hidden;
    pointer-events: none;
}

.popupBanner {
    position       : fixed;
    top            : 50%;
    left           : 50%;
    z-index        : 999999;
    transform      : translate(-50%, -50%);
    display        : flex;
    height         : auto;
    align-items    : center;
    justify-content: center;
    width          : 100vw;
    height         : 100vh;
    transition     : all 0.4s ease-out;
}

.popupBanner.hide {
    opacity       : 0;
    visibility    : hidden;
    pointer-events: none;
}

.popupBanner.hide::after {
    opacity       : 0;
    pointer-events: none;
}

.popupBanner .close {
    position       : absolute;
    top            : 0;
    right          : 0;
    cursor         : pointer;
    width          : 60px;
    height         : 60px;
    z-index        : 1;
    display        : flex;
    align-items    : center;
    justify-content: center;
    background     : #fff;
    font-size      : 28px;
    color          : var(--color-blue, #912c3c);
    transition     : all 0.4s ease-out;
    border-radius  : 0 0 0 12px;
}

.popupBanner .close i {
    transition: all 0.4s ease-out;
}

.popupBanner .close:hover i {
    transform: rotate(90deg);
}

.popupBanner .--img {
    height     : 100%;
    display    : flex;
    align-items: center;
}

.popupBanner .--img img {
    max-height: 70vh;
    height    : 100%;
    object-fit: contain;
    width     : 100%;
    display   : block;
    margin    : 0 auto;
}

.popupBanner .slick-list,
.popupBanner .slick-track {
    height: 100%;
}

.popupBanner .--listImg {
    width  : 90%;
    display: block;
    margin : 0 auto;
    height : 100%;
}

.popupBanner .--arrow {
    position       : absolute;
    top            : 50%;
    pointer-events : auto;
    color          : var(--color-blue, #912c3c);
    background     : #fff;
    border         : 1px solid rgba(255, 255, 255, 0.38);
    transform      : translate(0, -50%);
    width          : 48px;
    height         : 48px;
    transition     : all 0.4s ease-out;
    display        : flex;
    align-items    : center;
    justify-content: center;
    cursor         : pointer;
    border-radius  : 50%;
    font-size      : 16px;
    pointer-events : auto;
}

.popupBanner .--arrow.slick-next {
    right: 12px;
}

.popupBanner .--arrow.slick-prev {
    left: 12px;
}

.popupBanner .--arrow:hover {
    transform: scale(0.9) translate(0, -50%);
}

.popupBanner .arrow {
    position      : absolute;
    width         : 100%;
    height        : 100%;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 769px) {
    .popupBanner {
        width : calc(100vw - 30px);
        height: auto;
    }

    .popupBanner .--listImg {
        width: 100%;
    }

    .popupBanner .--listImg.pc {
        display: none !important;
    }

    .popupBanner .--listImg.mobi {
        display: block !important;
    }

    .popupBanner .close {
        width    : 40px;
        height   : 40px;
        font-size: 20px;
    }

    .popupBanner .--img {
        width : 100%;
        height: max-content;
    }

    .popupBanner .--img img {
        width     : 100%;
        height    : auto;
        max-height: 100vh;
    }

    .popupBanner .--arrow {
        width    : 36px;
        height   : 36px;
        font-size: 14px;
    }

    .popupBanner .--arrow.slick-next {
        right: -12px;
    }

    .popupBanner .--arrow.slick-prev {
        left: -12px;
    }
}