﻿
    .custom-popup {
        z-index: 24;
        position: absolute;
        width: 100%;
        height: 100%;
        /* border: 10px solid green; */
        display: none;
        /*background-color: #4f48484f;*/
        background-color: #ffffff8c;
    }

    .popup-container {
        position: fixed;
        width: 1024px;
        height: 100vh;
        /* border: 10px solid; */
        left: 50%;
        top: 0;
        transform: translate(-50%, 0);
        transition: all 0.25s linear;
    }

    .popup-container-center {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .popup-main-content {
        z-index: 30;
        width: 100%;
        /*height: 600px;*/
        /*height: 80%;*/
        height: 576px;
        /* border: 2px solid; */
        border-radius: 10px;
        position: absolute;
        box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
        transition: all 0.25s linear;
        opacity: 0;
    }

    .popup-btn-content {
        z-index: 1;
        width: 40px;
        height: 40px;
        align-items: center;
        display: flex;
        position: absolute;
        top: 0;
        left: 100%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        overflow: hidden;
        box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    }

    .popup-item-content-text {
        background: #ffffff;
        padding: 25px;
        position: absolute;
        width: 100%;
        height: 50%;
        bottom: 0px;
        cursor: pointer;
        opacity: 0;
        transition: all 0.25s linear;
    }

    .popup-item-content-text .detail-head {
        font-size: var(--header-news);
        color: var(--header-news-color);
        -webkit-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-weight: 900;
    }

    .popup-item-content-text .detail-text {
        font-size: var(--header-news-detail);
        color: var(--header-news-detail-color);
        -webkit-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        overflow: hidden;
    }

    .popup-item-content-text:hover {
        opacity: 1;
    }

    .popup-btn-close {
        z-index: 31;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: none;
        background: #9d0b0e;
        color: white;
    }

    .popup-btn-enter {
        z-index: 1;
        align-items: center;
        display: flex;
        position: absolute;
        transform: translate(-50%, -50%);
        overflow: hidden;
        left: 50%;
        border-radius: 25px;
        box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    }

    .popup-btn-enter > a > button {
        border-radius: 25px;
        width: 150px;
        height: 45px;
        border: none;
        background: #9d0b0e;
        color: white;
    }

    .popup-item-content {
        height: 100%;
        border-radius: 10px;
        overflow: hidden;
        /*http://localhost:4006/RailwayMiddleFile/NewsAndActImg/17457/133755076454073129_S__17842244_0.jpg*/
    }




    @media only screen and (max-width: 1080px) 
    {
        .popup-container {
            width: 854px;
        }

        .popup-main-content {
            height: 480px;
        }
    }


    @media only screen and (max-width: 900px) {
        .popup-container {
            width: 640px;
        }

        .popup-main-content {
            height: 360px;
        }
    }


    @media only screen and (max-width: 650px) {
        .popup-container {
            width: 426px;
        }

        .popup-main-content {
            height: 240px;
        }
    }

    @media only screen and (max-width: 500px) {
        .popup-container {
            width: 350px;
        }

        .popup-main-content {
            height: 197px;
        }
    }
