.modal-popup.esun-promotion-popup-modal .modal-inner-wrap { background: transparent; border-radius: 18px; box-shadow: 0 24px 80px rgba(10, 45, 63, 0.28); max-height: calc(100vh - 48px); max-width: 1120px; overflow: visible; width: calc(100% - 48px); } .modal-popup.esun-promotion-popup-modal .modal-header { height: 0; padding: 0; position: relative; z-index: 5; } .modal-popup.esun-promotion-popup-modal .modal-title { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .modal-popup.esun-promotion-popup-modal .action-close { align-items: center; background: rgba(15, 20, 22, 0.9); border: 0; border-radius: 50%; color: #fff; display: flex; height: 48px; justify-content: center; padding: 0; position: absolute; right: 18px; top: 18px; transition: background-color 160ms ease, transform 160ms ease; width: 48px; } .modal-popup.esun-promotion-popup-modal .action-close:hover, .modal-popup.esun-promotion-popup-modal .action-close:focus { background: #1e9e5a; transform: scale(1.06); } .modal-popup.esun-promotion-popup-modal .modal-content { background: #fff; border-radius: 18px; max-height: calc(100vh - 48px); overflow: auto; padding: 0; } .esun-promotion-popup { display: none; } .esun-promotion-popup._show { display: block; } .promotion-popup-content { background: linear-gradient(135deg, #effff8 0%, #e4f7ff 100%); border-radius: 18px; min-height: 620px; overflow: hidden; position: relative; } .promotion-popup-content__media, .promotion-popup-content__media picture { display: block; height: 100%; inset: 0; position: absolute; width: 100%; } .promotion-popup-content__media img { height: 100%; object-fit: cover; width: 100%; } .promotion-popup-content__body { align-items: flex-start; display: flex; flex-direction: column; justify-content: center; min-height: 620px; padding: 64px clamp(38px, 6vw, 84px); position: relative; width: 54%; z-index: 1; } .promotion-popup-content__eyebrow { color: #087d63; font-size: 14px; font-weight: 700; letter-spacing: 0.14em; margin: 0 0 14px; } .promotion-popup-content__title { color: #102f3c; font-size: clamp(48px, 5.2vw, 76px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; margin: 0 0 18px; } .promotion-popup-content__condition { color: #102f3c; font-size: clamp(22px, 2.3vw, 32px); font-weight: 700; line-height: 1.15; margin: 0 0 20px; } .promotion-popup-content__description { color: #365866; font-size: 17px; line-height: 1.55; margin: 0 0 28px; max-width: 500px; text-align: left; } .promotion-popup-content__button { background: #159b64; border-radius: 999px; color: #fff !important; display: inline-flex; font-size: 18px; font-weight: 700; justify-content: center; min-width: 230px; padding: 16px 30px; text-decoration: none !important; transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .promotion-popup-content__button:hover, .promotion-popup-content__button:focus { background: #087d63; box-shadow: 0 10px 26px rgba(8, 125, 99, 0.25); transform: translateY(-2px); } .promotion-popup-content__terms { color: #607a84; font-size: 12px; line-height: 1.45; margin: 18px 0 0; max-width: 460px; text-align: left; } @media (max-width: 767px) { .modal-popup.esun-promotion-popup-modal { left: 0; } .modal-popup.esun-promotion-popup-modal .modal-inner-wrap { border-radius: 14px; margin: 16px auto; max-height: calc(100vh - 32px); width: calc(100% - 28px); } .modal-popup.esun-promotion-popup-modal .modal-content { border-radius: 14px; max-height: calc(100vh - 32px); } .modal-popup.esun-promotion-popup-modal .action-close { height: 42px; right: 12px; top: 12px; width: 42px; } .promotion-popup-content { border-radius: 14px; min-height: min(760px, calc(100vh - 32px)); } .promotion-popup-content__body { justify-content: flex-start; min-height: min(760px, calc(100vh - 32px)); padding: 48px 28px 300px; text-align: center; width: auto; } .promotion-popup-content__eyebrow, .promotion-popup-content__title, .promotion-popup-content__condition, .promotion-popup-content__description, .promotion-popup-content__terms { align-self: center; text-align: left; } .promotion-popup-content__title { font-size: clamp(42px, 13vw, 60px); } .promotion-popup-content__condition { font-size: 23px; } .promotion-popup-content__description { font-size: 15px; margin-bottom: 22px; text-align: left; } .promotion-popup-content__button { align-self: center; font-size: 16px; min-width: 210px; padding: 14px 24px; } } @media (prefers-reduced-motion: reduce) { .modal-popup.esun-promotion-popup-modal .action-close, .promotion-popup-content__button { transition: none; } }