.activityDet {
    width: 100vw;
    min-height: 100vh;
    background-color: #f2f6fc;

    .header {
        position: relative;
        width: 100%;
        height: 600rpx;
        overflow: hidden;

        .templateImg {
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 2;
        }

        .toBox {
            position: absolute;
            display: flex;
            align-items: center;
            z-index: 3;
            font-size: 0rpx;

            .text {
                min-width: 80rpx;
                color: white;
                padding: 0rpx 4rpx;
                z-index: 0rpx;
                border-radius: 14rpx;
                border: 2rpx solid white;
            }

            image {
                width: 24rpx;
                height: 24rpx;
                z-index: 1;
            }

            .editBtn {
                text-align: center;
                background-color: white;
                border-radius: 50%;
                margin-left: 6rpx;
                padding: 12rpx 12rpx;
            }
        }

        .avatar {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            z-index: 3;
        }

        .avatarImg {
            position: absolute;
            display: block;
        }

        .progressBox {
            position: absolute;
            bottom: 0px;
            left: 0px;
            padding: 20rpx 40rpx;
            box-sizing: border-box;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 2;
            display: flex;
            align-items: center;
            color: white;
            font-size: 24rpx;

            .progress {
                flex: 1;
                margin: 0px 30rpx;
                border-radius: 25rpx;
                overflow: hidden;
            }
        }
    }

    .btnsBox {
        margin-top: 40rpx;
        position: relative;
        text-align: center;
        font-size: 0rpx;

        .recordingBox {
            position: relative;
            display: inline-block;
            margin: 0 auto;

            .readingNow {
                position: absolute;
                left: 66rpx;
                top: 26rpx;
                width: 40rpx;
                height: 30rpx;
            }
        }

        .send {
            width: 313rpx;
            height: 88rpx;
        }

        .countDown {
            position: absolute;
            right: 20rpx;
            top: 0px;
            bottom: 0px;
            margin: auto;
            display: flex;
            align-items: center;
            color: #FD3545;
            font-size: 22rpx;
            font-weight: bold;

            .countBox {
                width: 12rpx;
                padding: 6rpx 10rpx;
                border-radius: 10rpx;
                margin: 0rpx 4rpx;
                color: white;
                background-image: linear-gradient(180deg, #FF7079 0%, #FE3D44 100%);
            }
        }
    }

    .music {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 40rpx;
        padding: 0rpx 20rpx;
        font-size: 0rpx;
        box-sizing: border-box;

        .playAuido {
            width: 214rpx;
            height: 87rpx;
        }

        .share {
            width: 500rpx;
            height: 87rpx;
            line-height: 87rpx;
            color: white;
            font-size: 30rpx;
            background: url('http://reader-wx.ai160.com/images/reader/card/share.png')no-repeat;
            background-size: 100% 100%;
        }
    }

    .blessing {
        margin-top: 30rpx;
        font-size: 36rpx;

        .content {
            height: 80rpx;
            width: 600rpx;
            text-align: center;
            margin: 0rpx auto;
        }

        .content:first-child {
            font-size: 28rpx;
            opacity: .7;
        }
    }

    .mask {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 999;

        .maskBox {
            position: fixed;
            top: 0rpx;
            right: 0rpx;
            bottom: 0rpx;
            left: 0rpx;
            margin: auto;
            padding: 71rpx 30rpx 30rpx;
            box-sizing: border-box;
            width: 290rpx;
            height: 290rpx;
            border-radius: 30rpx;
            color: white;
            background-color: rgba(0, 0, 0, 0.8);
            text-align: center;
            font-size: 30rpx;
            z-index: 10;

            .img {
                width: 110rpx;
                height: 110rpx;
                margin-bottom: 20rpx;
                animation: identifier 2.6s infinite linear;
            }
        }
    }
}