@charset "utf-8";
.popup-list { position: fixed; top: 120px; right: 60px; z-index: 999; display: flex;  justify-content: flex-end; gap: 10px; width: calc(100% - 150px); }
.popup-list .popup { background: #fff; border: 1px solid #ddd; padding: 10px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
.popup-list .popup.remove { display: none; }
.popup-list .popup a { display: block; }
.popup-list .popup img { width: 100%; }
.popup-list .popup .bottom { width: 100%; border: 1px solid #ddd;  }
.popup-list .popup .close { width: fit-content; padding: 10px 15px; margin: 0 0 0 auto; }

@media all and (max-width: 1440px) {
    .popup-list .popup { max-width: 315px; }
    .popup-list .popup .close { padding: 8px 15px; } 
}

@media all and (max-width: 1024px) {
    .popup-list { flex-wrap: wrap;  }
    .popup-list .popup { width: 33%; }
    .popup-list .popup .close { width: 100%; text-align: right; padding: 8px 10px; }
}

@media all and (max-width: 820px) {
    .popup-list { position: absolute; width: 50%; top: 90px; }
    .popup-list .popup { width: 100%; max-width: none; }
}

@media all and (max-width: 601px) {
    .popup-list { right: 30px; width: 80%; }

}