.modal{position:fixed;top:0;left:0;z-index:-1;width:100vw;height:100vh;opacity:0;transition:z-index .5s,opacity .5s}
.modal *{box-sizing: border-box;}
.modal.is-show{z-index:9999;opacity:1;transition:opacity .5s}
.modal-overlay{position:absolute;top:0;left:0;cursor:pointer;width:100%;height:100%;background-color:rgba(0,0,0,.6)}
.modal-container{position:absolute;top:0;left:0;display:flex;width:100%;height:100%;justify-content:center;align-items:center;pointer-events:none}
.modal-inner{position:relative;width:100%;max-width:740px;pointer-events:all}
.modal-inner>img{width:100%}
.modal-close{position:absolute;display:block;background-color:#fff}
.modal-close>button{display:block;width:100%;height:100%;cursor:pointer;background-color:#333;border:0}
.modal-close>button:after,.modal-close>button:before{position:absolute;top:50%;left:50%;display:block;width:57.14286%;height:5.71429%;background-color:#fff;border-radius:1px;content:''}
.modal-close>button:before{transform:translate(-50%,-50%) rotate(45deg)}
.modal-close>button:after{transform:translate(-50%,-50%) rotate(-45deg)}
@media print,screen and (min-width:641px){
.modal-container{padding:20px 13px}
.modal-close{top:15px;right:15px;width:35px;height:35px}
.modal-close>button{transition:opacity .3s}
.modal-close>button:hover{opacity:.7}
}
@media screen and (max-width:640px){
.modal-container{padding:20px}
.modal-close{top:5px;right:5px;width:25px;height:25px}
}