.dialog-wrapper { background: hsla(0, 0%, 0%, 0.5); position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: none; z-index: 2; .dialog-box { width: 540px; border-radius: 20px; background: hsla(100, 100%, 100%, 0.84); position: absolute; left: 50%; margin-left: -270px; font-size: 30px; text-align: center; color: #000; } .dialog-content { padding: 60px 30px; font-size: 32px; } .dialog-header { padding: 50px 0 40px; font-size: 34px; text-align: center; font-weight: bold; } .dialog-footer { height: 88px; line-height: 88px; > span { display: block; width: 50%; height: 100%; float: left; box-sizing: border-box; &:nth-last-of-type(1) { border-left: 1px solid #ccc; color: #d0021b; } } > span:active { background-color: #ccc; } > span.dialog-center-btn { width: 100%; border: none; text-align: center; } } .dialog-footer:before { content: ""; position: absolute; left: 0; width: 200%; height: 0; border-top: 1px solid #ccc; transform-origin: left top; transform: scale3d(0.5, 0.5, 0.5); } }