.zhu {
    position: fixed;
    top: calc(50% - 200px);
    left: calc(50% - 200px);
    width: 400px;
    height: 400px;
    z-index: 999999;
}

.lottery-btn {
    position: absolute;
    color: #fff;
    width: 40px;
    height: 40px;
    float: right;
    font-size: 18px;
    font-weight: bold;
    background: #666;
    text-align: center;
    line-height: 40px;
    border-radius: 30px;
    bottom: 0;
    left: calc(50% - 20px);
}

.zhu .pan {
    position: absolute;
    top: calc(50% - 150px);
    left: calc(50% - 150px);
    width: 300px;
    height: 300px
}

.zhu .pan .wai {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: #fdc081
}

.zhu .pan .wai::before {
    content: '';
    display: block;
    width: 86%;
    height: 86%;
    border-radius: 100%;
    position: absolute;
    top: 7%;
    left: 7%;
    background-color: #fff
}

.zhu .pan .wai span {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.zhu .pan .wai span::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    position: absolute;
    top: 6px;
    left: calc(50% - 8px)
}

.zhu .pan .wai span:nth-child(2) {
    transform: rotate(15deg)
}

.zhu .pan .wai span:nth-child(3) {
    transform: rotate(30deg)
}

.zhu .pan .wai span:nth-child(4) {
    transform: rotate(45deg)
}

.zhu .pan .wai span:nth-child(5) {
    transform: rotate(60deg)
}

.zhu .pan .wai span:nth-child(6) {
    transform: rotate(75deg)
}

.zhu .pan .wai span:nth-child(7) {
    transform: rotate(90deg)
}

.zhu .pan .wai span:nth-child(8) {
    transform: rotate(105deg)
}

.zhu .pan .wai span:nth-child(9) {
    transform: rotate(120deg)
}

.zhu .pan .wai span:nth-child(10) {
    transform: rotate(135deg)
}

.zhu .pan .wai span:nth-child(11) {
    transform: rotate(150deg)
}

.zhu .pan .wai span:nth-child(12) {
    transform: rotate(165deg)
}

.zhu .pan .wai span:nth-child(13) {
    transform: rotate(180deg)
}

.zhu .pan .wai span:nth-child(14) {
    transform: rotate(195deg)
}

.zhu .pan .wai span:nth-child(15) {
    transform: rotate(210deg)
}

.zhu .pan .wai span:nth-child(16) {
    transform: rotate(225deg)
}

.zhu .pan .wai span:nth-child(17) {
    transform: rotate(240deg)
}

.zhu .pan .wai span:nth-child(18) {
    transform: rotate(255deg)
}

.zhu .pan .wai span:nth-child(19) {
    transform: rotate(270deg)
}

.zhu .pan .wai span:nth-child(20) {
    transform: rotate(285deg)
}

.zhu .pan .wai span:nth-child(21) {
    transform: rotate(300deg)
}

.zhu .pan .wai span:nth-child(22) {
    transform: rotate(315deg)
}

.zhu .pan .wai span:nth-child(23) {
    transform: rotate(330deg)
}

.zhu .pan .wai span:nth-child(24) {
    transform: rotate(345deg)
}

.zhu .pan .wai span:nth-child(2n)::before {
    width: 14px;
    height: 14px
}

.zhu .pan .wai span:nth-child(4n)::before {
    background-color: #7c83f8
}

.zhu .pan .wai span:nth-child(4n-1)::before {
    background-color: #7efffd
}

.zhu .pan .wai span:nth-child(4n-2)::before {
    background-color: #fe7d00
}

.zhu .pan .wai span:nth-child(4n-3)::before {
    background-color: #e3ff2f
}

.xuanxiang {
    width: 80%;
    height: 80%;
    background-color: #fff;
    position: absolute;
    top: 10%;
    left: 10%;
    border-radius: 100%;
    overflow: hidden;
    transform:
}

.xuanxiang::after {
    content: '';
    display: block;
    width: 50%;
    height: 50%;
    background-color: #fff;
    position: absolute;
    top: 25%;
    left: 25%;
    border-radius: 100%;
    overflow: hidden
}

.xuanxiang span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.xuanxiang span::before {
    content: '';
    display: block;
    width: 0;
    border: 65px solid transparent;
    border-top-width: 110px;
    border-top-style: solid;
    position: absolute;
    left: calc(50% - 65px)
}

.xuanxiang span:nth-child(2) {
    transform: rotate(60deg)
}

.xuanxiang span:nth-child(3) {
    transform: rotate(120deg)
}

.xuanxiang span:nth-child(4) {
    transform: rotate(180deg)
}

.xuanxiang span:nth-child(5) {
    transform: rotate(240deg)
}

.xuanxiang span:nth-child(6) {
    transform: rotate(300deg)
}


.xuanxiang span:nth-child(2n-1)::before {
    border-top-color: #fcc
}

.xuanxiang span:nth-child(2n)::before {
    border-top-color: #ffc
}

.xuanxiang span i {
    display: block;
    font-style: normal;
    font-weight: bold;
    color: #f35;
    position: absolute;
    left: calc(50% - 30px);
    top: 5%;
    width: 60px;
    text-align: center;
    font-size: 16px
}

@keyframes turn {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(1080deg)
    }
}

@keyframes turn1 {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(1440deg)
    }
}

@keyframes turn2 {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(1320deg)
    }
}

@keyframes turn3 {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(1140deg)
    }
}

@keyframes turn4 {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(1200deg)
    }
}

@keyframes turn5 {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(300deg)
    }
}

@keyframes turn6 {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(1380deg)
    }
}

.nei {
    width: 34%;
    height: 34%;
    position: absolute;
    top: 33%;
    left: 33%;
    border-radius: 100%;
    background-color: #ffbf81;
    cursor: pointer;
    z-index: 3
}

.nei span {
    display: block;
    width: 100%;
    padding-top: 35px;
    color: #f35;
    font-size: 32px;
    text-align: center;
    transition: .3s
}

.nei:hover span {
    color: #fff;
    transition: .3s
}

.mao {
    width: 80%;
    height: 80%;
    position: absolute;
    top: 8%;
    left: 10%;
    text-align: center;
    z-index: 2
}

.mao::before {
    content: '';
    display: inline-block;
    border: 10px solid transparent;
    border-top: 18px solid #69f
}