h5gamePay/_src/page/yahtzee/scss/yahtzee.scss

@import "../../sass/base/mixins";

.page-yahtzee{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    background: url(../../img/yahtzee/bg_shop.png) 0 0 / cover repeat-x;
    &:before{
        content: "";
        display: block;
        width: 100%;
        height: px2rem(530);
        background: url(../../img/yahtzee/bg_role.png) 0 0 / cover repeat-x;
    }
    .box-shop-wrap{
        background: #986145;
        border: 1px solid #592913;
        border-radius: px2rem(24);
        padding: px2rem(9);
        margin: px2rem(-150) px2rem(15) 0 px2rem(15);
    }
    .box-shop{
        background: #efe2bf;
        border: 1px solid #592913;
        border-radius: px2rem(24);
        min-height: px2rem(900);
    }
    h1{
        font-size: px2rem(48);
        color: #986145;
        padding: px2rem(21) 0;
    }
    .list-gold{
        display: flex;
        flex-wrap: wrap;
        margin-left: px2rem(18);
    }
    .gold-item{
        width: px2rem(206);
        height: px2rem(287);
        margin: 0 px2rem(18) px2rem(24) 0;
        background: url(../../img/yahtzee/bg_item.png) center/100% no-repeat;
        &:hover{
            opacity: 0.8;
        }
        .item-bd{
            color: #FFFFFF;
            font-weight: 700;
            font-size: px2rem(36);
            height: px2rem(200);
            img{
                width: px2rem(90);
                height: px2rem(90);
                margin: px2rem(24) 0;
            }
        }
        .item-ft{
            display: flex;
            height: px2rem(90);
            color: #5e4542;
            font-size: px2rem(30);
            align-items: center;
            justify-content: center;
            img{
                width: px2rem(37);
                height: px2rem(27);
                margin: 0 px2rem(9);
            }
        }
    }
}