@import "../../../sass/base/mixins"; .lottery-wrap { background: url(./../../img/act/lottery/bg-lottery-wrap.png) center top no-repeat; background-size: auto px2rem(125); padding-top: px2rem(16); .tip-lottery{ color: #7a3800; font-size: px2rem(30); display: flex; justify-content: space-between; align-items: center; padding: 0 px2rem(66); height: px2rem(64); em{ color: #fff45c; } .btn-award{ display: block; width: px2rem(190); text-align: center; line-height: px2rem(64); color: #FFFFFF; border-radius: px2rem(5); @include gradient(#fe2c2c,#be1f1f); } } .lottery-cot { width: px2rem(726); height: px2rem(729); padding: px2rem(84) 0 0 px2rem(96); background: url(./../../img/act/lottery/bg-lottery.png) no-repeat center; background-size: 100% auto; @include clearfix; margin: 0 auto; } .lottery-item { float: left; display: flex; align-items: center; text-align: center; font-size: px2rem(36); line-height: px2rem(50); color: #000000; width: px2rem(175); height: px2rem(175); vertical-align: top; margin: 0 px2rem(5) px2rem(5) 0; background: url(./../../img/act/lottery/bg-lot-item.png) no-repeat; background-size: 100%; &.active{ background: url(./../../img/act/lottery/bg-lot-item2.png) no-repeat; background-size: 100%; } &:nth-child(3n) { margin-right: 0; } p{ flex: 1; } &.btn-lottery { border: none; background: url(./../../img/act/lottery/btn-lottery.png) no-repeat; background-size: 100% 100%; &.clicked { background: url(./../../img/act/lottery/btn-lottery2.png) no-repeat; background-size: 100% 100%; } &.disabled { background: url(./../../img/act/lottery/btn-lottery3.png) no-repeat; background-size: 100% 100%; } } } } .dialog-wzry-lotmsg{ font-size: px2rem(30); color: #171717; p{ line-height: px2rem(42); } .list-process{ margin: 0 0 px2rem(30) 0; li{ display: flex; font-size: px2rem(28); line-height: px2rem(40); } label{ display: block; width: px2rem(140); text-align: right; } p{ text-align: left; flex: 1; color: #666666; line-height: px2rem(40); } } }