header { height: 3.48rem; background-image: url(../images/banner.png); background-size: 100%; background-repeat: no-repeat; background-position: bottom; position: relative } header .check-rule { display: block; position: absolute; width: 1.4rem; height: .44rem; line-height: .44rem; text-align: center; color: #feec67; font-size: .28rem; top: .23rem; right: .21rem; border-radius: .22rem; background: hsla(0,0%,100%,.1); cursor: pointer; } nav { overflow: hidden; height: 2.08rem; background-image: url(../images/bg.png); background-size: 100%; background-repeat: no-repeat; background-position: top; position: relative; top: -1px } nav.fixed { width: 100%; position: fixed; left: 0; top: 0; z-index: 1 } nav .search-wrap { width: 6.85rem; height: .8rem; line-height: .8rem; margin: 0 auto; padding: 0 .8rem 0 .3rem; box-sizing: border-box; position: relative; background: #fff; border-radius: .4rem; top: .2rem; box-shadow: 0 0 5px 3px rgba(0,0,0,.2) } nav .search-wrap button { width: .8rem; height: .8rem; border: none; background-image: url(../images/yellow.png); background-size: 100%; background-repeat: no-repeat; background-position: 50%; position: absolute; right: 0; top: 0; background-color: transparent } nav .search-wrap button img { width: .35rem } nav .search-wrap input { width: 100%; border: none } nav .menu { width: 100%; height: .88rem; position: absolute; left: 0; bottom: 0; display: flex; } nav .menu li { line-height: .88rem; height: .88rem; flex: 1; text-align: center; font-size: .34rem; color: #fee75c } nav .menu li.active { color: #5817b3; background: linear-gradient(#fffb84,#fee04f) } section #owner .owner-list { padding: .3rem .22rem 0; overflow: hidden } section #owner .owner-list li { width: 33.33%; padding: 0 .1rem; float: left; box-sizing: border-box; margin-bottom: .3rem } section #owner .owner-list li .item { background: #fffb84; border-radius: .05rem .05rem .4rem .4rem; box-shadow: 0 6px 12px rgba(0,0,0,.25); position: relative } section #owner .owner-list li .item .rank { width: 1.01rem; height: .5rem; line-height: .5rem; text-align: center; position: absolute; left: -.13rem; top: .1rem; background-size: 100%; background-repeat: no-repeat; background-position: 50%; color: #fee75c; font-size: .24rem } section #owner .owner-list li .item .rank.rank0_3 { background-image: url(../images/red.png) } section #owner .owner-list li .item .rank.rank4_10 { background-image: url(../images/orange.png) } section #owner .owner-list li .item a { display: block } section #owner .owner-list li .item a .thum { padding: .05rem } section #owner .owner-list li .item a .thum img { width: 100%; height: 1.8rem } section #owner .owner-list li .item a .info { font-size: .22rem; color: #5817b3; padding-left: .05rem } section #owner .owner-list li .item a .info p { line-height: .32rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: .05rem 0 } section #owner .owner-list li .item .amount { height: .8rem; line-height: .8rem; text-align: center; background: linear-gradient(#ff74f0,#9d1be8); border-radius: .4rem; font-size: .32rem; color: #fee75c; box-sizing: border-box; padding: 0 .78rem 0 .18rem; position: relative } section #owner .owner-list li .item .amount .and-one { display: block; width: 1rem; height: .5rem; line-height: .5rem; font-size: .4rem; color: #f60d9b; position: absolute; top: -.5rem; right: 0; -webkit-animation: b 1s 1 ease-out; animation: b 1s 1 ease-out } section #owner .owner-list li .item .amount .vote { display: block; width: .72rem; height: .72rem; line-height: .72rem; position: absolute; right: .05rem; top: 50%; margin-top: -.36rem; text-align: center; border-radius: 50%; background: linear-gradient(#fffb84,#fee04f); box-sizing: border-box; border: 1px solid #fff; color: #f60d9b; font-size: .28rem; cursor:pointer; } section #owner .owner-list li .item .amount .vote.opacity { opacity: .5 } section #owner .owner-list li .item .amount .vote.disabled { background: linear-gradient(#ebebeb,#aeaeae); color: #999 } section #owner .owner-list li .item .amount .vote.cannotclick { pointer-events: none } section #owner .loading { height: .5rem; line-height: .5rem; text-align: center; display: none } section #owner .loading img { width: .34rem; -webkit-animation: a .5s infinite linear; animation: a .5s infinite linear } section #owner .end { height: .5rem; line-height: .5rem; text-align: center; color: #afa245; display: none } section #owner .no-data { display: none; padding-top: 4rem; background-image: url(../images/search_empty.png); background-size: 1.64rem 1.64rem; background-repeat: no-repeat; background-position: center 2.35rem } section #owner .no-data p { color: #fff; text-align: center; padding-top: .74rem; color: #967bcc; font-size: .28rem } section #seller { display: none } section #seller .seller-list { padding: .3rem .22rem 0; overflow: hidden } section #seller .seller-list li { width: 33.33%; padding: 0 .1rem; float: left; box-sizing: border-box; margin-bottom: .3rem } section #seller .seller-list li .item { background: #fffb84; border-radius: .05rem .05rem .4rem .4rem; box-shadow: 0 6px 12px rgba(0,0,0,.25); position: relative } section #seller .seller-list li .item .rank { width: 1.01rem; height: .5rem; line-height: .5rem; text-align: center; position: absolute; left: -.13rem; top: .1rem; background-size: 100%; background-repeat: no-repeat; background-position: 50%; color: #fee75c; font-size: .24rem } section #seller .seller-list li .item .rank.rank0_3 { background-image: url(../images/red.png) } section #seller .seller-list li .item .rank.rank4_10 { background-image: url(../images/orange.png) } section #seller .seller-list li .item a { display: block } section #seller .seller-list li .item a .thum { padding: .05rem } section #seller .seller-list li .item a .thum img { width: 100%; height: 1.8rem } section #seller .seller-list li .item a .info { font-size: .22rem; color: #5817b3; padding-left: .05rem } section #seller .seller-list li .item a .info p { line-height: .32rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: .05rem 0 } section #seller .seller-list li .item .amount { height: .8rem; line-height: .8rem; text-align: center; background: linear-gradient(#ff74f0,#9d1be8); border-radius: .4rem; font-size: .32rem; color: #fee75c; box-sizing: border-box; padding: 0 .78rem 0 .18rem; position: relative } section #seller .seller-list li .item .amount .and-one { display: block; width: 1rem; height: .5rem; line-height: .5rem; font-size: .4rem; color: #f60d9b; position: absolute; top: -.5rem; right: 0; -webkit-animation: b 1s 1 ease-out; animation: b 1s 1 ease-out } section #seller .seller-list li .item .amount .vote { display: block; width: .72rem; height: .72rem; line-height: .72rem; position: absolute; right: .05rem; top: 50%; margin-top: -.36rem; text-align: center; border-radius: 50%; background: linear-gradient(#fffb84,#fee04f); box-sizing: border-box; border: 1px solid #fff; color: #f60d9b; font-size: .28rem; cursor: pointer; } section #seller .seller-list li .item .amount .vote.disabled { background: linear-gradient(#ebebeb,#aeaeae); color: #999 } section #seller .seller-list li .item .amount .vote.cannotclick { pointer-events: none } section #seller .loading { height: .5rem; line-height: .5rem; text-align: center; display: none } section #seller .loading img { width: .34rem; -webkit-animation: a .5s infinite linear; animation: a .5s infinite linear } section #seller .end { display: none; height: .5rem; line-height: .5rem; text-align: center; color: #fff } section #seller .no-data { display: none; padding-top: 4rem; background-image: url(../images/search_empty.png); background-size: 1.64rem 1.64rem; background-repeat: no-repeat; background-position: center 2.35rem } section #seller .no-data p { color: #fff; text-align: center; padding-top: .74rem; color: #967bcc; font-size: .28rem } section #seller2 { display: none } section #seller2 .seller-list { padding: .3rem .22rem 0; overflow: hidden } section #seller2 .seller-list li { width: 33.33%; padding: 0 .1rem; float: left; box-sizing: border-box; margin-bottom: .3rem } section #seller2 .seller-list li .item { background: #fffb84; border-radius: .05rem .05rem .4rem .4rem; box-shadow: 0 6px 12px rgba(0,0,0,.25); position: relative } section #seller2 .seller-list li .item .rank { width: 1.01rem; height: .5rem; line-height: .5rem; text-align: center; position: absolute; left: -.13rem; top: .1rem; background-size: 100%; background-repeat: no-repeat; background-position: 50%; color: #fee75c; font-size: .24rem } section #seller2 .seller-list li .item .rank.rank0_3 { background-image: url(../images/red.png) } section #seller2 .seller-list li .item .rank.rank4_10 { background-image: url(../images/orange.png) } section #seller2 .seller-list li .item a { display: block } section #seller2 .seller-list li .item a .thum { padding: .05rem } section #seller2 .seller-list li .item a .thum img { width: 100%; height: 1.8rem } section #seller2 .seller-list li .item a .info { font-size: .22rem; color: #5817b3; padding-left: .05rem } section #seller2 .seller-list li .item a .info p { line-height: .32rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: .05rem 0 } section #seller2 .seller-list li .item .amount { height: .8rem; line-height: .8rem; text-align: center; background: linear-gradient(#ff74f0,#9d1be8); border-radius: .4rem; font-size: .32rem; color: #fee75c; box-sizing: border-box; padding: 0 .78rem 0 .18rem; position: relative } section #seller2 .seller-list li .item .amount .and-one { display: block; width: 1rem; height: .5rem; line-height: .5rem; font-size: .4rem; color: #f60d9b; position: absolute; top: -.5rem; right: 0; -webkit-animation: b 1s 1 ease-out; animation: b 1s 1 ease-out } section #seller2 .seller-list li .item .amount .vote { display: block; width: .72rem; height: .72rem; line-height: .72rem; position: absolute; right: .05rem; top: 50%; margin-top: -.36rem; text-align: center; border-radius: 50%; background: linear-gradient(#fffb84,#fee04f); box-sizing: border-box; border: 1px solid #fff; color: #f60d9b; font-size: .28rem; cursor: pointer; } section #seller2 .seller-list li .item .amount .vote.disabled { background: linear-gradient(#ebebeb,#aeaeae); color: #999; } section #seller2 .seller-list li .item .amount .vote.cannotclick { pointer-events: none } section #seller2 .loading { height: .5rem; line-height: .5rem; text-align: center; display: none } section #seller2 .loading img { width: .34rem; -webkit-animation: a .5s infinite linear; animation: a .5s infinite linear } section #seller2 .end { display: none; height: .5rem; line-height: .5rem; text-align: center; color: #fff } section #seller2 .no-data { display: none; padding-top: 4rem; background-image: url(../images/search_empty.png); background-size: 1.64rem 1.64rem; background-repeat: no-repeat; background-position: center 2.35rem } section #seller2 .no-data p { color: #fff; text-align: center; padding-top: .74rem; color: #967bcc; font-size: .28rem } .rule-wrap { position: fixed; left: 0; right: 0; top: 0; bottom: 0; padding: .8rem .5rem .38rem; background: rgba(0,0,0,.6); display: none; z-index: 3 } .rule-wrap .close-rule { line-height: 1rem; height: .8rem; display: block; padding: 0 .51rem; position: absolute; right: 0; top: 0; font-size: .28rem; color: #fff; cursor: pointer; } .rule-wrap .rule { padding: .1rem .32rem .2rem; color: #fee75c; background: linear-gradient(#6e49fa,#d125f1); box-shadow: 0 11px 35px rgba(0,0,0,.25) } .rule-wrap .rule h1 { padding-top: .2rem; font-size: .36rem; font-weight: 400 } .rule-wrap .rule h2 { margin: .12rem 0 } .rule-wrap .rule h2,.rule-wrap .rule h3 { line-height: .38rem; font-size: .28rem; font-weight: 400 } .rule-wrap .rule h3 { margin-bottom: .15rem } .tip { width: 100%; height: 100%; position: fixed; left: 0; top: 40%; text-align: center; z-index: 2; display: none; opacity: 0; transition: all 1s } .tip.show { display: block; opacity: 1 } .tip span { height: .6rem; line-height: .6rem; padding: 0 .2rem; border-radius: .3rem; background: rgba(0,0,0,.7); color: hsla(0,0%,100%,.7); display: inline-block; font-size: .24rem } @-webkit-keyframes a { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } @keyframes a { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } @-webkit-keyframes b { 0% { top: 0; opacity: 0 } 50% { top: -.75rem; opacity: 1 } to { top: -.75rem; opacity: 0 } } @keyframes b { 0% { top: 0; opacity: 0 } 50% { top: -.75rem; opacity: 1 } to { top: -.75rem; opacity: 0 } }