.pay-success { background: #f5f5f5; } .payok-top { background-color: #fff; text-align: center; } .payok-top .icon { padding-top: 6.667vw; } .payok-top .icon image { display: block; height: 24vw; margin: 0 auto; width: 24vw; } .payok-top .price { color: #eb5252; font-size: 6.933vw; font-weight: 500; } .payok-top .handle { -webkit-box-pack: center; -ms-flex-pack: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; padding-bottom: 4vw; } .payok-top .tip { color: #2a2a2a; font-size: 4vw; margin-bottom: 2vw; margin-top: 2vw; } .payok-top .btn { border: 1px solid #b4b4b4; border-radius: 8vw; color: #2a2a2a; font-size: 3.733vw; line-height: 6.933vw; margin: 3.2vw auto 0; padding: 0 1.333vw; width: 20%; } .payok-redlist { background-color: #fff; } .payok-redlist .title { color: #2a2a2a; font-size: 3.733vw; font-weight: 700; margin: 0 auto 5.333vw; position: relative; width: max-content; } .payok-redlist .title:after,.payok-redlist .title:before { background-color: #2a2a2a; content: ""; height: .267vw; position: absolute; top: 50%; transform: translateY(-50%); width: 3.467vw; } .payok-redlist .title:before { left: -5.333vw; } .payok-redlist .title:after { right: -5.333vw; } .payok-redlist .lists { -webkit-overflow-scrolling: touch; overflow: hidden; overflow-x: auto; padding-bottom: 4vw; } .payok-redlist .list { color: #ff985b; padding-left: 4vw; white-space: nowrap; } .payok-redlist .list,.payok-redlist .list .item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .payok-redlist .list .item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-box-pack: justify; -ms-flex-pack: justify; background: rgba(255,39,65,.05); border: 1px solid #06a2b3; border-radius: 2vw; box-sizing: border-box; flex-direction: column; height: 24.133vw; justify-content: space-between; margin-right: 4vw; padding: 2.667vw; position: relative; width: 39.6vw; z-index: 1; } .payok-redlist .list .item:after,.payok-redlist .list .item:before { background-color: #fff; border: 1px solid; border-color: inherit; border-radius: 50%; content: ""; display: none; height: 4vw; position: absolute; top: 50%; transform: translateY(-50%); width: 4vw; } .payok-redlist .list .item:before { left: -2vw; } .payok-redlist .list .item:after { right: -2vw; } .payok-redlist .list .item .name { color: #2a2a2a; font-size: 3.733vw; height: 4.8vw; line-height: 4.8vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .payok-redlist .list .item .money { color: #fff; font-size: 4.133vw; font-weight: 500; } .payok-redlist .list .item .btm { -webkit-box-align: end; -ms-flex-align: end; -webkit-box-pack: justify; -ms-flex-pack: justify; align-items: flex-end; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; } .payok-redlist .list .item .intro { color: #2a2a2a; font-size: 3.2vw; margin-top: 2.133vw; } .payok-redlist .list .item .btn { background-color: #06a2b3; border-radius: 2.667vw; color: #fff; font-size: 2.933vw; padding: .8vw 2.133vw; } .payok-title .title { color: #2a2a2a; font-size: 4.8vw; font-weight: 700; margin: 0 auto; position: relative; width: max-content; } .payok-title .title:after,.payok-title .title:before { background-color: #2a2a2a; content: ""; height: .667vw; position: absolute; top: 50%; width: 2.667vw; } .payok-title .title:before { left: -4.267vw; } .payok-title .title:after { right: -4.267vw; } .payok-section { background-color: #fff; margin-top: 3.2vw; } .payok-title { padding: 6.667vw 0; text-align: center; } .wrap { margin: 0 5.333vw; } .tuilist { padding: 0; }