.popup{position:fixed;width:100%;height:100%;left:0;top:0}.popup::before{content:"";width:100%;height:100%;position:absolute;left:0;top:0;background:#000;opacity:.7;z-index:0;animation:popup-background .3s}.popup.remove::before{animation:popup-background-reverse .3s;animation-fill-mode:both;animation-delay:.4s}.popup.remove .main{animation:popup-main-reverse .5s;animation-fill-mode:both;animation-delay:.5}.popup.remove .main button.close{animation:popup-close-reverse .2s;animation-fill-mode:both}.popup .main{background:#fff;max-width:500px;width:80%;max-height:500px;height:auto;position:relative;z-index:1;border-radius:10px;padding:1rem;left:50%;top:50%;transform:translate(-50%, -50%);overflow:hidden;display:flex;flex-direction:column;animation:popup-main .5s;animation-delay:.3}.popup .main.img-view{max-height:unset;height:unset;background:unset;overflow:unset;max-width:600px;width:100%;display:flex;box-sizing:initial}@media(max-width: 700px){.popup .main.img-view{max-width:400px}}@media(max-width: 500px){.popup .main.img-view{max-width:300px}}.popup .main.img-view button.close{top:-20px}.popup .main.img-view button.close svg{stroke:#fff}.popup .main.img-view .popup-img{width:100%;height:600px;object-fit:cover;border-radius:50%}@media(max-width: 700px){.popup .main.img-view .popup-img{height:400px}}@media(max-width: 500px){.popup .main.img-view .popup-img{height:300px}}.popup .main button.close{position:absolute;right:1rem;top:1rem;cursor:pointer;animation:popup-close .2s;animation-delay:.6s;animation-fill-mode:both;transform:scale(0);background:rgba(0,0,0,0);padding:0;margin:0;border:none}.popup .main button.close svg{width:30px;height:30px;stroke-width:2}.popup .main h2{padding:0 1rem}.popup .main .detail{overflow:auto;height:100%;padding:0 1rem}@keyframes popup-background{0%{opacity:0}100%{opacity:.7}}@keyframes popup-main{0%{transform:translate(-50%, -1000%)}100%{transform:translate(-50%, -50%)}}@keyframes popup-close{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes popup-background-reverse{0%{opacity:.7}100%{opacity:0}}@keyframes popup-main-reverse{0%{transform:translate(-50%, -50%)}100%{transform:translate(-50%, -1000%)}}@keyframes popup-close-reverse{0%{transform:scale(1)}100%{transform:scale(0)}}