.lightModal { display: flex; flex-direction: column; // margin: auto; width: 340px; height: 424px; background-color: white; border-radius: 24px; // position: absolute; // top: calc(50vh - 175px); margin-top: 90px; padding: 0 0 40px; color: #000000; z-index: 9999; } .lightModalTop { display: flex; align-items: center; // padding: 0 20px; width: 100%; justify-content: space-between; font-size: 16px; margin-bottom: 40px; } .lightCloseBg { padding: 20px 20px 0; } .lightModalClose { width: 24px; height: 24px; } .lightMiddle { // width: 100%; height: 155px; border-radius: 16px 16px 0 0; background: linear-gradient(-90deg, #cdecfe 0%, #ffffff 45.46%, #ffffff 53.61%, #ffca5c 100%); position: relative; margin: 0 3px; } .modalback { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99; display: flex; // align-items: center; justify-content: center; } .moveCircle { width: 28px; height: 28px; border: 3px solid #ffffff; border-radius: 14px; position: absolute; background-color: #ffca5c; z-index: 10001; } .progressBg { // width: 100%; height: 40px; border-radius: 0 0 16px 16px; background-color: #e5e5e5; display: flex; align-items: center; padding-left: 16px; font-size: 16px; position: relative; overflow: hidden; margin: 0 3px; } .progressSun { width: 21px; height: 21px; margin-right: 9px; z-index: 9999; } .progressTitle { z-index: 9999; } .progressBar { background-color: white; position: absolute; left: 1px; top: 1px; bottom: 1px; z-index: 2; border-radius: 0 0 0 16px; } .lightBtn { width: 310px; height: 56px; border-radius: 24px; align-items: center; justify-content: center; display: flex; background-color: rgba(0, 0, 0, 0.5); align-self: center; margin-top: 48px; } .lightBtnIcon { width: 18px; height: 26px; margin-right: 14px; } .lightBtnTitle { color: white; font-size: 18px; } .lightBtnSubtitle { color: rgba(255, 255, 255, 0.5); font-size: 14px; }