/*盘面主体 2025-3-4 调整手机端太大的问题*/
/*#game{*/
/*    transform: scale(0.85);*/
/*}*/
/*#xzguangxiao{transform: scale(0.85);}*/



/*牌面*/
#panmian{width: 9rem;height: 12rem;position: relative;z-index: 2;margin: 1rem auto}
.card_item {width:3rem;height: 4rem;position: absolute; transition: all 1s ease;
    -moz-transition:all 1s ease;
    -webkit-transition:all 1s ease;
    -o-transition:all 1s ease;}
.card_item_0 {top:0;left: 0}
.card_item_1 {top:0;left: 3rem}
.card_item_2 {top:0;left: 6rem}
.card_item_3 {top:4rem;left: 0rem}
.card_item_4 {top:4rem;left: 6rem}
.card_item_5 {top:8rem;left: 0rem}
.card_item_6 {top:8rem;left: 3rem}
.card_item_7 {top:8rem;left: 6rem}
/*定义 3D 元素距视图的距离*/
.card {

    -webkit-perspective: 150rem;
    perspective: 150rem;
    -moz-perspective: 150rem;
    position: relative;
    width: 100%;height: 100%;
    overflow: hidden;


}

.card__side {
    text-align: center;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
    -webkit-box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
}
.card__side>img{width: 95%}
.card__side .prize{position: absolute;left: 0;right: 0;margin: 0 auto;top:0;text-align: center;height: 100%;}
.card__side .prize li{width: 100%;height: 100%;overflow: hidden}
.card__side .prize li img{width: 2rem;min-height: 2rem;margin: 0.4rem 0.4rem 0.2rem 0.4rem;filter: drop-shadow(1px 2px 3px #3723a1);}
.card__side .prize li p{color: #fcff0c;width: 80%;
    margin: 0 auto;
    display: block;font-size: 13px;
    /*max-height: 32px;*/
    /*line-height: 16px;*/
    overflow: hidden;
    }
/*翻转 到反面*/
.card_fanmian

{
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
/*翻转 到正面  */
.card_zhengmian {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    cursor: pointer;

}

/*最中奖的牌*/
.chongzhi_but {
    width:3rem;height: 4rem;
    position: absolute;
    top:4rem;left: 3rem;    z-index: 100;
    text-align: center;
    overflow: hidden;
}
.chongzhi_but img{width: 95%}

.chongzhi_but p{position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: #fff;
    margin: auto auto;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;cursor: pointer;
}




#gonggao{
width: 9.5rem;
height: 2rem;
background-image: url(/index/zhuanpan/s1/images/gonggao.png);
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 4.55rem;
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: 1;
}
/*.danmu1{left: 1.3rem;right: 0;width: 5rem;margin: 0 auto;}*/
.danmu1 span{font-size: 0.35rem!important;height: auto!important;}
.danmu1 img{width: 0.9rem!important;height: 0.9rem!important}
.danmu1 .danmu-1{height: auto!important;}
#my{max-width: 2.5rem!important;max-height: 2.5rem!important;width: 2.5rem;height: 2.5rem;}

#xzguangxiao{opacity: 0.5;
    z-index:0
}
#main{height: 100vh;overflow: hidden;
position: relative;}
#title{width: 8rem}
@media (min-width: 767px) {
    body{position: relative;background-size: 100% 100%;overflow: hidden;}
    #app{height: 100vh!important;margin: 0 auto;overflow-x: visible;}
    #title{height: 3rem;top: 2rem!important;display: none!important;}
    #main{background-size: 100% 100%!important}
    /*#guize{top: auto!important;bottom: 0px!important;width: 150px;height: auto;} background-image: url(/index/common/images/pc3.png)!important;*/
    #guize{display: none}


    .prize-msg iframe{height: 520px}
    .my{height: 85%!important;}
    #game{
       margin:0 auto!important;
        height: 100vh;
        display: flex;
        align-items: center;
        transform: scale(0.8);


    }

    #gonggao{display: none!important;}
    .danmu1 {display: none!important;}

    #my{
        top: auto!important;left: auto!important;right: 50px!important;bottom: 0px!important;width: 150px;height: auto;
        /*top: 0!important;*/
        /*right: 0 !important;*/
        /*left: auto!important;*/
    }

    #app .form-popuo #form {
       max-width: 100%!important;

    }

    #canyu{
        /*display: none!important;*/
        top: 14.3rem!important;
        font-size: 0.4rem!important;
        left: 0rem!important;
    }
    .message{max-width: 500px!important}

    #xialuo >div {
        width: 80px!important;
        height: 80px!important;;
    }
    #xialuo >div>img{
        width: 80px!important;
        height: 80px!important;;
    }

    #xzguangxiao{top:calc((100vh - 16rem)/2)!important;left:0!important;transform: scale(0.8);}
}