/* pages/beautify/coach.wxss.wxss */
.coach{
    position: relative;
    background-color: #f9f0ed;
}
.coach-top-covers{
    width: 100%;
    height: 100rpx;
}
/* 顶部图片展示 */
.coach-top{
    /* height: 100vh; */
    width: 100vw;
    background-color: #f9f0ed;
    position: relative;
    z-index: 0;
    /* padding-bottom: 40vh; */
    padding-top: 0rpx;
    position: relative;
    top: -30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.coach-avatar{
    position: absolute;
    left: 30rpx;
    top: 70rpx;
    z-index: 100;
    border-radius: 30rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    color: #111;
    font-size: 30rpx;
    font-weight: bold;
}
.coach-avatar image{
    width: 100rpx;
    height: 100rpx;
    border-radius: 100rpx;
    margin-right: 20rpx;
}
.coach-camera{
    position: absolute;
    right: 20rpx;
    top: 60rpx;
    z-index: 100;
    border-radius: 30rpx;
    border: solid 10rpx #FF898F;
}
.coach .coach-close{
    width: 50rpx;
    height: 40rpx;
    background-color: #FF898F;
    text-align: center;
    color: #FFF;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    border-radius: 0 20rpx 0 20rpx;
}
.coach-camera camera{
    width: 220rpx; 
    height: 260rpx;
    border-radius: 20rpx;
    position: relative;
    /* z-index: 99; */
    transform: rotateY(360deg);
}
.coach-mirror{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    position: absolute;
    right: 30rpx;
    top: 60rpx;
    border:solid 1rpx #FF898F;
    border-radius: 40rpx;
    padding: 10rpx 30rpx;
    font-size: 30rpx;
    color: #111111;
}
.coach-mirror image{
    width: 30rpx;
    height: 30rpx;
    /* transform: rotate(30deg); */
    margin-right: 4rpx;
}

.coach-top-video{
    width: 600rpx;
    height: 720rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 30rpx;
    color: #222;
}
.coach-top-cover{
    width: 100%;
    height: 100%;
    padding-bottom:30rpx ;
}
.coach-top-text{
    margin-top: 40rpx;
    font-size: 32rpx;
    color: #111;
    font-weight: bold;
}
/* 底部视频列表 */

.coach-bottom{
    width: 100vw;
    background-color: white;
    /* position: fixed; */
    /* bottom: 0; */
    /* left: 0; */
    z-index: 1;
}
.coach-swiper{
    padding-top: 40rpx;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    height: 200rpx;
}

.coach-swiper-item{
    position: relative;
}
.coach-swiper-item-cover{
    width: calc(100% - 20rpx);
    height: 170rpx;
    margin-right: 20rpx;
    border-radius: 20rpx;
    position: relative;
}
.coach-swiper-item-cover-active{
    width: calc(100% - 20rpx);
    height: 160rpx;
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 20rpx;
}

/* 声音播放控制按钮 */
.video-control{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 20rpx 0 60rpx 30rpx;
    /* display: none; */
}
.video-control image{
    width: 44rpx;
    height: 44rpx;
    padding: 10rpx;
}
.video-control .source-right{
    flex:1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
}
.video-control .source-right .play{
    width: 100rpx;
    height: 100rpx;
    padding: 0 40rpx;
}
.video-control .source-right .next{
    transform: rotate(180deg);
}
.video-control .source-right .all-video{
    min-width: 120rpx;
    text-align:center;
    margin-left: 40rpx;
    margin-right: 30rpx;
    border-radius: 40rpx;
    border: solid 1rpx #FF898F;
    color: #FF898F;
    padding: 10rpx 20rpx;
    font-size: 26rpx;
}


/* 倒计时和分布展示 */

.steps-cont{
    font-size: 28rpx;
    color: #000;
    padding: 30rpx;
}
.steps-time{
    font-size: 70rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
}