body,
html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
body {
    overflow: hidden;

    background-color: transparent;
    background-color: black;
    overflow: hidden;
}
#game-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    overflow: hidden;
}

#webgl-container,
.webgl-container {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}
// 挤奶
#milkink {
    position: absolute;
    width: 112.5px; // 75px;
    height: 183px; // 122px;
    left: 57%;
    margin-left: -37px; // 225 / 2 再向右偏移对准
    bottom: 15px;
    background: url(/threejs/static/img/canvas_milk_out.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    opacity: 1;
    &.hide {
        opacity: 0;
    }
}
// 奶瓶
.milkbox {
    position: absolute;
    // right: 31%;
    // bottom: -160px;
    // display: none;
    width: 225px; // 750 * 366 / 1220
    height: 366px;
    bottom: -366px;
    left: 50%;
    margin-left: -95px; // 225 / 2 再向右偏移对准
    // background: url(/threejs/static/img/canvas_milk1.png);
    background-size: auto 100%;
    overflow: hidden;
    background-repeat: no-repeat;
    opacity: 1;
    &.hide {
        opacity: 0;
    }
}
#milkbox1 {
    background-image: url(/threejs/static/img/canvas_milk1.png);
}
#milkbox2 {
    background-image: url(/threejs/static/img/canvas_milk2.png);
}
#milkbox3 {
    background-image: url(/threejs/static/img/canvas_milk3.png);
}

#cow-naz {
    position: absolute;
    right: 31%;
    bottom: 196px;
    width: 30%;
    height: 200px;
    display: none;
    cursor: pointer;
    // background-color: gray;
}

// 经典
#milk {
    position: absolute;
    right: 25%;
    bottom: -100%;

    width: 100%;
    height: 504px;

    background: url(/threejs/static/img/box.png);
    background-size: cover;
    
    &.scale {
        transform: scale(1.15, 1.15) translate(-26px, -10px);
        transition: 1s all linear;
    }
}

#fly {
    position: absolute;
    top: 10px;
    right: 25%;

    width: 100%;
    height: 504px;

    background: url(/threejs/static/img/fly.png);
    background-size: cover;
}


#loading {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#product-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;


    .product {
        position: absolute;
        left: 50%;
        transform: translate(-50%,0);
        width: 120%;
        height: 100%;
        background-image: url('/threejs/static/img/product/产品页-伊利-产品.png');
        background-size: 100% auto;
        background-repeat: no-repeat;
    }
    .case-open {
        display: none;
        position: absolute;
        left: 50%;
        background-image: url('/threejs/static/img/product/产品页-宝箱打开序列.png');
        background-position: 0 0;
        background-size: auto 100%;
        background-repeat: no-repeat;
    }
    .case-shake {
        position: absolute;
        left: 50%;
        background-image: url('/threejs/static/img/product/产品页-宝箱抖动序列.png');
        background-position: 0 0;
        background-size: auto 100%;
        background-repeat: no-repeat;
    }
    .buy-btn {
        position: absolute;
        left: 50%;
        background-position: 0 0;
        background-size: auto 100%;
        background-image: url('/threejs/static/img/product/购买按钮.png');
        background-repeat: no-repeat;
    }
}