/*font-family: 'Noto Serif TC', serif;*/

/*html,body{
    background: #0000;
    width: 100%;
    height: auto;
    min-height: 100vh;
}*/

.wrapper{
    background: #000;
    width: 100%;
    margin: 0 auto;
    height: auto;
    overflow: hidden;
    position: relative;
}

.top_bar{
    background: url(../imgs/top_bar.jpg)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 8.9vw;
    overflow: hidden;
}

.offical{
    width: fit-content;
    float: right;
    margin-right: 6%;
    font-size: 3vw;
    color: #cab07e;
    font-family: 'Noto Serif TC', serif;
    line-height: 8.9vw;
    text-decoration: underline;
    position: relative;
}

.offical::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 0;
    width: 10%;
    padding-bottom: 10%;
    /* margin: -2% -14% 0 0; */
    position: absolute;
    border: 1px solid;
    border-left-width: 0;
    border-top-width: 0;
    transform: rotate(-45deg);
    top: 45%;
    right: -20%;
}

.user > p{
    margin-left: 3%;
    width: fit-content;
    float: left;
    margin-right: 1%;
    font-size: 3vw;
    color: #cab07e;
    font-family: 'Noto Serif TC', serif;
    line-height: 8.9vw;
}

.user > a{
    width: fit-content;
    float: left;
    font-size: 3vw;
    color: #cab07e;
    font-family: 'Noto Serif TC', serif;
    line-height: 8.9vw;
    text-decoration: underline;
}


.header{
    background: url(../imgs/header.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.title{
    background: url(../imgs/title.png)no-repeat;
    background-size: 100%;
    width: 96.5%;
    height: 41vw;
    margin: 66.5% auto 0;
}

.btn_login{
    background: url(../imgs/btn_login.png)no-repeat;
    background-size: 100%;
    width: 53.8%;
    height: 13vw;
    display: block;
    margin: 5% auto 0;
}

.content{
    background: url(../imgs/bg.jpg)no-repeat;
    background-size: 100%;
    width: 100%;
    height: auto;
    margin: 0 auto 0;
    overflow: hidden;
}

.act{
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 10%;
}

.ac1{
    margin-top: 20%;
}

.title_1{
    background: url(../imgs/title_1.png)no-repeat;
    background-size: 100%;
    width: 96.3%;
    height: 15vw;
    margin: 0 auto 2%;
}

.act_content{
    width: 92.4%;
    margin: 0 auto;
    font-size: 4vw;
    color: #f1e0c3;
    text-align: center;
    font-family:  'Noto Serif TC', serif;
    line-height: 7vw;
}

.act_content span{
    color: #d44e42;
    display: block;
}

.count{
    width: 100%;
    height: auto;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: baseline;
    margin: 4% auto 1%;
}

.count span{
    background: url(../imgs/deco.png)no-repeat;
    background-size: 100%;
    width: 3.8%;
    height: 4.2vw;
    display: block;
    margin-right: 1%;
}

.count p{
    font-size: 5.5vw;
    color: #f1e0c3;
    font-family:  'Noto Serif TC', serif;
}


.btn_share{
    background: url(../imgs/btn_share.png)no-repeat;
    background-size: 100%;
    width: 33.5%;
    height: 10.5vw;
    display: block;
    margin: 1% auto 6%;
}

/*===================================================================*/

.play_box{
    /*background: url(../imgs/list.png)no-repeat;
    background-size: 100%;*/
    width: 93.3%;
    height: 94vw;
    margin: 0 auto;
    position: relative;
}

.play_box li{
    width: 32.3%;
    height: 30.5vw;
    position: absolute;
}

.rw1{
    top: 0;
    left: 0;
}

.item_1_dark{
    background: url(../imgs/spin_1_dark.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 30.5vw;
}
.item_1_light{
    background: url(../imgs/spin_1_light.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 30.5vw;
}

.rw2{
    top: 0;
    left: 33.8%;
}

.item_2_dark{
    background: url(../imgs/spin_2_dark.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 30.5vw;
}
.item_2_light{
    background: url(../imgs/spin_2_light.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 30.5vw;
}

.rw3{
    top: 0;
    left: 67.6%;
}

.item_3_dark{
    background: url(../imgs/spin_3_dark.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 30.5vw;
}
.item_3_light{
    background: url(../imgs/spin_3_light.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 30.5vw;
}

.rw4{
    top: 33.8%;
    left: 67.6%;
}

.item_4_dark{
    background: url(../imgs/spin_4_dark.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 30.5vw;
}
.item_4_light{
    background: url(../imgs/spin_4_light.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 30.5vw;
}

.rw5{
    top: 67.6%;
    left: 67.6%;
}

.item_5_dark{
    background: url(../imgs/spin_8_dark.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 30.5vw;
}
.item_5_light{
    background: url(../imgs/spin_8_light.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 30.5vw;
}

.rw6{
    top: 67.6%;
    left: 33.8%;
}

.item_6_dark{
    background: url(../imgs/spin_6_dark.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 30.5vw;
}
.item_6_light{
    background: url(../imgs/spin_6_light.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 30.5vw;
}


.rw7{
    top: 67.6%;
    left: 0%;
}

.item_7_dark{
    background: url(../imgs/spin_7_dark.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 30.5vw;
}
.item_7_light{
    background: url(../imgs/spin_7_light.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 30.5vw;
}

.rw8{
    top: 33.8%;
    left: 0%;
}

.item_8_dark{
    background: url(../imgs/spin_5_dark.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 30.5vw;
}
.item_8_light{
    background: url(../imgs/spin_5_light.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 30.5vw;
}

.btn_play{
    background: url(../imgs/btn_spin.png)no-repeat;
    background-size: 100%;
    width: 33.3%;
    height: 31vw;
    position: absolute;
    display: block;
    top: 33.3%;
    left: 33.3%;
}

/*===================================================================*/

.title_2{
    background: url(../imgs/title_2.png)no-repeat;
    background-size: 100%;
    width: 94.7%;
    height: 15vw;
    margin: 0 auto 2%;
}

.box_1{
    background: url(../imgs/box_1.png)no-repeat;
    background-size: 100%;
    width: 97.3%;
    height: 58vw;
    margin: 4% auto 0;
    overflow: hidden;
}

.reward_list{
    width: 92%;
    margin: 7% 0 0 2.5%;
    height: auto;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.reward_list li{
    width: 30%;
    height: auto;
    overflow: hidden;
    text-align: center;
    margin-bottom: 3%;
}

.reward_list li img{
    width: 87%;
    height: auto;
}

.reward_list li p{
    color: #33365e;
    font-size: 3.3vw;
    text-align: center;
    font-family:  'Noto Serif TC', serif;
}

.btn_get{
    background: url(../imgs/btn_get.png)no-repeat;
    background-size: 100%;
    width: 34.4%;
    height: 11vw;
    display: block;
    margin: 0% 0 0 32%;
}

.btn_got{
    background: url(../imgs/btn_got.png)no-repeat;
    background-size: 100%;
    width: 34.4%;
    height: 11vw;
    display: block;
    margin: 0% 0 0 32%;
    cursor: default;

}

.btn_yet{
    background: url(../imgs/btn_yet.png)no-repeat;
    background-size: 100%;
    width: 34.4%;
    height: 11vw;
    display: block;
    margin: 0% 0 0 32%;
    cursor: default;

}

.btn_get_gray{
    background: url(../imgs/btn_get_g.png)no-repeat;
    background-size: 100%;
    width: 34.4%;
    height: 11vw;
    display: block;
    margin: 0% 0 0 32%;
}


.title_3{
    background: url(../imgs/title_3.png)no-repeat;
    background-size: 100%;
    width: 98.1%;
    height: 15vw;
    margin: 0 auto 2%;
}

.box_2{
    background: url(../imgs/box_2.png)no-repeat;
    background-size: 100%;
    width: 97.3%;
    height: 90vw;
    margin: 4% auto 0;
    overflow: hidden;
}

.title_4{
    background: url(../imgs/title_4.png)no-repeat;
    background-size: 100%;
    width: 90.5%;
    height: 15vw;
    margin: 0 auto 2%;
}

.box_3{
    background: url(../imgs/box_3.png)no-repeat;
    background-size: 100%;
    width: 97.3%;
    height: 70vw;
    margin: 0% auto 0;
    overflow: hidden;
}

.lv_list{
    width: 92%;
    margin: 7% 0 0 2.5%;
    height: auto;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.lv_list li{
    width: 19.1%;
    height: auto;
    overflow: hidden;
    margin: 0 1%;
}

.lv_list li a{transition: unset;}


.set{background-position: bottom !important;}

.btn_lv5{
    background: url(../imgs/btn_lv5.jpg)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 6.9vw;
    display: block;
}

.btn_lv10{
    background: url(../imgs/btn_lv10.jpg)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 6.9vw;
    display: block;
}

.btn_lv15{
    background: url(../imgs/btn_lv15.jpg)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 6.9vw;
    display: block;
}

.btn_lv20{
    background: url(../imgs/btn_lv20.jpg)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 6.9vw;
    display: block;
}

.all_reward > div > .reward_list{
    margin-top: 4%;
}

.title_5{
    background: url(../imgs/title_5.png)no-repeat;
    background-size: 100%;
    width: 53%;
    height: 15vw;
    margin: 0 auto 2%;
}

.notice {
    width: 92.5%;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
}

.notice li{
    width: 92%;
    margin-left: 8%;
    list-style-type: decimal;
    margin-bottom: 2%;
    font-size: 3.5vw;
    color: #f1e0c3;
    font-family: 'Noto Serif TC', serif;
}

.notice li span{color: #d44e42;}

.ac_last{margin-bottom: 0;}

.footer{
    background: url(../imgs/bg_footer.jpg)no-repeat;
    background-size: 100%;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.copyright{
    background: url(../imgs/copyright.png)no-repeat;
    background-size: 100%;
    width: 90.25%;
    height: 27vw;
    margin: 22% auto 3%;
}




/*-----------------------pop--------------------------------*/

.remodal-wrapper {padding: 0 !important;}
.remodal-overlay {background: rgb(15 15 20 / 90%) !important;}

.pop{
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    height: auto;
    overflow: hidden;
    transition: .3s !important;
}

.pop_bg1{
    background: url(../imgs/pop_bg2_m.png)no-repeat center;
    background-size: 100%;
    width: 100%;
    height: 75vw;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.pop_bg2{
    background: url(../imgs/pop_bg_m.png)no-repeat center;
    background-size: 100%;
    width: 100%;
    height: 105vw;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.pop_list{
    width: 92.5%;
    margin: 24% 3.75% 0;
    height: auto;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.pop_list li{
    width: 31%;
    height: auto;
    text-align: center;
    margin-bottom: 4%;
}

.pop_list li img{
    width: 95.6%;
    height: auto;
    margin-left: -14.5%;
}

.pop_list li p{
    font-size: 3.5vw;
    color: white;
    text-shadow: 0px 0px 0.3em #000;
    margin-top: -18%;
}

.btn_close{
    background: url(../imgs/btn_close.png)no-repeat;
    background-size: 100%;
    width: 12.5%;
    height: 12.5vw;
    display: block;
    position: absolute;
    right: 2%;
    top: 0;
}

/*===================================================================*/

.test{position: fixed;z-index: 10;bottom: 0;}
.test li a{color: white;text-decoration: underline;font-size: 3.5vw;}