.popup_container{ display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; height: auto; top: 6.23rem; bottom: unset; padding: 0 1.47rem; } .pop_con{ background: var(--darkColor1); border-radius: 0.36rem; overflow: hidden; width: 100%; height: fit-content; pointer-events: auto; } .container{ display: flex; flex-direction: column; background: #fff; position: relative; width: 100%; height: auto; & .bg{ position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 600/500; img{ width: 100%; height: auto; } } & .content{ padding: 0 1.1rem 1.83rem; position: relative; & .head{ display: flex; flex-direction: column; height: 8.43rem; justify-content: center; & .title{ color: #000; font-size: 1.61rem; font-weight: 650; line-height: 1.2 } & .subtitle{ color: #aaa; font-size: 0.88rem; line-height: 1.4; } } & .logo_box{ display: flex; & .logo{ width: 5.13rem; height: 5.13rem; border-radius: 1rem; margin-right: 0.73rem; overflow: hidden; } & .right_title{ color: #464646; font-size: 1.32rem; line-height: 1.4; text-transform: capitalize; } & .right_percentage{ color: #8a8a8a; font-size: 0.88rem; line-height: 0.88rem; margin: 0.36rem 0; transform: scale(.8) translate(-1.3rem); } & .right_bottom{ align-items: center; display: flex; & .tips{ color: #8a8a8a; font-size: 0.88rem; transform: scale(.8) translate(-1.02rem); line-height: 1rem; } & .placeholder{ height: 0.88rem; width: 0.66rem; } } } & .item{ align-items: center; display: flex; justify-content: space-between; margin-top: 1.83rem; width: 100%; & .left{ flex: 1; & .title{ color: #000; font-size: 1.1rem; font-weight: 650; line-height: 1.1rem; } & .subtext{ color: #aaa; font-size: 0.88rem; font-weight: 400; line-height: 0.88rem; } } & .right{ animation: rotate 1s linear infinite; height: 1.1rem; width: 1.1rem; img{ width: 100%; } } &_finish{ & .right{ animation:none; } } } & .button{ margin: 2.56rem 0 0; width: 100%; button{ background: #01875f; border: none; border-radius: 0.36rem; color: #fff; font-size: 1.1rem; height: 2.93rem; outline: none; width: 100%; } } } } @keyframes rotate { 0% { transform: rotate(0) } to { transform: rotate(1turn) } }