.page-background{ display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .body{ display: flex; flex-direction: column; width: 100%; height: 100%; position: relative; z-index: 1; } .title{ display: flex; align-items: center; justify-content: space-between; padding: 20px; padding-bottom: 0px; color: #2B303A; } .title .h1{ font-size: 30px; } .title .h2{ font-size: 20px; } .title .logo{ width: 76px; } .logo-wrap{ flex: 1; display: flex; align-items: center; justify-content: center; } .logo-wrap .bg{ width: 100%; } .footer{ font-size: 14px; color: #999; padding: 0 35px 80px 35px; } .submit{ display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; font-size: inherit; border-radius: 100pc; background-color: #04C262; color: #fff; } .submit::after{ display: none; } .submit[disabled]{ background-color: #ddd; } .submit text + text{ margin-left: 10px; } .submit text.ax{ font-size: 30px; } .cancel{ font-size: 12px; text-align: center; margin: 15px 0; } .agreement{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; } .agreement .mask{ display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-size: 16px; border-radius: 100%; border: 2px solid #3EB6F8; vertical-align: middle; margin-right: 10px; } .agreement .mask .ax{ color: #fff; font-size: 10px; } .agreement .mask.active{ background-color: #3EB6F8; } .agreement .mask.active .ax{ display: block; } .agreement .em{ color: #3EB6F8; }