.mainwarp {
    width: 100%
}

    .mainwarp .banner {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: center
    }

        .mainwarp .banner img {
            z-index: -100;
            width: 100%;
            left: 0;
            top: 0;
            object-fit: cover;
            object-position: center center
        }

        .mainwarp .banner #myTab {
            position: absolute;
            bottom: -1px;
            border: 0
        }

            .mainwarp .banner #myTab .nav-link {
                font-size: .18rem;
                font-weight: 400;
                color: #67636d;
                background-color: #e6e6e6;
                padding: .08rem .48rem;
                border-radius: .05rem .05rem 0rem 0rem;
                margin: 0 .05rem
            }

                .mainwarp .banner #myTab .nav-link.active {
                    color: #094;
                    background-color: #fff
                }

        .mainwarp .banner .centerBtn {
            width: 1.5rem;
            height: .44rem;
            background-color: #fff;
            color: #317ee9;
            border-radius: .22rem;
            position: absolute;
            top: 65%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: .16rem
        }

    .mainwarp .subNav {
        width: 100%;
        background-color: #fff;
        display: flex;
        justify-content: center
    }

        .mainwarp .subNav .inner {
            width: 12.8rem;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap
        }

            .mainwarp .subNav .inner .subNavItem {
                margin-right: .8rem;
                padding: .3rem 0;
                color: #333;
                font-size: .18rem;
                font-weight: bold;
                line-height: .24rem
            }

                .mainwarp .subNav .inner .subNavItem.active, .mainwarp .subNav .inner .subNavItem:hover {
                    color: #094;
                    border-bottom: .02rem solid #094
                }

    .mainwarp .tab-content {
        width: 100%;
        background-color: #edf0f4;
        display: flex;
        justify-content: center
    }

        .mainwarp .tab-content .courseList {
            width: 12.8rem;
            display: flex;
            flex-wrap: wrap;
            padding-top: .6rem;
            padding-bottom: .72rem;
            margin-right: -0.26rem
        }

            .mainwarp .tab-content .courseList .listItem {
                width: 4rem;
                height: 4.92rem;
                border-radius: .1rem;
                overflow: hidden;
                margin-bottom: .3rem;
                margin-right: .26rem;
                position: relative
            }

                .mainwarp .tab-content .courseList .listItem .classTags {
                    z-index: 100;
                    position: absolute;
                    top: .2rem;
                    left: .2rem;
                    font-size: .14rem
                }

                .mainwarp .tab-content .courseList .listItem .mainPic {
                    width: 100%;
                    height: 2.50rem;
                    /*height: 3.05rem;
                    object-fit: cover;
                    object-position: center center;*/
                    background: #fff
                }

                .mainwarp .tab-content .courseList .listItem .intro {
                    padding: .3rem .24rem .3rem .28rem;
                    background-color: #fff
                }

                    .mainwarp .tab-content .courseList .listItem .intro .courseName {
                        font-size: .18rem;
                        font-weight: bold;
                        color: #333
                    }

                    .mainwarp .tab-content .courseList .listItem .intro .courseMsg {
                        font-size: .16rem;
                        font-weight: 400;
                        color: #333;
                        min-height: .5rem
                    }

                    .mainwarp .tab-content .courseList .listItem .intro .courseRate {
                        display: flex;
                        margin: .08rem 0
                    }

                        .mainwarp .tab-content .courseList .listItem .intro .courseRate .rate {
                            display: flex;
                            align-items: center
                        }

                            .mainwarp .tab-content .courseList .listItem .intro .courseRate .rate img {
                                width: .15rem;
                                height: .14rem;
                                margin-right: .05rem;
                                object-fit: contain
                            }

                            .mainwarp .tab-content .courseList .listItem .intro .courseRate .rate span {
                                margin-left: .05rem;
                                font-size: .16rem;
                                font-family: Arial;
                                font-weight: 400;
                                color: #ffd200;
                                line-height: 1
                            }

                        .mainwarp .tab-content .courseList .listItem .intro .courseRate .history {
                            margin-left: .24rem;
                            font-size: .16rem;
                            font-family: Arial;
                            font-weight: 400;
                            color: #999
                        }

                    .mainwarp .tab-content .courseList .listItem .intro .moreBtn {
                        font-size: .14rem;
                        font-weight: 500;
                        color: #094
                    }

                        .mainwarp .tab-content .courseList .listItem .intro .moreBtn img {
                            width: .18rem
                        }
/*UIÎÄ°¸µ÷Õû*/
.banner .footBtn {
    width: 1.5rem;
    height: .44rem;
    font-size: .16rem;
    font-weight: 400;
    border: 1px solid #094;
    border-radius: 5px;
    background: #094;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    overflow: hidden;
    position: absolute;
    top: 65%;
}