/*basic*/ * { margin: 0; padding: 0; } body { font-family: Microsoft Yahei, "微软雅黑", Arial; color: #000; font-size: 14px; background-color: #F6F8FB; } a { text-decoration: none; color: #000; } button { border: none; outline: none; } img { border: none; display: block; width: 100%; } li { list-style: none; } input { outline: none; } .clear::before, .clear::after { content: ''; clear: both; display: block; zoom: 1; } .wrap_95 { width: 95%; margin: 0 auto; } .wrap_92 { width: 92%; margin: 0 auto; } .wrap_96 { width: 96%; margin: 0 auto; } .wrap_86 { width: 86%; margin: 0 auto; } .wrap_76 { width: 76%; margin: 0 auto; } .wrap_70{ width: 70%; margin: 0 auto; } .wrap_68 { width: 68%; margin: 0 auto; } #content_box { height: 100vh; overflow: auto; } #content_box_h { height: 100vh; overflow: hidden; } .dis_flex_between { display: flex; justify-content: space-between; } .bor_bot { border-bottom: 1px solid rgba(225, 226, 226, 0.50); } .progressing { background: linear-gradient(270deg, #BC1D1D 0%, #C83A1B 100%); } .begin { background: linear-gradient(270deg, #E57813 0%, #F09A1A 100%); } .term_end { background: linear-gradient(270deg, #B4B4B4 0%, #D0D0D0 100%); } /* 头部 */ #public_header { position: relative; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; width: calc(100% - 80px); } #public_header .header_logo_nav { display: flex; align-items: center; } #public_header .header_logo_nav img { width: 140px; } #public_header .other { display: flex; align-items: center; position: relative; } #public_header .other li { color: #fff; margin-right: 20px; position: relative; display: flex; cursor: pointer; font-size: 16px; line-height: 46px; align-items: center; } #public_header .other li img { width: 24px; height: 24px; margin-right: 10px; } #public_header .header-right-item-badge{ position: absolute; top: -2px; left: 4px; width: 32px; height: 32px; border-radius: 50%; text-align: center; line-height: 32px; font-size: 13px; transform: scale(0.52); color: #fff; background-color: #D22B2C; } #public_header .logged_in img{ width: 26px; height: 26px; } #public_header .other .search .search_default { display: flex; align-items: center; } #public_header .other .search .search_click { display: none; } #public_header .other .search .search_click input { height: 24px; border: none; background: url(../images/icon/icon_search1.png) no-repeat rgba(255, 255, 255, 0.2) 10px center; background-size: 16px 16px; border-radius: 5px; padding-left: 35px; box-sizing: border-box; display: inline-block; color: #fff; } #public_header .other .search .search_click input::placeholder { color: rgba(0, 0, 0, 0.5); } #public_header .other .logged_in { padding-right: 20px; margin: 0; } #public_header .other .logged_in .role { font-size: 12px; margin-left: 6px; line-height: 16px; } #public_header .other .logged_in ul { display: none; position: absolute; border-radius: 4px; background: #FFF; box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.05); width: 206px; top: 46px; padding: 12px 0; overflow: hidden; z-index: 100; right: 0; } #public_header .other .logged_in ul li { margin: 0; } #public_header .other .logged_in ul li a { color: #7F7F7F; font-size: 14px; line-height: 48px; display: flex; align-items: center; padding: 0 23px; width: 100%; box-sizing: border-box; } #public_header .other .logged_in ul li a:hover { background: #F1F3F6; } #public_header .other .logged_in ul li a img { display: inline-block; width: 24px; height: 24px; } #public_header .other .logged_in ul li.exit { border-top: 1px solid #E5E6EB; } #public_header .other .logged_in img { border-radius: 50%; } #public_header .other .not_logged_in { display: none; } #public_header .other .not_logged_in a { color: #fff; } #public_header .other .not_logged_in .register a { border-radius: 90px; background: #FFF; display: inline-block; width: 102px; text-align: center; color: #BB271A; font-weight: 500; letter-spacing: -0.16px; } #public_header .other .logged_in::after { content: ''; position: absolute; width: 0; height: 0; border-width: 7px 7px 0; border-style: solid; border-color: #fff transparent transparent; right: 0; top: 50%; transform: translateY(-50%)rotate(0deg); transition: 0.5s; } #public_header .other .active::after { content: ''; position: absolute; width: 0; height: 0; border-width: 7px 7px 0; border-style: solid; border-color: #fff transparent transparent; right: 0; top: 50%; transition: 0.5s; transform: translateY(-50%)rotate(180deg) !important; } #public_header .other li .student { margin-left: 4px; padding: 0 6px; height: 16px; border-radius: 4px; background: #d22b2c; font-size: 12px; font-weight: 500; line-height: 16px; color: #fff; } #public_header .other li .teacher { margin-left: 4px; padding: 0 6px; height: 16px; border-radius: 4px; background: #d22b2c; font-size: 12px; font-weight: 500; line-height: 16px; color: #fff; } #public_header .other li:last-of-type { margin-right: 0; } #public_header .other .not_logged_in ul{ display: flex; } /* 底部 */ #public_footer { display: flex; justify-content: center; flex-wrap: wrap; padding: 17px 0 25px; border-top: 1px solid; border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.8); position: relative; margin-top: 56px; } #public_footer dt { position: absolute; left: 0; margin: 10px 40px 0 0; } #public_footer dd { margin: 10px 40px 0 0; } #public_footer dd:last-of-type { margin-right: 0; } #public_footer a { color: rgba(255, 255, 255, 0.8); text-decoration: underline; } /* 角色 */ #public_role { color: #FFF; display: inline-block; text-align: center; line-height: 18px; background-color: #7C5E29; border-radius: 18px; font-weight: 500; } /* 内容 */ #public_main { position: relative; min-height: calc(100vh - 95px); display: flex; flex-direction: column; /* justify-content: center; */ align-items: center; } .include_footer #public_main { min-height: calc(100vh - 95px - 102px); } /* 横导航 */ #public_horizontal_nav_main { margin-left: 119px; display: flex; align-items: center; column-gap: 29px; } #public_horizontal_nav_main li { /* margin-right: 77px; */ } #public_horizontal_nav_main li a { color: rgba(255, 255, 255, 0.4); display: block; cursor: pointer; padding: 12px 24px; box-sizing: border-box; text-align: center; font-size: 16px; } #public_horizontal_nav_main li.active a { color: #fff; } /* 左侧竖导航 */ #public_vertical_nav { width: 14%; min-width: 240px; margin-right: 35px; position: fixed; left: 2%; top: 50%; transform: translateY(-50%); z-index: 20; } #public_vertical_nav li { margin-bottom: 32px; } #public_vertical_nav li.active .img_parent { background-color: #fff; } #public_vertical_nav li a { display: inline-block; width: 88px; text-align: center; } #public_vertical_nav .img_parent { width: 88px; height: 88px; text-align: center; border-radius: 50%; position: relative; background-color: rgba(255, 255, 255, 0.30); } #public_vertical_nav img { width: 34px; margin: 0 auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } #public_vertical_nav p { margin-top: 12px; color: #FFF; font-size: 16px; line-height: 17px; } /* 横导航 */ #public_horizontal_nav { margin-bottom: 1.4%; position: relative; } #public_horizontal_nav ul { display: flex; align-items: center; width: calc(100% - 110px); flex-wrap: wrap; } #public_horizontal_nav li { margin: 0 2% 0 0; } #public_horizontal_nav li:nth-of-type(n+5) { margin-top: 20px; } #public_horizontal_nav li a { display: inline-block; line-height: 46px; padding: 0 30px; text-align: center; background-color: rgba(255, 255, 255, 0.2); border-radius: 46px; color: #fff; font-size: 16px; } #public_horizontal_nav li.active a { background-color: rgba(255, 255, 255, 0.8); color: #BB271A; } /* 二级左侧竖导航 */ #public_vertical_nav_sub { width: 14%; margin-right: 2%; min-width: 240px; background: rgba(11, 17, 35, 0.40); border-radius: 12px; padding: 48px 45px; box-sizing: border-box; max-height: 864px; } #public_vertical_nav_sub li { margin-bottom: 16px; } #public_vertical_nav_sub li:last-of-type { margin-bottom: 0; } #public_vertical_nav_sub a { color: #FFF; font-size: 16px; line-height: 40px; display: flex; align-items: center; padding: 0 12px; box-sizing: border-box; border-radius: 4px; } #public_vertical_nav_sub a img { width: 24px; height: 24px; margin-right: 12px; } #public_vertical_nav_sub li.active a { background: rgba(142, 159, 183, 0.30); } /* 二级左横导航 */ #public_horizontal_nav_sub { display: flex; justify-content: space-between; margin-bottom: 14px; } #public_horizontal_nav_sub ul { display: flex; } #public_horizontal_nav_sub ul li { margin-right: 8px; } #public_horizontal_nav_sub ul li a { display: inline-block; padding: 10px 20px; color: #808191; font-weight: 700; background-color: #ECECEC; border-radius: 6px; } #public_horizontal_nav_sub ul li.active a { background-color: #BD201D; color: #fff; } #public_select { width: 186px; background-color: #fff; line-height: 40px; padding: 0 12px; box-sizing: border-box; cursor: pointer; border-radius: 6px; font-size: 14px; position: relative; } #public_select.show { border-radius: 6px 6px 0 0; } #public_select dt { display: flex; justify-content: space-between; align-items: center; color: #333; font-weight: 700; } #public_select .dt { display: flex; justify-content: space-between; align-items: center; color: #333; font-weight: 700; } #public_select dd { display: none; position: absolute; width: 100%; z-index: 10; background-color: #fff; left: 0; border-radius: 0 0 6px 6px; overflow: hidden; } #public_select .dd { display: none; position: absolute; width: 100%; z-index: 10; background-color: #fff; left: 0; border-radius: 0 0 6px 6px; overflow: hidden; } #public_select dd li { padding: 0 12px; box-sizing: border-box; } #public_select .dd .li { padding: 0 12px; box-sizing: border-box; color: #333; font-weight: 500; } #public_select dd li:hover { background-color: rgba(11, 17, 35, 0.40); color: #fff; } #public_select .dd .li:hover { background-color: rgba(11, 17, 35, 0.40); color: #fff; } #public_select img { width: 16px; height: 16px; } /* 课程列表 */ #public_course_list { display: flex; flex-wrap: wrap; } #public_course_list .item { width: 18.4%; background-color: rgba(255, 255, 255, 0.3); border-radius: 10px; overflow: hidden; margin: 2% 2% 0 0; color: #FFF; position: relative; padding-bottom: 35px; border: 2px solid rgba(255, 255, 255, 0.50); box-shadow: 0px 0px 6.5px rgba(255, 255, 255, 0.30); box-sizing: border-box; } #public_course_list .item .item_top .img_parent.active::before{ z-index: 5; content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.3); border-radius: 10px 10px 0 0; } #public_course_list.public_course_list_6 .item { width: 15%; } #public_course_list .item .item_top { padding-bottom: 18px; } #public_course_list .item .img_parent { position: relative; text-align: center; } #public_course_list .item .img_parent .mark_btn { width: 34px; position: absolute; top: 16px; right: 16px; z-index: 6; display: none; } #public_course_list .item .img_parent .mark_btn .collect { display: none; } #public_course_list .item .img_parent span { font-size: 11px; display: inline-block; margin-top: 4px; } #public_course_list .item .introduce_default, #public_course_list .item .introduce_hover { padding: 16px 0 0; box-sizing: border-box; margin: 0 16px; height: 120px; } #public_course_list .item .introduce_hover { display: none; } #public_course_list .item .introduce_default h5 { position: relative; font-size: 16px; font-weight: normal; margin-bottom: 7px; /* display: flex; */ /* align-items: center; */ /* width: 100%; */ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding-right: 60px; } #public_course_list .item .introduce_default h5 p { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #public_course_list .item .introduce_default h5 span { position: absolute; top: 0; right: 0; color: #FFF; font-size: 10px; letter-spacing: -0.1px; margin-left: 10px; line-height: 18px; display: inline-block; padding: 0 6px; border-radius: 4px; } #public_course_list .item .introduce_hover p { font-size: 12px; line-height: 22px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } #public_course_list .item .introduce_default .info_num { display: flex; margin-top: 8px; } #public_course_list .item .introduce_default .info_num li { display: flex; align-items: center; margin-right: 24px; } #public_course_list .item .introduce_default .info_num img { display: inline-block; width: 15px; margin-right: 6px; } #public_course_list .item .study { display: block; width: 100%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } #public_course_list .item .study a { display: block; width: calc(100% - 36px); text-align: center; color: #fff; font-size: 12px; font-weight: 500; line-height: 32px; background-color: rgba(255, 255, 255, 0.3); border-radius: 32px; margin: 0 auto 20px; } #public_course_list .item a:hover { color: #BB271A; background-color: #fff; } /* 教师列表 */ #public_teacher_list { display: flex; flex-wrap: wrap; } #public_teacher_list .item { width: 18%; background-color: rgba(255, 255, 255, 0.3); border-radius: 10px; overflow: hidden; margin: 2% 2% 0 0; color: #FFF; position: relative; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, 0.50); box-shadow: 0px 0px 6.5px rgba(255, 255, 255, 0.30); box-sizing: border-box; } #public_teacher_list.public_teacher_list_6 .item { width: 15%; } #public_teacher_list .item .head_name_schoole { position: relative; display: flex; align-items: center; padding: 18px 15px 0; } #public_teacher_list .item .img_parent { width: 56px; margin-right: 8px; position: relative; } #public_teacher_list .item .img_parent img { border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); width: 56px; height: 56px; } #public_teacher_list .item .img_parent #public_role { font-size: 10px; position: absolute; z-index: 1; bottom: -8px; display: inline-block; left: 50%; width: 80%; transform: translateX(-50%); } #public_teacher_list .item a { color: #FFF; } #public_teacher_list .item h5 a { /* display: flex; */ align-items: center; } #public_teacher_list .item h5 p { font-size: 14px; font-weight: 600; line-height: 26px; } #public_teacher_list .item h5 span { /* margin-left: 8px; */ font-size: 12px; font-weight: 500; } #public_teacher_list .item h5 span.role { display: none; } #public_teacher_list .item .mark_btn { padding: 2px 10px; display: inline-block; border-radius: 10px; margin-top: 6px; cursor: pointer; position: absolute; top: 0px; right: 6px; } #public_teacher_list .item .mark_btn.collect { border: 1px solid rgba(255, 255, 255, 0.3); } #public_teacher_list .item .mark_btn.not_collect { background-color: rgba(255, 255, 255, 0.3); border: 1px solid transparent; } #public_teacher_list .item .mark_btn .collect { display: none; } #public_teacher_list .item .introduce_default { /* padding: 18px 15px 0; */ } #public_teacher_list .item .introduce_default .info_num { display: flex; /* justify-content: space-between; */ margin-top: 23px; padding: 0 15px; } #public_teacher_list .item .info_num li { display: flex; align-items: center; margin-right: 6%; font-size: 12px; } #public_teacher_list .item .info_num li:last-child{ margin-right: 0; } #public_teacher_list .item .info_num img { display: inline-block; width: 15px; margin-right: 6px; } #public_teacher_list .item .introduce_default .description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin: 20px auto; text-align: justify; height: auto; /* padding: 0 15px; */ line-height: 22px; font-size: 12px; width: calc(100% - 30px); } #public_teacher_list .item .course_list { border-top: 1px solid rgba(242, 242, 242, 0.4); /* padding: 18px 0 28px; */ margin: 0 15px; height: 95px; display: flex; flex-direction: column; justify-content: center; } #public_teacher_list .item .course_list li { letter-spacing: 0.28px; } #public_teacher_list .item .course_list li:nth-of-type(n+2) { margin-top: 8px; } #public_teacher_list .item .course_list li a { position: relative; color: #FFF; /* display: flex; */ /* align-items: center; */ /* justify-content: space-between; */ padding-right: 20px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #public_teacher_list .item .course_list li img { width: 6px; height: 12px; position: absolute; right: 0; top: 2px; } #public_teacher_list .item .introduce_default.introduce_hover { position: absolute; left: 0; top: 0; width: 100%; box-sizing: border-box; } #public_teacher_list .item .introduce_default.introduce_hover .img_parent, #public_teacher_list .item .introduce_default.introduce_hover .mark_btn { display: none; } #public_teacher_list .item .introduce_default.introduce_hover .info_num { margin-top: 5px; } #public_teacher_list .item .introduce_default.introduce_hover .description { -webkit-line-clamp: 10; border-top: 1px solid rgba(242, 242, 242, 0.4); padding-top: 15px; margin: 20px auto; } #public_teacher_list .item .introduce_default.introduce_hover .role { display: inline-block; } /* 查看更多 */ #public_more { text-align: center; margin: 40px 0 20px; } #public_more a { color: #fff; } #public_more img { width: 8px; display: inline-block; vertical-align: middle; } /* 二级标题 */ #public_sub_title { margin: 0 auto 18px; padding-top: 18px; } #public_sub_title a { display: inline-flex; align-items: center; color: #fff; } #public_sub_title img { width: 12px; height: 21px; transform: rotate(180deg); } #public_sub_title h5 { font-size: 32px; margin: 0 12px; padding-right: 12px; position: relative; } #public_sub_title h5::after { content: ''; position: absolute; height: 40%; width: 1px; background-color: #fff; right: 0; top: 50%; transform: translateY(-50%); } #public_sub_title P { position: relative; font-size: 24px; color: #86909C; } /* 位置 */ #public_location { display: flex; margin-bottom: 9px; } #public_location li { color: #C9CDD4; } #public_location a { color: #A0ACBB; display: inline-block; margin: 0 8px; line-height: 22px; } #public_location li:first-of-type a { margin-left: 0; } #public_location li.active a { color: #fff; } /* 切换 */ #public_tabs { position: relative; height: auto; padding: 28px 0 0; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.40); background: rgba(8, 14, 24, 0.40); backdrop-filter: blur(20px); margin: 0; } #public_tabs .swiper-pagination { position: static; display: flex; box-sizing: border-box; border-bottom: 1px solid rgba(217, 217, 217, 0.30); padding: 0 32px; } #public_tabs .swiper-pagination-bullet { background-color: transparent; height: auto; width: auto; font-size: 16px; color: #F2F3F5; opacity: 1; line-height: 45px; height: 45px; margin-right: 32px; } #public_tabs .swiper-pagination-bullet-active { color: #fff; font-weight: bold; } #public_tabs .swiper-pagination-bullet span { position: relative; display: inline-block; } #public_tabs .swiper-pagination-bullet-active span::after { content: ''; position: absolute; width: 100%; height: 2px; bottom: -1px; left: 50%; transform: translateX(-50%); background-color: #fff; } #public_tabs .swiper-wrapper { height: auto; } #public_tabs .swiper-slide { box-sizing: border-box; height: auto; opacity: 0!important; width: 100%!important; padding: 0 32px; } #public_tabs .swiper-slide-active { opacity: 1!important; } /* 搜索结果 */ #public_search { color: #FFF; font-size: 30px; font-style: normal; font-weight: 500; line-height: 36px; margin-bottom: 18px; } #public_search span { position: relative; display: inline-block; margin: 0 15px; padding: 0 13px; color: #BB271A; } #public_search span::before { content: ''; position: absolute; width: 8.5px; height: 16px; left: 0; top: 0; background: url(../images/icon/icon_public_search1.png) no-repeat; background-size: 100%; } #public_search span::after { content: ''; position: absolute; width: 8.5px; height: 16px; right: 0; bottom: 0; background: url(../images/icon/icon_public_search2.png) no-repeat; background-size: 100%; } #empty-cont{ font-size: 24px; color: #fff; font-weight: 500; } .select_wrap{ width: 140px; height: 30px; color: #fff; background-color: rgba(255,255,255,0.3); border-radius: 4px; outline: 0; } /* 分享二维码 */ .share-qrcode-wrap{ display: flex; flex-direction: column; align-items: center; position: absolute; top: 110%; right: 0; padding: 12px 16px; z-index: 99; background-color: #fff; border-radius: 4px; box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.05); } .share-qrcode-wrap .title{ font-size: 16px; color: #000; line-height: 24px; } .share-qrcode-wrap .qrcode{ width: 160px; height: 160px; margin: 8px 0; } .share-qrcode-wrap .qrcode img { width: 160px !important; height: 160px; margin: 0px 0; } .share-qrcode-wrap .txt{ font-size: 14px; color: #666; line-height: 24px; white-space: nowrap; }