.modal {
   position: fixed;
   width: 100%;
   height: 100%;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
   top: 0;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow-y: auto;
   padding: 20px;
   z-index: 9999;
}
.modal {scrollbar-width: none;}
.modal::-webkit-scrollbar {height: 0; width: 0; display: none;}
.modal::-webkit-scrollbar-track {background: transparent;}
.modal::-webkit-scrollbar-thumb {background-color: transparent; border-radius: 0px; border: transparent;}
.modal.open {
   visibility: visible;
   opacity: 1;
   transition-delay: 0s;
}
.modal-bg {
   position: fixed;
   background: rgba(0, 0, 0, 0.7);
   width: 100%;
   height: 100%;
}
.modal-container {
   background: var(--body-color);
   position: relative;
   padding: 55px;
   width: 100%;
   max-width: 500px;
   margin: auto;
}
.modal-container h2 {
   margin-bottom: 40px;
   text-transform: none;
   color: #333;
   font-size: 30px;
   font-weight: 700;
}
.modal-close {
   position: absolute;
   right: 0;
   top: 0;
   outline: none;
   appearance: none;
   background: var(--main-color) url("../images/close-ico.svg") no-repeat center center;
   border: none;
   cursor: pointer;
   width: 45px;
   height: 45px;
   transition: all 0.3s ease;
   padding: 0;
}
.modal-container .form-styled .alert {
   position: absolute;
   width: 100%;
   box-sizing: border-box;
}
.modal-container .buttons {
   display: flex;
   gap: 20px;
   margin-top: 50px;
}
.modal-container button[type="submit"] {
   width: 100%;
}

.mask-layer {display: none;position: fixed;width: 100%;height: 100%;left: 0;z-index: 1000;}
.mask-layer-black {width: 100%;height: 100%;opacity: .85;position: absolute;top: 0;left: 0;opacity: .85;}
.mask-layer-container {display: flex;justify-content: center;height: 100%;align-items: center;}
.sample-name {font-size: 28px;margin-bottom: 45px;color: #fff;}
.mask-layer-container .sample-item {margin-bottom: 0;color: #fff;font-size: 22px;line-height: 34px;max-width: 758px;}
.mask-layer-container .mask-left {margin-right: 4%;width: 700px;}
.mask-layer-container .sample-info {display: flex;}
.mask-layer-container .sample-title {margin-right: 25px;}
.mask-layer-container .sample-more {width: 220px;font-size: 22px;margin-top: 50px;height: 42px;color: #a42220;border-radius: 21px;line-height: 42px;background: #fff;display: inline-block;text-align: center;}
.fancybox-content {background: none;}
.fancybox-can-pan .fancybox-content, .fancybox-can-swipe .fancybox-content {cursor: default;}