.modal{position:fixed;top:0;left:0;z-index:-1;display:flex;width:100vw;height:100vh;opacity:0;justify-content:center;align-items:center;pointer-events:none;transition:z-index .5s,opacity .5s}
.modal.is-show{z-index:99999;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);pointer-events:all}
.modal-container{display:flex;max-width:891pt;pointer-events:all}
.modal-container,.modal-inner{position:relative;width:100%;max-height:100%}
.modal-inner{overflow-x:hidden;overflow-y:scroll;background-color:#fff}
.modal-content{position:relative;margin:0 auto;max-width:50pc}
.modal-badge{position:absolute;top:-20px;left:-20px;display:flex;font-weight:700;font-feature-settings:palt;text-align:center;background-color:red;color:#fff;border-radius:50%;justify-content:center;align-items:center}
.modal-badge>span,.modal-badge>span>small{display:block}
.modal-badge>span>.narrow{letter-spacing: -0.5em;}
.modal-content>img,.modal-content>picture>img{width:100%;vertical-align:top}
.modal-info>dl{display:flex}
.modal-info>dl>dd,.modal-info>dl>dt{display:block;height:100%}
.modal-info>dl>dt{font-weight:700;text-align:center;white-space:nowrap;background-color:#222;color:#fff}
.modal-info>dl>dd{font-weight: 700;}
.modal-close{position:absolute;display:block}
.modal-close>button{display:block;width:100%;height:100%;cursor:pointer;background-color:transparent;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:#222;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:768px){
.modal{padding:20px 13px}
.modal-inner{padding:50px 20px}
.modal-badge{width:110px;height:110px}
.modal-badge>span{font-size:1.57143em;line-height:1.04545}
.modal-badge>span>small{font-size:0.81818em;line-height:1.27778}
.modal-info{display:flex;margin:10px -20px 0 0;flex-wrap:wrap}
.modal-info>dl{margin:10px 20px 0 0}
.modal-info>dl>dt{margin-right:10px;width:65px;font-size:1.07143em;line-height:1.66667}
.modal-info>dl>dd{max-width:calc(100% - 75px);font-size:1.285em;line-height:1.5625}
.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:767px){
.modal{padding:20px}
.modal-inner{padding:35px 30px}
.modal-badge{width:65px;height:65px}
.modal-badge>span{font-size:0.92857em;line-height:1.03846}
.modal-badge>span>small{font-size:0.80769em;line-height:1.28571}
.modal-info{margin-top:10px;flex-direction:column}
.modal-info>dl{margin-top:5px}
.modal-info>dl>dt{margin-right:5px;width:35px;font-size:0.85714em;line-height:1.25}
.modal-info>dl>dd{max-width:calc(100% - 50px);font-size:0.92857em;line-height:1.15385}
.modal-close{top:5px;right:5px;width:25px;height:25px}
}