#goldEgg-operation{margin:6vw 10vw;width:80%;z-index:1;position:inherit;left:0;top:0}
#goldEgg-time{margin-bottom:3vw;margin-top:0}
.game-content{position:relative;margin-bottom:4.5vw}
#goldEgg-operation p{box-shadow:0 0 10px rgb(255 255 255 / 50%) !important;-webkit-box-shadow:0 0 10px rgb(255 255 255 / 50%) !important}
#goldEgg-notify{margin-top:0;margin-bottom:4.5vw}
#goldEgg-explain{margin-top:0}
ul li{padding:0;margin:0;list-style:none}

.main {
    width: 100%;
    position: relative;
}
.main h2{margin:0.2rem auto 0;width:4rem;height:0.69333333rem;background-color:#fee405;text-align:center;line-height:0.69333333rem;font-size:0.26666667rem;font-weight:normal;color:#bc5700;border-radius:0.34666667rem}
.box{width:100%;position:relative}

.box li {
    position: absolute;
    left: 54.33332vw;
    top: 62.33332vw;
    width: 22.66666vw;
    height: 26.66666vw;
    -o-transition: .3s;
    -ms-transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    transition: .3s;
    /*border: 0.1rem solid #8f8976;*/
    /*border-radius: 5px;*/
    /*box-shadow: 0 0 0.2rem 0.01rem #e0aa95;*/
    /*box-sizing: border-box;*/
    /*background: #8719b8;*/
    display: flex;
    justify-content: center;
    align-items: center
}
.box li p{width:100%;height:100%;background:#ddd;display:none;justify-content:center;align-items:center;-o-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);padding:0.5rem;box-sizing:border-box;border-radius:2px}
.box li.card-active p{background:#fff !important}
.box li.active{border:0.1rem solid #fade7a;-o-animation:shaking 0.5s ease-in-out;-ms-animation:shaking 0.5s ease-in-out;-moz-animation:shaking 0.5s ease-in-out;-webkit-animation:shaking 0.5s ease-in-out;animation:shaking 0.5s ease-in-out}
.box li.active-v2{-o-animation:shaking-v2 1s ease-in-out;-ms-animation:shaking-v2 1s ease-in-out;-moz-animation:shaking-v2 1s ease-in-out;-webkit-animation:shaking-v2 1s ease-in-out;animation:shaking-v2 1s ease-in-out;animation-fill-mode:forwards}
.box li.card-active{border-color:#fade7a}
@keyframes shaking{0%,100%{-o-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}
33%{-o-transform:rotateY(-20deg);-ms-transform:rotateY(-20deg);-moz-transform:rotateY(-20deg);-webkit-transform:rotateY(-20deg);transform:rotateY(-20deg)}
66%{-o-transform:rotateY(20deg);-ms-transform:rotateY(20deg);-moz-transform:rotateY(20deg);-webkit-transform:rotateY(20deg);transform:rotateY(20deg)}
}@keyframes shaking-v2{0%{-o-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}
100%{-o-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
}.box li.open-card{position:absolute;left:3.64rem !important;z-index:12;-o-transform:scale(1.5);-ms-transform:scale(1.5);-moz-transform:scale(1.5);-webkit-transform:scale(1.5);transform:scale(1.5);-o-animation:openCard .5s .5s linear forwards;-ms-animation:openCard .5s .5s linear forwards;-moz-animation:openCard .5s .5s linear forwards;-webkit-animation:openCard .5s .5s linear forwards;animation:openCard .5s .5s linear forwards;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@keyframes openCard{10%,30%,50%{-o-transform:scale(1.5) translateX(-10px);-ms-transform:scale(1.5) translateX(-10px);-moz-transform:scale(1.5) translateX(-10px);-webkit-transform:scale(1.5) translateX(-10px);transform:scale(1.5) translateX(-10px)}
20%,40%,60%{-o-transform:scale(1.5) translateX(10px);-ms-transform:scale(1.5) translateX(10px);-moz-transform:scale(1.5) translateX(10px);-webkit-transform:scale(1.5) translateX(10px);transform:scale(1.5) translateX(10px)}
100%{-o-transform:scale(1.5) translateX(90deg);-ms-transform:scale(1.5) translateX(90deg);-moz-transform:scale(1.5) translateX(90deg);-webkit-transform:scale(1.5) translateX(90deg);transform:scale(1.5) rotateY(90deg)}
}

.box li > img {
    display: block;
    width: 100%;
}
.box li p img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}
#mask-card{display:none;position:fixed;left:0;top:0;z-index:4;width:100%;height:100%;background-color:rgba(0,0,0,0.7);transform:none}
.awards{position:static;margin:0.4rem auto;width:8.4rem;height:1.93333333rem;background-color:#cb59fe;box-shadow:0 0.26666667rem 0.26666667rem rgba(135,25,187,0.7) inset;border-radius:0.21333333rem}
#hand-tips{position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);width:100%;height:100%;z-index:10;display:none}
#hand-tips img{display:block;width:100%;margin:auto}
#goldEgg-explain-wrapper p{font-size:initial}
.bg-wrapper{
    width: 90vw;
    margin-left: 5vw;
}
.game-wrapper{
    position: absolute;
    width: 80vw;
    height: 92vw;
    left: 10vw;
    top: 30vw;
}

.box li.cardShake {
    -webkit-animation: cardShake .6s linear .2s 2;
    animation: cardShake .6s linear .2s 2
}

@-webkit-keyframes cardShake {
    14.3% {
        -webkit-transform: rotate(15deg) scale(1.1);
        transform: rotate(15deg) scale(1.1)
    }
    28.6% {
        -webkit-transform: rotate(-15deg) scale(1.1);
        transform: rotate(-15deg) scale(1.1)
    }
    38.12% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1)
    }
}

@keyframes cardShake {
    14.3% {
        -webkit-transform: rotate(15deg) scale(1.1);
        transform: rotate(15deg) scale(1.1)
    }
    28.6% {
        -webkit-transform: rotate(-15deg) scale(1.1);
        transform: rotate(-15deg) scale(1.1)
    }
    38.12% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1)
    }
}