@charset "utf-8";

.mod-volcanoRedbagPrize .floating {
    width:18rem;
    height: 100%;
    background-color:rgba(0,0,0,0.8);
    background-size:100% auto;
    position:fixed;
    top:0;
    left:0;
    z-index:1000;
    overflow: hidden;
}

.mod-volcanoRedbagPrize .main {
    width: 1.325rem;
    position: absolute;
    left: 50%;
    margin-left:-0.6625rem;
    bottom: 10.5rem;
}

.mod-volcanoRedbagPrize .item1 {
    height: 150px;
    position: relative;
    padding: 30px;
    text-align: center;
    -webkit-transition: top 1.2s linear;
    transition: top 1.2s linear;
}

.mod-volcanoRedbagPrize .item1 .kodai {
    position: absolute;
    bottom: 0;
    cursor: pointer;
}

.mod-volcanoRedbagPrize .item1 .kodai .full {
    display: block;
}

.mod-volcanoRedbagPrize .item1 .kodai .empty {
    display: none;
}

.mod-volcanoRedbagPrize .item1 .clipped-box {
    position: absolute;
    bottom:1rem;
    left: 0rem;
    height: 540px;
    width: 12rem;
}

.mod-volcanoRedbagPrize .item1 .clipped-box i {
    position: absolute;
    top: auto;
    left: 0;
    bottom: 0;
    transition: transform 1.4s ease-in;
    -webkit-transition: -webkit-transform 1.4s ease-in;
    --moz--transition: --moz--transform 1.4s ease-in;
    z-index: 1003;
    display: block;
}

.volcanoRedbag {
    background-color: transparent !important;
    height: 15.45rem;
    display: block;
    z-index: 1003 !important;
}

.volcanoRedbag .ecWap-box-header {
    padding-top: 0;
}

.volcanoRedbag .ecWap-box-header {
    font-size: 0.75rem;
    height: 5.5rem;
    position: relative;
}

.volcanoRedbag .ecWap-box-content {
    padding: 0 0rem;
    max-height: 6.8rem;
    overflow: auto;
    width: 12rem;
    margin: 0 auto;
}

.volcanoRedbag.notPrize .ecWap-dialog-content {
    text-align: center;
    font-size: 0.8rem;
    color: #fff;
    height: 5.25rem;
    padding-top: 1.65rem;
}

.volcanoRedbag .ecWap-dialog-content {
    text-align: center;
    max-height: 5.25rem;
    font-size: 0.8rem;
    line-height: 1.75;
    overflow: hidden;
    box-sizing: border-box;
}

.volcanoRedbag .ecWap-dialog-content span {
    color: #fff;
    width: 11rem;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    padding: 0 0.5rem;
    height: 1.125rem;
    line-height: 1.5;
}

.volcanoRedbag .ecWap-dialog-content div {
    height: 4.15rem;
    overflow: auto;
    width: 11.5rem;
    margin: 0 auto;
    overflow-x: hidden;
}

.volcanoRedbag .ecWap-dialog-content div::-webkit-scrollbar {
    width: 0.15rem;
    height: 1px
}

.volcanoRedbag .ecWap-dialog-content div::-webkit-scrollbar-track {
    background: #f21818;
    border-radius: 5px
}

.volcanoRedbag .ecWap-dialog-content div::-webkit-scrollbar-thumb {
    border-radius: 50px;
    background: #f5cb48;
}

.volcanoRedbag .ecWap-dialog-content em {
    font-style: normal;
    width: 11rem;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    padding: 0 0.25rem;
    height: 1.125rem;
    font-size: 0.7rem;
    color: #f2c042;
}

.volcanoRedbag .ecWap-box-footer {
    height: 4.2rem;
}

.volcanoRedbag .ecWap-box-ok {
    background-color: transparent !important;
    line-height: 1.8rem;
    font-size: 0.85rem;
    color: #333;
    height: 1.7rem;
    margin-top: 0.77rem;
    width: 8rem;
    margin: 0.77rem 3.5rem 0;
}

.mod-volcanoRedbagPrize #number {
    display: block;
    width: 4rem;
    height: 4rem;
    position: absolute;
    left: 50%;
    margin-left: -1.85rem;
    bottom: 14.65rem;
    background: url(../images/prize-volcano-redbag_mb_number.png) no-repeat center top;
    background-position: 0 -8rem;
    background-size: 100% auto;
}

.mod-volcanoRedbagPrize #number.step-1 {
    background-position: 0 -4rem;
}

.mod-volcanoRedbagPrize #number.step-2 {
    background-position: 0 0rem
}

.volcanoRedbagcoming {
    box-sizing: border-box;
    border-radius: 0.25rem;
    color: #333;
    height: 100%;
    top: 0 !important;
    left: 0 !important;
    margin-left: 0 !important;
    width: 18rem !important;
}

.volcanoRedbagcoming .ecWap-box-footer {
    display: none;
}

.volcanoRedbagcoming .ecWap-box-header {
    display: block;
}

.volcanoRedbagcoming .box-close {
    width: 1.35rem;
    height: 1.35rem;
    display: block;
    position: absolute;
    z-index: 1001;
    background: url(../images/prize-volcano-redbag_mb_close.png) no-repeat;
    background-size: 100% auto;
    right: 0.4rem;
    top: 0.4rem;
    margin-top: 0;
}

.mod-volcanoRedbagPrize .readyGo {
    width: 100%;
    height: 100%;
    position: fixed;
    top:0;
    left:0;
    z-index: 1003;
    background: url(../images/prize-volcano-redbag_mb_readygo.png) no-repeat center bottom;
    background-size: 100% auto;
}

.mod-volcanoRedbagPrize .readyGo_close {
    width: 1.35rem;
    height: 1.35rem;
    display: block;
    position: absolute;
    right: 0.4rem;
    top: 0.4rem;
    z-index: 1003;
    background: url(../images/prize-volcano-redbag_mb_close.png) no-repeat;
    background-size: 100% auto;
}

.mod-volcanoRedbagPrize .transition-layer {
    width: 100%;
    height: 100%;
    position: fixed;
    top:0;
    left:0;
    z-index: 1002;
    background-color: rgba(51, 51, 51, 0.8);
    background-size: 100% auto;
}

.mod-volcanoRedbagPrize .item1 .clipped-box i.prizeName {
    font-size: 0.8rem;
    font-weight: 600;
    background: linear-gradient(25deg, #f1d6ef 45%, #dbf6f5 70%, #f1d6ef 55%);
    -webkit-background-clip: text;
    color: transparent;
    width: 4.3rem !important;
    line-height: 1.2 !important;
    -webkit-text-stroke: 0.5px #802865;
    text-align: center;
    font-style: normal;
    z-index: 1002;
}

.mod-volcanoRedbagPrize .item1 .clipped-box i.notPrize {
    width: 3.35rem !important;
    height: 2.7rem !important;
    z-index: 1002;
}

.mod-volcanoRedbagPrize .countdownEnd {
    position: absolute;
    z-index: 1001;
    color: #fff;
    font-size: 0.75rem;
    padding: 0.2rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.7rem;
    background: rgba(0, 0, 0, 0.3);
    left: 0.75rem;
    top: 0.5rem;
}

.mod-volcanoRedbagPrize .countdownEnd span {
    color: #fbd159;
}

.mod-volcanoRedbagPrize .event-volcanoRedbag-bjcor {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #333;
    filter: alpha(opacity=40);
    opacity: 0.4;
    position: fixed;
    z-index: 1000;
}

.mod-volcanoRedbagPrize #volcanoRedbagClose {
    width: 1.35rem;
    height: 1.35rem;
    position: absolute;
    right: 0.4rem;
    top: 0.4rem;
    background: url(../images/prize-volcano-redbag_mb_close.png) no-repeat;
    background-size: 100% 100%;
    display: block;
    z-index: 1001;
}

.mod-volcanoRedbagPrize #redBagStart {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.mod-volcanoRedbagPrize .volcanoRedbag-wrp {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.dc-toast.volcanoRedbagToast {
    border-radius: 0.9rem;
    color: #191919;
    background: rgb(217, 217, 217) !important;
    font-size: 0.7rem;
    min-width: 5rem;
    max-width: 13rem;
    word-break: break-all;
    word-wrap: break-word;
    padding: 0.4rem 0.8rem;
    box-sizing: border-box;
    z-index: 1004;
}
    .bg-animation{
        width: 18rem;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1000;
        overflow: hidden;
        height: 100%;
      }
    .beam {
        height: 100%;
        width: 18rem;
        display: block;
        position: absolute;
        bottom: 11.5rem;
        background: url(../images/prize-volcano-redbag_mb_1.png) no-repeat center bottom;
        background-size: 55.55% auto;
        z-index: 1000;
        animation: beam-animation .5s 4s forwards;
        -webkit-animation: beam-animation .5s 4s forwards;
        -moz-animation: beam-animation .5s 4s forwards;
        opacity: 0;
    }
    .mountain {
        height:12.4rem;
        width: 18rem;
        display: block;
        position: absolute;
        bottom: 0;
        background: url(../images/prize-volcano-redbag_mb_2.png) no-repeat center center;
        background-size: 100% auto;
        z-index: 1000;
    }
    .cloud-before {
        height: 4.475rem;
        width: 5.55rem;
        display: block;
        position: absolute;
        bottom: 10.5rem;
        left: 6rem;
        background: url(../images/prize-volcano-redbag_mb_3.png) no-repeat center center;
        background-size: 100% auto;
        z-index: 1001;
        animation: cloud-animation 7s 3s forwards;
        -webkit-animation: cloud-animation 7s 3s forwards;
        -moz-animation: cloud-animation 7s 3s forwards;
        }
    .cloud-after {
        height: 4.075rem;
        width: 7.1625rem;
        display: block;
        position: absolute;
        bottom: 10.4rem;
        left: 5.2rem;
        background: url(../images/prize-volcano-redbag_mb_4.png) no-repeat center center;
        background-size: 100% auto;
        z-index: 999;
        animation: cloud-animation 7s 3s forwards;
        -webkit-animation: cloud-animation 7s 3s forwards;
        -moz-animation: cloud-animation 7s 3s forwards;
    }

     @keyframes cloud-animation{
      0%{
        opacity: .3
      }
      20%{
        opacity: 1;
        transform:translate3d(0, 0, 0);
      }
      40%{
        opacity: 1;
        transform:translate3d(0, .3rem, 0);
      }
      60%{
        opacity: 1;
        transform:translate3d(0, 0, 0);
      }
      80%{
        opacity: 1;
        transform:translate3d(0, .3rem, 0);
      }
      100%{
        opacity: 1;
        transform:translate3d(0, 0, 0);
      }
    }
     @keyframes cloud-animation{
      0%{
        opacity: .3
      }
      20%{
        opacity: 1;
        -webkit-transform:translate3d(0, 0, 0);
      }
      40%{
        opacity: 1;
        -webkit-transform:translate3d(0, .3rem, 0);
      }
      60%{
        opacity: 1;
        -webkit-transform:translate3d(0, 0, 0);
      }
      80%{
        opacity: 1;
        -webkit-transform:translate3d(0, .3rem, 0);
      }
      100%{
        opacity: 1;
        -webkit-transform:translate3d(0, 0, 0);
      }
    }
     @-moz-keyframes cloud-animation{
      0%{
        opacity: .3
      }
      20%{
        opacity: 1;
        -moz-transform:translate3d(0, 0, 0);
      }
      40%{
        opacity: 1;
        -moz-transform:translate3d(0, .3rem, 0);
      }
      60%{
        opacity: 1;
        -moz-transform:translate3d(0, 0, 0);
      }
      80%{
        opacity: 1;
        -moz-transform:translate3d(0, .3rem, 0);
      }
      100%{
        opacity: 1;
        -moz-transform:translate3d(0, 0, 0);
      }
    }

    .cloud-left {
        height: 3.5625rem;
        width: 8.475rem;
        display: block;
        position: absolute;
        bottom: 7.5rem;
        left: 5rem;
        background: url(../images/prize-volcano-redbag_mb_5.png) no-repeat center center;
        background-size: 100% auto;
        z-index: 999;
        animation: left-animation 20s 3s forwards;
        -webkit-animation: left-animation 20s 3s forwards;
        -moz-animation: left-animation 20s 3s forwards;
    }
    .cloud-right {
        height: 5.225rem;
        width: 8rem;
        display: block;
        position: absolute;
        bottom: 10.5rem;
        left: 5rem;
        background: url(../images/prize-volcano-redbag_mb_6.png) no-repeat;
        background-size: 100% auto;
        z-index: 998;
        animation: right-animation 20s 3s forwards;
        -webkit-animation: right-animation 20s 3s forwards;
        -moz-animation: right-animation 20s 3s forwards;
    }

    /*碌脳虏驴潞贸脩脪陆卢*/
    .bottom-magma {
        height: 10rem;
        width: 18rem;
        display: block;
        position: absolute;
        bottom: 0rem;
        background: url(../images/prize-volcano-redbag_mb_7.png) no-repeat;
        background-size: 100% auto;
        z-index: 999;
        animation: magma1-animation 2.5s 8.5s forwards;
        -webkit-animation: magma1-animation 2.5s 8.5s forwards;
        -moz-animation: magma1-animation 2.5s 8.5s forwards;
        opacity: 0;
    }
    /*碌脳虏驴脩脪陆卢*/
    .bottom-magma2 {
        width: 100%;
        height: 5.75rem;
        display: block;
        position: absolute;
        bottom: -.25rem;
        z-index: 1009;
        overflow: hidden;
    }

    .bottom-magma2:before  {
        width: 100%;
        height: 207rem;
        background: url(../images/prize-volcano-redbag_mb_8.png) left bottom;
        background-size:100% 207rem;
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
       -webkit-animation: magma-animation 1.5s 9s steps(35, end) forwards;
       -o-animation: magma-animation 1.5s 9s steps(35, end) forwards;
       -ms-animation: magma-animation 1.5s 9s steps(35, end) forwards;
       -moz-animation: magma-animation 1.5s 9s steps(35, end) forwards;
       animation: magma-animation 1.5s 9s steps(35, end) forwards;
       opacity: 0;
       filter:alpha(opacity=0);
    }
    /*碌脳虏驴脩脪陆卢*/
    @-webkit-keyframes magma-animation{
      0%{
        -webkit-transform:translate3d(0, 0, 0);
        opacity: 1;
      }
      100%{
        -webkit-transform:translate3d(0, -201.5rem, 0);
        opacity: 1;
      }
    }
    @-o-keyframes magma-animation{
      0%{
        -o-transform:translate3d(0, 0, 0);
        opacity: 1;
      }
      100%{
        -o-transform:translate3d(0, -201.5rem, 0);
        opacity: 1;
      }
    }
    @-ms-keyframes magma-animation{
      0%{
        -ms-transform:translate3d(0, 0, 0);
        opacity: 1;
      }
      100%{
        -ms-transform:translate3d(0, -201.5rem, 0);
        opacity: 1;
      }
    }
    @-moz-keyframes magma-animation{
      0%{
        -ms-transform:translate3d(0, 0, 0);
        opacity: 1;
      }
      100%{
        -ms-transform:translate3d(0, -201.5rem, 0);
        opacity: 1;
      }
    }
    @keyframes magma-animation{
      0%{
        transform:translate3d(0, 0, 0);
        opacity: 1;
      }
      100%{
        transform:translate3d(0, -201.5rem, 0);
        opacity: 1;
      }
    }
    /*禄冒脡陆驴脷脩脪陆卢*/
    .mountain-vague {
       width:11.25rem;
       height: 5.875rem;
       content: '';
       display: block;
       position: absolute;
       bottom: 7.4rem;
       left:50%;
       margin-left: -5.65rem;
       z-index: 1000;
       overflow: hidden;

    }
    .mountain-vague:before {
       width:11.25rem;
       height: 141rem;
       background: url(../images/prize-volcano-redbag_mb_10_1.png) left top no-repeat ;
       background-size:100% 141rem;
       content: '';
       display: block;
       position: absolute;
       top:0;
       left: 0;
      -webkit-animation: mountain-vague-animation 2s 5s steps(23, end) forwards;
      -moz-animation: mountain-vague-animation 2s 5s steps(23, end) forwards;
      animation: mountain-vague-animation 2s 5s steps(23, end) forwards;
      opacity: 0;
    }
     @-webkit-keyframes mountain-vague-animation{
      0%{
        -webkit-transform:translate3d(0, 0, 0);
        opacity: 1
      }
      100%{
        -webkit-transform:translate3d(0, -135.125rem, 0);
        opacity: 1
      }
    }
     @-moz-keyframes mountain-vague-animation{
      0%{
        -moz-transform:translate3d(0, 0, 0);
        opacity: 1
      }
      100%{
        -moz-transform:translate3d(0, -135.125rem, 0);
        opacity: 1
      }
    }

     @keyframes mountain-vague-animation{
      0%{
        transform:translate3d(0, 0, 0);
        opacity: 1
      }
      100%{
        -webkit-transform:translate3d(0, -135.125rem, 0);
        opacity: 1
      }
    }


    /*脫脪脩脪陆卢脕梅露炉*/
    .magma-flow {
       width:9.375rem ;
       height: 15.45rem;
       content: '';
       display: block;
       position: absolute;
       bottom: 0rem;
       left:50%;
       margin-left: -0.5rem;
       z-index: 1000;
    }
    .magma-flow:before {
       width:9.375rem ;
       height: 15.45rem;
       background-image: url(../images/prize-volcano-redbag_mb_11.png);
       background-size:100% 15.45rem;
       content: '';
       display: block;
       position: absolute;
       top:0;
       z-index: 1000;
      animation: magma-flow-animation .8s 7.5s linear forwards;
      -webkit-animation: magma-flow-animation .8s 7.5s linear forwards;
      -moz-animation: magma-flow-animation .8s 7.5s linear forwards;
      opacity: 0;
    }
    /*脫脪脩脪陆卢脕梅露炉*/
    @keyframes magma-flow-animation{
      0%{
         height: 0;
         opacity: 1
      }
      100%{
         height: 15.45rem;
         opacity: 1
      }
    }

    @-webkit-keyframes magma-flow-animation{
      0%{
         height: 0;
         opacity: 1
      }
      100%{
         height: 15.45rem;
         opacity: 1
      }
    }

    @-moz-keyframes magma-flow-animation{
      0%{
         height: 0;
         opacity: 1
      }
      100%{
         height: 15.45rem;
         opacity: 1
      }
    }


    /*禄冒脩忙路脡陆娄*/
    @keyframes flames-animation{
      0%{
      background-position:  0 0;
      }
      20%{
      background-position: 0 -611.76rem;
      }
      40%{
      background-position:  0 0;
      }
      60%{
      background-position: 0 0;
      }
      80%{
      background-position:  0 0;
      }
      100%{
      background-position: 0 0;
      }
    }

    /*脰脨录盲脰霉脳脫*/
    @keyframes beam-animation{
      0%{
        height: 0;
        opacity: 1;
      }

      100%{
        height: 100%;
        opacity: 1
      }
    }

    @-webkit-keyframes beam-animation{
      0%{
        height: 0;
        opacity: 1;
      }

      100%{
        height: 100%;
        opacity: 1
      }
    }

    @-moz-keyframes beam-animation{
      0%{
        height: 0;
        opacity: 1;
      }

      100%{
        height: 100%;
        opacity: 1
      }
    }


    /*脳贸卤脽脭脝*/
    @keyframes left-animation{
      0%{
        transform:translate3d(0, 0, 0);
      }
      7.5%{
        transform:translate3d(-4.5rem, 0, 0);
      }
      15%{
        transform:translate3d(-4.5rem, -.425rem, 0);
      }
      22.5%{
        transform:translate3d(-4.5rem, 0, 0);
      }
      30%{
        transform:translate3d(-4.5rem, -.425rem, 0);
      }
      37.5%{
        transform:translate3d(-4.5rem, 0, 0);
      }
      90%{
        transform:translate3d(-4.5rem, 0, 0);
        opacity: 1;
      }
      100%{
        transform:translate3d(-14rem, 0, 0);
        opacity: .5
      }
    }

    @-webkit-keyframes left-animation{
      0%{
        -webkit-transform:translate3d(0, 0, 0);
      }
      7.5%{
        -webkit-transform:translate3d(-4.5rem, 0, 0);
      }
      15%{
        -webkit-transform:translate3d(-4.5rem, -.425rem, 0);
      }
      22.5%{
        -webkit-transform:translate3d(-4.5rem, 0, 0);
      }
      30%{
        -webkit-transform:translate3d(-4.5rem, -.425rem, 0);
      }
      37.5%{
        -webkit-transform:translate3d(-4.5rem, 0, 0);
      }
      90%{
        -webkit-transform:translate3d(-4.5rem, 0, 0);
        opacity: 1;
      }
      100%{
        -webkit-transform:translate3d(-14rem, 0, 0);
        opacity: .5
      }
    }

    @-moz-keyframes left-animation{
      0%{
        -moz-transform:translate3d(0, 0, 0);
      }
      7.5%{
        -moz-transform:translate3d(-4.5rem, 0, 0);
      }
      15%{
        -moz-transform:translate3d(-4.5rem, -.425rem, 0);
      }
      22.5%{
        -moz-transform:translate3d(-4.5rem, 0, 0);
      }
      30%{
        -moz-transform:translate3d(-4.5rem, -.425rem, 0);
      }
      37.5%{
        -moz-transform:translate3d(-4.5rem, 0, 0);
      }
      90%{
        -moz-transform:translate3d(-4.5rem, 0, 0);
        opacity: 1;
      }
      100%{
        transform:translate3d(-14rem, 0, 0);
        opacity: .5
      }
    }

    /*脫脪卤脽脭脝*/
    @keyframes right-animation{
      0%{
        transform:translate3d(0, 0, 0);
      }
      7.5%{
        transform:translate3d(4.5rem, 0, 0);
      }
      15%{
        transform:translate3d(4.5rem, -.425rem, 0);
      }
      22.5%{
        transform:translate3d(4.5rem, 0, 0);
      }
      30%{
        transform:translate3d(4.5rem, -.425rem, 0);
      }
      37.5%{
        transform:translate3d(4.5rem, 0, 0);
      }
      90%{
        transform:translate3d(4.5rem, 0, 0);
        opacity: 1;
      }
      100%{
        transform:translate3d(13rem, 0, 0);
        opacity: .5
      }
    }

    @-webkit-keyframes right-animation{
      0%{
        -webkit-transform:translate3d(0, 0, 0);
      }
      7.5%{
        -webkit-transform:translate3d(4.5rem, 0, 0);
      }
      15%{
        -webkit-transform:translate3d(4.5rem, -.425rem, 0);
      }
      22.5%{
        -webkit-transform:translate3d(4.5rem, 0, 0);
      }
      30%{
        -webkit-transform:translate3d(4.5rem, -.425rem, 0);
      }
      37.5%{
        -webkit-transform:translate3d(4.5rem, 0, 0);
      }
      90%{
        -webkit-transform:translate3d(4.5rem, 0, 0);
        opacity: 1;
      }
      100%{
        -webkit-transform:translate3d(13rem, 0, 0);
        opacity: .5
      }
    }

    @-moz-keyframes right-animation{
      0%{
        -moz-transform:translate3d(0, 0, 0);
      }
      7.5%{
        -moz-transform:translate3d(4.5rem, 0, 0);
      }
      15%{
        -moz-transform:translate3d(4.5rem, -.425rem, 0);
      }
      22.5%{
        -moz-transform:translate3d(4.5rem, 0, 0);
      }
      30%{
        -moz-transform:translate3d(4.5rem, -.425rem, 0);
      }
      37.5%{
        -moz-transform:translate3d(4.5rem, 0, 0);
      }
      90%{
        -moz-transform:translate3d(4.5rem, 0, 0);
        opacity: 1;
      }
      100%{
        -moz-transform:translate3d(13rem, 0, 0);
        opacity: .5
      }
    }
    /*脙忙脩脪陆卢*/
    @keyframes magma1-animation{
      0%{
        transform:translate3d(0, 10rem, 0);
        opacity: 1
      }
      100%{
        transform:translate3d(0, 0, 0);
        opacity: 1
      }
    }

    @-webkit-keyframes magma1-animation{
      0%{
        -webkit-transform:translate3d(0, 10rem, 0);
        opacity: 1
      }
      100%{
        -webkit-transform:translate3d(0, 0, 0);
        opacity: 1
      }
    }

    @-moz-keyframes magma1-animation{
      0%{
        -moz-transform:translate3d(0, 10rem, 0);
        opacity: 1
      }
      100%{
        -moz-transform:translate3d(0, 0, 0);
        opacity: 1
      }
    }
    /*潞贸脙忙脟掳脩脪陆卢*/
    @keyframes magma2-animation{
      0%{
        background-position:  0 0;
      }
      100%{
        background-position: 0 -330.75rem;
      }
    }

    @-webkit-keyframes magma2-animation{
      0%{
        background-position:  0 0;
      }
      100%{
        background-position: 0 -330.75rem;
      }
    }

    @-moz-keyframes magma2-animation{
      0%{
        background-position:  0 0;
      }
      100%{
        background-position: 0 -330.75rem;
      }
    }
    /*左一*/
    .flames-left-one {
       width:18rem ;
       height: 25rem;
       content: '';
       display: block;
       position: absolute;
       bottom: 13.75rem;
       left:0;
       z-index: 998;
       overflow: hidden;

    }
    .flames-left-one:before {
       width:18rem ;
       height: 600rem;
       background: url(../images/prize-volcano-redbag_mb_18.png) left top no-repeat ;
       background-size:100% 600rem;
       content: '';
       display: block;
       position: absolute;
       top:0;
       left: 0;
     -webkit-animation: flames-animation 4s 8s infinite steps(24, end) forwards;
      animation: flames-animation 4s 8s infinite steps(24, end) forwards;
      animation: flames-animation 4s 8s infinite steps(24, end) forwards;
      opacity: 0;
    }
     @-webkit-keyframes flames-animation{
      0%{
        -webkit-transform:translate3d(0, 0, 0);
        opacity: 1
      }
      25%{
        -webkit-transform:translate3d(0, -600rem, 0);
        opacity: 1
      }
      100%{
        -webkit-transform:translate3d(0, -600rem, 0);
        opacity: 1
      }
    }
     @-moz-keyframes flames-animation{
      0%{
        -moz-transform:translate3d(0, 0, 0);
        opacity: 1
      }
      25%{
        -moz-transform:translate3d(0, -600rem, 0);
        opacity: 1
      }
      25%{
        -moz-transform:translate3d(0, -600rem, 0);
        opacity: 1
      }
    }
     @keyframes flames-animation{
      0%{
        transform:translate3d(0, 0, 0);
        opacity: 1
      }
      33.3333%{
        transform:translate3d(0, -600rem, 0);
        opacity: 1
      }
      100%{
        transform:translate3d(0, -600rem, 0);
        opacity: 1
      }
    }


    .flames-left-two{
       width:18rem ;
       height: 15rem;
       content: '';
       display: block;
       position: absolute;
       bottom: 13.75rem;
       left:0;
       z-index: 998;
       overflow: hidden;

    }
    .flames-left-two:before {
       width:18rem ;
       height: 360rem;
       background: url(../images/prize-volcano-redbag_mb_19.png)  left top no-repeat;
       background-size:100% 360rem;
       content: '';
       display: block;
       position: absolute;
       top:0;
       left: 0;
      -webkit-animation: flames2-animation 4s 10s infinite steps(24, end) forwards;
      -moz-animation: flames2-animation 4s 10s infinite steps(24, end) forwards;
      animation: flames2-animation 4s 10s infinite steps(24, end) forwards;
      opacity: 0;
    }
     @-webkit-keyframes flames2-animation{
      0%{
        -webkit-transform:translate3d(0, 0, 0);
        opacity: 1
      }
      25%{
        -webkit-transform:translate3d(0, -360rem, 0);
        opacity: 1
      }
      100%{
        -webkit-transform:translate3d(0, -360rem, 0);
        opacity: 1
      }
    }
     @-moz-keyframes flames2-animation{
      0%{
        -moz-transform:translate3d(0, 0, 0);
        opacity: 1
      }
      25%{
        -moz-transform:translate3d(0, -360rem, 0);
        opacity: 1
      }
      100%{
        -moz-transform:translate3d(0, -360rem, 0);
        opacity: 1
      }
    }
     @keyframes flames2-animation{
      0%{
        transform:translate3d(0, 0, 0);
        opacity: 1
      }
      25%{
        transform:translate3d(0, -360rem, 0);
        opacity: 1
      }
      100%{
        transform:translate3d(0, -360rem, 0);
        opacity: 1
      }
    }