*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    user-select: none;
}
body,html{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #DC2716;
    overflow: hidden;
}
.music_control {
    position: fixed;
    width: 25px;
    height: 25px;
    right: 20px;
    top: 23px;
    z-index: 2000;
}
.music_control.play {
    animation: play 2s linear infinite;
    -webkit-animation: play 2s linear infinite;
}
.music_control i {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAdVBMVEUAAACTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5PmwCwXAAAAJnRSTlMA+QkE2Q/vbS3Hr6leQ/eDt497T+ji0IygmXYwKTQWOGi/IPGyWU3wQSgAAAH7SURBVEjH1VbZdqMwDLXAGDD7GraEJNPq/z9xpsEgt1YzD3noqV4IhGst90pC/JD55ynpFSCoPpnO/v8By6lFiIc6TMN6iAHb0/IcEGlUY+Yd9142KtTR94Cggi407xMq7KAKBG+zhOIzYLw+QAXImUU0ufwawS018cq8YRAplo77Nt1DLjF1fWDiO7nhdFQ+wa9+5rx0GVhRE1tlPn8+T8qAizW/fPtKBVztT4iFxRlUwr4rBGNviMo6ubDP1Z3HQSQijhapHaW2YMjqE/CfrfQgxOWIWbFOlm69IfY+uVGn/bR25OVQCnEFO4KxNfgzZiyk/qhQlv+hQmd43n5M4LGQ4bqRU1FkYOSQxIK1eHNeWnzGyXbtBx5iIsqsbIZ+u6qaRVyUiSbXlJ55BiELyfZ45Y2Yge2KKQu5DnsCsSXUp16qafeSWF6e5lI2hum8tnJ5WrFu2RstcirG8+KBbxTYC4cXnv1Z7gp8d9nnNfauTeFi4WqMV3JRmL6aHSW7/XJp0uYuknT7rxZ2v7BduZb4YW9yfdxpwXWl3ft+gbsFD48B2/v2hKkOROtmBxEzxyI8jLRIc4ybljVBKD16hZvJlElMRaSZzE3+CAxC04k0+fn9kvWIqDTJwdkvzBa73O+CjNli/K4ko135wkZ+Ye+/8HXBfcP8HvsLtJgo29OI8HYAAAAASUVORK5CYII=) 0 0 no-repeat;
    background-size: 100% auto;
    -webkit-background-size: 100% auto;
    display: block;
    width: 100%;
    height: 100%;
}
.music_control_stop i {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAWlBMVEUAAACTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OqY9HQAAAAHXRSTlMAEPDAgEDPYJ+PMCGv31Bw+Aa52uriRhwMrDqdcX6nWXgAAAIsSURBVEjH1VXZdqswEMPjHS+QpElX/f9v3hBiexy4bd56qodAbGskjxEMv4VgvUwASEaln1gvJgNIpbTWVsUEcuMPBEXkMlecEuR3UpZICU5YfrSEE/+TiDj2c0reLploX2g0NM+9celrMbvHIBO+cOpkki93focjyFxXv+OdD0K2bW45xoiFeMLEhEHtj8fDfjyN66p5/qiDGbx0pM60rsUtznVGAZJbd52tNuVwPNRbgJ1r5tYsWnPfDFTpMYDE3EjJRLhkIFzuDVugmP1WeeybkfHyeuNCRwDsdFMt7dND+yAPt6JXOsG0iYmqL99TDhJ+WWAWBwTbPBc7otxUvL4snfJx3UBizlTZ1ebZvoDCINd5x2Ri5A57KJi3lO/NiSwN/NrjcMRn8UvEMlgpW4gzUE+UnUyjbPExY3yGwnEseTPmWUo83fMG17afygOySzFfa94y7KZjI8IeBXrNm6Pt+2PYfX0EiFveBClWxhbXXdz4Tj9xVCwxufqxLNXM9pq3meXS1d6JzpmYopReO3ezN+PC0j81dmLVCWhxtOmatzrF3IQqIwwKdMtbEVE8h4UfUTG2vLFFzGW8yzV0ebtCP5xFxrQOV7g+b0OguMmU7ShG9HkTxnBbLK+maIg+b87QOGzgFm9CSUD68JC3dOYMrh/FsIuJuCuOTLT7fStt3oPwSPahnnYwevgGwYGcDaWE9gmGK+8r2QhALiDA+HF4CmNWCyYthr+Ef+P8IxDAxBnFAAAAAElFTkSuQmCC") 0 0 no-repeat;
    background-size: 100% auto;
    -webkit-background-size: 100% auto;
}

.act_start {
    width: 100%;
    height: 100%;
    background-image: url(../images/top.png), url(../images/left.png), url(../images/slogan.png), url(../images/heart.png), url(../images/pop.gif), url(../images/bucket.png);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 100% auto, 45px auto,7rem auto, 6rem auto, 90% auto, 12rem auto;
    background-position: 0 top, left 70%, 0 36px, calc(100vw - 6rem + 12px) 32px, center 36%, center 96%;
}
.act_reward{
    width: 100%;
    height: 100%;
    background-image: url(../images/top.png), url(../images/left.png), url(../images/slogan.png), url(../images/heart.png), url(../images/dice.png), url(../images/time.png), url(../images/bottom.png);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 100% auto, 45px auto, 7rem auto, 6rem auto, 60px auto, 100% auto, 100% auto;
    background-position: 0 top, left 70%, 0 36px, calc(100vw - 6rem + 12px) 32px, left 50%, left calc(100% - 80px), left bottom;
    display: none;
}
#receive{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
}
#receive img{
    height: auto;
    position: absolute;
}
#receive .txt_pop{
    width: 100%;
    max-width: 375px;
    top: 5%;
}
#receive .dice{
    width: 78%;
    bottom: 6rem;
}
#receive .click_btn{
    width: 100%;
    bottom: 1rem;
    animation: scale .9s infinite ease-in-out;
}
#receive .click_btn.hasGet{
    width: 80%;
    display: none;
}
#receive .thanks{
    width: 100px;
    right: 33px;
    bottom: 4rem;
}
#receive .bottom{
    width: 100%;
    bottom: 0;
    left: 0;
}
#toast_container{
    height: 500px;
    position: absolute;
    top: 5rem;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
#toast_container img{
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
}
#toast_container .toast_bg{
    width: 90%;
    top: 1rem;
    left: calc((100vw - 90%) / 2);
}
#toast_container .reward{
    width: 11rem;
    left: calc((100vw - 11rem) / 2);
    top: 3.6rem;
}
#toast_container .close{
    top: 13.5rem;
}
#toast_container .operate{
    width: 14rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: calc((100% - 14rem) / 2);
    top: 15rem;
    padding: 0 32px 0 34px;
}
#toast_container .operate img{
    width: 5rem;
    height: auto;
    position: relative;
}

/* @media */
@media only screen and (max-height: 590px) and (orientation: portrait){
    #receive .txt_pop {
        width: 88%;
        max-width: calc(375px * 0.88);
        top: 2%;
    }
    #receive .dice {
        bottom: 5.6rem;
    }
    #receive .click_btn{
        width: 80%;
        bottom: 1.25rem;
    }
    #receive .click_btn.hasGet{
        width: 70%;
    }
    #receive .thanks {
        width: 90px;
        right: 40px;
        bottom: 3.5rem;
    }
    .act_start{
        background-size: 100% auto, 45px auto,6rem auto, 5rem auto, 90% auto, 10.5rem auto;
        background-position: 0 top, left 70%, 0 36px, calc(100vw - 5rem + 12px) 32px, center 36%, center 96%;
    }
    .act_reward {
        background-size: 100% auto, 45px auto, 6rem auto, 5rem auto, 60px auto, 100% auto, 100% auto;
        background-position: 0 top, left 70%, 0 36px, calc(100vw - 5rem + 12px) 32px, left 50%, left calc(100% - 80px), left bottom;
    }
    /* #toast_container .toast_bg{
        width: 12rem;
        top: 1rem;
        left: calc((100vw - 12rem) / 2);
    } */
    #toast_container .reward{
        width: 10rem;
        left: calc((100vw - 10rem) / 2);
        top: 3.2rem;
    }
    #toast_container .operate{
        width: 84%;
        left: calc((100% - 84%) / 2);
        top: 13.6rem;
    }
    #toast_container .operate img{
        width: 4rem;
        height: auto;
        position: relative;
    }
}
@media only screen and (min-height: 590px) and (max-height: 680px) and (orientation: portrait) {
    .act_start{
        background-size: 100% auto, 45px auto,6rem auto, 5rem auto, 90% auto, 11.5rem auto;
        background-position: 0 top, left 70%, 0 36px, calc(100vw - 5rem + 12px) 34px, center 36%,  center 96%;
    }
    #receive .dice {
        width: 78%;
        bottom: 5.6rem;
    }
    #receive .thanks{
        width: 100px;
        right: 33px;
        bottom: 3.6rem;
    }
    #receive .click_btn{
        width: 92%;
    }
    #toast_container .toast_bg{
        width: 100%;
        top: 1rem;
        /* left: calc((100vw - 12rem) / 2); */
        left: 0;
    }
    #toast_container .reward{
        width: 10rem;
        left: calc((100vw - 10rem) / 2);
        top: 4rem;
    }
    #toast_container .operate{
        width: 90%;
        left: calc((100% - 90%) / 2);
        top: 15rem;
    }
    #toast_container .operate img{
        width: 4.6rem;
        height: auto;
        position: relative;
    }
}
@media only screen and (min-height: 680px) and (orientation: portrait){
    #receive .txt_pop{
        width: 100%;
        top: 7%;
    }
    #toast_container .toast_bg{
        width: 100%;
        top: 1rem;
        left: 0;
    }
    #toast_container .reward{
        width: 10rem;
        left: calc((100vw - 10rem) / 2);
        top: 3.8rem;
    }
    #toast_container .operate{
        width: 86%;
        left: calc((100% - 86%) / 2);
        top: 15rem;
    }
}
@media only screen and (min-height: 768px) and (orientation : portrait) {
    .act_start {
        background-size: 100% auto, 45px auto, 56% auto, 50% auto, 100% auto, 96% auto;
        background-position: 0 top, left 70%, 0 36px, 54vw 32px, center 30%, center 96%;
    }
    #receive .txt_pop{
        width: 100%;
        top: 9%;
    }
    #receive .dice {
        width: 100%;
        bottom: 8rem;
    }
    #receive .thanks{
        width: 100px;
        right: 9px;
        bottom: 5rem;
    }
    #receive .click_btn{
        bottom: 2.1rem;
    }
    .act_reward{
        background-size: 100% auto, 45px auto, 56% auto, 50% auto, 60px auto, 100% auto, 100% auto;
        background-position: 0 top, left 80%, 0 36px, 54vw 32px, left 50%, left calc(100% - 80px), left bottom;
        display: none;
    }
}
@media only screen and (min-height: 820px) and (orientation : portrait){
    #receive .txt_pop{
        width: 100%;
        bottom: 10rem;
    }
}


@media only screen and (min-height: 590px) and (max-height: 630px) and (orientation: portrait){
    #receive .txt_pop{
        width: 90%;
        max-width: calc(375px * 0.9);
        top: 3%;
    }
    #toast_container .toast_bg{
        width: 90%;
        top: 1rem;
        left: calc((100vw - 90%) / 2);
    }
    #toast_container .reward{
        width: 10rem;
        left: calc((100vw - 10rem) / 2);
        top: 3.6rem;
    }
    #toast_container .operate{
        width: 86%;
        left: calc((100% - 86%) / 2);
        top: 14rem;
    }
}
.point_to_right {
    width: 135px;
    height: auto;
    position: absolute;
    right: 25px;
    top: 15px;
}
.bg_to_share {
    background: url("../images/arrow_to_right.png") 0 0 no-repeat;
    background-size: 100% auto;
    -webkit-background-size: 100% auto;
    padding-top: 135.14%;
}

@-webkit-keyframes play {
    0% {
        transform: rotate(0);
        -webkit-transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@keyframes play {
    0% {
        transform: rotate(0);
        -webkit-transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@keyframes scale {
    0% {
        transform: scale(0.85);
    }
    65% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.85);
    }
}

.loading-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    display: none;
}
.lds-roller {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}
.lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 32px 32px;
}
.lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 138, 32, 0.6);
    margin: -3px 0 0 -3px;
}
.lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
    top: 50px;
    left: 50px;
}
.lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
    top: 54px;
    left: 45px;
}
.lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
    top: 57px;
    left: 39px;
}
.lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
    top: 58px;
    left: 32px;
}
.lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
    top: 57px;
    left: 25px;
}
.lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
    top: 54px;
    left: 19px;
}
.lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
    top: 50px;
    left: 14px;
}
.lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
    top: 45px;
    left: 10px;
}
@keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}