* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { width: 1000px; margin: 0 auto; background: #edf9fc; color: #333; font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
.page { position: relative; width: 1000px; margin: 0 auto; background-repeat: no-repeat; background-position: center top; background-size: 100% auto; }
.home-page { height: 3204px; background-image: url("../images/home.jpg"); }
.form-page { height: 3239px; background-image: url("../images/form1_bg.jpg"); }
.hotspot { position: absolute; display: block; background: transparent; }
.home-cta { left: 166px; top: 1705px; width: 248px; height: 124px; border-radius: 62px; }

#leadForm { position: absolute; inset: 0; }
.form-field { position: absolute; display: flex; align-items: center; height: 60px; border: 1px solid #007ec6; border-radius: 10px; background: #fff; color: #007ec6; }
.form-field img { width: 37px; height: 37px; margin: 0 11px; object-fit: contain; flex: 0 0 auto; }
.form-field strong { flex: 0 0 auto; height: 60px; color: #007ec6; font-size: 30px; font-weight: 700; line-height: 60px; white-space: nowrap; }
.form-field input { min-width: 0; flex: 1 1 auto; height: 58px; padding: 0 15px; border: 0; outline: 0; background: transparent; color: #007ec6; font-size: 24px; font-weight: 700; }
.field-name { left: 94px; top: 1010px; width: 380px; }
.field-phone { left: 525px; top: 1010px; width: 380px; }
.field-company { left: 94px; top: 1091px; width: 380px; }
.field-email { left: 525px; top: 1091px; width: 380px; }
.field-address { left: 94px; top: 1172px; width: 811px; }
.field-parameters { left: 94px; top: 1569px; width: 811px; }
.field-parameters::before { display: none; }
.field-parameters span { position: absolute; left: 7px; top: -62px; padding: 0; color: #007ec6; font-size: 26px; font-weight: 700; line-height: 36px; }

.question { position: absolute; width: 811px; margin: 0; padding: 0; border: 0; }
.question legend { margin: 0; padding: 0 0 24px 7px; color: #007ec6; font-size: 26px; font-weight: 700; line-height: 36px; }
.purchase-plan { left: 94px; top: 1266px; }
.purchase-history { left: 94px; top: 1387px; }
.question label { display: inline-flex; align-items: center; height: 30px; margin-right: 63px; color: #252525; font-size: 26px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.question label:last-child { margin-right: 0; }
.question input { position: absolute; opacity: 0; }
.question span { display: inline-flex; align-items: center; }
.question span::before { content: ""; display: inline-block; width: 29px; height: 29px; margin-right: 22px; background: url("../images/details_07.png") center / 29px 29px no-repeat; }
.question input:checked + span { color: #168bdd; font-weight: 700; }
.question input:checked + span::before { background-image: url("../images/details_06.png"); background-size: 29px 29px; }
.purchase-plan label { margin-right: 0; }
.purchase-plan label:nth-of-type(1) { width: 280px; }
.purchase-plan label:nth-of-type(2) { width: 247px; }
.purchase-history label { margin-right: 0; }
.purchase-history label:first-of-type { width: 280px; }

.agreement-row { position: absolute; left: 383px; top: 1715px; display: flex; align-items: center; height: 28px; color: #238bd2; font-size: 17px; font-weight: 700; }
.agreement-row input { appearance: none; width: 27px; height: 27px; margin: 0 9px 0 7px; background: url("../images/details_09.png") center / 27px 27px no-repeat; }
.agreement-row input:checked { background-image: url("../images/details_08.png"); }
.agreement-row button { padding: 0; background: transparent; color: #238bd2; font-weight: 700; text-decoration: underline; }
.submit-button { position: absolute; left: 383px; top: 1752px; width: 228px; height: 83px; background: url("../images/details_12.png") center / 228px 81px no-repeat; }

.popup-bg { position: fixed; inset: 0; z-index: 20; width: 100%; height: 100vh; background: rgba(0, 0, 0, .6); }
.popup-bg[hidden] { display: none; }
.agreement-modal, .success-modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; }
.agreement-modal { width: 900px; height: 580px; border-radius: 20px; }
.agreement-modal header { position: relative; height: 70px; color: #1e72c8; text-align: center; font-size: 24px; font-weight: 700; line-height: 70px; }
.modal-close { position: absolute; right: 24px; top: 18px; width: 34px; height: 34px; padding: 0; background: transparent; }
.modal-close img { width: 24px; height: 24px; margin: 5px; }
.agreement-content { height: 400px; overflow-y: auto; padding: 0 50px; color: #323232; font-size: 16px; line-height: 30px; }
.agreement-content h2 { margin: 0 0 18px; color: #1e72c8; text-align: center; }
.agreement-content h3 { margin: 14px 0 4px; }
.agreement-content p { margin: 0 0 12px; }
.agreement-confirm { display: block; width: 300px; height: 53px; margin: 22px auto 0; padding: 0; background: transparent; }
.agreement-confirm img { width: 300px; height: 53px; }
.success-modal { width: 617px; height: 356px; border-radius: 10px; background: url("../images/details_16.png") center / 617px 356px no-repeat; }
.success-modal button { position: absolute; top: 280px; width: 110px; height: 42px; padding: 0; background: transparent; }
.success-continue { left: 165px; }
.success-home { left: 340px; }
.success-modal img { width: 110px; height: 42px; }