/* header start */
.header {
    position: fixed;
    top: 0;
    left: 20px;
    z-index: 99;
    right: 20px;
    height: 115px;
    padding-top: 20px;
    background-color: #F3F4F7;
}

.header .header-content {
    display: flex;
    align-items: center;
    height: 75px;
    background-color: #fff;
    border-radius: 10px;
}

.header-content .logo {
    margin: 0 22px 0 32px;
}

.header-content .menu ul {
    display: flex;
}

/* 行内元素加上下内边距有效，但是不会对父元素高度有任何影响 */
.header-content .menu ul li a {
    display: block;
    padding: 18px 10px;
    color: #000;
    border-radius: 10px;
}

.header-content .menu ul li a:hover {
    color: #9C71FC;
    background-color: #EFE8FF;
}

/* 分类图标在宽屏时是隐藏的 */
.header-content .menu .icon-fenlei {
    display: none;
}

/* end header */


/* sidebar-menu start */
.sidebar-menu {
    position: fixed;
    left: 20px;
    top: 115px;
    bottom: 20px;
    z-index: 99;
    width: 260px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
}

/* .menu-item 未激活时，只显示标题高度 */
.sidebar-menu .menu-item {
    height: 40px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: height 0.5s;
}

.sidebar-menu .menu-item .menu-item-title {
    display: flex;
    align-items: center;
    height: 40px;
    font-size: 16px;
    background: url(../images/r-jiantou.svg) no-repeat 204px center/16px;
    cursor: pointer;
}


.menu-item .menu-item-title .iconfont {
    margin: 0 12px 0 7px;
    font-size: 20px;
    color: #000;
}

.menu-item ul {
    padding-top: 10px;
}

.menu-item ul li {
    height: 39px;
    line-height: 39px;
    padding-left: 40px;
    background: url(../images/dot.svg) no-repeat 13px center/ 16px;
}

.menu-item ul li a {
    color: #000;
}



.menu-item.active .menu-item-title {
    background-image: url(../images/r-jiantou2.svg);
    background-color: #F77080;
    color: #fff;

}

.menu-item.active .menu-item-title .iconfont {
    color: #fff;
}

.close-button {
    display: none;
}

/* end sidebar-menu */

/* main start */
.main {
    margin: 115px 20px 0 300px;
}

.common-width {
    width: calc(100% + 20px);
}

.common-width .col {
    padding-right: 20px;
    margin-bottom: 20px;
}

.common-width .col .col-content {
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    height: 100%;
}

.common-title {
    font-size: 20px;
    color: #5B5B80;
}

/* main-part1 start */
.main-part1 {
    overflow: hidden;
}

.main-top .text {
    display: flex;
    justify-content: space-between;
    margin: 30px 0 20px;
}


.main-top .text .txt {
    color: #C5C5C5;
    font-size: 16px;
}

.main-top .text .number {
    font-size: 32px;
}

.main-top .more {
    color: #9C71FC;
    font-size: 16px;
}

/* end main-part1 */

/* main-part2 start */
.main-part2 {
    overflow: hidden;
}

/* 表格中内容会自动撑宽表格 */
table.orders {
    width: 100%;
    margin-top: 23px;
    font-size: 16px;
    table-layout: fixed;
}

table.orders tr th,
table.orders tr td {
    height: 56px;
}

table.orders tr th {
    text-align: left;
}

table.orders tr td {
    line-height: 56px;
    border-bottom: 1px solid #B9B9B9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.orders tr td.user {
    font-size: 0;
}

/* 消除元素之间的空白间隙，同时要给span加上垂直居中对齐 */

table.orders tr td.user span {
    font-size: 16px;
    vertical-align: middle;
}

table.orders tr th.width40 {
    width: 40%;
}

table.orders tr td img {
    vertical-align: middle;
    margin-right: 10px;
}

.hot-course .course-list {
    padding-top: 23px;
}

.hot-course .course-list li {
    display: flex;
    align-items: center;
    margin-top: 18px;
}

.hot-course .course-list .icon {
    width: 50px;
    height: 50px;
    margin-right: 15px;
    border-radius: 10px;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
}

.hot-course .course-list .text {
    flex-grow: 1;
    min-width: 0;
}

.icon-bg1 {
    background-color: #F0F2FF;
    color: #98A5FD;
}

.icon-bg2 {
    background-color: #EFE8FF;
    color: #B690FD;
}

.icon-bg3 {
    background-color: #FAD7DD;
    color: #F89AA6;
}

.icon-bg4 {
    background-color: #FFF5E0;
    color: #F6B653;
}

.icon-bg5 {
    background-color: #EFE8FF;
    color: #B189FD;
}

.hot-course .course-list .number {
    margin-top: 9px;
    color: #B9B9B9;
}

/* end main-part2 */

/* main-part3 start */
.main-part3 {
    overflow: hidden;
}

.notice .img-wrap {
    margin: 23px 0 23px;
}

.bl451-254 {
    position: relative;
    padding-top: calc(254 / 451 * 100%);
}

.notice .img-wrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notice .info {
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 26px;
}

.entry .common-title {
    margin-bottom: 20px;
}

.entry .col-item {
    margin-top: 50px;
}

.entry .col-item a {
    display: flex;
    align-items: center;
    color: #5B5B5B;
    font-size: 16px;
}

.entry .col-item .icon {
    width: 40px;
    height: 40px;
    margin-right: 15px;
    border-radius: 10px;
    font-size: 28px;
    line-height: 40px;
    text-align: center;
}

.entry .col-item .icon-ketang::before {
    margin-left: 5px;
}

/* end main-part3 */

/* main-part4 start */
.main-part4 {
    overflow: hidden;
}

.course-pay ul {
    margin-top: 22px;
}

.course-pay ul li {
    padding-top: 18px;
    display: flex;
    align-items: center;
}

.course-pay ul li .icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    margin-right: 15px;
    font-weight: bold;
    font-size: 22px;
    text-align: center;
    line-height: 50px;
}

.course-pay ul li .text {
    flex-grow: 1;
    min-width: 0;
}

.course-pay ul li .title {
    margin-bottom: 10px;
}

.course-pay ul li .price {
    color: #F77080;
}

.mychart {
    height: 400px;
}

/* end main-part4 */
/* end main */