/* nav-bar */
.nav-bar .van-nav-bar {
    background-color: #2F6BDD;
}

.nav-bar .van-nav-bar .van-icon {
    font-size: calc(20 * var(--px));
}

.nav-bar .van-nav-bar__title {
    color: #fff;
    font-size: calc(16 * var(--px));
}

/* 课程类目样式 */
.course {
    --c-l: 55;
    position: absolute;
    /* transform: translate(0, calc(var(--c-l) / -2 * var(--px))); */
    transform: translate(-50%, calc(var(--c-l) / -2 * var(--px)));
}

.course .circle {
    width: calc(var(--c-l) * var(--px));
    height: calc(var(--c-l) * var(--px));
    border: 3px solid rgba(255, 255, 255, .8);
    box-shadow: 3px 3px 4px 0 rgba(9, 25, 192, 0.6);
    border-radius: 50%;
    /* overflow: hidden; */
    margin: 0 auto calc(4 * var(--px));
    background-color: #3B5196;
}
.course.actived .circle {
    background-color: #001ED2;
}
.course.actived.end .circle {
    background-color: #DC9E28;
    box-shadow: 0px 0px calc(18 * var(--px)) 0px rgba(242, 187, 80, 0.56);
}
.course.actived.end .circle {
    border: none;
}
.course.actived.end .circle img {
    max-height: unset;
    max-width: unset;
    height: 170%;
}

.course .circle img {
    max-height: calc(100% - calc(20 * var(--px)));
}

.course .title {
    max-width: calc(110 * var(--px));
    width: max-content;
    color: #1248AE;
    font-size: calc(12 * var(--px));
    text-align: center;
    line-height: 1.5;
    padding: calc(6 * var(--px)) calc(10 * var(--px));
    border: 1px solid #fff;
    background-color: rgba(237, 245, 247, 0.8);
    border-radius: 3px;
}

/* 分数排行入口 */
.point-box {
    --l: 59;
    width: calc(var(--l) * var(--px));
    height: calc(var(--l) * var(--px));
    border: 1px solid #fff;
    border-radius: 50%;
    background-color: #1C2252;
    box-shadow: 3px 3px 4px 0 rgba(9, 25, 192, 0.6);
    position: fixed;
    right: calc(20 * var(--px));
    bottom: calc(50 * var(--px));
}

.point-box>img {
    max-height: calc(100% - calc(15 * var(--px)));
}

/* 弹出框 */
.popup .popup-content {
    max-width: 425px;
    width: 85vw;
    border-radius: calc(20 * var(--px));
    overflow: hidden;
    background-color: #fff;
    padding: 0 calc(20 * var(--px)) calc(16 * var(--px));
}

.popup .popup-header {
    padding: calc(24 * var(--px)) 0;
}

.popup .popup-header .popup-header__title {
    color: #0D3897;
    font-size: calc(20 * var(--px));
    font-weight: 700;
    line-height: 1.2;
}

.popup .popup-header .popup-header__title span {
    margin: 0 calc(14 * var(--px));
}

.popup .popup-header .popup-header__title::before,
.popup .popup-header .popup-header__title::after {
    content: '';
    width: calc(12 * var(--px));
    height: calc(2 * var(--px));
    background-color: rgba(13, 56, 151, .5);
}

.popup .close {
    --l: 48;
    width: calc(var(--l) * var(--px));
    height: calc(var(--l) * var(--px));
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .2);
    margin: calc(34 * var(--px)) auto 0;
}

.popup .close:active {
    background-color: rgba(255, 255, 255, .5);
}

.popup .close>img {
    width: calc(16 * var(--px));
}

/* 启动签到 */
.start-sign {
    --l: 177;
    width: calc(var(--l) * var(--px));
    height: calc(var(--l) * var(--px));
    margin: calc(10 * var(--px)) auto calc(34 * var(--px));
}

.start-sign .border {
    height: 100%;
    border: 1px dashed rgba(40, 106, 232, .19);
    border-radius: 50%;
}

.start-sign .border-1 {
    padding: calc(6 * var(--px));
}

.start-sign .border-2 {
    padding: calc(6 * var(--px));
}

.start-sign .start-sign-content {
    height: 100%;
    background-color: #C8D9F6;
    padding: calc(10 * var(--px));
    border-radius: inherit;
}

.start-sign .start-sign-content .sign {
    color: #fff;
    font-weight: 500;
    font-size: calc(24 * var(--px));
    height: 100%;
    line-height: 1.8;
    border-radius: inherit;
    position: relative;
}

.start-sign .start-sign-content .sign .inner-text {
    position: relative;
    z-index: 2;
}

.start-sign .start-sign-content .sign::after {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(-34.48deg, rgb(29, 98, 230) 13.471%, rgb(74, 136, 255) 86.346%);
    border-radius: inherit;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: opacity .5s linear;
}

.start-sign .start-sign-content .sign:active {
    opacity: .8;
}

/* 查看文件内容 */
.read-file .file {
    color: #666;
    max-width: calc(178 * var(--px));
    border-radius: calc(16 * var(--px));
    padding: calc(25 * var(--px)) calc(12 * var(--px)) 0;
    background-color: #EFF5FF;
    margin: auto;
}

.read-file .file>img {
    max-width: calc(95 * var(--px));
}

.read-file .file .name {
    text-align: center;
    font-size: calc(12 * var(--px));
    line-height: 1.2;
    padding-top: calc(10 * var(--px));
    padding-bottom: calc(12 * var(--px));
}

.read-file .file .check {
    width: 100%;
    font-size: calc(12 * var(--px));
    border-top: 1px solid #D1DAE9;
    padding: calc(10 * var(--px)) 0;
}

/* 在线学习 */
.videos {
    padding: calc(12 * var(--px)) calc(16 * var(--px)) 0;
}

.videos .videos-content {
    display: flex;
    flex-wrap: wrap;
    gap: calc(8 * var(--px));
}

.videos .video {
    width: calc(50% - calc(4 * var(--px)));
    height: calc(180 * var(--px));
    position: relative;
}

.videos .video .video-content,
.videos .video .video-content .poster {
    height: 100%;
}

.videos .video .video-content {
    position: relative;
}

.videos .video .video-content .poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.videos .video .video-info {
    color: #fff;
    font-size: calc(12 * var(--px));
    line-height: 1.3;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: calc(8 * var(--px)) calc(12 * var(--px));
    background-color: rgba(0, 0, 0, .5);
}

.videos .video .video-info .name {
    flex: 1 0 0;
    padding-right: calc(5 * var(--px));
}

.videos .video .video-info .van-icon {
    flex: 0 0 auto;
    display: none;
}

.videos .video.finished .video-info {
    color: #07c160;
}

.videos .video.finished .video-info .van-icon {
    display: block;
}

.videos .video .video-play {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.videos .video .video-play .play-icon {
    --r: 40;
    width: calc(var(--r) * var(--px));
    height: calc(var(--r) * var(--px));
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.videos .video:nth-of-type(1) {
    width: 100%;
}

/* 视频弹出框组件 */
.video-popup[data-id="video-popup"] {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    background-color: #000;
    position: relative;
}

.video-popup[data-id="video-popup"] .close {
    --r: 30;
    width: calc(var(--r) * var(--px));
    height: calc(var(--r) * var(--px));
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: calc(var(--r) * var(--px));
    right: calc(var(--r) * var(--px));
    z-index: 1000;
}

.video-popup[data-id="video-popup"]>video {
    width: 100%;
    display: block;
}

/* 文本提交popup */
.popup .remark .remark-textarea {
    position: relative;
}

.popup .remark .content textarea {
    font-size: calc(14 * var(--px));
    width: 100%;
    min-height: calc(200 * var(--px));
    border: none;
    background-color: #EFF5FF;
    border-radius: calc(20 * var(--px));
    padding: calc(12 * var(--px)) calc(20 * var(--px)) calc(30 * var(--px));
    display: block;
    box-sizing: border-box;
    resize: none;
}

.popup .remark .content textarea::placeholder {
    color: #A1A7B3;
    font-size: calc(14 * var(--px));
}

.popup .remark .remark-textarea .remark__bottom {
    width: 100%;
    text-align: right;
    font-size: calc(14 * var(--px));
    padding-right: calc(20 * var(--px));
    position: absolute;
    bottom: calc(10 * var(--px));
    right: 0;
}

.popup .remark .remark-textarea .remark__bottom .remark__max-word {
    color: #286AE8;
}

/* 课程学习 */
.popup .course-box {
    border-radius: calc(20 * var(--px));
    background-color: #EFF5FF;
    padding: calc(16 * var(--px)) calc(20 * var(--px));
    margin-bottom: calc(16 * var(--px));
}

.popup .course-box .title {
    font-size: calc(14 * var(--px));
    line-height: 1.2;
}

.popup .course-box:nth-last-of-type(1) {
    margin-bottom: 0;
}

.popup .course-box .btns {
    gap: calc(8 * var(--px));
    margin-top: calc(20 * var(--px));
}

.popup .course-box .btns .btn {
    margin: 0;
}

/* 课后实践 */
.popup .practice {
    position: relative;
}

.popup .practice .course-box .file-name {
    color: #286AE8;
    font-size: calc(12 * var(--px));
    line-height: 1.2;
    margin-top: calc(6 * var(--px));
    word-wrap: normal;
    word-break: break-all;
}

.popup .practice .van-uploader {
    position: absolute;
    z-index: -1;
}

/* 实践辅导 */
.popup .tutor .course-box .title {
    flex: 1 0 0;
    padding-right: calc(10 * var(--px));
}

.popup .tutor .course-box .btn {
    margin: 0;
    padding: calc(10 * var(--px)) calc(14 * var(--px));
}

/* 我的积分 */
.integral-box {
    height: 100%;
}
.integral-box .integral {
    padding: calc(54 * var(--px)) calc(18 * var(--px)) 0;
    border-bottom: 1px solid #E5E5E5;
    flex: 0 0 auto;
}

.integral-box .integral .integral-content {
    min-height: calc(120 * var(--px));
    font-size: calc(12 * var(--px));
    color: rgba(255, 255, 255, .5);
    border-radius: calc(12 * var(--px));
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: inset calc(-25 * var(--px)) calc(-12 * var(--px)) calc(61 * var(--px)) 0px rgba(0, 51, 246, 0.25);
    background: linear-gradient(196.53deg, rgba(0, 87, 255, 0.5) 3.408%, rgba(97, 148, 244, 0.5) 33.086%, rgba(43, 100, 211, 0.5) 53.9%), rgb(47, 109, 228);
    padding: calc(26 * var(--px)) calc(32 * var(--px));
    position: relative;
}
.integral-box .integral .integral-content .value {
    font-size: calc(50 * var(--px));
    font-weight: 700;
    color: rgba(255, 255, 255, .8);
    line-height: 1.4;
}
.integral-box .integral .integral-content .bg {
    width: calc(166 * var(--px));
    position: absolute;
    top: calc(16 * var(--px));
    right: calc(30 * var(--px));
}
.integral-box .rank{
    font-size: calc(12 * var(--px));
    flex: 1 0 0;
    overflow: hidden;
}
.integral-box .rank-header {
    flex: 0 0 auto;
    overflow: hidden;
    padding: 0 calc(20 * var(--px));
}  
.integral-box .rank-header .rank-header__content {
    text-align: center;
    padding: calc(32 * var(--px)) 0 calc(10 * var(--px));   
    border-bottom: 1px solid #E5E5E5;
    display: grid;
    grid-template-columns: repeat(7, auto);
    gap: calc(4 * var(--px));
}
.integral-box .rank-main {
    --w1: 0;
    --w2: 0;
    --w3: 0;
    --w4: 0;
    --w5: 0;
    --w6: 0;
    --w7: 0;
    text-align: center;
    padding: 0 calc(20 * var(--px)) calc(20 * var(--px));
    flex: 1 0 0;
    overflow: auto;
}
.integral-box .rank-main .row{
    margin-top: calc(32 * var(--px));
    gap: calc(4 * var(--px));
}
.integral-box .rank-main .row:nth-of-type(1){
    margin-top: calc(24 * var(--px));
}
.integral-box .rank-main .row .cell:nth-of-type(1) {
    width: calc(var(--w1) * 1px);
}
.integral-box .rank-main .row .cell:nth-of-type(2) {
    --w: 0;
    width: calc(var(--w2) * 1px);
}
.integral-box .rank-main .row .cell:nth-of-type(3) {
    --w: 0;
    width: calc(var(--w3) * 1px);
}
.integral-box .rank-main .row .cell:nth-of-type(4) {
    --w: 0;
    width: calc(var(--w4) * 1px);
}
.integral-box .rank-main .row .cell:nth-of-type(5) {
    --w: 0;
    width: calc(var(--w5) * 1px);
}
.integral-box .rank-main .row .cell:nth-of-type(6) {
    --w: 0;
    width: calc(var(--w6) * 1px);
}
.integral-box .rank-main .row .cell:nth-of-type(7) {
    --w: 0;
    width: calc(var(--w7) * 1px);
}
.integral-box .rank-main .cell.liking,
.integral-box .rank-main .cell.like .add {
    color: #3A72EE;
}
.integral-box .rank-main .cell .rank-icon {
    height: calc(26 * var(--px));
    display: block;
    margin: auto;
}
.integral-box .rank-main .cell .icon {
    height: calc(17 * var(--px));
    margin-left: calc(4 * var(--px));
}
/* 401 */
.box-403 {
    color: #333;
    text-align: center;
    padding: calc(20 * var(--px));
}
/* 终点弹框 */
.end-box .img img {
    max-height: calc(350 * var(--px));
    display: block;
    margin: auto;
}
/* 页面封面 */
.page-poster {
    width: 100%;
    height: 100%;
    background-color: #000;
    position: fixed;
    top: 0;
    left: 0;
}
.page-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 2s linear;
    filter: brightness(1);
}
.page-poster img.brightness {
    filter: brightness(0);
}