html,
body {
    margin: 0;
    padding: 0;
    /* font-size: 40px !important; */
}

.ui-teach-box {
    width: 1.6rem;
    position: absolute;
    right: 0;
    bottom: -0.85em;
    z-index: 99;
}

.ui-teach-box img {
    width: 100%;
    height: 100%;
}

#panel-result {
    margin-top: 0.6667rem;
    min-height: 0.8rem;
}

#read-result {
    font-size: 0.8rem;
    color: #4482ff;
    font-weight: bold;
    text-align: center;
}

.dialog {
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    position: fixed;
    z-index: 11;
    background: rgba(0, 0, 0, 0.7);
    display: none;
}

.dialog .hongbao {
    width: 7.68rem;
    height: 9.88rem;
    position: absolute;
    left: calc(50% - 3.84rem);
    top: 20%;
}

.popIn {
    animation: popIn 0.3s ease;
}

.popOut {
    animation: popOut 0.3s ease;
}

.maskIn {
    animation: maskIn 0.3s ease;
}

.maskOut {
    animation: maskOut 0.3s ease;
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes popOut {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes maskIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes maskOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.container .reading-detail .tips-reading .tips-number {
    margin-top: 0.6667rem;
    font-size: 0.8rem;
    color: #4482ff;
    font-weight: bold;
}

.container .reading-detail .tips-reading .reading-status {
    margin: 0.8rem 0;
    text-align: center;
}

.container .reading-detail .tips-reading .reading-status .top {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 定义一个名为rotate的关键帧动画 */
    /* 应用动画到你的图标元素 */
}

.container .reading-detail .tips-reading .reading-status .top .icon {
    width: 0.7333rem;
    height: 0.72rem;
    margin-right: 0.2667rem;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.container .reading-detail .tips-reading .reading-status .top .spin-icon {
    animation: rotate 1.5s linear infinite;
}

.container .reading-detail .tips-reading .reading-status .top .text {
    font-size: 0.8rem;
    color: #000000;
    font-weight: bold;
}

.container .reading-detail .tips-reading .reading-status .center {
    font-size: 0.56rem;
    color: #000000;
    margin: 0.4133rem 0;
}

.container .reading-detail .tips-reading .reading-status .center .number {
    color: #eb810a;
}

.container .reading-detail .tips-reading .reading-status .bottom {
    font-size: 0.56rem;
    color: #000000;
}

.container .reading-detail .tips-reading .reading-status .bottom .number {
    color: #eb810a;
}

.container .reading-detail .stop-reading {
    width: 6.3467rem;
    height: 2.4133rem;
    font-size: 0.8rem;
    border-radius: 0.6667rem;
    font-size: 0.8rem;
    background-color: #a4a7e3;
    color: #ffffff;
    text-align: center;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 5px 5px 10px #5b5656;
}

.container .reading-detail .stop-reading :deep(.uni-countdown__splitor) {
    display: inline-block;
    margin-bottom: 0.0533rem;
    font-size: 0.4533rem;
}

.container .reading-detail .stop-reading :deep(.uni-countdown__splitor) span {
    color: #fff;
    display: inline-block;
}

#progressIconCount {
    position: absolute;
    width: 100%;
    height: 0.96rem;
    margin-top: -0.2rem;
}