.noscroll { height: 100%; overflow: hidden; }

.w-layer { display: none; position: fixed; z-index: 100; width: 100%; height: 100%; top: 0; left: 0; --w-layer-max-width:83.5vw; --w-layer-padding:3.5rem; --w-layer-colse-size:30px; --w-layer-close-right:1.7rem; --w-layer-close-top: 1.5rem; }
@media (max-width: 1399.98px) { .w-layer { --w-layer-max-width: 88vw; } }
@media (max-width: 1199.98px) { .w-layer { --w-layer-max-width: 95vw; } }
@media (max-width: 991.98px) { .w-layer { --w-layer-max-width: 95vw; --w-layer-padding:1.5rem; --w-layer-close-right: .5rem; --w-layer-close-top: .5rem; } }
@media (max-width: 575.98px) { .w-layer { --w-layer-colse-size:24px; --w-layer-close-right: .5rem; --w-layer-close-top: .5rem; } }
.w-layer .mask { background-color: rgba(0, 0, 0, 0.6); -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -ms-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; position: fixed; z-index: 0; }
.w-layer .layer-wrapper { position: absolute; z-index: 2; width: 100%; height: 100%; left: 0; top: 0; }
.w-layer .layer-wrapper .layer-close { position: absolute; width: var(--w-layer-colse-size); height: var(--w-layer-colse-size); right: var(--w-layer-close-right); top: var(--w-layer-close-top); z-index: 10; cursor: pointer; }
.w-layer .layer-wrapper .layer-close svg { -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .5s; width: 100%; height: 100%; display: block; }
.w-layer .layer-wrapper .layer-close svg path { fill: #d0d0d0; }
.w-layer .layer-wrapper .layer-close:hover { -webkit-transition: transform .5s; -moz-transition: transform .5s; -ms-transition: transform .5s; -o-transition: transform .5s; transition: transform .5s; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
.w-layer .layer-wrapper .layer-close:hover svg path { fill: var(--theme-color); }
.w-layer .layer-wrapper .layer-container { position: relative; width: 100%; height: auto; max-width: var(--w-layer-max-width); background: #fff; border-radius: 10px; padding: var(--w-layer-padding) 0; }
.w-layer .layer-wrapper .layer-content { padding: 20px var(--w-layer-padding) 0; max-height: 80vh; overflow-y: scroll; }