@charset "UTF-8";

.lantern__warpper {
    position: fixed;
    top: 12px;
    left: 40px;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 999
}

    .lantern__warpper.lantern__secondary {
         left: 170px;
    } 

    .lantern__warpper.lantern__third {
        left: calc(100% - 260px);
    }

    .lantern__warpper.lantern__four {
         left: calc(100% - 130px);
    }

.lantern__box {
    position: relative;
    display: inline-block;
    width: 90px;
    height: 70px;
    background: rgba(216,0,15,.8);
    border-radius: 50% 50%;
    animation: lantern-swing 3s ease-in-out infinite alternate-reverse;
    -webkit-transform-origin: 50% -70px;
    -ms-transform-origin: 50% -70px;
    transform-origin: 50% -70px;
    -webkit-box-shadow: -5px 5px 50px 4px #fa6c00;
    box-shadow: -5px 5px 50px 4px #fa6c00
}

    .lantern__box:after, .lantern__box:before {
        content: "";
        position: absolute;
        height: 8px;
        width: 45px;
        left: 50%;
        border: 1px solid #dc8f03;
        background: -webkit-gradient(linear,left top,right top,from(#dc8f03),color-stop(orange),color-stop(#dc8f03),color-stop(orange),to(#dc8f03));
        background: -o-linear-gradient(left,#dc8f03,orange,#dc8f03,orange,#dc8f03);
        background: linear-gradient(90deg,#dc8f03,orange,#dc8f03,orange,#dc8f03)
    }

    .lantern__box:before {
        top: 0;
        border-radius: 5px 5px 0 0;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%)
    }

    .lantern__box:after {
        bottom: 0;
        border-radius: 0 0 5px 5px;
        -webkit-transform: translate(-50%,50%);
        -ms-transform: translate(-50%,50%);
        transform: translate(-50%,50%)
    }

.lantern__line {
    position: absolute;
    width: 2px;
    height: 12px;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%,-100%);
    -ms-transform: translate(-50%,-100%);
    transform: translate(-50%,-100%);
    background: #dc8f03
}

.lantern__circle {
    width: 80%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

    .lantern__circle, .lantern__circle .lantern__ellipse {
        height: 100%;
        margin: 0 auto;
        border-radius: 50%;
        border: 2px solid #dc8f03
    }

        .lantern__circle .lantern__ellipse {
            width: 50%
        }

        .lantern__circle .lantern__text {
            font-family: 华文行楷,Microsoft YaHei,sans-serif;
            font-size: 24.3px;
            color: #dc8f03;
            font-weight: 700;
            line-height: 66px;
            text-align: center
        }

.lantern__tail {
    position: relative;
    width: 4px;
    height: 12px;
    margin: 0 auto;
    animation: lantern-swing 4s ease-in-out infinite alternate-reverse;
    background: orange;
    border-radius: 0 0 5px 5px
}

    .lantern__tail .lantern__junction {
        position: absolute;
        top: 0;
        left: 50%;
        width: 8px;
        height: 8px;
        -webkit-transform: translate(-50%,8.4px);
        -ms-transform: translate(-50%,8.4px);
        transform: translate(-50%,8.4px);
        background: #e69603;
        border-radius: 50%
    }

    .lantern__tail .lantern__rect {
        position: absolute;
        top: 0;
        left: 50%;
        -webkit-transform: translate(-50%,10.8px);
        -ms-transform: translate(-50%,10.8px);
        transform: translate(-50%,10.8px);
        width: 8px;
        height: 24px;
        background: orange;
        border-radius: 5px 5px 0 5px
    }

@-webkit-keyframes lantern-swing {
    0% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg)
    }

    to {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg)
    }
}

@keyframes lantern-swing {
    0% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg)
    }

    to {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg)
    }
}

@media (max-width:460px) {
    .lantern__warpper {
        top: 8px;
        left: 30px
    }

        .lantern__warpper.lantern__secondary {
            left: calc(100% - 80px)
        }

    .lantern__box {
        width: 50px;
        height: 40px;
        -webkit-transform-origin: 50% -40px;
        -ms-transform-origin: 50% -40px;
        transform-origin: 50% -40px;
        -webkit-box-shadow: -5px 5px 50px -1px #fa6c00;
        box-shadow: -5px 5px 50px -1px #fa6c00
    }

        .lantern__box:after, .lantern__box:before {
            height: 4px;
            width: 25px
        }

    .lantern__line {
        width: 2px;
        height: 8px
    }

    .lantern__circle .lantern__text {
        font-size: 13.5px;
        line-height: 38px
    }

    .lantern__tail {
        width: 4px;
        height: 8px
    }

        .lantern__tail .lantern__junction {
            width: 8px;
            height: 8px;
            -webkit-transform: translate(-50%,5.6px);
            -ms-transform: translate(-50%,5.6px);
            transform: translate(-50%,5.6px)
        }

        .lantern__tail .lantern__rect {
            -webkit-transform: translate(-50%,7.2px);
            -ms-transform: translate(-50%,7.2px);
            transform: translate(-50%,7.2px);
            width: 8px;
            height: 16px
        }
}