@font-face {
    font-family: 'SpookyWitchy';
    src: url(/fonts/SpookyWitchy-Regular-2.otf);

}@font-face {
    font-family: 'inter-ui';
    src: url(/fonts/Inter-UI-Black.woff);
}
@font-face {
    font-family: 'poetsenOne';
    src: url(/fonts/LANG_EN.TTF);
}
@font-face {
    font-family: 'GROBOLDDYNAMIC';
    src: url(/fonts/GROBOLDDYNAMIC.TTF);
}
#sounds{
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    width: 7%;
    height: 3%;
    top: 1.5%;
    left: 91%;}
#sounds.sounds-off{
    background-image: url('/ChristmasShoppingDev/images/sounds-off.png');
}
#sounds.sounds-on{
    background-image: url('/ChristmasShoppingDev/images/sounds-on.png');
}

body{
    margin: 0;
    padding: 0;
    font-family: GROBOLDDYNAMIC;
}

.white{
    color: white;
}

.font-set{
    font-family: GROBOLDDYNAMIC;
}
.img-bg{
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#count-down-wrap{
    width: max-content;
    margin: auto;
    text-align: center;
    color: #fd7009;
}

#winning-records:before{
    display: block;
    overflow: hidden;
}
.quest{
    position: absolute;
}
.records-item{
    width: 14%;
    margin-left: 2%;
}

.noscroll{
    /*height: 100% !important;*/
    overflow: hidden!important;
}






/* task */
#task-wrap {position: relative;margin: auto;margin-top: 11%;height: 14%;width: 96%;position: relative}
.left-point{color: #863600}
.point-text{color: #863600}

.info-item{width: 54%;position: absolute;left: 38.5%;height: 6.8%}
#info-1{top: 34.5%;}
#info-2{top: 42%;}
#info-3{top: 49.2%;}
#info-4{top: 56.6%;}
#info-5{top: 63.9%;}
#info-6{top: 71.2%;}
#info-7{top: 78.5%;}
#info-8{top: 85.7%;}

.task_point{ position: absolute;width: 16%;height: 43%;bottom: 0;left: 0;font-size: 10.4167px;text-align: center;color: white;}
.task_limit{left: 23%;position: absolute; top:30%;}
.task_claim_btn{position: absolute;width: 30%;height: 43%;top: 25%;right:2%;display:block; }
.task_go{    position: absolute;width: 20%;height: 43%;top: 25%;right: 34%;}
.task_share{    position: absolute;width: 30%;height: 43%;top: 25%;right: 34%;}

.store-item{width: 82%;margin: auto;height: 27%;margin-top: 2%}

#video-content{position: absolute;left: 1.8%;top: 2%;border-radius: 4px;width: 96.7%;height: 94%;}

.text-white{color: white}
.text-shadow{
    text-shadow:
            -1px -1px 1px #5f5f5f,
            1px -1px 1px #5f5f5f,
            -1px  1px 1px #5f5f5f,
            1px  1px 1px #5f5f5f;
}

/* invite */
#invite-wrap{position: relative;margin: auto;margin-top: 33%;height: 10.5%;width: 96%;}
.invite_stage{width: 2.7%;height: 1.9%;position: absolute;}
.row-0{top: 49.4%;z-index: 99}
.row-1{top: 72.2%;z-index: 99}
.col-0{left: 14.4%;}
.col-1{left: 31.7%;}
.col-2{left: 48.9%;}
.col-3{left: 66.2%;}
.col-4{left: 83.5%;}

.invite-claim-btn{width: 13%;height: 3.7%;position: absolute;}
.claim-row-0{top: 64.5%;}
.claim-row-1{top: 87.5%;}
.claim-col-0{left: 8.5%;}
.claim-col-1{left: 25.5%;}
.claim-col-2{left: 43%;}
.claim-col-3{left: 60.3%;}
.claim-col-4{left: 77.5%;}

.progress-row-0{top: 48%;}
.progress-row-1{top: 70.9%;height: 0.6%}
.progress-col-0{left: 9.4%;width: 6.7%;border-radius: 6px;}
.progress-col-1{left: 16.5%;width: 16%}
.progress-col-2{left: 34.1%;width: 16%}
.progress-col-3{left: 51.1%;width: 16%}
.progress-col-4{left: 68.8%;width: 16%}
.progress-col-5{left: 86.2%;width: 4.9%}


/*<!--social-task-->*/
#social-task-wrap{position: relative;margin: auto;margin-top: 17%;height: 6.5%;width: 94%;}
#social-task-wrap>.left-point{width: 11.3%;top: 35.6%;left: 34%;position: absolute;text-align: center;}
.social-info-item{position: absolute;width: 43%;height: 17%;}
.layer-1{top: 47%;}
.layer-2{top: 67%;}
.layer-3{top: 64%;}
.side0{left: 9.5%;}
.side1{left: 50%;}
.social-reward{position: absolute;width: 29%;height: 35%;top: 68%;left: 6%;}
.social-claim{position: absolute;width: 37%;height: 36%;top: 56%;left: 48.8%;}
.social-follow{position: absolute;width: 40%;height: 36%;top: 17%;left: 49%;}

/*<!--wheel-->*/
.pinata_item{width: 24%;height:25%;position: absolute;}
.pinata_show{position: relative;padding: 7%}
.pinata_row_0{top:29%;}
.pinata_row_1{top:57%;}
.pinata_col_0{left:13%;}
.pinata_col_1{left:37.5%;}
.pinata_col_2{left:62%;}
.pinata_select_btn{padding: 10%}
.pinata_selected{
    text-shadow:
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012,
            0 0 1px #fd7012;
}
.pinata_spins_num{width: 86%;display: block;text-align: center;color:white;position: absolute;bottom: 10%;}


/*<!--store-->*/
 #store{width: 95%;margin: auto;height: 6.2%;position: relative;margin-top: 13.8%;}
#store>.left-point{top:15%;left: 33.5%;position: absolute;width: 11.3%;text-align: center;}
.reward-item{position: absolute; width: 43%; height: 22%;
    text-shadow:
            -1px -1px 1px #5f5f5f,
            1px -1px 1px #5f5f5f,
            -1px  1px 1px #5f5f5f,
            1px  1px 1px #5f5f5f; }
.store-row-0{top: 24.5%;}
.store-row-1{top: 42.8%;}
.store-row-2{top: 61.5%;}
.store-row-3{top: 74%;}
.store-col-0{left: 5%}
.store-col-1{left: 50.4%}
.redeemed-times{color: white;position: absolute;top: 8%;text-align: center;width: 23%;left: 37%;}
.redeemed-num{color: white;position: absolute;top: 52.8%;text-align: center;width: 23%;left: 36%;}
.redeemed-point{color: white;position: absolute;top: 47.8%;text-align: center;width: 28%;left: -1%;}
.redeemed-point-discount{color: white;position: absolute;top: 47.8%;text-align: center;width: 28%;left: -1%;}
.redeemed-btn{ position: absolute;width: 37%;height: 39%;left: 61%;top: 26%;}

/*<!--discount store-->*/
#black_five_store{width: 95%;margin: auto;height: 6.2%;position: relative;margin-top: 17.8%;}
#black_five_store>.left-point{top:15%;left: 34.5%;position: absolute;width: 11.3%;text-align: center;}
.redeemed-point>span{position: relative;}
.redeemed-point-discount{color: white;position: absolute;top: 69.8%;text-align: center;width: 28%;left: -1%;}
.redeemed-point-discount>span{width:max-content;padding: 0 15%;background-color: red;min-width: 100%;border-radius: 3px;}
.delete_line{position: absolute;top: 0%;left: -15%;width: 130%;height: 100%;}
#black_five_lock {z-index: 100;width: 103%;height: 116.5%;top: -18%;left: -1.5%;position: relative;}

/*<!--rank-->*/
 #rank_list_wrap{width: 99%;margin: auto;height: 11.6%;position: relative;margin-top: -1%; }
.rank-name{position: absolute;width: 37%;text-align: left; left: 14%;overflow-x: hidden;white-space: nowrap;text-overflow: ellipsis;}
.rank-num{position: absolute;left: 67%;}
.rank-item{position: absolute;width: 62%;height: 4%;left:23%;display: flex;justify-content: center;align-items: center;}
.rank-item-0{top: 34.9%;}
.rank-item-1{top: 40.3%;}
.rank-item-2{top: 45.8%;}
.rank-item-3{top: 51.2%;}
.rank-item-4{top: 56.5%;}
.rank-item-5{top: 61.9%;}
.rank-item-6{top: 67.3%;}
.rank-item-7{top: 72.5%;}
.rank-item-8{top: 78%;}
.rank-item-9{top: 83.3%;}
.rank-avatar-img{width:100%;top: 18%;position: absolute;}
#rank-current-user{position:absolute;width: 92%;top: 86.5%;height: 9%;left: 4%;}

/*<!--rewarded-->*/
#rewarded_container{width: 97%;margin: auto;height:5.5%;position: relative;margin-top: 6%;}
#rewarded-wrap{width: 82%;left: 9%;height: 23%;text-align: center;display: flex;justify-content: center;position: absolute;top: 60%;}
.rewarded-name{position: absolute;width: 54%;text-align: center;left: 10%;}
.rewarded-num{ position: absolute;left: 0;top: 48%;width: 100%;text-align: center;}
.rewarded-item{ width: 17%;position: relative}
.rewarded-item-img{width: 86%;margin: auto}
.rewarded-item-0{top: 32%;left: 22%;}
.rewarded-item-1{top: 32%;left: 44%;}
.rewarded-item-2{top: 32%;left: 66.6%;}
.rewarded-item-3{top: 64.6%;left: 10%;}
.rewarded-item-4{top: 64.6%;left: 32.7%;}
.rewarded-item-5{top: 64.6%;left: 55.7%;}
.rewarded-item-6{top: 64.6%;left: 78%;}