/* ---------- */


.popupbox{
    --popupbdc:#0000000f;
    min-height: 300px;
    max-width: 370px;
    width: 100%;
    border: 1px solid var(--popupbdc);
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    overflow: hidden;
}
.popupclose,
.puenter{
    display: flex;
    width: 100%;
}
.popupclose button{
    padding: 15px;
    background: #fff;
}
.puc-l,.puc-r{
    border-top: 1px solid var(--popupbdc);
    width: 50%;
}
.puc-l{ border-right: 1px solid var(--popupbdc);}
.puenter{
    background: #fff;
    justify-content: center;
    align-items: center;
    border-top: 1px solid var(--popupbdc);
}
.puenter a{
    padding: 15px;
    width: 100%;
}
.popupclose button:hover,
.puenter:hover{
    background: #000;
    color: #fff;
    font-weight: bold;
}





.popupcontent{
    background-image: url(./img/popupbg.png);
    background-size: cover;
    width: 100%;
    height: 100%;
    padding: 50px 25px  35px;
    display: flex;
    flex-direction: column;
}
.putitle{
    margin-bottom: 10px;
}
.popupcontent h2{
    font-weight: bold;
    /* padding-top: 30px; */
}
.pudesc{
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    gap: 3px;
}
.pudesc p:last-child{
    font-size: .95rem;
    color: rgb(239, 26, 26);}
    
    
    /*  */
    @media (max-width:375px) {
        .popupbox{max-width: calc(100% - 20px)}
        .popupcontent h2{font-size: 1.35rem;}
        .pudesc{font-size: .95rem;}
}