@charset "utf-8";

.popup-list { position: fixed; top: 80px; left: 18%; z-index: 999; display: flex; /*justify-content: flex-end;*/ gap: 10px; width: calc(100% - 150px); }
.popup-list .popup { background: #faf7f0; border: 1px solid #ddd; padding: 10px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.1); width: 320px; aspect-ratio: 9/16; }
.popup-list .popup .popup-content { width: 100%; height: 100%; background: url(../videothumb.jpg) no-repeat center/contain; }
.popup-list .popup.remove { display: none; }

.popup-list .popup video { width: 100%; }
.popup-list .popup .bottom { width: 100%; border: 1px solid #ddd; border-top: 0; }
.popup-list .popup .close { width: fit-content; padding: 8px 12px; margin: 0 0 0 auto; font-weight: bold; }


@media all and (max-width: 1600px) {
    .popup-list { left: 20%; }
}

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

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

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

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

}